/* ==========================================================
   RouterHaus Kits — Enhanced Premium Design System 2025
   Clean, Modern, and Fully Responsive (Desktop-first fixed)
   ========================================================== */
/* Buttons centralized in main.css (2025-02-14).
   Local .btn overrides removed; use .btn, .btn-secondary, .btn-ghost, sizes .btn-sm/.btn-lg. */

/* ------------------- Enhanced Design Tokens ------------------- */
:root {
  /* Modern Color System (LIGHT MODE → EXACT dark-mode brand colors) */
  --primary-h: 234.433;
  --primary-s: 100%;
  --primary-l: 80.98%;
  --primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
  --primary-rgb: 158 167 255;   /* #9ea7ff */

  --accent-h: 300;
  --accent-s: 100%;
  --accent-l: 80.2%;
  --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-rgb: 255 154 255;    /* #ff9aff */

  /* Semantic colors */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl: clamp(2rem, 1.7rem + 1.5vw, 3rem);

  /* Light theme palette */
  --bg: #f8fafc;
  --bg-elev: #ffffff;
  --text-1: #0a0f1e;
  --text-2: #3a4361;
  --muted: #6d7694;

  /* Enhanced Surfaces */
  --surface-primary: rgba(255, 255, 255, 0.9);
  --surface-secondary: rgba(255, 255, 255, 0.95);
  --surface-tertiary: rgba(255, 255, 255, 0.8);
  --surface-elevated: rgba(255, 255, 255, 0.98);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-tint: rgba(255, 255, 255, 0.05);
  --glass-blur: 20px;
  --glass-sat: 140%;

  /* Borders & focus */
  --border: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.2);
  --ring: color-mix(in oklab, var(--primary) 40%, transparent);

  /* Shadows */
  --shadow-soft: 0 2px 12px rgba(16, 24, 40, 0.08);
  --shadow: 0 10px 32px rgba(16, 24, 40, 0.12);
  --shadow-sm: 0 6px 20px rgba(16, 24, 40, 0.08);
  --shadow-strong: 0 20px 48px rgba(16, 24, 40, 0.15);
  --shadow-glow: 0 0 32px rgba(var(--primary-rgb), 0.3);

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;

  /* Radius */
  --radius-xs: 4px; --radius-sm: 8px; --radius: 12px; --radius-md: 14px;
  --radius-lg: 18px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px;

  /* Motion */
  --easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --easing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;

  color-scheme: light dark;
  accent-color: var(--primary);
  scroll-behavior: smooth;
}

/* Dark Theme */
html[data-theme="dark"] {
  --bg: #0a0e16;
  --bg-elev: #0f1419;
  --text-1: #f0f4f8;
  --text-2: #cbd5e0;
  --muted: #a0aec0;

  --surface-primary: rgba(15, 20, 25, 0.8);
  --surface-secondary: rgba(20, 25, 35, 0.9);
  --surface-tertiary: rgba(25, 30, 40, 0.7);
  --surface-elevated: rgba(30, 35, 45, 0.95);

  --glass-bg: rgba(10, 14, 22, 0.4);
  --glass-tint: rgba(10, 14, 22, 0.2);
  --glass-border: rgba(255, 255, 255, 0.1);

  --border: rgba(255, 255, 255, 0.15);
  --border-strong: rgba(255, 255, 255, 0.25);
  --ring: color-mix(in oklab, var(--primary) 50%, transparent);

  --shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.3);
  --shadow-strong: 0 30px 60px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0a0e16;
    --bg-elev: #0f1419;
    --text-1: #f0f4f8;
    --text-2: #cbd5e0;
    --muted: #a0aec0;
    --surface-primary: rgba(15, 20, 25, 0.8);
    --surface-secondary: rgba(20, 25, 35, 0.9);
    --surface-tertiary: rgba(25, 30, 40, 0.7);
    --surface-elevated: rgba(30, 35, 45, 0.95);
    --glass-bg: rgba(10, 14, 22, 0.4);
    --glass-tint: rgba(10, 14, 22, 0.2);
    --glass-border: rgba(255, 255, 255, 0.1);
    --border: rgba(255, 255, 255, 0.15);
    --border-strong: rgba(255, 255, 255, 0.25);
    --ring: color-mix(in oklab, var(--primary) 50%, transparent);
    --shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.3);
    --shadow-strong: 0 30px 60px rgba(0, 0, 0, 0.5);
  }
}

/* ------------------- Base & Reset ------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: var(--space-20); }

body {
  background:
    radial-gradient(ellipse 1400px 900px at 70% -10%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 70%),
    radial-gradient(ellipse 800px 600px at 30% 110%, color-mix(in oklab, var(--primary) 6%, transparent), transparent 70%),
    var(--bg);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }

/* ------------------- Ambient Background ------------------- */
.ambient-bg { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.bg-orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.08; animation: float 25s ease-in-out infinite; }
.orb-1 { width: 600px; height: 600px; background: radial-gradient(circle, var(--primary) 0%, transparent 70%); top: -15%; right: -15%; animation-delay: 0s; }
.orb-2 { width: 450px; height: 450px; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); bottom: -10%; left: -10%; animation-delay: -8s; }
.orb-3 { width: 350px; height: 350px; background: radial-gradient(circle, var(--success) 0%, transparent 70%); top: 35%; left: 15%; animation-delay: -16s; }
@keyframes float { 0%,100%{transform:translateY(0) rotate(0) scale(1)}25%{transform:translateY(-30px) rotate(5deg) scale(1.05)}50%{transform:translateY(-50px) rotate(-5deg) scale(.95)}75%{transform:translateY(-25px) rotate(3deg) scale(1.02)} }

/* ------------------- Page Progress Ring ------------------- */
.page-progress-ring {
  position: fixed; top: var(--space-6); right: var(--space-6); z-index: 200;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center;
  transition: all var(--duration-normal) var(--easing-smooth); opacity: 0;
}
.page-progress-ring:hover { transform: scale(1.1); background: var(--surface-primary); }
.progress-ring-svg { position: absolute; width: 44px; height: 44px; transform: rotate(-90deg); }
.progress-ring-circle { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset var(--duration-normal) var(--easing-smooth); }
.progress-percentage { font-size: var(--text-xs); font-weight: 700; color: var(--primary); }

/* ------------------- Scrollbars ------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--muted) 50%, transparent); border-radius: var(--radius-full); transition: background var(--duration-fast); }
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--muted) 70%, transparent); }

/* ------------------- Kits Layout (edge-to-edge) ------------------- */
/* Override the global .container just for this page without touching other pages */
.container.kits-layout,
.kits-layout.container {
  max-width: none;            /* remove global cap that squeezed content */
  width: 100%;
  margin: 0;                  /* eliminate center-block margins */
  padding-left: clamp(12px, 2vw, 24px);
  padding-right: clamp(12px, 2vw, 24px);
}

/* Two-column grid: sticky filters on the left, results on the right */
.kits-layout {
  display: grid;
  grid-template-columns: clamp(240px, 18vw, 300px) 1fr; /* narrower rail to free space */
  gap: clamp(16px, 1.6vw, 24px);
  align-items: start;
}
.kits-layout > * { min-width: 0; }  /* prevent overflow from long content */

/* Ensure the main content column can actually use the available width */
.content { min-width: 0; }

.icon-btn {
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius: var(--radius); border:1px solid var(--border); background: var(--surface-primary);
  color: var(--text-2); cursor: pointer; transition: all var(--duration-normal) var(--easing-smooth);
}
.icon-btn:hover { background: var(--surface-secondary); color: var(--text-1); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.icon-btn[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ------------------- Page Header ------------------- */
.page-header { margin-bottom: var(--space-6); }
.command-bar {
  padding: var(--space-3);   /* tightened horizontally to reclaim width */
  border-radius: var(--radius-lg);
  background: var(--surface-primary);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.search-container { display:flex; gap: var(--space-3); align-items:center; flex-wrap: wrap; }
.search-wrapper { flex:1; position:relative; min-width: 260px; }
.search-icon { position:absolute; left: var(--space-3); top:50%; transform: translateY(-50%); color: var(--text-2); z-index:1; font-size: var(--text-base); }
#searchInput {
  width:100%; padding: var(--space-3) var(--space-4) var(--space-3) 2.5rem; height:48px;
  border-radius: var(--radius-full); border:2px solid var(--border);
  background: var(--surface-secondary); color: var(--text-1); font-size: var(--text-base);
  transition: all var(--duration-normal) var(--easing-smooth);
}
#searchInput::placeholder{ color: var(--muted); }
#searchInput:focus{ border-color: var(--ring); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 25%, transparent); transform: translateY(-1px); outline: none; }

/* ------------------- Filters Rail ------------------- */
.filters-rail {
  position: sticky; top: clamp(12px, 1.6vw, 20px);
  max-height: calc(100vh - clamp(12px, 1.6vw, 20px) - 8px);
  overflow: auto;                    /* allow full-rail scrolling */
  display:flex; flex-direction:column;
  padding: var(--space-4) var(--space-3);  /* tighter horizontal padding */
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface-primary);
  backdrop-filter: blur(var(--glass-blur));
  transition: box-shadow var(--duration-normal) var(--easing-smooth), transform var(--duration-normal) var(--easing-smooth);
}
.filters-rail:hover{ box-shadow: var(--shadow); transform: translateY(-2px); }

.filters-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom:1px solid var(--border); }
.filters-header h2 { margin:0; font-size: var(--text-lg); font-weight:700; color: var(--text-1); display:flex; align-items:center; gap: var(--space-2); }
.match-count { color: var(--muted); font-size: var(--text-sm); font-weight:500; }

.facet-toolbar { display:flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap:wrap; }

.filters-form { flex:1; overflow: auto; padding-right: var(--space-2); scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* ------------------- Facets ------------------- */
.facet {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-secondary);
  overflow: hidden; margin-bottom: var(--space-3); transition: background var(--duration-normal) var(--easing-smooth), border-color var(--duration-normal) var(--easing-smooth), transform var(--duration-normal) var(--easing-smooth);
}
.facet:hover { background: var(--surface-tertiary); border-color: var(--border-strong); transform: translateX(2px); }
.facet summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-weight:600; background: var(--surface-primary); transition: background var(--duration-fast) var(--easing-smooth); }
.facet summary:hover { background: var(--surface-secondary); }
.facet summary::-webkit-details-marker{ display:none; }
.facet-title{ display:flex; align-items:center; gap: var(--space-2); flex:1; font-size: var(--text-sm); }
.facet .facet-meta{ display:flex; align-items:center; gap: var(--space-2); }
.facet .badge.count{ background: var(--accent); color:#fff; min-width:20px; height:20px; border-radius: var(--radius-full); display:inline-flex; align-items:center; justify-content:center; font-size: var(--text-xs); font-weight:700; visibility:hidden; }
.facet .badge.count:not(:empty){ visibility:visible; }
.facet .chev{ transition: transform var(--duration-normal) var(--easing-smooth); color: var(--text-2); font-size: var(--text-sm); }
details.facet[open] .chev{ transform: rotate(180deg); color: var(--primary); }
.facet .facet-controls{ display:flex; justify-content:flex-end; gap: var(--space-2); padding: 0 var(--space-4) var(--space-2); background: var(--surface-primary); }
.facet .facet-clear{ border-radius: var(--radius); font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border:1px solid var(--border); background: transparent; color: var(--text-2); cursor:pointer; transition: all var(--duration-fast) var(--easing-smooth); }
.facet .facet-clear:hover{ background: var(--danger); color:#fff; border-color: var(--danger); }
.facet .options{ padding: var(--space-3) var(--space-4); display:grid; gap: var(--space-2); grid-template-columns: 1fr; background: var(--surface-secondary); border-top:1px solid var(--border); }
.facet .options.two-cols{ grid-template-columns: 1fr 1fr; }
.facet .options label{
  position:relative; display:flex; align-items:center; gap: var(--space-2); border:1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface-primary); padding: var(--space-2) var(--space-3);
  cursor:pointer; transition: all var(--duration-normal) var(--easing-smooth); min-width:0; font-size: var(--text-sm); font-weight:500; overflow:hidden;
}
.facet .options label:hover{ background: var(--surface-tertiary); border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.facet .options input[type="checkbox"]{ width:16px; height:16px; border:2px solid var(--border); border-radius: var(--radius-xs); background:transparent; cursor:pointer; position:relative; flex-shrink:0; appearance:none; transition: all var(--duration-normal) var(--easing-smooth); }
.facet .options input[type="checkbox"]:checked{ background: var(--primary); border-color: var(--primary); }
.facet .options input[type="checkbox"]:checked::after{ content:'✓'; position:absolute; top:-1px; left:1px; color:#fff; font-size:12px; font-weight:700; }
.facet .options input:checked + span { color: var(--primary); font-weight:600; }

/* Quick Picks */
.quick-picks-section .chips{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: var(--space-2); }
.quick-picks-section .chip{ justify-content:center; text-align:center; padding: var(--space-3); min-height:56px; display:flex; flex-direction:column; align-items:center; font-weight:600; border-radius: var(--radius-lg); }
.quick-picks-section .chip .icon{ font-size: var(--text-lg); margin-bottom: var(--space-1); }

.facet-head{ display:flex; justify-content:space-between; align-items:center; padding: var(--space-3) var(--space-4); background: var(--surface-primary); border-bottom:1px solid var(--border); margin-bottom: var(--space-3); }
.facet-head h3{ margin:0; font-size: var(--text-sm); font-weight:600; display:flex; align-items:center; gap: var(--space-2); }

.divider-modern{ height:1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: var(--space-4) 0; }

/* ------------------- Chips ------------------- */
.chips{ display:flex; flex-wrap:wrap; gap: var(--space-2); }
.chip{
  display:inline-flex; align-items:center; gap: var(--space-1); border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-3); background: var(--surface-tertiary); border:1px solid var(--border); color: var(--text-1);
  font-size: var(--text-sm); font-weight:500; line-height:1; cursor:pointer; transition: all var(--duration-normal) var(--easing-smooth);
  position:relative; overflow:hidden;
}
.chip:hover{ background: var(--primary); color:#fff; border-color: var(--primary); transform: translateY(-1px) scale(1.02); box-shadow: var(--shadow-soft); }
.chip .icon{ font-size: var(--text-xs); }
.active-chips{ display:flex; gap: var(--space-2); flex-wrap:wrap; margin-bottom: var(--space-4); }
.active-chips .chip{ background: var(--danger); color:#fff; border-color: transparent; }
.active-chips .chip:hover{ background:#dc2626; transform: scale(.95); }

/* ------------------- Product Grid (multi-column guarantee) ------------------- */
/* Default desktop: auto-fit columns that shrink gracefully */
.product-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 22vw, 360px), 1fr));
  gap: clamp(16px, 1.6vw, 24px);
  margin-bottom: var(--space-8);
  width:100%;
  align-content:start;
}

/* Explicit column targets to avoid the “single-card on desktop” issue */
@media (min-width: 1200px) and (max-width: 1439.98px){
  .product-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1440px) and (max-width: 1799.98px){
  .product-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1800px){
  .product-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ------------------- Product Cards ------------------- */
.product{
  display:grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-xl);
  background: var(--surface-primary); border:1px solid var(--border); box-shadow: var(--shadow-sm);
  overflow:hidden; transition: all var(--duration-normal) var(--easing-smooth);
  cursor:pointer; position:relative; min-width:0; width:100%;
}
.product:hover{ transform: translateY(-6px) scale(1.01); box-shadow: var(--shadow-strong); border-color: var(--primary); }
.product.reveal{ opacity:0; transform: translateY(20px); transition: all var(--duration-slow) var(--easing-smooth); }
.product.reveal.in-view{ opacity:1; transform: translateY(0); }

.product-media{
  width:100%; aspect-ratio: 3 / 2;
  min-height: clamp(150px, 18vw, 220px);
  border-radius: var(--radius-lg); overflow:hidden; position:relative;
  background: linear-gradient(135deg, var(--surface-secondary), var(--surface-tertiary));
  border:1px solid var(--border);
}
.product-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .4s ease;
}
.product:hover .product-media img{ transform: scale(1.05); }

.product-badges{ position:absolute; top: var(--space-3); left: var(--space-3); display:flex; flex-direction:column; gap: var(--space-2); z-index:2; }
.badge-wifi, .badge-recommended{
  color:#fff; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight:700; box-shadow: var(--shadow-soft);
}
.badge-wifi{ background: var(--primary); }
.badge-recommended{ background: var(--success); }

/* Center the card title (brand + model) */
.product-header{ align-items: center; }

.product .title{ text-align: center; }

.product .title .brand{
  font-style: normal;
  font-size: 0.9em;
  color: var(--text-2);
  font-weight: 600;
}
.product .title .brand:not(:empty){ margin-right: .35rem; }
.product .title .brand:empty{ display:none; }
.product .title .model{
  font-weight: 800;
  color: var(--text-1);
}

.product .chips.line{ display:flex; flex-wrap:wrap; gap: var(--space-1); }
.product .chips.line .chip{
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  background: var(--surface-tertiary);
  border-radius: var(--radius-sm);
  cursor: default;
}

.product .specs{ margin:0; display:grid; gap: var(--space-2); padding:0; list-style:none; flex:1; }
.product .specs li{
  display:flex; align-items:flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-2);
  position:relative; padding-left: var(--space-4);
}
.product .specs li::before{
  content:""; position:absolute; left:0; top:.6em; width:6px; height:6px;
  border-radius:50%; background: var(--primary);
  box-shadow: 0 0 8px rgba(var(--primary-rgb), .3);
}

.priceRow{
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-3);
  margin-top:auto; padding-top: var(--space-3); border-top:1px solid var(--border);
}
.price{
  font-weight:800; font-size: var(--text-xl);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color: transparent;
  color: var(--primary);
}
.ctaRow{ display:flex; gap: var(--space-2); align-items:center; }

/* ------------------- Toolbar ------------------- */
.toolbar{
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); flex-wrap:wrap;
  margin-bottom: var(--space-4); padding: var(--space-3);
  border:1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-primary); backdrop-filter: blur(var(--glass-blur));
}
.toolbar-group{ display:flex; align-items:center; gap: var(--space-4); flex-wrap:wrap; }
.sort,.pagesize{ display:flex; align-items:center; gap: var(--space-2); white-space:nowrap; font-size: var(--text-sm); color: var(--text-2); font-weight:500; }
.sort .icon,.pagesize .icon{ color: var(--primary); font-size: var(--text-sm); }
.sort select,.pagesize select{
  padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--surface-secondary); border:1px solid var(--border); color: var(--text-1);
  font-size: var(--text-sm); cursor:pointer; transition: all var(--duration-normal) var(--easing-smooth);
}
.sort select:hover,.pagesize select:hover{ transform: translateY(-1px); border-color: var(--primary); background: var(--surface-tertiary); }
.sort select:focus,.pagesize select:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .2); }
.toggle{ display:flex; align-items:center; gap: var(--space-2); white-space:nowrap; cursor:pointer; user-select:none; font-size: var(--text-sm); color: var(--text-2); }
.toggle input[type="checkbox"]{ display:none; }
.toggle-slider{ width:44px; height:24px; background: var(--surface-tertiary); border:1px solid var(--border); border-radius: var(--radius-full); position:relative; transition: all var(--duration-normal) var(--easing-smooth); }
.toggle-slider::before{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition: all var(--duration-normal) var(--easing-elastic); box-shadow: var(--shadow-soft); }
.toggle input:checked + .toggle-slider{ background: var(--primary); border-color: var(--primary); }
.toggle input:checked + .toggle-slider::before{ transform: translateX(20px); }

/* ------------------- Recommendations ------------------- */
.modern-recommendations{ margin-bottom: var(--space-8); }
.modern-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom:2px solid var(--border); }
.modern-section-head h2{ margin:0; font-size: var(--text-2xl); font-weight:800; display:flex; align-items:center; gap: var(--space-3); color: var(--text-1); }
.reco-note{ color: var(--muted); font-size: var(--text-sm); font-weight:500; }

/* ------------------- Pagination ------------------- */
.pagination{
  display:flex; flex-wrap:wrap; gap: var(--space-2); justify-content:center; margin: var(--space-6) 0; align-items:center;
}
.pagination .page{
  min-width:44px; height:44px; padding:0 var(--space-3); border-radius: var(--radius); border:1px solid var(--border); background: var(--surface-primary);
  font-weight:600; transition: all var(--duration-normal) var(--easing-smooth); display:flex; align-items:center; justify-content:center; text-decoration:none; color: var(--text-2); cursor:pointer;
}
.pagination .page:hover{ background: var(--primary); color:#fff; border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.pagination .page[aria-current="page"]{ background: linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; border-color:transparent; box-shadow: var(--shadow); }
.pagination .disabled{ opacity:.5; pointer-events:none; }

/* ------------------- Skeletons ------------------- */
.skeletons .skeleton{ position:relative; overflow:hidden; pointer-events:none; }
.shimmer{ background: linear-gradient(90deg, var(--surface-primary) 0%, var(--surface-secondary) 50%, var(--surface-primary) 100%); background-size:200% 100%; animation: shimmer 2s ease-in-out infinite; border-radius: var(--radius); }
@keyframes shimmer{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* ------------------- Empty State ------------------- */
.empty-modern{
  text-align:center; padding: var(--space-16) var(--space-4); background: var(--surface-primary);
  border-radius: var(--radius-2xl); border:2px dashed var(--border); margin: var(--space-8) 0;
}
.empty-icon{ font-size:4rem; margin-bottom: var(--space-4); opacity:.6; }
.empty-modern h3{ font-size: var(--text-xl); font-weight:700; color: var(--text-1); margin:0 0 var(--space-2); }
.empty-modern p{ color: var(--text-2); font-size: var(--text-base); margin:0 0 var(--space-6); }
.empty-modern .chips{ justify-content:center; max-width:600px; margin:0 auto; }

/* ------------------- Mobile Elements ------------------- */
.fab{
  position:fixed; bottom: var(--space-6); right: var(--space-6); z-index:100;
  display:none; align-items:center; gap: var(--space-2);
  border-radius: var(--radius-full); padding: var(--space-3) var(--space-4);
  border:1px solid var(--border); background: linear-gradient(135deg, var(--primary), var(--accent)); color:#fff;
  box-shadow: var(--shadow-strong); transition: all var(--duration-normal) var(--easing-smooth);
  cursor:pointer; font-weight:600; font-size: var(--text-sm);
}
.fab:hover{ transform: translateY(-4px) scale(1.05); box-shadow: var(--shadow-strong), 0 0 32px rgba(var(--primary-rgb), .4); }

.drawer{ position:fixed; inset:0; display:none; z-index:150; background: rgba(0,0,0,.7); backdrop-filter: blur(12px); }
.drawer[aria-hidden="false"]{ display:flex; align-items:flex-end; justify-content:center; }
.drawer .drawer-panel{
  position:absolute; bottom:0; left:0; right:0; border-top-left-radius: var(--radius-2xl); border-top-right-radius: var(--radius-2xl);
  padding: var(--space-4); border:1px solid var(--border); background: var(--surface-elevated); backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-strong); transform: translateY(100%); transition: transform var(--duration-normal) var(--easing-smooth);
  width:100%; max-width:600px; max-height:85vh; margin:0 auto;
}
.drawer[aria-hidden="false"] .drawer-panel{ transform: translateY(0); }
.drawer-header{ display:flex; align-items:center; justify-content:space-between; padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom:1px solid var(--border); }
.drawer-header h2{ margin:0; display:flex; align-items:center; gap: var(--space-2); font-size: var(--text-lg); font-weight:600; }
.drawer-body{ max-height:60vh; overflow:auto; margin-bottom: var(--space-4); }
.drawer-footer{ display:flex; gap: var(--space-3); justify-content:flex-end; padding-top: var(--space-4); border-top:1px solid var(--border); }

/* ------------------- Compare ------------------- */
.compare-sticky{
  position:fixed; bottom: var(--space-6); left:50%; transform: translateX(-50%);
  z-index:120; background: linear-gradient(135deg, var(--success), var(--accent)); color:#fff; border:none;
  border-radius: var(--radius-full); padding: var(--space-3) var(--space-6); font-weight:600; box-shadow: var(--shadow-strong);
  transition: all var(--duration-normal) var(--easing-elastic); cursor:pointer; font-size: var(--text-sm);
}
.compare-sticky:hover{ transform: translateX(-50%) translateY(-4px) scale(1.05); box-shadow: var(--shadow-strong), 0 0 32px rgba(16,185,129,.4); }

.compare{
  position:fixed; bottom:0; left:0; right:0; z-index:130; background: var(--surface-elevated); backdrop-filter: blur(var(--glass-blur));
  border-top:1px solid var(--border); box-shadow: 0 -20px 40px rgba(0,0,0,.1); transform: translateY(100%); transition: transform var(--duration-normal) var(--easing-smooth);
  max-height:300px; overflow:hidden;
}
.compare:not([hidden]){ transform: translateY(0); }
.compare-header{ display:flex; justify-content:space-between; align-items:center; padding: var(--space-4); border-bottom:1px solid var(--border); background: var(--surface-primary); }
.compare-header strong{ font-size: var(--text-base); font-weight:700; display:flex; align-items:center; gap: var(--space-2); }
.compare-items{ display:flex; gap: var(--space-3); padding: var(--space-4); overflow-x:auto; scrollbar-width:thin; scrollbar-color: var(--border) transparent; }
.compare-item{
  flex:0 0 200px; background: var(--surface-secondary); border-radius: var(--radius-lg); padding: var(--space-3); border:1px solid var(--border); position:relative; transition: all var(--duration-normal) var(--easing-smooth);
}
.compare-item:hover{ transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.compare-item img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius: var(--radius); margin-bottom: var(--space-2); }
.compare-item h5{ font-size: var(--text-sm); font-weight:600; margin:0 0 var(--space-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.compare-item .price{ font-weight:700; color: var(--primary); font-size: var(--text-base); }
.compare-remove{
  position:absolute; top: var(--space-2); right: var(--space-2); width:24px; height:24px; border-radius:50%; background: var(--danger); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:12px; transition: all var(--duration-fast) var(--easing-smooth);
}
.compare-remove:hover{ transform: scale(1.1); background:#dc2626; }

/* ------------------- Quiz Modal ------------------- */
.modal{
  position: fixed;
  inset: 0;

  /* dynamic viewport units fix for iOS */
  width: 100dvw;
  height: 100dvh;

  /* center using flex to avoid Safari grid+dialog issues */
  display: none;
  align-items: center;
  justify-content: center;

  /* padding + safe areas */
  --_pad: clamp(12px, 2vw, 24px);
  padding:
    max(var(--_pad), env(safe-area-inset-top))
    max(var(--_pad), env(safe-area-inset-right))
    max(var(--_pad), env(safe-area-inset-bottom))
    max(var(--_pad), env(safe-area-inset-left));

  margin: 0;
  border: none;
  background: transparent;
  isolation: isolate;
  z-index: 160;
}
.modal[open],
.modal.is-open{ display: flex; }

/* Extra belt & suspenders for dialog behavior in odd engines */
dialog.modal:not([open]):not(.is-open){ display: none !important; }

.modal::backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Centered panel with premium card visuals */
.modal .modal-content {
  display: grid;
  grid-template-rows: auto 1fr auto;

  width: min(900px, calc(100dvw - 2 * var(--_pad)));
  max-height: calc(100dvh - 2 * var(--_pad));

  background: var(--surface-elevated);
  color: var(--text-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-strong);
  overflow: hidden;

  /* Subtle entry animation */
  animation: panelIn var(--duration-normal) var(--easing-smooth);
}
@keyframes panelIn{
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Header / body / footer */
.modal-header{
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-primary);
  border-bottom: 1px solid var(--border);
}
.modal-title-group{ display:flex; align-items:center; gap: var(--space-3); }
.modal-title-group h2{ margin:0; font-size: var(--text-xl); font-weight:700; }
.modal-icon{ color: var(--primary); font-size: var(--text-lg); }
.modal-close{
  width:40px; height:40px; border-radius: var(--radius);
  border:1px solid var(--border); background: var(--surface-secondary);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft); cursor:pointer;
  transition: all var(--duration-normal) var(--easing-smooth);
  color: var(--text-2); font-size: var(--text-base);
}
.modal-close:hover{ background: var(--danger); color:#fff; transform: scale(1.1) rotate(90deg); }

.quiz-body{
  padding: var(--space-5);
  display: grid; gap: var(--space-6);
  overflow: auto; background: var(--surface-secondary);
  min-height: 0;
}

/* Progress */
.quiz-progress{
  display:flex; align-items:center; gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-primary);
  border-radius: var(--radius-lg);
  border:1px solid var(--border);
}
.progress-bar{
  flex:1; height:8px; background: var(--surface-tertiary);
  border-radius: var(--radius-full); overflow:hidden; position:relative;
}
.progress-fill{
  height:100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: var(--radius-full);
  transition: width var(--duration-normal) var(--easing-smooth);
  width:14.28%;
  position: relative;
}
/* Shimmer sweep on the fill */
.progress-fill::after{
  content:""; position:absolute; inset:0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: prog 2s ease-in-out infinite;
}
@keyframes prog { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce){
  .progress-fill::after{ animation:none; display:none; }
}

.progress-text{ font-size: var(--text-sm); font-weight:600; color: var(--text-2); white-space:nowrap; }

/* Question groups */
.q-group{
  border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4); background: var(--surface-primary);
  transition: all var(--duration-normal) var(--easing-smooth);
}
.q-group:focus-within{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); }
.q-group legend{
  font-weight:600; font-size: var(--text-base); color: var(--text-1);
  padding:0 var(--space-2); display:flex; align-items:center; gap: var(--space-2);
}
.q-group label{ display:block; margin-top: var(--space-3); }
.q-group label > span{
  display:block; font-weight:500; color: var(--text-2);
  margin-bottom: var(--space-2); font-size: var(--text-sm);
}
.q-group select{
  width:100%; padding: var(--space-3); border-radius: var(--radius);
  border:1px solid var(--border); background: var(--surface-secondary);
  color: var(--text-1); font-size: var(--text-base);
  transition: all var(--duration-normal) var(--easing-smooth);
}
.q-group select:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); }
.q-group select:hover{ border-color: var(--border-strong); background: var(--surface-tertiary); }

.speed-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
  gap: var(--space-2); margin-top: var(--space-3);
}

/* Radio pills */
.radio-pill{ position:relative; cursor:pointer; }
.radio-pill input[type="radio"]{ position:absolute; opacity:0; width:0; height:0; }
.radio-pill span{
  display:block; padding: var(--space-3); text-align:center;
  border:2px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-secondary);
  color: var(--text-2); font-weight:500; font-size: var(--text-sm);
  transition: all var(--duration-normal) var(--easing-smooth);
  position:relative; overflow:hidden;
}
.radio-pill span::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(45deg, transparent, rgba(255,255,255,.1), transparent);
  transform: translateX(-100%);
  transition: transform var(--duration-normal) var(--easing-smooth);
}
.radio-pill:hover span{ border-color: var(--primary); background: var(--surface-tertiary); transform: translateY(-2px); }
.radio-pill:hover span::before{ transform: translateX(100%); }
.radio-pill input:checked + span{
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color:#fff; border-color:transparent; box-shadow: var(--shadow-soft);
}

/* Mesh rows & hint */
.mesh-row{ margin-top: var(--space-3); }
.mesh-row:first-child{ margin-top: var(--space-2); }
.mesh-row .auto{ margin-bottom: var(--space-3); }
.mesh-row .auto input[type="checkbox"]{
  margin-right: var(--space-2); width:18px; height:18px; accent-color: var(--primary);
}
.hint{
  margin-top: var(--space-2); padding: var(--space-3);
  background: var(--surface-tertiary); border-radius: var(--radius);
  border-left:4px solid var(--info);
  font-size: var(--text-sm); color: var(--text-2);
}

/* Footer */
.modal-actions{
  display:flex; justify-content:space-between; align-items:center; gap: var(--space-3);
  padding: var(--space-5); background: var(--surface-primary); border-top:1px solid var(--border);
}

/* Stronger focus visibility inside the modal only */
.modal :focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Small phones: full-screen takeover with safe-area fixes */
@media (max-width: 640px) {
  .modal {
    padding: 0;
    display: block; /* Avoid flex centering artifacts */
    overflow: hidden;
    position: fixed;
    inset: 0;
    width: 100dvw;
    height: 100dvh;
    max-height: none !important; /* Override browser defaults causing bottom gaps */
    margin: 0;
    border: 0;
  }

  .modal .modal-content {
    position: absolute;
    inset: 0;
    width: auto; /* Fill inset fully */
    height: auto; /* Fill inset fully */
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none; /* Remove shadow to prevent border-like edges */
    background: var(--surface-elevated); /* Ensure opaque to avoid transparency gaps */
    box-sizing: border-box; /* Include paddings in height/width */
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }

  /* Force backdrop to cover fully, no blur to prevent artifacts */
  .modal::backdrop {
    inset: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.8); /* Keep tint but ensure no gaps show page bg */
  }

  /* Optional fallback coverage */
  #quizBackdrop {
    inset: 0;
    width: 100dvw;
    height: 100dvh;
  }

  /* Extra insurance against right/bottom artifacts (subpixel or toolbar) */
  html, body {
    overflow-x: hidden;
  }
  html.scroll-lock,
  body.scroll-lock {
    overflow-y: hidden;
  }

  /* Make inner body scrollable to prevent toolbar pop-up on tap */
  .quiz-body {
    -webkit-overflow-scrolling: touch;
  }
}

/* ------------------- A11y & Utils ------------------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hide{ display:none !important; }
.glass{ background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border:1px solid var(--glass-border); }
.loading{ pointer-events:none; opacity:.6; position:relative; }
.loading::after{ content:""; position:absolute; inset:0; background:linear-gradient(45deg, transparent, rgba(255,255,255,.3), transparent); animation: loading 1.5s ease-in-out infinite; }
@keyframes loading{ 0%{transform: translateX(-100%)} 100%{transform: translateX(100%)} }

/* ------------------- RESPONSIVE PLAN ------------------- */

/* Keep left rail visible down to 992px; switch to drawer under that */
@media (max-width: 991.98px){
  .kits-layout{ grid-template-columns: 1fr; }
  .filters-rail{ display:none; }
  .fab{ display:flex; }
  .command-bar, .toolbar{ padding: var(--space-3); }
  .search-container{ flex-direction: column; align-items: stretch; }
  .search-wrapper{ min-width: auto; }
  .product-grid{ grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--space-4); }
  /* (Removed modal 95vw/95vh overrides to preserve dv* units) */
  .quiz-progress{ flex-wrap:wrap; gap: var(--space-2); }
  .speed-grid{ grid-template-columns: repeat(auto-fit, minmax(100px,1fr)); }
}

/* Small phones */
@media (max-width: 640px){
  .kits-layout.container, .container.kits-layout{
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .command-bar{ padding: var(--space-3); border-radius: var(--radius); }
  .search-container{ gap: var(--space-2); }
  #searchInput{ height:44px; font-size: var(--text-base); }
  .toolbar{ padding: var(--space-3); border-radius: var(--radius); }
  .toolbar-group{ flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .sort,.pagesize{ justify-content: space-between; }
  .product-grid{ grid-template-columns: 1fr; gap: var(--space-4); }
  .product{ padding: var(--space-3); }
  .product-media{ min-height: 180px; }
  .quick-actions{ gap: var(--space-2); }
  .quick-btn{ width:40px; height:40px; font-size: var(--text-sm); }
  .fab{ bottom: var(--space-4); right: var(--space-4); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
  .drawer-panel{ padding: var(--space-3); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .modal-header{ padding: var(--space-4); }
  .quiz-body{ padding: var(--space-4); gap: var(--space-4); }
  .quiz-progress{ padding: var(--space-3); flex-direction: column; gap: var(--space-2); align-items: stretch; }
  .progress-text{ order:-1; text-align:center; }
  .q-group{ padding: var(--space-3); }
  .speed-grid{ grid-template-columns: 1fr; gap: var(--space-2); }
  .modal-actions{ padding: var(--space-4); flex-direction: column-reverse; align-items: stretch; }
  .compare-sticky{ bottom: var(--space-4); left: var(--space-4); right: var(--space-4); transform:none; border-radius:0; }
  .compare-sticky:hover{ transform: translateY(-2px); }
  .compare-items{ padding: var(--space-3); gap: var(--space-2); }
  .compare-item{ flex: 0 0 160px; padding: var(--space-2); }
  .page-progress-ring{ top: var(--space-4); right: var(--space-4); width:48px; height:48px; }
  .progress-ring-svg{ width:36px; height:36px; }
  .progress-percentage{ font-size:10px; }
  .facet .options.two-cols{ grid-template-columns: 1fr; }
  .quick-picks-section .chips{ grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); }
  .quick-picks-section .chip{ min-height:48px; padding: var(--space-2); }
  .active-chips{ gap: var(--space-1); }
  .active-chips .chip{ font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }
  .chips{ gap: var(--space-1); }
  .empty-modern{ padding: var(--space-8) var(--space-3); margin: var(--space-4) 0; }
  .empty-icon{ font-size:3rem; margin-bottom: var(--space-3); }
  .pagination{ gap: var(--space-1); margin: var(--space-4) 0; }
  .pagination .page{ min-width:40px; height:40px; font-size: var(--text-sm); }
}

/* Ultra-wide adjustments already handled above via explicit repeats */

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .bg-orb{ animation:none; }
  .shimmer{ animation:none; background: var(--surface-secondary); }
  .product:hover{ transform:none; }
}

/* High contrast */
@media (prefers-contrast: high){
  :root{ --border:#000; --border-strong:#000; --shadow:none; --shadow-soft:none; --shadow-strong:none; }
  .product,.facet{ border-width:2px; }
}

/* Print */
@media print{
  .ambient-bg,.page-progress-ring,.fab,.drawer,.compare-sticky,.compare,.modal{ display:none !important; }
  .product{ break-inside: avoid; box-shadow:none; border:1px solid #000; }
  .product-hover-overlay{ display:none; }
  :is(.btn){
    --btn-shadow:none;
    --btn-border-color:#000;
    --btn-border-color-hover:#000;
    --btn-border-color-active:#000;
    --btn-color:#000;
    --btn-bg:color-mix(in oklab, #ffffff 92%, var(--bg) 8%);
  }
  .filters-rail{ position:static; max-height:none; }
  .kits-layout{ grid-template-columns: 1fr; }
}

/* Focus management */
.focus-trap{ position:fixed; top:0; left:0; width:1px; height:1px; opacity:0; pointer-events:none; }
button:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* Performance / support */
.product-media img[loading="lazy"]{ content-visibility: auto; }
.product.skeleton *{ pointer-events:none; user-select:none; }
@supports (backdrop-filter: blur(20px)){
  .glass{ background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); }
}
@supports not (backdrop-filter: blur(20px)){ .glass{ background: var(--surface-primary); } }

/* Container queries for richer specs layout */
@container (min-width: 400px){
  .product .specs{ grid-template-columns: repeat(2, 1fr); gap: var(--space-1) var(--space-3); }
}

/* Custom scrollbars for webkit in drawers/filters */
.drawer-body::-webkit-scrollbar, .filters-form::-webkit-scrollbar{ width:6px; }
.drawer-body::-webkit-scrollbar-track, .filters-form::-webkit-scrollbar-track{ background: var(--surface-tertiary); border-radius: var(--radius-full); }
.drawer-body::-webkit-scrollbar-thumb, .filters-form::-webkit-scrollbar-thumb{ background: var(--border); border-radius: var(--radius-full); }
.drawer-body::-webkit-scrollbar-thumb:hover, .filters-form::-webkit-scrollbar-thumb:hover{ background: var(--border-strong); }

/* Reveal animation helpers */
@keyframes fadeInUp{ from{opacity:0; transform: translateY(30px);} to{opacity:1; transform: translateY(0);} }
.fade-in-up{ animation: fadeInUp .6s ease-out forwards; }
.product.reveal:nth-child(1){ transition-delay: 0ms; }
.product.reveal:nth-child(2){ transition-delay: 100ms; }
.product.reveal:nth-child(3){ transition-delay: 200ms; }
.product.reveal:nth-child(4){ transition-delay: 300ms; }
.product.reveal:nth-child(5){ transition-delay: 400ms; }
.product.reveal:nth-child(6){ transition-delay: 500ms; }

/* Selection */
::selection{ background: rgba(var(--primary-rgb), .3); color: var(--text-1); }
::-moz-selection{ background: rgba(var(--primary-rgb), .3); color: var(--text-1); }

/* Errors */
.error{ border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important; }
.error-message{ color: var(--danger); font-size: var(--text-sm); margin-top: var(--space-1); font-weight:500; }

/* Loading state for buttons */
.btn.loading{
  position:relative;
  color: transparent;
}
.btn.loading::after{
  content:""; position:absolute; width:16px; height:16px; top:50%; left:50%; margin:-8px 0 0 -8px;
  border:2px solid transparent; border-top-color: var(--btn-loader-color, var(--btn-color, var(--primary))); border-radius:50%; animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Z-index management */
.ambient-bg{ z-index:-1; }
.filters-rail{ z-index:10; }
.fab{ z-index:100; }
.compare-sticky{ z-index:120; }
.compare{ z-index:130; }
.drawer{ z-index:150; }
.modal{ z-index:160; }
.page-progress-ring{ z-index:200; }

/* Fallback backdrop for non-top-layer dialogs */
#quizBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(12px);
  z-index: 155;          /* below .modal (160), above page */
  display: none;
}