/* Дизайн-система 5lb (редизайн с 22.10.2026).
   Токены — единственное место, где задаются цвета, шрифт, радиусы и отступы
   нового дизайна. Старый style.css подключён раньше и постепенно уходит:
   переводим шаблоны на эти токены и общие компоненты (.btn, .hdr, .hero…),
   а не пишем значения в <style> каждой страницы. Документация по исходному
   состоянию: https://claude.ai/artifact/NPrfTfw1obfUuaQDo75QqG */
/* Montserrat — шрифт заголовков баннеров (22.10.2026). Свои файлы, а не Google:
   вариативный woff2 (все начертания в одном), кириллица и латиница. Лицензия OFL —
   assets/fonts/montserrat/OFL.txt. */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/fonts/montserrat/montserrat-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/fonts/montserrat/montserrat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  /* бренд */
  --c-brand:#dd550a;          /* фирменный оранжевый: главные кнопки, акценты */
  --c-brand-hover:#e8661c;
  --c-brand-press:#c94b0c;
  --c-brand-soft:#fdf1e6;     /* подложка клубной цены, мягкие акценты */
  /* текст и поверхности (светлая часть страницы) */
  --c-ink:#1d1d1f;            /* заголовки, цены */
  --c-text:#333333;           /* основной текст */
  --c-muted:#6e6e73;          /* вторичный текст */
  --c-line:#e7e7e7;           /* границы, разделители */
  --c-bg:#fcfcfc;             /* фон страницы */
  --c-surface:#ffffff;        /* карточки, поля */
  /* тёмная шапка и баннеры */
  --c-dark:#0f0f10;           /* шапка */
  --c-dark-2:#1c1c1f;         /* поля и кнопки на тёмном */
  --c-dark-3:#2a2a2e;         /* наведение на тёмном */
  --c-dark-line:#26262a;
  --c-on-dark:#f5f5f7;        /* текст на тёмном */
  --c-on-dark-muted:#a1a1a6;
  /* смысловые */
  --c-ok:#1a9d4b;  --c-ok-bg:#e9f7ee;
  --c-info:#005bff; --c-info-bg:#e8f1ff;   /* Ozon */
  --c-warn:#8a4b00; --c-warn-bg:#fff4e0;
  --c-danger:#c62828; --c-danger-bg:#ffe5e3;
  /* шрифт и шкала */
  --f-body:"Rubik",Arial,sans-serif;
  --f-display:"Montserrat","Rubik",Arial,sans-serif;   /* крупные заголовки баннеров */
  --t-xs:12px; --t-sm:14px; --t-md:16px; --t-lg:20px; --t-xl:24px; --t-2xl:32px; --t-3xl:44px;
  /* отступы: 4 · 8 · 12 · 16 · 24 · 32 · 48 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
  /* радиусы */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --shadow-pop:0 12px 32px rgba(15,15,16,.18);
  --ease:.15s ease;
  /* высота фиксированной шапки — от неё отступает main */
  --hdr-main:64px; --hdr-nav:44px; --hdr-h:calc(var(--hdr-main) + var(--hdr-nav) + 1px);
}
@media screen and (max-width:767px){
  :root{--hdr-main:56px; --hdr-nav:40px}
}

/* ---------- Кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;
  padding:0 var(--s-5);border-radius:var(--r-sm);border:1px solid transparent;
  font:500 var(--t-md)/1 var(--f-body);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--ease),border-color var(--ease),color var(--ease)}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn--primary{background:var(--c-brand);color:#fff}
.btn--primary:hover{background:var(--c-brand-hover);color:#fff;text-decoration:none}
.btn--primary:active{background:var(--c-brand-press)}
.btn--on-dark{background:transparent;color:var(--c-on-dark)}
.btn--on-dark:hover{color:#fff;background:rgba(255,255,255,.08);text-decoration:none}

/* ---------- Шапка ---------- */
header.hdr{position:fixed;top:0;left:0;right:0;z-index:30;height:auto;background:var(--c-dark);
  box-shadow:none;border-bottom:1px solid var(--c-dark-line);font-family:var(--f-body)}
main{padding-top:var(--hdr-h)}
.hdr__row{display:flex;align-items:center;gap:var(--s-4);height:var(--hdr-main)}
.hdr__logo{display:flex;align-items:center;flex:0 0 auto;height:100%}
.hdr__logo img{height:40px;width:auto;display:block}
.hdr__catalog{display:inline-flex;align-items:center;gap:var(--s-2);height:40px;padding:0 var(--s-4);
  border-radius:10px;background:var(--c-dark-2);color:var(--c-on-dark);font-size:15px;font-weight:500;
  text-decoration:none;flex:0 0 auto;transition:background var(--ease)}
.hdr__catalog:hover{background:var(--c-dark-3);color:#fff;text-decoration:none}
.hdr__catalog svg{width:18px;height:18px}
.hdr__search{flex:1 1 auto;max-width:560px;min-width:0}
.hdr__search form{position:relative;margin:0}
.hdr__search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);
  color:var(--c-on-dark-muted);pointer-events:none}
.hdr__search input{width:100%;height:40px;border-radius:10px;border:1px solid var(--c-dark-3);
  background:var(--c-dark-2);color:var(--c-on-dark);font:400 15px/1 var(--f-body);padding:0 14px 0 42px;
  outline:none;transition:border-color var(--ease)}
.hdr__search input::placeholder{color:var(--c-on-dark-muted)}
.hdr__search input:focus{border-color:var(--c-brand)}
.hdr__spacer{flex:1 1 0}
.hdr__city{flex:0 0 auto}
.hdr .city-pick>summary{display:flex;align-items:center;gap:6px;color:var(--c-on-dark);font-size:15px;
  font-weight:400;height:40px;padding:0 6px;border-radius:var(--r-sm)}
.hdr .city-pick>summary:hover{background:var(--c-dark-2);text-decoration:none;color:#fff}
.hdr .city-pick>summary::after{content:none}
.hdr .city-pick>summary svg{width:18px;height:18px;flex:0 0 auto}
.hdr .city-pick>summary .hdr__chev{width:14px;height:14px;opacity:.7}
.hdr .city-pick__list{left:auto;right:0;top:calc(100% + 8px);box-shadow:var(--shadow-pop)}
.hdr__icons{display:flex;align-items:center;gap:var(--s-1);flex:0 0 auto}
.hdr__icon{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;
  color:var(--c-on-dark);transition:background var(--ease)}
.hdr__icon:hover{background:var(--c-dark-2);color:#fff}
.hdr__icon svg{width:24px;height:24px}
.hdr__badge{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--c-brand);color:#fff;font:600 11px/18px var(--f-body);text-align:center}
.hdr__nav{border-top:1px solid var(--c-dark-line)}
.hdr__nav .container{display:flex;align-items:center;gap:var(--s-6);height:var(--hdr-nav);overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hdr__nav .container::-webkit-scrollbar{display:none}
.hdr__nav a{color:var(--c-on-dark-muted);font-size:15px;font-weight:400;white-space:nowrap;flex:0 0 auto;
  text-decoration:none;transition:color var(--ease)}
.hdr__nav a:hover,.hdr__nav a[aria-current="page"]{color:#fff;text-decoration:none}

@media screen and (max-width:767px){
  .hdr__row{gap:var(--s-3)}
  .hdr__logo img{height:32px}
  .hdr__catalog,.hdr__icons,.hdr__spacer{display:none}   /* каталог, избранное и корзина — в нижнем меню */
  .hdr .city-pick>summary{font-size:14px;padding:0 2px;gap:4px}
  .hdr .city-pick>summary .hdr__city-name{max-width:88px;overflow:hidden;text-overflow:ellipsis}
  .hdr .city-pick>summary .hdr__chev{display:none}
  .hdr__search input{height:38px;font-size:14px}
  .hdr__nav .container{gap:var(--s-5);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .hdr__nav .container::after{content:"";flex:0 0 16px}
}
@media screen and (max-width:379px){
  .hdr .city-pick>summary .hdr__city-name{display:none}
}
@media screen and (max-width:359px){
  .hdr__logo img{height:28px}
}

/* ---------- Баннер главной (index.html) ----------
   Фон — картинка без текста, текст и кнопки — вёрстка: их видят поиск и
   нейросети, и текст можно менять по городу. На телефоне картинка сверху,
   текст под ней. */
.hero{position:relative;background:var(--c-dark);color:var(--c-on-dark);overflow:hidden}
/* Рамка баннера не шире картинки (2000×667 → 1860×620): при мелком масштабе
   браузера и на широких мониторах фон не растягивается и не приближается,
   по бокам — тот же тёмный фон, края картинки в него растворяются. */
.hero__frame{position:relative;max-width:1860px;margin:0 auto}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.hero__in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:var(--s-4);min-height:clamp(380px, 33.35vw, 620px);padding-top:var(--s-7);padding-bottom:var(--s-7)}
@media screen and (min-width:1861px){
  .hero__frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,var(--c-dark) 0,rgba(15,15,16,0) 8%,rgba(15,15,16,0) 92%,var(--c-dark) 100%)}
  .hero__in{z-index:2}
}
.hero__eyebrow{margin:0;font:500 clamp(15px, 1.25vw, 18px)/1.3 var(--f-display);color:var(--c-on-dark)}
.hero__title{margin:0;font:800 clamp(36px, 4.45vw, 64px)/1.05 var(--f-display);letter-spacing:-.03em;color:#fff}
.hero__title span{display:block}
.hero__sub{margin:0;max-width:24em;font:400 clamp(16px, 1.67vw, 24px)/1.4 var(--f-display);color:#e8e8ea}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-3)}
.hero .bear-hunt-banner{position:absolute;right:16px;bottom:12px;z-index:2}
.hero .bear-hunt-bubble{position:absolute;right:14px;bottom:86px;z-index:3}
@media screen and (max-width:1199px){
  /* банки уже ближе к тексту — слева притемняем фон */
  .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(10,10,11,.88) 0%,rgba(10,10,11,.6) 42%,rgba(10,10,11,0) 70%)}
  .hero__in{z-index:2}
}
@media screen and (max-width:767px){
  /* Компактно, примерно полэкрана: текст поверх картинки на затемнении снизу,
     чтобы под баннером сразу были видны товары. Раньше картинка и текст шли
     друг под другом и занимали весь первый экран. */
  /* картинка с банками (кадр 960×562) — во всю ширину сверху, целиком; текст
     ложится на тёмный камень под банками */
  .hero__bg{height:auto;bottom:auto;object-fit:fill}
  .hero::before{background:linear-gradient(180deg,rgba(10,10,11,0) 0,rgba(10,10,11,0) calc(58.5vw - 90px),
    rgba(10,10,11,.85) calc(58.5vw - 20px),#0a0a0b calc(58.5vw + 30px))}
  .hero__in{min-height:calc(58.5vw + 170px);justify-content:flex-end;gap:var(--s-2);
    padding-top:var(--s-5);padding-bottom:var(--s-4)}
  .hero__eyebrow{display:none}   /* ложился на банку; заголовка достаточно */
  .hero__title{font-size:clamp(26px, 8vw, 32px);letter-spacing:-.02em}
  .hero__sub{font-size:15px;max-width:none;color:#d9d9dc}
  .hero__actions{margin-top:var(--s-2);align-items:center;gap:var(--s-2)}
  .hero__actions .btn{height:42px;font-size:15px;padding:0 var(--s-4)}
  .hero__actions .btn--on-dark{padding:0 var(--s-2)}
  /* медведь — маленький в углу, без подписи: не закрывает банки */
  .hero .bear-hunt-banner,.hero .bear-hunt-banner.found{width:48px!important;height:48px!important;
    max-width:48px!important;top:10px;right:10px;bottom:auto}
  .hero .bear-hunt-bubble{display:none}
}
@media (prefers-reduced-motion:reduce){
  .btn,.hdr__catalog,.hdr__icon,.hdr__search input,.hdr__nav a{transition:none}
}

/* ---------- Плашка «Ваш город — …?» (components/city_bar.html) ---------- */
.hdr__city{position:relative}
.city-bar{position:absolute;z-index:25;top:calc(100% + 14px);right:-8px;width:440px;
  background:var(--c-dark-2);border:1px solid var(--c-dark-3);border-radius:var(--r-md);
  box-shadow:var(--shadow-pop);color:var(--c-on-dark);font-family:var(--f-body);text-align:left}
/* уголок-указатель на переключатель города */
.city-bar::before{content:"";position:absolute;top:-7px;right:44px;width:12px;height:12px;transform:rotate(45deg);
  background:var(--c-dark-2);border-left:1px solid var(--c-dark-3);border-top:1px solid var(--c-dark-3)}
.city-bar[hidden]{display:none}
.city-bar__in{display:grid;grid-template-columns:1fr auto;gap:var(--s-3) var(--s-3);padding:var(--s-4) var(--s-4) var(--s-3)}
.city-bar__q{grid-column:1;font-size:var(--t-lg);line-height:1.3;align-self:center}
.city-bar__q b{font-weight:700}
.city-bar__close{grid-column:2;grid-row:1;width:36px;height:36px;margin:-6px -6px 0 0;display:grid;place-items:center;
  border:0;border-radius:var(--r-sm);background:none;color:var(--c-on-dark-muted);cursor:pointer}
.city-bar__close:hover{color:#fff;background:var(--c-dark-3)}
.city-bar__close svg{width:22px;height:22px}
.city-bar__actions{grid-column:1 / -1;display:grid;grid-template-columns:1.25fr 1fr;gap:var(--s-3)}
.city-bar__btn{height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 var(--s-4);
  border-radius:var(--r-sm);border:1px solid #4a4a4f;background:transparent;color:var(--c-on-dark);
  font:500 var(--t-md)/1 var(--f-body);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--ease),border-color var(--ease)}
.city-bar__btn:hover{background:var(--c-dark-3);color:#fff;text-decoration:none}
.city-bar__btn_main{background:var(--c-brand);border-color:var(--c-brand);color:#fff;font-weight:600}
.city-bar__btn_main:hover{background:var(--c-brand-hover);border-color:var(--c-brand-hover)}
.city-bar__link{grid-column:1 / -1;justify-self:start;border:0;background:none;padding:2px 0;cursor:pointer;
  font:400 15px/1.3 var(--f-body);color:var(--c-on-dark-muted);border-bottom:1px dashed #5a5a5f}
.city-bar__link:hover{color:#fff;border-bottom-color:#fff}
.city-bar__link:disabled{cursor:default}
/* ответы определения города (say() в city_bar.html): вопрос и кнопка в одну колонку */
.city-bar__in > .city-bar__btn{grid-column:1 / -1}
@media screen and (max-width:767px){
  .hdr__city{position:static}
  .city-bar{position:fixed;right:var(--s-2);left:var(--s-2);width:auto;top:calc(var(--hdr-h) + var(--s-2))}
  .city-bar::before{content:none}
  .city-bar__q{font-size:18px}
  .city-bar__btn{height:44px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.city-bar__btn{transition:none}}

/* ---------- Уведомление о cookie (components/cookie_bar.html) ---------- */
.cookie-bar{position:fixed;z-index:24;left:max(var(--s-4), env(safe-area-inset-left, 0px));
  bottom:calc(var(--s-4) + env(safe-area-inset-bottom, 0px));width:min(460px, calc(100vw - 2 * var(--s-4)));
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s-3) var(--s-4);padding:var(--s-4);
  background:var(--c-dark-2);border:1px solid var(--c-dark-3);border-radius:var(--r-md);box-shadow:var(--shadow-pop);
  color:var(--c-on-dark);font-family:var(--f-body)}
.cookie-bar[hidden]{display:none}
.cookie-bar__text{margin:0;font-size:var(--t-sm);line-height:1.45;color:var(--c-on-dark)}
.cookie-bar__text a{color:var(--c-on-dark);text-decoration:underline;text-decoration-color:#6a6a70;text-underline-offset:2px}
.cookie-bar__text a:hover{color:#fff;text-decoration-color:#fff}
.cookie-bar__ok{height:44px;padding:0 var(--s-5)}
@media screen and (max-width:767px){
  /* над нижним меню (#mmenu, 50px) */
  .cookie-bar{left:var(--s-2);right:var(--s-2);width:auto;padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);
    bottom:calc(50px + var(--s-2) + env(safe-area-inset-bottom, 0px))}
  .cookie-bar__text{font-size:13px}
  .cookie-bar__ok{height:40px;padding:0 var(--s-4);font-size:15px}
}

/* ---------- Выпадающий каталог (base.html #catmenu, catalog/menu.html) ---------- */
.catmenu{position:absolute;left:0;right:0;top:100%;z-index:28;background:var(--c-dark-2);
  border-top:1px solid var(--c-dark-line);box-shadow:0 24px 48px rgba(0,0,0,.35);
  max-height:calc(100vh - var(--hdr-h) - 40px);overflow:auto;font-family:var(--f-body);overscroll-behavior:contain}
.catmenu[hidden],.catmenu-backdrop[hidden]{display:none}
.catmenu-backdrop{position:fixed;left:0;right:0;bottom:0;top:var(--hdr-h);z-index:20;background:rgba(0,0,0,.45)}
.catmenu__bar{display:none}
.catmenu__in{display:grid;grid-template-columns:minmax(0,320px) minmax(0,320px) minmax(0,1fr);
  padding-top:var(--s-3);padding-bottom:var(--s-4)}
.catmenu__col{min-width:0;padding:0 var(--s-2);border-right:1px solid var(--c-dark-line)}
.catmenu__col:last-child{border-right:0}
.catmenu ul{list-style:none;margin:0;padding:0}
.catmenu__body a{display:flex;align-items:center;gap:var(--s-2);padding:9px 12px;border-radius:var(--r-sm);
  color:var(--c-on-dark);font-size:15px;line-height:1.3;text-decoration:none}
.catmenu__body a span{flex:1 1 auto;min-width:0}
.catmenu__body a i{font-style:normal;font-size:12px;color:var(--c-on-dark-muted);font-variant-numeric:tabular-nums;
  min-width:3.5em;text-align:right;flex:0 0 auto}
/* место под стрелку есть у каждой строки — числа стоят в одну колонку,
   есть у раздела подразделы или нет */
.catmenu__body a::after{content:"";flex:0 0 auto;width:7px;height:7px;margin:0 2px 0 4px;
  border-right:1.6px solid transparent;border-top:1.6px solid transparent;transform:rotate(45deg);opacity:.55}
.catmenu__body a.has-kids::after{border-color:currentColor}
.catmenu__body a:hover{background:var(--c-dark-3);color:#fff;text-decoration:none}
.catmenu__body a.is-active{background:var(--c-dark-3);color:var(--c-brand-hover)}
.catmenu__body a.catmenu__parent{color:var(--c-on-dark-muted);font-size:14px}
.catmenu__body a.catmenu__parent:hover{color:#fff}
@media screen and (max-width:767px){
  /* телефон: каталог на весь экран между шапкой и нижним меню, по одному списку */
  .catmenu{position:fixed;top:var(--hdr-h);bottom:calc(50px + env(safe-area-inset-bottom, 0px));max-height:none;
    box-shadow:none;border-top:0}
  .catmenu-backdrop{display:none}
  html.catmenu-open body{overflow:hidden}
  .catmenu__bar{display:flex;align-items:center;gap:var(--s-2);position:sticky;top:0;z-index:1;min-height:52px;
    padding:0 var(--s-2);background:var(--c-dark-2);border-bottom:1px solid var(--c-dark-line);color:var(--c-on-dark)}
  .catmenu__title{flex:1 1 auto;min-width:0;font-size:17px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .catmenu__back,.catmenu__close{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:var(--r-sm);
    background:none;color:var(--c-on-dark);cursor:pointer;flex:0 0 auto}
  .catmenu__back svg,.catmenu__close svg{width:22px;height:22px}
  .catmenu__back[hidden]{display:none}
  .catmenu__back[hidden] + .catmenu__title{padding-left:var(--s-2)}
  .catmenu__in{display:block;padding:var(--s-2) var(--s-2) var(--s-4)}
  .catmenu__col{border:0;padding:0}
  .catmenu__body a{padding:13px 12px;font-size:16px;border-bottom:1px solid var(--c-dark-line);border-radius:0}
  .catmenu__body a.is-active{color:var(--c-on-dark);background:none}
}