/* ==== assets/css/variables.css ==== */
/* variables.css: Design tokens (SRS §3.19). Single source of design truth. */
:root {
  /* Colors (SRS §3.19 FINAL TOKENS) */
  --color-primary: #111111;
  --color-secondary: #ffffff;
  --color-accent: #b91c1c;
  --color-background: #f9f9f9;
  --color-text: #1a1a1a;
  --color-muted: #6b7280;

  /* Derived (contrast/consistency only, primaries unchanged) */
  --color-accent-dark: #911414;
  --color-accent-soft: #fdecec;
  --color-surface: #ffffff;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-success: #15803d;
  --color-warning: #b45309;

  /* Spacing scale (SRS: 4 8 12 16 24 32 48 64 96 128) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Border radius (SRS §3.19) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows (SRS §3.19) */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);

  /* Category CTA accent (option A: terracotta/koper) */
  --cat-cta: #C1663B;
  --cat-cta-dark: #a5502b;

  /* Layout */
  --container-width: 1400px;
  --gutter: var(--space-5);
  --header-height: 68px;

  /* Motion (SRS: 200–300ms) */
  --transition-speed: 200ms;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Merriweather', Georgia, 'Times New Roman', serif;
  --z-header: 100;
  --z-overlay: 200;
  --z-drawer: 300;
  --z-toast: 400;
}

/* Breakpoints (SRS §3.15 HARD RULE):
   Mobile   0–767px
   Tablet   768–1023px
   Laptop   1024–1439px
   Desktop  1440px+           */
/* ==== assets/css/base.css ==== */
/* base.css: reset, typography, elements */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden; /* SRS: no horizontal scroll */
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }

/* Headings: single H1/page, scale H1→H4, no skipping (SRS TYPOGRAFIE) */
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; font-weight: 700; color: var(--color-primary); }
h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p { color: var(--color-text); }

/* Accessibility: visible focus states (SRS WCAG 2.2 AA) */
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
::selection { background: var(--color-accent); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* ==== assets/css/layout.css ==== */
/* layout.css: containers, grid, header/footer shells, responsive scaffolding */
.container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-6); }
.stack > * + * { margin-top: var(--space-4); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-primary); border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: box-shadow var(--transition-speed) var(--easing);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
/* Donkere navbalk: logo, links en iconen licht houden zodat ze leesbaar blijven. */
.site-header .brand { color: #fff; }
.site-header .nav-list a { color: rgba(255,255,255,0.82); border-bottom-color: transparent; }
.site-header .nav-list a:hover,
.site-header .nav-list a[aria-current="page"] { color: #fff; border-bottom-color: var(--cat-cta); }
.site-header .icon-btn { color: #fff; }
.site-header .icon-btn:hover { background: rgba(255,255,255,0.14); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-4); height: var(--header-height); }
.site-header__nav { margin-left: auto; }

/* Grids */
.grid { display: grid; gap: var(--space-5); }
.product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }   /* Mobile: 2 col */
.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }  /* Mobile: 2 col */

/* Assortiment layout: filters (left) + content */
.shop-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }

/* Footer */
.site-footer { background: var(--color-primary); color: #e5e7eb; padding-block: var(--space-8) var(--space-6); margin-top: var(--space-9); }
.site-footer a { color: #e5e7eb; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }

/* ---- Tablet 768–1023 ---- */
@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }  /* Tablet: 2 col */
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
/* ---- Laptop 1024–1439 ---- */
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); } /* Desktop: 3–4 col */
  .category-grid { grid-template-columns: repeat(4, 1fr); }
  .shop-layout { grid-template-columns: 260px 1fr; }        /* fixed sidebar filters */
}
/* ---- Desktop 1440+ ---- */
@media (min-width: 1440px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}
/* ==== assets/css/components.css ==== */
/* components.css: reusable UI components */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  font-weight: 600; font-size: 0.95rem; line-height: 1; text-align: center;
  transition: background-color var(--transition-speed) var(--easing), color var(--transition-speed) var(--easing), border-color var(--transition-speed) var(--easing), transform var(--transition-speed) var(--easing);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover { background: var(--color-accent-dark); }
.btn--secondary { background: var(--color-primary); color: #fff; }
.btn--secondary:hover { background: #000; }
.btn--outline { background: var(--color-secondary); color: var(--color-primary); border: 1px solid var(--color-border-strong); }
.btn--outline:hover { border-color: var(--color-primary); }
.btn--ghost { background: transparent; color: var(--color-primary); }
.btn--ghost:hover { background: var(--color-accent-soft); }
.btn--block { width: 100%; }
.btn--sm { min-height: 38px; padding: var(--space-2) var(--space-3); font-size: 0.85rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn .icon { width: 18px; height: 18px; }

.icon { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--filled { fill: currentColor; stroke: none; }

/* ---------- Navbar ---------- */
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; color: var(--color-primary); }
.brand__mark { width: 34px; height: 34px; display: grid; place-items: center; background: var(--color-accent); color: #fff; border-radius: var(--radius-md); }
.brand__mark .icon { width: 20px; height: 20px; }
/* Eigen logo (instellingen) i.p.v. het koe-icoontje */
.brand__mark--img { background: none; overflow: hidden; }
.brand__mark--img img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-md); }
.brand em { color: var(--color-accent); font-style: normal; }

.nav-list { display: none; align-items: center; gap: var(--space-5); }
.nav-list a { font-weight: 500; color: var(--color-text); padding: var(--space-2) 0; border-bottom: 2px solid transparent; transition: color var(--transition-speed), border-color var(--transition-speed); }
.nav-list a:hover { color: var(--color-accent); }
.nav-list a[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.nav-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--color-primary); position: relative; transition: background-color var(--transition-speed); }
.icon-btn:hover { background: var(--color-accent-soft); }
/* Account-dropdown onder de accountknop */
.nav-account { position: relative; display: flex; }
.account-drop { position: absolute; right: 0; top: calc(100% + 8px); width: 288px; max-width: calc(100vw - 24px); background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.14)); padding: 14px; z-index: 60; }
.account-drop[hidden] { display: none; }
.account-drop__user { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; border-bottom: 1px solid var(--color-border); margin-bottom: 10px; }
.account-toggle__avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--color-accent-soft); }
.account-toggle__avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-toggle__avatar .icon { width: 22px; height: 22px; }
.account-drop__avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--color-primary); overflow: hidden; }
.account-drop__avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-drop__id { min-width: 0; display: flex; flex-direction: column; }
.account-drop__id strong { font-size: .95rem; line-height: 1.2; }
.account-drop__id span { font-size: .8rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-drop__menu { display: flex; flex-direction: column; gap: 2px; }
.account-drop__link { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; font-size: .93rem; }
.account-drop__link .icon { width: 19px; height: 19px; color: var(--color-muted); }
.account-drop__link:hover { background: var(--color-accent-soft); }
.account-drop__link--accent { color: var(--color-accent); font-weight: 600; }
.account-drop__link--accent .icon { color: var(--color-accent); }
.account-drop__logout { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 8px; padding: 10px; border: 0; border-top: 1px solid var(--color-border); background: none; cursor: pointer; color: var(--color-accent); font-weight: 600; font-size: .93rem; border-radius: 0; }
.account-drop__logout .icon { width: 19px; height: 19px; }
.account-drop__logout:hover { text-decoration: underline; }

.cart-badge { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-accent); color: #fff; font-size: 0.7rem; font-weight: 700; display: grid; place-items: center; }
.cart-badge[hidden] { display: none; }
.nav-toggle { display: grid; }

/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(17,17,17,0.5); opacity: 0; visibility: hidden; overflow: hidden; transition: opacity var(--transition-speed); }
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__panel { position: absolute; top: 0; right: 0; width: min(320px, 85vw); height: 100%; background: var(--color-secondary); padding: var(--space-5); transform: translateX(100%); transition: transform var(--transition-speed) var(--easing); display: flex; flex-direction: column; gap: var(--space-2); }
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
.mobile-menu__panel a { padding: var(--space-3) var(--space-2); font-size: 1.05rem; border-radius: var(--radius-md); }
.mobile-menu__panel a:hover { background: var(--color-accent-soft); }
.mobile-menu__close { align-self: flex-end; }

@media (min-width: 1024px) {
  .nav-list { display: flex; }
  .nav-toggle { display: none; }
}
/* Mobile header: fit brand + actions within 320px (SRS: no horizontal scroll) */
@media (max-width: 767px) {
  .container { padding-inline: var(--space-4); }
  .brand { font-size: 1.02rem; gap: var(--space-1); }
  .brand__mark { width: 30px; height: 30px; flex: 0 0 30px; }
  .nav-actions { gap: 2px; }
  .nav-actions a.icon-btn { display: grid; } /* zoeken + account naast de winkelwagen tonen */
  .nav-actions .icon-btn .icon { width: 22px; height: 22px; }
}

/* ---------- Product card (single reusable component) ---------- */
.product-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--transition-speed) var(--easing), box-shadow var(--transition-speed) var(--easing); }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.product-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--color-accent-soft); }
.product-card__link { position: absolute; inset: 0; z-index: 2; }
.product-card__img { width: 100%; height: 100%; object-fit: cover; }
/* Rechtergrens laat ruimte voor het hartje (rechtsboven), zodat tags naar een nieuwe regel
   wrappen i.p.v. achter het hartje te schuiven bij 3+ tags. */
.product-card__labels { position: absolute; top: var(--space-2); left: var(--space-2); right: calc(var(--space-2) + 44px); z-index: 3; display: flex; flex-wrap: wrap; gap: 4px; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: var(--color-primary); color: #fff; }
.badge--accent { background: var(--color-accent); }
.badge--muted { background: var(--color-muted); }
.product-card__body { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-card__cat { font-size: 0.68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-accent); font-weight: 700; }
.product-card__name { font-family: var(--font-heading); font-size: 1.02rem; font-weight: 700; line-height: 1.25; color: var(--color-primary); }
.product-card__meta { font-size: 0.8rem; color: var(--color-muted); }
.product-card__footer { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.product-card__pricewrap { display: flex; flex-direction: column; gap: 2px; }
.product-card__price { font-weight: 800; font-size: 1.1rem; color: var(--color-primary); }
.product-card__price small { font-weight: 500; font-size: 0.7rem; color: var(--color-muted); display: block; }
.product-card__perkg { font-weight: 600; font-size: 0.72rem; color: var(--color-muted); }
.product-card__add { position: relative; z-index: 3; }
/* Bewaren (hartje) op de productkaart */
.product-card__save { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--color-muted); cursor: pointer; box-shadow: var(--shadow-sm); transition: color var(--transition-speed), transform var(--transition-speed); }
.product-card__save:hover { transform: scale(1.1); color: var(--color-accent); }
.product-card__save .icon { width: 18px; height: 18px; }
.product-card__save.is-saved { color: var(--color-accent); }
.product-card__save.is-saved .icon { fill: currentColor; }
/* Hartje op de productdetail-foto (linksboven) */
.product-detail__media { position: relative; }
.product-detail__save { position: absolute; top: var(--space-3); left: var(--space-3); right: auto; width: 40px; height: 40px; }

/* Portie-keuze popup bij snel toevoegen */
.portie-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(17,17,17,.5); display: grid; place-items: center; padding: var(--space-4); }
.portie-modal__card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-5); width: min(420px, 100%); position: relative; box-shadow: var(--shadow-lg); }
.portie-modal__close { position: absolute; top: var(--space-3); right: var(--space-3); background: none; border: 0; cursor: pointer; color: var(--color-muted); }
.portie-modal__title { font-size: 1.15rem; margin-bottom: 2px; }
.portie-modal__sub { color: var(--color-muted); font-size: .9rem; margin-bottom: var(--space-4); }
.portie-modal__opts { display: flex; flex-direction: column; gap: var(--space-2); }
/* Verpakking kiezen met aantal-stappers: meerdere porties tegelijk mogelijk. */
.portie-opt-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.portie-opt-row.is-sold { opacity: .5; }
.portie-opt__info { display: flex; flex-direction: column; gap: 2px; }
.portie-qty { display: flex; align-items: center; gap: 8px; flex: none; }
.portie-qty__btn { width: 30px; height: 30px; border: 1px solid var(--color-border-strong); border-radius: 50%; background: var(--color-surface); cursor: pointer; display: grid; place-items: center; color: var(--color-primary); }
.portie-qty__btn:hover { border-color: var(--color-accent); }
.portie-qty__n { min-width: 20px; text-align: center; font-weight: 600; }
/* Algemene voorwaarden in een popup, tekst is inline bewerkbaar door de eigenaar. */
.terms-modal__card { width: min(640px, 100%); text-align: left; }
.terms-modal__body { white-space: pre-wrap; margin-top: var(--space-3); max-height: 60vh; overflow: auto; color: var(--color-text); font-size: .92rem; line-height: 1.6; }
/* Afhaaltijden als keuzeknoppen (4–5 op een rij, past zich aan de breedte aan). */
.time-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.time-opt { padding: 10px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: 600; cursor: pointer; text-align: center; transition: border-color .15s, background .15s, color .15s; }
.time-opt:hover { border-color: var(--color-accent); }
.time-opt.is-active { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
/* Eigenaar-configuratie (bv. bewerkbare afhaaltijden), alleen zichtbaar in bewerkmodus. */
.editable-config { display: none; }
.owner-editing .editable-config { display: block; }
/* Eigen popups (Dialog.alert/confirm/prompt), gecentreerd, in site-stijl. */
.app-dialog { position: fixed; inset: 0; z-index: 2000; background: rgba(17,17,17,.5); display: grid; place-items: center; padding: var(--space-4); animation: app-dialog-fade .12s ease-out; }
.app-dialog__card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-5); width: min(420px, 100%); box-shadow: var(--shadow-lg); text-align: left; animation: app-dialog-pop .14s ease-out; }
.app-dialog__title { font-size: 1.1rem; margin: 0 0 var(--space-2); }
.app-dialog__msg { margin: 0; color: var(--color-text); line-height: 1.5; white-space: pre-wrap; }
.app-dialog__input { width: 100%; margin-top: var(--space-3); padding: 10px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font: inherit; }
.app-dialog__input:focus { outline: 2px solid var(--color-accent); border-color: var(--color-accent); }
.app-dialog__actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-4); }
.btn--danger { background: #b3402f; color: #fff; border: 1px solid #b3402f; }
.btn--danger:hover { background: #9a3728; }
@keyframes app-dialog-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes app-dialog-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.portie-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; text-align: left; transition: border-color var(--transition-speed), background var(--transition-speed); }
.portie-opt:hover:not([disabled]) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.portie-opt[disabled] { opacity: .5; cursor: not-allowed; }
.portie-opt__label { font-weight: 600; }
.portie-opt__price { font-weight: 800; color: var(--color-primary); white-space: nowrap; }
.portie-opt__sub { font-weight: 700; color: var(--color-accent); font-size: .9rem; }

/* Lijst-kiezer (bewaren in welke lijst) */
.list-portie { margin: var(--space-2) 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.list-picker { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); max-height: 240px; overflow-y: auto; }
.list-picker__empty { color: var(--color-muted); font-size: .9rem; margin-bottom: var(--space-3); }
.list-pick { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; text-align: left; }
.list-pick:hover { border-color: var(--color-accent); }
.list-pick.is-on { border-color: var(--color-accent); background: var(--color-accent-soft); }
.list-pick__check { width: 18px; height: 18px; display: grid; place-items: center; color: var(--color-accent); flex: none; }
.list-pick__check .icon { width: 16px; height: 16px; }
.list-pick__name { font-weight: 600; }
.list-picker__new { display: flex; gap: var(--space-2); }
.list-picker__new input { flex: 1; }
.list-notify { display: flex; gap: 8px; align-items: flex-start; margin-top: var(--space-3); font-size: .84rem; color: var(--color-muted); cursor: pointer; line-height: 1.4; }
.list-notify input { margin-top: 2px; flex: none; }

/* Placeholder (image drop-in fallback, SRS: fallback bij load error) */
.ph { position: relative; overflow: hidden; }
.ph__fallback { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); text-align: center; padding: var(--space-3); background: var(--color-accent-soft); color: var(--color-accent); }
.ph__fallback .icon { width: 34px; height: 34px; opacity: 0.8; }
.ph__fallback span { font-family: var(--font-heading); font-size: 0.85rem; color: var(--color-primary); line-height: 1.2; }
.ph > img { position: relative; z-index: 2; }

/* ---------- Category card (compact, warm tint, per-category icon) ---------- */
.category-card { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; color: #fff; box-shadow: var(--shadow-sm); transition: transform var(--transition-speed) var(--easing), box-shadow var(--transition-speed) var(--easing); }
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.category-card__bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(160deg, #3a241d, #160f09); }
.category-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.category-card__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(20,12,8,0.12) 0%, rgba(20,12,8,0.34) 45%, rgba(20,12,8,0.82) 100%); }
.category-card__body { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; padding: var(--space-5); }
.category-card__icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: rgba(255,255,255,0.15); display: grid; place-items: center; color: #fff; }
.category-card__icon .icon { width: 30px; height: 30px; }
.category-card__text { margin-top: auto; }
.category-card__body h3 { color: #fff; font-size: 1.4rem; line-height: 1.15; }
.category-card__body p { color: rgba(255,255,255,0.82); font-size: 0.85rem; margin-top: 4px; }
.category-card__cta { align-self: flex-start; margin-top: var(--space-4); display: inline-flex; align-items: center; gap: 8px; background: var(--cat-cta); color: #fff; font-weight: 600; font-size: 0.9rem; padding: 10px 16px; border-radius: 999px; transition: background-color var(--transition-speed) var(--easing); }
.category-card:hover .category-card__cta { background: var(--cat-cta-dark); }
.category-card__cta .icon { width: 16px; height: 16px; transition: transform var(--transition-speed) var(--easing); }
.category-card:hover .category-card__cta .icon { transform: translateX(4px); }
/* warm, meat-appropriate tints */
.category-card[data-cat="rundvlees"] .category-card__bg { background: linear-gradient(160deg, #6f2c1c, #330f08); }
.category-card[data-cat="varkensvlees"] .category-card__bg { background: linear-gradient(160deg, #8c4636, #401e17); }
.category-card[data-cat="kip"] .category-card__bg { background: linear-gradient(160deg, #8c6526, #3d2a10); }
.category-card--all .category-card__bg { background: linear-gradient(160deg, #3a241d, #150e08); }
/* Mobiel: compacte, vierkante categorie-tegels (2 per rij). De hele tegel is
   klikbaar, dus de losse CTA-pill vervalt en icon/tekst worden compacter. */
@media (max-width: 767px) {
  .category-card { aspect-ratio: 1 / 1; box-shadow: none; }
  .category-card__body { padding: var(--space-3); }
  .category-card__icon { width: 34px; height: 34px; border-radius: var(--radius-sm); }
  .category-card__icon .icon { width: 19px; height: 19px; }
  .category-card__body h3 { font-size: 1rem; line-height: 1.12; }
  .category-card__body p { font-size: 0.72rem; margin-top: 2px; }
  .category-card__scrim { background: linear-gradient(180deg, rgba(20,12,8,0.05) 0%, rgba(20,12,8,0.3) 45%, rgba(20,12,8,0.88) 100%); }
  .category-card__cta { display: none; }
}

/* ---------- Filter panel + chips ---------- */
.filter-panel__group { padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); }
.filter-panel__group:last-child { border-bottom: none; }
.filter-panel h4 { margin-bottom: var(--space-3); font-family: var(--font-body); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); }
.filter-option { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; cursor: pointer; min-height: 40px; }
.filter-option input { width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer; }
.filter-option .count { margin-left: auto; font-size: 0.8rem; color: var(--color-muted); }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--color-border-strong); background: var(--color-secondary); font-size: 0.85rem; font-weight: 500; min-height: 40px; transition: all var(--transition-speed); }
.pill:hover { border-color: var(--color-accent); }
.pill[aria-pressed="true"], .pill.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.chip-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); }
.chip-bar:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent-dark); font-size: 0.82rem; font-weight: 600; }
.chip button { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; color: inherit; }
.chip button:hover { background: rgba(185,28,28,0.15); }
.chip button .icon { width: 14px; height: 14px; }

/* ---------- Toolbar (search + sort) ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.search-box { position: relative; flex: 1 1 240px; }
.search-box .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--color-muted); pointer-events: none; }
.search-box input { width: 100%; height: 46px; padding: 0 var(--space-4) 0 42px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-secondary); }
.search-box input:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px var(--color-accent-soft); }
.select { height: 46px; padding: 0 var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-secondary); font-weight: 500; }
.filter-toggle { display: inline-flex; }
@media (min-width: 1024px) { .filter-toggle { display: none; } }
mark { background: var(--color-accent-soft); color: var(--color-accent-dark); padding: 0 2px; border-radius: 3px; }

/* ---------- Cart sidebar ---------- */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; overflow: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__overlay { position: absolute; inset: 0; background: rgba(17,17,17,0.5); opacity: 0; transition: opacity var(--transition-speed); backdrop-filter: blur(2px); }
.drawer.is-open .drawer__overlay { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 100vw); background: var(--color-background); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--transition-speed) var(--easing); display: flex; flex-direction: column; }
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-secondary); }
.drawer__head h2 { font-size: 1.15rem; }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--space-4); }
.drawer__foot { padding: var(--space-4); border-top: 1px solid var(--color-border); background: var(--color-secondary); }
.cart-line { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.cart-line__media { width: 64px; height: 64px; border-radius: var(--radius-md); overflow: hidden; }
.cart-line__name { font-weight: 600; font-size: 0.9rem; }
.cart-line__price { color: var(--color-muted); font-size: 0.85rem; }
.cart-line__preorder { color: var(--color-accent); font-size: 0.78rem; font-weight: 600; margin-top: 2px; }
.cart-line__remove { color: var(--color-muted); font-size: 0.78rem; text-decoration: underline; margin-top: 4px; }
.cart-line__remove:hover { color: var(--color-accent); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.1rem; font-weight: 800; margin-bottom: var(--space-3); }

/* Quantity selector */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); overflow: hidden; }
.qty button { width: 34px; height: 34px; display: grid; place-items: center; background: var(--color-secondary); }
.qty button:hover { background: var(--color-accent-soft); }
.qty input { width: 40px; height: 34px; text-align: center; border: none; border-inline: 1px solid var(--color-border); background: #fff; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Skeletons / loading ---------- */
.skeleton { position: relative; overflow: hidden; background: #eceef1; border-radius: var(--radius-md); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.skeleton-card__media { aspect-ratio: 1/1; }
.skeleton-card__body { padding: var(--space-4); display: grid; gap: var(--space-2); }
.skeleton-line { height: 12px; }

/* ---------- Empty / error states ---------- */
.empty-state { text-align: center; padding: var(--space-8) var(--space-4); max-width: 460px; margin-inline: auto; }
.empty-state .icon { width: 56px; height: 56px; color: var(--color-muted); margin: 0 auto var(--space-4); }
.empty-state h3 { margin-bottom: var(--space-2); }
.empty-state p { color: var(--color-muted); margin-bottom: var(--space-4); }
.empty-state__actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.field label { font-weight: 600; font-size: 0.88rem; }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-secondary); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.field .error-msg { color: var(--color-accent); font-size: 0.8rem; min-height: 1em; }
.field.has-error input, .field.has-error select { border-color: var(--color-accent); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.85rem; color: var(--color-muted); padding-block: var(--space-4); }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs .sep { opacity: 0.5; }
.breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: 600; }

/* ---------- Toast ---------- */
.toast-region { position: fixed; bottom: var(--space-5); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--color-primary); color: #fff; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: var(--space-2); font-size: 0.9rem; animation: toast-in var(--transition-speed) var(--easing); }
.toast .icon { width: 18px; height: 18px; color: #4ade80; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Product gallery / lightbox ---------- */
.gallery__main { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); cursor: zoom-in; background: var(--color-accent-soft); }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.gallery__thumb { width: 68px; height: 68px; border-radius: var(--radius-md); overflow: hidden; border: 2px solid transparent; }
.gallery__thumb.is-active { border-color: var(--color-accent); }
.gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--color-primary); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15); opacity: 0; transition: opacity .15s ease, background .15s ease; }
.gallery__main:hover .gallery__nav, .gallery__nav:focus-visible { opacity: 1; }
.gallery__nav:hover { background: #fff; }
.gallery__nav--prev { left: 10px; }
.gallery__nav--next { right: 10px; }
.gallery__nav .icon { width: 20px; height: 20px; }
.gallery__count { position: absolute; bottom: 10px; right: 10px; z-index: 4; background: rgba(0,0,0,.6); color: #fff; font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
@media (hover: none) { .gallery__nav { opacity: 1; } }

/* Foto-collage: 1=100%, 2=50/50, 3=50/25/25, 4=25/25/25/25 (max 4 foto's) */
.collage { display: grid; gap: 3px; width: 100%; height: 100%; }
.collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collage[data-count="1"] { grid-template-columns: 1fr; }
.collage[data-count="2"] { grid-template-columns: 1fr 1fr; }
.collage[data-count="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.collage[data-count="3"] > img:first-child { grid-row: 1 / span 2; }
.collage[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.hero__media .collage { position: absolute; inset: 0; z-index: 2; }
.about__media .collage { position: absolute; inset: 0; z-index: 2; }
.category-card .collage { position: absolute; inset: 0; z-index: 1; }
.lightbox { position: fixed; inset: 0; z-index: var(--z-toast); background: rgba(0,0,0,0.9); display: none; align-items: center; justify-content: center; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.lightbox__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 999px; background: rgba(255,255,255,0.15); color: #fff; display: grid; place-items: center; }
.lightbox__btn:hover { background: rgba(255,255,255,0.3); }
.lightbox__prev { left: var(--space-4); }
.lightbox__next { right: var(--space-4); }
.lightbox__close { top: var(--space-4); right: var(--space-4); transform: none; }

/* Kortingsweergave (per-product korting), bestaande accentkleur, geen nieuwe kleuren */
.badge--sale { background: var(--color-accent); }
.price-old { text-decoration: line-through; color: var(--color-muted); font-weight: 600; font-size: 0.82em; }
.product-card__price--sale, .product-detail__price--sale .price-now { color: var(--color-accent); }
.product-detail__price .price-old { display: inline; font-size: 0.6em; margin-right: 6px; }

/* Checkout: betaalmethoden + akkoord-checkboxes */
.pay-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pay-option { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; cursor: pointer; }
.pay-option.is-active { border-color: var(--color-accent); background: var(--color-accent-soft); }
.pay-option input { margin-top: 3px; accent-color: var(--color-accent); flex: none; }
.check-line { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; margin-bottom: 10px; cursor: pointer; }
.check-line input { margin-top: 2px; accent-color: var(--color-accent); flex: none; }
.check-line.has-error { color: var(--color-accent); }

/* Opt-in checkbox (registratie) + aan/uit-rij (nieuwsbrief in account) */
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.4; color: var(--color-muted); margin: 0 0 16px; cursor: pointer; }
.check-row input { margin-top: 2px; accent-color: var(--color-accent); flex: none; width: 17px; height: 17px; }
.toggle-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; cursor: pointer; }
.toggle-row input { accent-color: var(--color-accent); flex: none; width: 20px; height: 20px; }

/* Eigenaar-knop in de navigatie (alleen zichtbaar voor ingelogde eigenaar) */
.nav-list .nav-owner { background: var(--color-accent); color: #fff; padding: 6px 14px; border-radius: 999px; font-weight: 600; border: none; }
.nav-list .nav-owner:hover { background: var(--color-accent-dark); color: #fff; }

/* Bewerkbare teksten behouden hun regeleinden (Shift+Enter), voor iedereen zichtbaar. */
[data-edit-text], [data-edit-product] { white-space: pre-wrap; }
/* Inline tekst-bewerken (alleen zichtbaar/actief voor de ingelogde eigenaar) */
.owner-editing [data-edit-text], .owner-editing [data-edit-product] { cursor: text; border-radius: 4px; outline: 1px dashed transparent; outline-offset: 3px; transition: outline-color .15s, background .15s; }
.owner-editing [data-edit-text]:hover, .owner-editing [data-edit-product]:hover { outline-color: var(--color-accent); background: rgba(193,102,59,.10); }
.owner-editing [data-edit-text]:focus, .owner-editing [data-edit-product]:focus { outline: 2px solid var(--color-accent); background: rgba(127,127,127,.18); }
/* Placeholder in een leeg bewerkbaar veld (alleen voor de eigenaar zichtbaar). */
.owner-editing [data-edit-product]:empty::before, .owner-editing [data-edit-text][data-placeholder]:empty::before { content: attr(data-placeholder); color: var(--color-muted); font-style: italic; }
/* Lege bewerkbare secties verbergen we voor gewone bezoekers. */
body:not(.owner-editing) .detail-section--editable:has([data-edit-product]:empty) { display: none; }

/* "Volg dit product"-knop op de productpagina. */
.follow-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; }
.follow-btn .icon { width: 18px; height: 18px; }
.follow-btn.is-following { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.follow-hint { font-size: .82rem; color: var(--color-muted); margin: 6px 0 0; }
.saved-row__unfollow { white-space: nowrap; color: var(--color-muted); }
.saved-row__unfollow:hover { color: var(--color-accent); }

/* Beloning-hint in het afrekenoverzicht ("nog € X en je krijgt …"). */
.reward-hint { margin-top: var(--space-3); padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent-dark, var(--color-accent)); font-size: .88rem; line-height: 1.4; text-align: center; }

/* ---------- Zwevende hulp/WhatsApp-knop + pop-up ---------- */
.wa-fab { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-overlay); width: 56px; height: 56px; border-radius: 50%; border: 0; background: #25D366; color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.22); transition: transform var(--transition-speed) var(--easing); }
.wa-fab:hover { transform: scale(1.06); }
.wa-fab:active { transform: scale(.96); }
.wa-pop { position: fixed; inset: 0; z-index: var(--z-drawer); display: flex; align-items: flex-end; justify-content: flex-end; }
.wa-pop::before { content: ""; position: absolute; inset: 0; }
.wa-pop__card { position: relative; z-index: 1; margin: 0 20px 88px; width: 320px; max-width: calc(100vw - 40px); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-4); animation: wa-in 180ms var(--easing); }
.wa-pop.is-closing .wa-pop__card { animation: wa-out 160ms var(--easing) forwards; }
@keyframes wa-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wa-out { from { opacity: 1; } to { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .wa-pop__card { animation: none; } }
.wa-pop__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.wa-pop__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--color-primary); }
.wa-pop__close { border: 0; background: transparent; color: var(--color-muted); cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-md); }
.wa-pop__close:hover { background: var(--color-background); }
.wa-pop__close .icon { width: 18px; height: 18px; }
.wa-pop__msg { color: var(--color-text); font-size: .92rem; line-height: 1.5; margin-bottom: var(--space-3); }
.wa-pop__faq { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-primary); text-decoration: none; font-weight: 600; font-size: .92rem; margin-bottom: var(--space-2); }
.wa-pop__faq:hover { border-color: var(--color-accent); }
.wa-pop__faq .icon { width: 20px; height: 20px; color: var(--color-accent); flex: none; }
.wa-pop__faq span { flex: 1; }
.wa-pop__wa { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; background: #25D366; color: #fff; border-radius: var(--radius-md); text-decoration: none; font-weight: 700; font-size: .95rem; }
.wa-pop__wa:hover { background: #1ebe5b; }
/* ==== assets/css/pages.css ==== */
/* pages.css: page-specific layout */

/* ---------- Home: hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--color-primary); color: #fff; }
.hero .ph, .hero .ph__fallback { position: absolute; inset: 0; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
/* Desktop- en mobiele hero-uitsnede: telefoons tonen de staande variant (indien ingesteld) */
.hero__pic { position: absolute; inset: 0; z-index: 2; }
.hero__pic--mobile { display: none; }
@media (max-width: 767px) { .hero__pic--mobile { display: block; } }
.hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(17,17,17,0.78) 0%, rgba(17,17,17,0.42) 55%, rgba(17,17,17,0.18) 100%); }
.hero__inner { position: relative; z-index: 2; padding-block: var(--space-9); max-width: 640px; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; letter-spacing: .05em; color: #fff; background: var(--color-accent); padding: 6px 12px; border-radius: 999px; margin-bottom: var(--space-4); }
.hero h1 { color: #fff; margin-bottom: var(--space-4); }
.hero__sub { font-size: 1.1rem; color: rgba(255,255,255,0.85); margin-bottom: var(--space-5); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Section heading ---------- */
.section-head { margin-bottom: var(--space-6); }
.section-head--center { text-align: center; max-width: 620px; margin-inline: auto; }
.section-head p { color: var(--color-muted); margin-top: var(--space-2); }
.section-head__eyebrow { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--color-accent); font-weight: 700; }

/* ---------- USP ---------- */
.usp-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.usp { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.usp__icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent); display: grid; place-items: center; margin-bottom: var(--space-3); }
.usp__icon .icon { width: 26px; height: 26px; }
.usp h3 { font-size: 1.1rem; margin-bottom: 6px; }
.usp p { font-size: 0.9rem; color: var(--color-muted); }
@media (min-width: 768px) { .usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .usp-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- About preview ---------- */
.about { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); }
.about__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; }
.about p { color: var(--color-muted); margin-block: var(--space-3) var(--space-4); }
@media (min-width: 768px) { .about { grid-template-columns: 1.1fr 0.9fr; } }

/* ---------- Maps ---------- */
.maps-card { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; background: var(--color-surface); box-shadow: 0 14px 40px rgba(17,17,17,.07); }
.maps-card__info { padding: var(--space-6); display: flex; flex-direction: column; justify-content: center; }
.maps-card__info h2 { margin-bottom: var(--space-2); }
.maps-card__info p { color: var(--color-muted); margin-bottom: var(--space-4); }
.maps-card__visual { min-height: 220px; background: linear-gradient(135deg,#e8ebe6,#d7ddd2); position: relative; display: grid; place-items: center; color: var(--color-muted); }
.maps-card__visual .icon { width: 48px; height: 48px; color: var(--color-accent); }
@media (min-width: 768px) { .maps-card { grid-template-columns: 1fr 1fr; } }

/* ---------- Assortiment ---------- */
.shop-sidebar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
@media (max-width: 1023px) {
  .shop-sidebar { position: fixed; top: 0; left: 0; z-index: var(--z-drawer); height: 100%; width: min(320px, 85vw); border-radius: 0; transform: translateX(-100%); transition: transform var(--transition-speed) var(--easing); overflow-y: auto; box-shadow: var(--shadow-lg); }
  .shop-sidebar.is-open { transform: translateX(0); }
  .shop-sidebar__overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(17,17,17,0.5); opacity: 0; visibility: hidden; transition: opacity var(--transition-speed); }
  .shop-sidebar__overlay.is-open { opacity: 1; visibility: visible; }
}
.result-count { color: var(--color-muted); font-size: 0.9rem; margin-bottom: var(--space-3); }

/* ---------- Product detail ---------- */
.product-detail { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
.product-detail__info h1 { margin-bottom: var(--space-2); }
.product-detail__cat { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-accent); font-weight: 700; }
.product-detail__price { font-size: 2rem; font-weight: 800; font-family: var(--font-heading); margin-block: var(--space-3); }
.product-detail__price small { display: block; font-size: 0.85rem; font-weight: 500; color: var(--color-muted); font-family: var(--font-body); }
.product-detail__perkg { display: block; font-size: 0.95rem; font-weight: 600; color: var(--color-muted); font-family: var(--font-body); margin-top: 2px; }
.product-detail__labels { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.buy-row { display: flex; gap: var(--space-3); align-items: center; margin-block: var(--space-4); flex-wrap: wrap; }
.qty-stepper { flex: none; display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); padding: 3px; background: var(--color-surface, #fff); }
.qty-stepper__btn { width: 38px; height: 38px; border: 0; background: none; border-radius: var(--radius-sm); display: grid; place-items: center; cursor: pointer; color: var(--color-primary); transition: background var(--transition-speed); }
.qty-stepper__btn:hover:not(:disabled) { background: var(--color-accent-soft); }
.qty-stepper__btn:disabled { color: var(--color-border-strong); cursor: default; }
.qty-stepper__btn svg { width: 18px; height: 18px; }
.qty-stepper__n { width: 40px; min-width: 40px; text-align: center; font-weight: 700; border: 0; background: none; font: inherit; color: inherit; padding: 4px 0; -moz-appearance: textfield; }
.qty-stepper__n::-webkit-outer-spin-button, .qty-stepper__n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper__n:focus { outline: none; background: var(--color-accent-soft); border-radius: var(--radius-sm); }
.stock { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; }
.stock--in { color: var(--color-success); }
.stock--out { color: var(--color-accent); }
.stock__dot { width: 9px; height: 9px; border-radius: 999px; background: currentColor; }
/* Foto-galerij in het beheer/eigenaar-paneel (meerdere foto's, verwijderen, standaard instellen) */
.photo-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.photo-empty { color: var(--color-muted); font-size: 0.9rem; padding: 6px 0; }
.photo-thumb { position: relative; width: 88px; height: 88px; border-radius: 12px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-accent-soft); flex: none; }
.photo-thumb.is-default { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-flag { position: absolute; left: 0; right: 0; bottom: 0; background: var(--color-accent); color: #fff; font-size: 0.62rem; font-weight: 600; text-align: center; padding: 2px 0; }
.photo-setdef { position: absolute; left: 0; right: 0; bottom: 0; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 0.62rem; padding: 3px 0; cursor: pointer; }
.photo-setdef:hover { background: rgba(0,0,0,.8); }
.photo-del { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; line-height: 1; font-size: 0.72rem; display: grid; place-items: center; padding: 0; }
.photo-del:hover { background: #b3261e; }
.detail-section { border-top: 1px solid var(--color-border); padding-block: var(--space-4); }
.detail-section h3 { margin-bottom: var(--space-2); }
.detail-section p { color: var(--color-text); }
@media (min-width: 1024px) { .product-detail { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }

/* ---------- Checkout ---------- */
.checkout-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
.stepper { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); flex-wrap: wrap; }
.stepper__item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--color-muted); font-weight: 600; }
.stepper__num { width: 28px; height: 28px; border-radius: 999px; border: 2px solid var(--color-border-strong); display: grid; place-items: center; font-size: 0.8rem; }
.stepper__item.is-active { color: var(--color-primary); }
.stepper__item.is-active .stepper__num { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.stepper__item.is-done .stepper__num { border-color: var(--color-success); background: var(--color-success); color: #fff; }
.checkout-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.checkout-step { display: none; }
.checkout-step.is-active { display: block; }
.summary-line { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.summary-total { display: flex; justify-content: space-between; font-weight: 800; font-size: 1.15rem; padding-top: var(--space-3); }
.order-summary { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
.time-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: var(--space-2); }
.time-slot { min-height: 44px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-secondary); font-weight: 600; }
.time-slot.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.confirm { text-align: center; padding: var(--space-6) var(--space-4); }
.confirm__check { width: 72px; height: 72px; border-radius: 999px; background: var(--color-success); color: #fff; display: grid; place-items: center; margin: 0 auto var(--space-4); }
.confirm__check .icon { width: 40px; height: 40px; }
.confirm__id { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; background: var(--color-accent-soft); color: var(--color-accent-dark); display: inline-block; padding: 8px 16px; border-radius: var(--radius-md); margin-block: var(--space-3); }
@media (min-width: 1024px) { .checkout-layout { grid-template-columns: 1.6fr 1fr; } }

/* ---------- Page hero (assortiment/contact) ---------- */
.page-hero { background: var(--color-primary); color: #fff; padding-block: var(--space-7); }
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,0.8); margin-top: var(--space-2); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.contact-info li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.contact-info .icon { color: var(--color-accent); flex: 0 0 auto; margin-top: 2px; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

/* Account-pagina */
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.account-card { background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.form-error { color: var(--color-accent); font-weight: 600; font-size: .9rem; margin-bottom: 12px; }
@media (max-width: 720px) { .account-grid { grid-template-columns: 1fr; } }

/* Account: zijbalk + panelen (sidebar-navigatie) */
.account-head { margin-bottom: 20px; }
.account-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.account-nav { background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); position: sticky; top: 90px; }
.account-nav__user { display: flex; align-items: center; gap: 12px; padding: 6px 6px 16px; border-bottom: 1px solid var(--color-border); margin-bottom: 12px; }
.account-nav__avatar { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; padding: 0; border: none; cursor: pointer; overflow: hidden; background: var(--color-primary); display: grid; place-items: center; }
.account-nav__avatar-fallback { font-weight: 700; font-size: 1rem; color: #fff; }
.account-nav__avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.account-nav__avatar-cam { position: absolute; right: -1px; bottom: -1px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--color-surface, #fff); opacity: 0; transition: opacity .15s; }
.account-nav__avatar-cam .icon { width: 12px; height: 12px; color: #fff; }
.account-nav__avatar:hover .account-nav__avatar-cam, .account-nav__avatar:focus-visible .account-nav__avatar-cam { opacity: 1; }
.account-nav__avatar.is-busy { opacity: .6; pointer-events: none; }
.account-nav__id { min-width: 0; display: flex; flex-direction: column; }
.account-nav__id strong { font-size: .95rem; line-height: 1.2; }
.account-nav__id span { font-size: .8rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-nav__menu { display: flex; flex-direction: column; gap: 2px; }
.account-nav__link { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 10px 12px; border-radius: var(--radius-md); font-size: .95rem; color: var(--color-text); text-decoration: none; transition: background .15s, color .15s; }
.account-nav__link .icon { width: 19px; height: 19px; flex: none; color: var(--color-muted); }
.account-nav__link:hover { background: var(--color-accent-soft); }
.account-nav__link.is-active { background: var(--color-accent-soft); color: var(--color-primary); font-weight: 600; }
.account-nav__link.is-active .icon { color: var(--color-primary); }
.account-nav__link--accent { margin-top: 8px; color: var(--color-accent); font-weight: 600; }
.account-nav__link--accent .icon { color: var(--color-accent); }
.account-nav__logout { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 10px 12px; border-top: 1px solid var(--color-border); background: none; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; font-size: .95rem; color: var(--color-accent); font-weight: 600; }
.account-nav__logout .icon { width: 19px; height: 19px; }
.account-nav__logout:hover { color: var(--color-accent); text-decoration: underline; }

/* PWA-installatiekaart ("Zet op beginscherm"), onopvallend, alleen als installeerbaar */
.pwa-card { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px; background: var(--color-accent-soft); border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent); border-radius: 14px; }
.pwa-card__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pwa-card__txt strong { font-size: .92rem; color: var(--color-primary); }
.pwa-card__txt span { font-size: .8rem; color: var(--color-muted); }
.pwa-card .btn { flex: none; }
.account-main { min-width: 0; }
.account-nav__chev { display: none; }
.account-mbar { display: none; }
.account-panel { display: none; }
.account-panel.is-active { display: block; }
.account-card__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.account-card__head h2 { font-size: 1.15rem; margin: 0; }
/* Mobiel: instellingen-lijst (zoals de referentie). Profielrij bovenaan, daaronder
   volle-breedte rijen met chevron; tikken opent het paneel met een terug-knop. */
@media (max-width: 820px) {
  .account-head { display: none; }
  .account-layout { display: block; }
  .account-nav { position: static; padding: 0; border: 0; box-shadow: none; background: none; }
  /* Profielrij: links uitgelijnd, avatar + naam + e-mail/telefoon. */
  .account-nav__user { align-items: center; gap: 14px; padding: 4px 4px 18px; margin: 0 0 6px; border-bottom: 1px solid var(--color-border); }
  .account-nav__avatar { width: 56px; height: 56px; }
  .account-nav__avatar-fallback { font-size: 1.2rem; }
  .account-nav__avatar-cam { opacity: 1; }
  .account-nav__id strong { font-size: 1.05rem; }
  /* Lijstrijen: volle breedte, dun scheidingslijntje, chevron rechts. */
  .account-nav__menu { flex-direction: column; gap: 0; }
  .account-nav__link { width: 100%; gap: 14px; padding: 16px 4px; border-radius: 0; border-bottom: 1px solid var(--color-border); font-size: 1rem; }
  .account-nav__link .icon { width: 22px; height: 22px; }
  .account-nav__link > span:not(.account-nav__chev) { flex: 1; }
  .account-nav__link.is-active { background: none; color: var(--color-text); font-weight: 400; }
  .account-nav__link.is-active .icon { color: var(--color-muted); }
  .account-nav__link--accent { margin-top: 0; color: var(--color-accent); }
  .account-nav__chev { display: grid; place-items: center; margin-left: auto; color: var(--color-muted); }
  .account-nav__chev .icon { width: 20px; height: 20px; }
  .account-nav__logout { justify-content: flex-start; gap: 14px; margin-top: 20px; padding: 14px 4px; border: 0; font-size: 1rem; }
  /* Paneel-weergave: verborgen tot je een rij aantikt (drill-in). */
  .account-main { display: none; }
  .account-layout.is-drilled .account-nav { display: none; }
  .account-layout.is-drilled .account-main { display: block; }
  .account-mbar { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
  .account-mbar__back { display: inline-flex; align-items: center; gap: 2px; background: none; border: 0; cursor: pointer; color: var(--color-primary); font-size: .95rem; font-weight: 600; padding: 4px 6px 4px 0; }
  .account-mbar__back .icon { width: 20px; height: 20px; }
  .account-mbar strong { font-size: 1.1rem; }
  .account-card { padding: 4px 0 0; border: 0; box-shadow: none; background: none; }
}

/* Planning-pagina */
.planning-subsecties { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 20px 0 28px; }
.planning-note { background: var(--color-accent-soft); border-radius: var(--radius-md); padding: 14px 16px; }
.planning-note strong { display: block; color: var(--color-primary); margin-bottom: 4px; }
.planning-note span { color: var(--color-muted); font-size: .88rem; }
.planning-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.planning-item { background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.planning-item__date { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); }
.planning-item__date .icon { width: 18px; height: 18px; }
.planning-item p { color: var(--color-muted); font-size: .92rem; }
/* Klikbare planning-datum: reserveer-pop-up of doorlink naar een product. */
.planning-item--link { cursor: pointer; text-align: left; font: inherit; text-decoration: none; width: 100%; transition: border-color var(--transition-speed) var(--easing), box-shadow var(--transition-speed) var(--easing), transform var(--transition-speed) var(--easing); }
.planning-item--link:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.planning-item__cta { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; color: var(--color-accent); font-weight: 700; font-size: .9rem; }
.planning-item__cta .icon { width: 16px; height: 16px; }

/* Reserveer-formulier in de pop-up (hergebruikt .portie-modal). */
.reserve-form .field { margin-bottom: 12px; }
.reserve-form textarea { width: 100%; resize: vertical; }

/* Pre-order: compacte, eigen pil-knop op de productpagina + datum-picker in de pop-up. */
.buy-preorder {
  display: inline-flex; align-items: center; gap: 8px;
  width: auto; margin-top: 10px;
  padding: 9px 16px; cursor: pointer; font: inherit;
  font-size: .88rem; font-weight: 700; color: var(--color-accent);
  background: var(--color-accent-soft);
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  border-radius: 999px;
  transition: background .15s, color .15s, border-color .15s, transform .05s;
}
.buy-preorder[hidden] { display: none; } /* display:inline-flex mag het hidden-attribuut niet overrulen */
.buy-preorder .icon { width: 17px; height: 17px; flex: none; }
.buy-preorder:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.buy-preorder:active { transform: translateY(1px); }

.preorder-dates { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.preorder-date { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; width: 100%; text-align: left; font: inherit; cursor: pointer; padding: 14px 16px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color .15s, background .15s; }
.preorder-date > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--color-primary); }
.preorder-date > span .icon { width: 18px; height: 18px; color: var(--color-accent); }
.preorder-date small { color: var(--color-muted); }
.preorder-date:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.portie-modal__sub .po-cat { color: var(--color-accent); font-weight: 600; }

/* ===== Eigenaar (beheer geïntegreerd in de site) ===== */
/* Eigenaarspaneel: gebruik op desktop de volle schermbreedte (met rustige
   marges), zodat tabellen en het dashboard de ruimte krijgen. */
.container--eig { max-width: none; padding-inline: clamp(16px, 2.5vw, 44px); }

.eig-head { margin-bottom: 22px; }

/* Samengevoegde beheerpagina (Kortingen & beloningen, E-mail): elk deel als
   eigen kaart, met kopje + scheidingslijn erin en ruimte ertussen. */
.eig-block { background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: 16px; padding: 20px 22px 22px; margin-bottom: 22px; }
.eig-block:last-child { margin-bottom: 0; }
.eig-block__title { font-size: 1.22rem; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); scroll-margin-top: 90px; }
.eig-block .eig-bar { margin-bottom: 14px; }
@media (max-width: 640px) { .eig-block { padding: 16px; } }
.eig-head h1 { margin-top: 6px; }
.eig-layout { display: grid; grid-template-columns: 230px 1fr; gap: 26px; align-items: start; }
/* Zijmenu in moderne dashboard-stijl: vlakke items, inklapbare groepen met
   subitems aan een verbindingslijn, scheidingslijn voor de instellingen. */
.eig-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 2px; }
.eig-navbtn { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: 0; color: var(--color-text); font-family: inherit; font-size: .92rem; font-weight: 600; padding: 9px 11px; border-radius: 10px; cursor: pointer; transition: background .13s var(--easing), color .13s var(--easing); }
.eig-navbtn:hover { background: var(--color-background); color: var(--color-primary); }
.eig-navbtn .icon { width: 18px; height: 18px; flex: none; color: var(--color-muted); transition: color .13s var(--easing); }
.eig-navbtn:hover .icon { color: var(--color-primary); }
.eig-navbtn.is-active { background: var(--color-accent-soft); color: var(--color-accent); }
.eig-navbtn.is-active .icon { color: var(--color-accent); }
/* Groepen: hoofdregel met icoon + chevron, subitems ingesprongen met lijntje */
.eig-navsec { display: flex; flex-direction: column; gap: 2px; }
.eig-navgroup { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: .92rem; font-weight: 600; color: var(--color-text); padding: 9px 11px; border-radius: 10px; text-align: left; transition: background .13s var(--easing); }
.eig-navgroup .icon { width: 18px; height: 18px; flex: none; color: var(--color-muted); }
.eig-navgroup:hover { background: var(--color-background); color: var(--color-primary); }
.eig-navgroup::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--color-muted); border-bottom: 1.5px solid var(--color-muted); transform: rotate(45deg); transition: transform .15s var(--easing); flex: none; margin: -2px 3px 0 auto; }
.eig-navsec.is-closed .eig-navgroup::after { transform: rotate(-45deg); margin-top: 1px; }
.eig-navsec.has-active .eig-navgroup { color: var(--color-primary); }
.eig-navsec.has-active .eig-navgroup .icon { color: var(--color-accent); }
.eig-navsec__items { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 3px 20px; padding-left: 10px; border-left: 1.5px solid var(--color-border); }
.eig-navsec.is-closed .eig-navsec__items { display: none; }
.eig-navbtn--sub { font-size: .87rem; font-weight: 500; padding: 7px 10px; color: var(--color-muted); }
.eig-navbtn--sub:hover { color: var(--color-primary); }
.eig-navbtn--sub.is-active { font-weight: 600; }
.eig-side__sep { height: 1px; background: var(--color-border); margin: 10px 6px; }
/* Mobiel: knoppen in één rij, wrappers "oplossen", inklappen negeren, chips */
@media (max-width: 860px) {
  .eig-navsec, .eig-navsec__items, .eig-navsec.is-closed .eig-navsec__items { display: contents; }
  .eig-navgroup, .eig-side__sep { display: none; }
  .eig-navbtn, .eig-navbtn--sub { background: var(--color-surface, #fff); border: 1px solid var(--color-border); color: var(--color-primary); font-size: .9rem; font-weight: 600; }
  .eig-navbtn.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
  .eig-navbtn.is-active .icon { color: #fff; }
}
.eig-main { min-width: 0; }
.eig-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.eig-search { flex: 1; min-width: 180px; padding: 10px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font: inherit; }
.eig-search:focus { outline: none; border-color: var(--color-accent); }
.eig-table { width: 100%; border-collapse: collapse; background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.eig-table th, .eig-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); font-size: .92rem; vertical-align: middle; }
.eig-table th { background: var(--color-accent-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.eig-table tr:last-child td { border-bottom: none; }
.eig-table .num { text-align: right; }
.eig-thumb { width: 42px; height: 42px; border-radius: 8px; background: var(--color-accent-soft); display: inline-grid; place-items: center; overflow: hidden; }
.eig-thumb img { width: 100%; height: 100%; object-fit: cover; }
.badge--sale { background: var(--color-accent); color: #fff; }
.eig-inv { display: flex; flex-direction: column; gap: 8px; }
.eig-invrow { display: flex; align-items: center; gap: 14px; background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 12px; flex-wrap: wrap; }
.eig-invrow.is-low { border-color: var(--color-accent); }
.eig-invrow.is-oos { border-color: #b3402f; }
.eig-invname { flex: 1; min-width: 120px; display: flex; flex-direction: column; }
.eig-invname small { color: var(--color-muted); }
.eig-invlabel { min-width: 120px; }
.eig-qty { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.eig-qty button { width: 34px; height: 34px; border: 1.5px solid var(--color-border); background: var(--color-surface, #fff); border-radius: 8px; font-size: 1.1rem; cursor: pointer; }
.eig-qty input { width: 66px; text-align: center; padding: 7px; border: 1.5px solid var(--color-border); border-radius: 8px; }
.eig-form .field { margin-bottom: 14px; }
.eig-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.eig-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.eig-photo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface, #fff); }
.eig-photo__img { aspect-ratio: 4/3; background: var(--color-accent-soft); display: grid; place-items: center; }
.eig-photo__img img { width: 100%; height: 100%; object-fit: cover; }
.eig-photo__img span { font-size: 2rem; }
.eig-photo__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-size: .85rem; }
.eig-photo__manage { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; }
/* eigenaar modal (site-stijl) */
.eig-modal { position: fixed; inset: 0; background: rgba(30, 20, 12, .55); display: grid; place-items: center; z-index: 1200; padding: 16px; overflow: auto; }
.eig-modal__card { background: var(--color-surface, #fff); border-radius: var(--radius-lg); width: min(680px, 100%); max-height: 92vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.eig-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.eig-modal__body { padding: 18px 20px; overflow: auto; }
.eig-modal__foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--color-border); }
.eig-switch { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 14px; }
.eig-switch input { width: auto; }
.eig-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.eig-tags label { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--color-border); border-radius: 999px; padding: 5px 12px; font-weight: 500; font-size: .85rem; cursor: pointer; margin: 0; }
.eig-tags label:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.eig-tags input { width: auto; }
/* Gerelateerde-producten-kiezer (scrollbare aanvinklijst). */
.eig-rel { max-height: 220px; overflow-y: auto; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); margin-top: 8px; }
.eig-rel__row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--color-border); cursor: pointer; margin: 0; }
.eig-rel__row:last-child { border-bottom: 0; }
.eig-rel__row:has(input:checked) { background: var(--color-accent-soft); }
.eig-rel__row input { width: auto; flex: none; }
.eig-rel__name { flex: 1; min-width: 0; font-weight: 500; }
.eig-rel__cat { color: var(--color-muted); font-size: .82rem; white-space: nowrap; }
/* Rode X om een bestelling te annuleren (aan het eind van de rij). */
.eig-cancel-x { display: inline-flex; align-items: center; justify-content: center; margin: 0 auto; width: 34px; height: 34px; color: var(--color-muted); border-radius: var(--radius-md); }
.eig-cancel-x .icon { width: 18px; height: 18px; }
.eig-cancel-x:hover { color: #fff; background: #b3402f; }

/* Pakket-editor (beheer): kaart per pakket met naam/prijs/voorraad + inhoud. */
.pak-card { border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 12px; background: var(--color-background); }
.pak-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pak-contents { display: flex; flex-direction: column; gap: 6px; }
.eig-form__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Doorzoekbare dropdown (typ om te filteren) in het beheer. */
.searchsel { position: relative; min-width: 0; }
.searchsel__input { width: 100%; padding: 9px 12px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); font: inherit; font-size: .9rem; background: var(--color-surface); }
.searchsel__input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.searchsel__list { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; margin-top: 4px; background: var(--color-surface); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); max-height: 240px; overflow: auto; box-shadow: var(--shadow-lg); }
.searchsel__opt { display: block; width: 100%; text-align: left; padding: 9px 12px; background: none; border: 0; font: inherit; font-size: .9rem; cursor: pointer; }
.searchsel__opt:hover { background: var(--color-accent-soft); }
.searchsel__opt.is-active { font-weight: 700; color: var(--color-accent); }
.searchsel__none { padding: 10px 12px; color: var(--color-muted); font-size: .88rem; }
.pak-content .searchsel { flex: 2 1 140px; }

/* Pre-order per portie/pakket (checkbox + categorie) in de product-editor. */
.portie-row__pre { grid-column: 1 / -1; margin: 2px 0 6px; }
.opt-preorder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.opt-preorder__toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--color-muted); cursor: pointer; white-space: nowrap; }
/* Het vinkje klein houden: containers als .field/.portie-row zetten inputs op 100% breed. */
.opt-preorder__toggle input[type="checkbox"] { width: 15px; height: 15px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: var(--color-accent); }
div.opt-preorder select { width: auto; max-width: 200px; min-height: 32px; height: 32px; padding: 4px 10px; font-size: .85rem; }

.pak-content { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pak-content .pk-c-qty { width: 60px; text-align: center; padding: 6px 8px; }
.pak-content__x { color: var(--color-muted); }
.pak-content .pk-c-prod { flex: 2 1 140px; min-width: 0; }
.pak-content .pk-c-portie { flex: 1 1 110px; min-width: 0; }
.pak-hide { color: var(--color-muted); }
.pak-hide.is-off { color: var(--color-accent); background: var(--color-accent-soft); }
.pak-hide .icon { width: 18px; height: 18px; }
/* Foto per pakket (beheer). */
.pak-photo { margin-bottom: 10px; }
.pak-photo__has { display: flex; align-items: center; gap: 12px; }
.pak-photo__has img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.pak-photo__btns { display: flex; gap: 6px; flex-wrap: wrap; }
/* Pakketinhoud op de productpagina ("wat zit erin"). */
.pack-contents { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pack-contents li { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; background: var(--color-background); border-radius: var(--radius-md); }
.pack-qty { font-weight: 700; color: var(--color-accent); min-width: 28px; }
.pack-portie { color: var(--color-muted); font-size: .9em; }
/* Pakketfoto op de productpagina (wisselt mee met de gekozen pakket-optie). */
.product-detail__packimg { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.product-detail__packimg.ph { display: grid; place-items: center; }
/* Telefonische bestelling: productzoeker + regels + betaallink. */
.mo-results { border: 1.5px solid var(--color-border); border-radius: var(--radius-md); margin-top: 6px; max-height: 220px; overflow-y: auto; }
.mo-result { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--color-border); padding: 9px 12px; cursor: pointer; font: inherit; }
.mo-result:last-child { border-bottom: 0; }
.mo-result:hover { background: var(--color-accent-soft); }
.mo-result small { color: var(--color-accent); font-weight: 700; }
.mo-line { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.mo-line__name { flex: 1; min-width: 0; font-weight: 500; }
.mo-line select { width: auto; padding: 6px 10px; font-size: .85rem; }
.mo-line__qty { width: 56px; padding: 6px 8px; text-align: center; }
.mo-line__total { min-width: 64px; text-align: right; font-weight: 600; white-space: nowrap; }
.mo-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--color-border); font-size: 1.05rem; }
.mo-linkbox { display: flex; gap: 8px; align-items: center; }
.mo-linkbox input { flex: 1; min-width: 0; font-size: .85rem; padding: 8px 10px; }
/* Besteloverzicht-popup (producten zoals op de bon + klant/afhaal-gegevens). */
.ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ov-block { background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 12px; font-size: .9rem; line-height: 1.4; }
.ov-label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); margin-bottom: 4px; }
.ov-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ov-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--color-border); }
@media (max-width: 560px) { .ov-grid { grid-template-columns: 1fr; } }
.eig-photo-edit { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.eig-photo-edit .eig-photo__img { width: 96px; height: 96px; aspect-ratio: auto; border-radius: 10px; flex: none; }
@media (max-width: 860px) { .eig-layout { grid-template-columns: 1fr; } .eig-side { position: static; flex-direction: row; flex-wrap: wrap; } .eig-navbtn { width: auto; } .eig-grid2 { grid-template-columns: 1fr; } }

/* ---- Beheer op mobiel (≤767px): swipebare sectiebalk + scrollbare tabellen ---- */
@media (max-width: 767px) {
  .eig-head h1 { font-size: 1.5rem; }
  /* Sectienavigatie als één swipebare rij i.p.v. een hoog knoppenblok */
  .eig-side { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px; padding-bottom: 6px; }
  .eig-navgroup { display: none; }
  .eig-navbtn { flex: 0 0 auto; white-space: nowrap; padding: 9px 13px; }
  /* Brede tabellen horizontaal laten scrollen, niet de layout breken */
  [data-list] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .eig-table { min-width: 560px; }
  /* 16px voorkomt dat iOS inzoomt bij focus op invoervelden */
  .eig-main input, .eig-main select, .eig-main textarea { font-size: 16px; }
}

/* Bijsnijd-dialog (imageEditor.js), klassenamen botsen niet met de site-CSS */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,16,12,.55); display: grid; place-items: center; z-index: 1300; padding: 16px; overflow: auto; }
.modal { background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.4); width: min(680px,100%); max-height: 92vh; display: flex; flex-direction: column; color: #2a2622; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #e4ddd0; font-weight: 700; }
.modal-body { padding: 18px; overflow: auto; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid #e4ddd0; }
.modal .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer; font: 600 .95rem 'Inter',sans-serif; padding: 10px 18px; border-radius: 999px; border: 2px solid transparent; }
.modal .btn-primary { background: #2e5339; color: #fff; }
.modal .btn-ghost { background: #fff; color: #2e5339; border-color: #2e5339; }
.modal .btn:disabled { opacity: .55; cursor: not-allowed; }
.modal .hint { color: #7a7167; font-size: .82rem; }
.modal input[type=range] { width: 100%; accent-color: #c1663b; margin-top: 6px; }
.cropbox { position: relative; overflow: hidden; border-radius: 12px; background: #efe9df; border: 1px solid #e4ddd0; touch-action: none; cursor: grab; }
.cropbox .cropimg { position: absolute; top: 0; left: 0; max-width: none; user-select: none; pointer-events: none; }

/* Korting-productkeuze (checkbox-lijst) */
.eig-picklist { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow: auto; }
.eig-pick { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; margin: 0; font-weight: 500; }
.eig-pick:hover { background: var(--color-accent-soft); }
.eig-pick input { width: auto; }

/* Korting = oranje prijs + oranje label (op de hele site) */
.badge--sale { background: linear-gradient(135deg, #f97316, #c2410c) !important; color: #fff !important; box-shadow: 0 2px 6px rgba(194,65,12,.28); letter-spacing: .02em; }
.product-card__price--sale, .product-detail__price--sale .price-now { color: #e04e0a !important; }
.price-old { opacity: .75; }

/* Voorraad: Opslaan-knop volledig zichtbaar, rood met witte tekst */
.eig-qty { flex-wrap: wrap; justify-content: flex-end; }
.eig-qty [data-save] { flex: none; width: auto; white-space: nowrap; background: #c0392b; color: #fff; border: none; padding: 8px 16px; }
.eig-qty [data-save]:hover { background: #a93226; }

/* Account: succesmelding */
.account-ok { color: #2e7d46; font-weight: 600; font-size: .9rem; margin-bottom: 12px; }

/* Spaarpunten */
.points-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.points-badge { flex: none; min-width: 64px; height: 64px; padding: 0 10px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #f97316, #c2410c); color: #fff; font-weight: 800; font-size: 1.4rem; box-shadow: 0 4px 12px rgba(194,65,12,.3); }
.points-earned { margin: 8px auto 16px; max-width: 420px; background: #fff4ec; border: 1px solid #f2c7a6; color: #9a3d0a; border-radius: 12px; padding: 12px 16px; font-size: .95rem; }

/* Checkout: kortingscode */
.coupon-row { display: flex; gap: 10px; }
.coupon-row input { flex: 1; padding: 10px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font: inherit; text-transform: uppercase; }
.coupon-row input:focus { outline: none; border-color: var(--color-accent); }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff4ec; border: 1px solid #f2c7a6; color: #9a3d0a; border-radius: 10px; padding: 10px 14px; font-size: .92rem; }

/* Checkout: kortingscode uitklapbaar (vriendelijk) */
.coupon-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px dashed var(--color-border-strong); color: var(--color-primary); padding: 10px 14px; border-radius: var(--radius-md); font-weight: 600; cursor: pointer; font-size: .95rem; }
.coupon-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
.coupon-toggle .icon { width: 18px; height: 18px; }

/* Checkout: hoeveel spaarpunten gebruiken */
.points-choose { border: 1px solid #f2c7a6; background: #fff9f4; border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 16px; }
.points-choose > label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.points-choose__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.points-choose__row input { width: 120px; padding: 8px 10px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); font: inherit; }
.points-choose__val { font-weight: 700; color: #e04e0a; }
.points-choose .hint { display: block; margin-top: 8px; color: var(--color-muted); font-size: .82rem; }
.linkbtn { background: none; border: none; padding: 0; color: var(--color-accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* Eigenaar: e-mailtemplates */
.eig-mails { display: flex; flex-direction: column; gap: 16px; }
.eig-mail { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface, #fff); padding: 16px 18px; }
.eig-mail__head { margin-bottom: 12px; }
.eig-mail .field { margin-bottom: 12px; }
.eig-mail textarea { font-family: 'Inter', system-ui, sans-serif; font-size: .92rem; line-height: 1.5; }
.eig-ph { font-size: .82rem; color: var(--color-muted); margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.eig-chip { background: var(--color-accent-soft); color: var(--color-accent-dark); border: 1px solid transparent; border-radius: 999px; padding: 3px 10px; font-size: .8rem; font-weight: 600; cursor: pointer; font-family: monospace; }
.eig-chip:hover { border-color: var(--color-accent); }
.eig-chip--link { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); font-family: inherit; }
.eig-ph__hint { font-size: .8rem; color: var(--color-muted); line-height: 1.5; margin: -4px 0 14px; }
.eig-ph__hint code { background: var(--color-accent-soft); color: var(--color-accent-dark); padding: 1px 6px; border-radius: 5px; font-size: .92em; }
.eig-mail__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Productpagina: hint bij minimum-bestelaantal */
.buy-min-hint { margin: 8px 0 0; font-size: .88rem; color: var(--color-muted); }

/* Eigenaar: portie-opties in productformulier */
.portie-head, .portie-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 32px; gap: 8px; align-items: center; }
.portie-head { font-size: .74rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; padding: 0 2px; }
.portie-rows { display: flex; flex-direction: column; gap: 8px; }
.portie-row input { width: 100%; padding: 7px 9px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); font: inherit; }
/* Cadeaubon: eenvoudige bedrag-rij (€ + bedrag + verwijderen) */
.gift-row { display: flex; align-items: center; gap: 8px; max-width: 320px; }
.gift-row__cur { font-weight: 700; color: var(--color-muted); font-size: 1.05rem; }
.gift-row .g-prijs { flex: 1; min-width: 0; padding: 8px 10px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); font: inherit; }
.portie-del { width: 30px; height: 30px; border: none; background: #fbeae7; color: var(--color-accent); border-radius: 8px; cursor: pointer; font-weight: 700; }
.portie-del:hover { background: #f7d5cf; }
.eig-portie-sel { padding: 7px 10px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); font: inherit; background: #fff; max-width: 200px; }
@media (max-width: 640px) { .portie-head { display: none; } .portie-row { grid-template-columns: 1fr 1fr; } .portie-row .portie-del { grid-column: 2; justify-self: end; } }

/* Productpagina: portie-dropdown */
.buy-row .portie-select { flex: 1; min-width: 180px; padding: 12px 14px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); font: inherit; background: var(--color-surface, #fff); }
.buy-row .portie-select:focus { outline: none; border-color: var(--color-accent); }

/* Google Maps embed (echte kaart i.p.v. pin) */
.maps-card__map { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }
/* Op de contactpagina staat de kaart los -> geef 'm een eigen kaart-look. */
.contact-grid .maps-card__map { border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: 0 14px 40px rgba(17,17,17,.08); min-height: 340px; }

/* Reviews-embed (Kiyoh-widget) */
.reviews-embed { max-width: 1000px; margin: 0 auto; }

/* Reviews in eigen huisstijl (Kiyoh-feed) */
.kreviews__summary { margin-top: var(--space-2); color: var(--color-muted); }
.kreviews__summary strong { color: var(--color-accent); font-size: 1.15rem; }
/* Reviews-carrousel: 3 op een rij, doorheen scrollen met de pijlknoppen. */
.kreviews-carousel { position: relative; max-width: 1100px; margin: 0 auto; }
.kreviews { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 4px var(--space-2); scrollbar-width: none; -ms-overflow-style: none; }
.kreviews::-webkit-scrollbar { display: none; }
.kreviews .kreview { flex: 0 0 calc((100% - 2 * var(--space-4)) / 3); scroll-snap-align: start; }
.kreviews-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.14); transition: background .15s; }
.kreviews-nav:hover { background: var(--color-background); }
.kreviews-nav[hidden] { display: none; }
.kreviews-nav--prev { left: -18px; }
.kreviews-nav--next { right: -18px; }
.kreviews-nav .icon { width: 22px; height: 22px; }
@media (max-width: 900px) { .kreviews .kreview { flex-basis: calc((100% - var(--space-4)) / 2); } }
@media (max-width: 600px) { .kreviews .kreview { flex-basis: 100%; } .kreviews-nav--prev { left: 6px; } .kreviews-nav--next { right: 6px; } }
.kreview { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.kreview__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.kstars { letter-spacing: 2px; }
.kstar { color: var(--color-border); }
.kstar.is-on { color: #f5a623; }
.kreview__score { font-weight: 700; color: var(--color-muted); font-size: .85rem; }
.kreview__title { font-size: 1rem; margin: 0; }
.kreview__text { margin: 0; color: var(--color-text); font-size: .92rem; line-height: 1.5; }
.kreview__meta { color: var(--color-muted); font-size: .82rem; margin-top: auto; }
.kreview__reply { background: var(--color-accent-soft); border-radius: var(--radius-md); padding: var(--space-3); font-size: .84rem; color: var(--color-text); }
.kreviews__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-5); }

/* ---------- Statistieken (eigenaar-dashboard) ---------- */
.stat-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
@media (min-width: 768px) { .stat-kpis { grid-template-columns: repeat(4, 1fr); } }
.stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: 4px; }
.stat-card__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); font-weight: 700; }
.stat-card__value { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; color: var(--color-primary); line-height: 1.1; }
/* Klikbare KPI (lage voorraad / uitverkocht) → opent de productenlijst. */
.stat-card--btn { cursor: pointer; text-align: left; font: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.stat-card--btn:hover { border-color: var(--color-accent); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.stat-card__hint { display: inline-flex; align-items: center; gap: 2px; margin-top: 2px; font-size: .74rem; font-weight: 700; color: var(--color-accent); }
.stat-card__hint .icon { width: 13px; height: 13px; }
/* Voorraadlijst-popup. */
.stocklist { display: flex; flex-direction: column; }
.stocklist-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--color-border); padding: 10px 4px; cursor: pointer; font: inherit; }
.stocklist-row:last-child { border-bottom: 0; }
.stocklist-row:hover { background: var(--color-background); }
.stocklist-row__name { flex: 1; min-width: 0; font-weight: 600; color: var(--color-primary); display: flex; flex-direction: column; }
.stocklist-row__name small { font-weight: 400; color: var(--color-muted); font-size: .8rem; }
.stat-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
@media (min-width: 900px) { .stat-cols { grid-template-columns: 1.4fr 1fr; } }
.stat-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.stat-panel h3 { margin-bottom: var(--space-4); font-size: 1.05rem; }
.stat-chart { display: flex; align-items: flex-end; gap: var(--space-3); height: 200px; }
.stat-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.stat-bar__track { width: 100%; max-width: 46px; flex: 1; display: flex; align-items: flex-end; background: var(--color-accent-soft); border-radius: var(--radius-sm); overflow: hidden; }
.stat-bar__fill { width: 100%; background: linear-gradient(180deg, var(--color-accent), var(--color-accent-dark)); border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: height var(--transition-speed) var(--easing); }
.stat-bar__val { font-size: 0.7rem; font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.stat-bar__lbl { font-size: 0.72rem; color: var(--color-muted); }
.stat-list { list-style: none; display: flex; flex-direction: column; }
.stat-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.stat-list li:last-child { border-bottom: 0; }
.stat-rank { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); font-weight: 800; font-size: 0.8rem; }
.stat-list__name { font-weight: 600; font-size: 0.92rem; color: var(--color-primary); flex: 1; min-width: 0; }
.stat-list__meta { font-size: 0.82rem; color: var(--color-muted); white-space: nowrap; }
.stat-list__meta .icon { width: 14px; height: 14px; vertical-align: -2px; color: var(--color-accent); }
.stat-list li:has(> .stat-list__row) { padding: 0; }
.stat-list__row { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) 0; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; }
.stat-list__row:hover .stat-list__name { text-decoration: underline; }
.stat-empty { color: var(--color-muted); font-size: 0.9rem; padding: var(--space-2) 0; }

/* Bewaarlijst in het account (meal-prep) */
.saved-list { display: flex; flex-direction: column; }
.saved-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.saved-row:last-child { border-bottom: 0; }
/* Kleine productfoto, net als in het voorraadoverzicht. */
.saved-row__media { position: relative; flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-background); display: grid; place-items: center; }
.saved-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.saved-row__media .ph__fallback { color: var(--color-muted); }
.saved-row__media .ph__fallback .icon { width: 20px; height: 20px; }
.saved-row__name { font-weight: 600; color: var(--color-primary); flex: 1; min-width: 0; }
.saved-row__price { color: var(--color-muted); font-weight: 600; white-space: nowrap; }
.saved-row__del { color: var(--color-muted); }
.saved-row__del:hover { color: var(--color-accent); }
@media (max-width: 560px) {
  .saved-row { flex-wrap: wrap; }
  /* Foto + naam samen op de eerste regel; prijs en knoppen wrappen eronder. */
  .saved-row__name { flex: 1 1 auto; min-width: 0; }
  .saved-row__price { margin-left: calc(44px + var(--space-3)); }
}
.saved-group { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.saved-group__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.saved-group__name { font-size: 1rem; color: var(--color-primary); }
.saved-group__actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* In-/uitklapbare lijst: de kop is een knop (chevron + naam + aantal). */
.saved-group__toggle { display: flex; align-items: center; gap: var(--space-2); background: none; border: 0; padding: 4px 0; margin: 0; cursor: pointer; font: inherit; color: inherit; min-width: 0; -webkit-tap-highlight-color: transparent; }
.saved-group__chevron { display: inline-flex; color: var(--color-muted); transition: transform var(--transition-speed, .2s) var(--easing, ease); }
.saved-group__chevron svg { width: 18px; height: 18px; }
.saved-group.is-collapsed .saved-group__chevron { transform: rotate(-90deg); }
.saved-group__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--color-accent-soft, #f1e6e0); color: var(--color-accent); font-size: .75rem; font-weight: 700; }
.saved-group.is-collapsed .saved-group__head { margin-bottom: 0; }
.saved-group.is-collapsed .saved-group__body { display: none; }
/* Snel-toevoegen-knop per product (compacte cart-knop). */
.saved-row__add { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.saved-row__add svg { width: 16px; height: 16px; }

/* Veelgestelde vragen (accordion) */
.faq-list { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.faq-item__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 16px 18px; cursor: pointer; font-weight: 600; color: var(--color-primary); list-style: none; }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q > span { flex: 1; }
.faq-item__q .icon { width: 18px; height: 18px; color: var(--color-muted); flex: none; transition: transform var(--transition-speed) var(--easing); }
.faq-item[open] .faq-item__q .icon { transform: rotate(90deg); }
.faq-item[open] .faq-item__q { color: var(--color-accent); }
.faq-item__a { padding: 0 18px 18px; color: var(--color-text); line-height: 1.6; white-space: pre-line; }

/* ---------- Paginering (assortiment) ---------- */
/* Persoonlijke aanbevelingsrij bovenaan het assortiment. Bewust een eigen kaart met
   accentrand, zodat meteen duidelijk is dat deze producten bij elkaar horen en
   losstaan van de gewone lijst eronder. Leeg = volledig onzichtbaar. */
.reco-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.reco-row:empty { display: none; }
.reco-row__head { margin-bottom: var(--space-4); }
.reco-row__head h2 { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; margin-top: 2px; }
.reco-row__head h2 .icon { width: 20px; height: 20px; color: var(--color-accent); flex: none; }
.reco-row__sub { color: var(--color-muted); font-size: .88rem; margin-top: 4px; }
.reco-row__sub .linkbtn { font-size: .88rem; }
/* Uitgezet: geen kaart, alleen een rustig regeltje met de weg terug. */
.reco-row--off { background: none; border: 0; padding: 0; margin-bottom: var(--space-4); }
.reco-row__off { color: var(--color-muted); font-size: .88rem; }
.reco-row__off .linkbtn { font-size: .88rem; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 28px; }
.pagination:empty { display: none; }
.pagination__btn {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 600; color: var(--color-text);
  background: var(--color-surface); border: 1.5px solid var(--color-border, #e2e8f0);
  border-radius: 10px; cursor: pointer;
  transition: border-color var(--transition-speed) var(--easing), background var(--transition-speed) var(--easing), color var(--transition-speed) var(--easing);
}
.pagination__btn .icon { width: 16px; height: 16px; }
.pagination__btn:hover:not(:disabled):not(.is-active) { border-color: var(--color-accent); color: var(--color-accent); }
.pagination__btn.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; cursor: default; }
.pagination__btn:disabled { opacity: .4; cursor: default; }
.pagination__dots { color: var(--color-muted); padding: 0 2px; }

/* ---------- Adres in drie vakjes op één regel (registratie + profiel) ---------- */
.addr-row { display: grid; grid-template-columns: 1.7fr .9fr 1.1fr; gap: 8px; }
.addr-row input { min-width: 0; } /* mag krimpen binnen de grid-kolom */

/* ---------- Instelbaar statistieken-dashboard (eigenaar) ---------- */
.dash-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-toolbar .hint { color: var(--color-muted); font-size: .85rem; max-width: 60ch; }
.dash-toolbar__btns { display: flex; gap: 8px; flex: none; }
.dash-toolbar__btns .btn { display: inline-flex; align-items: center; gap: 6px; }
.dash-toolbar__btns .icon { width: 15px; height: 15px; }

/* Vast 4-koloms raster met vrije plaatsing: widgets staan op hun eigen vak
   (kolom/rij), lege vakken blijven gewoon leeg. */
.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 96px; gap: 12px; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }
/* Voorbeeld-vak tijdens het slepen */
.dash-ghost { border: 2px dashed var(--color-accent); border-radius: 16px; background: color-mix(in srgb, var(--color-accent-soft) 60%, transparent); pointer-events: none; }

.dash-w { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: box-shadow .18s var(--easing), border-color .18s var(--easing), transform .18s var(--easing); }
.dash-w:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .07); border-color: var(--color-border); }
.dash-w.is-dragging { opacity: .45; }
.dash-w.is-resizing { border-color: var(--color-accent); box-shadow: 0 6px 18px rgba(15, 23, 42, .1); }

.dash-w__head { display: flex; align-items: center; gap: 9px; padding: 12px 12px 4px 14px; cursor: grab; user-select: none; }
.dash-w__head:active { cursor: grabbing; }
.dash-w__ico { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--color-accent-soft); color: var(--color-accent); }
.dash-w__ico .icon { width: 14px; height: 14px; }
.dash-w__title { flex: 1; min-width: 0; font-size: .86rem; font-weight: 700; color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-w__acts { display: flex; gap: 2px; flex: none; opacity: 0; transition: opacity .15s var(--easing); }
.dash-w:hover .dash-w__acts, .dash-w:focus-within .dash-w__acts { opacity: 1; }
.dash-w__acts .icon-btn { width: 26px; height: 26px; color: var(--color-muted); }
.dash-w__acts .icon-btn:hover { color: var(--color-primary); }
.dash-w__acts .icon { width: 14px; height: 14px; }

.dash-w__body { flex: 1; min-height: 0; padding: 6px 14px 12px; overflow: auto; }

/* KPI-tegel: overal hetzelfde ontwerp, groot getal + pil op één regel, subregel eronder */
.dash-kpi { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 0; }
.dash-kpi[role="button"] { cursor: pointer; }
.dash-kpi__num { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; line-height: 1.1; color: var(--color-primary); letter-spacing: -.01em; }
.dash-kpi__sub { font-size: .72rem; color: var(--color-muted); }
.dash-kpi__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.dash-kpi__row .dash-kpi__num { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-trend { display: inline-block; font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none; }
.dash-trend--up { color: #15803d; background: #dcfce7; }
.dash-trend--down { color: #b91c1c; background: #fee2e2; }
.dash-trend--flat { color: var(--color-muted); background: var(--color-background); border: 1px solid var(--color-border); }
.dash-trend--go { color: var(--color-accent); background: var(--color-accent-soft); }

/* Grafiek-layout: y-as links, gestippelde rasterlijnen, x-labels onder (referentiestijl) */
.dash-chart { height: 100%; display: flex; gap: 10px; min-height: 0; }
.dash-chart__y { flex: none; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: .64rem; color: var(--color-muted); padding-bottom: 22px; }
.dash-chart__body { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.dash-chart__plot { flex: 1; min-height: 0; position: relative;
  background-image:
    linear-gradient(to right, var(--color-border) 45%, transparent 0),
    linear-gradient(to right, var(--color-border) 45%, transparent 0),
    linear-gradient(to right, var(--color-border) 45%, transparent 0);
  background-size: 9px 1px, 9px 1px, 9px 1px;
  background-repeat: repeat-x, repeat-x, repeat-x;
  background-position: 0 0, 0 50%, 0 100%;
}
.dash-chart__plot .dash-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.dash-line__labels { display: flex; justify-content: space-between; font-size: .66rem; color: var(--color-muted); padding-top: 6px; min-height: 22px; }
.dash-bars__labels span { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-bars__labels.dash-bars--dense span:nth-child(2n) { visibility: hidden; }

/* Vlakke staven met afgeronde top (zoals "Total Customers" in het voorbeeld) */
.dash-bars { display: flex; align-items: flex-end; gap: 8px; padding: 0 2px; }
.dash-bar { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.dash-bar__fill { width: 100%; max-width: 30px; background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 80%, #fff), var(--color-accent)); border-radius: 7px 7px 3px 3px; transition: filter .15s var(--easing); }
.dash-bar:hover .dash-bar__fill, .dash-bar.is-hov .dash-bar__fill { filter: brightness(1.12); }

/* Hover-tooltip + verticale aanwijslijn op grafieken */
.dash-tip { position: fixed; z-index: 1200; display: none; pointer-events: none; background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: 12px; padding: 9px 12px; box-shadow: 0 10px 30px rgba(17, 17, 17, .16); min-width: 130px; }
.dash-tip__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .78rem; font-weight: 600; color: var(--color-muted); margin-bottom: 3px; white-space: nowrap; }
.dash-tip__val { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; color: var(--color-primary); white-space: nowrap; }
.dash-cursor { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed color-mix(in srgb, var(--color-accent) 60%, var(--color-border)); pointer-events: none; }
.dash-cursor__dot { position: absolute; left: 0; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 3px solid var(--color-accent); transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }

/* Donut-ring met totaal in het midden */
.dash-pie { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dash-pie svg { width: auto; max-width: 100%; max-height: 130px; aspect-ratio: 1; flex: none; }
.dash-pie__tlabel { font-size: 8px; fill: var(--color-muted); }
.dash-pie__tval { font-size: 11px; font-weight: 800; fill: var(--color-primary); font-family: var(--font-heading); }
.dash-pie__legend { list-style: none; margin: 0; padding: 0; width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 5px; font-size: .8rem; }
.dash-pie__legend li { display: flex; align-items: center; gap: 7px; min-width: 0; }
.dash-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dash-pie__lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text); font-weight: 600; }
.dash-pie__pct { color: var(--color-primary); font-weight: 800; white-space: nowrap; }
.dash-pie__val { color: var(--color-muted); white-space: nowrap; font-size: .74rem; }

/* ---------- Productenoverzicht (eigenaar), SalesX-stijl ---------- */
.ptab-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.ptab-filters select { width: auto; min-height: 36px; padding: 6px 30px 6px 12px; font-size: .86rem; border-radius: 10px; }
.ptab-count { margin-left: auto; font-size: .82rem; color: var(--color-muted); white-space: nowrap; }
/* Filter-chips (bv. bestelarchief: Alles / Afgerond / Geannuleerd) */
.ptab-chip { background: var(--color-surface, #fff); border: 1px solid var(--color-border); color: var(--color-text); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; transition: .13s var(--easing); }
.ptab-chip:hover { border-color: var(--color-accent); }
.ptab-chip.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* Filterpaneel links van de tabel (zoals "Filters" in het voorbeeld) */
.ptab-wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.ptab-main { min-width: 0; }
.pfil { background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 14px; position: sticky; top: 86px; }
.pfil__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pfil__head h3 { margin: 0; font-size: .98rem; }
.pfil__clear { border: 0; background: none; color: #dc2626; font-family: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; padding: 2px 0; white-space: nowrap; }
.pfil__group { border-top: 1px solid var(--color-border); padding: 5px 0; }
.pfil__group:first-of-type { border-top: 0; }
.pfil__title { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: none; border: 0; font-family: inherit; font-size: .85rem; font-weight: 700; color: var(--color-primary); cursor: pointer; padding: 5px 0; }
.pfil__title::after { content: ""; width: 6px; height: 6px; border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted); transform: rotate(-135deg); transition: transform .15s var(--easing); margin: 3px 3px 0 0; flex: none; }
.pfil__group.is-closed .pfil__title::after { transform: rotate(45deg); margin-top: -2px; }
.pfil__group.is-closed .pfil__body { display: none; }
.pfil__opt { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .82rem; cursor: pointer; color: var(--color-text); }
.pfil__opt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfil__opt small { color: var(--color-muted); font-size: .72rem; }
.pfil__opt input[type="checkbox"] { width: 15px; height: 15px; margin: 0; flex: none; accent-color: var(--color-accent); cursor: pointer; }
.pfil__apply { display: none; width: 100%; margin-top: 12px; }
[data-f-open] { display: none; }

/* Voorraad: samenvattingskaarten (klik = snelfilter) */
.vsum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.vsum__card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 14px; font-family: inherit; cursor: pointer; text-align: left; transition: border-color .12s var(--easing), box-shadow .12s var(--easing); }
.vsum__card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.vsum__card.is-active { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent) inset; }
.vsum__num { font-family: var(--font-heading); font-weight: 800; font-size: 1.35rem; color: var(--color-primary); line-height: 1.1; }
.vsum__lbl { font-size: .74rem; color: var(--color-muted); font-weight: 600; }
.vsum__card--ok .vsum__num { color: #15803d; }
.vsum__card--warn .vsum__num { color: #a16207; }
.vsum__card--err .vsum__num { color: #b91c1c; }
@media (max-width: 640px) { .vsum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ptab-wrap { grid-template-columns: 1fr; }
  .pfil { display: none; position: static; }
  .pfil.is-open { display: block; }
  .pfil__apply { display: block; }
  [data-f-open] { display: inline-flex; }
}

.ptab tbody tr { cursor: pointer; transition: background .12s var(--easing); }
.ptab tbody tr:hover { background: color-mix(in srgb, var(--color-accent-soft) 40%, transparent); }
.ptab-prod { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ptab-prod__txt { display: flex; flex-direction: column; min-width: 0; }
.ptab-prod__txt strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26ch; }
.ptab-prod__txt small { color: var(--color-muted); font-size: .76rem; }

/* Zachte status-pills (zoals "In Stock" / "Out Of Stock" in het voorbeeld) */
.pill { display: inline-block; padding: 3px 10px; border-radius: 8px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.pill--ok { color: #15803d; background: #dcfce7; }
.pill--warn { color: #a16207; background: #fef9c3; }
.pill--err { color: #b91c1c; background: #fee2e2; }
.pill--muted { color: var(--color-muted); background: var(--color-background); border: 1px solid var(--color-border); }

.ptab-acts { white-space: nowrap; }
.ptab-acts .icon-btn { width: 30px; height: 30px; color: var(--color-muted); opacity: 0; transition: opacity .12s var(--easing), color .12s var(--easing); }
.ptab tbody tr:hover .ptab-acts .icon-btn { opacity: 1; }
.ptab-acts .icon-btn:hover { color: var(--color-primary); }
.ptab-acts .ptab-del:hover { color: #b91c1c; }
.ptab-acts .icon { width: 15px; height: 15px; }

/* ---------- Inloggen / account aanmaken (auth-pagina) ---------- */
.auth { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 220px); }
@media (min-width: 900px) { .auth { grid-template-columns: 1fr 1fr; } }

.auth__main { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 20px 56px; }
.auth__brand { margin-bottom: 26px; font-size: 1.35rem; }
.auth__title { font-size: 1.7rem; margin: 0 0 6px; text-align: center; }
.auth__sub { color: var(--color-muted); font-size: .92rem; margin: 0 0 20px; text-align: center; max-width: 40ch; }

/* Segment-schakelaar (zoals Sign In / Signup in het voorbeeld) */
.auth__tabs { display: flex; gap: 4px; padding: 4px; background: color-mix(in srgb, var(--color-border) 38%, var(--color-background)); border-radius: 999px; margin-bottom: 18px; width: 100%; max-width: 400px; }
.auth__tab { flex: 1; padding: 9px 14px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: .88rem; font-weight: 700; color: var(--color-muted); cursor: pointer; transition: background .15s var(--easing), color .15s var(--easing), box-shadow .15s var(--easing); white-space: nowrap; }
.auth__tab.is-active { background: var(--color-surface); color: var(--color-primary); box-shadow: 0 1px 4px rgba(15, 23, 42, .1); }

.auth__card { width: 100%; max-width: 400px; border-radius: 18px; box-shadow: 0 8px 30px rgba(15, 23, 42, .06); }
.auth__card .field label { font-size: .8rem; font-weight: 700; color: var(--color-primary); }
.auth__card .field input, .auth__card .addr-row input { background: color-mix(in srgb, var(--color-background) 70%, var(--color-surface)); border-radius: 12px; }
.auth__card .field input:focus, .auth__card .addr-row input:focus { background: var(--color-surface); }
.auth__submit { border-radius: 999px; }
.auth__card .btn--block { border-radius: 999px; }

/* Decoratief zijpaneel (alleen desktop) */
.auth__side { display: none; }
@media (min-width: 900px) {
  .auth__side {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    padding: 40px; text-align: center;
    background: linear-gradient(160deg, var(--color-accent-soft), color-mix(in srgb, var(--color-accent) 26%, var(--color-background)));
    border-radius: 24px; margin: 24px; overflow: hidden; position: relative;
  }
  .auth__side::before { content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: color-mix(in srgb, #ffffff 45%, transparent); filter: blur(70px); top: -80px; right: -80px; }
  .auth__side-ico { position: relative; width: 130px; height: 130px; display: grid; place-items: center; border-radius: 36px; background: color-mix(in srgb, var(--color-surface) 78%, transparent); box-shadow: 0 18px 50px color-mix(in srgb, var(--color-accent) 28%, transparent); backdrop-filter: blur(4px); color: var(--color-accent); }
  .auth__side-ico .icon { width: 68px; height: 68px; }
  .auth__side-ico img { width: 100%; height: 100%; object-fit: contain; border-radius: 36px; padding: 14px; }
  .auth__side-title { position: relative; font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: var(--color-primary); margin: 6px 0 0; }
  .auth__side-txt { position: relative; color: color-mix(in srgb, var(--color-primary) 72%, transparent); font-size: .92rem; max-width: 34ch; margin: 0; }
}

/* Onthoud mij + wachtwoord vergeten op één regel (login) */
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 14px; }
.auth__remember { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--color-muted); cursor: pointer; }
.auth__remember input { width: 15px; height: 15px; min-height: 0; padding: 0; margin: 0; accent-color: var(--color-accent); flex: none; }
.auth__forgot { background: none; border: 0; padding: 0; font: inherit; font-size: .84rem; font-weight: 700; color: var(--color-accent); cursor: pointer; }
.auth__forgot:hover { text-decoration: underline; }

/* Status-pills zijn nu klikbaar (knop-reset) */
button.pill { border: 0; font-family: inherit; cursor: pointer; }
button.pill:hover { filter: brightness(.96); }

/* ===== Mededelingen op de homepagina ===== */
.section--tight { padding-block: clamp(18px, 3vw, 34px); }
/* ===== Aankondigingen: 3 plekken, gekozen op urgentie ===== */

/* 1. Balk bovenaan, één tegelijk, op elke pagina */
.ancbar { background: var(--anc); color: #fff; font-size: .92rem; }
.ancbar__in { display: flex; align-items: center; gap: 14px; padding: 9px 0; }
.ancbar__msg { margin: 0; flex: 1; min-width: 0; color: #fff; line-height: 1.35; }
.ancbar__cta { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.ancbar__cta .icon { width: 15px; height: 15px; }
.ancbar__x { flex: none; background: none; border: 0; color: rgba(255,255,255,.75); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; }
.ancbar__x:hover { color: #fff; background: rgba(255,255,255,.15); }
.ancbar__x .icon { width: 16px; height: 16px; }
@media (max-width: 560px) { .ancbar { font-size: .85rem; } .ancbar__in { padding: 8px 0; gap: 10px; } }

/* 2. Uitgelicht, één tijdgebonden bericht onder de hero */
.ancsp { position: relative; overflow: hidden; border-radius: var(--radius-xl); color: #fff; padding: clamp(22px, 3.5vw, 40px);
  background: linear-gradient(115deg, color-mix(in srgb, var(--anc) 92%, #000), var(--anc) 60%, color-mix(in srgb, var(--anc) 74%, #fff));
  box-shadow: 0 20px 50px -24px color-mix(in srgb, var(--anc) 70%, transparent); }
.ancsp--img { display: grid; grid-template-columns: 1.3fr .85fr; gap: 24px; align-items: center; }
.ancsp__body { position: relative; min-width: 0; }
.ancsp__kicker { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28); }
.ancsp__title { color: #fff; font-size: clamp(1.4rem, 2.7vw, 2rem); margin: 12px 0 6px; line-height: 1.14; }
.ancsp__text { color: rgba(255,255,255,.88); margin: 0; max-width: 56ch; line-height: 1.55; }
.ancsp .anc-cd { margin-top: 18px; }
.ancsp .ancsp__cta { margin-top: 20px; background: #fff; color: var(--anc); border: 0; box-shadow: 0 8px 20px -6px rgba(0,0,0,.35); }
.ancsp .ancsp__cta:hover { background: #fff; filter: brightness(.94); }
.ancsp__media img, .ancsp__media .ph { width: 100%; height: 100%; min-height: 160px; max-height: 240px; object-fit: cover; border-radius: var(--radius-lg); display: block; }
@media (max-width: 720px) { .ancsp--img { grid-template-columns: 1fr; } .ancsp__media { order: -1; } }

/* Aftelklok */
.anc-cd { display: inline-flex; gap: 8px; }
.anc-cd__cell { min-width: 54px; text-align: center; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); border-radius: 10px; padding: 8px 6px; }
.anc-cd__cell span { display: block; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.anc-cd__cell small { display: block; font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; opacity: .8; margin-top: 3px; }
.anc-cd.is-done { opacity: .55; }

/* 3. Nieuwslijst, uitklapbaar, native <details>, geen JS */
.ancnw-list { margin-top: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); overflow: hidden; }
.ancnw-list__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 16px 20px 10px; }
.ancnw-list__head h2 { font-size: 1.05rem; margin: 0; }
.ancnw-list__head span { font-size: .8rem; color: var(--color-muted); }
.ancnw { border-top: 1px solid var(--color-border); }
.ancnw__head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer; list-style: none; transition: background .18s ease; }
.ancnw__head::-webkit-details-marker { display: none; }
.ancnw__head:hover { background: color-mix(in srgb, var(--anc) 4%, #fff); }
.ancnw__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--anc); flex: none; }
.ancnw__t { font-weight: 700; flex: 1; min-width: 0; }
.ancnw__date { font-size: .8rem; color: var(--color-muted); white-space: nowrap; }
.ancnw__chev { color: var(--color-muted); display: inline-flex; transition: transform .22s ease; }
.ancnw__chev .icon { width: 18px; height: 18px; }
.ancnw[open] .ancnw__chev { transform: rotate(180deg); }
.ancnw__body { padding: 0 20px 18px 40px; display: flex; flex-direction: column; gap: 12px; }
.ancnw__media img, .ancnw__media .ph { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radius-md); display: block; }
.ancnw__text { margin: 0; color: var(--color-muted); line-height: 1.6; }
.ancnw__cta { align-self: flex-start; font-weight: 700; color: var(--anc); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ancnw__cta .icon { width: 16px; height: 16px; transition: transform .2s ease; }
.ancnw__cta:hover .icon { transform: translateX(3px); }
@media (max-width: 560px) { .ancnw__body { padding-left: 20px; } .ancnw__date { display: none; } }

/* Gekoppelde producten (in uitgelicht + nieuws) */
.anc-prods { display: flex; flex-wrap: wrap; gap: 8px; }
.anc-prod { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 6px 13px 6px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--anc) 8%, #fff); border: 1px solid color-mix(in srgb, var(--anc) 22%, transparent); transition: transform .2s ease, background .2s ease; }
.anc-prod:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--anc) 15%, #fff); }
.anc-prod__img { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--color-background); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.anc-prod__img img { width: 100%; height: 100%; object-fit: cover; }
.anc-prod__img .icon { width: 15px; height: 15px; color: var(--color-muted); }
.anc-prod__info { display: flex; flex-direction: column; line-height: 1.18; }
.anc-prod__info strong { font-size: .82rem; color: var(--color-text); }
.anc-prod__price { font-size: .76rem; color: var(--anc); font-weight: 700; }
.anc-prod__price s { color: var(--color-muted); font-weight: 400; }
.ancsp .anc-prods { margin-top: 18px; }
.ancsp .anc-prod { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
.ancsp .anc-prod:hover { background: rgba(255,255,255,.27); }
.ancsp .anc-prod__info strong { color: #fff; }
.ancsp .anc-prod__price { color: rgba(255,255,255,.9); }
.ancsp .anc-prod__price s { color: rgba(255,255,255,.6); }
/* ===== Sluitings-/vakantiebalk (site-breed) ===== */
.closure-bar { font-size: .92rem; line-height: 1.4; }
.closure-bar__inner { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.closure-bar__ico { font-size: 1.05rem; flex: none; }
.closure-bar.is-closed { background: #b3402f; color: #fff; }
.closure-bar.is-closed strong { color: #fff; }
.closure-bar.is-soon { background: #fdf2d8; color: #7a5b12; border-bottom: 1px solid #f0dfae; }
.closure-bar.is-soon strong { color: #5c440b; }

/* ===== Eigenaar: gedeelde velden (foto-kiezer, toggles, sluitingsdagen) ===== */
.med-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.med-toggle input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--color-accent); }
.med-row__imgbtns { display: inline-flex; align-items: center; gap: 8px; }
.med-thumb { position: relative; width: 54px; height: 40px; }
.med-thumb img { width: 54px; height: 40px; object-fit: cover; border-radius: 6px; display: block; }
.med-thumb__x { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #b3402f; color: #fff; font-size: .7rem; line-height: 1; cursor: pointer; }
.med-clos { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 14px 12px; margin-bottom: 12px; }
.clos-color { display: flex; align-items: center; gap: 8px; }
.clos-color input[type="color"] { width: 42px; height: 38px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: none; cursor: pointer; flex: none; }
.clos-color input[type="text"] { flex: 1; text-transform: uppercase; }
.eig-hint { display: block; font-size: .78rem; color: var(--color-muted); margin-top: 4px; }

/* ===== Eigenaar: aankondigingen ===== */
.anc-note { font-size: .85rem; color: var(--color-text); background: var(--color-accent-soft);
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent); border-radius: var(--radius-md); padding: 9px 12px; margin: 0 0 16px; }
.anc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-bottom: 20px; }
.anc-stat { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.anc-stat__ico { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 9px; background: var(--color-accent-soft); color: var(--color-accent); flex: none; }
.anc-stat__ico .icon { width: 18px; height: 18px; }
.anc-stat > div { min-width: 0; }
.anc-stat strong { display: block; font-size: 1.2rem; font-family: var(--font-heading); line-height: 1.1; }
.anc-stat span { font-size: .76rem; color: var(--color-muted); }

/* Plek-kiezer met mini-wireframe */
.srf-h { font-size: 1rem; margin: 0 0 12px; }
.srf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.srf { text-align: left; cursor: pointer; font: inherit; padding: 14px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface);
  display: flex; flex-direction: column; gap: 3px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.srf:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--anc) 55%, var(--color-border)); box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--anc) 60%, transparent); }
.srf__art { position: relative; display: block; height: 62px; border-radius: 8px; background: var(--color-background); border: 1px solid var(--color-border); overflow: hidden; margin-bottom: 9px; }
.srf__art i { position: absolute; border-radius: 2px; display: block; }
.srf__name { font-weight: 700; font-size: .95rem; }
.srf__hint { font-size: .78rem; color: var(--color-muted); line-height: 1.4; }

/* Segmented control + toon-pillen + starters */
.segmented { display: inline-flex; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 999px; padding: 3px; flex-wrap: wrap; }
.segbtn { font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; border: 0; background: none; color: var(--color-muted); padding: 7px 14px; border-radius: 999px; }
.segbtn.is-on { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.tonepills { display: flex; gap: 7px; flex-wrap: wrap; }
.tonepill { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; padding: 7px 13px; border-radius: 999px;
  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-muted); }
.tonepill i { width: 12px; height: 12px; border-radius: 50%; background: var(--anc); display: inline-block; }
.tonepill.is-on { border-color: var(--anc); color: var(--color-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--anc) 14%, transparent); }
.tonecustom { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-background); }
.tonecustom__row { display: flex; align-items: center; gap: 10px; }
.tonecustom label { font-size: .82rem; color: var(--color-muted); margin: 0; }
.tonecustom input[type="color"] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--color-border); border-radius: 6px; background: none; cursor: pointer; min-height: 0; flex: none; }
.tonecustom__hex { width: 106px; flex: none; min-height: 0; height: 32px; padding: 0 8px; font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text); }
.tonecustom__hex:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent); }
.tonecustom__hex.is-bad { border-color: #b91c1c; box-shadow: 0 0 0 3px color-mix(in srgb, #b91c1c 14%, transparent); }
.tonecustom__swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.swatch { width: 24px; height: 24px; padding: 0; border: 1px solid color-mix(in srgb, var(--anc) 55%, transparent); border-radius: 50%; background: var(--anc); cursor: pointer; min-height: 0; transition: transform .12s ease, box-shadow .12s ease; }
.swatch:hover { transform: scale(1.12); }
.swatch.is-on { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--anc); }
.tonecustom .hint { display: block; margin-top: 8px; }
.tonecustom .hint:empty { display: none; }
.tonecustom[hidden] { display: none; }
.starters { display: flex; flex-wrap: wrap; gap: 7px; }
.starter { font: inherit; font-size: .8rem; cursor: pointer; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--color-border-strong); background: none; color: var(--color-text); }
.starter:hover { border-style: solid; border-color: var(--color-accent); color: var(--color-accent); }
.hint.is-warn { color: #b45309; font-weight: 600; }

/* Lijst */
.anc-chip { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; color: #fff; background: var(--anc); padding: 3px 9px; border-radius: 999px; }
.anc-table td { vertical-align: middle; }
.anc-actions { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* Editor met live voorbeeld */
.eig-modal__card:has(.anc-editor) { max-width: 960px; width: 100%; }
.anc-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.anc-editor__form { min-width: 0; }
.anc-editor__preview { position: sticky; top: 8px; }
.anc-editor__ptop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.anc-editor__plabel { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.pvtoggle { display: inline-flex; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 999px; padding: 2px; }
.pvtoggle button { font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; border: 0; background: none; color: var(--color-muted); padding: 5px 12px; border-radius: 999px; }
.pvtoggle button.is-on { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.anc-preview { background: var(--color-background); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); padding: 16px; }
.anc-preview.is-mobile { max-width: 390px; margin-inline: auto; }
.anc-preview .ancnw-list { margin-top: 0; }
.anc-editor__phint { font-size: .76rem; color: var(--color-muted); margin: 8px 0 0; text-align: center; }
.anc-toggles { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
/* .field en .med-toggle zetten zelf display, dus [hidden] moet dat expliciet overrulen
   (anders blijven de niet-relevante velden per plek gewoon zichtbaar). */
.field[hidden], .med-toggle[hidden] { display: none; }
.anc-picked { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.anc-pick { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; padding: 4px 8px 4px 4px; border-radius: 999px; background: var(--color-background); border: 1px solid var(--color-border); }
.anc-pick img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.anc-pick button { border: 0; background: none; cursor: pointer; color: var(--color-muted); font-size: .8rem; padding: 0 2px; }
.anc-pick button:hover { color: #b3402f; }

/* Eigenaar bekijkt de inlogpagina vanuit beheer */
.auth-prevbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--color-primary); color: #fff; padding: 10px clamp(14px, 3vw, 28px); font-size: .9rem; }
.auth-prevbar strong { color: #fff; }
.auth-prevbar .icon { width: 17px; height: 17px; vertical-align: -3px; }
.auth-prevbar .btn { border-color: rgba(255,255,255,.5); color: #fff; }
.auth-prevbar .btn:hover { background: rgba(255,255,255,.14); }

/* Uitleg bij een placeholder (zweven met de muis) */
.ph-tip { position: fixed; z-index: 90; max-width: 320px; background: var(--color-primary); color: #fff;
  border-radius: var(--radius-md); padding: 11px 13px; box-shadow: var(--shadow-lg); font-size: .85rem; pointer-events: none; }
.ph-tip[hidden] { display: none; }
.ph-tip strong { display: block; color: #fff; font-family: var(--font-body); font-size: .82rem; margin-bottom: 4px; }
.ph-tip p { margin: 0 0 8px; color: rgba(255,255,255,.82); line-height: 1.45; font-size: .82rem; }
.ph-tip__lbl { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.55); margin-bottom: 3px; }
.ph-tip code { display: block; white-space: pre-wrap; word-break: break-word; font-size: .78rem; color: #ffd9d9;
  background: rgba(255,255,255,.1); border-radius: 6px; padding: 6px 8px; }

/* Voorbeeldweergave van een e-mail */
.mailpv__note { color: var(--color-muted); font-size: .88rem; margin: 0 0 14px; }
.mailpv__sub { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; background: var(--color-background);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 14px; }
.mailpv__sub span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); flex: none; }
.mailpv__frame { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; background: #fff; overflow-x: auto; }
.mailpv__text { margin: 0; padding: 16px; white-space: pre-wrap; word-break: break-word; font-family: var(--font-body);
  font-size: .9rem; line-height: 1.6; color: var(--color-text); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); }

/* Lege staat */
.anc-empty { text-align: center; padding: 34px 20px; border: 1px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); margin-top: 22px; }
.anc-empty .icon { width: 34px; height: 34px; color: var(--color-muted); opacity: .55; }
.anc-empty h3 { margin: 10px 0 4px; font-size: 1.05rem; }
.anc-empty p { margin: 0 auto; max-width: 42ch; color: var(--color-muted); font-size: .9rem; }
@media (max-width: 780px) { .anc-editor { grid-template-columns: 1fr; } .anc-editor__preview { position: static; } }
/* ==== assets/css/mobile.css ==== */
/* mobile.css: App-achtige mobiele laag (≤767px). Desktop blijft onaangeroerd.
   Onderdelen: onderste tabbalk, bottom-sheets, sticky koopbalk, touch-vriendelijke maten. */

@media (max-width: 767px) {

  /* ---------- Ruimte voor de vaste tabbalk ---------- */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  /* ---------- Header: compact, hamburger weg (tabs dekken het menu) ---------- */
  .nav-toggle { display: none; }
  .site-header__inner { gap: var(--space-1); }
  /* 4 pictogrammen (zoeken · hulp · account · winkelwagen) compact naast elkaar */
  .nav-actions { gap: 0; }
  .nav-actions .icon-btn { width: 40px; height: 40px; }
  .nav-actions .icon-btn .icon { width: 21px; height: 21px; }
  .brand { max-width: 52vw; }
  /* Eigenaar-knop (alleen zichtbaar voor ingelogde eigenaar) als pil in de header */
  .nav-actions .nav-owner-pill {
    display: inline-flex; align-items: center;
    background: var(--color-accent); color: #fff;
    font-size: .78rem; font-weight: 600;
    padding: 6px 10px; border-radius: 999px; text-decoration: none;
  }

  /* Categoriekaarten: vak in dezelfde verhouding als de geüploade foto (3:4) */
  .category-card { aspect-ratio: 3 / 4; }

  /* ---------- Onderste tabbalk ---------- */
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    display: flex;
    z-index: var(--z-header);
  }
  .tabbar__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; text-decoration: none; color: var(--color-muted);
    font-size: .64rem; font-weight: 500; line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar__item svg { width: 22px; height: 22px; }
  .tabbar__item.is-active { color: var(--color-accent); font-weight: 700; }
  .tabbar__item:active { color: var(--color-accent); }

  /* ---------- Bottom sheet (generiek) ---------- */
  .msheet {
    position: fixed; inset: 0; z-index: var(--z-drawer);
    background: rgba(17, 17, 17, .45);
    display: flex; align-items: flex-end;
    animation: msheet-fade var(--transition-speed) var(--easing);
  }
  .msheet__panel {
    width: 100%; max-height: 82vh; overflow-y: auto;
    background: var(--color-surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-3) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    animation: msheet-up 260ms var(--easing);
  }
  .msheet__handle {
    width: 42px; height: 4px; border-radius: 3px;
    background: var(--color-border-strong);
    margin: 0 auto var(--space-3);
  }
  .msheet__title {
    font-family: var(--font-heading); font-size: 1.05rem;
    margin: 0 0 var(--space-3);
  }
  .msheet.is-closing { animation: msheet-fade-out 180ms var(--easing) forwards; }
  .msheet.is-closing .msheet__panel { animation: msheet-down 180ms var(--easing) forwards; }
  @keyframes msheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @keyframes msheet-down { from { transform: translateY(0); } to { transform: translateY(100%); } }
  @keyframes msheet-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes msheet-fade-out { from { opacity: 1; } to { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .msheet, .msheet__panel, .msheet.is-closing, .msheet.is-closing .msheet__panel { animation: none; }
  }

  /* Bestaande modals (portie-keuze, voorwaarden) gedragen zich als sheet op mobiel */
  .portie-modal { display: flex; align-items: flex-end; padding: 0; }
  .portie-modal__card {
    width: 100%; max-width: none; max-height: 82vh; overflow-y: auto;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    animation: msheet-up 260ms var(--easing);
  }

  /* ---------- Productpagina: sticky koopbalk ---------- */
  .mbuy {
    position: fixed; left: 0; right: 0;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
    z-index: var(--z-header);
  }
  /* Aparte pre-order-knop: volle breedte op een tweede regel. */
  .mbuy__pre {
    flex: 1 1 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--color-accent-soft); color: var(--color-accent);
    border: 1.5px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
    border-radius: var(--radius-md);
    padding: 11px var(--space-3);
    font: inherit; font-size: .88rem; font-weight: 700;
    -webkit-tap-highlight-color: transparent;
  }
  .mbuy__pre:active { background: color-mix(in srgb, var(--color-accent-soft) 70%, var(--color-accent)); }
  .mbuy__pre svg { width: 18px; height: 18px; }
  .mbuy__portie {
    flex: 1; min-width: 0;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 10px var(--space-3);
    background: var(--color-surface);
    font: inherit; font-size: .82rem; text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  .mbuy__portie-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: block; min-width: 0;
  }
  .mbuy__portie small { display: block; color: var(--color-muted); font-size: .68rem; }
  .mbuy__portie svg { width: 16px; height: 16px; flex: none; color: var(--color-muted); }
  .mbuy__add {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    background: var(--color-accent); color: #fff; border: 0;
    border-radius: var(--radius-md); padding: 12px var(--space-4);
    font: inherit; font-size: .9rem; font-weight: 700;
    -webkit-tap-highlight-color: transparent;
  }
  .mbuy__add:disabled { background: var(--color-border-strong); }
  .mbuy__add svg { width: 18px; height: 18px; }
  .mbuy__qty {
    flex: none; display: inline-flex; align-items: center; gap: 2px;
    border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md);
    padding: 2px;
  }
  .mbuy__qbtn {
    width: 32px; height: 32px; border: 0; background: none; border-radius: var(--radius-sm);
    display: grid; place-items: center; color: var(--color-primary);
    -webkit-tap-highlight-color: transparent;
  }
  .mbuy__qbtn:disabled { color: var(--color-border-strong); }
  .mbuy__qbtn svg { width: 16px; height: 16px; }
  .mbuy__qn { width: 34px; min-width: 34px; text-align: center; font-weight: 700; font-size: .9rem; border: 0; background: none; font-family: inherit; color: inherit; padding: 2px 0; -moz-appearance: textfield; }
  .mbuy__qn::-webkit-outer-spin-button, .mbuy__qn::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .mbuy__qn:focus { outline: none; }
  /* De desktop-koopregel + losse pre-order-knop verdwijnen; de sticky balk neemt het over */
  body[data-page="product"] .buy-row,
  body[data-page="product"] .buy-preorder { display: none; }
  body[data-page="product"] { padding-bottom: calc(64px + 66px + env(safe-area-inset-bottom, 0px)); }

  /* Portie-rijen in de keuze-sheet */
  .msheet__opt {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md);
    background: var(--color-surface); padding: var(--space-3);
    font: inherit; font-size: .88rem; text-align: left;
    margin-bottom: var(--space-2);
    -webkit-tap-highlight-color: transparent;
  }
  .msheet__opt.is-active {
    border-color: var(--color-accent); border-width: 2px;
    background: var(--color-accent-soft); font-weight: 600;
  }
  .msheet__opt.is-sold { opacity: .5; }
  .msheet__opt-price { color: var(--color-accent); font-weight: 700; white-space: nowrap; }
  .msheet__opt-price .price-old { color: var(--color-muted); font-weight: 400; text-decoration: line-through; margin-right: 6px; font-size: .8rem; }

  /* ---------- Checkout: compacte voortgangsbalk + full-width stappen ---------- */
  .stepper { flex-wrap: nowrap; justify-content: space-between; gap: var(--space-1); margin-bottom: var(--space-4); }
  .stepper__item { flex: 1; min-width: 0; flex-direction: column; gap: 5px; font-size: .62rem; text-align: center; }
  .stepper__label { display: none; }
  .stepper__item.is-active .stepper__label { display: block; color: var(--color-accent); font-weight: 700; }
  .checkout-layout { gap: var(--space-4); }
  .checkout-card { padding: var(--space-4); }
  .order-summary { position: static; }

  /* ---------- Algemene touch-verbeteringen ---------- */
  .btn { min-height: 44px; }
  .product-card__save { width: 40px; height: 40px; }
  .site-footer { padding-bottom: var(--space-5); }
  /* 16px voorkomt dat iOS inzoomt bij focus op invoervelden (account, checkout, beheer) */
  input, select, textarea { font-size: 16px; }
  .account-card { padding: var(--space-4); }

  /* Hulp/WhatsApp-knop boven de tabbalk; pop-up als bottom-sheet */
  .wa-fab { right: 16px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
  /* Op de productpagina staat de vaste koopbalk onderin, knop verbergen zodat die niet overlapt */
  body[data-page="product"] .wa-fab { display: none; }
  .wa-pop { align-items: flex-end; justify-content: center; }
  .wa-pop::before { background: rgba(17, 17, 17, .4); }
  .wa-pop__card { width: 100%; max-width: none; margin: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-4) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); animation: msheet-up 260ms var(--easing); }
}

/* De Eigenaar-pil bestaat alleen op mobiel; desktop heeft de gewone menulink. */
@media (min-width: 768px) {
  .nav-owner-pill { display: none; }
}