/* =========================================================================
   Bricks2u.nl — design system
   Eén centrale stylesheet. Geen page-specifieke <style> blokken.
   ========================================================================= */

:root {
    /* Kleuren — licht thema */
    --bg:            #f6f7f9;
    --surface:       #ffffff;
    --surface-2:     #f1f3f6;
    --surface-sunk:  #eceef2;
    --border:        #e2e5ea;
    --border-strong: #cfd4dc;

    --text:          #1a1d23;
    --text-muted:    #5b6472;
    --text-faint:    #6b7480;

    --brand:         #d1131a;   /* Bricks2u rood */
    --brand-ink:     #a60f14;
    --brand-tint:    #fdecec;

    --accent:        #1f6feb;   /* data / links */
    --accent-tint:   #e8f0fe;

    --ok:            #16794a;
    --ok-tint:       #e4f4ec;
    --warn:          #9a6300;
    --warn-tint:     #fbefda;
    --bad:           #b22833;
    --bad-tint:      #fbe9ea;

    --score-excellent: #16794a;
    --score-good:      #3f7d20;
    --score-fair:      #9a6300;
    --score-poor:      #6b7280;

    /* Typografie */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fs-xs: .75rem;  --fs-sm: .875rem; --fs-base: 1rem;
    --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem;
    --lh-tight: 1.15; --lh-normal: 1.55;

    /* Ruimte */
    --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
    --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;

    /* Vorm */
    --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
    --shadow-md: 0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.04);
    --shadow-lg: 0 12px 32px rgba(16,24,40,.12);

    --transition: 160ms cubic-bezier(.4, 0, .2, 1);
    --maxw: 1160px;

    /* Hoofdnav-pil: licht thema blijft transparant, net als de rest van de header */
    --nav-pill-bg:        transparent;
    --nav-pill-text:      var(--text-muted);
    --nav-pill-text-hover:var(--text);
    --nav-pill-hover-bg:  var(--surface-2);
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            #0f1216;
        --surface:       #171b21;
        --surface-2:     #1e232b;
        --surface-sunk:  #12161c;
        --border:        #2a303a;
        --border-strong: #3a4250;

        --text:          #e7eaef;
        --text-muted:    #a3adbb;
        --text-faint:    #8b95a5;

        --brand:         #ff5a60;
        --brand-ink:     #ff8388;
        --brand-tint:    #37181a;

        --accent:        #6ea8fe;
        --accent-tint:   #16233b;

        --ok: #4ac48a; --ok-tint: #14301f;
        --warn: #e0a942; --warn-tint: #33280f;
        --bad: #ff6b74; --bad-tint: #351a1d;

        --score-excellent: #4ac48a;
        --score-good:      #8fce6b;
        --score-fair:      #e0a942;
        --score-poor:      #9aa3b2;

        --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
        --shadow-md: 0 6px 16px rgba(0,0,0,.45);
        --shadow-lg: 0 16px 40px rgba(0,0,0,.55);

        --nav-pill-bg:         #15181d;
        --nav-pill-text:       #b7bfcb;
        --nav-pill-text-hover: #fff;
        --nav-pill-hover-bg:   rgba(255,255,255,.08);
    }
}

:root[data-theme="dark"] {
    --bg:            #0f1216;
    --surface:       #171b21;
    --surface-2:     #1e232b;
    --surface-sunk:  #12161c;
    --border:        #2a303a;
    --border-strong: #3a4250;
    --text:          #e7eaef;
    --text-muted:    #a3adbb;
    --text-faint:    #8b95a5;
    --brand:         #ff5a60;
    --brand-ink:     #ff8388;
    --brand-tint:    #37181a;
    --accent:        #6ea8fe;
    --accent-tint:   #16233b;
    --ok: #4ac48a; --ok-tint: #14301f;
    --warn: #e0a942; --warn-tint: #33280f;
    --bad: #ff6b74; --bad-tint: #351a1d;
    --score-excellent: #4ac48a;
    --score-good:      #8fce6b;
    --score-fair:      #e0a942;
    --score-poor:      #9aa3b2;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 6px 16px rgba(0,0,0,.45);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.55);

    --nav-pill-bg:         #15181d;
    --nav-pill-text:       #b7bfcb;
    --nav-pill-text-hover: #fff;
    --nav-pill-hover-bg:   rgba(255,255,255,.08);
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: var(--lh-tight); margin: 0 0 var(--sp-3); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
p { margin: 0 0 var(--sp-4); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
small { font-size: var(--fs-sm); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

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

/* --------------------------------------------------------------- layout */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }
.stack > * + * { margin-top: var(--sp-4); }
.site-main { padding: var(--sp-6) 0 var(--sp-8); min-height: 60vh; }
.section { margin-top: var(--sp-7); }
.section:first-child { margin-top: var(--sp-5); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.section__head h2 { margin: 0; }
.section__link { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }

.grid { display: grid; gap: var(--sp-4); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* --------------------------------------------------------- discover-also */
.discover-also__grid { grid-template-columns: repeat(3, 1fr); }
.discover-also__card {
    display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4);
    border: 1px solid var(--border); border-radius: var(--radius, 12px); background: var(--surface); color: var(--text);
    transition: var(--transition);
}
.discover-also__card:hover { background: var(--surface-2); border-color: var(--border-strong); text-decoration: none; }
.discover-also__icon {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    font-size: 1.25rem; border-radius: var(--radius-sm); background: var(--accent-tint);
}
.discover-also__title { font-weight: 700; }
.discover-also__desc { font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 640px) {
    .discover-also__grid { grid-template-columns: 1fr; }
}
.grid--wide  { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* --------------------------------------------------------------- header */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--border);
}
.site-header__bar { display: flex; align-items: center; gap: var(--sp-5); height: 64px; }
.site-header__logo { display: flex; align-items: center; gap: var(--sp-2); font-weight: 800; font-size: var(--fs-lg); color: var(--text); letter-spacing: -.02em; }
.site-header__logo:hover { text-decoration: none; }
.site-header__logo { flex: none; }
.site-header__logo img { height: 34px; width: auto; }
.site-header__logo-img--dark, .site-header__logo-icon { display: none; }
:root[data-theme="dark"] .site-header__logo-img--light { display: none; }
:root[data-theme="dark"] .site-header__logo-img--dark { display: block; }
.site-nav {
    display: flex; align-items: center; gap: var(--sp-1); margin-left: auto;
    background: var(--nav-pill-bg); border-radius: 999px; padding: var(--sp-1);
}
.site-nav > a, .nav-link {
    padding: var(--sp-2) var(--sp-4); border-radius: 999px;
    color: var(--nav-pill-text); font-weight: 600; font-size: var(--fs-sm);
    transition: var(--transition); display: inline-flex; align-items: center; gap: var(--sp-1);
}
.site-nav > a:hover, .site-nav > a[aria-current="page"],
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--nav-pill-text-hover); background: var(--nav-pill-hover-bg); text-decoration: none; }
.nav-link__caret { font-size: .7em; transition: transform .15s ease; }

/* --------------------------------------------------------- nav-dropdown */
.nav-item { position: relative; }
.nav-item--dropdown:hover .nav-link, .nav-item--dropdown:focus-within .nav-link { color: var(--accent); background: var(--nav-pill-hover-bg); }
.nav-item--dropdown:hover .nav-link__caret, .nav-item--dropdown:focus-within .nav-link__caret { transform: rotate(180deg); }
/* Onzichtbare brug tussen trigger en paneel: zonder deze marge verdwijnt de
   dropdown zodra de muis het gat tussen pil en paneel oversteekt (de hover
   raakt dan geen enkel element meer aan). padding groeit de hover-hitbox,
   negative margin voorkomt dat dit de lay-out beïnvloedt. */
.nav-item--dropdown { padding-bottom: 14px; margin-bottom: -14px; }

.nav-dropdown {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    min-width: 320px; background: var(--surface); border-radius: var(--radius, 12px);
    box-shadow: var(--shadow-md); border: 1px solid var(--border);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 200; display: flex;
}
.nav-dropdown::before {
    content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border);
}
.nav-item--dropdown:hover .nav-dropdown, .nav-item--dropdown:focus-within .nav-dropdown,
.nav-dropdown.is-open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dropdown__col { padding: var(--sp-3); }
.nav-dropdown__col--featured { display: flex; flex-direction: column; min-width: 300px; }
.nav-dropdown__card {
    display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3);
    border-radius: var(--radius-sm); color: var(--text);
}
.nav-dropdown__col--featured .nav-dropdown__card + .nav-dropdown__card { border-top: 1px solid var(--border); margin-top: var(--sp-1); padding-top: var(--sp-3); }
.nav-dropdown__card:hover { background: var(--surface-2); text-decoration: none; }
.nav-dropdown__icon {
    flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; border-radius: var(--radius-sm); background: var(--accent-tint);
}
.nav-dropdown__body { display: flex; flex-direction: column; gap: 2px; }
.nav-dropdown__title { font-weight: 700; color: var(--text); }
.nav-dropdown__desc { font-size: var(--fs-xs); color: var(--text-muted); }
.nav-mobile-only--sub { display: none; }

.site-header__actions { display: flex; align-items: center; gap: var(--sp-2); }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
    cursor: pointer; transition: var(--transition);
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
.icon-btn--search {
    width: auto; height: 40px; gap: var(--sp-2); padding: 0 var(--sp-4);
    font-size: var(--fs-sm); font-weight: 600; color: var(--text);
    background: var(--surface); border-color: var(--border-strong);
}
.icon-btn--search:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); text-decoration: none; }
.icon-btn--search svg { width: 18px; height: 18px; flex: none; }
.icon-btn--admin { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); font-size: 1.1rem; }
.btn--admin-edit { margin-left: var(--sp-2); padding: 2px var(--sp-3); font-size: var(--fs-xs); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); vertical-align: middle; }
.btn--admin-edit:hover { color: var(--brand-ink); border-color: var(--brand); background: var(--brand-tint); }
.icon-btn--admin:hover { color: var(--brand-ink); border-color: var(--brand); background: var(--brand-tint); }
.hamburger { display: none; }
.social-links { display: flex; align-items: center; gap: var(--sp-2); }
.icon-btn--social { text-decoration: none; }
.icon-btn--social svg { width: 18px; height: 18px; }
.icon-btn--social:hover { text-decoration: none; }
.icon-btn--facebook:hover { color: #1877f2; border-color: #1877f2; }
.icon-btn--instagram:hover { color: #e1306c; border-color: #e1306c; }
.site-nav .nav-mobile-only { display: none; }

/* --------------------------------------------------------------- buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-sm);
    font-weight: 650; font-size: var(--fs-sm); line-height: 1;
    border: 1px solid transparent; cursor: pointer; transition: var(--transition);
    text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-ink); }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { background: var(--bad-tint); color: var(--bad); border-color: var(--bad); }
.btn--danger:hover { background: var(--bad); color: #fff; }
.btn--block { width: 100%; }
.btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-base); }

/* --------------------------------------------------------------- cards */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
a.card:hover { text-decoration: none; }
.card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }

.set-card__media {
    aspect-ratio: 4 / 3; background: var(--surface-2);
    display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
    position: relative; overflow: hidden;
}
.set-card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
:root[data-theme="dark"] .set-card__media img { mix-blend-mode: normal; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .set-card__media img { mix-blend-mode: normal; }
}
.set-card__noimg { color: var(--text-faint); font-size: var(--fs-sm); }
.set-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.set-card__theme { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
.set-card__title { font-size: var(--fs-sm); font-weight: 650; color: var(--text); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.set-card__price-row { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: auto; }
.set-card__price { font-size: var(--fs-lg); font-weight: 800; color: var(--text); }
.set-card__retail { font-size: var(--fs-xs); color: var(--text-faint); text-decoration: line-through; }
.set-card__compare { font-size: var(--fs-xs); color: var(--text-muted); }
.set-card__compare--best { align-self: flex-start; font-weight: 700; color: var(--ok); background: var(--ok-tint); padding: 1px var(--sp-2); border-radius: 999px; }
.set-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); }
.set-card__badges { position: absolute; top: var(--sp-3); left: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; }

/* --------------------------------------------------------------- badges */
.badge {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: 2px var(--sp-2); border-radius: var(--radius-pill);
    font-size: var(--fs-xs); font-weight: 700; line-height: 1.6;
    background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border);
}
.badge--discount { background: var(--brand-tint); color: var(--brand-ink); border-color: transparent; }
.badge--above    { background: var(--warn-tint); color: var(--warn); border-color: transparent; }
.badge--retiring { background: var(--warn-tint); color: var(--warn); border-color: transparent; }
.badge--retired  { background: var(--surface-sunk); color: var(--text-faint); }
.badge--new      { background: var(--accent-tint); color: var(--accent); border-color: transparent; }
.badge--hot      { background: var(--brand-tint); color: var(--brand-ink); border-color: transparent; }
.badge--warning  { background: var(--warn-tint); color: var(--warn); border-color: transparent; }

/* --------------------------------------------------------- deal score */
.dealscore { display: inline-flex; align-items: center; gap: var(--sp-2); }
.dealscore__dot {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.5rem; height: 2.5rem; padding: 0 var(--sp-2);
    border-radius: var(--radius-sm); font-weight: 800; font-size: var(--fs-base);
    color: #fff;
}
.dealscore__dot--excellent { background: var(--score-excellent); }
.dealscore__dot--good      { background: var(--score-good); }
.dealscore__dot--fair      { background: var(--score-fair); }
.dealscore__dot--poor      { background: var(--score-poor); }
.dealscore__label { font-size: var(--fs-sm); font-weight: 650; }
.dealscore--sm .dealscore__dot { min-width: 2rem; height: 2rem; font-size: var(--fs-sm); }

.marketvalue { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.marketvalue--sm { display: contents; }

/* --------------------------------------------------------------- hero */
.hero { padding: var(--sp-8) 0 var(--sp-7); text-align: center; }
.hero h1 { font-size: clamp(2rem, 5vw, var(--fs-4xl)); margin-bottom: var(--sp-3); }
.hero__sub { font-size: var(--fs-lg); color: var(--text-muted); max-width: 40ch; margin: 0 auto var(--sp-6); }

.searchbox { position: relative; max-width: 620px; margin: 0 auto; }
.searchbox input[type="search"] {
    width: 100%; padding: var(--sp-4) var(--sp-6); padding-right: 7rem;
    font-size: var(--fs-lg); border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    box-shadow: var(--shadow-md);
}
.searchbox button { position: absolute; right: 6px; top: 6px; bottom: 6px; }
.searchbox__suggestions {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); overflow: hidden; text-align: left;
}
.searchbox__suggestions:empty { display: none; }
.suggestion { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); color: var(--text); }
.suggestion:hover, .suggestion[aria-selected="true"] { background: var(--surface-2); text-decoration: none; }
.suggestion img { width: 40px; height: 40px; object-fit: contain; background: var(--surface-2); border-radius: var(--radius-sm); }
.suggestion__name { font-size: var(--fs-sm); font-weight: 600; }
.suggestion__meta { font-size: var(--fs-xs); color: var(--text-muted); margin-left: auto; }

/* --------------------------------------- thema- / aanbieder-tegels */
.tile { padding: var(--sp-5); gap: var(--sp-2); }
.tile__logo { min-height: 40px; display: flex; align-items: center; margin-bottom: var(--sp-1); }
.tile__logo img { max-height: 52px; max-width: 160px; width: auto; object-fit: contain; }
.tile__mono { font-size: var(--fs-2xl); font-weight: 800; color: var(--brand); line-height: 1; }
.tile__name { font-weight: 700; font-size: var(--fs-base); color: var(--text); }
.tile__stats { display: flex; flex-wrap: wrap; gap: 2px var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
.tile__note { font-size: var(--fs-sm); color: var(--text-faint); margin-top: auto; padding-top: var(--sp-2); }

.grid--themes { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--themes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grid--themes { grid-template-columns: 1fr; } }
.tile--themes .tile__logo { min-height: 64px; }
.tile--themes .tile__logo img { max-height: 72px; max-width: 100%; width: 100%; }
.tile--themes .tile__line { font-size: var(--fs-sm); color: var(--text-muted); text-align: center; }
.tile--themes .tile__line strong { font-weight: 700; color: var(--text); }

/* Veel merk-PNG's hebben donkere tekst zonder achtergrond en zijn dan
   onleesbaar op een donkere kaart. In dark mode een strak wit plaatje dat
   om het logo sluit (geen rand, geen brede balk). */
:root[data-theme="dark"] .tile__logo img,
:root[data-theme="dark"] .shop-hero__logo img { background: #fff; padding: 3px 5px; border-radius: 6px; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tile__logo img,
    :root:not([data-theme="light"]) .shop-hero__logo img { background: #fff; padding: 3px 5px; border-radius: 6px; }
}

/* thema- / aanbieder-detailkop: logo boven de titel, zonder kader */
.shop-hero { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.shop-hero__logo { margin-bottom: var(--sp-1); }
.shop-hero__logo img { max-height: 64px; max-width: 200px; width: auto; object-fit: contain; }

/* --------------------------------------- homepage feature (deal + nieuws) */
.home-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: var(--sp-5) var(--sp-6);
    align-items: stretch;
}
/* Beide kolommen even hoog: kop bovenaan, kaart vult de rest. */
.home-feature > section { margin: 0; display: flex; flex-direction: column; }
.home-feature .dotd,
.home-feature .news-flash { flex: 1; }

.news-flash {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5);
    display: flex; flex-direction: column;
}
.news-flash__list {
    list-style: none; margin: 0; padding: 0;
    flex: 1; display: flex; flex-direction: column; justify-content: space-between;
}
.news-flash__list li + li { border-top: 1px solid var(--border); }
.news-flash__list a {
    display: block; padding: var(--sp-3) 0; color: var(--text);
}
.news-flash__list a:hover { text-decoration: none; }
.news-flash__list a:hover .news-flash__title { color: var(--accent); }
.news-flash__date { display: block; font-size: var(--fs-xs); color: var(--text-faint); font-weight: 700; letter-spacing: .02em; }
.news-flash__title { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; margin-top: 2px; }

@media (max-width: 900px) {
    .home-feature { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- deal-of-the-day */
.dotd {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sp-6);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: var(--sp-6); align-items: center;
}
.dotd__media { background: var(--surface-2); border-radius: var(--radius); padding: var(--sp-5); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
.dotd__media img { max-height: 100%; width: auto; object-fit: contain; }
.dotd__eyebrow { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.dotd__price { font-size: var(--fs-3xl); font-weight: 800; }
.dotd__advice { color: var(--text-muted); font-size: var(--fs-sm); }
.dotd__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }

/* --------------------------------------------------------- set page */
.setpage__hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-6); align-items: start; }
.setpage__media { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-6); display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; }
.setpage__media img { max-height: 100%; width: auto; object-fit: contain; }
.set-specs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0; }
.set-specs span { font-size: var(--fs-xs); background: var(--surface-2); border-radius: var(--radius-pill); padding: 3px var(--sp-3); color: var(--text-muted); }

.priceblock { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); }
.priceblock--framed { background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.priceblock__big { font-size: var(--fs-3xl); font-weight: 800; }
.priceblock__row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-4); }
.priceblock__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.analysis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); }
.stat__label { font-size: var(--fs-xs); color: var(--text-muted); }
.stat__value { font-size: var(--fs-lg); font-weight: 750; margin-top: var(--sp-1); }
.stat__value.is-down { color: var(--ok); }
.stat__value.is-up { color: var(--bad); }

.advice-card { background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--radius-lg); padding: var(--sp-5); }
.advice-card h3 { margin-bottom: var(--sp-2); }

.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); max-width: 820px; }
.chart-card__ranges { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.chart-range { padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 650; cursor: pointer; }
.chart-range[aria-pressed="true"] { background: var(--text); color: var(--surface); border-color: var(--text); }
.chart-card canvas { max-height: 340px; }

/* --------------------------------------------------------- shop offers */
.offers { display: flex; flex-direction: column; gap: var(--sp-2); }
.offer {
    display: grid; grid-template-columns: 1.4fr .8fr .7fr 1fr auto; gap: var(--sp-3);
    align-items: center; padding: var(--sp-4);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.offer--best { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.offer__shop { font-weight: 650; }
.offer__price { font-weight: 800; font-size: var(--fs-lg); }
.offer__updated { font-size: var(--fs-xs); color: var(--text-muted); }

/* --------------------------------------------------------- breadcrumbs */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-5); }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs span[aria-current] { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------- empty / forms */
.empty-state { text-align: center; padding: var(--sp-7) var(--sp-5); color: var(--text-muted); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-weight: 650; font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.field input, .field textarea, .field select {
    width: 100%; padding: var(--sp-3) var(--sp-4); font: inherit; color: var(--text);
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.field .error { color: var(--bad); font-size: var(--fs-sm); margin-top: var(--sp-2); }
.form-notice { padding: var(--sp-4); border-radius: var(--radius); margin-bottom: var(--sp-4); }
.form-notice--ok { background: var(--ok-tint); color: var(--ok); }
.form-notice--bad { background: var(--bad-tint); color: var(--bad); }

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); margin-top: var(--sp-8); padding: var(--sp-7) 0 var(--sp-6); text-align: center; }
.site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-6); }
.site-footer h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.site-footer a { color: var(--text-muted); font-size: var(--fs-sm); }
.site-footer a:hover { color: var(--text); }
.site-footer__brand { margin-top: var(--sp-7); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.site-footer__brand p { margin: 0; font-size: var(--fs-sm); font-weight: 650; color: var(--text-muted); }
.site-footer__logo img { height: 40px; width: auto; }
.site-footer__logo-img--dark { display: none; }
:root[data-theme="dark"] .site-footer__logo-img--light { display: none; }
:root[data-theme="dark"] .site-footer__logo-img--dark { display: inline; }
.site-footer .social-links a { color: var(--text-muted); }
.site-footer .social-links a.icon-btn--facebook:hover { color: #1877f2; }
.site-footer .social-links a.icon-btn--instagram:hover { color: #e1306c; }
.site-footer__legal { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-faint); }

/* --------------------------------------------------------- pagination */
.pagination { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-6); }
.pagination__btn {
    display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
    padding: 0 var(--sp-3); border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--text); font-weight: 650; font-size: var(--fs-sm);
}
.pagination__btn:hover { background: var(--surface-2); text-decoration: none; }
.pagination__btn.is-current { background: var(--text); color: var(--surface); border-color: var(--text); }
.pagination__gap { align-self: center; color: var(--text-faint); }

/* ------------------------------------------------------- search page */
.search-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-6); align-items: start; margin-top: var(--sp-5); }
.filters { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); position: sticky; top: 80px; }
.filters h2 { font-size: var(--fs-base); margin-bottom: var(--sp-4); }
.filters fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-4); }
.filters legend { font-weight: 700; font-size: var(--fs-sm); margin-bottom: var(--sp-2); padding: 0; }
.filters .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.filters .field { margin-bottom: var(--sp-2); }
.results-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.results-head select { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; }
.filter-toggle { display: none; }

@media (max-width: 860px) {
    .search-layout { grid-template-columns: 1fr; }
    .filters { position: static; }
    .filter-toggle { display: inline-flex; }
    .filters[hidden] { display: none; }
}

/* --------------------------------------------------------- account */
.auth-card { max-width: 420px; margin: var(--sp-6) auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-6); }
.auth-card h1 { font-size: var(--fs-2xl); }
.auth-card .muted-links { margin-top: var(--sp-4); font-size: var(--fs-sm); display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }

.account-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: var(--sp-6); align-items: start; margin-top: var(--sp-5); }
.account-nav { display: flex; flex-direction: column; gap: var(--sp-1); position: sticky; top: 80px; }
.account-nav a { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 600; font-size: var(--fs-sm); }
.account-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.account-nav a[aria-current] { background: var(--brand-tint); color: var(--brand-ink); }
.account-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--sp-3); }

.tracked-table { width: 100%; border-collapse: collapse; }
.tracked-table th, .tracked-table td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); vertical-align: middle; }
.tracked-table img { width: 48px; height: 48px; object-fit: contain; background: var(--surface-2); border-radius: var(--radius-sm); }
.settings-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-4); }
.settings-section.danger { border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); }

@media (max-width: 800px) {
    .account-layout { grid-template-columns: 1fr; }
    .account-nav { position: static; flex-direction: row; flex-wrap: wrap; }
    .tracked-table thead { display: none; }
    .tracked-table tr { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--sp-3); padding: var(--sp-2); }
    .tracked-table td { border: 0; padding: var(--sp-2); }
}

/* ----------------------------------------------------------------- admin */
.admin-layout { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: var(--sp-5); margin-top: var(--sp-4); }
.admin-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 80px; }
.admin-nav a { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.admin-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.admin-nav a[aria-current] { background: var(--text); color: var(--surface); }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: var(--sp-3); }
.admin-grid .stat__value { font-size: var(--fs-xl); }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.admin-table th, .admin-table td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.admin-table th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
.admin-table tr.is-invalid { opacity: .55; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; background: var(--surface-2); color: var(--text-muted); }
.pill--on { background: var(--ok-tint); color: var(--ok); }
.pill--off { background: var(--bad-tint); color: var(--bad); }
.admin-bar { background: var(--brand-ink); color: #fff; font-size: var(--fs-xs); text-align: center; padding: 3px; }
.admin-bar a { color: #fff; text-decoration: underline; }
@media (max-width: 800px) { .admin-layout { grid-template-columns: 1fr; } .admin-nav { position: static; flex-direction: row; flex-wrap: wrap; } }

/* --------------------------------------------------------------- utils */
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--fs-sm); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Skip-link: onzichtbaar tot hij focus krijgt. */
a.visually-hidden:focus {
    position: fixed !important; top: var(--sp-3); left: var(--sp-3); width: auto; height: auto;
    clip: auto; padding: var(--sp-3) var(--sp-4); background: var(--surface); color: var(--text);
    border: 2px solid var(--accent); border-radius: var(--radius-sm); z-index: 999; font-weight: 700;
}

/* --------------------------------------------------------- responsive */
@media (max-width: 900px) {
    .dotd, .setpage__hero { grid-template-columns: 1fr; }
}
@media (max-width: 1150px) {
    .site-nav > a, .nav-link { white-space: nowrap; padding: var(--sp-2) var(--sp-3); }
}
@media (max-width: 920px) {
    .icon-btn--search { width: 40px; padding: 0; }
    .icon-btn--search span { display: none; }
    .site-header__bar { gap: var(--sp-3); }
    .site-nav > a, .nav-link { padding: var(--sp-2) 10px; }
}
/* Smalle desktop/tablet: alleen het beeldmerk, zodat de navigatie past */
@media (max-width: 1150px) and (min-width: 769px), (max-width: 460px) {
    .site-header__logo .site-header__logo-img--light,
    :root[data-theme="dark"] .site-header__logo .site-header__logo-img--dark { display: none; }
    .site-header__logo .site-header__logo-icon { display: block; border-radius: 7px; }
}
@media (max-width: 560px) {
    .searchbox input[type="search"] { font-size: var(--fs-base); padding: var(--sp-3) var(--sp-4); padding-right: 5.5rem; }
    .searchbox button.btn--lg { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); }
    .hero { padding: var(--sp-6) 0 var(--sp-5); }
}
@media (max-width: 768px) {
    .site-nav { display: none; }
    .hamburger { display: inline-flex; }
    .site-header__bar { gap: var(--sp-3); }
    .site-header__actions { gap: var(--sp-1); }
    .site-header__actions > a.icon-btn { display: none; } /* zoeken zit in het menu + de hero */
    .site-header__actions > a.icon-btn--admin { display: inline-flex; } /* admin-snelkoppeling blijft */
    .site-header__actions > a.icon-btn--search { display: inline-flex; width: 40px; padding: 0; } /* zoeken blijft zichtbaar, alleen icoon */
    .icon-btn--search span { display: none; }
    .site-header__actions .btn { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
    .site-nav--open {
        display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0;
        background: var(--surface); border-bottom: 1px solid var(--border); padding: var(--sp-3);
        gap: var(--sp-1); box-shadow: var(--shadow-md); margin-left: 0;
    }
    .site-nav--open .nav-mobile-only { display: block; border-top: 1px solid var(--border); margin-top: var(--sp-1); padding-top: var(--sp-3); }
    .offer { grid-template-columns: 1fr auto; grid-auto-rows: min-content; row-gap: var(--sp-1); }
    .offer__updated, .offer__diff { grid-column: 1 / -1; }

    /* Mobiel: dropdowns worden tap-to-expand accordions i.p.v. hover-panelen */
    .site-nav--open { border-radius: 0; }
    .site-nav--open > a, .site-nav--open .nav-link { color: var(--text-muted); border-radius: var(--radius-sm); width: 100%; }
    .site-nav--open > a:hover, .site-nav--open > a[aria-current="page"],
    .site-nav--open .nav-link:hover, .site-nav--open .nav-link[aria-current="page"] { color: var(--text); background: var(--surface-2); }
    .site-nav--open .nav-item--dropdown:hover .nav-link,
    .site-nav--open .nav-item--dropdown:focus-within .nav-link { color: var(--accent); background: var(--surface-2); }
    .nav-item { width: 100%; }
    .nav-item--dropdown { display: flex; flex-direction: column; padding-bottom: 0; margin-bottom: 0; }
    .nav-dropdown, .nav-item--dropdown:hover .nav-dropdown, .nav-item--dropdown:focus-within .nav-dropdown {
        position: static; transform: none; min-width: 0; box-shadow: none; border: none; background: transparent;
        opacity: 0; visibility: hidden; pointer-events: none; display: none;
    }
    .nav-dropdown::before { display: none; }
    .nav-dropdown.is-open, .nav-item--dropdown:hover .nav-dropdown.is-open, .nav-item--dropdown:focus-within .nav-dropdown.is-open {
        display: flex; flex-direction: column; opacity: 1; visibility: visible; pointer-events: auto;
        position: static; transform: none;
    }
    .site-nav--open .nav-mobile-only--sub { padding-top: var(--sp-2); margin-top: 0; border-top: none; font-size: var(--fs-sm); }
}