/* ==================================================================
   Hipstoeren Headless — global.css
   Concept rules copied VERBATIM from /concept-hsh/assets/concept.css,
   theme additions below the marker. No !important in this layer.
================================================================== */

/* ==================================================================
   Hip Stoer en Handgemaakt — ontwerpconcept (intern)
   Opbouw/structuur: overgenomen van de referentiesite (headless,
   editorial, haarlijnen, veel wit, eyebrow-labels, scroll-rails).
   Kleur/typografie: de EIGEN huisstijl van de klant, uit de Elementor-kit:
     #FFFAF6 crème · #D2BDB8 blush · #DCD9D7 lijn · #9D9A8F sage
     #7E7B71 olijf  · #333333 tekst · Roboto + Roboto Slab
   Alleen moderner doorgetrokken: diepere ink voor contrast, strakker
   raster, rustiger beweging.
================================================================== */

:root{
  /* huisstijl, 1-op-1 */
  --cream:#FFFAF6;
  --blush:#D2BDB8;
  --line:#DCD9D7;
  --sage:#9D9A8F;
  --olive:#7E7B71;
  --text:#333333;
  --white:#fff;
  /* afgeleid, voor contrast en diepte */
  --shell:#F6F0EA;
  --field:#EDE8E4;
  --ink:#2F2C27;
  --line-soft:rgba(47,44,39,.09);
  --line-hair:rgba(47,44,39,.16);

  --d:'Roboto Slab',Georgia,serif;
  --f:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1400px;
  --gut:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-s:cubic-bezier(.4,0,.2,1);
  --hdr:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--f);color:var(--text);background:var(--white);
  font-size:16px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--d);font-weight:300;line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
::selection{background:var(--blush);color:var(--ink)}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:1040px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── reveal ──────────────────────────────────────────────────── */
[data-rv]{opacity:0;transform:translateY(28px);transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
[data-rv].in{opacity:1;transform:none}
[data-rv-d="1"]{transition-delay:.08s}[data-rv-d="2"]{transition-delay:.16s}
[data-rv-d="3"]{transition-delay:.24s}[data-rv-d="4"]{transition-delay:.32s}
[data-rv-d="5"]{transition-delay:.4s}
[data-rv="mask"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--ease)}
[data-rv="mask"].in{clip-path:inset(0 0 0 0)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  [data-rv]{opacity:1;transform:none;clip-path:none}
  .ln>span{transform:none}
}


/* ── theme additions ─────────────────────────────────────────── */
/*
  z-index scale (coordinated — declare new overlays against this table):
    sticky header .site-top ......... 70
    pdp buy bar .sbar ............... 75
    mobile drawer .drawer ........... 80
    search overlay .search-overlay .. 85
    progress bar .prog .............. 90
    fabric drawer .fmod ............. 95
    size table .smod ................ 96
    lightbox .lb .................... 98
    side cart (highest) ............. 100
    toast ........................... 110
*/

html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
html:has(body.is-locked),html:has(body.hsh-side-cart-locked){overflow:hidden}
body.hsh-side-cart-locked{overflow:hidden}

.screen-reader-text,.hsh-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hsh-skip:focus{position:fixed;z-index:120;top:10px;left:10px;width:auto;height:auto;clip:auto;padding:10px 16px;background:var(--ink);color:#fff}

/* fail-safe: without JS nothing may stay hidden */
html:not(.js) [data-rv]{opacity:1;transform:none;clip-path:none}
html:not(.js) .ln>span{transform:none}
html:not(.js) .acc__panel{grid-template-rows:1fr}