/* tokens: typografie, spacing, radii, shadows, easing (kleuren laat ik ongemoeid = jouw palette) */
:root{
  --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-24:24px; --fs-32:32px; --fs-40:40px;
  --lh:1.6;
  --radius:12px; --radius-lg:16px;
  --shadow-soft:0 10px 30px rgba(0,0,0,.08); --shadow-sm:0 4px 16px rgba(0,0,0,.06);
  --hairline:1px solid rgba(0,0,0,.06);
  --ease:cubic-bezier(.22,1,.36,1);
  --dur-1:180ms; --dur-2:280ms; --dur-3:600ms;
  --container:1280px; --gutter:24px;
}

body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; font-size:var(--fs-16); line-height:var(--lh); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
h1,h2,h3{letter-spacing:-0.3px}
.container{max-width:calc(var(--container) + var(--gutter)*2); padding-inline:var(--gutter); margin-inline:auto}
.section{padding:48px 0}
.hr{border:0; border-top:var(--hairline); margin:16px 0}

/* header behavior */
.site-header{position:sticky; top:36px; z-index:50; transition:background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease)}
.site-header.transparent{background:transparent}
.site-header.scrolled{background:rgba(255,255,255,.96); backdrop-filter:saturate(160%) blur(8px); box-shadow:0 8px 22px rgba(0,0,0,.06)}
.header-actions .header-cart-btn{position:relative}
.header-cart-count{position:absolute; top:-6px; right:-6px; font-size:12px; background:currentColor; color:#fff; border-radius:999px; padding:2px 6px}

/* announce bar */
.ticker{position:sticky; top:0; z-index:60; height:36px; background:var(--ink, #0f1012); color:#fff; overflow:hidden}
.ticker-track{display:flex; gap:24px; align-items:center; height:36px; white-space:nowrap; padding-inline:var(--gutter)}

/* utilities */
.de-2025 .card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.hairline{border:var(--hairline); border-radius:var(--radius)}
.btn,.btn-mini,.btn-outline{transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease)}
.btn:hover,.btn-mini:hover{transform:translateY(-3px)}
.btn:active,.btn-mini:active{transform:translateY(0) scale(.98)}

/* overlay & modal */
.search-overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; display:grid; place-items:start center; padding-top:10vh}
.search-overlay.open{opacity:1; pointer-events:auto}
.search-card{width:min(720px,92vw); background:#fff; border-radius:16px; padding:16px; box-shadow:var(--shadow-soft)}
.search-card .row{display:flex; align-items:center; gap:12px}
.kbd{font-size:12px; padding:4px 8px; border:var(--hairline); border-radius:8px; background:#f8fafc}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#fff; border:var(--hairline)}

/* modal generic */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; place-items:center; padding:24px}
.modal.open{display:grid}
.modal-card{background:#fff; border-radius:16px; padding:20px; width:min(560px,92vw); box-shadow:var(--shadow-soft)}
.modal-close{position:absolute; top:8px; right:12px; background:#fff; border:var(--hairline); width:32px; height:32px; border-radius:8px}

/* table (size chart) */
.table{display:grid; gap:6px}
.tr{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}
.th{font-weight:600}

/* footer */
.footer-2025{background:#0f1012; color:#eaeef3; padding:40px 0 24px}
.footer-2025 .f-columns{display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:24px}
.footer-2025 a{color:inherit}
.link-underline{text-decoration:underline; text-underline-offset:3px}
.f-bottom{display:flex; align-items:center; justify-content:space-between; margin-top:16px}
.pay-badges img{filter:grayscale(1); opacity:.9}
.newsletter{display:flex; gap:8px; margin-top:8px}
.input{height:40px; padding:0 12px; border-radius:10px; border:var(--hairline); background:#fff; outline:none}
.input:focus{box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; background:#111; color:#fff; border:0; cursor:pointer}
.btn-outline{padding:8px 12px; border-radius:10px; background:#fff; border:var(--hairline)}
.btn-xs{padding:8px 12px; font-size:14px}

/* toast */
.toast{position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(20px); background:#111; color:#fff; padding:10px 14px; border-radius:12px; opacity:0; pointer-events:none; transition:all var(--dur-2) var(--ease); z-index:80}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}