:root {
  /* Colors */
  --ink: #050507;
  --ink-2: #0d0d11;
  --ink-3: #161620;
  --ink-4: #1f1f2c;
  --bone: #e8f0ff;
  --bone-dim: #94a3b8;
  --bone-faint: #475569;
  --plasma: #7c5cff;
  --plasma-2: #5b3df2;
  --plasma-glow: rgba(124, 92, 255, 0.35);
  --hot: #ff2e63;
  --signal: #22c55e;
  --warn: #f59e0b;

  /* Typography */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px;
  --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;

  /* Radii */
  --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-4: 12px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--ink); color: var(--bone); }
body { font-family: var(--font-body); font-size: 15px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ===== Layout primitives ===== */
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--s-6); }
.row { display: flex; gap: var(--s-4); }
.grid { display: grid; gap: var(--s-4); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-8-4 { grid-template-columns: 8fr 4fr; }
/* Grid items default to min-width:auto → a column can grow to its content
   min-width and overflow its track. Used by PDP + cart + checkout (F2/F3/F6). */
.grid-8-4 > * { min-width: 0; }

/* Checkout progress stepper (was inline-styled non-wrapping flex → overflowed on
   mobile, F8 2026-06-04). flex-wrap as safety; mobile shows numbered circles only
   (labels + connectors hidden) so 4 steps always fit a phone width. */
.checkout-progress {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  margin-bottom: var(--s-6);
}
.checkout-step { display: flex; align-items: center; gap: var(--s-2); color: var(--bone-faint); }
.checkout-step.is-active { color: var(--plasma); }
.checkout-step-num {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bone-faint);
}
.checkout-step.is-active .checkout-step-num {
  background: var(--plasma); color: #fff; border-color: var(--plasma);
}
.checkout-step-sep { color: var(--bone-faint); }
@media (max-width: 560px) {
  .checkout-step-label, .checkout-step-sep { display: none; }
  .checkout-progress { gap: var(--s-2); }
}
/* Checkout option tap targets (P3, 2026-06-04): bare radio/checkbox option labels
   (customer_type, delivery_mode, agree_oferta, save_default) were 13px. Enlarge
   the control + give the label a ≥44px tappable row on mobile. The :has(> input)
   direct-child match deliberately skips the step3 .payment-option cards (radio is
   nested deeper there — the whole card is already a large tap target). */
@media (max-width: 900px) {
  .checkout-form input[type="radio"],
  .checkout-form input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
  .checkout-form label:has(> input[type="radio"]),
  .checkout-form label:has(> input[type="checkbox"]) {
    display: flex; align-items: center; gap: var(--s-2);
    min-height: 44px; cursor: pointer;
  }
}
@media (max-width: 900px) {
  /* minmax(0,1fr) — bare 1fr = minmax(auto,1fr); `auto` min = card min-content
     (~220px) so 2 tracks won't shrink below content and the grid overflows the
     viewport (F2, mobile catalog +65px overflow, 2026-06-04). */
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-8-4 { grid-template-columns: 1fr; }
  /* Touch targets ≥44px on mobile (F4, WCAG 2.5.5): filter checkbox rows + the
     Каталог button. Desktop (mouse) keeps the compact sizing. */
  .checkbox-row { min-height: 44px; align-items: center; }
  .checkbox-row input[type="checkbox"] { width: 20px; height: 20px; }
  .catalog-btn { min-height: 44px; }
}

/* ===== Header ===== */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5,5,7,0.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ink-3);
  height: 64px; display: flex; align-items: center;
}
.hdr-inner { display: flex; align-items: center; gap: var(--s-4); width: 100%; }
.hdr-logo { display: inline-flex; align-items: center; text-decoration: none; }
.hdr-logo img { height: 56px; width: auto; display: block; border-radius: var(--r-1); }
.hdr-search { flex: 1 1 0; min-width: 0; max-width: 560px; display: flex; gap: var(--s-2); align-items: center; }
.hdr-search-input { flex: 1 1 0; min-width: 0; height: 44px; }
.hdr-search-btn {
  flex: none; height: 44px; width: 46px; display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--plasma); color: #fff; border: none;
  border-radius: var(--r-2); cursor: pointer; font-size: 16px;
  transition: background var(--t-fast) var(--ease);
}
.hdr-search-btn:hover { background: var(--plasma-2); }
.hdr-actions { display: flex; gap: var(--s-3); margin-left: auto; align-items: center; }

/* «Контакти» dropdown (Sherbina 2026-06-03, moyo-style): the nav item opens a
   quick-contact panel (both phones, Viber, Telegram, sales e-mail) instead of
   linking to /contacts. Right-aligned so it never spills off the viewport edge
   (Контакти is the last, right-most nav item). Two-class selector needed so it
   beats the base `.hdr-nav-dropdown { left:50%; transform:translateX(-50%) }`
   defined later in the file (equal single-class specificity → source order). */
.hdr-nav-dropdown.hdr-contacts-menu {
  left: auto; right: 0; transform: none;
  min-width: 240px; padding: var(--s-2);
}
.hdr-ct-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-1);
  text-decoration: none; white-space: nowrap;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--bone);
}
.hdr-ct-row:hover { background: var(--ink-3); color: var(--plasma); }
.hdr-ct-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none; font-size: 15px;
}
.hdr-ct-ico svg { width: 18px; height: 18px; display: block; }
.hdr-ct-viber svg { fill: #7360F2; }
.hdr-ct-tg    svg { fill: #229ED9; }
.hdr-ct-text { line-height: 1; }

/* Header nav (added 2026-05-17 replacing search bar) — horizontal centered links + dropdown */
.hdr-nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex: 1;
  justify-content: center;
}
/* Desktop: pin the nav to the true page-centre axis so the header nav,
   the hud meta row and the contact bar stack as a centred "pyramid"
   (Sherbina 2026-06-02). In normal flex flow the left cluster
   (logo + Каталог) is wider than the right (actions), pushing the nav's
   centre right of page-centre. Absolute-centring fixes that. Desktop-only;
   narrow layout keeps flex flow (mobile nav redesign = separate task). */
@media (min-width: 1000px) {
  .hdr-inner { position: relative; }
  .hdr-nav {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); flex: none;
  }
  /* Внутрішні сторінки (є поле пошуку): пошук — центральний елемент, тож
     навігація не центрується «пірамідкою», а тече справа звичайним потоком,
     щоб не накластись на широке поле. Головну (без .hdr-has-search) не чіпає. */
  .hdr-inner.hdr-has-search .hdr-nav {
    position: static; transform: none; flex: 0 1 auto;
    justify-content: flex-end; gap: var(--s-4);
  }
}
.hdr-nav-link, .hdr-nav-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bone);
  text-decoration: none;
  padding: var(--s-2) var(--s-1);
  /* <button> defaults to line-height:normal and won't inherit, so the «Контакти»
     trigger sat ~1px lower than the <a> links — pin both to the same metric. */
  line-height: 18px;
  white-space: nowrap;
  background: transparent;
  border: none;
  cursor: pointer;
}
.hdr-nav-link:hover, .hdr-nav-btn:hover { color: var(--plasma); }
.hdr-nav-item { position: relative; }
.hdr-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--s-2);
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-2);
  padding: var(--s-2);
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.hdr-nav-sublink {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--bone);
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-1);
}
.hdr-nav-sublink:hover { background: var(--ink-3); color: var(--plasma); }

/* Mobile header nav (F1, 2026-06-04): below the desktop-centred layout (≥1000px)
   the horizontal .hdr-nav doesn't fit and forced ~392px of page-wide horizontal
   scroll. Collapse it <1000px; its links live in the catalog drawer (.drawer-info)
   reached via the existing «☰ Каталог» button. */
.drawer-info { display: none; }
@media (max-width: 999px) {
  .hdr-nav { display: none; }
  .drawer-info {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--ink-3);
    margin-top: var(--s-4); padding-top: var(--s-2);
  }
  /* Пошук у шапці на мобільному: окремий рядок на всю ширину під верхньою
     смугою (лого + Каталог + акаунт/кошик лишаються в один ряд зверху), щоб
     поле не стискалось до нечитабельної смужки. */
  .hdr { height: auto; }
  .hdr-inner { flex-wrap: wrap; row-gap: var(--s-2); padding-top: var(--s-2); padding-bottom: var(--s-2); }
  .hdr-has-search .hdr-search { order: 10; flex-basis: 100%; max-width: none; }
}
.drawer-info-title {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--bone-dim);
  margin: var(--s-3) 0 var(--s-1); padding: 0 var(--s-2);
}
.drawer-info-link {
  display: flex; align-items: center; min-height: 44px;
  gap: var(--s-2); padding: 0 var(--s-2); border-radius: var(--r-1);
  color: var(--bone); text-decoration: none; font-size: 15px;
}
.drawer-info-link:hover, .drawer-info-link:active {
  color: var(--plasma); background: var(--ink-3);
}

/* Category page layout: filter sidebar + product grid (2-column) */
.cat-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s-6);
  align-items: start;
}
/* Grid items default to min-width:auto (= min-content), so the products column
   grew to its content width (the full-span .catalog-pager + cards) and blew past
   the 1fr track → mobile horizontal overflow (F2 root, 2026-06-04). min-width:0
   lets both columns honour their tracks; the inner .grid-4 minmax(0,1fr) then
   divides the real available width. */
.cat-layout > * { min-width: 0; }
@media (max-width: 900px) {
  .cat-layout { grid-template-columns: 1fr; }
}
.filter-sidebar {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
  /* Reserve scrollbar gutter (modern browsers) AND add right padding
     (universal fallback for browsers/themes where scrollbar overlays
     content — Firefox dark theme, macOS auto-hide, etc). 14px covers
     typical scrollbar widths (8-12px) plus 2-4px breathing room. */
  scrollbar-gutter: stable;
  padding-right: 14px;
}
.filter-sidebar * { min-width: 0; }
.filter-sidebar .checkbox-row,
.filter-sidebar .pill-row { word-break: break-word; overflow-wrap: anywhere; }
/* Name span (the unnamed <span> between checkbox and .n count) takes
   remaining space and wraps; count stays visible at the right. Without
   `flex:1; min-width:0`, long names like "AMD Radeon Graphics" push the
   count badge past the sidebar's right edge and overflow-x:hidden clips it. */
.filter-sidebar .checkbox-row > span:not(.n) {
  flex: 1 1 0;
  min-width: 0;
  /* Single-line with ellipsis — wrap was rejected as ugly; truncate
     long names like "Intel UHD Graphics 730" → "Intel UHD Graphic…".
     Hovering shows full text via the input/label native title (optional). */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.filter-sidebar .checkbox-row .n { flex-shrink: 0; }
@media (max-width: 900px) {
  .filter-sidebar { position: static; max-height: none; }
}

/* Category root/branch card with optional Unsplash cover bg (2026-05-16) */
.cat-root-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
  padding: var(--s-6);
  background: linear-gradient(135deg, var(--ink-2) 0%, var(--ink-3) 100%);
  border: 1px solid var(--ink-3);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}
.cat-root-card:hover {
  transform: translateY(-2px);
  border-color: var(--plasma);
  box-shadow: 0 8px 24px rgba(124, 92, 255, 0.18);
}
.cat-root-card::after {
  content: '';
  position: absolute; right: -40px; top: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.cat-root-name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.cat-root-meta {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--bone-dim);
}
.cat-root-count {
  font-size: 22px;
  font-weight: 700;
  color: var(--plasma);
}
.cat-root-unit { color: var(--bone-dim); }
.cat-root-arrow {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--plasma);
  margin-top: var(--s-3);
}

/* Covers — Unsplash bg + dark plasma overlay so text stays readable */
.cat-root-card.has-cover {
  background:
    linear-gradient(135deg, rgba(13, 16, 28, 0.85) 0%, rgba(13, 16, 28, 0.55) 60%, rgba(13, 16, 28, 0.92) 100%),
    var(--cover-url);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  min-height: 220px;
}
.cat-root-card.has-cover::after {
  background: radial-gradient(circle, rgba(124, 92, 255, 0.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cat-root-card.has-cover:hover::after { opacity: 1; }
.cat-root-card.has-cover .cat-root-name {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.cat-root-card.has-cover .cat-root-count {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.cat-root-card.has-cover .cat-root-unit {
  color: var(--bone);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  font-weight: 500;
}

/* SKU yellow highlight (PDP + product cards) */
.sku-highlight {
  font-family: var(--font-mono);
  /* Dotted zero (JetBrains Mono «zero» feature) so 00 isn't mistaken for 88
     in product codes. Scoped to the code chip only — not a global font change. */
  font-feature-settings: "zero" 1;
  font-variant-numeric: slashed-zero;
  color: #1a1a1a;
  background: var(--warn);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.icon-btn {
  background: transparent; border: 1px solid var(--ink-3); color: var(--bone);
  width: 40px; height: 40px; border-radius: var(--r-2); display: inline-flex;
  align-items: center; justify-content: center; transition: border-color var(--t-fast) var(--ease);
}
.icon-btn:hover { border-color: var(--plasma); }
.cart-badge-num {
  position: absolute; top: -6px; right: -6px;
  background: var(--plasma); color: white;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  border-radius: 8px; padding: 1px 5px;
  transition: transform 100ms ease-out, box-shadow 200ms ease-out;
}
@keyframes cart-badge-bump {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0   rgba(124,92,240,0.6); }
  35%  { transform: scale(1.55); box-shadow: 0 0 0 10px rgba(124,92,240,0.0); }
  60%  { transform: scale(0.92); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(124,92,240,0); }
}
.cart-badge-num.cart-badge-bump {
  animation: cart-badge-bump 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== HUD strip ===== */
.hud {
  background: var(--ink-2); border-bottom: 1px solid var(--ink-3);
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--bone-dim);
  min-height: 36px; display: flex; align-items: center;
}
/* flex-wrap so the meta row folds onto a second line on narrow viewports
   instead of triggering horizontal scroll (feedback_no_horizontal_scroll). */
.hud .wrap { display: flex; flex-wrap: wrap; gap: 2px var(--s-4); align-items: center; justify-content: center; }
.hud .dot { color: var(--plasma); }
.hud .bullet { color: var(--bone-faint); }

/* Contact CTA strip removed 2026-06-03 — contacts now live in the header
   «Контакти» dropdown (.hdr-contacts-menu) + footer + /contacts page. */

/* ===== Back-to-top ===== */
/* Bottom-LEFT on purpose: the chat-bot launcher owns bottom-right, so the two
   never overlap (Sherbina 2026-06-03). Hidden by default (no Alpine → no flash);
   .show toggled by the scroll handler in ai-shop.js once scrollY > 400. */
.to-top {
  position: fixed; left: 20px; bottom: 20px; z-index: 45;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink-2); color: var(--plasma);
  border: 1px solid var(--ink-3); cursor: pointer;
  font-size: 22px; line-height: 1;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              visibility var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--ink-3); border-color: var(--plasma); transform: translateY(-2px); }
/* Mobile PDP has a sticky purchase bar (.mobile-sticky-cta, ~57px) pinned to the
   bottom edge — lift the back-to-top above it on pages where that bar exists so
   the two never overlap (Codex 2026-06-03). */
@media (max-width: 768px) {
  main:has(.mobile-sticky-cta) ~ .to-top { bottom: 77px; }
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0 var(--s-6); height: 44px; border-radius: var(--r-2);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  border: 1px solid transparent; cursor: pointer; transition: all var(--t-fast) var(--ease);
}
.btn.primary { background: var(--plasma); color: white; }
.btn.primary:hover { background: var(--plasma-2); }
.btn.ghost { background: transparent; border-color: var(--ink-4); color: var(--bone); }
.btn.ghost:hover { border-color: var(--plasma); box-shadow: 0 0 0 4px var(--plasma-glow); }
.btn.sm { height: 32px; padding: 0 var(--s-3); font-size: 12px; }

/* ===== Inputs ===== */
.input, .textarea {
  width: 100%; background: var(--ink-2); border: 1px solid var(--ink-3);
  color: var(--bone); padding: 0 var(--s-4); height: 44px; border-radius: var(--r-2);
  font: 15px var(--font-body); transition: border-color var(--t-fast) var(--ease);
}
.input:focus, .textarea:focus { outline: none; border-color: var(--plasma); }
.textarea { padding: var(--s-3) var(--s-4); height: auto; min-height: 80px; resize: vertical; }
.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--bone-dim); }
.field-error { color: var(--hot); font-size: 12px; }

/* ===== Cards ===== */
.card {
  background: var(--ink-3); border-radius: var(--r-3);
  border: 1px solid var(--ink-4); padding: var(--s-4);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
}
.card:hover { border-color: var(--plasma); }
.product-card { display: flex; flex-direction: column; gap: var(--s-3); }
.product-card .card-link { display: flex; flex-direction: column; gap: var(--s-3); color: inherit; text-decoration: none; }
.product-card img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--r-2); background: var(--ink-2); }
/* missing-photo placeholder — keep card heights uniform when SP has no mirrored image */
.product-card .no-photo {
  width: 100%; aspect-ratio: 1/1; border-radius: var(--r-2);
  background: var(--ink-2); border: 1px dashed var(--ink-4);
  display: grid; place-items: center; padding: var(--s-3);
  text-align: center; gap: var(--s-1);
  position: relative; overflow: hidden;
}
.product-card .no-photo.has-cover-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--cat-cover);
  background-size: cover; background-position: center;
  opacity: 0.18; z-index: 0;
}
.product-card .no-photo > * { position: relative; z-index: 1; }
.product-card .no-photo-vendor {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--bone-dim); text-transform: uppercase;
  word-break: break-word;
}
.product-card .no-photo-hint {
  font-family: var(--font-mono); font-size: 10px; color: var(--bone-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
}
/* missing-photo placeholder — cart line view (compact 96x96 variant) */
.cart-item-no-photo {
  width: 96px; height: 96px; border-radius: var(--r-2);
  background: var(--ink-2); border: 1px dashed var(--ink-4);
  display: grid; place-items: center;
  font-size: 32px; color: var(--bone-faint);
  flex-shrink: 0;
}


.product-card .name { font-weight: 600; min-height: 2.6em; max-height: 2.6em; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-overflow: ellipsis; }
.product-card .sku {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  /* Dotted zero so 00 ≠ 88 in product codes (JetBrains Mono «zero» feature). */
  font-feature-settings: "zero" 1;
  font-variant-numeric: slashed-zero;
  color: #1a1a1a; background: var(--warn);
  padding: 2px 6px; border-radius: 3px;
  letter-spacing: 0.04em; align-self: flex-start;
}
.product-card .price { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.product-card .price .rrc { font-size: 13px; text-decoration: line-through; color: var(--bone-dim); margin-right: var(--s-2); }
/* Pin «У кошик» to the card bottom so all buttons in a grid row align on one
   line regardless of variable content above (matched-specs from filters on the
   catalog; bonus-line / РРЦ presence on the homepage blocks). Cards already
   stretch to equal row height — without margin-top:auto the leftover space
   falls below the button, so shorter cards float their button higher ("jumping").
   nowrap keeps the label on a single line on the narrowest 2-col mobile cards. */
/* Pin the ACTIONS block (cart/analog + compare) to the bottom — auto margin on
   the WRAPPER, not on each .btn. Two buttons each with margin-top:auto split the
   free space and misalign «У кошик» across the row (fix 2026-06-14). */
.product-card > .card-actions { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-2); }
.product-card > .card-actions > .btn { white-space: nowrap; }

/* ===== Stock badges ===== */
.stock { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--font-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px var(--s-2);
  border-radius: var(--r-1); }
.stock.signal { color: var(--signal); background: rgba(34,197,94,0.1); }
.stock.warn { color: var(--warn); background: rgba(245,158,11,0.1); }
.stock.hot { color: var(--hot); background: rgba(255,46,99,0.1); }
.stock.info { color: var(--bone); background: var(--ink-3); }
.stock.dim { color: var(--bone-faint); background: var(--ink-2); }
/* signal+dim = muted-green for in_stock_normal (green semantics but not
   shouting like the full signal). Three-class selector beats `.stock.dim`
   alone on specificity, regardless of CSS order. */
.stock.signal.dim { color: rgba(34,197,94,0.75); background: rgba(34,197,94,0.06); }

/* ===== Section headers ===== */
.eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--plasma); margin-bottom: var(--s-2); }
.eyebrow::before { content: '// '; color: var(--bone-faint); }
/* Bolder section eyebrows on the home page (КАТЕГОРІЇ / ХІТ ТИЖНЯ / AI РЕКОМЕНДУЄ
   / НАЙГАРЯЧІШЕ) — opt-in modifier so other eyebrows stay light. */
.eyebrow.eyebrow-strong { font-weight: 700; font-size: 13px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(36px, 6vw, 64px); line-height: 1; text-transform: uppercase; }
h2 { font-size: clamp(24px, 3vw, 36px); }
h3 { font-size: 18px; }

/* ===== Footer ===== */
.ftr {
  margin-top: var(--s-24); padding: var(--s-12) 0;
  background: var(--ink-2); border-top: 1px solid var(--ink-3);
  font-size: 13px; color: var(--bone-dim);
}
.ftr .wrap { display: grid; gap: var(--s-6); grid-template-columns: repeat(4, 1fr); }
.ftr h4 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--bone); margin-bottom: var(--s-3); }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: var(--s-2); }
.ftr a:hover { color: var(--plasma); }

/* ===== HTMX indicators ===== */
.htmx-indicator { opacity: 0; transition: opacity var(--t-base) var(--ease); }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* ===== Skeleton (AI tab loading) ===== */
.skeleton-bar {
  height: 12px; background: linear-gradient(90deg, var(--ink-3), var(--ink-4), var(--ink-3));
  background-size: 200% 100%; animation: skel 1.6s infinite linear;
  border-radius: var(--r-1); margin-bottom: var(--s-2);
}
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===== Coming-soon (legacy) ===== */
.cs { min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; padding: 2rem; }
.cs h1 { margin: 0 0 1rem; }
.cs-meta { opacity: 0.6; font-size: 0.9rem; margin-top: 2rem; }

/* Quick-order modal (PDP "Купити одним кліком") — 2026-05-17.
   Hidden by default; .qo-show toggles flex via Alpine :class binding. */
.quick-order-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
}
.quick-order-modal.qo-show { display: flex; }

/* ================================================================
   Catalog mega-menu drawer (P-home plan, 2026-05-22)
   ================================================================ */

.catalog-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; cursor: pointer;
  background: var(--ink-2, #0d0d11); color: var(--bone, #e8f0ff);
  border: 1px solid var(--ink-3, #161620); border-radius: 4px;
  /* Typography aligned with .hdr-nav-link so «Каталог» reads as a peer of
     ПРО НАС / СПОЖИВАЧАМ / etc rather than a different visual class. */
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.catalog-btn:hover { background: var(--ink-3, #161620); color: var(--plasma); }

.catalog-drawer {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1000; visibility: hidden; opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.catalog-drawer.open {
  visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}
.catalog-drawer-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.6);
}
.catalog-drawer-panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(320px, 100vw);
  background: var(--ink, #050507); color: var(--bone, #e8f0ff);
  box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}
.catalog-drawer.open .catalog-drawer-panel { transform: translateX(0); }
.catalog-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--ink-3, #161620);
}
.catalog-drawer-header h2 { margin: 0; font-size: 18px; }
.catalog-drawer-close {
  background: transparent; border: none; color: var(--bone, #e8f0ff);
  font-size: 24px; cursor: pointer; padding: 0 8px;
}
/* Single scroll region for tree + info-nav so the category tree takes the full
   panel height and the info-nav follows below (was a flex sibling that ate half
   the mobile screen — Clarity 2026-06-14). min-height:0 lets it shrink inside
   the flex column so overflow-y actually scrolls. */
.catalog-drawer-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
}
.catalog-drawer-body {
  padding: 12px 0;
}
.catalog-drawer-loading, .catalog-drawer-error {
  padding: 20px; color: var(--bone-dim, #94a3b8); text-align: center;
}
.catalog-drawer-error { color: #f87171; }

/* --- Tree nodes --- */
.menu-tree { list-style: none; margin: 0; padding: 0; }
.menu-children { list-style: none; margin: 0; padding: 0; }
.menu-node { position: relative; }
.menu-node-row {
  display: flex; align-items: stretch;
}
.menu-node-row:hover { background: var(--ink-2, #0d0d11); }
.menu-node-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px; color: var(--bone, #e8f0ff);
  text-decoration: none; font-size: 14px;
  flex: 1; min-width: 0;
}
.menu-node-thumb { border-radius: 2px; flex-shrink: 0; }
.menu-node-name { flex: 1; }
.menu-node-arrow {
  cursor: pointer; padding: 8px 16px;
  background: transparent; border: none;
  color: var(--bone-dim, #94a3b8); font-size: 18px;
  transition: transform 0.15s ease;
  display: flex; align-items: center;
}
.menu-node-arrow:hover {
  color: var(--plasma, #7c5cff);
  background: var(--ink-3, #1a1a22);
}
.menu-node.open > .menu-node-row > .menu-node-arrow {
  transform: rotate(90deg); color: var(--plasma, #7c5cff);
}

/* --- Universal accordion: children expand downward with indent ---
   Single behavior across desktop + mobile per user feedback 2026-05-22 —
   columnar overlay caused horizontal scroll on wide trees. #}
*/
.menu-children {
  display: none;
  padding-left: 20px;
  border-left: 2px solid var(--ink-3, #161620);
  margin-left: 12px;
}
.menu-node.open > .menu-children { display: block; }

/* Mobile drawer takes full viewport width; desktop keeps 320px panel. */
@media (max-width: 767px) {
  .catalog-drawer-panel { width: 100vw; }
}

body.catalog-drawer-open { overflow: hidden; }

/* ============= Catalog UX — filters (T14) ============= */

/* Kill native number-input spinners across .range-input and .price-input
   so range/price facets render as clean text inputs. */
input.range-input,
input.price-input {
  -moz-appearance: textfield;
  appearance: textfield;
}
input.range-input::-webkit-outer-spin-button,
input.range-input::-webkit-inner-spin-button,
input.price-input::-webkit-outer-spin-button,
input.price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Facet block — fieldset reset + dashed divider */
.facet {
  border: none;
  margin: 0 0 var(--s-4) 0;
  padding: 0 0 var(--s-3) 0;
  border-bottom: 1px dashed var(--ink-3);
}
.facet:last-of-type { border-bottom: none; }

.facet-head {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bone-dim);
  margin-bottom: var(--s-2);
  font-weight: 600;
  padding: 0;
  font-family: var(--font-mono);
}

/* Pill chips (low-cardinality enum facets) */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.facet-pill-label {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-1);
  padding: 3px 8px;
  border: 1px solid var(--ink-3);
  background: var(--ink-2);
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.facet-pill-label:hover { border-color: var(--plasma); }
/* a11y: focus-visible — the visually-hidden checkbox inside loses focus
   indicator without this rule. Surround label gets a ring when child is
   focused via keyboard. */
.facet-pill-label:focus-within {
  outline: 2px solid var(--plasma);
  outline-offset: 2px;
}
.facet-pill-label.on {
  background: var(--plasma);
  color: var(--ink);
  border-color: var(--plasma);
}
.facet-pill-label .n {
  font-size: 10px;
  opacity: 0.7;
  font-family: var(--font-mono);
}

/* Range two-input row (price, year, weight, etc.) */
.range-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}
.range-input {
  flex: 1;
  height: 32px;
  background: var(--ink);
  border: 1px solid var(--ink-3);
  color: var(--bone);
  padding: 0 8px;
  font-size: 13px;
  border-radius: var(--r-2);
  min-width: 0;
  font-family: var(--font-mono);
}
.range-input:focus-visible {
  outline: 2px solid var(--plasma);
  outline-offset: 1px;
  border-color: var(--plasma);
}
.range-sep {
  color: var(--bone-faint);
  font-family: var(--font-mono);
}

/* Checkbox list (medium-cardinality enum facets) */
.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.checkbox-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--bone);
  cursor: pointer;
  line-height: 1.4;
}
.checkbox-row input[type="checkbox"] {
  accent-color: var(--plasma);
  flex-shrink: 0;
}
.checkbox-row:hover { color: var(--plasma); }
.checkbox-row .n {
  color: var(--bone-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  margin-left: auto;
}
.show-more {
  background: none;
  border: none;
  color: var(--plasma);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  padding: var(--s-1) 0;
  font-family: inherit;
}
.show-more:hover { text-decoration: underline; }

/* Toggle (boolean facet — visually-hidden checkbox + custom track) */
.toggle-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  color: var(--bone);
  cursor: pointer;
  position: relative;
}
.toggle-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.toggle-track {
  width: 30px;
  height: 16px;
  background: var(--ink-3);
  border-radius: 8px;
  position: relative;
  transition: background var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--bone);
  border-radius: 50%;
  transition: left var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.toggle-row input:checked ~ .toggle-track {
  background: var(--plasma);
}
.toggle-row input:checked ~ .toggle-track::after {
  left: 16px;
  background: var(--ink);
}
.toggle-row input:focus-visible ~ .toggle-track {
  outline: 2px solid var(--plasma);
  outline-offset: 2px;
}

/* Sort dropdown */
.facet-sort select {
  width: 100%;
  height: 32px;
  background: var(--ink);
  border: 1px solid var(--ink-3);
  color: var(--bone);
  padding: 0 8px;
  font-size: 13px;
  border-radius: var(--r-2);
  font-family: inherit;
}
.facet-sort select:focus-visible {
  outline: 2px solid var(--plasma);
  outline-offset: 1px;
  border-color: var(--plasma);
}

/* Applied chips strip (above facets) */
.applied-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--plasma);
  align-items: center;
}
.applied-chip {
  background: rgba(124, 92, 255, 0.12);
  border: 1px solid var(--plasma);
  color: var(--plasma);
  padding: 2px 6px;
  border-radius: var(--r-2);
  font-size: 11px;
  text-decoration: none;
  line-height: 1.4;
  font-family: var(--font-mono);
  transition: background var(--t-fast) var(--ease);
}
.applied-chip::after { content: ' ×'; opacity: 0.7; }
.applied-chip:hover { background: rgba(124, 92, 255, 0.22); }
.applied-chip:focus-visible {
  outline: 2px solid var(--plasma);
  outline-offset: 2px;
}
.clear-all {
  color: var(--hot);
  font-size: 11px;
  text-decoration: underline;
  padding: 2px 4px;
  cursor: pointer;
  font-family: var(--font-mono);
}
.clear-all:hover { opacity: 0.8; }

/* Mobile accordion (<details> wraps the sidebar in T13).
   Desktop: display:contents removes <details> from the layout flow so the
   sidebar still occupies its grid cell normally. Mobile breakpoint aligned
   with .cat-layout single-column collapse at 900px (see line ~125).

   IMPORTANT: native UA stylesheet hides children of closed <details>
   via `details:not([open]) > *:not(summary) { display: none }`. The
   `display: contents` on the <details> itself does NOT override that —
   it controls the <details> own box, not its children's visibility.
   So on desktop we explicitly force the non-summary children visible. */
.filter-accordion { display: contents; }
/* Override UA `details:not([open]) > :not(summary)` hide on desktop.
   :not(script) — without this, our <script> sibling renders as visible
   text instead of staying display:none (its UA default). */
.filter-accordion > *:not(summary):not(script) { display: block; }
.filter-accordion-summary { display: none; }
/* Off-canvas affordances are mobile-only — hidden on desktop (sidebar is in-flow). */
.filters-trigger, .filters-backdrop, .filters-close { display: none; }

@media (max-width: 900px) {
  /* Off-canvas filter drawer (Sherbina 2026-06-04): slides in from the left over
     the product list, opened by .filters-trigger, dismissed by ×/backdrop/Esc.
     <details> stays `open`; content is forced visible regardless of toggle state
     so the slide transform (not the native collapse) controls visibility. */
  .filter-accordion {
    display: block;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(86vw, 360px);
    z-index: 71;
    background: var(--ink-2);
    border-right: 1px solid var(--ink-3);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform var(--t-base) var(--ease);
    margin: 0;
  }
  body.filters-open .filter-accordion { transform: translateX(0); }
  /* Keep sidebar content visible whatever the <details> open state is. */
  .filter-accordion > *:not(summary):not(script) { display: block; }

  .filters-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0; visibility: hidden; z-index: 70;
    transition: opacity var(--t-base) var(--ease), visibility var(--t-base) var(--ease);
  }
  body.filters-open .filters-backdrop { opacity: 1; visibility: visible; }
  body.filters-open { overflow: hidden; }

  /* Trigger — full-width button at the top of the products column. */
  .filters-trigger {
    display: flex; align-items: center; justify-content: center; gap: var(--s-2);
    width: 100%; min-height: 44px; margin-bottom: var(--s-3);
    background: var(--ink-2); color: var(--bone);
    border: 1px solid var(--ink-3); border-radius: var(--r-2);
    font-family: var(--font-mono); font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer;
  }
  .filters-trigger:active { border-color: var(--plasma); }

  /* Summary = sticky panel header (title + ×). */
  .filter-accordion-summary {
    display: flex; align-items: center;
    position: sticky; top: 0; z-index: 1;
    padding: var(--s-3) var(--s-4);
    background: var(--ink-2); border-bottom: 1px solid var(--ink-3);
    font-size: 15px; font-weight: 700; color: var(--bone);
    user-select: none; list-style: none;
  }
  .filter-accordion-summary::-webkit-details-marker { display: none; }
  .filters-close {
    display: flex; align-items: center; justify-content: center;
    margin-left: auto; width: 40px; height: 40px;
    background: none; border: none; color: var(--bone);
    font-size: 26px; line-height: 1; cursor: pointer; border-radius: var(--r-1);
  }
  .filters-close:active { background: var(--ink-3); color: var(--plasma); }

  .filter-accordion .filter-sidebar {
    position: static; max-height: none; overflow: visible;
    padding: var(--s-2) var(--s-4) var(--s-6);
  }
  .chip-count {
    background: var(--plasma); color: var(--ink);
    border-radius: 10px; padding: 1px 6px; font-size: 11px;
    margin-left: var(--s-1); font-weight: 600; font-family: var(--font-mono);
  }
}
.promo-badge{display:inline-block;background:#e23b3b;color:#fff;font-size:11px;
  font-weight:600;padding:2px 8px;border-radius:10px;margin-top:3px;letter-spacing:.3px;}

/* Home hero: search left, promo banner right (compact → crisp, fills the gap). */
.hero-grid{display:flex;gap:var(--s-8);align-items:center;flex-wrap:wrap;}
/* min-width:0 lets the search column shrink below its intrinsic content width
   on very narrow phones (<330px) — without it, flex min-width:auto forced an
   overflow / horizontal scroll. */
.hero-search{flex:1 1 0;min-width:0;}
.promo-carousel{flex:1 1 0;max-width:100%;min-width:0;}
@media (max-width:880px){
  .promo-carousel{flex-basis:100%;order:-1;margin-bottom:var(--s-4);}
}

/* ===== PDP tabs (CSP-збірка Alpine, 2026-06-12) ===== */
.pdp-tab{border:none;border-bottom:2px solid transparent;border-radius:0;}
.pdp-tab.pdp-tab-on{border-color:var(--plasma);color:var(--plasma);}

/* «AI пише огляд…» — живий індикатор on-demand генерації AI-огляду */
.ai-review-writing{
  display:inline-flex;align-items:center;gap:var(--s-2);
  color:var(--bone-dim);font-size:15px;
}
.ai-review-orb{
  width:10px;height:10px;border-radius:50%;
  background:var(--plasma);
  animation:aiOrbPulse 1.2s ease-in-out infinite;
}
@keyframes aiOrbPulse{
  0%,100%{transform:scale(1);opacity:.5;box-shadow:0 0 0 0 rgba(124,92,255,.45);}
  50%{transform:scale(1.25);opacity:1;box-shadow:0 0 12px 2px rgba(124,92,255,.45);}
}
.ai-review-dots span{
  animation:aiDotBlink 1.4s infinite both;
}
.ai-review-dots span:nth-child(2){animation-delay:.2s;}
.ai-review-dots span:nth-child(3){animation-delay:.4s;}
@keyframes aiDotBlink{
  0%,80%,100%{opacity:.2;}
  40%{opacity:1;}
}

/* ===== Вкладка «Відгуки та питання» (aishop_065, 2026-06-12) ===== */
.fb-flash-ok{color:var(--plasma);font-weight:600;}
.fb-flash-err{color:#f87171;font-weight:600;}
.fb-summary{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3);}
.fb-stars{color:var(--plasma);letter-spacing:2px;font-size:18px;}
.fb-stars-sm{color:var(--plasma);letter-spacing:1px;font-size:13px;}
.fb-form-card{padding:var(--s-3) var(--s-4);margin-bottom:var(--s-2);}
.fb-item{padding:var(--s-3) var(--s-4);margin-top:var(--s-2);}
.fb-head{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;}
.fb-answer{margin-top:var(--s-2);padding:var(--s-2) var(--s-3);border-left:2px solid var(--ink-4);}
/* Вибір оцінки: радіо-зірки 5→1 у DOM, інверсія через ~ робить hover/checked
   «всі до обраної» зліва направо візуально (row-reverse). */
.fb-rating-pick{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px;margin-bottom:var(--s-2);}
.fb-rating-pick input{position:absolute;opacity:0;pointer-events:none;}
.fb-rating-pick label{font-size:26px;color:var(--bone-faint);cursor:pointer;transition:color .12s;}
.fb-rating-pick label:hover,
.fb-rating-pick label:hover ~ label,
.fb-rating-pick input:checked ~ label{color:var(--plasma);}

/* ===== Sticky compare bar (feature-ai-compare) ===== */
#compare-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  background:var(--ink-2);border-top:1px solid var(--ink-3);
  box-shadow:0 -2px 12px rgba(0,0,0,.45);
}
.compare-bar-inner{
  display:flex;align-items:center;gap:var(--s-4);
  max-width:1440px;margin:0 auto;padding:var(--s-2) var(--s-6);
  flex-wrap:wrap;
}
.compare-thumbs{display:flex;gap:var(--s-2);}
.compare-thumb{
  width:36px;height:36px;border-radius:var(--r-1);
  display:flex;align-items:center;justify-content:center;
  background:var(--ink-3);color:var(--bone-dim);
  font-family:var(--font-mono);font-size:12px;
}
.compare-thumb-empty{opacity:.35;}
.compare-actions{display:flex;align-items:center;gap:var(--s-2);margin-left:auto;}
.compare-link{text-decoration:none;}
/* Modal slot */
#compare-modal-slot{position:fixed;inset:0;z-index:60;pointer-events:none;}
#compare-modal-slot:empty{display:none;}
.compare-modal{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  pointer-events:all;
}
[x-cloak]{display:none!important;}
.compare-modal-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.6);cursor:pointer;
}
.compare-modal-box{
  position:relative;z-index:1;
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--r-3);
  padding:var(--s-6);max-width:420px;width:90%;
}
.compare-link.btn.ghost.sm{
  font-size:12px;white-space:nowrap;
}
/* Label state: «Додати» by default → «✓ У порівнянні» when ai-shop.js marks the
   button .in-compare (synced from the compare bar). */
.compare-link .compare-label-in{display:none;}
.compare-link.in-compare .compare-label-add{display:none;}
.compare-link.in-compare .compare-label-in{display:inline;}
.compare-link.in-compare{border-color:var(--accent);color:var(--accent);}

/* ===== Compare page /porivnyannya ===== */
.compare-page{padding:var(--s-8) 0;}
.compare-heading{font-family:var(--font-display);font-size:1.5rem;margin-bottom:var(--s-6);}
/* Overflow wrapper — no horizontal page scroll (project rule) */
.compare-scroll-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.compare-table{
  border-collapse:collapse;
  width:100%;
  min-width:480px;
}
.compare-table th,
.compare-table td{
  padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--ink-3);
  text-align:left;
  vertical-align:top;
}
.compare-feat--label{
  color:var(--bone-dim);
  font-size:13px;
  white-space:nowrap;
  width:160px;
  min-width:120px;
}
.compare-feat--product{
  font-weight:600;
}
.compare-product-link{
  color:var(--bone);
  text-decoration:none;
}
.compare-product-link:hover{color:var(--plasma);}
.compare-feat--value{font-size:14px;}
/* Best-cell highlight — uses --signal (green accent) */
.compare-best{
  color:var(--signal);
  font-weight:600;
}
.compare-ai-placeholder{
  margin-top:var(--s-8);
  padding:var(--s-4) var(--s-6);
  background:var(--ink-2);
  border:1px solid var(--ink-3);
  border-radius:var(--r-3);
  color:var(--bone-dim);
  font-size:14px;
}

/* ── Compare AI verdicts (Task 7) ─────────────────────────────────────────── */
.compare-verdicts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.verdict-card {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-3);
  padding: var(--s-4);
  color: var(--bone);
}
.verdict-card p { margin: var(--s-2) 0 0; color: var(--bone-dim); }
.verdict-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-3);
  margin-top: var(--s-4);
}
.verdict-banner--agree {
  background: var(--ink-3);
  border: 1px solid var(--plasma);
  color: var(--bone);
}
.verdict-banner--split {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  color: var(--bone-dim);
}