/* ============================================================
   Тиволи 2027 — тема по макету из redesign/
   Бордовый, кремовый, строгая типографика, кнопки почти без скруглений.
   Грузится последней и перекрывает палитру прототипа: имена переменных
   остались историческими (--green-*), чтобы не переписывать styles.css,
   но значения теперь бордовые.
   Шрифты: заголовки — Lora, тексты и интерфейс — Manrope.
   На макете значился Cormorant Garamond, но у него старостильные цифры: телефон
   и «от 10 штук» прыгали по высоте. Playfair оказался не лучше. Выбрали Lora
   (сравнение было на /_fonts.html): ровные лининговые цифры, умеренный контраст,
   четыре начертания. Телефон, цены и таблица тиражей идут табличными цифрами —
   они одной ширины, поэтому номер не пляшет по горизонтали.
   ============================================================ */

:root {
  /* Палитра и геометрия — по ТЗ «Визуальные правки карточки товара»
     (16.09.2026). ТЗ писалось на карточку, но это дизайн-система: бордовый
     на карточке и в шапке той же страницы обязан совпадать, поэтому
     значения заданы здесь и расходятся по всему сайту.
     Было до ТЗ: --wine-800 #6b1220, --paper #fff, --r 3px, --r-lg 4px. */
  --wine-900: #4a0d14;   /* подвал: тот же оттенок, что у основного, только глубже */
  --wine-800: #8C1424;   /* основной: CTA, активные состояния, цены */
  --wine-700: #74101D;   /* наведение на основную кнопку */
  --wine-600: #9B2B35;   /* иконки, мелкие акценты */
  --wine-100: #F8E9EB;   /* цена, выбранные состояния */
  --wine-050: #FCF3F3;   /* мягкие выделения */

  /* исторические имена прототипа → новые значения */
  --green-800: var(--wine-800);
  --green-700: var(--wine-700);
  --green-600: var(--wine-600);
  --green-100: var(--wine-100);
  --gold: #b08d57;
  --gold-dark: #8c6d3f;
  --gold-soft: #f0e6d6;
  --warm: #A66F4B;       /* декоративные иконки */

  --cream: #F7F3ED;      /* фон страницы */
  --cream-2: #F6F0E8;    /* второстепенные зоны */
  --cream-3: #EFE5DA;    /* заметный нейтральный */
  --paper: #FFFDFC;      /* тёплый белый вместо чистого #fff */
  --ink: #24201E;
  --ink-soft: #4B433D;
  --muted: #877C73;
  --muted-2: #A0968D;    /* подсказки */
  --line: #E7DDD3;       /* основные тонкие рамки */
  --line-soft: #EEE6DF;  /* внутренние разделители */
  --ok: #2F8B57;         /* «В наличии» */

  /* Единая система скруглений (16 / 14 / 12 / 9) */
  --r: 9px;              /* кнопки, поля */
  --r-panel: 12px;       /* цена, таблица, итог */
  --r-lg: 14px;          /* фото, крупные внутренние блоки */
  --r-card: 16px;        /* большая карточка */

  /* Тени — только там, где без них не обойтись: разделение строится
     на тёплых фонах и тонких границах */
  --shadow-sm: 0 3px 10px rgba(66, 46, 32, .06);
  --shadow-md: 0 8px 28px rgba(66, 46, 32, .055);
  --shadow-photo: 0 5px 20px rgba(66, 46, 32, .045);

  --font-display: 'Lora', 'Times New Roman', serif;
}

body { background: var(--cream); color: var(--ink); }

/* ——— Типографика ——— */
h1, h2, h3, .h4, .card__title, .mega__title, .logo {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(34px, 4vw, 54px); line-height: 1.08; }
h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; }
h3 { font-size: 22px; }
.lead { color: var(--ink-soft); font-size: 17px; line-height: 1.6; }

/* мелкие заголовки-надписи набираем разрядкой, как на макете */
.eyebrow,
.section-head p.eyebrow {
  font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--wine-700);
  margin: 0 0 14px;
}

/* ——— Кнопки: почти без скруглений, прописные, с разрядкой ——— */
.btn {
  border-radius: var(--r); font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; padding: 15px 28px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--sm { padding: 10px 16px; font-size: 12px; letter-spacing: .08em; }
.btn--gold, .btn--green, .btn--wine {
  background: var(--wine-800); color: #fff; border: 1px solid var(--wine-800);
}
.btn--gold:hover, .btn--green:hover, .btn--wine:hover { background: var(--wine-700); border-color: var(--wine-700); }
.btn--outline, .btn--gold-outline, .btn--ghost {
  background: transparent; color: var(--wine-800); border: 1px solid var(--wine-800);
}
.btn--outline:hover, .btn--gold-outline:hover, .btn--ghost:hover { background: var(--wine-100); }

.field-input, input[type="text"], input[type="number"], input[type="email"], input[type="tel"], select {
  border-radius: var(--r); border: 1px solid var(--line); background: var(--paper);
}

/* ——— Шапка по макету: светлая, в одну строку ——— */
.topbar { display: none; }
.header {
  background: var(--paper); color: var(--ink);
  border-bottom: 1px solid var(--line); box-shadow: none;
}
.header__row { min-height: 82px; gap: 26px; }
.logo img { height: 46px; width: auto; }
.nav { gap: 26px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.nav a { color: var(--ink); border-bottom: none; padding: 4px 0; }
.nav a:hover, .nav a.is-active { color: var(--wine-800); border-bottom: none; }
.header__phone {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink); letter-spacing: 0; line-height: 1.1;
}
.header__phone small { display: block; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .04em; }
.header__constructor {
  background: var(--wine-800); border: 1px solid var(--wine-800); color: #fff;
  border-radius: var(--r); padding: 13px 20px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.header__constructor:hover { background: var(--wine-700); }
.icon-btn { color: var(--ink); }
.icon-btn__badge { background: var(--wine-800); color: #fff; }

/* мега-меню: на светлой шапке цвета уже наследуются верно, правим только акценты */
.mega { border-top: 1px solid var(--line); }
.nav .mega__title, .mega .mega__title { color: var(--wine-800); font-size: 17px; text-transform: none; letter-spacing: 0; }
.nav .mega__list a, .mega .mega__list a { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; }

/* ——— Хиро по макету 2027 ——— */
.hero2 {
  background: var(--cream) url('/assets/tivoli/i/hero-2027.webp') right center / cover no-repeat;
  padding: 70px 0 60px; min-height: 760px;
}
.hero2::before {
  background: linear-gradient(90deg, var(--cream) 0%, var(--cream) 30%, rgba(248,244,238,.9) 44%, rgba(248,244,238,0) 66%);
}
.hero2__body { max-width: 620px; }
.hero2__title {
  font-family: var(--font-display); text-transform: uppercase; color: var(--wine-800);
  font-size: clamp(34px, 4vw, 54px); line-height: 1.08; font-weight: 700; margin: 0 0 8px;
}
.hero2__title em {
  display: block; font-style: normal; font-weight: 500; text-transform: uppercase;
  font-size: .5em; color: var(--wine-700); letter-spacing: .01em; margin-top: 10px;
}
.hero2__lead { max-width: 430px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.hero2__cta { flex-direction: column; align-items: flex-start; gap: 12px; max-width: 340px; }
.hero2__cta .btn { width: 100%; text-align: center; }

/* факты: иконка сверху, число в шрифте заголовков */
.facts { display: flex; gap: 34px; background: none; margin-bottom: 26px; }
.fact { background: none; border: 0; border-radius: 0; padding: 0; backdrop-filter: none; }
.fact b { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--ink); }
.fact span { font-size: 12px; color: var(--muted); }

.calc-card {
  background: rgba(255, 255, 255, .94); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-md); max-width: 560px;
}
.calc-card h2 {
  font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}

/* ——— Карточки товара и листинг ——— */
.card { border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: none; overflow: hidden; }
.card:hover { box-shadow: var(--shadow-md); transform: none; border-color: var(--gold); }
.card__title { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.card__price b { font-family: var(--font-display); font-size: 24px; color: var(--wine-800); }
.label { border-radius: 6px; background: var(--wine-100); color: var(--wine-800); }
.label--gold { background: var(--gold-soft); color: var(--gold-dark); }

.buybox { border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: none; }
.pricebox { border-radius: var(--r-panel); background: var(--wine-100); }
.pricebox__now b { font-family: var(--font-display); font-size: 34px; color: var(--wine-800); }
.opt { border-radius: var(--r); }
.opt.is-on { border-color: var(--wine-800); background: var(--wine-100); color: var(--wine-800); box-shadow: none; }
/* скругляется только рамка счётчика: у кнопок и поля внутри свои углы
   выглядели бы зазубринами */
.qty { border-radius: var(--r); }
.qty input, .qty button { border-radius: 0; }
.tier { border-radius: var(--r-panel); }
.tier.is-active { border-color: var(--wine-800); background: var(--wine-100); }
.price-table th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.price-table tr.is-active { background: var(--wine-100); }
.chip { border-radius: var(--r); }
.chip:hover, .chip.is-on { border-color: var(--wine-800); color: var(--wine-800); }

.composition__more { border-radius: var(--r); }
.composition__more:hover { border-color: var(--wine-800); color: var(--wine-800); }
.candy { border-radius: var(--r); }

/* ——— Подвал ——— */
.footer { background: var(--wine-900); color: rgba(255, 255, 255, .82); }
.footer a { color: rgba(255, 255, 255, .82); }
.footer a:hover { color: #fff; }
.footer h4 {
  font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.footer .logo--footer img { filter: brightness(0) invert(1); opacity: .92; }

@media (max-width: 1100px) {
  .facts { flex-wrap: wrap; gap: 22px 30px; }
}

/* сноска под калькулятором, как на макете */
.calc-card__note {
  font-size: 12px; color: var(--muted); margin: 14px 0 0;
  padding-top: 12px; border-top: 1px solid var(--line);
}

/* ——— Новости: архив, из навигации и главной исключены ——— */
.news { display: flex; flex-direction: column; }
.news__item { padding: 20px 0; border-bottom: 1px solid var(--line); display: grid;
  grid-template-columns: 1fr auto; gap: 4px 20px; align-items: baseline; }
.news__title { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--ink); }
.news__title:hover { color: var(--wine-800); }
.news__date { font-size: 13px; color: var(--muted); white-space: nowrap; }
.news__intro { grid-column: 1 / -1; margin: 0; font-size: 15px; color: var(--ink-soft); }
.pagination { display: flex; gap: 8px; margin-top: 26px; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r); font-size: 14px; }
.pagination .active span { background: var(--wine-800); color: #fff; border-color: var(--wine-800); }

.article { max-width: 780px; }
.article__date { font-size: 13px; color: var(--muted); margin: 0 0 20px; }

/* ——— Контакты и команда ——— */
.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 28px 0; }
.contacts__card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; background: var(--paper);
  display: flex; flex-direction: column; gap: 6px; }
.contacts__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.contacts__value { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--wine-800); }
.contacts__card .muted { font-size: 13px; }

.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 18px; }
.team__card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; background: var(--paper);
  display: flex; flex-direction: column; gap: 6px; }
.team__photo { width: 100%; height: 190px; object-fit: cover; border-radius: var(--r); margin-bottom: 8px; }
.team__name { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); }
.team__function { font-size: 13px; color: var(--muted); }
.team__contacts { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.team__contacts a { color: var(--wine-800); }

.worker { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.worker__photo { width: 100%; border-radius: var(--r-lg); }
.worker__function { font-size: 15px; color: var(--muted); margin: 0 0 12px; }
.worker__contacts { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.worker__contacts a { color: var(--wine-800); font-weight: 600; }

/* состав: несколько весов идут подряд, каждый со своим заголовком */
.composition__group + .composition__group { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }

@media (max-width: 700px) {
  .worker { grid-template-columns: 1fr; }
  .news__item { grid-template-columns: 1fr; }
}

/* ——— Форма заявки ——— */
/* Блок заявки переписан 21.09.2026 — см. «Блок заявки на главной» в конце файла. */
/* ловушка для ботов: не type=hidden и не инлайновый display:none */

/* ——— Подбор (корзина) ——— */
.cart--filled { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
.cart__table { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.cart__head, .cart__row { display: grid; grid-template-columns: 1fr 150px 110px 110px 40px; gap: 16px; align-items: center; padding: 14px 18px; }
.cart__head { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.cart__row + .cart__row { border-top: 1px solid var(--line); }
.cart__product { display: flex; gap: 14px; align-items: center; min-width: 0; }
.cart__img { width: 62px; height: 62px; object-fit: contain; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.cart__title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); display: block; }
.cart__title:hover { color: var(--wine-800); }
.cart__article { font-size: 12px; color: var(--muted); }
.cart__price, .cart__cost { font-weight: 700; }
.cart__cost { font-family: var(--font-display); font-size: 19px; color: var(--wine-800); }
.cart__remove button { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.cart__remove button:hover { color: var(--wine-800); }

.cart-summary { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); padding: 22px; }
.cart-summary__line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; }
.cart-summary__line span:first-child { color: var(--muted); }
.cart-summary__line--was span:last-child { text-decoration: line-through; color: var(--muted); }
.cart-summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.cart-summary__total b { font-family: var(--font-display); font-size: 28px; color: var(--wine-800); }
.cart-summary .muted { font-size: 13px; margin: 12px 0 0; }

.addtocart { display: inline-block; }
.buy-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0 6px; }
.card__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ——— Поиск, избранное, сравнение ——— */
.search-form { display: flex; gap: 8px; max-width: 520px; }
.search-form input { flex: 1; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); font: inherit; }
.search-results { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
.search-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.search-item__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); }
.search-item__title:hover { color: var(--wine-800); }
.search-item__intro { font-size: 14px; color: var(--ink-soft); margin: 4px 0 0; }

@media (max-width: 900px) {
  .cart--filled { grid-template-columns: 1fr; }
  .cart__head { display: none; }
  .cart__row { grid-template-columns: 1fr auto; row-gap: 10px; }
}

/* ——— Иконки в шапке и выпадающий поиск ——— */
.header__icons { display: flex; align-items: center; gap: 4px; }
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r); color: var(--ink);
}
.icon-btn:hover, .icon-btn.is-on { background: var(--wine-100); color: var(--wine-800); }
.icon-btn__badge {
  position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--wine-800); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}
.header__search-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  background: var(--paper); border-top: 1px solid var(--line);
  box-shadow: var(--shadow-md); padding: 18px 0;
}
.header__search-panel .search-form { max-width: 620px; margin: 0 auto; }

/* Цифры одной ширины: телефон, цены и таблица тиражей не «пляшут» по горизонтали */
.header__phone, .price-table, .pricebox__now b, .card__price b,
.cart__price, .cart__cost, .cart-summary, .fact b, .tier__price {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Каталог по макету 55e61523: карточка, панель сортировки, фильтры.
   mFilter отдаёт разметку на Bootstrap 5, которого у нас нет, поэтому
   здесь же гасим его артефакты: тени карточек, отрицательные поля .row
   (из-за них в узком сайдбаре появлялась горизонтальная прокрутка)
   и подписи на ручках ползунка цены, дублировавшие поля «от» и «до».
   ============================================================ */

/* ——— Карточка товара ——— */
.grid-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; transition: box-shadow .16s ease, border-color .16s ease;
}
.card:hover { border-color: rgba(107, 18, 32, .3); box-shadow: 0 6px 20px rgba(35, 32, 30, .08); transform: none; }
.card__top {
  position: absolute; inset: 12px 12px auto 12px; display: flex; justify-content: space-between;
  align-items: flex-start; gap: 8px; z-index: 2; pointer-events: none;
}
.card__top > * { pointer-events: auto; }
.card__weight {
  background: var(--wine-100); color: var(--wine-800); border-radius: 8px;
  padding: 5px 10px; font-size: 12px; font-weight: 700;
}
.card__fav .ms3f-btn, .card__fav button, .card__fav a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 0; background: none; color: var(--wine-800); cursor: pointer;
}
.card__img { display: flex; align-items: center; justify-content: center; height: 230px; background: var(--paper); padding: 16px; }
.card__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; padding: 0; }
.card__body { display: flex; flex-direction: column; gap: 6px; padding: 0 18px 18px; flex: 1; }
.card__title { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.card__title:hover { color: var(--wine-800); }
.card__article { font-size: 13px; color: var(--muted); }
.card__price { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.card__price b { font-family: var(--font-display); font-size: 25px; font-weight: 700; color: var(--wine-800); }
.card__price span { font-size: 13px; color: var(--muted); }
.card__stock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #2f7a4a; }
.card__stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2f7a4a; }
.card__buy { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 12px; }
.card__cart { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.qty--card { width: 100%; }
.qty button { width: 38px; height: 38px; border: 0; background: none; font-size: 17px; color: var(--ink); cursor: pointer; }
.qty button:hover { background: var(--wine-100); color: var(--wine-800); }
.qty input {
  flex: 1; width: 100%; min-width: 40px; height: 38px; border: 0; text-align: center;
  font: inherit; font-size: 15px; -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ——— Панель над выдачей ——— */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.toolbar__found { font-size: 15px; }
.toolbar__found b { font-weight: 700; }
.toolbar__controls { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.toolbar__sort { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.toolbar__sort select {
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
}
.toolbar__limit { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.limit-switch { display: inline-flex; gap: 6px; }
.limit-switch button {
  min-width: 46px; padding: 9px 0; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
}
.limit-switch button:hover { border-color: var(--wine-800); color: var(--wine-800); }
.limit-switch button.is-on { background: var(--wine-800); border-color: var(--wine-800); color: #fff; }

/* ——— Фильтры: гасим Bootstrap и собираем по макету ——— */
.filters { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 6px 18px 14px; overflow-x: hidden; }
.filters .card, .filters .mfilter-block {
  background: none; border: 0 !important; border-radius: 0; box-shadow: none !important; margin: 0;
}
.filters .card:hover { box-shadow: none !important; border-color: transparent; transform: none; }
.filters .mfilter-block + .mfilter-block { border-top: 1px solid var(--line) !important; }
.filters .card-header {
  background: none !important; border: 0 !important; padding: 16px 0 10px !important;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer;
}
.filters .card-header span.fw-semibold { font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 700; color: var(--ink); }
.filters .card-body { padding: 0 0 16px !important; }
/* отрицательные поля .row давали горизонтальную прокрутку в узком сайдбаре */
.filters .row { margin: 0 !important; display: flex; gap: 10px; }
.filters .row > [class*="col-"] { padding: 0 !important; flex: 1; max-width: none; }
.filters .mb-5 { margin-bottom: 18px !important; }

/* поля «от» и «до» */
.filters .input-group {
  display: flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  border-radius: 8px; padding: 0 10px; background: var(--paper);
}
.filters .input-group-text { border: 0 !important; background: none !important; padding: 0 !important; font-size: 13px; color: var(--muted); }
.filters .form-control { border: 0 !important; box-shadow: none !important; padding: 10px 0 !important; font: inherit; font-size: 15px; background: none; min-width: 0; }
.filters .form-control:focus { outline: none; box-shadow: none !important; }

/* ползунок: подписи на ручках дублировали поля «от» и «до» */
.filters .noUi-tooltip, .filters .noUi-handle .noUi-tooltip { display: none !important; }
.filters .noUi-target { border: 0; box-shadow: none; background: var(--line); height: 3px; margin: 4px 6px 0; }
.filters .noUi-connect { background: var(--wine-800); }
.filters .noUi-handle {
  width: 15px !important; height: 15px !important; right: -7px !important; top: -6px !important;
  border: 2px solid var(--wine-800); border-radius: 50%; background: var(--paper);
  box-shadow: none !important; cursor: pointer;
}
.filters .noUi-handle::before, .filters .noUi-handle::after { display: none; }

/* чекбоксы: у Bootstrap свои отступы и подсветка, тут свои */
.filters .mfilter-items { display: flex; flex-direction: column; }
.filters .form-check, .filters .mfilter-item { padding: 0 !important; margin: 0 !important; min-height: 0; }
.filters .form-check-label {
  display: flex !important; align-items: center; gap: 10px; width: 100%;
  padding: 7px 0; font-size: 14px; color: var(--ink); cursor: pointer; margin: 0;
}
.filters .form-check-label:hover { color: var(--wine-800); }
.filters .form-check-input {
  flex: 0 0 auto; width: 17px; height: 17px; margin: 0 !important; float: none;
  border: 1px solid var(--line); border-radius: 5px; cursor: pointer; appearance: none; background: var(--paper);
}
.filters .form-check-input:checked { background: var(--wine-800); border-color: var(--wine-800); }
.filters .form-check-input:checked::after { content: "✓"; display: block; color: #fff; font-size: 11px; line-height: 15px; text-align: center; }
.filters .form-check-input:focus { outline: none; box-shadow: none !important; }
/* количество прижимаем вправо, но не бейджем-таблеткой */
.filters .mfilter-count, .filters .form-check-label .badge {
  margin-left: auto !important; background: none !important; color: var(--muted) !important;
  border-radius: 0 !important; padding: 0 !important; font-size: 13px; font-weight: 400;
}
.filters .mfilter-count::before { content: "("; }
.filters .mfilter-count::after { content: ")"; }

/* кнопки фильтра */
.filters .mfilter-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.filters .btn-primary {
  background: var(--wine-800) !important; border: 1px solid var(--wine-800) !important; color: #fff !important;
  border-radius: 6px; padding: 11px 16px; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.filters .btn-outline-secondary {
  background: none !important; border: 1px solid var(--line) !important; color: var(--muted) !important;
  border-radius: 6px; padding: 10px 16px; font-size: 13px;
}
.filters .btn-outline-secondary:hover { border-color: var(--wine-800) !important; color: var(--wine-800) !important; }
.filters .badge.bg-primary { background: var(--wine-800) !important; }

@media (max-width: 1100px) { .grid-products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .grid-products { grid-template-columns: repeat(2, 1fr); } .card__img { height: 190px; } }
@media (max-width: 520px)  { .grid-products { grid-template-columns: 1fr; } }

/* ——— Лента разделов под шапкой ——— */
.catstrip { background: var(--cream); border-bottom: 1px solid var(--line); }
/* Бегущая строка во всю ширину. Прокрутка остаётся ручной: бег — это
   translate у дорожки, а сам контейнер прокручивается как обычно.
   При наведении и во время ручной прокрутки бег останавливается. */
.catstrip {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.catstrip::-webkit-scrollbar { display: none; }
.catstrip__track {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 0 6px;
  will-change: transform;
}
.catstrip:hover .catstrip__track,
.catstrip.is-paused .catstrip__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .catstrip__track { animation: none !important; }
}
.catstrip__item {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 12px 16px; border-radius: 10px; color: var(--ink); font-size: 14px;
}
.catstrip__item svg { color: var(--wine-800); flex: 0 0 auto; }
.catstrip__item:hover { background: rgba(107, 18, 32, .06); }
.catstrip__item.is-on { background: var(--wine-100); color: var(--wine-800); font-weight: 600; }
/* панель поиска раскрывается под всей шапкой, включая ленту */
.header { position: relative; }

/* ============================================================
   Сверка с макетом 55e61523, деталь за деталью.
   Этот блок идёт последним и правит то, что расходилось:
   цвета ссылок и иконок в шапке, бордовый ползунок цены,
   границы и тени карточек.
   ============================================================ */

/* ——— Шапка ——— */
.header__row { gap: 22px; }
/* активный пункт меню на макете подчёркнут бордовым */
.nav a { position: relative; padding: 6px 0; }
.nav a.is-active { color: var(--wine-800); }
.nav a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--wine-800);
}
.nav a:hover { color: var(--wine-800); }

.header__contact { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
/* номер — тёмный, иконка перед ним — бордовая */
.header__phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  color: var(--ink); letter-spacing: 0; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.header__phone svg { color: var(--wine-800); flex: 0 0 auto; }
.header__phone:hover { color: var(--wine-800); }
/* «Заказать звонок» — бордовая подчёркнутая ссылка, а не серая подпись */
.header__callback {
  font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 500;
  color: var(--wine-800); text-decoration: underline; text-underline-offset: 3px;
}
.header__callback:hover { color: var(--wine-900); }

/* иконки: разделитель слева, как на макете */
.header__icons { position: relative; padding-left: 20px; margin-left: 4px; }
.header__icons::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 26px; background: var(--line);
}
.icon-btn { color: var(--ink); }
.icon-btn:hover { background: var(--wine-100); color: var(--wine-800); }

/* ——— Фильтры: ползунок цены ——— */
/* Раньше правила проигрывали: CSS noUiSlider грузился после темы.
   Теперь тема идёт последней (tvLateCss), поэтому хватает обычной специфичности. */
.filters .noUi-target,
.filters .noUi-horizontal {
  height: 3px; border: 0; border-radius: 3px; background: var(--line);
  box-shadow: none; margin: 6px 8px 2px;
}
.filters .noUi-connect { background: var(--wine-800); }
.filters .noUi-horizontal .noUi-handle {
  width: 15px; height: 15px; right: -7px; top: -6px;
  border: 2px solid var(--wine-800); border-radius: 50%;
  background: var(--paper); box-shadow: none; cursor: pointer;
}
.filters .noUi-handle::before,
.filters .noUi-handle::after { display: none; }
.filters .noUi-tooltip, .filters .noUi-pips, .filters .noUi-value { display: none; }

/* «Сбросить» и «Показать ещё» — бордовые ссылки */
.filters .btn-outline-secondary,
.filters .mfilter-reset, .filters .mfilter-more {
  background: none; border: 0; color: var(--wine-800);
  text-decoration: underline; text-underline-offset: 3px;
  padding: 8px 0; font-size: 13px;
}
.filters .btn-outline-secondary:hover { color: var(--wine-900); border: 0; }
/* счётчик выбранных значений в заголовке фильтра */
.filters .badge.bg-primary { background: var(--wine-800); color: #fff; }
.filters .mfilter-chevron { color: var(--muted); }

/* ——— Карточки: граница и тень как на макете ——— */
.card { box-shadow: none; border-color: var(--line); }
.card:hover { box-shadow: 0 6px 20px rgba(35, 32, 30, .07); border-color: rgba(107, 18, 32, .25); }
/* сердечко в карточке — бордовый контур */
.card__fav svg, .card__fav button svg, .card__fav a svg { stroke: var(--wine-800); fill: none; }
.card__fav .is-active svg, .card__fav .active svg { fill: var(--wine-800); }

/* поля и селекты — одна светлая граница, без бутстраповской подсветки */
.toolbar__sort select:focus, .limit-switch button:focus,
.filters .form-control:focus, .filters .input-group:focus-within {
  outline: none; box-shadow: none; border-color: var(--wine-800);
}

/* ——— Хлебные крошки ——— */
/* Хлебные крошки (ТЗ 16.09.2026, п. 3). Разделитель и последний пункт —
   оба <span>: последний отличаем по :last-child. */
.breadcrumbs { gap: 11px; font-size: 14px; line-height: 20px; color: #8D8279; }
.breadcrumbs a { color: #8D8279; }
.breadcrumbs a:hover { color: var(--wine-800); }
.breadcrumbs span { color: #B2A79E; }
.breadcrumbs span:last-child { color: #6E635B; }

/* ——— Заголовок раздела ——— */
h1 { color: var(--ink); }

/* ============================================================
   Мобильная версия: шапка, выезжающее меню, фильтры каталога.
   Порог — 900 px, на нём в шапке перестаёт помещаться меню.
   ============================================================ */

.burger, .filters__head, .mobile-bar, .filters__apply { display: none; }

/* ——— Выезжающее меню ——— */
.drawer { position: fixed; inset: 0; z-index: 200; }
.drawer[hidden] { display: none; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(35, 32, 30, .5); }
.drawer__panel {
  position: absolute; inset: 0 auto 0 0; width: min(360px, 88vw);
  background: var(--paper); overflow-y: auto; padding: 18px 20px 32px;
  display: flex; flex-direction: column; gap: 22px;
  animation: drawer-in .2s ease;
}
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }

.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer__logo img { height: 38px; width: auto; }
.drawer__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 8px;
  background: none; color: var(--ink); cursor: pointer;
}
.drawer__close:hover { border-color: var(--wine-800); color: var(--wine-800); }

.drawer__search { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.drawer__search input { flex: 1; min-width: 0; border: 0; padding: 12px 14px; font: inherit; font-size: 15px; }
.drawer__search input:focus { outline: none; }
.drawer__search button {
  border: 0; background: none; padding: 0 14px; height: 44px;
  color: var(--wine-800); cursor: pointer;
}

.drawer__cta { width: 100%; text-align: center; border-radius: 6px; }

.drawer__section { display: flex; flex-direction: column; gap: 10px; }
.drawer__title {
  font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.drawer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.drawer__list li + li { border-top: 1px solid var(--line); }
.drawer__list a { display: block; padding: 11px 0; font-size: 16px; color: var(--ink); }
.drawer__list a:hover { color: var(--wine-800); }
.drawer__all {
  font-size: 14px; color: var(--wine-800); text-decoration: underline; text-underline-offset: 3px;
}

.drawer__contacts { display: flex; flex-direction: column; gap: 4px; margin-top: auto;
  padding-top: 20px; border-top: 1px solid var(--line); }
.drawer__phone {
  font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.drawer__hours, .drawer__mail { font-size: 13px; color: var(--muted); }
.drawer__mail { color: var(--wine-800); }
.drawer__messengers { display: flex; gap: 10px; margin-top: 14px; }
.messenger {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 14px; color: var(--ink);
}
.messenger svg { flex: 0 0 auto; }
.messenger--wa { color: #1f8f4e; }
.messenger--tg { color: #2b8fc9; }
.messenger:hover { border-color: currentColor; }

/* ——— Планшет и телефон ——— */
@media (max-width: 900px) {
  .burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 0; background: none; color: var(--ink);
    cursor: pointer; border-radius: 8px; margin-left: -8px;
  }
  .burger:hover { background: var(--wine-100); color: var(--wine-800); }

  .header__row { min-height: 62px; gap: 8px; flex-wrap: nowrap; }
  .logo img { height: 34px; }
  .nav, .header__contact, .header__spacer, .catstrip { display: none; }

  /* в шапке остаются телефон, избранное, сравнение и корзина */
  .header__icons { margin-left: auto; padding-left: 0; gap: 0; }
  .header__icons::before { display: none; }
  .icon-btn { width: 38px; height: 38px; }
  .icon-btn[aria-label="Поиск"] { display: none; }
  .icon-btn--phone { color: var(--wine-800); }

  /* ——— Каталог: кнопки фильтра и сортировки ——— */
  .mobile-bar { display: flex; gap: 10px; margin-bottom: 18px; }
  .mobile-bar__btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--paper); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
  }
  .mobile-bar__btn:hover, .mobile-bar__btn:active { border-color: var(--wine-800); color: var(--wine-800); }

  .catalog { display: block; }

  /* сайдбар остаётся на месте в DOM, но показывается поверх страницы */
  .filters {
    position: fixed; inset: 0 auto 0 0; z-index: 210; width: min(360px, 92vw);
    border-radius: 0; border: 0; padding: 0 18px 100px; overflow-y: auto;
    transform: translateX(-100%); transition: transform .22s ease; visibility: hidden;
  }
  .filters.is-open { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(35, 32, 30, .25); }

  .filters__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; z-index: 2; background: var(--paper);
    padding: 16px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
  }
  .filters__head span { font-size: 16px; font-weight: 700; }
  .filters__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px;
    background: none; color: var(--ink); cursor: pointer;
  }
  .filters__apply {
    display: block; position: sticky; bottom: 0; width: 100%;
    margin-top: 16px; border-radius: 6px;
  }
  /* родные кнопки mFilter в панели не нужны: применяем своей */
  .filters .mfilter-buttons { display: none; }

  .toolbar { display: none; }
  .grid-products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card__img { height: 170px; padding: 12px; }
  .card__body { padding: 0 12px 14px; }
  .card__title { font-size: 16px; }
  .card__price b { font-size: 21px; }
}

@media (max-width: 560px) {
  .logo img { height: 30px; }
  .icon-btn { width: 36px; height: 36px; }
  .grid-products { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card__img { height: 140px; }
  .card__title { font-size: 15px; }
  .card__price b { font-size: 19px; }
  .card__cart { font-size: 11px; padding: 10px 8px; letter-spacing: .04em; }
  .qty button { width: 32px; height: 34px; }
  .qty input { height: 34px; }
}

@media (max-width: 380px) {
  .grid-products { grid-template-columns: 1fr; }
  .card__img { height: 200px; }
}

/* ——— Статус наличия (коммерческий фактор §3) ——— */
.stock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stock--in { color: #2f7a4a; }
.stock--order { color: #b3873a; }
.stock--out { color: var(--muted); }
.pricebox .stock { margin-top: 6px; }

/* ============================================================
   Хиро на узких экранах.
   На десктопе читаемость даёт горизонтальный градиент: слева сплошной кремовый,
   справа прозрачный, текст лежит на пустой части фотографии. На мобильном этот
   приём не работает — картинка занимает всю ширину, и «пустой» левой части
   в кадре не остаётся, текст ложится прямо на композицию с подарками.
   Поэтому здесь вуаль вертикальная и почти в цвет фона: фотография остаётся
   фактурой по нижнему краю, а текст читается на сплошном.
   ============================================================ */
@media (max-width: 1100px) {
  .hero2 {
    min-height: 0;
    /* снизу оставляем полосу, где фотография видна в полную силу */
    padding: 30px 0 230px;
    /* показываем правую часть кадра — там сама композиция, а не пустое поле */
    background-position: 72% center;
  }
  /* Ядро вуали — в левом верхнем углу, у заголовка. Это середина между двумя
     крайностями: вертикальная вуаль держала верх плотным по всей ширине и прятала
     фотографию, а эллипс от середины левого края открывал весь правый борт и
     возвращал исходную проблему — текст снова ложился на композицию.
     Отсюда плотность растёт по диагонали: густо у заголовка, вполсилы в правом
     верхнем углу, прозрачно в правом нижнем. */
  .hero2::before {
    background: radial-gradient(
      150% 135% at -4% 6%,
      rgba(248, 244, 238, .98) 0%,
      rgba(248, 244, 238, .95) 34%,
      rgba(248, 244, 238, .82) 50%,
      rgba(248, 244, 238, .54) 64%,
      rgba(248, 244, 238, .22) 80%,
      rgba(248, 244, 238, 0) 100%
    );
  }
  .hero2__body { max-width: none; }
  .hero2__title { font-size: clamp(30px, 7vw, 44px); }
  .hero2__lead { max-width: none; }
  .hero2__cta { max-width: none; flex-direction: row; flex-wrap: wrap; }
  .hero2__cta .btn { width: auto; flex: 1 1 220px; }
}

@media (max-width: 700px) {
  .hero2 {
    padding: 24px 0 190px;
    background-position: 76% center;
  }
  /* на телефоне ядро плотнее и держится дольше: текст занимает почти всю ширину,
     поэтому правый верхний угол открывается слабее, чем на планшете */
  .hero2::before {
    background: radial-gradient(
      145% 130% at -6% 5%,
      rgba(248, 244, 238, .985) 0%,
      rgba(248, 244, 238, .96) 38%,
      rgba(248, 244, 238, .86) 54%,
      rgba(248, 244, 238, .60) 68%,
      rgba(248, 244, 238, .26) 84%,
      rgba(248, 244, 238, 0) 100%
    );
  }
  .hero2__cta { flex-direction: column; }
  .hero2__cta .btn { width: 100%; flex: none; }
  /* в строку четыре факта не влезают и последний переносится одиноко */
  .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
  .fact b { font-size: 22px; }
  .calc-card { padding: 18px; }
  .calc-card__row { grid-template-columns: 1fr; }
}

/* ——— Списки значений в фильтрах ——— */
/* Инлайновый max-height от mFilter перебивается только !important. */
.filters .mfilter-items {
  max-height: none !important;
  overflow: visible !important;
  display: flex; flex-direction: column;
}
.filters .form-check-label { padding: 9px 0; }
.filters .form-check + .form-check { border-top: 1px solid rgba(230, 222, 212, .55); }
.filters .mfilter-more {
  align-self: flex-start; margin-top: 10px; padding: 6px 0;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--wine-800); text-decoration: underline; text-underline-offset: 3px;
}
.filters .mfilter-more:hover { color: var(--wine-900); }
/* Стрелка — галочка из рамок, а не символ «⌄»: у символа рисунок сидит у низа строки
   и выглядел прибитым к подчёркиванию (06.10.2026). */
.filters .mfilter-more { display: inline-flex; align-items: center; gap: 8px; }
.filters .mfilter-more::after {
  content: ''; width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s;
}
.filters .mfilter-more.is-open::after { transform: translateY(2px) rotate(-135deg); }

/* ============================================================
   Блок оптовых цен на главной (макет 14.09.2026).

   Раскладка двухколонная только когда задана иллюстрация
   (`tivoli_wholesale_art` → класс .wholesale--art). Без картинки
   колонка текста занимает всю ширину, а карточки становятся шире —
   пустое место справа выглядело бы обрывом вёрстки.
   ============================================================ */
.wholesale__inner { display: block; }
.wholesale--art .wholesale__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 38%);
  gap: 40px;
  align-items: start;
}

/* плашка-надзаголовок */
.pill-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 14px;
  border-radius: 999px;
  background: var(--wine-100);
  color: var(--wine-800);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pill-eyebrow::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  /* подарочная коробка: маска, чтобы иконка красилась цветом текста */
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12v9H4v-9M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12v9H4v-9M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wholesale__title {
  margin: 18px 0 14px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.wholesale__lead {
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
}
.wholesale__example {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 17px;
}

/* карточки уровней */
.tier-cards {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.tier-card {
  padding: 22px 22px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.tier-card__label {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}
/* разделитель под подписью; когда есть скидка — в него садится плашка */
.tier-card__rule {
  margin: 12px 0 14px;
  border-top: 1px solid var(--line);
  min-height: 26px;
  padding-top: 12px;
}
.tier-card__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--wine-100);
  color: var(--wine-700);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.tier-card__price {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--wine-800);
}
.tier-card__price--ask { font-size: clamp(22px, 1.9vw, 27px); }
.tier-card__unit {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

/* нижняя полоса с призывом */
.wholesale__cta {
  margin-top: 22px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(107, 18, 32, .04);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.wholesale__cta-mark {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wine-800);
  border-radius: 50%;
  color: var(--wine-800);
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
}
.wholesale__cta-text { display: grid; gap: 3px; }
.wholesale__cta-text b { font-size: 16px; color: var(--ink); }
.wholesale__cta-text span { color: var(--ink-soft); font-size: 15px; }
.wholesale__cta-link {
  margin-left: auto;
  flex: none;
  color: var(--wine-800);
  font-weight: 700;
  border-bottom: 1px solid var(--wine-800);
  padding-bottom: 2px;
  white-space: nowrap;
}
.wholesale__cta-link::after { content: ' →'; }
.wholesale__cta-link:hover { color: var(--wine-600); border-bottom-color: var(--wine-600); }

/* колонка с иллюстрацией — появится вместе с исходником */
.wholesale__art { position: relative; }
.wholesale__art img { width: 100%; height: auto; display: block; }
.wholesale__hand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.35;
  color: var(--gold-dark);
  max-width: 16ch;
  transform: rotate(-6deg);
  margin: 0 0 6px 8px;
}

@media (max-width: 1100px) {
  .wholesale--art .wholesale__inner { grid-template-columns: 1fr; }
  .wholesale--art .wholesale__art { max-width: 420px; }
  .tier-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .wholesale__cta { flex-wrap: wrap; }
  .wholesale__cta-link { margin-left: 52px; }
}
@media (max-width: 520px) {
  .tier-cards { grid-template-columns: 1fr; gap: 12px; }
  .tier-card { padding: 18px; }
}

/* ============================================================
   Лайтбокс галереи товара (14.09.2026).
   Своя разметка из tivoli.js, поэтому классы короткие и с префиксом .lb —
   пересечься с прототипом и компонентами им негде.
   ============================================================ */
body.lb-open { overflow: hidden; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 56px 64px;
  background: rgba(28, 24, 22, .92);
}
.lb.is-open { display: flex; }

.lb__stage {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lb__img {
  max-width: 100%;
  /* подпись под снимком тоже должна помещаться в экран */
  max-height: calc(100vh - 150px);
  object-fit: contain;
  background: var(--paper);
  border-radius: var(--r-lg);
  transition: opacity .15s;
}
.lb__img.is-loading { opacity: .35; }

.lb__cap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  text-align: center;
}
.lb__count { color: rgba(255, 255, 255, .5); white-space: nowrap; }

/* кнопки: рисуем значки границами, чтобы не тянуть иконочный шрифт */
.lb__close,
.lb__nav {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  transition: background .15s;
}
.lb__close:hover,
.lb__nav:hover { background: rgba(255, 255, 255, .22); }

.lb__close {
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.lb__close::before,
.lb__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  background: currentColor;
}
.lb__close::before { transform: rotate(45deg); }
.lb__close::after { transform: rotate(-45deg); }

.lb__nav {
  top: 50%;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border-radius: 50%;
}
.lb__nav::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.lb__nav--prev { left: 14px; }
.lb__nav--prev::before { margin: -6px 0 0 -3px; transform: rotate(-135deg); }
.lb__nav--next { right: 14px; }
.lb__nav--next::before { margin: -6px 0 0 -9px; transform: rotate(45deg); }

/* один снимок — листать нечего */
.lb--single .lb__nav { display: none; }

/* в галерее снимок теперь открывается на месте: показываем это курсором */
.product__shot { cursor: zoom-in; }

@media (max-width: 700px) {
  .lb { padding: 52px 12px 16px; }
  .lb__img { max-height: calc(100vh - 130px); }
  .lb__nav { width: 40px; height: 40px; margin-top: -20px; }
  .lb__nav--prev { left: 6px; }
  .lb__nav--next { right: 6px; }
}

/* ============================================================
   Галерея товара: крупный кадр и лента превью (14.09.2026).
   Раскладка как на маркетплейсах — клик по превью подменяет крупный кадр,
   клик по крупному открывает лайтбокс.
   ============================================================ */
.gallery { display: grid; gap: 12px; }

.gallery__main {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  cursor: zoom-in;
}
.gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gallery__thumbs {
  display: grid;
  /* до пяти в ряд; при большем числе снимков перенос на вторую строку */
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.gallery__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .15s;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery__thumb:hover { border-color: var(--gold); }
.gallery__thumb.is-active { border-color: var(--wine-800); }

@media (max-width: 700px) {
  .gallery__thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .gallery__main { padding: 10px; }
}

/* ============================================================
   Вкладки карточки товара (14.09.2026).
   Без JS контейнер не получает .is-ready: кнопки спрятаны, панели идут
   подряд со своими заголовками — содержимое не теряется.

   Префикс .ptabs, а не .tabs: в styles.css прототипа уже есть свой
   компонент `.tabs { display: flex }`, и на общем имени голова вкладок
   и панели вставали в один ряд — содержимое уезжало вправо от кнопок.
   ============================================================ */
/* Нижний блок карточки — на той же светлой подложке, что блок покупки
   (16.09.2026): раньше вкладки висели прямо на фоне страницы и читались
   как отдельный, недооформленный кусок. */
.ptabs {
  margin-top: 32px;
  padding: 31px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 8px 28px rgba(67, 47, 35, .055);
}
.ptabs.is-ready { padding-top: 6px; }
.ptabs__head { display: none; }

/* Голова вкладок во всю ширину подложки: отрицательные поля выносят линию
   к краям, внутренние возвращают кнопки на сетку содержимого.
   В одну строку с прокруткой — на телефоне «Доставка и оплата» раньше
   переносилась на вторую строку под остальные. */
.ptabs.is-ready .ptabs__head {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
  margin: 0 -31px 28px;
  padding: 0 31px;
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.ptabs__head::-webkit-scrollbar { display: none; }
.ptabs.is-ready .ptabs__title { display: none; }
.ptabs__title { margin: 0 0 16px; font-size: 24px; }

.ptabs__btn {
  flex: none;
  padding: 20px 0 17px;
  border: 0;
  background: none;
  color: #766B63;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  /* подчёркивание активной вкладки садится ровно на линию головы */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.ptabs__btn:hover { color: var(--wine-800); }
.ptabs__btn.is-active { color: var(--wine-800); border-bottom-color: var(--wine-800); }

.ptabs__panel + .ptabs__panel { margin-top: 36px; }
.ptabs.is-ready .ptabs__panel + .ptabs__panel { margin-top: 0; }
.ptabs__panel .prose { max-width: 76ch; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.ptabs__panel .prose > :last-child { margin-bottom: 0; }

/* ——— Характеристики: мягкая таблица в стиле таблицы цен ———
   separate, а не collapse — иначе рамку не скруглить вместе с углами. */
.specs {
  width: 100%;
  max-width: 760px;
  border: 1px solid var(--line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--r-panel);
  overflow: hidden;
}
.specs th,
.specs td {
  padding: 14px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #EFE6DF;
  font-size: 15px;
  line-height: 22px;
}
.specs tr:last-child th,
.specs tr:last-child td { border-bottom: 0; }
.specs th { width: 38%; background: #FAF6F1; color: var(--muted); font-weight: 400; }
.specs td { color: var(--ink); font-weight: 500; }

/* ——— Доставка и оплата: две карточки ——— */
.tab-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.tab-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: #F7F1EA;
  border: 1px solid #EBE1D7;
  border-radius: var(--r-lg);
}
.tab-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 21px;
  color: var(--ink);
}
.tab-card h3 svg { flex: none; color: var(--wine-800); }
.tab-card ul { list-style: none; margin: 0 0 18px; padding: 0; }
.tab-card li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.tab-card li:last-child { margin-bottom: 0; }
.tab-card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wine-800);
}
/* ссылка прижата к низу — в обеих карточках на одной линии */
.tab-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  color: var(--wine-800);
  font-weight: 600;
  font-size: 15px;
}
.tab-more::after { content: "→"; transition: transform .15s; }
.tab-more:hover { color: var(--wine-700); }
.tab-more:hover::after { transform: translateX(3px); }

@media (max-width: 900px) {
  .ptabs { padding: 22px; }
  .ptabs.is-ready { padding-top: 4px; }
  .ptabs.is-ready .ptabs__head { gap: 24px; margin: 0 -22px 22px; padding: 0 22px; }
}
@media (max-width: 700px) {
  .tab-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .specs th { width: 45%; }
}
@media (max-width: 560px) {
  .ptabs { margin-top: 24px; padding: 16px; }
  .ptabs.is-ready { padding-top: 2px; }
  /* Три вкладки без прокрутки. Подписи вместе — около 300 px, а на 360 px
     места 286: «Доставка и оплата» обрезалась на краю, это выглядело
     поломкой. Колонки по содержимому, растянуты на ширину, и на самых
     узких экранах последняя подпись переносится внутри своей вкладки.
     Подчёркивание остаётся по низу: кнопки растягиваются на высоту ряда. */
  .ptabs.is-ready .ptabs__head {
    display: grid;
    grid-template-columns: auto auto minmax(0, auto);
    justify-content: space-between;
    gap: 12px;
    margin: 0 -16px 18px;
    padding: 0 16px;
    overflow: visible;
  }
  .ptabs__btn {
    padding: 15px 0 12px;
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    text-align: left;
  }
  .specs th,
  .specs td { padding: 12px 14px; font-size: 14px; line-height: 20px; }
  .tab-card { padding: 18px; }
  .tab-card h3 { font-size: 19px; margin-bottom: 12px; }
  .tab-card li { font-size: 14px; }
}

/* Заголовок карточки товара.
   Глобальный h1 рассчитан на заголовки во всю ширину (до 54 px), а здесь он
   стоит в узкой правой колонке рядом с галереей и занимал три-четыре строки. */
.product__info h1 {
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.2;
  margin-bottom: 10px;
}

/* ============================================================
   Значки в шапке (14.09.2026).
   В styles.css прототипа `.icon-btn__badge` скрыт и показывается только
   классом `is-on` — тема раньше перекрывала лишь цвет, поэтому цифры
   не было видно ни при каком количестве.
   Сравнение показывает счётчик по-своему: его compare.js вешает
   `compare-mini--active` на саму ссылку, а не на значок.
   ============================================================ */
.compare-mini--active .icon-btn__badge { display: grid; }
/* пустой значок не показываем даже с активным классом */
.icon-btn__badge:empty { display: none; }

/* Кнопка «в сравнение» на карточке товара: приводим вёрстку компонента
   к нашим кнопкам — своих стилей под тему у него нет. */
.buy-row .compare { display: inline-flex; align-items: center; gap: 10px; }
.buy-row .compare__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink-soft);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.buy-row .compare__button:hover { border-color: var(--wine-800); color: var(--wine-800); }
.buy-row .compare__button svg rect { fill: currentColor; }
.buy-row .compare--active .compare__button { border-color: var(--wine-800); color: var(--wine-800); }
/* ссылка «Сравнить (N)» нужна только когда в сравнении что-то есть */
.buy-row .compare__go { display: none; color: var(--wine-800); font-size: 14px; }
.buy-row .compare--active .compare__go { display: inline; }

/* ============================================================
   Постраничность каталога (14.09.2026).
   Штатная разметка mFilter — Bootstrap (`ul.pagination`, `li.page-item`),
   которого мы не подключаем: список выводился маркерами и без стилей.
   Свой чанк (tv.mfilter.pagination → tvPager) рисует ссылки напрямую,
   поэтому список и маркеры тут неоткуда взяться.
   ============================================================ */
.mfilter-pagination { margin-top: 32px; }

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pager__item,
.pager__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1;
  transition: border-color .15s, color .15s, background .15s;
}
.pager__item:hover,
.pager__nav:hover { border-color: var(--wine-800); color: var(--wine-800); }

.pager__item.is-current {
  background: var(--wine-800);
  border-color: var(--wine-800);
  color: #fff;
  font-weight: 700;
}
.pager__nav { font-size: 17px; }
.pager__gap {
  min-width: 24px;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 520px) {
  .pager__item,
  .pager__nav { min-width: 36px; height: 36px; padding: 0 8px; font-size: 14px; }
}

/* ============================================================
   Мега-меню: заголовки разделов не должны подхватывать подчёркивание
   верхнего меню (14.09.2026).

   В styles.css прототипа у `.nav a` лежит `border-bottom: 2px solid transparent`,
   а `.nav a:hover` (0,2,1) перебивает по специфичности `.nav .mega__title` (0,2,0)
   и снимает у заголовка его постоянную линию. На наведении высота заголовка
   менялась, и список подразделов подпрыгивал. Задаём линию явно для обоих
   состояний селектором из трёх классов.
   ============================================================ */
.nav .mega a,
.nav .mega a:hover { border-bottom: none; }

.nav .mega .mega__title,
.nav .mega .mega__title:hover {
  border-bottom: 1px solid var(--line);
  padding-bottom: 7px;
  margin-bottom: 8px;
}

/* ============================================================
   Оформление заказа в корзине (14.09.2026).
   Разметка своя, поверх контракта MiniShop3: его штатный шаблон на Bootstrap,
   которого мы не подключаем.
   ============================================================ */
.order-block-wrap { margin-top: 44px; }
.order-block-wrap > h2 { margin-bottom: 20px; }

.order-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 32px;
  align-items: start;
}
.order-block--wide { grid-column: 1 / -1; }
.order-block h3 {
  margin: 0 0 14px;
  font-size: 17px;
  color: var(--wine-800);
}

.order-fields { display: grid; gap: 14px; }
.order-fields label,
.order-address label,
.order-comment {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
}
.order-fields .field-input,
.order-address .field-input,
.order-comment .field-input { margin-top: 6px; }
.req { color: var(--wine-700); }

/* варианты доставки и оплаты */
.order-options { display: grid; gap: 10px; }
.order-option {
  display: flex;
  gap: 12px;
  padding: 13px 15px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .15s;
}
.order-option:hover { border-color: var(--gold); }
.order-option input { margin-top: 3px; flex: none; accent-color: var(--wine-800); }
.order-option:has(input:checked) { border-color: var(--wine-800); }
.order-option__body { display: grid; gap: 4px; }
.order-option__body b { font-size: 15px; color: var(--ink); font-weight: 600; }
.order-option__note { font-size: 13px; color: var(--muted); line-height: 1.45; }

.order-address { display: grid; gap: 14px; margin-top: 16px; }

/* ловушка для ботов: прячем классом, а не type=hidden и не инлайном */
.order-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* итог и кнопка */
.order-submit {
  margin-top: 24px;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(107, 18, 32, .04);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.order-submit__cost { display: grid; gap: 2px; }
.order-submit__cost > span { color: var(--muted); font-size: 14px; }
.order-submit__cost b {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--wine-800);
}
.order-submit__cost em { font-style: normal; font-size: 13px; color: var(--muted); }
.btn--lg { padding: 15px 30px; font-size: 15px; }
.order-note { margin-top: 12px; color: var(--muted); font-size: 13px; }

/* ошибки полей от MiniShop3 */
.order-form .invalid-feedback {
  display: block;
  margin-top: 4px;
  color: var(--wine-700);
  font-size: 13px;
  font-style: normal;
}
.order-form .invalid-feedback:empty { display: none; }

.order-empty { padding: 30px 0; }
.order-empty h2 { margin-bottom: 8px; }
.order-empty .btn { margin-top: 16px; }

@media (max-width: 820px) {
  .order-form__grid { grid-template-columns: 1fr; }
  .order-submit { flex-direction: column; align-items: stretch; }
  .order-submit form { width: 100%; }
  .order-submit .btn { width: 100%; }
}

/* ============================================================
   Страницы «О компании» и «Доставка и оплата» (15.09.2026).
   ============================================================ */

/* ——— вступление ——— */
.about-intro { max-width: 860px; }
.about-intro__title {
  margin: 18px 0 16px;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.14;
  color: var(--ink);
}
.about-intro__lead {
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.about-intro__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.facts--about {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 26px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ——— карточки «что делаем» ——— */
.about-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.about-card {
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.about-card h3 { margin: 0 0 12px; font-size: 19px; color: var(--wine-800); }
.about-card p { color: var(--ink-soft); line-height: 1.6; margin: 0 0 10px; }
.about-card__note {
  margin: 14px 0 0 !important;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted) !important;
}

/* ——— ряды логотипов ——— */
.logo-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
.logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 18px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.logo-cell img {
  max-width: 100%;
  max-height: 52px;
  width: auto;
  height: auto;
  display: block;
  /* логотипы у всех разной насыщенности; лёгкое приглушение выравнивает ряд,
     при наведении возвращаем полный цвет */
  filter: saturate(.82);
  transition: filter .15s;
}
.logo-cell:hover img { filter: none; }
.logo-cell--text span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
}

/* ——— шаги заказа ——— */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 22px 22px 22px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  counter-increment: step;
}
.step::before {
  content: counter(step);
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: var(--gold);
}
.step b { display: block; margin-bottom: 6px; font-size: 16px; color: var(--ink); }
.step span { color: var(--ink-soft); font-size: 15px; line-height: 1.55; }

/* ——— документы и памятки ——— */
.about-docs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
}
.about-doc {
  padding: 18px 20px;
  background: rgba(107, 18, 32, .04);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.about-doc b { display: block; margin-bottom: 6px; color: var(--wine-800); font-size: 16px; }
.about-doc span { color: var(--ink-soft); font-size: 15px; line-height: 1.55; }

/* ——— таблицы тарифов ——— */
/* узкие экраны: таблица прокручивается сама, страница по горизонтали — нет */
.table-wrap { overflow-x: auto; margin-top: 18px; }
.rate {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.rate thead th {
  background: rgba(107, 18, 32, .05);
  padding: 13px 18px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wine-800);
  border-bottom: 1px solid var(--line);
}
.rate td {
  padding: 16px 18px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}
.rate tbody tr:last-child td { border-bottom: 0; }
.rate td b { color: var(--ink); font-weight: 600; }
.rate__sub { color: var(--muted); font-size: 13px; }
.rate__price {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
}
.rate__price--free { color: var(--wine-800); }

/* ——— плашка-примечание ——— */
.tiles-note {
  margin-top: 22px;
  padding: 18px 22px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(107, 18, 32, .04);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.tiles-note__mark {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--wine-800);
  border-radius: 50%;
  color: var(--wine-800);
  font-family: var(--font-display);
  font-style: italic;
}
.tiles-note p { margin: 0; color: var(--ink-soft); line-height: 1.55; }

@media (max-width: 1000px) {
  .about-cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts--about { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .steps { grid-template-columns: 1fr; }
  .about-docs { grid-template-columns: 1fr; }
  .logo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-intro__cta .btn { width: 100%; }
}

/* ============================================================
   Карточка товара и листинг: цены по тиражу, итог, кнопки (15.09.2026).
   ============================================================ */

/* мини-таблица цен в карточке листинга */
.card-tiers {
  margin: 8px 0 10px;
  padding: 8px 10px;
  background: var(--cream);
  border-radius: var(--r);
}
.card-tier {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.card-tier b { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* итог за партию перед кнопкой */
.buybox__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0 14px;
  padding: 14px 16px;
  background: rgba(107, 18, 32, .05);
  border-radius: var(--r);
}
.buybox__total > span { color: var(--ink-soft); font-size: 15px; }
.buybox__total > span b { color: var(--ink); }
.buybox__total > b {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--wine-800);
  white-space: nowrap;
}

/* три кнопки покупки в один рост и в одном стиле */
.buy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}
.buy-row > * { display: flex; }
.buy-row .btn,
.buy-row .ms3f__button,
.buy-row .compare__button {
  height: 48px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r);
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}
/* избранное и сравнение — второстепенные действия: контурные */
.buy-row .ms3f__button,
.buy-row .compare__button {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.buy-row .ms3f__button:hover,
.buy-row .compare__button:hover { border-color: var(--wine-800); color: var(--wine-800); }
.buy-row .ms3f__button.ms3f--active,
.buy-row .compare--active .compare__button { border-color: var(--wine-800); color: var(--wine-800); }
.buy-row .ms3f__icon,
.buy-row .compare__button svg { width: 18px; height: 18px; flex: none; }
.buy-row .compare__button svg rect { fill: currentColor; }
/* у кнопки избранного компонент не выводит подпись — дорисовываем своей */
.buy-row .ms3f__button::after { content: 'В избранное'; }
.buy-row .ms3f__button.ms3f--active::after { content: 'В избранном'; }

@media (max-width: 520px) {
  .buy-row > * { flex: 1 1 100%; }
  .buy-row .btn,
  .buy-row .ms3f__button,
  .buy-row .compare__button { width: 100%; }
}

/* ============================================================
   Подбор по бюджету и упаковке в хиро (15.09.2026).
   ============================================================ */
.calc-card__row { align-items: end; }

.calc-pack { position: relative; display: grid; gap: 6px; }
.calc-pack__label { font-size: 13px; color: var(--ink-soft); }
.calc-pack__toggle {
  width: 100%;
  min-height: 46px;
  padding: 0 34px 0 14px;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  position: relative;
}
.calc-pack__toggle::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--wine-800);
  border-bottom: 2px solid var(--wine-800);
  transform: rotate(45deg);
}
.calc-pack__toggle[aria-expanded="true"]::after { margin-top: -2px; transform: rotate(-135deg); }

/* Меню шире кнопки: в колонке сетки оно узкое, и длинные названия
   («Сладкие подарочные наборы») переносились на вторую строку.
   Растём по содержимому, но не шире экрана на телефоне. */
.calc-pack__menu {
  position: absolute;
  z-index: 40;
  top: 100%;
  left: 0;
  right: auto;
  min-width: 100%;
  width: max-content;
  max-width: min(380px, calc(100vw - 48px));
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
/* Селектор из двух классов: в tivoli-extra.css лежит
   `.calc-card__row label { flex-direction: column }` — под него попадают
   и пункты списка, и галочка с названием и счётчиком вставали друг под друга. */
.calc-pack__menu .calc-pack__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 10px;
  border-radius: var(--r);
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
}
.calc-pack__menu .calc-pack__item + .calc-pack__item { margin-top: 2px; }
.calc-pack__menu .calc-pack__item:hover { background: var(--cream); }
.calc-pack__menu .calc-pack__item input {
  accent-color: var(--wine-800);
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
}
.calc-pack__menu .calc-pack__item span {
  flex: 1 1 auto;
  color: var(--ink);
  white-space: nowrap;
}
.calc-pack__menu .calc-pack__item em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* выбранный пункт заметен и со свёрнутым списком */
.calc-pack__menu .calc-pack__item:has(input:checked) { background: var(--wine-100); }
.calc-pack__menu .calc-pack__item:has(input:checked) span { color: var(--wine-800); font-weight: 600; }

/* кнопка подбора не должна ломаться на две строки */
.calc-card__row .btn { white-space: nowrap; min-height: 46px; }

/* Поле бюджета уже (06.10.2026): при «1fr 1fr auto» кнопка не помещалась в строку
   и упиралась в правый край карточки. Сумма — три-четыре цифры, 148 px хватает и вмещают подпись;
   остаток уходит под «Упаковку». */
@media (min-width: 701px) {
  .calc-card__row { grid-template-columns: minmax(0, 148px) minmax(0, 1fr) auto; }
  .calc-card__row > label, .calc-card__row input { min-width: 0; width: 100%; box-sizing: border-box; }
  /* подпись в одну строку: иначе «₽» уходил вниз и поля съезжали по высоте */
  .calc-card__row > label { white-space: nowrap; }
}

@media (max-width: 700px) {
  .calc-card__row { grid-template-columns: 1fr; }
}

/* ============================================================
   Значок 3D: вращающийся кадр товара (15.09.2026).

   Цвет синий: бордовый в карточке занят ценой и действиями, золотой
   почти сливается с кремовым фоном и бежевыми упаковками на фото.
   Синего в палитре нет вовсе — значок читается сразу и ни с чем
   не путается.
   ============================================================ */
/* Бейдж 3D — бордовый (ТЗ 16.09.2026, п. 4). Синий, заведённый 15.09
   по просьбе «ярким цветом», выбивался из палитры. */
:root { --badge-3d: var(--wine-800); }

.badge-3d,
.card__3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--badge-3d);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  line-height: 1;
}

/* Бирки слева одной группой, чтобы 3D не уезжал в середину строки:
   у .card__top раскладка space-between. */
.card__badges { display: flex; align-items: flex-start; gap: 6px; }

/* Геометрия задаётся обеим биркам сразу, а не каждой отдельно.
   Одних padding и font-size мало: бирка веса — обычный инлайновый элемент,
   и её высота считается от метрик шрифта, а не от line-height, тогда как
   у inline-flex высота идёт от line-height. При одинаковых отступах
   получались разные по высоте плашки. Фиксированная высота убирает
   зависимость от шрифта совсем. */
.card__badges > * {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.card__3d { letter-spacing: .02em; }

/* на превью в ленте галереи — углом поверх снимка */
.gallery__thumb { position: relative; }
.badge-3d {
  position: absolute;
  left: 5px;
  bottom: 5px;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 11px;
  letter-spacing: .04em;
  box-shadow: 0 1px 3px rgba(35, 32, 30, .25);
  pointer-events: none;
}

/* ============================================================
   Правки после показа 16.09.2026.
   ============================================================ */

/* ——— Цена в мини-карточке не переносится ———
   Разряды в числе отбиты обычным пробелом («2 500 ₽»), и на узком экране
   строка рвалась ровно по нему: «2» отдельно, «500 ₽» отдельно. Подпись
   сокращена до «за шт» — в карточке это и так очевидно. */
.card__price { flex-wrap: nowrap; white-space: nowrap; }

/* ——— Подвал на узких экранах ———
   В styles.css прототипа `.footer__grid` жёстко разложен на четыре колонки
   и ни в одном его медиазапросе не переопределён. Колонки — доли (`fr`),
   но по умолчанию элемент сетки не сжимается уже своего содержимого:
   почта и телефон держали последнюю колонку, она вылезала за экран и давала
   горизонтальную прокрутку всей странице. */
.footer__grid > * { min-width: 0; }
.footer__grid { overflow-wrap: break-word; }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .logo--footer img { height: 46px; }
}

/* Липкую галерею убрали (решение владельца 25.09.2026): под фото теперь
   размеры и доводы, справа — длинный блок покупки и презентации, и раздельная
   прокрутка двух колонок читалась как неудобство. Страница листается целиком. */

/* ============================================================
   Карточка товара (16.09.2026): раскладка по макетам product1 + product3,
   цвета, размеры, отступы и тени — по ТЗ «Визуальные правки карточки
   товара» (vizualnye_pravki_kartochki_tovara.docx в корне проекта).

   Цель ТЗ — не добавить декор, а смягчить: тёплые фоны, единые радиусы
   (токены --r-* в :root), спокойный бордовый и ровный вертикальный ритм
   на сетке 4/8: связанные строки 8, элементы одного блока 12–16,
   функциональные блоки 20–24, крупные секции 28–32.
   ============================================================ */

/* ——— Сцена: превью слева, кадр справа ——— */
.gallery { display: grid; gap: 22px; }

.gallery__stage {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
/* один снимок — ленты нет. Класс ставит шаблон, а не :has(): в браузере
   без его поддержки кадр уехал бы в колонку шириной 104 px */
.gallery__stage--solo { grid-template-columns: minmax(0, 1fr); }

/* Лента превью без прокрутки: при пяти снимках и больше колонка просто
   растёт вниз ниже кадра, и доводы под фото опускаются вместе с ней
   (решение владельца 17.09.2026 — это редкий случай, а полосы прокрутки
   в узкой колонке смотрелись поломкой; горизонтальная появлялась из-за
   того, что вертикальная отъедала ширину у превью).
   margin: 0 гасит margin-top: 12px из styles.css прототипа — он был верен
   для ленты ПОД снимком и опускал колонку ниже кромки кадра. */
.gallery__thumbs {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 104px;
  gap: 12px;
  margin: 0;
  align-self: start;
  overflow: visible;
}

.gallery__thumb {
  display: block;
  position: relative;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery__thumb:hover { border-color: #D9C7B9; }
/* Активная рамка 2 px нарисована как 1 px + внутренняя тень:
   настоящая двухпиксельная рамка сдвигала бы снимок на пиксель. */
.gallery__thumb.is-active {
  background: #FCF5F5;
  border-color: var(--wine-800);
  box-shadow: inset 0 0 0 1px var(--wine-800), 0 3px 10px rgba(103, 20, 30, .07);
}

/* ——— Крупный кадр ——— */
/* overflow не обрезаем: меню «поделиться» открывается из кадра и выходит
   за его нижнюю кромку. Скругление при этом держится само — фон рамки
   скругляется вместе с углами, а снимок стоит внутри отступов и до углов
   не достаёт. */
.gallery__frame {
  position: relative;
  background: var(--paper);
  border: 1px solid #E9DFD5;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-photo);
}
.gallery__frame .gallery__main {
  display: block;
  aspect-ratio: 1 / 1;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  cursor: zoom-in;
}
.gallery__frame .gallery__main img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Фон-сцена — только под снимком с вырезанным фоном (make_scene_shots.php):
   снимок на белом лёг бы поверх сцены белым прямоугольником. */
.gallery__frame--scene {
  background: var(--paper) url(/assets/tivoli/i/product-bg.webp) center / cover no-repeat;
}
/* Товар стоит на столе сцены, а не висит посередине: нижний отступ больше
   верхнего, снимок прижат к низу, основание встаёт на стол чуть выше
   подписи. Тень по контуру (drop-shadow) — ложится под товар,
   а не под прямоугольник файла. */
.gallery__frame--scene .gallery__main { padding: 3% 8% 16%; }
.gallery__frame--scene .gallery__main img {
  object-position: 50% 100%;
  filter: drop-shadow(0 12px 14px rgba(66, 46, 32, .16));
}

/* Подсказка не перехватывает клик: она объясняет, что делает сам кадр. */
.gallery__hint {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  background: rgba(255, 253, 250, .92);
  border: 1px solid #EEE4DA;
  border-radius: 20px;
  box-shadow: 0 3px 12px rgba(40, 30, 20, .06);
  color: #766B63;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}
.gallery__hint svg { color: #5D544D; flex: none; }

/* Действия поверх кадра: сердечко и «поделиться» колонкой */
.gallery__actions {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.gallery__fav { display: block; }
.gallery__fav .ms3f__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--paper);
  border: 1px solid #EBE0D6;
  border-radius: 50%;
  box-shadow: 0 3px 12px rgba(40, 30, 20, .07);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.gallery__fav .ms3f__button:hover { background: #FBEDEF; border-color: #E5C7CB; }
/* подпись дорисована в CSS для кнопки в блоке покупки — здесь она лишняя */
.gallery__fav .ms3f__button::after { content: none; }
/* Иконки сердечка и «поделиться» — одного цвета (решение владельца
   17.09.2026). Цвет задаётся через stroke явно: CSS компонента ms3Favorites
   ставит иконке stroke: #333 и перебивает currentColor из разметки —
   из-за этого сердце было серым, а стрелка рядом бордовой. */
.gallery__fav .ms3f__icon { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; }
/* Добавленный товар — красное сердце на тёплом бежевом (решение владельца
   16.09.2026). Сплошная бордовая заливка стояла прямо на снимке и на тёмных
   фотографиях сливалась с ним. */
.gallery__fav .ms3f__button.ms3f--active {
  background: #F6EFE4;
  border-color: #E8D9C6;
  color: #C21B2C;
}
.gallery__fav .ms3f__button.ms3f--active .ms3f__icon { fill: currentColor; }

/* Переключатель на вращающийся кадр */
.gallery__3d {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 17px;
  background: rgba(255, 253, 250, .94);
  border: 1px solid #E8DDD2;
  border-radius: 21px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.gallery__3d svg { color: var(--wine-800); }
.gallery__3d:hover { background: #FBEDEF; border-color: #E5C7CB; }
.gallery__3d[hidden] { display: none; }

/* ——— Три довода под кадром: открыто, без карточек ——— */
.gallery__perks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.gallery__perks li { display: flex; align-items: flex-start; gap: 10px; }
.gallery__perks svg { flex: none; width: 22px; height: 22px; color: var(--wine-600); }
.gallery__perks span { display: block; min-width: 0; font-size: 13px; line-height: 20px; color: #958A81; }
.gallery__perks b { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: #403934; }

/* ============================================================
   Правая карточка
   ============================================================ */
.pcard {
  min-width: 0;
  padding: 31px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 8px 28px rgba(67, 47, 35, .055);
}
.product__info .pcard h1 {
  margin: 0 0 12px;
  font-size: 36px;
  line-height: 44px;
  color: #231F1D;
}
.pcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 15px;
  font-size: 15px;
  color: #968A81;
}
.pcard__meta b { color: var(--ink-soft); font-weight: 600; }
.pcard__meta span + span { border-left: 1px solid #DED3C9; padding-left: 15px; }

.pcard .buybox {
  margin-top: 22px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ——— Количество ——— */
.qtybox {
  padding: 20px;
  background: #F7F1EA;
  border: 1px solid #EBE1D7;
  border-radius: var(--r-lg);
}
.qtybox__label {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #877B72;
}
.qtybox__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.pcard .qty--buy {
  display: inline-flex;
  align-items: stretch;
  height: 46px;
  background: var(--paper);
  border: 1px solid #E6DBD1;
  border-radius: 10px;
  overflow: hidden;
}
.pcard .qty--buy button {
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  font-size: 19px;
  color: #584E47;
  cursor: pointer;
}
.pcard .qty--buy button:hover { background: #F9F2EC; color: #584E47; }
.pcard .qty .qty--buy input,
.pcard .qty--buy input {
  width: 60px;
  height: 44px;
  padding: 0;
  text-align: center;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  font-weight: 600;
  color: #292421;
}

.qtybox__presets { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.preset {
  min-width: 82px;
  height: 46px;
  padding: 0 17px;
  background: var(--paper);
  border: 1px solid #E5DAD0;
  border-radius: var(--r);
  color: #4A423D;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.preset:hover { background: #FAF3EE; border-color: #D9C7B9; }
/* 1.5 px рамки = 1 px + полпикселя внутренней тенью: дробная рамка
   рендерится неровно на разных экранах */
.preset.is-active {
  background: #FCF0F1;
  border-color: var(--wine-800);
  box-shadow: inset 0 0 0 .5px var(--wine-800);
  color: var(--wine-800);
  font-weight: 600;
}

/* ——— Цена и таблица: одна группа выбора цены ——— */
.buygrid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 16px;
  align-items: stretch;
}

.pcard .pricebox {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 22px;
  background: #FBEEEF;
  border: 1px solid #F1DCDF;
  border-radius: var(--r-panel);
}
.pricebox__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #8C2530;
}
.pcard .pricebox__now { display: block; margin-top: 12px; }
.pcard .pricebox__now b {
  font-family: var(--font-display);
  font-size: 47px;
  line-height: 1;
  font-weight: 600;
  color: #841221;
  white-space: nowrap;
}
/* знак рубля мельче цифр — цена визуально легче (ТЗ 16.09.2026, п. 7).
   Правило общее: мини-карточка в листинге выводит цену так же. */
/* Цвет наследуется явно: в styles.css прототипа есть .pricebox__now span
   и .card__price span с приглушённым цветом — они рассчитаны на подпись
   «за штуку» и красили рубль в серый. Селектор с b весит больше. */
.pricebox__now b .cur,
.buybox__total b .cur,
.card__price b .cur { font-size: .85em; color: inherit; }

.pcard .pricebox .stock { margin-top: 14px; font-size: 14px; gap: 8px; }
.pcard .pricebox .stock::before { width: 8px; height: 8px; }
.pcard .pricebox .stock--in { color: #35875C; }
.pcard .pricebox .stock--in::before { background: var(--ok); }

.pricebox__note {
  display: flex;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 15px;
  border-top: 1px solid #ECD6D8;
  font-size: 13px;
  line-height: 19px;
  color: #786D65;
}
/* Пояснение прижато к низу карточки (margin-top: auto), но не ближе 28 px
   к тому, что над ним. auto и фиксированный отступ на одном свойстве не
   совмещаются, поэтому минимум держит соседний элемент сверху — какой бы
   это ни был: «В наличии» выводится не у всех товаров. Во флексе отступы
   не схлопываются, так что они складываются честно. */
.pcard .pricebox > :nth-last-child(2) { margin-bottom: 28px; }
.pricebox__note svg { flex: none; margin-top: 2px; color: #A07272; }

.pricebox--ask { padding: 22px; background: #FBEEEF; border-radius: var(--r-panel); }

/* Таблица цен.
   border-collapse: collapse из прототипа не даёт скруглить углы вместе
   с рамкой — переходим на separate и рисуем рамку на самой таблице. */
.buygrid .price-table {
  width: 100%;
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--r-panel);
  overflow: hidden;
}
.buygrid .price-table th {
  height: 50px;
  padding: 0 20px;
  background: #F6F0E9;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8A7E74;
  text-align: left;
}
.buygrid .price-table td {
  height: 58px;
  padding: 0 20px;
  border-bottom: 1px solid #EFE6DF;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-soft);
  background: none;
}
.buygrid .price-table tr:last-child td { border-bottom: 0; }
.buygrid .price-table td b { color: var(--wine-800); font-weight: 600; }

/* Первая колонка шире слева: там встаёт галочка активного диапазона.
   Место под неё держится у всех строк — иначе текст прыгал бы вправо
   при каждой смене количества. */
.buygrid .price-table th:first-child,
.buygrid .price-table td:first-child { position: relative; padding-left: 40px; padding-right: 8px; }

.buygrid .price-table tr.is-active td { background: #FAEDEF; font-weight: 600; }
.buygrid .price-table tr.is-active td:first-child { color: #3E3531; }
.buygrid .price-table tr.is-active td:first-child::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--wine-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* ——— Итого ——— */
.pcard .buybox__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 80px;
  margin-top: 16px;
  padding: 18px 22px;
  background: linear-gradient(90deg, #FBF1F1 0%, #F8E6E8 100%);
  border: 1px solid #F1DDE0;
  border-radius: var(--r-panel);
}
.buybox__total-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.buybox__total-left svg { flex: none; color: var(--wine-800); }
.buybox__total-text { display: block; font-size: 16px; color: var(--ink); }
.buybox__total-text b { font-weight: 600; }
.buybox__calc { display: block; margin-top: 2px; font-size: 13px; color: #978A82; }
.pcard .buybox__total > b {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1;
  font-weight: 600;
  color: #841221;
  white-space: nowrap;
}

/* ——— Кнопки действий ——— */
.pcard .buy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin: 20px 0 0;
}
.pcard .buy-row > * { display: flex; }

.pcard .buy-row .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 190px;
  height: 54px;
  padding: 0 22px;
  background: var(--wine-800);
  border: 1px solid var(--wine-800);
  border-radius: 10px;
  box-shadow: 0 5px 14px rgba(117, 15, 30, .13);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .015em;
}
.pcard .buy-row .btn:hover { background: var(--wine-700); border-color: var(--wine-700); }
.pcard .buy-row .btn svg { flex: none; }

.pcard .buy-row .ms3f__button,
.pcard .buy-row .compare__button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 54px;
  padding: 0 20px;
  background: var(--paper);
  border: 1px solid #DFD3C8;
  border-radius: var(--r);
  color: #554B44;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.pcard .buy-row .ms3f__button:hover,
.pcard .buy-row .compare__button:hover { background: #FAF3EE; border-color: #CFBDAF; color: #554B44; }
.pcard .buy-row .ms3f__icon,
.pcard .buy-row .compare__button svg { width: 20px; height: 20px; flex: none; color: #5E524A; }
.pcard .buy-row .ms3f__icon { stroke: currentColor; }
.pcard .buy-row .ms3f__button.ms3f--active,
.pcard .buy-row .compare--active .compare__button {
  background: #FCEEEF;
  border-color: #E5C7CB;
  color: var(--wine-800);
}
.pcard .buy-row .ms3f__button.ms3f--active .ms3f__icon,
.pcard .buy-row .compare--active .compare__button svg { color: var(--wine-800); }

/* ============================================================
   Узкие экраны
   ============================================================ */
@media (max-width: 1100px) {
  .product__info .pcard h1 { font-size: 32px; line-height: 40px; }
  .buygrid { grid-template-columns: minmax(0, 1fr); }
  .pcard .pricebox > :nth-last-child(2) { margin-bottom: 18px; }
}
@media (max-width: 900px) {
  .gallery__stage { grid-template-columns: minmax(0, 1fr); }
  /* лента снова горизонтальная: колонка превью съедала ширину кадра */
  .gallery__thumbs {
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    order: 2;
  }
  .gallery__thumb { aspect-ratio: 1 / 1; padding: 8px; }
  .gallery__perks { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pcard { padding: 22px; }
}
@media (max-width: 560px) {
  .gallery__thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .gallery__hint { height: 34px; padding: 0 12px; font-size: 13px; }
  .gallery__hint svg { display: none; }
  .gallery__fav .ms3f__button { width: 42px; height: 42px; }
  .product__info .pcard h1 { font-size: 26px; line-height: 33px; }
  .pcard { padding: 16px; }
  .qtybox { padding: 14px; }
  .pcard .qty--buy { width: 100%; }
  .pcard .qty--buy input { flex: 1; }
  .qtybox__presets { width: 100%; gap: 8px; }
  /* min-width: 0 обязателен: без него кнопка не сжимается уже своей надписи
     и ряд пресетов распирает карточку за край экрана */
  .preset { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 13px; }
  .pcard .pricebox__now b { font-size: 40px; }
  .pcard .buybox__total > b { font-size: 30px; }
  .pcard .buy-row > * { flex: 1 1 100%; }
  .pcard .buy-row .btn,
  .pcard .buy-row .ms3f__button,
  .pcard .buy-row .compare__button { width: 100%; justify-content: center; }
}

/* ============================================================
   Хлебные крошки на мобильном (16.09.2026).
   В четыре строки они занимали 159 px, и галерея товара начиналась
   только на 242 px. Теперь одна строка с горизонтальной прокруткой:
   - последний пункт скрыт — это название страницы, оно тут же в H1;
   - отступы меньше;
   - tivoli.js докручивает строку к концу, чтобы был виден ближайший
     раздел, а не «Главная»; слева проступает затухание — намёк, что
     путь длиннее и его можно прокрутить.
   Разметка BreadcrumbList для поиска лежит отдельно (tvSchema)
   и от этого не меняется.
   ============================================================ */
@media (max-width: 700px) {
  .breadcrumbs {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 12px 0 10px;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 13px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .breadcrumbs::-webkit-scrollbar { display: none; }
  .breadcrumbs > * { flex: none; }
  /* последний пункт — сама страница; разделитель перед ним тоже лишний */
  .breadcrumbs > span:last-child,
  .breadcrumbs > span:nth-last-child(2) { display: none; }
  .breadcrumbs.is-scrolled,
  .breadcrumbs__path.is-scrolled {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px);
            mask-image: linear-gradient(90deg, transparent 0, #000 28px);
  }

  /* Карточка товара: путь прокручивается первой строкой, название товара
     второй строкой — тем же кеглем, жирным. Прокрутка переезжает с самой
     навигации на обёртку пути, иначе название уехало бы вбок вместе с путём.
     Селекторы с двумя классами перебивают общее правило выше, которое
     прячет два последних элемента. */
  .breadcrumbs.breadcrumbs--named {
    display: block;
    overflow: visible;
    white-space: normal;
  }
  .breadcrumbs.breadcrumbs--named > .breadcrumbs__path {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .breadcrumbs__path::-webkit-scrollbar { display: none; }
  .breadcrumbs__path > * { flex: none; }
  /* путь заканчивается разделителем — на второй строке он лишний */
  .breadcrumbs__path > span:last-child { display: none; }
  .breadcrumbs.breadcrumbs--named > .breadcrumbs__current {
    display: block;
    margin-top: 4px;
    font-weight: 700;
    line-height: 18px;
    color: var(--ink);
  }
}

/* На ПК путь и название — одна строка, как раньше: обёртка пути
   растворяется, и её элементы встают в общий ряд крошек. */
.breadcrumbs__path { display: contents; }
/* последний разделитель пути — :last-child своей обёртки и перекрасился бы
   в цвет названия страницы */
.breadcrumbs .breadcrumbs__path > span:last-child { color: #B2A79E; }


/* Переход по якорю (#delivery, #payment из вкладки на карточке товара):
   раздел не прячется под липкой шапкой. */
#delivery, #payment { scroll-margin-top: 96px; }


/* ============================================================
   Кнопка «Поделиться» и меню (17.09.2026). Образец — catalog.feliz.ru,
   оформление — в палитре сайта: светлая карточка вместо тёмной.
   Иконки площадок и адреса — из общей библиотеки _kb/assets/icons/social.
   ============================================================ */
.share { position: relative; }

/* кнопка — близнец сердечка над ней */
.share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--paper);
  border: 1px solid #EBE0D6;
  border-radius: 50%;
  box-shadow: 0 3px 12px rgba(40, 30, 20, .07);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.share__btn:hover,
.share.is-open .share__btn { background: #FBEDEF; border-color: #E5C7CB; }

.share__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 30;
  width: 272px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 36px rgba(66, 46, 32, .16);
}
.share__menu[hidden] { display: none; }
/* уголок к кнопке, как в образце */
.share__menu::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 17px;
  width: 12px;
  height: 12px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  transform: rotate(45deg);
}

.share__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: 0;
  border-radius: var(--r);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.share__item:hover,
.share__item:focus-visible { background: #FAF3EE; color: var(--ink); outline: none; }
/* разделители — от подписи, а не от края, как в образце; у пункта под
   курсором и соседнего снизу прячутся, чтобы не резать подсветку */
.share__item + .share__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 54px;
  right: 12px;
  height: 1px;
  background: var(--line-soft);
}
.share__item:hover::before,
.share__item:hover + .share__item::before { opacity: 0; }

.share__icon { width: 28px; height: 28px; flex: none; display: block; }
.share__icon--copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cream-3);
  color: #5E524A;
  transition: background .15s, color .15s;
}
.share__done { display: none; }
.share__item.is-done .share__icon--copy { background: var(--ok); color: #fff; }
.share__item.is-done .share__icon--copy svg:first-child { display: none; }
.share__item.is-done .share__done { display: block; }
.share__item.is-done .share__label { color: var(--ok); }

@media (max-width: 560px) {
  .share__btn { width: 42px; height: 42px; }
  .share__menu { width: min(272px, calc(100vw - 56px)); }
  .share__menu::before { right: 14px; }
}

/* Мобильное меню: первая ссылка «Все детские подарки» ведёт к каталогу на главной
   (17.09.2026), над списком упаковок — отступ снизу вместо сверху. */
.drawer__all--top { margin: 0 0 10px; }

/* Каталог детских подарков на главной (#catalog): заголовок ближе к листингу,
   чем у обычных секций — это один блок с фильтром. */
.home-catalog .section-head { margin-bottom: 22px; }

/* ============================================================
   Блок заявки на главной (21.09.2026) — по ТЗ из main-form/.

   Из ТЗ взяты приём и геометрия: близкие светлые фоны, мягкие границы,
   лёгкие тени, пронумерованные группы полей, полоса преимуществ.
   Цвета — токены сайта, а не из ТЗ: там свой бордовый (#A10F2B против
   нашего #8C1424) и свои фоны, и блок разошёлся бы с остальными
   страницами. Радиусы — из общей системы (--r-card 16, --r-lg 14, --r 9).

   Сам список полей и их разметка живут в чанке tv.form.request: он стоит
   ещё на «О компании», «Доставке» и «Контактах», там колонка одна.
   ============================================================ */

.lead-block {
  position: relative;
  overflow: hidden;
  padding: 26px;
  background: #FDFAF7;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 8px 36px rgba(52, 35, 28, .05);
}
/* заголовок и лид уже самой формы: в макете H2 разбит на две строки,
   а во всю ширину колонки он вставал в одну */
.lead-block h2 { max-width: 15ch; margin: 10px 0 0; }
.lead-block--art .lead-block__form > .muted { max-width: 44ch; }
.lead-block > .muted,
.lead-block__form > .muted {
  max-width: 62ch;
  margin: 10px 0 16px;
  font-size: 16px;
  line-height: 1.45;
}

/* ——— Две колонки: форма и новогодняя композиция ——— */
.lead-block--art {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.lead-block__form { position: relative; z-index: 2; min-width: 0; }

.lead-block__art {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  min-height: 100%;
}
/* Композиция начинается от верхнего правого угла карточки и левым краем
   заходит под форму — как в макете. Отрицательные отступы дотягивают её
   до кромок (padding блока 26 px), лишнее срезает overflow: hidden
   у самого блока, поэтому за карточку она не вылезает.
   Форма лежит выше по z-index, её белые карточки перекрывают графику. */
.lead-block__sheep {
  position: relative;
  display: block;
  width: 142%;
  max-width: none;
  height: auto;
  /* align-self, а не margin-left: auto — элемент шире колонки, и авто-отступ
     его не двигает: картинка оставалась прижатой к левому краю колонки */
  align-self: flex-end;
  margin: -26px -26px 16px 0;
}

/* Мягкое свечение под композицией — тёплое пятно, как на макете.
   Вектор, а не картинка: градиент масштабируется и ничего не весит. */
.lead-block__art::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -140px;
  width: 760px;
  height: 640px;
  background:
    radial-gradient(closest-side, rgba(255, 214, 158, .55), rgba(255, 214, 158, 0) 70%),
    radial-gradient(closest-side at 30% 70%, rgba(246, 233, 234, .6), rgba(246, 233, 234, 0) 72%);
  pointer-events: none;
  z-index: -1;
}
/* ——— Полоса преимуществ: одна карточка на четыре пункта ——— */
.lead-perks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 18px 8px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 18px rgba(50, 35, 28, .035);
}
.lead-perks li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
}
/* разделители не во всю высоту — по ТЗ сверху и снизу остаётся воздух */
.lead-perks li + li { position: relative; }
.lead-perks li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}
.lead-perks svg { width: 32px; height: 32px; color: var(--wine-800); }

/* ============================================================
   Форма: пронумерованные группы и поля с иконками
   ============================================================ */
.lead-card {
  padding: 14px 20px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.lead-card + .lead-card { margin-top: 10px; }
.lead-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}
.lead-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #B79A80;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 500;
}

.order-form .lead-field { display: block; }
.lead-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin-bottom: 0; }
.lead-form__full { grid-column: 1 / -1; }
.lead-form label,
.order-form .order-fields label,
.order-form .order-address label,
.order-form .order-comment { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--ink-soft); }
/* подпись — одной строкой со звёздочкой: в колоночном флексе каждый потомок
   становится строкой, и звёздочка уезжала под название поля */
.lead-form__cap { display: block; }
.lead-form .req,
.order-form .req { color: var(--wine-800); font-style: normal; }

/* поле с иконкой: иконка лежит в подложке, отступ слева у самого поля */
.lead-field { position: relative; display: block; }
.lead-field > svg {
  position: absolute;
  left: 15px;
  top: 13px;
  width: 20px;
  height: 20px;
  color: #69717A;
  pointer-events: none;
}
.lead-form .field-input,
.order-form .field-input {
  width: 100%;
  height: 46px;
  padding: 0 16px 0 46px;
  background: #fff;
  border: 1px solid #DDE0E3;
  border-radius: var(--r);
  font: inherit;
  font-size: 16px;
  color: var(--ink);
}
.lead-form .field-input::placeholder,
.order-form .field-input::placeholder { color: #A1A6AD; }
.lead-form .field-input:hover,
.order-form .field-input:hover { border-color: #C9B8AE; }
.lead-form .field-input:focus,
.order-form .field-input:focus {
  border-color: var(--wine-800);
  box-shadow: 0 0 0 3px rgba(140, 20, 36, .08);
  outline: none;
}
.lead-field--area > svg { top: 14px; }
.lead-form textarea.field-input,
.order-form textarea.field-input {
  min-height: 76px;
  height: auto;
  padding: 12px 16px 12px 46px;
  line-height: 1.45;
  resize: vertical;
}

.lead-form__hint { font-style: normal; font-size: 12px; color: var(--wine-700); min-height: 14px; }
.lead-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ——— Кнопка и примечание ——— */
.lead-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 14px;
}
.lead-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 300px;
  height: 56px;
  padding: 0 30px;
  border-radius: var(--r);
  box-shadow: 0 7px 18px rgba(140, 20, 36, .16);
  font-size: 17px;
}
.lead-form__note { flex: 1 1 260px; margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.lead-form__ok { padding: 16px 18px; background: var(--wine-100); border-radius: var(--r); font-weight: 700; margin: 0; }
.lead-form__error { color: var(--wine-800); font-weight: 700; margin: 0 0 12px; }

@media (max-width: 1100px) {
  .lead-block--art { grid-template-columns: minmax(0, 1fr); }
  /* сначала форма, потом композиция — по ТЗ */
  .lead-block__art { order: 2; }
  .lead-block__sheep { position: static; width: 100%; max-width: 520px; margin: 0 auto 18px; }
  .lead-block h2 { max-width: none; }
  .lead-block--art .lead-block__form > .muted { max-width: 62ch; }
  .lead-block__art::before { top: -60px; right: -80px; width: 520px; height: 440px; }
}
@media (max-width: 700px) {
  .lead-block { padding: 20px; }
  .lead-card { padding: 16px; }
  .lead-form__grid { grid-template-columns: minmax(0, 1fr); }
  /* 2×2: вертикальная черта только между колонками (у чётных), между
     рядами — горизонтальная. Правило «li + li» рисовало бы линию и слева
     у третьего пункта, то есть у края первой колонки второго ряда. */
  .lead-perks { grid-template-columns: repeat(2, 1fr); gap: 16px 0; padding: 16px 6px; }
  .lead-perks li { position: relative; }
  .lead-perks li::before { display: none; }
  .lead-perks li:nth-child(even)::before { display: block; top: 4px; bottom: 4px; }
  .lead-perks li:nth-child(n+3)::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: -8px;
    height: 1px;
    background: var(--line);
  }
  /* длинная подсказка не помещалась в 84 px и обрезалась на середине фразы */
  .lead-form textarea.field-input { min-height: 116px; }
  .lead-form__submit { width: 100%; min-width: 0; }
}


/* ============================================================
   «В корзине» в мини-карточке листинга (21.09.2026).
   Товар уже добавлен — вместо счётчика и кнопки ссылка в корзину
   с количеством. Количество правится в самой корзине: два места
   с одним числом разъезжаются, а в опте количество выбирают один раз.
   ============================================================ */
.card__incart {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 11px 12px;
  background: var(--wine-100);
  border: 1px solid #E5C7CB;
  border-radius: 6px;
  color: var(--wine-800);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: background .15s, border-color .15s;
}
.card__incart:hover { background: #FBEDEF; border-color: var(--wine-800); color: var(--wine-800); }
.card__incart svg { flex: none; }
.card__incart b { font-weight: 700; }

.card.is-incart .card__buy { display: none; }
.card.is-incart .card__incart { display: flex; }


/* «Уже в корзине» под кнопками на карточке товара (21.09.2026).
   Кнопка остаётся: здесь выбирают тираж и могут добавить ещё. */
.buybox__incart { margin: 12px 0 0; font-size: 14px; }
.buybox__incart[hidden] { display: none; }
.buybox__incart a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--wine-800);
  font-weight: 600;
  border-bottom: 1px solid rgba(140, 20, 36, .3);
}
.buybox__incart a:hover { color: var(--wine-700); border-bottom-color: var(--wine-700); }
.buybox__incart svg { flex: none; }


/* ============================================================
   Оформление заказа — в стиле формы заявки с главной (21.09.2026):
   пронумерованные карточки, иконки в полях, те же поля ввода.
   Без фоновой картинки: в корзине она отвлекала бы от сути.
   ============================================================ */
.order-form .order-block {
  padding: 16px 20px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* Карточки стоят в сетке 2×2 и выравниваются по строкам.
   `.lead-card + .lead-card` даёт отступ 10 px соседям — он верен для формы
   заявки, где карточки идут в столбик, а в сетке опускал блоки 2–4
   на 10 px ниже первого: верхние кромки не совпадали.
   align-items по умолчанию тянет карточки строки на одну высоту —
   поэтому нижние кромки тоже сходятся. */
.order-form .order-form__grid {
  gap: 24px;
  align-items: stretch;
}
.order-form .order-block + .order-block { margin-top: 0; }

/* Тело карточки прижимается к верху, а последний блок может растягиваться:
   так в соседних карточках поля начинаются на одной высоте. */
.order-form .order-block { display: flex; flex-direction: column; }
.order-form .order-block > :last-child { margin-bottom: 0; }

.order-form .order-fields { gap: 10px; }
/* отступ у поля задаёт подложка с иконкой, а не сам input */
.order-form .order-fields .field-input,
.order-form .order-address .field-input,
.order-form .order-comment .field-input { margin-top: 0; }
.order-form .order-address { margin-top: 12px; }
.order-form .order-option { background: var(--paper); }
/* обёртка поля: MiniShop3 кладёт в неё текст ошибки, см. комментарий в tv.order */
.order-form .order-field { display: block; }
.order-form .order-field + .order-field { margin-top: 10px; }

/* комментарий и файлы в одной карточке */
.order-form .order-comment { display: block; }
.order-form .lead-files { margin-top: 14px; }

/* ============================================================
   Загрузка файлов в форме заявки (SendIt, 21.09.2026).
   Зона перетаскивания, плашки загруженных файлов и полоса прогресса.
   Разметка — контракт компонента (data-fu-*), оформление наше.
   ============================================================ */
.lead-files { display: block; }
.lead-files .lead-form__cap { margin-bottom: 5px; font-size: 14px; color: var(--ink-soft); }

.lead-files__zone {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
  /* SendIt задаёт зоне height: 200px и радиус 20 px своим [data-fu-dropzone] —
     под его вёрстку с кнопкой внутри. У нас строка с иконкой и подписью. */
  height: auto;
  padding: 12px 14px;
  background: #fff;
  border: 1px dashed #D3CBC3;
  border-radius: var(--r);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
/* Зона — это <label>, а `.lead-form label` (класс + элемент) весит больше
   одного класса и раскладывает её в колонку с gap 5px: иконка, подпись
   и скрытый input вставали друг под друга и давали 132 px пустоты.
   Поэтому строчная раскладка задаётся селектором из двух классов. */
.lead-form .lead-files__zone,
.order-form .lead-files__zone {
  flex-direction: row;
  gap: 14px;
}
.lead-files__zone:hover,
.lead-files__zone.is-dragover { border-color: var(--wine-800); background: #FDF7F7; }
.lead-files__zone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* SendIt в своём index.css тянет подпись на всю высоту зоны
   (`[data-fu-hide] { height: 100% }`) — из-за этого поле вырастало
   до 200 px пустоты. Возвращаем обычный поток. */
.lead-files__zone [data-fu-hide] {
  display: block;
  width: auto;
  height: auto;
  text-align: left;
}

/* Штриховка под иконкой — чтобы поле читалось как «сюда кладут файлы»,
   а не как ещё один инпут. Полосы диагональные, того же бордового,
   но в десятой доле прозрачности: узор виден, но не спорит с текстом. */
.lead-files__zone > svg {
  flex: none;
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 11px;
  border-radius: 10px;
  color: var(--wine-800);
  background-color: #FBF5F1;
  background-image: repeating-linear-gradient(45deg,
    rgba(140, 20, 36, .11) 0 3px, rgba(140, 20, 36, 0) 3px 8px);
  transition: background-color .15s;
}
.lead-files__zone:hover > svg,
.lead-files__zone.is-dragover > svg { background-color: #F7E8E6; }
.lead-files__zone b { color: var(--ink); font-weight: 600; }
/* «перетащите сюда» — только там, где есть чем тащить */
.lead-files__drag { font-style: normal; }
@media (max-width: 760px) { .lead-files__drag { display: none; } }
.lead-files__zone em { display: block; margin-top: 2px; font-style: normal; font-size: 13px; color: var(--muted-2); }

/* Полоса прогресса: разметку компонент рисует сам ([data-fu-id] с заливкой
   в span), у него она ярко-зелёная и скруглена на 20 px. Перекрашиваем. */
.lead-files__progress:not(:empty) {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}
.lead-files__progress [data-fu-id] {
  margin-bottom: 6px;
  padding: 3px 0;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink-soft);
}
.lead-files__progress [data-fu-id] span { background-color: #E7D3CE; }

/* плашка загруженного файла — кнопка: клик удаляет файл с сервера */
.lead-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 10px 8px 0 0;
  padding: 8px 12px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
/* Плашки компонент кладёт внутрь зоны, а подпись в этот момент прячет своим
   .v_hidden. Чтобы зона не превращалась в молчаливый прямоугольник,
   подсказку про добавление рисуем сами — по наличию плашки внутри. */
.lead-files__zone:has([data-fu-path])::after {
  content: 'Добавить ещё';
  color: var(--muted-2);
  font-size: 13px;
}
.lead-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-file svg { flex: none; width: 14px; height: 14px; padding: 0; background: none; color: var(--muted); }
.lead-file:hover { background: #FBEDEF; border-color: #E5C7CB; color: var(--wine-800); }
.lead-file:hover svg { color: var(--wine-800); }

/* подсветка поля с ошибкой — класс ставит SendIt */
.lead-form .field-input.error,
.order-form .field-input.error { border-color: var(--wine-800); }


/* ============================================================
   Адрес в оформлении заказа (21.09.2026).
   `.order-address` — грид, и он перебивал атрибут [hidden]:
   блок оставался виден, а поля в нём были отключены скриптом.
   Снаружи это выглядело так, будто по городу и адресу нельзя кликнуть.
   ============================================================ */
.order-address[hidden] { display: none; }
.order-address__note[hidden] { display: none; }
.order-address__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 0;
  padding: 11px 14px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.4;
}
.order-address__note svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--wine-800); }


/* ============================================================
   Презентация для руководства — блок на главной (23.09.2026).
   Акцент золотой (--gold-dark), а не бордовый: тем же цветом
   помечена кнопка «Добавить в презентацию» на карточке товара,
   и функция узнаётся по цвету, не споря с бордовой «В корзину».
   --gold-dark на белом даёт контраст 4,8 — проходит AA.
   ============================================================ */
.pz-promo-wrap[hidden] { display: none; }

.pz-promo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 24px 40px;
  align-items: center;
  padding: 44px 48px;
  background:
    radial-gradient(60% 85% at 82% 52%, rgba(240, 230, 214, .95) 0%, rgba(240, 230, 214, 0) 70%),
    var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.pz-promo__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 14px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* иконка — лист презентации; маской, чтобы красилась цветом текста */
.pz-promo__eyebrow::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6z M14 2v6h6 M9 13h8 M9 17h5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6z M14 2v6h6 M9 13h8 M9 17h5' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pz-promo__title {
  margin: 16px 0 12px;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.14;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.pz-promo__lead {
  max-width: 56ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
}

.pz-promo__steps {
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.pz-promo__steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
}
.pz-promo__steps li::before { content: none; }
.pz-promo__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.pz-promo__step {
  padding-top: 4px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}
.pz-promo__step b {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

.pz-promo__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 28px;
}
.pz-promo .pz-promo__btn {
  background: var(--gold-dark);
  border: 1px solid var(--gold-dark);
  color: #fff;
}
.pz-promo .pz-promo__btn:hover { background: #75592f; border-color: #75592f; }
.pz-promo__link {
  color: var(--gold-dark);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pz-promo__link:hover { color: #75592f; }
.pz-promo__note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}
/* пока страница не опубликована, блок видят только админы — об этом пометка */
.pz-promo__admin {
  display: inline-block;
  margin-top: 12px;
  padding: 2px 10px;
  border: 1px dashed var(--line);
  border-radius: 20px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .06em;
}

/* Веер из трёх настоящих листов презентации: обложка спереди,
   за ней таблица подарков и лист состава. */
.pz-promo__art {
  position: relative;
  height: 430px;
}
.pz-promo__sheet {
  position: absolute;
  top: 36px;
  left: 50%;
  width: 258px;
  height: auto;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 22px 44px rgba(66, 46, 32, .15), 0 3px 8px rgba(66, 46, 32, .07);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.pz-promo__sheet--back  { transform: translateX(-2%) translateY(6px) rotate(8deg); }
.pz-promo__sheet--mid   { transform: translateX(-50%) translateY(-18px) rotate(1deg); }
.pz-promo__sheet--front { transform: translateX(-98%) translateY(10px) rotate(-6deg); }
.pz-promo:hover .pz-promo__sheet--back  { transform: translateX(6%) translateY(4px) rotate(10deg); }
.pz-promo:hover .pz-promo__sheet--front { transform: translateX(-106%) translateY(8px) rotate(-8deg); }

.pz-promo__badge {
  position: absolute;
  top: 22px;
  left: calc(50% - 60px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--wine-800);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  box-shadow: 0 8px 18px rgba(140, 20, 36, .28);
  transform: rotate(-8deg);
}

@media (prefers-reduced-motion: reduce) {
  .pz-promo__sheet { transition: none; }
}

@media (max-width: 1100px) {
  .pz-promo { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); padding: 36px; }
  .pz-promo__art { height: 360px; }
  .pz-promo__sheet { width: 206px; }
  .pz-promo__badge { width: 46px; height: 46px; font-size: 12px; left: calc(50% - 50px); }
}

@media (max-width: 860px) {
  .pz-promo { grid-template-columns: minmax(0, 1fr); padding: 30px 24px; }
  /* картинка идёт после текста, но до шагов по смыслу не нужна —
     оставляем её в конце, чтобы кнопка была ближе к объяснению */
  .pz-promo__art { height: 330px; margin-top: 4px; }
  .pz-promo__sheet { width: 196px; top: 26px; }
}

@media (max-width: 560px) {
  .pz-promo { padding: 24px 18px 8px; border-radius: var(--r-lg); }
  .pz-promo__lead { font-size: 16px; }
  .pz-promo__cta { flex-direction: column; align-items: stretch; }
  .pz-promo .pz-promo__btn { justify-content: center; text-align: center; }
  .pz-promo__link { text-align: center; }
  .pz-promo__note { text-align: center; }
  .pz-promo__art { height: 270px; }
  .pz-promo__sheet { width: 158px; top: 22px; }
  .pz-promo__badge { width: 42px; height: 42px; font-size: 11px; top: 12px; left: calc(50% - 44px); }
}


/* ============================================================
   Плавающая кнопка «Соберите презентацию для руководства» (главная, 23.09.2026).
   Левый нижний угол, золото функции презентации, та же иконка, что на кнопке
   карточки. Слой 150 — ниже мобильного меню (200) и панели фильтров (210).
   Показ и скрытие — tivoli.js: после хиро, не поверх самого блока и подвала.
   ============================================================ */
.pz-float[hidden] { display: none; }
.pz-float {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 150;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.pz-float.is-on { opacity: 1; transform: none; pointer-events: auto; }
.pz-float__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 22px 0 18px;
  border-radius: 999px;
  background: var(--gold-dark);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(92, 70, 38, .30), 0 2px 6px rgba(92, 70, 38, .16);
  transition: background .15s, transform .15s;
}
.pz-float__link:hover,
.pz-float__link:focus-visible { background: #75592f; color: #fff; transform: translateY(-1px); }
.pz-float__link:focus-visible { outline: 3px solid rgba(176, 141, 87, .45); outline-offset: 2px; }
.pz-float__ico { flex: none; }
.pz-float__short { display: none; }
.pz-float__close {
  position: absolute;
  top: -9px;
  right: -9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--muted);
  box-shadow: 0 2px 6px rgba(66, 46, 32, .16);
  cursor: pointer;
}
.pz-float__close:hover { color: var(--ink); }

/* Свёрнутый режим — круглая иконка, пока на экране каталог (только ПК).
   Полная кнопка ложилась на закреплённую колонку фильтров и закрывала
   нижний фильтр («Упаковка»). Круг 50 px помещается в поле слева от колонки
   (при 1440 px там 93 px); подпись выезжает при наведении и фокусе. */
.pz-float--mini .pz-float__link { width: 50px; padding: 0; justify-content: center; gap: 0; }
.pz-float--mini .pz-float__long { display: none; }
.pz-float--mini:hover .pz-float__link,
.pz-float--mini .pz-float__link:focus-visible { width: auto; padding: 0 22px 0 18px; gap: 10px; }
.pz-float--mini:hover .pz-float__long,
.pz-float--mini .pz-float__link:focus-visible .pz-float__long { display: inline; }
.pz-float--mini .pz-float__close { top: -6px; right: -6px; width: 20px; height: 20px; }

@media (max-width: 560px) {
  .pz-float { left: 12px; bottom: 14px; }
  .pz-float__link { height: 44px; padding: 0 16px 0 13px; font-size: 14px; }
  .pz-float__long { display: none; }
  .pz-float__short { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .pz-float, .pz-float__link { transition: none; }
}

/* ============================================================
   Карточка товара по макету sizes/ (25.09.2026)
   ============================================================ */

/* Размеры иконками под фото (tvDims). До трёх пунктов в ряд, между ними
   тонкие разделители не во всю высоту — как полоса преимуществ на главной. */
.pdims {
  display: grid;
  grid-template-columns: repeat(var(--pdims-n, 3), minmax(0, 1fr));
  margin: 18px 0 20px;
  padding: 18px 12px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  box-shadow: 0 6px 20px rgba(67, 47, 35, .05);
}
.pdims--1 { --pdims-n: 1; }
.pdims--2 { --pdims-n: 2; }
.pdims__item { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; padding: 0 10px; }
.pdims__item + .pdims__item::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px; background: var(--line-soft);
}
.pdims__item img { flex: none; width: 60px; height: auto; }
.pdims__item span { display: flex; flex-direction: column; min-width: 0; }
.pdims__item small { font-size: 14px; line-height: 1.3; color: #877C73; }
.pdims__item b { font-size: 21px; line-height: 1.25; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pdims--1 .pdims__item { justify-content: flex-start; padding-left: 16px; }
@media (max-width: 560px) {
  .pdims { padding: 14px 6px; }
  .pdims__item { flex-direction: column; gap: 6px; text-align: center; padding: 0 6px; }
  .pdims__item span { align-items: center; }
  .pdims__item img { width: 50px; }
  .pdims__item b { font-size: 17px; }
  .pdims--1 .pdims__item { flex-direction: row; justify-content: center; text-align: left; }
  .pdims--1 .pdims__item span { align-items: flex-start; }
}

/* «Выберите количество» — обычным регистром, как в макете: подпись-призыв,
   а не заголовок таблицы. */
.pcard .qtybox__label { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; color: #6F645C; }

/* Избранное в добавленном состоянии — розовой плашкой с красным сердцем. */
.buy-row .ms3f__button.ms3f--active {
  background: #FBECEC;
  border-color: #F0D3D6;
  color: var(--wine-800);
}
.buy-row .ms3f__button.ms3f--active:hover { background: #F8E2E4; border-color: #E9C3C8; }

/* Колонка фильтров в каталоге и на главной больше не липкая (решение владельца
   25.09.2026): раздельная прокрутка фильтров и выдачи мешала — страница листается
   целиком. Липкость пришла из styles.css прототипа (.filters { position: sticky }).
   Только ПК: на телефоне фильтры — выезжающая панель со своим position: fixed. */
@media (min-width: 901px) {
  .filters { position: static; top: auto; }
}

/* ============================================================
   Главная: «Почему заказывают у нас», «Как заказать подарки», текст внизу
   (макеты redesign/, 06.10.2026). Префиксы hwhy / hsteps / hseo —
   в прототипе таких имён нет.
   ============================================================ */

/* — Почему заказывают у нас: 4 / 2 / 1 колонки, картинка над текстом — */
.hwhy__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.hwhy__card {
  display: flex; flex-direction: column; min-width: 0;
  padding: 14px 26px 28px;
  background: #fff; border: 1px solid #E8D9D0; border-radius: 18px;
}
.hwhy__img { display: block; width: 100%; max-width: 312px; height: 190px; margin: 0 auto 18px; object-fit: contain; }
.hwhy__card h3 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.25; color: var(--wine-800); }
.hwhy__card p { margin: 0; font-size: 16px; line-height: 1.6; color: #403936; }
@media (max-width: 1100px) { .hwhy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .hwhy__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hwhy__card { padding: 10px 20px 22px; }
  .hwhy__img { height: 160px; margin-bottom: 12px; }
  .hwhy__card h3 { font-size: 20px; }
}

/* — Как заказать подарки: лента с кругами, пунктирные стрелки стилями — */
.hsteps { background: var(--paper); }
.hsteps__list {
  --c: 118px; --g: 40px;
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g);
  margin: 0; padding: 0; list-style: none;
}
/* общая лента под кругами */
.hsteps__list::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 156px; z-index: 0;
  background: #F7F3ED; border-radius: 18px;
}
.hsteps__item { position: relative; z-index: 1; min-width: 0; margin: 0; padding: 0; }
.hsteps__item::marker { content: none; }
.hsteps__ico {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: var(--c); height: var(--c); margin: 19px auto 0; border-radius: 50%; background: #fff;
}
.hsteps__ico img { display: block; width: 98px; height: 98px; }
.hsteps__ico i {
  position: absolute; top: -4px; left: -4px; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--wine-800); color: #fff;
  font: 600 17px/1 var(--font-display); font-style: normal;
}
/* пунктир от круга к кругу и наконечник */
.hsteps__item:not(:last-child)::after {
  content: ""; position: absolute; top: 78px;
  left: calc(50% + var(--c) / 2 + 16px);
  width: calc(100% + var(--g) - var(--c) - 32px);
  border-top: 2px dashed var(--gold);
}
.hsteps__item:not(:last-child)::before {
  content: ""; position: absolute; top: 73px; z-index: 2;
  left: calc(150% + var(--g) - var(--c) / 2 - 28px);
  width: 9px; height: 9px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold);
  transform: rotate(45deg);
}
.hsteps__body { margin-top: 36px; }
.hsteps__body h3 {
  min-height: 2.5em; margin: 0 0 14px;
  font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; color: var(--wine-800);
}
.hsteps__body p { margin: 0; font-size: 16px; line-height: 1.65; color: #403936; }
.hsteps__cta { margin-top: 36px; }

/* Четыре колонки не влезают — сразу вертикальная последовательность:
   иконка слева, пунктирная стрелка вниз между значками. */
@media (max-width: 1000px) {
  .hsteps__list { --c: 72px; grid-template-columns: minmax(0, 1fr); }
  .hsteps__list::before { display: none; }
  .hsteps__item { display: grid; grid-template-columns: var(--c) minmax(0, 1fr); column-gap: 18px; padding-bottom: 30px; }
  .hsteps__item:last-child { padding-bottom: 0; }
  /* у короткого шага пунктир иначе сжимался до одного наконечника */
  .hsteps__item:not(:last-child) { min-height: calc(var(--c) + 64px); }
  .hsteps__ico { margin: 0; background: #F7F3ED; }
  .hsteps__ico img { width: 48px; height: 48px; }
  .hsteps__ico i { top: -6px; left: -6px; width: 28px; height: 28px; font-size: 14px; }
  .hsteps__item:not(:last-child)::after {
    top: calc(var(--c) + 8px); bottom: 10px; left: calc(var(--c) / 2 - 1px);
    width: 0; border-top: 0; border-left: 2px dashed var(--gold);
  }
  .hsteps__item:not(:last-child)::before { top: auto; bottom: 8px; left: calc(var(--c) / 2 - 5px); transform: rotate(135deg); }
  .hsteps__body { margin-top: 0; }
  .hsteps__body h3 { min-height: 0; margin: 4px 0 8px; font-size: 20px; }
  .hsteps__body p { font-size: 15px; line-height: 1.6; }
  .hsteps__cta { margin-top: 28px; }
}
@media (max-width: 480px) { .hsteps__cta .btn { width: 100%; justify-content: center; } }

/* — Текст внизу: разделы по h2, золотая черта у заголовка, картинка справа — */
.hseo__part { display: grid; grid-template-columns: minmax(0, 1fr); padding: 40px 0; border-top: 1px solid var(--line-soft); }
.hseo__part:first-child { padding-top: 0; border-top: 0; }
.hseo__part:last-child { padding-bottom: 0; }
.hseo__part--art { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: 64px; align-items: start; }
.hseo__text { min-width: 0; max-width: 80ch; color: #403936; }
.hseo__text h2 {
  position: relative; margin: 0 0 18px; padding-left: 26px;
  font-size: 32px; line-height: 1.2; color: var(--wine-800);
}
.hseo__part:first-child .hseo__text h2 { color: var(--ink); }
.hseo__text h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; border-radius: 2px; background: var(--gold);
}
.hseo__text p { margin: 0 0 14px; padding-left: 26px; font-size: 16px; line-height: 1.75; }
.hseo__text p:last-child { margin-bottom: 0; }
.hseo__art img { display: block; width: 100%; height: auto; border-radius: 12px; }
.hseo__art::after { content: ""; display: block; width: 88px; height: 1px; margin: 14px auto 0; background: var(--gold); opacity: .7; }
@media (max-width: 900px) {
  .hseo__part--art { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .hseo__art { width: 100%; max-width: 320px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .hseo__part { padding: 28px 0; }
  .hseo__text h2 { padding-left: 16px; font-size: 24px; }
  .hseo__text p { padding-left: 0; font-size: 15px; line-height: 1.7; }
}