/*
Theme Name: Cartesius Cans
Theme URI: https://cartesiuscans.com/
Author: Cartesius Cans / Esso Cartesiusweg
Description: Eigen thema voor Cartesius Cans. Geen framework, geen page builder — gewone HTML en CSS. Alle kleuren, maten en lettertypes staan bovenaan als variabelen, zodat je ze op één plek kunt aanpassen.
Version: 1.18.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: cartesius
*/

/* ==========================================================================
   1. Variabelen — pas hier aan, niet verderop
   ========================================================================== */
:root{
  /* donkere vlakken */
  --cc-zwart:#0B0E0D;
  --cc-zwart-2:#101615;
  --cc-rand-donker:#1E2422;
  --cc-rand-donker-2:#2A312F;
  /* lichte vlakken */
  --cc-licht:#F3F4F3;
  --cc-licht-2:#EAECEA;
  --cc-licht-3:#E1E4E1;
  --cc-rand-licht:#CDD2CF;
  --cc-rand-licht-2:#E0E3E1;
  /* tekst */
  --cc-tekst:#101413;
  --cc-tekst-2:#3C4442;
  --cc-tekst-3:#5B6361;
  --cc-tekst-donker:#8B9491;
  --cc-tekst-donker-2:#AEB5B3;
  /* accent */
  --cc-groen:#00E07A;
  --cc-groen-knop:#00A05A;
  --cc-groen-knop-hover:#00B966;
  --cc-groen-donker:#00663A;
  --cc-groen-diep:#04120A;
  /* waarschuwing / 18+ */
  --cc-rood:#A0432E;
  --cc-rood-licht:#E08A6A;
  --cc-rood-vlak:#F7EFEB;
  --cc-rood-rand:#E8D9D2;
  --cc-rood-tekst:#7A3A28;
  /* verzamelaar */
  --cc-goud-vlak:#F1EFE6;
  --cc-goud-tekst:#7A6320;
  /* maten */
  --cc-breed:1320px;
  --cc-zij:22px;
  --cc-rond:999px;
  --cc-rond-kaart:18px;
  --cc-rond-groot:22px;
  --cc-rond-klein:13px;
  /* letters */
  --cc-font:"Space Grotesk",Helvetica,Arial,sans-serif;
  --cc-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* tierkleuren */
:root{
  --cc-tier-s:#00E07A; --cc-tier-a:#8CD98C; --cc-tier-b:#D8DF8A;
  --cc-tier-c:#E8D08A; --cc-tier-d:#E5B389; --cc-tier-e:#DE9A85; --cc-tier-f:#C98A80;
}

/* ==========================================================================
   2. Basis
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cc-licht);color:var(--cc-tekst);
  font-family:var(--cc-font);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.cc-mobiel{padding-bottom:76px}
img{max-width:100%;height:auto;display:block}
a{color:var(--cc-groen-donker);text-decoration:none}
a:hover{color:#044D2C;text-decoration:underline}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;letter-spacing:-0.025em;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--cc-groen-knop);outline-offset:2px}
.cc-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Een element met hidden hoort weg te blijven, ook als een klasse er
   display:flex of grid op zet. Zonder dit wint de klasse van de browser. */
[hidden]{display:none!important}
.cc-omhulsel{max-width:var(--cc-breed);margin:0 auto;padding-left:var(--cc-zij);padding-right:var(--cc-zij)}
.cc-mono{font-family:var(--cc-mono)}
.cc-kicker{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--cc-tekst-3)}

/* knoppen */
.cc-knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 19px;border:0;border-radius:var(--cc-rond);background:var(--cc-zwart);
  color:var(--cc-licht);font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none}
.cc-knop:hover{background:var(--cc-groen-knop);color:var(--cc-groen-diep);text-decoration:none}
.cc-knop--groen{background:var(--cc-groen-knop);color:var(--cc-groen-diep)}
.cc-knop--groen:hover{background:var(--cc-groen-knop-hover);color:var(--cc-groen-diep)}
.cc-knop--rand{background:transparent;border:1px solid var(--cc-rand-licht);color:var(--cc-tekst);font-weight:500}
.cc-knop--rand:hover{background:transparent;border-color:var(--cc-zwart);color:var(--cc-tekst)}

/* ==========================================================================
   3. Loopbalk
   ========================================================================== */
.cc-loopbalk{background:var(--cc-zwart);overflow:hidden;border-bottom:1px solid var(--cc-rand-donker)}
.cc-loopbalk__spoor{display:flex;width:max-content;animation:cc-loop 34s linear infinite}
.cc-loopbalk__reeks{display:flex;gap:44px;padding:9px 22px;white-space:nowrap;
  font-family:var(--cc-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--cc-tekst-donker)}
.cc-loopbalk__ster{color:var(--cc-groen)}
@keyframes cc-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cc-loopbalk__spoor{animation:none}}

/* ==========================================================================
   4. Kop
   ========================================================================== */
.cc-kop{position:sticky;top:0;z-index:30;background:var(--cc-zwart);border-bottom:1px solid var(--cc-rand-donker)}
.cc-kop__binnen{max-width:var(--cc-breed);margin:0 auto;padding:12px var(--cc-zij);display:flex;align-items:center;gap:18px}
.cc-logo{flex:0 0 auto;line-height:1.05;text-decoration:none}
.cc-logo:hover{text-decoration:none}
.cc-logo__naam{font-size:20px;letter-spacing:-.02em;color:var(--cc-licht);font-weight:400}
.cc-logo__naam b{font-weight:700;color:var(--cc-groen)}
.cc-logo__regel{font-family:var(--cc-mono);font-size:9.5px;color:var(--cc-tekst-donker);letter-spacing:.09em;text-transform:uppercase;margin-top:3px}
.cc-nav{display:flex;gap:22px;font-size:14px;font-weight:500;flex:0 0 auto;white-space:nowrap;margin-left:8px}
.cc-nav a{padding:6px 0;border-bottom:2px solid transparent;color:var(--cc-tekst-donker-2);text-decoration:none}
.cc-nav a:hover{color:var(--cc-licht);text-decoration:none}
.cc-nav .cc-nav--actief a,.cc-nav a.cc-actief{border-bottom-color:var(--cc-groen);color:var(--cc-licht)}
.cc-zoek{display:flex;flex:1 1 220px;min-width:180px;align-items:center;gap:9px;padding:10px 15px;
  border:1px solid var(--cc-rand-donker-2);border-radius:var(--cc-rond);background:var(--cc-zwart-2);max-width:420px}
.cc-zoek:focus-within{border-color:var(--cc-groen-knop)}
.cc-zoek__icoon{flex:0 0 auto;color:var(--cc-tekst-donker);font-size:14px}
.cc-zoek input{flex:1 1 auto;min-width:0;border:0;background:transparent;color:var(--cc-licht);font-size:14px;outline:none}
.cc-zoek input::placeholder{color:var(--cc-tekst-donker)}
.cc-kop__rechts{flex:0 0 auto;display:flex;align-items:center;gap:18px;margin-left:auto}
.cc-taal{display:flex;flex:0 0 auto;font-family:var(--cc-mono);font-size:11px;
  border:1px solid var(--cc-rand-donker-2);border-radius:var(--cc-rond);overflow:hidden}
.cc-taal a{padding:6px 9px;color:var(--cc-tekst-donker);text-decoration:none}
.cc-taal a:hover{color:var(--cc-licht);text-decoration:none}
.cc-taal a.cc-actief{background:var(--cc-groen);color:var(--cc-groen-diep)}
.cc-inlog{font-size:13.5px;color:var(--cc-tekst-donker-2);text-decoration:none}
.cc-inlog:hover{color:var(--cc-licht);text-decoration:none}
.cc-wagen{display:flex;align-items:center;gap:10px;padding:10px 15px;border:0;border-radius:var(--cc-rond);
  background:var(--cc-groen-knop);color:var(--cc-groen-diep);font-size:13px;font-weight:600;text-decoration:none}
.cc-wagen:hover{background:var(--cc-groen-knop-hover);color:var(--cc-groen-diep);text-decoration:none}
.cc-wagen__aantal{min-width:20px;height:20px;padding:0 5px;border-radius:14px;background:var(--cc-groen-diep);
  color:var(--cc-groen);font-family:var(--cc-mono);font-size:11px;display:flex;align-items:center;justify-content:center}
.cc-zoekrij{max-width:var(--cc-breed);margin:0 auto;padding:0 var(--cc-zij) 12px;display:none}
.cc-zoekrij .cc-zoek{max-width:none}

@media (max-width:1149px){
  .cc-kop__binnen>.cc-zoek{display:none}
  .cc-zoekrij{display:block}
}
@media (max-width:899px){
  .cc-nav,.cc-logo__regel,.cc-inlog{display:none}
  .cc-wagen span:first-child{display:none}
  .cc-kop__binnen{gap:12px}
}

/* ==========================================================================
   5. Tabbalk (mobiel)
   ========================================================================== */
.cc-tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--cc-zwart);
  border-top:1px solid var(--cc-rand-donker);padding:8px 6px 10px;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.cc-tabs a{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 2px;
  color:var(--cc-tekst-donker);text-decoration:none;font-size:10.5px;font-weight:500;letter-spacing:-.005em}
.cc-tabs a:hover{text-decoration:none}
.cc-tabs a.cc-actief{color:var(--cc-groen);font-weight:600}
.cc-tabs a.cc-actief svg{stroke-width:2}
.cc-tabs__icoon{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:24px}
.cc-tabs__badge{position:absolute;top:-3px;right:-6px;min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--cc-rond);background:var(--cc-groen-knop);color:var(--cc-groen-diep);
  font-family:var(--cc-mono);font-size:9.5px;display:flex;align-items:center;justify-content:center}
@media (min-width:900px){.cc-tabs{display:none}body.cc-mobiel{padding-bottom:0}}

/* ==========================================================================
   6. Kruimelpad
   ========================================================================== */
.cc-kruimels{max-width:var(--cc-breed);margin:0 auto;padding:18px var(--cc-zij) 0;
  font-family:var(--cc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cc-tekst-3)}
.cc-kruimels a{color:var(--cc-tekst-3);text-decoration:none}
.cc-kruimels a:hover{color:var(--cc-tekst);text-decoration:none}
.cc-kruimels__scheiding{padding:0 7px}
.cc-kruimels__nu{color:var(--cc-tekst)}

/* ==========================================================================
   7. Productraster + kaart
   ========================================================================== */
.cc-raster{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
@media (max-width:639px){.cc-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}}

.cc-kaart{display:flex;flex-direction:column;background:var(--cc-licht-2);border-radius:var(--cc-rond-kaart);padding:7px}
.cc-kaart:hover{background:var(--cc-licht-3)}
.cc-kaart__beeld{position:relative;aspect-ratio:1/1;border-radius:var(--cc-rond-klein);overflow:hidden;
  background:radial-gradient(115% 85% at 50% 10%,#1D2422 0%,#0F1413 68%);
  display:flex;align-items:flex-end;justify-content:center;padding:12px}
.cc-kaart__beeld img{max-width:100%;max-height:100%;object-fit:contain}
.cc-kaart__geenfoto{font-family:var(--cc-mono);font-size:10.5px;line-height:1.6;color:var(--cc-tekst-donker);text-align:center;align-self:center}
.cc-kaart__label{position:absolute;top:9px;left:9px;padding:4px 10px;border-radius:var(--cc-rond);
  background:var(--cc-groen);color:var(--cc-groen-diep);
  font-family:var(--cc-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.cc-kaart__label--18{background:var(--cc-rood);color:#fff}
.cc-kaart__vlag{position:absolute;top:9px;right:9px;width:24px;height:17px;border-radius:3px;
  box-shadow:0 0 0 1px rgba(243,244,243,.25);background-size:cover;background-position:center}
.cc-kaart__body{padding:13px 8px 8px;display:flex;flex-direction:column;gap:10px;flex:1 1 auto}
.cc-kaart__reeks{font-family:var(--cc-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cc-tekst-3)}
.cc-kaart__naam{font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.25;margin-top:5px}
.cc-kaart__naam a{color:var(--cc-tekst);text-decoration:none}
.cc-kaart__naam a:hover{color:var(--cc-groen-donker);text-decoration:none}
.cc-kaart__sub{font-size:13px;color:var(--cc-tekst-3);margin-top:4px}
.cc-kaart__voet{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto}
.cc-kaart__prijs{font-size:16px;font-weight:700;letter-spacing:-.02em}
.cc-kaart__cta{margin-left:auto;padding:9px 14px;font-size:12.5px}
.cc-kaart__feit{display:flex;gap:10px;font-size:12.5px;line-height:1.45}
.cc-kaart__feit dt{flex:0 0 62px;font-family:var(--cc-mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--cc-tekst-3);padding-top:2px}
.cc-kaart__feit dd{margin:0;min-width:0;color:var(--cc-tekst-2)}
/* Het smaakprofiel staat zonder kopje in de kaart, over de volle breedte. */
.cc-kaart__profiel{margin:0;min-width:0;font-size:12.5px;line-height:1.45;color:var(--cc-tekst-2)}

.cc-tier{width:19px;height:19px;border-radius:6px;font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;color:var(--cc-groen-diep)}
.cc-tier--s{background:var(--cc-tier-s)}.cc-tier--a{background:var(--cc-tier-a)}
.cc-tier--b{background:var(--cc-tier-b)}.cc-tier--c{background:var(--cc-tier-c)}
.cc-tier--d{background:var(--cc-tier-d)}.cc-tier--e{background:var(--cc-tier-e)}
.cc-tier--f{background:var(--cc-tier-f)}

/* ==========================================================================
   8. Categorie / archief
   ========================================================================== */
.cc-archief{max-width:var(--cc-breed);margin:0 auto;padding:0 var(--cc-zij) 76px}
.cc-archief__kop{padding-top:22px}
.cc-archief__titel{font-size:clamp(28px,3.6vw,42px);line-height:1.04;font-weight:700;letter-spacing:-.032em}
.cc-archief__intro{margin:14px 0 0;max-width:60ch;font-size:15.5px;line-height:1.6;color:var(--cc-tekst-2)}
.cc-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.cc-filter{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--cc-rand-licht);
  border-radius:var(--cc-rond);background:transparent;color:var(--cc-tekst-2);font-size:13px;font-weight:500;text-decoration:none}
.cc-filter:hover{border-color:var(--cc-zwart);color:var(--cc-tekst);text-decoration:none}
.cc-filter.cc-actief{background:var(--cc-zwart);border-color:var(--cc-zwart);color:var(--cc-licht)}
.cc-filter__aantal{font-family:var(--cc-mono);font-size:11px;opacity:.65}
.cc-leeg{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px 24px;
  border:1px dashed #B9C0BC;border-radius:var(--cc-rond-kaart)}
.cc-leeg__titel{font-size:17px;font-weight:600;letter-spacing:-.018em}
.cc-leeg p{margin:0;max-width:56ch;font-size:14px;line-height:1.6;color:var(--cc-tekst-2)}
.cc-seo{padding-top:46px;max-width:70ch}
.cc-seo h2{font-size:20px;font-weight:600;margin-bottom:10px}
.cc-seo p{font-size:14.5px;line-height:1.7;color:var(--cc-tekst-2)}

/* paginering */
.cc-paginering{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding-top:34px}
.cc-paginering .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  padding:0 12px;border:1px solid var(--cc-rand-licht);border-radius:var(--cc-rond);
  font-family:var(--cc-mono);font-size:13px;color:var(--cc-tekst-2);text-decoration:none}
.cc-paginering .page-numbers:hover{border-color:var(--cc-zwart);text-decoration:none}
.cc-paginering .page-numbers.current{background:var(--cc-zwart);border-color:var(--cc-zwart);color:var(--cc-licht)}

/* ==========================================================================
   9. Productpagina
   ========================================================================== */
.cc-product{max-width:var(--cc-breed);margin:0 auto;padding:24px var(--cc-zij) 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:40px;align-items:start}
.cc-galerij{display:grid;gap:12px;position:sticky;top:96px;align-self:start;width:100%}
@media (max-width:899px){.cc-galerij{position:static;top:auto}}
.cc-galerij__hoofd{position:relative;aspect-ratio:1/1;background:var(--cc-zwart);overflow:hidden;border-radius:var(--cc-rond-groot)}
.cc-galerij__hoofd::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 8%,#1A211F 0%,#0B0E0D 62%)}
/* Het blik staat altijd midden in het vlak. De hoogte schaalt mee met de
   inhoud van het blik, zodat een 250 ml-blikje kleiner oogt dan een 500 ml. */
.cc-galerij__hoofd{--cc-blikschaal:1}
.cc-galerij__foto{position:absolute;inset:9%;margin:auto;object-fit:contain;
  width:auto;height:auto;max-width:100%;max-height:calc(100% * var(--cc-blikschaal,1));
  opacity:0;transition:opacity .2s ease,max-height .25s ease}
.cc-galerij__foto.cc-actief{opacity:1}
.cc-galerij__geen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12%;
  text-align:center;font-family:var(--cc-mono);font-size:12px;line-height:1.7;color:var(--cc-tekst-donker);letter-spacing:.04em}
.cc-galerij__badges{position:absolute;top:0;left:0;right:0;display:flex;flex-wrap:wrap;
  justify-content:space-between;align-items:flex-start;padding:14px;gap:8px;z-index:2}
.cc-badge{padding:6px 12px;border-radius:var(--cc-rond);background:var(--cc-groen);color:var(--cc-groen-diep);
  font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.cc-badge--18{background:var(--cc-rood);color:#fff}
.cc-badge--info{display:flex;align-items:center;gap:8px;background:rgba(11,14,13,.72);
  border:1px solid var(--cc-rand-donker-2);color:#DCE0DE;letter-spacing:.08em;text-transform:none}
.cc-vlag{width:18px;height:13px;border-radius:2px;background-size:cover;background-position:center;flex:0 0 auto}
.cc-duimen{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.cc-duim{aspect-ratio:1/1;background:#121716;overflow:hidden;border-radius:12px;position:relative;
  cursor:pointer;border:0;padding:0;outline:1px solid transparent;outline-offset:-1px}
.cc-duim.cc-actief{outline-color:var(--cc-groen)}
.cc-duim img{position:absolute;inset:11%;width:78%;height:78%;object-fit:contain}

.cc-info{position:relative;z-index:6}
.cc-info__kop{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.cc-merklabel{font-family:var(--cc-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--cc-groen-donker)}
.cc-geproefd{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--cc-rand-licht);
  border-radius:var(--cc-rond);background:transparent;color:var(--cc-tekst-3);cursor:pointer;
  font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.cc-geproefd:hover{border-color:var(--cc-zwart)}
.cc-geproefd.cc-aan{background:var(--cc-zwart);border-color:var(--cc-zwart);color:var(--cc-groen)}
.cc-info h1{font-size:clamp(30px,4vw,46px);line-height:1.02;letter-spacing:-.032em;font-weight:700}
.cc-info__intro{margin:18px 0 0;max-width:52ch;font-size:16px;line-height:1.6;color:var(--cc-tekst-2)}

/* blikkiezer */
.cc-kiezer{margin-top:26px}
.cc-kiezer__kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px}
.cc-kiezer__telling{font-family:var(--cc-mono);font-size:10.5px;color:var(--cc-tekst-3)}
.cc-pillen{display:flex;flex-wrap:wrap;gap:8px}
.cc-pil{display:flex;align-items:baseline;gap:9px;padding:9px 16px;border:1px solid var(--cc-rand-licht);
  border-radius:var(--cc-rond);background:transparent;color:var(--cc-tekst-2);cursor:pointer;
  font-size:13.5px;font-weight:500;letter-spacing:-.005em}
.cc-pil:hover{border-color:var(--cc-zwart)}
.cc-pil.cc-actief{background:var(--cc-zwart);border-color:var(--cc-zwart);color:var(--cc-licht)}
.cc-pil.cc-uitverkocht{opacity:.42;cursor:not-allowed;text-decoration:line-through}
.cc-pil .cc-vlag{width:20px;height:14px;border-radius:3px;align-self:center}
.cc-pil__prijs{font-family:var(--cc-mono);font-size:11.5px;opacity:.62}

.cc-lijst{display:grid;gap:1px;background:var(--cc-rand-licht-2);border-radius:14px;overflow:hidden}
.cc-lijst__rij{display:flex;align-items:center;gap:12px;padding:13px 15px;background:#fff;cursor:pointer;
  border:0;width:100%;text-align:left}
.cc-lijst__rij:hover{background:#F7F8F7}
.cc-lijst__rij.cc-actief{background:var(--cc-licht-2)}
.cc-lijst__bol{width:18px;height:18px;border-radius:50%;border:1px solid var(--cc-rand-licht);flex:0 0 auto}
.cc-lijst__rij.cc-actief .cc-lijst__bol{border-color:var(--cc-zwart);background:var(--cc-zwart);box-shadow:inset 0 0 0 3px #fff}
.cc-lijst__rij .cc-vlag{width:22px;height:16px;border-radius:3px;box-shadow:0 0 0 1px rgba(16,20,19,.14)}
.cc-lijst__tekst{flex:1 1 auto;min-width:0}
.cc-lijst__vol{display:block;font-size:14.5px;font-weight:500;letter-spacing:-.01em}
.cc-lijst__rij.cc-actief .cc-lijst__vol{font-weight:700}
.cc-lijst__sub{display:block;font-family:var(--cc-mono);font-size:11px;color:var(--cc-tekst-3);margin-top:3px}
.cc-lijst__prijs{font-size:14.5px;font-weight:600;letter-spacing:-.01em;flex:0 0 auto;min-width:62px;text-align:right}
.cc-merk{padding:4px 9px;border-radius:var(--cc-rond);font-family:var(--cc-mono);font-size:10px;
  letter-spacing:.07em;text-transform:uppercase;flex:0 0 auto}
.cc-merk--verzamel{background:var(--cc-goud-vlak);color:var(--cc-goud-tekst)}
.cc-merk--nietverzamel{background:#EBDCD6;color:var(--cc-rood-tekst)}
.cc-let-op{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;background:var(--cc-rood-vlak);
  border-top:1px solid var(--cc-rood-rand);font-size:13px;line-height:1.6;color:var(--cc-rood-tekst)}
.cc-let-op b{color:var(--cc-rood)}

.cc-verpakking{margin-top:22px}
.cc-verpakking__perblik{margin-top:10px;font-family:var(--cc-mono);font-size:11.5px;color:var(--cc-groen-donker)}

.cc-prijsblok{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;margin-top:24px;
  padding-bottom:22px;border-bottom:1px solid var(--cc-rand-licht-2)}
.cc-prijsblok__prijs{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1}
.cc-prijsblok__statiegeld{font-family:var(--cc-mono);font-size:11.5px;color:var(--cc-tekst-3);line-height:1.5;padding-bottom:5px}
.cc-prijsblok__statiegeld b{color:var(--cc-tekst);font-weight:400}
.cc-voorraad{margin-left:auto;display:flex;align-items:center;gap:8px;padding-bottom:6px;
  font-family:var(--cc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cc-groen-donker)}
.cc-voorraad::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cc-groen-knop)}
.cc-voorraad--nee{color:var(--cc-rood)}
.cc-voorraad--nee::before{background:var(--cc-rood)}

/* De knop is tegelijk de teller: één pil die van gedaante wisselt. */
.cc-koop{margin-top:24px;max-width:340px}
.cc-koopwissel{position:relative;height:56px}
.cc-koop__knop,.cc-koop__stap{position:absolute;inset:0;transition:opacity .18s ease}
.cc-koop--inwagen .cc-koop__knop{opacity:0;pointer-events:none}
.cc-koop__stap{display:flex;align-items:center;justify-content:space-between;
  border-radius:var(--cc-rond);background:var(--cc-zwart);color:var(--cc-licht)}
.cc-koop__stap button{width:56px;height:56px;border:0;border-radius:50%;background:transparent;
  color:var(--cc-licht);font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.cc-koop__stap button:hover{color:var(--cc-groen)}
.cc-koop__aantal{font-family:var(--cc-mono);font-size:17px;color:var(--cc-licht);display:inline-block}
.cc-koop__aantal.cc-pop{animation:cc-pop .16s ease}
@keyframes cc-pop{0%{transform:scale(1)}50%{transform:scale(1.28)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .cc-koop__knop,.cc-koop__stap{transition:none}
  .cc-koop__aantal.cc-pop{animation:none}
}
.cc-koop__weg{display:none}
.cc-koop--een .cc-koop__weg{display:inline-flex}
.cc-koop--een .cc-koop__min{display:none}
.cc-koop--bezig{opacity:.75}
.cc-koop__regel{display:flex;justify-content:space-between;gap:16px;margin-top:12px;
  font-family:var(--cc-mono);font-size:11.5px;color:var(--cc-tekst-3)}
.cc-koop__regel span:last-child{color:var(--cc-tekst);font-size:13px}
.cc-aantal{display:flex;align-items:center;border:1px solid var(--cc-rand-licht);border-radius:var(--cc-rond);overflow:hidden}
.cc-aantal button{width:44px;height:56px;border:0;background:transparent;font-size:20px;cursor:pointer;color:var(--cc-tekst)}
.cc-aantal button:hover{color:var(--cc-groen-donker)}
.cc-aantal input{width:44px;height:56px;border:0;text-align:center;font-family:var(--cc-mono);font-size:16px;
  background:transparent;-moz-appearance:textfield}
.cc-aantal input::-webkit-outer-spin-button,.cc-aantal input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cc-koop__knop{width:100%;height:56px;border:0;border-radius:var(--cc-rond);background:var(--cc-zwart);
  color:var(--cc-licht);font-size:15.5px;font-weight:600;letter-spacing:.01em;cursor:pointer}
.cc-koop__knop:hover{background:var(--cc-groen-knop);color:var(--cc-groen-diep)}
.cc-koop__knop[disabled]{opacity:.4;cursor:not-allowed}

/* feitentabel + tabs onderaan */
.cc-feiten{margin-top:30px;display:grid;gap:1px;background:var(--cc-rand-licht-2);
  border-radius:14px;overflow:hidden;border:1px solid var(--cc-rand-licht-2)}
.cc-feiten__rij{display:flex;gap:14px;padding:12px 15px;background:var(--cc-licht);font-size:14px}
.cc-feiten__k{flex:0 0 132px;font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--cc-tekst-3);padding-top:3px}
.cc-feiten__v{min-width:0;color:var(--cc-tekst-2)}
.cc-tekstblok{max-width:var(--cc-breed);margin:0 auto;padding:44px var(--cc-zij) 0}
.cc-tekstblok h2{font-size:22px;font-weight:600;margin-bottom:12px}
.cc-tekstblok p{max-width:68ch;font-size:15.5px;line-height:1.7;color:var(--cc-tekst-2)}
.cc-verwant{max-width:var(--cc-breed);margin:0 auto;padding:52px var(--cc-zij) 0}
.cc-verwant h2{font-size:22px;font-weight:600;margin-bottom:16px}

/* ==========================================================================
   10. Voet
   ========================================================================== */
.cc-voet{background:var(--cc-zwart);color:var(--cc-tekst-donker);margin-top:64px}
.cc-voet__binnen{max-width:var(--cc-breed);margin:0 auto;padding:46px var(--cc-zij);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:32px}
.cc-voet__logo{font-size:19px;letter-spacing:-.02em;color:var(--cc-licht);margin-bottom:10px}
.cc-voet__logo b{font-weight:700;color:var(--cc-groen)}
.cc-voet__intro{font-size:13.5px;line-height:1.6}
.cc-voet__kolom{font-size:13.5px;line-height:2}
.cc-voet__kop{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cc-groen);margin-bottom:8px}
.cc-voet__kolom ul{list-style:none;margin:0;padding:0}
.cc-voet a{color:var(--cc-tekst-donker);text-decoration:none}
.cc-voet a:hover{color:var(--cc-licht);text-decoration:none}
.cc-voet__slot{border-top:1px solid var(--cc-rand-donker);padding:17px var(--cc-zij);
  font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.05em;text-align:center}

/* ==========================================================================
   11. Losse pagina's / berichten
   ========================================================================== */
.cc-pagina{max-width:var(--cc-breed);margin:0 auto;padding:34px var(--cc-zij) 0}
.cc-pagina__inhoud{max-width:68ch;font-size:16px;line-height:1.7;color:var(--cc-tekst-2)}
.cc-pagina__inhoud h2{font-size:24px;font-weight:600;color:var(--cc-tekst);margin:32px 0 10px}
.cc-pagina__inhoud h3{font-size:18px;font-weight:600;color:var(--cc-tekst);margin:26px 0 8px}
.cc-pagina h1{font-size:clamp(28px,3.6vw,42px);line-height:1.04;font-weight:700;letter-spacing:-.032em;margin-bottom:18px}

/* WooCommerce meldingen in onze stijl */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;margin:0 0 18px;padding:14px 18px;border-radius:14px;
  background:var(--cc-licht-2);font-size:14px;line-height:1.6;border-left:3px solid var(--cc-groen-knop)}
.woocommerce-error{background:var(--cc-rood-vlak);border-left-color:var(--cc-rood);color:var(--cc-rood-tekst)}

/* ==========================================================================
   12. Homepage
   ========================================================================== */
.cc-hero{background:var(--cc-zwart);color:var(--cc-licht);border-bottom:1px solid var(--cc-rand-donker)}
.cc-hero__binnen{max-width:var(--cc-breed);margin:0 auto;padding:52px var(--cc-zij) 46px;
  display:grid;grid-template-columns:1.35fr .9fr;gap:44px;align-items:end}
.cc-hero__titel{font-size:clamp(30px,5vw,58px);line-height:.99;letter-spacing:-.035em;font-weight:700;max-width:20ch}
.cc-hero__body{margin:18px 0 0;max-width:54ch;font-size:16.5px;line-height:1.6;color:var(--cc-tekst-donker-2)}
.cc-hero__knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cc-hero__knoppen .cc-knop{padding:14px 22px;font-size:14.5px}
.cc-hero__knop2{background:transparent;border:1px solid var(--cc-rand-donker-2);color:var(--cc-licht)}
.cc-hero__knop2:hover{background:transparent;border-color:var(--cc-groen-knop);color:var(--cc-groen)}
.cc-cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--cc-rand-donker);
  border:1px solid var(--cc-rand-donker);border-radius:16px;overflow:hidden}
.cc-cijfer{background:var(--cc-zwart-2);padding:16px 15px}
.cc-cijfer b{display:block;font-size:clamp(20px,2.4vw,27px);font-weight:700;letter-spacing:-.025em;color:var(--cc-groen)}
.cc-cijfer span{display:block;font-family:var(--cc-mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cc-tekst-donker);margin-top:6px;line-height:1.5}
@media (max-width:899px){
  .cc-hero__binnen{grid-template-columns:1fr;gap:30px;padding:38px var(--cc-zij) 34px}
}

.cc-ingangen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:16px}
.cc-ingang{display:flex;flex-direction:column;gap:12px;background:var(--cc-licht-2);color:var(--cc-tekst);
  border:1px solid var(--cc-licht-2);border-radius:20px;padding:24px 22px;text-decoration:none}
.cc-ingang:hover{border-color:var(--cc-zwart);color:var(--cc-tekst);text-decoration:none}
.cc-ingang--donker{background:var(--cc-zwart);border-color:var(--cc-zwart);color:var(--cc-licht)}
.cc-ingang--donker:hover{border-color:var(--cc-groen);color:var(--cc-licht)}
.cc-ingang__kicker{font-family:var(--cc-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cc-tekst-3)}
.cc-ingang--donker .cc-ingang__kicker{color:var(--cc-groen)}
.cc-ingang__titel{font-size:21px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.cc-ingang__body{font-size:14.5px;line-height:1.6;color:var(--cc-tekst-2)}
.cc-ingang--donker .cc-ingang__body{color:var(--cc-tekst-donker-2)}
.cc-ingang__cta{margin-top:auto;padding-top:6px;font-size:13.5px;font-weight:600}

.cc-sectiekop{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.cc-sectiekop__titel{margin:9px 0 0;font-size:clamp(21px,2.4vw,29px);line-height:1.1;letter-spacing:-.025em;font-weight:700}
.cc-sectiekop__link{font-size:13.5px;font-weight:600;white-space:nowrap}

.cc-afhalen{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;
  background:var(--cc-licht-2);border-radius:var(--cc-rond-groot);padding:28px 26px}
.cc-afhalen__body{margin:10px 0 0;max-width:52ch;font-size:14.5px;line-height:1.65;color:var(--cc-tekst-2)}
.cc-afhalen__feiten{display:grid;gap:12px;margin:0}
.cc-afhalen__feiten>div{display:flex;gap:14px;align-items:baseline;padding-bottom:11px;border-bottom:1px solid var(--cc-rand-licht)}
.cc-afhalen__feiten dt{flex:0 0 108px;font-family:var(--cc-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cc-tekst-3)}
.cc-afhalen__feiten dd{margin:0;min-width:0;font-size:14.5px;line-height:1.5}
@media (max-width:899px){.cc-afhalen{grid-template-columns:1fr;gap:22px}}

/* zoekbalk op een lichte pagina */
.cc-pagina .cc-zoek{background:#fff;border-color:var(--cc-rand-licht);max-width:none}
.cc-pagina .cc-zoek input{color:var(--cc-tekst)}
.cc-pagina .cc-zoek input::placeholder{color:var(--cc-tekst-3)}

/* ==========================================================================
   13. Kleine schermen — niets mag zijwaarts buiten beeld vallen
   ========================================================================== */
.cc-logo__naam,.cc-logo__regel{display:block}
.cc-cijfers{grid-template-columns:repeat(3,minmax(0,1fr))}
.cc-hero__binnen>*,.cc-ingangen>*,.cc-raster>*,.cc-afhalen>*,.cc-product>*,
.cc-kaart__body>*,.cc-kaart__voet>*{min-width:0}
.cc-kaart__naam,.cc-kaart__sub,.cc-lijst__vol,.cc-lijst__sub{overflow-wrap:anywhere}

@media (max-width:639px){
  :root{--cc-zij:16px}
  .cc-kaart__cta{margin-left:0;width:100%;justify-content:center}
  .cc-kaart__prijs{width:100%}
  .cc-cijfers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-cijfer:last-child{grid-column:1/-1}
  .cc-feiten__k{flex:0 0 96px}
  .cc-afhalen__feiten dt{flex:0 0 84px}
  .cc-lijst__rij{gap:9px;padding:12px 12px}
  .cc-lijst__prijs{min-width:0}
  .cc-prijsblok__prijs{font-size:32px}
  .cc-koop{max-width:none}
  .cc-kruimels{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .cc-hero__knoppen .cc-knop{flex:1 1 auto;justify-content:center}
}

/* brede inhoud mag nooit de pagina meeslepen */
.cc-pagina__inhoud table,.cc-tekstblok table{display:block;overflow-x:auto;max-width:100%}
.cc-pagina__inhoud pre,.cc-tekstblok pre{overflow-x:auto}

/* ==========================================================================
   14. Winkelwagen
   ========================================================================== */
.cc-wagenpagina{max-width:var(--cc-breed);margin:0 auto;padding:30px var(--cc-zij) 0;
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.9fr);gap:34px;align-items:start}
.cc-wagenpagina__titel{grid-column:1/-1;font-size:clamp(28px,3.6vw,42px);line-height:1.04;
  font-weight:700;letter-spacing:-.032em}
.cc-wagenpagina--leeg{grid-template-columns:1fr}
@media (max-width:899px){.cc-wagenpagina{grid-template-columns:1fr;gap:24px}}

.cc-wagenregels{display:grid;gap:1px;background:var(--cc-rand-licht-2);
  border:1px solid var(--cc-rand-licht-2);border-radius:16px;overflow:hidden}
.cc-wagenregel{display:grid;grid-template-columns:74px minmax(0,1fr) auto auto 30px;
  gap:14px;align-items:center;padding:14px 15px;background:#fff}
.cc-wagenregel__beeld{position:relative;width:74px;height:74px;border-radius:11px;overflow:hidden;
  background:radial-gradient(115% 85% at 50% 10%,#1D2422 0%,#0F1413 68%);display:flex;align-items:center;justify-content:center}
.cc-wagenregel__beeld img{max-width:78%;max-height:78%;object-fit:contain}
.cc-wagenregel__vlag{position:absolute;top:5px;right:5px;width:18px;height:13px;border-radius:2px;
  box-shadow:0 0 0 1px rgba(243,244,243,.25);background-size:cover;background-position:center}
.cc-wagenregel__naam{font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.25;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cc-wagenregel__naam a{color:var(--cc-tekst)}
.cc-wagenregel__sub{font-family:var(--cc-mono);font-size:11px;color:var(--cc-tekst-3);margin-top:5px}
.cc-wagenregel__sku{opacity:.6}
.cc-wagenregel__statiegeld{font-family:var(--cc-mono);font-size:11px;color:var(--cc-groen-donker);margin-top:5px}
.cc-wagenregel__statiegeld span{color:var(--cc-tekst-3)}
.cc-wagenregel__prijs{font-size:15.5px;font-weight:600;letter-spacing:-.015em;white-space:nowrap}
.cc-wagenregel__vast{font-family:var(--cc-mono);font-size:14px;color:var(--cc-tekst-3)}
.cc-weg{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;color:var(--cc-tekst-3);font-size:19px;line-height:1;text-decoration:none}
.cc-weg:hover{background:var(--cc-rood-vlak);color:var(--cc-rood);text-decoration:none}
.cc-wagenregel .quantity input,.cc-wagenregel .qty{width:62px;height:40px;text-align:center;
  border:1px solid var(--cc-rand-licht);border-radius:var(--cc-rond);font-family:var(--cc-mono);font-size:14px;background:#fff}
@media (max-width:639px){
  .cc-wagenregel{grid-template-columns:60px minmax(0,1fr) 30px;grid-template-areas:
    "beeld tekst weg" "aantal prijs prijs";gap:10px 12px}
  .cc-wagenregel__beeld{grid-area:beeld;width:60px;height:60px}
  .cc-wagenregel__tekst{grid-area:tekst}
  .cc-wagenregel__weg{grid-area:weg}
  .cc-wagenregel__aantal{grid-area:aantal}
  .cc-wagenregel__prijs{grid-area:prijs;text-align:right}
}

.cc-wagenacties{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:18px}
.cc-verderwinkelen{font-size:13.5px;font-weight:600}

.cc-optelling{background:var(--cc-licht-2);border-radius:var(--cc-rond-groot);padding:22px 22px 24px;
  position:sticky;top:96px}
@media (max-width:899px){.cc-optelling{position:static;top:auto}}
.cc-optelling__titel{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
.cc-optelling__rij{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  font-size:14.5px;border-bottom:1px solid var(--cc-rand-licht)}
.cc-optelling__rij--klein{font-size:13px;color:var(--cc-tekst-3)}
.cc-optelling__rij--bon{color:var(--cc-groen-donker)}
.cc-optelling__rij--totaal{border-bottom:0;padding-top:14px;font-size:19px;font-weight:700;letter-spacing:-.02em}
.cc-optelling__verzenden{padding:14px 0;border-bottom:1px solid var(--cc-rand-licht)}
.cc-optelling__kop{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cc-tekst-3);margin-bottom:10px}
.cc-optelling ul#shipping_method{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cc-optelling ul#shipping_method li{display:flex;align-items:center;gap:9px;font-size:14px}
.cc-optelling .woocommerce-shipping-destination{font-size:12.5px;color:var(--cc-tekst-3);margin-top:10px}
.cc-optelling__knop{margin-top:18px}
.cc-optelling__knop .checkout-button,.cc-optelling__knop a{display:flex;align-items:center;justify-content:center;
  width:100%;height:54px;border-radius:var(--cc-rond);background:var(--cc-zwart);color:var(--cc-licht);
  font-size:15.5px;font-weight:600;text-decoration:none}
.cc-optelling__knop .checkout-button:hover,.cc-optelling__knop a:hover{background:var(--cc-groen-knop);color:var(--cc-groen-diep);text-decoration:none}

.cc-let-op--los{border-top:0;border-radius:14px;margin:16px 0}

/* ==========================================================================
   15. Afrekenen en account — WooCommerce's eigen opmaak, onze kleuren
   ========================================================================== */
.woocommerce-checkout .cc-pagina__inhoud,.woocommerce-account .cc-pagina__inhoud{max-width:none}
.woocommerce form .form-row label{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cc-tekst-3);margin-bottom:6px;display:block}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  width:100%;padding:12px 14px;border:1px solid var(--cc-rand-licht);border-radius:12px;
  background:#fff;font-family:var(--cc-font);font-size:15px;color:var(--cc-tekst);height:auto}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{outline:0;border-color:var(--cc-groen-knop)}
.woocommerce .button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button{
  padding:13px 20px;border:0;border-radius:var(--cc-rond);background:var(--cc-zwart);
  color:var(--cc-licht);font-family:var(--cc-font);font-size:14px;font-weight:600;line-height:1}
.woocommerce .button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button:hover{background:var(--cc-groen-knop);color:var(--cc-groen-diep)}
.woocommerce a.button.alt,.woocommerce button.button.alt,
.woocommerce input.button.alt,.woocommerce #respond input#submit.alt,
.woocommerce #place_order{background:var(--cc-groen-knop);color:var(--cc-groen-diep)}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,.woocommerce #place_order:hover{
  background:var(--cc-groen-knop-hover);color:var(--cc-groen-diep)}
.woocommerce table.shop_table{border:1px solid var(--cc-rand-licht-2);border-radius:16px;border-collapse:separate;overflow:hidden}
.woocommerce table.shop_table th{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cc-tekst-3);font-weight:500}
.woocommerce-checkout #payment{background:var(--cc-licht-2);border-radius:var(--cc-rond-groot)}
.woocommerce-checkout #payment div.payment_box{background:#fff;border-radius:12px}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--cc-rand-licht)}
.cc-18-veld{padding:14px 16px;background:var(--cc-rood-vlak);border:1px solid var(--cc-rood-rand);
  border-radius:14px;margin-bottom:16px}
.cc-18-veld label{font-family:var(--cc-font)!important;font-size:14.5px!important;letter-spacing:0!important;
  text-transform:none!important;color:var(--cc-rood-tekst)!important;display:inline!important}

/* Blok-winkelwagen en blok-afrekenen (als je die aan houdt) */
.wc-block-components-button,.wp-block-woocommerce-cart .wc-block-cart__submit-button{
  border-radius:var(--cc-rond)!important;background:var(--cc-zwart)!important;color:var(--cc-licht)!important;
  font-family:var(--cc-font)!important;font-weight:600!important}
.wc-block-components-button:hover{background:var(--cc-groen-knop)!important;color:var(--cc-groen-diep)!important}
.wc-block-components-totals-item__label,.wc-block-components-product-name{font-family:var(--cc-font)}
.wc-block-cart,.wc-block-checkout{font-family:var(--cc-font)}

/* ==========================================================================
   16. Filterrijen
   ========================================================================== */
.cc-filterrij{display:flex;align-items:flex-start;gap:14px;margin-top:14px}
.cc-filterrij__label{flex:0 0 84px;padding-top:9px;font-family:var(--cc-mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cc-tekst-3)}
.cc-filterrij .cc-filters{margin-top:0;flex:1 1 auto;min-width:0}
.cc-filterrij .cc-filter{padding:7px 12px;font-size:12.5px}
.cc-filterrij .cc-vlag{width:18px;height:13px;border-radius:2px}
.cc-filterwissen{margin:16px 0 0;font-size:13px}
.cc-filterwissen a{font-weight:600}
@media (max-width:639px){
  .cc-filterrij{flex-direction:column;gap:6px}
  .cc-filterrij__label{flex:0 0 auto;padding-top:0}
  .cc-filterrij .cc-filters{gap:6px}
}

/* ==========================================================================
   17. Ontdekken
   ========================================================================== */
.cc-ontdekgroep{padding-top:38px}
.cc-kaart--ontdek .cc-kaart__beeld{background:radial-gradient(115% 85% at 50% 10%,#232A28 0%,#121716 68%)}
.cc-kaart__label--buitenland{background:var(--cc-groen);color:var(--cc-groen-diep)}
.cc-kaart__label--verwacht{background:#E8D08A;color:#4A3A10}
.cc-kaart__label--gerucht{background:#2A312F;color:var(--cc-tekst-donker-2)}
.cc-kaart__feiten{display:grid;gap:6px;margin:0}
.cc-kaart--ontdek .cc-kaart__voet{margin-top:auto}
.cc-kaart--ontdek .cc-kaart__cta{margin-left:0;width:100%;justify-content:center}

.cc-ontdek{display:grid;gap:26px;margin-top:22px}
.cc-ontdek__status{display:flex;flex-wrap:wrap;gap:10px}
.cc-statuspil{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--cc-rond);
  background:var(--cc-zwart);color:var(--cc-groen);
  font-family:var(--cc-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.cc-statuspil__stip{width:6px;height:6px;border-radius:50%;background:currentColor}
.cc-statuspil--verwacht{color:#E8D08A}
.cc-statuspil--gerucht{color:var(--cc-tekst-donker-2)}
.cc-statuspil--rand{background:transparent;border:1px solid var(--cc-rand-licht);color:var(--cc-tekst-2);
  letter-spacing:.05em;text-transform:none}
.cc-statuspil--rand .cc-statuspil__stip{display:none}

.cc-ontdek__blok{padding-top:22px;border-top:1px solid var(--cc-rand-licht-2)}
.cc-ontdek__blok h2{font-size:16px;font-weight:600;letter-spacing:-.012em}
.cc-ontdek__blok p{margin:8px 0 0;max-width:52ch;font-size:14.5px;line-height:1.65;color:var(--cc-tekst-2)}
.cc-ontdek__blok--eigen{background:var(--cc-licht-2);border-top:0;border-radius:16px;padding:18px 20px}
.cc-ontdek__blok--mail{background:var(--cc-zwart);border-top:0;border-radius:16px;padding:20px;color:var(--cc-licht)}
.cc-ontdek__blok--mail p{color:var(--cc-tekst-donker-2)}
.cc-ontdek__nogniet{font-family:var(--cc-mono);font-size:11.5px;color:var(--cc-tekst-donker)!important}
.cc-ontdek__nogniet a{color:var(--cc-groen)}

.cc-tijdlijn{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:1px;
  background:var(--cc-rand-licht-2);border:1px solid var(--cc-rand-licht-2);border-radius:14px;overflow:hidden}
.cc-tijdlijn__regel{display:flex;gap:14px;align-items:baseline;padding:13px 15px;background:var(--cc-licht);
  border-left:3px solid var(--cc-rand-licht)}
.cc-tijdlijn__regel--bevestigd{border-left-color:var(--cc-groen-knop)}
.cc-tijdlijn__regel--eigen{border-left-color:var(--cc-zwart)}
.cc-tijdlijn__regel--gerucht{border-left-color:#E8D08A}
.cc-tijdlijn__datum{flex:0 0 84px;font-family:var(--cc-mono);font-size:11px;color:var(--cc-tekst-3)}
.cc-tijdlijn__tekst{flex:1 1 auto;min-width:0}
.cc-tijdlijn__titel{display:block;font-size:14.5px;line-height:1.45}
.cc-tijdlijn__bron{display:block;font-family:var(--cc-mono);font-size:11px;color:var(--cc-tekst-3);margin-top:4px;overflow-wrap:anywhere}
.cc-tijdlijn__weging{flex:0 0 auto;font-family:var(--cc-mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--cc-tekst-3)}
@media (max-width:639px){
  .cc-tijdlijn__regel{flex-wrap:wrap;gap:6px 12px}
  .cc-tijdlijn__datum{flex:0 0 auto}
  .cc-tijdlijn__tekst{flex:1 1 100%;order:3}
}

/* ==========================================================================
   18. Tierlijst
   ========================================================================== */
.cc-tiersectie{max-width:var(--cc-breed);margin:0 auto;padding:52px var(--cc-zij) 0}
.cc-tierblok{background:var(--cc-licht-2);border-radius:var(--cc-rond-groot);padding:22px 24px;
  display:grid;gap:18px}
.cc-tierblok__leeg,.cc-tierblok__inlog{margin:0;font-size:14.5px;line-height:1.6;color:var(--cc-tekst-2)}
.cc-tiergem{display:flex;align-items:center;gap:14px}
.cc-tiergroot{width:46px;height:46px;border-radius:12px;font-size:22px}
.cc-tiergem__tekst{font-family:var(--cc-mono);font-size:12.5px;color:var(--cc-tekst-3)}

.cc-tierstem{display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--cc-rand-licht)}
.cc-tierstem__label{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cc-tekst-3)}
.cc-tierknoppen{display:flex;flex-wrap:wrap;gap:8px}
.cc-tierknop{width:40px;height:40px;border:2px solid transparent;border-radius:11px;
  font-size:16px;font-weight:700;cursor:pointer;opacity:.55;transition:opacity .15s ease}
.cc-tierknop:hover{opacity:1}
.cc-tierknop.cc-actief{opacity:1;border-color:var(--cc-zwart)}
.cc-tierweg{justify-self:start;padding:0;border:0;background:transparent;
  font-size:13px;font-weight:600;color:var(--cc-tekst-3);cursor:pointer;text-decoration:underline}
.cc-tierweg:hover{color:var(--cc-rood)}
.cc-tierstem__uitleg{margin:0;font-size:12.5px;color:var(--cc-tekst-3)}

.cc-tierrij{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--cc-rand-licht-2)}
.cc-tierrij__letter{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.cc-tierrij__aantal{font-family:var(--cc-mono);font-size:10px;letter-spacing:.06em;color:var(--cc-tekst-3)}
.cc-tierrij__smaken{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,132px),1fr));gap:10px}
.cc-tierkaart{display:flex;flex-direction:column;gap:8px;padding:9px;background:var(--cc-licht-2);
  border-radius:14px;text-decoration:none;color:var(--cc-tekst)}
.cc-tierkaart:hover{background:var(--cc-licht-3);color:var(--cc-tekst);text-decoration:none}
.cc-tierkaart__beeld{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;
  border-radius:10px;overflow:hidden;background:radial-gradient(115% 85% at 50% 10%,#1D2422 0%,#0F1413 68%)}
.cc-tierkaart__beeld img{max-width:76%;max-height:76%;object-fit:contain}
.cc-tierkaart__naam{font-size:12.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em;overflow-wrap:anywhere}
.cc-tierkaart__stemmen{font-family:var(--cc-mono);font-size:10px;color:var(--cc-tekst-3)}
@media (max-width:639px){
  .cc-tierrij{grid-template-columns:60px minmax(0,1fr);gap:12px}
  .cc-tiergroot{width:38px;height:38px;font-size:18px}
  .cc-tierrij__smaken{grid-template-columns:repeat(auto-fill,minmax(min(100%,104px),1fr));gap:8px}
}

/* ==========================================================================
   19. Cadeaubalk
   ========================================================================== */
.cc-cadeaus{grid-column:1/-1;background:var(--cc-zwart);color:var(--cc-licht);
  border-radius:var(--cc-rond-groot);padding:22px 24px;display:grid;gap:18px}
.cc-cadeaus__kop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cc-cadeaus .cc-kicker{color:var(--cc-groen)}
.cc-cadeaus__stand{margin:8px 0 0;max-width:60ch;font-size:14.5px;line-height:1.6;color:var(--cc-tekst-donker-2)}
.cc-cadeaus__telling{flex:0 0 auto;padding:7px 13px;border-radius:var(--cc-rond);
  border:1px solid var(--cc-rand-donker-2);font-family:var(--cc-mono);font-size:11px;
  letter-spacing:.06em;color:var(--cc-tekst-donker-2)}

.cc-voortgang{position:relative;height:8px;border-radius:var(--cc-rond);background:var(--cc-rand-donker);margin:14px 0 26px}
.cc-voortgang__vulling{position:absolute;inset:0 auto 0 0;border-radius:var(--cc-rond);
  background:linear-gradient(90deg,var(--cc-groen-knop),var(--cc-groen));transition:width .3s ease}
.cc-voortgang__punt{position:absolute;top:50%;width:11px;height:11px;margin-left:-5.5px;
  border-radius:50%;background:var(--cc-zwart);border:2px solid var(--cc-rand-donker-2);transform:translateY(-50%)}
.cc-voortgang__punt.cc-behaald{background:var(--cc-groen);border-color:var(--cc-groen)}
.cc-voortgang__label{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  font-family:var(--cc-mono);font-size:9.5px;color:var(--cc-tekst-donker)}
.cc-voortgang__punt.cc-behaald .cc-voortgang__label{color:var(--cc-groen)}
@media (prefers-reduced-motion:reduce){.cc-voortgang__vulling{transition:none}}

.cc-cadeaukaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.cc-cadeaukaart{background:var(--cc-zwart-2);border:1px solid var(--cc-rand-donker-2);
  border-radius:16px;padding:15px 16px;display:grid;gap:10px;align-content:start}
.cc-cadeaukaart.cc-gekozen{border-color:var(--cc-groen-knop)}
.cc-cadeaukaart__kop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cc-cadeaukaart__titel{font-size:15px;font-weight:600;letter-spacing:-.015em}
.cc-cadeaukaart__badge{padding:4px 10px;border-radius:var(--cc-rond);background:var(--cc-rand-donker);
  color:var(--cc-tekst-donker-2);font-family:var(--cc-mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase}
.cc-cadeaukaart.cc-gekozen .cc-cadeaukaart__badge{background:var(--cc-groen);color:var(--cc-groen-diep)}
.cc-cadeaukaart__sub{font-family:var(--cc-mono);font-size:10.5px;color:var(--cc-tekst-donker);margin-top:-4px}
.cc-cadeaukeuzes{display:grid;gap:6px;align-content:start}
.cc-cadeaukeuze{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;
  border:1px solid transparent;border-radius:11px;background:transparent;color:var(--cc-tekst-donker-2);
  font-size:13.5px;text-align:left;cursor:pointer}
.cc-cadeaukeuze:hover{background:var(--cc-rand-donker);color:var(--cc-licht)}
.cc-cadeaukeuze.cc-actief{background:var(--cc-groen-diep);border-color:var(--cc-groen-knop);color:var(--cc-groen)}
.cc-cadeaukeuze__teken{flex:0 0 26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--cc-rand-donker);color:var(--cc-groen);
  font-family:var(--cc-mono);font-size:11px;font-weight:500}
.cc-cadeaukeuze.cc-actief .cc-cadeaukeuze__teken{background:var(--cc-groen);color:var(--cc-groen-diep)}
.cc-cadeaukeuze--geen .cc-cadeaukeuze__teken{color:var(--cc-tekst-donker)}
.cc-cadeaukeuze__naam{min-width:0;overflow-wrap:anywhere}

/* ==========================================================================
   20. Communitypagina
   ========================================================================== */
.cc-cijfers--licht{background:var(--cc-rand-licht);border-color:var(--cc-rand-licht);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));max-width:520px;margin-top:22px}
.cc-cijfers--licht .cc-cijfer{background:var(--cc-licht-2)}
.cc-cijfers--licht .cc-cijfer b{color:var(--cc-groen-donker)}
.cc-community__inlog{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:22px 0 0;font-size:14px}
.cc-ingang--straks{background:transparent;border:1px dashed var(--cc-rand-licht);color:var(--cc-tekst-3);cursor:default}
.cc-ingang--straks:hover{border-color:var(--cc-rand-licht)}
.cc-ingang--straks .cc-ingang__titel{color:var(--cc-tekst-2)}

/* Eén variant: geen kiezer, alleen tonen welk blik het is. */
.cc-enigblik{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px;
  padding:11px 15px;border:1px solid var(--cc-rand-licht);border-radius:14px}
.cc-enigblik .cc-vlag{width:22px;height:16px;border-radius:3px;box-shadow:0 0 0 1px rgba(16,20,19,.14)}
.cc-enigblik__tekst{font-size:14.5px;font-weight:500;letter-spacing:-.01em}

/* ==========================================================================
   21. Mijn account, afrekenen en winkelwagen als volle pagina
   ========================================================================== */
.cc-pagina--breed .cc-pagina__woo{max-width:none}
.cc-pagina--breed>h1{margin-bottom:22px}

/* --- Mijn account: menu links, inhoud rechts (zoals het ontwerp) --- */
.woocommerce-account .woocommerce{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,2fr);
  gap:34px;align-items:start}
@media (max-width:899px){.woocommerce-account .woocommerce{grid-template-columns:1fr;gap:20px}}

.woocommerce-MyAccount-navigation{position:sticky;top:96px;min-width:0}
@media (max-width:899px){.woocommerce-MyAccount-navigation{position:static;top:auto}}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
@media (max-width:899px){
  .woocommerce-MyAccount-navigation ul{display:flex;gap:6px;overflow-x:auto;
    white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none}
}
.woocommerce-MyAccount-navigation li a{display:block;padding:11px 14px;border-radius:12px;
  background:transparent;color:var(--cc-tekst-2);font-size:14px;font-weight:500;text-decoration:none}
.woocommerce-MyAccount-navigation li a:hover{background:var(--cc-licht-2);color:var(--cc-tekst);text-decoration:none}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--cc-zwart);color:var(--cc-licht)}
.woocommerce-MyAccount-content{min-width:0}
.woocommerce-MyAccount-content>p:first-child{font-size:15.5px;line-height:1.7;color:var(--cc-tekst-2)}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content legend{
  font-size:clamp(19px,2.1vw,25px);letter-spacing:-.025em;font-weight:700;
  margin:0 0 12px;padding-bottom:13px;border-bottom:1px solid var(--cc-rand-licht)}
.woocommerce-MyAccount-content fieldset{border:0;padding:0;margin:32px 0 0}

/* aanmeld- en inlogformulieren */
.woocommerce-form-login,.woocommerce-form-register,
.woocommerce-EditAccountForm,.woocommerce-address-fields{
  background:var(--cc-licht-2);border-radius:var(--cc-rond-groot);padding:24px 24px 26px;max-width:640px}
.woocommerce-form-login .form-row,.woocommerce-form-register .form-row{margin-bottom:14px}
.woocommerce-form-login-toggle,.woocommerce-form-coupon-toggle{margin-bottom:18px}
.u-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px}
.woocommerce-Addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px}
.woocommerce-Address{background:var(--cc-licht-2);border-radius:16px;padding:18px 20px}
.woocommerce-Address-title h3{font-size:16px;font-weight:600;margin-bottom:8px}
.woocommerce-Address address{font-style:normal;font-size:14.5px;line-height:1.7;color:var(--cc-tekst-2)}

/* bestellingen- en downloadtabellen */
.woocommerce-orders-table,.woocommerce-table--order-details,.shop_table{width:100%;
  border:1px solid var(--cc-rand-licht-2);border-radius:16px;border-collapse:separate;
  border-spacing:0;overflow:hidden;font-size:14.5px}
.woocommerce-orders-table th,.shop_table th{padding:12px 14px;text-align:left;background:var(--cc-licht-2);
  font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cc-tekst-3);font-weight:500}
.woocommerce-orders-table td,.shop_table td{padding:13px 14px;border-top:1px solid var(--cc-rand-licht-2)}
.woocommerce-orders-table__cell-order-actions .button{padding:8px 14px;font-size:12.5px}

/* lege staat van "mijn account" */
.woocommerce-info,.woocommerce-Message{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.woocommerce-info .button,.woocommerce-Message .button{margin-left:auto}

/* De winkelwagen zit nu in de pagina-omhulling; die zorgt al voor de marges. */
.cc-pagina--breed .cc-wagenpagina{max-width:none;padding:0}
.cc-pagina--breed .cc-wagenpagina--leeg{padding:0}
.cc-pagina--breed>.cc-pagina__woo>.woocommerce-message,
.cc-pagina--breed>.cc-pagina__woo>.woocommerce-info,
.cc-pagina--breed>.cc-pagina__woo>.cc-let-op--los{max-width:900px}

/* Knopjes in tabellen mogen kleiner dan de gewone knoppen. */
.woocommerce .woocommerce-orders-table td a.button,
.woocommerce .woocommerce-orders-table td .button,
.woocommerce table.shop_table td a.button{padding:8px 14px;font-size:12.5px;font-weight:600}

/* Afrekenen: twee kolommen op breed scherm, net als de winkelwagen. */
.woocommerce-checkout .cc-pagina__woo form.checkout{display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.9fr);gap:34px;align-items:start}
.woocommerce-checkout .cc-pagina__woo form.checkout>#customer_details{grid-column:1}
.woocommerce-checkout .cc-pagina__woo form.checkout>h3#order_review_heading{grid-column:2;margin:0 0 14px}
.woocommerce-checkout .cc-pagina__woo form.checkout>#order_review{grid-column:2;
  background:var(--cc-licht-2);border-radius:var(--cc-rond-groot);padding:22px 22px 24px;
  position:sticky;top:96px}
.woocommerce-checkout #order_review .shop_table{border:0;background:transparent}
.woocommerce-checkout #order_review .shop_table th{background:transparent;padding-left:0}
.woocommerce-checkout #order_review .shop_table td{padding-right:0;text-align:right}
.woocommerce-checkout #payment{background:transparent;padding:0;margin-top:16px}
.woocommerce-checkout #payment ul.payment_methods{padding:0;list-style:none;border-bottom:0}
.woocommerce-checkout #place_order{width:100%;height:54px;font-size:15.5px}
@media (max-width:1023px){
  .woocommerce-checkout .cc-pagina__woo form.checkout{grid-template-columns:1fr}
  .woocommerce-checkout .cc-pagina__woo form.checkout>#customer_details,
  .woocommerce-checkout .cc-pagina__woo form.checkout>h3#order_review_heading,
  .woocommerce-checkout .cc-pagina__woo form.checkout>#order_review{grid-column:1}
  .woocommerce-checkout .cc-pagina__woo form.checkout>#order_review{position:static;top:auto}
}
.woocommerce-checkout .col2-set{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px}
.woocommerce-checkout .col2-set .col-1,.woocommerce-checkout .col2-set .col-2{min-width:0}
.woocommerce-checkout h3{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:0 0 14px}

/* Afrekenen: het bestellingsoverzicht hoort bovenaan naast het formulier te
   beginnen, niet eronder. Daarom zetten we de rijen expliciet. */
.woocommerce-checkout .cc-pagina__woo form.checkout>#customer_details{grid-column:1;grid-row:1/span 2}
.woocommerce-checkout .cc-pagina__woo form.checkout>h3#order_review_heading{grid-column:2;grid-row:1}
.woocommerce-checkout .cc-pagina__woo form.checkout>#order_review{grid-column:2;grid-row:2}
@media (max-width:1023px){
  .woocommerce-checkout .cc-pagina__woo form.checkout>#customer_details,
  .woocommerce-checkout .cc-pagina__woo form.checkout>h3#order_review_heading,
  .woocommerce-checkout .cc-pagina__woo form.checkout>#order_review{grid-column:1;grid-row:auto}
}

/* De variantgegevens onder een regel in het besteloverzicht. */
.woocommerce td.product-name dl.variation{display:grid;grid-template-columns:auto 1fr;
  gap:2px 8px;margin:6px 0 0;font-family:var(--cc-mono);font-size:11px;color:var(--cc-tekst-3)}
.woocommerce td.product-name dl.variation dt{font-weight:400;margin:0}
.woocommerce td.product-name dl.variation dd{margin:0}
.woocommerce td.product-name dl.variation dd p{margin:0}
.woocommerce td.product-name .product-quantity{font-family:var(--cc-mono);font-size:12px;color:var(--cc-tekst-3)}
.woocommerce-checkout #order_review .shop_table td.product-name{text-align:left}
.woocommerce-checkout #order_review .shop_table tfoot th{text-align:left;padding-left:0}
.woocommerce-checkout #order_review .shop_table tfoot .order-total th,
.woocommerce-checkout #order_review .shop_table tfoot .order-total td{font-size:17px;font-weight:700}

/* WooCommerce's eigen knopkleur (paars) wint anders van de onze; deze
   selectors zijn specifieker zodat onze afrekenknop zwart en groen blijft. */
.woocommerce .cc-optelling__knop a.button,
.woocommerce .cc-optelling__knop a.checkout-button,
.woocommerce .cc-optelling__knop a.button.alt,
.cc-optelling__knop .checkout-button{
  display:flex;align-items:center;justify-content:center;width:100%;height:54px;
  padding:0;border-radius:var(--cc-rond);background:var(--cc-zwart);color:var(--cc-licht);
  font-size:15.5px;font-weight:600;text-decoration:none}
.woocommerce .cc-optelling__knop a.button:hover,
.woocommerce .cc-optelling__knop a.checkout-button:hover,
.woocommerce .cc-optelling__knop a.button.alt:hover,
.cc-optelling__knop .checkout-button:hover{background:var(--cc-groen-knop);color:var(--cc-groen-diep)}

/* Mocht er toch ergens een variantlijstje in een wagenregel belanden,
   dan blijft het klein in plaats van dat het de rij uit elkaar duwt. */
.cc-wagenregel dl.variation{display:grid;grid-template-columns:auto 1fr;gap:1px 6px;
  margin:5px 0 0;font-family:var(--cc-mono);font-size:11px;color:var(--cc-tekst-3)}
.cc-wagenregel dl.variation dt,.cc-wagenregel dl.variation dd{margin:0;font-weight:400}
.cc-wagenregel dl.variation p{margin:0}

/* ==========================================================================
   22. Leeftijdscheck (18+)
   ========================================================================== */
body.cc-poort-pagina{background:var(--cc-zwart);padding-bottom:0}
/* De kleur staat op het blok zelf, niet op de body: dan blijft de pagina
   leesbaar ook als die body-klasse er om wat voor reden dan ook niet is. */
.cc-poort{min-height:100vh;display:flex;flex-direction:column;
  background:var(--cc-zwart);color:var(--cc-licht)}
.cc-poort h1,.cc-poort .cc-logo__naam{color:var(--cc-licht)}
.cc-poort a{color:var(--cc-groen)}
.cc-poort .cc-knop--groen{color:var(--cc-groen-diep)}
.cc-poort .cc-taal a{color:var(--cc-tekst-donker)}
.cc-poort .cc-taal a.cc-actief{color:var(--cc-groen-diep)}
.cc-poort__kop{border-bottom:1px solid var(--cc-rand-donker)}
.cc-poort__kopbinnen{max-width:var(--cc-breed);margin:0 auto;padding:16px var(--cc-zij);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cc-poort__kopbinnen .cc-taal{margin-left:auto}
.cc-poort__midden{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:40px var(--cc-zij)}
.cc-poort__kaart{width:100%;max-width:900px;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);
  gap:44px;align-items:center}
@media (max-width:767px){.cc-poort__kaart{grid-template-columns:1fr;gap:28px}}
.cc-poort__beeld{min-width:0;display:flex;justify-content:center}
.cc-poort__blik{position:relative;width:100%;max-width:260px;aspect-ratio:3/4;
  background:radial-gradient(115% 85% at 50% 8%,#1D2422 0%,#0F1413 70%);
  border:1px solid var(--cc-rand-donker);border-radius:20px;
  display:flex;align-items:flex-end;justify-content:center;padding:18px}
.cc-poort__blik img{max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 16px 14px rgba(0,0,0,.55))}
.cc-poort__badge{position:absolute;top:14px;left:14px;padding:5px 12px;border-radius:var(--cc-rond);
  background:var(--cc-rood);color:var(--cc-licht);font-family:var(--cc-mono);font-size:10px;letter-spacing:.08em}
.cc-poort__tekst{min-width:0}
.cc-poort__kicker{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cc-groen)}
.cc-poort__kicker--nee{color:var(--cc-rood-licht)}
.cc-poort h1{margin:14px 0 0;font-size:clamp(25px,3.4vw,38px);line-height:1.04;
  letter-spacing:-.03em;font-weight:700;max-width:22ch}
.cc-poort__body{margin:13px 0 0;max-width:48ch;font-size:15.5px;line-height:1.6;color:var(--cc-tekst-donker-2)}
.cc-poort__label{display:block;font-family:var(--cc-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cc-tekst-donker);margin-top:26px}
.cc-poort__invoer{width:100%;max-width:320px;margin-top:9px;padding:16px 18px;
  border:1px solid var(--cc-rand-donker-2);border-radius:14px;background:var(--cc-zwart-2);
  color:var(--cc-licht);font-family:var(--cc-mono);font-size:22px;letter-spacing:.14em;outline:none}
.cc-poort__invoer:focus{border-color:var(--cc-groen-knop)}
.cc-poort__invoer::placeholder{color:#4A5250;letter-spacing:.14em}
.cc-poort__hint{margin:10px 0 0;max-width:44ch;font-size:12.5px;line-height:1.6;color:var(--cc-tekst-donker)}
.cc-poort__fout{display:flex;gap:11px;align-items:flex-start;margin-top:16px;padding:13px 15px;
  border:1px solid #3A2A24;border-radius:14px;background:#181312;max-width:420px}
.cc-poort__fout b{flex:0 0 auto;color:var(--cc-rood-licht)}
.cc-poort__fout span{min-width:0;font-size:13.5px;line-height:1.6;color:#E0C6BC}
.cc-poort__knoppen{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.cc-poort__knoppen .cc-knop{padding:14px 22px;font-size:14.5px}
.cc-poort a.cc-poort__knop2,.cc-poort__knop2{background:transparent;
  border:1px solid var(--cc-rand-donker-2);color:var(--cc-tekst-donker-2)}
.cc-poort a.cc-poort__knop2:hover,.cc-poort__knop2:hover{background:transparent;
  border-color:var(--cc-groen-knop);color:var(--cc-groen)}
.cc-poort__notities{list-style:none;display:grid;gap:9px;margin:26px 0 0;padding:20px 0 0;
  border-top:1px solid var(--cc-rand-donker)}
.cc-poort__notities li{display:flex;gap:10px;font-size:13px;line-height:1.6;color:var(--cc-tekst-donker)}
.cc-poort__notities li::before{content:"·";flex:0 0 auto;color:var(--cc-groen-knop)}
.cc-poort__slot{margin:22px 0 0;max-width:46ch;font-size:13px;line-height:1.6;color:var(--cc-tekst-donker)}
.cc-poort__voet{border-top:1px solid var(--cc-rand-donker)}
.cc-poort__voet{max-width:var(--cc-breed);margin:0 auto;width:100%;padding:22px var(--cc-zij);
  display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--cc-tekst-3)}
.cc-poort__voet span:last-child{margin-left:auto}

/* Uitleg onder een sectiekop, en het tierletterje op een kaart. */
.cc-sectiekop__uitleg{margin:-6px 0 16px;max-width:64ch;font-size:14.5px;line-height:1.6;color:var(--cc-tekst-2)}
.cc-tierkaart__beeld{position:relative}
.cc-tierkaart__tier{position:absolute;top:7px;left:7px;width:22px;height:22px;border-radius:7px;font-size:12px}

/* Kruislinks onder een categorie. */
.cc-kruislinks{padding-top:40px;margin-top:34px;border-top:1px solid var(--cc-rand-licht-2)}
.cc-kruislinks .cc-filters{margin-top:12px}

/* ==========================================================================
   23. Smaakdiscussie
   ========================================================================== */
.cc-discussie{max-width:var(--cc-breed);margin:0 auto;padding:52px var(--cc-zij) 0}
.cc-discussie__inlog{margin:0;font-size:14.5px;line-height:1.6;color:var(--cc-tekst-2)}

.cc-reactieform{display:grid;gap:10px;justify-items:start}
.cc-reactieform--nieuw{padding:16px;border:1px dashed #B9C0BC;border-radius:var(--cc-rond-kaart)}
.cc-reactieform textarea{width:100%;padding:13px 15px;border:1px solid var(--cc-rand-licht);
  border-radius:14px;background:#fff;font-family:var(--cc-font);font-size:14.5px;line-height:1.6;
  color:var(--cc-tekst);resize:vertical}
.cc-reactieform textarea:focus{outline:0;border-color:var(--cc-groen-knop)}
.cc-reactieform textarea::placeholder{color:var(--cc-tekst-3)}

.cc-reacties{display:grid;gap:14px;margin-top:16px}
.cc-reactie{display:flex;gap:14px;padding:17px;background:var(--cc-licht-2);border-radius:var(--cc-rond-kaart)}
.cc-reactie--antwoord{margin-left:40px;background:var(--cc-licht-3)}
@media (max-width:639px){.cc-reactie--antwoord{margin-left:16px}}
.cc-reactie__stemmen{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px}
.cc-reactie__stemmen form{margin:0}
.cc-stemknop{width:30px;height:26px;border:0;border-radius:9px;background:transparent;
  color:var(--cc-tekst-3);font-size:12px;line-height:1;cursor:pointer}
.cc-stemknop:hover{background:#D3DBD6;color:var(--cc-tekst)}
.cc-stemknop.cc-actief{background:var(--cc-zwart);color:var(--cc-groen)}
.cc-reactie__score{font-family:var(--cc-mono);font-size:12.5px;font-weight:500}
.cc-reactie__body{min-width:0;flex:1 1 auto}
.cc-reactie__kop{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.cc-reactie__naam{font-size:14.5px;font-weight:600;letter-spacing:-.012em}
.cc-reactie__badge{padding:3px 8px;border-radius:var(--cc-rond);background:var(--cc-zwart);
  color:var(--cc-groen);font-family:var(--cc-mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase}
.cc-reactie__tier{display:flex;align-items:center;gap:6px;font-family:var(--cc-mono);
  font-size:9.5px;letter-spacing:.06em;color:var(--cc-tekst-3)}
.cc-reactie__tier .cc-tier{width:17px;height:17px;border-radius:5px;font-size:10.5px}
.cc-reactie__tijd{font-family:var(--cc-mono);font-size:10px;letter-spacing:.05em;color:var(--cc-tekst-3)}
.cc-reactie__tekst{margin:8px 0 0;max-width:70ch;font-size:14.5px;line-height:1.65;
  color:var(--cc-tekst);overflow-wrap:anywhere}
.cc-antwoordvak{margin-top:11px}
.cc-antwoordvak summary{display:inline-block;font-family:var(--cc-mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cc-tekst-3);cursor:pointer;list-style:none}
.cc-antwoordvak summary::-webkit-details-marker{display:none}
.cc-antwoordvak summary:hover{color:var(--cc-tekst)}
.cc-antwoordvak[open] summary{margin-bottom:10px;color:var(--cc-tekst)}
.cc-antwoordvak .cc-reactieform{max-width:520px}

/* ==========================================================================
   24. Etalage van de webshop
   ========================================================================== */
.cc-hero--webshop .cc-hero__binnen{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr)}
@media (max-width:899px){.cc-hero--webshop .cc-hero__binnen{grid-template-columns:1fr}}
.cc-herofeiten{display:grid;gap:12px;margin:0}
.cc-herofeiten>div{padding-bottom:11px;border-bottom:1px solid var(--cc-rand-donker)}
.cc-herofeiten>div:last-child{border-bottom:0;padding-bottom:0}
.cc-herofeiten dt{font-family:var(--cc-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cc-tekst-donker)}
.cc-herofeiten dd{margin:5px 0 0;font-size:14.5px;line-height:1.5;color:var(--cc-licht)}

.cc-snelkoppelingen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:899px){.cc-snelkoppelingen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cc-snelkoppeling{display:flex;flex-direction:column;gap:5px;padding:16px 18px;
  background:var(--cc-licht-2);border:1px solid var(--cc-licht-2);border-radius:16px;text-decoration:none}
.cc-snelkoppeling:hover{border-color:var(--cc-zwart);text-decoration:none}
.cc-snelkoppeling__label{font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--cc-tekst)}
.cc-snelkoppeling__meta{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.05em;color:var(--cc-tekst-3)}

/* Afhalen en verzenden onder de koopknop, en de feitenregel eronder. */
.cc-usp{display:grid;gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid var(--cc-rand-licht-2)}
.cc-usp__titel{font-size:14.5px;font-weight:600;letter-spacing:-.008em}
.cc-usp__body{margin:3px 0 0;font-size:13.5px;line-height:1.5;color:var(--cc-tekst-3)}
.cc-feitenregel{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--cc-rand-licht-2);
  font-family:var(--cc-mono);font-size:11px;color:var(--cc-tekst-3)}
.cc-feitenregel b{font-weight:400;color:var(--cc-tekst)}
.cc-feitenregel a{color:var(--cc-groen-donker)}

/* Melding in de winkelwagen als er een tweede pakket bij komt. */
.cc-doosmelding{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--cc-licht-3);
  font-size:12.5px;line-height:1.55;color:var(--cc-tekst-2)}

/* ==========================================================================
   25. Overzicht: werkbalk boven, filters links, raster rechts
   ========================================================================== */
.cc-werkbalk{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:22px;padding:12px 0;border-top:1px solid var(--cc-rand-licht-2);
  border-bottom:1px solid var(--cc-rand-licht-2)}
.cc-werkbalk__telling{font-family:var(--cc-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cc-tekst-3)}
.cc-werkbalk__sorteren{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cc-werkbalk__label{font-family:var(--cc-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cc-tekst-3)}
.cc-werkbalk .cc-filter{padding:7px 13px;font-size:12.5px}

.cc-overzicht{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:34px;align-items:start;padding-top:26px}
@media (max-width:899px){.cc-overzicht{grid-template-columns:1fr;gap:18px}}
.cc-overzicht__raster{min-width:0}

.cc-zijfilters{min-width:0;position:sticky;top:96px;display:grid;gap:14px}
@media (max-width:899px){.cc-zijfilters{position:static;top:auto}}
.cc-zijfilters__kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:10px;border-bottom:1px solid var(--cc-rand-licht)}
.cc-zijfilters__kop span{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cc-tekst-3)}
.cc-zijfilters__kop a{font-size:12.5px;font-weight:600}
.cc-zijfilters__groep{display:grid;gap:2px}
.cc-zijfilters__blok{border-bottom:1px solid var(--cc-rand-licht-2);padding-bottom:12px}
.cc-zijfilters__blok summary{list-style:none;cursor:pointer;padding:4px 0;
  font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--cc-tekst)}
.cc-zijfilters__blok summary::-webkit-details-marker{display:none}
.cc-zijfilters__blok summary::after{content:"–";float:right;color:var(--cc-tekst-3);font-weight:400}
.cc-zijfilters__blok:not([open]) summary::after{content:"+"}
.cc-zijfilters__lijst{display:grid;gap:1px;margin-top:6px}

.cc-keuze,.cc-schakelaar{display:flex;align-items:center;gap:9px;padding:6px 6px 6px 0;
  font-size:13.5px;color:var(--cc-tekst-2);text-decoration:none;border-radius:8px}
.cc-keuze:hover,.cc-schakelaar:hover{background:var(--cc-licht-2);color:var(--cc-tekst);text-decoration:none}
.cc-keuze__vak,.cc-schakelaar__vak{flex:0 0 auto;width:16px;height:16px;border-radius:5px;
  border:1px solid var(--cc-rand-licht);background:#fff}
.cc-keuze.cc-actief .cc-keuze__vak,.cc-schakelaar.cc-actief .cc-schakelaar__vak{
  background:var(--cc-zwart);border-color:var(--cc-zwart);
  box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 9px var(--cc-groen)}
.cc-keuze.cc-actief,.cc-schakelaar.cc-actief{color:var(--cc-tekst);font-weight:500}
.cc-keuze__naam{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.cc-keuze__aantal{flex:0 0 auto;font-family:var(--cc-mono);font-size:10.5px;color:var(--cc-tekst-3)}

/* op het overzicht mag het raster smaller beginnen */
.cc-overzicht__raster .cc-raster{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
@media (max-width:639px){.cc-overzicht__raster .cc-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ==========================================================================
   26. Over deze smaak — donkere sectie met links de tekst en rechts
       de community (tierblok + smaakdiscussie). Zo staat het in het ontwerp.
   ========================================================================== */
.cc-smaakpaneel{background:var(--cc-zwart);color:var(--cc-licht);margin-top:60px}
.cc-smaakpaneel__binnen{max-width:var(--cc-breed);margin:0 auto;padding:52px var(--cc-zij);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:40px}
.cc-kicker--groen{color:var(--cc-groen)}
.cc-smaakpaneel__titel{margin:14px 0 0;font-size:clamp(26px,3.2vw,38px);line-height:1.05;
  letter-spacing:-.028em;font-weight:700;color:var(--cc-licht)}
.cc-smaaktags{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.cc-smaaktag{padding:7px 13px;border:1px solid var(--cc-rand-donker-2);border-radius:var(--cc-rond);
  font-family:var(--cc-mono);font-size:11px;color:#DCE0DE}
.cc-smaakpaneel__body{margin-top:22px}
.cc-smaakpaneel__body p{max-width:58ch;margin:0 0 14px;font-size:17.5px;line-height:1.6;
  color:#C6CBC9;text-wrap:pretty}
.cc-smaakpaneel__body p:last-child{margin-bottom:0}
.cc-smaakpaneel__body h2,.cc-smaakpaneel__body h3{color:var(--cc-licht);font-size:19px;margin:22px 0 8px}
.cc-smaakpaneel__body a{color:var(--cc-groen)}
.cc-smaakpaneel__body ul,.cc-smaakpaneel__body ol{max-width:58ch;color:#C6CBC9;line-height:1.6}

/* de rechterkolom */
.cc-smaakpaneel__community{padding-left:40px;border-left:1px solid var(--cc-rand-donker)}
@media (max-width:939px){
  .cc-smaakpaneel__community{padding-left:0;border-left:0;padding-top:30px;border-top:1px solid var(--cc-rand-donker)}
}
.cc-paneelkop{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-bottom:1px solid var(--cc-rand-donker);padding-bottom:13px;margin-bottom:20px}
.cc-paneelkop__titel{font-family:var(--cc-mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cc-groen)}
.cc-paneelkop__titel--grijs{color:var(--cc-tekst-donker)}
.cc-paneelkop__telling{font-family:var(--cc-mono);font-size:11px;color:#7B8481}
.cc-paneelkop--sub{border-bottom:0;padding-bottom:0;margin-bottom:16px}
.cc-paneelsort{display:flex;gap:12px}
.cc-paneelsort a{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:#7B8481}
.cc-paneelsort a:hover{color:var(--cc-licht)}
.cc-paneelsort a.cc-actief{color:var(--cc-groen)}

/* tierblok in de kolom */
.cc-smaakpaneel .cc-tierblok{background:transparent;border:0;border-radius:0;padding:0;display:block}
.cc-smaakpaneel .cc-tiergem{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.cc-smaakpaneel .cc-tiergroot{width:58px;height:58px;border-radius:18px;font-size:26px;
  font-weight:700;letter-spacing:-.02em;flex:0 0 auto;color:var(--cc-groen-diep)}
.cc-tier--leeg{background:var(--cc-rand-donker-2);color:var(--cc-tekst-donker)}
.cc-tiergem__uitleg{min-width:0}
.cc-tiergem__label{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:#7B8481}
.cc-tiergem__zin{font-size:15px;color:#DCE0DE;margin-top:5px;line-height:1.35}
.cc-tiergem__zin b{font-weight:600;color:var(--cc-licht)}
.cc-smaakpaneel .cc-tierstem{display:block;padding-top:0;border-top:0}
.cc-smaakpaneel .cc-tierknoppen{display:flex;gap:5px;flex-wrap:nowrap}
.cc-smaakpaneel .cc-tierknop{flex:1 1 0;min-width:0;width:auto;height:auto;padding:10px 0 8px;
  border:1px solid transparent;border-radius:12px;display:flex;flex-direction:column;
  align-items:center;gap:3px;color:var(--cc-groen-diep);opacity:1;cursor:pointer}
.cc-smaakpaneel .cc-tierknop:hover{border-color:var(--cc-groen-knop)}
.cc-smaakpaneel .cc-tierknop.cc-actief{border-color:var(--cc-licht);box-shadow:0 0 0 2px var(--cc-zwart) inset}
.cc-tierknoppen--kijk .cc-tierknop{cursor:default}
.cc-tierknop__letter{font-family:var(--cc-mono);font-size:13px;letter-spacing:.04em}
.cc-tierknop__aantal{font-family:var(--cc-mono);font-size:9.5px;opacity:.7}
.cc-tiersamenvatting{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:#8B9491}
.cc-tiersamenvatting a{color:var(--cc-groen)}
.cc-smaakpaneel .cc-tierweg{color:#8B9491;margin-left:8px;font-size:13px;text-decoration:underline}
.cc-smaakpaneel .cc-tierweg:hover{color:var(--cc-rood-licht)}
.cc-tierlink{display:inline-block;margin-top:14px;font-family:var(--cc-mono);font-size:10.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--cc-groen)}

/* discussie in de kolom */
.cc-discussieblok{margin-top:26px;padding-top:22px;border-top:1px solid var(--cc-rand-donker)}
.cc-nieuwvak{margin-bottom:18px}
.cc-nieuwvak>summary{display:inline-block;padding:7px 14px;border:1px solid var(--cc-rand-donker-2);
  border-radius:var(--cc-rond);font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--cc-licht);cursor:pointer;list-style:none}
.cc-nieuwvak>summary::-webkit-details-marker{display:none}
.cc-nieuwvak>summary:hover{background:var(--cc-groen-knop);color:var(--cc-groen-diep);border-color:var(--cc-groen-knop)}
.cc-smaakpaneel .cc-reactieform--nieuw{margin-top:12px;padding:14px;border:1px solid var(--cc-rand-donker-2);
  border-radius:16px;background:var(--cc-zwart)}
.cc-smaakpaneel .cc-reactieform textarea{background:#0F1413;border:1px solid var(--cc-rand-donker);
  color:var(--cc-licht);border-radius:12px;font-size:13.5px}
.cc-smaakpaneel .cc-reactieform textarea::placeholder{color:#7B8481}
.cc-smaakpaneel .cc-knop{background:var(--cc-groen-knop);color:var(--cc-groen-diep)}
.cc-smaakpaneel .cc-knop:hover{background:var(--cc-groen-knop-hover)}
.cc-smaakpaneel .cc-discussie__inlog{margin:0 0 16px;font-size:13.5px;line-height:1.6;color:#8B9491}
.cc-smaakpaneel .cc-discussie__inlog a{color:var(--cc-groen)}
.cc-smaakpaneel .cc-reacties{display:grid;gap:18px;margin-top:16px}
.cc-smaakpaneel .cc-reactie{background:transparent;padding:0;gap:12px}
.cc-smaakpaneel .cc-reactie--antwoord{margin-left:26px;background:transparent;
  padding-left:14px;border-left:1px solid var(--cc-rand-donker)}
.cc-smaakpaneel .cc-stemknop{color:#7B8481}
.cc-smaakpaneel .cc-stemknop:hover,.cc-smaakpaneel .cc-stemknop.cc-actief{color:var(--cc-groen)}
.cc-smaakpaneel .cc-reactie__score{font-family:var(--cc-mono);font-size:11px;color:#DCE0DE}
.cc-smaakpaneel .cc-reactie__naam{color:var(--cc-licht)}
.cc-smaakpaneel .cc-reactie__tijd,.cc-smaakpaneel .cc-reactie__tier{color:#7B8481}
.cc-smaakpaneel .cc-reactie__tekst{color:#C6CBC9;font-size:14px;line-height:1.6}
.cc-smaakpaneel .cc-antwoordvak>summary{color:#8B9491;font-family:var(--cc-mono);font-size:10.5px;
  letter-spacing:.07em;text-transform:uppercase}
.cc-smaakpaneel .cc-antwoordvak>summary:hover{color:var(--cc-licht)}
.cc-smaakpaneel .cc-let-op{background:#1A1310;border-color:#3A2A24;color:#E8C6B8}

/* ==========================================================================
   27. Webshoppagina — uitgelichte smaak en de rij snelle filters
   ========================================================================== */
.cc-sectiekop--lijn{padding-bottom:14px;border-bottom:1px solid var(--cc-rand-licht);align-items:flex-end}

/* Nieuw op de plank: één grote kaart, twee gewone ernaast */
.cc-spot{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;
  margin-top:22px;align-items:stretch}
.cc-spot__naast{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;min-width:0}
@media (max-width:1023px){
  .cc-spot{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:479px){
  .cc-spot__naast{grid-template-columns:minmax(0,1fr)}
}

.cc-uitgelicht{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:6px;
  background:var(--cc-zwart);color:var(--cc-licht);border-radius:var(--cc-rond-groot);
  padding:9px;min-width:0}
@media (max-width:639px){.cc-uitgelicht{grid-template-columns:minmax(0,1fr)}}
.cc-uitgelicht__beeld{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;
  background:radial-gradient(115% 85% at 50% 10%,#1D2422 0%,#0F1413 68%);display:block}
.cc-uitgelicht__beeld img{position:absolute;inset:11%;margin:auto;width:auto;height:auto;
  max-width:100%;max-height:100%;object-fit:contain}
.cc-uitgelicht__geenfoto{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:14%;text-align:center;font-family:var(--cc-mono);font-size:10.5px;line-height:1.7;
  color:var(--cc-tekst-donker);letter-spacing:.04em}
.cc-uitgelicht__badge{position:absolute;top:11px;left:11px;padding:5px 11px;border-radius:var(--cc-rond);
  background:var(--cc-groen);color:var(--cc-groen-diep);font-family:var(--cc-mono);font-size:9px;
  letter-spacing:.08em;text-transform:uppercase}
.cc-uitgelicht__vlag{position:absolute;top:11px;right:11px;width:26px;height:19px;border-radius:3px;
  box-shadow:0 0 0 1px rgba(243,244,243,.25);background-size:cover;background-position:center}
.cc-uitgelicht__body{display:flex;flex-direction:column;gap:13px;padding:16px 18px 12px;min-width:0}
.cc-uitgelicht__reeks{font-family:var(--cc-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cc-groen)}
.cc-uitgelicht__naam{margin:8px 0 0;font-size:clamp(20px,2.4vw,27px);font-weight:700;
  letter-spacing:-.028em;line-height:1.12}
.cc-uitgelicht__naam a{color:var(--cc-licht)}
.cc-uitgelicht__naam a:hover{color:var(--cc-groen)}
.cc-uitgelicht__tekst{margin:10px 0 0;max-width:42ch;font-size:14.5px;line-height:1.6;
  color:var(--cc-tekst-donker-2);text-wrap:pretty}
.cc-uitgelicht__feiten{display:grid;gap:7px;margin:0}
.cc-uitgelicht__feiten>div{display:flex;gap:12px;align-items:baseline}
.cc-uitgelicht__feiten dt{flex:0 0 84px;font-family:var(--cc-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cc-tekst-donker)}
.cc-uitgelicht__feiten dd{margin:0;min-width:0;font-size:14px}
.cc-uitgelicht__voet{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.cc-uitgelicht__prijs{font-size:21px;font-weight:700;letter-spacing:-.025em}
.cc-uitgelicht__prijs del{opacity:.5;font-weight:500;font-size:15px}
.cc-uitgelicht__voorraad{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.05em;
  color:var(--cc-tekst-donker)}

/* Snel filteren: één rij pillen */
.cc-pilrij{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.cc-pilfilter{display:flex;align-items:baseline;gap:8px;padding:9px 15px;
  border:1px solid var(--cc-rand-licht);border-radius:var(--cc-rond);
  font-size:13.5px;font-weight:500;color:var(--cc-tekst)}
.cc-pilfilter:hover{border-color:var(--cc-zwart);background:var(--cc-licht-2);color:var(--cc-tekst)}
.cc-pilfilter.cc-actief{border-color:var(--cc-zwart);background:var(--cc-zwart);color:var(--cc-licht)}
.cc-pilfilter .cc-vlag{align-self:center}
.cc-pilfilter__aantal{font-family:var(--cc-mono);font-size:10px;color:var(--cc-tekst-3)}
.cc-pilfilter.cc-actief .cc-pilfilter__aantal{color:var(--cc-tekst-donker-2)}

/* de twee merkblokken op de webshoppagina */
.cc-merkblokken{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
.cc-merkblok{display:flex;flex-direction:column;gap:12px;border-radius:var(--cc-rond-groot);padding:26px 24px}
.cc-merkblok--donker{background:var(--cc-zwart);color:var(--cc-licht)}
.cc-merkblok--licht{background:var(--cc-licht-2);color:var(--cc-tekst)}
.cc-merkblok__kicker{font-family:var(--cc-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.cc-merkblok--donker .cc-merkblok__kicker{color:var(--cc-groen)}
.cc-merkblok--licht .cc-merkblok__kicker{color:var(--cc-tekst-3)}
.cc-merkblok__titel{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.08}
.cc-merkblok__body{margin:0;max-width:42ch;font-size:14.5px;line-height:1.6;text-wrap:pretty}
.cc-merkblok--donker .cc-merkblok__body{color:var(--cc-tekst-donker-2)}
.cc-merkblok--licht .cc-merkblok__body{color:var(--cc-tekst-2)}
.cc-merkblok__pillen{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.cc-merkpil{padding:8px 14px;border:1px solid;border-radius:var(--cc-rond);font-size:13px;font-weight:500}
.cc-merkblok--donker .cc-merkpil{border-color:var(--cc-rand-donker-2);color:var(--cc-licht)}
.cc-merkblok--donker .cc-merkpil:hover{background:var(--cc-groen-knop);border-color:var(--cc-groen-knop);color:var(--cc-groen-diep)}
.cc-merkblok--licht .cc-merkpil{border-color:var(--cc-rand-licht);color:var(--cc-tekst)}
.cc-merkblok--licht .cc-merkpil:hover{background:var(--cc-zwart);border-color:var(--cc-zwart);color:var(--cc-licht)}
.cc-merkblok__cta{margin-top:auto;padding-top:12px;font-size:13.5px;font-weight:600}
.cc-merkblok--donker .cc-merkblok__cta{color:var(--cc-groen)}
.cc-merkblok--licht .cc-merkblok__cta{color:var(--cc-groen-donker)}

/* Openingstijden: klikbaar om de hele week te zien */
.cc-tijden{display:block}
.cc-tijden>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;cursor:pointer;list-style:none}
.cc-tijden>summary::-webkit-details-marker{display:none}
.cc-tijden__knop{font-size:13px;font-weight:600;color:var(--cc-groen-donker)}
.cc-tijden>summary:hover .cc-tijden__knop{color:var(--cc-tekst)}
.cc-tijden:not([open]) .cc-tijden__verberg{display:none}
.cc-tijden[open] .cc-tijden__toon{display:none}
.cc-tijden__lijst{display:grid;gap:5px;margin-top:10px;padding:12px 14px;
  background:var(--cc-licht);border-radius:12px}
.cc-tijden__lijst>span{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;line-height:1.5}
.cc-tijden__lijst>span>span:first-child{color:var(--cc-tekst-2)}
.cc-tijden__lijst>span>span:last-child{font-family:var(--cc-mono);font-size:12.5px}

/* ==========================================================================
   28. Afrekenen — twee kolommen, kaarten links, je bestelling rechts
   ========================================================================== */
.woocommerce-checkout .cc-pagina__woo form.checkout.cc-afreken{display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:26px;align-items:start}
@media (max-width:979px){
  .woocommerce-checkout .cc-pagina__woo form.checkout.cc-afreken{grid-template-columns:minmax(0,1fr)}
}
.cc-afreken__kolom{display:grid;gap:18px;min-width:0}
.cc-afkaart{background:#fff;border:1px solid var(--cc-rand-licht-2);border-radius:var(--cc-rond-groot);
  padding:22px 24px}
.cc-afkaart__titel{margin:0 0 16px;font-size:18px;font-weight:700;letter-spacing:-.02em}
.cc-afreken__velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:26px}
.cc-afreken__velden h3{font-size:12px;font-family:var(--cc-mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--cc-tekst-3);margin:0 0 12px;font-weight:500}
.cc-afreken .woocommerce-billing-fields__field-wrapper,
.cc-afreken .woocommerce-shipping-fields__field-wrapper,
.cc-afreken .woocommerce-additional-fields__field-wrapper{display:grid;gap:12px}
.cc-afreken p.form-row{margin:0;padding:0;float:none;width:auto}
.cc-afreken label{display:block;font-family:var(--cc-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cc-tekst-3);margin-bottom:5px}
.cc-afreken .required{color:var(--cc-rood);text-decoration:none}
.cc-afreken input[type=text],.cc-afreken input[type=email],.cc-afreken input[type=tel],
.cc-afreken input[type=password],.cc-afreken textarea,.cc-afreken select,
.cc-afreken .select2-container .select2-selection{
  width:100%;padding:11px 13px;border:1px solid var(--cc-rand-licht);border-radius:12px;
  background:var(--cc-licht);font-family:var(--cc-font);font-size:14.5px;color:var(--cc-tekst)}
.cc-afreken input:focus,.cc-afreken textarea:focus,.cc-afreken select:focus{
  outline:2px solid var(--cc-groen-knop);outline-offset:1px;border-color:transparent}

/* afhaalpunt */
.cc-afhaalkaart{background:var(--cc-zwart);color:var(--cc-licht);border-radius:var(--cc-rond-groot);
  padding:22px 24px}
.cc-afhaalkaart__naam{margin-top:10px;font-size:19px;font-weight:700;letter-spacing:-.02em}
.cc-afhaalkaart__adres{font-size:14.5px;color:var(--cc-tekst-donker-2);margin-top:3px}
.cc-afhaalkaart__mail{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--cc-rand-donker);
  font-size:13.5px;line-height:1.6;color:var(--cc-tekst-donker)}

/* verzamelaarscontrole */
.cc-afreken .cc-verzamelkaart__keuze,
.cc-afreken .cc-verzamelkaart__keuze span{display:block;font-family:var(--cc-font);font-size:15px;
  font-weight:400;letter-spacing:normal;text-transform:none;color:var(--cc-tekst);margin-bottom:0}
.cc-afreken .cc-verzamelkaart__keuze{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.cc-afreken .cc-verzamelkaart__keuze b{font-weight:600}
.cc-verzamelkaart__keuze input{margin-top:3px;width:18px;height:18px;accent-color:var(--cc-groen-knop)}
.cc-afreken .cc-verzamelkaart__sub{display:block;margin-top:5px;font-size:13.5px;line-height:1.6;
  color:var(--cc-tekst-3)}
.cc-butsjeslijst{display:grid;gap:3px;margin-top:8px;font-size:13.5px}

/* je bestelling */
.cc-afreken__samenvatting{position:sticky;top:96px;min-width:0}
@media (max-width:979px){.cc-afreken__samenvatting{position:static;top:auto}}
.cc-samenvatting{background:#fff;border:1px solid var(--cc-rand-licht-2);
  border-radius:var(--cc-rond-groot);padding:20px 22px}
.cc-paneelkop--licht{border-bottom-color:var(--cc-rand-licht)}
.cc-paneelkop--licht .cc-paneelkop__titel{color:var(--cc-tekst-3)}
.cc-paneelkop--licht .cc-paneelkop__telling{color:var(--cc-groen-donker);font-weight:600}
.cc-samenvatting .shop_table{width:100%;border:0;background:transparent;border-collapse:collapse}
.cc-samenvatting .shop_table th,.cc-samenvatting .shop_table td{padding:9px 0;border:0;
  font-size:14px;vertical-align:top}
.cc-samenvatting .shop_table thead th{font-family:var(--cc-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cc-tekst-3);font-weight:500}
.cc-samenvatting .shop_table td:last-child,.cc-samenvatting .shop_table th:last-child{text-align:right}
.cc-samenvatting .shop_table tfoot th{font-weight:500;color:var(--cc-tekst-3)}
.cc-samenvatting .shop_table tfoot .order-total th,
.cc-samenvatting .shop_table tfoot .order-total td{padding-top:14px;border-top:1px solid var(--cc-rand-licht);
  font-size:18px;font-weight:700;color:var(--cc-tekst)}
.cc-samenvatting .product-quantity{font-family:var(--cc-mono);font-size:12px;color:var(--cc-tekst-3)}
.cc-samenvatting__vertrouwen{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--cc-rand-licht-2);
  font-size:12.5px;line-height:1.6;color:var(--cc-tekst-3)}

/* betalen */
.cc-betaalkaart #payment{background:transparent;padding:0;border-radius:0}
.cc-betaalkaart ul.payment_methods{margin:0;padding:0;list-style:none;border:0;display:grid;gap:10px}
.cc-betaalkaart ul.payment_methods li{padding:14px 16px;border:1px solid var(--cc-rand-licht);
  border-radius:14px;background:var(--cc-licht)}
.cc-betaalkaart ul.payment_methods li label{display:inline;font-family:var(--cc-font);font-size:15px;
  letter-spacing:normal;text-transform:none;color:var(--cc-tekst);margin:0}
.cc-betaalkaart div.payment_box{background:#fff;border-radius:12px;margin-top:10px;font-size:13.5px}
.cc-betaalkaart div.payment_box::before{display:none}
.cc-betaalkaart .form-row.place-order{margin-top:18px;padding:0}
.cc-betaalkaart #place_order{width:100%;height:54px;border:0;border-radius:var(--cc-rond);
  background:var(--cc-groen-knop);color:var(--cc-groen-diep);font-family:var(--cc-font);
  font-size:15.5px;font-weight:600;cursor:pointer}
.cc-betaalkaart #place_order:hover{background:var(--cc-groen-knop-hover)}
.cc-betaalkaart .woocommerce-terms-and-conditions-wrapper{font-size:13px;color:var(--cc-tekst-3)}

/* ==========================================================================
   29. Na het afrekenen — bevestiging, afhaalcode en de community
   ========================================================================== */
.cc-gelukt{margin:calc(-1 * var(--cc-zij)) calc(-1 * var(--cc-zij)) 0}
.cc-gelukt__kop{background:var(--cc-zwart);color:var(--cc-licht);padding:44px var(--cc-zij) 40px}
.cc-gelukt__kop>*{max-width:var(--cc-breed);margin-left:auto;margin-right:auto}
.cc-gelukt__vink{display:inline-flex;align-items:center;gap:10px;font-family:var(--cc-mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cc-groen)}
.cc-gelukt__vinkje{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--cc-groen);color:var(--cc-groen-diep);font-size:14px}
.cc-gelukt__kop h1{margin:16px auto 0;font-size:clamp(28px,4vw,44px);line-height:1.03;
  letter-spacing:-.03em;font-weight:700}
.cc-gelukt__lede{margin:12px auto 0;max-width:62ch;font-size:16px;line-height:1.6;color:#C6CBC9}
.cc-gelukt__meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;font-family:var(--cc-mono);
  font-size:11px;letter-spacing:.06em;color:var(--cc-tekst-donker)}
.cc-gelukt__meta b{color:var(--cc-licht)}
.cc-gelukt__binnen{max-width:var(--cc-breed);margin:0 auto;padding:32px var(--cc-zij) 0;
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:26px;align-items:start}
@media (max-width:979px){.cc-gelukt__binnen{grid-template-columns:minmax(0,1fr)}}
.cc-gelukt__kolom{display:grid;gap:18px;min-width:0}
.cc-gelukt__zij{display:grid;gap:14px;min-width:0}

.cc-gemeenschap{background:var(--cc-zwart);color:var(--cc-licht);border-radius:var(--cc-rond-groot);
  padding:26px 24px}
.cc-gemeenschap h2{margin:12px 0 0;font-size:clamp(20px,2.4vw,27px);line-height:1.1;
  letter-spacing:-.028em;font-weight:700}
.cc-gemeenschap>p{margin:12px 0 0;max-width:56ch;font-size:15px;line-height:1.6;color:#C6CBC9}
.cc-gemeenschap__typen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:1px;margin-top:22px;background:var(--cc-rand-donker);border-radius:16px;overflow:hidden}
.cc-gemeenschap__typen>div{background:#0F1413;padding:16px 18px}
.cc-gemeenschap__type{font-family:var(--cc-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cc-groen)}
.cc-gemeenschap__typen p{margin:7px 0 0;font-size:13.5px;line-height:1.55;color:var(--cc-tekst-donker-2)}
.cc-gemeenschap__voet{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.cc-gemeenschap__voet .cc-knop{background:transparent;border:1px solid var(--cc-rand-donker-2);color:var(--cc-licht)}
.cc-gemeenschap__voet .cc-knop:hover{background:var(--cc-rand-donker);color:var(--cc-licht)}
.cc-gemeenschap__voet .cc-knop--groen{background:var(--cc-groen-knop);border-color:var(--cc-groen-knop);color:var(--cc-groen-diep)}
.cc-gemeenschap__voet .cc-knop--groen:hover{background:var(--cc-groen-knop-hover);color:var(--cc-groen-diep)}
.cc-gemeenschap__gratis{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.06em;color:var(--cc-tekst-donker)}

.cc-afhaalcode{background:var(--cc-zwart);color:var(--cc-licht);border-radius:var(--cc-rond-groot);padding:26px 24px}
.cc-afhaalcode__code{margin-top:10px;font-family:var(--cc-mono);font-size:clamp(24px,3.4vw,34px);
  letter-spacing:.06em;font-weight:600;color:var(--cc-groen)}
.cc-afhaalcode p{margin:10px 0 0;max-width:56ch;font-size:14.5px;line-height:1.6;color:#C6CBC9}
.cc-afhaalcode__later{color:var(--cc-tekst-donker)!important;font-size:13.5px!important}
.cc-afhaalcode__alcohol{display:flex;align-items:flex-start;gap:10px;margin-top:16px!important;
  padding:12px 14px;border-radius:14px;background:#1A1310;border:1px solid #3A2A24;
  color:#E8C6B8!important;font-size:13.5px!important}
.cc-afhaalcode .cc-knop{margin-top:16px;background:transparent;border:1px solid var(--cc-rand-donker-2);color:var(--cc-licht)}
.cc-afhaalcode .cc-knop:hover{background:var(--cc-rand-donker);color:var(--cc-licht)}
.cc-afhaalcode--tt .cc-afhaalcode__code{color:var(--cc-licht);font-size:22px}

.cc-straks h2{margin:0 0 14px;font-size:20px;font-weight:700;letter-spacing:-.02em}
.cc-straks__lijst{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cc-straks__lijst li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;
  background:var(--cc-licht-2);border-radius:var(--cc-rond-kaart)}
.cc-straks__nr{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--cc-zwart);color:var(--cc-groen);font-family:var(--cc-mono);font-size:11px}
.cc-straks__lijst b{display:block;font-size:15px;letter-spacing:-.01em}
.cc-straks__lijst b+span{display:block;margin-top:3px;font-size:13.5px;line-height:1.55;color:var(--cc-tekst-3)}

.cc-bestelkaart{background:#fff;border:1px solid var(--cc-rand-licht-2);border-radius:var(--cc-rond-groot);
  padding:20px 22px}
.cc-bestelkaart .shop_table{width:100%;border:0;background:transparent;border-collapse:collapse}
.cc-bestelkaart .shop_table th,.cc-bestelkaart .shop_table td{padding:9px 0;border:0;font-size:14px;
  vertical-align:top}
.cc-bestelkaart .shop_table td:last-child,.cc-bestelkaart .shop_table th:last-child{text-align:right}
.cc-bestelkaart h2,.cc-bestelkaart .woocommerce-column__title{font-size:13px;font-family:var(--cc-mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--cc-tekst-3);margin:18px 0 8px;font-weight:500}
.cc-bestelkaart .woocommerce-order-overview{display:none}
.cc-cadeaukaart{background:var(--cc-licht-2);border-radius:var(--cc-rond-groot);padding:18px 20px}
.cc-cadeaukaart__naam{margin-top:8px;font-size:16px;font-weight:600;letter-spacing:-.015em}
.cc-cadeaukaart p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--cc-tekst-3)}
.cc-knop--breed{display:flex;align-items:center;justify-content:center;width:100%}

/* Weergaveschakelaar en prijsfilter op het overzicht */
.cc-weergave{display:inline-flex;border:1px solid var(--cc-rand-licht);border-radius:var(--cc-rond);
  overflow:hidden;margin-bottom:16px}
.cc-weergave__knop{padding:9px 16px;font-size:13px;font-weight:600;color:var(--cc-tekst);background:transparent}
.cc-weergave__knop:hover{background:var(--cc-licht-2);color:var(--cc-tekst)}
.cc-weergave__knop.cc-actief{background:var(--cc-zwart);color:var(--cc-licht)}
.cc-prijsfilter{display:flex;align-items:center;gap:6px;padding-top:4px}
.cc-prijsfilter input{width:100%;min-width:0;padding:8px 9px;border:1px solid var(--cc-rand-licht);
  border-radius:10px;background:#fff;font-family:var(--cc-mono);font-size:12.5px;color:var(--cc-tekst)}
.cc-prijsfilter input::-webkit-outer-spin-button,
.cc-prijsfilter input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cc-prijsfilter span{color:var(--cc-tekst-3)}
.cc-prijsfilter button{flex:0 0 auto;padding:8px 12px;border:0;border-radius:10px;
  background:var(--cc-zwart);color:var(--cc-licht);font-family:var(--cc-mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.cc-prijsfilter button:hover{background:var(--cc-groen-knop);color:var(--cc-groen-diep)}

/* ==========================================================================
   30. Profiel — collectiekast, landen en geprobeerd
   ========================================================================== */
.cc-leegprofiel{max-width:60ch;margin:0 auto;padding:60px 0;text-align:center}
.cc-leegprofiel h1{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em;margin:0 0 12px}
.cc-leegprofiel p{font-size:16px;line-height:1.6;color:var(--cc-tekst-2);margin:0 0 22px}

.cc-profielkop{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px;
  align-items:center;padding:32px 0 26px;border-bottom:1px solid var(--cc-rand-licht)}
@media (max-width:839px){.cc-profielkop{grid-template-columns:minmax(0,1fr)}}
.cc-profielkop__wie{display:flex;gap:18px;align-items:flex-start;min-width:0}
.cc-profielkop__foto{border-radius:50%;flex:0 0 auto}
.cc-profielkop h1{margin:8px 0 0;font-size:clamp(24px,3vw,34px);line-height:1.05;letter-spacing:-.03em}
.cc-profielkop__bio{margin:10px 0 0;max-width:52ch;font-size:14.5px;line-height:1.6;color:var(--cc-tekst-2)}
.cc-profielkop__cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;
  background:var(--cc-rand-licht);border-radius:var(--cc-rond-kaart);overflow:hidden}
.cc-profielkop__cijfers>div{background:var(--cc-licht-2);padding:14px 16px}
.cc-profielkop__cijfers dt{font-family:var(--cc-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cc-tekst-3)}
.cc-profielkop__cijfers dd{margin:6px 0 0;font-size:24px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cc-profielkop__knoppen{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px}

.cc-profieltabs{display:flex;flex-wrap:wrap;gap:4px;margin:22px 0 26px;
  border-bottom:1px solid var(--cc-rand-licht)}
.cc-profieltabs a{padding:11px 16px;font-size:14px;font-weight:600;color:var(--cc-tekst-3);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.cc-profieltabs a:hover{color:var(--cc-tekst)}
.cc-profieltabs a.cc-actief{color:var(--cc-tekst);border-bottom-color:var(--cc-groen-knop)}

.cc-kast__nieuwplank{display:flex;gap:8px;align-items:center}
.cc-kast__nieuwplank input{padding:9px 12px;border:1px solid var(--cc-rand-licht);border-radius:var(--cc-rond);
  background:#fff;font-family:var(--cc-font);font-size:13.5px;min-width:150px}
.cc-kast__uitleg{margin:16px 0 0;max-width:62ch;font-size:14.5px;line-height:1.6;color:var(--cc-tekst-2)}
.cc-kast__leeg{margin-top:20px;padding:26px;background:var(--cc-licht-2);border-radius:var(--cc-rond-groot);
  text-align:center}
.cc-kast__leeg p{margin:0 0 16px;font-size:15px;color:var(--cc-tekst-2)}

.cc-plank{margin-top:24px}
.cc-plank__kop{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:8px}
.cc-plank__naam{font-size:16px;font-weight:600;letter-spacing:-.015em}
.cc-plank__aantal{font-family:var(--cc-mono);font-size:11px;color:var(--cc-tekst-3)}
.cc-plank__rij{display:flex;gap:12px;overflow-x:auto;padding:16px;background:var(--cc-licht-2);
  border-radius:var(--cc-rond-groot);border-bottom:4px solid var(--cc-rand-licht);
  scrollbar-width:thin;align-items:flex-end;min-height:150px}
.cc-plank__leeg{margin:0;font-size:13.5px;color:var(--cc-tekst-3)}
.cc-plankblik{position:relative;flex:0 0 auto;width:108px;margin:0;text-align:center}
.cc-plankblik img{width:100%;height:120px;object-fit:contain;margin:0 auto}
.cc-plankblik__geen{display:flex;align-items:center;justify-content:center;height:120px;
  background:var(--cc-licht-3);border-radius:10px;font-family:var(--cc-mono);font-size:10px;
  color:var(--cc-tekst-3);text-align:center;padding:8px}
.cc-plankblik__vlag{position:absolute;top:2px;right:2px;width:20px;height:14px;border-radius:2px;
  background-size:cover;background-position:center;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.cc-plankblik figcaption{margin-top:7px;font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.cc-plankblik figcaption span{display:block;font-family:var(--cc-mono);font-size:10px;color:var(--cc-tekst-3)}
.cc-plankblik__weg{position:absolute;top:0;left:0}
.cc-plankblik__weg button{width:22px;height:22px;border:0;border-radius:50%;background:rgba(11,14,13,.75);
  color:#fff;font-size:13px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s ease}
.cc-plankblik:hover .cc-plankblik__weg button,
.cc-plankblik__weg button:focus{opacity:1}
.cc-kast__sleep{margin:10px 0 0;font-size:13px;color:var(--cc-tekst-3);font-family:var(--cc-mono)}
.cc-plankblik[draggable="true"]{cursor:grab}
.cc-plankblik--sleept{opacity:.4;cursor:grabbing}
.cc-plankblik--bezig{opacity:.5}
.cc-plank__rij--doel{outline:2px dashed var(--cc-groen);outline-offset:-4px;background:rgba(0,224,122,.07)}
.cc-plankblik__naar select{margin-top:6px;width:100%;padding:4px 6px;border:1px solid var(--cc-rand-licht);
  border-radius:8px;background:#fff;font-family:var(--cc-mono);font-size:10px;color:var(--cc-tekst-3)}

.cc-landenraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));
  gap:10px;margin-top:20px}
.cc-landkaart{display:flex;align-items:center;gap:11px;padding:12px 14px;background:var(--cc-licht-2);
  border-radius:var(--cc-rond-kaart)}
.cc-landkaart__vlag{flex:0 0 auto;width:26px;height:19px;border-radius:3px;background-size:cover;
  background-position:center;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.cc-landkaart__naam{flex:1 1 auto;min-width:0;font-size:14px;font-weight:600;letter-spacing:-.01em}
.cc-landkaart__aantal{font-family:var(--cc-mono);font-size:12px;color:var(--cc-tekst-3)}

/* Op de productpagina: geprobeerd en in mijn kast */
.cc-mijnblik{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--cc-rand-licht-2)}
.cc-mijnblik form{display:flex;gap:8px;align-items:center;margin:0}
.cc-mijnblik__knop{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;
  border:1px solid var(--cc-rand-licht);border-radius:var(--cc-rond);background:transparent;
  font-family:var(--cc-font);font-size:13.5px;font-weight:600;color:var(--cc-tekst);cursor:pointer}
.cc-mijnblik__knop:hover{border-color:var(--cc-zwart)}
.cc-mijnblik__knop.cc-actief{background:var(--cc-zwart);border-color:var(--cc-zwart);color:var(--cc-licht)}
.cc-mijnblik__kast select{padding:9px 10px;border:1px solid var(--cc-rand-licht);border-radius:var(--cc-rond);
  background:#fff;font-family:var(--cc-font);font-size:13px;max-width:220px}
.cc-mijnblik__inlog{margin:0;font-size:13.5px;color:var(--cc-tekst-3)}

/* Verzendkeuze in de samenvatting: leesbaar, niet in hoofdletters */
.cc-samenvatting .woocommerce-shipping-totals th,
.cc-bestelkaart .woocommerce-shipping-totals th{vertical-align:top;padding-top:12px}
.cc-samenvatting #shipping_method{margin:0;padding:0;list-style:none;display:grid;gap:8px;text-align:left}
.cc-samenvatting #shipping_method li{display:flex;align-items:flex-start;gap:9px;
  padding:10px 12px;border:1px solid var(--cc-rand-licht);border-radius:12px;background:var(--cc-licht)}
.cc-samenvatting #shipping_method li:has(input:checked){border-color:var(--cc-zwart);background:#fff}
.cc-samenvatting #shipping_method input{margin-top:2px;flex:0 0 auto;accent-color:var(--cc-groen-knop)}
.cc-samenvatting #shipping_method label{margin:0;font-family:var(--cc-font);font-size:14px;
  font-weight:500;letter-spacing:normal;text-transform:none;color:var(--cc-tekst);text-align:left}
.cc-samenvatting .woocommerce-shipping-destination,
.cc-samenvatting .shipping-calculator-button{font-size:12px;color:var(--cc-tekst-3);text-align:left}

/* ==========================================================================
   31. Winkelwagen — de donkere pil per regel, 18+ en betaalmethodes
   ========================================================================== */
.cc-wagenstap{display:inline-flex;align-items:center;background:var(--cc-zwart);
  border-radius:var(--cc-rond);height:40px;padding:0 4px}
.cc-wagenstap button{width:36px;height:36px;border:0;border-radius:50%;background:transparent;
  color:var(--cc-licht);font-size:19px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.cc-wagenstap button:hover{color:var(--cc-groen)}
.cc-wagenstap__veld{width:44px;height:36px;border:0;background:transparent;text-align:center;
  color:var(--cc-licht);font-family:var(--cc-mono);font-size:15px;
  -moz-appearance:textfield;appearance:textfield}
.cc-wagenstap__veld::-webkit-outer-spin-button,
.cc-wagenstap__veld::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cc-wagenstap__weg{display:none}
.cc-wagenstap--een .cc-wagenstap__weg{display:inline-flex}
.cc-wagenstap--een .cc-wagenstap__min{display:none}
.cc-wagenform--bezig{opacity:.6;pointer-events:none}
.cc-wagenregel__perblik{margin-top:6px;font-family:var(--cc-mono);font-size:10.5px;
  color:var(--cc-groen-donker);text-align:center}
.cc-wagenregel__18{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--cc-rond);
  background:var(--cc-rood-vlak);border:1px solid var(--cc-rood-rand);
  font-family:var(--cc-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cc-rood-tekst);white-space:nowrap}
.cc-wagenregel__18 b{color:var(--cc-rood)}

.cc-optelling__btw{margin-top:4px;text-align:right;font-family:var(--cc-mono);font-size:10.5px;
  color:var(--cc-tekst-3)}
.cc-optelling__betalen{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:12px;
  font-family:var(--cc-mono);font-size:10px;letter-spacing:.06em;color:var(--cc-tekst-3)}

.cc-wagen18{margin-top:14px;background:var(--cc-zwart);color:var(--cc-licht);
  border-radius:var(--cc-rond-groot);padding:18px 20px}
.cc-wagen18__kop{display:flex;align-items:center;gap:10px;font-family:var(--cc-mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cc-tekst-donker)}
.cc-wagen18 p{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:#C6CBC9}

/* ==========================================================================
   32. Tierlijst — donkere kop, filterbalk, ranglijst en uitleg
   ========================================================================== */
.cc-tierhero{background:var(--cc-zwart);color:var(--cc-licht)}
.cc-tierhero__binnen{max-width:var(--cc-breed);margin:0 auto;padding:26px var(--cc-zij) 34px}
.cc-tierhero .cc-kruimels a,.cc-tierhero .cc-kruimels span{color:var(--cc-tekst-donker)}
.cc-tierhero .cc-kruimels{padding-left:0;padding-right:0}
.cc-tierhero h1{margin:14px 0 0;font-size:clamp(28px,3.6vw,42px);line-height:1.02;
  letter-spacing:-.03em;font-weight:700}
.cc-tierhero__lede{margin:12px 0 0;max-width:64ch;font-size:16px;line-height:1.6;color:#C6CBC9}
.cc-tierhero__cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:1px;margin:26px 0 0;background:var(--cc-rand-donker);border-radius:var(--cc-rond-kaart);overflow:hidden}
.cc-tierhero__cijfers>div{background:#0F1413;padding:16px 18px}
.cc-tierhero__cijfers dd{margin:0;font-size:28px;font-weight:700;letter-spacing:-.03em;
  color:var(--cc-groen);font-variant-numeric:tabular-nums}
.cc-tierhero__cijfers dt{margin-top:4px;font-family:var(--cc-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cc-tekst-donker)}

.cc-tierbalk{background:#fff;border-bottom:1px solid var(--cc-rand-licht-2);position:sticky;top:0;z-index:5}
.cc-tierbalk__binnen{max-width:var(--cc-breed);margin:0 auto;padding:12px var(--cc-zij);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cc-tierbalk__filters{display:flex;flex-wrap:wrap;gap:6px}
.cc-tierbalk__filters a{padding:7px 13px;border-radius:var(--cc-rond);font-size:13px;font-weight:600;
  color:var(--cc-tekst-3)}
.cc-tierbalk__filters a:hover{background:var(--cc-licht-2);color:var(--cc-tekst)}
.cc-tierbalk__filters a.cc-actief{background:var(--cc-zwart);color:var(--cc-licht)}
.cc-tierbalk__weergave{display:flex;align-items:center;gap:6px}
.cc-tierbalk__weergave>span{font-family:var(--cc-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cc-tekst-3);margin-right:2px}
.cc-tierbalk__weergave a{padding:7px 13px;border:1px solid var(--cc-rand-licht);border-radius:var(--cc-rond);
  font-size:13px;font-weight:600;color:var(--cc-tekst)}
.cc-tierbalk__weergave a.cc-actief{background:var(--cc-zwart);border-color:var(--cc-zwart);color:var(--cc-licht)}

.cc-tierkaart--mijn{outline:2px solid var(--cc-groen-knop);outline-offset:-1px}

.cc-ranglijst{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:1px;
  background:var(--cc-rand-licht-2);border:1px solid var(--cc-rand-licht-2);
  border-radius:var(--cc-rond-kaart);overflow:hidden}
.cc-rangrij{display:grid;grid-template-columns:34px 22px 52px minmax(0,1fr) auto;gap:14px;
  align-items:center;padding:11px 15px;background:#fff}
.cc-rangrij__nr{font-family:var(--cc-mono);font-size:12px;color:var(--cc-tekst-3);
  font-variant-numeric:tabular-nums}
.cc-rangrij__beeld{display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:10px;overflow:hidden;background:radial-gradient(115% 85% at 50% 10%,#1D2422 0%,#0F1413 68%)}
.cc-rangrij__beeld img{max-width:80%;max-height:80%;object-fit:contain}
.cc-rangrij__tekst{min-width:0;font-size:14.5px;font-weight:600;letter-spacing:-.012em}
.cc-rangrij__tekst a{color:var(--cc-tekst)}
.cc-rangrij__mijn{display:block;margin-top:3px;font-family:var(--cc-mono);font-size:10px;
  letter-spacing:.06em;color:var(--cc-groen-donker);font-weight:400}
.cc-rangrij__stemmen{font-family:var(--cc-mono);font-size:11px;color:var(--cc-tekst-3);white-space:nowrap}
@media (max-width:639px){
  .cc-rangrij{grid-template-columns:28px 20px 44px minmax(0,1fr);gap:10px}
  .cc-rangrij__stemmen{grid-column:2/-1;text-align:right}
}

.cc-tieruitleg{margin-top:34px;background:var(--cc-licht-2);border-radius:var(--cc-rond-groot);padding:22px 24px}
.cc-tieruitleg ul{margin:12px 0 0;padding-left:18px;display:grid;gap:7px;
  font-size:14.5px;line-height:1.6;color:var(--cc-tekst-2);max-width:78ch}
.cc-eigenlijst{margin-top:14px;background:var(--cc-zwart);color:var(--cc-licht);
  border-radius:var(--cc-rond-groot);padding:24px}
.cc-eigenlijst h2{margin:10px 0 0;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.025em;font-weight:700}
.cc-eigenlijst p{margin:10px 0 18px;max-width:62ch;font-size:14.5px;line-height:1.6;color:#C6CBC9}

/* ==========================================================================
   33. Communitypagina — de stroom links, de tierlijst en leden rechts
   ========================================================================== */
.cc-community{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:30px;
  align-items:start;padding-top:30px}
@media (max-width:979px){.cc-community{grid-template-columns:minmax(0,1fr)}}
.cc-stroom__titel{margin:9px 0 0;font-size:clamp(21px,2.4vw,29px);line-height:1.1;
  letter-spacing:-.025em;font-weight:700}
.cc-stroom__sorteer{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0 0;padding-bottom:14px;
  border-bottom:1px solid var(--cc-rand-licht)}
.cc-stroom__sorteer a{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cc-tekst-3)}
.cc-stroom__sorteer a:hover{color:var(--cc-tekst)}
.cc-stroom__sorteer a.cc-actief{color:var(--cc-groen-donker)}
.cc-stroom__lijst{display:grid;gap:12px;margin-top:16px}
.cc-stroomkaart{display:flex;gap:14px;padding:16px 18px;background:var(--cc-licht-2);
  border-radius:var(--cc-rond-kaart)}
.cc-stroomkaart__score{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-family:var(--cc-mono);font-size:11px;color:var(--cc-tekst-3);padding-top:2px}
.cc-stroomkaart__score b{font-size:13px;color:var(--cc-tekst)}
.cc-stroomkaart__body{min-width:0;flex:1 1 auto}
.cc-stroomkaart__kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cc-stroomkaart__smaak{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cc-groen-donker)}
.cc-stroomkaart__tier{display:inline-flex;align-items:center;gap:6px;font-family:var(--cc-mono);
  font-size:10px;letter-spacing:.06em;color:var(--cc-tekst-3)}
.cc-stroomkaart__tekst{display:block;margin-top:8px;font-size:15px;line-height:1.5;
  color:var(--cc-tekst);letter-spacing:-.01em}
.cc-stroomkaart__tekst:hover{color:var(--cc-groen-donker)}
.cc-stroomkaart__voet{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;
  font-family:var(--cc-mono);font-size:10.5px;color:var(--cc-tekst-3)}
.cc-stroomkaart__voet a{color:var(--cc-groen-donker)}
.cc-stroom__begin{display:block;margin-top:14px;padding:16px 18px;border:1px dashed var(--cc-rand-licht);
  border-radius:var(--cc-rond-kaart);font-size:14.5px;color:var(--cc-tekst-3)}
.cc-stroom__begin:hover{border-color:var(--cc-zwart);color:var(--cc-tekst)}

.cc-communityzij{display:grid;gap:14px;min-width:0}
.cc-zijtier{background:var(--cc-zwart);color:var(--cc-licht);border-radius:var(--cc-rond-groot);padding:22px 24px}
.cc-zijtier__kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cc-zijtier__stemmen{font-family:var(--cc-mono);font-size:10.5px;color:var(--cc-tekst-donker)}
.cc-zijtier h2{margin:12px 0 0;font-size:clamp(19px,2.2vw,25px);letter-spacing:-.025em;font-weight:700}
.cc-zijtier p{margin:10px 0 0;font-size:14px;line-height:1.6;color:#C6CBC9}
.cc-zijtier__rij{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0}
.cc-zijtier .cc-knop{background:transparent;border:1px solid var(--cc-rand-donker-2);color:var(--cc-licht)}
.cc-zijtier .cc-knop:hover{background:var(--cc-groen-knop);border-color:var(--cc-groen-knop);color:var(--cc-groen-diep)}

.cc-zijkaart{background:var(--cc-licht-2);border-radius:var(--cc-rond-groot);padding:20px 22px}
.cc-zijkaart ul{margin:12px 0 0;padding-left:17px;display:grid;gap:7px;
  font-size:13.5px;line-height:1.55;color:var(--cc-tekst-2)}
.cc-zijkaart--donker{background:var(--cc-zwart);color:var(--cc-licht)}
.cc-zijkaart--donker h2{margin:0 0 10px;font-size:19px;letter-spacing:-.02em;font-weight:700}
.cc-zijkaart--donker p{margin:0 0 16px;font-size:14px;line-height:1.6;color:#C6CBC9}

.cc-ledenlijst{display:grid;gap:10px;margin-top:14px}
.cc-lid{display:flex;align-items:center;gap:11px}
.cc-lid__letter{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--cc-zwart);color:var(--cc-groen);font-family:var(--cc-mono);font-size:12px}
.cc-lid__tekst{flex:1 1 auto;min-width:0;font-size:14px;font-weight:600;letter-spacing:-.01em}
.cc-lid__tekst a{color:var(--cc-tekst)}
.cc-lid__tekst span{display:block;font-family:var(--cc-mono);font-size:10px;font-weight:400;
  color:var(--cc-tekst-3);margin-top:2px}
.cc-lid__type{flex:0 0 auto;padding:4px 10px;border:1px solid var(--cc-rand-licht);border-radius:var(--cc-rond);
  font-family:var(--cc-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--cc-tekst-3)}

/* ==========================================================================
   34. Smaakdiscussie als eigen pagina
   ========================================================================== */
.cc-discussiehero{background:var(--cc-zwart);color:var(--cc-licht)}
.cc-discussiehero__binnen{max-width:var(--cc-breed);margin:0 auto;padding:24px var(--cc-zij) 34px}
.cc-discussiehero .cc-kruimels{padding:0}
.cc-discussiehero .cc-kruimels a,.cc-discussiehero .cc-kruimels span{color:var(--cc-tekst-donker)}
.cc-discussiehero__raster{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:30px;align-items:start;margin-top:18px}
@media (max-width:979px){.cc-discussiehero__raster{grid-template-columns:minmax(0,1fr)}}
.cc-discussiehero__wat{display:flex;gap:18px;align-items:flex-start;min-width:0}
.cc-discussiehero__beeld{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:78px;height:78px;border-radius:14px;overflow:hidden;
  background:radial-gradient(115% 85% at 50% 10%,#1D2422 0%,#0F1413 68%)}
.cc-discussiehero__beeld img{max-width:80%;max-height:80%;object-fit:contain}
.cc-discussiehero h1{margin:8px 0 0;font-size:clamp(24px,3.2vw,38px);line-height:1.03;
  letter-spacing:-.03em;font-weight:700}
.cc-discussiehero__meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;
  font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.06em;color:var(--cc-tekst-donker)}
.cc-discussiehero__intro{margin:12px 0 0;max-width:60ch;font-size:15px;line-height:1.6;color:#C6CBC9}
.cc-discussiehero__zij{display:grid;gap:12px;min-width:0}
.cc-discussieblok{background:#0F1413;border:1px solid var(--cc-rand-donker);
  border-radius:var(--cc-rond-groot);padding:20px 22px}
.cc-discussieblok__naam{margin-top:10px;font-size:17px;font-weight:700;letter-spacing:-.02em}
.cc-discussieblok__meta{margin-top:4px;font-family:var(--cc-mono);font-size:12px;color:var(--cc-tekst-donker)}
.cc-discussieblok .cc-knop--breed{margin-top:14px}
.cc-discussieblok .cc-knop:not(.cc-knop--groen){background:transparent;
  border:1px solid var(--cc-rand-donker-2);color:var(--cc-licht)}
.cc-discussieblok .cc-knop:not(.cc-knop--groen):hover{background:var(--cc-rand-donker)}
.cc-discussieblok .cc-knop.cc-actief{background:var(--cc-licht);color:var(--cc-zwart);border-color:var(--cc-licht)}
.cc-discussieblok__vorm{margin:0}

/* het tierblok binnen de donkere kaart erft de opmaak van het smaakpaneel */
.cc-discussieblok .cc-tierblok{background:transparent;padding:0}
.cc-discussieblok .cc-tiergem{display:flex;align-items:center;gap:14px;margin:12px 0 14px}
.cc-discussieblok .cc-tiergroot{width:52px;height:52px;border-radius:16px;font-size:23px;
  font-weight:700;color:var(--cc-groen-diep)}
.cc-discussieblok .cc-tierstem{display:block;padding-top:0;border-top:0}
.cc-discussieblok .cc-tierknoppen{display:flex;gap:5px;flex-wrap:nowrap}
.cc-discussieblok .cc-tierknop{flex:1 1 0;min-width:0;width:auto;height:auto;padding:9px 0 7px;
  border:1px solid transparent;border-radius:11px;display:flex;flex-direction:column;
  align-items:center;gap:2px;color:var(--cc-groen-diep);opacity:1;cursor:pointer}
.cc-discussieblok .cc-tierknop.cc-actief{border-color:var(--cc-licht)}
.cc-discussieblok .cc-tierlink{display:none}

.cc-discussiepagina{padding-top:30px}
.cc-discussiepagina .cc-discussieblok{background:transparent;border:0;padding:0}
.cc-discussiepagina .cc-reactie{background:var(--cc-licht-2);padding:16px 18px;border-radius:var(--cc-rond-kaart)}
.cc-anderediscussies{margin-top:38px}
.cc-anderediscussies__raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));
  gap:12px;margin-top:18px}
.cc-anderekaart{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--cc-rand-licht);border-radius:var(--cc-rond-kaart)}
.cc-anderekaart:hover{border-color:var(--cc-zwart)}
.cc-anderekaart__beeld{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:10px;overflow:hidden;
  background:radial-gradient(115% 85% at 50% 10%,#1D2422 0%,#0F1413 68%)}
.cc-anderekaart__beeld img{max-width:80%;max-height:80%;object-fit:contain}
.cc-anderekaart__naam{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--cc-tekst)}
.cc-anderekaart__meta{display:block;margin-top:3px;font-family:var(--cc-mono);font-size:10px;
  color:var(--cc-tekst-3)}

/* ==========================================================================
   35. Voorpagina — tierblok en smaakdiscussies
   ========================================================================== */
.cc-thuistier{background:var(--cc-zwart);color:var(--cc-licht);border-radius:var(--cc-rond-groot);
  padding:28px 26px}
.cc-thuistier h2{margin:12px 0 0;font-size:clamp(21px,2.4vw,29px);line-height:1.1;
  letter-spacing:-.025em;font-weight:700}
.cc-thuistier>p{margin:10px 0 0;max-width:62ch;font-size:14.5px;line-height:1.6;color:#C6CBC9}
.cc-thuistier__rijen{display:grid;gap:8px;margin:20px 0 18px}
.cc-thuistier__rij{display:flex;align-items:center;gap:14px;padding:12px 16px;
  background:#0F1413;border-radius:14px;color:var(--cc-licht)}
.cc-thuistier__rij:hover{background:var(--cc-rand-donker);color:var(--cc-licht)}
.cc-thuistier__naam{min-width:0;font-size:15px;font-weight:600;letter-spacing:-.015em}
.cc-thuistier__naam span{display:block;margin-top:2px;font-family:var(--cc-mono);font-size:10px;
  font-weight:400;color:var(--cc-tekst-donker)}
.cc-thuistier .cc-knop{background:transparent;border:1px solid var(--cc-rand-donker-2);color:var(--cc-licht)}
.cc-thuistier .cc-knop:hover{background:var(--cc-groen-knop);border-color:var(--cc-groen-knop);color:var(--cc-groen-diep)}

.cc-thuisdraden{display:grid;gap:10px;margin-top:20px}
.cc-thuisdraad{display:flex;align-items:center;gap:16px;padding:14px 18px;
  background:var(--cc-licht-2);border-radius:var(--cc-rond-kaart);color:var(--cc-tekst)}
.cc-thuisdraad:hover{background:var(--cc-licht-3);color:var(--cc-tekst)}
.cc-thuisdraad__telling{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;width:52px;height:52px;border-radius:12px;background:#fff;
  border:1px solid var(--cc-rand-licht-2)}
.cc-thuisdraad__telling b{font-size:16px;font-weight:700;line-height:1}
.cc-thuisdraad__telling span{font-family:var(--cc-mono);font-size:8.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cc-tekst-3);margin-top:2px}
.cc-thuisdraad__tekst{min-width:0}
.cc-thuisdraad__smaak{display:block;font-family:var(--cc-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cc-groen-donker)}
.cc-thuisdraad__titel{display:block;margin-top:4px;font-size:15px;font-weight:600;letter-spacing:-.015em;
  line-height:1.35}
.cc-thuisdraad__meta{display:block;margin-top:4px;font-family:var(--cc-mono);font-size:10px;
  color:var(--cc-tekst-3)}

/* de community-regel onderaan een productkaart */
.cc-kaart__community{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--cc-rand-licht-2)}
.cc-kaart__tierregel{display:inline-flex;align-items:center;gap:7px;font-family:var(--cc-mono);
  font-size:10px;color:var(--cc-tekst-3)}
.cc-kaart__gep{margin:0}
.cc-kaart__gep button{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border:1px solid var(--cc-rand-licht);border-radius:var(--cc-rond);background:transparent;
  font-family:var(--cc-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cc-tekst-3);cursor:pointer}
.cc-kaart__gep button:hover{border-color:var(--cc-zwart);color:var(--cc-tekst)}
.cc-kaart__gep button.cc-actief{background:var(--cc-zwart);border-color:var(--cc-zwart);color:var(--cc-groen)}

/* ==========================================================================
   36. Donkere kop boven het overzicht en de categoriepagina's
   ========================================================================== */
.cc-archiefhero{background:var(--cc-zwart);color:var(--cc-licht)}
.cc-archiefhero__binnen{max-width:var(--cc-breed);margin:0 auto;padding:24px var(--cc-zij) 30px}
.cc-archiefhero .cc-kruimels{padding:0}
.cc-archiefhero .cc-kruimels a,.cc-archiefhero .cc-kruimels span{color:var(--cc-tekst-donker)}
.cc-archiefhero .cc-kruimels a:hover{color:var(--cc-licht)}
.cc-archiefhero h1{margin:14px 0 0;font-size:clamp(28px,3.6vw,42px);line-height:1.02;
  letter-spacing:-.03em;font-weight:700}
.cc-archiefhero__intro{margin-top:12px;max-width:64ch}
.cc-archiefhero__intro p{margin:0 0 10px;font-size:16px;line-height:1.6;color:#C6CBC9}
.cc-archiefhero__intro p:last-child{margin-bottom:0}
.cc-filters--donker{margin-top:22px}
.cc-filters--donker .cc-filter{border-color:var(--cc-rand-donker-2);color:var(--cc-licht)}
.cc-filters--donker .cc-filter:hover{border-color:var(--cc-groen-knop);background:transparent;color:var(--cc-licht)}
.cc-filters--donker .cc-filter.cc-actief{background:var(--cc-licht);border-color:var(--cc-licht);color:var(--cc-zwart)}
.cc-filters--donker .cc-filter__aantal{color:var(--cc-tekst-donker)}
.cc-filters--donker .cc-filter.cc-actief .cc-filter__aantal{color:var(--cc-tekst-3)}
.cc-archief .cc-weergave{margin-top:20px}

/* ==========================================================================
   37. Profielinstellingen
   ========================================================================== */
.cc-instellingen{max-width:760px}
.cc-gelukt__melding{margin-bottom:18px;padding:12px 16px;border-radius:12px;
  background:#E7F6EE;border:1px solid #B6E3CC;color:var(--cc-groen-donker);
  font-size:14px;font-weight:600}
.cc-instelblok{padding:22px 0;border-bottom:1px solid var(--cc-rand-licht-2)}
.cc-instelblok h2{margin:9px 0 0;font-size:19px;font-weight:700;letter-spacing:-.02em}
.cc-instelblok>p{margin:8px 0 0;max-width:62ch;font-size:14px;line-height:1.6;color:var(--cc-tekst-3)}
.cc-instelblok__link{margin-top:12px;font-size:13.5px;font-weight:600}
.cc-instelkeuzes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:10px;margin-top:16px}
.cc-instelkeuze{display:flex;gap:11px;align-items:flex-start;padding:14px 16px;
  border:1px solid var(--cc-rand-licht);border-radius:var(--cc-rond-kaart);cursor:pointer}
.cc-instelkeuze:has(input:checked){border-color:var(--cc-zwart);background:var(--cc-licht-2)}
.cc-instelkeuze input{margin-top:3px;accent-color:var(--cc-groen-knop)}
.cc-instelkeuze b{display:block;font-size:15px;letter-spacing:-.01em}
.cc-instelkeuze b+span{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--cc-tekst-3)}
.cc-instelvelden{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:14px;margin-top:16px}
.cc-instelvelden--breed{grid-column:1/-1}
.cc-instelvelden label{display:block}
.cc-instelvelden label>span{display:block;margin-bottom:5px;font-family:var(--cc-mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cc-tekst-3)}
.cc-instelvelden input,.cc-instelvelden textarea{width:100%;padding:11px 13px;
  border:1px solid var(--cc-rand-licht);border-radius:12px;background:var(--cc-licht);
  font-family:var(--cc-font);font-size:14.5px;color:var(--cc-tekst)}
.cc-instelvelden input:focus,.cc-instelvelden textarea:focus{outline:2px solid var(--cc-groen-knop);
  outline-offset:1px;border-color:transparent}
.cc-instelvinkjes{display:grid;gap:10px;margin-top:16px}
.cc-instelvinkjes label{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;
  line-height:1.5;cursor:pointer}
.cc-instelvinkjes input{margin-top:2px;width:18px;height:18px;accent-color:var(--cc-groen-knop)}
.cc-instelvoet{display:flex;flex-wrap:wrap;gap:12px;padding-top:22px}

/* Ontdekken: de drie tikken in de donkere kop */
.cc-ontdekticks{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px}
.cc-ontdekticks span{position:relative;padding-left:18px;font-family:var(--cc-mono);font-size:11px;
  letter-spacing:.06em;color:var(--cc-tekst-donker-2)}
.cc-ontdekticks span::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;
  border-radius:50%;background:var(--cc-groen)}
.cc-ontdekgroep{padding-top:38px}
.cc-ontdekgroep__aantal{font-family:var(--cc-mono);font-size:11px;color:var(--cc-tekst-3);white-space:nowrap}

/* Releasekalender */
.cc-kalendergroep{padding-top:30px}
.cc-kalendergroep__kop{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:12px;border-bottom:1px solid var(--cc-rand-licht);margin-bottom:18px}
.cc-kalendergroep__kop h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em}
.cc-kalendergroep__kop span{font-family:var(--cc-mono);font-size:11px;color:var(--cc-tekst-3)}

/* Achievements op het profiel */
.cc-badgegroep{padding-top:26px}
.cc-badgelijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:10px;margin-top:12px}
.cc-badge2{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;
  background:var(--cc-licht-2);border-radius:var(--cc-rond-kaart)}
.cc-badge2--klaar{background:var(--cc-zwart);color:var(--cc-licht)}
.cc-badge2__vink{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--cc-licht-3);color:var(--cc-tekst-3);font-size:13px}
.cc-badge2--klaar .cc-badge2__vink{background:var(--cc-groen);color:var(--cc-groen-diep)}
.cc-badge2__tekst{min-width:0;flex:1 1 auto}
.cc-badge2__tekst b{display:block;font-size:14.5px;letter-spacing:-.01em}
.cc-badge2__balk{display:block;height:4px;margin:8px 0 6px;border-radius:999px;
  background:var(--cc-rand-licht);overflow:hidden}
.cc-badge2--klaar .cc-badge2__balk{background:var(--cc-rand-donker)}
.cc-badge2__balk>span{display:block;height:100%;background:var(--cc-groen-knop);border-radius:999px}
.cc-badge2__meta{display:block;font-family:var(--cc-mono);font-size:10px;color:var(--cc-tekst-3)}
.cc-badge2--klaar .cc-badge2__meta{color:var(--cc-tekst-donker)}

/* Een smaak volgen op Ontdekken */
.cc-volgvorm{margin:14px 0 0}
.cc-volgvorm .cc-knop{display:inline-flex;align-items:center;gap:9px}
.cc-volgvorm .cc-knop.cc-actief{background:var(--cc-zwart);color:var(--cc-groen)}
.cc-volgtelling{margin:10px 0 0;font-family:var(--cc-mono);font-size:11px;color:var(--cc-tekst-3)}
.cc-profielkop__sinds{margin-top:6px;font-family:var(--cc-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cc-tekst-3)}

/* Landen op het profiel: donker blok met vlaggen */
.cc-landenblok{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:20px;
  padding:22px 24px;background:var(--cc-zwart);color:var(--cc-licht);border-radius:var(--cc-rond-groot)}
.cc-landenblok__cijfer b{display:block;font-size:38px;font-weight:700;letter-spacing:-.035em;
  line-height:1;color:var(--cc-groen);font-variant-numeric:tabular-nums}
.cc-landenblok__cijfer span{display:block;margin-top:6px;font-family:var(--cc-mono);font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--cc-tekst-donker)}
.cc-landenblok__vlaggen{display:flex;flex-wrap:wrap;gap:7px;flex:1 1 auto}
.cc-landenblok__vlaggen span{width:30px;height:22px;border-radius:3px;background-size:cover;
  background-position:center;box-shadow:0 0 0 1px rgba(243,244,243,.2)}

/* =========================================================================
   Feedback 8 september — feedback-8-sep
   ====================================================================== */

/* De loopbalk staat boven de zwarte header, dus hoort hij licht te zijn.
   Komt er ooit een lichte balk onder, dan zet je er --donker op. */
.cc-loopbalk{background:var(--cc-licht);border-bottom:1px solid var(--cc-rand-licht)}
.cc-loopbalk__reeks{color:var(--cc-tekst-3)}
.cc-loopbalk__ster{color:var(--cc-groen-knop)}
.cc-loopbalk--donker{background:var(--cc-zwart);border-bottom-color:var(--cc-rand-donker)}
.cc-loopbalk--donker .cc-loopbalk__reeks{color:var(--cc-tekst-donker)}
.cc-loopbalk--donker .cc-loopbalk__ster{color:var(--cc-groen)}

/* Het kruimelpad hoort in het gekleurde blok, niet op een witte strook. */
.cc-hero .cc-kruimels{padding:20px var(--cc-zij) 0;color:var(--cc-tekst-donker)}
.cc-hero .cc-kruimels a{color:var(--cc-tekst-donker)}
.cc-hero .cc-kruimels a:hover{color:var(--cc-licht)}
.cc-hero .cc-kruimels__nu{color:var(--cc-licht)}
.cc-hero .cc-kruimels+.cc-hero__binnen{padding-top:22px}
@media (max-width:899px){.cc-hero .cc-kruimels+.cc-hero__binnen{padding-top:18px}}

/* De uitgelichte kaart staat naast vier kaarten; laat de foto meegroeien. */
@media (min-width:900px){
.cc-spot .cc-uitgelicht__beeld{aspect-ratio:auto;height:100%;min-height:340px}
.cc-spot .cc-uitgelicht__beeld img{max-height:min(100%,430px)}
}

/* Filterkolom scrollt gewoon mee: plakken werkt niet bij een lange lijst. */
.cc-zijfilters{position:static;top:auto}

/* Ranglijst op de voorpagina: plek, foto, balkje en tier. */
.cc-thuistier__rij{display:grid;grid-template-columns:auto 52px minmax(0,1fr) minmax(60px,120px) auto;align-items:center;gap:14px}
.cc-thuistier__plek{font-family:var(--cc-mono);font-size:12px;color:var(--cc-tekst-donker);min-width:18px}
.cc-thuistier__foto{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:11px;overflow:hidden;background:radial-gradient(115% 85% at 50% 10%,#1D2422 0%,#0F1413 68%)}
.cc-thuistier__foto img{max-width:78%;max-height:92%;width:auto;height:auto;object-fit:contain}
.cc-thuistier__meter{display:block;height:6px;border-radius:999px;background:var(--cc-rand-donker-2);overflow:hidden}
.cc-thuistier__meter>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cc-groen-knop),var(--cc-groen))}
.cc-tier--groot{width:30px;height:30px;border-radius:9px;font-size:14px}
@media (max-width:639px){
.cc-thuistier__rij{grid-template-columns:auto 44px minmax(0,1fr) auto;gap:10px}
.cc-thuistier__foto{width:44px;height:44px}
.cc-thuistier__meter{display:none}
}

/* Uitgelicht: 1 groot + 6 kaarten */
@media (min-width:900px){
.cc-spot{grid-template-columns:minmax(0,0.95fr) minmax(0,1.55fr)}
.cc-spot__naast{grid-template-columns:repeat(3,minmax(0,1fr))}
.cc-spot .cc-uitgelicht__beeld{min-height:260px}
.cc-spot .cc-uitgelicht__beeld img{max-height:min(100%,340px)}
}
@media (min-width:640px) and (max-width:899px){.cc-spot__naast{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Discussiepagina: product, tier en shop naast elkaar. */
.cc-discussiehero__wat{display:grid;gap:16px;align-content:start}
.cc-discussiehero__beeld{width:100%;height:auto;min-height:0;flex:none;aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  background:radial-gradient(115% 85% at 50% 10%,#1D2422 0%,#0F1413 68%)}
.cc-discussiehero__beeld img{max-width:70%;max-height:88%;width:auto;height:auto;object-fit:contain}
.cc-naarreacties{display:none;align-items:center;gap:8px;margin-top:14px;padding:11px 17px;
  border:1px solid var(--cc-rand-donker-2);border-radius:var(--cc-rond);color:var(--cc-licht);
  font-size:13.5px;font-weight:600;text-decoration:none;justify-self:start}
.cc-naarreacties:hover{border-color:var(--cc-groen-knop);color:var(--cc-groen);text-decoration:none}
@media (min-width:980px){
.cc-discussiehero__raster{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);align-items:start}
.cc-discussiehero__zij{display:contents}
.cc-discussiehero__zij>.cc-discussieblok{margin-top:0}
}
@media (max-width:979px){
.cc-naarreacties{display:inline-flex}
.cc-discussiehero__wat{grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start}
.cc-discussiehero__beeld{aspect-ratio:1/1;height:auto;border-radius:12px}
.cc-discussiehero__intro{display:none}
}

/* Stroomkaart: de twee belangrijkste reacties eronder. */
.cc-stroomkaart__sub{display:grid;gap:6px;margin-top:12px;padding-left:12px;border-left:2px solid var(--cc-rand-licht)}
.cc-substukje{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:baseline;
  padding:6px 8px;border-radius:9px;color:var(--cc-tekst-2);text-decoration:none;font-size:13.5px;line-height:1.45}
.cc-substukje:hover{background:var(--cc-licht-2);color:var(--cc-tekst);text-decoration:none}
.cc-substukje__score{font-family:var(--cc-mono);font-size:11px;color:var(--cc-tekst-3);min-width:16px;
  font-variant-numeric:tabular-nums}
.cc-substukje__tekst{min-width:0}
.cc-substukje__tekst b{font-weight:600;color:var(--cc-tekst)}
.cc-substukje__tekst b::after{content:"·";padding:0 6px;color:var(--cc-tekst-3);font-weight:400}

/* Feedbackbord: tweede knopje naast de feedbackknop van de plug-in. */
.cc-bordknop{position:fixed;right:145px;bottom:16px;z-index:2147483000;width:33px;height:33px;
  border:1px solid var(--cc-groen-knop);border-radius:999px;background:var(--cc-zwart);color:var(--cc-groen);
  font-family:var(--cc-mono);font-size:12px;font-weight:500;letter-spacing:.06em;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0}
.cc-bordknop:hover,.cc-bordknop.cc-actief{background:var(--cc-groen-knop);color:var(--cc-groen-diep);border-color:var(--cc-groen-knop)}
.cc-bord{position:fixed;right:16px;bottom:60px;z-index:2147483000;width:min(420px,calc(100vw - 32px));
  max-height:min(70vh,620px);display:flex;flex-direction:column;overflow:hidden;
  background:var(--cc-zwart);color:var(--cc-licht);border:1px solid var(--cc-rand-donker-2);
  border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.cc-bord__kop{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--cc-rand-donker)}
.cc-bord__kop span{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cc-tekst-donker)}
.cc-bord__sluit{border:0;background:transparent;color:var(--cc-tekst-donker);font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.cc-bord__sluit:hover{color:var(--cc-licht)}
.cc-bord__tabs{display:flex;gap:6px;padding:12px 16px 0}
.cc-bord__tab{flex:1 1 0;padding:8px 10px;border:1px solid var(--cc-rand-donker-2);border-radius:999px;
  background:transparent;color:var(--cc-tekst-donker-2);font-family:var(--cc-font);font-size:12.5px;font-weight:600;cursor:pointer}
.cc-bord__tab b{font-family:var(--cc-mono);font-weight:500;font-size:11px;color:var(--cc-tekst-donker)}
.cc-bord__tab.cc-actief{background:var(--cc-licht);border-color:var(--cc-licht);color:var(--cc-zwart)}
.cc-bord__tab.cc-actief b{color:var(--cc-tekst-3)}
.cc-bord__lijst{overflow-y:auto;padding:12px 16px 16px;display:grid;gap:8px}
.cc-bord__leeg{margin:0;font-size:13.5px;color:var(--cc-tekst-donker)}
.cc-bordpunt{padding:10px 12px;border:1px solid var(--cc-rand-donker);border-radius:11px;background:#0F1413;
  border-left-width:3px}
.cc-bordpunt--open{border-left-color:var(--cc-rood-licht)}
.cc-bordpunt--klaar{border-left-color:var(--cc-groen-knop)}
.cc-bordpunt__tekst{margin:0;font-size:13.5px;line-height:1.45;color:var(--cc-licht)}
.cc-bordpunt__voet{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:7px;
  font-family:var(--cc-mono);font-size:10px;color:var(--cc-tekst-donker);word-break:break-all}
.cc-bordpunt__voet a{color:var(--cc-tekst-donker)}
.cc-bordpunt__voet a:hover{color:var(--cc-groen)}
@media (max-width:639px){.cc-bordknop{right:auto;left:16px}}

/* Uitgelicht: raster van vijf — 2/5 1/5 1/5 1/5 en eronder 1/5 1/5 1/5 2/5. */
@media (min-width:900px){
.cc-spot{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:stretch}
.cc-spot>.cc-uitgelicht{grid-column:span 2}
.cc-spot .cc-uitgelicht__beeld{aspect-ratio:1/1;height:auto;min-height:0}
.cc-spot .cc-uitgelicht__beeld img{inset:5%}
.cc-spot .cc-uitgelicht__beeld img{max-height:min(100%,400px)}
}
@media (min-width:640px) and (max-width:899px){
.cc-spot{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cc-spot>.cc-uitgelicht{grid-column:span 2}
}
@media (max-width:639px){.cc-spot{grid-template-columns:minmax(0,1fr)}}

/* Go-to per merk in de profielkop. */
.cc-profielkop__goto{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cc-profielkop__gotorij{grid-column:1 / -1}
.cc-profielkop__gotorij dd a{font-weight:600}
.cc-profielkop__nogniet{opacity:.6}

/* Profielfoto wijzigen. */
.cc-instelblok{margin-top:26px}
.cc-fotoform{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:16px;padding:16px;
  border:1px solid var(--cc-rand-licht);border-radius:var(--cc-rond-kaart);background:var(--cc-licht-2)}
.cc-fotoform__nu img{width:72px;height:72px;border-radius:999px;object-fit:cover;display:block}
.cc-fotoform__velden{display:grid;gap:6px;min-width:220px;flex:1 1 240px}
.cc-fotoform__uitleg{font-family:var(--cc-mono);font-size:10.5px;color:var(--cc-tekst-3)}
.cc-fotoform__knoppen{display:flex;gap:8px;flex-wrap:wrap}

/* Wereldkaart van stippen in het profiel. */
.cc-wereldkaart{margin:18px 0 20px;padding:14px;border:1px solid var(--cc-rand-licht);border-radius:var(--cc-rond-kaart);background:var(--cc-licht-2);overflow-x:auto}
.cc-wereldkaart svg{display:block;width:100%;height:auto;min-width:520px}
.cc-wereldkaart__achter{fill:var(--cc-rand-licht);stroke:var(--cc-licht-2);stroke-width:.06}
.cc-wereldkaart__land{fill:var(--cc-rand-licht);stroke:var(--cc-licht-2);stroke-width:.06}
.cc-wereldkaart__land.cc-actief{fill:var(--cc-groen-knop);cursor:pointer}
.cc-wereldkaart__land.cc-actief:hover{fill:var(--cc-zwart)}
.cc-wereldkaart__land.cc-actief:focus-visible{outline:2px solid var(--cc-zwart);outline-offset:2px}
.cc-wereldkaart__stip{fill:var(--cc-zwart);stroke:var(--cc-licht);stroke-width:.16;cursor:pointer;transition:fill .15s}
.cc-wereldkaart__stip:hover,.cc-wereldkaart__stip.cc-actief{fill:var(--cc-groen-donker)}
.cc-wereldkaart__stip:focus-visible{outline:2px solid var(--cc-zwart);outline-offset:2px}
button.cc-landkaart{width:100%;text-align:left;border:1px solid var(--cc-rand-licht);background:var(--cc-licht-2);cursor:pointer;font:inherit;color:inherit}
button.cc-landkaart:hover{border-color:var(--cc-zwart)}
button.cc-landkaart.cc-actief{border-color:var(--cc-zwart);background:var(--cc-zwart);color:var(--cc-licht)}
.cc-landblikken{margin-top:18px}
.cc-landblikken__hint{margin:0;font-family:var(--cc-mono);font-size:11px;letter-spacing:.05em;color:var(--cc-tekst-3)}
.cc-landblikken__kop{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}
.cc-landblikken__kop .cc-landkaart__vlag{width:24px;height:17px;border-radius:3px;background-size:cover;background-position:center}
.cc-landblikken__aantal{font-family:var(--cc-mono);font-size:11px;color:var(--cc-tekst-3)}
.cc-landblikken__rij{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,118px),1fr));gap:12px;margin-top:12px}
.cc-landblik{margin:0;display:grid;gap:8px}
.cc-landblik img{width:100%;aspect-ratio:1/1;object-fit:contain;background:radial-gradient(115% 85% at 50% 10%,#1D2422 0%,#0F1413 68%);border-radius:11px;padding:10%}
.cc-landblik figcaption{font-size:12.5px;line-height:1.35;color:var(--cc-tekst-2)}

/* Zoeksuggesties onder de zoekbalk. */
.cc-zoek--suggesties{position:relative}
.cc-zoeklade{position:absolute;top:calc(100% + 8px);left:0;right:auto;width:max(100%,380px);z-index:60;max-height:min(60vh,420px);overflow-y:auto;overflow-x:hidden;
  background:var(--cc-zwart-2);border:1px solid var(--cc-rand-donker-2);border-radius:16px;padding:6px;
  box-shadow:0 18px 46px rgba(0,0,0,.5);display:grid;gap:2px}
.cc-zoeklade__rij{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:8px 10px;border-radius:11px;color:var(--cc-licht);text-decoration:none}
.cc-zoeklade__rij:hover{background:var(--cc-rand-donker);color:var(--cc-licht);text-decoration:none}
.cc-zoeklade__beeld{width:44px;height:44px;border-radius:9px;overflow:hidden;display:flex;align-items:center;
  justify-content:center;background:radial-gradient(115% 85% at 50% 10%,#1D2422 0%,#0F1413 68%)}
.cc-zoeklade__beeld img{max-width:74%;max-height:88%;width:auto;height:auto;object-fit:contain}
.cc-zoeklade__tekst{min-width:0;display:grid;gap:2px}
.cc-zoeklade__reeks{font-family:var(--cc-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cc-groen)}
.cc-zoeklade__naam{font-size:14px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-zoeklade__prijs{font-family:var(--cc-mono);font-size:11.5px;color:var(--cc-tekst-donker-2);white-space:nowrap}
@media (max-width:899px){.cc-zoeklade{position:fixed;left:12px;right:12px;width:auto;top:auto}}

/* Verwachte smaak: geen tier, wel nadruk op het gesprek. */
.cc-verwachtnoot{margin:14px 0 4px;padding:12px 14px;border-left:2px solid var(--cc-groen);
  background:rgba(0,224,122,.06);font-size:14px;line-height:1.55;color:var(--cc-tekst-donker-2)}
.cc-smaakpaneel--verwacht .cc-paneelkop__titel{color:var(--cc-groen)}
.cc-smaakpaneel--verwacht .cc-discussie{margin-top:14px}

/* Tierlijst in de communityzijkolom: blikken met een tierblokje erover. */
.cc-zijtier__rij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cc-zijtierblik{position:relative;display:block;aspect-ratio:3/4;border-radius:10px;overflow:hidden;
  background:radial-gradient(115% 85% at 50% 10%,#1D2422 0%,#0F1413 68%)}
.cc-zijtierblik__beeld{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.cc-zijtierblik__beeld img{max-width:72%;max-height:86%;width:auto;height:auto;object-fit:contain}
.cc-zijtierblik__tier{position:absolute;top:5px;left:5px;width:17px;height:17px;border-radius:5px;font-size:10px}
.cc-zijtierblik:hover{outline:1px solid var(--cc-groen-knop)}

/* Stemmen op de stroomkaart. */
.cc-stroomkaart__score form{margin:0;display:flex}
.cc-stroomkaart__score .cc-stemknop{border:0;background:transparent;color:var(--cc-tekst-3);cursor:pointer;
  font-size:12px;line-height:1;padding:2px 4px;border-radius:6px}
.cc-stroomkaart__score .cc-stemknop:hover{color:var(--cc-tekst);background:var(--cc-licht-3)}
.cc-stroomkaart__score .cc-stemknop.cc-actief{color:var(--cc-groen-donker)}

/* Snelkoppelingen met blikfoto’s. */
.cc-snelkoppeling__blikken{position:absolute;right:10px;bottom:0;top:0;display:flex;align-items:center;
	justify-content:flex-end;pointer-events:none}
.cc-snelkoppeling__blik img{width:100%;height:100%;object-fit:contain;
	filter:drop-shadow(0 2px 5px rgba(16,20,19,.18))}

/* Collectiekast: donkere kast met echte planken, zoals het ontwerp. */
.cc-kast__planken{background:var(--cc-zwart);border-radius:24px;padding:20px 16px 8px;margin-top:22px}
.cc-kast__planken .cc-plank{margin-top:0;padding-bottom:18px}
.cc-kast__planken .cc-plank__kop{padding:0 6px 8px;border-bottom:0}
.cc-kast__planken .cc-plank__naam{color:var(--cc-licht)}
.cc-kast__planken .cc-plank__aantal{color:var(--cc-tekst-donker)}
.cc-kast__planken .cc-plank__rij{background:transparent;border-radius:0;padding:0 6px 10px;align-items:flex-end;gap:14px}
.cc-kast__planken .cc-plank::after{content:"";display:block;height:9px;border-radius:3px;margin:0 2px;
  background:linear-gradient(180deg,#2F3735 0%,#171D1C 58%,#0D1211 100%);
  box-shadow:0 6px 14px -8px rgba(0,0,0,.95)}
.cc-kast__planken .cc-plankblik{width:96px}
.cc-kast__planken .cc-plankblik img{height:130px;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 12px 10px rgba(0,0,0,.55))}
.cc-kast__planken .cc-plankblik figcaption{color:var(--cc-tekst-donker-2);font-size:11.5px}
.cc-kast__planken .cc-plankblik figcaption a{color:var(--cc-licht)}
.cc-kast__planken .cc-plankblik figcaption a:hover{color:var(--cc-groen)}
.cc-kast__planken .cc-plank__leeg{color:var(--cc-tekst-donker);padding:0 6px 10px}
.cc-kast__planken .cc-plankblik__geen{height:130px;color:var(--cc-tekst-donker)}
.cc-kast__planken .cc-plankblik__naar select{background:var(--cc-zwart-2);color:var(--cc-licht);border-color:var(--cc-rand-donker-2)}

/* De onderdelenbalk blijft staan zolang je scrollt. */
.cc-profieltabs{position:sticky;top:64px;z-index:20;background:var(--cc-licht);margin:22px 0 0;
  padding-top:4px;overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;scrollbar-width:none}
.cc-profieltabs::-webkit-scrollbar{display:none}
.cc-kast,.cc-landen,.cc-geprobeerd,.cc-mijntiers,.cc-gevolgd,.cc-badges{scroll-margin-top:130px}
@media (max-width:899px){.cc-profieltabs{top:58px}}

/* Tierbord: pool boven, rijen S tot F eronder, blikken sleepbaar. */
.cc-tierbord{margin-top:20px}
.cc-tierpool{padding:14px 16px;border:1px dashed var(--cc-rand-licht);border-radius:16px;background:var(--cc-licht-2)}
.cc-tierpool.cc-doel{border-color:var(--cc-groen-knop);background:rgba(0,224,122,.08)}
.cc-tierpool__kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--cc-tekst-3)}
.cc-tierpool__blikken{display:flex;gap:8px;align-items:flex-end;overflow-x:auto;padding:12px 2px 4px}
.cc-tierpool__leeg{font-size:13.5px;color:var(--cc-tekst-3)}
.cc-tierbord__hint{margin:14px 0 0;font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.06em;color:var(--cc-tekst-3)}
.cc-tierrijen{display:grid;gap:8px;margin-top:14px}
.cc-tierbordrij{display:flex;gap:14px;align-items:stretch;background:var(--cc-licht-2);
  border:1px solid var(--cc-rand-licht);border-radius:14px;padding:8px 10px;min-height:74px}
.cc-tierbordrij.cc-doel{border-color:var(--cc-groen-knop);background:rgba(0,224,122,.08)}
.cc-tierbordrij__letter{flex:0 0 auto;width:38px;height:auto;border-radius:9px;font-size:17px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.cc-tierbordrij__blikken{min-width:0;flex:1 1 auto;display:flex;gap:7px;align-items:flex-end;
  overflow-x:auto;padding:1px 1px 2px}
.cc-tierblik{position:relative;flex:0 0 auto;width:44px;height:58px;display:flex;align-items:flex-end;justify-content:center}
.cc-tierblik a{display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%}
.cc-tierblik img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 7px 7px rgba(16,20,19,.28))}
.cc-tierblik[draggable="true"]{cursor:grab}
.cc-tierblik.cc-sleept{opacity:.4;cursor:grabbing}
.cc-tierblik.cc-gekozen{outline:2px solid var(--cc-groen-knop);outline-offset:3px;border-radius:8px}
.cc-tierblik__vorm{display:none}
@media (max-width:639px){.cc-tierblik{width:38px;height:50px}.cc-tierbordrij__letter{width:32px;font-size:15px}}

/* Profielkop als donker blok, zoals in het ontwerp. */
.cc-profielkop{position:relative;color:var(--cc-licht);padding:34px 0 30px;margin-bottom:0}
.cc-profielkop::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);background:var(--cc-zwart);border-bottom:1px solid var(--cc-rand-donker);z-index:-1}
.cc-profielkop h1,.cc-profielkop .cc-profielkop__naam{color:var(--cc-licht)}
.cc-profielkop__sinds,.cc-profielkop__bio{color:var(--cc-tekst-donker-2)}
.cc-profielkop__cijfers{background:transparent}
.cc-profielkop__cijfers>div{border:1px solid var(--cc-rand-donker-2);border-radius:16px;background:#101615;padding:13px 15px}
.cc-profielkop__cijfers dt{color:var(--cc-tekst-donker)}
.cc-profielkop__cijfers dd{color:var(--cc-licht)}
.cc-profielkop__goto a{color:var(--cc-groen)}
.cc-profielkop .cc-knop{background:transparent;border:1px solid var(--cc-rand-donker-2);color:var(--cc-tekst-donker-2)}
.cc-profielkop .cc-knop:hover{background:transparent;border-color:var(--cc-groen-knop);color:var(--cc-groen)}
.cc-profielkop__foto,.cc-profielkop__wie img{border:1px solid var(--cc-rand-donker-2)}
.cc-profieltabs{margin-top:0;border-bottom:1px solid var(--cc-rand-licht)}

/* Community: naam met foto, losse blikken in de tierlijst, grote beginknop. */
.cc-stroomkaart__wie{display:flex;align-items:center;gap:9px;width:100%;margin-bottom:10px}
.cc-stroomkaart__tijd{margin-left:auto;font-family:var(--cc-mono);font-size:10.5px;color:var(--cc-tekst-3)}
.cc-stroomkaart__kop{flex-wrap:wrap}
.cc-stroomkaart__foto{width:26px;height:26px;border-radius:999px;object-fit:cover;display:block}
.cc-stroomkaart__wie b{font-weight:600;color:var(--cc-tekst-2)}

.cc-zijtier__rij{display:flex;gap:2px;align-items:flex-end;overflow-x:auto;padding:4px 0 2px;grid-template-columns:none}
.cc-zijtierblik{position:relative;flex:0 0 auto;width:46px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;background:none;border-radius:0;overflow:visible;aspect-ratio:auto}
.cc-zijtierblik img{height:70px}
.cc-zijtierblik img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.55))}
.cc-zijtierblik__tier{position:static;margin-top:6px;width:19px;height:19px;border-radius:6px;font-size:11px}
.cc-zijtierblik:hover{outline:0}
.cc-zijtierblik:hover img{filter:drop-shadow(0 8px 8px rgba(0,224,122,.35))}

.cc-stroom__begin{display:flex;align-items:center;min-height:104px;padding:18px 20px;
  border:1px dashed var(--cc-rand-licht);border-radius:16px;background:var(--cc-licht-2);
  font-size:15px;font-weight:600;color:var(--cc-tekst-2);margin-bottom:12px}
.cc-stroom__begin:hover{border-color:var(--cc-zwart);color:var(--cc-tekst);text-decoration:none}

/* Drie blikken per ingang, het middelste vooraan. */
.cc-snelkoppeling__blikken{align-items:flex-end;gap:0}
.cc-snelkoppeling__blik{width:36px;height:62px;margin-left:-18px;z-index:1;opacity:.85;transition:transform .15s}
.cc-snelkoppeling__blik--midden{width:52px;height:86px;z-index:3;opacity:1;margin-left:-16px;margin-right:-16px}
.cc-snelkoppeling__blik--midden img{filter:drop-shadow(-4px 3px 6px rgba(16,20,19,.34)) drop-shadow(4px 3px 6px rgba(16,20,19,.34))}
.cc-snelkoppeling__blik--tray{width:86px;height:78px;margin-left:-6px;opacity:1;z-index:3}
.cc-snelkoppeling:hover .cc-snelkoppeling__blik--midden{transform:translateY(-3px)}
@media (max-width:1099px){.cc-snelkoppeling__blik{width:28px;height:46px}.cc-snelkoppeling__blik--midden{width:38px;height:60px}}

/* Go-to-kaarten in de profielkop, zoals het ontwerp. */
.cc-profielgoto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
@media (max-width:719px){.cc-profielgoto{grid-template-columns:1fr}}
.cc-gotokaart{display:flex;gap:13px;align-items:center;padding:14px;border:1px solid var(--cc-rand-donker-2);
  border-radius:16px;background:#101615}
.cc-gotokaart__beeld{flex:0 0 auto;width:38px;height:74px;display:flex;align-items:center;justify-content:center}
.cc-gotokaart__beeld img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.5))}
.cc-gotokaart__tekst{min-width:0;flex:1 1 auto;display:block}
.cc-gotokaart__kicker{display:block;font-family:var(--cc-mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cc-groen)}
.cc-gotokaart__naam{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.25;
  margin-top:6px;color:var(--cc-licht)}
a.cc-gotokaart__naam:hover{color:var(--cc-groen);text-decoration:none}
.cc-gotokaart__leeg{color:var(--cc-tekst-donker)}
.cc-gotokaart__meta{display:flex;align-items:center;gap:7px;font-family:var(--cc-mono);font-size:10px;
  letter-spacing:.06em;color:var(--cc-tekst-donker);margin-top:6px}
a.cc-gotokaart__meta:hover{color:var(--cc-groen)}
.cc-profielkop__gotorij{display:none}

/* Blikken die je nog niet hebt: lichter en gestippeld. */
.cc-tierblik--niet{opacity:.45}
.cc-tierblik--niet::after{content:"";position:absolute;inset:-3px;border:1px dashed var(--cc-rand-licht);border-radius:8px;pointer-events:none}
.cc-tierblik--niet:hover{opacity:.8}
.cc-tierpool__blikken{max-height:none}

/* stroomkaart kop v2 */
.cc-stroomkaart__wie{flex:1 0 100%;display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:14px}
.cc-stroomkaart__wie b{font-weight:600;font-size:14px;color:var(--cc-tekst)}
.cc-stroomkaart__tijd{margin-left:auto;font-family:var(--cc-mono);font-size:10.5px;font-weight:400;color:var(--cc-tekst-3)}
.cc-stroomkaart__foto{width:26px;height:26px;border-radius:999px;object-fit:cover;display:block;flex:0 0 auto}

/* Zoekveld in de pools en de blik-toevoegen-strook in de kast. */
.cc-poolzoek{flex:1 1 160px;max-width:260px;display:block}
.cc-poolzoek input{width:100%;padding:7px 12px;border:1px solid var(--cc-rand-licht);border-radius:999px;
  background:var(--cc-licht);font-family:var(--cc-font);font-size:13px;color:var(--cc-tekst)}
.cc-poolzoek input:focus{outline:0;border-color:var(--cc-groen-knop)}
.cc-tierpool__kop{flex-wrap:wrap;gap:10px}
.cc-kastpool{margin-top:18px;padding:14px 16px;border:1px dashed var(--cc-rand-licht);border-radius:16px;background:var(--cc-licht-2)}
.cc-kastblik{margin:0;padding:0;border:0;background:none;position:relative;flex:0 0 auto;width:44px;height:58px}
.cc-kastblik button{width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:flex-end;justify-content:center}
.cc-kastblik img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 7px 7px rgba(16,20,19,.28))}
.cc-kastblik:hover{transform:translateY(-2px)}

/* Meteen een discussie beginnen op de communitypagina. */
.cc-stroombegin{display:grid;gap:10px;margin-bottom:12px;padding:16px 18px;border:1px solid var(--cc-rand-licht);
  border-radius:16px;background:var(--cc-licht-2)}
.cc-stroombegin__kies{position:relative}
.cc-stroombegin__kies input{width:100%;padding:10px 14px;border:1px solid var(--cc-rand-licht);border-radius:999px;
  background:var(--cc-licht);font-family:var(--cc-font);font-size:14px;color:var(--cc-tekst)}
.cc-stroombegin__kies input:focus{outline:0;border-color:var(--cc-groen-knop)}
.cc-stroombegin__lade{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;max-height:280px;overflow-y:auto;
  background:var(--cc-zwart-2);border:1px solid var(--cc-rand-donker-2);border-radius:14px;padding:6px;display:grid;gap:2px;
  box-shadow:0 16px 40px rgba(0,0,0,.45)}
.cc-stroombegin__rij{display:flex;align-items:center;gap:10px;padding:7px 9px;border:0;border-radius:10px;
  background:transparent;color:var(--cc-licht);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.cc-stroombegin__rij:hover{background:var(--cc-rand-donker)}
.cc-stroombegin__rij img{width:26px;height:34px;object-fit:contain}
.cc-stroombegin textarea{width:100%;padding:12px 14px;border:1px solid var(--cc-rand-licht);border-radius:14px;
  background:var(--cc-licht);font-family:var(--cc-font);font-size:14.5px;line-height:1.5;color:var(--cc-tekst);resize:vertical}
.cc-stroombegin textarea:focus{outline:0;border-color:var(--cc-groen-knop)}
.cc-stroombegin__voet{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cc-stroombegin__gekozen{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.06em;color:var(--cc-tekst-3)}
.cc-stroombegin__voet .cc-knop{margin-left:auto}
.cc-stroombegin__voet .cc-knop[disabled]{opacity:.45;cursor:not-allowed}


/* ==========================================================================
26. Winkelwagen — volgens het ontwerp
   Lichte kaarten op de lichte pagina: cadeaubalk, bestelling, en rechts
   de bezorgkeuze, de optelsom en het 18+ blokje.
========================================================================== */
.cc-wagenpagina{padding-bottom:60px}
.cc-wagenlinks{display:grid;gap:22px;align-content:start;min-width:0}

/* --- cadeaubalk ------------------------------------------------------- */
.cc-cadeaus{background:transparent;color:var(--cc-tekst);border-radius:0;padding:0;gap:16px}
.cc-cadeaus__balk{background:#fff;border:1px solid var(--cc-rand-licht-2);
border-radius:var(--cc-rond-groot);padding:20px 22px}
.cc-cadeaus .cc-kicker{color:var(--cc-tekst-3)}
.cc-cadeaus__kop{align-items:baseline;margin-bottom:16px}
.cc-cadeaus__telling{border:1px solid var(--cc-rand-licht-2);background:#fff;color:var(--cc-tekst)}
.cc-cadeaus__stand{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:var(--cc-tekst-2)}

.cc-voortgang{height:8px;background:var(--cc-licht-2);margin:0 2px 26px}
.cc-voortgang__vulling{background:var(--cc-groen-knop)}
.cc-voortgang__punt{width:14px;height:14px;margin-left:-7px;background:var(--cc-licht-3);border:2px solid #fff}
.cc-voortgang__punt.cc-behaald{background:var(--cc-groen-knop);border-color:#fff}
.cc-voortgang__label{top:12px;color:var(--cc-tekst-donker)}
.cc-voortgang__punt.cc-behaald .cc-voortgang__label{color:var(--cc-groen-donker)}

.cc-cadeaukaarten{grid-template-columns:1fr;gap:16px}
.cc-cadeaukaart{background:#fff;border:1px solid var(--cc-rand-licht-2);
border-radius:var(--cc-rond-groot);padding:0;gap:0;overflow:hidden}
.cc-cadeaukaart.cc-gekozen{border-color:var(--cc-groen-knop)}
.cc-cadeaukaart__kop{padding:15px 22px 0;background:var(--cc-licht-2);align-items:flex-start}
.cc-cadeaukaart__titel{color:var(--cc-tekst);font-size:14.5px}
.cc-cadeaukaart__badge{background:#fff;border:1px solid var(--cc-rand-licht-2);color:var(--cc-tekst-3);font-size:10px}
.cc-cadeaukaart.cc-gekozen .cc-cadeaukaart__badge{background:var(--cc-groen-knop);color:#fff;border-color:transparent}
.cc-cadeaukaart__sub{margin:0;padding:4px 22px 14px;background:var(--cc-licht-2);
border-bottom:1px solid var(--cc-rand-licht-2);color:var(--cc-tekst-3)}
.cc-cadeaukeuzes{grid-template-columns:repeat(auto-fill,minmax(min(100%,196px),1fr));gap:10px;padding:16px 22px 20px}
.cc-cadeaukeuze{gap:11px;padding:10px 12px;border:1px solid var(--cc-rand-licht-2);
border-radius:14px;background:#fff;color:var(--cc-tekst)}
.cc-cadeaukeuze::before{content:"";flex:0 0 20px;height:20px;border-radius:50%;
border:1.5px solid var(--cc-rand-licht);background:#fff}
.cc-cadeaukeuze:hover{background:#fff;color:var(--cc-tekst);border-color:var(--cc-zwart)}
.cc-cadeaukeuze.cc-actief{background:#F0FAF4;border-color:var(--cc-groen-knop);color:var(--cc-tekst)}
.cc-cadeaukeuze.cc-actief::before{border-color:var(--cc-groen-knop);background:var(--cc-groen-knop)
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.3 8.5 11 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center/11px 9px no-repeat}
.cc-cadeaukeuze__teken{flex:0 0 38px;height:38px;border-radius:10px;background:var(--cc-licht-2);
color:var(--cc-tekst-2);font-size:13px}
.cc-cadeaukeuze.cc-actief .cc-cadeaukeuze__teken{background:var(--cc-groen-knop);color:#fff}
.cc-cadeaukeuze--geen .cc-cadeaukeuze__teken{color:var(--cc-tekst-donker)}
.cc-cadeaukeuze__naam{font-size:13px;font-weight:500;line-height:1.3}

/* --- de bestelling ---------------------------------------------------- */
.cc-wagenregels{gap:0;background:#fff;border:1px solid var(--cc-rand-licht-2);border-radius:var(--cc-rond-groot)}
.cc-wagenregels__kop{padding:16px 22px;background:#fff;border-bottom:1px solid var(--cc-rand-licht-2);
font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--cc-tekst-3)}
.cc-wagenregel{padding:16px 22px;border-bottom:1px solid #EFF1EF}
.cc-wagenregels .cc-wagenregel:last-of-type{border-bottom:0}

/* --- de zijkolom ------------------------------------------------------ */
.cc-wagenoptelling{position:sticky;top:96px;display:grid;gap:16px;align-content:start;min-width:0}
@media (max-width:899px){.cc-wagenoptelling{position:static;top:auto}}
.cc-wagentotalen{display:grid;gap:16px}
.cc-optelkaart{background:#fff;border:1px solid var(--cc-rand-licht-2);
border-radius:var(--cc-rond-groot);padding:20px 22px}
.cc-optelling{position:static;top:auto;background:#fff;padding:20px 22px}
.cc-optelling__rij{padding:5px 0;border-bottom:0;font-size:14px}
.cc-optelling__rij--klein{font-size:12.5px}
.cc-optelling__rij--totaal{margin-top:15px;padding:15px 0 0;
border-top:1px solid var(--cc-rand-licht-2);font-size:16px;font-weight:600;letter-spacing:-.012em}
.cc-optelling__rij--totaal span:last-child{font-size:24px;font-weight:700;letter-spacing:-.025em}
.cc-gratis{color:var(--cc-groen-donker);font-weight:600}

.cc-verzendkaart .cc-optelling__kop{margin-bottom:13px}
.cc-wagentotalen ul#shipping_method{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cc-wagentotalen ul#shipping_method li{display:block;position:relative;margin:0;padding:0}
.cc-wagentotalen ul#shipping_method li::before{content:none}
.cc-wagentotalen ul#shipping_method input.shipping_method{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cc-wagentotalen ul#shipping_method li label{display:flex;align-items:center;gap:12px;margin:0;
padding:13px 15px;border:1px solid var(--cc-rand-licht-2);border-radius:14px;background:#fff;cursor:pointer}
.cc-wagentotalen ul#shipping_method li label:hover{border-color:var(--cc-zwart)}
.cc-wagentotalen ul#shipping_method li label::before{content:"";flex:0 0 18px;height:18px;border-radius:50%;
border:1.5px solid var(--cc-rand-licht);background:#fff;box-sizing:border-box}
.cc-wagentotalen ul#shipping_method li input.shipping_method:checked + label{border-color:var(--cc-zwart)}
.cc-wagentotalen ul#shipping_method li input.shipping_method:checked + label::before{
border:5px solid var(--cc-groen-knop);background:#fff}
.cc-wagentotalen ul#shipping_method li input.shipping_method:focus-visible + label{outline:2px solid var(--cc-groen-knop);outline-offset:2px}
.cc-verzendkeuze{flex:1 1 auto;min-width:0}
.cc-verzendkeuze__naam{display:block;font-size:14px;font-weight:600;letter-spacing:-.008em}
.cc-verzendkeuze__sub{display:block;margin-top:3px;font-family:var(--cc-mono);font-size:10.5px;color:var(--cc-tekst-3)}
.cc-verzendkeuze__prijs{flex:0 0 auto;font-size:13.5px;font-weight:600;white-space:nowrap}
.cc-wagentotalen .woocommerce-shipping-destination,
.cc-wagentotalen .woocommerce-shipping-calculator,
.cc-wagentotalen .shipping-calculator-button{display:none}

.cc-wagen18{margin-top:0}

/* WooCommerce levert de verzendkeuze als tabelrij; hier is geen tabel. */
.cc-wagentotalen .woocommerce-shipping-totals{display:block}
.cc-wagentotalen .woocommerce-shipping-totals > th{display:none}
.cc-wagentotalen .woocommerce-shipping-totals > td{display:block;padding:0;border:0}
.cc-wagentotalen ul#shipping_method li label{display:flex!important}
.cc-wagentotalen .woocommerce-shipping-destination,
.cc-wagentotalen .woocommerce-shipping-calculator,
.cc-wagentotalen .shipping-calculator-button{display:none!important}


/* ==========================================================================
27b. Afrekenen in stappen — zoals in het ontwerp
========================================================================== */
.cc-afstap[hidden]{display:none}
.cc-afstap{display:grid;gap:18px}

.cc-stappen{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;margin:0;padding:0;list-style:none}
.cc-stappen[hidden]{display:none}
.cc-stappen__stap{display:flex;align-items:center;gap:10px;padding:12px 15px;background:#fff;
border:1px solid var(--cc-rand-licht-2);border-radius:var(--cc-rond);cursor:pointer;
font-size:13.5px;font-weight:600;color:var(--cc-tekst-3)}
.cc-stappen__stap::before{content:none}
.cc-stappen__nr{flex:0 0 24px;height:24px;display:flex;align-items:center;justify-content:center;
border-radius:50%;background:var(--cc-licht-2);color:var(--cc-tekst-3);font-family:var(--cc-mono);font-size:11px}
.cc-stappen__stap.cc-nu{border-color:var(--cc-zwart);color:var(--cc-tekst)}
.cc-stappen__stap.cc-nu .cc-stappen__nr{background:var(--cc-zwart);color:var(--cc-licht)}
.cc-stappen__stap.cc-klaar{color:var(--cc-groen-donker);border-color:var(--cc-groen-knop)}
.cc-stappen__stap.cc-klaar .cc-stappen__nr{background:var(--cc-groen-knop);color:#fff}
@media (max-width:559px){.cc-stappen__naam{display:none}.cc-stappen__stap{justify-content:center}}

.cc-stapnav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cc-stapnav[hidden],.cc-stapnav [hidden]{display:none}
.cc-stapnav .cc-knop{min-width:160px;justify-content:center}
.cc-stapnav [data-cc-stapverder]{margin-left:auto}
.cc-knop--zwart{background:var(--cc-zwart);color:var(--cc-licht);border:0}
.cc-knop--zwart:hover{background:var(--cc-groen-knop);color:var(--cc-groen-diep)}

/* de verzendkeuze bovenaan stap 1 */
.cc-keuzelijst{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cc-keuzelijst li{display:block;position:relative;margin:0;padding:0}
.cc-keuzelijst li::before{content:none}
.cc-keuzelijst li input[type=radio]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cc-keuzelijst li label{display:flex!important;align-items:center;gap:12px;margin:0;
padding:15px 17px;border:1px solid var(--cc-rand-licht-2);border-radius:16px;background:#fff;
cursor:pointer;font-family:var(--cc-font);font-size:15px;letter-spacing:normal;text-transform:none;color:var(--cc-tekst)}
.cc-keuzelijst li label:hover{border-color:var(--cc-zwart)}
.cc-keuzelijst li label::before{content:"";flex:0 0 20px;height:20px;border-radius:50%;
border:1.5px solid var(--cc-rand-licht);background:#fff;box-sizing:border-box}
.cc-keuzelijst li input[type=radio]:checked + label{border-color:var(--cc-zwart);background:#FAFBFA}
.cc-keuzelijst li input[type=radio]:checked + label::before{
border:6px solid var(--cc-groen-knop);background:#fff}
.cc-ontvangplek .cc-verzendkeuze{flex:1 1 auto;min-width:0}
.cc-ontvangplek .cc-verzendkeuze__naam{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.cc-ontvangplek .cc-verzendkeuze__sub{display:block;margin-top:4px;font-family:var(--cc-mono);
font-size:11px;color:var(--cc-tekst-3)}
.cc-ontvangplek .cc-verzendkeuze__prijs{flex:0 0 auto;font-size:14.5px;font-weight:600;white-space:nowrap}

/* velden in twee kolommen, zoals in het ontwerp */
.cc-afreken__velden{grid-template-columns:minmax(0,1fr);gap:22px}
.cc-afreken .woocommerce-billing-fields__field-wrapper,
.cc-afreken .woocommerce-shipping-fields__field-wrapper{
grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cc-afreken .form-row-wide,
.cc-afreken #billing_address_1_field,
.cc-afreken #billing_address_2_field,
.cc-afreken #shipping_address_1_field,
.cc-afreken #shipping_address_2_field,
.cc-afreken #billing_country_field,
.cc-afreken #shipping_country_field,
.cc-afreken #billing_email_field{grid-column:1/-1}
@media (max-width:639px){
.cc-afreken .woocommerce-billing-fields__field-wrapper,
.cc-afreken .woocommerce-shipping-fields__field-wrapper{grid-template-columns:minmax(0,1fr)}
}

/* de gekozen verzendmanier in de samenvatting */
.cc-samenvatting__verzending{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.cc-samenvatting__verzendnaam{font-family:var(--cc-mono);font-size:11px;color:var(--cc-tekst-3)}

/* postcode/plaats en telefoon/e-mail naast elkaar, zoals in het ontwerp */
.cc-afreken #billing_postcode_field,.cc-afreken #billing_city_field,
.cc-afreken #shipping_postcode_field,.cc-afreken #shipping_city_field,
.cc-afreken #billing_phone_field,.cc-afreken #billing_email_field{grid-column:auto}

/* de regels in de samenvatting compact houden */
.cc-samenvatting dl.variation{display:block;margin:5px 0 0;font-family:var(--cc-mono);
font-size:10.5px;line-height:1.5;color:var(--cc-tekst-3)}
.cc-samenvatting dl.variation dt{display:none}
.cc-samenvatting dl.variation dd{display:inline;margin:0}
.cc-samenvatting dl.variation dd p{display:inline;margin:0}
.cc-samenvatting dl.variation dd:not(:last-of-type)::after{content:" · "}
.cc-samenvatting .shop_table td.product-name{font-size:14px;font-weight:600;letter-spacing:-.01em}
.cc-samenvatting .product-quantity{font-weight:400}

.cc-samenvatting .shop_table td.product-name dl.variation dt{display:none!important}
.cc-samenvatting .shop_table td.product-name dl.variation dd{display:inline!important;float:none;margin:0}

/* WooCommerce's eigen icoontje in meldingen valt over de tekst heen */
.woocommerce-info::before,.woocommerce-message::before,
.woocommerce-error::before,.woocommerce-noreviews::before{display:none!important}
.woocommerce-info,.woocommerce-message,.woocommerce-error{padding-left:22px!important}


/* ==========================================================================
29. Mijn account — indeling repareren en de kaarten uit het ontwerp
========================================================================== */
/* WooCommerce's clearfix maakt in een grid twee lege vakjes; die duwen het
   menu naar de verkeerde kolom. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after{display:none!important;content:none!important}
.woocommerce-account .woocommerce{grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:26px}
@media (max-width:899px){.woocommerce-account .woocommerce{grid-template-columns:minmax(0,1fr)}}

.woocommerce-MyAccount-navigation{background:#fff;border:1px solid var(--cc-rand-licht-2);
border-radius:var(--cc-rond-groot);padding:10px}
.woocommerce-MyAccount-navigation ul{gap:2px}
.woocommerce-MyAccount-navigation li{margin:0;padding:0}
.woocommerce-MyAccount-navigation li::before{content:none}
.woocommerce-MyAccount-navigation li a{padding:12px 15px;border-radius:14px;font-size:14.5px;font-weight:600}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--cc-zwart);color:var(--cc-licht)}

.woocommerce-MyAccount-content{background:#fff;border:1px solid var(--cc-rand-licht-2);
border-radius:var(--cc-rond-groot);padding:24px 26px 28px}
.woocommerce-MyAccount-content>p:first-child{margin-top:0}
.woocommerce-MyAccount-content h2:first-child{margin-top:0}

/* formulieren binnen mijn account passen bij de rest */
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields{background:transparent;padding:0;max-width:none}
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row,
.woocommerce-account .woocommerce-address-fields .form-row{margin:0}
.woocommerce-account .woocommerce-address-fields__field-wrapper{display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.woocommerce-account .woocommerce-EditAccountForm>p.form-row{display:block}
.woocommerce-account .woocommerce-EditAccountForm{display:grid;gap:14px;
grid-template-columns:repeat(2,minmax(0,1fr))}
.woocommerce-account .woocommerce-EditAccountForm>p.form-row-wide,
.woocommerce-account .woocommerce-EditAccountForm>fieldset,
.woocommerce-account .woocommerce-EditAccountForm>p:last-child,
.woocommerce-account .woocommerce-EditAccountForm>.clear,
.woocommerce-account .woocommerce-address-fields .form-row-wide{grid-column:1/-1}
@media (max-width:639px){
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields__field-wrapper{grid-template-columns:minmax(0,1fr)}
}
.woocommerce-account label{display:block;font-family:var(--cc-mono);font-size:10px;letter-spacing:.08em;
text-transform:uppercase;color:var(--cc-tekst-3);margin-bottom:5px}
.woocommerce-account input.input-text,.woocommerce-account select,.woocommerce-account textarea{
width:100%;padding:11px 13px;border:1px solid var(--cc-rand-licht);border-radius:12px;
background:var(--cc-licht);font-family:var(--cc-font);font-size:14.5px;color:var(--cc-tekst)}
.woocommerce-account input.input-text:focus,.woocommerce-account select:focus{
outline:2px solid var(--cc-groen-knop);outline-offset:1px;border-color:transparent}
.woocommerce-account fieldset legend{margin-top:8px}

/* adressen als kaartjes */
.woocommerce-account .woocommerce-Addresses{gap:18px}
.woocommerce-account .woocommerce-Address{background:var(--cc-licht-2);border-radius:16px;padding:18px 20px}
.woocommerce-account .woocommerce-Address-title{display:flex;align-items:baseline;
justify-content:space-between;gap:12px;margin-bottom:8px}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3{margin:0;padding:0;border:0;font-size:16px}
.woocommerce-account .woocommerce-Address address{font-style:normal;font-size:14px;line-height:1.7;color:var(--cc-tekst-2)}

/* bestellingen */
.woocommerce-account table.woocommerce-orders-table{width:100%;border:1px solid var(--cc-rand-licht-2);
border-radius:16px;border-collapse:separate;border-spacing:0;overflow:hidden;background:#fff}
.woocommerce-account table.woocommerce-orders-table th{background:var(--cc-licht-2);
font-family:var(--cc-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
color:var(--cc-tekst-3);font-weight:500;padding:12px 14px;text-align:left}
.woocommerce-account table.woocommerce-orders-table td{padding:13px 14px;border-top:1px solid #EFF1EF;font-size:14px}
.woocommerce-account .woocommerce-Message,.woocommerce-account .woocommerce-info{
background:var(--cc-licht-2);border:1px solid var(--cc-rand-licht-2);border-radius:16px;
padding:16px 18px!important;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.woocommerce-account .woocommerce-Button{flex:0 0 auto}

/* mijn account: kopje en snelkoppelingen */
.cc-accountkop{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;
padding:18px 20px;background:var(--cc-licht-2);border-radius:18px}
.cc-accountkop__foto img{width:56px;height:56px;border-radius:50%;display:block;object-fit:cover}
.cc-accountkop__wie{flex:1 1 auto;min-width:0;display:grid;gap:3px}
.cc-accountkop__naam{font-size:17px;font-weight:700;letter-spacing:-.02em}
.cc-accountkop__mail{font-family:var(--cc-mono);font-size:11.5px;color:var(--cc-tekst-3);overflow-wrap:anywhere}
.cc-accounttegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
gap:12px;margin-top:14px}
.cc-accounttegel{display:grid;gap:4px;padding:16px 18px;background:#fff;
border:1px solid var(--cc-rand-licht-2);border-radius:16px;text-decoration:none}
.cc-accounttegel:hover{border-color:var(--cc-zwart);text-decoration:none}
.cc-accounttegel__naam{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--cc-tekst)}
.cc-accounttegel__sub{font-size:13px;line-height:1.5;color:var(--cc-tekst-3)}

/* accountdetails: hulpteksten en het oogje bij wachtwoordvelden */
.woocommerce-account .woocommerce-input-wrapper{display:block}
.woocommerce-account .woocommerce-EditAccountForm em,
.woocommerce-account .woocommerce-address-fields em{display:block;margin-top:6px;
font-style:normal;font-size:12.5px;line-height:1.5;color:var(--cc-tekst-3)}
.woocommerce-account .password-input{position:relative;display:block}
.woocommerce-account .password-input input{padding-right:44px}
.woocommerce-account .show-password-input{position:absolute;top:50%;right:14px;transform:translateY(-50%);
width:20px;height:20px;margin:0;cursor:pointer;background-position:center;background-repeat:no-repeat}
.woocommerce-account fieldset legend{margin-top:22px}

/* meldingen in mijn account: tekst links, knop rechts */
.woocommerce-account .woocommerce-Message,.woocommerce-account .woocommerce-info{flex-direction:row-reverse}
.woocommerce-account .woocommerce-Address-title .edit{font-size:13px;font-weight:600;text-align:right}


/* ==========================================================================
30. Foto's van je collectie op het profiel
========================================================================== */
.cc-fotos{margin-top:34px}
.cc-fotos__uitleg{margin:10px 0 0;max-width:70ch;font-size:14.5px;line-height:1.6;color:var(--cc-tekst-2)}
.cc-fotos__leeg{margin:0;font-size:14px;color:var(--cc-tekst-3)}
.cc-fotorooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
gap:14px;margin-top:18px;align-items:start}
.cc-fotokaart{position:relative;margin:0;background:#fff;border:1px solid var(--cc-rand-licht-2);
border-radius:18px;overflow:hidden}
.cc-fotokaart__beeld{aspect-ratio:4/3;background:var(--cc-licht-2);overflow:hidden}
.cc-fotokaart__beeld img{width:100%;height:100%;object-fit:cover;display:block}
.cc-fotokaart__voet{position:relative;display:grid;gap:3px;padding:12px 14px 14px}
.cc-fotokaart__tekst{font-size:14px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.cc-fotokaart__meta{font-family:var(--cc-mono);font-size:10.5px;color:var(--cc-tekst-3)}
.cc-fotokaart__weg{position:absolute;top:10px;right:10px}
.cc-fotokaart__weg button{width:28px;height:28px;border:0;border-radius:50%;
background:rgba(11,14,13,.62);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.cc-fotokaart__weg button:hover{background:var(--cc-rood)}
.cc-fotokaart:hover .cc-fotokaart__weg button{background:rgba(11,14,13,.85)}

.cc-fotonieuw{display:grid;gap:10px;align-content:start;padding:14px;background:#fff;
border:1px dashed var(--cc-rand-licht);border-radius:18px}
.cc-fotonieuw__kiezer{position:relative;display:grid;justify-items:center;align-content:center;gap:6px;
aspect-ratio:4/3;border-radius:12px;background:var(--cc-licht-2);cursor:pointer;text-align:center}
.cc-fotonieuw__kiezer:hover{background:var(--cc-licht-3)}
.cc-fotonieuw__kiezer input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.cc-fotonieuw__plus{font-size:26px;line-height:1;color:var(--cc-tekst-3)}
.cc-fotonieuw__naam{font-size:13.5px;font-weight:600;color:var(--cc-tekst-2)}
.cc-fotonieuw input[type=text]{width:100%;padding:10px 12px;border:1px solid var(--cc-rand-licht);
border-radius:12px;background:var(--cc-licht);font-family:var(--cc-font);font-size:14px}
.cc-fotonieuw .cc-knop{justify-content:center}
.cc-fotonieuw__spec{font-family:var(--cc-mono);font-size:10px;color:var(--cc-tekst-3);text-align:center}

.cc-verzendkeuze__vanaf{font-family:var(--cc-mono);font-size:10.5px;font-weight:400;color:var(--cc-tekst-3);margin-right:2px}

/* bij afhalen zijn de adresvelden niet nodig */
.cc-afreken--afhalen .cc-adresveld{display:none!important}
.cc-stappen__stap a{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.cc-stappen__stap a:hover{text-decoration:none}

.cc-afreken--afhalen .woocommerce-shipping-fields{display:none}

/* in de smalle zijkolom mag de regel onder de naam doorlopen */
.cc-wagentotalen ul#shipping_method li label{align-items:flex-start}
.cc-wagentotalen ul#shipping_method li label::before{margin-top:2px}
.cc-wagentotalen .cc-verzendkeuze__prijs{padding-top:1px}

.cc-afhaalkaart__korting{margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--cc-groen)}
.cc-afhaalkaart[hidden]{display:none}


/* ==========================================================================
31. Naslag op feedback 685-687
========================================================================== */
/* Het blik moet passen in het vakje, niet bijgesneden worden. */
.cc-wagenregel__beeld{flex:0 0 74px;height:74px;padding:6px;box-sizing:border-box}
.cc-wagenregel__beeld a{display:flex;align-items:center;justify-content:center;
width:100%;height:100%;min-width:0}
.cc-wagenregel__beeld img{width:auto;height:auto;max-width:56%;max-height:80%;object-fit:contain}
@media (max-width:639px){.cc-wagenregel__beeld{flex-basis:60px;height:60px;padding:5px}}

/* De bestelnotities krijgen dezelfde opmaak als de andere velden. */
.cc-afreken textarea#order_comments,
.woocommerce form.cc-afreken .form-row textarea{
width:100%;min-height:96px;padding:12px 14px;border:1px solid var(--cc-rand-licht);
border-radius:12px;background:#fff;font-family:var(--cc-font);font-size:15px;
line-height:1.5;color:var(--cc-tekst);resize:vertical;box-sizing:border-box}
.cc-afreken textarea#order_comments:focus,
.woocommerce form.cc-afreken .form-row textarea:focus{
outline:2px solid var(--cc-groen-knop);outline-offset:1px;border-color:transparent}

/* vervoerder kiezen */
.cc-vervoerkaart__sub{margin:-8px 0 16px;font-size:14px;line-height:1.6;color:var(--cc-tekst-3)}
.cc-vervoerders{display:grid;gap:10px}
.cc-afreken .cc-vervoerder{display:flex;align-items:center;gap:12px;margin:0;padding:15px 17px;
border:1px solid var(--cc-rand-licht-2);border-radius:16px;background:#fff;cursor:pointer;
font-family:var(--cc-font);font-size:15px;letter-spacing:normal;text-transform:none;color:var(--cc-tekst)}
.cc-afreken .cc-vervoerder:hover{border-color:var(--cc-zwart)}
.cc-afreken .cc-vervoerder input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cc-afreken .cc-vervoerder::before{content:"";flex:0 0 20px;height:20px;border-radius:50%;
border:1.5px solid var(--cc-rand-licht);background:#fff;box-sizing:border-box}
.cc-afreken .cc-vervoerder:has(input:checked){border-color:var(--cc-zwart);background:#FAFBFA}
.cc-afreken .cc-vervoerder:has(input:checked)::before{border:6px solid var(--cc-groen-knop);background:#fff}
.cc-vervoerder__tekst{flex:1 1 auto;min-width:0}
.cc-afreken .cc-vervoerder__naam{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;
color:var(--cc-tekst);text-transform:none;font-family:var(--cc-font);margin:0}
.cc-afreken .cc-vervoerder__sub{display:block;margin-top:4px;font-family:var(--cc-mono);
font-size:11px;color:var(--cc-tekst-3);text-transform:none;letter-spacing:0}
.cc-stappen__stap[hidden]{display:none}

/* profielfoto en naam wijzigen vanaf de profielkop */
.cc-fotoknop{margin:0}
.cc-fotoknop__vlak{position:relative;display:inline-block;cursor:pointer;line-height:0}
.cc-fotoknop__vlak input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.cc-fotoknop__potlood{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;
display:flex;align-items:center;justify-content:center;border-radius:50%;
background:var(--cc-groen-knop);color:#fff;box-shadow:0 0 0 3px var(--cc-zwart)}
.cc-fotoknop__vlak:hover .cc-fotoknop__potlood{background:var(--cc-groen-knop-hover)}

.cc-naamregel{display:flex;align-items:center;gap:10px}
.cc-naamregel[hidden]{display:none}
.cc-potlood{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
border:1px solid var(--cc-rand-donker-2);border-radius:50%;background:transparent;
color:var(--cc-tekst-donker-2);cursor:pointer;flex:0 0 auto}
.cc-potlood:hover{border-color:var(--cc-groen-knop);color:var(--cc-groen)}
.cc-naamvorm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 2px}
.cc-naamvorm[hidden]{display:none}
.cc-naamvorm input[type=text]{flex:1 1 220px;min-width:0;padding:10px 13px;border-radius:12px;
border:1px solid var(--cc-rand-donker-2);background:var(--cc-zwart-2);color:var(--cc-licht);
font-family:var(--cc-font);font-size:18px;font-weight:700;letter-spacing:-.02em}
.cc-naamvorm input[type=text]:focus{outline:2px solid var(--cc-groen-knop);outline-offset:1px}


/* ==========================================================================
32. Webshop: snelkoppelingen en uitgelicht meer lucht (feedback 689, 690)
========================================================================== */
/* De blikken staan groot bovenin de kaart, de tekst eronder: links een blik,
   het middelste groter en ervoor, rechts een blik dat iets kleiner is dan het middelste. */
.cc-snelkoppeling{min-height:0;padding:0 18px 16px;gap:2px;border-radius:18px;justify-content:flex-end}
.cc-snelkoppeling__blikken{order:-1;position:static;right:auto;bottom:auto;top:auto;
	display:flex;align-items:flex-end;justify-content:center;gap:0;
	height:168px;margin:0 0 12px;padding-top:20px}
.cc-snelkoppeling__blik{width:62px;height:112px;margin:0 -14px;opacity:1;z-index:1}
.cc-snelkoppeling__blik--midden{width:76px;height:138px;margin:0 -14px;z-index:3}
.cc-snelkoppeling__blik:nth-child(3){z-index:2}
.cc-snelkoppeling__blik--tray,.cc-snelkoppeling__blik--tray:nth-child(3){width:136px;height:126px;margin:0 -6px}
.cc-snelkoppeling__blik img{object-position:bottom}
.cc-snelkoppeling__label{position:relative;padding-right:24px}
.cc-snelkoppeling__label::after{content:"\203A";position:absolute;right:0;top:50%;
	transform:translateY(-52%);font-size:21px;line-height:1;font-weight:400;color:var(--cc-tekst-3)}
.cc-snelkoppeling:hover .cc-snelkoppeling__label::after{color:var(--cc-tekst)}
@media (max-width:1099px){
	.cc-snelkoppeling{min-height:0;padding:0 15px 14px}
	.cc-snelkoppeling__blikken{height:148px;padding-top:18px;margin-bottom:10px}
	.cc-snelkoppeling__blik{width:55px;height:100px;margin:0 -12px}
	.cc-snelkoppeling__blik--midden{width:67px;height:122px;margin:0 -12px}
	.cc-snelkoppeling__blik--tray,.cc-snelkoppeling__blik--tray:nth-child(3){width:120px;height:112px}
}
@media (max-width:639px){
	.cc-snelkoppeling{min-height:0;padding:0 13px 12px}
	.cc-snelkoppeling__blikken{height:126px;padding-top:14px;margin-bottom:8px}
	.cc-snelkoppeling__blik{width:47px;height:86px;margin:0 -10px}
	.cc-snelkoppeling__blik--midden{width:57px;height:104px;margin:0 -10px}
	.cc-snelkoppeling__blik--tray,.cc-snelkoppeling__blik--tray:nth-child(3){width:102px;height:96px}
	.cc-snelkoppeling__label{padding-right:20px}
	.cc-snelkoppeling__label::after{font-size:19px}
}

/* Het uitgelichte blik krijgt de volle hoogte van de kaart; het blik zelf
   blijft op driekwart, zodat de badge en de vlag niet op het blik vallen. */
@media (min-width:900px){
	.cc-spot .cc-uitgelicht__beeld{aspect-ratio:auto;height:100%;min-height:380px;
	display:flex;align-items:center;justify-content:center;padding:30px 26px}
	.cc-spot .cc-uitgelicht__beeld img{position:static;inset:auto;margin:0;
	width:auto;height:auto;max-width:100%;max-height:300px;object-fit:contain}
}
.cc-uitgelicht__badge{top:14px;left:14px}
.cc-uitgelicht__vlag{top:14px;right:14px}


/* ==========================================================================
33. Blikken in de hero — meteen zien waar het om gaat (feedback 696)
========================================================================== */
.cc-heroblikken{display:flex;align-items:flex-end;justify-content:center;
max-width:var(--cc-breed);margin:22px auto 0;padding:0 var(--cc-zij) 4px;
overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cc-heroblikken::-webkit-scrollbar{display:none}
.cc-heroblik{flex:0 0 auto;width:104px;margin-left:-24px;line-height:0;
transform:translateY(calc(var(--cc-n,1) * 0px));transition:transform .18s ease}
.cc-heroblik:first-child{margin-left:0}
.cc-heroblik img{width:100%;height:auto;display:block;
filter:drop-shadow(0 14px 24px rgba(0,0,0,.6))}
.cc-heroblik:hover,.cc-heroblik:focus-visible{transform:translateY(-12px);z-index:2;position:relative}
@media (max-width:899px){
	.cc-heroblikken{justify-content:flex-start;margin-top:18px}
	.cc-heroblik{width:88px;margin-left:-20px}
}
@media (max-width:559px){
	.cc-heroblik{width:76px;margin-left:-18px}
}
/* op smal scherm eerst de blikken, dan de cijfers/feiten */
@media (max-width:899px){
	.cc-hero__binnen{padding-bottom:4px}
	.cc-hero .cc-cijfers,.cc-hero .cc-herofeiten{order:3}
}

.cc-hero__binnen .cc-heroblikken{grid-column:1/-1;max-width:none;margin:26px 0 0;padding:0 0 4px;justify-content:flex-start}
@media (max-width:899px){
	.cc-hero__binnen .cc-heroblikken{order:2;margin-top:18px}
	.cc-hero__binnen .cc-cijfers,.cc-hero__binnen .cc-herofeiten{order:3}
	.cc-hero__binnen>div:first-child{order:1}
}

@media (min-width:900px){
	.cc-hero__binnen{align-items:center}
	.cc-hero__binnen>div:first-child{grid-column:1;grid-row:1}
	.cc-hero__binnen .cc-cijfers,.cc-hero__binnen .cc-herofeiten{grid-column:1;grid-row:2;margin-top:26px}
	.cc-hero__binnen .cc-heroblikken{grid-column:2;grid-row:1 / span 2;margin:0;
	justify-content:flex-end;align-self:end}
	.cc-hero__binnen .cc-heroblik{width:108px;margin-left:-30px}
}

@media (min-width:900px){
	.cc-hero__binnen .cc-heroblik{width:96px;margin-left:-28px}
	.cc-hero__binnen .cc-heroblikken{overflow:visible}
}


/* ==========================================================================
34. Ontdekken: sprongknoppen en de groep "net binnen" (feedback 691)
========================================================================== */
.cc-ontdeksprongen{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cc-ontdeksprong{display:inline-flex;align-items:center;gap:10px;padding:9px 15px;
border:1px solid var(--cc-rand-donker-2);border-radius:var(--cc-rond);
background:var(--cc-zwart-2);color:var(--cc-tekst-donker-2);
font-size:13.5px;font-weight:600;text-decoration:none}
.cc-ontdeksprong:hover{border-color:var(--cc-groen-knop);color:var(--cc-licht);text-decoration:none}
.cc-ontdeksprong__aantal{display:inline-flex;align-items:center;justify-content:center;
min-width:22px;height:22px;padding:0 6px;border-radius:var(--cc-rond);
background:var(--cc-groen);color:var(--cc-groen-diep);
font-family:var(--cc-mono);font-size:10.5px}
.cc-ontdekgroep{scroll-margin-top:110px}
.cc-ontdekgroep__meer{margin-top:20px}
@media (max-width:559px){
	.cc-ontdeksprong{padding:8px 13px;font-size:12.5px}
}

/* communitykaart en aanmeldvelden op het afrekenen */
.cc-communitykaart__body{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--cc-tekst-2)}
.cc-communitykaart__lijst{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.cc-communitykaart__lijst li{position:relative;padding-left:26px;font-size:14px;line-height:1.5;color:var(--cc-tekst-2)}
.cc-communitykaart__lijst li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;
border-radius:50%;background:var(--cc-groen-knop)
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.3 8.5 11 1.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center/9px 8px no-repeat}
.cc-accountplek{margin-top:16px}
.cc-accountplek .woocommerce-account-fields{display:grid;gap:12px}
.cc-afreken .cc-accountplek .woocommerce-form__label-for-checkbox{display:flex;align-items:flex-start;gap:11px;
font-family:var(--cc-font);font-size:15px;font-weight:600;letter-spacing:normal;text-transform:none;
color:var(--cc-tekst);margin:0;cursor:pointer}
.cc-afreken .cc-accountplek .woocommerce-form__input-checkbox{width:18px;height:18px;margin-top:2px;
accent-color:var(--cc-groen-knop)}
.cc-communitykaart__naam{margin:14px 0 0;font-family:var(--cc-mono);font-size:11px;line-height:1.7;color:var(--cc-tekst-3)}

/* na het afrekenen door naar je profiel */
.cc-naarprofiel{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;
padding:12px 16px;border:1px solid var(--cc-rand-donker-2);border-radius:var(--cc-rond);
background:var(--cc-zwart-2)}
.cc-naarprofiel[hidden]{display:none}
.cc-naarprofiel__tekst{font-size:13.5px;color:var(--cc-tekst-donker-2)}
.cc-naarprofiel__link{font-size:13.5px;font-weight:600;color:var(--cc-groen)}
.cc-naarprofiel__stop{border:0;background:transparent;color:var(--cc-tekst-donker);
font-family:var(--cc-mono);font-size:11px;cursor:pointer;text-decoration:underline}


/* ==========================================================================
35. Webshopbanner — blikken die je zelf aanvinkt (feedback 698)
========================================================================== */
.cc-hero__binnen .cc-banner{grid-column:2;grid-row:1 / span 2;align-self:center;min-width:0}
@media (max-width:899px){
	.cc-hero__binnen .cc-banner{grid-column:1;grid-row:auto;order:2;margin-top:18px}
	.cc-hero__binnen .cc-cijfers,.cc-hero__binnen .cc-herofeiten{order:3}
	.cc-hero__binnen>div:first-child{order:1}
}
.cc-banner__slides{position:relative;display:grid}
.cc-bannerslide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
gap:20px;align-items:center;padding:20px 22px;border-radius:var(--cc-rond-groot);
background:linear-gradient(140deg,#141A18 0%,#0C1110 70%);border:1px solid var(--cc-rand-donker-2);
text-decoration:none;opacity:0;visibility:hidden;transition:opacity .25s ease}
.cc-bannerslide.cc-actief{opacity:1;visibility:visible}
.cc-bannerslide:hover{border-color:var(--cc-groen-knop);text-decoration:none}
.cc-bannerslide__beeld{display:flex;align-items:center;justify-content:center;height:230px}
.cc-bannerslide__beeld img{width:auto;height:auto;max-width:100%;max-height:230px;object-fit:contain;
filter:drop-shadow(0 14px 26px rgba(0,0,0,.6))}
.cc-bannerslide__tekst{display:grid;gap:7px;min-width:0}
.cc-bannerslide__reeks{font-family:var(--cc-mono);font-size:10px;letter-spacing:.09em;
text-transform:uppercase;color:var(--cc-groen)}
.cc-bannerslide__naam{font-size:clamp(19px,2vw,25px);font-weight:700;letter-spacing:-.028em;
line-height:1.12;color:var(--cc-licht)}
.cc-bannerslide__prijs{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--cc-licht)}
.cc-bannerslide__knop{margin-top:4px;font-size:13.5px;font-weight:600;color:var(--cc-groen)}

.cc-bannerduimen{display:flex;gap:8px;margin-top:12px}
.cc-bannerduim{flex:0 0 auto;width:52px;height:52px;display:flex;align-items:center;justify-content:center;
padding:5px;border:1px solid var(--cc-rand-donker-2);border-radius:12px;background:var(--cc-zwart-2)}
.cc-bannerduim img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.cc-bannerduim.cc-actief{border-color:var(--cc-groen-knop);background:var(--cc-groen-diep)}
.cc-bannerduim:hover{border-color:var(--cc-groen-knop)}
@media (max-width:559px){
	.cc-bannerslide{grid-template-columns:minmax(0,110px) minmax(0,1fr);gap:14px;padding:16px}
	.cc-bannerslide__beeld,.cc-bannerslide__beeld img{height:170px;max-height:170px}
}

/* ontdekken: kortere kop en de banner op zijn plek */
.cc-ontdekhero__zin{margin:12px 0 0;max-width:56ch;font-size:16px;line-height:1.6;color:var(--cc-tekst-donker-2)}
.cc-ontdekhero .cc-banner{max-width:var(--cc-breed);margin:24px auto 0;padding:0 var(--cc-zij)}
.cc-banner--ontdek .cc-bannerslide__reeks{color:var(--cc-groen)}

.cc-ontdekhero .cc-banner{max-width:880px;margin:24px 0 0;padding:0}

/* op ontdekken vier blikken naast elkaar: meteen iets te ontdekken */
@media (min-width:900px){
	.cc-ontdekhero .cc-banner--ontdek{max-width:none}
	.cc-banner--ontdek .cc-banner__slides{display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
	.cc-banner--ontdek .cc-bannerslide{grid-area:auto;opacity:1;visibility:visible;
	grid-template-columns:minmax(0,1fr);gap:12px;padding:18px 16px 20px;align-content:start}
	.cc-banner--ontdek .cc-bannerslide__beeld{height:200px}
	.cc-banner--ontdek .cc-bannerslide__beeld img{max-height:200px}
	.cc-banner--ontdek .cc-bannerslide__tekst{gap:5px}
	.cc-banner--ontdek .cc-bannerslide__naam{font-size:16px;line-height:1.2}
	.cc-banner--ontdek .cc-bannerduimen{display:none}
}


/* ==========================================================================
36. Slanke shopkop en de nieuwrij bovenaan (feedback 698, tweede ronde)
========================================================================== */
.cc-shopkop{background:var(--cc-zwart);color:var(--cc-licht);padding:0 0 22px}
.cc-shopkop .cc-kruimels{max-width:var(--cc-breed);margin:0 auto;padding:16px var(--cc-zij) 0}
.cc-shopkop__binnen{max-width:var(--cc-breed);margin:0 auto;padding:10px var(--cc-zij) 0}
.cc-shopkop__titel{margin:0;font-size:clamp(26px,3.2vw,38px);line-height:1.04;
letter-spacing:-.032em;font-weight:700}
.cc-shopkop__regel{margin:10px 0 0;font-family:var(--cc-mono);font-size:11.5px;
letter-spacing:.04em;color:var(--cc-tekst-donker-2);display:flex;flex-wrap:wrap;gap:8px}
.cc-shopkop__regel span{color:var(--cc-tekst-donker)}
@media (max-width:639px){
	.cc-shopkop{padding-bottom:18px}
	.cc-shopkop__regel{font-size:10.5px;gap:6px}
}

.cc-nieuwomhulsel{padding-top:26px}
.cc-nieuwblok{margin:0;padding-top:54px}
.cc-omhulsel>.cc-nieuwblok:first-child{padding-top:0}
@media (max-width:767px){.cc-nieuwblok{padding-top:40px}}
.cc-sectiekop__link{font-size:13.5px;font-weight:600;white-space:nowrap}
.cc-nieuwrij{display:flex;gap:14px;margin-top:18px;position:relative;
	overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
	margin-left:calc(-1 * var(--cc-zij));margin-right:calc(-1 * var(--cc-zij));
	padding:2px var(--cc-zij) 8px}
.cc-nieuwrij::-webkit-scrollbar{display:none}
.cc-nieuwrij>*{flex:0 0 calc((100% - 56px) / 5);scroll-snap-align:start}
@media (max-width:1099px){.cc-nieuwrij>*{flex-basis:calc((100% - 28px) / 3)}}
@media (max-width:767px){
	.cc-nieuwrij{gap:12px;margin-top:14px}
	.cc-nieuwrij>*{flex-basis:calc((100% - 12px) / 2)}
}

.cc-shopkop .cc-kruimels,.cc-shopkop .cc-kruimels a,.cc-shopkop .cc-kruimels span{color:var(--cc-tekst-donker)}
.cc-shopkop .cc-kruimels a:hover{color:var(--cc-groen)}

.cc-shopkop--ontdek{padding-bottom:20px}
.cc-shopkop__regel a{color:var(--cc-groen);font-weight:600}
.cc-shopkop .cc-ontdeksprongen{margin-top:16px}

/* op mobiel de homepage-hero korter, zodat de blikken sneller in beeld komen */
@media (max-width:639px){
	.cc-hero{padding-top:22px;padding-bottom:22px}
	.cc-hero__titel{font-size:clamp(28px,8vw,34px)}
	.cc-hero__body{font-size:14.5px;max-width:40ch}
	.cc-hero__binnen .cc-cijfers{margin-top:16px}
	.cc-nieuwomhulsel{padding-top:20px}
}


/* ==========================================================================
37. Webshop: smalle balk, merkschakelaar en het keuzevenster
========================================================================== */
.cc-shopbalk{background:var(--cc-zwart);color:var(--cc-licht);padding:0 0 16px}
.cc-shopbalk .cc-kruimels{max-width:var(--cc-breed);margin:0 auto;padding:14px var(--cc-zij) 0}
.cc-shopbalk .cc-kruimels,.cc-shopbalk .cc-kruimels a,.cc-shopbalk .cc-kruimels span{color:var(--cc-tekst-donker)}
.cc-shopbalk .cc-kruimels a:hover{color:var(--cc-groen)}
.cc-shopbalk__binnen{max-width:var(--cc-breed);margin:0 auto;padding:8px var(--cc-zij) 0;
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cc-shopbalk__regel{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
font-family:var(--cc-mono);font-size:12.5px;letter-spacing:.04em;color:var(--cc-tekst-donker-2)}
.cc-shopbalk__regel b{font-family:var(--cc-font);font-size:17px;font-weight:700;
letter-spacing:-.02em;color:var(--cc-licht)}
.cc-shopbalk__regel span{color:var(--cc-tekst-donker)}

.cc-merkswitch{display:inline-flex;padding:3px;border:1px solid var(--cc-rand-donker-2);
border-radius:var(--cc-rond);background:var(--cc-zwart-2)}
.cc-merkswitch__knop{appearance:none;-webkit-appearance:none;border:0;background:transparent;cursor:pointer;padding:7px 15px;border-radius:var(--cc-rond);font-size:13px;font-weight:600;
color:var(--cc-tekst-donker-2);text-decoration:none;white-space:nowrap}
.cc-merkswitch__knop:hover{color:var(--cc-licht);text-decoration:none}
.cc-merkswitch__knop.cc-actief{background:var(--cc-groen);color:var(--cc-groen-diep)}
@media (max-width:639px){
	.cc-shopbalk__binnen{gap:12px}
	.cc-shopbalk__regel b{font-size:15px}
	.cc-merkswitch__knop{padding:6px 12px;font-size:12px}
}

.cc-merkpop{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
padding:22px;background:rgba(4,8,7,.72);backdrop-filter:blur(3px)}
.cc-merkpop[hidden]{display:none}
.cc-merkpop__venster{width:min(440px,100%);background:var(--cc-zwart);color:var(--cc-licht);
border:1px solid var(--cc-rand-donker-2);border-radius:var(--cc-rond-groot);padding:26px 26px 24px}
.cc-merkpop__venster h2{margin:8px 0 0;font-size:24px;line-height:1.1;letter-spacing:-.028em}
.cc-merkpop__venster p{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:var(--cc-tekst-donker-2)}
.cc-merkpop__knoppen{display:grid;gap:9px;margin-top:20px}
.cc-merkpop__knoppen .cc-knop{justify-content:center;width:100%}

.cc-merkpop__knoppen .cc-knop{background:var(--cc-zwart-2);color:var(--cc-licht);
border:1px solid var(--cc-rand-donker-2)}
.cc-merkpop__knoppen .cc-knop:hover{border-color:var(--cc-groen-knop);color:var(--cc-licht)}
.cc-merkpop__knoppen .cc-knop--groen{background:var(--cc-groen-knop);color:var(--cc-groen-diep);border-color:transparent}
.cc-merkpop__knoppen .cc-knop--groen:hover{background:var(--cc-groen-knop-hover);color:var(--cc-groen-diep)}
.cc-merkpop__knoppen .cc-knop--rand{background:transparent;color:var(--cc-tekst-donker-2)}

/* ==========================================================================
   38. Nooit breder dan het scherm
   ========================================================================== */
html,body{overflow-x:clip}
.cc-kaart,.cc-kaart__prijs{position:relative}

/* Filters per type, elk met een eigen kopje. */
.cc-filtergroep{margin-top:18px}
.cc-filtergroep:first-of-type{margin-top:16px}
.cc-filtergroep__naam{font-family:var(--cc-mono);font-size:10px;letter-spacing:.11em;
	text-transform:uppercase;color:var(--cc-tekst-3);margin-bottom:8px}
.cc-filtergroep .cc-pilrij{margin-top:0}

/* ==========================================================================
   39. Kaartrijen als carrousel
   ========================================================================== */
.cc-sectiekop__rechts{display:flex;align-items:center;gap:14px;flex-shrink:0}
.cc-carrousel__knoppen{display:flex;gap:6px}
.cc-carrousel__knop{appearance:none;-webkit-appearance:none;width:32px;height:32px;padding:0;
	display:flex;align-items:center;justify-content:center;cursor:pointer;
	border:1px solid var(--cc-rand-licht);border-radius:50%;background:var(--cc-wit,#fff);
	font-size:19px;line-height:1;color:var(--cc-tekst)}
.cc-carrousel__knop:hover:not(:disabled){border-color:var(--cc-zwart);background:var(--cc-zwart);color:var(--cc-licht)}
.cc-carrousel__knop:disabled{opacity:.3;cursor:default}
.cc-carrousel--stil .cc-carrousel__knoppen{display:none}
@media (max-width:639px){.cc-carrousel__knoppen{display:none}}

/* Merkblokken: feiten onder de naam en een telling bij elke reeks. */
.cc-merkblok__feiten{margin-top:6px;font-family:var(--cc-mono);font-size:11px;letter-spacing:.05em;
	text-transform:uppercase;opacity:.62}
.cc-merkpil{display:inline-flex;align-items:center;gap:7px}
.cc-merkpil__aantal{font-family:var(--cc-mono);font-size:10px;opacity:.55}

/* ==========================================================================
   40. De bovenbalk hoort bij de pagina: licht in plaats van een zwarte band
   ========================================================================== */
.cc-shopbalk{background:var(--cc-licht);color:var(--cc-tekst);
	padding:0 0 18px;border-bottom:1px solid var(--cc-rand-licht-2)}
.cc-shopbalk .cc-kruimels,.cc-shopbalk .cc-kruimels a,.cc-shopbalk .cc-kruimels span{color:var(--cc-tekst-3)}
.cc-shopbalk .cc-kruimels a:hover{color:var(--cc-groen-donker)}
.cc-shopbalk__regel{color:var(--cc-tekst-3)}
.cc-shopbalk__regel b{color:var(--cc-tekst)}
.cc-shopbalk__regel span{color:var(--cc-tekst-2)}
.cc-shopbalk .cc-merkswitch{border-color:var(--cc-rand-licht);background:var(--cc-licht-2)}
.cc-shopbalk .cc-merkswitch__knop{color:var(--cc-tekst-3)}
.cc-shopbalk .cc-merkswitch__knop:hover{color:var(--cc-tekst)}
.cc-shopbalk .cc-merkswitch__knop.cc-actief{background:var(--cc-zwart);color:var(--cc-licht)}

/* ==========================================================================
   41. Herkomst: wereldkaart met de landen ernaast
   ========================================================================== */
.cc-landkiezer{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
	gap:26px;margin-top:18px;align-items:start}
@media (max-width:899px){.cc-landkiezer{grid-template-columns:1fr;gap:16px}}
.cc-landkiezer .cc-wereldkaart{margin:0;overflow-x:visible}
.cc-landkiezer .cc-wereldkaart svg{min-width:0;width:100%}
.cc-landkiezer [data-cc-land]{cursor:pointer}
.cc-landkeuze{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.cc-landkeuze .cc-pilfilter{display:inline-flex;align-items:center;gap:8px}

/* ==========================================================================
   42. Cadeauwijzer tijdens het shoppen
   ========================================================================== */
.cc-cadeauwijzer{position:fixed;left:18px;bottom:18px;z-index:90;display:flex;
	flex-direction:column;align-items:flex-start;gap:10px}
.cc-cadeauwijzer__knop{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:8px;
	padding:9px 15px 9px 12px;border:1px solid var(--cc-rand-donker-2);border-radius:99px;cursor:pointer;
	background:var(--cc-zwart);color:var(--cc-licht);box-shadow:0 8px 22px -12px rgba(0,0,0,.7)}
.cc-cadeauwijzer__knop:hover{border-color:var(--cc-groen)}
.cc-cadeauwijzer__teken{font-size:15px;line-height:1}
.cc-cadeauwijzer__kort{font-family:var(--cc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.cc-cadeauwijzer__venster{width:min(320px,calc(100vw - 36px));padding:16px 16px 14px;
	border:1px solid var(--cc-rand-donker-2);border-radius:16px;background:var(--cc-zwart);color:var(--cc-licht);
	box-shadow:0 18px 40px -20px rgba(0,0,0,.8)}
.cc-cadeauwijzer__venster[hidden]{display:none}
.cc-cadeauwijzer__telling{margin-top:4px;font-size:17px;font-weight:700;letter-spacing:-.02em}
.cc-cadeauwijzer__venster .cc-voortgang{margin-top:16px}
.cc-cadeauwijzer__stand{margin:16px 0 0;font-size:12.5px;line-height:1.5;color:var(--cc-tekst-donker-2)}
.cc-cadeauwijzer__link{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;color:var(--cc-groen)}
@media (max-width:639px){
	.cc-cadeauwijzer{left:14px;bottom:76px}
}

/* ==========================================================================
   43. Homepage: blikken naast de tekst in de hero
   ========================================================================== */
.cc-hero__binnen{grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr);
	grid-template-areas:"tekst blikken" "cijfers blikken";row-gap:30px;align-items:end}
.cc-hero__binnen>div:first-child{grid-area:tekst}
.cc-hero__binnen .cc-cijfers{grid-area:cijfers;align-self:end}
.cc-hero__binnen .cc-heroblikken{grid-area:blikken;margin:0;padding:0;max-width:none;
	align-self:end;justify-content:center;overflow:visible;min-height:250px}
.cc-hero__binnen .cc-heroblik{width:104px;margin:0 -22px;transform:none}
.cc-hero__binnen .cc-heroblik--0{width:84px;transform:translateY(-10px) rotate(-8deg);z-index:1}
.cc-hero__binnen .cc-heroblik--1{width:96px;transform:translateY(2px) rotate(-4deg);z-index:2}
.cc-hero__binnen .cc-heroblik--2{width:116px;z-index:4}
.cc-hero__binnen .cc-heroblik--3{width:96px;transform:translateY(2px) rotate(4deg);z-index:3}
.cc-hero__binnen .cc-heroblik--4{width:84px;transform:translateY(-10px) rotate(8deg);z-index:1}
.cc-hero__binnen .cc-heroblik{position:relative}
@media (max-width:899px){
	.cc-hero__binnen{grid-template-columns:minmax(0,1fr);
		grid-template-areas:"tekst" "blikken" "cijfers";row-gap:22px}
	.cc-hero__binnen .cc-heroblikken{min-height:0;justify-content:center;margin-top:4px}
	.cc-hero__binnen .cc-heroblik{width:74px;margin:0 -16px}
	.cc-hero__binnen .cc-heroblik--0,.cc-hero__binnen .cc-heroblik--4{width:60px}
	.cc-hero__binnen .cc-heroblik--1,.cc-hero__binnen .cc-heroblik--3{width:68px}
	.cc-hero__binnen .cc-heroblik--2{width:82px}
}

/* ==========================================================================
   44. Homepage: dezelfde merkbalk als de rest, en de community in het kort
   ========================================================================== */
.cc-shopbalk--thuis{padding:0 0 10px;border-bottom:0}
.cc-shopbalk--thuis .cc-shopbalk__binnen{padding-top:14px;justify-content:flex-end}
.cc-thuiscommunity__body{margin:14px 0 0;max-width:70ch;font-size:15px;line-height:1.6;color:var(--cc-tekst-2)}
.cc-thuiscommunity .cc-thuisdraden{margin-top:18px}

/* ==========================================================================
   45. Geen zwarte banners meer: de kop van elke pagina is licht
   ========================================================================== */
.cc-hero,.cc-shopkop{background:var(--cc-licht);color:var(--cc-tekst);
	border-bottom:1px solid var(--cc-rand-licht-2)}
.cc-hero__titel,.cc-shopkop__titel{color:var(--cc-tekst)}
.cc-hero__body{color:var(--cc-tekst-2)}
.cc-shopkop__regel{color:var(--cc-tekst-3)}
.cc-shopkop__regel span{color:var(--cc-tekst-2)}
.cc-shopkop .cc-kruimels,.cc-shopkop .cc-kruimels a,.cc-shopkop .cc-kruimels span{color:var(--cc-tekst-3)}
.cc-shopkop .cc-kruimels a:hover{color:var(--cc-groen-donker)}

/* de tweede heroknop was wit-op-zwart */
.cc-hero__knop2{background:transparent;border:1px solid var(--cc-rand-licht);color:var(--cc-tekst)}
.cc-hero__knop2:hover{background:transparent;border-color:var(--cc-zwart);color:var(--cc-tekst)}

/* de cijferbalk op licht */
.cc-hero .cc-cijfers{background:var(--cc-rand-licht-2);border-color:var(--cc-rand-licht)}
.cc-hero .cc-cijfer{background:var(--cc-licht-2)}
.cc-hero .cc-cijfer b{color:var(--cc-groen-donker)}
.cc-hero .cc-cijfer span{color:var(--cc-tekst-3)}

/* de sprongknoppen op ontdekken */
.cc-shopkop .cc-ontdeksprong{border-color:var(--cc-rand-licht);background:var(--cc-licht-2);color:var(--cc-tekst-2)}
.cc-shopkop .cc-ontdeksprong:hover{border-color:var(--cc-zwart);color:var(--cc-tekst)}
.cc-shopkop .cc-ontdeksprong__aantal{background:var(--cc-groen-knop);color:var(--cc-licht)}
.cc-shopkop__regel a{color:var(--cc-groen-donker)}

/* de blikken in de hero hadden een schaduw voor een zwarte ondergrond */
.cc-hero__binnen .cc-heroblik img{filter:drop-shadow(0 12px 20px rgba(16,20,19,.28))}

/* Ook de koppen van Alle blikken en de community op licht. */
.cc-archiefhero,.cc-tierhero{background:var(--cc-licht);color:var(--cc-tekst);
	border-bottom:1px solid var(--cc-rand-licht-2)}
.cc-archiefhero .cc-kruimels a,.cc-archiefhero .cc-kruimels span,
.cc-tierhero .cc-kruimels a,.cc-tierhero .cc-kruimels span{color:var(--cc-tekst-3)}
.cc-archiefhero .cc-kruimels a:hover,.cc-tierhero .cc-kruimels a:hover{color:var(--cc-groen-donker)}
.cc-archiefhero__intro p,.cc-tierhero__lede{color:var(--cc-tekst-2)}
.cc-tierhero__cijfers{background:var(--cc-rand-licht-2)}
.cc-tierhero__cijfers>div{background:var(--cc-licht-2)}
.cc-tierhero__cijfers dd{color:var(--cc-groen-donker)}
.cc-tierhero__cijfers dt{color:var(--cc-tekst-3)}
.cc-filters--donker .cc-filter{border-color:var(--cc-rand-licht);color:var(--cc-tekst-2)}
.cc-filters--donker .cc-filter:hover{border-color:var(--cc-zwart);color:var(--cc-tekst)}
.cc-filters--donker .cc-filter.cc-actief{background:var(--cc-zwart);border-color:var(--cc-zwart);color:var(--cc-licht)}
.cc-filters--donker .cc-filter__aantal{color:var(--cc-tekst-3)}
.cc-filters--donker .cc-filter.cc-actief .cc-filter__aantal{color:var(--cc-tekst-donker)}

/* ==========================================================================
   46. Kop van de voorpagina compacter, en de schakelaar op mobiel gecentreerd
   ========================================================================== */
.cc-hero__binnen{padding-top:30px;padding-bottom:34px;row-gap:26px}
@media (max-width:899px){
	.cc-hero__binnen{padding-top:22px;padding-bottom:26px;gap:20px}
}
@media (max-width:639px){
	.cc-shopbalk--thuis{padding-bottom:0}
	.cc-shopbalk--thuis .cc-shopbalk__binnen{padding-top:12px;justify-content:center}
	.cc-hero{padding-top:0}
	.cc-hero__binnen{padding-top:14px;padding-bottom:22px;gap:16px}
	.cc-hero__body{margin-top:12px}
	.cc-hero__knoppen{margin-top:18px}
}

/* De regel onder de titel op de releaseradar in dezelfde letter als de rest. */
.cc-shopkop__regel{font-family:var(--cc-font);font-size:16px;line-height:1.6;
	letter-spacing:normal;color:var(--cc-tekst-2);max-width:70ch;margin-top:12px;
	display:block}
.cc-shopkop__regel span{color:var(--cc-tekst-2)}
.cc-shopkop__regel a{color:var(--cc-groen-donker);font-weight:600;white-space:nowrap}
@media (max-width:639px){
	.cc-shopkop__regel{font-size:14.5px}
}

/* Uitleg onder de kop van een ontdekgroep. */
.cc-ontdekgroep__body{margin:14px 0 0;max-width:78ch;font-size:15px;line-height:1.6;color:var(--cc-tekst-2)}
@media (max-width:639px){.cc-ontdekgroep__body{font-size:14px}}

/* Labels op de releaseradar: van hard naar zacht. */
.cc-kaart__label--bevestigd{background:var(--cc-groen);color:var(--cc-groen-diep)}
.cc-kaart__label--aangekondigd{background:#BEE9CF;color:#12432A}
.cc-kaart__label--gelekt{background:#E8D08A;color:#4A3A10}
.cc-kaart__label--gerucht{background:#E3C0B4;color:#4A2318}
.cc-kaart__label--speculatie{background:#2A312F;color:var(--cc-tekst-donker-2)}

/* ==========================================================================
   47. De balk van DPD waarin je een afhaalpunt kiest, in onze stijl
   ========================================================================== */
.dpd-fixed-bottom-bar{border-top:1px solid var(--cc-rand-donker-2)}
.dpd-parcelshop-slideup-bar{background:var(--cc-zwart);color:var(--cc-licht);border-top:0}
.dpd-slideup-text{font-family:var(--cc-font);font-size:14.5px;color:var(--cc-licht)}
.dpd-slideup-button{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
	background:var(--cc-groen-knop);color:var(--cc-groen-diep);
	font-family:var(--cc-font);font-size:13.5px;font-weight:600;letter-spacing:normal;
	text-transform:none;border-radius:var(--cc-rond);padding:12px 20px}
.dpd-slideup-button:hover{background:var(--cc-groen-knop-hover)}
.dpd-collapse-toggle{background:var(--cc-zwart);color:var(--cc-licht);border:1px solid var(--cc-rand-donker-2)}
/* de balk niet over onze eigen knoppen rechtsonder heen */
@media (min-width:640px){.dpd-fixed-bottom-bar .dpd-bar-content{padding-right:220px}}

/* De DPD-plug-in zet zijn eigen zin onder de keuze; die staat al in onze
   eigen regel eronder, dus die tweede laten we weg. */
.cc-verzendplek #shipping_method li > p,
#shipping_method li > p{display:none}


/* ==========================================================================
   50. Blikvakje in de winkelwagen: licht, rustig, en de foto vult het vakje
   ========================================================================== */
.cc-wagenregel__beeld{background:var(--cc-licht-2);border:1px solid var(--cc-rand-licht-2);
	padding:5px;border-radius:12px}
.cc-wagenregel__beeld img{max-width:88%;max-height:88%}
.cc-wagenregel__vlag{box-shadow:0 0 0 1px rgba(16,20,19,.14)}

/* 51. Verzenden we niet naar het gekozen land, dan blijft de landkeuze staan */
.cc-afreken--geenverzending .cc-adresveld.cc-landveld{display:block!important}
.cc-geenverzending{display:none}
.cc-afreken--geenverzending .cc-geenverzending{display:flex}

/* 52. Het blikvakje in de winkelwagen staat rechtop, zo vult een blik het vakje */
.cc-wagenregel__beeld{flex:0 0 62px;width:62px;height:86px;padding:6px;border-radius:14px}
.cc-wagenregel__beeld a{width:100%;height:100%}
.cc-wagenregel__beeld img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}

/* 53. Wat meer lucht tussen de onderdelen op het profiel */
.cc-profielkop ~ section{margin-top:40px}
@media (max-width:760px){.cc-profielkop ~ section{margin-top:30px}}

/* 54. Het blikvakje in de winkelwagen volgt de productkaart uit de webshop:
   een donker vakje met het blik erop, in plaats van een grijs kadertje. */
.cc-wagenregel__beeld{flex:0 0 66px;width:66px;height:88px;padding:8px;border:0;border-radius:var(--cc-rond-klein);
	background:radial-gradient(115% 85% at 50% 10%,#232A28 0%,#121716 68%);overflow:hidden}
.cc-wagenregel__beeld a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.cc-wagenregel__beeld img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.cc-wagenregel__vlag{box-shadow:0 0 0 1px rgba(255,255,255,.22)}

/* 55. De keuzelijsten bij ontvangen en bij de vervoerder gebruiken dezelfde
   opmaak, en de vervoerderslijst mag de volle breedte van de kaart hebben. */
.cc-vervoerplek .cc-keuzelijst{margin:0}
.cc-vervoerplek .cc-keuzelijst li[hidden]{display:none}

/* Bij verzenden naar Nederland - Land wijzigen */
.cc-ontvangland{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:-2px 0 14px;
	font-family:var(--cc-mono);font-size:11.5px;letter-spacing:.02em;color:var(--cc-tekst-3)}
.cc-ontvangland b{font-weight:600;color:var(--cc-tekst)}
.cc-ontvangland__knop{appearance:none;border:0;background:0 0;padding:0;cursor:pointer;
	font-family:inherit;font-size:inherit;letter-spacing:inherit;color:var(--cc-groen-knop);
	text-decoration:underline;text-underline-offset:2px}
.cc-ontvangland__knop:hover{text-decoration-thickness:2px}
.cc-ontvangland__kiezer{flex:1 0 100%;max-width:340px;margin-top:2px;padding:9px 11px;
	border:1px solid var(--cc-rand-licht);border-radius:10px;background:#fff;
	font-family:var(--cc-font);font-size:13.5px;color:var(--cc-tekst)}

/* Het centengetal bij een keuze is alleen voor cc.js, niet om te lezen. */
.cc-verzendkeuze__cent{display:none!important}

/* 56. Inloggen bij je gegevens, en het aanmelden voor updates. */
.cc-inlogkaart .woocommerce-form-login{margin:0;border:0;padding:0}
.cc-inlogkaart__sub{margin:-6px 0 14px;font-size:13.5px;color:var(--cc-tekst-3)}
.cc-inlogkaart .woocommerce-form-login__rememberme{font-size:13px}

.cc-updates{margin-top:18px;padding-top:16px;border-top:1px solid var(--cc-rand-licht)}
.cc-updates__kop{font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
	color:var(--cc-tekst-3);margin-bottom:10px}
.cc-updates__keuze{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:14.5px;cursor:pointer}
.cc-updates__keuze input{width:17px;height:17px;flex:0 0 17px;accent-color:var(--cc-groen-knop);cursor:pointer}
.cc-updates__sub{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--cc-tekst-3)}

.cc-accountupdates{margin:26px 0 0;padding:18px 20px;border:1px solid var(--cc-rand-licht);border-radius:14px}
.cc-accountupdates legend{padding:0 8px;font-family:var(--cc-mono);font-size:10.5px;letter-spacing:.12em;
	text-transform:uppercase;color:var(--cc-tekst-3)}
.cc-accountupdates__sub{margin:0 0 14px;font-size:13.5px;color:var(--cc-tekst-2)}
.cc-accountupdates__smaken{margin-top:18px;padding-top:16px;border-top:1px solid var(--cc-rand-licht)}
.cc-volglijst{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.cc-volglijst li a{display:inline-flex;padding:6px 12px;border:1px solid var(--cc-rand-licht);
	border-radius:99px;font-size:13px;color:var(--cc-tekst);text-decoration:none}
.cc-volglijst li a:hover{border-color:var(--cc-groen-knop);color:var(--cc-groen-knop)}
.cc-volglijst__leeg{margin:8px 0 0;font-size:13px;color:var(--cc-tekst-3)}

/* 57. Het PostNL-punt kiezen bij de vervoerdersvraag. */
.cc-puntkiezer{margin-top:16px;padding-top:16px;border-top:1px solid var(--cc-rand-licht);
	display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.cc-puntkiezer__gekozen{flex:1 1 220px;min-width:0;font-size:13.5px;line-height:1.45;color:var(--cc-tekst-2)}
.cc-puntkiezer__gekozen:empty{display:none}
.cc-puntkiezer__knop{appearance:none;border:1px solid var(--cc-zwart);background:var(--cc-zwart);
	color:var(--cc-licht);padding:11px 18px;border-radius:99px;font-family:var(--cc-font);
	font-size:13.5px;font-weight:600;cursor:pointer}
.cc-puntkiezer__knop:hover{background:var(--cc-groen-knop);border-color:var(--cc-groen-knop)}

/* 58. Bestellingen op je profiel, met waar het pakket is. */
.cc-bestellijst{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.cc-bestelling{border:1px solid var(--cc-rand-licht);border-radius:16px;padding:16px 18px;background:#fff}
.cc-bestelling__kop{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-start}
.cc-bestelling__nr{font-family:var(--cc-mono);font-size:13px;font-weight:500;color:var(--cc-tekst)}
.cc-bestelling__datum{margin-top:3px;font-family:var(--cc-mono);font-size:11px;letter-spacing:.04em;
	text-transform:uppercase;color:var(--cc-tekst-3)}
.cc-bestelling__rechts{display:flex;align-items:center;gap:12px}
.cc-bestelling__bedrag{font-size:15px;font-weight:600}
.cc-bestelstatus{display:inline-flex;padding:4px 11px;border-radius:99px;font-family:var(--cc-mono);
	font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.cc-bestelstatus--wacht{background:#F6EEDD;color:#8A5B0B}
.cc-bestelstatus--bezig{background:#E7EEF8;color:#1F4E85}
.cc-bestelstatus--klaar{background:#E2F3EA;color:var(--cc-groen-knop)}
.cc-bestelstatus--gestopt{background:#F7E7E7;color:#9B2C2C}

.cc-besteltrap{display:flex;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.cc-besteltrap__stap{flex:1 1 0;min-width:0;position:relative;padding-top:16px;
	font-family:var(--cc-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
	color:var(--cc-tekst-3);text-align:center}
.cc-besteltrap__stap::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
	border-radius:99px;background:var(--cc-rand-licht)}
.cc-besteltrap__stap.cc-klaar::before{background:var(--cc-groen-knop)}
.cc-besteltrap__stap.cc-nu{color:var(--cc-tekst);font-weight:500}
@media (max-width:560px){.cc-besteltrap__stap span{display:none}
	.cc-besteltrap__stap.cc-nu span{display:inline}}

.cc-bestelling__acties{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cc-bestelling__knop{display:inline-flex;padding:9px 16px;border:1px solid var(--cc-rand-licht);
	border-radius:99px;font-size:13px;font-weight:500;color:var(--cc-tekst);text-decoration:none}
.cc-bestelling__knop:hover{border-color:var(--cc-zwart)}
.cc-bestelling__knop--volg{background:var(--cc-zwart);border-color:var(--cc-zwart);color:var(--cc-licht)}
.cc-bestelling__knop--volg:hover{background:var(--cc-groen-knop);border-color:var(--cc-groen-knop)}

/* 56b. DPD-punt: de kiezer van DPD Connect hoort bij ons in de lijst, niet
   in een balk onderaan het scherm. Alleen verbergen als cc.js de knop echt
   verhuisd heeft, anders blijft er geen DPD-kiezer over. */
body.cc-dpd-verplaatst #dpdCheckout{display:none!important}

/* ============================================================
   59. Filters op een smal scherm
   De zijkolom wordt daar een paneel dat over de pagina schuift,
   met een knop erboven en een balk onderin om hem te sluiten.
   ============================================================ */

.cc-filterschakel{display:none}
.cc-filterdek{display:none}
.cc-zijfilters__sluit{display:none}
.cc-zijfilters__voet{display:none}

@media (max-width:899px){

  .cc-filterschakel{display:inline-flex;align-items:center;gap:10px;
    width:100%;justify-content:center;position:relative;
    padding:13px 16px;border:1px solid var(--cc-rand-licht);border-radius:var(--cc-rond-klein);
    background:#fff;color:var(--cc-tekst);font-family:var(--cc-mono);font-size:11.5px;
    letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
  .cc-filterschakel:hover{background:var(--cc-licht-2)}
  .cc-filterschakel__strepen{position:relative;width:15px;height:11px;flex:0 0 auto}
  .cc-filterschakel__strepen::before,
  .cc-filterschakel__strepen::after{content:"";position:absolute;left:0;right:0;height:1.5px;
    background:currentColor;border-radius:2px}
  .cc-filterschakel__strepen::before{top:1px}
  .cc-filterschakel__strepen::after{bottom:1px;left:3px;right:3px}
  .cc-filterschakel__stip{width:7px;height:7px;border-radius:50%;background:var(--cc-groen)}

  .cc-filterdek{display:block;position:fixed;inset:0;z-index:80;background:rgba(10,14,13,.5);
    opacity:0;transition:opacity .22s ease}
  .cc-filterdek[hidden]{display:none}
  body.cc-filterpaneel .cc-filterdek{opacity:1}

  .cc-zijfilters{position:fixed;z-index:81;top:0;bottom:0;left:0;width:min(92vw,360px);
    display:block;gap:0;padding:0 18px 0;
    background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(-102%);transition:transform .26s ease;
    box-shadow:0 0 40px rgba(10,14,13,.18);visibility:hidden}
  body.cc-filterpaneel .cc-zijfilters{transform:none;visibility:visible}

  .cc-zijfilters__kop{position:sticky;top:0;z-index:2;background:#fff;
    align-items:center;padding:16px 0 12px;margin-bottom:4px}
  .cc-zijfilters__kop span{font-size:12px}
  .cc-zijfilters__sluit{display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;margin-left:auto;flex:0 0 auto;
    border:1px solid var(--cc-rand-licht);border-radius:50%;background:#fff;
    font-size:20px;line-height:1;color:var(--cc-tekst-2);cursor:pointer}
  .cc-zijfilters__sluit:hover{background:var(--cc-licht-2);color:var(--cc-tekst)}

  .cc-zijfilters__groep,
  .cc-zijfilters__blok{margin-bottom:0}
  .cc-zijfilters__blok summary{padding:12px 0;font-size:14px}
  .cc-keuze,.cc-schakelaar{padding:10px 6px 10px 0;font-size:14.5px}
  .cc-keuze__vak,.cc-schakelaar__vak{width:20px;height:20px}
  .cc-prijsfilter input{min-height:44px}
  .cc-prijsfilter button{min-height:44px}

  .cc-zijfilters__voet{display:block;position:sticky;bottom:0;z-index:3;
    margin:10px -18px 0;padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    background:#fff;border-top:1px solid var(--cc-rand-licht-2)}
  .cc-zijfilters__voet .cc-knop{width:100%}

  body.cc-filterpaneel{overflow:hidden}
}

@media (max-width:899px) and (prefers-reduced-motion:reduce){
  .cc-zijfilters,.cc-zijfilters__voet,.cc-filterdek{transition:none}
}

/* De pilrijen bovenaan de webshop niet laten afkappen op een smal scherm. */
@media (max-width:640px){
  .cc-filters,.cc-landkeuze,.cc-merkblok__pillen{flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .cc-filters::-webkit-scrollbar,
  .cc-landkeuze::-webkit-scrollbar,
  .cc-merkblok__pillen::-webkit-scrollbar{display:none}
  .cc-filters>*,.cc-landkeuze>*,.cc-merkblok__pillen>*{flex:0 0 auto}
  .cc-werkbalk{gap:10px}
  .cc-werkbalk__sorteren{width:100%}
}

/* 56c. Doorlopen zonder afhaalpunt: het vak licht even rood op. */
.cc-puntkiezer--fout{border-color:#c0392b;box-shadow:0 0 0 2px rgba(192,57,43,.15)}

/* ============================================================
   60. SEO-tekst onder het productoverzicht van een reeks
   ============================================================ */

.cc-seotekst{margin-top:40px;padding-top:30px;border-top:1px solid var(--cc-rand-licht-2)}
/* Op de productpagina staat hij los in de pagina en heeft hij zelf een kader nodig. */
.cc-seotekst--pagina{max-width:var(--cc-breed);margin:40px auto 0;padding:30px var(--cc-zij) 0}
.cc-seotekst__binnen{max-width:74ch;display:grid;gap:14px}
.cc-seotekst h2{margin:0;font-size:21px;line-height:1.25;letter-spacing:-.01em}
.cc-seotekst h3{margin:8px 0 0;font-size:15.5px;line-height:1.3}
.cc-seotekst p{margin:0;font-size:14.5px;line-height:1.75;color:var(--cc-tekst-2)}
.cc-seotekst ul,.cc-seotekst ol{margin:0;padding-left:20px;display:grid;gap:6px;
  font-size:14.5px;line-height:1.6;color:var(--cc-tekst-2)}
.cc-seotekst a{color:inherit;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--cc-rand-licht)}
.cc-seotekst a:hover{color:var(--cc-tekst);text-decoration-color:currentColor}
.cc-seotekst strong{color:var(--cc-tekst);font-weight:600}
@media (max-width:640px){
  .cc-seotekst{margin-top:30px;padding-top:22px}
  .cc-seotekst h2{font-size:19px}
  .cc-seotekst p,.cc-seotekst ul,.cc-seotekst ol{font-size:14px}
}

/* 56d. Een blik dat nog naar de server onderweg is: even ingetogen. */
.cc-tierblik{transition:opacity .15s ease}
.cc-tierblik.cc-bezig{opacity:.5}

/* 56e. Een smaak zonder productfoto: dan de naam in het vakje, geen gat. */
.cc-tierblik__naam{display:block;padding:2px;font-family:var(--cc-mono);font-size:8px;line-height:1.2;
	text-align:center;color:var(--cc-tekst-3);overflow:hidden;max-height:100%}

/* 56f. Een blik gekozen voor de kast: de planken laten zien dat ze kunnen. */
#kast.cc-kiest .cc-plank{outline:2px dashed var(--cc-groen-knop);outline-offset:3px}
#kast.cc-kiest .cc-plank__rij{cursor:pointer}
.cc-plank__rij.cc-doel{background:rgba(0,224,122,.08)}
.cc-kastblik.cc-bezig{opacity:.5}

/* 56g. De collectiekast op een telefoon: kleinere blikken, knoppen die je
   met een vinger kunt raken, en een balkje om de plank te kiezen zonder
   terug te scrollen. */
@media (max-width:639px){
	.cc-plank{margin-top:18px}
	.cc-plank__rij{gap:8px;padding:12px;min-height:104px}
	.cc-plankblik{width:74px}
	.cc-plankblik img{height:78px}
	.cc-plankblik__geen{height:78px;font-size:9px}
	.cc-plankblik figcaption{margin-top:5px;font-size:10.5px}
	.cc-plankblik figcaption span{font-size:9px}
	.cc-plankblik__naar select{font-size:11px;padding:6px}
	/* Zonder muis is er geen hover, dus het kruisje staat gewoon aan. */
	.cc-plankblik__weg button{opacity:1;width:26px;height:26px;font-size:15px}
	.cc-kast__nieuwplank{flex-wrap:wrap}
	.cc-kast__nieuwplank input{flex:1 1 100%;min-width:0}
	.cc-kast__nieuwplank .cc-knop{flex:1 1 100%;justify-content:center}
}
.cc-plankbalk{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom,0px));
	z-index:45;display:none;gap:8px;padding:10px 12px;background:var(--cc-zwart);
	border-top:1px solid var(--cc-rand-donker);overflow-x:auto}
.cc-plankbalk.cc-aan{display:flex}
.cc-plankbalk__kop{flex:0 0 auto;align-self:center;font-family:var(--cc-mono);font-size:10px;
	letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cc-plankbalk button{flex:0 0 auto;padding:9px 14px;border:1px solid var(--cc-groen-knop);
	border-radius:99px;background:transparent;color:var(--cc-groen);font-family:var(--cc-font);
	font-size:13px;cursor:pointer}
.cc-plankbalk button:active{background:var(--cc-groen-knop);color:#fff}
@media (min-width:640px){.cc-plankbalk{display:none!important}}


/* ==========================================================================
   16. Tierlijst: uitkomst bovenaan, tellers in de filters, reeks op de kaart
   ========================================================================== */
.cc-tierhero__top{display:flex;align-items:center;gap:10px;margin:16px 0 0;
  font-size:15px;line-height:1.5;color:var(--cc-tekst)}
.cc-tierhero__top a{color:var(--cc-groen-donker);font-weight:600;text-decoration:none}
.cc-tierhero__top a:hover{text-decoration:underline}
.cc-tierhero__top .cc-tier{flex:0 0 auto}

.cc-chiptel{margin-left:6px;font-family:var(--cc-mono);font-size:10px;
  letter-spacing:.04em;opacity:.65}

.cc-tierkaart__reeks{margin-top:-4px;font-family:var(--cc-mono);font-size:9.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--cc-tekst-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* De zwevende knoppen mogen de tabbalk onderin niet afdekken. */
@media (max-width:899px){
  body .cc-cadeauwijzer{bottom:88px}
  body .cc-bordknop{left:auto;right:145px;bottom:88px}
  body #cc-fb-knop{bottom:88px}
}


/* Variety pack als rij onder de varianten: een link naar het pack. */
.cc-lijst__rij--pack{text-decoration:none;color:inherit;cursor:pointer}
.cc-lijst__rij--pack:hover .cc-lijst__vol{text-decoration:underline}
.cc-lijst__packfoto{width:40px;height:40px;object-fit:contain;flex:none;border-radius:6px}
.cc-merk--pack{background:var(--cc-groen,#00c853);color:#0a0a0a}

/* Bedankpagina: de zwarte banner loopt door tot de schermranden (zonder horizontale scroll),
   en de tekst staat links uitgelijnd op de inhoudsbreedte. */
.cc-gelukt__kop{box-shadow:0 0 0 100vmax var(--cc-zwart);clip-path:inset(0 -100vmax);margin-bottom:8px}
.cc-gelukt__kop>.cc-gelukt__lede{margin-left:max(0px,calc((100% - var(--cc-breed)) / 2));margin-right:auto}

/* Afhaalcode: de QR-code op de bedankpagina en in Mijn account. */
.cc-afhaalcode__qr{width:184px;max-width:100%;margin:14px 0 6px;background:#fff;border-radius:14px;padding:6px;line-height:0}
.cc-afhaalcode__qr svg{width:100%;height:auto;display:block}
.cc-afhaalcode--account{background:var(--cc-zwart);color:var(--cc-licht);border-radius:20px;padding:24px;margin:0 0 28px}
.cc-afhaalcode--account .cc-afhaalcode__code{font-family:var(--cc-mono,'IBM Plex Mono',monospace);font-size:26px;letter-spacing:.18em}

/* Verzamelaar-label: premium, zwart met goud. */
.cc-merk--verzamel{background:linear-gradient(135deg,#221A07 0%,#0B0E0D 60%,#221A07 100%);color:#E9C46A;
  box-shadow:inset 0 0 0 1px #B8923A;font-weight:600;text-shadow:0 0 8px rgba(233,196,106,.25)}
.cc-merk--verzamel::before{content:'\2726';margin-right:5px;color:#F3D98B}