/* De aparte bestelpagina: het gekozen ontwerp, met dezelfde letters en kleuren
   als de website. Op mobiel wordt het boek een compacte bestelsamenvatting. */
body.bestelpagina{background:var(--h-papier);background-image:none;color:var(--h-inkt)}
.bestelpagina .bestel-top{max-width:1080px;width:calc(100% - 80px);margin:0 auto;padding:26px 0;
  display:flex;justify-content:space-between;align-items:center;gap:20px}
.bestelpagina .merk{display:flex;align-items:center;gap:11px;color:var(--h-inkt);font:500 27px/1.1 var(--h-serif);
  text-decoration:none;white-space:nowrap}
.bestelpagina .h-anker{width:30px;height:30px;flex:0 0 auto;stroke:#AE863E;stroke-width:1.7;fill:none}
.bestel-terug{color:var(--h-inkt);font:500 16px/1.4 var(--h-sans);text-decoration:none}
.bestel-terug:hover{text-decoration:underline;text-underline-offset:4px}
.bestel-terug-pijl{margin-right:8px;font-size:23px;vertical-align:-1px}
.bestel-inhoud{max-width:1080px;width:calc(100% - 80px);margin:20px auto 64px;padding:36px 40px;
  background:var(--h-wit);border:1px solid var(--h-lijn);border-radius:18px;
  display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto 1fr;
  gap:28px 40px;align-items:start}
.bestel-kop{grid-column:1;grid-row:1}
.bestel-kop h1{margin:0;font:500 52px/1.05 var(--h-serif);letter-spacing:-.025em}
.bestel-kop>p{margin:14px 0 0;max-width:48ch;font:400 20px/1.5 var(--h-serif);color:var(--h-mat);text-wrap:pretty}
.bestelpagina #bestellen .bestel-boek{display:block;grid-column:2;grid-row:1 / 3;background:var(--h-perkament);padding:22px;border-radius:12px;
  margin:0;min-width:0;border:0}
.bestel-boekfoto{width:100%;aspect-ratio:1.15;object-fit:cover;object-position:52% 50%;border-radius:7px}
.bestel-boektekst h2{font:600 20px/1.35 var(--h-sans);letter-spacing:0;margin:20px 0 4px}
.bestel-uitvoering{font:400 14px/1.5 var(--h-sans);margin:0 0 16px;color:var(--h-mat)}
.bestel-prijs{display:flex;flex-direction:column;gap:5px;margin:0}
.bestelpagina #bestellen .bestel-prijs strong{font:500 44px/1 var(--h-serif);letter-spacing:-.025em;color:var(--h-inkt)}
.bestel-prijs span{font:400 14px/1.5 var(--h-sans);color:var(--h-mat)}
.bestelpagina #bestel-form{grid-column:1;grid-row:2;min-width:0;margin:0}
.bestelpagina .website{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bestelpagina #bestellen .veldgroep{margin:0 0 22px;padding:0;border:0;min-width:0}
.bestelpagina #bestellen .veldgroep>label,.bestelpagina #bestellen .veldgroep>legend{display:block;padding:0;margin:0 0 8px;
  color:var(--h-inkt);font:600 16px/1.4 var(--h-sans);letter-spacing:0;text-transform:none}
.bestelpagina #bestellen .veldgroep input:not([type=radio]){width:100%;min-height:54px;border-radius:11px;padding:12px 16px;
  border-color:var(--h-lijn);font:400 17px/1.4 var(--h-sans);background:var(--h-wit)}
.bestelpagina #bestellen .veldgroep input:not([type=radio]):focus,
.bestelpagina #bestellen .bezorg-ander input:focus{outline:2px solid var(--h-nacht);outline-offset:1px;border-color:var(--h-nacht)}
.bestelpagina #bestellen .veldgroep input[aria-invalid=true]:not([type=radio]),
.bestelpagina #bestellen .bezorg-ander input[aria-invalid=true]{border-color:var(--h-rood)}
.bestelpagina input::placeholder{color:var(--h-mat);opacity:.85}
.bestelpagina #bestellen .suggesties{background:var(--h-wit);border-color:var(--h-lijn);border-radius:11px;
  overflow-x:hidden;box-shadow:0 12px 28px rgba(24,32,49,.12)}
.bestelpagina #bestellen .suggesties button{font:400 16px/1.45 var(--h-sans);padding:13px 16px;min-height:48px}
.bestelpagina #bestellen .suggesties button:hover,.bestelpagina #bestellen .suggesties button.actief{background:var(--h-perkament)}
.bestelpagina .adres-ok:empty{display:none}
.bestelpagina .adres-ok{margin-top:4px;font:400 14px/1.4 var(--h-sans)}
.bestelpagina .voor-wie-opties{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bestelpagina #bestellen .keuze{display:flex;align-items:center;gap:12px;cursor:pointer;font:400 17px/1.4 var(--h-sans);
  padding:13px 16px;min-height:54px;border:1px solid var(--h-lijn);border-radius:11px;background:var(--h-wit);
  margin:0;text-transform:none;letter-spacing:0}
.bestelpagina #bestellen .keuze:has(input:checked){border-color:var(--h-nacht);box-shadow:inset 0 0 0 .5px var(--h-nacht)}
.bestelpagina #bestellen .keuze:has(:focus-visible){outline:2px solid var(--h-nacht);outline-offset:3px}
.bestelpagina #bestellen input[type=radio]{width:24px;height:24px;min-width:24px;accent-color:var(--h-nacht);margin:0;flex-shrink:0}
.bestelpagina #bestellen input[type=radio]:focus{outline:none}
.bestelpagina .bestel-bezorging{background:var(--h-perkament);border-radius:11px;margin-bottom:20px}
.bestel-bezorging>summary{display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;
  cursor:pointer;padding:14px 16px;font:400 16px/1.45 var(--h-sans)}
.bestel-bezorging>summary::-webkit-details-marker{display:none}
.bestel-bezorging>summary>span:first-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.bestel-bezorging>summary strong{font-size:17px;font-weight:600}
#bestel-bezorg-overzicht{overflow-wrap:anywhere}
.bestel-wijzigen{border-left:1px solid #D8CCB8;padding:8px 0 8px 24px;font-size:17px;text-decoration:underline;
  text-underline-offset:3px;flex-shrink:0}
.bestel-bezorging[open]>.bestel-bezorgkeuze{border-top:1px solid var(--h-lijn)}
.bestel-bezorgkeuze{padding:20px}
.bestel-bezorgkeuze fieldset{border:0;padding:0;min-width:0}
.bestelpagina #bestellen .bestel-bezorgkeuze legend{font:600 17px/1.4 var(--h-sans);margin-bottom:12px;
  color:var(--h-inkt);letter-spacing:0;text-transform:none}
.bestelpagina .bezorg-opties{display:grid;gap:10px}
.bestelpagina #bestellen .bezorg-keuze{padding:12px;gap:12px;align-items:flex-start;font-size:16px}
.bestelpagina .bezorg-tekst{display:flex;flex-direction:column;gap:4px}
.bestelpagina .bezorg-tekst strong{font-weight:500;font-size:16px}
.bestelpagina .bezorg-tekst small{font:400 14px/1.4 var(--h-sans);color:var(--h-mat)}
.bestelpagina .bezorg-ander{margin-top:20px}
.bestelpagina .bezorg-ander>label{font:600 16px/1.4 var(--h-sans);display:block;margin-bottom:8px}
.bestelpagina .bezorg-ander input{width:100%;font-size:17px}
.bestelpagina #bestellen .bezorg-buitenland{font:400 14px/1.5 var(--h-sans);margin:14px 0 0}
.bestelpagina .tekstknop{font:inherit;color:var(--h-inkt);text-decoration:underline;text-underline-offset:3px;
  background:none;border:0;padding:4px 0;cursor:pointer;text-align:left}
.bestelpagina #bestellen #bestel-knop{min-height:56px;font:600 17px/1.3 var(--h-sans);border-radius:11px;margin-top:0}
.bestelpagina .bestel-zekerheid{border:0;background:none;padding:0;max-width:48ch;margin:20px auto 0;box-shadow:none;text-align:center}
.bestelpagina .bestel-zekerheid p{font:400 14px/1.6 var(--h-sans);color:var(--h-mat);margin:0 0 14px}
.bestelpagina .bestel-zekerheid .garantie{font:inherit;color:inherit}
.bestelpagina .bestel-zekerheid .zekerheid-kop{font-weight:600;color:var(--h-inkt)}
.bestelpagina .bestel-zekerheid a{font:inherit;color:var(--h-inkt);text-underline-offset:3px}
.bestelpagina .bestel-zekerheid .bestel-voorwaarden{margin-bottom:0}
.bestelpagina #bestellen .veldfout{font:400 15px/1.45 var(--h-sans);color:var(--h-rood);margin:8px 0 0;letter-spacing:0}
.bestelpagina :is(input,summary,a,button):focus-visible{outline:2px solid var(--h-nacht);outline-offset:3px}
.bestelpagina #bestel-fout:empty{display:none}
.bestelpagina #bestel-voor[hidden]{display:none}
/* Cadeau kiezen gebeurt eenmaal, direct boven de bijbehorende velden. */
.cadeaukassa .bestel-inhoud{grid-template-rows:auto auto 1fr;row-gap:22px}
.cadeaukassa #cadeaukeuze{grid-column:1;grid-row:2;margin:0;min-width:0}
.cadeaukassa #bestel-form,.cadeaukassa #cadeaukaart-koop{grid-column:1;grid-row:3;margin:0;min-width:0}
.cadeaukassa #bestellen .bestel-boek{grid-row:1 / 4}
.cadeaukassa .cadeaukeuze-opties{grid-template-columns:1fr 1fr;gap:12px}
.cadeaukassa .cadeaukeuze-optie{position:relative;padding:16px 32px 16px 14px;border-width:1px;
  transition:border-color .15s,background-color .15s}
.cadeaukassa .cadeaukeuze-optie::after{content:"";position:absolute;right:12px;top:18px;
  width:14px;height:14px;border:1px solid var(--h-lijn);border-radius:50%;background:var(--h-wit)}
.cadeaukassa .cadeaukeuze-optie[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--h-nacht)}
.cadeaukassa .cadeaukeuze-optie[aria-pressed=true]::after{border-color:var(--h-nacht);background:var(--h-nacht);box-shadow:inset 0 0 0 3px var(--h-wit)}
.cadeaukassa .cadeaukeuze-optie:hover{border-color:var(--h-nacht)}
.cadeaukassa .cadeaukeuze-optie strong{font-size:16px;line-height:1.3}
.cadeaukassa .cadeaukeuze-optie span{font-size:14px;margin-top:6px;line-height:1.4}
.cadeaukassa #cadeaukaart-koop[hidden]{display:none}
.cadeaukassa #cadeaukaart-koop :is(.cadeaukaart-uitleg,.cadeaukaart-voorwaarden){font:400 14px/1.5 var(--h-sans);color:var(--h-mat);margin:0 0 18px}
.cadeaukassa #cadeaukaart-koop .knop{width:100%;min-height:56px;border-radius:11px;font:600 17px/1.3 var(--h-sans)}
.cadeaukassa #cadeaukaart-koop label small{font-weight:400;color:var(--h-mat)}
@media(prefers-reduced-motion:reduce){.cadeaukassa .cadeaukeuze-optie{transition:none}}
@media(min-width:801px) and (min-height:600px){
  .bestelpagina #bestellen .bestel-boek{position:sticky;top:24px;align-self:start}
}
@media(max-width:900px){
  .bestel-inhoud{gap:28px;grid-template-columns:minmax(0,1fr) 270px;padding:28px}
  .bestelpagina #bestellen .bestel-boek{padding:20px}
  .bestelpagina #bestellen .veldgroep>label,.bestelpagina #bestellen .veldgroep>legend{font-size:17px}
  .bestelpagina #bestellen .keuze{font-size:16px;padding:14px 12px;gap:9px}
}
@media(max-width:800px){
  .bestelpagina .bestel-top{width:auto;margin:0 20px;padding:20px 0;gap:12px}
  .bestelpagina .merk{font-size:24px;gap:9px}
  .bestelpagina .h-anker{width:24px;height:24px}
  .bestel-terug{font-size:14px}.bestel-terug-extra{display:none}
  .bestel-terug-pijl{font-size:20px;margin-right:4px}
  .bestel-inhoud{width:100%;padding:20px 20px 40px;margin:0;grid-template-columns:minmax(0,1fr);gap:24px;border:0;border-radius:0;background:transparent}
  .bestel-kop h1{font-size:42px}
  .bestel-kop>p{font-size:18px;line-height:1.5;margin-top:12px}
  .bestelpagina #bestellen .bestel-boek{grid-column:1;grid-row:2;display:flex;justify-content:flex-start;gap:16px;padding:16px;margin:0;align-items:center}
  .bestel-boekfoto{width:112px;height:128px;aspect-ratio:auto;flex-shrink:0;object-position:52% 50%;border-radius:5px}
  .bestel-boektekst{min-width:0;flex:1}
  .bestel-boektekst h2{font-size:17px;line-height:1.35;margin:0 0 4px}
  .bestel-uitvoering{font-size:13px;line-height:1.4;margin:0 0 10px}
  .bestel-prijs{flex-direction:column;align-items:flex-start;gap:3px}
  .bestelpagina #bestellen .bestel-prijs strong{font-size:30px}.bestel-prijs span{font-size:12px}
  .bestelpagina #bestel-form{grid-row:3}
  .bestelpagina #bestellen .veldgroep{margin-bottom:22px}
  .bestelpagina #bestellen .veldgroep>label,.bestelpagina #bestellen .veldgroep>legend{font-size:16px;margin-bottom:8px}
  .bestelpagina #bestellen .veldgroep input:not([type=radio]){min-height:54px;font-size:17px;padding:12px 14px}
  .bestelpagina .voor-wie-opties{gap:10px}
  .bestelpagina #bestellen .keuze{min-height:54px;font-size:16px;padding:12px;gap:9px}
  .bestelpagina #bestellen input[type=radio]{width:21px;height:21px;min-width:21px}
  .bestel-bezorging>summary{font-size:16px;padding:14px;gap:12px}
  .bestel-bezorging>summary strong{font-size:15px}
  .bestel-wijzigen{font-size:14px;padding-left:14px}
  .bestel-bezorgkeuze{padding:14px}
  .bestelpagina #bestellen .bezorg-keuze{font-size:15px;gap:9px}
  .bestelpagina .bezorg-tekst strong{font-size:15px}
  .bestelpagina #bestellen #bestel-knop{min-height:56px;font-size:17px;padding:14px}
  .bestelpagina .bestel-zekerheid{margin-top:20px}
}
@media(max-width:360px){
  .bestelpagina .merk{font-size:21px;gap:7px}
  .bestel-inhoud{padding-right:16px;padding-left:16px}
  .bestel-kop h1{font-size:40px}
  .bestelpagina #bestellen .bestel-boek{gap:12px;padding:12px}.bestel-boekfoto{width:88px;height:108px}
  .bestelpagina .voor-wie-opties{gap:8px}
  .bestelpagina #bestellen .keuze{font-size:15px;gap:8px;padding:10px}
}
@media(max-width:800px){
  .cadeaukassa .bestel-inhoud{row-gap:20px}
  .cadeaukassa .bestel-kop h1{font-size:36px}
  .cadeaukassa #bestellen .bestel-boek{grid-row:3;padding:14px;gap:14px}
  .cadeaukassa .bestel-boekfoto{width:80px;height:92px}
  .cadeaukassa #bestel-form,.cadeaukassa #cadeaukaart-koop{grid-row:4}
  .cadeaukassa .cadeaukeuze-opties{gap:10px}
  .cadeaukassa .cadeaukeuze-optie{padding:14px 30px 14px 12px}
  .cadeaukassa .cadeaukeuze-optie::after{right:10px;top:17px}
  .cadeaukassa .cadeaukeuze-optie strong{font-size:15px}
  .cadeaukassa .cadeaukeuze-optie span{font-size:13px}
}

/* De bestaande bezorgperiode verhuist mee met de cadeaubestelling. */
.bestelpagina .leverdatumregel{margin:10px 0 0;font-family:var(--h-sans);font-size:14px;
  line-height:20px;color:var(--h-mat);text-align:center;white-space:nowrap}
.bestelpagina .leverdatumregel[hidden],.bestelpagina:not(.cadeaukassa) .leverdatumregel{display:none}