/* Veluwe Modelspoor — basisstijl. Handgeschreven CSS, geen build-stap nodig. */

/* Lettertypen zelf gehost (variabele fonts, alleen het Latijnse subset): scheelt twee externe
   verbindingen en een render-blokkerende stylesheet van Google Fonts. */
@font-face {
    font-family: 'Big Shoulders Display';
    font-style: normal;
    font-weight: 600 900;
    font-display: swap;
    src: url('../fonts/big-shoulders-display-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
}

:root {
    --color-bg: #f2f3f6;
    --color-surface: #ffffff;
    --color-text: #171a20;
    --color-text-muted: #5b6472;
    --color-border: #e1e4e9;
    --color-primary: #2b5d91;
    --color-primary-dark: #1e477a;
    --color-primary-contrast: #ffffff;
    --color-accent: #2f5233;
    --color-danger: #b3261e;
    --color-success: #2f6b34;
    --color-available: #3f8c52;
    --color-available-dark: #316a3f;
    --color-reserved: #b4791e;
    --color-sold: #7a828f;
    /* Eén bewust rood accentje (Märklin-rood), alleen voor het "Tijdperk III"-stipje in de
       hero-tekening — verder nergens gebruikt. */
    --color-marklin-red: #cc0000;
    --color-tint: #e3eaf1;
    --color-navy: #16365c;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(23, 26, 32, 0.07), 0 1px 2px rgba(23, 26, 32, 0.05);
    --scrim: rgba(15, 17, 20, 0.52);
    --max-width: 1180px;
    --font-display: "Big Shoulders Display", "Segoe UI", sans-serif;
    --font-body: "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

* { box-sizing: border-box; }
/* Zonder dit wint elke `display: flex/grid`-regel van het `hidden`-attribuut (bijv. het
   winkelwagenformulier bij een lege winkelwagen, het prijsveld in het beheerformulier). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }

.wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-inline: 16px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Header ---------- */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0; z-index: 20;
}
.site-header__bar {
    display: flex; align-items: center; justify-content: space-between;
    padding-block: 12px; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--color-text); flex-shrink: 0; white-space: nowrap; }
.brand:hover { text-decoration: none; }

.brand__mark { width: 28px; height: 28px; flex-shrink: 0; }
.brand__text { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: .01em; }

.main-nav { display: flex; gap: 20px; align-items: center; }
.main-nav a { color: var(--color-text-muted); font-weight: 500; font-size: .9rem; transition: color .15s ease; }
.main-nav a:hover { color: var(--color-primary); text-decoration: none; }
.main-nav a.wishlist-link { color: var(--color-text); }
.wishlist-link {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px;
    padding: 7px 8px 7px 14px; color: var(--color-text); font-weight: 600; box-shadow: var(--shadow);
}
.wishlist-link svg { width: 17px; height: 17px; stroke: var(--color-primary); color: var(--color-primary); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wishlist-link.has-items { border-color: var(--color-primary); }
.wishlist-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--color-border); color: var(--color-text); font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: .74rem; font-weight: 600;
}
.wishlist-link.has-items .wishlist-count { background: var(--color-primary); color: #fff; }

.nav-toggle {
    display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--color-text); display: block; }

.wishlist-link--quick { display: none; } /* alleen op de telefoon, zie de media query hieronder */

/* Zoekbalk: op desktop in de header, op de telefoon als aparte balk eronder (.mobile-search-band). */
.header-search, .mobile-search { position: relative; margin: 0; }
.header-search { flex: 1 1 auto; min-width: 0; max-width: 400px; margin-inline: auto; }
.header-search input, .mobile-search input {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 40px; padding: 0 44px 0 16px;
    font: inherit; font-size: .92rem; color: var(--color-text);
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px;
    transition: border-color .15s, box-shadow .15s;
}
.header-search input::placeholder, .mobile-search input::placeholder { color: var(--color-text-muted); }
.header-search input:focus, .mobile-search input:focus {
    outline: none; border-color: var(--color-primary); background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(43, 93, 145, .18);
}
.header-search button, .mobile-search button {
    position: absolute; top: 0; right: 0; width: 44px; height: 40px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 0 999px 999px 0; cursor: pointer;
}
.header-search svg, .mobile-search svg {
    width: 18px; height: 18px; fill: none; stroke: var(--color-text-muted); stroke-width: 2; stroke-linecap: round;
    transition: stroke .15s;
}
.header-search button:hover svg, .mobile-search button:hover svg,
.header-search input:focus + button svg, .mobile-search input:focus + button svg { stroke: var(--color-primary); }
.mobile-search-band { display: none; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding-block: 12px; }

/* Snelzoek-dropdown onder de zoekbalk (main.js, setupQuickSearch()): een paar resultaten
   met foto terwijl je typt, overal op de site (niet alleen op de catalogus). */
.quick-search {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(23, 26, 32, .18); overflow-y: auto; max-height: 70vh;
}
.quick-search.is-open { display: block; }
.quick-search__item {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    color: var(--color-text); border-bottom: 1px solid var(--color-border);
}
.quick-search__item:last-of-type { border-bottom: 0; }
.quick-search__item:hover, .quick-search__item:focus-visible { background: var(--color-bg); text-decoration: none; }
.quick-search__item img, .quick-search__noimg {
    width: 42px; height: 42px; object-fit: cover; border-radius: 6px; flex-shrink: 0;
    background: #e7e9ee; display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.quick-search__info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.quick-search__title {
    font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quick-search__price { font-size: .82rem; color: var(--color-primary-dark); font-variant-numeric: tabular-nums; }
.quick-search__all {
    display: block; text-align: center; padding: 11px 12px; font-size: .86rem; font-weight: 700;
    color: var(--color-primary); background: var(--color-bg);
}
.quick-search__all:hover { background: var(--color-tint); text-decoration: none; }
.quick-search__empty { margin: 0; padding: 14px 12px; color: var(--color-text-muted); font-size: .86rem; }

@media (max-width: 720px) {
    .header-search { display: none; }
    .mobile-search-band { display: block; }
    .mobile-search input { font-size: 1rem; } /* 16px: iOS zoomt anders in bij focus */
    .nav-toggle { display: flex; }
    .main-nav {
        position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface);
        flex-direction: column; align-items: stretch; gap: 0; border-bottom: 1px solid var(--color-border);
        display: none;
    }
    .main-nav.is-open { display: flex; }
    .main-nav a { padding: 14px 16px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); }
    .main-nav a:hover { color: var(--color-text); }
    /* Op de telefoon staat de winkelwagen altijd zichtbaar in de balk (.wishlist-link--quick),
       naast het menu — daar vliegt een toegevoegd item naartoe. In het uitklapmenu is hij
       daarom niet nog een keer nodig. */
    .main-nav .wishlist-link { display: none; }
    .wishlist-link--quick { display: inline-flex; margin-left: auto; }
}

.wishlist-link.cart-bump { animation: cartBump .5s ease; }
@keyframes cartBump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Miniatuur die bij "in winkelwagen" van de advertentie naar het winkelwagenicoon vliegt. */
.fly-thumb {
    position: fixed; z-index: 1000; pointer-events: none; border-radius: 12px;
    background: var(--color-primary) center / cover no-repeat;
    box-shadow: 0 6px 18px rgba(23, 26, 32, .28);
}
/* Korte bevestiging onderin beeld, met een link naar de winkelwagen. */
.cart-toast {
    position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
    transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
    display: flex; align-items: center; gap: 14px; white-space: nowrap;
    background: var(--color-text); color: #fff; padding: 11px 18px; border-radius: 999px;
    font-size: .9rem; font-weight: 500; box-shadow: 0 6px 20px rgba(23, 26, 32, .3);
    transition: opacity .2s ease, transform .2s ease;
}
.cart-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cart-toast a { color: #fff; font-weight: 700; text-decoration: underline; }

/* ---------- Categorieën ---------- */
.category-nav { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.category-nav__inner {
    display: flex; gap: 8px; padding-block: 12px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
}
.category-nav__inner::-webkit-scrollbar { display: none; }
.category-pill {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 6px 15px 6px 6px; border-radius: 999px; border: 1px solid var(--color-border);
    font-size: .85rem; font-weight: 600; color: var(--color-text-muted); white-space: nowrap;
    transition: border-color .15s, color .15s, background-color .15s;
}
.category-pill:hover { border-color: var(--color-text-muted); color: var(--color-text); text-decoration: none; }
.category-pill__icon {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-tint); transition: background-color .15s;
}
.category-pill svg { width: 15px; height: 15px; stroke: var(--color-primary); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
.category-pill.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.category-pill.is-active .category-pill__icon { background: rgba(255,255,255,.18); }
.category-pill.is-active svg { stroke: #fff; }

/* ---------- Footer ---------- */
.site-footer {
    margin-top: 24px;
    background: var(--color-navy);
    color: rgba(255, 255, 255, .78);
    font-size: .92rem;
}
.site-footer a { color: rgba(255, 255, 255, .88); }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer p { margin: 0 0 .6em; }
.site-footer__grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 32px 40px;
    padding-block: 48px 36px;
}
.site-footer .site-footer__brand {
    display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
    font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; letter-spacing: .01em; color: #fff;
}
.site-footer .site-footer__brand:hover { text-decoration: none; }
.site-footer__brand svg { width: 30px; height: 30px; flex-shrink: 0; }
.site-footer__about p { max-width: 34ch; color: rgba(255, 255, 255, .7); }
.site-footer__title {
    margin: 0 0 14px; font-family: var(--font-body); font-size: .74rem; font-weight: 700; line-height: 1.2;
    letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer__location { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; }
.site-footer__location svg {
    width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: #fff;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 16px;
    font-size: .82rem; color: rgba(255, 255, 255, .6);
}
@media (max-width: 860px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; padding-block: 36px 28px; }
    .site-footer__about, .site-footer__contact { grid-column: 1 / -1; }
}

/* ---------- Hero / sections ---------- */
.hero { padding-block: 20px 12px; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; }
@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
    font-family: var(--font-body); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--color-primary); font-weight: 600;
}
.hero__eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--color-primary); }
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: .98; }
.hero p.lede { color: var(--color-text-muted); font-size: 1.08rem; max-width: 46ch; }
/* Blauwe blokje: korte tagline + ophalen/verzenden eronder, met een dun lijntje
   ertussen — de volledige voorwaarden (geen btw, geen garantie) staan alleen nog bij
   het afrekenen in de winkelwagen (akkoord-vinkje), dus hier bewust geen lange
   disclaimer meer. */
.hero__tagline {
    max-width: 46ch; margin: 0 0 4px; padding: 10px 14px; font-size: .92rem;
    background: var(--color-tint); border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.hero__tagline-text { margin: 0; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 4px; }

/* Ophalen/verzenden: losse rij onder het blauwe tagline-blokje, buiten de box. */
.hero__delivery {
    display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px;
}
.hero__delivery-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .85rem; font-weight: 500; color: var(--color-text-muted);
}
.hero__delivery-chip svg { width: 16px; height: 16px; flex-shrink: 0; }

.brand-badge {
    display: inline-flex; align-items: center; gap: 9px;
    border: 1px solid var(--color-border); border-radius: 999px;
    padding: 8px 16px 8px 12px; background: var(--color-surface);
    font-size: .85rem; font-weight: 600; color: var(--color-text);
    margin-bottom: 18px;
}
.brand-badge img { height: 15px; width: auto; flex-shrink: 0; }

.hero__art {
    position: relative; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden;
    background:
        linear-gradient(var(--color-surface), var(--color-surface)),
        repeating-linear-gradient(0deg, transparent, transparent 27px, var(--color-border) 27px, var(--color-border) 28px),
        repeating-linear-gradient(90deg, transparent, transparent 27px, var(--color-border) 27px, var(--color-border) 28px);
    aspect-ratio: 5/4;
}
.hero__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 860px) { .hero__art { display: none; } }

/* Locomotief "tekent zichzelf" bij het laden van de hero (eerst de romp, dan de
   wielen, dan de rails), gevolgd door de annotaties en een gouden "ping" op het
   Tijdperk III-stipje. pathLength="100" op elke vorm normaliseert de omtrek zodat
   dezelfde dasharray/dashoffset-waarden voor elke vorm werken, ongeacht grootte. */
.hero__art svg .draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: hero-draw 1s ease forwards; }
.hero__art svg .draw--body { animation-delay: .05s; }
.hero__art svg .draw--wheels { animation-delay: .55s; }
.hero__art svg .draw--track { animation-delay: .8s; }
@keyframes hero-draw { to { stroke-dashoffset: 0; } }

.hero__art svg .annotate { opacity: 0; animation: hero-fade-up .5s ease forwards; }
.hero__art svg .annotate--1 { animation-delay: 1.3s; }
.hero__art svg .annotate--2 { animation-delay: 1.4s; }
.hero__art svg .annotate--3 { animation-delay: 1.5s; }
@keyframes hero-fade-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.hero__art svg .ping {
    opacity: 0; animation: hero-ping 1s ease-out forwards; animation-delay: 1.9s;
    transform-box: fill-box; transform-origin: center;
}
@keyframes hero-ping {
    0% { r: 2.5; stroke-opacity: .9; opacity: 1; }
    100% { r: 11; stroke-opacity: 0; opacity: 1; }
}

/* Blijvende "rijdt door"-animatie: start pas nadat de tekenanimatie + ping klaar
   zijn (2,5s), en loopt daarna oneindig door — wielen draaien subtiel, en er
   stijgen steeds nieuwe rookpluimpjes op uit de schoorsteen. */
.hero__art svg { --spin-t: 5s; }
.hero__art svg .wheel-spoke {
    opacity: 0; stroke: var(--color-primary); fill: none;
    animation: hero-spoke-in .4s ease forwards, hero-spin var(--spin-t) linear infinite;
    animation-delay: 2.5s, 2.5s;
}
@keyframes hero-spoke-in { to { opacity: .8; } }
/* Tegen de klok in = de locomotief rijdt naar links, de kant waar de neus naartoe wijst. */
@keyframes hero-spin { to { transform: rotate(-360deg); } }

/* Koppelstang + pinnen (stoom-/dieselloc) draaien mee met de wielen: de stang beschrijft een cirkel
   (straal --rod-r, inline per tekening) zonder zelf te draaien. Twee geneste groepen: .rod-x doet de
   horizontale, .rod-y de verticale beweging; met sinus-achtige easing per kwart ontstaat een
   vloeiende cirkel. Start bij de pin onderaan, gelijk met de spaken (zelfde duur en vertraging). */
.hero__art svg .rod-x { animation: hero-rod-x var(--spin-t) infinite; animation-delay: 2.5s; }
.hero__art svg .rod-y { animation: hero-rod-y var(--spin-t) infinite; animation-delay: 2.5s; }
@keyframes hero-rod-x {
    0%   { transform: translateX(0);                animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
    25%  { transform: translateX(var(--rod-r));     animation-timing-function: cubic-bezier(.47, 0, .745, .715); }
    50%  { transform: translateX(0);                animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
    75%  { transform: translateX(calc(var(--rod-r) * -1)); animation-timing-function: cubic-bezier(.47, 0, .745, .715); }
    100% { transform: translateX(0); }
}
@keyframes hero-rod-y {
    0%   { transform: translateY(0);                       animation-timing-function: cubic-bezier(.47, 0, .745, .715); }
    25%  { transform: translateY(calc(var(--rod-r) * -1)); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
    50%  { transform: translateY(calc(var(--rod-r) * -2)); animation-timing-function: cubic-bezier(.47, 0, .745, .715); }
    75%  { transform: translateY(calc(var(--rod-r) * -1)); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
    100% { transform: translateY(0); }
}

.hero__art svg .smoke {
    opacity: 0; transform-box: fill-box; transform-origin: center;
    animation: hero-smoke 3s ease-out infinite;
}
.hero__art svg .smoke--1 { animation-delay: 2.6s; }
.hero__art svg .smoke--2 { animation-delay: 3.6s; }
.hero__art svg .smoke--3 { animation-delay: 4.6s; }
@keyframes hero-smoke {
    0% { transform: translateY(0) scale(.6); opacity: 0; }
    18% { opacity: .5; }
    100% { transform: translateY(-34px) scale(1.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__art svg .draw, .hero__art svg .annotate { animation: none; stroke-dashoffset: 0; opacity: 1; }
    .hero__art svg .ping, .hero__art svg .wheel-spoke, .hero__art svg .smoke { display: none; }
    .hero__art svg .rod-x, .hero__art svg .rod-y { animation: none; }
}

.section { padding-block: 40px; }

/* Telefoon: minder ruimte tussen de categoriebalk en "← Terug naar catalogus" op de
   advertentiedetailpagina — de gewone .section-padding (40px) oogt daar te ruim. Alleen
   de bovenkant van deze specifieke pagina, niet alle .section-pagina's. */
@media (max-width: 720px) {
    .listing-detail { padding-top: 20px; }
}

/* ---------- Categorietegels (homepage) ---------- */
/* Rustige tegels zonder foto: wit vlak, icoon in lichtblauw rondje (zelfde als de categoriebalk), naam + aantal. */
.category-tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.category-tile {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
    color: var(--color-text); transition: border-color .15s, box-shadow .15s;
}
.category-tile:hover { text-decoration: none; border-color: var(--color-primary); box-shadow: var(--shadow); }
.category-tile:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.category-tile__icon {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-tint); transition: background-color .15s;
}
.category-tile__icon svg {
    width: 22px; height: 22px; fill: none; stroke: var(--color-primary); stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s;
}
.category-tile:hover .category-tile__icon { background: var(--color-primary); }
.category-tile:hover .category-tile__icon svg { stroke: #fff; }
.category-tile__text { display: flex; flex-direction: column; min-width: 0; }
.category-tile__name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; line-height: 1.05; }
.category-tile__count { font-size: .82rem; color: var(--color-text-muted); }
@media (max-width: 560px) {
    .category-tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .category-tile { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
}

.section--narrow { max-width: 640px; margin-inline: auto; }
.section__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }

/* Op de telefoon past "Alles bekijken →" niet meer naast een langere kop en valt hij
   in de headerrij naar een eigen regel BOVEN de kaarten — verwarrend, die actie hoort bij
   het einde van het rijtje. Op mobiel verdwijnt de headerlink daarom en komt er een
   opvallendere knop ONDER de kaarten voor terug (i.p.v. kale tekst): een pijl-pil die bij
   een tik iets naar rechts schuift. Op desktop blijft de headerlink zoals die was. */
.section__more { display: none; }
@media (max-width: 720px) {
    .section__header-link { display: none; }
    .section__more {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        width: fit-content; margin: 18px auto 0; padding: 10px 16px; border-radius: 999px;
        border: 1.5px solid var(--color-primary); color: var(--color-primary);
        font-weight: 700; font-size: .88rem; text-decoration: none;
        transition: background-color .15s ease, color .15s ease;
    }
    .section__more:hover, .section__more:active { background: var(--color-primary); color: #fff; text-decoration: none; }
    .section__more svg { flex-shrink: 0; transition: transform .15s ease; }
    .section__more:active svg { transform: translateX(4px); }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid transparent; border-radius: 8px;
    padding: 12px 20px; font-size: .95rem; font-weight: 600; cursor: pointer; text-align: center;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--ghost { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn--ghost:hover { background: var(--color-border); }
.btn--outline { background: transparent; border: 1.5px solid var(--color-primary); color: var(--color-primary); padding: 11.5px 19.5px; }
.btn--outline:hover { background: var(--color-primary); color: #fff; }
.btn--danger { background: #fff; border-color: var(--color-danger); color: var(--color-danger); }
.btn--danger:hover { background: var(--color-danger); color: #fff; }
.btn--small { padding: 6px 12px; font-size: .82rem; }
.btn--full { width: 100%; }

/* ---------- Cards / grid ---------- */
.card-grid {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* Telefoon: smallere tegels (2 kolommen i.p.v. 1 volle-breedte kolom) — een korte titel (1
   regel) laat anders veel blanco ruimte over in de vaste 3-regelige titelruimte vóór
   "Beschikbaar" verschijnt; smallere tegels laten dezelfde titel over meer regels lopen,
   waardoor die ruimte beter gevuld wordt. Alleen telefoon (zelfde grens als de mobiele
   catalogusfilters); tablet/desktop blijven ongewijzigd. */
@media (max-width: 720px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
.card {
    position: relative;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
}

.card--more {
    align-items: center; justify-content: center; gap: 8px; min-height: 200px; padding: 24px 16px;
    text-align: center; text-decoration: none; color: var(--color-primary-dark);
    background: transparent; border: 0; box-shadow: none;
    transition: color .15s;
}
.card--more__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; transition: transform .15s ease;
}
.card--more__icon svg { width: 26px; height: 26px; }
.card--more__title { font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; }
.card--more:hover, .card--more:focus-visible { color: var(--color-primary); text-decoration: none; }
.card--more:hover .card--more__icon { transform: translateX(4px); }

.wishlist-toggle {
    position: absolute; bottom: 10px; right: 10px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(15, 17, 20, 0.3);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .15s, transform .12s ease;
}
.wishlist-toggle:not(.wishlist-toggle--detail):hover,
.wishlist-toggle:not(.wishlist-toggle--detail):focus-visible {
    background: var(--scrim); backdrop-filter: blur(2px);
}
.wishlist-toggle:hover { transform: scale(1.06); }
.wishlist-toggle__icon {
    width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.wishlist-toggle:not(.is-active) .wishlist-toggle__icon--check { display: none; }
.wishlist-toggle.is-active .wishlist-toggle__icon--plus { display: none; }
.wishlist-toggle.is-active {
    background: var(--color-primary);
}
.wishlist-toggle.just-toggled .wishlist-toggle__icon { animation: wishlistPop .32s ease; }
@keyframes wishlistPop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* De winkelwagenknop op de detailpagina is een prominente, groene call-to-action (net als
   het voorbeeld waar de gebruiker naar verwees) i.p.v. de kleine omlijnde pil van de kaart. */
.wishlist-toggle--detail {
    position: static; width: 100%; height: auto; border-radius: var(--radius);
    padding: 14px 20px; margin: 0 0 4px; background: var(--color-available);
    border: 1.5px solid var(--color-available); color: #fff;
    font-size: 1rem; font-weight: 700; gap: 10px;
}
.wishlist-toggle--detail .wishlist-toggle__icon { stroke: currentColor; width: 19px; height: 19px; }
.wishlist-toggle--detail:hover { background: var(--color-available-dark); border-color: var(--color-available-dark); }
.wishlist-toggle--detail.is-active {
    background: #fff; border-color: var(--color-available); color: var(--color-available);
}
.wishlist-toggle--detail.is-active:hover { background: var(--color-tint); }
.card__media {
    position: relative; display: block; overflow: hidden; flex-shrink: 0;
    padding-top: 75%; /* vaste 4:3-tegel, onafhankelijk van het formaat van de foto */
    background: #e7e9ee;
}
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--color-text-muted); font-size: 2rem; text-align: center;
}
.card__body { padding: 13px 15px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
/* Vaste hoogte van 3 regels als default, ongeacht of de titel korter is — zo krijgen alle
   tegels dezelfde hoogte i.p.v. per rij te verspringen op titellengte. Past de titel in
   minder regels, dan blijft de ruimte gewoon leeg (zoals in het voorbeeld dat de gebruiker
   aanleverde); een langere titel vult die ruimte op en wordt pas na 3 regels afgekapt met "…". */
.card__title {
    font-size: .92rem; margin: 0; font-family: var(--font-body); font-weight: 600; line-height: 1.35;
    min-height: 4.05em;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card__title a { color: var(--color-text); }
.card__meta { font-size: .82rem; color: var(--color-text-muted); margin: 0; }
/* Statusregel (bolletje + tekst): gedeeld tussen de advertentiekaart en de detailpagina.
   Tekst in de statuskleur zelf (i.p.v. neutraal grijs) + iets vetter, zodat 'm opvalt. */
.status-line { display: flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.status-dot--beschikbaar { background: var(--color-available); }
.status-dot--gereserveerd { background: var(--color-reserved); }
.status-dot--verkocht { background: var(--color-sold); }
.status-dot--concept { background: #666; }
.status-line--beschikbaar { color: var(--color-available); }
.status-line--gereserveerd { color: var(--color-reserved); }
.status-line--verkocht { color: var(--color-sold); }
.status-line--concept { color: var(--color-text-muted); }
/* Op de kaart duwt margin-top: auto "status + prijs" samen altijd naar de onderkant van de
   kaart, op een vaste hoogte t.o.v. elkaar — ongeacht hoeveel regels de titel inneemt. */
.card__status { margin: auto 0 0; }
/* Op de detailpagina staat de statusregel los boven de titel, groter en met wat
   ruimte eronder (was voorheen een gevulde kleurbadge). */
.status-line--detail { font-size: 1rem; margin: 0 0 10px; }
.status-line--detail .status-dot { width: 12px; height: 12px; }
.card__price { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .98rem; color: var(--color-primary-dark); margin: 4px 0 0; }

.card__media-wrap { flex-shrink: 0; }
/* Op de kaart is het tekstlabel van de winkelwagenknop alleen voor schermlezers... */
.card .wishlist-toggle__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
}
/* ...maar met een muis (hover mogelijk) is de knop in rust onzichtbaar en schuift hij bij hover als
   balk over de onderkant van de foto omhoog. Blijft de kaart in de winkelwagen, dan blijft de balk
   staan ("Toegevoegd"). Op touchscreens (geen hover) blijft het ronde knopje in de hoek van de kaart. */
@media (hover: hover) and (pointer: fine) {
    .card__media-wrap { position: relative; overflow: hidden; }
    .card .wishlist-toggle {
        left: 0; right: 0; bottom: 0; width: 100%; height: 46px; border-radius: 0; gap: 8px;
        background: var(--color-available); color: #fff; font: inherit; font-size: .9rem; font-weight: 600;
        backdrop-filter: none;
        transform: translateY(100%);
        transition: transform .22s ease, background-color .15s, color .15s;
    }
    .card .wishlist-toggle__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
    .card:hover .wishlist-toggle,
    .card .wishlist-toggle:focus-visible,
    .card .wishlist-toggle.is-active { transform: translateY(0); }
    .card .wishlist-toggle:hover { background: var(--color-available-dark); backdrop-filter: none; }
    .card .wishlist-toggle.is-active { background: var(--color-surface); color: var(--color-available); border-top: 1px solid var(--color-border); }
    .card .wishlist-toggle.is-active .wishlist-toggle__icon { stroke: var(--color-available); }
    .card .wishlist-toggle.is-active:hover { background: #e6f3e6; }
}

/* ---------- Filter bar ---------- */
.filter-bar {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 16px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px;
}
.filter-bar__row { display: flex; flex-wrap: wrap; gap: 12px; }
/* Tweede filterrij van de catalogus: compacte velden (geen vaste minimumbreedte, smalle prijsvelden), zodat
   alle filters samen op één regel passen; op smallere schermen breken ze vanzelf af. */
.filter-bar__row--compact .field { min-width: 0; }
.filter-bar__row--compact .field input[type="number"] { width: 100px; }
.filter-bar__actions { display: flex; gap: 10px; }
.filter-bar--compact { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.filter-bar__more { display: flex; flex-direction: column; gap: 12px; }
/* Filters-knop: alleen op de telefoon (zie media query hieronder). */
.filter-bar__toggle { display: none; }
/* Prijs vanaf/tot: op desktop gewoon losse velden in de rij, op de telefoon een vast paar. */
.filter-bar__pair { display: contents; }
.filter-bar__count {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; box-sizing: border-box;
    background: var(--color-primary); color: var(--color-primary-contrast);
    font-size: .75rem; font-weight: 700; line-height: 20px; text-align: center;
}

/* Telefoon: standaard alleen zoeken + merk; de rest klapt uit achter de knop "Filters" (JS zet
   .filter-bar--collapsible; zonder JS blijven alle filters gewoon zichtbaar). */
@media (max-width: 720px) {
    .filter-bar { padding: 12px; gap: 10px; margin-bottom: 16px; }
    .filter-bar__row:first-child { gap: 10px; align-items: flex-end; }
    .filter-bar__row:first-child .field--grow { flex: 1 1 100%; }
    .filter-bar__row:first-child .field:not(.field--grow) { flex: 1 1 0; min-width: 0; }
    .filter-bar--collapsible .filter-bar__toggle { display: inline-flex; flex: 1 1 100%; justify-content: center; padding: 9px 12px; }
    .filter-bar__pair { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 10px; }
    .filter-bar--collapsible.is-open .filter-bar__toggle { border-color: var(--color-primary); }
    .filter-bar--collapsible:not(.is-open) .filter-bar__more { display: none; }
    .filter-bar__more { gap: 10px; }
    .filter-bar__row--compact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .filter-bar__row--compact .field { min-width: 0; }
    .filter-bar__row--compact .field select,
    .filter-bar__row--compact .field input { width: 100%; min-width: 0; box-sizing: border-box; }
    .filter-bar__row--compact .field input[type="number"] { width: 100%; }
    .filter-bar__actions .btn { flex: 1; justify-content: center; }
}

.field { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; min-width: 140px; }
.field--grow { flex: 1 1 220px; }
.field--full { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
    font: inherit; padding: 9px 10px; border: 1px solid var(--color-border); border-radius: 6px;
    background: #fff; color: var(--color-text);
}
.field textarea { resize: vertical; }
.field-error { color: var(--color-danger); font-weight: 500; }
.field-hint { color: var(--color-text-muted); font-weight: 400; }
.field-with-button { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.field-with-button input { width: 100%; }
.field-with-button__buttons { display: flex; flex-wrap: wrap; gap: 8px; }

/* Voortgang/resultaat van "Zoeken op internet" (beheer), direct onder de knoppen. */
.lookup-status {
    display: none; width: 100%; align-items: flex-start; gap: 10px;
    padding: 10px 14px; border-radius: var(--radius); font-size: .92rem; font-weight: 500;
    background: var(--color-tint); color: var(--color-primary-dark);
}
.lookup-status.is-visible { display: flex; }
.lookup-status.is-ok { background: #e6f3e6; color: var(--color-success); }
.lookup-status.is-error { background: #fbeceb; color: var(--color-danger); }
.lookup-status__body { flex: 1; min-width: 0; }
.lookup-status__text { overflow-wrap: anywhere; }
.lookup-status__spinner {
    display: none; flex: none; width: 16px; height: 16px; margin-top: 2px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: lookup-spin .8s linear infinite;
}
.lookup-status.is-busy .lookup-status__spinner { display: block; }
.lookup-status__bar {
    display: none; position: relative; height: 4px; margin-top: 8px; overflow: hidden;
    border-radius: 2px; background: rgba(43, 93, 145, .18);
}
.lookup-status.is-busy .lookup-status__bar { display: block; }
.lookup-status__bar::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 35%;
    border-radius: 2px; background: var(--color-primary);
    animation: lookup-slide 1.4s ease-in-out infinite;
}
@keyframes lookup-spin { to { transform: rotate(360deg); } }
@keyframes lookup-slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) {
    .lookup-status__bar::after { animation: none; width: 100%; opacity: .35; }
}
/* Resultaten van "Vergelijk actuele prijzen": twee kolommen (marktplaats.nl /
   modeltreinwinkel.nl), elk een lijst van titel (link) + prijs. */
.price-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
@media (max-width: 640px) {
    .price-compare { grid-template-columns: 1fr; }
}
.price-compare__col h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); margin: 0 0 8px; font-family: var(--font-body); font-weight: 700; }
.price-compare__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.price-compare__list li {
    display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px; font-size: .86rem;
}
.price-compare__list a { color: var(--color-text); font-weight: 600; }
.price-compare__meta { color: var(--color-primary-dark); font-weight: 700; font-variant-numeric: tabular-nums; }
.price-compare__empty { color: var(--color-text-muted); font-weight: 400; background: transparent; border-style: dashed; }

#titleSuggestionField { display: none; }
#titleSuggestionField.is-visible { display: flex; }
#titleSuggestionInput { background: var(--color-bg); color: var(--color-text-muted); }
.field--checkbox { flex-direction: row; align-items: center; gap: 8px; min-width: auto; }
.field--checkbox input { width: auto; }

.result-count { color: var(--color-text-muted); margin-bottom: 12px; }
#catalogResults { transition: opacity .15s ease; }
#catalogResults.is-loading { opacity: .5; pointer-events: none; }

.pagination { display: flex; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.pagination__link {
    padding: 6px 12px; border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text);
}
.pagination__link.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.empty-state, .empty-state-page { color: var(--color-text-muted); padding: 24px 0; }
.empty-state-page { text-align: center; }

/* ---------- Detail page ---------- */
.breadcrumb { margin-bottom: 16px; }
.listing-detail__title { margin-bottom: 20px; }

/* Witte panelen (foto's, kopen, specificaties, beschrijving) geven de detailpagina meer
   structuur — dezelfde kaartachtige stijl (rand + schaduw) als de rest van de site. */
.panel {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px;
}
.panel__title { margin-bottom: 16px; }

.listing-detail__grid {
    display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: start;
}
@media (max-width: 800px) {
    .listing-detail__grid { grid-template-columns: 1fr; }
}
.gallery__main { position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: #e7e9ee; }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.gallery__main--empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 2.4rem; color: var(--color-text-muted); text-align: center;
}
/* Pijltjes over de hoofdfoto om snel te bladeren, naast de miniaturen eronder. */
.gallery__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 36px; height: 36px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: var(--color-text); font-size: 1.3rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow);
    transition: background-color .15s;
}
.gallery__nav:hover { background: #fff; }
.gallery__nav--prev { left: 10px; }
.gallery__nav--next { right: 10px; }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gallery__thumb {
    width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden;
    cursor: pointer; background: #e7e9ee;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumb.is-active { border-color: var(--color-primary); }

/* Fotobox (lightbox): klik op de hoofdfoto opent 'm groter, met vorige/volgende bij meerdere foto's. */
body.lightbox-open { overflow: hidden; }
.lightbox {
    position: fixed; inset: 0; z-index: 100; display: none;
    align-items: center; justify-content: center;
    background: rgba(10, 11, 14, .92); padding: 24px;
}
.lightbox.is-open { display: flex; }
.lightbox__img {
    max-width: min(92vw, 1400px); max-height: 88vh; width: auto; height: auto;
    object-fit: contain; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.lightbox__close, .lightbox__nav {
    position: absolute; border: 0; cursor: pointer; color: #fff;
    background: rgba(255, 255, 255, .12); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background-color .15s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .24); }
.lightbox__close { top: 18px; right: 18px; width: 42px; height: 42px; font-size: 1.2rem; line-height: 1; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.8rem; line-height: 1; }
.lightbox__nav--prev { left: 18px; }
.lightbox__nav--next { right: 18px; }
@media (max-width: 640px) {
    .lightbox__nav { width: 42px; height: 42px; font-size: 1.5rem; }
    .lightbox__close { width: 38px; height: 38px; }
}

.listing-detail__price { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: 1.8rem; font-weight: 700; color: var(--color-primary-dark); margin: 0 0 6px; }
.listing-detail__price + .field-hint { margin: -2px 0 10px; }
.buy-panel .status-line--detail { margin: 0 0 16px; }

.spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin: 0; }
.spec-list div { border-bottom: 1px solid var(--color-border); padding-bottom: 6px; }
.spec-list dt { font-size: .78rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.spec-list dd { margin: 2px 0 0; font-weight: 600; }
/* Merklogo als eerste specificatie: klein, alleen ter herkenning. */
.spec-list__brand { display: inline-block; line-height: 0; }
.spec-list__brand:hover { text-decoration: none; opacity: .8; }
.spec-list__brand img { display: block; height: 16px; width: auto; }

.listing-detail__description { max-width: 70ch; margin: 0; }
.listing-detail__panels { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; }
.listing-detail__related { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--color-border); }
.listing-detail__related h2 { margin-bottom: 16px; }

/* Vertrouwenslijst onderaan het koop-paneel — dezelfde drie punten als het eerdere
   vertrouwensstrookje (destijds van de homepage verwijderd omdat het daar "te druk" oogde),
   hier hergebruikt als rustige lijst met groene vinkjes. */
.trust-list {
    list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--color-border);
    display: flex; flex-direction: column; gap: 10px; font-size: 1rem; color: var(--color-text);
}
.trust-list li { display: flex; align-items: center; gap: 10px; }
.trust-list__icon {
    width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: var(--color-available);
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

.notice { padding: 12px 16px; border-radius: var(--radius); font-weight: 500; }
.notice--info { background: #eef2ea; color: var(--color-accent); }
.notice--success { background: #e6f3e6; color: var(--color-success); }
.notice--error { background: #fbeceb; color: var(--color-danger); }

/* ---------- Legal ---------- */
.legal { max-width: 70ch; }

/* ---------- Uitlegpagina's (/uitleg) ---------- */
.guide h2 { margin-top: 1.6em; }
.guide ul:not(.guide-list) { padding-left: 1.2em; display: grid; gap: 8px; }
.guide-lede { font-size: 1.1rem; color: var(--color-text-muted); }
.guide-cta { margin: 1.6em 0 0; }
.guide-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.guide-list li {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 14px 18px; display: grid; gap: 4px;
}
.guide-list--compact li { padding: 10px 16px; }
.guide-list__title { font-weight: 700; }
.guide-list__summary { color: var(--color-text-muted); font-size: .95rem; }

/* Korte inleiding onder de kop van een categoriepagina. */
.category-intro { color: var(--color-text-muted); max-width: 70ch; margin: -.2em 0 1.2em; }

/* Verkochte advertentie: knop over de volle breedte van het koop-paneel. */
.btn--block { display: flex; justify-content: center; width: 100%; }
.sold-contact { margin: 12px 0 0; }

/* ---------- Admin: shared ---------- */
.admin-guest {
    background: var(--color-bg); display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
.admin-guest__main { width: 100%; padding: 16px; }
.login-box {
    max-width: 360px; margin: 0 auto; background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow);
}
.login-box__sub { color: var(--color-text-muted); margin-top: -8px; }
.login-box__back { margin-top: 16px; text-align: center; }
.login-box__back a { text-decoration: underline; font-weight: 600; }
.login-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }

.setup-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.15rem; letter-spacing: .04em; font-weight: 600;
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 12px 16px; display: inline-block; margin: 8px 0 16px; word-break: break-all;
}

.admin-shell { display: flex; min-height: 100vh; align-items: flex-start; }

/* Zijbalk: dezelfde donkerblauw als de footer van de site, met lijn-iconen zoals de categoriebalk. */
.admin-sidebar {
    width: 240px; flex-shrink: 0; background: var(--color-navy); color: #fff; padding: 22px 14px 18px;
    display: flex; flex-direction: column; gap: 22px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-sidebar__top { display: flex; align-items: center; justify-content: space-between; padding-inline: 8px; }
.admin-brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.admin-brand:hover { text-decoration: none; }
.admin-brand__mark { width: 30px; height: 30px; flex-shrink: 0; }
.admin-brand__text { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: .01em; line-height: 1; }
.admin-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.admin-nav a {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px;
    color: rgba(255,255,255,.74); font-size: .93rem; font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.admin-nav a svg, .admin-logout svg {
    width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.admin-nav a:hover { background: rgba(255,255,255,.09); color: #fff; text-decoration: none; }
.admin-nav a.is-active { background: rgba(255,255,255,.15); color: #fff; font-weight: 600; }
.admin-nav__count {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--color-navy); font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.admin-nav__logout { margin-top: auto; padding-top: 14px; }
.admin-logout {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 8px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff;
    font: inherit; font-size: .93rem; font-weight: 600; cursor: pointer;
    transition: background .15s ease;
}
.admin-logout:hover { background: rgba(255,255,255,.2); }

.admin-content { flex: 1; min-width: 0; }
.admin-topbar {
    display: flex; align-items: center; gap: 12px; padding: 18px 28px; border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}
.admin-topbar__title { margin: 0; font-size: 1.7rem; }
.nav-toggle--admin { display: none; }
.nav-toggle--admin span { background: #fff; }
.admin-main { padding: 28px; max-width: 1400px; }

@media (max-width: 820px) {
    .admin-shell { flex-direction: column; align-items: stretch; }
    .admin-content { width: 100%; }
    .admin-sidebar {
        width: 100%; height: auto; position: static; overflow: visible; gap: 0; padding: 12px 14px;
    }
    .nav-toggle--admin { display: flex; }
    .admin-nav { display: none; padding-top: 12px; }
    .admin-nav.is-open { display: flex; }
    .admin-topbar { padding: 14px 16px; }
    .admin-topbar__title { font-size: 1.4rem; }
    .admin-main { padding: 16px; }
}

.admin-welcome { color: var(--color-text-muted); margin-bottom: 18px; }
.admin-panel { margin-bottom: 24px; }
.admin-panel--flex {
    display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 16px 18px; box-shadow: var(--shadow);
}

/* Wit paneel, zelfde stijl als de panelen op de advertentiepagina van de site. */
.admin-card {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 24px;
}
.admin-card__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.admin-card__header h2 { margin: 0; font-size: 1.5rem; }
.admin-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-card__foot { margin: 12px 0 0; }
.admin-card h2 { font-size: 1.5rem; }
.admin-card--flush { padding: 0; overflow: hidden; }
.admin-card--flush .admin-table th:first-child, .admin-card--flush .admin-table td:first-child { padding-left: 18px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card {
    --stat-color: var(--color-primary);
    background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--stat-color);
    border-radius: var(--radius); box-shadow: var(--shadow); color: var(--color-text);
    padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
a.stat-card:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(23, 26, 32, .1); }
.stat-card--beschikbaar { --stat-color: var(--color-available); }
.stat-card--gereserveerd { --stat-color: var(--color-reserved); }
.stat-card--verkocht { --stat-color: var(--color-sold); }
.stat-card--concept { --stat-color: #b7bec9; }
.stat-card__value { font-family: var(--font-display); font-size: 2.3rem; font-weight: 800; line-height: 1.05; }
.stat-card__label { color: var(--color-text-muted); font-size: .85rem; }

.admin-table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
.admin-card .admin-table { background: transparent; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); font-size: .9rem; vertical-align: middle; }
.admin-table th { color: var(--color-text-muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; background: #f7f8fa; }
.admin-table tbody tr:hover { background: #fafbfc; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table__title a { color: var(--color-text); font-weight: 600; }
.admin-table__title a:hover { color: var(--color-primary); }
.admin-table__actions { white-space: nowrap; }
.admin-table__actions > * { vertical-align: middle; margin-right: 6px; }
.admin-table__actions > *:last-child { margin-right: 0; }
.admin-table-wrap { overflow-x: auto; }
.admin-table__thumb {
    display: block; width: 48px; height: 48px; border-radius: 6px; overflow: hidden;
    background: #e7e9ee; flex-shrink: 0;
}
.admin-table__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-table__thumb--empty {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: var(--color-text-muted);
}
.admin-table__cell--wrap { white-space: normal; max-width: 320px; }
.admin-table tr.is-spam { opacity: .55; }
.admin-table__price-check { font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-table__price-check a { font-weight: 600; }
.admin-table__price-check-empty { color: var(--color-text-muted); }
.admin-table__star {
    background: none; border: 0; cursor: pointer; padding: 2px; font-size: 1.2rem; line-height: 1;
    color: var(--color-border); transition: color .15s, transform .1s;
}
.admin-table__star:hover { color: var(--color-reserved); transform: scale(1.12); }
.admin-table__star.is-active { color: var(--color-reserved); }

.inline-form { display: inline; }
.status-select {
    padding: 5px 8px; border-radius: 999px; border: 1px solid var(--color-border); font: inherit; font-size: .84rem; font-weight: 600;
    background: #fff; color: var(--color-text);
}
.status-select--beschikbaar { background: #e6f3e9; border-color: #b9dcc2; color: var(--color-available-dark); }
.status-select--gereserveerd { background: #faf0dc; border-color: #ecd6a6; color: #8a5c0e; }
.status-select--verkocht { background: #eceef1; border-color: #d5d9df; color: #5b6472; }
.status-select--concept { background: #fff; border-style: dashed; color: var(--color-text-muted); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--color-border); }
.badge--primary { background: var(--color-primary); color: #fff; }

.listing-form-layout { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.admin-form {
    display: flex; flex-direction: column; gap: 18px; flex: 1 1 480px; max-width: 860px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 22px;
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.admin-collapsible { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px 16px; }
.admin-collapsible summary { cursor: pointer; font-weight: 600; }
.admin-section-title { margin: 32px 0 12px; font-size: 1.1rem; }
.admin-form__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.listing-photos-sidebar {
    flex: 1 1 280px; max-width: 340px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 18px;
}
.listing-photos-sidebar .admin-section-title { margin-top: 0; }

/* Uitsnede op de kaart (beheer): klikbare foto met markering + voorbeeld in het kaartformaat. */
.photo-focus { margin: 0 0 22px; }
.photo-focus__stage {
    position: relative; margin: 10px 0 12px; border-radius: 8px; overflow: hidden;
    cursor: crosshair; touch-action: none; user-select: none; background: #e7e9ee;
}
.photo-focus__stage img { display: block; width: 100%; height: auto; pointer-events: none; }
.photo-focus__marker {
    position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
    border: 3px solid #fff; background: rgba(43, 93, 145, .35);
    box-shadow: 0 0 0 1.5px var(--color-primary-dark), 0 2px 6px rgba(0, 0, 0, .35); pointer-events: none;
}
.photo-focus__label { margin: 0 0 6px; font-weight: 600; font-size: .9rem; }
.photo-focus__preview { position: relative; width: 100%; max-width: 240px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #e7e9ee; }
.photo-focus__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-focus__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.photo-focus__status { margin: 0; }
.photo-focus__status.is-error { color: var(--color-danger); }
.photo-manager { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.photo-manager__item {
    border: 1px solid var(--color-border); border-radius: var(--radius); padding: 8px; position: relative;
    display: flex; flex-direction: column; gap: 6px;
}
.photo-manager__item img { aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }
.photo-manager__actions { display: flex; flex-direction: column; gap: 6px; }
.photo-manager__rotate { display: flex; gap: 6px; }
.photo-manager__rotate .inline-form { flex: 1; }
.photo-manager__rotate .btn { width: 100%; font-size: 1.1rem; line-height: 1; }
.photo-manager__item.is-busy img { opacity: .45; }

/* Fotokiezer bovenaan het advertentieformulier (main.js: setupPhotoPicker). */
.photo-picker input[type="file"] {
    display: block; width: 100%; font: inherit; font-size: .85rem; color: var(--color-text-muted);
    padding: 14px; border: 1.5px dashed var(--color-border); border-radius: var(--radius);
    background: var(--color-bg);
}
.photo-picker input[type="file"]::file-selector-button {
    margin-right: 12px; padding: 10px 18px; border: 0; border-radius: 8px;
    background: var(--color-primary); color: #fff; font-weight: 600; font-size: .9rem; cursor: pointer;
}
.photo-picker input[type="file"]::file-selector-button:hover { background: var(--color-primary-dark); }
.photo-picker__preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 4px; }
.photo-picker__item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--color-border); }
.photo-picker__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-picker__item .badge--primary { position: absolute; left: 6px; bottom: 6px; }
.photo-picker__remove, .photo-picker__primary {
    position: absolute; top: 6px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: rgba(15, 17, 20, .55); color: #fff; font-size: .9rem; line-height: 1;
}
.photo-picker__remove { right: 6px; }
.photo-picker__primary { left: 6px; }
.photo-picker__remove:hover, .photo-picker__primary:hover { background: rgba(15, 17, 20, .8); }

/* ---------- Wensenlijst / contactformulier ---------- */
.wishlist-list { display: flex; flex-direction: column; gap: 12px; }
/* Verticaal gestapelde witte panelen (bijv. winkelwagen-items + formulier) — zelfde
   basisidee als .listing-detail__panels op de advertentiepagina, hier generiek herbruikt. */
.panel-stack { display: flex; flex-direction: column; gap: 24px; margin-bottom: 24px; }
.wishlist-item {
    display: flex; align-items: center; gap: 14px;
    border: 1px solid var(--color-border); border-radius: var(--radius); padding: 10px 14px;
    background: var(--color-surface);
}
.wishlist-item img, .wishlist-item__noimg {
    width: 64px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0;
    background: #e7e9ee; display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.wishlist-item__info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wishlist-item__info span { color: var(--color-text-muted); font-size: .85rem; }
.wishlist-item__check-label { display: flex; }

/* Telefoon: checkbox + foto links, titel en prijs rechts ernaast, "Verwijderen" eronder — zo krijgt
   de titel de volle resterende breedte i.p.v. een smalle kolom naast de knop. */
@media (max-width: 560px) {
    #wensenlijstPanel { padding: 16px; }
    .wishlist-item {
        display: grid; grid-template-columns: auto 60px minmax(0, 1fr); column-gap: 12px; row-gap: 6px;
        align-items: center; padding: 12px;
    }
    .wishlist-item__check-label { grid-column: 1; grid-row: 1 / span 2; }
    .wishlist-item img, .wishlist-item__noimg { grid-column: 2; grid-row: 1 / span 2; width: 60px; height: 60px; }
    .wishlist-item__info { grid-column: 3; grid-row: 1; align-self: end; }
    .wishlist-item__remove { grid-column: 3; grid-row: 2; justify-self: start; align-self: start; }
}

/* Aantalkeuze (advertenties met meer dan 1 stuk): advertentiepagina en winkelwagen. */
.qty-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; }
.qty-picker__label { font-weight: 600; font-size: .95rem; }
.qty-picker__max, .wishlist-item__qty-max { color: var(--color-text-muted); font-size: .85rem; }
.qty-stepper {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); overflow: hidden;
}
.qty-stepper__btn {
    width: 38px; border: 0; background: var(--color-tint); color: var(--color-primary-dark);
    font-size: 1.2rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.qty-stepper__btn:hover:not(:disabled) { background: var(--color-primary); color: #fff; }
.qty-stepper__btn:disabled { opacity: .4; cursor: default; }
.qty-stepper__input {
    width: 52px; border: 0; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
    text-align: center; font: inherit; font-weight: 600; padding: 8px 4px; background: #fff; -moz-appearance: textfield;
}
.qty-stepper__input::-webkit-outer-spin-button, .qty-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* In de winkelwagen staat de aantalkeuze onder de prijs. */
.wishlist-item__qty { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; }
.wishlist-item__qty .qty-stepper__btn { width: 32px; }
.wishlist-item__qty .qty-stepper__input { width: 46px; padding: 5px 2px; }
.wishlist-item__qty-fixed { color: var(--color-text-muted); font-size: .85rem; }
.wishlist-item__total { font-weight: 600; font-size: .9rem; color: var(--color-text); }
.wishlist-item__info .wishlist-item__total { color: var(--color-text); font-size: .9rem; }
/* Eindtotaal in de winkelwagen (boven de verzendknop). */
.cart-total { background: var(--color-tint); border-radius: var(--radius); padding: 14px 16px; margin-top: 16px; }
.cart-total__row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; font-size: .95rem; }
.cart-total__row span:last-child { text-align: right; }
.cart-total__total { border-top: 1px solid var(--color-border); margin-top: 6px; padding-top: 9px; font-weight: 700; font-size: 1.05rem; }
.cart-total .field-hint { margin: 6px 0 0; }
.inquiry-form { display: flex; flex-direction: column; gap: 16px; }

/* Bezorgkeuze (winkelwagen): twee klikbare keuzekaarten. */
.option-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.option-group legend { font-size: .85rem; font-weight: 600; padding: 0; margin-bottom: 6px; }
.option-card {
    display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
    border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px 14px;
    background: var(--color-surface);
}
.option-card:hover { border-color: var(--color-primary); }
.option-card:has(input:checked) { border-color: var(--color-primary); background: var(--color-tint); }
.option-card input { margin-top: 4px; flex-shrink: 0; }
.option-card__body { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.option-card__body small { color: var(--color-text-muted); }
.option-card__body ul { margin: 0; padding-left: 18px; color: var(--color-text-muted); font-size: .85rem; }
.option-card__price { color: var(--color-primary); font-variant-numeric: tabular-nums; }

/* Akkoord met tweedehands hobbyverkoop (winkelwagen). */
.terms-check {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px 14px;
    background: var(--color-surface); font-size: .9rem;
}
.terms-check input { margin-top: 4px; flex-shrink: 0; }
.terms-check:has(input:checked) { border-color: var(--color-primary); background: var(--color-tint); }
/* Honeypot-veld: onzichtbaar voor mensen, maar wél in de DOM (bots vullen dit soort
   verborgen velden vaak toch in) — bewust geen display:none/visibility:hidden, want
   sommige bots negeren die en vullen het dan alsnog niet in. */
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* ---------- Beheer: bestelafhandeling ---------- */
.order-card { margin-bottom: 20px; }
.order-badge {
    display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700;
    background: #eef1f6; color: var(--color-text-muted); white-space: nowrap;
}
.order-badge--open { background: #fff3d6; color: #8a5a00; }
.order-badge--betaalverzoek { background: #e3edf8; color: var(--color-primary-dark); }
.order-badge--betaald { background: #e6f3e6; color: var(--color-success); }
.order-badge--verzonden, .order-badge--opgehaald { background: #d8efdd; color: #1f6b34; }
.order-badge--geannuleerd { background: #fbeceb; color: var(--color-danger); }
.order-summary { display: grid; gap: 10px; margin: 0; }
.order-summary > div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: start; }
.order-summary dt { color: var(--color-text-muted); font-size: .85rem; font-weight: 600; }
.order-summary dd { margin: 0; overflow-wrap: anywhere; }
.order-items { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.order-items li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.order-items__meta { color: var(--color-text-muted); font-size: .85rem; }
.order-total { margin: 0 0 6px; font-size: 1.1rem; }
.order-amount-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 10px; }
.order-amount-form .field { max-width: 220px; }
.order-mail-form { display: flex; flex-direction: column; gap: 14px; }
.order-mail-form input, .order-mail-form textarea, .order-amount-form input { font-weight: 400; }
.order-mail-form textarea { font-family: inherit; line-height: 1.45; }
@media (max-width: 560px) {
    .order-summary > div { grid-template-columns: 1fr; gap: 2px; }
}.order-actions { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.order-actions__status .field { min-width: 180px; }.mail-help { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 10px 14px; background: #fafbfc; }
.mail-help summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.mail-help ul { margin: 10px 0 4px; padding-left: 18px; }
.mail-help code { background: #eef1f6; padding: 1px 5px; border-radius: 4px; }
.mail-preview { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; font-family: inherit; font-size: .9rem; line-height: 1.45; }.inquiries-heading { margin: 26px 0 12px; font-size: 1.5rem; }
.inquiries-done { margin-top: 8px; }
.inquiries-done > summary { cursor: pointer; list-style: none; }
.inquiries-done > summary::-webkit-details-marker { display: none; }
.inquiries-done > summary .inquiries-heading { display: inline-block; margin: 26px 0 12px; }
.inquiries-done > summary .inquiries-heading::before { content: "\25B8"; display: inline-block; margin-right: 8px; color: var(--color-text-muted); transition: transform .15s; }
.inquiries-done[open] > summary .inquiries-heading::before { transform: rotate(90deg); }
.order-badge--afgerond { background: #d8efdd; color: #1f6b34; }