/* ================= ТЁМНАЯ ТЕМА VSK-M (тёмно-серая, не чёрная) ================= */
html[data-theme="dark"]{
  --page:#24262b;
  --surface:#2d3036;
  --text:#e3e5e9;
  --muted:#9aa0a8;
  --line:#3b3f46;
  --black:#eceef1;
  --dark-1:#eceef1;
  --dark-2:#c7cad0;
  --red-soft:#3d282b;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 16px rgba(0,0,0,.5);
  --sh-3:0 12px 32px rgba(0,0,0,.6);
}
html[data-theme="dark"] body{background:var(--page);color:var(--text)}

/* Шапка */
html[data-theme="dark"] .hdr-topwrap{background:#2d3036 !important}
html[data-theme="dark"] .hdr.stuck{background:rgba(36,38,43,.95)}
html[data-theme="dark"] .search input{background:#24262b;color:#e3e5e9;border-color:#3b3f46}
html[data-theme="dark"] .search input::placeholder{color:#8a9099}
html[data-theme="dark"] .search-res{background:#2d3036;color:#e3e5e9}
html[data-theme="dark"] .sr-item:hover{background:#35383f}
html[data-theme="dark"] .hdr-nav{background:#16171a}

/* Кнопка переключения темы */
.theme-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:transparent;
  cursor:pointer;font-size:19px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:border-color .2s,transform .2s}
.theme-btn:hover{border-color:var(--red);transform:rotate(15deg)}
.hdr-top .theme-btn{margin-left:8px}

/* Карточки и списки */
html[data-theme="dark"] .pcard,html[data-theme="dark"] .prod,html[data-theme="dark"] .spcard,
html[data-theme="dark"] .sidebar,html[data-theme="dark"] .side-cat .n{background:var(--surface)}
html[data-theme="dark"] .side-cat:hover{background:#35383f}
html[data-theme="dark"] .side-cat.on{background:var(--red-soft)}
html[data-theme="dark"] .side-cat.on .n{background:#24262b;color:#f0b6b9}

/* Карточка товара */
html[data-theme="dark"] .g-main{background:#202226}
html[data-theme="dark"] .g-thumb{background:#202226}
html[data-theme="dark"] .pship{background:#2d3036;color:#c7cad0}
html[data-theme="dark"] .badge.soft{background:var(--surface);color:var(--red);border-color:var(--line)}
html[data-theme="dark"] .trust span{background:var(--red-soft);color:#f0b6b9}
html[data-theme="dark"] .specs td{border-color:var(--line)}
html[data-theme="dark"] .order{background:#2d3036}
html[data-theme="dark"] .order input{background:#24262b;color:#e3e5e9;border-color:#3b3f46}
html[data-theme="dark"] .btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
html[data-theme="dark"] .btn.ghost:hover{border-color:var(--red);color:var(--red)}
html[data-theme="dark"] .crumbs a{color:var(--muted)}
html[data-theme="dark"] .mbar{background:rgba(36,38,43,.97);border-top-color:#3b3f46}
html[data-theme="dark"] .sheet{background:#2d3036}
html[data-theme="dark"] .lb{background:rgba(10,10,12,.95)}

/* Главная: hero-блок */
html[data-theme="dark"] .hero{background:var(--page);color:var(--text)}
html[data-theme="dark"] .hero-contacts{background:var(--surface)}
html[data-theme="dark"] .hero-contacts h2,
html[data-theme="dark"] .hero-contacts p,
html[data-theme="dark"] .hero-contacts a{color:var(--text)}
html[data-theme="dark"] .hero-contacts .hc-req{border-top-color:var(--line);color:var(--muted)}
html[data-theme="dark"] .hero-pill{background:var(--red-soft);color:#f0b6b9}
html[data-theme="dark"] .hero-sub{color:var(--muted)}
html[data-theme="dark"] .trust-item{background:var(--surface);color:var(--text)}
html[data-theme="dark"] .sec-title,html[data-theme="dark"] h2,html[data-theme="dark"] h3{color:var(--text)}

/* Переключатель темы: сегмент солнце/луна */
.theme-sw{position:relative;display:inline-flex;gap:2px;background:var(--page);border:1px solid var(--line);
  border-radius:24px;padding:3px;flex-shrink:0}
.hdr-top .theme-sw{margin-left:8px}
.sw-opt{width:40px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:20px;
  cursor:pointer;color:var(--muted);transition:background .2s,color .2s}
.sw-opt:hover{color:var(--text)}
.sw-opt.on{background:var(--line);color:var(--text)}
html[data-theme="dark"] .sw-opt.on{background:#41464e;color:#fff}
html[data-theme="dark"] .theme-sw{background:#202226}
/* Внутренние страницы: заголовки, карточки, футер */
html[data-theme="dark"] .phead h1,html[data-theme="dark"] .sec-title{color:var(--text)}
html[data-theme="dark"] footer{background:#16171a;color:#c7cad0}
html[data-theme="dark"] .foot-grid a{color:rgba(255,255,255,.85)}
html[data-theme="dark"] .ccard,html[data-theme="dark"] .dcard,html[data-theme="dark"] .ocard,
html[data-theme="dark"] .doc-card,html[data-theme="dark"] .pcard-big{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .ccard h2,html[data-theme="dark"] .dcard h2,html[data-theme="dark"] .ocard h2,
html[data-theme="dark"] .ccard h3,html[data-theme="dark"] .dcard h3{color:var(--text)}
html[data-theme="dark"] .ccard h2[style*="color"],html[data-theme="dark"] .dcard h2[style*="color"]{color:var(--text) !important}
html[data-theme="dark"] section h2,html[data-theme="dark"] section h3{color:var(--text)}
html[data-theme="dark"] .crow{border-color:var(--line)}
html[data-theme="dark"] .crow b{color:var(--muted)}
html[data-theme="dark"] .crow a,html[data-theme="dark"] .crow div{color:var(--text)}
html[data-theme="dark"] .crow svg{color:var(--red)}
html[data-theme="dark"] .req{background:#24262b;color:var(--muted)}
html[data-theme="dark"] .req b{color:var(--text)}
html[data-theme="dark"] .dcard p,html[data-theme="dark"] .dcard ul,html[data-theme="dark"] .dcard li{color:#c7cad0}
html[data-theme="dark"] .dcard li b{color:var(--text)}
html[data-theme="dark"] .dcard .note-red,html[data-theme="dark"] .dcard [class*="note"]{background:var(--red-soft);color:#f0b6b9}
html[data-theme="dark"] section p,html[data-theme="dark"] section li,html[data-theme="dark"] section b{color:var(--text)}
html[data-theme="dark"] section .kick,html[data-theme="dark"] section .kick-line,
html[data-theme="dark"] .kick{color:var(--muted) !important}
html[data-theme="dark"] .mapbox{border-color:var(--line)}
html[data-theme="dark"] .kv b,html[data-theme="dark"] .kv div{color:var(--text)}
/* Белые карточки контента -> тёмные */
html[data-theme="dark"] .seo-text,html[data-theme="dark"] .about-card{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .about-card h2,html[data-theme="dark"] .about-card b{color:var(--text)}
html[data-theme="dark"] .why div{background:#24262b;color:#c7cad0}
html[data-theme="dark"] .why div b{color:var(--text)}
html[data-theme="dark"] details{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] details summary{background:var(--surface);color:var(--text)}
html[data-theme="dark"] details p{color:#c7cad0}html[data-theme="dark"] .faqwrap details{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .faqwrap summary{color:var(--text)}

/* Шапка: белая полоса поиска -> тёмная */
html[data-theme="dark"] .hdr-top{background:transparent;color:#e3e5e9}
html[data-theme="dark"] .hdr-topwrap,html[data-theme="dark"] .hdr.stuck .hdr-topwrap{background:#2d3036 !important}
html[data-theme="dark"] .logo{filter:invert(0)}
/* Переключатель сетка/список */
html[data-theme="dark"] .view-toggle{background:var(--surface)}
html[data-theme="dark"] .view-btn{color:var(--muted)}
html[data-theme="dark"] .view-btn.on{background:#41464e;color:#fff}
/* Логотип: D-MOB-9. Раньше в тёмной теме подменяли картинку через хрупкий
   `content:url()` — он не предзагружается, «мигает» при переключении темы и
   полностью исчезает, если файл недоступен. Теперь в .logo два реальных <img>
   (.logo-light / .logo-dark), переключаемых по data-theme на <html>:
   оба кэшируются как обычные картинки, у обоих есть alt/width/height,
   при сбое одной версии показывается вторая (логотип не пропадает). */
.logo .logo-dark{display:none}
.logo .logo-light{display:block}
html[data-theme="dark"] .logo .logo-light{display:none}
html[data-theme="dark"] .logo .logo-dark{display:block}
/* Подбор по авто: светлые надписи и селекты */
html[data-theme="dark"] .af-title{color:var(--text)}
html[data-theme="dark"] .af-row label{color:#c7cad0}
html[data-theme="dark"] .af-row select,
html[data-theme="dark"] .af-row input{background:#202226;color:#e3e5e9}
html[data-theme="dark"] .af-row select option{background:#2d3036;color:#e3e5e9}
html[data-theme="dark"] .af-row select:focus,
html[data-theme="dark"] .af-row input:focus{background:#202226}
/* Защита фото: запрет выделения и перетаскивания */
img{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;user-drag:none;
  -webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;user-select:none}
.g-main,.g-thumb,.pcard-imgwrap,.prod-img{-webkit-touch-callout:none}
/* Корзина: счётчик в шапке и кнопки */
.hdr-cart{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--red);
  font-weight:700;flex-shrink:0}
.hdr-cart svg{display:block}
.hdr-cart span{font-size:13px}
.prod-cart{display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);cursor:pointer;
  font-size:16px;transition:border-color .2s,background .2s}
.prod-cart:hover{border-color:var(--red)}
.prod-cart.added{background:var(--red-soft);border-color:var(--red)}
/* ================= МОБИЛЬНАЯ АДАПТАЦИЯ (все страницы) ================= */
@media(max-width:767px){
  /* Шапка: логотип + корзина/тема/телефон в один ряд, поиск — строкой ниже */
  .hdr-top{flex-wrap:wrap;gap:10px;padding:12px 0}
  .logo img{width:120px;height:auto}
  .search{order:3;flex-basis:100%;max-width:none}
  .theme-sw{order:2}
  .hdr-cart{order:1;margin-left:auto}
  .hdr-phone{order:1;font-size:14px}
  .hdr-phone b{font-size:15px}
  .hdr-phone span{display:none}
  /* Запрет горизонтального скролла */
  html,body{max-width:100%;overflow-x:hidden}
  img{max-width:100%;height:auto}
  /* Отступы */
  .wrap{padding:0 14px}
  /* Карточка товара */
  .pactions{flex-wrap:wrap}
  .pactions .btn,.pactions .btn.ghost{flex:1;min-width:140px}
  /* Корзина */
  .citem{flex-wrap:wrap}
  .citem-right{margin-left:auto;text-align:right;width:100%;display:flex;align-items:center;justify-content:flex-end;gap:12px}
  .citem-sum{margin-top:0}
  /* Заголовки */
  h1{font-size:24px}
  /* Футер */
  .foot-grid{gap:20px}
}
@media(max-width:400px){
  .logo img{width:104px}
  .theme-sw .sw-opt{width:34px;height:30px}
  .hdr-phone b{font-size:13.5px}
  .pactions .btn,.pactions .btn.ghost{min-width:120px;padding:0 10px}
}
/* Каталог на мобильном: карточки ровные */
@media(max-width:767px){
  .prod-foot{flex-wrap:wrap;gap:10px}
  .prod-foot .price{flex:0 0 100%;font-size:19px;white-space:nowrap}
  .prod-cart{flex:1;height:40px}
  .prod-btn{flex:1;justify-content:center;min-width:0}
  .compat{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* Шапка: аккуратные два ряда */
  .hdr-top{row-gap:8px}
  .hdr-cart svg{width:24px;height:24px}
  .hdr-phone{display:flex;flex-direction:column;align-items:flex-end}
}
@media(max-width:420px){
  .prod-btn{padding:0 12px;font-size:13px}
  .prod-cart{width:38px}
}
/* Мобильная шторка фильтров в тёмной теме */
html[data-theme="dark"] .sheet{background:var(--surface);color:var(--text)}
html[data-theme="dark"] .sheet-head b{color:var(--text)}
html[data-theme="dark"] .sheet-close{background:var(--page);color:var(--text)}
html[data-theme="dark"] .sheet-handle{background:#4a4f57}
html[data-theme="dark"] .sheet-body label{color:#c7cad0}
html[data-theme="dark"] .sheet-body select,
html[data-theme="dark"] .sheet-body input{background:#202226;color:#e3e5e9;border-color:var(--line)}
html[data-theme="dark"] .sheet-body select option{background:#2d3036;color:#e3e5e9}
/* Кнопка «Фильтры» (моб) в тёмной теме */
html[data-theme="dark"] .filters-mob{background:var(--surface);color:var(--text);border-color:var(--line)}
/* Мобильная нижняя панель: ровно, ничего не обрезается */
.mbar ul{padding:0}
.mbar li{flex:1;min-width:0}
.mbar a{font-size:11.5px;gap:3px;padding:0 2px}
.mbar a svg{width:20px;height:20px}
.mbar .mbar-fit{flex:1.15;min-width:0;padding:4px 0}
.mbar .mbar-fit a{flex:none;width:100%;border-radius:var(--r-md);margin:6px 2px;padding:0 4px;min-height:44px}
.mbar .mbar-fit a span{white-space:nowrap;font-size:11.5px}
/* Корзина на мобильном: панель оформления без наложений */
@media(max-width:767px){
  .ccard{padding:18px}
  .ccard h3{font-size:17px}
  .ctotal{flex-wrap:wrap;row-gap:4px;margin:16px 0 12px}
  .ctotal span:first-child{font-size:16px}
  .ccard .btn{width:100%;margin-top:0}
  .err,.hint{width:100%;clear:both}
  .err{margin-top:10px}
  .hint{margin-top:12px}
}
/* Кнопка расчёта доставки СДЭК */
.btn-cdek{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:44px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--text);
  font-family:var(--font-ui);font-size:14px;font-weight:600;cursor:pointer;transition:border-color .2s}
.btn-cdek:hover{border-color:var(--red);color:var(--red)}
.cart-left{display:flex;flex-direction:column;min-width:0}

/* ================= ИТЕРАЦИЯ 3: ДОСТУПНОСТЬ И ЕДИНЫЕ ТОКЕНЫ ================= */
/* D14 (WCAG 2.4.7): единое видимое кольцо фокуса для кнопок, ссылок, полей и карточек */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible{
  outline:2px solid var(--red);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
/* D15 (WCAG 1.4.11, non-text contrast 3:1): границы интерактивных полей.
   --border-input ≈3.0:1 (светлая) / ≈3.3:1 (тёмная) вместо бледного #E4E6EA (1.1:1). */
:root{ --border-input:#9A9AA2; --danger:#D21F28; --ok:#178A3C; --ok-bg:#E8F7EC; --red-text:var(--red-dark); }
html[data-theme="dark"]{ --border-input:#5c616a; --red-text:#F0B6B9; }

/* Вспомогательные классы для корзины (итерация 3) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Обязательное поле: красная звёздочка + легенда над формой (Baymard #7) */
.field-req{color:var(--danger);font-weight:700;margin-left:2px}
/* Inline-ошибка под полем (Baymard #9: adaptive-ошибки) */
.field-err{display:none;color:var(--danger);font-size:12.5px;margin-top:5px;font-weight:500;line-height:1.4}
.field-err.show{display:block}
/* Невалидное поле: рамка + мягкая подсветка; ошибка дублируется текстом рядом (не только цветом) */
.invalid{border-color:var(--danger)!important}
.invalid:focus{box-shadow:0 0 0 2px rgba(210,31,40,.15)!important}
/* Сворачиваемый блок (карта ПВЗ, «Нужна доставка?») */
.collapse-body{display:none}
.collapse-body.open{display:block}
/* Радио-тариф: строка-карточка, вся кликабельна; выбранная — рамка и фон --red (Baymard: кнопки, не дропдауны) */
.tariff-row{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1.5px solid var(--line);
  border-radius:var(--r-md);margin-bottom:8px;cursor:pointer;transition:border-color .2s,background .2s}
.tariff-row:hover{border-color:var(--red)!important;background:rgba(128,128,128,.06)}
.tariff-row:has(input:checked){border-color:var(--red)!important;background:rgba(227,30,36,.05)}
.tariff-row input{accent-color:var(--red);flex-shrink:0;width:18px;height:18px}