/* Kopletter: Figtree (variabel, OFL) — zelf gehost, geen externe CDN (§7).
   Geometrisch-humanistisch met hoge x-hoogte: het dichtstbijzijnde vrij te
   gebruiken alternatief voor PIE's eigen JET Sans Digital. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/figtree-latin-var.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Koplettertype: Fraunces (variabel, OFL) — zelf gehost, geen externe CDN (§7).
   Zacht en licht eigenzinnig; geeft de koppen karakter naast de neutrale
   systeemstack voor lopende tekst en interface. */

/* ============================================================
   Broodje Bram 2026 — designtokens (PIE-vormtaal, briefing §3)
   + globale basis: topbar, generieke pagina's.
   Bestelpagina-specifiek: bestellen.css.
   ============================================================ */

:root {
  color-scheme: light;

  /* Neutralen: exact uit pie-design-tokens (truffle-palet) */
  --page: #fdfdfb;          /* background-default (truffle-5); bestelpagina zet #fff */
  --surface: #f6f3ef;       /* container-subtle (truffle-10) */
  --surface-strong: #f0ece6;/* container-strong (truffle-20) */
  --line: #f0ece6;          /* border-default (truffle-20) */
  --line-strong: #e7e2da;   /* border-strong (truffle-30) */
  --border-form: #8c867e;   /* border-form (truffle-65) — formuliervelden */
  --ink: #2b2a28;           /* container-inverse / interactive-primary (truffle-90) */

  /* Content-tokens (alpha op zwart, exact PIE) */
  --text: rgba(0, 0, 0, 0.76);            /* content-default */
  --text-muted: rgba(0, 0, 0, 0.64);      /* content-subdued */
  --text-placeholder: rgba(0, 0, 0, 0.55);/* content-placeholder */
  --text-disabled: rgba(0, 0, 0, 0.30);   /* content-disabled */
  --text-inverse: rgba(255, 255, 255, 0.9);/* content-inverse */
  --divider: rgba(0, 0, 0, 0.08);         /* divider-default */
  --overlay: rgba(0, 0, 0, 0.55);         /* overlay */
  --ink-2: rgba(0, 0, 0, 0.64);
  --muted: rgba(0, 0, 0, 0.55);

  /* Brand vs product-kleur (§3): brand nooit als knopkleur */
  --brand: #80BA00;
  --lime: #C1D72E;
  --product: #567f00;       /* interactie-groen, 4,6:1 op wit */
  --product-dk: #486a00;    /* hover: HSL-verdonkering */
  --tonal: #eef4d9;
  --sky: #c1dade;           /* achtergrond-accent (directief Mark, 8 aug) */
  --sky-soft: #e2eef0;      /* lichte variant voor subtiele vlakken */
  --jet-orange: #f36805;    /* JET-orange: ALLEEN voor specifieke accenten, nooit vlakken */
  --yellow: #ffde33;        /* NIET voor achtergronden (directief Mark, 8 aug) */

  /* Elevation: exact PIE box-shadow-a (kaarten) en -b (modals/verheven) */
  --card-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.01), 0 2px 12px 0 rgba(0, 0, 0, 0.03), 0 2px 6px 2px rgba(0, 0, 0, 0.02);
  --shadow-b: 0 4px 6px 0 rgba(0, 0, 0, 0.02), 0 2px 12px 2px rgba(0, 0, 0, 0.04), 0 3px 4px 0 rgba(0, 0, 0, 0.04);
  --btn-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);

  /* Radius: alias-tokens (rounded-c/d/e) — kaarten 12, sheets 16, pill 50rem */
  --pill: 50rem;
  --r-input: 12px;
  --r-card: 12px;
  --r-sheet: 16px;

  --focus-ring: 0 0 0 2px #fff, 0 0 0 4px #2b3e97;

  --font: -apple-system, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  /* Koppen: JET Sans Digital als het ooit gelicentieerd wordt, anders Figtree */
  --font-display: 'JET Sans Digital', 'Figtree', -apple-system, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--page);
  /* PIE: lopende tekst via opacity-token, koppen in solid ink */
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-display); letter-spacing: -0.005em; }
h1, h2 { text-wrap: balance; }
/* Browservlakken die niemand tekent maar iedereen ziet: selectie en
   formulier-accenten horen bij het palet, niet bij de browserstandaard. */
::selection { background: var(--tonal); color: var(--ink); }
html { accent-color: var(--product); }
/* Interface blijft in de systeemstack: knoppen, labels en kleine kopjes */
.co-card-title, .bbt-label,
.sf-col h3, .navdrop-menu b { font-family: var(--font); }
.btn-primary, .btn-dark, .btn-ghost { font-family: var(--font-display); }

/* Iconen erven de tekstkleur (PIE line-icons) */
.bb-ic { display: inline-block; vertical-align: -3px; flex: none; }
button { font: inherit; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; }
h1, h2, h3 { margin: 0; }
img { max-width: 100%; height: auto; }
.num { font-variant-numeric: tabular-nums; }
:is(button, input, a, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ===== Topbar: volwaardige navigatie ===== */
.topbar {
  background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto; height: 68px; padding: 0 20px;
  display: flex; align-items: center; gap: 28px;
}
.topbar .brand {
  display: flex; align-items: center; gap: 10px; flex: none;
  font-weight: 800; font-size: 17px; color: var(--ink); text-decoration: none;
}
.topbar .brand svg { height: 28px; width: auto; display: block; }
.brand-tag {
  font-style: normal; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--product);
  background: var(--tonal); border-radius: var(--pill); padding: 4px 10px; margin-left: 2px;
}

.mainnav { display: flex; align-items: center; gap: 4px; flex: 1; }
.mainnav > a, .navdrop-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 14px; border: none; background: none; border-radius: var(--pill);
  font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; cursor: pointer;
}
.mainnav > a:hover, .navdrop-btn:hover { background: var(--surface); }
.mainnav > a.current { color: var(--product); }

.navdrop { position: relative; }
.navdrop-menu {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 40; width: 320px; padding: 8px;
  background: #fff; border-radius: var(--r-sheet); box-shadow: var(--shadow-b);
}
.navdrop-menu[hidden] { display: none; }
/* Onzichtbare brug over de 8px tussen knop en menu. Zonder deze strook
   verlaat de muis onderweg naar het menu even de .navdrop-wrapper, en sloot
   het menu zich precies terwijl je er naartoe bewoog. */
.navdrop-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.navdrop-menu a {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 14px; border-radius: var(--r-input); text-decoration: none;
}
.navdrop-menu a:hover { background: var(--surface); }
.navdrop-ic {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--tonal); color: var(--product);
}
.navdrop-txt { flex: 1; min-width: 0; }
.navdrop-menu b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.navdrop-menu .navdrop-txt span { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }

.topbar-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.topbar-login { font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; padding: 9px 6px; }
.topbar-login:hover { text-decoration: underline; }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.topbar .burger {
  display: none; border: none; background: none; color: var(--ink); padding: 8px; cursor: pointer;
}

@media (max-width: 900px) {
  .topbar-inner { height: 60px; gap: 12px; }
  .mainnav, .topbar-login { display: none; }
  .topbar .burger { display: inline-flex; }
  .brand-tag { display: none; }
}
/* Smalle telefoons: logo, bestelknop en menuknop pasten niet naast elkaar
   (op 390px liep de menuknop 18px buiten beeld). Eerst ruimte winnen, en
   onder 380px de merknaam alleen voor schermlezers laten staan. */
@media (max-width: 440px) {
  .topbar-inner { padding: 0 14px; gap: 8px; }
  .topbar .brand { gap: 8px; }
  .topbar .brand span { font-size: 15px; }
  .topbar-actions { gap: 2px; }
  .topbar-actions .btn-sm { padding: 9px 14px; }
}
@media (max-width: 380px) {
  .topbar .brand span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

.site-menu { background: #fff; border-bottom: 1px solid var(--line); padding: 10px 20px; }
.site-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.site-menu a {
  display: block; padding: 12px 14px; border-radius: var(--r-input);
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px;
}
.site-menu a:hover { background: var(--surface); }

/* ===== Generieke pagina's (fase 1 minimaal, PIE-stijl) ===== */
.page-wrap { max-width: 760px; margin: 0 auto; padding: 40px 20px 80px; }
.page-wrap h1 { font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 18px; }
.page-wrap h2 { font-size: 24px; line-height: 28px; font-weight: 800; margin: 28px 0 10px; }
.page-wrap p, .page-wrap li { font-size: 16px; line-height: 24px; color: var(--text); }
.page-wrap a { color: var(--product); font-weight: 700; }

/* ===== Knoppen ===== */
.btn-primary, .btn-dark, .btn-ghost {
  display: inline-block; border: none; border-radius: var(--pill); text-decoration: none;
  font-size: 15px; font-weight: 800; padding: 14px 26px; cursor: pointer;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn-primary:hover, .btn-dark:hover, .btn-ghost:hover { transform: translateY(-1px); }
.btn-primary:active, .btn-dark:active, .btn-ghost:active { transform: translateY(0); }
.btn-primary:hover { box-shadow: 0 6px 16px rgba(86, 127, 0, 0.28); }
/* a-selector meegenomen zodat .page-wrap a de knopkleur niet overschrijft */
.btn-primary, .btn-dark, .btn-ghost { font-weight: 800; } /* interactive-s = extrabold */
.btn-primary, a.btn-primary { background: var(--product); color: #fff; }
.btn-primary:hover { background: var(--product-dk); }
.btn-dark, a.btn-dark { background: var(--ink); color: var(--text-inverse); }
.btn-dark:hover { background: #000; }
.btn-ghost, a.btn-ghost { background: #fff; color: var(--ink); box-shadow: var(--btn-shadow); }
.btn-ghost:hover { background: var(--surface); }

/* ===== Homepage ===== */
.home-hero { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; background: var(--ink); }
.home-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Twee lagen: leesbaarheid links, en een voet die de video in de pagina laat
   landen in plaats van hem hard af te snijden. */
.home-hero-scrim { position: absolute; inset: 0; background:
  linear-gradient(100deg, rgba(20, 22, 20, 0.74) 18%, rgba(20, 22, 20, 0.22) 72%),
  linear-gradient(to top, rgba(20, 22, 20, 0.45), transparent 34%); }
.home-hero-inner { position: relative; max-width: 1080px; width: 100%; margin: 0 auto; padding: 84px 20px; color: #fff; }
.home-hero h1 {
  font-size: clamp(42px, 6.4vw, 68px); line-height: 1.02; font-weight: 800;
  letter-spacing: -0.025em; color: #fff; max-width: 16ch;
}
@media (max-width: 640px) { .home-hero { min-height: 440px; } .home-hero-inner { padding: 56px 20px; } }
.home-hero p { max-width: 560px; font-size: 17px; line-height: 26px; margin: 18px 0 28px; color: rgba(255, 255, 255, 0.94); }
.home-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.usps { background: var(--surface); }
.usps-inner {
  max-width: 1080px; margin: 0 auto; padding: 26px 20px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px;
}
.usp { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; font-weight: 700; }
.usp-ic { display: flex; color: var(--product); }

.home-split-inner {
  max-width: 1080px; margin: 0 auto; padding: 40px 20px 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
@media (max-width: 800px) { .home-split-inner { grid-template-columns: 1fr; } }
.home-card { background: #fff; border-radius: var(--r-card); box-shadow: var(--card-shadow); padding: 26px; }
.home-card h2 { font-size: 20px; font-weight: 800; margin: 0 0 12px; }
.home-card h2 + .hours + h2 { margin-top: 22px; }
.home-card-img { padding: 0; overflow: hidden; display: flex; }
.home-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-card-note { font-size: 14px; color: var(--text-muted); margin-top: 18px; }
.home-card-note a, .home-card a { color: var(--product); font-weight: 700; }

dl.hours { margin: 0 0 8px; }
dl.hours div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
dl.hours div:last-child { border-bottom: none; }
dl.hours dt { font-weight: 700; color: var(--text); margin: 0; }
dl.hours dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.hours-inline { max-width: 380px; }

/* ===== Restaurant-sectie (70 zitplaatsen) ===== */
.resto-band { background: var(--ink); color: var(--text-inverse); margin-top: 48px; overflow: hidden; }
.resto-inner {
  max-width: 1080px; margin: 0 auto; padding: 56px 20px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center;
}
@media (max-width: 860px) { .resto-inner { grid-template-columns: 1fr; padding: 40px 20px; } }
.resto-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin-bottom: 10px;
}
.resto-txt h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.06; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 14px; color: #fff; }
.resto-txt p { font-size: 15px; line-height: 23px; color: rgba(255, 255, 255, 0.82); margin: 0 0 22px; }
.resto-txt p b { color: #fff; }
.resto-facts { display: flex; gap: 30px; margin-bottom: 26px; }
.resto-facts b { display: block; font-size: 32px; line-height: 36px; font-weight: 800; color: var(--lime); font-variant-numeric: tabular-nums; }
.resto-facts span { font-size: 12.5px; color: rgba(255, 255, 255, 0.7); }
.resto-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.resto-foto { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-card); display: block; }
.resto-foto-0 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.resto-foto-1, .resto-foto-2 { aspect-ratio: 4 / 3; }

/* ===== Reviews ===== */
.reviews-band { background: var(--surface); }
.reviews-inner { max-width: 1080px; margin: 0 auto; padding: 44px 20px; }
.sec-reviews-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.sec-reviews-head h2 { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.1; letter-spacing: -0.015em; font-weight: 800; margin: 0; }
.reviews-avg { font-size: 14.5px; font-weight: 800; }
.reviews-avg .star { color: var(--product); }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.review-card { background: #fff; border-radius: var(--r-card); box-shadow: var(--card-shadow); margin: 0; }
.review-stars { color: var(--product); font-size: 15px; letter-spacing: 2px; }
.review-card { padding: 24px; }
.review-card blockquote { margin: 12px 0 14px; font-size: 15.5px; line-height: 23px; color: var(--text); }
.review-card figcaption { font-size: 13px; font-weight: 700; }
.review-card figcaption span { color: var(--text-muted); font-weight: 400; }

/* Over-ons galerij */
.resto-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 26px; }
@media (max-width: 640px) { .resto-gallery { grid-template-columns: 1fr; } }
.resto-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--card-shadow); display: block; }

/* Motion: begintoestand vóór reveal (alleen met JS + zonder reduced-motion) */
.gs-pre { opacity: 0; }

/* Zakelijke band: tekst + beeld met zwevende feitenkaart */
/* Lichte sky in plaats van de volle tint: op #c1dade haalde het groene kopje
   maar 3,2:1 en dat is onder de norm. Op #e2eef0 leest alles rustiger, en het
   is dezelfde tint als de zijbalk van het mandje — dus één blauw in de site. */
.biz-banner { background: var(--sky-soft); margin-top: 56px; overflow: hidden; }
/* Het kopje staat op een gekleurd vlak; product-groen komt daar niet aan de
   4,5:1. De donkere variant wel (5,3:1). */
.biz-banner .resto-eyebrow, .biz-banner .resto-eyebrow-dark { color: var(--product-dk); }
.bizp .biz-banner { margin-top: 0; }
.biz-banner-inner {
  max-width: 1080px; margin: 0 auto; padding: 56px 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
@media (max-width: 860px) { .biz-banner-inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px; } }
.biz-banner h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.06; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; }
@media (max-width: 640px) { .biz-banner h2 { font-size: 24px; line-height: 28px; } }
.biz-banner p { margin: 0 0 18px; font-size: 16px; line-height: 24px; color: var(--text); }
.biz-checks { list-style: none; margin: 0 0 24px; padding: 0; }
.biz-checks li {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  font-size: 15px; line-height: 21px; font-weight: 700;
}
.biz-checks .bb-ic { color: var(--product); }
.biz-banner-media { position: relative; }
.biz-banner-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-sheet); box-shadow: var(--shadow-b); display: block;
}
.biz-float {
  position: absolute; right: -8px; bottom: -18px; max-width: 230px;
  background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-b); padding: 16px 18px;
}
@media (max-width: 860px) { .biz-float { right: 12px; bottom: -14px; } }
.biz-float b { display: block; font-size: 26px; line-height: 30px; font-weight: 800; color: var(--product); }
.biz-float span { font-size: 12.5px; line-height: 17px; color: var(--text-muted); }

/* ===== Contentpagina's ===== */
.page-wide { max-width: 1080px; }
.page-wrap .lead { font-size: 17px; line-height: 26px; }
.page-photo { border-radius: var(--r-card); box-shadow: var(--card-shadow); margin: 18px 0; display: block; }

.table-scroll { overflow-x: auto; margin: 14px 0 6px; }
.zones-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: #fff; border-radius: var(--r-card); box-shadow: var(--card-shadow); overflow: hidden; }
.zones-table th, .zones-table td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.zones-table thead th { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--surface); border-bottom: none; }
.zones-table tbody tr:last-child td { border-bottom: none; }
.table-note { font-size: 13px; color: var(--text-muted); }

.biz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0 8px; }
@media (max-width: 700px) { .biz-grid { grid-template-columns: 1fr; } }
.biz-card { background: #fff; border-radius: var(--r-card); box-shadow: var(--card-shadow); padding: 22px; }
.biz-card h2 { font-size: 16px; line-height: 21px; font-weight: 800; margin: 0 0 8px; display: flex; align-items: center; gap: 9px; }
.biz-ic { display: flex; color: var(--product); }
.biz-card p { font-size: 14px; line-height: 21px; color: var(--text-muted); margin: 0; }

.biz-steps { padding-left: 20px; }
.biz-steps li { margin: 8px 0; }

.biz-form { background: var(--surface); border-radius: var(--r-sheet); padding: 26px; margin-top: 30px; }
.biz-form h2 { margin-top: 0 !important; }
.biz-form .wpcf7 input:not([type="submit"]), .biz-form .wpcf7 textarea {
  width: 100%; border: 1px solid var(--border-form); border-radius: var(--r-input); padding: 12px 14px; font-size: 15px; background: #fff;
}
.biz-form .wpcf7 label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 12px 0 4px; }
.biz-form .wpcf7 input[type="submit"] {
  border: none; border-radius: var(--pill); background: var(--product); color: #fff;
  font-size: 15px; font-weight: 800; padding: 14px 26px; margin-top: 14px; cursor: pointer;
}
.biz-form .wpcf7 input[type="submit"]:hover { background: var(--product-dk); }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } }

/* ===== Voor bedrijven: lichte, luchtige hero (TB-model) ===== */
.bizp-hero { background: var(--surface); padding: 64px 20px 56px; text-align: center; }
.bizp-hero-inner { max-width: 760px; margin: 0 auto; }
.bizp-hero h1 {
  font-size: clamp(38px, 5.6vw, 60px); line-height: 1.04; font-weight: 800; letter-spacing: -0.025em;
  margin: 0 0 18px; color: var(--ink);
}
@media (max-width: 640px) { .bizp-hero { padding-top: 44px; } .bizp-hero h1 { font-size: 32px; line-height: 36px; } }
.bizp-hero p { font-size: 17px; line-height: 26px; color: var(--text); margin: 0 auto 26px; max-width: 620px; }
.bizp-hero .home-hero-cta { justify-content: center; }

/* Beeld met de factuurkaart als gelaagd element linksonder */
.bizp-hero-visual { position: relative; max-width: 940px; margin: 48px auto 0; text-align: left; }
.bizp-hero-visual img {
  width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: center 42%;
  border-radius: var(--r-sheet); box-shadow: var(--shadow-b); display: block;
}
.bizp-invoice-float {
  position: absolute; left: -12px; bottom: -28px; width: 296px;
  box-shadow: var(--shadow-b); text-align: left;
}
@media (max-width: 760px) {
  .bizp-hero { padding-bottom: 40px; }
  .bizp-hero-visual { margin-top: 28px; }
  .bizp-hero-visual img { aspect-ratio: 4 / 3; }
  .bizp-invoice-float { position: static; width: auto; margin: 14px 0 0; }
}

/* Geen vier zwevende metriek-tegels maar één rustige feitenregel: het zijn
   bijzinnen bij het verhaal, niet het verhaal zelf. */
.bizp-stats { background: var(--surface); border-top: 1px solid var(--line-strong); }
.bizp-stats-inner {
  max-width: 1080px; margin: 0 auto; padding: 26px 20px;
  display: flex; flex-wrap: wrap; justify-content: center; row-gap: 14px;
}
.bizp-stats-inner > div { padding: 0 30px; border-left: 1px solid var(--line-strong); text-align: center; }
.bizp-stats-inner > div:first-child { border-left: none; }
.bizp-stats b { display: block; font-size: 22px; line-height: 26px; font-weight: 800; font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.bizp-stats span { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
@media (max-width: 700px) {
  .bizp-stats-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .bizp-stats-inner > div { border-left: none; padding: 0; }
}

.bizp .page-wrap { padding-top: 14px; padding-bottom: 14px; }
.bizp-h2 { font-size: 24px; line-height: 28px; font-weight: 800; margin: 34px 0 16px !important; }

.bizp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.bizp-steps li {
  background: #fff; border-radius: var(--r-card); box-shadow: var(--card-shadow);
  padding: 20px; display: flex; gap: 14px; align-items: flex-start; font-size: 14px; line-height: 21px;
}
.bizp-steps li span {
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--product); color: #fff;
  font-weight: 800; display: flex; align-items: center; justify-content: center;
}

/* Zigzag-stappen (naar het Takeaway Pay "how it works"-model) */
.bizp-center { text-align: center; }
.bizp-intro { text-align: center; max-width: 460px; margin: -6px auto 34px; color: var(--text-muted); }
.bizp-flow { display: flex; flex-direction: column; gap: 56px; margin-bottom: 20px; }
.bizp-step-xl { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
@media (max-width: 800px) { .bizp-step-xl { grid-template-columns: 1fr; gap: 20px; } }
.bizp-step-xl:nth-child(even) .bizp-step-media { order: 2; }
@media (max-width: 800px) { .bizp-step-xl:nth-child(even) .bizp-step-media { order: 0; } }
.bizp-step-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-sheet); box-shadow: var(--card-shadow); display: block;
}
.bizp-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: var(--product); color: #fff;
  font-size: 16px; font-weight: 800; margin-bottom: 14px;
}
.bizp-step-copy h3 { font-size: 24px; line-height: 28px; font-weight: 800; margin: 0 0 10px; }
.bizp-step-copy p { font-size: 16px; line-height: 24px; color: var(--text); margin: 0 0 16px; }
.bizp-checks { list-style: none; margin: 0; padding: 0; }
.bizp-checks li {
  display: flex; align-items: center; gap: 9px; padding: 5px 0;
  font-size: 14px; line-height: 20px; font-weight: 700;
}
.bizp-checks .bb-ic { color: var(--product); }
.bizp-step-copy a, .band a:not(.btn-primary):not(.btn-ghost):not(.btn-dark) { color: var(--product); font-weight: 700; }

/* Factuur-mock bij stap 4 */
.bizp-invoice-demo { display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: var(--r-sheet); padding: 28px; }
.bizp-invoice { width: 100%; max-width: 340px; background: #fff; border-radius: var(--r-card); box-shadow: var(--card-shadow); padding: 20px; }
.bizp-invoice { text-align: left; }
.bizp-invoice-kop { padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.bizp-invoice-kop b { display: block; font-size: 16px; }
.bizp-invoice-kop span { font-size: 12.5px; color: var(--text-muted); }
.bizp-invoice-rij { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.bizp-invoice-rij span { color: var(--text-muted); }
.bizp-invoice-rij b { font-variant-numeric: tabular-nums; }
.bizp-invoice-totaal { border-bottom: none; padding-top: 10px; }
.bizp-invoice-totaal span { color: var(--ink); font-weight: 800; }

/* CTA-band */
.bizp-cta-band { background: var(--ink); color: var(--text-inverse); margin-top: 26px; }
/* Volgt de CTA-band op een gekleurde band, of sluit hij de pagina af, dan
   geen witte strook ertussen: de vlakken sluiten op elkaar aan. */
.band + .bizp-cta-band { margin-top: 0; }
body:has(main > .bizp-cta-band:last-child) .site-foot {
  margin-top: 0; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.bizp-cta-inner { max-width: 1080px; margin: 0 auto; padding: 48px 20px; text-align: center; }
.bizp-cta-inner h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.06; letter-spacing: -0.02em; font-weight: 800; color: #fff; margin: 0 0 10px; }
.bizp-cta-inner p { font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, 0.82); margin: 0 0 22px; }
.bizp-cta-inner .home-hero-cta { justify-content: center; }

.bizp-faq details {
  background: #fff; border-radius: var(--r-card); box-shadow: var(--card-shadow);
  padding: 0; margin-bottom: 10px; overflow: hidden;
}
.bizp-faq summary {
  cursor: pointer; list-style: none; padding: 16px 20px;
  font-size: 15px; font-weight: 800; position: relative;
}
.bizp-faq summary::-webkit-details-marker { display: none; }
.bizp-faq summary::after { content: "+"; position: absolute; right: 20px; top: 14px; font-size: 20px; color: var(--product); font-weight: 700; }
.bizp-faq details[open] summary::after { content: "−"; }
.bizp-faq details p { margin: 0; padding: 0 20px 18px; font-size: 14px; line-height: 21px; color: var(--text-muted); }

/* ===== Mobiel bottom-menu (app-tabbar) =====
   Uitgezet bij de livegang (12 okt 2026): samen met het menu bovenin was het
   een dubbel menu, en de balk dekte knoppen af. Het menu bovenin heeft nu ook
   de link naar het account. De hoogte staat op 0, zodat het mandje op de
   bestelpagina en de opslaanknop in het account onderaan aansluiten. */
:root { --bottomnav-h: 0px; }
.bottom-nav { display: none; }
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; color: var(--muted); font-size: 11px; font-weight: 700;
  padding: 4px 2px; border-radius: var(--r-input);
}
.bottom-nav a svg { width: 22px; height: 22px; }
.bottom-nav a.active { color: var(--product); }

/* ===== Zakelijk portaal + Mijn account ===== */
.bbz-form label, .biz-form form label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 12px 0 4px; }
.bbz-form input, .bbz-form select, .bbz-form textarea {
  width: 100%; border: 1px solid var(--border-form); border-radius: var(--r-input); padding: 12px 14px; font-size: 15px; background: #fff;
}
.bbz-form button.btn-primary { border: none; margin-top: 16px; cursor: pointer; }
.bbz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .bbz-row { grid-template-columns: 1fr; } }
.bbz-notice { border-radius: var(--r-card); padding: 13px 18px; font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.bbz-ok { background: var(--tonal); }
.bbz-err { background: #fdecec; }
.bbz-adressen { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 14px 0 24px; }
.bbz-adres-card {
  background: #fff; border-radius: var(--r-card); box-shadow: var(--card-shadow);
  padding: 16px; font-size: 14px; line-height: 21px; margin-bottom: 12px;
}
.bbz-link-btn {
  background: none; border: none; padding: 0; margin-top: 8px; display: inline-block;
  font-size: 13px; font-weight: 700; color: var(--product); text-decoration: underline; cursor: pointer;
}
.bbz-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border-radius: var(--r-card); box-shadow: var(--card-shadow); overflow: hidden; }
.bbz-table th, .bbz-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.bbz-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--surface); }
.bbz-factuur-kop { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 18px; font-size: 14px; }

/* Mijn account: navigatie als pills */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.woocommerce-MyAccount-navigation a {
  display: block; padding: 9px 16px; border-radius: var(--pill); font-size: 14px; font-weight: 700;
  color: var(--ink); text-decoration: none; background: var(--surface);
}
.woocommerce-MyAccount-navigation li.is-active a { background: var(--ink); color: var(--text-inverse); }
.woocommerce-MyAccount-content { font-size: 15px; line-height: 23px; }
.woocommerce-MyAccount-content h3 { font-size: 20px; font-weight: 800; margin: 24px 0 10px; }
.woocommerce-MyAccount-content table.shop_table { width: 100%; border-collapse: collapse; font-size: 14px; }
.woocommerce-MyAccount-content table.shop_table th, .woocommerce-MyAccount-content table.shop_table td {
  text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line);
}
.woocommerce-MyAccount-content .woocommerce-button, .woocommerce-MyAccount-content .button {
  display: inline-block; background: var(--product); color: #fff; border: none; border-radius: var(--pill);
  font-size: 13.5px; font-weight: 700; padding: 9px 18px; text-decoration: none; cursor: pointer;
}

/* ===== CookieYes (§7) =====
   Op mobiel boven de onderste navigatiebalk, anders valt de knop eronder.
   De zwevende "opnieuw openen"-knop is overbodig: de footer heeft de link
   Cookie-instellingen. */
@media (max-width: 980px) {
  .cky-consent-container { bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)) !important; }
}
.cky-btn-revisit-wrapper { display: none !important; }

/* Account-CTA op de bedankpagina (§4.4) */
.co-account-cta {
  background: var(--tonal); border-radius: var(--r-card); padding: 15px 18px;
  font-size: 14.5px; line-height: 21px; margin-bottom: 18px;
}
.co-account-cta a { color: var(--product); font-weight: 700; }

/* Factuur printen: alleen de factuur op papier */
@media print {
  .topbar, .site-menu, .site-foot, .bottom-nav, .woocommerce-MyAccount-navigation, .bbz-print-hide, .page-wrap > h1 { display: none !important; }
  body { padding-bottom: 0 !important; background: #fff; }
  .bbz-factuur { box-shadow: none; }
}

/* ===== Paginahero (contentpagina's, sales-arc) ===== */
.page-hero { position: relative; min-height: 500px; display: flex; align-items: center; overflow: hidden; background: var(--ink); }
.page-hero-plain { min-height: 0; background: var(--surface); }
.page-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero-scrim { position: absolute; inset: 0; background:
  linear-gradient(100deg, rgba(20, 22, 20, 0.76) 22%, rgba(20, 22, 20, 0.24) 74%),
  linear-gradient(to top, rgba(20, 22, 20, 0.42), transparent 32%); }
.page-hero-inner { position: relative; max-width: 1080px; width: 100%; margin: 0 auto; padding: 76px 20px; color: var(--text-inverse); }
.page-hero h1 {
  font-size: clamp(38px, 5.8vw, 62px); line-height: 1.03; font-weight: 800;
  letter-spacing: -0.025em; color: #fff; margin: 0 0 16px; max-width: 14ch;
}
@media (max-width: 640px) { .page-hero { min-height: 400px; } .page-hero-inner { padding: 52px 20px; } }
.page-hero p { max-width: 560px; font-size: 17px; line-height: 26px; margin: 0 0 26px; }
.page-hero-plain .page-hero-inner { color: var(--text); padding: 48px 20px 40px; }
.page-hero-plain h1 { color: var(--ink); }

/* ===== Banden: afwisselend wit/greige met ruime verticale maat (spacing 64/80) ===== */
.band { padding: 88px 0; }
.band-alt { background: var(--surface); }
.band-inner { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.band-narrow { max-width: 760px; }
.band-head { max-width: 640px; margin-bottom: 32px; }
.band-head h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.06; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; }
.band-head p { font-size: 16px; line-height: 24px; color: var(--text-muted); margin: 0; }
@media (max-width: 640px) { .band { padding: 56px 0; } }
.band-split { padding: 0 20px; }
.resto-eyebrow-dark { color: var(--product); }

.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.contact-cards .home-card h2 { display: flex; align-items: center; gap: 8px; }
.contact-cards .home-card h2 .bb-ic { color: var(--product); }
.biz-form-clean { margin-top: 0; }

/* ===== Sitefooter (4 kolommen, donker) ===== */
.site-foot { background: var(--ink); color: var(--text-inverse); margin-top: 72px; }
body.post-type-archive-product .site-foot, body.woocommerce-checkout .site-foot { margin-top: 0; }
.site-foot-grid {
  max-width: 1080px; margin: 0 auto; padding: 56px 20px 40px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px;
}
@media (max-width: 900px) { .site-foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .site-foot-grid { grid-template-columns: 1fr; } }
.sf-col h3 { font-size: 14px; line-height: 20px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin: 0 0 14px; }
.sf-col ul { list-style: none; margin: 0; padding: 0; }
.sf-col li { padding: 5px 0; font-size: 14px; line-height: 20px; }
.sf-col a { color: var(--text-inverse); text-decoration: none; font-weight: 700; }
.sf-col a:hover { text-decoration: underline; }
.sf-brand p { font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, 0.72); margin: 14px 0 20px; }
.sf-logo { display: inline-flex; background: #fff; border-radius: var(--r-input); padding: 10px 12px; }
.sf-logo svg { height: 30px; width: auto; display: block; }
.sf-hours li { display: flex; justify-content: space-between; gap: 14px; max-width: 220px; }
.sf-hours span { color: rgba(255, 255, 255, 0.72); }
.sf-hours b { font-variant-numeric: tabular-nums; }
.sf-hours-sub { border-top: 1px solid rgba(255, 255, 255, 0.2); margin-top: 6px; padding-top: 10px !important; }
/* Status onder de kop: groen bolletje als we nu open zijn of bezorgen */
.sf-status {
  display: flex; align-items: center; gap: 9px; margin: -4px 0 14px;
  font-size: 14px; font-weight: 700; color: #fff;
}
.sf-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: rgba(255, 255, 255, 0.4); }
.sf-dot.is-aan { background: #80ba00; box-shadow: 0 0 0 3px rgba(128, 186, 0, 0.22); }
@media (prefers-reduced-motion: no-preference) {
  .sf-dot.is-aan { animation: sf-puls 2.4s ease-in-out infinite; }
  @keyframes sf-puls { 50% { box-shadow: 0 0 0 5px rgba(128, 186, 0, 0.08); } }
}
.site-foot-base {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 1080px; margin: 0 auto; padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.6);
}
.site-foot-base a { color: rgba(255, 255, 255, 0.85); font-weight: 700; text-decoration: none; }

/* Reviews: bron-label en link naar Google */
.rating-src { font-size: 12.5px; color: var(--text-muted); }
.reviews-cta { margin: 18px 0 0; font-size: 14px; }
.reviews-cta a { color: var(--product); font-weight: 700; text-decoration: none; }
.reviews-cta a:hover { text-decoration: underline; }

/* ============================================================
   Sectiepatronen (JET for Business-model): gecentreerde kop,
   omrande kaarten met lijn-icoon, beeld/tekst-showcase.
   ============================================================ */

.sec-c { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.sec-c h2 { font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 10px; }
.sec-c p { font-size: 16px; line-height: 24px; color: var(--text-muted); margin: 0; }
@media (max-width: 640px) { .sec-c h2 { font-size: 24px; line-height: 28px; } }

.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
/* Vaste kolomtellingen: auto-fit laat bij 4 kaarten een losse kaart op een
   tweede regel achter (3+1). Een raster deelt altijd op in volle regels. */
.feat-grid-4 { grid-template-columns: repeat(4, 1fr); }
.feat-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .feat-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .feat-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .feat-grid-4 { grid-template-columns: 1fr; } }
/* Geen vier identieke doosjes: de inhoud draagt het, met alleen een tonale
   icoonchip als anker. Zo blijft de fotografie de zwaarste stem op de pagina. */
.feat-card { display: flex; flex-direction: column; gap: 9px; }
.feat-card .bb-ic {
  width: 46px; height: 46px; padding: 10px; border-radius: 14px;
  background: var(--tonal); color: var(--product); margin-bottom: 6px;
}
.feat-card h3 { font-size: 17px; line-height: 22px; font-weight: 800; margin: 0; font-family: var(--font-display); letter-spacing: -0.01em; }
.feat-card p { font-size: 14.5px; line-height: 22px; color: var(--text-muted); margin: 0; }
.feat-card .link-more { margin-top: auto; padding-top: 10px; }

.link-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: underline;
}
.link-more:hover { color: var(--product); }

/* Beeld/tekst-showcase, afwisselend links/rechts */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.showcase + .showcase { margin-top: 56px; }
@media (max-width: 820px) { .showcase { grid-template-columns: 1fr; gap: 24px; } .showcase + .showcase { margin-top: 40px; } }
.showcase:nth-child(even) .showcase-media { order: 2; }
@media (max-width: 820px) { .showcase:nth-child(even) .showcase-media { order: 0; } }
.showcase-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-sheet); box-shadow: var(--shadow-b); display: block;
}
.showcase-copy h3 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.13; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 12px; }
.showcase-copy p { font-size: 16px; line-height: 24px; color: var(--text); margin: 0 0 16px; }

/* ===== Sollicitatieformulier (vacatures) =====
   Eigen opmaak: de formulier-plugins gaan eruit (§1), dus het thema levert
   de velden zelf. Twee kolommen op desktop, één op mobiel. */
/* Sectiekop binnen een formulier: het formulier valt zo in blokken uiteen
   in plaats van één lange rij velden. */
.bbf-sec {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 28px 0 6px; padding-top: 22px; border-top: 1px solid var(--line-strong);
}
.bbf-sec:first-of-type { margin-top: 8px; padding-top: 0; border-top: none; }
.bbf-sec svg { flex: none; color: var(--ink); }
.bbf-sec b { font-size: 17px; font-weight: 800; color: var(--ink); }
.bbf-sec small { flex: 1 1 100%; font-size: 13.5px; line-height: 19px; color: var(--ink-2); }

.bbf-submit { width: 100%; justify-content: center; margin-top: 24px; }

.bbf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .bbf-row { grid-template-columns: 1fr; } }
.bbf-field { display: block; margin: 12px 0 0; }
.bbf-field > span {
  display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 4px;
}
.bbf-field > small { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.bbf input, .bbf select, .bbf textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: #fff;
  border: 1px solid var(--border-form); border-radius: var(--r-input); padding: 11px 14px;
}
.bbf textarea { border-radius: 12px; resize: vertical; }
.bbf input[type="file"] { padding: 10px 12px; background: #fff; }
.bbf input:focus-visible, .bbf select:focus-visible, .bbf textarea:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}
.bbf button.btn-primary { border: none; margin-top: 20px; cursor: pointer; }
/* Honeypot: uit beeld, maar niet display:none — bots vullen 'm dan alsnog */
.bbf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-ok, .form-err {
  border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 22px; margin: 0 0 18px;
}
.form-ok { background: #eef5e0; color: #33450f; }
.form-err { background: #fdecec; color: #7a1f1f; }

/* ===== Zakelijk portaal: bestellijsten, team, kalender ===== */
.bbz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .bbz-row { grid-template-columns: 1fr; } }
.bbz-sub { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.bbz-leeg { color: var(--ink-2); }
.bbz-acties form { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.bbz-link-del {
  border: none; background: none; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: underline;
}
.bbz-link-del:hover { color: #a1332b; }
.bbz-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.bbz-inline input[type="number"] { width: 110px; margin: 0; }
.bbz-inline button.btn-primary { margin-top: 0; }
.bbz-besteed { font-size: 13.5px; color: var(--ink-2); min-width: 80px; }
.bbz-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; }
.bbz-check input { width: auto; margin: 0; }
.bbz-lijst-nieuw { background: var(--surface); border-radius: var(--r-card); padding: 18px 20px; margin-bottom: 26px; }

/* Referentievelden in de checkout */
.bbz-checkout-ref { margin-top: 4px; }
.bbz-ref-kop { margin: 0 0 6px; font-size: 14px; }
.bbz-ref-kop span { font-size: 13px; color: var(--ink-2); font-weight: 400; }

/* ===== Aanbiedingen op de homepage =====
   Het raster telt evenveel kolommen als er acties zijn en wordt smaller
   naarmate dat er minder zijn — één losse kaart op een derde van de breedte
   ziet eruit alsof er iets ontbreekt. */
.deal-grid {
  display: grid; gap: 18px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.deal-grid[data-aantal="1"] { max-width: 420px; }
.deal-grid[data-aantal="2"] { max-width: 720px; }

.deal-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--r-card); box-shadow: var(--card-shadow);
  text-decoration: none; color: var(--ink);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.deal-card:hover { box-shadow: var(--shadow-b); transform: translateY(-2px); }
.deal-card-media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--surface); }
.deal-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deal-card-pct {
  position: absolute; top: 12px; left: 12px;
  background: var(--yellow); color: var(--ink); border-radius: var(--pill);
  padding: 5px 12px; font-size: 14px; font-weight: 800;
}
.deal-card-pct::after { content: " korting"; font-weight: 700; }
.deal-card-body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.deal-card-body b { font-size: 17px; line-height: 22px; font-weight: 800; color: var(--ink); }
.deal-card-prijs { font-size: 18px; font-weight: 800; color: var(--ink); }
.deal-card-prijs .oud {
  margin-left: 8px; font-size: 15px; font-weight: 400;
  color: var(--text-muted); text-decoration: line-through;
}
.deal-card .link-more { margin-top: 6px; }

/* ===== Brasserie ===== */

/* Vier op een rij op breed scherm; de resto-gallery zelf blijft 2-koloms. */
@media (min-width: 861px) { .bras-gallery { grid-template-columns: repeat(4, 1fr); } }
.bras-gallery img { aspect-ratio: 3 / 4; }
@media (max-width: 860px) { .bras-gallery img { aspect-ratio: 4 / 3; } }

/* Openingstijden staan hier op de donkere band, niet op wit */
.resto-band dl.hours { max-width: 420px; margin-bottom: 18px; }
.resto-band dl.hours div { border-bottom-color: rgba(255,255,255,.16); }
.resto-band dl.hours dt { color: var(--text-inverse); }
.resto-band dl.hours dd { color: rgba(255,255,255,.72); }

.bras-reserveer {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start;
}
@media (max-width: 860px) { .bras-reserveer { grid-template-columns: 1fr; gap: 24px; } }
.bras-reserveer h2 { font-size: 28px; line-height: 32px; font-weight: 800; letter-spacing: -0.01em; margin: 8px 0 10px; }
.bras-reserveer-copy p { font-size: 16px; line-height: 24px; color: var(--text-muted); margin: 0 0 18px; }

.bras-reserveer-punten { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bras-reserveer-punten li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px; line-height: 20px; color: var(--text);
}
.bras-reserveer-punten svg { flex: none; margin-top: 1px; color: var(--product); }

.bras-reserveer-form {
  background: var(--surface); border-radius: var(--r-card);
  padding: 24px; box-shadow: var(--card-shadow);
}
@media (max-width: 640px) { .bras-reserveer-form { padding: 18px; } }

/* ===== Lunchpakketten ===== */
.pakket-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .pakket-grid { grid-template-columns: 1fr; } }

.pakket-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--page); border-radius: var(--r-card); overflow: hidden;
  box-shadow: var(--card-shadow); text-decoration: none; color: inherit;
  transition: transform .16s ease, box-shadow .16s ease;
}
.pakket-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.pakket-card.is-tip { outline: 2px solid var(--product); outline-offset: -2px; }

.pakket-tip {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  background: var(--product); color: #fff; border-radius: 999px;
  padding: 4px 11px; font-size: 12px; font-weight: 800; letter-spacing: .01em;
}
/* overflow:hidden is hier niet cosmetisch: zonder dat wint een staande foto
   van de aspect-ratio en wordt die ene kaart hoger dan de rest. */
.pakket-media { display: block; aspect-ratio: 16 / 10; background: var(--surface); overflow: hidden; }
.pakket-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pakket-body { display: flex; flex-direction: column; gap: 6px; padding: 18px; }
.pakket-naam { font-size: 18px; line-height: 22px; font-weight: 800; }
.pakket-prijs { font-size: 22px; line-height: 26px; font-weight: 800; color: var(--text); }
.pakket-prijs small { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-left: 3px; }
.pakket-desc { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.pakket-regels {
  display: flex; align-items: center; gap: 7px; margin-top: 2px;
  font-size: 13px; font-weight: 700; color: var(--text-muted);
}
.pakket-regels svg { color: var(--product); flex: none; }
.pakket-body .link-more { margin-top: 8px; }
.pakket-voet { margin-top: 18px; max-width: 640px; }