/* ====================================================
   Firma van Laar — concept mockup
   ==================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; } /* beats class rules like .co-row{display:flex} on toggled blocks */

/* Fietslease partner list — logo <img> when content.fietslease sets one, else a name pill */
.lease-partners { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; align-items: center; margin-top: auto; }
.lease-partner { display: inline-flex; align-items: center; text-decoration: none; }
.lease-partner img { height: 30px; width: auto; object-fit: contain; }
.lease-partners-sm .lease-partner img { height: 24px; }
.lease-partner .pill { transition: border-color 0.12s, color 0.12s; }
.lease-partner:hover .pill { border-color: var(--blue); color: var(--blue); }

:root {
  --blue:        #165edd;   /* brand primary — the owner's own chosen blue */
  --blue-dark:   #0f47ad;
  --teal:        #4caac9;   /* secondary accent, echoes the current site */
  --teal-light:  #eaf6fa;
  --orange:      #ff7a30;   /* CTA / action color */
  --orange-dark: #e8631b;
  --red:         #e14b4b;   /* sale badges */
  --ink:         #16181d;
  --text:        #3d3d3d;
  --muted:       #737373;
  --border:      #e6e6e6;
  --bg-tint:     #f2fafe;
  --white:       #ffffff;
  --radius:      12px;
  --shadow:      0 2px 24px rgba(22, 40, 66, 0.08);
  --shadow-hover: 0 10px 30px rgba(22, 40, 66, 0.14);
}

html { scroll-behavior: smooth; }

/* Thin, thumb-only scrollbar — matches the edd-shell admin/preview chrome. */
html { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.2) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.35); }

/* Sticky footer — real fix (not just recoloring) for short pages leaving a big blank gap above
   the footer, flagged 20 Aug 2026 (e.g. a brand-picker page with only 5 tiles). main:flex:1 pushes
   the footer to the bottom of the viewport on short pages without leaving empty space, while
   naturally getting out of the way on tall pages. */
html, body { height: 100%; }
main { flex: 1; }

body {
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--white);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section { padding: 4.5rem 0; }
.section-tint { background: var(--bg-tint); }

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
  flex-wrap: wrap;
}

.section-header h2 { font-size: 1.9rem; }
.section-header p { color: var(--muted); margin-top: 0.35rem; max-width: 520px; }
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 0.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-cta {
  background: var(--orange);
  color: var(--white);
}
.btn-cta:hover { background: var(--orange-dark); box-shadow: var(--shadow-hover); }
.btn-outline {
  background: var(--white);
  color: var(--blue);
  border-color: var(--blue);
}
.btn-outline:hover { background: var(--blue); color: var(--white); }
.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.85rem; }
.btn-block { width: 100%; justify-content: center; }

/* ── USP bar ── */
.usp-bar {
  background: var(--blue);
  color: #fff;
}
.usp-bar .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  flex-wrap: wrap;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  font-size: 0.82rem;
  font-weight: 500;
}
.usp-bar span { opacity: 0.95; }

/* ── Header ── */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 0.7rem 1.5rem;
}
/* The logo.jpg is the full brand mark (truck + "fa. Van Laar" wordmark + URL), so the separate
   text wordmark next to it was redundant — dropped it (1 Sep 2026, Barry E1 follow-up: he wanted
   the image itself bigger, not the text). Image-only also frees the most horizontal room for the
   nav (6 categories + Stadspas + Contact), which is why the old side-by-side lockup was a problem
   (nav wrapped, flagged 20 Aug 2026). */
.logo-link { display: flex; align-items: center; flex-shrink: 0; }
/* logo.png — the hi-res brand mark (Ape + Vespa + "fa. Van Laar" + URL), trimmed + white
   knocked out to transparent, exported at 640px wide (crisp past any header/retina size).
   Held taller than the old 118x70 jpg could go — Barry wanted it prominent (9 Sep 2026). */
.logo-link img { height: 84px; width: auto; object-fit: contain; }
@media (max-width: 600px) { .logo-link img { height: 64px; } }
.logo-text {
  font-weight: 700;
  font-size: 1.32rem;
  color: var(--blue);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.logo-text small {
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.main-nav { flex: 1; }
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  flex-wrap: nowrap;
}
.main-nav a {
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.main-nav a:hover { color: var(--blue); border-color: var(--blue); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-shrink: 0;
}
.header-icon {
  width: 22px; height: 22px;
  color: var(--ink);
  flex-shrink: 0;
}
.icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-tint);
}
.icon-btn .badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--orange);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.nav-toggle {
  display: none;
  width: 38px; height: 38px;
  border: none;
  background: var(--bg-tint);
  border-radius: 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
.nav-toggle span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ── Hero ── */
.hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(10,25,50,0.65), rgba(10,25,50,0.45)), var(--ink);
}
.hero-video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border: 0;
  pointer-events: none;
}
/* Legibility scrim over the video — flagged 30 Aug 2026 (Barry): white hero text was hard to read
   against the moving footage. Sits above the video (z-index -1) and below the text. Darkest on the
   left where the copy is, fading out to the right so the footage still reads. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(95deg, rgba(8,17,35,0.82) 0%, rgba(8,17,35,0.58) 42%, rgba(8,17,35,0.12) 100%);
}
.hero .container {
  position: relative;
  z-index: 1;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
.hero-content { max-width: 560px; color: #fff; }
.hero-content .eyebrow { color: #bfe0ff; }
.hero-content h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.5vw, 3rem);
  line-height: 1.12;
  margin-bottom: 1rem;
  text-shadow: 0 1px 14px rgba(0,0,0,0.45);
}
.hero-content p {
  color: #eef3fa;
  font-size: 1.05rem;
  margin-bottom: 1.75rem;
  max-width: 480px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* ── Promo strip ── */
.promo-strip {
  background: var(--teal);
  color: #fff;
}
.promo-strip .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  flex-wrap: wrap;
}
.promo-strip strong { font-size: 1.02rem; }
.promo-strip span { opacity: 0.95; font-size: 0.9rem; }
.promo-strip .btn-outline { border-color: #fff; color: #fff; background: transparent; }
.promo-strip .btn-outline:hover { background: #fff; color: var(--teal); }

/* ── Category grid ── */
.category-grid {
  display: grid;
  /* 6-across→3x2, 19 Aug 2026 (Paul's feedback): 6 columns left each tile too narrow to give the
     4/5 ratio meaningful room — 3 columns (auto-wrapping to 2 rows for 6 items) roughly doubles
     each tile's width, so the same aspect ratio actually shows more of each vehicle. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.category-tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  /* 1/1.05→4/5→4/3, 19 Aug 2026 (Paul's feedback, two rounds): unlike the catalog photos, these 6
     category images are near-perfect squares (5 of 6 are exactly 720x720) on a clean, consistent
     neutral gradient with the vehicle centered and plenty of background margin — cropping into that
     margin is safe here. 4/5 (taller) made vehicles read bigger but the section felt too tall
     overall now that it's 3 columns / 2 rows instead of 6 across; 4/3 (wider, shorter) keeps most
     of that size benefit while being noticeably more compact. */
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #f4f7fa, #e7edf3);
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.category-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.category-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.category-tile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
}
.category-tile span {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.9rem;
}
/* ── Category-page faceted filter sidebar (D5) ── */
.category-layout {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 2.75rem;
  align-items: start;
}
.category-layout.no-sidebar { display: block; }
/* With the sidebar taking a column, drop the product grid to 3-up so each card keeps enough
   width for the price row not to wrap (the shared .product-grid is 4-up at full width). */
.category-layout .product-grid { grid-template-columns: repeat(3, 1fr); }
.filter-sidebar { position: sticky; top: 1.5rem; }
.filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.filter-head strong { font-size: 0.95rem; }
.filter-clear {
  background: none; border: none; padding: 0;
  color: var(--blue); font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.facet { border-top: 1px solid var(--border); padding: 1rem 0; }
.facet h4 { font-size: 0.9rem; margin-bottom: 0.55rem; }
.facet-opt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--text);
  padding: 0.28rem 0;
  cursor: pointer;
}
.facet-opt input { accent-color: var(--blue); width: 15px; height: 15px; flex-shrink: 0; }
.facet-count { margin-left: auto; color: var(--muted); font-size: 0.78rem; }
.filter-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; min-height: 1.5rem; }
.filter-toggle { display: none; }
.result-count { color: var(--muted); font-size: 0.85rem; }
.no-results { color: var(--muted); margin-top: 1.5rem; }
.linklike { background: none; border: none; padding: 0; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; }

/* ── Product detail page ── */
.breadcrumb { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.5rem; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb span { margin: 0 0.4rem; }
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.gallery-thumbs { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.gallery-thumb {
  width: 64px; height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--bg-tint);
  padding: 0;
  cursor: pointer;
}
.gallery-thumb:hover { border-color: var(--blue); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-info h1 { font-size: 1.7rem; margin-bottom: 0.5rem; }
.product-info .product-price { margin: 0.75rem 0; }
.product-info .now { font-size: 1.5rem; }
.product-cta { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.25rem 0 1.75rem; max-width: 320px; }
.delivery-note { font-size: 0.8rem; color: var(--muted); margin: 0.4rem 0 0.15rem; }
.product-description p { margin-bottom: 1rem; color: var(--text); }
/* global `ul { list-style: none; }` (line 53) strips the default marker — bring back a "+" bullet
   (Paul's feedback: matches the plus-style bullets used before this field went through generate.js
   as an escaped plain-text list rather than raw scraped HTML). */
.product-description ul { margin: 0 0 1rem; padding-left: 0; }
.product-description li {
  margin-bottom: 0.5rem;
  padding-left: 1.4rem;
  position: relative;
  color: var(--text);
  line-height: 1.5;
}
.product-description li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 700;
}
.spec-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.spec-table tr { border-bottom: 1px solid var(--border); }
.spec-table th, .spec-table td { text-align: left; padding: 0.6rem 0; font-size: 0.9rem; }
.spec-table th { color: var(--muted); font-weight: 500; width: 45%; }
.spec-table td { font-weight: 500; }

/* ── Product grid ── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.product-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.product-media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1rem;
}
/* Final shape, 19 Aug 2026 (Paul's diagnosis): the real cause of every crop iteration before this
   was source-aspect-ratio chaos — Barry's catalog was pulled from many different manufacturers'
   own product photography, each with its own native aspect ratio, plus his own used-vehicle shop
   photos on top of that. No single fixed-crop ratio (tried 1/1, then 4/3, then 3/2) was ever going
   to fit all of them without cropping into wheels on some subset. object-fit:cover was replaced
   with object-fit:contain here specifically because of that: every grid-card image now fits to the
   card's width and is capped at a uniform 4/3-derived box height — the whole photo always shows,
   nothing ever gets cropped, and the box stays visually uniform across the grid regardless of each
   photo's native ratio. Letterbox gaps (most photos are wider than 4/3, so top/bottom gaps are the
   common case) show white — was var(--bg-tint) initially, but Paul's feedback (19 Aug) was that the
   tint made the letterboxing more noticeable, not less; plain white blends into almost every photo's
   own white background instead. See .product-gallery .product-media below
   for the different (no-crop, no-cap, true-ratio) treatment the single large detail-page hero image
   gets — a big single image doesn't need the grid's uniformity constraint the way ~4-per-row cards do. */
.product-media img { width: 100%; height: 100%; object-fit: contain; }

/* Detail-page hero: one image, not a grid — no uniformity constraint to satisfy, so just show the
   true aspect ratio at the column's real width instead of capping/fitting into a box at all. */
.product-gallery .product-media { aspect-ratio: auto; }
.product-gallery .product-media img { height: auto; object-fit: contain; }
.product-gallery .product-media:has(.ph-tile) { aspect-ratio: 4 / 3; }

/* ── Placeholder tile — used wherever a real product/brand photo isn't sourced
   yet (see generate.js). Deliberately a plain lettertile, not a stretched
   stock photo standing in for something real. Swap for real photography via
   the image-upload flow once available (see get_upload_link in the admin
   MCP template). ── */
.ph-tile {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #f4f7fa, #e7edf3);
  color: var(--blue);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}
/* Smaller + tighter to the corner + a drop shadow for legibility — flagged 30 Aug 2026 (Barry):
   the badges were large enough to sit over the scooter/bike itself. Since product images are
   object-fit:contain (the vehicle can sit anywhere in the box) a badge can't be guaranteed clear
   of it, so it's kept compact and given a shadow so it reads against whatever's behind it. */
.product-label {
  position: absolute;
  top: 0.45rem; left: 0.45rem;
  z-index: 1;
  background: var(--orange);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 5px rgba(0,0,0,0.28);
}
.product-label.sale { background: var(--red); }
.product-label.backorder { background: var(--ink); }
/* A sale/showroom badge and a backorder badge can both apply — stack the second
   one below the first instead of letting them overlap at the same corner. */
.product-label + .product-label { top: 2rem; }
.product-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4rem;
  min-height: 2.5em;
}
.product-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.product-price .now { font-size: 1.15rem; font-weight: 700; color: var(--blue); }
.product-price .was { font-size: 0.85rem; color: var(--muted); text-decoration: line-through; }
.product-card .btn { margin-top: auto; }
.used-price .now { font-weight: 700; color: var(--blue); }
.used-price .was { font-size: 0.85rem; color: var(--muted); text-decoration: line-through; }

/* ── Used vehicles teaser ── */
.used-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.used-media { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.used-media img { width: 100%; height: 340px; object-fit: cover; }
.used-list { margin: 1.5rem 0; border-top: 1px solid var(--border); }
.used-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.used-list li strong { color: var(--blue); font-weight: 700; }
.guarantee-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--teal-light);
  color: var(--blue-dark);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
}

/* ── Trust / service grid ── */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
}
.trust-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.trust-card h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.trust-card p { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.1rem; }
/* bottom-align badges across the row regardless of paragraph length — same margin-top:auto
   pattern as .product-card .btn. Fixed 19 Aug 2026 (Paul's feedback). */
.trust-badges { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: auto; }
.trust-badges img { height: 34px; width: auto; object-fit: contain; }
.pill {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--teal-light);
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  border: 1px solid transparent;
}

/* ── About / storefront ── */
.about-block {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}
.about-media img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  height: auto;
  display: block;
  /* Two-photo grid → one bigger image, 19 Aug 2026 (Paul's feedback): the pair (1.80:1 and 1.33:1,
     real uncurated shop photos) rendered visibly uneven side by side once neither was cropped —
     the wider one nearly filled its box, the narrower one had big empty bars either side. One
     photo (the storefront/entrance shot, Paul's pick — "that seems to be the best fit") at its own
     true width-driven size, same no-crop pattern as the product-detail hero image. */
}
.about-text h2 { margin-bottom: 1rem; font-size: 1.9rem; }
.about-text p { color: var(--text); margin-bottom: 1rem; }
.about-facts {
  display: flex;
  gap: 1.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.about-facts div {
  /* min-width stops a stat's text getting squeezed/clipped at in-between viewport widths where
     .about-block is still two columns but the text column has gotten narrow — flagged 20 Aug 2026
     ("garantie op gebruikt" looked cut off); not reliably reproduced at any single width, so this
     is defensive hardening rather than a fix for one exact repro. */
  flex: 1 1 110px;
  min-width: 110px;
}
.about-facts div strong {
  display: block;
  color: var(--blue);
  font-size: 1.3rem;
}
.about-facts div span { font-size: 0.82rem; color: var(--muted); }

/* ── Footer ── */
footer.site-footer {
  background: var(--ink);
  color: #cfd3da;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding: 3.5rem 0 2.5rem;
}
.footer-brand .logo-text { color: #fff; }
.footer-brand p { font-size: 0.88rem; color: #9aa0ab; margin: 1rem 0 1.25rem; max-width: 260px; }
.footer-social {
  display: flex;
  gap: 0.6rem;
}

/* ── Share row — bottom of every page's <main>, matches Barry's own live-site pattern ── */
.share-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--border);
  margin-top: 1rem;
}
.share-row span { font-size: 0.85rem; color: var(--muted); margin-right: 0.3rem; }
.share-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.share-btn:hover { color: var(--blue); border-color: var(--blue); }
.footer-social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  color: #fff;
}
footer h4 {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1.1rem;
}
footer ul li { margin-bottom: 0.65rem; font-size: 0.9rem; }
footer ul li a:hover { color: #fff; }
.footer-contact li { color: #cfd3da; }
.footer-contact strong { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 1.25rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #8b909b;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ── Responsive ── */
/* 8 nav items (6 categories + Stadspas + Contact) stop fitting on one row well before the
   general mobile breakpoint — switch to the hamburger a bit earlier so it never wraps. */
@media (max-width: 1120px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 980px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .about-block, .used-block, .product-detail { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .category-layout { grid-template-columns: 1fr; gap: 0; }
  .category-layout .product-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-toggle { display: inline-flex; }
  .filter-sidebar {
    display: none;
    position: static;
    margin-bottom: 1.75rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-tint);
  }
  .filter-sidebar.open { display: block; }
}
@media (max-width: 560px) {
  .section { padding: 3rem 0; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .usp-bar .container { gap: 1rem; font-size: 0.72rem; }
}

/* ── Product configurator (p.config: kleur/maat/uitvoering/accu + accessoires) ───────────── */
.cfg { margin: 1rem 0 1.25rem; max-width: 360px; }
.cfg-axis { margin-bottom: 1rem; }
.cfg-axis-label { font-size: 0.82rem; font-weight: 600; color: var(--text); margin-bottom: 0.45rem; }
.cfg-opt { font-weight: 400; color: var(--muted); }
.cfg-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.cfg-btn {
  padding: 0.5rem 0.9rem; border: 1.5px solid var(--border); border-radius: 8px;
  background: #fff; font: inherit; font-size: 0.88rem; cursor: pointer; color: var(--text);
  transition: border-color 0.12s, background 0.12s;
}
.cfg-btn:hover { border-color: var(--blue); }
.cfg-btn.is-selected { border-color: var(--blue); background: var(--blue); color: #fff; }
.cfg-btn.is-selected .cfg-plus { color: #fff; }
.cfg-plus { color: var(--muted); font-size: 0.82rem; }

.cfg-choices--swatch { gap: 0.6rem; }
.cfg-swatch {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.7rem 0.4rem 0.4rem; border: 1.5px solid var(--border); border-radius: 999px;
  background: #fff; font: inherit; cursor: pointer; color: var(--text); transition: border-color 0.12s;
}
.cfg-swatch:hover { border-color: var(--blue); }
.cfg-swatch.is-selected { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(22, 94, 221, 0.15); }
.cfg-swatch-chip {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: block;
  border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.cfg-swatch-name { font-size: 0.85rem; line-height: 1.2; color: var(--text); }

.cfg-accessories { display: flex; flex-direction: column; gap: 0.4rem; }
.cfg-acc {
  display: flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; cursor: pointer;
  padding: 0.3rem 0; color: var(--text);
}
.cfg-acc input { accent-color: var(--blue); width: 15px; height: 15px; flex-shrink: 0; }
.cfg-acc-name { flex: 1; }

#configAdd[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ── Checkout form ──────────────────────────────────────────────────────────────────────── */
.co-summary { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.co-form { display: flex; flex-direction: column; gap: 1.25rem; }
.co-group { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem 1.15rem; margin: 0; }
.co-group legend { font-size: 0.82rem; font-weight: 700; color: var(--text); padding: 0 0.4rem; }
.co-group legend em { font-weight: 400; color: var(--muted); }
.co-row { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.6rem; }
.co-field { display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 100%; font-size: 0.85rem; }
.co-field.co-half { flex: 1 1 calc(50% - 0.4rem); }
.co-field span { color: var(--text); }
.co-field em { color: var(--muted); font-style: normal; }
.co-field input, .co-field select, .co-textarea {
  width: 100%; padding: 0.65rem 0.7rem; border: 1.5px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 0.92rem; background: #fff; color: var(--text);
}
.co-field input:focus, .co-field select:focus, .co-textarea:focus { outline: none; border-color: var(--blue); }
.co-field input.co-invalid { border-color: var(--red); }
.co-textarea { margin-top: 0.6rem; resize: vertical; }
.co-radios, .co-shipping { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; }
.co-radios { flex-direction: row; gap: 1.5rem; }
.co-radio, .co-ship { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; cursor: pointer; }
.co-radio input, .co-ship input { accent-color: var(--blue); width: 16px; height: 16px; flex-shrink: 0; }
.co-ship { border: 1.5px solid var(--border); border-radius: 8px; padding: 0.7rem 0.85rem; }
.co-ship:has(input:checked) { border-color: var(--blue); background: var(--bg-tint); }
.co-ship span { flex: 1; }
.co-ship b { color: var(--blue); font-weight: 700; }
.co-warn { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--red); }
.co-totals { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.92rem; padding: 0.5rem 0; border-top: 1px solid var(--border); }
.co-totals .co-line { display: flex; justify-content: space-between; }
.co-totals .co-grand { font-weight: 700; font-size: 1.05rem; padding-top: 0.35rem; border-top: 1px solid var(--border); }
.co-status { margin: 0; font-size: 0.9rem; }
.co-status.err { color: var(--red); }
.co-note { margin: 0; font-size: 0.78rem; color: var(--muted); }
@media (max-width: 480px) {
  .co-field.co-half { flex: 1 1 100%; }
  .co-radios { flex-direction: column; gap: 0.5rem; }
}