/* Aanvullende klassen voor de nieuwe kop en het aanvraagformulier (staan ook in de Tailwind-bron; dit bestand vangt op wanneer app.css niet opnieuw gebouwd is). */
.bg-gold\/15{background-color:color-mix(in oklab,var(--color-gold) 15%,transparent)}
.bg-onyx\/60{background-color:color-mix(in oklab,var(--color-onyx) 60%,transparent)}
.bg-white\/15{background-color:color-mix(in oklab,#fff 15%,transparent)}
.border-white\/10{border-color:color-mix(in oklab,#fff 10%,transparent)}
.gap-x-8{column-gap:calc(var(--spacing) * 8)}
.gap-y-2{row-gap:calc(var(--spacing) * 2)}
.max-w-xl{max-width:36rem}
.mb-8{margin-bottom:calc(var(--spacing) * 8)}
.min-w-10{min-width:calc(var(--spacing) * 10)}
.ml-1\.5{margin-left:calc(var(--spacing) * 1.5)}
.ml-2{margin-left:calc(var(--spacing) * 2)}
.ml-auto{margin-left:auto}
.mx-1\.5{margin-inline:calc(var(--spacing) * 1.5)}
.py-10{padding-block:calc(var(--spacing) * 10)}
.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}
.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}
.w-px{width:1px}
.whitespace-pre-line{white-space:pre-line}
@media (hover:hover){
.hover\:bg-white\/5:hover{background-color:color-mix(in oklab,#fff 5%,transparent)}
.hover\:text-onyx:hover{color:var(--color-onyx)}
}
@media (min-width:40rem){
.sm\:p-7{padding:calc(var(--spacing) * 7)}
.sm\:py-14{padding-block:calc(var(--spacing) * 14)}
}
@media (min-width:64rem){
.lg\:flex{display:flex}
}
@media (min-width:80rem){
.xl\:inline-flex{display:inline-flex}
}
.h-8{height:calc(var(--spacing) * 8)}
.gap-x-4{column-gap:calc(var(--spacing) * 4)}
.text-voorraad-laag{color:#d97706}
.wagen-stap{display:inline-flex;align-items:stretch;border:1px solid var(--color-ridge);border-radius:6px;overflow:hidden}
.wagen-stap button{width:2.75rem;min-height:2.75rem;padding:0;font:inherit;font-size:1.35rem;line-height:1;color:var(--color-mist);background:transparent;border:0;cursor:pointer;touch-action:manipulation}
.wagen-stap button:hover:not(:disabled){background:color-mix(in oklab,var(--color-gold) 18%,transparent)}
.wagen-stap button:disabled{opacity:.3;cursor:not-allowed}
.wagen-stap button:focus-visible,.wagen-stap input:focus-visible{outline:2px solid var(--color-gold);outline-offset:-2px}
.wagen-stap input{width:3.75rem;min-height:2.75rem;padding:0;font:inherit;font-size:1rem;text-align:center;color:var(--color-mist);background:var(--color-graphite);border:0;border-inline:1px solid var(--color-ridge);border-radius:0;-moz-appearance:textfield;appearance:textfield}
.wagen-stap input::-webkit-outer-spin-button,.wagen-stap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wagen-stap-groot button,.wagen-stap-groot input{min-height:3rem}

/* Bestelling aanpassen (klant) */
.bw{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--color-ridge)}
.bw h2{margin:0 0 .3rem;font-size:1.125rem;font-weight:700;color:var(--color-mist)}
.bw-uitleg{margin:.5rem 0 0;font-size:.875rem;line-height:1.5;color:var(--color-steel)}
.bw details{margin-top:.75rem;border:1px solid var(--color-ridge);border-radius:6px}
.bw summary{padding:.8rem 1rem;font-weight:600;color:var(--color-mist);cursor:pointer}
.bw details[open] summary{border-bottom:1px solid var(--color-ridge)}
.bw form{padding:1rem}
.bw-regels{margin:0;padding:0;list-style:none}
.bw-regels li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid color-mix(in oklab,var(--color-ridge) 50%,transparent)}
.bw-regels label{display:block;min-width:0;font-size:.9375rem;color:var(--color-mist)}
.bw-regels small{display:block;font-size:.75rem;color:var(--color-steel)}
.bw-regels input{flex:none;width:5rem;min-height:2.75rem;padding:0 .5rem;font:inherit;text-align:center;color:var(--color-mist);background:var(--color-graphite);border:1px solid var(--color-ridge);border-radius:4px}
.bw-knop{display:inline-flex;align-items:center;min-height:2.75rem;margin-top:1rem;padding:0 1.25rem;font:inherit;font-weight:700;color:#0a121a;background:var(--color-gold);border:0;border-radius:4px;cursor:pointer}
.bw-knop:hover{background:var(--color-gold-bright)}
.bw-gevaar{color:#fff;background:#b3261e}
.bw-gevaar:hover{background:#c9382f}
.bw-melding{margin:0 0 1.25rem;padding:.8rem 1rem;font-size:.9375rem;color:var(--color-mist);background:color-mix(in oklab,#3fa66b 12%,transparent);border-left:3px solid #3fa66b}
.bw-fout{background:color-mix(in oklab,#b3261e 12%,transparent);border-left-color:#b3261e}
.bw-status{display:inline-block;margin:0 0 1rem;padding:.2rem .6rem;font-size:.8125rem;font-weight:700;border:1px solid var(--color-gold);border-radius:3px;color:var(--color-gold)}
.bw-afgehandeld{color:var(--color-steel);border-color:var(--color-ridge)}
.bw-geannuleerd{color:var(--color-alert);border-color:var(--color-alert)}

#toegevoegd[hidden]{display:none}

/* De hero mag nooit zelf scrollen (scrollIntoView liet de inhoud omhoog schuiven en liet witruimte achter) */
section.grain{overflow:clip}

/* Actieblok in de hero: gratis display bij Draumet waterpassen. Geen kader: het display staat voor een gouden boog,
   de tekst volgt het thema (marineblauw op licht, wit op donker). Het rood zit alleen in de foto. */
.hero-rij{display:grid;gap:2.5rem}
@media(min-width:64rem){.hero-rij{grid-template-columns:minmax(0,1fr) 27rem;gap:3rem;align-items:center}}
@media(min-width:80rem){.hero-rij{grid-template-columns:minmax(0,1fr) 31rem;gap:4.5rem}}
.actie{--goud:#d9a52e;--goud-licht:#f4ce6b;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"foto kop" "maten maten" "knop knop";gap:1.25rem 1.5rem;align-items:end;margin-top:1.5rem;padding-top:1.25rem}
.actie-podium{grid-area:foto;position:relative}
.actie-podium::before{content:"";position:absolute;left:0;right:0;bottom:0;height:84%;border-radius:999px 999px 8px 8px;background:linear-gradient(180deg,var(--goud-licht) 0%,var(--goud) 100%);box-shadow:0 22px 40px -22px rgba(217,165,46,.8)}
.actie-foto{position:relative;display:block;width:78%;height:auto;margin:0 auto;filter:drop-shadow(0 14px 14px rgba(10,18,26,.4))}
.actie-kop{grid-area:kop;align-self:center;min-width:0}
.actie-titel{margin:0;font-family:"Big Shoulders",sans-serif;font-size:clamp(2.4rem,10vw,3.4rem);font-weight:800;line-height:.86;text-transform:uppercase;color:var(--color-mist)}
.actie-prijs{margin:.55rem 0 0;font-family:"Big Shoulders",sans-serif;font-size:clamp(1.5rem,6vw,2rem);font-weight:800;line-height:1;color:var(--color-gold)}
.actie-uitleg{margin:.9rem 0 0;font-size:.875rem;line-height:1.45;color:var(--color-steel)}
/* de maten staan op een liniaal: een waterpas is een meetinstrument */
.actie-maten{grid-area:maten;position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin:0;padding:.9rem 0 0;list-style:none;border-top:2px solid var(--color-mist)}
.actie-maten::before{content:"";position:absolute;left:0;right:0;top:0;height:.55rem;background:linear-gradient(90deg,var(--color-mist) 1px,transparent 1px) 0 0/calc(100% / 28) 100% repeat-x;opacity:.45}
.actie-maten li{display:flex;flex-direction:column;align-items:center}
.actie-maten b{font-family:"Big Shoulders",sans-serif;font-size:1.6rem;font-weight:800;line-height:1;color:var(--color-mist)}
.actie-maten span{font-size:.6875rem;line-height:1.3;color:var(--color-steel)}
.actie-maten i{margin-top:.3rem;font-size:.8125rem;font-style:normal;font-weight:700;color:var(--color-gold)}
.actie-knop{grid-area:knop;justify-self:start;display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:0 1.5rem;font-weight:700;color:#0a121a;background:var(--goud);border-radius:3px;text-decoration:none;transition:background-color .2s}
.actie-knop:hover{background:var(--goud-licht)}
.actie-knop:focus-visible{outline:3px solid var(--color-mist);outline-offset:3px}
@media(max-width:30rem){.actie-knop{justify-self:stretch}}
.footer-credit{margin:1.5rem 0 0;text-align:center;font-size:.9375rem;color:rgba(255,255,255,.75)}
.footer-credit a{margin-left:.15rem;font-weight:700;color:var(--color-gold);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--color-gold) 45%,transparent);text-underline-offset:4px}
.footer-credit a:hover{color:#fff;text-decoration-color:#fff}
.footer-credit a:focus-visible{outline:2px solid var(--color-gold);outline-offset:3px}
/* Actie "koop 10, 1 gratis" (Eyno Ladder) */
.actie-label{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .55rem;font-size:.75rem;font-weight:800;line-height:1;color:#fff;background:var(--color-alert);border-radius:3px;white-space:nowrap}
.actie-label-kaart{position:absolute;left:.6rem;bottom:.6rem;z-index:20;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.actie-strook{display:flex;gap:.85rem;align-items:flex-start;margin:1rem 0 0;padding:.9rem 1rem;color:#fff;background:var(--color-alert);border-radius:8px}
.actie-strook strong{display:block;font-size:1.0625rem;line-height:1.3}
.actie-strook span{display:block;margin-top:.15rem;font-size:.875rem;line-height:1.4;opacity:.95}