/* ============================================================================
   Bestelmodule — frontend (klant-neutraal). --color-primary uit site-config.
   Food-app menu: sticky categorie-nav (zijbalk desktop / pills mobiel),
   doorscrollbare secties, zoeken, scroll-spy, sticky winkelmandbalk.
   ========================================================================== */
:root{
  --color-primary:#833b7f;
  --color-primary-dark:#6d3169;
  --color-primary-tint:#f4ebf3;
  --color-included:#2e9e5b;
  --color-text:#1f2430;
  --color-muted:#6b7280;
  --color-bg:#f6f6f8;
  --color-card:#ffffff;
  --color-border:#e7e8ec;
  --radius:16px;
  --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow:0 6px 24px rgba(16,24,40,.07);
  --maxw:1080px;
  /* Vaste kophoogte: de sticky zoekbalk/categorie-nav hangen hieraan, dus ze mag niet
     meebewegen met de inhoud. Ruimte voor het logo (52px) + de padding van __inner.
     Een klant zonder logo krijgt via min-height dezelfde hoogte, zodat de offsets kloppen. */
  --header-h:82px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{font-family:var(--font);color:var(--color-text);background:var(--color-bg);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

/* header / layout */
/* Kop = impersonatie-banner + header in één sticky blok: het account-menu (en de
   open/gesloten-status) moeten altijd bereikbaar blijven, hoe ver je ook scrollt. */
.site-top{position:sticky;top:0;z-index:20}
.site-header{background:var(--color-card);border-bottom:1px solid var(--color-border)}
.site-header__inner{max-width:var(--maxw);margin:0 auto;padding:.9rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:calc(var(--header-h) - 1px)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700}
.brand__mark{font-size:1.4rem}
.brand__name{font-size:1.15rem;letter-spacing:-.01em}
.brand__logo{height:52px;width:auto;max-width:260px;display:block}
@media(max-width:560px){.brand__logo{height:44px;max-width:180px}:root{--header-h:74px}}
.site-help{color:var(--color-muted);font-size:.9rem}
.site-help__tel{color:var(--color-primary);font-weight:700;white-space:nowrap}
/* open/gesloten-indicator (snippet site-status) */
.site-status{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:999px;font-size:.82rem;font-weight:700;white-space:nowrap}
.site-status__dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;flex:none}
.site-status--open{background:#e8f6ee;color:#1e7a45}
/* Dicht = neutraal, niet rood. De winkeldeur is dicht, maar bestellen kan gewoon door —
   rood zou "hier kan je niets" suggereren en dat klopt niet. */
.site-status--closed{background:var(--color-bg);color:var(--color-muted);border:1px solid var(--color-border)}
.site-status--closed .site-status__dot{background:#9aa1ad}
/* Scheidingsteken vóór de toelichting: "Gesloten · opent morgen om 10:30" leest
   als één mededeling, zonder loopt het aan elkaar. */
.site-status__why{font-weight:500;opacity:.85}
.site-status__why::before{content:'·';margin-right:.35rem;opacity:.6}
@media(max-width:560px){.site-status__why{display:none}}
.site-main{max-width:var(--maxw);margin:0 auto;padding:0 1.1rem 6rem}
.site-footer{max-width:var(--maxw);margin:0 auto;padding:2rem 1.1rem;color:var(--color-muted);font-size:.85rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:0;border-radius:999px;padding:.7rem 1.2rem;font:inherit;font-weight:600;cursor:pointer;transition:.15s ease}
.btn--primary{background:var(--color-primary);color:#fff}
.btn--primary:hover{background:var(--color-primary-dark)}
.btn--ghost{background:var(--color-primary-tint);color:var(--color-primary)}

/* ---- startscherm (home) ---- */
/* Line-icon (snippet home-icon) — schaalt mee met de tekstgrootte van de ouder. */
.hicon{width:1.15em;height:1.15em;flex:none}

.hero{padding:2rem 0 1rem}
.hero__title{font-size:1.85rem;margin:0 0 .5rem;letter-spacing:-.02em;line-height:1.15}
.hero__title-accent{color:var(--color-primary)}
.hero__sub{margin:0;color:var(--color-muted);max-width:34rem}
.hero__notes{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.5rem}
.hero__notes li{display:flex;align-items:center;gap:.55rem;color:var(--color-muted);font-size:.9rem}
.hero__notes .hicon{color:var(--color-primary)}
/* Decoratieve illustratie: pas vanaf desktop, mobiel telt enkel de bestelkeuze. */
.hero__art{position:relative;display:none;place-items:center;min-height:16rem}
.hero__blob{position:absolute;inset:0;margin:auto;width:min(100%,21rem);aspect-ratio:1;background:var(--color-primary-tint);border-radius:50%}
.hero__lines{position:relative;width:min(100%,19rem);color:var(--color-primary);opacity:.4}
/* Hoofdactie op de startpagina: het menu bekijken (+ Aanmelden voor gasten). */
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:1.4rem}
.btn--lg{padding:.9rem 1.7rem;font-size:1.05rem}
.btn--lg .hicon{width:1.3em;height:1.3em}
@media(max-width:560px){.hero__cta .btn--lg{width:100%}}
/* "Menu" in de kopbalk (vanaf tablet) */
.site-menu-link{display:none;align-items:center;gap:.35rem;padding:.4rem .75rem;border-radius:999px;color:var(--color-text);font-size:.92rem;font-weight:600;text-decoration:none}
.site-menu-link .hicon{width:18px;height:18px;color:var(--color-primary)}
.site-menu-link:hover{background:var(--color-primary-tint);color:var(--color-primary-dark)}
@media(min-width:640px){.site-menu-link{display:inline-flex}}

/* toppers op de startpagina (kaarten; het menu toont dezelfde producten als lijst) */
.home-sec{margin-top:2.4rem}
.home-sec__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.home-sec__title{display:flex;align-items:center;gap:.45rem;margin:0;font-size:1.25rem}
.home-sec__title .hicon{color:var(--color-primary)}
.home-sec__sub{margin:.15rem 0 0;color:var(--color-muted);font-size:.9rem}
.home-sec__more{color:var(--color-primary);font-weight:600;font-size:.9rem;white-space:nowrap}
.home-sec__more:hover{text-decoration:underline}
.topper-grid{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.topper__link{display:flex;flex-direction:column;height:100%;gap:.3rem;background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow-sm);transition:.15s ease}
.topper__link:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--color-primary)}
.topper__art{width:52px;height:52px;display:grid;place-items:center;background:var(--color-primary-tint);border-radius:50%;color:var(--color-primary);margin-bottom:.4rem}
.topper__art .hicon{width:24px;height:24px}
.topper__name{font-weight:700;line-height:1.3}
.topper__desc{color:var(--color-muted);font-size:.85rem;line-height:1.35}
.topper__foot{margin-top:auto;padding-top:.7rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.topper__price{font-weight:700}
.topper__add{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--color-primary);color:#fff;font-weight:700;line-height:1}
.topper__out{font-size:.8rem;color:var(--color-muted)}
.topper--out .topper__link{opacity:.6}

/* B2B-kaart op het startscherm (bevat ook de aanmeld-ingang voor nieuwe bedrijven) */
.home-b2b{margin-top:1.6rem;background:var(--color-primary-tint);border-radius:var(--radius);padding:1.3rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.home-b2b__art{width:54px;height:54px;display:grid;place-items:center;background:var(--color-card);border-radius:50%;color:var(--color-primary);flex:none}
.home-b2b__art .hicon{width:26px;height:26px}
.home-b2b__body{flex:1 1 16rem}
.home-b2b__title{margin:0 0 .55rem;font-size:1.1rem}
.home-b2b__list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem .9rem;grid-template-columns:1fr}
.home-b2b__list li{display:flex;align-items:center;gap:.45rem;font-size:.9rem}
.home-b2b__list .hicon{color:var(--color-primary)}
.home-b2b__cta{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.home-b2b__ask{font-size:.88rem;font-weight:600}

/* vertrouwensbalk onderaan */
.home-trust{list-style:none;margin:1.8rem 0 0;padding:1.3rem 0 0;border-top:1px solid var(--color-border);display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.home-trust__item{display:flex;align-items:center;gap:.6rem}
.home-trust__icon{width:38px;height:38px;display:grid;place-items:center;background:var(--color-primary-tint);border-radius:50%;color:var(--color-primary);flex:none}
.home-trust__body{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.home-trust__body b{font-size:.9rem}
.home-trust__body span{color:var(--color-muted);font-size:.8rem}

/* ---- zoekbalk ---- */
/* Plakt onder de sticky kop (vandaar de --header-h-offset i.p.v. top:0). */
/* Zoeken · sorteren · filters op één rij; breekt af op smalle schermen (zoekveld boven,
   knoppen eronder) i.p.v. drie losse regels. */
.menu-search{position:sticky;top:var(--header-h);z-index:16;background:var(--color-bg);padding:.9rem 0 .7rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.menu-search__input{flex:1 1 14rem;min-width:0;padding:.8rem 1rem;border:1px solid var(--color-border);border-radius:999px;background:var(--color-card);font:inherit;box-shadow:var(--shadow-sm)}
.menu-search__input:focus{outline:2px solid var(--color-primary);outline-offset:1px;border-color:transparent}

/* ---- menu layout ---- */
.menu{display:block}

/* categorie-nav: mobiel = horizontale pills, sticky onder de zoekbalk */
.cat-nav{position:sticky;top:calc(var(--header-h) + 60px);z-index:15;display:flex;gap:.5rem;overflow-x:auto;padding:.4rem 0 .7rem;background:var(--color-bg);scrollbar-width:none}
.cat-nav::-webkit-scrollbar{display:none}
.cat-nav__item{white-space:nowrap;padding:.5rem .95rem;border-radius:999px;background:var(--color-card);border:1px solid var(--color-border);color:var(--color-muted);font-weight:600;font-size:.88rem;transition:.12s}
.cat-nav__item.is-active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}

/* secties + lijst */
.cat-section{scroll-margin-top:118px;padding-top:.6rem}
.cat-section__title{font-size:1.2rem;letter-spacing:-.01em;margin:.6rem 0 .4rem;display:flex;align-items:baseline;gap:.5rem}
.cat-section__count{font-size:.8rem;font-weight:600;color:var(--color-muted);background:var(--color-card);border:1px solid var(--color-border);border-radius:999px;padding:.05rem .5rem}
.item-list{list-style:none;margin:0 0 1.4rem;padding:0;background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}
/* Favorieten (B2C, increment 2) */
.fav-hint{color:var(--color-muted);font-size:.85rem;margin:.1rem 0 .7rem}
.fav-list{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.fav-card{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;background:var(--color-card);border:1px solid var(--color-border);border-radius:12px}
.fav-card__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.fav-card__name{font-weight:700}
.fav-badge{display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--color-primary-dark);background:var(--color-primary-tint);border-radius:999px;padding:.05rem .45rem;vertical-align:middle;margin-left:.25rem}
.fav-card__sub{color:var(--color-muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav-card__acts{display:flex;align-items:center;gap:.4rem;flex:none}
.fav-card__del{width:30px;height:30px;border:0;border-radius:50%;background:var(--color-bg);color:var(--color-muted);font-size:1.15rem;line-height:1;cursor:pointer}
.fav-card__del:hover{background:#fdecea;color:#c0392b}
/* Favorieten opgesplitst in "Jouw favorieten" + "Bedrijfsfavorieten" (fav-groups) */
.fav-group__head{margin:.2rem 0 .55rem}
.fav-group__title{font-size:1rem;font-weight:800;margin:0}
.fav-group__hint{color:var(--color-muted);font-size:.82rem;margin:.15rem 0 0}
.pm-fav{flex:none;white-space:nowrap}
.pm-foot .pm-add{flex:1}

.item{display:flex;align-items:center;gap:1rem;padding:.85rem 1rem;border-top:1px solid var(--color-border)}
.item:first-child{border-top:0}
.item__media{width:58px;height:58px;flex-shrink:0;border-radius:10px;overflow:hidden;background:#f4f4f5;display:flex;align-items:center;justify-content:center}
.item__media img{width:100%;height:100%;object-fit:cover;display:block}
.item__ph{font-size:1.6rem;line-height:1;opacity:.55}
.item--out .item__media{opacity:.55}
.item__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.item__name{font-weight:600}
.item__desc{color:var(--color-muted);font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item__adjust{align-self:flex-start;margin-top:.15rem;background:none;border:0;padding:0;color:var(--color-primary);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.item__adjust:hover{text-decoration:underline}
.item__actions{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;flex-shrink:0}
.item__price{font-weight:700;color:var(--color-primary)}

/* stepper */
.stepper{display:flex;align-items:center;gap:.4rem}
.stepper__btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--color-border);background:#fff;font-size:1.05rem;line-height:1;cursor:pointer;color:var(--color-primary)}
.stepper__btn:hover{border-color:var(--color-primary)}
.stepper__val{min-width:1.3rem;text-align:center;font-weight:600}

/* zwevende winkelmand-knop (FAB) — huisstijl; positie uit Panel-config */
.cart-fab{position:fixed;z-index:30;width:60px;height:60px;border-radius:20px;border:0;background:var(--color-primary);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 26px rgba(131,59,127,.38);transition:transform .15s ease,background .15s ease}
.cart-fab:hover{transform:translateY(-2px);background:var(--color-primary-dark)}
.cart-fab__icon{width:26px;height:26px}
.cart-fab__count{position:absolute;top:-7px;right:-7px;min-width:23px;height:23px;padding:0 6px;border-radius:999px;background:#fff;color:var(--color-primary);font-size:.75rem;font-weight:700;display:grid;place-items:center;border:2px solid var(--color-primary)}
.cart-fab--bottom-right{bottom:1.4rem;right:1.4rem}
.cart-fab--bottom-left{bottom:1.4rem;left:1.4rem}
.cart-fab--top-right{top:5rem;right:1.4rem}
.cart-fab--top-left{top:5rem;left:1.4rem}

/* Winkelmand met bedrag: kopbalkknop (desktop) + vaste balk (mobiel). De cijfers worden
   door app.js gevuld; `body.cart-has-items` + de breakpoint sturen welke variant zichtbaar
   is, en laten de FAB opzijstappen. Overlays (drawer z-35, modals z-40) liggen boven de
   balk (z-25), dus tijdens de checkout-drawer of de samensteller valt de balk vanzelf weg. */
.cart-head{display:none;align-items:center;gap:.4rem;border:0;background:var(--color-primary);color:#fff;border-radius:999px;padding:.4rem .85rem;font:inherit;font-size:.9rem;font-weight:700;cursor:pointer}
.cart-head:hover{background:var(--color-primary-dark)}
.cart-head .hicon{width:19px;height:19px}
.cart-head__sep{opacity:.55;font-weight:400}

.cart-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:25;align-items:center;gap:.7rem;width:100%;border:0;background:var(--color-primary);color:#fff;text-align:left;cursor:pointer;font:inherit;padding:.75rem 1rem;padding-bottom:calc(.75rem + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(131,59,127,.28)}
.cart-bar .hicon{width:24px;height:24px;flex:none}
.cart-bar__meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.cart-bar__count-line{font-size:.76rem;opacity:.85}
.cart-bar__total-line{font-size:.98rem;font-weight:700}
.cart-bar__go{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:.25rem;background:#fff;color:var(--color-primary-dark);border-radius:999px;padding:.42rem .85rem;font-size:.85rem;font-weight:700}

/* items in de mand → balk (mobiel) of kopbalkknop (desktop); FAB stapt telkens opzij. */
@media(max-width:899px){
  body.cart-has-items .cart-bar{display:flex}
  body.cart-has-items .cart-fab{display:none}
  body.cart-has-items .site-main{padding-bottom:5rem}
}
@media(min-width:900px){
  body.cart-has-items .cart-head{display:inline-flex}
  body.cart-has-items .cart-fab{display:none}
}

.menu-empty{color:var(--color-muted);text-align:center;padding:2rem 0}

/* ---- desktop ---- */
@media(min-width:640px){
  .hero__title{font-size:2.1rem}
  .home-b2b__list{grid-template-columns:1fr 1fr}
  .home-trust{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:900px){
  /* hero wordt tweekoloms: bestelkeuze links, illustratie rechts */
  .hero--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);gap:2rem;align-items:center}
  .hero__art{display:grid}
  .hero__title{font-size:2.5rem}
  .topper-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* drie kolommen: categorieën · productlijst · filters.
     De desktop-regels voor .mf/.menu-filterbtn staan onderaan bij het filterblok —
     die CSS komt later in het bestand en zou deze anders overschrijven. */
  .menu{display:grid;grid-template-columns:190px minmax(0,1fr) 16rem;gap:1.6rem;align-items:start}
  /* categorie-nav wordt een sticky zijbalk links */
  .cat-nav{position:sticky;top:calc(var(--header-h) + 76px);flex-direction:column;overflow:visible;gap:.15rem;padding:.2rem 0;background:transparent}
  .cat-nav__item{background:transparent;border:0;border-radius:10px;color:var(--color-muted);padding:.5rem .7rem}
  .cat-nav__item:hover{background:var(--color-primary-tint);color:var(--color-primary)}
  .cat-nav__item.is-active{background:var(--color-primary-tint);color:var(--color-primary)}
  .menu-sections{min-width:0}
}

/* ---- rij-knop "Kiezen" ---- */
.item__choose{padding:.5rem 1.1rem;font-size:.9rem;white-space:nowrap}

/* ---- uitverkocht: rij blijft zichtbaar maar is niet bestelbaar (knop toont het) ---- */
.item--out .item__name{color:var(--color-muted)}
.item__choose--out,.item__choose--out:hover{background:#eef0f3;color:var(--color-muted);border:1px solid var(--color-border);cursor:not-allowed;box-shadow:none}

/* ---- product-popup (modal) ---- */
.modal{position:fixed;inset:0;z-index:40;pointer-events:none}
.modal.is-open{pointer-events:auto}
.modal__backdrop{position:absolute;inset:0;background:rgba(16,24,40,.5);opacity:0;transition:opacity .3s ease}
.modal.is-open .modal__backdrop{opacity:1}
/* mobiel: bottom-sheet die smooth omhoog schuift */
/* --panel-pt/--panel-pb = de boven-/onderpadding van het paneel. Sticky koppen en
   voeten moeten die met een negatieve top/bottom opvangen, anders blijft er een
   strook over waar de inhoud zichtbaar onder de knoppen (of achter de kop) doorscrolt. */
.modal__panel{--panel-pt:1.4rem;--panel-pb:1.1rem;position:absolute;left:0;right:0;bottom:0;background:var(--color-card);max-height:94vh;max-height:94dvh;overflow:auto;border-radius:20px 20px 0 0;padding:var(--panel-pt) 1.2rem var(--panel-pb);box-shadow:0 -8px 40px rgba(0,0,0,.2);transform:translateY(100%);transition:transform .34s cubic-bezier(.32,.72,0,1);-webkit-overflow-scrolling:touch}
.modal.is-open .modal__panel{transform:translateY(0)}
.modal__close{position:absolute;top:.7rem;right:.8rem;width:34px;height:34px;border:0;border-radius:50%;background:var(--color-bg);font-size:1.35rem;line-height:1;cursor:pointer;color:var(--color-muted)}
/* Samensteller: de sluitknop staat absoluut in een scrollend paneel en zou dus wegscrollen
   (en onder de sticky kop schuiven). Sticky + float houdt hem bereikbaar zonder ruimte in te
   nemen. Niet voor account-/aanmeldmodal: die scrollen niet zo lang. */
#product-modal .modal__close{position:sticky;float:right;top:calc(-1 * var(--panel-pt));right:auto;z-index:4;margin:0 0 -2.2rem 0}
/* Mand-drawer: de checkout is een lange wizard (stappen 2-4 scrollen). `float` + `position:sticky`
   in een momentum-scrollpaneel (-webkit-overflow-scrolling) rendert iOS-Safari fout → de ×
   scrolt weg en je kunt niet meer sluiten. Zonder float (rechts uitgelijnd via `margin-left:auto`)
   blijft de sticky wél werken; de negatieve onder-marge houdt 'm buiten de contentflow en de
   hoge z-index legt 'm boven de sticky checkout-kop (z-3). */
#cart-drawer .modal__close{position:sticky;top:.5rem;left:auto;right:auto;float:none;display:block;width:34px;height:34px;margin:0 0 -2.4rem auto;z-index:10;box-shadow:0 2px 8px rgba(16,24,40,.18)}
.modal__loading{padding:2.5rem 1rem;text-align:center;color:var(--color-muted)}
/* Overgangsscherm bij redirect naar de externe (Mollie) betaalpagina */
.pay-redirect{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.94);opacity:0;transition:opacity .2s ease}
.pay-redirect.is-on{opacity:1}
.pay-redirect__box{text-align:center;padding:2rem;max-width:22rem}
.pay-redirect__spin{width:2.6rem;height:2.6rem;margin:0 auto 1.1rem;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:pay-spin .8s linear infinite}
.pay-redirect__title{font-weight:700;color:var(--color-text);margin:0 0 .35rem;font-size:1.05rem}
.pay-redirect__sub{font-size:.9rem;color:var(--color-muted);margin:0}
@keyframes pay-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.pay-redirect__spin{animation-duration:1.6s}}
/* De kop plakt bovenaan, zoals .pm-foot dat onderaan doet: bij een lange optielijst
   moet zichtbaar blijven wélk broodje je samenstelt. De negatieve top vangt de
   paneelpadding op (spiegelt .pm-foot{bottom:-1.1rem}); padding-right houdt de plek
   van de sluitknop vrij, die daarom hierboven ligt (z-index). */
.pm-head{position:sticky;top:-1.4rem;z-index:3;background:var(--color-card);display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:.1rem 0 .1rem 0;padding:.35rem 2.4rem .35rem 0}
.pm-title{margin:0;font-size:1.3rem;letter-spacing:-.01em}
.pm-price{font-weight:700;color:var(--color-primary);font-size:1.15rem;white-space:nowrap}
.pm-desc{margin:.2rem 0 .6rem;color:var(--color-muted);font-size:.9rem}
.pm-sec{border-top:1px solid var(--color-border);padding:.85rem 0}
.pm-sec__title{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;font-size:1rem}
.pm-tag{font-size:.72rem;font-weight:600;color:var(--color-muted);background:var(--color-bg);border-radius:999px;padding:.1rem .55rem}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot--green{background:var(--color-included)}
.pm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pm-ing{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem .1rem;border-top:1px solid var(--color-bg)}
.pm-ing:first-child{border-top:0}
.pm-ing label{display:flex;align-items:center;gap:.65rem;cursor:pointer;flex:1;min-width:0}
.pm-ing input{width:20px;height:20px;flex-shrink:0;accent-color:var(--color-primary)}
.pm-ing input.pm-opt--def{accent-color:var(--color-included)}
.pm-ing input:disabled{opacity:.5;cursor:not-allowed}
.pm-delta{color:var(--color-primary);font-weight:600;font-size:.9rem;white-space:nowrap}
.pm-hint{margin:0;color:var(--color-muted);font-size:.8rem;font-weight:400}
.pm-summary .pm-sum{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem}
.pm-summary .pm-sum:empty{display:none}
.lbl{font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;margin-right:.4rem}
.lbl--green{color:var(--color-included)}
.lbl--red{color:#c0392b}
.lbl--pri{color:var(--color-primary)}
.pm-allerg{margin-top:.55rem;font-size:.85rem;color:var(--color-muted)}
.pm-allerg__lbl{font-weight:600}
.chip{display:inline-block;background:var(--color-bg);border:1px solid var(--color-border);border-radius:999px;padding:.12rem .55rem;font-size:.8rem;color:var(--color-text);margin:.1rem .1rem 0 0}
.pm-name .pm-name__self{display:inline-flex;align-items:center;gap:.4rem}
.pm-name__other-btn{background:none;border:0;color:var(--color-primary);font:inherit;font-weight:600;cursor:pointer;margin-left:.6rem;padding:0}
.pm-name__other-btn:hover{text-decoration:underline}
.pm-name__input{margin-top:.5rem;width:100%;padding:.6rem .8rem;border:1px solid var(--color-border);border-radius:10px;font:inherit}
.pm-name__input:focus{outline:2px solid var(--color-primary);outline-offset:1px;border-color:transparent}
.pm-foot{position:sticky;bottom:calc(-1 * var(--panel-pb));background:var(--color-card);display:flex;align-items:center;gap:.8rem;padding:.9rem 0 calc(.1rem + var(--panel-pb));margin-top:.4rem;border-top:1px solid var(--color-border)}
.pm-foot .stepper__btn{width:38px;height:38px}
.pm-add{flex:1;padding:.85rem 1rem}
/* desktop: drawer die van rechts uitschuift, volledige hoogte */
@media(min-width:640px){
  .modal__panel{--panel-pt:1.5rem;--panel-pb:1.2rem;left:auto;top:0;right:0;bottom:0;width:440px;max-width:92vw;max-height:none;height:100%;border-radius:0;padding:var(--panel-pt) 1.4rem var(--panel-pb);transform:translateX(100%)}
  .modal.is-open .modal__panel{transform:translateX(0)}
}

/* ---- toast (bevestiging na toevoegen) ---- */
.toast{position:fixed;left:50%;bottom:5.5rem;transform:translateX(-50%) translateY(1rem);background:var(--color-text);color:#fff;padding:.7rem 1.1rem;border-radius:999px;font-weight:600;font-size:.9rem;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s ease;z-index:50;max-width:90vw}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast--action{cursor:pointer;pointer-events:auto;text-decoration:underline;text-underline-offset:3px}

/* ---- single-keuze als moderne knoppen (bv. Soort Broodje) ---- */
.pm-pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pm-pill{display:inline-flex;align-items:center;padding:.5rem .95rem;border:1px solid var(--color-border);border-radius:999px;cursor:pointer;font-weight:600;font-size:.9rem;background:var(--color-card)}
.pm-pill:hover{border-color:var(--color-primary)}
.pm-pill input{position:absolute;opacity:0;width:0;height:0}
.pm-pill:has(input:checked){background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.pm-pill em{font-style:normal;font-size:.8rem;opacity:.85;margin-left:.35rem}

/* ---- "nog niet toegevoegd"-waarschuwing ---- */
.pm-warn{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:1.2rem;background:rgba(16,24,40,.45);opacity:0;transition:opacity .2s ease}
.pm-warn.is-show{opacity:1}
.pm-warn__box{background:var(--color-card);border-radius:var(--radius);padding:1.3rem;max-width:340px;text-align:center;box-shadow:var(--shadow)}
.pm-warn__box p{margin:0 0 1rem;font-weight:600}
.pm-warn__btns{display:flex;gap:.6rem}
.pm-warn__btns .btn{flex:1;justify-content:center}

/* ---- verwijderd standaard-ingrediënt: rood + doorstreept + undo-chip ---- */
.pm-ing.is-removed > label{color:#c0392b;text-decoration:line-through}
.chip--undo{background:#fdecea;border:1px solid #f3c9c3;color:#c0392b;cursor:pointer;font:inherit;font-size:.8rem;font-weight:600;border-radius:999px;padding:.14rem .55rem;display:inline-flex;align-items:center;gap:.3rem;margin:.12rem .12rem 0 0}
.chip--undo:hover{background:#f9d9d4}
.chip--undo span{font-size:1.05rem;line-height:.7}
/* "Met"-chip: zelfde vorm als Zonder, maar groen (x = verwijderen) */
.chip--rm{background:#e8f5ec;border:1px solid #bfe6cd;color:#1f7a44;cursor:pointer;font:inherit;font-size:.8rem;font-weight:600;border-radius:999px;padding:.14rem .55rem;display:inline-flex;align-items:center;gap:.3rem;margin:.12rem .12rem 0 0}
.chip--rm:hover{background:#dcf0e4}
.chip--rm span{font-size:1.05rem;line-height:.7}
/* allergenen als pictogram + naam */
.pm-allerg .allergen{display:inline-flex;align-items:center;gap:.35rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:999px;padding:.12rem .55rem .12rem .25rem;font-size:.78rem;color:var(--color-text);margin:.12rem .12rem 0 0;vertical-align:middle}
.pm-allerg .allergen img{width:24px;height:24px;object-fit:contain;display:block}
/* live status-badge (Standaard/Aangepast) */
.pm-statusrow{margin:.15rem 0 .4rem}
.pm-status{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;padding:.2rem .65rem;border-radius:999px}
.pm-status::before{content:'';width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pm-status[data-state="standaard"]{background:#e8f5ec;color:#1f7a44}
.pm-status[data-state="standaard"]::before{background:var(--color-included)}
.pm-status[data-state="aangepast"]{background:#fef2e2;color:#b26a00}
.pm-status[data-state="aangepast"]::before{background:#e58a00}

/* ---- mandoverzicht (/bestellen/overzicht) ---- */
.cart-page{padding-top:1.2rem}
.cart-page__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.cart-page__title{font-size:1.5rem;margin:0;letter-spacing:-.02em}
.cart-page__back{color:var(--color-primary);font-weight:600;font-size:.9rem}
.cart-page__back:hover{text-decoration:underline}
.cart-list{display:flex;flex-direction:column;gap:.8rem}
.cart-line{display:flex;gap:1rem;justify-content:space-between;background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow-sm)}
.cl-main{min-width:0;flex:1}
.cl-head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.cl-name{font-weight:700}
.cl-label{font-size:.78rem;font-weight:600;color:var(--color-primary);background:var(--color-primary-tint);border-radius:999px;padding:.1rem .55rem}
.cl-comp{margin-top:.4rem;display:flex;flex-direction:column;gap:.15rem;font-size:.88rem}
.cl-comp .lbl{margin-right:.4rem}
.cl-allergens{margin-top:.55rem;display:flex;flex-wrap:wrap;gap:.35rem}
.cl-allergen{display:inline-flex;align-items:center}
.cl-allergen img{width:22px;height:22px;object-fit:contain;display:block}
.cl-side{display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;flex-shrink:0;text-align:right}
.cl-price{font-weight:700;color:var(--color-primary)}
.cl-actions{margin-top:.7rem;display:flex;flex-wrap:wrap;gap:1rem}
.cl-link{background:none;border:0;padding:0;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;color:var(--color-muted)}
.cl-edit{color:var(--color-primary)}
.cl-link:hover{text-decoration:underline}
.cl-remove:hover{color:#c0392b}
.cart-add{margin-top:.9rem;width:100%;background:var(--color-card);border:1.5px dashed var(--color-border);border-radius:var(--radius);padding:.9rem 1rem;font:inherit;font-weight:600;color:var(--color-primary);cursor:pointer;transition:.12s ease}
.cart-add:hover{border-color:var(--color-primary);background:var(--color-primary-tint)}
.cart-empty{text-align:center;color:var(--color-muted);padding:3rem 1rem;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.cart-empty p{margin:0}
/* ---- checkout (drawer + losse pagina) ---- */
.checkout-page{max-width:640px;margin:0 auto;padding-top:1rem}
/* Kop van de checkout (titel + stroomkeuze + stappen) plakt bovenaan: zonder dit
   scrolde de stappenbalk half uit beeld en verdween het overzicht van waar je zit.
   De negatieve top vangt de paneelpadding op (spiegelt .cart-foot), de eigen
   padding-top vult die weer op zodat de layout niet verspringt. */
.checkout__top{position:sticky;top:calc(-1 * var(--panel-pt));z-index:3;background:var(--color-bg);margin-top:calc(-1 * var(--panel-pt));padding-top:var(--panel-pt)}
.checkout__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:0 0 1rem;padding-right:2rem}
.checkout__title{font-size:1.4rem;margin:0;letter-spacing:-.02em}
.flow-toggle{display:inline-flex;gap:.25rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:999px;padding:.2rem}
.flow-toggle__btn{border:0;background:none;border-radius:999px;padding:.4rem .9rem;font:inherit;font-weight:600;font-size:.85rem;color:var(--color-muted);cursor:pointer}
.flow-toggle__btn.is-active{background:var(--color-primary);color:#fff}
.co-sec{margin:0 0 1.4rem}
.co-sec__head{display:flex;align-items:center;gap:.6rem;margin:0 0 .8rem}
.co-num{position:relative;flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--color-primary);color:#fff;display:grid;place-items:center;font-size:.85rem;font-weight:700}
.co-sec.is-done .co-num{background:var(--color-included);font-size:0}
.co-sec.is-done .co-num::after{content:'✓';font-size:.95rem;color:#fff}
.co-sec__title{font-size:1.15rem;margin:0 0 .8rem;letter-spacing:-.01em}
.co-sec__lead{margin:-.4rem 0 .7rem;color:var(--color-muted);font-size:.85rem}
.co-only-b2b,.co-only-b2c{display:none}
#cart-page[data-flow="b2c"] .co-only-b2c{display:block}
#cart-page[data-flow="b2b"] .co-only-b2b{display:block}
.field{margin-bottom:.8rem;display:flex;flex-direction:column;gap:.3rem}
.field-row{display:grid;gap:.8rem;grid-template-columns:1fr}
.field__label{font-size:.85rem;font-weight:600}
.req{color:var(--color-primary)}
.field__input{width:100%;padding:.65rem .8rem;border:1px solid var(--color-border);border-radius:10px;font:inherit;background:var(--color-card)}
.field__input:focus{outline:2px solid var(--color-primary);outline-offset:1px;border-color:transparent}
.field__input.is-invalid{border-color:#c0392b;background:#fdecea}
.co-hint{margin:.4rem 0 0;color:var(--color-muted);font-size:.82rem}
/* Interne beheer-noot op een klantpagina (snippet 'staff-hint') — enkel voor staff. */
.staff-hint{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;margin:.4rem 0 0;color:var(--color-muted);font-size:.82rem}
.staff-hint__tag{flex-shrink:0;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--color-primary);background:var(--color-primary-tint);border-radius:999px;padding:.1rem .5rem}
.co-note{background:var(--color-primary-tint);border-radius:var(--radius-sm);padding:.9rem 1rem}
.co-note p{margin:0 0 .4rem}
.co-note p:last-child{margin:0}
.co-note--paused{background:#fff4e5;color:#7a4b00;font-weight:600}
.co-note__soon{color:var(--color-muted);font-size:.85rem}
.co-account{background:var(--color-primary-tint);border-radius:var(--radius-sm);padding:.9rem 1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.co-account__hi{margin:0}
.co-login{margin-top:.8rem}
.co-register-hint{margin:.9rem 0 0;font-size:.88rem;color:var(--color-muted);text-align:center}
.co-register-hint a{color:var(--color-primary);font-weight:600;text-decoration:none}
.co-register-hint a:hover{text-decoration:underline}
.co-login .co-login-btn,.co-login .co-2fa-btn{width:100%;justify-content:center;margin-top:.3rem}
.co-2fa-hint{margin:.2rem 0 .6rem;font-size:.9rem}
.co-remember{display:flex;align-items:center;gap:.5rem;margin:.5rem 0;font-size:.9rem;cursor:pointer}
.co-remember input{width:18px;height:18px;accent-color:var(--color-primary);flex-shrink:0}
/* betaalmethoden als selecteerbare kaarten */
.pay-methods{display:flex;flex-direction:column;gap:.55rem}
/* Toggle-elementen in het drawer-paneel krijgen GEEN transitie: het paneel
   schuift met transform en Chromium desynct transities op descendants daarvan
   (de opgelichte staat bleef op de vórige keuze hangen). Instant schakelen. */
.pay-card{position:relative;display:flex;align-items:center;gap:.75rem;padding:.8rem .9rem;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;font-weight:600}
.pay-card:hover{border-color:var(--color-primary)}
.pay-card input{position:absolute;opacity:0;width:0;height:0}
.pay-card.is-selected{border-color:var(--color-primary);background:var(--color-primary-tint)}
.pay-card__ic{width:30px;color:var(--color-primary);flex-shrink:0;display:grid;place-items:center}
.pay-card__ic svg{width:24px;height:24px}
.pay-card__name{flex:1}
.pay-card__dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--color-border);flex-shrink:0}
.pay-card.is-selected .pay-card__dot{border-color:var(--color-primary);background:var(--color-primary);box-shadow:inset 0 0 0 3px #fff}
/* voettekst: totalen + knop + beveiligingsnoot (sticky onderaan de drawer) */
.cart-foot{position:sticky;bottom:calc(-1 * var(--panel-pb));z-index:2;margin-top:1.2rem;background:var(--color-card);display:flex;flex-direction:column;gap:.7rem;border-top:1px solid var(--color-border);padding:.9rem 0 calc(.3rem + var(--panel-pb))}
.co-totals{display:flex;flex-direction:column;gap:.15rem}
.co-totals__row{display:flex;justify-content:space-between;color:var(--color-muted);font-size:.9rem}
.co-totals__total{display:flex;justify-content:space-between;align-items:baseline;font-size:1.2rem;margin-top:.15rem}
.co-totals__total strong{color:var(--color-primary)}
.co-nav{display:flex;gap:.6rem}
.co-prev{flex:0 0 auto}
.co-next,.cart-checkout{flex:1;justify-content:center;padding:.9rem 1rem;font-size:1rem}
.co-secure{display:flex;align-items:center;gap:.4rem;justify-content:center;color:var(--color-muted);font-size:.8rem;margin:.6rem 0 0}
.co-secure svg{width:15px;height:15px;flex-shrink:0}
@media(min-width:640px){.field-row{grid-template-columns:1fr 1fr}}

/* wizard-stappen (voortgang) */
.co-steps{list-style:none;display:flex;gap:.3rem;margin:0 0 1.3rem;padding:0}
.co-steps__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.72rem;font-weight:600;color:var(--color-muted);text-align:center}
.co-steps__num{width:26px;height:26px;border-radius:50%;background:var(--color-card);border:1.5px solid var(--color-border);display:grid;place-items:center;font-size:.8rem}
.co-steps__item.is-active .co-steps__num{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.co-steps__item.is-active{color:var(--color-primary)}
.co-steps__item.is-done{cursor:pointer}
.co-steps__item.is-done .co-steps__num{background:var(--color-included);border-color:var(--color-included);color:#fff;font-size:0}
.co-steps__item.is-done .co-steps__num::after{content:'✓';font-size:.85rem}

/* stap-secties: enkel de actieve stap tonen */
.co-sec[data-step]{display:none}
#cart-page[data-step="1"]:not(.is-complete) .co-sec[data-step="1"],
#cart-page[data-step="2"]:not(.is-complete) .co-sec[data-step="2"],
#cart-page[data-step="3"]:not(.is-complete) .co-sec[data-step="3"],
#cart-page[data-step="4"]:not(.is-complete) .co-sec[data-step="4"]{display:block}

/* dag-/tijdslot-chips */
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}
.chip-btn{border:1.5px solid var(--color-border);background:var(--color-card);border-radius:999px;padding:.5rem .9rem;font:inherit;font-weight:600;font-size:.88rem;color:var(--color-text);cursor:pointer}
.chip-btn:hover{border-color:var(--color-primary)}
.chip-btn.is-active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.slot-chips .chip-btn{min-width:4.2rem;text-align:center}
.co-slot-chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.12;gap:1px}
.csl-tag{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.csl-tag--near{color:var(--color-primary)}
.csl-tag--full{color:var(--color-danger,#b91c1c)}
.co-slot-chip.is-near{border-color:var(--color-primary)}
.co-slot-chip.is-active .csl-tag{color:#fff}
.co-slot-chip.is-off{opacity:.45;cursor:not-allowed;pointer-events:none}
.co-slot-chip.is-off .csl-t{text-decoration:line-through}
.co-slot-chip.is-off:hover{border-color:var(--color-border)}
.day-chips .chip-btn.is-off{opacity:.4;text-decoration:line-through;cursor:not-allowed;pointer-events:none}
.day-chips .chip-btn.is-off:hover{border-color:var(--color-border)}
.co-slots-none{margin:.5rem 0 0;color:var(--color-danger,#b91c1c);font-size:.82rem;font-weight:600}
/* Dag-bevestiging onder de dag-chips: altijd de VOLLEDIGE datum.
   Twee gedaanten:
   - rustig (klant krijgt de dag die hij vroeg) = één regel grijze tekst;
   - opvallend (de checkout moest doorschuiven: gesloten dag / besteltijd voorbij) = een echte
     paarse melding met slot-icoon, kop en de eerst mogelijke dag. Die MOET gezien worden,
     want klanten lazen over een subtiele regel heen en dachten voor vandaag te bestellen. */
/* Plek BOVENAAN de checkout (buiten de stappen) voor de opvallende dag-melding: zo ziet de
   klant ze al zodra de mand opengaat. Leeg/verborgen als er niets aan de hand is. */
.co-alert{margin:.7rem 0 0}
.co-alert[hidden]{display:none}
.co-daynote{margin:.55rem 0 0;font-size:.86rem;line-height:1.45;color:var(--color-muted)}
.co-daynote strong{color:var(--color-text)}
.co-daynote--shift{
  display:flex;gap:.6rem;align-items:flex-start;
  margin-top:.6rem;padding:.7rem .85rem;
  color:var(--color-text);font-size:.88rem;
  background:linear-gradient(180deg,var(--color-primary-tint),color-mix(in srgb,var(--color-primary-tint) 55%,#fff));
  border:1px solid color-mix(in srgb,var(--color-primary) 28%,transparent);
  border-radius:var(--radius);
  box-shadow:0 1px 2px color-mix(in srgb,var(--color-primary) 14%,transparent)
}
/* Terugval voor browsers zonder color-mix(): platte tint + rand in de huisstijlkleur. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .co-daynote--shift{background:var(--color-primary-tint);border-color:var(--color-primary)}
}
.co-daynote__ico{flex:0 0 auto;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--color-primary);color:#fff;box-shadow:0 1px 3px rgba(20,15,35,.18)}
.co-daynote__txt{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.co-daynote__kop{font-size:.95rem;font-weight:800;letter-spacing:-.01em;color:var(--color-primary)}
/* Leesorde: kop = de reden ("Jaarlijks verlof") · mid = wat het betekent ("Vandaag gesloten,
   tot en met …") · sub = de uitkomst ("Bestellen mogelijk voor …"). */
.co-daynote__mid{color:var(--color-text)}
.co-daynote__sub{color:var(--color-text)}
.co-daynote__sub b{font-weight:800}
/* "Andere dag kiezen" — maakt zichtbaar dat het voorgestelde moment te wijzigen is. */
.co-daynote__act{display:inline-flex;align-items:center;gap:.25rem;align-self:flex-start;margin-top:.3rem;padding:0;border:0;background:none;font:inherit;font-size:.84rem;font-weight:700;color:var(--color-primary);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.co-daynote__act:hover{text-decoration-thickness:2px}
.co-daynote__act:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:4px}
.co-daynote__act svg{transition:transform .15s ease}
.co-daynote__act:hover svg{transform:translateX(2px)}
/* Fase 2a.2: leverkanaal — adresvelden enkel bij "Leveren". */
.co-chan__row{margin-top:.2rem}
.co-deliver{display:none}
#cart-page[data-fulfillment="delivery"] .co-deliver{display:block}
.co-field--zip{max-width:9rem}
/* 2a.3: de kanaal-toggle enkel tonen voor de flow die mag leveren (B2C: doelgroep
   'all'; B2B: levering aan). De andere flow ziet enkel afhalen. */
#cart-page[data-flow="b2c"]:not([data-b2c-delivery="1"]) .co-chan,
#cart-page[data-flow="b2b"]:not([data-b2b-delivery="1"]) .co-chan{display:none}
/* 2a.3: B2B-leveradres — bedrijfsadres standaard, losse velden enkel bij "Ander adres". */
.co-b2b-addr{margin-bottom:.8rem;display:flex;flex-direction:column;gap:.3rem}
.co-addr-mode{margin-top:.2rem}
.co-addr-company{margin:.5rem 0 0;font-size:.9rem;color:var(--color-text);display:none}
/* Bedrijfsadres-modus: toon de adresregel, verberg de losse velden. */
#cart-page[data-flow="b2b"][data-addr-mode="company"] .co-addr-company{display:block}
#cart-page[data-flow="b2b"][data-addr-mode="company"] .co-addr-fields{display:none}
/* Laag 4: kanaal vergrendeld op de bedrijf-default → geen keuze-toggle voor de werknemer. */
#cart-page[data-flow="b2b"][data-b2b-chan-lock="1"] .co-chan{display:none}
.co-addr-locked{color:var(--color-muted);font-weight:600;font-size:.85rem}

/* eigen kalender (huisstijl) — vervangt de native date-picker */
.co-cal{margin-top:.6rem;width:100%;max-width:20rem;background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:.65rem}
.co-cal__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}
.co-cal__title{font-weight:700;font-size:.92rem;color:var(--color-text)}
.co-cal__nav{width:2rem;height:2rem;flex-shrink:0;border:1.5px solid var(--color-border);background:var(--color-card);border-radius:999px;font-size:1.15rem;line-height:1;color:var(--color-text);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.co-cal__nav:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)}
.co-cal__nav:disabled{opacity:.35;cursor:not-allowed}
.co-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.15rem}
.co-cal__wd{text-align:center;font-size:.66rem;font-weight:700;color:var(--color-muted);text-transform:uppercase;letter-spacing:.02em;padding:.2rem 0}
.co-cal__day{aspect-ratio:1;min-height:2rem;border:0;background:transparent;border-radius:50%;font:inherit;font-size:.82rem;font-weight:600;color:var(--color-text);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.co-cal__day:hover:not(:disabled):not(.is-active){background:var(--color-primary-tint)}
.co-cal__day.is-today:not(.is-active){box-shadow:inset 0 0 0 1.5px var(--color-primary)}
.co-cal__day.is-active{background:var(--color-primary);color:#fff}
.co-cal__day.is-off{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.co-cal__day.is-closed{position:relative;opacity:.55;text-decoration:none}
.co-cal__day.is-closed::after{content:"";position:absolute;left:50%;bottom:3px;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:#c2410c}

/* inline bevestiging */
#cart-page:not(.is-complete) .co-success{display:none}
#cart-page.is-complete > *:not(.co-success){display:none}
.co-success{text-align:center;padding:1.6rem .5rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.co-success__icon{width:64px;height:64px;border-radius:50%;background:var(--color-included);color:#fff;display:grid;place-items:center;margin-bottom:.3rem}
.co-success__icon svg{width:32px;height:32px}
.co-success__title{margin:0;font-size:1.4rem;letter-spacing:-.01em}
.co-success__text{margin:0;color:var(--color-muted)}
.co-success__detail{width:100%;max-width:22rem;margin:.9rem 0 .3rem;display:flex;flex-direction:column;gap:.4rem}
.co-success__row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem .85rem;background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.92rem}
.co-success__row span{color:var(--color-muted)}
.co-success__demo{font-size:.8rem;color:#8a5a00;background:#fef2e2;border-radius:var(--radius-sm);padding:.6rem .85rem;max-width:24rem}
.co-success__new{margin-top:.5rem}

/* winkelmand-drawer: breder dan de product-drawer, onder het product-modal */
#cart-drawer{z-index:35}
#cart-drawer .modal__panel{background:var(--color-bg)}
/* Mobiel: minimumhoogte tijdens de wizard. Elke stap heeft andere inhoud, dus een
   sheet die puur met de inhoud meegroeit klapt bij iedere stap op en neer (gemeten:
   610→696→571→704px). De ondergrens vangt de korte stappen op; lange stappen mogen
   nog groeien tot de max-height (94dvh) en daarna scrollen. Desktop kent dit niet —
   daar is de drawer een zijpaneel op volle hoogte.
   `dvh` (dynamische viewport) i.p.v. `vh`: op iOS-Safari is `vh` de GROTE viewport (achter de
   URL-balk), waardoor de paneel-top — met de sluit-× — onder de URL-balk schoof en onbereikbaar
   werd. `dvh` volgt de zichtbare hoogte, dus de bovenrand (en de ×) blijven vrij. */
@media(max-width:639px){#cart-drawer .modal__panel{min-height:90vh;min-height:90dvh}}
#cart-drawer .cart-foot{background:var(--color-bg)}
#cart-drawer .cart-empty{padding:2rem 1rem}
@media(min-width:640px){.modal--wide .modal__panel{width:520px;max-width:94vw}}

/* ---- account-/auth-pagina's (B2B onboarding, fase 2b) ---- */
.account-page,.auth-page{max-width:640px;margin:0 auto;padding-top:1.4rem}
.account-page__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.account-page__title,.auth-page__title{font-size:1.5rem;margin:0;letter-spacing:-.02em}
.account-page__back{color:var(--color-primary);font-weight:600;font-size:.9rem}
.account-page__back:hover{text-decoration:underline}
.auth-page__sub{color:var(--color-muted);margin:.2rem 0 1.2rem}
.account-card,.auth-card{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow-sm);margin-bottom:1.4rem}
.account-card__title{margin:0 0 .8rem;font-size:1.05rem}
.account-card .btn,.auth-card .btn{margin-top:.5rem}
.account-page__intro{color:var(--color-muted);margin:0 0 1.2rem;max-width:38rem}
.account-card--center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.account-card__text{color:var(--color-muted);margin:0 0 .4rem;max-width:32rem}
.account-card__check{width:60px;height:60px;border-radius:50%;background:var(--color-included);color:#fff;display:grid;place-items:center;font-size:1.8rem;font-weight:700}
.notice{border-radius:var(--radius-sm);padding:.7rem .9rem;margin:0 0 1rem;font-size:.9rem}
.notice--ok{background:#e8f5ec;color:#1f7a44;border:1px solid #bfe6cd}
.notice--err{background:#fdecea;color:#c0392b;border:1px solid #f3c9c3}
.notice--warn{background:#fff5e6;color:#8a5a00;border:1px solid #ffd591}
.user-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.user-row{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.8rem 1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.user-row__info{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.user-row__name{font-weight:600}
.user-row__badge{font-size:.68rem;font-weight:700;color:var(--color-primary);background:var(--color-primary-tint);border-radius:999px;padding:.05rem .45rem;vertical-align:middle}
.user-row__user{font-size:.82rem;color:var(--color-muted)}
.user-row__status{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.user-row__ok{color:var(--color-included);font-weight:600;font-size:.85rem}
.user-row__pending{color:#b26a00;font-weight:600;font-size:.85rem}
.user-row__link{font-size:.78rem;padding:.35rem .5rem;border:1px solid var(--color-border);border-radius:8px;background:var(--color-bg);min-width:240px;max-width:100%}
.user-row.is-inactive{opacity:.62}
.user-row__action{margin-left:.4rem}
.btn--sm{padding:.4rem .8rem;font-size:.85rem}
.btn--ghost.btn--sm{background:var(--color-primary-tint);color:var(--color-primary)}
.co-account__actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}

/* ---- beveiliging / TOTP-setup ---- */
.sec-status--on{color:var(--color-included);font-weight:600}
.sec-lead{color:var(--color-muted);margin:0 0 1rem}
.sec-steps{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:1rem}
.sec-secret{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.15rem;letter-spacing:.08em;background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;padding:.6rem .8rem;margin:.5rem 0;user-select:all;word-break:break-all}
.sec-uri{display:inline-block;color:var(--color-primary);font-weight:600;font-size:.9rem}
.sec-uri:hover{text-decoration:underline}
/* Methodekeuze (e-mail vs authenticator) als moderne selecteerbare kaarten. */
.sec-methods{display:flex;flex-direction:column;gap:.7rem;margin:.2rem 0 1rem}
.sec-method{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-card)}
.sec-method.is-active{border-color:var(--color-primary);background:var(--color-primary-tint)}
.sec-method__ic{flex-shrink:0;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--color-bg);color:var(--color-primary)}
.sec-method.is-active .sec-method__ic{background:#fff}
.sec-method__ic svg{width:22px;height:22px}
.sec-method__body{flex:1;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.sec-method__name{font-weight:700}
.sec-method__desc{font-size:.85rem;color:var(--color-muted);word-break:break-word}
.sec-method__action{flex-shrink:0}
.sec-method__badge{flex-shrink:0;display:inline-flex;align-items:center;gap:.3rem;font-size:.85rem;font-weight:700;color:var(--color-primary)}
.sec-method__badge svg{width:15px;height:15px}
.sec-setup{margin-top:.5rem;padding-top:1rem;border-top:1px solid var(--color-border)}
.sec-setup__title{font-size:1rem;margin:0 0 .7rem}
@media(min-width:560px){.sec-method__desc{white-space:normal}}
/* Segmented radio (frontend) — huisstijl-pendant van de admin pcf-seg (manager-voorkeuren). */
.seg{display:inline-flex;flex-wrap:wrap;border:1.5px solid var(--color-border);border-radius:10px;overflow:hidden}
.seg__opt{cursor:pointer;user-select:none}
.seg__opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.seg__opt span{display:block;padding:.55rem .95rem;font-size:.9rem;font-weight:600;color:var(--color-text);background:var(--color-card);border-right:1.5px solid var(--color-border)}
.seg__opt:last-child span{border-right:0}
.seg__opt:has(input:checked) span{background:var(--color-primary);color:#fff}
.seg__opt:has(input:focus-visible) span{outline:2px solid var(--color-primary);outline-offset:-2px}
/* QR-code voor de authenticator-koppeling (scanbaar; sleutel is de fallback). */
.sec-qr{width:180px;max-width:100%;margin:.6rem 0;padding:.6rem;background:#fff;border:1px solid var(--color-border);border-radius:10px}
.sec-qr svg{display:block;width:100%;height:auto}
.sec-qr__hint{margin:.2rem 0 .4rem;color:var(--color-muted);font-size:.9rem}
.sec-manual{margin-top:.4rem}
.sec-manual summary{cursor:pointer;color:var(--color-primary);font-weight:600;font-size:.9rem}
.sec-manual[open] summary{margin-bottom:.2rem}
.sec-confirm{display:flex;gap:.6rem;margin-top:.5rem;flex-wrap:wrap;align-items:center}
.sec-confirm .field__input{max-width:8rem}

/* Werknemers-import (bedrijfsmanager): plakveld + resultaat-samenvatting */
.b2b-import{margin-top:1rem}
.b2b-import>summary{cursor:pointer;color:var(--color-primary);font-weight:600;font-size:.95rem;list-style:none}
.b2b-import>summary::-webkit-details-marker{display:none}
.b2b-import>summary::before{content:"+ ";font-weight:700}
.b2b-import[open]>summary::before{content:"– "}
.b2b-import__form{margin-top:.6rem}
.b2b-import__ta{width:100%;min-height:8rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;padding:.6rem;border:1px solid var(--color-border);border-radius:8px;resize:vertical;margin:.4rem 0 .7rem}
.b2b-import-result{margin-top:1rem}
.b2b-import-list{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-direction:column;gap:.4rem}
.b2b-import-list__row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:space-between}
.b2b-import-list__name{font-weight:600}
.b2b-import-list__user{font-weight:400;color:var(--color-muted);font-size:.85rem}
.b2b-import-list__link{flex:1 1 16rem;min-width:0;font-size:.8rem;padding:.3rem .4rem;border:1px solid var(--color-border);border-radius:6px;color:var(--color-muted)}
.b2b-import-skips{margin:.4rem 0 0;padding-left:1.1rem;font-size:.85rem;color:var(--color-muted)}
.b2b-import-skips code{background:var(--color-primary-tint);padding:.05rem .3rem;border-radius:4px;color:var(--color-text)}

/* Welkomstbanner na aanmelden (bestellen/producten?welkom=1) */
.welcome-banner{display:flex;align-items:center;gap:.8rem;margin:0 0 1rem;padding:.85rem 1.1rem;border-radius:12px;background:var(--color-primary-tint);border:1px solid var(--color-primary);color:var(--color-text)}
.welcome-banner__icon{font-size:1.5rem;line-height:1}
.welcome-banner b{display:block}
.welcome-banner__sub{color:var(--color-muted);font-size:.9rem}
/* Team-setup onboarding-banner (manager zonder werknemers) — hergebruikt .welcome-banner + acties */
.team-setup-banner__actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.6rem}
.team-setup-banner__dismiss{background:none;border:0;padding:.2rem;font:inherit;color:var(--color-muted);text-decoration:underline;cursor:pointer}
.team-setup-banner__dismiss:hover{color:var(--color-text)}

/* ── Pop-up / mededeling (module `popup`) ─────────────────────────────────────────────
   Geport van Kirby-Master `popup` v1.0.1 → pain2deco-tokens. 5 varianten (modal · corner ·
   slide-in · bar · spotlight) × 3 surfaces. z-index 45: boven de winkelmand (35) en de
   modals (40) zodat de dialoog echt bovenaan ligt, onder de toast (50). De JS wacht
   bovendien tot een open drawer/modal dicht is voor ze opent. */
.pop{position:fixed;inset:0;z-index:45;pointer-events:none;display:flex}
.pop[hidden]{display:none}
/* pointer-events staat op de CONTAINER uit en enkel op de backdrop + het paneel aan.
   Bewust: de container beslaat altijd het volledige scherm, dus 'auto' erop zou bij de
   varianten ZONDER backdrop (hoekkaart/inschuiven/balk) een onzichtbare kliklaag over de
   hele winkel leggen en elke klik op "Toevoegen"/mand/"Afrekenen" opslokken. */
.pop__backdrop{position:absolute;inset:0;pointer-events:auto;background:rgba(16,24,40,.5);opacity:0;transition:opacity .25s ease}
.pop.is-open .pop__backdrop{opacity:1}
.pop__panel{position:relative;pointer-events:auto;background:var(--color-card);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:0 18px 48px rgba(20,15,35,.22);padding:1.4rem;max-width:min(30rem,calc(100vw - 2rem));max-height:calc(100vh - 2rem);overflow:auto;opacity:0;transform:translateY(14px);transition:opacity .25s ease,transform .25s ease}
.pop.is-open .pop__panel{opacity:1;transform:none}
.pop__close{position:absolute;top:.55rem;right:.55rem;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:10px;background:rgba(255,255,255,.85);color:var(--color-text);cursor:pointer;box-shadow:var(--shadow-sm)}
.pop__close:hover{background:#fff}
.pop__media{margin:-1.4rem -1.4rem 1rem;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.pop__media img{display:block;width:100%;height:auto;max-height:14rem;object-fit:cover}
.pop__eyebrow{margin:0 0 .25rem;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-primary)}
.pop__title{margin:0 0 .5rem;font-size:1.35rem;line-height:1.25}
.pop__text{color:var(--color-muted);font-size:.95rem;line-height:1.5}
.pop__actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.1rem 0 0}
.pop__previewnote{margin:.9rem 0 0;font-size:.8rem;color:var(--color-muted);border-top:1px dashed var(--color-border);padding-top:.5rem}
/* Varianten — plaatsing van het paneel */
.pop--modal{align-items:center;justify-content:center;padding:1rem}
.pop--spotlight{align-items:center;justify-content:center;padding:1rem}
.pop--spotlight .pop__panel{max-width:min(46rem,calc(100vw - 2rem));padding:2rem}
.pop--spotlight .pop__title{font-size:1.7rem}
.pop--corner{align-items:flex-end;justify-content:flex-end;padding:1rem}
.pop--corner .pop__panel{max-width:min(22rem,calc(100vw - 2rem))}
.pop--slide-in{align-items:flex-end;justify-content:flex-start;padding:1rem}
.pop--slide-in .pop__panel{max-width:min(24rem,calc(100vw - 2rem));transform:translateX(-18px)}
.pop--slide-in.is-open .pop__panel{transform:none}
.pop--bar{align-items:flex-end;justify-content:center;padding:0}
.pop--bar .pop__panel{width:100%;max-width:none;border-radius:0;border-left:0;border-right:0;border-bottom:0;padding:1rem 1.2rem calc(1rem + env(safe-area-inset-bottom));display:flex;align-items:center;gap:1rem;flex-wrap:wrap;transform:translateY(100%)}
.pop--bar.is-open .pop__panel{transform:none}
.pop--bar .pop__media{display:none}
.pop--bar .pop__body{display:flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;flex:1}
.pop--bar .pop__title{font-size:1.05rem;margin:0}
.pop--bar .pop__actions{margin:0}
/* Zijpaneel: volledige-hoogte lade die van links óf rechts inschuift (navigatielade-stijl).
   Niet-modaal — het paneel vangt kliks, de rest van de winkel blijft bruikbaar; sluitknop verplicht. */
.pop--panel-left,.pop--panel-right{align-items:stretch;padding:0}
.pop--panel-left{justify-content:flex-start}
.pop--panel-right{justify-content:flex-end}
.pop--panel-left .pop__panel,.pop--panel-right .pop__panel{width:min(24rem,88vw);max-width:none;height:100vh;max-height:100vh;border-radius:0;border-top:0;border-bottom:0;display:flex;flex-direction:column}
.pop--panel-left .pop__panel{border-left:0;transform:translateX(-100%)}
.pop--panel-right .pop__panel{border-right:0;transform:translateX(100%)}
.pop--panel-left.is-open .pop__panel,.pop--panel-right.is-open .pop__panel{transform:none}
/* Inhoud verticaal gecentreerd wanneer er ruimte is; bij veel inhoud vallen de auto-marges weg
   en scrollt het paneel gewoon vanaf boven (overflow:auto staat al op .pop__panel). */
.pop--panel-left .pop__body,.pop--panel-right .pop__body{margin:auto 0}
/* Surfaces — achtergrond/kleurzetting */
.pop--tinted .pop__panel{background:var(--color-primary-tint);border-color:var(--color-primary)}
/* Op de tint-achtergrond haalt de gedempte tekstkleur net geen AA (4,15:1) → gewone tekstkleur. */
.pop--tinted .pop__text{color:var(--color-text)}
.pop--contrast .pop__panel{background:var(--color-text);color:#fff;border-color:transparent}
.pop--contrast .pop__title{color:#fff}
.pop--contrast .pop__text{color:rgba(255,255,255,.82)}
.pop--contrast .pop__eyebrow{color:#fff;opacity:.85}
.pop--contrast .pop__close{background:rgba(255,255,255,.16);color:#fff}
.pop--contrast .pop__close:hover{background:rgba(255,255,255,.28)}
.pop--contrast .pop__previewnote{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.25)}
@media (max-width:640px){
  /* Mobiel: hoek/inschuif-varianten worden volle-breedte kaarten onderaan (leesbaarder). */
  .pop--corner,.pop--slide-in{align-items:flex-end;justify-content:center}
  .pop--corner .pop__panel,.pop--slide-in .pop__panel{max-width:none;width:100%;transform:translateY(14px)}
  .pop--corner.is-open .pop__panel,.pop--slide-in.is-open .pop__panel{transform:none}
  .pop__panel{max-height:calc(100vh - 5rem)}
  .pop--spotlight .pop__panel{padding:1.4rem}
  /* Zijpaneel op mobiel: volle breedte + volledige hoogte (blijft van links/rechts inschuiven). */
  .pop--panel-left .pop__panel,.pop--panel-right .pop__panel{width:100%;max-height:100vh}
}
@media (prefers-reduced-motion:reduce){
  .pop__panel,.pop__backdrop{transition:none}
  .pop__panel,.pop--bar .pop__panel,.pop--slide-in .pop__panel,.pop--panel-left .pop__panel,.pop--panel-right .pop__panel{transform:none}
}

/* Impersonatie-banner (staff bekijkt als klant) — sticky bovenaan, opvallend */
/* Plakt mee via .site-top (de wrapper is sticky, deze banner dus niet apart). */
.imp-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;padding:.55rem 1rem;background:#8a3b00;color:#fff;font-size:.9rem}
.imp-banner__txt{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.imp-banner__note{opacity:.75;font-size:.8rem}
.imp-banner__form{margin:0}
.imp-banner__btn{background:#fff;color:#8a3b00;border:0;border-radius:8px;padding:.4rem .8rem;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer}
.imp-banner__btn:hover{background:#ffe9d6}

/* Header rechterzijde + account-menu (ingelogde klant/manager) */
.site-header__right{display:flex;align-items:center;gap:1rem}
.acct{position:relative}
.acct__btn{display:flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none;padding:.3rem .5rem;border-radius:999px;border:1px solid var(--color-border);background:var(--color-bg)}
.acct__btn::-webkit-details-marker{display:none}
.acct__btn:hover{border-color:var(--color-primary)}
.acct__avatar{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--color-primary);color:#fff;font-weight:700;font-size:.85rem}
.acct__name{font-weight:600;font-size:.9rem;max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct__chev{color:var(--color-muted);font-size:.7rem;transition:transform .15s}
.acct[open] .acct__chev{transform:rotate(180deg)}
.acct__menu{position:absolute;right:0;top:calc(100% + .4rem);z-index:900;min-width:14rem;background:var(--color-card);border:1px solid var(--color-border);border-radius:12px;box-shadow:0 14px 34px rgba(20,15,35,.16);padding:.4rem;display:flex;flex-direction:column}
.acct__co{padding:.35rem .6rem;color:var(--color-muted);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--color-border);margin-bottom:.25rem}
.acct__item{display:block;width:100%;text-align:left;padding:.5rem .6rem;border-radius:8px;font:inherit;font-size:.92rem;color:var(--color-text);text-decoration:none;background:none;border:0;cursor:pointer}
.acct__item:hover{background:var(--color-primary-tint)}
.acct__logout{margin:.25rem 0 0;border-top:1px solid var(--color-border);padding-top:.25rem}
.acct__item--logout{color:var(--color-danger);font-weight:600}
@media(max-width:560px){.acct__name{display:none}.site-help{display:none}}

/* Manager-landingspagina (hub) */
.mgr-home{max-width:52rem;margin:0 auto;padding:1.5rem 0}
.mgr-home__head{margin-bottom:1.4rem}
.mgr-home__welkom{display:inline-block;background:var(--color-primary-tint);color:var(--color-primary-dark);font-weight:700;font-size:.85rem;padding:.25rem .7rem;border-radius:999px;margin:0 0 .6rem}
.mgr-home__greet{font-size:1.9rem;margin:0 0 .2rem}
.mgr-home__sub{color:var(--color-muted);font-size:1.05rem;margin:0}
.mgr-home__co{color:var(--color-primary-dark);font-weight:700}
.mgr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.mgr-card{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.2rem;border:1px solid var(--color-border);border-radius:16px;background:var(--color-card);text-decoration:none;color:var(--color-text);transition:transform .12s,box-shadow .12s,border-color .12s}
.mgr-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,15,35,.10);border-color:var(--color-primary)}
.mgr-card__icon{font-size:1.9rem;line-height:1;flex:0 0 auto}
.mgr-card__body{display:flex;flex-direction:column;gap:.15rem;flex:1 1 auto;min-width:0}
.mgr-card__title{font-weight:700;font-size:1.05rem}
.mgr-card__text{color:var(--color-muted);font-size:.88rem}
.mgr-card__arrow{color:var(--color-primary);font-size:1.2rem;flex:0 0 auto;transition:transform .12s}
.mgr-card:hover .mgr-card__arrow{transform:translateX(3px)}
@media(max-width:600px){.mgr-grid{grid-template-columns:1fr}.mgr-home__greet{font-size:1.5rem}}

/* Aanmeld-wizard (bedrijf/aanmelden) */
.apply-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.apply-form{position:relative}
.js-apply .apply-step:not(.is-active){display:none}
.apply-steps{display:flex;gap:.4rem;list-style:none;padding:0;margin:0 0 1.2rem;counter-reset:s}
.apply-steps li{flex:1;text-align:center;font-size:.8rem;font-weight:600;color:var(--color-muted);padding:.4rem .2rem;border-bottom:3px solid var(--color-border);counter-increment:s}
.apply-steps li::before{content:counter(s) ". "}
.apply-steps li.is-active{color:var(--color-primary-dark);border-bottom-color:var(--color-primary)}
.apply-opt{font-weight:400;color:var(--color-muted);font-size:.82rem}
.apply-lead{color:var(--color-muted);margin:0 0 .8rem}
.apply-vat{display:flex;gap:.5rem;align-items:stretch}
.apply-vat .field__input{flex:1;min-width:0}
.apply-vat__msg{margin:.5rem 0 0;font-size:.85rem;padding:.4rem .6rem;border-radius:8px;background:var(--color-bg)}
.apply-vat__msg--ok{background:#e8f5ec;color:#1f7a44}
.apply-vat__msg--warn{background:#fff5e6;color:#8a5a00}
.apply-vat__msg--err{background:#fdecea;color:#c0392b}
.apply-addr{position:relative}
.apply-suggest{list-style:none;margin:.2rem 0 0;padding:.25rem;position:absolute;z-index:40;left:0;right:0;background:var(--color-card);border:1px solid var(--color-border);border-radius:10px;box-shadow:0 12px 28px rgba(20,15,35,.14);max-height:15rem;overflow:auto}
.apply-suggest li{padding:.5rem .6rem;border-radius:7px;cursor:pointer;font-size:.9rem}
.apply-suggest li:hover{background:var(--color-primary-tint)}
.apply-check{display:flex;align-items:center;gap:.5rem;margin:.2rem 0 .8rem;cursor:pointer;font-size:.92rem}
.apply-nav{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:1.2rem}
.apply-done__actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:.4rem 0 .6rem}
.field--bus{margin-top:-.4rem}
.field__hint{margin:.35rem 0 0;font-size:.8rem;color:var(--color-muted)}

/* Aanmeld-wizard als modal (homepage/B2C-polish): hergebruik het form-partial, maar
   zonder de kaart-omkadering (de modal-panel is al de kaart). */
.apply-modal__head{margin:.1rem 2rem 1rem 0}
.apply-modal__title{margin:0 0 .3rem;font-size:1.15rem}
.apply-modal__intro{margin:0;color:var(--color-muted);font-size:.9rem}
#apply-modal .apply-form{border:0;box-shadow:none;padding:0;margin:0;background:transparent}

/* B2C: gast-"Aanmelden"-knop in de header + login/registratie-modal */
.acct__login{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border-radius:999px;border:1px solid var(--color-border);color:var(--color-text);text-decoration:none;font-size:.9rem;font-weight:600;background:var(--color-card)}
.acct__login:hover{border-color:var(--color-primary);color:var(--color-primary-dark)}
.acct__login-ic{display:inline-flex;width:18px;height:18px}
.acct__login-ic svg{width:100%;height:100%}
.acct-pane .acctf{display:block}
.acct-pane .acctf .field{margin-bottom:.8rem}
.acct-pane .acctf .btn{margin-top:.2rem}
.acctf__fine{margin:.7rem 0 0;font-size:.8rem;color:var(--color-muted)}
.acct-switch{margin:1rem 0 0;font-size:.9rem;color:var(--color-muted);text-align:center}
.acct-msg{margin:0 0 .8rem}
.acct-2fa-hint{margin:0 0 .8rem;color:var(--color-muted);font-size:.9rem}
/* Betaling — terugkeerpagina (Mollie) */
.pay-return__icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:1.9rem;font-weight:700;color:#fff;margin:.2rem auto .3rem}
.pay-return__icon--ok{background:var(--color-included,#1f9d55)}
.pay-return__icon--err{background:#c0392b}
.pay-return__icon--wait{background:#c47f17}
@media(max-width:520px){.acct__login-txt{position:absolute;left:-9999px}}
/* Keuze-pane (gast/particulier/bedrijf) */
.acct-choice{display:flex;flex-direction:column;gap:.7rem}
.acct-choice__card{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;padding:.9rem 1rem;border:1px solid var(--color-border);border-radius:14px;background:var(--color-card);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .05s}
.acct-choice__card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.acct-choice__card:active{transform:translateY(1px)}
.acct-choice__ic{font-size:1.5rem;line-height:1;flex:none}
.acct-choice__body{flex:1;display:flex;flex-direction:column;gap:.15rem}
.acct-choice__t{font-weight:700;font-size:1rem}
.acct-choice__d{color:var(--color-muted);font-size:.85rem;line-height:1.3}
.acct-choice__arr{color:var(--color-primary);font-size:1.1rem;flex:none}
.acct-back{background:none;border:0;color:var(--color-muted);cursor:pointer;font-size:.85rem;padding:0 0 .6rem}
.acct-back:hover{color:var(--color-primary-dark)}
.co-guest-login{margin:.1rem 0 .9rem}
.acct-pane--center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.acct-pane--center .account-card__check{margin:.4rem 0 .2rem}
.acct-mailbtn{margin:.3rem 0 .5rem;width:100%;display:flex;justify-content:center}

/* Read-only bedrijfsgegevens op de voorkeuren-pagina (manager) */
.cprefs-info{margin-bottom:1rem}
.cprefs-dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:.4rem 0 0}
.cprefs-dl dt{color:var(--color-muted);font-size:.85rem}
.cprefs-dl dd{margin:0;font-weight:600}

/* Auto-verdwijnende meldingen (bv. "je account is klaar") */
[data-autohide]{transition:opacity .45s ease, transform .45s ease}
[data-autohide].is-autohiding{opacity:0;transform:translateY(-6px)}

/* Checkout: e-mail onder de "Aangemeld als"-regel (B2C, read-only identiteit) */
.co-account__mail{color:var(--color-muted);font-size:.9rem;margin-left:.15rem}

/* Mijn gegevens (B2C) — formulier */
.acc-form{display:flex;flex-direction:column;gap:1rem}
.acc-form__foot{margin-top:.3rem}
.field__input[readonly]{background:var(--color-bg);color:var(--color-muted);cursor:not-allowed}

/* Bestelgeschiedenis (B2C) */
.acc-orders{display:flex;flex-direction:column;gap:.7rem}
.acc-order{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:.9rem 1.1rem}
.acc-order__main{display:flex;flex-direction:column;min-width:110px}
.acc-order__num{font-weight:700}
.acc-order__date{color:var(--color-muted);font-size:.85rem}
.acc-order__meta{flex:1;min-width:160px;color:var(--color-text)}
.acc-order__chan{font-size:.9rem}
.acc-order__side{display:flex;align-items:center;gap:.8rem;margin-left:auto}
.acc-order__total{font-weight:700;white-space:nowrap}
.acc-paybadge{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap}
.acc-paybadge.is-ok{background:var(--color-ok-bg,#e7f6ee);color:#1c6b3d}
.acc-paybadge.is-warn{background:#fff4e0;color:#8a5a00}
.acc-paybadge.is-err{background:#fdecee;color:#b3261e}
.acc-paybadge.is-info{background:var(--color-primary-tint);color:var(--color-primary-dark)}
.acc-empty{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.7rem}
@media (max-width:560px){
  .acc-order{align-items:flex-start}
  .acc-order__side{margin-left:0;width:100%;justify-content:space-between}
}

/* Favoriet-naam modal (vervangt window.prompt) */
.fav-namer{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .2s ease}
.fav-namer.is-open{opacity:1;pointer-events:auto}
.fav-namer__backdrop{position:absolute;inset:0;background:rgba(20,12,20,.5)}
.fav-namer__box{position:relative;background:var(--color-card);border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.3);padding:1.4rem;width:min(420px,100%);transform:translateY(10px) scale(.98);transition:transform .2s ease}
.fav-namer.is-open .fav-namer__box{transform:none}
.fav-namer__x{position:absolute;top:.5rem;right:.7rem;background:none;border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--color-muted)}
.fav-namer__msg{margin:0 0 1rem;font-weight:600}
.fav-namer__input{width:100%;padding:.7rem .8rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);font:inherit;box-sizing:border-box}
.fav-namer__input:focus{outline:2px solid var(--color-primary);outline-offset:1px;border-color:transparent}
.fav-namer__btns{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1rem}

/* Bestelgeschiedenis + opnieuw bestellen */
.oh-list{display:flex;flex-direction:column;gap:1rem}
.oh-order{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1rem 1.1rem}
.oh-order__top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:.6rem}
.oh-order__id{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.oh-order__date{font-weight:700}
.oh-order__num{color:var(--color-muted);font-size:.78rem}
.oh-order__chan{font-size:.85rem;color:var(--color-text)}
.oh-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.oh-line{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem .6rem;background:var(--color-bg);border-radius:var(--radius-sm)}
.oh-line.is-gone{opacity:.55}
.oh-line__qty{font-weight:700;color:var(--color-primary-dark);white-space:nowrap}
.oh-line__body{flex:1;min-width:0;display:flex;flex-direction:column}
.oh-line__name{font-weight:600}
.oh-line__label{color:var(--color-muted);font-weight:400}
.oh-line__sum{font-size:.85rem;color:var(--color-muted)}
.oh-line__add{background:none;border:1px dashed var(--color-border);border-radius:999px;padding:.2rem .6rem;font:inherit;font-size:.78rem;font-weight:700;color:var(--color-primary-dark);cursor:pointer;white-space:nowrap}
.oh-line__add:hover{background:var(--color-primary-tint);border-color:var(--color-primary)}
.oh-order__foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.8rem;flex-wrap:wrap}
.oh-order__total{font-weight:700}

/* Favorieten: niet-meer-beschikbaar + verwijderen vanuit de popup */
.fav-card--gone{opacity:.6}
.fav-card__rm{color:var(--color-err,#b3261e);font-size:.85rem;font-weight:600}
.pm-favdel{margin-right:auto;color:var(--color-err,#b3261e);font-size:.9rem;font-weight:600}

/* "Mijn account"-hub (gedeeld B2B/B2C) */
.acct-hub{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:1.6rem}
.acct-hub__head{text-align:center;padding:.5rem 0 .2rem}
.acct-hub__welkom{display:inline-block;background:var(--color-primary-tint);color:var(--color-primary-dark);font-weight:700;font-size:.85rem;padding:.25rem .7rem;border-radius:999px;margin:0 0 .7rem}
.acct-hub__greet{margin:0;font-size:1.7rem}
.acct-hub__sub{margin:.2rem 0 1rem;color:var(--color-muted)}
.acct-hub__cta{display:inline-block}
.acct-block{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1rem 1.1rem}
.acct-block__head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.7rem}
.acct-block__title{margin:0;font-size:1.05rem}
.acct-block__more{font-size:.85rem;font-weight:600;color:var(--color-primary-dark);white-space:nowrap}
.acct-block__empty{margin:.2rem 0;color:var(--color-muted);font-size:.9rem}
.acct-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.7rem}
.acct-card{display:flex;align-items:center;gap:.7rem;padding:.8rem .9rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);text-decoration:none;color:inherit;transition:border-color .15s,background .15s}
.acct-card:hover{border-color:var(--color-primary);background:var(--color-primary-tint)}
.acct-card__icon{font-size:1.4rem;line-height:1}
.acct-card__body{flex:1;display:flex;flex-direction:column;min-width:0}
.acct-card__title{font-weight:700}
.acct-card__text{font-size:.82rem;color:var(--color-muted)}
.acct-card__arrow{color:var(--color-muted)}
/* De hub hergebruikt .fav-list en .oh-list; op smalle schermen alles vlot gestapeld. */
@media (max-width:560px){
  .acct-hub__greet{font-size:1.45rem}
  .acct-cards{grid-template-columns:1fr}
}

/* Favoriet-vuilbakje (enkel op de "Mijn account"-pagina) */
.fav-card__trash{background:none;border:0;padding:.4rem;cursor:pointer;color:var(--color-muted);border-radius:8px;display:inline-flex;align-items:center;line-height:0}
.fav-card__trash svg{width:20px;height:20px}
.fav-card__trash:hover{color:var(--color-err,#b3261e);background:#fdecee}

/* Favoriet "licht aangepast"-melding (verdwenen ingrediënt) */
.fav-card__note{display:block;font-size:.78rem;color:#8a5a00;margin-top:.15rem}

/* ---- menufilters ---------------------------------------------------------
   Desktop: derde kolom naast categorie-nav + lijst. Mobiel: slide-in paneel
   achter de "Filters"-knop, zelfde patroon als de mand-drawer. */
.menu-filterbtn{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--color-border);background:var(--color-card);border-radius:999px;padding:.55rem .9rem;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-sm)}
.menu-filterbtn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.menu-filterbtn .hicon{width:16px;height:16px}
.menu-filterbtn__count{background:var(--color-primary);color:#fff;border-radius:999px;min-width:1.15rem;height:1.15rem;display:inline-grid;place-items:center;font-size:.72rem}
.menu-active{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 0 .7rem}

/* chips (actieve filters + gekozen ingrediënten) */
.mf-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--color-primary-tint);color:var(--color-primary);border:0;border-radius:999px;padding:.3rem .6rem;font:inherit;font-weight:600;font-size:.82rem;cursor:pointer}
.mf-chip:hover{background:var(--color-primary);color:#fff}

.mf__backdrop{display:none}
.mf__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.mf__title{margin:0;font-size:1.15rem}
.mf__close{display:none;border:0;background:var(--color-bg);width:34px;height:34px;border-radius:50%;font-size:1.35rem;line-height:1;cursor:pointer;color:var(--color-muted)}
.mf__sec{border-top:1px solid var(--color-border);padding:.9rem 0 0;margin-top:.9rem}
.mf__sec:first-child{border-top:0;margin-top:0;padding-top:0}
.mf__sectitle{margin:0 0 .6rem;font-size:.95rem}
.mf__sublabel{margin:.8rem 0 .45rem;font-size:.8rem;font-weight:700;color:var(--color-muted);text-transform:uppercase;letter-spacing:.03em}
.mf__sublabel:first-of-type{margin-top:0}
/* Zoekveld krijgt alle ruimte; de plusknop is een vierkantje. Met "Voeg toe" als tekst
   bleef er "Zoek ingre…" van het veld over. Kiezen uit de suggestielijst voegt sowieso
   automatisch toe — de knop is er voor wie handmatig typt. */
.mf__pick{display:flex;gap:.35rem;position:relative}
.mf__input{flex:1;min-width:0;padding:.5rem .7rem;border:1px solid var(--color-border);border-radius:10px;background:var(--color-card);font:inherit;font-size:.88rem}
.mf__input:focus{outline:2px solid var(--color-primary);outline-offset:1px;border-color:transparent}
.mf__add{flex:none;width:2.1rem;border:1px solid var(--color-border);background:var(--color-card);border-radius:10px;font:inherit;font-size:1.1rem;line-height:1;font-weight:600;color:var(--color-muted);cursor:pointer;display:grid;place-items:center}
.mf__add:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-tint)}
.mf__chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.mf__chips:empty{display:none}
.mf__hint{margin:.45rem 0 0;font-size:.78rem;color:var(--color-muted)}
/* allergenen als aanklikbare tegels */
.mf__tiles{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
.mf__tile{display:flex;align-items:center;gap:.35rem;border:1px solid var(--color-border);border-radius:10px;padding:.35rem .5rem;cursor:pointer;font-size:.8rem;background:var(--color-card);transition:.12s ease}
.mf__tile:hover{border-color:var(--color-primary)}
.mf__tile img{width:22px;height:22px;object-fit:contain;flex:none}
.mf__tile input{position:absolute;opacity:0;width:0;height:0}
.mf__tile:has(input:checked){background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.mf__tile:has(input:checked) img{filter:brightness(0) invert(1)}
.mf__tile input:focus-visible+img,.mf__tile input:focus-visible+span{outline:2px solid var(--color-primary);outline-offset:2px}
.mf__note{display:flex;gap:.45rem;margin:1rem 0 0;padding-top:.9rem;border-top:1px solid var(--color-border);font-size:.76rem;color:var(--color-muted);line-height:1.45}
.mf__note .hicon{flex:none;margin-top:.1rem}
.mf__foot{display:none}
.mf__clear{border:0;background:transparent;color:var(--color-primary);font:inherit;font-weight:600;font-size:.85rem;cursor:pointer;padding:.4rem}

/* resultaat-badge op de productrij */
.item__flag{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;padding:.1rem .5rem;border-radius:999px;margin-top:.25rem;width:fit-content}
.item__flag--ok{background:#e8f6ee;color:#1e7a45}
.item__flag--soft{background:#fef2e2;color:#b26a00}

/* mobiel: paneel schuift in beeld */
@media(max-width:899px){
  .mf{position:fixed;inset:0;z-index:38;pointer-events:none}
  .mf.is-open{pointer-events:auto}
  .mf__backdrop{display:block;position:absolute;inset:0;background:rgba(16,24,40,.5);opacity:0;transition:opacity .3s ease}
  .mf.is-open .mf__backdrop{opacity:1}
  .mf__panel{position:absolute;top:0;bottom:0;left:0;width:min(88vw,22rem);background:var(--color-card);box-shadow:8px 0 40px rgba(0,0,0,.2);padding:1.2rem 1.1rem;overflow:auto;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .3s cubic-bezier(.32,.72,0,1);-webkit-overflow-scrolling:touch}
  .mf.is-open .mf__panel{transform:translateX(0)}
  .mf__close{display:grid;place-items:center}
  .mf__body{flex:1}
  /* voetknop plakt onderaan het paneel: sluiten met het resultaat in zicht */
  .mf__foot{display:flex;flex-direction:column;gap:.3rem;position:sticky;bottom:-1.2rem;background:var(--color-card);padding:.8rem 0 1.2rem;margin-top:.9rem;border-top:1px solid var(--color-border)}
}

/* desktop: het paneel IS de derde kolom → geen knop, geen overlay.
   Staat bewust hier (na de mobiele regels hierboven) zodat de volgorde klopt. */
@media(min-width:900px){
  .menu-filterbtn{display:none}
  .mf{position:static;pointer-events:auto}
  /* Scrollt mee met de pagina zolang het past, en pas binnenin als het paneel langer is
     dan het scherm. De dunne scrollbalk voorkomt de brede systeembalk die dwars door het
     paneel liep. */
  .mf__panel{position:sticky;top:calc(var(--header-h) + 76px);background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow-sm);transform:none;max-height:calc(100vh - var(--header-h) - 96px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--color-border) transparent}
  .mf__panel::-webkit-scrollbar{width:6px}
  .mf__panel::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}
  .mf__panel::-webkit-scrollbar-track{background:transparent}
}

/* Ruimere menupagina op brede schermen.
   De site is bewust 1080px breed (leesbare tekstbreedte op home/checkout), maar het menu
   is een app-scherm met drie kolommen — daar perst 1080px de filters tegen de lijst terwijl
   er honderden pixels ongebruikt blijven. Enkel deze pagina verbreedt mee; header en footer
   gaan mee zodat het logo niet smaller staat dan de inhoud eronder. */
@media(min-width:1200px){
  body:has(.menu) .site-header__inner,
  body:has(.menu) .site-main,
  body:has(.menu) .site-footer{max-width:min(94vw,1360px)}
  /* De productlijst krijgt de extra ruimte NIET onbeperkt: een regel "naam … prijs" die
     800px breed is, laat het oog 400px springen. Gecapt op 46rem; wat overblijft gaat naar
     het filterpaneel, dat rechts uitlijnt. */
  body:has(.menu) .menu{grid-template-columns:200px minmax(0,46rem) minmax(19rem,1fr);gap:1.8rem}
  body:has(.menu) .mf__panel{max-width:20rem;margin-left:auto}
}

/* ---- sorteerknop + route-links in de menu-sidebar ---- */
.menu-sort{display:inline-flex;align-items:center;gap:.4rem;flex:none}
.menu-sort__lbl{color:var(--color-muted);font-size:.85rem;white-space:nowrap}
.menu-sort__sel{border:1px solid var(--color-border);background:var(--color-card);border-radius:999px;padding:.5rem .7rem;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;color:inherit;box-shadow:var(--shadow-sm)}
.menu-sort__sel:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}
@media(max-width:560px){.menu-sort__lbl{display:none}}

/* Routes (Startpagina · Snel opnieuw · Favorieten) staan bovenaan de sidebar, gescheiden
   van de categorieën: het zijn bestemmingen, geen filters op de lijst. */
.cat-nav__routes{display:flex;gap:.4rem}
.cat-nav__route{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .7rem;border-radius:10px;font-size:.88rem;font-weight:600;color:var(--color-text);white-space:nowrap;background:var(--color-card);border:1px solid var(--color-border)}
.cat-nav__route:hover{border-color:var(--color-primary);color:var(--color-primary)}
.cat-nav__route .hicon{width:16px;height:16px;color:var(--color-primary);flex:none}
.cat-nav__badge{background:var(--color-primary-tint);color:var(--color-primary);border-radius:999px;padding:0 .4rem;font-size:.72rem;min-width:1.1rem;text-align:center}

@media(min-width:900px){
  /* Sidebar: routes onder elkaar, met een scheidingslijn naar de categorieën. */
  .cat-nav__routes{flex-direction:column;gap:.15rem;padding-bottom:.6rem;margin-bottom:.6rem;border-bottom:1px solid var(--color-border)}
  .cat-nav__route{background:transparent;border:0;padding:.5rem .7rem}
  .cat-nav__route:hover{background:var(--color-primary-tint)}
  /* Favorieten is een route én een sectie: de scroll-spy licht 'm op als je erbij bent. */
  .cat-nav__route.is-active{background:var(--color-primary-tint);color:var(--color-primary)}
  .cat-nav__badge{margin-left:auto}
}

/* ---- mobiele menunavigatie (contextkaart + snelle acties + bottom sheet) ----
   Vervangt de horizontale categorie-pills: met 24 categorieën was die rij ~3000px breed
   in een scherm van 340px. Desktop gebruikt de sidebar en verbergt dit blok. */
.mnav{display:grid;gap:.6rem;padding:0 0 .8rem}
/* Categorieën-knop: staat in de sticky zoekrij, dus altijd bereikbaar. */
.menu-catbtn{display:inline-flex;align-items:center;gap:.4rem;flex:none;border:1px solid var(--color-border);background:var(--color-card);border-radius:999px;padding:.55rem .9rem;font:inherit;font-weight:600;font-size:.85rem;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-sm)}
.menu-catbtn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.menu-catbtn svg{width:16px;height:16px}
@media(min-width:900px){.menu-catbtn{display:none}}  /* desktop heeft de sidebar */
/* Snelle acties: horizontaal scrollbaar als ze niet passen (briefing §6). */
.mnav__quick{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.1rem}
.mnav__quick::-webkit-scrollbar{display:none}
.mnav__action{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;flex:1 0 auto;min-width:5.2rem;background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.6rem .5rem;font-size:.75rem;font-weight:600;text-align:center;box-shadow:var(--shadow-sm)}
.mnav__action .hicon{width:20px;height:20px;color:var(--color-primary)}
.mnav__action:hover{border-color:var(--color-primary);color:var(--color-primary)}
/* Account-tegel: gevuld in de huisstijl zodat de identiteit-ingang opvalt tussen de acties. */
.mnav__action--me{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.mnav__action--me .hicon{color:#fff}
.mnav__action--me:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);color:#fff}

.msheet{position:fixed;inset:0;z-index:39;pointer-events:none}
.msheet.is-open{pointer-events:auto}
.msheet__backdrop{position:absolute;inset:0;background:rgba(16,24,40,.5);opacity:0;transition:opacity .3s ease}
.msheet.is-open .msheet__backdrop{opacity:1}
.msheet__panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;display:flex;flex-direction:column;background:var(--color-card);border-radius:20px 20px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.2);transform:translateY(100%);transition:transform .34s cubic-bezier(.32,.72,0,1)}
.msheet.is-open .msheet__panel{transform:translateY(0)}
.msheet__grip{width:2.5rem;height:.25rem;background:var(--color-border);border-radius:999px;margin:.6rem auto .2rem;flex:none}
.msheet__head{display:flex;align-items:center;justify-content:space-between;padding:.4rem 1.1rem .6rem;border-bottom:1px solid var(--color-border);flex:none}
.msheet__title{margin:0;font-size:1.1rem}
.msheet__close{border:0;background:var(--color-bg);width:34px;height:34px;border-radius:50%;font-size:1.35rem;line-height:1;cursor:pointer;color:var(--color-muted)}
.msheet__list{list-style:none;margin:0;padding:.3rem 0 1.4rem;overflow:auto;-webkit-overflow-scrolling:touch}
.msheet__row{display:flex;align-items:center;gap:.6rem;padding:.8rem 1.1rem;font-size:.95rem}
.msheet__row.is-active{background:var(--color-primary-tint)}
.msheet__row.is-active .msheet__name{color:var(--color-primary);font-weight:700}
.msheet__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msheet__n{color:var(--color-muted);font-size:.8rem;font-weight:700}
.msheet__chev{color:var(--color-muted)}

@media(min-width:900px){
  /* Desktop heeft de sidebar → contextkaart, snelle acties en sheet zijn overbodig. */
  .mnav,.msheet{display:none}
}
@media(max-width:899px){
  /* Mobiel: de pills verdwijnen, de sheet neemt het over. */
  .cat-nav{display:none}
}

/* eigen suggestielijst bij de ingrediëntenkiezer (vervangt de browser-datalist) */
.mf__sugg{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:5;list-style:none;margin:0;padding:.2rem;background:var(--color-card);border:1px solid var(--color-border);border-radius:10px;box-shadow:0 12px 28px rgba(20,15,35,.14);max-height:12rem;overflow:auto}
.mf__suggitem{padding:.45rem .55rem;border-radius:7px;font-size:.85rem;cursor:pointer}
.mf__suggitem:hover{background:var(--color-primary-tint);color:var(--color-primary)}

/* hartje op de productrij (snel favoriet, standaard-samenstelling) */
.item__fav{border:0;background:transparent;color:var(--color-muted);cursor:pointer;padding:.3rem;border-radius:50%;display:inline-grid;place-items:center;line-height:0}
.item__fav svg{width:20px;height:20px}
.item__fav:hover{color:var(--color-primary);background:var(--color-primary-tint)}
.item__fav:disabled{opacity:.5;cursor:default}
.item__fav.is-on{color:var(--color-primary)}
.item__fav.is-on svg{fill:currentColor}