/* Boekenbazaar: de boeken van Indian Books op een boekenplank.
 *
 * Regelnummers verwijzen naar Shipshape (https://shipshape.toao.nl/).
 *
 * Lettertypes: Fraunces (Undercase Type) voor koppen en ruggen, Archivo
 * (Omnibus-Type) voor de rest; beide SIL Open Font License 1.1 en dezelfde
 * bestanden als op shipshape.toao.nl. Twee fonts, serif met sans (CK-TYP-05,
 * CK-TYP-06), twee gewichten: 400 en 600 (CK-TYP-12).
 */

@font-face {
  font-family: "Fraunces";
  src: url("fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Licht: gebroken wit papier en een warme, bijna zwarte inkt
   * (CK-KLR-05, CK-KLR-54, CK-TYP-04). Secundaire tekst via dekking van
   * dezelfde inkt (CK-KLR-12); 70% haalt nog 4,5:1 op het papier. */
  --papier: #f6f2ea;
  --kast: #ece5d8;
  --vlak: #fffdf8;
  --inkt: #1f1c19;
  --inkt-2: rgb(31 28 25 / 0.7);
  --lijn: rgb(31 28 25 / 0.14);
  --hout-boven: #c49a6c;
  --hout-voor: #8a6240;
  --prijs: #9c3b22;
  --knop: #1f1c19;
  --knop-hover: #3a3530;
  --knop-tekst: #fffdf8;
  --focus: #1f1c19;
  --achtergrond-dialoog: rgb(24 18 12 / 0.55);
  --rug-filter: none;
  /* Het zoekveld krijgt een eigen vulling op het papier (CK-KLR-32). */
  --veld: #ebe4d6;

  /* Typeschaal: zes maten (CK-TYP-03), vloeiend begrensd met clamp()
   * (CK-TYP-10, CK-TYP-25). De basis zakt op mobiel niet (CK-TYP-01). */
  --t-klein: 0.8125rem;
  --t-basis: 1.0625rem;
  --t-rug: 1rem;
  --t-kast: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --t-titel: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --t-reus: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);

  /* Ruimte op een 4-punts raster (CK-LAY-08). */
  --rand: clamp(16px, 4vw, 48px);
  --radius: 10px; /* één radius voor kleine componenten (CK-CMP-07) */
  --snel: 180ms;
  --zacht: cubic-bezier(0.2, 0.7, 0.2, 1); /* nooit lineair (CK-MOT-05) */

  /* De plank: een rij is zo hoog als de hoogste rug (252px maal --schaal)
   * plus 28px ruimte erboven (de rug komt omhoog bij hover en focus) en 20px
   * hout eronder. */
  --schaal: 1;
  --rij: calc(252px * var(--schaal) + 48px);
  --balk: 0px; /* hoogte van de zoekbalk, gezet door boekenbazaar.js */
}

/* Donker: een eigen walnoottint in plaats van een gespiegeld palet
 * (CK-KLR-02, CK-KLR-21, CK-KLR-28). Hogere lagen zijn lichter (CK-KLR-11),
 * met grotere stappen dan in licht (CK-KLR-07); de prijs schuift naar een
 * lichtere tint (CK-KLR-26). */
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #16130f;
    --kast: #211c17;
    --vlak: #2b251f;
    --inkt: #efe8dc;
    --inkt-2: rgb(239 232 220 / 0.7);
    --lijn: rgb(239 232 220 / 0.16);
    --hout-boven: #6e4f33;
    --hout-voor: #4b3523;
    --prijs: #eb9c7d;
    --knop: #efe8dc;
    --knop-hover: #ffffff;
    --knop-tekst: #16130f;
    --focus: #efe8dc;
    --achtergrond-dialoog: rgb(0 0 0 / 0.65);
    /* Lichte ruggen niet laten verblinden; verzadiging iets omlaag. */
    --rug-filter: brightness(0.9) saturate(0.9);
    --veld: #2b251f;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html:has(dialog[open]) {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: var(--t-basis);
  line-height: 1.5; /* CK-TYP-11 */
  font-weight: 400;
}

h1,
h2,
p {
  margin: 0;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.overslaan {
  position: absolute;
  left: var(--rand);
  top: -100px;
  padding: 12px 24px;
  border-radius: var(--radius);
  background: var(--knop);
  color: var(--knop-tekst);
  font-weight: 600;
  z-index: 2;
}
.overslaan:focus {
  top: 12px;
}

/* --- kop en intro --------------------------------------------------------
 * De kop blijft klein, zodat de plank zelf boven de vouw staat (CK-HIE-08,
 * CK-NAV-13). De h1 is de ene reuzentekst van de pagina (CK-TYP-27), groot
 * maar in normaal gewicht (CK-HIE-09) en strak gezet (CK-TYP-02). */

.kop,
main,
.voet {
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--rand);
}

.kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  padding-block: 20px;
}

.merk {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: var(--t-kast);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.kop__noot {
  font-size: var(--t-klein);
  color: var(--inkt-2);
}

main {
  outline: none;
}

.intro {
  padding-block: 24px 40px;
}

.intro h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: var(--t-reus);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 36;
  text-wrap: balance;
}

.intro p {
  margin-top: 16px;
  max-width: 34rem; /* geen schermbrede regels (CK-LAY-16) */
  text-wrap: pretty;
}

/* --- de zoekbalk ---------------------------------------------------------
 * Met de hele winkel op de plank is vinden het echte probleem (CK-NAV-37):
 * zoeken op titel en auteur staat prominent bovenaan (CK-NAV-20) en blijft
 * bij het scrollen in beeld, met het aantal resultaten en een wisknop
 * (CK-NAV-21). Daaronder de sprongen naar elke kast. Het veld krijgt een
 * vulling in plaats van een rand (CK-KLR-32). */

.balk {
  position: sticky;
  top: 0;
  z-index: 2;
  margin-inline: calc(var(--rand) * -1);
  padding: 12px var(--rand) 8px;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
}

.zoek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.zoek__veld {
  position: relative;
  flex: 1 1 18rem;
  max-width: 30rem;
}

.zoek__icoon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--inkt-2);
  pointer-events: none;
}

.zoek__veld input {
  width: 100%;
  min-height: 48px;
  padding: 10px 48px 10px 44px;
  border: 0;
  border-radius: var(--radius);
  background: var(--veld);
  color: var(--inkt);
  font: inherit;
  appearance: none;
}
.zoek__veld input::placeholder {
  color: var(--inkt-2);
  opacity: 1;
}
.zoek__veld input::-webkit-search-cancel-button {
  appearance: none;
}

.zoek__wis {
  position: absolute;
  right: 2px;
  top: 2px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--inkt);
  cursor: pointer;
}
.zoek__wis:hover {
  background: color-mix(in srgb, var(--inkt) 8%, var(--veld));
}
.zoek__wis[hidden] {
  display: none;
}

.zoek__stand {
  font-size: var(--t-klein);
  color: var(--inkt-2);
  font-variant-numeric: tabular-nums;
}

/* Eén rij sprongen; past hij niet, dan schuift hij zijwaarts en loopt hij door
 * tot over de rand (CK-LAY-54). */
.sprong__lijst {
  display: flex;
  gap: 8px;
  margin: 8px calc(var(--rand) * -1) 0;
  padding: 4px var(--rand);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--lijn) transparent;
}
.sprong__lijst li {
  flex: none;
}

.sprong__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px; /* tikdoel (CK-CMP-01) */
  padding: 8px 14px;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  font-size: var(--t-klein);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--snel) var(--zacht);
}
.sprong__link:hover {
  background: var(--kast);
}
.sprong__aantal {
  font-weight: 400;
  color: var(--inkt-2);
  font-variant-numeric: tabular-nums;
}

/* --- de kasten -----------------------------------------------------------
 * Per kast één plank, gegroepeerd op de winkelcategorie (CK-HIE-11). Kop en
 * ondertitel staan dicht op elkaar, de plank verder weg (CK-LAY-04). Kleine
 * kasten staan naast elkaar, een grote neemt de volle breedte en loopt over
 * meerdere planken door, zoals een boekenkast. */

.kasten {
  display: flex;
  flex-wrap: wrap;
  gap: 56px 48px;
  margin-top: 40px;
}

.kast {
  flex: 1 1 auto;
  min-width: min(100%, 20rem);
  max-width: 100%;
}

.kast[hidden] {
  display: none;
}

.kast__kop {
  margin-bottom: 16px;
}

.kast__kop h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: var(--t-kast);
  line-height: 1.2;
  letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--balk) + 24px);
}

.kast__kop p {
  margin-top: 4px;
  font-size: var(--t-klein);
  color: var(--inkt-2); /* bijzaak via dekking (CK-HIE-03) */
}

/* De boeken staan in rijen van vaste hoogte (--rij); onder elke rij ligt een
 * plank: het bovenvlak (8px) en de voorkant (12px), twee egale houttinten,
 * geen verloop (CK-KLR-55). Omdat elke rij even hoog is, valt de herhaalde
 * achtergrond precies onder de boeken. Ruimte boven de boeken laat een rug
 * omhoog komen zonder dat de focusring wordt afgesneden. */
.kast__rij {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 2px;
  margin: 0;
  padding: 0 20px;
  list-style: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: repeating-linear-gradient(
    to bottom,
    var(--kast) 0 calc(var(--rij) - 20px),
    var(--hout-boven) calc(var(--rij) - 20px) calc(var(--rij) - 12px),
    var(--hout-voor) calc(var(--rij) - 12px) var(--rij)
  );
}

.plek {
  flex: none;
  display: flex;
  align-items: flex-end;
  height: var(--rij);
  padding-bottom: 20px;
}

.plek[hidden] {
  display: none;
}

.plek--uit {
  margin-inline: 10px;
}

/* Niets gevonden: zeg het, en geef de weg terug (CK-NAV-21). */
.niets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 40px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--kast);
}
.niets[hidden] {
  display: none;
}

/* --- de rug --------------------------------------------------------------
 * Breedte en hoogte verschillen per boek (dikte en formaat uit boeken.js);
 * de dikte is een minimum, een rug met veel tekst wordt breder in plaats van
 * de tekst af te kappen (CK-CMP-40). De tekst leest van onder naar boven,
 * zoals op Nederlandse ruggen. De rug zelf is de knop: het hele boek is het
 * tikdoel, minstens 40px breed en ruim boven 44px hoog (CK-CMP-01,
 * CK-CMP-73). */

.rug {
  --lift: 0px;
  position: relative;
  display: block;
  min-width: calc(var(--b) * 1px);
  height: calc(var(--h) * var(--schaal) * 1px);
  padding: 22px 6px 26px;
  border: 0;
  border-radius: 3px 3px 2px 2px;
  background-color: var(--rug);
  background-repeat: no-repeat;
  color: var(--inkt);
  font: inherit;
  cursor: pointer;
  filter: var(--rug-filter);
  /* Een lichte rand links en een donkere rechts: de rug is rond. */
  box-shadow:
    inset 3px 0 0 rgb(255 255 255 / 0.1),
    inset -3px 0 0 rgb(0 0 0 / 0.14);
  transform: translateY(calc(var(--lift) * -1));
  transition: transform var(--snel) var(--zacht);
}

/* Een klein vignet onderaan de rug: het merkje van de uitgever. */
.rug::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 7px;
  height: 7px;
  background: currentColor;
  opacity: 0.75;
  transform: translateX(-50%) rotate(45deg);
}

/* Versiering per rug, in de accentkleur van het boek. */
.rug--banden {
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
  background-size: 100% 2px;
  background-position:
    0 8px,
    0 13px,
    0 calc(100% - 20px),
    0 calc(100% - 25px);
}
.rug--lijn {
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
  background-size: 100% 3px;
  background-position:
    0 10px,
    0 calc(100% - 22px);
}
.rug--blok {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 12px;
  background-position: 0 0;
}

.rug__tekst {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
}

.rug__titel {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: var(--t-rug);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.rug__auteur {
  font-size: var(--t-klein);
  line-height: 1.1;
  text-wrap: balance;
}

/* Alle staten (CK-MOT-03): hover trekt het boek een stukje van de plank,
 * focus ook (plus de ring), indrukken iets minder ver en iets donkerder
 * (CK-MOT-07, CK-MOT-08). */
@media (hover: hover) {
  .rug:hover,
  .voorkant:hover {
    --lift: 10px;
  }
}
.rug:focus-visible,
.voorkant:focus-visible {
  --lift: 10px;
  position: relative;
  z-index: 1;
}
.rug:active,
.voorkant:active {
  --lift: 4px;
  filter: var(--rug-filter) brightness(0.92);
}

/* --- de voorkant ---------------------------------------------------------
 * Per begonnen twaalf boeken staat er één met de echte voorkant naar voren,
 * zoals een boekhandel een titel uitlicht; het brengt beeld en kleur op de
 * plank (CK-CMP-21). De breedte (--vb) volgt uit de verhouding van de omslag,
 * zodat een vierkante box-set niet hoger wordt dan een roman. */

.voorkant {
  --lift: 0px;
  display: block;
  width: calc(var(--vb) * var(--schaal) * 1px);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transform: translateY(calc(var(--lift) * -1));
  transition: transform var(--snel) var(--zacht);
}

/* De echte omslag. Zijn eigen kleur (--rug) vult het vak tot het beeld er
 * is, zodat lui laden geen gat in de plank geeft. */
.echt {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px 4px 4px 2px;
  background: var(--rug);
  filter: var(--rug-filter);
}

/* --- de reserve-omslag (plank en dialoog) --------------------------------
 * Voor een boek zonder (ladende) echte omslag. De tekst schaalt met de
 * breedte van de omslag (container-eenheden), zodat dezelfde omslag klein op
 * de plank en groot in de dialoog werkt. */

.omslag {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  container-type: inline-size;
  overflow: hidden;
  border-radius: 2px 4px 4px 2px;
  background: var(--rug);
  color: var(--inkt);
  text-align: left;
  filter: var(--rug-filter);
  /* De scharnierlijn van de band, links. */
  box-shadow: inset 5px 0 0 rgb(0 0 0 / 0.14);
}

.omslag__beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.omslag__tekst {
  position: absolute;
  top: 9cqi;
  left: 10cqi;
  right: 9cqi;
  display: flex;
  flex-direction: column;
  gap: 4cqi;
}

.omslag__titel {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: var(--titelmaat, 13cqi);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.omslag__auteur {
  font-weight: 600;
  font-size: 5.6cqi;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- de detailweergave ---------------------------------------------------
 * Een modal op desktop (CK-CMP-05), een sheet van onderen op een telefoon
 * (CK-CMP-02, CK-MOT-11). Volgorde: omslag, titel en auteur, het verhaal, en
 * de koopactie onderaan (CK-CMP-39). Eén gevulde knop (CK-CMP-12). */

.detail {
  width: min(60rem, 100% - 2 * var(--rand));
  max-width: none;
  max-height: min(46rem, 100dvh - 48px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--vlak);
  color: var(--inkt);
  /* Zachte schaduw met vaste verhoudingen (CK-CMP-13). */
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.18);
  overflow: hidden;
}

.detail::backdrop {
  background: var(--achtergrond-dialoog);
}

.detail[open] {
  animation: detail-in 260ms var(--zacht);
}
.detail[open]::backdrop {
  animation: vervaag-in 260ms var(--zacht);
}
.detail.detail--dicht {
  animation: detail-uit 180ms var(--zacht) forwards;
}
.detail.detail--dicht::backdrop {
  animation: vervaag-uit 180ms var(--zacht) forwards;
}

@keyframes detail-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}
@keyframes detail-uit {
  to {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}
@keyframes vervaag-in {
  from {
    opacity: 0;
  }
}
@keyframes vervaag-uit {
  to {
    opacity: 0;
  }
}

/* Links de omslag met daaronder prijs en koopknop, rechts de tekst. De
 * linkerkolom blijft staan als een lange flaptekst scrolt, zodat prijs en
 * knop altijd in beeld zijn (CK-HIE-07). In de HTML staat de tekst vóór
 * omslag en koop: toetsenbord en schermlezer gaan van titel en flaptekst naar
 * prijs en knop, de koopactie als laatste (CK-CMP-39). */
.detail__binnen {
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
  grid-template-areas: "zij tekst";
  gap: 32px 40px;
  max-height: inherit;
  padding: 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.detail__zij {
  grid-area: zij;
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail__sluit {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px 8px 12px;
  border: 0;
  border-radius: var(--radius);
  background: var(--vlak);
  color: var(--inkt);
  font: inherit;
  font-size: var(--t-klein);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--snel) var(--zacht);
}
.detail__sluit:hover {
  background: color-mix(in srgb, var(--inkt) 8%, var(--vlak));
}
.detail__sluit:active {
  background: color-mix(in srgb, var(--inkt) 14%, var(--vlak));
}

.detail__omslag .echt {
  border-radius: 4px;
}

.detail__tekst {
  grid-area: tekst;
  padding-top: 8px;
}

.detail__plank {
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inkt-2);
}

.detail__titel {
  margin-top: 8px;
  padding-right: 112px; /* vrij van de sluitknop */
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: var(--t-titel);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
  outline: none;
}

.detail__auteur {
  margin-top: 8px;
  font-size: var(--t-kast);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
}

.detail__meta {
  margin-top: 4px;
  font-size: var(--t-klein);
  color: var(--inkt-2);
}

/* De flaptekst van de winkel: alinea's blijven alinea's, een regelafbreking
 * (een gedicht, een opsomming) blijft staan. Regels niet breder dan 36rem
 * (CK-LAY-16). */
.detail__flap {
  margin-top: 24px;
  max-width: 36rem;
  line-height: 1.6;
}
.detail__flap p {
  white-space: pre-line;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.detail__flap p + p {
  margin-top: 1em;
}

/* Prijs en knop staan samen (CK-HIE-07); de prijs is het grootste en het
 * enige gekleurde getal (CK-HIE-12, CK-HIE-13). */
.detail__koop {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--lijn);
}

.detail__prijs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail__bedrag {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: var(--t-titel);
  line-height: 1.1;
  color: var(--prijs);
  font-variant-numeric: tabular-nums;
}

.detail__prijsnoot {
  font-size: var(--t-klein);
  color: var(--inkt-2);
}

/* De primaire knop: donkerder is belangrijker (CK-CMP-27), horizontale
 * padding het dubbele van de verticale (CK-CMP-03), minstens 48px hoog. De
 * koopknop is een link naar de winkel; het pijltje zegt dat hij de site
 * verlaat, de verborgen tekst zegt het een schermlezer. */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--radius);
  background: var(--knop);
  color: var(--knop-tekst);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--snel) var(--zacht),
    transform var(--snel) var(--zacht);
}
.knop:hover {
  background: var(--knop-hover);
}
.knop:active {
  transform: scale(0.98);
}

/* De tweede knop (zoekterm wissen): geen vulling, alleen een rand
 * (CK-CMP-12, CK-CMP-27). */
.knop--rustig {
  border: 1px solid var(--lijn);
  background: var(--vlak);
  color: var(--inkt);
}
.knop--rustig:hover {
  background: color-mix(in srgb, var(--inkt) 8%, var(--vlak));
}

/* --- telefoon: de sheet ---------------------------------------------------
 * Eén kolom, de omslag kleiner, en prijs plus koopknop vast onderaan binnen
 * duimbereik (CK-LAY-11, CK-HIE-17). De plank zakt iets in (--schaal), zodat
 * er meer boeken per rij passen. */
@media (max-width: 40rem) {
  :root {
    --schaal: 0.85;
  }

  .kast__rij {
    margin-inline: calc(var(--rand) * -1);
    padding-inline: var(--rand);
    border-radius: 0;
  }

  .detail {
    width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
  }
  .detail[open] {
    animation-name: sheet-in;
    animation-duration: 320ms;
  }
  .detail.detail--dicht {
    animation-name: sheet-uit;
    animation-duration: 220ms;
  }

  .detail__binnen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "omslag"
      "tekst"
      "koop";
    gap: 24px;
    padding: 64px var(--rand) 0;
  }

  /* De zijkolom valt uiteen: omslag bovenaan, koop onderaan. */
  .detail__zij {
    display: contents;
  }

  .detail__omslag {
    grid-area: omslag;
    width: 9.5rem;
  }

  .detail__titel {
    padding-right: 0;
  }

  .detail__koop {
    grid-area: koop;
    position: sticky;
    bottom: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-inline: calc(var(--rand) * -1);
    padding: 16px var(--rand) max(16px, env(safe-area-inset-bottom));
    background: var(--vlak);
  }
}

@keyframes sheet-in {
  from {
    transform: translateY(100%);
  }
}
@keyframes sheet-uit {
  to {
    transform: translateY(100%);
  }
}

/* --- voet ----------------------------------------------------------------
 * Weinig links, dus een kleine gecentreerde voet (CK-CMP-82, CK-CMP-83). */
.voet {
  margin-top: 80px;
  padding-block: 32px 48px;
  border-top: 1px solid var(--lijn);
  font-size: var(--t-klein);
  color: var(--inkt-2);
  text-align: center;
}
.voet p + p {
  margin-top: 4px;
}

.geen-js {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--kast);
}

/* Een sprong naar een kast glijdt, behalve bij minder beweging. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Minder beweging: geen animaties, geen lift, geen inschuivende sheet. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .rug,
  .voorkant {
    --lift: 0px !important;
  }
}