/* =========================================================================
   FREVY Motorsport — demo storefront
   Palet en typografie volgen de huisstijl: zwart, oranje #ff6b00,
   Oswald voor koppen, Rajdhani voor accenten, Inter voor lopende tekst.
   ========================================================================= */

:root {
    --orange: #ff6b00;
    --orange-dark: #cc5600;
    --orange-soft: rgba(255, 107, 0, .14);

    --black: #050505;
    --ink: #0a0a0a;
    --surface: #101010;
    --surface-2: #161616;
    --line: rgba(255, 255, 255, .10);
    --line-strong: rgba(255, 255, 255, .20);

    --text: #f2f2f2;
    --muted: #a5a5a5;
    --dim: #767676;

    --head: 'Oswald', 'Arial Narrow', sans-serif;
    --accent: 'Rajdhani', sans-serif;
    --body: 'Inter', system-ui, -apple-system, sans-serif;

    --container: 1280px;
    --radius: 2px;
    --shadow: 0 20px 60px rgba(0, 0, 0, .55);
    --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--black);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
    font-family: var(--head);
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.1;
    margin: 0 0 .6em;
    text-transform: uppercase;
}

p { margin: 0 0 1em; }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--orange); color: #fff; padding: .6rem 1rem;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------ knoppen */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--accent);
    font-size: .95rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    padding: .85rem 1.6rem; border: 1px solid transparent; border-radius: var(--radius);
    cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--orange-dark); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--orange); color: var(--orange); }
.btn--lg { padding: 1.05rem 2.2rem; font-size: 1rem; }
.btn--block { width: 100%; }

.link-arrow {
    font-family: var(--accent); font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; font-size: .9rem; color: var(--orange);
}
.link-arrow:hover { color: #fff; }

.eyebrow {
    font-family: var(--accent); text-transform: uppercase; letter-spacing: .3em;
    font-size: .8rem; color: var(--orange); margin-bottom: .8rem;
}

/* -------------------------------------------------------------- announcement */

.announcement {
    display: flex; align-items: center; justify-content: center; gap: .75rem;
    background: #fff; color: #111;
    font-family: var(--accent); font-size: .85rem; letter-spacing: .06em;
    padding: .5rem 1rem; text-align: center;
}
.announcement__badge {
    background: var(--orange); color: #fff; text-transform: uppercase;
    font-weight: 700; font-size: .7rem; letter-spacing: .18em; padding: .15rem .5rem;
}

/* -------------------------------------------------------------------- header */

.header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(5, 5, 5, .92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(255, 107, 0, .35);
}
.header__inner {
    width: min(100% - 2.5rem, 1440px); margin-inline: auto;
    display: flex; align-items: center; gap: 1.5rem; height: 76px;
}
.header__logo img { height: 42px; width: auto; mix-blend-mode: screen; }

.header__nav { display: flex; gap: 1.6rem; margin-left: 1rem; flex: 1; }
.header__nav a {
    font-family: var(--accent); font-weight: 600; font-size: .95rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--text);
    padding: .4rem 0; position: relative;
}
.header__nav a::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
    background: var(--orange); transition: right .3s var(--ease);
}
.header__nav a:hover::after, .header__nav a.is-active::after { right: 0; }
.header__nav a.is-active { color: var(--orange); }

.header__actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border: 0; background: transparent; color: var(--text);
    cursor: pointer; position: relative; border-radius: var(--radius);
    transition: color .2s var(--ease), background .2s var(--ease);
}
.icon-btn:hover { color: var(--orange); background: rgba(255, 255, 255, .05); }

.cart-count {
    position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px;
    background: var(--orange); color: #fff; border-radius: 9px;
    font-size: .68rem; font-weight: 700; display: grid; place-items: center; padding: 0 5px;
}

.header__burger { display: none; flex-direction: column; gap: 4px; }
.header__burger span { width: 20px; height: 2px; background: currentColor; display: block; }

/* taalkiezer */
.lang-switch { position: relative; }
.lang-switch__button {
    display: inline-flex; align-items: center; gap: .4rem;
    background: transparent; border: 0; color: var(--text); cursor: pointer;
    font-family: var(--accent); font-size: .9rem; letter-spacing: .08em;
    text-transform: uppercase; padding: .5rem .6rem;
}
.lang-switch__button:hover { color: var(--orange); }
.lang-switch__list {
    position: absolute; right: 0; top: calc(100% + .4rem); min-width: 160px;
    background: var(--surface); border: 1px solid var(--line); list-style: none;
    margin: 0; padding: .3rem; display: none; box-shadow: var(--shadow); z-index: 60;
}
.lang-switch.is-open .lang-switch__list { display: block; }
.lang-switch__list a {
    display: block; padding: .5rem .7rem; font-size: .9rem; font-family: var(--accent);
    letter-spacing: .06em;
}
.lang-switch__list a:hover, .lang-switch__list a.is-active { background: var(--orange-soft); color: var(--orange); }

/* zoekbalk */
.search-bar { border-top: 1px solid var(--line); background: var(--surface); }
.search-bar__form {
    width: min(100% - 2.5rem, 900px); margin-inline: auto;
    display: flex; gap: .6rem; padding: 1rem 0;
}
.search-bar__form input {
    flex: 1; background: var(--black); border: 1px solid var(--line-strong);
    color: var(--text); padding: .85rem 1rem; font-family: var(--body); font-size: 1rem;
}
.search-bar__form input:focus { outline: 2px solid var(--orange); outline-offset: -1px; }

/* mobiele navigatie */
.mobile-nav {
    display: none; flex-direction: column; background: var(--surface);
    border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1.25rem;
}
.mobile-nav a {
    font-family: var(--accent); text-transform: uppercase; letter-spacing: .08em;
    padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.mobile-nav__langs { display: flex; gap: .5rem; padding-top: 1rem; }
.mobile-nav__langs a {
    border: 1px solid var(--line-strong); padding: .35rem .8rem; border-bottom: 1px solid var(--line-strong);
}
.mobile-nav__langs a.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }

/* meldingen */
.flashes { position: fixed; top: 96px; right: 1.5rem; z-index: 80; display: grid; gap: .5rem; }
.flash {
    background: var(--surface-2); border-left: 3px solid var(--orange);
    padding: .9rem 1.2rem; box-shadow: var(--shadow); font-size: .92rem;
    max-width: 360px; animation: slide-in .4s var(--ease);
}
.flash--error { border-left-color: #e03b3b; }
@keyframes slide-in { from { opacity: 0; transform: translateX(20px); } }

/* ---------------------------------------------------------------------- hero */

.hero { position: relative; min-height: min(88vh, 820px); display: grid; place-items: center; overflow: hidden; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .35) 0%, rgba(5, 5, 5, .88) 70%),
        linear-gradient(180deg, rgba(5, 5, 5, .7), rgba(5, 5, 5, .35) 40%, rgba(5, 5, 5, .95));
}
.hero__content { position: relative; text-align: center; padding: 5rem 1.5rem; max-width: 900px; }
.hero__logo {
    width: min(70vw, 460px); margin: 0 auto 1.5rem;
    /* het logobestand heeft een zwarte achtergrond: 'screen' maakt die onzichtbaar */
    mix-blend-mode: screen;
}
.hero__title {
    font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: .06em; margin-bottom: .4rem;
}
.hero__sub { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.15rem); margin-bottom: 2rem; }
.hero__actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; align-items: center; }
.hero__scroll { position: absolute; bottom: 26px; left: 50%; translate: -50% 0; }
.hero__scroll span {
    display: block; width: 1px; height: 46px;
    background: linear-gradient(180deg, transparent, var(--orange));
    animation: pulse 2.4s infinite;
}
@keyframes pulse { 50% { opacity: .25; } }

/* ------------------------------------------------------------------ secties */

.section { padding: 5rem 0; }
.section--alt { background: var(--ink); border-block: 1px solid var(--line); }

.section__head { margin-bottom: 2.5rem; }
.section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.section__title { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: .35rem; }
.section__title::after {
    content: ''; display: block; width: 54px; height: 3px; background: var(--orange); margin-top: .8rem;
}
.section__sub { color: var(--muted); margin: 0; }

.page-title { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 2.5rem 0 1.5rem; }
.page-title__sub { display: block; font-family: var(--body); font-size: 1rem; text-transform: none; color: var(--muted); letter-spacing: 0; margin-top: .5rem; }

/* -------------------------------------------------------- collectie-tegels */

.collection-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 320px; gap: 1rem;
}
.tile {
    position: relative; overflow: hidden; height: 100%; background: var(--surface);
    border: 1px solid var(--line);
}
.tile--wide { grid-column: span 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) brightness(.7); transition: transform .7s var(--ease), filter .5s var(--ease); }
.tile:hover img { transform: scale(1.06); filter: grayscale(0) brightness(.85); }
.tile__body {
    position: absolute; inset: auto 0 0 0; padding: 1.4rem;
    background: linear-gradient(180deg, transparent, rgba(5, 5, 5, .92));
}
.tile__body h3 { margin: 0; font-size: 1.25rem; }
.tile__count { font-family: var(--accent); color: var(--orange); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }

/* ------------------------------------------------------------ productkaart */

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
/* Zonder dit weigert een kaartje smaller te worden dan zijn langste woord en
   loopt het raster op een telefoon een paar pixels buiten het scherm. */
.product-grid > *,
.collection-grid > *, .usp-grid > *, .stats__grid > *, .steps > *,
.pers-grid > *, .pers-opties > *, .optie-grid > *, .pers-intro > *,
.cart > *, .checkout > *, .contact > *, .split > *,
.layout > *, .product > *, .pers-aanvraag > *, .order-page__grid > * {
    min-width: 0;
}
.product-grid--3 { grid-template-columns: repeat(3, 1fr); }
.product-grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
    background: var(--surface); border: 1px solid var(--line);
    display: flex; flex-direction: column;
    transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover { border-color: var(--orange); transform: translateY(-4px); }
.card__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--ease), transform .8s var(--ease); }
.card__media-alt { position: absolute; inset: 0; opacity: 0; }
.card:hover .card__media-alt { opacity: 1; }
.card:hover .card__media img { transform: scale(1.04); }

.badge {
    position: absolute; top: .8rem; left: .8rem; z-index: 2;
    font-family: var(--accent); font-size: .72rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; padding: .25rem .6rem;
    background: var(--orange); color: #fff;
}
.badge--sale { background: #d92c2c; }
.badge--bestseller { background: #fff; color: #111; }

.card__body {
    padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .35rem;
    flex: 1; min-width: 0; overflow-wrap: anywhere;
}
.card__collection { font-family: var(--accent); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin: 0; }
.card__title { font-size: 1.05rem; margin: 0; }
.card__title a:hover { color: var(--orange); }
.card__short { color: var(--muted); font-size: .88rem; margin: .2rem 0 .5rem; }
.card__meta { display: flex; align-items: center; gap: .5rem; margin-top: auto; }
.card__reviews { color: var(--dim); font-size: .8rem; }
.card__price { margin: .4rem 0 0; display: flex; align-items: baseline; gap: .6rem; }

.price { font-family: var(--accent); font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; }
.price--old { color: var(--dim); text-decoration: line-through; font-size: .95rem; font-weight: 500; }
.price--lg { font-size: 1.9rem; color: var(--orange); }

.stars { color: var(--orange); font-size: .85rem; letter-spacing: .1em; }
.stars .star { color: rgba(255, 255, 255, .18); }
.stars .star.is-full, .stars .star.is-half { color: var(--orange); }
.stars .star.is-half { opacity: .55; }

/* ---------------------------------------------------------------- statistiek */

.stats { background: linear-gradient(90deg, var(--orange), var(--orange-dark)); color: #fff; padding: 2.5rem 0; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.stat__value { display: block; font-family: var(--head); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; }
.stat__label { font-family: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; opacity: .9; }

/* --------------------------------------------------------------------- USP's */

.usp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
.usp { border: 1px solid var(--line); padding: 1.6rem 1.3rem; background: var(--surface); transition: border-color .3s var(--ease); }
.usp:hover { border-color: var(--orange); }
.usp svg { color: var(--orange); margin-bottom: .8rem; }
.usp h3 { font-size: 1rem; margin-bottom: .4rem; }
.usp p { color: var(--muted); font-size: .88rem; margin: 0; }

/* ------------------------------------------------------------ designs-promo */

.designs-promo { position: relative; overflow: hidden; padding: 6rem 0; }
.designs-promo__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.designs-promo__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 5, 5, .95) 25%, rgba(5, 5, 5, .55)); }
.designs-promo__content { position: relative; max-width: 620px; }
.designs-promo__content h2 { font-size: clamp(2rem, 4vw, 3rem); }
.designs-promo__lead { color: var(--muted); margin-bottom: 1.8rem; }

/* ------------------------------------------------------------- pagina-hero */

.page-hero { position: relative; min-height: 340px; display: grid; align-items: end; overflow: hidden; }
.page-hero--sm { min-height: 260px; }
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3); }
.page-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 5, .55), rgba(5, 5, 5, .95)); }
.page-hero__content { position: relative; padding: 2.5rem 0; }
.page-hero__content h1 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: .4rem; }
.page-hero__intro { color: var(--muted); max-width: 62ch; margin: 0; }

.breadcrumbs { font-family: var(--accent); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 1rem; }
.breadcrumbs a:hover { color: var(--orange); }
.breadcrumbs span { margin: 0 .3rem; }
.breadcrumbs--page { padding-top: 2rem; }

/* -------------------------------------------------------- collectie-layout */

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem; flex-wrap: wrap; }
.toolbar__count { margin: 0; color: var(--muted); font-family: var(--accent); letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; }
.toolbar__sort { display: flex; align-items: center; gap: .6rem; }
.toolbar__sort label { font-family: var(--accent); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; color: var(--dim); }

select, input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], input[type="number"], textarea {
    background: var(--surface); color: var(--text); border: 1px solid var(--line-strong);
    padding: .7rem .9rem; font-family: var(--body); font-size: .95rem; border-radius: var(--radius);
    width: 100%;
}
select { appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
select:focus, input:focus, textarea:focus { outline: 2px solid var(--orange); outline-offset: -1px; }
.toolbar__sort select { width: auto; min-width: 190px; }

.layout { display: grid; grid-template-columns: 250px 1fr; gap: 2.5rem; align-items: start; }
.sidebar__title { font-size: 1rem; margin-bottom: 1rem; }
.sidebar__list { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--line); }
.sidebar__list a { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .2rem; border-bottom: 1px solid var(--line); font-family: var(--accent); letter-spacing: .04em; font-size: .95rem; }
.sidebar__list a span { color: var(--dim); font-size: .82rem; }
.sidebar__list a:hover, .sidebar__list a.is-active { color: var(--orange); }
.sidebar__help { border: 1px solid var(--line); padding: 1.2rem; background: var(--surface); }
.sidebar__help h3 { font-size: .95rem; }
.sidebar__help p { color: var(--muted); font-size: .85rem; }

.empty { color: var(--muted); padding: 3rem 0; }

/* ------------------------------------------------------------------ product */

.product { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; padding: 2rem 0 4rem; align-items: start; }
.product__gallery { position: sticky; top: 96px; }
.gallery__main { position: relative; background: var(--surface); border: 1px solid var(--line); aspect-ratio: 4 / 5; overflow: hidden; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.thumb { width: 92px; aspect-ratio: 4 / 5; padding: 0; border: 1px solid var(--line); background: none; cursor: pointer; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-active { border-color: var(--orange); }

.product__collection { font-family: var(--accent); text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; color: var(--orange); margin-bottom: .5rem; }
.product__title { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.product__rating { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .88rem; margin-bottom: 1rem; }
.product__price { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1rem; }
.product__short { color: var(--muted); }
.product__stock { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted); font-family: var(--accent); letter-spacing: .06em; text-transform: uppercase; }
.product__stock .dot { width: 8px; height: 8px; border-radius: 50%; background: #3ed660; }
.product__stock.is-low .dot { background: var(--orange); }

.product__form { margin: 1.8rem 0; border-top: 1px solid var(--line); padding-top: 1.6rem; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-family: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; color: var(--muted); margin-bottom: .5rem; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
/* Het keuzerondje zelf is onzichtbaar; het vakje ernaast is de knop. Maat en
   plaats staan er expliciet bij: zonder die eerste stond .field input met
   width:100% erover, en dan werd elk rondje zo breed als het scherm — de
   pagina liep dan duizenden pixels naar rechts door. */
.chip input {
    position: absolute; left: 0; top: 0;
    width: 1px; height: 1px; padding: 0; margin: 0; border: 0;
    opacity: 0; pointer-events: none; appearance: none;
}
.chip { position: relative; display: inline-flex; }
.chip span {
    display: inline-flex; align-items: center; justify-content: center; min-width: 48px;
    padding: .5rem .75rem; border: 1px solid var(--line-strong); cursor: pointer;
    font-family: var(--accent); font-weight: 600; letter-spacing: .06em; font-size: .9rem;
    transition: all .2s var(--ease);
}
.chip span:hover { border-color: var(--orange); color: var(--orange); }
.chip input:checked + span { background: var(--orange); border-color: var(--orange); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }

.product__buy { display: flex; gap: .8rem; align-items: stretch; }
.qty { display: flex; align-items: center; border: 1px solid var(--line-strong); }
.qty button { width: 42px; background: transparent; border: 0; color: var(--text); font-size: 1.2rem; cursor: pointer; }
.qty button:hover { color: var(--orange); }
.qty input { width: 54px; text-align: center; border: 0; background: transparent; padding: .7rem 0; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { appearance: none; margin: 0; }

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
    cursor: pointer; padding: 1rem 0; list-style: none;
    font-family: var(--head); text-transform: uppercase; letter-spacing: .06em; font-size: 1rem;
    display: flex; justify-content: space-between; align-items: center;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; color: var(--orange); font-size: 1.3rem; font-family: var(--body); }
.accordion details[open] summary::after { content: '−'; }
.accordion details > *:not(summary) { margin-bottom: 1rem; color: var(--muted); }
.accordion--lg summary { font-size: 1.1rem; padding: 1.3rem 0; }

.specs { width: 100%; border-collapse: collapse; font-size: .92rem; }
.specs th, .specs td { text-align: left; padding: .6rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs th { width: 40%; color: var(--dim); font-weight: 500; font-family: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; }
.specs td { color: var(--text); }

/* ------------------------------------------------------------- winkelwagen */

.cart { display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; align-items: start; }
.cart-line { display: grid; grid-template-columns: 90px 1fr 90px 110px 30px; gap: 1rem; align-items: center; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.cart-line__media img { width: 90px; height: 112px; object-fit: cover; border: 1px solid var(--line); }
.cart-line__info h2 { font-size: 1.05rem; margin-bottom: .25rem; }
.cart-line__info h2 a:hover { color: var(--orange); }
.cart-line__variant { color: var(--muted); font-size: .85rem; margin: 0; }
.cart-line__sku { color: var(--dim); font-size: .78rem; margin: 0; font-family: var(--accent); letter-spacing: .08em; }
.cart-line__price { font-family: var(--accent); font-size: 1.1rem; font-weight: 700; text-align: right; }
.cart-line__remove { background: none; border: 0; color: var(--dim); font-size: 1.5rem; cursor: pointer; line-height: 1; }
.cart-line__remove:hover { color: var(--orange); }
.cart__lines > .btn { margin-top: 1.5rem; }

.cart__summary { border: 1px solid var(--line); background: var(--surface); padding: 1.6rem; position: sticky; top: 96px; }
.cart__summary h2 { font-size: 1.2rem; }
.cart__summary dl { margin: 0 0 1.4rem; }
.cart__summary dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.cart__summary dt { color: var(--muted); font-size: .92rem; }
.cart__summary dd { margin: 0; font-family: var(--accent); font-weight: 600; }
.cart__summary .is-total dt, .cart__summary .is-total dd { font-size: 1.15rem; color: var(--text); font-weight: 700; }
.cart__summary .is-muted { border-bottom: 0; }
.cart__summary .is-muted dt, .cart__summary .is-muted dd { color: var(--dim); font-size: .82rem; }
.cart__note { color: var(--dim); font-size: .8rem; margin: .8rem 0 1rem; }

.shipping-bar { border: 1px solid var(--line); background: var(--surface); padding: 1rem 1.2rem; margin-bottom: 2rem; }
.shipping-bar p { margin: 0 0 .6rem; font-size: .9rem; color: var(--muted); }
.shipping-bar__track { height: 4px; background: rgba(255, 255, 255, .1); }
.shipping-bar__track span { display: block; height: 100%; background: var(--orange); transition: width .4s var(--ease); }

.empty-state { text-align: center; padding: 5rem 0; }
.empty-state p { color: var(--muted); margin-bottom: 1.5rem; }

/* ---------------------------------------------------------------- designs */

.designs-hero { position: relative; min-height: min(80vh, 700px); display: grid; align-items: center; overflow: hidden; }
.designs-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.designs-hero__overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(5, 5, 5, .95) 30%, rgba(5, 5, 5, .5)); }
.designs-hero__content { position: relative; max-width: 680px; padding: 4rem 0; }
.designs-hero__content h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
.designs-hero__content h1 span { color: var(--orange); }
.designs-hero__lead { color: var(--muted); font-size: 1.05rem; margin-bottom: 2rem; }
.designs-hero__price { font-family: var(--accent); color: var(--muted); letter-spacing: .06em; font-size: .9rem; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
.step { border: 1px solid var(--line); padding: 1.6rem 1.4rem; background: var(--surface); position: relative; overflow: hidden; }
.step__num { font-family: var(--head); font-size: 2.6rem; color: rgba(255, 107, 0, .25); line-height: 1; display: block; margin-bottom: .5rem; }
.step h2 { font-size: 1.05rem; }
.step p { color: var(--muted); font-size: .9rem; margin: 0; }

.masonry { columns: 3; column-gap: 1rem; }
.masonry__item { margin: 0 0 1rem; break-inside: avoid; border: 1px solid var(--line); overflow: hidden; }
.masonry__item img { width: 100%; height: auto; transition: transform .8s var(--ease), filter .5s var(--ease); filter: grayscale(.2); }
.masonry__item:hover img { transform: scale(1.05); filter: grayscale(0); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
/* Niet bijsnijden: de foto houdt zijn eigen verhouding. Met height:100% en
   cover werd een liggende tekening tot een strook uitgerekt. */
.split__media img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.split__body h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.split__body > p { color: var(--muted); }
.designs-form { margin-top: 1.5rem; }

/* ------------------------------------------------------------- tekstpagina */

.prose { max-width: 76ch; }
.prose__lead { font-size: 1.15rem; color: var(--text); border-left: 3px solid var(--orange); padding-left: 1.2rem; margin-bottom: 2rem; }
.prose h2 { font-size: 1.35rem; margin-top: 2.2rem; }
.prose p, .prose li { color: var(--muted); }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; }
.prose strong { color: var(--text); }
.prose a { color: var(--orange); }

.faq { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start; }
.faq__aside { border: 1px solid var(--line); background: var(--surface); padding: 1.6rem; }
.faq__aside h2 { font-size: 1.1rem; }
.faq__aside p { color: var(--muted); font-size: .9rem; }

/* ------------------------------------------------------------------ contact */

.contact { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; }
.contact__form h2, .contact__info h2 { font-size: 1.3rem; }
.contact__list { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem; margin: 0 0 2rem; }
.contact__list dt { font-family: var(--accent); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--dim); }
.contact__list dd { margin: 0; font-size: .95rem; overflow-wrap: anywhere; }
/* Op een telefoon past "ONDERNEMINGSNUMMER" naast een e-mailadres niet meer
   op één regel; dan het label boven de waarde. */
@media (max-width: 560px) {
    .contact__list { grid-template-columns: 1fr; gap: 0; }
    .contact__list dt { margin-top: .8rem; }
    .contact__list dt:first-of-type { margin-top: 0; }
}
.contact__list a { color: var(--orange); }
.contact__image { width: 100%; object-fit: cover; border: 1px solid var(--line); }

.account { display: grid; grid-template-columns: 420px 1fr; gap: 3rem; align-items: center; }
.account:has(.account__panel) { grid-template-columns: 1fr; }
.account__card { border: 1px solid var(--line); background: var(--surface); padding: 2rem; }
.account__note { color: var(--dim); font-size: .85rem; }
.account__image { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--line); }

.search-page__form { display: flex; gap: .6rem; max-width: 620px; margin-bottom: 2.5rem; }

.notfound { text-align: center; padding: 6rem 0; }
.notfound__code { font-family: var(--head); font-size: clamp(5rem, 18vw, 12rem); line-height: .9; color: rgba(255, 107, 0, .25); margin: 0; }
.notfound p { color: var(--muted); }

/* --------------------------------------------------------------- nieuwsbrief */

.newsletter { background: var(--ink); border-top: 1px solid var(--line); padding: 3.5rem 0; }
.newsletter__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.newsletter__title { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.newsletter__body { color: var(--muted); margin: 0; }
.newsletter__form { display: flex; gap: .6rem; }
.newsletter__form input { flex: 1; }

/* -------------------------------------------------------------------- footer */

.footer { background: var(--black); border-top: 1px solid var(--line); padding: 3.5rem 0 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer__brand img { height: 46px; width: auto; margin-bottom: 1rem; mix-blend-mode: screen; }
.footer__brand p { color: var(--muted); font-size: .9rem; margin: 0 0 .4rem; }
.footer__brand a:hover { color: var(--orange); }
.footer__meta { color: var(--dim) !important; font-size: .82rem !important; margin-top: 1rem !important; }
.footer__socials { display: flex; gap: 1rem; margin-top: 1.2rem; }
.footer__socials a { font-family: var(--accent); letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; color: var(--muted); }
.footer__socials a:hover { color: var(--orange); }
.footer__col h3 { font-size: .95rem; margin-bottom: 1rem; }
.footer__col a { display: block; color: var(--muted); font-size: .9rem; padding: .3rem 0; }
.footer__col a:hover { color: var(--orange); }
.footer__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1.5rem; }
.footer__bottom p { color: var(--dim); font-size: .82rem; margin: 0; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
    .header__nav { display: none; }
    .header__burger { display: flex; }
    .header__logo { order: -1; }
    .mobile-nav.is-open { display: flex; }
    .product-grid, .product-grid--3, .product-grid--4 { grid-template-columns: repeat(3, 1fr); }
    .usp-grid { grid-template-columns: repeat(3, 1fr); }
    .collection-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 260px; }
    .tile--wide { grid-column: span 2; }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .layout { grid-template-columns: 1fr; }
    .sidebar__list { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; }
    .sidebar__list li { flex: 0 0 auto; }
    .sidebar__list a { border: 1px solid var(--line); padding: .5rem .9rem; }
    .sidebar__help { display: none; }
    .cart { grid-template-columns: 1fr; }
    .faq, .contact, .account, .split, .newsletter__inner { grid-template-columns: 1fr; }
    .masonry { columns: 2; }
    .product { grid-template-columns: 1fr; }
    .product__gallery { position: static; }
    .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .section { padding: 3.5rem 0; }
    .product-grid, .product-grid--3, .product-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .usp-grid, .stats__grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: 1fr; }
    .collection-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
    .tile--wide { grid-column: span 1; }
    .masonry { columns: 1; }
    .flashes { top: auto; bottom: 1rem; right: 1rem; left: 1rem; }
    .flash { max-width: none; }
    .cart-line { grid-template-columns: 70px 1fr 30px; grid-template-areas: 'media info remove' 'media qty price'; }
    .cart-line__media { grid-area: media; }
    .cart-line__info { grid-area: info; }
    .cart-line__qty { grid-area: qty; }
    .cart-line__price { grid-area: price; text-align: left; }
    .cart-line__remove { grid-area: remove; align-self: start; }
    .cart-line__media img { width: 70px; height: 88px; }
    .newsletter__form, .search-page__form, .search-bar__form { flex-direction: column; }
    .card__short { display: none; }
    .footer__grid { grid-template-columns: 1fr; }
    .announcement { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}

/* ==========================================================================
   Winkelwagen, afrekenen, bestelling en account
   Toegevoegd bij het beheergedeelte: kortingscode, checkout en klantaccount.
   ========================================================================== */

/* ------------------------------------------------------------ kortingscode */

.cart__code { margin: 0 0 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.cart__code label {
    display: block; font-family: var(--accent); font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; font-size: .8rem;
    color: var(--dim); margin-bottom: .5rem;
}
.cart__code-row { display: flex; gap: .5rem; }
.cart__code-row input {
    flex: 1; min-width: 0; background: var(--surface-2); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: .7rem .8rem; font-family: inherit; font-size: .95rem;
}
.cart__code-row input:focus { outline: none; border-color: var(--orange); }
.cart__code-row .btn { padding: .7rem 1rem; font-size: .82rem; }
.cart__code-active { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; font-size: .95rem; }
.cart__code-active strong { color: var(--orange); font-family: var(--accent); letter-spacing: .08em; }
.cart__code-remove {
    background: none; border: none; color: var(--dim); cursor: pointer;
    font-size: .8rem; text-decoration: underline; padding: 0; font-family: inherit;
}
.cart__code-remove:hover { color: var(--orange); }

.cart__summary dl .is-discount dd, .checkout__summary dl .is-discount dd,
.order-totals .is-discount dd { color: var(--orange); }

/* --------------------------------------------------------------- afrekenen */

.checkout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 960px) { .checkout { grid-template-columns: 1fr 380px; } }

.checkout__block { margin-bottom: 2rem; }
.checkout__block h2 {
    font-size: 1.15rem; margin-bottom: 1rem; padding-bottom: .6rem;
    border-bottom: 1px solid var(--line);
}
.checkout__block h2 + .choice-row { margin-top: 0; }

.field { margin-bottom: 1rem; }
.field label, .checkout__main label {
    display: block; font-family: var(--accent); font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; font-size: .78rem;
    color: var(--dim); margin-bottom: .35rem;
}
.field label .opt { text-transform: none; letter-spacing: 0; opacity: .8; }
.field input, .field textarea, .field select {
    width: 100%; background: var(--surface-2); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: .7rem .8rem; font-family: inherit; font-size: .95rem;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--orange); }
.field textarea { resize: vertical; }
.field__hint { font-size: .8rem; color: var(--dim); margin: .3rem 0 0; }

.field-row { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 620px) {
    .field-row { grid-template-columns: 1fr 1fr; }
    .field-row--3 { grid-template-columns: 1fr 1fr 1fr; }
}

.choice-row { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-bottom: 1.6rem; }
@media (min-width: 560px) { .choice-row { grid-template-columns: 1fr 1fr; } }
.choice-row--pay { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.choice {
    display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
    border: 1px solid var(--line); background: var(--surface); padding: .9rem 1rem;
    transition: border-color .2s var(--ease);
}
.choice:hover { border-color: var(--line-strong); }
.choice input { accent-color: var(--orange); margin-top: .25rem; }
.choice input:checked ~ span strong { color: var(--orange); }
.choice:has(input:checked) { border-color: var(--orange); }
.choice span { display: block; }
.choice strong {
    display: block; font-family: var(--accent); font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; font-size: .92rem;
    text-transform: none;
}
.choice em { font-style: normal; font-size: .85rem; color: var(--muted); }

.checkout__demo {
    background: var(--surface-2); border-left: 2px solid var(--orange);
    padding: .8rem 1rem; font-size: .88rem; color: var(--muted); margin: 1.4rem 0;
}
.checkout__back { display: inline-block; margin-top: 1rem; }

.checkout__summary { background: var(--surface); border: 1px solid var(--line); padding: 1.5rem; }
.checkout__summary h2 { font-size: 1.1rem; margin-bottom: 1rem; }
.checkout__lines { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.checkout__lines li {
    display: grid; grid-template-columns: 56px 1fr auto; gap: .8rem;
    align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.checkout__lines img { width: 56px; height: 70px; object-fit: cover; background: var(--surface-2); }
.checkout__lines strong { display: block; font-size: .9rem; font-weight: 500; }
.checkout__lines span { font-size: .82rem; color: var(--muted); }
.checkout__line-total { font-family: var(--accent); font-weight: 600; white-space: nowrap; }
.checkout__summary dl { margin: 0; }
.checkout__summary dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; font-size: .95rem; }
.checkout__summary dl dt, .checkout__summary dl dd { margin: 0; }
.checkout__summary dl .is-total {
    border-top: 1px solid var(--line-strong); margin-top: .4rem; padding-top: .8rem;
    font-family: var(--accent); font-size: 1.15rem;
}
.checkout__summary dl .is-total dd { color: var(--orange); }
.checkout__summary dl .is-muted { color: var(--dim); font-size: .82rem; }

/* ------------------------------------------------------------- bestelling */

.order-page__head { max-width: 60ch; margin-bottom: 2rem; }
.order-page__head p { color: var(--muted); }
.order-page__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .order-page__grid { grid-template-columns: 1fr 340px; } }

.order-card { background: var(--surface); border: 1px solid var(--line); padding: 1.5rem; }
.order-card h2 { font-size: 1.05rem; margin-bottom: 1rem; }
.order-card h2 + * { margin-top: 0; }
.order-card .btn { margin-bottom: 1rem; }

.order-lines { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.order-lines li {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.order-lines strong { font-weight: 500; }
.order-lines__opts { display: block; font-size: .82rem; color: var(--dim); }

.order-totals, .order-meta { margin: 0 0 1.5rem; }
.order-totals > div, .order-meta > div {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .4rem 0; font-size: .95rem;
}
.order-totals dt, .order-totals dd, .order-meta dt, .order-meta dd { margin: 0; }
.order-meta dt { color: var(--dim); }
.order-totals .is-total {
    border-top: 1px solid var(--line-strong); margin-top: .4rem; padding-top: .8rem;
    font-family: var(--accent); font-size: 1.15rem;
}
.order-totals .is-total dd { color: var(--orange); }
.order-totals .is-muted { color: var(--dim); font-size: .82rem; }
.order-address { color: var(--muted); line-height: 1.8; margin-bottom: 1.5rem; }

/* ----------------------------------------------------------------- account */

.account__panel { background: var(--surface); border: 1px solid var(--line); padding: 2rem; }
.account__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.account__head h1 { font-size: 1.8rem; margin: 0; }
.account__mail { color: var(--muted); font-size: .92rem; margin: .3rem 0 0; }
.account__discount { background: var(--orange-soft); border-left: 2px solid var(--orange); padding: .7rem 1rem; margin-bottom: 1.5rem; font-size: .92rem; }
.account__discount strong { color: var(--orange); }
.account__subtitle { font-size: 1.1rem; margin: 2rem 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.account__empty { color: var(--muted); }
.account__or { font-size: 1.1rem; margin: 2rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

.account__orders { width: 100%; border-collapse: collapse; }
.account__orders th {
    text-align: left; font-family: var(--accent); font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; font-size: .75rem;
    color: var(--dim); padding: 0 .7rem .6rem; border-bottom: 1px solid var(--line);
}
.account__orders td { padding: .8rem .7rem; border-bottom: 1px solid var(--line); font-size: .92rem; }
.account__orders tr:last-child td { border-bottom: none; }
@media (max-width: 640px) {
    .account__orders thead { display: none; }
    .account__orders tr { display: grid; grid-template-columns: 1fr 1fr; padding: .6rem 0; border-bottom: 1px solid var(--line); }
    .account__orders td { border: none; padding: .2rem .3rem; }
}

/* ==========================================================================
   Premium look: één beeldbehandeling over alle collectiefoto's
   Zo hangen foto's uit verschillende bronnen toch aan elkaar: ontzadigd,
   donker, met een oranje gloed die bij het merk hoort.
   ========================================================================== */

.tile img,
.page-hero > img,
.pers-card__media img {
    filter: grayscale(.55) contrast(1.12) brightness(.82) saturate(.8);
    transition: filter .5s var(--ease), transform .7s var(--ease);
}
.tile:hover img { filter: grayscale(.2) contrast(1.15) brightness(.92) saturate(1); }

/* De oranje toets ligt over het beeld, niet erin — dus altijd dezelfde tint,
   welke foto er ook onder hangt. */
.tile::after {
    content: '';
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(to top, rgba(5, 5, 5, .88) 0%, rgba(5, 5, 5, .25) 45%, rgba(5, 5, 5, .05) 100%),
        linear-gradient(115deg, rgba(255, 107, 0, .22) 0%, rgba(255, 107, 0, 0) 55%);
    transition: opacity .45s var(--ease);
}
.tile:hover::after { opacity: .82; }
.tile__body { z-index: 2; }

/* Een dunne oranje streep boven het bijschrift, die bij hover uitloopt. */
.tile__body::before {
    content: '';
    display: block; width: 2.2rem; height: 2px;
    background: var(--orange); margin-bottom: .7rem;
    transition: width .45s var(--ease);
}
.tile:hover .tile__body::before { width: 5.5rem; }

@media (prefers-reduced-motion: reduce) {
    .tile img, .tile::after, .tile__body::before { transition: none; }
}

/* ------------------------------------------------------------------- hero */

.hero__eyebrow {
    font-family: var(--accent); font-weight: 600; font-size: .82rem;
    letter-spacing: .34em; text-transform: uppercase; color: var(--orange);
    margin: 0 0 .9rem;
}
.hero__categories {
    font-family: var(--accent); font-weight: 500; font-size: .78rem;
    letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
    margin: 1.2rem 0 0; max-width: 46ch; margin-inline: auto; line-height: 2;
}
@media (max-width: 720px) {
    .hero__eyebrow { letter-spacing: .22em; font-size: .74rem; }
    .hero__categories { letter-spacing: .14em; font-size: .7rem; }
}

/* ------------------------------------------------- keuzeblokken collectie */

.section--tight { padding-bottom: 0; }

.optie-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.optie {
    background: var(--surface); border: 1px solid var(--line);
    border-top: 2px solid var(--orange); padding: 1.5rem;
    display: flex; flex-direction: column; gap: .5rem;
}
.optie h3 { font-size: 1.15rem; margin: 0; }
.optie p { color: var(--muted); font-size: .93rem; margin: 0; }
.optie__prijs {
    font-family: var(--accent) !important; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; font-size: .9rem;
    color: var(--text) !important; margin-top: auto !important; padding-top: .6rem;
}
.optie .link-arrow { margin-top: .2rem; }

/* --------------------------------------------------------- personalisatie */

.pers__lead { max-width: 62ch; margin-bottom: 2.5rem; }

/* De inleiding met de tekening ernaast. De tekst krijgt de meeste ruimte en
   allebei beginnen ze bovenaan — anders zweeft een korte alinea midden in een
   hoge rij en valt er een gat naast. De foto wordt niet bijgesneden. */
.pers-intro { display: grid; grid-template-columns: 1fr; gap: 1.8rem; align-items: start; margin-bottom: 3.5rem; }
@media (min-width: 900px) {
    .pers-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 3.5rem; }
}
.pers-intro .pers__lead { margin-bottom: 0; }
.pers-intro__foto { margin: 0; border: 1px solid var(--line); background: var(--surface); }
.pers-intro__foto img { display: block; width: 100%; height: auto; }

.pers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.pers-card {
    background: var(--surface); border: 1px solid var(--line);
    padding: 2rem 1.6rem; display: flex; flex-direction: column; gap: .7rem;
    transition: border-color .3s var(--ease), transform .3s var(--ease);
}
a.pers-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.pers-card__icon {
    color: var(--orange); display: inline-flex;
    width: 3.2rem; height: 3.2rem; align-items: center; justify-content: center;
    border: 1px solid var(--line-strong); margin-bottom: .4rem;
}
a.pers-card:hover .pers-card__icon { border-color: var(--orange); }
.pers-card h2 { font-size: 1.2rem; margin: 0; }
.pers-card p { color: var(--muted); font-size: .93rem; margin: 0; flex: 1; }

.steps--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .steps--3 { grid-template-columns: 1fr; } }

.pers__cta {
    margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
}
.pers__note { color: var(--dim); font-size: .88rem; max-width: 54ch; margin: 0; }

/* ---- aanvraagpagina per categorie ---- */

.pers-opties { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.pers-optie {
    background: var(--surface); border: 1px solid var(--line);
    padding: 2rem 1.6rem; position: relative; overflow: hidden;
}
.pers-optie__num {
    font-family: var(--head); font-size: 3.4rem; line-height: 1;
    color: var(--line-strong); position: absolute; top: .6rem; right: 1rem;
}
.pers-optie h2 { font-size: 1.1rem; margin: 0 0 .6rem; position: relative; }
.pers-optie p { color: var(--muted); font-size: .93rem; margin: 0; position: relative; }

.pers-aanvraag { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .pers-aanvraag { grid-template-columns: 1fr 1.1fr; gap: 4rem; } }
.pers-aanvraag__intro h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .8rem; }
.pers-aanvraag__intro > p { color: var(--muted); }
.pers-aanvraag__form .rij-2 { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 700px) { .pers-aanvraag__form .rij-2 { grid-template-columns: 1fr 1fr; } }
.pers-aanvraag__form .hint { color: var(--dim); font-size: .85rem; margin: .4rem 0 0; }

.pers__terug { margin-top: 2rem; }

.split__actions { margin-top: 1.6rem; }

/* --------------------------------------------------------- FreVyDesigns */

.designs__cost {
    max-width: 66ch; color: var(--muted); font-size: 1rem;
    border-left: 2px solid var(--orange); padding-left: 1.2rem; margin-bottom: 2.5rem;
}

/* ==========================================================================
   Afgeschermde website — de pagina die bezoekers zien tot de lancering
   ========================================================================== */

.slot-body { margin: 0; }

.slot { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 3rem 1.5rem; }
.slot__video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(.6) brightness(.5) contrast(1.1);
}
.slot__overlay {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(5, 5, 5, .55) 0%, rgba(5, 5, 5, .93) 75%),
        linear-gradient(120deg, rgba(255, 107, 0, .16) 0%, rgba(255, 107, 0, 0) 60%);
}

.slot__inner { position: relative; z-index: 1; text-align: center; max-width: 34rem; }
.slot__logo { width: min(300px, 70vw); margin: 0 auto 2rem; mix-blend-mode: screen; height: auto; }
.slot__eyebrow {
    font-family: var(--accent); font-weight: 600; font-size: .8rem;
    letter-spacing: .34em; text-transform: uppercase; color: var(--orange); margin: 0 0 .8rem;
}
.slot__title { font-size: clamp(1.7rem, 5vw, 2.6rem); margin: 0 0 .9rem; }
.slot__body { color: var(--muted); margin: 0 0 2rem; }

.slot__fout {
    background: rgba(255, 77, 77, .12); border-left: 2px solid #ff4d4d;
    color: #ff8a8a; padding: .7rem 1rem; font-size: .9rem; margin: 0 0 1.2rem; text-align: left;
}

.slot__form { display: flex; gap: .5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.slot__form input {
    flex: 1; min-width: 180px; background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    color: var(--text); font-family: inherit; font-size: 1rem; padding: .9rem 1rem;
}
.slot__form input:focus { outline: none; border-color: var(--orange); background: rgba(255, 255, 255, .1); }
.slot__form input::placeholder { color: var(--dim); }

.slot__contact { color: var(--dim); font-size: .88rem; margin: 0 0 2rem; }
.slot__contact a { color: var(--orange); }

.slot__langs { display: flex; gap: 1rem; justify-content: center; }
.slot__langs a {
    font-family: var(--accent); font-weight: 600; font-size: .8rem;
    letter-spacing: .14em; color: var(--dim);
}
.slot__langs a.is-active, .slot__langs a:hover { color: var(--orange); }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* Uitverkocht ------------------------------------------------------------ */

.product__stock.is-out { color: var(--dim); }
.product__stock.is-out .dot { background: var(--dim); }
.product__soldout {
    background: var(--surface); border: 1px solid var(--line);
    border-left: 2px solid var(--dim); padding: 1.2rem 1.4rem;
    color: var(--muted); display: flex; flex-direction: column;
    gap: .6rem; align-items: flex-start; margin: 1.5rem 0;
}
.badge--out { background: rgba(255, 255, 255, .14); color: var(--text); }

/* Betaalstatus op de bevestigingspagina --------------------------------- */

.order-paid, .order-unpaid {
    padding: .9rem 1.1rem; margin: 0 0 1.2rem; font-size: .92rem;
    border-left: 2px solid;
}
.order-paid { background: rgba(62, 207, 122, .12); border-color: #3ecf7a; color: #7ee2a6; }
.order-unpaid { background: rgba(255, 176, 32, .12); border-color: #ffb020; color: #ffca6b; }
.order-card form { margin-bottom: 1.2rem; }

/* ------------------------------------------------- verzendland en contact */

.cart__land {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    padding: 0 0 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.cart__land label {
    font-family: var(--accent); text-transform: uppercase; letter-spacing: .1em;
    font-size: .8rem; color: var(--dim);
}
.cart__land select { flex: 1; min-width: 10rem; }

.checkout__land .hint { color: var(--dim); font-size: .85rem; margin: .4rem 0 0; }

.contact__note {
    color: var(--dim); font-size: .88rem; margin: -1rem 0 2rem;
    border-left: 2px solid var(--orange); padding-left: .9rem;
}

/* Productfoto die er nog niet is. Beter een rustig vlak dan een kapot plaatje. */
.gallery__leeg {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 9 / 11; background: var(--surface-2);
    border: 1px dashed var(--line-strong); color: var(--dim);
}
.card__leeg {
    display: block; width: 100%; aspect-ratio: 4 / 5;
    background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.regel__leeg {
    display: block; width: 100%; aspect-ratio: 4 / 5;
    background: var(--surface-2); border: 1px solid var(--line);
}

/* Op smalle telefoons (360 px en minder) duwden de taalkiezer en de drie
   pictogrammen samen de balk een paar pixels buiten het scherm, waardoor je
   de hele site naar rechts kon schuiven. Iets minder ruimte lost dat op. */
@media (max-width: 420px) {
    .header__inner { padding-left: .8rem; padding-right: .8rem; }
    .header__actions { gap: .1rem; }
    .icon-btn { width: 36px; height: 36px; }
    .lang-switch__button { padding-left: .3rem; padding-right: .3rem; font-size: .72rem; }
}

/* Op de smalste telefoons (320 px) is er domweg te weinig plaats: smallere
   kantlijn, kleinere pictogrammen, en de bestelknop onder het aantal. */
@media (max-width: 380px) {
    .container { width: min(100% - 1.6rem, var(--container)); }
    .usp-grid, .stats__grid { grid-template-columns: 1fr; }
    .header__actions { gap: 0; }
    .icon-btn { width: 30px; height: 30px; }
    .lang-switch__button { padding-left: .15rem; padding-right: .15rem; }
    .product__buy { flex-wrap: wrap; }
    .product__buy .btn { flex: 1 1 100%; }
}

/* Film bij een product, onder de foto's. */
.product__video { margin: 1rem 0 0; }
.product__video video {
    width: 100%; display: block; background: var(--surface);
    border: 1px solid var(--line);
}
.product__video figcaption {
    font-family: var(--accent); text-transform: uppercase; letter-spacing: .1em;
    font-size: .75rem; color: var(--dim); margin-top: .5rem;
}

/* Een miniatuur die niet bij de gekozen kleur hoort, valt weg. */
.gallery__thumbs .thumb[hidden] { display: none; }

/* Een maat die bij de gekozen kleur niet bestaat, valt weg. */
.chips .chip[hidden] { display: none; }

/* ---- onderverdeling binnen een collectie ---- */

.subnav { display: flex; flex-wrap: wrap; gap: .5rem; }
.subnav__item {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem .95rem; border: 1px solid var(--line-strong);
    font-family: var(--accent); font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; font-size: .82rem; color: var(--text);
    transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.subnav__item span { font-size: .72rem; color: var(--dim); }
.subnav__item:hover { border-color: var(--orange); color: var(--orange); }
.subnav__item.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }
.subnav__item.is-active span { color: rgba(255, 255, 255, .75); }

/* Dezelfde onderverdeling in de zijbalk, ingesprongen onder de collectie. */
.sidebar__subs { list-style: none; margin: .3rem 0 .6rem; padding: 0 0 0 .9rem; border-left: 1px solid var(--line); }
.sidebar__subs a { display: flex; justify-content: space-between; gap: .6rem; padding: .3rem 0; font-size: .88rem; color: var(--muted); }
.sidebar__subs a:hover, .sidebar__subs a.is-active { color: var(--orange); }
.sidebar__subs span { color: var(--dim); font-size: .78rem; }

/* De merkenrij onder de onderverdeling. */
.subnav--merk { margin-top: .8rem; align-items: center; }
.subnav__kop {
    font-family: var(--accent); text-transform: uppercase; letter-spacing: .1em;
    font-size: .78rem; color: var(--dim); margin-right: .2rem; align-self: center;
}
.subnav--merk .subnav__item { padding: .42rem .8rem; font-size: .78rem; }

/* ---- uitdrukkelijk akkoord bij het afrekenen (wettelijk verplicht) ---- */
/* Wint van de opmaak voor veldlabels (.checkout__main label): dit is lopende
   tekst die de klant moet kunnen lezen, geen kopje boven een invulveld. */
.checkout__main .checkout__akkoord {
    display: flex; gap: .8rem; align-items: flex-start;
    margin: 1.4rem 0 1.2rem; font-family: var(--body); font-weight: 400; font-size: .95rem; line-height: 1.55;
    text-transform: none; letter-spacing: 0; color: var(--text); cursor: pointer;
}
.checkout__akkoord input {
    flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: .15rem 0 0;
    accent-color: var(--orange);
}
.checkout__akkoord a { color: var(--orange); text-decoration: underline; }

/* ---- de herroepingsknop ---- */
.herroep { max-width: 720px; }
.herroep__lead { margin-bottom: 2rem; }
.herroep__form .rij-2 { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 700px) { .herroep__form .rij-2 { grid-template-columns: 1fr 1fr; } }
.herroep__form .hint { color: var(--dim); font-size: .85rem; margin: .4rem 0 0; }
.herroep__custom {
    background: var(--surface-2); border-left: 2px solid var(--orange);
    padding: .8rem 1rem; font-size: .88rem; color: var(--muted); margin: .4rem 0 1.4rem;
}
.herroep__submit-hint { margin-top: .8rem; }
.herroep__model { margin-top: 2.2rem; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.herroep__model .link-arrow { display: block; margin-top: .6rem; }
.herroep__ref { color: var(--muted); }
.order__herroep { display: block; margin: 1rem 0 .4rem; font-size: .88rem; color: var(--muted); text-decoration: underline; }
.order__herroep:hover { color: var(--orange); }
.order__herroepen { margin: 1rem 0 .4rem; font-size: .88rem; color: var(--orange); }