/*
 * De stijl van de publieke winkel.
 *
 * DIT IS GEEN KOPIE MEER. Lang stond hier dat dit bestand opnieuw getrokken moest
 * worden bij elke wijziging aan `apps/shop/src/main.tsx`, omdat het daar een
 * kopie van was. Dat klopt sinds de schil van het helpcentrum is overgenomen niet
 * meer, en het blindelings opvolgen van die instructie zou dat werk weggooien.
 *
 * De twee lopen nu bewust uiteen:
 *
 *   dit bestand      — de publieke winkel. Draagt de schil van het helpcentrum
 *                      (`pc-topbar`, `pc-header`, `pc-footer`) en de canonieke
 *                      rail van 1420/20 uit `brand/tokens/tokens.css`.
 *   main.tsx         — de ingelogde eenpaginaversie. Draagt nog zijn eigen
 *                      balken en staat nog op 1400/10 met `100vw` op zeven
 *                      plekken. Dat is de schuifbalkfout: `100vw` telt hem mee
 *                      en `100%` niet. Hier gerepareerd, daar niet — en die
 *                      winkel wordt opgevolgd door de store in Mijn pluscloud,
 *                      dus hij is niet meeverbouwd.
 *
 * Wat wél gedeeld hoort te blijven zijn de kleuren en de letters. Verandert daar
 * iets, dan verandert het op beide plekken, en bij voorkeur eerst in de merkbron.
 */

  /* 01 — TOKENS ============================================================
     Dezelfde namen en waarden als het helpcentrumthema, zodat een kleur op één
     plek verandert en niet op drie. Wat daar uit de thema-instellingen komt,
     staat hier als vaste waarde: de winkel heeft geen instellingenscherm. */
  :root {
    --pc-primary: #000000;
    --pc-on-primary: #FFFFFF;
    --pc-accent: #ED8269;
    --pc-heading: #000000;
    --pc-text: #4B4B4F;
    --pc-bg: #FFFFFF;
    --pc-surface: #FAFAFA;
    --pc-border: #E4E4E7;

    /* De zinc-schaal van de website. */
    --pc-gray-50: #FAFAFA;
    --pc-gray-100: #F4F4F5;
    --pc-gray-200: #E4E4E7;
    --pc-gray-300: #D4D4D8;
    --pc-gray-400: #A1A1AA;
    --pc-gray-500: #71717A;
    --pc-gray-600: #52525B;
    --pc-gray-700: #3F3F46;
    --pc-gray-800: #27272A;
    --pc-gray-900: #18181B;

    /* Statuskleuren. Ze staan naast zwart en moeten het dus alleen zijn wanneer
       ze iets zeggen — voorraad, een geannuleerde bestelling, een waarschuwing. */
    --pc-green: #1F7A4D;
    --pc-green-vlak: #E8F5EE;
    --pc-red: #D93B30;
    --pc-red-vlak: #FDF0EF;
    --pc-amber: #B4690E;
    --pc-amber-vlak: #FDF4E3;
    --pc-blue: #1274E7;
    --pc-blue-vlak: #E9F2FD;

    /* Het verloop van de website. Het staat nergens als vlak, alleen als gloed
       achter een kaart of achter de hero — zoals daar. */
    /* De zes verlooptokens uit `brand/tokens/tokens.css`, compleet. Hier stond
       alleen de eerste, en juist daardoor werden de losse stopkleuren in de hero
       met de hand overgeschreven — met twee waarden die niet in het palet staan. */
    --pc-gradient: linear-gradient(100deg, #716CFF 0%, #F269FF 52%, #FFCB34 100%);
    --pc-gradient-flat: linear-gradient(to right, #716CFF, #F269FF, #FFCB34);
    --pc-gradient-soft: linear-gradient(160deg, #EEEDFF 0%, #FBEEFF 45%, #FFF6E2 100%);
    --pc-gradient-violet: #716CFF;
    --pc-gradient-magenta: #F269FF;
    --pc-gradient-amber: #FFCB34;

    /* Typografie */
    --pc-font-heading: 'Google Sans', 'Product Sans', Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --pc-font-body: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --pc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Ritme */
    --pc-radius-sm: 6px;
    /* De ronding die het thema zelf voor kaarten gebruikt: .rounded-lg is
       .3rem, geen 10px. Nagemeten op de winkeldemo's van Essentials — daar is
       elke productkaart 4.8px rond. */
    --pc-radius-normal: .3rem;
    --pc-radius: 10px;
    --pc-radius-lg: 16px;
    --pc-radius-xl: 24px;
    --pc-radius-pill: 999px;
    --pc-radius-header: 15px;

    /* Nagemeten op pluscloud.nl/2026-go: .container is max 1400 breed met 10px
       kantlijn. Bij een venster van 1400 (1385 zonder schuifbalk) levert dat een
       rail van 1365 op, en de kopbalk staat daar precies op — logo op x=10, de
       knop rechts eindigend op x=1375. Het was hier 1420/20; dat gaf dezelfde
       rail van 1380 op een breed scherm, maar liep 15px uit de pas zodra er een
       schuifbalk in beeld kwam, omdat 100vw die meerekent en 100% niet. */
    --pc-container: 1420px;
    --pc-gutter: 20px;

    /* Schaduwen, overgenomen van pixfort. */
    --pc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 5px rgba(0, 0, 0, .06);
    --pc-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 8px 19px rgba(0, 0, 0, .07);
    --pc-shadow-lg: 0 4px 8px rgba(0, 0, 0, .04), 0 24px 35px rgba(0, 0, 0, .09);
    /* De kaartschaduw van het thema, letterlijk: .shadow-sm in rust en
       .shadow-hover-sm bij aanwijzen. Sterker dan je zou gokken (15% zwart),
       en dat moet ook: in de demo's staat een witte kaart op een witte pagina,
       dus de schaduw is het enige dat hem aftekent. */
    --pc-shadow-kaart: 0 1px 5px 0 rgba(0, 0, 0, .15);
    --pc-shadow-kaart-hover: 0 3px 8px 0 rgba(0, 0, 0, .15);

    /* Eén beweging voor de hele winkel; de kopbalk gebruikt zijn eigen, tragere. */
    --pc-ease: cubic-bezier(.165, .84, .44, 1);
    --pc-ease-header: cubic-bezier(.365, .84, .44, 1);
    --pc-transition: all .4s var(--pc-ease);

    /* De hoogte van de topbalk, nagemeten op de website. */
    --pc-topbalk-h: 41px;

    /* De ruimte tussen een zwevende lade en de schermrand. */
    --pc-lade-marge: 20px;
  }


  /* 02 — RESET & BASIS ===================================================== */

  * { box-sizing: border-box; }
  html, body, #root { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

  body {
    font-family: var(--pc-font-body);
    font-size: 16px;
    font-weight: 500;
    /* 1.8, gemeten op pluscloud.nl én in het helpcentrum (28,8px op 16px). Hier
       stond 1.7 omdat een winkel dichter oogt dan een tekstpagina — maar dat was
       mijn afweging tegen twee oppervlakken die het samen anders doen, en dan
       wint de afspraak van de smaak. */
    line-height: 1.8;
    letter-spacing: -.01em;
    color: var(--pc-text);
    background: var(--pc-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  img, svg, video { max-width: 100%; vertical-align: middle; }

  ::selection { background: rgba(113, 108, 255, .18); }

  :focus-visible {
    outline: 2px solid var(--pc-primary);
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* 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;
  }


  /* 03 — TYPOGRAFIE =======================================================
     Koppen in Google Sans op 500, strak geleid en met een negatieve spatiëring —
     de enige uitzondering is de h1, die op de website als enige op 600 staat. */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--pc-font-heading);
    color: var(--pc-heading);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.03em;
  }
  h1 { font-weight: 600; }

  .pc-hero h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.155; }
  .pc-hero p  { font-size: clamp(1rem, .95rem + .4vw, 1.125rem); }
  .pc-titel   { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.15; }

  /* Het bovenschrift boven een sectiekop: klein, vet, in de accentkleur. Dat is
     de enige plek waar de koraaltint als tekst voorkomt. */
  .pc-eyebrow {
    display: block;
    font-family: var(--pc-font-body);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pc-accent);
    margin-bottom: .5rem;
  }

  /* A link here carries its meaning from its surroundings, not from a rule
     under it: the website sets this at the base and has not a single underlined
     link on it. Without this, the browser's default falls through to every <a>
     that was given nothing else. The SPA never showed it because it uses buttons
     where the server-rendered shop uses anchors — the logo is a <button> there
     and an <a> here, which is how "Shop" ended up underlined. The places that
     should carry a line (running text, hovering a product name) set it
     themselves and win on specificity. */
  a { text-decoration: none; }


  /* 04 — MAATVOERING ====================================================== */

  .pc-breed {
    max-width: var(--pc-container);
    margin: 0 auto;
    padding: 0 var(--pc-gutter);
  }
  .pc-ritme { padding: clamp(40px, 5vw, 72px) 0; }
  .pc-kantlijn { padding: 0 var(--pc-gutter); }


  /* 05 — KNOPPEN ==========================================================
     De maatvoering van de website: Manrope 14/600, 9px boven en onder, 18px
     ernaast, 10px ronding en geen rand. De tweede rol is geen omlijning maar een
     doorschijnend zwart vlak — dat is wat daar staat. */
  .pc-knop {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--pc-font-body);
    letter-spacing: -.16px;
    white-space: nowrap;
    transition: var(--pc-transition);
  }
  .pc-knop:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--pc-shadow); }
  .pc-knop:not(:disabled):active { transform: translateY(0); box-shadow: none; }
  /* De zachte rol krijgt geen schaduw maar een donkerder vlak; een schaduw onder
     een doorschijnend grijsje leest als een fout, niet als reliëf. */
  .pc-knop-zacht:not(:disabled):hover { box-shadow: none; background: rgba(0, 0, 0, .16); }
  .pc-knop:disabled { opacity: .4; cursor: default; }

  .pc-knop-stil {
    background: transparent; border: 0; color: var(--pc-gray-500);
    cursor: pointer; font: inherit; font-weight: 600; padding: 0;
    transition: color .4s var(--pc-ease);
  }
  .pc-knop-stil:hover { color: var(--pc-heading); }

/* 06 — TOPBALK =========================================================
     De bovenrand van pluscloud.nl, nagemeten: 41px hoog, wit, twee kolommen die
     de rail delen (links uitgelijnd en rechts uitgelijnd), met een haarlijn
     eronder die van rail tot rail loopt — niet van schermrand tot schermrand.
     De tekst is Manrope 14/600 op een vaste regelhoogte van 16px met -0.16px
     spatiëring, in het zwart.

     Hier stonden de drie beloftes ("voor 12:00 besteld", "geregistreerd op uw
     telefooncentrale", "naar elke locatie"). Die zijn eruit: het is een balk
     voor je account en niet voor reclame, en op de website staat op deze plek
     ook wie je bent en waar je heen kunt. De beloftes horen thuis waar iemand
     twijfelt — op de productpagina bij de levertijd — niet boven elke pagina.

     Wat er nu staat is de context van de bestelling: namens welke organisatie je
     bestelt (links, want dat bepaalt prijzen, adressen en factuur), en rechts wie
     je bent en hoe je eruit komt. Dat stond allemaal in de kopbalk en verdrong
     daar de navigatie. */
/* De haarlijn tussen de laatste twee items rechts, zoals de website er een
     zet tussen de statusmelding en Support: 1px bij 24px, 20px ernaast. */
/* De organisatiekiezer is hier tekst, geen formulierveld.

     Hij was een witte doos met een rand en 6px ronding, en dat was fout op deze
     plek: in de topbalk van de website staat geen enkel omrand element — het is
     allemaal kale tekst van 14/600 met een haarlijn ertussen. Eén doos met een
     randje tussen die tekst leest niet als "gestyled maar klein", het leest als
     een browserveld dat vergeten is. Het helpcentrumthema doet het net zo: zijn
     accountknop in de topbalk is background:none, border:0, padding 5px 0.

     Dus: geen rand, geen vulling, zelfde letter als de rest van de strook, met
     het driehoekje er direct achter. Pas bij aanwijzen komt er een vlakje onder,
     zodat je ziet dat het klikbaar is. */
/* Je eigen e-mailadres is een feit, geen knop: grijs en niet aanklikbaar. */
/* 07 — KOPBALK ==========================================================
     De zwevende pil van pluscloud.nl, met hetzelfde gedrag en dezelfde maten:
       in rust     75px hoog, in de pagina, geen achtergrond, geen schaduw
       gescrold   65px hoog, vast op 20px van de bovenkant, matglas en schaduw
     De omschakeling gebeurt op 21px scrollen; de klasse is-scroll wordt door de winkel
     zelf gezet. De tussenruimte houdt de hoogte vast op het moment dat de balk
     uit de pagina stapt, anders springt alles een regel omhoog. */
/* Het matglas hoort bij de zwevende toestand. In rust heeft de balk op de
     website helemaal geen achtergrond — hij staat gewoon op de pagina. */
/* De tussenruimte is precies zo hoog als de balk in rust, zodat de pagina niet
     verspringt op het moment dat hij eruit stapt. */
/* De website laat de hoofdknop 5px buiten die inzet vallen, zodat hij op 10px
     van de rand van de pil eindigt in plaats van op 15. */
/* Logo plus het woord dat deze plek een naam geeft.

     Overgenomen van het helpcentrum, dat hetzelfde probleem heeft: het deelt
     zijn logo met de website, dus zonder woord erachter weet je niet waar je
     bent. Nagemeten in dat thema: 20px tussen het beeldmerk en het woord (10px
     gap plus 10px marge), Manrope 17/400 met -0,17px spatiëring in het grijs,
     en géén streep ertussen — het gewichtsverschil scheidt ze al, en een streep
     leest alsof er twee merken aan elkaar worden geplakt.

     De haarlijn komt pas ná het woord, tussen de naam en de navigatie: 1px bij
     27px op 10% zwart met 4px ruimte ernaast. */
/* Nagemeten op pluscloud.nl/2026-go, en het zijn geen ronde getallen omdat het
     nametingen zijn: het logo is 30px hoog en eindigt op x=135,5; de menulijst
     begint op 169,5 en het eerste linkvlak op 179,5. Dat is 44px tussen het logo
     en het eerste linkvlak. De items zelf staan 20px uit elkaar (op de website
     via 10px padding aan weerszijden van elk <li>; bij ons via gap, wat op
     hetzelfde neerkomt) en hebben 8px ruimte rondom hun tekst.

     De letter is Manrope 16/600 met -0,16px spatiëring — een absolute waarde en
     geen em, want de website erft die van de body en herberekent hem niet. */
/* 28px na de haarlijn; met de 4px marge van de lijn is dat de 32px die het
     helpcentrum tussen zijn streep en het eerste menu-item aanhoudt. De 44px
     van pluscloud.nl golden voor een kopbalk zónder woord achter het logo. */
/* Let op het verschil tussen het vák en de létters, want dat is precies wat de
     website doet en wat wij eerst misten: de <a> staat op 16px met een
     regelhoogte van 1,8 (28,8) en 8px ruimte rondom — dat maakt het vak 44,8px
     hoog. De tekst erbinnen zit in een span op 14px. Onze knoppen stonden
     helemaal op 16px en waren daarmee zichtbaar groter dan het menu op de site. */
/* De actieve pil, en die mag de maatvoering niet aanraken.

     Op pluscloud.nl zelf draagt het huidige menu-item géén achtergrond — daar is
     het een marketingmenu waar "waar ben ik" nauwelijks telt. In de AI
     Agency-demo, waar dit ontwerp vandaan komt, staat hij er wel: een vlak van
     rgba(0,0,0,.1) met 10px ronding, 12px naast en 5px boven het label. Wij
     hebben hem nodig, want dit is een toepassing met drie schermen en je moet
     kunnen zien op welk scherm je staat.

     Hij is daarom een laag achter de knop en geen padding erop: de knop houdt
     zijn 8px van de website, de pil wordt eroverheen getekend met 3px inzet
     boven en onder en 4px overhang links en rechts — precies de vorm uit de
     demo, zonder dat er iets verschuift zodra je van pagina wisselt. */
/* Het uitklapmenu onder een menu-item.

     De website heeft hier megamenu's met kolommen en plaatjes; wij hebben vijf
     categorieën. Dat is een lijstje, geen megamenu — maar wel in dezelfde taal:
     een wit vlak met de kaartronding van het thema en shadow-lg, items op 14/600.

     Hij opent bij aanwijzen (zoals daar, navbar-hover-drop) én bij klikken op het
     pijltje, zodat hij ook zonder muis te bereiken is. Het menu-item zelf blijft
     een gewone knop naar de hele catalogus: wie "Catalogus" aanklikt wil de
     catalogus, niet een keuzemenu. */
.pc-submenu {
    position: absolute; top: calc(100% + 6px); inset-inline-start: 0;
    min-width: 230px; z-index: 20;
    background: var(--pc-bg);
    border-radius: var(--pc-radius-normal);
    box-shadow: var(--pc-shadow-lg);
    padding: 8px;
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .3s var(--pc-ease), transform .3s var(--pc-ease), visibility .3s;
  }
  .pc-nav-item.open .pc-submenu 

  .pc-submenu button {
    background: none; border: 0; text-align: left; cursor: pointer;
    font: inherit; font-family: var(--pc-font-body);
    font-size: 14px; font-weight: 600; letter-spacing: -.16px; line-height: 1.8;
    color: var(--pc-heading);
    padding: 7px 12px; border-radius: var(--pc-radius-sm);
    white-space: nowrap;
    transition: background-color .3s var(--pc-ease);
  }
  .pc-submenu button:hover { background: rgba(0, 0, 0, .06); }
  .pc-submenu button[aria-current="true"] { background: rgba(0, 0, 0, .1); }
  /* De eerste regel gaat naar alles; een streep scheidt hem van de categorieën. */
  .pc-submenu-alles { border-bottom: 1px solid var(--pc-border); margin-bottom: 6px; padding-bottom: 10px; border-radius: 0; }

  /* In het uitklapmenu op een telefoon staan de categorieën gewoon ingesprongen
     onder Catalogus — geen tweede laag die ook weer open moet. */
  .pc-menu nav .pc-menu-sub {
    background: none; border: 0; text-align: left; cursor: pointer;
    font: inherit; font-family: var(--pc-font-body);
    font-size: 16px; font-weight: 500; line-height: 1.8;
    color: var(--pc-gray-600);
    padding: 8px var(--pc-gutter) 8px calc(var(--pc-gutter) + 18px);
  }
  .pc-menu nav .pc-menu-sub > span { font-size: 14px; font-weight: 500; }
  .pc-menu nav .pc-menu-sub:hover { background: rgba(0, 0, 0, .04); }
  .pc-menu nav .pc-menu-sub[aria-current="true"] { color: var(--pc-heading); font-weight: 600; }
  .pc-menu nav .pc-menu-sub[aria-current="true"] > span { font-weight: 600; }

  .pc-hamburger {
    display: none; margin-left: auto;
    background: rgba(0, 0, 0, .06); border: 0;
    width: 44px; height: 44px; border-radius: var(--pc-radius);
    color: var(--pc-heading); cursor: pointer;
    align-items: center; justify-content: center;
    transition: var(--pc-transition);
  }
  .pc-hamburger:hover { background: rgba(0, 0, 0, .12); }
  .pc-hamburger svg { width: 20px; height: 20px; }

/* De winkelwagen is de hoofdknop van de balk — dezelfde plek en dezelfde vorm
     als "Get in Touch" op de website, want het is dezelfde rol: het is waar deze
     pagina je heen wil hebben. */
/* Dezelfde knop als "Get in Touch" op de website, tot op de pixel: 43px hoog
     (9 + 25,2 + 9), 10px rond, Manrope 14/600 met -0,16px spatiëring op een
     regelhoogte van 1,8. Hij staat helemaal rechts en eindigt in rust precies op
     de rechterrand van de rail. */
.pc-mand-icoon { display: none; align-items: center; }
  .pc-mand-icoon svg { width: 16px; height: 16px; display: block; }
  .pc-mand-bol {
    background: var(--pc-on-primary); color: var(--pc-primary);
    border-radius: var(--pc-radius-pill);
    min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
  }

  /* 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: var(--pc-gray-500); font-size: 13px; font-weight: 500; white-space: nowrap; }
  .pc-orgkeuze select {
    min-width: 0; text-overflow: ellipsis;
    appearance: none;
    background: var(--pc-bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 10px center/14px;
    border: 1px solid var(--pc-border); border-radius: var(--pc-radius);
    padding: 8px 30px 8px 14px;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--pc-heading);
    cursor: pointer; max-width: 260px;
    transition: border-color .4s var(--pc-ease);
  }
  .pc-orgkeuze select:hover { border-color: var(--pc-gray-400); }

  /* De taalkiezer, onderaan in de voet.
     Geen vlaggen: een taal is geen land, en het Frans van een Belgische
     vestiging hoort niet onder een Franse vlag. De namen staan in hun eigen
     taal, want dat is wat iemand herkent die de huidige taal niet leest. */
  .pc-taalkiezer select {
    background: transparent; border: 1px solid var(--pc-border); border-radius: var(--pc-radius);
    padding: 6px 10px; font: inherit; font-size: 13px; font-weight: 500;
    color: var(--pc-gray-600); cursor: pointer; max-width: 10rem;
    transition: border-color .4s var(--pc-ease), color .4s var(--pc-ease);
  }
  .pc-taalkiezer select:hover { border-color: var(--pc-gray-400); color: var(--pc-heading); }
  .pc-taalkiezer option { color: var(--pc-heading); }


  /* 08 — HET MENU ACHTER DE HAMBURGER ====================================
     Geen zijlade meer, maar een uitklapmenu in de kopbalk — want dat is wat de
     website doet, en het was het laatste stuk dat er duidelijk anders uitzag.

     Nagemeten op pluscloud.nl bij 390px: de mobiele kopbalk is 56px hoog, wit,
     over de volle breedte en zonder ronding of schaduw. De hamburger is 40x34 en
     staat rechts. Bij openen groeit de kopbalk mee en schuiven de menu-items
     eronder in de pagina — geen paneel dat eroverheen komt, geen waas, niets dat
     de rest afdekt. Elk item is 48,8px hoog met de tekst op 14/600, dezelfde
     letter als het menu op een breed scherm.

     Wat daarmee vervalt: het waas, de focusval en de scrollvergrendeling. Die
     horen bij een dialoog die de pagina overneemt; dit neemt niets over. Escape
     sluit hem nog wel, want dat verwacht iedereen van iets dat open staat. */
  .pc-menu {
    display: none;
    width: 100%;
    background: var(--pc-bg);
    border-top: 1px solid var(--pc-border);
  }
  .pc-menu.open { display: block; }
  .pc-menu nav { display: flex; flex-direction: column; padding: 4px 0 12px; }
  .pc-menu nav button {
    background: none; border: 0; text-align: left;
    font: inherit; font-family: var(--pc-font-body);
    font-size: 16px; font-weight: 600; letter-spacing: -.16px; line-height: 1.8;
    color: var(--pc-heading); cursor: pointer;
    padding: 10px var(--pc-gutter);
    transition: background-color .4s var(--pc-ease);
  }
  .pc-menu nav button > span { font-size: 14px; font-weight: 600; letter-spacing: -.16px; line-height: 1.8; }
  .pc-menu nav button:hover { background: rgba(0, 0, 0, .04); }
  /* Waar je bent: dezelfde pil als in de brede navigatie, maar hier links van de
     tekst als streep — een pil over de volle breedte leest als een knop. */
  .pc-menu nav button[aria-current="page"] { box-shadow: inset 3px 0 0 var(--pc-primary); }

  /* 09 — HET BLAD: inhoud bovenaan, voet onderaan ==========================
     Elk scherm is minstens een schermhoogte hoog, anders zweeft een korte pagina
     halverwege. 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 bóven de voet. */
  .pc-blad {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
  }
  .pc-blad > footer { margin-top: auto; }
  /* 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 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 is niet overbodig: een
     flex-item met een auto-marge — wat .pc-breed heeft, om te centreren — rekt
     anders niet mee met zijn container. */
  .pc-blad > * { min-width: 0; max-width: 100%; width: 100%; }
  .pc-blad > .pc-breed { max-width: min(var(--pc-container), 100%); }

  /* Levergegevens als tabelletje, zoals een groothandel ze toont: label links,
     feit rechts, geen volzinnen. */
  .pc-levertabel {
    display: grid; grid-template-columns: auto 1fr; gap: 6px 18px;
    margin: 0 0 22px; padding: 14px 18px; max-width: 34rem;
    background: var(--pc-gray-100); border-radius: var(--pc-radius); font-size: 13.5px;
  }
  .pc-levertabel dt { color: var(--pc-gray-500); }
  .pc-levertabel dd { margin: 0; font-weight: 600; color: var(--pc-heading); }
  /* Het bijschrift loopt over beide kolommen en is bewust klein en grijs: het
     hoort gelezen te worden als iemand twijfelt, niet als eerste. */
  .pc-lever-vers {
    grid-column: 1 / -1; margin-top: 4px; padding-top: 8px;
    border-top: 1px solid var(--pc-border);
    font-size: 12px; color: var(--pc-gray-400);
  }


  /* 10 — DE HERO ==========================================================
     Het verloop van de website: vier grote, vervaagde vlekken in de merkkleuren
     die elk hun eigen trage lus draaien, zodat het veld blijft schuiven zonder
     zichtbaar te herhalen. Ze staan achter de tekst en raken het contrast niet.

     Dit was een foto met een donkergroene sluier eroverheen. Een foto van een
     vergaderruimte zegt niets over bestellen, en de sluier was er alleen om witte
     tekst leesbaar te houden op beeld dat daar niet voor gemaakt was. Nu staat de
     tekst gewoon in het zwart op een licht veld, en het product staat ernaast. */
  .pc-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: var(--pc-radius-xl);
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
    min-height: clamp(300px, 30vw, 420px);
    isolation: isolate;
    /* Een getinte ondergrond, zodat de vlekken een al gekleurd veld verdiepen in
       plaats van over wit te wassen. Dezelfde verzadiging als op de website. */
    background: linear-gradient(115deg, #E7E2FB 0%, #F3E6FA 42%, #FDEDDF 78%, #FEF6E4 100%);
  }
  .pc-hero > .pc-hero-grid 
  .pc-hero-grid 
  .pc-hero-inner { max-width: 30rem; }

/* De foto ligt in de hero en niet ernaast.
     Op de startpagina van het helpcentrum is dat één beeld: een muur met het
     merkverloop erop, en rechts daarvan het kantoor. Wij hebben die foto niet,
     dus bouwen we hem: het verloop is de linkerkant, onze eigen foto de
     rechterkant, en het masker laat ze in elkaar overlopen in plaats van een
     naad te trekken. Het resultaat is dezelfde compositie met ons eigen beeld.

     Een omkaderde foto naast de tekst kon ook — het thema kent die variant —
     maar dan staan er twee blokken naast elkaar in plaats van één beeld, en
     precies dát is het verschil tussen "lijkt erop" en "hoort erbij". */
/* Het verloop houdt zich aan de linkerkant, zodat het de foto niet overspoelt. */
.pc-hero-mesh {
    -webkit-mask-image: linear-gradient(90deg, #000 32%, transparent 74%);
    mask-image: linear-gradient(90deg, #000 32%, transparent 74%);
  }

  @media (max-width: 959px) {
    /* Op een telefoon is er geen linker- en rechterhelft: dan is de foto weg en
       staat de tekst gewoon op het verloop, precies zoals in het helpcentrum. */
    .pc-hero-foto { display: none; }
    .pc-hero-mesh { -webkit-mask-image: none; mask-image: none; }
    .pc-hero-inner { max-width: none; }
  }

  .pc-hero-mesh {
    position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit;
  }
  .pc-blob {
    position: absolute; display: block; border-radius: 50%;
    filter: blur(64px); will-change: transform;
  }
  .pc-blob--1 {
    width: 72%; aspect-ratio: 1; top: -34%; left: -18%;
    background: radial-gradient(circle, rgba(113, 108, 255, .95), rgba(113, 108, 255, .25) 55%, rgba(113, 108, 255, 0) 72%);
    animation: pc-drift-1 26s ease-in-out infinite;
  }
  .pc-blob--2 {
    width: 64%; aspect-ratio: 1; top: -26%; left: 24%;
    background: radial-gradient(circle, rgba(242, 105, 255, .8), rgba(242, 105, 255, .2) 55%, rgba(242, 105, 255, 0) 72%);
    animation: pc-drift-2 32s ease-in-out infinite;
  }
  .pc-blob--3 {
    width: 78%; aspect-ratio: 1; bottom: -46%; right: -20%;
    background: radial-gradient(circle, rgba(255, 203, 52, .9), rgba(255, 203, 52, .25) 55%, rgba(255, 203, 52, 0) 72%);
    animation: pc-drift-3 29s ease-in-out infinite;
  }
  .pc-blob--4 {
    width: 58%; aspect-ratio: 1; bottom: -34%; left: 10%;
    background: radial-gradient(circle, rgba(237, 130, 105, .7), rgba(237, 130, 105, .18) 55%, rgba(237, 130, 105, 0) 72%);
    animation: pc-drift-4 35s ease-in-out infinite;
  }

  @keyframes pc-drift-1 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(18%, 12%, 0) scale(1.14); }
    66%      { transform: translate3d(6%, -8%, 0) scale(.94); }
  }
  @keyframes pc-drift-2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    40%      { transform: translate3d(-16%, 16%, 0) scale(1.1); }
    70%      { transform: translate3d(10%, 6%, 0) scale(.9); }
  }
  @keyframes pc-drift-3 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    35%      { transform: translate3d(-14%, -14%, 0) scale(1.16); }
    75%      { transform: translate3d(-4%, 6%, 0) scale(.95); }
  }
  @keyframes pc-drift-4 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    45%      { transform: translate3d(20%, -10%, 0) scale(1.12); }
    80%      { transform: translate3d(-8%, 4%, 0) scale(.92); }
  }
  @media (prefers-reduced-motion: reduce) {
    .pc-blob { animation: none !important; }
  }

  /* Een zweem korrel, zodat de vervaging op een groot scherm geen banden trekt. */
  .pc-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    opacity: .22; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  }

  /* Het label boven de titel: een witte pil op het verloop. */
  .pc-hero-label {
    display: inline-flex; align-items: center;
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(8px);
    color: var(--pc-heading);
    font-size: 13px; font-weight: 600;
    border-radius: var(--pc-radius-pill);
    padding: 6px 14px;
    margin-bottom: 20px;
  }

  /* De manier waarop de website woorden benadrukt: de zin staat op 40% zwart en
     de gemarkeerde woorden komen op volle sterkte naar voren. Geen markeerstift
     — die staat nergens op pluscloud.nl. */
  .pc-nadruk-zacht { color: rgba(0, 0, 0, .4); }

/* 11 — DE VOET ==========================================================
     Wit, zonder streep erboven, zoals op de website. Hij was een donkergroen
     blok met 32px ronding; dat was het zwaarste vlak van de hele pagina en het
     laatste wat iemand zag. */
/* De onderste regel loopt over de volle breedte, onder de streep. */
@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; }
  }


  /* 12 — 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; font-weight: 600; cursor: pointer;
    background: rgba(0, 0, 0, .06); border: 0; border-radius: var(--pc-radius-pill);
    padding: 8px 16px; color: var(--pc-heading); text-align: left;
    transition: background-color .4s var(--pc-ease);
  }
  .pc-past button:hover { background: rgba(0, 0, 0, .12); }

  /* Doos of los stuk. Kaarten naast elkaar in plaats van pillen: er zijn drie
     dingen per variant en die moeten onder elkaar leesbaar zijn, niet in een
     regel gepropt. Ruimte eromheen, want het blok zat eerder klem tussen de
     bestelknop en de omschrijving. */
  .pc-varianten { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
  .pc-variant {
    font: inherit; text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 190px; padding: 12px 16px;
    background: var(--pc-gray-100); border: 1px solid transparent; border-radius: var(--pc-radius);
    color: var(--pc-heading);
    transition: background-color .4s var(--pc-ease), border-color .4s var(--pc-ease);
  }
  .pc-variant:hover { background: var(--pc-bg); border-color: var(--pc-border); }
  /* De variant waar je op staat: geen knop, maar duidelijk de gekozene. */
  .pc-variant-nu { cursor: default; background: var(--pc-bg); border-color: var(--pc-gray-400); }
  .pc-variant-nu:hover { background: var(--pc-bg); border-color: var(--pc-gray-400); }
  /* Bestaat wel, maar is niet te bestellen. Zichtbaar houden verklaart waarom de
     andere variant er is; klikbaar houden zou naar een dode pagina leiden. */
  .pc-variant-uit { cursor: default; opacity: .55; }
  .pc-variant-uit:hover { background: var(--pc-gray-100); border-color: transparent; }
  .pc-variant-uit .pc-var-prijs { text-decoration: line-through; }
  .pc-var-naam { font-weight: 600; font-size: 14px; }
  .pc-var-prijs { font-size: 15px; font-variant-numeric: tabular-nums; }
  .pc-var-prijs em { font-style: normal; color: var(--pc-gray-500); font-size: 13px; }
  .pc-var-voorraad { font-size: 12px; color: var(--pc-gray-500); }

  /* Categorie-icoon. */
  .pc-icoon svg { width: 20px; height: 20px; }


  /* 13 — PRODUCTKAART =====================================================
     De kaart van de winkeldemo's van Essentials, nagemeten in de browser en
     niet overgeschreven uit een screenshot:

       wit, 4.8px rond, geen rand
       in rust   box-shadow 0 1px 5px rgba(0,0,0,.15)
       aangewezen  6px omhoog, 0 3px 8px rgba(0,0,0,.15)
       overgang  .4s cubic-bezier(.165,.84,.44,1)

     De opbouw is die van het thema en die is niet willekeurig: de naam staat
     BOVEN de foto, met de labels eronder, dan pas het beeld, en onderaan de
     prijs met de bediening ernaast. In een catalogus scan je namen, geen
     plaatjes — zeker bij ons, waar twaalf zwarte toestellen op een rij staan
     die op een duimnagel nauwelijks van elkaar te onderscheiden zijn. Een WP480G
     herken je aan "WP480G".

     De foto loopt van rand tot rand tussen die twee blokken door. Dat is de
     no-padding-variant uit het thema, en het is de reden dat de kaart één
     ding is in plaats van drie dingen in een doosje.

     Wat hier wég is: het grijze vlak en de merkgloed die bij aanwijzen opbloeide.
     Die horen bij de categoriekaarten van het helpcentrum — een tegel waar je
     op klikt om ergens heen te gaan. Een productkaart is geen tegel: je leest
     hem, je vergelijkt hem met de kaart ernaast, en je zet er een aantal in. Een
     gekleurde gloed onder twaalf kaarten tegelijk maakt dat alleen maar moeilijker. */
  .pc-card {
    position: relative;
    overflow: hidden;
    border: 0; border-radius: var(--pc-radius-normal);
    background: var(--pc-bg);
    box-shadow: var(--pc-shadow-kaart);
    display: flex; flex-direction: column;
    backface-visibility: hidden;
    transition: transform .4s var(--pc-ease), box-shadow .4s var(--pc-ease);
  }
  .pc-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--pc-shadow-kaart-hover);
  }

  /* De twee blokken met tekst: 20px rondom, precies als .pix-p-20. */
  .pc-card-kop { padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 8px; }
  .pc-card-voet {
    padding: 16px 20px 20px; margin-top: auto;
    display: flex; align-items: center; gap: 12px;
  }

  /* De foto: volle breedte, vierkant, en wat er niet past wordt niet
     weggesneden. In de demo's zijn het vierkante productfoto's op een egale
     pasteltint; die van ons zijn dat niet — een hoge DECT-hoorn naast een brede
     gateway — dus het kader wijkt voor het product en niet andersom. */
  .pc-card .pc-plaat {
    position: relative;
    /* Vier op drie en geen vierkant. In de demo's van het thema is het vlak
       vierkant, en dat kan daar: dat zijn bijgesneden productfoto's van 300x300
       die het kader vullen. Onze catalogusfoto's zijn brede banners van Wildix
       die we niet mogen bijsnijden — in een vierkant blijft daar een streep
       beeld met wit erboven en eronder van over, en dan is de kaart voor de
       helft leeg. Vier op drie sluit om wat we werkelijk hebben. */
    aspect-ratio: 4 / 3; width: 100%;
    margin: 0; overflow: hidden;
    background: var(--pc-gray-50);
    display: flex; align-items: center; justify-content: center;
  }
  .pc-card .pc-plaat img {
    width: 100%; height: 100%; object-fit: contain; padding: 16px;
    transition: transform .4s var(--pc-ease);
  }
  .pc-card:hover .pc-plaat img { transform: scale(1.03); }

  /* De labelrij onder de naam. */
  .pc-card-labels { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

  /* Het label van het thema: 12px vet, zwart op 50%, op een vlak van 5% zwart,
     4px rond met 5px/10px ruimte. Ook de gekleurde varianten komen daarvandaan —
     in de demo staat "Discount" rood tussen de grijze categorieën, en dat is
     precies de rol die "op voorraad" bij ons heeft. */
  .pc-label {
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 600; line-height: 1.4;
    border-radius: 4px; padding: 5px 10px;
    background: rgba(0, 0, 0, .05); color: rgba(0, 0, 0, .5);
    white-space: nowrap;
  }
  .pc-label--groen { background: var(--pc-green-vlak); color: var(--pc-green); }
  .pc-label--rood { background: var(--pc-red-vlak); color: var(--pc-red); }
  /* An SKU is a number people compare down a column of cards, so the digits get
     the same width — the help center does this on every figure it prints. */
  .pc-label--stil {
    background: transparent; color: var(--pc-gray-400); padding-inline: 0;
    font-variant-numeric: tabular-nums;
  }

  .pc-card-prijs {
    font-family: var(--pc-font-heading);
    font-size: 17px; font-weight: 600; letter-spacing: -.03em;
    color: var(--pc-heading); white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* 14 — AANTALTELLER ===================================================== */

  .pc-teller {
    display: inline-flex; align-items: center; border-radius: var(--pc-radius);
    background: rgba(0, 0, 0, .06); overflow: hidden;
    transition: background-color .4s var(--pc-ease);
  }
  .pc-teller input {
    width: 36px; height: 36px; border: 0; text-align: center;
    font: inherit; font-weight: 600; font-size: 14px;
    background: transparent; color: var(--pc-heading);
  }
  .pc-teller input::placeholder { color: var(--pc-gray-400); font-weight: 500; }
  .pc-step {
    width: 34px; height: 36px; border: 0; background: transparent; color: var(--pc-heading);
    cursor: pointer; font-size: 17px; line-height: 1;
    transition: background-color .2s var(--pc-ease);
  }
  .pc-step:disabled { opacity: .3; cursor: default; }
  .pc-step:not(:disabled):hover { background: rgba(0, 0, 0, .08); }


  /* 15 — DE BEDIENINGSRIJ ================================================
     Eén rij, geen drie.

     Hier stonden een strook categorietabbladen, daaronder het zoekveld, en
     daaronder nog een rij met de prijs en de sortering. Drie rijen bediening
     voordat je één product zag — en in twee verschillende talen: pillen naast
     keuzelijsten. Op een smal scherm kwam daar een horizontaal schuivende
     tabstrook met een zichtbare schuifbalk bij, en dat was het lelijkste deel.

     De categorieën zijn bovendien geen paginabediening meer: ze staan sinds het
     submenu in de kopbalk, en op een telefoon in het uitklapmenu. Ze een derde
     keer als volle strook herhalen voegt niets toe.

     Wat er nu staat: links waarmee je de lijst kleiner maakt (zoeken, categorie,
     prijs), rechts wat er overblijft en in welke volgorde. Alles in dezelfde
     vorm — de knop van de themademo: wit, 4px rond, shadow-sm, Manrope 14/600. */
  .pc-toolbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 28px;
  }
  .pc-toolbar-rechts { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }

  /* De filterknop met het paneel eronder.

     De categorie en de prijs stonden allebei uitgeklapt in de balk. Samen met
     het zoekveld, de telling en de sortering waren dat vijf dingen op een rij —
     op een telefoon vier regels en bijna tweehonderd pixels voordat je één
     product zag. Het thema laat op die breedte alleen de telling en de
     sortering staan en schuift het hele filterblok onder de producten.

     Hetzelfde effect, andere weg: de twee filters zitten samen achter één knop.
     Wie niet filtert ziet één knop; wie wel filtert krijgt het paneel en ziet op
     de knop staan hoeveel er aanstaat. Onder de producten wegstoppen zoals het
     thema doet werkt bij zesduizend pixels aan raster; bij tien artikelen zou
     niemand hem daar ooit vinden. */
  .pc-filterhoek { position: relative; }

  .pc-filterknop {
    display: inline-flex; align-items: center; gap: 8px;
    height: 43px; padding: 9px 18px;
    background: var(--pc-bg); border: 0; border-radius: var(--pc-radius-normal);
    box-shadow: var(--pc-shadow-kaart);
    font: inherit; font-family: var(--pc-font-body);
    font-size: 14px; font-weight: 600; letter-spacing: -.16px;
    color: var(--pc-heading); cursor: pointer; white-space: nowrap;
    transition: box-shadow .4s var(--pc-ease);
  }
  .pc-filterknop:hover { box-shadow: var(--pc-shadow-kaart-hover); }
  .pc-filterknop svg { width: 11px; height: 11px; }
  .pc-filterhoek.open .pc-filterknop svg { transform: rotate(180deg); }

  /* Het aantal actieve filters. Zonder dit is een dichtgeklapt paneel een
     verstopplek: je ziet dan niet dat de lijst korter is dan hij zou zijn. */
  .pc-filterbadge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--pc-radius-pill);
    background: var(--pc-primary); color: var(--pc-on-primary);
    font-size: 11px; font-weight: 700; line-height: 1;
  }

  .pc-filterpaneel {
    position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 30;
    width: min(340px, calc(100vw - var(--pc-gutter) * 2));
    background: var(--pc-bg);
    border-radius: var(--pc-radius-normal);
    box-shadow: var(--pc-shadow-lg);
    padding: 18px;
    display: grid; gap: 18px;
  }
  .pc-filterpaneel-blok { display: grid; gap: 10px; }
  .pc-filterpaneel-blok > h3 {
    margin: 0; font-family: var(--pc-font-body);
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--pc-gray-500);
  }
  .pc-filterpaneel .pc-keuzelijst { width: 100%; min-width: 0; }
  .pc-filterpaneel-voet {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-top: 14px; border-top: 1px solid var(--pc-border);
  }

  .pc-zoek { position: relative; flex: none; width: 260px; }
  .pc-zoek input {
    width: 100%; height: 43px;
    border: 0; border-radius: var(--pc-radius-normal);
    box-shadow: var(--pc-shadow-kaart);
    padding: 0 40px 0 18px;
    font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -.16px;
    background: var(--pc-bg); color: var(--pc-heading);
    transition: box-shadow .4s var(--pc-ease);
  }
  .pc-zoek input::placeholder { color: var(--pc-gray-400); font-weight: 500; }
  .pc-zoek input:hover, .pc-zoek input:focus { box-shadow: var(--pc-shadow-kaart-hover); outline: 0; }
  .pc-zoek input::-webkit-search-cancel-button { display: none; }
  .pc-zoek button {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    width: 29px; height: 29px; border: 0; border-radius: var(--pc-radius-sm);
    background: rgba(0, 0, 0, .06); color: var(--pc-gray-600);
    font-size: 17px; line-height: 1; cursor: pointer;
    transition: background-color .4s var(--pc-ease);
  }
  .pc-zoek button:hover { background: rgba(0, 0, 0, .12); color: var(--pc-heading); }

  /* 15b — SORTEREN EN PRIJSFILTER =========================================
     Nagemeten in de winkeldemo van het thema.

     Sorteren is daar een knop van 220x43,2: wit, 4px rond, zonder rand, met
     shadow-sm (0 1px 5px rgba(0,0,0,.15)) en Manrope 14/600. Het thema verbergt
     de echte <select> en tekent er een eigen lijst naast; wij houden de select
     zelf en geven hem diezelfde vorm. Dat scheelt een hoop gedrag dat je anders
     zelf moet bouwen — toetsenbord, schermlezer, de lijst op een telefoon — en
     het ziet er hetzelfde uit.

     De schuif is 8px hoog met 16px ronding op rgba(51,51,51,.1), de gevulde band
     in de merkkleur, en de grepen zijn witte cirkels van 16px met --pc-shadow. */
  .pc-resultaat { font-size: 14px; font-weight: 600; color: var(--pc-gray-600); white-space: nowrap; }

  .pc-sorteer, .pc-keuzelijst {
    appearance: none;
    height: 43px;
    background: var(--pc-bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 14px center/14px;
    border: 0; border-radius: var(--pc-radius-normal);
    box-shadow: var(--pc-shadow-kaart);
    padding: 9px 34px 9px 18px;
    font: inherit; font-family: var(--pc-font-body);
    font-size: 14px; font-weight: 600; letter-spacing: -.16px;
    color: var(--pc-heading); cursor: pointer;
    transition: box-shadow .4s var(--pc-ease);
  }
  .pc-sorteer { min-width: 220px; }
  .pc-keuzelijst { min-width: 168px; }
  .pc-sorteer:hover, .pc-keuzelijst:hover { box-shadow: var(--pc-shadow-kaart-hover); }

  /* De prijsschuif: twee bereikvelden over elkaar. Twee echte <input
     type="range">-velden en geen zelfgebouwde greep, want dan werkt hij met het
     toetsenbord, met een schermlezer en met een vinger zonder dat ik dat alle
     drie zelf moet nabouwen. De baan en de gevulde band eronder zijn opmaak; de
     velden zelf zijn doorzichtig en vangen alleen de bediening op. */
  .pc-prijsfilter { display: flex; align-items: center; gap: 12px; }
  .pc-prijsfilter > span { font-size: 14px; font-weight: 600; color: var(--pc-gray-600); white-space: nowrap; }
  /* In het paneel staat hij onder elkaar: de baan over de volle breedte met het
     bedrag eronder. Naast elkaar zou de baan er nog geen honderd pixels
     overhouden en dan schuif je met stappen van vijftig euro tegelijk. */
  .pc-filterpaneel .pc-prijsfilter { flex-direction: column; align-items: stretch; gap: 10px; }
  .pc-filterpaneel .pc-prijsfilter > span:first-child { display: none; }
  .pc-filterpaneel .pc-schuifbaan { width: 100%; }
  .pc-filterpaneel .pc-prijsbedrag { text-align: center; font-size: 14px; font-weight: 600; }
  .pc-prijsbedrag { font-variant-numeric: tabular-nums; color: var(--pc-heading); min-width: 12ch; }

  .pc-schuifbaan {
    position: relative;
    width: 190px; height: 16px;
    display: flex; align-items: center;
  }
  .pc-schuifbaan::before {
    content: ""; position: absolute; inset-inline: 0;
    height: 8px; border-radius: 16px;
    background: rgba(51, 51, 51, .1);
  }
  .pc-schuifvul {
    position: absolute; height: 8px; border-radius: 16px;
    background: var(--pc-primary);
  }
  .pc-schuifbaan input[type="range"] {
    position: absolute; inset-inline: 0; width: 100%;
    margin: 0; padding: 0; height: 16px;
    background: none; appearance: none; pointer-events: none;
  }
  .pc-schuifbaan input[type="range"]::-webkit-slider-thumb {
    appearance: none; pointer-events: auto;
    width: 16px; height: 16px; border-radius: 50%; border: 0;
    background: var(--pc-bg); box-shadow: var(--pc-shadow);
    cursor: grab;
  }
  .pc-schuifbaan input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 16px; height: 16px; border-radius: 50%; border: 0;
    background: var(--pc-bg); box-shadow: var(--pc-shadow);
    cursor: grab;
  }
  .pc-schuifbaan input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--pc-primary); outline-offset: 2px;
  }
  .pc-schuifbaan input[type="range"]::-webkit-slider-runnable-track,
  .pc-schuifbaan input[type="range"]::-moz-range-track { background: none; border: 0; }

  .pc-wisfilter {
    background: none; border: 0; padding: 0;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--pc-gray-500);
    cursor: pointer; white-space: nowrap;
    transition: color .4s var(--pc-ease);
  }
  .pc-wisfilter:hover { color: var(--pc-heading); text-decoration: underline; text-underline-offset: 3px; }

  @media (max-width: 900px) {
    /* Twee regels: zoeken op de eerste, filteren en sorteren samen op de tweede.
       Dat is 96px in plaats van de 183 van vier gestapelde velden. */
    .pc-toolbar { gap: 10px; }
    .pc-zoek { width: 100%; }
    .pc-filterhoek { flex: 1; min-width: 0; }
    .pc-filterknop { width: 100%; justify-content: center; }
    .pc-toolbar-rechts { flex: 1; min-width: 0; margin-inline-start: 0; }
    .pc-sorteer { flex: 1; min-width: 0; }
    /* Het paneel hangt onder de knop en mag de schermbreedte gebruiken. */
    .pc-filterpaneel { width: calc(100vw - var(--pc-gutter) * 2); }
  }


  /* 16 — OVERLAYS: mand en productpagina ==================================
     De laag-indeling, van onder naar boven: inhoud, de kopbalk (6050), de
     beloftebalk (6100), en daarboven het waas met de lades erop. */
  .pc-sluier {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(2px); z-index: 9000;
  }

  /* De mand is een zwevende kaart, geen paneel dat tegen de rand plakt.

     Zo doet het thema het ook, en dat is nagemeten: .pix-sidebar is een lijst
     van 10px rondom, en de kaart erbinnen (.sidebar-inner) is wit, 6px rond en
     draagt shadow-lg. Hij is precies zo hoog als zijn inhoud in plaats van van
     boven tot onder te lopen.

     Waarom het klopt: onze kopbalk zweeft óók — een pil op 20px van de
     bovenkant. Een mand die strak in de hoek geplakt zit met scherpe hoeken
     staat daar naast als een ander stuk software. Nu horen ze bij elkaar.

     Eén verschil met het thema, en dat is inhoudelijk: onze mand kan lang
     worden (meerdere verzendingen met adreskeuzes), dus hij mag groeien tot de
     schermhoogte min de marges en scrollt daarbinnen. Het thema heeft dat
     probleem niet omdat een WooCommerce-mand alleen regels bevat. */
  .pc-mand-zij {
    position: fixed;
    top: var(--pc-lade-marge); right: var(--pc-lade-marge); bottom: var(--pc-lade-marge);
    width: min(420px, calc(100vw - var(--pc-lade-marge) * 2));
    z-index: 9001;
    background: var(--pc-bg);
    border-radius: var(--pc-radius);
    display: flex; flex-direction: column;
    overflow: hidden;
    /* Zo hoog als nodig, nooit hoger dan het scherm. */
    max-height: calc(100dvh - var(--pc-lade-marge) * 2);
    transform: translateX(calc(100% + var(--pc-lade-marge)));
    transition: transform .4s var(--pc-ease);
    box-shadow: var(--pc-shadow-lg);
  }
  .pc-mand-zij.open { transform: none; }
  /* Bodem los van de onderrand als de inhoud kort is. */
  .pc-mand-zij { bottom: auto; }
  .pc-mand-zij header {
    display: flex; align-items: center; padding: 20px 22px;
    border-bottom: 1px solid var(--pc-border);
  }
  .pc-mand-zij header b {
    font-family: var(--pc-font-heading); font-size: 18px; font-weight: 600;
    letter-spacing: -.03em; color: var(--pc-heading);
  }
  .pc-mand-zij header button {
    margin-left: auto; background: none; border: 0; font-size: 24px; line-height: 1;
    color: var(--pc-gray-500); cursor: pointer; border-radius: var(--pc-radius); padding: 2px 8px;
    transition: var(--pc-transition);
  }
  .pc-mand-zij header button:hover { background: rgba(0, 0, 0, .06); color: var(--pc-heading); }
  .pc-mand-doel {
    padding: 16px 22px; background: var(--pc-gray-100); display: grid; gap: 6px;
  }
  .pc-mand-doel label { font-size: 13px; color: var(--pc-gray-500); }
  .pc-mand-doel select, .pc-verzending select {
    appearance: none;
    background: var(--pc-bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 10px center/14px;
    border: 1px solid var(--pc-border); border-radius: var(--pc-radius);
    padding: 9px 30px 9px 12px;
    font: inherit; font-size: 14px; font-weight: 500; color: var(--pc-heading);
    cursor: pointer; max-width: 100%;
    transition: border-color .4s var(--pc-ease);
  }
  .pc-mand-doel select:hover, .pc-verzending select:hover { border-color: var(--pc-gray-400); }
  .pc-mand-inhoud { flex: 1; overflow-y: auto; padding: 12px 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: var(--pc-gray-100); border-radius: var(--pc-radius);
    padding: 16px; margin-bottom: 12px;
  }
  .pc-verzending.open-eind {
    background: var(--pc-amber-vlak);
    box-shadow: inset 0 0 0 1px rgba(180, 105, 14, .22);
  }
  .pc-verzending > header {
    display: flex; align-items: flex-start; gap: 10px; padding: 0 0 12px; border: 0;
  }
  .pc-verzending-icoon {
    flex: none; width: 32px; height: 32px; border-radius: 50%;
    background: var(--pc-bg); color: var(--pc-heading);
    display: grid; place-items: center;
  }
  .pc-verzending-icoon svg { width: 16px; height: 16px; }
  .pc-verzending-nr {
    display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--pc-gray-500);
  }
  .pc-verzending > header b {
    display: block; font-family: var(--pc-font-heading);
    font-size: 15px; font-weight: 600; letter-spacing: -.03em; color: var(--pc-heading);
  }
  .pc-verzending-adres { display: block; font-size: 13px; color: var(--pc-gray-500); }
  .pc-verzending-waarschuwing { margin: 0 0 12px; font-size: 13px; color: var(--pc-amber); }
  .pc-verzending ul {
    list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 14px;
    border-top: 1px solid var(--pc-border);
  }
  /* 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 var(--pc-border);
  }
  .pc-verzending-extra label { display: grid; gap: 4px; }
  .pc-verzending-extra label > span { font-size: 12.5px; color: var(--pc-gray-500); }
  .pc-verzending-extra select,
  .pc-verzending-extra input {
    width: 100%; font: inherit; font-size: 14px; font-weight: 500; color: var(--pc-heading);
    border: 1px solid var(--pc-border); border-radius: var(--pc-radius);
    padding: 9px 12px; background: var(--pc-bg);
  }
  .pc-verzending-som {
    display: flex; align-items: baseline; margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--pc-border); font-size: 14px; color: var(--pc-gray-500);
  }
  .pc-verzending-som b { margin-left: auto; color: var(--pc-heading); font-weight: 700; }

  /* 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;
    font-weight: 600; color: var(--pc-heading);
  }
  .pc-regel-prijs { flex: none; margin-left: auto; font-weight: 700; white-space: nowrap; color: var(--pc-heading); }
  .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: 7px 10px;
    text-overflow: ellipsis;
  }
  .pc-tellerwaarde { min-width: 28px; text-align: center; font-size: 14px; font-weight: 600; }
  .pc-mand-zij footer { padding: 18px 22px; border-top: 1px solid var(--pc-border); }
  .pc-mand-totaal { display: flex; align-items: baseline; margin-bottom: 12px; font-size: 16px; }
  .pc-mand-totaal b { margin-left: auto; font-weight: 700; color: var(--pc-heading); }

  .pc-terug {
    display: inline-flex; align-items: center; gap: .375rem;
    background: none; border: 0; padding: 0 0 18px;
    font: inherit; font-size: 14px; font-weight: 600;
    color: var(--pc-gray-500); cursor: pointer;
    transition: color .4s var(--pc-ease);
  }
  .pc-terug:hover { color: var(--pc-heading); }

  /* Het productpaneel. Geen witte kaart op een gekleurd doek meer — de pagina is
     wit, dus het paneel is de pagina en heeft alleen zijn eigen ruimte nodig. */
  .pc-detail { background: var(--pc-bg); border-radius: var(--pc-radius-lg); padding: 0 0 clamp(24px, 3vw, 40px); }
  .pc-detail-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); }
  .pc-detail-plaat {
    height: clamp(260px, 36vh, 420px); border-radius: var(--pc-radius);
    background: var(--pc-gray-100);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    color: var(--pc-gray-400); font-size: 13px;
  }
  .pc-detail-plaat img { width: 100%; height: 100%; object-fit: contain; padding: 20px; }
  .pc-detail-plaat iframe, .pc-detail-plaat video { width: 100%; height: 100%; border: 0; }


  /* Het koopblok, overgenomen van de productpagina's van het thema: een witte
     kaart met haarlijnen erin, waarbij de prijs in een eigen band bovenaan staat
     en de rest eronder. Het is een kleine ingreep met een groot effect — alles
     wat met kopen te maken heeft zit in één omlijnd ding, en de specificaties
     staan daar duidelijk buiten in plaats van eronder aan te schuiven. */
  .pc-koopblok {
    background: var(--pc-bg);
    border-radius: var(--pc-radius-normal);
    box-shadow: var(--pc-shadow-kaart);
    overflow: hidden;
  }
  .pc-koopblok-prijs {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 20px 24px;
    border-bottom: 1px solid var(--pc-border);
  }
  .pc-koopblok-bedrag {
    font-family: var(--pc-font-heading);
    font-size: 28px; font-weight: 600; letter-spacing: -.03em;
    color: var(--pc-heading); font-variant-numeric: tabular-nums;
  }
  .pc-koopblok-body { padding: 24px; }
  .pc-koopblok-body > h2 { margin: 0 0 10px; }

  /* Alles wat je léést in plaats van bestelt, staat onder de twee kolommen —
     zoals de beschrijving en de tabbladen onder de galerij en het koopblok van
     het thema staan. Op leesbreedte, want een specificatietabel over 1380px is
     geen tabel maar een landkaart. */
  .pc-detail-onder {
    margin-top: clamp(32px, 4vw, 56px);
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid var(--pc-border);
  }
  /* De streep loopt over de hele breedte — dat is de scheiding tussen kopen en
     lezen — maar de tekst eronder niet: die blijft op leesbreedte staan. */
  .pc-detail-onder > * { max-width: 46rem; }
  .pc-detail-onder h3 {
    font-size: 15px; font-weight: 600; margin: 28px 0 10px;
  }
  .pc-detail-onder > :first-child { margin-top: 0; }
  .pc-detail-onder > h3:first-child { margin-top: 0; }

  /* De mandregel, met de opbouw van de mini-cart uit het thema: een duimnagel
     links, daarnaast de naam met "n x stukprijs" eronder, en het regelbedrag
     rechts. Het thema zet daar een duimnagel van 80px neer; bij ons is hij
     kleiner, want er staat nog een adreskeuze onder elke regel.

     De duimnagel is niet decoratief. Onze artikelnamen zijn typenummers —
     WP480G, W-AIR-MED, XH-SUP5 — en die lees je niet, die herken je aan het
     toestel. In de mand kijken is precies het moment waarop je wilt zien wát je
     hebt aangeklikt. */
  .pc-regel { display: flex; gap: 12px; align-items: flex-start; }
  .pc-regel-plaat {
    flex: none; width: 56px; height: 56px;
    border-radius: var(--pc-radius-normal);
    background: var(--pc-gray-100);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .pc-regel-plaat img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
  .pc-regel-lijf { flex: 1; min-width: 0; }
  /* "2 x EUR 279,00" — het thema zet dit als sublijn onder de naam, en het is
     precies de rekensom die het regelbedrag rechts verklaart. Zonder die regel
     staat er een bedrag waarvan je moet raden of het per stuk of voor alles is. */
  .pc-regel-som {
    display: block; margin-top: 2px;
    font-size: 13px; color: var(--pc-gray-500);
    font-variant-numeric: tabular-nums;
  }
  /* Weghalen wat je niet wilt. Het kon al door het aantal naar nul te tikken,
     maar dat is drie keer klikken voor iets wat je in een keer bedoelt — en bij
     twaalf stuks twaalf keer. Het thema heeft er een kruisje voor; wij ook. */
  .pc-regel-weg {
    flex: none; width: 28px; height: 28px; margin-inline-start: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: var(--pc-radius-sm);
    color: var(--pc-gray-400); font-size: 19px; line-height: 1; cursor: pointer;
    transition: var(--pc-transition);
  }
  .pc-regel-weg:hover { background: rgba(0, 0, 0, .06); color: var(--pc-heading); }

  /* De duimnagel met het aantal erop, uit het besteloverzicht van de
     afrekenpagina van het thema: 48px beeld met een bolletje van 20px in de
     rechterbovenhoek. */
  .pc-som-plaat {
    position: relative; flex: none; width: 48px; height: 48px;
    border-radius: var(--pc-radius-normal); background: var(--pc-gray-100);
    display: flex; align-items: center; justify-content: center; overflow: visible;
  }
  .pc-som-plaat img {
    width: 100%; height: 100%; object-fit: contain; padding: 4px;
    border-radius: inherit;
  }
  .pc-som-bol {
    position: absolute; top: -7px; inset-inline-end: -7px;
    min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--pc-radius-pill);
    background: var(--pc-primary); color: var(--pc-on-primary);
    font-size: 11px; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 2px var(--pc-bg);
  }
  .pc-somregel { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
  .pc-somregel + .pc-somregel { border-top: 1px solid var(--pc-border); }
  .pc-somregel-lijf { flex: 1; min-width: 0; font-size: 14px; }
  .pc-somregel-naam {
    display: block; font-weight: 600; color: var(--pc-heading);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pc-somregel-sub { display: block; font-size: 12.5px; color: var(--pc-gray-500); font-variant-numeric: tabular-nums; }
  .pc-somregel-bedrag { flex: none; font-weight: 700; color: var(--pc-heading); font-variant-numeric: tabular-nums; }


  /* Meldingen ("in de mand gelegd").

     Dit stond er helemaal niet. Je tikte op plus en de winkel zei niets terug —
     het aantal in de kopbalk liep op, maar dat is aan de andere kant van het
     scherm en je keek naar de kaart. Het thema lost dat op met een toast met de
     productfoto erin, en dat is precies de bevestiging die ontbrak: niet "er is
     iets gebeurd" maar "dit hebt u toegevoegd".

     Bovenaan rechts, onder de kopbalk, en hij gaat vanzelf weer weg. */
  .pc-meldingen {
    position: fixed;
    top: calc(var(--pc-lade-marge) + 75px);
    inset-inline-end: var(--pc-lade-marge);
    z-index: 9100;
    width: min(340px, calc(100vw - var(--pc-lade-marge) * 2));
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none;
  }
  .pc-melding {
    display: flex; align-items: center; gap: 12px;
    background: var(--pc-bg);
    border-radius: var(--pc-radius);
    box-shadow: var(--pc-shadow-lg);
    padding: 12px 14px;
    pointer-events: auto;
    animation: pc-melding-in .4s var(--pc-ease) both;
  }
  .pc-melding-plaat {
    flex: none; width: 38px; height: 38px;
    border-radius: var(--pc-radius-normal); background: var(--pc-gray-100);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .pc-melding-plaat img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
  .pc-melding-lijf { min-width: 0; flex: 1; }
  .pc-melding-naam {
    display: block; font-size: 14px; font-weight: 600; color: var(--pc-heading);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pc-melding-tekst { display: block; font-size: 13px; color: var(--pc-gray-500); }

  @keyframes pc-melding-in {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to   { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pc-melding { animation: none; }
  }

  /* 17 — VIDEOSPELER: alles weg tot je erover gaat ======================== */

  .pc-speler { position: relative; width: 100%; height: 100%; background: var(--pc-gray-900); }
  .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(0, 0, 0, .42); backdrop-filter: blur(6px); pointer-events: auto;
    transition: background-color .2s ease, transform .2s ease;
  }
  .pc-speler-knop button:hover { background: rgba(0, 0, 0, .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: var(--pc-gray-900); 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: var(--pc-radius); overflow: hidden; padding: 0;
    border: 2px solid transparent; background: var(--pc-gray-100); cursor: pointer;
    transition: border-color .4s var(--pc-ease);
  }
  .pc-detail-strip button:hover { border-color: var(--pc-gray-300); }
  .pc-detail-strip button.aan { border-color: var(--pc-primary); }
  .pc-detail-strip img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

  .pc-specs { width: 100%; border-collapse: collapse; font-size: 14px; }
  .pc-specs th {
    text-align: left; font-weight: 500; color: var(--pc-gray-500); padding: 9px 16px 9px 0;
    border-top: 1px solid var(--pc-border); width: 40%; vertical-align: top;
  }
  .pc-specs td { padding: 9px 0; border-top: 1px solid var(--pc-border); color: var(--pc-heading); font-weight: 500; }
  .pc-docs { width: 100%; border-collapse: collapse; font-size: 14px; }
  .pc-docs td { padding: 11px 0; border-top: 1px solid var(--pc-border); vertical-align: middle; }
  .pc-doc-cel { display: flex; align-items: center; gap: 10px; }
  .pc-doc-icoon { display: inline-flex; color: var(--pc-gray-500); flex: none; }
  .pc-doc-icoon svg { width: 17px; height: 17px; }
  .pc-docs a { color: var(--pc-heading); font-weight: 600; text-decoration: none; }
  .pc-docs a:hover { color: var(--pc-accent); text-decoration: underline; text-underline-offset: 3px; }
  .pc-doc-soort {
    text-align: right; white-space: nowrap; font-size: 12px; color: var(--pc-gray-400);
    text-transform: uppercase; letter-spacing: .04em;
  }

  /* Groepskop binnen de specificatietabel. */
  .pc-spec-groep th {
    padding: 20px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--pc-gray-500); 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: var(--pc-text); line-height: 1.7; }
  .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: 24px 0 8px; font-family: var(--pc-font-heading); font-weight: 600;
    letter-spacing: -.03em; color: var(--pc-heading);
  }
  .pc-detail-tekst h2 { font-size: 20px; }
  .pc-detail-tekst h3 { font-size: 17px; }
  .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: var(--pc-heading); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  .pc-detail-tekst a:hover { color: var(--pc-accent); }
  .pc-detail-tekst img { max-width: 100%; height: auto; border-radius: var(--pc-radius); 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: 9px 12px 9px 0; border-top: 1px solid var(--pc-border);
  }
  .pc-detail-tekst blockquote {
    margin: 12px 0; padding: 10px 16px; border-left: 3px solid var(--pc-accent);
    color: var(--pc-gray-600);
  }
  .pc-detail-tekst pre {
    background: var(--pc-gray-100); border-radius: var(--pc-radius); padding: 12px 14px;
    overflow-x: auto; font-family: var(--pc-font-mono); font-size: 13px;
  }
  .pc-detail-tekst hr { border: 0; border-top: 1px solid var(--pc-border); margin: 20px 0; }

  /* Klikbare productfoto en -naam. */
  .pc-plaatknop { border: 0; cursor: pointer; padding: 0; color: inherit; text-decoration: none; background: none; }
  .pc-naamknop {
    background: none; border: 0; padding: 0;
    font: inherit; font-family: var(--pc-font-heading);
    font-weight: 600; font-size: 17px; letter-spacing: -.03em; line-height: 1.25;
    color: var(--pc-heading); cursor: pointer; text-align: left; min-width: 0;
    text-decoration: none;
  }
  .pc-naamknop:hover { text-decoration: underline; text-underline-offset: 3px; }


  /* 18 — 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: var(--pc-gray-400); 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: var(--pc-border);
  }
  .pc-stappen li:first-child::before { display: none; }
  .pc-stappen li.af::before, .pc-stappen li.nu::before { background: var(--pc-primary); }
  .pc-stap-bol {
    position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
    background: var(--pc-bg); box-shadow: inset 0 0 0 2px var(--pc-border); color: var(--pc-gray-400);
  }
  .pc-stappen li.af .pc-stap-bol { background: var(--pc-primary); box-shadow: none; color: var(--pc-on-primary); }
  .pc-stappen li.nu .pc-stap-bol { background: var(--pc-bg); box-shadow: inset 0 0 0 2px var(--pc-primary); color: var(--pc-primary); }
  .pc-stappen li.af, .pc-stappen li.nu { color: var(--pc-heading); }
  .pc-stappen li.nu { font-weight: 600; }
  .pc-stappen.geannuleerd {
    display: block; background: var(--pc-red-vlak); color: var(--pc-red);
    border-radius: var(--pc-radius); padding: 14px 18px; font-size: 14px;
  }


  /* 19 — REGELS VAN EEN BESTELLING ======================================== */

  .pc-orderregels { width: 100%; border-collapse: collapse; font-size: 14.5px; }
  .pc-orderregels td { padding: 12px 0; border-top: 1px solid var(--pc-border); vertical-align: top; }
  .pc-orderregels tr:first-child td { border-top: 0; }
  .pc-orderregels .pc-aantal { width: 48px; color: var(--pc-gray-500); }
  .pc-orderregels .pc-bedrag { text-align: right; white-space: nowrap; font-weight: 700; color: var(--pc-heading); }
  .pc-orderregels .pc-sku { display: block; font-size: 12.5px; color: var(--pc-gray-400); }
  .pc-orderregels tfoot td { border-top: 2px solid var(--pc-gray-300); font-weight: 700; color: var(--pc-heading); }

  .pc-orderrij { cursor: pointer; transition: background-color .2s var(--pc-ease); }
  .pc-orderrij:hover { background: var(--pc-gray-50); }
  .pc-orderknop {
    background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
    color: var(--pc-heading); cursor: pointer;
  }
  .pc-orderknop:hover { color: var(--pc-accent); text-decoration: underline; text-underline-offset: 3px; }

  @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; }
  }


  /* 20 — ADRESLIJST ======================================================= */

  .pc-adreslijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .pc-adres {
    display: flex; align-items: center; gap: 12px;
    background: var(--pc-gray-100); border-radius: var(--pc-radius); padding: 16px 18px;
    transition: background-color .4s var(--pc-ease);
  }
  .pc-adres:hover { background: var(--pc-gray-200); }
  .pc-adres > div { min-width: 0; flex: 1; }
  .pc-adres b { font-weight: 600; color: var(--pc-heading); }
  .pc-adres-regel { display: block; font-size: 13.5px; color: var(--pc-gray-500); 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%; }
  }


  /* 21 — ADRESIMPORT ====================================================== */

  .pc-sjabloon {
    background: var(--pc-gray-100); border-radius: var(--pc-radius); padding: 16px 18px; margin-bottom: 14px;
  }
  .pc-sjabloon pre {
    margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; overflow-x: auto;
    color: var(--pc-gray-600); font-family: var(--pc-font-mono);
  }
  .pc-download {
    display: inline-flex; align-items: center; border-radius: var(--pc-radius); padding: 9px 18px;
    background: rgba(0, 0, 0, .1); color: var(--pc-heading);
    font-weight: 600; font-size: 14px; letter-spacing: -.16px; text-decoration: none;
    transition: background-color .4s var(--pc-ease);
  }
  .pc-download:hover { background: rgba(0, 0, 0, .16); }
  .pc-plakvak {
    width: 100%; border: 1px solid var(--pc-border); border-radius: var(--pc-radius); padding: 12px 14px;
    font: inherit; font-size: 14px; resize: vertical; background: var(--pc-bg); color: var(--pc-heading);
  }
  .pc-plakvak:focus { border-color: var(--pc-primary); box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); outline: 0; }


  /* 22 — RASTERS ==========================================================
     Vier kaarten op de rail van 1380 in plaats van drie op 1150: de kolom is
     breder geworden, dus dezelfde kaartbreedte levert er gewoon één meer op. */
  .pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; }
  /* auto-fit en niet auto-fill: bij één pakket vult die kaart de hele breedte in
     plaats van smal linksboven te blijven staan met een leeg vlak ernaast. */
  .pc-pakketten { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }

  /* De band eromheen. Hij was lichtteal — het enige gekleurde vlak op de pagina.
     Nu is het de grijstint van de website: het blok staat er nog steeds als een
     eigen gedeelte, maar het schreeuwt niet meer. */
  .pc-pakketband {
    background: var(--pc-gray-100);
    padding: clamp(32px, 4vw, 64px) 0 clamp(32px, 4vw, 56px);
    margin-top: clamp(24px, 3vw, 48px);
  }
  .pc-pakket-kop { margin-bottom: 24px; }
  .pc-pakket-kop h2 {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); margin: 0 0 6px;
    font-weight: 500; letter-spacing: -.03em; color: var(--pc-heading);
  }
  .pc-pakket-kop p { margin: 0; color: var(--pc-gray-600); max-width: 62ch; }

  /* Links waarom je dit wilt, rechts wat erin zit. Onder de 720px onder elkaar:
     twee kolommen van 160px leest slechter dan twee blokken op volle breedte. */
  .pc-pakket {
    background: var(--pc-bg); border-radius: var(--pc-radius); padding: clamp(20px, 2.4vw, 28px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(20px, 3vw, 40px); align-items: start;
    transition: box-shadow .4s var(--pc-ease), transform .4s var(--pc-ease);
  }
  .pc-pakket:hover { box-shadow: var(--pc-shadow); transform: translateY(-2px); }
  .pc-pakket-links { display: flex; flex-direction: column; gap: 10px; }
  .pc-pakket-links h3 {
    margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.03em; color: var(--pc-heading);
  }
  .pc-pakket-uitleg { margin: 0; color: var(--pc-gray-600); font-size: 14px; line-height: 1.55; }
  .pc-pakket-prijs { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
  .pc-pakket-bedrag {
    font-family: var(--pc-font-heading); font-size: 26px; font-weight: 600;
    letter-spacing: -.03em; color: var(--pc-heading);
  }
  .pc-pakket-stuks { color: var(--pc-gray-500); font-size: 13px; }

  .pc-pakket-regels {
    list-style: none; margin: 0; padding: 0; display: grid; gap: 2px;
    border-left: 1px solid var(--pc-border); padding-left: clamp(20px, 3vw, 32px);
  }
  .pc-pakket-regels li {
    display: flex; align-items: baseline; gap: 10px; font-size: 14px;
    padding: 8px 0; border-bottom: 1px solid var(--pc-gray-100);
  }
  .pc-pakket-regels li:last-child { border-bottom: 0; }
  .pc-pakket-aantal { color: var(--pc-gray-400); min-width: 26px; font-variant-numeric: tabular-nums; }
  /* De naam mag afbreken in plaats van afgekapt te worden: een pakketregel is
     geen tabelcel, en "Wildix W-AIR Base Station Small Bus…" helpt niemand. */
  .pc-pakket-naam { min-width: 0; color: var(--pc-heading); }
  .pc-pakket-regelprijs {
    margin-left: auto; display: flex; align-items: baseline; gap: 8px;
    color: var(--pc-gray-600); white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  .pc-pakket-regelprijs span { font-size: 12px; color: var(--pc-gray-400); }

  @media (max-width: 720px) {
    .pc-pakket { grid-template-columns: minmax(0, 1fr); }
    .pc-pakket-regels { border-left: 0; padding-left: 0; border-top: 1px solid var(--pc-border); padding-top: 8px; }
  }

  .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) 380px; gap: 24px; align-items: start; }

  @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. Een dunne schuifbalk laten staan:
     onzichtbaar schuifbaar is voor de gebruiker hetzelfde als afgekapt. */
  .pc-schuif { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .pc-schuif > * { min-width: max-content; }
  .pc-schuif:focus-visible { outline: 2px solid var(--pc-primary); outline-offset: 2px; }


  /* 23 — KRIMPEN IN STAPPEN ===============================================
     De kopbalk houdt nu maar drie dingen vast — logo, menu, winkelwagen — dus
     die past ruim. Wat kan knellen is de topbalk: daar staat een keuzelijst met
     een organisatienaam naast een e-mailadres, en beide kunnen lang zijn.

     De volgorde waarin ze wijken is de volgorde van hoe vaak je ze nodig hebt.
     Wélke organisatie je bestelt bepaalt prijzen, adressen en factuur en blijft
     dus staan; je eigen e-mailadres wist je al. */

  /* Het label bij de keuzelijst: die lijst zegt zelf al wat hij is. */
  @media (max-width: 1100px) {
    .pc-topbalk .pc-orgkeuze > span { display: none; }
    .pc-nav-breed { gap: 12px; margin-inline-start: 24px; }
  }

  /* Je eigen e-mailadres. Uitloggen blijft: dat is een handeling. */
  @media (max-width: 900px) {
    .pc-topbalk .pc-email { display: none; }
    .pc-orgkeuze select { max-width: 190px; }
  }


  /* 24 — MOBIEL =========================================================== */

  @media (max-width: 800px) {
    /* Eén kantlijn op een telefoon, gelijk aan de hero en de voet, zodat het
       logo precies boven de linkerrand van de kaarten staat. */
    :root { --pc-gutter: 20px; }
    /* De mobiele kopbalk van de website: 56px, wit, volle breedte, geen ronding
       en geen zwevende pil. Hij plakt bovenaan in plaats van los te komen — een
       pil die op een telefoon van de rand loskomt kost alleen maar breedte. */
    .pc-balk {
      position: sticky; top: 0;
      width: 100%; height: 56px;
      border-radius: 0;
      background: var(--pc-bg);
    }
    .pc-balk::before { display: none; }
    .pc-balk-spacer, .pc-balk-wrap.is-scroll .pc-balk-spacer { display: none; }
    .pc-balk-wrap.is-scroll .pc-balk {
      position: sticky; top: 0; height: 56px;
      box-shadow: 0 1px 5px rgba(0, 0, 0, .15);
    }
    .pc-balk-binnen, .pc-balk-wrap.is-scroll .pc-balk-binnen { padding-inline: var(--pc-gutter); }
    .pc-balk-wrap.is-scroll .pc-mand-knop { margin-inline-end: 0; }
    .pc-nav-breed { display: none; }
    /* Zonder navigatie ernaast heeft de haarlijn niets te scheiden. Het woord
       blijft wel staan: juist op een telefoon is "welke pluscloud is dit" de
       vraag die het beantwoordt. */
    .pc-balk-divider { display: none; }
    .pc-logo-knop { margin-inline-end: 0; }
    .pc-logo-suffix { font-size: 15px; margin-inline-start: 8px; }
    /* De topbalk blijft ook op een telefoon staan: namens wie je bestelt is
       daar juist belangrijker, want de rest van het scherm is smal. Hij wordt
       alleen krapper. */
    .pc-topbalk-groep { gap: 12px; }
    .pc-topbalk-groep--eind > * + *::before { inset-inline-start: -12px; }
    /* De winkelwagen blijft, met alleen het karretje. De hamburger schuift ernaast. */
    .pc-mand-knop { margin-left: auto; padding: 9px 13px; }
    .pc-mand-woord { display: none; }
    .pc-mand-icoon { display: inline-flex; }
    .pc-hamburger { display: inline-flex; margin-left: 8px; }
    .pc-logo { height: 26px; }

    /* De winkelwagen blijft een zwevende kaart, maar krapper: elke pixel telt. */
    :root { --pc-lade-marge: 10px; }
    .pc-mand-zij {
      width: calc(100vw - var(--pc-lade-marge) * 2);
      max-width: none;
      bottom: var(--pc-lade-marge);
      max-height: calc(100dvh - var(--pc-lade-marge) * 2);
    }
    .pc-meldingen { top: calc(var(--pc-lade-marge) + 56px); }
    /* Vingers zijn geen muisaanwijzers: alles wat je aantikt wordt 44px. */
    .pc-step { width: 44px; height: 44px; }
    .pc-teller input { width: 44px; height: 44px; }
    .pc-mand-zij header button { width: 44px; height: 44px; }
    .pc-regel-bediening select, .pc-mand-doel select { min-height: 44px; }

    /* Het ritme halveert: 48px per sectie in plaats van 72px. */
    .pc-ritme { padding: 44px 0; }
    /* De hero houdt zijn kantlijn en zijn ronding: hij is nu een licht vlak en
       geen foto, en een licht vlak dat van rand tot rand loopt is op een telefoon
       niet te onderscheiden van de pagina eronder. */
    .pc-hero { padding: 2rem 1.5rem; }
  }


  @media (max-width: 720px) {
    .pc-detail-raster { grid-template-columns: minmax(0, 1fr); }
    .pc-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
  }

/* ── 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. Verder gelijk aan de
   winkel: het vák staat op 16px met 8px ruimte (44,8 hoog) en de létters op
   14px in een span. Die tweedeling komt van pluscloud.nl en is de reden dat het
   menu daar kleiner oogt dan zijn regelhoogte doet vermoeden. */
/* De pil is een laag eronder en geen padding erop: zo verschuift de rij niet
   zodra een ander item actief wordt. */
/* De winkelwagen is een link in plaats van een knop, maar draagt dezelfde vorm
   als de hoofdknop van de website: zwart, 10px rond, Manrope 14/600. */
.pc-mand-bol {
  background: var(--pc-on-primary); color: var(--pc-primary); border-radius: var(--pc-radius-pill);
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.pc-org-vast { color: var(--pc-gray-500); font-size: 13px; }

/* Het hamburgermenu is een <details>: open- en dichtklappen zonder script. De
   eenpaginaversie klapt op een telefoon uit ónder de balk; dat kan hier niet
   zonder JavaScript, dus dit blijft een uitklapper. Wel in dezelfde taal: een
   wit vlak met de kaartronding van het thema en shadow-lg. */
.pc-menu-klein { display: none; margin-left: 8px; position: relative; }
.pc-menu-klein > summary {
  list-style: none; cursor: pointer; width: 44px; height: 44px;
  border-radius: var(--pc-radius);
  background: rgba(0, 0, 0, .06); color: var(--pc-heading);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  transition: var(--pc-transition);
}
.pc-menu-klein > summary:hover { background: rgba(0, 0, 0, .12); }
.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: var(--pc-bg); border-radius: var(--pc-radius-normal); padding: 8px;
  box-shadow: var(--pc-shadow-lg); display: grid; gap: 2px;
}
.pc-menu-klein > nav a {
  padding: 8px 12px; border-radius: var(--pc-radius-sm); text-decoration: none;
  color: var(--pc-heading); font-family: var(--pc-font-body);
  font-size: 14px; font-weight: 600; letter-spacing: -.16px; line-height: 1.8;
}
.pc-menu-klein > nav a:hover { background: rgba(0, 0, 0, .06); }

@media (max-width: 900px) {
  .pc-nav-breed { 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: var(--pc-heading); }

/* De categoriestrook is weg.

   Hij stond onder de kop met dezelfde categorieën die ook in de kopbalk staan —
   twee keer dezelfde lijst op één pagina, en op een smal scherm werd hij een
   horizontaal schuivend lint. In de eenpaginaversie is hij om dezelfde reden
   vervallen. Wie een categorie wil, pakt hem in het menu. */

/* De knoppen waren React-componenten met inline-stijlen; hier zijn het links en
   verzendknoppen. Dezelfde maten als de winkel, en die komen van de website:
   Manrope 14/600 met -0,16px spatiëring, 9px boven en 18px naast, 10px ronding.
   De grote maat is de heroknop: kopletter op 16px, 10px/24px. */
.pc-knop-hero, .pc-knop-vol, .pc-knop-licht, .pc-knop-rand {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: var(--pc-radius); border: 0;
  font-family: var(--pc-font-body); font-size: 14px; font-weight: 600;
  letter-spacing: -.16px; line-height: 1.8; padding: 9px 18px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: var(--pc-transition);
}
.pc-knop-hero:hover, .pc-knop-vol:hover { transform: translateY(-1px); box-shadow: var(--pc-shadow); }
.pc-knop-licht:hover, .pc-knop-rand:hover { background: rgba(0, 0, 0, .16); }
.pc-knop-hero {
  font-family: var(--pc-font-heading); font-size: 16px; font-weight: 500;
  letter-spacing: -.03em; padding: 10px 24px;
  background: var(--pc-primary); color: var(--pc-on-primary);
}
.pc-knop-vol   { background: var(--pc-primary); color: var(--pc-on-primary); }
.pc-knop-licht { background: rgba(0, 0, 0, .1); color: var(--pc-heading); }
.pc-knop-rand  { background: rgba(0, 0, 0, .1); color: var(--pc-heading); }

/* 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" }} — de
   spatiëring komt uit de tokens (-.03em), niet meer uit de inline-stijl. */
.pc-blok > h1 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 6px; }
/* p style={{ color: "var(--pc-gray-500)", margin: "0 0 22px" }} */
.pc-inleiding { color: var(--pc-gray-500); margin: 0 0 22px; }
/* const paneel = { background: "#fff", borderRadius: 24, padding: 24 } */
.pc-paneel { background: var(--pc-bg); border: 1px solid var(--pc-border); border-radius: var(--pc-radius); padding: 24px; }
/* { ...paneel, color: "var(--pc-gray-600)" } — de lege staat */
.pc-leeg { color: var(--pc-gray-600); }
/* overal in de winkel de gedempte tekstkleur */
.pc-stil { color: var(--pc-gray-500); }

/* De tabel zat in `<div className="pc-schuif" style={{...paneel, padding: 0}}>`
   met een table die zijn eigen randen tekent. */
.pc-paneel-vlak { background: var(--pc-bg); border: 1px solid var(--pc-border); border-radius: var(--pc-radius); padding: 0; }
.pc-tabel { width: 100%; border-collapse: collapse; }
.pc-tabel thead tr { text-align: left; color: var(--pc-gray-500); 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(0,0,0,.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-flex; align-items: center;
  font-size: 12px; font-weight: 600; line-height: 1.4;
  border-radius: 4px; padding: 5px 10px; white-space: nowrap;
}
.pc-badge-draft             { color: var(--pc-amber); background: var(--pc-amber-vlak); }
.pc-badge-confirmed         { color: var(--pc-blue); background: var(--pc-blue-vlak); }
.pc-badge-partially_shipped { color: var(--pc-blue); background: var(--pc-blue-vlak); }
.pc-badge-shipped           { color: var(--pc-green); background: var(--pc-green-vlak); }
.pc-badge-cancelled         { color: var(--pc-red); background: var(--pc-red-vlak); }

/* ── 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: var(--pc-radius); 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 }} */
.pc-orderkop-rij h1 { font-size: clamp(22px, 2.6vw, 30px); margin: 0; }
/* span style={{ marginLeft: "auto", color: "var(--pc-gray-500)" }} */
.pc-orderkop-datum { margin-left: auto; color: var(--pc-gray-500); }
/* p style={{ color: "var(--pc-gray-500)", margin: "6px 0 0" }} */
.pc-orderkop-ref { color: var(--pc-gray-500); 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: var(--pc-gray-500);
}
.pc-verzending-staat.pc-verzonden { color: var(--pc-green); }
/* 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: "var(--pc-gray-500)", fontSize: 14, margin: "0 0 14px" }} */
.pc-kop-inleiding { color: var(--pc-gray-500); 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: "var(--pc-gray-500)", 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 var(--pc-heading), 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: var(--pc-heading); 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: var(--pc-heading);
  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 var(--pc-primary); outline-offset: 1px; }
/* De hulpregel onder het telefoonveld; `fontSize: 13` in de winkel. */
.pc-veld > small { font-size: 13px; color: var(--pc-gray-500); }
.pc-veld > small.pc-mis { color: var(--pc-red); }

/* 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 (var(--pc-red) fout, var(--pc-primary) goed) */
.pc-fout { color: var(--pc-red); font-weight: 600; }
.pc-geslaagd-klein { color: var(--pc-primary); font-weight: 600; }
/* p style={{ margin: "0 0 10px", fontSize: 13, color: "var(--pc-gray-500)" }} */
.pc-let-op { color: var(--pc-gray-500); }
.pc-let-op-tekst { margin: 0 0 10px; font-size: 13px; color: var(--pc-gray-500); }
/* 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: var(--pc-text); 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(0,0,0,.05); border: 0; border-radius: 999px;
  padding: 8px 12px; font: inherit; font-size: 14px; color: var(--pc-heading); cursor: pointer;
}
.pc-taalkiezer select:hover { background: rgba(0,0,0,.09); }
.pc-taalkiezer select:focus-visible { outline: 2px solid var(--pc-primary); 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. */
/* ── 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 var(--pc-border);
  box-shadow: 0 -8px 30px var(--pc-border);
}
.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: var(--pc-gray-600); 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: var(--pc-primary); 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. */
/* 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: var(--pc-gray-500); white-space: nowrap; }
.pc-sorteer select {
  background: rgba(0,0,0,.05); border: 0; border-radius: 999px;
  padding: 9px 14px; font: inherit; font-size: 14px; color: var(--pc-heading); cursor: pointer;
}
.pc-sorteer select:hover { background: rgba(0,0,0,.09); }
.pc-sorteer select:focus-visible { outline: 2px solid var(--pc-primary); 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: var(--pc-gray-500); background: rgba(0,0,0,.05);
}
.pc-voorraad-ja { color: var(--pc-green); background: var(--pc-green-vlak); }

/* 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: var(--pc-gray-500); margin: 0 0 18px;
}
.pc-kruimels a { color: inherit; text-decoration: none; }
.pc-kruimels a:hover { color: var(--pc-heading); text-decoration: underline; }
.pc-kruimels [aria-current="page"] { color: var(--pc-heading); 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: var(--pc-amber); background: var(--pc-amber-vlak); }
.pc-archiefmelding {
  background: var(--pc-amber-vlak); color: var(--pc-amber); font-size: 14px; line-height: 1.55;
  padding: 16px 20px; border-radius: 16px; margin: 0 0 8px; max-width: 52ch;
}

/* Wat Wildix ervan heeft, onder de prijs. Rustig vormgegeven: het is een
   toelichting bij "op bestelling", geen tweede voorraadmelding die met de eerste
   concurreert. */
.pc-lever {
  display: grid; gap: 3px; border-radius: 14px; padding: 12px 16px; margin: 0 0 16px;
  font-size: 13.5px; line-height: 1.5; max-width: 46ch;
}
.pc-lever b { font-size: 14px; }
.pc-lever-goed  { background: var(--pc-green-vlak); color: var(--pc-green); }
.pc-lever-slecht { background: var(--pc-amber-vlak); color: var(--pc-amber); }

/* Een mededeling boven de catalogus.
   Nu alleen in gebruik door de overdracht vanuit het helpcentrum: wie geweigerd
   wordt landt hier, en zonder deze regel staat hij op een catalogus zonder
   prijzen zonder te weten waarom. Amber en niet rood: er is niets stuk, hij
   mist alleen toegang. */
.pc-melding-vlak {
  margin: 0;
  padding: 14px 18px;
  border-radius: 10px;
  background: #FDF4E3;
  color: #B4690E;
  font-size: 14px;
  line-height: 1.55;
  max-width: 62ch;
}

/* ── One article, in the help center's own anatomy ─────────────────────────
   Taken from the store in my pluscloud rather than invented here. The plan is
   that this is the same page: public without a price, signed in with one. Two
   shapes for one page would drift apart within a release, and the reader would
   feel it before anyone could name it.

   What deliberately does NOT come along is the application frame. my pluscloud
   runs under `.pc-app`, which sets `max-width: none` on the container and hangs
   a 232px rail beside it — that is an application. A public product page is an
   ordinary help center page and keeps the normal container and gutter.

   These classes live in the server-only tail because only the public page uses
   them. The signed-in SPA still draws its own detail page from `.pc-detail-*`,
   which is shared with it and therefore left alone. */

.pc-product-top {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(14rem, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.pc-product-shots { display: flex; flex-direction: column; gap: .5rem; }
/* Capped, and the reason is worth keeping: at full width a 4:3 frame made a PoE
   injector the size of a poster and pushed the button off the first screen. */
.pc-product-shot {
  width: 100%;
  max-height: 22rem;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: var(--pc-radius);
  background: #fff;
}
.pc-product-noshot {
  display: flex; align-items: center; justify-content: center;
  background: var(--pc-gray-100);
  font-size: .75rem; color: var(--pc-gray-400);
}
.pc-product-strip { display: flex; flex-wrap: wrap; gap: .5rem; }
.pc-product-thumb {
  width: 4rem; height: 4rem; padding: .25rem;
  border: 0; border-radius: calc(var(--pc-radius) - 2px);
  background: var(--pc-gray-100); cursor: pointer;
}
.pc-product-thumb.is-on { background: var(--pc-gray-200); }
.pc-product-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pc-product-thumb:focus-visible { outline: 2px solid var(--pc-primary); outline-offset: 2px; }

/* The one surface that gathers the buying decision. Public, that is the way in;
   signed in, it is where the price lands. Same block either way — which is the
   whole point of taking this anatomy over. */
.pc-product-buy {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.25rem;
  border-radius: var(--pc-radius);
  background: var(--pc-gray-100);
}
.pc-product-buy .pc-knop-vol { justify-content: center; }
.pc-product-archief { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--pc-gray-600); }

/* 44rem is the reading measure from the design language. Without it the
   description ran the full column, which at 1380px is not a paragraph. */
.pc-product-prose { max-width: 44rem; margin: 2rem 0 0; line-height: 1.7; }
.pc-product-prose p { margin: 0 0 .75rem; }
.pc-product-prose ul, .pc-product-prose ol { margin: 0 0 .75rem; padding-inline-start: 1.25rem; }
.pc-product-h { margin: 2rem 0 .75rem; font-size: 1.125rem; letter-spacing: -.03em; }

.pc-product-specs {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
  gap: .375rem 1rem;
  max-width: 44rem; margin: 2rem 0 0;
  font-size: .875rem;
}
.pc-product-specs dt { color: var(--pc-gray-600); }
.pc-product-specs dd { margin: 0; color: var(--pc-heading); }
.pc-product-spectable { max-width: 44rem; margin: 0; }
.pc-product-specgroup {
  margin: 1.5rem 0 .5rem;
  font-size: .75rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--pc-gray-600);
}
.pc-product-specgroup:first-child { margin-top: 0; }
.pc-product-spectable .pc-product-specs { margin: 0; }
.pc-product-spectable .pc-product-specs dt,
.pc-product-spectable .pc-product-specs dd { padding: .375rem 0; }
/* A hairline would be wrong here, so the rows separate on a tint instead. */
.pc-product-spectable .pc-product-specs dt,
.pc-product-spectable .pc-product-specs dd {
  background: linear-gradient(var(--pc-gray-100), var(--pc-gray-100)) left bottom / 100% 1px no-repeat;
}

.pc-product-docs { margin: 0; padding-inline-start: 1.25rem; font-size: .875rem; }
.pc-product-docs li { margin: 0 0 .25rem; }

@media (max-width: 48rem) {
  .pc-product-top { grid-template-columns: 1fr; }
}

/* The name comes before the block with the photograph and the buying surface —
   the help center's order, and it is the right one: you read what a thing is
   before you look at what can be done with it. */
.pc-product-head { margin: 0 0 1.5rem; }
.pc-product-head h1 { margin: 0 0 .5rem; }
.pc-product-head p { margin: 0; }
/* The stock line sits in the buying surface, not up in the title row — the help
   center's order: price, stock, then the control. Here the price is absent and
   the control is the way to it, but the reading order is the same. */
.pc-product-buy > .pc-voorraad { align-self: flex-start; }

/* ══════════════════════════════════════════════════════════════════════════
   The help center's own shell, taken over rather than imitated
   ══════════════════════════════════════════════════════════════════════════

   What stood here before was a second, translated, simplified copy of this:
   `pc-topbalk` beside their `pc-topbar`, `pc-voet` beside their `pc-footer`,
   even the same separator trick under a different name. It was close enough to
   look related and far enough to look wrong — the strip above had three pieces
   of plain text where theirs carries icons, the navigation had no carets, and
   the header had no search. A shop that is meant to read as one thing with the
   help center cannot keep its own dialect of its chrome.

   So these rules are lifted from `pluscloud-2026/style.css` as they are. The
   one theme setting in them (the status colour) is resolved to its value, and
   the `.pc-app` rules are deliberately left behind: those are what HIDE this
   header and footer inside my pluscloud, where the application bar takes over.

   The status pill does not come along. Theirs asks status.pluscloud.nl what is
   actually true, and their own comment records why: it once read "all systems
   normal" during an outage. A static copy would rebuild that bug, so it is left
   out until it can be wired for real.
   ────────────────────────────────────────────────────────────────────────── */

/* 05 — BUTTONS ============================================================ */

/* An author rule with a display beats the browser's own [hidden] rule at
   equal specificity, so every button this theme hides needed saying here.
   Without it `btn.hidden = true` left the control standing: after the
   verification mail went out, the reader still saw the button that had just
   sent it, and after "this address is already confirmed" they saw the button
   the code had deliberately taken away. */
.pc-btn[hidden] { display: none; }
.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  /* Measured on the website. The call-to-action is set in the body font at
     600, not the heading font — and the letter-spacing follows the typeface
     (-.01em for Manrope, -.03em for Google Sans) rather than the component. */
  font-family: var(--pc-font-body);
  font-size: 14px;
  font-weight: 600;
  /* An absolute value, because the website's button inherits the body's
     -0.16px rather than recomputing it at 14px. */
  letter-spacing: -.16px;
  line-height: 1.8;
  padding: 9px 18px;            /* var(--pc-btn-h) tall, as on the website */
  border-radius: var(--pc-radius);
  border: 0;                    /* a transparent border still added 2px */
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--pc-transition);
}
.pc-btn:hover { text-decoration: none; transform: translateY(-1px); }
.pc-btn:active { transform: translateY(0); }
.pc-btn--primary {
  background: var(--pc-primary);
  color: var(--pc-on-primary);
}
.pc-btn--primary:hover {
  color: var(--pc-on-primary);
  box-shadow: var(--pc-shadow);
}
/* The website's second button: a translucent black fill, no border, and the
   heading font one step lighter. 39px tall. */
.pc-btn--secondary,
.pc-btn--outline {
  font-family: var(--pc-font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.5;
  padding: 9px 18px;
  background: rgba(0, 0, 0, .1);
  border-color: transparent;
  color: var(--pc-heading);
}
.pc-btn--secondary:hover,
.pc-btn--outline:hover { background: rgba(0, 0, 0, .16); color: var(--pc-heading); }
body:has(.pc-cinema) .pc-btn--outline {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
body:has(.pc-cinema) .pc-btn--outline:hover { background: rgba(255, 255, 255, .2); color: #fff; }
/* The one button in the theme that ends something. Red text rather than a red
   slab: a filled button is the shape this design system uses for the thing it
   wants you to press, and cancelling is not that. The colour is the status
   vocabulary's red at its text weight (#B3261E, 5.90:1), because a label sits
   on it and has to be read. */
.pc-btn--danger { background: transparent; color: var(--pc-st-red-text); }
.pc-btn--danger:hover { background: var(--pc-st-red-tint); color: var(--pc-st-red-text); }
.pc-btn--danger[disabled] { opacity: .45; cursor: not-allowed; background: transparent; }
.pc-btn--ghost { background: transparent; color: var(--pc-gray-600); padding-inline: .5rem; }
.pc-btn--ghost:hover { color: var(--pc-heading); background: var(--pc-gray-100); }
/* The hero-sized button: heading font at 16px, 49px tall. */
.pc-btn--lg {
  font-family: var(--pc-font-heading);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.8;
  padding: 10px 24px;
}
/* The small pill, 32px tall. */
.pc-btn--sm {
  font-family: var(--pc-font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.3;
  padding: 8px 12px;
}
.pc-btn--block { display: flex; width: 100%; }
.pc-form-actions .pc-btn { min-height: var(--pc-btn-h); }
/* Zendesk sometimes emits a bare <input type=submit> — normalise it */
input[type="submit"]:not(.pc-btn),
button.button:not(.pc-btn),
.button:not(.pc-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--pc-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.16px;
  line-height: 1.8;
  padding: 9px 18px;
  border-radius: var(--pc-radius);
  border: 0;
  background: var(--pc-primary);
  color: var(--pc-on-primary);
  cursor: pointer;
  transition: var(--pc-transition);
}
input[type="submit"]:not(.pc-btn):hover,
button.button:not(.pc-btn):hover,
.button:not(.pc-btn):hover { box-shadow: var(--pc-shadow); text-decoration: none; color: var(--pc-on-primary); }
/* 07 — TOP BAR =========================================================== */

/* Scrolls away with the page, exactly as on pluscloud.nl.
   Measured there: 41px tall, 14px Manrope 600 on a flat 16px line-height —
   the strip is set tight, not on the body's 1.8. */
.pc-topbar {
  height: 41px;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 16px;
  position: relative;
  z-index: 6100;                /* above the header, so the account menu shows */
}
/* The website closes the strip with a hairline across the content width. */
.pc-topbar > .pc-container { height: 100%; display: flex; align-items: center; }
.pc-topbar-inner {
  height: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
/* 13px between the label and the icons it introduces. */
.pc-topbar-group { display: flex; align-items: center; gap: 13px; }
.pc-topbar a {
  display: inline-flex;
  align-items: center;
  gap: 5px;                     /* the website's icon margin-right */
  color: var(--pc-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  padding-block: 5px;           /* 28px tall, as on the website */
  transition: opacity .4s var(--pc-ease);
}
.pc-topbar a:hover { opacity: .6; text-decoration: none; }
/* Black, like every other label in the strip — the grey read as disabled. */
.pc-topbar-label { color: var(--pc-heading); font-weight: 600; }
/* The status label carries the same colour as its icon. */
.pc-topbar-status { color: #1F7A4D; }
/* The hairline the website draws between the two right-hand items. */
.pc-topbar-group--end { gap: 20px; }
.pc-topbar-group--end > * + * { position: relative; }
.pc-topbar-group--end > * + *::before {
  content: "";
  position: absolute;
  inset-inline-start: -20px;
  top: 50%;
  height: 16px;
  width: 1px;
  transform: translateY(-50%);
  background: var(--pc-border);
}
/* The account menu, in the slot the website uses for its Support link. It is
   a <button> here rather than a link, so it repeats the strip's type. */
.pc-topbar-account {
  max-width: 26ch;
  font-family: var(--pc-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.16px;
  line-height: 16px;
  color: var(--pc-heading);
}
.pc-topbar-dropdown .pc-topbar-account {
  gap: 5px;
  padding: 5px 0;
  background: none;
  border: 0;
  /* .pc-dropdown-toggle is declared later and would otherwise win. */
  font-family: var(--pc-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.16px;
  line-height: 16px;
}
.pc-topbar-dropdown .pc-topbar-account:hover { background: none; opacity: .6; }
/* The strip sits below the header, so its menu has to outrank it. */
.pc-topbar-dropdown { position: relative; z-index: 6100; }
.pc-topbar-dropdown .pc-dropdown-menu { inset-inline-end: 0; }
.pc-topbar-account > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-social { display: inline-flex; gap: 16px; }
.pc-social a { color: var(--pc-heading); padding-block: 0; }
.pc-social a:hover { opacity: 1; }
/* 08 — HEADER & NAVIGATION ===============================================
   The header is a floating, frosted pill that shrinks and fixes itself on
   scroll — the same behaviour and geometry as pluscloud.nl:
     rest     75px tall, in flow, no shadow
     scrolled 65px tall, fixed, 20px from the top, soft shadow
   ======================================================================== */

.pc-header-wrap { position: relative; z-index: 200; }
/* Reserves the header's height when it detaches, so the page does not jump. */
.pc-header-spacer { display: none; }
.pc-header-wrap.is-scroll .pc-header-spacer { display: block; height: 75px; }
.pc-header {
  position: relative;
  height: 75px;
  border-radius: var(--pc-radius-header);
  margin-inline: auto;
  /* Measured on the website at four widths: the bar is min(1380, 100vw − 20)
     and centred, in both states. That is 20px wider than the content column
     below it (which sits in 20px gutters), and identical to it once the
     viewport passes 1420. */
  width: min(calc(var(--pc-container) - var(--pc-gutter) * 2), calc(100% - var(--pc-gutter)));
  top: 0;
  transition:
    height .6s var(--pc-ease-header),
    top .6s var(--pc-ease-header),
    box-shadow .6s var(--pc-ease-header);
  z-index: 6050;
}
/* The frosted layer belongs to the floating state only. At rest the website's
   bar has no background at all — it sits straight on the page. */
.pc-header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background .6s var(--pc-ease-header);
}
.pc-header-wrap.is-scroll .pc-header {
  position: fixed;
  top: 20px;
  inset-inline: 0;
  height: 65px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .15);
}
.pc-header-wrap.is-scroll .pc-header::before {
  background: rgba(255, 255, 255, .8);
  backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
}
.pc-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 100%;
  /* Nothing at rest, so the logo lands exactly on the content rail. Once the
     bar becomes a pill the website insets its contents by 15px. */
  padding-inline: 0;
  transition: padding .6s var(--pc-ease-header);
}
.pc-header-wrap.is-scroll .pc-header-inner { padding-inline: 15px; }
/* The website lets the call-to-action sit 5px proud of that inset, so it ends
   10px from the pill's edge rather than 15. */
.pc-header-wrap.is-scroll .pc-header-actions > .pc-btn--primary { margin-inline-end: -5px; }
.pc-logo { display: inline-flex; align-items: center; gap: .625rem; flex-shrink: 0; }
.pc-logo img { height: 30px; width: auto; }
.pc-logo span {
  font-family: var(--pc-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--pc-heading);
}
.pc-logo:hover { text-decoration: none; }
/* Names the place. A light weight after a hairline reads as a suffix to the
   wordmark rather than a second brand competing with it — the same lockup
   documentation sites use. */
.pc-logo .pc-logo-suffix,
.pc-logo-suffix {
  display: inline-flex;
  align-items: center;
  font-family: var(--pc-font-body);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.17px;
  color: var(--pc-gray-500);
  white-space: nowrap;
}
/* No rule between the two: the weight difference already separates them, and
   a divider read as though two brands were being joined. */
.pc-logo .pc-logo-suffix { margin-inline-start: 10px; }
/* The links that leave the help center. The arrow is the only thing that
   separates them from the sections above; the type stays identical. */
.pc-nav-out .pc-ico-out {
  margin-inline-start: 4px;
  color: var(--pc-gray-400, var(--pc-gray-500));
  transition: var(--pc-transition);
}
.pc-nav a:hover .pc-ico-out { color: inherit; }
/* 20px between items, measured on the website. */
.pc-nav { display: flex; align-items: center; gap: 20px; margin-inline-start: .75rem; }
/* Measured from the website: Manrope 16/600, 8px padding, no pill. */
.pc-nav a {
  position: relative;
  font-family: var(--pc-font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--pc-heading);
  padding: .5rem;
  transition: opacity .4s var(--pc-ease);
}
.pc-nav a:hover { opacity: .6; text-decoration: none; }
/* --- Category menu ------------------------------------------------------
   Hangs off the knowledge-base item so the nav shows the real content.
*/

.pc-nav-item { position: relative; display: inline-flex; }
.pc-nav-trigger { display: inline-flex; align-items: center; gap: .25rem; }
/* The website marks a nav item that opens a submenu with this caret. */
.pc-nav-caret {
  color: var(--pc-gray-400);
  transition: transform .4s var(--pc-ease), color .4s var(--pc-ease);
}
.pc-nav-item.is-open .pc-nav-caret { transform: rotate(180deg); color: var(--pc-heading); }
.pc-nav-menu {
  position: absolute;
  top: calc(100% + .75rem);
  inset-inline-start: -1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .25rem 1.5rem;
  min-width: 460px;
  padding: 1rem;
  background: var(--pc-bg);
  border-radius: var(--pc-radius-lg);
  box-shadow: var(--pc-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all .4s var(--pc-ease);
  z-index: 350;
}
.pc-nav-item.is-open .pc-nav-menu { opacity: 1; visibility: visible; transform: none; }
/* A hover bridge, so the menu does not close in the gap under the trigger. */
.pc-nav-menu::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -.75rem;
  height: .75rem;
}
.pc-nav-col { min-width: 0; }
.pc-nav-col-head {
  display: flex !important;
  align-items: center;
  gap: .5rem;
  padding: .375rem .5rem !important;
  border-radius: var(--pc-radius-sm);
  font-family: var(--pc-font-heading) !important;
  font-size: .9375rem !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  color: var(--pc-heading) !important;
}
.pc-nav-col-head .pc-icon { width: 17px; height: 17px; color: var(--pc-gray-500); }
.pc-nav-col-head:hover { background: var(--pc-gray-100); opacity: 1 !important; }
.pc-nav-col-head:hover .pc-icon { color: var(--pc-heading); }
.pc-nav-sub {
  display: block !important;
  padding: .3125rem .5rem .3125rem 2rem !important;
  border-radius: var(--pc-radius-sm);
  font-family: var(--pc-font-body) !important;
  font-size: .8125rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  color: var(--pc-gray-600) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-nav-sub:hover { background: var(--pc-gray-100); color: var(--pc-heading) !important; opacity: 1 !important; }
.pc-header-actions { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
/* The thin rule between navigation and actions, as on the website. */
.pc-header-divider {
  width: 1px;
  height: 27px;
  background: rgba(0, 0, 0, .1);
  flex-shrink: 0;
  margin-inline: .25rem;
}
/* --- Search trigger ------------------------------------------------------ */

/* The website's is a bare glyph, not a field or a pill: 18px icon inside
   18px of padding, 54x51. The ⌘K shortcut still works, it is just no longer
   advertised in the bar. */
.pc-search-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 51px;
  padding-inline: 18px;
  border: 0;
  border-radius: var(--pc-radius);
  background: none;
  color: var(--pc-gray-600);
  cursor: pointer;
  transition: var(--pc-transition);
}
.pc-search-toggle .pc-kbd-hint { display: none; }
.pc-search-toggle:hover { color: var(--pc-heading); }
.pc-kbd-hint {
  font-family: var(--pc-font-body);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--pc-gray-500);
  background: var(--pc-gray-100);
  border-radius: 4px;
  padding: .125rem .3125rem;
  line-height: 1.4;
}
/* User menu */
.pc-dropdown { position: relative; }
.pc-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--pc-radius);
  padding: .3125rem .5rem;
  cursor: pointer;
  font-family: var(--pc-font-heading);
  font-size: .875rem;
  font-weight: 500;
  color: var(--pc-heading);
  transition: var(--pc-transition);
}
.pc-dropdown-toggle:hover { background: rgba(0, 0, 0, .05); }
.pc-dropdown-toggle .pc-nav-caret { transition: transform .4s var(--pc-ease); color: var(--pc-gray-500); }
.pc-dropdown-toggle[aria-expanded="true"] .pc-nav-caret { transform: rotate(180deg); }
.pc-dropdown-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + .75rem);
  min-width: 230px;
  background: var(--pc-bg);
  border-radius: var(--pc-radius-lg);
  box-shadow: var(--pc-shadow-lg);
  padding: .375rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all .4s var(--pc-ease);
  z-index: 300;
}
.pc-dropdown-menu.is-open { opacity: 1; visibility: visible; transform: none; }
/* Several account links only render for some sign-in methods, so the rule
   above them must not be left hanging on its own. */
.pc-dropdown-separator:last-child,
.pc-dropdown-separator:first-child,
.pc-dropdown-separator + .pc-dropdown-separator { display: none; }
/* Buttons as well as links: Zendesk's own account helpers are a mix of the
   two — `contact_details` and `change_password` render a <button>, the rest
   render <a> — and a bare button in here arrived with the browser's grey face
   and 2px border, sitting in the list like a stray form control. */
.pc-dropdown-menu a,
.pc-dropdown-menu button {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  border: 0;
  border-radius: var(--pc-radius-sm);
  background: none;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 500;
  line-height: inherit;
  text-align: start;
  color: var(--pc-gray-700);
  cursor: pointer;
}
.pc-dropdown-menu a:hover,
.pc-dropdown-menu button:hover { background: var(--pc-gray-100); color: var(--pc-heading); text-decoration: none; }
.pc-dropdown-separator { height: 1px; background: var(--pc-border); margin: .375rem .25rem; }
/* Zendesk's account helpers render nothing when they do not apply — sign out
   is absent under SSO — and the rule meant to sit above one then hangs off the
   bottom of the menu on its own. */
.pc-dropdown-separator:last-child { display: none; }
/* Mobile menu */
.pc-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 0;
  border-radius: var(--pc-radius);
  cursor: pointer;
  color: var(--pc-heading);
  transition: var(--pc-transition);
}
/* Declared after the base rule so it actually wins. */


/* The website's mobile menu takes the whole screen from the very top rather
   than hanging under the header, so the page behind it never half-shows. */
.pc-mobile-nav {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--pc-bg);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .35s var(--pc-ease), transform .35s var(--pc-ease), visibility .35s;
  z-index: 6200;
  overscroll-behavior: contain;
}
/* Logo where the logo was, close where the burger was. Measured on the
   website: a compact 48px bar — logo 126x40 at x=20, the X 15px in from the
   right — with the first menu item starting flush at y=48. */
.pc-mobile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
  height: 48px;
  padding-inline: var(--pc-gutter);
}
/* 40px tall, as on the website, so it sits inside the 48px bar. */
.pc-mobile-bar .pc-logo { height: 40px; }
.pc-mobile-bar .pc-logo img { max-height: 40px; }
.pc-mobile-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--pc-radius);
  background: none;
  color: var(--pc-heading);
  cursor: pointer;
}
/* -5px puts the 44px hit area's edge on the website's 15px inset without
   shrinking it below the touch minimum. */
.pc-mobile-close { margin-inline-end: -5px; }
.pc-mobile-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--pc-gutter) 2rem;
}
/* The website does not lock the page while its menu is open — the panel sits
   in the header and the content stays where it was. */
body.pc-menu-open .pc-topbar { z-index: 1; }
.pc-mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
/* Measured on the website's own mobile menu: the same Manrope 16/600 as the
   desktop nav, black, 10px of vertical padding, and no rules between the
   items — the spacing does the separating. */
.pc-mobile-nav a:not(.pc-btn) {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: 10px 0;
  font-family: var(--pc-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.8;              /* 10 + 29 + 10 = the website's 49px pitch */
  letter-spacing: -.16px;
  color: var(--pc-heading);
}
/* Left-aligned and only as wide as its label, as on the website. */
.pc-mobile-nav .pc-btn { margin-top: 1.75rem; align-self: flex-start; width: auto; }
.pc-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--pc-app-badge, var(--pc-gray-100));
  color: var(--pc-heading);
  transition: var(--pc-transition);
}
.pc-icon-badge .pc-icon { width: var(--pc-app-fill, 24px); height: var(--pc-app-fill, 24px); }
.pc-icon-badge--sm { width: 34px; height: 34px; border-radius: 10px; }
.pc-icon-badge--sm .pc-icon { width: var(--pc-app-fill, 18px); height: var(--pc-app-fill, 18px); }
/* --- App logos ----------------------------------------------------------
   The icons above are monochrome glyphs: .pc-icon paints currentColor through
   a mask, so the shape takes the text colour. An app logo is artwork in full
   colour, and putting it through that mask would flatten it to a silhouette.

   A section that shows a logo therefore sets --pc-app-* variables instead of
   the usual --pc-ico. They are read by .pc-icon and its badge, so this needs
   no extra class and no template change:

     [data-sec="123456"] {
       --pc-app-logo: url("https://204432.apps.zdusercontent.com/.../logo.png");
       --pc-app-mask: none;          /* paint the artwork, not a silhouette  */
       --pc-app-bg: transparent;
       --pc-app-badge: transparent;  /* drop the disc the glyph sits in      */
       --pc-app-fill: 100%;          /* artwork fills the badge              */
       --pc-app-radius: 10%;         /* and rounds like a Marketplace icon   */
       --pc-app-ring: inset 0 0 0 1px rgba(17, 17, 13, .11);
     }
/* Internal        */


/* --- App logos per section ID -------------------------------------------
   Ten sections under Zendesk Apps are apps we publish. The mapping below
   makes .pc-icon paint the listing's own logo instead of a
   monochrome glyph — which covers the section's own header and every place it
   appears in an overview, because they all key off the same [data-sec].

   The URL carries a content hash, so it cannot be built from the app id. Both
   the logo and the ratings in script.js come from GET /api/v2/apps.json on
   pluscloud.zendesk.com (large_icon, rating.average, rating.total_count);
   tools/refresh-marketplace.js prints both blocks again.
------------------------------------------------------------------------ */

[data-sec="7612509874962"] { --pc-app-logo: url("https://213652.apps.zdusercontent.com/213652/assets/1770956698-93bcf0d9173f8349ebeeed997273f660/logo.png"); }
/* Icon: a circle, as on the website, filling in on hover. */
.pc-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--pc-app-badge, rgba(0, 0, 0, .06));
  color: var(--pc-heading);
  flex-shrink: 0;
  transition: var(--pc-transition);
}
.pc-icon-badge .pc-icon { width: var(--pc-app-fill, 22px); height: var(--pc-app-fill, 22px); }
.pc-icon-badge--sm { width: 36px; height: 36px; }
.pc-icon-badge--sm .pc-icon { width: var(--pc-app-fill, 18px); height: var(--pc-app-fill, 18px); }
.pc-card-link:hover .pc-icon-badge {
  background: var(--pc-app-badge, var(--pc-heading));
  color: var(--pc-bg);
  transform: scale(1.05);
}
.pc-carousel-btn--prev .pc-ico { transform: rotate(180deg); }
.pc-band-icon .pc-icon { width: var(--pc-app-fill, 26px); height: var(--pc-app-fill, 26px); }
.pc-panel-item--dark .pc-icon-badge { background: rgba(255, 255, 255, .12); color: #fff; }
.pc-panel-item--dark .pc-btn { margin: 0; flex-shrink: 0; }
.pc-aimenu-toggle .pc-ico-chev { transition: transform .3s var(--pc-ease); opacity: .6; }
.pc-aimenu-toggle[aria-expanded="true"] .pc-ico-chev { transform: rotate(180deg); }
/* Scoped to the menu it lives in. `.pc-dropdown-menu button` is one class more
   specific than a bare `.pc-aimenu-item`, so its `display: block` won this
   outright and stacked every icon above its own label. */
.pc-dropdown-menu .pc-aimenu-item {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  width: 100%;
  padding: .5rem .625rem;
  border: 0;
  border-radius: var(--pc-radius);
  background: none;
  text-align: start;
  cursor: pointer;
  color: var(--pc-heading);
  font-family: inherit;
  transition: var(--pc-transition);
}
.pc-btn--invert { background: #fff; color: var(--pc-gray-900); }
.pc-btn--invert:hover { background: #fff; color: #000; box-shadow: var(--pc-shadow); }
.pc-vote-btn .pc-ico { width: 16px; height: 16px; flex: none; }
.pc-ticket-tab .pc-ico { opacity: .65; }
.pc-ticket-tab[aria-selected="true"] .pc-ico { opacity: 1; }
/* Two facts under the machine in the rail. A definition list rather than two
   sentences: the terms line up, so the eye finds the value without reading
   the label twice. */
.pc-nav-machine-facts {
  margin: .75rem 0 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .25rem .75rem;
  font-size: .75rem;
  line-height: 1.35;
}
.pc-nav-machine-facts dt { margin: 0; font-weight: 600; color: rgba(0, 0, 0, .6); }
.pc-nav-machine-facts dd { margin: 0; min-width: 0; }
.pc-nav-machine-fact {
  display: block;
  font-weight: 600;
  color: var(--pc-heading);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* The qualifier under the value, not beside it: it says how old the number is,
   which is part of what the number means and not a second fact. */
.pc-nav-machine-foot { display: block; color: rgba(0, 0, 0, .6); font-weight: 400; }
.pc-team-search .pc-ico {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pc-gray-500);
  pointer-events: none;
}
/* --- Billing page ------------------------------------------------------
   One card per entity, in the same shape the category and section pages use,
   so a reader who arrives here from the profile menu is not somewhere new. */
.pc-billing-head .pc-icon-badge { background: var(--pc-gray-100); }
/* The action sits at the foot of the card whatever the card above it holds. */
.pc-billing-card .pc-btn { margin-top: auto; align-self: flex-start; }
/* 28 — FOOTER ============================================================= */

/* The website's footer is white with no top rule. */
.pc-footer {
  margin-top: 4rem;
  background: var(--pc-bg);
  padding-block: 3rem 2rem;
}
.pc-footer-top {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--pc-border);
}
.pc-footer-brand { max-width: 30ch; }
.pc-footer-brand img { height: 28px; margin-bottom: .875rem; }
.pc-footer-tagline { font-size: .875rem; color: var(--pc-gray-600); margin: 0; line-height: 1.6; }
.pc-footer-links { display: flex; flex-wrap: wrap; gap: 2rem 3rem; }
.pc-footer-col h3 {
  font-family: var(--pc-font-heading);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.03em;
  color: rgba(0, 0, 0, .5);
  margin: 0 0 .75rem;
}
.pc-footer-col ul { list-style: none; margin: 0; padding: 0; }
.pc-footer-col li { margin-bottom: .4375rem; }
.pc-footer-col a {
  font-family: var(--pc-font-heading);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.03em;
  color: var(--pc-heading);
  transition: opacity .4s var(--pc-ease);
}
.pc-footer-col a:hover { opacity: .6; color: var(--pc-heading); }
.pc-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  font-size: .8125rem;
  color: var(--pc-gray-500);
}
.pc-lang .pc-dropdown-toggle {
  border-color: var(--pc-border);
  font-size: .8125rem;
  padding: .375rem .625rem;
}
/* Opening upward and to the left belongs to the footer and the mobile menu.
   In the strip it hangs from the button, right-aligned, or it opens off the
   edge of the screen. */
.pc-lang .pc-dropdown-menu { min-width: 180px; }
.pc-mobile-utils .pc-lang .pc-dropdown-menu,
.pc-footer .pc-lang .pc-dropdown-menu {
  inset-inline-end: auto;
  inset-inline-start: 0;
  top: auto;
  bottom: calc(100% + .5rem);
}
.pc-topbar .pc-lang .pc-dropdown-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
  top: calc(100% + .5rem);
  bottom: auto;
}
.pc-press { transition: var(--pc-transition); }
.pc-press:active { transform: scale(.95); }
.pc-skip {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 1000;
  padding: .75rem 1.25rem;
  background: var(--pc-primary);
  color: var(--pc-on-primary);
  border-radius: var(--pc-radius);
  font-weight: 600;
  transition: top .2s var(--pc-ease);
}
.pc-skip:focus { top: 1rem; text-decoration: none; }
/* The whole site header goes. Nothing should sit above the picture. */
body:has(.pc-cinema) .pc-header-wrap,
body:has(.pc-cinema) .pc-header-spacer,
body:has(.pc-cinema) .pc-launcher { display: none; }
body:has(.pc-cinema) .pc-footer {
  background: var(--pc-bg);
  border-top: 1px solid var(--pc-border);
}
body:has(.pc-cinema) .pc-footer-links { display: none; }
body:has(.pc-cinema) .pc-footer-tagline { color: var(--pc-gray-500); }
body:has(.pc-cinema) .pc-footer-logo-light { display: none; }
.pc-footer-logo-dark { display: none; }
body:has(.pc-cinema) .pc-footer-logo-dark { display: block; }
.pc-cinema .pc-article-cta .pc-icon-badge { background: rgba(255, 255, 255, .1); }
/* The white button needs its dark text back: the rule above sets the panel's
   colour to white, and that inherits straight into a white button. */
.pc-cinema .pc-article-cta .pc-btn--invert { color: var(--pc-heading); }
/* --- 36 · ICON SET -------------------------------------------------------
   The website draws its icons from the pixfort set: viewBox 2 2 20 20, three
   styles (Line, Duotone, Solid), colour and stroke fed by two custom
   properties. Declaring those here lets the markup be pasted from the design
   unchanged, so the icons cannot drift from it.
------------------------------------------------------------------------ */

.pc-ico {
  --pf-icon-color: currentColor;
  --pf-icon-stroke-width: 1.75;
  display: inline-block;
  vertical-align: middle;
  flex: none;
}
/* The status icon carries its own colour from the theme settings. */
.pc-ico.pc-status-ico { --pf-icon-color: #1F7A4D; }
.pc-post-aside .pc-btn { margin-top: .25rem; }
/* What belongs with what, in the instance rail. Sentence case and quiet: it is
   a divider that happens to have a word on it, not a heading competing with
   the doors under it. */
.pc-nav-doors-group {
  margin: 1rem 0 .25rem;
  /* The links' own padding, so the word starts where the words under it do.
     Two pixels here and twelve there put every heading a tenth of an inch to
     the left of its own list, which is exactly enough to look like a mistake. */
  padding: 0 .75rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--pc-gray-500);
}
.pc-nav-doors > .pc-nav-doors-group:first-child { margin-top: .5rem; }
/* The same gap a heading would have left, for a run that has no heading. */
.pc-nav-doors a.is-loose { margin-top: 1rem; }
.pc-contact-phone-number .pc-ico { width: 18px; height: 18px; }
/* Except the one that submits the form.
   The rule above gives every Garden button the website's second style -- a
   translucent fill, black on grey -- which is right for the buttons Zendesk
   scatters through a form, and wrong for the one the whole form is for. Next
   to our own black "next" button the Send button read as the quieter of the
   two, which is backwards.
   These are .pc-btn--primary's own declarations, not an approximation: the
   body font at 600 and a 1.8 line height, which with the 9px padding above
   lands on the same 43px as the call-to-action everywhere else. */
.pc-garden [data-garden-id="buttons.button"][data-garden-version][type="submit"] {
  background: var(--pc-primary);
  color: var(--pc-on-primary);
  font-family: var(--pc-font-body);
  font-weight: 600;
  letter-spacing: -.16px;
  line-height: 1.8;
}
/* Nothing to declare: it is `.pc-logo`, the same component as in the site's
   own header, and it should keep whatever that is given. Only the room it
   gives up on a narrow window belongs to the application. */
@media (max-width: 1100px) {
  /* The mark still leads out; the words beside it give up their room first. */
  .pc-app-home .pc-logo-suffix { display: none; }
}
/* Inside an instance the rail belongs to the instance: the way back out, the
   machine said properly, and then its doors. The body carries none of this any
   more, which is what stopped two back links stacking on one screen. */
.pc-nav-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3125rem;
  margin: 0 0 .625rem;
  padding: 0 .75rem;
  font-size: .75rem;
}
.pc-nav-trail a { padding: 0; border-radius: 0; font-size: inherit; font-weight: 500; color: var(--pc-gray-600); }
.pc-nav-trail a:hover { background: none; color: var(--pc-heading); text-decoration: underline; }
.pc-nav-trail-sep { color: var(--pc-gray-400, var(--pc-gray-600)); }
.pc-nav-machine {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 0 0 .625rem;
  padding: 0 .75rem .75rem;
  border-bottom: 1px solid var(--pc-border);
}
/* The badge the cards use, at rail size. */
.pc-nav-machine-badge { flex: none; width: 2rem; height: 2rem; border-radius: 8px; }
.pc-nav-machine-badge svg, .pc-nav-machine-badge img { width: 1.125rem; height: 1.125rem; }
.pc-nav-machine-said { display: flex; flex-direction: column; gap: .1875rem; min-width: 0; }
.pc-nav-machine-host {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--pc-heading);
  overflow-wrap: anywhere;
}
.pc-nav-machine-under {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  font-size: .75rem;
  color: var(--pc-gray-600);
}
/* Up or not, as a dot rather than a word competing with the hostname. */
.pc-nav-machine-state { display: inline-flex; align-items: center; gap: .3125rem; }
.pc-nav-machine-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pc-gray-400, #a1a1aa);
}
.pc-nav-machine-state.is-on::before { background: #1f7a4d; }
/* Beside the content this is simply the rest of the rail. */
.pc-nav-doors { display: flex; flex-direction: column; gap: 2px; }
/* A mark in every row. The link was a bare text node; with a mark beside it,
   the two have to be laid out rather than left to flow, or the word sits on
   the icon's baseline and every row reads a pixel low.

   `flex: none` on the mark because a long door name must take the space from
   the text, never from the icon -- a keypad squeezed to eleven pixels wide is
   a different drawing. */
.pc-nav-doors a { display: flex; align-items: center; gap: .625rem; }
.pc-nav-doors-ico { flex: none; opacity: .75; }
.pc-nav-doors a:hover .pc-nav-doors-ico,
.pc-nav-doors a[aria-current="page"] .pc-nav-doors-ico { opacity: 1; }
/* The switcher's control and, for a reader with one organisation, the caption
   that stands in its place. One box, so the corner of the bar does not change
   shape depending on how many organisations somebody happens to belong to.
   `.pc-orgcaption` differs only in what it does not do: no pointer, no hover,
   no caret. */
.pc-orgswitch .pc-dropdown-toggle,
.pc-orgcaption {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  /* Two lines now, so the control is a block rather than a word: tinted like
     every other surface in the area, at the site's 10px corner. */
  padding: .375rem .625rem;
  border: 0;
  border-radius: var(--pc-radius);
  background: var(--pc-gray-100);
  font-family: var(--pc-font-body);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -.16px;
  color: var(--pc-heading);
  max-width: 100%;
}
.pc-orgswitch .pc-dropdown-toggle { cursor: pointer; transition: var(--pc-transition); }
/* So the menu takes the width of the longest name instead of forcing the
   names to fit a fixed one. */
.pc-orgswitch .pc-dropdown-menu { width: max-content; max-width: min(24rem, calc(100vw - 2rem)); }
.pc-verify-card .pc-btn--primary { justify-self: start; margin-top: .625rem; }
.pc-instance-card .pc-icon-badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--pc-radius);
  background: var(--pc-surface);
  color: var(--pc-heading);
}
.pc-numbers-filter .pc-ico {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pc-gray-500);
  pointer-events: none;
}
.pc-hub-link .pc-icon-badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: .5rem;
  border-radius: var(--pc-radius);
  background: var(--pc-gray-100);
  color: var(--pc-heading);
}
/* Fourteen pixels of hairline in a thirty-four pixel tile read as an empty
   tile. The mark takes the room it was given, and a touch more weight so the
   thin ones survive being small. Presentation attributes lose to CSS, which
   is how stroke-width can be set from here at all. */
.pc-hub-link .pc-icon-badge .pc-instance-ico {
  width: 19px;
  height: 19px;
  stroke-width: 1.85;
}
.pc-signin-first .pc-btn { flex: none; }
/* A button that cannot be pressed has to look it. The primary one is solid
   black, which reads as the most pressable thing on the page — exactly wrong
   for the one control that is waiting on something else. */
.pc-btn:disabled,
.pc-btn[disabled] {
  opacity: .45;
  cursor: default;
  box-shadow: none;
}
.pc-btn:disabled:hover,
.pc-btn[disabled]:hover { opacity: .45; }
.pc-callflows-empty .pc-btn { margin-top: .5rem; }
/* The search sets `hidden` on the cards it filters out, and the rule above
   declares a display, which beats the browser's own [hidden] rule outright.
   Without this the box takes the word and the list never changes -- the
   search looked like it did nothing at all. Same trap as .pc-btn and
   .pc-datatools: any rule here that declares a display needs its guard. */
.pc-flow-kindpick[hidden] { display: none; }
.pc-callflows-empty .pc-btn { margin-top: .75rem; }
/* The status link in the footer. Deliberately an ordinary link with words in
   it: the pill in the top bar is built by script and carries only an
   aria-label, so nothing crawlable pointed at the status page. */
.pc-footer-status {
  color: var(--pc-gray-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.pc-footer-status:hover,
.pc-footer-status:focus-visible {
  color: var(--pc-gray-800);
  border-bottom-color: currentColor;
}
/* De rail zelf. `.pc-breed` deed dit al voor de inhoud, maar de schil van het
   helpcentrum rekent met `.pc-container`, en zijn kop rekent bovendien met
   `--pc-container` en `--pc-gutter`. Die stonden hier op 1400 en 16 waar de
   merkbron én het helpcentrum 1420 en 20 zeggen — mijn eigen afwijking, en met
   de overgenomen kop werd hij zichtbaar. Nu gelijk. */
.pc-container {
  width: 100%;
  max-width: var(--pc-container);
  margin-inline: auto;
  padding-inline: var(--pc-gutter);
}

/* De hoogte van de hoofdknop, uit dezelfde bron: 9 + 25,2 + 9. */
:root { --pc-btn-h: 43px; }

/* ── the shell's responsive half ───────────────────────────────────────────
   Nearly shipped without this. The first pass walked the theme's top-level
   rules and skipped everything inside an `@media`, so the shell came over with
   no behaviour below a desk monitor at all: the navigation never gave way, the
   burger never appeared, and five category names broke over two lines from
   about 1050px down.

   Their switch point is 1099px, and it turns out to be exactly right here too —
   that is the width where five names stop fitting. Taken over rather than
   picked. */
@media (max-width: 1099px) {
  .pc-nav-menu { display: none; }
}

@media (max-width: 1099px) {
  .pc-nav, .pc-header-divider, .pc-header-actions .pc-hide-mobile { display: none; }
}

@media (max-width: 1099px) {
  .pc-menu-toggle { display: inline-flex; }
  /* Below the website's own switch point the header stops being a floating
     pill: measured there it is a full-bleed white bar, square corners, 8px of
     padding around a 40px logo — 56px in total, at rest and when scrolled.
     The menu is a panel inside that bar rather than a screen-filling overlay,
     so the page keeps its scroll position behind it. */
  .pc-header {
    width: 100%;
    height: auto;
    padding-block: 8px;
    border-radius: 0;
  }
  /* The website's mobile bar keeps the page's own 20px rail. */
  .pc-header-inner { height: 40px; padding-inline: var(--pc-gutter); }
  .pc-header-wrap.is-scroll .pc-header {
    top: 0;
    height: auto;
    border-radius: 0;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .15);
  }
  .pc-header-wrap.is-scroll .pc-header-inner { padding-inline: var(--pc-gutter); }
  /* Solid rather than frosted, as on the website's mobile bar. */
  .pc-header-wrap.is-scroll .pc-header::before,
  body.pc-menu-open .pc-header::before {
    background: var(--pc-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.pc-menu-open .pc-header { box-shadow: 0 1px 5px rgba(0, 0, 0, .15); }
  .pc-header-wrap.is-scroll .pc-header-spacer { height: 56px; }
  /* In flow inside the header, so opening it grows the bar the way the
     website's does. Hidden outright when closed — a merely invisible panel
     would still hold its height open. */
  .pc-mobile-nav {
    /* Relative rather than static: the header paints its white backing in an
       absolutely positioned ::before, which would otherwise cover the panel. */
    position: relative;
    inset: auto;
    display: none;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    z-index: auto;
  }
  .pc-mobile-nav.is-open { display: block; }
  /* The header's own logo and toggle stay in view, so the drawer's copy of
     them is redundant. */
  .pc-mobile-bar { display: none; }
  .pc-mobile-body {
    /* This help center's menu carries more than the website's six items, so
       it keeps its own scroll for the case where it outgrows the screen. */
    /* At rest the bar hangs below the 41px strip; once it detaches it starts
       at the top. Either way the panel stays on screen and scrolls itself. */
    max-height: calc(100dvh - 41px - 56px);
    overflow-y: auto;
    padding: 0 var(--pc-gutter) 8px;
  }
  /* The burger becomes the close button, as on the website. */
  .pc-header-wrap.is-scroll .pc-mobile-body { max-height: calc(100dvh - 56px); }
  /* Everything the strip carried now lives in the menu, so on a phone it is
     only a second row of the same things. The website has no strip here at
     all. */
  .pc-topbar { display: none; }
  /* The accordion under Knowledge base. The website indents its children 25px
     and drops them to 500 against the parent's 600. */
  /* The caret sits beside the word it belongs to, the way the website sets it:
     measured there, "Products" ends at 78px and its caret starts at 80. Ours
     was stretched to the far edge by space-between with a flex:1 link, which
     left a chevron floating 250px from the label it opens and read as a
     separate control rather than as part of the item.
     The 44px touch target stays, and the button begins exactly where the label
     ends: the glyph is aligned to its leading edge instead of centred in it, so
     it lands 2px after the text -- the website's gap -- without the button
     reaching back over the last letters. Pulling it back with a negative margin
     also put the caret in the right place, but the target then covered the tail
     of the word, and tapping "Kennisbank" there opened the submenu instead of
     following the link. */
  .pc-mobile-row { display: flex; align-items: center; }
  .pc-mobile-row > a { flex: 0 1 auto; }
  .pc-mobile-expand {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 44px;
    height: 44px;
    padding-inline-start: 2px;
    border: 0;
    background: none;
    color: var(--pc-heading);
    cursor: pointer;
  }
  .pc-mobile-expand[aria-expanded="true"] .pc-nav-caret { transform: rotate(180deg); }
  .pc-mobile-expand .pc-nav-caret { transition: transform .3s var(--pc-ease); }
  .pc-mobile-sub[hidden] { display: none; }
  /* Scoped under .pc-mobile-nav to outrank the general menu-item rule. */
  .pc-mobile-nav .pc-mobile-sub a {
    display: block;
    padding: 8px 0 8px 25px;
    font-family: var(--pc-font-body);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.16px;
    color: var(--pc-heading);
  }
  /* Status and language close the menu, set apart from the navigation above. */
  .pc-mobile-utils {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--pc-gray-100);
  }
  .pc-mobile-nav a.pc-mobile-util,
  .pc-mobile-util .pc-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border: 0;
    background: none;
    font-family: var(--pc-font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.14px;
    color: var(--pc-gray-600);
    cursor: pointer;
  }
  /* Opens upward and inside the screen rather than off the right edge. */
  .pc-mobile-utils .pc-dropdown-menu {
    inset-inline: 0 auto;
    top: auto;
    bottom: calc(100% + .5rem);
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - var(--pc-gutter) * 2);
  }
  .pc-menu-toggle .pc-ico-close { display: none; }
  .pc-menu-toggle[aria-expanded="true"] .pc-ico-burger { display: none; }
  .pc-menu-toggle[aria-expanded="true"] .pc-ico-close { display: block; }
}

@media (max-width: 640px) {
  .pc-band-icon .pc-icon { width: var(--pc-app-fill, 22px); height: var(--pc-app-fill, 22px); }
}

@media (hover: hover) {
  .pc-ticket-tab:hover .pc-ico { opacity: 1; }
}

@media (max-width: 480px) {
  .pc-modal-actions .pc-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-btn:hover, .pc-card-link:hover,
  .pc-fly:hover, .pc-fly-sm:hover, .pc-popular a:hover { transform: none; }
}

@media print {
  .pc-topbar, .pc-header, .pc-footer, .pc-subnav,
  .pc-tree-col, .pc-toc-col, .pc-vote, .pc-share,
  .pc-comments, .pc-related { display: none !important; }
}

@media (max-width: 599px) {
  .pc-timeline-mark .pc-ico { width: 12px; height: 12px; }
}

@media (max-width: 900px) {
  .pc-nav-machine { margin-bottom: .5rem; padding-bottom: .5rem; }
  .pc-nav-machine-host { overflow-wrap: normal; }
  .pc-nav-doors {
    flex-direction: row;
    gap: .25rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pc-nav-doors::-webkit-scrollbar { display: none; }
  .pc-nav-doors a { white-space: nowrap; }
}

@media (hover: hover) {
  .pc-orgswitch .pc-dropdown-toggle:hover { background: var(--pc-gray-200); }
}
/* ── the hero, on the help center's own frame ──────────────────────────────
   What stood here was a photograph laid in as a background behind the text and
   a paragraph with a button under it. The help center does something better and
   it is better for a shop too: the picture is its own rounded column beside the
   words, and under the heading sits a search field with the categories as chips
   below it.

   That matters more here than there. Somebody who lands on a shop from a search
   engine has one question — do you have this — and the old hero answered it with
   a paragraph and a button that scrolled down to a list. Now the first thing
   under the heading is the field that answers it.

   Their chips are built by script from a data attribute. Here they are plain
   links to the category pages: a crawler follows those, and this page exists to
   be found. */
/* 06 — FORMS ======================================================== */

/* The website's field, from .form-control in pixfort-core-style.css: no
   border, a single soft shadow, and the button's 9px/18px at 14px. Every form
   in the help center runs through here -- a new community post, a comment on
   an article, a reply on a ticket -- so this is the one place that decides
   what a pluscloud field looks like. The ticket form is React and has to be
   told the same thing separately, in section 22.
   The search field is not affected: .pc-search styles it as its own component
   further down, and wins on specificity. */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"], input[type="number"],
input[type="date"], input[type="time"], input[type="datetime-local"],
textarea, select {
  width: 100%;
  font-family: var(--pc-font-body);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--pc-field-text);
  background: var(--pc-bg);
  border: 0;
  border-radius: var(--pc-radius);
  /* Two layers at rest, the second one transparent, so that focus only has to
     change its colour. A box-shadow that grows from one layer to two cannot be
     interpolated: the browser holds the starting value and the ring never
     appears at all -- which is invisible in a screenshot and very visible to
     anyone using a keyboard. */
  box-shadow: var(--pc-field-shadow), 0 0 0 .2rem transparent;
  padding: 9px 18px;
  transition: box-shadow .2s var(--pc-ease);
}
/* --- Search trigger ------------------------------------------------------ */

/* The website's is a bare glyph, not a field or a pill: 18px icon inside
   18px of padding, 54x51. The ⌘K shortcut still works, it is just no longer
   advertised in the bar. */
.pc-search-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 51px;
  padding-inline: 18px;
  border: 0;
  border-radius: var(--pc-radius);
  background: none;
  color: var(--pc-gray-600);
  cursor: pointer;
  transition: var(--pc-transition);
}
.pc-search-toggle .pc-kbd-hint { display: none; }
.pc-search-toggle:hover { color: var(--pc-heading); }
/* 09 — SEARCH ============================================================ */

.pc-search { position: relative; width: 100%; }
.pc-search input[type="search"] {
  width: 100%;
  height: 60px;
  font-size: 1.0625rem;
  font-weight: 500;
  padding-inline: 3.25rem 1.5rem;
  border-radius: var(--pc-radius-pill);
  border: 1px solid transparent;
  background: var(--pc-bg);
  box-shadow: var(--pc-shadow);
  /* A long placeholder — Zendesk's own is a full question — fades out on the
     narrowest phones instead of being cut mid-letter. */
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow .4s var(--pc-ease), transform .4s var(--pc-ease);
}
.pc-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.pc-search input[type="search"]:focus {
  box-shadow: var(--pc-shadow-lg);
  border-color: transparent;
  transform: translateY(-2px);
}
.pc-search input[type="search"]::placeholder { color: var(--pc-gray-400); font-weight: 500; }
.pc-search .pc-search-icon {
  position: absolute;
  inset-inline-start: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pc-gray-500);
  pointer-events: none;
  z-index: 2;
  transition: color .4s var(--pc-ease);
}
.pc-search:focus-within .pc-search-icon { color: var(--pc-heading); }
/* Compact variant, used in the floating header panel and scoped bands. */
.pc-search--sm input[type="search"] {
  height: 46px;
  font-size: .9375rem;
  padding-inline: 2.75rem 1rem;
  border-radius: var(--pc-radius);
  box-shadow: none;
  background: var(--pc-gray-100);
}
.pc-search--sm input[type="search"]:focus {
  background: var(--pc-bg);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
  transform: none;
}
.pc-search--sm .pc-search-icon { inset-inline-start: .9375rem; }
/* One column by default; a photo turns it into the site's text-left,
   visual-right composition. */
.pc-hero-grid { position: relative;
}
.pc-hero-visual {
  border-radius: var(--pc-radius);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06), 0 24px 48px rgba(76, 40, 130, .18);
  aspect-ratio: 4 / 3;
}
.pc-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pc-hero--image .pc-hero-grid { width: 100%; }
/* The field is the one thing people came to use: solid, never frosted. */
.pc-hero--image .pc-search input[type="search"] {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12), 0 20px 44px rgba(0, 0, 0, .2);
}
.pc-hero--image .pc-search input[type="search"]::placeholder { color: var(--pc-gray-500); }
/* Chips get a touch more body so they hold up over a photograph. */
.pc-hero--image .pc-popular a {
  background: rgba(255, 255, 255, .88);
  color: var(--pc-heading);
}
.pc-hero--image .pc-popular a:hover { background: #fff; }
.pc-hero-sub + .pc-hero-search { margin-top: 0; }
.pc-hero h1:has(+ .pc-hero-sub) { margin-bottom: .625rem; }
.pc-hero-sub {
  font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
  line-height: 1.6;
  color: rgba(0, 0, 0, .66);
  max-width: 40ch;
  margin: 0 0 2rem;
}
.pc-hero-search { max-width: 34rem; }
.pc-hero-search .pc-search input[type="search"] {
  height: 64px;
  font-size: 1.0625rem;
  padding-inline: 3.5rem 1.5rem;
  border-radius: var(--pc-radius);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 18px 40px rgba(76, 40, 130, .16);
}
.pc-hero-search .pc-search input[type="search"]:focus {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 22px 50px rgba(76, 40, 130, .22);
}
.pc-hero-search .pc-search .pc-search-icon { inset-inline-start: 1.375rem; }
.pc-search-kbd {
  position: absolute;
  inset-inline-end: 1.125rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  background: var(--pc-gray-100);
  color: var(--pc-gray-500);
}
.pc-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.125rem;
  max-width: 34rem;
}
.pc-popular a {
  font-size: .8125rem;
  font-weight: 600;
  padding: .375rem .75rem;
  border-radius: var(--pc-radius-pill);
  background: rgba(255, 255, 255, .72);
  color: var(--pc-gray-700);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: var(--pc-transition);
}
.pc-popular a:hover {
  background: var(--pc-bg);
  color: var(--pc-heading);
  text-decoration: none;
  transform: translateY(-2px);
}
.pc-subnav .pc-search { max-width: 320px; }
/* --- Search page --------------------------------------------------------- */

.pc-search-band { margin-bottom: 2.5rem; }
.pc-search-band h1 { margin-bottom: 1rem; }
.pc-search--band { max-width: 640px; }
.pc-search--band input[type="search"] {
  height: 52px;
  font-size: 1rem;
  padding-inline: 3rem 1.25rem;
  border-radius: var(--pc-radius);
  border-color: var(--pc-border);
  box-shadow: none;
  background: var(--pc-bg);
}
.pc-search--band input[type="search"]:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
  transform: none;
}
.pc-search--band .pc-search-icon { inset-inline-start: 1.0625rem; }
.pc-search-band .pc-results-count { margin: .875rem 0 0; }

@media (min-width: 960px) {
  .pc-hero-grid.has-visual {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
  .pc-hero-grid.has-visual .pc-hero-inner { max-width: none; }
  .pc-hero-grid.has-visual .pc-hero-sub,
  .pc-hero-grid.has-visual .pc-hero-search,
  .pc-hero-grid.has-visual .pc-popular { max-width: none; }
}

@media (max-width: 959px) {
  .pc-hero-visual { display: none; }
}

@media (max-width: 400px) {
  .pc-search input[type="search"],
  .pc-hero-search .pc-search input[type="search"] {
    font-size: 1rem;
    padding-inline: 2.75rem 1rem;
  }
  .pc-search .pc-search-icon { inset-inline-start: 1rem; }
}

@media (max-width: 640px) {
  .pc-search-kbd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-btn:hover, .pc-card-link:hover,
  .pc-fly:hover, .pc-fly-sm:hover, .pc-popular a:hover { transform: none; }
}
/* Het kruisje in het hero-zoekveld, gespiegeld aan het icoon links. */
.pc-search-wis {
  position: absolute; inset-inline-end: 1.25rem; top: 50%; transform: translateY(-50%);
  z-index: 2; font-size: 20px; line-height: 1; text-decoration: none;
  color: var(--pc-gray-500);
}
.pc-search-wis:hover { color: var(--pc-heading); }

/* Het omhulsel om label en keuzelijst. `.pc-sorteer` hoort op de `<select>` —
   die klasse tekent de pijl en de hoogte — maar stond op het `<form>`, waardoor
   de lijst zelf ongestyled onder zijn label zakte. Viel pas op toen het tweede
   zoekveld uit deze balk verdween en er niets meer naast stond. */
.pc-sorteerbalk { display: flex; align-items: center; gap: 10px; flex: none; }
.pc-sorteerbalk label { font-size: 14px; font-weight: 500; color: var(--pc-gray-600); white-space: nowrap; }

/* ── de kaart, op de maten van de winkel in Mijn pluscloud ─────────────────
   De naam liep vrij door over één tot drie regels, waardoor de foto's op
   verschillende hoogtes begonnen. Twee regels, dan afkappen — hun oplossing, om
   dezelfde reden: deze namen lopen tot elf woorden.

   Wat hier NIET verandert is de verhouding van het beeldvlak. Ik had hem op
   vierkant gezet omdat het helpcentrum dat doet, en dat was fout: er staat een
   regel hierboven die uitlegt waarom het hier vier op drie is. Hun demo's tonen
   bijgesneden productfoto's van 300x300; wij krijgen brede banners van Wildix
   die we niet mogen bijsnijden, en in een vierkant blijft daar een streep beeld
   met wit erboven en eronder van over. Die keuze was al met onze eigen foto's
   genomen en hoort te blijven staan. */
.pc-naamknop {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bijschrift, geen etiketten. */
.pc-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12px; color: var(--pc-gray-600);
}
.pc-card-sku { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pc-gray-400); }

/* De plek van de prijs, met het gewicht van een prijs. */
.pc-card-prijs { font-size: 14px; font-weight: 600; color: var(--pc-heading); }

/* ── documenten en verwante producten ─────────────────────────────────────
   Onderaan de productpagina stonden twee opsommingen met bolletjes: de
   documenten en de toestellen waar dit ding op past. Op een pagina waar de
   specificaties een strakke tabel zijn en het beeld een eigen kolom heeft, las
   dat als een restant — en het is juist het deel dat een bezoeker verder helpt.

   De documentrij komt van het helpcentrum, inclusief de reden die er staat: een
   rij identieke blauwe links laat de lezer drie pdf's openen om de handleiding
   te vinden. Vandaar het soort eronder.

   De verwante producten zijn kaarten geworden. Niet alleen omdat het beter
   leest — voor een pagina die gevonden moet worden zijn dit de interne links
   waarlangs een zoekmachine de rest van de catalogus bereikt. */

.pc-docs { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; max-width: 44rem; }
.pc-doc-link {
  display: flex; align-items: center; gap: .75rem; padding: .75rem;
  border-radius: var(--pc-radius); background: var(--pc-gray-100);
  text-decoration: none; transition: background-color .4s var(--pc-ease);
}
.pc-doc-link:hover { background: var(--pc-gray-200); text-decoration: none; }
.pc-doc-mark {
  flex: 0 0 auto; width: 2rem; height: 2rem;
  border-radius: calc(var(--pc-radius) - 4px); background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--pc-gray-600);
}
.pc-doc-text { display: flex; flex-direction: column; gap: .0625rem; min-width: 0; }
.pc-doc-name { font-size: .875rem; font-weight: 500; color: var(--pc-heading); overflow-wrap: anywhere; }
.pc-doc-kind { font-size: .75rem; color: var(--pc-gray-600); }

.pc-verwant {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .75rem; margin: 0; padding: 0; list-style: none; max-width: 44rem;
}
.pc-verwant-kaart a {
  display: flex; align-items: center; gap: .75rem; padding: .625rem;
  border-radius: var(--pc-radius); background: var(--pc-gray-100);
  text-decoration: none; transition: background-color .4s var(--pc-ease);
}
.pc-verwant-kaart a:hover { background: var(--pc-gray-200); text-decoration: none; }
.pc-verwant-plaat {
  flex: 0 0 auto; width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(var(--pc-radius) - 4px); background: #fff; overflow: hidden;
}
.pc-verwant-plaat img { max-width: 84%; max-height: 84%; object-fit: contain; }
.pc-verwant-tekst { display: flex; flex-direction: column; gap: .0625rem; min-width: 0; }
.pc-verwant-naam {
  font-size: .875rem; font-weight: 500; color: var(--pc-heading); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-verwant-sku { font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pc-gray-400); }

/* De werkbalk: bediening links, telling rechts, op één regel. */
.pc-filterrij { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 18px; }
.pc-telling { margin: 0 0 0 auto; font-size: 13px; color: var(--pc-gray-500); }

/* De plek waar geen foto is. Zichtbaar leeg, niet kapot: het teken staat er
   altijd en de foto ligt erbovenop; valt die weg, dan komt het vanzelf terug. */
.pc-geenfoto {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--pc-gray-300); font-size: 12px;
}
.pc-card .pc-plaat img { position: relative; z-index: 1; background: var(--pc-gray-50); }

/* ── voorraad, in de vorm van Mijn pluscloud ───────────────────────────────
   De chip was hier een pil van 16px in een eigen groen, en het detail een
   gekleurd blok met een vetgedrukte kop. Daar is het een vierkante chip die
   alleen groen wordt als het bij óns op de plank ligt, met eronder een
   tweekolomsraster dat per regel zegt wiens voorraad je leest.

   `align-self: flex-start` staat in hun regel met de reden erbij, en die geldt
   hier net zo goed: zonder dat rekt de chip mee met het koopvlak en leest hij
   als een lege groene balk. */
.pc-chip {
  display: inline-flex; align-self: flex-start; align-items: center;
  padding: .3125rem .625rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, .05);
  font-size: .75rem; font-weight: 600; line-height: 1;
  color: rgba(0, 0, 0, .5);
  white-space: nowrap;
}
/* Alleen de eigen plank krijgt kleur. "Uit EU-magazijn" is geen waarschuwing. */
.pc-chip--stock.is-here { background: #e8f5ee; color: #1f7a4d; }

.pc-stockdetail {
  display: grid; grid-template-columns: auto 1fr;
  gap: .1875rem .75rem; margin: .25rem 0;
  font-size: .75rem;
}
.pc-stockdetail dt { color: var(--pc-gray-400); }
.pc-stockdetail dd { margin: 0; color: var(--pc-gray-600); }

/* Het merk als getinte chip, zoals in Mijn pluscloud. `display: inline-block`
   overschrijft de `inline-flex` van `.pc-chip`, want anders knipt de puntjes-
   afkapping niet — dat is ook hoe zij het doen. Een lange merknaam mag de kaart
   niet uit elkaar duwen. */
.pc-merkchip {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── de filterrij van het helpcentrum ─────────────────────────────────────
   Hier stond een keuzelijst van 220px met een eigen pijltje: een vorm die
   nergens anders in deze winkel voorkomt, en die op drie opties meer ruimte
   kost dan de opties zelf. Het helpcentrum zet ze als rij tekstknoppen met een
   onderstreping op de actieve, gescheiden van de telling door een haarlijn
   onder de hele rij. */
.pc-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--pc-border);
}
.pc-filters a {
  font-size: .8125rem; font-weight: 600;
  padding: .375rem .875rem;
  border-radius: var(--pc-radius-pill);
  border: 1px solid var(--pc-border);
  background: var(--pc-bg);
  color: var(--pc-gray-600);
  text-decoration: none;
  transition: color .4s var(--pc-ease), border-color .4s var(--pc-ease);
}
.pc-filters a:hover { color: var(--pc-heading); border-color: var(--pc-gray-400); text-decoration: none; }

/* De sorteerkeuze is geen filter maar een volgorde, en draagt daarom geen pil:
   borderloos, en actief met een streep eronder in plaats van een vulling. Zo
   blijft de zwarte vulling voorbehouden aan een keuze die iets wegfiltert. */
.pc-filters .pc-sorter { background: none; border-color: transparent; }
.pc-filters .pc-sorter:hover { color: var(--pc-heading); border-color: transparent; }
.pc-filters .pc-sorter.is-active {
  background: none; border-color: transparent;
  color: var(--pc-heading); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--pc-heading);
  border-radius: 0;
}
.pc-filters .pc-telling { margin-inline-start: auto; }

/* Eén vorm voor de kop boven de lijst, of hij nu h1 of h2 is. Welke van de
   twee hangt af van de pagina: met hero draagt de hero de h1, zonder hero
   draagt deze hem. */
.pc-lijstkop {
  font-size: clamp(22px, 2.6vw, 32px);
  margin: 0 0 6px;
  font-weight: 500;
}

/* De prijsplek. Zelfde maat en gewicht als `.pc-product-price` in Mijn
   pluscloud, maar in het grijs — daar staat een bedrag, hier een mededeling,
   en die mag niet lezen als een getal dat er toevallig niet is. */
.pc-product-prijs {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--pc-gray-600);
}