/* ============================================================
   Product page — characteristics block redesign
   Override skin for .stats-container (sillage, longevity,
   gender, seasons, time of day) — purple+magenta palette,
   site font, accent rail on rows, accessible scale chips.
   Markup comes from PROPERTY_GRAFIKI_HTML, not changed.
   ============================================================ */
.wrap-val-1 .stats-container,
.stats-container{
  --ps-purple:   #7c2a8f;
  --ps-purple-7: #571762;
  --ps-magenta:  #cf2682;
  --ps-night:    #3b1d6e;
  --ps-day:      #cf2682;
  --ps-ink:      #20151f;
  --ps-text:     #463c45;
  --ps-muted:    #8b8190;
  --ps-line:     #ece6ef;
  --ps-tint:     #f7f0fa;

  background:#fff;
  border:1px solid var(--ps-line);
  border-radius:18px;
  padding:18px 22px 12px;
  font-family:var(--theme-font-family), Arial, sans-serif;
  color:var(--ps-text);
  position:relative;
}

/* (Заголовок секции убран по запросу — был ::before "Характеристики аромата") */

.stats-container .stat-row{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:18px;
  align-items:center;
  padding:14px 0;
  border-top:1px solid var(--ps-line);
}
.stats-container .stat-row:first-of-type{ border-top:0; padding-top:6px; }
.stats-container .stat-row:last-of-type{ padding-bottom:6px; }

/* Left label — в одном стиле с подписями шкалы (слабый/сильный, женский/мужской) */
.stats-container .stat-label{
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:500; color:var(--ps-text);
}
.stats-container .stat-label .val-icon{
  width:32px; height:32px;
  background:var(--ps-tint);
  border-radius:9px;
  flex-shrink:0;
  position:relative;
}
/* Скрыть стандартный Aspro psevdoэлемент с эмодзи/SVG */
.stats-container .stat-label .val-icon::before{ content:none !important; display:none !important; }
/* Заменяем — наш набор иконок через CSS mask, окрашен в фиолетовый */
.stats-container .stat-label .val-icon::after{
  content:""; position:absolute; inset:6px;
  background:var(--ps-purple);
  -webkit-mask-position:center;
          mask-position:center;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-size:contain;
          mask-size:contain;
}
.stats-container .shleyf    .val-icon::after{ -webkit-mask-image:url(../images/note-stats/shleyf.svg);    mask-image:url(../images/note-stats/shleyf.svg); }
.stats-container .stoykost  .val-icon::after{ -webkit-mask-image:url(../images/note-stats/stoykost.svg);  mask-image:url(../images/note-stats/stoykost.svg); }
.stats-container .gender-row .val-icon::after{ -webkit-mask-image:url(../images/note-stats/gender.svg);   mask-image:url(../images/note-stats/gender.svg); }
.stats-container .season-year .val-icon::after{ -webkit-mask-image:url(../images/note-stats/season.svg);  mask-image:url(../images/note-stats/season.svg); }
.stats-container .time-day  .val-icon::after{ -webkit-mask-image:url(../images/note-stats/timeday.svg);   mask-image:url(../images/note-stats/timeday.svg); }

/* Scale rows (Шлейф / Стойкость) */
.stats-container .stat-scale .scale-labels,
.stats-container .gender .time-labels,
.stats-container .day-time .time-labels{
  display:flex; justify-content:space-between;
  font-size:12px; color:var(--ps-muted); margin-bottom:6px;
  letter-spacing:.3px;
}

.stats-container .progress-bar{
  position:relative; height:14px;
  background:var(--ps-line);
  border-radius:99px; overflow:hidden;
}

/* % посередине над шкалой (Шлейф, Стойкость) — наследует стиль .scale-labels */
.stats-container .progress-bar .progress{
  height:100%;
  background:linear-gradient(90deg,var(--ps-purple),var(--ps-magenta));
  border-radius:99px;
  transition:width .35s ease;
  box-shadow:0 1px 4px rgba(124,42,143,.25) inset;
}

/* === Сезон года: 4 mini bars in one row === */
.stats-container .seasons{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stats-container .seasons .season{ display:block; text-align:center; }
.stats-container .seasons .season-wrap{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; line-height:1; color:var(--ps-text); margin-bottom:6px;
}
.stats-container .seasons .icon-season{
  width:18px; height:18px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ps-purple);
}
.stats-container .seasons .icon-season::before{
  width:18px; height:18px;
  background-position:center !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  display:block !important;
}
.stats-container .seasons .progress-bar{ height:14px; }

/* === Пол: двух-цветный split-bar ===
   Markup: <progress-bar.male><progress.female width:X%></progress-bar>
   Слева (0..X%): женский = .progress.female (фиолетовый)
   Справа (X..100%): мужской = .progress-bar.male фон (синий-индиго)
*/
.stats-container .gender .progress-bar.male{
  height:14px;
  background:linear-gradient(90deg, var(--ps-night), #4f2db4);
  border-radius:99px; overflow:hidden; position:relative;
}
.stats-container .gender .progress-bar .progress.female{
  background:linear-gradient(90deg, var(--ps-purple), var(--ps-magenta));
  box-shadow:none;
  border-radius:0; /* прямой правый край → прямой делитель */
  border-right:2px solid #fff;
  position:relative;
}

/* === Время суток: двух-цветный split-bar ===
   Слева (0..X%): ночь = .progress.night (индиго)
   Справа (X..100%): день = .progress-bar.day фон (маджента → амбра без жёлтого)
*/
.stats-container .day-time .progress-bar.day{
  height:14px;
  background:linear-gradient(90deg, #cf2682, #e96aaa);
  border-radius:99px; overflow:hidden; position:relative;
}
.stats-container .day-time .progress-bar .progress.night{
  background:linear-gradient(90deg, #1d0a3a, var(--ps-night));
  box-shadow:none;
  border-radius:0; /* прямой правый край → прямой делитель */
  border-right:2px solid #fff;
  position:relative;
}

/* === Footnote ===
   Aspro выводит подпись через inline <style> с .stats-container::after
   { content: "По оценкам пользователей и экспертов" }. Перебиваем здесь. */
.wrap-val-1 .stats-container::after,
.stats-container::after{
  font-size:10.5px !important;
  line-height:1.2 !important;
  color:var(--ps-muted) !important;
  font-weight:400 !important;
  letter-spacing:.2px !important;
  margin:6px 0 0 !important;
  padding:0 !important;
  display:block !important;
  text-align:center !important;
}
.stats-container > p,
.wrap-val-1 .stats-container + p{
  text-align:center; font-size:10.5px; color:var(--ps-muted);
  margin:10px 0 0;
  font-weight:400;
}

/* ===== Mobile (≤767) ===== */
@media (max-width:767px){
  .stats-container{ padding:14px 14px 10px; border-radius:14px; }

  /* Перебиваем Aspro mobile-стили: серый фон строки, фикс-ширина, margin */
  .stats-container .stat-row{
    background:transparent !important;
    margin:0 !important;
    padding:12px 0 !important;
    grid-template-columns:1fr !important;
    width:auto !important;
    gap:6px !important;
    border-top:1px solid var(--ps-line);
  }
  .stats-container .stat-row:first-of-type{ border-top:0; padding-top:4px !important; }
  .stats-container .stat-row:last-of-type{ padding-bottom:4px !important; }

  /* Заголовок шкалы: компактный inline с иконкой слева, без плашки */
  .stats-container .stat-label{
    background:transparent !important;
    padding:0 !important;
    margin:0 !important;
    width:auto !important;
    font-size:13px;
    gap:8px;
  }
  .stats-container .stat-label .val-icon{
    width:24px; height:24px; border-radius:7px;
  }
  .stats-container .stat-label .val-icon::after{ inset:4px; }

  /* Шкала прогресса на всю доступную ширину */
  .stats-container .stat-scale,
  .stats-container .gender,
  .stats-container .day-time{ width:100%; }

  .stats-container .progress-bar{ height:12px; }

  /* Сезон года: 2 колонки, центрирование пары иконка+название уже стоит */
  .stats-container .seasons{ grid-template-columns:repeat(2,1fr); gap:10px 14px; }
  .stats-container .seasons .progress-bar{ height:10px; }

  /* Footnote */
  .stats-container::after{ margin-top:4px !important; }
}

@media (max-width:374px){
  .stats-container{ padding:12px 12px 8px; }
  .stats-container .seasons{ grid-template-columns:1fr 1fr; gap:8px 10px; }
}