/* ==========================================================================
   global.css — tokens, reset, container, z-index scale
   Tokens VERBATIM from little-yune-homepage-concept-v16 :root
   ========================================================================== */

:root {
  /* palette */
  --mocha: #8c746a;
  --mocha-dark: #6e594f;
  --mauve: #ceaaaa;
  --pink: #e7b0b7;
  --peach: #facebf;
  --peach-soft: #fde7df;
  --sand: #e5e3d6;
  --sage: #c6c8b2;
  --cream: #faf8f3;
  --white: #ffffff;
  --ink: #3d322c;
  --ink-soft: #6b5c54;
  --shadow: 0 10px 26px rgba(140,116,106,0.18);

  /* semantic aliases (used by components) */
  --bg: var(--cream);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --accent: var(--peach);
  --accent-dark: var(--mocha-dark);

  /* type */
  --font-body: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* spacing / layout */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --container: 1240px;
  --container-sm: 920px;
  --gutter: 28px;
  --gutter-mobile: 20px;

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .35s;
}

/* ---------- z-index hierarchy (documented, do NOT freestyle) ------------- */
/*
  100    header (sticky, normal)
  500    dropdown menus, tooltips
  2000   generic modals (confirm)
  9998   search overlay backdrop (below header when search open)
  10000  search overlay panel
  10001  header when search open (body.ly-search-open .ly-header)
  10100  side cart backdrop + panel  (beats everything)
  11000  toast
*/

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

/* ---------- container / wrap (.wrap ALIAS for concept-copied markup) ---------- */
.wrap,.ly-wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.wrap--sm,.ly-wrap--sm{max-width:var(--container-sm);margin:0 auto;padding:0 var(--gutter)}
@media (max-width:600px){
  .wrap,.ly-wrap,.wrap--sm,.ly-wrap--sm{padding:0 var(--gutter-mobile)}
}

/* ---------- section base ---------- */
.ly-section{padding:56px 0}
@media (max-width:768px){.ly-section{padding:36px 0}}

/* ---------- utility ---------- */
.ly-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;pointer-events:none;opacity:0}
[hidden]{display:none !important}

/* Inklapbare categorie-SEO-tekst (rustig, maar telt mee voor SEO) */
.cat-seo-fold{max-width:860px;margin:22px auto 0;padding:0 22px;text-align:center;}
.cat-seo-fold>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;color:var(--mocha-dark);background:var(--cream,#faf8f3);border:1px solid #eaddd6;border-radius:26px;padding:11px 22px;transition:background .15s;}
.cat-seo-fold>summary::-webkit-details-marker{display:none;}
.cat-seo-fold>summary::after{content:'\25BE';font-size:12px;transition:transform .2s;}
.cat-seo-fold[open]>summary::after{transform:rotate(180deg);}
.cat-seo-fold>summary:hover{background:#f3e9e0;}
.cat-seo-fold-in{margin-top:14px;text-align:left;}