/*
 * Reparatiepagina — /reparaties/… (template-reparatie.php).
 *
 * Loaded only on the Reparatiepagina template (see inc/enqueue.php). Everything
 * is scoped under .hs-reparatie so it can never reach global chrome (CLAUDE.md
 * CSS rules). Two shared components are styled here because nothing else on
 * this template loads them: `.hs-rich` (rich text) and `.hs-faq`
 * (hs_render_faqs()) — both scoped under .hs-reparatie too.
 *
 * The numbers are the OLD site's, measured with getComputedStyle on the
 * Elementor copy (holysmartphone-back-up.local) at 1720px and 375px on
 * 11-10-2026: the overview template "Reparatie pagina template Tom" and the
 * model templates (iPhone/Samsung/iPad/consoles/e-readers). The one deliberate
 * departure everywhere is contrast: the old white-on-orange (2,30:1) and the
 * old white-on-#008999 hero (4,17:1) become dark-on-orange (6,66:1) and white
 * on --hs-teal-aa, the same steps the rest of the site already took.
 *
 * Layouts: .hs-reparatie--hub / --overview / --model (see the template).
 */

/* ---------- Shared rhythm ---------- */
/* Old sections: a 1400px column (our .hs-container: 1448 − 2×24), 64px top and
 * bottom. Section titles Poppins 700, teal: 32px on overview pages, 26px on
 * model pages, 22px on a phone. */
.hs-reparatie > .hs-section { --hs-section-pad-y: var(--sp-16); }
.hs-reparatie .hs-section__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-32); line-height: 1; letter-spacing: normal; color: var(--heading-color); margin: 0 0 var(--sp-4); }
.hs-reparatie--model .hs-section__title { font-size: 1.625rem; } /* 26px, the model templates */

/* Mint and orange bands. components.css only knows --alt/--cream/--brand. */
.hs-reparatie .hs-section--mint { background: var(--hs-mint); }
.hs-reparatie .hs-section--orange { background: var(--hs-orange); color: var(--fg-1); }

/* No hairlines between bands: the old pages ran their white sections into
 * each other and separated them by spacing alone. */

/* ---------- Buttons on this template ----------
 * Old: 48px tall, 16px Lato 700, 8px corners; the outline variant a 3px
 * border. Orange carries dark text here (--cta-2-fg), see the header. */
.hs-reparatie .hs-btn--lg { padding: var(--sp-4); border-radius: var(--r-lg); }
.hs-reparatie .hs-btn--outline { background: transparent; color: var(--accent-text); border: 3px solid currentColor; padding-block: calc(var(--sp-4) - 3px); }
.hs-reparatie .hs-btn--outline:hover { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--fg-on-brand); }
.hs-reparatie .hs-btn .hs-icon { width: 16px; height: 16px; }
.hs-rep-cta { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-8); }
.hs-rep-cta__up { display: inline-flex; transform: rotate(180deg); }

/* ---------- Hub ---------- */
/* Old: the page opened 64px under the header with a centred 32px teal h1 and
 * the wizard 20px below it. */
.hs-reparatie > .hs-rep-wizard--hub { padding-top: var(--sp-16); }
.hs-rep-hub__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-32); line-height: 1; color: var(--heading-color); text-align: center; margin: 0 0 var(--sp-5); }
.hs-reparatie--hub .hs-rep-wizard__embed { margin-top: 0; }

/* ---------- Hero ----------
 * Old: full-bleed teal, 500px tall; a centred row of the device photo (258 ×
 * 200, 10px corners) and a 602px text column, 32px apart. Text column: the
 * WebwinkelKeur mark (100 × 38), the h1 in white Poppins 700 (55px overview,
 * 44px model, line-height 1), the sentence in Lato 21px/24px (18px on model
 * pages), then the two buttons — 32px between each of them, the buttons 64px
 * under the sentence. Teal is --hs-teal-aa instead of the old #008999 so the
 * white text passes 4,5:1. (0,3,0) to beat the page-edge rule in components.css.
 */
.hs-reparatie > .hs-section.hs-rep-hero { display: flex; align-items: center; min-height: 500px; padding: var(--sp-12) var(--hs-gutter); background: var(--hs-teal-aa); color: var(--fg-on-brand); --focus-ring: var(--focus-ring-on-dark); }
.hs-rep-hero__inner { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; gap: var(--sp-8); }
.hs-rep-hero__media { flex: 0 0 258px; display: flex; justify-content: center; }
.hs-rep-hero__img { display: block; width: auto; max-width: 258px; height: auto; max-height: 200px; object-fit: contain; border-radius: var(--r-lg); }
.hs-rep-hero__text { flex: 0 1 602px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); padding-right: var(--sp-4); }
.hs-rep-hero__keur { display: block; width: 100px; height: auto; }
.hs-reparatie .hs-rep-hero__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 3.4375rem; line-height: 1; letter-spacing: normal; color: var(--fg-on-brand); margin: 0; }
.hs-reparatie--model .hs-rep-hero__title { font-size: var(--fs-44); }
.hs-reparatie .hs-rep-hero__lead { font-family: var(--font-sans); font-size: 1.3125rem; line-height: 1.5rem; letter-spacing: .5px; color: var(--fg-on-brand); margin: 0; max-width: none; }
.hs-reparatie--model .hs-rep-hero__lead { font-size: var(--fs-18); }
.hs-reparatie .hs-rep-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-8); }
.hs-reparatie .hs-rep-hero .hs-btn--ghost { background: transparent; color: var(--fg-on-brand); border: 3px solid var(--fg-on-brand); padding-block: calc(var(--sp-4) - 3px); }
.hs-reparatie .hs-rep-hero .hs-btn--ghost:hover { background: var(--fg-on-brand); color: var(--accent-text); }

/* ---------- Orange strip (model pages) ----------
 * Old: 64px tall, four points evenly spread, Poppins 18px/24px 600 with a 16px
 * icon. White on orange was 2,30:1; dark text is 6,66:1. */
/* Model pages: wizard (960px) with an aside (360px, 40px apart) holding the shop
 * photo and the mint "Waarom kiezen" card — live, measured 11-10-2026. */
.hs-rep-wizard__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: var(--sp-10); align-items: start; }
@media (min-width: 1025px) {
	/* Live: main column x=170 w=960, aside x=1170 w=360 at a 1720px window. */
	.hs-rep-wizard__grid { grid-template-columns: minmax(0, 960px) 360px; justify-content: start; padding-left: calc(var(--hs-gutter) + var(--hs-content-inset)); }
}
.hs-rep-wizard__main { min-width: 0; }
.hs-rep-wizard__aside { display: flex; flex-direction: column; gap: var(--sp-5); }
.hs-rep-wizard__photo { display: block; width: 100%; height: auto; border-radius: var(--r-xl); }
.hs-rep-wizard__why { padding: var(--sp-5); border-radius: var(--r-xl); background: var(--hs-mint); }
.hs-rep-wizard__why-title { margin: 0 0 var(--sp-4); font-family: var(--font-display); font-size: 26px; font-weight: var(--fw-bold); line-height: 1; color: var(--heading-color); }
.hs-rep-wizard__why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.hs-rep-wizard__why-list li { display: flex; align-items: flex-start; gap: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-copy); color: var(--accent-text); }
.hs-rep-wizard__why-list .hs-icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 4px; }

/* ---------- Wizard ---------- */
.hs-rep-wizard__embed { margin-top: var(--sp-6); }

/* On phones the RepairPlugin's script puts .repair-cont-nopad-nomargin on every
 * ancestor of the wizard, zeroing their padding so the wizard runs edge to edge.
 * That also pulled this section's title against the screen edge; give the title
 * its own gutter back. */
.hs-rep-wizard .repair-cont-nopad-nomargin > .hs-section__title,
.hs-rep-wizard .repair-cont-nopad-nomargin > .hs-rep-hub__title { padding-inline: var(--hs-gutter); }

/* ---------- Rich text ---------- */
/* Old body copy: Lato 16px/24px, .5px tracking, #252525 (18px on model pages);
 * subheads in teal Poppins 700 — h2 38px, h3 30px on overview pages, 26px on
 * model pages. */
.hs-reparatie .hs-rich { color: var(--fg-1); font-size: var(--fs-16); line-height: 1.5rem; letter-spacing: .5px; }
.hs-reparatie--model .hs-rich { font-size: var(--fs-18); }
.hs-reparatie .hs-rich h2,
.hs-reparatie .hs-rich h3 { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--heading-color); letter-spacing: .5px; margin: var(--sp-6) 0 var(--sp-4); }
.hs-reparatie .hs-rich h2 { font-size: var(--fs-38); line-height: 1.2; }
.hs-reparatie .hs-rich h3 { font-size: 1.875rem; line-height: 1.2; }
.hs-reparatie--model .hs-rich h2,
.hs-reparatie--model .hs-rich h3 { font-size: 1.625rem; }
.hs-reparatie .hs-rich p { margin: 0 0 var(--sp-6); color: var(--fg-1); }
.hs-reparatie .hs-rich ul,
.hs-reparatie .hs-rich ol { margin: 0 0 var(--sp-6); padding-left: var(--sp-6); }
.hs-reparatie .hs-rich li { margin: 0; }
/* The editor sometimes wraps a list in an invisible outer list item
 * (<li style="list-style-type:none"><ul>…). Flatten it so every list in the
 * body looks the same; the content itself is untouched. */
.hs-reparatie .hs-rich li[style*="list-style-type: none"] { margin: 0; }
.hs-reparatie .hs-rich li[style*="list-style-type: none"] > ul { margin: 0; padding-left: 0; list-style-type: disc; }
.hs-reparatie .hs-rich a { color: var(--accent-text); text-decoration: underline; }
.hs-reparatie .hs-rich img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.hs-reparatie .hs-rich > *:first-child { margin-top: 0; }
.hs-reparatie .hs-rich > *:last-child { margin-bottom: 0; }
.hs-reparatie .hs-rich + .hs-section__title { margin-top: var(--sp-10); }

/* ---------- "Lees meer" fold (overview pages) ----------
 * Old: 64px above, then the block cut off 156px below its top edge with the
 * text fading out, and a centred "Lees meer ▾" in Montserrat-weight 600, 20px,
 * #015261 right under it. Here: same cut, Poppins (the site's display face),
 * --hs-teal-800. The checkbox sits on top of nothing (visually hidden, still
 * focusable); its focus ring is drawn on the label. */
.hs-reparatie > .hs-section.hs-rep-more { padding-bottom: 0; }
.hs-rep-more .hs-container { position: relative; }
.hs-rep-more__toggle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hs-rep-more__content { max-height: 156px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); mask-image: linear-gradient(to bottom, #000 45%, transparent); }
.hs-rep-more__toggle:checked ~ .hs-rep-more__content,
.hs-rep-more__content:focus-within { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.hs-rep-more__btn { display: flex; justify-content: center; align-items: center; gap: var(--sp-1); width: max-content; margin: 0 auto; min-height: 30px; padding: 0 var(--sp-2); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-20); line-height: 30px; color: var(--hs-teal-800); border-radius: var(--r-md); cursor: pointer; }
.hs-rep-more__btn::after { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; }
.hs-rep-more__toggle:checked ~ .hs-rep-more__btn::after { transform: rotate(180deg); }
.hs-rep-more__toggle:focus-visible ~ .hs-rep-more__btn { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.hs-rep-more__close,
.hs-rep-more__toggle:checked ~ .hs-rep-more__btn .hs-rep-more__open { display: none; }
.hs-rep-more__toggle:checked ~ .hs-rep-more__btn .hs-rep-more__close { display: inline; }
.hs-rep-more__btn:hover { text-decoration: underline; }

/* ---------- Promises beside the shop photo (overview pages) ----------
 * Old: a 1120px row, centred, 40px above and below; the photo (416px wide,
 * 10px corners) centred in the left half, the 32px title and a list of teal
 * Poppins 18px/24px 600 lines with a 16px check in the right half. */
.hs-reparatie > .hs-section.hs-rep-why { padding-block: var(--sp-10); }
.hs-rep-why__inner { max-width: calc(1120px + 2 * var(--hs-gutter)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); align-items: center; }
.hs-rep-why__inner > * { padding: var(--sp-3); }
.hs-rep-why__inner--no-media { grid-template-columns: minmax(0, 1fr); }
.hs-rep-why__media { display: flex; justify-content: center; }
.hs-rep-why__img { display: block; width: 100%; max-width: 416px; height: auto; aspect-ratio: 416 / 291; object-fit: cover; border-radius: var(--r-lg); }
.hs-reparatie .hs-rep-why .hs-section__title { line-height: 1; }
.hs-rep-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.hs-rep-checks li { display: flex; align-items: flex-start; gap: var(--sp-2); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-18); line-height: 1.5rem; letter-spacing: .5px; color: var(--accent-text); }
.hs-rep-checks .hs-icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 4px; color: var(--accent-text); }

/* ---------- Split band: text left, photo right (insurance) ----------
 * Old: two 684px columns 32px apart; the text vertically centred, the photo
 * 470px tall with 8px corners. */
.hs-rep-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); align-items: center; }
.hs-rep-split--no-media { grid-template-columns: minmax(0, 684px); }
.hs-rep-insurance__img { display: block; width: 100%; height: 470px; object-fit: cover; border-radius: var(--r-lg); }
.hs-rep-insurance .hs-rich ol { padding-left: var(--sp-8); }

/* ---------- Orange trade-in band ----------
 * Old: 64px above, nothing below — the 410px photo stands on the bottom edge;
 * text in a 684px column with 64px under it; a teal 48px button with 3px
 * corners. Everything dark on the orange (white was 2,30:1). */
.hs-reparatie > .hs-section.hs-rep-tradein { padding-bottom: 0; }
.hs-rep-tradein__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-8); }
.hs-rep-tradein__text { flex: 0 1 684px; padding-bottom: var(--sp-16); }
.hs-rep-tradein__inner--no-media .hs-rep-tradein__text { padding-bottom: var(--sp-16); }
.hs-reparatie .hs-rep-tradein .hs-section__title { font-size: var(--fs-32); color: var(--fg-1); }
.hs-rep-tradein__text p { margin: 0; font-size: var(--fs-16); line-height: 1.5rem; letter-spacing: .5px; color: var(--fg-1); }
.hs-rep-tradein__media { flex: 0 0 410px; align-self: flex-end; line-height: 0; }
.hs-rep-tradein__img { display: block; width: 410px; height: 410px; object-fit: contain; }
.hs-reparatie .hs-rep-tradein .hs-btn--primary { border-radius: var(--r-lg); box-shadow: none; }
.hs-reparatie .hs-rep-tradein .hs-btn--outline { color: var(--fg-1); --focus-ring: var(--focus-ring-on-light); }
.hs-reparatie .hs-rep-tradein .hs-btn--outline:hover { background: var(--fg-1); border-color: var(--fg-1); color: var(--fg-on-brand); }
.hs-reparatie .hs-section--orange { --focus-ring: var(--focus-ring-on-light); }

/* ---------- FAQ ---------- */
/* Shared base (hs_render_faqs(): <details>, zero JS). */
.hs-reparatie .hs-faq__list { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.hs-reparatie .hs-faq__item { overflow: hidden; }
.hs-reparatie .hs-faq__q { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--sp-4); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-18); line-height: 1.5rem; color: var(--accent-text); }
.hs-reparatie .hs-faq__q::-webkit-details-marker { display: none; }
.hs-reparatie .hs-faq__a { color: var(--fg-1); font-size: var(--fs-16); line-height: 1.5rem; letter-spacing: .5px; }
.hs-reparatie .hs-faq__a p { margin: 0 0 var(--sp-2); }
.hs-reparatie .hs-faq__a > *:last-child { margin-bottom: 0; }

/* Overview: centred title, no boxes, a chevron left of the question. 10px
 * around the question, 16px between items. The old open-state orange was
 * 2,89:1 on white (WCAG 1.4.11 asks 3:1 for a state indicator), so the open
 * chevron is dark instead. */
.hs-reparatie .hs-faq--plain .hs-section__title { text-align: center; }
.hs-reparatie .hs-faq--plain .hs-faq__q { padding: var(--sp-2) 10px; }
.hs-reparatie .hs-faq--plain .hs-faq__q::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin: 0 3px; border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-base) var(--ease-standard); }
.hs-reparatie .hs-faq--plain .hs-faq__item[open] .hs-faq__q::before { border-color: var(--fg-1); transform: translateY(2px) rotate(-135deg); }
.hs-reparatie .hs-faq--plain .hs-faq__a { padding: 10px; }

/* Model: mint boxes with a 1px line and 8px corners, 16px padding, a +/− on
 * the right (dark: the old orange "−" was 2,55:1 on mint). */
.hs-rep-faq__inner { display: grid; grid-template-columns: minmax(0, 853fr) minmax(0, 487fr); gap: var(--sp-8); align-items: start; }
.hs-reparatie .hs-faq--boxed .hs-faq__item { background: var(--hs-mint); border: 1px solid var(--border-1); border-radius: var(--r-lg); }
.hs-reparatie .hs-faq--boxed .hs-faq__q { justify-content: space-between; padding: var(--sp-4); }
.hs-reparatie .hs-faq--boxed .hs-faq__q::after { content: "+"; flex: 0 0 auto; font-family: var(--font-sans); font-size: var(--fs-20); line-height: 1; color: var(--fg-1); }
.hs-reparatie .hs-faq--boxed .hs-faq__item[open] .hs-faq__q::after { content: "\2212"; }
.hs-reparatie .hs-faq--boxed .hs-faq__a { padding: 0 var(--sp-3) var(--sp-4); }
.hs-rep-faq__aside { padding-top: 10px; }
.hs-rep-faq__aside-title { margin: 0 0 var(--sp-5); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.625rem; line-height: 1; color: var(--fg-1); }
.hs-reparatie .hs-rep-faq__aside .hs-btn { border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-4); }

/* ---------- Internal-link lists (down / sideways / up) ----------
 * Plain links in columns, Lato 16px/24px in --hs-teal-800, the way the old
 * model pages listed the family ("E-readers die wij ook repareren"). */
.hs-rep-links__grid { list-style: disc; margin: 0; padding-left: var(--sp-5); columns: 4 220px; column-gap: var(--sp-8); }
.hs-rep-links__grid li { break-inside: avoid; margin: 0; color: var(--hs-teal-800); }
.hs-rep-links__item { font-size: var(--fs-16); line-height: 1.5rem; letter-spacing: .5px; color: var(--hs-teal-800); text-decoration: none; }
.hs-rep-links__item:hover { text-decoration: underline; }

/* Up-links: back to the parent and to the hub. */
.hs-rep-links__up { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-6); }
.hs-reparatie > .hs-section.hs-rep-links--nav-only { padding: var(--sp-6) 0; }
.hs-rep-links--nav-only .hs-rep-links__up { margin-top: 0; }
.hs-rep-links__up-link { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--accent-text); font-weight: var(--fw-bold); font-size: var(--fs-14); text-decoration: underline; }
.hs-rep-links__up-link::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg); }
.hs-rep-links__up-link:hover { color: var(--fg-1); }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.hs-rep-faq__inner { grid-template-columns: minmax(0, 1fr); }
	.hs-rep-tradein__media { flex-basis: 300px; }
	.hs-rep-tradein__img { width: 300px; height: 300px; }
	.hs-reparatie .hs-rep-hero__title { font-size: var(--fs-40); }
}

/* ---------- Phone ----------
 * Old at 375px: hero 48px/16px padding, no photo, h1 24px, sentence 16px/24px,
 * both buttons full width 20px apart; section titles 22px; bands 32px top and
 * bottom; the strip one point per line (44px each); photos under the text,
 * the trade-in photo hidden. */
@media (max-width: 767px) {
	.hs-reparatie > .hs-section { --hs-section-pad-y: var(--sp-8); }
	.hs-reparatie .hs-section__title,
	.hs-reparatie--model .hs-section__title,
	.hs-rep-hub__title,
	.hs-reparatie .hs-rep-tradein .hs-section__title { font-size: 1.375rem; line-height: 1; }
	.hs-rep-hub__title { font-size: var(--fs-24); }
	.hs-reparatie > .hs-rep-wizard--hub { padding-top: var(--sp-8); }

	.hs-reparatie > .hs-section.hs-rep-hero { display: block; min-height: 0; padding: var(--sp-12) var(--hs-gutter); }
	.hs-rep-hero__inner { display: block; min-height: 0; }
	.hs-rep-hero__media { display: none; }
	.hs-rep-hero__text { padding-right: 0; }
	.hs-reparatie .hs-rep-hero__title,
	.hs-reparatie--model .hs-rep-hero__title { font-size: var(--fs-24); }
	.hs-reparatie .hs-rep-hero__lead,
	.hs-reparatie--model .hs-rep-hero__lead { font-size: var(--fs-16); }
	.hs-reparatie .hs-rep-hero__cta { margin-top: var(--sp-6); width: 100%; }
	.hs-rep-hero__cta .hs-btn,
	.hs-rep-cta .hs-btn { flex: 1 1 100%; }
	/* The old model hero showed one button on a phone. */
	.hs-reparatie--model .hs-rep-hero .hs-btn--ghost { display: none; }

	.hs-rep-wizard__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-8); }

	.hs-reparatie > .hs-section.hs-rep-more { padding-top: var(--sp-4); }
	.hs-rep-more__content { max-height: 216px; }
	.hs-reparatie .hs-rich h2,
	.hs-reparatie .hs-rich h3 { font-size: var(--fs-24); }

	.hs-rep-why__inner,
	.hs-rep-split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
	.hs-rep-why__inner > * { padding: 0; }
	.hs-rep-checks li { font-size: var(--fs-16); }
	.hs-rep-insurance__img { height: auto; aspect-ratio: 343 / 236; }

	.hs-reparatie > .hs-section.hs-rep-tradein { padding-bottom: var(--hs-section-pad-y); }
	.hs-rep-tradein__text { padding-bottom: 0; }
	.hs-rep-tradein__media { display: none; }

	.hs-reparatie .hs-faq--plain .hs-section__title { text-align: left; }
	.hs-rep-links__grid { columns: 1; }
}