/* ============================================================
   FUJI SUSHI · Умань
   Структура й пропорції — за extaz-sushi.com.ua.
   Палітра — з логотипа закладу: чорний, червоний #B43637, білий.
   Неону приблизно на 20% менше, ніж в оригіналі (див. .glow).
   ============================================================ */

:root{
  --bg:#0C0A0B;
  --ink:#F4F2F2;
  /* приглушені сірі підняті: на склі поверх світлої ілюстрації
     старі #A8A6A6 і #6E6C6E ледь читалися */
  --ink-2:#CBC7C8;
  --ink-3:#9C9799;

  --red:#B43637;          /* точний колір із логотипа */
  --red-hi:#D8464A;
  --red-soft:rgba(180,54,55,.20);
  --red-tag:rgba(180,54,55,.92);

  /* скло темне: фон сайту — світла ілюстрація, і на прозорому склі
     світлий текст на ній зникав */
  --glass:rgba(18,12,13,.72);
  --glass-2:rgba(18,12,13,.58);
  --line:rgba(238,238,238,.10);

  --r-s:11px;
  --r-m:18px;
  --r-l:22px;

  --sh:0 4px 20px 2px rgba(0,0,0,.35);
  --sh-tag:0 4px 15px 1px rgba(0,0,0,.33);

  --max:1088px;
  --pad:24px;
  --ease:cubic-bezier(.22,.9,.28,1);
  --nav-h:70px;
}

*,*::before,*::after{box-sizing:border-box}
/* інакше display:grid/flex перебиває атрибут hidden */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Onest','Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.45;font-weight:400;
  /* НЕ ставити тут overflow-x:hidden: воно робить body контейнером
     прокрутки і мовчки ламає position:sticky всередині — шапка й смуга
     розділів переставали липнути. Від горизонтального зсуву достатньо
     overflow-x:clip на html вище. */
  min-height:100vh;
}
body.locked{overflow:hidden}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;line-height:1.15;letter-spacing:-.01em}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red-hi);outline-offset:2px}

.wrap{width:min(100% - 32px,var(--max));margin-inline:auto;position:relative;z-index:2}

/* ---------- ФОТО-ФОН ---------- */
/* fon.jpg лежить у папці сайту й показується як є: ні фільтрів,
   ні притемнення поверх. cover — щоб укривала весь екран. */
.glows{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#0A0708}
.glows::before{
  content:'';position:absolute;inset:0;
  background:url(fon.jpg) center / cover no-repeat;
}
/* Плями світла вимкнено: вони лягали кольоровими хмарами поверх
   ілюстрації й міняли її вигляд. */
.glow{display:none}

/* ---------- ХЕДЕР ---------- */
.header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:22px;
  width:min(100% - 32px,var(--max));margin-inline:auto;
  padding:14px 0 16px;
}
/* фіксована, а не -50vw: інакше сторінка їде вбік по горизонталі.
   Маска гасить не лише колір, а й розмиття — без неї внизу шторки
   лишалася б різка межа, де розмиття обривається. */
.header::before{
  content:'';position:fixed;top:0;left:0;right:0;height:118px;z-index:-1;
  background:linear-gradient(rgba(9,6,7,.92) 42%,rgba(9,6,7,0));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  -webkit-mask:linear-gradient(#000 46%,transparent);
          mask:linear-gradient(#000 46%,transparent);
  pointer-events:none;
}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.logo b{font-size:19px;font-weight:800;letter-spacing:.06em}
.logo span{display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.nav-desk{display:flex;gap:26px;margin-left:12px}
.nav-desk a{font-size:16px;font-weight:500;color:var(--ink-2);padding:6px 0;position:relative}
.nav-desk a:hover{color:var(--ink)}
.nav-desk a.on{color:var(--red-hi)}
.nav-desk a.on::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--red-hi);border-radius:2px}
.head-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.phone-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 20px;border-radius:var(--r-s);
  background:var(--glass);backdrop-filter:blur(8px);
  font-size:16px;font-weight:600;white-space:nowrap;
}
.phone-pill:hover{background:var(--red-soft)}
.phone-pill svg{width:19px;height:19px;color:var(--red-hi)}
.cart-btn{
  position:relative;width:46px;height:46px;flex-shrink:0;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(41,41,41,.8);border:0;border-radius:50%;color:var(--ink);
  transition:background .3s
}
.cart-btn:hover{background:var(--red)}
.cart-btn svg{width:21px;height:21px}
.cart-btn i{
  position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;
  background:var(--red);color:#fff;font-style:normal;font-size:11px;font-weight:800;
  display:grid;place-items:center;border-radius:10px;transform:scale(0);transition:transform .3s var(--ease)
}
.cart-btn i.on{transform:scale(1)}
@media(max-width:860px){
  .nav-desk{display:none}
  .phone-pill span{display:none}
  .phone-pill{padding:11px 13px}
}

/* ---------- НИЖНЯ ПАНЕЛЬ ---------- */
.navbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(0,0,0,.9);backdrop-filter:blur(10px);
  display:flex;align-items:flex-start;justify-content:space-around;
  padding-top:9px;border-top:1px solid rgba(255,255,255,.04);
  border-radius:20px 20px 0 0;
  box-shadow:0 -18px 40px -22px rgba(180,54,55,.55);
}
.navbar a{
  width:62px;display:flex;flex-direction:column;align-items:center;gap:5px;
  font-size:10.5px;color:var(--ink-3);font-weight:500;
}
.navbar a svg{width:22px;height:22px}
.navbar a.on{color:var(--red-hi)}
.navbar .nb-cart{width:62px;position:relative}
/* Тепле сяйво під кнопкою — окремим шаром на обгортці, тому лягає
   під саму кнопку й повільно «дихає». */
.navbar .nb-cart::before{
  content:'';position:absolute;left:-9px;top:-33px;width:80px;height:80px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(216,70,74,.45),transparent 72%);
  animation:cartglow 3.4s ease-in-out infinite;
}
@keyframes cartglow{0%,100%{opacity:.5;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.navbar .nb-cart::before{animation:none}}
/* Головна кнопка сайту. Обідок навколо — темний, кольору панелі, і
   поверх нього тонка золота нитка: біле кільце на темній панелі
   впадало в око більше за саму кнопку. */
.navbar .nb-cart .cart-btn{
  width:56px;height:56px;margin-top:-21px;
  background:
    radial-gradient(120% 120% at 32% 16%, #EC6165 0%, #C43F41 44%, #752223 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,214,178,.30),
    inset 0 -8px 16px rgba(0,0,0,.38),
    0 0 0 5px rgba(10,8,9,.96),
    0 0 0 6px rgba(240,193,59,.28),
    0 14px 32px -8px rgba(216,70,74,.9);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
/* полиск скла у верхній частині — те, що робить кружок обʼємним */
.navbar .nb-cart .cart-btn::after{
  content:'';position:absolute;left:15%;top:8%;width:70%;height:40%;
  border-radius:50%;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.20),rgba(255,255,255,0));
}
.navbar .nb-cart .cart-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,214,178,.40),
    inset 0 -8px 16px rgba(0,0,0,.32),
    0 0 0 5px rgba(10,8,9,.96),
    0 0 0 6px rgba(240,193,59,.45),
    0 18px 38px -8px rgba(216,70,74,1);
}
.navbar .nb-cart .cart-btn svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.navbar .nb-cart .cart-btn i{
  top:-2px;right:-2px;background:#F0C13B;color:#3A1F05;
  box-shadow:0 0 0 2.5px rgba(0,0,0,.92),0 3px 10px -2px rgba(240,193,59,.9);
}
@media(min-width:861px){
  /* на десктопі — плаваюча пігулка по центру, як в оригіналі */
  .navbar{
    left:50%;right:auto;transform:translateX(-50%);
    bottom:18px;width:auto;height:auto;gap:6px;
    padding:8px 10px;border:1px solid var(--line);border-radius:999px;
    background:rgba(12,12,12,.82);box-shadow:var(--sh);justify-content:center;
  }
  .navbar a{width:70px;font-size:10px}
  .navbar .nb-cart .cart-btn{width:48px;height:48px;margin-top:-14px}
  .navbar .nb-cart::before{left:-5px;top:-26px;width:72px;height:72px}
}

/* ---------- ГЕРОЙ ---------- */
/* Заголовки стоять просто на ілюстрації, а небо в неї світле — тож
   вони отримують темну плашку. Сама тінь не рятувала: білий на
   кремовому лишався блідим. */
.h1,.sec-h h2{
  display:inline-block;border-radius:999px;
  background:rgba(12,8,9,.74);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.h1{font-size:clamp(23px,4.2vw,34px);font-weight:700;margin:6px 0 18px;padding:9px 22px}
.sec-h h2{padding:7px 18px}
.footer__c b,.hours,.sec-h a{text-shadow:0 2px 10px rgba(0,0,0,.85)}
.banners{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;
  overscroll-behavior-x:contain}
.banners::-webkit-scrollbar{display:none}
/* Темне скло: власного фото банер не має, крізь нього ледь проглядає
   фон сторінки. Розмиття сильне, щоб гори не сперечалися з текстом. */
.banner{
  position:relative;flex:0 0 min(100%,var(--max));scroll-snap-align:center;
  height:clamp(300px,44vw,420px);border-radius:var(--r-m);overflow:hidden;
  background:rgba(9,6,7,.84);
  backdrop-filter:blur(26px) saturate(115%);
  -webkit-backdrop-filter:blur(26px) saturate(115%);
  display:flex;align-items:center;
}
.banner__art{position:absolute;right:-4%;top:50%;transform:translateY(-50%);width:min(52%,420px);opacity:.95}
.banner__art svg{width:100%;height:auto;filter:drop-shadow(0 24px 50px rgba(0,0,0,.6))}
/* завантажене фото сета на банері */
.banner__art .pic{width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:var(--r-m);box-shadow:0 24px 50px rgba(0,0,0,.6)}
.banner::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 78% 50%,rgba(180,54,55,.26),transparent 62%);
  pointer-events:none;
}
.banner__in{position:relative;z-index:2;padding:clamp(24px,4vw,44px);max-width:58%}
.banner__in h2{font-size:clamp(26px,4.4vw,44px);white-space:pre-line}
.banner__in p{margin:12px 0 0;color:var(--ink-2);font-size:clamp(13px,1.5vw,16px);white-space:pre-line}
/* плашка над назвою, щоб акція читалась одразу, а не тільки з ціни */
.banner__tag{
  display:inline-block;margin-bottom:10px;padding:5px 11px;border-radius:var(--r-s);
  background:#F0C13B;color:#141414;font-size:12px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;box-shadow:var(--sh-tag);
}
.banner__b{display:flex;align-items:center;gap:14px;margin-top:clamp(16px,2.6vw,26px);flex-wrap:wrap}
/* стару ціну відсуваємо від нової і робимо дрібнішою: злиті в одне
   число «111122 ₴» їх було не розрізнити */
.banner__p{display:inline-flex;align-items:baseline;gap:10px;
  font-size:clamp(22px,3vw,30px);font-weight:700;white-space:nowrap}
.banner__p s{font-size:.6em;font-weight:400;color:var(--ink-3);
  text-decoration-color:var(--red-hi)}
.banner__p b{font-weight:700}
.banner__p.sale b{color:#F0C13B}
@media(max-width:640px){
  .banner__in{max-width:70%}
  .banner__art{width:56%;right:-14%;opacity:.72}
  .banner__tag{font-size:11px;padding:4px 9px;margin-bottom:8px}
}
.dots{display:flex;gap:7px;justify-content:center;padding:14px 0 0}
.dots b{width:7px;height:7px;border-radius:50%;background:var(--ink-3);opacity:.5;cursor:pointer;transition:all .3s}
.dots b.on{background:var(--red-hi);opacity:1;width:20px;border-radius:4px}

/* ---------- КАТЕГОРІЇ ---------- */
/* overscroll-behavior-x стримує бокове перетягування сторінки.
   touch-action тут НЕ чіпаємо: pan-x забороняє вертикальний рух
   пальця, і сторінка перестає гортатися над стрічкою. */
.cats{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:22px 0 4px;
  overscroll-behavior-x:contain}
.cats::-webkit-scrollbar{display:none}
.cat{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:8px;
  min-width:88px;padding:11px 12px;border-radius:var(--r-s);cursor:pointer;
  background:var(--glass);backdrop-filter:blur(8px);border:1px solid transparent;
  font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;
  transition:background .3s,border-color .3s;
}
.cat:hover{background:var(--red-soft)}
.cat.on{background:var(--red);border-color:var(--red-hi)}
.cat svg,.cat .pic{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0}

/* ---------- ПОШУК ---------- */
.searchbar{display:flex;gap:11px;padding:18px 0 0}
.search{
  flex:1;display:flex;align-items:center;gap:11px;height:58px;padding:0 18px;
  border-radius:var(--r-s);background:var(--glass);backdrop-filter:blur(8px);
}
.search svg{width:20px;height:20px;color:var(--ink-3);flex-shrink:0}
.search input{flex:1;min-width:0;background:none;border:0;font-size:16px;font-weight:500}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{outline:0}
.search button{background:none;border:0;cursor:pointer;color:var(--ink-3);padding:4px}
.search button:hover{color:var(--red-hi)}

/* ---------- КНОПКА СОРТУВАННЯ ---------- */
.filt-btn{
  display:flex;align-items:center;gap:9px;flex-shrink:0;height:58px;padding:0 22px;
  border:0;border-radius:var(--r-s);cursor:pointer;
  background:var(--glass);backdrop-filter:blur(8px);color:var(--ink);
  font-size:15px;font-weight:600;transition:background .3s,color .3s;
}
.filt-btn svg{width:19px;height:19px}
.filt-btn:hover{background:var(--red-soft)}
.filt-btn.on{background:var(--red);color:#fff}
/* підпис лишається завжди: кнопка-перемикач тільки ним і читається */
@media(max-width:600px){.filt-btn{padding:0 15px;font-size:14px;gap:7px}.filt-btn svg{width:17px;height:17px}}

/* ---------- СТОРІНКА ПОЗИЦІЇ ---------- */
.pv{position:fixed;inset:0;z-index:100;background:var(--bg);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  opacity:0;transform:translateY(16px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.pv.on{opacity:1;transform:none}
.pv .co__bar h2{font-size:17px}
.pv__in{width:min(100% - 32px,var(--max));margin-inline:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center;padding:24px 0 8px}
@media(max-width:760px){.pv__in{grid-template-columns:1fr;gap:14px;padding-top:14px}}
.pv__art{position:relative;display:grid;place-items:center;aspect-ratio:1;max-height:44vh;
  background:radial-gradient(65% 60% at 50% 45%,rgba(180,54,55,.20),transparent 70%)}
.pv__art svg{width:88%;height:88%;filter:drop-shadow(0 30px 60px rgba(0,0,0,.8));
  animation:fxFloat 9s ease-in-out infinite}
.pv__info h1{font-size:clamp(26px,4vw,40px);font-weight:700}
.pv__d{margin:12px 0 0;color:var(--ink-2);font-size:15.5px;line-height:1.5}
.pv__list{margin:14px 0 0;padding:0;list-style:none;font-size:15px;color:var(--ink-2)}
.pv__list li{padding:7px 0 7px 16px;position:relative;border-bottom:1px solid var(--line)}
.pv__list li::before{content:'';position:absolute;left:0;top:15px;width:6px;height:6px;background:var(--red);opacity:.8}
.pv__meta{margin-top:14px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.pv__b{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px}
.pv__p{font-size:clamp(28px,3.6vw,38px);font-weight:700;white-space:nowrap}
.pv__p em{font-style:normal;font-size:16px;color:var(--ink-3)}
.pv__also{width:min(100% - 32px,var(--max));margin-inline:auto;padding:22px 0 calc(var(--nav-h) + 40px)}
.pv__also h3{font-size:clamp(18px,2.4vw,23px);font-weight:600;margin-bottom:14px}
.card[data-open]{cursor:pointer}

/* ---------- ЗАГОЛОВКИ РОЗДІЛІВ ---------- */
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:34px 0 16px}
.sec-h h2{font-size:clamp(20px,2.6vw,26px);font-weight:600}
.sec-h a{font-size:14px;color:var(--red-hi);font-weight:600;white-space:nowrap}

/* ---------- КАРТКИ СТРАВ ---------- */
.row-slider{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:6px;
  overscroll-behavior-x:contain}
.row-slider::-webkit-scrollbar{display:none}
.row-slider .card{flex:0 0 237px;scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:18px;
  align-items:start}

/* Картка: фото зверху, скляна панель наїжджає на нього знизу */
/* напівпрозорий, щоб фонове фото просвічувало крізь картку.
   Розмиття тут навмисно не ставимо: карток під сотню, і на телефоні
   стільки шарів backdrop-filter відчутно гальмують. */
.card{position:relative;border-radius:18px;overflow:hidden;
  background:linear-gradient(rgba(10,7,8,.72) 45%,rgba(10,7,8,0));display:block}
/* overflow ховає все зайве: під курсором з картки нічого не вилазить */
.card__img{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;
  border-radius:18px 18px 0 0}
/* намальовану страву підіймаємо, щоб панель з текстом її не перекривала */
.card__img svg{width:76%;height:auto;aspect-ratio:1;margin-bottom:52px}
.card__img .pic{width:100%;height:100%;object-fit:contain;border-radius:18px}

/* Завантажене в адмінці фото. Стоїть на місці намальованої картинки
   в усіх списках, тож достатньо одного правила на всі розміри. */
.pic{width:100%;height:100%;object-fit:cover;display:block}
.ci__a .pic,.ad__a .pic{border-radius:10px}
.pv__art .pic{border-radius:var(--r-m);box-shadow:0 30px 60px rgba(0,0,0,.8)}
/* плашки сидять на верхньому краї скляної панелі, тобто поверх фото
   і вище за назву, щоб її не перекривати */
.card__tags{position:absolute;bottom:calc(100% - 12px);right:11px;display:flex;gap:6px;
  flex-wrap:wrap;justify-content:flex-end;z-index:3;max-width:calc(100% - 22px)}
.tag{
  padding:5px 9px;border-radius:var(--r-s);background:var(--red-tag);color:#fff;
  font-size:11px;font-weight:600;box-shadow:var(--sh-tag);
}
.tag--v{background:rgba(78,122,58,.92)}
.tag--w{background:rgba(196,150,58,.92);color:#141414}
.tag--hit{background:rgba(214,120,40,.92)}
.tag--hot{background:rgba(150,32,32,.95)}
.tag--sale{background:#F0C13B;color:#141414;font-weight:800}

/* акційна ціна: стару перекреслюємо, нову підсвічуємо */
.card__p s,.pv__p s,.ci__t s,.ad__t s{
  color:var(--ink-3);text-decoration-color:var(--red-hi);
  font-size:.62em;font-weight:400;margin-right:6px;
}
.card__p.sale,.pv__p.sale{color:#F0C13B}
.pv__tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
/* Панель із текстом наїжджає на фото. Скло не рівне, а з градієнтом:
   згори світліше й прозоріше, донизу гусне — так її верхній край не
   читається як наліплений прямокутник, але сама панель лишається. */
/* Розмиття тут навмисно прибране: карток під сотню, і стільки шарів
   backdrop-filter змушували телефон захлинатися на прокрутці.
   Щільніший градієнт дає той самий вигляд без цієї ціни. */
/* Панель щільна, і на фото заходить лише краєм: крізь напівпрозору
   було видно знімок, і текст читався поверх ролів. */
.card__in{position:relative;z-index:2;margin-top:-22px;padding:18px;min-height:194px;
  display:flex;flex-direction:column;border-radius:18px;
  background:linear-gradient(rgba(32,20,21,.97),rgba(16,10,11,.99));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.card__n{font-size:18px;font-weight:600;line-height:1.2;margin-bottom:11px}
/* склад розтягується на вільне місце, щоб ціна в усіх картках рядка
   стояла на одній висоті */
.card__d{flex:1;margin:0 0 11px;font-size:13.5px;color:var(--ink-2);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__w{font-size:13.5px;color:var(--ink-3);margin-bottom:4px;min-height:19px}
.card__p{font-size:22px;font-weight:400;white-space:nowrap;padding-right:92px}
.card__p .cur{color:rgba(238,238,238,.8);margin-right:3px}
.card__p s{font-size:.58em;font-weight:400;color:var(--ink-3);margin-right:6px}
.card__add{
  position:absolute;right:11px;bottom:15px;min-width:84px;height:38px;padding:0 14px;
  display:grid;place-items:center;cursor:pointer;border:0;border-radius:18px;
  background:rgba(180,54,55,.24);color:var(--red-hi);font:400 15.5px/1 var(--f);
  transition:background .3s,color .3s,transform .3s var(--ease);
}
.card__add:hover{background:var(--red);color:#fff;transform:translateY(-2px)}
.add{
  width:46px;height:46px;flex-shrink:0;display:grid;place-items:center;cursor:pointer;
  background:var(--red);border:0;border-radius:50%;color:#fff;
  box-shadow:0 8px 22px -8px rgba(180,54,55,.9);
  transition:background .3s,transform .3s var(--ease);
}
.add:hover{background:var(--red-hi);transform:scale(1.08)}
.add svg{width:19px;height:19px}
/* на телефоні дві картки в ряд — так само, як у меню-зразку */
@media(max-width:520px){
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .row-slider .card{flex:0 0 168px}
  .card__img svg{width:80%;margin-bottom:38px}
  .card__in{margin-top:-18px;padding:14px;min-height:151px}
  .card__n{font-size:14px;margin-bottom:8px}
  .card__d{font-size:10.5px;margin-bottom:8px}
  .card__w{font-size:10.5px;min-height:15px;margin-bottom:3px}
  .card__p{font-size:17.5px;padding-right:70px}
  .card__add{right:9px;bottom:12px;min-width:65px;height:30px;padding:0 10px;font-size:12.5px}
  .card__tags{right:8px;bottom:calc(100% - 10px)}
  .tag{padding:4px 7px;font-size:10px}
  /* Шахматка тільки на телефоні: на комп'ютері сітка лишається рівною.
     Зроблено як у сайті-зразку — там опущена вся ліва колонка на 54 px,
     а не кожна друга картка почергово. Зсув живе у змінній, бо саме
     поле transform зайняте появою картки. */
  .grid{padding-bottom:54px}
  .grid > .card:nth-child(odd){--sy:54px}
}

/* ---------- КНОПКИ ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border-radius:var(--r-s);border:0;cursor:pointer;
  background:var(--red);color:#fff;font-size:15px;font-weight:600;
  transition:background .3s,transform .3s var(--ease);
}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn:hover{background:var(--red-hi);transform:translateY(-1px)}
.btn--glass{background:var(--glass);backdrop-filter:blur(8px);color:var(--ink)}
.btn--glass:hover{background:var(--red-soft)}
.btn--full{width:100%}
.btn--wide{padding:17px 46px;font-size:16px}
.center{display:flex;justify-content:center;padding:26px 0 0}

/* ---------- ГОДИНИ РОБОТИ ---------- */
.hours{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:38px 0 6px;text-align:center;font-size:clamp(15px,2vw,19px);font-weight:600;
}
.hours i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red-hi);font-style:normal;flex-shrink:0}
.hours em{font-style:normal;color:var(--ink-3);font-weight:400;font-size:14px}
/* зараз відчинено / зачинено — рахується за годинами з адмінки */
.hours--open i{background:#4E9A3A;box-shadow:0 0 0 4px rgba(78,154,58,.18)}
.hours--shut i{background:var(--ink-3)}
.hours__st{font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;
  background:var(--glass-2);color:var(--ink-2)}
.hours--open .hours__st{background:rgba(78,154,58,.16);color:#8FD478}

/* ---------- ІНФО-КАРТКИ ---------- */
.info{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:8px}
@media(max-width:760px){.info{grid-template-columns:1fr}}
.info>div{
  background:var(--glass);backdrop-filter:blur(8px);border-radius:var(--r-s);
  padding:20px;box-shadow:var(--sh);
}
.info h3{font-size:17px;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.info h3 svg{width:20px;height:20px;color:var(--red-hi)}
.info dl{margin:0;font-size:14.5px}
.info dl>div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.info dl>div:last-child{border-bottom:0}
.info dt{color:var(--ink-2)}
.info dd{margin:0;font-weight:600;text-align:right}

/* ---------- КОНТАКТИ / ФУТЕР ---------- */
.footer{
  margin-top:44px;padding:26px 0 calc(var(--nav-h) + 34px);
  border-top:1px solid var(--line);
}
@media(min-width:861px){.footer{padding-bottom:120px}}
.footer__in{display:flex;gap:30px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.footer h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;font-weight:600}
.footer ul{list-style:none;margin:0;padding:0;font-size:15px;color:var(--ink-2)}
.footer li{padding:4px 0}
.footer a:hover{color:var(--red-hi)}
.footer__big{font-size:22px;font-weight:700;color:var(--ink)}
.copy{padding-top:22px;margin-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3);display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between}

/* ---------- КОШИК ----------
   Обгортка обрізає засунуту панель: інакше translateX(101%)
   розтягує сторінку вбік і ламає всю мобільну верстку. */
/* УВАГА: обгортка не ловить кліки, тож КОЖНА панель усередині
   мусить сама вмикати pointer-events. Забудеш — кнопки мертві. */
#cartWrap{position:fixed;inset:0;z-index:80;overflow:hidden;pointer-events:none}
.cart,.co,.pv{pointer-events:auto}
.veil{position:absolute;inset:0;z-index:106;background:rgba(0,0,0,.66);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .4s}
.veil.on{opacity:1;pointer-events:auto}
.cart{
  position:absolute;top:0;right:0;bottom:0;z-index:108;width:min(440px,100%);
  background:#0A0A0B;border-left:1px solid var(--line);
  display:flex;flex-direction:column;transform:translateX(101%);
  transition:transform .5s var(--ease);
}
.cart.on{transform:none}
.cart__h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.cart__h h3{font-size:19px;font-weight:600}
.icn{width:40px;height:40px;display:grid;place-items:center;background:var(--glass-2);border:0;border-radius:50%;cursor:pointer;color:var(--ink)}
.icn:hover{background:var(--red-soft)}
.icn svg{width:17px;height:17px}
.cart__b{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 20px}
.ci{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.ci__a{width:52px;height:52px;flex-shrink:0}
.ci__t{flex:1;min-width:0}
.ci__t b{display:block;font-size:14px;font-weight:600}
.ci__t span{font-size:12px;color:var(--ink-3)}
.qty{display:flex;align-items:center;background:var(--glass-2);border-radius:var(--r-s)}
.qty button{width:30px;height:30px;background:none;border:0;cursor:pointer;font-size:17px;line-height:1;color:var(--ink)}
.qty button:hover{color:var(--red-hi)}
.qty i{font-style:normal;min-width:24px;text-align:center;font-size:13px;font-weight:700}
.ci__t span{font-size:13px;color:var(--ink-2);font-weight:600}
.ci__x{
  width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;cursor:pointer;
  background:none;border:0;color:var(--ink-3);border-radius:50%;transition:color .25s,background .25s
}
.ci__x:hover{color:#fff;background:var(--red)}
.ci__x svg{width:14px;height:14px}

.cart__h h3{flex:1}
.cart__h .icn:first-child{margin-right:2px}

/* кроки: cart → cond → add */
.st.in{animation:stepIn .34s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.st__h{margin:2px 0 10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}

/* умови доставки — плавно виїжджають під кнопками способу */
.condwrap{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .42s var(--ease),opacity .3s var(--ease),margin .42s var(--ease)}
.condwrap.open{opacity:1;margin-bottom:12px}

/* «набір уже входить» — угорі списку додатків */
.freebie{
  display:flex;gap:11px;align-items:flex-start;margin:0 0 16px;padding:13px 14px;
  background:rgba(99,180,74,.12);border:1px solid rgba(99,180,74,.35);border-radius:var(--r-s);
}
.freebie svg{width:18px;height:18px;color:#63B44A;flex-shrink:0;margin-top:1px}
.freebie b{display:block;font-size:14px;font-weight:700;color:#8FD478;margin-bottom:2px}
.freebie span{font-size:13px;color:var(--ink-2);line-height:1.45}

.cond{padding:4px 0 2px}
.cond__r{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.cond__r span{color:var(--ink-2)}
.cond__r b{font-weight:600;white-space:nowrap}
.cond__r.ok b{color:#63B44A}
.cond__n{margin:16px 0 0;font-size:13.5px;color:var(--ink-3);line-height:1.5}

/* додатки */
.ad{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.ad__a{width:42px;height:42px;flex-shrink:0}
.ad__t{flex:1;min-width:0}
.ad__t b{display:block;font-size:14.5px;font-weight:600}
.ad__t span{font-size:12.5px;color:var(--ink-3)}
.add--sm{width:36px;height:36px}
.add--sm svg{width:15px;height:15px}

/* вибір способу — перемикач, а не перехід */
.mode{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
.mbtn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 10px;border-radius:var(--r-s);cursor:pointer;
  background:var(--glass-2);border:1px solid transparent;color:var(--ink-2);
  font-size:14px;font-weight:600;
  transition:background .25s,color .25s,border-color .25s;
}
.mbtn svg{width:18px;height:18px;flex-shrink:0}
.mbtn:hover{color:var(--ink)}
.mbtn.on{background:var(--red);border-color:var(--red-hi);color:#fff}

/* ---------- ПОВНОЕКРАННЕ ОФОРМЛЕННЯ ---------- */
.co{
  position:fixed;inset:0;z-index:120;background:var(--bg);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  opacity:0;transform:translateY(18px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.co.on{opacity:1;transform:none}
.co__bar{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:14px;
  padding:14px 16px;background:rgba(0,0,0,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.co__bar h2{flex:1;font-size:19px;font-weight:600;text-align:center}
.co__in{
  width:min(100% - 32px,var(--max));margin-inline:auto;
  display:grid;grid-template-columns:1fr 1.15fr;gap:18px;
  padding:22px 0 calc(var(--nav-h) + 40px);align-items:start;
}
@media(max-width:820px){.co__in{grid-template-columns:1fr}}
.co__side,.co__form{background:var(--glass);backdrop-filter:blur(8px);border-radius:var(--r-s);padding:20px}
.co__side h3{font-size:16px;font-weight:600;margin-bottom:14px}
.co__l{display:flex;justify-content:space-between;gap:14px;padding:8px 0;font-size:14.5px;border-bottom:1px solid var(--line)}
.co__l span{color:var(--ink-2)}
.co__l em{font-style:normal;color:var(--ink-3)}
.co__l b{white-space:nowrap;font-weight:600}
.co__sum{margin-top:12px;padding-top:6px;border-top:1px solid var(--line)}
.co__l--off b{color:#63B44A}
.co__l--big{border-bottom:0;padding-top:12px;font-size:16px}
.co__l--big b{font-size:23px}
.co__note{margin:12px 0 0;font-size:13px;color:var(--ink-3);text-align:center}

.promo{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.promo__b{background:none;border:1px dashed var(--line);width:100%;padding:11px;border-radius:var(--r-s);
  color:var(--ink-2);font-size:14px;cursor:pointer;transition:color .25s,border-color .25s}
.promo__b:hover{color:var(--red-hi);border-color:var(--red)}
.promo__f{display:flex;gap:8px}
.promo__f input{flex:1;min-width:0;padding:11px 13px;background:var(--glass-2);border:1px solid transparent;
  border-radius:var(--r-s);font-size:15px;text-transform:uppercase}
.promo__f input:focus{outline:0;border-color:var(--red)}
.promo__f .btn{padding:11px 16px;font-size:13px}
.promo__m{margin:9px 0 0;font-size:13px;color:var(--red-hi);min-height:1em}
.promo__m.ok{color:#63B44A}

.fld{margin-bottom:12px}
.fld.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fld label,.fld__l{display:block;font-size:12px;color:var(--ink-3);font-weight:500}
.fld input,.fld select,.fld textarea{
  width:100%;margin-top:5px;padding:12px 14px;background:var(--glass-2);
  border:1px solid transparent;border-radius:var(--r-s);font-size:15px;resize:vertical;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--red)}
.fld .bad{border-color:var(--red-hi)}
/* свій лічильник: системні стрілочки в number виглядають чужорідно */
.stp{display:flex;align-items:center;margin-top:5px;height:46px;
  background:var(--glass-2);border:1px solid transparent;border-radius:var(--r-s);overflow:hidden}
.stp button{width:46px;align-self:stretch;background:none;border:0;cursor:pointer;
  color:var(--ink-2);font-size:20px;line-height:1;transition:background .25s,color .25s}
.stp button:hover{background:var(--red-soft);color:#fff}
.stp input{flex:1;min-width:0;margin:0;padding:0;text-align:center;
  background:none;border:0;font-size:16px;font-weight:600}
.stp input:focus{outline:0}
.fld input[type=number]{-moz-appearance:textfield}
.fld input[type=number]::-webkit-outer-spin-button,
.fld input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.addr{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.fld__l+.pay{margin-top:6px}
.cart__empty{display:grid;place-items:center;gap:12px;height:100%;text-align:center;color:var(--ink-3);padding:40px 0}
.cart__empty svg{width:56px;height:56px;opacity:.4;stroke-width:1.4}
.cart__f{padding:16px 20px 20px;border-top:1px solid var(--line)}
.prog{margin-bottom:14px}
.prog__t{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-3);margin-bottom:6px}
.prog__t b{color:var(--red-hi)}
.prog__b{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.prog__b i{display:block;height:100%;width:0;background:var(--red-hi);transition:width .5s var(--ease)}
.prog__b i.done{background:#4E9A3A}
.sum{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;font-weight:600;padding:8px 0 12px}
.sum b{font-size:24px}
.frm{display:grid;gap:9px}
.frm input,.frm textarea{
  width:100%;padding:12px 14px;background:var(--glass-2);border:1px solid transparent;
  border-radius:var(--r-s);font-size:15px;resize:vertical;
}
.frm input:focus,.frm textarea:focus{outline:0;border-color:var(--red)}
.frm .bad{border-color:var(--red-hi)}
.frm .two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pay{display:flex;gap:8px}
.pay label{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 8px;
  background:var(--glass-2);border-radius:var(--r-s);cursor:pointer;font-size:13.5px;
  border:1px solid transparent;
}
.pay input{display:none}
.pay input:checked+span{color:var(--red-hi);font-weight:600}
.pay label:has(input:checked){border-color:var(--red)}

/* ---------- ТОСТ ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + 18px);transform:translate(-50%,150%);
  z-index:100;opacity:0;pointer-events:none;white-space:nowrap;max-width:calc(100vw - 28px);
  background:#17171A;border:1px solid var(--line);color:var(--ink);
  padding:13px 22px;border-radius:var(--r-s);font-size:14px;box-shadow:var(--sh);
  transition:transform .45s var(--ease),opacity .3s;
}
.toast.on{transform:translate(-50%,0);opacity:1}

/* ============================================================
   ШАР ЕФЕКТІВ (працює у парі з fx.js; без нього сайт теж живий)
   ============================================================ */

/* поява сторінки */
html.fx body{opacity:0;transition:opacity .5s var(--ease)}
html.fx-ready body{opacity:1}

/* смуга прогресу прокрутки */
.fx-bar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  background:linear-gradient(90deg,var(--red),var(--red-hi),#E8A34A);
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
}

/* зерно плівки */
.fx-grain{
  position:fixed;inset:-120px;z-index:1;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:fxGrain 1.1s steps(4) infinite;
}
@keyframes fxGrain{
  0%{transform:translate(0,0)}25%{transform:translate(-40px,20px)}
  50%{transform:translate(30px,-30px)}75%{transform:translate(-20px,-15px)}
  100%{transform:translate(0,0)}
}

/* світло за курсором */
.fx-lamp{
  position:fixed;top:0;left:0;width:520px;height:520px;z-index:1;
  pointer-events:none;opacity:0;transition:opacity .8s var(--ease);
  background:radial-gradient(circle,rgba(180,54,55,.16),rgba(180,54,55,.05) 45%,transparent 68%);
  filter:blur(26px);
}

/* поява блоків */
/* зсув появи тримаємо у змінній, а не в самому transform: інакше це
   правило (у нього два класи, тобто вища вага) стирає нахил і шахматку */
.fx-rise{--fy:22px;opacity:0;transform:translateY(var(--fy));
  transition:opacity .62s var(--ease) var(--d,0ms),transform .62s var(--ease) var(--d,0ms)}
.fx-rise.shown{--fy:0px;opacity:1}

/* заголовок по словах */
.h1 .fx-w{display:inline-block;opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease) var(--d),transform .6s var(--ease) var(--d)}
.h1.shown .fx-w{opacity:1;transform:none}

/* нахил і відблиск карток */
/* Картка під курсором не рухається: варто їй нахилитися чи підрости —
   і вона вилазить за свої межі на сусідні. Лишається сама тінь.
   Зсуви появи й шахматки складаємо в один transform, бо поле одне. */
.card{
  transform:translateY(calc(var(--sy,0px) + var(--fy,0px)));
  transition:transform .34s var(--ease),
             opacity .34s var(--ease) var(--d,0ms),
             box-shadow .5s var(--ease);
}
/* банер великий і стоїть окремо — йому нахил не заважає */
.banner{
  transform:translateY(var(--fy,0px)) perspective(900px)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
/* will-change тільки на тому банері, що зараз під курсором */
.banner.fx-tilt{will-change:transform;transition:transform .12s linear,box-shadow .5s var(--ease)}
/* картці на наведення — сама тінь, без руху */
.card:hover{box-shadow:0 24px 50px -22px rgba(0,0,0,.85),0 0 0 1px rgba(180,54,55,.35)}
.banner::before{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.10),transparent 60%);
  opacity:0;transition:opacity .4s var(--ease);
}
.banner.fx-tilt::before{opacity:1}

.btn,.mbtn,.add,.cat{position:relative;overflow:hidden}
.card__add{overflow:hidden}

/* хвиля по кліку */
.fx-wave{
  position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:rgba(255,255,255,.42);pointer-events:none;transform:scale(0);
  animation:fxWave .6s var(--ease) forwards;
}
@keyframes fxWave{to{transform:scale(22);opacity:0}}

/* банер: повільний дрейф малюнка */
.banner__art{transition:transform .5s var(--ease)}
.banner__art svg{animation:fxFloat 9s ease-in-out infinite}
@keyframes fxFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(2.5deg)}}

/* акценти */
.cat.on{box-shadow:0 8px 26px -10px rgba(180,54,55,.85)}
.card:hover .card__p{text-shadow:0 0 18px rgba(216,70,74,.55)}
.navbar .nb-cart .cart-btn i.on{animation:fxPop .45s var(--ease)}
@keyframes fxPop{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}}

/* плавний перехід між сторінками там, де браузер це вміє */
@view-transition{navigation:auto}

/* смуги прокрутки */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(180,54,55,.35);border-radius:6px;border:3px solid #000}
*::-webkit-scrollbar-thumb:hover{background:var(--red)}

@media(prefers-reduced-motion:reduce){
  .fx-rise,.h1 .fx-w{opacity:1;transform:none;transition:none}
  .fx-grain,.fx-lamp{display:none}
  .banner__art svg{animation:none}
  /* шахматку лишаємо — це верстка, а не анімація */
  .card,.banner{transform:translateY(var(--sy,0px));transition:none}
}

/* ---------- ЕКРАН «ЗАМОВЛЕННЯ ПРИЙНЯТО» ---------- */
#thanks{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:rgba(6,4,5,.92);backdrop-filter:blur(10px);text-align:center;
  opacity:0;transition:opacity .3s var(--ease);
}
#thanks.on{opacity:1}
.thanks__in{
  width:min(100%,380px);display:grid;justify-items:center;gap:12px;
  padding:30px 24px 24px;border-radius:var(--r-m);
  background:linear-gradient(rgba(78,46,47,.42),rgba(16,11,12,.92));
  border:1px solid rgba(255,255,255,.06);
  transform:translateY(14px) scale(.97);transition:transform .38s var(--ease);
}
#thanks.on .thanks__in{transform:none}
/* галочка малюється сама: спершу коло, потім лінія */
.thanks__ok{width:76px;height:76px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.thanks__ok circle{stroke:rgba(120,190,120,.55);stroke-width:3;
  stroke-dasharray:196;stroke-dashoffset:196;animation:okRing .55s var(--ease) .1s forwards}
.thanks__ok path{stroke:#7BC47B;stroke-width:5;
  stroke-dasharray:52;stroke-dashoffset:52;animation:okTick .34s var(--ease) .5s forwards}
@keyframes okRing{to{stroke-dashoffset:0}}
@keyframes okTick{to{stroke-dashoffset:0}}
.thanks__in h2{font-size:24px}
.thanks__in p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5}
.thanks__row{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2);
}
.thanks__row b{color:var(--ink);font-size:17px}
.thanks__in .btn{margin-top:4px}
/* «Готово» — другорядна дія: класу .btn--ghost у проєкті немає,
   тож задаємо вигляд тут, щоб дві однакові червоні кнопки поруч
   не сперечалися між собою */
.thanks__in .btn--ghost{
  background:transparent;border:1px solid var(--line);color:var(--ink-2);
  box-shadow:none;
}
.thanks__in .btn--ghost:hover{background:var(--glass-2);color:var(--ink)}
@media(prefers-reduced-motion:reduce){
  .thanks__ok circle,.thanks__ok path{animation:none;stroke-dashoffset:0}
}

/* ---------- САНІТАРНИЙ ДЕНЬ (вмикається з адмінки) ---------- */
#dayoff{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:rgba(0,0,0,.96);backdrop-filter:blur(6px);text-align:center;
}
.dayoff__in{max-width:420px;display:grid;justify-items:center;gap:14px}
.dayoff__art{width:132px;height:132px}
.dayoff__in h2{font-size:clamp(24px,5vw,34px);font-weight:700}
.dayoff__in p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.5}
.dayoff__in .btn{margin-top:6px;min-width:200px}
.dayoff__tel{font-size:15px;color:var(--ink-3)}
.dayoff__tel:hover{color:var(--red-hi)}

/* після «Зрозуміло»: дивитися можна, замовляти — ні */
.dayoff-bar{
  position:fixed;top:0;left:0;right:0;z-index:130;text-align:center;
  padding:9px 14px;font-size:13px;font-weight:600;
  background:var(--red);color:#fff;box-shadow:0 6px 20px -8px rgba(0,0,0,.9);
}
body.dayoff-on{padding-top:36px}
body.dayoff-on .hdr,body.dayoff-on .header{top:36px}
body.dayoff-on .add,body.dayoff-on .card__add,body.dayoff-on .banner .btn,
body.dayoff-on #toCond,body.dayoff-on #toAdd,body.dayoff-on #toCheckout,body.dayoff-on #send{
  opacity:.45;cursor:not-allowed;
}

/* ---------- ДРІБНИЦІ ---------- */
.fly{position:fixed;z-index:95;pointer-events:none;width:62px;height:62px;transition:all .75s cubic-bezier(.5,-.3,.7,.5)}
.empty{padding:60px 0;text-align:center;color:var(--ink-3)}
.page{padding-bottom:calc(var(--nav-h) + 10px)}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}