/* =============================================================
   АйсФуд — интернет-магазин замороженных полуфабрикатов.
   Дизайн-система: тёмная тема по умолчанию, светлая по выбору.
   Фирменный синий из логотипа, острые углы, моноширинный шрифт
   на технических подписях.
   ============================================================= */

/* ---------- 1. Токены ---------------------------------------- */
:root {
  /* тёмная тема — основная */
  /* Нейтральная тёмная база. Синий подтон гасил золотистую корочку:
     тёплая еда на холодном фоне теряет насыщенность. Синий остался
     фирменным акцентом, но ушёл из нейтрали. */
  --bg:          #121212;
  --surface:     #1A1A1A;
  --surface-2:   #242424;
  --surface-3:   #2E2E2E;
  --line:        #2C2C2C;
  --line-soft:   #202020;
  /* граница элементов управления: WCAG 1.4.11 требует 3:1, а --line даёт 1.25 */
  --line-strong: #6A6A6A;
  --text:        #F0F0F0;
  --text-2:      #A8A8A8;   /* 8.2:1 на поверхности */
  --text-3:      #8A8A8A;   /* 5.0:1 на поверхности */

  --accent:      #35A8FF;   /* фирменный синий: текст, линии, иконки */
  --accent-btn:  #0072D8;   /* фон кнопок под белый текст, 4.8:1 */
  --accent-hi:   #005CB2;   /* ховер темнее базы: на #0090F0 белый текст давал 3.36 */
  --accent-soft: rgba(53,168,255,.14);
  --navy:        #001860;   /* тёмно-синий из логотипа */

  --hit:         #FFC53D;
  --new:         #1E7A42;   /* белый текст 5.37, было 3.22 */
  --sale:        #D4382D;   /* фон плашки под белым текстом, 4.82 */
  --sale-text:   #FF8A7E;   /* тот же смысл, но как ТЕКСТ на поверхности */
  --ok:          #3FA96A;
  --danger:      #FF8F84;   /* текст ошибок на тёмном */

  --shadow:      0 18px 44px rgba(0,0,0,.45);
  --shadow-lift: 0 22px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(53,168,255,.28);
  /* было два синих пятна во весь экран — они и красили страницу в синий */
  --glow-a:      rgba(255,170,80,.055);
  --glow-b:      rgba(0,0,0,.40);
  --grain:       .026;
  /* тёплая подсветка под золотистым продуктом — она и делает еду аппетитной */
  --warm:        rgba(255,168,56,.22);

  --ph-fall:
    radial-gradient(58% 46% at 50% 70%, rgba(255,168,56,.16), transparent 72%),
    linear-gradient(168deg, #262626 0%, #171717 100%);

  /* шрифты: Rubik — заголовки и цены, Onest — весь остальной текст.
     Моноширинного больше нет: он читался технично и холодил еду. */
  --f-display: 'Rubik', system-ui, sans-serif;
  --f-body:    'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-label:   'Onest', system-ui, sans-serif;

  /* шкала */
  --r:    2px;
  --r-lg: 4px;
  --pad:  clamp(16px, 3.6vw, 48px);
  --max:  1440px;
  --gap:  clamp(12px, 1.4vw, 20px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --hdr:  71px;    /* высота липкой шапки */
}

:root[data-theme="light"] {
  /* Страница ровно белая: раньше фон #F4F2F0 чередовался с белыми
     блоками, и светлая тема выглядела пятнистой. */
  --bg:          #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #F3F0EC;
  --surface-3:   #E7E2DB;
  --line:        #DCD8D4;
  --line-soft:   #EAE7E4;
  --line-strong: #8E8E8E;
  --text:        #141414;
  --text-2:      #5A5A5A;   /* 7.0:1 на белом */
  --text-3:      #6E6E6E;   /* 5.1:1 на белом */

  --accent:      #0063BE;
  --accent-btn:  #0072D8;
  --accent-hi:   #005AAE;
  --accent-soft: rgba(0,114,216,.10);
  --danger:      #A32217;   /* текст ошибок на белом: 7.47, было 2.21 */
  --sale-text:   #B3271B;   /* «Скидка» как текст на белом */
  --ok:          #14783B;   /* «В наличии» на белом: 5.56, было 2.96 */

  --shadow:      0 14px 34px rgba(12,19,23,.10);
  --shadow-lift: 0 18px 38px rgba(12,40,70,.14), 0 0 0 1px rgba(0,114,216,.22);
  /* чёрное свечение и зерно и делали белую тему серой */
  --glow-a:      rgba(255,170,80,.05);
  --glow-b:      rgba(255,170,80,.03);
  --grain:       0;
  --warm:        rgba(255,150,20,.16);

  --ph-fall:
    radial-gradient(58% 46% at 50% 70%, rgba(255,150,20,.13), transparent 72%),
    linear-gradient(168deg, #FBF8F5 0%, #EAE4DD 100%);
}

/* ---------- 2. Сброс ----------------------------------------- */
/* Сообщаем браузеру, какая схема активна: иначе выпадающие списки
   <select>, скроллбары и автозаполнение рисуются светлыми поверх тёмной темы. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .25s var(--ease), color .25s var(--ease);
}
/* Два фирменных свечения на фоне и зерно поверх: убирают ощущение
   плоской заливки, но не мешают читать текст. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58% 40% at 12% 0%, var(--glow-a), transparent 68%),
    radial-gradient(52% 44% at 92% 24%, var(--glow-b), transparent 70%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
s { color: var(--text-3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* цель якорной ссылки не должна прятаться под липкую шапку */
#main, [id] { scroll-margin-top: calc(var(--hdr) + 12px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- 3. Типографика ----------------------------------- */
/* Заголовки уступают дорогу товару. Раньше самым громким элементом
   экрана был заголовок секции, а не еда — вес 800 при отрицательном
   трекинге перекрикивал витрину. */
.display { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.1rem, 4.8vw, 3.8rem); line-height: 1; letter-spacing: -.03em; }
.h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.08; letter-spacing: -.022em; }
.h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.55rem, 2.9vw, 2.5rem); line-height: 1.08; letter-spacing: -.028em; }
.h3 { font-family: var(--f-display); font-size: clamp(1rem, 1.3vw, 1.14rem); font-weight: 600; letter-spacing: -.01em; }
.lead { font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.55; color: var(--text-2); max-width: 60ch; }
.muted { color: var(--text-2); }
.prose { max-width: 68ch; color: var(--text-2); }
/* .wrap объявлен позже и при равной специфичности перебивал max-width */
.wrap.prose { max-width: 68ch; }
.prose p + p { margin-top: 1em; }
/* подпись: не моноширинный, а Onest в верхнем регистре с разрядкой */
.mono { font-family: var(--f-label); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- 4. Раскладка ------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
/* Между блоками должно быть заметно больше воздуха, чем внутри них —
   иначе страница читается сплошной лентой без группировки. */
.section { padding-block: clamp(44px, 6vw, 96px); }
.section + .section { padding-top: 0; }
.rule { border-top: 1px solid var(--line); }

/* заголовок секции: название слева, ссылка «все» справа */
/* Заголовок слева, ссылка справа, между ними пусто. Тонкая линия
   тут была, но читалась как случайная царапина, а не как приём. */
.shead {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: baseline; gap: 18px;
  margin-bottom: clamp(22px, 2.8vw, 38px);
}
.shead > .h2      { grid-column: 1; }
.shead > .shead__all { grid-column: 3; }
@media (max-width: 560px) {
  .shead { grid-template-columns: 1fr auto; }
}
/* засечка-градиент слева убрана: лишний декор рядом с заголовком */
.shead__all {
  color: var(--text-2); border: 0; white-space: nowrap;
  font-size: .88rem; display: inline-flex; align-items: center; gap: 7px;
  transition: color .2s var(--ease), gap .2s var(--ease);
}
.shead__all::after { content: '→'; font-size: 1.05em; line-height: 1; }
.shead__all:hover { color: var(--accent); gap: 11px; }
.shead__all:hover { color: var(--accent); }

/* ---------- 5. Фотослот -------------------------------------- */
/* Фотослот. Реальный кадр подставляется инлайновым background-image
   ВМЕСТЕ с --ph-fall: url() обязан быть записан в самой странице, иначе
   браузер разрешит относительный путь от CSS-файла, а не от документа.
   Нет файла — не рисуется верхний слой, остаётся ледяная заглушка. */
.ph {
  position: relative;
  background-color: var(--surface-2);
  background-image: var(--ph-fall);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.ph::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(58deg, rgba(255,255,255,.10) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(-58deg, rgba(0,0,0,.05) 0 1px, transparent 1px 12px);
  mix-blend-mode: overlay;
}

/* ---------- 6. Кнопки ---------------------------------------- */
.btn {
  --bg-b: var(--surface-2); --fg-b: var(--text); --bd-b: var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  background: var(--bg-b); color: var(--fg-b); border: 1px solid var(--bd-b);
  border-radius: var(--r);
  font-family: var(--f-label); font-size: .7rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .1s var(--ease);
}
.btn:hover { --bd-b: var(--accent); --fg-b: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn--accent {
  --bd-b: transparent; --fg-b: #fff;
  background: linear-gradient(180deg, #0072D8 0%, #0054AC 100%);
  box-shadow: 0 6px 18px rgba(0,114,216,.34), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--accent:hover {
  --fg-b: #fff;
  /* при наведении заливка ТЕМНЕЕ, а свечение сильнее: светлый синий
     не даёт белому тексту нужного контраста */
  background: linear-gradient(180deg, #0068C6 0%, #00468F 100%);
  box-shadow: 0 12px 30px rgba(0,144,240,.5), inset 0 1px 0 rgba(255,255,255,.26);
  transform: translateY(-1px);
}
.btn--accent:active { transform: translateY(0); }
.btn--ghost { --bg-b: transparent; }
.btn--wide { width: 100%; }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: .65rem; }
.btn svg { width: 14px; height: 14px; flex: none; }
.btn:disabled, .btn[disabled] {
  opacity: .45; cursor: not-allowed; box-shadow: none;
  filter: grayscale(.6);            /* заливка задана напрямую, opacity мало */
}
.btn:disabled:hover, .btn[disabled]:hover { transform: none; box-shadow: none; filter: grayscale(.6); }

/* кнопка «В корзину» на карточке */
/* кнопка не должна кричать громче цены: строчные вместо капса, ровный фон */
.btn--buy {
  --bd-b: transparent; --fg-b: #fff;
  background: var(--accent-btn); box-shadow: none;
  min-height: 38px; padding: 0 16px;
  font-size: .82rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  border-radius: 6px;
}
.btn--buy:hover { --fg-b: #fff; background: var(--accent-hi); box-shadow: none; }
/* .btn--buy задаёт background напрямую, поэтому одной сменой --bg-b
   заливку не убрать: зелёный текст оставался на синем градиенте (1.61:1) */
.btn--incart, .btn--incart:hover {
  --bg-b: transparent; --bd-b: var(--ok); --fg-b: var(--ok);
  background: transparent; box-shadow: none;
}

/* нажатое состояние для кнопок-переключателей (избранное на карточке товара) */
.btn[aria-pressed="true"] {
  --bg-b: var(--accent-soft); --bd-b: var(--accent); --fg-b: var(--accent);
  background: var(--accent-soft); box-shadow: none;
}

.ulink { position: relative; }
.ulink::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .26s var(--ease);
}
.ulink:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 7. Шапка ----------------------------------------- */
.header { position: sticky; top: 0; z-index: 60; background: var(--bg); border-bottom: 1px solid var(--line); }
:root[data-theme="light"] .header { border-bottom-color: var(--line); }
.header__in { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); min-height: 70px; }

.logo { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.logo__mark { height: 30px; width: auto; flex: none; }
.logo__img { height: 30px; width: auto; display: block; }
@media (max-width: 760px) { .logo__img { height: 24px; } }
.logo__txt { font-family: var(--f-display); font-weight: 800; font-size: 1.12rem; letter-spacing: -.05em; }
.logo__txt span { color: var(--accent); }

/* кнопка каталога — главный вход в товары */
.catbtn {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  min-height: 42px; padding: 0 18px; border-radius: var(--r);
  background: var(--accent-btn); color: #fff; font-weight: 600; font-size: .93rem;
  transition: background .2s var(--ease);
}
.catbtn:hover { background: var(--accent-hi); }
.catbtn__ic { display: grid; gap: 3px; }
.catbtn__ic i { display: block; height: 1.5px; background: #fff; border-radius: 1px; }
.catbtn__ic i:nth-child(1) { width: 14px; }
.catbtn__ic i:nth-child(2) { width: 10px; }
.catbtn__ic i:nth-child(3) { width: 14px; }

.nav { display: flex; gap: clamp(10px, 1.3vw, 20px); }
.nav a { font-size: .93rem; white-space: nowrap; padding-block: 6px; color: var(--text-2); transition: color .18s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }

.search { position: relative; flex: 1 1 220px; min-width: 0; }
.search input {
  width: 100%; min-height: 42px; padding: 0 14px 0 38px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--text);
  transition: border-color .2s;
}
.search input::placeholder { color: var(--text-3); }
.search input:focus { outline: none; border-color: var(--accent); }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-3); }

.hactions { display: flex; align-items: center; gap: clamp(6px, 1vw, 14px); flex: none; }
.hact { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 60px; min-height: 54px; padding: 5px 4px; border-radius: 10px; color: var(--text-2); transition: color .18s var(--ease), background .18s var(--ease); }
.hact:hover { color: var(--accent); background: var(--surface-2); }
.hact svg { width: 25px; height: 25px; }
.hact span { font-size: .7rem; letter-spacing: .01em; }
.hact__n {
  position: absolute; top: 1px; right: 8px; min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--accent-btn); color: #fff; border-radius: 10px;
  font-family: var(--f-label); font-size: .64rem; font-weight: 700;
  display: grid; place-items: center;
}
@media (max-width: 1080px) { .hact span { display: none; } .hact { min-width: 46px; min-height: 46px; } }

/* переключатель темы */
.theme {
  width: 52px; height: 26px; flex: none; border-radius: 13px;
  background: var(--surface-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; padding: 0 6px;
  position: relative;
}
/* Сам тумблер остаётся 52x26, но зона нажатия расширена до 44px по высоте:
   менять padding нельзя — он задан ниже в этом же правиле и перебивает. */
.theme::before {
  content: ''; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px;
}
/* position нужен: z-index на статическом элементе не работает,
   и ползунок ::after полностью закрывал активную иконку */
.theme svg { position: relative; width: 13px; height: 13px; color: var(--text-3); z-index: 1; }
.theme::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--accent-btn);
  transition: transform .26s var(--ease);
}
:root[data-theme="light"] .theme::after { transform: translateX(26px); }

.burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r); }
.burger span { display: block; width: 17px; height: 1.5px; background: var(--text); position: relative; transition: background .2s; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--text); transition: transform .25s var(--ease), top .25s var(--ease); }
.burger span::before { top: -5px; } .burger span::after { top: 5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Бургер появляется РОВНО тогда, когда прячется меню. Раньше в полосе
   761–1180px не было ни того, ни другого: навигация была недостижима. */
@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 760px) {
  .header__in { min-height: 58px; gap: 10px; flex-wrap: wrap; padding-block: 8px; }
  .catbtn span:not(.catbtn__ic) { display: none; }   /* прячем подпись, иконку оставляем */
  .catbtn { padding: 0 12px; }
  .hactions .hact { display: none; }
  .logo__txt { font-size: 1rem; }
  /* поиск переезжает на свою строку: он единственный сжимаемый элемент
     шапки и на 360px схлопывался до одной лупы */
  .search { order: 10; flex: 1 0 100%; }
}

/* выпадающий каталог */
.megamenu {
  position: absolute; top: 100%; left: var(--pad); z-index: 70;
  width: min(340px, calc(100vw - var(--pad) * 2));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 8px; margin-top: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.megamenu[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.megamenu a {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r);
  font-size: .93rem; transition: background .16s;
}
.megamenu a:hover { background: var(--surface-2); color: var(--accent); }
.megamenu a::before { content: ''; width: 6px; height: 6px; background: var(--accent); flex: none; border-radius: 1px; }
.megamenu a i { margin-left: auto; font-style: normal; color: var(--text-3); font-size: .8rem; }

/* мобильное меню */
.mnav {
  position: fixed; inset: 0 0 0 auto; width: min(86vw, 340px); z-index: 90;
  background: var(--surface); padding: 22px var(--pad) 100px;
  transform: translateX(100%); visibility: hidden;
  /* visibility переключаем мгновенно на открытии и с задержкой на закрытии:
     если её плавно «переходить», меню становится видимым не сразу,
     а на страницах без анимации кадров вообще залипает скрытым */
  transition: transform .3s var(--ease), visibility 0s linear .3s;
  display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
  border-left: 1px solid var(--line);
}
/* visibility, а не только сдвиг: иначе закрытое меню остаётся
   в порядке табуляции и с клавиатуры можно уехать за экран */
.mnav[data-open="true"] { transform: none; visibility: visible; transition: transform .3s var(--ease), visibility 0s; }
.mnav a { font-size: 1.05rem; font-weight: 500; padding: 13px 0; border-bottom: 1px solid var(--line); }
.mnav a:hover { color: var(--accent); }
.mnav__foot { margin-top: 24px; display: grid; gap: 10px; }
.mnav__foot a { border: 0; padding: 0; font-size: .95rem; color: var(--text-2); }
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: opacity .28s; }
.scrim[data-open="true"] { opacity: 1; visibility: visible; }

/* ---------- 8. Нижняя панель на мобильном -------------------- */
.tabbar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 75;
  background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar__in { display: grid; grid-template-columns: repeat(4, 1fr); }
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; color: var(--text-2); font-size: .6rem; }
.tabbar a[aria-current="page"], .tabbar a:hover { color: var(--accent); }
.tabbar svg { width: 21px; height: 21px; }
.tabbar .hact__n { top: 6px; right: calc(50% - 20px); }
@media (max-width: 760px) {
  .tabbar { display: block; }
  body { padding-bottom: 60px; }
}

/* ---------- 9. Баннеры --------------------------------------
   Слайды показывают картинку целиком: готовый широкий баннер идёт
   как <img> во всю ширину, товарные фото — во второй колонке
   с object-fit: contain. Ничего не обрезается ни на одной ширине.
   ------------------------------------------------------------- */
.hero { position: relative; background: #101010; }

/* Баннер уходит под шапку: она лежит на нём, а не стоит над ним.
   Отрицательный отступ ровно в высоту шапки — картинка начинается
   у самого верха страницы. */
/* Герой лежит внутри <main>, поэтому соседним селектором от шапки его
   не достать — класс ставится прямо на блок.

   Приём работает только на широких экранах. Ниже 900px шапка становится
   двухэтажной (111px), а баннер там всего ~145px в высоту — она бы его
   целиком и съела. На телефоне обычная шапка над обычным баннером. */
@media (min-width: 901px) {
  .hero--top { margin-top: calc(var(--hdr) * -1); }

  /* Затемнение под шапкой, иначе её текст теряется на светлых участках
     фотографии. Поверх слайдов, но под точками и подписями. */
  .hero--top::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: calc(var(--hdr) + 46px); z-index: 3; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 55%, transparent 100%);
  }
}
.hero__stage { position: relative; }

.hero__track {
  display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  transition: height .32s var(--ease);
  cursor: grab; touch-action: pan-y pinch-zoom;
}
.hero__track:active { cursor: grabbing; }
.hero__dots { user-select: none; }
.hero__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.hero__track.is-dragging a, .hero__track.is-dragging img { pointer-events: none; }
.hero__track::-webkit-scrollbar { display: none; }
/* Трек берёт высоту самого высокого слайда, поэтому короткие слайды
   надо растянуть — иначе под ними зияла полоса в 52px. */
.hero__slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; display: flex; align-items: center; align-self: stretch; }
.hero__slide--plain { align-items: center; justify-content: center; }

/* слайд с готовым баннером — текст уже впечатан в кадр */

.hero__banner { width: 100%; height: auto; display: block; }
/* Слайды разной высоты: трек подгоняется под активный (см. app.js),
   поэтому баннер везде показывается целиком, без обрезки. */

/* слайд «текст + товар» */
.hero__slide--split {
  background:
    radial-gradient(80% 120% at 78% 50%, rgba(53,168,255,.20), transparent 62%),
    linear-gradient(105deg, #0B1420 0%, #10203A 55%, #0C1826 100%);
}
/* В светлой теме этот слайд был голубым, и белый текст шапки на нём
   не читался. Герой теперь тёмный всегда — как сцена, независимо от
   темы страницы. Заодно карусель перестала мигать светлым и тёмным. */
:root[data-theme="light"] .hero__slide--split {
  background:
    radial-gradient(80% 120% at 78% 50%, rgba(53,168,255,.20), transparent 62%),
    linear-gradient(105deg, #0B1420 0%, #10203A 55%, #0C1826 100%);
}
:root[data-theme="light"] .hero__slide--split .hero__body h2 { color: #F5F7FA; }
:root[data-theme="light"] .hero__slide--split .hero__body p  { color: #A9B6C4; }
.hero__inner { width: 100%; display: grid; gap: 14px; align-items: center; padding-block: clamp(20px, 3.4vw, 44px); }
@media (min-width: 820px) { .hero__inner { grid-template-columns: 1fr minmax(0, .92fr); gap: 32px; } }
.hero__img {
  width: 100%; height: auto; display: block; justify-self: center;
  max-height: clamp(150px, 26vw, 330px); object-fit: contain;
}
.hero__body { max-width: 34ch; }

/* На телефоне слайды должны быть примерно одной высоты. Трек берёт
   высоту самого длинного, а текстовый слайд в одну колонку вырастал
   до 406px при баннере в 145px — под баннером зияло 260px пустоты.
   Ставим текст и фото в две колонки и убираем абзац: на 375px он всё
   равно занимал шесть строк, а его смысл повторяет заголовок. */
@media (max-width: 819px) {
  .hero__inner {
    grid-template-columns: 1fr 40%;
    gap: 12px;
    padding-block: 16px;
  }
  .hero__body h2 { font-size: clamp(1.15rem, 5.6vw, 1.7rem); }
  .hero__body p  { display: none; }
  .hero__body .btn { margin-top: 12px; }
  .hero__img { max-height: 148px; }
}
.hero__body h2 { font-family: var(--f-display); font-size: clamp(1.6rem, 3.4vw, 2.7rem); letter-spacing: -.045em; color: var(--text); }
.hero__body p { color: var(--text-2); margin: 12px 0 20px; font-size: .95rem; }

/* Точки лежат на самом кадре, а не на полосе под ним: полоса
   добавляла тёмный пустой пояс между баннером и содержимым. */
.hero__dots {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 5;
  display: flex; gap: 7px; justify-content: center; align-items: center;
  padding: 0;
}
/* тап-зона 30x24 вместо полоски в 2px */
.hero__dots button { width: 30px; height: auto; padding: 11px 0; background: none; }
.hero__dots button::before {
  content: ''; display: block; width: 30px; height: 3px; border-radius: 2px;
  /* поверх фотографии ориентир — белый, а не серый цвет разделителей */
  background: rgba(255,255,255,.42);
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
  transition: background .2s var(--ease);
}
.hero__dots button:hover::before { background: rgba(255,255,255,.7); }
.hero__dots button[aria-current="true"]::before { background: #fff; }

/* ---------- 10. Плитки категорий ----------------------------- */
.cats { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px)  { .cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .cats { grid-template-columns: repeat(4, 1fr); } }
.cat {
  position: relative; display: block; border: 0; border-radius: 14px;
  background: var(--surface-2); overflow: hidden; min-height: 190px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cat .ph { transition: transform .6s var(--ease); }
.cat__name { transition: color .22s var(--ease); }
/* Подпись внизу, а не сверху: взгляд идёт по фото и приходит к
   названию, а не спотыкается о текст поверх еды. */
.cat__name {
  position: absolute; left: 20px; right: 20px; bottom: 46px; z-index: 2;
  font-family: var(--f-display); font-size: clamp(.98rem, 1.2vw, 1.14rem);
  font-weight: 700; line-height: 1.2; letter-spacing: -.022em;
}
.cat__n {
  position: absolute; bottom: 20px; left: 20px; z-index: 2;
  color: var(--text-3); font-size: .79rem;
}
.cat .ph {
  position: absolute; inset: 0 0 34% 0;
  /* фото товара с прозрачным фоном — показываем целиком, не режем */
  background-size: contain;
  background-position: center 58%;
}
/* Раньше плёнка лежала на всём кадре и гасила еду. Теперь растушёвка
   только снизу — ровно там, где под ней текст. */
.cat::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(180deg, transparent 0%, var(--surface-2) 62%);
}
:root[data-theme="light"] .cat::after {
  background: linear-gradient(180deg, transparent 0%, var(--surface-2) 62%);
}
.cat__name, .cat__n { z-index: 2; }
.cat--sale { background: #7A1E17; }
.cat--sale::after { background: linear-gradient(180deg, transparent 0%, #7A1E17 62%); }
.cat--sale .cat__name { color: #fff; }
.cat--sale .cat__n { color: rgba(255,255,255,.72); }


/* три крупные плитки категорий */
.cats.cats--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* четыре плитки: 2x2 на средних ширинах, чтобы не оставалась одна в ряду */
.cats.cats--4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px)  { .cats.cats--4 { grid-template-columns: 1fr; } }
@media (min-width: 1100px) { .cats.cats--4 { grid-template-columns: repeat(4, 1fr); } }
.cat--big { min-height: 260px; }
@media (min-width: 700px) { .cat--big { min-height: 340px; } }
.cat--big .cat__name { font-size: clamp(1.02rem, 1.35vw, 1.28rem); max-width: 18ch; }

/* плитка без фото — текстовый блок «почему мы» */
.cat--flat { min-height: 0; padding: 24px; display: grid; gap: 9px; align-content: start; background: var(--surface-2); }
.cat--flat::after { display: none; }
.cat--flat .cat__t { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; }
.cat--flat p { color: var(--text-2); font-size: .89rem; line-height: 1.55; }


/* слайд с готовым баннером: текст уже впечатан в кадр */
.hero__slide--plain::before { display: none; }
.hero__slide--plain .ph::after { display: none; }

/* ---------- 11. Карточка товара ------------------------------ */
.pgrid { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .pgrid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1360px) { .pgrid { grid-template-columns: repeat(5, 1fr); } }

.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 1100px) {
  /* auto-fit вместо жёстких пяти: лента из четырёх товаров больше
     не оставляет пустую ячейку в ряду */
  .rail { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); overflow: visible; }
}

/* Товар лежит на странице, а не в коробке: рамка и заливка карточки
   читались как элемент интерфейса и спорили с самим продуктом.
   Подложка осталась только под фотографией. */
.card {
  position: relative; display: flex; flex-direction: column;
  background: transparent; border: 0; border-radius: 0;
  transition: transform .28s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-4px); }
  .card:hover .card__ph { box-shadow: var(--shadow-lift); }
  .card:hover .card__ph { transform: scale(1.05); }
  .cat:hover { border-color: transparent; transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  .cat:hover .ph { transform: scale(1.06); }
  .cat:hover .cat__name { color: var(--accent); }
  
}
/* тёплое свечение под продуктом: фото прозрачные, подложка — наша */
.card__ph, .pdp__main, .cline .ph, .hero__img-slot {
  --ph-fall:
    radial-gradient(56% 48% at 50% 66%, var(--warm), transparent 72%),
    linear-gradient(168deg, #2A2A2A 0%, #161616 100%);
  /* Товар показываем целиком. cover срезал 13 снимков из 26 — до 37.9%,
     а полей вокруг продукта в файлах почти нет, резалась сама еда.
     Тот же приём уже стоял на плитках категорий. */
  background-size: contain;
  background-position: center 62%;
}

/* Диагональная штриховка задумана как иней на ПУСТОМ слоте.
   На реальном снимке она читается как грязное стекло — снимаем её там,
   где под ней лежит еда. */
.card__ph::after, .pdp__main::after, .cline .ph::after { display: none; }
:root[data-theme="light"] .card__ph,
:root[data-theme="light"] .pdp__main,
:root[data-theme="light"] .cline .ph {
  --ph-fall:
    radial-gradient(56% 48% at 50% 66%, var(--warm), transparent 72%),
    linear-gradient(168deg, #FFFFFF 0%, #EFEAE4 100%);
}

.card__tags { position: absolute; top: 6px; left: 6px; z-index: 3; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.tag { font-family: var(--f-label); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; color: #121212; box-shadow: 0 3px 10px rgba(0,0,0,.28); }
.tag--hit  { background: var(--hit); }
.tag--new  { background: var(--new); color: #fff; }
.tag--sale { background: var(--sale); color: #fff; }

.card__fav {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px; color: var(--text-3); transition: color .2s;
}
.card__fav:hover { color: var(--accent); }
.card__fav svg { width: 19px; height: 19px; }
.card__fav.is-on { color: var(--accent); }
.card__fav.is-on svg path { fill: var(--accent); }
.card__favn {
  font-family: var(--f-label); font-size: .68rem; font-weight: 600; line-height: 1;
  /* лежит поверх снимка, где фон непредсказуем — своя подложка */
  background: rgba(0,0,0,.55); color: #fff; padding: 2px 5px; border-radius: 999px;
}
:root[data-theme="light"] .card__favn { background: rgba(0,0,0,.42); }

.card__ph {
  display: block; aspect-ratio: 1; border-radius: 10px;
  transform-origin: center 62%;
  transition: transform .5s var(--ease), box-shadow .28s var(--ease);
}
.card__b { padding: 14px 2px 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
/* Артикул ушёл вниз и стал тише. Раньше он стоял первой строкой, и
   покупатель читал «АРТ. 1001» раньше названия товара. */
.card__art { margin-top: 10px; color: var(--text-3); font-size: .72rem; letter-spacing: .04em; }
.card__name { font-size: 1rem; font-weight: 600; line-height: 1.28; letter-spacing: -.012em; }
.card__name a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__name a:hover { color: var(--accent); }
.card__pack { color: var(--text-3); font-size: .8rem; letter-spacing: 0; text-transform: none; }
/* Цена и кнопка стояли в одну строку и дрались за внимание: синяя
   заливка перевешивала цифру. Теперь цена сама по себе, кнопка под ней
   во всю ширину — так в карточке появляется низ. */
/* Цена и кнопка стояли в одну строку и дрались за внимание: синяя
   заливка перевешивала цифру. Кнопка ушла вниз во всю ширину и стала
   тише — сплошной ряд синих плашек читался как шаблон. */
.card__foot { margin-top: auto; padding-top: 14px; display: grid; gap: 10px; }
.card__foot .btn { width: 100%; }
.card .btn--buy {
  --fg-b: var(--accent); --bd-b: transparent;
  background: var(--accent-soft); box-shadow: none; font-weight: 600;
}
.card .btn--buy:hover { --fg-b: #fff; background: var(--accent-btn); }
.card__ph + .card__b { padding-top: 12px; }
.price {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.3rem, 1.7vw, 1.5rem); letter-spacing: -.035em;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 9px;
}
.price s { color: var(--text-3); font-family: var(--f-body); font-size: .8rem; font-weight: 400; letter-spacing: 0; }
.card__out { color: var(--text-3); font-size: .74rem; }

/* ---------- 12. Блог ----------------------------------------- */
.posts { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.post { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); transition: border-color .22s; }
.post:hover { border-color: var(--accent); }
.post .ph { aspect-ratio: 16/9; }
.post__b { padding: 14px; display: grid; gap: 8px; }
.post__b h3 { font-size: .98rem; }
.post__meta { display: flex; justify-content: space-between; color: var(--text-3); }

/* ---------- 13. FAQ ------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 44px 18px 0; position: relative; font-size: 1rem; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px;
  background: linear-gradient(currentColor,currentColor) center/12px 1px no-repeat,
              linear-gradient(currentColor,currentColor) center/1px 12px no-repeat;
  transform: translateY(-50%); transition: transform .26s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); }
.faq__a { padding: 0 60px 20px 0; color: var(--text-2); max-width: 76ch; }

/* ---------- 14. Страница каталога ---------------------------- */
.phead { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: clamp(18px, 2.6vw, 34px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 7px; color: var(--text-3); margin-bottom: 14px; }
.crumbs a:hover { color: var(--accent); }

.clayout { display: grid; gap: clamp(18px, 2.4vw, 34px); align-items: start; }
@media (min-width: 1000px) { .clayout { grid-template-columns: 236px 1fr; } }
.filters { display: grid; gap: 20px; }
@media (min-width: 1000px) { .filters { position: sticky; top: calc(var(--hdr) + 12px); } }
.fbox__sum { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.fbox__body { display: grid; gap: 20px; padding-top: 18px; }
@media (max-width: 999px) { .fbox[data-open="false"] .fbox__body { display: none; } }
@media (min-width: 1000px) { .fbox__sum { display: none; } .fbox__body { padding-top: 0; } }
.fgroup h2 { font-size: .88rem; margin-bottom: 10px; }
.fgroup ul { display: grid; gap: 8px; }
.fopt { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: .87rem; color: var(--text-2); transition: color .16s; }
.fopt:hover { color: var(--text); }
.fopt input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.fopt .n { margin-left: auto; font-family: var(--f-label); font-size: .64rem; color: var(--text-3); }
.frange { display: flex; align-items: center; gap: 8px; }
.frange input { width: 100%; min-width: 0; min-height: 38px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); }
.frange input:focus { outline: none; border-color: var(--accent); }

.ctool { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.ctool__l, .ctool__r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.perpage { display: flex; gap: 4px; }
.perpage button { min-width: 32px; height: 30px; border-radius: 15px; color: var(--text-2); font-size: .8rem; transition: background .18s, color .18s; }
.perpage button[aria-current="true"] { background: var(--surface-3); color: var(--text); }
.ctool select { min-height: 38px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); }
.empty { border: 1px dashed var(--line); border-radius: var(--r-lg); padding: 48px 20px; text-align: center; color: var(--text-2); }
.empty b { display: block; color: var(--text); font-size: 1.05rem; margin-bottom: 6px; }

/* вид «списком» */
.pgrid--list { grid-template-columns: 1fr; }
.pgrid--list .card { flex-direction: row; align-items: stretch; }
.pgrid--list .card__ph { width: 150px; flex: none; aspect-ratio: 1; align-self: flex-start; }
.pgrid--list .card__b { padding: 14px 56px 14px 16px; }   /* место под сердечко справа */
.pgrid--list .card__name { font-size: 1rem; }
.pgrid--list .card__foot { justify-content: flex-start; gap: 20px; }
@media (max-width: 520px) { .pgrid--list .card__ph { width: 104px; } }
.perpage button svg { display: block; }

/* ---------- 15. Карточка товара (страница) ------------------- */
.pdp { display: grid; gap: clamp(20px, 3vw, 44px); align-items: start; }
@media (min-width: 900px) { .pdp { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); } }
.pdp__main { aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--r-lg); }
/* галерея миниатюр не используется: у каждого товара один кадр */

.buybox { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 18px; display: grid; gap: 14px; margin: 18px 0; }
.buybox__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.buybox__price .price { font-size: 2rem; }
.buybox__row { display: flex; gap: 10px; flex-wrap: wrap; }
.buybox__row .btn { flex: 1 1 160px; }
.perkg { color: var(--text-3); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; flex: none; }
.qty button { width: 40px; height: 44px; color: var(--text-2); font-size: 1.1rem; transition: background .16s, color .16s; }
.qty button:hover { background: var(--surface-2); color: var(--accent); }
.qty output { min-width: 42px; text-align: center; font-family: var(--f-label); font-size: .9rem; }

.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tabs button { padding: 12px 0; color: var(--text-2); font-size: .95rem; position: relative; }
.tabs button[aria-selected="true"] { color: var(--text); }
.tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.spec { display: grid; gap: 0; }
.spec div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.spec dt { color: var(--text-2); }
.spec dd { font-weight: 500; text-align: right; }

/* ---------- 16. Корзина -------------------------------------- */
.cart { display: grid; gap: clamp(18px, 2.6vw, 36px); align-items: start; }
@media (min-width: 900px) { .cart { grid-template-columns: 1fr 330px; } }
.cline { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start; }
.cline .ph { aspect-ratio: 1; border-radius: var(--r); }
.cline__b { display: grid; gap: 8px; }
.cline__top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.cline__top .mono { white-space: nowrap; }
.cline__name { font-size: .95rem; font-weight: 500; }
.cline__ctl { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cline__del { color: var(--text-3); font-size: .78rem; transition: color .18s; }
.cline__del:hover { color: var(--accent); }
.summary { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 20px; display: grid; gap: 14px; }
@media (min-width: 900px) { .summary { position: sticky; top: calc(var(--hdr) + 12px); } }
.summary__row { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; }
.summary__row--total { padding-top: 12px; border-top: 1px solid var(--line); font-size: 1.05rem; font-weight: 600; }
.summary__row--total b { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: -.04em; }

/* подсказка в корзине: до минимального заказа / до бесплатной доставки */
.cart-hint { text-transform: none; letter-spacing: 0; font-size: .8rem; line-height: 1.45; padding: 10px 12px; border-radius: var(--r); }
.cart-hint[data-kind="warn"] { background: rgba(212,56,45,.14); color: var(--danger); }
.cart-hint[data-kind="info"] { background: var(--accent-soft); color: var(--accent); }
.cart-hint[data-kind="ok"]   { background: rgba(63,169,106,.12); color: var(--ok); }
.summary .field { display: grid; gap: 6px; }
.summary .field input, .summary .field select {
  min-height: 42px; padding: 0 12px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r); color: var(--text); width: 100%;
}
.summary .field input:focus, .summary .field select:focus { outline: none; border-color: var(--accent); }
.summary .field label { color: var(--text-2); }
.field__err { color: var(--danger); font-size: .76rem; }
.err { border-color: var(--danger) !important; }
.form__ok { border: 1px solid var(--ok); background: rgba(63,169,106,.12); color: var(--text); padding: 12px 14px; border-radius: var(--r); font-size: .9rem; }
.buybox__price s { font-size: .95rem; }
.tabs button[role=tab] { cursor: pointer; }

/* ---------- 17. Футер ---------------------------------------- */
.footer { background: var(--surface); border-top: 1px solid var(--line); padding-block: clamp(32px, 4vw, 54px) 22px; color: var(--text-2); margin-top: clamp(32px, 4vw, 60px); }
.footer a:hover { color: var(--accent); }
.footer__grid { display: grid; gap: 28px; }
@media (min-width: 560px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.footer h3 { color: var(--text); margin-bottom: 13px; font-size: .92rem; }
.footer ul { display: grid; gap: 9px; font-size: .9rem; }
.footer__soc { display: flex; gap: 10px; margin-top: 14px; }
.footer__soc a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); }
.footer__soc a:hover { border-color: var(--accent); }
.footer__soc svg { width: 16px; height: 16px; }

/* ---------- 18. Уведомление ---------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 100;
  transform: translate(-50%, 20px); opacity: 0; visibility: hidden;
  background: var(--accent-btn); color: #fff; padding: 12px 20px; border-radius: var(--r);
  font-size: .88rem; box-shadow: var(--shadow);
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}
.toast[data-on="true"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (max-width: 760px) { .toast { bottom: 74px; } }

/* ---------- 19. Утилиты -------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 110; background: var(--accent-btn); color: #fff; padding: 10px 16px; border-radius: var(--r); transition: top .2s; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
.noscroll { overflow: hidden; }


/* ---------- 20. Появление блоков при скролле ------------------
   Класс навешивает app.js через IntersectionObserver. При
   prefers-reduced-motion всё показывается сразу, без сдвига. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* подсветка первого экрана под товаром */
.hero__img { filter: drop-shadow(0 24px 40px rgba(0,0,0,.45)); }
.hero__slide--split .hero__inner { position: relative; }
.hero__slide--split .hero__inner::after {
  content: ''; position: absolute; right: 6%; top: 50%; width: min(42%, 420px); aspect-ratio: 1;
  transform: translateY(-50%); z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, var(--warm), transparent 68%);
}

/* шапка получает тень, когда страница прокручена */
.header { transition: box-shadow .24s var(--ease), background .24s var(--ease); }
.header.is-stuck { box-shadow: 0 10px 30px rgba(0,0,0,.34); }
:root[data-theme="light"] .header.is-stuck { box-shadow: 0 10px 26px rgba(12,40,70,.10); }


/* ---------- 21. Движение ------------------------------------
   Правило одно: анимация объясняет, что произошло, и не задерживает.
   Двигаем только transform и opacity. Всё гасится при
   prefers-reduced-motion — блок в конце файла.
   ------------------------------------------------------------- */

/* Появление карточек в сетке. Узлы заменяются через innerHTML, поэтому
   не transition, а animation: она отыгрывает сама при вставке.
   Ступень 22мс и потолок в 8 шагов — чтобы фильтрация не превращалась
   в ожидание. */
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } }

.pgrid > .card, .rail > .card { animation: riseIn .26s var(--ease) backwards; }
.pgrid > .card:nth-child(2),  .rail > .card:nth-child(2)  { animation-delay: .022s; }
.pgrid > .card:nth-child(3),  .rail > .card:nth-child(3)  { animation-delay: .044s; }
.pgrid > .card:nth-child(4),  .rail > .card:nth-child(4)  { animation-delay: .066s; }
.pgrid > .card:nth-child(5),  .rail > .card:nth-child(5)  { animation-delay: .088s; }
.pgrid > .card:nth-child(6),  .rail > .card:nth-child(6)  { animation-delay: .11s; }
.pgrid > .card:nth-child(7)  { animation-delay: .132s; }
.pgrid > .card:nth-child(n+8) { animation-delay: .154s; }

/* Раскрытие вопроса. Закрытый <details> не рендерит содержимое, поэтому
   transition не с чего начинать — работает только animation при появлении. */
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }
.faq details[open] .faq__a { animation: faqIn .24s var(--ease); }

/* Переключение вкладок на карточке товара */
[data-panel]:not([hidden]) { animation: faqIn .22s var(--ease); }

/* Счётчики в шапке: цифра меняется беззвучно, и заметить это трудно */
@keyframes badgePop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
.hact__n.is-bump { animation: badgePop .32s var(--ease); }

/* Сердечко в карточке: отклик на нажатие */
@keyframes favPop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.card__fav.is-bump svg { animation: favPop .3s var(--ease); }

/* Нажатие любой кнопки — короткий отклик */
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.qty button:active { transform: scale(.9); }

/* Иконки в шапке слегка подрастают под курсором */
@media (hover: hover) and (pointer: fine) {
  .hact svg { transition: transform .2s var(--ease); }
  .hact:hover svg { transform: translateY(-2px); }
  .shead__all { transition: color .2s var(--ease), transform .2s var(--ease); }
  .shead__all:hover { transform: translateX(3px); }
}

/* Поле поиска подсвечивается мягко, а не скачком */
.search input { transition: border-color .2s var(--ease), background .2s var(--ease); }

/* Смена темы: поверхности переходят вместе с фоном, иначе часть
   элементов перекрашивается мгновенно, а часть плавно */
.header, .footer, .phead, .summary, .buybox, .card__ph, .cat, .fbox__sum,
.search input, .ctool select, .field input, .field select, .field textarea {
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

/* Строка корзины исчезает не мгновенно */
@keyframes lineOut { to { opacity: 0; transform: translateX(-14px); } }
.cline.is-leaving { animation: lineOut .22s var(--ease) forwards; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .pgrid > .card, .rail > .card, .faq details[open] .faq__a,
  [data-panel]:not([hidden]), .hact__n.is-bump, .card__fav.is-bump svg,
  .cline.is-leaving { animation: none !important; }
  .btn:active:not(:disabled), .qty button:active { transform: none; }
}


/* ---------- 22. Границы элементов управления ------------------
   var(--line) задумана для разделителей и на контролах даёт 1.25:1
   при норме 3:1 — поле не отличалось от подложки. */
.search input,
.fbox__sum,
.frange input,
.ctool select,
.field input, .field select, .field textarea,
.summary .field input, .summary .field select,
.qty {
  border-color: var(--line-strong);
}


/* ---------- 23. Мелкие доработки ------------------------------ */
/* «Скидка» в сводке была цветом плашки — 3.65 на поверхности */
.summary__row [data-save] { color: var(--sale-text); }

/* степпер: минус на единице выключен, удаление — только «Удалить» */
.qty button:disabled { opacity: .35; cursor: not-allowed; }
.qty button:disabled:hover { background: none; color: var(--text-2); }

/* активная подборка видна и снимается */
.chip-filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 12px; border-radius: 999px; margin-left: 12px;
  background: var(--accent-soft); color: var(--accent);
  font-size: .8rem; font-weight: 600;
}
.chip-filter button {
  width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%; color: inherit; font-size: 1.05rem; line-height: 1;
}
.chip-filter button:hover { background: rgba(0,0,0,.2); }

/* страница «товар не найден» */
.notfound { text-align: center; padding: clamp(48px, 9vw, 110px) 20px; }
.notfound b { display: block; font-family: var(--f-display); font-size: clamp(1.4rem,3vw,2rem); margin-bottom: 12px; }
.notfound p { color: var(--text-2); max-width: 46ch; margin: 0 auto 24px; }


/* ---------- 24. Выбор города ---------------------------------- */
/* Магазин возит по нескольким городам, и от города зависят сроки и
   стоимость. Поэтому город — не украшение в шапке, а первое, что
   человек должен увидеть и при желании поменять. */
.citypick { position: relative; }
.citybtn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 10px; border-radius: 9px;
  color: var(--text-2); font-size: .88rem; white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.citybtn svg { width: 15px; height: 15px; flex: none; }
.citybtn__c { width: 9px; height: 6px; opacity: .7; }
.citybtn__n { font-weight: 600; color: var(--text); }
.citybtn[aria-expanded="true"],
.citybtn:hover { color: var(--text); background: var(--surface-2); }

.citymenu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 70;
  min-width: 210px; padding: 6px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid; gap: 2px;
  animation: cityIn .16s var(--ease) both;
}
.citymenu[hidden] { display: none; }
@keyframes cityIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.citymenu button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 11px; border-radius: 8px;
  font-size: .92rem; text-align: left; color: var(--text-2);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.citymenu button svg { width: 15px; height: 15px; opacity: 0; flex: none; }
.citymenu button:hover { background: var(--surface-2); color: var(--text); }
.citymenu button[aria-checked="true"] { color: var(--accent); font-weight: 600; }
.citymenu button[aria-checked="true"] svg { opacity: 1; }


/* На узких экранах в шапке остаётся только булавка с названием */
@media (max-width: 900px) {
  .citybtn__c { display: none; }
}
@media (max-width: 560px) {
  .citybtn { padding: 0 6px; }
  .citybtn__n { display: none; }
}

/* ---------- 25. Обещание доставки под баннером ---------------- */
/* Три факта, которые покупатель ищет первым делом. Раньше они лежали
   на отдельной странице, и до них никто не доходил. */
.promise {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.promise > div { padding: clamp(18px, 2.4vw, 26px) 0; }
.promise > div + div { border-left: 1px solid var(--line); padding-left: clamp(18px, 2.6vw, 34px); }
.promise dt {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); letter-spacing: -.025em;
  margin-bottom: 5px;
}
.promise dd { color: var(--text-2); font-size: .88rem; line-height: 1.5; max-width: 30ch; }
@media (max-width: 720px) {
  .promise { grid-template-columns: 1fr; }
  .promise > div + div { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
}


/* ---------- 26. Таблица условий по городам -------------------- */
/* Четыре города с разными сроками и суммами — это именно таблица,
   а не список пар: их сравнивают по столбцам. */
.tablewrap { overflow-x: auto; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
.ctable { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .92rem; }
.ctable th, .ctable td { text-align: left; vertical-align: top; padding: 15px 18px 15px 0; }
.ctable thead th {
  font-family: var(--f-label); font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-3);
  padding-bottom: 11px; border-bottom: 1px solid var(--line);
}
.ctable tbody th {
  font-family: var(--f-display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -.02em; white-space: nowrap;
}
.ctable tbody tr + tr th, .ctable tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.ctable td { color: var(--text-2); line-height: 1.5; }
.ctable .muted { font-size: .84rem; color: var(--text-3); }


/* ---------- 27. Шапка поверх баннера -------------------------- */
/* На главной шапка лежит на баннере, а не отделена от него полосой.
   Пока страница не прокручена — фон прозрачный и текст белый; после
   прокрутки возвращается обычная шапка. Класс --over ставится только
   на страницах с героем. */
@media (min-width: 901px) {
  .header--over:not(.is-solid) {
    background: transparent;
    border-bottom-color: transparent;
    color: #fff;
  }
  .header--over:not(.is-solid) .nav a,
  .header--over:not(.is-solid) .hact,
  .header--over:not(.is-solid) .citybtn,
  .header--over:not(.is-solid) .citybtn__n,
  .header--over:not(.is-solid) .theme { color: #fff; }
  .header--over:not(.is-solid) .hact span { color: rgba(255,255,255,.82); }
  .header--over:not(.is-solid) .nav a:hover,
  .header--over:not(.is-solid) .hact:hover { color: var(--accent); background: rgba(255,255,255,.14); }

  /* Поле поиска и переключатели на фотографии: полупрозрачное стекло,
     а не белая плашка — иначе шапка снова превращается в полосу. */
  .header--over:not(.is-solid) .search input {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.30);
    color: #fff;
  }
  .header--over:not(.is-solid) .search input::placeholder { color: rgba(255,255,255,.66); }
  .header--over:not(.is-solid) .search svg { color: rgba(255,255,255,.72); }
  .header--over:not(.is-solid) .citybtn:hover,
  .header--over:not(.is-solid) .citybtn[aria-expanded="true"] { background: rgba(255,255,255,.14); }
  .header--over:not(.is-solid) .theme { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
  .header--over:not(.is-solid) .burger span,
  .header--over:not(.is-solid) .burger span::before,
  .header--over:not(.is-solid) .burger span::after { background: #fff; }
  .header--over:not(.is-solid) .logo__img { filter: brightness(0) invert(1); }

  /* Прокрутили — шапка обычная. Переход мягкий, иначе она моргает. */
  .header--over { transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
}