/* ============================================================
   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 */
/* На 3-уровневой пирамиде «Пирамида аромата» скрыта */
.pyramyda-compose:has(.notes-middle) .strike-title{
  display:none !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;
}

/* На плоской единственный .notes-top без линии и без padding по вертикали */
.pyramyda-compose:not(:has(.notes-middle)) .notes-top{
  display:block !important;
  border-top:0 !important;
  padding:0 !important;
}
.pyramyda-compose:not(:has(.notes-middle)) .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;
  }
}