/* * Product detail page (PDP) — tight configurator built on the Claude Design * system component layer (components.css) + tokens (variables.css). Enhances * WooCommerce's native single-product markup (gallery + .summary) in place. */ /* ---------- Layout: gallery left, configurator right ---------- */ .single-product div.product { display: grid; grid-template-columns: minmax(0, 420px) 1fr; /* column-gap only, row-gap 0 — see --hs-pdp-band-gap at the bottom of this * file. Every band below the configurator is a row of this same grid, so a * row-gap would be ADDED to each band's own margin-top: 40px of row-gap plus * 48px of margin measured as an 89px gap while the token said 48. */ column-gap: var(--sp-10); row-gap: 0; align-items: start; max-width: var(--hs-wide-width); margin-inline: auto; /* Top edge only from .wc-wrap (layout.css), which now gives every classic and * WooCommerce template the same --sp-8 opening as .hs-section:first-of-type. * Keeping it here too stacked the two and pushed the gallery 64px down. The * bottom padding stays: it separates the configurator from the specs band. */ padding-block: 0 var(--sp-8); } /* Neutralise WooCommerce's default float/48%-width layout so the grid controls sizing */ .single-product div.product .summary, .single-product div.product .hs-gallery { width: auto !important; float: none !important; } /* The photos, thumbnails and the trade-in box travel along while you scroll * the configurator, and stop where that column ends — at "Inbegrepen bij jouw * nieuwe …" (client, 23-10-2026). The outer .hs-gallery stretches over the * whole first grid row, so the sticky inner wrapper is bounded by that row and * never floats over the full-width bands below (which is why it used to be * static). Only where the column fits beside the summary and the screen is tall * enough to show all of it; otherwise it simply scrolls. */ .single-product div.product .hs-gallery { margin: 0; align-self: stretch; } .single-product .hs-gallery__sticky { display: flex; flex-direction: column; gap: var(--sp-3); } @media (min-width: 901px) and (min-height: 900px) { .single-product .hs-gallery__sticky { position: sticky; top: calc(var(--hs-topbar-h, 36px) + var(--hs-header-h) + var(--sp-6)); } } /* ---------- 1:1, and this is the third time it has been measured ---------- * * This box was 4:3 on the claim that 1.33 was "the measured median of the photo * library". It is not the median of the photos that reach this box. Re-measured * twice on 2026-08-22, over the featured image of every published product (342 * with usable metadata) and again over just the ones an archive shows — * published AND in stock, 118 with metadata — and both runs agree: * * min 0.47 · p10 0.71 · p25 0.81 · MEDIAN 1.000 · p75 1.25 · p90 1.50 · max 2.28 (all 342) * min 0.64 · p10 0.75 · p25 0.82 · MEDIAN 1.000 · p75 1.43 · p90 1.50 · max 1.56 (118 in stock) * * The distribution is BIMODAL, which is the part that keeps getting lost: two * clusters, portrait/square around 0.8-1.0 and landscape at exactly 1.5, with * almost nothing between them (8.5% sits in 1.15-1.40). So no box "fits" — 4:3 * looks like a sensible compromise precisely because it lands in the empty gap * between the two humps, where it serves neither. * * Mean dead area with object-fit: contain, on the in-stock population: * * 1:1 17.4% ← this * 5:4 22.7% * 4:3 24.2% ← what this used to be * 4:5 24.5% * 3:2 27.4% ← measurably WORSE, do not "fix" it to this * * 1:1 wins because it serves the larger hump: portrait (28.8%) plus near-square * (35.6%) is ~64% of the catalogue. It costs the 1.5 group a little, and that is * the trade being made deliberately — but note what the trade actually is, * measured on the page in a 420px column: * * Galaxy Watch 6 44mm, 511x840 (0.61) : 192x315 in a 420x315 box, 54.4% dead * → 255x420 in a 420x420 box, 39.2% dead * Galaxy S26, 2560x1707 (1.50) : 420x280 in a 420x315 box, 11.1% dead * → 420x280 in a 420x420 box, 33.3% dead * * The portrait photo got 33% wider. The landscape photo did not shrink at all — * it renders at exactly the same 420x280 — it just sits in a taller box with * more empty space above and below it. So the "cost" to the 1.5 group is * whitespace, while the gain to the 0.6-1.0 group is pixels of product. * * contain, never cover: a cropped product photo cuts the device in half. A tall * or square photo is letterboxed, never distorted. * * The archive card holds the same 1:1 (assets/css/archive.css) — overview and * detail must not disagree about the shape of a product. Change one, change both. */ /* White fill, not --bg-2: the photography in this catalogue is shot on white, so * a #f8fafb box behind a white cut-out leaves a visible seam where the photo * ends and the box carries on — read as a bad crop, not as a frame. The archive * card's media box moved to --bg-1 the same day for the same reason * (archive.css .hs-pcard__media); change one, change both. * * The 1px --border-1 hairline stops the box vanishing on a white page. Same edge * .hs-gallery__thumb draws, so image and thumbnails read as one set. Decorative, * not a control boundary: 1,20:1 on the page, deliberately — anything strong * enough for 1.4.11 would be a frame around every product photo on the site. */ .hs-gallery__main { border-radius: var(--r-lg); overflow: hidden; background: var(--bg-1); border: 1px solid var(--border-1); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } .single-product .hs-gallery__img { width: 100%; height: 100%; object-fit: contain; } /* Thumbnails (30-10-2026): one row exactly as wide as the main photo, at most * 7 across and fewer as the column narrows (container queries below), each at * least ~56px. The last one shown is faded under "+N" (N = all photos, * data-more in inc/pdp.php) when more photos follow; all of them open the * photo viewer (product.js). * White like the main photo, for the same seam reason. */ .single-product .hs-gallery__sticky { container-type: inline-size; } .hs-gallery__thumbs { --hs-thumbs: 7; display: flex; gap: var(--sp-2); } .hs-gallery__thumb { position: relative; flex: 0 0 calc((100% - (var(--hs-thumbs) - 1) * var(--sp-2)) / var(--hs-thumbs)); aspect-ratio: 1 / 1; border-radius: var(--r-md); border: 1px solid var(--border-2); background: var(--bg-1); padding: 4px; cursor: pointer; overflow: hidden; transition: border-color var(--dur-fast) var(--ease-standard); } .hs-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; } .hs-gallery__thumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } /* Only rendered where a rule below gives it content. */ .hs-gallery__thumb::after { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(255 255 255 / .35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); font-family: var(--font-display); font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--heading-color); } .hs-gallery__thumb:nth-child(n + 8) { display: none; } .hs-gallery__thumb:nth-child(7):not(:last-child)::after { content: attr(data-more); } @container (width < 440px) { .hs-gallery__thumbs { --hs-thumbs: 6; } .hs-gallery__thumb:nth-child(n + 7) { display: none; } .hs-gallery__thumb:nth-child(6):not(:last-child)::after { content: attr(data-more); } } @container (width < 376px) { .hs-gallery__thumbs { --hs-thumbs: 5; } .hs-gallery__thumb:nth-child(n + 6) { display: none; } .hs-gallery__thumb:nth-child(5):not(:last-child)::after { content: attr(data-more); } } @container (width < 312px) { .hs-gallery__thumbs { --hs-thumbs: 4; } .hs-gallery__thumb:nth-child(n + 5) { display: none; } .hs-gallery__thumb:nth-child(4):not(:last-child)::after { content: attr(data-more); } } a.hs-gallery__main { cursor: zoom-in; } /* * div.summary, not .summary. WooCommerce ships * `.woocommerce div.product div.summary { margin-bottom: 2em }` at (0,3,2); this * rule read `.single-product div.product .summary` — (0,3,1), one element short — * so its `margin: 0` silently lost the margin-bottom while winning every other * declaration in it. That stray 32px is why the gap to the first content band * measured 120px against the 88px between the bands. Matching Woo's element * count makes source order the decider and product.css loads last; no * !important. See the WooCommerce-specificity warning in CLAUDE.md. */ .single-product div.product div.summary { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); } @media (max-width: 900px) { .single-product div.product { grid-template-columns: 1fr; column-gap: var(--sp-6); } /* One column, so the gallery and the summary are now two stacked rows of the * same grid. row-gap stays 0 (the bands own their spacing), so the gap * between photo and configurator has to be stated here. */ .single-product div.product div.summary { margin-top: var(--sp-6); } .single-product div.product .hs-gallery { position: static; } } /* ---------- Header: badge, title, rating, price, vat ---------- */ .single-product .summary > .hs-badge { align-self: flex-start; } .single-product .product_title.entry-title { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(var(--fs-28), 2.4vw, var(--fs-32)); /* old PDP: 32px */ line-height: var(--lh-snug); letter-spacing: normal; margin: 0; } .hs-rating { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-14); color: var(--fg-2); } .hs-rating .hs-stars { color: var(--hs-amber); letter-spacing: 1px; } .single-product .summary .price, .single-product .summary .price .woocommerce-Price-amount { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-32); letter-spacing: var(--tracking-tight); color: var(--fg-1) !important; font-variant-numeric: tabular-nums; margin: var(--sp-2) 0 0; } .single-product .summary .woocommerce-product-details__short-description { color: var(--fg-2); } /* ---------- Configurator: labelled steps ---------- */ .single-product .variations { width: 100%; border: 0; margin: var(--sp-4) 0 var(--sp-5); display: block; } .single-product .variations tbody { display: block; } .single-product .variations tr { display: block; margin-bottom: var(--sp-6); } .single-product .variations th, .single-product .variations td { display: block; padding: 0; border: 0; text-align: left; } .single-product .variations th.label { display: flex; align-items: center; gap: var(--sp-1); font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-14); color: var(--fg-1); margin-bottom: var(--sp-3); } /* No .reset_variations rule here any more: the "Wissen" link is removed at the * woocommerce_reset_variations_link filter (inc/pdp.php), so there is no element * left to style. */ .hs-native-select { display: none !important; } .hs-options { /* Shared minimum width of one option card, so a "256GB" card and a "Blauw" * card come out the same size. Measured, not chosen: 140px is the largest * track that still fits two cards in the 296px summary column at a 320px * viewport (2 x 140 + 12px gap = 292). Belongs in variables.css; it is here * because that file was owned by another session on 22-08-2026. */ display: flex; flex-wrap: wrap; gap: var(--sp-2); } /* ---------- Keyboard focus (WCAG 2.4.7) ---------- * * base.css carries a generic :focus-visible ring, but every control below sets * its own border, box-shadow or background, and the selected state uses the * same accent colour as that ring — so "focused" and "chosen" looked identical * and, on the card controls, the ring was lost against the shadow. These rules * are explicit and scoped to the PDP, and they use an offset ring plus a white * halo so the outline reads on the white cards, on the teal buy panel, and on * the grey unavailable state alike. * * Note the plain :focus fallback alongside :focus-visible: options are focused * programmatically by the roving-tabindex handler, and not every browser treats * that as "visible" focus. */ .single-product .hs-options button:focus-visible, .single-product .hs-gallery__thumb:focus-visible, .single-product .hs-gallery__main:focus-visible, .hs-lb__thumb:focus-visible, .single-product .hs-help:focus-visible, .hs-modal-close:focus-visible, .single-product .hs-options button:focus, .single-product .hs-gallery__thumb:focus, .single-product .hs-help:focus { outline: 3px solid var(--accent-press); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; z-index: 1; } /* Mouse users keep the quiet version: only a real keyboard focus draws the ring. */ .single-product .hs-options button:focus:not(:focus-visible), .single-product .hs-gallery__thumb:focus:not(:focus-visible), .single-product .hs-help:focus:not(:focus-visible) { outline: none; box-shadow: none; } /* …but the active option must keep its own selected-state shadow when the ring * is dropped again, otherwise clicking a card visually deselects it. */ /* On the PDP the parity block at the end of this file overrides these: colour * buttons are transparent wrappers again (the ring sits on the dot), and the * storage/grade cards carry their state with a 2px border. */ .single-product .hs-options .hs-seg.is-active:focus:not(:focus-visible), .single-product .hs-options .hs-swatch-btn.is-active:focus:not(:focus-visible), .single-product .hs-options .hs-grade.is-active:focus:not(:focus-visible) { box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-1); } .single-product .hs-gallery__thumb.is-active:focus:not(:focus-visible) { box-shadow: 0 0 0 2px var(--accent-soft); } /* ---------- One button family: storage and colour ---------- * * Storage was a wide rectangular card and colour a bare round dot with its name * underneath — two visual languages for two steps of the same configurator. On * the client's request (22-08-2026) there is one shape: same track, border, * radius, shadow and padding, with the round swatch moved INSIDE the colour * button and the colour's name beside it at the same font-size as "256GB". * * ⚠️ auto-FILL, not auto-fit. auto-fit collapses the tracks no item lands in and * lets the survivors absorb the space — which is how two storage cards rendered * 380px wide in a 772px column while five colour buttons rendered 145px, the * same rule producing two widths. It is also what would stretch the iPad Mini's * single colour into a full-width bar. auto-fill keeps the empty tracks. * * The condition grades keep their own wider grid: name + explanation + price is * a different amount of content. */ .hs-options--storage, .hs-options--color { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--hs-option-track), 1fr)); gap: var(--sp-3); } /* The card itself. .hs-seg and .hs-swatch-btn differ only in how they arrange * their contents; everything that makes them one control lives here. */ .hs-seg, .hs-swatch-btn { background: #fff; border: 1px solid var(--border-1); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--sp-3) var(--sp-2); cursor: pointer; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .hs-seg:hover, .hs-swatch-btn:hover { box-shadow: var(--shadow-2); } /* * Selected state, two redundant channels — and deliberately no check badge. * (Since 30-10-2026 the option cards — storage, Netwerk, battery — do carry a * small tick under the label again, on the client's request: .hs-seg-check.) The * ✓-disc on the swatch is gone on the client's request; WCAG 1.4.1 (colour never * the only carrier) is still met twice over without it: * * 1. The LABEL steps --fw-bold → --fw-black on the selected card: weight, not * hue. (It briefly stepped the wrong way — the shared rule said * --fw-semibold while both labels rest at --fw-bold, so the chosen option * rendered lighter. Measured 600 against 700, 22-08-2026.) * 2. The 2px --accent-soft halo is a shape the resting card does not have at * all, on top of the --accent border colour. * * Ring contrast, re-measured after the shape change from the computed values of * a real .is-active card on /product/smartphones/samsung/samsung-galaxy-a57-5g/: * ring #008999 vs the card's own white fill inside it ....... 4,168:1 * ring vs the --accent-soft halo outside it ................. 3,531:1 * ring vs the --border-1 edge it replaces (state vs state) .. 3,308:1 * All ≥ the 3:1 of WCAG 1.4.11, and no product colour can spoil them: the ring * moved from the dot to the card, so its neighbours are white fill and the halo. * (Against this product's blue dot it would have been 1,6:1 — which is why the * old ring needed 3px of padding inside the dot.) The --accent-soft halo alone * is 1,18:1 on white; it is a nicety on top of the border, not the indicator. * * ⚠️ border-color and box-shadow transition over --dur-base, and a hidden or * background tab freezes the animation clock, so getComputedStyle returns the * t=0 value and it looks broken when it is not. Set * `.hs-seg, .hs-swatch-btn { transition: none }` before believing a reading. */ .hs-seg.is-active, .hs-swatch-btn.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-1); } .hs-seg.is-active .hs-seg-label, .hs-swatch-btn.is-active .hs-swatch-label { font-weight: var(--fw-black); } /* Storage — capacity centred, with a "+ €" delta vs. the cheapest option. */ .hs-seg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .hs-seg-label { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-16); line-height: var(--lh-snug); } .hs-seg-delta { font-size: var(--fs-12); color: var(--fg-2); font-variant-numeric: tabular-nums; } /* No surcharge → no empty line, so the capacity sits centred in the card. */ .hs-seg-delta:empty { display: none; } /* ---------- Colour: swatch left, name right, inside one card ---------- * * A two-column grid ([dot][name]); on the product page itself the later * "Oude-site-pariteit" block stacks it (dot over name) instead. * * The name is not decoration. It is the option's only non-colour identity (WCAG * 1.4.1) and, sitting inside the button, its accessible name too — never a title * attribute or a tooltip. --fs-16 in the display face is exactly the treatment * .hs-seg-label gives "256GB", which is what the client asked for. * * A colour term with no hex on file renders as a plain .hs-chip instead * (product.js decides per option), so a row can hold both shapes at once. */ .hs-swatch-btn { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-2); text-align: left; } /* 22px, not the old 44px: the dot is now a marker beside a word instead of the * control itself, and the control it sits in is ~145 x 50px — far past the * 24x24 of WCAG 2.5.8, which the bare dot only just cleared. */ .hs-swatch { width: 22px; height: 22px; border-radius: var(--r-pill); } /* The dot's edge is --fg-3 (#7d8a91), solid — 3.55:1 against the white card, so * every dot clears the 3:1 of WCAG 1.4.11 regardless of its own fill, with no * per-colour luminance branch in PHP. It matters because the three most common * colours here are near-white: Zilver (131 products, #efefef, 1.04:1 on white), * Wit (60, #fbf7f4, 1.12:1), Stainless steel (#f4f4f4, 1.08:1) — fill and edge * both under 1.2:1 is a swatch that is not there. Deliberately not darker: a mid * grey also stays visible on the darkest fills (4.7:1 on Zwart #201d24). * * It is now the dot's ONLY edge. The 2px ring and 3px padding that used to wrap * it were the selection indicator; that job moved to the card. */ .hs-swatch-dot { display: block; width: 100%; height: 100%; border-radius: var(--r-pill); border: 1px solid var(--fg-3); } .hs-swatch-label { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-16); line-height: var(--lh-snug); color: var(--fg-1); /* Long terms exist and are real: "Midnight black" (4 products) and * "donkergrijs-enterprise-edition" (1). They wrap inside the card; the grid * row grows and every card in that row grows with it. */ overflow-wrap: anywhere; } /* Grade cards — side by side (design-system card look) */ .hs-options--condition { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); } .hs-grade { position: relative; display: flex; flex-direction: column; gap: 2px; text-align: left; background: #fff; border: 1px solid var(--border-1); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--sp-3) var(--sp-4); cursor: pointer; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .hs-grade:hover { box-shadow: var(--shadow-2); } .hs-grade.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-1); } .hs-grade-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-14); line-height: var(--lh-snug); } .hs-grade-short { font-size: 0.75rem; color: var(--fg-2); line-height: var(--lh-snug); } /* margin-top:auto pushes the price (and the "Uitverkocht" label that replaces * it) to the bottom of the card, so it aligns across cards regardless of how * many lines the grade name wraps to. */ .hs-grade-price { font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-black); color: var(--accent-press); margin-top: auto; padding-top: var(--sp-2); font-variant-numeric: tabular-nums; } /* Reusable ⓘ help trigger (condition, battery, …) — opens the shared popup. */ .hs-help { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 18px; height: 18px; border: 0; border-radius: var(--r-pill); color: var(--accent-text); background: var(--bg-2); cursor: pointer; font-size: var(--fs-12); line-height: 1; } .hs-help:hover { color: #fff; background: var(--accent-fill); } /* Stacked list variant (condition grades) */ .hs-help-item { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-2); } .hs-help-item:last-child { border-bottom: 0; } .hs-help-item h4 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-16); margin: 0 0 var(--sp-1); } .hs-help-item p { margin: 0; color: var(--fg-2); font-size: var(--fs-14); } /* Two-column comparison variant (battery: Standaard vs Nieuw) */ .hs-help-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .hs-help-col { background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r-md); padding: var(--sp-4); } .hs-help-col h4 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-16); margin: 0 0 var(--sp-2); } .hs-help-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); } .hs-help-col li { position: relative; padding-left: var(--sp-5); font-size: var(--fs-14); color: var(--fg-2); } .hs-help-col li::before { content: "\2713"; position: absolute; left: 0; color: var(--hs-green); font-weight: var(--fw-bold); } .hs-help-col li.is-lead { color: var(--fg-1); font-weight: var(--fw-bold); } .hs-help-note { margin: var(--sp-4) 0 0; font-size: var(--fs-14); color: var(--fg-2); } @media (max-width: 560px) { .hs-help-cols { grid-template-columns: 1fr; } } /* ---------- Editor-only notice ---------- * Rendered for shop managers when something they configured is deliberately not * shown (currently the add-on step, and a missing delivery promise). Loud on * purpose: it must be impossible to mistake for customer-facing copy. */ .single-product .hs-admin-note { margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--hs-amber-700); border-radius: var(--r-md); background: var(--hs-amber-50); color: var(--fg-1); font-size: var(--fs-13, 0.8125rem); line-height: var(--lh-snug); } /* ---------- Add-ons ---------- */ .hs-addons { margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-5); } .hs-addon-title { display: flex; align-items: center; gap: var(--sp-1); font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-14); margin-bottom: var(--sp-3); } .hs-addon-hint { margin: var(--sp-2) 0 0; font-size: var(--fs-12); color: var(--fg-2); } /* Accessories as selectable cards with a product photo (Fixje-style grid). */ .hs-acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-3); } .hs-acc-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-1); background: #fff; border: 1px solid var(--border-1); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--sp-3); cursor: pointer; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .hs-acc-card:hover { box-shadow: var(--shadow-2); } .hs-acc-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-1); } .hs-acc-check { position: absolute; top: var(--sp-2); right: var(--sp-2); accent-color: var(--accent); width: 18px; height: 18px; } /* Stays 1:1 while the catalog boxes moved to 4:3. This is not a catalog photo but * a ~96px selection tile inside a 120px card, and accessories (cases, cables, * screen protectors) are as often portrait as landscape, so a wide box would just * shrink half of them. Square keeps the card grid on one baseline; object-fit on * the img below still rules out distortion. */ .hs-acc-thumb { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; } .hs-acc-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .hs-acc-thumb--empty { background: var(--bg-2); border-radius: var(--r-md); } .hs-acc-name { font-weight: var(--fw-bold); font-size: var(--fs-14); line-height: var(--lh-snug); } .hs-acc-price { color: var(--fg-2); font-size: var(--fs-13); font-variant-numeric: tabular-nums; } /* Included (free, in-the-box) accessories: green, checked, non-removable. */ .hs-acc-card--included { background: var(--hs-green-50); border-color: var(--hs-green-100); box-shadow: none; cursor: default; } .hs-acc-card--included.is-selected { border-color: var(--hs-green-100); box-shadow: none; } .hs-acc-card--included .hs-acc-check { accent-color: var(--hs-green); opacity: 1; cursor: default; } .hs-acc-price--free { color: var(--hs-green-800); font-weight: var(--fw-bold); } /* ---------- Buy panel: config summary + price + delivery + CTA ---------- */ .single-product .woocommerce-variation-price { display: none; } /* base price shown in the buy panel instead */ /* ---------- The buy block, as on the old product page (measured 11-10-2026) ---- * * Straight on the white page, no card and no hairline: price, then the button * with the stock status beside it, then the payment line and the VAT scheme, * each 20px apart (the old page's rhythm, measured on the AirPods 4 and the * Galaxy S24 FE at 1720px). The panel wraps WooCommerce's own button across two * hooks (inc/pdp.php), so it is a wrapping flex row: every child takes a full * line except the button and the stock text, which share one. */ .hs-buy { margin-top: var(--sp-5); padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); } .hs-buy > * { flex: 0 0 100%; margin: 0; } .single-product .hs-buy > .single_add_to_cart_button, .single-product .hs-buy > .hs-stock-inline { flex: 0 0 auto; } /* The live region and the WooCommerce qty input take no line of their own. */ .hs-buy > [data-hs-live], .single-product .hs-buy > .quantity { flex-basis: auto; } /* The old page shows the bare amount; "Totaal" and the configuration recap stay * for screen readers only (the recap is also what the live region announces). */ .hs-config-summary, .hs-config-summary[hidden] { display: none; } .hs-total { display: flex; align-items: baseline; } .hs-total[hidden] { display: none; } .hs-addons[hidden] { display: none; } .hs-total-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .hs-total-amount { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-32); line-height: 1.5; color: var(--fg-1); font-variant-numeric: tabular-nums; } /* Stock beside the button: --hs-green-800 (7,08:1), not the old #05af6a, which * is 2,6:1 on white. */ .single-product .hs-stock-inline { color: var(--hs-green-800); font-size: var(--fs-16); line-height: var(--lh-copy); } .single-product .hs-stock-inline:empty { display: none; } /* The count now sits next to the button (product.js copies it there), so the * copy inside WooCommerce's variation panel would say it twice. */ .single-product .single_variation .woocommerce-variation-availability { display: none; } .single-product .single_variation .woocommerce-variation-description p { margin: 0; color: var(--fg-1); font-weight: var(--fw-bold); } .single-product .single_variation:has(.woocommerce-variation-description p) { margin-top: var(--sp-5); } .single-product div.product form.cart table.variations { margin-bottom: 0; } .single-product form.cart { margin: 0; } .single-product form.cart .quantity { display: none !important; } /* one-device configurator: qty is always 1 */ .single-product .woocommerce-variation-add-to-cart { display: flex; flex-direction: column; align-items: stretch; gap: 0; } /* Old page: 250x56, 8px radius, teal-800 fill, 16px on 24px with 16px padding. * Montserrat there; Lato here, the theme's only sans. */ .woocommerce div.product form.cart .single_add_to_cart_button { display: inline-flex; align-items: center; justify-content: center; width: auto; background: var(--hs-teal-800); color: var(--fg-on-brand); border: 0; border-radius: var(--r-lg); padding: var(--sp-4); font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-16); line-height: var(--lh-copy); box-shadow: none; cursor: pointer; transition: background var(--dur-base) var(--ease-standard); } .woocommerce div.product form.cart .single_add_to_cart_button:hover { background: var(--hs-teal-900); } .woocommerce div.product form.cart .single_add_to_cart_button:active { background: var(--hs-teal-900); } .woocommerce div.product form.cart .single_add_to_cart_button:disabled, .woocommerce div.product form.cart .single_add_to_cart_button.disabled { opacity: .45; } .single-product .hs-bnpl { margin: 0; font-size: var(--fs-16); line-height: var(--lh-copy); color: var(--fg-1); } .single-product .hs-vat-label { margin: 0; font-size: var(--fs-16); line-height: var(--lh-copy); color: var(--fg-1); } /* ---------- USP list under the buy block ---------- * Stacked, a green check-circle per line, 16px copy — the old list. The icon is * decoration next to a text that says it all (aria-hidden in the markup). */ .single-product .hs-pdp-usps { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-1); } .single-product .hs-pdp-usps__item { display: flex; align-items: flex-start; gap: var(--sp-1); font-size: var(--fs-16); line-height: var(--lh-copy); color: var(--fg-1); } .single-product .hs-pdp-usps__icn { flex: 0 0 auto; display: inline-flex; width: 16px; height: var(--lh-copy); align-items: center; margin-right: var(--sp-1); color: var(--hs-green-700); } .single-product .hs-pdp-usps__icn svg { width: 16px; height: 16px; } /* ---------- Info popup / modal ---------- */ .hs-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; } .hs-modal[hidden] { display: none; } .hs-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 26, .5); } .hs-modal-box { position: relative; z-index: 1; background: var(--bg-1); max-width: 480px; width: calc(100% - var(--sp-8)); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-3); } .hs-modal-close { position: absolute; top: var(--sp-3); right: var(--sp-4); background: none; border: 0; font-size: var(--fs-24); cursor: pointer; color: var(--fg-3); line-height: 1; } .hs-modal-content h3 { font-family: var(--font-display); margin-bottom: var(--sp-3); } .hs-modal-content p { color: var(--fg-2); } /* Tabs / related / upsells span the full width (not a grid column). Spacing via * --hs-pdp-band-gap with every other band — see the block at the bottom. */ .single-product .woocommerce-tabs, .single-product .related.products, .single-product .up-sells { grid-column: 1 / -1; margin-top: var(--hs-pdp-band-gap); } .single-product .related.products > h2, .single-product .up-sells > h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-24); margin-bottom: var(--sp-5); } .single-product .related.products ul.products, .single-product .up-sells ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); } /* * Kill WooCommerce's float clearfix on the list — same trap archive.css already * documents for the category grid, missed here when the PDP grew its own related * grid. woocommerce-layout.css ships * `.woocommerce ul.products::before, ::after { content: " "; display: table }`; * in a GRID container both pseudo-elements become real grid items. Measured on * /product/smartphones/samsung/samsung-galaxy-s24-ultra-refurbished/ before this * rule: ::before claimed a 119x316px cell, so the three related products * rendered with an empty first cell and one wrapped to the next row. */ .single-product .related.products ul.products::before, .single-product .related.products ul.products::after, .single-product .up-sells ul.products::before, .single-product .up-sells ul.products::after { content: none; } .single-product .related.products ul.products li.product, .single-product .up-sells ul.products li.product { margin: 0; width: auto; } @media (max-width: 900px) { .single-product .related.products ul.products, .single-product .up-sells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- premium polish ---------- */ .single-product .summary .hs-eyebrow { display: block; margin-bottom: var(--sp-2); } .hs-gallery__main { position: relative; } .hs-gallery__badges { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2; display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; } /* Payment methods: one logo strip from the shop settings (inc/pdp.php), where * six hardcoded text chips (.hs-pay__mark) used to be. * * height: auto is what stops the intrinsic width/height attributes from stamping * the native 895x88 onto a narrower column; together they are also what reserves * the right box before the image loads, so this strip — directly under the * add-to-cart button — cannot push the button as it arrives. */ /* Payment logos: in components.css since 30-10-2026, the footer shows them too. */ /* Breadcrumbs live in assets/css/breadcrumbs.css (.hs-crumbs), loaded globally. * The .woocommerce-breadcrumb rules that used to sit here were always dead: * woocommerce.php calls woocommerce_content(), which never fires * woocommerce_before_main_content, the hook Woo hangs its breadcrumb on. */ /* ---------- Full-width content sections (product info, FAQ, …) ---------- * * ONE distance between every band, declared once. Measured before this change at * a 1440px viewport on the iPhone 16 (22-08-2026): configurator → description * 120px, description → specificaties 89px, specificaties → FAQ 87px, FAQ → * gerelateerd 88px. Three numbers for one relationship, none of them the 48px * the token said, because each gap was the grid's 40px row-gap plus the band's * own 48px margin — and the first added WooCommerce's 32px summary margin on top * (see div.summary above). row-gap is 0 now, so the value below is the whole * distance and is what a reader measures on the page. * * 40px, down from an effective 88: the client asked for tighter, and these bands * separate themselves anyway (the table has rules, the FAQ a border, the related * grid a heading). Deliberately NOT the ~128px above the footer that BACKLOG.md * defends — that one closes the page against the footer chrome. */ .single-product div.product { --hs-pdp-band-gap: var(--sp-10); } .single-product .hs-section { grid-column: 1 / -1; margin-top: var(--hs-pdp-band-gap); } .hs-section__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-24); letter-spacing: var(--tracking-snug); margin: 0 0 var(--sp-5); } /* Specifications table */ .hs-specs__table { width: 100%; max-width: var(--hs-content-width); border-collapse: collapse; } .hs-specs__table th, .hs-specs__table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-2); font-size: var(--fs-14); vertical-align: top; } .hs-specs__table th { width: 40%; color: var(--fg-2); font-weight: var(--fw-semibold); } .hs-specs__table td { color: var(--fg-1); } .hs-specs__table tr:nth-child(odd) th, .hs-specs__table tr:nth-child(odd) td { background: var(--bg-2); } /* FAQ accordion (native
, no JS). This file loads on the PDP only; * hs_render_faqs() is shared with the section library and the reparatie * template, which style their own copy. * * 22-10-2026: two columns (inc/pdp.php hs_render_faq()). Left the title, one * line on what it covers and the "staat je vraag er niet tussen?" card; right * the questions as separate cards. The
is display: contents, so its *

and list are grid items of .hs-pdp-faq while the section keeps its * aria-labelledby. Phone: one column, the help card after the questions. */ .single-product .hs-pdp-faq { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-areas: "title list" "intro list" "help list"; grid-template-rows: auto auto 1fr; column-gap: var(--sp-16); margin-top: var(--hs-pdp-band-gap, var(--sp-12)); } .single-product .hs-pdp-faq > .hs-faq { display: contents; } .single-product .hs-pdp-faq .hs-section__title { grid-area: title; margin: 0; text-align: left; font-size: var(--fs-38); line-height: 1.1; } .hs-pdp-faq__intro { grid-area: intro; margin: var(--sp-3) 0 0; font-size: var(--fs-16); line-height: var(--lh-base); color: var(--fg-2); } .hs-pdp-faq__help { grid-area: help; align-self: start; margin-top: var(--sp-8); padding: var(--sp-6); border-radius: var(--r-xl); background: var(--hs-mint); } .hs-pdp-faq__help-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--fg-1); } .hs-pdp-faq__help-text { margin: var(--sp-1) 0 var(--sp-4); font-size: var(--fs-14); color: var(--fg-2); } .hs-pdp-faq__ways { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-5); padding: 0; list-style: none; } .hs-pdp-faq__ways li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-15); } .hs-pdp-faq__ways .hs-icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--hs-teal-800); } .hs-pdp-faq__ways a { color: var(--fg-1); font-weight: var(--fw-semibold); text-decoration: none; } .hs-pdp-faq__ways a:hover { color: var(--hs-teal-800); text-decoration: underline; text-underline-offset: 3px; } .hs-pdp-faq__cta { width: 100%; justify-content: center; } /* The colleague (Shop-instellingen → "Foto naast de vragen") stands behind * the card, the lower 48px of the torso hidden by it, so card and person read as * one block and the text keeps the full width. The card itself sits at the * bottom of the column, level with the last question (client, 22-10-2026). */ .hs-pdp-faq--person { isolation: isolate; } .hs-pdp-faq--person .hs-pdp-faq__help { position: relative; align-self: end; margin-top: 188px; } .single-product div.product .hs-pdp-faq .hs-pdp-faq__person { position: absolute; z-index: -1; bottom: calc(100% - 48px); left: 50%; width: auto; height: 220px; max-width: none; transform: translateX(-50%); pointer-events: none; } @media (max-width: 900px) { .hs-pdp-faq--person .hs-pdp-faq__help { margin-top: 196px; } .single-product div.product .hs-pdp-faq .hs-pdp-faq__person { height: 180px; } } .single-product .hs-pdp-faq .hs-faq__list { grid-area: list; display: grid; gap: var(--sp-3); align-content: start; max-width: none; margin: 0; border-top: 0; } .hs-faq__item { border: 1px solid var(--border-1); border-radius: var(--r-xl); background: var(--bg-1); transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); } .hs-faq__item:hover { border-color: var(--hs-teal-200, var(--border-2)); } .hs-faq__item[open] { border-color: var(--hs-teal); box-shadow: 0 8px 24px rgba(16, 42, 46, .06); } .hs-faq__q { position: relative; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) calc(var(--sp-6) + 32px) var(--sp-5) var(--sp-6); list-style: none; cursor: pointer; font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: 1.35; color: var(--fg-1); } .hs-faq__q::-webkit-details-marker { display: none; } /* A plus in a mint circle that turns into a cross: two bars, one rotation. */ .hs-faq__q::before, .hs-faq__q::after { content: ""; position: absolute; top: 50%; right: calc(var(--sp-6) + 7px); width: 14px; height: 2px; border-radius: 1px; background: var(--hs-teal-800); transition: transform 220ms var(--ease-out); } .hs-faq__q::before { transform: translateY(-50%); } .hs-faq__q::after { transform: translateY(-50%) rotate(90deg); } .hs-faq__item[open] .hs-faq__q::before { transform: translateY(-50%) rotate(45deg); } .hs-faq__item[open] .hs-faq__q::after { transform: translateY(-50%) rotate(135deg); content: ""; } .hs-faq__q { background: radial-gradient(circle at calc(100% - var(--sp-6) - 14px) 50%, var(--hs-mint) 14px, transparent 14.5px); } .hs-faq__item[open] .hs-faq__q { color: var(--hs-teal-800); } .hs-faq__a { padding: 0 var(--sp-6) var(--sp-5); font-size: var(--fs-15); line-height: 1.6; color: var(--fg-2); } .hs-faq__a p { margin: 0 0 var(--sp-2); } .hs-faq__a p:last-child { margin-bottom: 0; } @media (max-width: 900px) { .single-product .hs-pdp-faq { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "intro" "list" "help"; grid-template-rows: none; } .single-product .hs-pdp-faq .hs-section__title { font-size: var(--fs-28); } .single-product .hs-pdp-faq .hs-faq__list { margin-top: var(--sp-6); } .hs-faq__q { padding: var(--sp-4) calc(var(--sp-4) + 32px) var(--sp-4) var(--sp-4); font-size: var(--fs-15); } .hs-faq__q::before, .hs-faq__q::after { right: calc(var(--sp-4) + 7px); } .hs-faq__q { background: radial-gradient(circle at calc(100% - var(--sp-4) - 14px) 50%, var(--hs-mint) 14px, transparent 14.5px); } .hs-faq__a { padding: 0 var(--sp-4) var(--sp-4); } } @media (prefers-reduced-motion: reduce) { .hs-faq__item, .hs-faq__q::before, .hs-faq__q::after { transition: none; } } /* Even spacing between configurator steps; the last step lets the buy panel's * own margin govern the gap (no double spacing). */ .single-product .variations tr { margin-bottom: var(--sp-6); } .single-product .variations tr:last-child { margin-bottom: 0; } .single-product .summary .woocommerce-product-details__short-description { margin-bottom: var(--sp-2); } /* ---------- Trade-in promo under the gallery ---------- * The old product page orange box. Content from Shop-instellingen (inc/pdp.php). */ /* 22-10-2026, as on the old page: a low orange strip, the devices photo at the * left edge rising out of the top and standing on the bottom edge, the * homepage trade-in band's faint round arrow behind the title (same SVG as * .hs-home-tradein::before in sections.css), white type. White on this orange * is below 4.5:1, so the type stays large and bold: the title at 24px bold on * one line, the sentence at 15px with the link underlined. Client's call. */ .single-product .hs-pdp-tradein { --focus-ring: var(--focus-ring-on-light); position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-10); padding: var(--sp-4) var(--sp-5) var(--sp-4) 0; border-radius: var(--r-lg); background: var(--cta-2); color: var(--fg-on-brand); } .single-product .hs-pdp-tradein::before { content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; width: 120px; 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; transform: translate(-50%, -50%); pointer-events: none; } .single-product .hs-pdp-tradein__img { flex: 0 0 auto; align-self: flex-end; width: 112px; height: auto; margin: calc(var(--sp-6) * -1) 0 calc(var(--sp-4) * -1); border-bottom-left-radius: var(--r-lg); object-fit: contain; object-position: left bottom; } .single-product .hs-pdp-tradein:not(.hs-pdp-tradein--has-media) { padding-left: var(--sp-5); } .single-product .hs-pdp-tradein__body { min-width: 0; } .single-product .hs-pdp-tradein__title { margin: 0 0 var(--sp-1); font-family: var(--font-display); font-size: var(--fs-24); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: -0.01em; color: inherit; } .single-product .hs-pdp-tradein__text { margin: 0; color: inherit; font-size: var(--fs-15); line-height: 1.55; } .single-product .hs-pdp-tradein__link { color: inherit; font-weight: var(--fw-regular); text-decoration: underline; text-underline-offset: 3px; } .single-product .hs-pdp-tradein__link:hover { color: inherit; text-decoration-thickness: 2px; } @media (max-width: 560px) { .single-product .hs-pdp-tradein { gap: var(--sp-3); padding-right: var(--sp-4); } .single-product .hs-pdp-tradein__img { width: 84px; } .single-product .hs-pdp-tradein__title { font-size: var(--fs-18); } .single-product .hs-pdp-tradein__text { font-size: var(--fs-14); } } /* "Stel je product samen" above the options, as on the old page. */ .single-product .hs-pdp-config-title { margin: var(--sp-2) 0 0; font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--fg-1); } /* Shown on phones too, under the photos and above the title, as the old product * page does (it was hidden here until 11-10-2026). */ /* WooCommerce's own stock line ("10 op voorraad") is #0f834d at 3,41:1 on * white; the theme's green-800 is 7,08:1. Same selector, loaded later. */ .woocommerce div.product .stock.in-stock { color: var(--hs-green-800); } /* A grade that cannot be bought shows no price: the configurator computes it from * the in-stock variations, and with none it printed "€ 0,00" next to * "Uitverkocht" — a price that does not exist. */ .single-product .hs-options .is-unavailable .hs-grade-price { display: none; } /* ---------- Oude-site-pariteit (10-10-2026, gemeten op 1900px) ---------- * Galerij 517px met kader, samenstelling 70px ernaast. Geen prijsbereik onder * de titel bij een variabel product (de oude pagina toont de prijs pas bij de * koopknop; het Product-schema staat los hiervan in inc/seo.php). Opties in * drie gelijke kolommen van 52px hoog, gecentreerd (sinds 30-10-2026 elke optie * 170px breed, zie "One width for every option button"); kleuren als bolletjes van * 50px met het label eronder; grades gecentreerd met de korte uitleg. */ .single-product div.product { grid-template-columns: minmax(0, 517px) minmax(0, 1fr); column-gap: 70px; } .single-product .hs-gallery__main { padding: var(--sp-5); border: 1px solid var(--border-2); border-radius: var(--r-lg); } .single-product .hs-gallery__thumbs { justify-content: center; } .single-product div.product.product-type-variable .summary > .price { display: none; } .single-product .variations th.label, .single-product .variations th.label label { font-size: var(--fs-16); font-weight: var(--fw-regular); } .single-product .hs-seg, .single-product .hs-grade { min-height: 52px; border-color: var(--border-2); border-radius: var(--r-sm); box-shadow: none; } /* The selected option must not be told apart by colour alone (WCAG 1.4.1): the * tint is ~1.04:1 against white. A 2px border (1px border + 1px inset) and a * heavier label carry the state. The same shadow is repeated for a mouse click, * because the base :focus:not(:focus-visible) rule would otherwise put the old * card halo back. */ .single-product .hs-seg.is-active, .single-product .hs-grade.is-active, .single-product .hs-options .hs-seg.is-active:focus:not(:focus-visible), .single-product .hs-options .hs-grade.is-active:focus:not(:focus-visible) { background: var(--hs-teal-50); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .single-product .hs-seg-label { font-weight: var(--fw-semibold); } .single-product .hs-seg.is-active .hs-seg-label, .single-product .hs-grade.is-active .hs-grade-name { font-weight: var(--fw-black); } .single-product .hs-grade { align-items: center; justify-content: center; text-align: center; padding: var(--sp-4) var(--sp-3); } .single-product .hs-grade-name { font-size: var(--fs-16); font-weight: var(--fw-semibold); } .single-product .hs-grade-short { font-family: var(--font-sans); font-size: var(--fs-14); } .single-product .hs-options--color { display: flex; flex-wrap: wrap; gap: var(--sp-5); } .single-product .hs-swatch-btn { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: 0; border: 0; background: transparent; box-shadow: none; text-align: center; } .single-product .hs-swatch-btn:hover { box-shadow: none; } .single-product .hs-swatch-btn.is-active, .single-product .hs-options .hs-swatch-btn.is-active:focus:not(:focus-visible) { box-shadow: none; } .single-product .hs-swatch { width: 50px; height: 50px; } .single-product .hs-swatch-btn.is-active .hs-swatch { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent); } .single-product .hs-swatch-label { font-family: var(--font-sans); font-size: var(--fs-14); font-weight: var(--fw-regular); } .single-product .hs-swatch-btn.is-active .hs-swatch-label { font-weight: var(--fw-bold); } @media (max-width: 900px) { /* minmax(0, …): a bare 1fr is minmax(auto, 1fr) and grows to the widest * option row, which pushed the page 60px past a 375px screen. */ .single-product div.product { grid-template-columns: minmax(0, 1fr); } } /* Related cards on a phone: the 20px card padding of the archive is too much * for a 160px column. */ @media (max-width: 560px) { .single-product ul.products li.product.hs-pcard { padding: var(--sp-3); } } /* ---------- Oude-site-pariteit, ronde 2 (11-10-2026, gemeten op 1720px) ---------- * Reference: the old Elementor shop, measured from a local copy of it * (holysmartphone-back-up.local) — AirPods 4 (simple), Galaxy S24 FE (variable), * 06 16666 584 (makkelijk nummer). Values in the comments are the old page's * computed ones. Where the old page fails WCAG the accessible token wins and the * comment says so. */ /* Badge: 108x35, 15px, 10px padding and radius (was the 12px archive chip). */ .single-product .summary > .hs-badge { padding: 10px; border-radius: var(--r-lg); font-size: var(--fs-15); line-height: 1; margin-bottom: var(--sp-2); } /* Title: Poppins 32/700 on a 32px line. */ .single-product .product_title.entry-title { font-size: var(--fs-32); line-height: 1; } /* Simple-product price: Poppins 32/700 on 48px, #222, 20px under the title. */ .single-product div.product .summary > p.price, .single-product div.product .summary > p.price .woocommerce-Price-amount { font-size: var(--fs-32); line-height: 1.5; font-weight: var(--fw-bold); letter-spacing: normal; margin: var(--sp-2) 0 0; } /* WooCommerce's form.cart carries margin-bottom: 2em at (0,3,2) — the 32px that * pushed the USP list away from the VAT line. */ .single-product div.product .summary form.cart { margin-bottom: 0; } /* Simple product: price → button is 20px (12px column gap + 8px). */ .single-product .summary > form.cart:not(.variations_form) .hs-buy { margin-top: var(--sp-2); } .woocommerce div.product form.cart .single_add_to_cart_button { padding-inline: var(--sp-6); } .single-product .hs-pdp-usps { margin-top: var(--sp-2); } /* Step labels: Poppins 16/400, "Opslag geheugen: 128GB" (the value from * product.js), 8px above the options. */ /* (0,5,4): WooCommerce bolds the label and sets a 2em line at (0,3,3). */ .single-product div.product form.cart .variations th.label, .single-product div.product form.cart .variations th.label label { font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-regular); line-height: 17px; } .single-product .variations th.label { margin-bottom: var(--sp-2); flex-wrap: wrap; gap: 0; } .single-product .variations { margin-top: var(--sp-6); } .single-product .hs-label-value { font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-regular); color: var(--fg-1); } .single-product .variations th.label .hs-help { margin-left: var(--sp-1); } .single-product .variations tr { margin-bottom: var(--sp-5); } /* Option cards: 52px, 1px #e9ebec edge, 6px radius; selected = light fill and a * teal-800 edge. The edge stays 2px (1px border + 1px inset) for WCAG 1.4.1. */ .single-product .hs-seg, .single-product .hs-grade { border-radius: var(--r-lg); } .single-product .hs-seg.is-active, .single-product .hs-grade.is-active, .single-product .hs-options .hs-seg.is-active:focus:not(:focus-visible), .single-product .hs-options .hs-grade.is-active:focus:not(:focus-visible) { border-color: var(--hs-teal-800); box-shadow: inset 0 0 0 1px var(--hs-teal-800); } .single-product .hs-seg-label { font-weight: var(--fw-bold); } /* 52px tall with the "+ € 40,00" surcharge line inside it as well. */ .single-product .hs-seg { padding: var(--sp-2); } /* Colour names: Poppins 14/400, 8px under the dot. */ .single-product .hs-swatch-label { font-family: var(--font-display); } /* Grade card: "A Grade" 16/700 over "Zo goed als nieuw" 14/400, centred. */ .single-product .hs-grade { gap: var(--sp-1); padding-block: var(--sp-3); } .single-product .hs-grade-name { font-weight: var(--fw-bold); } .single-product .hs-grade-short { font-family: var(--font-display); color: var(--fg-1); } .single-product .hs-grade-price { padding-top: 0; } /* Colour: 52px dot with a white 4px gap inside a teal ring. */ .single-product .hs-swatch-btn.is-active .hs-swatch { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--hs-teal-800); } /* ---------- Bands under the configurator ---------- */ .single-product div.product { --hs-pdp-band-gap: 45px; } /* "Inbegrepen bij jouw nieuwe …": 3px mint edge, 8px radius, 32px padding, * title left (Poppins 25/700 teal), product + items right. */ .single-product .hs-pdp-included { grid-column: 1 / -1; margin-top: var(--hs-pdp-band-gap); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); padding: var(--sp-8); border: 3px solid var(--hs-mint); border-radius: var(--r-lg); } .single-product .hs-pdp-included__title { margin: 0; max-width: 723px; font-family: var(--font-display); font-size: 25px; font-weight: var(--fw-bold); line-height: 1.5; color: var(--heading-color); } /* Top-aligned, so the icons and the "+" sit on the device photo's middle line * (both get its 80px box below) and their names hang under them (30-10-2026). */ .single-product .hs-pdp-included__items { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; gap: var(--sp-8); } .single-product .hs-pdp-included__item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; } /* 80px tall, its own width: the whole device, never a square crop. */ .single-product .hs-pdp-included__img { width: auto; max-width: 120px; height: 80px; object-fit: contain; } /* The in-the-box icons (every item after a "+") a step smaller than the device * photo (Janyar, 30-10-2026). */ .single-product .hs-pdp-included__plus + .hs-pdp-included__item .hs-pdp-included__img { height: 64px; margin-block: 8px; } .single-product .hs-pdp-included__name { font-size: var(--fs-16); line-height: var(--lh-copy); color: var(--fg-1); } .single-product .hs-pdp-included__plus { display: flex; align-items: center; height: 80px; font-family: var(--font-display); font-size: var(--fs-32); font-weight: var(--fw-bold); color: var(--heading-color); line-height: 1; } /* "Productbeschrijving | Specificaties" on a full-bleed mint band: 60px above * and below, two 50px tabs (Poppins 20/600 there, active teal-800 with white, * inactive white), a white 10px-radius card with 20px padding. The band leaves * the 1380px column with a spread shadow + clip-path, so no 100vw and no * horizontal scrollbar. */ .single-product .hs-pdp-info { grid-column: 1 / -1; margin-top: var(--hs-pdp-band-gap); padding-block: 60px; background: var(--hs-mint); box-shadow: 0 0 0 100vmax var(--hs-mint); clip-path: inset(0 -100vmax); display: grid; gap: var(--sp-5); } .single-product .hs-pdp-info__tabs { display: flex; gap: var(--sp-5); } .single-product .hs-pdp-info__tab { flex: 1 1 auto; min-height: 50px; padding: 10px 50px; border: 0; border-radius: var(--r-lg); background: var(--bg-1); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--fs-20); font-weight: var(--fw-bold); line-height: 1.5; cursor: pointer; } .single-product .hs-pdp-info__tab.is-active { background: var(--hs-teal-800); color: var(--fg-on-brand); } .single-product .hs-pdp-info__tab:focus-visible { outline: 3px solid var(--accent-press); outline-offset: 2px; } .single-product .hs-pdp-info__panel { padding: var(--sp-5); background: var(--bg-1); border-radius: var(--r-xl); min-width: 0; } .single-product .hs-pdp-info__panel[hidden] { display: none; } .single-product .hs-pdp-info__panel:focus-visible { outline: 3px solid var(--accent-press); outline-offset: 2px; } /* With the tab strip on, the tab names the panel: the in-panel heading stays * for screen readers and for the no-JS page, where it is the only label. */ .single-product .hs-pdp-info.is-tabbed .hs-pdp-info__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; } /* Description copy: Lato 16 on 24px #252525; its own h2s Poppins 17.6/700 teal, * straight onto the paragraph under them. Full card width, as on the old page. */ .single-product .hs-description__body { color: var(--fg-1); font-size: var(--fs-16); line-height: var(--lh-copy); } .single-product .hs-description__body > * { margin: 0; } .single-product .hs-description__body :where(h2, h3, h4) { font-family: var(--font-display); font-size: 1.1rem; font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--heading-color-sm); } /* Every paragraph closes with 24px; a heading sits straight on the paragraph it * introduces (old page: h2 margin 0, p margin 0 0 24px). */ .single-product .hs-description__body p { color: inherit; margin: 0 0 var(--sp-6); } .single-product .hs-description__body > :last-child, .single-product .hs-description__body p:last-child { margin-bottom: 0; } .single-product .hs-pdp-compact .hs-description__body p { margin-bottom: 0; } .single-product .hs-description__body ul, .single-product .hs-description__body ol { padding-left: var(--sp-5); } .single-product .hs-description__body img { max-width: 100%; height: auto; } /* Folded after about three and a half paragraphs (product.js), the last lines * fading out, and "Lees meer" under it (client, 22-10-2026). A mask, not a white * overlay, so the fade works on any panel colour. */ .single-product .hs-description__body { overflow: hidden; } /* No max-height transition: animating it relays out the page every frame. */ .single-product .hs-description__body.is-folded { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent); } .single-product .hs-readmore { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); padding: 10px 18px; border: 1.5px solid var(--hs-teal-800); border-radius: var(--r-lg); background: var(--bg-1); color: var(--hs-teal-800); font-family: var(--font-display); font-size: var(--fs-15); font-weight: var(--fw-semibold); cursor: pointer; transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out); } .single-product .hs-readmore::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--ease-out); } .single-product .hs-readmore[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); } .single-product .hs-readmore:hover { background: var(--hs-teal-800); color: var(--fg-on-brand); } @media (prefers-reduced-motion: reduce) { .single-product .hs-description__body, .single-product .hs-readmore, .single-product .hs-readmore::after { transition: none; } } /* Specification table in its tab: WooCommerce's attribute table as the old page * draws it — 150px bold label column, 16px rows on 24px, 8px padding, dotted * hairline between rows, no zebra. */ .single-product .hs-pdp-info .hs-specs__table { max-width: none; border-top: 1px dotted var(--border-1); } .single-product .hs-pdp-info .hs-specs__table :is(th, td) { padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; font-size: var(--fs-16); line-height: var(--lh-copy); border-bottom: 1px dotted var(--border-1); background: transparent; color: var(--fg-1); } .single-product .hs-pdp-info .hs-specs__table th { width: 150px; font-weight: var(--fw-bold); } /* Compact PDP (makkelijke nummers): text and table in the column. */ .single-product .hs-pdp-compact { display: grid; gap: var(--sp-4); font-size: var(--fs-15); line-height: var(--lh-copy); } .single-product .hs-pdp-compact .hs-pdp-info__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; } .single-product .hs-pdp-compact .hs-description__body { font-size: var(--fs-15); } /* The number's own table lives in its description (pasted HTML, no classes): * hairline rows, two columns, as the old page draws it. */ .single-product .hs-pdp-compact .hs-description__body table { width: 100%; border-collapse: collapse; margin-top: var(--sp-2); } .single-product .hs-pdp-compact .hs-description__body :is(td, th) { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-2); font-size: var(--fs-14); text-align: left; vertical-align: top; } .single-product .hs-pdp-compact .hs-specs__table th, .single-product .hs-pdp-compact .hs-specs__table td { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-14); } /* The homepage's reviews band and mint welcome block, repeated on the PDP * (hs_render_pdp_home_section() in inc/pdp.php). The wrapper is the grid item, * so it must span the full row — otherwise it lands in the 517px gallery * column and the review cards collapse to 40px (seen on Kinsta 11-10-2026). * The section's own container padding is dropped: the grid column already * is the content width. The mint block goes full-bleed like the bands above. */ .single-product .hs-pdp-home-section { grid-column: 1 / -1; min-width: 0; margin-top: var(--hs-pdp-band-gap); } .single-product .hs-pdp-home-section > .hs-section { margin-top: 0; } .single-product .hs-pdp-home-section .hs-container { padding-inline: 0; } .single-product .hs-pdp-home-section .hs-section--mint { box-shadow: 0 0 0 100vmax var(--hs-mint); clip-path: inset(0 -100vmax); } /* Trade-in band: full-bleed orange, 478px, text column 690px. Dark ink on the * orange (6,66:1) instead of the old white (2,30:1); the button is the theme's * teal fill (white on it 4,5:1+) rather than the old #008999 (4,0:1). */ .single-product .hs-pdp-tradein-band { --focus-ring: var(--focus-ring-on-light); /* dark ring on the orange band; the default teal is 1,8:1 there */ grid-column: 1 / -1; margin-top: var(--hs-pdp-band-gap); min-height: 478px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); background: var(--cta-2); box-shadow: 0 0 0 100vmax var(--cta-2); clip-path: inset(0 -100vmax); color: var(--cta-2-fg); } /* The homepage trade-in band's faint round arrow behind the band (same SVG * as .hs-home-tradein::before in sections.css), client 22-10-2026. */ .single-product .hs-pdp-tradein-band { position: relative; isolation: isolate; } .single-product .hs-pdp-tradein-band::before { content: ""; position: absolute; z-index: -1; top: -6%; left: 34%; width: min(560px, 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; } @media (max-width: 900px) { .single-product .hs-pdp-tradein-band::before { top: 2%; left: auto; right: -10%; width: 70vw; } } .single-product .hs-pdp-tradein-band__body { flex: 0 1 690px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); } .single-product .hs-pdp-tradein-band__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-32); font-weight: var(--fw-bold); line-height: 1; color: inherit; } .single-product .hs-pdp-tradein-band__text { margin: 0; font-size: var(--fs-16); line-height: var(--lh-copy); color: inherit; } .single-product .hs-pdp-tradein-band__btn { padding: var(--sp-4); line-height: 1; } .single-product .hs-pdp-tradein-band__media { flex: 0 1 600px; align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-end; } .single-product .hs-pdp-tradein-band__media img { max-height: 478px; width: auto; max-width: 100%; height: auto; } /* Four USPs in one row: Poppins 20/500, teal icons, 25px above and below. */ .single-product .hs-pdp-uspband { grid-column: 1 / -1; list-style: none; margin: 0; padding: 25px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4) var(--sp-8); } .single-product .hs-pdp-uspband__item { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-20); font-weight: var(--fw-medium); line-height: 1.2; color: var(--fg-1); } .single-product .hs-pdp-uspband__icn { display: inline-flex; color: var(--heading-color); } .single-product .hs-pdp-uspband__icn svg { width: 20px; height: 20px; } /* "Alternatieven": Poppins 38/700 teal, 50px under the USP row. */ .single-product .related.products { margin-top: 50px; } .single-product .related.products > h2 { font-size: var(--fs-38); line-height: 1; color: var(--heading-color); margin: 0 0 var(--sp-8); } @media (max-width: 900px) { .single-product .hs-pdp-included { flex-direction: column; align-items: flex-start; padding: var(--sp-5); gap: var(--sp-5); } .single-product .hs-pdp-included__title { font-size: 22px; } .single-product .hs-pdp-included__items { align-self: center; } .single-product .hs-pdp-info { padding-block: var(--sp-8); } .single-product .hs-pdp-info__tab { padding: 10px var(--sp-3); font-size: var(--fs-16); } .single-product .hs-pdp-tradein-band { flex-direction: column; align-items: stretch; min-height: 0; padding-block: var(--sp-12) 0; gap: var(--sp-6); } .single-product .hs-pdp-tradein-band__title { font-size: var(--fs-24); line-height: 1.2; } .single-product .hs-pdp-tradein-band__media { justify-content: center; } .single-product .hs-pdp-uspband { flex-direction: column; justify-content: flex-start; } .single-product .hs-pdp-uspband__item { font-size: var(--fs-16); } .single-product .related.products > h2 { font-size: 34px; } } /* Phones, measured on the old page at 375px: the title on a 48px line, storage * options 46px tall, the button full width with the stock under it, the two tabs * stacked. (Storage was also one per row; since 30-10-2026 every option group * shares the 170px / two-halves grid.) */ @media (max-width: 767px) { .single-product .product_title.entry-title { line-height: 1.5; } .single-product .hs-seg { min-height: 46px; } .woocommerce div.product form.cart .single_add_to_cart_button { width: 100%; } .single-product .hs-buy > .single_add_to_cart_button, .single-product .hs-buy > .hs-stock-inline, .single-product .hs-buy > .hs-lowstock { flex-basis: 100%; } .single-product .hs-pdp-info__tabs { flex-direction: column; } .single-product .hs-pdp-info__tab { font-size: var(--fs-20); padding-inline: var(--sp-5); } .single-product .hs-pdp-tradein-band__title { font-size: var(--fs-24); line-height: 1; } } /* ---------- The configurator (finished 22-10-2026) ---------- * * "Stel je toestel in 3 stappen samen" over the three steps as a numbered * timeline on the plain page ground (no panel colour, client 22-10-2026): * 1 opslag, 2 kleur, 3 uiterlijk (product.js sorts and renames the rows). * * What you can buy is a card with a clear edge; what you cannot is barely * there: a faint edge, the name very light and struck through. That is the * signal, so no diagonal lines and no labels * (client, 22-10-2026). Storage and colour stay clickable when not in stock; * the uiterlijk does not. * * A step with a choice gets a filled circle and a teal line down to the next; * an open step (the uiterlijk when nothing is in stock for the picked storage + * colour) stays an outline, so the eye lands on what is still missing. */ .single-product .variations_form { --hs-panel: var(--bg-1); --hs-off-fg: color-mix(in srgb, var(--fg-1) 24%, var(--hs-panel)); --hs-off-edge: color-mix(in srgb, var(--hs-teal-800) 12%, var(--hs-panel)); --hs-step-size: 28px; --hs-step-line: color-mix(in srgb, var(--hs-teal) 25%, var(--hs-panel)); } .single-product .hs-pdp-config-title { margin: var(--sp-6) 0 var(--sp-5); font-family: var(--font-display); font-size: var(--fs-20); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg-2); text-wrap: balance; } .single-product div.product form.cart table.variations { margin: 0 0 var(--sp-5); } /* Timeline: number, label, line. */ .single-product .variations tbody { counter-reset: hs-step; } .single-product .variations tr { position: relative; counter-increment: hs-step; margin-bottom: 0; padding: 0 0 var(--sp-8) calc(var(--hs-step-size) + var(--sp-4)); } .single-product .variations tr:last-child { padding-bottom: 0; } .single-product .variations tr::before { content: counter(hs-step); position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; box-sizing: border-box; width: var(--hs-step-size); height: var(--hs-step-size); border: 2px solid var(--hs-teal); border-radius: var(--r-pill); background: var(--bg-1); color: var(--hs-teal); font-family: var(--font-display); font-size: var(--fs-14); font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); } .single-product .variations tr.is-done::before { background: var(--hs-teal); color: var(--fg-on-brand); } .single-product .variations tr::after { content: ""; position: absolute; top: calc(var(--hs-step-size) + var(--sp-1)); bottom: var(--sp-1); left: calc(var(--hs-step-size) / 2 - 1px); width: 2px; border-radius: 1px; background: var(--hs-step-line); transition: background-color 200ms var(--ease-out); } .single-product .variations tr.is-done::after { background: var(--hs-teal); } .single-product .variations tr:last-child::after { display: none; } /* Step heading: the title in ink, the chosen value in teal after it. The row * is the circle's height, so the text sits on the number's centre line. */ /* Inline flow, not flex: on a narrow column ": 512GB" wraps with the words * instead of dropping onto a line of its own. */ .single-product div.product form.cart .variations th.label { display: block; padding-top: calc((var(--hs-step-size) - 22px) / 2); margin-bottom: var(--sp-4); line-height: 22px; } .single-product div.product form.cart .variations th.label label { display: inline; } .single-product .variations th.label .hs-help { vertical-align: -6px; } .single-product div.product form.cart .variations th.label label { font-family: var(--font-display); font-size: var(--fs-16); font-weight: var(--fw-regular); line-height: 22px; color: var(--fg-1); } .single-product .variations .hs-label-value { font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: 22px; color: var(--hs-teal-800); } /* Help trigger: a drawn question mark (inc/pdp.php hands product.js the * theme's own icon), not the Unicode info glyph. 24px target, 18px glyph. */ .single-product .variations th.label .hs-help { width: 24px; height: 24px; margin-left: var(--sp-1); background: transparent; color: var(--hs-teal-800); transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out); } .single-product .variations th.label .hs-help .hs-icon { width: 18px; height: 18px; } .single-product .variations th.label .hs-help:hover { background: var(--hs-teal-800); color: var(--fg-on-brand); } /* Cards you can buy: white with a clear edge. .hs-options, not .variations, so * the battery cards outside the variations table match (30-10-2026). */ .single-product .hs-options .hs-seg, .single-product .hs-options .hs-grade { background: var(--bg-1); border-color: var(--border-2); color: var(--fg-1); } .single-product .hs-options .hs-seg.is-active, .single-product .hs-options .hs-grade.is-active, .single-product .hs-options .hs-seg.is-active:focus:not(:focus-visible), .single-product .hs-options .hs-grade.is-active:focus:not(:focus-visible) { background: var(--bg-1); border-color: var(--hs-teal-800); box-shadow: inset 0 0 0 1px var(--hs-teal-800); } .single-product .variations .hs-seg-delta { color: var(--fg-2); } .single-product .variations .hs-grade-short { color: var(--fg-2); } .single-product .variations .hs-grade-price { color: var(--hs-teal-800); } /* Chip options (Netwerk, Office, the battery, a colour without a hex) are option * cards like storage and uiterlijk: white, 52px, the cards' radius, and selected * = a teal-800 edge — not the pill with a teal fill of the generic .hs-chip in * components.css (Janyar, 30-10-2026; was the battery's own look only). The * label wraps inside the 170px below. */ .single-product .hs-options .hs-chip { justify-content: center; flex-wrap: wrap; align-content: center; gap: 0 .3em; min-height: 52px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--bg-1); color: var(--fg-1); font-family: var(--font-display); font-weight: var(--fw-semibold); white-space: normal; text-align: center; line-height: 1.25; } .single-product .hs-options .hs-chip.is-active { border-color: var(--hs-teal-800); box-shadow: inset 0 0 0 1px var(--hs-teal-800); } /* The tick under the picked option card — storage, Netwerk, battery * (30-10-2026). It takes the line of the price difference, which the picked * card does not show. */ .single-product .hs-seg-check { display: none; color: var(--hs-teal-800); line-height: 0; } .single-product .hs-seg.is-active .hs-seg-check { display: block; } .single-product .hs-seg.is-active .hs-seg-delta { display: none; } /* An option in stock nowhere (storage, colour, Netwerk) cannot be picked, like * an uiterlijk; no lift or zoom on hover either. */ .single-product .hs-options .hs-seg[aria-disabled="true"], .single-product .hs-options .hs-swatch-btn[aria-disabled="true"] { cursor: not-allowed; } .single-product .hs-seg-check .hs-icon { width: 14px; height: 14px; } /* One width for every option button but the colour dots: 170px, as many per row * as fit (Janyar, 30-10-2026). Replaces the per-group grids of the old-page * parity (storage and uiterlijk in three columns, four grades two by two, the * battery in two). Where two 170px cards do not fit (phones) it is two equal * halves instead of one card on a row. */ .single-product .hs-options:not(.hs-options--color) { display: grid; grid-template-columns: repeat(auto-fill, min(170px, calc(50% - var(--sp-3) / 2))); gap: var(--sp-3); } /* Cards you cannot buy: no card. */ .single-product .hs-options .hs-seg.is-unavailable, .single-product .hs-options .hs-grade.is-unavailable, .single-product .hs-options .hs-chip.is-unavailable { background: transparent; border-color: var(--hs-off-edge); box-shadow: none; color: var(--hs-off-fg); } .single-product .hs-options .is-unavailable .hs-seg-label, .single-product .hs-options .is-unavailable .hs-grade-name, .single-product .hs-options .hs-swatch-btn.is-unavailable .hs-swatch-label, .single-product .hs-options .hs-chip.is-unavailable { color: var(--hs-off-fg); text-decoration: line-through; text-decoration-thickness: 1px; } .single-product .hs-options .is-unavailable .hs-grade-short, .single-product .hs-options .is-unavailable .hs-seg-delta { color: var(--hs-off-fg); } .single-product .hs-options .is-unavailable .hs-grade-price { display: none; } /* "Uitverkocht" where the price was, on the uiterlijk only (product.js keeps * the word visually hidden on storage and colour). */ .single-product .hs-options--condition .hs-opt-status { margin-top: var(--sp-1); font-family: var(--font-display); font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--hs-off-fg); } .single-product .hs-options--condition .hs-opt-status:empty { display: none; } .single-product .hs-options .hs-grade.is-unavailable { cursor: not-allowed; } /* Picked anyway (storage or colour clicked while not in stock): the edge says * "chosen", the faint content still says "not in stock". */ .single-product .hs-options .hs-seg.is-unavailable.is-active, .single-product .hs-options .hs-chip.is-unavailable.is-active { border-color: var(--hs-teal-800); box-shadow: inset 0 0 0 1px var(--hs-teal-800); } /* Colours: the dot, a tick when chosen, the name beneath. */ .single-product .variations .hs-swatch { position: relative; } .single-product .variations .hs-swatch-dot { border-color: color-mix(in srgb, var(--fg-1) 25%, transparent); } .single-product .variations .hs-swatch-btn.is-active .hs-swatch { box-shadow: 0 0 0 3px var(--hs-panel), 0 0 0 5px var(--hs-teal-800); } .single-product .variations .hs-swatch-label { color: var(--fg-1); } .single-product .variations .hs-swatch-btn.is-active .hs-swatch-label { font-weight: var(--fw-bold); } .hs-swatch-tick { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-on-brand); opacity: 0; transform: scale(0.6); transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out); pointer-events: none; } /* A white tick also on mid-light dots like Brons or Mint (30-10-2026); a soft * dark edge keeps it legible there. */ .hs-swatch-tick .hs-icon { filter: drop-shadow(0 0 1.5px rgb(0 0 0 / .45)); } .hs-swatch-btn.is-light .hs-swatch-tick { color: var(--fg-1); } .hs-swatch-btn.is-light .hs-swatch-tick .hs-icon { filter: none; } .hs-swatch-tick .hs-icon { width: 22px; height: 22px; } .hs-swatch-btn.is-active .hs-swatch-tick { opacity: 1; transform: none; } /* Greyed out, but not colourless: half the hue stays, so a sold-out Rood is * still recognisably red, just as faint as the other unavailable options. */ .single-product .hs-options .hs-swatch-btn.is-unavailable .hs-swatch-dot { opacity: 0.35; filter: grayscale(0.5); } .single-product .hs-options .hs-swatch-btn.is-unavailable .hs-swatch-tick { opacity: 0; } @media (max-width: 560px) { .single-product .variations_form { --hs-step-size: 26px; } .single-product .variations tr { padding-left: calc(var(--hs-step-size) + var(--sp-3)); } .single-product .variations .hs-options--color { gap: var(--sp-4); } } @media (prefers-reduced-motion: reduce) { .hs-swatch-tick { transform: none; } } /* ---------- Hover on the option cards (22-10-2026) ---------- * Only where there is a real pointer (desktop / laptop): a touch screen would * leave the card "stuck" lifted after a tap. Storage and colour lift even when * not in stock, because they stay clickable; an uiterlijk that is not in stock * does not, it cannot be picked. Reduced motion keeps the colour change and * drops the movement. */ .single-product .hs-seg, .single-product .hs-grade, .single-product .hs-options .hs-chip { transition: transform 160ms var(--ease-out, ease-out), border-color 160ms ease-out, box-shadow 160ms ease-out; } .single-product .hs-swatch { transition: transform 160ms var(--ease-out, ease-out), box-shadow 160ms ease-out; } @media (hover: hover) and (pointer: fine) { .single-product .hs-options .hs-seg:not([aria-disabled="true"]):hover, .single-product .hs-options .hs-chip:hover, .single-product .hs-options .hs-grade:not(.is-unavailable):hover { transform: translateY(-2px); border-color: var(--hs-teal-800); box-shadow: var(--shadow-2); } .single-product .hs-options .hs-seg.is-active:hover, .single-product .hs-options .hs-chip.is-active:hover, .single-product .hs-options .hs-grade.is-active:hover { box-shadow: inset 0 0 0 1px var(--hs-teal-800), var(--shadow-2); } .single-product .hs-options .hs-swatch-btn:not([aria-disabled="true"]):hover .hs-swatch { transform: scale(1.08); } .single-product .hs-options .hs-swatch-btn:not(.is-active):hover .hs-swatch { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 3px var(--border-2); } .single-product .hs-options .hs-swatch-btn:hover .hs-swatch-label { color: var(--fg-1); } .single-product .hs-options .hs-swatch-btn.is-unavailable:hover .hs-swatch-label { color: var(--fg-2); } } @media (prefers-reduced-motion: reduce) { .single-product .hs-options .hs-seg:hover, .single-product .hs-options .hs-chip:hover, .single-product .hs-options .hs-grade:hover, .single-product .hs-options .hs-swatch-btn:hover .hs-swatch { transform: none; } } /* ---------- Klarna line under the button (22-10-2026) ---------- * The badge, "Shop nu. Betaal later." and "Meer weten" are one button that * opens the Klarna popup (inc/pdp-popups.php). Without popup content it is the * same line as plain text. */ .single-product .hs-bnpl { display: flex; align-items: center; gap: var(--sp-2); } .single-product .hs-bnpl__btn { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); padding: 0; border: 0; background: none; font: inherit; color: var(--fg-1); text-align: left; cursor: pointer; } .single-product .hs-klarna-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--sp-2); border-radius: 6px; /* Klarna's own badge shape */ background: var(--klarna-pink); color: var(--fg-1); font-family: var(--font-display); font-size: var(--fs-13, 0.8125rem); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1; } .single-product img.hs-bnpl__logo { display: block; width: auto; height: 24px; } .single-product .hs-bnpl__more { font-weight: var(--fw-semibold); color: var(--hs-teal-800); text-decoration: underline; text-underline-offset: 3px; } .single-product .hs-bnpl__btn:hover .hs-bnpl__more { text-decoration-thickness: 2px; } /* ---------- Info popups (22-10-2026) ---------- * Klarna, uiterlijk and batterij, from