/* ═══════════════════════════════════════════════════════════════
   DIN DÄCKKOMPIS — Stylesheet (single authoritative system)
   Language: precision instrument + tyre sidewall + calm Nordic
   premium automotive. One system, no overrides, no dead code.
   ═══════════════════════════════════════════════════════════════ */

/* Preserved Google landing pages use the same palette, type and controls. */
.subpage-hero { padding: var(--sp-5) 0 var(--sp-8); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-6); font-size: var(--fs-xs); color: var(--on-dark-muted); }
.breadcrumbs a { color: var(--on-dark-body); text-decoration: underline; text-underline-offset: 4px; }
.subpage-hero-grid { display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--sp-6); align-items: center; }
.subpage-hero-copy { min-width: 0; }
.subpage-hero h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.055em; line-height: 1.06; color: var(--on-dark); }
.subpage-hero h1 strong { color: var(--accent-bright); font-weight: inherit; }
.subpage-hero .lead { margin-top: var(--sp-5); max-width: 35em; color: var(--on-dark-body); }
.subpage-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.subpage-photo { position: relative; min-width: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--ink-800); }
.subpage-photo img { display: block; width: 100%; aspect-ratio: 1 / 1.15; height: auto; object-fit: cover; }
.subpage-photo figcaption { position: absolute; inset: auto 0 0; padding: var(--sp-5) var(--sp-4) var(--sp-4); background: linear-gradient(transparent, oklch(0.145 0.008 52 / 0.96)); color: var(--on-dark); font-size: var(--fs-xs); }
.subpage-story { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--sp-6); }
.subpage-story h2 { font-size: var(--fs-xl); line-height: 1.15; letter-spacing: -0.04em; color: var(--text-strong); }
.subpage-story p + p { margin-top: var(--sp-4); }
/* dl.service-list = undersidornas lista. Startsidans div.service-list har egen stil längre ner. */
.subpage-story a, dl.service-list a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; }
dl.service-list { border-top: 1px solid var(--paper-300); }
dl.service-list > div { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--sp-5); padding: var(--sp-5) 0; border-bottom: 1px solid var(--paper-300); }
dl.service-list dt { font-size: var(--fs-md); font-weight: 750; color: var(--text-strong); }
dl.service-list dd { margin: 0; max-width: 42em; }
@media (max-width: 767px) {
  .subpage-hero { padding-bottom: var(--sp-6); }
  .breadcrumbs { margin-bottom: var(--sp-5); }
  .subpage-hero-grid, .subpage-story { grid-template-columns: 1fr; gap: var(--sp-5); }
  .subpage-photo img { aspect-ratio: 1.618; }
  .subpage-photo figcaption { text-align: right; } /* fri från den flytande chattknappen */
  .subpage-hero h1 { font-size: clamp(2.2rem, 8.5vw, 3.5rem); }
  dl.service-list > div { grid-template-columns: 1fr; gap: var(--sp-2); padding: var(--sp-4) 0; }
}

/* SEO-sidor (2026-10): textsidor, modellistor, länkrutor och däckguide.
   Samma ton som resten: hårlinjer, orange som sparsam accent, inga ikonkort. */
.subpage-logo { position: relative; min-width: 0; margin: 0; display: grid; place-items: center; aspect-ratio: 1 / 1.15; padding: var(--sp-6); border-radius: var(--r-lg); background: var(--paper-50); }
.subpage-logo img { width: 100%; max-width: 320px; height: auto; }
.subpage-wordmark { font-size: var(--fs-xl); font-weight: 800; font-style: italic; letter-spacing: -0.04em; color: var(--text-strong); }
.subpage-logo figcaption { position: absolute; inset: auto 0 0; padding: var(--sp-4); text-align: center; font-size: var(--fs-xs); color: var(--text-muted); }
.prose { max-width: 742px; }
.prose > * + * { margin-top: var(--sp-3); }
.prose h3 { margin-top: var(--sp-5); font-size: var(--fs-md); font-weight: 750; letter-spacing: -0.02em; color: var(--text-strong); }
.prose h3 + p { margin-top: var(--sp-2); }
.prose strong, .price-note strong { color: var(--text-strong); font-weight: 700; }
.prose a, .source-note a, .price-note a, .model-name a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; }
.source-note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--text-muted); }
.why-card a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }

.link-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--sp-3); }
.link-tile { display: flex; flex-direction: column; gap: 6px; min-height: 44px; padding: var(--sp-4); border: 1px solid var(--paper-300); border-radius: var(--r-md); background: var(--paper-50); color: var(--text-body); transition: border-color var(--t), transform var(--t), box-shadow var(--t); }
.is-paper .link-tile { background: var(--paper-100); }
.link-tile:hover, .link-tile:focus-visible { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--sh-md); }
.link-tile strong { display: flex; align-items: center; gap: 9px; font-size: var(--fs-md); font-weight: 750; letter-spacing: -0.02em; color: var(--text-strong); }
.link-tile strong .ic { flex-shrink: 0; color: var(--accent-ink); }
.link-tile span { font-size: var(--fs-sm); color: var(--text-muted); }
.link-tile--logo img { width: auto; height: 64px; max-width: 170px; object-fit: contain; object-position: left center; margin-bottom: var(--sp-2); }

.model-group + .model-group { margin-top: var(--sp-6); }
.model-group > h3 { margin-bottom: var(--sp-3); font-size: var(--fs-lg); font-weight: 750; letter-spacing: -0.03em; color: var(--text-strong); }
/* Hopfällbara modellistor (däcksidan och måttsidorna): en rad per säsong */
.model-group--fold { border-top: 1px solid var(--paper-300); }
.model-group--fold:last-of-type { border-bottom: 1px solid var(--paper-300); }
.model-group--fold + .model-group--fold { margin-top: 0; }
.model-group--fold > summary { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-3) 0; cursor: pointer; list-style: none; }
.model-group--fold > summary::-webkit-details-marker { display: none; }
.model-group--fold > summary h3 { font-size: var(--fs-lg); font-weight: 750; letter-spacing: -0.03em; color: var(--text-strong); }
.model-group--fold > summary .model-count { margin-left: auto; font-size: var(--fs-sm); color: var(--text-muted); }
.model-group--fold > summary::after { content: '+'; display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border: 1px solid var(--paper-300); border-radius: 50%; font-size: 1.2rem; line-height: 1; color: var(--accent-ink); }
.model-group--fold[open] > summary::after { content: '−'; }
.model-group--fold > summary:hover h3 { color: var(--accent-ink); }
.model-group--fold .model-list { margin-bottom: var(--sp-4); }
/* Kompakta rutor (märken, däckmått): två kolumner även på mobil */
.link-tiles--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.link-tiles--compact .link-tile { padding: var(--sp-3); }
.link-tiles--compact .link-tile--logo img { height: 44px; max-width: 130px; margin-bottom: var(--sp-1); }
.model-list { list-style: none; border-top: 1px solid var(--paper-300); }
.model-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr) auto; gap: var(--sp-4); align-items: baseline; padding: var(--sp-4) 0; border-bottom: 1px solid var(--paper-300); scroll-margin-top: 110px; }
.model-row:target { background: var(--accent-tint); box-shadow: -14px 0 0 var(--accent-tint), 14px 0 0 var(--accent-tint); }
.model-name { font-size: var(--fs-md); font-weight: 750; letter-spacing: -0.02em; color: var(--text-strong); }
.model-brand { font-weight: 500; color: var(--text-muted); }
.model-tagline { font-size: var(--fs-sm); color: var(--text-body); }
.model-meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.spec-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px; border: 1px solid var(--paper-300); border-radius: var(--badge-shape); font-size: var(--fs-xs); font-weight: 650; white-space: nowrap; color: var(--text-body); }
a.spec-chip:hover { border-color: var(--accent-line); color: var(--accent-ink); }
.spec-chip--premium { border-color: var(--accent-line); color: var(--accent-ink); }
.price-note { display: flex; gap: 10px; align-items: flex-start; max-width: 742px; margin-top: var(--sp-5); padding: var(--sp-4); border-radius: var(--r-md); background: var(--accent-tint); font-size: var(--fs-sm); color: var(--text-body); }
.price-note .ic { flex-shrink: 0; margin-top: 3px; color: var(--accent-ink); }

.tyre-code { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.18em; margin-bottom: var(--sp-5); font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text-strong); }
.tyre-code span { padding: 0 0.06em; border-bottom: 3px solid var(--accent); }
.tyre-code .sep, .tyre-code .gap { border: 0; }
.tyre-code .sep { color: var(--text-muted); }
.tyre-code .gap { width: 0.25em; }
.spec-val { display: inline-block; min-width: 2.6ch; margin-right: 8px; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.spec-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--sp-5); align-items: start; max-width: 900px; }
.table-scroll { overflow-x: auto; }
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.spec-table caption { padding-bottom: var(--sp-2); text-align: left; font-size: var(--fs-md); font-weight: 750; color: var(--text-strong); }
.spec-table th, .spec-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--paper-300); }
.spec-table thead th { font-size: var(--fs-xs); font-weight: 650; color: var(--text-muted); }
.spec-table tbody th { font-weight: 750; color: var(--text-strong); }
.spec-table--wide { max-width: 720px; }
.spec-table tbody th a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Måttsidor: däckmåttet som bild i sidhuvudet */
.subpage-size .tyre-code { margin: 0 0 var(--sp-6); justify-content: center; flex-wrap: nowrap; white-space: nowrap; font-size: clamp(2rem, 9vw, 2.8rem); }
@media (min-width: 768px) { .subpage-size .tyre-code { font-size: clamp(2rem, 3.1vw, 3.2rem); } }
.tiles-head { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-md); font-weight: 750; color: var(--text-strong); }
/* Sidfoten: orter nära verkstaden */
.footer-areas { margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: 1.7; color: var(--on-dark-muted); }
.footer-areas a { color: var(--on-dark-body); text-decoration: underline; text-decoration-color: var(--ink-600); text-underline-offset: 3px; }
.footer-areas a:hover { color: var(--accent-bright); }

/* Startsidan: diskreta länkar till tjänstesidorna */
.feature-link--more { margin-top: 0; font-weight: 600; color: var(--text-muted); text-decoration: underline; text-underline-offset: 4px; }
.service-main h4 a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 4px; }
.service-main h4 a:hover { color: var(--accent-ink); }
.align-cta-more { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-bright); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 767px) {
  .subpage-logo { aspect-ratio: 1.618; padding: var(--sp-5); }
  .model-row { grid-template-columns: 1fr; gap: 6px; }
  .model-meta { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .link-tile { transition: none; }
  .link-tile:hover, .link-tile:focus-visible { transform: none; }
}

/* Self-hosted Manrope variable font (brand identity, GDPR-friendly). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/manrope-variable.woff2') format('woff2-variations'),
       url('fonts/manrope-variable.woff2') format('woff2');
}

/* ─────────────────────────────────────────────
   TOKENS
   ───────────────────────────────────────────── */
:root {
  /* Color — OKLCH. Brand hue ≈ 38 (orange). Neutrals tinted warm,
     never pure black/white. */
  --ink-900: oklch(0.145 0.008 52);   /* deepest: footer, CTA anchor */
  --ink-850: oklch(0.178 0.010 52);   /* primary dark surface */
  --scene-ground: oklch(0.14528837 0.01165586 57.04655); /* exact warm ground of the wheel film */
  --ink-800: oklch(0.210 0.011 52);   /* raised dark surface */
  --ink-750: oklch(0.248 0.012 52);   /* card on dark */
  --ink-700: oklch(0.320 0.013 54);   /* hairline / border on dark */
  --ink-600: oklch(0.430 0.013 56);   /* faint detail on dark */

  --paper-50:  oklch(0.987 0.004 84); /* lightest */
  --paper-100: oklch(0.966 0.006 82); /* light section */
  --paper-200: oklch(0.928 0.007 80); /* light alt / border */
  --paper-300: oklch(0.872 0.009 78); /* stronger light border */

  --text-strong: oklch(0.235 0.010 52);  /* headings on light */
  --text-body:   oklch(0.360 0.011 52);  /* body on light (AA) */
  --text-muted:  oklch(0.452 0.012 56);  /* muted on light (AA ≥4.5 on paper) */

  --on-dark:        oklch(0.962 0.004 84); /* heading on dark */
  --on-dark-body:   oklch(0.812 0.007 76); /* body on dark (AA on ink-850) */
  --on-dark-muted:  oklch(0.668 0.009 64); /* muted on dark (AA ≥4.5 on ink-850) */

  /* Orange split into accessible roles:
     - accent / accent-bright : ON DARK + non-text marks (huge contrast on ink)
     - accent-press           : SOLID button bg, white text ≥4.5:1
     - accent-ink             : orange TEXT on light, ≥4.5:1 on paper */
  --accent:        oklch(0.660 0.190 40);
  --accent-bright: oklch(0.745 0.165 46);
  --accent-press:  oklch(0.500 0.150 37);
  --accent-press-h:oklch(0.445 0.145 36);
  --accent-ink:    oklch(0.450 0.135 36);
  --accent-tint:   color-mix(in oklch, var(--accent) 12%, transparent);
  --accent-tint-2: color-mix(in oklch, var(--accent) 22%, transparent);
  --accent-line:   color-mix(in oklch, var(--accent) 38%, transparent);

  --gold: oklch(0.785 0.135 78);          /* stars only */
  --danger: oklch(0.585 0.205 27);
  --danger-ink: oklch(0.500 0.185 27);   /* red TEXT on light/tinted (AA ≥4.5) */
  --success: oklch(0.660 0.150 152);

  /* Field borders that identify a control (WCAG 1.4.11, ≥3:1) */
  --field-line-light: oklch(0.640 0.012 60);
  --field-line-dark:  oklch(0.535 0.012 58);

  /* ── GOLDEN RATIO SYSTEM ──────────────────────
     φ = 1.618. Every size below sits on one golden scale.
     Type: base 17px × φ^(k/4)  →  each heading step on
     desktop (lg → xl → 2xl) is exactly ×φ, body steps ×φ^¼.
     Space: Fibonacci (8 · 13 · 21 · 34 · 55 · 89 · 144),
     each step ×φ, with 16 / 70 as the √φ in-betweens.
     Layout splits: 1.618fr / 1fr (61.8 % / 38.2 %).        */
  --phi: 1.618;
  --phi-major: 61.8%;
  --phi-minor: 38.2%;

  /* Type */
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fs-spec: 0.7408rem;   /* 11.85px  φ^-¾ */
  --fs-xs:   0.835rem;    /* 13.36px  φ^-½ */
  --fs-sm:   0.9419rem;   /* 15.07px  φ^-¼ */
  --fs-base: 1.0625rem;   /* 17px     φ^0  */
  --fs-md:   1.198rem;    /* 19.17px  φ^¼  */
  --fs-lg:   clamp(1.524rem, 1.3525rem + 0.734vw, 1.939rem);  /* 24.4 → 31.0  (φ^¾ → φ^1¼) */
  --fs-xl:   clamp(1.939rem, 1.4425rem + 2.12vw, 3.139rem);   /* 31.0 → 50.2  (φ^1¼ → φ^2¼) */
  --fs-2xl:  clamp(2.783rem, 1.831rem + 4.062vw, 5.081rem);   /* 44.5 → 81.3  (φ^2 → φ^3¼)  */
  --lh-body: 1.618;

  /* Space — Fibonacci */
  --sp-1: 0.5rem;     /*   8 */
  --sp-2: 0.8125rem;  /*  13 */
  --sp-3: 1rem;       /*  16  (√φ step) */
  --sp-4: 1.3125rem;  /*  21 */
  --sp-5: 2.125rem;   /*  34 */
  --sp-6: 3.4375rem;  /*  55 */
  --sp-7: 4.375rem;   /*  70  (√φ step) */
  --sp-8: 5.5625rem;  /*  89 */
  --sp-9: 9rem;       /* 144 */
  --sp-10: 14.5625rem;/* 233 */

  /* Radius — restrained, engineered (not pillowy); r-md = r-sm·φ */
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 17px;
  --r-xl: 22px;

  /* Fibonacci radii: 7 × phi ≈ 11. Soft, consistent control geometry. */
  --control-r: 7px;
  --action-r: 11px;
  --action-shape: 13px 21px 21px 13px;
  --choice-shape: 7px 13px 13px 7px;
  --badge-shape: 3px 9px 9px 3px;
  --control-edge: inset 0 1px 0 oklch(1 0 0 / 0.12), 0 2px 5px oklch(0.12 0.01 52 / 0.12);

  /* Elevation — warm, low, precise */
  /* Tre lager: kontaktskugga, nyckelljus och mjukt omgivningsljus (2026-10-28) */
  --sh-sm: 0 1px 2px oklch(0.15 0.01 52 / 0.06), 0 2px 6px -2px oklch(0.15 0.01 52 / 0.05);
  --sh-md: 0 1px 2px oklch(0.15 0.01 52 / 0.06), 0 8px 20px -6px oklch(0.15 0.01 52 / 0.12), 0 21px 55px -21px oklch(0.25 0.04 45 / 0.18);
  --sh-lg: 0 2px 4px oklch(0.12 0.01 52 / 0.07), 0 18px 40px -12px oklch(0.12 0.01 52 / 0.2), 0 44px 89px -34px oklch(0.25 0.05 45 / 0.28);

  --header-h: 76px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  /* durations on the golden scale: 0.2 · 0.32 · 0.52 · 0.84 s */
  --t-fast: 0.2s var(--ease);
  --t: 0.32s var(--ease);
  --t-slow: 0.52s var(--ease);
  --t-slower: 0.84s var(--ease);
}

/* ─────────────────────────────────────────────
   RESET / BASE
   ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* 100% (not a px value) so user browser font-size preferences are honored */
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 100%;
  scrollbar-color: var(--ink-700) var(--ink-900); scrollbar-width: thin;
}
html::-webkit-scrollbar { width: 13px; }
html::-webkit-scrollbar-track { background: var(--ink-900); }
html::-webkit-scrollbar-thumb {
  background: var(--ink-700); border-radius: 7px;
  border: 3px solid var(--ink-900);
}
html::-webkit-scrollbar-thumb:hover { background: var(--accent-press); }
body {
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--paper-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01';
  letter-spacing: -0.006em;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, select, textarea { font: inherit; }
ul { list-style: none; }
:where(h1, h2, h3, h4, h5, h6) { font-weight: 700; line-height: 1.1; color: var(--text-strong); letter-spacing: -0.022em; text-wrap: balance; }
:where(p) { text-wrap: pretty; }
/* Programmatic focus targets (skip link, anchor nav): no giant section outline */
:where(section, main, div)[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--accent-press); color: oklch(0.99 0.01 84); }
.desktop-only { display: inline; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Handritad ikonserie: 24px, tydliga silhuetter och optisk vikt i små storlekar. */
.ic {
  flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
[hidden] { display: none !important; }

/* Focus — one visible token on every interactive element */
:where(a, button, input, select, textarea, [tabindex], [role="button"]):focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.header :focus-visible, .hero :focus-visible, .nav :focus-visible,
.is-dark :focus-visible, .is-darker :focus-visible,
.brands-section :focus-visible, .footer :focus-visible,
.seasonal-banner :focus-visible, .mobile-sticky-bar :focus-visible,
.req :focus-visible, .pick-pop :focus-visible, .req-pill:focus-visible, .float-call:focus-visible {
  outline-color: var(--accent-bright);   /* mörka paneler som flyttats till <body> */
}

/* Pausa rörelser (WCAG 2.2.2): som "minska rörelse" nedan, men valt med knappen
   på sajten. Loopar stannar; korta övergångar vid hover och klick finns kvar. */
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
}
.motion-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 24px; padding: 0;
  border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 40%, transparent); text-underline-offset: 3px;
}
.motion-toggle:hover { color: var(--on-dark); }

/* Reduced motion — global, authoritative */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ─────────────────────────────────────────────
   LAYOUT
   ───────────────────────────────────────────── */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.container--narrow { max-width: 742px; } /* 1200 / φ */
.section { padding: var(--sp-8) 0; position: relative; }
.section--tight { padding: var(--sp-7) 0; }
.is-dark { background: var(--ink-850); color: var(--on-dark-body); }
.is-darker { background: var(--ink-900); color: var(--on-dark-body); }
.is-light { background: var(--paper-100); }
.is-paper { background: var(--paper-50); }

/* Quiet section numerals, using the same proportional scale as headings. */
.intro-num {
  display: inline-block; position: relative; margin-bottom: var(--sp-3);
  font-size: clamp(2.125rem, 1.5rem + 2vw, 3.4375rem);
  font-weight: 450; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.015em;
  color: var(--text-muted);
  user-select: none;
}
.is-dark .intro-num, .is-darker .intro-num {
  color: var(--on-dark-muted);
}
.section-intro { max-width: 742px; margin-bottom: var(--sp-6); } /* 1200 / φ */
.section-intro h2 {
  font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.06; color: var(--text-strong);
}
.is-dark .section-intro h2, .is-darker .section-intro h2 { color: var(--on-dark); }
.section-intro .lead {
  margin-top: var(--sp-3); font-size: var(--fs-md);
  color: var(--text-muted); max-width: 60ch; line-height: 1.55;
}
.is-dark .section-intro .lead, .is-darker .section-intro .lead { color: var(--on-dark-body); }
.section-intro--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ─────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  position: relative; min-height: 48px;
  padding: 13px 24px; border: 1px solid transparent; border-radius: var(--action-shape);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: -0.01em;
  max-width: 100%; line-height: 1.35; white-space: normal; text-align: center; cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t),
              box-shadow var(--t), transform 0.18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex-shrink: 0; }
.btn:has(> svg:first-child) { padding: 9px 21px 9px 9px; }
.btn > svg:first-child {
  box-sizing: content-box; padding: 8px; border-radius: 50%;
  border: 1px solid currentColor; border-color: color-mix(in oklch, currentColor 24%, transparent);
}

/* Premium: svag ljusare överkant som fräst metall, lyft med mjuk varm skugga
   vid hovring. Ingen glöd eller svepande glans (ägarens beslut 2026-10-17). */
.btn-primary {
  background: linear-gradient(180deg, oklch(0.54 0.152 39), var(--accent-press) 52%, oklch(0.475 0.145 36.5));
  color: oklch(0.99 0.012 84); box-shadow: var(--control-edge); border-color: oklch(1 0 0 / 0.2);
}
.btn-primary::after { content: ''; position: absolute; inset: 3px; border: 1px solid oklch(1 0 0 / 0.13); border-radius: 10px 18px 18px 10px; pointer-events: none; }
.btn-primary > svg:first-child { background: oklch(0.12 0.01 52 / 0.13); border-color: oklch(1 0 0 / 0.28); }
.action-sign { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border: 1px solid oklch(1 0 0 / 0.3); border-radius: 50%; font-size: 19px; font-weight: 400; line-height: 1; }
.btn-primary:hover {
  background: linear-gradient(180deg, oklch(0.49 0.148 38), var(--accent-press-h) 52%, oklch(0.42 0.14 35.5));
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.18), 0 2px 4px oklch(0.12 0.01 52 / 0.14), 0 12px 26px -12px oklch(0.3 0.09 40 / 0.55);
}
.btn-primary:active { transform: translateY(1px); box-shadow: inset 0 2px 3px oklch(0.12 0.01 52 / 0.2); }
.btn:disabled, .btn[aria-disabled="true"] {
  cursor: not-allowed; background: var(--ink-700); border-color: var(--field-line-dark);
  color: var(--on-dark-muted); opacity: 0.55; box-shadow: none; transform: none;
}
.btn:disabled::after, .btn[aria-disabled="true"]::after { display: none; }

.btn-outline { background: transparent; color: var(--accent-ink); border: 1px solid var(--accent-ink); }
.btn-outline:hover { background: var(--accent-press); color: oklch(0.99 0.012 84); border-color: var(--accent-press); }

.btn-ghost { background: transparent; color: var(--text-strong); border: 1px solid var(--field-line-light); }
.btn-ghost:hover { border-color: var(--text-muted); background: var(--paper-100); }

.btn-ghost-light { background: transparent; color: var(--on-dark); border: 1px solid var(--field-line-dark); }
.btn-ghost-light:hover { background: oklch(1 0 0 / 0.06); border-color: var(--on-dark-body); }

.btn-large { min-height: 56px; padding: 17px var(--sp-4); font-size: var(--fs-base); }
.btn-sm { min-height: 44px; padding: 9px 16px; font-size: var(--fs-xs); }
.btn-full { width: 100%; }

/* ─────────────────────────────────────────────
   SKIP LINK
   ───────────────────────────────────────────── */
.skip-link {
  position: fixed; top: -120%; left: 16px; z-index: 9999;
  background: var(--accent-press); color: oklch(0.99 0.012 84);
  padding: 12px 22px; border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 700; font-size: var(--fs-sm); transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ─────────────────────────────────────────────
   SEASONAL BANNER
   ───────────────────────────────────────────── */
.seasonal-banner {
  background: var(--ink-900); color: var(--on-dark-body);
  border-bottom: 1px solid var(--accent-tint-2);
  position: relative; z-index: 200;
}
.seasonal-inner {
  display: flex; align-items: center; gap: var(--sp-2) var(--sp-4);
  padding: 4px 0; min-height: 44px;
}
.seasonal-msg {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  font-size: var(--fs-sm); color: var(--on-dark-body);
}
.seasonal-msg strong { color: var(--on-dark); font-weight: 700; }
.seasonal-msg .ic { color: var(--accent-bright); }
.seasonal-cta {
  font-size: var(--fs-sm); font-weight: 700; color: var(--accent-bright);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  min-height: 44px; transition: color var(--t), gap var(--t);
}
.seasonal-cta:hover { color: var(--accent); gap: 8px; }
.seasonal-close {
  margin-left: auto; color: var(--on-dark-muted);
  width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: color var(--t), background var(--t);
}
.seasonal-close:hover { color: var(--on-dark); background: oklch(1 0 0 / 0.06); }
@media (max-width: 560px) {
  .seasonal-msg { font-size: var(--fs-xs); }
  .seasonal-msg .seasonal-rest { display: none; }
  .seasonal-cta { font-size: var(--fs-xs); }
}

/* ─────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  border-bottom: 1px solid oklch(1 0 0 / 0.06);
  transition: box-shadow var(--t-slow), border-color var(--t);
}
/* Frosted glass lives on a pseudo-element: a backdrop-filter on the
   header itself would become the containing block of the fixed
   off-canvas nav and leak it sideways on phones. */
.header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* Nästan täckande i stället för backdrop-filter: oskärpan räknades om
     för varje scrollad bildruta ovanpå hjulfilmen och gav hack på mobil. */
  background: oklch(0.145 0.008 52 / 0.95);
}
.header.scrolled {
  /* Kort och tät skugga: den långa gav ett grått band över ljusa sektioner */
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.05), 0 6px 18px -8px oklch(0.1 0.01 52 / 0.55);
  border-bottom-color: oklch(1 0 0 / 0.10);
}
/* tachometer: a thin orange line fills with scroll progress */
.header-tach {
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, var(--accent-press), var(--accent), var(--accent-bright));
  transform: scaleX(0); transform-origin: left center;
  pointer-events: none; will-change: transform;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); gap: var(--sp-4);
}
.logo { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.logo-icon svg { width: 42px; height: 42px; }
.logo-icon img { width: 42px; height: 42px; object-fit: contain; display: block; }
/* Loggans däck (ägarens önskemål 2026-10-28): en mjuk eldglöd som flimrar bakom
   däcket och en glansreflex som sveper över gummit ungefär var femte sekund.
   Reflexen maskas med själva loggan, så den syns bara på däcket. Glöden animeras
   med transform/opacitet; reflexen bara över loggans 42 px. Bara i headern. */
.logo-icon { position: relative; display: block; isolation: isolate; }
.logo-icon::before {
  content: ''; position: absolute; inset: -10px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, oklch(0.78 0.17 60 / 0.5) 0%, oklch(0.66 0.21 38 / 0.32) 36%, oklch(0.55 0.2 28 / 0.12) 56%, transparent 72%);
  filter: blur(3px); transform-origin: 50% 60%;
  animation: logoEmber 3.6s ease-in-out infinite;
}
.logo-icon::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, oklch(1 0 0 / 0.1) 42%, oklch(1 0 0 / 0.85) 49%, oklch(0.97 0.06 85 / 0.4) 54%, transparent 60%);
  background-size: 320% 100%; background-position: 100% 0;
  -webkit-mask: url('img/orange-wheel-128.webp') center / contain no-repeat;
  mask: url('img/orange-wheel-128.webp') center / contain no-repeat;
  animation: logoSheen 5.2s var(--ease-soft) 1.4s infinite;
}
.logo:hover .logo-icon::before { animation-duration: 1.4s; }
@keyframes logoEmber {
  0%, 100% { opacity: 0.72; transform: scale(1) translateY(0); }
  17% { opacity: 0.95; transform: scale(1.07) translateY(-1px); }
  31% { opacity: 0.66; transform: scale(0.98) translateY(0); }
  49% { opacity: 0.9; transform: scale(1.05) translateY(-1.5px); }
  68% { opacity: 0.7; transform: scale(1.01) translateY(0); }
  84% { opacity: 0.93; transform: scale(1.06) translateY(-1px); }
}
@keyframes logoSheen { 0%, 58% { background-position: 100% 0; } 82%, 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .logo-icon::before, .logo-icon::after { animation: none; }
  .logo-icon::before { opacity: 0.75; }
}
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-name {
  font-size: 1.42rem; font-weight: 700; color: var(--on-dark);
  letter-spacing: -0.028em;
}
.logo-tagline {
  font-size: var(--fs-spec); color: var(--on-dark-muted);
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  margin-top: 3px;
}
.nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
  position: relative; padding: 12px 15px; font-size: var(--fs-sm); font-weight: 650;
  color: var(--on-dark); border-radius: var(--control-r);
  transition: color var(--t), background var(--t);
}
/* "Hitta ditt däck": den tydligaste vägen in. En fylld orange knapp där ett
   guldljus löper runt kanten (ägarens önskemål 2026-10-27/28: mer effekt).
   ::before = roterande ljuskägla, ::after = knappytan 1,5 px innanför kanten.
   Bara transform animeras, så ljuset belastar inte scrollen. */
.nav-link--finder {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 6px; padding: 10px 17px;
  position: relative; isolation: isolate; overflow: hidden; border-radius: 999px;
  color: oklch(0.99 0.01 84); font-weight: 750; letter-spacing: -0.005em;
  background: color-mix(in oklch, var(--accent-bright) 55%, var(--ink-850));
  box-shadow: 0 6px 18px -8px oklch(0.55 0.17 40 / 0.65);
  transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
.nav-link.nav-link--finder::before {
  content: ''; position: absolute; z-index: -2; left: 50%; top: 50%; width: 180%; aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0 50%, oklch(0.8 0.14 62 / 0.85) 64%, oklch(0.995 0.04 92) 74%, oklch(0.84 0.13 70 / 0.9) 81%, transparent 92%);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: finderBeam 4.2s linear infinite;
}
.nav-link.nav-link--finder::after {
  content: ''; position: absolute; z-index: -1; inset: 2px; width: auto; height: auto; left: 2px; bottom: 2px;
  border-radius: inherit; transform: none; transition: filter 0.32s var(--ease);
  background: linear-gradient(180deg, oklch(0.55 0.155 40), var(--accent-press) 55%, oklch(0.445 0.14 36));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.2), inset 0 -1px 0 oklch(0 0 0 / 0.18);
}
.nav-link--finder .ic { color: oklch(0.92 0.09 75); flex-shrink: 0; transition: transform 0.84s var(--ease); }
@keyframes finderBeam { to { transform: translate(-50%, -50%) rotate(360deg); } }
.nav-link { white-space: nowrap; }
/* Smal datorskärm: lite tajtare meny så att allt ryms på en rad */
@media (min-width: 1081px) and (max-width: 1280px) {
  .nav-link { padding: 12px 10px; }
  .nav-link::after { left: 10px; }
  .nav-link--finder { padding: 9px 12px; margin: 0 4px; }
  .header-inner { gap: var(--sp-3); }
  .logo-tagline { display: none; }
}
.nav-link--finder:hover { color: #fff; background: color-mix(in oklch, var(--accent-bright) 55%, var(--ink-850)); transform: translateY(-1px); box-shadow: 0 10px 24px -8px oklch(0.55 0.17 40 / 0.8); }
.nav-link.nav-link--finder:hover::after { filter: brightness(1.08); }
.nav-link--finder:hover .ic { transform: rotate(180deg); }
/* "Outlet": guldorange text med ett glanssvep var tredje sekund och en
   pulserande guldprick (som en "nya fynd"-markering). Pricken animeras
   med transform/opacity, glansen bara över ordets lilla yta. */
.nav-shine, .hero-outlet-text {
  position: relative; display: inline-block;
  font-weight: 800; letter-spacing: 0.01em;
  background: linear-gradient(105deg, var(--accent-bright) 0%, oklch(0.86 0.13 72) 38%, oklch(0.995 0.03 92) 50%, oklch(0.86 0.13 72) 62%, var(--accent-bright) 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px oklch(0.75 0.15 55 / 0.35));
  animation: navShine 3.2s var(--ease-soft) 0.6s infinite;
}
.nav-shine::before, .nav-shine::after {
  content: ''; position: absolute; top: -2px; right: -10px; width: 6px; height: 6px; border-radius: 50%;
  background: oklch(0.86 0.14 72);
}
.nav-shine::after { animation: outletPing 2.4s cubic-bezier(0, 0, 0.2, 1) infinite; }
.nav-link--outlet:hover .nav-shine, .hero-outlet:hover .hero-outlet-text { animation-duration: 1.2s; }
@keyframes navShine { 0%, 45% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
@keyframes outletPing { 0% { transform: scale(1); opacity: 0.75; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nav-shine, .nav-shine::after, .nav-link.nav-link--finder::before,
  .hero-outlet-text, .hero-outlet::after, .hero-outlet-dot::after { animation: none; }
  .nav-shine, .hero-outlet-text { background-position: 50% 0; }
  .hero-outlet::after, .hero-outlet-dot::after { opacity: 0; }
  .nav-shine::after { opacity: 0; }
}
.nav-link:hover { color: var(--on-dark); background: oklch(1 0 0 / 0.06); }
.nav-link--active { color: var(--on-dark); }
.nav-link::after {
  content: ''; position: absolute; bottom: 5px; left: 15px; width: 20px; height: 2px;
  background: var(--accent-bright); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t);
}
.nav-link--active::after, .nav-link:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); position: relative; z-index: 101; }
.open-now-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-spec); font-weight: 700;
  padding: 6px 0; border-radius: 0; white-space: nowrap;
  letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--ink-600);
}
.badge-open { color: oklch(0.78 0.15 152); }
.badge-open::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid currentColor; background: radial-gradient(circle, currentColor 1.5px, transparent 2px); display: block;
}
.badge-closed { color: var(--on-dark-muted); }
.badge-closed::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: oklch(0.62 0.02 56); display: block;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.phone-btn {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 0 19px; min-height: 46px;
  background: var(--accent-press); color: oklch(0.99 0.012 84);
  border: 1px solid oklch(1 0 0 / 0.2); border-radius: var(--action-shape); font-size: var(--fs-sm); font-weight: 750;
  letter-spacing: -0.01em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--control-edge);
  transition: background var(--t), box-shadow var(--t);
}
.phone-btn:hover { background: var(--accent-press-h); }
.phone-btn > svg, .float-call > svg { box-sizing: content-box; padding: 7px; border: 1px solid oklch(1 0 0 / 0.28); border-radius: 50%; background: oklch(0.12 0.01 52 / 0.13); }

.hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 46px; height: 46px; border: 1px solid var(--ink-600); border-radius: 50%;
}
.hamburger:hover { background: oklch(1 0 0 / 0.06); }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--on-dark); border-radius: 2px; transition: transform var(--t-slow), opacity var(--t-slow); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-call { display: none; }

.nav-overlay {
  display: none; position: fixed; inset: 0; background: oklch(0.1 0.01 52 / 0.66);
  z-index: 99; opacity: 0; pointer-events: none; transition: opacity var(--t-slow);
}
.nav-overlay.active { opacity: 1; pointer-events: auto; }

/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */
.hero {
  position: relative; background: var(--ink-850); color: var(--on-dark-body);
  min-height: calc(100svh - var(--header-h));
  display: flex; align-items: center; overflow: hidden;
  padding: var(--sp-8) 0;
}
.hero-slide { position: absolute; inset: 0; z-index: 0; opacity: 0; }
.hero-slide:nth-child(1) { opacity: 1; }
/* Bildspelet går bara med JS, som hämtar bild 2 och 3 (data-src) efter load.
   Cykeln startar 1,62 s in (6 % av 27 s), där bild 1 redan är helt synlig: annars
   tonades LCP-bilden in från noll i 1,6 s vid varje sidladdning (Lighthouse, mobil).
   Bild 2 och 3 är förskjutna lika mycket, så växlingarna sker som förut. */
.js-ready .hero-slide:nth-child(1) { animation: heroFade 27s var(--ease-soft) -1.62s infinite; }
.js-ready .hero-slide:nth-child(2) { animation: heroFade 27s var(--ease-soft) 7.38s infinite; }
.js-ready .hero-slide:nth-child(3) { animation: heroFade 27s var(--ease-soft) 16.38s infinite; }
@keyframes heroFade { 0% { opacity: 0; } 6% { opacity: 1; } 30% { opacity: 1; } 38% { opacity: 0; } 100% { opacity: 0; } }
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
  opacity: 0.42; filter: saturate(0.88);
}
.hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, oklch(0.145 0.008 52 / 0.22), transparent 34%, transparent 61.8%, color-mix(in oklch, var(--scene-ground) 72%, transparent) 86%, var(--scene-ground)),
    linear-gradient(90deg, oklch(0.178 0.01 52 / 0.68), oklch(0.178 0.01 52 / 0.4) 61.8%, oklch(0.178 0.01 52 / 0.18));
}
.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); align-items: center;
  gap: var(--sp-6);
}
.hero-title {
  font-size: var(--fs-2xl); font-weight: 300; line-height: 1.0;
  letter-spacing: -0.038em; color: var(--on-dark); margin-bottom: var(--sp-4);
}
.hero-title .accent {
  display: inline-block; position: relative;
  font-weight: 750; font-style: normal;
  color: var(--accent-bright); letter-spacing: -0.045em;
  padding-right: 0.06em; /* italic overhang */
}
/* A fine underline keeps the brand accent without a luminous stripe. */
.hero-title .accent::after {
  content: ''; position: absolute; left: 0.03em; right: 0.12em; bottom: -0.06em;
  height: 2px; background: var(--accent);
}
.hero-sub {
  font-size: var(--fs-md); color: var(--on-dark-body);
  line-height: 1.6; max-width: 46ch; margin-bottom: var(--sp-5);
}
/* "Fynda i outleten!": genväg högst upp i heron, framför allt för telefonen där
   Outlet annars ligger i sidomenyn. Samma guldglans och puls som Outlet i menyn
   (ägarens undantag från regeln om glans) plus ett ljussvep över knappen var
   femte sekund. Svepet och pulsen animeras bara med transform och opacity. */
.hero-outlet {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%;
  min-height: 44px; padding: 9px 16px 9px 15px; margin-bottom: var(--sp-4);
  border: 1px solid oklch(0.86 0.13 72 / 0.7); border-radius: var(--action-shape);
  background: linear-gradient(100deg, oklch(0.8 0.15 70 / 0.26), oklch(0.66 0.18 45 / 0.16));
  box-shadow: inset 0 1px 0 oklch(1 0.03 90 / 0.16), 0 10px 26px -12px oklch(0.75 0.16 60 / 0.85);
  font-size: var(--fs-sm); color: oklch(0.86 0.13 72);
  transition: border-color var(--t), background var(--t), transform 0.18s var(--ease);
}
.hero-outlet::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 32%, oklch(0.97 0.06 88 / 0.5) 50%, transparent 68%);
  transform: translateX(-100%);
  animation: outletSweep 4s cubic-bezier(0.45, 0, 0.55, 1) 1s infinite;
}
@keyframes outletSweep { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }
.hero-outlet:hover { border-color: oklch(0.9 0.12 80); background: linear-gradient(100deg, oklch(0.8 0.15 70 / 0.36), oklch(0.66 0.18 45 / 0.24)); }
.hero-outlet:active { transform: translateY(1px); }
.hero-outlet .ic { flex: none; transition: transform var(--t); }
.hero-outlet:hover .ic { transform: translateX(3px); }
.hero-outlet-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: oklch(0.86 0.14 72); }
.hero-outlet-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: outletPing 2.4s cubic-bezier(0, 0, 0.2, 1) infinite; }
.hero-cta-group { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--sp-2); width: min(100%, 445px); margin-bottom: var(--sp-5); }
@media (max-width: 480px) {
  .hero-cta-group { grid-template-columns: 1fr; }
}
.hero-meta {
  display: flex; align-items: center; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap;
  padding-top: var(--sp-4); border-top: 1px solid var(--ink-700);
  font-variant-numeric: tabular-nums;
}
.hero-meta-item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--on-dark-muted); }
.hero-meta-item .ic { color: var(--accent-bright); }
.hero-meta-link:hover { color: var(--on-dark); }
.hero-meta-star { color: var(--gold); font-size: 1.05em; line-height: 1; }
a.hero-meta-link { font-variant-numeric: tabular-nums; transition: color var(--t); }
.hero-meta-sep { color: var(--ink-700); }
.hero-trust { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); color: var(--on-dark-muted); }
.hero-trust .stars { color: var(--gold); letter-spacing: 1px; }

/* Hero visual: one crisp SVG wheel inside a precision instrument.
   Tyre, disc, spokes and hub spin; the orange brake caliper and the
   studio light stay put, like a real wheel turning under a lamp. */
.hero-visual {
  position: relative; justify-self: end;
  width: min(100%, 420px);
  aspect-ratio: 1;
}
.premium-wheel {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.wheel-instrument {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; overflow: visible;
  filter: drop-shadow(0 18px 34px oklch(0 0 0 / 0.45));
}
.wheel-instrument .wi-ticks,
.wheel-instrument .wi-text,
.wheel-instrument .wi-arc,
.wheel-instrument .hw-spin {
  transform-box: view-box; transform-origin: 210px 210px;
}
.js-ready .wi-ticks { animation: wiCounter 95s linear infinite; }
.js-ready .wi-text  { animation: wiSpin 70s linear infinite; }
.js-ready .wi-arc   { animation: wiSpin 16s linear infinite; }
.js-ready .hw-spin  { animation: wiSpin 22s linear infinite; }
.wi-arc { filter: drop-shadow(0 0 6px oklch(0.66 0.19 40 / 0.45)); }
.hw-caliper { filter: drop-shadow(0 2px 3px oklch(0 0 0 / 0.5)); }
@keyframes wiSpin    { to { transform: rotate(360deg); } }
@keyframes wiCounter { to { transform: rotate(-360deg); } }
/* soft warm ambient backlight */
.speed-lines {
  position: absolute; inset: -6% -14%;
  background: radial-gradient(ellipse at center,
    oklch(0.66 0.19 40 / 0.12) 0%,
    oklch(0.66 0.19 40 / 0.04) 40%,
    transparent 68%);
  filter: blur(10px); z-index: 1;
}
/* grounding shadow under the wheel */
.smoke {
  position: absolute; left: 50%; bottom: 10%;
  width: 62%; height: 11%;
  background: radial-gradient(ellipse, oklch(0 0 0 / 0.5), transparent 72%);
  filter: blur(14px); opacity: 0.65; transform: translateX(-50%); z-index: 0;
}

/* ─────────────────────────────────────────────
   BRANDS — diagonal racing sash. A white sponsor band cut at
   1° across the dark page, neon-orange edge lines glowing
   inward, big full-colour logos, edge-masked marquee.
   --cut is tan(1°) of the viewport width so the angle stays
   constant and the rotated edge lines always match the clip.
   ───────────────────────────────────────────── */
.brands-section {
  --cut: 1.746vw;
  position: relative; z-index: 2;
  margin: calc(-1 * var(--cut)) 0;
  padding: calc(var(--sp-5) + var(--cut)) 0 calc(var(--sp-6) + var(--cut));
  background:
    radial-gradient(58% 130% at 50% 50%, oklch(0.66 0.19 40 / 0.07), transparent 72%),
    var(--paper-50);
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
/* neon edge lines, parallel to the cut (rotated, not clipped,
   so their inward glow survives the section clip) */
.brands-section::before,
.brands-section::after {
  content: ''; position: absolute; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    transparent 1%, var(--accent) 24%, var(--accent-bright) 50%,
    var(--accent) 76%, transparent 99%);
  box-shadow: 0 0 18px 3px oklch(0.66 0.19 40 / 0.5);
  transform: rotate(-1deg); pointer-events: none;
}
.brands-section::before { top: calc(var(--cut) / 2 - 1.5px); }
.brands-section::after  { bottom: calc(var(--cut) / 2 - 1.5px); }
.brands-head {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.brands-label {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  font-size: var(--fs-md); font-weight: 800; font-style: italic;
  letter-spacing: -0.015em; color: var(--text-strong);
}
.brands-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted);
  border: 1px solid var(--paper-300); border-radius: var(--choice-shape);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.brands-toggle:hover { color: var(--text-strong); border-color: var(--text-muted); background: var(--paper-100); }
.brands-slash { color: var(--accent-press); letter-spacing: -0.08em; }
.brands-track { overflow: visible; }
.brands-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: clamp(var(--sp-4), 4vw, var(--sp-7));
}
.brand-logo {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  transition: transform var(--t), opacity var(--t);
}
.brand-logo img {
  max-height: clamp(44px, 5.5vw, 68px);
  width: auto; display: block;
}
.brand-logo:hover,
.brand-logo:focus-visible {
  transform: translateY(-3px) scale(1.04);
}
.brand-logo[aria-hidden="true"] { display: none; }

/* ─────────────────────────────────────────────
   SERVICES — editorial index (no identical icon grid)
   ───────────────────────────────────────────── */
/* Ljusa sektioner: ett svagt varmt "verkstadsljus" uppifrån ger djup
   (jämn toning, ingen textur eller rutnät enligt designbeslutet). */
.services-section, .faq-section {
  background: radial-gradient(90% 60% at 18% 0%, oklch(0.995 0.008 80 / 0.95), transparent 70%), var(--paper-100);
}
.service-list { display: flex; flex-direction: column; }
.service-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--sp-4); padding: var(--sp-4) var(--sp-2);
  border-top: 1px solid var(--paper-200);
  transition: background var(--t);
}
.service-list .service-card:last-child { border-bottom: 1px solid var(--paper-200); }
.service-card:hover { background: var(--paper-50); }
.service-num {
  font-size: var(--fs-spec); font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em; color: var(--text-muted); width: 2.4ch;
  transition: color var(--t);
}
.service-card:hover .service-num { color: var(--accent-ink); }
.service-main { min-width: 0; }
.service-card h3 {
  font-size: var(--fs-md); font-weight: 700; color: var(--text-strong);
  letter-spacing: -0.02em; margin-bottom: 3px;
}
.service-card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
.service-link {
  font-size: var(--fs-sm); font-weight: 700; color: var(--accent-ink);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 4px; transition: gap var(--t);
}
.service-card:hover .service-link { gap: 9px; }
.service-link--urgent { color: var(--danger-ink); }
.service-card--urgent { background: var(--accent-tint); }
.service-card--urgent:hover { background: var(--accent-tint-2); }
.service-tag {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--danger-ink);
  border: 1px solid color-mix(in oklch, var(--danger-ink) 45%, transparent);
  padding: 3px 8px; border-radius: var(--badge-shape); margin-left: 9px; white-space: nowrap;
}

/* ─────────────────────────────────────────────
   PHOTO GALLERY — full-bleed workshop strip, cut at the same
   1° as the brands sash (recurring racing-sash motif)
   ───────────────────────────────────────────── */
.photo-gallery {
  --cut: 1.746vw;
  line-height: 0; background: var(--ink-900);
  position: relative; z-index: 2;
  margin: calc(-1 * var(--cut)) 0;
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
.photo-gallery::before,
.photo-gallery::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg,
    transparent 1%, oklch(0.66 0.19 40 / 0.55) 30%,
    oklch(0.745 0.165 46 / 0.75) 50%, oklch(0.66 0.19 40 / 0.55) 70%, transparent 99%);
  box-shadow: 0 0 14px 2px oklch(0.66 0.19 40 / 0.35);
  transform: rotate(-1deg); pointer-events: none;
}
.photo-gallery::before { top: calc(var(--cut) / 2 - 1px); }
.photo-gallery::after  { bottom: calc(var(--cut) / 2 - 1px); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); height: clamp(220px, 26vw, 340px); gap: 2px; }
.gallery-item { position: relative; overflow: hidden; margin: 0; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sp-5) var(--sp-3) calc(var(--sp-3) + var(--cut, 0px));
  background: linear-gradient(transparent, oklch(0.1 0.01 52 / 0.8));
  color: var(--on-dark); font-size: var(--fs-spec); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
}

/* ─────────────────────────────────────────────
   WHY — substantial local proof (no icon circles)
   ───────────────────────────────────────────── */
/* Mörka sektioner: ett diskret varmt strålkastarljus bakom rubriken */
.why-section, .reviews-section {
  background: radial-gradient(70% 55% at 12% 0%, oklch(0.66 0.19 40 / 0.075), transparent 70%), var(--ink-850);
  color: var(--on-dark-body);
}
/* Riktigt foto från butiken (panorama, ren beskärning utan svarta kanter) */
.shop-panorama { position: relative; margin: var(--sp-5) 0 0; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-900); box-shadow: var(--sh-md); }
.shop-panorama img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 516; object-fit: cover; }
.shop-panorama figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-5) var(--sp-4) var(--sp-3);
  font-size: var(--fs-xs); font-weight: 600; color: var(--on-dark);
  background: linear-gradient(transparent, oklch(0.1 0.01 52 / 0.78));
}
@media (max-width: 600px) {
  /* Smal skärm: visa mittpartiet (disken och väntrummet) högre i stället för en tunn remsa */
  .shop-panorama img { aspect-ratio: 16 / 9; object-position: 58% center; }
}
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--sp-5); }
.why-card { padding: var(--sp-5) var(--sp-5) var(--sp-5) 0; border-top: 1px solid var(--ink-700); }
.why-card + .why-card { padding-left: var(--sp-5); border-left: 1px solid var(--ink-700); }
.why-num {
  display: inline-block; margin-bottom: var(--sp-3);
  font-size: 2.4rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  transform: skewX(-8deg);
  color: color-mix(in oklch, var(--accent-bright) 45%, transparent);
}
@supports (-webkit-text-stroke: 1px black) {
  .why-num {
    color: transparent;
    -webkit-text-stroke: 1.3px color-mix(in oklch, var(--accent-bright) 60%, transparent);
  }
}
.why-card h3 { font-size: var(--fs-md); font-weight: 700; color: var(--on-dark); margin-bottom: var(--sp-2); letter-spacing: -0.02em; }
.why-card p { font-size: var(--fs-sm); color: var(--on-dark-body); line-height: 1.62; }
.why-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }

/* ─────────────────────────────────────────────
   CTA ANCHOR — designed dark + orange conversion peak
   ───────────────────────────────────────────── */
.cta-section { background: var(--ink-900); color: var(--on-dark-body); position: relative; overflow: hidden; }
.cta-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  /* A quiet photographic layer; the left text column remains shaded. */
  background:
    linear-gradient(100deg,
      oklch(0.145 0.008 52 / 0.97) 0%,
      oklch(0.145 0.008 52 / 0.94) 38.2%,
      oklch(0.145 0.008 52 / 0.8) 61.8%,
      oklch(0.145 0.008 52 / 0.56) 100%),
    url('img/din-dackkompis-butik-1600.webp');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
/* Mobile: no room for a solid left band, so the shop becomes a warm whisper
   from below and text contrast stays unconditionally safe. */
@media (max-width: 768px) {
  .cta-section::before {
    background:
      linear-gradient(180deg,
        oklch(0.145 0.008 52 / 0.96) 0%,
        oklch(0.145 0.008 52 / 0.92) 61.8%,
        oklch(0.145 0.008 52 / 0.76) 100%),
      url('img/din-dackkompis-butik-1024.webp');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
.cta-block { position: relative; max-width: 61.8%; }
@media (max-width: 768px) { .cta-block { max-width: 100%; } }
.cta-title {
  font-size: var(--fs-xl); font-weight: 300; line-height: 1.05;
  letter-spacing: -0.034em; color: var(--on-dark); margin-bottom: var(--sp-4);
}
.cta-title strong { font-weight: 800; color: var(--accent-bright); }
.cta-sub { font-size: var(--fs-md); color: var(--on-dark-body); max-width: 54ch; line-height: 1.58; margin-bottom: var(--sp-6); }
.cta-phone {
  display: inline-flex; align-items: baseline; gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.cta-phone-label { font-size: var(--fs-spec); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-muted); }
.cta-phone-num {
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4rem); font-weight: 300;
  letter-spacing: -0.03em; color: var(--on-dark);
  font-variant-numeric: tabular-nums; transition: color var(--t);
}
.cta-phone:hover .cta-phone-num { color: var(--accent-bright); }
.cta-phone-num { position: relative; }
.cta-phone-num::after {
  content: ''; position: absolute; left: 0.04em; right: 0.04em; bottom: -0.08em;
  height: 2px; background: var(--accent-bright);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.55s var(--ease);
}
.cta-phone:hover .cta-phone-num::after { transform: scaleX(1); }
.cta-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.cta-hours {
  display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-6);
  padding-top: var(--sp-5); border-top: 1px solid var(--ink-700);
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.cta-hours div { display: flex; flex-direction: column; gap: 3px; }
.cta-hours span { color: var(--on-dark-muted); font-size: var(--fs-spec); letter-spacing: 0.1em; text-transform: uppercase; }
.cta-hours strong { color: var(--on-dark); font-weight: 600; }

/* ─────────────────────────────────────────────
   OUTLET
   ───────────────────────────────────────────── */
.outlet-section { background: var(--paper-50); }
.outlet-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.filter-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  padding: 0 18px; border-radius: var(--choice-shape); font-size: var(--fs-sm);
  font-weight: 600; color: var(--text-muted);
  background: transparent; border: 1.5px solid var(--field-line-light);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.filter-btn:hover { border-color: var(--accent-line); color: var(--accent-ink); }
.filter-btn.active { background: var(--ink-850); border-color: var(--ink-850); color: var(--on-dark); }
.filter-btn:not(:has(svg))::before { content: ''; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
.filter-btn.active::before { background: var(--accent-bright); border-color: var(--accent-bright); }

.outlet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.outlet-loading, .outlet-empty { grid-column: 1 / -1; text-align: center; }
.outlet-loading { padding: var(--sp-7); color: var(--text-muted); font-size: var(--fs-sm); }

.outlet-card {
  background: var(--paper-50); border: 1px solid var(--paper-200);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t);
}
.outlet-card:hover {
  transform: translateY(-4px); border-color: var(--accent-line);
  box-shadow: var(--sh-md), 0 8px 30px -12px oklch(0.66 0.19 40 / 0.25);
}
.outlet-card.hidden { display: none; }
/* Annonsbilden visas alltid hel (contain) i en fast 4:3-ram, oavsett om
   ägaren fotat stående, liggande eller kvadratiskt. En suddig kopia av
   samma bild fyller kanterna i stället för svarta fält. */
.outlet-img { position: relative; aspect-ratio: 4 / 3; background: var(--ink-800); overflow: hidden; isolation: isolate; }
.outlet-img-bg {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.25); filter: blur(18px) saturate(1.1) brightness(0.72);
}
.outlet-product-img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform var(--t-slow); }
.outlet-card:hover .outlet-product-img { transform: scale(1.03); }
.outlet-img-fallback {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px; background: var(--ink-800);
}
.outlet-img-fallback svg { stroke: var(--ink-600); }
.outlet-img-fallback span { font-size: var(--fs-spec); font-weight: 600; color: var(--on-dark-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.outlet-badge {
  position: absolute; top: 12px; left: 12px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 6px 10px; border-radius: 4px 10px 10px 4px;
  color: var(--text-strong); background: var(--paper-100); border: 1px solid var(--paper-300);
  display: inline-flex; align-items: center; gap: 7px;
}
.outlet-badge::before { content: ''; width: 10px; height: 10px; border: 1px solid var(--accent-ink); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--paper-100); background: var(--accent-ink); }
.outlet-badge--sista { color: var(--danger); }
.outlet-stock {
  position: absolute; bottom: 10px; left: 12px; font-size: var(--fs-spec);
  font-weight: 600; color: var(--on-dark); background: oklch(0.1 0.01 52 / 0.66);
  padding: 3px 9px; border-radius: 5px; backdrop-filter: blur(3px);
}
.outlet-stock--few { color: var(--gold); }
.outlet-card-body { padding: var(--sp-4); }
.outlet-brand {
  font-size: var(--fs-spec); font-weight: 600; color: var(--accent-ink);
  text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 5px;
}
.outlet-title { font-size: var(--fs-md); font-weight: 700; color: var(--text-strong); letter-spacing: -0.02em; margin-bottom: 4px; }
.outlet-spec {
  font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-2);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.outlet-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; margin-bottom: var(--sp-3); }
.outlet-pricing { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: var(--sp-3); }
/* Outletpris: rea-röd och tydlig, men aldrig "rea" eller överstruket pris
   (prisinformationslagen 7 a §). Texten om vad som ingår står under. */
.outlet-price { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--paper-300); }
.outlet-price-tag {
  display: inline-flex; align-items: center; padding: 4px 9px; border-radius: var(--badge-shape);
  font-size: var(--fs-spec); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: var(--danger-ink);
}
.outlet-price-amount {
  font-size: 1.75rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.025em;
  color: var(--danger-ink); font-variant-numeric: tabular-nums;
}
.outlet-price-ask { font-size: var(--fs-md); font-weight: 700; color: var(--text-strong); }
.outlet-price-note { flex-basis: 100%; font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; color: var(--text-body); white-space: pre-line; }
.outlet-price-note::before { content: '✓ '; color: var(--danger-ink); font-weight: 800; }
.outlet-price--dark { border-top-color: var(--ink-700); margin-bottom: var(--sp-4); }
.outlet-price--dark .outlet-price-amount { color: oklch(0.74 0.17 33); font-size: 2rem; }
.outlet-price--dark .outlet-price-ask { color: var(--on-dark); }
.outlet-price--dark .outlet-price-note { color: var(--on-dark-body); }
.outlet-price--dark .outlet-price-note::before { color: oklch(0.74 0.17 33); }
.outlet-price-old { font-size: var(--fs-sm); color: var(--text-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.outlet-price-new {
  font-size: 1.65rem; font-weight: 700; color: var(--text-strong);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.outlet-savings {
  font-size: var(--fs-spec); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent-ink);
  border: 1px solid var(--accent-line); padding: 3px 9px; border-radius: var(--badge-shape);
}
.outlet-actions { display: flex; gap: var(--sp-2); }
.outlet-actions .btn { flex: 1; }
.outlet-empty {
  padding: var(--sp-8) var(--sp-4);
  border: 1px solid var(--paper-200); border-radius: var(--r-lg);
  background: var(--paper-100);
}
.outlet-empty-icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--paper-200);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-4); color: var(--text-muted);
}
.outlet-empty h3 { font-size: var(--fs-lg); font-weight: 700; color: var(--text-strong); margin-bottom: var(--sp-2); }
.outlet-empty p { color: var(--text-muted); font-size: var(--fs-sm); max-width: 42ch; margin: 0 auto var(--sp-4); line-height: 1.55; }
.outlet-none:not(:empty) { margin-top: var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); }
.outlet-none a { color: var(--accent-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
body.nav-open #cbToggle, body.nav-open #cbWindow { visibility: hidden; }   /* chatten ska inte ligga över öppen meny */
.outlet-section.is-empty { padding-bottom: var(--sp-7); }
.outlet-section.is-empty .outlet-filters,
.outlet-section.is-empty .outlet-footer { display: none; }
.outlet-section.is-empty .outlet-empty {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-5); text-align: left;
}
.outlet-section.is-empty .outlet-empty-icon { display: none; }
.outlet-section.is-empty .outlet-empty h3 { font-size: var(--fs-md); margin-bottom: 4px; }
.outlet-section.is-empty .outlet-empty p { margin: 0; max-width: 52ch; }
.outlet-footer { text-align: center; margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--paper-200); }
.outlet-footer p { color: var(--text-muted); margin-bottom: var(--sp-3); font-size: var(--fs-sm); }

/* ─────────────────────────────────────────────
   FORMS
   ───────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); }
.form-group label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); }
.required { color: var(--accent-ink); }
.optional { color: var(--text-muted); font-weight: 400; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 13px 15px; background: var(--paper-50);
  border: 1.5px solid var(--field-line-light); border-radius: var(--control-r);
  font-size: var(--fs-sm); color: var(--text-strong);
  transition: border-color var(--t), box-shadow var(--t);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint);
}
.form-group input.error, .form-group textarea.error { border-color: var(--danger); }
.form-group textarea { resize: vertical; }
.field-error { font-size: var(--fs-xs); color: var(--danger); display: none; margin-top: 2px; }
.field-error.visible { display: block; }
.form-consent { margin: var(--sp-3) 0; }
.form-consent-label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.form-consent-label input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; accent-color: var(--accent); }
.form-consent-label a { color: var(--accent-ink); font-weight: 600; }

/* ─────────────────────────────────────────────
   REVIEWS — honest social proof (no fabricated content)
   ───────────────────────────────────────────── */
.reviews-section { padding: var(--sp-7) 0; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
.reviews-grid:empty { display: none; } /* tomt tills reviews.js kopplas till Google */
.review-card {
  background: var(--ink-800); border: 1px solid var(--ink-700);
  border-radius: var(--r-lg); padding: var(--sp-5);
  transition: transform var(--t-slow), border-color var(--t);
}
.review-card:hover { transform: translateY(-3px); border-color: var(--accent-line); }
.review-header { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-3); }
.review-avatar {
  width: 42px; height: 42px; background: var(--accent-press);
  color: oklch(0.99 0.01 84); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem; flex-shrink: 0;
}
.review-name { font-weight: 700; color: var(--on-dark); font-size: var(--fs-sm); }
.review-stars { color: var(--gold); font-size: var(--fs-sm); letter-spacing: 1px; }
.review-text { font-size: var(--fs-sm); color: var(--on-dark-body); line-height: 1.65; margin-bottom: var(--sp-3); }
.review-source { font-size: var(--fs-xs); color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.review-meta { display: flex; flex-direction: column; gap: 3px; }

/* Real Google rating summary (sourced, sets .rating-score/.rating-count hooks) */
.reviews-summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-5); padding: var(--sp-5);
  background: linear-gradient(180deg, color-mix(in oklch, var(--ink-800) 85%, var(--ink-700)), var(--ink-800));
  border: 1px solid var(--ink-700); border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.05), 0 21px 55px -21px oklch(0.06 0.01 52 / 0.7);
}
.reviews-score { display: flex; align-items: baseline; gap: 5px; line-height: 1; font-variant-numeric: tabular-nums; }
.reviews-score .rating-score {
  font-size: clamp(2.6rem, 5vw, 3.4rem); font-weight: 800;
  color: var(--on-dark); letter-spacing: -0.02em;
}
.reviews-score-out { font-size: var(--fs-md); font-weight: 600; color: var(--on-dark-muted); }
.reviews-score-meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Honest star meter: dim track + gold fill clipped to the actual rating */
.reviews-stars { position: relative; display: inline-block; color: oklch(0.42 0.03 78); font-size: 1.15rem; letter-spacing: 3px; line-height: 1.2; }
.reviews-stars-fill {
  position: absolute; inset: 0; overflow: hidden; white-space: nowrap;
  color: var(--gold);
}
.rating-count { font-size: var(--fs-sm); color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.reviews-note { max-width: 72ch; margin: var(--sp-3) auto 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--on-dark-muted); text-align: center; }
.reviews-summary-cta { flex-shrink: 0; }
.reviews-cta { display: flex; justify-content: center; margin-top: var(--sp-6); }
.reviews-cta .btn { min-width: 0; max-width: 100%; }
@media (max-width: 640px) {
  .reviews-summary { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); padding: var(--sp-4); }
  .reviews-summary-cta { grid-column: 1 / -1; width: 100%; margin-top: var(--sp-1); }
  .reviews-score .rating-score { font-size: 2.6rem; }
  .rating-count { font-size: var(--fs-xs); line-height: 1.5; }
  .review-card { padding: var(--sp-4); }
  .reviews-cta .btn { width: 100%; padding-inline: var(--sp-3); font-size: var(--fs-sm); }
}

.reviews-invite {
  grid-column: 1 / -1; max-width: 640px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  border: 1px solid var(--ink-700); border-radius: var(--r-lg);
  background: var(--ink-800); box-shadow: var(--sh-md);
}
.reviews-invite-stars { color: var(--gold); font-size: 1.7rem; letter-spacing: 6px; line-height: 1; }
.reviews-invite p { font-size: var(--fs-md); color: var(--on-dark); max-width: 46ch; line-height: 1.6; }
.reviews-invite .btn { margin-top: var(--sp-2); }
.rating-score, .rating-count { font-variant-numeric: tabular-nums; }
.rating-score { font-weight: 700; color: var(--on-dark); }

/* ─────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; margin-top: var(--sp-5); }
.faq-item { border-top: 1px solid var(--paper-300); border-radius: 3px; transition: background var(--t); }
/* Mjuk markering av raden man pekar på eller har öppnat */
.faq-item:hover, .faq-item.open { background: color-mix(in oklch, var(--paper-50) 72%, transparent); }
.faq-list .faq-item:last-child { border-bottom: 1px solid var(--paper-300); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-4) var(--sp-2); font-size: var(--fs-md);
  font-weight: 600; color: var(--text-strong); text-align: left;
  transition: color var(--t);
}
.faq-question:hover { color: var(--accent-ink); }
.faq-item.open .faq-question { color: var(--accent-ink); }
.faq-question { min-height: 55px; }
.faq-icon {
  position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--paper-300); transition: border-color var(--t), background var(--t), transform var(--t-slow);
}
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.8px; border-radius: 2px;
  background: var(--text-muted); transform: translate(-50%, -50%); transition: transform var(--t-slow), background var(--t);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-question:hover .faq-icon { border-color: var(--accent-line); }
.faq-item.open .faq-icon { background: var(--accent-press); border-color: var(--accent-press); transform: rotate(180deg); }
.faq-item.open .faq-icon::before, .faq-item.open .faq-icon::after { background: oklch(0.99 0.012 84); }
.faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow); }
.faq-answer.open { grid-template-rows: 1fr; }
.faq-answer > p { overflow: hidden; padding: 0 var(--sp-2); font-size: var(--fs-sm); color: var(--text-body); line-height: 1.7; min-height: 0; max-width: 64ch; }
.faq-answer.open > p { padding-bottom: var(--sp-4); }
.faq-answer a { color: var(--accent-ink); font-weight: 600; }

/* ─────────────────────────────────────────────
   CONTACT
   ───────────────────────────────────────────── */
.contact-section { background: var(--paper-50); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--sp-6); align-items: start; }
/* precision spec sheet — hairline-divided label/value rows, no icon chips */
.contact-spec { display: flex; flex-direction: column; }
.contact-spec-row {
  display: grid; grid-template-columns: minmax(108px, 0.3fr) 1fr;
  gap: var(--sp-2) var(--sp-5); align-items: baseline;
  padding: var(--sp-4) 0; border-top: 1px solid var(--paper-200);
}
.contact-spec-row:first-child { border-top: 0; padding-top: 0; }
.contact-spec dt {
  font-size: var(--fs-spec); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-muted);
}
.contact-spec dd { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.contact-spec dd p { font-size: var(--fs-base); color: var(--text-strong); line-height: 1.5; margin: 0; }
.contact-link { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; }
.contact-phone { font-size: 1.45rem; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.contact-note { font-size: var(--fs-xs); color: var(--text-muted); }
.hours-table { display: flex; flex-direction: column; gap: 6px; }
.hours-row { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.hours-row span:first-child { color: var(--text-muted); }
.hours-row span:last-child { font-weight: 600; color: var(--text-strong); }
.hours-row.closed span { color: var(--text-muted); font-weight: 400; }
/* Phones: stack label over value so the spec sheet never squeezes/wraps */
@media (max-width: 480px) {
  .contact-spec-row { grid-template-columns: 1fr; gap: 5px; padding: var(--sp-3) 0; }
}
.contact-cta-group { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--paper-200); }
.contact-map { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-md); aspect-ratio: 1.618 / 1; background: var(--ink-800); position: relative; }
.contact-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.js-ready .map-pin { transform-box: fill-box; transform-origin: 50% 100%; animation: pinDrop 2.6s var(--ease) infinite; }
@keyframes pinDrop { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-8px); } 80% { transform: none; } }
.map-consent {
  position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  padding: var(--sp-4); border-radius: var(--r-lg);
  background: oklch(0.145 0.008 52 / 0.86); border: 1px solid var(--ink-700);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.map-consent-title { font-size: var(--fs-md); font-weight: 700; color: var(--on-dark); }
.map-consent-text { font-size: var(--fs-xs); color: var(--on-dark-body); margin: 4px 0 var(--sp-3); line-height: 1.5; }
.map-consent-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.contact-map.is-loaded .map-consent, .contact-map.is-loaded .map-art { display: none; }

/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */
.footer { background: var(--ink-900); color: var(--on-dark-muted); border-top: 1px solid oklch(1 0 0 / 0.05); padding-top: var(--sp-6); overflow: hidden; }
.footer-masthead {
  display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  align-items: center; gap: var(--sp-5); padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6); position: relative;
}
.footer-masthead::after { content: ''; position: absolute; bottom: 0; left: 28px; right: 28px; height: 1px; background: var(--ink-700); }
.footer-signature { display: inline-flex; align-items: center; justify-self: start; gap: var(--sp-4); max-width: 100%; }
.footer-signature > img { width: 55px; height: 55px; flex-shrink: 0; }
.footer-signature-name { display: block; color: var(--on-dark); font-size: clamp(1.939rem, 1.3rem + 1.5vw, 3.139rem); font-weight: 350; line-height: 1.1; letter-spacing: -0.045em; }
.footer-signature-name strong { font-weight: 700; }
.footer-signature-name > span { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.1em; color: var(--on-dark-muted); }
.footer-masthead-phone { display: grid; gap: var(--sp-1); justify-self: end; text-align: right; color: var(--on-dark); font-size: var(--fs-lg); font-weight: 500; font-variant-numeric: tabular-nums; }
.footer-masthead-phone > span { font-size: var(--fs-sm); font-weight: 400; color: var(--on-dark-muted); }
.footer-masthead-phone:hover { color: var(--accent-bright); }
@media (max-width: 640px) {
  .footer-masthead { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); }
  .footer-masthead::after { left: 18px; right: 18px; }
  .footer-signature { gap: var(--sp-2); }
  .footer-signature > img { width: 42px; height: 42px; }
  .footer-signature-name { font-size: clamp(1.5rem, 6vw, 1.939rem); }
  .footer-signature-name > span { margin-top: var(--sp-1); font-size: var(--fs-spec); }
  .footer-masthead-phone { justify-self: start; text-align: left; }
}
.footer-inner { display: grid; grid-template-columns: 1.618fr 1fr 1fr 1.618fr; gap: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--ink-700); }
.footer-brand p { font-size: var(--fs-sm); color: var(--on-dark-muted); line-height: 1.65; margin-bottom: var(--sp-3); max-width: 38ch; }
.footer-note { font-size: var(--fs-xs); color: var(--on-dark-muted); display: flex; align-items: center; gap: 8px; }
.footer-note svg { stroke: var(--accent-bright); }
.footer-col .footer-h { font-size: var(--fs-spec); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--on-dark-muted); margin-bottom: var(--sp-3); }
.footer-col ul { display: flex; flex-direction: column; gap: 9px; }
.footer-col ul li a { font-size: var(--fs-sm); color: var(--on-dark-muted); transition: color var(--t); }
.footer-col ul li a:hover { color: var(--on-dark); }
.footer-contact-item { display: flex; align-items: flex-start; gap: 9px; font-size: var(--fs-sm); color: var(--on-dark-muted); margin-bottom: 11px; line-height: 1.5; }
.footer-contact-item svg { flex-shrink: 0; margin-top: 2px; stroke: var(--ink-600); }
.footer-contact-item a { color: var(--on-dark-body); }
.footer-contact-item a:hover { color: var(--accent-bright); }
.footer-hours { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 5px; font-variant-numeric: tabular-nums; }
.footer-hours div { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--on-dark-muted); }
.footer-bottom { padding: var(--sp-4) 0; }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--on-dark-muted); }
.footer-bottom-inner a:hover { color: var(--on-dark); }
.footer-credit { letter-spacing: 0.02em; }
/* Den flytande "Ring nu"-knappen får inte täcka sidfotens nedersta rad */
@media (min-width: 768px) { .footer-bottom { padding-bottom: calc(var(--sp-4) + 72px); } }
.footer-credit strong { font-weight: 700; letter-spacing: 0.12em; color: var(--on-dark-body); }

/* ─────────────────────────────────────────────
   LEGAL PAGES (integritetspolicy.html, cookies.html)
   Same precision voice as the main page: spec label,
   calm measure, real list markers (the reset strips them).
   ───────────────────────────────────────────── */
.legal-page { background: var(--paper-50); padding: var(--sp-7) 0 var(--sp-8); }
.legal-content { max-width: 70ch; }
.section-label {
  display: inline-block; font-size: var(--fs-spec); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-ink);
  margin-bottom: var(--sp-3);
}
.legal-title {
  font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.06; color: var(--text-strong); margin-bottom: var(--sp-2);
}
.legal-meta {
  font-size: var(--fs-sm); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  padding-bottom: var(--sp-5); border-bottom: 1px solid var(--paper-200);
}
.legal-content section { margin-top: var(--sp-6); }
.legal-content h2 {
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.025em;
  color: var(--text-strong); margin-bottom: var(--sp-3);
}
.legal-content h3 {
  font-size: var(--fs-md); font-weight: 700; color: var(--text-strong);
  margin: var(--sp-4) 0 var(--sp-2);
}
.legal-content p { margin-bottom: var(--sp-3); line-height: 1.7; }
.legal-content p:last-child { margin-bottom: 0; }
.legal-content strong { color: var(--text-strong); font-weight: 700; }
.legal-content ul {
  list-style: disc; padding-left: 1.3em;
  margin-bottom: var(--sp-3);
  display: flex; flex-direction: column; gap: 9px;
}
.legal-content li { line-height: 1.6; padding-left: 0.2em; }
.legal-content li::marker { color: var(--accent-ink); }
.legal-content a:not(.btn) {
  color: var(--accent-ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-content a:not(.btn):hover { color: var(--accent-press); }
.legal-back { margin-top: var(--sp-7); }
/* Legal pages have no hamburger: keep the back link inline on phones
   instead of inheriting the off-canvas drawer. */
@media (max-width: 1080px) {
  .nav.nav--static {
    position: static; width: auto; max-width: none; height: auto;
    background: none; border: 0; padding: 0; box-shadow: none;
    flex-direction: row; overflow: visible;
    transform: none; visibility: visible; transition: none;
  }
  .nav--static .nav-link {
    width: auto; border-bottom: 0; border-radius: var(--r-sm);
    font-size: var(--fs-sm); padding: 8px 10px; min-height: 44px;
    white-space: nowrap;
  }
}
@media (max-width: 480px) {
  .nav--static .nav-link-ext { display: none; }
}

/* ─────────────────────────────────────────────
   FLOATING / MOBILE BAR
   ───────────────────────────────────────────── */
.float-call {
  position: fixed; bottom: 28px; right: 24px; z-index: 50;
  display: flex; align-items: center; gap: 9px;
  background: var(--accent-press); color: oklch(0.99 0.012 84);
  min-height: 48px; padding: 8px 21px 8px 8px; border-radius: var(--action-shape); font-size: var(--fs-sm);
  border: 1px solid oklch(1 0 0 / 0.16); font-weight: 750;
  box-shadow: 0 4px 14px oklch(0.12 0.01 52 / 0.22);
  transition: transform var(--t), box-shadow var(--t);
}
.float-call:hover { background: var(--accent-press-h); box-shadow: var(--control-edge); }
.mobile-sticky-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
  background: oklch(0.145 0.008 52 / 0.97);
  border-top: 1px solid var(--ink-700); padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); gap: 10px;
}
.mobile-sticky-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; border-radius: var(--action-shape); font-size: var(--fs-sm);
  font-weight: 700; min-height: 48px; transition: opacity var(--t);
}
.mobile-sticky-btn:active { opacity: 0.82; }
.mobile-sticky-btn--primary {
  color: oklch(0.99 0.012 84); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.16);
  background: linear-gradient(180deg, oklch(0.54 0.152 39), var(--accent-press) 52%, oklch(0.475 0.145 36.5));
}
/* "Hitta däck" på mobil: samma löpande guldkant som i headern, mörk yta så
   att "Ring oss" förblir huvudknappen. Bara transform animeras. */
.mobile-sticky-btn--secondary {
  position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark);
  background: color-mix(in oklch, var(--accent-bright) 38%, var(--ink-850));
}
.mobile-sticky-btn--secondary::before {
  content: ''; position: absolute; z-index: -2; left: 50%; top: 50%; width: 150%; aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0 50%, oklch(0.8 0.14 62 / 0.85) 64%, oklch(0.995 0.04 92) 74%, oklch(0.84 0.13 70 / 0.9) 81%, transparent 92%);
  transform: translate(-50%, -50%) rotate(0deg); animation: finderBeam 4.2s linear infinite;
}
.mobile-sticky-btn--secondary::after {
  content: ''; position: absolute; z-index: -1; inset: 1.5px; border-radius: inherit;
  background: linear-gradient(180deg, oklch(0.25 0.014 52), var(--ink-850));
}
.mobile-sticky-btn--secondary > svg { color: oklch(0.86 0.12 72); }
@media (prefers-reduced-motion: reduce) { .mobile-sticky-btn--secondary::before { animation: none; } }
.mobile-sticky-btn > svg { flex-shrink: 0; box-sizing: content-box; padding: 5px; border: 1px solid oklch(1 0 0 / 0.22); border-radius: 50%; }
/* Chat open → drop the sticky bar so the bottom thumb zone never collides */
body:has(#cbWindow.cb-open) .mobile-sticky-bar { display: none; }

/* ─────────────────────────────────────────────
   REVEAL — real, subtle, reduced-motion-safe
   ───────────────────────────────────────────── */
/* Hidden only once JS is confirmed (body.js-ready). No JS → visible (SEO). */
.js-ready .reveal, .js-ready [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.js-ready .reveal.visible, .js-ready [data-reveal].visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

a, button, [role="button"], input, select, textarea, label {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .section { padding: var(--sp-7) 0; }
  .outlet-grid, .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr; }
  .why-card, .why-card + .why-card { padding: var(--sp-4) 0; border-left: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .contact-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .contact-map { aspect-ratio: auto; height: 380px; }
  .hero-visual { width: min(100%, 320px); }
}

/* Off-canvas navigation from tablet width down, so the desktop bar
   never has to squeeze six links, the badge and the phone button. */
@media (max-width: 1080px) {
  .nav {
    position: fixed; top: 0; right: 0; z-index: 100;
    width: min(86vw, 360px); height: 100dvh;
    background: var(--ink-850); border-left: 1px solid var(--ink-700);
    flex-direction: column; align-items: stretch;
    padding: calc(var(--header-h) + var(--sp-4)) var(--sp-4) var(--sp-5); gap: 0;
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--t-slow), visibility 0s linear 0.52s;
    box-shadow: -30px 0 60px oklch(0.08 0.01 52 / 0.5);
  }
  .nav.open { transform: none; visibility: visible; transition: transform var(--t-slow), visibility 0s; }
  .nav-link {
    font-size: var(--fs-md); padding: 0 var(--sp-2); min-height: 55px;
    display: flex; align-items: center;
    border-bottom: 1px solid var(--ink-700); border-radius: 0;
  }
  .nav-link--finder { margin: var(--sp-2) 0; padding: 0 var(--sp-3); border-radius: var(--r-lg); border-bottom: 0; }
  .nav-link.nav-link--finder::before { width: 140%; }
  .js-ready .nav.open .nav-link, .js-ready .nav.open .nav-call { animation: navIn 0.52s var(--ease) both; }
  .nav.open > :nth-child(2) { animation-delay: 0.04s; }
  .nav.open > :nth-child(3) { animation-delay: 0.08s; }
  .nav.open > :nth-child(4) { animation-delay: 0.12s; }
  .nav.open > :nth-child(5) { animation-delay: 0.16s; }
  .nav.open > :nth-child(6) { animation-delay: 0.2s; }
  .nav.open > :nth-child(7) { animation-delay: 0.26s; }
  .nav-call { display: inline-flex; margin-top: var(--sp-5); min-height: 52px; }
  .hamburger { display: flex; }
  .nav-overlay { display: block; }
}
@keyframes navIn { from { opacity: 0; transform: translateX(21px); } to { opacity: 1; transform: none; } }

@media (max-width: 768px) {
  :root { --header-h: 64px; }
  .container { padding: 0 18px; }
  .section { padding: var(--sp-6) 0; }
  .desktop-only { display: none; }
  .phone-btn { display: none; }
  .open-now-badge { display: none !important; }

  .hero { min-height: auto; padding: var(--sp-6) 0 var(--sp-7); }
  .hero-inner { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hero-visual { display: none; }
  .hero-sub { font-size: var(--fs-base); }
  .hero-meta { gap: var(--sp-2); }
  .hero-meta-sep { display: none; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); height: 360px; }
  .outlet-grid, .reviews-grid { grid-template-columns: 1fr; }
  .outlet-filters { gap: 7px; }
  .footer-inner { grid-template-columns: 1fr; gap: var(--sp-5); }
  .contact-map { height: 340px; }
  .float-call { display: none; }
  .mobile-sticky-bar { display: flex; }
  body:has(#cbToggle) .mobile-sticky-bar { padding-right: 76px; }
  .mobile-sticky-btn { padding: 13px 8px; gap: 6px; font-size: var(--fs-xs); }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 480px) {
  .container { padding: 0 15px; }
  .section { padding: var(--sp-5) 0; }
  .hero-cta-group { flex-direction: column; }
  .hero-cta-group .btn { width: 100%; }
  .service-card { grid-template-columns: auto 1fr; gap: var(--sp-3); }
  .service-link { grid-column: 2; margin-top: 4px; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }
  .why-cta { flex-direction: column; }
  .why-cta .btn { width: 100%; }
  .outlet-actions { flex-direction: column; }
  .btn { min-height: 46px; }
  .filter-btn { min-height: 44px; }
}

@media (max-width: 360px) {
  .header-inner { gap: 8px; }
  .logo { gap: 8px; }
  .logo-name { font-size: 1.125rem; }
  .logo-tagline { font-size: 0.6875rem; letter-spacing: 0.1em; }
  .mobile-sticky-bar { padding: 8px 10px; gap: 7px; }
  body:has(#cbToggle) .mobile-sticky-bar { padding-right: 68px; }
  .mobile-sticky-btn { font-size: var(--fs-xs); padding: 12px 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   CINEMATIC LAYER — orchestrated load, signature motion,
   priority features, Hjulinställning showcase. All reduced-motion
   safe and JS-gated (no JS → everything visible & static).
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero: orchestrated page-load stagger ── */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
/* Short and front-loaded: the headline resolves within ~0.6s and the
   call button is never hidden at all (it is the page's goal).
   .hero-shown (script.js) stänger av inramningen när sidan redan har målats
   innan skripten laddats klart: då ska synlig text inte försvinna och komma
   tillbaka. Ren CSS utan .js-ready provades men gav sämre LCP och TBT. */
.js-ready .hero [data-load] { animation: riseIn 0.7s var(--ease) both; }
.js-ready .hero [data-load="1"] { animation-delay: 0s; }
.js-ready .hero [data-load="2"] { animation-delay: 0.06s; }
.js-ready .hero [data-load="3"] { animation-delay: 0.12s; }
.js-ready .hero [data-load="4"] { animation-delay: 0.18s; }
.js-ready .hero [data-load="6"] { animation-delay: 0.3s; }
.js-ready .hero-cta-group { animation: ctaIn 0.6s var(--ease) 0.2s both; }
@keyframes ctaIn { from { transform: translateY(13px); } to { transform: none; } }
.hero-title .line { display: block; }

/* ── Hero visual: 3D tilt host ── */
@keyframes spin { to { transform: rotate(360deg); } }
.hero-inner { perspective: 1300px; }
.hero-visual { transition: transform 0.5s var(--ease); will-change: transform; }

/* ── Scroll reveals (JS adds .reveal then .visible; stagger via
   inline transition-delay set in script.js) ── */
.js-ready .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js-ready .reveal.visible { opacity: 1; transform: none; }

/* ── Magnetic CTA ── */

/* ── Brand marquee (refined, masked, pause on hover) ── */
.brands-track {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.brands-inner {
  flex-wrap: nowrap; width: max-content; justify-content: flex-start;
  gap: clamp(var(--sp-5), 6vw, var(--sp-8));
  animation: marquee 42s linear infinite;
}
.brands-section:hover .brands-inner,
.brands-section:focus-within .brands-inner,
.brands-section.is-paused .brands-inner { animation-play-state: paused; }
.brand-logo[aria-hidden="true"] { display: inline-flex; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Priority feature blocks ── */
.features {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4); margin-bottom: var(--sp-6);
}
.feature {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper-50); border: 1px solid var(--paper-200);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t);
}
.feature:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--accent-line); }
/* Bildens nederkant tonas svagt mot kortet: djup utan att dölja fotot */
.feature-img { position: relative; }
.feature-img::after {
  content: ''; position: absolute; inset: auto 0 0; height: 38%; pointer-events: none;
  background: linear-gradient(transparent, oklch(0.15 0.01 52 / 0.16));
}
.feature-rank {
  position: absolute; top: 12px; left: 16px; z-index: 2;
  font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums;
  font-style: italic; letter-spacing: -0.01em; line-height: 1;
  color: oklch(0.99 0.01 84);
  mix-blend-mode: difference;
}
.feature-img { aspect-ratio: 1.618 / 1; overflow: hidden; background: var(--ink-800); }
.feature-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.feature:hover .feature-img img { transform: scale(1.06); }
.feature-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.feature-body h3 { font-size: var(--fs-lg); font-weight: 700; color: var(--text-strong); letter-spacing: -0.025em; }
.feature-body p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; flex: 1; }
.feature-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--accent-ink);
  transition: gap var(--t);
}
.feature:hover .feature-link { gap: 11px; }

/* Highlighted feature (Hjulinställning) — spans full width, dark, alive */
.feature--hl {
  grid-column: 1 / -1; flex-direction: row; align-items: center;
  gap: var(--sp-5); padding: var(--sp-6);
  background: var(--ink-850); border-color: var(--ink-700); color: var(--on-dark-body);
  overflow: hidden;
}
.feature--hl::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 90% at 88% 50%, var(--accent-tint) 0%, transparent 60%);
}
.feature--hl:hover { transform: translateY(-3px); border-color: var(--accent-line); }
.feature--hl .feature-rank {
  position: static; mix-blend-mode: normal;
  font-size: 2.2rem; transform: skewX(-8deg); display: inline-block;
  color: color-mix(in oklch, var(--accent-bright) 45%, transparent);
}
@supports (-webkit-text-stroke: 1px black) {
  .feature--hl .feature-rank {
    color: transparent;
    -webkit-text-stroke: 1.3px color-mix(in oklch, var(--accent-bright) 60%, transparent);
  }
}
.feature--hl .feature-body { padding: 0; gap: 10px; max-width: 60ch; position: relative; z-index: 1; }
.feature--hl .feature-body h3 { font-size: var(--fs-xl); color: var(--on-dark); font-weight: 700; }
.feature--hl .feature-body p { color: var(--on-dark-body); font-size: var(--fs-base); }
.feature--hl .feature-link { color: var(--accent-bright); }
.feature-tag {
  position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 2;
  font-size: var(--fs-spec); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-bright);
  border: 1px solid var(--accent-line); padding: 5px 11px; border-radius: var(--badge-shape);
}
.feature-spark {
  flex-shrink: 0; width: clamp(120px, 16vw, 190px); color: var(--accent);
  position: relative; z-index: 1;
}
.feature-spark svg { width: 100%; height: auto; }


/* ── "Vi hjälper dig också med" list ── */
.service-more { margin-top: var(--sp-6); }
.service-more-head {
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.025em;
  color: var(--text-strong); margin-bottom: var(--sp-3);
}
.service-card h4 {
  font-size: var(--fs-md); font-weight: 700; color: var(--text-strong);
  letter-spacing: -0.02em; margin-bottom: 3px;
}

/* ── Hjulinställning showcase ── */
.align-section { background: var(--ink-900); color: var(--on-dark-body); overflow: hidden; }
.align-grid { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--sp-7); align-items: center; }
.align-copy h2 { font-size: var(--fs-xl); font-weight: 700; color: var(--on-dark); letter-spacing: -0.03em; margin-bottom: var(--sp-3); }
/* Free-check upsell — confident solid accent callout (the section's hook) */
.align-free {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  margin: 0 0 var(--sp-3); padding: 11px 22px;
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-900);
  background: var(--paper-100); border: 1px solid var(--paper-300); border-radius: var(--badge-shape);
}
.align-free-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: oklch(0.145 0.008 52);
}
.align-free-note {
  font-size: var(--fs-md); font-weight: 600; color: var(--on-dark);
  max-width: 46ch; line-height: 1.5; margin-bottom: var(--sp-5);
}
.align-lead { font-size: var(--fs-md); color: var(--on-dark-body); line-height: 1.6; max-width: 52ch; margin-bottom: var(--sp-5); }
.align-points { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.align-points li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm); color: var(--on-dark-body); line-height: 1.5; }
.align-points svg { stroke: var(--accent-bright); flex-shrink: 0; margin-top: 2px; }
.align-points strong { color: var(--on-dark); font-weight: 700; }
.align-cta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.align-cta-note { font-size: var(--fs-xs); color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.align-visual { display: flex; justify-content: center; }
.align-rig { width: 100%; max-width: 420px; height: auto; }
/* A 7.2s story: cameras measure → front wheels are adjusted to
   straight → readouts turn green "OK". Static (final, aligned) state
   without JS or with reduced motion. */
.ar-wl, .ar-wr, .ar-gl, .ar-gr { transform-box: fill-box; transform-origin: 50% 50%; }
.ar-before { opacity: 0; }
.ar-after  { opacity: 1; }
.js-ready .ar-wl { animation: toeL 7.2s var(--ease-io) infinite; }
.js-ready .ar-wr { animation: toeR 7.2s var(--ease-io) infinite; }
.js-ready .ar-gl { animation: toeL 7.2s var(--ease-io) infinite; }
.js-ready .ar-gr { animation: toeR 7.2s var(--ease-io) infinite; }
.js-ready .ar-before { animation: arBefore 7.2s linear infinite; }
.js-ready .ar-after  { animation: arAfter 7.2s linear infinite; }
.js-ready .ar-beam   { animation: beamFlow 1.1s linear infinite, beamPulse 7.2s linear infinite; }
@keyframes toeL { 0%, 34% { transform: rotate(-5deg); } 56%, 92% { transform: rotate(0deg); } 100% { transform: rotate(-5deg); } }
@keyframes toeR { 0%, 34% { transform: rotate(4deg); }  56%, 92% { transform: rotate(0deg); } 100% { transform: rotate(4deg); } }
@keyframes arBefore { 0%, 50% { opacity: 1; } 54%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes arAfter  { 0%, 50% { opacity: 0; } 56%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes beamFlow { to { stroke-dashoffset: -18; } }
@keyframes beamPulse { 0%, 50% { opacity: 0.9; } 58%, 100% { opacity: 0.25; } }
/* Feature card gauge: the needle settles on 0,0° */
.fs-needle { transform-box: view-box; transform-origin: 60px 60px; }
.js-ready .fs-needle { animation: needle 7.2s var(--ease-io) infinite; }
.js-ready .fs-ring { transform-box: view-box; transform-origin: 60px 60px; animation: spin 40s linear infinite; }
@keyframes needle { 0%, 30% { transform: rotate(-34deg); } 52%, 92% { transform: rotate(0deg); } 100% { transform: rotate(-34deg); } }

@media (max-width: 1024px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .align-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .align-visual { order: -1; }
  .align-rig { max-width: 340px; }
}
@media (max-width: 680px) {
  .features { grid-template-columns: 1fr; }
  .feature--hl { flex-direction: column; align-items: flex-start; padding: var(--sp-5); }
  .feature-spark { width: 110px; }
  .feature-tag { position: static; align-self: flex-start; margin-bottom: 4px; }
}

/* ── Däckhittaren (#hitta-dack) — däckstudio + mått/bil/fälg ──
   Golden split: intro 1fr / hittare 1.618fr; studio art 1.618fr / panel 1fr. */
.finder-section { background: var(--ink-900); color: var(--on-dark-body); overflow: hidden; isolation: isolate; }
.finder-glow {
  position: absolute; inset: -20% -10% auto auto; width: 70%; aspect-ratio: 1; z-index: -1;
  background: radial-gradient(closest-side, oklch(0.66 0.19 40 / 0.16), transparent 70%);
  filter: blur(20px); pointer-events: none;
}
.js-ready .finder-glow { animation: glowDrift 21s var(--ease-io) infinite alternate; }
@keyframes glowDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-13%, 21%) scale(1.13); } }
.finder-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
  gap: var(--sp-6); align-items: start;
}
.finder-intro { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
.finder-intro h2 {
  font-size: var(--fs-xl); font-weight: 700; color: var(--on-dark);
  letter-spacing: -0.03em; line-height: 1.06; margin: var(--sp-3) 0;
}
.finder-lead { font-size: var(--fs-md); color: var(--on-dark-body); line-height: 1.6; max-width: 46ch; }

/* Process: three steps on a drawn rail */
.finder-process { list-style: none; position: relative; margin-top: var(--sp-5); display: grid; gap: var(--sp-4); }
.finder-process::before {
  content: ''; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px;
  background: linear-gradient(var(--accent), var(--accent-line) 60%, transparent);
  transform-origin: top; border-radius: 2px;
}
.js-ready .finder-intro.reveal .finder-process::before { transform: scaleY(0); transition: transform 1.3s var(--ease) 0.3s; }
.js-ready .finder-intro.reveal.visible .finder-process::before { transform: none; }
.finder-process li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.fp-step {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink-850); border: 1px solid var(--accent-line); color: var(--accent-bright);
  box-shadow: 0 0 0 6px var(--ink-900);
}
.finder-process strong { display: block; color: var(--on-dark); font-size: var(--fs-base); font-weight: 700; margin-top: 2px; }
.finder-process span:not(.fp-step) { display: block; font-size: var(--fs-sm); color: var(--on-dark-muted); line-height: 1.5; margin-top: 2px; }
.finder-call {
  display: flex; align-items: flex-start; gap: 10px; margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--ink-700); font-size: var(--fs-sm); color: var(--on-dark-muted); line-height: 1.55;
}
.finder-call a { color: var(--accent-bright); font-weight: 700; font-variant-numeric: tabular-nums; }
.finder-call-dot { width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: var(--ink-600); flex-shrink: 0; }
.finder-call-dot.is-open { background: oklch(0.78 0.15 152); box-shadow: 0 0 0 4px oklch(0.78 0.15 152 / 0.18); animation: pulse 2.4s var(--ease-soft) infinite; }
.finder-call-status { color: var(--on-dark-body); }

/* Card */
.finder {
  /* Reveal/view transitions create a stacking context: keep its menus above the season cards. */
  position: relative; z-index: 2; background: linear-gradient(180deg, var(--ink-850), color-mix(in oklch, var(--ink-850) 70%, var(--ink-900)));
  border: 1px solid var(--ink-700); border-radius: var(--r-xl); padding: var(--sp-4) var(--sp-5) var(--sp-5);
  box-shadow: 0 34px 89px oklch(0.06 0.01 52 / 0.6), inset 0 1px 0 oklch(1 0 0 / 0.04);
}

/* ── Däckstudio ── */
.studio {
  display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); align-items: center;
  gap: var(--sp-3); margin-bottom: var(--sp-4); padding: var(--sp-3);
  border: 1px solid var(--ink-700); border-radius: var(--r-lg);
  background:
    radial-gradient(70% 90% at 30% 50%, oklch(0.66 0.19 40 / 0.09), transparent 70%),
    var(--ink-900);
}
.studio-art { width: 100%; height: auto; max-height: 300px; display: block; overflow: visible; }
.studio-stage .studio-art { margin-top: 0; }
.st-floor { fill: oklch(0 0 0 / 0.45); filter: blur(6px); }
.st-spin { transform-box: view-box; transform-origin: 138px 140px; }
.js-ready .st-spin { animation: wiSpin 28s linear infinite; }
.st-sidetext { font-family: var(--font); font-weight: 800; letter-spacing: 1.6px; fill: var(--on-dark-muted); opacity: 0.55; transition: fill var(--t), opacity var(--t); }
#stCal { filter: drop-shadow(0 1.5px 2px oklch(0 0 0 / 0.5)); }
#stTyre { transition: stroke var(--t); stroke: transparent; stroke-width: 2; }
#stRim { transition: stroke var(--t); stroke: transparent; stroke-width: 2; }
.st-ghost circle { fill: none; stroke: var(--accent-bright); stroke-width: 1.6; stroke-dasharray: 5 4; }
.st-ghost { opacity: 0; transition: opacity var(--t); }
.st-ghost.is-on { opacity: 1; }
.js-ready .st-ghost.is-on circle { animation: ghostMarch 1.2s linear infinite; }
@keyframes ghostMarch { to { stroke-dashoffset: -18; } }
.st-dim { opacity: 0.45; transition: opacity var(--t); }
.st-dim-t { font-family: var(--font); font-size: 12px; font-weight: 800; fill: var(--accent-bright); }
.studio.focus-w #stTyre { stroke: var(--accent-bright); }
.studio.focus-p .st-dim[data-dim="p"], .studio.focus-r .st-dim[data-dim="r"] { opacity: 1; }
.studio.focus-p .st-sidetext { fill: var(--accent-bright); opacity: 0.9; }
.studio.focus-r #stRim { stroke: var(--accent-bright); }
.studio.is-example .studio-art { opacity: 0.78; }

.studio-panel { min-width: 0; }
.studio-tag {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font-size: var(--fs-spec); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.studio-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; flex-shrink: 0; }
.studio.is-example .studio-tag { color: var(--on-dark-muted); }
.studio-code {
  display: flex; align-items: baseline; gap: 3px; margin-top: 6px;
  font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.55rem); font-weight: 300; line-height: 1;
  color: var(--on-dark); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  perspective: 400px;
}
.studio-code b { font-weight: 300; display: inline-block; transition: color var(--t); }
.studio-code i { font-style: normal; color: var(--on-dark-muted); font-size: 0.72em; margin: 0 1px; }
.studio:not(.is-example) .studio-code b { color: var(--on-dark); }
.studio.focus-w [data-part="w"], .studio.focus-p [data-part="p"], .studio.focus-r [data-part="r"] { color: var(--accent-bright); }
.studio-code b.is-flip { animation: flipIn 0.52s var(--ease); }
@keyframes flipIn { from { transform: rotateX(-80deg) translateY(-6px); opacity: 0.2; } to { transform: none; opacity: 1; } }
.studio-legend {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 7px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-muted);
}
.studio-legend span { transition: color var(--t); }
.studio-specs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 13px;
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--ink-700);
}
.studio-specs dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-muted); }
.studio-specs dd { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--on-dark-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.studio-specs dd b { font-size: var(--fs-md); font-weight: 800; color: var(--on-dark); }
.studio-specs > div { transition: color var(--t); }
.studio.focus-p .studio-specs [data-part="p"] dd b, .studio.focus-r .studio-specs [data-part="r"] dd b { color: var(--accent-bright); }
.studio-delta {
  margin-top: var(--sp-2); padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--accent-tint); border: 1px dashed var(--accent-line);
  font-size: var(--fs-xs); color: var(--on-dark-body); line-height: 1.4; font-variant-numeric: tabular-nums;
  animation: riseIn 0.32s var(--ease) both;
}
.sd-code { display: block; font-weight: 800; color: var(--accent-bright); }

/* Segmented tabs with a sliding ink */
.finder-tabs {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  padding: 5px; margin-bottom: var(--sp-3);
  background: var(--ink-900); border: 1px solid var(--ink-700); border-radius: var(--control-r);
}
.finder-tab {
  position: relative; z-index: 1; min-height: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: var(--fs-base); font-weight: 700; color: var(--on-dark-muted);
  border-radius: var(--control-r); transition: color var(--t);
}
.finder-tab:hover { color: var(--on-dark-body); }
.finder-tab[aria-selected="true"] { color: var(--on-dark); }
.finder-tab[aria-selected="true"] .ic { color: var(--accent-bright); }
.finder-tab-ink {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: 50%;
  background: var(--ink-750); border: 1px solid var(--ink-600); border-radius: var(--control-r);
  box-shadow: inset 0 -2px 0 var(--accent-bright);
  transition: transform var(--t-slow), width var(--t-slow);
}

/* Däckmått / Min bil */
.finder-modes { display: flex; gap: 6px; margin-bottom: var(--sp-4); }
.finder-mode {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: var(--choice-shape); border: 1px solid var(--ink-600);
  font-size: var(--fs-sm); font-weight: 700; color: var(--on-dark-muted);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.finder-mode:hover { color: var(--on-dark); border-color: var(--on-dark-muted); }
.finder-mode[aria-pressed="true"] { color: var(--on-dark); border-color: var(--accent); background: var(--ink-750); box-shadow: inset 0 -2px 0 var(--accent-bright);
}
.finder-mode[aria-pressed="true"] .ic { color: var(--accent-bright); }

/* Fields */
.dim-selects {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end; gap: 10px;
}
.dim-sep { font-size: var(--fs-lg); font-weight: 300; color: var(--on-dark-muted); line-height: 52px; }
.dim-field { display: flex; flex-direction: column; min-width: 0; }
.dim-field label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em;
  color: var(--on-dark-body); margin-bottom: 7px;
}
.dim-field .optional { color: var(--on-dark-muted); font-weight: 500; }
.dim-field .required { color: var(--accent-bright); }
.dim-field select, .dim-field input {
  width: 100%; min-height: 52px; padding: 0 14px;
  background: var(--ink-800); color: var(--on-dark);
  border: 1.5px solid var(--field-line-dark); border-radius: var(--control-r);
  font-size: var(--fs-base); font-weight: 600; font-variant-numeric: tabular-nums;
  transition: border-color var(--t), box-shadow var(--t), opacity var(--t);
}
.dim-field input { font-weight: 500; }
.dim-field input::placeholder { color: var(--on-dark-muted); font-weight: 400; }
.dim-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5aca2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.2 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
.dim-field select option, .dim-field select optgroup { background: var(--ink-850); color: var(--on-dark); }
.dim-field select:disabled { opacity: 0.42; cursor: not-allowed; }
.dim-field select:hover:not(:disabled), .dim-field input:hover { border-color: var(--on-dark-muted); }
.dim-field select:focus-visible, .dim-field input:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint-2);
}
.dim-field [aria-invalid="true"] { border-color: oklch(0.70 0.17 30); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Chips (with proportional mini wheels) */
.finder-quick { display: flex; flex-direction: column; gap: 9px; margin-top: var(--sp-4); }
.finder-quick-lbl, .finder-alts-head {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; color: var(--on-dark-muted);
}
.finder-alts-head .ic { color: var(--accent-bright); }
.finder-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  background: var(--ink-800); color: var(--on-dark-body);
  border: 1px solid var(--ink-600); border-radius: var(--choice-shape);
  font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums;
  transition: border-color var(--t), background var(--t), color var(--t), transform var(--t-fast);
}
.chip--wheel { padding-left: 8px; }
.chip:hover { border-color: var(--accent-line); color: var(--on-dark); }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] { background: var(--paper-100); border-color: var(--paper-100); color: var(--text-strong); }
.chip small { font-size: var(--fs-spec); font-weight: 700; color: var(--accent-bright); }
.chip--alt { border-style: dashed; }
.chip--alt:hover, .chip--alt:focus-visible { background: var(--accent-tint); border-style: solid; }
.mini-wheel { flex-shrink: 0; overflow: visible; }
.mini-wheel .mw-t { fill: var(--ink-900); stroke: var(--ink-600); stroke-width: 1; }
.mini-wheel .mw-r { fill: oklch(0.58 0.012 74); stroke: oklch(0.78 0.012 80); stroke-width: 0.6; }
.mini-wheel .mw-h { fill: var(--accent); }
.chip[aria-pressed="true"] .mw-t { fill: var(--ink-800); stroke: var(--ink-600); }
.finder-alts {
  margin-top: var(--sp-4); padding: var(--sp-3); display: flex; flex-direction: column; gap: 9px;
  border: 1px dashed var(--accent-line); border-radius: var(--r-lg); background: color-mix(in oklch, var(--accent) 4%, transparent);
  animation: riseIn 0.42s var(--ease) both;
}
.finder-alts .finder-honest { margin-top: 0; }

/* Season / type tiles: real radios */
.season-pick { border: 0; margin-top: var(--sp-4); min-width: 0; }
.season-pick legend {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em;
  color: var(--on-dark-body); margin-bottom: 7px; padding: 0;
}
.season-pick legend .optional { color: var(--on-dark-muted); font-weight: 500; }
.season-pick:disabled { opacity: 0.5; }
.season-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.season-opt, .inch-opt, .rimtype-opt { position: relative; display: block; }
.season-opt input, .inch-opt input, .rimtype-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.season-opt span, .inch-opt span, .rimtype-opt span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 55px; padding: 8px 6px; text-align: center;
  background: var(--ink-800); border: 1px solid var(--ink-600); border-radius: var(--choice-shape);
  font-size: var(--fs-sm); font-weight: 700; color: var(--on-dark-body);
  transition: border-color var(--t), background var(--t), color var(--t), transform var(--t-fast);
}
.season-opt span .ic { color: var(--on-dark-muted); transition: color var(--t); }
.season-opt:hover span, .inch-opt:hover span, .rimtype-opt:hover span { border-color: var(--on-dark-muted); color: var(--on-dark); }
.season-opt input:checked + span, .inch-opt input:checked + span, .rimtype-opt input:checked + span {
  border-color: var(--paper-100); background: var(--paper-100); color: var(--text-strong);
  box-shadow: inset 0 -2px 0 var(--accent-ink);
}
.season-opt input:checked + span .ic { color: var(--accent-ink); }
.season-opt input:focus-visible + span, .inch-opt input:focus-visible + span, .rimtype-opt input:focus-visible + span { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.season-opt input:active + span, .inch-opt input:active + span, .rimtype-opt input:active + span { transform: scale(0.97); }
/* each season icon has its own small moment when chosen */
.js-ready .season-opt[data-s="sun"] input:checked + span .ic { animation: sunSpin 1.3s var(--ease); }
.js-ready .season-opt[data-s="snow"] input:checked + span .ic { animation: snowSpin 1.3s var(--ease); }
.js-ready .season-opt[data-s="stud"] input:checked + span .ic { animation: studPop 0.6s var(--ease); }
.js-ready .season-opt[data-s="all"] input:checked + span .ic { animation: allTurn 1s var(--ease); }
@keyframes sunSpin { from { transform: rotate(-90deg) scale(0.7); } to { transform: none; } }
@keyframes snowSpin { from { transform: rotate(120deg) scale(0.6); } to { transform: none; } }
@keyframes studPop { 0% { transform: scale(0.6); } 60% { transform: scale(1.18); } 100% { transform: none; } }
@keyframes allTurn { from { transform: rotate(-180deg); } to { transform: none; } }

#dfShow, #dfShowRims { margin-top: var(--sp-4); }
.finder-status { margin-top: 10px; text-align: center; font-size: var(--fs-xs); color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }

.finder-switch {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--on-dark-muted); transition: color var(--t);
}
.finder-switch strong { color: var(--accent-bright); font-weight: 700; }
.finder-switch .ic { color: var(--accent-bright); }
.finder-switch:hover { color: var(--on-dark); }
.finder-switch--center { width: 100%; justify-content: center; }

/* ── Enkel start: en fråga, tre stora val (dackfinder.js styr is-start) ──
   I startläget döljs flikar och paneler. Efter valet visas bara det valda
   sättet: flikar och lägesknappar är dolda, "Ändra val" tar en tillbaka.
   Tekniska mått (ytterdiameter, varv per km) och Hjul/Bil-vyn är dolda,
   studion visar bara vad siffrorna i måttet betyder. */
.finder.is-start .finder-tabs, .finder.is-start .finder-panel { display: none !important; }
.finder:not(.is-start) .finder-tabs, .finder .finder-modes { display: none; }
.finder .studio-specs, .finder .studio-views, .finder .finder-alts, .finder .studio-delta { display: none !important; }
.finder-start-q { margin-bottom: var(--sp-3); font-size: var(--fs-md); font-weight: 750; letter-spacing: -0.02em; color: var(--on-dark); }
.finder-start-opts { display: grid; gap: var(--sp-2); }
.finder-start-opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  width: 100%; min-height: 76px; padding: 14px 16px; text-align: left; cursor: pointer;
  color: var(--on-dark); background: var(--ink-900); border: 1px solid var(--ink-700); border-radius: var(--r-lg);
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.finder-start-opt:hover { border-color: var(--accent-line); background: color-mix(in oklch, var(--accent) 10%, var(--ink-900)); }
.finder-start-opt:active { transform: scale(0.99); }
.fso-ic {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  color: var(--accent-bright); background: color-mix(in oklch, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent-bright) 40%, transparent);
}
.fso-txt strong { display: block; font-size: var(--fs-base); font-weight: 750; }
.fso-txt small { display: block; margin-top: 3px; font-size: var(--fs-xs); line-height: 1.45; color: var(--on-dark-muted); }
.fso-arrow { color: var(--accent-bright); }
.finder-start-call { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--on-dark-muted); }
.finder-start-call a { color: var(--accent-bright); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.finder-change {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 650; color: var(--on-dark-body); transition: color var(--t);
}
.finder-change .ic { transform: scaleX(-1); color: var(--accent-bright); }
.finder-change:hover { color: var(--on-dark); }
.finder-change[hidden] { display: none; }

/* Min bil */
.finder-crumbs { display: flex; gap: 6px; list-style: none; margin-bottom: var(--sp-4); counter-reset: crumb; }
.finder-crumbs li { flex: 1; counter-increment: crumb; }
.finder-crumbs button {
  width: 100%; text-align: left; min-height: 34px; padding-bottom: 9px;
  font-size: var(--fs-spec); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-muted); border-bottom: 2px solid var(--ink-700);
  transition: color var(--t), border-color var(--t);
}
.finder-crumbs button::before { content: '0' counter(crumb) ' '; font-variant-numeric: tabular-nums; }
.finder-crumbs button:disabled { cursor: default; opacity: 0.7; }
.finder-crumbs li.is-done button { color: var(--on-dark-body); border-bottom-color: var(--ink-600); }
.finder-crumbs li.is-done button:hover { color: var(--on-dark); }
.finder-crumbs li.is-current button { color: var(--accent-bright); border-bottom-color: var(--accent); }
.car-step { animation: riseIn 0.42s var(--ease) both; }
.car-step-title { font-size: var(--fs-md); font-weight: 700; color: var(--on-dark); }
.car-step-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.car-step > .car-step-title { margin-bottom: var(--sp-3); }
.model-filter { width: min(100%, 220px); }
.model-filter input { min-height: 44px; }
.brand-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.brand-tile, .type-tile, .size-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 89px; padding: var(--sp-2); text-align: center;
  background: var(--ink-800); border: 1px solid var(--ink-600); border-radius: var(--choice-shape);
  color: var(--on-dark-body); transition: border-color var(--t), transform var(--t-slow), background var(--t), color var(--t);
}
.brand-tile:hover, .type-tile:hover, .size-card:hover { border-color: var(--accent-line); color: var(--on-dark); transform: translateY(-2px); }
.brand-tile:active, .type-tile:active, .size-card:active { transform: translateY(1px); }
.brand-tile { min-height: 64px; align-items: start; padding: 13px; text-align: left; gap: 7px; }
.brand-tile::before { content: ''; width: 13px; height: 2px; border-radius: 1px; background: var(--accent-bright); }
.bt-mono { display: none; }
.bt-name { font-size: var(--fs-xs); font-weight: 650; overflow-wrap: anywhere; }
.car-allbrands { margin-top: var(--sp-3); }
.model-chips { display: flex; flex-wrap: wrap; gap: 8px; max-height: 288px; overflow: auto; padding: 2px; scrollbar-width: thin; }
.model-chip {
  min-height: 44px; padding: 0 16px; border-radius: var(--choice-shape);
  background: var(--ink-800); border: 1px solid var(--ink-600);
  font-size: var(--fs-sm); font-weight: 700; color: var(--on-dark-body);
  transition: border-color var(--t), color var(--t), background var(--t);
}
.model-chip:hover { border-color: var(--accent); color: var(--on-dark); background: var(--accent-tint); }
.type-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.type-tile span { font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; }
.car-sil { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--on-dark-muted); transition: color var(--t), transform var(--t-slow); }
.car-sil .car-ev { fill: var(--accent-bright); stroke: none; }
.type-tile:hover .car-sil { color: var(--accent-bright); transform: translateX(3px); }
.size-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: 8px; }
.size-card { min-height: 144px; padding-top: 26px; }
.size-card .mini-wheel { transition: transform var(--t-slower); }
.size-card:hover .mini-wheel, .size-card:focus-visible .mini-wheel { transform: rotate(-30deg); }
.sc-code { font-size: var(--fs-md); font-weight: 800; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.sc-meta { font-size: var(--fs-spec); font-weight: 600; color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.sc-tag {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: var(--badge-shape); white-space: nowrap;
  background: var(--ink-850);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-bright); border: 1px solid var(--accent-line);
}
.finder-car-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

/* Fälgar */
.inch-opts { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.inch-opt span { min-height: 50px; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.inch-opt.is-orig span::after {
  content: ''; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-bright);
}
.inch-opt.is-orig input:checked + span::after { background: var(--accent-ink); }
.inch-pick:disabled .inch-opt span { cursor: not-allowed; }
.rimtype-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rimtype-opt span { min-height: 160px; height: 100%; padding: 17px 6px 13px; background: var(--paper-100); color: var(--text-strong); border-color: var(--paper-300); justify-content: flex-start; font-size: var(--fs-xs); line-height: 1.35; }
.rt-photo { display: block; width: 100%; max-width: 100px; height: 85px; object-fit: contain; transition: transform var(--t); }
.rimtype-opt:hover span { color: var(--text-strong); border-color: var(--accent-ink); }
.rimtype-opt input:checked + span { border-color: var(--accent-ink); }
.rimtype-opt input:checked + span::before { content: ''; position: absolute; top: 6px; right: 6px; width: 17px; height: 17px; border-radius: 50%; background: var(--accent-press); }
.rimtype-opt input:checked + span::after { content: ''; position: absolute; top: 11px; right: 10px; width: 8px; height: 5px; border-left: 1.5px solid var(--paper-50); border-bottom: 1.5px solid var(--paper-50); transform: rotate(-45deg); }
.rimtype-opt:hover .rt-photo { transform: translateY(-2px); }
.rimtype-note { margin-top: 9px; }

/* Result */
.finder-back {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin: -6px 0 var(--sp-1) -4px;
  padding: 0 6px; border-radius: var(--choice-shape);
  font-size: var(--fs-sm); font-weight: 700; color: var(--on-dark-muted); transition: color var(--t), background var(--t);
}
.finder-back:hover { color: var(--on-dark); background: oklch(1 0 0 / 0.05); }
.finder-result-title { font-size: var(--fs-lg); font-weight: 700; color: var(--on-dark); letter-spacing: -0.022em; font-variant-numeric: tabular-nums; }
.finder-result-title:focus { outline: none; }
.finder-result-sub { font-size: var(--fs-sm); color: var(--on-dark-body); margin: 6px 0 var(--sp-4); line-height: 1.55; }
.finder-prods { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--sp-4); }
.finder-prod {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 14px 16px; background: var(--ink-800); border: 1px solid var(--ink-700); border-radius: var(--r-md);
}
.fp-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fp-info strong { color: var(--on-dark); font-size: var(--fs-sm); }
.fp-meta { color: var(--on-dark-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.fp-price, .ft-price { color: var(--accent-bright); font-weight: 800; font-size: var(--fs-md); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-price small, .ft-price small { font-size: var(--fs-spec); font-weight: 600; color: var(--on-dark-muted); margin-left: 2px; }
.finder-tiers { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: var(--sp-4); }
.finder-tier {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3);
  background: var(--ink-800); border: 1px solid var(--ink-700); border-radius: var(--r-md);
}
.finder-tier.is-rec { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--ink-800)); }
.ft-badge {
  position: absolute; top: -10px; left: var(--sp-3); padding: 3px 10px; border-radius: var(--badge-shape);
  background: var(--paper-100); color: var(--text-strong); border: 1px solid var(--paper-300);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.ft-name { font-size: var(--fs-sm); font-weight: 700; color: var(--on-dark); }
.ft-note { font-size: var(--fs-spec); color: var(--on-dark-muted); }
.ft-price small:first-child { margin: 0 2px 0 0; }
.finder-callout {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  background: var(--ink-800); border: 1px solid var(--ink-700); border-radius: var(--r-md);
}
.finder-callout .ic { color: var(--accent-bright); margin-top: 1px; }
.finder-callout p { font-size: var(--fs-sm); color: var(--on-dark-body); line-height: 1.55; }
.finder-callout strong { color: var(--on-dark); font-variant-numeric: tabular-nums; }
.finder-order { background: var(--ink-900); border: 1px solid var(--ink-700); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.fo-lbl { display: block; font-size: var(--fs-spec); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: var(--sp-2); }
.fo-list { display: flex; flex-direction: column; gap: 7px; }
.fo-list li { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); border-bottom: 1px solid var(--ink-700); padding-bottom: 7px; }
.fo-list li:last-child { border-bottom: none; padding-bottom: 0; }
.fo-list span { color: var(--on-dark-muted); }
.fo-list strong { color: var(--on-dark); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.finder-open { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: var(--fs-xs); color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.finder-open .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-600); }
.finder-open .dot.is-open { background: oklch(0.78 0.15 152); box-shadow: 0 0 0 4px oklch(0.78 0.15 152 / 0.16); }
.finder-steps-mini {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--ink-700);
}
.finder-steps-mini li { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); color: var(--on-dark-muted); line-height: 1.4; }
.finder-steps-mini b {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--accent-line); color: var(--accent-bright); font-size: var(--fs-xs); font-weight: 800;
}
.finder-lead-form { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--ink-700); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.finder-consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-xs); color: var(--on-dark-muted); line-height: 1.5; cursor: pointer; }
.finder-consent input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0; accent-color: var(--accent); }
.finder-consent input[aria-invalid="true"] { outline: 2px solid oklch(0.70 0.17 30); outline-offset: 2px; }
.finder-consent a { color: var(--accent-bright); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.finder-consent--info { display: block; cursor: auto; margin: 0; }
.finder-err { font-size: var(--fs-sm); color: oklch(0.80 0.13 40); line-height: 1.5; }
.finder-err:empty { display: none; }
.finder-err a { color: var(--accent-bright); font-weight: 700; }
.finder-confirm { text-align: center; padding: var(--sp-5) 0 var(--sp-3); }
.finder-confirm:focus { outline: none; }
.finder-confirm-icon {
  width: 68px; height: 68px; margin: 0 auto var(--sp-4); border-radius: 50%;
  background: oklch(0.66 0.15 152 / 0.14); color: oklch(0.78 0.15 152);
  display: flex; align-items: center; justify-content: center;
}
.finder-confirm-icon .ic { stroke-width: 2.2; stroke-dasharray: 24; stroke-dashoffset: 24; animation: drawCheck 0.6s var(--ease) 0.15s forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
.finder-confirm h3 { font-size: var(--fs-lg); color: var(--on-dark); margin-bottom: var(--sp-2); }
.finder-confirm p { font-size: var(--fs-sm); color: var(--on-dark-body); line-height: 1.6; max-width: 40ch; margin: 0 auto; }
.finder-confirm a { color: var(--accent-bright); font-weight: 700; font-variant-numeric: tabular-nums; }
.finder-honest { font-size: var(--fs-xs); color: var(--on-dark-muted); margin-top: var(--sp-2); line-height: 1.5; }

.finder-view.is-active, .finder-panel:not([hidden]), .finder-result:not([hidden]) { animation: riseIn 0.42s var(--ease) both; }
/* Only the finder card takes part in view transitions: it morphs its
   height between steps instead of cross-fading the whole page. */
:root { view-transition-name: none; }
.finder { view-transition-name: ddk-finder; }
::view-transition-group(ddk-finder) { animation-duration: 0.42s; animation-timing-function: var(--ease); }
::view-transition-old(ddk-finder), ::view-transition-new(ddk-finder) {
  animation-duration: 0.32s; height: 100%; object-fit: none; object-position: top;
}

/* Season shortcut cards (under the finder) */
.season-cards { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-6); }
.season-card {
  position: relative; width: 100%; height: 100%; text-align: left;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; align-items: center;
  gap: 8px 12px; padding: 0 16px 18px; overflow: hidden;
  background: var(--ink-850); border: 1px solid var(--ink-700); border-radius: var(--action-r);
  transition: border-color var(--t), transform var(--t-slow), background var(--t);
}
.season-card:hover { border-color: var(--on-dark-muted); background: var(--ink-800); }
.season-card-photo {
  grid-column: 1 / -1; grid-row: 1; width: calc(100% + 32px); max-width: none;
  height: 120px; object-fit: cover; object-position: 50% 45%; margin: 0 0 7px -16px;
  border-bottom: 1px solid var(--ink-700);
}
.season-card-ic {
  position: absolute; top: 10px; left: 10px; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-900); color: var(--accent-bright); border: 1px solid var(--ink-700);
}
.season-card-ic .ic { width: 20px; height: 20px; }
.season-card-name { grid-column: 1; grid-row: 2; font-size: var(--fs-base); font-weight: 750; color: var(--on-dark); align-self: end; }
.season-card-txt { grid-column: 1; grid-row: 3; font-size: var(--fs-xs); color: var(--on-dark-muted); line-height: 1.5; align-self: start; }
.season-card-go { grid-row: 2 / span 2; grid-column: 2; align-self: start; padding-top: 5px; color: var(--accent-bright); transition: transform var(--t), color var(--t); }
.season-card:hover .season-card-go { transform: translateX(4px); color: var(--accent-bright); }
@media (max-width: 1000px) {
  .season-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .season-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .finder-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  /* Phones/tablets: heading → finder → process (finder before the explainer) */
  .finder-intro { display: contents; }
  .finder-intro > .intro-num, .finder-intro > h2, .finder-intro > .finder-lead { order: 0; }
  .finder-intro h2 { margin: 0; }
  .finder { order: 1; }
  .finder-process, .finder-call { order: 2; }
  .finder-process { margin-top: 0; }
}
@media (max-width: 640px) {
  .studio { grid-template-columns: minmax(0, 1.618fr) minmax(96px, 1fr); gap: var(--sp-2); padding: var(--sp-3); }
  .studio .studio-panel { display: contents; }
  .studio .studio-tag { grid-column: 1 / -1; grid-row: 2; }
  .studio .studio-code { grid-column: 1 / -1; grid-row: 3; font-size: clamp(1.65rem, 6vw, 2.125rem); margin-top: 0; flex-wrap: nowrap; white-space: nowrap; }
  .studio .studio-stage { grid-column: 1; grid-row: 4; }
  .studio .studio-specs { grid-column: 2; grid-row: 4; margin-top: 0; padding-top: 0; border-top: 0; }
  .studio .studio-delta { grid-column: 1 / -1; grid-row: 5; }
  .studio-legend { display: none; }
  .studio-specs { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .studio-specs > div:nth-child(4) { display: none; }
  .studio-specs dd b { font-size: var(--fs-base); }
  .studio-specs dt { letter-spacing: 0.04em; }
  .brand-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .type-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inch-opts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .finder-steps-mini { grid-template-columns: minmax(0, 1fr); }
  .finder-steps-mini li { flex-direction: row; align-items: center; }
}
@media (max-width: 560px) {
  .finder { padding: var(--sp-3); border-radius: var(--r-lg); }
  .season-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rimtype-opt span { min-height: 84px; font-size: var(--fs-xs); }
  .finder-car-grid { grid-template-columns: minmax(0, 1fr); }
  .dim-selects { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dim-sep { display: none; }
  .dim-field .pick { padding-inline: 8px; gap: 4px; }
  .dim-field .pick-chev { width: 14px; height: 14px; }
  .dim-field select { padding: 0 30px 0 10px; background-position: right 7px center; }
  .finder-prod { flex-direction: column; align-items: flex-start; gap: 6px; }
  .size-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .finder-tab-ink { transition: none; }
  .finder-confirm-icon .ic { animation: none; stroke-dashoffset: 0; }
  .finder-glow, .st-spin, .st-ghost circle { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOM UI — egna väljare, bilvy, sortiment och förfrågan
   ═══════════════════════════════════════════════════════════════ */

/* ── Egen väljare (picker.js) ── */
/* panels sit above the tabs and studio so open pickers are never covered */
.finder-panel, .finder-result { position: relative; z-index: 4; }
.finder-tabs { z-index: 1; }
.pick-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; clip: rect(0 0 0 0); }
.has-picker { position: relative; }
.has-picker.is-open { z-index: 2; }
.pick {
  width: 100%; min-height: 52px; padding: 0 12px 0 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--ink-800); color: var(--on-dark); text-align: left;
  border: 1px solid var(--field-line-dark); border-radius: var(--choice-shape);
  font-size: var(--fs-base); font-weight: 700; font-variant-numeric: tabular-nums;
  transition: border-color var(--t), box-shadow var(--t), opacity var(--t), background var(--t);
}
.pick-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick.is-empty .pick-val { color: var(--on-dark-muted); font-weight: 500; }
.pick-chev { color: var(--on-dark-muted); transition: transform var(--t-slow), color var(--t); }
.pick:hover:not(:disabled) { border-color: var(--on-dark-muted); }
.pick[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint-2); }
.pick[aria-expanded="true"] .pick-chev { transform: rotate(180deg); color: var(--accent-bright); }
.pick:disabled { opacity: 0.42; cursor: not-allowed; }
.pick.is-picked .pick-val { animation: pickPop 0.42s var(--ease); }
@keyframes pickPop { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }

.pick-pop {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; min-width: 100%; width: max-content; max-width: min(92vw, 380px);
  background: var(--ink-850); border: 1px solid var(--ink-600); border-radius: var(--r-lg);
  box-shadow: 0 21px 55px oklch(0.05 0.01 52 / 0.7), 0 0 0 1px oklch(0 0 0 / 0.3);
  padding: 8px; transform-origin: top left;
}
.pick-pop.is-up { top: auto; bottom: calc(100% + 8px); transform-origin: bottom left; }
.pick-pop.is-in { animation: popIn 0.26s var(--ease); }
@keyframes popIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
.dim-selects .dim-field:last-child .pick-pop { left: auto; right: 0; transform-origin: top right; }
.pick-sheet-head { display: none; }
.pick-search {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0 10px; min-height: 44px;
  background: var(--ink-900); border: 1px solid var(--ink-700); border-radius: var(--r-md); color: var(--on-dark-muted);
}
.pick-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--on-dark); font-size: var(--fs-base); min-height: 42px; }
.pick-search:focus-within { border-color: var(--accent); }
.pick-list {
  --pick-cols: 1;
  display: grid; grid-template-columns: repeat(var(--pick-cols), minmax(0, 1fr)); gap: 4px;
  max-height: min(55vh, 336px); overflow: auto; overscroll-behavior: contain; outline: none; scrollbar-width: thin;
}
.pick-group {
  grid-column: 1 / -1; padding: 10px 8px 4px;
  font-size: var(--fs-spec); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-muted);
}
.pick-opt {
  position: relative; display: flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 12px;
  border-radius: var(--control-r); cursor: pointer; color: var(--on-dark-body); font-size: var(--fs-sm); font-weight: 600;
  font-variant-numeric: tabular-nums; transition: background var(--t-fast), color var(--t-fast);
}
.pick-pop--grid .pick-opt { justify-content: center; padding: 0 6px; min-width: 58px; font-size: var(--fs-base); }
.pick-opt b { font-weight: 800; }
.pick-opt small { font-size: var(--fs-spec); color: var(--on-dark-muted); margin-left: 1px; }
.pick-dot { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-bright); }
.pick-opt.is-active { background: var(--ink-750); color: var(--on-dark); box-shadow: inset 0 0 0 2px var(--accent-bright); }
.pick-opt[aria-selected="true"] { background: var(--accent-press); color: oklch(0.99 0.012 84); }
.pick-opt.is-active[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--on-dark); }
.pick-opt[aria-selected="true"] small { color: oklch(0.99 0.012 84); }
.pick-empty { padding: 12px; font-size: var(--fs-sm); color: var(--on-dark-muted); }
.pick-backdrop { position: fixed; inset: 0; z-index: 1190; background: oklch(0.08 0.01 52 / 0.6); animation: fadeIn 0.2s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
body.pick-lock { overflow: hidden; }
/* Phones: the picker becomes a bottom sheet with big targets */
.pick-pop.is-sheet {
  position: fixed; z-index: 1200; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; min-width: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  transform-origin: bottom center;
}
.pick-pop.is-sheet.is-in { animation: sheetIn 0.34s var(--ease); }
@keyframes sheetIn { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.pick-pop.is-sheet .pick-sheet-head {
  display: flex; align-items: center; justify-content: space-between; padding: 6px 0 10px;
}
.pick-pop.is-sheet .pick-sheet-head::before {
  content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--ink-600);
}
.pick-sheet-title { font-size: var(--fs-md); font-weight: 800; color: var(--on-dark); margin-top: 8px; }
.pick-close { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ink-600); border-radius: 50%; color: var(--on-dark-muted); }
.pick-close:hover { background: oklch(1 0 0 / 0.06); color: var(--on-dark); }
.pick-pop.is-sheet .pick-list { max-height: 58vh; }
.pick-pop.is-sheet.pick-pop--grid .pick-list { --pick-cols: 4 !important; }
.pick-pop.is-sheet .pick-opt { min-height: 52px; font-size: var(--fs-md); }

/* ── Studio: Hjul / Bil ── */
.studio-stage { position: relative; min-width: 0; }
.studio-views {
  position: relative; grid-column: 1 / -1; grid-row: 1; justify-self: start;
  display: inline-flex; max-width: 100%; padding: 3px; gap: 3px;
  background: var(--ink-900); border: 1px solid var(--ink-700); border-radius: calc(var(--control-r) + 3px);
}
.studio-views button {
  display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 11px; border-radius: var(--choice-shape);
  font-size: var(--fs-xs); font-weight: 700; color: var(--on-dark-muted); transition: color var(--t), background var(--t);
}
.studio-views button { position: relative; }
.studio-views button:hover { color: var(--on-dark); }
.studio-views button[aria-pressed="true"] { background: var(--paper-100); color: var(--text-strong); }
.studio-car {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none;
  transition: opacity var(--t-slow), transform var(--t-slow); transform: translateX(-12px);
}
.studio-art { transition: opacity var(--t-slow), transform var(--t-slow); }
.studio.is-car .studio-art { opacity: 0; transform: scale(0.94); }
.studio.is-car .studio-car { opacity: 1; transform: none; }
.st-car-shadow { fill: oklch(0 0 0 / 0.45); filter: blur(3px); }
.st-car-ground { stroke: oklch(1 0 0 / 0.14); stroke-width: 1; stroke-dasharray: 10 8; }
.js-ready .studio.is-car .st-car-ground { animation: groundRun 0.9s linear infinite; }
@keyframes groundRun { to { stroke-dashoffset: 18; } }
.st-car-arch { fill: var(--ink-900); }
.st-car-door { stroke: oklch(0.12 0.006 52 / 0.8); stroke-width: 1.1; fill: none; stroke-linecap: round; }
.st-car-head { fill: oklch(0.92 0.06 85); filter: drop-shadow(0 0 4px oklch(0.92 0.08 85 / 0.8)); }
.st-car-tail { fill: oklch(0.6 0.2 27); filter: drop-shadow(0 0 4px oklch(0.6 0.2 27 / 0.8)); }
.cw-spin { transform-box: fill-box; transform-origin: center; }
.js-ready .studio.is-car .cw-spin { animation: wiSpin 1.4s linear infinite; }
.cw-tyre { fill: oklch(0.1 0.005 52); stroke: oklch(0.05 0.004 52); stroke-width: 2.5; stroke-dasharray: 2 2.6; }
.cw-rim { fill: oklch(0.16 0.007 54); stroke: oklch(0.72 0.013 80); stroke-width: 1.4; }
.cw-spokes path { stroke: oklch(0.8 0.012 82); stroke-width: 2.6; stroke-linecap: round; }
.cw-spokes circle { fill: oklch(0.66 0.19 40); }
.st-car-type { font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; fill: var(--on-dark-muted); }

/* ── Finder: browse + shop call-to-action ── */
.finder-browse {
  width: 100%; margin-top: var(--sp-5); padding: var(--sp-3);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); text-align: left;
  background: var(--ink-850); border: 1px solid var(--ink-700); border-radius: var(--action-shape);
  transition: border-color var(--t), transform var(--t-slow), background var(--t);
}
.finder-browse:hover { border-color: var(--accent-line); background: var(--ink-800); transform: translateY(-2px); }
.finder-browse-art { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-900); border: 1px solid var(--ink-600); box-shadow: inset 0 0 0 4px var(--ink-850); color: var(--accent-bright); }
.finder-browse strong { display: block; color: var(--on-dark); font-size: var(--fs-base); }
.finder-browse span span { display: block; font-size: var(--fs-xs); color: var(--on-dark-muted); margin-top: 2px; }
.finder-browse > .ic { color: var(--on-dark-muted); transition: transform var(--t); }
.finder-browse:hover > .ic { transform: translateX(4px); color: var(--accent-bright); }
.finder-shopcta {
  width: 100%; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-4); padding: 8px var(--sp-3) 8px 8px; text-align: left;
  background: var(--ink-800);
  border: 1px solid var(--accent-line); border-radius: var(--action-shape);
  transition: transform var(--t-slow), border-color var(--t), box-shadow var(--t);
}
.finder-shopcta:hover { transform: none; border-color: var(--accent); box-shadow: none; }
.fsc-art { display: block; width: 76px; }
.fsc-art .tyre-art { width: 100%; height: auto; }
.fsc-txt strong { display: block; color: var(--on-dark); font-size: var(--fs-base); }
.fsc-txt span { display: block; font-size: var(--fs-xs); color: var(--on-dark-body); margin-top: 2px; }
.finder-shopcta > .ic { color: var(--accent-bright); transition: transform var(--t); }
.finder-shopcta:hover > .ic { transform: translateX(4px); }

/* ── Sortiment ── */
.shop-host { padding-top: var(--sp-6); }
.shop-host:not([hidden]) { animation: riseIn 0.52s var(--ease) both; }
.shop { position: relative; }
.shop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.shop-title { font-size: var(--fs-lg); font-weight: 800; color: var(--on-dark); letter-spacing: -0.022em; font-variant-numeric: tabular-nums; }
.shop-title:focus { outline: none; }
.shop-sub { margin-top: 6px; font-size: var(--fs-sm); color: var(--on-dark-body); max-width: 64ch; line-height: 1.55; }
.shop-close {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; flex-shrink: 0;
  border: 1px solid var(--ink-600); border-radius: var(--choice-shape); font-size: var(--fs-xs); font-weight: 700; color: var(--on-dark-muted);
  transition: color var(--t), border-color var(--t);
}
.shop-close:hover { color: var(--on-dark); border-color: var(--on-dark-muted); }
.shop-bar {
  position: sticky; top: calc(var(--header-h) + 8px); z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px;
  padding: 10px; margin-bottom: var(--sp-3);
  background: oklch(0.145 0.008 52 / 0.9); border: 1px solid var(--ink-700); border-radius: var(--r-lg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.shop-kind { display: flex; padding: 3px; gap: 2px; background: var(--ink-900); border: 1px solid var(--ink-700); border-radius: var(--control-r); }
.shop-kind-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 15px; border-radius: var(--choice-shape);
  font-size: var(--fs-sm); font-weight: 700; color: var(--on-dark-muted); transition: color var(--t), background var(--t);
}
.shop-kind-btn[aria-pressed="true"] { background: var(--ink-750); color: var(--on-dark); box-shadow: inset 0 -2px 0 var(--accent-bright); }
.shop-kind-btn[aria-pressed="true"] .ic { color: var(--accent-bright); }
.shop-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 13px; border-radius: var(--choice-shape);
  border: 1px solid var(--ink-600); font-size: var(--fs-xs); font-weight: 600; color: var(--on-dark-body);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.shop-chip:hover { border-color: var(--on-dark-muted); color: var(--on-dark); }
.shop-chip:not(:has(svg))::before { content: ''; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
.shop-chip[aria-pressed="true"] { border-color: var(--paper-100); background: var(--paper-100); color: var(--text-strong); }
.shop-chip[aria-pressed="true"]::before { background: var(--accent-ink); border-color: var(--accent-ink); }
.shop-chip[aria-pressed="true"] .ic { color: var(--accent-ink); }
.shop-brand { min-width: 170px; margin-left: auto; }
.shop-brand .pick { min-height: 42px; font-size: var(--fs-sm); }
.shop-count { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; color: var(--on-dark-muted); margin: 0 0 var(--sp-3) 4px; font-variant-numeric: tabular-nums; }
.shop-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-3); }
.shop-empty { grid-column: 1 / -1; padding: var(--sp-5); text-align: center; border: 1px dashed var(--ink-600); border-radius: var(--r-lg); }
.shop-empty p { color: var(--on-dark-body); margin-bottom: var(--sp-3); }
.shop-foot { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--on-dark-muted); text-align: center; }
.shop-foot a { color: var(--accent-bright); font-weight: 700; }

.pcard {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--ink-850); border: 1px solid var(--ink-700); border-radius: var(--r-lg);
  transition: transform var(--t-slow), border-color var(--t), box-shadow var(--t-slow);
}
.js-ready .pcard { animation: riseIn 0.52s var(--ease) both; }
.pcard:hover { transform: translateY(-4px); border-color: var(--ink-600); box-shadow: 0 21px 55px -21px oklch(0.05 0.01 52 / 0.9); }
.pcard-stage {
  position: relative; aspect-ratio: 1.382 / 1;
  background: var(--paper-100);
  border-bottom: 1px solid var(--ink-700);
  display: grid; place-items: center; overflow: hidden;
}
.tyre-art { width: 82%; height: auto; overflow: visible; }
.product-photo { display: block; width: 100%; height: 100%; object-fit: contain; }
.pcard-stage .product-photo { position: absolute; inset: 0; padding: 8px 13px 22px; transition: transform var(--t-slow); }
.pcard:hover .product-photo { transform: translateY(-2px); }
.pcard-image-note { position: absolute; left: 13px; bottom: 8px; color: var(--text-muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; }
.pcard-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.ta-brand { font-family: var(--font); font-size: 7px; font-weight: 800; letter-spacing: 1.6px; fill: oklch(1 0 0 / 0.42); }
.pcard-season, .pcard-tier {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
}
.pcard-season { padding: 5px 0; color: var(--on-dark-body); }
.pcard-season .ic { color: var(--accent-bright); }
.pcard-season[data-s="winter"] .ic, .pcard-season[data-s="studded"] .ic { color: oklch(0.82 0.08 230); }
.pcard-tier { padding: 4px 8px; color: var(--on-dark-body); border: 1px solid var(--ink-600); border-radius: var(--badge-shape); }
.pcard-tier::before { content: ''; width: 10px; height: 10px; border: 1px solid currentColor; border-radius: 50%; background: radial-gradient(circle, currentColor 1px, transparent 1.5px); }
.pcard-tier.is-premium { color: var(--gold); border-color: oklch(0.785 0.135 78 / 0.45); }
.pcard-body { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4); flex: 1; min-width: 0; }
.pcard-brand { font-size: var(--fs-spec); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-bright); }
.pcard-model { font-size: var(--fs-md); font-weight: 750; color: var(--on-dark); letter-spacing: -0.025em; line-height: 1.25; overflow-wrap: anywhere; }
.pcard-tag { font-size: var(--fs-xs); color: var(--on-dark-muted); line-height: 1.5; }
.pcard-fit { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.pcard-fit.is-yes { color: oklch(0.82 0.13 152); }
.pcard-fit.is-check { color: var(--on-dark-body); }
.pcard-fit .ic { flex-shrink: 0; }
.pcard-buy { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--ink-700); }
.pcard-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.pcard-price b { font-size: var(--fs-md); font-weight: 800; color: var(--on-dark); }
.pcard-price small { font-size: var(--fs-spec); color: var(--on-dark-muted); font-weight: 600; }
.pcard-actions { display: flex; gap: 8px;   flex-wrap: wrap;
}
.pcard-actions .btn { flex: 1; min-height: 44px; padding: 0 12px; font-size: var(--fs-sm);   min-width: min(100%, 150px);
}
.pcard-add.is-added { color: oklch(0.86 0.1 152); border-color: oklch(0.66 0.15 152 / 0.5); }
.qty {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: 3px; gap: 3px; border: 1px solid var(--ink-600); border-radius: 28px; background: var(--ink-900);
}
.qty-btn { width: 44px; min-height: 44px; font-size: 1.2rem; font-weight: 500; color: var(--on-dark-body); border: 1px solid var(--ink-700); background: var(--ink-800); border-radius: 50%; }
.qty-btn:hover { color: var(--on-dark); background: oklch(1 0 0 / 0.06); }
.qty-val { min-width: 22px; text-align: center; font-weight: 800; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.qty--sm .qty-btn { width: 44px; min-height: 44px; }

/* ── Förfrågan ── */
.req-pill {
  position: fixed; z-index: 70; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 9px 0 18px;
  background: var(--ink-850); color: var(--on-dark); border: 1px solid var(--accent-line); border-radius: var(--action-r);
  font-size: var(--fs-sm); font-weight: 800;
  box-shadow: 0 4px 16px oklch(0.12 0.01 52 / 0.3);
  animation: pillIn 0.42s var(--ease) both;
}
@keyframes pillIn { from { transform: translate(-50%, 21px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.req-pill .ic { color: var(--accent-bright); }
.req-count { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 9px; border-radius: 100px; background: var(--accent-press); color: oklch(0.99 0.012 84); font-variant-numeric: tabular-nums; }
.req-pill.is-bump .req-count { animation: bump 0.42s var(--ease); }
@keyframes bump { 40% { transform: scale(1.3); } }
.fly-ghost { will-change: transform, opacity; }
.req { position: fixed; inset: 0; z-index: 1150; }
.req-backdrop { position: absolute; inset: 0; background: oklch(0.08 0.01 52 / 0.66); }
.req-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 460px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--ink-850); border-left: 1px solid var(--ink-700); padding: var(--sp-4) var(--sp-4) var(--sp-5);
  box-shadow: -34px 0 89px oklch(0.05 0.01 52 / 0.6); color: var(--on-dark-body);
}
.req.is-in .req-backdrop { animation: fadeIn 0.3s var(--ease); }
.req.is-in .req-panel { animation: drawerIn 0.42s var(--ease); }
@keyframes drawerIn { from { transform: translateX(34px); opacity: 0; } to { transform: none; opacity: 1; } }
.req-head { display: flex; align-items: center; justify-content: space-between; }
.req-head h3 { font-size: var(--fs-lg); font-weight: 800; color: var(--on-dark); }
.req-x { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ink-600); border-radius: 50%; color: var(--on-dark-muted); }
.req-x:hover { background: oklch(1 0 0 / 0.06); color: var(--on-dark); }
.req-intro { font-size: var(--fs-sm); line-height: 1.55; margin: 6px 0 var(--sp-4); }
.req-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.req-item {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; align-items: center;
  padding: 10px; background: var(--ink-800); border: 1px solid var(--ink-700); border-radius: var(--r-md);
}
.req-thumb { grid-row: span 2; width: 64px; aspect-ratio: 1; border-radius: 7px; background: var(--paper-100); overflow: hidden; }
.req-thumb .product-photo { padding: 3px; }
.req-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.req-info strong { color: var(--on-dark); font-size: var(--fs-sm); }
.req-info span { font-size: var(--fs-xs); color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.req-info .req-price { color: var(--accent-bright); font-weight: 700; }
.req-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.req-rm { min-height: 44px; padding: 0 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--on-dark-muted); text-decoration: underline; text-underline-offset: 3px; }
.req-rm:hover { color: oklch(0.8 0.13 30); }
.req-empty { padding: var(--sp-4); text-align: center; border: 1px dashed var(--ink-600); border-radius: var(--r-md); font-size: var(--fs-sm); }
.req-sum {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin: var(--sp-3) 0;
  padding: var(--sp-3); border-radius: var(--r-md); background: var(--ink-900); border: 1px solid var(--ink-700);
}
.req-sum:empty { display: none; }
.req-sum span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-muted); }
.req-sum b { font-size: var(--fs-lg); font-weight: 800; color: var(--on-dark); margin-left: auto; font-variant-numeric: tabular-nums; }
.req-sum small { flex-basis: 100%; text-align: right; font-size: var(--fs-xs); color: var(--on-dark-muted); }
.req-actions { display: grid; gap: 8px; }
.req-say { font-size: var(--fs-xs); color: var(--on-dark-muted); line-height: 1.5; text-align: center; }
.req-say strong { color: var(--on-dark-body); }
.req-form { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--ink-700); }
.req-done { text-align: center; padding: var(--sp-5) 0; }
.req-done:focus { outline: none; }
.req-done h4 { font-size: var(--fs-lg); color: var(--on-dark); margin-bottom: var(--sp-2); }
.req-done p { font-size: var(--fs-sm); line-height: 1.6; }
.req-done a { color: var(--accent-bright); font-weight: 700; }
body.req-open { overflow: hidden; }
body.req-open .req-pill { display: none; }

@media (max-width: 768px) {
  .req-pill { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .shop-bar { position: relative; top: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 10px;
    background: var(--ink-900); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .shop-kind { width: fit-content; max-width: 100%; }
  .shop-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: var(--ink-600) transparent; }
  .shop-chip, .shop-kind-btn { white-space: nowrap; }
  .shop-brand { min-width: 0; width: 100%; margin-left: 0; }
  .shop-head { flex-direction: column; gap: var(--sp-2); }
  .shop-close { align-self: flex-start; }
  .req-panel { width: 100%; top: auto; max-height: 92vh; border-left: 0; border-top: 1px solid var(--ink-700); border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); }
  @keyframes drawerIn { from { transform: translateY(21%); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (max-width: 560px) {
  .shop-grid { grid-template-columns: minmax(0, 1fr); }
  .pcard-stage { aspect-ratio: 1.618 / 1; }
  .pcard-body { padding: var(--sp-3); }
  .pcard-actions { flex-wrap: wrap; }
  .pcard-actions .btn { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard, .shop-host, .req-pill, .req-panel, .pick-pop { animation: none !important; }
  .cw-spin, .st-car-ground { animation: none !important; }
}
/* the spotlight ring must not cover card content */
.pcard[data-spotlight]::after { z-index: 3; }

/* ═══════════════════════════════════════════════════════════════
   REFRESH LAYER — motion & materiality (2026-06)
   Same system, deeper craft. Everything here is JS-gated
   (body.js-ready) and frozen under prefers-reduced-motion.
   Calm and slow by calibration; nothing bounces, nothing races.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero slides: slow Ken Burns drift (desktop pointers only,
      matched to the 27s fade cycle; reset happens while hidden) ── */
@media (pointer: fine) {
  .js-ready .hero-slide img { animation: heroDrift 27s var(--ease-soft) -1.62s infinite; }
  .js-ready .hero-slide:nth-child(2) img { animation-delay: 7.38s; }
  .js-ready .hero-slide:nth-child(3) img { animation-delay: 16.38s; }
}
@keyframes heroDrift {
  0%      { transform: scale(1); }
  38%     { transform: scale(1.07); }
  38.001% { transform: scale(1); }
  100%    { transform: scale(1); }
}

/* ── Hero title: precision focus-in (blur resolves to sharp) ── */
@keyframes lineFocus {
  from { opacity: 0; transform: translateY(20px); filter: blur(9px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.js-ready .hero .hero-title .line { animation-name: lineFocus; animation-duration: 0.84s; }
.js-ready.hero-shown .hero [data-load],
.js-ready.hero-shown .hero-cta-group { animation: none; }

/* ── Section titles: the same focus-in signature on scroll reveal ── */
.js-ready .section-intro.reveal h2,
.js-ready .reveal .finder-intro h2,
.js-ready .align-copy.reveal h2,
.js-ready .cta-block.reveal .cta-title {
  opacity: 0; filter: blur(7px); transform: translateY(10px);
  transition: opacity 0.8s var(--ease) 0.1s, filter 0.9s var(--ease) 0.1s,
              transform 0.8s var(--ease) 0.1s;
}
.js-ready .section-intro.reveal.visible h2,
.js-ready .reveal.visible .finder-intro h2,
.js-ready .align-copy.reveal.visible h2,
.js-ready .cta-block.reveal.visible .cta-title {
  opacity: 1; filter: blur(0); transform: none;
}

/* ── Section numerals: a small, quiet reveal ── */
.js-ready .reveal .intro-num {
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
}
.js-ready .reveal.visible .intro-num { opacity: 1; transform: none; }

/* ── Workshop gallery: panels widen under the pointer (desktop only) ── */
@media (min-width: 769px) and (pointer: fine) {
  .gallery-grid { display: flex; }
  .gallery-item { flex: 1; min-width: 0; transition: flex 0.65s var(--ease); }
  .gallery-grid:hover .gallery-item:hover { flex: 2.3; }
  .gallery-item img { filter: saturate(0.82); transition: filter var(--t-slow), transform var(--t-slow); }
  .gallery-item:hover img { filter: saturate(1.05); }
}

/* ── Small tactile refinements ── */
.faq-item:hover { background: var(--paper-50); }
.gallery-item figcaption { transition: letter-spacing var(--t-slow); }
.gallery-item:hover figcaption { letter-spacing: 0.22em; }

/* ── Phones: reviews become a swipeable row (scroll-snap), the
      page gets ~1500px shorter and nothing is hidden ── */
@media (max-width: 768px) {
  .reviews-grid {
    display: grid; grid-auto-flow: column; grid-template-columns: none;
    grid-auto-columns: min(84%, 320px); gap: var(--sp-3);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: -18px; padding: 4px 18px var(--sp-3);
    scrollbar-width: none;
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .review-card { scroll-snap-align: start; }
  .js-ready .reviews-grid .review-card.reveal { opacity: 1; transform: none; }
  .season-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .season-card { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 0 13px 16px; }
  .season-card-photo { width: calc(100% + 26px); height: 96px; margin-left: -13px; }
  .season-card-ic { width: 32px; height: 32px; }
  .season-card-name { font-size: var(--fs-sm); }
  .season-card-go { display: none; }
}
@media (max-width: 480px) {
  .reviews-grid { margin-inline: -15px; padding-inline: 15px; }
}

/* ── Scroll-driven progress bar where the browser supports it
      (no JS on scroll); script.js is the fallback ── */
@supports (animation-timeline: scroll()) {
  .header-tach { animation: tachFill linear both; animation-timeline: scroll(root block); }
  @keyframes tachFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ── Gallery images drift gently through the viewport (CSS only) ── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gallery-item img { animation: galleryDrift linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes galleryDrift { from { object-position: 50% 30%; } to { object-position: 50% 70%; } }
  }
}

/* ── Rörelse pausas i sektioner utanför skärmen (script.js sätter is-offscreen) ── */
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after {
  animation-play-state: paused !important;
}

/* ── Hero wheel driven by script.js (idle spin + scroll inertia) ── */
.premium-wheel.hw-js .hw-spin { animation: none; transform: rotate(var(--hw-a, 0deg)); }

/* ── Hero: live open/closed status ── */
.hero-open { color: var(--on-dark-body); font-weight: 600; }
.hero-open-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-600); flex-shrink: 0; }
.hero-open.is-open { color: oklch(0.86 0.1 152); }
.hero-open.is-open .hero-open-dot { background: oklch(0.78 0.15 152); box-shadow: 0 0 0 4px oklch(0.78 0.15 152 / 0.18); animation: pulse 2.4s var(--ease-soft) infinite; }

/* ── Spotlight: warm light traces the card edge under the pointer ── */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-spotlight] { position: relative; }
  [data-spotlight]::after {
    content: ''; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; padding: 1.5px;
    pointer-events: none; opacity: 0; transition: opacity var(--t-slow);
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
      oklch(0.80 0.16 50 / 0.95), oklch(0.66 0.19 40 / 0.35) 40%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  [data-spotlight]:hover::after { opacity: 1; }
  .finder[data-spotlight]::after { padding: 1px; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), oklch(0.80 0.16 50 / 0.55), transparent 70%); }
}

/* ── Finder result bar: back + share ── */
.finder-result-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.finder-share {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; margin-top: -6px;
  border: 1px solid var(--ink-600); border-radius: var(--choice-shape);
  font-size: var(--fs-xs); font-weight: 700; color: var(--on-dark-muted);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.finder-share:hover { color: var(--on-dark); border-color: var(--accent-line); background: var(--accent-tint); }
.finder-share .ic { color: var(--accent-bright); }

/* ── Logo: the wheel turns a quarter on hover ── */
.logo-icon img { transition: transform var(--t-slower); }
.logo:hover .logo-icon img { transform: rotate(-90deg); }

/* ── CTA odometer ── */
.cta-phone-num.is-odo { display: inline-flex; align-items: baseline; }
.odo-col { display: inline-block; height: 1.12em; overflow: hidden; vertical-align: bottom; }
.odo-strip { display: flex; flex-direction: column; transform: translateY(0); transition: transform 1.6s cubic-bezier(0.2, 0.9, 0.25, 1); }
.odo-strip > span { display: block; height: 1.12em; line-height: 1.12em; }
.is-rolled .odo-strip { transform: translateY(calc(var(--d) * -1.12em)); }
.odo-sep { display: inline-block; }

/* ── Reduced motion: freeze everything to a precise static state ── */
@media (prefers-reduced-motion: reduce) {
  .js-ready .hero [data-load],
  .js-ready .reveal { opacity: 1 !important; transform: none !important; animation: none !important; filter: none !important; }
  .hw-spin, .wi-ticks, .wi-text, .wi-arc,
  .ar-wl, .ar-wr, .ar-gl, .ar-gr, .ar-before, .ar-after, .ar-beam,
  .fs-needle, .fs-ring, .map-pin, .hero-cta-group,
  .hero-slide img,
  .hero-title .accent::after { animation: none !important; }
  .ar-before { opacity: 0 !important; }
  .ar-after { opacity: 1 !important; }
  .brands-inner {
    animation: none !important; flex-wrap: wrap; justify-content: center;
    width: auto; transform: none !important;
  }
  .brand-logo[aria-hidden="true"] { display: none; }
}

/* Scroll-linked wheel assembly (2026-10, v4): a 4K master rendered to
   WebP frames and scrubbed by scroll. Five chapters, orange timeline,
   light flashes when parts lock, a final light sweep, cinematic bars and
   a call to action once the wheel is finished. All effects are driven by
   CSS variables set in script.js (--ws-p, --ws-flash, --ws-sweep,
   --ws-bars). Reduced motion = the finished wheel, all copy, no motion. */
.wheel-story { --ws-bg: var(--scene-ground); position: relative; background: var(--ws-bg); color: var(--on-dark); }
.wheel-story.is-sequence { height: 240vh; height: 240svh; }
.wheel-story-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.wheel-story.is-sequence .wheel-story-stage { position: sticky; top: 0; }
.wheel-story-canvas, .wheel-story-poster, .wheel-story-vignette, .wheel-story-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.wheel-story-canvas { background: var(--ws-bg); opacity: 0; }
.wheel-story.has-frame .wheel-story-canvas { opacity: 1; }
.wheel-story.has-frame .wheel-story-poster { visibility: hidden; }
.wheel-story-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 55%; }

/* Light: a warm burst at the hub when a part locks, one sweep at the end */
.wheel-story-fx { pointer-events: none; mix-blend-mode: screen; overflow: hidden; }
.ws-glow {
  position: absolute; left: 50%; top: 46%; width: 70vmin; height: 70vmin; border-radius: 50%;
  transform: translate(-50%, -50%) scale(calc(0.55 + var(--ws-flash, 0) * 0.6));
  background: radial-gradient(circle, oklch(0.86 0.13 62 / 0.55) 0%, oklch(0.7 0.19 42 / 0.22) 34%, transparent 68%);
  opacity: var(--ws-flash, 0);
}
.ws-sweep {
  position: absolute; inset: -10% -60%;
  background: linear-gradient(104deg, transparent 42%, oklch(0.9 0.09 60 / 0.10) 47%, oklch(0.98 0.03 80 / 0.30) 50%, oklch(0.9 0.09 60 / 0.10) 53%, transparent 58%);
  transform: translateX(calc((var(--ws-sweep, 0) - 0.5) * 90%));
  opacity: var(--ws-sweep-on, 0);
}
.wheel-story-vignette {
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 70% at 50% 45%, transparent 45%, color-mix(in oklch, var(--ws-bg) 72%, transparent) 100%),
    linear-gradient(to top, var(--ws-bg) 0%, color-mix(in oklch, var(--ws-bg) 60%, transparent) 18%, transparent 38%);
}
/* Shared photographic ground: soft edges instead of hard cinema bars. */
.wheel-story-stage::before, .wheel-story-stage::after {
  content: ''; position: absolute; inset-inline: 0; z-index: 3;
  height: clamp(96px, 18svh, 260px); pointer-events: none;
}
.wheel-story-stage::before {
  top: 0;
  background: linear-gradient(to bottom, var(--ws-bg), color-mix(in oklch, var(--ws-bg) 82%, transparent) 34%, transparent);
}
.wheel-story-stage::after {
  bottom: 0;
  background: linear-gradient(to top, var(--ws-bg), color-mix(in oklch, var(--ws-bg) 82%, transparent) 34%, transparent);
}

/* Chapter timeline: bottom right, hands over to the call to action */
.wheel-story-hud {
  position: absolute; z-index: 4; right: max(var(--sp-5), env(safe-area-inset-right)); bottom: max(var(--sp-8), env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3);
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.wheel-story.is-done .wheel-story-hud { opacity: 0; transform: translateY(-10px); }
/* Hoppa förbi filmen: bara medan filmen spelas; när hjulet är klart visas "Hitta däck" */
.wheel-skip {
  position: absolute; z-index: 5; top: calc(var(--header-h, 72px) + var(--sp-5)); right: max(var(--sp-5), env(safe-area-inset-right));
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--sp-3);
  font-size: var(--fs-sm); font-weight: 650; color: var(--on-dark-body);
  border: 1px solid color-mix(in oklch, var(--on-dark) 22%, transparent); border-radius: var(--choice-shape);
  background: color-mix(in oklch, var(--ws-bg, #0e0906) 70%, transparent);
  transition: opacity var(--t), visibility var(--t), color var(--t), border-color var(--t);
}
.wheel-skip .ic { transform: rotate(90deg); }
.wheel-skip:hover { color: var(--on-dark); border-color: var(--accent-bright); }
.wheel-story.is-sequence .wheel-skip { display: inline-flex; }
.wheel-story.is-done .wheel-skip { opacity: 0; visibility: hidden; }
@media (max-width: 767px) {
  .wheel-skip { top: calc(env(safe-area-inset-top) + 128px); right: var(--sp-4); }
}
.ws-rail { position: relative; height: 2px; border-radius: 2px; background: oklch(1 0 0 / 0.14); }
.ws-rail-fill {
  position: absolute; inset: 0; border-radius: 2px; transform-origin: left center;
  transform: scaleX(min(1, calc(var(--ws-p, 0) / 0.93))); will-change: transform;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
}
.ws-steps { list-style: none; display: flex; gap: var(--sp-4); font-size: var(--fs-sm); font-weight: 600; color: var(--on-dark-muted); }
.ws-steps li { display: flex; gap: 8px; align-items: baseline; opacity: 0.42; transition: opacity var(--t), color var(--t); }
.ws-steps li.is-done { opacity: 0.72; }
.ws-steps li.is-current { opacity: 1; color: var(--on-dark); }
.ws-n { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent-bright); }

/* Copy: each chapter resolves from blur to sharp, like the hero titles */
.wheel-story-copy { position: absolute; z-index: 4; inset-inline: 0; bottom: max(var(--sp-8), env(safe-area-inset-bottom)); min-height: 2.7em; font-size: var(--fs-xl); }
.wheel-story-caption {
  position: absolute; inset-inline: var(--sp-5); bottom: 0; max-width: 18ch;
  opacity: 0; filter: blur(10px); transform: translateY(14px);
  font-weight: 300; line-height: 1.08; letter-spacing: -0.035em; text-shadow: 0 2px 30px oklch(0.1 0.006 48 / 0.7);
  transition: opacity var(--t-slow), filter var(--t-slow), transform var(--t-slow);
}
.wheel-story-caption.is-current { opacity: 1; filter: none; transform: none; }
.wheel-story-caption strong { font-weight: 800; color: var(--on-dark); }
.wheel-story-spec { margin-top: var(--sp-4); color: var(--on-dark-muted); font-size: var(--fs-spec); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.618; }
.wheel-story-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Call to action once the wheel is finished */
.wheel-story-cta {
  position: absolute; z-index: 4; right: max(var(--sp-5), env(safe-area-inset-right)); bottom: max(var(--sp-8), env(safe-area-inset-bottom));
  display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: flex-end;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity var(--t-slow), transform var(--t-slow), visibility 0s linear var(--t-slow);
}
.wheel-story.is-done .wheel-story-cta, .wheel-story:not(.is-sequence) .wheel-story-cta {
  opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-slow), transform var(--t-slow), visibility 0s;
}


@media (max-width: 767px) {
  .wheel-story.is-sequence { height: 180vh; height: 180svh; }
  .wheel-story-stage::before, .wheel-story-stage::after { height: clamp(72px, 16svh, 144px); }
  .wheel-story-hud { left: var(--sp-4); right: var(--sp-4); bottom: auto; top: calc(env(safe-area-inset-top) + 86px); }
  .ws-steps { font-size: var(--fs-xs); }
  .ws-steps li:not(.is-current) { display: none; }
  .ws-steps li::after { content: ' av 5'; color: var(--on-dark-muted); font-weight: 500; }
  .wheel-story-copy { bottom: calc(var(--sp-9) + var(--sp-4) + env(safe-area-inset-bottom)); font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .wheel-story-caption { inset-inline: var(--sp-4); max-width: 16ch; }
  .wheel-story-spec { max-width: 28ch; }
  .wheel-story-cta { display: none; }
  .wheel-story-poster img { object-fit: contain; object-position: 50% 45%; }
}
@media (prefers-reduced-motion: reduce) {
  .wheel-story.is-sequence { height: auto; }
  .wheel-story.is-sequence .wheel-story-stage { position: relative; }
  .wheel-story-canvas, .wheel-story-fx, .wheel-story-hud { display: none; }
  .wheel-story.has-frame .wheel-story-poster { visibility: visible; }
  .wheel-story-caption { transition: none; opacity: 0; filter: none; transform: none; }
  .wheel-story-caption[data-wheel-caption="4"] { opacity: 1; }
  .wheel-story-cta { transition: none; opacity: 1; visibility: visible; transform: none; }
}

/* Masterplan: short routes and honest catalogue evidence, in the existing system. */
.shop-evidence { max-width: 70ch; color: var(--on-dark-muted); margin-block: var(--sp-3); }
.shop-tools { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.callback-link { margin-top: var(--sp-3); }
.footer-callback { padding-block: var(--sp-6); border-bottom: 1px solid var(--ink-700); }
.footer-callback p { margin-top: var(--sp-3); max-width: 65ch; font-size: var(--fs-sm); color: var(--on-dark-muted); }

html.motion-paused .wheel-story-canvas, html.motion-paused .wheel-story-fx, html.motion-paused .wheel-story-hud { display: none; }
html.motion-paused .wheel-story-poster { visibility: visible; }
html.motion-paused .wheel-story-caption { opacity: 0; filter: none; transform: none; }
html.motion-paused .wheel-story-caption[data-wheel-caption="4"] { opacity: 1; }
html.motion-paused .wheel-story-cta { opacity: 1; visibility: visible; transform: none; }

.hero-service-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-4); font-size: var(--fs-sm); }
.hero-service-links a { color: var(--on-dark-body); text-decoration: underline; text-underline-offset: 0.22em; padding-block: 8px; }
.hero-service-links a:hover { color: var(--on-dark); }