/* ============================================================
   Buckle-configurator — hero + bediening.

   De pagina is één ding: de 3D-weergave. Alles wat hier staat is óf het
   doek waarop gerenderd wordt, óf de bediening die eroverheen zweeft.
   ============================================================ */

/* De pagina ÍS de configurator: er staat niets onder, dus er valt niets te
   scrollen. Dat expliciet vastzetten scheelt twee ergernissen op een
   telefoon: een venster dat een paar pixels meegeeft door een afrondingetje,
   en het doorschieten waarmee Android en iOS een pagina laten meeveren of
   verversen als je naar beneden trekt. Met een sleepbare 3D-weergave is dat
   laatste hinderlijk — je wilt draaien, niet verversen. */
html,
body {
    overflow: hidden;
    overscroll-behavior: none;
}

/* 100dvh en niet 100vh: op een telefoon telt vh de adresbalk mee die er soms
   wél en soms niet is, en dan valt de onderste rand — precies waar de
   bedieningsbalk zit — buiten beeld. dvh volgt de balk terwijl hij in- en
   uitschuift. vh blijft als terugval staan voor oudere browsers.

   In een iframe maakt het verschil niets uit: daar is de iframe zelf het
   venster en is er geen adresbalk. De hoogte wordt dan bepaald door de maat
   die de iframe op de pagina eromheen krijgt. */
.web-interactive-hero {
    position: relative;
    height: 100vh;   /* fallback voor browsers zonder dvh */
    height: 100dvh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #0a0a0a;
    isolation: isolate;
}

.web-interactive-hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    cursor: grab;
    background: #cccccc; /* matcht de studio-bol, geen flits bij laden */
}

.web-interactive-hero-canvas:active {
    cursor: grabbing;
}

.web-interactive-hero-canvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Onder de bedieningsbalk, niet erboven.

   Stond eerst op 5 en dekte daarmee ook de knoppen af. Zolang het model laadt
   is dat al ongelukkig — op een telefoon duurt dat merkbaar langer — maar het
   wordt erger als er íets misgaat: dan blijft de overlay staan en is er van
   de bediening niets meer te zien. De knoppen doen tijdens het laden toch al
   niets (modelReady houdt ze tegen), dus ze mogen gerust zichtbaar zijn. */
.cfg-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 15, 15, 0.75);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: opacity 0.4s ease;
}

.cfg-loading.done {
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   BEDIENINGSBALK — vijf knoppen onderin, elk met een eigen paneel.

   De balk staat vast onderin het canvas; de panelen klappen eróverheen
   open. Eén paneel tegelijk: twee open panelen zouden over elkaar heen
   vallen zodra ze naast elkaar staan, en je hebt er maar één nodig.
   ============================================================ */
/* align-items: stretch is wat de vakken even hoog houdt. Zou een label ooit
   toch over twee regels breken, dan groeien de andere mee in plaats van dat
   er één uitsteekt. */
/* De balk is óók het anker voor de uitklappanelen. Dat gaat vanzelf: hij
   staat al op position: absolute, en daarmee is hij het dichtstbijzijnde
   gepositioneerde voorouderelement zodra .cfg-tool dat zelf niet meer is.
   Daardoor kan een paneel de volle breedte van de balk pakken in plaats van
   boven één knop te hangen. In de HTML zit het paneel nog steeds bij zijn
   eigen knop, zodat de koppeling via aria-controls intact blijft. */
/* De breedte staat hier en niet in een media query, en dat is met opzet.

   min() kiest zelf: is er ruimte, dan 460px — precies vijf vakken van 92 —
   en anders 90% van het venster. Daarmee klopt die 90% bij elke breedte,
   zonder dat er een breekpunt hoeft aan te slaan. Dat scheelt een hele
   klasse fouten: of een breekpunt aangaat hangt af van de breedte die het
   iframe krijgt, en die hoeft niets te maken te hebben met de maat van het
   scherm waar je naar kijkt.

   De vakken verdelen die breedte onderling (zie .cfg-tool), dus ze krimpen
   netjes mee in plaats van uit de balk te lopen. */
.cfg-bar {
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 3;
    transform: translateX(-50%);
    display: flex;
    align-items: stretch;
    width: min(460px, 90vw);
}

/* flex-basis 0: de inhoud telt niet mee in de verdeling, dus alle vijf de
   vakken blijven exact even breed hoe lang hun label ook is. */
.cfg-tool {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
}

/* De knoppen sluiten op elkaar aan. Geen gat ertussen, en de randen vallen
   samen: elke knop op de eerste na schuift één pixel naar links, zodat je
   tussen twee vakken één streep ziet en niet twee.

   De glas-achtergrond zit op de knoppen zelf en niet op de balk. Dat is
   bewust: backdrop-filter maakt een eigen stapelcontext, en de uitklappanelen
   hangen als kind ín de balk. Met de blur op de balk zou de blur van de
   panelen door die van de balk heen moeten kijken, en dat wordt vlak. */
.cfg-tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    /* De maat komt van de balk, via .cfg-tool. Een vaste breedte hier zou
       daar dwars doorheen gaan zodra de balk krimpt. */
    width: 100%;
    padding: 9px 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    background: rgba(20, 20, 20, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--text-color);
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cfg-tool + .cfg-tool .cfg-tool-btn {
    margin-left: -1px;
}

/* Alleen de buitenste hoeken rond; de rest sluit vierkant aan. */
.cfg-tool:first-child .cfg-tool-btn {
    border-radius: 12px 0 0 12px;
}

.cfg-tool:last-child .cfg-tool-btn {
    border-radius: 0 12px 12px 0;
}

/* Bij overlappende randen wint normaal de laatste in de bronvolgorde. Een
   knop die je aanwijst of die openstaat moet zijn héle rand laten zien, ook
   de kant die onder zijn buurman ligt — vandaar naar voren halen. */
.cfg-tool-btn:hover,
.cfg-tool-btn[aria-expanded="true"] {
    position: relative;
    z-index: 1;
}

.cfg-tool-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cfg-tool-btn:hover {
    background: rgba(38, 38, 38, 0.68);
    border-color: rgba(255, 255, 255, 0.32);
}

.cfg-tool-btn[aria-expanded="true"] {
    border-color: var(--primary-hover);
    background: rgba(121, 0, 0, 0.42);
    color: #fff;
}

.cfg-tool-label {
    line-height: 1.1;
    text-align: center;
}

/* — het uitklapbare paneel —————————————————————————————————————
   Verborgen met visibility en niet met display:none, zodat de overgang
   werkt; pointer-events erbij zodat een dicht paneel geen klikken vangt. */
/* 80% van de balkbreedte, gecentreerd. left en right allebei op 10% doet dat
   in één keer: de breedte volgt uit wat ertussen overblijft, dus er valt
   niets uit te rekenen en het blijft kloppen als er ooit een knop bij komt.

   Lichter dan de balk. Dat is niet alleen smaak — het paneel ligt eróver, en
   in een stapel hoort wat boven ligt naar voren te komen. Donkerder zou het
   naar achteren duwen terwijl het juist de aandacht heeft.
   De grondkleur is daarom lichter grijs én iets doorzichtiger, zodat er meer
   van het lichte doek erachter doorheen komt.

   Verborgen met visibility en niet met display:none, zodat de overgang
   werkt; pointer-events erbij zodat een dicht paneel geen klikken vangt. */
.cfg-tool-panel {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: calc(100% + 10px);
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 14px;
    background: rgba(78, 78, 78, 0.6);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.cfg-tool-panel[data-open="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Precies de tint die het invoerveld als achtergrond had: dezelfde rgba, dus
   ze blijven bij elkaar horen wat er ook achter het paneel langs komt. Een
   vaste grijswaarde zou dat niet doen — het paneel is doorzichtig, dus zijn
   grondtoon verschuift met wat erachter staat. */
.cfg-panel-label {
    margin: 0 0 9px;
    color: rgba(0, 0, 0, 0.25);
    font-family: var(--font-heading);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* — tekstinvoer ————————————————————————————————————————————— */
.cfg-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.cfg-field + .cfg-field {
    margin-top: 11px;
}

.cfg-field-label {
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* Het veld draagt nu de tint die het label had (--text-muted, #a0a0a0), en
   het label die van het veld. Een lichte vulling met donkere tekst erin —
   dat leest als papier waarop je schrijft, in plaats van als een donker gat.

   De letterkleur moest daarin mee: lichte tekst op een lichtgrijs veld is
   niet te lezen. Dat is geen aparte keuze maar het gevolg van de omkering. */
.cfg-input {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.22);
    border-radius: 10px;
    background: var(--text-muted);
    color: #1b1b1b;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cfg-input::placeholder {
    color: rgba(0, 0, 0, 0.42);
    font-weight: 400;
    letter-spacing: 0;
}

.cfg-input:focus {
    outline: none;
    border-color: var(--primary-hover);
    /* iets lichter bij focus: het veld komt naar voren in plaats van weg te
       zakken, zoals eerder de donkere versie juist dieper werd */
    background: #b4b4b4;
}

/* Minimaal 16px op aanraakschermen.

   iOS Safari zoomt de hele pagina in zodra je een invoerveld aanraakt met een
   lettergrootte ONDER 16px — bedoeld als hulp, maar hij zoomt daarna niet
   vanzelf terug. Je blijft dus ingezoomd achter op een 3D-weergave die
   daardoor half buiten beeld valt.

   16px is de precieze drempel; er is geen andere manier om het uit te zetten
   die niet ook het knijpgebaar van de bezoeker sloopt. Op 'pointer: coarse'
   en niet op schermbreedte, want het gaat om aanraakbediening en niet om de
   maat van het scherm — een tablet heeft er net zo goed last van. */
@media (pointer: coarse) {
    .cfg-input {
        font-size: 16px;
    }
}

/* Terugkoppeling onder het invoerveld. Neemt geen ruimte in zolang er niets
   te melden valt.

   Standaard neutraal, want de meest voorkomende melding — "verkleind zodat
   het past" — is geen fout maar precies wat er hoort te gebeuren. Alleen een
   teken dat het lettertype niet heeft is een echt probleem, en dat is de
   enige die rood wordt. */
.cfg-field-note {
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.66rem;
    line-height: 1.35;
}

.cfg-field-note[data-warn="true"] {
    color: #ff8f8f;
}

.cfg-field-note:empty {
    display: none;
}

/* — embleemkeuze ————————————————————————————————————————————
   Eén horizontale strook zonder namen en zonder kopje: de emblemen zijn het
   argument, en er komen er te veel voor een raster met bijschriften.

   Het paneel is hier 150% van de balk. left en right op -25% doet dat in één
   keer — de helft van de extra 50% steekt aan elke kant uit — en het blijft
   gecentreerd zonder dat er iets uitgerekend hoeft te worden.

   Geen achtergrond, geen rand, geen blur: de emblemen zweven los boven de
   3D-weergave. Let op dat de blur hier expliciet uit moet — een doorzichtige
   achtergrond met backdrop-filter er nog op laat alsnog een vervaagd vlak
   zien, en dan is er niets gewonnen. */
.cfg-tool-panel--emblems {
    left: -25%;
    right: -25%;
    padding: 10px 0;
    background: transparent;
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* De strook zelf. Het masker is wat de randen laat uitfaden: links en rechts
   loopt de dekking naar nul, dus een tegel die het beeld in of uit schuift
   vervaagt in plaats van tegen een harde rand te knallen. Dat is ook precies
   de aanwijzing dát er meer staat dan je ziet.

   De scrollbalk is verborgen — die zou dwars door de vervaging heen lopen. */
.cfg-emblem-strip {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

.cfg-emblem-strip::-webkit-scrollbar {
    display: none;
}

/* Tijdens het slepen ook over de tegels heen, anders springt de aanwijzer
   terug naar het handje zodra je over een embleem beweegt. */
.cfg-emblem-strip.is-dragging,
.cfg-emblem-strip.is-dragging .cfg-emblem {
    cursor: grabbing;
}

/* Geen padding op de baan: de tegels moeten naadloos herhaalbaar zijn, en
   padding zou de periode van die herhaling vervalsen. Het masker zorgt al
   dat er niets hard tegen de rand aan komt. */
/* align-items op flex-start en niet op de standaard 'stretch': anders rekken
   de tegels zich uit tot de hoogte van de baan, en dan zit het vierkante
   plaatje bovenin een veel te hoge knop. Dat is wat de emblemen aan een
   onzichtbaar hoog vlak liet hangen. */
.cfg-emblem-track {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: max-content;
}

/* Passen alle emblemen in beeld, dan valt er niets te scrollen en staan ze
   gewoon gecentreerd. */
.cfg-emblem-track[data-center="true"] {
    width: 100%;
    justify-content: center;
}

/* Geen vlak onder het embleem: alleen de vorm zelf. De actieve tegel houdt
   wel een aanduiding — zonder zou je niet kunnen zien wat er gekozen is —
   maar zo licht mogelijk. */
/* De tegel meet zichzelf op aan het plaatje erin, in plaats van andersom.
   Geen breedte in procenten en geen afgeleide hoogte: één vaste maat op de
   afbeelding bepaalt alles, en dan kán de verhouding niet meer wegdrijven.
   line-height op 0 haalt de regelruimte weg die een knop anders onder zijn
   inhoud reserveert. */
.cfg-emblem {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: none;
    line-height: 0;
    color: #333;
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cfg-emblem:hover {
    background: rgba(0, 0, 0, 0.07);
}

.cfg-emblem[data-active="true"] {
    border-color: var(--primary-hover);
    background: rgba(121, 0, 0, 0.12);
}

/* De miniatuur wordt door de configurator zelf gerenderd: het embleem uit
   het model, los gefotografeerd. Vaste vierkante plek, zodat de tegel niet
   springt zodra het plaatje binnenkomt. */
/* Hoogte én breedte hard gezet, niet via aspect-ratio afgeleid: zo is het
   vierkant een gegeven en geen uitkomst van de omringende layout. */
.cfg-emblem-thumb {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: contain;
    /* niet meeslepen als je de strook met de muis verplaatst */
    -webkit-user-drag: none;
    user-select: none;
}

/* — leeg paneel ————————————————————————————————————————————— */
.cfg-empty {
    width: 100%;
    margin: 0;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.7rem;
    line-height: 1.45;
}

/* ============================================================
   Smal scherm: de vijf knoppen blijven op één regel maar worden
   compacter, en de panelen gaan over de volle breedte in plaats van
   boven hun eigen knop te hangen — daar is simpelweg geen ruimte voor.
   ============================================================ */
@media (max-width: 640px) {
    /* De breedte is hier al geregeld met min(460px, 90vw) in de basisregel;
       hier gaat het alleen nog om de afstand tot de onderrand en om tekst en
       ruimte die op een klein scherm compacter moeten. */
    .cfg-bar {
        bottom: 14px;
    }

    .cfg-tool-btn {
        padding: 7px 3px 6px;
        font-size: 0.5rem;
        letter-spacing: 0.2px;
        gap: 4px;
        /* Hier mag een label wél over twee regels. Dat kan zonder rommel te
           worden omdat de balk op stretch staat: breekt er één af, dan
           groeien de andere mee en blijven de vakken even hoog. */
        white-space: normal;
    }

    .cfg-tool-btn svg {
        width: 17px;
        height: 17px;
    }

    /* Beide panelen even breed als de balk, dus ook 90% van het scherm.

       Op desktop wijken ze daarvan af — het tekstpaneel is 80% en het
       embleempaneel 150% — maar daar is hier de ruimte niet voor. left en
       right op 0 laat ze de balk volgen, wat die breedte ook is; er valt dus
       niets bij te houden als je die 90% ooit verandert. */
    .cfg-tool-panel,
    .cfg-tool-panel--emblems {
        left: 0;
        right: 0;
    }

    .cfg-tool-panel {
        padding: 10px;
    }

    /* De embleemstrook loopt van rand tot rand: de vervaging aan de zijkanten
       doet daar het werk dat padding anders zou doen. */
    .cfg-tool-panel--emblems {
        padding: 10px 0;
    }

    .cfg-emblem-strip {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
    }
}

/* ============================================================
   Aanraakbediening — 90% van de breedte.

   Op 'pointer: coarse' en niet op schermbreedte, en dat is hier het hele
   punt. Een breekpunt op breedte werkt alleen als die breedte klopt, en
   binnen een iframe hoeft dat niet zo te zijn: mist op de pagina eromheen de
   viewport-meta, dan doet een telefoon alsof hij 980 pixels breed is en
   schaalt hij het geheel daarna omlaag. Dan geldt de desktop-opmaak op een
   toestel dat je met je duim bedient.

   Of iets met een vinger wordt bediend staat daar los van en klopt altijd.

   Dit blok staat bewust als laatste in het bestand: zo wint het van de
   regels op schermbreedte hierboven, ongeacht welke daarvan ook aanslaat.
   ============================================================ */
@media (pointer: coarse) {
    .cfg-bar {
        width: 90vw;
    }

    /* Beide panelen even breed als de balk. left en right op 0 laat ze die
       breedte volgen, dus er valt niets bij te houden. */
    .cfg-tool-panel,
    .cfg-tool-panel--emblems {
        left: 0;
        right: 0;
    }

    /* Halve hoogte: van ~116px naar ~58px. 10 + 22 + 6 + 11 + 9.
       Elk onderdeel dat aan de hoogte bijdraagt gaat met dezelfde factor
       mee — ruimte, icoon, tussenruimte en letterhoogte — anders wordt het
       geen kleinere knop maar een platgedrukte.

       Uitgeschreven maten en geen transform: een schaaltransform zou ook de
       randen en de afronding meerekken en de knop wazig maken. */
    .cfg-tool-btn {
        padding: 10px 8px 9px;
        gap: 6px;
        white-space: normal;
    }

    .cfg-tool-btn svg {
        width: 22px;
        height: 22px;
    }

    /* Tekst terug naar leesbaar-maar-compact. Op een telefoon van 393px is
       de balk 354 breed, dus ongeveer 70px per vak; op 11px past "BOTTOM
       RIGHT" daar net op. Past het toch niet, dan breekt het over twee
       regels — white-space staat hierboven op normal — en groeien de andere
       vakken mee doordat de balk op stretch staat. */
    .cfg-tool-btn,
    .cfg-field-note,
    .cfg-emblem {
        font-size: 11px;
    }

    .cfg-panel-label,
    .cfg-field-label,
    .cfg-empty {
        font-size: 12px;
    }

    /* Het invoerveld blijft op 16px, en dat is geen slordigheid.

       16px is de drempel waaronder iOS Safari besluit dat een veld te klein
       is om op te typen: hij zoomt dan de hele pagina in bij het aantikken en
       zoomt daarna niet terug. Alles eromheen mag kleiner, dit niet.

       De hoogte gaat wél omlaag, via minder ruimte boven en onder in plaats
       van via de letter. */
    .cfg-input {
        font-size: 16px;
        padding: 7px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cfg-tool-panel,
    .cfg-tool-btn {
        transition: none;
    }
}