/* style.css — mobile first. Stijl naar voorbeeld-screenshot: warm crème,
   donkergroene serif-koppen, sage-groene knoppen, witte afgeronde kaarten. */
:root {
    color-scheme: light;
    --serif: Georgia, "Times New Roman", serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --bg: #faf7f2;          /* warm crème (licht) */
    --card: #fffdfa;        /* warm gebroken wit — kaart lichter dan achtergrond */
    --ink: #253a2c;         /* donkergroen, koppen */
    --body: #3f4a45;
    --muted: #7a827c;
    --line: #efe7da;

    --accent: #8ea87c;      /* sage groen (knoppen) */
    --accent-dark: #78936a;

    --good: #6fa25a;
    --good-text: #4e7d43;
    --good-bg: #e8f0e2;
    --caution: #efa63f;
    --caution-text: #9a6b1f;
    --caution-bg: #faeed7;
    --avoid: #ec6a5e;
    --avoid-text: #c14a3e;
    --avoid-bg: #fbe3e0;
    --unknown: #b3b8b1;
    --unknown-text: #6a716c;
    --unknown-bg: #ecEEeb;
}
* { box-sizing: border-box; }
/* Het hidden-attribuut moet altijd winnen. Zonder deze regel verliest de
   browserstandaard van elke klasse die zelf een display zet (zoals .btn), en
   blijft een element dat via JS op hidden staat gewoon zichtbaar. */
[hidden] { display: none !important; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* --- Header --- */
.site-header {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    padding: .8rem 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.header-scan {
    flex: none;
    width: 40px; height: 40px;
    border-radius: 11px;
    border: none;
    background: none;
    color: var(--ink);
    display: grid; place-items: center;
    cursor: pointer; padding: 0;
    transition: background .15s;
}
/* Telefoon: opvallend sage-vierkantje. Laptop: rustig, iets groter, zonder vlak. */
.header-scan { background: var(--good-bg); color: var(--accent-dark); }
.header-scan:hover { background: var(--good-bg); filter: brightness(.96); }
.header-scan svg { width: 23px; height: 23px; }
@media (min-width: 900px) {
    .header-scan { background: none; color: var(--ink); }
    .header-scan:hover { background: var(--good-bg); filter: none; }
    .header-scan svg { width: 26px; height: 26px; }
}
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; line-height: 1.1; }
.logo-mark { display: block; width: 26px; height: 26px; }
.logo-text { display: flex; flex-direction: column; }
.logo-word { font-family: var(--serif); font-size: 1.45rem; font-weight: 400; color: var(--ink); line-height: 1; letter-spacing: -.005em; }
/* De é van Juliné: de "e" blijft donkergroen, alleen het accent-streepje in coral. */
.logo-e { position: relative; }
.logo-acc { position: absolute; top: .10em; left: .30em; width: .08em; height: .24em; background: #ec6a5e; border-radius: 2.5px; transform: rotate(35deg); }
.logo-word-img { display: block; width: auto; align-self: flex-start; }
.logo-tag { font-size: .58rem; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin-top: .15rem; }

.wrap { max-width: 640px; margin: 0 auto; padding: 1rem 1rem 4rem; }
.site-footer {
    max-width: 640px; margin: 0 auto; padding: 1rem 1rem 5rem;
    color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line);
}
.site-footer a { color: var(--muted); }

/* Laptop/desktop: bredere content-kolom en meer kolommen in de productenlijst.
   Telefoon (< 900px) houdt exact de huidige smalle 1-koloms-layout. */
@media (min-width: 900px) {
    .wrap, .site-footer { max-width: 1040px; }
    /* Detailpagina's (product/ingrediënt) op een prettige leesbreedte houden,
       zodat foto en score niet in te brede kaarten zweven. */
    .wrap > article { max-width: 760px; margin-left: auto; margin-right: auto; }
}
.hero .sub { max-width: 54ch; }
.hero-home .sub { font-size: .95rem; }

.about-text p { margin: 0 0 1rem; max-width: 42rem; }
.about-text ul.disclaimer-sources { margin: 0 0 1rem 1.1rem; padding: 0; max-width: 42rem; }
.about-text ul.disclaimer-sources li { margin: 0 0 .3rem; line-height: 1.5; }

h1, h2 { font-family: var(--serif); color: var(--ink); font-weight: 700; }
/* Sub-paginatitels overal even groot (kleiner); alleen de voorpagina-hero groot. */
h1 { font-size: 1.5rem; margin: .75rem 0 .4rem; line-height: 1.15; }
.hero h1 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.01em; }
.hero-home h1 { font-size: 2rem; line-height: 1.1; letter-spacing: -.015em; }
.hero-context { margin: 0 0 1.1rem; display: flex; align-items: center; gap: .55rem; }
.hero-ctx-ic { flex: none; display: inline-flex; align-items: center; }
.hero-context h1 { font-size: 1.5rem; line-height: 1.15; letter-spacing: normal; margin: 0; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem; margin: .45rem 0 .7rem; }
.active-filters-label { font-size: .82rem; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding-bottom: 2px; border-bottom: 1px solid #d8d0c1; color: #3f5540; font-size: .9rem; line-height: 1.2; text-decoration: none; }
.chip:hover { color: var(--ink); border-bottom-color: var(--accent); }
.chip-x { color: #a9a091; font-size: .9rem; line-height: 1; }
.chip:hover .chip-x { color: var(--accent); }
.chip-clear { border-bottom: none; color: var(--muted); }
.chip-clear:hover { color: var(--ink); }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .6rem; }
.sub { color: var(--body); margin: 0 0 1.1rem; }
.muted { color: var(--muted); font-size: .9rem; }
.product-ean { color: var(--muted); font-size: .78rem; letter-spacing: .02em; margin-top: 1.5rem; opacity: .8; }
.empty { color: var(--muted); background: var(--card); border: 1px dashed var(--line); border-radius: 12px; padding: 1rem; }
a { color: var(--accent-dark); }

/* --- Knoppen --- */
.btn {
    display: inline-block;
    padding: .75rem 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-scan { color: var(--accent-dark); border-color: var(--accent); }
.btn-scan:hover { background: var(--good-bg); }
.btn-small { padding: .35rem .7rem; font-size: .85rem; border-radius: 9px; }
.btn-danger { color: var(--avoid-text); border-color: #f2c4bf; }
.btn-danger:hover { background: var(--avoid-bg); border-color: var(--avoid); }

/* --- Zoeken & scanner --- */
.hero { padding-top: .5rem; }
.search-form { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0; }
.search-form input[type="search"] {
    flex: 1 1 100%;
    padding: .85rem 1.25rem;
    font-size: 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--card);
    color: var(--body);
    box-shadow: 0 2px 12px rgba(37, 58, 44, .07);
}
.search-form .btn { border-radius: 999px; }
.search-form input[type="search"]::placeholder { color: var(--muted); }
.search-form input[type="search"]:focus { outline: 2px solid var(--accent); border-color: transparent; }
.search-form { flex-wrap: nowrap; align-items: center; }
.search-form input[type="search"] { flex: 1 1 auto; min-width: 0; }
.search-form-compact { max-width: 560px; }
.search-go {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 999px; border: none;
    background: var(--accent); color: #fff;
    display: grid; place-items: center;
    cursor: pointer; padding: 0;
    transition: background .15s;
}
.search-go:hover { background: var(--accent-dark); }
.search-go:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.search-go svg { width: 20px; height: 20px; }
.search-form .btn { flex: 1; }

/* Groep-tegels op de homepage (met kleur-iconen) */
.cat-tiles {
    display: flex; gap: .55rem; overflow-x: auto; margin: .4rem 0 1.5rem;
    padding-bottom: .35rem; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cat-tiles::-webkit-scrollbar { display: none; }
.cat-tile {
    flex: none; width: 80px; background: var(--card); border: 1px solid var(--line);
    border-radius: 16px; padding: .7rem .25rem; text-align: center; text-decoration: none;
    color: var(--body); display: flex; flex-direction: column; align-items: center;
}
.cat-tile svg { width: 35px; height: 35px; display: block; margin-bottom: .38rem; }
.cat-tile span { font-size: .64rem; line-height: 1.14; min-height: 2.2em; }
.cat-tile-all span { font-weight: 700; color: var(--ink); }
.cat-tile:hover, .cat-tile:focus { border-color: var(--accent); }
/* Laptop: verdeeld over de volle breedte als het past, maar blijf horizontaal
   scrollen zodra er meer tegels zijn dan er passen (i.p.v. ze in één lijn te persen). */
@media (min-width: 640px) {
    .cat-tiles { justify-content: space-between; overflow-x: auto; gap: .4rem; }
}

/* Poppetjes-variant (voorbeeld ?stijl=poppetjes): grotere figuurtjes, zonder kaartje */
.cat-tiles.poppetjes .cat-tile { border: none; background: none; width: 90px; }
.cat-tiles.poppetjes .cat-tile svg { width: 64px; height: 66px; margin-bottom: .2rem; }
.cat-tiles.poppetjes .cat-tile span { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .8rem; font-weight: 400; letter-spacing: -.01em;
    color: var(--ink); min-height: 0; }
.cat-tiles.poppetjes .cat-tile-all span { font-weight: 700; }

/* Kopregel boven de categorie-tegels: "Populaire categorieën" links, "Bekijk alles" rechts */
.cat-tiles-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; margin: 1.4rem 0 .5rem;
}
.cat-tiles-title {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink);
    font-weight: 500; letter-spacing: -.01em; font-size: 1rem; margin: 0;
}
.cat-tiles-all {
    flex: none; color: var(--ink); text-decoration: none;
    font-size: .82rem; font-weight: 500; white-space: nowrap;
}
/* De streep hoort onder het woord, niet onder de pijl. Een onderstreping op
   de link zelf is door een kind-element niet uit te zetten, dus hij staat op
   de tekst-span. */
.cat-tiles-all:hover .cat-tiles-all-txt { text-decoration: underline; }

/* "Laatst toegevoegd"-kop: bewust in de gewone sans i.p.v. de serif-koppen */
.laatst-heading { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 500; font-size: 1rem; letter-spacing: -.01em; }
/* Kop dicht op de carrousel zetten */
.admin-head-solo { margin-bottom: 0; }
.admin-head-solo .laatst-heading { margin: 0; }
.admin-head-solo + .carousel-section { margin-top: .35rem; }
/* "Alle producten"-knop onderaan de homepage */
.home-allproducts { text-align: center; margin: 1.8rem 0 .6rem; }

/* Ingrediënt van de maand (homepage) */
.ivdm-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px;
    padding: 26px 30px; box-shadow: 0 12px 30px rgba(37, 58, 44, .06); margin: 1.4rem 0; }
.ivdm-top { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.ivdm-left { flex: 1 1 290px; min-width: 250px; }
.ivdm-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-weight: 600; color: var(--accent); font-size: .82rem; }
.ivdm-underline { width: 216px; max-width: 80%; height: 2.5px; border-radius: 3px; background: #eaa79d; opacity: .8; margin: 6px 0 12px 1px; }
.ivdm-name { font-family: var(--serif); color: var(--ink); font-size: 2.05rem; font-weight: 700; margin: 0 0 .45rem; line-height: 1.03; }
.ivdm-intro { font-size: .9rem; line-height: 1.5; margin: 0 0 .75rem; max-width: 48ch; color: var(--body); }
.ivdm-benefit { margin: 6px 0; font-size: .9rem; }
.ivdm-benefit b { font-weight: 600; color: var(--ink); }
.ivdm-benefit span { font-size: .84rem; color: var(--muted); }
.ivdm-mol { flex: 0 0 150px; max-width: 165px; display: flex; justify-content: center; margin: 0 auto; }
.ivdm-mol svg { width: 100%; }
.ivdm-more { border-top: 1px solid var(--line); margin-top: 1.1rem; }
.ivdm-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center;
    gap: 7px; padding: .7rem 0 .2rem; color: var(--ink); font-weight: 600; font-size: .98rem; }
.ivdm-more > summary::-webkit-details-marker { display: none; }
.ivdm-more > summary .lbl { text-decoration: underline; text-underline-offset: 3px; }
.ivdm-more .arw { transition: transform .2s ease; }
.ivdm-more[open] .arw { transform: rotate(180deg); }
.ivdm-detail { padding-top: .3rem; }
.ivdm-detail p { font-size: .95rem; line-height: 1.55; margin: .5rem 0 .8rem; color: var(--body); }
.ivdm-sub { font-family: var(--serif); color: var(--ink); font-size: 1.1rem; font-weight: 700; margin: .4rem 0 .6rem; }
.ivdm-checks { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.4rem; margin-bottom: 1.1rem; }
.ivdm-check { display: flex; gap: 8px; align-items: flex-start; }
.ivdm-check svg { flex: none; margin-top: 3px; }
.ivdm-check span { font-size: .9rem; line-height: 1.4; color: var(--body); }
.ivdm-score { display: flex; gap: 12px; align-items: flex-start; background: #f3f7ef;
    border: 1px solid #e4ecdd; border-radius: 14px; padding: 13px 15px; }
.ivdm-score-dot { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px;
    border-radius: 50%; background: var(--good); color: #fff; font-weight: 700; font-size: .92rem; flex: none; }
.ivdm-score b { font-weight: 700; color: var(--ink); }
.ivdm-score .stxt { font-size: .89rem; color: var(--body); line-height: 1.45; }
@media (max-width: 560px) { .ivdm-checks { grid-template-columns: 1fr; } }

/* Zoekbalk in de header (app-stijl, zoals bol.com): logo | zoekbalk | scan */
.site-header.has-search { gap: .55rem; }
.site-header.has-search .logo { flex: none; }
.site-header.has-search .logo-tag { display: none; } /* compacte 1-regel-balk */
.header-search { flex: 1 1 auto; min-width: 0; margin: 0; position: relative; gap: .35rem; }
.header-search input[type="search"] {
    padding: .55rem .95rem .55rem 2.4rem; font-size: .95rem;
    box-shadow: none; border: 1px solid var(--line); background: var(--bg);
}
/* Magnifier als ons donkergroene icoontje ín de zoekbalk */
.header-search .search-lens {
    position: absolute; left: .25rem; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; padding: 0; border: none; background: none;
    color: var(--ink); display: grid; place-items: center; cursor: pointer;
}
.header-search .search-lens svg { width: 23px; height: 23px; }
.header-search .live-results {
    position: absolute; top: calc(100% + .45rem); left: 0; right: 0;
    margin: 0; z-index: 30; max-height: 72vh; overflow-y: auto;
}
/* Telefoon: zoekbalk over de volle breedte op een eigen regel, onder het logo
   (zoals bol.com e.d.). Eerste regel: logo links, scan-icoon rechts. */
@media (max-width: 639px) {
    .site-header.has-search { flex-wrap: wrap; row-gap: .6rem; }
    .site-header.has-search .logo { order: 1; }
    .site-header.has-search .header-kastje { order: 2; margin-left: auto; }
    .site-header.has-search .header-scan { order: 3; margin-left: .6rem; }
    .site-header.has-search .header-search { order: 4; flex: 1 0 100%; }
}
/* Bredere schermen (laptop): zoekbalk niet volledig uitrekken, maar als nette
   afgebakende zoekbox naast het logo; scan-knop helemaal rechts. */
@media (min-width: 640px) {
    /* zoekbox gecentreerd: logo links, zoekbox midden, scan rechts */
    .site-header.has-search .header-search { flex: 0 1 440px; max-width: 440px; margin: 0 auto; }
}

/* Scanner als schermvullende overlay, zodat het camerabeeld altijd zichtbaar en
   te richten is (i.p.v. onderaan de pagina buiten beeld). */
.scanner {
    position: fixed; inset: 0; z-index: 1000;
    margin: 0; padding: 1.2rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1rem; text-align: center;
    background: rgba(20, 22, 20, .94);
}
.scanner[hidden] { display: none; }
.scanner video {
    width: 100%; max-width: 520px; max-height: 70vh;
    border-radius: 14px; background: #000; object-fit: cover;
}
.scan-hint { color: #fff; font-size: 1rem; margin: 0; }
.scan-unsupported { color: var(--caution-text); background: var(--caution-bg); border-radius: 12px; padding: .7rem .9rem; }

/* --- Live zoekresultaten --- */
.live-results {
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    margin: -.3rem 0 .75rem; overflow: hidden;
    box-shadow: 0 8px 24px rgba(37, 58, 44, .08);
}
.live-item {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .65rem .9rem; text-decoration: none; color: var(--body);
    border-bottom: 1px solid var(--line);
}
.live-item:last-child { border-bottom: 0; }
.live-item:hover, .live-item:focus { background: var(--bg); }
.live-item-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.live-thumb { width: 42px; height: 42px; flex: none; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.live-item-text strong { color: var(--ink); overflow-wrap: anywhere; font-weight: 500; font-size: .86rem; }
.live-item-text .muted { font-size: .76rem; }
.live-none { margin: 0; padding: .65rem .9rem; color: var(--muted); font-size: .9rem; }
/* Merk-groep in de zoekresultaten: merk-kop + "Verfijn binnen <merk>" (types). */
.live-brand { display: flex; align-items: center; gap: 10px; padding: .8rem .9rem; text-decoration: none;
    background: #f7f3ec; border-bottom: 1px solid var(--line); color: var(--ink); }
.live-brand:hover, .live-brand:focus { background: #f1ece2; }
.live-brand-mark { width: 28px; height: 28px; flex: none; }
.live-brand-txt { display: flex; flex-direction: column; min-width: 0; }
.live-brand-txt strong { color: var(--ink); font-size: .95rem; }
.live-brand-txt .muted { font-size: .76rem; }
.live-brand-all { margin-left: auto; color: var(--accent-dark); font-weight: 600; font-size: .82rem; white-space: nowrap; }
.live-refine { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .55rem .9rem .2rem 1.5rem; }
.live-type { display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem .5rem 1.5rem; text-decoration: none;
    color: var(--ink); border-bottom: 1px solid var(--line); }
.live-type:last-child { border-bottom: 0; }
.live-type:hover, .live-type:focus { background: var(--bg); }
.live-type-name { flex: 1; font-size: .88rem; font-weight: 500; }
.live-type-arr { color: var(--accent-dark); }
.live-fico { display: inline-flex; align-items: center; flex: none; }
.live-catmark { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.live-catmark svg { width: 30px; height: 30px; }
/* Score-rondje in de live zoekresultaten: statisch in de rij (niet absoluut over een foto). */
.live-item .score-circle { position: relative; top: auto; right: auto; flex: none; width: 42px; height: 42px; box-shadow: none; }

/* --- Productlijsten --- */
.product-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: 1fr 1fr; }
/* Publieke productenlijst = verticale webshop-tegels (foto + score-ring boven,
   naam eronder). Admin gebruikt .admin-row .product-card en blijft horizontaal.
   Alle tegels hetzelfde formaat: vierkant fotokader, vaste padding, en de naam
   krijgt minstens 2 regels hoogte zodat de kaartjes netjes uitlijnen. */
.product-list .product-card { flex-direction: column; align-items: stretch; gap: .6rem; padding: .7rem; height: 100%; }
.product-list .carousel-photo { aspect-ratio: 1; padding: .7rem; }
.product-list .carousel-info { gap: .12rem; }
.product-list .carousel-brand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Naam op max. 3 regels met vaste hoogte -> alle tegels even hoog (standaard voor een productgrid). */
.product-list .carousel-info strong {
    font-size: .9rem; font-weight: 500;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 3.75em;
}
/* Score-ring iets groter in verhouding tot de foto */
.product-list .score-circle { width: 54px; height: 54px; border-width: 3.5px; top: .4rem; right: .4rem; }
/* Badge onder de naam: "Bevat N allergeen(en)" (amber) of "Parfumvrij" (groen). */
.tile-badge { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: .35rem; font-size: .68rem; font-weight: 600; border-radius: 999px; padding: .16rem .55rem .16rem .45rem; line-height: 1.3; }
.tile-badge svg { flex: none; }
.tile-badge-alg { border: 1px solid #f2c98c; color: var(--caution-text); }
.tile-badge-ok { background: #e9f1e2; color: #3f5a3a; }
.product-list .score-num { font-size: .92rem; }
.product-list .score-max { font-size: .5rem; }
/* Laptop: 4 tegels per rij (per 3 werd te groot) */
@media (min-width: 900px) { .product-list { grid-template-columns: repeat(4, 1fr); } }
/* Beheer-lijsten (producten/ingrediënten) hergebruiken .product-list maar zijn
   GEEN foto-tegelgrid: volle-breedte rijen met de kaart horizontaal (naam links,
   badge rechts), zodat de blokjes de juiste afmeting houden. */
.product-list.admin-list { display: flex; flex-direction: column; gap: .5rem; }
.product-list.admin-list .product-card {
    flex-direction: row; align-items: center; justify-content: space-between;
    height: auto; padding: .85rem 1rem; gap: .75rem;
}
.product-card {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    padding: .85rem 1rem; text-decoration: none; color: var(--body);
    box-shadow: 0 4px 16px rgba(37, 58, 44, .06);
}
.product-card:hover { border-color: var(--accent); }
.product-card-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.product-card-text strong { color: var(--ink); overflow-wrap: anywhere; }
.product-card-text .badge { align-self: flex-start; margin-bottom: .3rem; }

/* --- Kruimelpad + productgroep-kop (op /zoek bij categorie+producttype) --- */
.crumb-bar {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    font-size: .82rem; color: var(--muted); margin: .25rem 0 .9rem;
}
.crumb-bar a { color: var(--muted); text-decoration: none; }
.crumb-bar a:hover { color: var(--accent); }
.crumb-sep { opacity: .6; }
.crumb-current { color: var(--ink); font-weight: 600; }
.group-header { display: flex; align-items: flex-start; gap: .9rem; margin: 0 0 1.1rem; }
.group-header-icon {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
    background: var(--good-bg); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
}
.group-header-icon svg { width: 26px; height: 26px; }
.group-header-icon.pop { width: auto; height: auto; background: none; border-radius: 0; align-self: center; }
.group-header-icon.pop svg { width: 62px; height: 64px; }
.group-header > div { min-width: 0; }
.group-header h1 { font-size: 1.5rem; line-height: 1.15; margin: 0 0 .3rem; overflow-wrap: break-word; }
.group-header-desc { color: var(--muted); margin: 0; max-width: 62ch; }
/* Disclaimer-regel onder de categoriekop: kleiner + schuin (valt op als aparte
   opmerking) en breder, zodat de zin doorloopt i.p.v. halverwege af te breken. */
.group-header-note { font-size: .82rem; font-style: italic; max-width: 66ch; margin-top: .4rem; }

/* Horizontaal scrollende tegels (Alle producten / subgroepen / typen) */
.group-nav-row {
    display: flex; gap: .55rem; overflow-x: auto; padding: .1rem .1rem .5rem;
    margin: 0 0 1rem; scrollbar-width: none;
}
.group-nav-row::-webkit-scrollbar { display: none; }
.group-nav-tile {
    flex: 0 0 auto; font-size: .9rem; font-weight: 600; color: var(--ink);
    background: var(--card); border: 1px solid var(--line); border-radius: 999px;
    padding: .55rem 1.05rem; white-space: nowrap; text-decoration: none;
}
.group-nav-tile.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.group-nav-tile:not(.active):hover { border-color: var(--accent); color: var(--accent); }

/* "Filter" — bestaande filterbalk achter een toggle, zodat er straks meer
   filters (huidtype, parfumvrij, ...) bij kunnen zonder de pagina vol te
   zetten. Puur CSS (details/summary), geen JS nodig. */
.filter-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem; margin: 0 0 1.1rem; }
/* Resultaten: op telefoon gestapeld (filter achter de knop), op laptop filter als
   vaste kolom links naast de producten. */
/* Telefoon: gestapeld — chips, dan de balk (aantal links + Filter rechts) direct
   boven de producten (standaard-patroon zoals bol.com/Zalando). */
.results-layout { display: grid; grid-template-columns: 1fr;
    grid-template-areas: "head" "filter" "main"; }
.filter-col { grid-area: filter; margin: 0 0 .8rem; }
.results-head { grid-area: head; min-width: 0; }
.results-main { grid-area: main; min-width: 0; }
@media (min-width: 900px) {
    /* Laptop: filter vaste kolom links; de chips + het aantal staan bóven de
       producten (kolom rechts), zodat de filterkolom op dezelfde hoogte als de
       productfoto's begint — niet erboven. */
    .results-layout { grid-template-columns: 244px minmax(0, 1fr);
        grid-template-areas: ".      head"
                             "filter main";
        column-gap: 1.75rem; row-gap: 0; align-items: start; }
    .filter-col { margin: 0; align-self: start;
        background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .3rem 1rem 1.1rem; }
    .filter-col .filter-toggle > summary { display: none; }
    .filter-col .filter-toggle[open] > summary { display: none; }
    /* Eén strakke strook boven de producten: aantal links, gekozen chips rechts. */
    .results-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .85rem; }
    .results-head .result-count { order: -1; margin: 0 auto 0 0; }
    .results-head .active-filters { margin: 0; }
    /* "Wissen" staat al vast in de filterkolom → de "Alles wissen"-chip is dubbel. */
    .active-filters .chip-clear { display: none; }
}
@media (max-width: 899px) {
    /* De uitklap-knop zegt al "Filter" → paneeltitel weglaten (was dubbel).
       "Wissen" op dezelfde hoogte als de eerste groep-kop ("Geschikt voor mij"). */
    .filter-head .filter-title { display: none; }
    .filter-col .filter-form { position: relative; }
    .filter-col .filter-head { border: none; margin: 0; padding: 0; height: 0; overflow: visible; }
    .filter-col .filter-clear { position: absolute; top: 1.3rem; right: .1rem; z-index: 1; }
    /* Op telefoon tonen we de gekozen filters NIET als chips (standaard, zoals bol):
       de knop "Filter (N)" laat het aantal al zien; openen om te zien/wijzigen. */
    .active-filters { display: none; }
    /* Het aantal staat op telefoon in de filterbalk (summary), niet dubbel erboven. */
    .results-head .result-count { display: none; }
    /* "Toon mijn keuzes" ook op telefoon meescrollen (onderaan het scherm). */
    .filter-submit { position: sticky; bottom: .6rem; z-index: 3;
        box-shadow: 0 6px 16px -5px rgba(60, 50, 30, .28); }
}
.filter-toggle { margin: 0; }
.filter-toggle[open] { flex: 1 0 100%; }
.filter-toggle > summary {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    cursor: pointer; list-style: none;
}
.filter-toolbar-count { color: var(--muted); font-size: .9rem; }
.filter-toolbar-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .85rem; font-weight: 700; color: var(--ink);
    background: var(--card); border: 1px solid var(--line); border-radius: 999px;
    padding: .5rem 1.1rem;
}
.filter-toggle > summary::-webkit-details-marker { display: none; }
.filter-toggle > summary .filter-ico { width: 15px; height: 15px; }
.filter-toggle[open] > summary { margin-bottom: .8rem; }
.filter-toggle .filter-form { clear: both; }
/* Filter (form met keuzevakjes, zoals de ingrediëntenlijst) */
.filter-count {
    background: var(--accent); color: #fff; border-radius: 999px;
    font-size: .72rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
    display: inline-grid; place-items: center; line-height: 1;
}
.filter-head { display: flex; align-items: center; justify-content: space-between;
    margin: .35rem 0 .3rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.filter-title { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: 1.25rem; color: var(--ink); }
.filter-title .filter-ico { width: 17px; height: 17px; color: var(--accent-dark); }
.filter-clear { color: var(--muted); text-decoration: none; font-size: .85rem; }
.filter-clear:hover { color: var(--ink); }
.filter-submit {
    display: block; width: 100%; margin-top: 1.1rem; background: var(--card);
    color: var(--accent-dark); border: 1px solid var(--line); border-radius: 10px;
    padding: .6rem; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.filter-submit:hover { background: var(--bg); border-color: var(--accent); }
@media (min-width: 900px) {
    .filter-col .filter-submit { position: sticky; bottom: 1rem; z-index: 2;
        background: var(--card); box-shadow: 0 6px 16px -5px rgba(60, 50, 30, .25); }
}
.filter-form h4 {
    display: flex; align-items: center; gap: .5rem;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .95rem; color: var(--ink); font-weight: 700; letter-spacing: -.01em;
    margin: 1.15rem 0 .45rem;
}
.filter-form h4::before {
    content: ""; flex: none; width: 4px; height: .95em;
    background: var(--accent); border-radius: 2px;
}
.filter-form h4 .filter-multi {
    font-family: system-ui, sans-serif; font-size: .62rem; font-weight: 400; font-style: normal;
    color: var(--muted); letter-spacing: .02em; margin-left: .4rem; text-transform: none;
}
.filter-row {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    padding: .5rem .1rem; border-bottom: 1px solid var(--line);
    color: var(--body); font-size: .92rem; cursor: pointer;
}
.filter-row .nm { display: flex; align-items: center; gap: .5rem; }
.filter-row .nm .dot { width: .6em; height: .6em; border-radius: 50%; flex-shrink: 0; }
.filter-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.filter-row .circle {
    width: 20px; height: 20px; border-radius: 5px; border: 2px solid #d4ccbb;
    flex: none; position: relative; box-sizing: border-box;
}
.filter-input:checked ~ .circle { border-color: var(--accent); background: var(--accent); }
.filter-input:checked ~ .circle::after {
    content: ""; position: absolute; left: 5.5px; top: 2px;
    width: 4.5px; height: 8px; border: solid #fff;
    border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* "Toon meer / Minder tonen" — checkbox-hack zodat de knop ALTIJD onder de lijst
   staat (ook uitgeklapt), i.p.v. bovenaan. */
.more-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.filter-more .more-rest { display: none; }
.more-toggle:checked ~ .more-rest { display: block; }
.more-btn {
    display: flex; align-items: center; justify-content: flex-end; gap: .4rem;
    color: var(--accent-dark); font-weight: 600; font-size: .85rem; padding: .5rem .1rem; cursor: pointer;
}
.more-btn::after {
    content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor; transform: rotate(45deg); position: relative; top: -2px;
}
.more-toggle:checked ~ .more-btn::after { transform: rotate(-135deg); top: 1px; }
.more-toggle:checked ~ .more-btn { color: var(--muted); }
.more-hide { display: none; }
.more-toggle:checked ~ .more-btn .more-show { display: none; }
.more-toggle:checked ~ .more-btn .more-hide { display: inline; }
@media (min-width: 700px) {
    .group-header h1 { font-size: 1.9rem; }
}

/* "Geschikt voor gevoelige huid" — bewust neutraal (geen kleur), zodat alleen
   de score-ring gekleurd is en het overzicht rustig blijft. */
.tag-neutral {
    display: inline-block; margin-top: .2rem;
    font-size: .74rem; font-weight: 600; color: var(--muted);
    background: var(--bg); border: 1px solid var(--line);
    border-radius: 999px; padding: .12rem .55rem; width: fit-content;
}

/* --- Filterbalk (/zoek) --- */
.filter-bar { margin: 0 0 1rem; }
.filter-group { margin: 0 0 .55rem; }
.filter-group:last-child { margin-bottom: 0; }
.filter-label {
    font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 .35rem; display: block;
}
.chip-row { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .1rem; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.filter-chip {
    flex: 0 0 auto;
    font-size: .82rem; font-weight: 600; color: var(--body);
    background: var(--card); border: 1px solid var(--line); border-radius: 999px;
    padding: .4rem .85rem; white-space: nowrap; text-decoration: none;
    display: inline-flex; align-items: center; gap: .35rem;
}
.filter-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter-chip .dot { width: .5em; height: .5em; border-radius: 50%; flex-shrink: 0; }
.filter-group-types .chip-row { margin-bottom: .35rem; }
.filter-subgroup-label {
    display: block; font-size: .72rem; font-weight: 600; color: var(--body);
    margin: .5rem 0 .3rem; opacity: .75; text-decoration: none;
}
a.filter-subgroup-link { cursor: pointer; }
a.filter-subgroup-link:hover { color: var(--accent); opacity: 1; }
a.filter-subgroup-link.active { color: var(--accent); opacity: 1; text-decoration: underline; }
.result-count { font-size: .82rem; color: var(--muted); margin: 0 0 .8rem; }

/* --- Betere opties (productpagina) --- */
.alt-heading {
    font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink); margin: 1.1rem 0 .6rem;
}
/* kaartjes zelf hergebruiken .carousel-card/.score-circle (zie homepage-carousel) */
.alt-row { display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .2rem; }

/* --- Productfoto's (bron: Open Beauty Facts) --- */
.product-thumb {
    width: 54px; height: 54px; flex-shrink: 0;
    border-radius: 10px; object-fit: contain;
    background: #fff; border: 1px solid var(--line); padding: 3px;
}
.product-thumb-empty { display: inline-flex; align-items: center; justify-content: center; background: var(--bg); }
.product-thumb-empty img { width: 20px; height: 20px; opacity: .4; }
.product-photo-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    margin: 1rem 0; padding: 1.1rem; text-align: center;
    box-shadow: 0 4px 16px rgba(37, 58, 44, .06);
}
.product-photo-card img { max-width: 100%; max-height: 250px; object-fit: contain; }
.product-photo-card figcaption { color: var(--muted); font-size: .72rem; margin-top: .5rem; }
.mini-photo { display: flex; align-items: center; justify-content: center; }
.mini-photo img { max-width: 100%; max-height: 210px; object-fit: contain; }

/* Productpagina-bovenblok. Telefoon: gestapeld — foto bovenaan, dan naam/kenmerken,
   dan de score (DOM-volgorde: foto, header, score). Laptop (>=900px): naam +
   kenmerken over de volle breedte bovenaan, daaronder foto links en het scoreblok
   rechts op dezelfde starthoogte én gelijke hoogte; de ingrediëntenlijst blijft
   eronder over de volle breedte. */
@media (min-width: 900px) {
    .wrap > article.product { max-width: 900px; }
    .product-top {
        display: grid;
        grid-template-columns: minmax(0, 42%) 1fr;
        grid-template-areas: "name name" "photo score";
        column-gap: 1.8rem; row-gap: 1rem;
        align-items: stretch;
    }
    .product-top > .product-header { grid-area: name; margin: 0; }
    .product-top > .product-photo-card {
        grid-area: photo; margin: 0;
        display: flex; flex-direction: column; justify-content: center;
    }
    .product-top > .verdict-card { grid-area: score; margin: 0; }
    .product-top .product-photo-card img { max-height: 360px; }
}

/* --- Badges --- */
.badge {
    flex-shrink: 0;
    font-size: .8rem; font-weight: 600;
    padding: .3rem .65rem; border-radius: 999px; white-space: nowrap;
}
.badge-good { background: var(--good-bg); color: var(--good-text); }
.badge-caution { background: var(--caution-bg); color: var(--caution-text); }
.badge-avoid { background: var(--avoid-bg); color: var(--avoid-text); }
.badge-none, .badge-unknown { background: var(--line); color: var(--muted); }

/* --- Eindoordeel: score-ring --- */
.verdict-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    padding: 1.4rem 1.1rem 1.2rem; margin: 1.1rem 0;
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(37, 58, 44, .06);
}
.verdict-title {
    margin: 0; font-size: .72rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
/* Ring toont de verdeling van de ingrediënten:
   groen 0→--p1, oranje --p1→--p2, rood --p2→--p3, grijs (onbeoordeeld) --p3→100% */
.ring {
    width: 150px; height: 150px; border-radius: 50%;
    margin: .6rem 0 .3rem;
    background: conic-gradient(var(--good) 0 var(--p1, 100%),
                               var(--caution) var(--p1, 100%) var(--p2, 100%),
                               var(--avoid) var(--p2, 100%) var(--p3, 100%),
                               var(--unknown) var(--p3, 100%) 100%);
    display: grid; place-items: center;
}
.ring-inner {
    width: 118px; height: 118px; border-radius: 50%;
    background: var(--card);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* .ring.ring-small i.p.v. .ring-small: hogere specificiteit dan de
   @media (min-width: 700px) .ring-regel verderop, anders wint die op
   brede schermen alsnog met de standaardmaat. */
.ring.ring-small { width: 110px; height: 110px; }
.ring-small .ring-inner { width: 84px; height: 84px; }
.ring-small .ring-score { font-size: 1.7rem; }
/* nog kleiner: score-rondje in een productlijstrij, naast de foto */
.ring.ring-tiny { width: 46px; height: 46px; margin: 0; flex-shrink: 0; }
.ring-tiny .ring-inner { width: 37px; height: 37px; }
.ring-tiny .ring-score { font-size: .9rem; font-weight: 800; }
.ring-tiny .ring-max { font-size: .48rem; display: block; margin-top: -.05rem; }
.ring-score { font-family: var(--serif); font-size: 2.7rem; font-weight: 700; color: var(--ink); line-height: 1; }
.ring-max { font-size: .9rem; color: var(--muted); }
.verdict-label { margin: 0; font-family: var(--serif); font-size: 1.45rem; font-weight: 700; }
.verdict-label-good { color: var(--good-text); }
.verdict-label-caution { color: var(--caution-text); }
.verdict-label-avoid { color: var(--avoid-text); }
.verdict-sentence { margin: 0; max-width: 26rem; }
.verdict-breakdown { margin: .4rem 0 0; font-size: .85rem; color: var(--muted); }

/* --- Ingrediëntenkaart (INCI) --- */
.ing-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    padding: 1rem 1.1rem; margin: 1rem 0;
    box-shadow: 0 4px 16px rgba(37, 58, 44, .06);
}
.ing-card h2 {
    margin: .2rem 0 .4rem; font-family: inherit; font-size: .78rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.ingredient-list { list-style: none; margin: 0; padding: 0; }
.ing { border-bottom: 1px solid var(--line); }
.ing:last-child { border-bottom: 0; }
.ing > summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    padding: .6rem .1rem;
}
.ing > summary::-webkit-details-marker { display: none; }
.ing-name { font-family: var(--mono); font-size: .92rem; color: var(--ink); overflow-wrap: anywhere; }
.ing-side { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }
/* Heel subtiel pijltje: je ziet dat het openklapt, maar het springt niet in het oog */
.ing-chev {
    width: 6px; height: 6px; border-right: 1.5px solid #d5cebe; border-bottom: 1.5px solid #d5cebe;
    transform: rotate(45deg); transition: transform .15s; flex: none; margin-left: .1rem;
}
.ing[open] .ing-chev { transform: rotate(-135deg); }
.ing-body { padding: 0 .1rem .85rem; animation: ingfade .18s ease; }

/* STANDAARD: opengeklapt ingrediënt valt op met een donkerdere warme achtergrond */
.ingredient-list .ing[open] { background: #ece1cd; border-radius: 12px;
    padding: .1rem .7rem; margin: .35rem 0; border-bottom-color: transparent; }
.ingredient-list .ing[open] .ing-name { font-weight: 600; }

/* Overige voorbeeldstijlen (?open=a|ad|b|ab|c) om te vergelijken */
/* A · zachte warme achtergrond */
.ingredient-list.io-a .ing[open] { background: #f4efe4; border-radius: 12px;
    padding: .1rem .7rem; margin: .35rem 0; border-bottom-color: transparent; }
/* B · kaart die oplicht met schaduw */
.ingredient-list.io-b .ing[open] { background: var(--card); border: 1px solid var(--line);
    border-radius: 14px; box-shadow: 0 8px 22px rgba(37, 58, 44, .13);
    padding: .1rem .85rem .25rem; margin: .55rem 0; border-bottom-color: transparent; }
/* A2 · donkerdere warme achtergrond */
.ingredient-list.io-ad .ing[open] { background: #ece1cd; border-radius: 12px;
    padding: .1rem .7rem; margin: .35rem 0; border-bottom-color: transparent; }
/* A+B · lichte achtergrond + zachte schaduw (combinatie) */
.ingredient-list.io-ab .ing[open] { background: #f7f2e9; border: 1px solid var(--line);
    border-radius: 14px; box-shadow: 0 6px 16px rgba(37, 58, 44, .10);
    padding: .1rem .8rem .2rem; margin: .5rem 0; border-bottom-color: transparent; }
/* C · sage accentbalk links + lichte tint */
.ingredient-list.io-c .ing[open] { background: #faf6ee; border-left: 4px solid var(--accent);
    border-radius: 0 10px 10px 0; padding: .1rem .7rem .1rem .6rem; margin: .35rem 0; border-bottom-color: transparent; }
.ingredient-list.io-a .ing[open] .ing-name, .ingredient-list.io-ad .ing[open] .ing-name,
.ingredient-list.io-b .ing[open] .ing-name, .ingredient-list.io-ab .ing[open] .ing-name,
.ingredient-list.io-c .ing[open] .ing-name { font-weight: 600; }
@keyframes ingfade { from { opacity: 0; transform: translateY(-3px); } }
.ing-badge { display: inline-block; font-size: .74rem; font-weight: 700; padding: .12rem .6rem; border-radius: 999px; margin-bottom: .45rem; }
.ing-badge-good { background: var(--good-bg); color: var(--good-text); }
.ing-badge-caution { background: var(--caution-bg); color: var(--caution-text); }
.ing-badge-avoid { background: var(--avoid-bg); color: var(--avoid-text); }
.ing-badge-unknown { background: var(--unknown-bg); color: var(--unknown-text); }
.ing-body .ing-fn { font-size: .8rem; color: var(--muted); margin-bottom: .35rem; }
.ing-body .ing-aka { font-size: .8rem; color: var(--muted); margin-bottom: .45rem; }
.ing-body .ing-desc { font-size: .9rem; line-height: 1.5; color: var(--body); margin-bottom: .6rem; }
.ing-body .ing-field { font-size: .9rem; line-height: 1.5; color: var(--body); margin-bottom: .6rem; }
.ing-body .ing-field-l { display: block; font-family: var(--serif); font-size: .95rem; font-weight: 700; color: var(--ink); margin-bottom: .15rem; }
.ing-body .ing-warn { font-size: .85rem; line-height: 1.45; color: var(--caution-text); background: var(--caution-bg); border-radius: 8px; padding: .5rem .7rem; margin-top: .1rem; }
.ing-body .ing-src { font-size: .82rem; color: var(--muted); margin-top: .3rem; margin-bottom: .2rem; }
.ing-body .ing-src a { color: var(--accent-dark); word-break: break-word; }
.chip {
    font-size: .78rem; font-weight: 600;
    padding: .18rem .55rem; border-radius: 7px;
}
.chip-caution { background: var(--caution-bg); color: var(--caution-text); }
.chip-avoid { background: var(--avoid-bg); color: var(--avoid-text); }
.chip-allergen {
    background: transparent; border: 1px solid var(--caution);
    color: var(--caution-text); font-size: .72rem; padding: .12rem .45rem;
}
.verdict-allergens { margin: .5rem 0 0; font-size: .9rem; color: var(--ink); }
.verdict-allergens strong { color: var(--caution-text); }
.verdict-scorelink { margin: .7rem 0 0; font-size: .88rem; }
.verdict-scorelink a { color: var(--accent-dark, var(--caution-text)); font-weight: 600; }

/* Scan-ingrediëntenlijst (POC) */
.scan-poc { display: flex; flex-direction: column; gap: .8rem; max-width: 42rem; }
.scan-intro { margin: 0; color: var(--muted); }
/* Segmented control: barcode / ingrediënten / voorkant */
.scan-modes { display: flex; gap: .3rem; padding: .3rem; border-radius: 12px;
    background: var(--good-bg, #eef3e8); border: 1px solid var(--line, #d9d4c7); }
.scan-mode { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: .6rem .3rem; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
    color: var(--muted); font: inherit; font-size: .82rem; line-height: 1.1; }
.scan-mode svg { width: 1.35rem; height: 1.35rem; }
.scan-mode:hover { color: var(--ink, #253a2c); }
.scan-mode.is-active { background: var(--bg, #fff); color: var(--good);
    box-shadow: 0 1px 3px rgba(0,0,0,.08); font-weight: 600; }
.scan-panel { display: flex; flex-direction: column; gap: .8rem; }
.scan-panel[hidden] { display: none; }
.scan-panel-intro { margin: 0; color: var(--muted); font-size: .9rem; }
.scan-options { display: flex; flex-direction: column; gap: .6rem; }
.scan-option { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem;
    border: 1px solid var(--line, #d9d4c7); border-radius: 12px; cursor: pointer;
    text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
.scan-option:hover, .scan-option:focus { border-color: var(--good); background: var(--good-bg); }
.scan-option-icon { flex-shrink: 0; width: 2.2rem; height: 2.2rem; display: flex;
    align-items: center; justify-content: center; background: var(--good-bg);
    border-radius: 8px; color: var(--good); }
.scan-option-icon svg { width: 1.3rem; height: 1.3rem; }
.scan-option-text { display: flex; flex-direction: column; gap: .1rem; }
.scan-option-text strong { font-size: .95rem; }
.scan-option-text span { font-size: .82rem; color: var(--muted); }
.scan-divider { display: flex; align-items: center; gap: .8rem; margin: .3rem 0; color: var(--muted); font-size: .85rem; }
.scan-divider::before, .scan-divider::after { content: ''; flex: 1; height: 1px; background: var(--line, #d9d4c7); }
.scan-filebtn { display: inline-flex; }
.scan-filebtn span { display: inline-block; cursor: pointer; background: var(--good); color: #fff;
    padding: .7rem 1.1rem; border-radius: 10px; font-weight: 600; }
.scan-status { font-size: .9rem; color: var(--muted); }
.scan-status.busy { color: var(--ink); }
.scan-preview { max-width: 200px; border-radius: 10px; align-self: flex-start; }
.scan-lbl { font-weight: 600; font-size: .92rem; }
.scan-text { width: 100%; font-family: inherit; font-size: 1rem; line-height: 1.5;
    padding: .6rem .7rem; border: 1px solid var(--line, #d9d4c7); border-radius: 10px; resize: vertical; }
.scan-go { align-self: flex-start; }
.scan-result { margin-top: .4rem; }
.scan-score { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; margin-bottom: .5rem; }
.scan-score-num { font-size: 2.4rem; font-weight: 700; font-family: var(--serif); }
.scan-score-max { color: var(--muted); }
.scan-score-label { font-family: var(--serif); font-size: 1.3rem; margin-left: .4rem; }
.scan-score-good .scan-score-label { color: var(--good); }
.scan-score-caution .scan-score-label { color: var(--caution-text); }
.scan-score-avoid .scan-score-label { color: var(--avoid-text); }
.scan-counts { font-size: .88rem; color: var(--muted); margin: 0 0 .6rem; }
.scan-list { list-style: none; padding: 0; margin: 0; }
.scan-list li { display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--line, #eee); }
.scan-list a { text-decoration: none; }
.scan-list .scan-side { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.scan-unknown span:first-child { color: var(--muted); }
.scan-note { font-size: .85rem; color: var(--muted); margin-top: .6rem; }
.scan-src { font-size: .9rem; color: var(--muted); margin: 0 0 .6rem; }
.scan-src strong { color: var(--ink); }
.ing-dot, .dot {
    display: inline-block; width: .72em; height: .72em; border-radius: 50%;
    flex-shrink: 0;
}
.ing-good .ing-dot { background: var(--good); }
.ing-caution .ing-dot { background: var(--caution); }
.ing-avoid .ing-dot { background: var(--avoid); }
.dot-good { background: var(--good); }
.dot-caution { background: var(--caution); }
.dot-avoid { background: var(--avoid); }
.dot-unknown { background: var(--unknown); }
.chip-unknown { background: var(--unknown-bg); color: var(--unknown-text); }
.ing-name { text-decoration: none; }
a.ing-name:hover { text-decoration: underline; }
/* Inklapbare ingrediëntenlijst: eerste 4 zichtbaar, rest achter een uitklap-link */
.ing-more { border-bottom: 1px solid var(--line); }
.ing-more > summary {
    cursor: pointer; list-style: none;
    color: var(--accent-dark); font-weight: 600;
    padding: .7rem .1rem; font-size: .95rem; outline-offset: 3px;
    display: flex; align-items: center; gap: .4rem;
}
.ing-more > summary::-webkit-details-marker { display: none; }
.ing-more > summary::after {
    content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor; transform: rotate(45deg); position: relative; top: -2px;
}
.ing-more[open] > summary::after { transform: rotate(-135deg); top: 1px; }
.ing-more .more-hide { display: none; }
.ing-more[open] .more-show { display: none; }
.ing-more[open] .more-hide { display: inline; }
.ing-more .ingredient-list { border-top: 1px solid var(--line); }
.mono, .mono-h { font-family: var(--mono); }
.mono-h { font-size: 1.5rem; overflow-wrap: anywhere; }
.legend {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line);
    font-size: .85rem; color: var(--body);
}
.legend .dot { margin-left: .5rem; }
.legend .dot:first-child { margin-left: 0; }

.product-desc { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .85rem 1rem; }
/* Productheader: merk voorop (belangrijk), naam + volume subtiel/licht, rustige beschrijving.
   Type/categorie/huidtype worden bewust niet meer getoond. */
/* Subtiele "terug"-link boven de detailpagina's */
.back-link {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--muted); font-size: .85rem; font-weight: 500;
    text-decoration: none; margin: 0 0 .9rem;
}
.back-link span { font-size: 1.05rem; line-height: 1; }
.back-link:hover { color: var(--ink); }

.product-brand { color: var(--accent-dark); font-weight: 600; font-size: 1rem; letter-spacing: .01em; margin: 0 0 .15rem; }
.product-header h1 { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 500; font-size: 17px; letter-spacing: -.012em; line-height: 1.3; color: var(--ink); margin: .1rem 0 0; }
.product-volume { color: var(--muted); font-size: .85rem; margin: .3rem 0 0; }
.product-lead { color: var(--muted); font-size: .92rem; line-height: 1.55; font-weight: 400; margin: .5rem 0 0; max-width: 62ch; }
.share-row { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; flex-wrap: wrap; }
.meta-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; }
.meta-chip {
    font-size: .8rem; background: var(--card); border: 1px solid var(--line);
    border-radius: 999px; padding: .25rem .7rem; color: var(--body);
}

/* --- Landing: scan-knop onder de hero --- */
.scan-cta {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%;
    margin: 1rem 0 .3rem;
    padding: 1.05rem 1.5rem;
    line-height: 1;
    background: var(--accent-dark); color: #fff;
    border-radius: 14px; font-size: 1.05rem; font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(37, 58, 44, .16);
    transition: background .15s;
}
.scan-cta span { line-height: 1; }
.scan-cta-ico { display: block; }
/* Telefoon: knop over de volle breedte (staat zo altijd netjes gecentreerd).
   Laptop: compacter, links onder de hero. */
@media (min-width: 900px) { .scan-cta { max-width: 340px; } }
.scan-cta:hover { background: var(--ink); }
.scan-cta-ico { width: 22px; height: 22px; flex: none; }

/* --- Landing: voorbeeldkaartjes (INCI + score) --- */
.btn-big { width: 100%; padding: 1rem 1.5rem; font-size: 1.1rem; border-radius: 14px; }
.hero-demo { margin: 1.25rem 0 .5rem; }
.demo-cards { display: grid; gap: .8rem; grid-template-columns: 1fr; }
.mini-card {
    display: block; background: var(--card); border: 1px solid var(--line);
    border-radius: 16px; padding: 1rem 1.1rem; text-decoration: none; color: var(--body);
    box-shadow: 0 4px 16px rgba(37, 58, 44, .06);
}
.mini-card:hover { border-color: var(--accent); }
.mini-card h3 {
    margin: 0 0 .5rem; font-size: .74rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.mini-inci { list-style: none; margin: 0; padding: 0; }
.mini-inci li {
    display: flex; justify-content: space-between; align-items: center; gap: .6rem;
    padding: .42rem 0; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.mini-inci li:last-child { border-bottom: 0; }
.mini-name { font-family: var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.mini-inci .chip { font-size: .72rem; padding: .12rem .45rem; }
.mini-more { color: var(--muted); font-size: .82rem; }
.mini-score { text-align: center; display: flex; flex-direction: column; align-items: center; }
.mini-score .verdict-label { font-size: 1.2rem; margin-top: .1rem; }
.mini-product { margin: .2rem 0 0; }

/* --- Featured carousel (homepage) --- */
.carousel-section { position: relative; margin: 1.4rem -1rem 1.6rem; }
.carousel {
    display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: .2rem 1rem 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel-card {
    flex: 0 0 auto; width: 152px; scroll-snap-align: start;
    background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    padding: .7rem; text-decoration: none; color: var(--body);
    display: flex; flex-direction: column; gap: .35rem;
    box-shadow: 0 4px 16px rgba(37, 58, 44, .06);
}
.carousel-card:hover { border-color: var(--accent); }
.carousel-photo {
    position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
    background: #fff; display: flex; align-items: center; justify-content: center;
    padding: .5rem; box-sizing: border-box;
}
.carousel-photo img { width: 100%; height: 100%; object-fit: contain; }
.carousel-photo-empty { width: 32px !important; height: 32px !important; object-fit: contain !important; opacity: .4; }
/* Klein score-rondje = zelfde groen/oranje/rood-segmentverdeling als de grote ring
   (via --p1/--p2/--p3), met een binnencirkel voor het getal. */
.score-circle {
    position: absolute; top: .3rem; right: .3rem; width: 46px; height: 46px; border-radius: 50%;
    background: conic-gradient(var(--good) 0 var(--p1, 100%),
                               var(--caution) var(--p1, 100%) var(--p2, 100%),
                               var(--avoid) var(--p2, 100%) var(--p3, 100%),
                               var(--unknown) var(--p3, 100%) 100%);
    box-shadow: 0 2px 6px rgba(37, 58, 44, .15);
    display: grid; place-items: center; text-align: center;
}
.score-circle::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--card); }
.score-num { position: relative; z-index: 1; font-size: .78rem; font-weight: 800; color: var(--ink); line-height: 1; }
.score-max { display: block; font-size: .46rem; font-weight: 700; color: var(--muted); margin-top: .05rem; }
.carousel-info { display: flex; flex-direction: column; gap: .1rem; }
.carousel-brand { font-size: .75rem; font-weight: 600; color: var(--muted); letter-spacing: 0; line-height: 1.2; }
.carousel-info strong { font-size: .86rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.carousel-info .muted { font-size: .76rem; }
/* Carrousel-kaartjes: naam op max. 2 regels met vaste hoogte, zodat álle kaartjes
   (in beide rijen) even hoog zijn en er geen lege ruimte onder de tekst ontstaat. */
.carousel-card { align-self: stretch; }
.carousel-card .carousel-info strong {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 3.4em;
}

/* --- Detailtabel (ingrediëntpagina) --- */
.detail-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.detail-table td { padding: .5rem .5rem .5rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.detail-table tr:last-child td { border-bottom: 0; }
.detail-table td:first-child { width: 38%; font-weight: 600; color: var(--ink); }
.ing-head-badges { display: flex; gap: .4rem; margin: .4rem 0 .3rem; }

/* --- Debug-blok --- */
.debug { background: var(--card); border: 1px dashed var(--accent); border-radius: 14px; padding: .9rem 1rem; margin: 1rem 0; }
.debug h2 { margin: 0 0 .6rem; }
.debug-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.debug-table td { padding: .45rem .5rem .45rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.debug-table tr:last-child td { border-bottom: 0; }
.debug-table td:first-child { width: 40%; font-weight: 600; color: var(--ink); }
.debug-table td:last-child { font-family: var(--mono); font-size: .85rem; }
.debug-final td { background: var(--bg); }

/* --- Admin --- */
.admin-tabs { display: flex; gap: .4rem; margin: .25rem 0 1rem; flex-wrap: wrap; }
.admin-tab {
    padding: .45rem .9rem; border-radius: 999px; text-decoration: none;
    border: 1px solid var(--line); background: var(--card); color: var(--body); font-size: .9rem;
}
.admin-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.form-grid { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
.check-row { display: flex; gap: 1.25rem; margin: 1rem 0 .25rem; font-weight: 600; color: var(--ink); }
.check-row label { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.check-row input { width: auto; }
.cat-form { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: .9rem 1.1rem; margin: 1rem 0; }
.cat-form h2 { margin: .2rem 0 .4rem; display: flex; align-items: center; gap: .5rem; }
.cat-form input[type="color"] { padding: .15rem; height: 2.6rem; }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.admin-row { display: flex; flex-direction: column; gap: .35rem; }
.admin-row .product-card { flex: 1; }
.admin-actions { display: flex; gap: .5rem; align-items: center; }
.admin-actions form { display: inline; margin: 0; }
.flash { background: var(--good-bg); color: var(--good-text); border-radius: 12px; padding: .7rem .9rem; font-weight: 600; }
.flash a { color: var(--good-text); }
.errors { background: var(--avoid-bg); color: var(--avoid-text); border-radius: 12px; padding: .5rem .9rem; margin: .75rem 0; }
.errors ul { margin: .5rem 0; padding-left: 1.2rem; }

.admin-form label { display: block; font-weight: 600; font-size: .9rem; color: var(--ink); margin: 1rem 0 .25rem; }
.admin-form input, .admin-form textarea, .admin-form select {
    width: 100%; padding: .65rem .8rem; font-size: 1rem; font-family: inherit;
    border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--body);
}
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus {
    outline: 2px solid var(--accent); border-color: transparent;
}
.ing-row { display: flex; gap: .4rem; margin-bottom: .4rem; align-items: center; }
.ing-row select { flex: 1; width: auto; min-width: 0; }
.ing-row .ing-del { flex-shrink: 0; padding: .5rem .7rem; }
.bulk { margin: 1rem 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; }
.bulk summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--ink); }
.bulk textarea { margin-top: .5rem; }
.risk-score-help { margin: .5rem 0 1rem; font-size: .85rem; }
.risk-score-help summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.risk-score-help .table-scroll { overflow-x: auto; margin-top: .5rem; }
.risk-score-help .risk-score-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .8rem; }
.risk-score-help .risk-score-table th, .risk-score-help .risk-score-table td { border: 1px solid var(--line); padding: .4rem .5rem; text-align: left; vertical-align: top; }
.risk-score-help .risk-score-table th { background: var(--card); }
.form-actions { margin-top: 1.25rem; }
.form-actions .btn { width: 100%; padding: .9rem; font-size: 1.05rem; }

/* --- Groter scherm --- */
@media (min-width: 700px) {
    h1 { font-size: 1.9rem; }
    .hero h1 { font-size: 1.9rem; }
    .hero-home h1 { font-size: 3.4rem; }
    .hero-context h1 { font-size: 1.9rem; }
    .wrap { padding-top: 1.75rem; }
    .demo-cards { grid-template-columns: 3fr 2fr; align-items: start; }
    .demo-cards:has(.mini-photo) { grid-template-columns: 2fr 3fr 2fr; }
    .btn-big { width: auto; }
    .form-grid { grid-template-columns: 1fr 1fr; }
    .search-form input[type="search"] { flex: 1 1 auto; }
    .search-form .btn { flex: 0 0 auto; }
    .admin-row { flex-direction: row; align-items: center; }
    .form-actions .btn { width: auto; padding: .8rem 2rem; }
    .ring { width: 170px; height: 170px; }
    .ring-inner { width: 134px; height: 134px; }
}

/* --- Extra-aandacht blok (aandachtsingrediënt: nooit-Goed) --- */
.attention-block { background: var(--caution-bg); border: 1px solid #eadfca; border-radius: 14px; padding: .85rem .9rem; margin: 1rem 0; }
.attention-head { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; font-weight: 700; color: var(--ink); font-size: .95rem; }
.attention-ico { width: 26px; height: 26px; border-radius: 50%; background: var(--caution); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.attention-card { display: flex; gap: .7rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .75rem; text-decoration: none; color: inherit; }
.attention-card:hover { border-color: var(--caution); }
.attention-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--caution); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.attention-body { display: flex; flex-direction: column; min-width: 0; }
.attention-name-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.attention-name { font-weight: 700; color: var(--ink); font-size: .95rem; }
.attention-reason { font-weight: 600; color: #3f4a45; font-size: .85rem; margin-top: .2rem; }
.attention-advice { color: var(--muted); font-size: .83rem; line-height: 1.45; margin-top: .1rem; }
.attention-more { color: var(--accent-dark); font-size: .83rem; margin-top: .45rem; }
.badge-attention { display: inline-flex; align-items: center; gap: .3rem; background: var(--caution-bg); color: var(--caution-text); border: 1px solid #e6cfa0; border-radius: 20px; padding: .12rem .55rem; font-size: .78rem; font-weight: 600; }

/* --- Admin: bronvelden beter leesbaar --- */
.src-url { width: 100%; font-family: inherit; line-height: 1.5; resize: vertical; word-break: break-all; }
.src-preview { font-size: .78rem; color: var(--muted); word-break: break-all; margin: .25rem 0 .7rem; }

/* --- Barcode: e-mail-aanmelding bij een onbekend product --- */
.scan-unverified { margin-bottom: 1rem; padding: .9rem 1rem; border-radius: 12px;
    background: var(--caution-bg); border: 1px solid var(--caution, #efa63f); }
.scan-unverified-title { margin: 0 0 .3rem; font-weight: 700; font-size: .95rem; color: var(--caution-text); }
.scan-unverified-text { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--caution-text); }
.scan-notify { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line, #eee);
    border-radius: 12px; background: var(--card-bg, #fff); }
.scan-notify-intro { font-size: .9rem; color: var(--ink); margin: 0 0 .7rem; line-height: 1.5; }
.scan-notify-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.scan-notify-row #bc-email { flex: 1 1 12rem; }
.scan-notify-row .scan-go { align-self: auto; }
.scan-notify-msg { font-size: .88rem; color: var(--avoid-text); margin: .6rem 0 0; }
.scan-notify-msg.ok { color: var(--good); font-weight: 600; }

/* --- Admin: aanvragen-wachtlijst + badge --- */
.admin-badge { display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.3em; height: 1.3em; padding: 0 .4em; border-radius: 999px;
    background: var(--avoid, #cf5f54); color: #fff; font-size: .72rem; font-weight: 700;
    vertical-align: middle; line-height: 1; }
.aanvraag-row { align-items: flex-start; gap: 1rem; }
.aanvraag-main { min-width: 0; flex: 1; }
.aanvraag-title { margin: 0 0 .2rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.aanvraag-meta { font-size: .82rem; margin: 0 0 .3rem; }
.aanvraag-email { font-size: .88rem; margin: 0 0 .4rem; }
.aanvraag-inci summary { cursor: pointer; color: var(--accent-dark); font-size: .83rem; }
.aanvraag-inci-text { font-size: .8rem; color: var(--muted); word-break: break-word;
    line-height: 1.5; margin: .4rem 0 0; }
.src-note { font-size: .8rem; color: var(--accent-dark); background: #f0f5ec; border-radius: 8px; padding: .5rem .65rem; margin: .3rem 0 0; }

/* ---------------------------------------------------------- stijl-voorbeeld */
.preview-note { font-size: .82rem; color: var(--muted); margin: .2rem 0 1rem; line-height: 1.5; }
.preview-note b { color: var(--body); font-weight: 600; }
.preview-tiles { flex-wrap: wrap; overflow: visible; gap: .3rem .1rem; justify-content: flex-start; }
.preview-tiles .cat-tile { width: 92px; padding: .5rem .2rem; cursor: default;
    border: none; background: none; border-radius: 0; }
.preview-tiles .cat-tile svg { width: 66px; height: 70px; margin-bottom: .25rem; }
.preview-tiles .cat-tile span { font-family: var(--serif); font-size: .82rem; font-weight: 600; color: var(--ink); min-height: 0; }

/* Opties-galerij (kies-varianten) + vergelijking mét/zónder gezichtje */
.pv-options { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .2rem 0 .4rem; }
.pv-opt { text-align: center; width: 108px; }
.pv-opt svg { width: 62px; height: 66px; display: block; margin: 0 auto .3rem; }
.pv-opt-name { font-family: var(--serif); font-size: .82rem; font-weight: 600; color: var(--ink); }
.pv-opt-sub { font-size: .68rem; color: var(--muted); }
.pv-compare { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: .4rem 0 .2rem; }
.pv-compare .pv-opt svg { width: 48px; height: 50px; }
.pv-compare .pv-opt.pick .pv-opt-name { color: var(--accent-dark); }

.pv-detail { max-width: 600px; }
.pv-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .2rem; }
.pv-name { font-size: 1.15rem; }
.pv-head h1.pv-name { margin: 0; font-size: 1.3rem; }
.inci-line { font-family: var(--mono); font-size: .74rem; color: var(--muted); margin: 0 0 1rem; }
.pv-field { display: flex; gap: .9rem; padding: .95rem 0; border-top: 1px solid var(--line); }
.pv-field .pv-ico { width: 44px; height: 46px; flex: 0 0 auto; margin-top: .1rem; }
.pv-field .pv-ico svg { width: 100%; height: 100%; display: block; }
.pv-body { flex: 1; }
.pv-label { display: block; font-family: var(--mono); font-size: .82rem; font-weight: 400;
    letter-spacing: .06em; text-transform: uppercase; color: #cf7a26; margin-bottom: .25rem; }
.pv-detail.inklabel .pv-label { color: var(--ink); }
.pv-detail.boldlabel .pv-label { font-weight: 700; }
.pv-fnchip { font-size: .68rem; color: var(--muted); background: var(--bg);
    border: 1px solid var(--line); border-radius: 20px; padding: .12rem .55rem; }
.pv-text a { color: var(--accent-dark); }
.pv-labelstyle { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); text-align: right; margin-top: .4rem; }
.ing-meta { font-size: .8rem; color: var(--muted); margin: .8rem 0 0; }
.risk-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem;
    color: var(--muted); font-weight: 600; }
.risk-dot { display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; color: #fff; font-weight: 700;
    font-size: 1.05rem; line-height: 1; flex: 0 0 auto; }
.ing-side .risk-dot { width: 23px; height: 23px; font-size: .78rem; }
.risk-legend { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.risk-legend .risk-dot { width: 22px; height: 22px; font-size: .74rem; }
.risk-legend .lbl { color: var(--muted); font-size: .82rem; }
.allergen-flag { display: inline-flex; align-items: center; gap: .5rem;
    background: transparent; border: 1.5px solid #f2c98c;
    color: var(--caution-text); font-weight: 600; font-size: .92rem;
    border-radius: 11px; padding: .32rem .75rem; text-decoration: none; }
a.allergen-flag:hover { background: var(--caution-bg); }
.allergen-flag svg { flex: 0 0 auto; }
.pv-text { font-size: 1rem; color: var(--body); line-height: 1.55; }

.admin-prefill-note { background: var(--good-bg); border: 1px solid var(--good); color: var(--good-text);
    border-radius: 10px; padding: .6rem .85rem; font-size: .92rem; margin: 0 0 1rem; }

.scan-photo { display: block; max-width: 160px; max-height: 200px; margin: 0 auto .9rem;
    border-radius: 12px; border: 1px solid var(--line); background: #fff; object-fit: contain; }

.admin-photo-preview { display: block; max-width: 140px; max-height: 180px; margin: .5rem 0 0;
    border-radius: 10px; border: 1px solid var(--line); background: #fff; object-fit: contain; }

/* ============================================================
   Mijn badkamerkastje (fase 1a)
   ============================================================ */
.product-list li { position: relative; }

/* Hartje subtiel in de onderhoek van het hele productblok (de kaart). */
.product-list .product-card { position: relative; }
.kastje-heart {
    position: absolute; bottom: .5rem; right: .6rem; z-index: 2;
    width: 26px; height: 26px; padding: 0; border: none; background: none;
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: #b7ac9b;
}
.kastje-heart svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7;
    filter: drop-shadow(0 1px 1.5px rgba(255, 255, 255, .95)); }
.kastje-heart:hover { color: #f4a79f; }
.kastje-heart.is-saved { color: #f4a79f; }
.kastje-heart.is-saved svg { fill: #f4a79f; stroke: #f4a79f; }

/* Bewaarknop op de productpagina */
.kastje-save {
    display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem;
    background: var(--card); border: 1px solid var(--line); border-radius: 999px;
    padding: .5rem .95rem; cursor: pointer; color: var(--body); font: inherit; font-size: .92rem;
}
.kastje-save svg { width: 18px; height: 18px; fill: none; stroke: #8ea87c; stroke-width: 1.8; }
.kastje-save:hover { border-color: var(--accent); }
.kastje-save.is-saved { border-color: #f4a79f; color: #c25b4e; background: #fdeeeb; }
.kastje-save.is-saved svg { fill: #f4a79f; stroke: #f4a79f; }

/* Header-icoon (gekleurde kast) + label + teller */
.header-kastje { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; color: var(--ink); text-decoration: none; margin-left: .3rem; }
.header-kastje-ic { position: relative; display: inline-flex; }
.header-kastje svg { width: 34px; height: 34px; display: block; }
.header-kastje-lbl { font-size: .62rem; color: var(--muted); letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.header-kastje:hover .header-kastje-lbl { color: var(--accent-dark); }
.kastje-count {
    position: absolute; top: -5px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--accent); color: #fff; font-size: .64rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.kastje-count[hidden] { display: none; }

/* Kastjepagina */
.kastje-hero { display: flex; align-items: center; gap: .9rem; margin: .4rem 0 1.3rem; }
.kastje-hero-ic { flex: none; display: flex; }
.kastje-hero h1 { margin: 0; }
.kastje-sub { margin: .25rem 0 0; color: var(--muted); }
.kastje-loading { color: var(--muted); padding: 1.5rem 0; }
.kastje-empty { text-align: center; padding: 2.2rem 1rem; }
.kastje-empty-ic { display: inline-flex; margin-bottom: .6rem; }
.kastje-empty-title { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--ink); margin: 0 0 .3rem; }
.kastje-empty-sub { color: var(--muted); margin: 0 0 1.2rem; }

.kastje-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: 1.1rem; }
.kastje-stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .85rem .4rem; text-align: center; }
.kastje-stat-num { display: block; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: -.01em; color: var(--ink); line-height: 1; }
.kastje-stat-lblic { display: inline-flex; }
.kastje-stat-lblic svg { display: block; }
.kastje-stat-good .kastje-stat-num { color: var(--accent-dark); }
.kastje-stat-alg .kastje-stat-num { color: var(--caution-text); }
.kastje-stat-lbl { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: .72rem; color: var(--muted); margin-top: .35rem; }
.kastje-stat-btn { cursor: pointer; font: inherit; color: inherit; -webkit-appearance: none; appearance: none; transition: border-color .12s, background .12s; }
.kastje-stat-btn:hover { border-color: var(--accent); }
.kastje-stat-btn.is-active { border-color: var(--accent); background: var(--good-bg); }
.kastje-stat-btn.kastje-stat-alg.is-active { border-color: var(--caution); background: var(--caution-bg); }
@media (max-width: 560px) { .kastje-overview { grid-template-columns: repeat(2, 1fr); } }

.kastje-typechips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.kastje-chip { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .85rem; font-size: .85rem; cursor: pointer; color: var(--body); }
.kastje-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Homepage-blok */
.home-kastje { margin: 1.6rem 0; }
.home-kastje-inner { display: flex; align-items: center; gap: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.3rem; text-decoration: none; color: inherit; }
.home-kastje-inner:hover { border-color: var(--accent); }
.home-kastje-score { flex: none; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 700; font-size: 1.85rem; letter-spacing: -.01em; color: var(--accent-dark); line-height: 1; }
.home-kastje-score span { font-size: .85rem; color: var(--muted); }
.home-kastje-ic { flex: none; display: flex; }
.home-kastje-ic svg { width: 48px; height: 48px; display: block; }
.kastje-hero-ic svg { display: block; width: 58px; height: 58px; }
.home-kastje-txt { flex: 1; min-width: 0; }
.home-kastje-txt h2 { margin: 0 0 .2rem; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; }
.home-kastje-txt p { margin: 0; color: var(--muted); font-size: .9rem; }
.home-kastje-arrow { color: var(--accent-dark); font-size: 1.3rem; flex: none; }
.home-kastje-empty { flex-wrap: wrap; }
.home-kastje-empty .home-kastje-cta { flex: none; }

/* Homepage productrij met kop + "Bekijk alles" + korte subtekst (baby & kids). */
.home-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.home-row-all { color: var(--accent-dark); font-weight: 600; font-size: .82rem; white-space: nowrap; text-decoration: none; flex: none; }
.home-row-all:hover { text-decoration: underline; }
.home-row-sub { color: var(--muted); font-size: .9rem; margin: .1rem 0 .8rem; }
.home-row-tag { display: inline-flex; align-items: center; gap: 3px; font-size: .8rem; font-weight: 500; color: var(--muted); margin-left: .3rem; }
.home-row-tag svg { flex: none; }

/* --- Beheer · Statistieken -------------------------------------------- */
.stats-periods { display: flex; gap: .35rem; flex-wrap: wrap; margin: .25rem 0 1rem; }
.stats-period {
    padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--card); font-size: .82rem; color: var(--body); text-decoration: none;
}
.stats-period.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.stats-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: 1rem; }
.stats-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .8rem .85rem; }
.stats-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.stats-val {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 1.5rem; color: var(--ink); line-height: 1.25; margin-top: .15rem;
}
.stats-delta { font-size: .76rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.stats-delta.up { color: var(--good-text); }
.stats-delta.down { color: var(--avoid-text); }

.stats-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; }
.stats-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .9rem; }
.stats-card h2 { font-family: var(--serif); font-weight: normal; color: var(--ink); font-size: 1.06rem; margin: 0 0 .15rem; }
.stats-hint { font-size: .78rem; color: var(--muted); margin: 0 0 .7rem; }
.stats-span2 { grid-column: 1 / -1; }

.stats-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.stats-table th {
    text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); font-weight: 600; padding: 0 0 .35rem; border-bottom: 1px solid var(--line);
}
.stats-table td { padding: .42rem 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.stats-table tr:last-child td { border-bottom: 0; }
.stats-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.stats-term { color: var(--ink); }
.stats-term a { color: var(--ink); }
.stats-path { font-family: var(--mono); font-size: .8rem; word-break: break-all; }
.stats-path a { color: var(--body); }
.stats-barcell { width: 34%; padding-right: .5rem; }
.stats-bar { height: 5px; border-radius: 3px; background: var(--accent); min-width: 3px; display: block; }
.stats-bar.warn { background: var(--caution); }

.stats-chart { width: 100%; height: auto; display: block; }
.stats-axis { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); margin-top: .3rem; }

.stats-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.stats-chip {
    background: var(--good-bg); color: var(--good-text); border: 1px solid var(--good);
    border-radius: 999px; padding: .15rem .6rem; font-size: .78rem;
}
.stats-foot {
    margin-top: 1.2rem; padding: .8rem .9rem; background: var(--card);
    border: 1px solid var(--line); border-radius: 12px; font-size: .8rem; color: var(--muted);
}
.stats-foot code { font-family: var(--mono); font-size: .95em; }

@media (min-width: 720px) {
    .stats-kpis { grid-template-columns: repeat(5, 1fr); }
    .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* Brede tabellen scrollen in hun eigen kader, zodat de pagina zelf nooit
   horizontaal meebeweegt op een smal scherm. */
.tablewrap { overflow-x: auto; }

/* --- /niet-meetellen ---------------------------------------------------- */
.optout { max-width: 34rem; }
.optout h1 { font-family: var(--serif); color: var(--ink); font-weight: normal; }
.optout-stand {
    background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent);
    border-radius: 8px; padding: .7rem .85rem; color: var(--ink); font-weight: 600;
}
.optout-stand.is-uit { border-left-color: var(--good); background: var(--good-bg); color: var(--good-text); }

/* "Bekijk alles" aan het eind van een productrij: verticaal gecentreerd naast
   de tegels, zodat het als afsluiting van de rij leest en niet als product. */
.carousel-meer {
    flex: 0 0 auto; align-self: center; display: flex; align-items: center; gap: .4rem;
    padding: 0 1.4rem 0 .8rem; white-space: nowrap; text-decoration: none;
    color: var(--good-text, #5E7450); font-weight: 600;
}
/* Alleen het woord onderstrepen, niet de pijl ernaast. */
.carousel-meer:hover .carousel-meer-txt { text-decoration: underline; }

/* "Toon meer producten" onder een lange lijst, met de telling eronder. */
.lijst-meer { text-align: center; margin: 1.4rem 0 .6rem; }
.lijst-meer-tel { margin: .5rem 0 0; color: var(--muted, #7b8a7f); font-size: .85rem; }
.lijst-aantal { color: var(--muted, #7b8a7f); font-weight: 400; font-size: .8em; }

/* Sprong naar de productenlijst op een ingrediëntpagina (/i/…#producten):
   de kop moet vrij blijven van de plakkende header. */
#producten { scroll-margin-top: 8.5rem; }