/* Kinderquads & Cross — Rehaul stylesheet (dual-tone automotive)
   src/styles/quad.css · referenced via <link rel="stylesheet" href="/styles/quad.css">
   Requires:  eleventyConfig.addPassthroughCopy("src/styles");

   Architecture:
   - Dark hero + footer (dramatic, showcases photos)
   - Light premium content sections (readable, trustworthy)
   - One warm ember accent; red is SEMANTIC ONLY (sale/sold)
   - Real SVG icons (.q-ic), proper type + spacing scale
*/

/* ===================================================== SELF-HOSTED FONTS
   Latin subset (covers de-AT incl. ä ö ü ß). Files in src/styles/fonts/,
   copied via the src/styles passthrough. Replaces the Google Fonts CDN. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('/styles/fonts/archivo-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('/styles/fonts/archivo-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/styles/fonts/archivo-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url('/styles/fonts/archivo-800.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/styles/fonts/inter-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/styles/fonts/inter-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/styles/fonts/inter-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/styles/fonts/inter-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/styles/fonts/jetbrains-mono-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/styles/fonts/jetbrains-mono-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============================================================ TOKENS */
:root {
  /* Brand — Safety Orange (tightened) */
  --q-accent: #F2530E;                       /* vivid, controlled */
  --q-accent-strong: #D8430A;                /* hover/active */
  --q-accent-soft: rgba(242,83,14,0.12);
  --q-accent-ink: #1A0A02;                   /* text on accent fill */

  /* Semantic status */
  --q-green: #16A34A;
  --q-amber: #D97706;
  --q-red:   #DC2626;

  /* Header / hero / footer "chrome" surfaces.
     Single-theme site: these track the SAME light theme as the content
     (and flip to dark together via [data-theme="dark"]). */
  --q-d-bg: #FFFFFF;
  --q-d-surface: #F4F5F7;
  --q-d-surface-2: #ECEEF1;
  --q-d-line: rgba(14,17,22,0.12);
  --q-d-line-strong: rgba(14,17,22,0.20);
  --q-d-fg: #0E1116;
  --q-d-fg-dim: #515861;
  --q-d-fg-faint: #6B7280;

  /* Light content surfaces (default page body) — clean cool neutral */
  --q-bg: #F4F5F7;            /* cool grey */
  --q-surface: #FFFFFF;
  --q-surface-2: #ECEEF1;
  --q-line: rgba(14,17,22,0.12);
  --q-line-strong: rgba(14,17,22,0.20);
  --q-fg: #0E1116;            /* ~17:1 on bg */
  --q-fg-dim: #515861;        /* ~7:1  on bg */
  --q-fg-faint: #6B7280;      /* ~4.7:1 on bg */

  /* Fonts */
  --q-display: 'Archivo', system-ui, sans-serif;
  --q-body: 'Inter', system-ui, -apple-system, sans-serif;
  --q-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale */
  --t-xs: 0.75rem;   --t-sm: 0.875rem;  --t-base: 1rem;
  --t-lg: 1.125rem;  --t-xl: 1.375rem;  --t-2xl: 1.75rem;
  --t-3xl: 2.25rem;  --t-4xl: 3rem;

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --radius: 6px;
  --radius-sm: 4px;
  --shadow-sm: 0 1px 2px rgba(20,18,14,0.06), 0 2px 8px rgba(20,18,14,0.05);
  --shadow-md: 0 4px 12px rgba(20,18,14,0.08), 0 12px 32px rgba(20,18,14,0.08);
  --shadow-lg: 0 12px 40px rgba(20,18,14,0.14);

  --blur-brightness: 0.55;
  --blur-saturation: 1.15;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* Full dark theme (toggle) — light "content" surfaces become dark too */
[data-theme="dark"] {
  --q-bg: #0D0F12;
  --q-surface: #15181D;
  --q-surface-2: #1F232A;
  --q-line: rgba(255,255,255,0.10);
  --q-line-strong: rgba(255,255,255,0.22);
  --q-fg: #F5F6F8;
  --q-fg-dim: rgba(245,246,248,0.68);
  --q-fg-faint: rgba(245,246,248,0.46);
  --q-accent: #FF6A2B;                        /* brighter on near-black */
  --q-accent-strong: #F2530E;
  --q-accent-soft: rgba(255,106,43,0.16);
  --q-green: #22C55E;
  --q-amber: #F59E0B;
  --q-red:   #F26257;
  /* Chrome surfaces flip to dark together with the content */
  --q-d-bg: #0D0F12;
  --q-d-surface: #15181D;
  --q-d-surface-2: #1F232A;
  --q-d-line: rgba(255,255,255,0.10);
  --q-d-line-strong: rgba(255,255,255,0.22);
  --q-d-fg: #F5F6F8;
  --q-d-fg-dim: rgba(245,246,248,0.68);
  --q-d-fg-faint: rgba(245,246,248,0.46);
  --shadow-sm: none;
  --shadow-md: 0 8px 30px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 50px rgba(0,0,0,0.5);
  --blur-brightness: 0.35;
}

/* ============================================================ BASE */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
html, body { margin: 0; padding: 0; }
body {
  /* clip (not hidden) kills horizontal overflow from the off-canvas mobile
     drawer without breaking the sticky header/footer */
  overflow-x: clip;
  background: var(--q-bg); color: var(--q-fg);
  font-family: var(--q-body); font-size: var(--t-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; letter-spacing: -0.006em;
  transition: background .3s var(--ease), color .3s var(--ease);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--q-accent); color: var(--q-accent-ink); }

.q-display { font-family: var(--q-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; margin: 0; text-transform: none; }
.q-head { font-family: var(--q-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; margin: 0; }
.q-mono { font-family: var(--q-mono); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.q-digit { font-family: var(--q-display); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.q-eyebrow { font-family: var(--q-mono); font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--q-accent); display: inline-flex; align-items: center; gap: 10px; }
.q-eyebrow::before { content: ''; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }

.q-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--s-7); }
.q-muted { color: var(--q-fg-dim); }
.q-measure { max-width: 56ch; }

/* Icons */
/* Responsive-image <picture> wrappers must not affect layout — let the inner
   <img> size against the real container (.q-card-media, .q-thumb, …). */
picture { display: contents; }

.q-ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Star glyph is a filled shape, not an outline — fill it with the current (gold/accent) colour. */
.q-stars .q-ic, .q-stat .n .q-ic { fill: currentColor; stroke: none; }
.q-ic-lg { width: 1.5em; height: 1.5em; }

/* ============================================================ BUTTONS */
.q-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 14px 22px; border-radius: var(--radius-sm);
  font-family: var(--q-display); font-weight: 700; font-size: var(--t-base);
  letter-spacing: -0.01em; cursor: pointer; border: 1.5px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.q-btn .q-ic { transition: transform .2s var(--ease); }
.q-btn:hover .q-ic-arrow { transform: translateX(3px); }
.q-btn-sm { padding: 10px 16px; font-size: var(--t-sm); }
.q-btn-lg { padding: 17px 28px; font-size: var(--t-lg); }
.q-btn-primary { background: var(--q-accent); color: var(--q-accent-ink); box-shadow: var(--shadow-sm); }
.q-btn-primary:hover { background: var(--q-accent-strong); box-shadow: var(--shadow-md); }
.q-btn-ghost { border-color: var(--q-line-strong); color: var(--q-fg); background: transparent; }
.q-btn-ghost:hover { border-color: var(--q-fg); background: var(--q-surface-2); }
.q-btn-whatsapp { background: #25D366; color: #04210F; }
.q-btn-whatsapp:hover { background: #1FBA5A; }
/* Ghost button on dark backgrounds */
.on-dark .q-btn-ghost, .q-btn-ghost.on-dark { border-color: var(--q-d-line-strong); color: var(--q-d-fg); }
.on-dark .q-btn-ghost:hover, .q-btn-ghost.on-dark:hover { border-color: var(--q-d-fg); background: rgba(255,255,255,0.06); }

/* ============================================================ DARK ZONE WRAPPER */
.q-dark {
  background: var(--q-d-bg); color: var(--q-d-fg);
  --q-fg: var(--q-d-fg); --q-fg-dim: var(--q-d-fg-dim); --q-fg-faint: var(--q-d-fg-faint);
  --q-surface: var(--q-d-surface); --q-surface-2: var(--q-d-surface-2);
  --q-line: var(--q-d-line); --q-line-strong: var(--q-d-line-strong);
}
[data-theme="dark"] .q-dark { background: #08090B; }

/* ============================================================ TOP BAR + HEADER */
.q-topbar { background: var(--q-d-bg); color: var(--q-d-fg-dim); font-family: var(--q-mono); font-size: var(--t-xs); border-bottom: 1px solid var(--q-d-line); }
.q-topbar .q-wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); padding: 8px var(--s-7); }
.q-topbar a { color: var(--q-d-fg-dim); display: inline-flex; align-items: center; gap: 6px; transition: color .2s var(--ease); }
.q-topbar a:hover { color: var(--q-d-fg); }
.q-topbar .accent { color: var(--q-accent); }

.q-header { position: sticky; top: 0; z-index: 50; background: var(--q-d-bg); border-bottom: 1px solid transparent; color: var(--q-d-fg); transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.q-header.scrolled { background: color-mix(in srgb, var(--q-d-bg) 80%, transparent); backdrop-filter: blur(12px); border-bottom-color: var(--q-d-line); box-shadow: 0 10px 34px rgba(0,0,0,0.36); }
.q-header .q-wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); padding: 16px var(--s-7); transition: padding .25s var(--ease); }
.q-header.scrolled .q-wrap { padding-top: 11px; padding-bottom: 11px; }
.q-logo { display: flex; align-items: center; gap: var(--s-3); color: var(--q-d-fg); }
.q-logo-mark { color: var(--q-accent); display: inline-flex; align-items: center; }
.q-logo-mark svg { width: 36px; height: 29px; display: block; }
.q-footer .q-logo-mark { color: var(--q-accent); }
.q-logo-marks { display: flex; flex-direction: column; line-height: 1.1; }
.q-logo-marks .n { font-family: var(--q-display); font-weight: 800; font-size: var(--t-base); letter-spacing: -0.01em; }
.q-logo-marks .s { font-family: var(--q-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--q-d-fg-faint); margin-top: 2px; }
.q-nav { display: flex; gap: var(--s-6); font-family: var(--q-body); font-weight: 500; font-size: var(--t-sm); }
.q-nav a { color: var(--q-d-fg-dim); position: relative; padding: 4px 0; transition: color .2s var(--ease); }
.q-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--q-accent); transition: right .25s var(--ease); }
.q-nav a:hover, .q-nav a.on { color: var(--q-d-fg); }
.q-nav a:hover::after, .q-nav a.on::after { right: 0; }
.q-header-actions { display: flex; gap: var(--s-2); align-items: center; }

.q-icon-btn { background: transparent; border: 1px solid var(--q-d-line-strong); color: var(--q-d-fg-dim); width: 40px; height: 40px; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; transition: border-color .2s var(--ease), color .2s var(--ease); flex-shrink: 0; }
.q-icon-btn:hover { border-color: var(--q-d-fg); color: var(--q-d-fg); }
.q-nav-toggle { display: none; }

/* Mobile drawer */
.q-mobile-nav { display: none; }

/* ============================================================ HERO */
.q-hero { position: relative; background: var(--q-d-bg); color: var(--q-d-fg); overflow: hidden; padding: var(--s-9) 0 var(--s-8); }
.q-hero::before { content: ''; position: absolute; inset: 0; background:
  radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--q-accent) 16%, transparent), transparent 60%),
  linear-gradient(180deg, transparent, color-mix(in srgb, var(--q-accent) 5%, transparent));
  pointer-events: none; }
.q-hero .grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); align-items: center; }
.q-hero h1 { font-size: clamp(3rem, 6.5vw, 5.25rem); margin: var(--s-5) 0; }
.q-hero h1 em { font-style: normal; color: var(--q-accent); }
.q-hero p { font-size: var(--t-lg); color: var(--q-d-fg-dim); max-width: 52ch; margin: 0 0 var(--s-6); }
.q-cta-row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }

.q-hero-stats { display: flex; gap: var(--s-7); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--q-d-line); flex-wrap: wrap; }
.q-stat .n { font-size: var(--t-3xl); color: var(--q-d-fg); display: flex; align-items: baseline; gap: 4px; }
.q-stat .n .q-ic { color: var(--q-accent); font-size: var(--t-2xl); }
.q-stat .l { font-family: var(--q-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--q-d-fg-faint); margin-top: var(--s-2); }

/* Hero feature card */
.q-frame { position: relative; overflow: hidden; background: var(--q-d-surface); border: 1px solid var(--q-d-line); border-radius: var(--radius); }
.q-hero-feature { aspect-ratio: 4/5; box-shadow: var(--shadow-lg); }
.q-hero-feature > img { width: 100%; height: 100%; object-fit: cover; }
.q-hero-feature .overlay-top { position: absolute; top: var(--s-4); left: var(--s-4); right: var(--s-4); display: flex; justify-content: space-between; align-items: start; }
.q-hero-feature .overlay-bot { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--s-8) var(--s-5) var(--s-5); background: linear-gradient(to top, rgba(8,9,11,0.94) 10%, rgba(8,9,11,0.5) 60%, transparent); }
.q-hero-feature .overlay-bot .row { display: flex; justify-content: space-between; align-items: end; margin-top: var(--s-3); gap: var(--s-3); }
.hero-featured-badge { font-family: var(--q-mono); font-size: 9px; letter-spacing: 0.16em; color: #fff; background: rgba(8,9,11,.6); border: 1px solid rgba(255,255,255,0.25); padding: 5px 9px; border-radius: 999px; backdrop-filter: blur(4px); }
.hero-overlay-dim { color: rgba(244,242,237,0.7); }
.hero-overlay-fg { color: #F4F2ED; }
.hero-overlay-accent { color: var(--q-accent); }
.q-hero-feature img#hero-img { transition: opacity .35s var(--ease); }

.hero-dots { position: absolute; bottom: var(--s-4); left: var(--s-5); display: flex; gap: 7px; z-index: 3; }
.hero-dot { width: 8px; height: 8px; border-radius: 999px; border: none; background: rgba(245,246,248,0.32); cursor: pointer; padding: 0; transition: background .25s var(--ease), width .25s var(--ease); }
.hero-dot:hover { background: rgba(245,246,248,0.6); }
.hero-dot.on { background: var(--q-accent); width: 22px; }

/* Carousel prev/next controls */
.q-carousel-btn { position: absolute; top: 38%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; background: rgba(13,15,18,0.5); border: 1px solid var(--q-d-line-strong); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; backdrop-filter: blur(4px); font-size: 20px; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.q-carousel-btn:hover { background: var(--q-accent); color: var(--q-accent-ink); border-color: transparent; }
.q-carousel-btn.prev { left: 12px; }
.q-carousel-btn.next { right: 12px; }

/* Hero inline trust signals */
.q-hero-trust { display: flex; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-5); }
.q-hero-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--q-d-fg-dim); }
.q-hero-trust .q-ic { color: var(--q-accent); font-size: 18px; }

/* ============================================================ TRUST BAR */
.q-trustbar { background: var(--q-surface); border-bottom: 1px solid var(--q-line); }
.q-trustbar .q-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); padding: var(--s-6) var(--s-7); }
.q-trust { display: flex; align-items: center; gap: var(--s-3); }
.q-trust .ic { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--q-accent-soft); color: var(--q-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.q-trust .t { font-family: var(--q-display); font-weight: 700; font-size: var(--t-sm); }
.q-trust .b { font-size: var(--t-xs); color: var(--q-fg-dim); }

/* ============================================================ SECTIONS */
.q-section { padding: var(--s-9) 0; }
.q-section + .q-section { border-top: 1px solid var(--q-line); }
.q-section.alt { background: var(--q-surface); }
.q-section-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: var(--s-7); gap: var(--s-5); flex-wrap: wrap; }
.q-section-head h2 { font-size: var(--t-4xl); max-width: 18ch; margin: var(--s-3) 0 0; }
.q-section-head .sub { color: var(--q-fg-dim); max-width: 38ch; }

/* ============================================================ CATEGORIES */
.q-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.q-cat { position: relative; padding: var(--s-6); background: var(--q-surface); border: 1px solid var(--q-line); border-radius: var(--radius); display: flex; flex-direction: column; gap: var(--s-3); min-height: 200px; color: inherit; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.q-cat:hover { border-color: var(--q-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.q-cat .ic { width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--q-accent-soft); color: var(--q-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.q-cat .name { font-family: var(--q-display); font-weight: 800; font-size: var(--t-2xl); margin-top: auto; }
.q-cat .desc { color: var(--q-fg-dim); font-size: var(--t-sm); }
.q-cat .go { position: absolute; top: var(--s-6); right: var(--s-6); color: var(--q-fg-faint); font-size: 18px; transition: color .2s var(--ease), transform .2s var(--ease); }
.q-cat:hover .go { color: var(--q-accent); transform: translate(2px,-2px); }

/* ============================================================ INVENTORY GRID + CARD */
.q-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); }
.q-filters { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.q-filter { padding: 9px 16px; border: 1.5px solid var(--q-line-strong); background: transparent; color: var(--q-fg-dim); font-family: var(--q-body); font-weight: 600; font-size: var(--t-sm); border-radius: 999px; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.q-filter:hover { border-color: var(--q-fg); color: var(--q-fg); }
.q-filter.on { border-color: var(--q-accent); background: var(--q-accent); color: var(--q-accent-ink); }

.q-inv { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.q-card { position: relative; background: var(--q-surface); border: 1px solid var(--q-line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; color: inherit; box-shadow: var(--shadow-sm); transition: border-color .2s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.q-card:hover { border-color: var(--q-accent); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.q-card:hover .q-card-img { transform: scale(1.05); }
.q-card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--q-surface-2); }
.q-card-img { transition: transform .6s var(--ease); width: 100%; height: 100%; object-fit: cover; }
.q-card-badges { position: absolute; top: var(--s-3); left: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); align-items: start; }
.q-card-body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.q-card-type { font-family: var(--q-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--q-fg-faint); margin-bottom: var(--s-2); }
.q-card-title-row { display: flex; justify-content: space-between; align-items: start; gap: var(--s-3); margin-bottom: var(--s-1); }
.q-card-title { font-family: var(--q-display); font-weight: 700; font-size: var(--t-xl); line-height: 1.1; }
.q-card-price { text-align: right; white-space: nowrap; }
.q-card-price .now { font-family: var(--q-display); font-weight: 800; font-size: var(--t-xl); color: var(--q-fg); }
.q-card-sub { color: var(--q-fg-dim); font-size: var(--t-sm); margin-bottom: var(--s-4); }
.q-card-specs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); }
.q-card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: var(--s-4); border-top: 1px solid var(--q-line); }
.q-card-foot .label { font-family: var(--q-display); font-weight: 700; font-size: var(--t-sm); color: var(--q-fg); display: inline-flex; align-items: center; gap: 6px; }
.q-card:hover .q-card-foot .label { color: var(--q-accent); }
.q-card:hover .q-card-foot .q-ic { transform: translateX(3px); }
.q-card-foot .q-ic { color: var(--q-accent); transition: transform .2s var(--ease); }
.q-empty { grid-column: 1/-1; text-align: center; color: var(--q-fg-dim); padding: var(--s-8); border: 1px dashed var(--q-line-strong); border-radius: var(--radius); }

/* ============================================================ PILLS / CHIPS / SALE */
.q-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--q-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--q-surface); border: 1px solid currentColor; font-weight: 500; }
.q-pill .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.q-pill.is-green { color: var(--q-green); }
.q-pill.is-amber { color: var(--q-amber); }
.q-pill.is-red { color: var(--q-red); }
.q-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; background: var(--q-surface-2); border-radius: 999px; font-size: var(--t-xs); font-weight: 500; color: var(--q-fg-dim); }
.q-chip .q-ic { color: var(--q-accent); font-size: 14px; }
.q-sale { display: inline-flex; align-items: center; font-family: var(--q-display); font-size: var(--t-sm); font-weight: 800; padding: 5px 10px; border-radius: var(--radius-sm); background: var(--q-red); color: #fff; box-shadow: var(--shadow-sm); }
.q-was { font-family: var(--q-body); font-size: var(--t-sm); color: var(--q-fg-faint); text-decoration: line-through; }

/* ============================================================ REVIEWS */
.q-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.q-review { background: var(--q-surface); border: 1px solid var(--q-line); border-radius: var(--radius); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); box-shadow: var(--shadow-sm); }
.q-stars { display: inline-flex; gap: 2px; color: var(--q-amber); font-size: 16px; }
.q-review .quote { font-size: var(--t-base); line-height: 1.6; color: var(--q-fg); flex: 1; }
.q-review .who { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--q-line); }
.q-review .avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--q-accent-soft); color: var(--q-accent); display: inline-flex; align-items: center; justify-content: center; font-family: var(--q-display); font-weight: 800; }
.q-review .name { font-family: var(--q-display); font-weight: 700; font-size: var(--t-sm); }
.q-review .place { font-size: var(--t-xs); color: var(--q-fg-faint); display: inline-flex; align-items: center; gap: 4px; }
.q-rating-summary { display: inline-flex; align-items: center; gap: var(--s-3); }
.q-rating-summary .big { font-family: var(--q-display); font-weight: 800; font-size: var(--t-3xl); }

/* ============================================================ SAFETY / FEATURE BLOCK */
.q-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
.q-feature { display: flex; gap: var(--s-4); padding: var(--s-5); background: var(--q-surface); border: 1px solid var(--q-line); border-radius: var(--radius); }
.q-feature .ic { width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--q-accent-soft); color: var(--q-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.q-feature h3 { font-family: var(--q-display); font-weight: 700; font-size: var(--t-lg); margin: 0 0 4px; }
.q-feature p { color: var(--q-fg-dim); font-size: var(--t-sm); margin: 0; }

/* ============================================================ FAQ */
.q-faq { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-3); }
.q-faq details { background: var(--q-surface); border: 1px solid var(--q-line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s var(--ease); }
.q-faq details[open] { border-color: var(--q-accent); }
.q-faq summary { list-style: none; cursor: pointer; padding: var(--s-5); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); font-family: var(--q-display); font-weight: 700; font-size: var(--t-lg); }
.q-faq summary::-webkit-details-marker { display: none; }
.q-faq summary .q-ic { color: var(--q-accent); transition: transform .25s var(--ease); }
.q-faq details[open] summary .q-ic { transform: rotate(180deg); }
.q-faq .answer { padding: 0 var(--s-5) var(--s-5); color: var(--q-fg-dim); line-height: 1.65; }

/* ============================================================ DELIVERY + MAP */
.q-delivery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.q-delivery-card { border: 1px solid var(--q-line); background: var(--q-surface); padding: var(--s-6); border-radius: var(--radius); display: flex; flex-direction: column; gap: var(--s-3); box-shadow: var(--shadow-sm); }
.q-delivery-card .ic { width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--q-accent-soft); color: var(--q-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; }
.q-delivery-card h3 { font-family: var(--q-display); font-weight: 800; font-size: var(--t-2xl); margin: 0; }
.q-delivery-card p { color: var(--q-fg-dim); margin: 0; flex: 1; }

/* ============================================================ CONTACT */
.q-contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-8); align-items: center; }
.q-contact-card { border: 1px solid var(--q-line); background: var(--q-surface); padding: var(--s-6); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.q-info-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--q-line); }
.q-info-row:last-of-type { border-bottom: 0; }
.q-info-row .q-ic { color: var(--q-accent); font-size: 18px; }
.q-info-row .k { font-size: var(--t-xs); color: var(--q-fg-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.q-info-row .v { font-family: var(--q-display); font-weight: 700; }

/* ============================================================ SPEC ROW */
.q-spec-row { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--q-line); font-size: var(--t-sm); }
.q-spec-row:last-child { border-bottom: 0; }
.q-spec-row .k { color: var(--q-fg-dim); display: inline-flex; align-items: center; gap: var(--s-2); }
.q-spec-row .k .q-ic { color: var(--q-accent); font-size: 16px; }
.q-spec-row .v { color: var(--q-fg); font-weight: 600; text-align: right; }

/* ============================================================ FOOTER (dark) */
.q-footer { background: var(--q-d-surface-2); color: var(--q-d-fg); border-top: 1px solid var(--q-d-line); padding: var(--s-8) 0 var(--s-5); }
.q-footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-7); padding-bottom: var(--s-6); border-bottom: 1px solid var(--q-d-line); }
.q-footer h4 { font-family: var(--q-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--q-d-fg-faint); margin: 0 0 var(--s-4); }
.q-footer nav { display: flex; flex-direction: column; gap: var(--s-2); }
.q-footer nav a { color: var(--q-d-fg-dim); font-size: var(--t-sm); transition: color .2s var(--ease); width: fit-content; }
.q-footer nav a:hover { color: var(--q-accent); }
.q-footer .blurb { color: var(--q-d-fg-dim); font-size: var(--t-sm); max-width: 40ch; margin: var(--s-3) 0 var(--s-4); }
.q-footer .socials { display: flex; gap: var(--s-2); }
.q-footer .socials a { width: 38px; height: 38px; border: 1px solid var(--q-d-line-strong); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--q-d-fg-dim); font-size: 18px; transition: border-color .2s var(--ease), color .2s var(--ease); }
.q-footer .socials a:hover { border-color: var(--q-accent); color: var(--q-accent); }
.q-footer .bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--s-5); gap: var(--s-4); flex-wrap: wrap; }
.q-footer .bottom span, .q-footer .bottom a { font-family: var(--q-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--q-d-fg-faint); }
.q-footer .bottom a:hover { color: var(--q-d-fg); }
.q-footer .bottom .links { display: flex; gap: var(--s-4); flex-wrap: wrap; }

/* ============================================================ PRODUCT PAGE */
.q-breadcrumb { font-family: var(--q-body); font-size: var(--t-sm); color: var(--q-fg-faint); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.q-breadcrumb a { color: var(--q-fg-dim); }
.q-breadcrumb a:hover { color: var(--q-accent); }
.q-prod-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-8); }
.q-gallery-main { aspect-ratio: 1/1; }
.q-gallery-blur { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(28px) brightness(var(--blur-brightness)) saturate(var(--blur-saturation)); pointer-events: none; }
.q-gallery-fg { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.q-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-3); }
.q-thumb { aspect-ratio: 4/3; padding: 0; border: 1.5px solid var(--q-line); background: var(--q-surface-2); overflow: hidden; border-radius: var(--radius-sm); cursor: pointer; transition: border-color .2s var(--ease); }
.q-thumb:hover { border-color: var(--q-fg); }
.q-thumb.on { border-color: var(--q-accent); }
.q-thumb img { width: 100%; height: 100%; object-fit: cover; }

.q-price-block { border: 1px solid var(--q-line); border-left: 4px solid var(--q-accent); border-radius: var(--radius); padding: var(--s-5) var(--s-6); margin-bottom: var(--s-5); background: var(--q-surface); display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); flex-wrap: wrap; box-shadow: var(--shadow-sm); }
.q-price-block .now { font-family: var(--q-display); font-weight: 800; font-size: var(--t-4xl); color: var(--q-fg); }
.q-save { font-family: var(--q-body); font-weight: 600; font-size: var(--t-sm); color: var(--q-green); margin-top: 4px; }
.q-highlights { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.q-highlights li { display: flex; gap: var(--s-3); font-size: var(--t-base); color: var(--q-fg); align-items: center; }
.q-highlights li .q-ic { color: var(--q-accent); font-size: 18px; }
.q-cta-stack { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); }
.q-prod-trust { display: flex; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-4) 0; border-top: 1px solid var(--q-line); margin-top: var(--s-5); }
.q-prod-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--q-fg-dim); }
.q-prod-trust .q-ic { color: var(--q-green); font-size: 16px; }

.q-sticky { position: sticky; bottom: 0; border-top: 1px solid var(--q-line); padding: var(--s-3) 0; background: color-mix(in srgb, var(--q-bg) 90%, transparent); backdrop-filter: blur(12px); z-index: 40; }
.q-sticky .q-wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; }

/* Markdown body */
.q-md { color: var(--q-fg-dim); line-height: 1.7; font-size: var(--t-base); }
.q-md h2, .q-md h3 { font-family: var(--q-display); font-weight: 700; color: var(--q-fg); margin: var(--s-6) 0 var(--s-3); }
.q-md h2 { font-size: var(--t-xl); }
.q-md h3 { font-size: var(--t-lg); }
.q-md ul { padding-left: 1.2rem; }
.q-md li { margin-bottom: var(--s-2); }
.q-md strong { color: var(--q-fg); }
.q-md p { margin: 0 0 var(--s-4); }

/* ============================================================ LEGAL / PROSE PAGES */
.q-prose { max-width: 760px; margin: 0 auto; padding: var(--s-9) 0; }
.q-prose h1 { font-family: var(--q-display); font-weight: 800; font-size: var(--t-4xl); margin: 0 0 var(--s-6); }
.q-prose h2 { font-family: var(--q-display); font-weight: 700; font-size: var(--t-xl); margin: var(--s-7) 0 var(--s-3); }
.q-prose p, .q-prose li { color: var(--q-fg-dim); line-height: 1.7; }
.q-prose a { color: var(--q-accent); text-decoration: underline; text-underline-offset: 2px; }
.q-todo { display: block; background: var(--q-accent-soft); border: 1px dashed var(--q-accent); border-radius: var(--radius-sm); padding: 2px 8px; color: var(--q-accent-strong); font-family: var(--q-mono); font-size: var(--t-xs); }

/* ============================================================ FOCUS / A11Y */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--q-accent); outline-offset: 2px; border-radius: 2px; }
.q-skip { position: absolute; left: -9999px; top: 0; background: var(--q-accent); color: var(--q-accent-ink); padding: 10px 16px; z-index: 100; border-radius: 0 0 var(--radius-sm) 0; font-weight: 700; }
.q-skip:focus { left: 0; }

/* ============================================================ RESPONSIVE */
@media (max-width: 1024px) {
  .q-cats { grid-template-columns: repeat(3, 1fr); }
  .q-inv, .q-reviews { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .q-wrap { padding: 0 var(--s-5); }
  .q-section { padding: var(--s-8) 0; }
  .q-hero { padding: var(--s-8) 0 var(--s-7); }
  .q-hero .grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .q-hero-feature { aspect-ratio: 16/12; max-height: 60vh; }
  .q-section-head h2, .q-prose h1 { font-size: var(--t-3xl); }
  .q-trustbar .q-wrap { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); padding: var(--s-5); }
  .q-cats, .q-features, .q-delivery, .q-contact-grid, .q-prod-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .q-contact-grid { gap: var(--s-6); }
  .q-footer .top { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .q-nav, .q-topbar .desktop-only { display: none; }
  .q-nav-toggle { display: inline-flex; }
  /* Mobile drawer */
  .q-mobile-nav { display: flex; flex-direction: column; gap: var(--s-2); position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); background: var(--q-d-surface); color: var(--q-d-fg); border-left: 1px solid var(--q-d-line); padding: var(--s-7) var(--s-5); transform: translateX(100%); transition: transform .3s var(--ease); z-index: 60; box-shadow: var(--shadow-lg); }
  .q-mobile-nav.open { transform: translateX(0); }
  .q-mobile-nav a { color: var(--q-d-fg); font-family: var(--q-display); font-weight: 700; font-size: var(--t-xl); padding: var(--s-3) 0; border-bottom: 1px solid var(--q-d-line); }
  .q-mobile-nav .close { align-self: flex-end; }
  .q-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease); z-index: 55; }
  .q-scrim.open { opacity: 1; visibility: visible; }
}
@media (max-width: 560px) {
  .q-inv, .q-reviews, .q-cats { grid-template-columns: 1fr; }
  .q-trustbar .q-wrap { grid-template-columns: 1fr; }
  .q-footer .top, .q-footer .bottom { grid-template-columns: 1fr; flex-direction: column; align-items: start; gap: var(--s-5); }
  .q-hero-stats { gap: var(--s-5); }
  .q-toolbar { flex-direction: column; align-items: start; }
  .q-price-block .now { font-size: var(--t-3xl); }
}

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}