/* ShoeTracker — één stylesheet, geen frameworks.
   Ontwerp "Startnummer": papier en inkt op haarlijnen, geen schaduwen en geen
   afgeronde hoeken, één signaalkleur die de weg wijst. De vergelijking is een
   uitslagenlijst, dus de goedkoopste regel is zwart gevuld en de cijfers staan
   in een smalle snit met tabellarische cijfers, zodat prijzen uitlijnen. */

/* Barlow, zelf gehost in assets/fonts/ — de site haalt niets van buiten.
   Alleen de latin-subset (7 bestanden, samen 152 KB): dat dekt Nederlands
   inclusief het euroteken. Een teken dat erbuiten valt, valt terug op de
   systeemletter. Licentie: SIL Open Font License 1.1, zie fonts/OFL.txt. */

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/barlow-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/barlow-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/barlow-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/barlow-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/barlow-condensed-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/barlow-condensed-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light dark;

    /* Papier en inkt. In donkere modus wisselen ze om, zodat elke regel die
       "inkt op papier" is vanzelf "papier op inkt" wordt. */
    --paper:       #f2f0ea;
    --ink:         #17171a;

    --bg:          var(--paper);
    --surface:     #fbfaf6;
    --surface-alt: #eae7dd;
    --border:      #d5d0c2;
    --border-soft: #e2ded2;
    --text:        var(--ink);
    --text-muted:  #55555c;

    /* Tekst op een inktvlak (de goedkoopste regel, een actief filter). */
    --on-ink:        var(--paper);
    --muted-on-ink:  #a8a6a0;
    --ok-on-ink:     #8fd6a8;

    /* Signaal: de knop naar de winkel, het actieve filter, het prijsverschil.
       Niet voor "goed" of "fout" — daar zijn --ok en --danger voor. */
    --accent:      #c1301a;
    --accent-soft: #f6e6e2;
    --on-accent:   #ffffff;

    /* Gratis verzending, op voorraad, een prijs die zakt. */
    --ok:          #2f7a4c;
    --ok-soft:     #e4f0e8;

    --danger:      #a3352d;
    --danger-soft: #f8e7e5;
    --warn:        #7a5810;
    --warn-soft:   #f4ecd7;

    --thumb-bg:    #ffffff;

    /* Silhouet voor een foto die niet laadt. Getekend, niet geleend. */
    --shoe-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 140 76%27%3E%3Cpath d=%27M10 56c0-9 5-16 14-19l26-9c6-2 10-6 13-11l6-10c2-4 7-5 11-3l5 3c4 2 5 7 3 11l-4 7c-2 4 0 8 4 9l25 8c10 3 17 9 17 16v3H14a4 4 0 0 1-4-4z%27/%3E%3C/svg%3E");
    --radius:      0;
    --shadow:      none;

    /* Smalle snit voor koppen, prijzen en rangnummers; de gewone voor de tekst.
       Laadt een face niet, dan neemt de smalle systeemletter het over. */
    --font-display: "Barlow Condensed", "Bahnschrift", "DIN Alternate",
                    "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
    --font-body: "Barlow", "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper:       #131316;
        --ink:         #edebe4;

        --surface:     #1b1b20;
        --surface-alt: #232329;
        --border:      #3a3a42;
        --border-soft: #2c2c33;
        --text-muted:  #9a9890;

        --muted-on-ink: #55555c;
        --ok-on-ink:    #2f7a4c;

        --accent:      #f2603f;
        --accent-soft: #331a14;
        --on-accent:   #17171a;

        --ok:          #7fd79e;
        --ok-soft:     #17291f;

        --danger:      #f0897f;
        --danger-soft: #331e1c;
        --warn:        #e3b661;
        --warn-soft:   #302818;

        /* Productfoto's hebben een witte achtergrond: die gaat op in een licht vlak. */
        --thumb-bg:    #e9e7e0;
    }
}

* { box-sizing: border-box; }

/* Ook voor elementen met een eigen display, zoals de productkaarten. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.55 var(--font-body);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px 88px;
}

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

.masthead {
    border-bottom: 1px solid var(--ink);
    background: var(--bg);
}

.masthead__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
    height: 76px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Woordmerk: een blokje in de signaalkleur, als het streepje op een startnummer. */
.brand {
    display: flex;
    align-items: center;
    /* Geen gap: "shoe" en "tracker" zijn twee flex-items en zouden uit elkaar vallen. */
    gap: 0;
    margin-right: auto;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 25px;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
}

.brand::before {
    content: '';
    display: block;
    width: 13px;
    height: 22px;
    margin-right: 11px;
    background: var(--accent);
}

.brand span { font-weight: 700; color: inherit; transition: color .15s; }
.brand:hover span { color: var(--accent); }

.masthead nav {
    display: flex;
    align-items: center;
    gap: 26px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.masthead nav a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    text-decoration: none;
}

.masthead nav a:hover { color: var(--text); }
.masthead nav a[aria-current] { color: var(--text); border-bottom-color: var(--accent); }

/* -------------------------------------------------------------------- kop */

.pagehead { padding: 52px 0 30px; }

.pagehead h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 64px;
    line-height: .96;
    letter-spacing: -.005em;
}

.pagehead .brandline {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 10px;
}

.pagehead p { color: var(--text-muted); margin: 16px 0 0; max-width: 62ch; }

.backlink {
    display: inline-block;
    margin-top: 26px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
}

.backlink:hover { color: var(--accent); }

/* ------------------------------------------------------------------ cards */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    margin: 0 0 22px;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--ink);
}

.stat { background: transparent; padding: 18px 22px; border-left: 1px solid var(--border-soft); }
.stat:first-child { border-left: 0; padding-left: 0; }

.stat dt {
    margin: 0 0 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.stat dd {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat dd small { font-size: 15px; font-weight: 500; color: var(--text-muted); }
.stat--accent dd { color: var(--accent); }

/* ------------------------------------------- goedkoopste prijs (productpagina) */

/* Eén prijs is de hoofdpersoon: die van de winkel waar je nu heen zou gaan.
   De andere cijfers zakken naar het lijstje ernaast. */
.deal {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 30px;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--ink);
}

.deal__main {
    flex: 1 1 420px;
    padding: 26px 40px 28px 0;
    border-right: 1px solid var(--border);
}

.deal__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
}

.deal__price {
    margin: 8px 0 4px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 84px;
    line-height: .95;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.deal__where { color: var(--text-muted); }
.deal__where strong { color: var(--text); font-weight: 600; }
.deal__go { margin-top: 22px; }

.deal__side {
    flex: 1 1 340px;
    padding: 22px 0 22px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.deal__list { margin: 0; }

.deal__list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
}

.deal__list dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.deal__list dd {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 27px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.deal__list dd small { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.deal__note { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }

/* ------------------------------------------------------------------ zoeken */

.search {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ink);
}

.search__icon {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--text);
}

.search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 29px;
    /* 600 en niet 500: alle andere invoervelden staan ook op 600, en een eigen
       snit voor dit ene veld kostte een lettertypebestand van 21 kB. */
    font-weight: 600;
    outline: none;
}

.search__input::placeholder { color: var(--text-muted); }
.search__input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/* ----------------------------------------------------------------- filters */

.filters {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.filters__label {
    flex: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 4px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* 44 px: groot genoeg om met een duim te raken. */
    min-height: 44px;
    padding: 0 15px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.chip:hover { border-color: var(--ink); color: var(--text); }
.chip[aria-current] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--on-ink);
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .chip[aria-current] .chip__count { color: var(--muted-on-ink); }
}

/* Het kleurvierkantje voor het kleurfilter op de productpagina. */
.swatch {
    display: block;
    width: 13px;
    height: 13px;
    flex: none;
    border: 1px solid var(--border);
}

/* ------------------------------------------------------------------ tabel */

/* De tabel heeft zijn eigen haarlijnen; het kaartje eromheen mag weg. */
.card:has(> .offers) { background: transparent; border: 0; }

.offers { width: 100%; border-collapse: collapse; }

.offers th {
    padding: 0 12px 11px;
    border-bottom: 1px solid var(--ink);
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.offers td {
    padding: 16px 12px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}

/* Elke rij houdt links ruimte voor het streepje van de goedkoopste, zodat
   alleen de kleur verschilt en de kolommen niet verspringen. */
.offers th:first-child,
.offers td:first-child { border-left: 3px solid transparent; }

.offers tr:last-child td { border-bottom: 0; }
.offers tbody tr:hover { background: var(--surface-alt); }

.offers .rank {
    width: 52px;
    padding-right: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 32px;
    line-height: 1;
    color: var(--text-muted);
}

/* De goedkoopste regel: een streepje in de signaalkleur en een ietsje lichter
   vlak. Genoeg om hem te vinden, te weinig om de rest weg te drukken. De
   knop op die regel is toch al de enige gevulde. */
.offers tr.is-best td { background: var(--surface); }
.offers tr.is-best:hover td { background: var(--surface-alt); }
.offers tr.is-best td:first-child { border-left-color: var(--accent); }
.offers tr.is-best .rank { color: var(--accent); font-weight: 700; }
.offers tr.is-unavailable td { opacity: .55; }

.shop { font-weight: 600; }
.shop a { text-decoration: none; }
.shop a:hover { text-decoration: underline; }

.shop__meta {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

.price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.005em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.price--none { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--text-muted); }

.subprice {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.subprice--muted { color: var(--text-muted); }
.subprice--free  { color: var(--ok); font-weight: 600; }

.price__delta {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.price__delta.down { color: var(--ok); }
.price__delta.up   { color: var(--danger); }

.badge {
    display: inline-block;
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge--in    { background: transparent; color: var(--ok);     border-color: transparent; padding-left: 0; padding-right: 0; }
.badge--out   { background: transparent; color: var(--text-muted); border-color: transparent; padding-left: 0; padding-right: 0; }
.badge--warn  { background: var(--warn-soft);   color: var(--warn);   border-color: transparent; }
.badge--ghost { background: transparent; }

.when { color: var(--text-muted); font-size: 13px; white-space: nowrap; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid var(--accent);
    border-radius: 0;
    background: var(--accent);
    color: var(--on-accent);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn:hover { filter: brightness(1.1); }

.btn--ghost {
    background: transparent;
    border-color: var(--ink);
    color: var(--text);
}

.btn--ghost:hover { background: var(--surface-alt); filter: none; }

@media (prefers-color-scheme: dark) {
    .btn { font-weight: 700; }
}

/* ------------------------------------------------------------------ grafiek */

.chart { padding: 24px 26px 18px; margin-top: 30px; }

.chart h2, .section h2 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.1;
}

.chart p.sub, .section p.sub {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 14px;
}

.chart svg { display: block; width: 100%; height: auto; overflow: visible; }

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

.section { margin-top: 34px; }

.section__head { margin-bottom: 14px; }

.notice {
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
}

.notice--warn   { background: var(--warn-soft);   border-color: transparent; color: var(--warn); }
.notice--ok     { background: var(--ok-soft);     border-color: transparent; color: var(--ok); }
.notice--danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }

.notice strong { font-weight: 700; }

/* ------------------------------------------------------ productoverzicht */

/* Geen kaartjes maar regels onder elkaar, gescheiden door een haarlijn. */
.products { display: grid; gap: 0; border-top: 1px solid var(--ink); }

.product-card {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 21px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
}

.product-card { position: relative; }
.product-card:hover { border-color: var(--border-soft); background: var(--surface-alt); }
.product-card h2 a { color: inherit; text-decoration: none; }

.product-card h2 a::after { content: ''; position: absolute; inset: 0; }
.product-card__end { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }
.product-card h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 31px; line-height: 1.05; letter-spacing: 0; }
.product-card .brandline { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 5px; }
.product-card .meta { color: var(--text-muted); font-size: 14px; margin-top: 6px; }
.product-card .best { text-align: right; min-width: 148px; }
.product-card .best span { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.product-card .best strong { display: block; font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1.08; letter-spacing: -.005em; font-variant-numeric: tabular-nums; }

/* Het verschil tussen de goedkoopste en de duurste winkel: waarom vergelijken loont. */
.product-card .spread { display: block; font-size: 13px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.product-card .spread--none { color: var(--text-muted); }

/* ----------------------------------------------------------------- foto's */

/* Flex, geen grid: in een grid is de rij auto-hoog, en dan lost "100%" op de
   foto niet op. Die kreeg daardoor zijn eigen vierkante hoogte en werd door
   overflow: hidden onderaan afgesneden — precies waar de zool zit. Bij flex is
   de hoogte van het vak wél bepaald, dus past de foto er altijd in. */
.thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: none;
    width: 132px;
    height: 84px;
    border: 1px solid var(--border-soft);
    border-radius: 0;
    background: var(--thumb-bg);
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.thumb:not(:has(img)) { background: var(--surface); border: 1px solid var(--border-soft); }
.thumb:not(:has(img))::before {
    content: '';
    flex: none;
    width: 58%;
    height: 50%;
    opacity: .3;
    background: var(--text-muted);
    -webkit-mask: var(--shoe-mask) center / contain no-repeat;
    mask: var(--shoe-mask) center / contain no-repeat;
}

.thumb--large { width: 336px; height: 214px; border-radius: 0; }
.thumb--large:not(:has(img))::before { width: 62%; height: 54%; }
.thumb--small { width: 62px; height: 44px; border-radius: 0; }
.thumb--small:not(:has(img))::before { width: 66%; height: 58%; }

.product-head { display: flex; align-items: flex-start; gap: 44px; }
.product-head > div { flex: 1 1 auto; min-width: 0; }
.shop__line { display: flex; align-items: center; gap: 14px; }

/* -------------------------------------------------------------- formulier */

.form { padding: 24px; display: grid; gap: 16px; }
.form label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px; }
.form .hint { font-weight: 400; color: var(--text-muted); font-size: 13px; margin-top: 6px; letter-spacing: 0; text-transform: none; }

.form input[type=url],
.form input[type=text],
.form input[type=email],
.form input[type=search],
.form select {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}

.form input:focus, .form select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.retailer-list { width: 100%; border-collapse: collapse; }
.retailer-list td, .retailer-list th { padding: 13px 16px; border-bottom: 1px solid var(--border-soft); text-align: left; font-size: 14px; }
.retailer-list th { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--ink); }
.retailer-list tr:last-child td { border-bottom: 0; }

.foot {
    margin-top: 64px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
    max-width: 62ch;
}

.foot code {
    font-size: 12.5px;
    background: var(--surface-alt);
    padding: 2px 5px;
}

/* ------------------------------------------------------------------ mobiel */

@media (max-width: 720px) {
    .wrap { padding: 0 16px 56px; }
    .masthead__inner { padding: 0 16px; height: 62px; }
    .masthead nav { gap: 16px; font-size: 12px; }
    .pagehead { padding: 30px 0 22px; }
    .pagehead h1 { font-size: 42px; }
    .search__input { font-size: 23px; }

    .deal__main { flex-basis: 100%; padding: 20px 0 22px; border-right: 0; border-bottom: 1px solid var(--border); }
    .deal__price { font-size: 58px; }
    .deal__side { flex-basis: 100%; padding: 16px 0 20px; }
    .deal__go { display: flex; width: 100%; }

    /* Op smalle schermen wordt elke rij een kaartje: rangnummer links,
       totaalprijs rechts, en daaronder prijs + verzending + voorraad op één regel. */
    .offers thead { display: none; }
    .offers tbody tr {
        display: block;
        position: relative;
        padding: 14px 14px 14px 46px;
        border-bottom: 1px solid var(--border-soft);
    }
    .offers tbody tr:last-child { border-bottom: 0; }
    .offers td { border: 0; padding: 0; }

    /* De rij is hier een blok, geen tabelrij: streep en vlak horen op de rij
       zelf, anders kleurt elke cel zijn eigen vlakje en blijven er gaten tussen. */
    .offers tr.is-best { background: var(--surface); border-left: 3px solid var(--accent); padding-left: 43px; }
    .offers tr.is-best td,
    .offers tr.is-best:hover td { background: transparent; border-left: 0; }

    .offers .rank { position: absolute; left: 12px; top: 14px; width: auto; font-size: 26px; }
    .offers .cell-total { position: absolute; right: 14px; top: 12px; text-align: right; }
    /* Alleen de winkelnaam hoeft plaats te laten voor de totaalprijs rechtsboven. */
    .offers .cell-shop { display: block; }
    .offers .shop__line { align-items: flex-start; }
    .offers .cell-total .price { font-size: 26px; }
    .offers .shop__line > div > a { display: block; margin-right: 120px; }
    .offers .thumb--small { width: 48px; height: 36px; }

    .offers .cell-price,
    .offers .cell-ship,
    .offers .cell-stock { display: inline-block; margin: 7px 8px 0 0; vertical-align: middle; }

    .offers .cell-price::after { content: ' +'; color: var(--text-muted); }
    .offers .cell-ship { margin-left: -4px; }
    .offers .cell-link { display: block; margin-top: 12px; }
    .offers .cell-link .btn { display: flex; }
    .form .row { grid-template-columns: 1fr; }

    /* Foto links, naam en prijs eronder in de tweede kolom. */
    .product-card { grid-template-columns: 84px minmax(0, 1fr); gap: 8px 16px; padding: 16px 0; }
    .product-card .thumb { width: 84px; height: 58px; grid-row: span 2; }
    .product-card h2 { font-size: 25px; }
    .product-card__end { grid-column: 2; justify-content: space-between; }
    .product-card .best { text-align: left; min-width: 0; }
    .product-card .best span { display: inline; margin-right: 6px; }
    .product-card .best strong { display: inline-block; font-size: 27px; }
    .product-card .spread { display: inline-block; margin-left: 8px; }

    /* Het belletje hoort rechtsboven, niet onder de foto op een eigen regel. */
    .product-head { gap: 18px; position: relative; padding-right: 62px; }
    .product-head .bell--large { position: absolute; top: 0; right: 0; margin: 0; }
    .thumb--large { width: 132px; height: 92px; border-radius: 0; }
}

/* ------------------------------------------------------ catalogus & beheer */

.masthead nav .count {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: 1px;
    border-radius: 0;
    background: var(--warn-soft);
    color: var(--warn);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.chip__count { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.badge--type {
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 600;
    vertical-align: 1px;
    color: var(--text-muted);
}

.result-count { margin: 6px 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.admin-warning, .flash { margin: 22px 0 0; }

.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.toolbar > .sub { margin-right: auto; }

.btn--small { min-height: 34px; padding: 0 12px; font-size: 12.5px; }

.table-wrap { overflow-x: auto; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions form { display: inline-block; margin-left: 4px; }

/* Samenvoegen: kandidaten per groep, het model waarvan je de naam koos gemarkeerd. */
.merge-group { margin-bottom: 18px; }
.merge-group summary { cursor: pointer; font-weight: 600; margin-bottom: 10px; }
.merge-group tr.is-preferred { background: var(--accent-soft); }

/* wachtrij */
.group { padding: 20px 22px; margin-bottom: 16px; }

.group__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}
.group__head h2 { margin: 0 0 3px; font-family: var(--font-display); font-weight: 600; font-size: 25px; line-height: 1.1; }

.group__offers { list-style: none; margin: 0 0 12px; padding: 0; }
.group__offers li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--border-soft);
    font-size: 14px;
}
.group__offers li a { color: var(--text-muted); margin-left: 6px; }
.group__offers li a:hover { color: var(--text); }

.group__suggestion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: 0;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    margin-bottom: 10px;
    font-size: 14px;
}

.group__decide summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13.5px;
    padding: 4px 0;
}
.group__decide[open] summary { margin-bottom: 10px; }

.form--inline { padding: 0; gap: 10px; }
.form .row--4 { grid-template-columns: 1fr 2fr .7fr 1fr; }
.form--inline label { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.form--inline input { margin-top: 3px; }

.group select, .models-table select, .select-inline, .search-inline,
.rename input[type=text] {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
}
.link-other { margin-top: 10px; }
.link-other select { max-width: 360px; }

.select-inline { margin-left: auto; }
.search-inline { min-width: 180px; }

.rename summary { font-size: 12px; color: var(--text-muted); cursor: pointer; margin-top: 3px; }
.rename form { margin-top: 6px; }

.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 26px; }
.pager__page { min-width: 46px; padding: 0 10px; text-align: center; font-variant-numeric: tabular-nums; }
.pager__page[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); cursor: default; }
.pager__gap { align-self: center; color: var(--text-muted); padding: 0 2px; }

/* Een filterkeuze die met de andere filters niets oplevert. */
.chip--empty { opacity: .45; }

.code-card { padding: 16px 18px; display: grid; gap: 8px; }
.code-card code {
    font-size: 13px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 8px 11px;
    overflow-x: auto;
    white-space: nowrap;
}

.stat dd a { text-decoration: none; }
.stat dd a:hover { text-decoration: underline; }

@media (max-width: 720px) {
    .form .row--4 { grid-template-columns: 1fr 1fr; }
    .group__offers li { flex-direction: column; align-items: flex-start; }
    .select-inline { margin-left: 0; }
    .stats { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
    .stat { padding: 14px 12px; }
    .stat dd { font-size: 28px; }
}

/* ------------------------------------------------------------- prijsalarm */

/* Kleur van de tekst komt van .btn: wit, en in donkere modus juist donker. */
.btn--danger { background: var(--danger); border-color: var(--danger); }

/* Een knop die als tekstlink oogt, voor kleine acties naast een regel. */
.linkbtn {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
}
.linkbtn:hover { color: var(--accent); }

/* Lokaas voor robots: een vakje dat een mens nooit ziet, laat staan invult. */
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.watch-who { display: flex; align-items: baseline; gap: 8px; color: var(--text-muted); font-size: 14px; margin-top: 12px; }
.watch-who form { display: inline; }

.watch-card {
    display: grid;
    grid-template-columns: 116px 1fr auto auto;
    gap: 22px;
    align-items: center;
    padding: 16px 18px;
}
.watch-card h2 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 600; font-size: 27px; line-height: 1.1; }
.watch-card h2 a { text-decoration: none; }
.watch-card h2 a:hover { text-decoration: underline; }
.watch-card .meta { color: var(--text-muted); font-size: 13.5px; }

.watch-form label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 6px;
}
.watch-form__row { display: flex; align-items: center; gap: 6px; }
.watch-form input {
    width: 104px;
    padding: 10px 10px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.euro { color: var(--text-muted); }

.watch-actions { display: flex; gap: 10px; align-items: center; }
.watch-unsubscribe { color: var(--text-muted); font-size: 13.5px; margin-top: 26px; }
.empty { padding: 30px; text-align: center; }
.empty p { margin: 0 0 14px; }
.empty p:last-child { margin: 0; }

/* De kaart op de productpagina waarmee je het alarm zet. */
.alarm { margin-top: 30px; padding: 24px 26px; border-width: 2px; border-color: var(--ink); }
.alarm h2 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.1; }
.alarm .sub { margin: 0 0 18px; color: var(--text-muted); font-size: 14px; max-width: 62ch; }
.alarm__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.alarm__field { display: flex; align-items: center; gap: 7px; }
.alarm input[type=text],
.alarm input[type=email] {
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
.alarm input[type=text] { width: 124px; font-family: var(--font-display); font-size: 23px; font-weight: 600; font-variant-numeric: tabular-nums; }
.alarm input[type=email] { min-width: 250px; }

@media (max-width: 640px) {
    .watch-card { grid-template-columns: 84px 1fr; gap: 14px; }
    .watch-card .thumb { width: 84px; height: 58px; }
    .alarm input[type=email] { min-width: 0; flex: 1; }
}

/* ---------------------------------------------------------------- belletje */

/* Het belletje waarmee je een prijsalarm zet. Gevuld = staat al aan. */
.bell {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.bell:hover { color: var(--accent); border-color: var(--accent); background: transparent; }
.bell--on { color: var(--on-ink); border-color: var(--ink); background: var(--ink); }
.bell--on .bell__body { fill: currentColor; }
.bell--large { width: 56px; height: 56px; margin-left: auto; align-self: flex-start; }

/* Het schermpje erachter. */
.alarm-dialog {
    width: min(440px, calc(100vw - 32px));
    padding: 26px;
    border: 2px solid var(--ink);
    border-radius: 0;
    background: var(--bg);
    color: var(--text);
    box-shadow: var(--shadow);
}

.alarm-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.alarm-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.alarm-dialog h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.05; }
.alarm-dialog__x {
    background: none;
    border: 0;
    padding: 0 2px;
    color: var(--text-muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.alarm-dialog__x:hover { color: var(--accent); }
.alarm-dialog__shoe { margin: 14px 0 2px; font-weight: 600; }
.alarm-dialog .sub { margin: 0 0 18px; color: var(--text-muted); font-size: 13.5px; }
.alarm-dialog label { display: block; margin: 0 0 7px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.alarm-dialog .alarm__field { margin-bottom: 18px; }
.alarm-dialog input[type=text],
.alarm-dialog input[type=email] {
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
.alarm-dialog .alarm__field input { width: 134px; font-family: var(--font-display); font-size: 23px; font-weight: 600; font-variant-numeric: tabular-nums; }
.alarm-dialog__buttons { display: flex; gap: 10px; margin-top: 4px; }
.alarm-dialog__remove { margin: 18px 0 0; text-align: center; }

/* Kleurvierkantjes bij het kleurfilter. De namen komen uit "colors" in
   config/rules.php; een kleur die hier niet staat krijgt een leeg vakje. */
.swatch--zwart      { background: #17171a; }
.swatch--wit        { background: #ffffff; }
.swatch--grijs      { background: #9c9a92; }
.swatch--blauw      { background: #3e5c8c; }
.swatch--groen      { background: #3f7d4f; }
.swatch--geel       { background: #e3b93c; }
.swatch--oranje     { background: #d9762c; }
.swatch--rood       { background: #b8342a; }
.swatch--roze       { background: #dd8aa8; }
.swatch--paars      { background: #7a5d9e; }
.swatch--bruin      { background: #7a5236; }
.swatch--beige      { background: #d8c7a0; }
.swatch--multicolor { background: linear-gradient(135deg, #b8342a 0 33%, #e3b93c 33% 66%, #3e5c8c 66% 100%); }