/* ---------------------------------------------------------------------
   Eigen aanvullingen op het ontwerp
   ---------------------------------------------------------------------
   Het ontwerp kende geen talenkiezer, geen meldingen en geen echte
   afrekenpagina. Wat hier staat is in dezelfde taal gehouden: dezelfde
   kleuren, dezelfde rust, zo min mogelijk nieuwe vormen.
   --------------------------------------------------------------------- */

/* --- Talenkiezer -------------------------------------------------- */
.moof-talen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.moof-talen a {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.55;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.moof-talen a:hover,
.moof-talen a:focus-visible { opacity: 1; }
.moof-talen a.is-active { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

.mobile-nav-panel .moof-talen { margin-top: 28px; }

/* Op de onderste regel van de voet staat hij in het gelid met de rest.
   Die regel heeft in het ontwerp drie vakken; met de talenkiezer erbij
   zijn het er vier, anders valt "terug naar boven" naar de volgende
   regel en wordt de voet hoger dan het ontwerp. */
.footer-bar--talen {
    grid-template-columns: 1fr auto auto auto 1fr;
}

.footer-cookieknop {
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.2s;
}

.footer-cookieknop:hover,
.footer-cookieknop:focus-visible { opacity: 1; }

.footer-bar .moof-talen {
    margin-top: 0;
    gap: 12px;
    justify-content: center;
}

@media (max-width: 720px) {
    .footer-bar--talen {
        grid-template-columns: 1fr;
    }
}

/* --- Meldingen ----------------------------------------------------- */
.moof-meldingen {
    position: fixed;
    inset-block-start: 96px;
    inset-inline-end: 24px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(380px, calc(100vw - 48px));
}

.moof-melding {
    margin: 0;
    padding: 12px 16px;
    border-radius: 6px;
    background: var(--ink, #2a1b13);
    color: var(--paper, #fff7ec);
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 18px 40px rgba(42, 27, 19, 0.22);
    animation: moof-melding-in 0.4s ease both;
}

.moof-melding--fout { background: #8e2318; }
.moof-melding--succes { background: #33503c; }

@keyframes moof-melding-in {
    from { opacity: 0; transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .moof-melding { animation: none; }
}

/* --- De panelen ---------------------------------------------------- */
/* Het ontwerp toonde altijd maar een paneel tegelijk; bij ons staan ze
   alle drie in de pagina en wisselt javascript ze om. */
.panel-layer[hidden] { display: none; }
.store-panel:not([open]) { display: none; }

/* --- De tas -------------------------------------------------------- */
.bag-line-config { display: block; }

/* --- Formulieren die het ontwerp niet kende ------------------------ */
.moof-veld {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.moof-veld input,
.moof-veld select,
.moof-veld textarea {
    padding: 12px 14px;
    border: 1px solid var(--line, rgba(88, 57, 38, 0.2));
    border-radius: 4px;
    background: var(--paper, #fff7ec);
    color: inherit;
    font: inherit;
}

.moof-veld input:focus-visible,
.moof-veld select:focus-visible,
.moof-veld textarea:focus-visible {
    outline: 2px solid var(--cocoa, #5c3925);
    outline-offset: 1px;
}

.moof-veld--fout input,
.moof-veld--fout select,
.moof-veld--fout textarea { border-color: #8e2318; }

.moof-veldfout {
    color: #8e2318;
    font-size: 12px;
}

.moof-raster {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.moof-raster--breed { grid-template-columns: 1fr; }

@media (max-width: 640px) {
    .moof-raster { grid-template-columns: 1fr; }
}

/* --- De samensteller -------------------------------------------------
   Het ontwerp gebruikte knoppen voor de keuzes. Bij ons zijn het
   radioknoppen in een label, zodat de keuze ook zonder javascript
   doorkomt. Hieronder krijgen die labels precies het uiterlijk dat het
   ontwerp aan zijn knoppen gaf. */
.customizer-options label {
    align-items: center;
    background: transparent;
    border: 1px solid rgba(88, 57, 38, 0.22);
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.75rem;
    justify-content: center;
    min-height: 43px;
    padding: 8px 12px;
    transition: background 260ms ease, border-color 260ms ease, color 260ms ease, transform 260ms ease;
}

.customizer-options label:hover,
.customizer-options label:focus-within {
    border-color: var(--cocoa);
    color: var(--cocoa);
    transform: translateY(-1px);
}

.customizer-options label.is-selected {
    background: var(--cocoa);
    border-color: var(--cocoa);
    color: var(--paper);
}

.customizer-options--colors label {
    gap: 8px;
    justify-content: flex-start;
    min-width: 0;
    text-align: left;
}

.customizer-options--colors label.is-selected .customizer-swatch {
    border-color: rgba(255, 247, 236, 0.7);
}

.customizer-options label small {
    margin-inline-start: 6px;
    opacity: 0.75;
    font-size: 0.68rem;
}

/* --- Afrekenen ------------------------------------------------------- */
.moof-betaalwijzen {
    display: grid;
    gap: 10px;
}

.moof-betaalwijze {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--line, rgba(88, 57, 38, 0.2));
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease;
}

.moof-betaalwijze:hover { border-color: var(--cocoa, #5c3925); }

.moof-betaalwijze:has(input:checked) {
    border-color: var(--cocoa, #5c3925);
    background: rgba(92, 57, 37, 0.05);
}

.moof-betaalwijze span { display: flex; flex-direction: column; gap: 2px; }
.moof-betaalwijze small { color: var(--muted-brown, #765c48); font-size: 12px; }

.moof-veld--vink {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.moof-veld--vink span { display: block; }

/* Het ontwerp zet elk label in het afrekenformulier onder elkaar, in
   kleine hoofdletters: goed voor een veld met zijn naam erboven, niet
   voor een vinkje met een zin ernaast. Hier staat het vinkje voor de
   tekst, op dezelfde regel, in gewone letters. */
.checkout-form label.moof-veld--vink {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    color: var(--ink);
    font-size: 0.9rem;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.5;
    cursor: pointer;
}

.checkout-form label.moof-veld--vink input[type=checkbox] {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 2px 0 0;
}

.checkout-form label.moof-veld--vink:has(.moof-veldfout) { flex-wrap: wrap; }
.checkout-form label.moof-veld--vink .moof-veldfout { flex-basis: 100%; }

/* Een vinkje is geen tekstveld. De regel hierboven geeft elk invoerveld
   in .moof-veld opvulling en een rand; bij een vinkje of rondje maakt dat
   er een uitgerekt vakje van met losse randjes eromheen. */
.moof-veld input[type=checkbox],
.moof-veld input[type=radio] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    accent-color: var(--cocoa, #5c3925);
}
.moof-veld--vink a { color: inherit; text-underline-offset: 3px; }

.moof-foutblok {
    margin: 0 0 24px;
    padding: 16px 18px;
    border-radius: 6px;
    background: rgba(142, 35, 24, 0.08);
    border: 1px solid rgba(142, 35, 24, 0.25);
    color: #8e2318;
    font-size: 14px;
}

.moof-foutblok ul { margin: 8px 0 0; padding-inline-start: 18px; }

.checkout-total--eind {
    font-size: 1.1rem;
    padding-top: 14px;
    border-top: 1px solid var(--line, rgba(88, 57, 38, 0.2));
}

/* --- Beelden die hun vak vullen ------------------------------------
   Het ontwerp legt deze foto's over hun hele kader heen en snijdt ze bij;
   het kader zelf staat al op zijn plek (absoluut, met een eigen maat).
   Bij ons stond er een gewone <img> in met een eigen verhouding, waardoor
   het kader onderaan leeg bleef. Alleen de foto hoeft dus bijgesteld; aan
   het kader raken wij niet, anders klapt het dicht. */
.lamps-overview-image-link > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- De taferelen op Inspiration -----------------------------------
   Elk tafereel zit in een omhulsel, zodat het javascript er één kan
   laten zien. Dat omhulsel mag de opmaak niet in de weg zitten: met
   display:contents doen de foto en het bijschrift alsof het er niet is,
   precies zoals in het ontwerp. */
[data-moof-tafereel] { display: contents; }
[data-moof-tafereel][hidden] { display: none; }

/* --- Mijn account ---------------------------------------------------
   Het ontwerp kent geen accountpagina's; de winkel heeft ze wel nodig.
   Zij zijn daarom opgebouwd uit wat het ontwerp al doet: de kop van een
   juridische pagina, dunne lijnen, veel lucht en dezelfde letters. Zo
   valt het gedeelte niet uit de toon. */

.moof-account-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px) 8px;
    border-bottom: 1px solid color-mix(in oklab, var(--ink, #27170f) 12%, transparent);
}

.moof-account-nav a {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.55;
    text-decoration: none;
    padding-bottom: 12px;
    border-bottom: 1px solid transparent;
    transition: opacity 0.2s ease;
}

.moof-account-nav a:hover,
.moof-account-nav a:focus-visible { opacity: 1; }

.moof-account-nav a.is-active {
    opacity: 1;
    border-bottom-color: currentColor;
}

.moof-account {
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px) clamp(64px, 9vw, 120px);
    display: grid;
    gap: clamp(24px, 3vw, 40px);
}

.moof-account--twee { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.moof-paneel {
    border: 1px solid color-mix(in oklab, var(--ink, #27170f) 12%, transparent);
    padding: clamp(24px, 3vw, 36px);
    display: grid;
    gap: 18px;
    align-content: start;
}

.moof-paneel > h2 {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 300;
    letter-spacing: -0.01em;
    margin: 0;
}

.moof-paneel-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.moof-paneel-leeg {
    opacity: 0.6;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

/* Lijsten van bestellingen en adressen: geen echte tabel, maar rijen
   met dezelfde dunne lijn die het ontwerp overal gebruikt. */
.moof-rijen { display: grid; gap: 0; }

.moof-rij {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 20px;
    padding: 18px 0;
    border-top: 1px solid color-mix(in oklab, var(--ink, #27170f) 12%, transparent);
    align-items: center;
}

.moof-rij:first-child { border-top: 0; }

/* Een regel met de foto van de lamp ervoor: in de lijst met bestellingen
   en in de bestelling zelf. */
.moof-rij--beeld { grid-template-columns: auto 1fr auto; column-gap: 18px; }
.moof-rij--beeld .moof-rij-bij { grid-column: auto; }
.moof-rij--beeld > div:not(.moof-rij-acties) { min-width: 0; display: grid; gap: 6px; }

.moof-rij-beeld {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    background: color-mix(in oklab, var(--ink, #27170f) 6%, transparent);
}

.moof-rij-beelden { display: flex; gap: 6px; align-items: center; text-decoration: none; color: inherit; }
.moof-rij-meer { font-size: 12px; opacity: 0.6; }
.moof-rij-namen { font-size: 14px; }

@media (max-width: 640px) {
    .moof-rij--beeld { grid-template-columns: auto 1fr; }
    .moof-rij--beeld > :last-child { grid-column: 1 / -1; }
    .moof-rij-beeld { width: 56px; height: 56px; }
    .moof-rij-beelden .moof-rij-beeld:nth-of-type(n+2), .moof-rij-meer { display: none; }
}

.moof-rij strong { font-weight: 500; }

.moof-rij-bij {
    grid-column: 1 / -1;
    font-size: 13px;
    opacity: 0.6;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.moof-rij-acties {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.moof-stempel {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 4px 10px;
    opacity: 0.7;
    white-space: nowrap;
}

/* Inloggen, registreren en wachtwoord vergeten: één smalle kolom. */
.moof-poort {
    max-width: 560px;
    margin: 0 auto;
    padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 48px) clamp(64px, 9vw, 120px);
    display: grid;
    gap: 22px;
}

.moof-poort-voet {
    font-size: 14px;
    line-height: 1.7;
    opacity: 0.7;
    margin: 0;
}

.moof-poort-voet a { color: inherit; }

.moof-knoppenrij {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

/* Een knop die eruitziet als een link, voor "annuleren" naast opslaan. */
.moof-stille-knop {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.moof-stille-knop:hover { opacity: 1; }

/* --- De brief in de voet -------------------------------------------
   Eén regel: een veld en een pijl. Zo blijft de voet even hoog als in
   het ontwerp en valt de inschrijving niet over de rest heen. */
.moof-brief {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    margin-top: 12px;
    border-bottom: 1px solid color-mix(in oklab, currentColor 30%, transparent);
    padding-bottom: 6px;
}

.moof-brief input {
    flex: 1;
    background: none;
    border: 0;
    padding: 4px 0;
    font: inherit;
    font-size: 14px;
    color: inherit;
}

.moof-brief input::placeholder { color: inherit; opacity: 0.5; }
.moof-brief input:focus { outline: none; }

.moof-brief button {
    background: none;
    border: 0;
    padding: 4px;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    display: inline-flex;
    transition: opacity 0.2s ease;
}

.moof-brief button:hover,
.moof-brief button:focus-visible { opacity: 1; }

/* --- Een link op papier ---------------------------------------------
   .story-link uit het ontwerp is room-wit: hij staat in de donkere
   vlakken. In het accountgedeelte is de achtergrond papier, dus daar
   moet dezelfde link de inktkleur aannemen. Verder is hij gelijk:
   kleinkapitaal, een dunne streep eronder en de pijl die meebeweegt. */
.moof-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-height: 42px;
    padding: 8px 0 11px;
    margin-top: 0;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in oklab, currentColor 35%, transparent);
    transition: border-color 0.22s ease, gap 0.22s ease;
}

.moof-link:hover,
.moof-link:focus-visible {
    border-color: currentColor;
    gap: 22px;
}

.moof-link svg { width: 14px; height: 14px; }

/* --- Talenkiezer in de kop ------------------------------------------
   De winkel staat in tien talen, maar het ontwerp heeft geen plek voor
   een keuzelijst. Deze knop staat naast zoeken en de tas, toont de taal
   waarin je leest, en klapt dezelfde soort lijst uit als het menu onder
   "Lamps". */
.taalknop { position: relative; display: flex; }

.taalknop__knop {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
    padding: 0 12px;
    height: 44px;
    border-radius: 999px;
    color: inherit;
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
}

.taalknop__knop svg { width: 17px; height: 17px; stroke-width: 1.45px; }

.taalknop__lijst {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 30;
    display: grid;
    min-width: 208px;
    padding: 8px;
    background: #fff7ecfa;
    border: 1px solid #5839262e;
    box-shadow: 0 18px 45px #2a1b1324;
}

.taalknop__lijst[hidden] { display: none; }

.taalknop__lijst a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 11px;
    color: var(--ink);
    font-size: 0.78rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.taalknop__lijst a em {
    font-style: normal;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    color: var(--muted-brown);
}

.taalknop__lijst a:hover,
.taalknop__lijst a:focus-visible,
.taalknop__lijst a.is-active { background: #58392614; color: var(--cocoa); }
.taalknop__lijst a.is-active em { color: var(--cocoa); }

/* In de kop boven een donkere hero staat de knop licht. */
.site-header--hero .taalknop__knop { color: #fffaf1eb; }

@media (max-width: 860px) {
    /* Op een telefoon staat de keuze in het uitklapmenu; twee keer
       dezelfde lijst maakt de kop alleen maar voller. */
    .taalknop { display: none; }
}


/* --- De vraag om te mogen meten --------------------------------------
   Zolang de bezoeker niets gekozen heeft, laadt er niets van Google.
   De balk staat onderaan, smal, en houdt de kleuren van de winkel. */
.cookiebalk {
    position: fixed;
    inset: auto 16px 16px;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
    max-width: 860px;
    margin: 0 auto;
    padding: 20px 24px;
    background: #fff7ecfa;
    border: 1px solid #5839262e;
    box-shadow: 0 18px 45px #2a1b1329;
    color: var(--ink);
}

.cookiebalk[hidden] { display: none; }

.cookiebalk__kop {
    margin: 0 0 4px;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted-brown);
}

.cookiebalk__tekst p { margin: 0; font-size: 0.85rem; line-height: 1.55; max-width: 52ch; }
.cookiebalk__tekst a { color: var(--cocoa); text-underline-offset: 3px; }

.cookiebalk__knoppen { display: flex; gap: 10px; flex-wrap: wrap; }

.cookiebalk__ja,
.cookiebalk__nee {
    min-height: 40px;
    padding: 0 20px;
    font: inherit;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.22s, color 0.22s, border-color 0.22s;
}

.cookiebalk__ja { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.cookiebalk__ja:hover, .cookiebalk__ja:focus-visible { background: var(--cocoa); border-color: var(--cocoa); }
.cookiebalk__nee { background: none; color: var(--cocoa); border: 1px solid #58392661; }
.cookiebalk__nee:hover, .cookiebalk__nee:focus-visible { background: #58392614; }

@media (max-width: 560px) {
    .cookiebalk { inset: auto 10px 10px; padding: 18px; }
    .cookiebalk__knoppen { width: 100%; }
    .cookiebalk__ja, .cookiebalk__nee { flex: 1; justify-content: center; }
}

/* --- Het hulpvenster -------------------------------------------------
   Rechtsonder, klein en stil: een knop die opengaat naar een gesprek.
   De maten volgen de rest van de winkel: rechte hoeken, papier en inkt. */
.hulp {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 70;
    font-size: 0.9rem;
    /* De knop staat onderaan, het venster klapt erboven open: naar beneden
       is geen ruimte meer. */
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 12px;
}

.hulp__knop {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    background: var(--ink);
    color: var(--paper);
    border: 0;
    font: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 14px 34px #2a1b1333;
    transition: background 0.22s, transform 0.22s;
}

.hulp__knop:hover, .hulp__knop:focus-visible { background: var(--cocoa); transform: translateY(-1px); }
.hulp__knop svg { width: 17px; height: 17px; stroke-width: 1.5px; }

.hulp__venster {
    display: flex;
    flex-direction: column;
    width: min(360px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 120px));
    background: var(--paper);
    border: 1px solid #5839262e;
    box-shadow: 0 24px 60px #2a1b1338;
    /* Komt het verzoekformulier erbij, dan groeit het venster; verder dan
       het scherm mag het niet, dus schuift de inhoud mee. */
    overflow-y: auto;
}

.hulp__venster[hidden] { display: none; }

.hulp__kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    background: var(--ink);
    color: var(--paper);
}

.hulp__naam { margin: 0; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; }
.hulp__stand { margin: 6px 0 0; font-size: 0.78rem; color: #fff7ecb8; line-height: 1.45; }
.hulp__kop button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }

.hulp__gesprek {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 90px;
}

.hulp__regel { max-width: 85%; padding: 10px 13px; line-height: 1.5; font-size: 0.86rem; }
.hulp__regel--klant { align-self: flex-end; background: var(--ink); color: var(--paper); }
.hulp__regel--bot, .hulp__regel--winkel { align-self: flex-start; background: var(--linen); color: var(--ink); }
.hulp__regel--winkel { border-left: 2px solid var(--cocoa); }

.hulp__suggesties { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 12px; }
.hulp__suggesties[hidden] { display: none; }

.hulp__suggesties button {
    padding: 8px 12px;
    background: none;
    border: 1px solid #58392640;
    color: var(--cocoa);
    font: inherit;
    font-size: 0.76rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}

.hulp__suggesties button:hover, .hulp__suggesties button:focus-visible { background: #58392612; }

.hulp__invoer { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid #E3D8CA; }
.hulp__invoer input { flex: 1; min-height: 40px; padding: 0 12px; border: 1px solid #58392633; background: #fff; font: inherit; font-size: 0.86rem; }
.hulp__invoer button { width: 40px; background: var(--ink); color: var(--paper); border: 0; cursor: pointer; }

.hulp__verzoek { display: grid; gap: 8px; padding: 14px 20px; border-top: 1px solid #E3D8CA; background: var(--linen); }
.hulp__verzoek[hidden] { display: none; }
.hulp__verzoek-kop { margin: 0 0 2px; font-size: 0.82rem; color: var(--cocoa); line-height: 1.5; }
.hulp__verzoek input { min-height: 40px; padding: 0 12px; border: 1px solid #58392633; background: #fff; font: inherit; font-size: 0.86rem; }
.hulp__verstuur { min-height: 42px; background: var(--ink); color: var(--paper); border: 0; font: inherit; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }

.hulp__mens {
    padding: 11px 20px 16px;
    background: none;
    border: 0;
    color: var(--muted-brown);
    font: inherit;
    font-size: 0.76rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    text-align: left;
}

.hulp__mens[hidden] { display: none; }

@media (max-width: 560px) {
    /* Op een telefoon alleen het icoon, klein in de hoek: een balk over de
       hele breedte stond voor de knoppen onderaan de pagina. */
    .hulp { right: 12px; bottom: 12px; }
    .hulp__knop { width: 46px; height: 46px; padding: 0; justify-content: center; }
    .hulp__knop span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .hulp__venster { max-height: calc(100vh - 90px); }
}

/* --- Hoe ver de lamp is ----------------------------------------------
   Een rustige balk met de fasen eronder: de klant ziet in één oogopslag
   waar zijn lamp is zonder dat het een dashboard wordt. */
.productiestand .moof-paneel-kop { align-items: baseline; }

.productiestand__percentage {
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--cocoa);
    letter-spacing: -0.02em;
}

.productiestand__fase { margin: 0 0 14px; color: var(--ink); font-size: 1rem; }

.productiestand__balk {
    position: relative;
    height: 6px;
    background: #58392621;
    overflow: hidden;
}

.productiestand__balk span {
    display: block;
    height: 100%;
    background: var(--cocoa);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.productiestand__klaar { margin: 12px 0 0; color: var(--muted-brown); font-size: 0.88rem; }

.productiestand__stappen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-brown);
}

.productiestand__stappen li { opacity: 0.45; }
.productiestand__stappen li.is-gedaan { opacity: 0.75; }
.productiestand__stappen li.is-gedaan span::before { content: "— "; }
.productiestand__stappen li.is-nu { opacity: 1; color: var(--ink); }
.productiestand__stappen li.is-nu span::before { content: "● "; color: var(--cocoa); }

@media (max-width: 560px) {
    .productiestand__stappen { gap: 6px 12px; font-size: 0.68rem; }
}

/* --- Productpagina: één streep onder de prijs ------------------------
   De prijsregel had een streep onderaan en het blok eronder een streep
   bovenaan; samen leek dat een dubbele lijn. De streep van het blok
   eronder blijft staan, die van de prijsregel gaat weg. */
.product-price-row { border-bottom: 0; padding-bottom: 0; }

/* --- Uitverkocht in een langere taal ---------------------------------
   Het vakje van een kleur stond op één regel vast. "Sold out" past daar
   nog wel in, "Uitverkocht" en "Ausverkauft" niet: die liepen het vakje
   uit. Het woord krijgt nu zijn eigen regel onder de naam. */
.customizer-options label.is-sold-out {
    flex-wrap: wrap;
    row-gap: 4px;
    align-items: center;
}

.customizer-options label.is-sold-out .customizer-sold-out {
    flex: 0 0 100%;
    width: 100%;
    overflow-wrap: anywhere;
}

/* De naam van een kleur mag afbreken; anders duwt een lang woord als
   "Nostalgisch bruin" het vakje uit zijn kolom. */
.customizer-options label > span { min-width: 0; overflow-wrap: anywhere; }

/* --- Contactpagina ---------------------------------------------------
   Drie korte blokken met de harde gegevens, daaronder het formulier.
   Alles in dezelfde rust als de rest: papier, inkt, rechte hoeken. */
.contact-blokken {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 32px 40px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 64px) 8px;
}

.contact-blok__tekst { margin: 12px 0 0; color: var(--ink); line-height: 1.8; font-size: 0.95rem; }
.contact-blok__tekst a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.contact-blok__klein { margin: 10px 0 0; color: var(--muted-brown); font-size: 0.84rem; line-height: 1.6; }

.contact-blok__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--cocoa);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
}

.contact-blok__link:hover, .contact-blok__link:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

.contact-stip {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #9a8878;
}

.contact-stip.is-open { background: #5f8b5f; }

.contact-tekst { padding-top: 8px; }

.contact-formulier {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px) clamp(60px, 8vw, 96px);
}

.contact-formulier__kop { border-top: 1px solid var(--line); padding-top: clamp(28px, 4vw, 44px); }
.contact-formulier__kop h2 { margin: 10px 0 0; font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 300; letter-spacing: -0.02em; }
.contact-formulier__kop p { margin: 12px 0 0; color: var(--muted-brown); max-width: 52ch; line-height: 1.7; }

.contact-velden {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    margin-top: clamp(28px, 4vw, 40px);
}

.contact-veld--breed { grid-column: 1 / -1; }
.contact-veld label { display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-brown); }
.contact-veld__los { margin-left: 8px; letter-spacing: 0.04em; text-transform: none; opacity: 0.8; }

.contact-veld input,
.contact-veld textarea {
    width: 100%;
    margin-top: 8px;
    padding: 13px 14px;
    background: #fff;
    border: 1px solid #58392633;
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
}

.contact-veld input:focus, .contact-veld textarea:focus { outline: 2px solid var(--cocoa); outline-offset: 1px; }
.contact-veld.is-fout input, .contact-veld.is-fout textarea { border-color: #a4503f; }
.contact-veld small { display: block; margin-top: 6px; color: #a4503f; font-size: 0.8rem; }
.contact-veld p.contact-veld__los { margin: 10px 0 0; color: var(--muted-brown); font-size: 0.82rem; }

/* Het lokvakje voor robots staat buiten beeld, maar niet op display:none:
   een robot slaat een verborgen veld soms juist over. */
.contact-val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 720px) {
    .contact-velden { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------
   De foto's bij een lamp
   -----------------------------------------------------------------
   In het ontwerp staat de foto waar je naar kijkt vol in beeld en de
   rest een tikje terug. Dat werkte alleen niet: niets wees ooit een
   foto aan, dus stond de hele rij op .82 en leek de pagina half
   geladen. Wij draaien het om. Een foto is altijd volledig zichtbaar;
   de foto waar je bent, krijgt de nadruk - en zonder javascript staat
   alles gewoon goed. */

.product-stack-card.is-visible,
.product-detail-media {
    opacity: 1;
}

.product-stack-card.is-visible {
    transform: scale(0.992);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s;
}

.product-stack-card.is-visible.is-active {
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .product-stack-card.is-visible,
    .product-stack-card.is-visible.is-active { transform: none; transition: none; }
}

/* -----------------------------------------------------------------
   Maatwerk op de productpagina
   -----------------------------------------------------------------
   De gewone keuzes staan meteen op de pagina. Wat daaronder zit - de
   kap van de fitting, het materiaal van de kabel, een eigen lengte -
   kiest lang niet iedereen. Dat staat achter een schakelaar, zodat de
   pagina rustig blijft voor wie gewoon een lamp wil. */

.customizer-maatwerk {
    margin-top: clamp(18px, 2.4vw, 28px);
    border: 1px solid #58392626;
    background: #fffdf8;
}

.customizer-maatwerk.is-open { border-color: #58392659; }

.customizer-maatwerk-knop { padding: 14px 16px; }

.moof-schakelaar {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}

.moof-schakelaar input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* Het schuifje zelf; een vierkant blokje dat naar rechts loopt. */
.moof-schakelaar i {
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
    border: 1px solid #58392659;
    background: #f3ece1;
    position: relative;
    transition: background 0.25s, border-color 0.25s;
}

.moof-schakelaar i::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--cocoa, #583926);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.moof-schakelaar input:checked + i { background: var(--cocoa, #583926); border-color: var(--cocoa, #583926); }
.moof-schakelaar input:checked + i::after { background: #fffdf8; transform: translateX(20px); }
.moof-schakelaar input:focus-visible + i { outline: 2px solid var(--cocoa, #583926); outline-offset: 2px; }

.moof-schakelaar span { display: block; }
.moof-schakelaar strong { display: block; font-weight: 400; font-size: 0.95rem; }
.moof-schakelaar small { display: block; margin-top: 2px; color: var(--muted-brown); font-size: 0.8rem; }

.customizer-maatwerk-velden {
    display: grid;
    gap: clamp(16px, 2vw, 24px);
    padding: 4px 16px 18px;
    border-top: 1px solid #58392626;
}

.customizer-maatwerk-velden[hidden] { display: none; }

/* Het maatwerk met de foto ernaast: links de ophanging, rechts de keuzes.
   De foto blijft in beeld staan terwijl de klant door de keuzes loopt. */
.customizer-maatwerk-keuzes { display: grid; gap: clamp(16px, 2vw, 24px); min-width: 0; }

.customizer-maatwerk-velden--beeld {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    align-items: start;
    padding-top: 16px;
}

.customizer-voorbeeld { margin: 0; position: sticky; top: 96px; border: 1px solid #58392626; background: #eee7dc; }
.customizer-voorbeeld img { display: block; width: 100%; height: auto; }

.customizer-maatwerk-velden--beeld fieldset.is-in-beeld legend { color: var(--cocoa, #583926); }

/* Een rij kleuren, ingeklapt tot een keuzelijst. */
.customizer-uitklap { position: relative; max-width: 260px; }

.customizer-uitklap summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 40px 0 14px;
    border: 1px solid #58392633;
    background: #fffdf8;
    font-size: 0.86rem;
    cursor: pointer;
    list-style: none;
    position: relative;
}

.customizer-uitklap summary::-webkit-details-marker { display: none; }

.customizer-uitklap summary::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid var(--cocoa, #583926);
    border-bottom: 1.5px solid var(--cocoa, #583926);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s;
}

.customizer-uitklap[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.customizer-uitklap summary:focus-visible { outline: 2px solid var(--cocoa, #583926); outline-offset: 2px; }
.customizer-uitklap summary .customizer-swatch { flex: none; }

.customizer-uitklap > .customizer-options {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid #58392659;
    background: #fffdf8;
    box-shadow: 0 14px 30px #27170f1f;
}

.customizer-uitklap > .customizer-options label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 40px;
    padding: 6px 10px;
    border: 0;
    text-align: left;
}

/* In de lijst is de gekozen kleur een zachte regel, geen donker blok
   zoals bij de knoppen: de tekst blijft donker. */
.customizer-uitklap > .customizer-options label,
.customizer-uitklap > .customizer-options label.is-selected { color: var(--ink, #27170f); }
.customizer-uitklap > .customizer-options label.is-selected { background: #58392614; }
.customizer-uitklap > .customizer-options label:hover { background: #5839260d; }

@media (max-width: 720px) {
    /* Op een telefoon blijft de foto ernaast staan, smaller: onder elkaar
       zou hij uit beeld zijn op het moment dat de klant een keuze aanraakt. */
    .customizer-maatwerk-velden--beeld { grid-template-columns: 34% minmax(0, 1fr); column-gap: 12px; padding-inline: 12px; }
    .customizer-voorbeeld { top: 84px; }
    .customizer-uitklap { max-width: none; }
    .customizer-uitklap summary { padding-left: 10px; padding-right: 32px; }
}

/* De toelichting bij een keuze, en het plaatje dat laat zien wat wij
   met 'boven' en 'onder' bedoelen. */
.customizer-uitleg { margin: 0 0 8px; color: var(--muted-brown); font-size: 0.82rem; }
.customizer-uitleg-beeld { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 0 10px; }

/* Het invulvak voor een eigen maat. */
.customizer-maat { margin-top: 10px; }
.customizer-maat.is-ingeklapt { display: none; }

.customizer-maat-veld {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #58392659;
    background: #fff;
    padding: 0 12px 0 0;
}

.customizer-maat-veld input {
    width: 7.5rem;
    padding: 11px 12px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
}

.customizer-maat-veld input:focus { outline: 2px solid var(--cocoa, #583926); outline-offset: -2px; }
.customizer-maat-veld i { font-style: normal; color: var(--muted-brown); font-size: 0.85rem; }

.customizer-maat-grens { margin: 8px 0 0; color: var(--muted-brown); font-size: 0.78rem; line-height: 1.5; }

/* De knop 'eigen maat' staat tussen de vaste maten en hoort er ook zo
   uit te zien. */
.customizer-eigen { cursor: pointer; }

/* De regel onderin de hero was een knop en is nu een link naar de lamp;
   hij hoort er hetzelfde uit te blijven zien. */
.home-hero-object-select { text-decoration: none; }