/* ============================================================
   ART-GSM 2026 — BASE TOKENS & PRIMITIVES
   Shared across variants A/B/C. Palette/depth/ornament live in
   theme-a/b/c.css, scoped under [data-theme="x"].
   ============================================================ */

/* ---- Fonts (CDN in prototype; self-host in production) ---- */

:root {
  /* Brand thread */
  --blue:        #2563eb;
  --blue-deep:   #1d4fd7;
  --blue-soft:   #eef2ff;

  /* Spacing scale: 4·6·8·10·12·14·16·20·24·28·32·40·48·56·60·80 */
  --s-4: 4px;   --s-6: 6px;   --s-8: 8px;   --s-10: 10px; --s-12: 12px;
  --s-14: 14px; --s-16: 16px; --s-20: 20px; --s-24: 24px; --s-28: 28px;
  --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-56: 56px; --s-60: 60px;
  --s-80: 80px;

  /* Radii */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --r-card: 18px; --r-pill: 999px;

  /* Type */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; /* было JetBrains Mono (не подключён); tabular-nums в .mono */

  /* Availability badge palette (constant across themes) */
  --av-in-bg:  #dcfce7; --av-in-fg:  #065f46; --av-in-dot:  #16a34a;
  --av-yes-bg: #ecfccb; --av-yes-fg: #365314; --av-yes-dot: #84cc16;
  --av-low-bg: #ffedd5; --av-low-fg: #7c2d12; --av-low-dot: #ea580c;
  --av-no-bg:  #e7e5e4; --av-no-fg:  #44403c; --av-no-dot:  #a8a29e;

  /* Themable hooks (defaults; overridden per theme) */
  --bg:        #f7f8fa;
  --surface:   #ffffff;
  --surface-2: #f1f3f7;
  --ink:       #0f1115;
  --ink-2:     #4a4f5a;
  --ink-3:     #8a909c;
  --line:      #e4e7ee;
  --line-2:    #d3d8e2;
  --accent:    var(--blue);
  --accent-2:  #f59e0b;
  --shadow-sm: 0 1px 2px rgba(15,17,21,.06), 0 1px 3px rgba(15,17,21,.05);
  --shadow-md: 0 4px 12px rgba(15,17,21,.07), 0 2px 4px rgba(15,17,21,.05);
  --shadow-lg: 0 16px 40px rgba(15,17,21,.10), 0 4px 12px rgba(15,17,21,.06);
  --shadow-float: 0 -2px 16px rgba(15,17,21,.08);
  --photo-bg:  #ffffff;            /* backing behind product PNGs */
  --header-h:  64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
svg:not([width]) { width: 20px; height: 20px; flex: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Type scale ---- */
.display { font-weight: 800; letter-spacing: -.03em; line-height: 1.02; }
.h1 { font-weight: 700; letter-spacing: -.025em; line-height: 1.08; }
.h2 { font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.h3 { font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.caption {
  font-weight: 500; font-size: 11px; line-height: 1; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-3);
}
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }

/* ---- Layout primitives ---- */
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--s-16); } /* ag lane-1440 (02.09): было 1280 — на 1920 по 320px пустоты с каждой стороны, а каталог при этом жил в 1700 */
.section { padding: var(--s-40) 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-16); margin-bottom: var(--s-20); }
.section-head .h2 { font-size: 24px; }
.section-link {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px;
  color: var(--accent); white-space: nowrap;
}
.section-link svg { width: 16px; height: 16px; }

/* ============================================================
   BADGES
   ============================================================ */
.av {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
.av.sm { height: 20px; font-size: 10px; padding: 0 8px; }
.av .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.av--in  { background: var(--av-in-bg);  color: var(--av-in-fg); border-color: color-mix(in oklab, var(--av-in-dot) 45%, transparent); }
.av--in  .dot { background: var(--av-in-dot); }
.av--yes { background: var(--av-yes-bg); color: var(--av-yes-fg); border-color: color-mix(in oklab, var(--av-yes-dot) 45%, transparent); }
.av--yes .dot { background: var(--av-yes-dot); }
.av--low { background: var(--av-low-bg); color: var(--av-low-fg); border-color: color-mix(in oklab, var(--av-low-dot) 50%, transparent); }
.av--low .dot { background: var(--av-low-dot); animation: pulse 1.6s ease-in-out infinite; }
.av--no  { background: var(--av-no-bg);  color: var(--av-no-fg); border-color: color-mix(in oklab, var(--av-no-dot) 45%, transparent); }
.av--no  .dot { background: var(--av-no-dot); }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234,88,12,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(234,88,12,0); }
}
@media (prefers-reduced-motion: reduce) { .av--low .dot { animation: none; } }

/* Quality badge — unified component */
.q {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: var(--r-xs); font-size: 11px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid transparent;
}
.q--orig  { background: #eef2ff; color: #1d4fd7; border-color: #c7d2fe; }
.q--oled  { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; }
.q--incell{ background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.q--tft   { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.q--aaa   { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

/* Promo / merch tags */
.tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: var(--r-xs); font-size: 11px; font-weight: 700; color: #fff;
}
.tag--hit  { background: #2563eb; }
.tag--rec  { background: #7c3aed; }
.tag--new  { background: #16a34a; }
.tag--sale { background: #ea580c; }

/* Spec chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border-radius: var(--r-pill); font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
}
.chip.mono { font-size: 11.5px; }

/* SKU / article badge — used everywhere an артикул is shown */
.sku-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--r-xs); background: var(--blue-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent);
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--accent);
  white-space: nowrap; letter-spacing: -.01em;
}
.sku-badge svg { width: 13px; height: 13px; flex: none; }
.sku-badge b { color: var(--blue-deep); font-weight: 700; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 var(--s-24); border-radius: var(--r-md);
  font-weight: 700; font-size: 15px; letter-spacing: -.01em;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--blue-deep); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn--sm { height: 40px; font-size: 14px; padding: 0 var(--s-16); border-radius: var(--r-sm); }
.btn--lg { height: 56px; font-size: 16px; }
.btn--block { width: 100%; }

/* Quantity stepper */
.stepper {
  display: inline-flex; align-items: center; height: 48px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface);
  overflow: hidden;
}
.stepper button { width: 44px; height: 100%; font-size: 20px; color: var(--ink-2); transition: background .15s; }
.stepper button:hover { background: var(--surface-2); color: var(--accent); }
.stepper input {
  width: 44px; height: 100%; text-align: center; border: none; background: none;
  font-family: var(--mono); font-weight: 600; font-size: 15px; color: var(--ink);
}

/* Icon button */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-sm); color: var(--ink-2);
  position: relative; transition: background .15s, color .15s;
}
.iconbtn:hover { background: var(--surface-2); color: var(--accent); }
.iconbtn svg { width: 22px; height: 22px; }
.iconbtn .count {
  position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; display: grid; place-items: center;
}

/* Rating stars */
.rating { display: inline-flex; align-items: center; gap: 8px; }
.stars { display: inline-flex; gap: 2px; color: #f59e0b; }
.stars svg { width: 15px; height: 15px; }
.rating .count { font-size: 13px; color: var(--ink-3); }

/* Generic surface card */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease;
}

/* Skeleton */
.skel {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}