/*
 * Component layer — synced from the Claude Design "HolySmartphone Design System"
 * project (css/components.css). Every selector is namespaced with .hs- so it
 * cannot collide with WordPress core, Gutenberg, WooCommerce or plugin CSS.
 * Token-based (see variables.css). Reuse these classes across templates —
 * do not reinvent buttons/chips/cards/badges.
 */

/* ---------- layout ---------- */
.hs-container { max-width: var(--hs-wide-width); margin: 0 auto; padding: 0 var(--hs-gutter); }
.hs-container--narrow { max-width: var(--hs-content-width); }
.hs-section { --hs-section-pad-y: var(--sp-16); padding: var(--hs-section-pad-y) 0; } /* the custom property lets content hang over the band edge (trade-in photo) */

/*
 * Page edges. --sp-16 is the rhythm BETWEEN two sections: it has to separate two
 * bands that touch, so it needs to be generous. At the top and bottom of a page
 * there is no neighbouring band to separate from, only the header above and the
 * footer below, and there the same 64px reads as a hole rather than as rhythm.
 * Both ends therefore step down to --sp-8. One rule, both edges, every template
 * that uses .hs-section (home, flexible pages, verkopen, reparaties) — this is
 * not a homepage-only problem.
 *
 * :first-of-type / :last-of-type, not :first-child / :last-child: the verkopen
 * and reparatie templates print a breadcrumb <div> above their first <section>,
 * which would otherwise steal :first-child. Listing the four wrappers keeps the
 * rule off sections nested inside a section.
 *
 * A section-specific override (e.g. .hs-home-hero) has lower specificity than
 * this, so it keeps shaping the section mid-page and yields at the page edge.
 */
:is(.hs-sections, .hs-verkopen, .hs-reparatie, .site-main) > .hs-section:first-of-type { padding-top: var(--sp-8); }
:is(.hs-sections, .hs-verkopen, .hs-reparatie, .site-main) > .hs-section:last-of-type { padding-bottom: var(--sp-8); }

.hs-section--alt { background: var(--bg-2); }
.hs-section--cream { background: var(--bg-3); }
/* The old site's two signature surfaces. Mint carries the normal dark copy and
 * the teal headings (3,68:1, large text only). Orange carries dark copy only:
 * teal on orange is 1,6:1, so headings there switch to --fg-1 (6,66:1). */
.hs-section--mint { background: var(--hs-mint); }
.hs-section--orange { background: var(--hs-orange); color: var(--fg-1); }
.hs-section--orange :is(h1, h2, h3, .hs-section__title) { color: var(--fg-1); }
/* Focus ring per surface (see --focus-ring in variables.css). Set as a custom
 * property on the surface, so every :focus-visible inside it, and any rule that
 * draws its own ring with var(--focus-ring), follows without a list of elements.
 * Template sheets add their own coloured surfaces the same way. */
.hs-topbar,
.hs-footer,
.hs-nav-drawer__head,
.hs-section--brand { --focus-ring: var(--focus-ring-on-dark); }
.hs-section--orange,
.hs-nav__item--cta { --focus-ring: var(--focus-ring-on-light); }

/* Two bands of the same colour in a row read as one band (the old homepage's
 * refurbished + new rows): drop the seam's doubled padding. */
.hs-section--mint + .hs-section--mint,
.hs-section--alt + .hs-section--alt,
.hs-section--cream + .hs-section--cream { padding-top: 0; }
/* Dark brand band. Sets the light-on-dark text colours once so sections using it
 * (e.g. inruilen & verkopen) don't each re-declare them. */
.hs-section--brand { background: var(--hs-teal-800); color: var(--fg-on-brand); }
.hs-section--brand .hs-section__title { color: var(--fg-on-brand); }
.hs-section--brand a:not(.hs-btn) { color: var(--hs-teal-200); }
.hs-section--brand a:not(.hs-btn):hover { color: var(--fg-on-brand); }

/* ---------- star rating (hs_star_rating(), usable on any template) ---------- */
/* A muted five-star track with an accent overlay clipped to the actual score;
 * the overlay's width is set inline from the data. */
/* gap MUST stay 0: the overlay width is a straight percentage of the whole row,
 * so any gap shifts the clip off the glyph boundaries and a 4.6 renders as a
 * full 5. Phosphor's star has its own padding inside the 256 box, so the glyphs
 * still read as separate stars. */
/* width:max-content so a flex/grid parent can't stretch the row — the overlay is
 * a percentage of this box, and a stretched box would over-fill the score. */
.hs-stars { position: relative; display: inline-flex; width: max-content; line-height: 0; white-space: nowrap; }
.hs-stars__track, .hs-stars__fill { display: inline-flex; gap: 0; }
/* flex: none — the fill layer is narrower than the track (90% for 4.5) and must
 * CLIP its stars, not shrink them; shrunk stars drift off the track below. */
.hs-stars .hs-icon { flex: none; width: 20px; height: 20px; }
.hs-stars__track { color: var(--border-1); }
.hs-stars__fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--hs-amber); }

.hs-section-head { display: flex; justify-content: space-between; align-items: end; gap: var(--sp-6); margin-bottom: var(--sp-6); }
.hs-section-head h2 { margin: 0; }
.hs-section-head .hs-link { color: var(--accent-text); font-weight: var(--fw-bold); font-size: var(--fs-14); white-space: nowrap; }
.hs-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.hs-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* ---------- page header (shared eyebrow + heading) ---------- */
/* One label+heading system reused across the classic templates (page, single,
 * archive, 404) via hs_page_header(). Heroes (home/PDP/repair-model) keep their
 * own components. .hs-page-header__title inherits the base <h1> type scale. */
.hs-page-header { margin: 0 0 var(--sp-8); }
.hs-page-header__title { margin: 0; }
/* --accent-text (not --accent): the eyebrow is 14px, and small text needs
 * ≥4.5:1 on white (WCAG 1.4.3) where #008999 gives only 4.16:1. */
.hs-eyebrow { margin: 0 0 var(--sp-2); font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-14); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-text); }
.hs-page-header__lead { max-width: 60ch; margin: var(--sp-3) 0 0; color: var(--fg-2); font-size: var(--fs-18); line-height: var(--lh-base); }
.hs-page-header--center { text-align: center; }
.hs-page-header--center .hs-page-header__title,
.hs-page-header--center .hs-page-header__lead { margin-inline: auto; }

/* ---------- buttons ---------- */
/* Buttons and the menu use plain letter-spacing, as on the old site; the 0.5px
 * tracking is for running text only. */
.hs-btn, .hs-nav__link, .hs-header__util a, .hs-mega__link, .hs-mega__col-title { letter-spacing: normal; }
.hs-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm); font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-16); border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
.hs-btn:hover { text-decoration: none; }
.hs-btn--primary { background: var(--accent-fill); color: var(--fg-on-brand); box-shadow: var(--shadow-1); }
.hs-btn--primary:hover { background: var(--accent-fill-hover); color: var(--fg-on-brand); box-shadow: var(--shadow-2); }
.hs-btn--primary:active { background: var(--accent-fill-press); }
.hs-btn--amber { background: var(--hs-amber); color: var(--hs-ink); }
.hs-btn--amber:hover { background: var(--hs-amber-700); color: var(--fg-on-brand); }
/* Orange (the old "Naar de reparaties"), dark label — see --cta-2-fg. */
.hs-btn--cta2 { background: var(--cta-2); color: var(--cta-2-fg); box-shadow: var(--shadow-1); }
.hs-btn--cta2:hover { background: var(--cta-2-hover); color: var(--cta-2-fg); box-shadow: var(--shadow-2); }
/* Dark teal (the old "Heb je een vraag?"), white label 8,82:1. */
.hs-btn--dark { background: var(--hs-teal-800); color: var(--fg-on-brand); }
.hs-btn--dark:hover { background: var(--hs-teal-900); color: var(--fg-on-brand); }
.hs-btn--ghost { background: transparent; color: var(--fg-1); border: 1px solid var(--border-1); }
.hs-btn--ghost:hover { background: var(--bg-2); color: var(--fg-1); }
/* The old site's button: 16px all round, a 16px line, 3px corners — 48px tall. */
.hs-btn--lg { padding: var(--sp-4); font-size: var(--fs-16); line-height: 1; border-radius: var(--r-sm); }
.hs-btn--sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-12); border-radius: var(--r-sm); }
.hs-btn--block { width: 100%; }
.hs-btn[disabled], .hs-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.hs-icon-btn { width: 40px; height: 40px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: var(--fg-1); position: relative; }
.hs-icon-btn:hover { background: var(--bg-2); }
.hs-icon-btn .hs-dot { position: absolute; top: 6px; right: 6px; background: var(--hs-amber); color: var(--hs-ink); font-size: 10px; font-weight: var(--fw-black); min-width: 16px; height: 16px; border-radius: var(--r-pill); padding: 0 4px; display: flex; align-items: center; justify-content: center; }

/* ---------- form controls ---------- */
.hs-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.hs-label { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--fg-1); }
.hs-input, .hs-select, .hs-textarea { width: 100%; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--border-1); background: #fff; color: var(--fg-1); font-size: var(--fs-14); transition: border-color var(--dur-fast) var(--ease-standard); }
.hs-input:focus, .hs-select:focus, .hs-textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hs-input::placeholder { color: var(--fg-3); }
.hs-help { font-size: var(--fs-12); color: var(--fg-3); }
.hs-error { font-size: var(--fs-12); color: var(--hs-danger); }

/* ---------- badges & chips ----------
 *
 * De producttype-badge (--eco = Refurbished, --new = Nieuw in doos) rendert via
 * hs_product_type_badge() en verschijnt op drie plekken: de shoparchiefkaart,
 * de homepage-grid en boven de PDP-titel. Eén component, dus één uiterlijk;
 * verander hier en het verandert overal. De kleuren zelf plus de gemeten
 * contrastverhoudingen staan bij de --badge-* tokens in variables.css.
 *
 * Vlakke vulling, geen pastel: dit is het label waarop bezoekers scannen en het
 * moet van de kaart af springen. Alleen kleur draagt de betekenis nooit — het
 * woord "Refurbished"/"Nieuw in doos" staat er altijd bij. Dat laatste is hier
 * geen bijzaak: de twee typebadges halen de AA-tekstnorm níet (2,86:1 / 2,90:1,
 * een vastgelegde keuze van de opdrachtgever — zie variables.css), dus het woord
 * is de enige drager die overal werkt. Nooit inkorten tot een icoon of afkorten.
 *
 * Let op de drie voorgrondtokens: --badge-refurb-fg, --badge-new-fg en
 * --badge-fg. Ze staan alle drie op wit, maar apart — waarom, staat bij de
 * tokens. Vervang ze niet door één token en zeker niet door een letterlijke #fff.
 *
 * `white-space: normal` en niet `nowrap`: sinds "Nieuw" is vervangen door
 * "Nieuw in doos" is de badge 104,5px breed in plaats van 59px, en de mediabox
 * van een archiefkaart is op
 * 320px maar 102px breed (2 kolommen, archive.css). Met nowrap liep de chip daar
 * 14,5px buiten een `overflow: hidden`-box en werd het woord letterlijk
 * afgesneden. Nu krimpt hij naar min-content en wrapt naar twee regels; waar
 * ruimte is (PDP, desktopkaart) blijft het één regel. */
.hs-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-12); line-height: 1.25; font-weight: var(--fw-black); padding: 5px 9px; border-radius: var(--r-sm); background: var(--hs-teal-100); color: var(--hs-teal-800); white-space: normal; text-align: center; max-width: 100%; }
.hs-badge--eco { background: var(--badge-refurb); color: var(--badge-refurb-fg); }
.hs-badge--new { background: var(--badge-new); color: var(--badge-new-fg); }
.hs-badge--sale { background: var(--badge-sale); color: var(--badge-fg); }
.hs-badge--danger { background: var(--hs-danger-bg); color: var(--hs-danger); }

.hs-chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.hs-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 10px 16px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--border-1); font-weight: var(--fw-semibold); font-size: var(--fs-14); cursor: pointer; white-space: nowrap; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); }
.hs-chip:hover, .hs-chip.is-active, .hs-chip[aria-pressed="true"] { background: var(--accent-fill); color: var(--fg-on-brand); border-color: var(--accent-fill); }

/* ---------- trust strip ---------- */
.hs-trust { background: var(--bg-3); border-top: 1px solid var(--hs-amber-100); border-bottom: 1px solid var(--hs-amber-100); }
.hs-trust__inner { display: grid; grid-template-columns: repeat(4, 1fr); padding: 14px 0; }
.hs-trust__item { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); border-right: 1px solid rgba(0,0,0,.06); min-width: 0; }
.hs-trust__item > div { min-width: 0; }
.hs-trust__item:last-child { border-right: 0; }
.hs-trust__icn { width: 36px; height: 36px; border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-1); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.hs-trust__t { font-weight: var(--fw-bold); font-size: var(--fs-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-trust__s { font-size: var(--fs-12); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- cards ---------- */
.hs-card { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--border-1); box-shadow: var(--shadow-1); transition: box-shadow var(--dur-base) var(--ease-standard); }
.hs-card:hover { box-shadow: var(--shadow-2); }
.hs-card__body { padding: var(--sp-5); }

.hs-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.hs-product-card { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--border-1); overflow: hidden; box-shadow: var(--shadow-1); transition: box-shadow var(--dur-base) var(--ease-standard); display: flex; flex-direction: column; }
.hs-product-card:hover { box-shadow: var(--shadow-2); }
/*
 * 4:3, not 1:1. Measured over 60 original product photos the median aspect is
 * 1.33 with a spread of 0.51 to 1.50, and the live site serves them uncropped
 * (woocommerce_thumbnail_cropping = uncropped). A square box therefore letterboxed
 * the majority of the library. The box only sets the reserved space; the image
 * inside uses object-fit: contain, so nothing is ever stretched or cropped.
 */
/* Flat --bg-2, not a gradient. This is the surface a cut-out product photo is
 * dropped on; the old #fafbfc-to-#f0f2f4 wash was two hardcoded hex values doing
 * no visible work behind an image, and it disagreed with .hs-pcard__media and
 * .hs-home-pcard__media, which were already flat --bg-2. */
.hs-product-card__img { aspect-ratio: 4 / 3; background: var(--bg-2); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hs-product-card__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.hs-product-card__badge { position: absolute; top: 10px; left: 10px; }
.hs-product-card__meta { padding: var(--sp-4); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.hs-product-card__name { font-weight: var(--fw-bold); font-size: 15px; line-height: 1.3; }
.hs-product-card__sub { font-size: var(--fs-12); color: var(--fg-3); }
.hs-product-card__prices { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.hs-product-card__price { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 22px; }
.hs-product-card__strike { font-size: 13px; color: var(--fg-3); text-decoration: line-through; }
.hs-rating { display: flex; align-items: center; gap: 4px; font-size: var(--fs-12); color: var(--fg-3); white-space: nowrap; }
.hs-rating .hs-star { color: var(--hs-amber); }

/* ---------- notices ---------- */
.hs-notice { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-14); background: var(--hs-info-bg); color: var(--hs-teal-800); }
.hs-notice--success { background: var(--hs-success-bg); color: var(--hs-green-800); }
.hs-notice--warning { background: var(--hs-warning-bg); color: var(--hs-amber-800); }
.hs-notice--danger { background: var(--hs-danger-bg); color: var(--hs-danger); }

/* ==========================================================================
 * SITE HEADER
 * Two full-bleed bands (colour spans 100vw) each with a centred .hs-container:
 *   1. .hs-topbar  — teal utility strip: product/repair search + USP badges
 *   2. .hs-header  — white bar: logo, primary nav, cart
 * The logo is oversized and shifted up so the wordmark is optically centred in
 * the white bar while the cloud rises into the teal strip (see --hs-logo-*).
 * ======================================================================== */

/* one consistent icon size everywhere (Phosphor 256 canvas); override per context */
.hs-icon { display: block; width: 24px; height: 24px; }

/* ---------- topbar (teal utility strip) ---------- */
/*
 * The old site's USP strip: four items with an icon, spread over the full width,
 * white 16px Lato on teal. One deliberate change: the old #008999 behind white
 * 16px text is 4,17:1, under the 4,5:1 WCAG AA asks for text this size. The strip
 * is therefore --hs-teal-aa (#008392, 4,51:1): the same colour, 4% darker.
 * padding-left clears the logo's cloud, which rises into this strip.
 */
.hs-topbar { background: var(--hs-teal-aa); }
.hs-topbar__inner { display: flex; align-items: center; min-height: var(--hs-topbar-h); padding-left: calc(var(--hs-gutter) + var(--hs-logo-h) * 1.27); padding-right: calc(var(--hs-gutter) + var(--hs-logo-h) * 1.25); }
/* Insets as measured on the old strip at 1900px: first item 85px into the
 * content column (clear of the logo's cloud), last one ending 83px short of it. */

/* Block-scoped name so template CSS can never collide. */
/* From 1200px every USP in one row, centred: equal space around and between
 * them (20-10-2026). Below 1200px they rotate two at a time in the normal size
 * (see "topbar USPs below 1200px" further down) instead of being squeezed into
 * a 13px row — the squeezed row bunched to one side and read as cramped. */
.hs-topbar__usps { flex: 1; display: flex; align-items: center; justify-content: space-evenly; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; color: var(--fg-on-brand); font-size: var(--fs-16); white-space: nowrap; }
.hs-topbar__usp { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hs-topbar__icon { display: inline-flex; flex-shrink: 0; }
.hs-topbar__icon > .hs-icon { width: 18px; height: 18px; }
/* Stars on teal: the empty track is a translucent white, the fill stays amber. */
.hs-topbar__usp .hs-stars .hs-icon { width: 16px; height: 16px; }
.hs-topbar__usp .hs-stars__track { color: color-mix(in srgb, var(--fg-on-brand) 35%, transparent); }

/* search (right, above the cart) */
.hs-search { display: flex; align-items: center; gap: var(--sp-2); flex: 0 1 380px; height: 40px; padding: 0 4px 0 var(--sp-4); background: #fff; border-radius: var(--r-pill); } /* Stays a pill (client, 23-10-2026): the header reveal is drawn for this shape. */
.hs-search:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.hs-search__input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: var(--fs-14); color: var(--fg-1); }
.hs-search__input::placeholder { color: var(--fg-3); }
/* The input's own outline is dropped in favour of a ring on the pill, so the
 * whole control reads as focused instead of a rectangle inside a rounded box.
 * Dropping it without the :focus-within replacement below would leave keyboard
 * users with no visible focus at all (WCAG 2.4.7). */
.hs-search__input:focus { outline: 0; }
.hs-search:focus-within { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent); }
.hs-search__btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--fg-on-brand); cursor: pointer; transition: background var(--dur-base) var(--ease-standard); }
.hs-search__btn:hover { background: var(--accent-hover); }
.hs-search__btn .hs-icon { width: 20px; height: 20px; }

/* ---------- the sticky block: topbar + white bar travel together ----------
 * Nothing changes on scroll: the topbar stays, the logo stays the white-edged
 * one rising into it. (Before 15-10-2026 the topbar scrolled away and the logo
 * swapped to a dark variant; the client wanted one look throughout.) */
.hs-header { position: sticky; top: 0; z-index: 100; background: var(--bg-1); box-shadow: var(--hs-header-shadow); }
/* keep the sticky header below the WP admin bar for logged-in users */
body.admin-bar .hs-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .hs-header { top: 46px; } }
.hs-header__inner { position: relative; display: flex; align-items: center; gap: var(--sp-10); height: var(--hs-header-h); }

/* branding: oversized logo overlapping upward into the topbar */
.hs-branding { flex-shrink: 0; display: inline-flex; align-items: center; margin-left: var(--hs-content-inset); } /* old logo sits 10px into the column */
/* height scoped to beat WooCommerce's .woocommerce-page img { height:auto } (0,1,1) */
.hs-header .hs-logo { height: var(--hs-logo-h); width: auto; transform: translateY(var(--hs-logo-shift, -20px)); }
/* the cloud on its own is for the narrowest phones only (see the bottom of this file) */
.hs-header .hs-logo--icon { display: none; }

/* Primary navigation (inline on desktop; off-canvas drawer in the compact layout).
 *
 * The top-level rows must fill the FULL header height. The mega panel opens at
 * the header's bottom edge (top: 100%), so if the link box were only as tall as
 * its text — the header is 72px, the text ~20px — there would be ~26px of dead
 * space below it. Moving the pointer down towards the panel would cross that
 * gap, drop :hover on the <li>, and snap the panel shut before you reach it.
 * Stretching the row to the header's edge makes the travel continuous. */
.hs-primary-nav { flex: 1; min-width: 0; align-self: stretch; }
.hs-nav { display: flex; gap: var(--hs-nav-gap); margin: 0 0 0 var(--sp-4); padding: 0; list-style: none; height: 100%; } /* old: first item 56px after the logo, 36px between items */
.hs-nav > li { display: flex; align-items: stretch; }
/* top-level links only (scoped to .hs-nav__link so the base style does NOT leak
 * into the mega panel and override .hs-mega__* colours/weights via specificity) */
.hs-nav__link { color: var(--fg-1); font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-16); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
.hs-nav__link:hover { color: var(--accent-hover); } /* 5.96:1 on white (AA); --accent is only 4.17:1 */
/* No active-section marker: the old site has none, and Webshop lighting up on
 * every product page read as a selected tab (11-10-2026). */

/* mega dropdown (desktop). The panel is a child of the top <li> but absolutely
 * positioned against .hs-header (position:sticky → containing block), so it
 * spans the full width while opening only for the hovered/focused item. Keep
 * .hs-nav__item static so the panel resolves to .hs-header, not the item. */
.hs-nav__item { position: static; }
.hs-nav__link { display: inline-flex; align-items: center; }
/* icon tile + sub-line are for the drawer only (see the compact block) */
.hs-nav__icon, .hs-nav__desc { display: none; }
.hs-nav__item--mega > .hs-nav__link::after {
	content: ""; width: 8px; height: 8px; margin-left: 8px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--dur-fast) var(--ease-standard);
}
.hs-mega-toggle { display: none; } /* desktop opens on hover/focus; button is mobile-only */

.hs-mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--bg-1); box-shadow: var(--shadow-3);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), visibility var(--dur-base) var(--ease-standard);
}
.hs-nav__item--mega:hover > .hs-mega,
.hs-nav__item--mega:focus-within > .hs-mega { opacity: 1; visibility: visible; transform: none; }
.hs-nav__item--mega:hover > .hs-nav__link::after,
.hs-nav__item--mega:focus-within > .hs-nav__link::after { transform: translateY(1px) rotate(-135deg); }

/* Touch screens wider than the drawer breakpoint (iPad Pro landscape, touch
 * laptops) have no hover: main.js opens the panel on the first tap instead. */
.hs-nav__item--mega.is-touch-open > .hs-mega { opacity: 1; visibility: visible; transform: none; }

/* The panel never outgrows the screen: a long product list scrolls inside it
 * instead of running off the bottom. It is a card, centred under the bar and as
 * wide as the content column, with rounded bottom corners like every other card
 * on the site (its top edge meets the bar). */
.hs-mega { width: min(var(--hs-wide-width), calc(100% - 2 * var(--hs-gutter))); margin-inline: auto; border-radius: 0 0 var(--r-xl) var(--r-xl); max-height: calc(100vh - 160px); overflow-y: auto; overscroll-behavior: contain; }

/* Levels run left → right: categories | merken | products. One surface, no
 * card inside the card: the categories and merken are plain lists, the open
 * row of each is a soft teal pill, and only the two product groups carry a
 * (very light) fill — the one place colour means something. */
.hs-mega__inner { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: var(--sp-6); padding-block: var(--sp-5) var(--sp-6); }
.hs-mega__cols,
.hs-mega__brands { list-style: none; margin: 0; padding: 0; }
/* Category + merk rows share one shape. These rules are the SINGLE source for
 * their type; the compact drawer below only restyles box model.
 *
 * The open row's colour is --accent-hover, not --accent: #008999 is 4.17:1 on
 * white, --accent-hover 5.96:1 on white and 5.61:1 on --hs-teal-50 (AA). */
.hs-mega__col-title,
.hs-mega__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 12px var(--sp-4); border-radius: var(--r-lg); font-family: var(--font-sans); font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--fg-1); text-decoration: none; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.hs-mega__col-title + .hs-mega__col-title { margin-top: 2px; }
/* The chevron says "this row opens something to its right". */
.hs-mega__col-title[data-hs-pane]::after,
.hs-mega__brand::after { content: ""; flex: none; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
.hs-mega__col-title:hover, .hs-mega__col-title:focus-visible,
.hs-mega__brand:hover, .hs-mega__brand:focus-visible { background: var(--bg-2); color: var(--accent-hover); }
.hs-mega__col-title.is-active,
.hs-mega__brand.is-active { background: var(--hs-teal-50); color: var(--accent-hover); }
.hs-mega__col-title.is-active::after,
.hs-mega__brand.is-active::after { opacity: 1; }

.hs-mega__pane,
.hs-mega__item-pane { display: none; }
.hs-mega__pane.is-active,
.hs-mega__item-pane.is-active { display: block; }
.hs-mega__split { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }

/* Plain link lists in columns, filled row by row. */
.hs-mega__links { list-style: none; margin: 0; padding: var(--sp-1) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px var(--sp-2); }
.hs-mega__link { display: block; padding: 10px var(--sp-3); border-radius: var(--r-lg); font-size: var(--fs-15); font-weight: var(--fw-regular); color: var(--fg-1); line-height: var(--lh-snug); text-decoration: none; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.hs-mega__link:hover, .hs-mega__link:focus-visible { background: var(--bg-2); color: var(--accent-hover); }
.hs-mega__link.is-current { color: var(--accent-hover); font-weight: var(--fw-semibold); }
/* view-all links ("Alles van Apple bekijken"): teal + bold, with an arrow, as
 * the exit. Hover goes a step darker, since --accent-hover is the resting colour. */
.hs-mega__link--all { font-weight: var(--fw-bold); color: var(--accent-hover); }
.hs-mega__link--all::after { content: " →"; }
.hs-mega__link--all:hover, .hs-mega__link--all:focus-visible { color: var(--accent-press); }
.hs-mega__item-pane > .hs-mega__link--all { display: inline-block; align-self: flex-start; margin-top: var(--sp-3); }

/* A merk's products, split: "Nieuw in doos" and "Refurbished", side by side.
 * Each group is tinted with ~6% of its card-badge colour — enough to tell the
 * two apart at a glance, far too little to compete with the names. The heading
 * repeats the colour as a small dot. Inside a group the names run in two
 * columns where there is room (desktop) and one where there is not (smaller
 * laptops): minmax() decides, no breakpoint to maintain. */
.hs-mega__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); align-items: start; }
.hs-mega__group { padding: var(--sp-3) var(--sp-2) var(--sp-2); border-radius: var(--r-xl); background: var(--bg-2); }
/* "Nieuw in doos" on a very light neutral grey, not an orange tint (Janyar,
 * 30-10-2026); its dot keeps the card badge's colour. */
.hs-mega__group--new { background: color-mix(in srgb, var(--fg-1) 5%, var(--bg-1)); }
.hs-mega__group--refurbished { background: color-mix(in srgb, var(--badge-refurb) 6%, var(--bg-1)); }
/* Later on 30-10-2026 (Janyar): both groups plain white with an outline; the
 * coloured dot in the heading is what tells them apart now. Hover on a name
 * moves to the soft panel colour, white no longer stands out. */
.hs-mega__group--new,
.hs-mega__group--refurbished { border: 1px solid var(--border-1); background: var(--bg-1); }
/* The outline in the type's own badge colour (Janyar, 1-11-2026): green for
 * Refurbished, orange for Nieuw in doos, like the dot and the card badges. */
.hs-mega__group--refurbished { border-color: var(--badge-refurb); }
.hs-mega__group--new { border-color: var(--badge-new); }
.hs-mega__group-title { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-1); padding: 0 var(--sp-3); font-family: var(--font-sans); font-size: var(--fs-14); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: normal; text-transform: none; color: var(--fg-1); }
.hs-mega__group-title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--fg-3); }
.hs-mega__group--new .hs-mega__group-title::before { background: var(--badge-new); }
.hs-mega__group--refurbished .hs-mega__group-title::before { background: var(--badge-refurb); }
/* Three columns per group where it fits (16-10-2026, was two at 170px with a
 * lot of air): more devices visible without scrolling, which matters most for
 * Apple. Slightly tighter rows and 14px names keep "iPhone 18 Pro Max" on one
 * line in a ~140px column. */
.hs-mega__group .hs-mega__links { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 0 var(--sp-1); padding: 0; }
.hs-mega__group .hs-mega__link { padding: 7px var(--sp-2); font-size: var(--fs-14); }
/* The drawer's "Nieuw in doos / Refurbished" step; desktop shows both lists. */
.hs-mega__types { display: none; }
.hs-mega__group .hs-mega__link:hover,
.hs-mega__group .hs-mega__link:focus-visible { background: var(--bg-2); }

/* "Nieuw in doos" and "Refurbished" are always the same height, whichever has
 * more devices: both groups sit in one grid row and stretch to the taller one. */
.hs-mega__item-pane .hs-mega__groups { align-items: stretch; }

/* Reparaties (top item with the class mega-simple): a short dropdown card of
 * its categories under its own button — the whole panel would be a lot of
 * furniture for nine links. */
.hs-nav__item--simple { position: relative; }
/* Flat top, rounded bottom — the same shape as the Webshop panel: it hangs from
 * the bar's lower edge (the item stretches the bar's full height, so top: 100% is
 * that edge) instead of floating below it as a separate card. */
.hs-mega--simple { left: calc(var(--sp-3) * -1); right: auto; width: max-content; min-width: 240px; margin: 0; padding: var(--sp-2); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.hs-mega__list { list-style: none; margin: 0; padding: 0; }
.hs-mega__simple-link { display: block; padding: 10px var(--sp-4); border-radius: var(--r-lg); font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--fg-1); text-decoration: none; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.hs-mega__simple-link:hover, .hs-mega__simple-link:focus-visible, .hs-mega__simple-link.is-current { background: var(--bg-2); color: var(--accent-hover); }

/* Drill-down chrome (back + "alles bekijken"): injected by main.js, used by the
 * compact drawer only. */
.hs-drill { display: none; }

/* unconfigured-menu placeholder (hs_primary_menu_fallback) — deliberately loud
 * so a missing/misconfigured menu is obvious rather than masked by demo links */
.hs-nav__item--placeholder > .hs-nav__link { color: var(--hs-amber-800); font-weight: var(--fw-bold); }

/* The orange call-to-action in the bar ("Verkoop je toestel" on the old site).
 * Opt-in per menu item with the CSS class "nav-cta" (see the walker). White text
 * since 20-10-2026, as the client asked. Known trade-off: the dark --cta-2-fg is
 * 6,66:1 on this orange, white is ~2,3:1 (under WCAG AA). A deeper orange for this
 * one button would fix that without going back to dark text. */
.hs-nav > .hs-nav__item--cta { align-items: center; }
.hs-nav__item--cta > .hs-nav__link { padding: var(--sp-2) var(--sp-4); border-radius: var(--r-lg); background: var(--cta-2); color: var(--fg-on-brand); white-space: nowrap; transition: background var(--dur-base) var(--ease-standard); }
/* Never on two lines (16-10-2026: on a ~1100px laptop "Verkoop je / toestel"
 * wrapped into a tall orange block). nowrap holds the label together; the
 * space it needs comes out of the gaps around it on narrower desktops. */
.hs-nav__link { white-space: nowrap; }
@media (max-width: 1280px) {
	.hs-header__inner { gap: var(--sp-5); }
	.hs-nav { --hs-nav-gap: 22px; margin-left: 0; }
	.hs-header__util { margin: 0; }
}
@media (max-width: 1140px) {
	.hs-nav { --hs-nav-gap: 16px; }
	.hs-nav__item--cta > .hs-nav__link { padding: 6px var(--sp-3); font-size: var(--fs-15); }
}
.hs-nav__item--cta > .hs-nav__link:hover,
.hs-nav__item--cta > .hs-nav__link:focus-visible { background: var(--cta-2-hover); color: var(--fg-on-brand); }
.hs-nav__item--cta.current-menu-item > .hs-nav__link,
.hs-nav__item--cta.current-menu-ancestor > .hs-nav__link { color: var(--fg-on-brand); box-shadow: none; background: var(--cta-2-hover); }

/* hamburger toggle, drawer chrome + overlay — hidden until compact mode */
.hs-nav-toggle { display: none; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--fg-1); cursor: pointer; transition: background var(--dur-base) var(--ease-standard); }
.hs-nav-toggle:hover { background: var(--bg-2); }
.hs-nav-toggle .hs-icon { width: 24px; height: 24px; }
.hs-nav-drawer__head { display: none; }
.hs-nav-drawer__search { display: none; } /* compact only, see below */
.hs-nav-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(15, 23, 26, .5); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-standard); }
body.hs-nav-open .hs-nav-overlay { opacity: 1; visibility: visible; }
body.hs-nav-open { overflow: hidden; }

/* actions / cart */
/* Full bar height, so the Klantenservice dropdown can hang from the bar's lower
 * edge like the menu panels do; the children stay vertically centred. */
.hs-header__actions { flex-shrink: 0; align-self: stretch; display: flex; align-items: center; gap: var(--sp-1); }
/* 44px touch target, nudged so the bold basket's optical edge meets the gutter */
.hs-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px; border-radius: var(--r-pill); color: var(--fg-1); transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
.hs-cart:hover { background: var(--bg-2); color: var(--accent-text); }
/* Teal basket with a teal count, like the old bar. The glyph is graphics (3:1
 * suffices, #008999 is 4,17:1); the number is text, so its disc is teal-700. */
/* Dark basket with the count always on its top-left, as on the old site. */
.hs-cart { color: var(--fg-1); }
/* Old site: a 40px basket, the count in a 16px teal dot on its top-left corner,
 * 5px above the basket. White on --accent-fill instead of the old mint on
 * #008999, which is 3,6:1 at 10px. Only at desktop width; the compact header
 * keeps the 24px icon. */
.hs-cart__count { position: absolute; top: 2px; left: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--accent-fill); color: var(--fg-on-brand); font-size: 10px; font-weight: var(--fw-black); line-height: 16px; text-align: center; }
@media (min-width: 1024px) {
	.hs-cart { width: calc(var(--hs-cart-icon) + 4px); height: calc(var(--hs-cart-icon) + 4px); }
	.hs-cart .hs-icon { width: var(--hs-cart-icon); height: var(--hs-cart-icon); }
	.hs-cart__count { top: -3px; left: 2px; }
}

/* Search: the icon slides a field open to its LEFT, over the bar — no extra
 * row under the header. The field's width is set by main.js (--hs-search-w:
 * from the logo, or on phones the gutter, up to the icon), so it never covers
 * the logo on desktop and always fits on a phone. clip-path reveals it from
 * the icon outwards; --dur-base collapses to 0ms under reduced motion. */
.hs-header__search { position: relative; display: flex; align-items: center; }
.hs-search-toggle { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--fg-1); cursor: pointer; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
.hs-search-toggle:hover, .hs-search-toggle[aria-expanded="true"] { background: var(--bg-2); color: var(--accent-text); }
.hs-search-toggle .hs-icon--close,
.hs-search-toggle[aria-expanded="true"] .hs-icon--search { display: none; }
.hs-search-toggle[aria-expanded="true"] .hs-icon--close { display: block; }
.hs-header__search-panel {
	position: absolute; top: 50%; right: calc(100% + var(--sp-2)); z-index: 2;
	width: var(--hs-search-w, 440px); transform: translateY(-50%);
	visibility: hidden; clip-path: inset(0 0 0 100% round var(--r-pill));
	/* hide only after the clip has closed; show at once, so the field can take focus */
	transition: clip-path var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.hs-header__search.is-open .hs-header__search-panel { visibility: visible; clip-path: inset(0 round var(--r-pill)); transition: clip-path var(--dur-base) var(--ease-out), visibility 0s; }
.hs-header__search-panel .hs-search { width: 100%; max-width: none; height: 44px; border: 1px solid var(--border-1); }
.hs-header__search-panel .hs-search:focus-within { border-color: var(--accent); }

/* "Klantenservice" — a text link on the bar that opens a card: each item an
 * icon tile, its label and a grey sub-line (icon + sub-line come from the menu
 * item itself, see hs_header_util_item_title()), closed by today's opening
 * status and the phone number. The drawer variant is hidden here. */
.hs-header__util { align-self: stretch; display: flex; align-items: stretch; gap: var(--sp-4); margin: 0 var(--sp-2); padding: 0; list-style: none; }
.hs-header__util a { display: inline-flex; align-items: center; font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--fg-1); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.hs-header__util a:hover, .hs-header__util a:focus-visible { color: var(--accent-hover); }
.hs-header__util--placeholder a { color: var(--hs-amber-800); }
.hs-header__util--drawer { display: none; }
.hs-header__util > li { position: relative; display: flex; align-items: center; }
.hs-header__util .sub-menu { list-style: none; margin: 0; padding: 0; }
.hs-header__util--inline .menu-item-has-children > a { min-height: 44px; }
.hs-header__util--inline .menu-item-has-children > a::after {
	content: ""; width: 7px; height: 7px; margin-left: 8px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--dur-fast) var(--ease-standard);
}
.hs-header__util--inline .sub-menu {
	position: absolute; top: 100%; right: calc(var(--sp-3) * -1); z-index: 20; width: 320px;
	padding: var(--sp-2); background: var(--bg-1); border-radius: 0 0 var(--r-xl) var(--r-xl); box-shadow: var(--shadow-3);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), visibility var(--dur-base) var(--ease-standard);
}
/* Flat top, rounded bottom, hanging from the bar's lower edge like the menu
 * panels (the item is as tall as the bar), so there is no gap to bridge. */
.hs-header__util--inline li:hover > .sub-menu,
.hs-header__util--inline li:focus-within > .sub-menu,
.hs-header__util--inline li.is-touch-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.hs-header__util--inline li.is-touch-open > a::after { transform: translateY(1px) rotate(-135deg); }
.hs-header__util--inline li:hover > a::after,
.hs-header__util--inline li:focus-within > a::after { transform: translateY(1px) rotate(-135deg); }
.hs-header__util--inline .sub-menu a { display: flex; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg); font-weight: var(--fw-regular); }
.hs-header__util--inline .sub-menu a:hover,
.hs-header__util--inline .sub-menu a:focus-visible { background: var(--bg-2); color: var(--fg-1); }
/* plain black glyphs (teal on hover), no tile, and no sub-line on desktop: tiles plus descriptions
 * made a nine-word dropdown read busy (15-10-2026) */
.hs-util__icon { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: var(--fg-1); transition: color var(--dur-fast) var(--ease-standard); }
.hs-util__icon .hs-icon { width: 20px; height: 20px; }
.sub-menu a:hover .hs-util__icon,
.sub-menu a:focus-visible .hs-util__icon { color: var(--accent-hover); }
.hs-util__text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hs-util__label { font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.hs-util__desc { display: none; } /* the Beschrijving stays in the menu data, unused for now */
/* Opening status + phone, closing the Klantenservice list (20-10-2026). No card
 * any more — the grey box inside the grey tray read as a lump. A hairline
 * separates it from the links; the status is plain text on the left, the phone
 * number a small teal pill on the right, because it is the one thing in this row
 * you tap. */
.hs-util__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-1); border-top: 1px solid var(--border-2); font-size: var(--fs-14); }
.hs-util__status { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--fg-2); }
.hs-util__status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--fg-3); }
.hs-util__status.is-open::before { background: var(--hs-green); }
.hs-header__util .hs-util__phone { gap: 6px; font-size: var(--fs-14); white-space: nowrap; color: var(--accent-hover); }
.hs-util__phone .hs-icon { width: 16px; height: 16px; }
/* A thin strip (20-10-2026): the link inside it must not inherit the 52px row
 * height of the dropdown/drawer links around it. */
.hs-header__util .hs-util__foot a.hs-util__phone { min-height: 0; padding: 6px var(--sp-3); border-radius: var(--r-pill); background: var(--hs-teal-50); font-weight: var(--fw-bold); line-height: 1.3; color: var(--accent-hover); }
.hs-header__util .hs-util__foot a.hs-util__phone:hover,
.hs-header__util .hs-util__foot a.hs-util__phone:focus-visible { background: var(--hs-teal-100); color: var(--accent-press); }

/* ---------- footer ---------- */
.hs-footer { background: var(--hs-footer-bg); color: var(--hs-footer-fg); padding: calc(var(--sp-20) - (var(--hs-footer-logo-h, 44px) - 44px)) 0 var(--sp-8); margin-top: var(--sp-16); }
/*
 * The margin above is a fallback for templates whose content ends in a bare text
 * column (page, single, blog index, 404): those have no band of their own and
 * would otherwise butt straight against the dark footer.
 *
 * A section-built page does not need it. Its last band already carries its own
 * bottom padding, and stacking the footer margin on top of that produced a white
 * strip between a tinted band and the dark footer — the gap under "Kom langs in
 * de winkel". Same fix as the page-edge rule near the top of this file, applied
 * at the other end of the document.
 *
 * `~`, not `+`. The footer is not reliably the next element after </main>: on the
 * model-level /reparaties/…/ pages the RepairPlugin prints its
 * <div class="pdf-offer-modal rpv2"> between the two, and with `+` the rule
 * silently stopped matching there — measured margin-top 64px on
 * /reparaties/e-reader/kobo/glo/ versus 0px on /reparaties/, i.e. the white strip
 * came back under the cream trade-in band on ~255 model pages. There is exactly
 * one .hs-footer per document, so the general sibling combinator is a strict
 * superset of the intended match and cannot over-apply.
 *
 * Browsers without :has() (pre-Firefox 121 / pre-Chrome 105 / pre-Safari 15.4)
 * drop this rule and keep the --sp-16 fallback above: a slightly loose gap, never
 * a broken layout.
 */
.site-main:has(> .hs-sections, > .hs-verkopen, > .hs-reparatie) ~ .hs-footer { margin-top: 0; }
.hs-footer__inner { max-width: var(--hs-wide-width); margin: 0 auto; padding: 0 var(--hs-gutter); }
.hs-footer a { color: var(--hs-footer-fg); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
.hs-footer a:hover { color: var(--fg-on-brand); }

.hs-footer a:focus-visible { outline: 2px solid var(--focus-ring-on-dark); outline-offset: 3px; border-radius: var(--r-sm); }

/* ---- 1. The logo ----
 * The contact tiles that stood beside it were removed on 22-10-2026; contact now
 * sits under Account (below). */
.hs-footer__top { padding-bottom: var(--sp-8); border-bottom: 1px solid var(--hs-footer-line); }
.hs-footer__brand { display: inline-flex; }
/* Bigger logo (22-10-2026), same footer height: every pixel the logo grows over
 * the old 44px comes off the footer's top padding (see .hs-footer and the
 * max-width: 1023px block), so the footer does not get taller. */
.hs-footer { --hs-footer-logo-h: 64px; }
.hs-footer .hs-footer__brand img { display: block; width: auto; height: var(--hs-footer-logo-h); }

/* Contact, under the Account links: address (route), phone, e-mail, each a
 * plain link led by a small white icon. */
.hs-footer__contact-block { margin-top: var(--sp-8); }
.hs-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-15); line-height: 1.4; }
.hs-footer__contact li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.hs-footer__contact .hs-icon { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--fg-on-brand); }
.hs-footer__contact a { overflow-wrap: anywhere; }
.hs-footer__contact a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---- 2. Hours and link lists ----
 * Opening hours | Account | Handige links (two columns) | the mascot, standing
 * on the bottom rule. Headings in sentence case: the old uppercase titles
 * shouted over 30 quiet links. */
.hs-footer__cols { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(150px, .7fr) minmax(0, 1.9fr) auto; gap: var(--sp-8) var(--sp-10); align-items: start; padding-top: var(--sp-10); }
.hs-footer:not(.hs-footer--mascot) .hs-footer__cols { grid-template-columns: minmax(220px, 1fr) minmax(150px, .7fr) minmax(0, 2fr); }
.hs-footer__col { min-width: 0; }
.hs-footer__col-title { margin: 0 0 var(--sp-4); font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: normal; text-transform: none; color: var(--fg-on-brand); }
.hs-footer__links { list-style: none; margin: 0; padding: 0; font-size: var(--fs-15); line-height: 1.4; }
.hs-footer__links li { break-inside: avoid; }
.hs-footer__links a { display: inline-block; padding: 5px 0; }
.hs-footer__links a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* Sixteen links read faster in two short columns than in one long one; the
 * order runs down the first column, then the second. */
.hs-footer__col--links .hs-footer__links { columns: 2; column-gap: var(--sp-8); }

/* Opening hours: no clock on every row any more (one per line was noise); today
 * is a soft highlighted row, and aria-current says the same to a screen reader. */
.hs-footer__week { display: grid; gap: 2px; margin: 0; font-size: var(--fs-15); line-height: 1.4; font-variant-numeric: tabular-nums; }
.hs-footer__week-row { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: var(--sp-4); margin: 0 calc(var(--sp-3) * -1); padding: 5px var(--sp-3); border-radius: var(--r-lg); }
.hs-footer__week dt { color: var(--hs-footer-muted); }
.hs-footer__week dd { margin: 0; color: var(--hs-footer-fg); }
.hs-footer__week-row.is-today { background: color-mix(in srgb, var(--fg-on-brand) 10%, transparent); }
.hs-footer__week-row.is-today :is(dt, dd) { color: var(--fg-on-brand); font-weight: var(--fw-bold); }

/* Optional cut-out photo (the old mascot), in its own column on the right with
 * its feet on the bottom rule: the negative margin equals .hs-footer__bottom's
 * margin-top. Decorative (alt=""), so it steps out where there is no room.
 * Scoped under .hs-footer to beat WooCommerce's `.woocommerce-page img
 * { height:auto }`. */
.hs-footer .hs-footer__mascot { grid-column: 4; grid-row: 1; align-self: end; display: block; width: auto; max-width: none; height: var(--hs-footer-mascot-h); margin-bottom: calc(var(--sp-10) * -1); object-fit: contain; object-position: center bottom; }
.hs-footer__cols:has(.hs-footer__col--newsletter) .hs-footer__mascot { grid-row: 1 / span 2; }
.hs-footer__col--newsletter { grid-column: 1 / 4; max-width: 640px; }

.hs-footer__news-text { margin: 0 0 var(--sp-4); color: var(--hs-footer-fg); line-height: var(--lh-copy); }
.hs-footer__news-form { --focus-ring: var(--focus-ring-on-light); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--bg-1); color: var(--fg-1); }
/* The form is a white panel inside the dark footer: links in it must not inherit
 * the footer's mint-on-teal colour (1.13:1 on white). */
.hs-footer .hs-footer__news-form a { color: var(--accent-text); text-decoration: underline; }
.hs-footer .hs-footer__news-form a:hover { color: var(--accent-press); }

/* ---- 3. Bottom bar: trust marks left, legal right ---- */
.hs-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5) var(--sp-8); flex-wrap: wrap; border-top: 1px solid var(--hs-footer-line); margin-top: var(--sp-10); padding-top: var(--sp-6); }
.hs-footer__trust { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
/* Payment logos (hs_render_payment_strip(), template-tags.php): under the
 * add-to-cart button and here. One per gallery item; every logo file is the same
 * 88px-tall frame with the mark centred in it, so one height keeps the designed
 * proportions. Own width, wrapping on a narrow column (30-10-2026). */
.hs-pay { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
/* Every logo on a white tile of the same 64 x 40 with a hairline edge, on the
 * product page and in the footer alike (Janyar, 30-10-2026) — on the dark footer
 * the tile is also what keeps navy VISA or the KBC mark visible. The logo files
 * carry empty space above and below the mark (the shared 88px frame), so the
 * image is drawn taller than the tile and the tile clips that empty band: the
 * marks come out at a similar size. object-fit keeps a wide one (iDEAL | Wero)
 * in proportion once max-width stops it. */
.hs-pay li { display: flex; align-items: center; justify-content: center; width: 64px; height: 40px; padding: 0 var(--sp-1); overflow: hidden; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--bg-1); }
/* Two classes: WooCommerce's `.woocommerce img { height: auto }` (0,1,1) beat a
 * lone .hs-pay__logo on shop pages and blew the logos up to 900px. */
.hs-pay .hs-pay__logo { display: block; width: auto; height: 48px; max-width: 100%; object-fit: contain; }
/* Smaller on phones (1-11-2026, Janyar): 48 × 30 where the row has room,
 * narrower where it has not, so all seven stay on one row (44 × 30 at 375px). */
@media (max-width: 560px) {
	.hs-pay { flex-wrap: nowrap; gap: var(--sp-1); }
	.hs-pay li { flex: 1 1 0; min-width: 0; max-width: 48px; width: auto; height: 30px; padding: 0 2px; }
	.hs-pay .hs-pay__logo { height: 37px; }
}
.hs-footer .hs-footer__keur { height: 40px; width: auto; }
.hs-footer__meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); font-size: var(--fs-14); color: var(--hs-footer-muted); }
.hs-footer__legal { margin: 0; color: var(--hs-footer-muted); }
.hs-footer__legal-links { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--sp-5); padding: 0; margin: 0; }
.hs-footer__legal-links a,
.hs-footer__legal-links .hs-footer__consent { display: inline-block; padding: 4px 0; color: var(--hs-footer-fg); }
.hs-footer__legal-links a:hover,
.hs-footer__legal-links .hs-footer__consent:hover { color: var(--fg-on-brand); text-decoration: underline; text-underline-offset: 4px; }

/* ---- Footer, narrower screens ----
 * 1200px: the mascot gets smaller. 1023px: it steps out (decorative), the logo
 * sits above the tiles, hours and Account side by side with the links below.
 * 600px: everything in one column; link rows get 44px targets. */
@media (max-width: 1199px) {
	.hs-footer .hs-footer__mascot { height: 220px; }
	.hs-footer__cols { column-gap: var(--sp-8); }
}
@media (max-width: 1023px) {
	.hs-footer { --hs-footer-logo-h: 56px; padding-top: calc(var(--sp-12) - (var(--hs-footer-logo-h) - 44px)); }
	.hs-footer .hs-footer__mascot { display: none; }
	.hs-footer__cols,
	.hs-footer:not(.hs-footer--mascot) .hs-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hs-footer__col--links,
	.hs-footer__col--newsletter { grid-column: 1 / -1; }
	.hs-footer__bottom { flex-direction: column; align-items: flex-start; }
	.hs-footer__meta { align-items: flex-start; }
}
@media (max-width: 600px) {
	.hs-footer__cols,
	.hs-footer:not(.hs-footer--mascot) .hs-footer__cols { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-8); }
	.hs-footer__col--links .hs-footer__links { columns: 1; }
	.hs-footer__links a { display: flex; align-items: center; min-height: 44px; padding: 0; }
	.hs-footer__contact li { min-height: 44px; align-items: center; }
	.hs-footer__contact .hs-icon { margin-top: 0; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
	.hs-product-grid { grid-template-columns: repeat(3, 1fr); }
}
/* --- desktop: topbar USPs degrade gracefully, dropping the last one first --- */
@media (max-width: 1360px) { .hs-topbar__usps { font-size: var(--fs-14); } }

/* --- header in three steps (20-10-2026) ---
 *   ≥ 1024px        the desktop bar.
 *   900 – 1023px    the tablet bar: the same three buttons (Webshop, Reparaties,
 *                   Verkoop je toestel) and Klantenservice stay in the bar, just
 *                   smaller. No hamburger — the client wants the buttons in the bar
 *                   for as long as they fit.
 *   ≤ 899px         only when they no longer fit: the hamburger and its drawer.
 * 899 is measured, not a device size: logo 56px + three buttons + search,
 * Klantenservice and cart need 865px, plus 15px for a laptop's scrollbar
 * (Chrome, 20-10-2026). If the menu gets another item, measure again. main.js
 * reads the same query (hsCompact), so keep the two in step. Touch has no hover,
 * so on a touch screen with the full bar main.js opens the panels and the
 * Klantenservice dropdown on the first tap.
 *
 * Tablet bar: a smaller bar and logo, tighter gaps. */
@media (max-width: 1023px) {
	:root { --hs-topbar-h: 36px; --hs-header-h: 64px; --hs-logo-h: 56px; } /* phones step down at 560px */

	/* The old site's heavy drop shadow (0 5px 10px at 50% black) is a desktop
	 * parity choice; on a phone it is a dark smear under a 100px bar. */
	.hs-header { box-shadow: var(--shadow-2); }

	.hs-branding { margin-left: 0; }
	.hs-header__inner { gap: var(--sp-4); }
	.hs-nav { --hs-nav-gap: 14px; margin-left: 0; }
	.hs-nav__item--cta > .hs-nav__link { padding: 6px var(--sp-3); font-size: var(--fs-15); }
	.hs-header__util { margin: 0; }
}

/* Hamburger (≤ 899px): the nav moves into the drawer, the bar keeps logo,
 * search, cart and the menu button. */
@media (max-width: 899px) {
	/* branding fills the space between the edge and the icons, logo left */
	.hs-branding { flex: 1 1 0; min-width: 0; justify-content: flex-start; margin-left: 0; }

	/* logo left, then search + cart + hamburger grouped top-right (hamburger outermost) */
	.hs-header__inner { gap: var(--sp-2); }
	.hs-header__actions { order: 1; gap: 0; }
	.hs-nav-toggle { display: inline-flex; order: 2; margin-right: -8px; }
	.hs-cart { margin-right: 0; }

	/* Klantenservice lives at the foot of the drawer here */
	.hs-header__util--inline { display: none; }

	/* ---------- the drawer: one white sheet, one row language ----------
	 * Every row is the same shape: a 40–44px icon tile, a label, a chevron when
	 * it opens a level. The tiles carry the same colour code as the search
	 * results (orange basket = webshop, teal wrench = repairs), so the menu and
	 * the search say the same thing the same way. No hairlines between rows:
	 * spacing and the hover fill separate them. */
	.hs-primary-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000; width: min(380px, 90vw); display: flex; flex-direction: column; background: var(--bg-1); border-radius: var(--r-xl) 0 0 var(--r-xl); box-shadow: var(--shadow-3); transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out); overflow-y: auto; overscroll-behavior: contain; }
	.hs-primary-nav.is-open { transform: none; }

	.hs-nav-drawer__head { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 var(--sp-3) 0 var(--sp-5); }
	.hs-nav-drawer__title { font-family: var(--font-display); font-size: var(--fs-20); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); color: var(--fg-1); }
	.hs-nav-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-pill); background: var(--bg-2); color: var(--fg-1); cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); }
	.hs-nav-close:hover, .hs-nav-close:focus-visible { background: var(--hs-teal-50); color: var(--accent-hover); }
	.hs-nav-close .hs-icon { width: 20px; height: 20px; }

	/* the bar's search icon is under the open drawer, so the field sits at its top */
	.hs-nav-drawer__search { display: block; padding: 0 var(--sp-4) var(--sp-3); }
	.hs-nav-drawer__search .hs-search { max-width: none; height: 48px; background: var(--bg-2); }

	/* main sections */
	.hs-nav { flex-direction: column; gap: 2px; margin: 0; padding: var(--sp-1) var(--sp-2); height: auto; }
	.hs-nav__item { display: flex; align-items: stretch; border-radius: var(--r-lg); transition: background var(--dur-fast) var(--ease-standard); }
	.hs-nav > .hs-nav__item:not(.hs-nav__item--cta):hover,
	.hs-nav__item--mega.is-open { background: var(--bg-2); }
	.hs-nav__link { flex: 1; display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--fg-1); }
	.hs-nav__link:hover, .hs-nav__link:focus-visible { color: var(--fg-1); }
	/* plain glyphs, no tile; the glyph keeps the colour code (teal repairs, orange-brown webshop) */
	.hs-nav__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: var(--accent-hover); }
	.hs-nav__icon:has(.hs-icon--basket) { color: var(--hs-amber-800); }
	.hs-nav__icon .hs-icon { width: 24px; height: 24px; }
	.hs-nav__text { display: flex; flex-direction: column; min-width: 0; }
	.hs-nav__label { font-family: var(--font-display); font-size: var(--fs-18); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
	.hs-nav__desc { display: block; font-size: var(--fs-14); font-weight: var(--fw-regular); line-height: var(--lh-snug); color: var(--fg-3); }
	/* the section you are in: teal label, no side bar */
	.hs-nav .current-menu-item > .hs-nav__link .hs-nav__label,
	.hs-nav .current-menu-ancestor > .hs-nav__link .hs-nav__label { color: var(--accent-hover); }

	/* One chevron for every row that goes somewhere. */
	.hs-nav__item:not(.hs-nav__item--mega):not(.hs-nav__item--cta) > .hs-nav__link::after,
	.hs-header__util--drawer .sub-menu a::after,
	.hs-mega__col-title[data-hs-pane]::after,
	.hs-mega__brand::after {
		content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; opacity: 1;
		border-top: 2px solid var(--fg-3); border-right: 2px solid var(--fg-3);
		transform: rotate(45deg);
	}

	/* mega items: the WHOLE row opens the next level (main.js); the chevron sits in its button */
	.hs-nav__item--mega > .hs-nav__link::after { display: none; }
	.hs-nav__item--mega > .hs-nav__link { cursor: pointer; }
	.hs-mega-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; border: 0; border-radius: var(--r-lg); background: transparent; color: var(--fg-3); cursor: pointer; }
	.hs-mega-toggle__chevron { width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }

	/* the orange action, straight under the sections */
	.hs-nav > .hs-nav__item--cta { padding: var(--sp-2) var(--sp-1) var(--sp-3); }
	.hs-nav .hs-nav__item--cta > .hs-nav__link { justify-content: center; min-height: 52px; padding: 0 var(--sp-4); border-radius: var(--r-lg); font-size: var(--fs-16); font-weight: var(--fw-bold); }
	.hs-nav .hs-nav__item--cta > .hs-nav__link .hs-nav__label { font-family: var(--font-sans); font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--fg-on-brand); }
	.hs-nav .hs-nav__item--cta > .hs-nav__link::after { display: none; }

	/* Klantenservice: a tray at the foot (margin-top: auto in the drawer's column) */
	.hs-header__util--drawer { display: block; margin: auto 0 0; padding: var(--sp-4) var(--sp-2) var(--sp-3); background: var(--bg-2); }
	/* The desktop rule makes the item a flex row (to stretch it to the bar's height);
	 * in the drawer the heading and its links stack. */
	.hs-header__util--drawer > li { display: block; }
	/* The "Klantenservice" heading is a title, not a link (20-10-2026): no pointer
	 * target, no hover. Its links below stay tappable. */
	.hs-header__util--drawer > li > a { display: block; padding: 0 var(--sp-3) var(--sp-2); font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--fg-1); pointer-events: none; cursor: default; }
	/* A heading for the tray, not a row: no chevron. Instead a short, faint rule
	 * under it (20-10-2026) — "the links start here", not a full-width divider. */
	.hs-header__util--drawer > li > a::after { content: ""; display: block; width: 28px; height: 2px; margin-top: var(--sp-2); border-radius: 1px; background: var(--border-1); }
	.hs-header__util--drawer .sub-menu { display: flex; flex-direction: column; gap: 2px; }
	.hs-header__util--drawer .sub-menu a { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-lg); font-size: var(--fs-16); font-weight: var(--fw-medium); color: var(--fg-1); }
	.hs-header__util--drawer .sub-menu a:hover, .hs-header__util--drawer .sub-menu a:focus-visible { background: var(--bg-1); color: var(--fg-1); }
	.hs-header__util--drawer .hs-util__foot { margin: var(--sp-2) var(--sp-3) 0; padding: var(--sp-3) 0 0; border-top-color: var(--border-1); }
	.hs-header__util--drawer .hs-util__phone::after { display: none; }
	/* With JS (main.js adds .is-collapsible): Klantenservice is a bar pinned to
	 * the foot of the drawer, and a tap slides the whole block up over the menu
	 * as a sheet, the bar on top and its links under it (1-11-2026, Janyar).
	 * Without JS the tray above stays as it is.
	 * The list sits in place at the bar's height; the item is anchored to the
	 * bottom and grows upward (grid rows 0fr → 1fr), so the drawer gets no extra
	 * scroll area. */
	.hs-header__util--drawer.is-collapsible { position: sticky; bottom: 0; z-index: 2; height: 57px; padding: 0; background: var(--bg-1); }
	.hs-header__util--drawer.is-collapsible > li { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-rows: auto 0fr; align-items: stretch; border-top: 1px solid var(--border-2); border-radius: 0; background: var(--bg-1); transition: grid-template-rows var(--dur-base) var(--ease-out), border-radius var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
	.hs-header__util--drawer.is-expanded > li { grid-template-rows: auto 1fr; border-top-color: transparent; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--bg-2); box-shadow: 0 -8px 24px rgba(16, 42, 46, .1); }
	.hs-header__util--drawer.is-collapsible > li > a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 var(--sp-5); pointer-events: auto; cursor: pointer; }
	.hs-header__util--drawer.is-collapsible > li > a::after { width: 8px; height: 8px; margin: 0; border-top: 2px solid var(--fg-3); border-right: 2px solid var(--fg-3); border-radius: 0; background: none; transform: rotate(-45deg); transition: transform var(--dur-base) var(--ease-out); }
	.hs-header__util--drawer.is-expanded > li > a::after { transform: rotate(135deg); }
	.hs-header__util--drawer.is-collapsible .sub-menu { min-height: 0; overflow: hidden; padding: 0 var(--sp-2); visibility: hidden; transition: visibility 0s linear var(--dur-base); }
	.hs-header__util--drawer.is-collapsible .sub-menu > :last-child { margin-bottom: var(--sp-3); }
	.hs-header__util--drawer.is-expanded .sub-menu { visibility: visible; transition: visibility 0s; }
	@media (prefers-reduced-motion: reduce) {
		.hs-header__util--drawer.is-collapsible > li, .hs-header__util--drawer.is-collapsible .sub-menu { transition: none; }
	}

	/* ---------- drill-down levels ----------
	 * One level per screen — how phone shops do it (and the only way three levels
	 * stay readable at 375px): Menu › Webshop › Smartphones › Apple. Each level
	 * slides over the drawer below its head; "Terug" steps back. Levels are
	 * absolutely positioned inside the drawer (a fixed element, so their
	 * containing block) and grow with their content; the drawer scrolls. */
	.hs-mega,
	.hs-mega__pane,
	.hs-mega__pane.is-active,
	.hs-mega__item-pane,
	.hs-mega__item-pane.is-active { display: none; position: absolute; left: 0; right: 0; z-index: 2; min-height: 100%; background: var(--bg-1); max-height: none; overflow: visible; box-shadow: none; border: 0; opacity: 1; visibility: visible; transform: none; }
	.hs-mega { top: 64px; min-height: calc(100% - 64px); } /* below the drawer head, so ✕ stays */
	.hs-mega__pane,
	.hs-mega__item-pane { top: 0; }
	.hs-nav__item--mega.is-open > .hs-mega,
	.hs-mega__pane.is-drilled,
	.hs-mega__item-pane.is-drilled { display: block; animation: hs-drill-in var(--dur-base) var(--ease-out); }
	.hs-container.hs-mega__inner { display: block; max-width: none; padding: 0 0 var(--sp-6); }
	.hs-mega__panes,
	.hs-mega__split { display: block; }

	/* level head: back, the level's name, its own page — stuck to the top while the list scrolls */
	.hs-drill { position: sticky; top: 0; z-index: 1; display: block; padding: var(--sp-1) var(--sp-4) var(--sp-3); background: var(--bg-1); }
	.hs-drill__back { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-4) 0 var(--sp-3); border: 0; border-radius: var(--r-pill); background: var(--bg-2); font: inherit; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--fg-1); cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); }
	.hs-drill__back::before { content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
	.hs-drill__back:hover, .hs-drill__back:focus-visible { background: var(--hs-teal-50); color: var(--accent-hover); }
	.hs-drill__title { margin: var(--sp-3) 0 0; font-family: var(--font-display); font-size: var(--fs-24); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--fg-1); }
	.hs-drill__all { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--accent-hover); text-decoration: none; }
	.hs-drill__all::after { content: " →"; white-space: pre; }

	/* level rows: the same shape as the main rows, without the tile */
	.hs-mega__cols,
	.hs-mega__brands { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--sp-2); border-radius: 0; background: transparent; }
	.hs-mega__col-title,
	.hs-mega__col-title.is-active,
	.hs-mega__brand,
	.hs-mega__brand.is-active { display: flex; align-items: center; min-height: 52px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg); background: transparent; box-shadow: none; font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--fg-1); }
	.hs-mega__col-title:hover, .hs-mega__col-title:focus-visible,
	.hs-mega__brand:hover, .hs-mega__brand:focus-visible { background: var(--bg-2); color: var(--fg-1); }
	.hs-mega__links { display: block; padding: 0 var(--sp-2); }
	/* merken-only panes (/reparaties/): short names, so two per row halves the scroll */
	.hs-mega__pane > .hs-mega__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--sp-1); }
	.hs-mega__link { display: flex; align-items: center; min-height: 48px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg); }
	.hs-mega__link:hover, .hs-mega__link:focus-visible { background: var(--bg-2); color: var(--fg-1); }
	/* the drill head already carries "alles bekijken" at the top */
	.hs-mega__item-pane > .hs-mega__link--all { display: none; }
	/* product groups stacked, each still on its light tint, names one per row */
	.hs-mega__groups { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); padding: 0 var(--sp-2); }
	.hs-mega__group { padding: var(--sp-3) var(--sp-1) var(--sp-1); }
	.hs-mega__group .hs-mega__links { display: block; padding: 0; }
	/* Reparaties: its categories as plain rows, nothing deeper. The item must stay
	 * static here, or the level would be positioned inside the row, not the drawer. */
	.hs-nav__item--simple { position: static; }
	.hs-mega--simple { width: auto; min-width: 0; margin: 0; padding: 0; border-radius: 0; }
	.hs-mega__list { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--sp-2) var(--sp-6); }
	.hs-mega__simple-link { display: flex; align-items: center; min-height: 52px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-16); }
	/* the panel card's desktop shape does not apply to a drawer level */
	.hs-mega { width: auto; margin: 0; border-radius: 0; }

	/* ---------- rows that look like buttons (16-10-2026) ----------
	 * The client read the drawer as a list, not as things to tap. Every row that
	 * goes somewhere is now a filled tile with its arrow in a white circle on the
	 * right — the same shape at every level, so "tile = tap" is learned once. */
	.hs-nav { gap: 6px; }
	.hs-nav > .hs-nav__item:not(.hs-nav__item--cta),
	.hs-mega__cols > li > .hs-mega__col-title,
	.hs-mega__brands > li > .hs-mega__brand,
	.hs-mega__type,
	.hs-mega__simple-link,
	.hs-mega__links .hs-mega__link { background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r-lg); }
	.hs-mega__cols,
	.hs-mega__brands,
	.hs-mega__list,
	.hs-mega__types { gap: 6px; }
	.hs-mega__links > li + li { margin-top: 6px; }
	.hs-mega__pane > .hs-mega__links > li + li { margin-top: 0; } /* the two-up repair grid has its own gap */
	.hs-mega__pane > .hs-mega__links { gap: 6px; }
	.hs-nav > .hs-nav__item:not(.hs-nav__item--cta):hover,
	.hs-nav__item--mega.is-open,
	.hs-mega__col-title:hover, .hs-mega__col-title:focus-visible,
	.hs-mega__brand:hover, .hs-mega__brand:focus-visible,
	.hs-mega__simple-link:hover, .hs-mega__simple-link:focus-visible,
	a.hs-mega__type:hover, a.hs-mega__type:focus-visible,
	.hs-mega__links .hs-mega__link:hover, .hs-mega__links .hs-mega__link:focus-visible { background: var(--hs-teal-50); border-color: var(--hs-teal-200); color: var(--fg-1); }

	/* One arrow for all of them: a chevron in a white circle. Replaces the bare
	 * 8px chevron, which is what made the rows read as a list. */
	.hs-nav__item:not(.hs-nav__item--mega):not(.hs-nav__item--cta) > .hs-nav__link::after,
	.hs-mega__col-title[data-hs-pane]::after,
	.hs-mega__brand::after,
	a.hs-mega__type::after,
	.hs-mega__simple-link::after,
	.hs-mega__links .hs-mega__link:not(.hs-mega__link--all)::after,
	.hs-mega-toggle__chevron {
		content: ""; flex: none; width: 28px; height: 28px; margin-left: auto; opacity: 1;
		border: 0; border-radius: var(--r-pill); transform: none;
		background: var(--bg-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%23252525' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px;
		box-shadow: 0 1px 2px rgba(15, 23, 26, .08);
	}
	.hs-mega__simple-link,
	.hs-mega__links .hs-mega__link { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; }
	.hs-mega-toggle { flex-basis: 52px; color: var(--fg-1); }

	/* Webshop / Reparaties: black glyph, black title, no sub-line. The orange
	 * basket and teal wrench read as toy colours next to each other. */
	.hs-nav__icon,
	.hs-nav__icon:has(.hs-icon--basket) { color: var(--fg-1); }
	.hs-nav__label { font-family: var(--font-sans); font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--fg-1); }
	.hs-nav__link { min-height: 60px; }
	.hs-nav .current-menu-item > .hs-nav__link .hs-nav__label,
	.hs-nav .current-menu-ancestor > .hs-nav__link .hs-nav__label { color: var(--fg-1); }
	/* ...but the orange button keeps its white label on its own page */
	.hs-nav .hs-nav__item--cta.current-menu-item > .hs-nav__link .hs-nav__label,
	.hs-nav .hs-nav__item--cta.current-menu-ancestor > .hs-nav__link .hs-nav__label { color: var(--fg-on-brand); }

	/* ---------- Nieuw in doos / Refurbished: the step after a merk ----------
	 * Two big tiles, each led by a dot in its card-badge colour; a type with
	 * nothing in stock is greyed out (dashed, no arrow) and inert. */
	.hs-mega__types { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0 var(--sp-2); }
	.hs-mega__type { display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--fg-1); text-decoration: none; }
	.hs-mega__type::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: var(--r-pill); }
	.hs-mega__type--new::before { background: var(--badge-new); }
	.hs-mega__type--refurbished::before { background: var(--badge-refurb); }
	.hs-mega__type-label { flex: 1 1 auto; }
	.hs-mega__type-meta { font-size: var(--fs-14); font-weight: var(--fw-regular); color: var(--fg-3); }
	.hs-mega__type.is-empty { background: var(--bg-1); border-style: dashed; color: var(--fg-3); cursor: not-allowed; }
	.hs-mega__type.is-empty::before { background: var(--border-1); }

	/* The lists themselves become levels: hidden in the merk pane (the choice
	 * stands in for them), shown whole-drawer once chosen. */
	.hs-mega__item-pane .hs-mega__groups { display: block; padding: 0; }
	.hs-mega__item-pane .hs-mega__group { display: none; }
	.hs-mega__item-pane .hs-mega__group.is-drilled { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: block; min-height: 100%; padding: 0 0 var(--sp-6); border-radius: 0; background: var(--bg-1); animation: hs-drill-in var(--dur-base) var(--ease-out); }
	.hs-mega__group.is-drilled > .hs-mega__group-title { display: none; } /* the drill head names it */
	.hs-mega__group.is-drilled > .hs-mega__links { padding: 0 var(--sp-2); }
	.hs-mega__group .hs-mega__link { font-size: var(--fs-16); padding: var(--sp-2) var(--sp-3); }
}
@keyframes hs-drill-in { from { opacity: 0; transform: translateX(24px); } }

/* --- other layout at the classic tablet breakpoint (non-header) --- */
@media (max-width: 782px) {
	.hs-product-grid { grid-template-columns: repeat(2, 1fr); }
	.hs-trust__inner { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) 0; }
	.hs-trust__item:nth-child(2n) { border-right: 0; }
	.hs-section { --hs-section-pad-y: var(--sp-10); }
}


/* Logo hidden only while the open search field actually lies over it (phones);
 * main.js sets the class after measuring. Elsewhere the field fits beside it. */
.hs-header.is-search-over-logo .hs-branding { visibility: hidden; }
/* desktop, where the field does not fit after the menu: the menu steps aside */
.hs-header.is-search-over-nav .hs-primary-nav { opacity: 0; visibility: hidden; }

/* --- topbar USPs below 1200px: rotate instead of squeezing ---
 * Phones: one at a time, icon and text centred together on the strip (20-10-2026;
 * the icon used to hang outside the centred text, which pulled wide icons such as
 * the stars off-centre).
 * Tablets and small laptops (640–1199px): two at a time, the next pair every 3s.
 * From 1200px all four sit side by side (measured: they fit at 14px from ~1100px,
 * 1200 leaves them room to breathe). main.js does the rotating. */
@media (max-width: 1199px) {
	.hs-topbar__inner { padding-inline: calc(var(--hs-gutter) + var(--hs-logo-h)); }
	.hs-topbar__usps { display: grid; grid-template-columns: none; justify-content: center; font-size: var(--fs-14); }
	.hs-topbar__usp,
	.hs-topbar__usp:nth-child(n+4) { position: relative; grid-area: 1 / 1; display: inline-flex; justify-self: center; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow) var(--ease-out); }
	.hs-topbar__usp.is-active { opacity: 1; visibility: visible; transform: none; }
	.hs-topbar__usp .hs-stars .hs-icon { width: 13px; height: 13px; }
}
@media (min-width: 640px) and (max-width: 1199px) {
	/* two cells; the odd USPs share the left one, the even ones the right */
	.hs-topbar__usps { grid-template-columns: auto auto; column-gap: var(--sp-10); }
	.hs-topbar__usp:nth-child(odd) { grid-area: 1 / 1; }
	.hs-topbar__usp:nth-child(even) { grid-area: 1 / 2; }
}

/* --- phones: a smaller logo so logo + search + cart + menu fit one row --- */
@media (max-width: 560px) {
	:root { --hs-gutter: 16px; --hs-logo-h: 46px; }
	.hs-header__inner { gap: var(--sp-2); }
	.hs-search { height: 38px; }
}
@media (max-width: 400px) {
	:root { --hs-gutter: 12px; --hs-logo-h: 42px; }
	.hs-header__inner { gap: 6px; }
}
/* The narrowest phones (320–359px) have no room for the wordmark next to three
 * icons: the cloud alone, still rising into the topbar. */
@media (max-width: 359px) {
	:root { --hs-logo-h: 48px; }
	.hs-header .hs-logo--full { display: none; }
	.hs-header .hs-logo--icon { display: block; transform: translateY(calc(var(--hs-logo-h) * -0.3)); }
	.hs-topbar__inner { padding-left: calc(var(--hs-gutter) + var(--hs-logo-h) * 1.2); }
}
@media (max-width: 540px) {
	.hs-product-grid { grid-template-columns: 1fr; }
}