/*
 * Homepage styles. Buildless, tokens from variables.css. Everything is scoped
 * under .hs-sections so template CSS can never reach the global chrome (see CLAUDE.md).
 * Sections map 1:1 to template-parts/sections/*.php.
 */

/* ---------- shared section furniture ---------- */
.hs-sections .hs-section__head { margin-bottom: var(--sp-8); }
.hs-sections .hs-section__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-32); font-weight: var(--fw-bold); line-height: 1; letter-spacing: normal; color: var(--heading-color); } /* old site: Poppins 32/32 */
.hs-sections .hs-section__intro { margin: var(--sp-4) 0 0; max-width: 70ch; color: var(--fg-1); font-size: var(--fs-16); line-height: var(--lh-copy); } /* old site: Lato 16/24, text colour */
.hs-sections .hs-icon { width: 20px; height: 20px; flex-shrink: 0; }
/*
 * USP list. One pattern across the site: an icon in a fixed 1.5rem column and the
 * label next to it, so the icons line up on the same left axis as the heading
 * above them. This mirrors .hs-vk-hero__usps on /verkopen/, which is the
 * reference implementation. USP items are statements, never controls, so they get
 * no border, no fill and no pill shape; anything that looks pressable here is a
 * false affordance. Clickable pills are .hs-chip in components.css.
 * .hs-home-repair__usps below is the same pattern laid out horizontally.
 */
.hs-sections .hs-usps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.hs-sections .hs-usps li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--sp-3); align-items: start; }
.hs-sections .hs-usps .hs-icon { width: 1.25rem; height: 1.25rem; margin-top: 0.15em; }

/* Small uppercase label above a section title, with a leading icon. */
.hs-sections .hs-home-tradein__eyebrow,
.hs-sections .hs-home-store__eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.hs-sections .hs-home-store__eyebrow { color: var(--accent-text); }
.hs-sections .hs-home-tradein__eyebrow { color: var(--hs-teal-200); }

/* Any section can now be put on the dark brand band from ACF ("Achtergrond"),
 * not just inruilen. components.css sets `color:#fff` on the band, but the
 * two-class rules above (--fg-1/--fg-2) are more specific and would win, so the
 * generic copy elements are re-asserted here. Card-like children keep their own
 * light surface and stay readable as-is. */
.hs-sections .hs-section--brand .hs-section__title,
.hs-sections .hs-section--brand .hs-section__intro,
.hs-sections .hs-section--brand .hs-rich,
.hs-sections .hs-section--brand .hs-rich p,
.hs-sections .hs-section--brand .hs-home-trust__item { color: var(--fg-on-brand); }
.hs-sections .hs-section--brand .hs-section__intro,
.hs-sections .hs-section--brand .hs-rich p { color: var(--hs-teal-100); }

/* Orange band: everything dark. Teal on orange is 1,6:1, white 2,30:1; --fg-1 is
 * 6,66:1. The light-on-dark rules of the trade-in band are re-asserted here, and
 * its amber button becomes the old teal one. */
.hs-sections .hs-section--orange .hs-section__title,
.hs-sections .hs-section--orange .hs-section__intro,
.hs-sections .hs-section--orange .hs-rich,
.hs-sections .hs-section--orange .hs-rich p,
.hs-sections .hs-section--orange .hs-home-tradein__intro,
.hs-sections .hs-section--orange .hs-home-tradein__step-title,
.hs-sections .hs-section--orange .hs-home-tradein__step-text,
.hs-sections .hs-section--orange .hs-home-tradein__eyebrow,
.hs-sections .hs-section--orange .hs-home-trust__item { color: var(--fg-1); }
.hs-sections .hs-section--orange .hs-home-tradein__step-icon { background: rgba(255, 255, 255, .45); color: var(--fg-1); }
/* A large "trade in" arrow behind the band (22-10-2026, the client's reference):
 * a dashed tail rising from the bottom, a solid arc over the top and an arrow
 * head on the right — round, the old phone comes back as credit. White at 22% on
 * the orange, purely decorative, drawn inline (no extra request), behind the
 * copy and the phones. Hidden on narrow phones, where it only crowded the copy. */
.hs-sections .hs-section--orange.hs-home-tradein { position: relative; overflow: hidden; }
.hs-sections .hs-section--orange.hs-home-tradein::before { content: ""; position: absolute; z-index: 0; top: -6%; left: 24%; width: min(600px, 36vw); aspect-ratio: 640 / 560; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 560' fill='none' stroke='white' stroke-width='34' stroke-linecap='round' stroke-linejoin='round' opacity='.22'%3E%3Cpath d='M175 545A270 270 0 0 1 60 320' stroke-dasharray='34 58'/%3E%3Cpath d='M60 320A270 270 0 0 1 600 320'/%3E%3Cpath d='M532 252L600 320L668 252'/%3E%3C/svg%3E") no-repeat center / contain; pointer-events: none; }
.hs-sections .hs-section--orange.hs-home-tradein > .hs-container { position: relative; z-index: 1; }
@media (max-width: 600px) {
	.hs-sections .hs-section--orange.hs-home-tradein::before { display: none; }
}
/* The trade-in band itself in white (22-10-2026, the client's call): title,
 * copy, eyebrow and steps. White on this orange is ~2,3:1, under WCAG AA — a
 * known, accepted trade-off; other orange sections keep the dark text above. */
.hs-sections .hs-section--orange.hs-home-tradein :is(.hs-section__title, .hs-home-tradein__intro, .hs-home-tradein__eyebrow, .hs-home-tradein__step-title, .hs-home-tradein__step-text) { color: var(--fg-on-brand); }
/* The band's button: deep teal (redesign 20-10-2026). The mid teal it had read as
 * a clash on the orange; teal-800 sits on it as a calm dark anchor, white on it
 * is 8,82:1, and it is the same button as "Heb je een vraag?" in the welcome
 * block, so the two calls to action on the page match. */
.hs-sections .hs-section--orange .hs-btn--amber { gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); border-radius: var(--r-lg); background: var(--hs-teal-800); color: var(--fg-on-brand); box-shadow: 0 10px 24px -12px rgba(1, 82, 97, .55); }
.hs-sections .hs-section--orange .hs-btn--amber:hover { background: var(--hs-teal-900); color: var(--fg-on-brand); }
.hs-sections .hs-section--orange .hs-btn--amber .hs-icon { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease-out); }
.hs-sections .hs-section--orange .hs-btn--amber:hover .hs-icon { transform: translateX(3px); }

/* The last section keeps its full bottom padding on section-built pages. The
 * old site ends every one of them 64px above the footer (the homepage on its
 * mint product rows, /winkelimpressie/ under the photos, /contact/ under the
 * form), so components.css's 32px page-edge trim does not apply here. The
 * doubled class makes it (0,4,0), so it beats that (0,3,0) rule outright. */
.hs-sections > .hs-section.hs-section:last-of-type { padding-bottom: var(--hs-section-pad-y); }
/* Same for the top: the old section-built pages start their content 64px under
 * the header (/reviews/ title at 191px with a 127px header, /contact/ the same),
 * not 32px. The homepage hero stays flush against the header. */
.hs-sections > .hs-section.hs-section:first-of-type:not(.hs-home-hero):not(.hs-pageintro) { padding-top: var(--hs-section-pad-y); }

/* A page that opens with the mint title band (page-intro on mint): the band is a
 * <div>, so the first <section> after it is :first-of-type and would get the
 * 32px page-edge padding. On the old site the content starts 64px under the
 * band. (0,4,0) beats the (0,3,0) edge rule in components.css.
 * 27-10-2026: the band has no fill any more, so there is no colour edge to clear;
 * 64px under a white band read as a hole. Now 16px, plus the band's own 24px.
 * Same selector shape as the (0,6,0) page-top rule above, plus the band: (0,7,0). */
.hs-sections > .hs-titleband + .hs-section.hs-section:first-of-type:not(.hs-home-hero):not(.hs-pageintro) { padding-top: var(--sp-4); }

/* .hs-stars lives in components.css — hs_star_rating() is a shared helper. */

/* ---------- 1. dual-intent hero ---------- */
/*
 * The old homepage's split hero, rebuilt on its measured geometry (live site at
 * 1900px, 10-10-2026): two full-bleed colour halves, and inside the 1400px
 * content column two 700px halves with 16px padding. Each cut-out photo stands
 * on the bottom edge — repairs at 60% of its half, flush right; the shop at 75%,
 * flush left — and the text sits in the remaining 40%, vertically centred.
 * Title 32/32, points 20/24 with 8px between, button 16px below them.
 *
 * WCAG, both towards the new design:
 *  - repairs use --hs-teal-aa (#008392), the old #008999 four percent darker:
 *    white on it is 4,51:1, so the 20px points can stay regular as they were;
 *  - the shop half is the old amber #f4ab21 with dark text (7,81:1) instead of
 *    white (1,96:1).
 *
 * Repairs come first in the DOM too (hero.php), so reading and tab order match
 * the screen; that half owns the page's <h1>.
 */
.hs-sections .hs-home-hero {
	--hero-edge: max(var(--hs-gutter), calc((100vw - var(--hs-wide-width)) / 2 + var(--hs-gutter)));
	--hero-half: calc(50vw - var(--hero-edge)); /* one half of the content column: 700px on a wide screen */
}
/* (0,3,0): beats the page-edge padding rule in components.css, which would put a
 * white strip between the header and the two colour blocks. */
.hs-sections > .hs-section.hs-home-hero { padding: 0; }
.hs-home-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.hs-home-hero .hs-container.hs-home-hero__grid { max-width: none; padding: 0; }
.hs-home-hero__path { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: var(--hs-hero-min-h); padding: var(--sp-4); }
.hs-home-hero__path > *:not(.hs-home-hero__media) { position: relative; z-index: 1; }
.hs-home-hero__path--repair { --focus-ring: var(--focus-ring-on-dark); padding-left: calc(var(--hero-edge) + var(--sp-4)); background: var(--hs-teal-aa); color: var(--fg-on-brand); }
/* White text on the amber half too (22-10-2026, the client's call, to match the
 * repair half): 1,96:1, under WCAG AA — a known, accepted trade-off. */
.hs-home-hero__path--buy { --focus-ring: var(--focus-ring-on-dark); padding-right: calc(var(--hero-edge) + var(--sp-4)); align-items: flex-end; text-align: right; background: var(--hs-amber); color: var(--fg-on-brand); }
.hs-home-hero__path--repair.hs-home-hero__path--has-media { padding-right: calc(var(--hero-half) * .6); }
.hs-home-hero__path--buy.hs-home-hero__path--has-media { padding-left: calc(var(--hero-half) * .6); }
.hs-home-hero__badge { display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--bg-1); color: var(--fg-1); font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.hs-home-hero__badge .hs-icon { width: 16px; height: 16px; }

/* Photo: width as on the old site (background-size 60% / 75% of the half),
 * natural height, standing on the bottom edge. */
.hs-home-hero__media { position: absolute; bottom: 0; pointer-events: none; }
.hs-home-hero__path--repair .hs-home-hero__media { right: 0; width: calc(var(--hero-half) * .6); }
.hs-home-hero__path--buy .hs-home-hero__media { left: 0; width: calc(var(--hero-half) * .75); }
.hs-home-hero__media img { display: block; width: 100%; height: auto; max-height: var(--hs-hero-min-h); object-fit: contain; object-position: bottom; }

.hs-home-hero__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-32); line-height: 1; letter-spacing: normal; color: inherit; }
.hs-home-hero__text { margin: var(--sp-2) 0 0; color: inherit; font-size: var(--fs-18); line-height: var(--lh-base); }
.hs-home-hero__chips { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hs-home-hero__path--buy .hs-home-hero__chips { justify-content: flex-end; }
.hs-home-hero__chips a { display: inline-block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--bg-1); color: var(--fg-1); font-size: var(--fs-14); font-weight: var(--fw-bold); text-decoration: none; }
.hs-home-hero__chips a:hover { color: var(--accent-text); }
/* Points, on the old metrics: a 20px icon, the text 25px in, 20/24 type and
 * 8px between lines. (0,3,0) to override the shared .hs-sections .hs-usps grid. */
.hs-sections .hs-home-hero__usps { gap: var(--sp-2); margin: 0; }
/* One line per point (22-10-2026): "Vaak binnen 1 uur gereed" wrapped onto a
 * second line in the narrow text column next to the photo, so the three points
 * no longer lined up. nowrap keeps each a single line; the photo sits under the
 * text (z-index) on the rare width where a line reaches it. */
.hs-sections .hs-home-hero__usps li { grid-template-columns: 20px auto; column-gap: 5px; align-items: center; color: inherit; font-size: var(--fs-20); line-height: var(--lh-copy); font-weight: var(--fw-regular); white-space: nowrap; }
.hs-sections .hs-home-hero__usps .hs-icon { width: 20px; height: 20px; margin: 0; }
/* The shop half is right-aligned, its points too (22-10-2026, the client's
 * call): each line ends on the right edge, its icon just before the text. */
.hs-home-hero__path--buy .hs-home-hero__usps { width: fit-content; justify-items: end; text-align: right; }
.hs-sections .hs-home-hero__path--buy .hs-home-hero__usps li { justify-content: end; }
.hs-home-hero__cta { margin-top: var(--sp-4); }
/* White type on the orange hero button (client, 29-10-2026), hover included. */
.hs-btn--cta2.hs-home-hero__cta,
.hs-btn--cta2.hs-home-hero__cta:hover { color: var(--fg-on-brand); }

/* ---------- 2. trust strip ---------- */
/* Icons sit in a tinted disc so the row reads as four badges rather than four
 * lines of text with a hairline glyph in front. */
.hs-home-trust { padding-top: var(--sp-8); padding-bottom: var(--sp-8); border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); }
/* The hairlines only read as hairlines against white. On a tinted or dark band
 * the colour change is the separator, so drop them. */
.hs-home-trust.hs-section--alt,
.hs-home-trust.hs-section--cream,
.hs-home-trust.hs-section--brand { border-top: 0; border-bottom: 0; }
/* margin-block, NOT `margin: 0` — this element is also the section's
 * .hs-container, and the shorthand reset its `margin: 0 auto` too (same
 * specificity, sections.css loads later). The strip then sat hard against the
 * left of the viewport instead of lining up with the hero above it. Only the
 * <ul>'s own vertical margin needs clearing; leave the horizontal centring to
 * .hs-container. Same trap applies to any element carrying both classes. */
.hs-home-trust__list { list-style: none; margin-block: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-5) var(--sp-6); }
.hs-home-trust__item { display: flex; align-items: center; gap: var(--sp-3); color: var(--fg-1); font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.hs-home-trust__item .hs-icon { width: 22px; height: 22px; padding: 9px; box-sizing: content-box; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); }
/* Accent per item, chosen in ACF — not derived from the item's position. A
 * :nth-child rule meant re-ordering the repeater silently re-coloured the strip
 * and the marketer had no way to set it. */
.hs-home-trust__item--teal .hs-icon { background: var(--accent-soft); color: var(--accent); }
.hs-home-trust__item--amber .hs-icon { background: var(--hs-amber-100); color: var(--hs-amber-800); }
.hs-home-trust__item--green .hs-icon { background: var(--hs-green-100); color: var(--hs-green-800); }
.hs-home-trust__item--neutral .hs-icon { background: var(--bg-2); color: var(--fg-2); }

/* ---------- 3. product grid ---------- */
/* Redesign 20-10-2026: an upright card, six to a row on desktop so more devices
 * fit on the page. The photo stands in front of a mint halo (a nod to the
 * "holy" in the name and the cloud in the logo), the brand small over the model
 * name, then the "v.a." price with a small "Bekijk" bottom right. The whole card
 * is the link; "Bekijk" only says so. Flat at rest (a hairline edge), lifted on
 * hover, the halo widening behind the device. Under the last product row an
 * optional row of category tiles. Four per row on desktop; see the grid rule. */
.hs-home-products__head .hs-section__intro { max-width: 72ch; }
.hs-sections .hs-home-products__head { margin-bottom: var(--sp-6); }
/* Four across (20-10-2026, was six): four divides into two, so the grid is
 * 4 × 1 on desktop and 2 × 2 on tablets and phones, never a lone last card. */
.hs-home-products__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
/* The card itself (.hs-home-pcard) lives in product-card.css since 22-10-2026:
 * the shop archive and the PDP use it too, without loading this whole file. */
/* Category tiles: white, the device icon (or the category image) over its name. */
.hs-sections .hs-home-products__cats-title { margin: var(--sp-10) 0 var(--sp-4); font-family: var(--font-display); font-size: var(--fs-24); font-weight: var(--fw-bold); line-height: 1.2; color: var(--heading-color); }
.hs-home-products__cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-4); }
.hs-home-products__cat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); height: 120px; padding: var(--sp-4); background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--r-xl); color: var(--fg-1); font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-semibold); text-decoration: none; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.hs-home-products__cat .hs-icon { width: 36px; height: 36px; color: var(--accent); transition: transform var(--dur-base) var(--ease-out); }
.hs-home-products__cat img { width: 56px; height: 56px; object-fit: contain; }
.hs-home-products__cat:hover { border-color: var(--hs-teal-200); box-shadow: 0 8px 20px rgba(16, 42, 46, .08); color: var(--accent-text); }
.hs-home-products__cat:hover .hs-icon { transform: scale(1.08); }
.hs-home-products__cat:focus-visible { outline: 3px solid var(--hs-teal-800); outline-offset: 3px; }
/* Title and intro left, "Bekijk alle …" bottom right, level with the last line
 * of the intro, so it sits just above the cards. Wraps under the intro on a
 * narrow screen. */
.hs-home-products__titlebar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-6); }
.hs-home-products__heading { min-width: 0; }
.hs-home-products__all { padding-bottom: 2px; }
.hs-home-products__all { display: inline-flex; align-items: center; gap: var(--sp-1); font-family: var(--font-display); font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--accent-text); text-decoration: none; }
.hs-home-products__all .hs-icon { width: 12px; height: 12px; transition: transform var(--dur-base) var(--ease-out); }
.hs-home-products__all:hover { color: var(--accent-press); text-decoration: underline; text-underline-offset: 3px; }
.hs-home-products__all:hover .hs-icon { transform: translateX(2px); }
/* Two white product rows in a row (refurbished, then nieuw) read as one shop
 * block: drop the doubled padding at the seam, as components.css does for two
 * tinted bands. */
.hs-sections > .hs-section.hs-home-products:not([class*="hs-section--"]) + .hs-section.hs-home-products:not([class*="hs-section--"]) { padding-top: 0; }
@media (max-width: 860px) {
	.hs-home-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	.hs-home-products__cat .hs-icon { transition: none; }
}

/* ---------- 4. repair device-selector ---------- */
/*
 * Old homepage order: a centred teal heading, the wizard's search, six device
 * cards (three per row) and a row of green ticks. The ticks are the section's
 * USPs, now under the cards instead of above the wizard.
 */
.hs-sections .hs-home-repair__head { text-align: center; margin-bottom: var(--sp-5); } /* old: 20px from title to search box */
.hs-home-repair__head .hs-section__title { font-size: clamp(var(--fs-28), 2.8vw, var(--fs-38)); line-height: 1; }
.hs-home-repair__head .hs-section__intro { margin-inline: auto; }
.hs-home-repair__wizard { max-width: var(--hs-wizard-w); margin: 0 auto; }
/* The site-wide search in place of the plugin's search box: same column, a bit
 * taller and outlined, so it reads as the main way in on the homepage. */
/* 20-10-2026: without the device cards the search is the section, so it is set
 * as the page's main tool: wider, taller, a teal ring on focus. */
.hs-home-repair__search { max-width: min(var(--hs-wizard-w), 720px); margin: 0 auto; }
.hs-home-repair__search .hs-search { max-width: none; height: 64px; padding: 0 8px 0 var(--sp-6); border: 2px solid var(--border-1); box-shadow: 0 2px 4px rgba(16, 42, 46, .04), 0 10px 28px rgba(16, 42, 46, .08); transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.hs-home-repair__search .hs-search:focus-within { border-color: var(--hs-teal-700); box-shadow: 0 0 0 4px var(--accent-soft), 0 10px 28px rgba(16, 42, 46, .08); }
.hs-home-repair__search .hs-search__input { font-size: var(--fs-18); }
.hs-home-repair__search .hs-search__btn { width: 48px; height: 48px; }
/* Cards on the old metrics: a 1140px column, three across with 22px between,
 * a 35px icon in its own column with the title, text and link beside it. Card:
 * 1px #ececec-ish line, 5px corners, a soft all-round shadow. Title Poppins
 * 18/27 dark, text Poppins 12/24, link Poppins 12 bold with a chevron. */
.hs-home-repair__cards { list-style: none; margin: 50px auto 0; padding: 0; max-width: calc(var(--hs-mid-width) - 2 * var(--hs-gutter)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.hs-home-repair__card { display: grid; grid-template-columns: 35px minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 16px; background: var(--bg-1); border: 1px solid var(--border-2); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.hs-home-repair__card-icon { display: flex; color: var(--accent); }
.hs-home-repair__card-icon .hs-icon { width: 35px; height: 35px; }
.hs-home-repair__card-body { display: flex; flex-direction: column; height: 100%; }
.hs-sections .hs-home-repair__card-title { margin: 0; padding-top: 4px; font-family: var(--font-display); font-size: var(--fs-18); font-weight: var(--fw-bold); line-height: 27px; color: var(--fg-1); }
.hs-sections .hs-home-repair__card-text { flex: 1; margin: 0; font-family: var(--font-display); font-size: var(--fs-12); font-weight: var(--fw-regular); line-height: var(--lh-copy); color: var(--fg-1); }
.hs-home-repair__card-link { display: inline-flex; align-items: center; gap: var(--sp-2); align-self: flex-start; margin-top: var(--sp-3); font-family: var(--font-display); font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: normal; color: var(--accent-text); text-decoration: none; }
.hs-home-repair__card-link .hs-icon { width: 12px; height: 12px; transition: transform var(--dur-base) var(--ease-standard); }
.hs-home-repair__card-link:hover { color: var(--accent-press); text-decoration: underline; }
.hs-home-repair__card-link:hover .hs-icon { transform: translateX(3px); }
.hs-sections .hs-home-repair__usps { list-style: none; margin: var(--sp-8) auto 0; max-width: 1040px; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: var(--sp-3) 0; }
/* Old row (live, 1720px): a teal circled tick drawn 32px (a 38px Phosphor box),
 * 16px to Poppins 17 regular with the key words bold, spread evenly with equal
 * space at both ends and between — so no column gap on top of space-evenly.
 * 50px above the cards, 58px above this row and 80px below it, all measured. */
.hs-sections > .hs-section.hs-home-repair { padding-bottom: var(--hs-section-pad-y); }
.hs-sections .hs-home-repair__usps li { display: inline-flex; align-items: center; gap: 13px; font-family: var(--font-display); color: var(--fg-1); font-size: 1.0625rem; font-weight: var(--fw-regular); letter-spacing: normal; }
.hs-sections .hs-home-repair__usps .hs-icon { width: 28px; height: 28px; margin: 0; color: var(--accent); }
.hs-sections .hs-home-repair__usps strong { font-weight: var(--fw-semibold); }
.hs-sections .hs-section--brand .hs-home-repair__usps li { color: var(--fg-on-brand); }

/* ---------- 5. category tiles ---------- */
/* Icon-led tiles. The device glyph does the visual work; an uploaded category
 * image replaces it when there is one. */
.hs-home-cats__grid { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-4); }
.hs-home-cats__tile a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); min-height: 150px; padding: var(--sp-6); background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--r-lg); color: var(--fg-1); font-weight: var(--fw-semibold); text-decoration: none; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.hs-home-cats__tile a:hover { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.hs-home-cats__glyph { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--r-pill); background: var(--hs-teal-50); color: var(--accent); transition: background var(--dur-base) var(--ease-standard); }
.hs-home-cats__glyph .hs-icon { width: 32px; height: 32px; }
.hs-home-cats__tile a:hover .hs-home-cats__glyph { background: var(--accent-soft); }
.hs-home-cats__media img { max-width: 72px; height: auto; }
/* The caret is a hover affordance, tucked into the corner. */
.hs-home-cats__tile a > .hs-icon { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 14px; height: 14px; color: var(--fg-3); opacity: 0; transition: opacity var(--dur-base) var(--ease-standard); }
.hs-home-cats__tile a:hover > .hs-icon, .hs-home-cats__tile a:focus-visible > .hs-icon { opacity: 1; color: var(--accent); }

/* ---------- 6. refurbished explainer + grades ---------- */
.hs-home-refurb__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-10); align-items: start; }
.hs-home-refurb__body p { color: var(--fg-2); font-size: var(--fs-16); line-height: var(--lh-loose); }
.hs-home-refurb__body .hs-btn { margin-top: var(--sp-4); }
.hs-home-refurb__grades { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
/* Letter badge · text · wear meter. The meter ranks the grades visually: more
 * bars = less wear (see refurb-explainer.php). */
.hs-home-refurb__grade { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--r-lg); }
.hs-home-refurb__grade-badge { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--hs-teal-800); font-family: var(--font-display); font-size: var(--fs-18); font-weight: var(--fw-black); }
.hs-home-refurb__grade-body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.hs-home-refurb__grade-title { font-weight: var(--fw-bold); color: var(--fg-1); }
.hs-home-refurb__grade-text { color: var(--fg-2); font-size: var(--fs-14); line-height: var(--lh-base); }
.hs-home-refurb__grade-meter { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.hs-home-refurb__grade-bar { width: 6px; height: 100%; border-radius: var(--r-sm); background: var(--border-1); }
.hs-home-refurb__grade-bar.is-on { background: var(--hs-teal-300); }
.hs-home-refurb__grade-bar:nth-child(1) { height: 45%; }
.hs-home-refurb__grade-bar:nth-child(2) { height: 72%; }

/* ---------- 7. inruilen & verkopen ---------- */
/* Dark brand band (.hs-section--brand) — the page's one strong colour break.
 * Carried by the icon steps; the image slot is optional. */
/* The light-on-dark copy rules live in "shared section furniture" at the top of
 * this file, because any section can now be set to --brand from ACF. */
/* Text and steps stack in the left column, the image spans both rows on the
 * right. align-items:start keeps the copy and the steps together instead of
 * letting centring open a gap between them. */
.hs-home-tradein__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-8) var(--sp-12); align-items: center; align-content: center; min-height: 380px; }
/* Redesign 20-10-2026: a bigger, tighter title kept to two or three lines, and
 * the copy held to ~54 characters a line — at 70ch the paragraph ran as one
 * grey slab across half the screen. */
.hs-sections .hs-home-tradein .hs-section__title { max-width: 18ch; font-size: var(--fs-40); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.hs-home-tradein__intro { margin: var(--sp-5) 0 var(--sp-8); max-width: 54ch; color: var(--hs-teal-100); font-size: var(--fs-18); line-height: 1.6; text-wrap: pretty; }
/* The phones stand on the band's bottom edge, as on the old site, now on a
 * soft pale glow so they read as the subject instead of a cut-out pasted on. */
.hs-home-tradein__media { position: relative; grid-row: span 2; align-self: end; display: flex; justify-content: center; margin-bottom: calc(var(--hs-section-pad-y) * -1); }
.hs-section--orange .hs-home-tradein__media::before { content: ""; position: absolute; left: 50%; bottom: 8%; z-index: 0; width: min(440px, 95%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18) 60%, rgba(255, 255, 255, 0)); transform: translateX(-50%); pointer-events: none; }
/* Cap the height rather than stretch to the column: these product renders are
 * around 400px square and upscaling makes them soft. */
.hs-home-tradein__media img { position: relative; z-index: 1; display: block; width: auto; max-width: 100%; max-height: 420px; height: auto; filter: drop-shadow(0 18px 24px rgba(15, 23, 26, .22)); }
.hs-home-tradein__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.hs-home-tradein__step { display: flex; align-items: flex-start; gap: var(--sp-4); }
.hs-home-tradein__step-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); color: var(--fg-on-brand); flex-shrink: 0; }
.hs-home-tradein__step-icon .hs-icon { width: 24px; height: 24px; }
.hs-home-tradein__step-number { font-family: var(--font-display); font-size: var(--fs-18); font-weight: var(--fw-black); }
.hs-home-tradein__step-body { display: flex; flex-direction: column; gap: 2px; }
.hs-home-tradein__step-title { font-weight: var(--fw-bold); color: var(--fg-on-brand); }
.hs-home-tradein__step-text { color: var(--hs-teal-200); font-size: var(--fs-14); line-height: var(--lh-base); }

/* ---------- 8. reviews ---------- */
/* The old Trustindex widget (live, 11-10-2026): centred title, 32px under it a
 * summary column (the verdict in caps, big stars, "Gebaseerd op N recensies",
 * the source) beside white quote cards with a soft shadow: a 40px initial
 * avatar and the name, stars, then the text in Poppins 14/20. */
.hs-sections .hs-home-reviews .hs-section__head { text-align: center; margin-bottom: var(--sp-8); }
.hs-home-reviews__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
@media (min-width: 64.0625em) {
	.hs-home-reviews__body { grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-4); }
	.hs-home-reviews__body--quotes-only { grid-template-columns: minmax(0, 1fr); }
}
.hs-home-reviews__summary { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center; }
.hs-home-reviews__verdict { font-family: var(--font-display); font-size: var(--fs-20); font-weight: var(--fw-semibold); line-height: 1.4; letter-spacing: normal; text-transform: uppercase; color: var(--hs-ink); }
.hs-home-reviews__summary .hs-stars .hs-icon { width: 30px; height: 30px; }
.hs-home-reviews__count { color: var(--hs-ink); font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: normal; } /* 13px, as the widget */
.hs-home-reviews__count strong { font-weight: var(--fw-semibold); }
.hs-home-reviews__link,
.hs-home-reviews__source { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-1); font-family: var(--font-display); font-size: var(--fs-18); font-weight: var(--fw-semibold); letter-spacing: normal; color: var(--accent-text); text-decoration: none; }
.hs-home-reviews__link .hs-icon { width: 14px; height: 14px; }
.hs-home-reviews__link:hover { color: var(--accent-hover); text-decoration: underline; }
/* Four fixed columns, so four reviews are one full row and never wrap to a
 * ragged 3 + 1. */
.hs-home-reviews__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.hs-home-reviews__card { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 234px; padding: var(--sp-5); background: var(--bg-1); border-radius: var(--r-lg); box-shadow: 0 0 6px rgba(0, 0, 0, .12); font-family: var(--font-display); }
.hs-home-reviews__who { display: flex; align-items: center; gap: var(--sp-3); }
.hs-home-reviews__avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; font-size: var(--fs-20); line-height: 1; color: var(--fg-on-brand); }
.hs-home-reviews__avatar--teal { background: var(--hs-teal-aa); }
.hs-home-reviews__avatar--orange { background: var(--hs-orange); color: var(--hs-ink); }
.hs-home-reviews__avatar--green { background: var(--hs-green-800); }
.hs-home-reviews__avatar--ink { background: var(--hs-ink-2); }
.hs-home-reviews__author { color: var(--hs-ink); font-size: var(--fs-15); font-style: normal; font-weight: var(--fw-semibold); letter-spacing: normal; }
.hs-home-reviews__card .hs-stars .hs-icon { width: 18px; height: 18px; }
.hs-home-reviews__quote { margin: 0; color: var(--hs-ink); font-size: var(--fs-14); line-height: 20px; letter-spacing: normal; }

/* ---------- 9. fysieke winkel ---------- */
/* The old welcome block: two 50% columns with 64px between and 16px inner
 * padding, so the text column is 652px at 1400px. Copy justified, 16px between
 * title, copy and buttons (live, 1720px). */
.hs-home-store__inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-16); row-gap: var(--sp-12); align-items: center; }
@media (min-width: 861px) {
	.hs-home-store__body { padding-right: var(--sp-4); }
}
.hs-sections .hs-home-store .hs-section__intro { max-width: 54ch; text-align: left; font-size: var(--fs-18); line-height: 1.6; text-wrap: pretty; }
/* Same scale as the trade-in band (redesign 20-10-2026): next to the larger photo
 * collage a 32px title and 16px copy looked like a caption. */
.hs-sections .hs-home-store .hs-section__title { font-size: var(--fs-40); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.hs-sections .hs-home-store .hs-btn--dark { padding: var(--sp-4) var(--sp-6); border-radius: var(--r-lg); box-shadow: 0 10px 24px -12px rgba(1, 82, 97, .55); }
.hs-home-store__points { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.hs-home-store__points li { display: flex; align-items: center; gap: var(--sp-3); color: var(--fg-1); font-weight: var(--fw-medium); }
.hs-home-store__points .hs-icon { color: var(--accent); }
.hs-home-store__address { margin: var(--sp-6) 0 0; color: var(--fg-2); line-height: var(--lh-base); }
.hs-home-store__address a { color: var(--fg-1); font-weight: var(--fw-semibold); text-decoration: none; }
.hs-home-store__address a:hover { color: var(--accent-text); }
.hs-home-store__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-8); }
/* The old welcome block's second action: a plain teal link with a map pin. */
.hs-home-store__route { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-bold); letter-spacing: normal; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } /* underlined, as on the old welcome block */
.hs-home-store__route .hs-icon { width: 16px; height: 16px; }
/* Two photos as one collage (redesign 20-10-2026): the first large, the second
 * smaller, lower and overlapping it, framed in white with a teal-tinted shadow —
 * a deliberate composition instead of two cards that happened to be staggered.
 * A 12-column grid places them, so the overlap scales with the column. */
.hs-home-store__media--duo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); aspect-ratio: 6 / 5; width: 100%; max-width: 640px; margin-left: auto; }
.hs-home-store__media.hs-home-store__media--duo img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: var(--r-xl); }
.hs-home-store__media.hs-home-store__media--duo img:nth-child(1) { grid-column: 1 / 9; grid-row: 1 / 11; box-shadow: 0 20px 40px -24px rgba(1, 82, 97, .45); }
.hs-home-store__media.hs-home-store__media--duo img:nth-child(2) { z-index: 1; grid-column: 7 / 13; grid-row: 4 / 13; margin-top: 0; border: 6px solid var(--bg-1); box-shadow: 0 24px 48px -20px rgba(1, 82, 97, .5); }
.hs-home-store__route:hover { color: var(--accent-press); text-decoration: underline; }
.hs-home-store__status { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--fg-2); font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.hs-home-store__status .hs-icon { width: 16px; height: 16px; color: var(--fg-3); }
.hs-home-store__status.is-open { color: var(--hs-green-800); }
.hs-home-store__status.is-open .hs-icon { color: var(--hs-green); }
.hs-home-store__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); }
/* No photo yet: an oversized storefront glyph, never a stand-in shop image. */
.hs-home-store__media--empty { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--hs-teal-50); border-radius: var(--r-xl); }
.hs-home-store__media--empty .hs-icon { width: 96px; height: 96px; color: var(--hs-teal-200); }

/* ---------- responsive ---------- */
/*
 * The fixed grids above need an explicit ladder now that auto-fit no longer does
 * it for them. Two ladders, because the two grids carry different content: a
 * product card is an image plus two short lines and stays readable narrow, a
 * review card is a paragraph of running text and needs measure.
 */
@media (max-width: 640px) {
	/* Four across on desktop, two by two from 860px down (above) and on a phone. */
	.hs-home-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 861px) and (max-width: 1199px) {
	/* The half is narrower than 700px here; give the text half the half. */
	.hs-home-hero__path--repair.hs-home-hero__path--has-media { padding-right: calc(var(--hero-half) * .5); }
	.hs-home-hero__path--buy.hs-home-hero__path--has-media { padding-left: calc(var(--hero-half) * .5); }
	.hs-sections .hs-home-hero__usps li { font-size: var(--fs-18); }
}
@media (max-width: 1024px) {
	.hs-home-reviews__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 782px) {
	/* Two upright cards stay side by side on a phone, as in any shop app: twice
	 * the products per screen, and the photo still reads at ~170px. */
	.hs-home-products__grid { gap: var(--sp-3); }
}
/* Phone: the reviews become a swipeable row (the old site's slider), CSS only —
 * scroll-snap, no script. The next card peeks in so the row reads as scrollable. */
@media (max-width: 640px) {
	.hs-home-reviews__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 85%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2); }
	.hs-home-reviews__card { scroll-snap-align: start; }
	.hs-home-tradein__media img { max-height: 200px; }
	/* Category tiles become a swipeable row; the next tile peeks in. */
	.hs-home-products__cats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 40%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2); }
	.hs-home-products__cats li { scroll-snap-align: start; }
	.hs-sections .hs-home-products__cats-title { margin-top: var(--sp-8); font-size: var(--fs-20); }
	.hs-home-products__cat { height: 112px; font-size: var(--fs-15); }
	.hs-home-products__cat .hs-icon { width: 32px; height: 32px; }
}

@media (max-width: 860px) {
	.hs-home-hero__grid { grid-template-columns: 1fr; }
	/* Stacked: each half spans the width, the photo keeps standing on its bottom
	 * edge beside the text, at a smaller size. */
	.hs-home-hero__path { min-height: 320px; padding: var(--sp-10) var(--hs-gutter); }
	.hs-home-hero__path--repair, .hs-home-hero__path--buy { padding-inline: var(--hs-gutter); }
	.hs-home-hero__path--repair.hs-home-hero__path--has-media { padding-right: 44%; }
	.hs-home-hero__path--buy.hs-home-hero__path--has-media { padding-left: 44%; }
	.hs-home-hero__path--repair .hs-home-hero__media,
	.hs-home-hero__path--buy .hs-home-hero__media { width: 46%; } /* larger since 23-10-2026 */
	.hs-sections .hs-home-hero__usps li { font-size: var(--fs-18); }
	.hs-home-repair__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hs-home-refurb__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
	.hs-home-tradein__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
	.hs-home-tradein__media { grid-row: auto; order: 3; justify-content: center; }
	.hs-home-store__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
	.hs-home-store__media { order: -1; }
	.hs-home-store__media--duo { margin-inline: auto; }
	.hs-home-tradein__media img { max-height: 300px; }
	.hs-home-reviews__link { margin-left: 0; }
	.hs-sections .hs-contact__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
	/* The shop card used to be pulled above the form here (order: -1), so the
	 * fast routes came first on a phone. Two things changed: those routes are now
	 * the three cards at the very top of the page, and the card carries the full
	 * week schedule instead of a fold — 786px measured at 768px wide. Keeping it
	 * first would bury the form the section is named after. */
	.hs-sections .hs-contact__form .hs-form__row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.hs-home-repair__cards { grid-template-columns: minmax(0, 1fr); }
	/* One column of ticks, left-aligned on a shared axis and centred as a block,
	 * instead of four centred lines whose icons zigzag. */
	.hs-sections .hs-home-repair__usps { display: grid; justify-content: center; justify-items: start; gap: var(--sp-3); margin-top: var(--sp-6); }
	.hs-sections .hs-home-repair__usps li { font-size: var(--fs-16); }
	.hs-sections .hs-home-repair__usps .hs-icon { width: 24px; height: 24px; }
	.hs-home-repair__search .hs-search { height: 56px; padding-left: var(--sp-5); }
	.hs-home-repair__search .hs-search__input { font-size: var(--fs-16); }
	.hs-home-repair__search .hs-search__btn { width: 44px; height: 44px; }
	.hs-home-hero__title { font-size: var(--fs-28); }
	/* 16px points and a narrower photo, so "Vaak binnen 1 uur gereed" stays one
	 * line beside the photo at 375px. */
	.hs-sections .hs-home-hero__usps li { font-size: var(--fs-16); }
	.hs-home-hero__path { min-height: 280px; padding-block: var(--sp-8); }
	.hs-home-hero__path--repair.hs-home-hero__path--has-media { padding-right: 36%; }
	.hs-home-hero__path--buy.hs-home-hero__path--has-media { padding-left: 36%; }
	.hs-home-hero__path--repair .hs-home-hero__media,
	.hs-home-hero__path--buy .hs-home-hero__media { width: 36%; }
	.hs-home-refurb__grade { grid-template-columns: auto 1fr; }
	.hs-home-refurb__grade-meter { display: none; }
}

/* ---------- 404 ---------- */
/* The old 404 (live, 11-10-2026): a centred Poppins 32 title, 20px to a centred
 * Lato line (plus its 24px paragraph margin), 76px to the same mint cards as /contact/, here with a plain
 * Poppins 22 card title instead of a fold-out. 404.php wraps the page in
 * .hs-sections so these styles and the card styles apply. */
.hs-sections .hs-404__head { padding-top: 10px; margin-bottom: 76px; text-align: center; }
.hs-sections .hs-404__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-32); font-weight: var(--fw-bold); line-height: 1; letter-spacing: normal; color: var(--heading-color); }
.hs-sections .hs-404__lead { margin: var(--sp-5) 0 0; color: var(--fg-1); font-size: var(--fs-16); line-height: var(--lh-copy); }
.hs-sections .hs-404__card-title { margin: 0; font-family: var(--font-display); font-size: 1.375rem; font-weight: var(--fw-bold); line-height: 1; letter-spacing: normal; color: var(--heading-color); } /* 22/22 */

/* ---------- contact method cards ---------- */
/* Redesign 27-10-2026 (Janyar, contact page from scratch). Was the old /contact/
 * opening: a centred Poppins 48 <h1>, three mint cards whose content sat behind
 * a fold-out title. Now white cards on a hairline, everything you came for
 * visible at once: an icon in a mint disc, the channel, the number / address /
 * mail address as the card's biggest line, open-now status, the response time,
 * the week schedule as the one remaining fold, and one button on the bottom
 * edge so the three line up. Order: phone, mail, shop. */
.hs-sections .hs-cmethods__head { display: grid; justify-items: center; gap: var(--sp-3); margin-bottom: clamp(var(--sp-6), 3vw, var(--sp-10)); text-align: center; }
.hs-sections .hs-cmethods__title { margin: 0; font-family: var(--font-display); font-size: clamp(var(--fs-28), 3vw, var(--fs-40)); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.015em; color: var(--heading-color); text-wrap: balance; }
.hs-sections .hs-cmethods__intro { margin: 0; max-width: 56ch; color: var(--fg-2); font-size: var(--fs-18); line-height: 1.6; text-wrap: pretty; }
/*
 * One card per row until the whole row fits, never in between: a grid that
 * wraps three cards into 2 + 1 reads as a layout bug. The card count is on the
 * element as a modifier (see contact-methods.php). Five or more fall back to
 * auto-fit; the section is not meant to hold that many.
 */
.hs-sections .hs-cmethods__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--sp-6); }
.hs-sections .hs-cmethods__grid--2,
.hs-sections .hs-cmethods__grid--3,
.hs-sections .hs-cmethods__grid--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) {
	.hs-sections .hs-cmethods__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60em) {
	.hs-sections .hs-cmethods__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hs-sections .hs-cmethods__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 75em) {
	.hs-sections .hs-cmethods__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hs-sections .hs-cmethods__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: clamp(var(--sp-5), 2vw, var(--sp-8)); background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--r-xl); transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.hs-sections .hs-cmethods__card:hover { border-color: var(--hs-teal-200); box-shadow: 0 16px 32px -24px rgba(1, 82, 97, .45); }
.hs-sections .hs-cmethods__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--sp-1); border-radius: var(--r-pill); background: var(--hs-mint); color: var(--accent-text); }
.hs-sections .hs-cmethods__icon .hs-icon { width: 24px; height: 24px; }
/* 18px bold: --heading-color-sm, the teal that holds 4,5:1 below 19px. */
.hs-sections .hs-cmethods__label { margin: 0; font-family: var(--font-display); font-size: var(--fs-18); font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: normal; color: var(--heading-color-sm); }
.hs-sections .hs-cmethods__value { margin: 0; color: var(--fg-1); font-family: var(--font-display); font-size: clamp(var(--fs-20), 1.6vw, var(--fs-24)); font-weight: var(--fw-semibold); line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.hs-sections .hs-cmethods__value a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-standard), text-decoration-color var(--dur-fast) var(--ease-standard); }
.hs-sections .hs-cmethods__value a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
.hs-sections .hs-cmethods__value-sub { color: var(--fg-2); font-family: var(--font-sans); font-size: var(--fs-16); font-weight: var(--fw-regular); letter-spacing: normal; }
.hs-sections .hs-cmethods__status { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--fg-2); font-size: var(--fs-14); font-weight: var(--fw-bold); }
.hs-sections .hs-cmethods__status.is-open { color: var(--hs-green-800); }
.hs-sections .hs-cmethods__status-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--hs-ink-4); }
.hs-sections .hs-cmethods__status.is-open .hs-cmethods__status-dot { background: var(--hs-green); box-shadow: 0 0 0 4px var(--hs-green-100); }
.hs-sections .hs-cmethods__eta { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--fg-2); font-size: var(--fs-14); }
.hs-sections .hs-cmethods__eta .hs-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }
.hs-sections .hs-cmethods__more { width: 100%; }
.hs-sections .hs-cmethods__more-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); padding-block: var(--sp-1); list-style: none; cursor: pointer; color: var(--accent-text); font-size: var(--fs-14); font-weight: var(--fw-bold); }
.hs-sections .hs-cmethods__more-toggle::-webkit-details-marker { display: none; }
.hs-sections .hs-cmethods__more-toggle .hs-icon { width: 12px; height: 12px; transform: rotate(90deg); transition: transform var(--dur-base) var(--ease-standard); }
.hs-sections .hs-cmethods__more[open] .hs-cmethods__more-toggle .hs-icon { transform: rotate(-90deg); }
.hs-sections .hs-cmethods__hours { display: grid; margin: var(--sp-2) 0 0; font-size: var(--fs-14); }
.hs-sections .hs-cmethods__hours > div { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 6px 0; border-bottom: 1px solid var(--border-2); color: var(--fg-2); }
.hs-sections .hs-cmethods__hours > div.is-today { color: var(--fg-1); font-weight: var(--fw-bold); }
.hs-sections .hs-cmethods__hours dt, .hs-sections .hs-cmethods__hours dd { margin: 0; }
.hs-sections .hs-cmethods__hours dd { font-variant-numeric: tabular-nums; }
.hs-sections .hs-cmethods__card .hs-cmethods__cta { align-self: stretch; margin-top: auto; padding: 14px var(--sp-5); border: 0; border-radius: var(--r-lg); background: var(--accent-fill); color: var(--fg-on-brand); font-family: var(--font-sans); font-size: var(--fs-16); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: normal; transition: background var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-out); }
/* The button sits on the card's bottom edge; this keeps air above it when the
 * card is short. */
.hs-sections .hs-cmethods__card > :nth-last-child(2) { margin-bottom: var(--sp-3); }
.hs-sections .hs-cmethods__card .hs-cmethods__cta:hover { background: var(--accent-fill-hover); color: var(--fg-on-brand); }
.hs-sections .hs-cmethods__card .hs-cmethods__cta:active { transform: translateY(1px); }

/* ---------- FAQ "per onderwerp" (contact page, 27-10-2026) ----------
 * After fixje.nl/contact: every question by topic, the title and topic index on
 * the left (sticky on desktop, a row of swipeable chips on a phone), the
 * questions on the right (4 : 8). The mint "meest gestelde" panel above it was
 * dropped on 28-10-2026: it showed those questions twice. */
/* minmax(0, 1fr), not the implicit auto track: on a phone the swipeable topic
 * chips would otherwise widen the column to all chips side by side (1458px
 * at 375px, measured) and push the whole FAQ off the screen. */
.hs-sections .hs-helpdesk .hs-container { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(var(--sp-12), 6vw, var(--sp-20)); }
.hs-sections .hs-helpdesk__row--topics { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
@media (min-width: 62em) {
	.hs-sections .hs-helpdesk__row--topics { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(var(--sp-8), 4vw, var(--sp-16)); align-items: start; }
	.hs-sections .hs-helpdesk__aside { position: sticky; top: calc(var(--hs-topbar-h) + var(--hs-header-h) + var(--sp-6)); }
}
.hs-sections .hs-helpdesk .hs-section__title { font-size: clamp(var(--fs-24), 2.4vw, var(--fs-32)); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.hs-sections .hs-helpdesk .hs-faq__list { margin-top: 0; }
/* Questions: Poppins, a plus that turns into a cross, the answer at a reading
 * measure. */
.hs-sections .hs-helpdesk .hs-faq__q { font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-regular); line-height: 1.4; letter-spacing: normal; }
.hs-sections .hs-helpdesk .hs-faq__q::after { width: 14px; height: 14px; border: 0; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z'/%3E%3C/svg%3E") no-repeat center / contain; transform: none; }
.hs-sections .hs-helpdesk .hs-faq__item[open] .hs-faq__q::after { transform: rotate(45deg); }
.hs-sections .hs-helpdesk .hs-faq__a { max-width: 68ch; line-height: 1.65; }
.hs-sections .hs-helpdesk .hs-faq__a a { color: var(--accent-text); }

/* The topic groups: open rows on hairlines, no boxes. */
.hs-sections .hs-helpdesk__groups { display: grid; gap: clamp(var(--sp-8), 4vw, var(--sp-12)); }
.hs-sections .hs-helpdesk__group { scroll-margin-top: calc(var(--hs-topbar-h) + var(--hs-header-h) + var(--sp-6)); }
.hs-sections .hs-helpdesk__group .hs-section__title { margin-bottom: var(--sp-3); font-size: var(--fs-24); }
.hs-sections .hs-helpdesk__group .hs-faq__list { gap: 0; border-top: 1px solid var(--border-1); }
.hs-sections .hs-helpdesk__group .hs-faq__item { border: 0; border-bottom: 1px solid var(--border-1); border-radius: 0; background: transparent; }
.hs-sections .hs-helpdesk__group .hs-faq__q { padding-inline: 0; }
.hs-sections .hs-helpdesk__group .hs-faq__a { padding-inline: 0; }

/* The question search (28-10-2026): one field above the topic index, filtered
 * live by main.js. The global :focus-visible ring marks focus. */
.hs-sections .hs-helpdesk__search { position: relative; margin: 0 0 var(--sp-5); }
.hs-sections .hs-helpdesk__search .hs-icon { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; }
.hs-sections .hs-helpdesk__search-input { width: 100%; min-height: 48px; padding: 0 var(--sp-3) 0 42px; border: 1px solid var(--border-1); border-radius: var(--r-md); background: var(--bg-1); color: var(--fg-1); font: inherit; font-size: var(--fs-16); }
.hs-sections .hs-helpdesk__search-input::placeholder { color: var(--fg-3); }
.hs-sections .hs-helpdesk__search-input:hover { border-color: var(--accent); }

/* Nothing matched: blog articles that might help, then how to reach us. */
.hs-sections .hs-helpdesk__empty { padding: var(--sp-6); border-radius: var(--r-xl); background: var(--hs-mint); }
.hs-sections .hs-helpdesk__empty p { margin: 0; }
.hs-sections .hs-helpdesk__empty-title { margin-bottom: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--heading-color); }
.hs-sections .hs-helpdesk__blogs { margin: var(--sp-4) 0; }
.hs-sections .hs-helpdesk__blogs ul { display: grid; gap: var(--sp-2); margin: var(--sp-2) 0 0; padding-left: 1.2em; }
.hs-sections .hs-helpdesk__empty a { color: var(--accent-text); font-weight: var(--fw-bold); }

/* The topic index. */
.hs-sections .hs-helpdesk__topics-title { margin: 0 0 var(--sp-5); }
.hs-sections .hs-helpdesk__nav ul { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.hs-sections .hs-helpdesk__nav a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 10px var(--sp-3); border-radius: var(--r-lg); color: var(--fg-1); font-weight: var(--fw-bold); text-decoration: none; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.hs-sections .hs-helpdesk__nav a:hover { background: var(--hs-teal-50); color: var(--accent-text); }
/* From 62em the index reads like the blog's table of contents (content.css): a
 * hairline on the left, and the topic in view marked on it in teal as you scroll
 * (.is-current, set by main.js — the same script as the blog). */
@media (min-width: 62em) {
	.hs-sections .hs-helpdesk__nav ul { gap: 0; }
	.hs-sections .hs-helpdesk__nav a { padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); border-left: 2px solid var(--border-1); border-radius: 0; }
	.hs-sections .hs-helpdesk__nav a:hover { border-left-color: var(--hs-teal-200); background: none; }
}
.hs-sections .hs-helpdesk__nav a.is-current { border-color: var(--accent); color: var(--accent-text); }
.hs-sections .hs-helpdesk__count { min-width: 1.75em; padding: 2px var(--sp-2); border-radius: var(--r-pill); background: var(--bg-2); color: var(--fg-2); font-size: var(--fs-12); font-weight: var(--fw-bold); text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 61.99em) {
	.hs-sections .hs-helpdesk__nav ul { display: flex; gap: var(--sp-2); margin-inline: calc(var(--hs-gutter) * -1); padding: 0 var(--hs-gutter) var(--sp-2); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
	.hs-sections .hs-helpdesk__nav ul::-webkit-scrollbar { display: none; }
	.hs-sections .hs-helpdesk__nav li { flex: 0 0 auto; scroll-snap-align: start; }
	.hs-sections .hs-helpdesk__nav a { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-1); border-radius: var(--r-pill); white-space: nowrap; }
}

/* ---------- routeertegels (intent-tiles) ---------- */
/*
 * Two columns from tablet up, whatever the tile count is.
 *
 * The tiles are wide horizontal cards (icon, label, one line of text, arrow), so
 * four of them across a 1232px container left ~285px per tile and the text broke
 * over three lines. Two columns give each tile ~600px and make 4 tiles a clean
 * 2 x 2 — which is the count the contact page ships. The count comes out of an
 * ACF repeater and will change, so the odd counts are handled too: the last tile
 * of an odd set spans the full row instead of leaving a gap next to it.
 */
.hs-sections .hs-intent__grid { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 48em) {
	.hs-sections .hs-intent__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hs-sections .hs-intent__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.hs-sections .hs-intent__item { display: flex; }
.hs-sections .hs-intent__card { flex: 1; display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--sp-4); align-items: center; padding: var(--sp-5); background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--r-lg); color: var(--fg-1); text-decoration: none; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.hs-sections .hs-intent__card:hover { border-color: var(--accent); box-shadow: var(--shadow-1); color: var(--fg-1); }
.hs-sections .hs-intent__icon { grid-column: 1; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--hs-teal-50); color: var(--accent); }
.hs-sections .hs-intent__icon .hs-icon { width: 22px; height: 22px; }
.hs-sections .hs-intent__label { grid-column: 2; grid-row: 1; font-weight: var(--fw-bold); font-size: var(--fs-16); }
.hs-sections .hs-intent__text { grid-column: 2; grid-row: 2; color: var(--fg-2); font-size: var(--fs-14); }
.hs-sections .hs-intent__arrow { grid-column: 3; grid-row: 1 / span 2; display: inline-flex; color: var(--fg-3); }
.hs-sections .hs-intent__arrow .hs-icon { width: 18px; height: 18px; }
.hs-sections .hs-intent__card:hover .hs-intent__arrow { color: var(--accent); }
/* The one or two subjects we most want people to pick (reparatie, inruilen). */
.hs-sections .hs-intent__card--accent { background: var(--hs-teal-50); border-color: var(--hs-teal-200); }
.hs-sections .hs-intent__card--accent .hs-intent__icon { background: var(--accent); color: var(--fg-on-brand); }

/* Editor-only notice: an unconfigured section says what to configure and shows
 * nothing at all to visitors (see CLAUDE.md, "Fallbacks & placeholders"). */
.hs-sections .hs-intent__empty,
.hs-sections .hs-contact__empty { margin: 0; padding: var(--sp-4) var(--sp-5); border: 1px dashed var(--hs-amber); border-radius: var(--r-md); background: var(--hs-amber-50); color: var(--fg-1); font-size: var(--fs-14); }

/* ---------- CF7 form (styled to match the theme) ---------- */
/* Mobile-first on purpose. The max-width:860px block near the top of this file
 * tries to collapse this row to one column, but it sits *earlier* in the source
 * than this rule and carries the same specificity — media queries add none — so
 * the two-column value won and the row stayed side by side at 46 px per field
 * on a 320 px screen. Declaring the pair only from 861 px up removes the
 * conflict instead of fighting it. */
/* The old form (live /contact/, 11-10-2026): Naam + Bedrijf and E-mailadres +
 * Telefoonnummer side by side with 16px between, Onderwerp and Reactie full
 * width. Label Lato 16/24 straight above a 47px field (6px 16px padding, 8px
 * corners), 16px between rows, a 208px textarea, and a small dark-teal
 * "Versturen" (36px, 10px 20px) on the right. The field border is darker than
 * the old 18% grey (1,2:1) so the fields clear the 3:1 of WCAG 1.4.11. */
.hs-sections .hs-contact__form .hs-form__row { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--sp-4); }
@media (min-width: 861px) {
	.hs-sections .hs-contact__form .hs-form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.hs-sections .hs-contact__form p { margin: 0 0 var(--sp-4); }
.hs-sections .hs-contact__form label { display: block; font-size: var(--fs-16); font-weight: var(--fw-regular); line-height: var(--lh-copy); color: var(--fg-1); }
.hs-sections .hs-contact__form .hs-form__req { color: var(--hs-danger); }
.hs-sections .hs-contact__form input[type="text"], .hs-sections .hs-contact__form input[type="email"], .hs-sections .hs-contact__form input[type="tel"], .hs-sections .hs-contact__form textarea { display: block; width: 100%; height: 47px; margin: 0; padding: 6px var(--sp-4); border: 1px solid var(--hs-ink-4); border-radius: var(--r-lg); font: inherit; font-size: var(--fs-16); line-height: var(--lh-copy); background: transparent; color: var(--fg-1); }
.hs-sections .hs-contact__form input::placeholder, .hs-sections .hs-contact__form textarea::placeholder { color: var(--fg-3); opacity: 1; }
.hs-sections .hs-contact__form input:focus, .hs-sections .hs-contact__form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hs-sections .hs-contact__form textarea { height: 208px; resize: vertical; }
.hs-sections .hs-contact__form .hs-form__submit { display: flex; justify-content: flex-end; align-items: center; margin: 0; }
.hs-sections .hs-contact__form .wpcf7-submit { margin: 0; padding: 10px var(--sp-5); border: 0; border-radius: var(--r-lg); background: var(--hs-teal-800); color: var(--fg-on-brand); font-family: var(--font-sans); font-size: var(--fs-16); font-weight: var(--fw-bold); line-height: 1; letter-spacing: normal; cursor: pointer; }
.hs-sections .hs-contact__form .wpcf7-submit:hover { background: var(--hs-teal-900); }
/* CF7 prints its spinner after the button; put it in front, so the button
 * keeps the right edge, as on the old form. */
.hs-sections .hs-contact__form .hs-form__submit .wpcf7-spinner { order: -1; margin: 0 var(--sp-2) 0 0; }
.hs-sections .hs-contact__form .wpcf7-spinner { margin: var(--sp-2) 0 0 var(--sp-2); }

/* ---------- contact section ---------- */
/* Form left (the primary action), the shop as a card on the right. The form gets
 * the wider column: it is what people came to fill in, and its fields sit in two
 * columns of their own. */
/* Same ordering trap as .hs-form__row above: the collapse declared in the
 * max-width:860px block was overridden by this rule, so the contact section
 * stayed two columns on a phone — form squeezed into 105 px, with the CF7
 * submit button spilling 5 px past the viewport. Two columns from 861 px up. */
.hs-sections .hs-contact__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
@media (min-width: 861px) {
	.hs-sections .hs-contact__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-16); }
}
/* Under the contact cards the old page continues 74px lower (64 + 10), not
 * two section paddings. */
.hs-sections .hs-cmethods + .hs-contact { padding-top: var(--sp-4); } /* was 10px under the old opening cards; 27-10-2026 */
.hs-sections .hs-contact__inner--single { grid-template-columns: minmax(0, 1fr); }
.hs-sections .hs-contact__main { min-width: 0; }

/* The shop card: everything a visit needs, in the order it is needed. */
.hs-sections .hs-contact__card { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
/* "Bedrijfsgegevens": 20px under the title, 24px above the map, as the old text widget. */
.hs-sections .hs-contact__company { margin: var(--sp-5) 0 var(--sp-6); color: var(--fg-1); font-size: var(--fs-16); line-height: var(--lh-copy); }
.hs-sections .hs-contact__media { width: 100%; }
.hs-sections .hs-contact__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
.hs-sections .hs-contact__card-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-20); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--heading-color); }
.hs-sections .hs-contact__route { width: 100%; }

.hs-sections .hs-contact__details { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.hs-sections .hs-contact__details li { display: flex; gap: var(--sp-2); color: var(--fg-1); }
.hs-sections .hs-contact__details .hs-icon { color: var(--accent); margin-top: 2px; }
.hs-sections .hs-contact__details a { color: var(--fg-1); text-decoration: none; }
.hs-sections .hs-contact__details a:hover { color: var(--accent-text); }
/* The week schedule used to sit behind a <details>. It does not any more: on a
 * contact page "when are you open" is a top-three question, and a fold both
 * costs a click and hides the answer from anyone scanning the page. */
.hs-sections .hs-contact__hours-block { width: 100%; }
.hs-sections .hs-contact__hours-title { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--fg-1); }
.hs-sections .hs-contact__status { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-lg); font-size: var(--fs-14); font-weight: var(--fw-bold); }
.hs-sections .hs-contact__status.is-open { background: var(--hs-success-bg); color: var(--hs-green-800); }
.hs-sections .hs-contact__status.is-closed { background: var(--bg-2); color: var(--fg-2); }
.hs-sections .hs-contact__status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.hs-sections .hs-contact__today-note { display: flex; align-items: flex-start; gap: var(--sp-2); margin: var(--sp-3) 0 0; font-size: var(--fs-14); color: var(--fg-1); }
/* amber-800, not -700: the icon carries meaning here, so it needs 3:1 against
 * the card (amber-700 measured 2.9:1 — WCAG 1.4.11). */
.hs-sections .hs-contact__today-note .hs-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--hs-amber-800); }
.hs-sections .hs-contact__hours { width: 100%; margin-top: var(--sp-3); border-collapse: collapse; font-size: var(--fs-14); }
.hs-sections .hs-contact__hours th { text-align: left; font-weight: var(--fw-medium); color: var(--fg-2); padding: var(--sp-1) 0; }
.hs-sections .hs-contact__hours td { text-align: right; color: var(--fg-1); padding: var(--sp-1) 0; }
.hs-sections .hs-contact__hours tr.is-today th, .hs-sections .hs-contact__hours tr.is-today td { color: var(--fg-1); font-weight: var(--fw-bold); }
.hs-sections .hs-contact__hours-today { margin-left: var(--sp-2); padding: 1px var(--sp-2); border-radius: var(--r-sm); background: var(--hs-teal-50); color: var(--hs-teal-700); font-size: var(--fs-12); font-weight: var(--fw-bold); text-transform: lowercase; }

/* Date exceptions (feestdagen/vakantie) — they override the week table, and they
 * are printed *above* it: an exception read after the normal hours arrives after
 * the reader has already concluded the shop is open. */
.hs-sections .hs-contact__exceptions { width: 100%; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border-1); border-radius: var(--r-lg); background: var(--hs-amber-50); }
.hs-sections .hs-contact__exceptions-title { margin: 0 0 var(--sp-2); font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--fg-1); }
.hs-sections .hs-contact__exceptions-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-14); }
.hs-sections .hs-contact__exceptions-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1) 0; }
.hs-sections .hs-contact__exceptions-list li + li { border-top: 1px solid var(--hs-amber-100); }
.hs-sections .hs-contact__exceptions-list li.is-today { font-weight: var(--fw-bold); }
.hs-sections .hs-contact__exceptions-date { color: var(--fg-1); text-transform: capitalize; }
.hs-sections .hs-contact__exceptions-reason { margin-left: var(--sp-2); color: var(--fg-2); font-weight: var(--fw-regular); text-transform: none; }
.hs-sections .hs-contact__exceptions-time { color: var(--fg-1); white-space: nowrap; }
/* "Gesloten" is emphasised with weight, not colour: --hs-danger measured 4.32:1
 * on this amber panel (WCAG 1.4.3 needs 4.5), and the word already says it
 * without colour (1.4.1). */
.hs-sections .hs-contact__exceptions-time.is-closed { font-weight: var(--fw-semibold); }
/* A routeertegel, a contact card or a hand-written link can point at
 * #contactformulier; the offset keeps the form clear of the sticky header when
 * one does (WCAG 2.4.11). The header is --hs-header-h tall (the teal topbar
 * scrolls away with the page). The extra --sp-16 is not padding for its own
 * sake: it is the height of the "Stuur een bericht" heading plus its intro, so
 * the jump lands on a form that still has its own title above it. Measured at
 * 1440x900: heading at y=100, intro visible, form top at y=220, header bottom
 * at y=72. The wrapper also carries tabindex="-1", so the jump moves focus as
 * well as the scroll position (WCAG 2.4.3). */
.hs-sections .hs-contact__form { margin-top: var(--sp-5); scroll-margin-top: calc(var(--hs-header-h) + var(--sp-16)); }
.hs-sections .hs-contact__form:focus { outline: none; }
.hs-sections .hs-contact__form:focus-visible { outline: 2px solid var(--accent); outline-offset: var(--sp-2); }

/* The map, first item in the shop card.
 *
 * The height is derived from the box's own width, not from the viewport. The old
 * clamp(220px, 34vw, 420px) was sized for a 1232px full-width container; in the
 * ~488px side column the viewport term stops tracking the box, and at 768px wide
 * it would measure 657 x 261 — a strip. A ratio plus two bounds keeps the shape
 * sane at every width (measured: 440x293 at 1440, 657x360 at 768, 248x200 at
 * 320 — 1.50:1 / 1.83:1 / 1.24:1).
 *
 * Both the width and the height are definite before the iframe exists, so the
 * map arriving moves nothing below it: measured 0px shift on load. That is also
 * why the iframe carries no width/height attributes — the box already owns the
 * ratio, and a second source for it can only disagree. */
.hs-sections .hs-contact__map { width: 100%; height: 436px; overflow: hidden; background: var(--bg-2); } /* the old embed: full column, 436px */
.hs-sections .hs-contact__map iframe { display: block; width: 100%; height: 100%; border: 0; }
/* The iframe is a tab stop, so it needs a visible focus indicator (WCAG 2.4.7).
 * base.css draws one on :focus-visible with a 2px offset, but the iframe fills
 * this box exactly and the box clips its overflow — that ring would be painted
 * straight into the clip and never seen. So the ring moves to the wrapper, where
 * it lands on the card background (accent on --bg-2, the same pairing base.css
 * uses everywhere) instead of on top of the map imagery, whose colours nothing
 * can guarantee 3:1 against. :focus-within, not :focus: it must also stay lit
 * while the keyboard is inside the map. */
.hs-sections .hs-contact__map:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.hs-sections .hs-contact__map iframe:focus-visible { outline: none; }
/* Pulled back against the map: the card's flex gap is meant for its blocks, and
 * the attribution belongs to the map above it, not next to the heading below. */
.hs-sections .hs-contact__map-credit { margin: var(--sp-2) 0 0; color: var(--fg-2); font-size: var(--fs-14); }

/* ---------- FAQ section (markup from hs_render_faqs()) ---------- */
/* Each block can carry an anchor id so the topic tiles can jump to it; the
 * offset keeps the heading clear of the sticky header (WCAG 2.4.11). */
.hs-sections .hs-faqsection[id] { scroll-margin-top: calc(var(--hs-header-h) + var(--sp-6)); }
.hs-sections .hs-faq__list { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.hs-sections .hs-faq__item { border: 1px solid var(--border-1); border-radius: var(--r-md); background: var(--bg-1); overflow: hidden; }
.hs-sections .hs-faq__q { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); font-weight: var(--fw-bold); font-size: var(--fs-16); color: var(--fg-1); }
.hs-sections .hs-faq__q::-webkit-details-marker { display: none; }
.hs-sections .hs-faq__q::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3); transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-standard); }
.hs-sections .hs-faq__item[open] .hs-faq__q::after { transform: rotate(-135deg); }
/* Zie de opmerking bij hours-toggle: teal op wit is 4,17:1, accent-hover 5,96:1. */
.hs-sections .hs-faq__item[open] .hs-faq__q { color: var(--accent-hover); }
.hs-sections .hs-faq__a { padding: 0 var(--sp-5) var(--sp-4); color: var(--fg-2); line-height: var(--lh-base); }
.hs-sections .hs-faq__a p { margin: 0 0 var(--sp-2); }
.hs-sections .hs-faq__a > *:last-child { margin-bottom: 0; }

/* ---------- rich text section ---------- */
.hs-sections .hs-richtext .hs-rich { color: var(--fg-2); font-size: var(--fs-16); line-height: var(--lh-loose); }
.hs-sections .hs-richtext .hs-rich h2, .hs-sections .hs-richtext .hs-rich h3 { color: var(--heading-color); margin: var(--sp-8) 0 var(--sp-3); }
.hs-sections .hs-richtext .hs-rich p { margin: 0 0 var(--sp-4); }
.hs-sections .hs-richtext .hs-rich a { color: var(--accent-text); }
.hs-sections .hs-richtext .hs-rich ul, .hs-sections .hs-richtext .hs-rich ol { margin: 0 0 var(--sp-4) var(--sp-6); }
.hs-sections .hs-richtext .hs-rich li { margin: 0 0 var(--sp-2); }

/* Rich text with structure read from its HTML (hs_rich_text_parts()), on the
 * metrics of the old /over-ons/ rows (live, 11-10-2026): photo and text side
 * by side in a ~1050px column, Poppins 38 teal headings 20px above Lato 16/24
 * copy with 24px between paragraphs, pill buttons, three teal service tiles. */
/* Redesign 27-10-2026 (editorial). Was: photo and text 50/50 in a 1050px column,
 * Poppins 38/38 headings, 48px between rows — every row the same weight, so the
 * page read as one long zig-zag. Now on the full content column in twelve
 * tracks: the photo six of them, the text five with one track of air between,
 * at most 60 characters a line, the paragraph after each heading as a larger
 * lead, and more room between rows. Images keep their own proportions
 * (object-fit: contain under a height cap): the team photo and the e-waste
 * illustration are drawn PNGs with their own dots and would lose them to a crop. */
.hs-sections > .hs-section.hs-richtext--media { padding-block: clamp(var(--sp-10), 4.5vw, var(--sp-16)); }
.hs-sections .hs-richtext__split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); align-items: center; }
@media (min-width: 48em) {
	.hs-sections .hs-richtext__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-10); }
	.hs-sections .hs-richtext--media-right .hs-richtext__media { order: 2; }
}
@media (min-width: 62em) {
	.hs-sections .hs-richtext__split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-6); }
	.hs-sections .hs-richtext--media-left .hs-richtext__media { grid-column: 1 / 7; }
	.hs-sections .hs-richtext--media-left .hs-richtext__text { grid-column: 8 / -1; }
	.hs-sections .hs-richtext--media-right .hs-richtext__media { grid-column: 7 / -1; grid-row: 1; }
	.hs-sections .hs-richtext--media-right .hs-richtext__text { grid-column: 1 / 6; grid-row: 1; }
}
.hs-sections .hs-richtext__media img { display: block; float: none; width: 100%; height: auto; max-height: 37.5rem; margin: 0; border-radius: var(--r-xl); object-fit: contain; }
.hs-sections .hs-richtext__media p { margin: 0; }
.hs-sections .hs-richtext--media .hs-rich { max-width: 60ch; }
.hs-sections :is(.hs-richtext--media, .hs-richtext:has(.hs-rich__cards)) .hs-rich { color: var(--fg-2); line-height: 1.7; }
.hs-sections :is(.hs-richtext--media, .hs-richtext:has(.hs-rich__cards)) .hs-rich h2 { margin: 0 0 var(--sp-6); font-family: var(--font-display); font-size: clamp(1.875rem, 2.8vw, 2.625rem); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.015em; color: var(--heading-color); text-wrap: balance; }
.hs-sections :is(.hs-richtext--media, .hs-richtext:has(.hs-rich__cards)) .hs-rich p { margin: 0 0 var(--sp-5); text-wrap: pretty; }
/* The paragraph straight under a heading is the row's lead. */
.hs-sections :is(.hs-richtext--media, .hs-richtext:has(.hs-rich__cards)) .hs-rich h2 + p:not(.hs-rich__actions) { color: var(--fg-1); font-size: var(--fs-18); line-height: 1.6; }
.hs-sections .hs-richtext--media .hs-rich > :last-child { margin-bottom: 0; }

/* A paragraph of links only: buttons, the first filled, the next outlined. */
.hs-sections .hs-rich .hs-rich__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hs-sections .hs-richtext--media .hs-rich .hs-rich__actions { margin-top: var(--sp-8); }
.hs-sections .hs-rich .hs-rich__actions a { display: inline-flex; align-items: center; justify-content: center; padding: var(--sp-4) var(--sp-6); border: 2px solid var(--accent-fill); border-radius: var(--r-lg); background: var(--accent-fill); color: var(--fg-on-brand); font-family: var(--font-sans); font-size: var(--fs-16); font-weight: var(--fw-bold); line-height: 1; letter-spacing: normal; text-decoration: none; transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
/* Press feedback (polish pass 27-10-2026): a 1px push on every button here. */
.hs-sections .hs-rich .hs-rich__actions a:active { transform: translateY(1px); }
.hs-sections .hs-rich .hs-rich__actions a:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); color: var(--fg-on-brand); }
.hs-sections .hs-rich .hs-rich__actions a + a { border-color: color-mix(in srgb, var(--hs-teal) 40%, transparent); background: var(--bg-1); color: var(--accent-text); }
.hs-sections .hs-rich .hs-rich__actions a + a:hover { border-color: var(--accent); background: var(--hs-teal-50); color: var(--accent-text); }

/* A paragraph of linked images only: the review badges, 217px each, 20px apart. */
.hs-sections > .hs-section.hs-richtext:has(.hs-rich__logos) { padding-block: var(--sp-6); }
.hs-sections .hs-rich .hs-rich__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-5); margin: 0; }
.hs-sections .hs-rich .hs-rich__logos a { display: block; width: 217px; max-width: calc(50% - var(--sp-3)); border-radius: var(--r-xl); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.hs-sections .hs-rich .hs-rich__logos img { display: block; width: 100%; height: auto; }
@media (hover: hover) {
	.hs-sections .hs-rich .hs-rich__logos a:hover { transform: translateY(-3px); box-shadow: 0 14px 24px -16px rgba(1, 82, 97, .55); }
}

/* Trailing <h3> blocks: the services. Back to the old site's teal cards at the
 * client's request (Janyar, 27-10-2026, with the live screenshot as reference),
 * after an editorial version earlier the same day: title and intro centred, three
 * teal cards with white Poppins text in a 900px row, a large faded icon in each
 * card's lower right corner, a white button with a small icon at the bottom, and
 * a grey dot pattern behind the last card's top right corner.
 *
 * The icons are matched to a card by the link inside it (reparaties → wrench,
 * shop → recycle + screen, verkopen → tag + basket), never by position, so a
 * card with another link simply has none. The button is a pill, as in the
 * reference — an explicit exception (Janyar, 27-10-2026) to the 8px control
 * radius of 23-10-2026. Each icon has its own size, offset and turn
 * (--hs-card-icon-*), copied from the reference. The big corner icons are Font
 * Awesome Free 5.15.4 solid wrench, recycle and tag (icons CC BY 4.0,
 * https://fontawesome.com/license/free), as in the reference; the small button
 * icons stay the theme's Phosphor wrench, devices and basket, as in the reference too.
 *
 * Contrast: white on --hs-teal-aa is 4,51:1 (the old #008999 would be 4,17:1);
 * --accent-text on the white button 5,97:1. */
.hs-sections > .hs-section.hs-richtext:has(.hs-rich__cards) { padding-block: var(--sp-12); }
.hs-sections .hs-richtext:has(.hs-rich__cards) .hs-rich { max-width: 950px; margin-inline: auto; text-align: center; }
.hs-sections .hs-richtext:has(.hs-rich__cards) .hs-rich > h2 { margin-bottom: var(--sp-4); }
.hs-sections .hs-richtext:has(.hs-rich__cards) .hs-rich > h2 + p:not(.hs-rich__actions) { color: var(--fg-1); font-family: var(--font-display); font-size: var(--fs-16); line-height: 1.5; letter-spacing: normal; }
.hs-sections .hs-rich .hs-rich__cards { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); max-width: 820px; margin: var(--sp-10) auto 0; text-align: left; }
@media (min-width: 48em) {
	.hs-sections .hs-rich .hs-rich__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--sp-6), 5vw, var(--sp-16)); }
	/* The dot pattern: 4 × 3 grey dots behind the last card's top right corner. */
	.hs-sections .hs-rich .hs-rich__cards::before { content: ""; position: absolute; top: calc(var(--sp-3) * -1); right: calc(var(--sp-8) * -1); z-index: 0; width: 64px; height: 48px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48' fill='%23e3e7e9'%3E%3Ccircle cx='6' cy='6' r='6'/%3E%3Ccircle cx='23' cy='6' r='6'/%3E%3Ccircle cx='40' cy='6' r='6'/%3E%3Ccircle cx='57' cy='6' r='6'/%3E%3Ccircle cx='6' cy='24' r='6'/%3E%3Ccircle cx='23' cy='24' r='6'/%3E%3Ccircle cx='40' cy='24' r='6'/%3E%3Ccircle cx='57' cy='24' r='6'/%3E%3Ccircle cx='6' cy='42' r='6'/%3E%3Ccircle cx='23' cy='42' r='6'/%3E%3Ccircle cx='40' cy='42' r='6'/%3E%3Ccircle cx='57' cy='42' r='6'/%3E%3C/svg%3E") no-repeat center / contain; pointer-events: none; }
}
.hs-sections .hs-rich .hs-rich__card { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 10px; overflow: hidden; border-radius: var(--r-xl); background: var(--hs-teal-aa); color: var(--fg-on-brand); box-shadow: 0 12px 24px -16px rgba(1, 82, 97, .6); }
.hs-sections .hs-rich .hs-rich__card > * { position: relative; z-index: 1; }
@media (min-width: 48em) {
	.hs-sections .hs-rich .hs-rich__card { min-height: 265px; }
}
/* The large faded icon, cropped by the card's lower right corner. */
.hs-sections .hs-rich .hs-rich__card::after { content: ""; position: absolute; right: var(--hs-card-icon-x, -6px); bottom: var(--hs-card-icon-y, 4px); z-index: 0; width: var(--hs-card-icon-size, 84px); height: var(--hs-card-icon-size, 84px); background: var(--hs-teal-200); opacity: .9; transform: rotate(var(--hs-card-icon-rot, 0deg)); -webkit-mask: var(--hs-card-icon) no-repeat center / contain; mask: var(--hs-card-icon) no-repeat center / contain; pointer-events: none; }
.hs-sections .hs-rich .hs-rich__card:not(:has(a[href*="/reparaties"], a[href*="/shop"], a[href*="/verkopen"]))::after { content: none; }
.hs-sections .hs-rich .hs-rich__card:has(a[href*="/reparaties"]) { --hs-card-icon-x: -14px; --hs-card-icon-y: 10px; --hs-card-icon-size: 80px; --hs-card-icon-rot: -90deg; --hs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill-rule='evenodd'%3E%3Cpath d='M507.73 109.1c-2.24-9.03-13.54-12.09-20.12-5.51l-74.36 74.36-67.88-11.31-11.31-67.88 74.36-74.36c6.62-6.62 3.43-17.9-5.66-20.16-47.38-11.74-99.55.91-136.58 37.93-39.64 39.64-50.55 97.1-34.05 147.2L18.74 402.76c-24.99 24.99-24.99 65.51 0 90.5 24.99 24.99 65.51 24.99 90.5 0l213.21-213.21c50.12 16.71 107.47 5.68 147.37-34.22 37.07-37.07 49.7-89.32 37.91-136.73zM64 472c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z'/%3E%3C/svg%3E"); --hs-card-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M230.47,67.5a12,12,0,0,0-19.26-4.32L172.43,99l-12.68-2.72L157,83.57l35.79-38.78a12,12,0,0,0-4.32-19.26A76.07,76.07,0,0,0,88.41,121.64L30.92,174.18a4.68,4.68,0,0,0-.39.38,36,36,0,0,0,50.91,50.91l.38-.39,52.54-57.49A76.05,76.05,0,0,0,230.47,67.5ZM160,148a51.5,51.5,0,0,1-23.35-5.52,12,12,0,0,0-14.26,2.62L64.31,208.66a12,12,0,0,1-17-17l63.55-58.07a12,12,0,0,0,2.62-14.26A51.5,51.5,0,0,1,108,96a52.06,52.06,0,0,1,52-52h.89L135.17,71.87a12,12,0,0,0-2.91,10.65l5.66,26.35a12,12,0,0,0,9.21,9.21l26.35,5.66a12,12,0,0,0,10.65-2.91L212,95.12c0,.3,0,.59,0,.89A52.06,52.06,0,0,1,160,148Z'/%3E%3C/svg%3E"); }
.hs-sections .hs-rich .hs-rich__card:has(a[href*="/shop"]) { --hs-card-icon-x: -14px; --hs-card-icon-y: -12px; --hs-card-icon-size: 96px; --hs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill-rule='evenodd'%3E%3Cpath d='M184.561 261.903c3.232 13.997-12.123 24.635-24.068 17.168l-40.736-25.455-50.867 81.402C55.606 356.273 70.96 384 96.012 384H148c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12H96.115c-75.334 0-121.302-83.048-81.408-146.88l50.822-81.388-40.725-25.448c-12.081-7.547-8.966-25.961 4.879-29.158l110.237-25.45c8.611-1.988 17.201 3.381 19.189 11.99l25.452 110.237zm98.561-182.915l41.289 66.076-40.74 25.457c-12.051 7.528-9 25.953 4.879 29.158l110.237 25.45c8.672 1.999 17.215-3.438 19.189-11.99l25.45-110.237c3.197-13.844-11.99-24.719-24.068-17.168l-40.687 25.424-41.263-66.082c-37.521-60.033-125.209-60.171-162.816 0l-17.963 28.766c-3.51 5.62-1.8 13.021 3.82 16.533l33.919 21.195c5.62 3.512 13.024 1.803 16.536-3.817l17.961-28.743c12.712-20.341 41.973-19.676 54.257-.022zM497.288 301.12l-27.515-44.065c-3.511-5.623-10.916-7.334-16.538-3.821l-33.861 21.159c-5.62 3.512-7.33 10.915-3.818 16.536l27.564 44.112c13.257 21.211-2.057 48.96-27.136 48.96H320V336.02c0-14.213-17.242-21.383-27.313-11.313l-80 79.981c-6.249 6.248-6.249 16.379 0 22.627l80 79.989C302.689 517.308 320 510.3 320 495.989V448h95.88c75.274 0 121.335-82.997 81.408-146.88z'/%3E%3C/svg%3E"); --hs-card-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,72H212V64a28,28,0,0,0-28-28H40A28,28,0,0,0,12,64v88a28,28,0,0,0,28,28h96v12a28,28,0,0,0,28,28h60a28,28,0,0,0,28-28V100A28,28,0,0,0,224,72ZM40,156a4,4,0,0,1-4-4V64a4,4,0,0,1,4-4H184a4,4,0,0,1,4,4v8H164a28,28,0,0,0-28,28v56Zm188,36a4,4,0,0,1-4,4H164a4,4,0,0,1-4-4V100a4,4,0,0,1,4-4h60a4,4,0,0,1,4,4ZM124,208a12,12,0,0,1-12,12H88a12,12,0,0,1,0-24h24A12,12,0,0,1,124,208Zm88-84a12,12,0,0,1-12,12H188a12,12,0,0,1,0-24h12A12,12,0,0,1,212,124Z'/%3E%3C/svg%3E"); }
.hs-sections .hs-rich .hs-rich__card:has(a[href*="/verkopen"]) { --hs-card-icon-x: -46px; --hs-card-icon-y: 12px; --hs-card-icon-size: 110px; --hs-card-icon-rot: -45deg; --hs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill-rule='evenodd'%3E%3Cpath d='M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z'/%3E%3C/svg%3E"); --hs-card-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M140,128v40a12,12,0,0,1-24,0V128a12,12,0,0,1,24,0Zm28.06-1.19-4,40a12,12,0,0,0,10.75,13.13c.4,0,.81.06,1.2.06a12,12,0,0,0,11.93-10.81l4-40a12,12,0,0,0-23.88-2.38Zm-80.12,0a12,12,0,0,0-23.88,2.38l4,40A12,12,0,0,0,80,180c.39,0,.8,0,1.2-.06a12,12,0,0,0,10.75-13.13Zm156-37.22-15.07,113A20.06,20.06,0,0,1,209,220H47a20.06,20.06,0,0,1-19.82-17.36l-15.07-113A12,12,0,0,1,24,76H66.55L119,16.1a12,12,0,0,1,18.06,0L189.45,76H232a12,12,0,0,1,11.89,13.59ZM98.45,76h59.1L128,42.22Zm119.84,24H37.71l12.8,96h155Z'/%3E%3C/svg%3E"); }
.hs-sections .hs-richtext .hs-rich .hs-rich__card h3 { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: 1.625rem; font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: normal; color: var(--fg-on-brand); } /* 26px */
.hs-sections .hs-richtext .hs-rich .hs-rich__card p { margin: 0 0 var(--sp-4); color: var(--fg-on-brand); font-family: var(--font-display); font-size: var(--fs-14); line-height: 1.45; letter-spacing: normal; text-wrap: pretty; }
/* p.hs-rich__actions (0,5,1) outranks the (0,4,1) paragraph margins above, so the
 * button really sits on the card's bottom edge and the three line up. */
.hs-sections .hs-richtext .hs-rich .hs-rich__card p.hs-rich__actions { margin: auto 0 0; padding-top: var(--sp-2); }
.hs-sections .hs-rich .hs-rich__card .hs-rich__actions a { gap: var(--sp-2); padding: 7px 14px; border: 0; border-radius: var(--r-pill); background: var(--bg-1); color: var(--accent-text); font-family: var(--font-display); font-size: var(--fs-15); font-weight: var(--fw-bold); line-height: 1.3; box-shadow: 0 4px 10px -6px rgba(15, 23, 26, .35); }
.hs-sections .hs-rich .hs-rich__card .hs-rich__actions a::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--hs-card-btn-icon) no-repeat center / contain; mask: var(--hs-card-btn-icon) no-repeat center / contain; }
.hs-sections .hs-rich .hs-rich__card:not(:has(a[href*="/reparaties"], a[href*="/shop"], a[href*="/verkopen"])) .hs-rich__actions a::before { content: none; }
.hs-sections .hs-rich .hs-rich__card .hs-rich__actions a:hover { background: var(--hs-teal-50); color: var(--accent-press); box-shadow: 0 8px 16px -8px rgba(0, 56, 64, .55); }
@media (hover: hover) {
	.hs-sections .hs-rich .hs-rich__card .hs-rich__actions a:hover { transform: translateY(-1px); }
}
.hs-sections .hs-rich .hs-rich__card .hs-rich__actions a:active { transform: translateY(1px); box-shadow: 0 2px 6px -4px rgba(0, 56, 64, .5); }
.hs-sections .hs-rich .hs-rich__card .hs-rich__actions a:focus-visible { outline: 2px solid var(--focus-ring-on-dark); outline-offset: 2px; }

/* ---------- gallery section (winkelimpressie) ---------- */
/* Redesign 27-10-2026 (Janyar), photo-led. Was: the old Elementor gallery —
 * title and a full-width intro (~180 characters a line at 1440px), then six
 * equal square-cornered photos, the shop card squeezed beside the grid. Now:
 * title and intro side by side in one short row (5 + 6 of 12 tracks), the
 * mosaic straight under it across the full column with one featured photo as a
 * 2×2 block, and the visit details as a ruled strip under the photos. No tinted
 * panels: the photos carry the colour. Scoped under .hs-sections like every
 * other section so nothing here can reach the chrome. */
.hs-sections .hs-gallery__inner { display: grid; gap: clamp(var(--sp-6), 3vw, var(--sp-10)); }
.hs-sections .hs-gallery__head { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 62em) {
	.hs-sections .hs-gallery__head--split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-6); }
	.hs-sections .hs-gallery__head--split > * { grid-column: 1 / -1; }
	.hs-sections .hs-gallery__head--split > .hs-section__title { grid-column: 1 / 6; }
	.hs-sections .hs-gallery__head--split > .hs-section__intro { grid-column: 7 / -1; }
}
.hs-sections .hs-gallery .hs-section__title { font-size: clamp(var(--fs-28), 3vw, var(--fs-40)); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.hs-sections .hs-gallery .hs-section__intro { max-width: 68ch; margin: 0; color: var(--fg-2); font-size: var(--fs-16); line-height: 1.7; text-wrap: pretty; }

/* Two columns from the phone up, three from 62em. grid-auto-flow: dense lets the
 * small photos fill in around a featured block wherever it sits in the list. */
.hs-sections .hs-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48em) {
	.hs-sections .hs-gallery__grid { gap: var(--sp-3); }
}
@media (min-width: 62em) {
	.hs-sections .hs-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
}
.hs-sections .hs-gallery__item { min-width: 0; }
/* The featured photo takes a 2×2 block, so the grid reads as a composition
 * instead of six equal tiles. */
.hs-sections .hs-gallery__item--featured { grid-column: span 2; grid-row: span 2; }
/* In two columns an odd photo out would leave a hole at the end: it takes the
 * full row instead, as a wide crop. A featured block counts as four cells, so
 * the odd one out falls on an even count there. */
@media (max-width: 61.99em) {
	.hs-sections .hs-gallery__grid:has(> .hs-gallery__item--featured) > .hs-gallery__item:last-child:nth-child(even):not(.hs-gallery__item--featured),
	.hs-sections .hs-gallery__grid:not(:has(> .hs-gallery__item--featured)) > .hs-gallery__item:last-child:nth-child(odd) { grid-column: span 2; }
	.hs-sections .hs-gallery__grid:has(> .hs-gallery__item--featured) > .hs-gallery__item:last-child:nth-child(even):not(.hs-gallery__item--featured) .hs-gallery__img,
	.hs-sections .hs-gallery__grid:not(:has(> .hs-gallery__item--featured)) > .hs-gallery__item:last-child:nth-child(odd) .hs-gallery__img { aspect-ratio: 2 / 1; }
}

.hs-sections .hs-gallery__link { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--r-xl); background: var(--bg-2); }
.hs-sections .hs-gallery__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
/* aspect-ratio + object-fit keeps a mixed set of photo formats on one grid
 * without any of them stretching, and reserves the box before load (CLS). */
.hs-sections .hs-gallery__img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
/* The featured block is as tall as the two rows it spans: the link keeps the 4:3
 * box (it sizes the rows when nothing sits beside it, on a phone) and the photo
 * fills whatever the rows end up being. */
.hs-sections .hs-gallery__item--featured .hs-gallery__link { aspect-ratio: 4 / 3; }
.hs-sections .hs-gallery__item--featured .hs-gallery__img { position: absolute; inset: 0; aspect-ratio: auto; }
@media (hover: hover) {
	.hs-sections .hs-gallery__link:hover .hs-gallery__img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
	.hs-sections .hs-gallery__img { transition: none; }
	.hs-sections .hs-gallery__link:hover .hs-gallery__img { transform: none; }
}

/* The one gradient that earns its place: a scrim so white caption text stays
 * legible over an arbitrary photo. It is a readability device, not a brand
 * decoration, so it stays inline rather than becoming a token. Derived from
 * --hs-ink via color-mix instead of the literal rgba(15, 23, 26) it used to
 * repeat twice. */
.hs-sections .hs-gallery__caption { position: absolute; inset: auto 0 0 0; padding: var(--sp-6) var(--sp-3) var(--sp-2); font-size: var(--fs-14); color: var(--fg-on-brand); background: linear-gradient(to top, color-mix(in srgb, var(--hs-ink) 72%, transparent), color-mix(in srgb, var(--hs-ink) 0%, transparent)); }

/* --- visit strip under the photos (27-10-2026) ---
 * On a hairline, no panel: whether the shop is open now, the street as a teal
 * Poppins line, the week in two ruled columns with today in bold, the two
 * actions. Desktop: 4 + 5 + 3 of 12 tracks; tablet: address and actions on the
 * left, the hours beside them; phone: stacked. */
.hs-sections .hs-gallery__store { display: grid; gap: var(--sp-6); margin-top: var(--sp-4); padding-top: var(--sp-8); border-top: 1px solid var(--border-1); }
@media (min-width: 48em) {
	.hs-sections .hs-gallery__store { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-10); align-items: start; }
	.hs-sections .hs-gallery__hours { grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 62em) {
	.hs-sections .hs-gallery__store { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-6); }
	.hs-sections .hs-gallery__visit { grid-column: 1 / 5; }
	.hs-sections .hs-gallery__hours { grid-column: 5 / 10; grid-row: 1; }
	.hs-sections .hs-gallery__actions { grid-column: 10 / -1; flex-direction: column; align-items: stretch; }
}
.hs-sections .hs-gallery__visit { display: grid; gap: var(--sp-3); justify-items: start; }
.hs-sections .hs-gallery__status { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--fg-2); font-size: var(--fs-14); font-weight: var(--fw-bold); }
.hs-sections .hs-gallery__status.is-open { color: var(--hs-green-800); }
.hs-sections .hs-gallery__status-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--hs-ink-4); }
.hs-sections .hs-gallery__status.is-open .hs-gallery__status-dot { background: var(--hs-green); box-shadow: 0 0 0 4px var(--hs-green-100); }
.hs-sections .hs-gallery__address { display: grid; gap: var(--sp-1); margin: 0; color: var(--fg-2); line-height: var(--lh-base); }
.hs-sections .hs-gallery__address strong { color: var(--heading-color); font-family: var(--font-display); font-size: clamp(var(--fs-24), 2.2vw, var(--fs-28)); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: -0.01em; }
/* The week in two columns from 30em (Ma–Do | Vr–Zo), one below that. */
.hs-sections .hs-gallery__hours { display: grid; margin: 0; column-gap: var(--sp-8); font-size: var(--fs-15); }
@media (min-width: 30em) {
	.hs-sections .hs-gallery__hours { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; }
}
.hs-sections .hs-gallery__hours-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-2); color: var(--fg-2); }
.hs-sections .hs-gallery__hours-row.is-today { color: var(--fg-1); font-weight: var(--fw-bold); }
.hs-sections .hs-gallery__hours dt, .hs-sections .hs-gallery__hours dd { margin: 0; }
.hs-sections .hs-gallery__hours dd { font-variant-numeric: tabular-nums; }
.hs-sections .hs-gallery__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hs-sections .hs-gallery__actions .hs-btn--ghost:hover { border-color: var(--accent); }
.hs-sections .hs-gallery__actions .hs-btn:active { transform: translateY(1px); }

/* --- lightbox (native <dialog>; JS only opens it) --- */
.hs-sections .hs-gallery__lightbox { width: min(96vw, 1100px); max-width: 96vw; max-height: 92vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.hs-sections .hs-gallery__lightbox::backdrop { background: rgba(15, 23, 26, .82); }
.hs-sections .hs-gallery__lightbox-inner { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); }
.hs-sections .hs-gallery__figure { margin: 0; grid-column: 2; }
.hs-sections .hs-gallery__figure img { display: block; width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--r-md); background: var(--bg-2); }
.hs-sections .hs-gallery__figcaption { margin-top: var(--sp-3); text-align: center; font-size: var(--fs-14); color: var(--fg-on-brand); }

/* Controls: 44px targets, comfortably past the 24px minimum (WCAG 2.5.8). */
.hs-sections .hs-gallery__close,
.hs-sections .hs-gallery__nav { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); color: var(--fg-1); cursor: pointer; }
.hs-sections .hs-gallery__close:hover,
.hs-sections .hs-gallery__nav:hover { background: #fff; }
.hs-sections .hs-gallery__close:focus-visible,
.hs-sections .hs-gallery__nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hs-sections .hs-gallery__close { position: absolute; top: calc(var(--sp-3) * -1); right: calc(var(--sp-3) * -1); z-index: 1; }
.hs-sections .hs-gallery__nav .hs-icon { width: 1.25rem; height: 1.25rem; }
.hs-sections .hs-gallery__nav--prev { grid-column: 1; transform: rotate(180deg); }
.hs-sections .hs-gallery__nav--next { grid-column: 3; }

@media (max-width: 47.99em) {
	/* On a phone the arrows would crowd the photo out; swipe-free but tappable
	 * side by side under it instead. */
	.hs-sections .hs-gallery__lightbox-inner { grid-template-columns: 1fr; }
	.hs-sections .hs-gallery__figure { grid-column: 1; }
	.hs-sections .hs-gallery__nav--prev { grid-column: 1; justify-self: start; transform: rotate(180deg); }
	.hs-sections .hs-gallery__nav--next { grid-column: 1; justify-self: end; margin-top: calc((44px + var(--sp-2)) * -1); }
	.hs-sections .hs-gallery__close { top: calc(var(--sp-2) * -1); right: 0; }
}

/* ---------- page-intro section (generic page opener) ---------- */
/* Plain by design: these are pages people read, not landing pages. */
/* Redesign 27-10-2026 (editorial). Was the old /over-ons/ opener (live,
 * 11-10-2026): a 400px band with everything centred — the quote in Poppins 70/75
 * across 85% of the column, then a centred Lato 16/24 lead that ran the full
 * 1400px (~190 characters a line). Now left-aligned on the content edge like
 * every section under it: the title across ten of twelve columns, the lead under
 * it in the right half on a hairline, at a reading measure. */
.hs-sections .hs-pageintro__inner { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-8); }
.hs-sections .hs-pageintro__eyebrow { margin: 0; }
.hs-sections > .hs-section.hs-pageintro { padding-block: clamp(var(--sp-10), 6vw, 5.5rem) clamp(var(--sp-6), 3vw, var(--sp-10)); }
.hs-sections .hs-pageintro__title { max-width: 20ch; margin: 0; font-family: var(--font-display); font-size: clamp(var(--fs-32), 4.6vw, 4.5rem); font-weight: var(--fw-bold); line-height: 1.05; letter-spacing: -0.02em; color: var(--heading-color); text-wrap: balance; }
/* The opening quotation mark hangs in the margin (see page-intro.php) — only
 * where the viewport leaves a margin past the 1448px column for it to hang in;
 * narrower, it would touch the screen edge. */
@media (min-width: 96em) {
	.hs-sections .hs-pageintro__title--quote { text-indent: -0.38em; }
}
/* A title with no lead (/contact/, 28-10-2026) is a plain page heading, not a
 * statement: 48px at most instead of 72, across the full width (Janyar: one
 * line, not two). */
.hs-sections .hs-pageintro__inner:not(.hs-pageintro__inner--lead) .hs-pageintro__title { max-width: none; font-size: clamp(var(--fs-32), 3.4vw, 3rem); }
.hs-sections .hs-pageintro__lead { max-width: 56ch; margin: 0; padding-top: var(--sp-6); border-top: 1px solid var(--border-1); color: var(--fg-2); font-size: var(--fs-18); line-height: 1.65; text-wrap: pretty; }
@media (min-width: 62em) {
	.hs-sections .hs-pageintro__inner--lead { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-6); }
	.hs-sections .hs-pageintro__inner--lead > * { grid-column: 1 / -1; }
	.hs-sections .hs-pageintro__inner--lead > .hs-pageintro__lead { grid-column: 7 / -1; }
}

/* ---------- phone: the hero keeps its photos (23-10-2026) ----------
 * The old site dropped both photos below 768px; the client wants the two women
 * back on phones and tablets. So the stacked layout from 860px down carries on
 * (each half full width, the photo standing on its bottom edge beside the text)
 * with tighter numbers: a 34% photo column, 16px gutters, the title at 26px.
 * Without a photo the half is the plain colour block, left-aligned. */
@media (max-width: 767px) {
	/* Bigger photos (client, 23-10-2026): 44% of the width, the text keeps 56%. */
	.hs-home-hero .hs-home-hero__path { min-height: 270px; padding: var(--sp-6) var(--sp-4); }
	.hs-home-hero .hs-home-hero__path--repair.hs-home-hero__path--has-media { padding-right: 42%; }
	.hs-home-hero .hs-home-hero__path--buy.hs-home-hero__path--has-media { padding-left: 42%; }
	.hs-home-hero__path--repair .hs-home-hero__media,
	.hs-home-hero__path--buy .hs-home-hero__media { width: 44%; }
	.hs-home-hero__media img { max-height: 270px; }
	.hs-home-hero .hs-home-hero__path:not(.hs-home-hero__path--has-media) { align-items: flex-start; text-align: left; }
	.hs-home-hero__title { font-size: 1.625rem; line-height: 1.1; }
	.hs-sections .hs-home-hero__usps li { font-size: var(--fs-15); white-space: normal; }
}

/* ---------- phone: the rest of the old homepage (live, 375px) ---------- */
/* Section titles drop to Poppins 22-24 and centre; the welcome block and the
 * trade-in band lose their photos; a product card stacks: a 150px photo on
 * top, then the badge, the name in Lato 20/26 bold, the price and the button. */
@media (max-width: 767px) {
	.hs-sections .hs-home-repair__head .hs-section__title,
	.hs-sections .hs-home-tradein .hs-section__title { font-size: var(--fs-24); line-height: 1; }
	.hs-sections :is(.hs-home-store, .hs-home-products, .hs-home-reviews) .hs-section__title { font-size: 1.375rem; line-height: 1; } /* 22px */
	.hs-sections :is(.hs-home-store, .hs-home-tradein) .hs-section__title { text-align: center; }
	/* Since 20-10-2026 both keep their pictures on a phone: the shop photos are
	 * the proof there is a real shop, and the trade-in phones say what the band
	 * is about before a word is read. Smaller, and under the copy. */
	.hs-home-store__media { order: 2; }
	.hs-home-store__media--duo { max-width: 420px; margin: var(--sp-2) auto 0; }
	.hs-home-tradein__media img { max-height: 190px; }
	.hs-sections .hs-home-tradein .hs-section__title { max-width: none; }
	.hs-home-tradein__intro { font-size: var(--fs-16); }
	.hs-home-store__actions { flex-direction: column; justify-content: center; }
	.hs-sections .hs-home-store .hs-section__intro { text-align: left; font-size: var(--fs-16); }
}

/* ---------- phone: contact, 404, section-built pages (live, 375px) ---------- */
@media (max-width: 767px) {
	.hs-sections .hs-cmethods__title { font-size: var(--fs-28); line-height: 1.15; } /* was 32/40 for the old <h1>; 27-10-2026 */
	.hs-sections .hs-cmethods__grid { gap: var(--sp-4); }
	.hs-sections .hs-cmethods__head { margin-bottom: var(--sp-5); }
	.hs-sections .hs-contact .hs-section__title { font-size: var(--fs-24); text-align: center; }
	.hs-sections .hs-contact__map { height: 300px; }
	.hs-sections .hs-404__title { font-size: var(--fs-18); line-height: 1; color: var(--heading-color-sm); } /* 18px: the AA-safe teal */
	.hs-sections .hs-404__head { margin-bottom: var(--sp-8); }
	.hs-sections :is(.hs-richtext--media, .hs-richtext:has(.hs-rich__cards)) .hs-rich h2 { font-size: 1.875rem; } /* 30px */
	.hs-sections .hs-richtext .hs-rich .hs-rich__card h3 { font-size: 1.5625rem; } /* 25px */
	/* The review badges: stacked at 318px they took ~900px of a phone screen. Now
	 * one swipeable row (27-10-2026), the next badge peeking in as the cue. */
	.hs-sections .hs-richtext .hs-rich p.hs-rich__logos { flex-wrap: nowrap; justify-content: flex-start; gap: var(--sp-3); margin-inline: calc(var(--hs-gutter) * -1); padding: var(--sp-1) var(--hs-gutter) var(--sp-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hs-gutter); scrollbar-width: none; }
	.hs-sections .hs-rich .hs-rich__logos::-webkit-scrollbar { display: none; }
	.hs-sections .hs-rich .hs-rich__logos a { flex: 0 0 200px; width: 200px; max-width: none; scroll-snap-align: start; }
	.hs-sections .hs-pageintro__title { max-width: none; font-size: 2rem; line-height: 1.12; } /* 32px (redesign 27-10-2026; was 30/40) */
	.hs-sections .hs-pageintro__lead,
	.hs-sections .hs-gallery .hs-section__intro { font-size: var(--fs-16); line-height: 1.7; }
}

/* ---------- phone: the trade-in band, redesigned (23-10-2026, round 2) ----------
 * The picture leads: the phones centred at the top, standing in the round
 * arrow (the band's motif, here large and centred behind them, so the arrow
 * reads as "ruil in" around the devices). Under it the title, the text and a
 * full-width button on one left edge. No white glow, no motif tucked in a
 * corner. Last in the file so it wins over the phone rules above. */
@media (max-width: 767px) {
	.hs-sections > .hs-section.hs-section--orange.hs-home-tradein { padding-top: var(--sp-8); padding-bottom: var(--sp-10); }
	.hs-sections .hs-section--orange.hs-home-tradein::before { display: none; }
	.hs-home-tradein__inner { min-height: 0; gap: var(--sp-6); }
	.hs-home-tradein__media { order: -1; grid-row: auto; position: relative; justify-content: center; margin: 0; padding-top: var(--sp-4); }
	.hs-section--orange .hs-home-tradein__media::before {
		display: block;
		left: 50%;
		top: 0;
		bottom: auto;
		width: min(300px, 82%);
		aspect-ratio: 640 / 560;
		border-radius: 0;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 560' fill='none' stroke='white' stroke-width='34' stroke-linecap='round' stroke-linejoin='round' opacity='.28'%3E%3Cpath d='M175 545A270 270 0 0 1 60 320' stroke-dasharray='34 58'/%3E%3Cpath d='M60 320A270 270 0 0 1 600 320'/%3E%3Cpath d='M532 252L600 320L668 252'/%3E%3C/svg%3E") no-repeat center / contain;
		transform: translateX(-50%);
	}
	.hs-home-tradein__media img { max-height: 220px; filter: drop-shadow(0 12px 18px rgba(15, 23, 26, .2)); }
	.hs-sections .hs-section--orange.hs-home-tradein .hs-section__title { max-width: 18ch; text-align: left; font-size: 1.625rem; line-height: 1.15; }
	.hs-sections .hs-section--orange.hs-home-tradein .hs-home-tradein__intro { margin: var(--sp-3) 0 var(--sp-6); font-size: var(--fs-15); line-height: 1.6; }
	.hs-home-tradein__body .hs-btn { width: 100%; }
}