/* Pagina-eigen stijl van de shop. Letterlijk overgenomen uit het
   <style>-blok van design/shop.html; het gedeelde systeem staat in
   hcf.css. Niets aan veranderd. */
  /* ---------- DIRECTION 3 · WEBSHOP ---------- */
  .wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 20px; }

  /* header */
  header.shop-top{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    gap:14px; padding:26px 0 18px;
  }
  /* the nav moved to the corner cluster; brand + cart keep their columns */
  header.shop-top .brand{ grid-column:2; justify-self:center; text-align:center; }
  /* 170px beeld met 76,9% inktvulling = 131px zichtbare letters; bij deze
     lockup hoort daar font-size 51px bij. */
  header.shop-top .brand .hcf-type{ font-size:51px; }
  header.shop-top .right{ grid-column:3; justify-self:end; }
  .cartbtn{
    display:inline-flex; align-items:center; gap:9px;
    background:transparent; border:1px solid var(--line-2); color:var(--white);
    font-family:var(--mono); text-transform:uppercase; letter-spacing:.2em; font-size:11px;
    padding:10px 13px; cursor:pointer; min-height:42px;
  }
  .cartbtn:hover{ border-color:var(--white); }
  /* Het tas-icoon. currentColor in het SVG, dus kleur en hover volgen de knop
     vanzelf — daarom staat het inline in de markup en niet als <img>.
     De gap van .cartbtn is 9px en dat is te ruim tussen een icoon en z'n eigen
     label; -4px trekt het terug naar 5px zonder de afstand tot [0] te raken. */
  .cartbtn .tas-icoon{
    width:14px; height:14px; flex:0 0 auto; display:block;
    /* De gap van .cartbtn is 9px en dat is te ruim tussen een icoon en z'n
       eigen label; -4px trekt het terug naar 5px zonder de afstand tot [0] te
       raken. */
    margin-right:-4px;
    /* Optisch uitlijnen op de KAPITALEN, niet op de regelbox. align-items:center
       centreert het icoon op het volledige regelvak, en dat vak heeft ruimte
       voor staartletters die er in "TAS" niet zijn — gemeten stond het icoon
       daardoor 0,88px te laag.

       Met position:relative en niet met een negatieve margin-top: bij
       align-items:center wordt de MARGIN-box gecentreerd, dus een margin-top
       van -1px duwt het icoon juist 1,5px omláág. Deze weg verschuift alleen
       de tekening en laat de layout met rust. */
    position:relative; top:-1px;
  }
  .cartbtn b{ font-weight:700; }

  .shop-head{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:16px; padding:22px 2px 18px; border-top:1px solid var(--line);
  }
  .shop-head .t{ font-family:var(--gothic); font-weight:400; font-size:26px; letter-spacing:.03em; }

  /* grid */
  /* De kaarten stonden als tegels tegen elkaar aan, met 2px gap op een
     --line-achtergrond als hairline ertussen. Dat las als één plaat. Nu staan
     ze los op het canvas: geen eigen achtergrond en geen omranding meer, dus
     de ruimte ertussen is gewoon de pagina — en flitst dus mee. */
  .grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
    margin-bottom:70px;
  }
  /* Hairline via outline en niet via box-shadow: die eigenschap draagt het
     hele strobe-systeem — elke beschermende band is een box-shadow met spread.
     outline staat bovendien buiten het boxmodel, dus de kaart houdt exact zijn
     maat. Zelfde token en aanpak als het kader om de foto's in de feed.

     De gloed staat wél op box-shadow, en dat kan hier veilig: .card krijgt
     nergens een beschermende band. Zijn bescherming tijdens de strobe komt van
     de lift naar z 2 plus de eigen dekkende --ink-vulling, niet van een halo.
     LET OP als dat ooit verandert: box-shadow vervangt zichzelf, dus een band
     erbij moet in DEZE declaratie met een komma — een tweede box-shadow-regel
     op .card gooit de gloed weg (of andersom, afhankelijk van de volgorde).

     Blur zonder offset en zonder spread: geen slagschaduw maar een gloed, en
     spread nul houdt de "raken banden elkaar"-test schoon, want die telt
     alleen schaduwen met spread als band. */
  .card{ background:var(--ink); cursor:pointer; display:flex; flex-direction:column;
    outline:1px solid var(--line-2);
    box-shadow:0 0 26px var(--glow); }
  .card .tile{
    position:relative; aspect-ratio:4/5; overflow:hidden; background:#100f0c;
  }
  .card .tile img{
    width:100%; height:100%; object-fit:cover; object-position:center 45%;
    transition:transform .5s ease, filter .4s;
    filter:grayscale(.1);
  }
  .card:hover .tile img{ transform:scale(1.05); filter:grayscale(0); }
  /* z-index is nodig, niet decoratief: .card .tile img heeft een filter, en
     een filter maakt van dat beeld een stacking context. Daardoor komt de foto
     in dezelfde verflaag als deze absoluut gepositioneerde badge en schildert
     hij er in DOM-volgorde overheen. Zonder deze regel staat de badge er wel,
     maar zie je hem nooit. */
  /* Product zonder foto's: een leeg vak in plaats van een gebroken beeld. Mét
     verhouding, anders is de tegel 0px hoog (de hoogte kwam van het beeld) en
     klapt de kaart in elkaar tot een regel tekst. 4/5, hetzelfde als het vak op
     de productpagina. */
  .card .tile--leeg{ background:#100f0c; aspect-ratio:4/5; }
  .card .meta{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
  .card .nm{ font-family:var(--gothic); font-weight:400; font-size:21px; line-height:1.05; letter-spacing:.02em; }
  .card .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
  .card .pr{ font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--bone); }
  /* Een echte <button> sinds review 8.4 (was een <span>). Dezelfde maat en
     letter; alleen de eigen opmaak van de browser gaat eraf. Met het
     toetsenbord erop keert hij om, net als bij hover. */
  .shopmini{
    font-family:var(--gothic); font-weight:400; font-size:18px;
    border:1px solid var(--line-2); padding:5px 16px; color:var(--white);
    background:none; margin:0; line-height:inherit; letter-spacing:inherit; cursor:pointer;
    transition:background .15s,color .15s,border-color .15s;
  }
  .card:hover .shopmini,
  .shopmini:focus-visible{ background:var(--white); color:var(--ink); border-color:var(--white); }

  /* footer */
  footer.shop-foot{ border-top:1px solid var(--line); padding:26px 0 70px; text-align:center; }
  footer.shop-foot .label{ display:block; margin-bottom:12px; }
  footer.shop-foot .tlink{ margin:0 8px; }

  /* ========= STROBOSCOOP — shop-specifieke leesbaarheid =========
     De shop is geen canvas met losse blokken erop zoals de blog. Het raster
     vult vrijwel het hele scherm, dus daar groeien --ink-kaders aan elkaar
     tot één doorlopend zwart vlak en zie je juist NIET meer dat er geflitst
     wordt. Hier is de content het canvas.

     De hero had hetzelfde probleem — beeldvullende content — en lost het op
     door de flits te TEMPEREN in plaats van te blokkeren. Daarvoor moet hij
     ertússen kunnen liggen, en dus mag de container geen eigen stacking
     context hebben: #hero houdt om precies die reden z-index:auto. De
     gedeelde regel in hcf.css zet .wrap op z 2, wat op de blog klopt maar
     hier alles boven de flits tilt. Op de shop draaien we dat terug.

     Resultaat: #strobe op z 1 valt over het raster, de kaarten en de foto's;
     alleen wat gelezen moet worden steekt er met z 2 bovenuit.

     Halo's altijd via box-shadow, nooit via padding — padding zit in het
     boxmodel en laat de pagina verspringen zodra de strobe aangaat. */
  body.page-shop.strobing .wrap{ z-index:auto; }

  /* Eén beschermd blok per kaart: beeld en tekst samen. Losse banden om naam,
     prijs en knop versplinterden de kaart in drie zwevende balkjes. .card is
     zelf al --ink en dekt dus ook de foto af — hem boven de flitslaag tillen
     is genoeg. Bewust GEEN halo eromheen: de gap tussen de kaarten is de
     ruimte waar de flits nog leest, en een halo zou die dichtsmeren.

     Het raster heeft geen eigen achtergrond meer (zie .grid hieronder), dus
     de gap toont het canvas en daarmee de flits. */
  body.strobing .card{ position:relative; z-index:2; }

  /* De kop staat op de achtergrond zonder band. Alleen een contour is niet
     genoeg: de flits staat hier op volle dekking en .wrap heeft geen eigen
     stacking context, dus zonder deze lift ligt er een ondoorzichtig vlak
     overheen en helpt geen enkele rand. Erboven doet de --halo het werk —
     zelfde constructie als het wordmark in de kop hierboven. */
  body.strobing .shop-head .t{
    position:relative; z-index:2; text-shadow:var(--halo);
  }

  /* Het wordmark gaat boven de flitslaag, maar krijgt GEEN vulling — het is
     nu tekst, dus de contour uit hcf.css houdt de letter overeind tegen de
     witte flits. Op de hero was dit niet nodig omdat de flits daar op .6
     staat en de letter er dus doorheen leest; hier is hij vol en zou de
     letter er zonder deze lift volledig achter verdwijnen. */
  body.strobing header.shop-top .brand{ position:relative; z-index:2; }

  body.strobing footer.shop-foot,
  body.strobing .cartbtn{
    position:relative; z-index:2;
    background:var(--ink); box-shadow:0 0 0 4px var(--ink);
  }

  /* Detail en winkelmand zijn dekkende panelen op z 7000+, dus de gedeelde
     flitslaag komt daar nooit doorheen. Ze dragen hun eigen laag mee —
     dezelfde oplossing als de hero, die om dezelfde reden zijn eigen
     scanlines meebrengt. Op z 1, zodat er ook binnen die panelen iets
     ONDER de flits kan liggen. */
  .detail .strobe-in{
    position:fixed; inset:0; z-index:1; pointer-events:none; display:none;
    background:#fff;
    animation:strobe .09s steps(1) infinite;
  }
  /* fixed, niet absolute: .detail is zelf de scroll-container, dus een
     absolute laag zou met de inhoud mee omhoog scrollen en de onderkant
     onaangeraakt laten. */
  body.strobing .detail .strobe-in{ display:block; }

  /* Detail: zelfde keuze als op de kaarten — beeld en tekst samen in één
     blok, dus de hele kolom. De flits leest in de marge eromheen; die is op
     desktop ruim, want .wrap is 1180 breed. */
  body.strobing .detail .wrap{
    position:relative; z-index:2;
    background:var(--ink); box-shadow:0 0 0 8px var(--ink);
  }

  /* De winkelmand is één beschermd blok, net als een productkaart. Hij draagt
     dus GEEN eigen flitslaag: .cart is al dekkend --ink en ligt op z 8100,
     ruim boven de gedeelde flits op z 1, dus die raakt hem niet. Eerder
     flitste alleen het lege deel van de lijst mee en dat las als twee losse
     panelen in plaats van één la. De flits loopt nu ernaast — links van de la,
     over het raster, gedempt door .scrim-dark. */

  /* ---------- PRODUCT DETAIL (overlay) ---------- */
  .detail{
    position:fixed; inset:0; z-index:7000; background:var(--ink);
    overflow-y:auto; display:none;
  }
  .detail.open{ display:block; }
  /* ruim onder: het hoek-cluster blijft nu ook in het detail staan en hangt
     rechtsonder over de inhoud. 240px is iets meer dan het cluster hoog is,
     zodat de laatste regels van de meta-lijst er altijd bovenuit te scrollen
     zijn. Onderweg schuift er inhoud onderdoor — dat doet de feed op de
     voorpagina net zo — maar niets blijft onbereikbaar. */
  .detail .wrap{ padding-bottom:240px; }
  .detail-top{
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 0 16px;
  }
  /* De enige weg terug naar het raster, dus die mag er staan. Was mono op 11px
     met brede tracking en las als systeemlabel; nu hetzelfde register als de
     koppen. Geen uppercase en nauwelijks tracking: blackletter-kapitalen met
     .2em erop lezen niet. */
  .backlink{ background:none; border:0; color:var(--bone); cursor:pointer; padding:0;
    font-family:var(--gothic); font-weight:400; font-size:24px; letter-spacing:.02em; }
  .backlink:hover{ color:var(--white); }

  .detail-body{ display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:start; }
  .gallery .main{ aspect-ratio:4/5; background:#100f0c; overflow:hidden; }
  .gallery .main img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; }
  .thumbs{ display:flex; gap:2px; margin-top:2px; }
  .thumbs button{ width:78px; height:96px; padding:0; border:1px solid var(--line); background:#100f0c; cursor:pointer; overflow:hidden; }
  .thumbs button img{ width:100%; height:100%; object-fit:cover; }
  .thumbs button[aria-current="true"]{ border-color:var(--white); }

  .info h1{ font-family:var(--fraktur); font-weight:400; font-size:46px; line-height:1; margin:6px 0 14px; letter-spacing:.01em; }
  .info .price{ font-family:var(--mono); font-size:16px; letter-spacing:.1em; color:var(--bone); margin-bottom:22px; }
  .info p.desc{ font-family:var(--mono); font-size:12.5px; line-height:1.7; color:var(--bone); max-width:42ch; margin:0 0 26px; }

  .opt-label{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.24em; font-size:10px; color:var(--dim); margin-bottom:10px; }
  .sizes{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
  /* Maatcodes staan op mono, niet op blackletter. Dat volgt de typografieregel
     van de site — mono voor getallen en systeemdingen, blackletter voor
     merktekst — en S/M/L/XL zijn codes die je in één oogopslag moet kunnen
     lezen. Sluit meteen aan op de stepper eronder, die al mono 15px is.

     De text-indent duwt de letter terug naar het optische midden. In een
     gecentreerde knop komt de inkt links van het midden uit: de letter-spacing
     zet ook achter het laatste teken nog ruimte, en Cousine's aanzetten zijn
     zelf ook niet symmetrisch. Gemeten op de geschilderde pixels stond S 2,2px
     links, M 2,0px en L 1,2px; met .08em is dat 1,0 / 1,0 / 0,2px. Eén waarde
     kan het niet voor elke letter precies maken, dus dit is een correctie, geen
     uitlijning. */
  .size{
    min-width:50px; min-height:46px; padding:0 12px;
    border:1px solid var(--line-2); background:transparent; color:var(--white);
    font-family:var(--mono); font-weight:700; font-size:15px; cursor:pointer;
    letter-spacing:.08em; text-indent:.08em;
    transition:background .12s,color .12s,border-color .12s;
  }
  .size:hover{ border-color:var(--white); }
  .size[aria-pressed="true"]{ background:var(--white); color:var(--ink); border-color:var(--white); }
  .size.sold{ color:var(--dim); border-style:dashed; cursor:not-allowed; text-decoration:line-through; }
  .size.sold:hover{ border-color:var(--line-2); }
  /* Op, maar te pre-orderen: een gestippelde rand zoals een uitverkochte maat
     (hij ligt er niet), maar gewoon wit en te kiezen, met "pre" erbij. */
  .size.pre{ border-style:dashed; }
  .size .pre-tag{ display:block; font-size:9px; font-weight:400; letter-spacing:.2em; text-indent:.2em; text-transform:uppercase; margin-top:2px; }
  .pre-noot{ font-family:var(--mono); font-size:11px; line-height:1.6; letter-spacing:.04em; color:var(--bone); margin:-14px 0 22px; max-width:42ch; }

  .qtyrow{ display:flex; align-items:center; gap:20px; margin-bottom:26px; }
  .stepper{ display:flex; align-items:center; border:1px solid var(--line-2); }
  .stepper button{ width:46px; height:46px; background:none; border:0; color:var(--white); font-size:20px; cursor:pointer; font-family:var(--mono); }
  .stepper button:hover{ background:#1b1a16; }
  .stepper span{ min-width:42px; text-align:center; font-family:var(--mono); font-size:15px; }

  .add{ width:100%; }
  .warn{ font-family:var(--mono); font-size:11px; color:var(--blood-tekst); margin-top:12px; min-height:14px; letter-spacing:.04em; }
  .meta-list{ margin-top:26px; border-top:1px solid var(--line); padding-top:16px; }
  .meta-list div{ display:flex; justify-content:space-between; gap:14px; padding:6px 0; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--bone); }
  .meta-list div span:first-child{ color:var(--dim); text-transform:uppercase; }

  /* ---------- CART DRAWER ---------- */
  .scrim-dark{ position:fixed; inset:0; z-index:8000; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; }
  .scrim-dark.show{ opacity:1; pointer-events:auto; }
  .cart{
    position:fixed; top:0; right:-460px; bottom:0; width:min(400px,92vw); z-index:8100;
    background:var(--ink); border-left:1px solid var(--line-2);
    display:flex; flex-direction:column;
  }
  .cart.open{ right:0; }
  .cart-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 22px 16px; border-bottom:1px solid var(--line); }
  .cart-head .t{ font-family:var(--gothic); font-weight:400; font-size:24px; }
  .cart-head button{ background:none; border:0; color:var(--bone); font-size:20px; cursor:pointer; font-family:var(--mono); }
  .cart-items{ flex:1; overflow-y:auto; padding:8px 22px; }
  .cart-empty{ font-family:var(--mono); font-size:12px; color:var(--dim); text-align:center; padding:50px 0; letter-spacing:.1em; text-transform:uppercase; }
  .citem{ display:grid; grid-template-columns:54px 1fr auto; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
  .citem img{ width:54px; height:66px; object-fit:cover; background:#100f0c; }
  .citem .cn{ font-family:var(--gothic); font-weight:400; font-size:16px; line-height:1.1; }
  .citem .cs{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--dim); text-transform:uppercase; margin-top:4px; }
  .citem .cp{ font-family:var(--mono); font-size:12px; color:var(--bone); }
  .citem .rm{ background:none; border:0; color:var(--dim); cursor:pointer; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; margin-top:6px; padding:0; }
  .citem .rm:hover{ color:var(--white); }
  /* Tikvlak van 44px (review 8.8): "verwijder" was 11px hoog en het kruisje
     24px breed. Het vlak groeit, de letter en de indeling niet: een
     onzichtbaar vlak erbovenop dat bij de knop hoort. */
  .citem .rm,
  .cart-head button{ position:relative; }
  .citem .rm::after{
    content:''; position:absolute; left:-8px; right:-8px; top:50%;
    height:44px; transform:translateY(-50%);
  }
  .cart-head button::after{
    content:''; position:absolute; left:50%; top:50%;
    width:44px; height:44px; transform:translate(-50%,-50%);
  }
  /* het actieblok zit onder de kop i.p.v. onderin de la — zie de toelichting
     bij de markup. Rand daarom onder, niet boven. */
  .cart-act{ border-bottom:1px solid var(--line-2); padding:18px 22px 22px; }
  .subtotal{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--bone); margin-bottom:16px; }
  .subtotal b{ color:var(--white); }

  /* toast */
  /* boven het hoek-cluster (z 9500), niet erop gelijk: sinds het cluster ook
     in de winkelmand blijft staan viel de toast er op smalle schermen deels
     achter. Hij is er maar even, dus dat hij het cluster kort overlapt weegt
     niet op tegen een bevestiging die je niet kunt lezen. */
  .toast{
    position:fixed; left:50%; bottom:30px; z-index:9600;
    background:var(--white); color:var(--ink);
    font-family:var(--gothic); font-weight:400; font-size:16px; letter-spacing:.03em;
    padding:11px 22px; opacity:0; pointer-events:none;
    /* Er zat geen transitie op: hij klapte van 0 naar 1 en terug. Beweging is
       precies wat je ooghoek oppikt, en die was er dus niet. 120ms is genoeg om
       als beweging te lezen zonder dat je erop hoeft te wachten. De 6px omhoog
       maakt er een zetje van in plaats van alleen een lichtsterkte. */
    transform:translate(-50%,6px);
    transition:opacity .12s linear, transform .12s ease-out;
  }
  .toast.show{ opacity:1; transform:translate(-50%,0); }

  /* Puls op de tas bij een toevoeging. Alleen transform en border, dus de
     layout beweegt niet mee. */
  @keyframes hcf-tas-puls{
    0%   { transform:scale(1); }
    32%  { transform:scale(1.10); }
    100% { transform:scale(1); }
  }
  .cartbtn.puls{ animation:hcf-tas-puls .34s ease-out; border-color:var(--white); }

  @media (prefers-reduced-motion: reduce){
    .toast{ transform:translate(-50%,0); transition:opacity .12s linear; }
    .toast.show{ transform:translate(-50%,0); }
    .cartbtn.puls{ animation:none; }
  }

  @media (max-width:760px){
    .grid{ grid-template-columns:repeat(2,1fr); }
    .detail-body{ grid-template-columns:1fr; gap:26px; }
    .info h1{ font-size:38px; }
  }
  @media (max-width:560px){
    header.shop-top{ grid-template-columns:1fr auto; row-gap:14px; }
    header.shop-top .brand{ grid-column:1 / -1; justify-self:start; }
    header.shop-top .right{ grid-column:2; }
    .grid{ grid-template-columns:1fr; }
    .card .tile{ aspect-ratio:1/1; }
  }
  /* Op lage landscape-schermen gaat het hoek-cluster liggen als een balk van
     44px over de volle breedte (zie hcf.css). Die balk staat vast, dus zonder
     dit zou hij de onderste 44px van de winkelmand blijvend afdekken. Zelfde
     hoogte aanhouden als daar. */
  @media (orientation: landscape) and (max-height: 480px){
    .cart{ bottom:44px; }
  }

/* ========= JURIDISCHE PAGINA'S (/retour, /voorwaarden, /privacy) =========
   Lopende tekst in Times — hetzelfde register als de kop "recente posts" op
   de voorpagina. Koppen, het adres en de bedrijfsgegevens in mono: dat is
   functionele tekst, geen verhaal. Leesbreedte beperkt; een regel van 90
   tekens leest niet op een scherm. */
.shop-head h1.t{ margin:0; }
.juridisch{ max-width:62ch; padding:6px 2px 80px; }
.juridisch p{
  margin:0 0 14px;
  font-family:'Times New Roman', Times, serif;
  font-size:18px; line-height:1.55; color:var(--white);
}
.juridisch a{ color:inherit; text-underline-offset:3px; }
.juridisch ul{
  margin:0 0 14px; padding-left:20px;
  font-family:'Times New Roman', Times, serif;
  font-size:18px; line-height:1.55; color:var(--white);
}
.juridisch li{ margin-bottom:6px; }
.juridisch h2{
  margin:40px 0 12px;
  font-family:var(--mono); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.22em; color:var(--bone);
}
.juridisch p.juridisch__onder{
  margin-bottom:22px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--dim);
}
.juridisch p.juridisch__label{
  margin:22px 0 6px;
  font-family:var(--mono); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.2em; color:var(--bone);
}
.juridisch__adres{
  margin:0 0 18px; padding-left:14px; border-left:1px solid var(--line-2);
  font-family:var(--mono); font-style:normal; font-size:14px; line-height:1.7; color:var(--white);
}
.juridisch p.juridisch__bedrijf{
  margin-top:48px; padding-top:18px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--dim);
}
/* Lopende tekst leest niet door een flits heen: de kolom krijgt tijdens de
   strobe een vlak in --ink, zoals de feedkop op de voorpagina. */
body.strobing .juridisch{
  position:relative; z-index:2;
  background:var(--ink); box-shadow:0 0 0 14px var(--ink);
}
/* Genummerde artikelen (/voorwaarden). Het nummer blijft zichtbaar én
   aanklikbaar: naar "artikel 7" verwijzen moet kunnen, in een mail of aan de
   telefoon. Elke kop heeft daarom een id en een ankertje dat bij hover
   verschijnt. */
.juridisch h2[id]{ scroll-margin-top:20px; }
.juridisch h2 a.anker{
  color:inherit; text-decoration:none; opacity:0;
  margin-left:8px; font-weight:400;
}
.juridisch h2:hover a.anker, .juridisch h2 a.anker:focus{ opacity:.5; }

/* Derde partijen (/privacy). Een tabel bestond nog niet op deze site; dit is
   het register van de rest: mono voor de kolomkoppen, hairlines als raster,
   geen zebra. */
.juridisch table{
  width:100%; border-collapse:collapse; margin:0 0 20px;
  font-family:var(--mono); font-size:13px; color:var(--white);
}
.juridisch th{
  text-align:left; padding:0 14px 8px 0;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.18em;
  color:var(--bone); border-bottom:1px solid var(--line-2);
}
.juridisch td{
  padding:10px 14px 10px 0; vertical-align:top; line-height:1.5;
  border-bottom:1px solid var(--line);
}

@media (max-width:640px){
  .juridisch p, .juridisch ul{ font-size:17px; }

  /* Drie kolommen passen niet op een telefoon, en horizontaal scrollen in een
     juridische tekst is geen optie. De tabel wordt hier een stapel blokjes: per
     partij een blok, met de kolomkop als etiket vóór de waarde (uit
     data-kop, zodat de <thead> niet gedupliceerd hoeft te worden). */
  .juridisch thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .juridisch table, .juridisch tbody, .juridisch tr, .juridisch td{ display:block; width:100%; }
  .juridisch tr{
    padding:12px 0; border-bottom:1px solid var(--line-2);
  }
  .juridisch td{ padding:2px 0; border:0; }
  .juridisch td::before{
    content:attr(data-kop) " ";
    color:var(--dim); text-transform:uppercase; letter-spacing:.16em; font-size:10px;
  }
  .juridisch td:first-child{ font-size:14px; }
  .juridisch td:first-child::before{ content:none; }
}