/* ============================================================
   ЛЮБИМЫЙ ФЕРМЕР — дизайн-система

   Направление задано референсами dvepalki.by и chetverg.by:
   белый фон, один насыщенный акцент, прямые формы, гротеск.
   Кремовый фон, серифный дисплей и пилюли убраны — именно эта
   связка старила макет, а не какой-то один её элемент.

   ШРИФТЫ. Onest — вся типографика. JetBrains Mono — только
   мелкие подписи: вес, срок вызревания, надзаголовки. Это и
   есть «крафт» без серифного курсива.

   ЦВЕТ. Акцент в двух тонах: --accent-hi яркий, но белым
   текстом даёт 3.76:1 и потому идёт только на заливки без
   текста; --accent тёмный, 5.21:1, на кнопки, цены и ссылки.
   ============================================================ */

:root {
  /* Поверхности */
  --bg:         #FFFFFF;
  --surface:    #F7F7F5;   /* карточки, панели, поля ввода */
  --surface-2:  #EFEFEC;   /* второстепенные полосы */

  /* Текст */
  --ink:        #171717;
  --ink-mid:    #4A4A46;
  --ink-soft:   #6B6B67;

  /* Тёмный якорь — тот самый «крафт» */
  --dark:       #141F18;
  --dark-2:     #1E2C23;
  --dark-3:     #35493C;

  /* Акцент */
  --accent:     #C24009;   /* текст и кнопки, белым 5.21:1 */
  --accent-deep: #A93607;  /* наведение на залитые кнопки, белым 6.53:1 */
  --accent-hi:  #E8500F;   /* только заливки без текста: белым даёт 3.76:1 */

  /* Системная информация */
  --blue:       #24509E;
  --blue-soft:  #EAF0FA;
  --blue-on-dark: #8FB0E6;

  /* Линии */
  --line:       #E3E3DF;
  --line-soft:  #EDEDEA;

  /* Скругления — сдержанные, без пилюль */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* Тени */
  --sh-1: 0 1px 2px rgba(23,23,23,.05);
  --sh-2: 0 6px 22px rgba(23,23,23,.08);
  --sh-3: 0 18px 46px rgba(23,23,23,.14);

  /* Сетка */
  --wrap: 1240px;
  --gut: 24px;

  --font: Onest, system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Люкс медленный: интерфейс не «щёлкает», а «открывается».
     --t-micro — цвет и рамка при наведении, --t-move — сдвиги и
     появление, --t-panel — шторка и разворот товара. */
  --t-micro: .32s;
  --t-move:  .58s;
  --t-panel: .5s;

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- Типографика ---------- */

h1, h2, h3, .display {
  font-family: var(--font);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}

h1 { font-size: clamp(38px, 6vw, 70px); }
h2 { font-size: clamp(28px, 3.6vw, 46px); }
h3 { font-size: clamp(19px, 2vw, 24px); line-height: 1.25; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink-mid);
  line-height: 1.65;
  max-width: 62ch;
}

/* Надзаголовок нейтральный: терракота зарезервирована за ценой и
   главным действием, иначе акцент означает три разные вещи сразу. */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 14px;
}

.muted { color: var(--ink-soft); }
.small { font-size: 13px; line-height: 1.5; }

/* ---------- Раскладка ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ---------- Вертикальный ритм ----------
   Три ступени вместо россыпи инлайновых padding-block. Раньше каждая
   секция несла свой стиль прямо в разметке, и расстояния между блоками
   выходили 221, 221, 259, 259 — система не читалась.

   .s-tight  — блок продолжает предыдущий по смыслу (подборки под героем)
   .s-close  — смежный блок, разделённый фоном
   по умолчанию — самостоятельный раздел                                */

section { padding-block: clamp(56px, 7vw, 104px); }
section.s-close { padding-block: clamp(44px, 5.5vw, 80px); }
section.s-tight { padding-top: 0; }

.sec-head { margin-bottom: clamp(32px, 4vw, 52px); max-width: 720px; }
.sec-head.center { margin-inline: auto; text-align: center; }

.rule {
  height: 1px;
  background: var(--line-soft);
  border: 0;
  margin: 0;
}

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease), transform .18s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--dark); color: #F5F5F2; }
.btn-primary:hover { background: var(--dark-2); }

.btn-terra { background: var(--accent); color: #FFFFFF; }
.btn-terra:hover { background: var(--accent-deep); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(255,255,255,.6); }

.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--dark);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: border-color .2s var(--ease), gap .2s var(--ease);
}
.link-arrow:hover { border-color: var(--dark); gap: 12px; }

/* ---------- Шапка ---------- */

/* Шапка вставляется скриптом внутрь <header id="siteHeader">. Без этого
   правила её собственный бокс ограничивал бы sticky-контекст, и меню
   уезжало бы вверх вместе со страницей. */
#siteHeader { display: contents; }

.topbar {
  background: var(--dark);
  color: #C6C6C1;
  font-size: 13px;
  letter-spacing: .01em;
}
.topbar .wrap {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding-block: 8px;
}
/* Способ получения — в шапке, до каталога: условия видны сразу,
   а не открываются сюрпризом на последнем шаге оформления. */
.mode-switch {
  display: flex; flex: none; gap: 2px; padding: 2px;
  background: rgba(0,0,0,.22); border-radius: var(--r-sm);
}
.mode-switch button {
  border: 0; background: transparent; color: #B9C2B7;
  font-size: 13px; font-weight: 600; padding: 5px 14px; border-radius: var(--r-sm);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.mode-switch button:hover { color: #EFEFEC; }
.mode-switch button.is-active { background: var(--bg); color: var(--dark); }
.mode-note {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.topbar b { color: #EFEFEC; font-weight: 600; white-space: nowrap; }
.topbar-links { display: flex; gap: 20px; flex: none; }
.topbar-links span { white-space: nowrap; }
.topbar a:hover { color: #fff; }

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 76px;
}

.logo { display: flex; align-items: center; gap: 11px; margin-right: auto; min-width: 0; }
/* Знак плюс слово в два яруса: название длинное, в одну строку оно
   съедало шапку на телефоне. */
/* Знак — силуэт, обведённый с эмблемы. Подложка ему не нужна:
   фигуративный знак читается сам, а тёмный квадрат возвращал
   вид «иконка приложения». Квадрат остался только в фавиконке. */
.logo-mark {
  height: 40px; width: auto; flex: none;
  display: block; color: var(--dark);
}
.logo-word {
  font-weight: 800; letter-spacing: -.035em; line-height: .98;
  font-size: 19px; color: var(--ink); white-space: nowrap;
}
.logo-word span { display: block; }
/* Длинное название + четыре пункта меню + кнопка корзины не помещаются
   на средних экранах — подпись уходит первой. */
@media (max-width: 1180px) { .logo-sub { display: none; } }
/* На телефоне длинное название, бургер и сумма корзины не помещаются
   в одну строку — ужимаем всё разом, иначе бургер наезжает на логотип. */
@media (max-width: 560px) {
  .nav .wrap { gap: 10px; min-height: 66px; }
  .logo-mark { height: 36px; }
  .cart-btn { height: 40px; padding: 0 13px; font-size: 13px; gap: 7px; }
  .icon-btn { width: 40px; height: 40px; }
}
/* На узких телефонах названию, бургеру и сумме не хватает ширины:
   логотип с nowrap внутри сжимаемого flex-элемента выползал на бургер. */
@media (max-width: 430px) {
  .nav .wrap { gap: 8px; }
  .logo-mark { height: 32px; }
  .cart-btn { padding: 0 11px; font-size: 13px; gap: 6px; }
  .cart-btn svg { display: none; }
}

.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-mid);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav-links a:hover, .nav-links a.is-active { color: var(--ink); border-color: var(--accent); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: transparent;
  position: relative;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.icon-btn:hover { border-color: var(--ink); background: rgba(255,255,255,.7); }

/* В шапке показываем сумму, а не число позиций */
.cart-btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: transparent;
  font-size: 14px; font-weight: 600;
  white-space: nowrap;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.cart-btn:hover { border-color: var(--ink); background: rgba(255,255,255,.7); }
.cart-btn.filled { background: var(--accent); border-color: var(--accent); color: #FFF4EC; }
.cart-btn.filled:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.burger { display: none; }

/* ---------- Первый экран: имидж + вход в каталог ----------
   Полноэкранная заставка даёт имиджевую составляющую, а лента
   разделов, прижатая к её нижнему краю, — мгновенный вход в
   каталог. Оба требования выполняются в одном экране. 82vh, а не
   100vh: край следующего блока подсказывает, что есть прокрутка. */

.hero-full {
  position: relative;
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #0E1712;
  padding: 0;
}
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }

/* ---------- Пометка на демонстрационном кадре ----------
   Картинки в img/ — образец стилистики для фотографа, а не съёмка товара.
   Пометка стоит на самом кадре и намеренно не убирается по наведению:
   принять такой снимок за настоящий нельзя. Уходит вместе с заглушкой,
   как только у позиции появится своё фото. */

/* ---------- Отклик на нажатие ----------
   Добавление в корзину — главное действие на сайте, а реагировала на
   нажатие только .btn. Сдвиг короткий: за смену на него смотрят
   по нескольку раз за сессию, и длинная анимация тут читается как тормоз. */
.add-btn:active,
.mini-add:active,
.lux-add:active,
.ask-btn:active,
.stepper button:active,
.quick:active,
.tab:active { transform: scale(.96); }

.add-btn, .mini-add, .lux-add, .ask-btn,
.stepper button, .quick, .tab { transition: transform .14s var(--ease); }

/* Сумма в шапке меняется мгновенно — короткий импульс показывает, что
   клик засчитан. Без него единственным подтверждением остаётся тост. */
@keyframes cart-bump {
  50% { transform: scale(1.07); }
}
.cart-bump { animation: cart-bump .18s var(--ease); }

/* Смена подборки и фильтра перерисовывает сетку целиком. Короткое
   проявление снимает рывок. Стаггера здесь намеренно нет: фильтр жмут
   помногу раз за сессию, и «красивое» появление превратится в задержку. */
@keyframes grid-in {
  from { opacity: 0; transform: translateY(6px); }
}
.grid-in > * { animation: grid-in .22s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .cart-bump, .grid-in > * { animation: none; }
  .add-btn:active, .mini-add:active, .lux-add:active, .ask-btn:active,
  .stepper button:active, .quick:active, .tab:active { transform: none; }
  .faq-body { transition: none; }
}

/* ---------- Шкала заголовков разделов ----------
   Пять секций открывались одинаково: капс-надзаголовок и заголовок в две
   строки. Один ритм пять раз подряд и читается как конструктор. Теперь
   разделы различаются по весу: главный, рабочие, тихий. */

.h-lead { font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -.03em; }

.h-quiet { font-size: clamp(21px, 2.4vw, 30px); }
.h-quiet span { color: var(--ink-soft); font-weight: 400; }

/* Линия вместо надзаголовка: та же функция, другой приём */
.h-rule { font-size: clamp(20px, 2.2vw, 27px); display: flex; align-items: center; gap: 18px; }
.h-rule::before {
  content: ''; flex: none; width: clamp(28px, 4vw, 56px);
  height: 1px; background: currentColor; opacity: .45;
}

/* ---------- Тёмная полоса «Сыровяленое» ----------
   Карточек здесь нет намеренно. Светлая коробка с рамкой на тёмном поле
   выглядела вставленной из другого макета, а рядом с такой же сеткой
   подборок два блока читались близнецами. Снимок лежит прямо на фоне. */

.dark-band { background: var(--dark); color: #E8E1D2; }

.band-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(30px, 4vw, 48px);
}
.band-head h2 { color: #FBF7F0; }
.band-head .lead { color: #A8A296; margin: 14px 0 0; max-width: 46ch; }
.band-head .link-arrow { color: #E0A06C; border-bottom-color: rgba(224,160,108,.35); white-space: nowrap; }
.band-head .link-arrow:hover { border-bottom-color: #E0A06C; }

.band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 34px); }

.band-item { display: flex; flex-direction: column; position: relative; }
.band-media {
  display: block; position: relative;
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--r-md);
  background: #0E1712;
}
.band-media img, .band-media svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.band-body { padding-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.band-name {
  font-size: clamp(15px, 1.5vw, 17.5px); font-weight: 500; line-height: 1.35; color: #F2EFE8;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--t-micro) var(--ease);
}
.band-item:hover .band-name { color: #E0A06C; }
.band-price { font-size: 16px; font-weight: 600; color: #F2EFE8; }
.band-price s { color: #8A857A; font-weight: 400; font-size: 14px; margin-left: 8px; }
.band-per {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: #8A857A;
}
.band-add {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  padding: 11px 0; border: 0; border-radius: var(--r-sm);
  background: rgba(250,247,240,.94); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; text-align: center;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-panel) var(--ease), transform var(--t-panel) var(--ease);
}
.band-item:hover .band-add,
.band-item:focus-within .band-add { opacity: 1; transform: none; }
.band-item.in-cart .band-add { opacity: 1; transform: none; background: #E0A06C; }
@media (hover: none) { .band-add { opacity: 1; transform: none; } }

/* Плашка заглушки на тёмном поле — тише, чем на светлом */
.dark-band .stub-mark { background: rgba(0,0,0,.62); color: #BFBAAF; }

@media (max-width: 860px) {
  .band-head { grid-template-columns: 1fr; align-items: start; }
  .band-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .h-rule { display: block; }
  .h-rule::before { display: none; }
}

/* ---------- Частые вопросы ---------- */

/* ---------- О нас ----------
   Раскладка жила инлайном в разметке, из-за чего на телефоне колонки
   не схлопывались: инлайновый стиль перебивает медиазапрос. Текст
   получал 188 пикселей, картинка 122. */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-grid .about-photo { order: -1; }   /* кадр первым, текст под ним */
}

/* Заголовок слева, вопросы справа: иначе на широком экране правая
   половина пустует, а колонка вопросов растягивается за читаемую длину. */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.55fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.faq-layout .sec-head { margin-bottom: 0; position: sticky; top: 104px; }

.faq { border-top: 1px solid var(--line); padding-top: 4px; }

@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-layout .sec-head { position: static; margin-bottom: 28px; }
}
.faq-item { border-bottom: 1px solid var(--line); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 500;
  letter-spacing: -.01em;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-micro) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }

/* Плюс, который поворотом становится минусом */
.faq-item summary::after {
  content: '';
  flex: none;
  width: 13px; height: 13px;
  background:
    linear-gradient(var(--ink-soft), var(--ink-soft)) center/100% 1.5px no-repeat,
    linear-gradient(var(--ink-soft), var(--ink-soft)) center/1.5px 100% no-repeat;
  transition: transform var(--t-move) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(135deg); }

/* Раскрытие через grid-template-rows: в отличие от height:auto оно анимируется */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-move) var(--ease);
}
.faq-item[open] .faq-body { grid-template-rows: 1fr; }
.faq-body > * { min-height: 0; overflow: hidden; }
.faq-body p {
  color: var(--ink-mid);
  font-size: 16px;
  line-height: 1.65;
  max-width: 64ch;
}
.faq-item[open] .faq-body > :last-child { margin-bottom: 22px; }

.stub-mark {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  padding: 5px 9px;
  background: rgba(10, 16, 12, .82);
  color: #E6E2D8;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
/* В мелких превью корзины и допродажи подпись не читается — там её нет */
.mini-media .stub-mark,
.line-media .stub-mark { display: none; }
/* Затемнение под текст. Раньше здесь был зелёный rgba(14,23,18): зелёный
   канал вдвое выше красного, и при плотности 95% слева весь кадр уходил
   в болотный. Теперь тёплый почти-чёрный — он не спорит с мясом и деревом,
   а плотность снижена, потому что сама фотография уже тёмная. */
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(13,11,9,.88) 0%, rgba(13,11,9,.72) 38%,
    rgba(13,11,9,.34) 70%, rgba(13,11,9,.12) 100%);
}
.hero-inner {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: clamp(36px, 5vh, 68px);
}
.hero-inner .wrap { width: 100%; }
/* Колонка должна быть достаточно широкой, иначе заголовок ломается
   на четыре строки и весь контент уезжает за сгиб вместе с лентой. */
.hero-copy { max-width: 640px; }
.hero-full h1 { color: #F5F5F2; font-size: clamp(34px, 4.2vw, 56px); }
.hero-full h1 em { font-style: normal; color: #E0A06C; }
.hero-full .eyebrow { color: #A8B3A9; }
.hero-full .lead { color: #B4B4AE; max-width: 52ch; margin-top: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-full .btn-ghost { color: #F0F0ED; border-color: rgba(242,236,223,.4); }
.hero-full .btn-ghost:hover { border-color: #F0F0ED; background: rgba(255,255,255,.08); }

/* Одна сдержанная плашка акции — не баннер */
.hero-offer {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px; padding: 9px 16px 9px 12px;
  border: 1px solid rgba(224,160,108,.45);
  border-radius: var(--r-sm);
  background: rgba(169,80,43,.16);
  color: #F2E3D3; font-size: 14px; font-weight: 600;
}
.hero-offer::before {
  content: ''; width: 7px; height: 7px; border-radius: var(--r-sm);
  background: #E0A06C; flex: none;
}
.hero-offer b { color: #fff; }

/* Лента разделов — рабочий вход в каталог, а не декор */
/* ---------- Разделы в нижнем крае первого экрана ----------
   Было: шесть равных ячеек с вертикальными разделителями, в каждой
   название, счётчик позиций и «от N BYN». Три проблемы разом.
   Сетка из одинаковых ячеек с цифрами — типовая полоса показателей,
   её ставит под героем каждый второй сгенерированный лендинг.
   «от 10,17 BYN» — это 33,90 умножить на 0,3, машинная точность,
   которая и читается как машинная. И сплошная полоса срезала
   фотографию, а она здесь главный актив.
   Осталось то, ради чего блок и был нужен: попасть в раздел,
   не прокручивая страницу. */

.cat-rail {
  position: relative;
  padding-block: 0 clamp(16px, 2.6vh, 30px);
  /* Градиент вместо сплошной плашки: контраст под текстом есть,
     кадр внизу остаётся виден */
  background: linear-gradient(to top, rgba(10,13,10,.78), rgba(10,13,10,0));
}
.cat-rail .wrap { display: flex; flex-wrap: wrap; gap: 4px clamp(18px, 2.2vw, 30px); }
.cat-rail a {
  color: #CFCCC4;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.cat-rail a:hover { color: #FBF7F0; border-bottom-color: #E0A06C; }

@media (max-width: 760px) {
  .hero-full { min-height: 78vh; }
  .hero-inner { padding-block: 44px; }
  .cat-rail a { font-size: 14px; }
}

/* ---------- Мегаменю ---------- */

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-2);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav.mega-open .mega { opacity: 1; visibility: visible; transform: none; }
.mega .wrap { display: grid; grid-template-columns: 1fr 1fr 1fr 260px; gap: 32px; padding-block: 30px 34px; }
.mega h4, .mega .mega-head {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 12px; font-weight: 700;
}
.mega-cat { display: block; font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.mega-cat:hover { color: var(--accent); }
.mega-sub { display: block; font-size: 14px; color: var(--ink-mid); padding: 3px 0; }
.mega-sub:hover { color: var(--ink); }
.mega-group + .mega-group { margin-top: 20px; }
.mega-promo {
  background: var(--surface-2); border-radius: var(--r-md); padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.mega-promo b { font-size: 15px; }
.mega-promo span { font-size: 13px; color: var(--ink-mid); line-height: 1.45; }
@media (max-width: 1024px) { .mega { display: none; } }

/* ---------- Акции ---------- */

.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.offer {
  display: flex; flex-direction: column; gap: 9px;
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.offer:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line); }
.offer .otag {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.offer b { font-family: var(--font); font-size: 21px; font-weight: 500; line-height: 1.2; }
.offer span { font-size: 14px; color: var(--ink-mid); line-height: 1.5; }
.offer .go { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 600; color: var(--accent); }
/* Скидка — единственная выделенная карточка, остальные спокойные */
.offer.accent { background: var(--dark); border-color: var(--dark); }
.offer.accent .otag { color: #9AA79C; }
.offer.accent b { color: #F7F7F5; }
.offer.accent span { color: #9E9E98; }
.offer.accent .go { color: #E0A06C; }

@media (max-width: 900px) { .offers { grid-template-columns: 1fr; } }

/* ---------- Вкладки подборок ---------- */

.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  padding: 10px 18px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 15px; font-weight: 600; color: var(--ink-mid);
  transition: all .18s var(--ease);
}
.tab:hover { border-color: var(--ink); color: var(--ink); }
.tab.is-active { background: var(--dark); border-color: var(--dark); color: #F0F0ED; }

/* Старая цена */
.price s {
  font-family: var(--font);
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
  margin-left: 8px; text-decoration-thickness: 1px;
}

/* ---------- Hero (старый вариант, используется на служебных страницах) ---------- */

.hero { padding-block: clamp(56px, 8vw, 96px) clamp(48px, 6vw, 80px); }
.hero h1 { margin-bottom: 24px; }
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---------- Bento: категории ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.bento-card {
  position: relative;
  border-radius: var(--r-lg);
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  transition: transform var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease), border-color var(--t-move) var(--ease);
}
.bento-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line); }
/* Число — то же оформление, что у цены на карточке товара: тот же вес,
   тот же терракотовый, та же мелкая подпись снизу. Секция перестаёт
   отказываться от сильнейшего приёма системы. */
.bento-card { justify-content: space-between; gap: 22px; }
.bento-num {
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.035em;
  color: var(--accent);
}
.bento-num small {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 5px;
  color: var(--ink-soft);
}
.bento-body { display: flex; flex-direction: column; gap: 6px; }
.bento-note {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-top: 4px;
}
.bento-card h3 { margin-bottom: 0; }
.bento-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.bento-card .count {
  position: absolute; top: 22px; right: 24px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--ink-soft); text-transform: uppercase;
}
.bento-card .deco {
  position: absolute;
  top: -10px; left: -10px;
  width: 130px; height: 130px;
  opacity: .1;
  pointer-events: none;
}
.bento-card.wide { grid-column: span 2; }
.bento-card.tall { grid-row: span 2; justify-content: space-between; min-height: 396px; }
.bento-card.dark { background: var(--dark); border-color: var(--dark); color: #EFE9DC; }
.bento-card.dark h3 { color: #F7F7F5; }
.bento-card.dark p, .bento-card.dark .count { color: #9E9E98; }
.bento-card.dark .deco { opacity: .16; }
.bento-card.terra { background: var(--accent); border-color: var(--accent); color: #FCEFE6; }
.bento-card.terra h3 { color: #FFF8F2; }
.bento-card.terra p, .bento-card.terra .count { color: #FDEFE7; }
/* На залитых карточках терракотовое число потерялось бы: там оно светлое */
.bento-card.terra .bento-num { color: #FFF8F2; }
.bento-card.terra .bento-num small { color: #FDEFE7; }   /* было 3,9:1 */
.bento-card.dark .bento-num { color: #E0A06C; }
.bento-card.dark .bento-num small { color: #9E9E98; }

/* ---------- Карточка товара ---------- */

/* Три товара в ряд вместо четырёх: воздух вокруг товара —
   самый дешёвый способ выглядеть дорого. */
.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
  gap: 22px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t-move) var(--ease), border-color var(--t-move) var(--ease), transform var(--t-move) var(--ease);
  position: relative;
}
.card:hover { box-shadow: var(--sh-2); border-color: var(--line); transform: translateY(-2px); }

.card-media {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.card-media svg { width: 100%; height: 100%; display: block; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }

.tags { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; }
.tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.94);
  color: var(--ink);
  backdrop-filter: blur(6px);
}
/* Метки-плашки заливкой — язык распродажи. Оставляем контурные:
   заметно, но не кричит. */
.tag.premium { background: rgba(255,255,255,.94); color: var(--dark);   box-shadow: inset 0 0 0 1px currentColor; }
.tag.hit     { background: rgba(255,255,255,.94); color: var(--accent); box-shadow: inset 0 0 0 1px currentColor; }
.tag.info    { background: rgba(255,255,255,.94); color: var(--blue);   box-shadow: inset 0 0 0 1px currentColor; }
.tag.demo    { background: #7A6CB0; color: #fff; }

/* Лейблы происхождения — материальное обоснование цены рядом с ней */
.labels { display: flex; flex-wrap: wrap; gap: 6px; }
.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-mid);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 3px 7px;
  white-space: nowrap;
}
.label.origin { border-color: var(--dark-3); color: var(--dark); }

/* Наличие */
.stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.stock::before { content: ''; width: 7px; height: 7px; border-radius: var(--r-sm); background: currentColor; }
.stock.in       { color: var(--dark); }
.stock.ripening { color: var(--blue); }
.stock.order    { color: var(--ink-soft); }

.card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; gap: 10px; }
.card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--ink);
  cursor: pointer;
}
.card-title:hover { color: var(--accent); }
/* Описание прямо в сетке: чтобы понять, что внутри, не нужно кликать */
.card-desc {
  font-size: 13px; line-height: 1.45; color: var(--ink-mid); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }

/* Главная цена — за минимальную порцию: килограмм сала за 39,90
   отпугивает, порция за 12 — нет. Килограмм уходит во вторую строку. */
.price { font-family: var(--font); font-size: 25px; font-weight: 600; color: var(--accent); line-height: 1.05; }
.price .approx { font-size: 17px; color: var(--ink-soft); }
.price small,
.price .per {
  font-family: var(--mono); font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--ink-soft); display: block; margin-top: 4px; letter-spacing: .02em; }
.price .per b { color: var(--ink-mid); font-weight: 700; }

.add-btn {
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--dark);
  background: transparent;
  color: var(--dark);
  display: grid; place-items: center;
  flex: none;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.add-btn:hover { background: var(--dark); color: #F5F5F2; }

/* степпер количества — появляется после добавления */
.stepper {
  display: none;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 3px;
  background: var(--bg);
}
.card.in-cart .stepper { display: flex; }
.card.in-cart .add-btn { display: none; }
.stepper button {
  width: 32px; height: 32px;
  border: 0; background: transparent;
  border-radius: var(--r-sm);
  font-size: 17px;
  line-height: 1;
  color: var(--dark);
  display: grid; place-items: center;
  transition: background .18s var(--ease);
}
.stepper button:hover { background: var(--surface-2); }
.stepper .qty { min-width: 46px; text-align: center; font-size: 14px; font-weight: 700; }

/* ---------- Хлебные крошки ---------- */

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-soft); margin-bottom: 14px;
}
.crumbs a { color: var(--blue); }
.crumbs a:hover { text-decoration: underline; }
.crumbs span.sep { color: var(--ink-soft); }   /* 1,29:1 на --line не читалось */

/* ---------- Фасетные фильтры ---------- */

.facet + .facet { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.facet-list { display: flex; flex-direction: column; gap: 2px; }
.facet-opt {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--ink-mid);
  padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.facet-opt:hover { background: var(--surface-2); color: var(--ink); }
.facet-opt input { accent-color: var(--blue); flex: none; margin: 0; }
.facet-opt .cnt { margin-left: auto; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.facet-opt.off { opacity: .42; }
.facet-opt.on { color: var(--ink); font-weight: 600; }

.chips-active { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip-x {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600;
  background: var(--blue-soft); color: var(--blue);
  border: 1px solid transparent; border-radius: var(--r-sm); padding: 6px 10px 6px 13px;
}
.chip-x button { border: 0; background: 0; color: inherit; font-size: 15px; line-height: 1; padding: 0 2px; }
.chip-x button:hover { color: var(--accent); }

/* ---------- Липкая панель покупки на мобильном ---------- */

.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 105;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 12px;
  box-shadow: 0 -6px 24px rgba(28,26,22,.1);
}
.buybar .sum { flex: 1; min-width: 0; }
.buybar .sum b { display: block; font-family: var(--font); font-size: 21px; color: var(--accent); line-height: 1.1; }
.buybar .sum span { font-size: 12px; color: var(--ink-soft); }
.buybar .btn { flex: none; }
.compare .ours { background: var(--surface-2); }
.compare thead .ours { background: var(--dark); color: #F0F0ED; border-radius: var(--r-sm) var(--r-sm) 0 0; }

/* ---------- Как считается итог ---------- */

.howcalc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border-radius: var(--r-md); overflow: hidden; }
.howcalc div { background: var(--surface); padding: 18px; }
.howcalc b { display: block; font-size: 15px; margin-bottom: 5px; }
.howcalc span { font-size: 13px; color: var(--ink-mid); line-height: 1.5; }
.howcalc .n { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--blue); display: block; margin-bottom: 8px; }

/* ---------- Каталог ---------- */

.catalog-layout { display: grid; grid-template-columns: 236px 1fr; gap: 40px; align-items: start; }
/* Без этого нескручиваемая лента разделов раздувает колонку по min-content,
   и на телефоне вся страница едет вбок. */
.catalog-layout > * { min-width: 0; }

/* Панель прилипала, но своей высоты не имела: всё, что не влезало в экран,
   обрезалось, и добраться до нижних фасетов можно было только прокрутив
   весь список товаров. Теперь у неё собственная прокрутка.
   overscroll-behavior не даёт странице «подхватить» скролл, когда
   фильтры закончились. */
.sidebar {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 124px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  padding-right: 10px;
  margin-right: -10px;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.side-block + .side-block { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.side-title {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px;
}
.side-filters summary { list-style: none; }
.side-filters summary::-webkit-details-marker { display: none; }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-list button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 15px;
  color: var(--ink-mid);
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.side-list button:hover { background: var(--surface-2); color: var(--ink); }
.side-list button.is-active { background: var(--dark); color: #F0F0ED; font-weight: 600; }
.side-list button.is-active i { color: #A9A08C; }
.side-list i { font-style: normal; font-size: 12px; color: var(--ink-soft); }
.side-list .sub-item { padding-left: 26px; font-size: 14px; }

.catalog-bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft);
}
.search {
  flex: 1 1 240px;
  position: relative;
}
.search input, .field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search input { padding-left: 42px; border-radius: var(--r-sm); }
.search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); }
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--dark);
  box-shadow: 0 0 0 3px rgba(33,55,42,.09);
}
select { appearance: none; background-image: none; padding-right: 34px; cursor: pointer; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: '';
  position: absolute; right: 14px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.6px solid var(--ink-soft);
  border-bottom: 1.6px solid var(--ink-soft);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.result-count { font-size: 14px; color: var(--ink-soft); margin-left: auto; }

.empty { padding: 70px 20px; text-align: center; color: var(--ink-soft); }
.empty b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 8px; font-family: var(--font); }

/* ---------- Люксовая сетка каталога ----------
   Карточка раздета до трёх элементов: снимок, название, цена.
   Ни рамки, ни заливки — товар лежит на белом, отделённый только
   воздухом. Всё остальное (состав, метки, статус) переехало в
   разворот товара. Плотная карточка .card осталась для блока
   «Что взять» на главной, где импульс уместен.                 */

.lux-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}
.lux-card {
  position: relative;
  display: flex; flex-direction: column;
  transition: transform var(--t-move) var(--ease);
}
.lux-card:hover { transform: translateY(-4px); }

.lux-media {
  aspect-ratio: 3 / 4;            /* вертикальный кадр читается редакционно */
  overflow: hidden; position: relative;
  background: var(--surface-2);
  display: block;
}
.lux-media svg, .lux-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Кадр держит и снимок, и кнопку. Раньше кнопка лежала внутри ссылки
   на товар, поэтому быстрый набор с витрины уводил на разворот. */
.lux-frame { position: relative; }

/* Кнопка появляется по наведению: в покое витрина остаётся чистой */
.lux-cta {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-panel) var(--ease), transform var(--t-panel) var(--ease);
}
.lux-card:hover .lux-cta,
.lux-card:focus-within .lux-cta { opacity: 1; transform: none; }
.lux-card.in-cart .lux-cta { opacity: 1; transform: none; }

.lux-add {
  display: block; width: 100%;
  padding: 12px 0; border: 0; border-radius: var(--r-sm);
  background: rgba(255,255,255,.94); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600;
  backdrop-filter: blur(6px);
}

/* Набор количества прямо на витрине — как в сетке на главной. */
.lux-stepper {
  display: none;
  align-items: center; justify-content: space-between;
  border-radius: var(--r-sm);
  padding: 3px;
  background: var(--dark); color: #F5F5F2;
}
.lux-card.in-cart .lux-stepper { display: flex; }
.lux-card.in-cart .lux-add { display: none; }
.lux-stepper button {
  width: 36px; height: 36px; flex: none;
  border: 0; background: transparent; color: inherit;
  border-radius: var(--r-sm);
  font: inherit; font-size: 17px; line-height: 1;
  display: grid; place-items: center;
  transition: background .18s var(--ease), transform .14s var(--ease);
}
.lux-stepper button:hover { background: rgba(255,255,255,.14); }
.lux-stepper button:active { transform: scale(.92); }
.lux-qty {
  flex: 1 1 auto; text-align: center;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
}

/* На тач-устройствах наведения не бывает: тап по карточке открывает
   разворот, и скрытую кнопку человек не видит никогда. Показываем сразу. */
@media (hover: none) {
  .lux-cta { opacity: 1; transform: none; }
}

.lux-body { padding-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.lux-name {
  font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em;
  color: var(--ink);
  /* Длинное название («Курица фаршированная блинами…») растило карточку на 4 строки */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--t-micro) var(--ease);
}
.lux-card:hover .lux-name { color: var(--accent); }
.lux-price { display: flex; align-items: baseline; gap: 10px; font-size: 16px; font-weight: 500; }
/* Скидка без плашки: зачёркнутая цена и тонкая подпись */
.lux-price s { color: var(--ink-soft); font-weight: 400; font-size: 14px; }
.lux-per {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.lux-stock { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.lux-ready { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Позиция без проставленной цены ----------
   Владелец заполняет прайс сам, и до этого момента позиция остаётся
   в каталоге: её видно, про неё можно спросить, но купить нельзя.
   Поэтому «Цена уточняется» набрана спокойно, без акцентного цвета —
   это не оффер, а состояние. */

.price-tba, .lux-tba {
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}
.spread-tba { color: var(--ink-soft); font-size: 21px; }

.ask-btn {
  align-self: flex-end;
  white-space: nowrap;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color var(--t-micro) var(--ease), background var(--t-micro) var(--ease);
}
.ask-btn:hover { border-color: var(--ink); background: var(--surface); }

/* На витрине каталога кнопка-вопрос занимает место «В корзину» */
.lux-add.lux-ask {
  display: grid; place-items: center;
  align-self: auto; border: 0; white-space: nowrap;
  background: rgba(255,255,255,.94); color: var(--ink);
}

@media (max-width: 1024px) { .lux-grid { gap: 32px; } }
@media (max-width: 860px)  { .lux-grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 520px)  { .lux-grid { grid-template-columns: 1fr 1fr; gap: 18px; } .lux-body { padding-top: 12px; } .lux-name { font-size: 15px; } }

/* ---------- Разворот товара вместо модального окна ----------
   Модалка — язык интерфейса, разворот — язык каталога. */

.modal.spread-mode {
  width: min(1100px, calc(100vw - 32px));
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px rgba(23,23,23,.18);
}
.spread { display: grid; grid-template-columns: 1fr 1fr; }
.spread-media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-2); }
.spread-media svg, .spread-media img { width: 100%; height: 100%; object-fit: cover; }
.spread-body { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.spread-body h3 {
  font-size: clamp(24px, 2.8vw, 38px); font-weight: 500; letter-spacing: -.02em;
  line-height: 1.12; margin: 12px 0 18px;
}
.spread-txt { font-size: 16px; line-height: 1.65; color: var(--ink-mid); max-width: 44ch; margin: 0; }
.spread-meta { display: grid; margin: 26px 0 28px; font-family: var(--mono); font-size: 12px; }
.spread-meta div {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.spread-meta span:first-child { color: var(--ink-soft); letter-spacing: .06em; }
.spread-price { font-size: 25px; font-weight: 500; letter-spacing: -.02em; }
.spread-price s { font-size: 16px; font-weight: 400; color: var(--ink-soft); margin-left: 10px; }
.spread-per {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); display: block; margin-top: 7px;
}
@media (max-width: 860px) {
  .spread { grid-template-columns: 1fr; }
  /* На узком экране снимок съедал почти весь разворот — ограничиваем,
     чтобы текст и кнопка попадали в первый экран модального окна. */
  .spread-media { aspect-ratio: 16 / 10; max-height: 38vh; }
}

/* ---------- Модалка товара ---------- */

.overlay {
  position: fixed; inset: 0;
  background: rgba(22,20,17,.42);
  backdrop-filter: blur(3px);
  z-index: 90;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-panel) var(--ease);
}
.overlay.on { opacity: 1; pointer-events: auto; }

.modal {
  position: fixed;
  z-index: 100;
  left: 50%; top: 50%;
  transform: translate(-50%, -46%);
  width: min(940px, calc(100vw - 32px));
  max-height: min(88vh, 800px);
  overflow: auto;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-panel) var(--ease), transform var(--t-panel) var(--ease);
}
.modal.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: var(--r-sm);
  border: 0; background: rgba(255,255,255,.9);
  display: grid; place-items: center; z-index: 3;
  box-shadow: var(--sh-1);
}
.modal-close:hover { background: #fff; }

.weight-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.weight-picker button {
  padding: 9px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  transition: all .18s var(--ease);
}
.weight-picker button:hover { border-color: var(--ink); }
.weight-picker button.is-active { background: var(--dark); border-color: var(--dark); color: #F0F0ED; }

.note {
  background: var(--surface-2);
  border-left: 2px solid var(--blue);
  padding: 12px 16px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13px;
  color: var(--ink-mid);
  line-height: 1.5;
}

/* ---------- Допродажа ---------- */

.upsell {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 20px;
}
.upsell-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.upsell.in-modal {
  border-top: 1px solid var(--line);
  margin: 0;
  padding: 24px 32px 30px;
  background: var(--bg);
}
.upsell.in-modal .mini-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.mini-row { display: flex; flex-direction: column; gap: 8px; }

.mini {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.mini:hover { border-color: var(--line); box-shadow: var(--sh-1); }
.mini-media { width: 46px; height: 46px; border-radius: var(--r-sm); overflow: hidden; flex: none; background: var(--surface-2); }
.mini-media svg, .mini-media img { width: 100%; height: 100%; object-fit: cover; }
.mini-info { flex: 1; min-width: 0; }
.mini-name {
  font-size: 13px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini-price { font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 3px; }
.mini-price span { font-weight: 500; color: var(--ink-soft); }
.mini-add {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--r-sm);
  border: 1px solid var(--dark);
  background: transparent;
  color: var(--dark);
  display: grid; place-items: center;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.mini-add:hover { background: var(--dark); color: #F5F5F2; }

.gap-nudge {
  display: flex; gap: 12px; align-items: center;
  background: var(--surface-2);
  border: 1px dashed var(--blue);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.gap-nudge b { font-size: 14px; display: block; margin-bottom: 2px; }
.gap-nudge span { font-size: 13px; color: var(--ink-soft); }

/* ---------- Корзина-шторка ---------- */

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(430px, 100vw);
  background: var(--bg);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-panel) var(--ease);
  box-shadow: var(--sh-3);
}
.drawer.on { transform: none; }
.drawer-head {
  padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.drawer-head h3 { font-size: 21px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.drawer-foot { padding: 20px 24px 24px; border-top: 1px solid var(--line); background: var(--surface-2); }

.line-item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.line-item:last-child { border-bottom: 0; }
.line-media { width: 68px; height: 68px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); flex: none; }
.line-media svg, .line-media img { width: 100%; height: 100%; object-fit: cover; }
.line-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.line-name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.line-meta { font-size: 12px; color: var(--ink-soft); }
.line-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.line-price { font-weight: 700; font-size: 15px; white-space: nowrap; }
.line-remove { background: 0; border: 0; padding: 4px; color: var(--ink-soft); }
.line-remove:hover { color: var(--accent); }

.sum-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; color: var(--ink-mid); }
.sum-row.total { font-size: 19px; color: var(--ink); font-weight: 700; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.sum-row.total b { font-family: var(--font); font-size: 25px; font-weight: 600; }

.progress-track { height: 5px; border-radius: var(--r-sm); background: var(--line); overflow: hidden; margin: 6px 0 14px; }
/* Ширина 100% плюс scaleX вместо анимации width: transform не дёргает вёрстку */
.progress-fill { height: 100%; width: 100%; background: var(--dark); border-radius: var(--r-sm); transform-origin: left; transition: transform .4s var(--ease); }

/* ---------- Оформление заказа ---------- */

.checkout-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: start; }
.panel {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 34px);
}
.panel + .panel { margin-top: 20px; }
.panel h3 { margin-bottom: 20px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-mid); margin-bottom: 7px; }
.field .hint { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Класс, а не инлайн: инлайновый стиль перебивает медиазапрос ниже,
   и на телефоне колонки перестают схлопываться. */
.field-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.field.error input, .field.error textarea, .field.error select { border-color: #B23B2E; }
.req { color: var(--accent); font-weight: 700; margin-left: 2px; }
.field .err { display: none; font-size: 12px; color: #B23B2E; margin-top: 6px; }
.field.error .err { display: block; }

.radio-cards { display: grid; gap: 10px; }
.radio-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.radio-card:hover { border-color: var(--ink-soft); }
.radio-card input { margin-top: 3px; accent-color: var(--dark); flex: none; }
.radio-card.sel { border-color: var(--dark); background: rgba(33,55,42,.035); }
.radio-card b { display: block; font-size: 15px; margin-bottom: 3px; }
.radio-card span { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }

.summary { position: sticky; top: 100px; }

/* ---------- Подвал ---------- */

.footer { background: var(--dark); color: #B4B4AE; padding-block: 64px 32px; }
.footer h4, .footer .footer-head { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #A09988; margin: 0 0 16px; font-weight: 700; }
.footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-logo { font-family: var(--font); font-size: 30px; color: #F5EFE2; letter-spacing: .04em; margin-bottom: 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.footer-bottom {
  margin-top: 48px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: 13px; color: #A09988;
}

/* ---------- Промокод ---------- */

.promo-box { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.promo-box label {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink-mid); margin-bottom: 7px;
}
.promo-row { display: flex; gap: 8px; }
.promo-row input {
  flex: 1; min-width: 0;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: 15px; background: var(--bg); color: var(--ink);
  text-transform: uppercase; letter-spacing: .04em;
}
.promo-row .btn { flex: none; }
.promo-ok, .promo-err { font-size: 13px; margin-top: 8px; line-height: 1.45; }
.promo-ok { color: var(--dark); font-weight: 600; }
.promo-err { color: #A33224; }
.sum-row.promo-line span:last-child { color: var(--dark); font-weight: 700; }

/* ---------- Живая витрина: мозаика публикаций ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 14px;
}
.g-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  display: block;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.g-tile.big { grid-row: span 2; }
.g-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.g-tile img, .g-tile svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 16px 14px;
  font-size: 13px; font-weight: 600; line-height: 1.35; color: #F7F7F5;
  background: linear-gradient(to top, rgba(14,23,18,.86), rgba(14,23,18,0));
}
.g-play {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: rgba(14,23,18,.62); color: #fff;
  display: grid; place-items: center;
  backdrop-filter: blur(4px);
}
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
}
@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; gap: 10px; }
  .g-tile.big { grid-row: span 2; }
}

/* ---------- Приветствие руководителя ---------- */

.owner {
  display: grid; grid-template-columns: 132px 1fr; gap: 24px; align-items: center;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 26px 30px;
}
.owner-photo {
  width: 132px; height: 132px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-2); display: grid; place-items: center;
  border: 1px solid var(--line);
}
.owner-photo img { width: 100%; height: 100%; object-fit: cover; }
.owner-ph {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.owner-text p {
  font-family: var(--font);
  font-size: clamp(17px, 1.8vw, 21px); line-height: 1.5;
  font-style: normal; color: var(--ink); margin: 0 0 14px;
}
.owner-sign b { display: block; font-size: 15px; }
.owner-sign span { font-size: 13px; color: var(--ink-soft); }
@media (max-width: 620px) {
  .owner { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
  .owner-photo { width: 96px; height: 96px; }
}

/* ---------- Отзывы с карт ---------- */

.reviews-widget {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface);
}
.reviews-widget iframe { width: 100%; height: 480px; border: 0; display: block; }

/* ---------- Быстрые пресеты над сеткой ---------- */

.quick-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.quick {
  padding: 8px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 14px; font-weight: 600; color: var(--ink-mid);
  transition: all .18s var(--ease);
}
.quick:hover { border-color: var(--ink); color: var(--ink); }
.quick.is-active { background: var(--dark); border-color: var(--dark); color: #F0F0ED; }

/* ---------- Липкая панель корзины на телефоне ---------- */

.mobile-bar { display: none; }
@media (max-width: 760px) {
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; gap: 10px; align-items: center;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(250,246,239,.94);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    transform: translateY(110%);
    transition: transform .28s var(--ease);
  }
  .mobile-bar.on { transform: none; }
  .mb-cart {
    flex: 1; min-width: 0; text-align: left;
    border: 0; background: transparent; padding: 0;
    display: flex; flex-direction: column; gap: 2px;
  }
  .mb-sum { font-size: 17px; font-weight: 800; color: var(--ink); }
  .mb-hint { font-size: 12px; color: var(--ink-soft); }
  .mobile-bar .btn { flex: none; }
  /* Панель перекрывает низ страницы — добавляем воздух под подвалом */
  body:has(.mobile-bar.on) .footer { padding-bottom: 96px; }
}

/* ---------- Тосты ---------- */

.toasts {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 120;
  display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none;
}
/* Тост с кнопкой действия должен принимать клик */
.toast { pointer-events: auto; display: flex; align-items: center; gap: 16px; }
.toast-act {
  border: 0; background: transparent; padding: 0;
  color: #E0A06C; font: inherit; font-weight: 700; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.toast-act:hover { color: #FFFFFF; }
.toast {
  background: var(--dark);
  color: #F0F0ED;
  padding: 13px 20px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--sh-3);
  animation: toast-in .3s var(--ease);
  max-width: 90vw;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Появление при скролле (единственный эффект) ---------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--t-move) var(--ease), transform var(--t-move) var(--ease); }
.reveal.seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Переход между страницами ----------

   Разделы сайта — отдельные документы, и браузер по умолчанию рвёт
   картинку: белый кадр, потом новая страница. Этим правилом он
   придерживает последний кадр старой страницы и перетекает в новую.

   Ни строчки JavaScript, ни роутера, ни единого лишнего запроса:
   механизм встроен в браузер. Где его нет (Firefox) — остаётся
   ровно прежнее поведение, проверок в коде не требуется.

   Важно: переход начинается, когда новая страница готова рисоваться.
   Поэтому шапка и рисуется до загрузки каталога (bootChrome в app.js) —
   иначе браузер аккуратно и плавно показал бы пустой верх экрана. */

@view-transition { navigation: auto; }

/* Шапка вынута из перехода отдельными именами: на всех страницах она
   одинаковая, и двигать её незачем — содержимое меняется под ней,
   как в приложении. Имена даём .topbar и .nav, а не #siteHeader:
   у него display:contents, своего бокса нет, снимать нечего.

   Высота у этих двух полос одна и та же везде, поэтому браузеру нечего
   растягивать — только проявить. Из-за размеров и не помечено
   содержимое: главная и каталог разной высоты, и переход пересчитывал
   бы геометрию блока, а это читается как рывок. */
.topbar { view-transition-name: topbar; }
.nav    { view-transition-name: navbar; }

/* Остальная страница: уход быстрее прихода. Ожидание должно ощущаться
   коротким, появление — спокойным. */
::view-transition-old(root) {
  animation: page-leave .18s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root) {
  animation: page-enter .32s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes page-leave { to   { opacity: 0; transform: translateY(-5px); } }
@keyframes page-enter { from { opacity: 0; transform: translateY(9px); } }

::view-transition-old(topbar), ::view-transition-new(topbar),
::view-transition-old(navbar), ::view-transition-new(navbar) {
  animation-duration: .18s;
}

/* Системная настройка «уменьшить движение» сильнее наших вкусов.
   Сдвиг убираем полностью, короткое проявление оставляем: оно
   объясняет, что страница сменилась, и не даёт белого кадра. */
@keyframes page-leave-flat { to   { opacity: 0; } }
@keyframes page-enter-flat { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: page-leave-flat .1s linear both; }
  ::view-transition-new(root) { animation: page-enter-flat .14s linear both; }
  ::view-transition-old(topbar), ::view-transition-new(topbar),
  ::view-transition-old(navbar), ::view-transition-new(navbar) {
    animation-duration: .1s;
  }
}

/* ---------- Адаптив ---------- */

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card.tall { grid-row: span 1; min-height: 190px; }
  /* На узком экране боковая панель занимала целый экран до товаров.
     Разделы превращаются в ленту чипсов, фильтры прячутся под кат. */
  .catalog-layout { grid-template-columns: 1fr; gap: 22px; }
  /* Собственная прокрутка нужна только прилипшей колонке. В ленте она
     мешала бы: панель и так идёт в общем потоке. */
  .sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    margin-right: 0;
  }
  .side-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .side-list::-webkit-scrollbar { display: none; }
  .side-list li { flex: none; }
  .side-list button {
    width: auto;
    white-space: nowrap;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    padding: 9px 15px;
  }
  .side-list .sub-item { padding-left: 15px; }
  .side-list i { display: none; }
  .side-filters summary { cursor: pointer; list-style: none; }
  .side-filters summary::-webkit-details-marker { display: none; }
  .side-filters summary::after {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: 8px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
  .side-filters[open] summary::after { transform: translateY(1px) rotate(-135deg); }
  .checkout-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 1024px) {
  /* Часы работы в верхней полосе первыми уходят в перенос — прячем их,
     телефон остаётся. */
  .topbar-links span { display: none; }
}

@media (max-width: 760px) {
  :root { --gut: 18px; }
  .nav-links { display: none; }
  .burger { display: grid; }
  .topbar-links { display: none; }
  .field-row, .field-row.cols-3 { grid-template-columns: 1fr; gap: 0; }
  .grid-products { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
  .howcalc { grid-template-columns: 1fr; }
  .buybar { display: flex; }
  body.has-buybar { padding-bottom: 84px; }
  .card-body { padding: 14px; gap: 8px; }
  .card-title { font-size: 14px; }
  .price { font-size: 19px; }
  .footer-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento-card.wide { grid-column: span 1; }
}

/* Мобильное меню */
.mobile-menu {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 95;
  padding: 90px 24px 32px;
  transform: translateY(-100%);
  transition: transform .32s var(--ease);
  overflow-y: auto;
}
.mobile-menu.on { transform: none; }
.mobile-menu a {
  display: block;
  font-family: var(--font);
  font-size: 27px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}