/* ============================================================
   KYOTO — общие стили сайта
   Две темы: светлая (день) и тёмная (вечер).
   Порядок: :root — светлая; @media prefers-color-scheme — системная
   тёмная; [data-theme] — явный выбор пользователя (кнопка в шапке).
   ============================================================ */
:root{
  color-scheme:light;
  --shu:#D2402C; --shu-deep:#B3311F; --shu-btn:#D2402C; --soy:#231A16;
  --gold:#B07A22; --nori:#2F6152;
  --bg:#FFFCFA; --surface:#FFFFFF; --surface-2:#FAF4F0;
  --border:#EFE3DC; --border-2:#E4D5CC;
  --text:var(--soy); --text-2:#867168;
  --top-bg:rgba(255,252,250,.94);
  --scrim-bg:rgba(35,26,22,.5);
  --ph-a:#FDF7F3; --ph-b:#F7EDE7;
  --ph-text:rgba(35,26,22,.13);
  --chip-bg:rgba(255,255,255,.86);
  --tint-l:78%; --tint-a1:.5; --tint-a2:.45;
  --gift-a:#FFF7F4; --gift-b:#FFFFFF; --gift-border:#F3CCC3;
  --gold-soft:#FBF5E8;
  --nori-soft:rgba(47,97,82,.09);
  --err-bg:#FFF7F5;
  --bad-bg:#FFF1EE; --bad-border:#F3CCC3;
  --ring:rgba(210,64,44,.12);
  --r-s:8px; --r-m:16px; --r-l:24px;
  --shadow:0 1px 2px rgba(35,26,22,.04), 0 10px 30px -18px rgba(35,26,22,.18);
  --shadow-lift:0 2px 8px rgba(35,26,22,.06), 0 22px 48px -22px rgba(35,26,22,.3);
  --maxw:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --shu:#E85B44; --shu-deep:#C63A28; --shu-btn:#D2402C;
    --gold:#D6A254; --nori:#7FB79E;
    --bg:#171210; --surface:#201915; --surface-2:#2A211C;
    --border:#382D26; --border-2:#463931;
    --text:#F3ECE6; --text-2:#B3A196;
    --top-bg:rgba(23,18,16,.92);
    --scrim-bg:rgba(0,0,0,.62);
    --ph-a:#2A211C; --ph-b:#231B17;
    --ph-text:rgba(243,236,230,.1);
    --chip-bg:rgba(32,25,21,.85);
    --tint-l:34%; --tint-a1:.3; --tint-a2:.26;
    --gift-a:#2A211C; --gift-b:#201915; --gift-border:#4A332C;
    --gold-soft:#2B2113;
    --nori-soft:rgba(127,183,158,.14);
    --err-bg:#33211D;
    --bad-bg:#38211C; --bad-border:#55352E;
    --ring:rgba(232,91,68,.22);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -18px rgba(0,0,0,.6);
    --shadow-lift:0 2px 8px rgba(0,0,0,.35), 0 22px 48px -22px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --shu:#E85B44; --shu-deep:#C63A28; --shu-btn:#D2402C;
  --gold:#D6A254; --nori:#7FB79E;
  --bg:#171210; --surface:#201915; --surface-2:#2A211C;
  --border:#382D26; --border-2:#463931;
  --text:#F3ECE6; --text-2:#B3A196;
  --top-bg:rgba(23,18,16,.92);
  --scrim-bg:rgba(0,0,0,.62);
  --ph-a:#2A211C; --ph-b:#231B17;
  --ph-text:rgba(243,236,230,.1);
  --chip-bg:rgba(32,25,21,.85);
  --tint-l:34%; --tint-a1:.3; --tint-a2:.26;
  --gift-a:#2A211C; --gift-b:#201915; --gift-border:#4A332C;
  --gold-soft:#2B2113;
  --nori-soft:rgba(127,183,158,.14);
  --err-bg:#33211D;
  --bad-bg:#38211C; --bad-border:#55352E;
  --ring:rgba(232,91,68,.22);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -18px rgba(0,0,0,.6);
  --shadow-lift:0 2px 8px rgba(0,0,0,.35), 0 22px 48px -22px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Onest",-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Unbounded","Onest",sans-serif;margin:0;letter-spacing:-.022em;text-wrap:balance}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
/* На десктопе контент занимает всю ширину экрана — только поля по краям.
   Одна и та же полоса у шапки, героя и списков блюд. */
@media (min-width:1200px){
  :root{ --maxw:none }
  .wrap{padding:0 clamp(24px,2.6vw,44px)}
}
.num{font-variant-numeric:tabular-nums}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit}
input,textarea,select{font:inherit}
:focus-visible{outline:2px solid var(--shu);outline-offset:3px;border-radius:5px}
img{max-width:100%}

/* ---------- ШАПКА ----------
   Одна строка: бургер, логотип, поиск, адрес, телефон, язык, тема,
   кабинет, корзина. Служебная полоса сверху убрана — её содержимое
   переехало сюда. Навигации нет: разделы живут в бургер-панели.
   display:contents у <header> обязателен — иначе липкий .top-main
   «прилипает» только в пределах шапки и уезжает вместе с ней. */
.top{display:contents}

.top-main{position:sticky;top:0;z-index:60;background:var(--top-bg);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.top-in{display:flex;align-items:center;gap:14px;height:78px}

/* Телефон с часами работы — такая же «таблетка», как поиск и адрес:
   голым текстом он выбивался из ряда. Номер крупно, часы под ним. */
.top-tel{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none;
  height:46px;padding:0 16px 0 13px;border-radius:100px;
  background:var(--surface-2);color:var(--text);
  transition:background .15s,color .15s}
.top-tel:hover{background:var(--border)}
.top-tel svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;color:var(--shu)}
.tel-i{display:flex;flex-direction:column;justify-content:center;gap:1px;
  line-height:1.15;white-space:nowrap}
.tel-i b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.tel-i em{font-style:normal;font-size:11px;color:var(--text-2);letter-spacing:.01em}
/* Когда остаётся одна трубка — кнопка становится круглой, как соседи */
@media (max-width:1080px){
  .top-tel{width:46px;padding:0;justify-content:center;border-radius:50%}
}
.logo{font-family:Unbounded,sans-serif;font-weight:800;font-size:20px;letter-spacing:.06em;
  display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo-mark{width:31px;height:31px;border-radius:50%;background:var(--shu);display:grid;place-items:center;
  color:#fff;font-size:14px;font-weight:700}
.search{flex:1 1 240px;max-width:380px;min-width:150px;position:relative;margin:0}
/* Поля и «таблетки» шапки — заливка без рамки, как на карточках товара:
   рамки дробили шапку на множество мелких прямоугольников */
.search input{width:100%;padding:13px 16px 13px 42px;border-radius:100px;border:1px solid transparent;
  background:var(--surface-2);color:var(--text);font-size:14.5px;transition:border-color .15s,box-shadow .15s,background .15s}
.search input:hover{background:var(--border)}
.search input:focus{outline:none;background:var(--surface);border-color:var(--shu);box-shadow:0 0 0 3px var(--ring)}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.4}
.top-adr{font-weight:600;font-size:14.5px;white-space:nowrap;color:var(--text)}
.top-adr span{display:block;font-size:11.5px;color:var(--text-2);font-weight:400}
.cart-btn{display:flex;align-items:center;gap:9px;color:#fff;padding:13px 20px;
  background:linear-gradient(180deg,var(--shu),var(--shu-btn));
  border-radius:100px;font-weight:600;font-size:14.5px;transition:background .15s,transform .12s;flex-shrink:0}
.cart-btn:hover{background:var(--shu-deep);transform:translateY(-1px);box-shadow:0 8px 22px -8px rgba(210,64,44,.5)}
.cart-btn.bump{animation:bump .35s}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.cart-count{background:#fff;color:var(--shu);min-width:22px;height:22px;border-radius:100px;
  display:grid;place-items:center;font-size:12.5px;font-weight:700;padding:0 6px}

/* ---------- ЛОГОТИП ---------- */
.logo-img{height:34px;width:auto;display:block}
footer .logo-img{height:38px}
/* В тёмной теме чёрные буквы логотипа не видны — осветляем */
:root[data-theme="dark"] .logo-img{filter:invert(1) hue-rotate(180deg) saturate(1.25) brightness(1.06)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-img{filter:invert(1) hue-rotate(180deg) saturate(1.25) brightness(1.06)}
}

/* ---------- БУРГЕР И ПАНЕЛЬ РАЗДЕЛОВ ----------
   Разделы живут в выезжающей слева панели, а не в колонке на странице:
   так каталогу достаётся вся ширина, а список остаётся в одном клике. */
.burger{width:46px;height:46px;border-radius:14px;background:var(--surface-2);
  color:var(--text);display:grid;place-items:center;flex-shrink:0;
  transition:background .15s}
.burger:hover{background:var(--border)}
.burger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.side-drawer{position:fixed;top:0;left:0;bottom:0;width:min(330px,86vw);z-index:95;
  background:var(--bg);display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .3s cubic-bezier(.3,1,.4,1);
  box-shadow:20px 0 60px -20px rgba(0,0,0,.4)}
.side-drawer.on{transform:translateX(0)}
.sd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:1px solid var(--border)}
.sd-head b{font-family:Unbounded,sans-serif;font-size:17px;font-weight:600}
.sd-close{width:36px;height:36px;border-radius:50%;background:var(--surface-2);
  font-size:19px;color:var(--text-2);transition:background .13s,color .13s}
.sd-close:hover{background:var(--border);color:var(--text)}
.sd-body{flex:1;overflow-y:auto;padding:12px}
.sd-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;
  border-radius:100px;text-align:left;font-size:15px;color:var(--text-2);
  transition:background .13s,color .13s}
.sd-item:hover{background:var(--surface-2);color:var(--text)}
.sd-item.on{background:var(--shu);color:#fff;font-weight:600}
.sd-em{font-size:18px;line-height:1;flex-shrink:0}
.sd-n{margin-left:auto;font-size:13px;color:var(--text-2);font-variant-numeric:tabular-nums}
.sd-item.on .sd-n{color:rgba(255,255,255,.8)}

/* ---------- ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА ---------- */
/* Флаг рисуем инлайн-SVG в круглой маске: эмодзи-флаги не отображаются
   на Windows и части Android — там вместо флага были бы буквы «RU». */
.flag{width:22px;height:22px;border-radius:50%;overflow:hidden;flex-shrink:0;
  display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.flag svg{width:100%;height:100%;display:block}

.lang{position:relative;flex-shrink:0}
.lang-btn{display:flex;align-items:center;gap:8px;height:46px;padding:0 13px;border-radius:100px;
  border:1px solid transparent;background:var(--surface-2);color:var(--text);
  font-size:14px;font-weight:500;transition:color .15s,background .15s}
.lang-btn:hover{background:var(--border)}
.lang-btn .flag{width:20px;height:20px}
.lang-name{white-space:nowrap}
.lang-v{color:var(--text-2);font-size:11px;flex-shrink:0}

.lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:80;min-width:210px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);
  box-shadow:var(--shadow-lift);padding:6px;display:none}
.lang-menu.on{display:block}
.lang-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 13px;
  border-radius:var(--r-s);text-align:left;font-size:15px;transition:background .12s}
.lang-row:hover{background:var(--surface-2)}
.lang-row.on{font-weight:600}
.lang-ok{margin-left:auto;color:var(--shu);font-weight:700}

/* На узких экранах в служебной полосе оставляем только флаг */
@media (max-width:560px){
  .lang-name{display:none}
  .lang-btn{padding:0 7px;gap:5px}
  .lang-menu{min-width:min(230px,calc(100vw - 24px))}
}

/* ---------- ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ ---------- */
.theme-btn{width:46px;height:46px;border-radius:50%;border:1px solid transparent;
  background:var(--surface-2);color:var(--text-2);display:grid;place-items:center;flex-shrink:0;
  transition:color .15s,background .15s}
.theme-btn:hover{color:var(--text);background:var(--border)}
.theme-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.theme-btn .i-moon{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .i-sun{display:none}
  :root:not([data-theme="light"]) .theme-btn .i-moon{display:block}
}

/* ---------- ПЛЕЙСХОЛДЕР ФОТО ---------- */
.ph{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(115% 88% at 28% 18%, hsl(var(--h,8) 62% var(--tint-l) / var(--tint-a1)), transparent 60%),
             radial-gradient(96% 78% at 78% 78%, hsl(var(--h2,30) 66% var(--tint-l) / var(--tint-a2)), transparent 56%),
             linear-gradient(158deg,var(--ph-a),var(--ph-b))}
.ph b{font-weight:400;opacity:.45;filter:grayscale(.25);
  text-align:center;line-height:1;font-size:44px;user-select:none}
.ph-tag{position:absolute;bottom:12px;right:12px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--text-2);background:var(--chip-bg);padding:4px 10px;border-radius:100px;
  border:1px solid var(--border)}
/* Реальное фото блюда — заполняет всю область карточки */
.pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.3,1)}
.pic.ok{opacity:1}
.card:hover .pic{transform:scale(1.05)}

/* ---------- КАРТОЧКА ТОВАРА ---------- */
/* Ширину колонки задаём минимумом, а не их числом: сетка сама решит,
   сколько поместится — и в широкой ленте главной, и рядом с боковой
   панелью каталога. Отступ по горизонтали меньше, чем по вертикали:
   у карточек нет рамок, и лишний воздух рвёт ряд на части. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:20px 10px}
@media (max-width:700px){ .grid{grid-template-columns:repeat(2,1fr);gap:14px 8px} }
/* Карточка без рамки и тени: держат её только фото и текст. Фото —
   горизонтальное 3:2, так в ряд помещается больше блюд и они крупнее. */
.card{background:transparent;border:0;border-radius:var(--r-l);padding:10px;
  display:flex;flex-direction:column;
  transition:background .16s,transform .16s,box-shadow .2s}
.card:hover{background:var(--surface);transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--surface-2);
  border-radius:var(--r-m)}
/* Тёмная вуаль сверху: бейдж «ХИТ» читается на любом фото,
   хоть на светлом рисе, хоть на тёмной нори */
.card-media::after{content:"";position:absolute;inset:0 0 auto 0;height:64px;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.30),transparent);pointer-events:none;opacity:0;
  transition:opacity .2s}
.card-media:has(.pic)::after{opacity:1}
.badge{position:absolute;top:10px;left:10px;z-index:3;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 10px;border-radius:100px;background:var(--shu-btn);color:#fff}
.badge.gold{background:var(--gold)}
.card-body{padding:12px 2px 2px;display:flex;flex-direction:column;gap:4px;flex:1}
.card-name{font-size:15.5px;font-weight:500;line-height:1.3}
.card-meta{font-size:12.5px;color:var(--text-2)}
.card-foot{margin-top:auto;padding-top:12px}

/* Цена и есть кнопка «в корзину» — целиться в маленький кружок не нужно */
.card-buy{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;
  border-radius:14px;background:var(--surface-2);border:1px solid var(--border);
  color:var(--text);font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;
  transition:background .14s,border-color .14s,color .14s}
.card-buy:hover{background:var(--shu-btn);border-color:var(--shu-btn);color:#fff}
.buy-ico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;opacity:.75}
.card-buy:hover .buy-ico{opacity:1}

.card-qty{display:flex;align-items:center;justify-content:space-between;width:100%;height:46px;
  border-radius:14px;background:var(--shu-btn);color:#fff;padding:0 6px}
.card-qty button{width:38px;height:38px;border-radius:10px;color:#fff;font-size:19px;font-weight:600;
  transition:background .14s}
.card-qty button:hover{background:rgba(255,255,255,.18)}
.card-qty span{font-family:Unbounded,sans-serif;font-size:15px;font-weight:700}
.inq{display:flex;align-items:center;gap:8px}
.inq button{width:30px;height:30px;border-radius:50%;border:1px solid var(--border-2);background:var(--surface-2);
  font-size:15px;font-weight:600;transition:all .14s}
.inq button:hover{border-color:var(--shu);color:var(--shu)}
.inq span{font-family:Unbounded,sans-serif;font-size:14px;font-weight:600;min-width:18px;text-align:center}

/* ---------- СЕКЦИИ ---------- */
section{padding:48px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}
.sec-head h2{font-size:clamp(21px,2.6vw,30px);font-weight:700}
.sec-head p{margin:6px 0 0;color:var(--text-2);font-size:15px}
.sec-link{font-size:14.5px;font-weight:600;color:var(--shu);text-decoration:none;white-space:nowrap}
.sec-link:hover{text-decoration:underline}
/* snap:proximity, а не mandatory: жёсткий снап отменяет программную
   прокрутку стрелками (лента отматывается обратно), а для свайпа
   разницы почти нет */
.lane{display:flex;gap:22px;overflow-x:auto;padding:4px 22px 16px;margin:0 -22px;scroll-snap-type:x proximity}
.lane .card{min-width:252px;scroll-snap-align:start}
.lane::-webkit-scrollbar{height:7px}
.lane::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:100px}

/* ---------- стрелки ленты ----------
   Мышью горизонтальную ленту прокрутить нечем: колесо крутит страницу,
   а половина сетов остаётся за краем. На тач-устройствах стрелки не нужны
   и не показываются — там работает свайп. */
.lane-wrap{position:relative}
.lane-nav{position:absolute;top:calc(50% - 26px);z-index:20;width:44px;height:44px;border-radius:50%;
  display:none;place-items:center;background:var(--surface);border:1px solid var(--border-2);
  color:var(--text);box-shadow:var(--shadow-lift);
  transition:background .15s,border-color .15s,opacity .2s,transform .15s}
.lane-nav:hover{border-color:var(--shu);color:var(--shu);transform:scale(1.06)}
.lane-nav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.lane-nav.prev{left:-14px}
.lane-nav.next{right:-14px}
.lane-nav[hidden]{opacity:0;pointer-events:none}
/* Только там, где есть мышь */
@media (hover:hover) and (pointer:fine) and (min-width:961px){
  .lane-nav{display:grid}
  /* Полосу прокрутки под лентой прячем — навигация теперь стрелками */
  .lane{scrollbar-width:none}
  .lane::-webkit-scrollbar{display:none}
}

.empty{padding:70px 20px;text-align:center;color:var(--text-2)}
.empty b{display:block;font-size:19px;color:var(--text);margin-bottom:8px;font-family:Unbounded,sans-serif}

/* ---------- КОРЗИНА (ящик) ---------- */
.scrim{position:fixed;inset:0;z-index:90;background:var(--scrim-bg);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);z-index:95;background:var(--bg);
  border-left:1px solid var(--border);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.3,1,.4,1);
  box-shadow:-20px 0 60px -20px rgba(0,0,0,.35)}
.drawer.on{transform:translateX(0)}
.dr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px;
  border-bottom:1px solid var(--border)}
.dr-head h2{font-size:19px;font-weight:600}
.dr-close{width:34px;height:34px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);font-size:19px}
.dr-close:hover{background:var(--surface)}
.dr-body{flex:1;overflow-y:auto;padding:18px 22px}
.dr-foot{border-top:1px solid var(--border);padding:18px 22px;background:var(--surface)}

.gift{background:linear-gradient(150deg,var(--gift-a),var(--gift-b));border:1px solid var(--gift-border);border-radius:var(--r-m);
  padding:16px 17px;margin-bottom:16px}
.gift-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.gift-top b{font-size:14px;font-weight:600}
.gift-top span{font-size:12.5px;color:var(--text-2)}
.bar{height:8px;background:var(--surface-2);border-radius:100px;overflow:hidden;border:1px solid var(--border)}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--shu),#E9704F);border-radius:100px;
  transition:width .5s cubic-bezier(.3,1,.4,1)}
.gift-msg{margin-top:10px;font-size:13px}
.gift-msg.win{color:var(--nori);font-weight:600}

.line{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--border);align-items:center}
.line:last-child{border-bottom:none}
.thumb{width:56px;height:56px;border-radius:var(--r-s);flex-shrink:0;position:relative;overflow:hidden}
.thumb .ph b{font-size:13px}
.line-i{flex:1;min-width:0}
.line-n{font-size:14.5px;font-weight:600;line-height:1.3}
.line-m{font-size:12px;color:var(--text-2);margin-top:2px}
.line-p{font-family:Unbounded,sans-serif;font-size:14.5px;font-weight:600;text-align:right;min-width:76px}
.gift-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--nori);background:var(--nori-soft);padding:3px 8px;border-radius:100px;margin-top:4px}
.warn-tag{display:block;font-size:11.5px;color:var(--gold);margin-top:3px}

.up{display:flex;gap:11px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;margin-top:14px}
.up::-webkit-scrollbar{display:none}
.upc{min-width:138px;max-width:138px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);
  padding:0 0 11px;text-align:left;transition:all .15s;flex-shrink:0;overflow:hidden}
.upc:hover{border-color:var(--shu);transform:translateY(-2px)}
.upc:hover .pic{transform:scale(1.05)}
.upc-m{display:block;position:relative;aspect-ratio:4/3;background:var(--surface-2);margin-bottom:9px}
.upc-m .ph b{font-size:22px}
.upc b,.upc em{padding:0 11px;display:block}
.upc b{display:block;font-size:13px;font-weight:600;margin-bottom:2px;line-height:1.25}
.upc em{display:block;font-family:Unbounded,sans-serif;font-style:normal;font-size:13.5px;font-weight:600;margin-top:7px}
.up-title{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);margin-top:18px}

.sline{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:5px 0}
.sline span:first-child{color:var(--text-2)}
.sline.disc span{color:var(--nori);font-weight:600}
.note-small{font-size:12px;color:var(--text-2);line-height:1.45;padding:4px 0}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px;padding-top:13px;
  border-top:1px solid var(--border)}
.total span{font-size:14.5px;font-weight:600}
.total b{font-family:Unbounded,sans-serif;font-size:25px;font-weight:700}
.dnote{margin-top:12px;padding:11px 13px;background:var(--surface-2);border-radius:var(--r-s);font-size:12px;
  color:var(--text-2);line-height:1.45;border:1px solid var(--border)}
.dnote b{display:block;color:var(--shu);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  margin-bottom:3px;font-weight:700}
.btn-main{width:100%;padding:15px;border-radius:100px;color:#fff;font-weight:600;
  background:linear-gradient(180deg,var(--shu),var(--shu-btn));
  font-size:15.5px;margin-top:13px;transition:all .15s}
.btn-main:hover{background:var(--shu-deep);transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(210,64,44,.55)}
.btn-main:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-ghost2{background:var(--surface-2);color:var(--text);margin-top:8px}
.btn-ghost2:hover{background:var(--border)}

.field{margin-bottom:13px}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;padding:11px 13px;border-radius:var(--r-s);
  border:1px solid var(--border-2);background:var(--surface);color:var(--text);font-size:14.5px;
  transition:border-color .15s,box-shadow .15s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--shu);
  box-shadow:0 0 0 3px var(--ring)}
.field textarea{min-height:66px;resize:vertical}
.field .err{border-color:var(--shu);background:var(--err-bg)}
.hint{font-size:11.5px;color:var(--text-2);margin-top:4px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.msg{padding:12px 14px;border-radius:var(--r-s);font-size:13.5px;margin-bottom:13px;display:none}
.msg.on{display:block}
.msg.bad{background:var(--bad-bg);border:1px solid var(--bad-border);color:var(--shu-deep)}

.done{text-align:center;padding:40px 22px}
.done-i{width:64px;height:64px;border-radius:50%;background:var(--nori);color:#fff;display:grid;place-items:center;
  font-size:31px;margin:0 auto 18px}
.done h2{font-size:22px;margin-bottom:9px}
.done p{color:var(--text-2);font-size:14.5px;margin:0 0 6px}
.done .no{font-family:Unbounded,sans-serif;font-size:19px;font-weight:700;color:var(--text);margin:14px 0}

/* ---------- ПОДВАЛ ---------- */
footer{border-top:1px solid var(--border);margin-top:50px;padding:36px 0 46px;color:var(--text-2);
  font-size:14px;background:var(--surface-2)}
.foot-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer b{color:var(--text)}

@media (max-width:960px){
  .search{max-width:none}
  .foot-in{flex-direction:column;gap:18px}
}
/* Телефон: поиск уезжает на свою строку — в одну он не помещается */
@media (max-width:700px){
  .top-in{flex-wrap:wrap;height:auto;padding-top:11px;padding-bottom:11px;gap:10px}
  .logo{flex:1 1 auto}
  .logo-img{height:27px}
  .search input{padding-top:10px;padding-bottom:10px}
}
@media (max-width:380px){
  .logo-img{height:23px}
  .cart-btn{padding:10px 13px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================
   ПОДСКАЗКИ ПОИСКА
   ============================================================ */
.sug{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:80;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);
  box-shadow:var(--shadow-lift);overflow:hidden;display:none;max-height:min(60vh,420px);overflow-y:auto}
.sug.on{display:block}
.sug-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:12px 15px;text-align:left;border-bottom:1px solid var(--line-soft,var(--border));
  transition:background .12s}
.sug-row:last-child{border-bottom:none}
.sug-row:hover,.sug-row.at{background:var(--surface-2)}
.sug-i{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:14.5px;font-weight:500}
.sug-i em{font-style:normal;font-size:12px;color:var(--text-2);font-weight:400}
.sug-p{font-family:Unbounded,sans-serif;font-size:14px;font-weight:600;white-space:nowrap;flex-shrink:0}

/* ============================================================
   ВЫБОР АДРЕСА
   ============================================================ */
.addr{position:relative;flex-shrink:0}
.addr-btn{display:flex;align-items:center;gap:8px;max-width:210px;
  padding:12px 16px;border-radius:100px;border:1px solid transparent;
  background:var(--surface-2);color:var(--text);font-size:14px;font-weight:500;
  transition:background .15s,border-color .15s}
.addr-btn:hover{background:var(--border)}
.addr-btn.empty{color:var(--text-2)}
.addr-pin{color:var(--shu);font-size:15px;flex-shrink:0}
.addr-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr-v{color:var(--text-2);font-size:11px;flex-shrink:0}
.addr-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:80;min-width:290px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);
  box-shadow:var(--shadow-lift);padding:8px;display:none}
.addr-menu.on{display:block}
.addr-new{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:12px 13px;border-radius:var(--r-s);background:var(--surface-2);
  color:var(--shu);font-weight:600;font-size:14.5px;margin-bottom:6px;transition:background .12s}
.addr-new:hover{background:var(--border)}
.addr-row{display:flex;align-items:center;gap:6px;border-radius:var(--r-s);transition:background .12s}
.addr-row:hover{background:var(--surface-2)}
.addr-row.on{background:var(--nori-soft)}
.addr-pick{flex:1;display:flex;align-items:center;gap:9px;padding:11px 13px;
  text-align:left;font-size:14.5px;min-width:0}
.addr-row.on .addr-pick{font-weight:600}
.addr-del{width:34px;height:34px;border-radius:50%;color:var(--text-2);font-size:14px;flex-shrink:0}
.addr-del:hover{color:var(--shu);background:var(--surface)}
.addr-hint{padding:10px 13px;font-size:12.5px;color:var(--text-2)}

/* ============================================================
   КНОПКА КАБИНЕТА
   ============================================================ */
.acc-btn{width:46px;height:46px;border-radius:50%;border:1px solid transparent;
  background:var(--surface-2);color:var(--text-2);display:grid;place-items:center;flex-shrink:0;
  transition:color .15s,background .15s}
.acc-btn:hover{color:var(--text);background:var(--border)}
.acc-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   ЛИЧНЫЙ КАБИНЕТ
   ============================================================ */
.acc-sec{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-2);margin:22px 0 11px}
.acc-sec:first-child{margin-top:0}
.acc-addr{border:1px solid var(--border);border-radius:var(--r-m);padding:5px;margin-bottom:10px}
.acc-empty{padding:16px;background:var(--surface-2);border-radius:var(--r-m);
  font-size:14px;color:var(--text-2);margin-bottom:10px}
.btn-ghost3{width:100%;padding:12px;border-radius:100px;background:var(--surface-2);
  border:1px solid var(--border-2);color:var(--text);font-weight:600;font-size:14.5px;
  transition:background .15s,border-color .15s}
.btn-ghost3:hover{border-color:var(--shu);color:var(--shu)}
.ord{border:1px solid var(--border);border-radius:var(--r-m);padding:15px 16px;margin-bottom:10px}
.ord-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
.ord-top b{font-family:Unbounded,sans-serif;font-size:14.5px}
.ord-top span{font-family:Unbounded,sans-serif;font-size:14.5px;font-weight:600}
.ord-d{font-size:12.5px;color:var(--text-2);margin-bottom:8px}
.ord-i{font-size:13.5px;color:var(--text-2);line-height:1.45;margin-bottom:12px}

/* ---------- вход / регистрация ---------- */
.acc-btn.in{border-color:var(--shu);color:var(--shu)}
/* Зелёная точка — пользователь вошёл */
.acc-btn{position:relative}
.acc-btn.in::after{content:"";position:absolute;top:-1px;right:-1px;width:11px;height:11px;
  border-radius:50%;background:var(--nori);border:2px solid var(--bg)}
.auth{border:1px solid var(--border);border-radius:var(--r-m);padding:15px;margin-bottom:6px;
  background:var(--surface)}
.auth-tabs{display:flex;gap:6px;background:var(--surface-2);border-radius:100px;padding:4px;margin-bottom:14px}
.auth-tab{flex:1;padding:9px;border-radius:100px;font-size:14px;font-weight:600;color:var(--text-2);
  transition:background .13s,color .13s}
.auth-tab.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.auth .field{margin-bottom:11px}
.auth .btn-main{margin-top:4px}
.auth-note{font-size:12.5px;color:var(--text-2);line-height:1.45;margin-top:11px;text-align:center}
.acc-user{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 16px;border:1px solid var(--border);border-radius:var(--r-m);
  background:var(--surface);margin-bottom:6px}
.acc-user-i{min-width:0}
.acc-user-i b{display:block;font-size:16px;font-weight:600;line-height:1.25}
.acc-user-i span{display:block;font-size:13px;color:var(--text-2);margin-top:2px}
.acc-logout{padding:9px 15px;border-radius:100px;background:var(--surface-2);
  border:1px solid var(--border-2);color:var(--text-2);font-size:13.5px;font-weight:600;
  flex-shrink:0;transition:border-color .13s,color .13s}
.acc-logout:hover{border-color:var(--shu);color:var(--shu)}

/* ============================================================
   ПУСТАЯ КОРЗИНА С ПРЕДЛОЖЕНИЯМИ
   ============================================================ */
.empty-top{text-align:center;padding:18px 10px 22px}
.empty-top b{display:block;font-family:Unbounded,sans-serif;font-size:19px;margin-bottom:7px}
.empty-top span{font-size:14.5px;color:var(--text-2)}
.sug-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.sug-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);
  overflow:hidden;text-align:left;display:flex;flex-direction:column;transition:border-color .15s,transform .12s}
.sug-card:hover{border-color:var(--shu);transform:translateY(-2px)}
.sug-card-m{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--surface-2)}
.sug-card-n{display:block;padding:10px 11px 3px;font-size:13.5px;font-weight:600;line-height:1.3}
.sug-card-p{display:block;padding:0 11px 11px;font-family:Unbounded,sans-serif;
  font-size:14px;font-weight:600;color:var(--shu)}

/* Телефон: три ряда. Первый — бургер, логотип, кабинет, корзина;
   второй — адрес с языком и темой; третий — поиск во всю ширину.
   Порядок задан явно, иначе элементы разъезжаются при переносе. */
@media (max-width:700px){
  .top-in{gap:7px;height:auto;flex-wrap:wrap;padding-top:11px;padding-bottom:11px}
  /* Ряд 1: бургер, логотип, связь, кабинет, корзина */
  .burger{order:0;width:40px;height:40px;border-radius:12px}
  .logo{order:1;flex:1 1 auto;min-width:0}
  .logo-img{height:24px}
  .top-tel{order:2;width:40px;height:40px}
  .acc-btn{order:3;width:40px;height:40px}
  .cart-btn{order:4;padding:10px 13px;font-size:13.5px}
  /* Ряд 2: адрес занимает всё место, язык и тема — рядом */
  .addr{order:5;flex:1 1 auto;min-width:0}
  .addr-btn{max-width:none;width:100%;padding:11px 14px;font-size:14px}
  .addr-menu{left:0;right:auto;min-width:min(320px,calc(100vw - 44px))}
  .lang{order:6}
  .lang-btn{height:40px;padding:0 10px}
  .theme-btn{order:7;width:40px;height:40px}
  /* Ряд 3: поиск во всю ширину */
  .search{order:8;flex:1 1 100%;min-width:0}
}

/* ============================================================
   КОММЕНТАРИЙ К ПОЗИЦИИ
   ============================================================ */
.line-wrap{border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:2px}
.line-wrap:last-child{border-bottom:none}
.line-wrap .line{border-bottom:none;padding-bottom:4px}
.note-add{display:block;width:100%;text-align:left;padding:7px 0 2px;
  font-size:12.5px;font-weight:500;color:var(--text-2);transition:color .13s}
.note-add:hover{color:var(--shu)}
.note-has{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  text-align:left;padding:8px 11px;margin-top:5px;border-radius:var(--r-s);
  background:var(--gold-soft,var(--surface-2));border:1px solid var(--border);
  font-size:12.5px;line-height:1.4;color:var(--text);transition:border-color .13s}
.note-has:hover{border-color:var(--shu)}
.note-has span{min-width:0;overflow-wrap:anywhere}
.note-has em{font-style:normal;font-size:11.5px;color:var(--text-2);flex-shrink:0}

/* ---------- панель пожеланий к блюду ---------- */
.note-panel{margin-top:8px;padding:12px;border-radius:var(--r-m);
  background:var(--surface-2);border:1px solid var(--border-2)}
.note-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.note-chip{padding:7px 12px;border-radius:100px;border:1px solid var(--border-2);
  background:var(--surface);color:var(--text-2);font-size:12.5px;font-weight:500;
  transition:all .13s;line-height:1.2}
.note-chip:hover{border-color:var(--shu);color:var(--shu)}
.note-chip.on{background:var(--shu-btn);border-color:var(--shu-btn);color:#fff}
.note-free{width:100%;padding:10px 12px;border-radius:var(--r-s);
  border:1px solid var(--border-2);background:var(--surface);color:var(--text);font-size:16px}
.note-free:focus{outline:none;border-color:var(--shu);box-shadow:0 0 0 3px var(--ring)}
.note-acts{display:flex;gap:8px;margin-top:10px}
.note-save,.note-cancel{flex:1;padding:10px;border-radius:100px;font-size:13.5px;font-weight:600;
  transition:all .13s}
.note-save{background:var(--shu-btn);color:#fff}
.note-save:hover{background:var(--shu-deep)}
.note-cancel{background:var(--surface);border:1px solid var(--border-2);color:var(--text-2)}
.note-cancel:hover{border-color:var(--shu);color:var(--shu)}

/* ---------- плашка тестового режима ---------- */
.test-bar{position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:11px 16px;background:var(--gold);color:#fff;font-size:13.5px;
  box-shadow:0 -4px 20px rgba(0,0,0,.2)}
.test-bar b{font-weight:700}
.test-bar span{opacity:.9}
.test-bar a{color:#fff;text-decoration:underline;font-weight:600;white-space:nowrap}
body.has-test-bar{padding-bottom:52px}
@media (max-width:520px){ .test-bar{font-size:12.5px;gap:8px;padding:9px 12px} }

/* ---------- телефон в подвале ---------- */
.foot-tel{display:inline-block;margin-top:3px;color:var(--shu);font-weight:600;
  text-decoration:none;font-size:15px}
.foot-tel:hover{text-decoration:underline}

/* ---------- адаптив шапки ----------
   Порядок, в котором элементы уступают место, — по их ценности для
   заказа: сначала уходит служебный текст, потом навигация (её дублируют
   логотип и поиск). Адрес и корзина не сжимаются никогда. */
.search{min-width:200px}
/* В тесном диапазоне поиск ужимается первым — он растяжимый,
   а адрес и корзина сжиматься не должны */
@media (max-width:1020px){ .search{min-width:140px} }
/* Поиск забирает всю свободную ширину шапки: с потолком в 380px
   на мониторе 1920 больше 700px оставалось пустыми */
@media (min-width:1200px){ .search{max-width:none} }

/* Порядок, в котором шапка сдаёт место: сначала часы под телефоном,
   потом название языка, потом номер (остаётся трубка). Адрес и корзина —
   никогда: это то, ради чего сюда пришли. */
@media (max-width:1320px){ .tel-i em{display:none} .tel-i b{font-size:14.5px} }
@media (max-width:1200px){ .lang-name{display:none} .lang-btn{padding:0 11px;gap:6px} }
@media (max-width:1080px){ .top-tel .tel-i{display:none} }

/* Адресу нужно место под реальный адрес, а не «Куда везё…» */
@media (min-width:701px){ .addr-btn{max-width:230px} }
@media (max-width:900px){ .addr-btn{max-width:190px} }

/* ---------- иконка корзины ---------- */
.cart-ico{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;display:none}
/* Ниже 1020px слово «Корзина» уступает место адресу и поиску —
   иконки со счётчиком достаточно, кнопка остаётся такой же заметной */
@media (max-width:1020px){
  .cart-ico{display:block}
  .cart-txt{display:none}
  .cart-btn{padding:12px 15px;gap:7px}
  .addr-btn{max-width:160px}
}
@media (max-width:700px){ .cart-btn{padding:11px 14px} }

/* ---------- всплывающее табло подарка ---------- */
/* Появляется при добавлении товара, когда корзина закрыта.
   Тот же блок .gift, что и внутри корзины, но плавает над страницей. */
.gift-toast{position:fixed;z-index:88;right:22px;bottom:22px;width:min(390px,calc(100vw - 44px));
  cursor:pointer;filter:drop-shadow(0 18px 44px rgba(20,12,9,.30));
  opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;
  transition:opacity .28s ease,transform .3s cubic-bezier(.3,1,.4,1)}
.gift-toast.on{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.gift-toast .gift{margin:0;box-shadow:var(--shadow-lift)}
.gift-toast:hover .gift{border-color:var(--shu)}
/* Не перекрывать плашку тестового режима */
body.has-test-bar .gift-toast{bottom:74px}
@media (max-width:560px){
  .gift-toast{right:12px;left:12px;width:auto;bottom:14px}
  body.has-test-bar .gift-toast{bottom:64px}
}

/* ---------- окно «второй подарок» ---------- */
/* Отдельная модалка на момент разблокировки второго подарка. */
.gm-scrim{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  background:var(--scrim-bg);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .25s}
.gm-scrim.on{opacity:1;pointer-events:auto}
.gm-modal{position:relative;width:min(420px,100%);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-l);padding:36px 30px 26px;
  text-align:center;box-shadow:var(--shadow-lift);
  transform:translateY(14px) scale(.95);transition:transform .32s cubic-bezier(.3,1,.4,1)}
.gm-scrim.on .gm-modal{transform:none}
.gm-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--border);font-size:19px;color:var(--text-2);
  transition:color .13s,background .13s}
.gm-close:hover{color:var(--text);background:var(--border)}
.gm-burst{font-size:58px;line-height:1;margin-bottom:14px;display:inline-block;
  filter:drop-shadow(0 8px 18px rgba(210,64,44,.3));
  animation:gm-pop .55s cubic-bezier(.2,1.5,.4,1) backwards}
@keyframes gm-pop{0%{transform:scale(0) rotate(-20deg);opacity:0}
  60%{transform:scale(1.18) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.gm-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--nori);margin-bottom:10px}
.gm-modal h2{font-size:clamp(21px,4.6vw,25px);font-weight:700;margin-bottom:10px}
.gm-text{color:var(--text-2);font-size:15px;line-height:1.5;margin:0 auto 20px;max-width:34ch}
.gm-gifts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.gm-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:100px;
  background:var(--nori-soft);color:var(--nori);font-weight:600;font-size:14px}
.gm-cta{width:100%;padding:14px;border-radius:100px;color:#fff;font-weight:600;font-size:15px;
  background:linear-gradient(180deg,var(--shu),var(--shu-btn));transition:background .15s,transform .12s,box-shadow .15s}
.gm-cta:hover{background:var(--shu-deep);transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(210,64,44,.55)}
.gm-more{width:100%;padding:12px;margin-top:8px;border-radius:100px;background:transparent;
  color:var(--text-2);font-weight:600;font-size:14px;transition:color .13s}
.gm-more:hover{color:var(--text)}

/* ---------- фирменные мелочи ---------- */
::selection{background:var(--shu);color:#fff}
*{scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:100px;border:3px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* Реквизиты для оплаты переводом на экране «заказ принят».
   Номер крупный и моноширинный: его переписывают в банковское
   приложение вручную, цифры не должны сливаться. */
.paybox{background:var(--surface-2);border-radius:var(--r-m);padding:18px 16px;margin:16px 0;text-align:center}
.paybox-t{font-size:13px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.07em}
.paybox-card{font-family:ui-monospace,Menlo,monospace;font-size:22px;font-weight:600;
  letter-spacing:.06em;margin:10px 0 4px;word-break:break-all}
.paybox-h{font-size:13.5px;color:var(--text-2)}
.paybox-copy{margin-top:12px;border:none;background:var(--shu-btn);color:#fff;font:inherit;font-weight:600;
  padding:10px 20px;border-radius:100px;cursor:pointer}
.paybox-copy:hover{background:var(--shu-deep)}
.paybox-n{font-size:12.5px;color:var(--text-2);margin-top:12px;line-height:1.45}