/* =====================================================================
   Spothelder — shop.css (laadt na style.css)
   Een winkel voor reclameontwerp. Wit en rustig in de basis; de kleur
   zit in de producten zelf. Geist voor alle interface-tekst, het blauw
   uit het logo voor elke koopknop. Producten boven de vouw.
   1 Tokens · 2 Basis · 3 Topbalk + header · 4 Knoppen
   5 Voorbeeldontwerpen · 6 Productbeelden · 7 Hero · 8 Producten
   9 Secties · 10 Footer · 11 Bestellen/account · 12 Responsief
   ===================================================================== */

/* 1 Tokens ----------------------------------------------------------- */
:root {
  --bg: #ffffff;
  --soft: #f4f3f0;
  --soft-2: #eae8e3;
  --card: #ffffff;
  --tint: var(--soft);
  --ink: #0c0c0e;
  --ink-2: #3d3d42;
  --muted: #68686e;
  --line: #e6e4df;
  --line-2: #d3d1cb;
  --blue: #1553f0;
  --blue-2: #0b40c9;
  --blue-soft: #e8eeff;
  --sun: #ffd23f;
  --ok: #148a4b;
  --ok-soft: #e3f4ea;
  --err: #c9302c;

  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: var(--font);

  --max: 1680px;
  --pad: clamp(16px, 2vw, 40px);
  --gap: 16px;
  --r: 16px;
  --r-sm: 10px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sh-1: 0 1px 2px rgba(12,12,14,.05);
  --sh-f: 0 1px 1px rgba(12,12,14,.08), 0 8px 16px -6px rgba(12,12,14,.22), 0 26px 44px -22px rgba(12,12,14,.4);

  /* aliassen die style.css gebruikt */
  --red: var(--blue); --red-dark: var(--blue-2); --red-soft: var(--blue-soft);
  --accent: var(--blue); --accent-dark: var(--blue-2); --accent-soft: var(--blue-soft);
  --espresso: var(--ink); --line-soft: var(--line);
  --lift: var(--sh-f); --shadow: var(--sh-1); --r-lg: var(--r);
}

/* 2 Basis ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
main { flex: 1 0 auto; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul[class], ol[class] { list-style: none; padding: 0; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 12px; top: -80px; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 8px; z-index: 99; }
.skip:focus { top: 12px; }
html { background: var(--bg); color-scheme: light; scroll-padding-top: 90px; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body::after { display: none; }
h1, h2, h3 { font-family: var(--font); font-variation-settings: normal; font-weight: 650; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); }
h1 em, h2 em, h3 em { font-style: normal; font-weight: inherit; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wrap { max-width: calc(var(--max) + 2 * var(--pad)); padding: 0 var(--pad); margin: 0 auto; }
.link { color: var(--blue); }
.kick { font: 500 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }

/* 3 Topbalk + header ------------------------------------------------- */
.sh-top { background: var(--ink); color: rgba(255,255,255,.78); font-size: 13px; }
.sh-top__in { display: flex; align-items: center; justify-content: center; gap: 36px; height: 36px; white-space: nowrap; }
.sh-top b { color: #fff; font-weight: 600; }
.sh-top__in > span:first-child span { color: #fff; font-weight: 600; }
.sh-top__in > span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.35); margin: 0 36px 2px -38px; vertical-align: middle; }
.sh-top__in > span + span::before { margin: 0 14px 2px 0; }

.sh-hd { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
.sh-hd__in { display: flex; align-items: center; gap: 36px; height: 72px; }
.sh-hd__logo { display: block; flex: none; }
.sh-hd__logo img { height: 40px; width: auto; }
.sh-hd__nav { display: flex; gap: 2px; }
.sh-hd__nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; padding: 9px 13px; border-radius: 9px; transition: color .2s, background-color .2s; }
.sh-hd__nav a:hover { color: var(--ink); background: var(--soft); }
.sh-hd__tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sh-hd__link, .sh-hd__cart { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 11px; font-size: 15px; font-weight: 550; text-decoration: none; white-space: nowrap; }
.sh-hd__link { color: var(--ink-2); }
.sh-hd__link:hover { color: var(--ink); background: var(--soft); }
.sh-hd__cart { background: var(--ink); color: #fff; padding: 0 18px; transition: background-color .2s; }
.sh-hd__cart:hover { background: var(--blue); }
.sh-hd svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-hd .tool__badge { position: static; display: inline-block; background: var(--sun); color: var(--ink); font-size: 12.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; min-width: 0; height: auto; line-height: 1.2; }
.menu-btn { display: none; height: 44px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line-2); background: #fff; font-weight: 600; font-size: 15px; }

/* 4 Knoppen ---------------------------------------------------------- */
.btn2, .sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 12px; font: 600 16px/1 var(--font); text-decoration: none; border: 0; white-space: nowrap; cursor: pointer; transition: background-color .2s, box-shadow .2s, color .2s; }
.btn2 svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.btn2:hover svg { transform: translateX(3px); }
.btn2--blue, .sh-btn--blue { background: var(--blue); color: #fff; }
.btn2--blue:hover, .sh-btn--blue:hover { background: var(--blue-2); }
.btn2--line, .sh-btn--line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn2--line:hover, .sh-btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn2--full { width: 100%; }

/* 5 Voorbeeldontwerpen (schalen met de breedte van het kader) --------- */
.dz { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8cqw; box-sizing: border-box; overflow: hidden; text-align: left; }
.dz small { display: block; font: 600 4.2cqw/1.1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.dz b { display: block; }
.dz em { font-style: normal; display: block; }

.dz--garage { background: #ffcc00; color: #111; }
.dz--garage b { font: 400 25cqw/.86 "Anton", Impact, sans-serif; text-transform: uppercase; margin-top: auto; letter-spacing: -0.01em; }
.dz--garage .dz__price { position: absolute; right: 7cqw; top: 16cqw; width: 30cqw; aspect-ratio: 1; border-radius: 50%; background: #111; color: #ffcc00; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 400 11cqw/1 "Anton", Impact, sans-serif; rotate: 8deg; }
.dz--garage .dz__price i { font: 600 3.6cqw/1 var(--font); font-style: normal; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: 1cqw; }
.dz--garage em { margin: 5cqw -8cqw -8cqw; padding: 4.5cqw 8cqw; background: #111; color: #fff; font: 600 4.4cqw/1 var(--font); }
.dz--garage.dz--sq b { font-size: 23cqw; }

.dz--bakery { background: #f1e3c8; color: #3b2415; }
.dz--bakery small { color: #b8431f; }
.dz--bakery b { font: 900 13.5cqw/.92 "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144; letter-spacing: -0.035em; margin-top: auto; hyphens: manual; }
.dz--bakery em { font: 500 4.6cqw/1.35 var(--font); margin-top: 5cqw; padding-top: 4cqw; border-top: .5cqw solid #3b2415; }
.dz--bakery .dz__stamp { position: absolute; right: 7cqw; top: 13cqw; width: 26cqw; aspect-ratio: 1; border-radius: 50%; background: #b8431f; color: #f1e3c8; display: grid; place-items: center; font: 900 6cqw/1 "Fraunces", Georgia, serif; rotate: -12deg; }

.dz--salonA { background: #111; color: #ff9fc0; }
.dz--salonA small { color: #fff; }
.dz--salonA b { font: 400 31cqw/.85 "Anton", Impact, sans-serif; margin-top: auto; letter-spacing: -0.02em; }
.dz--salonA em { font: 600 5.4cqw/1.15 var(--font); color: #fff; margin-top: 3cqw; }
.dz--salonA span { align-self: flex-start; margin-top: 5cqw; font: 700 4.4cqw/1 var(--font); background: #ff9fc0; color: #111; padding: 2.4cqw 3.6cqw; border-radius: 99px; }

.dz--salonB { background: #ff9fc0; color: #111; justify-content: space-between; }
.dz--salonB b { font: 800 14cqw/.92 "Bricolage Grotesque", var(--font); letter-spacing: -0.05em; }
.dz--salonB span { align-self: flex-start; font: 400 9cqw/1 "Anton", Impact, sans-serif; background: #111; color: #ff9fc0; padding: 3cqw 5cqw; border-radius: 2cqw; }

.dz--gym { background: #0d0d0d; color: #d4ff3f; justify-content: flex-end; padding-bottom: 16cqw; }
.dz--gym small { color: #fff; position: absolute; top: 14cqw; left: 8cqw; }
.dz--gym b { font: 400 26cqw/.86 "Anton", Impact, sans-serif; text-transform: uppercase; }
.dz--gym em { font: 600 5.4cqw/1 var(--font); color: #fff; margin-top: 6cqw; }

.dz--florist { background: #1f3b2d; color: #f3ead8; }
.dz--florist small { color: #f08a6b; }
.dz--florist b { font: 800 19cqw/.9 "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144; letter-spacing: -0.04em; margin-top: auto; }
.dz--florist em { font: 500 5.4cqw/1.2 var(--font); margin-top: 4cqw; }
.dz--florist span { align-self: flex-start; margin-top: 5cqw; font: 700 4.4cqw/1 var(--font); background: #f08a6b; color: #1f3b2d; padding: 2.6cqw 3.8cqw; border-radius: 99px; }
.dz--florist::before { content: ""; position: absolute; right: -14cqw; top: -14cqw; width: 62cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #f08a6b 0 18%, transparent 18.5%), conic-gradient(from 0deg, #f3b7a3 0 12.5%, #f08a6b 0 25%, #f3b7a3 0 37.5%, #f08a6b 0 50%, #f3b7a3 0 62.5%, #f08a6b 0 75%, #f3b7a3 0 87.5%, #f08a6b 0); -webkit-mask: radial-gradient(circle, #000 69%, transparent 70%); mask: radial-gradient(circle, #000 69%, transparent 70%); opacity: .95; }

.dz--cafe { background: #c8553d; color: #fbeee0; }
.dz--cafe b { font: 800 22cqw/.88 "Bricolage Grotesque", var(--font); letter-spacing: -0.055em; margin-top: auto; }
.dz--cafe em { font: 500 5.4cqw/1.2 var(--font); margin-top: 4cqw; }
.dz--cafe .dz__stamp { position: absolute; right: 7cqw; top: 12cqw; width: 28cqw; aspect-ratio: 1; border-radius: 50%; border: .6cqw solid #fbeee0; display: grid; place-items: center; font: 700 4.6cqw/1 var(--font); text-transform: uppercase; letter-spacing: .08em; rotate: 10deg; }

/* 6 Productbeelden --------------------------------------------------- */
.pv { position: absolute; inset: 0; display: block; }
.pv__f { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: translate(-50%, -50%) rotate(var(--r)); display: block; background: #fff; box-shadow: var(--sh-f); overflow: hidden; container-type: inline-size; transition: transform .5s var(--ease); }
.pv__f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv__f--a4 { aspect-ratio: 1 / 1.414; border-radius: 2px; }
.pv__f--a5 { aspect-ratio: 1 / 1.414; border-radius: 2px; }
.pv__f--post { aspect-ratio: 4 / 5; border-radius: 6px; }
.pv__f--sq { aspect-ratio: 1; border-radius: 6px; }
.pv__f--story { aspect-ratio: 9 / 16; border-radius: 10px; }
.pv__f--flat { position: relative; left: auto; top: auto; width: 100%; transform: none; }
.pv__f--line { background: rgba(255,255,255,.35); box-shadow: none; border: 1.5px dashed rgba(12,12,14,.25); display: grid; place-items: center; }
.pv__f--line b { font: 600 13px/1 var(--font); color: var(--muted); }
.pv__f--plus b { font-size: 28px; font-weight: 400; color: var(--blue); }
.pv__play { position: absolute; left: 7%; bottom: 4%; width: 22%; aspect-ratio: 1; min-width: 22px; max-width: 40px; border-radius: 50%; background: rgba(255,255,255,.92); }
.pv__play::after { content: ""; position: absolute; left: 56%; top: 50%; transform: translate(-50%, -50%); border-left: 7px solid var(--ink); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.pv__bar { position: absolute; left: 7%; right: 7%; top: 4%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.4); }
.pv__bar::after { content: ""; position: absolute; inset: 0 58% 0 0; border-radius: inherit; background: #fff; }
.pv__time { position: absolute; right: 7%; bottom: 4%; font: 600 10px/1 var(--font); font-style: normal; color: #fff; background: rgba(0,0,0,.45); padding: 3px 5px; border-radius: 4px; }
.pv__tag { position: absolute; z-index: 2; right: 7px; bottom: 7px; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: #fff; color: var(--ink); font: 700 12.5px/1 var(--font); font-style: normal; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.pv__f--ig { border-radius: 10px; background: #fff; display: flex; flex-direction: column; }
.ig__top { display: flex; align-items: center; gap: 6px; padding: 7px 8px; font-size: 10px; line-height: 1.1; }
.ig__top i { width: 18px; height: 18px; border-radius: 50%; background: #ffcc00; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #e1306c; flex: none; }
.ig__top b { font-weight: 650; color: var(--ink); }
.ig__top small { color: var(--muted); font-size: 9px; margin-left: auto; }
.ig__img { position: relative; display: block; aspect-ratio: 4 / 5; container-type: inline-size; }
.ig__bar { display: flex; gap: 8px; padding: 7px 8px 8px; }
.ig__bar svg { width: 15px; height: 15px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
a:hover .pv__f:nth-child(1), .prod:hover .pv__f:nth-child(1) { transform: translate(-53%, -51%) rotate(calc(var(--r) - 1.5deg)); }
a:hover .pv__f:nth-child(2), .prod:hover .pv__f:nth-child(2) { transform: translate(-47%, -52%) rotate(calc(var(--r) + 1.5deg)); }
a:hover .pv__f:nth-child(3), .prod:hover .pv__f:nth-child(3) { transform: translate(-45%, -50%) rotate(calc(var(--r) + 2deg)); }
.prod:hover .pv--reel .pv__f { transform: translate(-50%, -52%) scale(1.03); }

/* achtergrond per product */
html .prod__vis--social { background: #dfe6ff !important; }
html .prod__vis--print { background: #ece2cf !important; }
html .prod__vis--abtest { background: #ffe0ea !important; }
html .prod__vis--reel { background: #232326 !important; }
html .prod__vis--campagne { background: #e9e2cf !important; }
html .prod__vis--custom { background: #f4ddd3 !important; }

/* 7 Hero ------------------------------------------------------------- */
.hx { padding: var(--gap) 0 0; }
.hx__grid { display: grid; grid-template-columns: minmax(0, 4.3fr) minmax(0, 4.9fr) minmax(0, 2.8fr); grid-template-rows: minmax(0, 1fr); gap: var(--gap); height: clamp(380px, 43vh, 414px); }
.hx__intro { background: var(--soft); border-radius: var(--r); padding: clamp(28px, 2.4vw, 44px) clamp(28px, 2.8vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.hx__intro .kick { margin-bottom: 20px; }
.hx__intro h1 { font-size: clamp(34px, 2.45vw, 48px); line-height: 1; font-weight: 650; letter-spacing: -0.05em; }
.hx__lead { margin: 18px 0 24px; max-width: 44ch; color: var(--ink-2); font-size: 17px; line-height: 1.5; }
.hx__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.hx__trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 14px; color: var(--ink-2); }
.hx__trust li { display: inline-flex; align-items: center; gap: 7px; }
.hx__trust svg { width: 17px; height: 17px; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.hx__show { position: relative; display: block; border-radius: var(--r); overflow: hidden; background: #e9e2cf; text-decoration: none; color: var(--ink); }
.hx__stage { position: absolute; inset: 0 0 84px; }
.hx__lbl { position: absolute; z-index: 3; font: 550 12px/1 var(--font); padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--ink); white-space: nowrap; box-shadow: var(--sh-1); }
.hx__lbl--1 { left: 5%; top: 6%; }
.hx__lbl--2 { right: 5%; top: 6%; }
.hx__lbl--3 { display: none; }
.hx__cap { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 66px; display: flex; align-items: center; gap: 16px; padding: 0 10px 0 18px; border-radius: 12px; background: #fff; box-shadow: var(--sh-1); }
.hx__capt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hx__cap small { font: 600 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 5px; }
.hx__cap b { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
.hx__cap em { font-style: normal; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx__price { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.hx__go { flex: none; height: 46px; padding: 0 16px; border-radius: 10px; background: var(--blue); color: #fff; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; transition: background-color .2s; }
.hx__go::before { content: "Bestel"; }
.hx__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.hx__show:hover .hx__go { background: var(--blue-2); }
.hx__show:hover .hx__go svg { transform: translateX(3px); }

.hx__side { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--gap); min-height: 0; }
.hx__ab { position: relative; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: #ffe0ea; color: var(--ink); text-decoration: none; min-height: 0; }
.hx__abvis { position: relative; flex: 1; min-height: 0; }
.hx__abvis .pv__f { --w: 40% !important; }
.hx__abtxt { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 18px 16px; }
.hx__abtxt small { display: block; font: 600 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #b0355f; margin-bottom: 6px; }
.hx__abtxt b { display: block; font-size: 19px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; }
.hx__abp { flex: none; font-size: 16px; font-weight: 700; padding: 9px 11px; border-radius: 9px; background: #fff; color: var(--ink); transition: background-color .2s, color .2s; }
.hx__ab:hover .hx__abp { background: var(--blue); color: #fff; }

.hx__ready { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r); background: var(--soft); }
.hx__ready > div:last-child { display: flex; flex-direction: column; min-width: 0; }
.hx__ready small { font: 600 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ok); margin-bottom: 5px; }
.hx__ready b { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; }
.hx__ready > div > span { font-size: 13px; color: var(--muted); }
.cal { flex: none; width: 54px; border-radius: 10px; overflow: hidden; text-align: center; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.cal small { display: block; background: var(--blue); color: #fff !important; font: 600 10.5px/1 var(--font) !important; letter-spacing: .1em !important; text-transform: uppercase; padding: 5px 0 !important; margin: 0 !important; }
.cal b { display: block; font-size: 23px !important; font-weight: 700 !important; padding: 5px 0 6px; letter-spacing: -0.02em; }

/* 8 Producten -------------------------------------------------------- */
.sx { padding: clamp(64px, 6.5vw, 112px) 0 0; }
.sx--prod { padding-top: 24px; }
.sx--prod .sx__head { margin-bottom: 14px; }
.sx__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.sx__head h2 { font-size: clamp(28px, 2.2vw, 40px); }
.sx__head p { color: var(--muted); font-size: 14.5px; max-width: 64ch; text-align: right; }

.prods { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.prods .prod { position: relative; display: flex; flex-direction: column; animation: none; background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none; transform: none; }
.prods .prod__vis { position: relative; display: block; aspect-ratio: 1 / .72; margin: 0; border-radius: var(--r); overflow: hidden; }
.prod__vis::after { display: none; }
.prod__vis .vis { display: none; }
.prod__flag { position: absolute; z-index: 3; right: 10px; top: 10px; font: 650 12px/1 var(--font); padding: 6px 9px; border-radius: 7px; background: var(--sun); color: var(--ink); }
.prod__eta { position: absolute; z-index: 3; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; font: 550 12px/1 var(--font); padding: 6px 9px; border-radius: 7px; background: rgba(255,255,255,.94); color: var(--ink); }
.prod__eta i { width: 6px; height: 6px; border-radius: 50%; background: #22a861; }
.prod__body { display: flex; flex-direction: column; flex: 1; padding: 14px 2px 0; }
.prod__cat { font: 600 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.prod__name { font-size: 19px; font-weight: 650; letter-spacing: -0.03em; margin: 0; }
.prod__name a { text-decoration: none; }
.prod__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.prod__spec { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.prod__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 14px; }
.prod__price { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; display: flex; flex-direction: column; line-height: 1; }
.prod__price small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-bottom: 3px; }
.prod__btn { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; border-radius: 10px; background: var(--soft); color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 600; transition: background-color .2s, color .2s; }
.prod__btn svg { width: 16px; height: 16px; }
.prod:hover .prod__btn, .prod--popular .prod__btn { background: var(--blue); color: #fff; }

/* 9 Secties ---------------------------------------------------------- */
.steps2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.steps2 li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 22px 24px; background: var(--soft); border-radius: var(--r); }
.steps2 span { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; font-size: 14px; font-weight: 700; color: var(--blue); }
.steps2 b { font-size: 16px; font-weight: 650; }
.steps2 small { font-size: 13.5px; color: var(--muted); }

.cfg { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--gap); }
.cfg__main { background: var(--soft); border-radius: var(--r); padding: clamp(22px, 2.2vw, 36px); }
.cfg__sum { background: #fff; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); padding: 12px 12px 20px; display: flex; flex-direction: column; gap: 14px; }
.cfg__lbl { font: 600 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.cfg__lbl:not(:first-child) { margin-top: 28px; }
.cfg__prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cfg__prods button, .cfg__adds button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 58px; padding: 10px 16px; border-radius: 12px; border: 0; box-shadow: inset 0 0 0 1px var(--line); background: #fff; text-align: left; font-size: 15px; font-weight: 550; color: var(--ink); transition: box-shadow .15s, background-color .15s; }
.cfg__prods button:hover, .cfg__adds button:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.cfg__prods small, .cfg__adds small { font-weight: 550; color: var(--muted); font-size: 14px; }
.cfg__prods [aria-checked="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.cfg__prods [aria-checked="true"] small { color: rgba(255,255,255,.7); }
.cfg__adds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cfg__adds button { justify-content: flex-start; }
.cfg__adds button span { flex: 1; }
.cfg__adds i { flex: none; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--line-2); position: relative; }
.cfg__adds [aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--blue); background: var(--blue-soft); }
.cfg__adds [aria-pressed="true"] i { background: var(--blue); box-shadow: none; }
.cfg__adds [aria-pressed="true"] i::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cfg__adds button:disabled { opacity: .45; cursor: not-allowed; }
.cfg__note { margin-top: 22px; font-size: 13.5px; color: var(--muted); max-width: 72ch; }
.cfg__vis { position: relative; flex: none; aspect-ratio: 1 / .66; border-radius: 12px; overflow: hidden; }
.cfg__rows { display: flex; flex-direction: column; padding: 0 10px; }
.cfg__row { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cfg__row span { color: var(--muted); }
.cfg__row b { font-weight: 600; }
.cfg__row--total { border: 0; padding-top: 16px; }
.cfg__row--total span { color: var(--ink); font-weight: 550; }
.cfg__row--total b { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; }
.cfg__sum .btn2 { margin: 0 10px; width: auto; }

.io2 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 56px minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.io2__intro { padding: 8px 24px 8px 0; display: flex; flex-direction: column; justify-content: center; }
.io2__intro h2 { font-size: clamp(28px, 2.2vw, 40px); max-width: 16ch; }
.io2__intro p { margin-top: 14px; color: var(--ink-2); max-width: 44ch; }
.io2__col { background: var(--soft); border-radius: var(--r); padding: 24px; }
.io2__col--out { background: var(--ink); color: #fff; }
.io2__col--out .cfg__lbl { color: rgba(255,255,255,.6); }
.io2__col ul { display: flex; flex-direction: column; gap: 10px; }
.io2__col li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.io2__col li span { flex: none; width: 54px; font: 600 12px/1 var(--font); letter-spacing: .04em; text-align: center; padding: 9px 0; border-radius: 8px; background: #fff; color: var(--ink); }
.io2__col--out li span { background: var(--blue); color: #fff; }
.io2__arrow { display: grid; place-items: center; }
.io2__arrow svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.gal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); align-items: end; }
.gal figure { margin: 0; }
.gal img, .gal__d { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: var(--sh-f); }
.gal__d { position: relative; border-radius: 8px; overflow: hidden; }
.gal__d .pv__f { box-shadow: none; }
.gal figcaption { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; font-size: 14px; }
.gal figcaption b { font-weight: 600; }
.gal figcaption span { color: var(--muted); }

.faq2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 80px); }
.faq2__side h2 { font-size: clamp(28px, 2.2vw, 40px); }
.faq2__rules { margin-top: 22px; padding: 22px 24px; border-radius: var(--r); background: var(--soft); font-size: 14.5px; color: var(--ink-2); }
.faq2__rules b { display: block; color: var(--ink); margin-bottom: 6px; font-weight: 600; }
.faq2__rules a { color: var(--blue); }
.faq2__list { border-top: 1px solid var(--ink); }
.faq2__list details { border-bottom: 1px solid var(--line-2); }
.faq2__list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font: 600 17px/1.3 var(--font); letter-spacing: -0.01em; cursor: pointer; }
.faq2__list summary::-webkit-details-marker { display: none; }
.faq2__list summary::after { content: ""; flex: none; width: 10px; height: 10px; border: solid var(--ink); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s var(--ease); }
.faq2__list details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq2__list details p { padding: 0 48px 22px 0; color: var(--ink-2); max-width: 72ch; }

/* 10 Footer ---------------------------------------------------------- */
.sh-ft { margin-top: clamp(72px, 7vw, 120px); background: var(--ink); color: rgba(255,255,255,.7); font-size: 14.5px; }
.sh-ft__cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 48px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.sh-ft__cta h2 { color: #fff; font-size: clamp(32px, 3vw, 56px); letter-spacing: -0.05em; }
.sh-ft__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding: 48px 0; }
.sh-ft__grid p { margin-top: 16px; max-width: 34ch; }
.sh-ft__grid h3 { font: 600 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 14px; }
.sh-ft__grid ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sh-ft a { color: rgba(255,255,255,.85); text-decoration: none; }
.sh-ft a:hover { color: #fff; }
.sh-ft .sh-hd__logo { display: inline-block; background: transparent; padding: 0; border-radius: 0; }
.sh-ft .sh-hd__logo img { height: 32px; }
.sh-ft__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px 0 28px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.5); }

/* snel kiezen in de hero */
.hx__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.hx__quick > span { font-size: 13px; color: var(--muted); margin-right: 4px; }
.hx__quick a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; font-weight: 550; text-decoration: none; transition: box-shadow .2s; }
.hx__quick a b { font-weight: 650; }
.hx__quick a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* uitgelicht pakket */
.feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 520px; border-radius: 22px; overflow: hidden; background: var(--ink); color: #fff; }
.feat__copy { padding: clamp(32px, 3.4vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.feat__copy .kick { color: var(--sun); }
.feat__copy h2 { color: #fff; font-size: clamp(34px, 3vw, 56px); letter-spacing: -0.05em; max-width: 14ch; }
.feat__copy > p { margin-top: 18px; color: rgba(255,255,255,.72); font-size: 17px; max-width: 46ch; }
.feat__copy ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 26px; font-size: 15px; }
.feat__copy li { display: flex; align-items: center; gap: 9px; }
.feat__copy li svg { width: 18px; height: 18px; fill: none; stroke: var(--sun); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.feat__buy { display: flex; align-items: center; gap: 24px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); }
.feat__buy b { display: block; font-size: 40px; font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.feat__buy small { display: block; margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.6); }
.feat__vis { position: relative; display: block; background: #f2dccd; margin: 12px 12px 12px 0; border-radius: 14px; overflow: hidden; }
.feat__vis .pv__f { box-shadow: 0 30px 60px -24px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.25); }

/* 11 Bestellen / account --------------------------------------------- */
.order { padding: 28px 0 120px; }
.order__head { display: flex; align-items: center; gap: 48px; margin-bottom: 36px; }
.order__head h1 { font-family: var(--font) !important; font-size: 30px !important; font-weight: 650 !important; letter-spacing: -0.04em !important; flex: none; }
.order__head .progress { flex: 1; margin: 0; }
.order h2, .page h1, .done h1 { font-family: var(--font) !important; font-weight: 650 !important; letter-spacing: -0.04em !important; }
.btn--primary { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; border-radius: 12px !important; }
.btn--primary:hover { background: var(--blue-2) !important; border-color: var(--blue-2) !important; }
.sum { background: #fff !important; border: 1px solid var(--line) !important; box-shadow: 0 1px 2px rgba(12,12,14,.04), 0 12px 32px -18px rgba(12,12,14,.18) !important; border-radius: 18px !important; padding: 10px 10px 22px !important; top: 100px !important; }
.sum > *:not(.sum__vis) { margin-left: 14px; margin-right: 14px; }
.sum__vis { position: relative; aspect-ratio: 1 / .62; border-radius: 12px; overflow: hidden; margin-bottom: 18px; }
.sum__title { margin-top: 0 !important; }
.sum .btn--block { height: 54px; font-size: 16px; }
.sum__ready b { color: var(--ok); text-transform: capitalize; }
.sum__trust { list-style: none; padding: 0; margin-top: 18px !important; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
.sum__trust li { display: flex; align-items: center; gap: 8px; }
.sum__trust li::before { content: ""; width: 14px; height: 8px; border: solid var(--ok); border-width: 0 0 2px 2px; transform: rotate(-45deg) translateY(-2px); flex: none; }
.sum__pay { display: flex; gap: 6px; margin-top: 16px !important; }
.sum__pay span { font-size: 12px; font-weight: 600; padding: 5px 8px; border-radius: 6px; background: var(--soft); color: var(--ink-2); }
.choice__icon { position: relative; overflow: hidden; }
.choice__icon .pv__f { box-shadow: 0 4px 10px -4px rgba(0,0,0,.35); }
.sum .btn--block { width: auto !important; display: flex !important; }
.sum__how { list-style: none; padding: 0; margin-top: 16px !important; display: flex; flex-direction: column; gap: 14px; counter-reset: h; }
.sum__how li { counter-increment: h; display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; }
.sum__how li::before { content: counter(h); grid-row: span 2; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--soft); font-weight: 700; font-size: 13px; color: var(--blue); }
.sum__how b { font-size: 15px; font-weight: 600; }
.sum__how span { font-size: 13.5px; color: var(--muted); }
.sum:has(.sum__how) { padding-top: 22px !important; }
.choice__icon { width: 132px !important; height: 96px !important; flex: none; border-radius: 10px !important; }
.choice { grid-template-columns: 132px minmax(0, 1fr) auto auto !important; gap: 20px !important; padding: 12px 22px 12px 12px !important; border-radius: 16px !important; }
.choice:hover { border-color: var(--ink-2) !important; }

/* 12 Responsief ------------------------------------------------------ */
@media (max-width: 1640px) {
  .hx__quick > span { display: none; }
  .hx__lead { font-size: 16px; }
}
@media (max-width: 1480px) {
  .hx__quick a:nth-child(4) { display: none; }
  .sh-top__in > span:nth-child(4) { display: none; }
}
@media (max-width: 1280px) {
  .hx__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); height: auto; grid-template-rows: auto; }
  .hx__show { min-height: 440px; }
  .hx__side { grid-column: 1 / -1; grid-template-columns: 1.4fr 1fr; grid-template-rows: none; }
  .hx__ab { min-height: 260px; }
  .prods { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .steps2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat { grid-template-columns: 1fr; }
  .feat__vis { margin: 0 12px 12px; min-height: 420px; }
  .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .cfg, .faq2 { grid-template-columns: 1fr; }
  .io2 { grid-template-columns: 1fr 1fr; }
  .io2__intro { grid-column: 1 / -1; padding: 0; }
  .io2__arrow { display: none; }
  .sh-hd__nav a { padding: 9px 9px; }
  .sh-ft__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .sh-top__in > span:not(:first-child) { display: none; }
  .sh-hd__in { height: 64px; gap: 12px; }
  .sh-hd__logo img { height: 32px; }
  .menu-btn { display: inline-flex; align-items: center; }
  .sh-hd__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; padding: 8px var(--pad) 16px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px -20px rgba(0,0,0,.25); }
  .menu-open .sh-hd__nav { display: flex; }
  .sh-hd__nav a { padding: 14px 4px; font-size: 17px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .sh-hd__link { font-size: 0; gap: 0; padding: 0 10px; }
  .sh-hd__cart { padding: 0 14px; }
  .order__head { flex-direction: column; align-items: stretch; gap: 16px; }
}
@media (max-width: 760px) {
  :root { --gap: 12px; }
  .hx__grid { grid-template-columns: 1fr; }
  .hx__intro { padding: 28px 22px; }
  .hx__intro h1 { font-size: 38px; }
  .hx__intro h1 br { display: none; }
  .hx__btns .btn2 { flex: 1; padding: 0 16px; }
  .hx__quick { display: none; }
  .hx__show { min-height: 0; aspect-ratio: 1 / 1.08; }
  .hx__lbl { display: none; }
  .hx__cap { height: auto; padding: 12px 10px 12px 14px; }
  .hx__cap em { display: none; }
  .hx__price { display: none; }
  .sh-top__in { justify-content: flex-start; font-size: 12px; }
  .hx__side { grid-template-columns: 1fr; }
  .hx__ab { min-height: 300px; }
  .sx__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sx__head p { text-align: left; }
  .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .prod__name { font-size: 16px; }
  .prod__spec { font-size: 12.5px; }
  .prod__foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .prod__btn { justify-content: center; }
  .prod__eta { font-size: 11px; padding: 5px 7px; }
  .prod__flag { display: none; }
  .steps2 { grid-template-columns: 1fr; }
  .feat__copy { padding: 28px 22px; }
  .feat__copy ul { grid-template-columns: 1fr; }
  .feat__buy { flex-direction: column; align-items: stretch; gap: 16px; }
  .feat__vis { min-height: 300px; }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal figcaption { flex-direction: column; gap: 2px; font-size: 13px; }
  .cfg__prods, .cfg__adds { grid-template-columns: 1fr 1fr; }
  .cfg__prods button, .cfg__adds button { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; font-size: 14px; }
  .cfg__adds button { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .io2 { grid-template-columns: 1fr; }
  .sh-ft__cta { flex-direction: column; align-items: flex-start; }
  .sh-ft__grid { grid-template-columns: 1fr; }
  .choice { grid-template-columns: 84px minmax(0, 1fr) !important; }
  .choice__icon { width: 84px !important; height: 72px !important; }
  .choice__price { grid-column: 2; }
  .choice__go { display: none; }
}
.prod__flag { top: auto; bottom: 10px; }
@media (max-width: 1600px) and (min-width: 761px) {
  .prod__btn svg { display: none; }
  .prod__btn { padding: 0 12px; }
  .prod__price { font-size: 19px; }
}
/* oude regels uit style.css neutraliseren */
.prods .prod__eta { top: 10px; left: 10px; right: auto; bottom: auto; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.94); border-radius: 7px; font-size: 12px; font-weight: 550; color: var(--ink); box-shadow: none; }
.prods .prod__flag { top: auto; bottom: 10px; right: 10px; left: auto; }
.prods .prod__vis { border-radius: var(--r) !important; }
.acc-more { padding-top: 0; margin-top: -40px; }
.page h1 { font-size: clamp(34px, 3vw, 52px) !important; }

/* 13 Verkoop -------------------------------------------------------- */
.hx__intro h1 mark { background: var(--sun); color: inherit; padding: 0 .12em; border-radius: .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hx__intro h1 span { color: var(--blue); }
.sticker { position: absolute; z-index: 4; right: 14px; top: 14px; width: 74px; height: 74px; border-radius: 50%; background: var(--sun); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; rotate: 10deg; box-shadow: 0 6px 14px -6px rgba(0,0,0,.35); line-height: 1; }
.sticker small { font-size: 11px; font-weight: 600; margin-bottom: 2px; }
.sticker b { font-size: 21px; font-weight: 750; letter-spacing: -0.04em; }
.sticker--xl { width: 104px; height: 104px; right: 22px; top: 18px; }
.sticker--xl small { font-size: 13px; }
.sticker--xl b { font-size: 30px; }
.hx__show .hx__lbl--2 { right: 140px; }
.hx__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.hx__price del, .hx__abp del { font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 3px; letter-spacing: 0; }
.hx__price b { font-size: 24px; font-weight: 750; letter-spacing: -0.035em; }
.hx__abp { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.hx__abp b { font-weight: 750; }
.hx__abvis .sticker { top: 12px; right: 12px; }

/* productkaarten: verkopend */
.prods .prod__vis { aspect-ratio: 1 / .66 !important; }
.prod__save { position: absolute; z-index: 3; right: 10px; top: 10px; width: 58px; height: 58px; border-radius: 50%; background: var(--sun); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; rotate: 10deg; box-shadow: 0 4px 10px -4px rgba(0,0,0,.35); font-size: 16px; font-weight: 750; letter-spacing: -0.03em; }
.prod__save small { font-size: 9.5px; font-weight: 600; letter-spacing: 0; margin-bottom: 2px; }
.prods .prod__flag { left: 10px; right: auto; bottom: 10px; background: var(--ink); color: #fff; }
.prod__inc { list-style: none; padding: 0; margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.prod__inc li { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod__inc svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.prod__price small { display: block; }
.prod__price del { color: var(--muted); }
.prods .prod__btn { background: var(--blue); color: #fff; height: 44px; padding: 0 16px; gap: 6px; font-size: 15px; }
.prods .prod__btn svg { display: block !important; width: 16px; height: 16px; transition: transform .25s var(--ease); }
.prods .prod:hover .prod__btn { background: var(--blue-2); }
.prods .prod:hover .prod__btn svg { transform: translateX(2px); }
.prods .prod--custom .prod__btn { background: var(--ink); }

/* koopbalk */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgba(0,0,0,.25); transform: translateY(110%); transition: transform .35s var(--ease); }
.buybar.is-on { transform: none; }
.buybar__in { display: flex; align-items: center; gap: 20px; height: 72px; }
.buybar__eta { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.buybar__eta i { width: 8px; height: 8px; border-radius: 50%; background: #22a861; box-shadow: 0 0 0 3px rgba(34,168,97,.18); }
.buybar__eta b { color: var(--ink); font-weight: 600; }
.buybar__picks { display: flex; gap: 6px; margin-left: auto; }
.buybar__picks a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 11px; background: var(--soft); text-decoration: none; font-size: 14.5px; font-weight: 550; white-space: nowrap; transition: background-color .2s, box-shadow .2s; }
.buybar__picks a b { font-weight: 700; }
.buybar__picks a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.buybar__picks a.is-hot { background: var(--sun); }
.buybar__go { height: 48px; }
@media (max-width: 1500px) { .buybar__picks a:nth-child(3), .buybar__picks a:nth-child(4) { display: none; } }
@media (max-width: 900px) { .buybar__eta, .buybar__picks { display: none; } .buybar__go { flex: 1; } .buybar__in { height: 68px; } }
@media (max-width: 760px) { .sticker--xl { width: 84px; height: 84px; } .sticker--xl b { font-size: 24px; } .hx__price { display: flex; } .hx__price del { display: none; } }
.cfg__vis { aspect-ratio: 1 / .5 !important; }
.feat__buy { position: relative; }
.feat__save { position: static; rotate: -8deg; flex: none; }
.feat__buy del { color: rgba(255,255,255,.5); }

.feat__save small { color: var(--ink) !important; font-size: 11px !important; margin: 0 0 2px !important; }
.gal__item { display: block; text-decoration: none; color: inherit; }
.gal__item img, .gal__item .gal__d { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.gal__item:hover img, .gal__item:hover .gal__d { transform: translateY(-4px); }
.gal__buy { display: flex; align-items: center; gap: 6px; margin-top: 10px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--soft); font-size: 14px; font-weight: 600; transition: background-color .2s, color .2s; }
.gal__buy b { font-weight: 700; margin-left: auto; }
.gal__buy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gal__item:hover .gal__buy { background: var(--blue); color: #fff; }

/* 14 Bestseller + minder witruimte ---------------------------------- */
.sx { padding-top: clamp(40px, 3.6vw, 64px); }
.sh-ft { margin-top: clamp(48px, 4vw, 72px); }
.hx__show--social { background: #dfe6ff; }
.sticker--star { background: var(--sun); }
.sticker--star small { font-size: 11.5px; font-weight: 700; }
.sticker--star b { font-size: 25px; }
.hx__incl { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.hx__cap small span { color: inherit; }

.best { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap); }
.best__copy { background: var(--sun); border-radius: 22px; padding: clamp(28px, 2.6vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.best__copy .kick { color: var(--ink); margin-bottom: 14px; }
.best__copy h2 { font-size: clamp(32px, 2.6vw, 50px); letter-spacing: -0.05em; }
.best__copy h2 span { color: var(--blue); white-space: nowrap; }
.best__copy > p { margin-top: 14px; font-size: 16px; color: #3a3520; max-width: 44ch; }
.best__copy ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 20px; font-size: 14.5px; font-weight: 550; }
.best__copy li { display: flex; align-items: center; gap: 8px; }
.best__copy li svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.best__buy { display: flex; align-items: center; gap: 18px; margin-top: 26px; }
.best__buy .btn2 { height: 58px; font-size: 17px; }
.best__buy small { font-size: 13px; color: #3a3520; line-height: 1.35; }
.best__vis { position: relative; display: block; min-height: 400px; border-radius: 22px; overflow: hidden; background: #dfe6ff; }

/* galerij: gelijke vakken, geen gaten */
.gal { align-items: stretch; }
.gal__item { display: flex; flex-direction: column; }
.gal__item figure { display: flex; flex-direction: column; flex: 1; }
.gal figure > img, .gal figure > .gal__d { height: 330px; width: auto; max-width: 100%; align-self: center; object-fit: contain; }
.gal figure > .gal__d { aspect-ratio: 4 / 5; }
.gal figure > .gal__d[data-kind="story"] { aspect-ratio: 9 / 16; }
.gal figure > .gal__d[data-kind="a4"] { aspect-ratio: 1 / 1.414; }
.gal__d .pv__f--flat { height: 100%; }
.gal figure { background: var(--soft); border-radius: var(--r); padding: 22px 18px 16px; }
.gal figcaption { margin-top: auto; padding-top: 16px; }
@media (max-width: 1280px) { .best { grid-template-columns: 1fr; } .best__vis { min-height: 320px; } }
@media (max-width: 760px) { .best__copy ul { grid-template-columns: 1fr; } .best__buy { flex-direction: column; align-items: stretch; } .gal figure > img, .gal figure > .gal__d { height: 220px; } .gal figure { padding: 14px 12px 12px; } }
.sx.sx--prod { padding-top: 26px; }
.hx__cap .hx__incl { color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 500; margin-bottom: 3px; }
.cfg__vis { aspect-ratio: 1 / .42 !important; }
.cfg { align-items: start; }

/* 15 Voorbeeld bekijken ---------------------------------------------- */
.prod__zoomwrap { position: absolute; z-index: 4; left: 0; right: 0; top: 0; aspect-ratio: 1 / .66; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; pointer-events: none; }
.prod__zoom { pointer-events: auto; transform: translateY(6px); opacity: 0; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(12,12,14,.86); color: #fff; font: 600 13.5px/1 var(--font); white-space: nowrap; backdrop-filter: blur(6px); transition: opacity .2s, transform .25s var(--ease), background-color .2s; }
.prod__zoom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.prod__zoom:hover { background: var(--blue); }
.prod:hover .prod__zoom, .prod__zoom:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .prod__zoom { opacity: 1; transform: none; height: 32px; font-size: 12px; } }

.lb { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100vh; overflow: auto; }
.lb::backdrop { background: rgba(12,12,14,.72); backdrop-filter: blur(6px); }
.lb[open] { display: grid; place-items: center; }
.lb__box { position: relative; width: min(1320px, calc(100vw - 48px)); background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); animation: lbIn .3s var(--ease); }
@keyframes lbIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.lb__x { position: absolute; z-index: 2; right: 14px; top: 14px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255,255,255,.92); display: grid; place-items: center; }
.lb__x svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.lb__x:hover { background: #fff; }
.lb__stage { display: flex; align-items: flex-end; justify-content: center; gap: 28px; padding: 48px 40px 32px; height: min(72vh, 760px); box-sizing: border-box; }
.lb__it { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.lb__f { position: relative; display: block; height: calc(100% - 30px); background: #fff; overflow: hidden; container-type: inline-size; box-shadow: var(--sh-f); }
.lb__f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb__it--a4 .lb__f { aspect-ratio: 1 / 1.414; border-radius: 3px; }
.lb__it--post .lb__f { aspect-ratio: 4 / 5; border-radius: 8px; }
.lb__it--sq .lb__f { aspect-ratio: 1; border-radius: 8px; height: auto; width: min(100%, 520px); max-height: calc(100% - 30px); }
.lb__it--story .lb__f { aspect-ratio: 9 / 16; border-radius: 14px; }
.lb__it figcaption { margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: rgba(255,255,255,.85); padding: 4px 10px; border-radius: 999px; }
.lb__foot { display: flex; align-items: center; gap: 20px; padding: 18px 22px 18px 28px; border-top: 1px solid var(--line); }
.lb__foot > div { flex: 1; min-width: 0; }
.lb__foot small { display: block; font-size: 13px; color: var(--muted); }
.lb__foot b { font-size: 20px; font-weight: 650; letter-spacing: -0.03em; }
.lb__price { font-size: 26px; font-weight: 750; letter-spacing: -0.04em; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.lb__price small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
@media (max-width: 760px) {
  .lb__box { width: calc(100vw - 20px); border-radius: 16px; }
  .lb__stage { height: auto; flex-direction: column; align-items: center; padding: 56px 16px 20px; }
  .lb__it { height: auto; width: 100%; }
  .lb__f { height: auto; width: 100%; }
  .lb__it--story .lb__f { width: 70%; }
  .lb__foot { flex-wrap: wrap; }
  .lb__foot .btn2 { width: 100%; }
}
.lb__it--sq .lb__f { width: auto; height: calc(100% - 30px); max-height: none; }
.prods .prod:hover .prod__flag { opacity: 0; }
.prods .prod__flag { transition: opacity .2s; }
@media (max-width: 760px) { .lb__it--sq .lb__f { width: 100%; height: auto; } }

/* groter voorbeeld + inzoomen */
.lb__box { width: min(1760px, calc(100vw - 32px)); height: calc(100vh - 32px); display: flex; flex-direction: column; border-radius: 18px; }
.lb__stage { flex: 1; height: auto; min-height: 0; padding: 28px 32px 20px; gap: 36px; align-items: stretch; }
.lb__it { height: auto; justify-content: center; cursor: zoom-in; }
.lb__f { height: calc(100% - 42px); max-height: 100%; transition: transform .2s var(--ease); }
.lb__it:hover .lb__f { transform: scale(1.01); }
.lb__it--sq .lb__f { height: calc(100% - 42px); }
.lb__foot { flex: none; }
.lb__back { display: none; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 0; border-radius: 11px; background: var(--soft); font: 600 14.5px/1 var(--font); }
.lb__back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb__hint { color: var(--ink-2); }
/* zoomstand: één ontwerp, op volle breedte, scrollen om rond te kijken */
.lb__box.is-zoom .lb__stage { display: block; overflow: auto; padding: 24px; text-align: center; }
.lb__box.is-zoom .lb__it { display: none; }
.lb__box.is-zoom .lb__it.is-on { display: inline-flex; cursor: zoom-out; height: auto; }
.lb__box.is-zoom .lb__it.is-on .lb__f { height: auto; width: min(1400px, calc(100vw - 120px)); max-height: none; transform: none; }
.lb__box.is-zoom .lb__it--a4.is-on .lb__f img, .lb__box.is-zoom .lb__it--post.is-on .lb__f img { image-rendering: auto; }
.lb__box.is-zoom .lb__it--story.is-on .lb__f { width: min(820px, calc(100vw - 120px)); }
.lb__box.is-zoom .lb__back { display: inline-flex; }
.lb__box.is-zoom .lb__hint { display: none; }
@media (max-width: 760px) { .lb__box { height: auto; max-height: calc(100vh - 20px); } .lb__stage { overflow: auto; } .lb__f { height: auto; } }
/* duidelijk "voorbeeld" op productbeelden in overzicht en calculator */
.sum__vis::after, .cfg__vis::after { content: "Voorbeeld"; position: absolute; z-index: 5; left: 10px; bottom: 10px; font: 700 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 7px; background: var(--ink); color: #fff; }
.sum__vis::before { content: "Jouw ontwerp maken we met jouw logo, foto's en tekst"; position: absolute; z-index: 5; left: 10px; right: 10px; top: 10px; font: 550 12px/1.3 var(--font); padding: 7px 10px; border-radius: 7px; background: rgba(255,255,255,.94); color: var(--ink-2); text-align: center; }
/* calculator: overzicht naast het beeld, even hoog als de keuzes */
.cfg { align-items: stretch; }
.cfg__sum { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 20px; row-gap: 14px; padding: 12px 20px 20px 12px; }
.cfg__sum .cfg__vis { grid-row: 1 / 3; aspect-ratio: auto !important; height: 100%; min-height: 260px; }
.cfg__sum .cfg__rows { align-self: center; padding: 8px 0 0; }
.cfg__sum .btn2 { margin: 0; align-self: end; }
@media (max-width: 1280px) { .cfg__sum { grid-template-columns: 1fr; grid-template-rows: auto; } .cfg__sum .cfg__vis { grid-row: auto; aspect-ratio: 1 / .5 !important; height: auto; } }

/* stap 2: wat zit erin */
.incl { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); margin: 20px 0 32px; }
.incl__vis { position: relative; min-height: 220px; }
.incl__vis::after { content: "Voorbeeld"; position: absolute; z-index: 5; left: 10px; bottom: 10px; font: 700 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border-radius: 6px; background: var(--ink); color: #fff; }
.incl__body { padding: 22px 26px; display: flex; flex-direction: column; }
.incl__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.incl__head small { display: block; font: 600 11.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.incl__head b { font-size: 24px; font-weight: 650; letter-spacing: -0.035em; }
.incl__price { font-size: 24px; font-weight: 750; letter-spacing: -0.035em; }
.incl__lbl, .extras__lbl { font: 600 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ok); margin: 18px 0 10px; }
.incl__list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 24px; font-size: 15.5px; font-weight: 500; }
.incl__list li { display: flex; align-items: flex-start; gap: 9px; }
.incl__list li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23148a4b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.incl__change { margin-top: auto; padding-top: 16px; align-self: flex-start; font-size: 14px; }
.extras__lbl { color: var(--ink); font-size: 13px; }
.extras__lbl span { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.sum__inc { list-style: none; padding: 0; margin-top: 8px !important; display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: var(--ink-2); }
.sum__inc li { display: flex; gap: 7px; align-items: flex-start; }
.sum__inc li::before { content: "✓"; color: var(--ok); font-weight: 700; }
.sum__inclbl { font: 600 11.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ok); margin-top: 12px !important; }
.sum__inc { margin-bottom: 4px !important; }
@media (max-width: 760px) { .incl { grid-template-columns: 1fr; } .incl__vis { min-height: 200px; } .incl__list { grid-template-columns: 1fr; } }

.pv__f--wide{aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:#181720}.pv__f--wide>img{width:100%;height:100%;object-fit:cover}.lb__it--wide{width:min(100%,1050px)!important;max-width:1050px!important;cursor:default}.lb__it--wide .lb__f{display:block;width:100%;aspect-ratio:16/9;height:auto!important;background:#090a0e;border-radius:10px;overflow:hidden}.lb__it--wide video{display:block;width:100%;height:100%;object-fit:contain}.lb__stage:has(video){display:flex;align-items:center;justify-content:center;padding:35px}.lb__box:has(video) .lb__hint{display:none}.prod__vis--video{background:radial-gradient(ellipse at center,#527ac448,transparent 80%),#1e293d!important}
@media(max-width:600px){.lb__stage:has(video){padding:45px 12px 15px}.lb__it--wide figcaption{font-size:10px}}
.pv__f--a4:not(.pv__f--line),.pv__f--a5:not(.pv__f--line){background:transparent;border:0}
.pv__f--a4>img,.pv__f--a5>img{transform:scale(1.012);clip-path:inset(.5px)}

.lb__stage .lb__it--story:has(video){width:min(82vw,420px,calc((100dvh - 230px)*9/16));height:auto;flex:none;cursor:default}
.lb__stage .lb__it--story:has(video) .lb__f{width:100%;height:auto!important;aspect-ratio:9/16;max-height:none;background:#111;container-type:normal}
.lb__it--story .lb__f video{display:block;width:100%;height:100%;aspect-ratio:9/16;object-fit:contain}
.lb__it--story:has(video) figcaption{text-align:center;max-width:100%}


.pv .pv__f.sh-reel-phone{aspect-ratio:9/18;border-radius:12% / 6%;overflow:visible;background:linear-gradient(110deg,#8b8e94 0%,#26282c 2%,#08090b 5%,#16181c 94%,#777c84 98%,#22252a);border:1px solid #62666d;box-shadow:inset 0 0 0 2px #ffffff16,0 16px 25px -10px #0009!important}
.sh-reel-phone .sh-phone-screen{position:absolute;display:block;left:4%;width:92%;aspect-ratio:9/16;top:50%;transform:translateY(-50%);overflow:hidden;border-radius:4% / 2.25%;background:#000}
.sh-reel-phone .sh-phone-screen video{display:block;width:100%;height:100%;object-fit:contain}
.sh-reel-phone::before{content:"";position:absolute;top:4%;left:37%;width:26%;height:1.2%;border-radius:99px;background:#030405;box-shadow:inset 0 1px 1px #ffffff25}
.sh-reel-phone::after{content:"";position:absolute;bottom:3.8%;left:35%;width:30%;height:1%;background:#bdc0c850;border-radius:99px}
.sh-reel-phone .sh-phone-buttons{position:absolute;left:-2%;top:22%;width:2%;height:12%;border-radius:2px 0 0 2px;background:linear-gradient(90deg,#454951,#a3a7ae,#34373d);box-shadow:0 17px 0 #575b63;pointer-events:none}
.sh-reel-phone .sh-phone-buttons::after{content:"";position:absolute;left:5100%;top:40%;width:100%;height:125%;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#34373d,#a3a7ae,#454951)}


.pv .pv__f.sh-video-monitor{aspect-ratio:16/10.3;box-sizing:border-box;overflow:visible;border:1px solid #676d76;border-radius:5px;background:linear-gradient(135deg,#525862,#15181d 12%,#282e36 90%,#6b727c);box-shadow:inset 0 0 0 1px #ffffff18,0 16px 24px -13px #17203399!important}
.sh-video-monitor .sh-monitor-screen{position:absolute;display:block;left:2%;top:3%;width:96%;aspect-ratio:16/9;overflow:hidden;background:#000;border-radius:2px}
.sh-video-monitor .sh-monitor-screen video{display:block;width:100%;height:100%;object-fit:contain}
.sh-video-monitor::after{content:"";position:absolute;bottom:3%;right:5%;width:3px;height:3px;border-radius:50%;background:#b5d9d0;box-shadow:0 0 3px #c4ffe5}
.sh-video-monitor .sh-monitor-stand{position:absolute;display:block;top:100%;left:44%;width:12%;height:15%;background:linear-gradient(90deg,#525962,#b7bdc5 45%,#717983);box-shadow:inset 0 5px 6px #0006;pointer-events:none}
.sh-video-monitor .sh-monitor-stand::after{content:"";position:absolute;top:88%;left:-105%;width:310%;height:28%;border-radius:50% 50% 3px 3px;background:linear-gradient(#d7dbe1,#818994 65%,#4f5660);box-shadow:0 7px 9px #101b3540}
.sh-video-monitor .pv__time{bottom:2%;right:2%}


.pv img,.pv video{image-rendering:auto}
.pv .pv__f>img{transform:none!important;scale:1!important;clip-path:none!important}
.pv--social .pv__f{aspect-ratio:2/3}
.pv--social .pv__f>img{object-fit:contain}