:root{
  --ink:#14161a; --ink2:#3d4552; --muted:#6b7280; --faint:#9aa3af;
  --line:#e3e7ec; --line2:#eef1f4; --bg:#f4f6f8; --surface:#fff;
  /* фирменные цвета: красный #cb2f24 с логотипа, синий — оригинальный #2995e2 (оттенок 204°).
     Весь синий держим в этом оттенке: чистый #2995e2 на белом даёт контраст 3,2 — для текста
     мало, поэтому текстовый вариант темнее, а тёмные поверхности — тот же синий в глубоком тоне */
  --brand:#0f3b61; --brand2:#175389;      /* тёмные поверхности: подвал, «Найти», плашки */
  --blue:#2a8fd8; --blue-ink:#1b6fb2; --blue-soft:#e4f0fa;     /* рамки и выделения / текст (5,3 на белом) / подсветка */
  --accent:#cb2f24; --accent-hi:#d83226; --accent-soft:#f7eeed;
  --top-bar:#be2c22;
  --ok:#15803d; --ok-soft:#eaf7ef;
  --r:10px; --r-lg:16px;
  --shadow:0 1px 2px rgba(20,22,26,.05);
  --shadow-pop:0 12px 32px -8px rgba(20,22,26,.18), 0 2px 8px rgba(20,22,26,.06);
  --wrap:1280px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
/* место под полосу прокрутки зарезервировано всегда — иначе при блокировке
   скролла (мега-меню, шторка) страница расширяется и картинка дёргается */
html{-webkit-text-size-adjust:100%; scrollbar-gutter:stable}
html.locked{overflow:hidden}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.55 "Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(217,72,15,.14);
  overflow-x:hidden;   /* страховка от случайного горизонтального сдвига на узких экранах */
}
h1,h2,h3,h4{font-family:Rubik,system-ui,sans-serif; font-weight:600; margin:0; line-height:1.2; letter-spacing:-.01em}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
img{max-width:100%; display:block}
svg{display:block; flex:none}
:where(a,button,input,[tabindex]):focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* атрибут hidden должен прятать всегда: иначе любое display:flex/grid у класса его перебивает —
   так «Корзина пуста» висела рядом с товарами, а счётчик корзины показывал «0» */
[hidden]{display:none!important}
.skip{position:absolute; left:12px; top:-60px; z-index:200; background:var(--surface); padding:10px 16px; border-radius:8px; box-shadow:var(--shadow-pop); transition:top .18s ease}
.skip:focus{top:12px}

/* ---------- баннер «это демо» ---------- */
/* нейтрально-тёмная, а не фирменная: это служебное уведомление, а не часть сайта */
.demo{background:#1e2732; color:#c3cdd8; font-size:13.5px; line-height:1.45}
.demo .wrap{display:flex; gap:12px; align-items:flex-start; padding-top:9px; padding-bottom:9px}
.demo svg{margin-top:2px; color:#ff9d8f}
.demo b{color:#fff; font-weight:700}

/* ---------- шапка ---------- */
/* красная служебная полоса — как на действующем сайте магазина */
.top{background:var(--top-bar); color:#fff; font-size:14px}
.top .wrap{display:flex; align-items:center; gap:22px; height:42px}
.top nav{display:flex; gap:20px; margin-left:auto}
.top a{color:rgba(255,255,255,.88)}
.top a:hover{color:#fff}
.top .dim{color:rgba(255,255,255,.75)}
.city{display:flex; align-items:center; gap:6px; font-weight:600}

header{background:var(--surface); position:sticky; top:0; z-index:60; border-bottom:1px solid var(--line)}
.head{display:flex; align-items:center; gap:16px; height:82px}
/* логотип: маскот отдельной картинкой, надпись вырезана из фирменного файла */
.logo{display:flex; align-items:center; gap:8px; flex:none; align-self:stretch}
/* надпись вырезана по самим буквам, без белой обводки из фирменного файла:
   обводка давала невидимое поле 6 px слева и на тёмном фоне сливала буквы в пятно */
.logo .word{height:24px; width:auto; flex:none; display:block}
.logo .tagline{display:block; font-size:10.5px; color:var(--blue-ink); letter-spacing:.155em;
  text-transform:uppercase; font-weight:700; margin-bottom:4px}

/* Маскот стоит на нижней линии шапки и обрезан ею по пояс.
   Коробка тянется вверх за пределы шапки (отрицательный margin при align-self:stretch),
   поэтому overflow режет только снизу — сверху ему есть куда выпрыгнуть, на красную полосу. */
/* коробка шире картинки: при наклоне и увеличении фигура не должна упереться в боковую обрезку */
.mascot-box{position:relative; width:90px; flex:none; align-self:stretch;
  margin-top:-130px; overflow:hidden; pointer-events:none}
/* сдвиг, поворот и масштаб — отдельными свойствами: у каждого своя длительность и кривая,
   поэтому наклон запаздывает за подъёмом и движение читается как живой прыжок, а не сдвиг */
/* фигура смещена вправо в коробке: слева нужен запас под наклон головы, справа — нет */
.mascot-box img{position:absolute; left:54%; bottom:0; width:70px; height:108px;
  transform-origin:50% 88%;
  translate:-50% 33%; rotate:0deg; scale:1;
  transition:translate .40s cubic-bezier(.4,0,.2,1),
             rotate .34s cubic-bezier(.4,0,.2,1),
             scale .34s cubic-bezier(.4,0,.2,1)}              /* возврат — спокойный */
.logo:hover .mascot-box img,.logo:focus-visible .mascot-box img{
  translate:-54% -2%; rotate:-6deg; scale:1.06;
  transition:translate .58s cubic-bezier(.34,1.56,.64,1),
             rotate .72s cubic-bezier(.18,1.85,.4,1),
             scale .46s cubic-bezier(.34,1.7,.5,1)}           /* прыжок с перелётом и раскачкой */
/* страница прокручена и шапка прилипла к верху окна (класс ставит site.js): над ней пусто,
   высокий прыжок срезал бы голову краем окна. В покое макушка на 10 px ниже верха шапки —
   на столько и подпрыгивает, остальное движение даёт наклон */
header.stuck .logo:hover .mascot-box img,header.stuck .logo:focus-visible .mascot-box img{
  translate:-54% 28%; rotate:-7deg; scale:1.02}

.cat-btn{display:flex; align-items:center; gap:9px; background:var(--accent); color:#fff; font-family:Rubik; font-weight:500;
  font-size:16px; padding:0 20px; height:48px; border-radius:var(--r); flex:none; transition:background .16s ease}
.cat-btn:hover{background:var(--accent-hi)}
.cat-btn .bars{display:grid; gap:3.5px}
.cat-btn .bars i{display:block; width:17px; height:2px; background:#fff; border-radius:2px; transition:transform .2s ease,opacity .2s ease}
.cat-btn[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.cat-btn[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.cat-btn[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.search{flex:1; min-width:0; position:relative}
.search input{width:100%; height:48px; padding:0 108px 0 44px; font-size:15.5px; font-family:inherit;
  border:1.5px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink);
  transition:border-color .16s ease, box-shadow .18s ease}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:none}
/* focus-within, а не :focus — иначе кнопка «Найти» не узнает, что поле активно */
.search:focus-within input{border-color:var(--blue); box-shadow:0 0 0 4px rgba(42,143,216,.2)}
.search:focus-within .ico{color:var(--blue-ink)}
.search:focus-within .go{background:var(--accent)}
.search:focus-within .go:hover{background:var(--accent-hi)}
.search .ico{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
/* именно flex: у обычной кнопки justify-content не работает, и иконка уезжает в угол */
.search .go{position:absolute; right:5px; top:5px; height:38px; padding:0 18px; border-radius:8px; background:var(--brand);
  color:#fff; font-weight:600; font-size:14.5px; transition:background .16s;
  display:flex; align-items:center; justify-content:center}
.search .go:hover{background:var(--brand2)}
.search .go svg{display:none}   /* на десктопе кнопка текстовая, иконка включается на мобиле */
.act-phone{display:none}        /* на десктопе телефон есть в верхней строке и справа в шапке */

.acts{display:flex; align-items:center; gap:4px; flex:none}
.act{display:grid; justify-items:center; gap:3px; padding:8px 11px; border-radius:var(--r); min-width:64px; color:var(--ink2);
  font-size:11.5px; position:relative; transition:background .16s,color .16s}
.act:hover{background:var(--bg); color:var(--accent)}
.act .lbl{line-height:1.2; text-align:center}
.act .badge{position:absolute; top:3px; right:9px; min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; display:grid; place-items:center; font-family:Rubik}

.burger,.head-break{display:none}

/* ---------- мега-меню ---------- */
/* display:none нельзя анимировать, поэтому прячем через visibility+opacity+сдвиг */
/* Меню — отдельная карточка не шире 1180 px над затемнённой страницей, а не простыня от края
   до края. Сам .mega — прозрачный слой во всю ширину: наведение на пустые поля по бокам
   закрывает меню (site.js), для этого он и нужен. */
.mega{position:absolute; left:0; right:0; top:100%; z-index:70; padding:10px 20px 0;
  opacity:0; visibility:hidden; transform:translateY(-8px); transform-origin:top center;
  transition:opacity .18s ease, transform .24s cubic-bezier(.2,.75,.3,1), visibility 0s linear .24s}
.mega.open{opacity:1; visibility:visible; transform:none;
  transition:opacity .2s ease, transform .3s cubic-bezier(.2,.75,.3,1), visibility 0s}
/* --avail считает JS по фактическому низу шапки. Ограничение высоты — на самих колонках:
   высота строки грида считается по содержимому, и max-height на .mega-in колонки не сжимал */
.mega .mega-in{display:grid; grid-template-columns:276px minmax(0,1fr); position:relative;
  max-width:1180px; margin:0 auto; padding:0; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; overflow:hidden;
  box-shadow:0 28px 64px -20px rgba(12,32,56,.42), 0 4px 14px rgba(12,32,56,.08)}
/* подсказка «есть ещё ниже» — включается из JS только когда колонка реально прокручивается */
.mega-in::before,.mega-in::after{content:""; position:absolute; bottom:0; height:30px; pointer-events:none;
  opacity:0; transition:opacity .16s ease; z-index:2}
.mega-in::before{left:0; width:276px; background:linear-gradient(to top,#f5f7fa,rgba(245,247,250,0))}
.mega-in::after{left:276px; right:0; height:34px; background:linear-gradient(to top,#fff,rgba(255,255,255,0))}
.mega-in.rail-more::before,.mega-in.panel-more::after{opacity:1}

/* левая колонка: разделы с миниатюрой товара */
.rail{background:#f5f7fa; border-right:1px solid var(--line2); padding:12px 10px;
  max-height:calc(var(--avail,calc(100vh - 170px)) - 12px); overflow-y:auto; min-height:0; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:#ccd3db transparent}
.rail::-webkit-scrollbar{width:8px}
.rail::-webkit-scrollbar-thumb{background:#ccd3db; border-radius:5px; border:2px solid #f5f7fa}
.rail button{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:7px 10px 7px 7px;
  margin-bottom:3px; border-radius:13px; color:var(--ink); transition:background .16s, box-shadow .16s}
.rail .rp{width:46px; height:46px; flex:none; border-radius:11px; background:#fff; border:1px solid var(--line2);
  display:grid; place-items:center; overflow:hidden; color:var(--muted); transition:border-color .16s, transform .2s}
.rail .rp img{width:100%; height:100%; object-fit:contain; padding:4px}
.rail .rt{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.rail .n{font-weight:700; font-size:14.5px; line-height:1.25}
.rail .c{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.rail .arw{color:var(--blue-ink); opacity:0; transform:translateX(-5px); transition:opacity .16s, transform .2s}
.rail button:hover{background:rgba(255,255,255,.75)}
.rail button[aria-selected="true"]{background:#fff; box-shadow:0 0 0 1px var(--line), 0 6px 16px -10px rgba(12,32,56,.35)}
.rail button[aria-selected="true"] .n{color:var(--blue-ink)}
.rail button[aria-selected="true"] .rp{border-color:#b9d4ea; transform:scale(1.04)}
.rail button[aria-selected="true"] .arw{opacity:1; transform:none}

/* правая часть: подкатегории карточками */
.panel{padding:20px 22px 22px; max-height:calc(var(--avail,calc(100vh - 170px)) - 12px);
  overflow-y:auto; min-height:0; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:#c9d0d8 transparent}
.panel::-webkit-scrollbar{width:9px}
.panel::-webkit-scrollbar-thumb{background:#c9d0d8; border-radius:5px; border:2.5px solid #fff}
.panel-head{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.panel-head h3{font-size:22px; line-height:1.15}
.panel-head span{display:block; margin-top:3px; color:var(--muted); font-size:13.5px}
.panel-head .all{margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:5px; padding:9px 12px 9px 16px;
  border-radius:99px; background:var(--blue-soft); color:var(--blue-ink); font-weight:700; font-size:13.5px;
  transition:background .16s, color .16s}
.panel-head .all:hover{background:var(--blue-ink); color:#fff}
.sc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:10px; align-items:start}
.sc{border:1px solid var(--line2); border-radius:14px; padding:10px 12px 11px 10px; background:#fff;
  transition:border-color .16s, box-shadow .2s, transform .2s}
.sc:hover{border-color:#c4dbee; box-shadow:0 10px 24px -14px rgba(15,59,97,.45); transform:translateY(-1px)}
.sc-main{display:flex; align-items:center; gap:12px}
/* светло-серая подложка + multiply: белый фон снимков из 1С сливается с ней, товар «стоит» на плитке */
.sc-ph{width:58px; height:58px; flex:none; border-radius:11px; background:#f2f5f8; display:grid; place-items:center;
  overflow:hidden; color:#b3bdc8}
.sc-ph img{width:100%; height:100%; object-fit:contain; padding:4px; mix-blend-mode:multiply; transition:transform .3s ease}
.sc:hover .sc-ph img{transform:scale(1.08)}
.sc-t{min-width:0}
.sc-t b{display:block; font-weight:700; font-size:14.5px; line-height:1.25; color:var(--ink); transition:color .15s}
.sc-main:hover b{color:var(--blue-ink)}
.sc-t i{display:block; margin-top:3px; font-style:normal; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.sc-k{display:flex; flex-wrap:wrap; gap:5px; margin-top:10px}
.sc-k a{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; line-height:1.3;
  padding:4px 9px; border-radius:99px; background:var(--bg); color:var(--ink2); transition:background .14s, color .14s}
.sc-k a:hover{background:var(--blue-soft); color:var(--blue-ink)}
.sc-k a.more{background:none; color:var(--muted); font-weight:700; padding-left:4px}
.sc-k a.more:hover{color:var(--blue-ink)}

/* появление карточек при переключении раздела — лесенкой, задержку ставит site.js */
@keyframes grpIn{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
/* backwards, а не both: иначе конечный кадр анимации держал бы transform и глушил подъём при наведении */
.panel-head,.sc{animation:grpIn .32s cubic-bezier(.2,.75,.3,1) backwards}
.scrim{position:fixed; inset:0; background:rgba(20,22,26,.45); z-index:55; opacity:0; pointer-events:none; transition:opacity .2s ease}
.scrim.on{opacity:1; pointer-events:auto}

/* ---------- секции ---------- */
main{padding-bottom:40px}
section{margin-top:34px}
.sec-head{display:flex; align-items:center; gap:16px; margin-bottom:16px}
.sec-head h2{font-size:26px}
.sec-head a{margin-left:auto; color:var(--accent); font-weight:600; font-size:14.5px; display:flex; align-items:center; gap:5px}

/* hero */
.hero{display:grid; grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); gap:16px; margin-top:22px}
.hero-main{position:relative; overflow:hidden; border-radius:var(--r-lg); padding:40px 44px; color:#fff;
  background:linear-gradient(122deg,#0b2e4d 0%,#124a76 52%,#1a64a0 100%); display:flex; flex-direction:column; justify-content:center; min-height:308px}
/* фон — фото торгового зала. Слева под текстом оно укрыто фирменным синим, справа проступает
   вывеска магазина. Затемнение — ::after: он рисуется после картинки и ложится поверх неё */
.hero-main>.hero-bg{position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:60% 24%}
.hero-main::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(11,46,77,.95) 0%,rgba(11,46,77,.88) 38%,rgba(15,59,97,.5) 64%,rgba(15,59,97,.08) 100%)}
.hero-main>*{position:relative; z-index:1}
.tagl{display:inline-flex; align-items:center; gap:7px; align-self:flex-start; background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.2); padding:6px 13px; border-radius:99px; font-size:13px; font-weight:600; margin-bottom:16px}
.hero-main h1{font-size:40px; line-height:1.1; margin-bottom:14px; max-width:15ch}
.hero-main h1 em{font-style:normal; color:#ff9d8f}
.hero-main p{font-size:16.5px; color:#bcd8ee; margin:0 0 24px; max-width:48ch}
.hero-cta{display:flex; gap:11px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; height:50px; padding:0 24px; border-radius:var(--r);
  font-family:Rubik; font-weight:500; font-size:15.5px; transition:background .16s,border-color .16s,transform .12s}
.btn:active{transform:scale(.985)}
.btn-1{background:var(--accent); color:#fff}
.btn-1:hover{background:var(--accent-hi)}
.btn-2{border:1.5px solid rgba(255,255,255,.32); color:#fff}
.btn-2:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.hero-side{display:grid; gap:16px; grid-template-rows:1fr 1fr}
.hcard{background:var(--surface); border-radius:var(--r-lg); padding:22px 24px; display:flex; flex-direction:column; justify-content:center;
  border:1px solid var(--line); position:relative; overflow:hidden}
.hcard .ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; margin-bottom:12px}
.hcard h3{font-size:17.5px; margin-bottom:5px}
.hcard p{margin:0; font-size:14px; color:var(--muted); line-height:1.45}
.hcard.a .ic{background:var(--accent-soft); color:var(--accent)}
.hcard.b .ic{background:var(--ok-soft); color:var(--ok)}

/* преимущества */
.adv{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:16px}
.adv div{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; display:flex; gap:13px; align-items:flex-start}
.adv svg{color:var(--accent); margin-top:1px}
.adv b{display:block; font-family:Rubik; font-weight:600; font-size:14.5px; margin-bottom:2px}
.adv span{font-size:13px; color:var(--muted); line-height:1.4}

/* плитки разделов */
.tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
/* --tint (светлый цветной градиент) задаётся на каждой плитке из JS */
.tile{background:var(--tint,var(--surface)); border:1px solid var(--tint-b,var(--line));
  border-radius:var(--r-lg); color:var(--ink);
  padding:18px 20px; display:flex; gap:14px; align-items:center; min-height:118px; position:relative; overflow:hidden;
  transition:border-color .16s,box-shadow .16s,transform .16s}
.tile:hover{border-color:var(--accent); box-shadow:var(--shadow-pop); transform:translateY(-2px)}
.tile-tx{min-width:0; flex:1; position:relative; z-index:1}
.tile h3{font-size:16px; line-height:1.25; margin-bottom:5px}
.tile .c{font-size:13px; color:var(--ink2)}
.tile .subs{font-size:12.5px; color:#4a5260; margin-top:6px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
/* фото на белой подложке — одинаково на всех плитках, и на светлых, и на тёмной первой */
.tile img{width:80px; height:80px; object-fit:contain; flex:none; position:relative; z-index:1;
  background:#fff; border-radius:12px; padding:7px}

/* первая плитка тёмная: текст светлый, а фото — на белой подложке,
   иначе multiply загнал бы его в чёрное */
.tile.big{grid-column:span 2; background:linear-gradient(115deg,var(--brand),#1a64a0);
  border-color:rgba(255,255,255,.11); color:#fff}
.tile.big::after{content:""; position:absolute; right:-40px; top:-70px; width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.09),transparent 65%); pointer-events:none}
.tile.big h3{font-size:19px}
.tile.big .c{color:rgba(255,255,255,.74)}
.tile.big .subs{color:rgba(255,255,255,.58)}
.tile.big img{width:88px; height:88px}

/* карточки товара */
.grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px; display:flex; flex-direction:column;
  position:relative; transition:border-color .16s,box-shadow .16s}
.card:hover{border-color:#cfd6de; box-shadow:var(--shadow-pop)}
.card .ph{aspect-ratio:1; margin-bottom:10px; display:grid; place-items:center; overflow:hidden; border-radius:8px; background:#fff}
.card .ph img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .25s ease}
.card:hover .ph img{transform:scale(1.045)}
.tags{position:absolute; top:14px; left:14px; display:flex; flex-direction:column; gap:4px; z-index:2; align-items:flex-start}
.tag{font-size:10.5px; font-weight:700; padding:3px 7px; border-radius:5px; font-family:Rubik; letter-spacing:.02em}
.tag.mk{background:#2b2118; color:#ffbd8a}
.tag.hit{background:var(--accent-soft); color:var(--accent)}
.card .cat{font-size:11.5px; color:var(--faint); margin-bottom:4px}
.card h3{font-family:"Nunito Sans"; font-weight:600; font-size:13.5px; line-height:1.35; margin-bottom:8px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:3.4em}
.card .art{font-size:11.5px; color:var(--faint); margin-bottom:10px; font-variant-numeric:tabular-nums}
.card .foot{margin-top:auto}
.stock{display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; margin-bottom:8px}
.stock.in{color:var(--ok)}
.stock.order{color:var(--muted)}
.stock i{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.price{display:flex; align-items:baseline; gap:5px; margin-bottom:10px}
.price b{font-family:Rubik; font-weight:600; font-size:21px; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.price span{font-size:13px; color:var(--muted)}
.buy{width:100%; height:40px; border-radius:9px; background:var(--accent); color:#fff; font-weight:600; font-size:14px;
  display:flex; align-items:center; justify-content:center; gap:7px; transition:background .16s}
.buy.added{background:var(--ok)}

/* промо-полоса */
.promo{margin-top:34px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.promo>div{padding:24px 26px; display:flex; gap:15px; align-items:flex-start}
.promo>div+div{border-left:1px solid var(--line2)}
.promo .ic{width:42px; height:42px; border-radius:11px; background:var(--bg); color:var(--brand); display:grid; place-items:center; flex:none}
.promo h3{font-size:16px; margin-bottom:4px}
.promo p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.45}

/* о магазине */
.about{margin-top:34px; background:linear-gradient(118deg,var(--brand),#185b92); border-radius:var(--r-lg); color:#fff; padding:38px 42px;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:40px; align-items:center}
.about h2{font-size:27px; margin-bottom:12px}
.about p{color:#b8d4ea; font-size:15.5px; line-height:1.6; margin:0 0 10px}
.nums{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.num{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); padding:18px 20px}
.num b{display:block; font-family:Rubik; font-size:29px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.num span{font-size:13px; color:#a6c8e2; line-height:1.35; display:block; margin-top:3px}

/* подвал */
footer{background:var(--brand); color:#a8c8e2; margin-top:44px; padding:40px 0 26px; font-size:14px}
.fcols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:32px}
footer h4{color:#fff; font-size:15px; margin-bottom:13px}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
footer a:hover{color:#fff}
.f-logo{align-self:auto}
.f-logo img:first-child{height:58px; width:auto; flex:none}
footer .logo .tagline{color:#8fbde0}
.fnote{margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.11); font-size:12.5px; color:#7ea9cc;
  display:flex; gap:20px; flex-wrap:wrap; justify-content:space-between}

/* ---------- адаптив ---------- */
@media (max-width:1180px){
  .mega .mega-in{grid-template-columns:240px minmax(0,1fr)}
  .mega-in::before{width:240px}
  .mega-in::after{left:240px}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tile.big{grid-column:span 3}
  }
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-side{grid-template-columns:1fr 1fr; grid-template-rows:none}
  .adv{grid-template-columns:1fr 1fr}
  .promo{grid-template-columns:1fr}
  .promo>div+div{border-left:0; border-top:1px solid var(--line2)}
  .about{grid-template-columns:1fr; padding:28px 24px; gap:26px}
  .fcols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .wrap{padding:0 14px}
  .top,.acts .lbl-hide{display:none}
  .demo{font-size:12.5px}
  .demo .wrap{gap:9px; padding-top:8px; padding-bottom:8px}

  .head{height:auto; gap:9px; flex-wrap:wrap; padding-top:9px; padding-bottom:9px}
  header{position:static}
  /* на телефоне шапка переносится по строкам — растягивать и обрезать маскота негде */
  .logo{gap:9px; align-self:auto}
  .mascot-box{width:auto; margin-top:0; overflow:visible; align-self:center}
  .mascot-box img{position:static; translate:none; rotate:none; scale:none;
    height:44px; width:auto; transition:none}
  .logo .word{height:18.5px}
  .logo .tagline{display:none}   /* прячем только подпись, сам логотип остаётся */
  .f-logo img:first-child{height:48px}
  /* вторая строка шапки: «Каталог» слева от поиска. Порядок задаём явно,
     а перенос строки — распоркой, иначе на широком телефоне всё съедет в один ряд */
  .logo{order:1}
  .acts{order:2}
  .head-break{display:block; order:3; flex-basis:100%; height:0; margin:0}
  .burger{display:flex; align-items:center; justify-content:center; gap:8px; order:4; flex:none;
    height:46px; padding:0 15px; border-radius:var(--r); background:var(--accent); color:#fff;
    font-family:Rubik; font-weight:500; font-size:15.5px}
  .cat-btn{display:none}
  .search{order:5; flex:1 1 auto; min-width:0}
  .search input{height:46px; padding-right:56px; font-size:16px}
  .search .go{top:4px; right:4px; height:38px; padding:0; width:42px; justify-content:center}
  .search .go .tx{display:none}
  .search .go svg{display:block}
  .acts{margin-left:auto; gap:2px}
  .act{min-width:44px; min-height:44px; padding:6px; align-content:center}
  .act .lbl{display:none}
  .act .badge{top:1px; right:1px}
  .act-phone{display:grid}       /* телефон в шапке — верхняя строка с ним скрыта */
  
  .grid{grid-template-columns:1fr 1fr; gap:10px}
  .card{padding:10px; border-radius:12px}
  .card h3{-webkit-line-clamp:2; min-height:2.3em; font-size:13px}
  .card .art{margin-bottom:8px}
  .price b{font-size:19px}
  .buy{height:44px}
  .tags{top:12px; left:12px}

  .tiles{grid-template-columns:1fr 1fr; gap:10px}
  .tile{padding:13px; min-height:98px; flex-direction:column; align-items:flex-start; gap:9px; border-radius:12px}
  .tile img{width:54px; height:54px; padding:5px; border-radius:9px}
  .tile .subs{display:none}
  .tile h3{font-size:14.5px}
  .tile.big{grid-column:span 2; flex-direction:row; align-items:center}
  .tile.big img{width:66px; height:66px}
  .tile.big h3{font-size:17px}

  .hero{gap:10px; margin-top:16px}
  .hero-main{padding:24px 20px; min-height:auto; border-radius:14px}
  /* на телефоне текст идёт во всю ширину — затемняем равномерно, вывеска остаётся угадываться сверху */
  .hero-main::after{background:linear-gradient(180deg,rgba(11,46,77,.7) 0%,rgba(11,46,77,.9) 55%,rgba(11,46,77,.95) 100%)}
  .hero-main>.hero-bg{object-position:58% 20%}
  .hero-main h1{font-size:27px}
  .hero-main p{font-size:15px; margin-bottom:20px}
  .tagl{font-size:12px; margin-bottom:14px}
  .hero-side{grid-template-columns:1fr; gap:10px}
  .hcard{padding:18px 20px; border-radius:14px}
  .btn{height:48px; flex:1; justify-content:center}
  .adv{gap:10px; margin-top:14px}
  .adv div{padding:14px}

  .sec-head{gap:10px; margin-bottom:12px}
  .sec-head h2{font-size:21px}
  .sec-head a span{display:none}
  .promo{margin-top:26px}
  .promo>div{padding:18px 20px}
  .about{padding:24px 20px}
  .about h2{font-size:22px}
  .num{padding:15px 16px}
  .num b{font-size:25px}
  .fcols{grid-template-columns:1fr; gap:22px}
  footer{padding-bottom:calc(26px + env(safe-area-inset-bottom))}
  section{margin-top:26px}
}
/* на узких экранах два блока преимуществ в ряд уже не читаются */
@media (max-width:560px){
  .adv{grid-template-columns:1fr}
  .nums{grid-template-columns:1fr 1fr; gap:10px}
  .hero-main h1{font-size:25px}
}

/* мобильное меню-шторка */
.drawer{position:fixed; inset:0 auto 0 0; width:min(92vw,420px); background:var(--surface); z-index:80;
  transform:translateX(-102%); transition:transform .26s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column}
.drawer.open{transform:none}
.drawer-h{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); flex:none}
.drawer-h b{font-family:Rubik; font-size:17px; flex:1}
.drawer-b{overflow-y:auto; padding:8px 8px calc(30px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.acc>button{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:13px 12px; border-radius:9px;
  font-size:15.5px; min-height:48px}
.acc>button .n{flex:1}
.acc>button .c{font-size:12.5px; color:var(--faint)}
.acc>button svg:last-child{transition:transform .2s ease; color:var(--muted)}
.acc[data-open="1"]>button{color:var(--blue-ink)}
.acc[data-open="1"]>button svg{color:var(--blue-ink)}
.acc[data-open="1"]>button svg:last-child{transform:rotate(180deg)}
.acc-b{display:none; padding:2px 12px 12px 46px}
.acc[data-open="1"] .acc-b{display:block}
.acc-b a{display:block; padding:7px 0; font-size:14px; color:var(--ink2); line-height:1.35}
.acc-b a i{font-style:normal; color:var(--faint); font-size:12px; margin-left:5px}
@media (min-width:761px){.drawer{display:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important; transition-duration:.01ms!important}}

/* ================= страницы каталога ================= */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:13.5px; color:var(--muted); margin:18px 0 10px}
.crumbs a{color:var(--ink2)}
.crumbs a:hover{color:var(--blue-ink)}
.crumbs svg{color:var(--faint)}
.crumbs span{color:var(--muted)}
.page-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin:0 0 18px}
.page-head h1{font-size:30px}
.page-head span{color:var(--muted); font-size:14.5px}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px}
.chip{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:99px; background:var(--surface);
  border:1px solid var(--line); font-size:14px; font-weight:600; color:var(--ink2); transition:border-color .15s, background .15s, color .15s}
.chip i{font-style:normal; font-weight:600; font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--blue); color:var(--blue-ink); background:var(--blue-soft)}
.chip.on{background:var(--blue-ink); border-color:var(--blue-ink); color:#fff}
.chip.on i{color:rgba(255,255,255,.75)}

.pager{display:flex; align-items:center; justify-content:center; gap:10px; margin:28px 0 6px; flex-wrap:wrap}
.pager .nums{display:flex; gap:4px}
.pager a,.pager span{min-width:40px; height:40px; padding:0 10px; border-radius:9px; display:inline-flex; align-items:center;
  justify-content:center; gap:4px; font-weight:600; font-size:14.5px; font-variant-numeric:tabular-nums}
.pager a{background:var(--surface); border:1px solid var(--line); color:var(--ink2)}
.pager a:hover{border-color:var(--blue); color:var(--blue-ink)}
.pager .cur{background:var(--blue-ink); color:#fff}
.pager .gap{color:var(--faint); min-width:20px}
.pager .off{color:var(--faint); background:none; border:0}

/* товар без фото — иконка раздела вместо пустого места */
.ph-none{width:100%; height:100%; display:grid; place-items:center; background:#f3f5f7; color:#b9c2cc; border-radius:8px}
.stock.out{color:var(--muted)}
.stock.low{color:#b45309}
.buy[disabled]{background:#e7eaee; color:var(--muted); cursor:default}
a.buy{text-decoration:none}

/* витрина подкатегорий на странице раздела */
.sub-tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.sub-tile{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:12px 16px 12px 12px; transition:border-color .15s, box-shadow .15s, transform .15s}
.sub-tile:hover{border-color:var(--blue); box-shadow:var(--shadow-pop); transform:translateY(-1px)}
.st-ph{width:64px; height:64px; flex:none; border-radius:10px; overflow:hidden; background:#fff}
.st-ph img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.st-tx{min-width:0}
.st-tx b{display:block; font-family:Rubik; font-weight:600; font-size:15px; line-height:1.25}
.st-tx i{display:block; font-style:normal; font-size:12.5px; color:var(--muted); margin-top:4px}

/* страница «весь каталог» */
.cat-blocks{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:start}
.cat-block{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 18px 12px}
.cat-block-h{display:flex; align-items:center; gap:10px; margin-bottom:10px; color:var(--ink)}
.cat-block-h svg{color:var(--blue-ink)}
.cat-block-h b{font-family:Rubik; font-weight:600; font-size:17px}
.cat-block-h i{font-style:normal; margin-left:auto; color:var(--faint); font-size:13px; font-variant-numeric:tabular-nums}
.cat-block-h:hover b{color:var(--blue-ink)}
.cat-block ul{list-style:none; margin:0; padding:0; columns:1}
.cat-block li a{display:flex; gap:8px; padding:5px 8px; margin:0 -8px; border-radius:7px; font-size:14px; color:var(--ink2)}
.cat-block li a i{font-style:normal; margin-left:auto; color:var(--faint); font-size:12.5px; font-variant-numeric:tabular-nums}
.cat-block li a:hover{background:var(--blue-soft); color:var(--blue-ink)}

/* карточка товара */
/* фото и описание — пополам. Площадка на всю половину, а сам кадр генератор ограничивает
   его настоящим размером × 1,5: крупный заполняет площадку, мелкий не растягивается */
.prod{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:24px}
.prod-ph{width:100%; aspect-ratio:1; display:grid; place-items:center;
  background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(--line2)}
.prod-ph img{width:100%; height:100%; object-fit:contain}
.prod-ph .ph-none{flex-direction:column; gap:12px}
.prod-ph .ph-none em{font-style:normal; font-size:14px; color:var(--muted)}
.prod-info h1{font-size:26px; line-height:1.25; margin-bottom:18px}
.prod-buy{background:var(--bg); border-radius:12px; padding:18px 20px; margin-bottom:18px}
.prod-buy .price{margin-bottom:8px}
.prod-buy .price b{font-size:32px}
.prod-buy .stock{font-size:14px; margin-bottom:14px}
.buy-lg{height:52px; font-size:16px; border-radius:11px}
.note-mk{display:flex; gap:12px; align-items:flex-start; background:#fbf4ea; border:1px solid #f0dcc0; color:#6b4a1d;
  border-radius:10px; padding:12px 14px; font-size:13.5px; line-height:1.45; margin-bottom:18px}
.note-mk svg{color:#b45309; margin-top:1px}
.facts{margin:0; display:grid; gap:0; border-top:1px solid var(--line2)}
.facts div{display:grid; grid-template-columns:140px minmax(0,1fr); gap:12px; padding:9px 0; border-bottom:1px solid var(--line2); font-size:14.5px}
.facts dt{color:var(--muted)}
.facts dd{margin:0; font-weight:600; overflow-wrap:anywhere}
.prod-desc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px}
.prod-desc h2{font-size:21px; margin-bottom:10px}
.prod-desc p{margin:0 0 10px; color:var(--ink2); line-height:1.65}

/* подсказки поиска */
.sugg{position:absolute; left:0; right:0; top:calc(100% + 6px); background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow-pop); z-index:90; overflow:hidden}
.sg{display:flex; align-items:center; gap:12px; padding:8px 14px; border-bottom:1px solid var(--line2)}
.sg img,.sg-none{width:48px; height:48px; flex:none; object-fit:contain; border-radius:7px; background:#fff}
.sg-none{display:grid; place-items:center; background:#f3f5f7; color:#b9c2cc}
.sg-n{flex:1; min-width:0; font-size:14px; line-height:1.3; color:var(--ink)}
.sg-n i{display:block; font-style:normal; font-size:12px; color:var(--faint); margin-top:2px}
.sg-p{text-align:right; font-family:Rubik; font-weight:600; font-size:15px; white-space:nowrap}
.sg-p i{display:block; font-family:"Nunito Sans"; font-style:normal; font-weight:600; font-size:11.5px; color:var(--muted)}
.sg:hover,.sg.on{background:var(--blue-soft)}
.sg-all{display:flex; align-items:center; justify-content:center; gap:5px; padding:11px; font-weight:700; font-size:14px; color:var(--blue-ink)}
.sg-all:hover{background:var(--blue-soft)}
.sg-empty{padding:16px; font-size:14px; color:var(--muted)}

.empty{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; color:var(--ink2); font-size:15.5px}
.more-wrap{display:flex; justify-content:center; margin-top:22px}
.btn-more{background:var(--surface); border:1.5px solid var(--line); color:var(--ink); padding:0 28px}
.btn-more:hover{border-color:var(--blue); color:var(--blue-ink)}
.nf{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:48px 40px; margin-top:24px; max-width:680px}
.nf h1{font-size:30px; margin-bottom:12px}
.nf p{color:var(--ink2); margin:0 0 22px; line-height:1.6}
.acc-b a.all{font-weight:700; color:var(--blue-ink)}

@media (max-width:1180px){
  .sub-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cat-blocks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .prod{grid-template-columns:1fr; gap:20px; padding:18px}
  .sub-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .page-head h1{font-size:23px}
  .crumbs{font-size:12.5px; margin-top:14px}
  .chips{flex-wrap:nowrap; overflow-x:auto; margin:0 -14px 16px; padding:0 14px 4px; scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .cat-blocks{grid-template-columns:1fr}
  .sub-tiles{grid-template-columns:1fr; gap:8px}
  .prod{border-radius:14px; padding:14px}
  .prod-info h1{font-size:21px}
  .prod-buy .price b{font-size:27px}
  .facts div{grid-template-columns:110px minmax(0,1fr)}
  .pager .nav{display:none}
  .sugg{left:-2px; right:-2px}
  .sg-n{font-size:13.5px}
}
/* иконки из спрайта: общие атрибуты здесь, а не в каждой <svg> */
svg.i{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* ================= добавление в корзину ================= */
/* кнопка: пружинит при нажатии, краснота сменяется зелёным, галочка прорисовывается */
/* isolation — чтобы заливка (::after с z-index:-1) легла поверх фона кнопки, но под надписью:
   так текст и иконка остаются белыми и ничем не перекрыты */
.buy{position:relative; overflow:hidden; isolation:isolate;
  transition:background .28s ease, transform .15s ease, box-shadow .24s ease}

/* Наведение (только мышью — на телефоне «залипло» бы после касания): из середины кнопки
   расходится заливка фирменным синим, кнопка чуть приподнимается, тележка катится вперёд.
   Уводишь мышь — заливка так же сбегается обратно к середине. */
.buy::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg,var(--brand) 0%,var(--brand2) 48%,var(--blue) 100%);
  transform:scale(.08,.5); opacity:0;
  transition:transform .38s cubic-bezier(.5,.02,.2,1), opacity .2s ease}
.buy > svg{transform-origin:50% 82%}
@media (hover:hover){
  .buy:not([disabled]):hover{transform:translateY(-1px); box-shadow:0 9px 20px -9px rgba(15,59,97,.85)}
  .buy:not([disabled]):hover::after{transform:scale(1,1); opacity:1}
  /* добавленный товар заливается тёмно-зелёным — цвет «уже в корзине» не теряем */
  .buy.added:not([disabled])::after{background:linear-gradient(115deg,#0c5a2c 0%,#14743c 55%,#1c8f4b 100%)}
  .buy.added:not([disabled]):hover{box-shadow:0 9px 20px -9px rgba(12,90,44,.8)}
  /* галочку в добавленной кнопке не катаем: чужая анимация стёрла бы её прорисовку */
  .buy:not([disabled]):not(.added):hover > svg{animation:cartRoll .62s cubic-bezier(.32,1.35,.5,1)}
}
/* тележка прокатывается вперёд и откатывается, будто её толкнули */
@keyframes cartRoll{
  0%{transform:none}
  32%{transform:translateX(5px) rotate(-13deg)}
  58%{transform:translateX(-2px) rotate(7deg)}
  80%{transform:translateX(1px) rotate(-2deg)}
  100%{transform:none}}
.buy:not([disabled]):active{transform:scale(.96); box-shadow:none}
.buy.pop{animation:buyPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes buyPop{0%{transform:scale(.92)} 55%{transform:scale(1.05)} 100%{transform:scale(1)}}
.buy.added{background:var(--ok)}
.buy .chk{stroke-dasharray:24; stroke-dashoffset:24; animation:chkDraw .36s .1s ease-out forwards}
@keyframes chkDraw{to{stroke-dashoffset:0}}
.buy .tx{display:inline-block; animation:txIn .3s ease-out}
@keyframes txIn{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
/* товар уже был в корзине при открытии страницы — без анимации */
.buy.static .chk{animation:none; stroke-dashoffset:0}
.buy.static .tx{animation:none}

/* корзина в шапке подпрыгивает, счётчик выскакивает */
#cartBtn.bump svg{animation:cartBump .62s cubic-bezier(.3,1.5,.5,1)}
@keyframes cartBump{
  0%{transform:none}
  25%{transform:translateY(-9px) scale(1.14) rotate(-9deg)}
  50%{transform:translateY(0) scale(.92)}
  72%{transform:translateY(-3px) rotate(4deg)}
  100%{transform:none}}
.act .badge.pop{animation:badgePop .5s cubic-bezier(.34,1.8,.5,1)}
@keyframes badgePop{0%{transform:scale(.3)} 60%{transform:scale(1.35)} 100%{transform:scale(1)}}

/* миниатюра, улетающая в корзину: снаружи — сдвиг по X, внутри — по Y, поэтому путь дугой */
.fly{position:fixed; left:0; top:0; z-index:300; pointer-events:none; will-change:transform}
.fly-y{will-change:transform, opacity}
.fly img,.fly .dot{display:block; width:100%; height:100%; object-fit:contain; background:#fff; border-radius:12px;
  box-shadow:0 10px 26px rgba(20,22,26,.28)}
.fly .dot{background:var(--accent); border-radius:50%}

/* если корзина в шапке сейчас не видна (телефон, страница прокручена) — всплывающая плашка */
.toast{position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:300;
  transform:translate(-50%,160%); background:var(--brand); color:#fff; border-radius:99px;
  padding:8px 18px 8px 8px; display:flex; align-items:center; gap:11px; font-weight:600; font-size:14.5px;
  box-shadow:var(--shadow-pop); white-space:nowrap; transition:transform .34s cubic-bezier(.2,.9,.3,1.2)}
.toast.on{transform:translate(-50%,0)}
.toast .t-ic{width:36px; height:36px; border-radius:50%; background:var(--accent); display:grid; place-items:center; flex:none}
.toast.on .t-ic svg{animation:cartBump .62s .18s cubic-bezier(.3,1.5,.5,1)}

/* ================= корзина и оформление (/cart/) ================= */
/* Раскладка как в корзине «Ёлок-Палок»: ровно пополам — слева товары, справа оформление */
.cart-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; align-items:start; margin-bottom:10px}
/* список липкий: прокручивается вместе со страницей до своего конца и останавливается под шапкой —
   не приходится мотать вверх, чтобы поправить количество, пока заполняешь форму */
.cart-side{position:sticky; top:104px; max-height:calc(100vh - 124px); overflow-y:auto; scrollbar-width:thin;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:4px 20px}
.cart-list{list-style:none; padding:0; margin:0}
/* снимок первым столбцом: место занято всегда, даже без фото, — иначе строки прыгали бы по левому краю */
.cart-list li{display:grid; grid-template-columns:64px minmax(0,1fr) auto auto auto; gap:14px; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--line2); transition:opacity .2s ease, transform .2s ease}
.cart-list li:last-child{border-bottom:0}
.cart-list li.is-gone{opacity:0; transform:translateX(24px)}
.cart-pic{width:64px; height:64px; flex:none; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.cart-pic.is-empty{background:#f3f5f7; border-style:dashed}
.cart-pic img{width:100%; height:100%; object-fit:contain}
.cart-name{display:flex; flex-direction:column; gap:4px; min-width:0}
.cart-name a,.cart-name b{font-weight:600; font-size:15px; line-height:1.35; color:var(--ink)}
.cart-name a:hover{color:var(--blue-ink)}
.cart-name span{font-size:13px; line-height:1.3; color:var(--muted)}
.cart-warn{font-style:normal; font-size:12.5px; line-height:1.35; color:#b45309}
.cart-sum{font-family:Rubik; font-weight:600; font-size:16px; color:var(--ink); min-width:86px; text-align:right;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.cart-sum.tick{animation:sumTick .32s ease-out}
@keyframes sumTick{0%{color:var(--blue-ink); transform:translateY(-3px)} 100%{color:var(--ink); transform:none}}
.cart-del{width:32px; height:32px; border-radius:8px; display:grid; place-items:center; color:var(--faint);
  transition:color .15s, background .15s}
.cart-del:hover{color:var(--accent); background:var(--accent-soft)}
.cart-list li.is-off .cart-pic{opacity:.5}
.cart-list li.is-off .cart-name a,.cart-list li.is-off .cart-name b{color:var(--muted)}
.cart-list li.is-off .cart-sum{color:var(--faint)}

.qty{display:inline-flex; align-items:center; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; flex:none}
.qty button{width:36px; height:42px; font-size:19px; line-height:1; color:var(--ink2); transition:background .15s, color .15s}
.qty button:hover{background:var(--blue-soft); color:var(--blue-ink)}
.qty input{width:50px; height:42px; border:0; text-align:center; background:none; font:700 15px/1 "Nunito Sans",sans-serif;
  color:var(--ink); -moz-appearance:textfield; appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.qty input:focus{outline:none; background:var(--blue-soft)}

.cart-form{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px}
.cart-form h2{font-size:21px; margin:0 0 16px}
.pickup-note{display:flex; align-items:center; gap:12px; margin-bottom:14px; padding:12px 14px;
  border-radius:12px; background:var(--blue-soft); color:var(--blue-ink)}
.pickup-note b{display:block; font-size:14.5px; color:var(--ink)}
.pickup-note span{display:block; margin-top:2px; font-size:13px; color:var(--ink2)}
.ways{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px}
.ways label{position:relative; display:flex; flex-direction:column; gap:3px; padding:12px 14px; background:#fff; cursor:pointer;
  border:1.5px solid var(--line); border-radius:12px; font-size:12.5px; line-height:1.3; color:var(--muted);
  transition:border-color .15s, background .15s}
.ways label:hover{border-color:#b9cfe2}
.ways label b{font-weight:700; font-size:14.5px; line-height:1.2; color:var(--ink)}
.ways label.is-on{border-color:var(--blue); background:var(--blue-soft)}
.ways input{position:absolute; opacity:0; width:0; height:0}
.ways label:has(input:focus-visible){outline:3px solid var(--accent); outline-offset:2px}
.ways-2{margin-top:-6px}

/* три поля в строку: телефон, имя, почта. Телефон чуть шире — в нём маска фиксированной длины */
.fld-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.fld-row-3{grid-template-columns:1.05fr .95fr 1.2fr}
.fld-row .fld{margin-bottom:13px}
.fld{display:block; margin-bottom:13px}
.fld span{display:block; margin-bottom:5px; font-size:13px; line-height:1; color:var(--muted)}
.fld input,.fld textarea{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:#fff;
  font:400 15px/1.4 "Nunito Sans",sans-serif; color:var(--ink); resize:vertical; transition:border-color .15s, box-shadow .15s}
.fld input:focus,.fld textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(42,143,216,.18)}
/* телефон — единственное обязательное поле, по нему и звонят: выделен рамкой */
.fld-key input{border-color:#9fc6e6; box-shadow:inset 0 0 0 1px #d6e8f6}
.fld-key span{color:var(--blue-ink); font-weight:600}
.fld-err{display:block; margin-top:5px; font-size:12.5px; line-height:1.35; color:#b42318; font-style:normal}

/* поиск организации: единственное поле, которое заполняет реквизиты само, — глаз находит его сразу */
.firma{position:relative; margin-bottom:13px; padding:12px 12px 2px; border:1.5px solid #c9ddee; border-radius:12px; background:#f3f8fc}
.firma .fld input{border-color:#9fc6e6}
.firma .fld span{color:var(--blue-ink); font-weight:600}
.firma-drop{position:absolute; top:calc(100% - 6px); left:0; right:0; z-index:6; list-style:none; margin:0; padding:5px;
  max-height:290px; overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-pop)}
.firma-drop button{display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; padding:9px 11px; border-radius:9px}
.firma-drop button:hover{background:var(--blue-soft)}
.firma-drop b{font-weight:700; font-size:14px; line-height:1.3; color:var(--ink)}
.firma-drop span{font-size:12px; line-height:1.35; color:var(--muted)}
.firma-card{display:flex; flex-direction:column; gap:3px; padding:12px 14px; margin-bottom:10px;
  border:1.5px solid var(--blue); border-radius:12px; background:#fff}
.firma-card b{font-weight:700; font-size:14.5px; line-height:1.3; color:var(--ink)}
.firma-card span{font-size:12.5px; line-height:1.4; color:var(--muted)}
.firma-card > button{align-self:flex-start; margin-top:4px; font-size:13px; color:var(--blue-ink); text-decoration:underline}
.firma-note{margin:0 0 10px; font-size:12.5px; line-height:1.4; color:var(--muted)}

.hp{position:absolute!important; left:-9999px; width:1px; height:1px; opacity:0}
.consent{display:flex; gap:9px; align-items:flex-start; margin:14px 0 4px; font-size:13px; line-height:1.45; color:var(--muted); cursor:pointer}
.consent input{margin-top:2px; flex:none; width:16px; height:16px; accent-color:var(--blue-ink)}
.cart-total{display:flex; justify-content:space-between; align-items:baseline; margin:16px 0 14px; padding-top:14px;
  border-top:1px solid var(--line2); font-size:14.5px; color:var(--muted)}
.cart-total b{font-family:Rubik; font-weight:600; font-size:26px; color:var(--ink); font-variant-numeric:tabular-nums}
.btn-wide{width:100%; justify-content:center}
.btn:disabled{opacity:.7; cursor:progress}
.cart-note{margin:12px 0 0; font-size:13px; line-height:1.5; color:var(--muted)}
.form-err{margin:0 0 10px; padding:10px 12px; border-radius:10px; background:#fdecea; color:#912018; font-size:14px; line-height:1.45}

.cart-empty{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:40px 32px;
  max-width:560px; display:flex; flex-direction:column; align-items:flex-start}
.cart-empty-ic{width:72px; height:72px; border-radius:20px; background:var(--blue-soft); color:var(--blue-ink); display:grid;
  place-items:center; margin-bottom:16px}
.cart-empty h2{font-size:24px; margin-bottom:8px}
.cart-empty p{margin:0 0 20px; color:var(--ink2)}
.btn-line{background:var(--surface); border:1.5px solid var(--line); color:var(--ink)}
.btn-line:hover{border-color:var(--blue); color:var(--blue-ink)}

/* ---------- «Спасибо» после оформления (/order/) ---------- */
.zakaz{max-width:780px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px 34px 34px; margin-bottom:10px}
.zakaz > .empty{border:0; padding:0}
.zakaz-mark{display:inline-flex; align-items:center; gap:7px; margin:0 0 12px; padding:6px 13px 6px 10px; border-radius:99px;
  background:var(--ok-soft); color:var(--ok); font-weight:700; font-size:13px}
.zakaz h1{font-size:clamp(26px,3vw,34px); line-height:1.15; margin:0 0 12px}
.zakaz-lead{font-size:16px; line-height:1.6; color:var(--ink2); margin:0 0 24px}
.zakaz-st{margin:-10px 0 22px; padding:10px 14px; border-radius:10px; background:var(--blue-soft); color:var(--ink2); font-size:14.5px}
.zakaz-st b{color:var(--blue-ink)}
.zakaz-pickup{display:flex; gap:18px; align-items:stretch; margin:0 0 24px; padding:16px;
  border:1.5px solid #c9ddee; border-radius:14px; background:#f3f8fc}
.zakaz-pickup-info{flex:1; display:flex; flex-direction:column; gap:8px; min-width:0}
.zakaz-pickup-tag{align-self:flex-start; padding:5px 11px; border-radius:99px; background:var(--blue-soft); color:var(--blue-ink);
  font-weight:700; font-size:12px}
.zakaz-pickup-info b{font-family:Rubik; font-weight:600; font-size:17px; line-height:1.3}
.zakaz-pickup-info span{font-size:14px; line-height:1.5; color:var(--muted)}
.zakaz-pickup-info .btn{align-self:flex-start; margin-top:4px; height:44px; padding:0 16px; font-size:14.5px}
.zakaz-pickup-map{width:300px; min-height:210px; border:0; border-radius:12px; background:#e9eef3}
.zakaz-schet{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; padding:18px 20px;
  margin-bottom:24px; border:1.5px solid #c9ddee; border-radius:14px; background:#f3f8fc}
.zakaz-schet div{display:flex; flex-direction:column; gap:4px; min-width:240px; flex:1}
.zakaz-schet b{font-family:Rubik; font-weight:600; font-size:16px}
.zakaz-schet span{font-size:14px; line-height:1.45; color:var(--muted)}
.zakaz-list{list-style:none; padding:0; margin:0; border-top:1px solid var(--line2)}
.zakaz-list li{display:grid; grid-template-columns:48px minmax(0,1fr) auto auto; gap:16px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--line2)}
.zakaz-pic{width:48px; height:48px; border-radius:9px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line)}
.zakaz-pic.is-empty{background:#f3f5f7}
.zakaz-pic img{width:100%; height:100%; object-fit:contain}
.zakaz-list a{font-size:14.5px; line-height:1.35; color:var(--ink)}
.zakaz-list a:hover{color:var(--blue-ink)}
.zakaz-list span{font-size:13px; color:var(--muted); white-space:nowrap}
.zakaz-list b{font-family:Rubik; font-weight:600; font-size:15px; min-width:92px; text-align:right; font-variant-numeric:tabular-nums}
.zakaz-total{display:flex; justify-content:space-between; align-items:baseline; margin:16px 0 26px; font-size:14.5px; color:var(--muted)}
.zakaz-total b{font-family:Rubik; font-weight:600; font-size:28px; color:var(--ink); font-variant-numeric:tabular-nums}
.zakaz-links{display:flex; flex-wrap:wrap; gap:10px; margin:0}

@media (max-width:1100px){.fld-row-3{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .cart-grid{grid-template-columns:1fr; gap:20px}
  .cart-side{position:static; max-height:none; overflow:visible}
  /* на узком экране: сверху название и «×», снизу фото, количество и сумма в одну строку.
     Количество не растягиваем — иначе «−/+» разъезжались бы на всю ширину ячейки */
  .cart-list li{grid-template-columns:auto auto minmax(0,1fr); grid-template-areas:"name name del" "pic qty sum";
    column-gap:12px; row-gap:10px}
  .cart-name{grid-area:name; align-self:center}
  .cart-del{grid-area:del; justify-self:end; align-self:start}
  .cart-pic{grid-area:pic}
  .qty{grid-area:qty; justify-self:start}
  .cart-sum{grid-area:sum; justify-self:end; text-align:right; min-width:0}
  .cart-list li.is-off{grid-template-areas:"name name del" "pic . sum"}
}
@media (max-width:640px){
  .zakaz{padding:22px 18px}
  .zakaz-pickup{flex-direction:column}
  .zakaz-pickup-map{width:100%; height:220px}
}
@media (max-width:520px){
  .cart-side{padding:2px 14px}
  .cart-form{padding:18px 16px}
  .cart-pic{width:52px; height:52px}
  .fld-row,.fld-row-3{grid-template-columns:1fr; gap:0}
  .ways label{padding:11px 12px}
  .zakaz-list li{grid-template-columns:40px minmax(0,1fr) auto}
  .zakaz-pic{width:40px; height:40px}
  .zakaz-list span{grid-column:2/-1; order:3}
  .zakaz-links .btn{flex:1; justify-content:center}
}