/* Bundles public 2026 — micro-additions on top of bundles-redesign.css.
   Дополняет, не переписывает: чипы количества, teaser-список, экономия. */

.page-bundles-editorial .bundles-hero__panel {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 10px !important;
}

.page-bundles-editorial .bundle-card__teaser {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--bundle-muted);
  border-top: 1px solid var(--bundle-line);
  padding-top: 16px;
  margin-top: 18px;
}

.page-bundles-editorial .bundle-card__teaser li {
  position: relative;
  padding-left: 14px;
  font-style: italic;
}

.page-bundles-editorial .bundle-card__teaser li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--bundle-soft);
  font-style: normal;
}

.page-bundles-editorial .bundle-card__teaser-more {
  font-family: Jost, system-ui, sans-serif;
  font-size: 11px;
  font-style: normal !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bundle-soft);
  padding-left: 0 !important;
}

.page-bundles-editorial .bundle-card__teaser-more::before {
  content: none !important;
}

.page-bundles-editorial .bundle-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}

.page-bundles-editorial .bundle-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--bundle-line);
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.6);
  color: var(--bundle-muted);
  font-family: Jost, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

html[data-theme="dark"] .page-bundles-editorial .bundle-chip {
  background: rgba(27, 33, 28, 0.6);
}

.page-bundles-editorial .bundle-chip--new {
  border-color: rgba(73, 106, 85, 0.32);
  background: rgba(73, 106, 85, 0.12);
  color: var(--bundle-green-dark);
}

html[data-theme="dark"] .page-bundles-editorial .bundle-chip--new {
  background: rgba(183, 207, 186, 0.18);
  color: var(--bundle-green);
}

.page-bundles-editorial .bundle-chip--save {
  border-color: rgba(176, 96, 48, 0.32);
  background: rgba(220, 138, 73, 0.14);
  color: #8a4a18;
}

html[data-theme="dark"] .page-bundles-editorial .bundle-chip--save {
  background: rgba(220, 138, 73, 0.18);
  color: #f0bd86;
}

.page-bundles-editorial .bundle-card__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.page-bundles-editorial .bundle-card__retail {
  color: var(--bundle-soft);
  font-family: Jost, system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: line-through;
}

@media (max-width: 767.98px) {
  .page-bundles-editorial .bundle-card__teaser {
    font-size: 15px;
  }
}

/* =====================================================================
   Фикс «вылазящего» hero на мобильных.
   Блоки статистики (.bundles-hero__panel > div) собраны как flex-row
   с font-size: 36px и white-space: nowrap. На узких экранах длинный
   текст («МОЖНО СЭКОНОМИТЬ») + цена «460 ₽» не помещаются в 160px,
   и каждый блок раздвигает сетку, разрывая родительский контейнер.
   На мобильных:
   - сетку панели — две компактные колонки;
   - блоки — вертикально (метка сверху, цифра снизу);
   - уменьшенный размер цифр и адекватные паддинги.
   ===================================================================== */
@media (max-width: 767.98px) {
  /* Hero и контейнер: гарантируем, что ничего не выходит за viewport */
  .page-bundles-editorial .bundles-index > .container,
  .page-bundle-editorial .bundle-detail > .container {
    width: min(100% - 20px, 1120px) !important;
    max-width: 100% !important;
  }

  .page-bundles-editorial .bundles-hero {
    padding: clamp(20px, 5vw, 26px) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  /* Сетка панели — две одинаковые колонки, никаких minmax(160px) */
  .page-bundles-editorial .bundles-hero__panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Блоки статистики — вертикальная компоновка, меньше шрифт цифры */
  .page-bundles-editorial .bundles-hero__panel > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-height: 72px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    min-width: 0 !important;
  }

  .page-bundles-editorial .bundles-hero__panel span {
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
    line-height: 1.3 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  .page-bundles-editorial .bundles-hero__panel strong {
    font-size: 24px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* На самых узких — однострочные блоки в 2 колонки всё равно ок,
     но добавим страховку: горизонтальный скролл точно не появится. */
  body.page-bundles-editorial,
  body.page-bundle-editorial {
    overflow-x: clip;
  }
}

@media (max-width: 380px) {
  /* На очень узких — сжимаем ещё чуть-чуть и оставляем 2 колонки */
  .page-bundles-editorial .bundles-hero__panel > div {
    padding: 10px 12px !important;
  }

  .page-bundles-editorial .bundles-hero__panel strong {
    font-size: 22px !important;
  }
}