/* ==========================================================================
   Grönstedt Bil — base: tokens, reset, typography, shared components
   Design reference: 1920px artboard, 120px side gutters, 1680px content.
   ========================================================================== */

/* Fonts (self-hosted, latin subset, variable weight; SIL OFL — see assets/fonts/OFL.txt) */
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lexend Deca";
  src: url("../fonts/lexend-deca-latin.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour — forest green + champagne gold (brand board) */
  --green-950: #031a10;    /* footer */
  --green-900: #052116;    /* dark sections, text on gold */
  --green-850: #072a1c;    /* header bar */
  --green-800: #0a2e1f;    /* brand green */
  --green-700: #0f3d29;    /* raised green surfaces */
  --gold: #cdb98f;         /* champagne accent on dark (8.9:1 on --green-900) */
  --gold-light: #e8dcc0;   /* highlights, hover, icons on green */
  --gold-deep: #7a6438;    /* accent text/icons on light (4.9:1 on --page) */
  --gold-grad: linear-gradient(135deg, #ece2c7 0%, #cdb98f 52%, #b29b6b 100%);
  --ivory: #f5f0e4;        /* text on dark */
  --page: #f1ede4;         /* page background */
  --surface: #fbf9f4;      /* cards on the page */
  --text: #0b1f16;         /* text on light */

  /* Contextual accent: bronze on light sections; dark sections set --accent: var(--gold) */
  --accent: var(--gold-deep);

  /* Type */
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", "Figtree", system-ui, sans-serif;
  --font-legal: "Lexend Deca", "Figtree", system-ui, sans-serif;

  --fs-h1: clamp(2rem, 1.25rem + 1.875vw, 3.5rem);        /* 56px @1920 */
  --fs-h2: clamp(1.875rem, 1.25rem + 1.458vw, 3rem);      /* 48px @1920 */
  --fs-h3: clamp(1.5rem, 1rem + 0.833vw, 2rem);           /* 32px @1920 */
  --fs-stat: clamp(2rem, 0.75rem + 1.875vw, 3rem);        /* 48px @1920 */

  /* Layout */
  --container: 1680px;
  --gutter: clamp(16px, 6.25vw, 120px);                   /* 120px @1920 */
  --section-space: clamp(80px, 4rem + 4.5vw, 150px);      /* 150px @1920 */
  --radius-card: 20px;

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

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

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

.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;
}

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ivory);
  color: var(--text);
  font-weight: 500;
}
.skip-link:focus { top: 16px; }

/* Layout ----------------------------------------------------------------- */
.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* Typography helpers ----------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  text-wrap: balance;
}
.display--h1 { font-size: var(--fs-h1); }
.display--h2 { font-size: var(--fs-h2); }

.lead {
  font-size: 1rem;
  line-height: 1.6;
  opacity: .7;              /* .7 keeps body copy at WCAG AA on --page */
  text-wrap: pretty;
}

/* Eyebrow: 12px rounded square + uppercase label, in the contextual accent */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .875rem;
  line-height: 1.6;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: currentColor;
}

/* Section heading stack: eyebrow (20px) title (8px) lead */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.section-head__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.section-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

/* Button: champagne-gold pill with label + forest-green 46px icon tile holding a gold arrow */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 54px;
  padding: 4px 4px 4px 20px;
  border-radius: 16px;
  background: var(--gold-grad);
  color: var(--green-900);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .875rem;
  line-height: 24px;
  white-space: nowrap;
  box-shadow: inset -10px -13px 20px 0 rgba(255, 255, 255, .2);
  transition: filter .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { filter: brightness(1.07) saturate(1.05); }
.btn:active { transform: translateY(1px); }

.btn__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--green-900);
  box-shadow: inset -10px -10px 20px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
}
.btn__icon img {
  width: 24px;
  height: 24px;
  transition: transform .3s var(--ease);
}
.btn:hover .btn__icon img { transform: translateX(3px); }

/* Semibold variant used in the CTA band */
.btn--strong { font-weight: 600; }
.btn--strong .btn__icon { box-shadow: none; }

/* Ghost variant for secondary actions on dark backgrounds */
.btn--ghost {
  background: rgba(245, 240, 228, .04);
  color: var(--ivory);
  box-shadow: inset 0 0 0 1px rgba(205, 185, 143, .55);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.btn--ghost:hover {
  filter: none;
  background: rgba(245, 240, 228, .1);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.btn--ghost .btn__icon {
  background: rgba(205, 185, 143, .14);
  box-shadow: none;
}

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

/* ==========================================================================
   01-header-hero
   ========================================================================== */

/* ==========================================================================
   01 — Site header (15:5162) + hero (15:5121 / 15:5122)
   66px header overlaying the top of a short split hero (sell form on the right).
   ========================================================================== */

/* The skip link (base.css) appears over the dark header bar: gold focus ring
   (8:1 on --green-850; the default bronze --accent is only 2.7:1 there). */
.skip-link { --accent: var(--gold); }

/* Header ------------------------------------------------------------------ */
.site-header {
  --header-h: 66px;
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  --accent: var(--gold);
  background: var(--green-850);
  color: var(--ivory);
}

/* 1px bottom rule: champagne gradient .2 → 1 → .2 at 35% opacity */
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(205, 185, 143, .2), var(--gold) 50%, rgba(205, 185, 143, .2));
  opacity: .35;
  pointer-events: none;
}

.site-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  /* 120px @1920; content stays on the 1680px container beyond that */
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
}

.site-header__logo {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  display: block;
  padding-block: 4px;
  border-radius: 4px;
  transition: opacity .25s var(--ease);
}
.site-header__logo img {
  width: auto;
  height: 22.854px;                          /* caps 18.2px; the Ö dots add the rest */
}
.site-header__logo:hover { opacity: .85; }

.site-header__toggle { display: none; }

.site-header__nav {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.site-header__list {
  display: flex;
  align-items: center;
  gap: clamp(24px, 5.7px + 1.786vw, 40px);   /* 40px @1920 */
}

.site-header__link {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  white-space: nowrap;
  border-radius: 4px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease), opacity .25s var(--ease);
}
.site-header__link:hover {
  color: var(--gold-light);
  text-decoration-color: rgba(205, 185, 143, .7);
}

/* Header CTA: "Sälj din bil" as a champagne-gold pill (the site's main goal) */
.site-header__link--cta {
  padding: 6px 16px;
  border-radius: 10px;
  background: var(--gold-grad);
  color: var(--green-900);
  font-weight: 500;
  text-decoration: none;
  box-shadow: inset -10px -13px 20px 0 rgba(255, 255, 255, .2);
  transition: filter .25s var(--ease);
}
.site-header__link--cta:hover {
  color: var(--green-900);
  filter: brightness(1.07) saturate(1.05);
}

/* Hero -------------------------------------------------------------------- */
/* Split layout: intro on the left, the sell-your-car card on the right.
   Kept short (≈560px @1440) so the stock section shows right below it. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: calc(66px + clamp(40px, 3.5vw, 72px)) var(--gutter) clamp(48px, 3.75vw, 72px);
  --accent: var(--gold);
  background: var(--green-900);
  color: var(--ivory);
}

.hero__bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 55%;
}

/* Darker on the left behind the copy, lighter where the photo shows through */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, var(--green-900) 0%, rgba(5, 33, 22, .88) 38%, rgba(5, 33, 22, .7) 70%, rgba(5, 33, 22, .82) 100%),
    linear-gradient(180deg, rgba(5, 33, 22, .4) 0%, transparent 40%, rgba(5, 33, 22, .6) 100%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  grid-template-areas:
    "intro card"
    "aside card";
  column-gap: clamp(48px, 6vw, 120px);
  row-gap: 32px;
  width: min(var(--container), 100%);
}

.hero__intro {
  grid-area: intro;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 640px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero__title {
  max-width: 100%;
  color: var(--ivory);
  overflow-wrap: break-word;
}

.hero__lead {
  max-width: 520px;
  font-size: 1rem;
  line-height: 1.6;
  opacity: .8;
  text-wrap: pretty;
}

.hero__aside {
  grid-area: aside;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* Sell card: the highlighted element of the hero */
.hero__card {
  grid-area: card;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border: 1px solid rgba(205, 185, 143, .35);
  border-radius: var(--radius-card);
  background: rgba(5, 33, 22, .45);
  -webkit-backdrop-filter: blur(45px);
  backdrop-filter: blur(45px);
  box-shadow: 0 30px 60px rgba(3, 26, 16, .35);
  scroll-margin-top: 90px;                   /* clears the header when linked to (#salj) */
}

.hero__card-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero__card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero__card-lead {
  font-size: .875rem;
  line-height: 1.5;
  opacity: .8;
}

.hero__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 12px;
}

.hero__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.hero__field--full { grid-column: 1 / -1; }

.hero__label {
  font-size: .8125rem;
  line-height: 1.4;
}

.hero__input {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(205, 185, 143, .5);   /* 3.4:1 vs the card: input boundary meets 1.4.11 */
  border-radius: 10px;
  background: rgba(245, 240, 228, .06);
  color: var(--ivory);
  font-size: .9375rem;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.hero__input::placeholder {
  color: rgba(245, 240, 228, .6);           /* ≥5.2:1 at rest and focused */
  opacity: 1;
}
.hero__input:hover { border-color: rgba(205, 185, 143, .7); }
.hero__input:focus {
  border-color: var(--gold);
  background: rgba(245, 240, 228, .1);
}
.hero__input:focus-visible { outline-offset: 2px; }
.hero__input:-webkit-autofill {
  -webkit-text-fill-color: var(--ivory);
  caret-color: var(--ivory);
  -webkit-box-shadow: inset 0 0 0 100px var(--green-700);
}

/* Registration number: plate-like, larger and spaced */
.hero__input--reg {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Mileage with a fixed "mil" suffix */
.hero__input-wrap { position: relative; }
.hero__input--unit { padding-right: 48px; }
.hero__unit {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: .875rem;
  color: rgba(245, 240, 228, .6);
  pointer-events: none;
}

/* Full-width gold button: label left, arrow tile right */
.hero__submit {
  justify-content: space-between;
  width: 100%;
  height: 58px;
  padding-left: 24px;
  font-size: 1rem;
}

/* Footnote: “Snabbt och enkelt | Inga dolda avgifter | 4,8/5 i kundbetyg” */
.hero__perks {
  display: flex;
  flex-wrap: wrap;
  font-size: .75rem;
  line-height: 1.6;
  opacity: .8;
}
.hero__perks li { white-space: nowrap; }
.hero__perks li + li::before {
  content: "|";
  content: "|" / "";
  padding-inline: .3em;
  color: rgba(205, 185, 143, .75);          /* × the list's .8 opacity = gold @ .6 */
}

/* Coarse pointers on wide screens still get touch-sized controls */
@media (pointer: coarse) {
  .hero__input { font-size: 1rem; }
  .hero__input--reg { font-size: 1.125rem; }
}

/* Laptop ------------------------------------------------------------------ */
@media (max-width: 1279px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
  .hero__card { padding: 28px; }
}

/* Tablet + mobile: logo left, menu button right, dropdown panel ------------ */
@media (max-width: 1023px) {
  .site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--gutter) calc(var(--gutter) - 11px);
  }

  .site-header__logo { padding-block: 13px; }

  .site-header__toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    color: var(--ivory);
    transition: background-color .25s var(--ease);
  }
  .site-header__toggle:hover { background: rgba(245, 240, 228, .08); }

  .site-header__burger,
  .site-header__burger::before,
  .site-header__burger::after {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .3s var(--ease), background-color .2s var(--ease);
  }
  .site-header__burger { position: relative; }
  .site-header__burger::before,
  .site-header__burger::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .site-header__burger::before { top: -7px; }
  .site-header__burger::after { top: 7px; }

  .site-header__toggle[aria-expanded="true"] .site-header__burger { background-color: transparent; }
  .site-header__toggle[aria-expanded="true"] .site-header__burger::before { transform: translateY(7px) rotate(45deg); }
  .site-header__toggle[aria-expanded="true"] .site-header__burger::after { transform: translateY(-7px) rotate(-45deg); }

  .site-header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: 8px 24px;
    background: var(--green-850);
    box-shadow: 0 24px 48px rgba(3, 26, 16, .45);
  }
  .site-header__toggle[aria-expanded="true"] + .site-header__nav { display: flex; }

  .site-header__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-header__link {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding-inline: var(--gutter);
    border-bottom: 1px solid rgba(205, 185, 143, .12);
    font-size: 1.125rem;
    text-underline-offset: 5px;
  }
  .site-header__link:focus-visible { outline-offset: -2px; }

  /* "Sälj din bil" becomes a full-width gold button at the end of the menu */
  .site-header__link--cta {
    justify-content: center;
    min-height: 52px;
    margin: 16px var(--gutter) 0;
    border-bottom: 0;
    border-radius: 12px;
  }
  .site-header__link--cta:focus-visible { outline-offset: 3px; }

  /* Hero: one column — intro, card, then the stock link */
  .hero { padding-block: calc(66px + 40px) 56px; }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "card"
      "aside";
    row-gap: 28px;
  }
  .hero__intro,
  .hero__aside { align-self: auto; }
  .hero__card { align-self: stretch; }

  /* Touch-sized controls; 16px inputs avoid iOS focus zoom */
  .hero__input {
    min-height: 48px;
    font-size: 1rem;
  }
}

/* Tablet: the three fields fit on one row */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero__fields { grid-template-columns: 1.2fr 1fr 1fr; }
  .hero__field--full { grid-column: auto; }
}

/* Mobile ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .hero { padding-block: calc(66px + 32px) 40px; }
  .hero__inner { row-gap: 24px; }
  .hero__intro { gap: 16px; }

  .hero__card {
    gap: 20px;
    padding: 20px;
    border-radius: 16px;
  }
  .hero__card-title { font-size: 1.25rem; }
  .hero__form { gap: 20px; }
  .hero__aside { gap: 16px; }
}

@media (max-width: 479px) {
  .hero__input { padding-inline: 14px; }
  .hero__input--unit { padding-right: 42px; }
  .hero__unit { right: 14px; }
  .hero__aside .btn { width: 100%; justify-content: space-between; }
}

/* Very narrow phones: stack the fields */
@media (max-width: 359px) {
  .hero__fields { grid-template-columns: minmax(0, 1fr); }
}

/* No JavaScript: show the links statically instead of the dropdown */
@media (max-width: 1023px) and (scripting: none) {
  .site-header { position: relative; }
  .site-header__bar {
    flex-wrap: wrap;
    height: auto;
  }
  .site-header__logo { padding-block: 24px; }
  .site-header__toggle { display: none; }
  .site-header__nav {
    position: static;
    display: flex;
    flex: 1 0 100%;
    margin-inline: calc(-1 * var(--gutter)) calc(11px - var(--gutter));
    box-shadow: none;
  }
  .hero { padding-top: 64px; }
}

/* Forced colors (Windows High Contrast): backgrounds are repainted as Canvas,
   so draw the burger lines in ButtonText and outline the filled buttons. */
@media (forced-colors: active) {
  .site-header__toggle { border: 1px solid ButtonText; }
  .site-header__burger,
  .site-header__burger::before,
  .site-header__burger::after {
    forced-color-adjust: none;
    background: ButtonText;
  }
  .site-header__toggle[aria-expanded="true"] .site-header__burger { background: transparent; }

  .site-header__link--cta,
  .btn--ghost { border: 1px solid ButtonText; }
}

/* ==========================================================================
   01b · Bilar i lager (stock) — directly under the hero
   ≥1280: 4 × 2 cards · 768–1279: 3 × 2 cards · <768: swipeable row of all 8
   ========================================================================== */

.stock {
  padding-top: clamp(40px, 3.5vw, 64px);
}

.stock__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(24px, 2.1vw, 40px);
}
.stock__head .section-head { gap: 12px; }
.stock__title { color: var(--text); }

.stock__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.25vw, 24px);
}

.stock__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(122, 100, 56, .14);
  border-radius: 16px;
  background: var(--surface);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.stock__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e4dfd3;                         /* warm placeholder while the photo loads */
}
.stock__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.stock__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 20px 20px;
}

.stock__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.3;
}
/* The whole card is clickable through the title link */
.stock__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.stock__link:focus-visible { outline: none; }
.stock__card:has(.stock__link:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.stock__variant {
  margin-top: 2px;
  font-size: .875rem;
  line-height: 1.5;
  opacity: .7;
}

/* Year, mileage, gearbox, fuel as small tags (wrap cleanly on narrow cards) */
.stock__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 16px;
}
.stock__specs li {
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(122, 100, 56, .1);
  font-size: .75rem;
  line-height: 1.6;
  white-space: nowrap;
  color: rgba(11, 31, 22, .8);
}

.stock__price {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(11, 31, 22, .1);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
}

@media (hover: hover) {
  .stock__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(11, 31, 22, .12);
  }
  .stock__card:hover .stock__img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .stock__card:hover,
  .stock__card:hover .stock__img { transform: none; }
}

/* The bottom "see all" button is only used on phones */
.stock__all--end { display: none; }

/* Laptop + tablet: 3 columns, first 6 cars */
@media (max-width: 1279px) {
  .stock__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stock__grid > .stock__item:nth-child(n + 7) { display: none; }
}

/* Phones: one swipeable row with all cars, next card peeking in */
@media (max-width: 767px) {
  .stock__head { margin-bottom: 20px; }
  .stock__head .stock__all { display: none; }

  .stock__grid {
    display: flex;
    gap: 12px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .stock__grid::-webkit-scrollbar { display: none; }
  .stock__grid > .stock__item,
  .stock__grid > .stock__item:nth-child(n + 7) {
    display: block;
    flex: 0 0 min(78%, 300px);
    scroll-snap-align: start;
  }
  .stock__body { padding: 14px 16px 16px; }

  .stock__all--end {
    display: inline-flex;
    margin-top: 20px;
  }
}

/* ==========================================================================
   02-philosophy
   ========================================================================== */

/* ==========================================================================
   02 · Giant wordmark (15:5593) + Philosophy (15:5178)
   ========================================================================== */

/* Giant decorative wordmark: full-bleed, brand green @ 5 % (baked into the SVG) */
.wordmark-hero {
  width: 100%;
  margin-top: clamp(56px, 5vw, 96px);
  pointer-events: none;
  user-select: none;
}
.wordmark-hero__img {
  width: 100%;
  height: auto;
  aspect-ratio: 7124 / 915;
}

/* Philosophy ------------------------------------------------------------- */
.philosophy {
  margin-top: 20px;
}

.philosophy__inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(48px, 7.03vw, 135px);            /* 135px @1920 */
}

/* Left: list of "plus" rows separated by 1px hairlines */
.philosophy__list {
  flex: 0 .3 473px;                            /* shrinks ~3x slower than the card so labels stay on one line */
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.philosophy__item {
  display: flex;
  align-items: flex-start;                     /* icon stays on the first line if a label wraps */
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;                          /* 20px */
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--text);
}
.philosophy__item + .philosophy__item {
  /* Figma: 12px gap, 1px line, 12px gap (line sits in the last px of the first gap) */
  margin-top: 11px;
  padding-top: 12px;
  border-top: 1px solid rgba(11, 31, 22, .12);
}
.philosophy__icon {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: calc((1.6em - 24px) / 2);         /* centred on the first 1.6 line box */
}
.philosophy__label {
  min-width: 0;
  text-wrap: balance;                          /* no lone word when a label wraps (≤360px) */
}

/* Right: ivory surface card (hairline drawn as an inset ring, so no layout change) */
.philosophy__card {
  flex: 1 1 1072px;
  max-width: 1072px;
  min-width: 0;
  padding: 48px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(122, 100, 56, .12);
}
.philosophy__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  max-width: 890px;
}
.philosophy__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.philosophy__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.6;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text);
}
.philosophy__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.philosophy__copy .lead {
  color: var(--text);
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1279px) {
  .philosophy__item { font-size: 1.125rem; }     /* 18px */
  .philosophy__card { padding: 40px; }
  .philosophy__title { line-height: 1.4; }
}

@media (max-width: 1023px) {
  .philosophy__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  .philosophy__list,
  .philosophy__card {
    flex: none;
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .philosophy__item { font-size: 1.0625rem; }    /* 17px */
  .philosophy__card { padding: 28px; }
  .philosophy__body { gap: 32px; }
  .philosophy__title { line-height: 1.3; }
}

@media (max-width: 479px) {
  .philosophy__card { padding: 24px 20px; }
  .philosophy__item { font-size: 1rem; }
}

/* ==========================================================================
   04-stats
   ========================================================================== */

/* ==========================================================================
   04 · Stats band (Figma 15:5211)
   Full-bleed dark band: background photo + vertical fade, intro text on the
   left and a 2×2 glass stat grid on the right.
   ========================================================================== */

.stats-band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(600px, 39.22vw, 753px);   /* 753px @1920 */
  margin-top: var(--section-space);
  overflow: hidden;
  --accent: var(--gold);              /* dark band: gold eyebrow + focus ring */
  background: var(--green-900);
  color: var(--ivory);
}

/* Background photo: Figma places it at left -14%, width 115.85%, full height.
   At 1920 the box has the photo's own aspect ratio, so object-fit only kicks in
   on other viewport shapes (and then keeps the car in frame). */
.stats-band__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--green-900);
}
.stats-band__bg {
  position: absolute;
  top: 0;
  left: -14%;
  width: 115.85%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 73% 50%;
  /* Green cast: the photo's near-black studio backdrop lifts to exactly
     --green-900 (per-channel max), so it melts into the band; the lit car keeps its tones */
  mix-blend-mode: lighten;
}
.stats-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--green-900) 0%,
    rgba(5, 33, 22, 0) 52.703%,
    var(--green-900) 100%
  );
}

/* Layout ----------------------------------------------------------------- */
.stats-band__inner {
  display: flex;
  align-items: center;
  /* 314px @1920, ~111px @1440, shrinking towards 40px */
  gap: clamp(40px, 42.3vw - 498px, 314px);
  padding-block: 96px;
}

.stats-band__intro {
  flex: 0 1 626px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.stats-band__intro .section-head { width: 100%; }

.stats-band__title { color: var(--ivory); }
.stats-band__lead { max-width: 573px; }

/* Glass stat grid -------------------------------------------------------- */
.stats-band__grid {
  flex: none;
  display: grid;
  /* 325 + 325 overlapping by 1px = 649px */
  grid-template-columns: 325px 324px;
  margin: 0;
}

.stats-band__cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 24px;
  border: 1px solid rgba(205, 185, 143, .25);
  background: rgba(5, 33, 22, .45);     /* smoked green glass: keeps the gold glyphs >= 3:1 over the headlight glow */
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
/* Collapse the shared 1px borders (cells overlap by -1px like the design) */
.stats-band__cell:nth-child(even) { margin-left: -1px; }
.stats-band__cell:nth-child(n + 3) { margin-top: -1px; }

/* Only the outer corners are rounded */
.stats-band__cell:nth-child(1) { border-top-left-radius: 16px; }
.stats-band__cell:nth-child(2) { border-top-right-radius: 16px; }
.stats-band__cell:nth-child(3) { border-bottom-left-radius: 16px; }
.stats-band__cell:nth-child(4) { border-bottom-right-radius: 16px; }

.stats-band__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;     /* 18px */
  line-height: 36px;
}

.stats-band__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-stat);
  line-height: 45px;
  /* Never wraps at normal spacing (the numbers use no-break spaces); breaks
     only as a last resort, e.g. with user text-spacing overrides (WCAG 1.4.12) */
  overflow-wrap: break-word;
}
.stats-band__accent { color: var(--gold); }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1279px) {
  .stats-band { min-height: 640px; }

  /* The photo is relatively larger here: nudge the car right and darken the
     text side for contrast */
  .stats-band__bg { object-position: 60% 50%; }
  .stats-band__media::after {
    background:
      linear-gradient(to right, var(--green-900) 0%, rgba(5, 33, 22, .95) 38%, rgba(5, 33, 22, .75) 52%, rgba(5, 33, 22, 0) 64%),
      linear-gradient(to bottom, var(--green-900) 0%, rgba(5, 33, 22, 0) 52.703%, var(--green-900) 100%);
  }

  .stats-band__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }

  .stats-band__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats-band__cell { padding: 20px; }
}

@media (max-width: 1023px) {
  .stats-band { min-height: 0; }

  /* Stacked: the car sits behind the stat grid at the bottom of the band */
  .stats-band__media {
    top: auto;
    height: clamp(340px, 62vw, 520px);
  }
  .stats-band__bg {
    left: 0;
    width: 100%;
    object-position: 94% 50%;
  }
  .stats-band__media::after {
    background: linear-gradient(
      to bottom,
      var(--green-900) 0%,
      rgba(5, 33, 22, 0) 52.703%,
      var(--green-900) 100%
    );
  }

  .stats-band__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    padding-block: 80px;
  }
  .stats-band__intro { max-width: 626px; }
}

@media (max-width: 767px) {
  .stats-band__inner {
    gap: 40px;
    padding-block: 64px;
  }
  .stats-band__label {
    font-size: 1rem;
    line-height: 1.6;
  }
  .stats-band__value { line-height: 1.1; }
}

@media (max-width: 479px) {
  .stats-band__cell {
    gap: 6px;
    padding: 16px;
  }
  .stats-band__label { font-size: .9375rem; }
  .stats-band__value { font-size: clamp(1.5rem, 8.5vw, 1.875rem); }  /* 30px from ~353px, 27.2px @320 */
}

/* ==========================================================================
   05-how
   ========================================================================== */

/* ==========================================================================
   05 · How we work (Figma 15:5249)
   Centered heading, a video thumbnail flanked by "©2026" / "Vår historia",
   and four stat cards aligned to the thumbnail width.
   ========================================================================== */

.how {
  margin-top: var(--section-space);
}

.how__inner {
  /* Width reserved for each side label: 233px @1920 (1680 − 2×233 = 1214) */
  --how-side: clamp(150px, 12.14vw, 233px);
  --how-w: min(1214px, 100% - 2 * var(--how-side));

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Heading ---------------------------------------------------------------- */
.how__head {
  max-width: 626px;
  margin-bottom: 60px;
}
.how__title { color: var(--text); }

/* Media row: label | thumbnail | label ----------------------------------- */
.how__media {
  display: grid;
  grid-template-columns:
    minmax(var(--how-side), 1fr)
    minmax(0, 1214px)
    minmax(var(--how-side), 1fr);
  align-items: center;
  width: 100%;
}

.how__side {
  /* 32px @1920, 24px @1280 */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.5rem, .5rem + 1.25vw, 2rem);
  line-height: 1.2;
  white-space: nowrap;
  /* the labels sit 9px above the thumbnail's centre line in the design */
  margin-bottom: .5625em;
}
.how__side--start { justify-self: start; }
.how__side--end { justify-self: end; }

.how__video {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  aspect-ratio: 1214 / 575;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--green-900);
}
.how__poster {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Green cast: the near-black backdrop lifts to --green-900 (per-channel max); neon + car keep their tones */
  mix-blend-mode: lighten;
}
.how__video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(3, 26, 16, .2);
  pointer-events: none;
}

/* Play badge: decorative (aria-hidden <span>) until a video exists. When one
   is added, make it a <button>/<a> and give it hover + :focus-visible states. */
.how__play {
  display: inline-flex;
  align-items: center;
  gap: 23px;
  padding: 0;
  border-radius: 100px;
  color: var(--ivory);
  font-family: var(--font-body);
  font-weight: 500;
  /* 40px @1920 */
  font-size: clamp(1.5rem, .5rem + 1.667vw, 2.5rem);
  line-height: 1.2;
  text-align: center;
}
.how__play-text { white-space: nowrap; }

.how__play-icon {
  display: grid;
  place-items: center;
  flex: none;
  padding: 20px;
  border: 1px solid rgba(205, 185, 143, .35);
  border-radius: 100px;
  background: rgba(245, 240, 228, .1);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.how__play-icon img {
  width: 34px;
  height: 34px;
}

/* Stat cards ------------------------------------------------------------- */
.how__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: var(--how-w);
  margin: 40px 0 0;
}

.how__stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 24px;
  border: 1px solid rgba(122, 100, 56, .12);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
}
/* Brand-green highlight card: ivory text, champagne edge + soft gold inner glow */
.how__stat--highlight {
  --accent: var(--gold);
  border-color: rgba(205, 185, 143, .2);
  background: var(--green-800);
  color: var(--ivory);
  box-shadow: inset 0 -13px 50px 0 rgba(205, 185, 143, .12);
}

.how__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
}

.how__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(10, 46, 31, .06);
}
.how__stat--highlight .how__icon { background: rgba(205, 185, 143, .14); }
.how__icon img {
  width: 24px;
  height: 24px;
}

.how__value {
  /* pinned to the card bottom so values line up when a label wraps */
  margin: auto 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  /* 36px @1920 */
  font-size: clamp(1.75rem, 1rem + 1.042vw, 2.25rem);
  line-height: 45px;
  /* Never wraps at normal spacing (the numbers use no-break spaces); breaks
     only as a last resort, e.g. with user text-spacing overrides (WCAG 1.4.12) */
  overflow-wrap: break-word;
}
.how__accent { color: var(--gold-deep); }
.how__stat--highlight .how__accent { color: var(--gold); }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1279px) {
  /* Side labels move into a row above the thumbnail */
  .how__inner { --how-w: 100%; }

  .how__head { margin-bottom: 48px; }

  .how__media {
    grid-template-columns: 1fr 1fr;
    row-gap: 16px;
  }
  .how__side {
    grid-row: 1;
    margin: 0;
    font-size: 1.25rem;
  }
  .how__video {
    grid-row: 2;
    grid-column: 1 / -1;
  }
}

@media (max-width: 1023px) {
  .how__head { margin-bottom: 40px; }
  .how__side { font-size: 1.125rem; }

  .how__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 24px;
  }
}

@media (max-width: 767px) {
  .how__head { margin-bottom: 32px; }
  .how__side { font-size: 1rem; }
  .how__video { border-radius: 16px; }

  .how__play {
    gap: 16px;
    font-size: 1.375rem;
    /* tighter dark halo: keeps the smaller label readable over the orange neon */
    text-shadow: 0 1px 3px rgba(3, 26, 16, .8), 0 0 16px rgba(3, 26, 16, .7);
  }
  .how__play-icon { padding: 14px; }
  .how__play-icon img { width: 28px; height: 28px; }

  .how__stats { margin-top: 16px; }
  .how__stat { padding: 20px; }
  .how__label { gap: 24px; }
}

@media (max-width: 479px) {
  .how__play { gap: 12px; font-size: 1.125rem; }
  .how__play-icon { padding: 12px; }
  .how__play-icon img { width: 24px; height: 24px; }

  .how__stats { gap: 8px; }
  .how__stat {
    gap: 4px;
    padding: 16px;
    border-radius: 16px;
  }
  .how__label {
    gap: 16px;
    font-size: .875rem;
  }
  .how__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .how__value {
    font-size: clamp(1.25rem, 7vw, 1.5rem);   /* 24px from ~343px, 22.4px @320 */
    line-height: 1.3;
  }
}

/* ==========================================================================
   06-reviews
   ========================================================================== */

/* ==========================================================================
   06 — Kundomdömen (Figma 15:5309)
   Full-bleed forest-green band, 914px tall @1920. Two staggered rows of five cards;
   the pair of rows is centred on the viewport and clipped by the band edges.
   ========================================================================== */

.reviews {
  /* Card geometry — every row/offset value derives from these */
  /* card width: 446.656px up to 1920; on wider screens the cards grow so the
     strip keeps overhanging both edges exactly as it does at 1920 */
  --rv-card: max(446.656px, (100vw + 313.28px) / 5);
  --rv-gap: 12px;                /* gap between cards in a row */
  --rv-offset: 170px;            /* row 2 shifted right */
  --rv-row-gap: 20px;            /* vertical gap between rows */
  --rv-pad: 32px;                /* card padding */
  --rv-track: calc(5 * var(--rv-card) + 4 * var(--rv-gap) + var(--rv-offset));

  margin-top: var(--section-space);
  padding-block: clamp(80px, 2.5rem + 4.6875vw, 130px);   /* 130px @1920 */
  /* soft lighter centre, like the brand board; solid --green-900 underneath */
  background: radial-gradient(ellipse at 50% 40%, var(--green-800), var(--green-900) 70%) var(--green-900);
  color: var(--ivory);
  --accent: var(--gold);            /* dark section: eyebrow + focus ring in champagne */
  overflow: hidden;                 /* = the Figma mask */
}

/* Heading ---------------------------------------------------------------- */
.reviews__title {
  color: var(--ivory);
  white-space: nowrap;
}

/* Track: both rows, wider than the viewport, centred on it ---------------- */
.reviews__track {
  display: flex;
  flex-direction: column;
  gap: var(--rv-row-gap);
  width: var(--rv-track);
  margin-top: 60px;
  margin-left: calc(50% - var(--rv-track) / 2);
}

.reviews__row {
  display: flex;
  gap: var(--rv-gap);
}
.reviews__row--offset { margin-left: var(--rv-offset); }

.reviews__item {
  flex: none;
  display: flex;
  width: var(--rv-card);
}

/* Card ------------------------------------------------------------------- */
.reviews__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: var(--rv-pad);
  border-radius: var(--radius-card);
  background: linear-gradient(to bottom, rgba(15, 61, 41, .55), rgba(205, 185, 143, .07));
  box-shadow: inset 0 0 0 1px rgba(205, 185, 143, .12);   /* champagne hairline; inset so it adds no size */
  overflow: hidden;
}

.reviews__stars {
  width: 87.998px;
  height: 12px;
}

.reviews__quote p {
  max-width: max(367px, var(--rv-card) * .8216);   /* 367 of 446.656 */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 27px;
  color: rgba(245, 240, 228, .9);   /* --ivory @ .9 */
  text-wrap: pretty;
}

.reviews__person {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reviews__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.reviews__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 21.6px;
  color: var(--ivory);
  white-space: nowrap;
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Each row's centre card sits offset/2 off-centre, so card + offset must
     fit between the gutters for both centre cards to be fully visible. */
  .reviews {
    --rv-offset: clamp(48px, 14vw, 134px);
    --rv-card: min(446.656px, 100vw - 2 * var(--gutter) - var(--rv-offset));
    --rv-pad: 24px;
  }
  .reviews__title { white-space: normal; }
  .reviews__track { margin-top: 40px; }
}

@media (max-width: 479px) {
  .reviews {
    --rv-gap: 10px;
    --rv-row-gap: 12px;
  }
  .reviews__quote p {
    font-size: .9375rem;
    line-height: 25px;
  }
}

/* ==========================================================================
   07-blog
   ========================================================================== */

/* ==========================================================================
   07 — Blogginlägg (Figma 15:5453)
   1680 = 470 (intro) + 126 (gap) + 1084 (two 534x454 cards, gap 16).
   Card images carry their own rounded corners and a transparent notch in the
   top-right corner; the forest-green arrow tile sits inside that notch. All in-card
   offsets are in cqw (card width) so the tile always fits the baked notch.
   ========================================================================== */

.blog {
  margin-top: var(--section-space);
}

.blog__inner {
  display: grid;
  /* min-content = the one-line title, so the intro column never gets narrower
     than its heading (1280–1616: 351–396px; above that the 470fr share wins) */
  grid-template-columns: minmax(min-content, 470fr) minmax(0, 1084fr);
  column-gap: 7.5%;                 /* 126px of 1680 */
  align-items: center;
}

/* Intro column ----------------------------------------------------------- */
.blog__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  min-width: 0;
}
.blog__intro .section-head { width: 100%; }

.blog__title {
  color: var(--text);
  white-space: nowrap;               /* two words: keep on one line beside the cards */
}

.blog__lead {
  max-width: 470px;
  color: var(--text);
}

/* Cards ------------------------------------------------------------------ */
.blog__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.blog__item { min-width: 0; }

.blog__card {
  position: relative;
  display: grid;
  aspect-ratio: 534 / 454;
  container-type: inline-size;
  isolation: isolate;
  color: var(--ivory);
}

.blog__img,
.blog__body { grid-area: 1 / 1; }

.blog__img {
  position: relative;
  z-index: -1;                       /* keeps the text above the image when the hover filter applies */
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter .35s var(--ease);
}

/* Forest-green scrim over the lower photo: gives the images the brand's green
   cast and keeps the ivory date/title at WCAG AA (also with the hover brighten).
   Absolutely positioned, so it is not a grid item and adds no layout; z-index -1
   paints it above the image (same layer, later in tree order) and below the text.
   Radii = the image's baked 20px corners at 534x454, as % so they scale with it. */
.blog__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0 0 3.7453% 3.7453% / 0 0 4.4053% 4.4053%;
  background: linear-gradient(to top, rgba(3, 26, 16, .6), rgba(3, 26, 16, .45) 36%, rgba(3, 26, 16, 0) 72%);
  pointer-events: none;
}

/* Text overlay: left 32 / bottom ~33 of 534 */
.blog__body {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 5.9925cqw 6.142cqw;
}

.blog__date {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .875rem;
  line-height: 1.4;
  white-space: nowrap;
}

.blog__card-title {
  max-width: 388px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.6;
  text-wrap: balance;
}

/* Whole card is the link; accessible name = the title */
.blog__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}
.blog__link:focus-visible { outline: none; }
.blog__link:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Arrow tile: 46/534 of the card, top-right, inside the notch */
.blog__arrow {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 8.6142cqw;
  aspect-ratio: 1;
  border-radius: 2.2472cqw;          /* 12px @534 */
  background: var(--green-800);
  box-shadow: inset -10px -10px 20px 0 rgba(205, 185, 143, .14);   /* champagne sheen, kept low so the tile stays rich green */
  overflow: hidden;
  transition: background-color .25s var(--ease);
}
.blog__arrow img {
  width: 52.174%;                    /* 24 of 46 */
  height: auto;
  transition: transform .3s var(--ease);
}

/* Hover/focus: tile turns champagne-gold (like .btn) and the gold-light arrow
   is recoloured to --green-900 so it stays legible on the gold */
.blog__card:hover .blog__arrow,
.blog__card:focus-within .blog__arrow {
  background-color: var(--gold);
  background-image: var(--gold-grad);
  box-shadow: inset -10px -10px 20px 0 rgba(255, 255, 255, .25);   /* sheen on gold */
}
.blog__card:hover .blog__arrow img,
.blog__card:focus-within .blog__arrow img {
  transform: translateX(2px);
  filter: sepia(1) hue-rotate(68deg) saturate(6) brightness(.13);   /* --gold-light -> --green-900 (measured 5,33,22) */
}
.blog__card:hover .blog__img { filter: brightness(1.12); }

/* Narrow cards: smaller title so it never crowds the image */
@container (max-width: 420px) {
  .blog__card-title {
    font-size: 1rem;
    line-height: 1.5;
  }
  .blog__date { font-size: .8125rem; }
}

/* Responsive ------------------------------------------------------------- */
/* Below 1280 a 470px-ish intro column would squeeze the cards to ~250px,
   so the intro moves above the cards: heading left, button bottom-right. */
@media (max-width: 1279px) {
  .blog__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }
  .blog__intro {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    column-gap: 40px;
  }
  .blog__intro .section-head {
    width: auto;
    flex: 0 1 640px;
  }
  .blog__title { white-space: normal; }
  .blog__lead { max-width: 560px; }
}

@media (max-width: 767px) {
  .blog__inner { row-gap: 40px; }
  .blog__intro {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 32px;
  }
  .blog__intro .section-head { flex: none; width: 100%; }
  .blog__list {
    grid-template-columns: minmax(0, 1fr);
    max-width: 534px;
  }
}

/* ==========================================================================
   08-cta
   ========================================================================== */

/* ==========================================================================
   08 · CTA band (Figma 15:5491) — full-bleed photo, 72 % forest-green overlay,
   centred ivory heading + lead + two champagne-gold buttons. 558px tall at 1920.
   ========================================================================== */

.cta {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(480px, 29.07vw, 558px);
  margin-top: var(--section-space);
  padding: 80px var(--gutter);
  overflow: hidden;
  --accent: var(--gold); /* dark band: gold focus rings */
  background: var(--green-900); /* shown until the photo has loaded */
  color: var(--ivory);
  text-align: center;
}

/* Background photo: crop exactly as the design (120.42 % wide, 109.14 % tall,
   shifted -10.21 % left, top aligned). object-fit keeps proportions when the
   band gets taller than the design ratio on small screens. */
.cta__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.cta__img {
  position: absolute;
  top: 0;
  left: -10.21%;
  width: 120.42%;
  max-width: none;
  height: 109.14%;
  object-fit: cover;
  object-position: 50% 0;
}
.cta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(3, 26, 16, .72); /* green-950 @ 72 %: photo takes a forest cast */
}

/* Content stack: text (gap 8) -> 40 -> buttons */
.cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}
.cta__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cta__title { color: var(--ivory); }
.cta__lead { max-width: 590px; }

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Mobile ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .cta {
    min-height: 0;
    padding-block: 96px;
  }
  .cta__br { display: none; }
  .cta__content { gap: 32px; }
  .cta__text { gap: 12px; }
}

@media (max-width: 479px) {
  .cta { padding-block: 80px; }
  .cta__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
  }
  .cta__btn { justify-content: space-between; }
}

/* ==========================================================================
   09-footer
   ========================================================================== */

/* ==========================================================================
   09 · Footer (Figma 15:5512) — --green-950, 100px padding, 1664px inner width.
   Top block (heading | 982px panel) -> 100px -> giant champagne wordmark.
   Ivory type, champagne hairlines, gold Subscribe and accents.
   ========================================================================== */

.site-footer {
  --accent: var(--gold);                    /* dark section: gold focus rings */
  --footer-line: rgba(205, 185, 143, .12);  /* champagne row rules */
  --footer-muted: rgba(245, 240, 228, .55); /* muted ivory, 5.5:1 on --green-950 */

  border-top: 1px solid rgba(205, 185, 143, .15);
  padding-block: 100px;
  background: var(--green-950);
  color: var(--ivory);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 100px;
  width: min(1664px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.site-footer a {
  transition: color .2s var(--ease);
}

/* Top block --------------------------------------------------------------- */
.site-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.site-footer__title {
  flex: 1 1 0;
  min-width: 9.3em; /* never narrower than "Redo att köpa eller" */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, .866rem + 1.154vw, 2.25rem); /* 36px @1920 */
  line-height: 1.3;
  text-wrap: balance;
}

.site-footer__panel {
  display: flex;
  flex: 0 1 982px;
  flex-direction: column;
  min-width: 0;
}

/* Row A: link columns + newsletter. One 4-track grid (the nav is a subgrid
   over the first three tracks) so all four columns get the same spacing,
   whatever the length of the Swedish labels. Newsletter stays flush right. */
.site-footer__main {
  display: grid;
  grid-template-columns: repeat(3, auto) minmax(300px, 351px);
  justify-content: space-between;
  column-gap: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--footer-line);
}

.site-footer__nav {
  display: grid;
  grid-column: 1 / 4;
  grid-template-columns: subgrid;
  align-items: start;
}
@supports not (grid-template-columns: subgrid) {
  .site-footer__nav {
    display: flex;
    justify-content: space-between;
    gap: 48px;
  }
}

.site-footer__col {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 12px;
}

.site-footer__col-title {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .75rem;
  line-height: 1.6;
  text-transform: uppercase;
  opacity: .55;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 300;
  font-size: .875rem;
  line-height: 1.6;
}
.site-footer__links a {
  color: rgba(245, 240, 228, .75);
  white-space: nowrap;
}
.site-footer__links a:hover { color: var(--gold-light); }

/* Newsletter */
.site-footer__news {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.site-footer__news-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 27px;
}

.site-footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 4px 4px 4px 20px;
  /* champagne @ .55: the field boundary keeps 3:1 against the footer and the fill */
  border: 1px solid rgba(205, 185, 143, .55);
  border-radius: 16px;
  background: rgba(245, 240, 228, .06);
  transition: border-color .2s var(--ease);
}
/* As in the design, the pill's inner shadow is painted on top of its content
   (it softly deepens the right/bottom edge of the gold button too). */
.site-footer__field::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset -10px -13px 20px 0 rgba(3, 26, 16, .2);
  pointer-events: none;
}
.site-footer__field:hover { border-color: rgba(205, 185, 143, .8); }

.site-footer__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ivory);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .875rem;
  line-height: 24px;
}
.site-footer__input::placeholder {
  color: var(--ivory);
  opacity: .55;
}
.site-footer__input:focus { outline: none; }
.site-footer__field:has(.site-footer__input:focus-visible) {
  border-color: var(--gold);
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@supports not selector(:has(*)) {
  .site-footer__input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

.site-footer__submit {
  flex: none;
  height: 46px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--gold-grad);
  color: var(--green-900);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .875rem;
  line-height: 24px;
  white-space: nowrap;
  box-shadow: inset -10px -10px 20px 0 rgba(255, 255, 255, .25);
  transition: filter .2s var(--ease);
}
.site-footer__submit:hover { filter: brightness(1.07) saturate(1.05); }
.site-footer__submit:active { filter: brightness(.94); }

.site-footer__hint {
  font-weight: 300;
  font-size: .75rem;
  line-height: 1.6;
  opacity: .55;
}

/* Row B: trust badges + social */
.site-footer__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-block: 20px;
  border-bottom: 1px solid var(--footer-line);
}

.site-footer__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px clamp(16px, 1.25vw, 24px); /* 24px @1920 */
}

.site-footer__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .875rem;
  line-height: 1.2;
}

.site-footer__badge-icon {
  display: grid;
  flex: none;
  place-items: center;
  padding: 8px;
  border-radius: 10px;
  background: rgba(205, 185, 143, .1);
}
.site-footer__badge-icon img {
  width: 14px;
  height: 14px;
}
.site-footer__badge-icon--lg img {
  width: 16px;
  height: 16px;
}

.site-footer__badge-label { opacity: .55; }

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* 32px hit area around each 20px icon, without changing the 12px rhythm */
.site-footer__social a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -6px;
  border-radius: 8px;
}
.site-footer__social img {
  width: 20px;
  height: 20px;
  transition: filter .2s var(--ease);
}
/* Ivory icons tint to champagne gold (within a few RGB steps of --gold) on hover */
.site-footer__social a:hover img { filter: sepia(.05) saturate(4) brightness(.79); }

/* Row C: copyright + legal links */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 20px;
  font-family: var(--font-legal);
  font-weight: 300;
  font-size: .875rem;
  line-height: 1.2;
}

.site-footer__copy { opacity: .55; }

.site-footer__legal-links {
  display: flex;
  gap: 12px;
}
/* Dim the text colour, not the element, so the focus ring stays full gold */
.site-footer__legal-links a {
  color: var(--footer-muted);
  transition: color .2s var(--ease);
}
.site-footer__legal-links a:hover { color: var(--gold-light); }

/* Giant wordmark ------------------------------------------------------------ */
.site-footer__wordmark {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Heading + 982px panel no longer fit side by side with the Swedish labels:
   stack them (heading above, panel full width). */
@media (max-width: 1399px) {
  .site-footer__top {
    flex-direction: column;
    gap: 40px;
  }
  .site-footer__title {
    flex: none;
    min-width: 0;
  }
  .site-footer__panel {
    flex: none;
    width: 100%;
  }
}

@media (max-width: 1023px) {
  .site-footer { padding-block: 80px; }
  .site-footer__inner { gap: 72px; }

  .site-footer__main {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .site-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
  }
  .site-footer__links a { white-space: normal; }

  .site-footer__news {
    justify-content: flex-start;
    gap: 16px;
  }
  .site-footer__newsletter { max-width: 480px; }

  .site-footer__trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .site-footer__badges {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 12px 32px;
  }

  /* Touch: 44px hit areas (negative margin keeps the 20px footprint),
     icons 24px apart so neighbouring hit areas never overlap */
  .site-footer__social { gap: 24px; }
  .site-footer__social a {
    width: 44px;
    height: 44px;
    margin: -12px;
  }
}

@media (max-width: 767px) {
  .site-footer { padding-block: 64px; }
  .site-footer__inner { gap: 48px; }
  .site-footer__top { gap: 32px; }

  .site-footer__nav { gap: 28px 24px; }

  .site-footer__legal {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Tablets, phones and coarse pointers on wide screens: 44px tall tap targets
   in the link lists, 46px hit area on the legal links (no layout shift), and
   16px input text so iOS Safari does not zoom on focus (as in the hero). */
@media (max-width: 1023px), (pointer: coarse) {
  .site-footer__col { gap: 4px; }
  .site-footer__links { gap: 0; }
  .site-footer__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .site-footer__legal-links a {
    display: inline-block;
    padding-block: 14px;
    margin-block: -14px;
  }
  .site-footer__input { font-size: 1rem; }
}

/* Three link columns stop fitting the longest Swedish label below ~560px */
@media (max-width: 559px) {
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
  .site-footer__badges { grid-template-columns: minmax(0, 1fr); }
  /* Room for the 16px placeholder "Ange din e-postadress" down to 360px */
  .site-footer__submit { padding: 0 16px; }
}

/* ==========================================================================
   10-car-page
   ========================================================================== */

/* ==========================================================================
   10 · Bilsida (bilar/bil.html?id=<slug>, rendered by assets/js/bilsida.js)
   Phones: gallery → name + price → Ring / Boka visning directly below the
   photos; a fixed bar repeats price + actions once those scroll away.
   Desktop: gallery + details on the left, sticky summary card on the right.
   ========================================================================== */

/* No dark hero to overlay here, so the header sits in the flow */
.page-car .site-header { position: relative; }
.page-car main { padding-bottom: var(--section-space); }

/* Breadcrumbs ------------------------------------------------------------ */
.car__crumbs { padding-top: 20px; }
.car__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  font-size: .8125rem;
  line-height: 1.6;
  color: rgba(11, 31, 22, .72);
}
.car__crumbs li + li::before {
  content: "/";
  content: "/" / "";
  padding-inline: .5em;
  color: var(--gold-deep);
}
.car__crumbs a {
  text-decoration: underline;
  text-decoration-color: rgba(11, 31, 22, .25);
  text-underline-offset: 3px;
  border-radius: 2px;
  transition: color .2s var(--ease);
}
.car__crumbs a:hover { color: var(--gold-deep); }
.car__crumbs [aria-current] {
  color: var(--text);
  font-weight: 500;
}

/* Layout ----------------------------------------------------------------- */
.car__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  grid-template-areas:
    "gallery summary"
    "details summary";
  align-items: start;
  column-gap: clamp(32px, 3.5vw, 64px);
  row-gap: 56px;
  margin-top: 16px;
}
.car__gallery { grid-area: gallery; min-width: 0; }
.car__details {
  grid-area: details;
  display: flex;
  flex-direction: column;
  gap: 48px;
  min-width: 0;
}

/* Gallery ---------------------------------------------------------------- */
.gallery__frame {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #e4dfd3;                         /* warm placeholder while photos load */
}
.gallery__track {
  position: relative;
  display: flex;
  aspect-ratio: 4 / 3;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline-offset: -4px; }
.gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(3, 26, 16, .72);
  color: var(--ivory);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.gallery__nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  background: rgba(245, 240, 228, .92);
  color: var(--green-900);
  box-shadow: 0 4px 14px rgba(3, 26, 16, .25);
  transition: opacity .2s var(--ease), background-color .2s var(--ease);
}
.gallery__nav svg { width: 22px; height: 22px; }
.gallery__nav:hover { background: var(--ivory); }
.gallery__nav:disabled { opacity: 0; pointer-events: none; }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.gallery__nav[hidden] { display: none; }
@media (hover: none) {
  .gallery__nav { display: none; }            /* touch: swipe instead */
}

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.gallery__thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 2px solid transparent;
  border-radius: 10px;
  opacity: .62;
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb[aria-current] {
  border-color: var(--gold-deep);
  opacity: 1;
}
.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Summary: name, price, actions ------------------------------------------ */
.car__summary {
  grid-area: summary;
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  border: 1px solid rgba(122, 100, 56, .14);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.car__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.625rem, 1.2rem + .9vw, 2.25rem);
  line-height: 1.15;
  text-wrap: balance;
}
.car__variant {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(11, 31, 22, .72);
}

.car__price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.875rem, 1.4rem + 1vw, 2.5rem);
  line-height: 1.1;
}

.car__actions {
  display: grid;
  gap: 10px;
}
.car__actions .car-btn--book { order: -1; }   /* desktop: booking first, full width */

.car__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.car__tags li {
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(122, 100, 56, .1);
  font-size: .8125rem;
  line-height: 1.6;
  white-space: nowrap;
}

.car__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(11, 31, 22, .1);
  font-size: .8125rem;
  line-height: 1.5;
  color: rgba(11, 31, 22, .78);
}
.car__trust li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.car__trust svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--gold-deep);
}

/* Buttons: gold "Boka visning", forest-green "Ring" */
.car-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 20px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: filter .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.car-btn svg {
  flex: none;
  width: 20px;
  height: 20px;
}
.car-btn:active { transform: translateY(1px); }

.car-btn--book {
  background: var(--gold-grad);
  color: var(--green-900);
  box-shadow: inset -10px -13px 20px 0 rgba(255, 255, 255, .2);
}
.car-btn--book:hover { filter: brightness(1.07) saturate(1.05); }

.car-btn--call {
  background: var(--green-900);
  color: var(--ivory);
}
.car-btn--call svg { color: var(--gold); }
.car-btn--call:hover { background: var(--green-700); }
.car-btn__num { font-weight: 500; }

.car-btn--square {
  width: 48px;
  padding: 0;
}

/* Details: facts + equipment -------------------------------------------- */
.car__h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--text);
}
.car__details .car__h2 { margin-bottom: 16px; }

.car__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  margin: 0;
}
.car__fact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 13px;
  border-bottom: 1px solid rgba(11, 31, 22, .1);
}
.car__fact dt { color: rgba(11, 31, 22, .72); }
.car__fact dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
}

.car__equipment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 32px;
}
.car__equipment li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.car__equipment li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  background: var(--gold-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='7.7'/%3E%3Cpath d='M5.8 9.4l2.2 2.1 4.3-4.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='7.7'/%3E%3Cpath d='M5.8 9.4l2.2 2.1 4.3-4.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* "Fler bilar i lager": reuses the stock cards ---------------------------- */
.stock--related { padding-top: var(--section-space); }

/* Fixed action bar (phones + tablets only) ------------------------------- */
.car-bar { display: none; }

/* Booking dialog --------------------------------------------------------- */
html:has(.booking[open]) { overflow: hidden; }

.booking {
  width: min(480px, 100% - 32px);
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 30px 80px rgba(3, 26, 16, .35);
  overflow: auto;
  overscroll-behavior: contain;
}
.booking::backdrop {
  background: rgba(3, 26, 16, .6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.booking[open] { animation: booking-in .3s var(--ease); }
@keyframes booking-in {
  from { opacity: 0; transform: translateY(16px); }
}

.booking__panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
}
.booking__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.booking__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
}
.booking__car {
  margin-top: 4px;
  font-size: .875rem;
  color: rgba(11, 31, 22, .72);
}
.booking__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -8px -10px 0 0;
  border-radius: 12px;
  transition: background-color .2s var(--ease);
}
.booking__close svg { width: 22px; height: 22px; }
.booking__close:hover { background: rgba(11, 31, 22, .06); }

.booking__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.booking__form[hidden] { display: none; }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.field__label {
  padding: 0;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
}
.field__input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid rgba(122, 100, 56, .45);   /* 3:1 on the surface */
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font-size: 1rem;                             /* no iOS focus zoom */
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s var(--ease);
}
.field__input:hover { border-color: rgba(122, 100, 56, .7); }
.field__input:focus { border-color: var(--gold-deep); }
.field__input:focus-visible { outline-offset: 2px; }
.field__input::-webkit-date-and-time-value { text-align: left; }

.booking__times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip { position: relative; }
.chip input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(122, 100, 56, .45);
  border-radius: 999px;
  font-size: .9375rem;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover span { border-color: rgba(122, 100, 56, .7); }
.chip input:checked + span {
  border-color: var(--green-900);
  background: var(--green-900);
  color: var(--ivory);
}
.chip input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.booking__submit { margin-top: 4px; }
.booking__note {
  font-size: .8125rem;
  line-height: 1.5;
  color: rgba(11, 31, 22, .72);
}
.booking__note a {
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.booking__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-block: 8px 4px;
  text-align: center;
}
.booking__done[hidden] { display: none; }
.booking__done p { color: rgba(11, 31, 22, .78); }
.booking__done .car-btn { margin-top: 8px; min-width: 160px; }
.booking__done .booking__title:focus { outline: none; }
.booking__check {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(122, 100, 56, .12);
  color: var(--gold-deep);
}
.booking__check svg { width: 30px; height: 30px; }

/* Laptop ------------------------------------------------------------------ */
@media (max-width: 1279px) {
  .car__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  .car__summary { padding: 28px; }
  .car__facts,
  .car__equipment { grid-template-columns: minmax(0, 1fr); }

  /* Related cars: 3 columns, so show 3 */
  .stock--related .stock__item:nth-child(n + 4) { display: none; }
}

/* Tablet + phone: one column, actions side by side, fixed bar ------------ */
@media (max-width: 1023px) {
  .car__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "gallery"
      "summary"
      "details";
    row-gap: 0;
    margin-top: 12px;
  }

  .car__summary {
    position: static;
    gap: 16px;
    padding: 20px 0 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .car__actions { grid-template-columns: 1fr 1fr; }
  .car__actions .car-btn--book { order: 0; }
  .car-btn__num { display: none; }

  .car__details {
    gap: 40px;
    margin-top: 40px;
  }
  .car__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .car-bar {
    position: fixed;
    z-index: 40;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(122, 100, 56, .18);
    background: rgba(251, 249, 244, .97);
    box-shadow: 0 -10px 30px rgba(11, 31, 22, .1);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    visibility: hidden;
    transform: translateY(110%);
    transition: transform .3s var(--ease), visibility 0s linear .3s;
  }
  .car-bar.is-visible {
    visibility: visible;
    transform: none;
    transition: transform .3s var(--ease);
  }
  .car-bar__info {
    flex: 1;
    min-width: 0;
  }
  .car-bar__name {
    overflow: hidden;
    font-size: .8125rem;
    line-height: 1.4;
    color: rgba(11, 31, 22, .72);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .car-bar__price {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.25;
    white-space: nowrap;
  }
  .car-bar .car-btn { min-height: 48px; }
  .car-bar .car-btn--book { padding-inline: 18px; }

  /* Keep the end of the footer clear of the bar */
  .page-car .site-footer { padding-bottom: calc(64px + 72px + env(safe-area-inset-bottom)); }
}

/* Phones: full-bleed swipe gallery, no thumbnails, bottom-sheet booking --- */
@media (max-width: 767px) {
  .car__crumbs { padding-top: 14px; }
  .car__gallery { margin-inline: calc(-1 * var(--gutter)); }
  .gallery__frame { border-radius: 0; }
  .gallery__thumbs { display: none; }

  .car__facts,
  .car__equipment { grid-template-columns: minmax(0, 1fr); }

  .stock--related .stock__item:nth-child(n + 4) { display: block; }

  .booking {
    width: 100%;
    max-height: calc(100dvh - 24px);
    margin: auto 0 0;
    border-radius: 20px 20px 0 0;
  }
  .booking[open] { animation-name: booking-up; }
  .booking__panel { padding: 24px var(--gutter) calc(24px + env(safe-area-inset-bottom)); }
}
@keyframes booking-up {
  from { transform: translateY(100%); }
}

@media (max-width: 374px) {
  .car-bar__price { font-size: 1rem; }
  .car-bar .car-btn--book { padding-inline: 14px; }
}

@media (forced-colors: active) {
  .car-btn,
  .gallery__nav,
  .chip span { border: 1px solid ButtonText; }
  .chip input:checked + span {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}


/* ==========================================================================
   11-stock-shared
   ========================================================================== */

/* Status badge ("Reserverad") on cards and the car page */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.badge--reserved {
  background: var(--gold);
  color: var(--green-900);                     /* 8.9:1 */
}
.stock__media .badge {
  position: absolute;
  top: 12px;
  left: 12px;
}
.badge--inline { align-self: flex-start; }

/* Loading placeholders */
.skeleton,
.stock__item--skeleton .stock__media,
.gallery__frame--loading {
  background: linear-gradient(90deg, rgba(122, 100, 56, .09) 0%, rgba(122, 100, 56, .17) 50%, rgba(122, 100, 56, .09) 100%);
  background-size: 200% 100%;
  animation: skimmer 1.4s ease-in-out infinite;
}
.skeleton {
  display: block;
  height: 14px;
  border-radius: 6px;
}
.skeleton--title { width: 60%; height: 22px; }
.skeleton--price { width: 45%; height: 24px; margin-top: auto; }
.skeleton--h1 { width: 70%; height: 34px; }
.skeleton--buttons { height: 54px; border-radius: 14px; }
.skeleton--crumbs { width: 200px; height: 12px; }
.stock__item--skeleton .stock__body { gap: 10px; min-height: 150px; }
.gallery__frame--loading { aspect-ratio: 4 / 3; }
@keyframes skimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* Messages in a card list (error / empty / no JS) */
.stock__message {
  grid-column: 1 / -1;
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 24px;
  border: 1px dashed rgba(122, 100, 56, .35);
  border-radius: 16px;
  text-align: center;
  color: rgba(11, 31, 22, .78);
}
.stock__retry,
.stock__noscript a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.stock__noscript,
.car__noscript {
  padding: 24px 0;
  color: rgba(11, 31, 22, .78);
}

/* Car page extras */
.car__note {
  margin-top: -8px;
  font-size: .875rem;
  color: rgba(11, 31, 22, .75);
}
.car__missing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 560px;
  padding-block: 40px 8px;
}
.car__missing p { color: rgba(11, 31, 22, .78); }
.gallery__frame--empty {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  color: rgba(11, 31, 22, .6);
}

/* ==========================================================================
   12-lager (/bilar/: sök + filter)
   ========================================================================== */

.lager { padding-bottom: var(--section-space); }

.lager__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: 16px;
}
.lager__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.15;
  text-transform: uppercase;
}
.lager__count {
  font-size: .9375rem;
  color: rgba(11, 31, 22, .72);
}

.lager__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin-top: 24px;
}
.lager__search { position: relative; }
.lager__search-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: rgba(11, 31, 22, .55);
  pointer-events: none;
}
.lager__search-input,
.lager__select {
  min-height: 52px;
  margin: 0;
  border: 1px solid rgba(122, 100, 56, .4);
  border-radius: 14px;
  background-color: var(--surface);
  color: var(--text);
  font-size: 1rem;                             /* no iOS focus zoom */
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s var(--ease);
}
.lager__search-input {
  width: 100%;
  padding: 12px 16px 12px 46px;
}
.lager__search-input::placeholder { color: rgba(11, 31, 22, .5); }
.lager__select {
  padding: 0 40px 0 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a6438' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  cursor: pointer;
}
.lager__search-input:hover,
.lager__select:hover { border-color: rgba(122, 100, 56, .7); }
.lager__search-input:focus,
.lager__select:focus { border-color: var(--gold-deep); }

.lager__filter-btn { display: none; }
.lager__sort {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lager__sort-label {
  font-size: .875rem;
  color: rgba(11, 31, 22, .72);
  white-space: nowrap;
}

/* Active filters */
.lager__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.lager__chips[hidden] { display: none; }
.lager__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px 0 14px;
  border-radius: 999px;
  background: var(--green-900);
  color: var(--ivory);
  font-size: .875rem;
  transition: background-color .2s var(--ease);
}
.lager__chip:hover { background: var(--green-700); }
.lager__chip svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
}
.lager__chip--clear {
  padding: 0 8px;
  background: none;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lager__chip--clear:hover { background: rgba(11, 31, 22, .06); }

/* Layout: filters left, results right */
.lager__layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  gap: 40px;
  margin-top: 28px;
}

.lager__filters {
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
.filter__head,
.filter__foot { display: none; }

.filter__form { display: flex; flex-direction: column; }
.filter__group {
  margin: 0;
  padding: 20px 0;
  border: 0;
  border-top: 1px solid rgba(11, 31, 22, .1);
  min-width: 0;
}
.filter__group:first-child { padding-top: 4px; border-top: 0; }
.filter__group[hidden] { display: none; }
/* Legend floated so it sits below the group's top rule, not inside it */
.filter__legend {
  float: left;
  width: 100%;
  margin-bottom: 12px;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
}
.filter__legend + * { clear: both; }
.filter__checks {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.filter__check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  cursor: pointer;
}
.filter__check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--green-900);
  cursor: pointer;
}
.filter__n {
  font-size: .8125rem;
  color: rgba(11, 31, 22, .6);
}
.filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip--filter span {
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  font-size: .875rem;
}
.chip--filter input:checked + span .filter__n { color: rgba(245, 240, 228, .75); }
.filter__range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.filter__group .lager__select {
  width: 100%;
  min-height: 46px;
  font-size: .9375rem;
}

/* Results */
.lager__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.lager__more {
  display: block;
  min-height: 52px;
  margin: 32px auto 0;
  padding: 0 28px;
  border: 1px solid rgba(122, 100, 56, .45);
  border-radius: 14px;
  background: var(--surface);
  font-weight: 600;
  transition: border-color .2s var(--ease);
}
.lager__more:hover { border-color: var(--gold-deep); }
.lager__more[hidden] { display: none; }
.lager__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  border: 1px dashed rgba(122, 100, 56, .35);
  border-radius: 20px;
  text-align: center;
}
.lager__empty[hidden] { display: none; }
.lager__empty p { color: rgba(11, 31, 22, .75); }

@media (max-width: 1279px) {
  .lager__layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 32px;
  }
  .lager__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet + phone: filters in a bottom sheet behind "Filtrera" */
@media (max-width: 1023px) {
  .lager__toolbar { grid-template-columns: auto minmax(0, 1fr); }
  .lager__search { grid-column: 1 / -1; }
  .lager__filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    background: var(--green-900);
    color: var(--ivory);
    font-weight: 600;
  }
  .lager__filter-btn svg {
    width: 20px;
    height: 20px;
    color: var(--gold);
  }
  .lager__filter-count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--gold);
    color: var(--green-900);
    font-size: .75rem;
  }
  .lager__filter-count[hidden] { display: none; }
  .lager__sort { justify-content: flex-end; }
  .lager__sort .lager__select { min-height: 48px; max-width: 100%; }

  .lager__layout {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 20px;
  }

  .lager__filters {
    position: fixed;
    z-index: 60;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    max-height: min(88dvh, 760px);
    padding: 0;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    background: var(--surface);
    box-shadow: 0 -20px 60px rgba(3, 26, 16, .3);
    visibility: hidden;
    transform: translateY(100%);
    transition: transform .3s var(--ease), visibility 0s linear .3s;
  }
  .lager__filters.is-open {
    visibility: visible;
    transform: none;
    transition: transform .3s var(--ease);
  }
  .filter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--gutter) 6px;
  }
  .filter__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.375rem;
  }
  .filter__form {
    flex: 1;
    padding: 0 var(--gutter);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .filter__foot {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(11, 31, 22, .1);
  }
  .filter__clear {
    min-height: 54px;
    padding: 0 18px;
    border-radius: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .filter__clear:hover { background: rgba(11, 31, 22, .06); }
  .filter__backdrop {
    position: fixed;
    z-index: 55;
    inset: 0;
    background: rgba(3, 26, 16, .55);
  }
  html.filter-oppen { overflow: hidden; }

  .lager__grid { gap: 16px; }
}

@media (max-width: 559px) {
  .lager__grid { grid-template-columns: minmax(0, 1fr); }
  .lager__sort-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .stock__item--skeleton .stock__media,
  .gallery__frame--loading { animation: none; }
}