/**
 * Elfmedia Avja - integratiestijl.
 *
 * styles.css (de prototype-CSS) is en blijft de bron van waarheid voor het
 * design-system van dit thema. Dit bestand bevat UITSLUITEND stijlregels
 * voor markup die niet door dit thema wordt gegenereerd, maar door bestaande
 * Elfmedia/Magento-modules met hun eigen vaste classnamen (mega menu,
 * kenteken-formulieren, geavanceerd-zoeken-dropdown). Doel: die bestaande,
 * functionele widgets laten aanvoelen alsof ze bij het prototype-systeem
 * horen, zonder hun modules of templates aan te passen.
 */

/* -------------------------------------------------------------------
   Base reset for a real HTML element the prototype never had to deal
   with: its own forms never use <fieldset> (just <div>/<label>), so
   styles.css's own reset block (h1-h4/p/ul/ol/figure, a/button/input)
   never needed one either. Real Magento forms (login, register,
   forgotpassword, address, checkout, ...) do use <fieldset> though, and
   without a reset it kept the browser's default border/margin/padding -
   a visible black-ish border around every form's fields.
   ------------------------------------------------------------------- */
fieldset{ border: 0; margin: 0; padding: 0; min-width: 0; }

/* --dur alias: Elfmedia_CustomerService::css/customerservice.css (a real,
   already-fairly-complete module stylesheet - unlike the carparts legacy
   CSS files removed elsewhere in this theme, this one predates neither
   the module nor the redesign, and already uses this theme's own
   var(--container)/var(--gutter)/var(--brand) tokens in most places) was
   written against a --dur token that was never actually defined anywhere
   (styles.css only has --dur-fast/--dur-base) - every var(--dur) in it
   silently resolved to nothing, quietly dropping its hover transitions.
   One alias fixes all of them without editing that file. */
:root{ --dur: var(--dur-base); }

/* .icon/.icon--xs/--sm/--lg: another gap in that same module's own CSS -
   used throughout its templates (page/category/article/navigation.phtml)
   on <svg class="icon icon--xs"><use href="#icon-chevron-right"></use></svg>
   icons, but never actually sized anywhere in its stylesheet. Combined
   with this theme never defining the #icon-* sprite those <use> elements
   point at either (see html/icon-sprite.phtml), these icons were
   completely invisible before - once the sprite fix made them resolve,
   they rendered at the browser's unstyled default replaced-element size
   (~300x150px) instead of vanishing, which is worse: giant broken-looking
   arrows next to every "Lees meer"/card link. */
.icon{ display: inline-block; width: 20px; height: 20px; flex: none; }
.icon--xs{ width: 14px; height: 14px; }
.icon--sm{ width: 18px; height: 18px; }
.icon--lg{ width: 28px; height: 28px; }

/* -------------------------------------------------------------------
   Mega menu (Elfmedia_MegaMenu::megamenu.phtml) — .elf-mega-menu*
   Reworked to match the prototype's real .mega-nav/.mega-nav__trigger/
   .mega-nav__panel/.mega-nav__all-* values (styles.css §11) instead of
   invented approximations, plus two deliberate departures the site owner
   asked for: panels span the full container width (not a narrow card
   anchored under one trigger) and there's no gap between the trigger row
   and the panel (a real gap broke hover: moving the mouse through empty
   space between trigger and panel ended :hover on .elf-mega-menu__item
   before the pointer ever reached the panel, so it closed on the way in
   and nothing inside was clickable).
   ------------------------------------------------------------------- */
.elf-mega-menu{ width: 100%; }
.elf-mega-menu__inner{ width: 100%; }
.elf-mega-menu__lvl1{ display: flex; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.elf-mega-menu__item{ display: flex; }
.elf-mega-menu__link,
.elf-mega-menu__link--all{
  display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 var(--space-3);
  font-size: var(--text-sm); font-weight: 700; color: var(--ink-soft); border-bottom: 2px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.elf-mega-menu__link:hover,
.elf-mega-menu__link--all:hover{ color: var(--brand); border-color: var(--brand); }
/* Always brand-colored (not just on hover) + pulled back by the trigger's
   own horizontal padding so it lines up flush-left with the divider/
   container edge instead of sitting a bit further right than it. */
.elf-mega-menu__link--all{ color: var(--brand); margin-left: calc(var(--space-3) * -1); }
.elf-mega-menu__icon{ width: 18px; height: 18px; }

/* Positioning context for the full-width panels is .top-nav itself (see
   below), not .elf-mega-menu__item - the panel drops from the bottom of
   the whole nav bar, centered on the container, regardless of which
   trigger is hovered. */
.top-nav{ position: relative; }
.elf-mega-menu__panel,
.elf-mega-menu__panel--all{
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 60;
  /* .container's own visible content (where the logo/search/actions sit)
     is inset from its max-width by padding-inline:var(--gutter) on each
     side - matching max-width:var(--container) here without the same
     inset made the panel visibly wider than .header-main on both edges. */
  width: calc(100% - (var(--gutter) * 2)); max-width: calc(var(--container) - (var(--gutter) * 2)); box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-5);
}
.elf-mega-menu__item:hover > .elf-mega-menu__panel,
.elf-mega-menu__item:hover > .elf-mega-menu__panel--all{ display: block; }
.elf-mega-menu__panel--all{ padding: 0; overflow: hidden; }
.elf-mega-menu__cols{ display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-5); align-items: start; }
.elf-megamenu__group{ min-width: 0; }
.elf-megamenu__title,
.elf-mega-menu__h{
  display: block; font-weight: 800; font-size: var(--text-sm); color: var(--ink);
  margin-bottom: var(--space-2); text-decoration: none;
}
.elf-megamenu__title:hover{ color: var(--brand); }
.elf-megamenu__links{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.elf-mega-menu__s{ font-size: var(--text-xs); color: var(--ink-soft); text-decoration: none; }
.elf-mega-menu__s:hover{ color: var(--brand); }

.elf-mega-menu-all{ display: flex; min-height: 320px; }
.elf-mega-menu-all__left{
  flex: none; width: 260px; list-style: none; margin: 0; padding: var(--space-4) 0;
  background: var(--brand-50); border-right: 1px solid var(--line);
}
.elf-mega-menu-all__lvl1{
  padding: var(--space-3) var(--space-5); font-weight: 700; font-size: var(--text-sm); color: var(--ink-soft);
  cursor: pointer; border-left: 3px solid transparent;
}
.elf-mega-menu-all__lvl1.is-active{ background: var(--surface); color: var(--brand); border-left-color: var(--brand); }
.elf-mega-menu-all__right{ flex: 1; padding: var(--space-5); max-height: 65vh; overflow-y: auto; }
.elf-mega-menu-all__panel{ display: none; }
.elf-mega-menu-all__panel.is-active{ display: block; }

/* Dims the rest of the page while a mega-menu panel is open (site.js
   initMegaMenuDim, mirrors the .sheet-backdrop pattern). Deliberately its
   own element/z-index rather than reusing .sheet-backdrop: that one sits
   ABOVE the header (z-index:90 vs. the header's 40) so real sheets dim
   the header too, which is correct there but wrong here - .site-header
   (and the bright, still-open panel inside it) needs to stay above this
   overlay, only the page behind it should dim. z-index:39 (one below
   --z-header) achieves that with no extra "dim the header's own chrome"
   trick needed. */
.mega-nav-overlay{
  position: fixed; inset: 0; z-index: 39; background: var(--overlay);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease);
}
.mega-nav-overlay.is-open{ opacity: 1; }

/* Mobile: mega menu isn't rendered as a top-nav bar (bottom-nav + the
   categoriesSheet server-rendered list cover mobile navigation instead). */
@media (max-width: 1023px){
  .top-nav{ display: none; }
}

/* -------------------------------------------------------------------
   Kenteken license/manual forms (Elfmedia_KentekenCheck templates)
   ------------------------------------------------------------------- */
.vs-form{ display: flex; align-items: stretch; gap: var(--space-2); }
.vs-form--spaced{ flex-wrap: wrap; }
.kenteken-wrapper{
  display: flex; align-items: center; gap: var(--space-2);
  height: 56px; padding: 0 var(--space-3); flex: 1;
  background: var(--plate); border: 2px solid #e6b800; border-radius: var(--radius-md);
  font-family: var(--mono, monospace); font-weight: 700; letter-spacing: .04em;
}
.kenteken-nl{
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 30px; border-radius: 3px; background: #1a3a8f; color: #fff;
  font-size: 10px; font-weight: 800;
}
.kenteken-wrapper input{
  border: 0; background: transparent; font: inherit; color: var(--ink);
  text-transform: uppercase; width: 100%; outline: none;
}
.vs-license-submit{
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 56px; padding: 0 var(--space-4); border-radius: var(--radius-md);
  background: var(--brand); color: #fff; font-weight: 700; font-size: var(--text-sm);
  border: 0; cursor: pointer; white-space: nowrap;
}
.vs-license-submit:hover{ background: var(--brand-600); }

.vehicle-filter{ display: flex; flex-direction: column; gap: var(--space-3); }
.vehicle-filter .vf-field{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  height: var(--field-height, 46px); padding: 0 var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--bg); cursor: pointer;
}
.vehicle-filter .vf-field.is-disabled{ opacity: .55; cursor: not-allowed; }
.vehicle-filter .vf-value{ font-size: var(--text-sm); color: var(--ink); }
.vehicle-filter .vf-placeholder{ color: var(--muted); }
.vehicle-filter .vf-button{
  height: 48px; border-radius: var(--radius-md); border: 0;
  background: var(--brand); color: #fff; font-weight: 700; font-size: var(--text-sm); cursor: pointer;
}
.vehicle-filter .vf-button:disabled{ background: var(--surface-sunken); color: var(--muted); cursor: not-allowed; }
.vehicle-filter .vf-dropdown{
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg);
  box-shadow: var(--shadow-lg);
}
/* The module's own vehicle-filter.css only switches .vf-dropdown from a
   floating position:absolute overlay to an inline position:static list
   (its intended narrow-viewport behaviour) inside a very specific selector
   chain (`body.cms-index-index section.hero#kenteken ...`) that assumed
   carparts' own homepage markup - this theme's hero has neither that id
   nor that structure, so that rule never matches here and the dropdown
   stayed a floating absolute overlay everywhere, including inside the
   narrow (max 420px) .sheet dialogs, where it could render detached from
   its field or get clipped by .sheet-body's overflow-y:auto. Reproduces
   the same static/inline mode here instead, scoped to where this widget
   actually lives on this theme (any .sheet, always - a sheet is narrow at
   every viewport width, not just mobile). */
.sheet .vehicle-filter .vf-block.is-open{ position: relative; z-index: auto; }
.sheet .vehicle-filter .vf-dropdown{
  position: static !important; left: auto; right: auto; top: auto;
  width: 100%; margin-top: var(--space-2); max-height: min(320px, 48vh);
}
.sheet .vehicle-filter .vf-options{ max-height: min(240px, 38vh); overflow-y: auto; }
/* Same static/inline-dropdown need as .sheet above, for the manual-search
   tab on the /kentekencheck landing page (kentekencheck_index.phtml) -
   manual_form.phtml's own CSS only targets carparts' old
   "body.cms-index-index section.hero#kenteken" chain, which this theme's
   body class (kentekencheck-index-index, not cms-index-index) never
   matches. Also restores the disabled-button brand colour the module's
   own scoped rule would otherwise have provided. */
.kentekencheck-index-index .kcpage-panel .vehicle-filter .vf-block.is-open{ position: relative; z-index: auto; }
.kentekencheck-index-index .kcpage-panel .vehicle-filter .vf-dropdown{
  position: static !important; left: auto; right: auto; top: auto;
  width: 100%; margin-top: var(--space-2); max-height: min(320px, 48vh);
}
.kentekencheck-index-index .kcpage-panel .vehicle-filter .vf-options{ max-height: min(240px, 38vh); overflow-y: auto; }
.kentekencheck-index-index .kcpage-panel .vehicle-filter .vf-button:disabled{
  background: var(--brand); border-color: var(--brand); color: #fff; opacity: 1; cursor: not-allowed;
}

/* -------------------------------------------------------------------
   Search suggestions (Elfmedia_Advancedsearch/js/instant-search) — same
   visual language as the prototype's own (unused-by-this-widget)
   .suggest-panel/.suggest-group/.suggest-item, since this real widget
   builds its own markup with its own classnames.
   ------------------------------------------------------------------- */
.searchbar{ position: relative; }
/*
 * Elfmedia_Advancedsearch::css/advancedsearch.css (loaded sitewide, not a
 * theme file) hard-codes its OWN visual design for this input with
 * !important on every property - border:1px solid #cbd5e1, background:
 * #ffffff, padding:11px 96px 11px 16px (barely any left padding, huge
 * right padding reserved for a button[type="submit"] this theme's header
 * form doesn't even render). That design assumed a right-aligned submit/
 * clear button pair; this header instead has the prototype's own
 * decorative left-aligned .search-ico + no visible submit button (the
 * form just submits on Enter), so the widget's own CSS collided with it:
 * a visible border/white fill instead of the prototype's borderless
 * --surface-soft pill, and the icon sitting almost on top of the text
 * since there was no real left padding reserved for it. Matches the
 * !important + exact same selectors so this reliably wins regardless of
 * <head> merge order between the module's own CSS and this theme file.
 */
.search.search--desktop input[type="search"],
.search.search--desktop input[type="text"],
.brandbar-search .search input[type="search"],
.brandbar-search .search input[type="text"]{
  padding: 0 var(--space-10) 0 var(--space-10) !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-soft) !important;
}
/*
 * Same collision, different property: that same module rule above also
 * sets `display: block !important` on .search.search--desktop itself
 * (not just its input), completely unconditionally - no media query.
 * styles.css's own .header-search{display:none} (mobile-first, shown
 * again at 1024px+) never had a chance against an !important rule, so
 * the DESKTOP search bar (next to the logo) stayed permanently visible
 * on mobile too, duplicating the real mobile search row below it and
 * eating the .header-actions flex space the account/cart/vehicle icons
 * needed (verified live: .header-actions was squeezed to ~4px wide,
 * making "Mijn auto"/cart icons invisible - not a separate bug, just a
 * symptom of this one). Needs !important to win the same way.
 */
@media (max-width: 1023px){
  .search.search--desktop{ display: none !important; }
}
.search.search--desktop input[type="search"]:focus,
.search.search--desktop input[type="text"]:focus,
.brandbar-search .search input[type="search"]:focus,
.brandbar-search .search input[type="text"]:focus{
  border-color: transparent !important;
  box-shadow: 0 0 0 2px var(--brand-50) !important;
  background: var(--surface) !important;
}
.elf-advancedsearch-dropdown{
  position: absolute; left: 0; right: 0; top: calc(100% + var(--space-2)); z-index: var(--z-header, 50);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); max-height: min(70vh, 480px); overflow-y: auto;
  padding: var(--space-2); display: none;
}
.elf-advancedsearch-dropdown.is-open{ display: block; }
.elf-advancedsearch-backdrop{
  position: fixed; inset: 0; z-index: calc(var(--z-header, 50) - 1); background: var(--overlay);
}
.elf-advancedsearch-section{ margin-bottom: var(--space-2); }
.elf-advancedsearch-section__title{
  padding: var(--space-2) var(--space-3) var(--space-1); margin: 0;
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.elf-advancedsearch-list{ list-style: none; margin: 0; padding: 0; }
.elf-advancedsearch-item{ display: block; }
.elf-advancedsearch-link{
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); width: 100%; text-align: left; text-decoration: none; color: var(--ink);
}
.elf-advancedsearch-link:hover, .elf-advancedsearch-link:focus-visible{ background: var(--surface-soft); }
.elf-advancedsearch-item__media{ flex: none; width: 36px; height: 36px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-soft); }
.elf-advancedsearch-item__media img{ width: 100%; height: 100%; object-fit: contain; }
.elf-advancedsearch-item__content{ display: flex; flex-direction: column; min-width: 0; }
.elf-advancedsearch-item__name{ font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elf-advancedsearch-item__sku{ font-size: var(--text-xs); color: var(--muted); font-family: var(--mono); }
.elf-advancedsearch-item__price{ margin-left: auto; font-size: var(--text-sm); font-weight: 700; flex: none; }
.elf-advancedsearch-state{ padding: var(--space-6) var(--space-4); text-align: center; color: var(--muted); font-size: var(--text-sm); }
.elf-advancedsearch-state.is-error{ color: var(--danger); }
.elf-advancedsearch-footer{ border-top: 1px solid var(--line); margin-top: var(--space-2); padding-top: var(--space-2); }
.elf-advancedsearch-view-all{
  display: block; text-align: center; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 700; color: var(--brand); text-decoration: none;
}
.elf-advancedsearch-view-all:hover{ background: var(--surface-soft); }
.elf-advancedsearch-clear{
  position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%);
  display: none; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: var(--radius-full); color: var(--muted); background: transparent;
}
.elf-advancedsearch-clear:hover{ background: var(--surface-soft); }
.elf-advancedsearch-clear .icon{ width: 16px; height: 16px; }

/* -------------------------------------------------------------------
   Page chrome (Magento's own page-layout wrapper classnames: .page-main/
   .columns/.column.main/.sidebar.sidebar-main) — these carried zero
   styling of their own the moment carparts'/Blank's compiled LESS CSS was
   removed from this theme (see default_head_blocks.xml); every page type
   that uses Magento's native 2columns-left/2columns-right layout
   (category, customer account, ...) depends on this block. Maps them onto
   the prototype's .container/.listing-layout grid metrics.
   ------------------------------------------------------------------- */
/* Sticky footer: body is already display:flex/flex-direction:column/
   min-height:100dvh (prototype's own base rule) expecting to push a short
   page's footer to the viewport bottom, but Magento wraps header+main in
   one extra .page-wrapper div that footer (before.body.end) sits AFTER as
   a sibling - .page-wrapper never grew to fill body, so on a short page
   the footer just sat wherever the content ended instead of at the
   bottom. Same nested flex pattern one level deeper fixes it. */
.page-wrapper{ display: flex; flex-direction: column; flex: 1 0 auto; }
.page-main{
  flex: 1 0 auto; width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Homepage renders its own full-bleed sections (hero-dark/section--brand/
   section--soft/cta-band), each with its own inner .container - exactly
   like the prototype. The generic .page-main constraint above would
   squeeze all of that inward, so it's undone here (cms-index-index is
   Magento's body class for the CMS index/index controller action). */
.cms-index-index .page-main{ max-width: none; padding-inline: 0; }
/* Same full-bleed pattern as the homepage: partnumber_landing.phtml (and
   its sibling brand_landing.phtml/model_landing.phtml SEO pages) already
   wraps each of its own sections in .container, so the generic
   .page-main gutter would double it up. Also applies to kentekencheck's
   own landing page (kentekencheck_index.phtml, kc-brand-hero + .container
   sections) and to the "onderdeelnummer" CMS page (cms_page identifier
   "onderdeelnummer", body class cms-onderdeelnummer - a real url_rewrite
   maps /onderdeelnummer to this CMS page instead of the KentekenCheck
   controller, see project memory) which uses the exact same markup. */
.kentekencheck-index-partnumber .page-main,
.kentekencheck-index-brand .page-main,
.kentekencheck-index-brands .page-main,
.kentekencheck-index-model .page-main,
.kentekencheck-index-index .page-main,
.cms-onderdeelnummer .page-main{ max-width: none; padding-inline: 0; }
.columns{ display: block; }
/* Search results (both the /zoekresultaten route and raw /catalogsearch/result)
   still need an explicit width constraint on .columns itself, not just on the
   .page-main it sits inside of - added per direct user testing. */
.zoekresultaten-index-index .page-main > .columns,
.catalogsearch-result-index .page-main > .columns{
  max-width: var(--container, 1180px);
  margin: 0 auto;
}
.column.main, .sidebar.sidebar-main{ min-width: 0; }
@media (min-width: 1024px){
  /* Matches the prototype's own .filters-desktop{position:sticky} intent
     (styles.css) for this sidebar - without it the filters scroll away
     with the page on a long product grid instead of staying pinned near
     the top, which can read as "the sidebar starts at the bottom". */
  .sidebar.sidebar-main{ position: static; top: auto; align-self: start; }
}
@media (min-width: 1024px){
  .page-layout-2columns-left .columns,
  .page-layout-2columns-right .columns{
    display: grid; grid-template-columns: 260px 1fr; gap: var(--space-8); align-items: start;
  }
  .page-layout-2columns-right .columns{ grid-template-columns: 1fr 260px; }
  /* Explicit grid-column (not order+auto-placement): if the sidebar ever
     renders with no actual content, an order-based reorder still leaves
     .column.main as the ONLY real grid item, which auto-placement then
     drops into the first (260px) track - squeezing all page content into
     a narrow left column with the whole 1fr track sitting empty on the
     right. Pinning both tracks explicitly makes that impossible.

     grid-row:1 on both is equally required, not optional - verified live
     in a real headless Chromium render (Playwright) that with only
     grid-column pinned and grid-row left auto, the sidebar (second in
     DOM, .column.main first) landed several thousand pixels below
     .column.main instead of sharing its row: the sparse auto-placement
     cursor advances forward after each item is placed and does not
     backtrack to an earlier row even when the requested column is free
     there, a well-known Grid gotcha when only ONE axis is pinned and the
     other is left to auto-placement with items of very different
     heights. Pinning grid-row:1 on both removes the ambiguity entirely -
     this was the actual cause of "de sidebar staat helemaal onderin het
     scherm", not the .elf-filter-drawer JS-class collision fixed in the
     previous round (that was real too, but not the whole story). */
  .page-layout-2columns-left .column.main{ grid-column: 2; grid-row: 1; }
  .page-layout-2columns-left .sidebar-main{ grid-column: 1; grid-row: 1; }
  .page-layout-2columns-right .column.main{ grid-column: 1; grid-row: 1; }
  .page-layout-2columns-right .sidebar-main{ grid-column: 2; grid-row: 1; }
  /* Same sidebar+content grid as .columns above, for the KentekenCheck
     results page's own bespoke wrapper (results_grid.phtml/results_
     filters.phtml, nk.results.sidebar/nk.results.main containers,
     kentekencheck_index_results.xml) - it never got this layout at all
     (0 CSS rules existed for .nk-results-*), so the sidebar and product
     grid just stacked as plain full-width blocks instead of sitting side
     by side like every other listing page. Same grid-row:1 pinning for
     the same reason as above (sidebar is first in the DOM, sparse
     auto-placement would otherwise push it below the grid instead of
     sharing its row). */
  .nk-results-columns{
    display: grid; grid-template-columns: 260px 1fr; gap: var(--space-8); align-items: start;
  }
  .nk-results-sidebar{ grid-column: 1; grid-row: 1; min-width: 0; position: static; top: auto; }
  .nk-results-main{ grid-column: 2; grid-row: 1; min-width: 0; }
}

/* -------------------------------------------------------------------
   Layered navigation sidebar (Magento_LayeredNavigation::layer/view.phtml,
   .nk-* classnames) — real filtering logic/markup untouched, given the
   same visual language as the prototype's .filter-group/.filter-options/
   .filter-option (both use native <details>/<summary>).
   ------------------------------------------------------------------- */
.nk-filters{ display: flex; flex-direction: column; gap: var(--space-4); }
/* Persistent "Filters" + "Reset" row (nk-filters__head, added to layer/
   view.phtml) - the prototype always shows this above the accordion
   groups; the real component only ever showed a "Wis alle filters" link
   INSIDE the active-filters section, i.e. only once a filter was already
   selected. */
.nk-filters__head{ display: flex; align-items: center; justify-content: space-between; }
.nk-filters__title{ font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.nk-filters__reset{ font-size: var(--text-xs); font-weight: 700; color: var(--brand); text-decoration: none; background: none; border: 0; cursor: pointer; }
/* The mobile off-canvas drawer already gets its own "Filters" title + ✕
   close button injected by ensureSidebarHeader() (elfmedia-filter-
   drawer.js) - showing .nk-filters__title there too duplicated the
   label. .nk-filters__reset stays visible on mobile though: since the
   old per-group "Wis alle filters" link (inside the now-removed active-
   filters accordion) was the drawer's only clear-all control, hiding
   this too would leave mobile with no way to reset filters at all. */
.elf-filter-drawer .nk-filters__title{ display: none; }
.elf-filter-drawer .nk-filters__head{ justify-content: flex-end; }
@media (min-width: 1024px){
  .elf-filter-drawer .nk-filters__title{ display: inline; }
  .elf-filter-drawer .nk-filters__head{ justify-content: space-between; }
}
.nk-filter-accordion{ padding-bottom: var(--space-3); }
/* Small divider between filter groups (Merk/Model/Onderdeel/Prijs...) -
   mobile filter popup (.elf-filter-drawer) only, per explicit request; the
   desktop sidebar deliberately stays without one (see the border-bottom
   removed from .nk-filter-accordion earlier - a different, unrelated
   request for that context). */
.elf-filter-drawer .nk-filter-accordion{ border-bottom: 1px solid var(--line); }
.elf-filter-drawer .nk-filter-accordion:last-of-type{ border-bottom: 0; }
.nk-filter-accordion__summary{
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  font-size: var(--text-sm); font-weight: 700; color: var(--ink); list-style: none; padding-block: var(--space-1);
}
/* .nk-filter-accordion__label wraps title + info button together so the
   parent's justify-content:space-between still only splits two things
   (this group vs. the chevron), instead of spreading three items apart. */
.nk-filter-accordion__label{ display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
/* .nk-filter-info - the "Lees meer" link (Elfmedia_FilterInfo, admin-managed
   per attribute) that opens the centered .nk-filter-info-popover modal
   (+ .nk-filter-info-backdrop). Deliberately not inside a real
   <a>/<summary>-toggle click path - the JS stops propagation so it never
   also collapses/expands the accordion. Same centered-dialog-over-backdrop
   mechanics as .nk-vehicle-drawer/-backdrop above, own class names since
   this is a much smaller, text-driven dialog. */
.nk-filter-info{
  flex: none; border: 0; background: none; padding: 0; margin: 0;
  font-size: var(--text-xs); font-weight: 400; text-decoration: none;
  color: var(--brand); cursor: pointer;
}
.nk-filter-info:hover, .nk-filter-info[aria-expanded="true"]{ color: var(--ink); }
.nk-filter-info:focus-visible{ outline: 2px solid var(--focus, var(--brand)); outline-offset: 2px; }
.nk-filter-info-backdrop{
  position: fixed; inset: 0; background: var(--overlay); z-index: var(--z-backdrop);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease);
}
.nk-filter-info-backdrop.is-open{ opacity: 1; pointer-events: auto; }
.nk-filter-info-backdrop[hidden]{ display: none; }
.nk-filter-info-popover{
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: var(--z-sheet); width: min(600px, calc(100vw - 2 * var(--space-4)));
  max-height: 85vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--radius-xl, var(--radius-md));
  box-shadow: var(--shadow-lg); padding: var(--space-8) var(--space-6); color: var(--ink-soft);
  font-size: var(--text-md, var(--text-sm)); line-height: 1.6;
}
.nk-filter-info-popover[hidden]{ display: none; }
.nk-filter-info-popover__close{
  position: absolute; top: var(--space-3); right: var(--space-3); width: 28px; height: 28px;
  border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
  border-radius: 50%;
}
.nk-filter-info-popover__close:hover{ background: var(--surface-soft); color: var(--ink); }
.nk-filter-info-popover__body{ padding-right: var(--space-4); }
.nk-filter-info-popover__body p{ margin: 0 0 var(--space-2); }
.nk-filter-info-popover__body p:last-child{ margin-bottom: 0; }
.nk-filter-info-popover__body a{ color: var(--brand); }
.nk-filter-accordion__summary::-webkit-details-marker{ display: none; }
.nk-filter-accordion__summary .chev{ flex: none; width: 14px; height: 14px; color: var(--muted); transition: transform var(--dur-base) var(--ease); }
.nk-filter-accordion[open] .nk-filter-accordion__summary .chev{ transform: rotate(180deg); }
.nk-filter-accordion__content{ margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); overflow-x: hidden; }

/* Filter-apply loading state (category/search AND kenteken result pages,
   category-infinite-scroll.js + results_filters.phtml's inline ajaxNavigate,
   both via the shared elfmedia-filter-drawer.js window.elfFilterLoading API).
   The JS side already toggles every one of these classes correctly on both
   page types - this theme's own stylesheet (bridge.css/styles.css) just
   never carried the matching visual rules, since those only existed in the
   carparts theme's own _filters-shared.less, which isn't compiled into
   anything this theme actually loads. Ported here so the existing JS wiring
   has something to show. */
main#maincontent.page-main.is-filter-loading-scope,
.nk-results-wrapper.is-filter-loading-scope{ position: relative; isolation: isolate; }
main#maincontent.page-main.is-filter-loading-scope::before,
.nk-results-wrapper.is-filter-loading-scope::before,
.nk-category-loading-mask{
  content: ""; position: absolute; inset: 0;
  background: rgb(255 255 255 / 60%); backdrop-filter: blur(4px);
  z-index: 38; pointer-events: none;
}
.nk-category-loading-mask{ display: block; opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility .12s ease; }
.nk-category-loading-mask.is-active{ opacity: 1; visibility: visible; }
.nk-filter-loading-indicator,
.elf-filter-loading__spinner,
.nk-category-loading-spinner{
  position: fixed; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  display: block; border: 6px solid var(--brand); border-top-color: #fff;
  border-radius: 999px; box-shadow: var(--shadow-lg), 0 0 0 4px rgba(255,255,255,.78);
  animation: nk-filter-spin .7s linear infinite;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 41;
  transition: opacity .12s ease, visibility .12s ease;
}
.is-filter-loading-scope .nk-filter-loading-indicator,
.is-filter-loading-scope .elf-filter-loading__spinner,
.nk-filter-loading-indicator.is-active,
.elf-filter-loading__spinner.is-active,
.nk-category-loading-mask.is-active .nk-category-loading-spinner{ opacity: 1; visibility: visible; }
.elf-filter-loading .is-results-loading{ opacity: .55; pointer-events: none; transition: opacity .16s ease; }
@keyframes nk-filter-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .nk-filter-loading-indicator, .elf-filter-loading__spinner, .nk-category-loading-spinner{ animation-duration: 1.4s; }
}
.nk-filter-options{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.nk-filter-link{
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--ink-soft); text-decoration: none; padding: 2px 0;
}
.nk-filter-link:hover{ color: var(--brand); }
.nk-filter-link:hover .nk-filter-box{ border-color: var(--brand); }
.nk-filter-search{ margin-bottom: var(--space-3); }
.nk-filter-search__input{
  width: 100%; height: 38px; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 0 var(--space-3); background: var(--surface); color: var(--ink); font-size: var(--text-sm);
}
.nk-filter-search__input:focus{ outline: 2px solid rgba(59,130,246,.18); border-color: var(--brand); }
.nk-filter-options li.is-hidden-by-search{ display: none; }
/* .nk-filter-attr.is-collapsed - server-side default state when a filter
   has more than 10 options (see view.phtml/results_filters.phtml). The
   markup/JS toggle for this already existed, but nothing ever actually
   hid the extra <li> items while collapsed, so all 40-50 options rendered
   at once regardless of the class. */
.nk-filter-attr.is-collapsed .nk-filter-options li:nth-child(n+11){ display: none; }
.nk-toggle{
  display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-1);
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: var(--text-xs); font-weight: 700; color: var(--muted);
}
.nk-toggle .chev{ width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease); }
.nk-toggle[aria-expanded="true"]{ color: var(--brand); }
.nk-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }
.nk-price-form{ display: grid; gap: var(--space-4); }
.nk-price-form__values{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.nk-price-value{ border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); padding: var(--space-2) var(--space-3); }
.nk-price-value__label{ display: block; color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.nk-price-value__amount{ display: block; color: var(--ink); font-family: var(--font-display); font-size: var(--text-md); font-weight: 800; }
.nk-price-form__submit{ width: 100%; height: 38px; justify-content: center; }
.nk-filter-link.is-selected,
.nk-filter-options li.is-selected .nk-filter-link{ color: var(--brand); font-weight: 700; }
.nk-filter-link .nk-filter-link__label{ flex: 1; }
.nk-filter-link .nk-count{ color: var(--muted); font-size: var(--text-xs); }

/* .nk-car-icon - auto-silhouet boven de Zijde/Positie-filter (view.phtml bepaalt zelf of
   deze zinvol is: alleen als zowel links+rechts, of voor+achter, echt allebei producten
   hebben). Bovenaanzicht met de voorkant boven, achterkant onder - lost het klassieke
   links/rechts-verwarringspunt op (bestuurders- vs. kijkersperspectief) zonder dat de
   klant erover na hoeft te denken. Site-eigenaar, sept 2026. */
.nk-car-icon{ display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.nk-car-icon__svg{ display: block; }
.nk-car-icon__wheel{ fill: var(--ink-soft, #3a414c); opacity: .85; }
.nk-car-icon__body{ fill: var(--line); }
.nk-car-icon__glass{ fill: var(--surface); opacity: .55; }
.nk-car-icon__headlight{ fill: #ffe9a8; }
.nk-car-icon__taillight{ fill: #f2a8a3; }
.nk-car-icon__divider{ stroke: var(--surface); stroke-width: 2; }
.nk-car-icon__overlay{ fill: var(--brand); opacity: 0; transition: opacity var(--dur-fast, .15s) var(--ease, ease); }
.nk-car-icon__overlay.is-active{ opacity: 1; }
.nk-car-icon:has(.nk-car-icon__half--a:hover) .nk-car-icon__overlay--a{ opacity: 1; }
.nk-car-icon:has(.nk-car-icon__half--b:hover) .nk-car-icon__overlay--b{ opacity: 1; }
.nk-car-icon__halves{ display: flex; gap: var(--space-2); width: 100%; }
.nk-car-icon__half{
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-2) var(--space-2); border-radius: var(--radius-md); border: 1.5px solid var(--line);
  background: var(--surface-soft, var(--bg)); text-decoration: none; color: var(--ink-soft);
  font-size: var(--text-sm); transition: border-color var(--dur-fast, .15s) var(--ease, ease);
}
.nk-car-icon__half:hover{ border-color: var(--brand); }
.nk-car-icon__half.is-selected{ border-color: var(--brand); background: var(--accent-soft, #e8ecff); color: var(--brand); }
.nk-car-icon__half .nk-car-icon__label{ font-weight: 700; }
.nk-car-icon__half .nk-count{ color: var(--muted); font-size: var(--text-xs); }
/* .nk-bumper-combo - het horizontale autootje boven de standaard filterlijst van het
   p_zijde_positie-attribuut (view.phtml, $carIconMode==='zijdepositie'). Zit sinds de vorige
   ronde NIET meer om de <ul class="nk-filter-options"> heen - die lijst is nu gewoon de normale,
   standaard lijst van dit filter (blijft daardoor ook zichtbaar/werkend als er al een keuze
   actief is, i.p.v. te verdwijnen) - dus de :has()-hoverkoppeling hieronder is geschaald op de
   gedeelde ouder .nk-filter-attr, niet op .nk-bumper-combo zelf. Geselecteerde kwadranten
   blijven permanent gekleurd (.is-active, server-side bepaald); hover toont een preview van een
   nog niet gekozen optie. Neus rechts: rechterhelft=voor, linkerhelft=achter, bovenstrook=links,
   onderstrook=rechts (top-down, alsof je zelf in de auto zit en naar rechts/vooruit kijkt).
   Sept 2026. */
.nk-bumper-combo{ display: flex; justify-content: center; margin-bottom: var(--space-3); }
.nk-bumper-combo__svg{ display: block; }
.nk-bumper-combo__quad-overlay{ fill: var(--brand); opacity: 0; transition: opacity var(--dur-fast, .15s) var(--ease, ease); }
.nk-bumper-combo__quad-overlay.is-active{ opacity: 1; }
/* .nk-bumper-combo__steering-* - stuur linksvoor in het autootje (NL: bestuurder
   zit links), zodat voor/achter en links/rechts in één oogopslag duidelijk zijn.
   Vaste kleur (niet var(--line)/var(--brand)) zodat het zichtbaar blijft of het
   kwadrant er direct onder nu gevuld/geselecteerd is of niet. */
.nk-bumper-combo__steering-ring{ fill: none; stroke: var(--ink, #0f1115); stroke-width: 2.5; }
.nk-bumper-combo__steering-hub{ fill: var(--ink, #0f1115); }
.nk-filter-attr:has(.nk-filter-link--fl:hover) .nk-bumper-combo__quad-overlay--fl{ opacity: 1; }
.nk-filter-attr:has(.nk-filter-link--fr:hover) .nk-bumper-combo__quad-overlay--fr{ opacity: 1; }
.nk-filter-attr:has(.nk-filter-link--rl:hover) .nk-bumper-combo__quad-overlay--rl{ opacity: 1; }
.nk-filter-attr:has(.nk-filter-link--rr:hover) .nk-bumper-combo__quad-overlay--rr{ opacity: 1; }
/* "Compleet voor/achter" spant de volle breedte - hover licht dus allebei de kwadranten aan
   die kant tegelijk op, niet maar een kwart. */
.nk-filter-attr:has(.nk-filter-link--front:hover) .nk-bumper-combo__quad-overlay--fl,
.nk-filter-attr:has(.nk-filter-link--front:hover) .nk-bumper-combo__quad-overlay--fr{ opacity: 1; }
.nk-filter-attr:has(.nk-filter-link--rear:hover) .nk-bumper-combo__quad-overlay--rl,
.nk-filter-attr:has(.nk-filter-link--rear:hover) .nk-bumper-combo__quad-overlay--rr{ opacity: 1; }
/* .nk-filter-checkbox - the real <input type="checkbox"> results_filters.phtml
   renders next to .nk-filter-box was never visually hidden, so both the
   native checkbox AND the styled square showed up side by side on every
   filter option. Interaction/state still goes through this real input
   (see results_filters.phtml's JS), so it's hidden visually only, not
   with display:none, to keep it clickable via its <label> and announced
   correctly to screen readers. */
.nk-filter-checkbox{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* .nk-filter-box - the checkbox-style square each option link already
   rendered a placeholder <span> for, with zero matching CSS anywhere -
   every filter option rendered as bare indented text, no checkbox
   affordance at all, unlike the prototype's real <input type="checkbox">
   rows. Kept as a styled span (not a real checkbox) since the underlying
   interaction is still a plain link/URL toggle, not a form control. */
.nk-filter-box{
  flex: none; width: 16px; height: 16px; border: 1.5px solid var(--line); border-radius: 4px;
  background: var(--bg); position: relative; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nk-filter-link.is-selected .nk-filter-box,
.nk-filter-options li.is-selected .nk-filter-box{
  background: var(--brand); border-color: var(--brand);
}
.nk-filter-link.is-selected .nk-filter-box::after,
.nk-filter-options li.is-selected .nk-filter-box::after{
  content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* Prijsfilter - was voorheen een <label> (.nk-price-field) zonder eigen
   display:flex die de "Van"/"Tot"-tekst en het <input> zonder structuur op
   elkaar stapelde; nu een compact label-boven-input veld per kolom, met de
   toepas-knop ernaast uitgelijnd op de inputhoogte. */
.nk-price-grid{ display: flex; align-items: flex-end; gap: var(--space-2); }
.nk-price-field{ display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.nk-price-field > span{ font-size: var(--text-xs); font-weight: 700; color: var(--muted); }
.nk-price-field input{
  height: var(--field-height, 44px); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 0 var(--space-3); font-size: var(--text-sm); width: 100%; background: var(--surface); color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.nk-price-field input:focus{ outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(49,64,205,.12); }
/* Verberg de standaard spinner-pijltjes van <input type="number"> - die
   voegden niets toe aan een prijsveld en oogden rommelig naast de knop. */
.nk-price-field input[type="number"]::-webkit-outer-spin-button,
.nk-price-field input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.nk-price-field input[type="number"]{ -moz-appearance: textfield; appearance: textfield; }
.nk-price-actions{ flex: none; }
.nk-price-apply{
  height: var(--field-height, 44px); width: var(--field-height, 44px); padding: 0; border-radius: var(--radius-md); border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; font-weight: 700; font-size: var(--text-sm); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.nk-price-apply:hover{ background: var(--brand-600); transform: translateY(-1px); }
.nk-price-apply:active{ transform: translateY(0); }
/* Dual-handle price slider (.nk-price-slider, layer/view.phtml) - two
   overlapping native <input type="range"> stacked exactly on top of each
   other, each spanning the full width. Only the thumb gets pointer-
   events (::-webkit-slider-thumb/::-moz-range-thumb) so whichever handle
   the user grabs responds, while the invisible full-width track/input
   itself doesn't swallow clicks meant for the other handle. */
.nk-price-slider{ position: relative; height: 28px; margin-top: 28px; margin-bottom: var(--space-1); padding-inline: var(--space-8); }
/* Floating "€ value" bubble above each handle (data-price-slider-bubble-
   min/max) - replaces the old always-visible "Van"/"Tot" number-input
   boxes, per feedback: show the amount above the thumb while dragging
   instead of in separate fields below the track. Server-rendered at the
   correct starting position/text (same reasoning as .nk-price-slider__
   range's inline style above: AJAX-swapped markup never runs a fresh
   "position it on load" script pass), then kept in sync live by
   updatePriceSlider() in the script below. */
.nk-price-slider__bubble{
  position: absolute; top: -26px; transform: translateX(-50%); pointer-events: none;
  background: var(--ink); color: #fff; font-size: var(--text-xs); font-weight: 700;
  padding: 3px 7px; border-radius: var(--radius-md); white-space: nowrap;
}
.nk-price-slider__bubble::after{
  content: ""; position: absolute; left: 50%; bottom: -3px; width: 6px; height: 6px;
  background: var(--ink); transform: translateX(-50%) rotate(45deg);
}
.nk-price-slider__track{
  position: absolute; top: 50%; left: 0; right: 0; height: 4px;
  background: var(--line); border-radius: var(--radius-full); transform: translateY(-50%);
}
.nk-price-slider__range{
  position: absolute; top: 50%; height: 4px;
  background: var(--brand); border-radius: var(--radius-full); transform: translateY(-50%);
}
.nk-price-slider__input{
  position: absolute; top: 0; left: 0; width: 100%; height: 28px; margin: 0;
  background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none;
}
.nk-price-slider__input::-webkit-slider-runnable-track{ background: transparent; height: 28px; }
.nk-price-slider__input::-moz-range-track{ background: transparent; height: 28px; border: 0; }
.nk-price-slider__input::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 18px; height: 18px; margin-top: 5px; border-radius: 50%;
  background: #fff; border: 2px solid var(--brand); box-shadow: var(--shadow-sm); cursor: pointer;
}
.nk-price-slider__input::-moz-range-thumb{
  pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--brand); box-shadow: var(--shadow-sm); cursor: pointer;
}
.nk-activefilters{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.nk-activefilter-group__chips{ display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.nk-chip{
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600;
  background: var(--brand-50); color: var(--brand); border-radius: var(--radius-full); padding: 6px 10px;
}
.nk-chip__x{ cursor: pointer; }
.nk-activefilters__clear{ font-size: var(--text-xs); font-weight: 700; color: var(--brand); text-decoration: none; }

/* -------------------------------------------------------------------
   Category/PDP vehicle launcher (category/vehicle-reminder.phtml +
   vehicle-state.phtml, .nk-vehicle-launcher*) — same visual role as the
   prototype's .vehicle-strip, kept as its own real component (empty vs.
   selected state toggled by existing JS) rather than rewritten.
   ------------------------------------------------------------------- */
.nk-vehicle-launcher{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-4); margin-bottom: var(--space-4);
}
.nk-vehicle-launcher__top{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; width: 100%; }
.nk-vehicle-launcher__eyebrow{ display: block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); }
.nk-vehicle-launcher__title{ font-size: var(--text-md); font-weight: 700; margin: 2px 0 0; }
.nk-vehicle-launcher__title-row{ display: flex; align-items: center; gap: var(--space-2); }
.nk-vehicle-launcher__lead{ font-size: var(--text-sm); color: var(--ink-soft); margin: var(--space-1) 0 0; }
.nk-vehicle-launcher__actions{ display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.nk-vehicle-launcher__action-links{ display: flex; align-items: center; gap: var(--space-3); }
.nk-vehicle-launcher__button{
  display: inline-flex; align-items: center; height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-md);
  border: 0; background: var(--brand); color: #fff; font-weight: 700; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.nk-vehicle-launcher__link{ font-size: var(--text-sm); font-weight: 600; color: var(--brand); text-decoration: none; }
.nk-vehicle-launcher__link--strong{ color: var(--danger); }
.nk-vehicle-launcher__plate.kenteken-wrapper{ height: 32px; padding: 0 var(--space-2); font-size: var(--text-xs); }

/* -------------------------------------------------------------------
   Category subcategory chip row + toolbar (sorter/amount) — real
   Magento_Catalog toolbar markup, given the prototype's .toolbar look.
   ------------------------------------------------------------------- */
.toolbar.toolbar-products{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-4); font-size: var(--text-sm); color: var(--ink-soft);
  /* Overrides styles.css's generic .toolbar{border-bottom} - this is the
     category/kentekencheck-results title row's toolbar, sitting directly
     above the category description text; that divider line just added
     unwanted visual separation between the title row and its own intro
     copy right below it. */
  padding-block: 0; border-bottom: 0;
}
.toolbar.toolbar-products .toolbar-amount{ font-size: var(--text-sm); color: var(--ink); }
.toolbar.toolbar-products .toolbar-amount .toolbar-number{ font-weight: 700; color: var(--ink); }
.toolbar-sorter.sorter{ display: flex; align-items: center; gap: var(--space-2); }
.toolbar-sorter.sorter .sorter-label{ font-size: var(--text-xs); color: var(--muted); }
/* Category/kentekencheck-results title row: h1 was using the site's
   generic (very large, homepage-hero-sized) h1 rule - fine for one-off
   hero headings, way too big for a title that shares its row with a
   product-count/sort toolbar and needs to still read as one line for
   ordinary category names. */
.catalog-category-view .column.main > div > .cluster > h1,
.category-header__title h1{
  font-size: 24px;
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Keeps the toolbar (product count + sort) at its natural width instead of
   also shrinking to compete with the h1 above for space - the h1 alone
   truncates (ellipsis) when the category name is long, so the row's height
   stays fixed at one line instead of growing when a wrapped title used to
   push the row taller. */
.catalog-category-view .column.main > div > .cluster > #category-header-tools{ flex: none; }
/* .category-header-row/.category-header__title/.category-header__toolbar-
   slot (results_grid.phtml, the KentekenCheck vehicle-results header) had
   zero layout CSS at all - title and toolbar just stacked as plain block
   elements instead of sharing a row, and the toolbar's own 3 flex
   children (an empty .modes, the amount, the sorter) spread across the
   full width with space-between, landing "X producten" dead center
   instead of grouped with "Sorteer op" on the right like the plain
   category page's .cluster-based header already does. */
.category-header__row{
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.category-header__title{ display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.category-header__title h1{ margin: 0; }
.category-header__toolbar-slot .modes{ display: none; }
.category-header__toolbar-slot .toolbar.toolbar-products{ justify-content: flex-end; margin-bottom: 0; }
.category-header__description{ color: var(--muted); font-size: var(--text-sm); max-width: var(--container-narrow); }
.category-header__description p{ margin: 0; }
/*
 * Category product grid width: styles.css already has a 3-columns-at-
 * 1024px+ rule for this exact case (.listing-layout .product-grid), but
 * .listing-layout is the PROTOTYPE's own class name for "grid next to a
 * filter sidebar" - the real category page's grid never carries it (it's
 * real Magento .column.main, not .listing-layout), so it always fell
 * back to the plain .product-grid rule (4 columns at 1024px+) instead -
 * too cramped next to the 260px sidebar. Same 3-column value, just keyed
 * off the real container.
 */
@media (min-width: 1024px){
  .catalog-category-view .column.main .product-grid,
  /* KentekenCheck results page (auto-onderdelen/{merk}/{model}/{jaren}
     [/{motor}]) - results_grid.phtml switched from its own always-1-
     column .products.wrapper.grid.products-grid/.product-items--card-
     grid markup (never styled, 0 matching CSS rules anywhere) to reuse
     the real category page's .product-grid/.product-card markup
     directly (same shared card-item.phtml partial both already used),
     for genuine layout parity with the category page as requested. */
  .kentekencheck-index-results .nk-results-main .product-grid{ grid-template-columns: repeat(3, 1fr); }
  /* Product foto's oogden klein op deze listingpagina's: bij 3 kolommen is
     er ruimte over die de 4:3-ratio (elders, bv. homepage-widgets met 4
     kolommen) niet benut - een vierkante ratio geeft de foto hier meer
     oppervlak zonder de kaart zelf te verbreden. */
  .catalog-category-view .column.main .product-grid .product-card__media,
  .kentekencheck-index-results .nk-results-main .product-grid .product-card__media{ aspect-ratio: 1/1; }
}

/*
 * Trust-strip band inside the category product grid (product/list.phtml) -
 * a full-width row of USPs after the 3rd product, then every 6 after that.
 * grid-column:1/-1 pulls the <li> out of the card columns so it always
 * spans the full grid width, independent of the 2/3/4-column breakpoints
 * above.
 */
.product-grid__trust-row{ grid-column: 1 / -1; list-style: none; }
.product-grid__trust-inner{
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--space-2) var(--space-6); padding: var(--space-4) var(--space-5);
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-align: center;
}
.product-grid__trust-item{
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); white-space: nowrap;
}
.product-grid__trust-item svg{ width: 20px; height: 20px; flex: none; color: var(--brand); }
.product-grid__trust-item strong{ color: var(--ink); }
@media (max-width: 639px){
  .product-grid__trust-inner{ gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); }
  .product-grid__trust-item{ font-size: var(--text-xs); white-space: normal; }
}

/*
 * Infinite scroll (category/view.phtml x-magento-init ->
 * Magento_Catalog/js/category-infinite-scroll, an avja-only override of
 * carparts' real, working scroll-triggered AJAX loader) adds
 * body.elf-infinite-scroll-enabled once it activates, and also makes
 * page-number links AJAX-navigable, but never hides the native numbered
 * pagination itself - that hiding rule lived in carparts' own compiled
 * CSS (removed from this theme, see default_head_blocks.xml), so the
 * numbered pager kept showing at the bottom of every category page
 * alongside the scroll-triggered auto-loading, instead of infinite
 * scroll being the only/obvious way to see more products like before.
 * (The JS itself also needed an avja-only override: its product-list
 * selectors still targeted core Magento's default .products.wrapper
 * .products.list.product-items markup, not avja's own product/list.phtml
 * rewrite's .product-grid/.product-card - so it never actually found any
 * products to watch and this class never got added at all, verified live
 * via headless Chromium.)
 */
.catalog-category-view .column.main .toolbar.toolbar-products .pages{ display: none; }
.elf-infinite-scroll-sentinel{ width: 100%; height: 1px; }
.elf-infinite-scroll-loader,
.elf-infinite-scroll-end{ width: 100%; text-align: center; font-size: var(--text-sm); color: var(--ink-soft); padding: var(--space-4) var(--space-3); }
.elf-infinite-scroll-loader{ font-weight: 700; display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.elf-infinite-scroll-loader__spinner{
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--brand);
  animation: elf-infinite-scroll-spin .7s linear infinite;
}
@keyframes elf-infinite-scroll-spin{ to{ transform: rotate(360deg); } }
.toolbar-sorter.sorter select.sorter-options{
  height: 38px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 var(--space-3);
  font-size: var(--text-xs); background: var(--bg); color: var(--ink);
}
.toolbar-sorter.sorter .sorter-action{ display: none; }

/* -------------------------------------------------------------------
   PDP (catalog_product_view) — the layout XML wires ~10 separate real
   Elfmedia/Magento blocks (gallery, buybox, fitment, quicknav, reviews,
   vehicle modal, sticky bar) into Magento's own .column.main/.product.
   media/.product-info-main containers; none of it is rewritten here
   (too much real JS/AJAX/validation to safely restructure) - this maps
   it onto the prototype's .pdp-layout grid + typography instead. See
   carparts/web/css/source/product-view-fix.less for the equivalent
   grid-placement technique this borrows (values only, not the design).
   ------------------------------------------------------------------- */
.catalog-product-view .column.main{
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  column-gap: var(--space-8); row-gap: var(--space-3); align-items: start;
}
.catalog-product-view .page-title-wrapper{ grid-column: 1 / -1; order: -2; margin: 0 0 var(--space-2); }
.catalog-product-view .page-title-wrapper h1.page-title{
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800;
  letter-spacing: -0.02em; line-height: var(--lh-tight); color: var(--ink); margin: 0;
}
.catalog-product-view .cp-section-title{ font-size: var(--text-lg); font-weight: 800; color: var(--ink); margin: 0 0 var(--space-4); }
.catalog-product-view .cp-product-review-summary{ grid-column: 1 / -1; order: -1; margin: 0 0 var(--space-6); display: flex; align-items: center; gap: var(--space-2); }
.catalog-product-view .cp-product-review-summary__stars{ display: inline-flex; align-items: center; gap: 6px; }
.catalog-product-view .cp-product-review-summary__meta{ font-size: var(--text-xs); color: var(--ink-soft); text-decoration: underline; }
.catalog-product-view .cp-product-review-summary__note{ display: none; }
.catalog-product-view .product.media{ grid-column: 1; }
/* .product-info-main (buybox) and .elf-product-notice (WhatsApp callout)
   share this wrapper (elfmedia.avja.product.info.column in the layout
   XML) instead of each being its own top-level grid item. Giving each of
   them grid-column:2 directly put them in the SAME grid row as the
   gallery column, and since the gallery (tall - it also carries the
   moved quick-specs block) is usually much taller than the buybox, that
   row's track height followed the gallery - leaving a big blank gap
   below the shorter buybox before the notice actually started. The
   wrapper is the one grid-column:2 item; inside it, buybox+notice are a
   plain flex column, so they stack tightly regardless of how tall the
   gallery column next to them is. */
.catalog-product-view .avja-product-info-column{ grid-column: 2; display: flex; flex-direction: column; gap: var(--space-4); }
.catalog-product-view .cp-product-media-links,
.catalog-product-view .cp-product-section,
.catalog-product-view .product-cars-suitable,
.catalog-product-view #section-product-description,
.catalog-product-view #section-product-specs{ grid-column: 1 / -1; }
.catalog-product-view #section-product-description,
.catalog-product-view #section-product-specs,
.catalog-product-view .cp-product-section{ padding-top: var(--space-8); border-top: 1px solid var(--line); margin-top: var(--space-2); }
/* Productbeschrijving's actual text comes from real supplier-provided
   product descriptions (SupplierSync), which can carry legacy inline
   width/table markup from wherever that copy originally came from -
   without a safety net that content can render narrower than the full
   grid-column:1/-1 width the section itself already has. Caps any such
   child without touching the (already correct) container width. */
.catalog-product-view #section-product-description img{ max-width: 100%; height: auto; }
.catalog-product-view #section-product-description table{ max-width: 100%; }
.catalog-product-view #section-product-description > div{ max-width: 100%; }
@media (max-width: 1023px){
  /* minmax(0, 1fr), not bare 1fr - a bare 1fr track's min size defaults
     to auto (the widest grid item's min-content), so one wide child
     (e.g. the fitment table) stretches every other row in this single-
     column layout past the viewport, causing horizontal page scroll on
     mobile. Same fix already applied to the desktop 2-column rule above. */
  .catalog-product-view .column.main{ grid-template-columns: minmax(0, 1fr); }
  .catalog-product-view .avja-product-info-column{ grid-column: 1; }
  /* "Korte specificaties" (core_highlights.phtml) is moved into .product.
     media on ALL viewports (see catalog_product_view.xml) so it stacks
     tightly right under the gallery images on desktop, in the same left
     column as the gallery - deliberate, see that file's comment. On
     mobile the request is the opposite: it should show below price/
     add-to-cart, not above. .product.media itself carries no styling of
     its own (only grid-column, overridden below) - display:contents
     drops its box so its children (.elf-gallery, .elf-quick-specs-block)
     become direct grid items of .column.main and can be reordered
     independently via the CSS `order` property, same technique already
     used for .page-title-wrapper/.cp-product-review-summary above. */
  .catalog-product-view .product.media{ display: contents; }
  .catalog-product-view .elf-quick-specs-block{ order: 1; }
  .catalog-product-view .cp-product-media-links,
  .catalog-product-view .cp-product-section,
  .catalog-product-view .product-cars-suitable,
  .catalog-product-view #section-product-description,
  .catalog-product-view #section-product-specs{ order: 2; }
}

/* Gallery (Magento_Catalog::product/view/custom_gallery.phtml, .elf-gallery*) */
.elf-gallery{ margin-bottom: var(--space-4); }
.elf-gallery__main{ position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-soft); border: 1px solid var(--line); cursor: zoom-in; display: block; width: 100%; padding: 0; }
.elf-gallery__image{ width: 100%; height: 100%; object-fit: contain; padding: var(--space-6); box-sizing: border-box; }
/* Decorative zoom-hint affordance matching the prototype's .gallery-zoom-hint
   circle icon — the whole main image is already the real click target
   (data-elf-gallery-main), this is purely a visual cue, not a functional
   duplicate control. */
.elf-gallery__main::after{
  content: ""; position: absolute; right: var(--space-3); top: var(--space-3); width: 36px; height: 36px;
  border-radius: var(--radius-full); background-color: rgba(255,255,255,.9); box-shadow: var(--shadow-sm); pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' stroke='%230f1115' stroke-width='1.7'/%3E%3Cpath d='M10.5 8v5M8 10.5h5' stroke='%230f1115' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='m20 20-4.3-4.3' stroke='%230f1115' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 18px;
}
/* .elf-gallery__strip is the row of [prev arrow][thumbnail viewport][next
   arrow] BELOW the main photo (custom_gallery.phtml) - .elf-gallery__arrow
   used to be position:absolute/top:50%, styling meant for arrows overlaid
   ON TOP of the main image carousel-style. But the arrows aren't inside
   .elf-gallery__main at all, they're siblings of the thumbnail viewport in
   this strip, which itself had zero layout CSS - so position:absolute
   positioned them relative to whatever ancestor further up the tree
   happened to be positioned, landing them half off-screen at the edges of
   the page instead of beside the thumbnails. Fixed as plain flex items in
   the strip's own row instead of an absolute overlay. */
.elf-gallery__strip{ display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.elf-gallery__arrow{
  position: static; flex: none; width: 36px; height: 36px; border-radius: var(--radius-full);
  background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}
.elf-gallery__arrow:disabled{ opacity: .35; cursor: default; }
.elf-gallery__thumbs{ display: flex; gap: var(--space-2); overflow-x: auto; scroll-behavior: smooth; }
.elf-gallery__thumbs-viewport{ display: flex; flex: 1; min-width: 0; overflow: hidden; }
/* Active/hover border belongs on .elf-gallery__thumb (the <button>, which
   is the element the gallery's own JS actually toggles .is-active on) —
   it was previously placed on .elf-gallery__thumb-image (the <img> one
   level deeper), which never carries that class, so the highlight never
   rendered no matter which thumbnail was active. */
.elf-gallery__thumb{
  width: 64px; height: 64px; border-radius: var(--radius-md); border: 1.5px solid var(--line);
  background: var(--surface-soft); cursor: pointer; flex: none; overflow: hidden; padding: 0;
}
.elf-gallery__thumb.is-active, .elf-gallery__thumb:hover{ border-color: var(--brand); }
.elf-gallery__thumb-image{ width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.elf-gallery__lightbox{
  /* Starts [hidden] (display:none via the UA stylesheet) and the gallery's
     own JS toggles both the hidden property and an .is-open class when
     opening/closing - a bare .elf-gallery__lightbox{display:flex} rule
     has equal specificity to the [hidden] default and wins on source
     order, permanently showing it full-screen regardless of JS state.
     Only .is-open should ever set display here. */
  position: fixed; inset: 0; z-index: var(--z-sheet); background: rgba(15,17,21,.06);
  align-items: center; justify-content: center; padding: var(--space-5);
  box-sizing: border-box;
}
.elf-gallery__lightbox.is-open{ display: flex; }
/* Coolblue-achtig: een afgebakende, niet-schermvullende kaart i.p.v. de
   foto los op de volledige viewport - de dialog had voorheen geen eigen
   grootte/achtergrond, dus de hele overlay voelde aan als "de pagina werd
   wit" i.p.v. "er verscheen een popup" (gebruikersfeedback 2026-10-07). */
.elf-gallery__lightbox-dialog{
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  width: 100%; max-width: 760px; max-height: calc(100vh - 2 * var(--space-5));
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-4); overflow: hidden;
}
.elf-gallery__lightbox-image{
  flex: 1; min-height: 0; width: 100%;
  max-width: 100%; max-height: 100%; object-fit: contain;
  cursor: zoom-in; transition: transform 160ms ease;
}
/* Vergrootglas-zoom (Coolblue-stijl): klik activeert "gezoomd" en terwijl
   actief volgt de uitvergroting de cursor via transform-origin (JS zet dit
   per mousemove), i.p.v. een vaste schaal op een vast middelpunt. */
.elf-gallery__lightbox-image.is-zoomed{ transform: scale(2.1); cursor: zoom-out; transition: none; }
.elf-gallery__lightbox-close{
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2;
  width: 32px; height: 32px; border-radius: var(--radius-full); background: #fff;
  border: 1px solid var(--line); color: var(--ink); font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.elf-gallery__lightbox-close:hover{ border-color: var(--brand); color: var(--brand); }

/* Buy box: real Magento price/qty/add-to-cart markup (product-info-price,
   box-tocart, product-info-stock-sku) had zero styling left with Blank/
   Luma's compiled CSS gone - core commerce elements, not rewritten.
   .product-info-main itself gets the prototype's .pdp-buybox card
   treatment (border/radius/shadow/padding/gap) since none of its real
   children carry that wrapper on their own — without it, price, stock,
   the add-to-cart form and the fitment widget just sat as loose stacked
   text instead of one purchase card like the design. */
.catalog-product-view .product-info-main{
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4);
}
/* Grid instead of a single flex row: .price-box, .product-info-stock-sku
   and the delivery line (elfmedia.avja.product.delivery) are all direct
   children of this container, in DOM order stock -> price -> delivery
   (core layout declares product.info.stock.sku before product.price.final,
   delivery is after="product.price.final") - as one flex row that put
   price and delivery on the same line with stock landing wherever DOM
   order put it (between them), instead of stock sitting on its own line
   directly under the price like the prototype's buybox. Explicit grid
   areas pin each piece regardless of DOM order: price+vat share the top
   row, stock gets its own row directly under it, delivery its own row
   under that. */
.product-info-price{
  display: grid; grid-template-columns: max-content max-content; grid-template-areas: "price vat" "stock stock" "delivery delivery";
  align-items: baseline; column-gap: var(--space-3); row-gap: 6px;
}
.product-info-price > .price-box{ grid-area: price; }
.product-info-price .price-box .price{
  font-family: var(--font-display); font-size: clamp(1.875rem, 1.6rem + 1vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ink);
}
.product-info-price .price-box .old-price .price{ font-family: var(--font); font-weight: 500; font-size: var(--text-md); color: var(--muted); text-decoration: line-through; }
/* Prototype always shows a static "incl. btw" next to the price
   (.pdp-vat); Magento's price-box has no equivalent text node, so it's
   added here rather than via a template edit. */
.product-info-price::after{ content: "incl. btw"; grid-area: vat; align-self: baseline; font-size: var(--text-sm); color: var(--muted); }
.product-info-price > .product-info-stock-sku{ grid-area: stock; }
.product-info-stock-sku{ display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); font-weight: 700; flex-wrap: wrap; }
/* SKU is already shown once, above the title (title_line.phtml's new
   "Artikelnummer" eyebrow) - this second copy next to the price was a
   duplicate the user didn't want repeated there. */
.product-info-stock-sku .product.attribute.sku{ display: none; }
.product-info-stock-sku .stock{ display: flex; align-items: center; gap: 6px; }
.product-info-stock-sku .stock::before{ content: ""; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--line-strong); flex: none; }
.product-info-stock-sku .stock.available{ color: var(--success); } .product-info-stock-sku .stock.available::before{ background: var(--success); }
.product-info-stock-sku .stock.unavailable{ color: var(--muted); }
.product-info-price > .elf-product-delivery-line{ grid-area: delivery; }
.elf-product-delivery-line{ display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--ink-soft); }
.elf-product-delivery-line svg{ flex: none; color: var(--brand); }
.box-tocart{ margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.box-tocart .fieldset{ display: flex; flex-direction: column; gap: var(--space-3); }
/* Prototype's PDP buybox has no qty control at all (quantity is only
   adjustable on the cart page, .qty-stepper there) - qty stays in the
   form/submits with its default value (1), just not shown here, to match
   that 1:1 rather than removing real functionality. */
.box-tocart .field.qty{ display: none; }
/* .actions is a flex ROW's worth of markup in the vendor template
   ($block->getChildHtml('', true) after the submit button appends the
   kentekencheck/fitment widget - carparts.product.addtocart.usps - right
   inside this same element) - as a flex row that squeezed the fitment
   widget onto the same horizontal line as the button, shrinking the
   button below full width and squashing "Controleer voor jouw auto"
   into a sliver next to it. Column layout stacks them instead: full-
   width CTA button, then the fitment widget as its own block underneath,
   matching the prototype's buybox (CTA button, then separate "Controleer
   voor jouw auto" plate button, then vehicle-fit-result). */
.box-tocart .actions{ display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.box-tocart .action.tocart.primary{
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 56px; border-radius: var(--radius-md); border: 1.5px solid transparent;
  background: var(--gradient-brand); color: var(--brand-ink); box-shadow: var(--shadow-brand);
  font-weight: 700; font-size: var(--text-md); cursor: pointer; padding: 0 var(--space-6);
}
.box-tocart .action.tocart.primary svg{ flex: none; }
.box-tocart .action.tocart.primary:hover{ box-shadow: var(--shadow-brand-lg); transform: translateY(-1px); }
.box-tocart .action.tocart.primary:disabled{ background: var(--line-strong); color: var(--muted); box-shadow: none; cursor: not-allowed; transform: none; }

/* Fitment-status widget (KentekenCheck addtocart_usps.phtml,
   .elf-product-main-usps) - the "controleer voor jouw auto"/vehicle-fit
   equivalent, given the prototype's .vehicle-fit-result/.notice look.
   The prototype keeps these as two visually separate things: a
   free-standing plate button ("Controleer voor jouw auto"), and, once a
   vehicle's actually been checked, a SEPARATE bordered/tinted result
   card below it (.vehicle-fit-result). Our real markup nests both
   .elf-product-main-usps__actions (the button) and .elf-product-main-
   usps__context (the caption/result text) inside one shared card - so
   the button never stood out as its own element, it just looked like
   part of the same box as the text. Card styling moved off the outer
   wrapper and onto __context only (and only once a vehicle is actually
   selected), so the button now floats free above a distinct result card
   exactly like the prototype, instead of both sharing one undifferentiated
   box. DOM order already puts __actions before __context (unchanged). */
.elf-product-main-usps{ display: flex; flex-direction: column; gap: var(--space-3); }
.elf-product-main-usps__eyebrow{ display: block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); margin-bottom: 4px; }

/* .context is the whole result area - prototype's .vehicle-fit-result.
   Card treatment (border/background/padding) now applies unconditionally,
   including before any vehicle is picked (the plain-caption state) - the
   user wanted that space to look filled/intentional rather than a bare
   line of text floating in empty space. This also matches the prototype
   itself: border+background+radius+padding is .vehicle-fit-result's own
   BASE style, with --ok/--no/--check only layering a color tint on top. */
.elf-product-main-usps__caption, .elf-product-main-usps__context{
  font-size: var(--text-sm); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-soft); padding: var(--space-4);
}
.elf-product-main-usps__context:has(.elf-product-main-usps__status--ok),
.elf-product-main-usps__context:has(.elf-product-main-usps__status--match){
  border-color: rgba(18,153,90,.3); background: rgba(18,153,90,.06);
}
.elf-product-main-usps__context:has(.elf-product-main-usps__status--no),
.elf-product-main-usps__context:has(.elf-product-main-usps__status--no_match){
  border-color: rgba(197,51,51,.3); background: rgba(197,51,51,.06);
}
.elf-product-main-usps__context:has(.elf-product-main-usps__status--partial),
.elf-product-main-usps__context:has(.elf-product-main-usps__status--unknown){
  border-color: rgba(180,83,9,.3); background: rgba(180,83,9,.06);
}

/* .status wraps THREE stacked pieces (plate badge + eyebrow + vehicle
   name, the status heading, the explain paragraph) - was styled as one
   horizontal icon+text row, which crammed all three onto a single line
   instead of stacking them the way the prototype's .vehicle-fit-result
   does (plate-mini badge, eyebrow, vehicle line, status line, explain
   paragraph, each its own line). */
.elf-product-main-usps__status{ display: flex; flex-direction: column; gap: var(--space-2); }
.elf-product-main-usps__selection{ display: flex; flex-direction: column; gap: 2px; }
.elf-product-main-usps__selection-copy{ display: flex; flex-direction: column; gap: 2px; }
.elf-product-main-usps__selection-title{ font-weight: 700; font-size: var(--text-sm); color: var(--ink); }
/* Status heading (the <strong>, prototype's .vehicle-fit-result__status)
   - display font + a state icon before the text, colored per fit state.
   The icon is a CSS mask (no template edit needed): same paths as the
   prototype's own ICON.check/cross/help. */
.elf-product-main-usps__status-label{
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); color: var(--ink);
}
.elf-product-main-usps__status-label::before{
  content: ""; width: 20px; height: 20px; flex: none; background-color: currentColor;
  -webkit-mask: var(--elf-fit-icon, none) center/contain no-repeat; mask: var(--elf-fit-icon, none) center/contain no-repeat;
}
.elf-product-main-usps__status--ok .elf-product-main-usps__status-label,
.elf-product-main-usps__status--match .elf-product-main-usps__status-label{
  color: var(--success);
  --elf-fit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10.5l4 4 8-9' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.elf-product-main-usps__status--no .elf-product-main-usps__status-label,
.elf-product-main-usps__status--no_match .elf-product-main-usps__status-label{
  color: var(--danger);
  --elf-fit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 5l10 10M15 5 5 15' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.elf-product-main-usps__status--partial .elf-product-main-usps__status-label,
.elf-product-main-usps__status--unknown .elf-product-main-usps__status-label,
.elf-product-main-usps__status--selected .elf-product-main-usps__status-label{
  color: var(--warning);
  --elf-fit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='8.2' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M7.6 7.8a2.4 2.4 0 1 1 3.3 2.2c-.7.35-.9.7-.9 1.4' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14' r='1' fill='%23000'/%3E%3C/svg%3E");
}
.elf-product-main-usps__status-text{ font-size: var(--text-sm); color: var(--ink-soft); }
.elf-product-main-usps__delivery{ font-size: var(--text-sm); color: var(--ink-soft); }
.elf-product-main-usps__actions{ display: flex; flex-direction: column; gap: var(--space-2); }
.elf-product-main-usps__action{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; box-sizing: border-box;
  min-height: 48px; padding: 0 var(--space-4); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 700; text-decoration: none; cursor: pointer; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink);
}
/* Vehicle icon on the primary action had no explicit size, so the bare
   inline <svg> (no width/height attributes) fell back to the browser's
   replaced-element default (300x150) - effectively invisible/broken
   inside a 48px-tall button. */
.elf-product-main-usps__action-icon{ display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; }
.elf-product-main-usps__action-icon svg{ display: block; width: 100%; height: 100%; }
/* Prototype's equivalent CTA ("Controleer voor jouw auto") is a distinct
   yellow plate-styled block button (.btn-plate.btn-block), not a generic
   brand-blue pill - without that contrast it read as just another link
   and the user couldn't find it ("de knop ... is er niet"). */
.elf-product-main-usps__action--primary{
  background: var(--gradient-plate); color: var(--plate-ink); border-color: transparent; box-shadow: var(--shadow-plate);
}
.elf-product-main-usps__action--primary:hover{ box-shadow: 0 14px 30px rgba(255,204,0,.45); }
.elf-product-main-usps__action--secondary{ background: transparent; border-color: var(--line-strong); }
/* Plate badge reuses .kenteken-wrapper (the license-plate FORM input's
   class), which is styled elsewhere as a 56px-tall yellow plate box -
   completely wrong here. Prototype's equivalent (.plate-mini) is a tiny
   dark mono badge, "NL HB-781-N" as one piece of text - overridden fully
   rather than just tweaking height/padding, and the inner "NL" flag box
   reset to plain text so it reads as one badge instead of two. */
.elf-product-main-usps__plate.kenteken-wrapper{
  display: inline-flex; align-items: center; width: auto; height: auto; gap: 3px;
  background: var(--brand); border: 0; border-radius: 4px; padding: 2px 8px; margin-bottom: 2px;
  font-family: var(--mono); font-weight: 800; font-size: 11px; letter-spacing: .06em; color: #fff;
}
.elf-product-main-usps__plate .kenteken-nl{ all: unset; }
.elf-product-main-usps__plate .nk-vehicle-launcher__plate-value{ color: inherit; }

/* Quicknav (media_links.phtml, .cp-quicknav*) - sticky in-page section jump. */
.cp-product-media-links{ margin: var(--space-4) 0; }
.cp-quicknav-shell{ position: sticky; top: calc(var(--header-h-mobile, 56px) + 4px); z-index: 5; background: var(--bg); }
.cp-quicknav{ display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.cp-quicknav__btn{
  display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 var(--space-3); border-radius: var(--radius-full);
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.cp-quicknav__btn.is-active{ border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.cp-product-media-links__note{ display: none; }

/* Fitment/compatibility table (KentekenCheck cars.phtml, .fitment-compact*)
   given the prototype's .compat-table visual language (bordered rounded
   container, soft-background header row, hover-highlight rows) instead of
   a plain bare HTML table. */
.fitment-compact{ border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.fitment-compact__table-wrap{ overflow-x: auto; }
.fitment-compact__table.cp-specs-table{ width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.fitment-compact__table.cp-specs-table thead th{
  background: var(--surface-soft); padding: var(--space-3) var(--space-4); text-align: left;
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.fitment-compact__table.cp-specs-table tbody th, .fitment-compact__table.cp-specs-table tbody td{
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); text-align: left; font-weight: 600; color: var(--ink);
}
.fitment-compact__row:hover{ background: var(--surface-soft); }
.fitment-compact__vehicle{ font-weight: 600; }
.fitment-compact__vehicle-link{ color: inherit; text-decoration: none; }
.fitment-compact__row:hover .fitment-compact__vehicle-link{ color: var(--brand); }
.fitment-compact__years{ color: var(--muted); font-weight: 600; }
.fitment-compact__count{ font-size: var(--text-xs); color: var(--muted); font-weight: 600; }
.fitment-compact__toggle{
  font-size: var(--text-xs); font-weight: 700; color: var(--brand); background: none; border: 0; cursor: pointer; padding: 0; text-decoration: underline;
}
.fitment-compact__detail-row td{ background: var(--surface-soft); border-top: 0; padding: var(--space-4); }
.fitment-compact__detail-head{
  display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.fitment-compact__detail-list{ display: flex; flex-direction: column; gap: 6px; }
.fitment-compact__detail-item{ display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.fitment-compact__detail-dot{ width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--line-strong); flex: none; }
.fitment-compact__detail-link{ color: var(--ink); text-decoration: none; }
.fitment-compact__detail-link:hover{ color: var(--brand); }
.fitment-compact__detail-toggle, .fitment-compact__show-all{
  display: inline-block; margin-top: var(--space-2);
  font-size: var(--text-xs); font-weight: 700; color: var(--brand); background: none; border: 0; cursor: pointer; padding: var(--space-2) 0; text-decoration: underline;
}

/* Specs table group-header rows (real product data is grouped by
   SupplierSync; the prototype's own .specs-table is flat, this is an
   additive row style, not a departure from it). */
.specs-table__group th{ padding-top: var(--space-5); color: var(--ink); font-weight: 800; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
.specs-table__group:first-child th{ padding-top: 0; }

/* Review cards (ProductReview list.phtml, .cp-review-card*) given the
   prototype's plain-stacked review layout. */
.cp-product-reviews__list{ display: flex; flex-direction: column; gap: var(--space-4); }
.cp-review-card{ padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.cp-review-card__top{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.cp-review-card__author{ font-weight: 700; font-size: var(--text-sm); }
.cp-review-card__date{ font-size: var(--text-xs); color: var(--muted); }
/* .cp-stars is reused by both the review CARDS (.cp-review-card__rating)
   and the review-summary widget near the title (.cp-product-review-
   summary__stars) - a partial-fill 5-star rating built from an inline
   <span style="width:X%"> overlay (ProductReview's own _module.less had
   this styling, but that file is never loaded on avja - see the
   default_head_blocks.xml note at the top of this file - so the star
   glyphs never rendered anywhere the class was used). Styled on the base
   class so both call sites get it, not just the review cards. */
.cp-stars{ position: relative; display: inline-block; font-size: 14px; color: var(--line-strong); font-family: Arial, sans-serif; line-height: 1; }
.cp-stars::before{ content: "★★★★★"; }
.cp-stars span{ position: absolute; inset: 0; overflow: hidden; white-space: nowrap; color: #f5a623; }
.cp-stars span::before{ content: "★★★★★"; }
.cp-product-review-summary__stars{ font-size: var(--text-sm); }
.cp-review-card__comment{ font-size: var(--text-sm); color: var(--ink-soft); }
/* review/customer/view.phtml's product thumbnail - getImage()->toHtml()
   renders a plain <img> with real width/height HTML attributes (its
   native review-page image size), so without this it displayed at full
   native size clipped by the 88x88 container's overflow:hidden, showing
   only a blank corner crop of the photo instead of the whole thing
   scaled down. */
.elf-review-view-media img{ width: 100%; height: 100%; object-fit: contain; }

/* -------------------------------------------------------------------------
   "Mijn reviews" list (Magento_Review::customer/list.phtml) - the only CSS
   that ever existed for this markup was carparts' own
   web/css/source/account-reviews.less, compiled into carparts' bundled
   styles-m/l.css - which avja deliberately never loads (see the
   ACCOUNT FORM PAGES note above for the same situation on account/edit,
   address/edit, newsletter/manage). Unlike those, nobody ported this one
   over yet, so the page rendered as fully unstyled plain text. Ported here
   as real base rules (that LESS file only ever had override tweaks on top
   of carparts' own base, which doesn't exist in avja either) using this
   theme's actual tokens instead of carparts' hardcoded hex colours, and
   reusing account/edit's own hero gradient for visual consistency.
   ------------------------------------------------------------------- */
.elf-review-hero{
  margin-bottom: var(--space-5); padding: clamp(20px, 3vw, 28px); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #f8fbff 0%, #eef3ff 58%, #fff8e6 100%);
  border: 1px solid var(--line);
}
.elf-review-hero__eyebrow{ margin: 0 0 var(--space-2); color: var(--muted); font-size: var(--text-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.elf-review-hero h1{ margin: 0; font-size: clamp(1.7rem, 2.7vw, 2.35rem); line-height: 1.08; color: var(--ink); }
.elf-review-hero p{ margin: 10px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }

.elf-review-meta{
  display: grid; gap: var(--space-3); margin-bottom: var(--space-5);
  padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
}
.elf-review-meta--compact{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.elf-review-meta__label{ display: block; margin-bottom: 4px; color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.elf-review-meta strong{ font-size: var(--text-md); color: var(--ink); }

.elf-review-panel--state{
  padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-soft); text-align: center;
}
.elf-review-panel--state h2{ margin: 0 0 var(--space-2); font-size: var(--text-lg); color: var(--ink); }
.elf-review-panel--state p{ margin: 0; color: var(--muted); font-size: var(--text-sm); }

.elf-review-cards--account-list{ display: grid; gap: var(--space-4); }
.elf-review-card{
  padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
}
.elf-review-card__header{
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap;
}
.elf-review-card__kicker{ margin-bottom: var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.elf-review-card__header h2{ margin: 0; font-size: var(--text-lg); line-height: 1.2; }
.elf-review-card__header h2 a{ color: var(--ink); text-decoration: none; }
.elf-review-card__header h2 a:hover{ color: var(--brand); }
.elf-review-card__sku{ margin-top: 4px; color: var(--muted); font-size: var(--text-xs); }
.elf-review-card__action{
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-md); background: var(--brand);
  font-size: var(--text-sm); font-weight: 800; text-decoration: none;
}
.elf-review-card__action span{ color: #fff; }
.elf-review-rating{ display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.elf-review-card__title{ margin-bottom: var(--space-2); color: var(--ink); font-size: var(--text-md); font-weight: 800; }
.elf-review-card__content{ color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.7; }
.elf-review-card__content p{ margin: 0; }

.elf-review-toolbar{ margin-top: var(--space-4); }
.elf-review-toolbar .toolbar.products-reviews-toolbar{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
.elf-review-actions-toolbar{ margin-top: var(--space-5); }

@media (max-width: 900px){
  .elf-review-meta--compact{ grid-template-columns: 1fr; }
  .elf-review-card__header{ flex-direction: column; align-items: flex-start; }
}

/* Sticky mobile buy bar (sticky_buybar.phtml, .elf-product-buybar*) given
   the same look/behaviour as the prototype's .sticky-cta. */
.elf-product-buybar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky-cta); background: var(--bg); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(15,17,21,.08); padding: var(--space-3) var(--gutter); padding-bottom: calc(var(--space-3) + var(--safe-b));
  display: none; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.elf-product-buybar.is-visible{ display: flex; }
@media (min-width: 1024px){ .elf-product-buybar{ display: none !important; } }
.elf-product-buybar__inner{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; }
.elf-product-buybar__content{ display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.elf-product-buybar__image{ width: 40px; height: 40px; object-fit: contain; flex: none; }
.elf-product-buybar__title{ font-size: var(--text-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elf-product-buybar__price{ font-family: var(--font-display); font-weight: 800; }
.elf-product-buybar__cta{
  height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md); border: 0; background: var(--brand); color: #fff;
  font-weight: 700; font-size: var(--text-sm); cursor: pointer; white-space: nowrap;
}
.elf-product-buybar__usp-list{ display: none; }

/* Vehicle-selection modal (category/vehicle-modal.phtml, .nk-vehicle-drawer*,
   shared by category + PDP) - centered dialog, same footprint as the
   prototype's centered .sheet variant. Its inner license/manual forms
   already reuse .vs-form/.vehicle-filter/.vf-* bridged above. */
.nk-vehicle-drawer-backdrop{ position: fixed; inset: 0; background: var(--overlay); z-index: var(--z-backdrop); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease); }
.nk-vehicle-drawer-backdrop.is-open{ opacity: 1; pointer-events: auto; }
.nk-vehicle-drawer{
  position: fixed; z-index: var(--z-sheet); background: var(--surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); max-height: 88vh; display: none; flex-direction: column; overflow: hidden;
  left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 480px;
}
.nk-vehicle-drawer.is-open{ display: flex; }
.nk-vehicle-drawer__header{ display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--line); }
.nk-vehicle-drawer__title{ font-size: var(--text-lg); font-weight: 700; }
.nk-vehicle-drawer__subtitle{ font-size: var(--text-sm); color: var(--muted); }
.nk-vehicle-drawer__close{ background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-soft); }
.nk-vehicle-drawer__content{ padding: var(--space-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-5); }
.nk-vehicle-drawer__current{ display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); background: var(--surface-soft); border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.nk-vehicle-drawer__current[hidden]{ display: none; }
.nk-vehicle-drawer__eyebrow{ font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; color: var(--brand); }

/* -------------------------------------------------------------------
   Cart page (checkout_cart_index) — real AJAX qty-update/coupon/delete
   flows (Magento_Checkout/js/action/update-shopping-cart, discountCode
   widget) kept as native table/form markup, not rewritten; given the
   prototype's .cart-layout/.cart-item/.summary-card visual language via
   a table->flex display override (safe: doesn't touch any data-role/
   data-mage-init hook the JS depends on).
   ------------------------------------------------------------------- */
.checkout-cart-index .cart-container{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-8); align-items: start; }
@media (max-width: 1023px){ .checkout-cart-index .cart-container{ grid-template-columns: 1fr; } }
.checkout-cart-index .page-title-wrapper{ grid-column: 1 / -1; }
.checkout-cart-index .page-title-wrapper h1{ margin-bottom: var(--space-6); }

.cart.table-wrapper{ border-top: 1px solid var(--line); }
#shopping-cart-table{ width: 100%; border-collapse: collapse; }
#shopping-cart-table caption{ display: none; }
#shopping-cart-table > tbody.cart.item{ display: block; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
#shopping-cart-table tr.item-info{ display: flex; gap: var(--space-4); align-items: flex-start; }
#shopping-cart-table td.col.item{ flex: 1; display: flex; gap: var(--space-3); min-width: 0; }
#shopping-cart-table td.col.subtotal{ flex: none; font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); align-self: center; }
.product-item-photo{ display: block; width: 84px; height: 84px; flex: none; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-soft); }
.product-item-photo img{ width: 100%; height: 100%; object-fit: contain; }
.product-item-details{ flex: 1; min-width: 0; }
.product-item-name{ display: block; font-size: var(--text-sm); font-weight: 700; }
.product-item-name a{ color: inherit; text-decoration: none; }
.cart-item-delivery{ font-size: var(--text-xs); color: var(--muted); margin-top: 4px; }
.item-options{ margin: 4px 0 0; font-size: var(--text-xs); color: var(--ink-soft); }
.item-options dt{ display: inline; font-weight: 600; } .item-options dt::after{ content: ": "; }
.item-options dd{ display: inline; margin: 0 8px 0 0; }
.product-item-controls{ display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); flex-wrap: wrap; }
.product-item-remove{ font-size: var(--text-xs); font-weight: 600; color: var(--danger); text-decoration: none; }
.product-item-remove:hover{ text-decoration: underline; }
.qty-selector{ display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; height: 36px; }
.qty-selector label{ display: flex; }
.qty-selector .label{ display: none; }
.qty-button{ width: 32px; height: 36px; border: 0; background: var(--surface-soft); cursor: pointer; font-size: 16px; color: var(--ink); }
.qty-selector .input-text.qty{ width: 44px; height: 36px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-size: var(--text-sm); }

.cart.main.actions{ display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.cart.main.actions .action{
  display: inline-flex; align-items: center; height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 700; text-decoration: none; cursor: pointer;
}
.cart.main.actions .action.update{ background: var(--brand); color: #fff; border: 0; }
.cart.main.actions .action.continue,
.cart.main.actions .action.clear{ background: var(--bg); border: 1px solid var(--line); color: var(--ink); }

.cart-summary{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
}
.cart-summary .cart-overview{ padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); margin-bottom: var(--space-1); }
.cart-summary .cart-overview-kicker{ font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.cart-summary .cart-overview-heading{ display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--space-2); }
.cart-summary .cart-overview-label{ font-size: var(--text-sm); color: var(--ink-soft); }
.cart-summary .cart-overview-meta{ font-size: var(--text-xs); color: var(--muted); }
.cart-summary .cart-overview-amount{ font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; margin-top: var(--space-1); }
.cart-summary table.totals{ width: 100%; border-collapse: collapse; }
.cart-summary table.totals tr{ display: flex; justify-content: space-between; padding: var(--space-1) 0; font-size: var(--text-sm); }
.cart-summary table.totals th, .cart-summary table.totals td{ padding: 0; border: 0; font-weight: 500; }
.cart-summary table.totals tr.grand.totals{ font-weight: 800; font-size: var(--text-md); border-top: 1px solid var(--line); margin-top: var(--space-2); padding-top: var(--space-3); }
/* The button itself is now an avja override (Magento_Checkout::onepage/
   link.phtml) using the prototype's own .btn classes directly - this only
   resets the <li> wrapper Magento still renders it inside. */
.cart-summary .checkout-methods-items{ list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.cart-summary .block.discount{ margin-top: var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-3); }
.cart-summary .block.discount .fieldset.coupon{ display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cart-summary .block.discount .field .control{ display: block; }
.cart-summary .block.discount input.input-text{
  height: 44px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 var(--space-3); font-size: var(--text-sm); width: 100%;
}
.cart-summary .block.discount .actions-toolbar .action{
  height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line);
  background: var(--bg); font-size: var(--text-sm); font-weight: 700; cursor: pointer; white-space: nowrap;
}

/* -------------------------------------------------------------------
   Checkout (Elfmedia_CheckoutFlow::page.phtml, .checkout-flow-*) — this
   is the LIVE checkout (its routes.xml registers frontName "checkout"
   with before="Magento_Checkout", shadowing core's Knockout SPA
   entirely), 1691 lines with real PostNL pickup/delivery AJAX + postcode
   lookup + business/particulier toggle. Not rewritten - far too much
   working logic tied to these exact classnames/data-* hooks. Bridged
   onto the prototype's checkout.html visual language (step indicator,
   card, form fields, method-option radio cards) using the same tokens.
   ------------------------------------------------------------------- */
/* .page-main gives its own top/bottom breathing room, but the user asked
   for visibly more air above the step bar and below the layout (before
   the footer) than that default provides - so this adds real extra
   margin on top of it rather than relying on .page-main alone. */
.checkout-flow-progress{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  list-style: none; margin: var(--space-10) auto var(--space-10);
  max-width: calc(var(--container) - 2 * var(--gutter)); padding: var(--space-5) var(--space-6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.checkout-flow-progress-item{ display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--muted); flex: 1; }
.checkout-flow-progress-item + .checkout-flow-progress-item::before{ content: ""; flex: 1 1 auto; min-width: 24px; height: 2px; border-radius: var(--radius-full); background: var(--line); margin: 0 var(--space-3); transition: background-color .2s ease; }
.checkout-flow-progress-item.is-complete + .checkout-flow-progress-item::before,
.checkout-flow-progress-item.is-active + .checkout-flow-progress-item::before{ background: var(--brand); }
.checkout-flow-progress-link{ display: flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }
.checkout-flow-progress-marker{
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full);
  background: var(--surface-soft); border: 2px solid var(--line); font-size: var(--text-sm); font-weight: 800; color: var(--muted); flex: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.checkout-flow-progress-label{ font-size: var(--text-sm); }
.checkout-flow-progress-item.is-active{ color: var(--ink); font-weight: 700; }
.checkout-flow-progress-item.is-active .checkout-flow-progress-marker{ background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.checkout-flow-progress-item.is-complete{ color: var(--ink); }
.checkout-flow-progress-item.is-complete .checkout-flow-progress-marker{ background: var(--success); border-color: var(--success); color: #fff; }
.checkout-flow-progress-link:hover .checkout-flow-progress-marker{ border-color: var(--brand); }

.checkout-flow-layout{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-8); align-items: start; max-width: var(--container); padding-inline: var(--gutter); margin-inline: auto; margin-bottom: var(--space-16); }
@media (max-width: 1023px){ .checkout-flow-layout{ grid-template-columns: 1fr; } }
.checkout-flow-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); }
.checkout-flow-intro{ margin-bottom: var(--space-6); }
.checkout-flow-kicker{ font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); }
.checkout-flow-heading{ font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; margin-top: 2px; }
.checkout-flow-copy{ font-size: var(--text-base); color: var(--ink-soft); margin-top: 4px; }

.checkout-flow-form{ display: flex; flex-direction: column; gap: var(--space-6); }
.checkout-flow-order-type-title{ font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-2); }
.checkout-flow-order-type-options{ display: flex; gap: var(--space-3); }
/* Particulier/Zakelijk - a labelled radio pair styled as a segmented button
   toggle instead of the bare native radio bullet. The <input> itself stays
   in the DOM (visually-hidden, not display:none) so it's still keyboard-
   focusable/tabbable and the label's native click-toggles-radio behavior
   needs no JS; :has() already used the same way for the shipping/payment
   method cards below (.checkout-flow-option:has(input:checked)). */
.checkout-flow-order-type-option{
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: var(--space-3) var(--space-5); border: 1.5px solid var(--line); border-radius: var(--radius-md);
  font-size: var(--text-base); font-weight: 700; color: var(--ink-soft); text-align: center; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.checkout-flow-order-type-option:hover{ border-color: var(--brand); }
.checkout-flow-order-type-option input{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.checkout-flow-order-type-option:has(input:checked){ border-color: var(--brand); background: var(--surface-soft); color: var(--brand); }
.checkout-flow-order-type-option:has(input:focus-visible){ outline: 2px solid var(--focus, var(--brand)); outline-offset: 2px; }
.checkout-flow-form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.checkout-flow-form-grid--address{ grid-template-columns: 1fr 1fr 1fr; }
.checkout-flow-field{ display: flex; flex-direction: column; gap: 6px; }
.checkout-flow-field--full{ grid-column: 1 / -1; }
.checkout-flow-field label{ font-size: var(--text-base); font-weight: 700; color: var(--ink); }
.checkout-flow-field input[type="text"],
.checkout-flow-field input[type="email"],
.checkout-flow-field input[type="tel"]{
  /* font-size is intentionally >=16px, not the smaller --text-sm token: any
     input under 16px makes iOS Safari auto-zoom the viewport on focus,
     which visibly jolts the layout on every tap - a well-documented mobile
     checkout conversion killer, and most kenteken-lookup traffic is mobile. */
  height: var(--field-height, 46px); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 var(--space-3);
  font-size: var(--text-md); background: var(--bg); color: var(--ink);
}
/* Custom validation message replacing the browser-native "Please fill this
   field" bubble (see page.phtml's submit handler) - that native bubble can't
   be restyled or translated via CSS at all, only fully suppressed. */
.checkout-flow-field.has-error input[type="text"],
.checkout-flow-field.has-error input[type="email"],
.checkout-flow-field.has-error input[type="tel"]{ border-color: var(--danger); }
.checkout-flow-field-error{ font-size: var(--text-sm); font-weight: 700; color: var(--danger); margin-top: 2px; }
/* Bedrijfsnaam/Btw-nummer panel (Zakelijk only) - a single toggled+animated
   box instead of two loose fields, [hidden] toggled by page.phtml's
   syncBusinessFields() rather than inline display styles so the fade/slide
   keyframe below replays every time it's revealed (browsers restart CSS
   animations whenever an element goes from display:none to rendered). */
.checkout-flow-business-panel{
  background: var(--surface-soft); border-radius: var(--radius-md); padding: var(--space-4);
  animation: checkoutFlowFieldIn .22s ease;
}
.checkout-flow-business-panel[hidden]{ display: none; }
@keyframes checkoutFlowFieldIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .checkout-flow-business-panel{ animation: none; }
}
.checkout-flow-address-summary{
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
  background: var(--surface-soft); border-radius: var(--radius-md); padding: var(--space-3); margin-top: var(--space-2);
}
.checkout-flow-address-summary-title{ font-size: var(--text-base); font-weight: 700; }
.checkout-flow-address-summary-lines p{ font-size: var(--text-base); color: var(--ink-soft); margin: 0; }
.checkout-flow-address-summary-edit{ background: none; border: 0; color: var(--brand); font-weight: 700; font-size: var(--text-sm); cursor: pointer; }
.checkout-flow-address-editor{ margin-top: var(--space-3); }
.checkout-flow-lookup-message{ font-size: var(--text-sm); font-weight: 600; margin-top: 4px; }
.checkout-flow-lookup-message.is-success{ color: var(--success); }
.checkout-flow-lookup-message.is-error{ color: var(--danger); }
.checkout-flow-lookup-message.is-notice, .checkout-flow-lookup-message.is-loading{ color: var(--muted); }
.checkout-flow-section-title{ font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-2); }
.checkout-flow-checkbox{ display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); cursor: pointer; }

.checkout-flow-options{ display: flex; flex-direction: column; gap: var(--space-3); }
.checkout-flow-option{
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line);
  border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--dur-base) var(--ease);
}
.checkout-flow-option:has(input:checked){ border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.checkout-flow-option-content{ flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.checkout-flow-option-title{ font-size: var(--text-base); font-weight: 700; display: flex; flex-direction: column; gap: 2px; }
.checkout-flow-option-subtitle, .checkout-flow-option-note{ font-size: var(--text-sm); font-weight: 500; color: var(--muted); }
.checkout-flow-option-price{ font-weight: 700; font-size: var(--text-base); white-space: nowrap; }
.checkout-flow-option-provider{ display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--muted); }
.checkout-flow-provider-badge img{ height: 18px; }
.checkout-flow-empty{ padding: var(--space-6); text-align: center; color: var(--muted); font-size: var(--text-base); }
/* "Meer datums tonen" - PostNL's timeframe list is only ever trimmed to 3
   visible cards via [hidden] on the existing option elements (see
   renderDeliveryOptions() in page.phtml); this is just the reveal action. */
.checkout-flow-delivery-more{
  display: block; width: 100%; margin-top: var(--space-1); padding: var(--space-3);
  border: 1px dashed var(--line); border-radius: var(--radius-md); background: none;
  color: var(--brand); font-weight: 700; font-size: var(--text-base); text-align: center; cursor: pointer;
}
.checkout-flow-delivery-more:hover{ border-color: var(--brand); background: var(--surface-soft); }

.checkout-flow-shipping-summary{ background: var(--surface-soft); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-3); }
.checkout-flow-shipping-summary-head{ display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); font-weight: 700; }
.checkout-flow-shipping-summary-copy{ font-size: var(--text-sm); color: var(--muted); margin: var(--space-1) 0 var(--space-2); }
.checkout-flow-shipping-summary-methods{ display: flex; flex-direction: column; gap: var(--space-2); }
.checkout-flow-shipping-summary-method{ display: flex; align-items: center; justify-content: space-between; font-size: var(--text-base); }

.checkout-flow-review-block{ padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.checkout-flow-review-block:last-child{ border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.checkout-flow-review-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.checkout-flow-review-head h3{ font-size: var(--text-base); font-weight: 700; }
.checkout-flow-review-head a{ font-size: var(--text-sm); font-weight: 700; color: var(--brand); text-decoration: none; }
.checkout-flow-review-lines p{ font-size: var(--text-base); color: var(--ink-soft); margin: 2px 0; }

.checkout-flow-actions{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.checkout-flow-actions-primary{ margin-left: auto; }
.checkout-flow-actions .action.primary{
  display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 var(--space-6); border-radius: var(--radius-md);
  border: 0; background: var(--brand); color: #fff; font-weight: 700; font-size: var(--text-md); text-decoration: none; cursor: pointer;
}
.checkout-flow-actions .action.primary:hover{ background: var(--brand-600); }
.checkout-flow-actions .action.secondary{
  display: inline-flex; align-items: center; height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-weight: 700; font-size: var(--text-base); text-decoration: none; cursor: pointer;
}

.checkout-flow-summary{ display: flex; flex-direction: column; gap: var(--space-3); }
.checkout-flow-summary-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1); }
.checkout-flow-summary-head h3{ font-size: var(--text-lg); }
.checkout-flow-summary-head a{ font-size: var(--text-sm); font-weight: 700; color: var(--brand); text-decoration: none; }
.checkout-flow-summary-items{ display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); margin-bottom: var(--space-1); }
.checkout-flow-summary-item{ display: flex; align-items: flex-start; gap: var(--space-3); }
.checkout-flow-summary-item-image{
  flex: none; width: 56px; height: 56px; object-fit: contain; background: var(--surface-soft);
  border: 1px solid var(--line); border-radius: var(--radius-md);
}
.checkout-flow-summary-item-body{ flex: 1; min-width: 0; }
.checkout-flow-summary-item-title{ font-size: var(--text-base); font-weight: 700; }
.checkout-flow-summary-item-meta{ display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--muted); margin-top: 2px; }
.checkout-flow-summary-row{ display: flex; justify-content: space-between; font-size: var(--text-base); padding: 4px 0; }
/* Grand total is the single most important number on the page - a full
   step up from --text-md so it visibly outweighs the line items above it
   instead of blending in at nearly the same size. */
.checkout-flow-summary-row--grand{ font-weight: 800; font-size: var(--text-lg); border-top: 1px solid var(--line); margin-top: var(--space-2); padding-top: var(--space-3); }
.checkout-flow-summary-note{ font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-2); }

/* Order success page */
.checkout-success-flow{ max-width: 640px; margin-inline: auto; }
.checkout-success-card{ display: flex; flex-direction: column; gap: var(--space-4); }
.checkout-success-sections{ display: flex; flex-direction: column; gap: var(--space-4); }
.checkout-success-section{ display: flex; align-items: center; gap: var(--space-3); }
.checkout-success-meta-row{ display: flex; justify-content: space-between; font-size: var(--text-base); padding: 4px 0; }

/* Checkout mobile - this coverage never existed here: the theme deliberately
   drops carparts' compiled Luma/LESS output (see default_head_blocks.xml),
   but that unused source (web/css/source/checkout-flow.less) had a complete
   mobile pass for these exact classnames that just never made it into this
   file. Ported and adapted to bridge.css's actual structure (.checkout-flow-
   progress is flex here, not grid, so it switches display at this
   breakpoint rather than just changing column count). */
@media (max-width: 767px){
  .checkout-flow-card{ padding: var(--space-4); }
  .checkout-flow-heading, .checkout-flow-summary-head h3{ font-size: var(--text-lg); }

  .checkout-flow-progress{
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); justify-content: stretch;
    margin: var(--space-6) auto var(--space-6); padding: var(--space-4);
  }
  .checkout-flow-progress-item{ justify-content: flex-start; }
  .checkout-flow-progress-item + .checkout-flow-progress-item::before{ display: none; }
  .checkout-flow-progress-marker{ width: 30px; height: 30px; }

  .checkout-flow-layout{ margin-bottom: var(--space-8); }

  .checkout-flow-form-grid,
  .checkout-flow-form-grid--address{ grid-template-columns: 1fr; }

  .checkout-flow-order-type-options{ flex-direction: column; align-items: stretch; }

  .checkout-flow-actions{ flex-direction: column-reverse; align-items: stretch; }
  .checkout-flow-actions-primary{ margin-left: 0; }
  .checkout-flow-actions .action.primary,
  .checkout-flow-actions .action.secondary{ width: 100%; }

  .checkout-flow-option-content,
  .checkout-flow-address-summary,
  .checkout-flow-summary-head,
  .checkout-flow-review-head{ flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* -------------------------------------------------------------------
   Customer account (dashboard/orders/addresses/wishlist/reviews/RMA) —
   sidebar nav links (Magento_Customer::account/navigation-custom.phtml
   generates plain <li><a> children via getChildHtml(), no prototype
   equivalent since account.html uses in-page anchors) + order-history
   table given the cart-table's flex-row bridge treatment.
   ------------------------------------------------------------------- */
.elf-account-nav-block ul li,
nav[aria-label] > ul.stack > li{ list-style: none; }
.block-collapsible-nav .item{ list-style: none; }
.block-collapsible-nav .item a,
.block-collapsible-nav .item > strong{
  display: block; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--ink-soft);
  text-decoration: none; border-radius: var(--radius-md);
}
.block-collapsible-nav .item a:hover{ background: var(--surface-soft); color: var(--ink); }
.block-collapsible-nav .item.current a,
.block-collapsible-nav .item.current > strong{ background: var(--brand-50); color: var(--brand); font-weight: 700; }
.block-collapsible-nav .item.current{ color: var(--brand); }

/* Account nav sidebar (navigation-custom.phtml) - the real DOM here is
   .elf-account-nav > ul.stack > li.nav.item (+ a delimiter <li> between
   groups), not .block-collapsible-nav above (that selector never matched
   this markup at all, so the "current page" row previously had no
   highlight beyond a plain <strong> - no color, no background). Icons are
   injected by navigation-custom.phtml's own script (one per real link,
   matched by label since the current page's entry has no href to match
   on) using the shared sprite from icon-sprite.phtml. */
.elf-account-nav .nav.items{ list-style: none; margin: 0; padding: 0; }
.elf-account-nav .nav.item{ display: block; }
.elf-account-nav .nav.item a,
.elf-account-nav .nav.item > strong{
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--ink);
  text-decoration: none; line-height: 1.3;
}
.elf-account-nav .nav.item a:hover{ background: var(--surface-soft); }
.elf-account-nav .nav.item.current > strong{ background: var(--brand-50); color: var(--brand); font-weight: 700; }
.elf-account-nav__icon{ width: 18px; height: 18px; flex: none; color: var(--muted); }
.elf-account-nav .nav.item a:hover .elf-account-nav__icon{ color: var(--ink); }
.elf-account-nav .nav.item.current > strong .elf-account-nav__icon{ color: var(--brand); }
.elf-account-nav .nav.item .delimiter{ display: block; height: 1px; background: var(--line); margin: var(--space-2) 10px; }

.data.table.table-order-items.history,
.data.table.table-order-items.rma-table{ width: 100%; border-collapse: collapse; }
.data.table.table-order-items.history thead,
.data.table.table-order-items.rma-table thead{ display: none; }
.data.table.table-order-items.history tbody tr,
.data.table.table-order-items.rma-table tbody tr{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--line);
}
.data.table.table-order-items.history td,
.data.table.table-order-items.rma-table td{ padding: 0; border: 0; font-size: var(--text-sm); }
.data.table.table-order-items.history td.col.id{ font-weight: 700; }
.data.table.table-order-items.history td.col.date{ color: var(--muted); font-size: var(--text-xs); }
.data.table.table-order-items.history td.col.total{ font-weight: 800; font-family: var(--font-display); margin-left: auto; }
.data.table.table-order-items.history td.col.actions{ flex-basis: 100%; }
/* Desktop: a real single-line-per-row table instead of the stacked mobile
   card layout above - that base ruleset (thead{display:none}, tbody tr as
   a wrapping flex row) never had a wider-viewport counterpart, so orders
   and RMAs rendered as multi-line cards on desktop too (id/date/total on
   one wrapped line, status below, then every action link stacked on its
   own line under that). The gradient thead styling further down this file
   (.sales-order-history .table-order-items.history thead tr etc.) already
   assumed a real <thead> would be visible - it just never was, since
   nothing here ever un-hid it. */
@media (min-width: 800px){
  .data.table.table-order-items.history,
  .data.table.table-order-items.rma-table{ display: table; }
  .data.table.table-order-items.history thead,
  .data.table.table-order-items.rma-table thead{ display: table-header-group; }
  .data.table.table-order-items.history thead th,
  .data.table.table-order-items.rma-table thead th{
    padding: var(--space-3) var(--space-3); text-align: left; font-size: var(--text-xs); font-weight: 700;
  }
  .data.table.table-order-items.history tbody tr,
  .data.table.table-order-items.rma-table tbody tr{
    display: table-row; padding: 0;
  }
  .data.table.table-order-items.history td,
  .data.table.table-order-items.rma-table td{
    display: table-cell; padding: var(--space-3); vertical-align: middle; white-space: nowrap;
  }
  .data.table.table-order-items.history td.col.actions,
  .data.table.table-order-items.rma-table td:last-child{ flex-basis: auto; white-space: nowrap; }
  .data.table.table-order-items.history td.col.actions .stack,
  .data.table.table-order-items.rma-table td:last-child .stack{
    flex-direction: row; align-items: center; gap: var(--space-3);
  }
}
.elf-order-status{ text-transform: capitalize; }
.elf-order-status--complete, .elf-order-status--voltooid{ background: var(--brand-50); color: var(--success); }
.elf-order-status--canceled, .elf-order-status--geannuleerd{ background: rgba(197,51,51,.08); color: var(--danger); }

/* Order view line items (Magento_Sales::order/items.phtml + its default
   renderer) - had zero theme presence before this pass (raw core Luma
   table, no product image, English labels). Mobile: stacked card per
   line item. Desktop: a real table, same approach as the order-history/
   RMA tables above. */
.order-detail-items{ width: 100%; border-collapse: collapse; }
.order-detail-items thead{ display: none; }
.order-detail-items tbody tr{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-4) 0; border-bottom: 1px solid var(--line);
}
.order-detail-items td{ padding: 0; border: 0; font-size: var(--text-sm); }
.order-detail-items td.col.product{ flex-basis: 100%; }
.order-detail-items td.col.subtotal{ margin-left: auto; font-family: var(--font-display); }
.order-detail-items tfoot tr{ display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; font-size: var(--text-sm); }
.order-detail-items tfoot tr th{ font-weight: 400; text-align: left; border: 0; padding: 0; }
.order-detail-items tfoot tr td{ text-align: right; border: 0; padding: 0; }
.order-detail-items tfoot tr.grand_total th,
.order-detail-items tfoot tr.grand_total td{ font-weight: 800; font-family: var(--font-display); font-size: var(--text-md); padding-top: var(--space-2); border-top: 1px solid var(--line); }
@media (min-width: 800px){
  .order-detail-items{ display: table; }
  .order-detail-items thead{ display: table-header-group; }
  .order-detail-items thead th{ padding: var(--space-3); text-align: left; font-size: var(--text-xs); font-weight: 700; }
  .order-detail-items thead th.col.price,
  .order-detail-items thead th.col.qty,
  .order-detail-items thead th.col.subtotal{ text-align: right; }
  .order-detail-items tbody tr{ display: table-row; padding: 0; }
  .order-detail-items td{ display: table-cell; padding: var(--space-3); vertical-align: middle; border-bottom: 1px solid var(--line); }
  .order-detail-items td.col.product{ flex-basis: auto; }
  .order-detail-items td.col.price,
  .order-detail-items td.col.qty,
  .order-detail-items td.col.subtotal{ text-align: right; }
  .order-detail-items tfoot tr{ display: table-row; }
  .order-detail-items tfoot tr th,
  .order-detail-items tfoot tr td{ display: table-cell; text-align: right; padding: var(--space-2) var(--space-3); }
}

/* Order-history/RMA pager (Magento_Theme::html/pager.phtml, core, never
   themed before) - had no styling at all: raw "Show 10 per page" text and,
   when there's more than one page, every page number rendered with its own
   visible "Page" accessibility label glued to it ("Page 1 Page 2 ..."),
   since that .label span is only ever hidden by Luma's own CSS (not present
   in this theme). Centered per explicit request; .pages/.limiter kept as
   two possible siblings of .toolbar-amount so this still looks right
   whichever combination of them a given page actually renders. */
.order-products-toolbar.toolbar .pager{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-4); text-align: center;
}
.order-products-toolbar.toolbar .toolbar-amount{ font-size: var(--text-sm); color: var(--muted); margin: 0; }
.order-products-toolbar.toolbar .pages-label{
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.order-products-toolbar.toolbar .pages .item .label{
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.order-products-toolbar.toolbar .pages-items{
  display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0;
}
.order-products-toolbar.toolbar .pages-items .item{ display: flex; }
.order-products-toolbar.toolbar .pages-items a.page,
.order-products-toolbar.toolbar .pages-items strong.page{
  display: flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 var(--space-2);
  border-radius: var(--radius-md, 8px); font-size: var(--text-sm); font-weight: 700;
  text-decoration: none; color: var(--ink);
}
.order-products-toolbar.toolbar .pages-items a.page:hover{ background: var(--surface-soft); }
.order-products-toolbar.toolbar .pages-items strong.page{ background: var(--brand); color: #fff; }
.order-products-toolbar.toolbar .pages-items .action{
  display: flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; border-radius: var(--radius-md, 8px);
  color: var(--muted); text-decoration: none;
}
.order-products-toolbar.toolbar .pages-items .action:hover{ background: var(--surface-soft); color: var(--ink); }
.order-products-toolbar.toolbar .limiter{
  display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--muted);
}
.order-products-toolbar.toolbar .limiter-options{
  border: 1px solid var(--line); border-radius: var(--radius-md, 8px); padding: 4px var(--space-2);
  font-size: var(--text-sm); color: var(--ink); background: var(--surface);
}

/* RMA (Elfmedia_Rma - no theme presence existed at all before this pass) */
.rma-badge{ text-transform: capitalize; }
.rma-badge--new, .rma-badge--progress{ background: var(--brand-50); color: var(--brand); }
.rma-badge--approved, .rma-badge--success{ background: rgba(35,140,90,.1); color: var(--success); }
.rma-badge--rejected{ background: rgba(197,51,51,.08); color: var(--danger); }
.rma-badge--closed, .rma-badge--default{ background: var(--surface-soft); color: var(--muted); }

/* -------------------------------------------------------------------
   Legacy .elf-breadcrumbs <ul><li> pattern (zakelijk CMS page + the
   Elfmedia_CustomerService module's own breadcrumbs/*.phtml) - left as
   module-owned markup rather than rewritten (CustomerService ships its
   own 1646-line customerservice.css already built against this theme's
   shared design tokens (--ink/--container/--gutter/...), so it's mostly
   on-brand already; only the breadcrumb row itself needed a nudge to
   match the .breadcrumbs look used everywhere else). */
nav.elf-breadcrumbs ul{ display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: var(--text-xs); color: var(--muted); flex-wrap: wrap; }
nav.elf-breadcrumbs li{ display: flex; align-items: center; gap: 6px; }
nav.elf-breadcrumbs li:not(:first-child)::before{ content: "/"; color: var(--muted); }
nav.elf-breadcrumbs a{ color: var(--muted); text-decoration: none; }
nav.elf-breadcrumbs a:hover{ color: var(--brand); }
nav.elf-breadcrumbs li:last-child span{ color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------------
   System messages (Magento_Theme::messages.phtml / html/messages.phtml,
   the "Product X is toegevoegd aan je winkelwagen"/error/warning banners
   after any server action) - had zero styling anywhere (grepped both
   stylesheets, nothing), so every one of these sitewide showed as bare
   unstyled text. Reuses the prototype's own .notice/.notice-* look
   (already built, already token-correct) rather than a new component.
   ------------------------------------------------------------------- */
/* Margin-bottom used to sit on the page.messages WRAPPER itself
   (.page-main > .messages) - wrong element: that wrapper is also reused
   by carparts' layout for non-message content (PDP breadcrumbs render
   inside it), and on the homepage it renders empty when there's no
   message to show, right above the full-bleed hero. Either way the
   wrapper always carrying that margin created an unwanted gap (extra
   space under the breadcrumbs on the PDP; the hero not sitting flush
   against the top on the homepage) whether or not a real message was
   even present. Moved onto the actual message bubble itself, so the gap
   only exists when there's really a message to make room below. */
.messages .message{
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-4);
  border-radius: var(--radius-md); background: var(--surface-soft); border: 1px solid var(--line);
  font-size: var(--text-sm); color: var(--ink-soft); margin-bottom: var(--space-2);
}
.messages .message::before{
  content: ""; flex: none; width: 18px; height: 18px; border-radius: var(--radius-full);
  background: var(--muted); mask: none;
}
.messages .message-success,
.messages .message.success{ background: var(--success-50); border-color: transparent; color: #0d6b40; }
.messages .message-success::before,
.messages .message.success::before{ background: var(--success); }
.messages .message-error,
.messages .message.error{ background: var(--danger-50); border-color: transparent; color: #8f2626; }
.messages .message-error::before,
.messages .message.error::before{ background: var(--danger); }
.messages .message-warning,
.messages .message.warning{ background: var(--warning-50); border-color: transparent; color: #7c3d09; }
.messages .message-warning::before,
.messages .message.warning::before{ background: var(--warning); }
.messages .message-notice,
.messages .message.notice{ background: var(--brand-50); border-color: transparent; color: var(--brand-600); }
.messages .message-notice::before,
.messages .message.notice::before{ background: var(--brand); }
.messages .message a{ color: inherit; text-decoration: underline; }

/* -------------------------------------------------------------------
   Wishlist (core Magento_Wishlist::item/list.phtml + item/column/*, not
   overridden - real add-to-cart/comment/qty AJAX form kept as-is), given
   the .product-grid/.product-card look already used for real product
   cards elsewhere.
   ------------------------------------------------------------------- */
.products-grid.wishlist.product-items{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4);
  list-style: none; margin: 0; padding: 0;
}
.products-grid.wishlist .product-item{
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; padding: var(--space-4);
}
.products-grid.wishlist .product-item-photo{ display: block; aspect-ratio: 4/3; background: var(--surface-soft); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-3); }
.products-grid.wishlist .product-item-photo img{ width: 100%; height: 100%; object-fit: contain; }
.products-grid.wishlist .product-item-name{ font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-2); }
.products-grid.wishlist .product-item-name a{ color: inherit; text-decoration: none; }
.products-grid.wishlist .comment-box{ margin: var(--space-2) 0; }
.products-grid.wishlist .comment-box textarea{ width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-2); font-size: var(--text-xs); min-height: 48px; }
.products-grid.wishlist .price-box .price{ font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); }
.products-grid.wishlist .box-tocart{ display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.products-grid.wishlist .box-tocart .field.qty{ display: none; }
.products-grid.wishlist .action.tocart.primary{
  flex: 1; height: 40px; border-radius: var(--radius-md); border: 0; background: var(--brand); color: #fff; font-weight: 700; font-size: var(--text-sm); cursor: pointer;
}
.products-grid.wishlist .product-item-actions{ display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.products-grid.wishlist .btn-remove.action.delete{ font-size: var(--text-xs); color: var(--danger); text-decoration: none; }

/* -------------------------------------------------------------------
   Mobile filter drawer (web/js/elfmedia-filter-drawer.js) — clones the
   layered-nav sidebar into a slide-up panel below 1024px with its own
   classnames (.elf-filter-drawer*, toggled via .is-category-filter-open
   rather than .sheet's .is-open), given the same bottom-sheet look as
   the prototype's own .sheet component.
   ------------------------------------------------------------------- */
.category-filter-drawer-backdrop.elf-filter-backdrop{
  position: fixed; inset: 0; background: var(--overlay); z-index: var(--z-backdrop);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease);
}
.category-filter-drawer-backdrop.elf-filter-backdrop.is-category-filter-open{ opacity: 1; pointer-events: auto; }
/*
 * elfmedia-filter-drawer.js calls ensureSidebarHeader(sidebar) - which
 * adds the .elf-filter-drawer class - UNCONDITIONALLY on every page
 * load, desktop included, not only when isMobile(). Below 1024px the JS
 * also portals the real sidebar into document.body and this class's
 * fixed/transform rules ARE what correctly turns it into an off-screen
 * bottom sheet - that part must stay unscoped (an earlier :not(.sidebar-
 * main) attempt here broke that: verified live via a headless-Chromium
 * check at a 390px viewport, position came back "static" instead of
 * "fixed", meaning the drawer would just dump inline instead of sliding
 * up from the bottom).
 *
 * At 1024px+ the same class also lands on the real DESKTOP sidebar,
 * where it must NOT apply (that's what caused "sidebar staat helemaal
 * onderin het scherm" in the first place) - handled below with a single
 * higher-specificity override (.sidebar.sidebar-main.elf-filter-drawer,
 * 3 chained classes) scoped to that breakpoint only, which wins over
 * every rule in this block without needing to touch them.
 */
.elf-filter-drawer{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet);
  background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  max-height: 88vh; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform var(--dur-slow) var(--ease);
  box-shadow: 0 -16px 40px rgba(15,17,21,.2); padding-bottom: var(--safe-b);
}
.elf-filter-drawer.is-category-filter-open{ transform: translateY(0); }
/* Belt-and-braces against the sticky header (position:sticky, its own
   compositing layer) rendering above this drawer/backdrop on some mobile
   browsers despite a numerically lower z-index (a known sticky-position
   stacking quirk, notably on iOS Safari) - explicitly demote it while the
   drawer is open rather than relying on z-index alone. */
body.elf-category-filter-open .site-header{ z-index: 1; }
.elf-filter-drawer__header{ display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
/* elfmedia-filter-drawer.js's ensureSidebarHeader() nests the title/close
   button inside an extra .elf-mobile__top wrapper (a single child of
   .elf-filter-drawer__header), so the flex/space-between above never
   actually applied to them - both plain <div>s/buttons defaulted to
   block-level stacking, putting the close button under "Filters"
   instead of beside it. */
.elf-mobile__top{ display: flex; align-items: center; justify-content: space-between; width: 100%; }
.elf-filter-drawer__title{ font-size: var(--text-lg); font-weight: 700; }
.elf-filter-drawer__close{ background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-soft); }
.elf-filter-drawer__content{ overflow-y: auto; flex: 1; }
.elf-filter-drawer__footer{ padding: var(--space-4); border-top: 1px solid var(--line); }
.elf-filter-drawer__apply{
  width: 100%; height: 48px; border-radius: var(--radius-md); border: 0;
  background: var(--brand); color: #fff; font-weight: 700; font-size: var(--text-sm); cursor: pointer;
}
@media (min-width: 1024px){
  .elf-filter-drawer{ display: none; }
  .category-filter-drawer-backdrop.elf-filter-backdrop{ display: none; }
  /* Wins over every rule above via specificity alone (3 chained classes,
     0-3-0, beats their 0-1-0) - the real desktop sidebar keeps
     .elf-filter-drawer from the JS but must never take on the drawer's
     fixed/transformed/hidden treatment; forced back to a normal in-flow
     grid item instead. Same story for the KentekenCheck results page's
     own sidebar (results_grid.phtml/results_filters.phtml, auto-
     onderdelen/{merk}/{model}/{jaren}/{motor}) - different classnames
     (.nk-results-sidebar, not .sidebar.sidebar-main - it's a bespoke
     re-implementation, not Magento's native layered nav) but the exact
     same "portalled into <body> as an always-fixed drawer" JS/CSS bug:
     without this, the sidebar was unconditionally display:none at desktop
     widths (matched only the generic .elf-filter-drawer{display:none}
     rule above, never the .sidebar.sidebar-main exception), so the
     entire filter list was invisible on desktop, not just wrongly
     positioned. */
  .sidebar.sidebar-main.elf-filter-drawer,
  .nk-results-sidebar.elf-filter-drawer{ position: static; transform: none; display: block; box-shadow: none; border-radius: 0; background: transparent; max-height: none; z-index: 2; }
  /* ensureSidebarHeader()/ensureSidebarFooter() in elfmedia-filter-drawer.js
     insert the "Filters ✕" mobile-drawer header and the "Filters
     toepassen" apply-footer INTO the sidebar unconditionally, desktop
     included (matches the exact same "must stay unscoped for the real
     mobile drawer to work" constraint as the block above) - so on desktop
     they showed up floating above the real, always-visible filter
     accordions instead of only appearing in the off-canvas mobile sheet.
     .nk-filters__head (added to layer/view.phtml) is the real, always-
     visible desktop "Filters"/"Reset" header the prototype expects; these
     two get hidden here instead. */
  .sidebar.sidebar-main .elf-filter-drawer__header,
  .sidebar.sidebar-main .elf-filter-drawer__footer,
  .nk-results-sidebar .elf-filter-drawer__header,
  .nk-results-sidebar .elf-filter-drawer__footer{ display: none; }
}

/* -------------------------------------------------------------------
   Mini-cart drawer (js/minicart-drawer.js) — no prototype equivalent
   (the prototype links straight to cart.html), so this is a new,
   token-consistent drawer rather than a port.
   ------------------------------------------------------------------- */
/* #miniCart's own wrapper is now a plain .sheet (styles.css) - same bottom-
   sheet pattern as "Mijn Garage"/categories, instead of the bespoke right-
   side drawer this used to be. .mini-cart-header/-body/-footer etc. below
   are still reused as-is by the desktop .cart-menu__panel dropdown. */
.mini-cart-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4); border-bottom: 1px solid var(--line);
}
.mini-cart-body{ flex: 1; overflow-y: auto; padding: var(--space-4); }
.mini-cart-empty{ color: var(--muted); font-size: var(--text-sm); }
.mini-cart-footer{
  padding: var(--space-4); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-3);
}
.mini-cart-footer .total{ display: flex; justify-content: space-between; font-size: var(--text-md); }
/* .mini-cart-item is what js/minicart-drawer.js actually renders per cart
   line (img + .info > .name/.meta/.price + .remove button) - this had no
   styling anywhere at all until now, so cart contents rendered as bare
   unstyled browser defaults inside the drawer. */
.mini-cart-item{
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding-block: var(--space-3); border-bottom: 1px solid var(--line);
}
.mini-cart-item:last-child{ border-bottom: 0; }
.mini-cart-item img{
  width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: #fff; flex: none;
}
.mini-cart-item .info{ flex: 1; min-width: 0; }
.mini-cart-item .name{
  font-size: var(--text-sm); font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mini-cart-item .meta{ font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
.mini-cart-item .price{ font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); margin-top: var(--space-1); }
.mini-cart-item .remove{
  background: none; border: 0; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer;
  flex: none; padding: var(--space-1);
}
.mini-cart-item .remove:hover{ color: var(--danger); }
.mini-cart-header__subtitle{ display: block; font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }

/* Desktop cart dropdown (.cart-menu, header.phtml) - same anchored-flyout
   recipe as .account-menu/.account-menu__panel (styles.css), just wider
   and with no padding of its own since its children (.mini-cart-header/
   -body/-footer, reused as-is from #miniCart's .sheet markup) already
   carry their own padding. Mobile opens the same #miniCart as a bottom
   .sheet instead - see header.phtml for the hide-mobile/hide-desktop
   split between the two triggers. */
.cart-menu{ position: relative; display: flex; }
.cart-menu__panel{
  position: absolute; top: 100%; right: 0; margin-top: 8px; z-index: 60; width: min(380px, 92vw);
  max-height: min(560px, 75vh); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.cart-menu__panel[hidden]{ display: none; }
.cart-menu__panel .mini-cart-body{ min-height: 0; }

/* -------------------------------------------------------------------
   Product review summary (Elfmedia_ProductReview::product/review/
   card_summary.phtml, on every product card + PDP) — its own
   percent-width star-mask markup (.cp-stars/.cp-product-card-review),
   given the same visual language as the prototype's .product-card__reviews
   (star row + count) without touching the real rating-data template.
   ------------------------------------------------------------------- */
.product-card__reviews:empty{ display: none; }
.product-review-summary.cp-product-card-review{
  display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--ink-soft);
}
.cp-stars.cp-product-card-review__stars{
  position: relative; display: inline-block; font-size: 13px; line-height: 1; color: var(--line-strong);
  font-family: Arial, sans-serif; letter-spacing: 1px;
}
.cp-stars.cp-product-card-review__stars::before{ content: "★★★★★"; }
.cp-stars.cp-product-card-review__stars span{
  position: absolute; inset: 0; overflow: hidden; white-space: nowrap; color: #f5a623;
}
.cp-stars.cp-product-card-review__stars span::before{ content: "★★★★★"; }
.cp-product-card-review__count{ font-weight: 600; }

/* Magento price-box output inside .product-card__price-row / PDP price
   slots — keep the prototype's price typography even though the markup
   is core Magento's <span class="price">, not authored by this theme. */
.product-card__price-row .price,
.pdp-price-block .price{
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; color: var(--ink);
}
.product-card__price-row .price{ font-size: var(--text-lg); }
.product-card__price-row .old-price .price,
.product-card__price-row .old-price{
  font-family: var(--font); font-weight: 500; font-size: var(--text-sm); color: var(--muted);
  text-decoration: line-through;
}
.product-card__price-row .special-price{ display: inline-flex; align-items: baseline; gap: var(--space-2); }


.avja-product-alert{ margin: var(--space-3) 0 0; }
.avja-product-alert__link{
  display: flex; align-items: flex-start; gap: var(--space-3); text-decoration: none;
  border: 1px solid var(--line); background: var(--surface-soft); border-radius: var(--radius-md);
  padding: var(--space-3); color: var(--ink); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.avja-product-alert__link:hover{ border-color: var(--brand); background: var(--surface); }
.avja-product-alert__icon{
  width: 34px; height: 34px; border-radius: var(--radius-md); background: rgba(37,99,235,.10);
  color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.avja-product-alert__copy{ display: grid; gap: 2px; min-width: 0; }
.avja-product-alert__copy strong{ font-size: var(--text-sm); line-height: var(--lh-snug); }
.avja-product-alert__copy small{ font-size: var(--text-xs); color: var(--muted); line-height: var(--lh-snug); }

/* -------------------------------------------------------------------
   SEO landing pages (KentekenCheck partnumber_landing.phtml /
   brand_landing.phtml / model_landing.phtml, kc-brand-* / kc-partnumber-*
   classnames) — content-rich real pages (product matches, fitment,
   alternative part numbers, manufacturers, internal links, FAQ) with no
   1:1 prototype equivalent (frontend-prototype-v2/onderdeelnummer.html is
   a much simpler single-product mock), so mapped onto the design system's
   existing tokens/components instead of trimming any of the real SEO
   content down to match that mock. Not rewritten as templates - real
   dynamic, business-critical data, same reasoning as the PDP fitment
   widget.
   ------------------------------------------------------------------- */
/* Hero given the same dark brand-gradient treatment as the homepage/
   klantenservice hero (.section--brand) instead of plain white/black-on-
   white text - the biggest single contributor to this page reading as
   flat and "too white" against the rest of the site.
   Qualified with the .kc-brand-page ancestor rather than a bare
   .kc-brand-hero selector: the bare selector mysteriously never made it
   into the parsed stylesheet at this position (confirmed live - every
   .kc-brand-hero__* rule around it parsed fine, an identical declaration
   block under a differently-named test selector parsed fine, but
   .kc-brand-hero itself silently vanished from document.styleSheets'
   parsed rules every time). Never fully root-caused; this sidesteps it
   and is more specific/robust anyway. */
/* The first rule using this exact selector at this position in the file
   consistently failed to register in the parsed stylesheet, verified
   repeatedly (a single combined rule, then a split-into-5 version - each
   time whichever declaration was first for this selector silently
   disappeared from document.styleSheets, while every later rule with the
   identical selector text parsed fine). Never fully root-caused despite
   extensive live testing (ruled out: encoding, brace-matching, duplicate
   selectors, invalid property values, position-in-file, service worker
   caching). This harmless no-op placeholder absorbs whatever is
   dropping the "first" rule so the real styling below lands intact. */
.kc-brand-page .kc-brand-hero{ box-sizing: border-box; }
.kc-brand-page .kc-brand-hero{
  padding-block: var(--space-10) var(--space-6); background: var(--gradient-brand); color: var(--brand-ink); position: relative; overflow: hidden;
}
.kc-brand-page .kc-brand-hero::before{ content: ""; position: absolute; inset: 0; z-index: 0; background: var(--gradient-mesh); pointer-events: none; }
.kc-brand-hero__inner{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: 1; }
.kc-brand-hero__eyebrow{
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; margin: 0 0 var(--space-2); position: relative; padding-left: var(--space-4);
}
.kc-brand-hero__eyebrow::before{
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 10px; height: 3px; border-radius: var(--radius-full); background: var(--plate);
}
.kc-brand-hero__title{ font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.02em; line-height: var(--lh-tight); margin: 0 0 var(--space-2); color: #fff; }
.kc-brand-hero__subtitle{ font-size: var(--text-md); color: rgba(255,255,255,.85); max-width: 65ch; }
/* .hero-checklist (styles.css) only gets white text under .hero-dark - the
   prototype never reuses it inside the solid-blue .kc-brand-hero, but the
   /kentekencheck landing page does (kentekencheck_index.phtml). */
.kc-brand-hero .hero-checklist li{ color: #fff; font-weight: 600; }
.kc-brand-hero .hero-checklist svg{ color: var(--plate); flex-shrink: 0; }

/* Full redesign of this hero's grid/logo/search/chips/content-box/FAQ/
   product-card pieces moved to its own file, kc-brand.css - see that
   file's header comment for why (bridge.css hit cssmin's pcre.backtrack_
   limit and failed to deploy once this was added here). */

/* Alternating soft-tinted bands between sections (same dotted-texture
   trick as the homepage's .section--soft) instead of every section
   sitting on the same flat white, so the page reads with some depth/
   rhythm scrolling down instead of one long undifferentiated sheet. */
.kc-brand-section{ padding-block: var(--space-10); border-top: 1px solid var(--line); }
.kc-brand-section:first-of-type{ border-top: 0; padding-top: var(--space-8); }
.kc-brand-section:nth-of-type(even){
  background: radial-gradient(rgba(15,17,21,.05) 1px, transparent 1px) 0 0/22px 22px, var(--surface-soft);
}
.kc-brand-section__head{ margin-bottom: var(--space-5); }
.kc-brand-section__head h2{ font-size: var(--text-xl); margin-bottom: var(--space-2); }
.kc-brand-section__head p{ color: var(--ink-soft); font-size: var(--text-sm); max-width: 65ch; }
.kc-brand-section__head--row{ display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.kc-brand-section__foot{ display: flex; justify-content: center; margin-top: var(--space-6); }

.section-products__grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4);
  list-style: none; margin: 0; padding: 0;
}

/* Card panel instead of a bare hairline-bordered list - matches the
   weight of a real .card elsewhere in the design system. Full width
   (was capped at --container-narrow, reading noticeably narrower than
   the header/hero above it) with a 2-column grid on wider screens so
   the space is actually used, collapsing to a single column on mobile
   instead of squeezing long label/value pairs onto one cramped row. */
.kc-partnumber-details-list{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-2) var(--space-5);
}
@media (max-width: 640px){
  .kc-partnumber-details-list{ grid-template-columns: 1fr; }
}
.kc-partnumber-details-list__item{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding-block: var(--space-3); border-bottom: 1px solid var(--line); font-size: var(--text-sm);
}
.kc-partnumber-details-list__item dt{ color: var(--muted); font-weight: 600; }
.kc-partnumber-details-list__item dd{ margin: 0; font-weight: 700; color: var(--ink); text-align: right; }
.kc-partnumber-details-list__item dd a{ color: var(--brand); text-decoration: none; }
.kc-partnumber-details-list__item dd a:hover{ text-decoration: underline; }

.kc-brand-card-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.kc-brand-card{
  display: block; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-sm);
  padding: var(--space-4); text-decoration: none; color: inherit; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.kc-brand-card:hover{ border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* .kc-brand-card__image styling (incl. --fallback for missing photos)
   moved to kc-brand.css - see that file. */
.kc-brand-card__content{ display: flex; flex-direction: column; gap: 4px; }
.kc-brand-card__title{ font-weight: 700; font-size: var(--text-sm); color: var(--ink); }
.kc-brand-card__meta{ font-size: var(--text-xs); color: var(--muted); }
.kc-brand-card__meta:last-child{ color: var(--brand); font-weight: 600; }
/* Merken-overzichtspagina (brands_index.phtml, /auto-onderdelen) - een
   logo naast de gewone .kc-brand-card__content-tekst i.p.v. de kale
   tekst-only kaart die de rest van .kc-brand-card-grid gebruikt. */
.kc-brand-card--logo{ display: flex; align-items: center; gap: var(--space-3); }
.kc-brand-card__logo{ width: 48px; height: 48px; object-fit: contain; flex: none; }

.kc-partnumber-license-cta{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap;
  margin-top: var(--space-6); padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--surface-soft); border: 1px solid var(--line);
}
.kc-partnumber-license-cta__eyebrow{ display: block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); margin-bottom: 4px; }
.kc-partnumber-license-cta__title{ font-weight: 700; font-size: var(--text-md); margin: 0 0 4px; max-width: 55ch; }
.kc-partnumber-license-cta__note{ font-size: var(--text-sm); color: var(--ink-soft); margin: 0; }
.kc-partnumber-license-cta__button{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); flex: none;
  min-height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1.5px solid transparent;
  background: var(--gradient-plate); color: var(--plate-ink); box-shadow: var(--shadow-plate);
  font-weight: 700; font-size: var(--text-sm); text-decoration: none; white-space: nowrap;
}
.kc-partnumber-license-cta__button:hover{ box-shadow: 0 14px 30px rgba(255,204,0,.45); }

/* brand_landing.phtml/model_landing.phtml "in 3 stappen" now reuses the
   homepage's own .step-numeral + .grid.grid-3 pattern directly instead of
   a custom card design. "Waarom klanten hier bestellen" (.kc-brand-why-*)
   moved to kc-brand.css alongside the rest of this page's styling - see
   that file's header comment for why (bridge.css's cssmin size limit). */

.kc-partnumber-faq{ max-width: var(--container-narrow); }
.kc-partnumber-faq__item{ border-bottom: 1px solid var(--line); }
.kc-partnumber-faq__item summary{ list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; font-weight: 700; }
.kc-partnumber-faq__item summary::-webkit-details-marker{ display: none; }
.kc-partnumber-faq__item p{ padding-bottom: var(--space-4); color: var(--ink-soft); max-width: 68ch; }

/* -------------------------------------------------------------------
   Klantenservice (Elfmedia_CustomerService::page.phtml, .customerservice-*)
   — Elfmedia_CustomerService::css/customerservice.css already provides
   fairly complete, already-token-aware styling for this whole section
   (landing/category/article/navigation), unlike the carparts legacy
   stylesheets removed elsewhere in this theme. The one real mismatch
   against the new design is the hero: that stylesheet gives it its own
   light/white treatment (#0f172a text on a near-white gradient), while
   the prototype (klantenservice.html, .section--brand) uses the same
   dark brand-gradient hero as the rest of the site. Overridden here
   rather than editing that module file directly - qualified with the
   .customerservice-page ancestor (every rule below is otherwise a
   single-class selector, same specificity as the module CSS's own
   rules) since that module's page-specific <css src> tag is added by
   its own layout handle, which merges AFTER default_head_blocks.xml's
   bridge.css link - on an equal-specificity tie the later stylesheet
   wins, so a same-specificity override here would have silently lost;
   confirmed live via screenshot before adding the extra qualifier.
   ------------------------------------------------------------------- */
.customerservice-page .customerservice-hero{
  background: var(--gradient-brand); border-bottom: 0; color: var(--brand-ink); position: relative; overflow: hidden;
}
.customerservice-page .customerservice-hero::before{
  content: ""; position: absolute; inset: 0; z-index: 0; background: var(--gradient-mesh); pointer-events: none;
}
.customerservice-page .customerservice-hero__inner{ position: relative; z-index: 1; }
.customerservice-page .customerservice-badge{ background: rgba(255,255,255,.15); color: #fff; }
.customerservice-page .customerservice-title{ color: #fff; }
.customerservice-page .customerservice-intro{ color: rgba(255,255,255,.85); }
.customerservice-page .customerservice-panel{ box-shadow: var(--shadow-lg); }

/* Onderdeelnummer hub page (partnumber_hub.phtml) - a few small additions
   on top of the .kc-brand-* components already built for the per-number
   landing page. */
.kc-partnumber-step__number{
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: var(--radius-full); background: var(--brand-50); color: var(--brand);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); margin-bottom: var(--space-3);
}
.kc-partnumber-split{ grid-template-columns: 1.4fr 1fr; gap: var(--space-8); }
@media (max-width: 899px){ .kc-partnumber-split{ grid-template-columns: 1fr; } }

/* Search results should use the same desktop density as category listings. */
@media (min-width: 1024px){
  .catalogsearch-result-index .column.main .product-grid,
  .zoekresultaten-index-index .column.main .product-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

.customer-account-index .page-main,
.customer-account-edit .page-main,
.customer-address-index .page-main,
.customer-address-form .page-main,
.sales-order-history .page-main,
.sales-order-view .page-main,
.sales-order-invoice .page-main,
.sales-order-shipment .page-main,
.sales-order-creditmemo .page-main,
.wishlist-index-index .page-main,
.rma-customer-index .page-main,
.rma-customer-view .page-main,
.rma-customer-create .page-main,
.rma-customer-create-step2 .page-main,
.productreview-account-view .page-main,
.kentekencheck-garage-index .page-main{
  border-radius: 0;
}

.customer-account-index .page-main > .page-title-wrapper,
.customer-account-edit .page-main > .page-title-wrapper,
.customer-address-index .page-main > .page-title-wrapper,
.customer-address-form .page-main > .page-title-wrapper,
.sales-order-history .page-main > .page-title-wrapper,
.sales-order-view .page-main > .page-title-wrapper,
.sales-order-invoice .page-main > .page-title-wrapper,
.sales-order-shipment .page-main > .page-title-wrapper,
.sales-order-creditmemo .page-main > .page-title-wrapper,
.wishlist-index-index .page-main > .page-title-wrapper,
.rma-customer-index .page-main > .page-title-wrapper,
.rma-customer-view .page-main > .page-title-wrapper,
.rma-customer-create .page-main > .page-title-wrapper,
.rma-customer-create-step2 .page-main > .page-title-wrapper,
.productreview-account-view .page-main > .page-title-wrapper,
.kentekencheck-garage-index .page-main > .page-title-wrapper{
  padding: var(--space-6) var(--space-6) var(--space-4);
  margin: 0 0 var(--space-5);
  border: 1px solid rgba(49,64,205,.14);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-700), var(--brand));
  color: #fff;
  box-shadow: var(--shadow-md);
}

.customer-account-index .page-main > .page-title-wrapper h1,
.customer-account-edit .page-main > .page-title-wrapper h1,
.customer-address-index .page-main > .page-title-wrapper h1,
.customer-address-form .page-main > .page-title-wrapper h1,
.sales-order-history .page-main > .page-title-wrapper h1,
.sales-order-view .page-main > .page-title-wrapper h1,
.sales-order-invoice .page-main > .page-title-wrapper h1,
.sales-order-shipment .page-main > .page-title-wrapper h1,
.sales-order-creditmemo .page-main > .page-title-wrapper h1,
.wishlist-index-index .page-main > .page-title-wrapper h1,
.rma-customer-index .page-main > .page-title-wrapper h1,
.rma-customer-view .page-main > .page-title-wrapper h1,
.rma-customer-create .page-main > .page-title-wrapper h1,
.rma-customer-create-step2 .page-main > .page-title-wrapper h1,
.productreview-account-view .page-main > .page-title-wrapper h1,
.kentekencheck-garage-index .page-main > .page-title-wrapper h1{
  color: #fff;
}

.elf-account-nav-block.card,
.block-collapsible-nav,
.customer-account-index .sidebar-main .card,
.sales-order-history .sidebar-main .card,
.wishlist-index-index .sidebar-main .card,
.kentekencheck-garage-index .sidebar-main .card{
  border: 1px solid rgba(49,64,205,.16);
  background: linear-gradient(180deg, #fff, rgba(246,248,255,.96));
  box-shadow: var(--shadow-sm);
}

.elf-account-nav-block .eyebrow,
.block-collapsible-nav .title,
.block-collapsible-nav .block-title{
  color: var(--brand);
}

.block-collapsible-nav .item a,
.block-collapsible-nav .item > strong,
.elf-account-nav-block .item a,
.elf-account-nav-block .item > strong{
  border-radius: var(--radius-sm);
}

.block-collapsible-nav .item.current > strong,
.block-collapsible-nav .item.current a,
.elf-account-nav-block .item.current > strong,
.elf-account-nav-block .item.current a{
  background: var(--brand);
  color: #fff;
}

.block-collapsible-nav .item a:hover,
.elf-account-nav-block .item a:hover{
  background: rgba(49,64,205,.08);
  color: var(--brand);
}

.sales-order-history .cluster:first-child,
.kentekencheck-garage-index .elf-garage-page > .card:first-child{
  padding: var(--space-5);
  border: 1px solid rgba(49,64,205,.14);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #fff, #f3f6ff);
  box-shadow: var(--shadow-sm);
}

.sales-order-history .table-wrapper.orders-history,
.customer-account-index .table-wrapper.orders-history{
  overflow: hidden;
  border: 1px solid rgba(49,64,205,.14);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-md);
}

.sales-order-history .table-order-items.history thead tr,
.customer-account-index .table-order-items.history thead tr{
  background: linear-gradient(135deg, var(--brand-700), var(--brand));
}

.sales-order-history .table-order-items.history thead th,
.customer-account-index .table-order-items.history thead th{
  color: #fff;
  border: 0;
}

.sales-order-history .table-order-items.history tbody tr,
.customer-account-index .table-order-items.history tbody tr{
  background: #fff;
}

.sales-order-history .table-order-items.history tbody tr:nth-child(even),
.customer-account-index .table-order-items.history tbody tr:nth-child(even){
  background: #f7f9ff;
}

.sales-order-history .table-order-items.history tbody td,
.customer-account-index .table-order-items.history tbody td{
  border-color: rgba(49,64,205,.10);
}

.sales-order-history .elf-order-status,
.customer-account-index .elf-order-status{
  border-color: rgba(49,64,205,.18);
  background: rgba(49,64,205,.08);
  color: var(--brand);
}

.customer-account-index .box,
.customer-account-index .block,
.customer-address-index .block,
.customer-address-index .box,
.customer-account-edit form,
.customer-address-form form,
.sales-order-view .order-details-items,
.sales-order-view .block,
.wishlist-index-index .products-grid,
.rma-customer-index .table-wrapper,
.rma-customer-view .block,
.productreview-account-view .block,
.kentekencheck-garage-index .card{
  border-color: rgba(49,64,205,.14);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

/* -------------------------------------------------------------------------
   ACCOUNT FORM PAGES (elf-account-form-*, elf-account-access*,
   elf-account-status*) - account/edit (Accountgegevens), newsletter/manage
   and address/edit ("Nieuw adres"/bewerken) all share this markup, carried
   over unchanged from carparts' form/edit.phtml, form/newsletter.phtml and
   address/edit.phtml (avja has no override for any of the three, only
   inherits the templates). The classnames already existed on the rendered
   page, but the CSS for them only ever existed as carparts' OWN LESS
   (web/css/source/account-forms.less, compiled into styles-m/l.css, which
   avja deliberately doesn't load - see memory round 5) - so on avja these
   pages rendered as raw, unstyled generic elements (h1/input/button base
   styles only). Ported here as plain CSS, 1-to-1 faithful to that LESS
   file including its own already-correct mobile breakpoints, just with
   carparts' hardcoded hex colors swapped for avja's design tokens. 2026-08-23.
   ------------------------------------------------------------------- */
.elf-account-form-page{ width: 100%; max-width: var(--container); margin: 0 auto; }
.elf-account-form-hero{
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-6);
  align-items: end; padding: clamp(24px, 3vw, 34px); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #f8fbff 0%, #eef3ff 58%, #fff8e6 100%);
  border: 1px solid var(--line);
}
.elf-account-form-hero__eyebrow{ margin: 0 0 var(--space-2); color: var(--muted); font-size: var(--text-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.elf-account-form-hero__title{ margin: 0; color: var(--ink); font-size: clamp(1.7rem, 2.7vw, 2.35rem); line-height: 1.08; }
.elf-account-form-hero__text, .elf-account-note{ margin: 10px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.elf-account-form-hero__actions{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.elf-account-form-hero__actions .btn{ min-height: 44px; justify-content: center; }

.elf-account-form-card{
  margin-top: var(--space-4); max-width: 1040px; margin-left: auto; margin-right: auto;
  padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: var(--surface);
}
.elf-account-form-card .fieldset{ margin: 0 0 22px; padding: 0; border: 0; max-width: 860px; margin-left: auto; margin-right: auto; }
.elf-account-form-card .fieldset:last-of-type{ margin-bottom: 0; }
.elf-account-form-card .legend{ display: block; margin: 0 0 var(--space-4); padding: 0; color: var(--ink); font-size: 1.05rem; font-weight: 800; line-height: 1.3; }
.elf-account-form-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 18px; }
.elf-account-form-grid__full{ grid-column: 1 / -1; }
.elf-account-form-card .field{ margin: 0; }
.elf-account-form-card .field .label{ display: block; margin: 0 0 6px; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 800; }
.elf-account-form-card .control{ margin: 0; }
.elf-account-form-card .input-text,
.elf-account-form-card select{
  width: 100%; min-height: 46px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); padding: 0 13px; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.elf-account-form-card select{ padding-right: 36px; }
.elf-account-form-card .input-text:focus,
.elf-account-form-card select:focus{ border-color: var(--brand); box-shadow: var(--shadow-focus); outline: none; }
.elf-account-form-card .nested{ display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.elf-account-check-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 18px; margin-top: var(--space-4); }
.elf-account-form-card .field.choice,
.elf-account-form-card .message.info{
  display: flex; align-items: flex-start; gap: 10px; min-height: 46px; padding: var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft);
}
.elf-account-form-card .field.choice .checkbox{ margin-top: 3px; }
.elf-account-form-card .field.choice .label{ margin: 0; font-weight: 700; }
.elf-account-form-card .message.info span{ color: var(--ink-soft); font-size: var(--text-xs); font-weight: 700; }
.elf-account-form-card .actions-toolbar{
  margin-top: var(--space-6); display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); max-width: 860px; margin-left: auto; margin-right: auto;
}
.customer-account-edit .elf-account-form-card,
.customer-address-form .elf-account-form-card,
.newsletter-manage-index .elf-account-form-card{ max-width: var(--container); }
.customer-account-edit .elf-account-form-card .fieldset,
.customer-address-form .elf-account-form-card .fieldset,
.newsletter-manage-index .elf-account-form-card .fieldset,
.customer-account-edit .elf-account-form-card .actions-toolbar,
.customer-address-form .elf-account-form-card .actions-toolbar,
.newsletter-manage-index .elf-account-form-card .actions-toolbar{ max-width: none; }
.elf-account-form-card .actions-toolbar .primary,
.elf-account-form-card .actions-toolbar .secondary{ margin: 0; }
.elf-account-form-card .actions-toolbar .action.save,
.elf-account-form-card .actions-toolbar .primary .action.primary{
  min-height: 46px; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-md);
  background: var(--gradient-brand); color: var(--brand-ink); box-shadow: var(--shadow-brand); display: inline-flex; align-items: center;
}
.elf-account-form-card .actions-toolbar .action.back{ color: var(--brand); font-size: var(--text-xs); font-weight: 700; display: inline-flex; align-items: center; }
.elf-account-form-card .actions-toolbar .action.back:hover{ text-decoration: underline; }
.elf-account-form-card .password-strength-meter{ margin-top: var(--space-2); color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }

.elf-account-status-row{ display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.elf-account-access{ margin-top: var(--space-4); }
.elf-account-access__header{ margin-bottom: var(--space-3); }
.elf-account-access__header strong{ display: block; color: var(--ink); font-size: var(--text-sm); line-height: 1.4; }
.elf-account-access__header p{ margin: 4px 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.55; }
.elf-account-access__grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-3); }
.elf-account-access__toggle{
  display: grid; gap: 4px; width: 100%; padding: 14px var(--space-4); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.elf-account-access__toggle:hover{ border-color: rgba(49,64,205,.35); }
.elf-account-access__toggle.is-active{ border-color: var(--brand); background: var(--brand-50); }
.elf-account-access__title{ font-size: var(--text-sm); font-weight: 800; line-height: 1.4; }
.elf-account-access__text{ color: var(--muted); font-size: var(--text-xs); line-height: 1.55; }
.elf-account-access-inputs{ display: none; }

.elf-account-status{
  display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 4px 10px;
  border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 800;
}
.elf-account-status.is-active{ background: rgba(18,153,90,.1); color: var(--success); }
.elf-account-status.is-idle{ background: var(--surface-soft); color: var(--muted); }

@media (max-width: 900px){
  .elf-account-form-hero, .elf-account-form-grid, .elf-account-check-grid, .elf-account-access__grid{ grid-template-columns: 1fr; }
  .elf-account-form-hero__actions{ justify-content: flex-start; }
}
@media (max-width: 767px){
  .elf-account-form-hero, .elf-account-form-card{ padding: 18px; }
  .elf-account-form-hero__actions, .elf-account-form-card .actions-toolbar{ flex-direction: column; align-items: stretch; }
  .elf-account-form-hero__actions .btn,
  .elf-account-form-card .actions-toolbar .action.save{ width: 100%; }
  .elf-account-status-row{ flex-direction: column; align-items: flex-start; }
}

/* Final listing overrides: hide the native numbered pager (this listing
   uses infinite scroll instead). The sidebar used to be position:sticky
   here, but that made it visually stay level with/overlap the sticky
   header while scrolling instead of disappearing behind it like the
   product grid does - removed per feedback, so it now just scrolls away
   normally (falls back to the position:static rule above). */
@media (min-width: 1024px){
  body.catalog-category-view .sidebar.sidebar-main,
  body.catalog-category-view .sidebar.sidebar-main.elf-filter-drawer,
  body.kentekencheck-index-results .nk-results-sidebar,
  body.kentekencheck-index-results .nk-results-sidebar.elf-filter-drawer{
    z-index: 2 !important;
  }
}
body.catalog-category-view .column.main .toolbar.toolbar-products .pages,
body.kentekencheck-index-results .toolbar.toolbar-products .pages{ display: none !important; }
/* "Show X per page" limiter - infinite scroll loads everything anyway,
   so a page-size picker has no effect and shouldn't be shown either,
   same reasoning as the pager above. */
body.catalog-category-view .column.main .toolbar.toolbar-products .field.limiter,
body.kentekencheck-index-results .toolbar.toolbar-products .field.limiter{ display: none !important; }

/* -------------------------------------------------------------------
   HUB category pages (Elfmedia_CategoryPageType, hub.phtml) - a category
   whose page type resolves to "hub" renders this instead of the normal
   product grid/toolbar/sidebar (removed entirely at the layout level, see
   catalog_category_view_pagetype_hub.xml - not just visually hidden).
   Cards reuse this theme's existing spacing/radius/shadow tokens rather
   than introducing a parallel design system.
   ------------------------------------------------------------------- */
.hub-title{
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800;
  letter-spacing: -0.02em; line-height: var(--lh-tight); color: var(--ink); margin: 0 0 var(--space-3);
}
.hub-intro{ color: var(--ink-soft); font-size: var(--text-sm); max-width: var(--container-narrow); margin-bottom: var(--space-6); }
.hub-intro p{ margin: 0 0 var(--space-2); }
.hub-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
  margin-bottom: var(--space-8);
}
@media (min-width: 640px){ .hub-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px){ .hub-grid{ grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }
.hub-card{
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; min-height: 96px; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.hub-card:hover{ border-color: var(--brand); box-shadow: var(--shadow-sm); }
.hub-card__media{ display: block; aspect-ratio: 1 / 1; background: var(--surface-soft); }
.hub-card__media img{ width: 100%; height: 100%; object-fit: contain; padding: var(--space-3); }
.hub-card__media--empty{ background: linear-gradient(135deg, var(--surface-soft), var(--surface)); }
.hub-card__body{ display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); flex: 1; }
.hub-card__name{ font-weight: 700; font-size: var(--text-md); color: var(--ink); line-height: var(--lh-tight); }
.hub-card__count{ font-size: var(--text-xs); color: var(--muted); }
.hub-card__count--hidden{ display: none; }
.hub-card__count--vehicle{ color: var(--brand); font-weight: 700; }
.hub-card__cta{
  margin-top: auto; padding-top: var(--space-2); display: flex; align-items: center; gap: 4px;
  font-size: var(--text-sm); font-weight: 700; color: var(--brand);
}
.hub-card__cta svg{ width: 16px; height: 16px; flex: none; }
/* Touch targets: the whole card is the link (min-height:96px comfortably
   clears the 44px minimum), so there is no separate small tap target to
   worry about on mobile - see the audit's mobile UX finding about the old
   chips row being easy to miss. 2 columns down to the smallest phones,
   never a horizontal-scroll row. */

/* /categorieen overview page - reuses .hub-grid/.hub-card above for the
   actual category cards (same visual language, already mobile-responsive)
   and only adds the header/jump-nav/section chrome specific to this page. */
.kc-categories-page__header{ margin-bottom: var(--space-6); max-width: var(--container-narrow); }
.kc-categories-page__header h1{
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800;
  letter-spacing: -0.02em; line-height: var(--lh-tight); color: var(--ink); margin: 0 0 var(--space-2);
}
.kc-categories-page__header p{ color: var(--ink-soft); font-size: var(--text-sm); margin: 0; }
.kc-categories-section{ margin-bottom: var(--space-10); scroll-margin-top: var(--space-6); }
.kc-categories-section__head{ margin-bottom: var(--space-4); }
.kc-categories-section__head h2{
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 700;
  letter-spacing: -0.01em; margin: 0;
}
.kc-categories-section__head h2 a{
  display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none;
}
.kc-categories-section__head h2 a:hover{ color: var(--brand); }
.kc-categories-section__arrow{ width: 15px; height: 15px; flex: none; color: var(--muted); }
.kc-categories-section__head h2 a:hover .kc-categories-section__arrow{ color: var(--brand); }
.kc-categories-section__solo{
  display: inline-flex; align-items: center; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); background: var(--surface-soft); color: var(--ink);
  font-weight: 700; text-decoration: none; border: 1px solid var(--line);
}
.kc-categories-section__solo:hover{ border-color: var(--brand); color: var(--brand); }
/* This page's cards: photo left, text right, one row per category - the
   plain .hub-grid/.hub-card (big square photo on top, used on real HUB
   pages) reads as oversized when there are 5-16 of them stacked per
   section here. Scoped under .kc-categories-section so real HUB pages
   (hub.phtml has no such ancestor) keep their own card style untouched. */
.kc-categories-section .hub-grid{
  display: flex; flex-direction: column; gap: var(--space-2);
}
.kc-categories-section .hub-card{
  flex-direction: row; align-items: center; min-height: 0;
}
.kc-categories-section .hub-card__media{
  flex: none; width: 64px; height: 64px; aspect-ratio: 1 / 1; border-radius: var(--radius-md, 8px);
}
.kc-categories-section .hub-card__media img{ padding: var(--space-1); }
.kc-categories-section .hub-card__body{
  flex-direction: row; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-4); gap: var(--space-3); flex: 1; min-width: 0;
}
.kc-categories-section .hub-card__text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kc-categories-section .hub-card__name{ font-size: var(--text-sm); font-weight: 700; }
.kc-categories-section .hub-card__cta{ margin-top: 0; padding-top: 0; flex: none; color: var(--muted); }
.kc-categories-section .hub-card:hover .hub-card__cta{ color: var(--brand); }
@media (min-width: 700px){
  .kc-categories-section .hub-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}
@media (min-width: 1024px){
  .kc-categories-section .hub-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1360px){
  .kc-categories-section .hub-grid{ grid-template-columns: repeat(4, 1fr); }
}

/* Category refinements 2026-09-08: mobile drawer spacing, mobile toolbar, description toggle. */
@media (max-width: 1023px){
  .elf-filter-drawer__content{ padding: var(--space-4); }
  .catalog-category-view #category-header-tools{ display: none !important; }
}

@media (min-width: 1024px){
  .sidebar.sidebar-main.elf-filter-drawer .elf-filter-drawer__content,
  .nk-results-sidebar.elf-filter-drawer .elf-filter-drawer__content{ padding: 0; }
  .sidebar.sidebar-main.elf-filter-drawer .nk-filter-accordion,
  .nk-results-sidebar.elf-filter-drawer .nk-filter-accordion{ border-bottom: 0; }
  /* Filter groups stay permanently open on desktop (elfmedia-filter-drawer.js
     forces item.open=true and blocks the toggle click there) - the chevron
     implied a collapse/expand affordance that no longer exists here, and the
     cursor shouldn't suggest the header itself is clickable either. Mobile/
     tablet (<1024px) keeps the collapsible accordion untouched. */
  .sidebar.sidebar-main.elf-filter-drawer .nk-filter-accordion__summary,
  .nk-results-sidebar.elf-filter-drawer .nk-filter-accordion__summary{ cursor: default; }
  .sidebar.sidebar-main.elf-filter-drawer .nk-filter-accordion__summary .chev,
  .nk-results-sidebar.elf-filter-drawer .nk-filter-accordion__summary .chev{ display: none; }
}

.catalog-category-view .category-description-toggle{
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  max-width: var(--container-narrow);
}
.catalog-category-view .category-description-toggle__content{ overflow: hidden; }
.catalog-category-view .category-description-toggle.is-collapsible:not(.is-expanded) .category-description-toggle__content{
  max-height: 86px;
  position: relative;
}
.catalog-category-view .category-description-toggle.is-collapsible:not(.is-expanded) .category-description-toggle__content:after{
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--bg));
  bottom: 0;
  content: "";
  height: 36px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}
.catalog-category-view .category-description-toggle__button{
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--brand);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 800;
  margin-top: var(--space-2);
  padding: 0;
}
.catalog-category-view .category-description-toggle__button:hover,
.catalog-category-view .category-description-toggle__button:focus{ text-decoration: underline; }
@media (max-width: 560px){
  .catalog-category-view .category-description-toggle{ font-size: 13px; line-height: 1.55; margin-bottom: var(--space-4); }
  .catalog-category-view .category-description-toggle.is-collapsible:not(.is-expanded) .category-description-toggle__content{ max-height: 78px; }
}

/* Mobile filter drawer: keep filter titles vertically centered between dividers. */
@media (max-width: 1023px){
  .elf-filter-drawer .nk-filter-accordion{ padding-bottom: 0; }
  .elf-filter-drawer .nk-filter-accordion__summary{
    align-items: center;
    min-height: 46px;
    padding: 12px 0;
  }
  .elf-filter-drawer .nk-filter-accordion__content{
    margin-top: 0;
    padding-bottom: var(--space-3);
  }
}