/*
 * De stijl van de winkel.
 *
 * Overgenomen uit de eenpaginaversie zodat het ontwerp bij de overstap naar
 * server-gerenderde pagina's niet verandert.
 *
 * LET OP: dit is een kópie. Toen ik hem voor het eerst trok en daarna de SPA-stijl
 * bleef aanpassen, liep dit bestand ongemerkt achter — en dat kwam pas boven bij
 * het meten van de winkelwagen (`.pc-verzending-som` had er nog de oude padding).
 * Bij elke wijziging aan `apps/shop/src/main.tsx` hoort dit bestand opnieuw
 * getrokken te worden, tot de eenpaginaversie verdwijnt en deze het origineel is.
 */
* { box-sizing: border-box; }
  html, body, #root { margin: 0; padding: 0; }

  /* De hoogte van de beloftebalk staat op één plek: de balk zelf gebruikt hem als
     hoogte, de kopbalk eronder als afstand tot de bovenkant. Twee losse getallen
     lopen bij de eerste wijziging uit elkaar en dan overlappen ze. */
  :root { --pc-usp-h: 40px; }
  body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    color: #1C2227;
    background: #F4F4F1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Alleen voor schermlezers: label aanwezig, visueel niet in de weg. */
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* ── maatvoering ────────────────────────────────────────────────────────── */
  .pc-breed { max-width: 1150px; margin: 0 auto; padding: 0 24px; }
  .pc-ritme { padding: clamp(40px, 6vw, 88px) 0; }
  .pc-kantlijn { padding: 0 16px; }

  /* ── typografie: koppen op 500, strak geleid ────────────────────────────── */
  h1, h2, h3 { font-weight: 500; letter-spacing: -.01em; }
  .pc-hero h1 { font-size: clamp(34px, 5.6vw, 60px); line-height: 1.04; letter-spacing: -.025em; }
  .pc-hero p  { font-size: clamp(16px, 1.5vw, 19px); }
  .pc-titel   { font-size: clamp(26px, 3vw, 43px); line-height: 1.05; }

  /* ── knoppen: 16px hoeken, gewicht 600, royale ruimte ───────────────────── */
  .pc-knop {
    display: inline-flex; align-items: center; justify-content: center;
    transition: filter .16s ease, transform .16s ease, background-color .16s ease;
  }
  .pc-knop:not(:disabled):hover { filter: brightness(.94); }
  .pc-knop:not(:disabled):active { transform: translateY(1px); }
  .pc-knop:disabled { opacity: .45; cursor: default; }
  .pc-knop-stil {
    background: transparent; border: 0; color: inherit; opacity: .6;
    cursor: pointer; font: inherit; padding: 0;
  }
  .pc-knop-stil:hover { opacity: 1; }

  /* ── kopbalk ────────────────────────────────────────────────────────────── */
  /* De balk vult het scherm, de inhoud erin niet.
     Nagemeten op zendesk.nl: hun plakkende balk loopt over de volle breedte met
     een doorschijnende achtergrond, en daarbinnen zit één container van 1150px
     met 24px kantlijn. Zonder die container stond ons logo tegen de schermrand
     terwijl de inhoud eronder op 1150 gecentreerd begon. */
  .pc-balk-binnen {
    width: 100%; max-width: min(1150px, 100%); margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 16px;
  }

  /* De winkelwagen in de kopbalk, met het aantal erin. */
  .pc-mand-knop {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    background: rgba(28,34,39,.05); border: 0; border-radius: 999px;
    padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 600;
    color: #1C2227; cursor: pointer;
  }
  .pc-mand-knop:hover { background: rgba(28,34,39,.09); }
  /* Op een breed scherm het woord, op een telefoon het karretje — daar is geen
     ruimte voor tekst naast een hamburger, en dan is het bolletje met het aantal
     het enige dat er echt toe doet. */
  .pc-mand-icoon { display: none; font-size: 16px; line-height: 1; }
  .pc-mand-bol {
    background: #16494F; color: #fff; border-radius: 999px;
    min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
  }

  .pc-balk {
    /* Onder de USP-strook, niet eroverheen: beide blijven staan bij het scrollen,
       dus de balk begint precies waar die strook ophoudt. */
    position: sticky; top: var(--pc-usp-h); z-index: 20; display: flex; align-items: center;
    padding: 12px 0;
    background: rgba(244,244,241,.92); backdrop-filter: blur(14px); color: #1C2227;
    border-bottom: 1px solid rgba(28,34,39,.08);
  }
  .pc-logo { height: 26px; width: auto; display: block; flex: none; }
  .pc-logo-knop {
    background: none; border: 0; padding: 0; cursor: pointer; display: block; flex: none;
    border-radius: 8px;
  }
  .pc-logo-knop:focus-visible { outline: 2px solid #16494F; outline-offset: 4px; }
  .pc-balk-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; min-width: 0; }
  .pc-nav-breed { display: flex; align-items: center; gap: 18px; margin-left: 28px; min-width: 0; }
  .pc-hamburger {
    display: none; margin-left: auto; background: rgba(28,34,39,.05); border: 0;
    width: 44px; height: 44px; border-radius: 16px; color: #1C2227; cursor: pointer;
    align-items: center; justify-content: center;
  }
  .pc-hamburger svg { width: 20px; height: 20px; }

  /* ── het menu achter de hamburger ───────────────────────────────────────── */
  .pc-menu {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); z-index: 51;
    background: #fff; display: flex; flex-direction: column;
    transform: translateX(-100%); transition: transform .26s cubic-bezier(.2,.7,.3,1);
    box-shadow: 12px 0 40px rgba(28,34,39,.16);
  }
  .pc-menu.open { transform: none; }
  /* Dicht is echt dicht: geen tab-stops in een lade die niemand ziet. */
  .pc-menu:not(.open), .pc-mand-zij:not(.open) { visibility: hidden; }
  .pc-menu.open, .pc-mand-zij.open { visibility: visible; }
  .pc-menu > header {
    display: flex; align-items: center; padding: 16px 20px;
    border-bottom: 1px solid rgba(28,34,39,.08);
  }
  .pc-menu > header button {
    margin-left: auto; background: none; border: 0; color: rgba(28,34,39,.65); cursor: pointer;
    display: inline-flex;
  }
  .pc-menu > header button svg { width: 20px; height: 20px; }
  .pc-menu nav { display: flex; flex-direction: column; padding: 10px 0; flex: 1; }
  .pc-menu nav button {
    background: none; border: 0; text-align: left; font: inherit; font-size: 16px;
    padding: 14px 20px; color: #1C2227; cursor: pointer;
  }
  .pc-menu nav button:hover { background: rgba(28,34,39,.05); }
  .pc-menu nav button[aria-current="page"] {
    color: #16494F; font-weight: 600; box-shadow: inset 3px 0 0 #16494F;
  }
  .pc-menu-voet {
    padding: 18px 20px; border-top: 1px solid rgba(28,34,39,.08);
    display: grid; gap: 12px;
  }
  .pc-menu-voet .pc-orgkeuze { flex-direction: column; align-items: stretch; gap: 6px; }
  .pc-menu-voet .pc-orgkeuze select { width: 100%; max-width: none; }
  .pc-nav-breed button {
    background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px;
    color: rgba(28,34,39,.65); cursor: pointer; border-bottom: 2px solid transparent;
  }
  .pc-nav-breed button:hover { color: #1C2227; }
  .pc-nav-breed button[aria-current="page"] { color: #16494F; font-weight: 600; border-color: #16494F; }

  /* Eén controle, geen doos om een doos. Het label staat ernaast, niet eromheen. */
  .pc-orgkeuze { display: inline-flex; align-items: center; gap: 8px; }
  .pc-orgkeuze > span { color: rgba(28,34,39,.65); font-size: 13px; white-space: nowrap; }
  .pc-orgkeuze select {
    min-width: 0; text-overflow: ellipsis;
    appearance: none; background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231C2227'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 10px center/14px;
    border: 1px solid rgba(28,34,39,.16); border-radius: 16px;
    padding: 8px 30px 8px 14px; font: inherit; font-size: 14px; font-weight: 600;
    color: #1C2227; cursor: pointer; max-width: 260px;
  }
  .pc-orgkeuze select:hover { border-color: rgba(28,34,39,.3); }

  /* ── beloftebalk: bovenaan, één regel ───────────────────────────────────── */
  /* De balk staat bovenaan en blijft daar: hij is één regel hoog, dus dat kost
     niets aan leesruimte, en de belofte over verzending vóór 12 uur is precies
     het soort ding dat je wilt zien op het moment dat je zit te twijfelen. */
  .pc-usps-band {
    background: #063940; color: rgba(255,255,255,.88);
    position: sticky; top: 0; z-index: 40;
  }
  /* Op een breed scherm staan ze gewoon alle drie naast elkaar — er is ruimte
     zat, en drie beloftes die je in één oogopslag ziet werken beter dan één die
     je moet afwachten. Doorwisselen is alleen een oplossing voor een telefoon,
     waar ze niet naast elkaar passen. */
  .pc-usps {
    margin: 0 auto; padding: 0 24px; max-width: 1150px;
    min-height: var(--pc-usp-h);
    display: flex; align-items: center; gap: 40px;
  }
  .pc-usp {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; white-space: nowrap;
  }

  @media (max-width: 900px) {
    /* Hier passen ze niet naast elkaar: één tegelijk, op dezelfde plek, en de
       balk verspringt niet doordat ze op elkaar liggen. */
    .pc-usps { position: relative; display: block; height: var(--pc-usp-h); }
    .pc-usp {
      position: absolute; inset: 0; padding: 0 24px;
      display: flex; justify-content: center;
      opacity: 0; transform: translateY(4px);
      transition: opacity .5s ease, transform .5s ease;
      pointer-events: none;
    }
    .pc-usp.aan { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .pc-usp { transition: none; }
    }
  }

  .pc-usp-icoon { display: inline-flex; color: rgba(255,255,255,.6); }
  .pc-usp-icoon svg { width: 15px; height: 15px; }

  /* ── het blad: inhoud bovenaan, voet onderaan ───────────────────────────── */
  /* Elk scherm is minstens een schermhoogte hoog, anders zweeft een korte pagina
     halverwege. Maar zonder deze kolom stond de voet dan vlak achter de inhoud,
     met de rest van die schermhoogte als leeg vlak eronder. Met margin-top:auto
     wordt hij naar beneden geduwd: de leegte komt boven de voet in plaats van eronder. */
  .pc-blad {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
  }
  .pc-blad > footer { margin-top: auto; }
  /* Een kolom-flexbox rekt zijn kinderen niet alleen op tot de breedte van het
     scherm, hij laat ze ook niet kleiner worden dan hun min-content. De strook met
     categorietabs is breder dan een telefoon, dus dat duwde de hele pagina uit
     elkaar en je kon horizontaal scrollen. Met min-width:0 mag een kind wél
     smaller dan zijn inhoud, en schuift die strook binnen zijn eigen kader. */
  /* Alleen min-width: 0. max-width:100% stond hier ook, en dat had een
     bijwerking die ik niet zag: deze selector is specifieker dan .pc-breed, dus
     hij overschreef de maximumbreedte van 1150px en liet de inhoud op een breed
     scherm van rand tot rand lopen. De overloop op een telefoon wordt door
     min-width:0 opgelost; max-width deed daar niets extra's. */
  /* Twee dingen tegelijk, en ze zaten elkaar in de weg.

     Zonder max-width duwt de tabstrook — breder dan een telefoon — de hele pagina
     uit elkaar, want in een kolom-flexbox wordt een kind niet vanzelf smaller dan
     zijn inhoud. Mét max-width verdween de overloop, maar deze selector is even
     specifiek als .pc-breed en staat erna, dus hij overschreef ook de
     maximumbreedte van 1150px en liet de pagina op een breed scherm van rand tot
     rand lopen.

     Allebei dus: de begrenzing blijft, en .pc-breed krijgt zijn maximum terug via
     een selector die specifieker is. */
  /* width:100% erbij, en dat is niet overbodig: een flex-item met een auto-marge
     — wat .pc-breed heeft, om te centreren — rekt niet mee met zijn container. Zonder deze regel werd elke sectie zo breed als zijn inhoud
     (1004px in plaats van 1150px) zodra dit blad een kolom-flexbox werd. */
  .pc-blad > * { min-width: 0; max-width: 100%; width: 100%; }
  /* Twee grenzen tegelijk, en dat is de hele truc: nooit breder dan het scherm
     (anders duwt de tabstrook de pagina uit elkaar) én nooit breder dan 1150
     (anders loopt de inhoud op een groot scherm van rand tot rand). Ik heb ze
     eerst om beurten geprobeerd; elke losse regel repareerde het ene en brak het
     andere. */
  .pc-blad > .pc-breed { max-width: min(1150px, 100%); }

  /* ── de voet ────────────────────────────────────────────────────────────── */
  .pc-voet {
    border-radius: 32px; background: #063940; color: #fff;
    padding: clamp(32px, 4vw, 48px) clamp(24px, 4vw, 48px);
    display: grid; gap: clamp(28px, 4vw, 56px);
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .pc-voet-logo { height: 30px; width: auto; display: block; margin-bottom: 16px; }
  .pc-voet-blok { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .pc-voet-blok p { margin: 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.6; max-width: 42ch; }
  .pc-voet-blok h3 {
    margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: rgba(255,255,255,.55);
  }
  .pc-voet-blok a, .pc-voet-blok button {
    font: inherit; font-size: 14px; color: #fff; text-decoration: none;
    background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
    border-bottom: 1px solid transparent; transition: border-color .16s ease;
  }
  .pc-voet-blok a:hover, .pc-voet-blok button:hover { border-color: rgba(255,255,255,.5); }
  .pc-voet-stil { color: rgba(255,255,255,.5); font-size: 13px; }
  /* De onderste regel loopt over de volle breedte, met een streep erboven. */
  .pc-voet-onder {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
    padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.6); font-size: 13px;
  }
  @media (max-width: 720px) {
    /* Drie kolommen naast elkaar op een telefoon is drie kolommen van niks. */
    .pc-voet { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  }

  /* Koppelingen tussen producten: klikbare pillen, geen lijst met bulletjes.
     Ze staan naast elkaar en breken netjes af, want een toestel kan zomaar acht
     accessoires hebben. */
  .pc-past { display: flex; flex-wrap: wrap; gap: 8px; }
  .pc-past button {
    font: inherit; font-size: 14px; cursor: pointer;
    background: rgba(28,34,39,.05); border: 1px solid transparent; border-radius: 999px;
    padding: 8px 16px; color: #1C2227; text-align: left;
    transition: background-color .16s ease, border-color .16s ease;
  }
  .pc-past button:hover { background: #fff; border-color: rgba(28,34,39,.16); }

  /* ── categorie-icoon ────────────────────────────────────────────────────── */
  /* Garden's Tiles brengen hun eigen vorm mee; hier alleen het icoon zelf. */
  .pc-icoon svg { width: 20px; height: 20px; }

  /* ── productkaart: licht, met de foto op een eigen vlak ────────────────── */
  .pc-card {
    position: relative; border-radius: 40px; overflow: hidden; border: 0;
    background: #fff; display: flex; flex-direction: column;
    transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
  }
  .pc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(28,34,39,.12); }
  /* Een foto vult altijd zijn vlak. Halve foto's met witte randen ernaast
     maken van een raster een rommeltje; bijsnijden houdt de rij strak. */
  .pc-card .pc-plaat {
    height: 220px; border-radius: 32px; margin: 12px 12px 0; overflow: hidden;
    background: #F4F4F1; display: flex; align-items: center; justify-content: center;
  }
  .pc-card .pc-plaat img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
  .pc-card:hover .pc-plaat img { transform: scale(1.05); }
  .pc-card-tekst { padding: 18px 24px 22px; display: flex; flex-direction: column; gap: 5px; flex: 1; }

  /* ── aantalteller ───────────────────────────────────────────────────────── */
  .pc-teller {
    display: inline-flex; align-items: center; border-radius: 16px;
    background: rgba(28,34,39,.05); overflow: hidden;
  }
  .pc-teller input {
    width: 36px; height: 36px; border: 0; text-align: center; font: inherit;
    background: transparent; color: #1C2227;
  }
  .pc-teller input::placeholder { color: rgba(28,34,39,.35); }
  .pc-step {
    width: 34px; height: 36px; border: 0; background: transparent; color: #1C2227;
    cursor: pointer; font-size: 17px; line-height: 1;
  }
  .pc-step:disabled { opacity: .3; cursor: default; }
  .pc-step:not(:disabled):hover { background: rgba(28,34,39,.08); }

  /* ── zoeken naast de tabbladen ──────────────────────────────────────────── */
  .pc-zoekrij { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
  .pc-zoek { position: relative; flex: none; width: 260px; }
  .pc-zoek input {
    width: 100%; height: 44px; border: 1px solid rgba(28,34,39,.16); border-radius: 16px;
    padding: 0 38px 0 14px; font: inherit; font-size: 14px; background: #fff; color: #1C2227;
  }
  .pc-zoek input::-webkit-search-cancel-button { display: none; }
  .pc-zoek input:focus-visible { outline: 2px solid #16494F; outline-offset: 1px; }
  .pc-zoek button {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border: 0; border-radius: 16px; background: rgba(28,34,39,.06);
    color: rgba(28,34,39,.68); font-size: 18px; line-height: 1; cursor: pointer;
  }
  @media (max-width: 720px) {
    /* Zoeken is op een telefoon belangrijker dan de tabbladen; die schuiven eronder. */
    .pc-zoekrij { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
    .pc-zoek { width: 100%; }
  }

  /* ── overlays: mand en productpagina ────────────────────────────────────── */
  /* De laag-indeling, van onder naar boven: inhoud, de kopbalk (20), de
     USP-strook (40), en daarboven het waas met de lades erop. Dat het waas eerst
     op 30 stond en de strook op 40 was precies verkeerd om: de strook bleef dan
     over een geopende winkelwagen heen staan. */
  .pc-sluier { position: fixed; inset: 0; background: rgba(8,19,31,.45); z-index: 50; }

  .pc-mand-zij {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100vw); z-index: 51;
    background: #fff; display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.7,.3,1);
    box-shadow: -12px 0 40px rgba(28,34,39,.16);
  }
  .pc-mand-zij.open { transform: none; }
  .pc-mand-zij header {
    display: flex; align-items: center; padding: 18px 22px; border-bottom: 1px solid rgba(28,34,39,.08);
  }
  .pc-mand-zij header b { font-size: 17px; font-weight: 600; }
  .pc-mand-zij header button {
    margin-left: auto; background: none; border: 0; font-size: 26px; line-height: 1;
    color: rgba(28,34,39,.62); cursor: pointer;
  }
  .pc-mand-doel {
    padding: 14px 22px; background: rgba(28,34,39,.05); display: grid; gap: 6px;
  }
  .pc-mand-doel label { font-size: 13px; color: rgba(28,34,39,.68); }
  .pc-mand-doel select, .pc-verzending select {
    appearance: none; background: #fff; border: 1px solid rgba(28,34,39,.16); border-radius: 12px;
    padding: 8px 12px; font: inherit; font-size: 14px; color: #1C2227; cursor: pointer; max-width: 100%;
  }
  .pc-mand-inhoud { flex: 1; overflow-y: auto; padding: 8px 22px 22px; }
  /* Elke verzending is één blok: wat hier bij elkaar staat, gaat straks in één
     doos naar één vestiging. Dat moet je kunnen zien zonder te lezen. */
  .pc-verzending {
    background: rgba(28,34,39,.04); border-radius: 20px; padding: 16px; margin-bottom: 14px;
  }
  .pc-verzending.open-eind {
    background: #fdf6e3; box-shadow: inset 0 0 0 1px rgba(180,140,20,.25);
  }
  .pc-verzending > header {
    display: flex; align-items: flex-start; gap: 10px; padding: 0 0 12px; border: 0;
  }
  .pc-verzending-icoon {
    flex: none; width: 30px; height: 30px; border-radius: 15px; background: #fff;
    color: #16494F; display: grid; place-items: center;
  }
  .pc-verzending-icoon svg { width: 16px; height: 16px; }
  .pc-verzending-nr {
    display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: rgba(28,34,39,.62);
  }
  .pc-verzending > header b { display: block; font-size: 15px; font-weight: 600; }
  .pc-verzending-adres { display: block; font-size: 13px; color: rgba(28,34,39,.68); }
  .pc-verzending-waarschuwing {
    margin: 0 0 12px; font-size: 13px; color: #7a5c05;
  }
  .pc-verzending ul {
    list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 14px;
    border-top: 1px solid rgba(28,34,39,.08);
  }
  /* Verzendadres en referentie per verzending: twee regels onder de artikelen,
     visueel rustiger dan het blok erboven zodat het niet met de bestemming
     concurreert. */
  .pc-verzending-extra {
    display: grid; gap: 8px; padding: 10px 0 0; border-top: 1px solid rgba(28,34,39,.06);
  }
  .pc-verzending-extra label { display: grid; gap: 4px; }
  .pc-verzending-extra label > span { font-size: 12.5px; color: rgba(28,34,39,.62); }
  .pc-verzending-extra select,
  .pc-verzending-extra input {
    width: 100%; font: inherit; font-size: 14px; color: #1C2227;
    border: 1px solid rgba(28,34,39,.16); border-radius: 12px; padding: 8px 12px; background: #fff;
  }

  .pc-verzending-som {
    display: flex; align-items: baseline; margin-top: 12px; padding-top: 10px;
    border-top: 1px solid rgba(28,34,39,.08); font-size: 14px; color: rgba(28,34,39,.68);
  }
  .pc-verzending-som b { margin-left: auto; color: #1C2227; font-weight: 600; }
  .pc-verzending select { background: #fff; }

  /* min-width:0 is hier geen detail: zonder die regel weigert de productnaam te
     krimpen en duwt hij de prijs buiten beeld. */
  .pc-regel-kop { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
  .pc-regel-naam { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pc-regel-prijs { flex: none; margin-left: auto; font-weight: 600; white-space: nowrap; }
  .pc-regel-bediening { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-width: 0; }
  .pc-regel-bediening select {
    flex: 1 1 0; min-width: 0; width: 0; font-size: 13px; padding: 6px 10px;
    text-overflow: ellipsis;
  }
  .pc-tellerwaarde { min-width: 28px; text-align: center; font-size: 14px; }
  .pc-mand-zij footer { padding: 18px 22px; border-top: 1px solid rgba(28,34,39,.08); }
  .pc-mand-totaal { display: flex; align-items: baseline; margin-bottom: 12px; font-size: 16px; }
  .pc-mand-totaal b { margin-left: auto; font-weight: 600; }

  .pc-terug {
    background: none; border: 0; padding: 0 0 14px; font: inherit; font-size: 14px;
    color: rgba(28,34,39,.68); cursor: pointer;
  }
  .pc-terug:hover { color: #1C2227; }
  .pc-detail { background: #fff; border-radius: 32px; padding: clamp(24px, 3vw, 44px); }
  .pc-detail-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); }
  .pc-detail-plaat {
    height: clamp(240px, 34vh, 380px); border-radius: 24px; background: #F4F4F1;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    color: rgba(28,34,39,.4); font-size: 13px;
  }
  .pc-detail-plaat img { width: 100%; height: 100%; object-fit: cover; }
  .pc-detail-plaat iframe, .pc-detail-plaat video { width: 100%; height: 100%; border: 0; }

  /* ── videospeler: alles weg tot je erover gaat ──────────────────────────── */
  .pc-speler { position: relative; width: 100%; height: 100%; background: #08131f; }
  .pc-speler video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
  .pc-speler-knop {
    position: absolute; inset: 0; display: grid; place-items: center;
    opacity: 0; transition: opacity .22s ease; pointer-events: none;
  }
  .pc-speler:hover .pc-speler-knop, .pc-speler:focus-within .pc-speler-knop { opacity: 1; }
  /* Zonder muis is er geen hover: dan staat de knop er gewoon. Een filmpje dat
     vanzelf speelt en niet te pauzeren is, is een toegankelijkheidsfout. */
  @media (hover: none) {
    .pc-speler-knop { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pc-speler-knop { opacity: 1; }
  }
  .pc-speler-knop button {
    width: 68px; height: 68px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
    background: rgba(8,19,31,.42); backdrop-filter: blur(6px); pointer-events: auto;
    transition: background-color .2s ease, transform .2s ease;
  }
  .pc-speler-knop button:hover { background: rgba(8,19,31,.6); transform: scale(1.05); }
  .pc-speler-knop svg { width: 68px; height: 68px; display: block; }
  .pc-ring-baan { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 2; }
  .pc-ring-voort {
    fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round;
    transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .2s linear;
  }
  .pc-ring-teken { fill: #fff; }

  .pc-strip-video {
    display: grid; place-items: center; width: 100%; height: 100%;
    background: #08131f; color: #fff;
  }
  .pc-strip-video svg { width: 22px; height: 22px; }

  .pc-detail-strip { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
  .pc-detail-strip button {
    width: 62px; height: 62px; border-radius: 16px; overflow: hidden; padding: 0;
    border: 2px solid transparent; background: #F4F4F1; cursor: pointer;
  }
  .pc-detail-strip button.aan { border-color: #16494F; }
  .pc-detail-strip img { width: 100%; height: 100%; object-fit: cover; }
  .pc-detail-tekst p { margin: 0 0 10px; color: rgba(28,34,39,.78); }
  .pc-specs { width: 100%; border-collapse: collapse; font-size: 14px; }
  .pc-specs th {
    text-align: left; font-weight: 500; color: rgba(28,34,39,.68); padding: 8px 16px 8px 0;
    border-top: 1px solid rgba(28,34,39,.08); width: 40%; vertical-align: top;
  }
  .pc-specs td { padding: 8px 0; border-top: 1px solid rgba(28,34,39,.08); }
  .pc-docs { width: 100%; border-collapse: collapse; font-size: 14px; }
  .pc-docs td { padding: 10px 0; border-top: 1px solid rgba(28,34,39,.08); vertical-align: middle; }
  .pc-doc-cel { display: flex; align-items: center; gap: 10px; }
  .pc-doc-icoon { display: inline-flex; color: rgba(28,34,39,.62); flex: none; }
  .pc-doc-icoon svg { width: 17px; height: 17px; }
  .pc-docs a { color: #16494F; font-weight: 600; text-decoration: none; }
  .pc-docs a:hover { text-decoration: underline; }
  .pc-doc-soort {
    text-align: right; white-space: nowrap; font-size: 12px; color: rgba(28,34,39,.62);
    text-transform: uppercase; letter-spacing: .04em;
  }

  /* Groepskop binnen de specificatietabel. */
  .pc-spec-groep th {
    padding: 18px 0 6px; font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: rgba(28,34,39,.62); border-top: 0;
  }
  .pc-spec-groep + tr th, .pc-spec-groep + tr td { border-top: 0; }

  /* Opgemaakte omschrijving: de HTML komt uit de catalogus, de vorm van hier. */
  .pc-detail-tekst { color: rgba(28,34,39,.82); line-height: 1.6; }
  .pc-detail-tekst > :first-child { margin-top: 0; }
  .pc-detail-tekst > :last-child { margin-bottom: 0; }
  .pc-detail-tekst p { margin: 0 0 12px; }
  .pc-detail-tekst h2, .pc-detail-tekst h3, .pc-detail-tekst h4 {
    margin: 22px 0 8px; font-weight: 600; color: #1C2227;
  }
  .pc-detail-tekst h2 { font-size: 19px; }
  .pc-detail-tekst h3 { font-size: 16px; }
  .pc-detail-tekst h4 { font-size: 15px; }
  .pc-detail-tekst ul, .pc-detail-tekst ol { margin: 0 0 12px; padding-left: 22px; }
  .pc-detail-tekst li { margin-bottom: 5px; }
  .pc-detail-tekst a { color: #16494F; font-weight: 600; }
  .pc-detail-tekst img { max-width: 100%; height: auto; border-radius: 16px; margin: 8px 0; }
  .pc-detail-tekst table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 14px; }
  .pc-detail-tekst th, .pc-detail-tekst td {
    text-align: left; padding: 8px 12px 8px 0; border-top: 1px solid rgba(28,34,39,.08);
  }
  .pc-detail-tekst blockquote {
    margin: 12px 0; padding: 10px 16px; border-left: 3px solid rgba(22,73,79,.35);
    color: rgba(28,34,39,.7);
  }
  .pc-detail-tekst pre {
    background: rgba(28,34,39,.05); border-radius: 12px; padding: 12px 14px; overflow-x: auto;
    font-size: 13px;
  }
  .pc-detail-tekst hr { border: 0; border-top: 1px solid rgba(28,34,39,.1); margin: 18px 0; }

  /* Klikbare productfoto en -naam. */
  .pc-plaatknop { border: 0; cursor: pointer; padding: 0; color: inherit; text-decoration: none; }
  .pc-naamknop {
    background: none; border: 0; padding: 0; font: inherit; font-weight: 600; font-size: 17px;
    letter-spacing: -.01em; color: inherit; cursor: pointer; text-align: left; min-width: 0;
  }
  .pc-naamknop { text-decoration: none; }
  .pc-naamknop:hover { text-decoration: underline; }

  /* ── stappenbalk van een bestelling ─────────────────────────────────────── */
  .pc-stappen {
    list-style: none; margin: 0; padding: 0; display: flex; gap: 0; counter-reset: stap;
  }
  .pc-stappen li {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
    position: relative; text-align: center; color: rgba(28,34,39,.5); font-size: 13.5px;
  }
  /* De streep tussen twee bollen loopt van bol tot bol, niet onder de tekst door. */
  .pc-stappen li::before {
    content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px;
    background: rgba(28,34,39,.12);
  }
  .pc-stappen li:first-child::before { display: none; }
  .pc-stappen li.af::before, .pc-stappen li.nu::before { background: #16494F; }
  .pc-stap-bol {
    position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 16px;
    display: grid; place-items: center; font-size: 13px; font-weight: 600;
    background: #fff; box-shadow: inset 0 0 0 2px rgba(28,34,39,.12); color: rgba(28,34,39,.5);
  }
  .pc-stappen li.af .pc-stap-bol { background: #16494F; box-shadow: none; color: #fff; }
  .pc-stappen li.nu .pc-stap-bol { background: #fff; box-shadow: inset 0 0 0 2px #16494F; color: #16494F; }
  .pc-stappen li.af, .pc-stappen li.nu { color: #1C2227; }
  .pc-stappen li.nu { font-weight: 600; }
  .pc-stappen.geannuleerd {
    display: block; background: #fdf1f0; color: #8c232c; border-radius: 16px;
    padding: 14px 18px; font-size: 14px;
  }

  /* ── regels van een bestelling ──────────────────────────────────────────── */
  .pc-orderregels { width: 100%; border-collapse: collapse; font-size: 14.5px; }
  .pc-orderregels td { padding: 11px 0; border-top: 1px solid rgba(28,34,39,.08); vertical-align: top; }
  .pc-orderregels tr:first-child td { border-top: 0; }
  .pc-orderregels .pc-aantal { width: 48px; color: rgba(28,34,39,.62); }
  .pc-orderregels .pc-bedrag { text-align: right; white-space: nowrap; font-weight: 600; }
  .pc-orderregels .pc-sku { display: block; font-size: 12.5px; color: rgba(28,34,39,.55); }
  .pc-orderregels tfoot td { border-top: 2px solid rgba(28,34,39,.12); font-weight: 600; }

  .pc-orderrij { cursor: pointer; }
  .pc-orderrij:hover { background: rgba(28,34,39,.03); }
  .pc-orderknop {
    background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
    color: #16494F; cursor: pointer;
  }
  .pc-orderknop:hover { text-decoration: underline; }

  @media (max-width: 560px) {
    /* Vier stappen naast elkaar wordt op een telefoon vier afgebroken woorden. */
    .pc-stappen { flex-direction: column; align-items: stretch; gap: 14px; }
    .pc-stappen li { flex-direction: row; align-items: center; text-align: left; gap: 12px; }
    .pc-stappen li::before {
      top: -14px; left: 15px; width: 2px; height: 14px;
    }
  }

  /* ── adreslijst: één blok per adres, ook op een telefoon leesbaar ───────── */
  .pc-adreslijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .pc-adres {
    display: flex; align-items: center; gap: 12px;
    background: rgba(28,34,39,.04); border-radius: 16px; padding: 14px 16px;
  }
  .pc-adres > div { min-width: 0; flex: 1; }
  .pc-adres b { font-weight: 600; }
  .pc-adres-regel { display: block; font-size: 13.5px; color: rgba(28,34,39,.68); margin-top: 2px; }
  .pc-adres .pc-knop { flex: none; }
  @media (max-width: 560px) {
    /* Naast elkaar wringt het adres zich in vijf regels; onder elkaar leest het. */
    .pc-adres { flex-direction: column; align-items: stretch; gap: 10px; }
    .pc-adres .pc-knop { width: 100%; }
  }

  /* ── adresimport ────────────────────────────────────────────────────────── */
  .pc-sjabloon {
    background: rgba(28,34,39,.05); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px;
  }
  .pc-sjabloon pre {
    margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; overflow-x: auto;
    color: rgba(28,34,39,.75); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .pc-download {
    display: inline-flex; align-items: center; border-radius: 16px; padding: 11px 20px;
    background: rgba(28,34,39,.05); color: #1C2227; font-weight: 600; font-size: 15px; text-decoration: none;
  }
  .pc-download:hover { background: rgba(28,34,39,.09); }
  .pc-plakvak {
    width: 100%; border: 1px solid rgba(28,34,39,.16); border-radius: 16px; padding: 12px 14px;
    font: inherit; font-size: 14px; resize: vertical;
  }

  /* ── rasters ────────────────────────────────────────────────────────────── */
  .pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 20px; }
  .pc-pakketten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
  .pc-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
  .pc-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
  .pc-signin { display: grid; grid-template-columns: 1.1fr 1fr; min-height: calc(100vh - 32px); }

  @media (max-width: 960px) {
    .pc-checkout { grid-template-columns: minmax(0, 1fr); }
    .pc-tegels { grid-template-columns: repeat(2, 1fr); }
  }
  /* Breed spul dat niet past, schuift binnen zijn eigen kader — nooit de pagina.
     Zonder dit knipt de kaart de tabbladen en tabelkolommen weg, en dan zijn ze
     niet "netjes afgekapt" maar onbereikbaar. */
  .pc-schuif { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pc-schuif > * { min-width: max-content; }
  /* Een dunne schuifbalk laten staan: onzichtbaar schuifbaar is voor de gebruiker
     hetzelfde als afgekapt. Focusbaar maken zodat het ook met het toetsenbord kan. */
  .pc-schuif { scrollbar-width: thin; }
  .pc-schuif:focus-visible { outline: 2px solid #16494F; outline-offset: 2px; }

  /* ── mobiel: de kopbalk past niet op één regel ──────────────────────────── */
  @media (max-width: 860px) {
    /* Het e-mailadres is de eerste die mag wijken: wélke organisatie je bestelt
       bepaalt de prijzen en de factuur, wie je bent weet je zelf wel. */
    .pc-balk .pc-email { display: none; }
  }

  /* ── mobiel, met de maatvoering van zendesk.nl bij 390px ────────────────── */
  @media (max-width: 800px) {
    /* Eén kantlijn op een telefoon.
       Er stonden er drie onder elkaar: de kopbalk op 18px, de kaarten op 16px en
       de secties op 24px. Dat leest als scheefstand, ook als je niet kunt zeggen
       waaróm. Alles gaat naar 16px, gelijk aan de hero en de voet, zodat het logo
       precies boven de linkerrand van de kaarten staat.
       Verticaal ruimer dan het was: met een hamburger van 44px erin was 10px
       boven en onder te krap. */
    .pc-balk { padding: 14px 16px; gap: 12px; }
    .pc-breed { padding: 0 16px; }
    .pc-usps { padding: 0 16px; }
    .pc-usp { padding: 0 16px; }
    .pc-nav-breed { display: none; }
    .pc-balk-rechts { display: none; }
    /* De winkelwagen blijft, met alleen het karretje. De hamburger schuift ernaast. */
    .pc-mand-knop { margin-left: auto; padding: 8px 12px; }
    .pc-mand-woord { display: none; }
    .pc-mand-icoon { display: inline; }
    .pc-hamburger { margin-left: 8px; }
    .pc-hamburger { display: inline-flex; }
    .pc-logo { height: 24px; }

    /* Een lade van 320px naast een strook achtergrond is op een telefoon geen
       zijpaneel maar een halve pagina. Beide laden vullen het scherm. */
    .pc-menu, .pc-mand-zij { width: 100%; }
    /* Vingers zijn geen muisaanwijzers: alles wat je aantikt wordt 44px. */
    .pc-step { width: 44px; height: 44px; }
    .pc-teller input { width: 44px; height: 44px; }
    .pc-menu > header button, .pc-mand-zij header button { width: 44px; height: 44px; }
    .pc-regel-bediening select, .pc-mand-doel select { min-height: 44px; }
    .pc-menu nav button { padding: 16px 20px; font-size: 17px; }

    /* De inhoud komt dichter naar de rand: 16px in plaats van 24px. */
    .pc-breed { padding: 0 16px; }
    /* En het ritme halveert: 48px per sectie in plaats van 88px. */
    .pc-ritme { padding: 48px 0; }
    /* Maar de elementen zélf krimpen niet mee. Het hero-blok verliest alleen zijn
       kantlijn — volle breedte, ronding blijft 32px. */
    .pc-kantlijn { padding: 0; }
  }

  /* Het inlogscherm vult het venster en zet de kaart in het midden. Bovenaan
     geplakt met een half scherm leegte eronder leest als een pagina die niet af
     is geladen. */
  .pc-signin-doek {
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
  }
  .pc-signin-doek > .pc-signin { width: 100%; max-width: 1150px; }

  @media (max-width: 720px) {
    .pc-detail-raster { grid-template-columns: minmax(0, 1fr); }
    .pc-signin { grid-template-columns: 1fr; min-height: auto; }
    .pc-signin .pc-signin-foto { height: 240px; }
    .pc-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
    /* Twee vaste balken op een telefoon is al gauw een derde van het scherm; de
       beloftebalk mag daar een slag krapper. */
    :root { --pc-usp-h: 34px; }
    .pc-usp { font-size: 12.5px; }
  }

/* ── aanpassingen voor de server-gerenderde versie ────────────────────────── */

/* De beloftebalk stond hier ooit op een CSS-animatie, omdat de servergerenderde
   versie geen JavaScript had. Die animatie draaide op élke schermbreedte, dus ook
   op een breed scherm waar de drie zinnen gewoon naast elkaar passen — dan zag je
   ze om de beurt oplichten in plaats van alle drie. Weggehaald: de gewone regels
   hierboven doen het goed (naast elkaar boven 900px, gestapeld eronder) en het
   doorwisselen op smalle schermen gebeurt nu in een klein script bij de pagina. */

/* Menu-items zijn links geworden in plaats van knoppen. */
.pc-nav-breed a {
  padding: 4px 0; font-size: 14px; text-decoration: none;
  color: rgba(28,34,39,.65); border-bottom: 2px solid transparent;
}
.pc-nav-breed a:hover { color: #1C2227; }
.pc-nav-breed a[aria-current="page"] { color: #16494F; font-weight: 600; border-color: #16494F; }

/* De winkelwagen in de kopbalk, met het aantal erin. */
.pc-mand-knop {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: #1C2227; font-weight: 600; font-size: 14px;
  background: rgba(28,34,39,.05); border-radius: 999px; padding: 8px 16px;
}
.pc-mand-knop:hover { background: rgba(28,34,39,.09); }
.pc-mand-bol {
  background: #16494F; color: #fff; border-radius: 999px;
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.pc-org-vast { color: rgba(28,34,39,.65); font-size: 13px; }

/* Het hamburgermenu is een <details>: open- en dichtklappen zonder script. */
.pc-menu-klein { display: none; margin-left: auto; position: relative; }
.pc-menu-klein > summary {
  list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 16px;
  background: rgba(28,34,39,.05); display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
}
.pc-menu-klein > summary::-webkit-details-marker { display: none; }
.pc-menu-klein > nav {
  position: absolute; right: 0; top: 52px; z-index: 30; min-width: 240px;
  background: #fff; border-radius: 24px; padding: 10px;
  box-shadow: 0 18px 44px rgba(28,34,39,.18); display: grid; gap: 2px;
}
.pc-menu-klein > nav a {
  padding: 12px 14px; border-radius: 14px; text-decoration: none; color: #1C2227; font-size: 15px;
}
.pc-menu-klein > nav a:hover { background: rgba(28,34,39,.05); }

@media (max-width: 900px) {
  .pc-nav-breed, .pc-balk-rechts { display: none; }
  .pc-menu-klein { display: block; }
}

/* De teller is aan de serverkant drie formulieren in plaats van drie knoppen.
   `display: contents` laat die formulieren uit de opmaak verdwijnen, zodat de
   knoppen gewoon kinderen van de teller blijven — anders staan ze onder elkaar
   in plaats van naast elkaar. */
.pc-teller > form { display: contents; }
/* Het invulveld staat in zijn eigen formulier zodat Enter het aantal opslaat.
   Zonder deze regel viel het weg: het formulier zelf werd wél doorzichtig
   gemaakt, maar het veld erin kreeg geen afmetingen mee. */
.pc-teller > form > input[name="qty"] { width: 36px; height: 36px; border: 0; text-align: center;
  font: inherit; background: transparent; color: #1C2227; }

/* De categorietabs waren Garden-componenten; hier zijn het links. De maten zijn
   afgelezen van de echte Garden-tabs zodat de strook er niet anders uitziet:
   lijst 40px hoog met een lijn eronder, tabs 10px/28px/6px, de gekozen tab in
   Garden-blauw met een streep van 3px. */
.pc-tablijst {
  display: block; white-space: nowrap; margin: 0 0 20px;
  border-bottom: 1px solid rgb(216, 220, 222);
  /* Ook op de omhullende strook, niet alleen op de tabs zelf: zo erft alles wat
     er ooit bij komt dezelfde maat en kleur, net als bij Garden. */
  font-size: 14px; color: rgb(41, 50, 57);
}
.pc-tab {
  display: inline-block; padding: 10px 28px 6px; font-size: 14px; font-weight: 400;
  color: rgb(41, 50, 57); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.pc-tab:hover { color: rgb(31, 115, 183); }
.pc-tab[aria-current="page"] { color: rgb(31, 115, 183); border-bottom-color: rgb(31, 115, 183); }

/* De knoppen waren React-componenten met inline-stijlen; hier zijn het links en
   verzendknoppen. De waarden zijn overgenomen uit die component, zodat ze er
   hetzelfde uitzien: 16px ronding, gewicht 600, en alleen de letterfamilie
   geërfd — `font` als shorthand zette gewicht en grootte terug op de standaard. */
.pc-knop-hero, .pc-knop-vol, .pc-knop-licht, .pc-knop-rand {
  display: inline-block; border-radius: 16px; border: 0; font-weight: 600;
  font-family: inherit; cursor: pointer; text-decoration: none;
}
/* groot: zoals de heroknop in het origineel */
.pc-knop-hero { font-size: 17px; padding: 14px 26px; background: #fff; color: #1C2227; }
/* normaal */
.pc-knop-vol   { font-size: 15px; padding: 11px 20px; background: #16494F; color: #fff; }
.pc-knop-licht { font-size: 15px; padding: 11px 20px; background: #fff; color: #1C2227; }
.pc-knop-rand  { font-size: 15px; padding: 11px 20px; background: rgba(28,34,39,.05); color: #1C2227; }

/* De twee velden onder een verzending staan elk in hun eigen formulier, want ze
   worden los opgeslagen. `display: contents` haalt die formulieren uit de opmaak,
   zodat het blok er hetzelfde uitziet als in de eenpaginaversie. */
.pc-verzending-extra > form { display: contents; }
.pc-verzending-extra .pc-knop-stil { justify-self: start; font-size: 13px; }

/* ── de schermen die in de eenpaginaversie inline-stijlen dragen ─────────────

   Mijn bestellingen, het adresboek en de formulieren daaromheen zijn in
   `ShopPage.tsx` opgebouwd met een gedeeld `paneel`-object en losse
   `style={{…}}`-attributen. Een servergerenderde pagina heeft dat object niet,
   dus staan diezelfde waarden hier als klassen. Ze zijn overgenomen en niet
   opnieuw bedacht — wijkt er hier iets af, dan wijkt het scherm af.

   Herkomst per regel staat erbij, zodat bij een wijziging in de winkel te
   vinden is wat hier mee moet. */

/* section className="pc-breed" style={{ padding: "clamp(28px, 4vw, 48px) 24px 64px" }} */
.pc-blok { padding: clamp(28px, 4vw, 48px) 24px 64px; }
/* h1 style={{ fontSize: "clamp(24px,3vw,34px)", margin: "0 0 6px", letterSpacing: "-.02em" }} */
.pc-blok > h1 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 6px; letter-spacing: -.02em; }
/* p style={{ color: "rgba(28,34,39,.68)", margin: "0 0 22px" }} */
.pc-inleiding { color: rgba(28,34,39,.68); margin: 0 0 22px; }
/* const paneel = { background: "#fff", borderRadius: 24, padding: 24 } */
.pc-paneel { background: #fff; border-radius: 24px; padding: 24px; }
/* { ...paneel, color: "rgba(28,34,39,.7)" } — de lege staat */
.pc-leeg { color: rgba(28,34,39,.7); }
/* overal in de winkel de gedempte tekstkleur */
.pc-stil { color: rgba(28,34,39,.68); }

/* De tabel zat in `<div className="pc-schuif" style={{...paneel, padding: 0}}>`
   met een table die zijn eigen randen tekent. */
.pc-paneel-vlak { background: #fff; border-radius: 24px; padding: 0; }
.pc-tabel { width: 100%; border-collapse: collapse; }
.pc-tabel thead tr { text-align: left; color: rgba(28,34,39,.65); font-size: 13px; }
.pc-tabel th { padding: 14px 20px; font-weight: 600; }
.pc-tabel td { padding: 14px 20px; }
.pc-tabel tbody tr { border-top: 1px solid rgba(28,34,39,.05); }
.pc-tabel .pc-getal { text-align: right; }
.pc-tabel a { color: inherit; font-weight: 600; }

/* Het statuslabel; kleuren uit de STATUS-tabel in de winkel. */
.pc-badge {
  display: inline-block; font-size: 12.5px; font-weight: 600; border-radius: 16px;
  padding: 4px 12px; white-space: nowrap;
}
.pc-badge-draft             { color: #5c4813; background: #fdf3d8; }
.pc-badge-confirmed         { color: #0b4c72; background: #e3f0f8; }
.pc-badge-partially_shipped { color: #0b4c72; background: #e3f0f8; }
.pc-badge-shipped           { color: #04724d; background: #e2f4ec; }
.pc-badge-cancelled         { color: #8c232c; background: #fdf1f0; }

/* ── de bestelling, uitgeklapt ───────────────────────────────────────────────
   In de winkel is dit `Bestelling`: een kop-paneel met een ruimere ronding en
   padding dan de rest, en daaronder panelen met 16px ertussen. */

/* { ...paneel, borderRadius: 32, padding: "clamp(20px, 3vw, 32px)" } */
.pc-orderkop { border-radius: 32px; padding: clamp(20px, 3vw, 32px); }
/* display: flex; alignItems: baseline; gap: 12; flexWrap: wrap */
.pc-orderkop-rij { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* h1 style={{ fontSize: "clamp(22px, 2.6vw, 30px)", margin: 0, letterSpacing: "-.02em" }} */
.pc-orderkop-rij h1 { font-size: clamp(22px, 2.6vw, 30px); margin: 0; letter-spacing: -.02em; }
/* span style={{ marginLeft: "auto", color: "rgba(28,34,39,.68)" }} */
.pc-orderkop-datum { margin-left: auto; color: rgba(28,34,39,.68); }
/* p style={{ color: "rgba(28,34,39,.68)", margin: "6px 0 0" }} */
.pc-orderkop-ref { color: rgba(28,34,39,.68); margin: 6px 0 0; }
/* div style={{ margin: "24px 0 8px" }} om de stappenbalk */
.pc-orderkop-stappen { margin: 24px 0 8px; }
/* { ...paneel, marginTop: 16 } */
.pc-paneel-na { margin-top: 16px; }
/* h2 style={{ fontSize: 17, margin: "0 0 14px", fontWeight: 600 }} */
.pc-paneel-na > h2 { font-size: 17px; margin: 0 0 14px; font-weight: 600; }
/* div style={{ display: "grid", gap: 14 }} om de verzendingen */
.pc-verzendingen { display: grid; gap: 14px; }
/* span style={{ marginLeft: "auto", fontSize: 12, fontWeight: 600, whiteSpace: "nowrap", … }} */
.pc-verzending-staat {
  margin-left: auto; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: rgba(28,34,39,.68);
}
.pc-verzending-staat.pc-verzonden { color: #04724d; }
/* li style={{ fontSize: 14 }} */
.pc-verzending ul li { font-size: 14px; }

/* ── het adresboek ───────────────────────────────────────────────────────────
   In de winkel is dit `Adressen`: één paneel met een kopregel, een inleiding,
   een zoekveld en de lijst. De lijst zelf (`.pc-adreslijst`, `.pc-adres`) staat
   al hierboven; dit zijn de omliggende inline-stijlen. */

/* div style={{ display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap" }} */
.pc-kop-rij { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* h3 style={{ fontSize: 16, margin: "0 0 4px", fontWeight: 600 }} */
.pc-kop-rij h3 { font-size: 16px; margin: 0 0 4px; font-weight: 600; }
/* span style={{ marginLeft: "auto" }} om de knop(pen) */
.pc-kop-knoppen { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
/* p style={{ color: "rgba(28,34,39,.68)", fontSize: 14, margin: "0 0 14px" }} */
.pc-kop-inleiding { color: rgba(28,34,39,.68); font-size: 14px; margin: 0 0 14px; }
/* div className="pc-zoek" style={{ width: "100%", marginBottom: 14 }} */
.pc-zoek-adres { width: 100%; margin-bottom: 14px; }
/* p style={{ color: "rgba(28,34,39,.68)", margin: 0 }} — de lege staat */
.pc-geen-marge { margin: 0; }
/* span style={{ display: "flex", gap: 8, flexWrap: "wrap" }} om Wijzigen/Verwijderen */
.pc-adres-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── formuliervelden ─────────────────────────────────────────────────────────
   De winkel gebruikt hier Zendesk Garden (`Field`/`Label`/`Input`/`Select`).
   Die stijl wordt in de browser door styled-components gemaakt en bestaat op de
   server niet. De waarden hieronder zijn daarom uit de draaiende winkel gemeten
   en niet nagebouwd op het oog: label 14px/600 in #293239, invoer 14px met
   10px 12px padding, 1px rand #B0B8BE en 4px ronding, hoogte 40px.

   Wijkt Garden ooit af, dan is dit de plek — één meting, geen tweede ontwerp. */

/* Field: label boven invoer, 68px hoog in totaal */
.pc-veld { display: grid; gap: 8px; }  /* 20 + 8 + 40 = 68px, net als Garden */
.pc-veld > label { font-size: 14px; font-weight: 600; color: #293239; line-height: 20px; }
.pc-veld > input,
.pc-veld > select,
.pc-veld > textarea {
  font-family: inherit; font-size: 14px; line-height: 18px; padding: 10px 12px;
  border: 1px solid #B0B8BE; border-radius: 4px; background: #fff; color: #293239;
  width: 100%; box-sizing: border-box;
}
.pc-veld > select { padding-right: 36px; height: 40px; }
.pc-veld > input:focus-visible,
.pc-veld > select:focus-visible { outline: 2px solid #16494F; outline-offset: 1px; }
/* De hulpregel onder het telefoonveld; `fontSize: 13` in de winkel. */
.pc-veld > small { font-size: 13px; color: rgba(28,34,39,.68); }
.pc-veld > small.pc-mis { color: #8c232c; }

/* div style={{ display: "grid", gap: 12 }} om de velden heen */
.pc-veldenlijst { display: grid; gap: 12px; }
/* postcode naast plaats: minmax(0,1fr) minmax(0,1.4fr) */
.pc-veld-rij { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 12px; }

/* meldingen; kleuren uit de winkel (#8c232c fout, #16494F goed) */
.pc-fout { color: #8c232c; font-weight: 600; }
.pc-geslaagd-klein { color: #16494F; font-weight: 600; }
/* p style={{ margin: "0 0 10px", fontSize: 13, color: "rgba(28,34,39,.68)" }} */
.pc-let-op { color: rgba(28,34,39,.68); }
.pc-let-op-tekst { margin: 0 0 10px; font-size: 13px; color: rgba(28,34,39,.68); }
/* eenvoudige opsommingen in de SSR-panelen */
.pc-lijst { margin: 0; padding-left: 18px; }
.pc-lijst li { font-size: 14px; }
/* het uitgeklapte CSV-sjabloon; `.pc-sjabloon` bestaat al, dit is de knoppenrij */
.pc-sjabloon-uit { display: flex; gap: 8px; flex-wrap: wrap; }
/* de tekstkolom naast de foto op het inlogscherm en de productomschrijving */
.pc-signin-tekst { min-width: 0; }
.pc-omschrijving-tekst { color: rgba(28,34,39,.8); line-height: 1.6; }

/* De knoppen onder een formulier. In de winkel staat dit in een lade-voet met
   twee volle-breedte knoppen; op een eigen pagina zou dat een knop van 1100px
   opleveren, dus hier naast elkaar met dezelfde 8px ertussen. */
.pc-formknoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* De taalkiezer op de openbare catalogus. Eén formulier met een keuzelijst; de
   vormgeving komt van de winkelwagenknop, zodat de balk één geheel blijft. */
.pc-taalkiezer select {
  background: rgba(28,34,39,.05); border: 0; border-radius: 999px;
  padding: 8px 12px; font: inherit; font-size: 14px; color: #1C2227; cursor: pointer;
}
.pc-taalkiezer select:hover { background: rgba(28,34,39,.09); }
.pc-taalkiezer select:focus-visible { outline: 2px solid #16494F; outline-offset: 2px; }

/* Op de donkere voet erft de kiezer de tekstkleur; de opties zelf worden door de
   browser op wit getekend en hebben dus hun eigen donkere letter nodig. */
.pc-voet .pc-taalkiezer select { background: transparent; border: 1px solid transparent; color: inherit; }
.pc-voet .pc-taalkiezer select:hover { border-color: rgba(255,255,255,.35); }
.pc-voet .pc-taalkiezer option { color: #1C2227; }

/* ── cookiemelding ───────────────────────────────────────────────────────────
   Onderaan, over de volle breedte, boven alles behalve de lades. Niet in het
   midden van het scherm: een balk die je moet wegklikken voordat je iets kunt
   zien is precies waarom niemand ze meer leest. */
.pc-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: #fff; border-top: 1px solid rgba(28,34,39,.12);
  box-shadow: 0 -8px 30px rgba(28,34,39,.10);
}
.pc-cookie[hidden] { display: none; }
.pc-cookie-binnen {
  width: 100%; max-width: min(1150px, 100%); margin: 0 auto;
  padding: 16px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.pc-cookie b { display: block; margin-bottom: 4px; }
.pc-cookie p { margin: 0; color: rgba(28,34,39,.72); font-size: 14px; line-height: 1.5; max-width: 78ch; }
.pc-cookie-links { margin-top: 8px !important; display: flex; gap: 18px; flex-wrap: wrap; }
.pc-cookie-links a { color: #16494F; font-weight: 600; font-size: 14px; }
.pc-cookie .pc-knop-vol { margin-left: auto; flex: none; }
@media (max-width: 720px) {
  .pc-cookie .pc-knop-vol { margin-left: 0; width: 100%; text-align: center; }
}

/* De juridische kolom in de voet; zelfde vorm als de andere kolommen. */
.pc-voet-blok a { color: rgba(255,255,255,.82); text-decoration: none; font-size: 14px; }
.pc-voet-blok a:hover { color: #fff; text-decoration: underline; }

/* De sorteerkeuze staat naast het zoekveld, in dezelfde rij als de categorieën. */
.pc-sorteer { display: flex; align-items: center; gap: 8px; flex: none; }
.pc-sorteer label { font-size: 13px; color: rgba(28,34,39,.62); white-space: nowrap; }
.pc-sorteer select {
  background: rgba(28,34,39,.05); border: 0; border-radius: 999px;
  padding: 9px 14px; font: inherit; font-size: 14px; color: #1C2227; cursor: pointer;
}
.pc-sorteer select:hover { background: rgba(28,34,39,.09); }
.pc-sorteer select:focus-visible { outline: 2px solid #16494F; outline-offset: 2px; }
@media (max-width: 720px) {
  .pc-sorteer { width: 100%; }
  .pc-sorteer select { flex: 1; }
}

/* Voorraad: alleen ja of nee. Zelfde vorm als de statuslabels elders. */
.pc-voorraad {
  font-size: 12px; font-weight: 600; border-radius: 16px; padding: 3px 10px;
  white-space: nowrap; color: rgba(28,34,39,.68); background: rgba(28,34,39,.05);
}
.pc-voorraad-ja { color: #04724d; background: #e2f4ec; }

/* Het kruimelpad boven een product. Vervangt de losse terugpijl: die was één
   grijze regel die nergens bij hoorde. */
.pc-kruimels {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: rgba(28,34,39,.62); margin: 0 0 18px;
}
.pc-kruimels a { color: inherit; text-decoration: none; }
.pc-kruimels a:hover { color: #1C2227; text-decoration: underline; }
.pc-kruimels [aria-current="page"] { color: #1C2227; font-weight: 600; }
.pc-kruimels span[aria-hidden] { opacity: .45; }

/* De categorieën en de filters staan op eigen regels; in één rij geperst werd
   het op een smal scherm onleesbaar. */
.pc-tabrij { display: flex; align-items: center; margin-bottom: 12px; }
.pc-filterrij {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.pc-filterrij .pc-zoek { flex: 1; min-width: 240px; }
.pc-filterrij .pc-sorteer { margin-left: auto; }
@media (max-width: 720px) {
  .pc-filterrij { gap: 10px; }
  .pc-filterrij .pc-sorteer { margin-left: 0; }
}

/* Niet meer leverbaar: zelfde vorm als de voorraadlabels, in de rustige
   waarschuwingskleur van de winkel. */
.pc-gearchiveerd { color: #5c4813; background: #fdf3d8; }
.pc-archiefmelding {
  background: #fdf3d8; color: #5c4813; font-size: 14px; line-height: 1.55;
  padding: 16px 20px; border-radius: 16px; margin: 0 0 8px; max-width: 52ch;
}