/* ============================================================
   Product page — pyramid block harmonization
   Унифицирует визуал .pyramyda-compose (3-уровневой и плоской)
   с .stats-container: общая белая карточка, hairline дividers,
   спокойные подзаголовки уровней, иконки нот оставлены как есть
   (бренд-маркер Fragrantica).
   Markup приходит из PROPERTY_NOTES_F (656), не меняем.
   ============================================================ */
.pyramyda-compose,
.wrap-val-1 .pyramyda-compose{
  --py-purple:   #7c2a8f;
  --py-purple-7: #571762;
  --py-magenta:  #cf2682;
  --py-ink:      #20151f;
  --py-text:     #463c45;
  --py-muted:    #8b8190;
  --py-line:     #ece6ef;

  background:#fff !important;
  border:1px solid var(--py-line) !important;
  border-radius:18px !important;
  padding:18px 22px 16px !important;
  margin:0 !important;
  font-family:var(--theme-font-family), Arial, sans-serif;
  /* такая же inset-тень что у Aspro .stats-container — даёт идентичную плотность рамки */
  box-shadow:inset 0 0 0 1px rgb(223,223,241) !important;
  /* содержимое — по центру по вертикали (карточка часто высокая, уравнивается со stats) */
  display:flex !important;
  flex-direction:column;
  justify-content:center;
}
.pyramyda-compose .pyramyda-compose-wrap{
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  flex:1;
}

/* Внутренние обёртки — прозрачные, без своих padding'ов и фонов */
.pyramyda-compose .pyramyda-compose-wrap,
.pyramyda-compose .pyramyda-content{
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
}

/* === Заголовки === единый стиль для «Ноты аромата» / «Верхние / Средние / Базовые ноты»
   Caps + letter-spacing, без фиолетового — спокойный muted */
/* Fragrantica иногда добавляет в HTML пирамиды цветные «notes-*» блоки —
   это пользовательские заметки/аккорды (например «BBQ Sauce Accord Added To
   The Bleu Base» в Bleu de Chanel), а не настоящие ноты. Скрываем их —
   на проде это 3 товара, но фильтр универсальный на любые color-классы. */
.pyramyda-compose .notes-bleu,
.pyramyda-compose .notes-yellow,
.pyramyda-compose .notes-grey,
.pyramyda-compose .notes-red,
.pyramyda-compose .notes-orange,
.pyramyda-compose .notes-purple,
.pyramyda-compose .notes-green{
  display:none !important;
}

/* Заголовок «Пирамида аромата» виден только на классической flat-пирамиде —
   единственный .notes-top без middle и без base. Во всех остальных случаях
   (3-уровневая, любая 2-уровневая, одиночные middle/base) — скрыт, потому
   что подзаголовки уровневых блоков сами всё объясняют. */
.pyramyda-compose .strike-title{
  display:none !important;
}
.pyramyda-compose:has(.notes-top):not(:has(.notes-middle)):not(:has(.notes-base)) .strike-title{
  display:block !important;
}
/* Section-heading «Ноты аромата» (только на плоской) */
.pyramyda-compose .strike-title{
  background:none !important;
  padding:0 0 10px 0 !important;
  margin:0 !important;
}
.pyramyda-compose .strike-title h3,
.pyramyda-compose .notes-top > h4,
.pyramyda-compose .notes-middle > h4,
.pyramyda-compose .notes-base > h4{
  font-size:12px !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  color:var(--py-muted) !important;
  font-weight:700 !important;
  margin:0 0 8px 0 !important;
  padding:0 !important;
  text-align:left !important;
  background:none !important;
  border:0 !important;
  line-height:1.2 !important;
}

/* === Уровни пирамиды — block-стек: заголовок сверху, ноты под ним === */
.pyramyda-compose .notes-top,
.pyramyda-compose .notes-middle,
.pyramyda-compose .notes-base{
  background:transparent !important;
  margin:0 !important;
  padding:14px 0 !important;
  border:0 !important;
  border-top:1px solid var(--py-line) !important;
  /* Сбрасываем border-radius от Aspro — иначе верхняя линия-разделитель загибается вверх по краям */
  border-radius:0 !important;
  display:block;
}
/* Первый уровень — без верхней линии (так же и в плоской — единственный уровень без линии) */
.pyramyda-compose .notes-top:first-of-type{
  border-top:0 !important;
  padding-top:0 !important;
}
.pyramyda-compose .notes-base:last-of-type{
  padding-bottom:4px !important;
}

/* Ряд нот — flex с переносом */
.pyramyda-compose .notes-top-wrap,
.pyramyda-compose .notes-middle-wrap,
.pyramyda-compose .notes-base-wrap{
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  flex-wrap:wrap;
  gap:14px 12px;
  align-items:flex-start;
}

/* Отдельная карточка ноты — без своих фонов/обводок */
.pyramyda-compose .notes{
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
}

/* Подпись ноты */
.pyramyda-compose .notes-text{
  font-size:12.5px !important;
  font-weight:400 !important;
  color:var(--py-text) !important;
  margin-top:4px !important;
  text-align:center;
  max-width:78px;
  line-height:1.25;
}
.pyramyda-compose .notes a:hover .notes-text{
  color:var(--py-purple) !important;
}

/* Иконка ноты увеличивается при hover — только desktop (mouse). */
@media (hover: hover) {
  .pyramyda-compose .notes-img{
    transition:transform .2s ease;
    transform-origin:center;
  }
  .pyramyda-compose .notes a:hover .notes-img{
    transform:scale(1.15);
  }
}

/* На плоской (одноуровневой) пирамиде — единственный .notes-top без линии
   и без padding по вертикали. Условие — НЕТ ни middle, ни base. */
.pyramyda-compose:not(:has(.notes-middle)):not(:has(.notes-base)) .notes-top{
  display:block !important;
  border-top:0 !important;
  padding:0 !important;
}
.pyramyda-compose:not(:has(.notes-middle)):not(:has(.notes-base)) .pyramyda-content{
  display:block !important;
}

/* ===== Mobile (≤767) ===== */
@media (max-width:767px){
  .pyramyda-compose,
  .wrap-val-1 .pyramyda-compose{
    padding:14px 14px 10px !important;
    border-radius:14px !important;
  }
  .pyramyda-compose .strike-title h3,
  .pyramyda-compose .notes-top > h4,
  .pyramyda-compose .notes-middle > h4,
  .pyramyda-compose .notes-base > h4{
    font-size:11px !important;
    letter-spacing:1.5px !important;
    margin-bottom:6px !important;
  }
  .pyramyda-compose .notes-top,
  .pyramyda-compose .notes-middle,
  .pyramyda-compose .notes-base{
    padding:12px 0 !important;
  }
  .pyramyda-compose .notes-top:first-of-type{ padding-top:0 !important; }
  .pyramyda-compose .notes-base:last-of-type{ padding-bottom:4px !important; }
  .pyramyda-compose .notes-top-wrap,
  .pyramyda-compose .notes-middle-wrap,
  .pyramyda-compose .notes-base-wrap{
    gap:12px 10px;
  }
  .pyramyda-compose .notes-text{
    font-size:12px !important;
    max-width:68px;
  }
}

/* ============================================================
   v2 (29.08.2026) — адаптивный размер иконок нот + распределение
   уровней по высоте карточки. План: PLAN-pyramid-adaptive-icons-2026-08-29.md
   Исходники иконок 120×120 → потолок 96px. Тиры считаются CSS-ом
   (:has + nth-child), фолбэк без :has = прежние 56px.
   ============================================================ */
.pyramyda-compose{
  --py-icon:56px;
  --py-label:82px;
}
.pyramyda-compose .notes img{
  width:var(--py-icon) !important;
  height:var(--py-icon);          /* явная высота: нет сдвига раскладки при lazyload */
  object-fit:cover;
}
.cell.pyramyda-compose .notes-top .notes,
.cell.pyramyda-compose .notes-middle .notes,
.cell.pyramyda-compose .notes-base .notes{
  max-width:var(--py-label) !important;
}
/* подпись на 4px уже плитки — как в v1 (78 при 82): иначе на 56px-тире длинные
   подписи растут и ряд из 9 нот на 1920 переносится на вторую строку */
.pyramyda-compose .notes-text{
  max-width:calc(var(--py-label) - 4px) !important;
}

/* --- Уровни 2–3-уровневой пирамиды расходятся по высоте карточки (desktop) --- */
@media (min-width:768px){
  .pyramyda-compose:has(.notes-middle, .notes-base) .pyramyda-compose-wrap{
    flex:1;
  }
  .pyramyda-compose:has(.notes-middle, .notes-base) .pyramyda-content{
    display:flex !important;
    flex-direction:column;
    flex:1;
    justify-content:space-evenly;
    gap:0;
  }
}

/* --- Тиры размеров: только широкий десктоп (контент карточки ≥ 515px) --- */
@media (min-width:1200px){
  /* 2–3 уровня, ни в одном ряду нет 6-й ноты → 68px */
  .pyramyda-compose:has(.notes-middle, .notes-base):not(:has(.notes-top-wrap .notes:nth-child(6))):not(:has(.notes-middle-wrap .notes:nth-child(6))):not(:has(.notes-base-wrap .notes:nth-child(6))){
    --py-icon:68px;
    --py-label:92px;
  }
  /* плоская (только .notes-top): 5 нот → 64px (1200–1365) / 72px (≥1366) */
  .pyramyda-compose:not(:has(.notes-middle)):not(:has(.notes-base)):not(:has(.notes-top-wrap .notes:nth-child(6))){
    --py-icon:64px;
    --py-label:88px;
  }
  /* плоская, ≤4 нот → 96px */
  .pyramyda-compose:not(:has(.notes-middle)):not(:has(.notes-base)):not(:has(.notes-top-wrap .notes:nth-child(5))){
    --py-icon:96px;
    --py-label:116px;
  }
}
@media (min-width:1366px){
  /* плоская, 6 нот → 64px; 5 нот → 72px */
  .pyramyda-compose:not(:has(.notes-middle)):not(:has(.notes-base)):not(:has(.notes-top-wrap .notes:nth-child(7))){
    --py-icon:64px;
    --py-label:88px;
  }
  .pyramyda-compose:not(:has(.notes-middle)):not(:has(.notes-base)):not(:has(.notes-top-wrap .notes:nth-child(6))){
    --py-icon:72px;
    --py-label:96px;
  }
  .pyramyda-compose:not(:has(.notes-middle)):not(:has(.notes-base)):not(:has(.notes-top-wrap .notes:nth-child(5))){
    --py-icon:96px;
    --py-label:116px;
  }
}