/* ============================================================
   СВІЖИЙ УЛОВ — стилі.
   Тема взята з логотипу: дерев'яна дошка, чорні літери.
   Верстка робиться спершу під телефон, десктоп — доповнення,
   бо люди приходять з TikTok, а це майже завжди телефон.
   ============================================================ */

/* ---------- 1. Токени ---------- */
:root {
  /* Кольори. П'ять робочих + білий на картки. */
  --tlo:        #F3E7D4;   /* фон сторінки, колір крафт-паперу */
  --tlo-2:      #E8D6BB;   /* фон другорядних блоків */
  --kartka:     #FFFDF8;   /* картки товарів */
  --dosk:       #A5703E;   /* дерево з логотипу */
  --dosk-tem:   #2A1C10;   /* темне дерево: шапка, підвал, герой */
  --vugil:      #17110B;   /* текст, ті самі чорні літери логотипу */
  /* Мідний темніший, ніж хотілося б на око: світліший давав контраст 3.7
     на кремовому тлі, а це нижче норми читабельності (треба 4.5). */
  --kopch:      #A9450F;   /* копчений мідний: ціни й головна кнопка */
  --kopch-svit: #C55C1E;   /* те саме, світліше — наведення */

  --tekst-2:    rgba(23, 17, 11, .66);   /* другорядний текст */
  --tekst-3:    rgba(23, 17, 11, .46);   /* геть тихий текст */
  --linia:      rgba(42, 28, 16, .16);   /* рамки */
  --linia-tem:  rgba(243, 231, 212, .18);/* рамки на темному */

  /* Скруглення. Дрібне — маленьке, велике — велике. */
  --r-s:  10px;
  --r-m:  16px;
  --r-l:  24px;
  --r-xl: 32px;

  /* Відступи */
  --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;  --s8: 64px;

  --tin:      0 4px 14px rgba(42, 28, 16, .10);
  --tin-silna:0 10px 30px rgba(42, 28, 16, .18);

  --shryft-zag: 'Bitter', Georgia, serif;
  --shryft:     'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shar-shapka: 40;
  --shar-stryzhka: 30;
  --shar-panel: 50;
  --shar-shtora: 60;

  /* Криві руху. Не вигадані: вбудовані в браузер надто мляві.
     Значення перевірені практикою Vercel і Linear. */
  --hid-vyhid:  cubic-bezier(0.23, 1, 0.32, 1);      /* поява й зникнення */
  --hid-shtora: cubic-bezier(0.32, 0.72, 0, 1);      /* висувна штора, як в айфоні */

  --shyryna: 1180px;

  /* Висота шапки живе тут, бо на неї спирається липка стрічка розділів.
     --shapka-vsya — з рамкою знизу: саме на стільки треба опустити стрічку,
     інакше в шов між ними видно, як проїжджає текст. */
  --shapka-h: 68px;
  --shapka-vsya: 70px;

  /* Поздовжня текстура дошки. Лежить у змінній, бо герой кладе її
     нижнім шаром під знімок — на випадок, якщо знімок не підвантажиться. */
  --dosk-uzor: repeating-linear-gradient(
    92deg,
    rgba(255, 255, 255, .016) 0 3px,
    rgba(0, 0, 0, .03) 3px 7px,
    transparent 7px 14px
  );
}

/* ---------- 2. Скидання ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Наші класи задають display: grid/flex і цим перебивають атрибут hidden.
   Без цього рядка «схований» блок усе одно видно. */
[hidden] { display: none !important; }

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

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

body {
  margin: 0;
  background: var(--tlo);
  color: var(--vugil);
  font: 400 16px/1.6 var(--shryft);
  /* внизу на телефоні висить панель кошика — лишаємо їй місце */
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--shryft-zag);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0;
}
h1 { font-size: clamp(1.8rem, 6vw, 3.2rem); }
h2 { font-size: clamp(1.4rem, 4.4vw, 2.1rem); }
h3 { font-size: clamp(1.05rem, 3vw, 1.3rem); }

p { margin: 0 0 var(--s4); }

.obhvat {
  width: min(100% - 32px, var(--shyryna));
  margin-inline: auto;
}

.tilky-dlya-chytacha {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Дерев'яні дошки. Робимо не картинкою, а смугами —
   щоб не тягнути зайвий файл і не гальмувати телефон. */
/* Дерево робимо тільки поздовжньою текстурою, без поперечних стиків:
   стик — це темна лінія на всю ширину, і вона неминуче лягає
   поверх якогось рядка тексту й читається як закреслення. */
.derevo {
  background-color: var(--dosk-tem);
  background-image: var(--dosk-uzor);
}

/* Світла дошка — для плиток розділів. Той самий малюнок,
   але на кольорі дерева з логотипу, а не на майже чорному. */
.derevo--svitle {
  background-color: var(--dosk);
  /* тільки ледь помітна поздовжня текстура, без стиків:
     стик обов'язково перерізав би назву розділу */
  background-image: repeating-linear-gradient(
    92deg,
    rgba(255, 255, 255, .022) 0 3px,
    rgba(0, 0, 0, .022) 3px 7px,
    transparent 7px 14px
  );
}

/* ---------- 3. Кнопки ---------- */
.knopka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;                /* пальцем не промахнешся */
  padding: 0 var(--s5);
  border: 2px solid transparent;
  border-radius: 999px;            /* пілюля, ніяких кутів */
  font: 700 .97rem/1 var(--shryft);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.knopka:active { transform: translateY(1px); }

.knopka--holovna {
  background: var(--kopch);
  color: #FFF6EF;
  box-shadow: var(--tin);
}
.knopka--holovna:hover { background: var(--kopch-svit); }

.knopka--obvid {
  background: transparent;
  border-color: var(--vugil);
  color: var(--vugil);
}
.knopka--obvid:hover { background: rgba(23, 17, 11, .07); }

.knopka--na-temnomu {
  background: transparent;
  border-color: rgba(243, 231, 212, .55);
  color: var(--tlo);
}
.knopka--na-temnomu:hover { background: rgba(243, 231, 212, .12); }

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

.knopka[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- 4. Шапка ----------
   Шапка — це та сама дошка, що всередині логотипу, тільки розгорнута
   на всю ширину: і текстура, і чорний напис узяті з самого логотипу.
   Тому ніякого кружечка тут нема — знак лежить прямо на дошці. */
.shapka {
  position: sticky;
  top: 0;
  z-index: var(--shar-shapka);
  /* Колір під картинкою підібраний під саму дошку (196,138,85):
     поки файл вантажиться, шапка не блимає іншим відтінком */
  background: #C48A55 url('img/doshka.jpg?v=49') repeat-x center / auto 100%;
  border-bottom: 2px solid rgba(23, 17, 11, .5);
  box-shadow: 0 6px 18px rgba(42, 28, 16, .28);
}
.shapka__ryad {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: var(--shapka-h);
  padding-block: var(--s2);
}
.shapka__znak {
  display: flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
}
.shapka__napys {
  width: auto;
  height: 46px;
  flex: none;
}
.shapka__misto {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  /* Дошка з фото світліша за колишню намальовану, тому чорнило довелося
     згустити: на .62 контраст був 3.1, а для дрібного тексту треба 4.5 */
  color: rgba(23, 17, 11, .84);
  white-space: nowrap;
}

/* Праворуч у шапці — меню й кошик. Обидві кнопки однакові на вигляд,
   різні тільки значки. */
.shapka__pravoruch {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
}

/* Меню в рядок — тільки на широкому екрані. На телефоні його місце
   займає бічна штора (розділ 4б), тому тут просто нема чого показувати. */
.menyu { display: none; }

/* Кнопки в шапці. На телефоні — самий значок, слово ховаємо:
   у рядку лишається місце тільки на знак і місто. */
.shapka__knopka {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  min-width: 44px;                   /* пальцем не промахнешся */
  padding: 0 var(--s3);
  border: 2px solid rgba(23, 17, 11, .55);
  border-radius: 999px;
  background: none;
  color: var(--vugil);
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  font-size: .93rem;
  white-space: nowrap;
  flex: none;
  cursor: pointer;
  transition: background-color .16s ease;
}
.shapka__knopka:hover { background: rgba(23, 17, 11, .12); }
.shapka__knopka[aria-expanded='true'] { background: rgba(23, 17, 11, .18); }
.shapka__ikonka {
  width: 21px; height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shapka__slovo { display: none; }
.shapka__lichylnyk {
  position: absolute;
  top: -7px; right: -7px;
  display: grid;
  place-items: center;
  min-width: 21px; height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--kopch);
  color: #FFF6EF;
  font-size: .72rem;
  font-weight: 700;
}

/* ---------- 4б. Бічна штора ----------
   Панель на всю висоту екрана, виїжджає справа. Це не просто список
   сторінок: сюди складено те саме, що в підвалі — розділи, дзвінок,
   месенджери, адреса, документи. З телефона все під рукою, гортати
   сторінку до низу не треба. */
.shtora {
  position: fixed;
  inset: 0;
  z-index: var(--shar-shtora);
  /* Закрита штора не просто прозора, а невидима для миші й клавіатури.
     visibility, на відміну від display, анімується — можна відкласти її
     вимкнення на час виїзду, і панель встигає поїхати назад. */
  visibility: hidden;
  transition: visibility 0s linear .32s;
}
.shtora[data-vidkryta='tak'] {
  visibility: visible;
  transition: visibility 0s;
}
.shtora__tin {
  position: absolute;
  inset: 0;
  background: rgba(23, 17, 11, .55);
  opacity: 0;
  transition: opacity .24s var(--hid-vyhid);
}
.shtora[data-vidkryta='tak'] .shtora__tin { opacity: 1; }

.shtora__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  display: flex;
  flex-direction: column;
  background: var(--dosk-tem) var(--dosk-uzor);
  color: var(--tlo);
  box-shadow: -18px 0 46px rgba(23, 17, 11, .5);
  /* Панель заїжджає на власну ширину: 100% рахується від неї самої,
     тому нічого не треба перераховувати, якщо ширина зміниться. */
  transform: translateX(100%);
  transition: transform .32s var(--hid-shtora);
}
.shtora[data-vidkryta='tak'] .shtora__panel { transform: translateX(0); }

/* Верх штори — та сама дошка, що в шапці. Не для краси: напис у логотипі
   чорний, і на темному дереві штори він майже не читався. На світлій
   дошці літери знову чорні по світлому, як задумано в самому знаку. */
.shtora__verh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: var(--shapka-h);
  padding: var(--s2) var(--s4);
  background: #C48A55 url('img/doshka.jpg?v=49') repeat-x center / auto 100%;
  border-bottom: 2px solid rgba(23, 17, 11, .5);
  flex: none;
}
.shtora__napys { width: auto; height: 40px; }
.shtora__hrest {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;      /* пальцем не промахнешся */
  flex: none;
  border: 2px solid rgba(23, 17, 11, .55);
  border-radius: 999px;
  background: none;
  color: var(--vugil);
  cursor: pointer;
  transition: background-color .16s ease;
}
.shtora__hrest:hover { background: rgba(23, 17, 11, .12); }
.shtora__hrest svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round;
}

.shtora__telo {
  flex: 1;
  overflow-y: auto;
  /* Прокрутка всередині штори не «протікає» на сторінку під нею:
     дочитав список до кінця — сторінка позаду лишається на місці */
  overscroll-behavior: contain;
  padding: var(--s4) var(--s4) var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.shtora__navi { display: flex; flex-direction: column; }
.shtora__navi a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 52px;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--linia-tem);
  color: var(--tlo);
  text-decoration: none;
  font-family: var(--shryft-zag);
  font-weight: 600;
  font-size: 1.24rem;
}
.shtora__strilka {
  color: rgba(243, 231, 212, .4);
  transition: transform .16s var(--hid-vyhid), color .16s ease;
}
.shtora__navi a:hover .shtora__strilka { transform: translateX(4px); color: var(--tlo); }
.shtora__navi a[aria-current='page'] { color: #E8B27A; }
.shtora__navi a[aria-current='page'] .shtora__strilka { color: #E8B27A; }

.shtora__grupa { display: flex; flex-direction: column; gap: var(--s3); }
.shtora__pidzag {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243, 231, 212, .5);
}
.shtora__rozdily {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  padding: 0; margin: 0;
}
.shtora__rozdily a {
  display: inline-flex;
  align-items: center;
  /* 44px, а не 38: это тап-цель в меню, по ней попадают пальцем */
  min-height: 44px;
  padding: 0 var(--s3);
  border: 1px solid var(--linia-tem);
  border-radius: 999px;
  color: var(--tlo);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  transition: background-color .16s ease;
}
.shtora__rozdily a:hover { background: rgba(243, 231, 212, .12); }

.shtora__dzvinok { width: 100%; }
.shtora__zvyazok {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s2);
}
.shtora__zvyazok a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--linia-tem);
  border-radius: 999px;
  color: var(--tlo);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 700;
  transition: background-color .16s ease;
}
.shtora__zvyazok a:hover { background: rgba(243, 231, 212, .12); }

.shtora__ryadok {
  margin: 0;
  font-size: .94rem;
  color: rgba(243, 231, 212, .82);
}

.shtora__dokumenty {
  list-style: none;
  padding: var(--s4) 0 0;
  margin: 0;
  border-top: 1px solid var(--linia-tem);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.shtora__dokumenty a {
  color: rgba(243, 231, 212, .62);
  text-decoration: none;
  font-size: .86rem;
}
.shtora__dokumenty a:hover { color: var(--tlo); text-decoration: underline; }

/* Поки штора відкрита, сторінка під нею не прокручується */
.telo--zamknene { overflow: hidden; }

/* Кому системно вимкнено рух — штора не їде, а просто проявляється.
   Не «нічого не анімуємо», а м'якше: поява лишається, зсув прибрано. */
@media (prefers-reduced-motion: reduce) {
  .shtora__panel {
    transform: none;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .shtora[data-vidkryta='tak'] .shtora__panel { opacity: 1; }
  .shtora { transition-delay: .2s; }
}

/* ---------- 4в. Шторка вибору ваги ----------
   Виїжджає знизу, коли на плитці натиснули «+». Знизу, а не з боку:
   палець тримає телефон унизу, і кнопка «Додати» опиняється прямо
   під ним. На широкому екрані миша ходить будь-де, тому там це
   звичайне віконце посередині.

   Влаштована так само, як бічна штора: visibility з відкладеним
   вимкненням, щоб панель встигла поїхати назад, а закрита шторка
   не ловила ні мишу, ні клавіатуру. */
.vybir-vahy {
  position: fixed;
  inset: 0;
  z-index: var(--shar-shtora);
  visibility: hidden;
  transition: visibility 0s linear .3s;
}
.vybir-vahy[data-vidkryta='tak'] {
  visibility: visible;
  transition: visibility 0s;
}
.vybir-vahy__tin {
  position: absolute;
  inset: 0;
  background: rgba(23, 17, 11, .55);
  opacity: 0;
  transition: opacity .24s var(--hid-vyhid);
}
.vybir-vahy[data-vidkryta='tak'] .vybir-vahy__tin { opacity: 1; }

.vybir-vahy__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--tlo);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -18px 46px rgba(23, 17, 11, .35);
  /* Заїжджає на власну висоту: 100% рахується від самої панелі,
     тому нічого не треба переміряти, якщо в раків додасться рядок варок. */
  transform: translateY(100%);
  transition: transform .3s var(--hid-shtora);
}
.vybir-vahy[data-vidkryta='tak'] .vybir-vahy__panel { transform: translateY(0); }

.vybir-vahy__verh {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s5) var(--s4) var(--s4);
  border-bottom: 1px solid var(--linia);
  flex: none;
}
.vybir-vahy__pidpysy { min-width: 0; }
.vybir-vahy__nazva {
  font-family: var(--shryft-zag);
  font-weight: 800;
  font-size: 1.24rem;
  line-height: 1.2;
}
.vybir-vahy__za {
  margin-top: var(--s1);
  font-size: .88rem;
  font-weight: 600;
  color: var(--kopch);
}
.vybir-vahy__telo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s5) var(--s4) var(--s6);
}
/* Не звичайне текстове посилання, а друга дія в діалозі — по ній
   тиснуть пальцем нарівні з «Додати», тому вона теж 44 px заввишки. */
.vybir-vahy__dali {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: var(--s2);
  font-size: .88rem;
  color: var(--tekst-2);
}

@media (min-width: 600px) {
  .vybir-vahy__panel {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(92vw, 440px);
    max-height: 86vh;
    border-radius: var(--r-l);
    /* Посередині екрана панель не «виїжджає», а підіймається на 12 px
       і проявляється — виїзд знизу на всю висоту вікна тут виглядав би
       як помилка, вікно ж не притиснуте до краю. */
    transform: translate(-50%, calc(-50% + 12px));
    opacity: 0;
    transition: transform .22s var(--hid-vyhid), opacity .22s var(--hid-vyhid);
  }
  .vybir-vahy[data-vidkryta='tak'] .vybir-vahy__panel {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vybir-vahy__panel {
    transform: none;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .vybir-vahy[data-vidkryta='tak'] .vybir-vahy__panel { transform: none; opacity: 1; }
  .vybir-vahy { transition-delay: .2s; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 600px) {
  .vybir-vahy__panel { transform: translate(-50%, -50%); }
  .vybir-vahy[data-vidkryta='tak'] .vybir-vahy__panel { transform: translate(-50%, -50%); }
}

/* ---------- 5. Герой ---------- */
.geroy {
  position: relative;
  color: var(--tlo);
  text-align: center;
  padding-block: var(--s8);
  overflow: hidden;
  /* Знімок вітрини лежить поверх дошки. Якщо файл не підвантажиться,
     нижнім шаром лишається дерево — блок не стане порожньою плямою.
     На телефон віддаємо обрізану серединку: широкий кадр там усе одно
     не видно, а важить він удвічі більше. */
  background-image: url('img/vitryna-mob.jpg?v=49'), var(--dosk-uzor);
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
}
.geroy::after {
  /* Затемнення знімка: без нього кремовий текст губиться на світлій рибі.
     Знизу темніше за верх, бо там дрібний рядок з адресою.
     Проценти підібрані по заміру: під підзаголовком контраст 5.4 —
     запас над нормою 4.5 є, а риба вже не така темна. */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(23, 17, 11, .72) 0%,
    rgba(23, 17, 11, .64) 38%,
    rgba(23, 17, 11, .82) 100%
  );
  pointer-events: none;
}
.geroy__vmist { position: relative; z-index: 1; }
.geroy h1 { margin-bottom: var(--s4); }
.geroy__pid {
  max-width: 34ch;
  margin: 0 auto var(--s6);
  color: rgba(243, 231, 212, .82);
  font-size: 1.05rem;
}
.geroy__knopky {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: center;
}
/* Адреса й графік — двома рядками строго по центру. Одним рядком
   через крапку воно ламалося посеред «з 8:00 до 20:00». */
.geroy__adresa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  margin-top: var(--s6);
  font-size: .9rem;
  color: rgba(243, 231, 212, .66);
}
.geroy__adresa strong { color: var(--tlo); font-weight: 600; }

/* ---------- 6. Секції ---------- */
.sekciya { padding-block: var(--s7); }
.sekciya--tiho { background: var(--tlo-2); }

.sekciya__shapka {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s3);
  flex-wrap: wrap;
}
.sekciya__pid {
  color: var(--tekst-2);
  max-width: 56ch;
  margin: var(--s3) 0 var(--s5);
}
.sekciya__dali {
  color: var(--kopch);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.sekciya__dali:hover { text-decoration: underline; }

/* ---------- 7. Плитки розділів ---------- */
/* Плитки квадратні й по дві в ряд навіть на телефоні: замовник дасть
   фото на кожен розділ, і воно ляже у верхню квадратну частину. */
.rozdily {
  display: grid;
  /* minmax(0, 1fr), а не просто 1fr: інакше довге слово («Морепродукти»)
     розсуває свою колонку, і плитки виходять різної ширини */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  list-style: none;
  padding: 0; margin: 0;
}
/* Плитка лежить усередині <li>, і сітка розтягує саме <li>, а не посилання.
   Без height: 100% плитка з двома рядками назви виходила вищою за сусідні —
   у ряду одна картка помітно «випадала». */
.rozdily > li { display: flex; }
.rozdil-plytka {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: var(--r-l);
  overflow: hidden;                  /* щоб фото не вилазило за скруглення */
  color: var(--tlo);
  text-decoration: none;
  box-shadow: var(--tin);
  transition: transform .16s ease, box-shadow .16s ease;
}
.rozdil-plytka:hover {
  transform: translateY(-2px);
  box-shadow: var(--tin-silna);
}
/* Місце під майбутнє фото. Поки порожнє — тримає квадрат, щоб плитки
   не стрибали, коли фото з'являться. */
.rozdil-plytka__foto {
  aspect-ratio: 1 / 1;
  flex: none;                        /* щоб квадрат не розтягувався,
                                        коли сусідня плитка вища */
  display: grid;
  place-items: center;
  background: rgba(23, 17, 11, .17);
  color: rgba(243, 231, 212, .38);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rozdil-plytka__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.rozdil-plytka__pidpys {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  flex: 1;                           /* забирає решту висоти плитки */
}
.rozdil-plytka__nazva {
  font-family: var(--shryft-zag);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.15;
}
.rozdil-plytka__skilky {
  display: block;
  font-family: var(--shryft);
  font-weight: 400;
  font-size: .78rem;
  color: rgba(243, 231, 212, .68);
  margin-top: var(--s1);
}
.rozdil-plytka__strilka {
  margin-left: auto;
  font-size: 1.3rem;
  opacity: .6;
  flex: none;
}

/* ---------- 8. Стрічка розділів у каталозі ---------- */
.stryzhka {
  position: sticky;
  top: var(--shapka-vsya);
  z-index: var(--shar-stryzhka);
  background: var(--tlo);
  border-bottom: 1px solid var(--linia);
}
.stryzhka__ryad {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;              /* смугу прокрутки ховаємо: */
  padding: var(--s3) 16px;            /* стрічку листають пальцем */
  scroll-padding-inline: 16px;
}
.stryzhka__ryad::-webkit-scrollbar { display: none; }

.vkladka {
  flex: none;
  /* 44, а не 42: нижче цього пальцем важко влучити. Заміряно — було 42. */
  min-height: 44px;
  padding: 0 var(--s4);
  border: 2px solid var(--linia);
  border-radius: 999px;
  background: var(--kartka);
  color: var(--vugil);
  font: 600 .92rem/1 var(--shryft);
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.vkladka:hover { border-color: var(--dosk); }
.vkladka[aria-pressed='true'] {
  background: var(--vugil);
  border-color: var(--vugil);
  color: var(--tlo);
}

/* ---------- 9. Сітка товарів ---------- */
.tovary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
  list-style: none;
  padding: 0; margin: 0;
}

.tovar {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--kartka);
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tovar:hover {
  transform: translateY(-2px);
  border-color: var(--dosk);
  box-shadow: var(--tin-silna);
}

/* Уся картка — одне посилання. Кнопка «+» лежить зверху окремо. */
.tovar__lynk {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

/* Рамка під фото. Пропорція жорстка (4:3) — саме через неї плитки не
   стрибають, поки фото довантажуються: висота відома ще до картинки,
   тому width/height на самому <img> не потрібні. Замовник вантажить
   фото різної форми, обрізає їх object-fit, а не ми в редакторі.
   Дошка під сподом лишається видимою, поки фото немає зовсім. */
.tovar__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--tlo-2);
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 26px,
    rgba(42, 28, 16, .08) 26px 28px
  );
  color: var(--tekst-3);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tovar__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Плавне збільшення при наведенні: фото — головне, за чим сюди
     прийшли, і воно єдине на картці відповідає на дотик. */
  transition: transform .4s var(--hid-vyhid);
}
.tovar:hover .tovar__foto img { transform: scale(1.04); }

/* Напис на місці незавантаженого фото. Відступ саме тут, а не на рамці:
   рамці він зіпсував би фото — картинка стояла б у полі, а не впритул. */
.foto-nema {
  padding: var(--s3);
  color: var(--tekst-3);
}

.tovar__telo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s1);
  padding: var(--s4);
}
.tovar__nazva {
  font-family: var(--shryft-zag);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.25;
}
.tovar__korotko {
  font-size: .82rem;
  color: var(--tekst-2);
  line-height: 1.4;
}
.tovar__niz {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: auto;
  padding: 0 var(--s4) var(--s4);
}
.tovar__cina {
  font-family: var(--shryft-zag);
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--kopch);
  line-height: 1.1;
}
.tovar__cina span {
  display: block;
  font-family: var(--shryft);
  font-weight: 400;
  font-size: .72rem;
  color: var(--tekst-3);
}
.tovar__plyus {
  flex: none;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--vugil);
  color: var(--tlo);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .16s ease, transform .16s ease;
}
.tovar__plyus:hover { background: var(--kopch); }
.tovar__plyus:active { transform: scale(.92); }

/* ---------- Погашений товар ----------
   Замовник не видаляє картку, коли рибу розібрали, — він гасить її
   галочкою в панелі. Фото, опис і ціна лишаються, зверху лягає
   притемнення. Повернувся товар — галочку зняли, і все на місці.

   Притемнення саме на фото, а не на всій картці: назву й ціну людина
   має прочитати без зусиль — вона прийшла дізнатися саме їх, перш ніж
   вирішити, чи чекати наступного завозу. */
.plashka-nema {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: var(--s3);
  background: rgba(23, 17, 11, .52);
  color: #FFF6EF;
  font-family: var(--shryft-zag);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .03em;
  text-transform: none;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
/* Погашену картку не піднімаємо при наведенні й не збільшуємо фото:
   тягнути до дії, якої немає, — це обіцянка, яку картка не виконає. */
.tovar--nema:hover {
  transform: none;
  border-color: var(--linia);
  box-shadow: none;
}
.tovar--nema:hover .tovar__foto img { transform: none; }
.tovar--nema .tovar__cina { color: var(--tekst-3); }
/* Слово замість кнопки «+». Висота така сама, як у кнопки, — інакше
   низ картки з'їжджає й сітка виглядає нерівною. */
.tovar__nema {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--s3);
  border-radius: 999px;
  background: rgba(23, 17, 11, .07);
  color: var(--tekst-3);
  font-size: .78rem;
  font-weight: 500;
}

.znachok-hit {
  position: absolute;
  top: var(--s3); left: var(--s3);
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--kopch);
  color: #FFF6EF;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.porozhno {
  padding: var(--s7) 0;
  text-align: center;
  color: var(--tekst-2);
}

/* ---------- 10. Сторінка товару ---------- */
.shlyah {
  padding-block: var(--s4);
  font-size: .84rem;
  color: var(--tekst-2);
}
.shlyah a { color: var(--tekst-2); }
.shlyah span { margin-inline: var(--s2); color: var(--tekst-3); }

.karta { padding-bottom: var(--s7); }

.karta__verh {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  align-items: start;
}

/* Галерея товару. Скільки фото завантажив замовник — стільки й рамок.
   Одне фото не розтягуємо на дві колонки (риба вийшла б панорамою),
   а лишаємо квадрат на всю ширину — див. --odne нижче. */
.karta__foto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
}
.karta__foto--odne { grid-template-columns: 1fr; }
.karta__ramka {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-l);
  background-color: var(--tlo-2);
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 34px,
    rgba(42, 28, 16, .08) 34px 36px
  );
  color: var(--tekst-3);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
}
.karta__ramka img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.karta__nazva { margin-bottom: var(--s3); }
.karta__korotko {
  color: var(--tekst-2);
  font-size: 1.02rem;
  margin-bottom: var(--s5);
}

.kupivlya {
  padding: var(--s5);
  background: var(--kartka);
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  box-shadow: var(--tin);
}
.kupivlya__cina {
  font-family: var(--shryft-zag);
  font-weight: 800;
  font-size: 2rem;
  color: var(--kopch);
  line-height: 1.05;
}
.kupivlya__za {
  color: var(--tekst-3);
  font-size: .86rem;
  margin-bottom: var(--s5);
}

/* Блок покупки, коли товар розібрали. Ціну лишаємо великою: людина
   прийшла на сторінку саме за нею й піде шукати далі, якщо не побачить.
   Замість вибору ваги — те, що працює просто зараз: подзвонити. */
.kupivlya--nema { background: var(--tlo-2); }
.kupivlya--nema .kupivlya__cina { color: var(--tekst-2); }
.kupivlya__nema {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--vugil);
  color: var(--tlo);
  font-family: var(--shryft-zag);
  font-weight: 700;
  font-size: .84rem;
  margin-bottom: var(--s3);
}
.kupivlya--nema .knopka { margin-top: var(--s4); }

/* Перемикач ваги — головна річ на сторінці.
   Рибу беруть на вагу, тому людина має бачити не «ціну за кіло»,
   а скільки заплатить за той шматок, який реально бере. */
.vaha__pidpys {
  font-weight: 700;
  font-size: .88rem;
  margin-bottom: var(--s3);
}
.vaha__ryad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s5);
}
.vaha__knopka {
  min-height: 46px;
  padding: 0 var(--s4);
  border: 2px solid var(--linia);
  border-radius: 999px;
  background: transparent;
  color: var(--vugil);
  font: 600 .92rem/1 var(--shryft);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.vaha__knopka:hover { border-color: var(--dosk); }
.vaha__knopka[aria-pressed='true'] {
  background: var(--vugil);
  border-color: var(--vugil);
  color: var(--tlo);
}

.karta__nyz {
  margin-top: var(--s7);
  display: grid;
  gap: var(--s5);
}
.fakt {
  padding: var(--s5);
  background: var(--kartka);
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
}
.fakt h3 { margin-bottom: var(--s3); }
.fakt p:last-child { margin-bottom: 0; }

/* ---------- 11. Кошик ----------
   Рядок у два поверхи: зверху товар і сума, знизу — керування.
   Керування винесене окремим поверхом навмисне: на 320 px вибір ваги
   й лічильник поруч із назвою не вміщаються, а тиснути по них треба
   пальцем, тому стискати їх не можна. */
.ryadok {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  grid-template-areas:
    'foto telo suma'
    'keru keru keru';
  align-items: center;
  gap: var(--s4) var(--s4);
  padding: var(--s4);
  background: var(--kartka);
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  margin-bottom: var(--s3);
}
.ryadok__foto {
  grid-area: foto;
  width: 64px; height: 64px;
  flex: none;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--tlo-2);
}
.ryadok__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.ryadok__telo { grid-area: telo; min-width: 0; }
.ryadok__nazva {
  font-family: var(--shryft-zag);
  font-weight: 600;
  font-size: .96rem;
  line-height: 1.25;
}
.ryadok__pid { font-size: .82rem; color: var(--tekst-2); }
.ryadok__prava { grid-area: suma; text-align: right; }
.ryadok__suma {
  font-family: var(--shryft-zag);
  font-weight: 800;
  color: var(--kopch);
  white-space: nowrap;
}
/* Напис маленький і тихий навмисне — прибрати товар не має бути
   помітнішим за саме замовлення. Але цілитися пальцем усе одно треба,
   тому навколо напису 44 px порожнечі: видно 24, натиснути можна по 44. */
.ryadok__prybraty {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: none;
  background: none;
  padding: 0;
  color: var(--tekst-3);
  font: 400 .8rem var(--shryft);
  text-decoration: underline;
  cursor: pointer;
}
.ryadok__prybraty:hover { color: var(--kopch); }

.ryadok__keruvannya {
  grid-area: keru;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--linia);
}
/* Підпис «Вага» стоїть над полем, а не всередині: у списку вже написано
   «500 г», і без підпису незрозуміло, що це можна перемкнути. */
.ryadok__vaha {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* «Живими, без варки» — довгий напис. Без цих двох рядків поле
     розсовує картку і вилазить за край екрана на 320 px. */
  min-width: 0;
  max-width: 100%;
}
.ryadok__vaha > span {
  font-size: .72rem;
  color: var(--tekst-3);
}
/* height, а не min-height, і обов'язково appearance: none.
   Safari (WebKit) мовчки ігнорує min-height на <select> — заміряно
   02.09.2026: у Chromium поле виходило 44 px, у Safari 25 px, тобто
   пальцем по ньому не влучиш. Приберемо системний вигляд — і висота
   починає діяти в обох. Разом із системним виглядом зникає й стрілка,
   тому малюємо свою фоном. */
.ryadok__vaha select {
  appearance: none;
  -webkit-appearance: none;
  height: 44px;
  padding: 0 34px 0 var(--s3);
  border: 2px solid var(--linia);
  border-radius: 999px;
  background: var(--tlo)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317110B' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 10px center / 15px 15px;
  color: var(--vugil);
  font: 600 .92rem var(--shryft);
  cursor: pointer;
}
.ryadok__vaha select:focus { border-color: var(--kopch); outline: none; }

/* Лічильник штук. Одна пілюля з двома кнопками всередині — так само
   скруглена, як усі кнопки сайту. */
.lichyty {
  display: flex;
  align-items: center;
  align-self: flex-end;
  border: 2px solid var(--linia);
  border-radius: 999px;
  overflow: hidden;
}
.lichyty button {
  width: 44px; height: 44px;
  flex: none;
  border: none;
  background: none;
  color: var(--vugil);
  font: 600 1.24rem/1 var(--shryft);
  cursor: pointer;
  transition: background-color .16s ease;
}
.lichyty button:hover:not(:disabled) { background: var(--tlo-2); }
.lichyty button:disabled { color: var(--tekst-3); cursor: default; }
.lichyty__chyslo {
  min-width: 28px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Перенос і проміжок обов'язкові: на 320 px чотиризначна сума
   («2 830 ₴») впритул сходилася зі словами «Разом, попередньо» —
   виглядало як склеєний текст. */
.pidsumok {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--s5);
  background: var(--tlo-2);
  border-radius: var(--r-l);
  margin-block: var(--s5);
}
.pidsumok__suma {
  font-family: var(--shryft-zag);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--kopch);
}
/* «Разом» і «попередньо» мають бути в одному рядку, але «попередньо» —
   пояснення, а не частина назви, тому воно тихіше. */
.pidsumok > span:first-child { font-weight: 600; }

/* Примітка про вагу. Тонкий текст, але не сірий шепіт: людина мусить
   його прочитати до оплати, інакше вирішить, що її обрахували. */
.nota {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--tekst-2);
  margin-block: 0 var(--s5);
}
.nota--pid-knopkoyu { margin-block: var(--s3) 0; text-align: center; }
/* Обмеження на живих раків. Не помилка й не попередження — просто
   умова магазину, тому колір копчений, а не червоний: лякати людину
   на кнопці «додати в кошик» не за що. */
.nota--zhyvi {
  margin-block: var(--s3) 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-s);
  background: rgba(169, 69, 15, .08);
  color: var(--kopch);
}

/* ---------- 11б. Екран прийнятого замовлення ---------- */
.prynyato { padding-top: var(--s3); }

.prynyato__nomer {
  display: inline-block;
  padding: var(--s2) var(--s4);
  border-radius: 999px;
  background: var(--kopch);
  color: var(--tlo);
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: var(--s4);
}
.prynyato__slovo {
  font-size: 1.06rem;
  line-height: 1.55;
  margin-bottom: var(--s6);
  max-width: 46ch;
}
.prynyato__pidzag {
  font-size: 1.05rem;
  margin-bottom: var(--s3);
}
.prynyato__ryadok {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--linia);
}
.prynyato__ryadok span { font-weight: 600; }
.prynyato__ryadok small {
  display: block;
  font-weight: 400;
  font-size: .84rem;
  color: var(--tekst-2);
  margin-top: 2px;
}
.prynyato__cina { white-space: nowrap; }

.prynyato__dani {
  margin: 0 0 var(--s6);
  padding: var(--s4) var(--s5);
  background: var(--tlo-2);
  border-radius: var(--r-l);
}
/* Пара «підпис — значення» в один рядок на широкому екрані і
   у два на телефоні: 320 px не вистачає, щоб «Доставка» і
   «Самовивіз — вул. Соборності, 24» стали поруч. */
.prynyato__para { padding-block: var(--s2); }
.prynyato__para dt {
  font-size: .82rem;
  color: var(--tekst-2);
}
.prynyato__para dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
@media (min-width: 560px) {
  .prynyato__para {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--s4);
    align-items: baseline;
  }
}

.prynyato__terminovo {
  font-size: .9rem;
  color: var(--tekst-2);
  margin-bottom: var(--s5);
}

/* ---------- 12. Форма ---------- */
.forma { display: grid; gap: var(--s4); }
.pole { display: grid; gap: var(--s2); }
.pole > span { font-weight: 600; font-size: .9rem; }
.pole input,
.pole textarea,
.pole select {
  width: 100%;
  min-height: 48px;
  padding: var(--s3) var(--s4);
  border: 2px solid var(--linia);
  border-radius: var(--r-m);
  background: var(--kartka);
  color: var(--vugil);
  font: 400 1rem var(--shryft);
  transition: border-color .16s ease;
}
.pole textarea { min-height: 96px; resize: vertical; }
/* Те саме, що в кошику: Safari ігнорує min-height на <select>, і поля
   «Як доставити» та «Область» виходили заввишки 28 px замість 48 —
   заміряно 02.09.2026. Прибираємо системний вигляд, ставимо тверду
   висоту й малюємо свою стрілку. Люди приходять з TikTok на айфонах,
   тому це не дрібниця, а зламане оформлення замовлення. */
.pole select {
  appearance: none;
  -webkit-appearance: none;
  height: 48px;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317110B' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s4) center;
  background-size: 16px 16px;
}
.pole input:focus,
.pole textarea:focus,
.pole select:focus { border-color: var(--kopch); outline: none; }
.pole__pidkazka { font-size: .8rem; font-weight: 400; color: var(--tekst-3); }

/* Поля під обраний спосіб доставки. Свій проміжок, бо це один блок
   усередині форми, а не окремі її діти. */
.forma__polya { display: grid; gap: var(--s4); }
.forma__polya:empty { display: none; }

.nota--u-formi { margin-block: 0; }

/* Вибір месенджера. Кнопки-пілюлі, а не список із кружечками:
   пальцем у кружечок діаметром 16 px не влучити, а тут ціла пілюля
   заввишки 48 px — і форма та сама, що в усіх кнопок сайту. */
.vybir {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.vybir__punkt { flex: none; }
/* Саме коло радіо ховаємо, але не через display:none — так воно
   зникає і для клавіатури. Лишаємо на місці й робимо невидимим. */
.vybir__punkt input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.vybir__punkt span {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--s4);
  border: 2px solid var(--linia);
  border-radius: 999px;
  background: var(--kartka);
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.vybir__punkt input:checked + span {
  background: var(--vugil);
  border-color: var(--vugil);
  color: var(--tlo);
}
/* Обведення при ході з клавіатури: без нього людина, яка не бачить
   курсора миші, не розуміє, де вона зараз. */
.vybir__punkt input:focus-visible + span {
  outline: 3px solid var(--kopch);
  outline-offset: 2px;
}

/* Пастка для ботів. Людина цього поля не бачить. */
.pastka {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.pomylka {
  color: #A3200E;
  font-size: .85rem;
  font-weight: 600;
}

/* Записка — пояснення поруч із формою й підтвердження після відправлення.
   Рамка суцільна, а не пунктирна: пунктир читається як «тут ще не готово»,
   а це звичайний робочий текст магазину. */
.zapyska {
  display: flex;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--linia);
  border-left: 4px solid var(--dosk);
  border-radius: var(--r-m);
  background: rgba(165, 112, 62, .09);
  font-size: .88rem;
  color: var(--tekst-2);
  margin-bottom: var(--s5);
}
.zapyska strong { color: var(--vugil); }
/* Той самий блок, але про неприємне: позицію розібрали, поки кошик лежав.
   Колір копчений, а не червоний — це не помилка людини й не збій сайту,
   а звичайна новина з вітрини. */
.zapyska--uvaha {
  border-left-color: var(--kopch);
  background: rgba(169, 69, 15, .08);
}

/* Дані не завантажились. Показуємо поверх усього, бо решта сторінки
   в цей момент порожня й людина вирішить, що магазин закрився. */
.zbiy {
  margin: var(--s5) auto;
  /* Блок вставляється в самий верх <body>, поза звичайним обхватом,
     тому поля рахуємо самі — інакше на 320 px він ліпиться до країв. */
  max-width: min(560px, calc(100% - 32px));
  padding: var(--s5);
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  background: var(--kartka);
  text-align: center;
}
.zbiy p { margin-bottom: var(--s4); color: var(--tekst-2); }

/* ---------- 12б. Сторінка контактів ---------- */
.zvyazok {
  display: grid;
  gap: var(--s3);
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s5);
}
.zvyazok-plytka {
  display: block;
  min-height: 64px;                  /* пальцем, не мишкою */
  padding: var(--s3) var(--s5);
  border: 2px solid var(--linia);
  border-radius: var(--r-l);
  background: var(--kartka);
  text-decoration: none;
  box-shadow: var(--tin);
  transition: transform .16s ease, box-shadow .16s ease;
}
.zvyazok-plytka:hover {
  transform: translateY(-2px);
  box-shadow: var(--tin-silna);
}
.zvyazok-plytka--holovna {
  background: var(--kopch);
  border-color: var(--kopch);
  color: #FFF6EF;
}
.zvyazok-plytka__nazva {
  display: block;
  font-family: var(--shryft-zag);
  font-weight: 800;
  font-size: 1.1rem;
}
.zvyazok-plytka__pid {
  display: block;
  font-size: .85rem;
  color: var(--tekst-2);
  margin-top: 2px;
}
.zvyazok-plytka--holovna .zvyazok-plytka__pid { color: rgba(255, 246, 239, .82); }

.dovidka {
  display: grid;
  gap: var(--s2) var(--s5);
  margin: 0 0 var(--s5);
}
.dovidka dt {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tekst-3);
}
.dovidka dd { margin: 0 0 var(--s3); font-weight: 500; }

/* ---------- 12б. Текстові сторінки: доставка, оферта, документи ----------
   Довгий текст люди не читають підряд — вони шукають очима свій абзац.
   Тому заголовки тут з великим повітрям зверху, рядок вузький,
   а найважливіше винесене в рамку. */
.stattya__zag {
  margin-top: var(--s7);
  margin-bottom: var(--s4);
}
.sekciya > p,
.sekciya > ul.perelik,
.sekciya > ol,
.sekciya > dl {
  /* 68 знаків у рядку. Ширше — око губить початок наступного рядка */
  max-width: 68ch;
}

/* Три способи доставки — картками в ряд, щоб їх порівнювали, а не читали */
.sposoby {
  display: grid;
  gap: var(--s3);
  list-style: none;
  padding: 0; margin: 0;
}
.sposib {
  display: flex;
  flex-direction: column;
  padding: var(--s5);
  background: var(--kartka);
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
}
.sposib__nazva {
  margin: 0 0 var(--s1);
  font-family: var(--shryft-zag);
  font-weight: 800;
  font-size: 1.08rem;
}
.sposib__cina {
  margin: 0 0 var(--s3);
  color: var(--kopch);
  font-weight: 700;
  font-size: .95rem;
}
.sposib__tekst {
  margin: 0;
  font-size: .94rem;
  color: var(--tekst-2);
}

/* Абзац, через який зазвичай і виникають суперечки, — у рамці */
.vazhlyvo {
  max-width: 68ch;
  padding: var(--s4) var(--s5);
  /* Смуга ліворуч, а не заливка на весь блок: заливка кольором копчення
     сперечалася б з кнопками, а вони на сторінці головніші */
  border-left: 4px solid var(--kopch);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  background: var(--tlo-2);
  font-size: .96rem;
}

.perelik {
  padding-left: var(--s5);
  margin: 0 0 var(--s4);
  display: grid;
  gap: var(--s3);
}
.perelik li { color: var(--tekst-2); }
/* Поле реквізитів, якого замовник ще не дав. Видно, що воно не забуте,
   а просто чекає даних — і видно нам, і читачеві. */
.utochnyuietsya { color: var(--tekst-3); font-style: italic; }
.stattya__onovleno {
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--linia);
  color: var(--tekst-3);
  font-size: .84rem;
}
.perelik strong, .vazhlyvo strong { color: var(--vugil); }

/* ---------- 13. Кроки «як замовити» ---------- */
.kroky {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  list-style: none;
  padding: 0; margin: 0;
  counter-reset: krok;
}
.kroky li {
  counter-increment: krok;
  display: flex;
  gap: var(--s4);
  padding: var(--s5);
  background: var(--kartka);
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
}
.kroky li::before {
  content: counter(krok);
  flex: none;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vugil);
  color: var(--tlo);
  font-family: var(--shryft-zag);
  font-weight: 800;
}
.kroky h3 { margin-bottom: var(--s1); font-size: 1.02rem; }
.kroky p { margin: 0; font-size: .9rem; color: var(--tekst-2); }

/* ---------- 14. Нижня панель на телефоні ---------- */
.panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--shar-panel);
  display: flex;
  gap: var(--s2);
  padding: var(--s2) 16px calc(var(--s2) + env(safe-area-inset-bottom));
  background: rgba(42, 28, 16, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--linia-tem);
}
.panel .knopka { flex: 1; min-height: 52px; }
/* Кружечок з кількістю. Раніше він був мідний на мідній кнопці —
   на око зливався, і поруч зі словом «Кошик» висіла гола цифра.
   Тепер навпаки: світлий кружечок, мідна цифра всередині. */
.panel__lichylnyk {
  display: inline-grid;
  place-items: center;
  min-width: 22px; height: 22px;
  margin-left: var(--s2);
  padding-inline: 6px;
  border-radius: 999px;
  background: #FFF6EF;
  color: var(--kopch);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
}

/* Смикання лічильника, коли товар поклали в кошик.
   Зроблено на @keyframes, а не на transition, свідомо: тут не перехід
   з одного стану в інший, а разовий поштовх, і кожне нове натискання
   має програватися заново. Рахується мимо основного потоку, тому
   не гальмує навіть коли сторінка ще довантажує знімки. */
@keyframes lichylnyk-smyk {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.32); }
  100% { transform: scale(1); }
}
.lichylnyk--smyk { animation: lichylnyk-smyk .34s var(--hid-vyhid); }

/* ---------- 14б. Коротке повідомлення ---------- */
.spovishchennya {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: calc(var(--shar-panel) + 1);
  margin-inline: auto;
  max-width: 420px;
  padding: var(--s3) var(--s5);
  border-radius: 999px;
  background: var(--vugil);
  color: var(--tlo);
  font-size: .88rem;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--tin-silna);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .2s var(--hid-vyhid), transform .2s var(--hid-vyhid);
}
.spovishchennya[data-vydno] { opacity: 1; transform: translateY(0); }

@media (min-width: 900px) {
  .spovishchennya { bottom: 24px; }
}

/* ---------- 15. Підвал ---------- */
.pidval {
  color: rgba(243, 231, 212, .74);
  padding-block: var(--s7) var(--s6);
  font-size: .92rem;
}
.pidval__sitka {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  margin-bottom: var(--s6);
}
.pidval h3 {
  color: var(--tlo);
  font-size: 1rem;
  margin-bottom: var(--s3);
}
.pidval a { color: rgba(243, 231, 212, .74); text-decoration: none; }
.pidval a:hover { color: var(--tlo); text-decoration: underline; }
.pidval ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
/* У підвалі стоять телефон, Viber, Telegram, WhatsApp і TikTok — це
   не текст, це кнопки зв'язку, по них тиснуть пальцем. Рядок тексту
   заввишки 18 px для пальця замалий: промах веде в сусідній месенджер.
   Тому кожне посилання розтягуємо на 44 px і прибираємо проміжок між
   рядками — інакше колонка з п'яти пунктів роз'їхалася б на 260 px.
   Смуга натискання ширша за самі букви, але це якраз і треба. */
.pidval ul:has(a) { gap: 0; }
.pidval li a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* Телефон усередині речення («подзвоніть нам: 098 …») — інша історія.
   Там це текст, і розтягувати рядок на 44 px не можна: абзац
   розсипався б. Але тиснути по ньому все одно будуть. Тому нарощуємо
   не рядок, а саму зону натискання: внутрішній відступ робить її
   близько 45 px заввишки, а від'ємний зовнішній повертає рядок на
   місце. Висота абзацу не міняється — це перевірено вимірюванням. */
main p a[href^="tel:"]:not(.knopka),
main li a[href^="tel:"]:not(.knopka) {
  padding-block: 12px;
  margin-block: -12px;
}
.pidval__niz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-top: var(--s5);
  border-top: 1px solid var(--linia-tem);
  color: rgba(243, 231, 212, .5);
  font-size: .82rem;
}
/* Підпис студії. Тихий за замовчуванням, ім'я — світліше: підпис має бути
   помітним тому, хто його шукає, і непомітним усім іншим. */
.pidval__avtor { display: inline-flex; gap: 5px; }
.pidval__avtor strong { color: rgba(243, 231, 212, .8); font-weight: 700; }
.pidval__avtor:hover strong { color: var(--tlo); }

/* ---------- 16. Ширші екрани ---------- */
@media (min-width: 640px) {
  /* З цієї ширини вже видно весь стіл — віддаємо широкий кадр */
  .geroy {
    background-image: url('img/vitryna.jpg?v=49'), var(--dosk-uzor);
    background-position: center 58%, center;
  }
  .tovary { grid-template-columns: repeat(3, 1fr); }
  .rozdily { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kroky { grid-template-columns: repeat(3, 1fr); }
  .zvyazok { grid-template-columns: repeat(2, 1fr); }
  .dovidka { grid-template-columns: max-content 1fr; align-items: baseline; }
  .sposoby { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pidval__sitka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karta__nyz { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }          /* панель ховається — місце не треба */
  .panel { display: none; }
  /* Місця вистачає — меню стає звичайним рядком на дошці,
     кнопка «Меню» й штора більше не потрібні */
  .menyu {
    display: flex;
    flex-direction: row;
    gap: var(--s5);
  }
  .menyu a {
    padding: var(--s2) 0;
    border-bottom: 2px solid transparent;
    color: rgba(23, 17, 11, .9);
    text-decoration: none;
    font-weight: 700;
    font-size: .95rem;
    transition: color .16s ease, border-color .16s ease;
  }
  .menyu a:hover, .menyu a[aria-current='page'] {
    color: var(--vugil);
    border-bottom-color: var(--vugil);
  }
  .shtora { display: none; }
  /* Перша колонка ширша: там абзац про магазин, решта — короткі списки */
  .pidval__sitka { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: var(--s5); }
  .shapka__pravoruch { gap: var(--s5); }
  .shapka__knopka[data-menyu-knopka] { display: none; }
  .shapka__slovo { display: inline; }
  .shapka__koshyk { padding: 0 var(--s4); }
  .tovary { grid-template-columns: repeat(4, 1fr); }
  /* Скільки розділів — стільки й колонок. Жорстке repeat(6) лишало
     порожню дірку в ряду, коли розділів стало п'ять. */
  .rozdily { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .karta__verh { grid-template-columns: 1.15fr .85fr; gap: var(--s7); }
  .kupivlya { position: sticky; top: calc(var(--shapka-vsya) + 24px); }
  .stryzhka { top: var(--shapka-vsya); }
}

/* Вузькі телефони: місто в шапці ховаємо — воно налазило на кнопки.
   Втрати нема: адреса стоїть і в герої, і в підвалі. */
@media (max-width: 400px) {
  .shapka__misto { display: none; }
}

/* Дуже вузькі телефони (320 px) — щоб нічого не вилазило */
@media (max-width: 360px) {
  /* Дві колонки лишаємо: в одну плитка розтягується на всю ширину,
     а фото поки нема — виходить величезна порожня пляма на кожен товар */
  .tovary { gap: var(--s2); }
  .tovar__nazva { font-size: .95rem; }
  .tovar__korotko { font-size: .8rem; }
  .tovar__telo { padding: var(--s3); }
  .tovar__niz { padding: 0 var(--s3) var(--s3); }
  .knopka { padding: 0 var(--s4); font-size: .9rem; }
  .geroy__knopky .knopka { width: 100%; }
  .obhvat { width: calc(100% - 24px); }
  .stryzhka__ryad { padding-inline: 12px; }
}

/* ---------- 12. Фокус з клавіатури ----------
   Стоїть у самому кінці навмисне: у кнопок і карток є власна тінь,
   і при однаковій вагі селекторів перемагає той, що нижче у файлі.
   Дві обводки: мідна губиться на темній шапці, світла — на кремовому
   тлі; разом рамку видно на будь-якому фоні сайту. */
:focus-visible {
  outline: 3px solid var(--tlo);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--kopch);
  border-radius: var(--r-s);
}