/* =====================================================================
   SUPER STUBBORN — BUNDLE-CSS
   =====================================================================
   GEGENEREERD door superstubborn-prototype/port_to_wp.py uit de goedgekeurde
   mockup. Niet met de hand bijwerken: pas het prototype aan, draai
   `python3 assemble.py && python3 port_to_wp.py`, en commit het resultaat.
   De enige uitzondering is de gemarkeerde staart onderaan dit bestand.

   Dit is de bundle voor alle `superstubborn-*` blokken: de renderer laadt hem
   zodra er één zo'n blok op de pagina staat en wikkelt de blokken in
   .sf-superstubborn. Component-CSS per sectie staat in de style.css van het
   blok zelf.

   LET OP bij het bewerken van dit commentaar: schrijf nooit een glob als
   blocks/superstubborn-<slug>/style.css met een sterretje ervoor. De reeks
   sterretje-slash sluit een CSS-commentaar af, waardoor de rest van de tekst
   als CSS wordt gelezen en het hele tokens-blok erna sneuvelt.

   ⚠️ Eén donkere warme wereld. Bouw hier geen light-theme bovenop; de witte
   secties (story, products, bestsellers, instagram) zijn losse eilanden.
   ===================================================================== */

/* =====================================================================
   SUPER STUBBORN — DESIGN TOKENS  (refined)
   Single committed dark warm world. Do NOT build a light theme.
   The dark palette is PINNED regardless of the viewer's theme toggle.
   Refinement: overflow hardening (overflow-x:clip everywhere), big-type
   wrapping guards, plus additive marquee/hero timing tokens. Palette,
   type scale, spacing and easings are unchanged (additive only).
   ===================================================================== */

:root,
:root[data-theme="light"],
:root[data-theme="dark"]{
  /* ---- Palette (exact, warm — no blue / neon / bright cliches) ---- */
  --ss-ground:#11100F;   /* near-black warm — the base */
  --ss-brown-1:#2A1C17;  /* dark brown — panels / structure */
  --ss-brown-2:#53382D;  /* warm brown */
  --ss-orange:#D46A2A;   /* burnt orange — accent, sparingly */
  --ss-copper:#A75B31;   /* copper — secondary accent */
  --ss-beige:#E8DED3;    /* warm beige — primary text on dark */
  --ss-white:#FFFFFF;    /* peaks / highlights */

  /* ---- Muted text = beige at reduced opacity ---- */
  --ss-text:var(--ss-beige);
  --ss-text-muted:rgba(232,222,211,0.64);
  --ss-text-faint:rgba(232,222,211,0.40);
  --ss-hairline:rgba(232,222,211,0.14);
  --ss-hairline-accent:rgba(212,106,42,0.55);
  --ss-panel:var(--ss-brown-1);
  --ss-panel-2:var(--ss-brown-2);

  /* ---- Fonts (SYSTEM ONLY — artifact CSP blocks font CDNs) ---- */
  --ss-display:"Helvetica Neue", Helvetica, Arial, sans-serif; /* massive uppercase graphic type */
  --ss-serif:Georgia, "Times New Roman", serif;                /* italic editorial accent */
  --ss-body:"Helvetica Neue", Helvetica, Arial, sans-serif;    /* body / UI */

  /* ---- Modular type scale (fluid, clamp) ---- */
  --ss-fs-mega:clamp(2.75rem, 7vw, 6.75rem);   /* magazine-cover bleed headline */
  --ss-fs-display:clamp(2.1rem, 5.4vw, 5.25rem);   /* section display */
  --ss-fs-h1:clamp(1.9rem, 4vw, 3.5rem);
  --ss-fs-h2:clamp(1.5rem, 2.9vw, 2.5rem);
  --ss-fs-h3:clamp(1.25rem, 2.4vw, 1.9rem);
  --ss-fs-lead:clamp(1.06rem, 1.6vw, 1.4rem);
  --ss-fs-body:clamp(0.98rem, 1.1vw, 1.06rem);
  --ss-fs-small:0.8125rem;
  --ss-fs-label:0.72rem;    /* uppercase tracked labels / eyebrows */

  /* ---- Spacing scale ---- */
  --ss-sp-1:0.25rem;
  --ss-sp-2:0.5rem;
  --ss-sp-3:0.75rem;
  --ss-sp-4:1rem;
  --ss-sp-5:1.5rem;
  --ss-sp-6:2rem;
  --ss-sp-7:3rem;
  --ss-sp-8:4.5rem;
  --ss-sp-9:6.5rem;
  --ss-sp-10:9rem;         /* section rhythm on desktop */
  --ss-gutter:clamp(1.25rem, 5vw, 4.5rem); /* container side padding */
  --ss-maxw:1440px;

  /* ---- Radii ---- */
  --ss-r-sm:6px;
  --ss-r-md:12px;
  --ss-r-lg:18px;
  --ss-r-pill:999px;

  /* ---- Easings & durations (elegant, expensive) ---- */
  --ss-ease:cubic-bezier(0.22, 1, 0.36, 1);       /* soft settle */
  --ss-ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ss-ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ss-dur-1:180ms;
  --ss-dur-2:320ms;
  --ss-dur-3:560ms;
  --ss-dur-4:900ms;
  --ss-dur-hero:1200ms;    /* ADDED: hero photo scale-in */

  /* ---- Signature motion timing (ADDED) ---- */
  --ss-marquee-dur:42s;    /* slow brand marquee band; override per instance */

  /* ---- Elevation (warm shadows, never cold gray) ---- */
  --ss-shadow-sm:0 2px 10px rgba(0,0,0,0.35);
  --ss-shadow-md:0 18px 44px -18px rgba(0,0,0,0.62), 0 2px 8px rgba(0,0,0,0.4);
  --ss-shadow-lg:0 44px 90px -30px rgba(0,0,0,0.72);

  color-scheme:dark;
}

/* ---- Warm base reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* ---- OVERFLOW HARDENING ----
   overflow-x:clip (not hidden) kills any horizontal scroll at every size
   while still permitting position:sticky and vertical reveals. Nothing may
   bleed past the viewport width at 360px or 1440px. ---- */
html,body{ max-width:100%; overflow-x:clip; }

body{
  margin:0;
  min-height:100vh;
  background:var(--ss-ground);
  color:var(--ss-text);
  font-family:var(--ss-body);
  font-size:var(--ss-fs-body);
  line-height:1.6;
  font-weight:400;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Prose + headings never widen the page (long words wrap/clip) */
p,li,figcaption,blockquote{ overflow-wrap:break-word; }

img,svg,video{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--ss-orange); color:var(--ss-ground); }

/* ---- Accessible focus — copper ring everywhere ---- */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--ss-orange);
  outline-offset:3px;
  border-radius:var(--ss-r-sm);
}

/* Lock scroll when a drawer/overlay is open */
body.ss-locked{ overflow:hidden; }
/* =====================================================================
   SUPER STUBBORN — SHARED COMPONENTS  (refined)
   Real photography + distinctive eyebrow + overflow-safe big type +
   hero load sequence + signature brand marquee. Token-driven,
   responsive, accessible, self-contained. Accent (orange/copper) is
   spent sparingly — hairlines, labels, hover, focus, one italic word.
   ===================================================================== */

/* ---------- Layout primitives ---------- */
.ss-container{
  width:100%;
  max-width:var(--ss-maxw);
  margin-inline:auto;
  padding-inline:var(--ss-gutter);
}
.ss-section{
  position:relative;
  padding-block:var(--ss-sp-9);
  /* Oversized .ss-mega/.ss-display may overhang within the section but can
     NEVER widen the page. Clip on X only; Y stays visible for reveals. */
  overflow-x:clip;
}
@media (min-width:900px){
  .ss-section{ padding-block:var(--ss-sp-10); }
}
.ss-section--flush{ padding-block:0; }
.ss-section--tight{ padding-block:var(--ss-sp-7); }
/* Opt-out only if a section genuinely needs visible x-overflow (rare). */
.ss-section--x-visible{ overflow-x:visible; }

.ss-hairline{
  border:0;
  height:1px;
  background:var(--ss-hairline);
  margin:0;
}
.ss-hairline--accent{ background:var(--ss-hairline-accent); }

/* ---------- Typography utilities ---------- */
.ss-display{
  font-family:var(--ss-display);
  font-size:var(--ss-fs-display);
  line-height:0.9;
  letter-spacing:-0.03em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ss-beige);
  margin:0;
  overflow-wrap:break-word;
}
.ss-mega{
  font-family:var(--ss-display);
  font-size:var(--ss-fs-mega);
  line-height:0.82;
  letter-spacing:-0.045em;
  text-transform:uppercase;
  font-weight:800;
  margin:0;
  color:var(--ss-beige);
  overflow-wrap:break-word;
  max-width:100%;
}
.ss-h1{
  font-family:var(--ss-display);
  font-size:var(--ss-fs-h1);
  line-height:0.98;
  letter-spacing:-0.025em;
  text-transform:uppercase;
  font-weight:700;
  margin:0;
  overflow-wrap:break-word;
}
.ss-h2{
  font-family:var(--ss-display);
  font-size:var(--ss-fs-h2);
  line-height:1.02;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  font-weight:700;
  margin:0;
  overflow-wrap:break-word;
}
.ss-h3{
  font-family:var(--ss-display);
  font-size:var(--ss-fs-h3);
  line-height:1.1;
  letter-spacing:-0.01em;
  text-transform:uppercase;
  font-weight:600;
  margin:0;
  overflow-wrap:break-word;
}

/* ============================================================
   .ss-eyebrow — DISTINCTIVE boxed micro-caps label
   NO leading hairline dash (removed). A tight uppercase label set
   in a hairline box with an OFFSET COPPER TICK on the leading edge —
   editorial, minimal, and unlike the dash-prefixed kicker every site
   uses. --accent lifts the tick + text to orange; --bare strips the
   box back to a plain tracked label when a section wants air.
   ============================================================ */
.ss-eyebrow{
  font-family:var(--ss-body);
  font-size:var(--ss-fs-label);
  text-transform:uppercase;
  letter-spacing:0.26em;
  font-weight:700;
  color:var(--ss-text-muted);
  margin:0;
  display:inline-flex;
  align-items:center;
  line-height:1;
  padding:0.5em 0.7em 0.5em 0.72em;
  /* the extra right pad balances the trailing letter-spacing */
  border:1px solid var(--ss-hairline);
  border-left:2px solid var(--ss-copper);
  border-radius:2px;
  background:color-mix(in srgb, var(--ss-brown-1) 42%, transparent);
  max-width:100%;
  overflow-wrap:normal;
}
.ss-eyebrow--accent{
  color:var(--ss-orange);
  border-color:var(--ss-hairline-accent);
  border-left-color:var(--ss-orange);
  background:color-mix(in srgb, var(--ss-orange) 10%, transparent);
}
/* Minimal variant: no box, just the offset tick removed — plain kicker */
.ss-eyebrow--bare{
  padding:0;
  border:0;
  background:none;
  color:var(--ss-text-muted);
}
.ss-eyebrow--bare.ss-eyebrow--accent{ color:var(--ss-orange); }

.ss-lead{
  font-size:var(--ss-fs-lead);
  line-height:1.5;
  color:var(--ss-text);
  max-width:46ch;
  margin:0;
}
.ss-body{
  font-size:var(--ss-fs-body);
  line-height:1.65;
  color:var(--ss-text-muted);
  max-width:60ch;
  margin:0;
}
/* ITALIC RESTRAINT: this serif accent is allowed ONLY in the hero and
   story sections. Do not repeat it in every headline. */
.ss-serif-italic{
  font-family:var(--ss-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-0.01em;
  text-transform:none;
  color:var(--ss-orange);
}
.ss-muted{ color:var(--ss-text-muted); }
.ss-faint{ color:var(--ss-text-faint); }

/* ---------- Buttons ---------- */
.ss-btn{
  --_bg:transparent;
  --_fg:var(--ss-beige);
  --_bd:var(--ss-hairline);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--ss-sp-3);
  padding:0.9rem 1.6rem;
  border-radius:var(--ss-r-pill);
  border:1px solid var(--_bd);
  background:var(--_bg);
  color:var(--_fg);
  font-family:var(--ss-body);
  font-size:var(--ss-fs-label);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.2em;
  cursor:pointer;
  position:relative;
  isolation:isolate;
  transition:transform var(--ss-dur-2) var(--ss-ease),
             background-color var(--ss-dur-2) var(--ss-ease),
             color var(--ss-dur-2) var(--ss-ease),
             border-color var(--ss-dur-2) var(--ss-ease),
             box-shadow var(--ss-dur-2) var(--ss-ease);
}
.ss-btn:hover{ transform:translateY(-2px); }
.ss-btn:active{ transform:translateY(0); }

.ss-btn--primary{
  --_bg:var(--ss-orange);
  --_fg:var(--ss-ground);
  --_bd:var(--ss-orange);
  box-shadow:0 10px 30px -12px rgba(212,106,42,0.7);
}
.ss-btn--primary:hover{
  --_bg:var(--ss-copper);
  --_bd:var(--ss-copper);
  box-shadow:0 16px 40px -12px rgba(212,106,42,0.85);
}
.ss-btn--ghost{
  --_bg:transparent;
  --_fg:var(--ss-beige);
  --_bd:var(--ss-hairline);
}
.ss-btn--ghost:hover{
  --_bd:var(--ss-hairline-accent);
  --_fg:var(--ss-white);
}
.ss-btn--sm{ padding:0.65rem 1.15rem; letter-spacing:0.16em; }

/* Text link with animated underline */
.ss-link{
  display:inline-flex;
  align-items:center;
  gap:var(--ss-sp-2);
  font-size:var(--ss-fs-label);
  text-transform:uppercase;
  letter-spacing:0.2em;
  font-weight:600;
  color:var(--ss-beige);
  padding-bottom:2px;
  background:linear-gradient(var(--ss-orange),var(--ss-orange)) no-repeat left bottom / 0% 1px;
  transition:background-size var(--ss-dur-2) var(--ss-ease), color var(--ss-dur-2) var(--ss-ease);
}
.ss-link:hover{ background-size:100% 1px; color:var(--ss-white); }

/* ---------- Card ---------- */
.ss-card{
  position:relative;
  border-radius:var(--ss-r-lg);
  background:var(--ss-panel);
  box-shadow:var(--ss-shadow-md);
  overflow:hidden;
  transition:transform var(--ss-dur-2) var(--ss-ease),
             box-shadow var(--ss-dur-2) var(--ss-ease);
}
.ss-card:hover{ transform:translateY(-4px); box-shadow:var(--ss-shadow-lg); }
/* Zoom the photo inside on hover */
.ss-card:hover .ss-photo{ --_scale:1.06; }
.ss-card__body{ padding:var(--ss-sp-5); }
.ss-card__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--ss-sp-4);
}
.ss-card__title{
  font-family:var(--ss-display);
  text-transform:uppercase;
  letter-spacing:-0.01em;
  font-size:var(--ss-fs-h3);
  line-height:1.05;
  margin:0;
}
.ss-card__price{
  font-size:var(--ss-fs-small);
  letter-spacing:0.12em;
  color:var(--ss-text-muted);
  white-space:nowrap;
}

/* ============================================================
   .ss-photo — REAL PHOTOGRAPH with subtle film treatment
   A real image arrives via an .ssimg-NN class that sets --img
   (e.g. <div class="ss-photo ssimg-02">). That image is painted as
   a cover background, so it reads CLEARLY as photography. The warm
   duotone gradient now only shows as a FALLBACK when --img is unset
   (the `none` layer paints nothing, revealing the gradient beneath).
   Grain + vignette stay as SUBTLE overlays ON TOP. A real <img> child
   still works and also sits beneath the film. Vary with --tone
   (keep ~0deg for real photos) and --ar / aspect classes.
   ============================================================ */
.ss-photo{
  --_scale:1;
  --ar:4 / 5;
  --img:none;            /* fallback marker: `none` paints nothing */
  position:relative;
  aspect-ratio:var(--ar);
  width:100%;
  border-radius:inherit;
  overflow:hidden;
  isolation:isolate;
  background-color:var(--ss-brown-1);
  /* Layer 1 = the real photo (--img). Layers 2..5 = duotone fallback. */
  background-image:
    var(--img),
    radial-gradient(130% 100% at 74% 12%,
       color-mix(in srgb, var(--ss-orange) 42%, transparent) 0%,
       color-mix(in srgb, var(--ss-copper) 20%, transparent) 30%,
       transparent 58%),
    radial-gradient(120% 120% at 18% 96%,
       color-mix(in srgb, var(--ss-brown-2) 85%, black) 0%,
       transparent 60%),
    radial-gradient(90% 80% at 50% 40%,
       color-mix(in srgb, var(--ss-brown-2) 55%, transparent) 0%,
       transparent 70%),
    linear-gradient(158deg,
       var(--ss-brown-2) 0%,
       var(--ss-brown-1) 46%,
       var(--ss-ground) 100%);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  filter:saturate(1.03) hue-rotate(var(--tone, 0deg));
  transition:transform var(--ss-dur-3) var(--ss-ease),
             opacity var(--ss-dur-4) var(--ss-ease-out);
  transform:scale(var(--_scale));
}
/* Real <img> child alternative — fills, keeps grain/vignette above it */
.ss-photo > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
/* Grain overlay (fractal noise) — kept SUBTLE so the photo dominates */
.ss-photo::before{
  content:"";
  position:absolute;
  inset:-2%;
  z-index:2;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  opacity:0.13;
  mix-blend-mode:soft-light;
}
/* Vignette + top sheen — subtle, warm */
.ss-photo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 58%, rgba(17,16,15,0.42) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 24%, transparent 72%, rgba(17,16,15,0.4) 100%);
}
/* Uppercase campaign caption slot */
.ss-photo__cap{
  position:absolute;
  left:var(--ss-sp-4);
  bottom:var(--ss-sp-4);
  z-index:4;
  font-family:var(--ss-body);
  font-size:var(--ss-fs-label);
  letter-spacing:0.28em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ss-beige);
  opacity:0.86;
  text-shadow:0 1px 8px rgba(0,0,0,0.65);
}
.ss-photo__cap--tr{ left:auto; right:var(--ss-sp-4); bottom:auto; top:var(--ss-sp-4); }
/* Aspect-ratio helpers */
.ss-photo--portrait{ --ar:4 / 5; }
.ss-photo--tall{ --ar:3 / 4; }
.ss-photo--square{ --ar:1 / 1; }
.ss-photo--landscape{ --ar:3 / 2; }
.ss-photo--wide{ --ar:16 / 9; }
.ss-photo--cover{ --ar:auto; height:100%; }

/* ---------- Navigation ---------- */
.ss-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ss-sp-5);
  padding:var(--ss-sp-4) var(--ss-gutter);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color var(--ss-dur-2) var(--ss-ease),
             border-color var(--ss-dur-2) var(--ss-ease),
             padding var(--ss-dur-2) var(--ss-ease),
             backdrop-filter var(--ss-dur-2) var(--ss-ease);
}
.ss-nav.is-solid{
  background:color-mix(in srgb, var(--ss-ground) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--ss-hairline);
  padding-block:var(--ss-sp-3);
}
.ss-nav__brand{
  font-family:var(--ss-display);
  text-transform:uppercase;
  letter-spacing:-0.02em;
  font-weight:800;
  font-size:1.15rem;
  color:var(--ss-beige);
}
.ss-nav__links{
  display:none;
  align-items:center;
  gap:var(--ss-sp-6);
  list-style:none;
  margin:0; padding:0;
}
.ss-nav__links a{
  font-size:var(--ss-fs-label);
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-weight:600;
  color:var(--ss-text-muted);
  transition:color var(--ss-dur-1) var(--ss-ease);
}
.ss-nav__links a:hover{ color:var(--ss-beige); }
.ss-nav__actions{ display:flex; align-items:center; gap:var(--ss-sp-4); }
.ss-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.4rem; height:2.4rem;
  border:none; background:transparent; cursor:pointer;
  color:var(--ss-beige);
  border-radius:var(--ss-r-sm);
  position:relative;
  transition:color var(--ss-dur-1) var(--ss-ease), transform var(--ss-dur-1) var(--ss-ease);
}
.ss-icon-btn:hover{ color:var(--ss-orange); }
.ss-icon-btn svg{ width:1.25rem; height:1.25rem; }
[data-cart-count]{
  position:absolute;
  top:0; right:0;
  min-width:1.05rem; height:1.05rem;
  padding:0 0.28rem;
  display:grid; place-items:center;
  background:var(--ss-orange);
  color:var(--ss-ground);
  font-size:0.62rem; font-weight:700;
  border-radius:var(--ss-r-pill);
  transition:transform var(--ss-dur-1) var(--ss-ease);
}
[data-cart-count].is-bumped{ transform:scale(1.35); }
.ss-nav__burger{ display:inline-flex; }
@media (min-width:960px){
  .ss-nav__links{ display:flex; }
  .ss-nav__burger{ display:none; }
}

/* ============================================================
   .ss-marquee — SIGNATURE slow brand band (the one motion flourish)
   Structure ONE set of .ss-marquee__item children inside the track;
   JS (data-marquee) clones the set once so the -50% loop is seamless.
   Edge fade masks the ends. Pauses on hover. Reduced-motion => static.
   ============================================================ */
.ss-marquee{
  position:relative;
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.ss-marquee__track{
  display:flex;
  align-items:center;
  gap:var(--ss-sp-6);
  width:max-content;
  animation:ss-marquee-scroll var(--ss-marquee-dur) linear infinite;
  will-change:transform;
}
.ss-marquee:hover .ss-marquee__track,
.ss-marquee:focus-within .ss-marquee__track{ animation-play-state:paused; }
.ss-marquee__item{
  font-family:var(--ss-display);
  font-size:var(--ss-fs-display);
  line-height:0.9;
  letter-spacing:-0.03em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--ss-beige);
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:var(--ss-sp-6);
}
/* copper dot separator between items */
.ss-marquee__item::after{
  content:"";
  width:0.5em;
  height:0.5em;
  border-radius:50%;
  background:var(--ss-orange);
  flex:0 0 auto;
}
.ss-marquee__item--outline{ color:transparent; -webkit-text-stroke:1px var(--ss-text-faint); }
@keyframes ss-marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ============================================================
   HERO LOAD SEQUENCE — photo scale-in + line/mask text reveal
   Put data-hero on the hero <section>. JS adds .is-loaded once
   after first paint (immediately under reduced-motion).
   - Wrap each headline line in .ss-reveal-mask (overflow clip) with an
     inner .ss-reveal-line; stagger with inline --d.
   - The hero .ss-photo scales from 1.08 -> 1 and fades in.
   ============================================================ */
[data-hero] .ss-reveal-mask{ display:block; overflow:hidden; }
[data-hero] .ss-reveal-line{
  display:block;
  transform:translateY(115%);
  opacity:0;
  transition:transform var(--ss-dur-4) var(--ss-ease-out),
             opacity var(--ss-dur-4) var(--ss-ease-out);
  transition-delay:var(--d, 0ms);
  will-change:transform, opacity;
}
[data-hero].is-loaded .ss-reveal-line{ transform:none; opacity:1; }

[data-hero] .ss-photo{
  opacity:0;
  --_scale:1.08;
  transition:transform var(--ss-dur-hero) var(--ss-ease-out),
             opacity var(--ss-dur-4) var(--ss-ease-out);
}
[data-hero].is-loaded .ss-photo{ opacity:1; --_scale:1; }

/* ---------- Horizontal collection strip ---------- */
.ss-hstrip{
  display:flex;
  gap:var(--ss-sp-5);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-block:var(--ss-sp-2) var(--ss-sp-4);
  scrollbar-width:none;
  cursor:grab;
  -webkit-overflow-scrolling:touch;
}
.ss-hstrip::-webkit-scrollbar{ display:none; }
.ss-hstrip.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.ss-hstrip.is-dragging *{ pointer-events:none; }
.ss-hstrip > *{
  scroll-snap-align:start;
  flex:0 0 78%;
}
@media (min-width:640px){ .ss-hstrip > *{ flex-basis:44%; } }
@media (min-width:1024px){ .ss-hstrip > *{ flex-basis:28%; } }

/* Quick-add micro-interaction */
.ss-quickadd{
  position:relative;
  overflow:hidden;
}
.ss-quickadd .ss-quickadd__done{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:var(--ss-orange);
  color:var(--ss-ground);
  letter-spacing:0.2em;
  opacity:0;
  transform:translateY(100%);
  transition:opacity var(--ss-dur-2) var(--ss-ease), transform var(--ss-dur-2) var(--ss-ease);
}
.ss-quickadd.is-added .ss-quickadd__done{ opacity:1; transform:translateY(0); }

/* ---------- Drawer / Overlay scaffolding (cart, search, menu) ---------- */
.ss-backdrop{
  position:fixed;
  inset:0;
  z-index:70;
  background:rgba(10,9,8,0.6);
  backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--ss-dur-2) var(--ss-ease), visibility var(--ss-dur-2) var(--ss-ease);
}
.ss-backdrop.is-open{ opacity:1; visibility:visible; }

.ss-drawer{
  position:fixed;
  top:0; right:0;
  z-index:80;
  height:100dvh;
  width:min(420px, 92vw);
  background:var(--ss-brown-1);
  border-left:1px solid var(--ss-hairline);
  box-shadow:var(--ss-shadow-lg);
  transform:translateX(100%);
  transition:transform var(--ss-dur-3) var(--ss-ease-out);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
.ss-drawer.is-open{ transform:translateX(0); }
.ss-drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--ss-sp-5);
  border-bottom:1px solid var(--ss-hairline);
}
.ss-drawer__body{ padding:var(--ss-sp-5); flex:1; }
.ss-drawer__foot{ padding:var(--ss-sp-5); border-top:1px solid var(--ss-hairline); }

/* Search overlay (top sheet) */
.ss-search{
  position:fixed;
  top:0; left:0; right:0;
  z-index:80;
  background:var(--ss-brown-1);
  border-bottom:1px solid var(--ss-hairline);
  box-shadow:var(--ss-shadow-lg);
  transform:translateY(-100%);
  transition:transform var(--ss-dur-3) var(--ss-ease-out);
}
.ss-search.is-open{ transform:translateY(0); }
.ss-search__inner{ padding:var(--ss-sp-8) var(--ss-gutter) var(--ss-sp-7); }
.ss-search input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--ss-hairline-accent);
  padding:var(--ss-sp-4) 0;
  font-family:var(--ss-display);
  font-size:var(--ss-fs-h2);
  text-transform:uppercase;
  letter-spacing:-0.01em;
  color:var(--ss-beige);
}
.ss-search input::placeholder{ color:var(--ss-text-faint); }

/* Mobile menu (full sheet) */
.ss-menu{
  position:fixed;
  inset:0;
  z-index:80;
  background:var(--ss-ground);
  transform:translateX(-100%);
  transition:transform var(--ss-dur-3) var(--ss-ease-out);
  display:flex;
  flex-direction:column;
  padding:var(--ss-sp-8) var(--ss-gutter);
  overflow-y:auto;
}
.ss-menu.is-open{ transform:translateX(0); }
.ss-menu a{
  font-family:var(--ss-display);
  font-size:var(--ss-fs-h1);
  text-transform:uppercase;
  letter-spacing:-0.02em;
  color:var(--ss-beige);
  padding-block:var(--ss-sp-3);
  border-bottom:1px solid var(--ss-hairline);
}

/* ============================================================
   SCROLL-REVEAL — fade + rise + slight blur, staggered via --d
   ============================================================ */
[data-reveal],
.reveal, .reveal-up, .reveal-blur{
  opacity:0;
  transform:translateY(28px);
  filter:blur(6px);
  transition:opacity var(--ss-dur-4) var(--ss-ease-out),
             transform var(--ss-dur-4) var(--ss-ease-out),
             filter var(--ss-dur-4) var(--ss-ease-out);
  transition-delay:var(--d, 0ms);
  will-change:opacity, transform, filter;
}
.reveal{ transform:translateY(0); }        /* fade only */
.reveal-blur{ transform:translateY(12px); }

[data-reveal].is-visible,
.reveal.is-visible, .reveal-up.is-visible, .reveal-blur.is-visible{
  opacity:1;
  transform:none;
  filter:blur(0);
}

/* ============================================================
   REDUCED MOTION — neutralize all transforms / transitions
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal],
  .reveal, .reveal-up, .reveal-blur{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  [data-hero] .ss-reveal-line{ transform:none !important; opacity:1 !important; }
  [data-hero] .ss-photo{ opacity:1 !important; --_scale:1 !important; }
  .ss-marquee__track{ animation:none !important; transform:none !important; }
  .ss-card:hover{ transform:none; }
  .ss-card:hover .ss-photo{ --_scale:1; }
  .ss-btn:hover{ transform:none; }
  .ss-photo{ transform:none !important; }
}
[data-hero] .ss-photo{ background-position:61% center !important; }
@media (max-width:720px){
  [data-hero] .ss-photo{ background-position:71% center !important; }
}

.ssx-story, .ssx-products, .ssx-bestsellers, .ssx-instagram{
  background:#FFFFFF;
  color:#171310;                 /* so inherited (uncolored) text goes dark too */
  --ss-beige:#171310;
  --ss-text:#171310;
  --ss-white:#171310;            /* elements using --ss-white as text become dark here */
  --ss-text-muted:rgba(23,19,16,0.62);
  --ss-text-faint:rgba(23,19,16,0.42);
  --ss-hairline:rgba(23,19,16,0.16);
  --ss-panel:#F4EFE6;
  --ss-panel-2:#E7DCCC;
}
.ssx-story .ss-card__title, .ssx-products .ss-card__title,
.ssx-story .ssx-products-card__meta, .ssx-products .ssx-products-card__meta{ color:var(--ss-text); }
/* instagram hover overlay sits on a DARK scrim even though the section is white -> keep its text light */
.ssx-instagram__overlay{ color:#F4EFE6 !important; }
.ssx-instagram__handle{ color:#F4EFE6 !important; }
/* Bijschriften (LAGOS, EDITORIAL, LOOK 02, ...) liggen ALTIJD op een foto.
   De witte secties zetten --ss-beige op donker, waardoor die bijschriften
   zwart op het beeld kwamen te staan. Ze blijven daarom altijd licht, met
   een schaduw zodat ze ook op een lichte foto leesbaar zijn. */
.ss-photo__cap{
  color:#F4EFE6 !important;
  text-shadow:0 1px 10px rgba(17,16,15,0.85), 0 0 2px rgba(17,16,15,0.6) !important;
}

.ssx-footer-powered{
  margin:var(--ss-sp-6) 0 0;
  padding-top:var(--ss-sp-5);
  border-top:1px solid var(--ss-hairline);
  text-align:center;
  font-family:var(--ss-body);
  font-size:var(--ss-fs-label);
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ss-text-faint);
}
.ssx-footer-powered__brand{
  color:var(--ss-orange);
  font-weight:700;
  /* gestapelde schaduwen: klein en fel voor de rand, breed en zwak voor
     de gloed eromheen. Zonder de brede laag leest het als een harde outline. */
  text-shadow:
    0 0 5px rgba(212,106,42,0.70),
    0 0 16px rgba(212,106,42,0.48),
    0 0 34px rgba(212,106,42,0.26);
  transition:color var(--ss-dur-2) var(--ss-ease),
             text-shadow var(--ss-dur-2) var(--ss-ease);
}
.ssx-footer-powered__brand:hover{
  color:#F0873E;
  text-shadow:
    0 0 6px rgba(212,106,42,0.92),
    0 0 20px rgba(212,106,42,0.66),
    0 0 44px rgba(212,106,42,0.40);
}

.ssx-bestsellers .ssx-bestsellers-grid{ align-items:stretch !important; }
.ssx-bestsellers .ssx-bestsellers-card{ height:100%; display:flex; flex-direction:column; }
.ssx-bestsellers .ssx-bestsellers-card__body{ flex:1 0 auto; }
.ssx-bestsellers .ssx-bestsellers-card__media{ display:block; }
.ssx-bestsellers .ssx-shop-card__mock{ aspect-ratio:4 / 5; background:#F1EBE0; border-radius:inherit; }
.ssx-bestsellers .ssx-shop-card__mock::after{ border-color:rgba(23,19,16,0.18); }

.ssx-newsletter__photo{ background-position:center !important; }
.ssx-newsletter__scrim{ background:linear-gradient(92deg, rgba(17,16,15,0.92) 0%, rgba(17,16,15,0.80) 40%, rgba(17,16,15,0.42) 78%, rgba(17,16,15,0.30) 100%) !important; }

.ssx-banner-line--indent{ padding-left:0 !important; }

.ssx-hero,[data-hero],.ssx-banner,.ssx-footer{
  --ss-ground:#11100F;
  --ss-beige:#E8DED3;
  --ss-text:#E8DED3;
  --ss-text-muted:rgba(232,222,211,0.64);
  --ss-text-faint:rgba(232,222,211,0.40);
  --ss-hairline:rgba(232,222,211,0.14);
  --ss-panel:#2A1C17;
  --ss-panel-2:#53382D;
  --ss-brown-1:#2A1C17;
  --ss-brown-2:#53382D;
}
.ssx-footer{ background:var(--ss-ground); }

.ss-mega,.ss-display,.ss-h1,.ss-h2,.ss-h3{overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;text-wrap:balance;}

/* --- refinement fix: why-section rows always side-by-side (areas, reverse-safe) --- */
@media (min-width:900px){
  .ssx-why__row{ grid-template-columns:0.9fr 1.1fr!important; grid-template-areas:"media text"!important; align-items:center!important; }
  .ssx-why__row--reverse{ grid-template-columns:1.1fr 0.9fr!important; grid-template-areas:"text media"!important; }
  .ssx-why__row .ssx-why__media{ grid-area:media!important; }
  .ssx-why__row .ssx-why__text{ grid-area:text!important; }
}

/* ---- Fotoslots ----
   In het prototype zitten deze beelden als base64 in de css (de
   artifact-CSP laat geen losse bestanden toe). Hier zijn het echte
   bestanden met een relatief pad, dus de browser kan ze cachen.
   slot-NN.jpg = de goedgekeurde uitsnede + grading van slot NN;
   campaign-NN.jpg ernaast zijn de bronbeelden op volle resolutie. */
.ssimg-01{--img:url("../img/campaign/slot-01.jpg");}
.ssimg-02{--img:url("../img/campaign/slot-02.jpg");}
.ssimg-03{--img:url("../img/campaign/slot-03.jpg");}
.ssimg-04{--img:url("../img/campaign/slot-04.jpg");}
.ssimg-05{--img:url("../img/campaign/slot-05.jpg");}
.ssimg-06{--img:url("../img/campaign/slot-06.jpg");}
.ssimg-07{--img:url("../img/campaign/slot-07.jpg");}
.ssimg-08{--img:url("../img/campaign/slot-08.jpg");}
.ssimg-09{--img:url("../img/campaign/slot-09.jpg");}
.ssimg-10{--img:url("../img/campaign/slot-10.jpg");}
.ssimg-11{--img:url("../img/campaign/slot-11.jpg");}
.ssimg-12{--img:url("../img/campaign/slot-12.jpg");}
.ssimg-13{--img:url("../img/campaign/slot-13.jpg");}
.ssimg-14{--img:url("../img/campaign/slot-14.jpg");}
.ssimg-15{--img:url("../img/campaign/slot-15.jpg");}
.ssimg-16{--img:url("../img/campaign/slot-16.jpg");}
.ssimg-17{--img:url("../img/campaign/slot-17.jpg");}
.ssimg-18{--img:url("../img/campaign/slot-18.jpg");}

/* =====================================================================
   HANDWERK — alles hierboven wordt overschreven door port_to_wp.py
   ===================================================================== */

/* ---- Font-vangnet voor niet-Apple-apparaten ----
   Het design is goedgekeurd zoals het op een Mac rendert: Helvetica Neue voor
   tekst en koppen, Georgia voor het italic accent. Die staan hier dus vooraan en
   veranderen niet. Maar Helvetica Neue bestaat alleen op Apple-apparaten en
   Georgia niet op Android — daar viel de site terug op Arial en een willekeurige
   schreefletter, en dat is niet wat is goedgekeurd.
   Inter en Gelasio staan er daarom ACHTER als webfont-vangnet: Gelasio is
   metrisch gelijk aan Georgia, Inter ligt het dichtst bij Helvetica Neue. Een
   browser downloadt een webfont alleen als hij hem echt nodig heeft, dus op een
   Mac wordt er niets extra geladen en verandert er niets aan het beeld. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"]{
  --ss-display:"Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  --ss-body:"Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  --ss-serif:Georgia, "Gelasio", "Times New Roman", serif;
}

/* Zonder JS moet de pagina leesbaar blijven. Het prototype verbergt
   [data-reveal] onvoorwaardelijk en rekent erop dat de reveal-JS draait; laadt
   die niet, dan blijft de halve pagina onzichtbaar. `.ss-js` wordt in de <head>
   gezet (includes/site-assets.php), dus vóór de eerste paint — geen flits van
   content die daarna wegklapt. */
html:not(.ss-js) [data-reveal],
html:not(.ss-js) [data-reveal-stagger],
html:not(.ss-js) .reveal,
html:not(.ss-js) .reveal-up,
html:not(.ss-js) .reveal-blur{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  clip-path:none !important;
}