/* =====================================================================
   Spothelder — front.css (laadt als laatste op de homepage en /shop)
   Alleen styling: zelfde secties, zelfde volgorde. Banner onaangeroerd.
   Richting: donkere, rustige pagina; producten op lichte studio-achter-
   gronden; redactionele typografie en haarlijnen in plaats van dozen.
   ===================================================================== */
body.home {
  --f-bg: #111317; --f-s1: #181b21; --f-line: #ffffff14; --f-line2: #ffffff26;
  --f-ink: #f5f5f7; --f-mut: #a1a1aa; --f-dim: #6e6e78; --f-blue: 91 124 255; --f-sun: #ffd640;
  --f-studio: linear-gradient(180deg, #f2f2f4 0%, #e3e3e8 100%);
  background: var(--f-bg);
}

/* ---------- sectiekoppen ---------- */
body.home .sx { padding-top: clamp(72px, 6.5vw, 128px); }
body.home .sx__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 28px; }
body.home .sx__head h2 { font-size: clamp(34px, 2.8vw, 56px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; color: var(--f-ink); }
body.home .sx__head p { font-size: 15px; line-height: 1.6; color: var(--f-mut); max-width: 44ch; text-align: right; }

/* welkomstbalk */
body.home .spot-assurances { min-height: 0; padding-block: 12px 0; margin-bottom: 0; border: 0; }
body.home .welcome-offer { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: none; box-shadow: none; }
body.home .welcome-offer i { box-shadow: none; }

/* =====================================================================
   Productkaarten: lichte studio-achtergrond, geen kaderdoos
   ===================================================================== */
.xcard__mark, .xcard__cat, .xcard__desc { display: none !important; }
.xcard::before, .xcard::after { display: none !important; }
body.home .sx.sx--prod { padding-top: 22px; }
body.home .sx--prod .sx__head { margin-bottom: 16px; }
body.home .sx--prod .sx__head h2 { font-size: clamp(28px, 2.1vw, 42px); }
body.home .prods { gap: 20px; }

body.home .prods .catalog-card.xcard,
body.home .prods .catalog-card.xcard:hover {
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; transform: none; padding: 0;
}
body.home .prods .catalog-card.xcard:not(.prod--custom) .prod__vis {
  position: relative; display: block; width: 100%; margin: 0; border: 0; cursor: zoom-in;
  height: clamp(200px, 13.5vw, 280px); border-radius: 20px !important; overflow: hidden;
  background: var(--f-studio) !important;
  box-shadow: inset 0 0 0 1px #ffffff, inset 0 -40px 60px -40px #0000001f;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s;
}
/* zachte vloerschaduw */
body.home .prods .catalog-card.xcard .prod__vis::before {
  content: ""; position: absolute; z-index: 0; left: 18%; right: 18%; bottom: 7%; height: 18px; border-radius: 50%;
  background: #000; filter: blur(14px); opacity: .28; transition: opacity .55s, transform .55s;
}
body.home .prods .catalog-card.xcard .prod__vis::after { display: none; }
body.home .prods .catalog-card.xcard .prod__vis .pv {
  z-index: 1; width: 84%; max-width: 84% !important; left: 50%;
  transform: translateX(-50%) !important; filter: none;
  transition: transform .6s cubic-bezier(.2,.7,.2,1) !important;
}
body.home .xcard .prod__vis .pv__f { box-shadow: 0 18px 28px -14px rgb(20 20 30 / .45), 0 2px 6px rgb(20 20 30 / .15); }
body.home .prods .catalog-card.xcard:hover .prod__vis { transform: translateY(-4px); box-shadow: inset 0 0 0 1px #fff, 0 30px 50px -30px #000; }
body.home .prods .catalog-card.xcard:hover .prod__vis .pv { transform: translateX(-50%) translateY(-6px) scale(1.05) !important; }
body.home .prods .catalog-card.xcard:hover .prod__vis::before { opacity: .18; transform: scaleX(.9); }

.xcard__eta { top: auto; bottom: 12px; left: 12px; height: 26px; padding: 0 10px; background: #ffffffd9; color: #2a2b31; box-shadow: 0 1px 2px #0000001a; backdrop-filter: blur(6px); font-weight: 600; font-size: 11.5px; }
.xcard__eta i { background: #1fb266; box-shadow: none; animation: none; }
.xcard__best { top: 12px; left: 12px; right: auto; height: 26px; background: #111; color: var(--f-sun); box-shadow: none; font-size: 11.5px; }
body.home .prods .catalog-card.xcard.is-best .prod__vis { box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px var(--f-sun); }

body.home .xcard .prod__body { padding: 16px 2px 0; background: none; }
body.home .xcard .prod__name { font-size: clamp(19px, 1.2vw, 25px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; color: var(--f-ink); }
.xcard__chips { margin: 5px 0 0; padding: 0; gap: 0; }
.xcard__chips li { padding: 0; background: none; box-shadow: none; font-size: 13.5px; font-weight: 450; color: var(--f-mut); }
.xcard__chips li + li::before { content: "·"; margin: 0 7px; color: var(--f-dim); }
body.home .xcard .prod__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 14px 0 0; border-top: 1px solid var(--f-line); }
body.home .xcard .prod__price { font-size: clamp(22px, 1.45vw, 30px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--f-ink); }
body.home .xcard .prod__price small { display: none; }
body.home .prods .catalog-card.xcard a.prod__btn,
body.home .prods .catalog-card.xcard:hover a.prod__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; min-height: 38px; padding: 0 14px 0 16px;
  border-radius: 999px; background: transparent; color: var(--f-ink); box-shadow: inset 0 0 0 1px var(--f-line2);
  font: 600 13.5px/1 var(--font); transition: background-color .25s, color .25s, box-shadow .25s;
}
body.home .prods .catalog-card.xcard:hover a.prod__btn,
body.home .prods .catalog-card.xcard.is-best a.prod__btn { background: #fff; color: #111; box-shadow: none; }
body.home .prods .catalog-card.xcard a.prod__btn svg { width: 15px; height: 15px; }

/* Stel zelf samen: strook in dezelfde taal */
body.home .prods .catalog-card.xcard.prod--custom,
body.home .prods .catalog-card.xcard.prod--custom:hover {
  grid-column: 1 / -1; display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 24px;
  margin-top: 6px; padding: 0; background: none; box-shadow: none;
}
body.home .prods .catalog-card.xcard.prod--custom .prod__vis { height: 96px !important; min-height: 0; border-radius: 16px !important; background: var(--f-studio) !important; }
body.home .prods .catalog-card.xcard.prod--custom .prod__vis .pv { max-width: 130px !important; }
body.home .xcard.prod--custom .prod__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 24px; align-items: center; padding: 0; border-top: 1px solid var(--f-line); border-bottom: 1px solid var(--f-line); height: 96px; }
body.home .xcard.prod--custom .prod__name { grid-column: 1; grid-row: 1; align-self: end; font-size: 22px; }
body.home .xcard.prod--custom .xcard__chips { grid-column: 1; grid-row: 2; align-self: start; }
body.home .xcard.prod--custom .prod__foot { grid-column: 2; grid-row: 1 / 3; margin: 0; padding: 0; border: 0; gap: 20px; }
body.home .prods .catalog-card.xcard.prod--custom a.prod__btn { background: #fff; color: #111; box-shadow: none; }

/* producten boven de vouw */
@media (min-width: 1001px) {
  body.home .prods .catalog-card.xcard:not(.prod--custom) .prod__vis { height: clamp(140px, calc(100svh - 720px), 260px); }
}
@media (min-width: 1001px) and (max-height: 900px) {
  body.home .prods .catalog-card.xcard:not(.prod--custom) .prod__vis { height: clamp(140px, calc(100svh - 610px), 260px); }
}

/* =====================================================================
   Galerij "Kleine zaken"
   ===================================================================== */
body.home #werk { background: none; border: 0; margin-top: 0; padding-block: clamp(18px, 2vw, 32px) 0; }
body.home #werk .gal { gap: 20px; }
body.home .gal__item { display: flex; flex-direction: column; padding: 0; border-radius: 0; background: none; box-shadow: none; text-decoration: none; }
body.home #werk .gal figure { padding: 28px 18px 0; border-radius: 20px !important; background: var(--f-studio) !important; box-shadow: inset 0 0 0 1px #fff; overflow: hidden; display: flex; flex-direction: column; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
body.home #werk .gal figure > img, body.home #werk .gal figure > .gal__d { height: clamp(200px, 12.5vw, 250px); box-shadow: 0 18px 28px -14px rgb(20 20 30 / .45), 0 2px 6px rgb(20 20 30 / .15) !important; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
body.home .gal__item:hover figure { transform: translateY(-4px); }
body.home .gal__item:hover figure > img, body.home .gal__item:hover figure > .gal__d { transform: translateY(-4px) scale(1.03); }
body.home #werk .gal figcaption { margin: 18px -18px 0; padding: 12px 16px; background: #ffffffb3; display: flex; justify-content: space-between; font-size: 13px; }
body.home #werk .gal figcaption b { color: #16171b; font-weight: 600; }
body.home #werk .gal figcaption span { color: #5e5f68; font-size: 12.5px; }
body.home #werk .gal__buy { margin: 12px 2px 0; padding: 0 0 12px; height: auto; min-height: 0; border: 0; border-bottom: 1px solid var(--f-line); border-radius: 0; background: none; color: var(--f-ink); font-size: 14px; font-weight: 550; display: flex; align-items: center; gap: 8px; }
body.home #werk .gal__buy b { margin-left: auto; font-weight: 600; }
body.home .gal__item:hover .gal__buy { background: none; color: #fff; border-bottom-color: #fff; }

/* =====================================================================
   Calculator
   ===================================================================== */
body.home .cfg { gap: 20px; }
body.home .cfg__main { padding: clamp(24px, 2.2vw, 40px); border: 0; border-radius: 24px; background: var(--f-s1); box-shadow: inset 0 0 0 1px var(--f-line); }
body.home .cfg__lbl { font: 600 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--f-dim); margin: 0 0 14px; }
body.home .cfg__lbl small { text-transform: none; letter-spacing: 0; color: var(--f-dim); font-weight: 450; }
body.home .cfg__lbl:not(:first-child) { margin-top: 30px; }
body.home .cfg__prods button, body.home .cfg__adds button {
  min-height: 60px; padding: 12px 16px; border: 0; border-radius: 14px; background: #ffffff06;
  box-shadow: inset 0 0 0 1px var(--f-line); color: var(--f-ink); font-size: 15px; font-weight: 550; transition: background-color .2s, box-shadow .2s;
}
body.home .cfg__prods button small, body.home .cfg__adds button small { color: var(--f-mut); font-size: 13.5px; }
body.home .cfg__prods button:hover, body.home .cfg__adds button:hover:not(:disabled) { background: #ffffff0c; box-shadow: inset 0 0 0 1px var(--f-line2); }
body.home .cfg__prods [aria-checked="true"] { background: #fff !important; color: #111 !important; box-shadow: none !important; }
body.home .cfg__prods [aria-checked="true"] small { color: #55565e !important; }
body.home .cfg__prods [aria-checked="true"]::before { border-color: #111 !important; background: #111 !important; }
body.home .cfg__adds [aria-pressed="true"] { background: rgb(var(--f-blue) / .14) !important; box-shadow: inset 0 0 0 1.5px rgb(var(--f-blue)) !important; }
body.home .cfg__note { color: var(--f-dim); font-size: 13.5px; }
body.home .cfg__sum { padding: 12px 12px 22px; border: 0; border-radius: 24px; background: var(--f-s1); box-shadow: inset 0 0 0 1px var(--f-line); }
body.home .cfg__vis { min-height: 230px; border-radius: 16px !important; background: var(--f-studio) !important; box-shadow: inset 0 0 0 1px #fff; }
body.home .cfg__vis .pv__f { box-shadow: 0 18px 28px -14px rgb(20 20 30 / .45) !important; }
body.home .cfg__rows { padding: 6px 12px 0; }
body.home .cfg__row { border-color: var(--f-line) !important; font-size: 15px; }
body.home .cfg__row span { color: var(--f-mut); }
body.home .cfg__row b { color: var(--f-ink); font-weight: 550; }
body.home .cfg__row--total b { font-size: clamp(36px, 2.5vw, 50px); font-weight: 600; letter-spacing: -0.05em; }
body.home .cfg__sum .btn2 { margin: 6px 12px 0; height: 56px; border-radius: 999px; background: #fff; color: #111; font-size: 16px; font-weight: 650; box-shadow: none; }
body.home .cfg__sum .btn2:hover { background: rgb(var(--f-blue)); color: #fff; }

/* =====================================================================
   Zo werkt het: redactionele rij met grote cijfers
   ===================================================================== */
body.home #hoe-het-werkt { padding-top: clamp(56px, 5vw, 96px); }
body.home .steps2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 0; counter-reset: none; }
body.home .steps2::before { display: none; }
body.home .steps2 li { display: flex; flex-direction: column; gap: 8px; padding: 26px 28px 8px 0; margin-right: 28px; border: 0; border-top: 1px solid var(--f-line2); border-radius: 0; background: none; box-shadow: none; }
body.home .steps2 li > span { width: auto; height: auto; margin: 0 0 18px; padding: 0; border-radius: 0; background: none; box-shadow: none; display: block; font: 600 clamp(44px, 3.4vw, 68px)/1 var(--font); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1px #ffffff40; }
body.home .steps2 li:first-child > span { color: var(--f-ink); -webkit-text-stroke: 0; }
body.home .steps2 li b { font-size: clamp(18px, 1.15vw, 22px); font-weight: 600; letter-spacing: -0.03em; color: var(--f-ink); }
body.home .steps2 li small { font-size: 15px; line-height: 1.5; color: var(--f-mut); }

/* =====================================================================
   Jij stuurt / wij maken: één paneel
   ===================================================================== */
body.home .io2 {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 64px minmax(0, 1fr); gap: 0; align-items: stretch;
  padding: 0; border: 0; border-radius: 28px; overflow: hidden; background: var(--f-s1); box-shadow: inset 0 0 0 1px var(--f-line);
}
body.home .io2__intro { padding: clamp(32px, 3vw, 56px); display: flex; flex-direction: column; justify-content: center; }
body.home .io2__intro h2 { font-size: clamp(32px, 2.5vw, 50px); font-weight: 600; letter-spacing: -0.05em; line-height: 1.02; color: var(--f-ink); max-width: 13ch; }
body.home .io2__intro p { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--f-mut); max-width: 40ch; }
body.home .io2__col, body.home .io2__col--out { padding: clamp(32px, 3vw, 56px) clamp(24px, 2vw, 40px); border: 0; border-radius: 0; background: none; box-shadow: none; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--f-line); }
body.home .io2__col--out { background: linear-gradient(180deg, #ffffff08, #ffffff03); }
body.home .io2__col .cfg__lbl { margin: 0 0 18px; }
body.home .io2__col--out .cfg__lbl { color: rgb(var(--f-blue)); }
body.home .io2__col ul { gap: 0; }
body.home .io2__col li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-radius: 0; background: none; border-bottom: 1px solid var(--f-line); font-size: 16px; color: var(--f-ink); }
body.home .io2__col li:last-child { border-bottom: 0; }
body.home .io2__col li span, body.home .io2__col--out li span { flex: none; width: 46px; padding: 0; background: none !important; border-radius: 0; text-align: left; font: 600 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--f-dim); }
body.home .io2__col--out li span { color: rgb(var(--f-blue)); }
body.home .io2__arrow { display: grid; place-items: center; border-left: 1px solid var(--f-line); }
body.home .io2__arrow svg { width: 22px; height: 22px; padding: 0; border-radius: 0; background: none; box-shadow: none; stroke: var(--f-mut); }

/* =====================================================================
   FAQ: haarlijnen, grotere tekst
   ===================================================================== */
body.home .faq2 { gap: clamp(32px, 5vw, 110px); }
body.home .faq2__side h2 { font-size: clamp(38px, 3.2vw, 64px); font-weight: 600; letter-spacing: -0.055em; line-height: 1; color: var(--f-ink); }
body.home .faq2__intro { margin-top: 18px; font-size: 16px; line-height: 1.6; color: var(--f-mut); }
body.home .faq2__contact { display: flex; flex-direction: column; gap: 6px; margin-top: 34px; padding: 0 0 0 16px; border-left: 2px solid rgb(var(--f-blue)); border-radius: 0; background: none; box-shadow: none; color: var(--f-mut); font-size: 14px; text-decoration: none; }
body.home .faq2__contact span { color: var(--f-ink); font-size: 16px; font-weight: 550; word-break: break-all; }
body.home .faq2__contact:hover span { color: rgb(var(--f-blue)); }
body.home .faq2__list { display: block; border: 0; border-top: 1px solid var(--f-line2); }
body.home .faq2__list details, body.home .faq2__list details[open] { border: 0; border-bottom: 1px solid var(--f-line2); border-radius: 0; background: none; box-shadow: none; }
body.home .faq2__list summary { padding: 26px 0; font-size: clamp(17px, 1.1vw, 21px); font-weight: 550; letter-spacing: -0.02em; color: var(--f-ink); gap: 24px; }
body.home .faq2__list summary::after { content: ""; flex: none; width: 14px; height: 14px; border: 0; border-radius: 0; transform: none; background:
  linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
  linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; color: var(--f-mut); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
body.home .faq2__list details[open] summary::after { transform: rotate(45deg); color: var(--f-ink); background:
  linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
  linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; }
body.home .faq2__list summary:hover { color: #fff; }
body.home .faq2__list details p { padding: 0 60px 28px 0; font-size: 16px; line-height: 1.65; color: var(--f-mut); max-width: 70ch; }

/* =====================================================================
   Responsief
   ===================================================================== */
@media (max-width: 1280px) {
  body.home .io2 { grid-template-columns: 1fr 1fr; }
  body.home .io2__intro { grid-column: 1 / -1; }
  body.home .io2__arrow { display: none; }
  body.home .io2__col:first-of-type { border-left: 0; }
  body.home .steps2 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
}
@media (max-width: 760px) {
  body.home .sx__head { display: block; }
  body.home .sx__head p { text-align: left; margin-top: 8px; }
  body.home .prods { gap: 14px; }
  body.home .prods .catalog-card.xcard:not(.prod--custom) .prod__vis { height: 160px; }
  body.home .xcard .prod__name { font-size: 17px; }
  body.home .xcard .prod__foot { flex-direction: column; align-items: stretch; gap: 10px; }
  body.home .prods .catalog-card.xcard a.prod__btn { justify-content: center; }
  body.home .prods .catalog-card.xcard.prod--custom { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
  body.home .xcard.prod--custom .prod__body { grid-template-columns: 1fr; height: auto; padding: 12px 0; }
  body.home .xcard.prod--custom .prod__foot { grid-column: 1; grid-row: auto; margin-top: 10px; }
  body.home .steps2 { grid-template-columns: 1fr; }
  body.home .steps2 li { margin-right: 0; }
  body.home .io2 { grid-template-columns: 1fr; }
  body.home .io2__col, body.home .io2__col--out { border-left: 0; border-top: 1px solid var(--f-line); }
  body.home .faq2__list details p { padding-right: 0; }
}
body.home .prods .catalog-card.xcard.is-best, body.home .prods .catalog-card.xcard.is-best:hover { box-shadow: none !important; background: none !important; }
body.home .cfg__prods button { padding-left: 38px !important; position: relative; }
body.home .cfg__prods button::before { left: 15px !important; top: 50% !important; transform: translateY(-50%); }
body.home .cfg__prods [aria-checked="true"]::before { box-shadow: inset 0 0 0 3px #fff; }
body.home .cfg__sum .cfg__vis, body.home .cfg__sum .cfg__vis[class*="prod__vis--"] { background: var(--f-studio) !important; border: 0 !important; }
body.home .steps2, body.home .steps2 li { text-align: left !important; align-items: flex-start !important; }



/* ---------- Footer: gelijk aan de andere pagina's ---------- */
body.home .sh-ft { margin-top: clamp(64px, 6vw, 110px); background: #0b0d11; border-top: 1px solid #2d333e; color: #a8b5d4; }
body.home .sh-ft > .wrap { padding-inline: var(--pad, clamp(16px, 2vw, 40px)); }
body.home .sh-ft__cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0; padding: 30px 0; border: 0; border-bottom: 1px solid #2d333e; border-radius: 0; background: none; box-shadow: none; }
body.home .sh-ft__cta h2 { font-size: 36px; font-weight: 700; letter-spacing: -0.05em; line-height: 1.1; color: #f2f5fb; }
body.home .sh-ft__cta p { margin: 6px 0 0; font-size: 15px; color: #a8b5d4; }
body.home .sh-ft__cta p span { color: #f2f5fb; font-weight: 600; }
body.home .sh-ft__cta > a { display: inline-flex; align-items: center; height: auto; padding: 14px 22px; border-radius: 9px; background: #e8edf7; color: #172035; font-size: 14px; font-weight: 700; box-shadow: none; }
body.home .sh-ft__cta > a:hover { background: #fff; color: #172035; }
body.home .sh-ft__grid h3 { color: #a8b5d4; }
body.home .sh-ft__bottom { color: #a8b5d4; border-top: 1px solid #2d333e; }
@media (max-width: 760px) { body.home .sh-ft__cta { flex-direction: column; align-items: flex-start; } }

/* =====================================================================
   Productkaarten — premium afwerking
   ===================================================================== */
body.home .prods { gap: 18px; }
body.home .prods .catalog-card.xcard:not(.prod--custom),
body.home .prods .catalog-card.xcard:not(.prod--custom):hover {
  display: flex; flex-direction: column; padding: 7px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, #1c1f27 0%, #16181e 100%);
  box-shadow: inset 0 0 0 1px #ffffff10, inset 0 1px 0 #ffffff14, 0 1px 2px #0006, 0 24px 48px -32px #000;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s cubic-bezier(.2,.7,.2,1);
}
body.home .prods .catalog-card.xcard:not(.prod--custom):hover {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 1px #ffffff22, inset 0 1px 0 #ffffff26, 0 2px 4px #0006, 0 40px 70px -34px #000;
}

/* studio met een zweem van kleur per product */
body.home .prods .catalog-card.xcard { --st1: #f4f4f6; --st2: #e2e2e8; }
body.home .prods .catalog-card.xcard:has(.prod__vis--social)   { --st1: #faeed8; --st2: #ecd3a8; }
body.home .prods .catalog-card.xcard:has(.prod__vis--print)    { --st1: #f9e9e6; --st2: #ecc9c3; }
body.home .prods .catalog-card.xcard:has(.prod__vis--abtest)   { --st1: #f6e9f1; --st2: #e7cddd; }
body.home .prods .catalog-card.xcard:has(.prod__vis--reel)     { --st1: #eef4df; --st2: #d5e2b4; }
body.home .prods .catalog-card.xcard:has(.prod__vis--video)    { --st1: #ebeef9; --st2: #cfd6ee; }
body.home .prods .catalog-card.xcard:has(.prod__vis--campagne) { --st1: #e8f1f7; --st2: #c9dbe8; }
body.home .prods .catalog-card.xcard:has(.prod__vis--custom)   { --st1: #ebeefc; --st2: #cdd4f6; }
body.home .prods .catalog-card.xcard:not(.prod--custom) .prod__vis,
body.home .prods .catalog-card.xcard.prod--custom .prod__vis {
  background:
    radial-gradient(90% 70% at 50% 0%, #ffffff8c, transparent 65%),
    linear-gradient(180deg, var(--st1), var(--st2)) !important;
}
body.home .prods .catalog-card.xcard:not(.prod--custom) .prod__vis {
  border-radius: 18px !important;
  box-shadow: inset 0 0 0 1px #ffffff99, inset 0 -30px 50px -30px #0000001a;
}
body.home .prods .catalog-card.xcard:not(.prod--custom):hover .prod__vis { transform: none; box-shadow: inset 0 0 0 1px #ffffffcc, inset 0 -30px 50px -30px #0000001a; }
/* licht dat de cursor volgt */
body.home .prods .catalog-card.xcard .prod__vis::after {
  display: block !important; content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), #ffffff73, transparent 60%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .4s;
}
body.home .prods .catalog-card.xcard:hover .prod__vis::after { opacity: 1; }
body.home .xcard .prod__vis .pv__f { box-shadow: 0 1px 0 #ffffff inset, 0 20px 30px -14px rgb(30 25 20 / .5), 0 3px 8px rgb(30 25 20 / .16); }

/* labels op het podium */
.xcard__eta { left: 10px; bottom: 10px; height: 26px; padding: 0 10px 0 9px; gap: 6px; border-radius: 999px; background: #ffffffcc; color: #26272d; box-shadow: 0 1px 2px #00000014, inset 0 0 0 1px #ffffff; backdrop-filter: blur(10px) saturate(1.4); font: 600 11.5px/1 var(--font); }
.xcard__eta i { width: 6px; height: 6px; background: #17a35c; box-shadow: 0 0 0 3px #17a35c26; }
.xcard__best { left: 10px; top: 10px; height: 26px; padding: 0 10px; border-radius: 999px; font: 700 11.5px/1 var(--font); letter-spacing: .01em;
  background: linear-gradient(135deg, #ffe27a, #f5b93a); color: #2a1d00; box-shadow: 0 6px 16px -6px #f5b93aaa, inset 0 1px 0 #fff8; }

/* tekstdeel */
body.home .xcard:not(.prod--custom) .prod__body { padding: 15px 10px 8px; }
body.home .xcard .prod__name { font-size: clamp(18px, 1.12vw, 23px); font-weight: 600; letter-spacing: -0.03em; }
body.home .xcard .prod__name a { transition: color .2s; }
.xcard__chips li { font-size: 13px; color: #9a9ca8; }
body.home .xcard:not(.prod--custom) .prod__foot { margin-top: 14px; padding-top: 13px; border-top: 1px solid #ffffff0f; }
body.home .xcard .prod__price { display: flex; flex-direction: row !important; align-items: flex-start !important; white-space: nowrap; font-size: clamp(24px, 1.55vw, 32px); font-weight: 650; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.prod__cents { display: inline-block; font-size: .56em; font-weight: 600; letter-spacing: -0.02em; margin: .1em 0 0 1px; color: #c4c6ce; line-height: 1; }

/* knop */
body.home .prods .catalog-card.xcard:not(.prod--custom) a.prod__btn,
body.home .prods .catalog-card.xcard:not(.prod--custom):hover a.prod__btn {
  height: 40px; min-height: 40px; padding: 0 5px 0 15px; gap: 10px; border-radius: 999px;
  background: #ffffff0d; color: #f1f2f6; box-shadow: inset 0 0 0 1px #ffffff1f;
  font: 600 13.5px/1 var(--font);
}
body.home .prods .catalog-card.xcard a.prod__btn svg { box-sizing: content-box; width: 14px; height: 14px; padding: 8px; border-radius: 50%; background: #fff; color: #111; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
body.home .prods .catalog-card.xcard:not(.prod--custom):hover a.prod__btn { background: #fff; color: #111; box-shadow: none; }
body.home .prods .catalog-card.xcard:not(.prod--custom):hover a.prod__btn svg { background: #111; color: #fff; transform: translateX(2px) rotate(-45deg); }

/* bestseller: gouden rand */
body.home .prods .catalog-card.xcard.is-best:not(.prod--custom),
body.home .prods .catalog-card.xcard.is-best:not(.prod--custom):hover {
  background: linear-gradient(#1c1f27, #16181e) padding-box, linear-gradient(160deg, #ffe27a, #f5b93a55 40%, #ffffff12 70%) border-box !important;
  border: 1px solid transparent; padding: 6px;
  box-shadow: 0 1px 2px #0006, 0 30px 60px -36px #f5b93a66 !important;
}
body.home .prods .catalog-card.xcard.is-best .prod__vis { box-shadow: inset 0 0 0 1px #ffffff99 !important; }
body.home .prods .catalog-card.xcard.is-best a.prod__btn { background: #fff !important; color: #111 !important; box-shadow: none !important; }
body.home .prods .catalog-card.xcard.is-best a.prod__btn svg { background: #111; color: #fff; }

/* Stel zelf samen: zelfde afwerking */
body.home .prods .catalog-card.xcard.prod--custom,
body.home .prods .catalog-card.xcard.prod--custom:hover {
  padding: 7px; gap: 22px; border-radius: 22px;
  background: linear-gradient(90deg, #1c1f27, #16181e); box-shadow: inset 0 0 0 1px #ffffff10, inset 0 1px 0 #ffffff14;
}
body.home .prods .catalog-card.xcard.prod--custom .prod__vis { height: 88px !important; border-radius: 16px !important; }
body.home .xcard.prod--custom .prod__body { border: 0; height: 88px; padding-right: 14px; }
body.home .prods .catalog-card.xcard.prod--custom a.prod__btn { padding: 0 5px 0 16px; gap: 10px; height: 42px; }

@media (max-width: 760px) {
  body.home .prods .catalog-card.xcard:not(.prod--custom) { padding: 5px; border-radius: 18px; }
  body.home .xcard:not(.prod--custom) .prod__body { padding: 12px 7px 6px; }
  body.home .prods .catalog-card.xcard a.prod__btn { justify-content: space-between; }
}
@media (min-width: 1001px) {
  body.home .prods .catalog-card.xcard:not(.prod--custom) .prod__vis { height: clamp(140px, calc(100svh - 760px), 260px); }
}
@media (min-width: 1001px) and (max-height: 900px) {
  body.home .prods .catalog-card.xcard:not(.prod--custom) .prod__vis { height: clamp(140px, calc(100svh - 665px), 260px); }
}


.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}