/* ============================================================
   Verbelen Racing — gedeelde stijl (nav, knoppen, praktische blokken)
   Bovenop de bestaande paginastijl. Alles hier is gescoped met .vr-
   of op bestaande nav-klassen, zodat niets bestaands breekt.
   ============================================================ */

/* ---------- navigatie ---------- */
.cockpit-nav{gap:26px;align-items:center}
.cockpit-nav a[href$="shop.html"]{color:var(--wit)}
.cockpit-nav a[href$="shop.html"]::before{content:'';display:inline-block;width:7px;height:7px;
  margin-right:8px;background:var(--fluo);transform:skewX(-14deg) translateY(-1px)}
@media(min-width:1080px) and (max-width:1260px){
  .cockpit-nav{gap:18px}
  .cockpit-nav a{letter-spacing:.14em!important;font-size:11.5px!important}
}
.wm-lijst a[aria-current="page"]{color:var(--fluo)}
.menuknop{min-height:44px}

/* ---------- knoppen (afgeleid van de partnerpagina) ---------- */
.vr-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:3.2vh}
.vr-knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  font-family:var(--label);font-weight:700;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;padding:14px 22px;border:2px solid var(--fluo);
  color:var(--wit);background:rgba(11,11,12,.55);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.vr-knop:hover,.vr-knop:focus-visible{background:var(--fluo);color:var(--nacht)}
.vr-knop.vol{background:var(--fluo);color:var(--nacht)}
.vr-knop.vol:hover,.vr-knop.vol:focus-visible{background:var(--wit);border-color:var(--wit)}
.vr-knop.klein{min-height:40px;padding:10px 16px;font-size:12px}
.vr-knop[disabled],.vr-knop[aria-disabled="true"]{opacity:.4;pointer-events:none}
@media(max-width:600px){
  .vr-knoppen{flex-direction:column;align-items:stretch;max-width:340px}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--fluo);outline-offset:3px}

/* ---------- racenummer-plaat (zoals op de partnerpagina) ---------- */
.vr-plaat{display:inline-block;background:var(--fluo);color:var(--nacht);font-family:var(--display);font-weight:400;font-style:italic;padding:2px 9px 1px 10px;transform:skewX(-14deg);line-height:1.2;font-size:.95em;margin-right:4px}

/* ---------- homepage: praktisch blok onder de hero ---------- */
#praktisch{padding:7vh 6vw 4vh;position:relative}
#praktisch .vr-raster{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin-top:2.6vh}
.vr-kaart{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 20px 20px;
  background:#121214;border:1px solid var(--lijn);color:var(--wit);text-decoration:none;min-height:200px;
  transition:border-color .25s,transform .25s}
a.vr-kaart:hover,a.vr-kaart:focus-visible{border-color:var(--fluo);transform:translateY(-2px)}
.vr-kaart .vr-k-label{font-family:var(--label);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--grijs)}
.vr-kaart .vr-k-titel{font-family:var(--display);font-weight:400;letter-spacing:.01em;text-transform:uppercase;font-size:clamp(20px,2vw,24px);line-height:1.15}
.vr-kaart .vr-k-tekst{font-size:15px;line-height:1.5;color:rgba(241,237,228,.78)}
.vr-kaart .vr-k-actie{margin-top:auto;font-family:var(--label);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fluo)}
.vr-kaart.met-beeld{padding:0;overflow:hidden}
.vr-kaart.met-beeld img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#1a1a1c}
.vr-kaart.met-beeld .vr-k-binnen{display:flex;flex-direction:column;gap:8px;padding:16px 20px 20px;flex:1}
.vr-kaart.eerst{border-color:rgba(216,240,0,.45)}
.vr-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--label);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--lijn);width:max-content}
.vr-status::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.vr-status.komt{color:var(--fluo);border-color:rgba(216,240,0,.4)}
.vr-status.wacht{color:#f0b429;border-color:rgba(240,180,41,.4)}
.vr-status.klaar{color:var(--grijs)}

/* ---------- 'lees verder' ---------- */
details.vr-meer{margin-top:1.6vh}
details.vr-meer>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--label);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fluo);padding:10px 0;min-height:44px}
details.vr-meer>summary::-webkit-details-marker{display:none}
details.vr-meer>summary::after{content:'+';font-size:16px;line-height:1}
details.vr-meer[open]>summary::after{content:'–'}
details.vr-meer[open]>summary .dicht{display:none}
details.vr-meer:not([open])>summary .open{display:none}

/* ---------- toggle (race center) ---------- */
.vr-toggle{display:inline-flex;border:1px solid var(--lijn);padding:4px;gap:4px;background:#111113;flex-wrap:wrap}
.vr-toggle button{background:none;border:0;color:var(--grijs);font-family:var(--label);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:11px 16px;cursor:pointer;min-height:42px}
.vr-toggle button[aria-pressed="true"]{background:var(--fluo);color:var(--nacht);font-weight:700}
.vr-wie{display:inline-block;font-family:var(--label);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--nacht);background:var(--fluo);padding:2px 7px;margin-left:6px;vertical-align:middle}
.vr-wie.misschien{background:transparent;color:#f0b429;border:1px solid rgba(240,180,41,.55)}

/* ---------- bestelpaneel (foto's) ---------- */
.vr-stappen{list-style:none;margin:2.4vh 0 0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));counter-reset:stap}
.vr-stappen li{counter-increment:stap;border:1px solid var(--lijn);padding:16px 16px 14px;background:#111113;
  font-size:14.5px;line-height:1.45;color:rgba(241,237,228,.82)}
.vr-stappen li::before{content:counter(stap);display:block;font-weight:700;font-style:italic;font-size:26px;
  color:var(--fluo);line-height:1;margin-bottom:8px}
.vr-stappen li b{display:block;color:var(--wit);font-size:15.5px;margin-bottom:3px}

#bestelpaneel{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#0e0e10;border-top:2px solid var(--fluo);
  padding:12px 6vw calc(12px + env(safe-area-inset-bottom));display:none;
  box-shadow:0 -12px 30px rgba(0,0,0,.5)}
#bestelpaneel.zichtbaar{display:block}
#bestelpaneel .bp-rij{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;justify-content:space-between}
#bestelpaneel .bp-info{font-size:14px;line-height:1.4;color:rgba(241,237,228,.85)}
#bestelpaneel .bp-info b{color:var(--wit);font-size:17px}
#bestelpaneel .bp-info .bp-tot{color:var(--fluo);font-weight:700;font-size:20px}
#bestelpaneel .bp-knoppen{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:600px){#bestelpaneel .bp-knoppen{width:100%}#bestelpaneel .bp-knoppen .vr-knop{flex:1}}

#bestelling{position:fixed;inset:0;z-index:90;background:rgba(5,5,5,.86);display:none;align-items:flex-start;
  justify-content:center;overflow-y:auto;padding:5vh 16px}
#bestelling.open{display:flex}
#bestelling .bs-doos{background:#121214;border:1px solid var(--lijn);max-width:720px;width:100%;padding:26px clamp(18px,4vw,34px) 30px;position:relative}
#bestelling h2{font-family:var(--display);font-weight:400;letter-spacing:.01em;text-transform:uppercase;font-size:clamp(26px,4vw,36px);line-height:1.05;margin:6px 0 10px}
#bestelling .bs-sluit{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--grijs);
  font-family:var(--label);font-size:12px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;padding:12px}
#bestelling .bs-lijst{margin:14px 0;border-top:1px solid var(--lijn)}
#bestelling .bs-album{padding:12px 0;border-bottom:1px solid var(--lijn)}
#bestelling .bs-album h3{font-size:15px;font-weight:800;margin:0 0 8px;letter-spacing:.02em}
#bestelling .bs-duimen{display:flex;flex-wrap:wrap;gap:6px}
#bestelling .bs-duimen figure{margin:0;position:relative}
#bestelling .bs-duimen img{width:64px;height:64px;object-fit:cover;display:block;background:#1a1a1c}
#bestelling .bs-duimen button{position:absolute;top:2px;right:2px;width:22px;height:22px;border:0;border-radius:50%;
  background:rgba(0,0,0,.75);color:var(--wit);cursor:pointer;font-size:13px;line-height:22px;padding:0}
#bestelling .bs-pakket{display:grid;gap:8px;margin:12px 0}
#bestelling .bs-pakket label{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--lijn);padding:12px 14px;cursor:pointer;font-size:14.5px;line-height:1.45}
#bestelling .bs-pakket label:has(input:checked){border-color:var(--fluo);background:rgba(216,240,0,.06)}
#bestelling .bs-pakket input{accent-color:var(--fluo);margin-top:3px}
#bestelling .bs-pakket small{display:block;color:var(--grijs);font-size:13px}
#bestelling .bs-som{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:2px solid var(--fluo);
  padding-top:12px;margin-top:6px;font-size:15px}
#bestelling .bs-som b{font-size:28px;font-weight:700;color:var(--fluo)}
#bestelling .bs-uitleg{font-size:13.5px;color:var(--grijs);line-height:1.5}
#bestelling .bs-velden{display:grid;gap:10px;margin:16px 0 6px;grid-template-columns:1fr 1fr}
#bestelling .bs-velden label{display:flex;flex-direction:column;gap:6px;font-family:var(--label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs)}
#bestelling .bs-velden .breed{grid-column:1/-1}
#bestelling .bs-velden input,#bestelling .bs-velden textarea{background:#0b0b0c;border:1px solid var(--lijn);color:var(--wit);
  font:inherit;font-size:15px;letter-spacing:0;text-transform:none;padding:11px 12px}
@media(max-width:600px){#bestelling .bs-velden{grid-template-columns:1fr}}
.vr-sel{position:absolute;top:8px;left:8px;z-index:3;width:34px;height:34px;border-radius:50%;
  border:2px solid var(--wit);background:rgba(0,0,0,.55);color:transparent;cursor:pointer;font-weight:700;font-size:16px;
  display:grid;place-items:center;padding:0}
.vr-sel[aria-pressed="true"]{background:var(--fluo);border-color:var(--fluo);color:var(--nacht)}

/* ---------- shop ---------- */
.vr-sectie{padding:9vh 6vw}
.vr-sectie h2{font-family:var(--display);font-weight:400;letter-spacing:.01em;text-transform:uppercase;font-size:clamp(30px,4.6vw,54px);line-height:1;margin:1.6vh 0 2vh}
.vr-sectie p.lees{max-width:62ch;font-size:17px;line-height:1.6;color:rgba(241,237,228,.82)}
.vr-product{display:grid;gap:clamp(20px,4vw,56px);grid-template-columns:1fr;margin-top:4vh;align-items:start}
@media(min-width:900px){.vr-product{grid-template-columns:1.1fr 1fr}}
.vr-product .vp-beeld{aspect-ratio:4/5;background:repeating-linear-gradient(135deg,#141416 0 14px,#18181b 14px 28px);
  border:1px dashed rgba(241,237,228,.22);display:grid;place-items:center;text-align:center;padding:24px;color:var(--grijs);
  font-family:var(--label);font-size:12px;letter-spacing:.2em;text-transform:uppercase;line-height:1.7}
.vr-product .vp-beeld img{width:100%;height:100%;object-fit:cover}
.vr-product dl{display:grid;grid-template-columns:max-content 1fr;gap:12px 22px;margin:2vh 0;font-size:15px}
.vr-product dt{font-family:var(--label);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--grijs);padding-top:3px}
.vr-product dd{margin:0;color:rgba(241,237,228,.85)}
.vr-leeg{color:#f0b429}
.vr-maten{display:flex;gap:6px;flex-wrap:wrap}
.vr-maten span{border:1px solid var(--lijn);padding:7px 11px;font-size:13px;color:var(--grijs)}
.vr-nodig{list-style:none;padding:0;margin:2vh 0 0;display:grid;gap:8px;max-width:760px}
.vr-nodig li{border-left:3px solid var(--fluo);padding:8px 0 8px 14px;background:#111113;font-size:15px;line-height:1.5;color:rgba(241,237,228,.85)}
.kdag .ev.misschien .lab{color:#f0b429}
.kev.misschien .dag{color:#f0b429}
.held .vr-knoppen{justify-content:center}
@media(max-width:600px){.held .vr-knoppen{margin-left:auto;margin-right:auto;width:100%}}
section[id],main[id]{scroll-margin-top:84px}
body.albumzicht #zo-bestel-je{display:none}
/* submenu: geen zwarte balk meer, losse glazen pilletjes */
.subnav{background:none!important;gap:8px!important;padding:8px 6vw 10px!important;pointer-events:none}
.subnav a{pointer-events:auto;padding:7px 14px!important;border-radius:999px;
  background:rgba(11,11,12,.55);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(241,237,228,.14);color:var(--wit)!important;font-size:.74rem!important;transition:border-color .25s,color .25s,background .25s}
.subnav a:hover,.subnav a.actief{border-color:var(--fluo);color:var(--fluo)!important;background:rgba(11,11,12,.75)}
.vr-albumtip{font-family:var(--label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grijs);margin:1vh 0 0}
.vr-albumtip b{color:var(--fluo);font-weight:700}
#kfilters.onze .kchip[data-eigen="0"]{display:none}
.wm-lijst a{width:auto!important;max-width:100%;font-size:clamp(26px,7vw,52px)!important;overflow-wrap:anywhere}
.wm-lijst a.wm-klein{font-family:var(--label)!important;font-weight:400!important!important;
  font-size:14px!important;letter-spacing:.24em;text-transform:uppercase;color:var(--grijs);margin-top:2vh}
.vr-wie.geannuleerd{background:transparent;color:var(--grijs);border:1px solid var(--lijn);text-decoration:none}
.kev.geannuleerd .nm,.kdag .ev.geannuleerd .lab{text-decoration:line-through;opacity:.55}
.kev.geannuleerd .nm .vr-wie{display:inline-block}
body.albumzicht #rm-band{display:none}
.vr-knop[hidden],[hidden].vr-knop{display:none!important}