/* ============================================================
   главная . Единый брендкит: светлая витрина, тёмная/светлая админка.
   Цвета, шрифты, радиусы и состояния идут только из токенов.
   ============================================================ */

:root{
  /* Брендкит Умного Магазина: светлая витрина */
  --accent:#D8B45C;
  --accent-hover:#E7C87A;
  --accent-press:#A97C2C;
  --accent-soft:#F6EFD9;
  --accent-ink:#241A06;

  --bg:#FFFFFF;
  --bg-2:#F8F9FB;
  --panel:#FFFFFF;
  --ink:#1A1D23;
  --ink-2:#343A46;
  --muted:#6B7280;
  --faint:#98A2B0;
  --line:rgba(0,0,0,.08);
  --line-2:rgba(0,0,0,.05);

  --dark:#0E1116;
  --dark-2:#161A21;
  --dark-line:rgba(255,255,255,.08);
  --dark-ink:#ECEEF2;
  --dark-muted:#98A2B0;

  --ok:#46B27A; --ok-soft:#E9F6EF;
  --ok-hover:#5BC48D; --ok-ink:#FFFFFF;
  /* Кнопка «Сохранить» (.tb-btn.save) — тот же зелёный, что у .success, своих цветов у неё нет. */
  --save:var(--ok); --save-ink:var(--ok-ink); --save-hover:var(--ok-hover); --save-active:var(--ok-hover);
  --icon-floppy:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'><path d='M1792 128q27 0 50 10t40 27t28 41t10 50v1664H357l-229-230V256q0-27 10-50t27-40t41-28t50-10zM512 896h1024V256H512zm768 512H640v384h128v-256h128v256h384zm512-1152h-128v768H384V256H256v1381l154 155h102v-512h896v512h384z'/></svg>");
  --warn:#EA9A46; --warn-soft:#FBF3E6;
  --danger:#E5544E; --danger-soft:#FBEAE9;
  --danger-hover:#EC6B66; --danger-ink:#FFFFFF;
  --toast-fg:#FFFFFF;
  --toast-success-bg:#46B27A; --toast-error-bg:#E5544E; --toast-warn-bg:#EA9A46; --toast-info-bg:#15171C;
  --ob-acc-0:#D8B45C; --ob-acc-1:#C3D0DB; --ob-acc-2:#46B27A; --ob-acc-3:#EA9A46; --ob-acc-4:#2B2F36;
  --r-sm:5px; --r-md:6px; --r-lg:8px; --r-xl:11px; --r-pill:999px;
  --sp-1:6px; --sp-2:10px; --sp-3:16px; --sp-4:24px; --sp-5:36px; --sp-6:56px; --sp-7:88px;

  /* Ряд размеров кнопок (брендбук админки): маленькая / средняя.
     md — размер базовой .tb-btn (высота 42px), sm — размер .st-toggle (32px). */
  --btn-sm-h:32px; --btn-sm-pad-x:12px; --btn-sm-radius:4px; --btn-sm-font:12.5px; --btn-sm-weight:300; --btn-sm-gap:6px; --btn-sm-icon:15px;
  --btn-md-h:42px; --btn-md-pad-x:16px; --btn-md-radius:5px; --btn-md-font:13.5px; --btn-md-weight:350; --btn-md-gap:8px; --btn-md-icon:19px;
  --dur-fast:150ms; --dur-base:240ms; --dur-slow:360ms;
  --ease-out:var(--ease-out); --ease-move:var(--ease-move);
  --shadow-sm:0 1px 2px rgba(20,23,28,.06);
  --shadow:0 1px 2px rgba(20,23,28,.05), 0 10px 30px -14px rgba(20,23,28,.20);
  --shadow-lg:0 1px 2px rgba(20,23,28,.06), 0 24px 60px -22px rgba(20,23,28,.32);
  --container:1320px;
  --cat-intro-lines:4;
  --font-display:"Söhne","Neue Haas Grotesk Display","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
}

[data-theme="dark"]{
  --bg:#0E1116;
  --bg-2:#161A21;
  --panel:#1C222B;
  --ink:#ECEEF2;
  --ink-2:#CDD2DB;
  --muted:#98A2B0;
  --faint:#6C7382;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.05);
  --accent-soft:rgba(216,180,92,.14);
  --danger-soft:rgba(229,84,78,.14);
  --dark:#090B0F;
  --dark-2:#11151C;
  --dark-line:rgba(255,255,255,.10);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 40px -16px rgba(0,0,0,.7);
  --shadow-lg:0 1px 2px rgba(0,0,0,.5), 0 28px 70px -20px rgba(0,0,0,.8);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-body); background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background var(--dur-base), color var(--dur-base);
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
h1,h2,h3{font-family:var(--font-display); letter-spacing:-0.02em; line-height:1.05; text-wrap:balance;}
h1{font-size:clamp(32px,5vw,52px);}
h2{font-size:clamp(24px,3.4vw,34px);}
h3{letter-spacing:-0.01em; font-size:20px;}
::selection{background:var(--accent); color:var(--accent-ink);}

.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 24px;}
.shell{overflow:clip;}

/* ===== Кнопки ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid transparent;
  font-size:15px; font-weight:600; letter-spacing:0.01em; border-radius:var(--r-md); padding:13px 22px; line-height:1; transition:all var(--dur-fast) var(--ease-move); white-space:nowrap;}
.btn svg{width:17px; height:17px;}
.btn-accent{background:linear-gradient(180deg,var(--accent-hover),var(--accent)); color:var(--accent-ink); border-color:var(--accent);}
.btn-accent:hover{background:var(--accent-hover); border-color:var(--accent-hover);}
.btn-accent:active{background:var(--accent-press);}
.btn-ghost{background:var(--panel); color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{background:var(--bg-2); border-color:var(--faint);}
.btn-dark{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.18);}
.btn-dark:hover{background:rgba(255,255,255,.16);}
.btn-lg{padding:15px 26px; font-size:15px;}
/* Недоступное действие (например, покупка товара, которого нет на складе): кнопка видна,
   но не работает — тем же приглушением, что у неактивных стрелок галереи и вариантов. */
.btn:disabled{background:var(--bg-2); border-color:var(--line); color:var(--faint); cursor:not-allowed;}
.btn:disabled:hover{background:var(--bg-2); border-color:var(--line);}
.btn-block{width:100%;}

/* ===== Чип / бейдж ===== */
.chip{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.7px;
  text-transform:uppercase; color:var(--muted); background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:6px 12px;}
.badge{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.3px;
  border-radius:4px; padding:4px 8px; line-height:1;}
.badge-hit{background:var(--accent); color:var(--accent-ink);}
.badge-sale{background:var(--dark); color:var(--dark-ink);}
.badge-new{background:var(--ok-soft); color:var(--ok);}
.badge-orig{background:var(--accent-soft); color:var(--accent);}
.badge-out{background:var(--bg-2); color:var(--muted); border:1px solid var(--line);}
[data-theme="dark"] .badge-sale{background:#fff; color:#0e1116;}
[data-theme="dark"] .badge-orig{color:var(--accent-hover);}

/* ===== Заголовки секций ===== */
.section{padding:var(--sp-7) 0;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:var(--sp-5);}
.section-head .eyebrow{font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--accent); margin-bottom:10px;}
.section-head h2{margin:0; font-size:clamp(24px,3.4vw,34px);}
.section-head .link{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:650; color:var(--muted);}
.section-head .link:hover{color:var(--accent);}
.section-head .link svg{width:16px; height:16px;}

/* ============================================================
   ШАПКА
   ============================================================ */
.topbar{background:var(--dark); color:var(--dark-muted); font-size:13px;}
[data-theme="dark"] .topbar{border-bottom:1px solid var(--dark-line);}
.topbar .container{display:flex; align-items:center; gap:22px; height:42px;}
.topbar a{color:var(--dark-muted); transition:color var(--dur-fast);}
.topbar a:hover{color:#fff;}
.topbar .tb-city{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:#fff; background:none; border:0; padding:0;}
.topbar .tb-city svg{width:15px; height:15px; color:var(--accent);}
.topbar .tb-links{display:flex; gap:20px; margin-left:auto;}
.topbar .tb-phone{display:inline-flex; align-items:center; gap:7px; color:#fff; font-weight:700; font-size:14px;}
.topbar .tb-demo{color:#fff; font-weight:700; background:var(--accent); border-radius:4px; padding:3px 11px; transition:background var(--dur-fast);}
.topbar .tb-demo:hover{background:var(--accent-hover); color:#fff;}
.topbar .tb-phone svg{width:15px; height:15px;}
.tb-sep{width:1px; height:16px; background:rgba(255,255,255,.16);}

.header{position:sticky; top:0; z-index:60; background:var(--panel); border-bottom:1px solid var(--line); transition:box-shadow var(--dur-base), background var(--dur-base);}
.header.scrolled{box-shadow:var(--shadow);}
.header .container{display:flex; align-items:center; gap:22px; height:78px;}
.logo{display:inline-flex; align-items:center; gap:11px; flex-shrink:0;}
.logo .mark{width:61px; height:61px; border-radius:4px; background:transparent; border:0; display:flex; align-items:center; justify-content:center; box-shadow:none;}
.logo .mark svg{width:100%; height:100%; color:var(--accent);}
.logo .lg-name{display:block; font-size:19px; font-weight:800; letter-spacing:-.4px; line-height:1;}
.logo .lg-sub{display:block; font-size:11px; color:var(--faint); letter-spacing:.3px; margin-top:3px;}

/* overflow:visible — под формой живёт слой результатов .search-drop; скругление углов держат сами края (.cat-sel/.s-btn) */
.search{flex:1; display:flex; height:48px; border:1.5px solid var(--line); border-radius:var(--r-md); overflow:visible; position:relative; transition:border-color var(--dur-fast); background:var(--panel);}
.search:focus-within{border-color:var(--accent);}
.search .cat-sel{display:inline-flex; align-items:center; gap:7px; padding:0 16px; height:100%; background:var(--bg-2); border:0; border-right:1px solid var(--line); border-radius:calc(var(--r-md) - 2px) 0 0 calc(var(--r-md) - 2px); font-size:13px; font-weight:650; color:var(--ink-2); white-space:nowrap; cursor:pointer;}
.search .cat-sel:hover{color:var(--ink);}
.search .cat-sel svg{width:13px; height:13px; color:var(--faint); transition:transform var(--dur-fast);}
.scope.open .cat-sel svg{transform:rotate(180deg);}

/* --- Зона поиска: выпадающий выбор --- */
.scope{position:relative; display:flex;}
.scope-menu{position:absolute; top:calc(100% + 9px); left:0; min-width:190px; display:none; padding:6px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); z-index:75;}
.scope.open .scope-menu{display:block;}
.scope-opt{display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; padding:9px 12px; border:0; background:transparent; border-radius:var(--r-sm); font-size:14px; font-weight:600; color:var(--ink); text-align:left; white-space:nowrap; cursor:pointer;}
.scope-opt:hover{background:var(--bg-2);}
.scope-opt.on{color:var(--accent);}
.scope-ck{flex:0 0 auto; width:15px; height:15px; color:var(--accent); opacity:0;}
.scope-opt.on .scope-ck{opacity:1;}
.scope-ck svg{width:100%; height:100%;}
.search input{flex:1; border:0; outline:0; padding:0 16px; font-size:15px; background:transparent; color:var(--ink); min-width:0;}
.search input::placeholder{color:var(--faint);}
.search .s-btn{width:54px; background:var(--accent); border:0; border-radius:0 calc(var(--r-md) - 2px) calc(var(--r-md) - 2px) 0; display:flex; align-items:center; justify-content:center; color:var(--accent-ink);}
.search .s-btn:hover{background:var(--accent-hover);}
.search .s-btn svg{width:20px; height:20px;}

/* --- Умный поиск: слой результатов под полем --- */
.search-drop{position:absolute; top:calc(100% + 9px); left:0; right:0; display:none; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); overflow:hidden; z-index:70; transition:opacity var(--dur-fast);}
.search.open .search-drop{display:block;}
.search-drop.sd-loading{opacity:.55; pointer-events:none;}
.sd-scroll{position:relative; max-height:min(430px, calc(100vh - 190px)); overflow-y:auto; padding:6px;}
.sd-item{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:var(--r-sm); color:var(--ink); text-decoration:none;}
.sd-doc .sd-thumb svg{width:17px; height:17px;}
.sd-item:hover, .sd-item.active{background:var(--bg-2);}
.sd-thumb{flex:0 0 44px; width:44px; height:44px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-2); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.sd-thumb img{width:100%; height:100%; object-fit:contain;}
.sd-thumb svg{width:20px; height:20px; color:var(--faint);}
.sd-info{flex:1; min-width:0;}
.sd-name{display:block; font-size:14px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sd-name b, .sd-meta b{font-weight:750;}
.sd-meta{display:block; font-size:12px; color:var(--ink-2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sd-price{font-size:14px; font-weight:700; white-space:nowrap; text-align:right;}
.sd-price s{display:block; font-size:12px; font-weight:500; color:var(--faint);}
.sd-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 16px 3px; font-size:12px; font-weight:650; color:var(--ink-2);}
.sd-group + .sd-head{border-top:1px solid var(--line); margin-top:4px;}
.sd-head-n{font-weight:600; color:var(--faint);}
.sd-note{padding:18px 16px; font-size:14px; line-height:1.45; color:var(--ink-2); display:flex; align-items:center; gap:11px;}
.sd-foot{padding:9px 16px 12px; font-size:12px; color:var(--faint); border-top:1px solid var(--line);}
.sd-more{display:block; width:100%; padding:12px 16px; border:0; border-top:1px solid var(--line); background:var(--bg-2); color:var(--accent); font-size:13px; font-weight:650; cursor:pointer; transition:background var(--dur-fast);}
.sd-more:hover{background:var(--line);}
.sd-spin{flex:0 0 18px; width:18px; height:18px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--accent); animation:sd-spin .7s linear infinite;}
@keyframes sd-spin{to{transform:rotate(360deg);}}

.actions{display:flex; align-items:center; gap:6px; flex-shrink:0;}
.act{position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 12px; border-radius:var(--r-sm); background:none; border:0; color:var(--ink-2); font-size:11.5px; font-weight:600; transition:all var(--dur-fast) var(--ease-move);}
.act:hover{background:var(--bg-2); color:var(--accent);}
.act svg{width:23px; height:23px;}
.act .count{position:absolute; top:2px; right:6px; min-width:18px; height:18px; padding:0 5px; border-radius:4px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1;}
.act .count.zero{display:none;}
.act.cart .count{background:#15171c;}
.act.m-search{display:none;} /* лупа появляется только на телефонах — см. адаптив ≤767 */
[data-theme="dark"] .act.cart .count{background:#fff; color:#0e1116;}

/* Аккаунт вошедшего покупателя — заменяет «Войти» в шапке */
.act-acc{position:relative; display:flex; align-items:center;}
.act-acc[hidden]{display:none;}
.acc-pop{position:absolute; top:calc(100% + 8px); right:0; min-width:224px; padding:6px; display:none; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); z-index:75;}
.act-acc.open .acc-pop{display:flex;}
.acc-id{padding:9px 12px; margin-bottom:4px; border-bottom:1px solid var(--line-2); font-size:13px; font-weight:700; color:var(--ink); word-break:break-all;}
.acc-item{display:block; width:100%; text-align:left; padding:9px 12px; border:0; border-radius:4px; background:none; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink-2); cursor:pointer;}
.acc-item:hover{background:var(--bg-2); color:var(--accent);}
.acc-item-logout{color:var(--danger);}
.acc-item-logout:hover{background:var(--danger-soft); color:var(--danger);}
/* Аккаунт в боковом меню — заменяет «Войти в кабинет» */
.d-acc{display:flex; flex-direction:column; gap:10px;}
.d-acc[hidden]{display:none;}
.d-acc-id{font-size:14px; font-weight:700; color:var(--ink); word-break:break-all;}

.burger{display:none; width:46px; height:46px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--panel); color:var(--ink); align-items:center; justify-content:center;}
.burger svg{width:22px; height:22px;}

/* ===== Единый тост-уведомление ===== */
.app-toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(18px) scale(.96); color:var(--toast-fg);
  padding:18px 24px; z-index:400; opacity:0; transition:all var(--dur-base) cubic-bezier(.34,1.4,.6,1);
  box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:18px; width:340px; max-width:calc(100vw - 32px); box-sizing:border-box; border-radius:var(--r-lg);}
.app-toast.show{opacity:1; transform:translateX(-50%) translateY(0) scale(1);}
.app-toast .at-ic{width:40%; aspect-ratio:1; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.app-toast .at-ic svg{width:100%; height:100%; stroke-width:1.2;}
.app-toast.success{background:var(--toast-success-bg);}
.app-toast.error{background:var(--toast-error-bg);}
.app-toast.warn{background:var(--toast-warn-bg); color:#15171c;}
.app-toast.info{background:var(--toast-info-bg);}
.app-toast .at-msg{font-size:14.5px; font-weight:600; line-height:1.3;}

/* ===== Навигация-категории ===== */
.nav{background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:78px; z-index:54;}
.nav .container{display:flex; align-items:stretch; gap:0; height:56px;}
.nav-catalog{display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:var(--accent-ink); font-size:14.5px; font-weight:700; padding:0 22px; border:0; align-self:center; height:40px; border-radius:var(--r-sm);}
.nav-catalog svg{width:17px; height:17px;}
.nav-list{display:flex; align-items:center; flex:1; margin-left:18px; overflow:hidden; justify-content:flex-start; gap:6px;}
.nav-list a, .nav .nav-right a{position:relative; display:inline-flex; align-items:center; padding:0 6px; font-size:13.5px; font-weight:600; color:var(--ink-2); white-space:nowrap; transition:color var(--dur-fast); letter-spacing:.1px;}
.nav-list a::after, .nav .nav-right a::after{content:""; position:absolute; left:6px; right:6px; bottom:12px; height:2px; border-radius:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-base) var(--ease-move);}
.nav-list a:hover, .nav .nav-right a:hover{color:var(--accent);}
.nav-list a:hover::after, .nav .nav-right a:hover::after{transform:scaleX(1);}
.nav-list a.hot{color:var(--accent); font-weight:700;}
.nav-list a{text-transform:uppercase; letter-spacing:.6px; font-size:12.5px; font-weight:600;}
.nav-list a::after{display:none;}
.nav-promo{display:inline-flex; align-items:center; align-self:center; color:var(--accent-ink) !important; background:var(--accent); border-radius:var(--r-pill); font-weight:700; padding:0 26px !important; height:34px;}
.nav-promo::after{display:none !important;}
.nav-promo:hover{background:var(--accent-hover); color:var(--accent-ink) !important;}
.nav .nav-right{display:flex; align-items:stretch; gap:14px; padding-left:20px; margin-left:18px; border-left:1px solid var(--line);}

/* «Ещё» в навигации брендов */
.nav-more{position:relative; display:flex; align-items:center;}
.nav-more-btn{border:0; background:none; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink-2); padding:0 6px; cursor:pointer; white-space:nowrap; height:100%;}
.nav-more-btn:hover{color:var(--accent);}
.nav-more-pop{position:absolute; top:100%; left:0; min-width:190px; background:var(--panel); border:1px solid var(--line); border-radius:6px; box-shadow:0 18px 40px -16px rgba(20,23,28,.35); padding:6px; display:none; z-index:60; flex-direction:column;}
.nav-more.open .nav-more-pop{display:flex;}
.nav-more-pop a{display:block; padding:9px 12px; border-radius:4px; font-size:13.5px; font-weight:600; color:var(--ink-2); white-space:nowrap;}
.nav-more-pop a:hover{background:var(--bg-2); color:var(--accent);}
/* Горизонтальное меню (режим «horizontal»): строка пунктов вместо «Каталог» и мегаменю.
   Подкатегории — выпадающим списком .nav-more-pop; не поместившиеся пункты — в списке кнопки-меню. */
.nav-list.nav-hbar{margin-left:0; overflow:visible; min-width:0; align-self:stretch;}
.nav-hbar.is-fitting{visibility:hidden;}
.nav-hbar > *{flex-shrink:0;}
.nav-hbar > .nav-more{align-self:stretch;}
.nav-hbar .nav-more > a{height:100%;}
.nav-hbar .nav-more:hover > .nav-more-pop, .nav-hbar .nav-more:focus-within > .nav-more-pop{display:flex;}
.nav-hbar .nav-more-pop a{text-transform:none; letter-spacing:normal; height:auto;}
.nav-hbar-more, .nav-hbar > [data-hbar="cat"]{margin-left:auto;}
.nav-hbar > [data-hbar="cat"]:not([hidden]) + .nav-hbar-more{margin-left:0;}
.nav-hbar-more .nav-more-btn{display:inline-flex; align-items:center; color:var(--ink-2);}
.nav-hbar-more .nav-more-btn svg{width:20px; height:20px;}
.nav-hbar-more > .nav-more-pop{left:auto; right:0; max-height:70vh; overflow-y:auto;}
.nav-hbar-more .nav-more-pop .nav-more{display:block;}
.nav-hbar-more .nav-more-pop .nav-more > .nav-more-pop{position:static; display:none; min-width:0; border:0; box-shadow:none; padding:0 0 0 var(--sp-3);}
.nav-hbar-more .nav-more-pop .nav-more:hover > .nav-more-pop, .nav-hbar-more .nav-more-pop .nav-more:focus-within > .nav-more-pop{display:flex;}

/* ===== Мега-меню каталога ===== */
.nav-catalog.open{background:var(--accent-hover);}
.mega-scrim{position:fixed; inset:0; background:rgba(10,12,16,.42); z-index:57; opacity:0; pointer-events:none; transition:opacity var(--dur-base);}
.mega-scrim.open{opacity:1; pointer-events:auto;}
.mega{position:fixed; left:50%; transform:translateX(-50%); width:100%; max-width:var(--container); top:0; background:var(--panel); border:1px solid var(--line-2); border-top:0; border-radius:0 0 var(--r-md) var(--r-md); box-shadow:0 24px 50px -20px rgba(20,23,28,.4); z-index:58; display:none; max-height:82vh; overflow-y:auto;}
.mega.open{display:block; animation:megaIn var(--dur-base) ease;}
@keyframes megaIn{from{transform:translateX(-50%) translateY(-10px);}to{transform:translateX(-50%);}}
/* Четыре колонки в ряд, как в подвале: товар · пункты владельца · служебные страницы · контакты.
   Разметку колонок отдаёт сервер, пустая колонка приезжает с hidden. */
.mega-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-5); padding:var(--sp-4) 0 var(--sp-5); align-items:stretch;}
.mega-col[hidden]{display:none;}
/* Разделители зон: линия слева у каждой следующей видимой колонки — скрытая колонка не
   оставляет линию в пустом месте. Отступ от линии равен половине промежутка сетки. */
.mega-col:not([hidden]) ~ .mega-col:not([hidden]){border-left:1px solid var(--line); padding-left:var(--sp-5);}
/* Заголовок — одна строка во всех колонках: длинное название товара не сдвигает содержимое
   первой колонки вниз, верхние линии колонок совпадают. */
.mega-col h4{font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.4px; text-transform:uppercase; margin:0 0 var(--sp-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* Пункт колонки: стрелка своей зоной, текст своей — левый край текста общий для всех строк. */
.mega-col a{display:flex; align-items:flex-start; gap:var(--sp-3); font-size:13.5px; line-height:1.5; color:var(--muted); padding:var(--sp-2) 0; transition:color var(--dur-fast);}
.mega-col a:hover{color:var(--accent);}
.mega-col .mm-ar{flex:none; display:inline-flex; width:16px; height:16px; margin-top:2px; color:var(--faint); transition:color var(--dur-fast);}
.mega-col .mm-ar svg{width:100%; height:100%; display:block;}
.mega-col a:hover .mm-ar{color:var(--accent);}
.mega-col .mm-tx{min-width:0;}
.mega-prod .mm-pic{display:block; padding:0; margin-bottom:var(--sp-2); border-radius:var(--r-sm); overflow:hidden; background:var(--bg-2);}
.mega-prod .mm-pic img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;}
.mega-prod .mm-text{font-size:13px; line-height:1.6; color:var(--muted); margin:0 0 var(--sp-2);}
.mega-prod .mm-link{display:inline-block; padding:0; font-size:13px; font-weight:650; color:var(--accent);}
/* Контакты: значок в мягкой подложке своей зоной, текст — своей, интервал строк тот же. */
.mega-contacts .mm-c{display:flex; align-items:flex-start; gap:var(--sp-3); font-size:13.5px; line-height:1.5; color:var(--muted); padding:var(--sp-2) 0;}
.mega-contacts .mm-ic{flex:none; width:28px; height:28px; border-radius:var(--r-sm); background:var(--bg-2); color:var(--ink-2); display:flex; align-items:center; justify-content:center; transition:background var(--dur-fast), color var(--dur-fast);}
.mega-contacts .mm-ic svg{width:15px; height:15px; display:block;}
.mega-contacts .mm-tx{min-width:0; padding-top:5px;}
.mega-contacts .mm-tx-l{display:block;}
.mega-contacts a.mm-c:hover{color:var(--accent);}
.mega-contacts a.mm-c:hover .mm-ic{background:var(--accent-soft); color:var(--accent);}

/* Уже 1440 — те же четыре колонки в два ряда. Ниже 1024 мегаменю не показывается: на этой
   ширине скрыта и сама полоса .nav с кнопкой «Каталог», её место занимает мобильное меню. */
@media (max-width:1439px){ .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4);}
  /* Два ряда: линия слева попадала бы на начало второго ряда — в этой раскладке зоны
     разделяет промежуток сетки, а не линия. */
  .mega-col:not([hidden]) ~ .mega-col:not([hidden]){border-left:0; padding-left:0;} }
@media (max-width:1023px){ .mega{display:none !important;} }

/* ===== Модалка входа ===== */
.lm-scrim{position:fixed; inset:0; background:rgba(8,10,14,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); z-index:150; display:none; align-items:center; justify-content:center; padding:20px;}
.lm-scrim.open{display:flex;}
.lm-card{position:relative; width:100%; max-width:452px; max-height:92vh; overflow-y:auto; box-shadow:var(--shadow-lg);}
.lm-card .lc-x{cursor:pointer;}

/* ===== LiveChat: облик виджета переехал в дополнение add-ons/live-chat ===== */
@keyframes chatIn{from{transform:translateY(14px);}to{transform:none;}}

/* ===== Согласие на обработку ПДн: общий компонент =====
   Живёт здесь, а не в checkout.css: галка нужна и в оформлении заказа, и на входе,
   а checkout.css страница входа не подключает. Перенос из Open Design 2026-09-09. */
.co-consent{display:flex;align-items:flex-start;gap:11px;margin-top:18px;cursor:pointer;font-size:13px;line-height:1.45;color:var(--ink-2);}
.co-consent input{position:absolute;opacity:0;width:0;height:0;}
.co-consent .cc-box{flex:0 0 auto;width:20px;height:20px;margin-top:1px;border:1.5px solid var(--line);border-radius:6px;background:var(--panel);display:flex;align-items:center;justify-content:center;transition:border-color var(--dur-fast),background var(--dur-fast);}
.co-consent .cc-box::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0);transform-origin:center;transition:transform var(--dur-fast);margin-top:-2px;}
.co-consent input:checked + .cc-box{background:var(--accent);border-color:var(--accent);}
.co-consent input:checked + .cc-box::after{transform:rotate(-45deg) scale(1);}
.co-consent input:focus-visible + .cc-box{outline:2px solid var(--accent);outline-offset:2px;}
/* Не отмечено, а форма отправляется — рамка просит внимания и держится до отметки. */
.co-consent.is-err .cc-box{border-color:var(--danger);background:var(--panel);}
/* Когда галка просит внимания, её обводка при фокусе тоже красная: акцентная перекрывала
   красную рамку, и предупреждение читалось как обычная подсветка поля. */
.co-consent.is-err input:focus-visible + .cc-box{outline-color:var(--danger);}
/* Почему галка не пускает дальше — словами, рядом с ней: одной красной рамки покупатель
   не замечал и считал, что кнопка сломана. */
.co-hint{margin-top:8px;padding-left:31px;font-size:12.5px;line-height:1.4;color:var(--danger);}
.co-consent .cc-txt a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.co-consent .cc-txt a:hover{color:var(--accent-hover);}
/* Строка согласия на тёмных поверхностях (CTA главной, блок подписки блога) — тот же компонент, цвет текста из тёмного токена */
.cta .co-consent,.side-cta .co-consent{color:var(--dark-ink);}
.cta .co-consent .cc-box,.side-cta .co-consent .cc-box{background:transparent;border-color:var(--dark-line);}

/* ===== Модалка обратной связи ===== */
.fb-scrim{position:fixed; inset:0; background:rgba(10,12,16,.55); backdrop-filter:blur(3px); z-index:90; display:none; align-items:center; justify-content:center; padding:24px;}
.fb-scrim.open{display:flex;}
.fb-card{width:100%; max-width:460px; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:30px 32px 28px; box-shadow:var(--shadow-lg); animation:chatIn var(--dur-base) ease;}
.fb-card .fb-head{display:flex; align-items:flex-start; gap:14px; margin-bottom:22px;}
/* Заголовок окна — как у окна входа (.lc-head h1, shop/login.css): эталон всплывающих окон витрины.
   Серый заголовок заглавными смотрелся чужим рядом с тёмными подписями полей. */
.fb-card .fb-head h3{margin:0; font-size:25px; font-weight:850; letter-spacing:-.5px; color:var(--ink);}
.fb-card .fb-head .fb-sub{font-size:14px; color:var(--muted); margin-top:5px;}
.fb-card .fb-x{margin-left:auto; width:38px; height:38px; border:1.5px solid var(--line); border-radius:11px; background:var(--panel); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.fb-card .fb-x:hover{color:var(--accent); border-color:var(--accent);} .fb-card .fb-x svg{width:18px; height:18px;}
.fb-field{margin-bottom:15px;}
.fb-field label{display:block; font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:8px;}
.fb-field input,.fb-field textarea{width:100%; border:1.5px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink); padding:13px 15px; font-size:14.5px; font-family:inherit; outline:0;}
.fb-field input{height:52px; padding:0 15px;}
.fb-field textarea{min-height:104px; resize:vertical; line-height:1.5;}
.fb-field input:focus,.fb-field textarea:focus{border-color:var(--accent);}
/* Отступ над кнопкой — тот же, что у строки согласия (18px): она стоит прямо над кнопкой,
   и прежние 4px склеивали их в одно пятно. */
.fb-submit{width:100%; height:54px; border:0; border-radius:6px; background:var(--accent); color:var(--accent-ink); font-family:inherit; font-size:16px; font-weight:750; cursor:pointer; margin-top:18px;}
.fb-submit:hover{background:var(--accent-hover);}
.fb-note{font-size:12px; color:var(--faint); text-align:center; margin-top:13px; line-height:1.45;}
.fb-ok{display:none; flex-direction:column; align-items:center; text-align:center; padding:16px 0 8px;}
.fb-ok.show{display:flex;}
.fb-ok .ok-ic{width:74px; height:74px; border-radius:50%; background:var(--ok-soft); color:var(--ok); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.fb-ok .ok-ic svg{width:38px; height:38px;}
.fb-ok h3{margin:0 0 7px; font-size:21px;}
.fb-ok p{margin:0; font-size:14px; color:var(--muted); line-height:1.5;}
.tb-fb{cursor:pointer;}

/* ============================================================
   HERO + ПОДБОР
   ============================================================ */
.hero-wrap{background:var(--dark); color:#fff; position:relative; z-index:0;}
.hero-grid{display:grid; grid-template-columns:1fr 392px; gap:28px; padding:34px 0 38px;}

/* Слайдшоу */
.slider{position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:430px; background:var(--dark-2); border:1px solid var(--dark-line);}
.slides{position:relative; height:100%; min-height:430px;}
.slide{position:absolute; inset:0; opacity:0; transition:opacity .6s ease; display:flex; align-items:center; pointer-events:none; --slide-bg:var(--dark);}
.slide.active{opacity:1; pointer-events:auto;}
/* Сплошной фон — пометка slide-color: заливает блок цветом владельца и снимает
   затемняющую подложку (::before). Отвечает ТОЛЬКО за фон. */
.slide.slide-color{background:var(--slide-bg);}
.slide-photo{position:absolute; inset:0; z-index:0;}
.slide-photo .ph{width:100%; height:100%;}
/* Подложка под текстом идёт от цвета фона блока и уходит в прозрачность вправо (не от чёрного) */
.slide::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, var(--slide-bg) 0%, color-mix(in srgb, var(--slide-bg) 62%, transparent) 40%, transparent 74%);}
.slide.slide-color::before{display:none;}
/* Тени букв нужны только поверх фото; на сплошной заливке их убираем. */
.slide.slide-color .slide-body h1, .slide.slide-color .slide-body h2, .slide.slide-color .slide-body p, .slide.slide-color .slide-price, .slide.slide-color .slide-price b{text-shadow:none;}
/* Подобранный цвет текста — пометка slide-ink: отвечает ТОЛЬКО за цвет букв
   (--slide-txt задаёт магазин). Заголовок берёт цвет целиком, описание и цена — той
   же краской приглушённее, чтобы держалась иерархия. Фото и подложка при этом остаются. */
.slide.slide-ink{color:var(--slide-txt);}
.slide.slide-ink .slide-body h1, .slide.slide-ink .slide-body h2{color:var(--slide-txt);}
.slide.slide-ink .slide-body p{color:color-mix(in srgb, var(--slide-txt) 80%, transparent);}
.slide.slide-ink .slide-price{color:color-mix(in srgb, var(--slide-txt) 72%, transparent);}
.slide.slide-ink .slide-price b{color:var(--slide-txt);}
.slide-body{position:relative; z-index:2; padding:48px 52px; max-width:560px;}
.slide-body .s-tag{text-shadow:none;}
.slide-body h1, .slide-body h2, .slide-body p, .slide-price, .slide-price b{text-shadow:0 2px 18px rgba(8,10,14,.7), 0 0 3px rgba(8,10,14,.45);}
.slide-body .s-tag{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--accent-ink); background:var(--accent); border-radius:var(--r-pill); padding:6px 13px; margin-bottom:18px;}
.slide-body h1, .slide-body h2{margin:0 0 14px; font-size:40px;}
.slide-body p{margin:0 0 26px; font-size:16px; line-height:1.5; color:rgba(255,255,255,.78); max-width:430px;}
.slide-body .s-actions{display:flex; gap:12px; align-items:center;}
.slide-price{font-size:14px; color:rgba(255,255,255,.7);}
.slide-price b{display:block; font-size:26px; color:#fff; font-weight:800; letter-spacing:-.5px;}

.slider-dots{position:absolute; left:52px; bottom:26px; z-index:5; display:flex; gap:8px;}
.slider-dots button{width:30px; height:4px; border-radius:3px; border:0; background:rgba(255,255,255,.3); padding:0; transition:all var(--dur-base);}
.slider-dots button.active{background:var(--accent); width:44px;}
.slider-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:46px; height:46px; border-radius:50%;
  background:rgba(20,24,32,.6); border:1px solid rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); transition:all var(--dur-fast) var(--ease-move);}
.slider-arrow:hover{background:var(--accent); border-color:var(--accent);}
.slider-arrow svg{width:20px; height:20px;}
.slider-arrow.prev{left:18px;} .slider-arrow.next{right:18px;}

/* Блок подбора */
.finder{background:var(--panel); color:var(--ink); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column;}
.finder h3{margin:0 0 4px; font-size:19px;}
.finder .f-sub{font-size:13px; color:var(--muted); margin-bottom:18px; line-height:1.4;}
.finder-tabs{display:flex; gap:4px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:4px; margin-bottom:18px;}
.finder-tabs button{flex:1; border:0; background:none; font-size:13px; font-weight:650; color:var(--muted); padding:9px 6px; border-radius:4px; transition:all var(--dur-fast) var(--ease-move);}
.finder-tabs button.active{background:var(--panel); color:var(--ink); box-shadow:var(--shadow-sm);}
.f-panel{display:none; flex-direction:column; gap:12px;}
.f-panel.active{display:flex;}
.f-combo{position:relative;}
.f-err{display:none; color:var(--accent); font-size:12.5px; font-weight:600; margin-top:6px; background:color-mix(in srgb,var(--accent) 12%,transparent); border-radius:4px; padding:7px 11px;}
.f-field.invalid .f-err{display:block;}
.f-combo-trigger{display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; cursor:pointer;}
.f-combo-trigger .fco-arrow{color:var(--faint); font-size:12px;}
.f-combo-pop{position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--panel); border:1px solid var(--line); border-radius:6px; box-shadow:0 18px 40px -16px rgba(20,23,28,.35); z-index:40; display:none; overflow:hidden;}
.f-combo-pop.open{display:block;}
.f-combo-pop .fco-search{padding:8px; border-bottom:1px solid var(--line-2);}
.f-combo-pop .fco-search input{width:100%; height:40px; border:1.5px solid var(--line); border-radius:4px; padding:0 12px; font-size:14px; font-family:inherit; outline:0; background:var(--panel); color:var(--ink);}
.f-combo-pop .fco-search input:focus{border-color:var(--accent);}
.f-combo-pop .fco-list{max-height:220px; overflow-y:auto; padding:6px;}
.f-combo-pop .fco{padding:9px 12px; border-radius:4px; font-size:14px; color:var(--ink-2); cursor:pointer;}
.f-combo-pop .fco:hover{background:var(--bg-2); color:var(--accent);}
.finder.show-contacts .f-panel, .finder.show-contacts .finder-tabs{display:none !important;}
.f-contacts{display:none; flex-direction:column; gap:12px; animation:fcIn var(--dur-base) ease;}
.finder.show-contacts .f-contacts{display:flex;}
@keyframes fcIn{from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:none;}}
.f-contacts .fc-back{align-self:flex-start; border:0; background:none; color:var(--muted); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:0;}
.f-contacts .fc-back:hover{color:var(--accent);}
.f-contacts .fc-back svg{width:15px; height:15px;}
.f-contacts .fc-lead{font-size:17px; font-weight:800; letter-spacing:-.3px; margin-top:4px;}
.f-contacts .fc-sub{font-size:13px; color:var(--muted); line-height:1.45; margin-bottom:4px;}
.fc-consent{display:flex; gap:9px; align-items:flex-start; font-size:12px; color:var(--muted); line-height:1.4; margin-top:11px; cursor:pointer;}
.fc-consent input{margin-top:2px; flex-shrink:0; accent-color:var(--accent);}
.fc-consent a{color:var(--accent); text-decoration:underline;}
.f-field{display:flex; flex-direction:column; gap:6px;}
.f-field label{font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.2px;}
.f-input{height:46px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--panel); color:var(--ink);
  padding:0 14px; font-size:14.5px; font-family:inherit; outline:0; transition:border-color var(--dur-fast); width:100%;}
.f-input:focus{border-color:var(--accent);}
.f-input::placeholder{color:var(--faint);}
/* Незаполненное поле формы подбора — акцентная рамка (состояние ставит скрипт классом) */
.f-input.invalid{border-color:var(--accent);}
/* Подпись согласия, когда галочка не стоит — акцентный цвет */
.fc-consent.invalid{color:var(--accent);}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.f-vin{font-family:var(--mono); letter-spacing:2px; text-transform:uppercase;}
.f-hint{font-size:12px; color:var(--faint); line-height:1.4;}
.f-hint b{color:var(--ink-2);}
.f-result{display:none; margin-top:4px; padding:14px; border-radius:var(--r-sm); background:var(--ok-soft); border:1px solid #cdeadd; font-size:13px; color:#1a6e49; line-height:1.5;}
.f-result.show{display:block;}
.f-result b{color:#12603d;}
[data-theme="dark"] .f-result{background:#0f2419; border-color:#1d3d2c; color:#7fd3a8;}
[data-theme="dark"] .f-result b{color:#a6e6c4;}

/* Преимущества */
.benefits{background:var(--dark); border-top:1px solid var(--dark-line);}
.benefits-title{margin:0; padding:22px 24px 14px; color:#fff; font-size:19px; font-weight:800; letter-spacing:-.3px;}
.benefits-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--dark-line);}
/* minmax(0,…) и min-width:0 — иначе длинный текст пункта растягивает колонку шире доли
   сетки, и крайняя карточка вылезает за контейнер (на узком экране — за край экрана) */
.benefit{background:var(--dark); padding:22px 24px; display:flex; gap:14px; align-items:flex-start; min-width:0;}
.benefit > div{min-width:0;}
.benefit .bi{width:42px; height:42px; border-radius:6px; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.benefit .bi svg{width:21px; height:21px;}
.benefit .bt{font-size:14.5px; font-weight:700; color:#fff; margin-bottom:3px;}
.benefit .bd{font-size:12.5px; color:var(--dark-muted); line-height:1.4;}

/* ============================================================
   КАТЕГОРИИ
   ============================================================ */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.cat-card{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; display:flex; align-items:center; gap:16px; transition:all var(--dur-fast); overflow:hidden;}
.cat-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform var(--dur-base) var(--ease-out);}
.cat-card:hover{border-color:transparent; box-shadow:var(--shadow); transform:translateY(-2px);}
.cat-card:hover::before{transform:scaleY(1);}
.cat-icon{width:64px; height:64px; border-radius:7px; background:var(--bg-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--ink-2);}
.cat-icon svg{width:34px; height:34px;}
/* Картинка раздела вместо иконки: любой формат — квадратом, виден центр. */
.cat-icon-img{overflow:hidden; padding:0;}
.cat-icon-img img{width:100%; height:100%; object-fit:cover; display:block;}
.cat-card:hover .cat-icon:not(.cat-icon-img){background:var(--accent-soft); color:var(--accent);}
/* Текст карточки — второй элемент flex-строки: без min-width:0 он держит ширину
   в одну строку и уезжает под overflow:hidden карточки (обрезка посреди буквы). */
.cat-info{min-width:0; flex:1 1 auto;}
.cat-info .ct{font-size:15.5px; font-weight:700; letter-spacing:-.2px; overflow-wrap:break-word;}
.cat-info .cc{font-size:12.5px; color:var(--muted); margin-top:3px; overflow-wrap:break-word;}

/* ============================================================
   ПРОМО-БАННЕРЫ
   ============================================================ */
.banners{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.banner{position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:220px; display:flex; align-items:center; background:var(--dark-2); border:1px solid var(--line);}
.banner-photo{position:absolute; inset:0; z-index:0;}
.banner-photo .ph{width:100%; height:100%;}
.banner::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(10,12,16,.9), rgba(10,12,16,.45) 70%, transparent);}
.banner.light{background:var(--accent);}
.banner.light::after{background:linear-gradient(90deg, color-mix(in srgb,var(--accent-dark) 55%,transparent), transparent 75%);}
.banner-body{position:relative; z-index:2; padding:30px 34px; color:#fff;}
.banner-body .bg-tag{font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.8); margin-bottom:9px;}
.banner-body h3{margin:0 0 8px; font-size:24px; line-height:1.1;}
.banner-body p{margin:0 0 18px; font-size:14px; color:rgba(255,255,255,.8); max-width:260px; line-height:1.45;}

/* ============================================================
   ТОВАРЫ
   ============================================================ */
.prod-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}
.prod{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; display:flex; flex-direction:column; transition:all var(--dur-fast);}
.prod:hover{border-color:transparent; box-shadow:var(--shadow); transform:translateY(-3px);}
.prod-badges{position:absolute; top:14px; left:14px; z-index:2; display:flex; flex-direction:column; gap:6px; align-items:flex-start;}
.prod-fav{position:absolute; top:13px; right:13px; z-index:2; width:36px; height:36px; border-radius:5px; border:1px solid var(--line); background:var(--panel); color:var(--faint); display:flex; align-items:center; justify-content:center; transition:all var(--dur-fast) var(--ease-move);}
.prod-fav:hover{color:var(--accent); border-color:var(--accent);}
.prod-fav svg{width:18px; height:18px;}
.prod-fav.on{color:var(--accent); border-color:var(--accent); background:var(--accent-soft);}
.prod-fav.on svg{fill:currentColor;}
.prod-photo{height:176px; border-radius:var(--r-md); background:var(--bg-2); display:flex; align-items:center; justify-content:center; margin-bottom:14px; overflow:hidden;}
.prod-photo .prod-img{width:100%; height:100%; object-fit:contain; padding:10px; display:block;}
.prod-brand{font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--accent); margin-bottom:6px;}
.prod-brand{display:flex; align-items:center; gap:8px;}
/* Узкая карточка (телефон): звёзды уходят на свою строку, а не ломают название бренда (UX-19). */
.prod-brand{flex-wrap:wrap;}
.prod-brand .rev-stars{margin-left:auto; gap:1px;}
.prod-brand .rev-stars svg{width:12px; height:12px;}
.prod-brand .rev-stars .half{position:relative; display:inline-flex;}
.prod-brand .rev-stars .half>span{position:absolute; left:0; top:0; width:50%; overflow:hidden; display:inline-flex;}
.prod-name{font-size:14.5px; font-weight:650; line-height:1.32; color:var(--ink); margin-bottom:10px; min-height:38px;}
/* Название-ссылка наследует цвет карточки из стилей, а не несёт его в разметке */
.prod a.prod-name{color:inherit;}
.prod-specs{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px;}
.prod-specs span{font-size:11px; font-weight:600; color:var(--muted); background:var(--bg-2); border:1px solid var(--line-2); border-radius:3px; padding:3px 7px;}
.prod-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px;}
/* Цена не рвётся между числом и валютой; не помещается рядом с кнопкой — кнопка уходит ниже (UX-19). */
.prod-foot{flex-wrap:wrap;}
.prod-price .now{font-size:19px; font-weight:800; letter-spacing:-.4px;}
.prod-price .old{font-size:13px; color:var(--muted); text-decoration:line-through; margin-left:6px;}
/* Число и ₽ не разрываются, но старая цена переносится под новую, а не распирает колонку сетки
   (AUDIT-25b): между спанами нет пробела, поэтому перенос даёт flex-wrap, отступ — column-gap. */
.prod-price{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:var(--sp-1);}
.prod-price .old{margin-left:0;}
.prod-price .now,.prod-price .old{white-space:nowrap;}
.prod-buy{width:46px; height:46px; border-radius:var(--r-sm); background:var(--accent); color:var(--accent-ink); border:0; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all var(--dur-fast) var(--ease-move);}
.prod-buy:hover{background:var(--accent-hover);}
.prod-buy svg{width:20px; height:20px;}
.prod-buy.added{background:var(--ok);}
/* Подтверждение на большой кнопке («Добавлено в корзину», «Сохранено») — тем же зелёным
   токеном, что и у маленькой .prod-buy: у .btn-accent фон задан градиентом, поэтому его
   перекрываем и фоном, и рамкой, иначе от золотого остаётся ободок. */
.btn.added, .btn.in-cart{background:var(--ok); border-color:var(--ok); color:var(--ok-ink);}
.btn.in-cart:hover{background:var(--ok); border-color:var(--ok);}
.prod-buy.in-cart{background:var(--ok);}
.prod-buy.in-cart:hover{background:var(--ok);}
/* Товара нет на складе: кнопка карточки остаётся на месте, но не работает. */
.prod-buy:disabled{background:var(--bg-2); color:var(--faint); cursor:not-allowed;}
.prod-buy:disabled:hover{background:var(--bg-2);}

/* ===== Телефонный ввод: код страны (RU/BY) + маска ===== */
.ss-phone{position:relative; display:flex; gap:10px; --ss-ph-h:50px; --ss-ph-r:var(--r-sm);}
.ss-phone-cc{display:inline-flex; align-items:center; gap:8px; height:var(--ss-ph-h); border:1.5px solid var(--line); border-radius:var(--ss-ph-r); background:var(--panel); color:var(--ink); padding:0 13px; font-size:14.5px; font-weight:650; font-family:inherit; white-space:nowrap; cursor:pointer; transition:border-color var(--dur-fast); flex-shrink:0;}
.ss-phone-cc:hover{border-color:var(--accent);}
.ss-phone.open .ss-phone-cc{border-color:var(--accent);}
.ss-phone-chev{display:inline-flex; color:var(--faint); transition:transform var(--dur-fast);}
.ss-phone-chev svg{width:13px; height:13px;}
.ss-phone.open .ss-phone-chev{transform:rotate(180deg);}
.ss-phone-input{flex:1; min-width:0; height:var(--ss-ph-h); border:1.5px solid var(--line); border-radius:var(--ss-ph-r); background:var(--panel); color:var(--ink); padding:0 15px; font-size:14.5px; font-family:inherit; outline:0; transition:border-color var(--dur-fast);}
.ss-phone-input:focus{border-color:var(--accent);}
.ss-phone-input::placeholder{color:var(--faint);}
.ss-phone-flag{width:22px; height:15px; border-radius:3px; overflow:hidden; position:relative; flex-shrink:0; display:inline-block; background-size:cover; background-position:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
.ss-phone-flag.fi{line-height:15px;}
.ss-phone-menu{position:absolute; top:calc(var(--ss-ph-h) + 6px); left:0; z-index:60; min-width:210px; max-height:288px; overflow-y:auto; background:var(--panel); border:1.5px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow); padding:6px; display:none;}
.ss-phone.open .ss-phone-menu{display:block;}
.ss-phone-opt{display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; color:var(--ink); font-family:inherit; font-size:14px; font-weight:600; padding:9px 10px; border-radius:4px; cursor:pointer; text-align:left;}
.ss-phone-opt:hover{background:var(--bg-2);}
.ss-phone-opt-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ss-phone-opt .ss-phone-dial{margin-left:auto; padding-left:8px; color:var(--faint); font-weight:600;}
.ss-phone-opt.sel{background:var(--accent-soft); color:var(--accent);}

/* «Фото»-плейсхолдер с канистрой */
.ph{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--bg-2)) 0%, var(--bg-2) 60%);
  color:var(--faint);}
.ph svg{width:42px; height:42px; opacity:.5;}
.ph .ph-tag{font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; opacity:.7;}
.ph.dark{background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 18%,transparent), rgba(255,255,255,.03)); color:rgba(255,255,255,.5);}

/* Лента (горизонтальный скролл на узких) */
.scroller{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}

/* ============================================================
   БРЕНДЫ
   ============================================================ */
.brand-wall{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.brand-cell{height:96px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel); display:flex; align-items:center; justify-content:center; transition:all var(--dur-fast) var(--ease-move);}
.brand-cell:hover{border-color:var(--accent); transform:translateY(-2px);}
.brand-mark{font-size:20px; font-weight:800; letter-spacing:.5px; color:var(--ink-2); font-style:italic;}
.brand-cell:hover .brand-mark{color:var(--accent);}

/* ============================================================
   БЛОГ + НОВОСТИ
   ============================================================ */
.media-grid{display:grid; grid-template-columns:2fr 1fr; gap:28px;}
.blog-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
/* Колонка справа выключена в настройках блока «Статьи» — карточки занимают всю ширину секции.
   Три в ряд: столько же, сколько у товарной сетки, и карточка остаётся читаемой на 1440. */
.media-grid-solo{grid-template-columns:1fr;}
.blog-grid-wide{grid-template-columns:repeat(3,1fr);}
.post{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:all var(--dur-fast); display:flex; flex-direction:column;}
.post:hover{box-shadow:var(--shadow); transform:translateY(-2px);}
.post-cover{height:172px; overflow:hidden;}
.post-body{padding:18px 20px 22px;}
/* Строка над заголовком всегда в одну строку: у длинной рубрики она переносилась на вторую,
   и у соседних карточек заголовки с текстом стояли на разной высоте. Не поместилось — многоточие. */
.post-meta{display:flex; gap:10px; align-items:center; flex-wrap:nowrap; white-space:nowrap; font-size:12px; color:var(--muted); margin-bottom:9px;}
.post-meta .tag{min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--accent); font-weight:700; letter-spacing:.4px; text-transform:uppercase; font-size:11px;}
/* Заголовок карточки занимает ровно две строки, описание — ровно четыре: длинный текст обрезается
   многоточием и не тянет карточку вниз, короткий не поднимает описание выше, чем у соседей, —
   заголовки и текст в ряду стоят на одной линии (владелец 2026-09-11).
   Высота задана в em от собственного кегля: сменят размер шрифта — строки останутся строками. */
.post h3{margin:0 0 8px; font-size:17px; line-height:1.28; min-height:calc(1.28em * 2);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;}
.post p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.5; min-height:calc(1.5em * 4);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden;}

.news-col{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:8px 22px;}
.news-col h3{font-size:16px; margin:18px 2px;}
/* Высота строки колонки = строка заголовка + две строки описания (плюс зазор между ними).
   Считаем её здесь, чтобы квадрат обложки был ровно этой высоты и не тянул строку сам. */
.news-item{--ni-h:calc(14px * 1.4 + 4px + 13px * 1.4 * 2);
  display:flex; gap:12px; align-items:flex-start; padding:16px 2px; border-top:1px solid var(--line-2);}
.news-item:first-of-type{border-top:0;}
/* Обложка — квадрат в высоту текста рядом. */
.news-item .ni-cover{flex:0 0 auto; width:var(--ni-h); height:var(--ni-h); border-radius:var(--r-sm); overflow:hidden; background:var(--bg-2);}
.news-item .ni-cover img{width:100%; height:100%; object-fit:cover; display:block;}
.news-item .ni-body{min-width:0; min-height:var(--ni-h); display:flex; flex-direction:column; gap:4px;}
.news-item .nd{font-size:12px; color:var(--accent); font-weight:650; margin-bottom:6px;}
/* Заголовок — одна строка, описание — две; что не поместилось, обрезается многоточием. */
.news-item .nt{font-size:14px; font-weight:600; line-height:1.4; color:var(--ink); transition:color var(--dur-fast);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow:hidden;}
.news-item .ni-text{font-size:13px; line-height:1.4; color:var(--muted);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;}
.news-item:hover .nt{color:var(--accent);}

/* ============================================================
   CTA-ПОДПИСКА
   ============================================================ */
.cta{background:var(--dark); color:#fff; border-radius:var(--r-lg); padding:48px 52px; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; position:relative; overflow:hidden;}
.cta::before{content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb,var(--accent) 35%,transparent), transparent 70%);}
.cta-text{position:relative; z-index:1;}
.cta-text .eyebrow{font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--accent); margin-bottom:12px;}
.cta-text h2{margin:0 0 10px; font-size:clamp(24px,3.4vw,34px); line-height:1.1;}
.cta-text p{margin:0; font-size:15px; color:rgba(255,255,255,.72); max-width:440px; line-height:1.5;}
.cta-form{position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; min-width:340px;}
.cta-input{display:flex; gap:8px;}
.cta-input input{flex:1; height:52px; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; padding:0 16px; font-size:15px; outline:0;}
.cta-input input::placeholder{color:rgba(255,255,255,.5);}
.cta-done{display:flex; align-items:center; gap:10px; color:#fff; font-weight:650; font-size:15px;}
.cta-input input:focus{border-color:var(--accent);}
.cta-note{font-size:12px; color:rgba(255,255,255,.5); line-height:1.4;}
.cta-note a{color:rgba(255,255,255,.8); text-decoration:underline;}

/* ============================================================
   КУПОН-CTA (сервис −10%)
   ============================================================ */
.coupon-sec{padding:0 0 56px;}
.coupon{position:relative; display:grid; grid-template-columns:1fr 320px; background:var(--dark); color:#fff;
  border-radius:var(--r-lg); overflow:hidden; isolation:isolate;}
.coupon::before{content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb,var(--accent) 30%,transparent), transparent 55%),
             radial-gradient(90% 120% at 100% 100%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 60%);}
/* крупный «технический» водяной знак-шестерёнка */
.coupon .cog{position:absolute; z-index:0; right:280px; top:50%; transform:translateY(-50%); width:300px; height:300px; color:rgba(255,255,255,.04); pointer-events:none;}
.coupon .cog svg{width:100%; height:100%;}

.coupon-main{position:relative; z-index:1; padding:44px 48px; display:flex; flex-direction:column; align-items:flex-start; gap:18px;}
.coupon-kicker{display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-pill); padding:7px 14px;}
.coupon-kicker svg{width:15px; height:15px; color:var(--accent);}
.coupon-headline{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.coupon-off{font-size:74px; line-height:.85; font-weight:900; letter-spacing:-3px; color:#fff;
  text-shadow:0 0 38px color-mix(in srgb,var(--accent) 55%,transparent);}
.coupon-off b{color:var(--accent);}
.coupon-main h2{margin:0; font-size:clamp(22px,3vw,27px); line-height:1.12; max-width:420px;}
.coupon-main p{margin:0; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.72); max-width:440px;}
.coupon-perks{display:flex; gap:20px; flex-wrap:wrap; margin-top:2px;}
.coupon-perks span{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.82);}
.coupon-perks svg{width:16px; height:16px; color:var(--accent); flex-shrink:0;}
.coupon-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px;}
.coupon-fine{font-size:12px; color:rgba(255,255,255,.45); line-height:1.4; max-width:300px;}

/* отрывной корешок с перфорацией */
.coupon-stub{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:44px 36px; text-align:center; background:rgba(255,255,255,.04);}
.coupon-stub::before{content:""; position:absolute; left:0; top:18px; bottom:18px; width:0;
  border-left:2px dashed rgba(255,255,255,.28);}
/* вырезы перфорации */
.coupon-stub .notch{position:absolute; left:-13px; width:26px; height:26px; border-radius:50%; background:var(--bg); z-index:2;}
.coupon-stub .notch.top{top:-13px;}
.coupon-stub .notch.bot{bottom:-13px;}
.stub-label{font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:rgba(255,255,255,.55);}
.stub-code{font-family:var(--mono); font-size:30px; font-weight:800; letter-spacing:3px; color:#fff;
  border:1.5px dashed rgba(255,255,255,.35); border-radius:6px; padding:14px 22px; background:rgba(0,0,0,.2);}
.stub-copy{display:inline-flex; align-items:center; gap:8px; background:none; border:0; color:var(--accent); font-size:13px; font-weight:700; letter-spacing:.3px;}
.stub-copy svg{width:15px; height:15px;}
.stub-copy.done{color:#5fd39a;}
.stub-expiry{font-size:12px; color:rgba(255,255,255,.45);}

/* ============================================================
   ЕДИНЫЙ ВЕРТИКАЛЬНЫЙ РИТМ БЛОКОВ ГЛАВНОЙ
   Любой блок ([data-block]) держит одинаковый просвет сверху и снизу
   независимо от порядка и соседей. Симметричные margin схлопываются
   между соседними блоками в один ровный интервал при любом наборе.
   ============================================================ */
[data-block]{margin-block:var(--sp-7); padding-block:0;}

@media (max-width:900px){
  .coupon{grid-template-columns:1fr;}
  .coupon .cog{display:none;}
  .coupon-main{padding:32px 28px;}
  .coupon-off{font-size:58px;}
  .coupon-main h2{font-size:22px;}
  .coupon-stub{padding:30px; background:rgba(255,255,255,.05);}
  .coupon-stub::before{left:18px; right:18px; top:0; width:auto; height:0; border-left:0; border-top:2px dashed rgba(255,255,255,.28);}
  .coupon-stub .notch{left:50%; transform:translateX(-50%);}
  .coupon-stub .notch.top{top:-13px;} .coupon-stub .notch.bot{display:none;}
}

/* ============================================================
   ПОДВАЛ
   ============================================================ */
.footer{background:var(--dark); color:var(--dark-muted); padding:54px 0 28px; margin-top:8px;}
[data-theme="dark"] .footer{border-top:1px solid var(--dark-line);}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:30px; padding-bottom:40px; border-bottom:1px solid var(--dark-line);}
.foot-brand .logo .lg-name{color:#fff;}
.foot-brand p{font-size:13px; line-height:1.6; margin:16px 0 18px; max-width:280px;}
.foot-soc{display:flex; gap:9px;}
.foot-soc a{width:40px; height:40px; border-radius:5px; border:1px solid var(--dark-line); display:flex; align-items:center; justify-content:center; color:var(--dark-muted); transition:all var(--dur-fast) var(--ease-move);}
.foot-soc a:hover{background:var(--accent); border-color:var(--accent); color:#fff;}
.foot-soc svg{width:19px; height:19px;}
.foot-col h4{font-size:13px; font-weight:700; color:#fff; letter-spacing:.4px; text-transform:uppercase; margin:0 0 16px;}
.foot-col a{display:block; font-size:13.5px; padding:6px 0; transition:color var(--dur-fast);}
.foot-col a:hover{color:#fff;}
.foot-contact .fc-phone{font-size:20px; font-weight:800; color:#fff; margin-bottom:6px;}
.foot-contact .fc-line{font-size:13px; line-height:1.6; margin-bottom:14px;}
.foot-pay{display:flex; gap:8px; flex-wrap:wrap;}
.foot-pay span{font-size:10px; font-weight:700; letter-spacing:.5px; color:var(--dark-muted); border:1px solid var(--dark-line); border-radius:3px; padding:6px 9px;}
.foot-pay img{height:26px; width:auto; display:block;}
.foot-bot{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:22px; font-size:12.5px; flex-wrap:wrap;}
.foot-bot a{text-decoration:underline; text-underline-offset:2px;}
.foot-bot a:hover{color:#fff;}

/* ============================================================
   МОБИЛЬНОЕ МЕНЮ
   ============================================================ */
.scrim{position:fixed; inset:0; background:rgba(10,12,16,.55); backdrop-filter:blur(3px); z-index:90; opacity:0; pointer-events:none; transition:opacity var(--dur-base);}
.scrim.open{opacity:1; pointer-events:auto;}
.drawer{position:fixed; top:0; left:0; bottom:0; width:320px; max-width:88vw; background:var(--panel); z-index:95; transform:translateX(-100%); transition:transform var(--dur-base) var(--ease-move); display:flex; flex-direction:column; box-shadow:var(--shadow-lg);}
.drawer.open{transform:none;}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line);}
.drawer-head .x{width:40px; height:40px; border:1px solid var(--line); border-radius:var(--r-sm); background:none; color:var(--ink); display:flex; align-items:center; justify-content:center;}
.drawer-head .x svg{width:20px; height:20px;}
.drawer-body{overflow:auto; padding:10px 0;}
.drawer-body a{display:flex; align-items:center; justify-content:space-between; padding:14px 22px; font-size:15px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line-2);}
.drawer-body a:hover{background:var(--bg-2); color:var(--accent);}
/* Горизонтальное меню в мобильном меню: категория раскрывает подкатегории. */
.d-nav-row{display:flex; align-items:stretch; border-bottom:1px solid var(--line-2);}
.d-nav-row > a{flex:1; border-bottom:0;}
.d-nav-tog{display:flex; align-items:center; justify-content:center; padding:0 var(--sp-4); border:0; background:none; color:var(--ink); cursor:pointer;}
.d-nav-tog svg{width:13px; height:13px; transition:transform var(--dur-fast);}
.d-nav.open .d-nav-tog svg{transform:rotate(180deg);}
.d-nav-subs a{padding-left:calc(22px + var(--sp-3)); font-size:14px; font-weight:500; color:var(--ink-2);}
.drawer-foot{margin-top:auto; padding:18px 22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px;}
.drawer-foot .d-phone{font-size:18px; font-weight:800; color:var(--ink);}
.drawer-foot .d-city{font-size:13px; color:var(--muted);}

/* ============================================================
   АДАПТИВ
   ============================================================ */
/* ============================================================
   АДАПТИВ — 4 опорные точки: 1440 / 1024 / 768 / 390
   ≥1440 широкие · 1024–1439 ноутбуки · 768–1023 планшеты · ≤767 телефоны
   ============================================================ */

/* --- Ноутбуки: ≤1439 --- */
@media (max-width:1439px){
  .container{max-width:1100px;}
  .hero-grid{grid-template-columns:1fr 340px;}
  .cat-grid{grid-template-columns:repeat(3,1fr);}
  .prod-grid, .scroller{grid-template-columns:repeat(3,minmax(0,1fr));}
  .brand-wall{grid-template-columns:repeat(4,1fr);}
  .foot-top{grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:26px;}
}

/* --- Планшеты: ≤1023 --- */
@media (max-width:1023px){
  .container{max-width:100%;}
  .topbar .tb-links a.hide-md{display:none;}
  .header .container{height:70px; gap:16px;}
  /* Узкая шапка: поле поиска должно уметь сжиматься, иначе его минимальная ширина
     выдавливает «Избранное» и «Корзину» за правый край экрана (обрезаются без прокрутки) */
  .header .search{min-width:0;}
  .actions .act .label{display:none;}
  .nav{display:none;}
  .burger{display:flex;}
  .hero-grid{grid-template-columns:1fr; padding:22px 0 28px;}
  /* Баннер во всю ширину: 4:5 не применяем (владелец решает отдельно) */
  .hero-banner{aspect-ratio:auto; min-height:320px;}
  .finder{order:-1;}
  .slider, .slides{min-height:360px;}
  .slide-body h1, .slide-body h2{font-size:32px;}
  /* Ближе к 768px три колонки оставляют названию ~100px и рвут слова —
     колонка заводится только там, где под текст есть место. */
  .cat-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
  .prod-grid, .scroller{grid-template-columns:repeat(3,minmax(0,1fr));}
  .blog-grid-wide{grid-template-columns:repeat(2,1fr);}
  /* Планшет, колонки справа нет, карточек нечётное число — первая идёт во всю ширину,
     остальные парами: иначе последняя стояла бы одна, а ряд выглядел оборванным.
     Условие «нечётное» читается так: первая карточка она же нечётная с конца. */
  .blog-grid-wide > :first-child:nth-last-child(odd){grid-column:1/-1;}
  .benefits-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .media-grid{grid-template-columns:1fr;}
  .foot-top{grid-template-columns:1fr 1fr 1fr; gap:26px;}
  .foot-brand{grid-column:1/-1;}
}

/* --- Телефоны: ≤767 --- */
@media (max-width:767px){
  .container{padding:0 16px;}
  .section{padding:var(--sp-5) 0;}
  /* Ниже .section — чтобы у блоков ([data-block]) на телефоне не возвращался
     собственный вертикальный отступ: интервал держит только margin-block */
  [data-block]{margin-block:var(--sp-5); padding-block:0;}
  .section-head h2{font-size:24px;}
  .topbar{display:none;}
  /* Поиск: поле убрано из строки шапки, лупа в .actions раскрывает ту же форму
     сплошной полосой под шапкой; выдача — листом на всю ширину полосы */
  .search{display:none; position:absolute; top:100%; left:0; right:0; height:auto; padding:10px 16px; background:var(--panel); border:0; border-radius:0; border-bottom:1px solid var(--line); box-shadow:var(--shadow);}
  .header.m-search-open .search{display:flex; flex-wrap:wrap;}
  .scope{flex:0 0 100%; margin-bottom:8px;}
  .search .cat-sel{display:inline-flex; width:100%; height:44px; justify-content:space-between; padding:0 14px; border:1.5px solid var(--line); border-radius:var(--r-md); background:var(--panel); font-size:14px;}
  .scope-menu{left:0; right:0; min-width:0;}
  .search input{height:46px; border:1.5px solid var(--line); border-right:0; border-radius:var(--r-md) 0 0 var(--r-md); background:var(--panel); font-size:16px; padding:0 14px;}
  .search input:focus{border-color:var(--accent);}
  .search .s-btn{height:46px; width:52px; border-radius:0 var(--r-md) var(--r-md) 0;}
  .search-drop{top:100%; left:0; right:0; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:var(--shadow-lg);}
  .sd-scroll{max-height:calc(100dvh - 260px);}
  .act.m-search{display:flex;}
  .header.m-search-open .act.m-search{color:var(--accent); background:var(--bg-2);}
  .header .container{height:62px; gap:12px;}
  .act-hide,.act-acc{display:none;}
  .actions{gap:2px; margin-left:auto;}
  /* Порядок в шапке телефона: знак логотипа слева, иконки и кнопка меню справа.
     Правила только для шапки: тот же .logo стоит в подвале и в выезжающем меню. */
  .header .logo{order:1; flex-shrink:0;}
  .header .actions{order:2;}
  .header .burger{order:3; flex-shrink:0;}
  /* Название и подпись бренда на телефоне не показываются: в строку они не влезают
     и обрезались многоточием */
  .header .logo > span:not(.mark){display:none;}
  .hero-grid{padding:16px 0 22px; gap:16px;}
  .slide-body{padding:30px 28px;}
  .slide-body h1, .slide-body h2{font-size:26px;}
  .slide-body p{font-size:14px;}
  .slider-dots{left:28px; bottom:20px;}
  .slider-arrow{display:none;}
  /* Колонки те же, что на планшете (заводятся только там, где под текст есть место),
     на телефоне у них меньше просвет */
  .cat-grid{gap:12px;}
  .cat-card{padding:16px; gap:12px;}
  .cat-icon{width:50px; height:50px;}
  .cat-icon svg{width:26px; height:26px;}
  .banners{grid-template-columns:1fr;}
  .prod-grid, .scroller{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
  /* «Сетка товаров» и «Отзывы» с настройкой «На телефоне — слайдером»: карточки в одну
     ленту с прокруткой вбок, на экране одна карточка и край следующей. Лента выходит
     до краёв экрана, первая карточка стоит по полю страницы */
  .prod-grid.is-mslider, .reviews-grid.is-mslider{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:calc(100% - var(--sp-6)); overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:16px; overscroll-behavior-x:contain; scrollbar-width:none; margin-inline:-16px; padding-inline:16px;}
  .prod-grid.is-mslider::-webkit-scrollbar, .reviews-grid.is-mslider::-webkit-scrollbar{display:none;}
  .prod-grid.is-mslider > .prod, .reviews-grid.is-mslider > .rev-card{scroll-snap-align:start;}
  .prod{padding:12px;}
  .prod-photo{height:140px;}
  .brand-wall{grid-template-columns:repeat(3,1fr);}
  .blog-grid, .blog-grid-wide{grid-template-columns:1fr;}
  /* Телефон: две колонки оставляют пунктам ~140px под текст, и описание рвётся
     по одному-два слова в строку — на телефоне пункты идут в один столбец */
  .benefits-row{grid-template-columns:minmax(0,1fr);}
  .cta{grid-template-columns:1fr; padding:32px 26px;}
  .cta-form{min-width:0;}
  .cta-text h2{font-size:24px;}
  .foot-top{grid-template-columns:1fr 1fr; gap:22px;}
}

/* --- Узкие телефоны: ≤390 --- */
@media (max-width:390px){
  .prod-grid, .scroller{grid-template-columns:repeat(2,minmax(0,1fr));}
  .actions .act .label{display:none;}
  .cta-input{flex-direction:column;}
  .cta-input .btn{width:100%;}
  .foot-top{grid-template-columns:1fr;}
}

/* --- Отзывы покупателей (главная) --- */
.reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.rev-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 22px 20px; display:flex; flex-direction:column; gap:12px;}
.rev-top{display:flex; align-items:center; gap:12px;}
.rev-av{width:42px; height:42px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex-shrink:0;}
.rev-who{min-width:0;}
.rev-name{font-weight:650; font-size:14.5px; color:var(--ink);}
.rev-date{font-size:12.5px; color:var(--muted); margin-top:1px;}
.rev-stars{display:flex; gap:2px; color:#f5a623;}
.rev-stars svg{width:16px; height:16px;}
.rev-prod{font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--accent);}
a.rev-prod{display:inline-block; align-self:flex-start; text-decoration:none;}
a.rev-prod:hover{text-decoration:underline;}
.rev-text{font-size:13.5px; line-height:1.55; color:var(--muted); margin:0;}
@media (max-width:1024px){ .reviews-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .reviews-grid{grid-template-columns:1fr;} }

/* --- Подтверждение/выбор города --- */
.city-pop{position:fixed; z-index:140; min-width:248px; max-width:320px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow); padding:14px;}
.city-confirm .cc-q{font-size:14px; color:var(--ink); margin-bottom:12px; line-height:1.45;}
.city-confirm .cc-q b{color:var(--accent);}
.city-confirm .cc-row{display:flex; gap:8px;}
.city-pop .btn{height:36px; padding:0 14px; font-size:13px;}
.city-list-head{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin:2px 2px 8px;}
.city-list{display:flex; flex-direction:column; gap:1px; max-height:280px; overflow:auto;}
.city-opt{text-align:left; background:none; border:0; padding:9px 10px; border-radius:4px; font-size:14px; color:var(--ink); cursor:pointer;}
.city-opt:hover{background:var(--bg-2);}
.city-opt.on{color:var(--accent); font-weight:600;}
.city-opt b{color:var(--accent); font-weight:700;}
.city-search{position:relative; margin-bottom:8px;}
.city-search>span{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--faint); pointer-events:none;}
.city-search>span svg{width:16px; height:16px;}
.city-search input{width:100%; height:38px; padding:0 12px 0 32px; border:1px solid var(--line); border-radius:4px; background:var(--bg-2); color:var(--ink); font-size:14px; outline:none;}
.city-search input:focus{border-color:var(--accent);}
.city-empty{padding:14px 10px; font-size:13px; color:var(--muted); text-align:center;}
#hits,#new,#reviews{scroll-margin-top:150px;}

/* --- Шапка: второй баннер + режим на всю ширину --- */
.hero-side{display:flex;}
.hero-grid.hero-full{grid-template-columns:1fr;}
/* Пропорция кадра 4:5 (ширина = высота × 0,8) — совпадает с картинкой 1000×1250 */
/* 4:5 держим как минимум: блок растёт под текст владельца, заголовок и описание
   показываются целиком, сколько бы строк ни было (без обрезки). Скругление снимков —
   на самой картинке и подложке, чтобы не резать текст переполнением блока. */
.hero-banner{position:relative; flex:1; display:flex; align-items:flex-end; aspect-ratio:4/5; border-radius:var(--r-lg); background:var(--dark-2); border:1px solid var(--dark-line); color:#fff; text-decoration:none; --side-bg:var(--dark);}
/* Сплошной фон — пометка banner-color: заливка цветом владельца, подложка снимается.
   Отвечает ТОЛЬКО за фон, как slide-color у слайда. */
.hero-banner.banner-color{background:var(--side-bg);}
/* Подложка под текстом баннера — от цвета фона блока, растворяется кверху */
.hero-banner::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  background:linear-gradient(0deg, var(--side-bg) 0%, color-mix(in srgb, var(--side-bg) 55%, transparent) 42%, transparent 78%);}
.hero-banner.banner-color::before{display:none;}
/* Тени букв нужны только поверх фото; на сплошной заливке их убираем. */
.hero-banner.banner-color .hero-banner-body h3, .hero-banner.banner-color .hero-banner-body p{text-shadow:none;}
/* Подобранный цвет текста — пометка banner-ink: отвечает ТОЛЬКО за цвет букв.
   Заголовок — цвет целиком, описание — приглушённее; плашка и кнопка берут тот же цвет.
   Фото и подложка при этом остаются. */
.hero-banner.banner-ink{color:var(--side-txt);}
.hero-banner.banner-ink .hero-banner-body h3{color:var(--side-txt);}
.hero-banner.banner-ink .hero-banner-body p{color:color-mix(in srgb, var(--side-txt) 85%, transparent);}
.hero-banner.banner-ink .hero-banner-body .hb-tag{color:var(--side-txt);}
.hero-banner.banner-ink .hero-banner-body .btn{color:var(--side-txt);}
.hero-banner-photo{position:absolute; inset:0; z-index:0; border-radius:inherit; overflow:hidden;}
.hero-banner-photo .ph{width:100%; height:100%;}
.hero-banner-photo img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
.hero-banner-body{position:relative; z-index:2; padding:30px 30px 32px;}
.hero-banner-body .hb-tag{display:inline-flex; align-items:center; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#fff; background:var(--accent); border-radius:var(--r-pill); padding:6px 13px; margin-bottom:13px;}
.hero-banner-body h3{margin:0 0 10px; font-size:25px; line-height:1.1; text-shadow:0 1px 14px rgba(8,10,14,.6);}
.hero-banner-body p{margin:0 0 18px; font-size:14px; line-height:1.5; color:rgba(255,255,255,.85); text-shadow:0 1px 10px rgba(8,10,14,.55);}
.hero-banner .btn{pointer-events:none;}

/* Боковой баннер шапки: видимость по размерам экрана (владелец отмечает нужные).
   Скрыт на своём размере → слайдер занимает всю ширину, шапка выглядит законченной. */
@media (min-width:1440px){
  .hero-grid.hb-off-desktop{grid-template-columns:1fr;}
  .hero-grid.hb-off-desktop>.hero-side{display:none;}
}
@media (min-width:1024px) and (max-width:1439px){
  .hero-grid.hb-off-laptop{grid-template-columns:1fr;}
  .hero-grid.hb-off-laptop>.hero-side{display:none;}
}
@media (min-width:768px) and (max-width:1023px){
  .hero-grid.hb-off-tablet>.hero-side{display:none;}
}
@media (max-width:767px){
  .hero-grid.hb-off-phone>.hero-side{display:none;}
}

/* Вариант шапки с формой заявки (на базе панели .finder). Состояния формы: */
.hero-lead{flex:1;}                                          /* занимает всю колонку шапки */
.hero-lead .hero-lead-err{display:none; margin-top:0;}      /* ошибка отправки — скрыта по умолчанию */
.hero-lead.is-error .hero-lead-err{display:block;}
.hero-lead.is-sending .hero-lead-submit{opacity:.6; pointer-events:none;} /* отправляется */

/* Картинки-заглушки: слайдер (2:1) и обложки блога на главной (16:9) — заполняют слот с object-fit */
.slide-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.post-cover img{width:100%; height:100%; object-fit:cover; display:block;}



/* Брендкит: служебные классы вместо inline-стилей */
.brand-subtle{color:var(--faint);}
.foot-legal{display:flex;gap:20px;}
.crumb-sep{opacity:.5;}
.crumb-current{color:var(--ink-2);font-weight:600;}
.ico-xs{width:13px;height:13px;display:inline-flex;}
.ico-turn{width:16px;height:16px;transform:rotate(-90deg);}
.section-tight{padding-top:0;}
.section-head-compact{margin-bottom:20px;}
.page-spacer{height:30px;}
.ct-compact{font-size:16px;}
.ok-icon{color:var(--ok);}
.logo-inline{width:30px;height:30px;display:inline-flex;}
.pv-frame-size{width:1280px;height:1600px;}
[hidden]{display:none!important;}

/* Брендкит: layout helpers для удаления inline-стилей */
.phone-lg{--ss-ph-h:54px;--ss-ph-r:13px;}
.s-actions-top{margin-top:26px;}
.z-69{z-index:69;}
.text-muted-sm{font-size:13.5px;color:var(--muted);}
.text-muted-xs{font-size:12px;color:var(--faint);}
.text-ink{color:var(--ink);}
.text-accent{color:var(--accent);}
.max-680{max-width:680px;}.max-760{max-width:760px;}.max-860{max-width:860px;}.max-880{max-width:880px;}
.mt-4{margin-top:4px;}.mt-8{margin-top:8px;}.mt-10{margin-top:10px;}.mt-14{margin-top:14px;}.mt-16{margin-top:16px;}.mt-18{margin-top:18px;}.mt-20{margin-top:20px;}
.mb-8{margin-bottom:8px;}.mb-9{margin-bottom:9px;}.mb-10{margin-bottom:10px;}.mb-12{margin-bottom:12px;}.mb-14{margin-bottom:14px;}.mb-16{margin-bottom:16px;}.mb-18{margin-bottom:18px;}
.ml-auto{margin-left:auto;}.ml-8{margin-left:8px;}
.flex-gap-8{display:flex;gap:8px;}.flex-gap-9{display:flex;gap:9px;}.flex-gap-10{display:flex;gap:10px;}.flex-col-gap-12{display:flex;flex-direction:column;gap:12px;}
.textarea-sm{min-height:64px;}.textarea-md{min-height:70px;}.textarea-lg{min-height:80px;}.textarea-xl{min-height:120px;}
.btn-compact{height:34px;padding:0 12px;}.btn-delete{color:var(--accent);}.btn-wide{height:48px;padding:0 26px;font-size:15px;}
.icon-14{width:14px;height:14px;display:inline-flex;}.icon-16{width:16px;height:16px;display:inline-flex;}
.cover-64{width:64px;height:64px;}.cover-80{width:80px;height:80px;}.cover-120x90{width:120px;height:90px;}
.obj-contain{width:100%;height:100%;object-fit:contain;}.obj-cover{width:100%;height:100%;object-fit:cover;}.obj-cover-r8{width:100%;height:100%;object-fit:cover;border-radius:8px;}
.center-panel{max-width:580px;margin:10px auto;text-align:center;padding:44px 32px;}
.module-icon-lg{width:66px;height:66px;border-radius:8px;background:var(--bg-2);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.module-icon-lg [data-i]{width:30px;height:30px;display:inline-flex;}
.inline-chip-brand{background:var(--bg-2);border:1px solid var(--line);border-radius:4px;padding:7px 12px;font-size:13px;}
.inline-chip-muted{color:var(--faint);cursor:pointer;}
.brand-divider{height:1px;background:var(--line-2);margin:20px 0;}
.hidden-inline{display:none;}
.crumbs-inline{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--faint);padding:18px 0 2px;}
.muted-link{color:var(--muted);}
.spacer-40{height:40px;}
.ct-row-flat{border:0;padding-top:0;}
.req-text{font-size:13px;line-height:1.7;color:var(--muted);}
.co-card-flat{margin:0;}
.contact-form-title{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:800;letter-spacing:-.3px;margin-bottom:20px;}
/* ---- Выбор способа рядом кнопок ----
   Один вид на два места: выбор способа входа на экране авторизации и выбор удобного способа
   связи в формах заявки. Раньше правила жили в shop/login.css и были доступны только входу. */
.lc-social{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.soc{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--panel);font-family:inherit;font-size:13.5px;font-weight:650;color:var(--ink);cursor:pointer;transition:all var(--dur-fast);}
.soc:hover{border-color:var(--faint);background:var(--bg-2);}
/* Выбранная соцсеть при переходе — акцентная рамка (состояние ставит скрипт классом) */
.soc.sel{border-color:var(--accent);}
.soc .si{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.soc .si img{width:100%;height:100%;object-fit:contain;}
/* Ряд квадратных кнопок: только значок, подпись — в aria-label. Используется формами заявки,
   где способов пять и подписи внутри квадрата не помещаются. */
.lc-social.soc-icons{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;}
.soc-icons .soc{gap:0;}
.soc-icons .soc .si{width:24px;height:24px;}
.soc-icons .soc .si svg{width:100%;height:100%;}

.contact-title-icon{display:inline-flex;flex:none;width:21px;height:21px;color:var(--accent);}
.contact-title-icon svg{width:100%; height:100%;}
.success-state{background:var(--ok);}
.promo-card .pc-top.promo-gold{background:var(--accent);}
.promo-card .pc-top.promo-green{background:var(--ok);}
.promo-card .pc-top.promo-blue{background:var(--info);}
.brand-logo{background:var(--accent-soft);color:var(--accent-press);}
.star-icon{width:15px;height:15px;fill:#f5a623;}
.rev-bar .fill{width:var(--rev-pct,0%);}
.grid-three{grid-template-columns:repeat(3,1fr);}
.progress-62{width:62%;}
.inline-icon-15{display:inline-flex;width:15px;height:15px;}
.tag-muted{background:var(--bg-2);color:var(--muted);}
.phone-h-46{--ss-ph-h:46px;}
.phone-h-52{--ss-ph-h:52px;--ss-ph-r:12px;}
/* Обёртка кнопки «Показать товары» внизу панели фильтров: отступы и разделитель живут
   здесь, а не в разметке. Виден только вместе с кнопкой. Прилипает к низу экрана, пока колонка
   фильтров длиннее экрана; фон панели — чтобы список под ней не просвечивал. */
.filters-done-wrap{position:sticky;bottom:0;z-index:2;background:var(--panel);padding:16px 20px;border-top:1px solid var(--line);}
.filters-done-wrap:has([hidden]){display:none;}
.read-reset{margin-left:0;}
.help-empty,.blog-empty{grid-column:1/-1;text-align:center;color:var(--faint);}
.help-empty{padding:20px;}
.blog-empty{padding:50px;}
.dz-pick-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
.dz-card-button{cursor:pointer;text-align:left;}
.city-chev{width:13px;height:13px;display:inline-flex;}
.social-redirect{color:var(--accent);font-weight:700;}

/* Зона нажатия на телефоне (UX-11): мелкие ссылки и кнопки получают невидимую область не меньше
   кнопки среднего размера (--btn-md-h) по каждой стороне. Вид элемента прежний — область даёт
   прозрачный ::after по центру; у элемента крупнее области она совпадает с ним самим. */
@media (max-width:767px){
  .crumbs a, .section-head .link, .stub-copy, .foot-col a, .foot-legal a, .filters-head .reset,
  ss-select .ss-dd-btn, .cat-intro-toggle, .pdp-brand, .gthumb-nav, .blog-seg button, .blog-cat,
  .side-cats a, .co-clear, .cmt-acts button, .prod-brand .rev-stars, .city-pop .btn, .slider-dots button{position:relative;}
  .crumbs a::after, .section-head .link::after, .stub-copy::after, .foot-col a::after, .foot-legal a::after,
  .filters-head .reset::after, ss-select .ss-dd-btn::after, .cat-intro-toggle::after, .pdp-brand::after,
  .gthumb-nav::after, .blog-seg button::after, .blog-cat::after, .side-cats a::after, .co-clear::after,
  .cmt-acts button::after, .prod-brand .rev-stars::after, .city-pop .btn::after, .slider-dots button::after,
  .prod-fav::after{
    content:""; position:absolute;
    top:min(0px, calc(50% - var(--btn-md-h) / 2)); bottom:min(0px, calc(50% - var(--btn-md-h) / 2));
    left:min(0px, calc(50% - var(--btn-md-h) / 2)); right:min(0px, calc(50% - var(--btn-md-h) / 2));
  }
  /* Стрелка миниатюр стоит вплотную к ленте: её зона — поверх соседней миниатюры. */
  .gthumb-nav::after{z-index:1;}
}