/* =====================================================================
   TRADE DESIGN — редизайн главной (чистый минимализм)
   Дизайн-система: токены, компоненты, 3 варианта макета, tweaks
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root {
  /* accent (управляется tweak) */
  --accent: #e73c4f;
  --accent-d: color-mix(in srgb, var(--accent), #000 16%);
  --accent-tint: color-mix(in srgb, var(--accent) 9%, #fff);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, #fff);
  --yellow: #ffd02e;

  /* neutrals (тёплый нейтральный) */
  --ink: #161514;
  --ink-2: #565452;
  --ink-3: #8d8a87;
  --ink-4: #b6b3af;
  --line: #ececea;
  --line-2: #f4f3f1;
  --surface: #ffffff;
  --surface-2: #faf9f7;
  --surface-3: #f4f2ef;

  /* typography */
  --font: 'Onest', system-ui, sans-serif;
  --font-display: var(--font);

  /* shape (управляется tweak) */
  --r: 14px;
  --r-sm: max(4px, calc(var(--r) - 6px));
  --r-lg: calc(var(--r) + 6px);

  /* density (управляется tweak) */
  --dsc: 1;
  --sec-y: calc(72px * var(--dsc));
  --gap: calc(22px * var(--dsc));

  /* header theme (управляется tweak) */
  --head-bg: #ffffff;
  --head-fg: #161514;
  --head-fg-2: #6b6967;
  --head-line: #ececea;
  --head-surface: #f4f2ef;

  --maxw: 1320px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-1: 0 1px 2px rgba(20,18,16,.04), 0 4px 14px -6px rgba(20,18,16,.08);
  --shadow-2: 0 12px 38px -14px rgba(20,18,16,.20);
  --shadow-3: 0 28px 70px -24px rgba(20,18,16,.28);
}

/* ---------- RESET ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--surface);
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: #fff; }
a { color: inherit; text-decoration: none; transition: color .15s var(--ease); }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,h5 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
input, textarea, select { font: inherit; }

/* ---------- LAYOUT UTILITIES ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: var(--sec-y) 0; }
.section.tight { padding-top: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
}
.eyebrow::before {
  content: ''; width: 22px; height: 1.5px; background: var(--accent); display: inline-block;
}
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: calc(34px * var(--dsc));
}
.section-head .sh-l { max-width: 720px; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.1vw, 40px);
  margin-top: 12px;
  letter-spacing: -0.03em;
}
.section-head p { margin: 10px 0 0; color: var(--ink-2); font-size: 15.5px; max-width: 560px; }
.link-more {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  padding-bottom: 4px; border-bottom: 1.5px solid var(--ink);
  transition: gap .2s var(--ease), color .15s, border-color .15s;
}
.link-more:hover { color: var(--accent); border-color: var(--accent); gap: 12px; }
.link-more svg { width: 14px; height: 14px; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; padding: 0 28px;
  border-radius: var(--r);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  transition: all .18s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-d); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; transform: translateY(-1px); }
.btn-sm { height: 42px; padding: 0 20px; font-size: 14px; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  background: var(--surface-3); color: var(--ink-2);
  transition: all .15s var(--ease);
}
.pill:hover { background: var(--accent-tint); color: var(--accent); }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-head { position: sticky; top: 0; z-index: 500; background: var(--head-bg); }
.site-head.stuck { box-shadow: 0 1px 0 var(--head-line), 0 12px 30px -18px rgba(0,0,0,.25); }

/* utility top bar */
.topbar {
  background: var(--head-surface);
  border-bottom: 1px solid var(--head-line);
  font-size: 13px;
  transition: max-height .3s var(--ease), opacity .25s, padding .25s;
  overflow: hidden;
}
.site-head.stuck .topbar { max-height: 0; opacity: 0; pointer-events: none; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; height: 42px; }
.topbar-l, .topbar-r { display: flex; align-items: center; gap: 4px; }
.top-link {
  padding: 6px 12px; color: var(--head-fg-2); border-radius: 999px;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.top-link:hover { color: var(--accent); background: color-mix(in srgb, var(--head-fg) 5%, transparent); }
.top-sep { width: 1px; height: 16px; background: var(--head-line); margin: 0 6px; }

.city-pick {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; color: var(--head-fg);
  font-weight: 600;
  transition: background .15s;
}
.city-pick:hover { background: color-mix(in srgb, var(--head-fg) 6%, transparent); }
.city-pick .geo { width: 14px; height: 14px; color: var(--accent); }
.city-pick .chev { width: 9px; height: 9px; color: var(--head-fg-2); }

.city-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-2); padding: 8px; min-width: 240px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all .18s var(--ease);
}
.city-wrap { position: relative; }
.city-pop.open { opacity: 1; visibility: visible; transform: translateY(0); }
.city-pop button {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 9px 12px; border-radius: var(--r-sm); font-size: 14px; color: var(--ink);
  text-align: left;
}
.city-pop button:hover { background: var(--surface-3); color: var(--accent); }
.city-pop button.active { color: var(--accent); font-weight: 600; }
.city-pop button .tick { width: 14px; height: 14px; opacity: 0; }
.city-pop button.active .tick { opacity: 1; }

.lang-switch {
  display: inline-flex; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--head-fg) 7%, transparent); padding: 2px;
}
.lang-switch button {
  padding: 4px 11px; font-size: 12px; font-weight: 700; border-radius: 999px;
  color: var(--head-fg-2); letter-spacing: 0.02em;
}
.lang-switch button.active { background: var(--head-bg); color: var(--accent); box-shadow: var(--shadow-1); }

/* main bar */
.mainbar { border-bottom: 1px solid var(--head-line); }
.mainbar .container {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center; gap: 20px;
  height: 88px;
  transition: height .25s var(--ease);
}
.site-head.stuck .mainbar .container { height: 70px; }

/* logo */
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo-mark {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: -0.04em;
  position: relative; overflow: hidden;
  flex-shrink: 0;
  transition: height .25s, width .25s;
}
.logo-mark span { position: relative; z-index: 1; }
.logo-mark::after {
  content: ''; position: absolute; right: -8px; bottom: -8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.18);
}
.logo-txt { line-height: 1.05; }
.logo-txt b {
  display: block; font-family: var(--font-display); font-size: 18px; font-weight: 800;
  color: var(--head-fg); letter-spacing: -0.03em; text-transform: uppercase;
}
.logo-txt small { display: block; font-size: 11px; color: var(--head-fg-2); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 2px; }

/* catalog button */
.menu-btn { display: none; }
.cat-btn {
  display: inline-flex; align-items: center; gap: 11px;
  height: 52px; padding: 0 22px; border-radius: var(--r);
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 600;
  transition: background .15s, height .25s;
}
.cat-btn:hover { background: var(--accent-d); color: #fff; }
.site-head.stuck .cat-btn { height: 46px; }
.cat-btn .bars { display: grid; gap: 3px; }
.cat-btn .bars i { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s var(--ease); }
.cat-btn.open .bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.cat-btn.open .bars i:nth-child(2) { opacity: 0; }
.cat-btn.open .bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* search */
.search { position: relative; }
.search-box {
  display: flex; align-items: center;
  height: 52px; border-radius: var(--r);
  background: var(--head-surface);
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: box-shadow .18s var(--ease), background .18s, height .25s;
}
.site-head.stuck .search-box { height: 46px; }
.search-box:focus-within { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow-1); }
.search-box input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  padding: 0 18px; font-size: 15px; color: var(--ink);
}
.search-box input::placeholder { color: var(--ink-3); }
.search-btn {
  width: 56px; height: 100%; display: grid; place-items: center;
  color: #fff; background: var(--accent); border-radius: var(--r);
  margin: 0; transition: background .15s;
}
.search-box:focus-within .search-btn,
.search-btn:hover { background: var(--accent-d); }
.search-btn svg { width: 20px; height: 20px; }

.search-pop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); padding: 18px 20px 20px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all .2s var(--ease);
}
.search-pop.open { opacity: 1; visibility: visible; transform: translateY(0); }
.search-pop h5 { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: 12px; }
.search-pop h5:not(:first-child) { margin-top: 22px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sp-cat {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--ink);
}
.sp-cat:hover { background: var(--surface-3); color: var(--accent); }
.sp-cat .ic { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.sp-cat .ic svg { width: 18px; height: 18px; }
.sp-cat .ar { margin-left: auto; width: 14px; height: 14px; color: var(--ink-4); }

/* header tools */
.head-tools { display: flex; align-items: center; gap: 6px; }
.head-phone { display: flex; flex-direction: column; align-items: flex-end; margin-right: 10px; }
.head-phone a { font-size: 17px; font-weight: 700; color: var(--head-fg); letter-spacing: -0.01em; white-space: nowrap; }
.head-phone a:hover { color: var(--accent); }
.head-phone button { font-size: 12px; color: var(--accent); font-weight: 600; border-bottom: 1px dashed currentColor; padding-bottom: 1px; }
.tool {
  position: relative;
  width: 48px; height: 48px; border-radius: var(--r);
  display: grid; place-items: center; color: var(--head-fg);
  transition: background .15s, color .15s;
}
.tool:hover { background: var(--head-surface); color: var(--accent); }
.tool svg { width: 23px; height: 23px; }
.tool .cnt {
  position: absolute; top: 5px; right: 4px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--head-bg);
}
.tool .cnt.yellow { background: var(--yellow); color: var(--ink); }

/* nav row */
.navrow { border-bottom: 1px solid var(--head-line); }
.site-head.stuck .navrow { display: none; }
.navrow .container { display: flex; align-items: center; gap: 4px; height: 50px; }
.navrow a {
  padding: 8px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 500;
  color: var(--head-fg); transition: color .15s, background .15s;
}
.navrow a:hover { color: var(--accent); background: var(--head-surface); }
.navrow a.hot { color: var(--accent); font-weight: 600; }
.navrow .nav-spacer { margin-left: auto; }
.navrow .nav-note { font-size: 13px; color: var(--head-fg-2); display: inline-flex; align-items: center; gap: 8px; }
.navrow .nav-note svg { width: 15px; height: 15px; color: var(--accent); }

/* cart mini dropdown */
.tool-wrap { position: relative; }
.mini-cart {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  width: 360px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); padding: 18px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all .2s var(--ease);
}
.mini-cart.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mini-cart h5 { font-size: 15px; margin-bottom: 14px; }
.mc-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-2); }
.mc-item .mc-img { width: 52px; height: 52px; border-radius: var(--r-sm); background: var(--surface-3); display: grid; place-items: center; }
.mc-item .mc-img svg { width: 30px; height: 30px; color: var(--ink-4); }
.mc-item .mc-name { font-size: 13px; font-weight: 500; line-height: 1.3; }
.mc-item .mc-meta { font-size: 12px; color: var(--ink-3); }
.mc-item .mc-price { font-size: 14px; font-weight: 700; white-space: nowrap; }
.mc-foot { display: flex; align-items: center; justify-content: space-between; margin: 16px 0; }
.mc-foot .mc-total { font-size: 18px; font-weight: 800; }
.mc-empty { padding: 24px 0; text-align: center; color: var(--ink-3); font-size: 14px; }

/* =====================================================================
   MEGA MENU
   ===================================================================== */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 480;
  background: var(--surface);
  box-shadow: var(--shadow-3);
  border-top: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.mega.open { opacity: 1; visibility: visible; transform: translateY(0); }

.mega-grid { display: grid; grid-template-columns: 300px 1fr 280px; max-height: 72vh; }
.mega-rail { border-right: 1px solid var(--line); padding: 18px 0; overflow-y: auto; }
.mega-rail button {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 12px 22px; font-size: 14.5px; font-weight: 500; color: var(--ink);
  border-left: 3px solid transparent;
  transition: background .12s, color .12s;
}
.mega-rail button .ic { width: 26px; height: 26px; color: var(--ink-3); flex-shrink: 0; }
.mega-rail button .ic svg { width: 100%; height: 100%; }
.mega-rail button .ar { margin-left: auto; width: 14px; height: 14px; color: var(--ink-4); opacity: 0; transition: opacity .12s; }
.mega-rail button:hover, .mega-rail button.active {
  background: var(--surface-2); color: var(--accent); border-left-color: var(--accent);
}
.mega-rail button:hover .ic, .mega-rail button.active .ic { color: var(--accent); }
.mega-rail button.active .ar { opacity: 1; }

.mega-cols { padding: 30px 34px; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 30px; align-content: start; }
.mega-group h4 { font-size: 15px; color: var(--ink); margin-bottom: 12px; }
.mega-group h4 a:hover { color: var(--accent); }
.mega-group ul li a { display: block; padding: 5px 0; font-size: 13.5px; color: var(--ink-2); }
.mega-group ul li a:hover { color: var(--accent); }

.mega-promo { border-left: 1px solid var(--line); padding: 26px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.mega-promo .mp-card { border-radius: var(--r); overflow: hidden; background: var(--surface-3); position: relative; }
.mega-promo .mp-card image-slot { width: 100%; height: 150px; display: block; }
.mega-promo .mp-tag { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.mega-promo .mp-body { padding: 14px; }
.mega-promo .mp-body b { display: block; font-size: 14px; }
.mega-promo .mp-body span { font-size: 13px; color: var(--ink-3); }
.mp-hits h5 { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.mp-hit { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.mp-hit .h-img { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--surface-3); display: grid; place-items: center; flex-shrink: 0; }
.mp-hit .h-img svg { width: 26px; height: 26px; color: var(--ink-4); }
.mp-hit .h-name { font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.mp-hit .h-price { font-size: 13px; font-weight: 700; color: var(--accent); }

.scrim {
  position: fixed; inset: 0; z-index: 470; background: rgba(20,18,16,.42);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.scrim.open { opacity: 1; visibility: visible; }

/* =====================================================================
   MOBILE MENU DRAWER — многоуровневый слайд
   ===================================================================== */
.mobile-menu {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 490;
  width: min(90vw, 384px); background: var(--surface);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .32s var(--ease);
  box-shadow: var(--shadow-3);
}
.mobile-menu.open { transform: translateX(0); }
.mm-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.mm-bar .logo-mark { width: 38px; height: 38px; }
.mm-bar .logo-txt b { font-size: 16px; }
.mm-close { width: 42px; height: 42px; border-radius: var(--r); background: var(--surface-3); display: grid; place-items: center; color: var(--ink); flex-shrink: 0; }
.mm-close svg { width: 20px; height: 20px; }

.mm-viewport { flex: 1; position: relative; overflow: hidden; }
.mm-stack { display: flex; height: 100%; width: 100%; transition: transform .32s var(--ease); }
.mm-panel { flex: 0 0 100%; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mm-back {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 15px 18px; text-align: left; font-size: 15px; font-weight: 700; color: var(--ink);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.mm-back svg { width: 20px; height: 20px; color: var(--accent); }
.mm-list { padding: 4px 0; }
.mm-item {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 15px 18px; font-size: 15.5px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line-2);
}
.mm-item:active { background: var(--surface-2); }
.mm-item .mm-ic { width: 26px; height: 26px; color: var(--accent); flex-shrink: 0; display: grid; place-items: center; }
.mm-item .mm-ic svg { width: 23px; height: 23px; }
.mm-item .mm-lbl { flex: 1; }
.mm-item .mm-go { width: 18px; height: 18px; color: var(--ink-4); flex-shrink: 0; }
.mm-item.has-sub:active .mm-go { color: var(--accent); }
.mm-item.is-all { color: var(--accent); font-weight: 700; }
.mm-item.is-all .mm-lbl::after { content: ' →'; }

.mm-extra { padding: 4px 0 24px; }
.mm-lang { display: inline-flex; margin: 14px 18px; border-radius: 999px; overflow: hidden; background: var(--surface-3); padding: 3px; }
.mm-lang button { padding: 8px 18px; font-size: 13px; font-weight: 700; border-radius: 999px; color: var(--ink-3); }
.mm-lang button.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-1); }
body[data-sharp="1"] .mm-lang, body[data-sharp="1"] .mm-lang button { border-radius: 0; }
.mm-row { display: flex; align-items: center; gap: 13px; padding: 14px 18px; font-size: 15px; font-weight: 600; color: var(--ink); border-top: 1px solid var(--line-2); }
.mm-row:active { background: var(--surface-2); }
.mm-row svg { width: 22px; height: 22px; color: var(--ink-2); flex-shrink: 0; }
.mm-row .mm-cnt { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.mm-call { padding: 18px; border-top: 1px solid var(--line); margin-top: 4px; }
.mm-call .mm-tel { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.mm-call .mm-tel:active { color: var(--accent); }
.mm-call .mm-callsub { display: block; font-size: 12.5px; color: var(--ink-3); margin: 2px 0 14px; }
.mm-call .btn { width: 100%; }
.mm-contacts { padding: 4px 18px 0; }
.mm-ct { display: flex; gap: 10px; padding: 9px 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.mm-ct svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.mm-ct a:active { color: var(--accent); }
.mm-soc { display: flex; gap: 10px; padding: 16px 18px 6px; }
.mm-soc-a { width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center; color: #fff; transition: transform .15s var(--ease), filter .15s; }
.mm-soc-a:active { transform: scale(.92); }
.mm-soc-a svg { width: 22px; height: 22px; }
.mm-soc-a.fb { background: #1877f2; }
.mm-soc-a.ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); }
.mm-soc-a.wa { background: #25d366; }
.mm-soc-a.tg { background: #29a9eb; }
.mm-soc-a.tt { background: #111; }
body[data-sharp="1"] .mm-soc-a { border-radius: 0; }

/* burger button (mobile only) */
.burger-btn { display: none; width: 46px; height: 46px; border-radius: var(--r); background: var(--head-surface); color: var(--head-fg); place-items: center; flex-shrink: 0; }
.burger-btn .bg-bars { display: grid; gap: 4px; }
.burger-btn .bg-bars i { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.burger-btn.open { background: var(--accent); color: #fff; }
.burger-btn.open .bg-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger-btn.open .bg-bars i:nth-child(2) { opacity: 0; }
.burger-btn.open .bg-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* search toggle button (mobile only) */
.search-toggle { display: none; }

/* =====================================================================
   HERO — 3 варианта
   ===================================================================== */
.hero-variant { display: none; }
body[data-variant="editorial"] .hero-variant.v-editorial { display: block; }
body[data-variant="bento"] .hero-variant.v-bento { display: block; }
body[data-variant="premium"] .hero-variant.v-premium { display: block; }

/* — Редакторский — */
.hero-ed { padding: calc(56px * var(--dsc)) 0 calc(40px * var(--dsc)); }
.hero-ed .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero-ed h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.2vw, 72px);
  letter-spacing: -0.04em; line-height: 1.0;
  margin: 20px 0 0;
}
.hero-ed h1 em { font-style: normal; color: var(--accent); }
.hero-ed .lead { margin: 22px 0 30px; font-size: 18px; color: var(--ink-2); max-width: 480px; }
.hero-ed .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-ed .hstats { display: flex; gap: 40px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.hero-ed .hstats .n { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.hero-ed .hstats .l { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.hero-ed .hero-media { position: relative; }
.hero-ed .hero-media image-slot { width: 100%; height: 520px; display: block; }
.hero-ed .spec-card {
  position: absolute; left: -28px; bottom: 40px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-2); padding: 16px 18px; width: 230px;
}
.hero-ed .spec-card .sc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hero-ed .spec-card .sc-badge { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.hero-ed .spec-card .sc-name { font-size: 13px; font-weight: 600; line-height: 1.25; }
.hero-ed .spec-card .sc-price { font-size: 20px; font-weight: 800; }
.hero-ed .spec-card .sc-kaspi { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* — Бенто — */
.hero-bento { padding: calc(34px * var(--dsc)) 0 calc(20px * var(--dsc)); }
.bento {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 250px 250px;
  gap: 16px;
}
.bento-tile {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bento-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.bento-tile.big { grid-row: span 2; padding: 38px; }
.bento-tile.big image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.bento-tile.big .b-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,16,.12) 30%, rgba(20,18,16,.82)); z-index: 1; }
.bento-tile.big .b-content { position: relative; z-index: 2; color: #fff; }
.bento-tile.big .eyebrow { color: #fff; }
.bento-tile.big .eyebrow::before { background: #fff; }
.bento-tile.big h1 { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -0.04em; margin: 14px 0 18px; max-width: 460px; }
.bento-tile .b-content p { color: rgba(255,255,255,.85); margin: 0 0 22px; max-width: 400px; }
.bento-tile.accent { background: var(--accent); color: #fff; border-color: transparent; }
.bento-tile.accent .bt-k { font-family: var(--font-display); font-size: 46px; font-weight: 800; letter-spacing: -0.03em; }
.bento-tile.accent .bt-sub { opacity: .9; font-size: 14px; }
.bento-tile.accent .bt-lbl { font-size: 13px; font-weight: 600; opacity: .85; margin-bottom: auto; }
.bento-tile.dark { background: var(--ink); color: #fff; border-color: transparent; }
.bento-tile .bt-lbl-top { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-bottom: auto; }
.bento-tile.dark .bt-lbl-top { color: rgba(255,255,255,.55); }
.bento-tile h3 { font-size: 21px; letter-spacing: -0.02em; margin-bottom: 6px; }
.bento-tile .bt-go { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; margin-top: 12px; }
.bento-tile .bt-go svg { width: 14px; height: 14px; }

/* — Премиум — */
.hero-prem { background: var(--ink); color: #fff; overflow: hidden; }
.hero-prem .container { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; min-height: 560px; padding-top: 40px; padding-bottom: 40px; }
.hero-prem .eyebrow { color: var(--yellow); }
.hero-prem .eyebrow::before { background: var(--yellow); }
.hero-prem h1 { font-family: var(--font-display); font-size: clamp(38px, 5vw, 66px); letter-spacing: -0.04em; line-height: 1.02; margin: 20px 0 0; }
.hero-prem h1 em { font-style: normal; color: var(--accent); }
.hero-prem .lead { margin: 22px 0 32px; font-size: 18px; color: rgba(255,255,255,.7); max-width: 460px; }
.hero-prem .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-prem .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.hero-prem .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.hero-prem .hstats { display: flex; gap: 40px; margin-top: 42px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.14); }
.hero-prem .hstats .n { font-family: var(--font-display); font-size: 30px; font-weight: 800; }
.hero-prem .hstats .l { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 2px; }
.hero-prem .hero-media { position: relative; }
.hero-prem .hero-media image-slot { width: 100%; height: 480px; display: block; }
.hero-prem .glow { position: absolute; inset: -10% -10% -10% 10%; background: radial-gradient(circle at 60% 50%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 62%); filter: blur(20px); z-index: 0; }
.hero-prem .hero-media { z-index: 1; }

/* =====================================================================
   CATEGORY RAIL (chips)
   ===================================================================== */
.catrail { border-bottom: 1px solid var(--line); }
.catrail .container { display: flex; gap: 10px; overflow-x: auto; padding-top: 18px; padding-bottom: 18px; scrollbar-width: none; }
.catrail .container::-webkit-scrollbar { display: none; }
.cat-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 11px;
  padding: 10px 18px 10px 11px; border-radius: 999px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px; font-weight: 600; color: var(--ink);
  transition: all .18s var(--ease); white-space: nowrap;
}
.cat-chip:hover { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); transform: translateY(-2px); }
.cat-chip .ci { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.cat-chip:hover .ci { background: var(--accent); color: #fff; box-shadow: none; }
.cat-chip .ci svg { width: 17px; height: 17px; }

/* =====================================================================
   USP STRIP
   ===================================================================== */
.usp { border-bottom: 1px solid var(--line); }
.usp .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.usp-item { display: flex; align-items: center; gap: 15px; padding: 26px 30px; }
.usp-item + .usp-item { border-left: 1px solid var(--line); }
.usp-item .ic { width: 42px; height: 42px; color: var(--accent); flex-shrink: 0; display: grid; place-items: center; }
.usp-item .ic svg { width: 30px; height: 30px; }
.usp-item b { display: block; font-size: 14.5px; font-weight: 700; }
.usp-item span { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; display: block; margin-top: 2px; }

/* =====================================================================
   PRODUCTS
   ===================================================================== */
.prod-tabs { display: flex; gap: 8px; }
.prod-tab {
  padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); transition: all .15s;
}
.prod-tab:hover { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.prod-tab.active { background: var(--ink); color: #fff; box-shadow: none; }

.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.product {
  position: relative; display: flex; flex-direction: column;
  min-width: 0;
  border-radius: var(--r-lg); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden; transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.product:hover { box-shadow: var(--shadow-2); transform: translateY(-4px); }
.product:hover .prod-acts { opacity: 1; transform: translateX(0); }
.prod-badges { position: absolute; top: 14px; left: 14px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.prod-badge { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; color: #fff; letter-spacing: 0.01em; }
.prod-badge.sale { background: var(--accent); }
.prod-badge.new { background: var(--ink); }
.prod-badge.hit { background: var(--yellow); color: var(--ink); }
.prod-acts { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateX(8px); transition: all .2s var(--ease); }
.prod-act { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink-2); display: grid; place-items: center; transition: all .15s; }
.prod-act:hover { color: var(--accent); }
.prod-act.on { background: var(--accent); color: #fff; }
.prod-act svg { width: 18px; height: 18px; }
.prod-media { position: relative; aspect-ratio: 1 / 1; background: var(--surface-2); }
.prod-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.prod-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.prod-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 7px; }
.prod-name { font-size: 14.5px; font-weight: 500; line-height: 1.35; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; overflow-wrap: anywhere; }
.product:hover .prod-name { color: var(--accent); }
.prod-rating { display: flex; align-items: center; gap: 7px; margin-bottom: 16px; }
.prod-rating .stars { display: inline-flex; gap: 1px; }
.prod-rating .stars svg { width: 14px; height: 14px; }
.prod-rating .cnt { font-size: 12px; color: var(--ink-3); }
.prod-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.prod-price .now { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.prod-price .old { font-size: 13px; color: var(--ink-3); text-decoration: line-through; margin-top: 2px; }
.prod-kaspi { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.prod-kaspi b { color: var(--accent); }
.prod-buy { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--r); background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; transition: all .15s; }
.prod-buy:hover { background: var(--accent); color: #fff; }
.prod-buy:active { transform: scale(.93); }
.prod-buy svg { width: 21px; height: 21px; }

/* =====================================================================
   BUSINESS TYPES
   ===================================================================== */
.biz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.biz {
  position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 230px;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 26px;
  color: #fff; box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.biz:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.biz image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.biz .b-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,16,.1) 35%, rgba(20,18,16,.8)); z-index: 1; }
.biz .b-ic { position: absolute; top: 22px; left: 24px; z-index: 2; width: 44px; height: 44px; border-radius: var(--r-sm); background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; }
.biz .b-ic svg { width: 24px; height: 24px; }
.biz h3 { position: relative; z-index: 2; font-size: 22px; margin-bottom: 4px; }
.biz p { position: relative; z-index: 2; margin: 0; font-size: 13px; color: rgba(255,255,255,.82); }
.biz .b-go { position: relative; z-index: 2; margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.biz .b-go svg { width: 14px; height: 14px; }

/* =====================================================================
   BUYING GUIDE (SEO / LLM block)
   ===================================================================== */
.guide { background: var(--surface-2); }
.guide-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 34px; }
.guide-head h2 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.03em; margin-top: 12px; max-width: 640px; }
.guide-byline { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.guide-byline .av { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; flex-shrink: 0; overflow: hidden; }
.guide-byline .av image-slot { width: 100%; height: 100%; }
.guide-byline b { display: block; font-size: 14px; }
.guide-byline span { display: block; font-size: 12.5px; color: var(--ink-3); }
.guide-byline .verified { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; }
.guide-byline .verified svg { width: 13px; height: 13px; }

.guide-grid { display: grid; grid-template-columns: 340px 1fr; gap: 30px; align-items: start; }

/* TL;DR card */
.tldr { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 28px; position: sticky; top: 96px; }
.tldr .tldr-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); margin-bottom: 16px; }
.tldr .tldr-tag svg { width: 15px; height: 15px; }
.tldr h3 { font-size: 19px; margin-bottom: 16px; letter-spacing: -0.02em; }
.tldr ul { display: flex; flex-direction: column; gap: 13px; }
.tldr ul li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14px; color: rgba(255,255,255,.82); line-height: 1.45; }
.tldr ul li svg { width: 18px; height: 18px; color: var(--accent); margin-top: 1px; }
.tldr ul li b { color: #fff; font-weight: 600; }
.tldr .tldr-cta { margin-top: 22px; width: 100%; }

.guide-main { display: flex; flex-direction: column; gap: 0; }
.guide-steps { counter-reset: step; }
.guide-step { display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); }
.guide-step:first-child { border-top: 0; padding-top: 0; }
.guide-step .num { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--accent); width: 44px; height: 44px; border-radius: 50%; background: var(--accent-tint); display: grid; place-items: center; }
.guide-step h4 { font-size: 18px; margin-bottom: 7px; letter-spacing: -0.02em; }
.guide-step p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.guide-step p b { color: var(--ink); }

/* comparison table */
.cmp-wrap { margin-top: 30px; border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); }
.cmp-title { padding: 18px 22px; font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--line); }
table.cmp { width: 100%; border-collapse: collapse; }
table.cmp th, table.cmp td { padding: 14px 22px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--line-2); }
table.cmp thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 700; background: var(--surface-2); }
table.cmp thead th.best { color: var(--accent); }
table.cmp td:first-child, table.cmp th:first-child { font-weight: 600; color: var(--ink); }
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp td.best { background: var(--accent-tint); color: var(--accent); font-weight: 600; }

/* FAQ */
.faq { margin-top: 30px; }
.faq h3 { font-size: 20px; margin-bottom: 14px; letter-spacing: -0.02em; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; padding: 18px 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.faq-q .pm { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; transition: background .15s, transform .25s var(--ease); }
.faq-q .pm svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.faq-item.open .faq-q .pm { background: var(--accent); color: #fff; }
.faq-item.open .faq-q .pm svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.faq-a p { margin: 0 0 18px; color: var(--ink-2); font-size: 14.5px; max-width: 760px; }

/* =====================================================================
   CATEGORY TILES
   ===================================================================== */
.cat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.cat-tile {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line); background: var(--surface);
  display: flex; flex-direction: column; min-height: 330px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cat-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.cat-tile .ct-media { position: relative; flex: 1; background: var(--surface-2); }
.cat-tile .ct-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.cat-tile .ct-body { padding: 20px 22px 24px; }
.cat-tile .ct-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.cat-tile h3 { font-size: 19px; margin: 6px 0 6px; letter-spacing: -0.02em; }
.cat-tile p { font-size: 13px; color: var(--ink-2); margin: 0 0 12px; }
.cat-tile .ct-go { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.cat-tile .ct-go svg { width: 14px; height: 14px; }

/* =====================================================================
   OFFERS / PROMO
   ===================================================================== */
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.offer {
  position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 280px;
  display: flex; flex-direction: column; justify-content: space-between; padding: 36px;
  color: #fff; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.offer:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.offer.red { background: var(--accent); }
.offer.dark { background: var(--ink); }
.offer .o-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: .85; }
.offer h3 { font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -0.03em; margin: 12px 0; max-width: 70%; }
.offer .o-go { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.offer .o-go svg { width: 15px; height: 15px; }
.offer .o-big { position: absolute; right: 30px; top: 30px; font-family: var(--font-display); font-size: 90px; font-weight: 800; letter-spacing: -0.05em; opacity: .16; line-height: 1; }

/* =====================================================================
   REVIEWS
   ===================================================================== */
.reviews { background: var(--surface-2); }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.review { background: var(--surface); border-radius: var(--r-lg); padding: 28px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.review:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.rev-stars { display: inline-flex; gap: 2px; margin-bottom: 14px; }
.rev-stars svg { width: 16px; height: 16px; }
.review p { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rev-head { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.rev-head .av { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.rev-head .av.c2 { background: var(--ink); } .rev-head .av.c3 { background: #2c7a4b; }
.rev-head .nm { font-weight: 700; font-size: 14px; }
.rev-head .dt { font-size: 12px; color: var(--ink-3); }

/* =====================================================================
   BRANDS
   ===================================================================== */
.brands-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.brand {
  display: grid; place-items: center; height: 96px; border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line); background: var(--surface);
  font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.02em;
  color: var(--ink-3); text-align: center; line-height: 1.1;
  transition: all .2s var(--ease);
}
.brand small { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink-4); }
.brand:hover { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); transform: translateY(-2px); }

/* =====================================================================
   STORES + MAP
   ===================================================================== */
.stores-grid { display: grid; grid-template-columns: 380px 1fr; border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.stores-list { background: var(--surface); }
.store { padding: 22px 26px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s; position: relative; }
.store:last-child { border-bottom: 0; }
.store:hover, .store.active { background: var(--surface-2); }
.store.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.store .s-city { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); margin-bottom: 6px; }
.store .s-addr { font-size: 15px; font-weight: 600; margin-bottom: 8px; line-height: 1.35; }
.store .s-tel { font-size: 13.5px; color: var(--ink-3); }
.store .s-tel:hover { color: var(--accent); }
.stores-map { min-height: 540px; background: var(--surface-3); position: relative; }
#storeMap { position: absolute; inset: 0; }
.td-pin { width: 30px; height: 40px; }
.td-pin svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 5px rgba(0,0,0,.3)); }

/* =====================================================================
   CALLBACK / SUBSCRIBE
   ===================================================================== */
.cta-band { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 48px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.cta-band h2 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.03em; }
.cta-band p { margin: 12px 0 0; color: rgba(255,255,255,.7); font-size: 16px; max-width: 440px; }
.cta-form { display: flex; flex-direction: column; gap: 12px; }
.cta-form .row { display: flex; gap: 12px; }
.cta-form input {
  flex: 1; min-width: 0; height: 54px; border: 0; border-radius: var(--r);
  background: rgba(255,255,255,.08); color: #fff; padding: 0 18px; font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.cta-form input::placeholder { color: rgba(255,255,255,.5); }
.cta-form input:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--accent); }
.cta-form .agree { font-size: 12px; color: rgba(255,255,255,.5); }
.cta-form .agree a { color: rgba(255,255,255,.75); text-decoration: underline; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot-trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.foot-trust .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.ft-item { display: flex; align-items: center; gap: 14px; padding: 26px 28px; }
.ft-item + .ft-item { border-left: 1px solid var(--line); }
.ft-item .ic { width: 40px; height: 40px; color: var(--accent); flex-shrink: 0; }
.ft-item .ic svg { width: 100%; height: 100%; }
.ft-item b { display: block; font-size: 14px; }
.ft-item span { display: block; font-size: 12.5px; color: var(--ink-3); }

footer { background: var(--surface-2); padding-top: var(--sec-y); }
.foot-main { display: grid; grid-template-columns: 1.6fr 2.2fr 1.2fr; gap: 50px; padding-bottom: 44px; }
.foot-brand .logo { margin-bottom: 18px; }
.foot-brand p { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; max-width: 320px; margin: 0 0 20px; }
.foot-contact a.tel { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px; }
.foot-contact a.tel:hover { color: var(--accent); }
.foot-contact .em { font-size: 14px; color: var(--ink-2); }
.foot-contact .em:hover { color: var(--accent); }
.foot-soc { display: flex; gap: 10px; margin-top: 18px; }
.foot-soc a { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; color: var(--ink-2); transition: all .15s; }
.foot-soc a:hover { background: var(--accent); color: #fff; box-shadow: none; transform: translateY(-2px); }
.foot-soc svg { width: 18px; height: 18px; }

.foot-sitemap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.foot-col h5 { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.foot-col a { display: block; padding: 5px 0; font-size: 13.5px; color: var(--ink-2); }
.foot-col a:hover { color: var(--accent); }
.foot-col .muted { font-size: 12px; color: var(--ink-4); margin-top: 5px; }

.foot-map { border-radius: var(--r); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.foot-map .fm-img { position: relative; height: 150px; background: var(--surface-3); }
.foot-map .fm-img image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.foot-map .fm-list { padding: 14px 16px; }
.foot-map .fm-list .fm-row { display: flex; gap: 9px; padding: 7px 0; font-size: 13px; color: var(--ink-2); }
.foot-map .fm-list .fm-row svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }

.foot-legal { border-top: 1px solid var(--line); padding: 24px 0; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.foot-legal .req { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; max-width: 760px; }
.foot-pay { display: flex; gap: 8px; align-items: center; }
.foot-pay .pay { height: 30px; padding: 0 12px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.02em; }
.foot-bottom { border-top: 1px solid var(--line); padding: 20px 0; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); }
.foot-bottom a:hover { color: var(--accent); }
.foot-bottom .fb-links { display: flex; gap: 20px; }

/* =====================================================================
   FLOATS
   ===================================================================== */
.float-stack { position: fixed; right: 22px; bottom: 22px; z-index: 400; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.fab { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow-2); transition: transform .2s var(--ease); }
.fab:hover { transform: scale(1.06); }
.fab svg { width: 26px; height: 26px; }
.fab.wa { background: #25d366; color: #fff; }
.fab.up { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); opacity: 0; pointer-events: none; transform: translateY(10px); }
.fab.up.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.fab.up svg { width: 22px; height: 22px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* =====================================================================
   FLAT MODE — «Строгий»: без рамок и скруглений
   (--line / --r обнуляются через applyTweaks; здесь — компенсация заливками)
   ===================================================================== */
body[data-edge="flat"] .product,
body[data-edge="flat"] .brand,
body[data-edge="flat"] .cat-tile { background: var(--surface-2); }
body[data-edge="flat"] .prod-media,
body[data-edge="flat"] .cat-tile .ct-media,
body[data-edge="flat"] .prod-tab { background: var(--surface-3); }
body[data-edge="flat"] .prod-tab.active { background: var(--ink); }
body[data-edge="flat"] .btn-ghost { background: var(--surface-3); box-shadow: none; }
body[data-edge="flat"] .btn-ghost:hover { background: var(--ink); color: #fff; box-shadow: none; }
body[data-edge="flat"] .hero-prem .btn-ghost { background: rgba(255,255,255,.1); }
body[data-edge="flat"] .hero-prem .btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
body[data-edge="flat"] .cat-chip { background: var(--surface-3); box-shadow: none; }
body[data-edge="flat"] .cat-chip:hover { background: var(--accent-tint); box-shadow: none; }
body[data-edge="flat"] .cat-chip .ci { background: var(--surface); box-shadow: none; }
body[data-edge="flat"] .mega-rail { background: var(--surface-2); }
body[data-edge="flat"] .foot-soc a { box-shadow: none; background: var(--surface-3); }
body[data-edge="flat"] .foot-pay .pay { box-shadow: none; background: var(--surface-3); }
body[data-edge="flat"] .review { background: var(--surface); box-shadow: var(--shadow-1); }
/* зебра там, где границы давали структуру */
body[data-edge="flat"] table.cmp tbody tr:nth-child(even) { background: var(--surface-2); }
body[data-edge="flat"] .cmp-wrap { background: var(--surface-2); }
body[data-edge="flat"] table.cmp thead th { background: var(--surface-3); }
body[data-edge="flat"] .store:nth-child(even) { background: var(--surface-2); }
body[data-edge="flat"] .stores-list { background: var(--surface); }
/* прямые углы для «пилюль» и круглых элементов — при радиусе 0 */
body[data-sharp="1"] .pill,
body[data-sharp="1"] .cat-chip,
body[data-sharp="1"] .prod-tab,
body[data-sharp="1"] .lang-switch,
body[data-sharp="1"] .lang-switch button,
body[data-sharp="1"] .top-link,
body[data-sharp="1"] .city-pick,
body[data-sharp="1"] .cat-chip .ci,
body[data-sharp="1"] .prod-act,
body[data-sharp="1"] .tool .cnt,
body[data-sharp="1"] .foot-soc a,
body[data-sharp="1"] .eyebrow::before { border-radius: 0; }

@media (max-width: 1180px) {
  .mega-grid { grid-template-columns: 280px 1fr; }
  .mega-promo { display: none; }
  .prod-grid, .biz-grid, .cat-tiles { grid-template-columns: repeat(3, 1fr); }
  .prod-grid .product:nth-child(n+7) { display: none; }
  .brands-grid { grid-template-columns: repeat(4, 1fr); }
  .foot-main { grid-template-columns: 1fr 1fr; }
  .foot-map { grid-column: span 2; }
}
@media (max-width: 920px) {
  .topbar-r .top-link { display: none; }
  .head-phone { display: none; }
  .mainbar .container { grid-template-columns: auto 1fr auto; }
  .cat-btn span.lbl { display: inline; }
  .cat-btn { padding: 0 16px; }
  .hero-ed .container, .hero-prem .container { grid-template-columns: 1fr; }
  .hero-ed .hero-media, .hero-prem .hero-media { order: -1; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .bento-tile.big { grid-column: span 2; grid-row: auto; min-height: 320px; }
  .guide-grid { grid-template-columns: 1fr; }
  .tldr { position: static; }
  .usp .container, .foot-trust .container { grid-template-columns: repeat(2, 1fr); }
  .usp-item:nth-child(3), .ft-item:nth-child(3) { border-left: 0; }
  .stores-grid, .cta-band, .offers { grid-template-columns: 1fr; }
  /* closed popovers out of flow + comparison table scrolls (tablet & down) */
  .search-pop:not(.open), .mega:not(.open) { display: none; }
  .sp-cats { grid-template-columns: 1fr; }
  .cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cmp-wrap table.cmp { min-width: 460px; }
  .guide-main, .tldr { min-width: 0; }
}
@media (max-width: 680px) {
  .container { padding: 0 18px; }
  .prod-grid, .biz-grid, .cat-tiles, .rev-grid { grid-template-columns: 1fr 1fr; }
  .brands-grid { grid-template-columns: repeat(3, 1fr); }
  .navrow, .topbar-l .top-link { display: none; }
  .foot-sitemap { grid-template-columns: 1fr 1fr; }
  .section { padding: calc(44px * var(--dsc)) 0; }
  .section-head { flex-wrap: wrap; }
  .section-head .prod-tabs { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 2px; }
  .section-head .prod-tabs::-webkit-scrollbar { display: none; }
  .prod-tab { flex: 0 0 auto; }
  .section-head .link-more { font-size: 13px; }
  .usp-item, .ft-item { padding: 18px 14px; gap: 12px; }
  .usp-item .ic, .ft-item .ic { width: 34px; height: 34px; }
  .usp-item .ic svg { width: 26px; height: 26px; }
  /* CTA band: smaller padding, inputs allowed to shrink/wrap */
  .cta-band { padding: 28px; }
  .cta-form .row { flex-wrap: wrap; }
  .cta-form input { min-width: 0; }
  /* footer stacks on mobile */
  .foot-main { grid-template-columns: 1fr; gap: 32px; }
  .foot-map { grid-column: auto; }
  .foot-legal { grid-template-columns: 1fr; gap: 16px; }
  .foot-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }
}

/* ---------- MOBILE HEADER (single row: burger · logo · tools) ---------- */
@media (max-width: 760px) {
  .mainbar { position: relative; }
  .mainbar .container,
  .site-head.stuck .mainbar .container {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "burger logo tools";
    height: auto; padding: 12px 0; column-gap: 12px;
  }
  .burger-btn { grid-area: burger; display: grid; }
  .logo { grid-area: logo; align-self: center; justify-self: start; }
  .logo-mark { width: 40px; height: 40px; }
  .logo-txt small { display: none; }
  .cat-btn { display: none; }

  /* search hidden behind a button */
  .search-toggle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); color: var(--head-fg); }
  .search-toggle svg { width: 22px; height: 22px; }
  .search-toggle.on { background: var(--accent); color: #fff; }
  .search {
    grid-area: auto; position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    padding: 0 18px; background: var(--head-bg); box-shadow: var(--shadow-2);
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .26s var(--ease), opacity .2s, padding .26s;
  }
  .site-head.search-open .search { max-height: 96px; opacity: 1; padding: 12px 18px 16px; }
  .search-box, .site-head.stuck .search-box { height: 48px; }
  .search-pop { position: static; box-shadow: none; border: 0; padding: 14px 2px 2px; }

  .head-tools { grid-area: tools; justify-self: end; align-self: center; gap: 2px; }
  .head-tools .tool[title="Избранное"],
  .head-tools .tool[title="Сравнение"] { display: none; }
  .tool { width: 44px; height: 44px; }

  /* off-screen popovers must not create horizontal scroll on phones */
  .search-pop:not(.open), .mega:not(.open) { display: none; }
  .sp-cats { grid-template-columns: 1fr; }

  /* mega menu is desktop-only (mobile catalog lives in burger drawer) */
  .mega { display: none; }
}
@media (max-width: 440px) {
  .head-tools .tool[title="Кабинет"] { display: none; }
  .logo-txt b { font-size: 16px; }
  .prod-grid, .biz-grid, .cat-tiles, .rev-grid { grid-template-columns: 1fr; }
}
body[data-sharp="1"] .mega-rail button { border-radius: 0; }

/* ---------- image-slot → production rendering (real img or clean placeholder) ---------- */
image-slot { background: var(--surface-3); display: block; }
image-slot.ph { display: grid; place-items: center; color: var(--ink-4); }
image-slot.ph span { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 8px; text-align: center; }
image-slot.img { background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero-ed .hero-media image-slot, .hero-prem .hero-media image-slot { border-radius: var(--r-lg); }

/* perf: lazy <img> inside image-slot (native lazy-loading instead of bg-image) */
image-slot.img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
image-slot.img { background-size: cover; background-position: center; }