/* ============================================================
   pls. — redesign layer  (Phase 2b: white-led design system)
   ------------------------------------------------------------
   Loaded LAST on every page (the one sanctioned addition over the
   frozen live snapshot), so it restyles all 36 migrated pages AND
   the catalog/new pages without touching their HTML — byte-parity
   stays intact, the redesign reaches everything.

   Grounded in specs/design-system.md (Form) + specs/motion-spec.md
   (Move). Direction: white-led canvas, brand purple/lilac as
   ACCENTS only, ink (#14022D) as deliberate punctuation sections.

   Token policy: we layer on top of styles.css. We ADD a hue-275
   ink-neutral scale + type-role + motion + layout tokens, and we
   re-point the SURFACE semantics toward white-led neutrals. We do
   NOT lighten text tokens past WCAG AA (design-system's --pls-ink-40
   for muted text would fail AA on white at ~3.3:1, so muted text
   keeps its darker, AA-passing value).
   ============================================================ */

:root {
  /* ---- hue-275 ink-neutral scale (new; white-led surfaces) ---- */
  --pls-ink-05: hsl(276 32% 97.5%);   /* near-white canvas tint   */
  --pls-ink-10: hsl(276 26% 94.5%);   /* hairline borders, wash    */
  --pls-ink-20: hsl(276 20% 87%);     /* strong borders, dividers  */
  --pls-ink-30: hsl(276 18% 74%);     /* disabled, faint icon      */
  --pls-ink-90: hsl(276 58% 11%);     /* raised dark surface       */
  --pls-ink-95: hsl(276 64% 8%);      /* deepest ink wash          */

  /* ---- white-led semantic remap (surfaces only; text stays AA) ---- */
  --color-surface: var(--pls-ink-05);        /* was faint purple → near-white */
  --color-surface-2: var(--pls-ink-10);
  --color-border: var(--pls-ink-10);
  --color-border-strong: var(--pls-ink-20);
  /* --color-text / --color-text-muted / --color-accent kept from styles.css
     (AA-compliant, on-brand). Brand now reads as accent, not as a wash. */

  /* ---- error semantic (new; design-system) ---- */
  --color-error: hsl(0 72% 47%);             /* AA on white */

  /* ---- crisper radii (thebrandingclub-style: small, clean) ---- */
  --radius-lg: 6px;
  --radius-md: 4px;

  /* ---- type roles (new; consumed by the .astro component layer) ---- */
  --type-display-size: clamp(40px, 6vw, 72px);
  --type-h1-size: clamp(32px, 4.4vw, 48px);
  --type-h2-size: clamp(26px, 3.4vw, 38px);
  --type-h3-size: var(--text-xl);
  --type-eyebrow-size: var(--text-xs);
  --type-lead-size: clamp(17px, 1.6vw, 20px);
  --weight-display: 800;
  --weight-heading: 700;
  --weight-label: 600;
  --tracking-tight: -0.035em;
  --tracking-eyebrow: 0.08em;

  /* ---- layout (new) ---- */
  --container: 1280px;
  --container-pad: clamp(20px, 5vw, 48px);
  --section-pad: clamp(72px, 9vw, 120px);
  --section-pad-sm: clamp(56px, 7vw, 96px);

  /* ---- motion tokens (new; specs/motion-spec.md) ---- */
  --dur-fast: 160ms;     /* exits, hover-off, nav condense feedback */
  --dur-base: 280ms;     /* hover-on, button + micro states         */
  --dur-reveal: 420ms;   /* scroll-reveal enter                     */
  --dur-slow: 640ms;     /* hero stagger, ink-section entrance      */
  --dur-nav: 220ms;      /* nav height condense / expand            */
  --ease-out: cubic-bezier(.2, .7, .15, 1);   /* all enters (existing curve) */
  --ease-in: cubic-bezier(.4, 0, 1, 1);       /* all exits */
  --stagger-grid: 60ms;
  --stagger-list: 40ms;

  /* ---- thebrandingclub interaction curve (cards / tiles / reveals) ----
     One signature easing at .32s — compact, crisp, elegant. Layered over the
     existing motion-spec curves (nav/buttons/process keep their tuned feel). */
  --ease-tbc: cubic-bezier(.16, .64, .24, 1);
  --dur-tbc: 320ms;
  /* soft, brand-tinted lift shadow — NOT a heavy drop shadow (hairline + soft
     is the clean-grid signature). */
  --shadow-lift: 0 16px 34px -18px hsl(276 58% 11% / 0.20), 0 4px 10px -6px hsl(276 58% 11% / 0.10);
}

/* Ink sections: keep the white-led system coherent on dark by routing the
   dark surface tokens through the same hue-275 neutrals. */
[data-theme="dark"] {
  --color-surface: var(--pls-ink-90);
  --color-surface-2: var(--pls-ink-95);
}

/* ---- canvas refinement: more generous default rhythm on light text ---- */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ============================================================
   Component polish (class hooks only — layers over inline styles)
   ============================================================ */

/* ---- card micro-interactions: lift on hover (light surfaces) ---- */
.pls-card--plain,
.pls-card--tint,
.pls-card--elevated,
.pls-card--lavender {
  transition: transform var(--dur-tbc) var(--ease-tbc), box-shadow var(--dur-tbc) var(--ease-tbc), border-color var(--dur-fast) ease;
}
.pls-card--plain:hover,
.pls-card--tint:hover,
.pls-card--elevated:hover,
.pls-card--lavender:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

/* ---- buttons: scale + glow (no translate — matches motion-spec 4a) ---- */
.pls-btn { transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.pls-btn--primary:hover { transform: scale(1.025); box-shadow: var(--shadow-glow); }
.pls-btn--secondary:hover { transform: scale(1.025); }
.pls-btn:active { transform: scale(0.985); transition-duration: 80ms; }

/* ---- nav links: directional underline accent (pure CSS, motion-spec 4c) ---- */
.pls-navbar-link { position: relative; }
.pls-navbar-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -4px;
  height: 2px; background: var(--color-accent);
  transition: right var(--dur-base) var(--ease-out);
}
.pls-navbar-link:hover::after,
.pls-navbar-link--active::after { right: 0; }

/* ---- WhatsApp icon: spring nudge (motion-spec 4d) ---- */
.pls-wa-icon { transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.pls-wa-icon:hover { transform: scale(1.08) rotate(6deg); }

/* ---- email row: nudge right on hover (motion-spec 4e) ---- */
.pls-email-row { transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-fast) ease; }
.pls-email-row:hover { transform: translateX(4px); }

/* ---- product / category anchor cards: image zoom + lift ---- */
a[href] > span > img { transition: transform .5s var(--ease-out); }
a[href]:hover > span > img { transform: scale(1.04); }

/* ---- clean hairline product tiles (cleaner-grid look) ---- */
.pls-tile { transition: border-color var(--dur-fast) ease, box-shadow var(--dur-tbc) var(--ease-tbc), transform var(--dur-tbc) var(--ease-tbc); }
.pls-tile:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.pls-tile:hover span:last-child { opacity: 1 !important; }

/* ---- scroll-reveal: clean fade + rise on the thebrandingclub curve ---- */
[data-reveal] { transition: opacity var(--dur-tbc) var(--ease-tbc), transform var(--dur-tbc) var(--ease-tbc); }
/* grid/list cascade (motion-spec 1+3): sibling reveals stagger by index (--ri set
   in app.js, capped at 8). Initial opacity:0 is set ONLY on .is-stagger — a class
   app.js adds and always follows with .is-in (via IO or the 1400ms fallback) — so
   no-JS / plain [data-reveal] stays fully visible. Restrained travel + soft scale. */
[data-reveal].is-stagger { transition-delay: calc(min(var(--ri, 0), 8) * var(--stagger-grid)); transform: translateY(20px) scale(0.985); opacity: 0; }
[data-reveal].is-stagger.is-in { transform: none; opacity: 1; }
/* hero parallax (motion-spec 2): GPU drift on scroll (app.js rAF, frame-linked to
   scroll position). The base scale absorbs the travel so the cover image never
   reveals its clip edges. */
[data-parallax] { transform: scale(1.12); will-change: transform; }

/* ---- numbered process timeline (motion-spec 5: /private-label HowTo) ---- */
/* Progressive enhancement: content is fully visible by default; app.js adds
   .is-animated only when motion is on + IO is available, then the connector
   draws (.is-drawn) and each step reveals on its own scroll trigger. */
.pls-process { position: relative; list-style: none; margin: 0; padding: 0; max-width: 720px; }
.pls-process::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: var(--color-border-strong); transform: scaleY(1); transform-origin: top; }
.pls-process.is-animated::before { transform: scaleY(0); transition: transform var(--dur-slow) var(--ease-out); }
.pls-process.is-animated.is-drawn::before { transform: scaleY(1); }
.pls-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: clamp(16px, 3vw, 28px); align-items: center; padding: 0 0 clamp(22px, 3vw, 34px); }
.pls-step:last-child { padding-bottom: 0; }
.pls-step-rail { display: flex; justify-content: center; }
.pls-step-num { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pls-step-body { display: flex; align-items: center; gap: 14px; }
.pls-process.is-animated .pls-step-body { opacity: 0; transform: translateX(16px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.pls-process.is-animated .pls-step.is-in .pls-step-body { opacity: 1; transform: none; }
.pls-step-icon { flex: none; color: var(--pls-purple); display: inline-flex; }
.pls-step-title { font-size: var(--text-lg); font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; color: var(--color-text); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .pls-process.is-animated::before, .pls-process.is-animated .pls-step-body { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ---- selection + scrollbar polish (brand-tinted, restrained) ---- */
::selection { background: var(--pls-lilac); color: var(--pls-ink); }
html { scrollbar-color: var(--pls-ink-30) transparent; }

/* ============================================================
   Reduced motion: strip all transforms/transitions, keep content
   fully visible and all non-motion feedback (shadow, color, border).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pls-card--plain, .pls-card--tint, .pls-card--elevated, .pls-card--lavender,
  .pls-btn, .pls-btn--primary:hover, .pls-btn--secondary:hover,
  .pls-wa-icon, .pls-wa-icon:hover, .pls-email-row, .pls-email-row:hover,
  a[href] > span > img, a[href]:hover > span > img,
  .pls-tile, .pls-tile:hover,
  [data-reveal], [data-reveal].is-stagger, [data-parallax] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;   /* reveals never trap content invisible under reduced-motion */
  }
  .pls-navbar-link::after { transition: none !important; }
}

/* ============================================================
   Chrome (Phase 2b option A): componentized nav + Verpakkingen
   mega-menu + Kennis dropdown + footer sitemap + drawer accordion.
   Global (NOT scoped) so the .astro chrome keeps every page <head>
   byte-frozen. JS hooks reused from app.js (#nav, #mobileDrawer,
   data-action open/close-menu); accordion + --nav-h added there.
   ============================================================ */

/* ---- nav shell ---- */
.pls-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h, 76px);
  display: flex; align-items: center; background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 var(--color-border); transition: height var(--dur-nav) var(--ease-out), box-shadow var(--dur-nav) var(--ease-out); }
.pls-nav-inner { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pls-nav-links { display: flex; align-items: center; gap: clamp(13px, 1.9vw, 26px); }
.pls-nav-item { position: relative; display: inline-flex; align-items: center; }
.pls-nav-right { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 16px); flex: none; }
.pls-nav-trigger { background: none; border: none; cursor: pointer; font: inherit; padding: 0; display: inline-flex; align-items: center; gap: 5px; }
.pls-nav-caret { width: 14px; height: 14px; color: var(--color-text-muted); transition: transform var(--dur-base) var(--ease-out); }
.pls-nav-item:hover .pls-nav-caret, .pls-nav-item:focus-within .pls-nav-caret { transform: rotate(180deg); }

/* ---- mega-menu + dropdown panels (desktop hover / focus-within) ---- */
.pls-mega, .pls-dd {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  z-index: 99;
}
.pls-mega { position: fixed; left: 0; right: 0; top: var(--nav-h, 76px);
  background: var(--pls-white); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }
.pls-dd { position: absolute; top: calc(100% + 12px); left: 50%; transform: translate(-50%, 8px); min-width: 300px;
  background: var(--pls-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 10px; }
.pls-nav-item:hover > .pls-mega, .pls-nav-item:focus-within > .pls-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.pls-nav-item:hover > .pls-dd, .pls-nav-item:focus-within > .pls-dd { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
.pls-mega::before, .pls-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */

.pls-mega-inner { max-width: var(--container); margin: 0 auto; padding: clamp(24px, 3vw, 40px) var(--container-pad);
  display: grid; grid-template-columns: repeat(3, 1fr) 0.95fr; gap: clamp(20px, 3vw, 44px); }
.pls-mega-col-title { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pls-purple); margin: 0 0 14px; }
.pls-mega-link { display: block; color: var(--color-text); text-decoration: none; font-size: var(--text-base); font-weight: 600; letter-spacing: -0.01em; padding: 8px 0; border-bottom: 1px solid var(--color-border); transition: color var(--dur-fast) ease, padding-left var(--dur-base) var(--ease-out); }
.pls-mega-link:hover { color: var(--pls-purple); padding-left: 6px; }
.pls-mega-featured { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; gap: 2px; }
.pls-mega-featured .pls-mega-col-title { color: var(--pls-purple); }
.pls-mega-featured-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.pls-mega-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 24px; padding-top: 18px; margin-top: 4px; border-top: 1px solid var(--color-border); }

.pls-dd-link { display: block; color: var(--color-text); text-decoration: none; font-size: var(--text-sm); font-weight: 600; padding: 10px 12px; border-radius: var(--radius-sm); transition: background var(--dur-fast) ease; }
.pls-dd-link:hover { background: var(--color-surface); color: var(--pls-purple); }
.pls-dd-all { border-top: 1px solid var(--color-border); margin-top: 6px; padding-top: 8px; }

@media (max-width: 900px) { .pls-mega, .pls-dd { display: none !important; } }

/* ---- footer secondary sitemap ---- */
.pls-footer { background: var(--pls-ink); color: #fff; padding: clamp(48px, 6vw, 80px) 0 28px; }
.pls-footer-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad); }
.pls-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 48px); }
@media (max-width: 900px) { .pls-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pls-footer-grid { grid-template-columns: 1fr; } }
.pls-footer-col-title { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pls-lilac); margin: 0 0 14px; }
.pls-footer-link { display: block; color: #fff; text-decoration: none; font-size: var(--text-sm); font-weight: 500; padding: 5px 0; opacity: 0.82; transition: opacity var(--dur-fast) ease, padding-left var(--dur-base) var(--ease-out); }
.pls-footer-link:hover { opacity: 1; padding-left: 4px; }
.pls-footer-link--strong { font-weight: 700; opacity: 1; }
.pls-footer-bottom { margin-top: clamp(36px, 5vw, 56px); padding-top: 22px; border-top: 1px solid oklch(32% 0.08 305); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---- mobile drawer accordion (single-expand; toggled by app.js) ---- */
.pls-acc-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; background: none; border: none; cursor: pointer; font: inherit; color: #fff; padding: 12px 0; text-align: left; font-size: 22px; font-weight: 700; letter-spacing: -0.006em; }
.pls-acc-caret { width: 22px; height: 22px; flex: none; transition: transform var(--dur-base) var(--ease-out); }
.pls-acc.is-open .pls-acc-caret { transform: rotate(45deg); }
.pls-acc-panel { display: none; padding: 4px 0 12px 14px; flex-direction: column; gap: 4px; }
.pls-acc.is-open .pls-acc-panel { display: flex; }
.pls-acc-link { color: rgba(255,255,255,0.82); text-decoration: none; font-size: 17px; font-weight: 500; padding: 7px 0; }

@media (prefers-reduced-motion: reduce) {
  .pls-mega, .pls-dd, .pls-nav-caret, .pls-acc-caret, .pls-mega-link, .pls-footer-link, .pls-nav { transition: none !important; }
}

/* ==========================================================================
   PREMIUM ECOM LAYER  (2026-08-26)
   Richtingswijziging. Referenties: ampul (structuur: panelen, pill-marquee,
   productraster), skincare (announcement bar, pill-CTA's, kop over beeld),
   beanro (warme grond met kolomgeleiders, uitsnede met splash, snelle motion).

   KERNVERSCHUIVING t.o.v. de oude laag:
   1. Wit blijft de grond. De grijze tegel is tegelkleur, niet paginakleur.
      Premium komt uit motion, hero en ruimte, niet uit een getinte grond.
   2. Radii van scherp (2/4/6) naar zacht (10/20/28 + pill). Scherp leest als
      gereedschap, zacht leest als winkel.
   3. Paars blijft #AC01F4 maar verschijnt veel minder vaak. Eén accent op
      veel rust is de premium-beweging, niet een ander paars.
   ========================================================================== */
:root {
  /* ---- grond en kaarten ----
     Wit is en blijft de paginagrond. Premium komt hier NIET uit een getinte
     grond maar uit motion, hero-behandeling, ruimte en fotografie. De grijze
     tegel is alleen tegelkleur (productvlakken, panelen), zoals bij ampul. */
  --px-canvas:      #FFFFFF;   /* paginavlak, wit                             */
  --px-tile:        #F5F5F7;   /* producttegel en paneel op wit               */
  --px-tile-2:      #EFEFF3;   /* tweede tegel, hover en sectiewissel         */
  --px-card:        #FFFFFF;   /* kaart op een tegel                          */
  --px-ink:         #14022D;   /* koppen, donkere panelen (brand, ongewijzigd)*/
  --px-ink-2:       #241041;   /* verhoogd donker vlak                        */
  --px-body:        #55506B;   /* lopende tekst, zachter dan inkt             */
  --px-muted:       #85809A;   /* meta, captions                              */
  --px-line:        #E4E1EA;   /* hairline                                    */
  --px-line-2:      #D5D1DE;   /* sterkere rand                               */

  /* ---- accent: één kleur, spaarzaam ---- */
  --px-accent:      #AC01F4;   /* highlight: badges, punt, marks              */
  --px-accent-ui:   #8A00C4;   /* knoppen en links, haalt AA op kleine tekst  */
  --px-accent-wash: #F3E4FD;   /* zachte accentvlakken                        */

  /* ---- radii: zacht ---- */
  --px-r-sm:  10px;
  --px-r-md:  20px;
  --px-r-lg:  28px;
  --px-pill:  999px;

  /* ---- type: Onest harder ingezet ---- */
  --px-display: clamp(38px, 4.6vw, 66px);
  --px-h2:      clamp(30px, 3.8vw, 56px);
  --px-h3:      clamp(20px, 1.8vw, 26px);
  --px-lead:    clamp(17px, 1.35vw, 20px);

  /* ---- motion: snel, beanro-tempo ---- */
  --px-fast: 150ms;
  --px-base: 260ms;
  --px-ease: cubic-bezier(.22,.61,.24,1);
}

/* ---- grond en panelen ------------------------------------------------- */
.plsx-canvas { background: var(--px-canvas); }
.plsx-tile   { background: var(--px-tile); }
.plsx-sec      { padding: clamp(56px, 7vw, 112px) 0; }
.plsx-sec--tight { padding: clamp(36px, 4.5vw, 64px) 0; }
.plsx-wrap     { max-width: 1320px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.plsx-panel    { background: var(--px-card); border-radius: var(--px-r-lg); }

/* Kolomgeleiders op de grond (beanro). Puur decoratief, nooit op tekst. */
.plsx-guides { position: relative; }
.plsx-guides::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to right, var(--px-line) 0 1px, transparent 1px var(--g, 240px));
  opacity: .55;
}
.plsx-guides > * { position: relative; }

/* ---- typografie -------------------------------------------------------- */
.plsx-display { font-size: var(--px-display); font-weight: 800; letter-spacing: -0.03em; line-height: .98; margin: 0; color: var(--px-ink); text-wrap: balance; }
.plsx-h2      { font-size: var(--px-h2); font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; margin: 0; color: var(--px-ink); text-wrap: balance; }
.plsx-h3      { font-size: var(--px-h3); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; margin: 0; color: var(--px-ink); }
.plsx-lead    { font-size: var(--px-lead); line-height: 1.55; color: var(--px-body); margin: 0; max-width: 46ch; }
.plsx-body    { font-size: 16px; line-height: 1.6; color: var(--px-body); margin: 0; }
.plsx-meta    { font-size: 13px; line-height: 1.4; color: var(--px-muted); margin: 0; }
.plsx-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--px-accent-ui); margin: 0; }
/* De punt aan het eind van een kop (skincare). */
.plsx-dot { color: var(--px-accent); }

/* ---- knoppen ----------------------------------------------------------- */
.plsx-btn { display: inline-flex; align-items: center; gap: 9px; border-radius: var(--px-pill);
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em; padding: 14px 24px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--px-fast) var(--px-ease), color var(--px-fast) var(--px-ease),
              border-color var(--px-fast) var(--px-ease), transform var(--px-fast) var(--px-ease); }
.plsx-btn svg { flex: none; transition: transform var(--px-base) var(--px-ease); }
.plsx-btn:hover svg { transform: translateX(3px); }
.plsx-btn--primary { background: var(--px-accent-ui); color: #fff; }
.plsx-btn--primary:hover { background: var(--px-ink); }
.plsx-btn--ghost { background: transparent; color: var(--px-ink); border-color: var(--px-line-2); }
.plsx-btn--ghost:hover { border-color: var(--px-ink); background: var(--px-card); }
.plsx-btn--onink { background: #fff; color: var(--px-ink); }
.plsx-btn--onink:hover { background: var(--px-accent); color: #fff; }
.plsx-btn--sm { padding: 10px 18px; font-size: 14px; }

/* ---- badges en pills --------------------------------------------------- */
.plsx-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--px-pill);
  font-size: 12px; font-weight: 600; padding: 6px 12px; background: var(--px-accent-wash); color: var(--px-accent-ui); }
.plsx-badge--ink { background: var(--px-ink); color: #fff; }

/* ---- categorie-marquee (ampul) ----------------------------------------- */
.plsx-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.plsx-track { display: flex; gap: 14px; width: max-content; animation: plsx-scroll 46s linear infinite; }
.plsx-marquee:hover .plsx-track { animation-play-state: paused; }
@keyframes plsx-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.plsx-chip { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: var(--px-pill);
  border: 1px solid var(--px-line-2); background: var(--px-card); color: var(--px-ink);
  font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: border-color var(--px-fast) var(--px-ease), color var(--px-fast) var(--px-ease); }
.plsx-chip:hover { border-color: var(--px-accent); color: var(--px-accent-ui); }
.plsx-chip img { width: 44px; height: 44px; border-radius: var(--px-pill); object-fit: cover; margin: -8px 0 -8px -12px; background: var(--px-tile); }

/* ---- productkaart (ampul + beanro) ------------------------------------- */
.plsx-prod { display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border-radius: var(--px-r-md); overflow: hidden; background: var(--px-card);
  border: 1px solid var(--px-line); transition: border-color var(--px-base) var(--px-ease), transform var(--px-base) var(--px-ease); }
.plsx-prod:hover { border-color: var(--px-line-2); transform: translateY(-3px); }
.plsx-prod-img { position: relative; aspect-ratio: 4/3; background: var(--px-tile); overflow: hidden; }
.plsx-prod-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 480ms var(--px-ease); }
.plsx-prod:hover .plsx-prod-img img { transform: scale(1.045); }
.plsx-prod-img .plsx-badge { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.92); }
.plsx-prod-b { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.plsx-prod-name { font-size: 16px; font-weight: 700; letter-spacing: -0.012em; color: var(--px-ink); line-height: 1.25; }
.plsx-prod-spec { font-size: 13px; color: var(--px-muted); line-height: 1.4; }
.plsx-prod-cta { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--px-accent-ui); }

/* ---- statkaart (ampul) -------------------------------------------------- */
.plsx-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.plsx-stat { padding: 22px clamp(14px, 1.6vw, 26px); }
.plsx-stat + .plsx-stat { border-left: 1px solid var(--px-line); }
.plsx-stat-v { display: block; font-size: clamp(22px, 1.9vw, 28px); font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.05; color: var(--px-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plsx-stat-l { display: block; font-size: 12.5px; color: var(--px-muted); margin-top: 6px; line-height: 1.35; max-width: 20ch; }

/* ---- announcement bar (skincare) --------------------------------------- */
.plsx-announce { background: var(--px-ink); color: #fff; font-size: 13.5px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 18px; text-align: center; }
.plsx-announce a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .plsx-stats { grid-template-columns: 1fr 1fr; }
  .plsx-stat:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--px-line); }
  .plsx-guides::before { display: none; }
}
@media (max-width: 560px) {
  .plsx-stats { grid-template-columns: 1fr; }
  .plsx-stat + .plsx-stat { border-left: 0; border-top: 1px solid var(--px-line); }
}
@media (prefers-reduced-motion: reduce) {
  .plsx-track { animation: none; }
  .plsx-prod, .plsx-prod-img img, .plsx-btn, .plsx-btn svg { transition: none !important; }
  .plsx-prod:hover { transform: none; }
}

/* ==========================================================================
   PREMIUM ECOM: hero, raster en de motion die het duur laat voelen.
   De grond blijft wit. Het gevoel komt uit de entree, de hover en het ritme.
   ========================================================================== */

/* ---- hero: split zoals ampul, tegel links, beeld plus stats rechts ------ */
.plsx-hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(16px, 1.6vw, 24px); align-items: stretch; }
.plsx-hero-copy { border-radius: var(--px-r-lg); padding: clamp(28px, 3.4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.plsx-hero-h1 { margin-top: 16px; }
.plsx-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.plsx-hero-trust { margin-top: 28px; max-width: 46ch; }
.plsx-hero-media { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 24px); }
.plsx-hero-shot { position: relative; border-radius: var(--px-r-lg); overflow: hidden; background: var(--px-tile); aspect-ratio: 5/4; }
.plsx-hero-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plsx-hero-badge { position: absolute; top: 16px; left: 16px; }
.plsx-hero-stats { border: 1px solid var(--px-line); border-radius: var(--px-r-lg); background: var(--px-card); }

/* ---- kop boven het raster ---------------------------------------------- */
.plsx-grid-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.plsx-grid-head > div { max-width: 62ch; }
.plsx-prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(278px, 100%), 1fr)); gap: clamp(12px, 1.3vw, 18px); }

/* ---- MOTION -------------------------------------------------------------
   Eén entree-curve, korte duur, kleine afstand. Lang en ver leest als traag,
   niet als duur. De stagger loopt over drie elementen, verder niet.         */
@keyframes plsx-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes plsx-shot { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

.plsx-hero-copy  { animation: plsx-rise 620ms var(--px-ease) both; }
.plsx-hero-shot  { animation: plsx-shot 760ms var(--px-ease) both 90ms; }
.plsx-hero-stats { animation: plsx-rise 620ms var(--px-ease) both 190ms; }
/* De statwaarden tellen visueel op door ze los na te laten komen. */
.plsx-hero-stats .plsx-stat:nth-child(1) .plsx-stat-v { animation: plsx-rise 460ms var(--px-ease) both 260ms; }
.plsx-hero-stats .plsx-stat:nth-child(2) .plsx-stat-v { animation: plsx-rise 460ms var(--px-ease) both 330ms; }
.plsx-hero-stats .plsx-stat:nth-child(3) .plsx-stat-v { animation: plsx-rise 460ms var(--px-ease) both 400ms; }

/* Kaarten in het raster komen op scroll binnen via de bestaande observer. */
.plsx-prod-grid[data-reveal].is-stagger .plsx-prod { opacity: 0; transform: translateY(14px); }
.plsx-prod-grid[data-reveal].is-in .plsx-prod { opacity: 1; transform: none;
  transition: opacity 460ms var(--px-ease), transform 460ms var(--px-ease); }
.plsx-prod-grid[data-reveal].is-in .plsx-prod:nth-child(1) { transition-delay: 0ms; }
.plsx-prod-grid[data-reveal].is-in .plsx-prod:nth-child(2) { transition-delay: 55ms; }
.plsx-prod-grid[data-reveal].is-in .plsx-prod:nth-child(3) { transition-delay: 110ms; }
.plsx-prod-grid[data-reveal].is-in .plsx-prod:nth-child(4) { transition-delay: 165ms; }
.plsx-prod-grid[data-reveal].is-in .plsx-prod:nth-child(n+5) { transition-delay: 210ms; }

@media (max-width: 1020px) {
  .plsx-hero-grid { grid-template-columns: 1fr; }
  .plsx-hero-shot { min-height: 320px; aspect-ratio: 16/10; }
}
@media (max-width: 620px) {
  .plsx-hero-cta .plsx-btn { flex: 1 1 100%; justify-content: center; }
  .plsx-prod-grid { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); }
}

/* Reduced motion: alles direct zichtbaar, geen uitzonderingen. */
@media (prefers-reduced-motion: reduce) {
  .plsx-hero-copy, .plsx-hero-shot, .plsx-hero-stats,
  .plsx-hero-stats .plsx-stat-v { animation: none !important; }
  .plsx-prod-grid[data-reveal].is-stagger .plsx-prod { opacity: 1 !important; transform: none !important; }
  .plsx-prod-grid[data-reveal] .plsx-prod { transition: none !important; }
}

/* ---- procesblok: genummerd, geen iconen, geen verloop ------------------- */
.plsx-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: clamp(12px, 1.3vw, 18px); }
.plsx-step { background: var(--px-card); border: 1px solid var(--px-line); border-radius: var(--px-r-md); padding: 22px 22px 24px; }
.plsx-step-n { display: block; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--px-accent-ui); font-variant-numeric: tabular-nums; }
.plsx-step-t { margin: 12px 0 0; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--px-ink); }

/* ---- chipwrap: dezelfde pill als de marquee, maar afbrekend ------------- */
.plsx-chipwrap { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.plsx-chipwrap .plsx-chip { font-size: 14px; padding: 10px 18px; }

/* ---- min-width:auto op grid- en flex-items ------------------------------
   Grid-items hebben standaard min-width:auto en kunnen dus niet onder hun
   min-content krimpen. Op 390px duwde dat de hero-tegel naar 512px, breder
   dan het scherm, en de header kapte hem af met overflow:hidden. Elk nieuw
   raster krijgt daarom expliciet min-width:0. */
.plsx-hero-grid > *,
.plsx-prod-grid > *,
.plsx-steps > *,
.plsx-stats > *,
.plsx-hero-media > * { min-width: 0; }
.plsx-hero-copy, .plsx-hero-media { min-width: 0; }
/* De knoptekst mag op smalle schermen afbreken in plaats van te duwen. */
@media (max-width: 620px) { .plsx-btn { white-space: normal; text-align: center; } }

/* ==========================================================================
   PREMIUM ECOM: pijlersecties (matcha, koffie)
   Ritme over de pagina: hero tegel-links, matcha beeld-links, koffie als
   grote inktkaart. Koffie is de donkere beat, maar als paneel met radius in
   een witte sectie, niet als volle band. Dat past bij de panelen-taal.
   ========================================================================== */
.plsx-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.2vw, 56px); align-items: center; }
.plsx-split > * { min-width: 0; }
.plsx-split--rev .plsx-split-media { order: -1; }
.plsx-split-copy { display: flex; flex-direction: column; align-items: flex-start; }
.plsx-shot { position: relative; border-radius: var(--px-r-lg); overflow: hidden; background: var(--px-tile); aspect-ratio: 4/3; }
.plsx-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plsx-shot .plsx-badge { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,.94); }

.plsx-sub { margin: 10px 0 0; font-size: var(--px-h3); font-weight: 600; letter-spacing: -0.015em; color: var(--px-accent-ui); }
.plsx-list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.plsx-list li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--px-body); }
.plsx-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: var(--px-pill); background: var(--px-accent); }
.plsx-forwie { margin-top: 22px; padding: 16px 18px; background: var(--px-tile); border-radius: var(--px-r-md); }
.plsx-forwie-l { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--px-accent-ui); }
.plsx-forwie-b { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--px-body); }
.plsx-split-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---- formaatstrip: dezelfde taal als de statkaart ----------------------- */
.plsx-specrow { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(26px, 3vw, 44px);
  border: 1px solid var(--px-line); border-radius: var(--px-r-lg); overflow: hidden; background: var(--px-card); }
.plsx-specrow > * { min-width: 0; }
.plsx-spec { padding: 20px clamp(14px, 1.5vw, 24px); position: relative; }
.plsx-spec + .plsx-spec { border-left: 1px solid var(--px-line); }
.plsx-spec-v { display: block; font-size: clamp(22px, 2vw, 30px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--px-ink); }
.plsx-spec-l { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.35; color: var(--px-muted); }
.plsx-spec .plsx-badge { position: absolute; top: 14px; right: 14px; font-size: 11px; padding: 4px 9px; }

/* ---- inktkaart: de donkere beat ---------------------------------------- */
.plsx-inkpanel { background: var(--px-ink); border-radius: var(--px-r-lg); padding: clamp(26px, 3.4vw, 60px); overflow: hidden; }
.plsx-inkpanel .plsx-h2, .plsx-inkpanel .plsx-spec-v { color: #fff; }
.plsx-inkpanel .plsx-lead, .plsx-inkpanel .plsx-body, .plsx-inkpanel .plsx-list li { color: rgba(255,255,255,.76); }
.plsx-inkpanel .plsx-eyebrow, .plsx-inkpanel .plsx-sub { color: var(--px-lilac, #D682F9); }
.plsx-inkpanel .plsx-list li::before { background: var(--px-accent); }
.plsx-inkpanel .plsx-forwie { background: rgba(255,255,255,.07); }
.plsx-inkpanel .plsx-forwie-l { color: #D682F9; }
.plsx-inkpanel .plsx-forwie-b { color: rgba(255,255,255,.82); }
.plsx-inkpanel .plsx-shot { background: rgba(255,255,255,.06); }

@media (max-width: 900px) {
  .plsx-split { grid-template-columns: 1fr; }
  .plsx-split--rev .plsx-split-media { order: 0; }
  .plsx-specrow { grid-template-columns: 1fr 1fr; }
  .plsx-spec:nth-child(3) { border-left: 0; }
  .plsx-spec:nth-child(n+3) { border-top: 1px solid var(--px-line); }
}
@media (max-width: 520px) {
  .plsx-specrow { grid-template-columns: 1fr; }
  .plsx-spec + .plsx-spec { border-left: 0; border-top: 1px solid var(--px-line); }
}

/* Op de inktkaart is de tekstkolom veel hoger dan het beeld. Met center bleef
   er een groot donker gat onder de foto staan, dus daar vult het beeld de
   kolom. Alleen binnen het paneel; de lichte matcha-split blijft gecentreerd. */
.plsx-inkpanel .plsx-split { align-items: stretch; }
.plsx-inkpanel .plsx-split-media { display: flex; }
.plsx-inkpanel .plsx-shot { aspect-ratio: auto; flex: 1; min-height: 320px; }
@media (max-width: 900px) { .plsx-inkpanel .plsx-shot { aspect-ratio: 4/3; flex: none; } }

/* ==========================================================================
   MEGAMENU: het paneel viel weg voordat je muis er was.
   Twee oorzaken, allebei gemeten in de browser:
   1. Het gat tussen de navknop en het paneel is 36px, de hoverbrug was 14px.
      Daartussen zat een dode zone van 22px: de muis raakte niets, dus
      :hover viel weg en het paneel sloot.
   2. Er was geen sluitvertraging. Zodra :hover wegviel begon het meteen te
      verdwijnen en ging pointer-events direct uit, dus zelfs het zichtbare
      paneel was al niet meer klikbaar.
   ========================================================================== */
.pls-mega::before, .pls-dd::before { top: -44px; height: 44px; }

/* Openen blijft direct, sluiten krijgt 260ms respijt. Genoeg om de muis
   diagonaal naar het paneel te bewegen, kort genoeg om niet te blijven hangen. */
.pls-mega, .pls-dd {
  transition: opacity var(--dur-base) var(--ease-out) 260ms,
              transform var(--dur-base) var(--ease-out) 260ms,
              visibility 0s linear calc(var(--dur-base) + 260ms);
}
.pls-nav-item:hover > .pls-mega, .pls-nav-item:focus-within > .pls-mega,
.pls-nav-item:hover > .pls-dd,   .pls-nav-item:focus-within > .pls-dd { transition-delay: 0s; }

/* Het paneel zelf houdt de muis vast zolang hij erover is. */
.pls-mega:hover, .pls-dd:hover { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .pls-mega, .pls-dd { transition: visibility 0s linear 260ms !important; }
  .pls-nav-item:hover > .pls-mega, .pls-nav-item:hover > .pls-dd { transition-delay: 0s !important; }
}

/* ==========================================================================
   BRUG: oude componentklassen krijgen de nieuwe vormtaal.
   De 36 chrome-pagina's en de catalogus-templates gebruiken .pls-btn,
   .pls-card en .pls-badge. In plaats van zes templates te herschrijven
   nemen die klassen hier de ecom-taal over. Eén plek, hele site consistent.
   ========================================================================== */
.pls-btn {
  border-radius: var(--px-pill) !important;
  font-weight: 600; letter-spacing: -0.005em;
  transition: background var(--px-fast) var(--px-ease), color var(--px-fast) var(--px-ease),
              border-color var(--px-fast) var(--px-ease) !important;
}
.pls-btn--lg { padding: 14px 26px; font-size: 15px; }
.pls-btn--md { padding: 12px 22px; font-size: 14.5px; }
.pls-btn--primary { background: var(--px-accent-ui); border-color: var(--px-accent-ui); }
.pls-btn--primary:hover { background: var(--px-ink); border-color: var(--px-ink); }
.pls-btn--secondary, .pls-btn--outline { border-radius: var(--px-pill) !important; }
.pls-btn svg { transition: transform var(--px-base) var(--px-ease); }
.pls-btn:hover svg { transform: translateX(3px); }

.pls-card { border-radius: var(--px-r-md) !important; }
.pls-card--tint, .pls-card--plain { background: var(--px-tile) !important; border: 1px solid var(--px-line) !important; box-shadow: none !important; }
.pls-card--ink { background: var(--px-ink) !important; border-radius: var(--px-r-lg) !important; }
.pls-badge { border-radius: var(--px-pill) !important; font-weight: 600; }
.pls-badge--purple, .pls-badge--lilac { background: var(--px-accent-wash) !important; color: var(--px-accent-ui) !important; border: 0 !important; }

/* Randen sitebreed naar hairline; 1.5px las als een tekening, niet als winkel. */
[style*="1.5px solid"] { border-width: 1px !important; }

/* Specificatietabellen en lijsten op de catalogus krijgen dezelfde rust. */
.pls-hero { background: var(--px-canvas) !important; }

@media (prefers-reduced-motion: reduce) {
  .pls-btn, .pls-btn svg { transition: none !important; }
  .pls-btn:hover svg { transform: none; }
}

/* De oude oppervlaktetokens waren lila wassen. Naast het nieuwe, rustige
   palet lezen die als een andere site. Ze wijzen nu naar de tegelkleur, zodat
   elke bestaande sectie meebeweegt zonder dat de templates veranderen. */
:root {
  --pls-lilac-soft: var(--px-tile);
  --pls-purple-soft: var(--px-tile);
  --color-surface: var(--px-tile);
  --color-surface-2: var(--px-tile-2);
  --color-border: var(--px-line);
  --color-border-strong: var(--px-line-2);
}
/* Alleen de merktegel en het inktverloop houden hun eigen kleur. */
.pls-card--ink, .plsx-inkpanel { background: var(--px-ink) !important; }