/* ============================================================
   LA PASTA — оформление.

   Идея: магазин не «кремовый сайт с фотками», а зелёная лавка.
   Тёмно-зелёное стекло из логотипа — это полотно (шапка, первый
   экран, подвал), кремовый — бумага, на которой лежит товар,
   янтарный — единственный тёплый акцент, он взят с их же банок
   масла клярованого.

   Всё, что задаёт систему, лежит в :root. Ничего «на глаз».
   ============================================================ */

/* ---------- 1. Токены ---------- */
:root {
  /* Цвета: пять штук, все с логотипа или с товара */
  --tem:        #14301F;   /* бутылочное стекло */
  --tem-2:      #1C3E28;   /* на полтона светлее, для карточек на тёмном */
  --tem-3:      #295138;   /* обводки на тёмном */
  --zel:        #538256;   /* зелёный ровно с логотипа */
  --zel-dia:    #2E5639;   /* рабочий зелёный для кнопок: контраст с кремом */
  --krem:       #F7EFE2;   /* кремовый ровно с логотипа */
  --papir:      #FBF6EC;   /* фон страницы */
  --bilyi:      #FFFDF8;   /* карточки */
  --zel-svit:   #7FA882;   /* тот же зелёный, осветлён для текста на тёмном */
  --burshtyn:   #C07A22;   /* янтарь — акцент */
  --burshtyn-t: #8F5512;   /* тот же янтарь, но затемнён до контраста AA */
  /* Осветлённый янтарь для мелкого текста на тёмном. Был #CE8A32 —
     на самом тёмном фоне он проходил (4.96), а на карточке карусели,
     которая на полтона светлее, давал 4.13 при норме 4.5. Замер по
     пикселям это поймал, прикидка по CSS — нет. Теперь одно значение
     проходит на обоих: 5.95 на #14301F и 4.95 на #1C3E28. */
  --burshtyn-s: #DA9B46;
  --chornylo:   #16211A;   /* текст */
  --siryi:      #5C6B5F;   /* вторичный текст, проверен на AA по фону */

  --linia:      rgba(22, 33, 26, .12);
  --linia-tem:  rgba(247, 239, 226, .16);

  /* Шрифты.

     Заголовки — Literata. Прежняя Alegreya была тёплой и книжной, но
     заказчица попросила «лаконічніше і класичніше», и она права:
     у Alegreya каллиграфические росчерки и заметный наклон в характере.
     Literata нарисована под экран, серифы прямые, ритм спокойный —
     та же «классическая» подача, но без украшательства.

     Текст и интерфейс — Commissioner, остаётся как был.

     Третья роль — ЧИСЛА. Это отдельное требование заказчицы, и за ним
     стоит настоящая поломка: у книжных антикв цифры «старого стиля» —
     ноль ростом со строчную букву, семёрка свисает под строку. Замер
     Alegreya при кегле 100: высота «H» 64,9, высота «0» — 51,0, то есть
     как у «x». Цена «100 ₴» читалась как «ıoo ₴». Поэтому все числа на
     сайте набираются гротеском и с явным указанием lining-nums. */
  --shrift-z: 'Literata', Georgia, 'Times New Roman', serif;
  --shrift-t: 'Commissioner', system-ui, sans-serif;
  --shrift-c: 'Commissioner', system-ui, sans-serif;

  /* Размеры: считаются от ширины экрана, отдельной мобильной вёрстки
     для типографики не нужно */
  --h1: clamp(2.05rem, 1.15rem + 3.9vw, 4.1rem);
  --h2: clamp(1.6rem,  1.24rem + 1.6vw, 2.5rem);
  --h3: clamp(1.12rem, 1.04rem + .38vw, 1.35rem);
  /* Подняты 21.09.2026. Было 14 и 12,5 px — замер показал, что почти
     половина всех надписей на сайте оказалась мельче 13 px, а этим
     размером набрано как раз то, что читают дольше всего: описание под
     названием товара, состав, условия доставки. Покупатели магазина —
     не только двадцатилетние, и 12,5 px на телефоне для них мелко.
     Стало 15 и 13,5 px. */
  --mal: .9375rem;
  --drib: .845rem;

  /* Отступы: шкала 4/8, ничего между */
  --p1: 4px;  --p2: 8px;  --p3: 12px; --p4: 16px;
  --p5: 24px; --p6: 32px; --p7: 48px; --p8: 64px; --p9: 96px;

  /* Скругления. Были 6/14/22 и таблетка на кнопках — мягко и «уютно».
     Просьба была про лаконичность, а лаконичность тут — это более
     прямой угол: 4/10/16. Таблетка осталась ровно там, где предмет
     действительно круглый: счётчик корзины и кнопка «+». */
  --r-s: 4px; --r-m: 10px; --r-l: 16px; --r-k: 999px;

  --tin-1: 0 1px 2px rgba(20, 48, 31, .05), 0 8px 24px rgba(20, 48, 31, .06);
  --tin-2: 0 2px 6px rgba(20, 48, 31, .08), 0 18px 44px rgba(20, 48, 31, .10);

  --obhvat: 1180px;
  --shvydko: .18s cubic-bezier(.2, .7, .3, 1);
  --plavno: .45s cubic-bezier(.2, .7, .3, 1);
  /* Выезжающая снизу панель. Кривая другая нарочно: у неё резкий
     старт и долгое торможение — так панель выглядит подхваченной
     пальцем, а не подъехавшей по рельсам. Та же, что в айфоне. */
  --vysuv: .34s cubic-bezier(.32, .72, 0, 1);
}

/* ---------- 2. Основа ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papir);
  color: var(--chornylo);
  font-family: var(--shrift-t);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* Каждое место под фото — это клетка с центрированной надписью «Фото буде».
   Когда фото появляется, оно приходит завёрнутым в <picture>, а <picture> —
   такой же элемент, как span: без этих трёх строк он встанет по центру
   клетки в свой натуральный размер, вместо того чтобы её заполнить. */
.tovar__foto picture, .rozdil__foto picture,
.karusel__foto picture, .karta__foto picture {
  display: block; width: 100%; height: 100%;
}
.tovar__foto img, .rozdil__foto img,
.karusel__foto img, .karta__foto img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Атрибут hidden должен побеждать любой display из наших классов:
   счётчик корзины — это grid, и без этой строки он показывал «0». */
[hidden] { display: none !important; }

/* overflow-wrap — не украшение, а страховка от брака вёрстки.
   Заголовки у нас крупные, а украинские слова длинные: «конфіденційності»
   на экране 320 px при --h1 = 32.8 px занимает 323 px там, где места 288,
   и раздвигает документ до 339 px — страница едет вбок целиком. Замер
   поймал это на konfidentsiynist.html, но ловушка общая: любое будущее
   длинное слово в любом заголовке сделает то же самое. Поэтому разрешаем
   переносить слово с разрывом — некрасиво, но лучше, чем уехавшая вбок
   страница. Ниже, у .stattya h1, размер заодно уменьшен, чтобы до самого
   разрыва дело не доходило. */
h1, h2, h3, h4 {
  font-family: var(--shrift-z);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--h1); font-weight: 800; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p  { margin: 0; text-wrap: pretty; }

/* Все числа на сайте: цена, сумма, счётчик, номера шагов.
   font-variant-numeric пишем явно, а не надеемся на шрифт по умолчанию:
   именно на этом сгорела прежняя вёрстка. lining — цифры полной высоты,
   tabular — одинаковой ширины, чтобы колонка цен не плясала. */
.chyslo,
.tovar__cina, .kupivlya__cina, .ryadok__suma, .pidsumok__suma,
.karusel__cina, .znaydeno, .lichylnyk, .panel__lichylnyk, .kilkist__chyslo {
  font-family: var(--shrift-c);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  letter-spacing: -.01em;
}

a { color: inherit; }

button { font: inherit; color: inherit; }

/* Фокус виден всегда и одинаково: по сайту можно ходить с клавиатуры */
:focus-visible {
  outline: 3px solid var(--burshtyn);
  outline-offset: 3px;
  border-radius: var(--r-s);
}

.obhvat {
  width: 100%;
  max-width: var(--obhvat);
  margin-inline: auto;
  padding-inline: var(--p4);
}
@media (min-width: 640px) { .obhvat { padding-inline: var(--p5); } }

.tilky-dlya-chytacha {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* «Перейти до змісту» — лежит выше экрана и съезжает вниз, когда на неё
   попадает фокус. Прятать её через display:none нельзя: спрятанное так
   не получает фокус вообще, и ссылка стала бы мёртвой. */
.propustyty {
  position: absolute; left: var(--p4); top: 0;
  transform: translateY(-120%);
  z-index: 60;
  padding: var(--p3) var(--p4);
  background: var(--krem); color: var(--chornylo);
  border-radius: 0 0 var(--r-s) var(--r-s);
  font-size: var(--mal); font-weight: 600; text-decoration: none;
  transition: transform var(--shvydko);
}
.propustyty:focus { transform: translateY(0); }
/* Сам <main> в цель фокуса берём программно (tabindex="-1"), поэтому
   собственную обводку у него гасим: рамка вокруг всей страницы пугает. */
main:focus { outline: none; }

/* ---------- 3. Появление при прокрутке ----------
   Не «AOS fade-up на всём подряд»: сдвиг маленький, задержка идёт
   по порядку внутри одного блока, поэтому это читается как один
   спокойный жест, а не как прыгающая страница. */
[data-z] { opacity: 0; transform: translateY(14px); }
[data-z].vydno {
  opacity: 1; transform: none;
  transition: opacity var(--plavno), transform var(--plavno);
  transition-delay: var(--zatrymka, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-z] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- 4. Кнопки ---------- */
.knopka {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--p2);
  min-height: 48px;                    /* палец, а не курсор */
  padding: var(--p3) var(--p5);
  border: 1px solid transparent;
  border-radius: var(--r-m);
  font-family: var(--shrift-t);
  font-size: var(--mal);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--shvydko), background var(--shvydko),
              border-color var(--shvydko), box-shadow var(--shvydko);
}
.knopka:active { transform: translateY(1px); }

.knopka--holovna {
  background: var(--zel-dia); color: var(--krem);
  box-shadow: 0 6px 18px rgba(46, 86, 57, .25);
}
.knopka--holovna:hover { background: #234630; box-shadow: 0 10px 26px rgba(46, 86, 57, .32); }

.knopka--obvid {
  background: transparent; color: var(--chornylo);
  border-color: rgba(22, 33, 26, .22);
}
.knopka--obvid:hover { border-color: var(--zel-dia); background: rgba(83, 130, 86, .07); }

/* Версия для тёмного зелёного фона */
.knopka--svitla { background: var(--krem); color: var(--tem); }
.knopka--svitla:hover { background: #fff; }

.knopka--prozora {
  background: transparent; color: var(--krem);
  border-color: rgba(247, 239, 226, .35);
}
.knopka--prozora:hover { border-color: var(--krem); background: rgba(247, 239, 226, .1); }

.knopka--shyroka { width: 100%; }

/* ---------- 5. Шапка ---------- */
.shapka {
  position: sticky; top: 0; z-index: 60;
  background: var(--tem);
  color: var(--krem);
  border-bottom: 1px solid var(--linia-tem);
}
.shapka__ryad {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--p3);
  min-height: 66px;
}
.shapka__znak {
  display: flex; align-items: center; gap: var(--p3);
  text-decoration: none; color: inherit;
}
.shapka__logo { width: 44px; height: 44px; flex: none; }
.shapka__slova { display: flex; flex-direction: column; line-height: 1.05; }
.shapka__nazva {
  font-family: var(--shrift-z); font-size: 1.32rem; font-weight: 700;
  letter-spacing: -.01em;
}
.shapka__misto {
  font-size: var(--drib); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(247, 239, 226, .62);
}
.shapka__pravoruch { display: flex; align-items: center; gap: var(--p2); }

.shapka__knopka {
  display: inline-flex; align-items: center; gap: var(--p2);
  position: relative;
  min-height: 44px; min-width: 44px;
  padding: 0 var(--p3);
  background: transparent; color: inherit;
  border: 1px solid var(--linia-tem); border-radius: var(--r-m);
  text-decoration: none; cursor: pointer;
  font-size: var(--mal); font-weight: 500;
  transition: background var(--shvydko), border-color var(--shvydko);
}
.shapka__knopka:hover { background: rgba(247, 239, 226, .1); border-color: rgba(247, 239, 226, .4); }
.shapka__ikonka { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.shapka__slovo { display: none; }
@media (min-width: 560px) { .shapka__slovo { display: inline; } }

/* Шапка на узком экране. Замер: на 320 px ей нужно было 334 px при
   доступных 288 — вылезала вбок вся страница. Лечим не сжатием кнопок
   (44 px трогать нельзя), а тем, что убираем лишнее.

   Лишнее тут — корзина. До 900 px внизу висит панель, где корзина уже
   есть, со счётчиком и на виду. Вторая такая же кнопка в шапке ничего
   не добавляет, зато занимает 52 px вместе с зазором. */
.shapka__koshyk { display: none; }
@media (min-width: 900px) { .shapka__koshyk { display: inline-flex; } }

/* Ниже 360 px не помещается и подпись рядом с логотипом. Убирать её
   не жалко: название «La Pasta» крупно написано в самом кружке, и текст
   рядом его просто повторяет. */
.shapka__slova { display: none; }
@media (min-width: 360px) { .shapka__slova { display: flex; } }

.shapka__koshyk[aria-current="page"] { background: rgba(247, 239, 226, .14); }

.lichylnyk {
  position: absolute; top: -5px; right: -5px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--burshtyn); color: #20160A;
  border-radius: var(--r-k);
  font-size: .68rem; font-weight: 700; line-height: 1;
}

/* Меню в шапке. На телефоне логотип, город, четыре пункта и корзина в
   одну строку не влезают физически — там вместо ряда кнопка, которая
   открывает боковую штору. Ряд включается только с 900 px. */
.menyu { display: none; }
.menyu a {
  display: block; padding: var(--p2) var(--p4);
  border-radius: var(--r-s);
  text-decoration: none; font-size: var(--mal); font-weight: 500;
}
.menyu a:hover { background: rgba(247, 239, 226, .1); }
/* Текущий раздел — осветлённым янтарём, не обычным. Меню лежит на
   тёмно-зелёном, и обычный янтарь давал на нём 4.11 при норме 4.5.
   Это ловилось только пиксельным замером: страница-то открыта, и
   подсвечен всегда ровно один пункт — глазом мимо проходишь. */
.menyu a[aria-current="page"] { color: var(--burshtyn-s); font-weight: 600; }

@media (min-width: 900px) {
  .shapka__knopka--menyu { display: none; }
  .menyu { display: flex; gap: var(--p1); }
}

/* ---------- 5б. Боковая штора ----------
   Выезжает справа во всю высоту. Прячется через visibility, а не
   display: none — от display анимация не работает вообще (браузеру
   нечего анимировать, элемента нет). visibility переключается мгновенно,
   но её переключение ОТЛОЖЕНО на длительность выезда, чтобы панель
   успела уехать за край, прежде чем исчезнуть. */
.shtora {
  position: fixed; inset: 0; z-index: 90;
  visibility: hidden;
  transition: visibility 0s linear .32s;
}
.shtora[data-vidkryta='tak'] { visibility: visible; transition: visibility 0s; }

.shtora__tin {
  position: absolute; inset: 0;
  background: rgba(10, 20, 14, .55);
  opacity: 0;
  transition: opacity .24s cubic-bezier(.23, 1, .32, 1);
}
.shtora[data-vidkryta='tak'] .shtora__tin { opacity: 1; }

.shtora__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(88vw, 360px);
  display: flex; flex-direction: column;
  background: var(--tem);
  color: var(--krem);
  border-left: 1px solid var(--linia-tem);
  box-shadow: -18px 0 46px rgba(0, 0, 0, .5);
  transform: translateX(100%);
  /* кривая «как ящик в айфоне»: резво стартует, мягко тормозит */
  transition: transform .32s cubic-bezier(.32, .72, 0, 1);
}
.shtora[data-vidkryta='tak'] .shtora__panel { transform: translateX(0); }

/* Пока штора открыта, страница под ней не должна прокручиваться:
   иначе палец листает каталог вместо меню. */
.telo--zamknene { overflow: hidden; }

.shtora__verh {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--p3);
  padding: var(--p3) var(--p3) var(--p3) var(--p4);
  border-bottom: 1px solid var(--linia-tem);
}
/* Ссылка на главную в шапке шторы. min-height, а не просто flex:
   высоту ей задавал значок 40×40, и на 4 px до нормы не хватало.
   Четыре пикселя не видно, но это единственная ссылка в панели,
   которая была меньше пальца. */
.shtora__znak {
  display: flex; align-items: center; gap: var(--p3);
  min-height: 44px;
  text-decoration: none; color: inherit;
}
.shtora__znak img { width: 40px; height: 40px; flex: none; }
.shtora__znak > span { display: flex; flex-direction: column; line-height: 1.05; }
.shtora__nazva { font-family: var(--shrift-z); font-size: 1.2rem; font-weight: 700; }
.shtora__misto {
  font-size: var(--drib); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(247, 239, 226, .62);
}
.shtora__hrest {
  flex: none; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: none; color: inherit; cursor: pointer;
  border: 1px solid var(--linia-tem); border-radius: var(--r-m);
  transition: background var(--shvydko), border-color var(--shvydko);
}
.shtora__hrest svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
}
.shtora__hrest:hover { background: rgba(247, 239, 226, .1); border-color: rgba(247, 239, 226, .4); }

/* Прокручивается только середина: шапка панели с крестиком остаётся на
   месте, иначе на восемнадцати разделах кнопка «закрыть» уезжает вверх
   и её приходится искать обратной прокруткой. */
.shtora__telo {
  flex: 1 1 auto; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--p4) var(--p4) var(--p7);
}

.shtora__navi { display: flex; flex-direction: column; }
.shtora__navi a {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--p3);
  min-height: 52px; padding: var(--p2) var(--p3);
  border-radius: var(--r-m);
  text-decoration: none;
  font-family: var(--shrift-z); font-size: 1.12rem; font-weight: 600;
}
.shtora__navi a:hover { background: rgba(247, 239, 226, .08); }
.shtora__navi a[aria-current="page"] { color: var(--burshtyn-s); }
/* Стрелка справа в каждом пункте меню. Прозрачность была .4 — на
   бутылочном фоне это контраст 3.26 при норме 4.5, то есть бледная
   палочка, которую на телефоне под солнцем просто не видно. Считал
   и руками, и замером: сходится до сотых, так что это настоящий брак,
   а не промах проверки.
   .58 даёт 5.2 — читается, но всё ещё заметно тише названия раздела
   (у него полный кремовый, контраст около 12). Стрелка обязана быть
   видной, а не громкой: она подсказывает «нажми», а не зовёт. */
.shtora__strilka {
  color: rgba(247, 239, 226, .58);
  transition: transform var(--shvydko);
}
.shtora__navi a:hover .shtora__strilka { transform: translateX(3px); }

.shtora__grupa { margin-top: var(--p6); }
.shtora__pidzag {
  margin: 0 0 var(--p3);
  font-size: var(--drib); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(247, 239, 226, .55);
}

/* Разделы — в два столбца: восемнадцать штук в один ряд дают ленту
   длиной в полтора экрана, и до связи внизу никто не долистывает. */
.shtora__rozdily {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--p2);
}
/* 44 px и здесь: строчка текста высотой 18 px, а нажимают её пальцем
   на ходу. Восемнадцать разделов по 44 px в два столбца — это девять
   рядов, ровно один экран телефона, и это нормально. */
.shtora__rozdily a {
  display: flex; align-items: center;
  min-height: 44px; padding: var(--p1) var(--p2);
  border-radius: var(--r-s);
  text-decoration: none; font-size: var(--mal); line-height: 1.25;
  color: rgba(247, 239, 226, .88);
}
.shtora__rozdily a:hover { background: rgba(247, 239, 226, .08); color: var(--krem); }

.shtora__spysok { list-style: none; margin: 0; padding: 0; }
.shtora__spysok a {
  display: flex; align-items: center;
  min-height: 44px; padding: var(--p1) var(--p2);
  border-radius: var(--r-s);
  text-decoration: none; font-size: var(--mal);
  color: rgba(247, 239, 226, .88);
}
.shtora__spysok a:hover { background: rgba(247, 239, 226, .08); color: var(--krem); }

.shtora__dokumenty {
  list-style: none; margin: var(--p6) 0 0; padding: var(--p4) 0 0;
  border-top: 1px solid var(--linia-tem);
}
.shtora__dokumenty a {
  display: flex; align-items: center;
  min-height: 44px;
  text-decoration: none; font-size: var(--drib);
  /* .62 от кремового на тёмно-зелёном даёт 4.63 — мелкому тексту нужно
     от 4.5. Ниже опускать нельзя, даже если «это же просто сноска». */
  color: rgba(247, 239, 226, .62);
}
.shtora__dokumenty a:hover { color: var(--krem); text-decoration: underline; }

/* Счётчик корзины внутри строки меню: тут он не значок поверх иконки,
   а просто число рядом со словом, поэтому без absolute. */
.lichylnyk--ryad {
  position: static; margin-left: var(--p2);
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  .shtora, .shtora__tin, .shtora__panel, .shtora__strilka { transition: none; }
}

/* ---------- 6. Первый экран ---------- */
.geroy {
  position: relative;
  background: var(--tem);
  color: var(--krem);
  padding-top: var(--p8);
  overflow: hidden;
}
/* Мягкое свечение за текстом — чтобы тёмное поле не читалось как плоская
   заливка. Никакого рисунка, только свет. */
.geroy::before {
  content: ''; position: absolute; inset: -30% -10% auto -10%; height: 90%;
  background: radial-gradient(60% 70% at 30% 40%, rgba(83, 130, 86, .38), transparent 70%);
  pointer-events: none;
}
.geroy__vmist { position: relative; max-width: 760px; }

.nadpys {
  display: inline-flex; align-items: center; gap: var(--p2);
  font-size: var(--drib); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  /* Кремовый, а не янтарный — и это не только про цифры.

     Под надписью лежит мягкое свечение (.geroy::before), оно поднимает
     светлоту фона вдвое: 0.024 у чистого стекла против 0.051 со светом.
     Ни один янтарь, который ещё читается как янтарь, на таком фоне 4.5
     не даёт — только уже почти жёлтый #E0A450, а это другой цвет.

     Выбор между «погасить свечение» и «сменить цвет надписи» решён в
     пользу второго: свечение держит весь первый экран, а строчка
     «Хмельницький · відправка по Україні» — служебная подпись, ей
     акцентный цвет и не нужен. Заказчица просила лаконичнее — кремовая
     подпись с кремовой чёрточкой как раз тише янтарной. Янтарь остаётся
     там, где он работает: цены, стрелки, фильтры. Стало 9.1. */
  color: rgba(247, 239, 226, .82);
}
.nadpys::before {
  content: ''; width: 26px; height: 1px; background: currentColor;
}

/* Главная фраза. Слова заказчицы: «La Pasta — смаки з усього світу».
   Название набрано тем же кеглем, но обычным начертанием и чуть тише
   по цвету: ударение падает на обещание, а не на вывеску — вывеска
   и так стоит в шапке строкой выше. */
.geroy h1 { margin-top: var(--p4); letter-spacing: -.025em; }
.geroy__marka {
  font-weight: 500;
  color: rgba(247, 239, 226, .72);
}

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

   Заливка осталась кремовой, и это посчитано, а не на глаз: янтарь с
   тёмным текстом даёт контраст 4.11 при норме 4.5, кремовая — 12.5.
   Поэтому фирменный янтарь ушёл в обводку и свечение вокруг, где он
   ни на чью читаемость не влияет, а взгляд всё равно цепляет. */
.geroy__knopky {
  display: flex; flex-wrap: wrap; gap: var(--p3);
  justify-content: center;
  margin-top: var(--p6);
}
.geroy__knopky .knopka {
  min-height: 56px; padding-inline: var(--p7);
  font-size: 1.06rem;
  box-shadow: 0 0 0 2px var(--burshtyn), 0 10px 30px rgba(192, 122, 34, .28);
}
.geroy__knopky .knopka:hover {
  box-shadow: 0 0 0 2px var(--burshtyn-s), 0 14px 34px rgba(192, 122, 34, .36);
}
/* На телефоне — во всю ширину: половинчатая кнопка посреди узкого
   экрана выглядит как что-то необязательное. */
@media (max-width: 520px) {
  .geroy__knopky .knopka { width: 100%; }
}
.geroy__fakty {
  display: flex; flex-wrap: wrap; gap: var(--p3) var(--p6);
  margin-top: var(--p6); padding: 0; list-style: none;
  font-size: var(--mal); color: rgba(247, 239, 226, .72);
}
.geroy__fakty li { display: flex; align-items: center; gap: var(--p2); }
.geroy__fakty li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--burshtyn); flex: none;
}

/* На широком экране текст остаётся узкой колонкой (так его удобно читать),
   а строка фактов растягивается на всю ширину и подчёркивается линией —
   иначе правая половина первого экрана стоит пустой. */
@media (min-width: 900px) {
  /* тот же предел, что у обычной обёртки .obhvat — иначе блок теряет
     центрирование и прилипает к краям экрана */
  .geroy__vmist { max-width: var(--obhvat); }
  /* Узкая колонка — только для заголовка: длинную строку читать тяжело.
     Кнопке эта колонка вредила. Она центрируется внутри своего блока, а
     блок шириной 760 в обёртке 1200 прижат влево — и центр кнопки
     оказывался на 534 px при середине экрана 720. Замер этого не ловит
     (кнопка «по центру» — своего блока), видно только глазом: кнопка
     стоит левее точек карусели, хотя взгляд после карусели идёт по её
     оси. Поэтому блок кнопки тянется на всю обёртку. */
  .geroy h1 { max-width: 760px; }
  .geroy__fakty {
    margin-top: var(--p7); padding-top: var(--p5);
    border-top: 1px solid var(--linia-tem);
    gap: var(--p6);
  }
  .geroy__fakty li { flex: 1 1 0; }
}

/* ---------- 7. Карусель «полка» ----------
   Главный жест страницы. Раньше тут ехала бегущая строка сама по себе;
   заказчица попросила листаемую карусель с фото — и это честнее:
   лента ехала мимо человека, а карусель он крутит сам, в своём темпе.

   Устройство самое простое из возможных: обычная прокрутка вбок плюс
   scroll-snap. Никакой библиотеки, палец работает из коробки, стрелки
   на широком экране просто дёргают ту же прокрутку. Сама не едет
   намеренно: автопрокрутка уносит карточку из-под пальца. */
.karusel {
  position: relative;
  margin-top: var(--p6);
}
.karusel__shapka {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--p4);
  margin-bottom: var(--p3);
  min-height: 44px;
}
/* Подсказка словами — только там, где нет стрелок. На телефоне это
   единственная надпись, которая прямо говорит, что делать пальцем;
   на широком экране её заменяют две кнопки, и повторять незачем. */
.karusel__pidkaz {
  display: inline-flex; align-items: center; gap: var(--p2);
  font-size: var(--drib); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  /* прозрачность не ниже .6: при .5 кремовый на тёмном давал контраст 4.26,
     а для мелкого текста нужно от 4.5 */
  color: rgba(247, 239, 226, .6);
}
.karusel__pidkaz svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
@media (min-width: 720px) { .karusel__pidkaz { display: none; } }
/* Стрелки — только там, где нет пальца. На телефоне их не рисуем вовсе,
   а не прячем прозрачностью: display:none заодно убирает их из обхода
   с клавиатуры, чтобы Tab не проваливался в невидимые кнопки. */
.karusel__strilky { display: none; gap: var(--p2); }
@media (min-width: 720px) { .karusel__strilky { display: flex; } }
.karusel__strilka {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent; color: var(--krem);
  border: 1px solid var(--linia-tem); border-radius: var(--r-m);
  cursor: pointer;
  transition: background var(--shvydko), border-color var(--shvydko), opacity var(--shvydko);
}
.karusel__strilka:hover:not(:disabled) {
  background: rgba(247, 239, 226, .1); border-color: rgba(247, 239, 226, .4);
}
/* Доехали до края — стрелка гаснет и перестаёт нажиматься. Кнопка,
   которая ничего не делает, выглядит как поломка. */
.karusel__strilka:disabled { opacity: .3; cursor: default; }
.karusel__strilka svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.karusel__strichka {
  display: flex; gap: var(--p3);
  margin: 0 calc(var(--p4) * -1); padding: 0 var(--p4) var(--p1);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--p4);
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* прокрутка карусели не должна утаскивать за собой всю страницу вбок */
  overscroll-behavior-x: contain;
}
.karusel__strichka::-webkit-scrollbar { display: none; }
@media (min-width: 640px) {
  .karusel__strichka {
    margin-inline: calc(var(--p5) * -1); padding-inline: var(--p5);
    scroll-padding-left: var(--p5);
  }
}
@media (prefers-reduced-motion: reduce) { .karusel__strichka { scroll-behavior: auto; } }

/* Ширина кадра подобрана так, чтобы у края экрана всегда торчал кусок
   следующего: это то, что без слов говорит «листается». Ровно один кадр
   в ширину экрана — самая частая ошибка каруселей: выглядит как обычная
   картинка, и половина людей её не листает вообще. */
/* min-width: 0 — не «на всякий случай», а починка настоящей поломки,
   которую видно только в Safari. У элемента внутри flex минимальная
   ширина по умолчанию не ноль, а «сколько нужно содержимому», и Safari
   считает эту нужду через aspect-ratio фотографии: ширина зависит от
   высоты, высота от ширины, и кадр раздувается. Замерено: Chromium
   честные 270 px, Safari — 655, а при повторных замерах 615, 698, 743,
   то есть число ещё и пляшет от того, когда успели догрузиться
   картинки. На телефоне это значило, что один кадр шире экрана вдвое и
   торчащего края следующего не видно — то есть карусель переставала
   выглядеть листаемой, ради чего её ширина и подбиралась.
   Ноль снимает круговую зависимость: тогда действует только flex-basis. */
.karusel__strichka > li {
  flex: 0 0 min(72vw, 270px); min-width: 0;
  scroll-snap-align: start;
}

.karusel__karta {
  display: flex; flex-direction: column; height: 100%;
  background: var(--tem-2);
  border: 1px solid var(--tem-3); border-radius: var(--r-l);
  overflow: hidden; text-decoration: none;
  transition: border-color var(--shvydko), background var(--shvydko);
}
.karusel__karta:hover { background: #245034; border-color: var(--zel); }
.karusel__foto {
  aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(247,239,226,.09) 0 10px, transparent 10px 20px),
    rgba(247, 239, 226, .04);
  color: rgba(247, 239, 226, .72);  /* см. .tovar__foto: было .55 → 4.04 */
  font-size: var(--drib); letter-spacing: .1em; text-transform: uppercase;
}
.karusel__foto img { width: 100%; height: 100%; object-fit: cover; }
.karusel__telo {
  display: flex; flex-direction: column; gap: var(--p1);
  padding: var(--p4);
  /* тело прижато книзу: у кадров подписи разной длины, и без этого
     строка «До розділу» гуляет по высоте от карточки к карточке */
  flex: 1 1 auto; justify-content: flex-start;
}
.karusel__nazva {
  font-family: var(--shrift-z); font-size: 1.05rem; font-weight: 600;
  line-height: 1.22;
}
.karusel__pid {
  margin-top: var(--p1);
  font-size: var(--drib); line-height: 1.4;
  color: rgba(247, 239, 226, .74);
}
.karusel__dali {
  margin-top: auto; padding-top: var(--p3);
  display: inline-flex; align-items: center; gap: var(--p2);
  font-size: var(--mal); font-weight: 600;
  color: var(--burshtyn-s);
}
.karusel__dali span { transition: transform var(--shvydko); }
.karusel__karta:hover .karusel__dali span { transform: translateX(4px); }

/* Точки под лентой. Это второй сигнал «карусель» и заодно счётчик:
   видно, сколько кадров всего и который сейчас. Точки нажимаются —
   значит это кнопки, а не украшение, и зона нажатия у них полные
   44×44, хотя сама точка 7 px.

   Тут стоял ровно этот комментарий — при ширине кнопки 28 px. То есть
   в коде было написано «честные 44», а замер показал 28×44 на всех
   шести точках. Комментарий врал, и заметить это глазами нельзя: точка
   мелкая, промах виден только пальцем на телефоне.

   Зазора между кнопками нет намеренно: шесть по 44 — это 264 px, они
   влезают даже в экран 320 px (под содержимое там остаётся 288). С
   зазором было бы 284 — впритык. Видимого зазора и не нужно: точки и
   так далеко друг от друга внутри своих кнопок. */
.karusel__krapky {
  display: flex; justify-content: center; align-items: center; gap: 0;
  margin-top: var(--p3);
}
.karusel__krapka {
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
}
.karusel__krapka::before {
  content: ''; width: 7px; height: 7px; border-radius: var(--r-k);
  background: rgba(247, 239, 226, .3);
  transition: background var(--shvydko), width var(--shvydko);
}
.karusel__krapka[aria-current="true"]::before {
  width: 22px; background: var(--burshtyn-s);
}
@media (prefers-reduced-motion: reduce) {
  .karusel__krapka::before, .karusel__dali span { transition: none; }
}

/* ---------- 8. Секции ---------- */
.sekciya { padding: var(--p9) 0; }
.sekciya--tiho { background: var(--krem); }
.sekciya--vuzko { padding: var(--p8) 0; }

.sekciya__shapka {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--p4); flex-wrap: wrap;
}
.sekciya__dali {
  font-size: var(--mal); font-weight: 600; color: var(--burshtyn-t);
  text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color var(--shvydko);
  /* Выглядит как текстовая ссылка, но по высоте это полноценная кнопка:
     в 23 пикселя пальцем не попасть. Отрицательный отступ снизу возвращает
     подчёркивание вплотную к буквам. */
  display: inline-flex; align-items: center; min-height: 44px;
  padding-bottom: 10px; margin-bottom: -10px;
}
.sekciya__dali:hover { border-color: currentColor; }
.sekciya__pid {
  margin-top: var(--p4); max-width: 58ch;
  color: var(--siryi);
}
/* Строка, которая раньше стояла на первом экране рукописным пером.
   Её место — здесь, в рассказе о магазине: это не заголовок витрины,
   а принцип работы, и читается он как первая фраза абзаца. */
.sekciya__gaslo {
  margin-top: var(--p5);
  font-family: var(--shrift-z);
  font-size: clamp(1.18rem, 1.08rem + .4vw, 1.45rem);
  font-weight: 600; line-height: 1.35; letter-spacing: -.015em;
  color: var(--tem);
}

/* ---------- 9. Плитки разделов ---------- */
.rozdily {
  display: grid; gap: var(--p3);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin: var(--p6) 0 0; padding: 0; list-style: none;
}
@media (min-width: 720px) {
  .rozdily { gap: var(--p4); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}
/* Ровно шесть колонок на широком экране — под то, сколько полок показано
   до нажатия «Показати ще». Автоподбор давал пять, шестая плитка падала
   на вторую строку сиротой, и обрыв списка читался как ошибка вёрстки, а
   не как приглашение развернуть. Шесть делят и восемнадцать: развёрнутый
   список встаёт тремя ровными строками. */
@media (min-width: 1080px) {
  .rozdily { grid-template-columns: repeat(6, 1fr); }
}

/* Кнопка «Показати ще» под списком полок. По центру и с воздухом:
   она обрывает список, и человек должен понять, что там не конец. */
.rozdily__shche { display: flex; justify-content: center; margin-top: var(--p5); }

.rozdil {
  display: flex; flex-direction: column; height: 100%;
  padding: var(--p4);
  background: var(--bilyi);
  border: 1px solid var(--linia); border-radius: var(--r-m);
  text-decoration: none;
  transition: transform var(--shvydko), box-shadow var(--shvydko), border-color var(--shvydko);
}
.rozdil:hover {
  transform: translateY(-3px);
  border-color: rgba(83, 130, 86, .5);
  box-shadow: var(--tin-1);
}
.rozdil__foto {
  aspect-ratio: 4 / 3; margin-bottom: var(--p3);
  border-radius: var(--r-s);
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(83,130,86,.07) 0 10px, transparent 10px 20px),
    var(--krem);
  color: var(--siryi);              /* см. .tovar__foto: было .8 → 3.35 */
  font-size: var(--drib); letter-spacing: .1em; text-transform: uppercase;
}
.rozdil__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-s); }
.rozdil__nazva {
  font-family: var(--shrift-z); font-size: 1.08rem; font-weight: 700;
  line-height: 1.15;
}
.rozdil__pid {
  margin-top: var(--p1);
  /* То же, что и у .tovar__korotko: это описание, а не подпись */
  font-size: .9rem; color: var(--siryi); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rozdil__niz {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: var(--p3);
  font-size: var(--drib); color: var(--siryi);
}
/* Стрелка затемнённым янтарём: обычный на белой карточке даёт 3.42.
   Стрелка — не украшение, а единственный знак того, что карточка
   раздела кликабельна, поэтому норма для неё обычная. Стало 5.94. */
.rozdil__strilka { color: var(--burshtyn-t); transition: transform var(--shvydko); }
.rozdil:hover .rozdil__strilka { transform: translateX(4px); }

/* ---------- 10. Плитка товара ---------- */
.tovary {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  margin: var(--p6) 0 0; padding: 0; list-style: none;
}
@media (min-width: 560px) {
  .tovary { gap: var(--p4); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

.tovar {
  position: relative;
  display: flex; flex-direction: column; height: 100%;
  background: var(--bilyi);
  border: 1px solid var(--linia); border-radius: var(--r-m);
  overflow: hidden;
  transition: transform var(--shvydko), box-shadow var(--shvydko), border-color var(--shvydko);
}
.tovar:hover {
  transform: translateY(-3px);
  border-color: rgba(83, 130, 86, .45);
  box-shadow: var(--tin-1);
}
.tovar__lynk { display: block; text-decoration: none; color: inherit; }
.tovar__foto {
  aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(83,130,86,.07) 0 10px, transparent 10px 20px),
    var(--krem);
  /* Надпись-заглушка «Фото буде» — полным цветом, без прозрачности.
     Приглушал её до .75, чтобы не спорила с товаром, и получил 3.06
     при норме 4.5. Пока фото не приехали, эту надпись читают вместо
     товара — она не фон, а содержание карточки. Стало 4.94. */
  color: var(--siryi);
  font-size: var(--drib); letter-spacing: .1em; text-transform: uppercase;
}
.tovar__foto img { width: 100%; height: 100%; object-fit: cover; }
.tovar__telo { padding: var(--p3) var(--p3) 0; }

/* Страна происхождения. Это не украшение: «продукти з усього світу» —
   то, чем магазин занимается, и по стране здесь можно фильтровать. */
.krayina {
  display: inline-block;
  /* Было .68rem = 10,9 px. Разрядка и прописные и так усложняют чтение,
     а строка несёт страну и вес — то, ради чего человек лезет в карточку. */
  font-size: .76rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--burshtyn-t);
}
/* «Без глютену», «Без лактози». Зелёная, а не янтарная: янтарь на
   сайте — это цена и «Хіт», то есть торговля, а тут сведения о
   составе. Рамка вместо заливки — пометка не должна спорить с ценой. */
.dieta { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: var(--p2); }
.dieta__myitka {
  display: inline-block; padding: 2px 8px;
  border: 1px solid rgba(46, 86, 57, .45); border-radius: var(--r-s);
  color: var(--zel-dia); background: rgba(83, 130, 86, .08);
  font-size: .76rem; font-weight: 600; line-height: 1.35;
}
.karta__korotko + .dieta { margin-top: var(--p3); }
/* В карточке пометка — ссылка на подборку. Палец должен попадать:
   высоту добираем отступами до 32 px, как у остальных мелких кнопок. */
a.dieta__myitka {
  padding: 7px 10px; text-decoration: none;
  transition: background var(--shvydko), border-color var(--shvydko);
}
a.dieta__myitka:hover { background: rgba(83, 130, 86, .18); border-color: var(--zel-dia); }
.tovar__nazva {
  margin-top: var(--p2);
  font-family: var(--shrift-z); font-size: 1.02rem; font-weight: 700;
  line-height: 1.2;
}
/* Строка под названием товара — единственное описание, которое видно
   без захода в карточку, и читают её дольше всего остального мелкого
   текста. Поэтому она крупнее общего «мелкого» размера: 14,4 против
   13,5 px. Межстрочное расстояние тоже подняли — мелкий текст в две
   строки слипается сильнее крупного. */
.tovar__korotko {
  margin-top: var(--p1);
  font-size: .9rem; color: var(--siryi); line-height: 1.5;
}
.tovar__niz {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--p2);
  margin-top: auto; padding: var(--p3);
}
/* Цена — гротеском, а не антиквой: см. объяснение про цифры в :root */
.tovar__cina {
  font-size: 1.18rem; font-weight: 700;
  line-height: 1.1;
}
.tovar__cina span {
  display: block;
  /* «за упаковку» под ценой: было 10,9 px — подняли до 12 */
  font-family: var(--shrift-t); font-size: .75rem; font-weight: 400;
  letter-spacing: .06em; color: var(--siryi);
}
/* Товар без ціни: напис тихіший за справжню ціну, щоб не читався
   як «0 ₴» чи як акція. */
.tovar__cina--nemaje { font-size: .95rem; color: var(--siryi); }
.tovar__plyus {
  /* 44 — минимум, в который уверенно попадает палец */
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: var(--zel-dia); color: var(--krem);
  border: 0; border-radius: 50%;
  font-size: 1.35rem; line-height: 1; cursor: pointer;
  transition: transform var(--shvydko), background var(--shvydko);
}
.tovar__plyus:hover { background: var(--burshtyn); transform: scale(1.07); }
.tovar__plyus:active { transform: scale(.94); }

.znachok {
  position: absolute; top: var(--p3); left: var(--p3); z-index: 2;
  padding: 3px 10px;
  background: var(--burshtyn); color: #20160A;
  border-radius: var(--r-s);
  /* Плашка «Хіт» / «Немає»: было 10,6 px */
  font-size: .73rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
/* «Немає» — та же плашка, но приглушённая: это сообщение, а не награда */
.znachok--tiho { background: rgba(20, 48, 31, .62); color: var(--krem); }

/* Товар, которого нет. Гасим фотографию и название, но цену и
   описание оставляем читаемыми — человек всё равно приходит
   посмотреть, что это было и сколько стоило. */
.tovar--nemaje .tovar__foto { opacity: .42; filter: saturate(.45); }
.tovar--nemaje .tovar__nazva { opacity: .72; }

/* ---------- 10б. Окошко выбора количества ----------
   Открывается по «+» на плитке. Снизу на телефоне, по центру на
   широком экране: на телефоне палец живёт внизу, тянуться к
   середине экрана неудобно. */
.vybir {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-end; justify-content: center;
  visibility: hidden;
}
.vybir[data-vidkryte="tak"] { visibility: visible; }

.vybir__tin {
  position: absolute; inset: 0;
  background: rgba(10, 24, 16, .58);
  opacity: 0;
  transition: opacity var(--vysuv);
}
.vybir[data-vidkryte="tak"] .vybir__tin { opacity: 1; }

.vybir__panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 520px;
  padding: var(--p5) var(--p4) calc(var(--p4) + env(safe-area-inset-bottom));
  background: var(--krem); color: var(--tem);
  border-radius: var(--r-l) var(--r-l) 0 0;
  box-shadow: 0 -18px 50px rgba(10, 24, 16, .3);
  transform: translateY(100%);
  transition: transform var(--vysuv);
}
.vybir[data-vidkryte="tak"] .vybir__panel { transform: translateY(0); }

.vybir__hrest {
  position: absolute; top: var(--p3); right: var(--p3);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 999px;
  color: var(--tem); cursor: pointer;
  transition: background var(--shvydko);
}
.vybir__hrest:hover { background: rgba(20, 48, 31, .08); }
.vybir__hrest svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

.vybir__verh { display: flex; gap: var(--p4); align-items: flex-start; padding-right: 44px; }
.vybir__foto {
  flex: 0 0 104px; width: 104px;
  border-radius: var(--r-m); overflow: hidden; background: rgba(20, 48, 31, .06);
}
.vybir__foto img { display: block; width: 100%; height: auto; }
.vybir__nazva {
  margin: 2px 0 var(--p1);
  font-family: var(--shrift-z); font-size: 1.06rem; line-height: 1.25;
}
.vybir__za { margin: 0; font-size: .86rem; color: var(--siryi); }

.vybir__telo { margin-top: var(--p5); }
.vybir__pidpys {
  margin: 0 0 var(--p2);
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--siryi);
}

/* Счётчик. Кнопки 48 px — по ним целятся пальцем, и промах тут
   стоит дороже обычного: человек уйдёт с двумя палками вместо одной. */
.lichyty {
  display: flex; align-items: center; gap: var(--p3);
  margin-bottom: var(--p4);
}
.lichyty button {
  width: 48px; height: 48px; flex: 0 0 48px;
  display: grid; place-items: center;
  background: var(--krem); color: var(--tem);
  border: 1px solid rgba(20, 48, 31, .22); border-radius: var(--r-m);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: background var(--shvydko), border-color var(--shvydko);
}
.lichyty button:hover:not(:disabled) { background: #fff; border-color: var(--zel); }
.lichyty button:disabled { opacity: .35; cursor: default; }
.lichyty__chyslo {
  min-width: 2ch; text-align: center;
  font-family: var(--shrift-c); font-size: 1.24rem; font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
}
.lichyty__pid { margin-left: auto; font-size: .84rem; color: var(--siryi); }

.vybir__dali {
  display: block; margin-top: var(--p3); text-align: center;
  font-size: .86rem; color: var(--siryi);
}

@media (min-width: 560px) {
  .vybir { align-items: center; }
  .vybir__panel {
    border-radius: var(--r-l);
    margin: var(--p4);
    padding-bottom: var(--p5);
    transform: translateY(16px) scale(.98);
    opacity: 0;
    transition: transform var(--vysuv), opacity var(--vysuv);
  }
  .vybir[data-vidkryte="tak"] .vybir__panel {
    transform: translateY(0) scale(1); opacity: 1;
  }
}

/* Кому укачивает — окно просто появляется, без выезда */
@media (prefers-reduced-motion: reduce) {
  .vybir__tin, .vybir__panel { transition-duration: .01ms; }
  .vybir__panel { transform: none; }
}

/* ---------- 11. Шаги «как заказать» ---------- */
.kroky {
  counter-reset: krok;
  display: grid; gap: var(--p4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: var(--p6) 0 0; padding: 0; list-style: none;
}
/* Нумерация здесь честная: это последовательность, шаг 2 не бывает
   раньше шага 1. Там, где порядка нет, цифры не ставим. */
.kroky li {
  counter-increment: krok;
  padding: var(--p5);
  background: var(--bilyi);
  border: 1px solid var(--linia); border-radius: var(--r-m);
}
.kroky li::before {
  content: counter(krok, decimal-leading-zero);
  display: block; margin-bottom: var(--p3);
  font-family: var(--shrift-c);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--zel);
}
.kroky h3 { margin-bottom: var(--p2); }
.kroky p { font-size: var(--mal); color: var(--siryi); }

/* ---------- 11a. Поиск по каталогу ----------
   Позиций почти сотня, и раскладывать их по восемнадцати разделам —
   это хорошо для «посмотреть», но плохо для «мне нужен пармезан».
   Поле ищет сразу и по названию, и по стране, и по разделу. */
.poshuk {
  position: relative;
  display: flex; align-items: center;
  margin-top: var(--p5);
  max-width: 460px;
}
.poshuk__ikonka {
  position: absolute; left: var(--p4);
  width: 18px; height: 18px; pointer-events: none;
  fill: none; stroke: var(--siryi); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.poshuk__pole {
  width: 100%; min-height: 48px;
  padding: var(--p3) var(--p8) var(--p3) calc(var(--p4) + 18px + var(--p3));
  background: var(--bilyi);
  border: 1px solid var(--linia); border-radius: var(--r-m);
  font-family: var(--shrift-t); font-size: 1rem; color: var(--chornylo);
  transition: border-color var(--shvydko), box-shadow var(--shvydko);
}
/* Сафари рисует у type=search свой крестик поверх нашего — убираем,
   иначе в поле два крестика подряд */
.poshuk__pole::-webkit-search-decoration,
.poshuk__pole::-webkit-search-cancel-button { -webkit-appearance: none; }
.poshuk__pole:focus {
  outline: none;
  border-color: var(--zel);
  box-shadow: 0 0 0 3px rgba(83, 130, 86, .18);
}
.poshuk__ochystyty {
  position: absolute; right: var(--p1);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-m);
  color: var(--siryi); font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: color var(--shvydko), background var(--shvydko);
}
.poshuk__ochystyty:hover { color: var(--chornylo); background: var(--krem); }

/* ---------- 12. Каталог: полоска вкладок ---------- */
.stryzhka-obhort {
  position: sticky; top: 66px; z-index: 40;
  background: var(--papir);
  border-bottom: 1px solid var(--linia);
  padding-block: var(--p3);
}
.stryzhka {
  display: flex; gap: var(--p2);
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
}
.stryzhka::-webkit-scrollbar { display: none; }
/* 44, а не 40. Замер показал 40, и это ровно тот случай, когда «почти
   попадает» хуже, чем «не попадает»: полоса разделов едет вбок, палец
   при промахе не просто мажет, а утаскивает ленту. Четыре лишних
   пикселя стоят ноль, а промахов убирают заметно. */
.vkladka {
  flex: none;
  min-height: 44px; padding: 0 var(--p4);
  background: transparent; color: var(--chornylo);
  border: 1px solid var(--linia); border-radius: var(--r-m);
  font-size: var(--mal); font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background var(--shvydko), color var(--shvydko), border-color var(--shvydko);
}
.vkladka:hover { border-color: var(--zel); }
.vkladka[aria-pressed="true"] {
  background: var(--zel-dia); color: var(--krem); border-color: var(--zel-dia);
}

/* На узком экране страны едут одной строкой вбок — как вкладки разделов
   сверху. Если их разложить в столбик, до товаров надо пролистать
   полэкрана кнопок. С 720px места хватает, и строки переносятся. */
.filtr {
  display: flex; align-items: center; gap: var(--p2);
  margin-top: var(--p5);
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
}
.filtr::-webkit-scrollbar { display: none; }
.filtr > * { flex: none; }
@media (min-width: 720px) {
  .filtr { flex-wrap: wrap; overflow: visible; }
}
.filtr__pidpys {
  font-size: var(--drib); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--siryi);
  margin-right: var(--p2);
}
.chip {
  min-height: 44px; padding: 0 var(--p4);
  white-space: nowrap;
  background: transparent; color: var(--siryi);
  border: 1px solid var(--linia); border-radius: var(--r-m);
  font-size: var(--drib); font-weight: 500; cursor: pointer;
  transition: background var(--shvydko), color var(--shvydko), border-color var(--shvydko);
}
.chip:hover { border-color: var(--zel); color: var(--chornylo); }
.chip[aria-pressed="true"] {
  background: var(--burshtyn); border-color: var(--burshtyn); color: #20160A; font-weight: 600;
}

.znaydeno { margin-top: var(--p5); font-size: var(--mal); color: var(--siryi); }

/* ---------- 13. Карточка товара ---------- */
.shlyah {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--p2);
  padding-block: var(--p5);
  font-size: var(--drib); color: var(--siryi);
}
/* Строчка крошек ростом 21 px — по ней часто возвращаются в раздел,
   и промахнуться легко. Растягиваем саму ссылку до 44, а не сдвигаем
   соседей: подчёркивание остаётся по буквам, а палец ловит всю высоту.
   Отрицательный margin гасит прибавку, иначе полоса крошек раздуется. */
.shlyah a {
  text-decoration: none; border-bottom: 1px solid var(--linia);
  display: inline-flex; align-items: center; min-height: 44px;
  margin-block: -11px;
}
.shlyah a:hover { color: var(--chornylo); border-color: currentColor; }

.karta__verh {
  display: grid; gap: var(--p6);
  align-items: start;
}
/* Ячейка сетки по умолчанию не может стать уже своего содержимого
   (min-width: auto). Внутри правой колонки лежит ряд вкусов, который
   прокручивается вбок, — и без этой строки он распирал всю страницу:
   замер на 320 px показывал ширину документа 478 px, то есть карточку
   можно было утащить пальцем за край экрана. */
.karta__verh > * { min-width: 0; }
@media (min-width: 880px) {
  .karta__verh { grid-template-columns: 1fr 1fr; gap: var(--p8); }
}
/* Одно фото на товар — столько она и снимает. Пока кадр один, ему
   незачем занимать всю ширину колонки на широком экране: снимок
   вертикальный, растянутый он выглядит витриной мебели, а не банкой. */
.karta__foto {
  display: grid;
  max-width: 420px;
}
.karta__foto div {
  aspect-ratio: 4 / 5;
  overflow: hidden;                 /* чтобы фото обрезалось по скруглению */
  display: grid; place-items: center; text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(83,130,86,.07) 0 10px, transparent 10px 20px),
    var(--krem);
  border-radius: var(--r-m);
  color: var(--siryi);              /* см. .tovar__foto: было .75 → 3.06 */
  font-size: var(--drib); letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.5;
}
.karta__nazva { margin-top: var(--p2); }
.karta__korotko {
  margin-top: var(--p3); font-size: 1.08rem; color: var(--siryi);
}

.kupivlya {
  margin-top: var(--p6); padding: var(--p5);
  background: var(--bilyi);
  border: 1px solid var(--linia); border-radius: var(--r-l);
  box-shadow: var(--tin-1);
}
.kupivlya__cina { font-size: 2.15rem; font-weight: 700; line-height: 1; }
.kupivlya__za { margin-top: var(--p2); font-size: var(--mal); color: var(--siryi); }
/* Товара нет. Вместо счётчика — объяснение и кнопка «спросить»:
   пустая карточка без выхода выглядит как тупик, а человек уже
   пришёл именно за этим товаром. */
.kupivlya__nemaje { margin: var(--p4) 0 var(--p5); color: var(--siryi); }

.kilkist {
  display: flex; align-items: center; gap: var(--p4);
  margin: var(--p5) 0;
}
.kilkist__pidpys {
  font-size: var(--drib); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--siryi);
}
.kilkist__ryad {
  display: inline-flex; align-items: center;
  border: 1px solid var(--linia); border-radius: var(--r-m);
  overflow: hidden;
}
.kilkist__knopka {
  width: 44px; height: 44px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 1.2rem; line-height: 1;
  transition: background var(--shvydko);
}
.kilkist__knopka:hover:not(:disabled) { background: var(--krem); }
.kilkist__knopka:disabled { opacity: .35; cursor: not-allowed; }
/* font-variant-numeric тут НЕ повторяем: правило для всех чисел стоит
   выше, а повтор с той же силой селектора затёр бы из него lining-nums. */
.kilkist__chyslo { min-width: 44px; text-align: center; font-weight: 600; }

/* ---------- Ряд вкусов ----------
   Линейка одного товара: пятёрка салямі или пара в мешковине. Заказчица
   снимает их одним кадром и подписывает каждую — ряд делает то же самое,
   но так, чтобы соседа можно было открыть.

   Стоит внутри карточки покупки, между ценой и количеством. Почему
   именно там, а не отдельным блоком ниже, — подробно в script.js
   у функции strichkaSmakiv: коротко, на телефоне отдельный блок
   начинался на 1100-й точке, и до него никто не долистывал.

   Прокручивается вбок, а не переносится на вторую строку: на 320 px пять
   плиток в ряд не помещаются, а разорванная на две строки линейка
   перестаёт читаться как линейка — видно две кучки, а не один набор. */
.smaky { margin-top: var(--p5); }
.smaky__zag {
  display: block;
  font-family: var(--shrift-t); font-size: var(--drib); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--siryi);
}
.smaky__ryad {
  display: flex; gap: var(--p2);
  margin: var(--p3) 0 0; padding: 0 0 var(--p2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
/* display:flex у пункта и height:100% у плитки — чтобы плитки стояли
   вровень по низу. Иначе подпись в одну строку («з перцем») делает
   плитку ниже соседки с подписью в две («з томатами»), и ряд выглядит
   щербатым. */
.smaky__ryad > li { flex: 0 0 auto; display: flex; scroll-snap-align: start; }
.smak { height: 100%; }

/* Плитка вкуса. Ширина фиксирована, а не резиновая: иначе на широком
   экране пять штук расползутся во всю строку и станут похожи на плитки
   каталога — а это другая вещь, там карточка товара целиком.

   88 px. Было 76, и этого не хватало: подпись «з чорносливом» в 66 px
   содержимого не влезала, а слово неразрывное. Сетка внутри плитки
   считала колонку по самому длинному слову и растягивала её до 86 px
   — то есть шире самой плитки. Всё, что стояло в колонке, вылезало
   наружу, и фотография срезалась сбоку ровно на эту разницу.
   Замерено: колонка 86 px внутри плитки шириной 76.

   Чинилось с двух сторон. Здесь — ширина 88 и колонка ниже, прибитая
   к 100%, чтобы сетка больше никогда не считала её по содержимому:
   следующее длинное слово сломало бы всё заново, и опять молча.
   В данных — подписи вкусов укорочены до существительного («вишня»
   вместо «з вишнями»): под заголовком «Смак» предлог не нужен, он
   только удлинял слово. Самое длинное теперь «смородина» — 71 px
   при 78 px содержимого. */
.smak {
  display: grid; grid-template-columns: 100%;
  gap: var(--p1); justify-items: center;
  width: 88px; padding: var(--p2) var(--p1) var(--p3);
  background: var(--bilyi);
  border: 1px solid var(--linia); border-radius: var(--r-m);
  color: inherit; text-decoration: none; text-align: center;
  transition: border-color var(--shvydko), box-shadow var(--shvydko);
}
a.smak:hover { border-color: var(--burshtyn); box-shadow: var(--tin-1); }
/* Тот вкус, на карточке которого мы стоим. Не ссылка, поэтому и выглядит
   иначе: янтарная обводка плюс кремовая заливка. Одной обводки мало —
   она же появляется при наведении на соседа. */
.smak--cej { border-color: var(--burshtyn); background: var(--krem); }
.smak__foto {
  display: block; width: 100%; aspect-ratio: 4 / 5;
  overflow: hidden; border-radius: var(--r-s);
  background: var(--krem);
}
.smak--cej .smak__foto { background: var(--bilyi); }
.smak__foto picture { display: block; width: 100%; height: 100%; }
/* contain, а не cover: палка узкая и длинная, обрезка по ширине съела бы
   этикетку — то единственное, чем вкусы и отличаются друг от друга. */
.smak__foto img { width: 100%; height: 100%; object-fit: contain; }
/* Страховка на случай, если когда-нибудь придёт вкус с очень длинным
   словом: пусть лучше слово перенесётся с переносом посередине, чем
   вылезет за рамку. Колонка выше уже прибита к 100%, так что ширину
   плитки это не тронет. */
.smak__nazva {
  font-size: var(--drib); line-height: 1.25;
  min-width: 0; overflow-wrap: anywhere;
}

.fakty {
  display: grid; gap: var(--p4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--p8);
}
.fakt {
  padding: var(--p5);
  background: var(--krem);
  border-radius: var(--r-m);
}
.fakt h3 {
  font-family: var(--shrift-t); font-size: var(--drib); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--siryi);
  margin-bottom: var(--p3);
}
.fakt p { font-size: var(--mal); }

/* ---------- 14. Корзина ---------- */
.ryadok {
  display: grid; gap: var(--p3);
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  padding: var(--p4) 0;
  border-bottom: 1px solid var(--linia);
}
.ryadok__foto {
  width: 64px; aspect-ratio: 4 / 5;
  border-radius: var(--r-s);
  overflow: hidden;                 /* чтобы снимок обрезался по скруглению */
  background:
    repeating-linear-gradient(135deg, rgba(83,130,86,.09) 0 8px, transparent 8px 16px),
    var(--krem);
}
/* Если фото есть — оно ложится поверх штриховки. Если нет, остаётся
   штриховка: пустой белый квадрат читается как «картинка не загрузилась». */
.ryadok__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ryadok__nazva { font-family: var(--shrift-z); font-weight: 700; line-height: 1.2; }
.ryadok__pid { margin-top: 2px; font-size: var(--drib); color: var(--siryi); }
/* Такой же счётчик, как в карточке товара, только пониже: в строке корзины
   ему не нужно быть главной кнопкой. */
.kilkist__ryad--vuzko { margin-top: var(--p3); }
.kilkist__ryad--vuzko .kilkist__knopka { width: 40px; height: 40px; }
.kilkist__ryad--vuzko .kilkist__chyslo {
  min-width: 56px; font-size: var(--mal);
}
.ryadok__prava { text-align: right; }
.ryadok__suma { font-weight: 700; font-size: 1.06rem; }
/* Выглядит как текстовая ссылка, но по высоте это нормальная кнопка:
   в 21 пиксель пальцем не попасть. */
.ryadok__prybraty {
  margin-top: var(--p1); padding: var(--p3) 0 calc(var(--p3) - 1px);
  background: none; border: 0; cursor: pointer;
  font-size: var(--drib); color: var(--siryi);
  border-bottom: 1px solid var(--linia);
}
.ryadok__prybraty:hover { color: #9B2C1E; border-color: currentColor; }

.pidsumok {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--p4); padding-top: var(--p5);
}
.pidsumok__suma { font-size: 1.85rem; font-weight: 700; }
/* Оговорка про вес палок. Появляется только если в корзине есть палка —
   на корзине из одних упаковок она была бы ложной тревогой. */
.pidsumok__pryblyzno {
  margin: var(--p2) 0 0; font-size: var(--mal); color: var(--siryi);
}

/* Сообщение о пустой полке живёт внутри сетки товаров, а она
   раскладывает всё по колонкам по 135–200 px. Без этой строки текст
   «Нічого не знайшли» вставал в одну ячейку и переносился по одному
   слову в столбик — поймано на скриншоте 21.09.2026. Растягиваем на
   всю ширину ряда. Там, где .porozhno стоит вне сетки (корзина),
   свойство просто не действует. */
.porozhno {
  grid-column: 1 / -1;
  padding: var(--p8) var(--p5);
  text-align: center;
  background: var(--krem); border-radius: var(--r-l);
}
/* Ширину строки держим в 52 знака: во всю ширину каталога текст
   растягивается на полтора метра и читается тяжело. Поля пишем одной
   строкой с margin — раздельное margin-inline ниже по файлу гасилось
   этим же правилом, и абзац уезжал влево. */
.porozhno p {
  max-width: 52ch; margin: var(--p3) auto var(--p5);
  color: var(--siryi);
}

/* Разделы-подсказки на пустой полке. Кнопки те же, что в фильтре
   стран, — человек уже знает, как они себя ведут, и учить его заново
   новой форме незачем. Фон у них прозрачный, а .porozhno кремовый —
   поэтому отдельного цвета не нужно. */
.pidkazky {
  display: flex; flex-wrap: wrap; gap: var(--p2);
  align-items: center; justify-content: center;
  margin: 0 0 var(--p5);
}
.pidkazky__pidpys {
  width: 100%; margin-bottom: var(--p1);
  font-size: var(--drib); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--siryi);
}

/* Форма */
.pole { display: block; margin-bottom: var(--p4); }
.pole span {
  display: block; margin-bottom: var(--p2);
  font-size: var(--drib); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--siryi);
}
.pole input, .pole textarea, .pole select {
  width: 100%; min-height: 48px;
  padding: var(--p3) var(--p4);
  background: var(--bilyi);
  border: 1px solid var(--linia); border-radius: var(--r-m);
  font-family: var(--shrift-t); font-size: 1rem; color: var(--chornylo);
  transition: border-color var(--shvydko), box-shadow var(--shvydko);
}
.pole textarea { min-height: 96px; resize: vertical; }
.pole input:focus, .pole textarea:focus, .pole select:focus {
  outline: none;
  border-color: var(--zel);
  box-shadow: 0 0 0 3px rgba(83, 130, 86, .18);
}
.pole--past { position: absolute; left: -9999px; }

/* Поле, которое человек пропустил. Не только цветом: дальтоники увидят
   рамку толще и подпись под полем, а не «что-то покраснело». */
.pole--bida input, .pole--bida select, .pole--bida textarea {
  border-color: #9B2C1E; border-width: 2px;
}
.pole--bida span { color: #9B2C1E; }
.pole__bida {
  display: block; margin: var(--p2) 0 0;
  font-size: var(--drib); font-weight: 500; color: #9B2C1E;
  letter-spacing: 0; text-transform: none;
}

/* Группы полей. Форма длинная по делу, и без деления она читается как
   анкета. Две подписи — «хто отримує» и «куди везти» — превращают её
   в два коротких вопроса. */
.hrupa {
  margin: 0 0 var(--p6); padding: var(--p5) var(--p4);
  border: 1px solid var(--linia); border-radius: var(--r-l);
  background: var(--bilyi);
}
/* Заголовок группы — обычной строкой ВНУТРИ рамки, а не врезкой в неё.
   Браузер по умолчанию вырезает под <legend> кусок рамки, и на скруглённом
   углу этот вырез приходится ровно на закругление: заголовок «наезжает»
   на рамку и выглядит как поломка вёрстки. float+width:100% — известный
   приём, которым legend переводят в обычный блок во всех движках; сам
   вырез при этом не рисуется, и рамка остаётся целой.
   Селектор со знаком «>» намеренно: внутри группы есть вложенный
   fieldset выбора мессенджера, и его подпись оформляется по-своему. */
.hrupa > legend {
  float: left; width: 100%;
  padding: 0; margin: 0 0 var(--p4);
  font-family: var(--shrift-z); font-size: 1.08rem; font-weight: 700;
  color: var(--tem);
}
.hrupa > legend + * { clear: both; }
.hrupa .pole:last-child, .hrupa > *:last-child { margin-bottom: 0; }

/* Поясняющая строка под заголовком группы: человек не должен гадать,
   что писать в «номер», если он его не помнит. */
.hrupa__pid {
  margin: 0 0 var(--p5); font-size: var(--mal); color: var(--siryi);
}

/* Выбор мессенджера. Три варианта — это кнопки, а не выпадающий список:
   список добавляет нажатие и прячет выбор. Под кнопками настоящие
   радиокнопки, поэтому работает клавиатура и озвучка, а форма остаётся
   формой даже без JS. */
.mesendzher { margin: 0 0 var(--p4); padding: 0; border: 0; }
.mesendzher legend {
  float: none; width: auto;
  padding: 0; margin: 0 0 var(--p2);
  font-family: var(--shrift-t);
  font-size: var(--drib); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--siryi);
}
/* Пояснение под вопросом. Раньше стояло только «Де вам написати» —
   человек видел три названия и не понимал, зачем их трогать и что
   изменится от выбора. Теперь прямо сказано, что туда придёт. */
.mesendzher__pid {
  margin: 0 0 var(--p3); font-size: var(--mal); color: var(--siryi);
}
.mesendzher__ryad { display: flex; flex-wrap: wrap; gap: var(--p2); }
.mesendzher__knopka { position: relative; flex: 1 1 96px; }
/* Саму радиокнопку прячем, но не через display:none — иначе она
   выпадает из порядка обхода клавиатурой и перестаёт быть кнопкой. */
.mesendzher__knopka input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.mesendzher__knopka span {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--p3);
  background: var(--bilyi); color: var(--siryi);
  border: 1px solid var(--linia); border-radius: var(--r-m);
  font-size: var(--mal); font-weight: 500; cursor: pointer;
  transition: background var(--shvydko), color var(--shvydko),
              border-color var(--shvydko);
}
.mesendzher__knopka:hover span { border-color: var(--zel); color: var(--chornylo); }
.mesendzher__knopka input:checked + span {
  background: var(--burshtyn); border-color: var(--burshtyn);
  color: #20160A; font-weight: 600;
}
.mesendzher__knopka input:focus-visible + span {
  outline: 2px solid var(--zel); outline-offset: 2px;
}

/* Короткая приписка между блоками формы: не поле и не ошибка, просто
   подсказка, куда деться тому, кому Нова пошта не подходит. */
.forma__zauvaha {
  margin: 0 0 var(--p5); font-size: var(--mal); color: var(--siryi);
}

/* Пары полей в строку. На узком экране — в столбик: два поля по 150 px
   на 320 px экрана дают ввод, в который не влезает «Івано-Франківська». */
.pole-ryad { display: grid; gap: 0 var(--p4); }
@media (min-width: 520px) {
  .pole-ryad { grid-template-columns: 1fr 1fr; }
  /* «Куди» и «Номер»: номер короткий, тип отделения длиннее */
  .pole-ryad--vidd { grid-template-columns: 1.6fr 1fr; }
}

.forma__pid {
  margin: var(--p4) 0 0; font-size: var(--mal); color: var(--siryi);
}

.pomylka { min-height: 22px; font-size: var(--mal); color: #9B2C1E; font-weight: 500; }

/* ---------- 14б. Экран «замовлення прийняте» ----------
   Плашка с номером — единственное тёмное пятно на странице. Номер
   человек будет диктовать по телефону и искать в переписке, поэтому
   он крупнее всего остального и набран цифрами одной ширины. */
.gotovo {
  margin: 0 0 var(--p7);
  padding: var(--p5) var(--p4) var(--p6);
  background: var(--tem); border-radius: var(--r-l);
  color: var(--krem); text-align: center;
}
.gotovo__pid {
  margin: 0;
  font-size: var(--drib); letter-spacing: .08em; text-transform: uppercase;
  color: var(--zel-svit);
}
.gotovo__nomer {
  margin: var(--p2) 0 0;
  font-family: var(--shrift-z); font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 3.4vw, 2.6rem); line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  color: var(--burshtyn-s);
}
.gotovo__suma { margin: var(--p4) 0 0; font-size: 1.2rem; font-weight: 600; }
.gotovo__suma span {
  display: block; margin-top: var(--p1);
  font-size: var(--drib); font-weight: 400; color: var(--zel-svit);
}

/* Три шага — настоящая последовательность во времени, поэтому и
   пронумерованы. Номер рисуем сами кружком: цифра списка по умолчанию
   висит в воздухе и теряется рядом с двумя строками текста. */
.kroky { margin: 0 0 var(--p7); padding: 0; list-style: none; counter-reset: krok; }
.kroky li {
  position: relative; counter-increment: krok;
  margin: 0 0 var(--p4); padding-left: calc(var(--p6) + var(--p2));
  font-size: var(--mal); line-height: 1.6; color: var(--chornylo);
}
.kroky li::before {
  content: counter(krok);
  position: absolute; left: 0; top: -1px;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--r-k);
  background: var(--zel-dia); color: var(--krem);
  font-family: var(--shrift-t); font-size: var(--drib); font-weight: 700;
}

/* Таблица «что и куда». Подпись и значение: на телефоне в столбик,
   на широком — в две колонки, чтобы глаз шёл по одной линии. */
.rekvizyt {
  display: grid; gap: 0 var(--p5);
  margin: 0 0 var(--p5); padding: var(--p5) var(--p4);
  background: var(--krem); border-radius: var(--r-m);
  font-size: var(--mal);
}
@media (min-width: 520px) { .rekvizyt { grid-template-columns: max-content 1fr; } }
.rekvizyt dt { margin: 0; color: var(--siryi); }
.rekvizyt dd {
  margin: 0 0 var(--p4); font-weight: 500; color: var(--chornylo);
  line-height: 1.5;
}
.rekvizyt dd:last-child { margin-bottom: 0; }
/* IBAN и номер счёта — цифрами одной ширины: их сверяют по одной,
   а на узком экране переносят посреди номера, и это нормально. */
.rekvizyt__kod {
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  word-break: break-all;
}
.gotovo__chekaty, .gotovo__pravka {
  margin: 0 0 var(--p5); font-size: var(--mal); color: var(--siryi);
}
.gotovo__knopky { display: grid; gap: var(--p3); margin-top: var(--p6); }
@media (min-width: 560px) { .gotovo__knopky { grid-template-columns: 1fr 1fr; } }

/* ---------- 15. Контакты ---------- */
.zvyazok {
  display: grid; gap: var(--p3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: var(--p6) 0 0; padding: 0; list-style: none;
}
.zvyazok-plytka {
  display: flex; flex-direction: column; gap: var(--p1);
  min-height: 76px; padding: var(--p4) var(--p5);
  background: var(--bilyi);
  border: 1px solid var(--linia); border-radius: var(--r-m);
  text-decoration: none;
  transition: transform var(--shvydko), border-color var(--shvydko), box-shadow var(--shvydko);
}
.zvyazok-plytka:hover {
  transform: translateY(-2px); border-color: var(--zel); box-shadow: var(--tin-1);
}
.zvyazok-plytka--holovna { background: var(--zel-dia); color: var(--krem); border-color: var(--zel-dia); }
.zvyazok-plytka__nazva { font-family: var(--shrift-z); font-weight: 700; font-size: 1.1rem; }
.zvyazok-plytka__pid { font-size: var(--drib); opacity: .78; }

.dovidka {
  display: grid; gap: var(--p4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: var(--p6);
}

/* ---------- 15б. Текстовые страницы: доставка, оферта, документы ----------
   Длинный текст подряд не читают — ищут глазами свой абзац. Поэтому
   заголовки с большим воздухом сверху, строка узкая, а спорное вынесено
   в рамку. */
/* Заголовок документа мельче, чем на витрине, и это не про вкус.
   Названия тут длинные и однословные («конфіденційності», «повернення»),
   а на витрине заголовки короткие. Общий --h1 даёт на экране 320 px
   32.8 px, и одно слово в 9.85 знакоместа занимает 323 px при доступных
   288 — документ уезжает вбок. Здесь нижняя граница 1.75rem = 28 px,
   то же слово выходит 276 px и влезает с запасом в 12 px. На большом
   экране 41.6 px против 65.6 — документу крупнее и не нужно: это текст,
   который читают, а не обложка. */
.stattya h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); }

.stattya > p,
.stattya > ul,
.stattya > ol,
.stattya > dl { max-width: 37em; }

.stattya__zag { margin-top: var(--p8); margin-bottom: var(--p4); }

/* Абзац, из-за которого обычно и возникают споры, — в рамке.
   Полоса слева, а не заливка на весь блок: сплошной янтарь спорил бы
   с кнопками, а они на странице главнее. */
.vazhlyvo {
  max-width: 37em;
  padding: var(--p4) var(--p5);
  background: var(--krem);
  border-left: 4px solid var(--burshtyn);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  font-size: .96rem;
}
.sekciya--tiho .vazhlyvo { background: var(--bilyi); }

.perelik {
  margin: 0 0 var(--p4); padding-left: var(--p5);
  display: grid; gap: var(--p3);
}
.perelik li { color: var(--siryi); }
.perelik strong, .vazhlyvo strong { color: var(--chornylo); }

/* Реквизиты списком «название — значение». Пары держатся вместе,
   поэтому не таблица: на 320 px таблица из двух колонок разъезжается. */
.rekvizyty {
  display: grid; gap: var(--p4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: var(--p5); max-width: 37em;
}
.rekvizyty dt {
  font-size: var(--drib); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--siryi);
}
.rekvizyty dd { margin: var(--p1) 0 0; }

/* Поле, которого заказчица ещё не дала. Видно, что оно не забыто,
   а ждёт данных, — и нам, и читателю. */
.utochnyuietsya { color: var(--siryi); font-style: italic; }

.stattya__onovleno {
  margin-top: var(--p8); padding-top: var(--p4);
  border-top: 1px solid var(--linia);
  color: var(--siryi); font-size: .84rem;
}

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

   Было: пять одинаковых столбцов со списками на плоском тёмном. Каждый
   отдельно правильный, вместе — ковёр подчёркнутых строк, в котором
   глазу не за что зацепиться, и «Документи» переносились на вторую
   строку одни, оставляя справа пустоту в пол-экрана.

   Стало: разговор, а не оглавление. Сверху полосой три обещания про
   доставку — за ними в подвал и спускаются. Ниже слева широкая подпись
   магазина со знаком и строкой стран, справа три узких столбца ссылок.
   Тёплое пятно света сверху слева даёт глубину, чтобы низ страницы не
   выглядел отрезанным куском картона. */
.pidval {
  position: relative;
  background: var(--tem); color: var(--krem);
  padding: var(--p7) 0 calc(var(--p8) + 76px);   /* место под нижнюю панель */
  /* Свет как от лампы над прилавком: одно мягкое пятно за подписью
     магазина. Это градиент, а не картинка — весит ноль. */
  background-image:
    radial-gradient(60% 70% at 16% 0%, rgba(127, 168, 130, .16), transparent 70%),
    radial-gradient(42% 55% at 92% 8%, rgba(192, 122, 34, .10), transparent 72%);
}
/* Тонкая кремовая линия по верхнему краю — подвал не обрывается от
   страницы, а отделяется от неё. */
.pidval::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--linia-tem);
}
@media (min-width: 900px) { .pidval { padding-bottom: var(--p8); } }

/* Три обещания про доставку. Точка-маркер — псевдоэлемент, а не символ
   в тексте: озвучка не должна читать «средняя точка».

   Полный селектор `.pidval ul.…` обязателен. Ниже стоит
   `.pidval ul { display: grid }`. С одним классом вес был меньше, с
   `ul.класс` — ровно такой же, а при равенстве побеждает тот, кто ниже
   в файле. Оба раза строка молча разворачивалась в столбик. Поймано на
   скриншоте 21.09.2026 — ровно тот случай из правил, когда CSS-классы
   гасят друг друга. */
.pidval ul.pidval__obitsyanky {
  margin: 0 0 var(--p7); padding: 0 0 var(--p6); list-style: none;
  border-bottom: 1px solid var(--linia-tem);
  display: flex; flex-wrap: wrap; gap: var(--p3) var(--p6);
}
.pidval__obitsyanky li {
  display: flex; align-items: center; gap: var(--p2);
  font-size: var(--mal); color: rgba(247, 239, 226, .82);
}
.pidval__obitsyanky li::before {
  content: ''; flex: none; width: 5px; height: 5px; border-radius: var(--r-k);
  background: var(--burshtyn-s);
}

.pidval__sitka {
  display: grid; gap: var(--p6) var(--p5);
  grid-template-columns: 1fr;
}
/* Подпись магазина шире колонок ссылок: в ней живой текст, а в них —
   короткие строки. Равные доли заставляли бы абзац ломаться каждые
   три слова. */
@media (min-width: 900px) {
  .pidval__sitka { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--p6); }
}
/* От планшета вниз: подпись во всю ширину, три списка рядом. */
@media (min-width: 560px) and (max-width: 899px) {
  .pidval__sitka { grid-template-columns: repeat(3, 1fr); }
  .pidval__pidpys { grid-column: 1 / -1; }
}
/* На телефоне четыре блока в столбик — это подвал длиной в два экрана.
   Списки ссылок ставим парой, подпись остаётся во всю ширину: там
   длинные строки. */
@media (max-width: 559px) {
  .pidval__sitka { grid-template-columns: 1fr 1fr; gap: var(--p5) var(--p4); }
  .pidval__pidpys { grid-column: 1 / -1; }
  .pidval__sitka > :nth-child(2) { grid-column: 1 / -1; }
}

/* Знак магазина. Кремовое кольцо вокруг круга — та же обводка, что в
   самом логотипе, только вынесенная наружу: на тёмном фоне без неё
   круг сливается с полотном. */
.pidval__znak {
  display: flex; align-items: center; gap: var(--p3);
  margin-bottom: var(--p4); text-decoration: none; color: inherit;
}
.pidval__znak img {
  width: 56px; height: 56px; flex: none; border-radius: var(--r-k);
  box-shadow: 0 0 0 1px rgba(247, 239, 226, .22);
}
.pidval__slova { display: flex; flex-direction: column; line-height: 1.05; }
.pidval__nazva {
  font-family: var(--shrift-z); font-size: 1.32rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--krem);
}
.pidval__misto {
  font-size: var(--drib); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(247, 239, 226, .62);
}
.pidval__pidpys p { max-width: 42ch; }

/* Строка стран — собственная деталь этого подвала. Набрана антиквой
   курсивом, как подпись от руки под этикеткой, и собирается из
   каталога: это правда о полке, а не украшение. */
.pidval__krayiny {
  margin-top: var(--p4); max-width: 30ch;
  font-family: var(--shrift-z); font-style: italic;
  font-size: 1.02rem !important; line-height: 1.55;
  color: var(--burshtyn-s) !important;
}
/* Хвост «й ще N країн» — это уже не название, а счёт. Поэтому он
   приглушён и набран тем же гротеском, что весь остальной текст. */
.pidval__krayiny span {
  font-family: var(--shrift-t); font-style: normal;
  font-size: var(--mal); color: rgba(247, 239, 226, .55);
}

.pidval h3 {
  font-family: var(--shrift-t); font-size: var(--drib); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  /* заголовки в подвале лежат на тёмном — берём осветлённый зелёный,
     обычный давал контраст 3.19 при размере 12 px */
  color: var(--zel-svit); margin-bottom: var(--p3);
}
.pidval p, .pidval li { font-size: var(--mal); color: rgba(247, 239, 226, .78); }
.pidval ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--p2); }
/* В колонках ссылок расстояние между строками задаёт сама высота ссылок,
   поэтому дополнительный зазор тут лишний — иначе список растягивается
   почти на экран. */
.pidval ul:has(a) { gap: 0; }
.pidval__hrafik {
  margin-top: var(--p3);
  font-size: var(--drib) !important; color: rgba(247, 239, 226, .58) !important;
}

/* Ссылки связи в подвале — это те самые кнопки «написать» и «позвонить».
   Сама строчка текста высотой 18 px, поэтому область нажатия растягиваем
   до 44 px изнутри ссылки, а не расстоянием между строками: так промах
   не открывает соседний мессенджер.

   Подчёркивания по умолчанию тут больше нет. Раньше стояло постоянное, и
   двадцать подчёркнутых строк подряд читались как рябь: глаз видел линии,
   а не слова. В списке, где ссылка — каждая строка, подчёркивание ничего
   не различает. Взамен ссылки светлее обычного текста (полный кремовый
   против .78), а линия появляется под курсором и при обходе клавиатурой. */
.pidval a {
  display: inline-flex; align-items: center;
  min-height: 44px; min-width: 44px;
  color: var(--krem);
  /* Подчёркивание рисуем text-decoration, а не рамкой снизу. Рамка идёт
     по всей ширине элемента, а элемент мы намеренно растянули до 44 px —
     под коротким «Viber» (34 px текста) торчал бы лишний хвост линии.
     text-decoration держится букв и на ширину не смотрит. */
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--shvydko), color var(--shvydko);
}
.pidval a:hover { text-decoration-color: var(--burshtyn-s); }
.pidval a:focus-visible { text-decoration-color: var(--krem); }
.pidval__znak:hover .pidval__nazva { color: var(--burshtyn-s); }

.pidval__niz {
  margin-top: var(--p7); padding-top: var(--p5);
  border-top: 1px solid var(--linia-tem);
  font-size: var(--drib); color: rgba(247, 239, 226, .62);
  display: flex; flex-wrap: wrap; gap: var(--p2) var(--p5);
  align-items: center; justify-content: space-between;
}
/* Подпись студии — единственная ссылка в этой строке, и она не должна
   кричать: название чуть светлее, «Розробка —» остаётся приглушённым. */
.pidval__avtor {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; color: inherit;
}
.pidval__avtor strong { color: rgba(247, 239, 226, .86); font-weight: 600; }
.pidval__avtor:hover strong { color: var(--burshtyn-s); }

/* ---------- 17. Нижняя панель (телефон) ---------- */
.panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; gap: var(--p2);
  padding: var(--p3) var(--p4) calc(var(--p3) + env(safe-area-inset-bottom));
  background: rgba(251, 246, 236, .94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--linia);
}
.panel .knopka { flex: 1; }
.panel__lichylnyk {
  min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center;
  background: var(--burshtyn); color: #20160A;
  border-radius: var(--r-k); font-size: .7rem; font-weight: 700;
}
@media (min-width: 900px) { .panel { display: none; } }

/* ---------- 18. Короткое сообщение ---------- */
.spovishchennya {
  position: fixed; left: 50%; bottom: 96px; z-index: 80;
  transform: translate(-50%, 14px);
  max-width: min(90vw, 380px);
  padding: var(--p3) var(--p5);
  background: var(--tem); color: var(--krem);
  border-radius: var(--r-m);
  font-size: var(--mal); text-align: center;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
  opacity: 0; pointer-events: none;
  transition: opacity var(--shvydko), transform var(--shvydko);
}
.spovishchennya[data-vydno] { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { .spovishchennya { bottom: 28px; } }

/* ---------- 19. «Додано в кошик» с миниатюрой ----------
   Живёт там же, где короткое сообщение, но это не сообщение, а
   маленькая карточка: фото, название, цена — и всё это ссылка на товар.
   Поэтому pointer-events включены (у обычного уведомления они выключены),
   и поэтому у неё есть крестик: то, что можно нажать, должно уметь
   закрываться руками, а не только по таймеру. */
.dodano {
  position: fixed; left: 50%; bottom: 96px; z-index: 85;
  width: min(92vw, 380px);
  display: flex; align-items: center; gap: var(--p3);
  padding: var(--p2) var(--p2) var(--p2) var(--p2);
  background: var(--bilyi);
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  box-shadow: var(--tin-2);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 14px);
  transition: opacity var(--shvydko), transform var(--shvydko);
}
.dodano[data-vydno] { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }

.dodano__foto {
  flex: none; width: 60px; height: 72px;
  border-radius: var(--r-m); overflow: hidden;
  background: var(--papir);
  display: block;
}
.dodano__foto picture { display: block; width: 100%; height: 100%; }
.dodano__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dodano__telo { flex: 1 1 auto; min-width: 0; }

/* Строчка-заголовок нарочно мелкая и капителью: она служебная,
   а главное в карточке — название товара и его фото. */
.dodano__shapka {
  margin: 0;
  font-size: var(--drib); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--zel-dia);
}
.dodano__nazva {
  margin-top: 2px;
  font-family: var(--shrift-z); font-size: .97rem; font-weight: 600;
  line-height: 1.25; color: var(--chornylo);
  text-decoration: none;
  /* длинные названия не должны разгонять карточку на три строки */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dodano__nazva:hover { color: var(--zel-dia); }
.dodano__cina {
  margin: 2px 0 0;
  font-family: var(--shrift-c); font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--drib); color: var(--siryi);
}

/* 44 px — правило для всего, что нажимают пальцем. Сам крестик мелкий,
   но зона вокруг него полная. */
.dodano__hrest {
  flex: none; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-k);
  color: var(--siryi); cursor: pointer;
  transition: background var(--shvydko), color var(--shvydko);
}
.dodano__hrest svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}
.dodano__hrest:hover { background: var(--papir); color: var(--chornylo); }

@media (min-width: 900px) {
  /* На широком экране нижняя панель скрыта, место внизу свободно.
     Уводим карточку в правый угол: по центру она перекрывает товар,
     на который человек как раз смотрит. */
  .dodano {
    left: auto; right: 28px; bottom: 28px;
    transform: translate(0, 14px);
  }
  .dodano[data-vydno] { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .dodano, .dodano__hrest { transition: none; }
}

/* ---------- 20. Картка замовлення і товарний чек ----------
   Одна страница работает в двух местах: на экране менеджера, когда он
   открыл ссылку из Telegram, и на бумаге, которая едет в коробке. На
   экране — крупно и с фото, чтобы собирать заказ по картинкам; на
   бумаге — узко, без фото и без интерфейса. Поэтому разметка одна, а
   правил печати внизу отдельный блок. */
.chek__pid {
  margin: 0;
  font-size: var(--drib); letter-spacing: .08em; text-transform: uppercase;
  color: var(--siryi);
}
.chek__nomer {
  margin: var(--p1) 0 0;
  font-size: clamp(2rem, 1.3rem + 3.4vw, 2.8rem); line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.chek__data { margin: var(--p2) 0 var(--p6); font-size: var(--mal); color: var(--siryi); }

/* Плашка «сума не зійшлася». Единственное красное пятно на карточке —
   именно поэтому его видно. Полоса слева, а не рамка вокруг: рамка
   спорила бы со списком позиций, который и так в рамках. */
.chek__pastka {
  margin: 0 0 var(--p6); padding: var(--p4) var(--p5);
  border-left: 4px solid #9B2C1E; border-radius: 0 var(--r-m) var(--r-m) 0;
  background: #FCEFEC; color: #6E2117;
  font-size: var(--mal); line-height: 1.5;
}

.chek__spysok {
  margin: 0 0 var(--p5); padding: 0; list-style: none;
  border-top: 1px solid var(--linia);
}

/* Строка позиции. На телефоне фото и название сверху, количество и
   сумма — второй строкой: четыре колонки на 320 px превращают
   «Панфорте сієнське» в столбик по букве. */
.pozyciya {
  display: grid; align-items: center;
  grid-template-columns: 64px 1fr auto;
  gap: var(--p2) var(--p4);
  padding: var(--p4) 0;
  border-bottom: 1px solid var(--linia);
}
.pozyciya__foto {
  width: 64px; height: 64px; overflow: hidden;
  border-radius: var(--r-s); background: var(--krem);
}
.pozyciya__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pozyciya__nazva { margin: 0; font-weight: 600; line-height: 1.3; }
.pozyciya__pid { margin: var(--p1) 0 0; font-size: var(--drib); color: var(--siryi); }
.pozyciya__kilkist {
  margin: 0; font-variant-numeric: tabular-nums; color: var(--siryi);
  grid-column: 2; text-align: left;
}
.pozyciya__suma {
  margin: 0; font-weight: 600; font-variant-numeric: tabular-nums;
  grid-column: 3; grid-row: 2; text-align: right; white-space: nowrap;
}
@media (min-width: 560px) {
  .pozyciya { grid-template-columns: 64px 1fr auto auto; }
  .pozyciya__kilkist { grid-column: 3; grid-row: 1; text-align: right; }
  .pozyciya__suma { grid-column: 4; grid-row: 1; min-width: 90px; }
}

.chek__razom {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--p4); margin: 0 0 var(--p2);
  font-family: var(--shrift-z); font-size: 1.15rem; font-weight: 700;
}
.chek__suma { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.chek__pryblyzno { margin: 0 0 var(--p6); font-size: var(--drib); color: var(--siryi); }

/* Покупцю — що буде далі. Одразу під номером: це перше, що людина
   хоче знати після «прийнято». */
.chek__dali {
  margin: var(--p4) 0 var(--p2);
  padding: var(--p3) var(--p4);
  border-left: 3px solid var(--zel-dia);
  background: rgba(83, 130, 86, .08);
  border-radius: var(--r-s);
  line-height: 1.5;
}

.chek__komentar {
  margin: 0 0 var(--p5); padding: var(--p4);
  border-left: 3px solid var(--burshtyn); border-radius: 0 var(--r-m) var(--r-m) 0;
  background: var(--krem); font-size: var(--mal);
}
.chek__komentar p { margin: 0; }
.chek__komentar-pid {
  margin: 0 0 var(--p1) !important;
  font-size: var(--drib); letter-spacing: .06em; text-transform: uppercase;
  color: var(--siryi);
}
.chek__knopky { display: grid; gap: var(--p3); margin-top: var(--p6); }
@media (min-width: 560px) { .chek__knopky { grid-template-columns: 1fr 1fr; } }

/* Шапка и подвал бумажного чека: на экране не нужны, там всё то же
   самое уже есть в заголовке страницы и в подвале сайта. */
.chek__druk, .chek__nyz { display: none; }

/* ---------- 21. Печать ----------
   Печатаем только товарный чек. Всё остальное — шапка, меню, подвал,
   нижняя панель с телефоном, кнопки — на бумаге либо бессмысленно,
   либо просто съедает тонер.

   Размеры тут в пунктах (pt), а не в rem и не в vw. Причина не
   вкусовая: vw на печати считается от ширины листа, и заголовок,
   который на экране 24 px, на бумаге вырастает до половины страницы.
   Один раз уже выросло — «Отримувач» занял треть листа. */
/* Поля листа — нуль, і це не недбалість. Браузер друкує свої написи
   (дату й заголовок угорі, адресу сторінки внизу) саме в полях листа.
   А адреса картки містить ключ менеджера: папір їде в коробці, і хто
   набере адресу з нього, той відкриє ім'я, телефон і адресу покупця.
   Немає полів — браузеру нікуди це друкувати. Відступи самого чека
   ті самі 14 × 12 мм, тільки задані зсередини (див. .chek нижче). */
@page { size: A4; margin: 0; }

@media print {
  /* .chek__pastka в печать не идёт: это служебная записка менеджеру
     («сверьте сумму»), а лист уезжает в коробке покупателю. */
  .shapka, .shtora, footer, [data-panel], .chek__knopky,
  .pozyciya__foto, .chek__komentar, .chek__pastka,
  .dodano, .spovishchennya, .vybir { display: none !important; }

  body { background: #fff; color: #000; font-size: 10pt; }
  /* Поля листа задаёт @page выше — свои отступы страницы убираем,
     иначе они складываются и чек уезжает к середине листа.
     Но не в самый ноль: замерено 20.09.2026 — сумма справа упиралась
     в край печатного поля ровно, запас 0 px. Пока в окне печати стоят
     поля «за умовчанням», всё хорошо: поля даёт @page. А если менеджер
     выберет «Поля: немає», гривня окажется в той полосе, которую
     принтер физически не печатает. Два миллиметра — страховка. */
  .sekciya { padding: 0 !important; }
  /* Колишні поля листа. Клонування потрібне для довгого чека: без нього
     відступ був би тільки вгорі першого аркуша й унизу останнього,
     а друга сторінка починалася б упритул до краю паперу. */
  .chek {
    padding: 14mm 12mm;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .obhvat { max-width: 100% !important; width: auto !important; padding: 0 2mm !important; }

  .chek__druk { display: block; margin-bottom: 10pt; padding-bottom: 6pt;
                border-bottom: 1pt solid #000; }
  .chek__druk-nazva { margin: 0; font-family: var(--shrift-z); font-size: 13pt; font-weight: 700; }
  .chek__druk-pid { margin: 2pt 0 0; font-size: 9pt; }

  .chek__pid { color: #000; font-size: 8pt; }
  .chek__nomer { font-size: 17pt; margin: 0; }
  .chek__data { color: #000; margin: 0 0 10pt; font-size: 9pt; }
  h2 { font-size: 11pt !important; margin: 10pt 0 4pt !important; }

  /* Строка чека в одну линию: товар — количество — сумма. Название и
     описание лежат в одной ячейке, поэтому колонок ровно три. */
  .chek__spysok { margin-bottom: 8pt; }
  .pozyciya {
    grid-template-columns: 1fr auto auto; gap: 0 10pt; padding: 4pt 0;
    align-items: start;
  }
  .pozyciya__nazva { font-size: 10pt; }
  .pozyciya__pid { color: #333; font-size: 8pt; }
  .pozyciya__kilkist {
    grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap;
    font-size: 10pt; color: #000;
  }
  .pozyciya__suma { grid-column: 3; grid-row: 1; font-size: 10pt; min-width: 0; }

  .chek__razom { font-size: 11pt; margin-bottom: 2pt; }
  .chek__suma { font-size: 13pt; }
  .chek__pryblyzno { color: #333; font-size: 8pt; margin-bottom: 8pt; }

  /* Заливку убираем: на экране она отделяет блок, на бумаге это просто
     серый прямоугольник ценой в тонер. */
  .rekvizyt { background: none; padding: 0; gap: 0 8pt; font-size: 9pt; }
  .rekvizyt dt { color: #333; }
  .rekvizyt dd { margin-bottom: 3pt; }

  .chek__nyz {
    display: block; margin-top: 12pt; padding-top: 6pt;
    border-top: 1pt solid #000; font-size: 8pt;
  }

  /* Позиция не должна разрываться между страницами: половина названия
     на одном листе, цена на другом — это не чек. */
  .pozyciya { break-inside: avoid; page-break-inside: avoid; }

  a { text-decoration: none; color: #000; }
}