/* BEWAAR — paginaspecifieke layout. Alleen wat niet in een component past. */

/* ====================================================================
   HOME — held
   Links inhoud op grond, rechts beeld. Rood komt hier een keer voor: de knop.
   ==================================================================== */
.home-held { border-bottom: var(--rand-inkt); }
.home-held__intro { max-width: 40ch; color: var(--inkt-zacht); }
.home-held__bewijs {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center;
  padding-top: var(--s5); border-top: var(--rand); font-size: .875rem;
}

/* Merkbelofte-blok: inkt-vlak met vier kolommen */
.belofte { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .belofte { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .belofte { grid-template-columns: repeat(4, 1fr); } }
.belofte__cel { padding: var(--s6) var(--s5); border: 1px solid #3a3634; margin: -0.5px; }
.belofte__cel h3 { font-size: 1.0625rem; margin-bottom: var(--s2); }
.belofte__cel p { font-size: .875rem; color: rgba(243,242,242,.72); line-height: 1.5; }

/* Transformatie-sectie: schuif links, uitleg rechts */
.transform-blok { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 62rem) { .transform-blok { grid-template-columns: 1.15fr .85fr; gap: var(--s8); } }
.transform-blok__uitleg > * + * { margin-top: var(--s4); }
.transform-blok__uitleg ol { counter-reset: t; margin-top: var(--s5); }
.transform-blok__uitleg li {
  counter-increment: t; position: relative; padding-left: var(--s7);
  padding-block: var(--s3); border-bottom: var(--rand); font-size: .9375rem;
}
.transform-blok__uitleg li::before {
  content: counter(t, decimal-leading-zero); position: absolute; left: 0; top: calc(var(--s3) + .35em);
  font-family: var(--mono); font-size: .6875rem; color: var(--rood-tekst); letter-spacing: .08em;
}

/* Uitgelicht: groot beeld met tekstvlak eroverheen */
.uitgelicht { position: relative; }
.uitgelicht__beeld { aspect-ratio: 4/3; }
@media (min-width: 62rem) { .uitgelicht__beeld { aspect-ratio: 21/9; } }
.uitgelicht__vlak { background: var(--wit); padding: var(--s6); border: var(--rand-inkt); }
@media (min-width: 62rem) {
  .uitgelicht__vlak { position: absolute; left: var(--s8); bottom: var(--s8); max-width: 27rem; }
}
.uitgelicht__vlak > * + * { margin-top: var(--s4); }

/* ====================================================================
   PDP — twee kolommen: galerij links, koopblok rechts
   ==================================================================== */
.pdp { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 62rem) {
  .pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s8); }
  .pdp__koop { position: sticky; top: calc(var(--kop-hoogte, 110px) + var(--s5)); }
}
.pdp__koop > * + * { margin-top: var(--s5); }
.pdp__titelrij > * + * { margin-top: var(--s3); }
.pdp__levering {
  display: flex; align-items: flex-start; gap: var(--s3);
  background: var(--veld); padding: var(--s4); font-size: .875rem; line-height: 1.45;
}
.pdp__levering svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--rood-tekst); }
.pdp__usp { border-top: var(--rand); padding-top: var(--s4); }
.pdp__usp li { position: relative; padding-left: var(--s5); font-size: .9375rem; padding-block: var(--s2); }
.pdp__usp li::before { content: ""; position: absolute; left: 0; top: .8em;
                       width: 8px; height: 8px; background: var(--rood); }

/* Galerij */
.galerij__hoofd { position: relative; background: var(--veld); aspect-ratio: 4/3; overflow: hidden; }
.galerij__hoofd img { width: 100%; height: 100%; object-fit: cover; }
.galerij__duimen { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-top: var(--s2); }
.galerij__duim { border: 2px solid transparent; background: var(--veld); cursor: pointer; padding: 0; overflow: hidden; }
.galerij__duim img { aspect-ratio: 1/1; width: 100%; object-fit: cover; }
.galerij__duim[aria-current="true"] { border-color: var(--inkt); }

/* ====================================================================
   COLLECTIE
   ==================================================================== */
.collectie__filters { display: flex; flex-wrap: wrap; gap: var(--s2); padding-block: var(--s5);
                      border-bottom: var(--rand); margin-bottom: var(--s6); }
.chip {
  border: 2px solid var(--lijn); background: transparent; padding: var(--s2) var(--s4);
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; color: var(--inkt); text-decoration: none;
}
.chip:hover { border-color: var(--inkt); }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--inkt); color: var(--grond); border-color: var(--inkt); }
.collectie__leeg { padding-block: var(--s8); text-align: center; color: var(--inkt-zacht); }

/* ====================================================================
   WINKELMAND-PAGINA + AFREKENEN
   ==================================================================== */
.mand-layout { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 62rem) { .mand-layout { grid-template-columns: 1.5fr 1fr; gap: var(--s8); } }
.samenvatting { background: var(--wit); border: var(--rand-inkt); padding: var(--s5); }
@media (min-width: 62rem) { .samenvatting { position: sticky; top: calc(var(--kop-hoogte, 110px) + var(--s5)); } }
.samenvatting h2 { font-size: 1.125rem; margin-bottom: var(--s4); }

.afrekenen { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 62rem) { .afrekenen { grid-template-columns: 1.25fr 1fr; gap: var(--s8); } }
.afrekenen fieldset { border: 0; padding: 0; margin: 0 0 var(--s6); }
.afrekenen legend { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
                    color: var(--rood-tekst); padding-bottom: var(--s3); margin-bottom: var(--s4);
                    border-bottom: var(--rand-inkt); width: 100%; }
.veldrij { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 34rem) { .veldrij--2 { grid-template-columns: 1fr 1fr; } .veldrij--3 { grid-template-columns: 1fr 1fr 1fr; } }

.betaalkeuze { display: grid; gap: var(--s2); }
.betaalkeuze input { position: absolute; opacity: 0; pointer-events: none; }
.betaalkeuze label {
  border: 2px solid var(--lijn); background: var(--wit); padding: var(--s4);
  display: flex; align-items: center; gap: var(--s3); cursor: pointer; font-weight: 700; font-size: .9375rem;
}
.betaalkeuze input:checked + label { border-color: var(--inkt); }
.betaalkeuze input:focus-visible + label { outline: 3px solid var(--rood); outline-offset: 2px; }
.betaalkeuze label small { margin-left: auto; font-family: var(--mono); font-size: .6875rem;
                           font-weight: 400; color: var(--inkt-zacht); letter-spacing: .04em; }

.mvp-melding {
  border: 2px solid var(--inkt); background: var(--veld); padding: var(--s4) var(--s5);
  display: flex; gap: var(--s3); align-items: flex-start; font-size: .875rem; line-height: 1.5;
}
.mvp-melding svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.mvp-melding b { font-weight: 800; }

/* ====================================================================
   INHOUDSPAGINA (legal, verzending, contact)
   ==================================================================== */
.inhoud { max-width: 44rem; }
.inhoud > * + * { margin-top: var(--s4); }
.inhoud h2 { margin-top: var(--s7); padding-bottom: var(--s3); border-bottom: var(--rand-inkt); }
.inhoud h3 { margin-top: var(--s5); }
.inhoud ul { list-style: none; }
.inhoud ul li { position: relative; padding-left: var(--s5); padding-block: var(--s1); }
.inhoud ul li::before { content: ""; position: absolute; left: 0; top: .7em;
                        width: 6px; height: 6px; background: var(--rood); }
.inhoud a { color: var(--rood-tekst); }
.inhoud dl { display: grid; gap: var(--s3); }
@media (min-width: 40rem) { .inhoud dl { grid-template-columns: 12rem 1fr; } }
.inhoud dt { font-weight: 700; }
.inhoud table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.inhoud th, .inhoud td { text-align: left; padding: var(--s3); border-bottom: var(--rand); }
.inhoud th { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; }

/* ====================================================================
   LANDINGSPAGINA (advertentieverkeer)
   Geen navigatie-afleiding: alleen logo, en de CTA staat overal.
   ==================================================================== */
.lp-kop { background: var(--inkt); color: var(--grond); }
.lp-kop__binnen { height: var(--header-h); display: flex; align-items: center; justify-content: space-between;
                  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.lp-kop__usp { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em;
               text-transform: uppercase; color: rgba(243,242,242,.72); display: none; }
@media (min-width: 40rem) { .lp-kop__usp { display: block; } }

.lp-aanbod {
  background: var(--rood-vlak); color: #fff; padding: var(--s5); display: flex; flex-wrap: wrap;
  gap: var(--s4); align-items: center; justify-content: space-between;
}
.lp-aanbod h2 { font-size: 1.25rem; max-width: 24ch; }
.lp-aanbod p { font-size: .875rem; margin-top: var(--s1); }

/* ====================================================================
   TE-DOEN-MARKERING
   Rood op inkt is maar 3,95:1; daarom grond-tekst met een rood randje.
   ==================================================================== */
.todo {
  border-left: 3px solid var(--rood);
  padding-left: var(--s2);
  color: var(--grond);
}