/* ---------- Basis ---------- */
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:var(--size-body);line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:.98;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:var(--size-h1)}
h2{font-size:var(--size-h2)}
h3{font-size:var(--size-h3)}
p a,li a,td a{text-underline-offset:3px;text-decoration-thickness:1px}
::selection{background:var(--amber);color:var(--night)}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}
.screen-reader-text,.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:16px;top:-80px;z-index:200;background:var(--amber);color:var(--night);padding:12px 18px;font-weight:700}
.skip-link:focus{top:12px}
.container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.container--narrow{width:min(100% - 2*var(--gutter),780px);margin-inline:auto}
.section{padding-block:var(--section);position:relative}
.eyebrow::before{content:"";display:inline-block;width:26px;height:3px;margin-right:10px;vertical-align:middle;background:var(--amber)}
.eyebrow{font-size:var(--size-small);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.lead{font-size:var(--size-lead);line-height:1.5}
.soft{color:var(--fg-soft)}
.small{font-size:var(--size-small)}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(36px,5vw,64px)}
.section-head p{max-width:46ch;margin-top:12px}

nav ul,nav ol,.site-footer ul{list-style:none;padding:0;margin:0}

/* ---------- Knoppen ---------- */
.btn{--btn-bg:var(--amber);--btn-fg:var(--night);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bg);border-radius:var(--radius);font-weight:700;font-size:1.0625rem;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:color-mix(in srgb,var(--btn-bg) 86%,#000);border-color:color-mix(in srgb,var(--btn-bg) 86%,#000)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--fg);border-color:currentColor}
.btn--ghost:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn--dark{--btn-bg:var(--night);--btn-fg:var(--cream)}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.text-link{font-weight:700;text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--amber)}
.text-link:hover{text-decoration-color:currentColor}

/* ---------- Balk boven de kop ---------- */
.topbar{background:var(--amber);color:var(--night);font-size:var(--size-small);font-weight:600}
.topbar__inner{display:flex;justify-content:center;gap:clamp(24px,4vw,56px);padding-block:8px;width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.topbar span:not(:first-child){display:none}
@media (min-width:1000px){.topbar span:not(:first-child){display:inline}}

/* ---------- Kop ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--white);color:var(--night);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.site-header.is-stuck{box-shadow:0 6px 24px rgba(13,20,51,.08)}
.site-header__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;min-height:72px;width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.site-logo{display:block;width:58px;height:58px}
.site-logo img{width:100%;height:100%}
.main-nav{display:none}
.main-nav ul{display:flex;flex-wrap:wrap;gap:4px clamp(14px,1.7vw,28px)}
.main-nav a{display:block;padding:8px 0;font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s}
.main-nav a:hover,.main-nav a[aria-current="page"]{border-bottom-color:var(--amber)}
.header-actions{display:flex;justify-content:flex-end;align-items:center;gap:2px}
.icon-btn{position:relative;display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;color:inherit;text-decoration:none;transition:background .2s}
.icon-btn:hover{background:var(--off)}
.icon-btn svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cart-count{position:absolute;top:1px;right:0;display:grid;place-items:center;min-width:20px;height:20px;padding-inline:5px;border-radius:99px;background:var(--amber);color:var(--night);font-size:.875rem;line-height:1;font-weight:700}
.cart-count[data-count="0"]{display:none}
.header-left{display:flex;align-items:center;gap:2px}
.only-desktop{display:none}
.header-search{border-top:1px solid var(--line);padding-block:14px}
.header-search[hidden]{display:none}
.header-search form{display:flex;gap:10px;width:min(100% - 2*var(--gutter),640px);margin-inline:auto}
.header-search input{flex:1;min-width:0;min-height:48px;padding:8px 14px;background:var(--field);border:1px solid color-mix(in srgb,var(--fg) 45%,transparent);border-radius:var(--radius);color:var(--fg)}
.header-search input::placeholder{color:var(--fg-soft)}
.header-search .btn{min-height:48px;padding-inline:20px}
@media (min-width:1000px){
  .site-header__inner{min-height:84px}
  .site-logo{width:68px;height:68px}
  .main-nav{display:block}
  .only-mobile{display:none!important}
  .only-desktop{display:inline-grid}
}

/* ---------- Mobiel menu en winkelmandpaneel ---------- */
.overlay{position:fixed;inset:0;z-index:90;background:rgba(13,20,51,.45);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.overlay.is-open{opacity:1;visibility:visible}
.panel{position:fixed;top:0;bottom:0;z-index:100;display:flex;flex-direction:column;width:min(100%,460px);background:var(--bg);color:var(--fg);visibility:hidden;transition:transform .4s var(--ease),visibility .4s}
.panel--right{right:0;transform:translateX(100%)}
.panel--left{left:0;transform:translateX(-100%);width:min(92%,420px)}
.panel.is-open{transform:none;visibility:visible}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line)}
.panel__head h2{font-size:2.25rem}
.drawer__body{flex:1;overflow-y:auto;padding:8px 20px}
.drawer__foot{padding:18px 20px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:10px}
.drawer__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-weight:700;font-size:1.125rem}
.drawer__empty{display:grid;justify-items:center;text-align:center;gap:14px;padding:44px 12px}
.drawer__empty h3{font-size:2.25rem}
.mobile-nav{flex:1;overflow-y:auto;padding:12px 20px 24px}
.mobile-nav>ul:first-child>li>a{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:2.25rem;font-weight:500;line-height:1.1;text-decoration:none}
.mobile-nav__sub{margin-top:22px;display:grid;gap:4px}
.mobile-nav__sub a{display:block;padding:8px 0;text-decoration:none;font-weight:600}
.mobile-nav__contact{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}

/* ---------- Melding ---------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:120;transform:translate(-50%,24px);display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:12px 18px;background:var(--night);color:var(--cream);font-weight:600;border-radius:var(--radius);box-shadow:0 14px 40px rgba(13,20,51,.25);opacity:0;visibility:hidden;transition:opacity .25s,transform .35s var(--ease),visibility .25s}
.toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---------- Voet ---------- */
.newsletter{padding-block:clamp(48px,6vw,80px)}
.newsletter__inner{display:grid;gap:24px}
.newsletter h2{font-size:clamp(2.25rem,3.6vw,3.25rem);margin-bottom:10px}
.newsletter form{display:flex;flex-wrap:wrap;gap:10px}
.newsletter input{flex:1 1 220px;min-height:52px;padding:10px 16px;border:1px solid var(--night);background:var(--white);color:var(--night);border-radius:var(--radius)}
@media (min-width:860px){.newsletter__inner{grid-template-columns:1.1fr 1fr;align-items:center;gap:64px}}
.site-footer__grid{display:grid;gap:40px 32px;padding-block:clamp(56px,7vw,96px) 40px;grid-template-columns:repeat(2,minmax(0,1fr))}
.site-footer__brand,.site-footer__hours{grid-column:1/-1}
.site-footer__brand{display:grid;gap:14px;justify-items:start}
.site-footer__brand img{width:76px;height:76px;border-radius:50%}
.site-footer h3{font-size:1.625rem;margin-bottom:12px}
.site-footer ul a{display:inline-block;padding:4px 0;text-decoration:none}
.site-footer ul a:hover{text-decoration:underline;text-underline-offset:3px}
.hours{display:grid;grid-template-columns:auto 1fr;gap:3px 18px}
.hours dt,.hours dd{padding:1px 0}
.hours .is-today{color:var(--accent-text);font-weight:700}
.site-footer__legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding-block:18px;border-top:1px solid var(--line);font-size:var(--size-small);color:var(--fg-soft)}
.age-note{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--fg)}
.age-note__18{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border:2px solid currentColor;border-radius:50%;font-size:.875rem;line-height:1}
.pay-list{display:flex;flex-wrap:wrap;gap:8px}
.pay-chip{padding:4px 10px;border:1px solid var(--line);border-radius:var(--radius);font-weight:700;color:var(--fg)}
@media (min-width:860px){
  .site-footer__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}
  .site-footer__brand,.site-footer__hours{grid-column:auto}
}

/* ---------- Kruimelpad ---------- */
.breadcrumb{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:var(--size-small);padding-block:18px;color:var(--fg-soft)}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb li+li::before{content:"/";margin-right:10px;opacity:.6}
.breadcrumb [aria-current]{color:var(--fg)}

/* ---------- Binnenkomen bij scrollen, alleen als JavaScript draait ---------- */
.js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none}}