/* ============================================================
   Артемон — дизайн-система шаблона. Направление «Чёрный пудель»,
   палитра «Пурпур + жёлтая мелочь» (утверждена заказчиком 20.07.2026).
   Все три цвета сняты пипеткой с логотипа-пуделя:
     #5E28D9 пурпур (хвост)   — главное действие: «В корзину», активные элементы
     #F7C600 жёлтый (помпон)  — счётчики и метка «Хит»; текст на жёлтом ТОЛЬКО тёмный
     #C52754 малиновый (тело) — скидки, «Акция», старые цены
   Плюс графит, светло-серый фон и зелёный #1F7A48 для «в наличии»/«Новинка».

   ⚠️ ИСТОЧНИК ИСТИНЫ — макет design/v2-purpur/mockup-home.html: блок ниже
   перенесён оттуда 1:1 (строки 5–169), чтобы вёрстка и макеты не разъезжались.
   Правишь цвет — правь в макете и переноси сюда целиком, не по одному значению.
   ============================================================ */

:root{
  --bg:#F4F4F6;            /* фон страницы — светло-серый, не белый */
  --surface:#ECEDF1;       /* подложки внутри карточек */
  --card:#FFFFFF;          /* карточки и блоки — белые */
  --border:#E0E2E8;
  --ink:#23252B;           /* графит */
  --muted:#5A616D;
  --primary:#4C5866;       /* графит: вторичные кнопки, метка «Хит» */
  --primary-deep:#3B4653;
  --primary-ink:#FFFFFF;
  --primary-soft:#E7EBF0;
  --accent:#5E28D9;        /* фирменный малиновый пуделя */
  --accent-deep:#4B1FAF;   /* hover главной кнопки */
  --accent-ink:#FFFFFF;
  --accent-soft:#ECE6FB;   /* светлая малиновая подложка */
  --accent-txt:#5E28D9;    /* малиновый как цвет текста на фоне */
  /* открытый раздел каталога — очень тихая подложка (см. .vc-trigger) */
  --ico-bg:#ECE6FB; --ico-ink:#5E28D9;   /* плашки иконок: колонка, плитки разделов, «как купить», бургер */
  --vc-open-bg:var(--ico-bg); --vc-open-ink:var(--ico-ink); --vc-open-icbg:var(--ico-bg);
  --vc-sub-hover-bg:transparent;   /* подкатегории подсвечиваются только текстом */
  --vc-sub-hover-ink:var(--accent-txt);
  --ok:#1F7A48;
  --ok-soft:#DFF2E7;
  --sale:#C52754;
  --logo-plate:#ffffff;
  --shadow:0 1px 2px rgba(20,21,24,.05), 0 6px 18px rgba(20,21,24,.07);
  --shadow-sm:0 1px 2px rgba(20,21,24,.06), 0 3px 10px rgba(20,21,24,.06); --shadow-lift:0 6px 14px rgba(20,21,24,.10), 0 18px 38px rgba(20,21,24,.14);
  --head-shadow:0 3px 10px rgba(20,21,24,.10);   /* шапка и лист каталога — одна тень */
  /* новые токены главной: тёмные панели (хиро и подвал) */
  --panel-dark:#251D38;
  --panel-dark-2:#2F2548;
  --panel-dark-ink:#F4F1FA;
  --panel-dark-muted:#B4ABCC;
  --panel-dark-border:#3B3058;
  --panel-dark-accent:#FFCE45;
  /* мелочь: счётчики и плашки */
  --count-bg:#F7C600; --count-ink:#23252B;
  --cart-count-bg:#F7C600; --cart-count-ink:#23252B;
  --badge-sale:#C52754; --badge-sale-ink:#FFFFFF;
  --badge-new:#1F7A48; --badge-new-ink:#FFFFFF;
  --badge-hit:#F7C600; --badge-hit-ink:#23252B;
}
:root[data-theme="light"]{
  --bg:#F4F4F6;
  --surface:#ECEDF1;
  --card:#FFFFFF;
  --border:#E0E2E8;
  --ink:#23252B;
  --muted:#5A616D;
  --primary:#4C5866;
  --primary-deep:#3B4653;
  --primary-ink:#FFFFFF;
  --primary-soft:#E7EBF0;
  --accent:#5E28D9;
  --accent-deep:#4B1FAF;
  --accent-ink:#FFFFFF;
  --accent-soft:#ECE6FB;
  --accent-txt:#5E28D9;
  --ico-bg:#ECE6FB; --ico-ink:#5E28D9;   /* плашки иконок: колонка, плитки разделов, «как купить», бургер */
  --vc-open-bg:var(--ico-bg); --vc-open-ink:var(--ico-ink); --vc-open-icbg:var(--ico-bg);
  --vc-sub-hover-bg:transparent;   /* подкатегории подсвечиваются только текстом */
  --vc-sub-hover-ink:var(--accent-txt);
  --ok:#1F7A48;
  --ok-soft:#DFF2E7;
  --sale:#C52754;
  --logo-plate:#ffffff;
  --shadow:0 1px 2px rgba(20,21,24,.05), 0 6px 18px rgba(20,21,24,.07);
  --shadow-sm:0 1px 2px rgba(20,21,24,.06), 0 3px 10px rgba(20,21,24,.06); --shadow-lift:0 6px 14px rgba(20,21,24,.10), 0 18px 38px rgba(20,21,24,.14);
  --head-shadow:0 3px 10px rgba(20,21,24,.10);   /* шапка и лист каталога — одна тень */
  --panel-dark:#251D38;
  --panel-dark-2:#2F2548;
  --panel-dark-ink:#F4F1FA;
  --panel-dark-muted:#B4ABCC;
  --panel-dark-border:#3B3058;
  --panel-dark-accent:#FFCE45;
  /* мелочь: счётчики и плашки */
  --count-bg:#F7C600; --count-ink:#23252B;
  --cart-count-bg:#F7C600; --cart-count-ink:#23252B;
  --badge-sale:#C52754; --badge-sale-ink:#FFFFFF;
  --badge-new:#1F7A48; --badge-new-ink:#FFFFFF;
  --badge-hit:#F7C600; --badge-hit-ink:#23252B;
}
:root[data-theme="dark"]{
  --bg:#141419;
  --surface:#1B1B22;
  --card:#20202A;
  --border:#2E2E3A;
  --ink:#EAEAF0;
  --muted:#A3A5B3;
  --primary:#5C6B7C;
  --primary-deep:#6D7D8F;
  --primary-ink:#FFFFFF;
  --primary-soft:#252C34;
  --accent:#7B4FF0;
  --accent-deep:#8156EE;
  --accent-ink:#FFFFFF;
  --accent-soft:#241C3A;
  --accent-txt:#B9A0FA;
  /* тёмная тема пока НЕ переделана — открытый раздел остаётся залитым акцентом */
  --ico-bg:#46367A; --ico-ink:#DCCCFF;
  --vc-open-bg:var(--ico-bg); --vc-open-ink:var(--ico-ink); --vc-open-icbg:var(--ico-bg);
    --vc-sub-hover-bg:transparent;   /* заливки у подкатегорий нет и в тёмной */
    --vc-sub-hover-ink:#C9B5FF;      /* цвет выбрал юзер (= --accent тёмной темы) */
  --ok:#54C285;
  --ok-soft:#1C2E24;
  --sale:#F0789A;
  --logo-plate:#f7f7f8;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.35);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 3px 10px rgba(0,0,0,.3); --shadow-lift:0 6px 14px rgba(0,0,0,.45), 0 18px 38px rgba(0,0,0,.55);
  --head-shadow:0 3px 10px rgba(20,21,24,.10);   /* шапка и лист каталога — одна тень */
  --panel-dark:#1D1730;
  --panel-dark-2:#272040;
  --panel-dark-ink:#F1EEF9;
  --panel-dark-muted:#A9A0C4;
  --panel-dark-border:#352C52;
  --panel-dark-accent:#FFCE45;
  /* мелочь: счётчики и плашки */
  --count-bg:#FFD84D; --count-ink:#23252B;
  --cart-count-bg:#FFD84D; --cart-count-ink:#23252B;
  --badge-sale:#D33A61; --badge-sale-ink:#FFFFFF;
  --badge-new:#54C285; --badge-new-ink:#23252B;
  --badge-hit:#FFD84D; --badge-hit-ink:#23252B;
}

/* ---------- Совместимость: ранние имена токенов шаблона ----------
   Шаблон писался до того, как набор токенов макета стал общим. Старые имена
   оставлены алиасами, чтобы не переписывать разом весь CSS; в НОВОМ коде
   использовать имена макета (--border, --surface, --accent-txt). */
:root{
  --line:var(--border);
  --line-2:var(--border);
  --ink-2:var(--muted);
  --shadow-lg:var(--shadow-lift);
  --radius:14px;
  --radius-lg:18px;
  --wrap:1240px;   /* = .pagewrap макета; токен оставлен старым местам, менять вместе */
  --font:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display:Georgia, "Iowan Old Style", "Times New Roman", serif;
  --logo-paw-color:var(--accent);
}
:root[data-theme="dark"]{ --logo-paw-color:#7B4FF0; }

/* ---------- База ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; }
[hidden]{ display:none !important; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); line-height:1.2; margin:0 0 .5em; text-wrap:balance; }
h1{ font-size:clamp(24px,4vw,34px); }
h2{ font-size:clamp(20px,3vw,27px); }
p{ margin:0 0 1em; }
.muted{ color:var(--muted); }
/* ЕДИНАЯ система раскладки — .pagewrap из макета (1240px по центру, отступы
   14/22px). Раньше жили две системы: .pagewrap (шапка) вообще без правил —
   шапка расползалась во всю ширину, а контент сидел на .wrap 1200px. Теперь
   правила ОДНИ на оба класса: .wrap оставлен алиасом для внутренних страниц
   и чужой разметки, чтобы ничего не разъезжалось. */
.pagewrap, .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 14px; }
@media (min-width:760px){ .pagewrap, .wrap{ padding:0 22px; } }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:10px 16px; z-index:100; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1.5px solid transparent; border-radius:11px; cursor:pointer;
  padding:10px 18px; font:inherit; font-weight:700; font-size:14.5px;
  text-decoration:none; transition:background .15s ease, border-color .15s ease;
}
.btn:hover{ text-decoration:none; }
.btn svg{ width:17px; height:17px; }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ background:var(--accent-deep); color:#fff; }
.btn-dark{ background:var(--ink); color:var(--bg); }
.btn-outline{ background:transparent; color:var(--accent); border-color:var(--accent); }
.btn-ghost{ background:var(--card); color:var(--ink); border-color:var(--line-2); }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 13px; font-size:13.5px; border-radius:9px; }

/* ============================================================
   ШАПКА, СЛУЖЕБНАЯ СТРОКА И ВИДЖЕТ КАТАЛОГА
   Перенесено из design/v2-purpur/mockup-home.html (вторая волна правок,
   утверждена заказчиком 21.07.2026). В макете отзывчивость сделана на
   @container (в одном файле рядом живут десктоп и телефон) — здесь те же
   пороги переведены в @media, как и задумано комментарием в макете.
   Правила логотипа НЕ переносились: в шаблоне пудель — <img>, а не фон.
   ============================================================ */
/* ---------- Шапка сайта ---------- */
/* Липнет ТОЛЬКО рабочая строка (логотип, каталог, поиск, корзина) — образец
   btt24.ru. Служебная строка стоит выше и снаружи, поэтому уезжает со страницей:
   при прокрутке она не нужна и таскать её за собой незачем.
   z-index ниже .cat-drop (60), чтобы выпадающий каталог ложился ПОВЕРХ шапки. */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--card);
  border-bottom:1px solid var(--border);
  /* мягкая тень под шапкой, как у 24btt: отделяет её от контента, когда она
     висит поверх страницы при прокрутке. ТА ЖЕ тень стоит у листа каталога —
     иначе на стыке (лист уже шапки) тень обрывается по бокам. */
  box-shadow:var(--head-shadow);
}
.header-main{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 0;
}
.burger{ flex:none; }

/* поиск: одна высота и одно скругление с кнопкой «Каталог» и кнопками справа —
   «таблетка» выбивалась из остальной вёрстки */
.site-search{
  order:5;
  margin:0;              /* у <form> браузер добавляет свой отступ снизу (1em) —
                            из-за него поиск висел выше кнопки «Каталог» на 7px */
  flex:1 1 100%; min-width:0;
  display:flex; align-items:center; gap:8px;
  border:1.5px solid var(--border);
  border-radius:12px;
  height:42px; padding:0 16px;
  color:var(--muted); font-size:14.5px;
  background:var(--surface);
  padding-right:4px;      /* кнопка «Найти» сама держит правый отступ */
}
.site-search svg{ width:17px; height:17px; flex:none; }
.site-search span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; }
/* В макете строка поиска — просто <span> с подсказкой; на сайте это настоящее
   поле, поэтому те же размеры и цвета переносим на <input>: без своей рамки
   и фона (их держит сама форма), высота — во всю строку. */
.site-search input[type="search"]{
  flex:1 1 auto; min-width:0; height:100%;
  border:0; background:transparent; outline:none;
  font:inherit; font-size:14.5px; color:var(--ink);
  -webkit-appearance:none; appearance:none;
}
.site-search input[type="search"]::placeholder{ color:var(--muted); opacity:1; }
.site-search input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; }
.site-search:focus-within{ border-color:var(--accent); }
/* Кнопка отправки: раньше форму можно было отправить только клавишей Enter,
   а лупа слева была просто картинкой. Теперь лупа СПРАВА и это настоящая кнопка. */
.search-go{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin-left:8px;
  border:0; border-radius:9px; cursor:pointer;
  /* без плашки и обводки — просто иконка (правка юзера) */
  background:transparent; color:var(--muted);
}
.search-go:hover{ color:var(--accent-txt); }
.search-go svg{ width:17px; height:17px; }

/* Телефон: знак телефона стоит В ОДНОЙ СТРОКЕ с номером (плашку-квадрат убрали —
   спорила с кнопками справа), режим работы — строкой ниже, по центру. */
/* В служебной строке телефон и режим работы идут В ОДНУ строку и мельче:
   это справочная строка, а не главный элемент шапки. */
/* все служебные ссылки собраны слева (правка юзера), телефон — единственное,
   что прижато к правому краю */
.header-phone-box{
  display:none; align-items:baseline; gap:9px; margin-left:auto;
}
.cat-nav .header-phone{ font-size:14.5px; }
.cat-nav .header-phone svg{ width:.7em; height:.71em; }
/* Знак телефона — ровно в высоту цифры номера. Высота цифр Segoe UI = .727em
   (замер: 12.00px при 16.5px), символ i-phone-tight обрезан по самому рисунку,
   поэтому .727em даёт именно 12px «в пикселях». Выравнивание по базовой линии:
   низ знака садится на базовую линию цифр, верх совпадает с их верхом. */
.header-phone-box .header-phone{ align-items:baseline; }
.header-phone-box .header-phone svg{ width:.718em; height:.727em; }
.header-phone{
  display:inline-flex; align-items:center; gap:7px;
  font-size:16.5px; font-weight:700; color:var(--ink);
  text-decoration:none; white-space:nowrap; letter-spacing:.01em;
}
/* тот же класс используется в «бургер»-меню, где иконка идёт внутри ссылки —
   без явных размеров SVG растягивался во всю ширину */
.header-phone svg{ width:16px; height:16px; flex:none; color:var(--accent-txt); }
.header-phone:hover{ color:var(--accent-txt); }
.header-phone-note{ font-size:12px; color:var(--muted); white-space:nowrap; }


.header-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.icon-btn{
  position:relative;
  width:42px; height:42px; border-radius:12px;
  border:1.5px solid var(--border);
  background:var(--card); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.icon-btn svg{ width:20px; height:20px; }
.icon-btn .count{
  position:absolute; top:-6px; right:-6px;
  min-width:19px; height:19px; padding:0 5px;
  border-radius:999px;
  background:var(--count-bg, var(--accent)); color:var(--count-ink, var(--accent-ink));
  font-size:11.5px; font-weight:700; line-height:19px; text-align:center;
}
.hide-mob{ display:none; }
.hide-mob[hidden]{ display:none; }

/* Корзина: на телефоне — иконка со счётчиком, на компьютере — ещё и сумма */
.cart-btn{
  position:relative;
  display:flex; align-items:center; gap:8px;
  height:42px; padding:0 13px;
  border-radius:12px;
  background:var(--accent); color:var(--accent-ink);
  font-size:14.5px; font-weight:700;
  text-decoration:none; white-space:nowrap;
}
.cart-btn svg{ width:19px; height:19px; }
.cart-btn .count{
  position:absolute; top:-6px; right:-6px;
  min-width:19px; height:19px; padding:0 5px;
  border-radius:999px;
  background:var(--cart-count-bg, var(--primary)); color:var(--cart-count-ink, var(--primary-ink));
  border:2px solid var(--card);
  font-size:11px; font-weight:700; line-height:15px; text-align:center;
}
.cart-sum{ display:none; font-variant-numeric:tabular-nums; }

/* Меню каталога: 7 разделов (на телефоне спрятано за бургером) */
/* Служебная строка стоит НАД рабочей (правка юзера: раньше была под ней и
   таскалась при прокрутке). Сюда же переехал телефон — в рабочей строке он
   спорил с кнопками и поиском. */
.cat-nav{
  display:none;
  border-bottom:1px solid var(--border);
}
.cat-nav .pagewrap{
  display:flex; gap:4px; flex-wrap:wrap; align-items:center;
  padding-top:5px; padding-bottom:5px;
}
/* ВСЕ служебные ссылки одного цвета: «Бренды» шли тёмными (--ink), а «Доставка»
   и «Контакты» серыми — строка выглядела разнобойно. Это справочная строка,
   поэтому единый --muted; цветом выделены только «Акции». */
.cat-nav a{
  text-decoration:none; color:var(--muted);
  font-size:14.5px; font-weight:600;
  padding:7px 13px; border-radius:999px;
}
.cat-nav a:hover{ background:var(--surface); color:var(--ink); }
.cat-nav a.is-sale{ color:var(--sale); background:transparent; }
.cat-nav a.is-sale:hover{ background:var(--surface); color:var(--sale); }

@media (min-width:760px){
  .burger{ display:none; }
  .burger[hidden]{ display:none; }
  .site-search{ order:0; flex:1 1 240px; }
  .header-phone-box{ display:flex; }
  .header-actions{ margin-left:0; }
  .hide-mob{ display:flex; }
  .cart-sum{ display:inline; }
  .cat-nav{ display:block; }
  .cat-nav[hidden]{ display:none; }
}


/* ---------- Вертикальный каталог первого экрана (вариант Б) ----------
   Перенесён из mockup-menu.html: раскрытие по наведению с задержкой и
   «безопасным треугольником», работа с клавиатуры (Tab / стрелки / Esc),
   на тач-устройствах — первый тап открывает, второй ведёт в раздел.
   Классы .vc-* свои, с остальной страницей не пересекаются. */
.vc{ display:none; }
.vc[hidden]{ display:none; }
@media (min-width:1000px){
  .vc{ display:flex; flex-direction:column; position:relative; z-index:30; }
  .vc[hidden]{ display:none; }
}
/* Шапка колонки — тихая: тёмная плашка перетягивала внимание на служебный заголовок */
.vc-head{
  display:flex; align-items:center; gap:8px;
  background:var(--card); color:var(--muted);
  border:1px solid var(--border); border-bottom:0;
  padding:11px 14px 9px; border-radius:13px 13px 0 0;
  font-weight:700; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
}
.vc-head svg{ width:15px; height:15px; flex:none; opacity:.75; }
.vc-list{
  list-style:none; margin:0; padding:6px;
  background:var(--card); border:1px solid var(--border); border-top:0;
  border-radius:0 0 13px 13px;
  flex:1;                       /* колонка = высота баннера + преимуществ */
}
.vc-item{ position:static; }
.vc-trigger{
  display:flex; align-items:center; gap:10px; width:100%;
  text-decoration:none; padding:9px 11px; border-radius:9px;
  font-size:14.5px; font-weight:600; color:var(--ink);
  transition:background .14s, color .14s;
}
/* Иконка раздела — в мягкой цветной подложке. Цвета не новые: это оттенки
   уже принятой палитры (пурпур, малиновый, сталь, зелёный, золото, слива, индиго),
   разведённые по разделам, чтобы колонка читалась с одного взгляда. */
.vc-trigger .vc-ic{
  width:28px; height:28px; padding:5px; flex:none;
  border-radius:9px; background:var(--sec-bg, var(--surface)); color:var(--sec-ink, var(--muted));
  transition:none;
}
/* Цвет иконок ОДИН на все разделы — фирменный пурпур (было семь разных).
   Значения — в токенах --ico-bg/--ico-ink рядом с палитрой: ими же покрашены
   плитки разделов, «Как купить» и «бургер», чтобы плашки не разъезжались. */
.vc-list > li{ --sec-bg:var(--ico-bg); --sec-ink:var(--ico-ink); }
/* Число категорий — справочная мелочь, а не сигнал: жёлтая плашка забирала всё
   внимание на себя. Жёлтый оставляем счётчикам корзины и избранного. */
.vc-trigger .vc-cnt{
  margin-left:auto;
  color:var(--muted); font-size:12px; font-weight:600; line-height:1;
  font-variant-numeric:tabular-nums;
}
/* auto — потому что счётчик категорий, который раньше держал отступ, убран */
.vc-trigger .vc-chev{ width:14px; height:14px; flex:none; margin-left:auto; opacity:.7; }
/* Открытый раздел — НЕЖНОЕ выделение (образцы: 24btt и ДНС). Была залитая
   пурпурная плашка с белым текстом — слишком громко для навигации.
   Стало: мягкая подложка --accent-soft + пурпурный текст, как у активного
   пункта в тех же меню. Иконка не сливается с подложкой строки: её плашка
   становится белой (--card), сама иконка остаётся пурпурной. */
.vc-item.is-open > .vc-trigger,
.vc-trigger[aria-expanded="true"]{ background:var(--vc-open-bg); color:var(--vc-open-ink); }
.vc-item.is-open > .vc-trigger .vc-ic{ background:var(--vc-open-icbg); color:var(--vc-open-ink); }
.vc-item.is-open > .vc-trigger .vc-chev{ color:var(--vc-open-ink); opacity:1; }
.vc-item.is-open > .vc-trigger .vc-cnt{ color:var(--vc-open-ink); opacity:.75; }
.vc-panel{
  position:absolute; left:100%; top:0;
  width:520px; max-width:none; z-index:40;
  margin-left:8px;
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow); padding:20px 22px;
  animation:vcFlyIn .16s ease-out;
}
.vc-panel[hidden]{ display:none !important; }
/* «мостик» слева, перекрывающий отступ между колонкой и панелью */
.vc-panel::before{ content:""; position:absolute; top:0; bottom:0; left:-14px; width:14px; }
.vc-panel h4{ margin:0 0 14px; font-size:16px; letter-spacing:-.01em; }
.vc-panel h4 span{ color:var(--muted); font-weight:500; font-size:13.5px; }
@keyframes vcFlyIn{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }
.vc-grid{ display:grid; gap:16px 22px; grid-template-columns:repeat(2,1fr); }
.vc-grp{ break-inside:avoid; }
.vc-grp-t{
  display:block; text-decoration:none; font-weight:700; font-size:15px; color:var(--ink);
  padding:3px 6px; margin:0 -6px 4px; border-radius:7px;
}
.vc-grp-t:hover{ color:var(--vc-sub-hover-ink); background:var(--vc-sub-hover-bg); }
.vc-grp-l{ list-style:none; margin:0; padding:0; }
.vc-grp-l a{
  display:block; text-decoration:none; font-size:14px; color:var(--muted);
  padding:4px 6px; margin:0 -6px; border-radius:7px; line-height:1.35;
}
.vc-grp-l a:hover{ color:var(--vc-sub-hover-ink); background:var(--vc-sub-hover-bg); }
/* количество товаров: справочная мелочь рядом с названием, не сигнал */
.vc-q{
  font-size:11.5px; font-weight:500; color:var(--muted); opacity:.75;
  font-variant-numeric:tabular-nums; margin-left:3px;
}
.vc-grp-t .vc-q{ font-weight:600; }
.vc-foot{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--border);
}
.vc-pf{
  text-decoration:none; font-size:13.5px; font-weight:700;
  padding:8px 14px; border-radius:999px;
  background:var(--surface); color:var(--ink); border:1px solid var(--border);
}
.vc-pf:hover{ border-color:var(--accent); color:var(--accent-txt); }
.vc-pf-main{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.vc-pf-main:hover{ background:var(--accent-deep); color:var(--accent-ink); border-color:var(--accent-deep); }
.vc-pf-sale{ color:var(--sale); border-color:var(--sale); background:transparent; }
.vc-pf-sale:hover{ background:var(--sale); color:#FFFFFF; border-color:var(--sale); }
@media (hover: none){
  .vc-grp-t:hover, .vc-grp-l a:hover{ background:transparent; color:inherit; }
  .vc-pf:hover{ border-color:var(--border); color:var(--ink); }
}

/* ---------- Кнопка «Каталог» в шапке и выпадающий каталог ----------
   На внутренних страницах слева стоят фильтры, поэтому колонки каталога там
   нет: разделы открываются кнопкой из шапки — как на btt24.ru. Кнопка стоит
   и на главной, но там при открытии левая колонка каталога прячется, чтобы
   один и тот же каталог не показывался на экране дважды.
   Внутри выпадающего блока живёт ТОТ ЖЕ виджет .vc-*, что и на главной. */
.cat-wrap{ position:relative; flex:none; }
.cat-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:42px; padding:0 18px; border:0; border-radius:12px; cursor:pointer;
  background:var(--accent); color:var(--accent-ink);
  font:inherit; font-size:15px; font-weight:700; line-height:1;
  transition:background .14s;
}
.cat-btn:hover{ background:var(--accent-deep); }
.cat-btn svg{ width:17px; height:17px; flex:none; }
.cat-btn .cat-btn-x{ display:none; }
.cat-btn[aria-expanded="true"]{ background:var(--accent-deep); }
.cat-btn[aria-expanded="true"] .cat-btn-i{ display:none; }
.cat-btn[aria-expanded="true"] .cat-btn-x{ display:block; }

/* Выпадающий каталог — БЕЛЫЙ ЛИСТ во всю ширину контента (образец 24btt):
   слева список разделов, справа подкатегории открытого раздела, всё на одной
   карточке. Затемнение страницы убрано — лист сам отделяет каталог от контента.
   Координаты (left/top/width) ставит JS: top считается от низа ЛИПКОЙ шапки,
   поэтому при прокрутке лист остаётся под ней, а не уезжает вверх. */
.cat-drop{
  /* Лист живёт ВНУТРИ липкой шапки и прижат к её низу (top:100%) — никакого
     пересчёта на scroll: раньше координаты считал JS и зазор «плавал», отставая
     от шапки на кадр. Ширина — по контенту, как .pagewrap. */
  position:absolute; z-index:60; top:100%; left:50%; transform:translateX(-50%);
  width:min(100% - 44px, 1240px);
  background:var(--card);
  border:1px solid var(--border);
  border-top:0;
  border-radius:0 0 16px 16px;
  /* тень только вниз и ТАКАЯ ЖЕ, как у шапки: тень по кругу дала бы тёмную полосу
     в стыке, а более сильная — обрыв тени на линии, где кончается лист */
  box-shadow:var(--head-shadow);
  padding:8px;
  --vc-w:266px;
}
.cat-drop[hidden]{ display:none !important; }
/* Внутри листа: слева список, справа подкатегории. Панель НЕ может быть соседом
   списка в строке — по разметке она лежит внутри своего <li>, поэтому остаётся
   абсолютной, но растягивается от колонки списка до правого края листа.
   Высоту листа под панель выставляет JS (--drop-h). */
.cat-drop .vc{ display:block; position:static; min-height:var(--drop-h,0px); }
.cat-drop .vc-list{
  width:var(--vc-w,266px);
  background:transparent; border:0; border-radius:12px; padding:4px;
}
.cat-drop .vc-head{ display:none; }
.cat-drop .vc-item{ position:static; }
.cat-drop .vc-panel{
  left:calc(var(--vc-w,266px) + 6px); right:0; top:4px; width:auto; max-width:none;
  margin:0; border:0; border-radius:12px; box-shadow:none;
  animation:none; padding:4px 4px 8px 18px;
  border-left:1px solid var(--border);
}
/* на широком листе подкатегории раскладываются в три колонки, как у 24btt */
.cat-drop .vc-grid{ grid-template-columns:repeat(3,1fr); }
/* на главной: пока каталог раскрыт кнопкой, колонка слева не дублирует его */
.is-catopen .vc-col{ visibility:hidden; }
/* в выпадающем блоке каталог показываем всегда — колонка первого экрана
   привязана к ширине контейнера, а кнопка работает на любой ширине */
.cat-drop .vc{ display:flex; }
.cat-drop .vc[hidden]{ display:none !important; }
/* на телефоне каталог открывается «бургером», отдельная кнопка не нужна */
.cat-wrap{ display:none; }
.cat-wrap[hidden]{ display:none; }
@media (min-width:760px){
  .cat-wrap{ display:block; }
  .cat-wrap[hidden]{ display:none; }
}

/* ============================================================
   ПЕРВЫЙ ЭКРАН ГЛАВНОЙ: слайдер + колонка каталога + преимущества
   Перенесено из design/v2-purpur/mockup-home.html; @container → @media
   (в макете контейнерные запросы были только затем, чтобы в одном файле
   рядом жили десктоп и телефон — комментарий в самом макете). Единицы cqw
   заменены на vw с теми же порогами срабатывания clamp().
   ============================================================ */

/* ---------- Слайдер на месте хиро ----------
   Пропорция 104/43 взята с боевых баннеров pet-market (1040×430) — картинки
   оттуда лягут без обрезки. Автопрокрутки НЕТ (решение по макету). */
.slider{ position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.slide{ display:none; }
.slide.on{ display:block; }
.slide[hidden]{ display:none; }
.slide-img{
  display:block; width:100%; aspect-ratio:104/43;   /* пропорция баннеров pet-market */
  background-size:cover; background-position:center;
}
/* запасной «свой» слайд магазина — отключён заказчиком (data-off), стили
   оставлены: чтобы вернуть, достаточно снять data-off и добавить точку */
.slide-own{
  background:var(--panel-dark); color:var(--panel-dark-ink);
  padding:26px 22px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:12px; justify-content:center;
  min-height:210px;
}
.slide-own::after{
  content:""; position:absolute; right:-70px; bottom:-90px;
  width:260px; height:260px; border-radius:50%;
  background:rgba(123,79,240,.16);
}
.slide-own > *{ position:relative; }
.slide-own h2{
  margin:0; font-family:var(--font);
  font-size:clamp(21px, 3.2vw, 32px);
  line-height:1.15; letter-spacing:-.02em; text-wrap:balance;
  color:var(--panel-dark-ink);
}
.slide-own p{ margin:0; color:var(--panel-dark-muted); font-size:14.5px; max-width:46ch; }
.hero-kicker{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--panel-dark-accent);
}
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.btn-on-dark{ border-color:var(--panel-dark-muted); color:var(--panel-dark-ink); background:transparent; }
@media (min-width:760px){
  .slide-own{ aspect-ratio:104/43; min-height:0; padding:30px 28px; }
}
/* Точки слайдера — УТВЕРЖДЁННЫЙ вариант (три другие итерации забракованы,
   не «улучшать»): неактивные — белые полупрозрачные кружки 7px, активная —
   жёлтая пилюля 22×7, у всех мягкая тень для читаемости на светлых баннерах. */
.slider-dots{
  position:absolute; left:16px; bottom:14px;
  display:flex; align-items:center; gap:6px;
  width:max-content;
}
/* Размер точек: в макете были 7px и пилюля 22×7 — заказчик сразу отметил, что
   «на реальном сайте будет крупнее, потом поправим». Укрупнены на 30%:
   7→9px, пилюля 22×7→29×9. Вид не меняем — три варианта оформления уже
   забракованы, читаемость на светлых баннерах держит тень. */
.slider-dots button{
  width:9px; height:9px; padding:0; border:0; cursor:pointer;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  box-shadow:0 1px 2px rgba(20,21,24,.35);
  transition:width .2s ease, background .2s ease;
}
.slider-dots button:hover{ background:#fff; }
.slider-dots button[aria-current="true"]{
  width:29px;
  background:var(--count-bg);
}

/* ---------- Сетка первого экрана ----------
   Слева колонка каталога 266px (виджет .vc), справа слайдер, под ним полоса
   преимуществ. На узких экранах колонки нет — каталог живёт в «бургере». */
.hero{ padding:14px 0 4px; }
@media (min-width:760px){ .hero{ padding:20px 0 6px; } }
.hero-grid{ display:grid; gap:12px; align-items:stretch; }
.hero-main{ display:flex; flex-direction:column; gap:12px; min-width:0; }
@media (min-width:1000px){
  .hero-grid{ grid-template-columns:266px minmax(0,1fr); }
}

/* Плашки преимуществ под баннером */
.usp{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:8px; align-content:start;
}
.usp li{
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; box-shadow:var(--shadow-sm);
}
.usp .usp-ico{
  width:30px; height:30px; border-radius:9px; flex:none;
  background:var(--ico-bg); color:var(--ico-ink);
  display:flex; align-items:center; justify-content:center;
}
.usp .usp-ico svg{ width:16px; height:16px; }
.usp b{ display:block; font-size:13.8px; line-height:1.25; }
.usp span{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.35; }
@media (min-width:640px) and (max-width:999px){
  .usp{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1000px){
  .usp{ grid-template-columns:repeat(4,1fr); }   /* под баннером — четыре в ряд */
}

/* ---------- Секции главной ---------- */
.home-sec{ padding:22px 0 2px; }
@media (min-width:760px){ .home-sec{ padding:30px 0 4px; } }
.home-head{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-bottom:12px;
}
.home-head h2{
  margin:0; font-family:var(--font);
  font-size:clamp(19px, 2.6vw, 25px);
  letter-spacing:-.015em; line-height:1.2;
}
.home-head .all-link{
  margin-left:auto;
  font-size:14px; font-weight:600;
  color:var(--accent-txt); text-decoration:none; white-space:nowrap;
}
.home-head .home-note{ flex:1 1 100%; margin:0; font-size:13.5px; color:var(--muted); }
/* Телефонный вид макета сокращает ссылки секций до «Все →» — слово прячем.
   display:inline (не unset): свой display перебил бы hidden, тут его нет, но
   правило одно и просто. */
.m-hide{ display:none; }
@media (min-width:760px){ .m-hide{ display:inline; } }

/* ---------- Плитки разделов каталога ---------- */
.cat-grid{ display:grid; gap:10px; grid-template-columns:repeat(2,1fr); }
.cat-tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:13px;
  text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.cat-tile:hover{ text-decoration:none; }
.cat-tile b{ font-size:14.5px; font-weight:700; line-height:1.25; }
.cat-ico{
  width:42px; height:42px; border-radius:12px; flex:none;
  background:var(--ico-bg); color:var(--ico-ink);
  display:flex; align-items:center; justify-content:center;
}
.cat-ico svg{ width:23px; height:23px; }
.cat-tile.more .cat-ico{ background:var(--surface); color:var(--muted); }
.cat-tile.more b{ color:var(--muted); font-weight:600; }
@media (min-width:760px){
  .cat-grid{ grid-template-columns:repeat(4,1fr); gap:14px; }
  .cat-tile{ flex-direction:row; align-items:center; padding:14px 16px; }
}

/* ---------- Блок «Бренды» на главной (из макета) ----------
   Текстовый вариант: логотипы брендов в базе мусорные (случайные имена,
   превью 100×100 вперемешку), поэтому чипы-облако, как в макете.
   Порядок по решению заказчика: облако брендов → «Класс корма:» → «Страна:»
   (карточку одного топ-бренда убрали — выделять один бренд рекламно). */
/* На телефоне остаётся только облако чипов — справочные ряды классов и стран
   появляются с 760px. */
.brand-classes,
.brand-countries{ display:none; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 0; }
.brand-classes + .brand-countries{ margin-top:8px; }
@media (min-width:760px){
  .brand-classes,
  .brand-countries{ display:flex; }
}
.brand-classes .lbl,
.brand-countries .lbl{ font-size:13px; color:var(--muted); }
/* .w-chip на главной — ссылка на страницу брендов с применённым фильтром
   (?class=/?country=). Ту же базу .w-chip носят кнопки фасовок каталога
   (shop.css, button.w-chip) — ссылочные мелочи вешаем только на a.w-chip. */
.w-chip{
  display:inline-flex; border:1.5px solid var(--border);
  background:var(--card); color:var(--ink);
  border-radius:999px; padding:7px 14px;
  font-size:13.5px; font-weight:600;
}
a.w-chip{ text-decoration:none; }
a.w-chip:hover{ text-decoration:none; }   /* глобальный a:hover подчёркивает */
@media (hover:hover){
  a.w-chip{ transition:border-color .14s ease, color .14s ease; }
  a.w-chip:hover{ border-color:var(--accent); color:var(--accent-txt); }
}
.brand-cloud{ display:flex; gap:8px; flex-wrap:wrap; }
.brand-chip{
  display:inline-flex; padding:8px 14px;
  border:1px solid var(--border); border-radius:999px;
  background:var(--card);
  font-size:13.5px; font-weight:600;
  color:var(--ink); text-decoration:none;
}
.brand-chip:hover{ text-decoration:none; }
.brand-chip.more{ color:var(--accent-txt); border-style:dashed; }

/* ---------- Блок доверия / условий («Как купить») ---------- */
.trust-grid{ display:grid; gap:10px; }
.trust-card{
  display:flex; align-items:flex-start; gap:13px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:15px 16px;
  box-shadow:var(--shadow-sm);
}
.trust-ico{
  flex:none;
  width:42px; height:42px; border-radius:12px;
  background:var(--ico-bg); color:var(--ico-ink);
  display:flex; align-items:center; justify-content:center;
}
.trust-ico svg{ width:22px; height:22px; }
.trust-card b{ display:block; font-size:15px; margin-bottom:2px; }
.trust-card p{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.5; }
@media (min-width:760px){ .trust-grid{ grid-template-columns:repeat(3,1fr); } }

/* ---------- Отклик на наведение (только мышь) ----------
   Карточки слегка приподнимаются с тенью — знак кликабельности (приём 24btt).
   На тач-устройствах hover не срабатывает и ничего не «залипает». */
@media (hover:hover){
  .tile, .cat-tile, .trust-card, .usp li{
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  /* Плашки преимуществ (.usp li) откликаются так же, как плитки разделов —
     просьба заказчика: ряд под баннером выглядел «мёртвым» рядом с живыми
     плитками. Сами плашки не ссылки, подъём здесь — оживление, а не обещание
     перехода, поэтому курсор не меняем. */
  .tile:hover, .cat-tile:hover, .usp li:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-lift);
    border-color:var(--border-strong, var(--border));
  }
  .trust-card:hover{ box-shadow:var(--shadow-lift); }
}

/* ---------- Логотип «Лапка» (утверждён заказчиком, см. design/mockup-logo.html) ----------
   Лапа заменяет букву «О» в слове АРТЕМОН. Всё внутри задано в em, поэтому размер
   логотипа целиком меняется одним font-size на .logo (шапка / телефон / подвал). */
.logo{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:20px;              /* базовый размер: пудель 56px */
  line-height:1; white-space:nowrap; text-decoration:none;
}
.logo:hover{ text-decoration:none; }
.logo-pudel{ display:block; height:2.8em; width:auto; flex:none; }
.logo-text{ display:inline-flex; flex-direction:column; align-items:center; line-height:1; }
.logo-name{
  display:inline-flex; align-items:center;
  font-family:"Trebuchet MS", Tahoma, "Segoe UI", sans-serif;
  font-weight:600; font-size:1.5em; line-height:1;   /* легче и мельче: надпись не спорит с пуделем */
  text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink);
}
.logo-paw{
  width:.88em; height:.88em; margin:0 .05em; flex:none;
  color:var(--logo-paw-color, var(--accent));
}
.logo-sub{
  margin-top:.32em;
  font-family:var(--font); font-size:.5em; font-weight:600;
  letter-spacing:.26em; padding-left:.26em;   /* компенсация разрядки для центровки */
  text-transform:uppercase; color:var(--muted);
}
.logo-footer{ font-size:13px; }             /* подвал: пудель ~36px */

/* Плашка логотипа — только для служебных страниц (ошибка/офлайн) */
.logo-plate{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 12px;
}
.logo-plate img{ display:block; height:auto; }
:root[data-theme="dark"] .logo-plate{ background:#f7f7f8; }

/* ---------- Раскладка контента ---------- */
.site-main{ padding:22px 0 40px; }
.layout-with-sidebar{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:900px){
  .layout-with-sidebar{ grid-template-columns:270px 1fr; }
}
.sidebar > *{ margin-bottom:16px; }
.breadcrumbs{ padding:12px 0; color:var(--muted); font-size:14px; }
.breadcrumbs a{ color:var(--muted); }

/* Обёртка позиции home-top (если появится модуль над первым экраном) */
.home-top{ padding:18px 0 0; }

/* Карточка-модуль (sidebar style="card") */
.moduletable.card, .sidebar .card, .module-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow);
}
.moduletable .mod-title, .module-card h3{ font-size:16px; margin:0 0 12px; }

/* ---------- Подвал ----------
   Тёмная панель из макета (mockup-home.html): --panel-dark, ТРИ колонки —
   бренд/контакты + «Каталог» + «Покупателям». Четвёртая («Реквизиты», одни
   заглушки-плейсхолдеры) снята по правке заказчика 23.07.2026 вместе с
   разметкой. Старый светлый подвал (.footer-grid/.footer-col) удалён давно. */
.site-footer{
  margin-top:26px;
  background:var(--panel-dark);
  color:var(--panel-dark-muted);
}
.foot-grid{
  display:grid; gap:22px;
  padding-top:26px; padding-bottom:22px;
}
/* «Каталог» и «Покупателям» — единый блок из двух колонок рядом (правка
   заказчика 23.07.2026: врозь по всей ширине смотрелось пусто). На мобильном
   тоже 2 колонки — пункты короткие, помещаются. */
.foot-menus{ display:grid; grid-template-columns:1fr 1fr; gap:22px 28px; }
@media (min-width:760px){
  /* Слева брендовая колонка, справа — пара меню, и КАЖДОЕ меню на десктопе
     раскладывает свой список в 2 подколонки (правка заказчика 23.07.2026:
     «Каталог» 7 пунктов → 4+3, «Покупателям» 6 → 3+3). columns, а не grid —
     заполнение вертикальное: первые пункты столбиком слева, хвост справа.
     Раз меню стали вдвое шире — блоку меню и доля больше (1fr / 1.8fr).
     Мобильная раскладка не тронута — там каждое меню в 1 колонку. */
  .foot-grid{ grid-template-columns:1fr 1.8fr; gap:48px; }
  .foot-menus{ gap:28px; }
  .foot-col ul{ columns:2; column-gap:26px; }
  .foot-col li{ break-inside:avoid; }
  /* Каждое меню — в рамке с центрированным заголовком (правка заказчика
     23.07.2026: чтобы было видно, какие пункты к «Каталогу», какие к
     «Покупателям»). Только десктоп — мобильную раскладку заказчик принял. */
  .foot-menus .foot-col{
    border:1px solid var(--panel-dark-border);
    border-radius:14px;
    padding:18px 22px 16px;
  }
  .foot-menus .foot-h{ text-align:center; margin-bottom:14px; }
}
.foot-col b.foot-h{
  display:block;
  color:var(--panel-dark-ink);
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:10px;
}
.foot-col ul{ list-style:none; margin:0; padding:0; }
.foot-col li{ margin:6px 0; }
.foot-col a{ color:var(--panel-dark-muted); text-decoration:none; font-size:14px; }
.foot-col a:hover{ color:var(--panel-dark-ink); }
.foot-about .foot-logo{
  color:var(--panel-dark-ink);
  font-size:19px; font-weight:800; letter-spacing:-.01em;
  display:flex; align-items:center; gap:9px;
}
.foot-about .foot-logo svg{ width:22px; height:22px; color:var(--panel-dark-accent); }
.foot-about p{ margin:8px 0 0; font-size:13.5px; line-height:1.55; }
.foot-about .foot-phone{
  display:inline-block; margin-top:10px;
  color:var(--panel-dark-ink); font-size:16px; font-weight:700; text-decoration:none;
}
.foot-bottom{
  border-top:1px solid var(--panel-dark-border);
  padding:14px 0 20px;
  font-size:12.5px; line-height:1.6;
}
.foot-bottom a{ color:var(--panel-dark-accent); text-decoration:underline; text-underline-offset:3px; }
/* Тумблер темы — круглая кнопка-значок в .foot-bottom (правка заказчика
   23.07.2026: текстовую ссылку не замечали). Светлая тема → луна («включить
   тёмную»), тёмная → солнце; подвал тёмный в обеих темах, поэтому цвета —
   токены panel-dark. Хук .theme-toggle (template.js) сохранён. */
.site-footer .pagewrap{ position:relative; }
.foot-theme{
  position:absolute; top:24px; right:22px; z-index:1;
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--panel-dark-border);
  background:var(--panel-dark-2);
  color:var(--panel-dark-accent);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
.foot-theme svg{ width:18px; height:18px; }
.foot-theme .ico-sun{ display:none; }
:root[data-theme="dark"] .foot-theme .ico-sun{ display:block; }
:root[data-theme="dark"] .foot-theme .ico-moon{ display:none; }
.foot-theme:hover{ color:var(--panel-dark-ink); border-color:var(--panel-dark-muted); }

/* ---------- Кнопка «Наверх» ----------
   Появляется после прокрутки (~500px, template.js): JS один раз снимает
   hidden, дальше видимость — класс .is-on (у скрытой pointer-events:none,
   чтобы прозрачная не ловила клики). Токены обеих тем накрывают и тёмную.
   z-index 70: выше липкой шапки (50), ниже панели покупки товара (80,
   shop.css) и drawer'ов (90/95). На телефоне на странице товара низ занят
   .buybar — приподнимаем кнопку над ней (панель ~64px + отступ). */
.to-top{
  position:fixed; right:20px; bottom:20px; z-index:70;
  width:46px; height:46px; border-radius:50%;
  border:none; padding:0; cursor:pointer;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:var(--shadow-lift);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.to-top[hidden]{ display:none !important; }   /* свой display — парное правило (грабля hidden) */
.to-top.is-on{ opacity:1; transform:none; pointer-events:auto; }
.to-top svg{ width:20px; height:20px; }
@media (hover:hover){
  .to-top:hover{ filter:brightness(1.1); }
}
@media (max-width:719px){
  body:has(.shop-product) .to-top{ bottom:96px; }
}

/* ---------- Страница ошибки/офлайн ---------- */
.error-page{
  max-width:520px; margin:8vh auto; padding:0 20px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.error-page .error-code{ font-family:var(--font-display); font-size:64px; color:var(--accent); margin:6px 0 0; line-height:1; }
.error-page h1{ margin:0; }

/* ============================================================
   Адаптив: мобильная шапка и «бургер»-меню (drawer из макета)
   ============================================================ */
@media (max-width:860px){
  .logo{ font-size:14.3px; }   /* шапка на телефоне: пудель ~40px */
}

/* Обёртка меню: на сайте drawer живёт поверх страницы (в макете он был показан
   отдельным «экраном телефона», у него обёртки не было). z-index выше шапки (50)
   и листа каталога (60). */
.drawer-wrap{
  position:fixed; inset:0; z-index:90;
  background:var(--card); overflow:auto;
}
.drawer-wrap[hidden]{ display:none !important; }
@media (min-width:760px){
  /* на десктопе бургера нет — меню недостижимо, прячем на всякий случай */
  .drawer-wrap{ display:none; }
}
.drawer{
  background:var(--card);
  display:flex; flex-direction:column;
  min-height:100%;
}
.drawer-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.drawer-head .close{ margin-left:auto; }
.drawer-list{ list-style:none; margin:0; padding:6px 8px; }
.drawer-list li a{
  display:flex; align-items:center; gap:12px;
  padding:11px 10px;
  border-radius:11px;
  text-decoration:none; color:var(--ink);
  font-size:15px; font-weight:600;
}
.drawer-list li a:hover{ background:var(--surface); text-decoration:none; }
.drawer-list .d-ico{
  width:34px; height:34px; border-radius:10px; flex:none;
  background:var(--ico-bg); color:var(--ico-ink);
  display:flex; align-items:center; justify-content:center;
}
.drawer-list .d-ico svg{ width:19px; height:19px; }
.drawer-list .d-ico.plain{ background:var(--surface); color:var(--muted); }
.drawer-list .chev{ margin-left:auto; color:var(--muted); font-weight:400; }
.drawer-list li a.is-sale{ color:var(--accent-txt); }
.drawer-sep{ border:none; border-top:1px solid var(--border); margin:6px 14px; }
.drawer-foot{
  margin-top:auto;
  padding:12px 16px 16px;
  border-top:1px solid var(--border);
  font-size:13.5px; color:var(--muted);
}
.drawer-foot .header-phone{ font-size:15px; }