@charset "UTF-8";
/* ==========================================================================
   KLESHNYA — оформление сайта
   --------------------------------------------------------------------------
   Направление: «Прилавок на Бессарабке». У магазина уже есть свой стиль —
   их печатный прайс-постер: тяжёлые красные заголовки, узкие заглавные
   буквы, отточия до цены. Мы не выдумываем стиль заново, а переносим их
   постер на экран. Чёрный здесь работает как дерево прилавка, красный —
   их фирменный (снят пипеткой с логотипа), тёплый белый — как мел на
   доске с ценами.

   Файл читается сверху вниз: сначала токены (цвета, шрифты, отступы),
   потом основа, потом блоки в том порядке, в каком они идут на странице.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ТОКЕНЫ. Ничего «на глаз»: любой цвет, отступ и радиус берётся отсюда.
   -------------------------------------------------------------------------- */
:root {
  /* --- Цвета ---------------------------------------------------------
     Заказчик просил красно-чёрный. Поэтому чёрный здесь тёплый, с
     красным уклоном: в нём чуть больше красного, чем синего. Разница с
     обычным серо-чёрным на глаз почти незаметна, но рядом с фирменным
     красным она решает — на синеватом чёрном красный выглядит дешёвым
     и кричащим, на тёплом сидит спокойно.

     Красный на сайте делает ровно три вещи: логотип, главная кнопка и
     одна тонкая черта. Больше — и получается распродажа, а не прилавок
     с крабом. Цены поэтому набраны мелом-белым: так дороже и, кстати,
     втрое лучше читается. */
  --nich:       #0B0809;   /* ночь — фон страницы */
  --prylavok:   #14100F;   /* прилавок — карточки, шапка, поднятые блоки */
  --prylavok-2: #1E1817;   /* он же под курсором */
  --krov:       #4A0C10;   /* тёмная кровь — крупные заливки и подложки */
  --chervonyy:  #DA222C;   /* фирменный красный, снят пипеткой с логотипа */
  --krejda:     #F4EFE7;   /* мел — весь основной текст, 17:1 на ночи */

  /* Служебные оттенки. */
  --lid:        #97A4AB;   /* лёд — подписи и второстепенное, 7,4:1 */
  /* Тот же лёд, но приглушённый: разделители и служебные значки, которым
     нужно уйти на второй план, а читаться всё равно обязаны. 4,85:1 —
     проходит норму для мелкого текста. Ниже опускать нельзя. */
  --lid-tykhyy: #737F86;
  /* Фирменный красный на чёрном даёт всего 4:1 — для мелкого текста мало.
     Там, где красным набрано что-то мельче заголовка, берём этот
     осветлённый вариант: у него 5,9:1. Не путать их местами. */
  --chervonyy-tekst: #F0555C;
  --mezha:      rgba(244, 239, 231, .13);  /* тонкая белая окантовка */
  --mezha-yaskrava: rgba(244, 239, 231, .28);

  /* Старые имена цветов. Оставлены, чтобы не переписывать разом весь
     файл: правки идут блок за блоком, и до всех мест руки ещё не дошли. */
  --vugillya: var(--nich);
  --degot:    var(--prylavok);
  --prygluh:  var(--lid);

  /* --- Шрифты --------------------------------------------------------
     Forum — заголовки, названия товаров и цены. Это античная капитель:
     буквы построены по римской надписи на камне, тонкие волосяные штрихи
     резко спорят с толстыми. Именно эта разница толщин и читается как
     «дорого» — у прежней Alegreya штрих почти ровный, и от этого она
     выглядела как обычный текстовый шрифт, увеличенный до заголовка.

     ВАЖНО: у Forum есть только одно начертание — 400. Никаких 700 и 800
     ему ставить нельзя: браузер тогда рисует поддельный жир, размазывая
     тонкие штрихи, и вся ценность гарнитуры пропадает. Разницу между
     заголовком и подзаголовком делаем размером и разрядкой, а не жиром.

     Golos Text — весь текст и интерфейс. Спокойный гротеск с полной
     кириллицей и «ї», у него есть все веса от 400 до 900, так что весь
     служебный жир живёт здесь. Никакого Inter.

     ПОПРАВКА к тому, что тут было написано раньше. Прежний комментарий
     утверждал, будто у Alegreya все цифры одной ширины. Это неправда, я
     проверил замером: ширины знаков 0–9 расходятся почти на четверть.
     Ни у Alegreya, ни у Forum, ни у Golos Text моноширинных цифр нет, и
     tabular-nums на них не действует. Поэтому колонка цен держится не
     шрифтом, а вёрсткой: цена прижата к правому краю строки. */
  --shryft-zagolovok: 'Forum', 'Times New Roman', serif;
  --shryft-tekst:     'Golos Text', system-ui, sans-serif;
  --shryft-cyfry:     var(--shryft-tekst);   /* подписи интерфейса */
  /* Цены — тем же Forum, что и заголовки: в меню ресторана цена набрана
     той же гарнитурой, что название блюда, и выглядит частью списка, а
     не ценником из супермаркета. */
  --shryft-cina:      'Forum', 'Times New Roman', serif;

  /* Шкала отступов, шаг 4px. */
  --v1: .25rem;  --v2: .5rem;   --v3: .75rem;  --v4: 1rem;
  --v5: 1.5rem;  --v6: 2rem;    --v7: 3rem;    --v8: 4rem;
  --v9: 6rem;    --v10: 8rem;

  --shyryna: 1200px;      /* предел ширины содержимого */
  /* Форма. Скруглений на сайте больше нет вообще — ни 2px, ни 6px.
     Полумера как раз и читалась дёшево: 6px — это «скругление, которое
     никто не выбирал», угол вроде и не острый, и не круглый. Дорогая
     полиграфия режется точно по линии, поэтому все прямоугольники здесь
     прямые. Круглыми остаются только те элементы, которые круглые по
     сути: кнопка-иконка, «+/−» у количества. Им — 50%, ровный круг.
     Токен оставлен нулевым, а не удалён: так видно, что это решение,
     и его можно поменять в одном месте, если заказчик передумает. */
  --radius: 0;

  /* Движение. Одна длительность и одна кривая на весь сайт, иначе
     анимации живут вразнобой и это заметно. */
  --plavno: 220ms cubic-bezier(.22, .61, .36, 1);

  --shar-shapka: 100;
  --shar-menyu: 200;
}

/* --------------------------------------------------------------------------
   2. ОСНОВА
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Шапка прилипшая, поэтому якорь без отступа встаёт под неё */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--vugillya);
  color: var(--krejda);
  font-family: var(--shryft-tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Все заголовки — Forum и только вес 400, другого у него нет. Раньше тут
   стояло 800, и с Forum это дало бы поддельный жир: браузер обводит буквы
   по контуру, тонкие штрихи толстеют, и вся разница толщин, ради которой
   шрифт и взят, исчезает.
   Разрядка положительная, а не отрицательная. Forum нарисован по римской
   надписи, где буквы стояли свободно; сжимать его — значит спорить с
   рисунком. Минус, который был здесь раньше, подходил плотной Alegreya. */
h1, h2, h3, h4 {
  font-family: var(--shryft-zagolovok);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--v4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; cursor: pointer; }

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

/* Видимый след от клавиатуры. Убирать его нельзя: без него сайтом
   невозможно пользоваться без мыши. */
:focus-visible {
  outline: 2px solid var(--chervonyy-tekst);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* Для тех, у кого в системе выключены анимации. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.obgortka {
  width: 100%;
  max-width: var(--shyryna);
  margin-inline: auto;
  padding-inline: var(--v5);
}

/* Только для читалок с экрана: подписи, которые не нужны глазу. */
.lyshe-dlya-chytachiv {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Ссылка «перейти до вмісту» — первое, на что попадает Tab. */
.propustyty {
  position: absolute; top: var(--v3); left: var(--v3);
  z-index: 999; padding: var(--v3) var(--v4);
  background: var(--chervonyy); color: #fff;
  font-family: var(--shryft-cyfry); font-weight: 400;
  text-transform: uppercase; letter-spacing: .08em;
  transform: translateY(-200%);
}
.propustyty:focus { transform: translateY(0); }

/* Просьба к шрифту нарисовать цифры одной ширины, чтобы сумма не «плясала»
   при пересчёте. Честно: ни Forum, ни Golos Text такой набор цифр в себе
   не несут, и браузер эту строку для них просто не выполнит. Оставляю её
   потому, что вреда нет, а системный запасной шрифт (если гугловские не
   догрузятся) моноширинные цифры обычно умеет. Настоящее выравнивание
   держит вёрстка: суммы прижаты к правому краю. */
.cyfry { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* --------------------------------------------------------------------------
   3. ПОВТОРЯЮЩИЕСЯ ЭЛЕМЕНТЫ
   -------------------------------------------------------------------------- */

/* Надпись над заголовком: узкая, разряженная, с красной чертой слева. */
.nadpys {
  display: flex; align-items: center; gap: var(--v3);
  font-family: var(--shryft-cyfry);
  font-size: .8125rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--prygluh);
  margin-bottom: var(--v4);
}
.nadpys::before {
  content: ''; width: 2rem; height: 2px;
  background: var(--chervonyy); flex: none;
}

/* Кнопки.
   Высота 3,25rem (52px) — заметно больше обязательных 44: кнопка на
   дорогом сайте должна выглядеть уверенно, а не «лишь бы палец попал».
   Буквы разряжены и без заглавных-капсом в мелком размере: капсом
   набрано только действие, и этого хватает.

   Главная кнопка на сайте одна на экран. Красная заливка — единственное
   место, кроме логотипа, где красный занимает площадь. */
.knopka {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--v2);
  min-height: 3.25rem; padding: var(--v3) var(--v6);
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--shryft-tekst); font-size: .9375rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  transition: background var(--plavno), border-color var(--plavno),
              color var(--plavno), transform var(--plavno),
              box-shadow var(--plavno);
}
/* Нажатие: кнопка чуть уходит вниз. 1px, не больше — это должно
   ощущаться пальцем, а не бросаться в глаза. */
.knopka:active { transform: translateY(1px); }

.knopka--golovna {
  background: var(--chervonyy); color: #fff; border-color: var(--chervonyy);
  /* Мягкое красное свечение снизу: на чёрном фоне обычная тень не видна,
     а кнопке нужен объём, иначе она лежит на фоне плоской наклейкой. */
  box-shadow: 0 6px 24px -8px rgba(218, 34, 44, .55);
}
.knopka--golovna:hover {
  background: #EE3039; border-color: #EE3039;
  box-shadow: 0 10px 30px -8px rgba(218, 34, 44, .7);
}

/* Вторая кнопка — тонкая белая окантовка, как просил заказчик.
   Она не спорит с главной: у неё нет заливки, только контур. */
.knopka--obvid {
  background: transparent; color: var(--krejda);
  border-color: var(--mezha-yaskrava);
}
.knopka--obvid:hover { border-color: var(--krejda); background: rgba(244,239,231,.07); }

.knopka[disabled] { opacity: .4; cursor: not-allowed; }
.knopka[disabled]:active { transform: none; }

/* Знак-клешня и полный логотип. Оба лежат картинками, но подставляются
   маской, а не через <img>. Причина: картинку нельзя перекрасить, а
   логотип у нас то красный на чёрном, то белый на красном. Маска
   красится обычным цветом текста, поэтому цвет задаётся в одном месте.

   Почему картинка, а не вектор: заказчик дал jpeg, в котором сам логотип
   занимает 583x194 пикселя, и внутри клешни нарисованы белые линии
   толщиной в один пиксель. Обводка по контуру такие линии рвёт — кулак
   превращается в пятно. Подробности в tools/make_logotyp.py.
   Оттуда же пропорции: менять их нельзя, логотип сплющит. */
.znak {
  display: block;
  aspect-ratio: 212 / 390;
  background-color: currentColor;
  -webkit-mask: url('img/znak.png') center / contain no-repeat;
          mask: url('img/znak.png') center / contain no-repeat;
}

/* Заглушка вместо фото: пока снимков нет, показываем знак на тёмном.
   Лучше честная заглушка, чем чужая картинка из интернета. */
.zaglushka {
  display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(218,34,44,.16), transparent 60%),
    var(--degot);
  color: rgba(242,237,228,.16);
  border: 1px solid var(--mezha);
}
.zaglushka .znak { width: 22%; max-width: 64px; }
/* Заглушка всегда занимает всё гнездо под фото, иначе рамка гнезда
   останется пустой, а знак повиснет в углу. */
.kartka__foto > .zaglushka,
.tovar__foto > .zaglushka,
.koshyk__foto > .zaglushka { width: 100%; height: 100%; border: 0; }
.koshyk__foto > .zaglushka .znak { width: 34%; }

/* --------------------------------------------------------------------------
   4. ШАПКА
   -------------------------------------------------------------------------- */
.shapka {
  position: sticky; top: 0; z-index: var(--shar-shapka);
  background: rgba(17, 16, 19, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--mezha);
}

.shapka__ryad {
  display: flex; align-items: center; gap: var(--v5);
  min-height: 4.5rem;
}

/* Логотип: знак-клешня + слово KLESHNYA. Заказчик просил, чтобы
   брендовое название было обязательно, не только значок. */
/* min-height, а не padding: логотип стоит в ряду с кнопками, и если
   растить его отступами, ряд разъедется. Высота в 44 px нужна потому,
   что логотип — это ещё и ссылка «домой», по ней жмут. */
.logo {
  display: flex; align-items: center;
  margin-right: auto; min-height: 2.75rem;
}
/* Настоящий логотип заказчика целиком: слово вместе с клешнёй, где
   клешня стоит на месте буквы «Y». Раньше здесь слово было набрано
   шрифтом, а клешня приставлена сбоку — получался похожий логотип,
   но не их.

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

   Почему картинкой, а не эффектом в css. Обводку в браузере делают либо
   тенью по кругу, либо копией фигуры покрупнее. Тень даёт размытый
   ореол вместо контура, а копия растёт от центра, и у «K» слева обводка
   выходит толще, чем у «A» справа. Ровный контур считается по самой
   картинке — этим занят tools/make_logotyp.py.

   Два адреса подряд — не опечатка. Сначала обычный png для браузеров,
   которые не понимают image-set, следом webp: он втрое легче (19 КБ
   против 51). Качается ровно один файл, тот, который браузер понял.

   Ширину держим в пикселях, а не в процентах: исходник маленький, и
   шире 290px он начинает мылить (см. tools/make_logotyp.py). */
.logo__znak {
  width: 128px; height: 43px;
  background: url('img/logotyp-obvid.png') left center / contain no-repeat;
  background-image: image-set(
    url('img/logotyp-obvid.webp') type('image/webp'),
    url('img/logotyp-obvid.png')  type('image/png'));
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity var(--plavno);
}
/* Под курсором логотип чуть притухает. Перекрашивать его нельзя — он
   двухцветный и фирменный; ему достаточно показать, что он нажимается. */
.logo:hover .logo__znak { opacity: .82; }

@media (min-width: 700px) {
  .logo__znak { width: 150px; height: 50px; }
}

/* Самые узкие телефоны (320 px). Логотип 128 px, три круглые кнопки по
   44 px и отступы по 24 px в сумме дают 324 px — на четыре пикселя
   больше экрана. Уезжала при этом кнопка меню, то есть край экрана
   срезал именно ту кнопку, которой открывают каталог. Кнопки трогать
   нельзя: 44 px — это минимальный размер, в который попадает палец.
   Поэтому ужимаем то, что можно ужать без потерь: отступы и логотип. */
@media (max-width: 359px) {
  .obgortka { padding-inline: var(--v4); }
  .shapka__ryad { gap: var(--v3); }
  .logo__znak { width: 112px; height: 38px; }
}

.shapka__navigaciya { display: none; gap: var(--v6); }
.shapka__posylannya {
  font-family: var(--shryft-cyfry); font-size: .875rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--prygluh);
  padding: var(--v2) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--plavno), border-color var(--plavno);
}
.shapka__posylannya:hover { color: var(--krejda); border-color: var(--chervonyy); }

.shapka__dii { display: flex; align-items: center; gap: var(--v2); }

/* Кнопки-иконки в шапке — единственные круглые элементы на сайте.
   Круг тут не украшение: у обеих кнопок внутри значок, а у значка нет
   ни длины строки, ни направления чтения, которые задавали бы форму
   рамке. Круг — самая честная рамка для точки нажатия. Всё остальное на
   сайте прямоугольное и прямоугольным остаётся. */
.knopka-znachok {
  display: inline-flex; align-items: center; justify-content: center;
  /* flex: none — иначе на 320 px шапка ужимала кнопку до 42 px, и до
     нижней границы в 44 не хватало двух. Ширина задана, но flex имеет
     право её отобрать, если ряду не хватает места. */
  flex: none;
  width: 2.75rem; height: 2.75rem;
  background: transparent;
  border: 1px solid var(--mezha-yaskrava);
  border-radius: 50%;
  color: var(--krejda);
  transition: border-color var(--plavno), background var(--plavno),
              color var(--plavno);
}
.knopka-znachok:hover { border-color: var(--krejda); background: rgba(242, 237, 228, .06); }
.knopka-znachok svg { width: 1.125rem; height: 1.125rem; }

/* Кнопка корзины. Счётчик раньше стоял рядом со значком, и от этого
   кнопка была не круглой, а овальной. Теперь это отдельный кружок в
   правом верхнем углу — как значок непрочитанного в телефоне: цифра
   видна, а форма кнопки не зависит от того, одна там позиция или
   двенадцать. */
.koshyk-knopka { position: relative; }
.koshyk-knopka__lichylnyk {
  position: absolute; top: -.25rem; right: -.25rem;
  display: grid; place-items: center;
  min-width: 1.25rem; height: 1.25rem; padding-inline: .25rem;
  border-radius: 50%;
  background: var(--chervonyy); color: #fff;
  font-family: var(--shryft-cyfry); font-size: .6875rem; font-weight: 600;
  line-height: 1;
}
/* Пустая корзина: кружок не нужен вовсе — ноль ничего не сообщает, а
   красное пятно в шапке зря тянет взгляд. */
.koshyk-knopka[data-porozhniy='true'] .koshyk-knopka__lichylnyk { display: none; }
.koshyk-knopka:not([data-porozhniy='true']) { border-color: var(--chervonyy); }

/* Выпадающее меню на телефоне. */
.menyu {
  display: none;
  border-top: 1px solid var(--mezha);
  background: var(--vugillya);
}
.menyu[data-vidkryto='true'] { display: block; }
.menyu__spysok { list-style: none; margin: 0; padding: var(--v3) 0 var(--v5); }
.menyu__posylannya {
  display: block; padding: var(--v4) 0;
  border-bottom: 1px solid var(--mezha);
  font-family: var(--shryft-cyfry); font-size: 1.0625rem;
  text-transform: uppercase; letter-spacing: .1em;
}
.menyu__posylannya:hover { color: var(--chervonyy-tekst); }

@media (min-width: 900px) {
  .shapka__navigaciya { display: flex; }
  .menyu-knopka, .menyu { display: none !important; }
}

/* --------------------------------------------------------------------------
   5. ПЕРВЫЙ ЭКРАН
   -------------------------------------------------------------------------- */
/* Первый экран ведёт фотографией, а не заливкой: продукт здесь и есть
   главный довод. Раньше снимок стоял в рамке справа, рядом с текстом —
   получалась «картинка к статье». Теперь он лежит фоном во всю ширину:
   краб на льду и есть то, чем магазин торгует, и первое, что человек
   должен увидеть.

   Снимок отзеркален (см. tools/, файл готовился один раз): в оригинале
   краб сидит слева, ровно там, где идёт заголовок. Отражение уводит его
   вправо и освобождает тёмный сланец под текст — подгонять ничего не
   пришлось, кадр сам так устроен.

   isolation + отрицательный z-index: фото и затемнение лежат под текстом,
   но над собственным фоном секции. Без isolation они провалились бы под
   фон страницы и их не было бы видно вовсе. */
.geroy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--mezha);
  background: var(--nich);
  /* Сверху ровно столько, чтобы текст начинался ниже снимка, а не поверх
     краба. min() — чтобы на планшете отступ не разрастался до полэкрана. */
  padding-block: min(66vw, 22rem) var(--v8);
}

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

   Два background-image подряд — это не ошибка. Первый (jpg) понимают все,
   второй (webp, вдвое легче) перекрывает его там, где браузер умеет
   image-set. Скачивается всё равно только один файл — тот, что победил. */
.geroy::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; z-index: -2;
  aspect-ratio: 4 / 3;
  max-height: 26rem;
  background-image: url('img/geroy-mob.jpg');
  background-image: image-set(url('img/geroy-mob.webp') type('image/webp'),
                              url('img/geroy-mob.jpg')  type('image/jpeg'));
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 52%, transparent 92%);
}

/* Подложка под шапку. Шапка приклеена к верху и едет по снимку; в самом
   тёмном месте кадра логотип виден, а над светлым паром — уже нет. */
.geroy::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 9rem; z-index: -1;
  background: linear-gradient(to bottom, rgba(11, 8, 9, .78), transparent);
}

.geroy__sitka { display: grid; gap: var(--v7); align-items: center; }

.geroy__vmist { position: relative; }

/* Заголовок. Прописными, потому что Forum и нарисован как надпись
   прописными — строчные у него вторичны. Разрядка обязательна: прописные
   без неё слипаются в частокол, а у античной капители между буквами
   должен быть воздух, иначе она читается как дешёвая имитация. */
.geroy__zagolovok {
  font-size: clamp(2.75rem, 9.5vw, 5.75rem);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}
/* Вторая строка — не второй заголовок, а подпись под ним. Раньше её
   отделял вес (900 против 400), но у Forum один вес, и разницу теперь
   держат размер и разрядка. Так даже вернее: получается как на вывеске —
   крупное имя и тихая строчка под ним.
   Мелом, а не красным: красным крупно на чёрном кричит и забирает
   внимание, которое должно достаться фотографии и кнопке. */
.geroy__akcent {
  display: block;
  margin-top: var(--v3);
  color: var(--krejda);
  font-size: clamp(1.0625rem, 2.8vw, 1.625rem);
  letter-spacing: .22em;
}

.geroy__lid {
  margin-top: var(--v5);
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
  color: var(--lid);
  max-width: 32rem;
}

.geroy__knopky {
  display: flex; flex-wrap: wrap; gap: var(--v3);
  margin-top: var(--v6);
}

/* На широком экране снимок разворачивается на всю секцию, а текст
   ложится на него слева — там, где в кадре тёмный сланец. */
@media (min-width: 900px) {
  .geroy {
    display: grid; align-content: center;
    min-height: 40rem;
    padding-block: var(--v9);
  }
  .geroy::before {
    inset: 0;
    aspect-ratio: auto; max-height: none;
    background-image: url('img/geroy.jpg');
    background-image: image-set(url('img/geroy.webp') type('image/webp'),
                                url('img/geroy.jpg')  type('image/jpeg'));
    background-position: right center;
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* Здесь затемнение делает всю работу: слева почти глухое, чтобы
     заголовок читался как по чёрному, к середине сходит на нет и краба
     видно в полную силу. Справа снова чуть темнее — иначе снимок
     обрывается о край экрана. Второй слой гасит верх (под шапку) и низ
     (стык со следующим блоком). */
  .geroy::after {
    inset: 0; height: auto;
    background:
      linear-gradient(to right,
        var(--nich) 0%, rgba(11, 8, 9, .95) 38%, rgba(11, 8, 9, .62) 52%,
        rgba(11, 8, 9, .14) 72%, rgba(11, 8, 9, .02) 88%,
        rgba(11, 8, 9, .4) 100%),
      linear-gradient(to bottom,
        rgba(11, 8, 9, .6) 0%, transparent 20%,
        transparent 68%, var(--nich) 100%);
  }
  /* Одна колонка: вторая была под фото, а фото теперь под всем сразу.
     36rem — это те самые 60–70 знаков в строке. */
  .geroy__sitka { grid-template-columns: minmax(0, 36rem); }
}

/* --------------------------------------------------------------------------
   6. ПОЛОСА ДОВЕРИЯ
   -------------------------------------------------------------------------- */
/* Три факта под первым экраном: где мы стоим, куда возим, кому продаём.
   Заголовок набран Forum, а не заглавными без засечек — с засечками это
   читается как строка из журнала, а заглавными выглядело как «наши
   преимущества» из шаблона. Ни иконок, ни галочек: у дорогой лавки
   достаточно самих фактов. */
.dovira { border-bottom: 1px solid var(--mezha); }
.dovira__sitka {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
}
.dovira__punkt {
  padding: var(--v5) 0;
  border-bottom: 1px solid var(--mezha);
}
.dovira__punkt:last-child { border-bottom: 0; }
.dovira__nazva {
  font-family: var(--shryft-zagolovok);
  font-size: 1.5rem; font-weight: 400; line-height: 1.2;
  letter-spacing: .01em;
  margin-bottom: var(--v2);
}
.dovira__prymitka {
  color: var(--lid); font-size: .9375rem; line-height: 1.5;
  max-width: 22rem;
}

@media (min-width: 800px) {
  .dovira__sitka { grid-template-columns: repeat(3, 1fr); }
  .dovira__punkt {
    padding: var(--v7) var(--v6);
    border-bottom: 0; border-left: 1px solid var(--mezha);
  }
  .dovira__punkt:first-child { padding-left: 0; border-left: 0; }
  .dovira__punkt:last-child { padding-right: 0; }
}

/* --------------------------------------------------------------------------
   7. КАТАЛОГ
   -------------------------------------------------------------------------- */
.katalog { padding-block: var(--v8); }

.katalog__shapka { margin-bottom: var(--v6); }
.katalog__ryad {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--v3) var(--v5);
}
.katalog__zagolovok { font-size: clamp(2rem, 6vw, 3.25rem); text-transform: uppercase; }
.katalog__lichylnyk {
  margin: 0;
  font-size: .8125rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--lid);
  white-space: nowrap;
}

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

   Кадр вертикальный, 3:4. Не квадрат и тем более не горизонталь: в двух
   столбцах на телефоне плитка шириной около 165 px, и горизонтальный кадр
   стал бы полоской в 95 px высотой, где краб превращается в оранжевое
   пятно. Вертикаль даёт еде встать в кадр целиком.
   3:4 выбрано ещё и потому, что ровно эта пропорция нужна снимку в шапке
   раздела, — значит, на оба места хватает одного файла. */
.plytky {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--v5) var(--v3);
}
.plytka { display: block; }
.plytka__foto {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--prylavok);
  border-radius: var(--radius);
}
.plytka__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 500ms cubic-bezier(.22, .61, .36, 1);
}
/* Снимок чуть наезжает под курсором. Единственное движение на плитке:
   тени и подъёмы тут были бы лишними — карточка и так поднята снимком. */
.plytka:hover .plytka__foto img { transform: scale(1.04); }
.plytka__foto > .zaglushka { width: 100%; height: 100%; border: 0; }

.plytka__pidpys { padding-top: var(--v3); }
.plytka__nazva {
  font-size: clamp(1rem, 3.6vw, 1.1875rem);
  line-height: 1.25;
  text-transform: uppercase; letter-spacing: .05em;
  transition: color var(--plavno);
}
.plytka:hover .plytka__nazva { color: var(--chervonyy-tekst); }
.plytka__kilkist {
  display: block; margin-top: var(--v1);
  font-family: var(--shryft-tekst);
  font-size: .6875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--lid);
}

@media (min-width: 700px) {
  .plytky { grid-template-columns: repeat(3, 1fr); gap: var(--v6) var(--v4); }
}
@media (min-width: 1000px) {
  /* Четыре столбца — это два ровных ряда по четыре. Восемь плиток делятся
     на четыре без остатка, а на три — нет: последний ряд остался бы с
     двумя плитками и дырой. */
  .plytky { grid-template-columns: repeat(4, 1fr); }
}

/* --- Шапка страницы раздела ------------------------------------------- */
/* Название стоит РЯДОМ со снимком, а не поверх него: снимки присылает
   заказчик, и какими они будут по свету — заранее неизвестно. Белый
   заголовок поверх светлого кадра читаться перестаёт. */
.rozdil-shapka {
  display: grid; gap: var(--v5);
  margin-bottom: var(--v6);
}
.rozdil-shapka__foto {
  /* На телефоне снимок идёт во всю ширину, а высота задана долей экрана.
     Пропорция 3:4 здесь намеренно не задана: вертикальный кадр во всю
     ширину телефона — это больше 440 px высоты, и название раздела
     уезжает за нижний край. Человек открыл «Ікру», а видит одну картинку
     и не понимает, туда ли попал. Файл остаётся вертикальным, кадрирует
     его object-fit: cover. На широком экране, где снимок стоит сбоку от
     текста, пропорция 3:4 возвращается. */
  height: 42vh;
  overflow: hidden;
  background: var(--prylavok);
  border-radius: var(--radius);
}
.rozdil-shapka__foto img { width: 100%; height: 100%; object-fit: cover; }
.rozdil-shapka__foto > .zaglushka { width: 100%; height: 100%; border: 0; }

.rozdil-shapka__nazva {
  font-size: clamp(2rem, 7vw, 3.5rem);
  text-transform: uppercase; letter-spacing: .03em;
}
.rozdil-shapka__lid {
  margin: var(--v4) 0 0; color: var(--lid);
  font-size: 1.0625rem; max-width: 34rem;
}
.rozdil-shapka__kilkist {
  margin: var(--v4) 0 0;
  font-size: .75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--lid);
}

@media (min-width: 800px) {
  .rozdil-shapka {
    grid-template-columns: 22rem 1fr;
    gap: var(--v7);
    align-items: center;
  }
  .rozdil-shapka__foto { height: auto; aspect-ratio: 3 / 4; }
}

/* --- Лента разделов ---------------------------------------------------
   Все восемь разделов одной строкой, текущий подсвечен. На телефоне
   прокручивается вбок, и скрипт подтягивает текущий в видимую часть —
   иначе шестой раздел из восьми оказывается за краем экрана и непонятно,
   где ты находишься. */
.lenta {
  margin-bottom: var(--v6);
  border-top: 1px solid var(--mezha);
  border-bottom: 1px solid var(--mezha);
  /* Лента идёт во всю ширину экрана, а не по ширине текста: обрезанное у
     самого края слово — единственный честный намёк, что там есть ещё. */
  margin-inline: calc(var(--v5) * -1);
}
.lenta__spysok {
  list-style: none; margin: 0;
  padding: var(--v2) var(--v5);
  display: flex; gap: var(--v2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lenta__spysok::-webkit-scrollbar { display: none; }

.lenta__punkt {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding-inline: var(--v4);
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: .875rem; letter-spacing: .02em;
  color: var(--lid);
  transition: color var(--plavno), border-color var(--plavno);
}
.lenta__punkt:hover { color: var(--krejda); border-color: var(--mezha); }
/* Где я сейчас. Обводка, а не заливка: залитый красным пункт читался бы
   как кнопка, а это не кнопка — это отметка на карте. */
.lenta__punkt[aria-current='page'] {
  color: var(--krejda);
  border-color: var(--chervonyy);
}

/* --- Прайс-лист раздела: список с отточиями --- */
.prays { list-style: none; margin: 0; padding: 0; }

.prays__ryadok { border-bottom: 1px solid var(--mezha); }
.prays__ryadok:first-child { border-top: 1px solid var(--mezha); }

.prays__posylannya {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: var(--v2) var(--v3);
  padding: var(--v4) var(--v3);
  margin-inline: calc(var(--v3) * -1);
  transition: background var(--plavno);
}
.prays__posylannya:hover { background: rgba(244, 239, 231, .04); }
.prays__posylannya:hover .prays__tochky { border-bottom-color: var(--chervonyy); }

/* Название позиции — той же гарнитурой, что и цена. Раньше тут стоял
   жирный гротеск, а справа серифная цифра, и строка выглядела склеенной
   из двух разных бумаг. В меню ресторана блюдо и цена всегда набраны
   одним шрифтом — это и делает список списком, а не таблицей. */
.prays__nazva {
  font-family: var(--shryft-zagolovok);
  /* На телефоне буквы и разрядка мельче: «Клешня королівського краба»
     прописными с широкой разрядкой занимала там три строки, и список
     переставал быть списком. */
  font-size: clamp(1rem, 3.6vw, 1.1875rem); font-weight: 400;
  line-height: 1.25;
  text-transform: uppercase; letter-spacing: .05em;
  transition: color var(--plavno);
}
/* Пометка хита. Была красной плашкой — но в крабовом разделе хитов три из
   восьми, и три плашки подряд превращали список в ёлку. Осталось просто
   слово красным: заметно, когда ищешь глазами, и не спорит с ценой. */
.prays__hit {
  color: var(--chervonyy-tekst);
  font-size: .625rem; font-weight: 700; letter-spacing: .16em;
}

.prays__korotko {
  grid-column: 1 / -1;
  color: var(--lid); font-size: .875rem; line-height: 1.4;
  margin-top: calc(var(--v1) * -1);
}

/* Цена — мелом-белым, а не красным. Красная цена читается как «скидка» —
   это язык супермаркета, а у нас краб по 6000 за килограмм. Заодно
   контраст вырос с 4:1 до 17:1.
   text-align: right держит колонку: у Forum цифры разной ширины (0 шире
   1 почти в полтора раза), поэтому выровнять их по левому краю нельзя —
   правый край единственный, на котором они сойдутся. */
.prays__cina {
  grid-row: 1 / 2; grid-column: 2 / 3;
  font-family: var(--shryft-cina); font-weight: 400;
  /* На узком экране цена уступает место названию: на 320 px крупная цифра
     съедала столько, что «Корюшка ікряна» переставала помещаться в строку. */
  font-size: clamp(1.25rem, 5.5vw, 1.625rem); line-height: 1;
  color: var(--krejda);
  white-space: nowrap; text-align: right;
}
.prays__odynycya {
  grid-row: 1 / 2; grid-column: 3 / 4;
  font-family: var(--shryft-tekst);
  font-size: .6875rem; font-weight: 400;
  color: var(--lid); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}

/* Отточие от названия до цены — как в их бумажном прайсе. Рисуем его
   только там, где хватает ширины: на телефоне цена уходит вправо и
   точки превращаются в мусор. */
@media (min-width: 700px) {
  .prays__posylannya {
    grid-template-columns: auto 1fr auto auto;
    align-items: baseline;
  }
  .prays__nazva { grid-column: 1 / 2; }
  .prays__tochky {
    grid-column: 2 / 3;
    border-bottom: 1px dotted var(--mezha-yaskrava);
    transform: translateY(-.35em);
    transition: border-color var(--plavno);
  }
  .prays__cina { grid-column: 3 / 4; }
  .prays__odynycya { grid-column: 4 / 5; }
}
/* На узком экране полоска точек не нужна */
.prays__tochky { display: none; }
@media (min-width: 700px) { .prays__tochky { display: block; } }

/* --- Вид «Вітрина»: сетка карточек --- */
.vitryna {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--v6) var(--v5);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

/* Карточка без рамки и без подложки. Коробка вокруг хорошего снимка только
   мешает — взгляд цепляется за рамку. Сетку держат сами снимки: они одного
   формата, и их края образуют колонки лучше любой линейки. */
.kartka {
  display: flex; flex-direction: column;
  height: 100%;
}

.kartka__foto {
  position: relative;
  aspect-ratio: 4 / 5; width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--prylavok);
}
.kartka__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms cubic-bezier(.22, .61, .36, 1);
}
.kartka:hover .kartka__foto img { transform: scale(1.045); }
.kartka__foto > .zaglushka { width: 100%; height: 100%; border: 0; }

.kartka__vmist {
  display: flex; flex-direction: column; flex: 1;
  padding-top: var(--v3);
}
.kartka__nazva {
  font-family: var(--shryft-tekst); font-size: .9375rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; line-height: 1.3;
  margin-bottom: var(--v1);
  transition: color var(--plavno);
}
.kartka:hover .kartka__nazva { color: var(--chervonyy-tekst); }
.kartka__korotko {
  color: var(--lid); font-size: .8125rem; line-height: 1.45;
  margin-bottom: var(--v3);
}
.kartka__cina {
  margin: auto 0 0;
  font-family: var(--shryft-cina); font-weight: 400; font-size: 1.375rem;
  line-height: 1; color: var(--krejda);
}
.kartka__odynycya {
  font-family: var(--shryft-tekst);
  font-size: .6875rem; font-weight: 400;
  color: var(--lid); letter-spacing: .1em; text-transform: uppercase;
  margin-left: var(--v1);
}

/* Сетка карточек осталась в одном месте — блок «дивіться також» под
   товаром. Переключателя видов, ради которого она задумывалась, больше
   нет: см. комментарий в index.html. */

/* --------------------------------------------------------------------------
   8. ПРОСТЫЕ БЛОКИ СТРАНИЦЫ
   -------------------------------------------------------------------------- */
.blok { padding-block: var(--v8); border-top: 1px solid var(--mezha); }
.blok__zagolovok {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  text-transform: uppercase;
  margin-bottom: var(--v6);
}

/* Шаги «как заказать». Нумерация здесь честная: это правда
   последовательность, а не украшение — порядок действий переставить нельзя.
   Раньше над каждым шагом лежала жирная красная черта: четыре красные
   полосы в ряд перетягивали внимание на себя. Теперь номер набран Forum
   крупно, а черта тонкая — считает цифра, а не полоса. */
.kroky {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--v5);
  counter-reset: krok;
}
.krok {
  counter-increment: krok;
  padding-top: var(--v4);
  border-top: 1px solid var(--mezha-yaskrava);
}
.krok::before {
  content: counter(krok, decimal-leading-zero);
  display: block;
  font-family: var(--shryft-cina); font-size: 2rem; font-weight: 400;
  line-height: 1; color: var(--chervonyy-tekst);
  margin-bottom: var(--v3);
}
.krok__nazva {
  font-family: var(--shryft-tekst); font-size: 1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: var(--v2);
}
.krok__tekst { color: var(--lid); font-size: .9375rem; }

@media (min-width: 700px) { .kroky { grid-template-columns: repeat(2, 1fr); gap: var(--v6); } }
@media (min-width: 1000px) { .kroky { grid-template-columns: repeat(4, 1fr); } }

/* Доставка */
.dostavka__sitka {
  display: grid; gap: var(--v5);
  grid-template-columns: 1fr;
  margin-bottom: var(--v6);
}
/* Рамку и подложку убрал. Четыре тёмных прямоугольника с обводкой — это
   язык панели управления, а не лавки. Хватает воздуха и одной тонкой
   черты сверху: те же «карточки», но без коробок. */
.dostavka__blok {
  padding-top: var(--v4);
  border-top: 1px solid var(--mezha);
}
.dostavka__nazva {
  font-family: var(--shryft-zagolovok); font-size: 1.375rem; font-weight: 400;
  line-height: 1.2; margin-bottom: var(--v2);
}
.dostavka__tekst { color: var(--lid); font-size: .9375rem; }

.zasterezhennya {
  display: flex; gap: var(--v4);
  padding: var(--v5);
  border: 1px solid var(--krov);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: rgba(142, 18, 25, .10);
  font-size: .9375rem;
}
.zasterezhennya svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--chervonyy-tekst); margin-top: .15rem; }

@media (min-width: 800px) { .dostavka__sitka { grid-template-columns: repeat(2, 1fr); } }

/* Про нас */
.pro-nas__sitka { display: grid; gap: var(--v6); }
.pro-nas__tekst { color: var(--prygluh); max-width: 38rem; }
.pro-nas__lid {
  font-family: var(--shryft-zagolovok);
  font-size: clamp(1.375rem, 3.6vw, 1.875rem);
  font-weight: 400; line-height: 1.4;
  color: var(--krejda);
  margin-bottom: var(--v5);
}

@media (min-width: 900px) {
  .pro-nas__sitka { grid-template-columns: 1fr 1fr; gap: var(--v8); align-items: start; }
}

/* Вопросы и ответы */
.pytannya { border-top: 1px solid var(--mezha); }
.pytannya:last-of-type { border-bottom: 1px solid var(--mezha); }
.pytannya__zapyt {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--v4);
  padding: var(--v5) 0;
  cursor: pointer; list-style: none;
  /* Вопрос — это предложение, и заглавными он выглядит как крик.
     Поэтому Forum обычным набором, как в журнале. */
  font-family: var(--shryft-zagolovok); font-size: 1.375rem; font-weight: 400;
  line-height: 1.25;
  transition: color var(--plavno);
}
.pytannya__zapyt::-webkit-details-marker { display: none; }
.pytannya__zapyt:hover { color: var(--chervonyy-tekst); }
.pytannya__znak {
  flex: none; width: 1rem; height: 1rem;
  color: var(--chervonyy);
  transition: transform var(--plavno);
}
.pytannya[open] .pytannya__znak { transform: rotate(45deg); }
.pytannya__vidpovid {
  padding-bottom: var(--v5);
  color: var(--prygluh); max-width: 46rem;
}

/* Контакты. Тоже без коробок: подпись мелкими разряжёнными буквами, само
   значение — крупно. Под курсором подчёркивается красной чертой, тем же
   приёмом, что и выбранный вид каталога: один жест на весь сайт. */
.kontakty__sitka { display: grid; gap: var(--v5); }
.kontakt {
  display: block; padding: var(--v4) 0;
  border-top: 1px solid var(--mezha);
  transition: border-color var(--plavno);
}
.kontakt:hover { border-top-color: var(--chervonyy); }
.kontakt:hover .kontakt__znachennya { color: var(--chervonyy-tekst); }
.kontakt__pidpys {
  font-family: var(--shryft-tekst); font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--lid); margin-bottom: var(--v3);
}
.kontakt__znachennya {
  font-family: var(--shryft-zagolovok); font-size: 1.5rem; font-weight: 400;
  line-height: 1.2;
  /* Адрес почты — единственное «слово» тут, которое длиннее колонки.
     Без этой строки на узком экране он вылезал бы за край. */
  overflow-wrap: anywhere;
  transition: color var(--plavno);
}
.kontakt__prymitka { color: var(--lid); font-size: .875rem; margin-top: var(--v2); }

/* Карточек четыре. На среднем экране это два ряда по две, на широком —
   один ряд. Трёх колонок больше нет: четвёртая карточка оставалась бы
   в ряду одна, и ряд выглядел бы недоделанным. */
@media (min-width: 700px)  { .kontakty__sitka { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kontakty__sitka { grid-template-columns: repeat(4, 1fr); } }

/* --- Соцсети ----------------------------------------------------------
   Круглые значки, те же, что кнопки в шапке: круг на сайте закреплён за
   точками нажатия со значком внутри, и соцсети — ровно этот случай.

   Подписей у значков нет намеренно. TikTok, Instagram и Telegram узнают
   по силуэту, а «@kleshnya.life» рядом со знаком — это адрес, который
   никто не будет перепечатывать руками. Слова спрятаны в aria-label,
   так что читалка с экрана произнесёт их полностью. */
.socmerezhi { margin-top: var(--v7); }
.socmerezhi__pidpys {
  font-family: var(--shryft-tekst); font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--lid); margin-bottom: var(--v3);
}
.socmerezhi__ryad { display: flex; flex-wrap: wrap; gap: var(--v2); }
.socmerezhi__ryad--pidval { margin-top: var(--v4); }
/* Значок рисован фигурой, а не линией, поэтому в круге он выглядит
   тяжелее контурных значков шапки — уменьшаем на пару пикселей. */
.socmerezha svg { width: 1rem; height: 1rem; }
.socmerezha:hover { color: var(--chervonyy-tekst); }

/* --------------------------------------------------------------------------
   9. ПОДВАЛ
   -------------------------------------------------------------------------- */
.pidval {
  border-top: 1px solid var(--mezha);
  padding-block: var(--v7) var(--v6);
  background: var(--degot);
}
.pidval__verkh {
  display: grid; gap: var(--v6);
  padding-bottom: var(--v6);
  border-bottom: 1px solid var(--mezha);
}
.pidval__pro { max-width: 26rem; color: var(--prygluh); font-size: .9375rem; }
.pidval__nazva-grupy {
  font-family: var(--shryft-cyfry); font-size: .75rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--prygluh); margin-bottom: var(--v3);
}
.pidval__spysok { list-style: none; margin: 0; padding: 0; display: grid; }
/* Ссылка-строка, а не строчка текста: сама буква высотой 19 px, и попасть
   по ней пальцем на телефоне почти нельзя. Отступы сверху и снизу делают
   из неё полосу в 43 px, при этом визуально ничего не меняется. */
.pidval__spysok a {
  display: block; padding-block: .7rem;
  font-size: .9375rem; transition: color var(--plavno);
}
.pidval__spysok a:hover { color: var(--chervonyy-tekst); }

.pidval__nyz {
  display: flex; flex-wrap: wrap; gap: var(--v3) var(--v5);
  justify-content: space-between; align-items: center;
  padding-top: var(--v5);
  color: var(--prygluh); font-size: .8125rem;
}
/* Телефон внизу — это кнопка связи, по ней звонят. Растягиваем до 44 px. */
.pidval__nyz a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
}
/* Телефон и почта стоят рядом. Точка между ними — разделитель, а не
   знак препинания, поэтому она тише и её пропускает читалка с экрана.
   Сама строка складывается в столбик, если ширины не хватает. */
.pidval__kontakty { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--v3); }
.pidval__rozdilnyk { opacity: .45; }

@media (min-width: 800px) {
  .pidval__verkh { grid-template-columns: 2fr 1fr 1fr; gap: var(--v8); }
}

/* --------------------------------------------------------------------------
   10. СТРАНИЦА ТОВАРА
   -------------------------------------------------------------------------- */
.hlibni-kryhty {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--v2);
  /* Отступ ряда уменьшен на ту же величину, на которую подросли сами
     ссылки (см. ниже): визуально хлебные крошки стоят там же, где стояли,
     но по ним теперь можно попасть пальцем. */
  padding-block: var(--v3);
  font-family: var(--shryft-cyfry); font-size: .75rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--prygluh);
}
.hlibni-kryhty a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
}
.hlibni-kryhty a:hover { color: var(--chervonyy-tekst); }
/* Косая черта между крошками. Раньше красилась токеном для рамок — на
   чёрном получалось 2,2:1, то есть её попросту не было видно. Рамке такое
   можно, тексту нельзя. */
.hlibni-kryhty__roz { color: var(--lid-tykhyy); }

/* Название товара в крошках прячем на телефоне: оно занимает целую
   лишнюю строку и слово в слово повторяет заголовок, который стоит сразу
   под фотографией. Ничего не теряется — «где я нахожусь» так же понятно
   по двум оставшимся крошкам. На широком экране строка одна, места
   хватает, там крошка остаётся полной. */
@media (max-width: 599px) {
  .hlibni-kryhty__cej { display: none; }
}

.tovar { padding-bottom: var(--v8); }
.tovar__sitka { display: grid; gap: var(--v6); }

/* Пропорция 4:5 — та же, что у плитки в витрине. Раньше здесь было 4:3,
   а на компьютере квадрат, в витрине же 4:5: один и тот же файл резался
   тремя разными способами, и в каждой рамке терялся свой кусок кадра.
   Товарные снимки делаются под заказ, поэтому проще привести все рамки
   к одной, чем подгонять сорок снимков под три.

   На телефоне 4:5 — кадр высокий, он мог бы вытолкнуть цену за нижний
   край экрана. Ограничиваю не высоту, а ширину: 40svh по ширине — это
   ровно 50svh по высоте, то есть полэкрана. Ограничивать высоту напрямую
   нельзя: ширину в сетке задаёт колонка, она бы осталась прежней, и
   картинку срезало бы сверху и снизу. Через ширину кадр просто
   становится меньше целиком и встаёт по центру. Точное число подобрано
   по экрану 375×812: при нём цена помещается над закреплённой полосой
   корзины, а не уезжает под неё. */
.tovar__foto {
  aspect-ratio: 4 / 5;
  /* width обязателен вместе с margin-inline: auto. Без него ячейка сетки
     перестаёт растягиваться по колонке и сжимается по содержимому —
     рамка схлопывается в пару пикселей. Проверено в браузере. */
  width: 100%;
  max-width: 36svh;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--mezha);
  margin-inline: auto;
}
.tovar__foto img { width: 100%; height: 100%; object-fit: cover; }

.tovar__nazva {
  font-size: clamp(1.875rem, 6vw, 3rem);
  text-transform: uppercase;
  margin-bottom: var(--v3);
}
.tovar__korotko { color: var(--prygluh); font-size: 1.0625rem; margin-bottom: var(--v5); }

/* Главная цена. Она здесь — герой страницы, поэтому такая крупная. */
.cinnyk {
  padding: var(--v5) 0;
  border-block: 1px solid var(--mezha);
  margin-bottom: var(--v5);
}
.cinnyk__suma {
  display: flex; align-items: baseline; gap: var(--v3);
  /* Мелом-белым и Forum, как во всём прайсе. Красная цифра в таком
     размере кричала «распродажа»; здесь же наоборот — чем спокойнее
     написана цена, тем дороже товар выглядит. */
  font-family: var(--shryft-cina); font-weight: 400;
  font-size: clamp(2.5rem, 9vw, 3.75rem);
  line-height: 1; color: var(--krejda);
}
.cinnyk__grn {
  font-family: var(--shryft-tekst);
  font-size: .22em; font-weight: 400; color: var(--lid);
  letter-spacing: .12em; text-transform: uppercase;
}
/* «Ціна — за запитом» стоит на месте цифры, но набрана заметно мельче.
   Если дать ей тот же кегль, что и сумме, строка из четырнадцати букв
   разъедется на три строки и перекроет собой всё остальное. А главное —
   это не цена, и выглядеть ценой она не должна. */
.cinnyk__za-zapytom {
  font-family: var(--shryft-cina); font-weight: 400;
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1.1; color: var(--krejda);
}
/* Пояснение под ней — обычное предложение. Тот же приём, что у «за
   кілограм», здесь не годится: капслок с разрядкой хорош на двух словах,
   а целую фразу в нём читать тяжело. */
.cinnyk__poyasnennya {
  margin-top: var(--v3);
  font-family: var(--shryft-tekst); font-size: .9375rem;
  line-height: 1.6; color: var(--lid); max-width: 44ch;
}
.cinnyk__za-kg {
  margin-top: var(--v3);
  font-family: var(--shryft-tekst); font-size: .8125rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--lid);
}

/* Выбор веса — то, ради чего всё затевалось. Кнопки крупные,
   промахнуться пальцем нельзя. */
.vybir { margin-bottom: var(--v5); }
.vybir__pidpys {
  font-family: var(--shryft-cyfry); font-size: .75rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--prygluh); margin-bottom: var(--v3);
}
.vybir__knopky { display: flex; flex-wrap: wrap; gap: var(--v2); }
.vybir__knopka {
  min-height: 3rem; min-width: 4.5rem;
  padding: var(--v2) var(--v4);
  background: transparent;
  border: 1px solid var(--mezha-yaskrava); border-radius: var(--radius);
  font-family: var(--shryft-cyfry); font-size: 1rem; font-weight: 400;
  color: var(--krejda);
  transition: border-color var(--plavno), background var(--plavno), color var(--plavno);
}
.vybir__knopka:hover { border-color: var(--krejda); }
/* Выбранная грамовка залита мелом, а не красным. Красная заливка тут
   спорила с кнопкой «Додати в кошик»: две красные плашки рядом, и глаз
   не понимает, какая из них — действие. */
.vybir__knopka[aria-pressed='true'] {
  background: var(--krejda); border-color: var(--krejda); color: var(--nich);
  font-weight: 700;
}

.tovar__dodaty { width: 100%; }

.prymitka {
  display: flex; gap: var(--v3);
  margin-top: var(--v4);
  padding: var(--v4);
  background: rgba(142, 18, 25, .10);
  border: 1px solid var(--krov); border-radius: var(--radius);
  font-size: .875rem;
}
.prymitka svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--chervonyy-tekst); margin-top: .1rem; }

/* Описание, подача, хранение */
.opys { margin-top: var(--v7); display: grid; gap: var(--v5); }
.opys__blok { padding-top: var(--v4); border-top: 1px solid var(--mezha); }
.opys__pidpys {
  font-family: var(--shryft-tekst); font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--lid); margin-bottom: var(--v3);
}
.opys__tekst { color: var(--lid); }

@media (min-width: 900px) {
  /* Колонки неравные. Раньше было 1:1 при квадратном фото — колонки
     заканчивались вровень. Теперь фото 4:5, оно выше, и справа под ценой
     оставалась дыра почти в двести пикселей. Отдавая фотографии чуть
     меньше ширины, укорачиваю её по высоте, а текст справа получает
     более удобную длину строки. */
  .tovar__sitka { grid-template-columns: .85fr 1fr; gap: var(--v8); align-items: start; }
  /* Пропорция остаётся 4:5, как в базовом правиле — здесь раньше стоял
     квадрат. Снимаю только ограничение по ширине: на компьютере фото
     стоит в своей колонке рядом с ценой, вниз его выталкивать некуда,
     и ужимать кадр незачем. */
  .tovar__foto { max-width: none; }
  .opys { grid-template-columns: repeat(3, 1fr); gap: var(--v7); margin-top: var(--v8); }
}

/* Похожие товары */
.shche { padding-block: var(--v8); border-top: 1px solid var(--mezha); }

/* --------------------------------------------------------------------------
   11. КОРЗИНА
   -------------------------------------------------------------------------- */
.koshyk { padding-block: var(--v6) var(--v8); }
.koshyk__sitka { display: grid; gap: var(--v6); align-items: start; }

.koshyk__spysok { list-style: none; margin: 0; padding: 0; }
/* Строка корзины на узком телефоне складывается в два этажа: сверху фото
   и название, снизу во всю ширину — сумма, счётчик и «прибрати».

   В один ряд это не влезает физически: фото 72 px, счётчик 120 px,
   отступы — и на название остаётся сорок пикселей, из-за чего страница
   уезжала вбок на 44 px. Ужимать счётчик нельзя: кнопки «−» и «+» и так
   ровно 44 px, меньше — мимо пальца. */
.koshyk__ryadok {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--v3) var(--v4);
  padding: var(--v4) 0;
  border-bottom: 1px solid var(--mezha);
}
.koshyk__ryadok > .koshyk__prava {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; justify-content: space-between;
}
.koshyk__foto {
  width: 4.5rem; height: 4.5rem;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--mezha);
}
.koshyk__foto img { width: 100%; height: 100%; object-fit: cover; }
.koshyk__nazva {
  font-family: var(--shryft-cyfry); font-size: .9375rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .04em;
  position: relative;
}
/* Название — единственный путь обратно на страницу товара, а сама строка
   всего 19 px высотой: пальцем в неё не попасть. Расширяем область
   нажатия невидимым прямоугольником, не трогая раскладку. Вниз он заходит
   на строку с весом — она не кликается, так что перехватывать нечего. */
.koshyk__nazva::after {
  content: ''; position: absolute; inset: -.8rem 0;
}
.koshyk__vaga { color: var(--prygluh); font-size: .8125rem; margin-top: var(--v1); }
.koshyk__prava { text-align: right; display: flex; flex-direction: column; gap: var(--v2); align-items: flex-end; }

/* От 480 px всё это спокойно встаёт в один ряд, как и задумано. */
@media (min-width: 480px) {
  .koshyk__ryadok { grid-template-columns: 4.5rem 1fr auto; }
  .koshyk__ryadok > .koshyk__prava {
    grid-column: auto;
    flex-direction: column; align-items: flex-end; justify-content: flex-start;
  }
}
.koshyk__suma {
  font-family: var(--shryft-cina); font-weight: 400; font-size: 1.375rem;
  color: var(--krejda);
  /* Цена не переносится: «8 500» и «грн» на разных строках читаются как
     две разные цифры, а в корзине это последнее, что можно себе позволить. */
  white-space: nowrap;
}
/* Плюс-минус к количеству. Общая рамка вокруг тройки убрана: «−», число и
   «+» — это не одно поле ввода, а два действия и результат между ними.
   Теперь каждое действие — свой круг, а число стоит свободно. 44px в
   каждой стороне: иначе на телефоне в них попадает разве что мизинец. */
.kilkist {
  display: inline-flex; align-items: center; gap: var(--v1);
}
.kilkist__knopka {
  flex: none;
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--mezha-yaskrava); border-radius: 50%;
  font-family: var(--shryft-cyfry); font-size: 1.25rem; line-height: 1;
  color: var(--krejda);
  transition: color var(--plavno), background var(--plavno), border-color var(--plavno);
}
.kilkist__knopka:hover {
  color: var(--krejda); border-color: var(--krejda);
  background: rgba(242, 237, 228, .06);
}
.kilkist__chyslo {
  min-width: 2.25rem; text-align: center;
  font-family: var(--shryft-cina); font-weight: 400; font-size: 1.25rem;
}

.koshyk__prybraty {
  min-height: 2.75rem; min-width: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: var(--prygluh); font-size: .8125rem;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--plavno);
}
.koshyk__prybraty:hover { color: var(--chervonyy-tekst); }

/* Итог — единственная «коробка» на сайте, и это осознанно: в корзине
   человеку нужно видеть, где кончается список и начинается сумма к оплате.
   Подложка отделяет её надёжнее любой линейки. */
.pidsumok {
  padding: var(--v6);
  background: var(--prylavok);
  border-radius: var(--radius);
}
.pidsumok__ryadok {
  display: flex; justify-content: space-between; gap: var(--v4);
  padding-block: var(--v2);
  color: var(--prygluh); font-size: .9375rem;
}
.pidsumok__razom {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--v4);
  margin-top: var(--v4); padding-top: var(--v4);
  border-top: 1px solid var(--mezha);
}
.pidsumok__razom-pidpys {
  font-family: var(--shryft-tekst); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: var(--lid);
}
.pidsumok__razom-suma {
  font-family: var(--shryft-cina); font-weight: 400; font-size: 2.25rem;
  line-height: 1; color: var(--krejda);
}

/* Пустая корзина — не тупик, а приглашение вернуться в каталог. */
.porozhno { text-align: center; padding-block: var(--v9); }
.porozhno__znak { width: 2.5rem; margin: 0 auto var(--v5); color: rgba(242,237,228,.18); }
.porozhno__zagolovok { font-size: 1.5rem; margin-bottom: var(--v3); text-transform: uppercase; }
.porozhno__tekst { color: var(--prygluh); margin-bottom: var(--v5); }

/* Форма заказа */
.forma { display: grid; gap: var(--v4); }
.pole { display: grid; gap: var(--v2); }
.pole__pidpys {
  font-family: var(--shryft-cyfry); font-size: .75rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .14em; color: var(--prygluh);
}
.pole__obovyazkovo { color: var(--chervonyy-tekst); }
.pole input, .pole textarea, .pole select {
  width: 100%; min-height: 3rem;
  padding: var(--v3) var(--v4);
  background: var(--vugillya);
  border: 1px solid var(--mezha-yaskrava); border-radius: var(--radius);
  color: var(--krejda);
  font-family: var(--shryft-tekst); font-size: 1rem;
  transition: border-color var(--plavno);
}
.pole textarea { min-height: 6rem; resize: vertical; }
.pole input:focus, .pole textarea:focus, .pole select:focus {
  border-color: var(--chervonyy); outline: none;
}
/* Мышью красной рамки достаточно: человек сам ткнул и знает куда.
   С клавиатуры — нет, поэтому здесь возвращаем тот же след, что и у всех
   остальных элементов. Правило выше «outline: none» перебивало общее
   :focus-visible, потому что у него вес больше. */
.pole input:focus-visible, .pole textarea:focus-visible, .pole select:focus-visible {
  outline: 2px solid var(--chervonyy-tekst); outline-offset: 2px;
}
/* Подсказка внутри поля. Было .6 — на чёрном это давало контраст 3.2 к
   единице, ниже нормы 4.5, и на телефоне на солнце она пропадала.
   Подняли до .8 — 4.8, читается, но всё равно тише самой подписи. */
.pole input::placeholder, .pole textarea::placeholder { color: rgba(163,156,148,.8); }
.pole__pidkazka { color: var(--prygluh); font-size: .8125rem; }
.pole__pomylka {
  color: var(--chervonyy-tekst); font-size: .8125rem;
  display: none;
}
.pole[data-pomylka='true'] .pole__pomylka { display: block; }
.pole[data-pomylka='true'] input,
.pole[data-pomylka='true'] textarea { border-color: var(--chervonyy); }

/* Заголовки внутри формы: «Дані замовника», «Доставка». Раньше форма шла
   одной простынёй из семи полей — глазу не за что зацепиться, и человек не
   понимает, сколько ещё осталось. Два заголовка делят её на «про вас» и
   «про посилку», и обе части выглядят короткими. */
.forma__zagolovok {
  font-family: var(--shryft-cyfry); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: var(--lid);
  margin-top: var(--v7); padding-bottom: var(--v3);
  border-bottom: 1px solid var(--mezha);
}

/* Примечание к способу получения: адрес рынка, условия по Европе. */
.forma__prymitka {
  color: var(--prygluh); font-size: .875rem; line-height: 1.6;
  padding: var(--v3) var(--v4);
  background: var(--prylavok); border-radius: var(--radius);
}

/* Кружочки выбора: оплата, способ связи.
   Каждый вариант — целая строка-мишень, а не пятнышко диаметром 16 px:
   попасть пальцем нужно в строку, а не в кружок. */
.perelik { display: grid; gap: var(--v2); }
.perelik__punkt {
  display: flex; align-items: center; gap: var(--v3);
  min-height: 44px; padding: var(--v2) var(--v4);
  border: 1px solid var(--mezha-yaskrava); border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--plavno), background var(--plavno);
}
.perelik__punkt:hover { border-color: var(--mezha-yaskrava); background: var(--prylavok); }
/* Выбранный вариант обведён красным. Одного кружка мало: на тёмном фоне
   он мелкий, и с телефона в руках сразу не видно, что именно выбрано. */
.perelik__punkt:has(input:checked) {
  border-color: var(--chervonyy); background: var(--prylavok);
}
.perelik__punkt input {
  width: 1.125rem; height: 1.125rem; min-height: 0; flex: none;
  margin: 0; padding: 0;
  accent-color: var(--chervonyy);
}
.perelik__punkt input:focus-visible { outline: 2px solid var(--chervonyy); outline-offset: 3px; }
.perelik__nazva { font-size: .9375rem; color: var(--krejda); }

/* Один-единственный вариант оплаты — не кружок, а просто строка-факт. */
.forma__fakt {
  margin: 0;
  padding: var(--v3) var(--v4);
  background: var(--prylavok);
  border: 1px solid var(--mezha);
  border-radius: var(--radius);
  font-size: .9375rem; color: var(--krejda);
}

/* Сумма над кнопкой оформления. На широком экране её не видно: там та же
   цифра стоит в панели справа, и дублировать её незачем. */
.forma__razom {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--v3);
  margin: var(--v6) 0 var(--v4);
  padding-top: var(--v4);
  border-top: 1px solid var(--mezha);
  font-size: .9375rem; color: var(--prygluh);
  text-transform: uppercase; letter-spacing: .08em;
}
.forma__razom .cyfry {
  font-family: var(--shryft-zagolovok);
  font-size: 1.5rem; color: var(--krejda);
  letter-spacing: 0; text-transform: none;
}

@media (min-width: 900px) {
  .koshyk__sitka { grid-template-columns: 1fr 22rem; gap: var(--v8); }
  .pidsumok { position: sticky; top: 6rem; }
  .forma__razom { display: none; }
}

/* --------------------------------------------------------------------------
   12. ВСПЛЫВАЮЩЕЕ СООБЩЕНИЕ («додано в кошик»)
   -------------------------------------------------------------------------- */
.spovishchennya {
  position: fixed; z-index: var(--shar-menyu);
  left: var(--v4); right: var(--v4); bottom: var(--v4);
  display: flex; align-items: center; gap: var(--v3);
  padding: var(--v4);
  background: var(--degot);
  border: 1px solid var(--chervonyy); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  font-size: .9375rem;
  transform: translateY(150%);
  /* Одного сдвига вниз мало: когда снизу появляется панель корзины,
     сообщение поднимается над ней и краем вылезает обратно в кадр.
     Поэтому в спрятанном виде оно ещё и убрано из отрисовки. */
  visibility: hidden;
  transition: transform var(--plavno), visibility 0s linear 220ms;
}
.spovishchennya[data-vydno='true'] {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--plavno), visibility 0s;
}
.spovishchennya svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--chervonyy-tekst); }
.spovishchennya a {
  margin-left: auto; flex: none;
  /* Всплывающее «додано в кошик» живёт три секунды — промахнуться по
     ссылке в нём нельзя, второго шанса не будет. Отсюда высота в 44 px. */
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-family: var(--shryft-cyfry); font-size: .8125rem;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--chervonyy-tekst);
  text-decoration: underline; text-underline-offset: 3px;
}

@media (min-width: 700px) {
  .spovishchennya { left: auto; right: var(--v5); bottom: var(--v5); max-width: 24rem; }
}

/* --------------------------------------------------------------------------
   12а. ПАНЕЛЬ КОРЗИНЫ ВНИЗУ ЭКРАНА (только телефон)

   Значок корзины в шапке показывает количество, но не сумму. В продуктовом
   магазине человек набирает по позиции и хочет видеть, на сколько уже
   набрал, — не открывая корзину. Плюс «Оформити» всё время под большим
   пальцем, а не в правом верхнем углу, куда на телефоне надо тянуться.

   Панель появляется, только когда в корзине что-то есть. Пустая полоса
   внизу экрана — это отнятая у товара строка и ничего больше.
   -------------------------------------------------------------------------- */
:root { --panel-koshyka: 4.75rem; }  /* высота панели, нужна и подвалу, и всплывашке */

.panel-koshyka {
  position: fixed; z-index: var(--shar-shapka);
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: var(--v4);
  padding: var(--v3) var(--v4);
  /* Запас под жестовую полосу айфона: иначе кнопка упирается в неё и по
     ней промахиваешься. */
  padding-bottom: calc(var(--v3) + env(safe-area-inset-bottom, 0px));
  background: rgba(20, 16, 15, .94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--mezha-yaskrava);
  transform: translateY(110%);
  visibility: hidden;
  /* Прячем видимость с задержкой на время съезда — иначе панель исчезает
     мгновенно, не доиграв движение. */
  transition: transform var(--plavno), visibility 0s linear 220ms;
}
.panel-koshyka[data-vydno='true'] {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--plavno), visibility 0s;
}

.panel-koshyka__livo { display: flex; flex-direction: column; gap: var(--v1); }
.panel-koshyka__pidpys {
  font-family: var(--shryft-tekst);
  font-size: .625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--lid);
}
.panel-koshyka__suma {
  font-size: 1.125rem; font-weight: 700;
  color: var(--krejda);
  white-space: nowrap;
}
.panel-koshyka__knopka {
  margin-left: auto;
  flex: none;
  min-height: 2.75rem;
  padding-left: var(--v5); padding-right: var(--v5);
  font-size: .875rem;
}

/* Подвалу — запас снизу, чтобы панель не легла на последнюю строку. */
html[data-z-panellyu='true'] body {
  padding-bottom: calc(var(--panel-koshyka) + env(safe-area-inset-bottom, 0px));
}
/* «Додано в кошик» встаёт над панелью, а не под неё. */
html[data-z-panellyu='true'] .spovishchennya {
  bottom: calc(var(--v4) + var(--panel-koshyka) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 700px) {
  /* На компьютере шапка со значком корзины и так всё время на виду. */
  .panel-koshyka { display: none; }
  html[data-z-panellyu='true'] body { padding-bottom: 0; }
  html[data-z-panellyu='true'] .spovishchennya { bottom: var(--v5); }
}

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

/* --------------------------------------------------------------------------
   12б. ПОИСК ПО КАТАЛОГУ

   Окно, а не поле в шапке. Поле пришлось бы держать на всех восьми
   страницах постоянно, оно отняло бы у шапки половину ширины на телефоне,
   а нужно оно раз в посещение. Значок — открыл, набрал, ушёл.

   Окно висит вверху, а не по центру экрана: на телефоне снизу вылезает
   клавиатура, и всё, что стоит по центру, оказывается под ней.
   -------------------------------------------------------------------------- */
.poshuk {
  position: fixed; inset: 0; z-index: var(--shar-menyu);
  display: flex; justify-content: center;
  padding: var(--v4);
  background: rgba(6, 4, 5, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--plavno), visibility 0s linear 220ms;
}
.poshuk[data-vidkryto='true'] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--plavno), visibility 0s;
}
/* Пока окно открыто, страница под ним не ездит. */
html[data-z-poshukom='true'] body { overflow: hidden; }

.poshuk__panel {
  width: 100%; max-width: 34rem;
  align-self: flex-start;
  margin-top: var(--v6);
  background: var(--prylavok);
  border: 1px solid var(--mezha-yaskrava);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  overflow: hidden;
  transform: translateY(-.75rem);
  transition: transform var(--plavno);
}
.poshuk[data-vidkryto='true'] .poshuk__panel { transform: translateY(0); }

.poshuk__ryad {
  display: flex; align-items: center; gap: var(--v3);
  padding: 0 var(--v3) 0 var(--v4);
  border-bottom: 1px solid var(--mezha);
}
.poshuk__znachok { width: 1.125rem; height: 1.125rem; flex: none; color: var(--lid); }
.poshuk__pole {
  flex: 1; min-width: 0;
  /* 16px ровно: меньше — и айфон при фокусе сам увеличивает страницу. */
  height: 3.5rem; padding: 0;
  background: transparent; border: 0;
  font-family: var(--shryft-tekst); font-size: 1rem;
  color: var(--krejda);
}
.poshuk__pole::placeholder { color: var(--lid); }
.poshuk__pole:focus { outline: none; }
.poshuk__pole::-webkit-search-cancel-button { display: none; }

.poshuk__zakryty {
  flex: none;
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: var(--lid);
  transition: color var(--plavno);
}
.poshuk__zakryty:hover { color: var(--krejda); }
.poshuk__zakryty svg { width: 1.125rem; height: 1.125rem; }

.poshuk__pidkazka {
  margin: 0; padding: var(--v3) var(--v4);
  font-size: .8125rem;
  color: var(--lid);
}
.poshuk__spysok {
  list-style: none; margin: 0; padding: 0 0 var(--v2);
  max-height: 55vh; overflow-y: auto;
}
.poshuk__znahidka {
  display: flex; align-items: center; gap: var(--v4);
  /* 44 px под палец с запасом: в списке восемь строк подряд, промахнуться
     здесь легче всего. */
  min-height: 3.25rem;
  padding: var(--v3) var(--v4);
  border-top: 1px solid var(--mezha);
  transition: background var(--plavno);
}
.poshuk__znahidka:hover { background: rgba(244, 239, 231, .05); }
.poshuk__pro { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.poshuk__nazva { font-size: .9375rem; color: var(--krejda); }
.poshuk__rozdil {
  font-size: .6875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--lid);
}
.poshuk__cina {
  margin-left: auto; flex: none;
  font-size: .875rem; font-weight: 700;
  color: var(--chervonyy-tekst);
  white-space: nowrap;
}

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

/* --------------------------------------------------------------------------
   13. ЭКРАН ПОСЛЕ ОФОРМЛЕНИЯ

   Сюда попадают, когда форма заполнена. Пока платёжки нет, здесь лежит
   готовый текст заказа: покупателю остаётся отправить его в Telegram или
   позвонить. Когда подключим оплату, этот экран станет страницей «идёт
   переход к оплате» — вёрстка та же.
   -------------------------------------------------------------------------- */
/* Экран «заказ собран». Ставим по центру: на этой странице больше ничего
   нет, и колонка, прижатая к левому краю широкого экрана, выглядит так,
   будто вторая половина не догрузилась. */
.gotovo { max-width: 40rem; margin-inline: auto; padding-block: var(--v6) var(--v9); }
.gotovo__zagolovok {
  font-size: clamp(2rem, 7vw, 3.5rem); text-transform: uppercase;
  margin-bottom: var(--v4);
}
.gotovo__lid { color: var(--prygluh); margin-bottom: var(--v5); }
.gotovo__tekst {
  margin: 0 0 var(--v5);
  padding: var(--v5);
  background: var(--degot);
  border: 1px solid var(--mezha); border-left: 3px solid var(--chervonyy);
  border-radius: var(--radius);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .8125rem; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
  color: var(--krejda);
  /* Длинный заказ не должен растягивать страницу на два экрана */
  max-height: 22rem; overflow: auto;
}
.gotovo__knopky { display: flex; flex-wrap: wrap; gap: var(--v3); margin-bottom: var(--v5); }
/* «Назад, редагувати» — не кнопка в общем ряду, а подчёркнутая строка.
   Стой она рядом с «Надіслати», две кнопки спорили бы за внимание, а
   главное действие здесь одно. Высота всё равно 44 px: пальцем попадать
   по ней придётся так же, как по любой другой. */
.gotovo__nazad {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0;
  margin-bottom: var(--v5);
  background: none; border: none;
  color: var(--prygluh); font-family: var(--shryft-tekst); font-size: .9375rem;
  text-decoration: underline; text-underline-offset: .25em;
  cursor: pointer; transition: color var(--plavno);
}
.gotovo__nazad:hover { color: var(--krejda); }
.gotovo__prymitka {
  color: var(--prygluh); font-size: .875rem;
  padding-top: var(--v4); border-top: 1px solid var(--mezha);
}

/* --------------------------------------------------------------------------
   14. ПРОСТЫЕ ТЕКСТОВЫЕ СТРАНИЦЫ (оферта, возврат и прочее)
   -------------------------------------------------------------------------- */
.stattya { padding-block: var(--v6) var(--v9); max-width: 46rem; }

/* Нижняя граница размера здесь меньше, чем у остальных заголовков, из-за
   одного слова: «КОНФІДЕНЦІЙНОСТІ». На экране 320 px оно при 30 px не
   помещается в строку и растягивает страницу — появляется горизонтальная
   прокрутка на всём сайте. 24 px оно уже переживает. break-word — на
   случай, если в заголовок когда-нибудь попадёт слово ещё длиннее. */
.stattya h1 {
  font-size: clamp(1.5rem, 6vw, 2.75rem);
  text-transform: uppercase; margin-bottom: var(--v5);
  overflow-wrap: break-word;
}
.stattya h2 {
  font-size: 1.25rem; text-transform: uppercase;
  margin-top: var(--v7); margin-bottom: var(--v3);
  /* Переход по оглавлению не должен загонять заголовок под шапку —
     она приклеена к верху экрана. */
  scroll-margin-top: 7rem;
}
/* Длинная почта или адрес в реквизитах не должны раздвигать страницу */
.stattya p, .stattya li { color: var(--prygluh); overflow-wrap: break-word; }
.stattya ul, .stattya ol { padding-left: var(--v5); margin-bottom: var(--v4); }
.stattya li { margin-bottom: var(--v2); }
.stattya strong { color: var(--krejda); font-weight: 700; }
.stattya a { color: var(--chervonyy-tekst); text-decoration: underline; text-underline-offset: 3px; }
.stattya__onovleno {
  margin-top: var(--v7); padding-top: var(--v4);
  border-top: 1px solid var(--mezha);
  font-size: .8125rem; color: var(--prygluh);
}

/* Боковое оглавление документа. Собирается скриптом из заголовков —
   см. zibratyZmistStatti() в script.js.

   На телефоне его нет намеренно: список из двенадцати строк отодвинул бы
   сам документ на второй экран, а пальцем и так пролистывается быстро.
   Поэтому display:none по умолчанию и появляется только с 1100 px, где
   рядом с колонкой текста есть свободное поле. */
.stattya__zmist { display: none; }

@media (min-width: 1100px) {
  .stattya {
    display: grid;
    /* 46rem — та же ширина строки, что была: читаемость меняться не должна,
       оглавление встаёт рядом, а не отъедает у текста. max-width берём
       обратно у .obgortka, чтобы страница осталась по центру. */
    grid-template-columns: minmax(0, 46rem) 15rem;
    column-gap: var(--v8);
    /* Между строками — ноль. Иначе сетка растащила бы абзацы документа
       на четыре сантиметра друг от друга: каждый абзац здесь отдельная
       строка сетки, а не часть общего потока. */
    row-gap: 0;
    max-width: var(--shyryna);
    align-content: start;
  }
  /* Заголовок и весь текст остаются в первой колонке; во вторую попадает
     только оглавление, поэтому его ставим явно. */
  .stattya > * { grid-column: 1; }

  .stattya__zmist {
    display: block;
    /* Через все строки сразу: иначе оглавлению некуда прилипать —
       у его ячейки была бы высота одного абзаца. Ста хватит с запасом:
       в самом длинном документе абзацев вдвое меньше. Писать «1 / -1»
       нельзя: строки тут не заданы заранее, и «-1» окажется той же
       первой строкой — она растянется на высоту оглавления, а между
       заголовком и первым абзацем появится дыра в полэкрана. */
    grid-column: 2; grid-row: 1 / span 100;
    align-self: start;
    position: sticky; top: 7rem;
    padding-left: var(--v5);
    border-left: 1px solid var(--mezha);
  }
  .stattya__zmist-pidpys {
    margin-bottom: var(--v3);
    font-family: var(--shryft-cyfry); font-size: .6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--lid);
  }
  .stattya__zmist-spysok { list-style: none; padding: 0; margin: 0; }
  .stattya__zmist-spysok li { margin-bottom: var(--v2); }
  /* Подчёркивание тут снимаем: в тексте документа оно нужно, чтобы ссылку
     заметили среди сплошных строк, а в списке, где ссылка — каждая строка,
     оно превращается в частокол. */
  .stattya__zmist-spysok a {
    display: block;
    font-size: .8125rem; line-height: 1.35;
    color: var(--lid); text-decoration: none;
    transition: color var(--plavno);
  }
  .stattya__zmist-spysok a:hover {
    color: var(--krejda);
    text-decoration: underline; text-underline-offset: 3px;
  }
}

/* Реквизиты продавца. Список определений (dt/dd), а не таблица: на
   телефоне таблица в два столбца ужимается до нечитаемой каши, а здесь
   подпись просто встаёт над значением. */
.rekvizyty {
  margin-bottom: var(--v4);
  border-top: 1px solid var(--mezha);
}
.rekvizyty dt {
  font-family: var(--shryft-cyfry); font-size: .75rem;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--prygluh);
  padding-top: var(--v3);
}
.rekvizyty dd {
  margin: 0 0 var(--v3);
  padding-bottom: var(--v3);
  border-bottom: 1px solid var(--mezha);
  color: var(--krejda);
}
@media (min-width: 700px) {
  /* На широком экране подпись и значение встают в два столбца — так
     реквизиты читаются как документ, а не как длинный список. */
  .rekvizyty { display: grid; grid-template-columns: 14rem 1fr; }
  .rekvizyty dt { padding-bottom: var(--v3); border-bottom: 1px solid var(--mezha); }
  .rekvizyty dd { margin: 0; padding-top: var(--v3); }
}

/* Заметка «реквизиты не заполнены». Нарочно не в стиле сайта: пунктирная
   рамка и русский текст. Если такое случайно уедет в интернет, это видно
   с первого взгляда — в отличие от аккуратного прочерка. */
.zapovnyty {
  border: 2px dashed var(--chervonyy);
  border-radius: var(--radius);
  padding: var(--v4);
  margin-bottom: var(--v4);
}
.zapovnyty__zagolovok {
  font-family: var(--shryft-cyfry); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--chervonyy-tekst) !important;
  margin-bottom: var(--v2);
}
.zapovnyty code {
  font-family: ui-monospace, Menlo, monospace; font-size: .875em;
  background: rgba(242, 237, 228, .08); padding: .1em .35em; border-radius: 2px;
}