/* Витрина «Легионер». Без сборки: правится прямо здесь.
   Цвета — только через переменные в :root (тёмная тема) и [data-theme=light] (светлая). */
@font-face{font-family:Oswald;font-weight:400;font-display:swap;src:url(/fonts/oswald/oswald-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Oswald;font-weight:400;font-display:swap;src:url(/fonts/oswald/oswald-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+20BD,U+2122}
@font-face{font-family:Oswald;font-weight:500;font-display:swap;src:url(/fonts/oswald/oswald-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Oswald;font-weight:500;font-display:swap;src:url(/fonts/oswald/oswald-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+20BD,U+2122}
@font-face{font-family:Oswald;font-weight:600;font-display:swap;src:url(/fonts/oswald/oswald-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Oswald;font-weight:600;font-display:swap;src:url(/fonts/oswald/oswald-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+20BD,U+2122}

:root{
  --bg:#1c1c1c; --bg2:#232323; --bg3:#151515; --card:#2a2a2a; --card2:#323232; --card-line:transparent;
  --line:#3a3a3a; --line2:#4a4a4a; --text:#ececec; --text2:#cfcfcf; --muted:#9b9b9b; --off:#555;
  --accent:#f7a21b; --accent-dark:#d98a0a; --accent-ink:#f7a21b; --on-accent:#1a1a1a; --ok:#6cbf4a; --bad:#e0574a;
  --overlay:rgba(28,28,28,.88); --pop-shadow:0 20px 40px rgba(0,0,0,.6); --card-shadow:0 8px 24px rgba(0,0,0,.45);
  --hero:radial-gradient(ellipse at 78% 50%,#3d2e12 0,rgba(28,28,28,0) 55%),linear-gradient(180deg,#202020,#1c1c1c);
  --hero-fade:linear-gradient(90deg,rgba(20,20,20,.92) 0,rgba(20,20,20,.75) 38%,rgba(20,20,20,0) 70%);
  --head:Oswald,'Arial Narrow',sans-serif; --r:6px; --tabbar:0px; --photo:#9c9c9c;
  color-scheme:dark;
}
[data-theme=light]{
  --bg:#f3f3f1; --bg2:#fff; --bg3:#e9e9e5; --card:#fff; --card2:#f4f4f1; --card-line:#e3e3de;
  --line:#e1e1dc; --line2:#cbcbc4; --text:#1d1d1d; --text2:#3b3b3b; --muted:#6b6b6b; --off:#bdbdbd;
  --accent:#f7a21b; --accent-dark:#e08e0b; --accent-ink:#b06a00; --on-accent:#1a1a1a; --ok:#2f8a1f; --bad:#c9372a;
  --overlay:rgba(255,255,255,.92); --pop-shadow:0 18px 40px rgba(0,0,0,.16); --card-shadow:0 8px 22px rgba(0,0,0,.12);
  --hero:radial-gradient(ellipse at 78% 50%,#ffe2ad 0,rgba(255,255,255,0) 55%),linear-gradient(180deg,#fff,#f6f4ef);
  --hero-fade:linear-gradient(90deg,rgba(255,255,255,.94) 0,rgba(255,255,255,.8) 38%,rgba(255,255,255,0) 70%);
  --photo:#fff;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;padding-bottom:var(--tabbar)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--head);text-transform:uppercase;font-weight:500;letter-spacing:.01em;line-height:1.15}
.wrap{max-width:1360px;margin:0 auto;padding:0 16px}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.muted{color:var(--muted)}
.small{font-size:13px}
.link{background:none;border:0;color:var(--accent-ink);display:inline-flex;align-items:center;gap:6px;padding:0;font-size:14px}
.btn,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 16px var(--head);text-transform:uppercase;padding:11px 24px;border-radius:4px;border:1px solid var(--accent);transition:background .15s,color .15s}
.btn{background:var(--accent);color:var(--on-accent)}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn:disabled{background:var(--off);border-color:var(--off);color:var(--muted);cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn-big{font-size:19px;padding:14px 40px}
.buy-ico{display:none}

/* Подложка под всеми фото товаров: в тёмной теме серая (чуть темнее среднего), в светлой — белая. Одно правило для всех картинок */


/* ===== Шапка ===== */
.strip{background:var(--bg3);color:var(--muted);font-size:13px;border-bottom:1px solid var(--line)}
.strip .wrap{display:flex;align-items:center;gap:18px;padding-top:5px;padding-bottom:5px}
.strip .i{width:15px;height:15px}
.strip-gap{flex:1}
.strip-addr{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:3px 4px;color:var(--text2);font-size:13px;border-radius:4px}
.strip-addr>.i{color:var(--accent)}
.strip-addr em{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:12px;color:var(--accent-ink);border-bottom:1px dashed var(--accent);margin-left:4px}
.strip-addr:hover{color:var(--text)}
.strip-addr:hover em{border-bottom-style:solid}
.strip-hours{display:inline-flex;align-items:center;gap:8px;color:var(--text2)}
.strip-hours .dot{width:9px;height:9px;border-radius:50%;background:var(--off);flex:none}
.strip-hours b{font-weight:600;color:var(--text)}
.strip-hours.open .dot{background:var(--ok);box-shadow:0 0 0 0 rgba(108,191,74,.6);animation:pulse 2s infinite}
.strip-hours.open b{color:var(--ok)}
.strip-hours.closed .dot{background:var(--bad)}
.strip-hours.closed b{color:var(--bad)}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(108,191,74,0)}100%{box-shadow:0 0 0 0 rgba(108,191,74,0)}}
/* Живые кнопки: ВКонтакте, Бонусы, Бренды */
.soc{display:inline-flex;align-items:center;gap:7px;border-radius:30px;padding:5px 14px;font:500 13px var(--head);text-transform:uppercase;letter-spacing:.03em;color:#fff;transition:transform .15s,box-shadow .15s,filter .15s}
.soc:hover{transform:translateY(-2px);filter:brightness(1.1)}
.soc:active{transform:none}
.soc-vk{background:linear-gradient(135deg,#2787f5,#0a5fd0);box-shadow:0 3px 10px rgba(39,135,245,.35)}
.soc-vk:hover{box-shadow:0 6px 16px rgba(39,135,245,.5)}
.soc-bonus{background:linear-gradient(135deg,#ffc13d,#f7a21b);color:#1a1a1a;box-shadow:0 3px 10px rgba(247,162,27,.35)}
.soc-bonus:hover{box-shadow:0 6px 16px rgba(247,162,27,.55)}
.head{background:var(--bg2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.head-row{display:flex;align-items:center;gap:28px;height:88px}
.logo{flex:none}
.logo img{height:66px;width:auto}
.logo-mini,.search-x{display:none}
.search{flex:1;min-width:0;max-width:620px;margin:0 auto;display:flex;position:relative}
.search input{flex:1;min-width:0;background:var(--bg3);border:1px solid var(--line2);border-right:0;padding:10px 14px;border-radius:4px 0 0 4px;outline:none}
.search input:focus{border-color:var(--accent)}
.search>button{background:var(--accent);border:0;border-radius:0 4px 4px 0;padding:0 18px;color:var(--on-accent)}
.suggest{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--pop-shadow);z-index:60;overflow:hidden}
.suggest a{display:flex;gap:12px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line)}
.suggest a:hover,.suggest a.on{background:var(--card2)}
.suggest img{width:48px;height:48px;object-fit:contain;background:var(--photo);border-radius:4px;flex:none}
.suggest .s-name{font:500 14px/1.25 var(--head);text-transform:uppercase}
.suggest .s-meta{font-size:12px;color:var(--muted)}
.suggest .s-price{margin-left:auto;color:var(--accent-ink);font:500 16px var(--head);white-space:nowrap}
.suggest .s-out{opacity:.55}
.suggest .s-all{justify-content:center;color:var(--accent-ink);font:400 14px var(--head);text-transform:uppercase}
.suggest .s-none{padding:14px;color:var(--muted)}
.head-icons{display:flex;gap:20px;align-items:center}
.head-icons>a,.theme-btn{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;text-transform:uppercase;color:var(--muted);background:none;border:0;padding:0}
.head-icons .i{width:24px;height:24px;color:var(--accent)}
.head-icons>a:hover,.theme-btn:hover{color:var(--text)}
.head-icons>a .i,.theme-btn .i{transition:transform .2s}
.head-icons>a:hover .i,.theme-btn:hover .i{transform:translateY(-2px) scale(1.12)}
.head-icons .theme-btn .i{width:28px;height:28px}
/* Кнопка «Бренды» слева от поиска: янтарная подсветка и медленное «дыхание» */
.brand-glow{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:var(--card2);color:var(--accent-ink);border:1px solid var(--accent);font:500 15px var(--head);text-transform:uppercase;letter-spacing:.03em;animation:breathe 3.8s ease-in-out infinite;transition:transform .15s,background .15s,color .15s}
.brand-glow .i{width:18px;height:18px}
.brand-glow:hover{background:var(--accent);color:var(--on-accent);transform:translateY(-1px)}
@keyframes breathe{0%,100%{box-shadow:0 0 5px 0 rgba(247,162,27,.22),inset 0 0 8px rgba(247,162,27,.06)}50%{box-shadow:0 0 20px 3px rgba(247,162,27,.55),inset 0 0 14px rgba(247,162,27,.2)}}
@media (prefers-reduced-motion:reduce){.brand-glow{animation:none;box-shadow:0 0 10px rgba(247,162,27,.3)}}
/* Переключатель темы: в тёмной показываем солнце (перейти в светлую), в светлой — луну */
.i-moon{display:none}
[data-theme=light] .i-moon{display:block}
[data-theme=light] .i-sun{display:none}
.theme-wide{width:100%;margin-bottom:14px;font-size:15px}
.theme-wide .i{width:18px;height:18px}

/* Меню разделов: оранжевая кнопка «Каталог» слева на всю высоту, правее — все разделы в 1–2 строки */
.cats{border-top:1px solid var(--line);position:relative}
.cats-in{display:flex;align-items:flex-start;gap:12px}
.cat-btn{flex:none;align-self:flex-start;height:38px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--on-accent);border:0;border-radius:4px;padding:0 18px;margin:5px 0;font:500 15px var(--head);text-transform:uppercase}
.cat-btn:hover,.cat-btn[aria-expanded=true]{background:var(--accent-dark)}
.cat-btn .i{width:20px;height:20px}
.cats-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 2px;flex:1;min-width:0}
.cats-item{flex:none}
.cats-row>li>a{display:flex;align-items:center;gap:4px;padding:9px clamp(5px,.55vw,9px);font:500 clamp(12px,.97vw,15px) var(--head);text-transform:uppercase;white-space:nowrap;border-bottom:2px solid transparent}
.cats-row>li>a:hover,.cats-row>li>a.active{color:var(--accent-ink);border-bottom-color:var(--accent)}
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg2);border:1px solid var(--line);border-top:2px solid var(--accent);padding:18px max(22px,calc((100vw - 1360px)/2 + 16px)) 22px;box-shadow:var(--pop-shadow);z-index:40}
.cats-item.hover>.mega{display:block}
.mega-all{display:inline-block;color:var(--accent-ink);font:400 14px var(--head);text-transform:uppercase;margin-bottom:12px}
.mega-cols{columns:4 210px;column-gap:28px}
.mega-group{break-inside:avoid;margin-bottom:14px}
.mega-group a{display:block;padding:3px 0;color:var(--text2);font-size:14px}
.mega-group a:hover{color:var(--accent-ink)}
.mega-group .mega-title{font:500 15px var(--head);text-transform:uppercase;color:var(--text)}

/* Панель «Каталог»: слева все разделы, справа подразделы с фото */
.catpanel{position:absolute;left:0;right:0;top:100%;background:var(--bg2);border-top:2px solid var(--accent);border-bottom:1px solid var(--line);box-shadow:var(--pop-shadow);z-index:45}
.catpanel-in{display:grid;grid-template-columns:300px minmax(0,1fr);max-height:calc(100vh - 140px)}
.cp-roots{list-style:none;margin:0;padding:8px 0;border-right:1px solid var(--line);overflow:auto}
.cp-roots a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 16px;font:500 17px var(--head);text-transform:uppercase;border-left:3px solid transparent}
.cp-roots a .i{width:16px;height:16px;color:var(--muted)}
.cp-roots a.on{background:var(--card2);border-left-color:var(--accent);color:var(--accent-ink)}
.cp-subs{overflow:auto;padding:18px 26px 26px}
.cp-all{display:inline-flex;gap:8px;align-items:baseline;color:var(--accent-ink);font:500 18px var(--head);text-transform:uppercase;margin-bottom:16px}
.cp-all em{font:400 14px system-ui,sans-serif;text-transform:none;color:var(--muted);font-style:normal}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px 26px}
.cp-sub-main{display:flex;align-items:center;gap:14px;padding:6px;border-radius:var(--r)}
.cp-sub-main:hover{background:var(--card2)}
.cp-sub-main img{width:84px;height:84px;object-fit:contain;background:var(--photo);border-radius:4px;flex:none}
.cp-sub-main img.noimg{padding:8px;opacity:.5}
.cp-sub-main span{font:500 19px/1.2 var(--head);text-transform:uppercase}
.cp-sub-main small{display:block;font:400 14px system-ui,sans-serif;color:var(--muted);text-transform:none;margin-top:2px}
.cp-sub-main:hover span{color:var(--accent-ink)}
.cp-leaves{padding:4px 0 6px 104px;display:flex;flex-direction:column;gap:5px}
.cp-leaves a{font-size:16px;color:var(--text2)}
.cp-leaves a:hover{color:var(--accent-ink)}
.cp-photos{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.cp-photos img{aspect-ratio:1;object-fit:contain;background:var(--photo);border-radius:4px}

/* ===== Главная: карусель ===== */
.hero{position:relative;background:var(--hero);border-bottom:1px solid var(--line);overflow:hidden}
.hero-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.hero-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;position:relative;scroll-snap-align:start}
.slide-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide.has-img::before{content:'';position:absolute;inset:0;background:var(--hero-fade);z-index:1}
.hero-in{position:relative;z-index:2;display:flex;align-items:center;gap:40px;min-height:360px;padding-top:30px;padding-bottom:56px}
.hero-txt{flex:1;max-width:640px}
.hero small{color:var(--accent-ink);font:400 14px var(--head);text-transform:uppercase;letter-spacing:.18em}
.hero-h{font-size:50px;font-weight:600;margin:10px 0 14px}
.hero p{color:var(--text2);max-width:520px;margin:0 0 24px;font-size:16px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-emb{width:270px;height:auto;margin-left:auto;filter:drop-shadow(0 0 40px rgba(247,162,27,.25))}
.hero-arrow{position:absolute;bottom:12px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:var(--overlay);color:var(--text);display:flex;align-items:center;justify-content:center}
.hero-arrow:hover{border-color:var(--accent);color:var(--accent-ink)}
.hero-arrow.prev{right:max(62px,calc((100vw - 1360px)/2 + 62px))}
.hero-arrow.next{right:max(16px,calc((100vw - 1360px)/2 + 16px))}
.hero-dots{position:absolute;left:0;right:0;bottom:28px;z-index:3;display:flex;justify-content:center;gap:8px}
.hero-dots button{width:26px;height:4px;border:0;border-radius:2px;background:var(--line2);padding:0}
.hero-dots button.on{background:var(--accent)}
.pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:24px 0 0}
.pills a{border:1px solid var(--line2);border-radius:30px;padding:8px 20px;font:400 14px var(--head);text-transform:uppercase;display:inline-flex;gap:8px;align-items:center}
.pills a:hover{border-color:var(--accent)}
.pills .i{width:16px;height:16px}
.pills .pill-main{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600;padding:8px 30px}
.sec-title{margin:36px 0 14px}
.sec-title h2{margin:0;font-size:26px}

/* Плитки разделов с коллажем из фото */
.ctiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ctile{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.ctile:hover{box-shadow:var(--card-shadow);transform:translateY(-2px)}
.ctile-ph{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;aspect-ratio:1/1;background:var(--photo);margin:8px 8px 0;border-radius:4px;overflow:hidden}
.ctile-ph img{width:100%;height:100%;object-fit:contain;min-height:0;background:var(--photo)}
.ctile-ph.n0 img,.ctile-ph.n1 img{grid-column:1/-1;grid-row:1/-1}
.ctile-ph.n0 img{object-fit:scale-down;opacity:.3}
.ctile-ph.n2 img{grid-row:1/-1}
.ctile-ph.n3 img:first-child{grid-row:1/-1}
.ctile-txt{padding:10px 14px 12px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ctile-txt span{font:500 17px/1.2 var(--head);text-transform:uppercase}
.ctile-txt small{color:var(--muted);font-size:12px;white-space:nowrap}
.ctile:hover .ctile-txt span{color:var(--accent-ink)}

/* Ленты разделов */
.ribbon{margin-top:38px}
.ribbon-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.ribbon-head h2{margin:0;font-size:26px}
.ribbon-head h2 a:hover{color:var(--accent-ink)}
.ribbon-all{display:inline-flex;align-items:center;gap:6px;color:var(--accent-ink);font:400 15px var(--head);text-transform:uppercase;white-space:nowrap}
.ribbon-all .i{width:16px;height:16px}
.ribbon-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.ribbon-row .card:nth-child(n+6){display:none}

/* ===== Карточка товара в списке ===== */
.grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:14px}
.grid.cols-5{--cols:5}
.card{position:relative;background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:var(--card-shadow);transform:translateY(-2px)}
.card-ph{position:relative;display:block;aspect-ratio:1/1;background:var(--photo);margin:8px 8px 0;border-radius:4px;overflow:hidden}
.card-ph img{width:100%;height:100%;object-fit:contain}
/* цвета лежат в ряд по кругу и «прокручиваются»: --d положение фото (0 — на виду, ±1 — сбоку), --drag смещение пальцем */
.card-ph{touch-action:pan-y}
.card-ph img[data-slide]{position:absolute;inset:0;width:calc(100% + 2px);transform:translateX(calc(var(--d,0) * (100% - 2px) + var(--drag,0px)));transition:transform .3s ease;will-change:transform}
.card-ph img[data-slide].instant{transition:none}
.card-ph.dragging img[data-slide]{transition:none}
.card-ph img.noimg{object-fit:scale-down;opacity:.25}
.card-sale{position:absolute;right:6px;top:6px;background:var(--bad);color:#fff;font:500 13px var(--head);padding:1px 7px;border-radius:3px}
.card-labels{position:absolute;left:6px;top:6px;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.card-labels b{background:var(--accent);color:var(--on-accent);font:500 11px var(--head);text-transform:uppercase;padding:2px 7px;border-radius:3px}
.card-out{position:absolute;left:0;right:0;top:44%;text-align:center;background:var(--overlay);font:500 14px var(--head);text-transform:uppercase;padding:5px}
.card.out .card-ph img{filter:grayscale(1);opacity:.6}
.card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.card-name{font:500 15px/1.25 var(--head);text-transform:uppercase;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-name:hover{color:var(--accent-ink)}
.card-art{font-size:14px;color:var(--muted)}
.card-art b{color:var(--text2);font-weight:500}
[data-theme=light] .brand-plate img,[data-theme=light] .brand-logo img{filter:brightness(0)}
.card-row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;padding-top:4px}
.card-sub{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;color:var(--muted)}
.card-sub[hidden],.card-price[hidden],.card-sizes-list[hidden]{display:none}
.card-color{display:inline-flex;align-items:center;gap:6px;color:var(--text2);text-transform:uppercase}
.card-color i{width:14px;height:14px;border-radius:50%;border:1px solid var(--line2);background-size:cover;background-position:center;flex:none}
.card-price b{font:500 22px var(--head);color:var(--accent-ink);white-space:nowrap}
.card-price s{display:block;color:var(--muted);font-size:13px;line-height:1.1;opacity:.85}
/* кружки цветов: видно до 6, остальные прокручиваются вместе с переключением цвета (scrollLeft в shop.js) */
.dots{display:flex;gap:5px;align-items:center;flex-wrap:nowrap;justify-content:flex-start;overflow:hidden;max-width:calc(6 * 19px + 5 * 5px + 10px);padding:5px;margin:-5px;scrollbar-width:none}
.dots button{flex:none}
.dots button{width:19px;height:19px;border-radius:50%;border:1px solid var(--line2);background-size:cover;background-position:center;padding:0;cursor:pointer;transition:transform .12s,box-shadow .12s}
.dots button:hover{transform:scale(1.15)}
.dots button.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent)}
.dots em{font-style:normal;font-size:11px;color:var(--muted)}
.card-sizes-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;background:var(--card2);border:0;border-top:1px solid var(--line);padding:9px;font:400 13px var(--head);text-transform:uppercase;color:var(--text2)}
.card-sizes-btn .i{width:15px;height:15px;color:var(--accent)}
.card-sizes-btn:hover{color:var(--accent-ink)}
/* у товаров без размеров полоса пустая — чтобы цены в ряду стояли на одном уровне */
.card-sizes-free{visibility:hidden}
.card-sizes-none{padding:6px 8px;text-align:center;font-size:13px;color:var(--muted)}
/* стрелки цветов на фото: на компьютере при наведении, на телефоне всегда (и свайп) */
.card-arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;font:400 22px/28px var(--head);text-align:center;padding:0;opacity:0;transition:opacity .15s;cursor:pointer;z-index:1}
.card-arrow.prev{left:6px}
.card-arrow.next{right:6px}
.card:hover .card-arrow,.card-arrow:focus-visible{opacity:1}
.card-arrow:hover{background:var(--accent);color:var(--on-accent)}
@media (hover:none){.card-arrow{opacity:.85;width:26px;height:26px;font-size:19px;line-height:24px}}
.card-sizes{position:absolute;inset:0;background:var(--bg2);border:1px solid var(--line2);border-radius:calc(var(--r) - 1px);overflow:hidden;display:flex;flex-direction:column;z-index:2}
.card-sizes-who{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 12px 0;text-align:center;min-width:0}
.card-sizes-name{font:500 14px/1.25 var(--head);text-transform:uppercase;color:var(--text);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.card-sizes-color[hidden]{display:none}
.card-sizes-title{text-align:center;color:var(--accent-ink);font:500 15px var(--head);text-transform:uppercase;padding:10px 10px 8px}
.card-sizes-list{flex:1;overflow:auto;padding:0 12px 10px;display:flex;flex-direction:column;gap:6px}
.card-sizes-list a{border:1px solid var(--line2);border-radius:3px;padding:6px 8px;text-align:center;font-size:13px}
.card-sizes-list a:hover{border-color:var(--accent);color:var(--accent-ink)}
.card-sizes-list .nw{white-space:nowrap}
.card-sizes-close{background:var(--card2);border:0;border-top:1px solid var(--line);padding:10px;font:400 14px var(--head);text-transform:uppercase;color:var(--muted)}

/* ===== Раздел каталога ===== */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13px;color:var(--muted);margin:16px 0 4px}
.crumbs a:hover{color:var(--accent-ink)}
.crumbs .i{width:14px;height:14px}
.crumbs span{color:var(--text)}
.cat-head h1{font-size:32px;margin:6px 0 12px}
.subcats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.subcats a{border:1px solid var(--line2);border-radius:30px;padding:5px 14px;font:400 14px var(--head);text-transform:uppercase}
.subcats a:hover{border-color:var(--accent);color:var(--accent-ink)}
/* Фильтры справа */
.cat-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;align-items:start}
.cat-layout>.filters{order:2}
/* Строка над товарами — тонкая, без фона */
.toolbar{display:flex;align-items:center;gap:20px;padding:2px 0 10px;margin-bottom:12px;border-bottom:1px solid var(--line);font-size:14px}
.tool-total{color:var(--muted)}
.tool-total b{color:var(--text);font-weight:500}
.tool-sort{margin-left:auto;display:inline-flex;align-items:center;gap:4px;color:var(--muted);position:relative;cursor:pointer}
.tool-sort select{appearance:none;-webkit-appearance:none;background:none;border:0;padding:4px 18px 4px 2px;margin-right:-18px;color:var(--text);font-weight:600;cursor:pointer;outline:none;position:relative;z-index:1}
.tool-sort select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tool-sort select option{background:var(--bg2);color:var(--text);font-weight:400}
.tool-sort .i{width:16px;height:16px;color:var(--accent-ink)}
.tool-sort.enh select,.tool-sort.enh>.i{display:none}
.sort-btn{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:6px 10px 6px 12px;color:var(--text);font-weight:600;transition:border-color .15s}
.sort-btn:hover,.sort-btn[aria-expanded=true]{border-color:var(--accent)}
.sort-btn .i{display:block;transition:transform .15s}
.sort-btn[aria-expanded=true] .i{transform:rotate(180deg)}
.sort-list{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;margin:0;padding:6px;list-style:none;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;box-shadow:var(--pop-shadow);z-index:45;animation:fade .12s}
.sort-list button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:none;border:0;border-radius:6px;padding:9px 12px;text-align:left;font-size:14px;color:var(--text2)}
.sort-list button:hover{background:var(--card2);color:var(--text)}
.sort-list button[aria-selected=true]{color:var(--accent-ink);font-weight:600}
.sort-list button .i{width:16px;height:16px;color:var(--accent)}
.tool-view{display:flex;gap:2px}
.tool-view button{width:32px;height:30px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:4px;color:var(--muted)}
.tool-view button b{font:500 15px var(--head)}
.tool-view button:hover{color:var(--text)}
.tool-view button.on{border-color:var(--line2);color:var(--accent-ink)}
.tool-filters{display:none;align-items:center;gap:8px;background:var(--accent);color:var(--on-accent);border:0;border-radius:4px;padding:7px 14px;font:500 15px var(--head);text-transform:uppercase}
.tool-filters b{background:var(--on-accent);color:var(--accent);border-radius:10px;padding:0 7px;font-size:12px}
.products{transition:opacity .15s}
.products.loading{opacity:.45;pointer-events:none}
.picked{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.picked-chip{display:inline-flex;align-items:center;gap:6px;background:var(--card2);border:1px solid var(--accent);border-radius:30px;padding:4px 8px 4px 14px;font-size:13px}
.picked-chip .i{width:15px;height:15px;color:var(--accent-ink)}
.picked-reset{background:none;border:0;color:var(--accent-ink);font-size:13px;text-decoration:underline}
.empty{text-align:center;background:var(--bg2);border:1px dashed var(--line2);border-radius:var(--r);padding:48px 16px;margin:20px 0}
.empty b{font:500 22px var(--head);text-transform:uppercase}
.pager{display:flex;justify-content:center;gap:6px;margin:26px 0 8px;flex-wrap:wrap}
.pg{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line2);border-radius:4px;font:500 15px var(--head);padding:0 8px}
a.pg:hover{border-color:var(--accent);color:var(--accent-ink)}
.pg.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pg.off{opacity:.35}
.pg.dots{border:0}

/* Фильтры: столбец без своей прокрутки — едет вниз вместе со страницей */
.filters{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r)}
.filters .drawer-head{display:none}
.flt{border-bottom:1px solid var(--line)}
.flt:last-of-type{border-bottom:0}
.flt summary{list-style:none;cursor:pointer;padding:11px 14px;font:500 15px var(--head);text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.flt summary::-webkit-details-marker{display:none}
.flt summary::after{content:'';width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-top:-4px;transition:transform .15s}
.flt[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.flt>div,.flt>p,.flt>input,.flt>.flt-more{margin:0 14px 12px}
.flt-hint{font-size:12px;color:var(--muted)}
.chips-list{display:flex;flex-wrap:wrap;gap:6px}
.chip input,.color input,.check input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line2);border-radius:4px;padding:4px 8px;font-size:13px;cursor:pointer;user-select:none}
.chip em,.color em,.check em{font-style:normal;font-size:11px;color:var(--muted)}
.chip input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip input:checked+span em{color:#3a2a00}
.chip input:focus-visible+span,.color input:focus-visible~i,.check input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.chip:not(.off) span:hover{border-color:var(--accent)}
.off{opacity:.35}
.off span,.off i{cursor:not-allowed}
/* Цвета — в один столбец, название целиком (длинное переносится) */
.colors-list{display:flex;flex-direction:column;gap:2px}
.color{display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.3;cursor:pointer;padding:4px;border-radius:4px;position:relative}
.color i{width:20px;height:20px;border-radius:50%;border:1px solid var(--line2);flex:none;background-size:cover;background-position:center}
.color span{flex:1;min-width:0;overflow-wrap:anywhere}
.color input:checked~i{box-shadow:0 0 0 2px var(--bg2),0 0 0 4px var(--accent)}
.color input:checked~span{color:var(--accent-ink);font-weight:600}
.color:not(.off):hover{background:var(--card2)}
.checks-list{display:flex;flex-direction:column;gap:2px}
.check{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;padding:3px 0;position:relative}
.check span{flex:1;display:flex;align-items:center;gap:8px}
.check span::before{content:'';width:16px;height:16px;border:1px solid var(--line2);border-radius:3px;flex:none}
.check input:checked+span::before{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--accent)}
[data-more]:not(.all) .extra{display:none}
.flt-more{display:block;background:none;border:0;padding:0;color:var(--accent-ink);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.flt-find{display:block;width:calc(100% - 28px);background:var(--bg3);border:1px solid var(--line2);border-radius:4px;padding:6px 10px;font-size:13px}
.price-inputs{display:flex;gap:8px}
.price-inputs label{flex:1;display:flex;align-items:center;background:var(--bg3);border:1px solid var(--line2);border-radius:4px;padding-left:8px}
.price-inputs span{font-size:12px;color:var(--muted)}
.price-inputs input{width:100%;min-width:0;background:none;border:0;padding:7px 6px;outline:none;-moz-appearance:textfield}
.price-inputs input::-webkit-inner-spin-button{-webkit-appearance:none}
.range{position:relative;height:28px;margin-top:6px}
.range-track{position:absolute;left:0;right:0;top:12px;height:4px;background:var(--line2);border-radius:2px}
.range-fill{position:absolute;top:0;bottom:0;background:var(--accent);border-radius:2px}
.range input{position:absolute;left:0;top:0;width:100%;height:28px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.range input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--bg2);pointer-events:auto;cursor:pointer}
.range input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--bg2);pointer-events:auto;cursor:pointer}
.range input::-moz-range-track{background:none}
.flt-actions{display:none}

/* ===== Страница товара ===== */
.pp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;margin-top:10px;align-items:start}
.pp-gallery{min-width:0;position:sticky;top:130px}
.pp-main{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;background:var(--photo);border-radius:var(--r);aspect-ratio:1/1;scrollbar-width:none}
.pp-main::-webkit-scrollbar{display:none}
.pp-main img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;scroll-snap-align:center}
.pp-main img.noimg{object-fit:scale-down;opacity:.25}
.pp-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.pp-thumbs button{flex:none;width:72px;height:72px;padding:0;overflow:hidden;background:none;border:2px solid transparent;border-radius:4px}
.pp-thumbs button.on{border-color:var(--accent)}
.pp-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
/* маленькие фото — под главным фото в строку (решение владельца 28.10.2026; раньше на компьютере были столбиком слева) */
.pp-info h1{font-size:30px;margin:0 0 10px}
.pp-colorline{display:flex;align-items:center;gap:8px;margin:-4px 0 10px;font-size:15px;color:var(--muted)}
.pp-colorline b{color:var(--text);font-weight:600}
.pp-dot{width:20px;height:20px;border-radius:50%;border:1px solid var(--line2);background-size:cover;background-position:center;flex:none}
.pp-meta{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;color:var(--muted)}
.pp-meta b{color:var(--text);font-weight:500}
.pp-price{margin:18px 0 6px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-height:46px}
.pp-price b{font:500 38px var(--head);color:var(--accent-ink)}
.pp-price s{color:var(--muted);font-size:18px}
.pp-price small{color:var(--muted);font-size:14px}
.pp-opt{margin-top:18px}
.pp-label{font:500 14px var(--head);text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.pp-label b{color:var(--text)}
.pp-sw{width:22px;height:22px;border-radius:50%;border:1px solid var(--line2);background-size:cover;background-position:center;display:inline-block;margin-right:-8px}
.pp-colors{display:flex;flex-wrap:wrap;gap:8px}
.pp-color{width:62px;height:62px;padding:2px;background:var(--photo);border:2px solid var(--line2);border-radius:4px}
.pp-color.on{border-color:var(--accent)}
.pp-color img{width:100%;height:100%;object-fit:contain}
.pp-color i{display:block;width:100%;height:100%;border-radius:2px}
/* наведение на миниатюру цвета: большое фото слева временно показывает этот цвет (shop.js «Предпросмотр цвета») */
.pp-preview{position:absolute;z-index:3;object-fit:contain;background:var(--photo);border-radius:var(--r);pointer-events:none}
.pp-preview[hidden]{display:none}
.pp-sizes{display:flex;flex-wrap:wrap;gap:6px}
.sz{min-width:52px;border:1px solid var(--line2);background:var(--bg2);border-radius:4px;padding:7px 10px;font-size:14px}
.sz:hover{border-color:var(--accent)}
.sz.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.sz.na{opacity:.4;text-decoration:line-through}
.sz.none{display:none}
.pp-stock{margin-top:16px;min-height:22px;font-size:14px}
.pp-stock .yes{color:var(--ok)}
.pp-stock .no{color:var(--bad)}
.pp-buy{margin-top:12px}
.pp-buy p{margin:6px 0 0}
.pp-perks{list-style:none;padding:16px 0 0;margin:20px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--text2)}
.pp-perks li{display:flex;gap:10px;align-items:center}
.pp-perks .i{color:var(--accent);width:18px;height:18px}
.pp-tabs{margin-top:34px}
.pp-sec{border-top:1px solid var(--line)}
.pp-sec summary{list-style:none;cursor:pointer;padding:14px 0;font:500 20px var(--head);text-transform:uppercase;color:var(--accent-ink);display:flex;justify-content:space-between}
.pp-sec summary::-webkit-details-marker{display:none}
.pp-sec summary::after{content:'+';color:var(--muted)}
.pp-sec[open] summary::after{content:'−'}
.pp-sec>div,.pp-sec>p{margin-bottom:20px}
/* Описание: оформление со старых сайтов убрано на сервере; здесь — единый вид в обеих темах */
.rich{max-width:900px;color:var(--text2);line-height:1.65;font-size:15px}
.rich *{color:inherit;background:none}
.rich h1,.rich h2,.rich h3,.rich h4,.rich h5,.rich h6{font:500 18px/1.3 var(--head);text-transform:uppercase;color:var(--text);margin:18px 0 6px}
.rich p{margin:0 0 10px}
.rich ul,.rich ol{margin:0 0 10px;padding-left:22px}
.rich a{color:var(--accent-ink);text-decoration:underline}
.rich img{height:auto}
.rich table{border-collapse:collapse;margin:0 0 12px}
.rich td,.rich th{border:1px solid var(--line);padding:5px 10px}
.matrix-wrap{overflow-x:auto}
.matrix,.chart{border-collapse:collapse;font-size:13px;min-width:100%}
.matrix th,.matrix td,.chart th,.chart td{border:1px solid var(--line);padding:7px 10px;text-align:center;white-space:nowrap}
.matrix th,.chart th{background:var(--bg2);font-weight:500}
.matrix td.yes{color:var(--ok)}
.matrix td.no{color:var(--off)}
.matrix tr.on th,.matrix th.on{color:var(--accent-ink)}

/* ===== Производители ===== */
.brand-bar{display:flex;align-items:center;gap:12px;margin-top:6px}
.brand-find{flex:0 1 360px;min-width:0;width:360px;background:var(--bg2);border:1px solid var(--line2);border-radius:4px;padding:9px 12px;outline:none}
.brand-find:focus{border-color:var(--accent)}
.brand-bar .tool-view,.brand-bar .tool-view-m{flex:none}
.brand-bar .tool-view{display:flex}
@media (max-width:900px){.brand-bar .tool-view{display:none}.brand-find{flex:1 1 auto;width:auto}}
.brand-grid{--bcols:7;display:grid;grid-template-columns:repeat(var(--bcols),minmax(0,1fr));gap:14px;margin-top:16px}
.brand-grid[data-bcols="5"]{--bcols:5}
.brand-grid[data-bcols="3"]{--bcols:3}
.brand-grid[data-bcols="3"] .brand-plate{max-height:220px;aspect-ratio:auto;height:200px}
.brand-grid[data-bcols="3"] .brand-name{font-size:17px}
@media (max-width:900px){
  .brand-grid,.brand-grid[data-bcols]{--bcols:2;gap:10px}
  .brand-grid[data-bcols] .brand-plate{max-height:none;height:auto;aspect-ratio:1/1}
  .brand-grid[data-bcols] .brand-name{font-size:14px}
  .brand-grid[data-bmcols="1"]{--bcols:1;width:90%;margin-inline:auto}
  .brand-grid[data-bmcols="1"] .brand-plate,.brand-grid[data-bmcols="1"][data-bcols] .brand-plate{aspect-ratio:auto;height:140px}
  .brand-grid .brand-plate{padding:10px}
  .brand-grid .brand-name{padding:8px 10px 10px;font-size:14px;overflow-wrap:anywhere}
}
.brand-tile{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.brand-tile:hover{box-shadow:var(--card-shadow);transform:translateY(-2px)}
/* логотипы белые на прозрачном: в тёмной теме — на тёмной плашке, в светлой — чернеют на белой */
.brand-plate,.brand-logo{display:flex;align-items:center;justify-content:center;background:#1c1c1c;color:#ececec}
[data-theme=light] .brand-plate,[data-theme=light] .brand-logo{background:#fff;color:#1d1d1d;border:1px solid var(--line)}
.brand-plate{aspect-ratio:1/1;margin:8px 8px 0;border-radius:4px;padding:14px}
.brand-plate img{width:100%;height:100%;object-fit:contain}
.brand-plate b{font:500 18px/1.2 var(--head);text-transform:uppercase;text-align:center}
.brand-name{padding:10px 12px 12px;font:500 15px/1.25 var(--head);text-transform:uppercase}
.brand-name small{display:block;font:400 12px system-ui,sans-serif;color:var(--muted);text-transform:none}
.brand-tile:hover .brand-name{color:var(--accent-ink)}
.brand-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.brand-logo{width:120px;height:80px;border-radius:var(--r);padding:8px}
.brand-logo img{width:100%;height:100%;object-fit:contain}

/* Характеристики на карточке товара */
.specs{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 24px}
.specs div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:6px 0}
.specs dt{color:var(--muted)}
.specs dd{margin:0;font-weight:500;text-align:right}

/* ===== Текстовые страницы (Контакты, Оплата и доставка, документы) ===== */
.page-text{max-width:860px;margin:6px 0 0}
.page-text h1{font-size:32px;margin:6px 0 16px}
.page-body{font-size:16px;line-height:1.65}
.page-body h2{font-size:24px;margin:26px 0 10px}
.page-body h3{font-size:19px;margin:20px 0 8px}
.page-body p,.page-body ul,.page-body ol,.page-body blockquote{margin:0 0 14px}
.page-body ul,.page-body ol{padding-left:22px}
.page-body a{color:var(--accent-ink);text-decoration:underline}
.page-body blockquote{border-left:3px solid var(--accent);padding:2px 0 2px 14px;color:var(--muted)}
.page-body table{border-collapse:collapse;width:100%;margin:0 0 16px;display:block;overflow-x:auto}
.page-body th,.page-body td{border:1px solid var(--line, rgba(128,128,128,.35));padding:8px 10px;text-align:left}

/* ===== Подвал ===== */
.foot{margin-top:60px;background:var(--bg3);border-top:3px solid var(--accent);color:var(--muted);font-size:14px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:28px;padding-top:34px;padding-bottom:20px}
.foot-logo{height:40px;width:auto;margin-bottom:12px}
.foot h4{color:var(--text);font:500 15px var(--head);text-transform:uppercase;margin:0 0 10px}
.foot p{margin:0 0 6px}
.foot a{display:block;margin-bottom:6px}
.foot a:hover{color:var(--accent-ink)}
.foot-copy{border-top:1px solid var(--line);padding-top:14px;padding-bottom:18px;font-size:12px}

/* ===== Выезжающие панели ===== */
.shade{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80;opacity:0;visibility:hidden;transition:opacity .2s}
.shade.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(360px,88vw);background:var(--bg2);z-index:90;transform:translateX(-102%);transition:transform .22s;overflow:auto;display:flex;flex-direction:column;overscroll-behavior:contain}
.drawer.drawer-right{left:auto;right:0;transform:translateX(102%)}
.drawer.drawer-wide{width:min(720px,96vw)}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);font:500 20px var(--head);text-transform:uppercase;color:var(--accent-ink);position:sticky;top:0;background:var(--bg2);z-index:1}
.drawer-head button{background:none;border:0;padding:4px;color:var(--text)}
#drawer-chart>.matrix-wrap,#drawer-chart>p{margin:16px}
.tree,.tree ul{list-style:none;margin:0;padding:0}
.tree>li{border-bottom:1px solid var(--line)}
.tree-row{display:flex;align-items:center}
.tree-row a{flex:1;display:flex;align-items:center;gap:12px;padding:10px 16px;font:400 16px var(--head);text-transform:uppercase;min-height:52px}
.tree-row img{width:40px;height:40px;object-fit:contain;background:var(--photo);border-radius:4px;flex:none}
.tree-toggle{background:none;border:0;border-left:1px solid var(--line);padding:14px 18px;color:var(--muted);align-self:stretch}
.tree-toggle .i{transition:transform .15s}
.tree li.open>.tree-row .tree-toggle .i{transform:rotate(180deg)}
.tree li>ul{display:none;background:var(--bg3);padding:4px 0}
.tree li.open>ul{display:block}
.tree ul a{display:block;padding:9px 16px 9px 28px;font-size:15px}
.tree ul ul a{padding-left:44px;font-size:14px;color:var(--muted)}
/* стрелки-раскрывашки сдвинуты левее — справа у панели полоса прокрутки */
.tree-row{padding-right:14px}
.tree ul .tree-row a{display:flex;align-items:center;gap:10px;min-height:0;padding:9px 16px 9px 28px;font-family:inherit;font-weight:400;font-size:15px;text-transform:none}
.tree ul .tree-toggle{padding:9px 16px}
.tree ul ul .tree-row,.tree ul ul li{padding-right:0}
.drawer-info{padding:16px;font-size:13px;color:var(--muted)}
.drawer-links{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.drawer-info p{display:flex;gap:8px;margin:0 0 8px}
.drawer-info .i{width:16px;height:16px;color:var(--accent)}

/* ===== Окно «Построить маршрут» ===== */
.mapm{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.6);animation:fade .2s}
.mapm-box{position:relative;width:min(420px,100%);background:var(--bg2);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--r);box-shadow:var(--pop-shadow);padding:22px 22px 24px}
.mapm-box h3{margin:0 0 4px;font-size:24px}
.mapm-box p{margin:0 0 18px}
.mapm-links{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mapm-link{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px;border:1px solid var(--line2);border-radius:10px;background:var(--card);font:500 17px var(--head);text-transform:uppercase;transition:transform .15s,border-color .15s,box-shadow .15s}
.mapm-link:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--card-shadow)}
.mapm-ico{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.mapm-ico .i{width:28px;height:28px}
.mapm-link.ya .mapm-ico{background:#fc3f1d}
.mapm-link.gis .mapm-ico{background:#1ba53e}

/* ===== Всплывающее рекламное окно ===== */
.popup{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.6);animation:fade .25s}
.popup-box{position:relative;width:min(460px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--bg2);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--r);box-shadow:var(--pop-shadow)}
.popup-img{width:100%;max-height:300px;object-fit:cover}
.popup-body{padding:20px 22px 22px}
.popup-body h3{margin:0 0 8px;font-size:24px}
.popup-body p{margin:0 0 16px;color:var(--text2)}
.popup-body .btn{width:100%}
.popup-x{position:absolute;z-index:2;top:8px;right:8px;width:36px;height:36px;border-radius:50%;border:0;background:var(--overlay);color:var(--text);display:flex;align-items:center;justify-content:center}
@keyframes fade{from{opacity:0}}

/* Нижнее меню телефона */
.tabbar{display:none}

/* ===== Планшет ===== */
@media (max-width:1200px){
  .cat-btn{padding:0 12px;font-size:14px}
  .cat-btn .i{display:none}
}
@media (max-width:1100px){
  .grid{--cols:3!important}
  .tool-view{display:none}
  .ctiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ribbon-row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ribbon-row .card:nth-child(n+5){display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .cp-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}

/* ===== Телефон и узкий планшет: фильтры и меню — выезжающие панели ===== */
@media (max-width:900px){
  :root{--tabbar:62px}
  .strip,.cats,.brand-glow{display:none}
  .head-row{height:60px;gap:12px}
  .logo .logo-full{display:none}
  .logo .logo-mini{display:block;height:44px;width:auto}
  .head-fixed .logo img{height:44px}
  .head-row{justify-content:space-between}
  /* строки поиска в шапке нет: она выезжает по кнопке «Поиск» внизу */
  .head .search{display:none}
  .search-open .head .search{display:flex;position:fixed;top:0;left:0;right:0;height:60px;z-index:95;margin:0;padding:8px 12px;background:var(--bg2);border-bottom:1px solid var(--line)}
  .search-open .head .search input{font-size:16px}
  .search-open .head .search>button:not(.search-x){border-radius:0}
  .search-open .search-x{display:flex;align-items:center;justify-content:center;width:44px;background:none;border:0;color:var(--text)}
  .search-open .head .suggest{top:100%;left:0;right:0}
  .head-icons .theme-btn{display:flex}
  .search{max-width:none}
  .head-icons{gap:0}
  .head-icons .hide-sm,.theme-btn span{display:none}
  .theme-btn{padding:6px 0 6px 4px}
  .cat-layout{grid-template-columns:1fr}
  .filters.drawer{position:fixed;top:0;border:0;border-radius:0}
  .filters .drawer-head{display:flex}
  .flt-actions{display:flex;gap:8px;position:sticky;bottom:0;background:var(--bg2);padding:12px 14px;border-top:1px solid var(--line);margin-top:auto}
  .flt-actions .btn{flex:1}
  .filters .flt-form{display:flex;flex-direction:column;min-height:calc(100% - 58px)}
  /* Строка над товарами: «Сортировка» слева, «Фильтры» справа — под большой палец */
  .toolbar{position:sticky;top:60px;z-index:20;gap:10px;padding:8px 0;background:var(--bg);margin-bottom:10px}
  .tool-total{display:none}
  .tool-sort{margin-left:0;margin-right:auto}
  .sort-list{right:auto;left:0}
  .tool-filters{display:inline-flex}
  .grid,.grid.cols-5{--cols:2!important;gap:10px}
  .card-ph{margin:6px 6px 0}
  .card-body{padding:8px 10px 10px}
  .card-name{font-size:14px}
  .card-price b{font-size:19px}
  /* телефон: кружки цветов под ценой, стрелки на фото видны всегда */
  .card-row{flex-wrap:wrap}
  .dots{width:calc(100% + 10px);max-width:none;justify-content:flex-start;gap:6px;order:-1;margin:-5px -5px -3px}
  .dots button{width:20px;height:20px}
  .card-arrow{opacity:.85;width:26px;height:26px;font-size:19px;line-height:24px}
  .hero-in{min-height:0;padding-top:26px;padding-bottom:64px}
  .hero-h{font-size:30px}
  .hero-emb,.hero-arrow{display:none}
  .slide.has-img .hero-in{min-height:300px;align-items:flex-end}
  .slide.has-img::before{background:linear-gradient(0deg,var(--bg) 0,rgba(0,0,0,0) 75%)}
  .ctiles{grid-template-columns:1fr 1fr;gap:10px}
  .ctile-txt{flex-direction:column;gap:0;padding:8px 10px 10px}
  .ctile-txt span{font-size:15px}
  .ctile-ph{margin:6px 6px 0}
  .ribbon{margin-top:30px}
  .ribbon-head h2{font-size:21px}
  .ribbon-all{font-size:13px}
  /* Лента на телефоне листается пальцем */
  .ribbon-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;gap:10px;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
  .ribbon-row::-webkit-scrollbar{display:none}
  .ribbon-row .card,.ribbon-row .card:nth-child(n+5),.ribbon-row .card:nth-child(n+6){display:flex;flex:0 0 44%;scroll-snap-align:start}
  .sec-title h2{font-size:22px}
  .cat-head h1{font-size:26px}
  .subcats{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 12px;padding:0 16px 4px;scrollbar-width:none}
  .subcats a{flex:none}

  /* Страница товара: фото поменьше, под ним название и цена */
  .pp{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .pp-gallery{position:static;order:1;margin-bottom:14px}
  .pp-info{display:contents}
  .pp-info>*{order:2}
  .pp-main{height:min(56vh,calc(100vw - 32px));aspect-ratio:auto}
  .pp-thumbs button{width:54px;height:54px}
  .pp-info h1{font-size:23px}
  .pp-price{margin-top:12px}
  .pp-price b{font-size:30px}
  /* «В корзину» — компактная кнопка справа над нижним меню: значок корзины и подпись */
  .pp-buy{position:fixed;right:16px;bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 14px);z-index:60;margin:0}
  .pp-buy p{display:none}
  .pp-buy .btn{width:auto;height:54px;padding:0 20px 0 16px;border-radius:27px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 18px rgba(0,0,0,.45)}
  .pp-buy .btn .buy-t{display:inline;font-size:15px;white-space:nowrap}
  .pp-buy .btn .buy-ico{display:block;width:26px;height:26px;color:inherit}
  .pp-buy .btn:disabled{opacity:.55}
  .pp{padding-bottom:80px}
  /* всплывающее окно: заголовок не залезает под крестик, окно листается */
  .popup{align-items:flex-end;padding:12px}
  .popup-box{max-height:calc(100dvh - 24px)}
  .popup-body{padding:18px 18px 20px}
  .popup-body h3{padding-right:44px;font-size:21px;line-height:1.15;overflow-wrap:anywhere}
  .popup-img{max-height:200px}
  /* вход / профиль — значок в шапке */
  .head-icons .login-link span,.head-icons .profile-btn span{display:none}
  .head-icons .login-link,.head-icons .profile-btn{padding:6px 4px 6px 8px}
  .head-icons .login-link .i,.head-icons .profile-btn .i{width:26px;height:26px}
  /* таблица наличия на телефоне компактнее */
  .matrix th,.matrix td{padding:6px 8px;font-size:13px}
  .foot{margin-top:40px}
  .foot-grid{grid-template-columns:1fr}

  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;height:calc(var(--tabbar) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--bg2);border-top:1px solid var(--line);z-index:70}
  .tabbar>*{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:0;font-size:11px;color:var(--muted);position:relative}
  .tabbar .i{width:24px;height:24px;color:var(--text)}
  .tabbar .on,.tabbar .on .i{color:var(--accent-ink)}
  .tabbar .t-catalog .i{color:var(--accent)}
  .tab-badge{position:absolute;top:6px;left:calc(50% + 6px);background:var(--accent);color:var(--on-accent);border-radius:9px;font-size:11px;padding:0 6px;font-weight:700}
}
@media (max-width:380px){
  .card-name{font-size:13px}
  .card-price b{font-size:17px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Компьютер: фильтры — обычная колонка, не выезжающая панель */
@media (min-width:901px){
  .filters.drawer{position:static;width:auto;transform:none;z-index:1;display:block;overflow:visible}
}

/* ===== Классическая шапка (вид «как на старом сайте»): html===== */
/* на телефоне из ряда остаётся только компактная кнопка графика работы (окно то же, что на ПК) */
.quick{display:block;background:var(--bg3);border-bottom:1px solid var(--line)}
@media (max-width:900px){
  .quick-in{padding-top:8px;padding-bottom:8px}
  /* все кнопки — одной лентой, листается пальцем; график работы первым */
  .quick{position:relative;overflow:hidden}
  .quick::after{content:'';position:absolute;top:0;right:0;bottom:0;width:32px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg3))}
  .quick-in{max-width:100%}
  .quick-row{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;padding-right:28px}
  .quick-row::-webkit-scrollbar{display:none}
  /* бегущая строка: пока лента едет сама, привязка к кнопкам выключена; копия графика идёт не первой */
  .quick-row.auto{scroll-snap-type:none}
  .quick-row>.qdup[data-hours-open]{order:0}
  .quick-row>*{flex:none;scroll-snap-align:start;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--card2);border:1px solid var(--line2);color:var(--text);font:500 13px/1.2 var(--head);text-transform:uppercase;letter-spacing:.03em}
  .quick-row>[data-hours-open]{order:-1;color:var(--text2);gap:2px 8px}
  .quick-row>[data-hours-open] span{text-transform:none}
  .quick-row .i{width:16px;height:16px}
  .quick-row .qbtn-vk .i{color:#2787f5}
  .quick-row .qbtn-new .i{color:var(--accent)}
  .quick-row .qbtn-ustav .i{color:#6cbf4a}
  .quick-row .pill .i{color:var(--accent)}
  .quick-row .pill em{font-style:normal;color:var(--accent-ink);border-bottom:1px dashed var(--accent);margin-left:2px;text-transform:none}
  .quick-row>.brand-pill{background:linear-gradient(135deg,#ffc13d,#f7a21b);border-color:transparent;color:#1a1a1a;padding:3px 14px 3px 8px}
  .quick-row>.brand-pill b{font:600 14px var(--head);letter-spacing:.04em}
  .quick-row .bp-logos{position:relative;flex:none;width:40px;height:28px;overflow:hidden}
  .quick-row .bp-logos img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:brightness(0);opacity:0;transition:opacity .6s}
  .quick-row .bp-logos img.on{opacity:1}
}
.cats-toggle{display:none}
@media (min-width:901px){
  .head{position:static}
  /* меню разделов: кнопки в рамке по центру, у разделов с подразделами — стрелка */
  .cats{border-top:0;padding:2px 0 8px}
  .cats-in{justify-content:center}
  .cats-row{flex:0 1 auto;justify-content:center;gap:6px}
  .cats-row>li>a{padding:6px 12px;border:1px solid var(--line2);border-radius:4px;background:var(--card2);font-size:clamp(12px,.95vw,14px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
  .cats-row>li>a:hover,.cats-row>li>a.active{border-color:var(--accent);background:var(--card2)}
  .cats-item.hover>a{border-color:var(--accent)}
  .cats-item.hover.has-sub>a::after{transform:rotate(180deg)}
  .cats-item.has-sub>a::after{content:'';width:0;height:0;margin-left:3px;border:4px solid transparent;border-top-color:currentColor;border-bottom:0}
  /* ряд быстрых кнопок и информации */
  .quick-in{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:12px;padding-bottom:12px}
  .quick-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
  .qbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:999px;background:var(--card2);border:1px solid var(--line2);color:var(--text);font:500 14px var(--head);text-transform:uppercase;letter-spacing:.03em;transition:transform .15s,border-color .15s,box-shadow .15s}
  .qbtn .i{width:18px;height:18px}
  .qbtn:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 6px 16px rgba(0,0,0,.25)}
  .qbtn-vk .i{color:#2787f5}
.qbtn-new .i{color:var(--accent)}
.qbtn-ustav .i{color:#6cbf4a}
  .qbtn-max .i{width:22px;height:22px}
  .brand-pill{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:6px 22px 6px 16px;border-radius:999px;background:linear-gradient(135deg,#ffc13d,#f7a21b);color:#1a1a1a;box-shadow:0 6px 22px rgba(247,162,27,.4);transition:transform .15s,box-shadow .15s}
  .brand-pill b{font:600 18px var(--head);text-transform:uppercase;letter-spacing:.04em}
  .brand-pill:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(247,162,27,.55)}
  /* логотип бренда — без кружка, просто картинка покрупнее */
.bp-logos{position:relative;flex:none;width:64px;height:44px;overflow:hidden}
  .bp-logos img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:brightness(0);opacity:0;transform:scale(.85);transition:opacity .6s,transform .6s}
  .bp-logos img.on{opacity:1;transform:none}
  .pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:999px;background:var(--card2);border:1px solid var(--line);color:var(--text2);font-size:13px;text-transform:uppercase}
  .pill .i{width:16px;height:16px;color:var(--accent)}
  .pill em{font-style:normal;color:var(--accent-ink);border-bottom:1px dashed var(--accent);margin-left:4px;text-transform:none}
  button.pill:hover{border-color:var(--accent)}
  .quick-info .strip-hours{gap:8px}
  /* АВТОШИРИНА: кнопки растягиваются на всё свободное место ряда и добавлено немного высоты.
     Чтобы отменить — удалить этот блок до комментария «конец автоширины». */
  .cats-in .cats-row{flex:1 1 auto;width:100%}
  .cats-item{flex:1 1 auto}
  .cats-row>li>a{justify-content:center;padding-top:8px;padding-bottom:8px}
  /* ряд зеркальный: по три одинаковые кнопки слева и справа, «Бренды» строго по центру */
  .quick-row{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.15fr) repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}
  .quick-row>*{min-width:0}
  .quick-row>.qbtn{white-space:nowrap;padding:10px 8px;font-size:clamp(12px,.95vw,14px)}
  /* «Тюмень · Как проехать» и «Открыто · до 18:00»: на узкой кнопке вторая часть уходит на новую строку внутри кнопки */
  .quick-row>.pill{flex-wrap:wrap;row-gap:1px;column-gap:6px;padding:5px 10px;line-height:1.2;text-align:center;font-size:clamp(11px,.85vw,13px)}
  .quick-row>.pill em{margin-left:0}
  .quick-row>.brand-pill{padding:5px 14px;gap:8px}
  .quick-row>.brand-pill b{font-size:clamp(15px,1.15vw,18px)}
  .quick-row .bp-logos{width:58px;height:40px}
  /* конец автоширины */

  /* Шапка остаётся сверху при прокрутке (её включает shop.js, когда шапка ушла за экран); меню сворачивается в кнопку «Категории» */
  .head.head-fixed{position:fixed;top:0;left:0;right:0;z-index:30;box-shadow:0 6px 20px rgba(0,0,0,.35);animation:headIn .25s ease-out}
  .head-fixed .head-row{height:56px;gap:20px}
  .head-fixed .logo img{height:38px}
  /* в прилипшей шапке меню спрятано; кнопка «Категории» стоит в одной строке с логотипом и поиском */
  .head-fixed .cats-toggle{display:inline-flex;align-items:center;gap:8px;flex:none;padding:8px 16px;border:1px solid var(--accent);border-radius:4px;background:var(--card2);color:var(--accent-ink);font:500 14px var(--head);text-transform:uppercase}
  .head-fixed .cats-toggle .i{width:18px;height:18px}
  .head-fixed .cats-toggle .i-caret{width:14px;height:14px;transition:transform .2s}
  .head-fixed .cats-toggle:hover,.head-fixed .cats-toggle[aria-expanded=true]{background:var(--accent);color:var(--on-accent)}
  .head-fixed .cats-toggle[aria-expanded=true] .i-caret{transform:rotate(180deg)}
  .head-fixed .cats{display:none;padding:0 0 8px}
  .head-fixed.cats-open .cats{display:block}  @keyframes headIn{from{transform:translateY(-100%)}to{transform:none}}
}

/* окно «График работы» — на любой ширине (раньше было только для ПК, из-за чего на телефоне «сегодня» светилось у всех дней) */
.hours-box{width:min(460px,100%);padding:26px 28px 24px}
.hours-addr{display:flex;align-items:center;gap:8px;margin:0 0 18px;font-size:14px}
.hours-addr .i{width:16px;height:16px;color:var(--accent);flex:none}
.hours-tbl{width:100%;border-collapse:separate;border-spacing:0;margin:0 0 18px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.hours-tbl th{padding:10px 16px;background:var(--card2);color:var(--muted);font:500 12px var(--head);text-transform:uppercase;letter-spacing:.1em;text-align:left}
.hours-tbl th:last-child,.hours-tbl td:last-child{text-align:right}
.hours-tbl td{padding:12px 16px;border-top:1px solid var(--line);font-size:16px;font-variant-numeric:tabular-nums}
.hours-tbl td:last-child{font-weight:600;white-space:nowrap}
.hours-tbl td:first-child em{display:none;margin-left:10px;font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--on-accent);background:var(--accent);border-radius:999px;padding:2px 9px;vertical-align:1px}
.hours-tbl tr.today td{background:rgba(247,162,27,.10)}
.hours-tbl tr.today td:first-child{box-shadow:inset 3px 0 0 var(--accent);font-weight:600}
.hours-tbl tr.today td:first-child em{display:inline-block}
.hours-now{margin:0;font-size:15px}
.hours-now.open b{color:var(--ok)}
.hours-now.closed b{color:var(--bad)}
@media (max-width:480px){
  .hours-box{padding:22px 16px 20px}
  .hours-tbl td:first-child em{display:none;margin:0 0 0 8px}
  .hours-tbl td{padding:11px 12px;font-size:15px}
}

/* ===== Режим сотрудника (кнопка Admin; видна только вошедшим в админку) ===== */
.admin-toggle{border:1px solid var(--accent);background:transparent;color:var(--accent-ink);border-radius:999px;padding:5px 14px;font:600 12px var(--head);text-transform:uppercase;letter-spacing:.08em}
.admin-toggle[aria-pressed=true]{background:var(--accent);color:var(--on-accent);box-shadow:0 0 12px rgba(247,162,27,.5)}
.profile{position:relative}
.profile-btn{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;text-transform:uppercase;color:var(--muted);background:none;border:0;padding:0;cursor:pointer}
.profile-btn:hover,.profile-btn[aria-expanded=true]{color:var(--text)}
.profile-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r);box-shadow:0 12px 30px rgba(0,0,0,.35);padding:6px;z-index:60;display:flex;flex-direction:column}
.profile-menu[hidden]{display:none}
.profile-who{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;display:flex;flex-direction:column;gap:2px}
.profile-who small{color:var(--muted);font-size:12px}
.profile-menu a,.profile-menu button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:4px;font:inherit;font-size:14px;color:var(--text);background:none;border:0;cursor:pointer}
.profile-menu a:hover,.profile-menu button:hover{background:var(--bg2);color:var(--accent-ink)}
.adm-only{display:none}
[data-admin=on] .adm-only{display:block}
/* карточка без размеров: в режиме Admin вместо «Без размера» — кнопка «Этикетка» */
[data-admin=on] .adm-hide{display:none}
[data-admin=on] .card-label-btn{display:flex}
.card-label-btn[hidden],[data-admin=on] .card-label-btn[hidden]{display:none}
.adm-panel{margin:16px 0;border:1px dashed var(--accent);border-radius:var(--r);padding:12px 14px;background:var(--card)}
.adm-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:14px}
.adm-head a,.adm-sub a{color:var(--accent-ink);text-decoration:underline}
.adm-sub{font-size:13px;color:var(--muted);margin-bottom:10px}
.adm-bc{margin:0;background:#fff;color:#111;border-radius:6px;padding:10px 8px 8px;text-align:center;border:2px solid transparent}
.adm-bc.zero{opacity:.55}
.adm-bc.sel{border-color:var(--accent);box-shadow:0 0 0 3px rgba(247,162,27,.35)}
.adm-bc-img svg{display:block;max-width:100%;height:auto;margin:0 auto}
.adm-bc figcaption{display:flex;flex-direction:column;gap:2px;margin-top:4px;font-size:12px}
.adm-bc figcaption b{font:600 14px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.06em}
.adm-bc figcaption span{color:#555}
.adm-open{width:100%}
.adm-btns{display:flex;gap:8px;flex-wrap:wrap}
.adm-btns .btn{flex:1;min-width:180px}
.adm-locked{opacity:.5;cursor:not-allowed}
.adm-locked-msg{margin:8px 0 0}
.adm-wo{display:flex;flex-direction:column;gap:10px}
.adm-wo label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted)}
.adm-wo select,.adm-wo input,.adm-wo textarea{font:inherit;font-size:16px;color:var(--text);background:var(--bg2);border:1px solid var(--line2);border-radius:4px;padding:8px 10px}
.adm-wo-msg{min-height:1.2em;margin:0;font-size:14px}
.adm-wo-msg.ok{color:#3fb950}
.adm-wo-msg.no{color:#f85149}
.adm-stock{margin-bottom:12px}
.adm-stock-list{display:flex;flex-wrap:wrap;gap:6px}
.adm-stock-list button{border:1px solid var(--line2);border-radius:4px;padding:4px 8px;font:inherit;font-size:13px;background:transparent;color:inherit;cursor:pointer}
.adm-stock-list button:hover{border-color:var(--accent)}
.adm-res{color:var(--accent-ink);font-size:11px}
.adm-stock-list button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.adm-stock-list button.on b{color:inherit}
.adm-stock-list b{color:var(--accent-ink);margin-left:4px}
.adm-q{display:none}
[data-admin=on] .adm-q{display:inline;margin-left:8px;color:var(--accent-ink)}
.adm-dialog{border:1px solid var(--accent);border-radius:var(--r);background:var(--card);color:var(--text);padding:16px 18px;width:min(560px,94vw);max-height:92vh;overflow:auto;overflow-x:hidden}
.adm-dialog::backdrop{background:rgba(0,0,0,.65)}
.adm-dlg-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.adm-x{background:none;border:0;color:inherit;font-size:30px;line-height:1;cursor:pointer;padding:0 6px}
.adm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;max-height:34vh;overflow:auto;padding-top:4px}
.adm-chip{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:72px;padding:8px 12px;border-radius:6px;border:1px solid var(--muted);background:transparent;color:inherit;font:600 15px/1.2 inherit;cursor:pointer}
.adm-chip small{font-weight:400;font-size:11px;color:var(--muted)}
.adm-chip.zero{opacity:.5}
.adm-chip.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);opacity:1}
.adm-chip.on small{color:inherit}
.adm-stage{display:flex;flex-direction:column;align-items:center;min-height:170px;justify-content:center}
.adm-stage .adm-bc{width:100%;max-width:460px;padding:22px 16px 16px}
.adm-stage .adm-bc[hidden]{display:none}
.adm-stage .adm-bc figcaption{font-size:16px}
.adm-stage .adm-bc figcaption b{font-size:22px}
[data-admin=on] .card-edit{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;font-size:13px;color:var(--accent-ink);border-top:1px dashed var(--accent);background:var(--card2)}
.card-edit .i{width:15px;height:15px}
/* режим сотрудника: аналитика — капсула на фото карточки и плитки на странице товара */
.card-eye{display:none;position:absolute;left:6px;bottom:6px;z-index:1;align-items:center;gap:3px;padding:4px 9px 4px 7px;border-radius:999px;background:var(--accent);color:#141414;font-size:11px;line-height:1.2;box-shadow:0 2px 8px rgba(0,0,0,.45),0 0 0 2px rgba(0,0,0,.25)}
.card-eye svg{width:14px;height:14px;fill:#141414;margin-right:2px}
.card-eye b{font-size:13px;font-weight:800}
.card-eye small{font-size:10px;font-weight:600;opacity:.8;margin-left:1px}
.card-eye i{width:1px;height:11px;background:rgba(0,0,0,.35);margin:0 5px}
[data-admin=on] .card-eye{display:inline-flex}
.adm-stats{margin:0 0 12px;padding:10px 12px;border-radius:8px;background:var(--card2);border:1px solid var(--line)}
.adm-stats-title{font-size:12px;color:var(--muted);margin-bottom:8px}
.adm-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.adm-tile{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:6px;background:var(--card);border:1px solid var(--line2)}
.adm-tile small{font-size:11px;color:var(--muted)}
.adm-tile b{font:600 20px/1.15 var(--head);color:var(--text)}
.adm-tile em{font-size:12px;font-weight:600;font-style:normal;margin-left:6px}
.adm-tile .up{color:#22a35a}.adm-tile .down{color:#d64545}
.adm-stats-sub{font-size:12px;color:var(--muted);margin:10px 0 6px}
.adm-pills{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.adm-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;border:1px solid var(--line2);font-size:12px;color:var(--text2)}
.adm-pill b{color:var(--accent-ink);font-size:13px}
.adm-pill-h{font-size:12px;color:var(--muted)}
.adm-color-stats{margin:0 0 10px}
@media (max-width:520px){.adm-tiles{grid-template-columns:1fr 1fr}}
/* настройки режима сотрудника (шестерёнка): что скрыть */
[data-adm-stats=off] .card-eye,[data-adm-stats=off] .adm-stats,[data-adm-stats=off] .adm-color-stats{display:none!important}
[data-adm-edit=off] .card-edit{display:none!important}
[data-adm-qty=off] .adm-q{display:none!important}
.adm-box{position:relative;display:flex;align-items:center;gap:4px}
.adm-sw{position:relative;display:inline-block;width:24px;height:13px;border-radius:7px;background:var(--off);margin-right:7px;vertical-align:-2px;transition:background .15s}
.adm-sw::after{content:"";position:absolute;left:2px;top:2px;width:9px;height:9px;border-radius:50%;background:#fff;transition:left .15s}
.admin-toggle[aria-pressed=true] .adm-sw{background:var(--on-accent)}
.admin-toggle[aria-pressed=true] .adm-sw::after{left:13px;background:var(--accent)}
/* шестерёнка видна всегда (кнопка Admin не прыгает), в цвет кнопки Admin */
.adm-gear{display:inline-flex;width:30px;height:30px;border-radius:50%;border:1px solid var(--accent);background:transparent;color:var(--accent-ink);cursor:pointer;padding:0;align-items:center;justify-content:center}
.adm-gear svg{width:17px;height:17px;fill:currentColor}
.adm-gear:hover,.adm-gear[aria-expanded=true]{background:var(--accent);color:var(--on-accent)}
.adm-menu{position:absolute;right:0;top:calc(100% + 10px);width:290px;background:var(--card);border:1px solid var(--accent);border-radius:var(--r);box-shadow:0 12px 30px rgba(0,0,0,.35);padding:12px 14px;z-index:60;display:flex;flex-direction:column;gap:10px;font-size:13px;text-transform:none;letter-spacing:0;color:var(--text)}
.adm-menu[hidden]{display:none}
.adm-menu label{display:flex;gap:8px;align-items:flex-start;cursor:pointer;line-height:1.35}
.adm-menu input{accent-color:var(--accent);margin-top:2px;width:16px;height:16px;flex:none}
.adm-menu small{color:var(--muted);font-size:11px}/* иконки разделов: прозрачный фон, без серой подложки */
.cp-sub-main img.ico,.tree-row img.ico{background:none;object-fit:contain}
.cp-sub-main img.ico{width:44px;height:44px}
.tree li li a.has-ico{display:flex;align-items:center;gap:10px}
.tree li li img.ico{width:28px;height:28px;object-fit:contain;flex:none}
/* кнопки внутри текста страниц (заглушки корзины, входа) — текст кнопки, а не цвет ссылки */
.page-body a.btn{color:var(--on-accent);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;padding:12px 22px}

/* ===== Корзина ===== */
.cart-link{position:relative}
.cart-badge{position:absolute;top:-6px;left:calc(50% + 6px);background:var(--accent);color:var(--on-accent);border-radius:9px;font:700 11px/16px system-ui,sans-serif;padding:0 5px;min-width:16px;text-align:center}
.cart-title{font-size:32px;margin:6px 0 16px}
.cart-note{background:var(--card);border-left:3px solid var(--accent);padding:10px 14px;border-radius:var(--r);margin:0 0 16px}
.cart-empty{text-align:center;padding:40px 0 60px;color:var(--muted)}
.cart-empty .i{width:56px;height:56px;color:var(--accent)}
.cart-empty p{font-size:18px;margin:10px 0 20px}
.cart{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start;margin-bottom:40px}
.cart-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cart-line{display:grid;grid-template-columns:96px 1fr auto auto auto 36px;gap:16px;align-items:center;background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);padding:10px 12px}
.cart-line.gone{opacity:.65}
.cart-img img{width:96px;height:96px;object-fit:contain;background:var(--photo);border-radius:4px}
.cart-img img.noimg{object-fit:contain;padding:14px}
.cart-name{font-weight:600;display:block;margin-bottom:4px}
a.cart-name:hover{color:var(--accent-ink)}
.cart-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--muted)}
.cart-meta b{color:var(--text2);font-weight:500}
.cart-warn{margin:6px 0 0;color:var(--bad);font-size:13px}
.cart-price{text-align:right;white-space:nowrap}
.cart-price s{display:block;color:var(--muted);font-size:13px}
.cart-qty{display:flex;align-items:center;border:1px solid var(--line2);border-radius:4px}
.cart-qty button{width:34px;height:34px;background:none;border:0;font-size:18px;color:var(--text)}
.cart-qty button:hover:not(:disabled){color:var(--accent-ink)}
.cart-qty button:disabled{color:var(--off);cursor:not-allowed}
.cart-qty span{min-width:28px;text-align:center;font-weight:600}
.cart-sum{font:500 18px var(--head);white-space:nowrap;min-width:90px;text-align:right}
.cart-del button{width:34px;height:34px;background:none;border:0;color:var(--muted);display:flex;align-items:center;justify-content:center}
.cart-del button:hover{color:var(--bad)}
.cart-total{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px;position:sticky;top:90px}
.cart-total-row{display:flex;justify-content:space-between;gap:12px}
.cart-total-sum{font:500 22px var(--head);border-top:1px solid var(--line);padding-top:12px}
.cart-total p{margin:0}
.cart-total .link{justify-content:center}
/* промокод в корзине (этап 4б) */
.cart-discount b{color:var(--ok)}
.promo summary{cursor:pointer;color:var(--accent-ink);font-size:14px;list-style:none}
.promo summary::-webkit-details-marker{display:none}
.promo-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
/* Яндекс SmartCaptcha «Я не робот» (shop/partials/captcha) */
.captcha{flex-basis:100%;min-height:102px;margin:6px 0}
/* Капча Яндекса всегда светлая (в консоли Яндекса «динамическая цветовая схема» выключена; тему из сайта ей задать нельзя) — в тёмной теме сайта переворачиваем цвета */
html[data-theme=dark] .captcha iframe{filter:invert(.84) hue-rotate(180deg);border-radius:10px}
/* пока «Я не робот» не отмечено — рамка нашего оранжевого мигает; нажали кнопку без галочки — ярче (captcha-need) */
.captcha-box{display:block;border-radius:11px}
.captcha-wait .captcha-box{animation:capWait 1.6s ease-in-out infinite}
.captcha-need .captcha-box{animation:ppNeed .75s ease-in-out 4,capWait 1.6s ease-in-out 3s infinite}
@keyframes capWait{0%,100%{box-shadow:0 0 0 2px rgba(247,162,27,.35)}50%{box-shadow:0 0 0 3px var(--accent),0 0 14px 2px rgba(247,162,27,.55)}}
.captcha-msg{display:block;margin-top:6px;font-weight:700;color:var(--accent-ink)}
.captcha-msg[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.captcha-wait .captcha-box,.captcha-need .captcha-box{animation:none;box-shadow:0 0 0 3px var(--accent)}}
.promo-form .captcha{margin:0}
.promo-form input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line2);border-radius:4px;background:var(--bg2);color:var(--text);text-transform:uppercase}
.promo-form .btn{padding:9px 14px;font-size:14px}
.promo-on{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.promo-msg{margin:0}.promo-good{color:var(--ok)}.promo-bad{color:var(--bad)}
@media (max-width:900px){
  .cart{grid-template-columns:1fr}
  .cart-total{position:static}
  .cart-line{grid-template-columns:72px 1fr auto;grid-template-areas:"img info del" "img price price" "qty qty sum";gap:8px 12px}
  .cart-img{grid-area:img}.cart-info{grid-area:info}.cart-del{grid-area:del;align-self:start}
  .cart-price{grid-area:price;text-align:left}.cart-price s{display:inline;margin-left:8px}
  .cart-qty{grid-area:qty;justify-self:start}.cart-sum{grid-area:sum;align-self:center}
  .cart-img img{width:72px;height:72px}
  .cart-title{font-size:26px}
}
/* Окошко «Товар в корзине» после нажатия «В корзину» */
.cart-toast{position:fixed;left:50%;bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 18px);transform:translateX(-50%);z-index:95;background:var(--bg2);border:1px solid var(--accent);border-radius:var(--r);box-shadow:var(--pop-shadow);padding:12px 16px;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px)}
.cart-toast a{color:var(--accent-ink);font-weight:600;white-space:nowrap}
.cart-toast.bad{border-color:var(--bad)}

/* ===== Оформление заказа и страница заказа ===== */
.cart-note.bad{border-left-color:var(--bad)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.co-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.co-box{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);padding:16px 18px;margin:0;min-width:0}
.co-box legend,.co-h{font:500 18px var(--head);text-transform:uppercase;padding:0;margin:0 0 10px;width:100%}
.co-box legend{float:left}
.co-box legend+*{clear:both}
.fld{display:flex;flex-direction:column;gap:5px;font-size:14px;color:var(--text2);margin-bottom:12px;flex:1;min-width:0}
.fld input,.fld textarea{background:var(--bg);border:1px solid var(--line2);border-radius:4px;padding:10px 12px;font:inherit;font-size:16px;color:var(--text);width:100%}
.fld textarea{resize:vertical}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--accent)}
.fld input.err{border-color:var(--bad)}
.fld small{font-size:12px}
.fld-err{color:var(--bad);font-size:13px}
.fld-row{display:flex;gap:14px}
.co-opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line2);border-radius:4px;padding:10px 12px;margin-bottom:8px;cursor:pointer}
.co-opt:has(input:checked){border-color:var(--accent)}
.co-opt input{margin-top:4px;accent-color:var(--accent)}
.co-opt span{display:flex;flex-direction:column}
.co-opt small{color:var(--muted)}
.co-cdek{margin-top:10px}
.co-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.co-lines li{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.co-lines li span{display:flex;flex-direction:column;min-width:0}
.co-lines small{color:var(--muted);font-size:12px}
.co-lines b{white-space:nowrap}
.co-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text2)}
.co-consent input{margin-top:3px;accent-color:var(--accent);flex:none}
.co-consent a{color:var(--accent-ink);text-decoration:underline}
.order-ok{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid var(--ok);border-radius:var(--r);padding:16px 18px;margin:6px 0 18px}
.order-ok .i{width:40px;height:40px;color:var(--ok)}
.order-ok h1{font-size:28px;margin:0 0 6px}
.order-ok p{margin:0}
.order-status{font-size:16px;margin-bottom:6px;display:flex;flex-wrap:wrap;gap:6px 12px}
.order-status b{color:var(--accent-ink)}
.order-status .st-paid,.order-status .st-done{color:var(--ok)}
.order-status .st-cancelled{color:var(--muted)}
.co-box .co-h{margin-top:12px}
.co-box section>.co-h:first-child,.co-box>.co-h:first-child{margin-top:0}
.order-details{background:var(--bg);border:1px dashed var(--line2);border-radius:4px;padding:12px 14px;font-family:ui-monospace,Consolas,monospace;font-size:14px;margin:0 0 12px;user-select:all}
.order-reserve{border-left:3px solid var(--accent);padding-left:12px}
@media (max-width:640px){.fld-row{flex-direction:column;gap:0}.order-ok h1{font-size:22px}}

/* ===== Вход и личный кабинет ===== */
.auth{max-width:460px;margin:0 auto 40px}
.auth .co-box{display:flex;flex-direction:column;gap:4px}
.auth .co-box p{margin:0 0 10px}
.auth-btn{margin-top:10px;width:100%}
.auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:12px}
.acc-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.acc-orders,.acc-addr{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.acc-orders li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:8px 0}
.acc-orders li a{display:flex;flex-direction:column}
.acc-orders li a:hover b{color:var(--accent-ink)}
.acc-orders .muted{font-size:13px}
.acc-st{font-size:13px;color:var(--accent-ink);white-space:nowrap}
.acc-st.st-paid,.acc-st.st-done{color:var(--ok)}
.acc-st.st-cancelled{color:var(--muted)}
.acc-sum{white-space:nowrap}
.acc-addr li{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:6px 0}
.acc-addr form{margin:0}
.acc-addr-form{margin-top:12px}
.fld-select{background:var(--bg);border:1px solid var(--line2);border-radius:4px;padding:10px 12px;font-size:16px;color:var(--text);width:100%}
.co-saved{margin-bottom:10px}
@media (max-width:640px){.acc-orders li{grid-template-columns:1fr auto}.acc-sum{grid-column:2}}

/* Фото на весь экран */
.card-zoom{position:absolute;right:6px;bottom:6px;z-index:1;width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.5);color:#fff;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.85}
.card-zoom svg{width:16px;height:16px;fill:#fff}
.card-zoom:hover{opacity:1;background:rgba(0,0,0,.75)}
.pp-main img:not(.noimg){cursor:zoom-in}
/* Фото на весь экран: компактный блок по центру — подпись, квадрат с фото, сразу справа колонка цветов,
   снизу ряд миниатюр (место под него есть всегда, чтобы фото не прыгало по размеру); пустое место вокруг закрывает окно */
.lb{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;--s:min(calc(100vh - 150px),calc(100vw - 140px))}
.lb[hidden]{display:none}
.lb-wrap{display:grid;grid-template-columns:var(--s) auto;grid-template-rows:22px var(--s) 64px;grid-template-areas:"c c" "s cols" "th .";gap:8px 10px}
.lb-stage{grid-area:s;position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
.lb-img{width:100%;height:100%;object-fit:contain;border-radius:4px}
.lb button{border:0;cursor:pointer;padding:0}
.lb-p,.lb-n,.lb-x{position:absolute;background:rgba(255,255,255,.15);color:#fff;font:400 28px/1 var(--head);width:44px;height:44px;border-radius:50%}
.lb-p:hover,.lb-n:hover,.lb-x:hover{background:rgba(255,255,255,.3)}
.lb-p{left:6px;top:50%;transform:translateY(-50%)}
.lb-n{right:6px;top:50%;transform:translateY(-50%)}
.lb-x{top:14px;right:14px;z-index:2}
.lb-c{grid-area:c;color:#fff;opacity:.85;font-size:14px;text-align:center;line-height:22px}
.lb-th{grid-area:th;display:flex;gap:8px;justify-content:center;overflow-x:auto}
.lb-th button,.lb-cols button{flex:none;width:60px;height:60px;border:2px solid transparent;border-radius:4px;overflow:hidden;background:var(--photo);opacity:.65}
.lb-th button.on,.lb-cols button.on{border-color:var(--accent);opacity:1}
.lb-th button:hover,.lb-cols button:hover{opacity:1}
.lb-th img,.lb-cols img{width:100%;height:100%;object-fit:cover;display:block}
.lb-cols{grid-area:cols;display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:var(--s)}
.lb-cols[hidden]{display:none}
@media (max-width:700px){
  .lb{--s:min(calc(100vw - 20px),calc(100vh - 230px))}
  .lb-wrap{grid-template-columns:var(--s);grid-template-rows:22px 56px var(--s) 56px;grid-template-areas:"c" "cols" "s" "th"}
  .lb-cols{flex-direction:row;overflow-x:auto;max-height:none;max-width:var(--s)}
  .lb-th button,.lb-cols button{width:52px;height:52px}
}

/* Похожие товары: карусель под описанием */
.similar{margin-top:40px}
.sim-nav{display:flex;gap:8px}
.sim-nav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line,rgba(128,128,128,.4));background:transparent;color:inherit;font:400 22px/1 var(--head);cursor:pointer;padding:0}
.sim-nav button:hover{border-color:var(--accent);color:var(--accent-ink)}
.sim-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:8px}
.sim-row .card{flex:0 0 calc((100% - 14px*4)/5);scroll-snap-align:start;min-width:0}
@media (max-width:900px){.sim-row .card{flex-basis:calc((100% - 14px)/2.3)}}

/* Прилипшая шапка на ПК: вместо полного логотипа — эмблема без текста (как на телефоне), рядом кнопка «Категории».
   Ширина места под логотип подогнана так, чтобы строка поиска и значки справа не сдвигались: логотип 66px × (1200/260) − кнопка (≈146px) − промежуток */
@media (min-width:901px){
  .head-fixed .head-row{gap:28px}
  .head-fixed .logo{width:auto}
  /* кнопка шире на ту ширину, что освободилась рядом с эмблемой: строка поиска остаётся на месте */
  .head-fixed .cats-toggle{width:206px;justify-content:center}
  .head-fixed .logo .logo-full{display:none}
  .head-fixed .logo .logo-mini{display:block;height:44px;width:auto}
}
/* Светлая тема: оранжевый логотип чуть темнее и с лёгкой тенью, чтобы читался на светлом (убрать блок — вернётся как было) */
[data-theme=light] .logo img,[data-theme=light] .foot-logo,[data-theme=light] .hero-emb{
  filter:brightness(.9) saturate(1.2) drop-shadow(0 1px 1px rgba(0,0,0,.3));
}

/* Телефон: переключатель «1 или 2 товара в ряд» */
.tool-view-m{display:none;gap:2px}
.tool-view-m button{width:36px;height:34px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:4px;color:var(--muted);padding:0}
.tool-view-m svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.tool-view-m button.on{border-color:var(--line2);color:var(--accent-ink)}
@media (max-width:900px){
  .tool-view-m{display:flex}
  html[data-mcols="1"] .grid,html[data-mcols="1"] .grid.cols-5{--cols:1!important}
  /* одна карточка на экране — на 10% меньше по ширине и высоте, по центру */
  html[data-mcols="1"] .grid{width:90%;margin-inline:auto}
  html[data-mcols="1"] .grid .card-ph{margin:8px 8px 0}
  html[data-mcols="1"] .grid .card-name{font-size:17px}
  html[data-mcols="1"] .grid .card-price b{font-size:22px}
}

/* Меню «Каталог» на телефоне: кнопки внизу читаются в обеих темах */
.drawer-links .soc-brands{color:var(--text);background:var(--card2);border:1px solid var(--line2)}
.drawer-links .soc-brands .i{color:var(--accent-ink)}
.drawer-links .soc-vk .i{color:#fff}
.drawer-links .soc-bonus .i{color:#1a1a1a}

/* Телефон: строка «Сортировка / вид / Фильтры» не шире экрана */
@media (max-width:900px){
  .toolbar{gap:8px;max-width:100%}
  .tool-sort{min-width:0}
  .tool-sort > span{display:none}
  .tool-filters{padding:7px 10px;white-space:nowrap}
}

/* История просмотров: узкая лента маленьких карточек над новинками */
.viewed{margin:22px 0 6px}
.viewed .ribbon-head h2{font-size:22px}
.viewed-tools{display:flex;align-items:center;gap:16px}
.viewed-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding:3px 3px 6px}
.vm{flex:0 0 132px;scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;background:var(--card);border-radius:var(--r);padding:6px;min-width:0;color:inherit}
.vm{border:1px solid transparent}
.vm:hover{border-color:var(--accent)}
.vm-ph{display:block;aspect-ratio:1/1;background:var(--photo);border-radius:4px;overflow:hidden}
.vm-ph img{width:100%;height:100%;object-fit:contain}
.vm-ph img.noimg{object-fit:scale-down;opacity:.25}
.vm-name{font:500 12px/1.25 var(--head);text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:30px}
.vm-price{font:500 14px var(--head);color:var(--accent-ink)}
@media (max-width:900px){.viewed-tools .sim-nav{display:none}.vm{flex-basis:112px}}

.search-note{margin:6px 0;padding:8px 12px;border-left:3px solid var(--accent);background:var(--card);border-radius:4px;font-size:14px}

/* «Похожие товары»: без кнопки «Размеры в наличии», карточки компактнее */
.sim-row .card-sizes-btn,.sim-row .card-sizes{display:none}
.sim-row .card-body{padding:8px 10px 10px}
.sim-row .card-name{min-height:0}
@media (max-width:900px){
  .sim-row .card{flex-basis:calc((100% - 10px)/2.2)}
  .sim-row{gap:10px}
  .sim-row .card-body{padding:6px 8px 8px;gap:2px}
  .sim-row .card-name{font-size:13px;-webkit-line-clamp:2}
  .sim-row .card-sub{font-size:11px}
  .sim-row .card-art{display:none}
  .sim-row .card-price b{font-size:16px}
  .sim-row .card-ph{margin:5px 5px 0}
}

/* Стрелки в кружках — по центру */
.sim-nav button,.card-arrow{display:flex;align-items:center;justify-content:center;padding:0;line-height:0}
.sim-nav button .i{width:18px;height:18px}
.card-arrow .i{width:16px;height:16px}

/* Описание товара: подзаголовки, списки и характеристики, которые сайт выделяет сам (App\Support\DescriptionFormatter) */
.rich .desc-h{font:500 16px/1.3 var(--head);text-transform:uppercase;letter-spacing:.02em;color:var(--text);margin:22px 0 8px;padding-left:10px;border-left:3px solid var(--accent)}
.rich .desc-ul{list-style:none;padding-left:0;margin:0 0 12px}
.rich .desc-ul li{position:relative;padding-left:18px;margin:0 0 5px}
.rich .desc-ul li::before{content:'';position:absolute;left:3px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.rich .desc-spec{width:100%;max-width:640px;border-collapse:collapse;margin:0 0 14px}
.rich .desc-spec th,.rich .desc-spec td{border:0;border-bottom:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top;font-weight:400}
.rich .desc-spec th{width:42%;color:var(--muted)}

.rich .desc-lead{font-weight:500;color:var(--text);font-size:16px}

/* размер, которого осталось мало: оранжевая точка в углу кнопки */
.sz{position:relative}
.sz.low::after{content:'';position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--accent)}

.pp-back{display:inline-flex;align-items:center;gap:4px;margin:2px 0 10px;font:400 14px var(--head);text-transform:uppercase;color:var(--accent-ink)}
.pp-back .i{width:16px;height:16px}
.pp-back:hover{text-decoration:underline}

/* Мини-корзина при наведении на «Корзина» (только ПК) */
.cart-wrap{position:relative;display:flex}
.head-icons>.cart-wrap>a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;text-transform:uppercase;color:var(--muted);background:none;border:0;padding:0}
.head-icons>.cart-wrap>a:hover{color:var(--text)}
.head-icons>.cart-wrap>a .i{transition:transform .2s}
.head-icons>.cart-wrap>a:hover .i{transform:translateY(-2px) scale(1.12)}
.cart-mini{position:absolute;right:0;top:100%;width:340px;max-width:calc(100vw - 24px);padding-top:10px;z-index:70;text-transform:none;font-size:14px;color:var(--text)}
.cart-mini[hidden]{display:none}
.cart-mini-box{background:var(--bg2);border:1px solid var(--line2);border-top:2px solid var(--accent);border-radius:var(--r);box-shadow:var(--pop-shadow);padding:12px}
.cart-mini-empty{margin:6px 0 10px;text-align:center;color:var(--muted)}
.cart-mini-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:10px}
.cart-mini-list li{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center}
.cart-mini-list img{width:48px;height:48px;object-fit:cover;border-radius:4px;background:var(--photo)}
.cart-mini-list img.noimg{object-fit:contain;padding:6px}
.cart-mini-list b{font-weight:600;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cart-mini-list span{display:block;color:var(--muted);font-size:12px;line-height:1.35}
.cart-mini-more{margin:0 0 8px;color:var(--muted);font-size:13px}
.cart-mini-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:8px;border-top:1px solid var(--line);margin-bottom:10px}
.cart-mini-total b{font:600 18px var(--head)}
.cart-mini-btns{display:grid;gap:8px}
.cart-mini-btns .btn,.cart-mini-btns .btn-ghost{width:100%;padding:9px 12px;font-size:14px}

/* «В корзину» без выбранного размера: блок выбора мигает жёлтой рамкой */
@keyframes ppNeed{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 4px var(--accent),0 0 18px 4px var(--accent)}}
.pp-opt.pp-need{border-radius:var(--r);outline:3px solid var(--accent);outline-offset:6px;animation:ppNeed .75s ease-in-out 4}
.pp-need-msg{font-weight:700;color:var(--accent-ink)}
@media (prefers-reduced-motion:reduce){.pp-opt.pp-need{animation:none}}

/* Режим сотрудника: кнопка «Штрихкод» напротив размера */
.card-size-row{display:flex;gap:6px;align-items:stretch}
.card-size-row a{flex:1}
.card-bc,.adm-bcbtn{display:none;align-items:center;justify-content:center;border:1px solid var(--line2);border-radius:3px;background:transparent;color:inherit;cursor:pointer;padding:0 8px}
.card-bc:hover,.adm-bcbtn:hover{border-color:var(--accent);color:var(--accent-ink)}
.card-bc svg,.adm-bcbtn svg{width:18px;height:18px}
[data-admin=on] .card-bc{display:inline-flex}
.adm-pickrow{display:inline-flex;gap:3px;align-items:stretch}
.adm-stock-list .adm-pickrow button{margin:0}

/* Мини-корзина: крестик «Убрать» */
.cart-mini-list li{position:relative}
.cart-mini-x{position:absolute;top:-6px;right:-6px;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--text2);font:400 22px/1 var(--head);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.cart-mini-x:hover{color:var(--text);background:var(--card2)}
.cart-mini-x:disabled{opacity:.4}
.cart-mini-list li>div{padding-right:18px}