/* =========================================================================
   site.css — coffeecollective (Shout Demo)
   -------------------------------------------------------------------------
   Prefix van deze site: cc-  (coffee collective). Niet in conflict met de
   bestaande prefixes im- (infinitemachine), ev- (everlane), kt- (kith),
   dp- (daily paper), fs- (fume studio).

   Bron: Shopify-thema "coffeecollective" (coffeecollective.dk). Templatetype:
   home (derde homepage in dit project, na infinitemachine-home en
   fume-studio-home). De canonical van de bron wees naar de hoofddomeinnaam
   van de winkel — dit is de homepage, geen los product- of collectiepagina.

   Alle maten hieronder zijn gemeten met meet.js op de over HTTP geserveerde
   bronclone (viewport 1440px), tenzij anders vermeld.
   ========================================================================= */

:root {
  /* --- kleur — gemeten met meet.js -------------------------------------- */
  --sm-paper:      #faf6ed;   /* gemeten: rgb(250,246,237), 22× — paginabrede achtergrond */
  --sm-paper-alt:  #f1ede3;   /* gemeten: rgb(241,237,227), 43× — knopvlak op donker, secundair vlak */
  --sm-ink:        #4c4341;   /* gemeten: rgb(76,67,65), 91× — dominante tekstkleur */
  --sm-ink-soft:   #6b625f;   /* afgeleid van --sm-ink, iets lichter voor lopende tekst op cream */
  --sm-ink-muted:  #948b87;   /* afgeleid van --sm-ink, gedempt voor meta-tekst */
  --sm-line:       #e6ded2;   /* afgeleid: lichte lijn op cream-achtergrond, niet apart gemeten */
  --sm-accent:     #4c4341;   /* knoppen op licht: zelfde als ink (bron gebruikt geen apart accentkleur voor knoppen) */
  --sm-accent-ink: #faf6ed;
  --sm-sale:       #b23b2e;   /* niet apart gemeten (geen losse sale-kleur zichtbaar in de bron; shout.css-default aangehouden) */
  --cc-groen:      #343e3b;   /* gemeten: rgb(52,62,59), 1× — achtergrond abonnementsectie */
  --cc-oranje:     #e17526;   /* gemeten: rgb(225,117,38), 1× — achtergrond uitgelicht-product */
  --cc-mauve:      #7f655d;   /* gemeten: inline style background-color:#7f655d in de bron — achtergrond nieuwsbriefsectie */

  /* --- typografie ---------------------------------------------------------
     Bron gebruikt het betaalde font "NB International Pro" (koppen, nav,
     labels, 120× in de meting) en incidenteel Inter. Beide NIET meegenomen
     (licentie, zie WORKFLOW.md §Fonts). NB International Pro is een strakke,
     smalle grotesk zonder sierlijkheden — vervangen door een neutrale
     systeem-grotesk die er qua verhouding dichtbij komt. */
  --cc-font-sans: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sm-font-display: var(--cc-font-sans);
  --sm-font-body:    var(--cc-font-sans);

  /* --- header ---------------------------------------------------------------
     Gemeten: header 1440×70px op (0,37) — de 37px erboven is een
     aankondigingsbalk (sm-announce). Drie kolommen 588/184/588 op 1440px
     (nav-links / logo-midden / nav-rechts+acties), padding 0 40px. */
  --cc-container: 1360px;      /* gemeten: 1440 - 2×40 (headerpadding, ook de footerbreedte op 1360px) */
  --cc-margin:    40px;        /* gemeten: header/footer padding-inline */
  --cc-inline: max(var(--cc-margin), calc((100% - var(--cc-container)) / 2));
}

body { font-family: var(--cc-font-sans); }
h1, h2, h3, h4 { font-family: var(--cc-font-sans); font-weight: 400; letter-spacing: 0; }

/* --- aankondigingsbalk --------------------------------------------------
   Herzien na hermeting (2026-09-06): shout.css' default .sm-announce is een
   donkere balk (--sm-ink/--sm-paper) — dat past niet bij deze bron. Gemeten
   met meet.js op ".ai-shipping-banner-…": achtergrond rgb(250,246,237)
   (=--sm-paper, dezelfde crème als de paginabrede achtergrond, geen apart
   vlak) en tekst rgb(0,0,0) (zwart, niet de gewone --sm-ink-tekstkleur —
   dit balkje is een los app-block met zijn eigen zwarte tekstkleur). */
.cc-announce { background: var(--sm-paper); color: #000; }

/* --- header + hero-wrap ----------------------------------------------------
   Zie de toelichting in index.html: de bron plaatst de header absoluut
   binnen een relatief gepositioneerde wrapper die ook de hero bevat, niet
   viewport-fixed. cc-hero-wrap is dat relatieve anker; cc-header staat
   daarbinnen absoluut over het bovenste deel van de hero en scrolt met de
   pagina mee weg (geen sticky/fixed gedrag, dus ook geen overlap met de
   aankondigingsbalk erboven). */
.cc-hero-wrap { position: relative; }
.cc-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: var(--sm-z-header);
  display: grid;
  /* was "auto 1fr auto auto" — met kol.1 (burger/nav) en kol.4 (acties)
     ongelijk breed viel het logo in kol.2 (1fr) niet op het echte
     paginamidden, maar in het midden van de restruimte ernaast (gemeten:
     x=870-967 i.p.v. bron se x=640-800 op 1440px, ~199px te ver naar
     rechts). Twee gelijke 1fr-buitenkolommen dwingen het logo wél op het
     echte midden, ongeacht hoeveel breder de nav is dan de acties. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sm-space-4);
  padding: var(--sm-space-4) var(--cc-inline);
  background: transparent;
  color: var(--sm-paper-alt);               /* gemeten: navtekst rgb(241,237,227) op de hero */
  transition: background var(--sm-dur-3) var(--sm-ease),
              color var(--sm-dur-3) var(--sm-ease);
}
.cc-header[data-sm-stuck="true"] {
  background: var(--sm-paper);
  color: var(--sm-ink);
  border-bottom: var(--sm-border);
}

.cc-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  grid-column: 1;
}
.cc-burger svg { width: 1.3rem; height: 1.3rem; }
@media (pointer: coarse) {
  .cc-burger { width: 44px; height: 44px; margin: -0.4rem; }
}

.cc-nav {
  display: none;
  grid-column: 1;
  gap: var(--sm-space-5);
  font-size: 12px;                  /* gemeten: [data-submenu-toggle="shop"] → 12px/400/0.3px/uppercase */
  letter-spacing: 0.3px;
  text-transform: uppercase;        /* hermeten 2026-09-06: was ten onrechte "none", bron is wel degelijk hoofdletters */
}
.cc-logo { grid-column: 2; justify-self: center; }
/* .sm-logo__sub is 0.56em van de contextgrootte (zie MERK.md); op de
   headerschaal komt dat onder de leesbare 11px uit — gemeten met
   responsief.js (8.4px op alle breedtes). Vastgezet op een minimum. */
.cc-logo .sm-logo__sub { font-size: 11px; }
.cc-header__acties { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--sm-space-2); }

@media (min-width: 62rem) {
  .cc-burger { display: none; }
  .cc-nav { display: flex; }
}
@media (pointer: coarse) {
  .cc-nav a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -0.7rem; }
}

/* --- knoppen: variant op sm-btn voor gebruik op een donkere/beeld-ondergrond */
.cc-btn--licht { --_bg: var(--sm-paper-alt); --_fg: var(--cc-ink, var(--sm-ink)); --_bd: var(--sm-paper-alt); border-radius: var(--sm-radius-xs); text-transform: uppercase; letter-spacing: 0.3px; font-size: 12px; }
.cc-btn--ghost-licht { --_bg: transparent; --_fg: currentColor; --_bd: currentColor; border-radius: var(--sm-radius-xs); text-transform: uppercase; letter-spacing: 0.3px; font-size: 12px; }
.cc-btn--ghost-licht:hover { --_bg: currentColor; }
.cc-btn--vast { border-radius: var(--sm-radius-xs); text-transform: uppercase; letter-spacing: 0.3px; font-size: 12px; }

/* --- hero ------------------------------------------------------------------
   Gemeten: hero 1440×900px (tw-h-svh → volledig scherm op mobiel/tablet,
   hier via min-height opgelost). Kop 48px/400 (gemeten: 4× in de paginabrede
   scan, dit is de grootste maat op de pagina). Subtekst 20px. Productzakje
   zweeft gecentreerd over het beeld (bron: absolute, top/left 50%). */
.cc-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--sm-paper-alt);
}
.cc-hero__beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-hero::before {                       /* gemeten: tw-bg-black tw-opacity-20 laag over het beeld */
  content: ""; position: absolute; inset: 0; background: #000; opacity: 0.2;
}
.cc-hero__product {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(300px, 70%);
  z-index: 2;
}
@media (min-width: 48rem) { .cc-hero__product { width: min(400px, 30%); } }
/* Herzien na hermeting (2026-09-06): in de bron zweeft het productzakje los
   op de hero-foto (bron-desktop-0-top.png) — geen wit kader, geen kaart.
   Eerdere versie zette dit beeld op een JPG met wit ingevulde randen
   (verklein.js vult transparantie altijd wit op voor JPEG-export, zie
   WORKFLOW.md); daardoor stond het product in de praktijk in een wit vlak.
   Nu een losse PNG met bewaarde alfa (assets/img/kieni-hero.png), dus geen
   achtergrond hier zetten — de drop-shadow zit al in het beeld zelf
   (bron rendert 'm ook zo, geen aparte CSS-schaduw nodig). */
.cc-hero__inhoud {
  position: absolute;
  inset: auto var(--cc-margin) var(--sm-space-7) var(--cc-margin);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-5);
  align-items: center;
  text-align: center;
}
.cc-hero__kop {
  font-size: 30px;                  /* mobiel kleiner dan gemeten desktopwaarde, zie hieronder */
  line-height: 1.15;
  max-width: 14ch;
  text-wrap: balance;
}
.cc-hero__onder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sm-space-4);
}
.cc-hero__sub {
  font-size: 16px;                  /* gemeten: 16px/400/-0.46px */
  max-width: 26ch;
}
@media (min-width: 48rem) {
  .cc-hero__inhoud { align-items: flex-start; text-align: left; }
  .cc-hero__kop { font-size: 48px; }  /* gemeten: 4× in de paginabrede kleurenscan, grootste koptekst op de pagina */
  .cc-hero__onder { flex-direction: row; align-items: flex-end; justify-content: space-between; width: 100%; max-width: 640px; }
}

/* --- productraster (slider) -------------------------------------------------
   Gemeten: kaart 309×476px, price 12px uppercase. De bron toont dit als een
   Swiper-slider ("data-slides-per-view-desktop":"4.2") ook op desktop, niet
   als vast grid — hier met sm-slider (scroll-snap) nagebouwd i.p.v. de
   Swiper-library. */
.cc-produkten__kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sm-space-4);
  padding-inline: var(--cc-inline);
  margin-bottom: var(--sm-space-5);
}
.cc-view-all { font-size: 12px; }
@media (pointer: coarse) {
  .cc-view-all { display: inline-flex; align-items: center; min-height: 44px; margin-block: -0.7rem; }
}

/* Herzien na hermeting (2026-09-06): padding-inline op het scroll-snap-vlak
   zelf (.sm-slider__track, overflow-x:auto + scroll-snap-type:x mandatory
   uit shout.css) laat Chromium bij het laden automatisch scrollLeft naar de
   waarde van die padding springen (hier 40px, geverifieerd met een losse
   Playwright-meting: scrollLeft stond al op 40 vóórdat er iets bewoog en
   bleef 40 ook toen de padding door marge op de eerste/laatste kaart werd
   vervangen — de browser snapt bij het laden altijd de eerste kaart tegen
   de linkerrand, ongeacht hóe die ruimte ervoor ontstaat). Daardoor viel
   het linkerkader weg en schoof de rij zo ver door dat er een 5e kaart half
   in beeld kwam i.p.v. de gemeten 4 volle kaarten + een randje van de 5e
   (bron: 4 kaarten x=40..1335, 5e kaart maar 86px zichtbaar). Oplossing:
   scroll-padding-inline vertelt de browser dát die 40px erbuiten vallen,
   dan snapt-ie meteen naar scrollLeft 0 i.p.v. 40 — geverifieerd. */
.cc-produkten__raster { padding-inline: var(--cc-inline); scroll-padding-inline: var(--cc-inline); }
.cc-produkten__raster .sm-slider__slide { flex: 0 0 78%; }
@media (min-width: 30rem) { .cc-produkten__raster .sm-slider__slide { flex-basis: 45%; } }
@media (min-width: 48rem) { .cc-produkten__raster .sm-slider__slide { flex-basis: 30%; } }
@media (min-width: 75rem) { .cc-produkten__raster .sm-slider__slide { flex-basis: 22.5%; } } /* gemeten: 309/1360 ≈ 22.7% */
.cc-produkten__raster .sm-card__media { --sm-card-ratio: 1 / 1; background: #fff; } /* gemeten: productfoto's 4450×4450, vierkant op wit vlak */
.cc-card__media--apparaat { --sm-card-ratio: 1 / 1; }

.cc-card__title { font-size: 14px; text-transform: none; letter-spacing: 0; }  /* gemeten: 14px/400/-0.46px, meest voorkomende tekstmaat (46×) */
.cc-prijs { font-size: 12px; letter-spacing: -0.12px; text-transform: uppercase; }  /* gemeten */

/* --- subscription -----------------------------------------------------------
   Gemeten: sectiekleur rgb(52,62,59), tekst rgb(241,237,227) (cream), kop
   30px (gemeten: 6× in de paginabrede scan). */
.cc-abonnement {
  background: var(--cc-groen);
  color: var(--sm-paper-alt);
  display: flex;
  flex-direction: column;
}
.cc-abonnement__media { order: -1; aspect-ratio: 4 / 5; overflow: hidden; }
.cc-abonnement__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-abonnement__inner {
  max-width: 640px;
  padding: var(--sm-section-y) var(--cc-margin);
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-5);
  align-items: flex-start;
}
@media (min-width: 62rem) {
  /* bron: large-teaser-section, md:h-svh, foto rechts/tekst links (md:flex-row-reverse) */
  .cc-abonnement { flex-direction: row; min-height: 100svh; }
  .cc-abonnement__media { order: 1; aspect-ratio: auto; flex: 1 1 55%; }
  .cc-abonnement__inner { flex: 1 1 45%; margin-inline-start: var(--cc-margin); align-self: center; }
}
.cc-abonnement__kop { font-size: 30px; line-height: 1.2; }
.cc-abonnement__lijst { display: flex; flex-direction: column; gap: var(--sm-space-2); font-size: 16px; }
.cc-abonnement__lijst li { padding-left: 1.2em; position: relative; }
.cc-abonnement__lijst li::before { content: "—"; position: absolute; left: 0; opacity: 0.6; }

/* --- uitgelicht product (Takesi Gesha) ---------------------------------------
   Gemeten: sectiekleur rgb(225,117,38). Twee kolommen op desktop: zijbeeld
   (bloesem) + productbeeld/tekst, zoals de bron (tw-basis-1/2 tweemaal). */
.cc-uitgelicht {
  display: flex;
  flex-direction: column;
  background: var(--cc-oranje);
  color: var(--sm-paper-alt);
}
@media (min-width: 48rem) { .cc-uitgelicht { flex-direction: row; min-height: 80svh; } }
.cc-uitgelicht__zijbeeld { flex: 1 1 50%; aspect-ratio: 2 / 3; overflow: hidden; }
.cc-uitgelicht__zijbeeld img { width: 100%; height: 100%; object-fit: cover; }
.cc-uitgelicht__product {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sm-space-6);
  padding: var(--sm-space-8) var(--cc-margin);
  text-align: center;
}
/* bron: eigen H1 (48px/400) boven het productkaartje, links uitgelijnd op
   ~55% breedte, los van de gecentreerde product-content eronder — ontbrak
   hier volledig, hersteld 8 september. */
.cc-uitgelicht__kop { align-self: flex-start; font-size: 32px; line-height: 1.15; max-width: 80%; text-align: left; margin: 0; }
@media (min-width: 48rem) {
  .cc-uitgelicht__product { justify-content: space-between; }
  .cc-uitgelicht__kop { font-size: 48px; max-width: 55%; }
}
.cc-uitgelicht__media { width: min(260px, 60%); }
.cc-uitgelicht__inhoud { display: flex; flex-direction: column; align-items: center; gap: var(--sm-space-3); }
.cc-uitgelicht__naam { font-size: 20px; }              /* gemeten: 20px/400/-0.46px */
.cc-uitgelicht__sub { font-size: 16px; margin-bottom: var(--sm-space-2); }

/* --- wholesale ---------------------------------------------------------------
   Gemeten: sectiekleur rgb(250,246,237) — zelfde als de paginabrede
   achtergrond (--sm-paper), dus geen apart vlak nodig. Tekstkleur
   rgb(76,67,65) (--sm-ink). */
.cc-zakelijk {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-6);
}
@media (min-width: 48rem) { .cc-zakelijk { flex-direction: row-reverse; align-items: flex-end; min-height: 80svh; padding-block: var(--sm-space-8); } }
.cc-zakelijk__media { flex: 1 1 50%; aspect-ratio: 16 / 9; overflow: hidden; }
@media (min-width: 48rem) { .cc-zakelijk__media { aspect-ratio: auto; height: 100%; } }
.cc-zakelijk__media img { width: 100%; height: 100%; object-fit: cover; }
.cc-zakelijk__inhoud {
  flex: 1 1 50%;
  max-width: 650px;
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-4);
  padding-inline: var(--cc-margin);
}
.cc-zakelijk__kop { font-size: 30px; }
.cc-zakelijk__lijst { display: flex; flex-direction: column; gap: var(--sm-space-2); font-size: 16px; }
.cc-zakelijk__lijst li { padding-left: 1.2em; position: relative; }
.cc-zakelijk__lijst li::before { content: "—"; position: absolute; left: 0; opacity: 0.5; }
.cc-zakelijk__tekst { font-size: 16px; color: var(--sm-ink-soft); }

/* --- newsletter ----------------------------------------------------------------
   Gemeten: sectiekleur #7f655d (inline style in de bron), tekst
   rgb(var(--cc-cream-dark)) → dezelfde cream als elders. De bron opent hier
   een losse drawer met een tweede formulier ("Sign up" → disclosure met
   eigen e-mailveld); vereenvoudigd tot één rechtstreeks formulier. */
.cc-nieuwsbrief {
  display: flex;
  flex-direction: column;
  background: var(--cc-mauve);
  color: var(--sm-paper-alt);
}
@media (min-width: 48rem) { .cc-nieuwsbrief { flex-direction: row-reverse; min-height: 80svh; } }
.cc-nieuwsbrief__beeld { flex: 1 1 50%; aspect-ratio: 2 / 3; overflow: hidden; }
.cc-nieuwsbrief__beeld img { width: 100%; height: 100%; object-fit: cover; }
.cc-nieuwsbrief__inhoud {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sm-space-4);
  text-align: center;
  padding: var(--sm-space-8) var(--cc-margin);
}
.cc-nieuwsbrief__kop { font-size: 30px; }
.cc-nieuwsbrief__tekst { font-size: 16px; max-width: 40ch; }
.cc-nieuwsbrief__form { justify-content: center; margin-top: var(--sm-space-4); }
.cc-nieuwsbrief__veld { border-color: color-mix(in srgb, currentColor 40%, transparent); background: transparent; color: inherit; }
.cc-nieuwsbrief__veld::placeholder { color: color-mix(in srgb, currentColor 60%, transparent); }

/* --- visit our shops --------------------------------------------------------- */
/* zelfde scroll-snap/padding-quirk als .cc-produkten__raster hierboven. */
.cc-winkels__raster { padding-inline: var(--cc-inline); scroll-padding-inline: var(--cc-inline); }
.cc-winkel { display: flex; flex-direction: column; gap: var(--sm-space-2); flex: 0 0 65%; }
@media (min-width: 30rem) { .cc-winkel { flex-basis: 38%; } }
@media (min-width: 48rem) { .cc-winkel { flex-basis: 24%; } }
.cc-winkel__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--sm-radius-sm); background: var(--sm-paper-alt); }
.cc-winkel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sm-dur-4) var(--sm-ease-out); }
.cc-winkel:hover .cc-winkel__media img { transform: scale(1.04); }
.cc-winkel__naam { font-size: 14px; }

/* --- footer -----------------------------------------------------------------
   Gemeten: footer padding 40px 40px 0, kolombreedte 680px×2 op 1360px
   (tw-mb-5/md:tw-mb-14 → hier via sm-footer default ritme). */
.cc-footer { padding-inline: var(--cc-inline); }
.cc-footer__social { margin-top: var(--sm-space-4); }
@media (pointer: coarse) {
  .cc-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -0.5rem; }
}
.cc-footer__extra {
  display: grid;
  gap: var(--sm-space-6);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-top: var(--sm-space-6);
  padding-top: var(--sm-space-6);
  border-top: var(--sm-border);
}
.cc-footer__extra p { font-size: var(--sm-text-sm); opacity: 0.85; }
.cc-footer__cvr p { opacity: 1; }
.cc-footer__nieuwsbrief { max-width: 22rem; }
.cc-footer__nieuwsbrief p { margin-bottom: var(--sm-space-3); }
.cc-footer__nieuwsbrief form { display: flex; gap: var(--sm-space-2); border-bottom: var(--sm-border); padding-bottom: var(--sm-space-2); }
.cc-footer__nieuwsbrief input {
  flex: 1 1 auto; min-width: 0; background: transparent; border: 0; font-size: var(--sm-text-sm); color: inherit;
}
.cc-footer__nieuwsbrief input::placeholder { color: currentColor; opacity: 0.5; text-transform: uppercase; letter-spacing: var(--sm-tracking-wide); font-size: var(--sm-text-xs); }
.cc-footer__nieuwsbrief button {
  background: none; border: 0; text-transform: uppercase; letter-spacing: var(--sm-tracking-wide); font-size: var(--sm-text-xs); text-decoration: underline; cursor: pointer; color: inherit;
}
.cc-footer__nieuwsbrief [data-sm-form-status] { font-size: var(--sm-text-xs); min-height: 1.2em; margin-top: var(--sm-space-2); }
.cc-footer__bottom { justify-content: center; border-top: 0; margin-top: var(--sm-space-9); }
.cc-footer__bottom .sm-logo__type { display: none; }
/* gemeten met responsief.js: kleine kolomlinks ("Jobs" e.d., 27×15px) en de
   losse logomark onderin (31×31px) zijn kleiner dan het aanraakdoel van
   44px. Alleen het raakvlak vergroten, niet de opmaak — zie WORKFLOW.md. */
@media (pointer: coarse) {
  .sm-footer__links a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -0.6rem; }
  .cc-footer__bottom.sm-footer__bottom { min-height: 44px; }
  .cc-footer__bottom .sm-logo { padding: 0.4rem; margin: -0.4rem; }
}

/* --- menudrawer (mobiele navigatie) ----------------------------------- */
.cc-menudrawer__nav { display: flex; flex-direction: column; gap: var(--sm-space-4); font-size: 16px; }