:root{color-scheme:dark;--bg:#151818;--panel:#202525;--line:#3b4540;--green:#c5f96c;--ink:#f4f7f3;--muted:#bdc9c1;font-family:system-ui,"Segoe UI",sans-serif;line-height:1.55}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink)}
a{color:var(--green);text-underline-offset:.23em}
a:hover{color:#e2ffad}
:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.skip{position:absolute;top:-6rem;left:1rem;padding:1rem;background:var(--bg)}
.skip:focus{top:1rem}
.shell{width:min(1180px,100% - 3rem);margin-inline:auto}
header,footer{border-bottom:1px solid var(--line)}
footer{border-top:1px solid var(--line)}
.header,nav,.actions,.choices{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(.7rem,2.4vw,1.7rem)}
.header{justify-content:space-between;padding-block:1rem}
.header p{margin:0}
.brand{display:inline-flex;align-items:center;gap:.42rem;font-size:1.24rem;font-weight:850;letter-spacing:-.055em;text-decoration:none;color:var(--ink)}
.brand span{color:var(--green);margin-left:-.38rem}
nav a{color:var(--ink);text-decoration:none;font-weight:670;padding-block:.38rem}
nav a[aria-current]{color:var(--green);text-decoration:underline}
.shop{font-weight:750}
main>section{margin-bottom:clamp(2.3rem,5vw,4rem)}
main>.hero{padding-block:clamp(2rem,6vw,5rem) 0}
.split{display:grid;grid-template-columns:1.04fr 1fr;align-items:center;gap:clamp(1.5rem,4vw,4rem)}
.track{display:block;width:100%;height:auto;border:1px solid #506442;border-radius:1.1rem}
h1,h2,h3{line-height:1.1;letter-spacing:-.045em;margin:0 0 .65em;text-wrap:balance}
h1{font-size:clamp(2.65rem,7vw,5.8rem);margin-bottom:.25em}
h1 em{color:var(--green);font-style:normal}
h2{font-size:clamp(1.75rem,4vw,3rem)}
h3{font-size:1.4rem}
p{color:var(--muted);margin:0 0 1em}
.intro{max-width:58ch;font-size:clamp(1.05rem,2vw,1.25rem)}
.tag{color:var(--green);letter-spacing:.16em;font-size:.78rem;font-weight:750}
.actions{gap:.75rem}
.button{display:inline-flex;justify-content:center;align-items:center;min-height:46px;padding:.7rem 1.1rem;border-radius:.55rem;border:1px solid var(--green);background:var(--green);color:#18230e;font:750 1rem/1.3 system-ui,sans-serif;text-decoration:none;cursor:pointer}
.button:hover{background:#e2ffad;color:#18230e}
.secondary{background:transparent;border-color:#68786d;color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));gap:1rem}
.card,.band{background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:clamp(1.15rem,3vw,2rem)}
.card{display:flex;flex-direction:column;align-items:flex-start}
.card a{margin-top:auto;font-weight:700}
.band{background:linear-gradient(120deg,#29372a,var(--panel) 75%)}
.crumb{margin-top:1.2rem}
.crumb+.hero{padding-top:1rem}
details{border-top:1px solid var(--line);padding:1rem 0}
summary{font-weight:700;cursor:pointer}
details p{margin:.65rem 0 0}
fieldset{border:0;padding:0;margin:0 0 1.45rem;min-width:0}
legend{font-size:1.22rem;font-weight:750;margin-bottom:.5rem}
select{display:block;width:min(100%,28rem);margin-top:.3rem;padding:.65rem;background:var(--bg);color:var(--ink);border:1px solid #75877a;border-radius:.45rem;font:inherit}
.choices{gap:.6rem}
.choices label{padding:.55rem .75rem;border:1px solid #75877a;border-radius:.45rem;cursor:pointer}
.choices label:has(:checked){border-color:var(--green);background:#36492c}
input{accent-color:var(--green)}
[hidden]{display:none!important}
@media(max-width:730px){.split{grid-template-columns:1fr}.track{max-height:310px;object-fit:cover}.header nav{order:3;width:100%;font-size:.95rem}.shell{width:min(1180px,100% - 2rem)}}


/* Fotografie en productverpakkingen */
.hero-image { display:block; width:100%; height:auto; aspect-ratio:5/4; object-fit:cover; border:1px solid #506442; border-radius:1.1rem }
.sport-image, .product-image { display:block; width:100%; height:auto; margin-bottom:1rem; border-radius:.55rem }
.sport-image { aspect-ratio:16/10; object-fit:contain; background:#151818 }
.product-image { height:clamp(9rem,18vw,12rem); object-fit:contain; background:#fff; padding:.65rem }
@media(max-width:730px) { .hero-image { max-height:310px } }

.sport-hero-image { object-fit:contain; background:#151818 }

.skin-hero-image { aspect-ratio:3/2; object-fit:contain; background:#f7f7f7 }

/* Verfijning voor productie */
html { scroll-padding-top:1.5rem }
.card { transition:border-color .18s ease }
.card:hover { border-color:#718368 }
.sport-image { aspect-ratio:auto; max-height:none; border-radius:.7rem }
.sport-hero-image { aspect-ratio:auto; max-height:none; height:auto }
.home-page .hero-image { aspect-ratio:auto; height:auto; max-height:none }
.sports-section .grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start }
.skin-intro { background:linear-gradient(115deg,#eee5e8,#ddd6e8); color:#2e2633; border-color:#d2c5d0 }
.skin-intro h2,.skin-intro p { color:inherit }
.skin-intro .button { background:#493852; border-color:#493852; color:#fff }
.skin-page { --bg:#f7f4f1; --panel:#fff; --line:#d8cfd6; --green:#67496e; --ink:#302737; --muted:#655c69; color-scheme:light }
.skin-page .band { background:linear-gradient(120deg,#eee5ec,#fff) }
.skin-page .button { background:#493852; border-color:#493852; color:#fff }
.skin-page .secondary { background:transparent; color:#493852 }
.skin-page .skin-hero-image { background:#fff; border-color:#d8cfd6; aspect-ratio:auto; max-height:none }
.skin-page .card:hover { border-color:#8b6d92 }
@media(max-width:730px) { .sports-section .grid { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:480px) { .sports-section .grid { grid-template-columns:1fr } }
@media(prefers-reduced-motion:reduce) { .card { transition:none } }