/* Собрано scripts/extract_ui_css.py из new-site/style.css.
   Руками не править — правим исходник и пересобираем. */

:root{
  /* поверхности: ни чистого чёрного, ни чистого белого (правило Retool) */
  --bg:#141416;              /* холст страницы */
  --bg-sunken:#0e0e10;       /* утопленные блоки */
  --bg-raised:#1d1e22;       /* карточки — на ступень светлее холста */
  --bg-raised-2:#26272c;     /* поля ввода, вложенные плашки */
  --line:#33353a;            /* границы на тёмном */
  --line-strong:#4a4c52;

  --ink:#e9ebe6;             /* тёплый офф-вайт вместо белого */
  --ink-muted:#9a9d99;
  /* Значение подобрано расчётом контраста, а не на глаз: прежний #6f736f давал
     3.8:1 на холсте и 3.1:1 в полях ввода при норме 4.5:1 — этим цветом набраны
     подписи фильтров, крошки, реквизиты и мелочь на карточках. */
  --ink-faint:#8b8f88;

  --accent:#52d0e8;          /* фирменный циан APA */
  --accent-ink:#06222a;
  --accent-soft:rgba(82,208,232,.12);
  --accent-line:rgba(82,208,232,.38);
  --glow:rgba(82,208,232,.32);
  --flame-1:rgba(82,208,232,.30);   /* «синее пламя» в герое */
  --flame-2:rgba(58,120,255,.16);

  --ok:#4fd18c;
  --ok-soft:rgba(79,209,140,.12);
  --warn:#ffb454;
  --danger:#ff7a7a;

  /* карточки поднимаем светлотой, а не тенью — тени только у плавающих штук */
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 10px 30px -12px rgba(0,0,0,.7);
  --shadow-lg:0 28px 70px -24px rgba(0,0,0,.85);

  /* шрифтовые роли */
  --font-display:'Assuan','Rubik','Onest',system-ui,sans-serif;   /* заголовки */
  --font-body:'Onest',system-ui,sans-serif;         /* текст */
  --font-mono:'JetBrains Mono',ui-monospace,monospace; /* цифры и «интерфейсная» мелочь */

  /* ---- ШКАЛА ОТСТУПОВ: база 4px, как в разборах Refero ----
     Пользуемся ТОЛЬКО этими значениями, никаких случайных чисел по месту. */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px;  --s7:48px;  --s8:64px;  --s9:96px;  --s10:120px;

  --card-pad:var(--s5);          /* Retool: card padding 24 */
  --gap-el:var(--s3);            /* element gap 8–16 */
  --section:clamp(64px,8vw,120px); /* section gap 80–120 */
  --gap:var(--s4);

  /* ---- ТИПОГРАФИЧЕСКАЯ ШКАЛА ----
     размер / интерлиньяж / трекинг — как в разборах: чем крупнее, тем плотнее */
  --t-caption:.75rem;   --lh-caption:1.2;   --tr-caption:.01em;
  --t-small:.875rem;    --lh-small:1.5;
  --t-body:1rem;        --lh-body:1.55;
  --t-lead:1.125rem;    --lh-lead:1.5;      --tr-lead:-.01em;
  --t-h4:1.25rem;       --lh-h4:1.25;
  --t-h3:1.5rem;        --lh-h3:1.2;        --tr-h3:-.01em;
  --t-h2:clamp(1.5rem,2.6vw,2rem);   --lh-h2:1.15;  --tr-h2:-.015em;
  --t-h1:clamp(1.9rem,3.6vw,3rem);   --lh-h1:1.08;  --tr-h1:-.02em;

  /* геометрия — резиновая, БЕЗ узкой колонки */
  --pad:clamp(16px,1.8vw,44px);
  --topbar-h:66px;
  /* радиусы: у кнопок только 0 или таблетка — так у Retool, это читается как инструмент */
  --r-sm:8px;
  --r-md:10px;
  --r-lg:12px;
  --r-xl:16px;
  --r-pill:9999px;
}
:root[data-theme="light"]{
  /* Палитра снята с боевого apacustoms.ru (style-light.css): холодный
     серо-голубой холст, карточки почти того же тона, фото на белом.
     Альберт: «должна быть светло-серой, не белой» и «бело-серый… какая-то
     часть картинок может быть в белых окантовках, остальной фон сероватый».
     Значения контраста проверены расчётом, все выше 4.5:1. */
  --bg:#f5f8fa;              /* холст — серо-голубой, не белый */
  --bg-sunken:#e4eef2;
  --bg-raised:#f3f9fa;       /* карточка почти в тон холсту, её держит рамка */
  --bg-raised-2:#e9f1f4;     /* поля ввода и вложенные плашки */
  --bg-photo:#ffffff;        /* подложка под фото товара — белая окантовка */
  --line:#cfdfe6;
  --line-strong:#a9c4ce;
  --ink:#1a1a1a;
  --ink-muted:#4a5b61;
  --ink-faint:#5d6f76;       /* 4.9:1 на холсте */
  --accent:#0a6b80;
  --accent-ink:#ffffff;
  --accent-soft:rgba(10,107,128,.10);
  --accent-line:rgba(10,107,128,.34);
  --glow:rgba(10,107,128,.22);
  --flame-1:rgba(10,107,128,.16);
  --flame-2:rgba(58,120,255,.08);
  --ok:#0f7550;
  --ok-soft:rgba(15,117,80,.10);
  --shadow-sm:0 1px 2px rgba(16,29,45,.07);
  --shadow-md:0 10px 30px -14px rgba(16,29,45,.22);
  --shadow-lg:0 28px 70px -28px rgba(16,29,45,.30);
}
:root{--topbar-h:60px;}
:root{--side-w:236px;}
@font-face{font-family:'Assuan';src:url('fonts/assuan-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Rubik';src:url('fonts/rubik.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap;}
@font-face{font-family:'Onest';src:url('fonts/onest.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;}
/* Заголовки: узкий Oswald обычным регистром. Капс оставлен только мелким
   подписям-ярлыкам (.eyebrow, .product-cat) — там он читается как интерфейс. */
h1,h2,h3,h4{font-family:var(--font-display);text-transform:none;}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
/* ==========================================================================
   КАРКАС: верхняя навигация на всю ширину, контент под ней.
   Левая колонка на страницах отдана под фильтры (см. .catalog-layout).
   ========================================================================== */
.topnav{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:clamp(12px,1.6vw,28px);
  height:var(--topbar-h);padding-inline:var(--pad);
  background:#0a0a0c;
  /* Панель всегда тёмная — в светлой теме тоже, поэтому токены переопределяем
     локально. Акцент тоже: светлый #0a6b80 на почти чёрном давал 3.2:1,
     активный пункт меню читался хуже соседей. */
  --ink:#e9ebe6;--ink-muted:#9a9d99;--ink-faint:#8b8f88;
  --line:#212125;--line-strong:#34343a;
  --bg-raised:#111113;--bg-raised-2:#18181b;
  --accent:#52d0e8;--accent-ink:#06222a;
  --accent-soft:rgba(82,208,232,.12);--accent-line:rgba(82,208,232,.38);
  color:var(--ink);
}
.topnav-logo{flex-shrink:0;display:flex;align-items:center;}
.topnav-logo img{height:calc(var(--topbar-h) - 18px);width:auto;display:block;transition:opacity .16s;}
.topnav-logo:hover img{opacity:.85;}
.topnav-links{display:flex;align-items:center;gap:2px;min-width:0;flex:1;}
/* Шрифт навигации — текстовый Onest, а не узкий заголовочный:
   это интерфейс, он не должен спорить с заголовками страницы. */
.topnav-links > a{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 12px;border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:.9rem;font-weight:500;letter-spacing:0;
  color:var(--ink-muted);white-space:nowrap;
  transition:background .15s,color .15s;
}
.topnav-links > a svg{width:17px;height:17px;flex-shrink:0;opacity:.75;}
.topnav-links > a:hover svg,.topnav-links > a.on svg{opacity:1;}
.topnav-links > a:hover{background:var(--bg-raised-2);color:var(--ink);}
.topnav-links > a.on{background:var(--accent-soft);color:var(--accent);font-weight:600;}
.topnav-mobile-extra{display:none;}
/* ---------- поиск в шапке с подсказками ---------- */
.topnav-search{position:relative;margin-left:auto;width:min(320px,26vw);flex-shrink:0;}
.topnav-search .search-box input{
  background:var(--bg-raised);border-color:var(--line);
  padding-block:9px;font-size:.88rem;
}
.suggest{
  position:absolute;top:calc(100% + 8px);right:0;width:min(440px,88vw);z-index:70;
  background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);overflow:hidden;max-height:min(70vh,560px);overflow-y:auto;
}
.suggest[hidden]{display:none;}
.suggest-item:hover,.suggest-item.on{background:var(--bg-raised-2);}
.suggest-item.on{box-shadow:inset 2px 0 0 var(--accent);}
/* Поиск. Отдельной кнопки-лупы больше нет — её место занял дубль корзины
   (просьба Альберта). Поэтому поле само ужимается до иконки на узком
   десктопе и раскрывается по клику в него: восемь пунктов меню и поле
   на 320px в одну строку не помещаются, проверено замером scrollWidth. */
.nav-cart-btn{position:relative;}
.nav-cart-count{
  position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;
  display:none;align-items:center;justify-content:center;
  padding:0 4px;border-radius:99px;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;line-height:1;
}
@media (max-width:1820px){
/* Место под поиск в шапке всегда 42px — ровно под лупу. Раскрытое поле
     НЕ раздвигает строку, а выпадает панелью под шапкой: восемь пунктов меню
     и поле в 272px вместе не помещаются уже на 1366px, меню переливалось
     на 116px. Ширина слота при этом не меняется, поэтому меню не дёргается. */
  .topnav-search{width:42px;height:40px;flex-shrink:0;position:relative;}
.topnav-search .search-box{
    position:absolute;top:0;right:0;width:42px;height:40px;
    border-radius:var(--r-sm);overflow:hidden;
  }
.topnav-search:focus-within .search-box{
    top:calc(100% + 6px);width:min(420px,58vw);height:auto;overflow:visible;
    box-shadow:var(--shadow-lg);z-index:71;
  }
.topnav-search .search-box input{transition:opacity .16s ease;}
.topnav-search:not(:focus-within) .search-box input{opacity:0;pointer-events:none;}
.suggest{top:calc(100% + 52px);}
}
@media (max-width:1000px){
/* на телефоне поиск всегда на виду: там он основной способ навигации */
  .topnav-search{
    order:5;width:100%;margin:0;
    position:absolute;left:0;right:0;top:100%;padding:var(--s2) var(--pad);
    background:#0a0a0c;display:block;
  }
.topnav-search:focus-within{width:100%;}
/* Сбрасываем свёртку из блока 1820px: там .search-box зафиксирован в 42px
     абсолютом, и на телефоне поле оставалось узким огрызком, торчащим за край. */
  .topnav-search .search-box{position:relative;top:auto;right:auto;width:100%;height:auto;overflow:visible;box-shadow:none;}
.topnav-search:not(:focus-within) .search-box input{opacity:1;pointer-events:auto;}
.suggest{right:var(--pad);left:var(--pad);width:auto;}
}
.topnav-actions{margin-left:var(--s3);display:flex;align-items:center;gap:10px;flex-shrink:0;}
.topnav .icon-btn{
  width:40px;height:40px;flex-shrink:0;border-radius:var(--r-sm);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--ink-muted);transition:border-color .15s,color .15s;
}
.topnav .icon-btn:hover{border-color:var(--accent-line);color:var(--accent);}
.topnav .icon-btn svg{width:18px;height:18px;}
.nav-burger{display:none;}
.nav-scrim.open{opacity:1;pointer-events:auto;}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft);flex-shrink:0;}
.status-dot.off{background:var(--ink-faint);box-shadow:0 0 0 3px var(--line);}
/* Перенос слов: не оставляем висячих слов в заголовках и абзацах.
   balance — выравнивает строки заголовка, pretty — не пускает одно слово на последнюю строку. */
h1,h2,h3,h4,.hero h1,.section-head p{text-wrap:balance;}
p,li,.hero-sub{text-wrap:pretty;}
/* подсказка «крути вниз» — иначе на полноэкранном герое не видно, что есть продолжение */
.scroll-cue{
  position:absolute;left:var(--pad);bottom:clamp(16px,2.4vh,30px);z-index:2;
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);
  /* это кнопка, а не подпись: снимаем оформление браузера и даём курсор */
  background:none;border:none;padding:8px 0;cursor:pointer;
  transition:color .15s;
}
.scroll-cue:hover{color:var(--accent);}
.scroll-cue::before{
  content:"";width:26px;height:42px;border:1px solid var(--line-strong);border-radius:999px;
  background:radial-gradient(circle at 50% 22%,var(--accent) 0 3px,transparent 3.5px);
  animation:cue 1.9s ease-in-out infinite;
}
/* ==========================================================================
   ТИПОВЫЕ ЭЛЕМЕНТЫ
   ========================================================================== */
/* Без капса: он превращал «apa customs» в «APA CUSTOMS», а бренд пишется
   строчными. Ярлык держится моноширинным шрифтом и разрядкой, капс тут
   был не смыслом, а привычкой. */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--font-mono);font-size:var(--t-caption);
  letter-spacing:.14em;color:var(--accent);
}
/* Кнопки прямоугольные — «инструмент», а не «приложение».
   Скруглённая только плавающая корзина. Правило радиусов взято у Retool. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:var(--s3) var(--s5);border-radius:0;
  /* Oswald — только заголовки. Кнопки и интерфейс на текстовом Onest. */
  font-family:var(--font-body);font-size:.92rem;font-weight:600;
  letter-spacing:0;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease,background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn svg{width:17px;height:17px;}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 26px -12px var(--glow);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:var(--bg-raised);}
.btn-ghost:hover{border-color:var(--accent-line);color:var(--accent);}
.btn-lg{padding:var(--s4) var(--s6);font-size:var(--t-body);}
/* ==========================================================================
   ГЕРОЙ — обязан помещаться в ОДИН экран
   ========================================================================== */
/* Герой: картинка на ВЕСЬ экран, текст поверх неё */
.hero{
  position:relative;isolation:isolate;
  min-height:calc(100svh - var(--topbar-h));
  display:flex;align-items:center;
  padding:clamp(20px,3vh,48px) var(--pad);
  overflow:hidden;
  /* Под текстом всегда тёмный кадр мастерской, поэтому в светлой теме буквы
     обязаны остаться светлыми — иначе почти чёрный --ink ложится на чёрное фото
     и заголовок пропадает. Токены переопределяем локально, как в .topnav. */
  --ink:#f2f4f0;--ink-muted:#c2c6c0;--ink-faint:#93978f;
  --line:rgba(255,255,255,.18);--line-strong:rgba(255,255,255,.34);
  --accent:#6fdcf2;--accent-line:rgba(111,220,242,.45);--accent-soft:rgba(111,220,242,.14);
  --accent-ink:#06222a;
  /* фон второй кнопки — стекло по кадру, а не белая плашка из светлой темы */
  --bg-raised:rgba(255,255,255,.10);--bg-raised-2:rgba(255,255,255,.16);
  color:var(--ink);
}
.hero .btn-ghost{backdrop-filter:blur(6px);}
.hero-bg{position:absolute;inset:0;z-index:-2;display:block;}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%;}
/* затемнение слева и снизу — чтобы текст читался, а кадр оставался виден */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    linear-gradient(90deg,rgba(8,9,11,.93) 0%,rgba(8,9,11,.74) 40%,rgba(8,9,11,.22) 68%,transparent 100%),
    linear-gradient(0deg,rgba(8,9,11,.8) 0%,rgba(8,9,11,.15) 38%,transparent 60%);
}
.hero-content{
  position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(12px,1.4vh,20px);
  /* было min(58ch,52vw) — потолок в 58 знаков держал колонку в 617px
     даже на 2560px. Даём ей расти вместе с экраном. */
  width:clamp(320px,min(74ch,46vw),980px);min-width:0;
  container-type:inline-size;   /* кегль заголовка считаем от ширины КОЛОНКИ, а не окна */
}
@media (max-width:1000px){
.hero-content{width:100%;}
}
.hero h1{
  /* Кегль считаем от ширины КОЛОНКИ. Второго объявления в vw тут быть не должно:
     браузер посчитал бы размер дважды и текст прыгал — это давало CLS 0.12. */
  font-size:clamp(1.6rem,7.2cqw,4rem);
  font-weight:700;line-height:1.06;letter-spacing:-.02em;
  /* никаких переносов внутри слова: «элек-тротранспорта» выглядит как брак */
  hyphens:none;overflow-wrap:normal;
}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero-tagline{
  font-family:var(--font-mono);font-size:clamp(.72rem,1vw,.92rem);
  letter-spacing:.24em;color:var(--ink-faint);text-transform:uppercase;
}
.hero-sub{color:var(--ink-muted);font-size:var(--t-lead);line-height:var(--lh-lead);max-width:60ch;}
/* Высота блока не должна зависеть от того, доехал ли шрифт: пока Onest грузился,
   кнопки стояли в строку, а после подмены становились шире и переносились —
   герой вырастал на 60px и давал CLS 0.12. Поэтому на узких экранах они
   в столбик изначально, а не «как получится». */
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;}
@media (max-width:560px){
.hero-cta{flex-direction:column;align-items:stretch;}
.hero-cta .btn{width:100%;justify-content:center;}
}
.hero-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin-top:clamp(8px,1.4vh,20px);
}
.hero-fact{border-left:2px solid var(--accent-line);padding-left:12px;}
.hero-fact b{display:block;font-family:var(--font-display);font-size:clamp(1.05rem,1.7vw,1.6rem);line-height:1.1;}
.hero-fact span{font-size:.75rem;color:var(--ink-faint);}
.search-box{position:relative;display:flex;align-items:center;}
.search-box svg{position:absolute;left:13px;width:15px;height:15px;color:var(--ink-faint);pointer-events:none;}
.search-box input{padding-left:38px;}
.offer-band .eyebrow{color:var(--accent);}
.lightbox.hidden{display:none;}
.cart-drawer.open{opacity:1;pointer-events:auto;}
.cart-drawer.open .cart-drawer-panel{transform:translateX(0);}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;color:var(--ink-muted);transition:color .15s;}
.icon-btn:hover{color:var(--ink);}
.modal.hidden{display:none;}
@media (max-width:1340px){
.topnav-links > a{padding:9px 9px;gap:6px;font-size:.84rem;}
.topnav{gap:clamp(8px,1vw,16px);}
}
@media (max-width:1190px){
.topnav-links > a{padding:10px;font-size:0;gap:0;}
.topnav-links > a svg{width:19px;height:19px;}
}
@media (max-width:1000px){
:root{--topbar-h:60px;}
.nav-burger{display:flex;}
/* навигация уезжает в выдвижную панель слева */
  /* Панель начинается ПОД шапкой: Олег — «бургер открылся, а логотип закрылся».
     Логотип и кнопки шапки остаются на виду, пока меню открыто. */
  .topnav-links{
    position:fixed;inset:var(--topbar-h) auto 0 0;width:min(320px,86vw);z-index:58;
    flex-direction:column;align-items:stretch;gap:4px;
    background:#0a0a0c;
    padding:16px 16px 24px;
    transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--shadow-lg);
  }
.topnav-links.open{transform:translateX(0);}
.topnav-links > a{padding:12px 14px;font-size:1rem;gap:12px;}
.topnav-links > a svg{width:19px;height:19px;}
.topnav-mobile-extra{
    display:block;margin-top:auto;padding-top:20px;border-top:1px solid #212125;
  }
.nav-status{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#9a9d99;}
.nav-phone-big{
    display:block;font-family:var(--font-mono);font-weight:600;font-size:1.1rem;
    color:#e9ebe6;margin:10px 0 4px;
  }
/* панель меню всегда тёмная, поэтому цвет фиксированный — но не тусклее нормы */
  .nav-addr{font-size:.76rem;color:#8b8f88;line-height:1.5;}
.nav-social{display:flex;gap:8px;margin-top:12px;}
.nav-social a{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    padding:10px;border:1px solid #212125;border-radius:var(--r-sm);
    font-size:.78rem;color:#9a9d99;
  }
.nav-social img{width:16px;height:16px;}
/* на телефоне оффер тоже обязан помещаться в один экран */
  /* На телефоне высоту героя ели полоса поиска под шапкой и нижняя панель:
     экран был выше видимой части, содержимое уезжало вниз, а сверху оставалась
     пустота. Олег: «вот это расстояние сразу, вот эта пустота». */
  .hero{align-content:center;gap:16px;
        align-items:flex-start;padding-block:20px 16px;
        min-height:calc(100svh - var(--topbar-h) - 140px);}
.hero-facts{gap:9px;margin-top:4px;}
.hero-fact b{font-size:1.15rem;}
.hero-fact span{font-size:.7rem;}
.hero-sub{font-size:.9rem;}
.hero-cta .btn{padding:11px 18px;}
}
@media (max-width:620px){
/* Фактов ровно три. В две колонки третий висит один — держим строку целой,
     подписи при этом переносятся, и это нормально. */
  .hero-facts{gap:8px;}
.hero-fact{padding-left:9px;}
.hero-fact b{font-size:1.05rem;}
.hero-fact span{font-size:.66rem;line-height:1.25;}
.scroll-cue{font-size:.75rem;}
.hero-fact span{font-size:.75rem;}
.hero-tagline{font-size:.75rem;}
/* телефон в выезжающем меню — основная кнопка, под палец нужно 44 px */
  .nav-phone-big{min-height:44px;display:flex;align-items:center;}
}
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--side-w);z-index:70;
  display:flex;flex-direction:column;gap:18px;padding:18px 16px 20px;
  background:#0a0a0c;overflow-y:auto;
  --ink:#e9ebe6;--ink-muted:#9a9d99;--line:#212125;
  --bg-raised:#111113;--bg-raised-2:#18181b;--accent:#52d0e8;
  color:var(--ink);
}
.side-logo{display:flex;justify-content:center;margin-bottom:-6px;}
.side-logo img{width:92px;height:auto;display:block;transition:opacity .16s;}
.side-logo:hover img{opacity:.85;}
.side-cap{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;
          color:var(--ink-muted);margin-bottom:8px;}
.side-block{display:flex;flex-direction:column;gap:6px;}
.side-link{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;
  font-size:.88rem;color:var(--ink-muted);background:transparent;transition:background .15s,color .15s;
}
.side-link svg{width:17px;height:17px;}
.side-link:hover{background:var(--bg-raised-2);color:var(--ink);}
.side-addr{margin-top:auto;font-size:.78rem;color:var(--ink-muted);line-height:1.4;}
.side-addr:hover{color:var(--ink);}
/* вход для клиентов в правом углу шапки */
.nav-login{
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;
  border:1px solid var(--line-strong);color:var(--ink);font-size:.86rem;font-weight:600;
  white-space:nowrap;transition:background .15s,border-color .15s;
}
.nav-login svg{width:16px;height:16px;}
.nav-login:hover{background:var(--bg-raised-2);border-color:var(--accent);color:var(--accent);}
@media(max-width:1023px){
.sidebar{display:none;}
.nav-login span{display:none;}
/* На телефоне остаётся одна иконка — под палец нужно 44 px, было 34. */
  .nav-login{padding:0;width:44px;height:44px;justify-content:center;}
}
.side-theme{
  display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border-radius:10px;
  border:1px solid var(--line);background:transparent;color:var(--ink-muted);
  font:inherit;font-size:.82rem;cursor:pointer;transition:background .15s,color .15s;
}
.side-theme svg{width:17px;height:17px;flex-shrink:0;}
/* Показываем то, ВО ЧТО переключимся: на тёмной теме — «Светлая тема».
   Иконка и подпись всегда согласованы, потому что переключаются одним правилом. */
.side-theme .ico-moon,
.side-theme .lbl-dark{display:none;}
:root[data-theme="light"] .side-theme .ico-sun,
:root[data-theme="light"] .side-theme .lbl-light{display:none;}
:root[data-theme="light"] .side-theme .ico-moon,
:root[data-theme="light"] .side-theme .lbl-dark{display:inline;}
:root[data-theme="light"] .side-theme .ico-moon{display:block;}
.side-theme-label{white-space:nowrap;}
.side-theme:hover{background:var(--bg-raised-2);color:var(--ink);}
.side-status{display:flex;align-items:center;gap:6px;margin-bottom:5px;font-size:.78rem;}
.side-promo{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;
  background:linear-gradient(135deg,rgba(82,208,232,.18),rgba(82,208,232,.05));
  border:1px solid rgba(82,208,232,.38);color:var(--ink);transition:filter .15s;
}
.side-promo:hover{filter:brightness(1.15);}
.side-promo svg{width:20px;height:20px;color:var(--accent);flex-shrink:0;}
.side-promo b{display:block;font-size:.92rem;}
.side-promo em{display:block;font-style:normal;font-size:.7rem;color:var(--ink-muted);margin-top:2px;}
@media(max-width:1023px){
.tabbar-item.on{color:#52d0e8;}
}
/* «Приложение» в боковой панели — тот же вид, что у акций, но спокойнее:
   акция это предложение, а это просто вход в инструкцию. */
.side-app{background:var(--bg-raised-2);border-color:var(--line);}
.side-app svg{width:20px;height:20px;flex-shrink:0;color:var(--ink-muted);}
.side-app:hover{border-color:var(--accent-line);}
.side-app:hover svg{color:var(--accent);}
/* Логотип: тёмная версия по умолчанию, светлая — на светлой теме.
   Через CSS, а не <picture media>: тема переключается вручную кнопкой. */
/* Лого лежит в трёх местах шапки (сайдбар, десктопный топбар, мобильный),
   у каждого свои правила на img. Селектор двойным классом, чтобы перебить
   их все и не городить !important. */
picture>img.logo-light.logo-light{display:none;}
:root[data-theme="light"] picture>img.logo-dark.logo-dark{display:none;}
:root[data-theme="light"] picture>img.logo-light.logo-light{display:block;}
/* ---------- светлая тема доходит и до «рамы» сайта ----------
   Шапка, сайдбар и нижняя панель держали собственную тёмную палитру, поэтому
   при переключении менялась только середина страницы. Олег: «кликаю — ничего
   не работает, только логотип поменялся». */
:root[data-theme="light"] .topnav,
:root[data-theme="light"] .sidebar{
  background:#ffffff;
  border-color:#cfdfe6;
  --ink:#1a1a1a;--ink-muted:#4a5b61;--ink-faint:#5d6f76;
  --line:#cfdfe6;--line-strong:#a9c4ce;
  --bg-raised:#f3f9fa;--bg-raised-2:#e9f1f4;
  --accent:#0a6b80;--accent-ink:#ffffff;
}
:root[data-theme="light"] .nav-status,
:root[data-theme="light"] .side-note{color:#4a5b61;}
:root[data-theme="light"] .tabbar{
  background:rgba(255,255,255,.96);border-top-color:#cfdfe6;
}
:root[data-theme="light"] .tabbar-item{color:#4a5b61;}
:root[data-theme="light"] .tabbar-item.on,
:root[data-theme="light"] .tabbar-main{color:#0a6b80;}
:root[data-theme="light"] .tabbar-main .bubble{
  background:#0a6b80;color:#ffffff;border-color:#ffffff;
  box-shadow:0 10px 22px -8px rgba(10,107,128,.45);
}
/* Олег: значок ватсапа зелёный, трубка красная — как их привыкли видеть. */
.side-link[href*="wa.me"] svg{color:#25d366;}
.side-link[href^="tel:"] svg{color:#e5484d;}
/* Олег: «некрасиво смотрится слово акции, должно быть со смещением к середине,
   если мы видим это как кнопку — то по центру». Плашки в сайдбаре читаются
   как кнопки, поэтому и содержимое в них по центру. */
.side-promo{justify-content:center;text-align:center;}

/* ============================================================
   Стыковка с боевой страницей.
   Наши три блока встают на место старого левого меню и баннера,
   остальная страница остаётся как была.
   ============================================================ */

/* Основной контент отступает от нашей панели, а не от старой (200px),
   и уходит из-под фиксированной шапки. */
.main-content{
  margin-left:var(--side-w);
  width:calc(100% - var(--side-w));
  padding-top:0;
}

/* Первый экран: картинка статичным фоном — как баннер на боевом сейчас.
   Адаптивный <picture> убран, поэтому фон задаём здесь. */
.hero{
  background:#0a0a0c url('/images/hero-apa.webp') center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,10,12,.92) 0%,rgba(10,10,12,.72) 46%,rgba(10,10,12,.30) 100%);
}

@media (max-width:1023px){
  .main-content{margin-left:0;width:100%;}
}

/* На боевом у всех ссылок подчёркивание — у нас его нет.
   Снимаем только внутри наших блоков, чужие ссылки не трогаем. */
.sidebar a,.topnav a,.hero a{text-decoration:none;}

/* Базовое правило «бургер спрятан» потерялось при сборке: в исходнике он
   показывается только в media-запросе, а скрыт общим сбросом, который сюда
   не попал. На десктопе бургер не нужен — меню и так видно. */
.nav-burger{display:none;}
@media (max-width:1000px){ .nav-burger{display:flex;} }
/* Специфичнее, чем правило из media-блока: на широком экране бургера нет. */
.topnav .nav-burger{display:none;}
@media (max-width:1000px){ .topnav .nav-burger{display:flex;} }

/* На боевом кнопки светлые по умолчанию — внутри наших блоков возвращаем свои. */
.topnav button,.sidebar button,.hero button{
  background:var(--bg-raised);border:1px solid var(--line);color:var(--ink);
}
.topnav .btn-primary,.hero .btn-primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;}

/* На телефоне поиск уезжает полосой под шапку и ложится absolute поверх
   первого экрана. Опускаем экран ровно на высоту этой полосы. */
@media (max-width:1000px){
  .hero{margin-top:40px;}
}

/* Альберт: «приложение и акции надо выровнять по левому краю, колхоз».
   Раньше Олег просил центровать — теперь по левому, как остальной сайдбар. */
.side-promo{justify-content:flex-start;text-align:left;}

/* «Крути вниз»: вместо фигуры-мышки простая стрелка — Альберт: «там шейп
   какой-то линий что ли». */
.scroll-cue::before{
  width:auto;height:auto;border:none;border-radius:0;background:none;
  content:"↓";font-size:1.1rem;line-height:1;color:var(--accent);
}

/* Фон всего сайта — наша картинка первого экрана, фиксированная.
   Первый экран своей подложки не имеет, чтобы фон был единым и не было стыка. */
.hero{background:none;}

/* Светлая тема: фон у них свой, светлый. Наш первый экран рассчитан на тёмное
   фото, поэтому там светлые буквы и тёмная заливка сверху — на светлом это
   читается как чёрная плашка. Возвращаем нормальные цвета. */
:root[data-theme="light"] .hero::after{
  /* У светлой темы их фоновая картинка слева тёмная, и тёмный текст на ней
     тонет. Кладём светлую подложку — зеркало тёмной из тёмной темы. */
  background:linear-gradient(90deg,rgba(244,249,251,.82) 0%,rgba(244,249,251,.55) 52%,rgba(244,249,251,.12) 100%);
}
:root[data-theme="light"] .hero{
  --ink:#1a1a1a;--ink-muted:#3f4a4e;--ink-faint:#5d6f76;
  --line:#cfdfe6;--line-strong:#a9c4ce;
  --accent:#0a6b80;--accent-ink:#ffffff;
  --bg-raised:rgba(255,255,255,.55);
}

/* ---------- страница «Приложение на телефон» ---------- */
.app-page{max-width:1100px;}
.app-page h1{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.3rem);margin-bottom:14px;}
.app-lead{color:var(--ink-muted);font-size:1.02rem;line-height:1.7;max-width:72ch;}
.app-grid{display:grid;gap:20px;margin-top:26px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));}
.app-card,.app-why{background:var(--bg-raised);border:1px solid var(--line);border-radius:14px;padding:22px;}
.app-card h2,.app-why h2{font-family:var(--font-display);font-size:1.12rem;margin-bottom:8px;}
.app-hint{color:var(--ink-muted);font-size:.9rem;line-height:1.6;}
.app-steps{counter-reset:s;display:flex;flex-direction:column;gap:12px;margin-top:14px;padding:0;list-style:none;}
.app-steps li{counter-increment:s;position:relative;padding-left:34px;color:var(--ink-muted);line-height:1.65;}
.app-steps li::before{
  content:counter(s);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);border:1px solid var(--accent-line);
  color:var(--accent);font-family:var(--font-mono);font-size:.72rem;
}
.app-steps b,.app-why b{color:var(--ink);}
.app-why{margin-top:22px;max-width:78ch;}
.app-why ul{list-style:none;padding:0;}
.app-why li{color:var(--ink-muted);line-height:1.7;margin-bottom:10px;padding-left:22px;position:relative;}
.app-why li::before{content:'';position:absolute;left:4px;top:.66em;width:6px;height:6px;border-radius:2px;background:var(--accent);}

/* ---------- уборка старого ----------
   Старый блок с входом, корзиной и темой жил рядом со старым меню. Меню мы
   заменили, и блок свалился в подвал страницы — Альберт: «старое торчит
   из-под низу». Из разметки его не убираем: на нём висят вход, счётчик
   корзины и кнопки Олега, к ним обращается их код по id. Прячем и дёргаем
   их через apa-ui.js. */
.login-container{display:none !important;}

/* Правила старого левого меню больше не к чему применять — но если где-то
   остался кусок разметки, он не должен всплыть поверх нового. */
.left-menu,.menu-nav,.menu-dropdown-overlay,.menu-dropdown-backdrop{display:none !important;}

/* Два логотипа сверху не нужны: в сайдбаре свой, крупный. Маленький в шапке
   оставляем только там, где сайдбар скрыт — на телефоне. */
@media (min-width:1024px){ .topnav-logo--mob{display:none;} }

/* Поле поиска в шапке прячем. Причины две: наш скрипт подсказок на боевой
   не переносился, поэтому оно ничего не искало; и без своих стилей это была
   голая рамка браузера, а на телефоне — чёрная полоса поверх первого экрана.
   Вместо него в шапке ссылка-лупа на каталог, где поиск настоящий. */
.topnav-search{display:none !important;}
.nav-search-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:40px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg-raised);color:var(--ink-muted);
  transition:color .15s,border-color .15s;
}
.nav-search-link:hover{color:var(--accent);border-color:var(--accent-line);}
.nav-search-link svg{width:18px;height:18px;}
@media (max-width:1000px){ .nav-search-link{display:none;} }

/* Шапка и первый экран во всю ширину: у их .main-content внутренние отступы
   30px (на узких — 15px), из-за них по краям оставались полосы фона.
   Выводим оба блока за эти отступы, чтобы упирались в меню и в правый край. */
.topnav,.hero{
  margin-left:-30px;margin-right:-30px;
  width:calc(100% + 60px);
}
@media (max-width:768px){
  .topnav,.hero{margin-left:-15px;margin-right:-15px;width:calc(100% + 30px);}
}

/* Тёмную заливку с первого экрана убрали: фото само по себе тёмное,
   текст на нём читается. Альберт: «убери шейп чёрный с херо». */
.hero::after{display:none;}
:root[data-theme="light"] .hero::after{display:none;}

/* Тёмная заливка первого экрана была в ДВУХ псевдоэлементах, ::after я убрал
   раньше, а поверх фото оставался ::before. Гасим оба. */
.hero::before{display:none;}

/* Шапка фиксируется по-настоящему.
   position:sticky здесь не работает: его ломает overflow:hidden у html, body
   и .main-content — шапка просто уезжала вверх. Поэтому fixed, а контенту
   даём отступ сверху на её высоту. */
.topnav{
  position:fixed;top:0;left:var(--side-w);right:0;width:auto;
  margin-left:0;margin-right:0;z-index:60;
}
.main-content{padding-top:var(--topbar-h);}
@media (max-width:1023px){
  .topnav{left:0;}
}

/* Крошки упирались в шапку: у них margin-bottom:0 и никаких отступов сверху,
   а шапка стала фиксированной. Даём воздух сверху и снизу. */
.breadcrumbs{
  padding:16px 0 14px;
  color:var(--ink-faint);
  font-family:var(--font-mono);
  font-size:.78rem;letter-spacing:.04em;
}
.breadcrumbs a{color:var(--ink-muted);}
.breadcrumbs a:hover{color:var(--accent);}

/* Без плашки текст первого экрана лёг на яркое пламя и поплыл. Плашку Альберт
   убрать просил, поэтому читаемость держим тенью на самих буквах — фото при
   этом видно целиком, никакого «шейпа» сверху нет. */
.hero-content .eyebrow,
.hero-content h1,
.hero-content .hero-sub,
.hero-content p,
.hero-fact b,
.hero-fact span{
  text-shadow:0 2px 10px rgba(4,6,8,.85), 0 1px 3px rgba(4,6,8,.9);
}
:root[data-theme="light"] .hero-content .eyebrow,
:root[data-theme="light"] .hero-content h1,
:root[data-theme="light"] .hero-content .hero-sub,
:root[data-theme="light"] .hero-content p,
:root[data-theme="light"] .hero-fact b,
:root[data-theme="light"] .hero-fact span{
  text-shadow:0 1px 8px rgba(255,255,255,.9), 0 1px 2px rgba(255,255,255,.95);
}
.footer-nav{
  display:grid;gap:var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
  padding:var(--s8) var(--pad) var(--s6);
  border-top:1px solid var(--line);
}
.footer-nav-col{display:flex;flex-direction:column;gap:9px;}
.footer-nav-head{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:3px;
}
.footer-nav a{font-size:.86rem;color:var(--ink-muted);line-height:1.4;}
.footer-nav a:hover{color:var(--accent);}
.footer-nav span{font-size:.8rem;color:var(--ink-faint);line-height:1.5;}
.site-footer{
  margin-top:auto;border-top:1px solid var(--line);
  padding:clamp(26px,2.6vw,40px) var(--pad);
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.site-footer-brand{font-family:var(--font-display);font-weight:700;font-size:.9rem;margin-bottom:8px;}
.site-footer-legal{font-size:.76rem;color:var(--ink-faint);line-height:1.65;}
.site-footer-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.footer-phone{display:block;font-family:var(--font-mono);font-weight:600;font-size:1rem;}
.footer-phone:hover{color:var(--accent);}
.footer-privacy{font-size:.76rem;color:var(--ink-faint);}
.footer-privacy:hover{color:var(--accent);}
.footer-icon{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:border-color .15s;}
.footer-icon:hover{border-color:var(--accent-line);}
.footer-icon img{width:22px;height:22px;object-fit:contain;}
.footer-icon svg{width:20px;height:20px;color:var(--ink-muted);transition:color .15s;}
.footer-icon:hover svg{color:var(--accent);}
.site-footer-right{flex-wrap:wrap;}
/* Соцсети в боковом меню — те же значки, что были в подвале. */
.side-socials{display:flex;flex-wrap:wrap;gap:8px;}
.side-social{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg-raised);color:var(--ink-muted);
  transition:color .15s,border-color .15s;
}
.side-social:hover{color:var(--accent);border-color:var(--accent-line);}
.side-social svg{width:18px;height:18px;}

/* Подвал делаем как у нас, но без значков — Альберт: «такой же, тёмный,
   только без иконок уже». Значки переехали в боковое меню. */
.site-footer .footer-icon,.site-footer .footer-icons{display:none !important;}

/* ---------- единая типографика на весь сайт ----------
   У них был системный набор (-apple-system, Segoe UI, Roboto), у наших блоков
   свой — отсюда «всё скачет». Приводим сайт к одной системе:
   «Асуан» на заголовки, Onest на текст, JetBrains Mono на цифры и мелочь. */
body,input,select,textarea,button{font-family:var(--font-body);}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;letter-spacing:.01em;}
.block-title,.section-title,.product-name,.product-title,.card-title,
.view-all-btn,.btn,.menu-link,.footer-phone{font-family:var(--font-display);}
.price,.price-value,.product-price,.items-count,.cart-count,
.product-art,.product-stock,.nav-cart-count{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
}
/* мелкий служебный текст — тем же моно, чтобы не спорил с заголовками */
.breadcrumbs,.items-counter,.site-footer-legal{font-family:var(--font-mono);}

/* ---------- кнопки: одна система на весь сайт ----------
   Было пять разных скруглений (5, 6, 8, 10, 20px) и разные шрифты.
   За образец берём кнопки первого экрана, остальным тот же вид, но мельче.
   Скругление добавляем всем, включая первый экран — там было 0. */
.hero .btn{border-radius:12px;}

.btn,button,.open-btn,.add-to-cart-btn,.view-all-btn,.login-btn,.logout-btn,
.cookie-banner__btn,.pagination-btn,.filter-btn,.search-btn{
  border-radius:10px;
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:.01em;
  transition:background .15s,border-color .15s,color .15s;
}
.open-btn,.add-to-cart-btn{padding:9px 14px;font-size:.9rem;}
.view-all-btn{padding:12px 22px;font-size:.95rem;}
.pagination-btn{border-radius:8px;padding:8px 13px;}

/* Стрелки карусели: были голые кружки без стиля. Делаем как остальные
   значковые кнопки — тёмная подложка, тонкая рамка, акцент при наведении. */
.carousel-arrow,.preview-arrow,.scroll-top{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  background:var(--bg-raised);border:1px solid var(--line);
  color:var(--ink-muted);font-size:1.05rem;line-height:1;
  transition:color .15s,border-color .15s,background .15s;
}
.carousel-arrow:hover,.preview-arrow:hover,.scroll-top:hover{
  color:var(--accent);border-color:var(--accent-line);background:var(--bg-raised-2);
}
.home-cats{display:grid;grid-template-columns:repeat(6,1fr);gap:28px;}
.home-cat{
  position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:#0d0f12;
  transition:border-color .18s,transform .18s;
}
.home-cat:hover{border-color:var(--accent);transform:translateY(-2px);}
.home-cat img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;}
.home-cat-body{
  position:absolute;left:0;right:0;bottom:0;padding:14px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(8,8,10,.94) 58%);
}
.home-cat-body b{display:block;font-size:1.08rem;line-height:1.2;color:#e9ebe6;}
.home-cat-body em{display:block;font-style:normal;font-size:.86rem;color:#52d0e8;margin-top:4px;}
@media(max-width:1400px){.home-cats{grid-template-columns:repeat(3,1fr);gap:26px;}}
@media(max-width:900px){.home-cats{grid-template-columns:repeat(2,1fr);gap:20px;}}
@media(max-width:520px){.home-cats{grid-template-columns:repeat(2,1fr);gap:12px;}}
/* Заголовок блока «Что берут чаще всего» */
.home-cats-section{padding:34px 0 10px;}
.home-cats-head{margin-bottom:20px;}
.home-cats-head h2{font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,2rem);}
.home-cats-head p{color:var(--ink-muted);margin-top:6px;}
.side-socials{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
.side-social{width:100%;height:34px;}
.side-social svg{width:16px;height:16px;}
/* карточки категорий одной высоты — «Свет» выбивался из ряда */
.home-cats{align-items:stretch;}
.home-cats .home-cat{display:flex;flex-direction:column;height:100%;}

/* Кнопки — обычным текстовым шрифтом. «Асуан» дисплейный: в крупном
   заголовке он хорош, а мелким на кнопке читается плохо.
   Альберт: «на кнопках шрифт надо обычный, этот мелкий стрёмно выглядит». */
.btn,button,.open-btn,.add-to-cart-btn,.view-all-btn,.login-btn,.logout-btn,
.cookie-banner__btn,.pagination-btn,.filter-btn,.search-btn,
.hero .btn,.menu-link,.side-promo,.side-link,.nav-login,.tabbar-item{
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:0;
}

/* Фирменные значки вместо эмодзи в карточках товара. */
.ico{width:15px;height:15px;flex-shrink:0;vertical-align:-2px;}
.add-to-cart-btn .ico{width:16px;height:16px;margin-right:6px;}
.add-to-cart-btn{display:inline-flex;align-items:center;justify-content:center;}
.product-category{display:inline-flex;align-items:center;gap:6px;}
.product-category .ico{width:14px;height:14px;opacity:.75;}
.sku{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ico-ok{color:var(--ok,#3ddc97);width:14px;height:14px;}

/* ---------- как на нашем сайте: карточки и кнопки ----------
   Раньше я поставил на названия товаров дисплейный «Асуан» — он для крупных
   заголовков, в карточке мелким читается тяжело. У нас там обычный Onest. */
.product-card h3,.product-card h3 a,.product-title,.product-name{
  font-family:var(--font-body);font-weight:600;font-size:.95rem;line-height:1.35;
  letter-spacing:0;
}
.product-category{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent);
}
.sku{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);}
.price,.price-value{font-family:var(--font-mono);font-weight:600;font-size:1rem;}

/* Кнопки один в один с нашими: Onest .92rem/600, тот же размер и поведение. */
.open-btn,.add-to-cart-btn,.view-all-btn,.pagination-btn,.login-btn,
.logout-btn,.cookie-banner__btn,.filter-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 18px;border-radius:10px;
  font-family:var(--font-body);font-size:.92rem;font-weight:600;letter-spacing:0;
  white-space:nowrap;border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease,background .15s ease,border-color .15s ease,color .15s ease;
}
.open-btn:active,.add-to-cart-btn:active{transform:translateY(1px);}
.open-btn{border-color:var(--line-strong);color:var(--ink);background:var(--bg-raised);}
.open-btn:hover{border-color:var(--accent-line);color:var(--accent);}
.add-to-cart-btn{background:var(--accent);color:var(--accent-ink);}
.add-to-cart-btn:hover{filter:brightness(1.08);}
.pagination-btn{padding:8px 13px;border-radius:8px;border-color:var(--line);
  background:var(--bg-raised);color:var(--ink-muted);}
.pagination-btn.active{background:var(--accent);color:var(--accent-ink);border-color:transparent;}

/* Карточки заезжали под шапку при прокрутке — у них свои слои выше нашей.
   Поднимаем шапку и сайдбар над содержимым. */
.topnav{z-index:1200;}
.sidebar{z-index:1210;}

/* Заголовок товарной страницы: он же виден роботам до отработки скрипта. */
.product-h1{
  font-family:var(--font-display);font-size:clamp(1.25rem,2.4vw,1.9rem);
  line-height:1.2;margin:8px 0 10px;
}
.product-lead{color:var(--ink-muted);margin-bottom:14px;}

/* ---------- фон на телефоне ----------
   `background-attachment: fixed` мобильные браузеры не выполняют: iOS Safari
   его игнорирует, Chrome на андроиде отключил ради плавности прокрутки —
   картинка едет вместе со страницей. Поэтому на узких экранах фон рисуем
   отдельным закреплённым слоем под содержимым. */
@media (max-width:1023px){
  body{background-image:none;}
  body::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:#0a0a0c url('/images/hero-apa.webp') center center / cover no-repeat;
  }
  :root[data-theme="light"] body::before{
    background-color:#f4f9fb;
    background-image:url('/images/hero-apa-light.webp');
  }
}

/* Плитки категорий на каталоге — вёрстка и значки наши, названия
   и числа берём из их каталога, поэтому совпадают точь-в-точь. */
.cat-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));margin-bottom:var(--gap);}
.cat-tile{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 15px;font-size:.9rem;transition:border-color .15s,background .15s;
}
.cat-tile:hover{border-color:var(--accent-line);background:var(--bg-raised-2);}
.cat-tile:hover .ico{color:var(--accent);}
.cat-tile .n{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-faint);flex-shrink:0;}
.cat-tiles{grid-auto-rows:1fr;}
.cat-tile .ico{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;color:var(--ink-faint);transition:color .15s;
}
.cat-tile .ico svg{width:100%;height:100%;}
.cat-tile .nm{
  flex:1;min-width:0;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cat-tiles-section{margin:6px 0 22px;}
.cat-tiles-head{font-family:var(--font-display);font-size:1.1rem;margin-bottom:12px;}
.cat-tile .ico{width:18px;height:18px;}

/* Значки в заголовках прайса и кнопках связи — вместо эмодзи. */
.ico-head{width:20px;height:20px;color:var(--accent);vertical-align:-4px;margin-right:8px;}
.price-card h3 .ico-head,.price-section-head .ico-head{width:19px;height:19px;}
.cta-btn .ico-head{width:18px;height:18px;margin-right:7px;color:currentColor;}
/* плитки категорий — ссылки без подчёркивания, как остальное меню */
.cat-tile,.cat-tile *,.home-cat,.home-cat *{text-decoration:none;}

/* Мелкий текст: на телефоне ниже 12px не читается. Поднимаем то, что
   аудит нашёл — категория в карточке, подписи плиток, шапка блока в меню. */
.product-category{font-size:.76rem;}
.home-cat-body em,.side-promo em{font-size:.78rem;}
.side-cap{font-size:.76rem;}
@media (max-width:1023px){
  .product-category{font-size:.75rem;}
  .sku{font-size:.78rem;}
  .home-cat-body em,.side-promo em,.side-cap{font-size:.78rem;}
}
/* Значки в карточках контактов — на месте прежних эмодзи. */
.ico-contact{width:26px;height:26px;color:var(--accent);}
.contact-icon,.social-icon{display:flex;align-items:center;justify-content:center;}
/* Ничего мельче 12px: аудит ловил 11.5px у подписей и подсказок. */
.side-cap,.home-cat-count,.product-category,.sku,
.apa-drag-entry-hint-text,.home-cat-body em,.side-promo em{font-size:max(.76rem,12px);}
.product-category.ok{color:var(--ok,#3ddc97);}
/* подсказка в карточке заезда была 11px — их правило перебивало общее */
.apa-drag-entry-hint .apa-drag-entry-hint-text,
.apa-drag-entry-hint-text{font-size:12px;line-height:1.45;}

/* Затемнение под выдвижным меню и нижняя панель — как на нашем сайте. */
.nav-scrim{
  position:fixed;inset:0;z-index:55;background:rgba(2,3,5,.6);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.nav-scrim.open{opacity:1;pointer-events:auto;}
@media(max-width:1023px){
  .tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:140;
    display:grid;grid-template-columns:repeat(5,1fr);align-items:end;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));
    background:rgba(10,10,12,.96);backdrop-filter:blur(10px);
    border-top:1px solid #212125;
  }
  .tabbar-item{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    /* Подписи были 10.1px — на нижней панели, куда смотрят на ходу, это мелко.
       0.72rem = 11.5px, нижняя граница читаемости. */
    padding:6px 2px;color:#9a9d99;font-size:.75rem;line-height:1.15;text-align:center;
  }
  .tabbar-item svg{width:21px;height:21px;}
  .tabbar-item.on{color:#52d0e8;}
  .tabbar-main{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 2px;background:none;border:0;
    color:var(--accent);font-size:.75rem;line-height:1.15;font-weight:600;
  }
  .tabbar-main .bubble{
    width:46px;height:46px;margin-top:-24px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;
    background:#52d0e8;color:#06222a;border:3px solid #0a0a0c;
    box-shadow:0 10px 22px -8px rgba(82,208,232,.75);
  }
  .tabbar-main .bubble svg{width:22px;height:22px;}
  .tabbar{align-items:start;}
  /* контент не должен прятаться под панелью */
  body{padding-bottom:74px;}
  .cart-fab{bottom:86px;}
  .repair-fab{display:none;}
  .scroll-top{bottom:150px;}
}
/* Панель прячем только на широких экранах. Раньше здесь стояло простое
   `.tabbar{display:none}`, и оно шло ПОСЛЕ правила, которое её показывает
   на телефоне, — с одинаковым весом побеждало последнее, и панели не было
   видно вообще. */
@media (min-width:1024px){ .tabbar{display:none;} }
/* Выдвижное меню должно лежать выше затемнения и ниже шапки. */
@media (max-width:1023px){
  .topnav-links{z-index:1150;}
  .nav-scrim{z-index:1100;}
  /* Панель ниже затемнения: при открытом меню по ней не должно нажиматься. */
  .tabbar{z-index:1050;}
  /* контент не прячется под нижней панелью */
  body{padding-bottom:76px;}
  .tabbar a{text-decoration:none;}
}

/* ---------- сайт открыт как приложение в Телеграме ----------
   Своя шапка Телеграма уже сверху, поэтому убираем всё, что дублирует
   оболочку, и даём содержимому больше места. */
:root.in-telegram .cookie-banner{display:none !important;}
:root.in-telegram .topnav-logo--mob{display:none;}
:root.in-telegram .topnav{padding-left:12px;}
:root.in-telegram body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));}

/* Кнопки админа в шапке: старый блок с ними скрыт, а ходить Олегу надо. */
.nav-admin{display:inline-flex;align-items:center;gap:8px;margin-right:4px;}
.nav-admin-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 13px;border-radius:10px;
  border:1px solid var(--accent-line,rgba(82,208,232,.45));
  background:var(--accent-soft,rgba(82,208,232,.12));color:var(--accent);
  font:inherit;font-size:.85rem;font-weight:600;text-decoration:none;cursor:pointer;
  white-space:nowrap;
}
.nav-admin-btn:hover{background:var(--accent);color:var(--accent-ink);border-color:transparent;}
.nav-admin-out{border-color:var(--line);background:var(--bg-raised);color:var(--ink-muted);}
.nav-admin-out:hover{color:var(--ink);background:var(--bg-raised-2);border-color:var(--line-strong);}
@media (max-width:900px){
  .nav-admin-btn{padding:8px 10px;font-size:.8rem;}
  .nav-admin{gap:6px;}
}

/* ============================================================
   Единый вид панелей: тёмное стекло поверх фонового фото.
   Альберт: «шейпы все бы тёмные, как прайс на работы, блюр
   эффект прикольный, один». Раньше блоки были разных оттенков
   и плотностей — теперь одна плотность, одно размытие, одна рамка.
   ============================================================ */
:root .info-block,
:root .price-card,
:root .product-card,
:root .actual-promo-card,
:root .contact-card,
:root .apa-drag-entry,
:root .apa-drag-card,
:root .price-note,
:root .cta-section,
:root .qr-card,
:root .filters,
:root .home-cat,
:root .cat-tile,
:root .app-card,
:root .app-why,
:root .side-promo,
:root .wins-table,
:root .site-footer{
  /* Стекло как в свежей iOS: размытие небольшое, прозрачности больше,
     цвет за стеклом чуть насыщеннее, сверху тонкий блик и светлая кромка.
     Альберт: «меньше блюр, сильно размыто; эффект стекла как на айфонах». */
  background:rgba(20,22,26,.58);
  backdrop-filter:blur(8px) saturate(1.6);
  -webkit-backdrop-filter:blur(8px) saturate(1.6);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 12px 32px -20px rgba(0,0,0,.85);
}
:root .product-card:hover,
:root .home-cat:hover,
:root .cat-tile:hover,
:root .contact-card:hover,
:root .apa-drag-entry:hover{
  border-color:var(--accent-line,rgba(82,208,232,.45));
  background:rgba(26,29,34,.66);
}

/* Фото товара остаётся на светлой подложке — иначе предмет не видно. */
.product-card .product-photo,
.product-card .product-image,
.product-card img{background:transparent;}

/* Вложенные блоки не должны размывать второй раз — получается муть. */
.price-card .price-item,
.info-block .price-list li,
.contact-card *,
.apa-drag-entry *{backdrop-filter:none;-webkit-backdrop-filter:none;}

/* Светлая тема — то же стекло, но светлое. */
:root[data-theme="light"] body .info-block,
:root[data-theme="light"] body .price-card,
:root[data-theme="light"] body .product-card,
:root[data-theme="light"] body .actual-promo-card,
:root[data-theme="light"] body .contact-card,
:root[data-theme="light"] body .apa-drag-entry,
:root[data-theme="light"] body .apa-drag-card,
:root[data-theme="light"] body .price-note,
:root[data-theme="light"] body .cta-section,
:root[data-theme="light"] body .qr-card,
:root[data-theme="light"] body .filters,
:root[data-theme="light"] body .home-cat,
:root[data-theme="light"] body .cat-tile,
:root[data-theme="light"] body .app-card,
:root[data-theme="light"] body .app-why,
:root[data-theme="light"] body .side-promo,
:root[data-theme="light"] body .wins-table,
:root[data-theme="light"] body .site-footer{
  background:rgba(255,255,255,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(10,40,50,.08),
    0 12px 32px -22px rgba(10,40,50,.4);
  border-color:rgba(10,40,50,.12);
  box-shadow:0 10px 30px -20px rgba(10,40,50,.35);
}

/* Размытие — тяжёлая штука для слабых телефонов. Там, где браузер
   просит меньше движения, оставляем просто плотную заливку. */
@media (prefers-reduced-motion: reduce){
  .info-block,.price-card,.product-card,.actual-promo-card,.contact-card,
  .apa-drag-entry,.apa-drag-card,.price-note,.cta-section,.qr-card,.filters,
  .home-cat,.cat-tile,.app-card,.app-why,.side-promo,.wins-table,.site-footer{
    backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(18,19,22,.9);
  }
}

/* Текст на плитках и в фильтрах — полной яркости, он поверх фото. */
:root .cat-tile .nm,:root .home-cat-body b{color:var(--ink);}
:root .cat-tile .n,:root .home-cat-body em{color:var(--ink-muted);}
:root .filters label,:root .filters select,:root .filters input{color:var(--ink);}
:root .cat-tiles-head{color:var(--ink);}

/* Поля ввода на стекле: без своей заливки они сливались с фото. */
:root .filters select,
:root .filters input,
:root .search-input,
:root #searchInput,
:root #marketSearchInput,
:root select,
:root input[type="text"],
:root input[type="search"],
:root input[type="tel"],
:root input[type="email"],
:root textarea{
  background:rgba(16,17,20,.88);
  border:1px solid rgba(255,255,255,.14);
  color:var(--ink);
  border-radius:10px;
}
:root .search-input::placeholder,
:root input::placeholder,
:root textarea::placeholder{color:var(--ink-faint);}
:root select:focus,:root input:focus,:root textarea:focus{
  outline:none;border-color:var(--accent-line,rgba(82,208,232,.5));
}
:root[data-theme="light"] body select,
:root[data-theme="light"] body input,
:root[data-theme="light"] body textarea{
  background:rgba(255,255,255,.92);
  border-color:rgba(10,40,50,.16);
  color:#17212b;
}
/* Заголовок над плитками — он лежит прямо на фото, даём тень. */
:root .cat-tiles-head{text-shadow:0 2px 10px rgba(4,6,8,.85);}

/* На прозрачном стекле буквы держим тенью, а не плотностью подложки —
   так стекло остаётся стеклом, а текст читается. */
:root .info-block,:root .price-card,:root .product-card,:root .contact-card,
:root .home-cat,:root .cat-tile,:root .apa-drag-entry,:root .actual-promo-card{
  text-shadow:0 1px 3px rgba(4,6,8,.55);
}
:root[data-theme="light"] body .info-block,
:root[data-theme="light"] body .price-card,
:root[data-theme="light"] body .product-card,
:root[data-theme="light"] body .contact-card,
:root[data-theme="light"] body .home-cat,
:root[data-theme="light"] body .cat-tile{text-shadow:none;}