/* ==========================================================================
   DUBANET — Webshop prototype
   Design system + page styles
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand */
  --yellow: #FFC629;
  --yellow-hover: #F5B800;
  --yellow-50: #FFF9E6;
  --yellow-100: #FFF0BF;
  --yellow-ink: #8A6200;

  /* Neutrals */
  --ink: #2A2E35;
  --ink-2: #454B55;
  --muted: #6B7280;
  --subtle: #9AA1AC;
  --line: #E5E7EB;
  --line-2: #EEF0F3;
  --bg: #FFFFFF;
  --bg-soft: #F6F7F9;
  --bg-softer: #FAFBFC;

  /* Feedback */
  --green: #18794E;
  --green-50: #E9F7EF;
  --orange: #B45309;
  --orange-50: #FEF3E2;
  --red: #CF3A3A;
  --red-50: #FDECEC;
  --blue: #2F64C8;
  --blue-50: #EBF1FC;

  /* Shape */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(31, 36, 45, .06);
  --shadow: 0 6px 18px rgba(31, 36, 45, .08);
  --shadow-lg: 0 16px 40px rgba(31, 36, 45, .14);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Manrope', 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: 160ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); margin: 0; letter-spacing: -.015em; line-height: 1.2; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--yellow-hover); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--yellow-100); }

.container { width: 100%; max-width: var(--paginabreedte, 1280px); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.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; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--yellow); padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 12px; }
.ico { width: 22px; height: 22px; flex: none; }
.ico-sm { width: 18px; height: 18px; }
.ico-xs { width: 16px; height: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px;
  border-radius: 10px; border: 1.5px solid transparent;
  font-weight: 600; font-size: 15px; white-space: nowrap;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), color var(--fast);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--yellow); color: var(--ink); }
.btn-primary:hover { background: var(--yellow-hover); box-shadow: 0 4px 12px rgba(245, 184, 0, .3); }
.btn-secondary { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-secondary:hover { border-color: #C9CDD4; background: var(--bg-softer); }
.btn-white { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-white:hover { box-shadow: var(--shadow); }
.btn-ghost { color: var(--ink-2); padding: 0 12px; }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { background: var(--bg-soft); color: var(--subtle); border-color: var(--line); cursor: not-allowed; box-shadow: none; }
.btn.is-added { background: var(--green-50); color: var(--green); }
.btn .ico { width: 18px; height: 18px; }

.link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow-hover); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--ink); }
.link-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.link-more:hover { color: var(--ink); }
.link-more .ico { width: 16px; height: 16px; transition: transform var(--fast) var(--ease); }
.link-more:hover .ico { transform: translateX(3px); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  transition: all var(--fast) var(--ease);
}
.chip:hover { border-color: #C9CDD4; color: var(--ink); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .ico { width: 14px; height: 14px; }

/* ---------- Top bar ---------- */
.topbar { background: var(--bg-soft); border-bottom: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); }
.topbar .container { display: flex; justify-content: center; gap: 32px; height: 34px; align-items: center; }
.topbar li { display: flex; align-items: center; gap: 6px; }
.topbar .ico { width: 15px; height: 15px; color: var(--green); }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.header-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px; height: 76px; }
.menu-toggle { display: none; }

.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 22px; letter-spacing: .06em; color: var(--ink); }
.logo-mark { width: 32px; height: 32px; object-fit: contain; flex: none; }

.search { position: relative; max-width: 680px; width: 100%; justify-self: center; }
.search-input {
  width: 100%; height: 48px; padding: 0 60px 0 18px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg-soft);
  font-size: 15px; transition: all var(--fast) var(--ease);
}
.search-input::placeholder { color: var(--subtle); }
.search-input:hover { border-color: #D3D7DD; }
.search-input:focus { outline: none; background: #fff; border-color: var(--yellow-hover); box-shadow: 0 0 0 4px rgba(255, 198, 41, .22); }
.search-btn { position: absolute; right: 5px; top: 5px; width: 38px; height: 38px; border-radius: 9px; background: var(--yellow); display: grid; place-items: center; transition: background var(--fast); }
.search-btn:hover { background: var(--yellow-hover); }
.search-btn .ico { width: 19px; height: 19px; }

.suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 60; }
.suggest-title { font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 10px; text-transform: uppercase; letter-spacing: .04em; }
.suggest a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; }
.suggest a:hover, .suggest a.is-focus { background: var(--bg-soft); }
.suggest .s-thumb { width: 44px; height: 44px; border-radius: 8px; flex: none; display: grid; place-items: center; }
.suggest .s-thumb svg { width: 36px; height: 36px; }
.suggest .s-name { font-size: 14px; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .s-name mark { background: var(--yellow-100); color: inherit; border-radius: 3px; padding: 0 1px; }
.suggest .s-price { font-weight: 700; font-size: 14px; }
.suggest .s-all { justify-content: center; font-weight: 600; font-size: 14px; border-top: 1px solid var(--line-2); margin-top: 4px; border-radius: 0 0 10px 10px; }
.suggest-empty { padding: 14px 10px; color: var(--muted); font-size: 14px; }

.header-actions { display: flex; align-items: center; gap: 4px; }
.action {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 64px; padding: 6px 8px; border-radius: 10px;
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  transition: background var(--fast);
}
.action:hover { background: var(--bg-soft); color: var(--ink); }
.action .ico { width: 24px; height: 24px; }
.action-label { max-width: 116px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count {
  position: absolute; top: 2px; right: 12px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--yellow); color: var(--ink); border: 2px solid #fff;
  font-size: 11px; font-weight: 700; line-height: 15px; text-align: center;
}
.count.bump { animation: bump 400ms var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

.mainnav { border-top: 1px solid var(--line-2); }
.mainnav .container { display: flex; align-items: center; gap: 4px; height: 48px; }
.mainnav a, .mainnav .nav-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 48px; padding: 0 14px; font-size: 14.5px; font-weight: 500; color: var(--ink-2);
}
.mainnav a:hover, .mainnav .nav-btn:hover { color: var(--ink); }
.mainnav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.mainnav a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--yellow); }
.mainnav .nav-sale { color: var(--red); }
.mainnav .nav-right { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.mainnav .nav-right .ico { width: 16px; height: 16px; }
.nav-btn .ico { width: 16px; height: 16px; transition: transform var(--fast); }
.nav-cats { position: relative; }
.nav-cats.is-open .nav-btn .ico { transform: rotate(180deg); }
.mega {
  position: absolute; top: 100%; left: 0; width: 560px; padding: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: all var(--fast) var(--ease); z-index: 60;
}
.nav-cats.is-open .mega { opacity: 1; visibility: visible; transform: none; }
.mega a { height: auto; padding: 10px 12px; border-radius: 10px; display: flex; align-items: center; gap: 12px; }
.mega a:hover { background: var(--bg-soft); }
.mega .m-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--ink); }
.mega strong { display: block; font-size: 14px; color: var(--ink); }
.mega small { color: var(--muted); font-size: 12.5px; }

/* Minimal checkout header */
.header-minimal .header-main { grid-template-columns: auto 1fr auto; height: 72px; }
.secure-note { justify-self: center; display: flex; align-items: center; gap: 8px; color: var(--green); font-weight: 600; font-size: 14px; }
.secure-note .ico { width: 18px; height: 18px; }

/* Mobile drawer */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(42, 46, 53, .4); z-index: 90; opacity: 0; transition: opacity 200ms; }
.drawer-backdrop.is-open { opacity: 1; }
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; width: min(360px, 88vw); z-index: 100;
  background: #fff; box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform 240ms var(--ease); visibility: hidden;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer-body { overflow-y: auto; padding: 12px 12px 24px; flex: 1; }
.drawer-section { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.drawer-section:last-child { border: 0; }
.drawer-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 12px 6px; font-family: var(--font); font-weight: 600; }
.drawer a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; font-weight: 500; }
.drawer a:hover { background: var(--bg-soft); }
.drawer a .ico { color: var(--muted); }
.icon-btn { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; transition: background var(--fast); }
.icon-btn:hover { background: var(--bg-soft); }

/* ---------- Sections ---------- */
.section { padding: 52px 0; }
.section-tight { padding: 12px 0; }
.section-soft { background: var(--bg-soft); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.section-head h2 { font-size: 26px; }
.section-sub { color: var(--muted); margin-top: 4px; }
.page { padding: 20px 0 64px; }
.page-title { font-size: 30px; margin: 6px 0 24px; }

.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); padding: 4px 0 12px; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumbs .ico { width: 14px; height: 14px; color: var(--subtle); }
.breadcrumbs [aria-current] { color: var(--ink-2); }

/* ---------- Hero ---------- */
.hero { padding: 24px 0 8px; }
.hero-card {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
  background: var(--yellow-50); border: 1px solid #F8EBC2; border-radius: var(--radius-xl); overflow: hidden;
  min-height: 380px;
}
.hero-copy { padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; }
.eyebrow { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--yellow-ink); background: #fff; border: 1px solid #F3E1A8; padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow-hover); }
.hero h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -.025em; max-width: 14ch; }
.hero h1 .hl { background: linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 92%, transparent 92%); }
.hero p { font-size: 17px; color: var(--ink-2); margin-top: 16px; max-width: 44ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-usps { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; font-size: 13.5px; color: var(--ink-2); }
.hero-usps li { display: flex; align-items: center; gap: 6px; }
.hero-usps .ico { width: 16px; height: 16px; color: var(--green); }

.hero-visual { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; padding: 28px 28px 28px 0; }
.hv-tile { position: relative; border-radius: 16px; display: grid; place-items: center; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); transition: transform 300ms var(--ease); }
.hv-tile:hover { transform: translateY(-3px); }
.hv-tile svg { width: 72%; height: auto; }
.hv-main { grid-row: span 2; }
.hv-main svg { width: 78%; }
.hv-label { position: absolute; left: 12px; bottom: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: rgba(255, 255, 255, .94); border-radius: 10px; padding: 8px 12px; font-size: 13px; box-shadow: var(--shadow-sm); }
.hv-label strong { font-size: 14px; }
.hv-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-rating { position: absolute; top: 44px; left: -22px; background: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; font-size: 13px; z-index: 2; }
.hv-rating b { font-size: 18px; font-family: var(--font-head); }

/* ---------- Category cards ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.cat-card {
  display: flex; flex-direction: column; gap: 14px; padding: 18px;
  border-radius: var(--radius-lg); background: var(--bg-soft); border: 1px solid transparent;
  transition: all 200ms var(--ease);
}
.cat-card:hover { background: #fff; border-color: var(--line); box-shadow: var(--shadow); transform: translateY(-2px); }
.cat-art { height: 96px; border-radius: 12px; display: grid; place-items: center; position: relative; overflow: hidden; }
.cat-art svg { width: 84px; height: 84px; transition: transform 300ms var(--ease); }
.cat-card:hover .cat-art svg { transform: scale(1.06) rotate(-2deg); }
.cat-card h3 { font-size: 15.5px; line-height: 1.3; }
.cat-card p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.cat-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.cat-meta .ico { width: 16px; height: 16px; transition: transform var(--fast); }
.cat-card:hover .cat-meta .ico { transform: translateX(3px); }

/* ---------- Product grid & cards ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.product-grid.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: box-shadow 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
  animation: fadeUp 300ms var(--ease) both;
}
.product-card:hover { box-shadow: var(--shadow); border-color: #DCDFE4; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pc-media { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 0.9; }
.pc-media svg { width: 68%; height: auto; transition: transform 320ms var(--ease); }
.product-card:hover .pc-media svg { transform: scale(1.05); }
.badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.badge-sale { background: var(--red); color: #fff; }
.badge-new { background: var(--yellow); color: var(--ink); }
.badge-info { background: #fff; color: var(--ink-2); box-shadow: var(--shadow-sm); }
.wish-btn {
  position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); color: var(--ink-2);
  transition: transform var(--fast) var(--ease), color var(--fast);
}
.wish-btn:hover { transform: scale(1.08); color: var(--red); }
.wish-btn .ico { width: 19px; height: 19px; }
.wish-btn[aria-pressed="true"] { color: var(--red); }
.wish-btn[aria-pressed="true"] .ico { fill: var(--red); }
.wish-btn.pop { animation: bump 380ms var(--ease); }

.pc-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; border-top: 1px solid var(--line-2); }
.pc-brand { font-size: 12px; font-weight: 600; color: var(--muted); }
.pc-name { font-size: 15px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.pc-name a:hover { text-decoration: underline; text-decoration-color: var(--yellow-hover); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.pc-name a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.pc-desc { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-bottom { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.pc-bottom .btn, .wish-btn { position: relative; z-index: 1; }
.wish-btn { position: absolute; }

.rating { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.stars { position: relative; display: inline-block; font-size: 14px; line-height: 1; letter-spacing: 1px; color: #DADDE2; white-space: nowrap; }
.stars::before { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--pct, 0%); overflow: hidden; color: #F2A900; }
.rating strong { color: var(--ink); font-weight: 600; }

.stock { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--green); }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.stock.low { color: var(--orange); }
.stock.out { color: var(--red); }

.price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price { font-family: var(--font-head); font-weight: 800; font-size: 21px; color: var(--ink); letter-spacing: -.01em; }
.price.is-sale { color: var(--red); }
.price-old { font-size: 14px; color: var(--muted); text-decoration: line-through; }
.price-save { font-size: 12.5px; font-weight: 600; color: var(--red); background: var(--red-50); padding: 2px 6px; border-radius: 5px; }

/* ---------- Promo ---------- */
.promo {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 32px 40px; border-radius: var(--radius-xl); background: var(--yellow);
}
.promo::before, .promo::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.promo::before { width: 260px; height: 260px; right: 220px; top: -150px; }
.promo::after { width: 180px; height: 180px; right: -40px; bottom: -110px; }
.promo-copy { position: relative; z-index: 1; }
.promo-tag { display: inline-block; font-size: 12.5px; font-weight: 700; background: var(--ink); color: #fff; border-radius: 6px; padding: 3px 9px; margin-bottom: 10px; }
.promo h2 { font-size: 26px; }
.promo p { color: var(--ink-2); margin-top: 6px; font-size: 16px; }
.promo-side { position: relative; z-index: 1; display: flex; align-items: center; gap: 22px; }
.promo-art { display: flex; }
.promo-art span { width: 76px; height: 76px; border-radius: 16px; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); margin-left: -14px; }
.promo-art span:first-child { transform: rotate(-6deg); margin-left: 0; }
.promo-art span:last-child { transform: rotate(6deg); }
.promo-art svg { width: 58px; height: 58px; }

/* ---------- Why ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.why-item { padding: 24px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
.why-ico { width: 48px; height: 48px; border-radius: 12px; background: var(--yellow-50); border: 1px solid #F6E5AE; display: grid; place-items: center; margin-bottom: 16px; }
.why-ico .ico { width: 24px; height: 24px; }
.why-item h3 { font-size: 17px; margin-bottom: 6px; }
.why-item p { color: var(--muted); font-size: 14.5px; }
.trust-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 36px; margin-top: 28px; color: var(--ink-2); font-size: 14px; }
.trust-row span { display: flex; align-items: center; gap: 8px; }
.trust-row b { font-family: var(--font-head); font-size: 16px; }

/* ---------- Footer ---------- */
.footer { background: var(--bg-soft); border-top: 1px solid var(--line); margin-top: 24px; }
.footer-service { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.service-item { display: flex; align-items: center; gap: 14px; }
.service-item .s-ico { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; flex: none; }
.service-item strong { display: block; font-size: 15px; }
.service-item span { font-size: 13.5px; color: var(--muted); }
.footer-cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding: 40px 0 32px; }
.footer-brand p { color: var(--muted); font-size: 14px; margin-top: 14px; max-width: 30ch; }
.footer h4 { font-size: 14.5px; margin-bottom: 14px; font-family: var(--font); font-weight: 700; }
.footer-col li + li { margin-top: 9px; }
.footer-col a { font-size: 14px; color: var(--ink-2); }
.footer-col a:hover { color: var(--ink); text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 20px 0 28px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.pay-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-chip { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 6px; background: #fff; border: 1px solid var(--line); font-size: 11.5px; font-weight: 700; color: var(--ink-2); letter-spacing: .01em; }
.proto-note { display: inline-flex; align-items: center; gap: 6px; }
.proto-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow-hover); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.col-6 { grid-column: span 6; } .col-4 { grid-column: span 4; } .col-3 { grid-column: span 3; } .col-2 { grid-column: span 2; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label { font-size: 14px; font-weight: 600; color: var(--ink); }
.label .opt { font-weight: 400; color: var(--muted); }
.input, .select {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.select { appearance: none; padding-right: 38px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23454B55' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; cursor: pointer; }
.input:hover, .select:hover { border-color: #CFD3DA; }
.input:focus, .select:focus { outline: none; border-color: var(--yellow-hover); box-shadow: 0 0 0 4px rgba(255, 198, 41, .22); }
.input::placeholder { color: var(--subtle); }
.field-error { display: none; align-items: center; gap: 6px; font-size: 13px; color: var(--red); }
.field.has-error .input, .field.has-error .select { border-color: var(--red); }
.field.has-error .input:focus { box-shadow: 0 0 0 4px rgba(207, 58, 58, .15); }
.field.has-error .field-error { display: flex; }
.field.is-valid .input { border-color: #9FD3B7; }
.hint { font-size: 12.5px; color: var(--muted); }
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 48px; }
.input-wrap .pw-toggle { position: absolute; right: 4px; top: 4px; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.input-wrap .pw-toggle:hover { color: var(--ink); background: var(--bg-soft); }

.check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14.5px; user-select: none; }
.check input, .radio-input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 1px 0 0;
  width: 20px; height: 20px; border: 1.5px solid #C5CAD2; border-radius: 6px; background: #fff;
  display: grid; place-items: center; transition: all var(--fast); cursor: pointer;
}
.check input:checked { background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2E35' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--yellow-hover); }
.check input:hover { border-color: var(--ink-2); }
.radio-input { border-radius: 50%; }
.radio-input:checked { border: 6px solid var(--ink); }

.option {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; background: #fff;
  transition: border-color var(--fast), background var(--fast);
}
.option:hover { border-color: #C9CDD4; }
.option:has(input:checked) { border-color: var(--yellow-hover); background: var(--yellow-50); box-shadow: 0 0 0 1px var(--yellow-hover); }
.option-main { flex: 1; min-width: 0; }
.option-main strong { display: block; font-size: 15px; }
.option-main span { font-size: 13.5px; color: var(--muted); }
.option-side { font-weight: 700; font-size: 15px; white-space: nowrap; }
.option-side.free { color: var(--green); }
.option-list { display: grid; gap: 10px; }
.pay-logo { width: 54px; height: 36px; border-radius: 7px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .01em; flex: none; text-align: center; line-height: 1.1; }

.switch { position: relative; width: 44px; height: 26px; flex: none; }
.switch input { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; margin: 0; border-radius: 999px; background: #D5D9DF; cursor: pointer; transition: background var(--fast); }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 180ms var(--ease); }
.switch input:checked { background: var(--ink); }
.switch input:checked::after { transform: translateX(18px); }

.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; height: 44px; background: #fff; }
.qty button { width: 40px; height: 100%; display: grid; place-items: center; color: var(--ink-2); border-radius: 8px; }
.qty button:hover:not(:disabled) { background: var(--bg-soft); color: var(--ink); }
.qty button:disabled { color: #CBD0D6; cursor: not-allowed; }
.qty button .ico { width: 16px; height: 16px; }
.qty input { width: 42px; height: 100%; border: 0; text-align: center; font-weight: 600; background: transparent; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: none; }
.qty-sm { height: 38px; }
.qty-sm button { width: 34px; }
.qty-sm input { width: 34px; }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.card-pad { padding: 24px; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; font-size: 14px; background: var(--blue-50); color: #23498F; }
.notice .ico { width: 18px; height: 18px; margin-top: 1px; }
.notice-yellow { background: var(--yellow-50); color: var(--yellow-ink); border: 1px solid #F6E5AE; }
.notice-green { background: var(--green-50); color: var(--green); }

/* ---------- Listing ---------- */
.listing-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.listing-head h1 { font-size: 28px; }
.listing { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
.filters { position: sticky; top: 144px; max-height: calc(100vh - 160px); overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.filters-head { display: none; }
.filter-group { border-bottom: 1px solid var(--line); padding: 4px 0; }
.filter-group:first-of-type { border-top: 1px solid var(--line); }
.filter-group summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-weight: 700; font-size: 15px; cursor: pointer; }
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary .ico { width: 16px; height: 16px; transition: transform var(--fast); color: var(--muted); }
.filter-group[open] summary .ico { transform: rotate(180deg); }
.filter-opts { display: grid; gap: 10px; padding: 0 0 16px; }
.filter-opts .check { justify-content: space-between; width: 100%; }
.filter-opts .check > span { flex: 1; }
.filter-opts .check em { font-style: normal; font-size: 12.5px; color: var(--subtle); }
.filter-opts .check.is-empty { opacity: .45; }
.price-inputs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.price-inputs .input { height: 40px; padding: 0 10px 0 26px; }
.price-inputs .euro { position: relative; }
.price-inputs .euro::before { content: "€"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; }
.quick-prices { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-prices .chip { height: 30px; font-size: 13px; padding: 0 10px; }
.filters-foot { display: none; }

.results-bar { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; }
.results-count { font-size: 15px; color: var(--ink-2); }
.results-count strong { color: var(--ink); }
.sort { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); margin-left: auto; }
.sort .select { height: 40px; width: auto; min-width: 200px; font-size: 14px; color: var(--ink); }
.filter-toggle { display: none; }
.count-pill { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--yellow); font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.active-filters:empty { display: none; }
.active-filters .chip { height: 32px; font-size: 13px; background: var(--yellow-50); border-color: #F3E1A8; color: var(--ink); }
.active-filters .chip:hover { border-color: var(--yellow-hover); }
.active-filters .clear-all { font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: underline; padding: 0 6px; }

.empty { text-align: center; padding: 56px 24px; border: 1.5px dashed var(--line); border-radius: var(--radius-lg); background: var(--bg-softer); }
.empty-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--yellow-50); display: grid; place-items: center; margin: 0 auto 16px; }
.empty-ico .ico { width: 28px; height: 28px; }
.empty h2, .empty h3 { font-size: 20px; margin-bottom: 6px; }
.empty p { color: var(--muted); margin-bottom: 20px; }

/* ---------- Product detail ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.gallery { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
.gallery-main { position: relative; aspect-ratio: 1; border-radius: var(--radius-xl); display: grid; place-items: center; overflow: hidden; grid-column: 2; grid-row: 1; }
.gallery-main svg { width: 68%; transition: transform 400ms var(--ease), opacity 200ms; }
.gallery-main.is-switching svg { opacity: 0; transform: scale(.96); }
.gallery-main .badges { top: 16px; left: 16px; }
.gallery-main .wish-btn { top: 16px; right: 16px; width: 44px; height: 44px; }
.thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; }
.thumb { width: 76px; height: 76px; border-radius: 12px; border: 2px solid transparent; display: grid; place-items: center; overflow: hidden; transition: border-color var(--fast); }
.thumb svg { width: 80%; }
.thumb:hover { border-color: var(--line); }
.thumb[aria-current="true"] { border-color: var(--yellow-hover); }
.gallery-dots { display: none; }
.gallery.is-enkel { grid-template-columns: minmax(0, 1fr); }
.gallery.is-enkel .gallery-main { grid-column: 1; }
.thumbs { height: 0; min-height: 100%; overflow-y: auto; scrollbar-width: thin; }
.gallery-teller { font-size: 13px; font-weight: 600; color: var(--muted); }
.thumb { flex: 0 0 auto; background: #fff; border-color: var(--line); padding: 0; cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block; }

.pdp-info { display: flex; flex-direction: column; gap: 16px; }
.pdp-brand { font-size: 14px; font-weight: 600; color: var(--blue); }
.pdp-brand:hover { text-decoration: underline; }
.pdp h1 { font-size: 30px; line-height: 1.2; }
.pdp-rating { display: flex; align-items: center; gap: 10px; font-size: 14px; flex-wrap: wrap; }
.pdp-rating .stars { font-size: 17px; }
.pdp-rating a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.pdp-lead { color: var(--ink-2); font-size: 16px; }
.pdp-points { display: grid; gap: 8px; font-size: 14.5px; }
.pdp-points li { display: flex; gap: 8px; align-items: flex-start; }
.pdp-points .ico { width: 18px; height: 18px; color: var(--green); margin-top: 2px; }
.buy-box { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; display: grid; gap: 16px; background: #fff; }
.buy-box .price { font-size: 34px; }
.buy-box .price-old { font-size: 16px; }
.vat { font-size: 13px; color: var(--muted); margin-top: 2px; }
.buy-row { display: flex; gap: 12px; flex-wrap: wrap; }
.buy-row .qty { flex: 0 0 auto; }
.buy-row .btn { flex: 1 1 220px; min-width: 0; }
.buy-row .btn span { white-space: nowrap; }
.buy-box { overflow: hidden; }
.services { display: grid; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.services li { display: flex; gap: 14px; padding: 14px 18px; align-items: flex-start; font-size: 14px; }
.services li + li { border-top: 1px solid var(--line-2); }
.services .ico { width: 22px; height: 22px; margin-top: 1px; color: var(--ink-2); }
.services strong { display: block; font-size: 14.5px; }
.services span { color: var(--muted); }

.tabs { margin-top: 56px; }
.tablist { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
.tab { position: relative; padding: 14px 18px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--yellow); }
.tab .tab-count { font-size: 12px; background: var(--bg-soft); border-radius: 999px; padding: 1px 7px; margin-left: 4px; color: var(--ink-2); }
.tabpanel { padding: 28px 0; max-width: 860px; }
.tabpanel h3 { font-size: 18px; margin: 0 0 10px; }
.tabpanel p + p, .tabpanel p + h3, .tabpanel ul + h3 { margin-top: 14px; }
.tabpanel ul.bullets { list-style: disc; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); }
.tabpanel > p { color: var(--ink-2); }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.spec-table th, .spec-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.spec-table th { width: 40%; font-weight: 500; color: var(--muted); }
.spec-table tr:nth-child(odd) { background: var(--bg-softer); }

.reviews-summary { display: grid; grid-template-columns: 220px 1fr auto; gap: 32px; align-items: center; padding: 22px; border-radius: var(--radius-lg); background: var(--bg-soft); margin-bottom: 24px; }
.rs-score { text-align: center; }
.rs-score b { display: block; font-family: var(--font-head); font-size: 44px; line-height: 1; margin-bottom: 6px; }
.rs-score .stars { font-size: 18px; }
.rs-score span { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
.rs-bars { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.rs-bar { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 10px; }
.rs-track { height: 8px; border-radius: 99px; background: #E3E6EA; overflow: hidden; }
.rs-track i { display: block; height: 100%; background: #F2A900; border-radius: 99px; }
.review { padding: 20px 0; border-bottom: 1px solid var(--line-2); }
.review-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.review h4 { font-size: 16px; margin: 6px 0; }
.review p { color: var(--ink-2); }
.review-meta { font-size: 13px; color: var(--muted); }
.verified { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--green); font-weight: 600; }
.verified .ico { width: 14px; height: 14px; }

.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(31, 36, 45, .08);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 12px;
  transform: translateY(110%); transition: transform 220ms var(--ease);
}
.sticky-buy.is-visible { transform: none; }
.sticky-buy .sb-info { flex: 1; min-width: 0; }
.sticky-buy .sb-name { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-buy .price { font-size: 19px; }

/* ---------- Cart ---------- */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.cart-list { overflow: hidden; }
.cart-list-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.cart-item { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto 110px; gap: 20px; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line-2); transition: opacity 200ms, transform 200ms; }
.cart-item:last-child { border-bottom: 0; }
.cart-item.is-removing { opacity: 0; transform: translateX(-12px); }
.ci-media { width: 104px; height: 104px; border-radius: 12px; display: grid; place-items: center; }
.ci-media svg { width: 78%; }
.ci-info { min-width: 0; display: grid; gap: 4px; }
.ci-name { font-weight: 600; font-size: 15.5px; line-height: 1.35; }
.ci-name:hover { text-decoration: underline; }
.ci-meta { font-size: 13px; color: var(--muted); }
.ci-actions { display: flex; gap: 16px; margin-top: 4px; }
.ci-actions button { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-2); font-weight: 500; }
.ci-actions button:hover { color: var(--red); }
.ci-actions button.ci-save:hover { color: var(--ink); }
.ci-actions .ico { width: 15px; height: 15px; }
.ci-price { text-align: right; }
.ci-price .price { font-size: 18px; }
.ci-price small { display: block; font-size: 12.5px; color: var(--muted); }

.summary { position: sticky; top: 144px; display: grid; gap: 16px; }
.summary h2 { font-size: 20px; }
.sum-lines { display: grid; gap: 10px; font-size: 15px; }
.sum-line { display: flex; justify-content: space-between; gap: 12px; }
.sum-line span:first-child { color: var(--ink-2); }
.sum-line .free { color: var(--green); font-weight: 600; }
.sum-line.discount span:last-child { color: var(--green); font-weight: 600; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--line); }
.sum-total span:first-child { font-weight: 700; font-size: 16px; }
.sum-total .price { font-size: 26px; }
.sum-vat { font-size: 12.5px; color: var(--muted); text-align: right; margin-top: -10px; }
.ship-progress { padding: 14px; border-radius: 12px; background: var(--bg-soft); font-size: 13.5px; }
.ship-progress.is-free { background: var(--green-50); color: var(--green); font-weight: 500; }
.ship-progress .track { height: 6px; border-radius: 99px; background: #E1E4E8; margin-top: 10px; overflow: hidden; }
.ship-progress .track i { display: block; height: 100%; background: var(--yellow-hover); border-radius: 99px; transition: width 400ms var(--ease); }
.promo-code { display: flex; gap: 8px; }
.promo-code .input { height: 42px; }
.promo-code .btn { height: 42px; }
.promo-toggle { font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); justify-self: start; }
.promo-msg { font-size: 13px; }
.promo-msg.ok { color: var(--green); }
.promo-msg.err { color: var(--red); }
.summary-trust { display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.summary-trust li { display: flex; gap: 8px; align-items: center; }
.summary-trust .ico { width: 16px; height: 16px; color: var(--green); }
.cart-mobile-bar { display: none; }

/* ---------- Checkout ---------- */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; padding-top: 28px; }
.stepper { display: flex; align-items: center; margin-bottom: 28px; counter-reset: step; }
.step { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--subtle); white-space: nowrap; }
.step-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: #fff; font-size: 14px; font-weight: 700; color: var(--subtle); transition: all 200ms var(--ease); }
.step-dot .ico { width: 16px; height: 16px; }
.step-line { flex: 1; height: 2px; background: var(--line); margin: 0 14px; min-width: 20px; border-radius: 2px; position: relative; overflow: hidden; }
.step-line::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease); }
.step-line.is-done::after { transform: scaleX(1); }
.step.is-active { color: var(--ink); }
.step.is-active .step-dot { border-color: var(--yellow-hover); background: var(--yellow); color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 198, 41, .25); }
.step.is-done { color: var(--ink-2); cursor: pointer; }
.step.is-done .step-dot { border-color: var(--ink); background: var(--ink); color: #fff; }
.step-panel { animation: fadeUp 260ms var(--ease) both; }
.step-panel h2 { font-size: 22px; margin-bottom: 4px; }
.step-panel > .muted { margin-bottom: 20px; }
.form-section + .form-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.form-section h3 { font-size: 16px; margin-bottom: 14px; }
.step-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; }
.step-actions .btn-ghost { padding-left: 0; }
.review-block { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; display: flex; justify-content: space-between; gap: 16px; }
.review-block + .review-block { margin-top: 12px; }
.review-block h3 { font-size: 15px; margin-bottom: 6px; }
.review-block p { font-size: 14px; color: var(--ink-2); }
.review-block button { font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; }
.mini-items { display: grid; gap: 12px; max-height: 300px; overflow-y: auto; }
.mini-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.mini-thumb { position: relative; width: 56px; height: 56px; border-radius: 10px; display: grid; place-items: center; }
.mini-thumb svg { width: 44px; }
.mini-thumb b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 11px; display: grid; place-items: center; padding: 0 5px; }
.mini-item span { line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-item strong { white-space: nowrap; }
.success { text-align: center; max-width: 620px; margin: 24px auto; padding: 48px 32px; }
.success-ico { width: 76px; height: 76px; border-radius: 50%; background: var(--green-50); color: var(--green); display: grid; place-items: center; margin: 0 auto 20px; animation: pop 500ms var(--ease) both; }
.success-ico .ico { width: 36px; height: 36px; stroke-width: 2.4; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.success h1 { font-size: 28px; margin-bottom: 8px; }
.success .order-no { display: inline-block; margin: 18px 0; padding: 10px 18px; border-radius: 10px; background: var(--bg-soft); font-weight: 700; font-family: var(--font-head); letter-spacing: .02em; }
.success-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- Auth ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 420px); gap: 32px; justify-content: center; padding: 40px 0 72px; align-items: start; }
.auth-card { padding: 36px; }
.auth-card h1 { font-size: 26px; margin-bottom: 6px; }
.auth-card > .muted { margin-bottom: 24px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-soft); border-radius: 12px; padding: 4px; margin-bottom: 26px; }
.seg button { height: 40px; border-radius: 9px; font-weight: 600; font-size: 14.5px; color: var(--muted); transition: all var(--fast); }
.seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.auth-form { display: grid; gap: 16px; }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.auth-row a, .auth-row button { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); font-size: 14px; }
.divider { display: flex; align-items: center; gap: 14px; color: var(--subtle); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-side { padding: 32px; background: var(--yellow-50); border: 1px solid #F6E5AE; border-radius: var(--radius-lg); }
.auth-side h2 { font-size: 20px; margin-bottom: 18px; }
.auth-side li { display: flex; gap: 14px; align-items: flex-start; }
.auth-side li + li { margin-top: 18px; }
.auth-side .a-ico { width: 40px; height: 40px; border-radius: 10px; background: #fff; display: grid; place-items: center; flex: none; }
.auth-side .a-ico .ico { width: 20px; height: 20px; }
.auth-side strong { display: block; font-size: 15px; }
.auth-side span { font-size: 14px; color: var(--ink-2); }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
.pw-meter i { height: 4px; border-radius: 2px; background: var(--line); transition: background var(--fast); }
.pw-meter[data-level="1"] i:nth-child(-n+1) { background: var(--red); }
.pw-meter[data-level="2"] i:nth-child(-n+2) { background: var(--orange); }
.pw-meter[data-level="3"] i:nth-child(-n+3) { background: #C9A400; }
.pw-meter[data-level="4"] i { background: var(--green); }

/* ---------- Account ---------- */
.account { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 12px; }
.acc-nav { position: sticky; top: 144px; padding: 10px; }
.acc-user { display: flex; align-items: center; gap: 12px; padding: 12px 12px 16px; border-bottom: 1px solid var(--line-2); margin-bottom: 8px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font-weight: 800; font-family: var(--font-head); flex: none; }
.acc-user strong { display: block; font-size: 15px; }
.acc-user span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 160px; }
.acc-nav a, .acc-nav button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 10px; font-weight: 500; font-size: 14.5px; color: var(--ink-2); text-align: left; }
.acc-nav a:hover, .acc-nav button:hover { background: var(--bg-soft); color: var(--ink); }
.acc-nav a[aria-current="page"] { background: var(--yellow-50); color: var(--ink); font-weight: 600; }
.acc-nav a[aria-current="page"] .ico { color: var(--yellow-ink); }
.acc-nav .ico { width: 20px; height: 20px; color: var(--muted); }
.acc-nav .sep { height: 1px; background: var(--line-2); margin: 8px 0; }
.acc-nav em { margin-left: auto; font-style: normal; font-size: 12px; background: var(--bg-soft); padding: 1px 8px; border-radius: 99px; color: var(--ink-2); }
.acc-panel { animation: fadeUp 240ms var(--ease) both; }
.acc-panel > h1 { font-size: 26px; margin-bottom: 4px; }
.acc-panel > .muted { margin-bottom: 24px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; }
.stat { padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
.stat-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-soft); display: grid; place-items: center; flex: none; }
.stat b { display: block; font-family: var(--font-head); font-size: 22px; line-height: 1.1; }
.stat span { font-size: 13.5px; color: var(--muted); }
.acc-section + .acc-section { margin-top: 32px; }
.acc-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; }
.acc-section-head h2 { font-size: 19px; }
.order-card { padding: 22px; }
.order-card + .order-card { margin-top: 14px; }
.order-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.order-top h3 { font-size: 17px; }
.order-top p { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.status { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-transit { background: var(--blue-50); color: var(--blue); }
.status-done { background: var(--green-50); color: var(--green); }
.status-new { background: var(--yellow-50); color: var(--yellow-ink); }
.tracker { display: grid; grid-template-columns: repeat(4, 1fr); margin: 24px 0 18px; }
.trk { position: relative; text-align: center; font-size: 13px; color: var(--subtle); font-weight: 500; }
.trk::before { content: ""; position: absolute; top: 13px; left: -50%; right: 50%; height: 3px; background: var(--line); z-index: 0; }
.trk:first-child::before { display: none; }
.trk.is-done::before, .trk.is-active::before { background: var(--ink); }
.trk i { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); background: #fff; display: grid; place-items: center; margin: 0 auto 8px; }
.trk i .ico { width: 14px; height: 14px; }
.trk.is-done { color: var(--ink-2); }
.trk.is-done i { background: var(--ink); border-color: var(--ink); color: #fff; }
.trk.is-active { color: var(--ink); font-weight: 600; }
.trk.is-active i { background: var(--yellow); border-color: var(--yellow-hover); box-shadow: 0 0 0 4px rgba(255, 198, 41, .25); }
.order-items { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.order-items .mini-thumb { width: 52px; height: 52px; }
.order-items .mini-thumb svg { width: 40px; }
.order-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 14px; }
.order-foot .btns { display: flex; gap: 8px; }
.order-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.order-table th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--bg-softer); }
.order-table td { padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.order-table tr:last-child td { border-bottom: 0; }
.order-table td:last-child { text-align: right; }
.address-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.address { padding: 20px; position: relative; font-size: 14.5px; line-height: 1.6; }
.address .badge { position: absolute; top: 18px; right: 18px; }
.address strong { display: block; margin-bottom: 4px; }
.address .addr-actions { display: flex; gap: 16px; margin-top: 12px; font-size: 14px; font-weight: 600; }
.address .addr-actions button { text-decoration: underline; text-underline-offset: 3px; }
.address-add { display: grid; place-items: center; text-align: center; border: 1.5px dashed var(--line); border-radius: var(--radius-lg); padding: 20px; color: var(--ink-2); font-weight: 600; min-height: 180px; transition: all var(--fast); }
.address-add:hover { border-color: var(--yellow-hover); background: var(--yellow-50); }
.address-add .ico { margin: 0 auto 8px; }
.setting { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 22px; }
.setting + .setting { border-top: 1px solid var(--line-2); }
.setting strong { display: block; font-size: 15px; }
.setting span { font-size: 13.5px; color: var(--muted); }
.demo-banner { margin-bottom: 20px; }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 120; display: grid; gap: 10px; width: min(420px, calc(100vw - 32px)); justify-items: stretch; }
.toast {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
  animation: toastIn 260ms var(--ease) both;
}
.toast.is-leaving { animation: toastOut 200ms var(--ease) both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }
.toast-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--green-50); color: var(--green); display: grid; place-items: center; flex: none; }
.toast-ico .ico { width: 18px; height: 18px; }
.toast-ico.t-heart { background: var(--red-50); color: var(--red); }
.toast-ico.t-heart .ico { fill: var(--red); }
.toast-ico.t-info { background: var(--bg-soft); color: var(--ink-2); }
.toast-thumb { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.toast-thumb svg { width: 36px; }
.toast-body { flex: 1; min-width: 0; font-size: 14px; }
.toast-body strong { display: block; font-size: 14px; }
.toast-body span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--muted); font-size: 13px; overflow: hidden; }
.toast-action { font-size: 13.5px; font-weight: 700; white-space: nowrap; padding: 8px 10px; border-radius: 8px; background: var(--yellow); }
.toast-action:hover { background: var(--yellow-hover); }
.toast-action.plain { background: none; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-grid.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: repeat(4, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .listing { grid-template-columns: 230px minmax(0, 1fr); gap: 24px; }
  .product-grid.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mainnav .nav-right { display: none; }
}

@media (max-width: 1000px) {
  .header-main { grid-template-columns: auto auto 1fr; grid-template-areas: "menu logo actions" "search search search"; gap: 4px 8px; height: auto; padding-top: 10px; padding-bottom: 12px; }
  .menu-toggle { display: grid; grid-area: menu; margin-left: -8px; }
  .logo { grid-area: logo; font-size: 20px; }
  .logo-mark { width: 28px; height: 28px; }
  .search { grid-area: search; max-width: none; margin-top: 6px; }
  .header-actions { grid-area: actions; justify-self: end; }
  .action { min-width: 0; padding: 8px; }
  .action-label { display: none; }
  .count { right: 2px; top: 2px; }
  .mainnav { display: none; }
  .topbar li:nth-child(n+2) { display: none; }
  .header-minimal .header-main { grid-template-areas: none; grid-template-columns: auto 1fr; padding: 0; height: 64px; }
  .header-minimal .back-link { display: none; }
  .secure-note { justify-self: end; }

  .hero-card { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 36px 28px 8px; }
  .hero-visual { padding: 20px 28px 28px; height: 300px; }
  .hv-rating { left: 40px; top: 30px; }

  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .promo { flex-direction: column; align-items: flex-start; padding: 28px; }
  .promo-side { width: 100%; justify-content: space-between; }
  .footer-service { grid-template-columns: 1fr; gap: 14px; }

  .listing { grid-template-columns: 1fr; }
  .filter-toggle { display: inline-flex; }
  .filters {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(380px, 92vw); max-height: none; z-index: 100;
    background: #fff; padding: 0; box-shadow: var(--shadow-lg);
    transform: translateX(-100%); visibility: hidden; transition: transform 240ms var(--ease), visibility 240ms;
    display: flex; flex-direction: column;
  }
  .filters.is-open { transform: none; visibility: visible; }
  .filters-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); }
  .filters-head h2 { font-size: 18px; }
  .filters-body { flex: 1; overflow-y: auto; padding: 0 20px; }
  .filter-group:first-of-type { border-top: 0; }
  .filters-foot { display: flex; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  .filters-foot .btn { flex: 1; }
  .product-grid.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pdp { grid-template-columns: 1fr; gap: 28px; }
  .gallery { position: static; grid-template-columns: 1fr; }
  .gallery-main { grid-column: 1; }
  .thumbs { grid-row: 2; flex-direction: row; overflow-x: auto; height: auto; min-height: 0; }
  .sticky-buy { display: flex; }
  body[data-page="product"] .toast-wrap { bottom: 86px; }

  .cart-layout, .checkout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .checkout .summary { order: -1; }
  .checkout .summary .mini-items { max-height: none; }
  .account { grid-template-columns: 1fr; }
  .acc-nav { position: static; display: flex; overflow-x: auto; gap: 4px; padding: 6px; scrollbar-width: none; }
  .acc-nav::-webkit-scrollbar { display: none; }
  .acc-user, .acc-nav .sep { display: none; }
  .acc-nav a, .acc-nav button { width: auto; white-space: nowrap; padding: 9px 12px; }
  .acc-nav em { margin-left: 4px; }
  .auth { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; padding-top: 24px; }
  .reviews-summary { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 760px) {
  .container { padding: 0 16px; }
  .section { padding: 36px 0; }
  .section-head h2 { font-size: 22px; }
  .page-title { font-size: 25px; }

  .hero { padding-top: 12px; }
  .hero-copy { padding: 28px 22px 4px; }
  .hero p { font-size: 15.5px; }
  .hero-actions .btn { flex: 1; padding: 0 16px; }
  .hero-usps { gap: 6px 16px; margin-top: 20px; font-size: 13px; }
  .hero-visual { padding: 18px 22px 22px; height: 250px; gap: 10px; }
  .hv-rating { display: none; }
  .hv-label { font-size: 12px; padding: 6px 9px; }

  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-card { padding: 12px; gap: 10px; }
  .cat-art { height: 80px; }
  .cat-art svg { width: 68px; height: 68px; }
  .cat-card p { display: none; }

  .product-grid, .product-grid.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pc-body { padding: 10px 12px 12px; gap: 4px; }
  .pc-name { font-size: 14px; }
  .pc-desc { display: none; }
  .price { font-size: 18px; }
  .pc-bottom .btn { height: 40px; font-size: 14px; padding: 0 10px; }
  .pc-bottom .btn .btn-text-long { display: none; }
  .wish-btn { width: 34px; height: 34px; top: 8px; right: 8px; }
  .badges { top: 8px; left: 8px; }
  .badge { height: 22px; font-size: 11px; padding: 0 6px; }
  .rating { font-size: 12px; }
  .stars { font-size: 12px; }
  .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; margin: 0 -16px; padding: 0 16px; }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip { flex: none; }

  .why-grid { grid-template-columns: 1fr; gap: 10px; }
  .why-item { display: grid; grid-template-columns: 48px 1fr; gap: 0 14px; padding: 18px; }
  .why-ico { grid-row: span 2; margin: 0; }
  .promo h2 { font-size: 22px; }
  .promo-art { display: none; }
  .promo-side .btn { width: 100%; }

  .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .listing-head h1 { font-size: 23px; }
  .results-bar { gap: 10px; }
  .results-count { order: 3; width: 100%; font-size: 14px; }
  .sort { margin-left: 0; flex: 1; }
  .sort > span { display: none; }
  .sort .select { min-width: 0; width: 100%; }
  .filter-toggle { flex: 1; }

  .pdp h1 { font-size: 23px; }
  .gallery { margin: 0 -16px; }
  .gallery-main { border-radius: 0; }
  .thumbs { display: none; }
  .gallery-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
  .gallery-dots button { width: 8px; height: 8px; border-radius: 50%; background: #D5D9DF; transition: all var(--fast); }
  .gallery-dots button[aria-current="true"] { background: var(--ink); width: 20px; border-radius: 4px; }
  .buy-box { padding: 18px; }
  .buy-box .price { font-size: 30px; }
  .buy-row { flex-direction: column; flex-wrap: nowrap; } .buy-row .btn { flex: 0 0 auto; } .buy-row .btn span { overflow: hidden; text-overflow: ellipsis; }
  .tabs { margin-top: 36px; }
  .spec-table th, .spec-table td { padding: 10px 12px; }

  .cart-item { grid-template-columns: 80px minmax(0, 1fr); gap: 8px 14px; padding: 16px; align-items: start; }
  .ci-media { width: 80px; height: 80px; grid-row: span 2; }
  .ci-info { grid-column: 2; }
  .cart-item .qty { grid-column: 2; justify-self: start; }
  .ci-price { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; }
  .cart-list-head { padding: 14px 16px; }
  .cart-mobile-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: #fff; border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 12px; align-items: center; box-shadow: 0 -6px 20px rgba(31, 36, 45, .08); }
  .cart-mobile-bar .cmb-total { flex: 1; font-size: 13px; color: var(--muted); }
  .cart-mobile-bar .price { display: block; font-size: 20px; }
  body[data-page="cart"] .footer { padding-bottom: 72px; }
  body[data-page="cart"] .toast-wrap, body[data-page="product"] .toast-wrap { bottom: 86px; }

  .stepper .step-label { display: none; }
  .step.is-active .step-label { display: inline; }
  .step-line { margin: 0 8px; }
  .checkout { padding-top: 16px; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .col-6, .col-4 { grid-column: span 2; }
  .col-3 { grid-column: span 2; }
  .col-2 { grid-column: span 1; }
  .step-actions { flex-direction: column-reverse; align-items: stretch; }
  .step-actions .btn { width: 100%; }
  .step-actions .btn-ghost { justify-content: center; }
  .option { padding: 14px; gap: 12px; }

  .auth-card { padding: 24px 20px; }
  .auth-side { padding: 24px 20px; }

  .stat-grid { grid-template-columns: 1fr; gap: 10px; }
  .address-grid { grid-template-columns: 1fr; }
  .order-table thead { display: none; }
  .order-table tr { display: grid; grid-template-columns: 1fr auto; padding: 14px 16px; border-bottom: 1px solid var(--line-2); gap: 4px 12px; }
  .order-table td { padding: 0; border: 0; }
  .tracker .trk { font-size: 11.5px; }
  .order-foot .btns { width: 100%; }
  .order-foot .btns .btn { flex: 1; }
  .toast-wrap { right: 16px; left: 16px; bottom: 16px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---------- Small additions ---------- */
ol.stepper { list-style: none; padding: 0; margin: 0 0 28px; }
a.stat { color: inherit; transition: border-color var(--fast), box-shadow var(--fast); }
a.stat:hover { border-color: #D3D7DD; box-shadow: var(--shadow-sm); }
@media (max-width: 1000px) { .hide-sm { display: none; } }
.icon-btn.menu-toggle { display: none; }
@media (max-width: 1000px) { .icon-btn.menu-toggle { display: grid; } }
.toast { min-width: 0; max-width: 100%; }
.toast-wrap > * { min-width: 0; }
.header-minimal .logo, .header-minimal .secure-note { grid-area: auto; }
.cart-list-head > span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 1000px) { .header-minimal .header-main { padding: 0 24px; } } @media (max-width: 760px) { .header-minimal .header-main { padding: 0 16px; } }


/* ==========================================================================
   Webshop op Supabase — onderdelen die in het prototype nog niet bestonden
   ========================================================================== */
.stock.wait { color: var(--blue); }

.p-img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 8%; }
.gallery-main .p-img { padding: 6%; }

.price-row { align-items: baseline; }
.price-vat { font-size: 12.5px; color: var(--muted); font-weight: 500; }

.more-wrap { grid-column: 1 / -1; display: flex; justify-content: center; padding: 20px 0 4px; }

.options-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .options-row { grid-template-columns: 1fr; } }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

.notice-err { background: var(--red-50); color: var(--red); border: 1px solid #F5C9C9; border-radius: var(--radius); padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }

.btn-sm { padding: 8px 14px; font-size: 14px; }

/* Account */
.acc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.acc-tile { display: flex; flex-direction: column; gap: 2px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); background: var(--bg-softer); }
.acc-tile:hover { border-color: var(--yellow); background: var(--yellow-50); }
.acc-tile .ico { color: var(--muted); margin-bottom: 6px; }
.acc-tile strong { font-family: var(--font-head); font-size: 20px; }
.acc-tile span { font-size: 13px; color: var(--muted); }
.acc-logout { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; margin-top: 6px; border: 0; background: none; border-radius: var(--radius-sm); font: inherit; color: var(--muted); cursor: pointer; text-align: left; }
.acc-logout:hover { background: var(--bg-soft); color: var(--ink); }

/* Bestellingen */
.order { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-top: 14px; }
.order-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.order-lines { list-style: none; margin: 0 0 10px; padding: 0; font-size: 14px; }
.order-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line-2); color: var(--ink-2); }
.order-lines li:last-child { border-bottom: 0; }
.order-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--line); margin-bottom: 12px; }
.order-status { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-2); white-space: nowrap; }
.order-status.s-verzonden, .order-status.s-geleverd { background: var(--green-50); color: var(--green); }
.order-status.s-wacht_op_voorraad, .order-status.s-on_hold { background: var(--orange-50); color: var(--orange); }
.order-status.s-geannuleerd { background: var(--red-50); color: var(--red); }
.order-status.s-nieuw, .order-status.s-in_verwerking, .order-status.s-klaar_voor_verzending { background: var(--blue-50); color: var(--blue); }

/* Adressen */
.addr { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.addr p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; }
.chip-mini { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--yellow-50); color: var(--yellow-ink); }


/* ==========================================================================
   Beheer (admin.html) — enkel voor personeel
   ========================================================================== */
.admin-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 3px 8px; border-radius: 999px; }
.admin-login { min-height: 100vh; display: grid; place-items: center; background: var(--bg-soft); padding: 24px; }
.admin-login .card { width: 100%; max-width: 420px; }
.admin-login h1 { font-size: 26px; margin: 12px 0 4px; }

.admin-bar { background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 20; }
.admin-bar-in { display: flex; align-items: center; gap: 20px; min-height: 60px; flex-wrap: wrap; }
.admin-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 17px; }
.admin-tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.admin-tabs button { display: flex; align-items: center; gap: 7px; background: none; border: 0; color: #C9CDD4; font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.admin-tabs button:hover { background: rgba(255,255,255,.1); color: #fff; }
.admin-tabs button.is-on { background: var(--yellow); color: var(--ink); font-weight: 700; }
.tab-n { background: var(--red); color: #fff; font-size: 11.5px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 999px; display: inline-grid; place-items: center; padding: 0 6px; }
.admin-tabs .is-on .tab-n { background: var(--ink); }
.admin-me { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #C9CDD4; }
.admin-me .link { color: #fff; background: none; border: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.admin-body { padding: 28px 0 60px; }

.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-filters .chip.is-on, .admin-status .chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.admin-card { margin-bottom: 14px; }
.admin-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-card h3 { font-size: 17px; margin: 0 0 2px; }
.admin-card .small { font-size: 12.5px; }
.admin-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-2); white-space: nowrap; }
.pill.warn { background: var(--orange-50); color: var(--orange); }
.pill.s-goedgekeurd, .pill.s-verzonden, .pill.s-geleverd { background: var(--green-50); color: var(--green); }
.pill.s-aangevraagd, .pill.s-wacht_op_voorraad, .pill.s-on_hold { background: var(--orange-50); color: var(--orange); }
.pill.s-geweigerd, .pill.s-geblokkeerd, .pill.s-geannuleerd { background: var(--red-50); color: var(--red); }
.pill.s-nieuw, .pill.s-in_verwerking, .pill.s-klaar_voor_verzending { background: var(--blue-50); color: var(--blue); }

.admin-actions { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.admin-actions .field { margin: 0; }
.admin-actions .field span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }

.admin-lines { width: 100%; border-collapse: collapse; margin: 14px 0 10px; font-size: 14.5px; }
.admin-lines td { padding: 7px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.admin-lines tr:last-child td { border-bottom: 0; }
.admin-lines .cnt { width: 46px; font-weight: 700; }
.admin-lines .loc { width: 70px; color: var(--muted); font-variant-numeric: tabular-nums; }
.admin-lines .bo { width: 110px; }
.admin-lines .amt { width: 90px; text-align: right; font-weight: 700; white-space: nowrap; }
.admin-status { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.admin-status .chip { font-size: 13px; padding: 6px 12px; }

.assort { margin-top: 24px; }
.assort h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 10px; }
.assort-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.assort-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; background: none; border: 0; border-top: 1px solid var(--line-2); font: inherit; text-align: left; cursor: pointer; }
.assort-row:first-child { border-top: 0; }
.assort-row:hover { background: var(--bg-soft); }
.assort-row .box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 14px; color: #fff; flex: none; }
.assort-row.is-on .box { background: var(--ink); border-color: var(--ink); }
.assort-row .nm { flex: 1; }
.assort-row.is-on .nm { font-weight: 700; }

/* ==========================================================================
   Beheer — schil met zijmenu, uiterlijk, homepage, acties en producten
   ========================================================================== */
.admin-bar-in { display: flex; align-items: center; gap: 18px; min-height: 58px; padding: 0 20px; }
.admin-bar-in .admin-brand { flex: none; }
.admin-view { margin-left: auto; color: #C9CDD4 !important; font-size: 14px; }
.admin-view:hover { color: #fff !important; }
.admin-burger { display: none; width: 34px; height: 34px; border: 0; background: rgba(255,255,255,.12); border-radius: 9px; cursor: pointer; position: relative; }
.admin-burger span, .admin-burger::before, .admin-burger::after { content: ''; position: absolute; left: 9px; right: 9px; height: 2px; background: #fff; border-radius: 2px; }
.admin-burger span { top: 16px; } .admin-burger::before { top: 11px; } .admin-burger::after { top: 21px; }

.admin-shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); align-items: start; min-height: calc(100vh - 58px); background: var(--bg-soft); }
.admin-nav { position: sticky; top: 58px; align-self: start; padding: 20px 12px 40px; background: #fff; border-right: 1px solid var(--line); min-height: calc(100vh - 58px); }
.nav-group { margin-bottom: 20px; }
.nav-group h6 { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--subtle); margin: 0 0 6px 12px; font-weight: 800; }
.admin-nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink-2); border-radius: 10px; cursor: pointer; text-align: left; }
.admin-nav button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.admin-nav button:hover { background: var(--bg-soft); color: var(--ink); }
.admin-nav button.is-on { background: var(--ink); color: #fff; }
.admin-nav button.is-on svg { opacity: 1; }
.admin-nav .tab-n { margin-left: auto; }
.admin-main { padding: 26px 28px 80px; min-width: 0; }
.admin-title { font-size: 24px; margin: 0 0 18px; letter-spacing: -.02em; }

/* schakelaar */
.switch { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 38px; height: 22px; border-radius: 999px; background: var(--line); position: relative; transition: background var(--fast) var(--ease); flex: none; }
.switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--fast) var(--ease); }
.switch input:checked + .track { background: var(--green); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--ink); outline-offset: 2px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.stack { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.colin { display: flex; gap: 8px; align-items: center; }
.colin input[type="color"] { width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: none; cursor: pointer; flex: none; }
.btn-sm { padding: 7px 14px; font-size: 14px; }
.btn-ghost { background: none; border: 1px solid var(--line); color: var(--red); }
.btn-ghost:hover { background: var(--red-50); }

/* opslagbalk */
.savebar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 12px 0; margin-top: 8px; background: linear-gradient(to top, var(--bg-soft) 70%, transparent); z-index: 5; }

/* melding in Beheer (alleen #toast, anders botst het met de winkelmelding) */
#toast.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: all 200ms var(--ease); z-index: 60; }
#toast.is-on { opacity: 1; transform: translate(-50%, 0); }
#toast.is-bad { background: var(--red); }

/* ---- Uiterlijk ---- */
.look-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.look-form section { margin-bottom: 16px; }
.look-form h3 { font-size: 16px; margin: 0 0 12px; }
.look-prev { position: sticky; top: 82px; }
.prev-wrap { --a: #FFC629; --ah: #F5B800; --as: #FFF9E6; --ai: #8A6200; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow); font-size: 12px; }
.prev-ann { padding: 6px 12px; font-size: 11px; font-weight: 700; text-align: center; }
.prev-bar { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line-2); }
.prev-bar strong { font-family: var(--font-head); }
.prev-nav { color: var(--muted); flex: 1; }
.prev-cart { background: var(--as); color: var(--ai); padding: 4px 9px; border-radius: 999px; font-weight: 700; }
/* De voorbeeldweergave volgt dezelfde opbouw als de echte hero:
   naam groot, één regel eronder, dan het zoekveld en de afdelingen. */
.prev-hero { padding: 26px 16px 22px; background: var(--as); text-align: center; }
.prev-hero #prev-merk { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin-bottom: 5px; }
.prev-hero p { margin: 0 auto 12px; color: var(--muted); font-size: 11.5px; max-width: 24ch; line-height: 1.35; }
.prev-zoek {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 999px;
  padding: 4px 4px 4px 12px; font-size: 10.5px; color: var(--muted); max-width: 230px; margin: 0 auto;
}
.prev-btn { display: inline-block; background: var(--a); color: var(--ink); padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 10.5px; font-style: normal; flex: none; }
.prev-chips { display: flex; gap: 5px; justify-content: center; margin-top: 10px; }
.prev-chips i { width: 42px; height: 13px; border-radius: 999px; background: rgba(255,255,255,.8); border: 1px solid rgba(0,0,0,.08); }
.prev-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.prev-cards span { height: 54px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-softer); }
.preset-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.preset { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px 6px 8px; cursor: pointer; font: inherit; }
.preset:hover { border-color: var(--ink); }
.preset span { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }
.preset em { font-style: normal; font-size: 13px; font-weight: 600; margin-left: 4px; }

/* ---- Thema's ---- */
.themes { margin-top: 36px; }
.themes h2 { font-size: 19px; margin: 0 0 2px; }
.mode-card { margin-bottom: 16px; }
.mode-card .input { max-width: 420px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.theme-card { padding: 16px; }
.theme-card.is-forced { outline: 2px solid var(--green); }
.theme-head { display: flex; align-items: center; gap: 12px; }
.theme-emoji { font-size: 26px; }
.theme-head div { flex: 1; min-width: 0; }
.theme-head p { margin: 2px 0 0; }
.theme-dots { display: flex; gap: 3px; }
.theme-dots i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }
.theme-card details { margin: 12px 0; }
.theme-actions { display: flex; gap: 8px; margin-top: 10px; }
.theme-show { width: 100%; }
.fx-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 14px; }

#admin-root details > summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--ink-2); padding: 8px 0; list-style: none; }
#admin-root details > summary::-webkit-details-marker { display: none; }
#admin-root details > summary::before { content: '\25B8'; display: inline-block; margin-right: 8px; transition: transform var(--fast) var(--ease); }
#admin-root details[open] > summary::before { transform: rotate(90deg); }

/* ---- Homepage ---- */
.add-wrap { position: relative; }
.add-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 330px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; z-index: 30; max-height: 70vh; overflow: auto; }
.add-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; padding: 9px 12px; border-radius: 9px; cursor: pointer; }
.add-menu button:hover { background: var(--bg-soft); }
.add-menu em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); }
.blocks, .promos, .prods { display: flex; flex-direction: column; gap: 10px; }
.block-card, .promo-card, .prod-card { padding: 14px 16px; }
.block-card.is-off, .promo-card.is-off { opacity: .62; }
.block-head, .promo-head, .prod-head { display: flex; align-items: center; gap: 14px; }
.block-id, .promo-id, .prod-id { flex: 1; min-width: 0; }
.block-id p, .promo-id p, .prod-id p { margin: 2px 0 0; }
.block-move { display: flex; flex-direction: column; gap: 2px; }
.block-move button { width: 26px; height: 20px; border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; font-size: 11px; line-height: 1; color: var(--ink-2); }
.block-move button:disabled { opacity: .35; cursor: default; }
.block-form { padding-top: 6px; }
.block-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.usp-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 16px; }
.usp-item { border: 1px solid var(--line-2); border-radius: var(--radius); padding: 12px 12px 6px; margin-bottom: 12px; }

/* ---- Acties ---- */
.promo-val { display: grid; place-items: center; min-width: 58px; height: 42px; padding: 0 10px; border-radius: 10px; color: #fff; font-weight: 800; font-size: 14px; }
.pill.p-loopt { background: var(--green-50); color: var(--green); }
.pill.p-gepland { background: var(--blue-50); color: var(--blue); }
.pill.p-af, .pill.p-uit { background: var(--bg-soft); color: var(--muted); }
.pill.ok { background: var(--green-50); color: var(--green); }
.art-add { display: flex; gap: 8px; margin-bottom: 10px; }
.art-add .input { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.chip-x { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-soft); border-radius: 999px; padding: 5px 7px 5px 12px; font-size: 13px; font-weight: 600; }
.chip-x button { border: 0; background: var(--line); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1; color: var(--ink-2); }

/* ---- Producten ---- */
.prod-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.prod-tools .input { max-width: 340px; }
.prod-tools .admin-filters { margin: 0; }
.prod-thumb { width: 48px; height: 48px; border-radius: 10px; background: var(--bg-soft); display: grid; place-items: center; overflow: hidden; flex: none; }
.prod-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* ==========================================================================
   Beheer — rustige werkomgeving: lichte achtergrond, witte kaarten, geel
   als accent. Geel kan geen tekstkleur zijn (te licht op wit), dus het zit
   in vlakken, randjes en het streepje naast het actieve menu-item.
   ========================================================================== */
body[data-page="admin"] { background: #F5F6F8; }

/* bovenbalk */
.admin-bar { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.admin-bar-in { gap: 14px; min-height: 62px; }
.admin-brand { gap: 9px; font-size: 16px; letter-spacing: -.01em; }
.admin-mark.is-foto { background: none; object-fit: contain; }
.admin-mark { width: 28px; height: 28px; border-radius: 9px; background: var(--yellow); color: var(--ink);
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 16px; flex: none; }
.admin-bar .admin-tag { background: var(--bg-soft); color: var(--muted); font-weight: 700; }
.admin-view { margin-left: auto; color: var(--ink-2) !important; font-size: 14px; font-weight: 600;
  text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; }
.admin-view:hover { color: var(--ink) !important; background: var(--bg-soft); border-color: #D8DCE3; }
.admin-me { color: var(--muted); gap: 10px; }
.admin-naam { font-weight: 600; color: var(--ink-2); }
.admin-avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; flex: none; }
.admin-me .link { color: var(--muted); text-decoration: none; font-weight: 600; }
.admin-me .link:hover { color: var(--ink); text-decoration: underline; }
.admin-burger { background: var(--bg-soft); }
.admin-burger span, .admin-burger::before, .admin-burger::after { background: var(--ink); }

/* zijmenu */
.admin-shell { grid-template-columns: 244px minmax(0, 1fr); min-height: calc(100vh - 62px); background: #F5F6F8; }
.admin-nav { top: 62px; height: calc(100vh - 62px); min-height: 0; overflow: auto;
  padding: 18px 12px 40px; border-right: 1px solid var(--line-2); }
.nav-group { margin-bottom: 22px; }
.nav-group h6 { font-size: 10.5px; letter-spacing: .1em; color: var(--subtle); margin-bottom: 8px; }
.admin-nav button, .admin-nav a {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; border: 0;
  background: none; font: inherit; font-weight: 600; font-size: 14.5px; color: var(--ink-2);
  border-radius: 10px; cursor: pointer; text-align: left; text-decoration: none; position: relative;
}
.admin-nav a svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.admin-nav button:hover, .admin-nav a:hover { background: var(--bg-soft); color: var(--ink); }
.admin-nav button.is-on { background: var(--yellow-50); color: var(--ink); font-weight: 700; }
.admin-nav button.is-on svg { opacity: 1; color: var(--yellow-ink); }
.admin-nav button.is-on::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--yellow); }
.nav-links { border-top: 1px solid var(--line-2); padding-top: 16px; }

/* werkblad */
.admin-main { padding: 26px 30px 90px; }
.admin-title { font-size: 28px; font-weight: 700; margin: 0 0 20px; }

/* kaarten: wit, zacht, met lucht — zoals de voorbeeldschermen */
body[data-page="admin"] .card,
body[data-page="admin"] .admin-card,
body[data-page="admin"] .assort-list {
  background: #fff; border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
body[data-page="admin"] .card-pad { padding: 22px 24px; }
body[data-page="admin"] .admin-card { margin-bottom: 16px; }
body[data-page="admin"] .admin-card h3 { font-size: 17px; letter-spacing: -.01em; }
body[data-page="admin"] .chip { border-radius: 999px; }
body[data-page="admin"] .admin-filters .chip.is-on { background: var(--yellow); color: var(--ink);
  border-color: var(--yellow); font-weight: 700; }
body[data-page="admin"] .admin-login { background: #F5F6F8; }

/* De opslaanbalk was een verloop dat over de kaarten eronder lag. Nu is het
   een echte balk met een rand, zodat je ziet waar het formulier stopt. */
body[data-page="admin"] .savebar {
  background: #fff;
  border: 1px solid var(--line-2, #EEF0F3); border-radius: 14px;
  box-shadow: 0 -1px 10px rgba(16,24,40,.06);
  padding: 12px 16px; margin: 18px 0 8px; bottom: 16px;
}
body[data-page="admin"] .themes { margin-top: 30px; }
body[data-page="admin"] .themes h2 { font-size: 20px; margin: 0 0 2px; }
body[data-page="admin"] .look-prev { top: 78px; }

/* ==========================================================================
   Pagina's — de blokkenlijst leest nu als een lijst, niet als een stapel
   ========================================================================== */
.block-card { border-radius: 14px; transition: border-color 120ms ease; }
.block-card:hover { border-color: #D8DCE3; }
.block-card.is-off { opacity: 1; background: #FBFCFD; }
.block-card.is-off .block-teken { background: var(--bg-soft, #F6F7F9); color: var(--subtle, #9AA1AC); }
.block-card.is-off .block-id strong { color: var(--muted, #6B7280); }
.block-teken {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  background: var(--yellow-50, #FFF9E6); color: var(--yellow-ink, #8A6200); border-radius: 11px;
}
.block-ico { width: 19px; height: 19px; }
.block-id strong { font-size: 15.5px; }
.block-merken { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }
.block-body > summary {
  list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 600;
  color: var(--muted, #6B7280); padding: 8px 0 2px;
}
.block-body > summary::-webkit-details-marker { display: none; }
.block-body > summary::before { content: '＋ '; }
.block-body[open] > summary::before { content: '－ '; }
.block-body > summary:hover { color: var(--ink, #2A2E35); }
.block-form { border-top: 1px solid var(--line-2, #EEF0F3); margin-top: 8px; padding-top: 14px; }
.block-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2, #EEF0F3); }

/* meerdere foto's naast elkaar, bijvoorbeeld in de fotogalerij */
.beeldlijst { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.beeldlijst-item { display: grid; gap: 6px; justify-items: center; }
.beeldlijst-item .beeld-voor { width: 96px; height: 72px; }
.beeldlijst-item .beeld-knoppen { gap: 2px; }

/* het voorbeeld bij Uiterlijk volgt de echte banner, foto incluis */
.prev-hero.is-foto { background-size: cover; background-position: 70% center; color: #fff; position: relative; }
.prev-hero.is-foto::before { content: ''; position: absolute; inset: 0; background: rgba(14,24,58,.76); }
.prev-hero.is-foto > * { position: relative; }
.prev-hero.is-foto p { color: rgba(255,255,255,.85); }

/* ==========================================================================
   Reclame — beelden in de huisstijl
   ========================================================================== */
.rc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 22px; align-items: start; }
.rc-form section { margin-bottom: 16px; }
.rc-form h3 { font-size: 16px; margin: 0 0 12px; }
.rc-prev { position: sticky; top: 78px; }
.rc-canvaswrap { background: #fff; border: 1px solid var(--line-2, #EEF0F3); border-radius: 16px; padding: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04); position: relative; }
.rc-canvaswrap canvas { display: block; width: 100%; height: auto; border-radius: 10px; background: #F4F6F8; }
.rc-canvaswrap[data-formaat="story"] canvas { max-height: 560px; width: auto; margin: 0 auto; }
.rc-balk { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 6px; background: rgba(0,0,0,.08);
  border-radius: 999px; overflow: hidden; }
.rc-balk div { height: 100%; width: 0; background: var(--yellow, #FFC629); transition: width 120ms linear; }
.rc-acties { display: grid; gap: 8px; margin: 14px 0 8px; }
.rc-acties .btn { justify-content: center; }

.rc-trefs { position: relative; z-index: 5; margin-top: 6px; background: #fff; border: 1px solid var(--line, #E5E7EB);
  border-radius: 12px; box-shadow: 0 10px 28px rgba(16,24,40,.1); overflow: hidden; }
.rc-trefs button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0;
  background: none; font: inherit; text-align: left; cursor: pointer; border-top: 1px solid var(--line-2, #EEF0F3); }
.rc-trefs button:first-child { border-top: 0; }
.rc-trefs button:hover { background: var(--bg-soft, #F6F7F9); }
.rc-trefs em, .rc-art em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted, #6B7280); }
.rc-gekozen { margin: 10px 0 14px; }
.rc-art { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--yellow-50, #FFF9E6);
  border-radius: 12px; }
.rc-art > span:nth-child(2) { flex: 1; min-width: 0; }

.rc-keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.rc-keuze { display: grid; gap: 3px; justify-items: start; text-align: left; padding: 12px; border: 1px solid var(--line-2, #EEF0F3);
  border-radius: 12px; background: #fff; font: inherit; cursor: pointer; }
.rc-keuze:hover { border-color: #D5DAE2; }
.rc-keuze.is-on { border-color: var(--yellow, #FFC629); background: var(--yellow-50, #FFF9E6); box-shadow: 0 0 0 2px var(--yellow-50, #FFF9E6); }
.rc-keuze strong { font-size: 14px; }
.rc-keuze em { font-style: normal; font-size: 12px; color: var(--muted, #6B7280); line-height: 1.3; }
.rc-vorm { display: block; background: #2A2E35; border-radius: 3px; margin-bottom: 4px; opacity: .8; }
.rc-vorm-post { width: 26px; height: 26px; }
.rc-vorm-story { width: 16px; height: 28px; }
.rc-vorm-banner { width: 34px; height: 18px; }
.rc-voorstel { margin-bottom: 18px; }
.rc-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.rc-chip { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line-2, #EEF0F3); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: inherit; }
.rc-chip:hover { border-color: #D5DAE2; background: var(--bg-soft, #F6F7F9); }
.rc-chip b { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #6B7280); }
.rc-chip.is-actie b { color: #B91C1C; } .rc-chip.is-kort b { color: #C2410C; } .rc-chip.is-nieuws b { color: #1D4ED8; }
.rc-chip strong { font-size: 14px; line-height: 1.25; }
.rc-chip em { font-style: normal; font-size: 12px; color: var(--muted, #6B7280); }
.rc-bijschrift { min-height: 170px; font-family: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; }
.rc-knopjes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.rc-bewaar-rij { display: flex; gap: 8px; margin-bottom: 12px; }
.rc-bewaar-rij .input { flex: 1; }
.rc-lijst { list-style: none; margin: 0; padding: 0; }
.rc-lijst li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-2, #EEF0F3); }
.rc-lijst li > span { flex: 1; min-width: 0; }
.rc-lijst em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted, #6B7280); }
.rc-art + .rc-art { margin-top: 6px; }
.rc-bewaar-rij { flex-wrap: wrap; }
.rc-bewaar-rij .input[type="date"], .rc-bewaar-rij select { flex: 0 0 auto; width: auto; }
.rc-st { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--bg-soft, #F6F7F9); color: var(--muted, #6B7280); vertical-align: 1px; }
.rc-st.is-nu { background: var(--yellow, #FFC629); color: #2A2E35; } .rc-st.is-laat { background: #FDECEC; color: #B91C1C; } .rc-st.is-klaar { background: #DCFCE7; color: #15803D; }
.rc-kalender { margin: 6px 0 14px; }
.rc-kal-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rc-kal-week, .rc-kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.rc-kal-week span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6B7280); text-align: center; }
.rc-kal-dag { min-height: 58px; padding: 4px; border: 1px solid var(--line-2, #EEF0F3); border-radius: 8px; background: #fff; cursor: pointer; display: grid; align-content: start; gap: 3px; }
.rc-kal-dag:hover { border-color: #D5DAE2; }
.rc-kal-dag b { font-size: 12px; color: var(--muted, #6B7280); }
.rc-kal-dag.is-vandaag { border-color: var(--yellow, #FFC629); box-shadow: inset 0 0 0 1px var(--yellow, #FFC629); } .rc-kal-dag.is-vandaag b { color: #2A2E35; }
.rc-kal-dag.is-voorbij { background: var(--bg-soft, #F6F7F9); }
.rc-kal-post { display: block; width: 100%; text-align: left; border: 0; border-radius: 5px; padding: 2px 5px; font: 600 11px/1.3 inherit; font-family: inherit; background: var(--yellow-50, #FFF9E6); color: #2A2E35; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-kal-post.is-geplaatst { background: #DCFCE7; color: #15803D; text-decoration: line-through; }
@media (max-width: 720px) { .rc-kal-dag { min-height: 40px; } .rc-kal-post { font-size: 10px; } }

/* schakelaar in een tabel, kleiner */
.switch.klein .track { transform: scale(.85); transform-origin: left center; }
.prod-tabel td.ws { width: 56px; }
.paneel-vak { background: var(--bg-soft, #F6F7F9); border-radius: 12px; padding: 12px 14px 4px; margin-bottom: 14px; }
.paneel-vak h4 { margin: 0 0 2px; font-size: 14px; }

@media (max-width: 1100px) {
  .rc-grid { grid-template-columns: 1fr; }
  .rc-prev { position: static; }
}

/* ==========================================================================
   Afbeeldingen — de opslagplaats en de kiezer
   ========================================================================== */
.media-upload {
  display: grid; gap: 4px; justify-items: center; text-align: center; cursor: pointer;
  padding: 22px; border: 2px dashed #D5DAE2; border-radius: 14px; background: #fff;
}
.media-upload:hover, .media-upload.is-over { border-color: var(--yellow, #FFC629); background: var(--yellow-50, #FFF9E6); }
.media-upload strong { font-size: 15.5px; }
.media-upload span { font-size: 13px; color: var(--muted, #6B7280); }
.media-upload.is-groot { padding: 34px 22px; }

.media-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.media-tegel {
  display: grid; gap: 2px; margin: 0; padding: 10px; text-align: left; font: inherit;
  background: #fff; border: 1px solid var(--line-2, #EEF0F3); border-radius: 14px; cursor: pointer;
  overflow: hidden; min-width: 0;
}
button.media-tegel:hover { border-color: var(--yellow, #FFC629); box-shadow: 0 2px 10px rgba(16,24,40,.07); }
.media-tegel.is-nu { border-color: var(--yellow, #FFC629); box-shadow: 0 0 0 3px var(--yellow-50, #FFF9E6); }
.media-beeld {
  display: block; position: relative; aspect-ratio: 4 / 3; margin-bottom: 6px;
  background: var(--bg-soft, #F6F7F9); border-radius: 10px; overflow: hidden;
  min-width: 0; min-height: 0; width: 100%;
}
.media-beeld img { position: absolute; inset: 0; }
.media-beeld img { width: 100%; height: 100%; object-fit: contain; }
.media-naam { font-size: 12.5px; font-weight: 600; word-break: break-all; line-height: 1.3; }
.media-meta { font-size: 11.5px; color: var(--muted, #6B7280); }
.media-acties { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.media-acties .btn { flex: 1; min-width: 0; justify-content: center; white-space: nowrap; }
.media-grid.is-beheer .media-tegel { cursor: default; }

/* het venster */
.media-sheet { position: fixed; inset: 0; z-index: 240; background: rgba(16,24,40,.5);
  display: grid; place-items: center; padding: 20px; }
.media-box { background: #fff; border-radius: 18px; width: min(860px, 100%);
  max-height: min(86vh, 760px); overflow: auto; padding: 22px 24px 26px; }
.media-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.media-kop h2 { margin: 0; font-size: 20px; }
.icon-knop { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--muted, #6B7280); padding: 0 4px; }
.media-weg { margin-bottom: 16px; }
.media-zoekrij { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.media-zoekrij .input { flex: 1; }

/* het veld in een formulier */
.beeldveld .beeld-rij { display: flex; align-items: center; gap: 14px; }
.beeld-voor { width: 76px; height: 60px; flex: none; display: grid; place-items: center;
  background: var(--bg-soft, #F6F7F9); border: 1px solid var(--line-2, #EEF0F3);
  border-radius: 10px; overflow: hidden; }
.beeld-voor img { width: 100%; height: 100%; object-fit: contain; }
.beeld-voor em { font-size: 12px; color: var(--subtle, #9AA1AC); font-style: normal; }
.beeld-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Productkaart: artikelnummer en aantal ---- */
.pc-code { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 4px; letter-spacing: .01em; }
.pc-buy { display: flex; gap: 8px; align-items: stretch; position: relative; z-index: 1; }
.pc-buy .qty { flex: 0 0 auto; height: 42px; }
.pc-buy .qty button { width: 30px; }
.pc-buy .qty input { width: 34px; font-size: 14px; }
.pc-buy .btn { flex: 1; min-width: 0; padding-left: 10px; padding-right: 10px; }
.pc-buy .btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Staffels op de productpagina ---- */
.staffels { width: 100%; border-collapse: collapse; font-size: 14px; margin: 4px 0 2px; }
.staffels th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 0 0 6px; }
.staffels td { padding: 7px 0; border-top: 1px solid var(--line-2); }
.staffels td:last-child, .staffels th:last-child { text-align: right; }
.staffel-korting { display: inline-block; background: var(--yellow-soft, #FFF4CC); color: #7A5A00; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; }

/* ---- Snel bestellen ---- */
.snel-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.snel-card { padding: 16px 20px 8px; }
.snel-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.snel-plakvak { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; display: grid; gap: 10px; background: var(--bg-soft); }
.snel-plakvak label { font-size: 13px; color: var(--ink-2); }
.snel-plakvak code { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; }
.snel-plakvak textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; font: 500 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; background: #fff; }
.snel-plakvak textarea:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,193,7,.25); }
.snel-plakacties { display: flex; gap: 8px; }
.snel-tabel-wrap { overflow: visible; }
.snel-tabel { width: 100%; border-collapse: collapse; }
.snel-tabel th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.snel-tabel td { padding: 10px 8px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.snel-tabel tr:last-child td { border-bottom: 0; }
.snel-rij.is-ok .snel-code input { border-color: var(--green); }
.snel-rij.is-fout .snel-code input { border-color: #E11D48; }
.snel-code { position: relative; width: 240px; }
.snel-code input { width: 100%; height: 42px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 12px; font: 600 14px/1 inherit; font-family: inherit; background: #fff; }
.snel-code input:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,193,7,.25); }
.snel-sug { position: absolute; left: 0; top: calc(100% + 4px); width: 420px; max-width: 80vw; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.14)); z-index: 30; overflow: hidden; }
.snel-sug button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; font: inherit; cursor: pointer; }
.snel-sug button:hover, .snel-sug button:focus { background: var(--bg-soft); outline: none; }
.snel-sug button > span:last-child { display: grid; min-width: 0; }
.snel-sug strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snel-sug small { color: var(--muted); font-size: 12px; }
.snel-sug-foto, .snel-foto { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; display: grid; place-items: center; }
.snel-sug-foto .p-shot, .snel-foto .p-shot, .snel-sug-foto svg, .snel-foto svg { width: 100%; height: 100%; }
.snel-sug-foto .p-img, .snel-foto .p-img { width: 100%; height: 100%; object-fit: contain; }
.snel-art { min-width: 220px; }
.snel-art > a, .snel-art > div { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; }
.snel-art div { display: grid; gap: 2px; }
.snel-naam { font-weight: 600; font-size: 14px; }
.snel-art .muted { font-size: 12px; }
.snel-geen { font-size: 13px; color: #B4123A; display: inline-flex; align-items: center; gap: 6px; }
.snel-prijs { white-space: nowrap; text-align: right; }
.snel-prijs .price { font-size: 16px; display: block; }
.snel-prijs small { color: var(--muted); font-size: 12px; }
.snel-weg { width: 32px; height: 32px; color: var(--muted); }
.snel-weg:hover { color: #E11D48; background: #FDE8EE; }
.scan-sheet { position: fixed; inset: 0; background: rgba(20,22,26,.6); z-index: 200; display: grid; place-items: center; padding: 16px; }
body.scan-open { overflow: hidden; }
.scan-vak { background: #fff; border-radius: 16px; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; }
.scan-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.scan-beeld { position: relative; background: #111; overflow: hidden; }
.scan-vak video { width: 100%; aspect-ratio: 4/3; background: #111; display: block; object-fit: cover; }
.scan-kader { position: absolute; left: 12%; right: 12%; top: 32%; bottom: 32%; border: 3px solid var(--yellow); border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0,0,0,.28); pointer-events: none; }
.scan-vak p.scan-status { margin: 0; padding: 12px 16px; color: var(--muted); font-size: 14px; }
.scan-status.is-ok { color: #15803D; font-weight: 600; }
.scan-status.is-fout { color: #B91C1C; }
.scan-lijst { list-style: none; margin: 0; padding: 0 16px 4px; }
.scan-lijst li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.scan-lijst li span:nth-child(2) { flex: 1; min-width: 0; }
.scan-lijst strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-lijst small { color: var(--muted); font-size: 12px; }
.scan-foto { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex: none; display: grid; place-items: center; }
.scan-foto img { width: 100%; height: 100%; object-fit: contain; }
.scan-hand { display: flex; gap: 8px; padding: 4px 16px 14px; }
.scan-hand input { flex: 1; min-width: 0; height: 40px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; }
.scan-voet { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--bg-soft); position: sticky; bottom: 0; }
.scan-voet .btn { flex: 1; min-width: 0; justify-content: center; padding-left: 12px; padding-right: 12px; white-space: nowrap; }
.search-scan { position: absolute; right: 47px; top: 5px; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; color: var(--ink, #1f2328); transition: background var(--fast); }
.search-scan:hover { background: rgba(0,0,0,.06); }
.search-scan .ico { width: 20px; height: 20px; }
.search:has(.search-scan:not([hidden])) .search-input { padding-right: 96px; }
@media (hover: hover) and (pointer: fine) {
  .search-scan { display: none; }
  .search:has(.search-scan:not([hidden])) .search-input { padding-right: 60px; }
}
.lijst .order-head { align-items: center; }
.lijst-qty { width: 54px; height: 32px; border: 1.5px solid var(--line); border-radius: 8px; text-align: center; font: 600 14px inherit; font-family: inherit; margin-right: 4px; }
.lijst-regels li { justify-content: flex-start; align-items: center; }
.lijst-regels li span:last-child { margin-left: auto; }
/* ---- Over ons en Contact ---- */
.info-kop { position: relative; background: var(--bg-soft); border-bottom: 1px solid var(--line); overflow: hidden; }
.info-kop.heeft-foto { background: #1E232B var(--info-foto) center / cover no-repeat; color: #fff; border-bottom: 0; }
.info-kop.heeft-foto::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,24,30,.82) 0%, rgba(20,24,30,.55) 55%, rgba(20,24,30,.15) 100%); }
.info-kop-binnen { position: relative; padding-top: 22px; padding-bottom: 56px; }
.info-kop h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; margin: 18px 0 12px; max-width: 760px; }
.info-lead { font-size: 18px; line-height: 1.55; max-width: 620px; margin: 0; color: var(--ink-2); }
.info-kop.heeft-foto .info-lead { color: rgba(255,255,255,.88); }
.info-kop.heeft-foto .breadcrumbs, .info-kop.heeft-foto .breadcrumbs a { color: rgba(255,255,255,.75); }
.info-kop.heeft-foto .breadcrumbs [aria-current] { color: #fff; }
.info-kop.heeft-foto h1 { color: #fff; }
.info-kop.heeft-foto .info-kop-binnen::after { content: ''; display: block; width: 64px; height: 5px; border-radius: 3px; background: var(--yellow); margin-top: 26px; }
.info-twee { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.info-twee:not(:has(.info-figuur)) { grid-template-columns: minmax(0, 760px); }
.info-verhaal p { font-size: 17px; line-height: 1.75; color: var(--ink-2); margin: 0 0 18px; }
.info-verhaal p:first-child { font-size: 20px; line-height: 1.6; color: var(--ink); font-weight: 500; }
.info-figuur { margin: 0; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-soft); }
.info-figuur img { width: 100%; height: 100%; object-fit: cover; display: block; }
.info-waarden-sec { background: var(--bg-soft); }
.info-waarden { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.info-waarde { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.info-waarde h3 { font-size: 18px; margin: 10px 0 6px; }
.info-waarde p { margin: 0; color: var(--muted); line-height: 1.55; }
.info-nr { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--yellow); color: var(--yellow-ink, #2A2E35); font-weight: 800; font-size: 14px; }
.tijdlijn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; position: relative; }
.tijdlijn::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--line); }
.tijdlijn li { position: relative; padding: 30px 18px 0 0; }
.tijdlijn li::before { content: ''; position: absolute; top: 2px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--yellow); }
.tijdlijn strong { font-family: var(--font-head); font-size: 22px; display: block; margin-bottom: 4px; }
.tijdlijn p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.team-kaart { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; transition: box-shadow var(--fast), transform var(--fast); }
.team-kaart:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.team-foto { position: relative; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--yellow-50, #FFF6D6); color: var(--yellow-ink, #2A2E35); display: grid; place-items: center; font-weight: 800; font-size: 20px; border: 2px solid var(--yellow); }
.team-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; z-index: 1; }
.team-tekst { min-width: 0; }
.team-tekst h3 { font-size: 16px; margin: 0; }
.team-rol { margin: 2px 0 6px; font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.team-links { display: grid; gap: 2px; font-size: 13px; }
.team-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-links a:hover { color: var(--ink); text-decoration: underline; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: -72px; position: relative; }
.contact-form { display: grid; gap: 16px; box-shadow: var(--shadow-lg); }
.contact-form h2 { font-size: 22px; margin: 0; }
.cf-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-tekst { height: auto; min-height: 150px; padding-top: 12px; resize: vertical; font: inherit; line-height: 1.5; }
.cf-honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-fout { margin: 0; color: var(--red, #CF3A3A); font-weight: 600; font-size: 14px; }
.cf-privacy { margin: 0; font-size: 13px; }
.contact-form .btn-lg { justify-self: start; }
.cf-klaar { text-align: center; padding: 30px 10px; display: grid; gap: 10px; justify-items: center; }
.cf-klaar .empty-ico { background: #E5F5EC; color: var(--green); }
.cf-klaar p { margin: 0 0 8px; color: var(--ink-2); max-width: 440px; }
.contact-info { display: grid; gap: 16px; }
.contact-info h3 { margin: 0 0 12px; font-size: 18px; }
.contact-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contact-lijst li { display: flex; gap: 12px; align-items: flex-start; }
.contact-lijst li > .ico { flex: 0 0 auto; width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: var(--yellow-50, #FFF6D6); color: var(--ink); }
.contact-lijst div { display: grid; gap: 1px; }
.contact-lijst span { font-size: 13px; color: var(--muted); }
.contact-kaart { overflow: hidden; padding: 0; display: grid; }
.contact-kaart iframe { width: 100%; height: 220px; border: 0; display: block; }
.contact-kaart .btn { border-radius: 0; border-width: 1px 0 0; }
.contact-team-link { display: flex; align-items: center; gap: 12px; }
.contact-team-link > .ico:first-child { width: 22px; height: 22px; }
.contact-team-link div { display: grid; flex: 1; }
.contact-team-link span { font-size: 13px; color: var(--muted); }
.contact-team-link:hover { border-color: var(--yellow); }
/* ---- Beheer: berichten en team ---- */
.bericht-lijst { display: grid; gap: 12px; }
.bericht { padding: 16px 18px; border-left: 4px solid transparent; }
.bericht.is-nieuw { border-left-color: var(--yellow); }
.bericht-kop { display: flex; gap: 12px; align-items: flex-start; }
.bericht-wie { flex: 1; min-width: 0; }
.bericht-meta { font-size: 13px; margin-top: 2px; }
.bericht-rechts { display: grid; justify-items: end; gap: 4px; font-size: 13px; text-align: right; }
.bericht-onderwerp { background: var(--yellow-50, #FFF6D6); border-radius: 999px; padding: 2px 10px; font-weight: 700; font-size: 12px; }
.bericht-tekst { white-space: pre-wrap; margin: 12px 0; line-height: 1.55; color: var(--ink-2); }
.bericht-acties { display: flex; gap: 8px; flex-wrap: wrap; }
.bericht-weg, .tm-weg { color: var(--red, #CF3A3A); margin-left: auto; }
.io-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.io-kop h2 { margin: 0; font-size: 20px; }
.io-kop p { margin: 4px 0 0; }
.io-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
#io-over, #io-contact, #io-afval { display: grid; gap: 16px; margin-top: 10px; }
#io-over textarea.input, #io-contact textarea.input, #io-afval textarea.input { height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 10px; line-height: 1.5; resize: vertical; }
#io-over [data-k="over.verhaal"] { min-height: 200px; }
#io-contact [data-k="contact.onderwerpen"] { min-height: 130px; }
.io-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.io-lijst { display: grid; gap: 8px; margin-bottom: 8px; }
.io-rij { display: grid; grid-template-columns: 190px 1fr 36px; gap: 8px; align-items: center; }
.io-bewaar { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.tm-lijst { display: grid; gap: 10px; margin-top: 14px; }
.tm-rij { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fff; }
.tm-rij.is-uit { opacity: .55; background: var(--bg-soft); }
.tm-foto { position: relative; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 2px solid var(--yellow); background: var(--yellow-50, #FFF6D6); display: grid; place-items: center; font-weight: 800; font-size: 18px; cursor: pointer; padding: 0; color: var(--ink); }
.tm-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.tm-foto i { z-index: 2; }
.tm-foto i { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font-style: normal; opacity: 0; transition: opacity .15s; }
.tm-foto:hover i, .tm-foto:focus-visible i { opacity: 1; }
.tm-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tm-velden .input { height: 38px; font-size: 14px; }
.tm-velden [data-tm="name"] { font-weight: 700; }
.tm-acties { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 240px; }
.tm-pijl { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 16px; display: grid; place-items: center; }
.tm-pijl:hover:not(:disabled) { border-color: var(--yellow); background: var(--yellow-50, #FFF6D6); }
.tm-pijl:disabled { opacity: .35; cursor: default; }
@media (max-width: 760px) {
  .tm-rij { grid-template-columns: 60px 1fr; }
  .tm-acties { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
  .tm-velden, .io-twee { grid-template-columns: 1fr; }
  .io-rij { grid-template-columns: 80px 1fr 36px; }
}

/* ---- Medisch afval ---- */
.afval-intro { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.afval-cta { display: flex; align-items: center; gap: 14px; padding: 20px; border: 2px solid var(--yellow); background: var(--yellow-50, #FFF9E6); }
.afval-cta > .ico:first-child { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--yellow); flex: none; }
.afval-cta div { display: grid; flex: 1; }
.afval-cta span { font-size: 14px; color: var(--ink-2); }
.afval-cta:hover { box-shadow: var(--shadow); }
.afval-stappen-sec { background: var(--bg-soft); }
.afval-stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; counter-reset: s; }
.afval-stappen li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 22px; }
.afval-stappen li:not(:last-child)::after { content: ''; position: absolute; right: -16px; top: 42px; width: 12px; height: 12px; border-top: 2px solid var(--yellow); border-right: 2px solid var(--yellow); transform: rotate(45deg); }
.afval-nr { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--yellow); font-weight: 800; font-size: 18px; color: var(--yellow-ink, #2A2E35); }
.afval-stappen h3 { font-size: 17px; margin: 14px 0 6px; }
.afval-stappen p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 15px; }
.afval-onder { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.afval-faq h2 { font-size: 22px; margin: 0 0 14px; }
.afval-faq .faq { margin-bottom: 14px; }

/* ---- Instagram ---- */
.footer-social { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.footer-social a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); }
.footer-social a:hover { border-color: var(--yellow); background: var(--yellow-50, #FFF9E6); }
.footer-social .ico { width: 18px; height: 18px; }
.contact-lijst li > svg.ico { flex: 0 0 auto; width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: var(--yellow-50, #FFF6D6); color: var(--ink); }
.ig-blok { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 36px; align-items: center; background: linear-gradient(135deg, var(--ink) 0%, #3A3F48 100%); color: #fff; border-radius: var(--radius-xl); padding: 40px; overflow: hidden; position: relative; }
.ig-blok::before { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: var(--yellow); opacity: .14; left: -120px; bottom: -180px; }
.ig-blok.is-leeg { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.ig-tekst { position: relative; display: grid; gap: 14px; justify-items: start; }
.ig-blok.is-leeg .ig-tekst { justify-items: center; }
.ig-tekst h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); margin: 0; line-height: 1.15; }
.ig-tekst p { margin: 0; color: rgba(255,255,255,.8); font-size: 17px; line-height: 1.5; max-width: 420px; }
.ig-logo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--yellow); color: var(--ink); }
.ig-logo .ico { width: 28px; height: 28px; }
.ig-handle { font-weight: 700; color: var(--yellow); font-size: 15px; }
.ig-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ig-grid a { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.08); }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.ig-grid a:hover img { transform: scale(1.05); }
/* ---- Voorwaarden ---- */
.vw-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 8px; }
.vw-nav { position: sticky; top: 150px; padding: 10px; display: grid; gap: 2px; }
.vw-nav > a { padding: 10px 12px; border-radius: 10px; font-weight: 600; color: var(--ink-2); }
.vw-nav > a:hover { background: var(--bg-soft); color: var(--ink); }
.vw-nav > a[aria-current="page"] { background: var(--yellow-50, #FFF9E6); color: var(--ink); box-shadow: inset 3px 0 0 var(--yellow); }
.vw-inhoud { border-top: 1px solid var(--line); margin-top: 8px; padding: 12px 12px 4px; display: grid; gap: 6px; font-size: 13px; }
.vw-inhoud strong { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.vw-inhoud a { color: var(--ink-2); }
.vw-inhoud a:hover { color: var(--ink); text-decoration: underline; }
.vw-tekst { max-width: 820px; }
.vw-tekst h1 { font-size: clamp(28px, 3.4vw, 38px); margin: 0 0 6px; }
.vw-tekst > .muted { margin: 0 0 22px; font-size: 14px; }
.vw-tekst h2 { font-size: 19px; margin: 28px 0 8px; scroll-margin-top: 150px; }
.vw-tekst p, .vw-tekst li { line-height: 1.7; color: var(--ink-2); }
.vw-tekst p { margin: 0 0 12px; }
.vw-tekst ul { margin: 0 0 14px; padding-left: 22px; list-style: disc; }
.vw-tekst li::marker { color: var(--yellow-hover, #F5B800); }
.footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Abonnementen ---- */
.abo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.abo-kaart { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--fast), transform var(--fast); }
.abo-kaart:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.abo-foto { position: relative; aspect-ratio: 16 / 10; background: var(--yellow-50, #FFF9E6); display: grid; place-items: center; overflow: hidden; }
.abo-foto > img { width: 100%; height: 100%; object-fit: cover; }
.abo-foto .p-shot, .abo-foto > svg { width: 62%; height: 80%; }
.abo-foto .p-img { width: 100%; height: 100%; object-fit: contain; }
.abo-winst { position: absolute; top: 14px; left: 14px; background: var(--ink); color: var(--yellow); font-weight: 800; font-size: 13px; padding: 5px 11px; border-radius: 999px; }
.abo-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.abo-body h3 { font-size: 20px; margin: 0; }
.abo-body > p { margin: 0; }
.abo-inhoud { list-style: none; margin: 4px 0; padding: 12px 14px; background: var(--bg-soft); border-radius: 12px; display: grid; gap: 6px; font-size: 14px; }
.abo-inhoud a { color: var(--ink-2); }
.abo-inhoud a:hover { text-decoration: underline; }
.abo-prijs { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.abo-prijs .price { font-size: 30px; }
.abo-los { margin: -6px 0 0; font-size: 13px; color: var(--muted); text-decoration: line-through; }
.abo-klein { margin: 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.abo-sheet { width: min(480px, 100%); }
.abo-sheet-body { padding: 16px; display: grid; gap: 10px; }
.abo-sheet-body .label { margin: 0; font-weight: 700; }
.abo-adres { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.abo-adres:has(input:checked) { border-color: var(--yellow); background: var(--yellow-50, #FFF9E6); }
.abo-adres input { margin-top: 3px; accent-color: var(--ink); }
.abo-adres span { display: grid; gap: 2px; font-size: 14px; color: var(--ink-2); }
.abo-adres strong { color: var(--ink); }
/* ---- Beheer: abonnementen en voorwaarden ---- */
.vw-veld { height: auto !important; min-height: 360px; font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; padding-top: 12px; resize: vertical; }
.abo-aan { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-left: 5px solid var(--line); }
.abo-aan.is-aan { border-left-color: var(--green, #16803C); background: linear-gradient(90deg, #EEF8F1, #fff 60%); }
.abo-aan h2 { margin: 0 0 4px; font-size: 20px; }
.abo-aan p { margin: 0; }
.abo-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0; }
.abo-kpis .kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: grid; gap: 4px; }
.abo-kpis .kpi span { font-size: 13px; color: var(--muted); font-weight: 600; }
.abo-kpis .kpi strong { font-size: 26px; font-family: var(--font-head); }
.abo-lijst { display: grid; gap: 10px; margin-top: 14px; }
.abo-rij { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.abo-rij.is-uit { opacity: .6; background: var(--bg-soft); }
.abo-mini { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--yellow-50, #FFF9E6); display: grid; place-items: center; font-size: 22px; }
.abo-mini img { width: 100%; height: 100%; object-fit: cover; }
.abo-rij-tekst { display: grid; gap: 2px; min-width: 0; }
.abo-rij-tekst .muted { font-size: 13px; }
.abo-ok, .abo-niet { font-size: 12px; font-weight: 700; }
.abo-ok { color: var(--green, #16803C); }
.abo-niet { color: var(--orange, #B45309); }
.ab-editor { border: 2px solid var(--yellow); border-radius: 16px; padding: 18px; margin: 14px 0 18px; background: #FFFDF5; }
.ab-editor h3 { margin: 0 0 12px; }
#ab-form { display: grid; gap: 14px; }
.ab-regels { display: grid; gap: 6px; margin-bottom: 8px; }
.ab-regel { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto 32px; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; }
.ab-regel .input { height: 34px; text-align: center; }
.ab-regel em { font-style: normal; color: var(--muted); font-size: 13px; }
.ab-zoek { position: relative; }
.ab-trefs { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.12); z-index: 20; overflow: hidden; }
.ab-trefs button { display: grid; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: none; cursor: pointer; font: inherit; }
.ab-trefs button:hover { background: var(--bg-soft); }
.ab-trefs em { font-style: normal; font-size: 12px; color: var(--muted); }
.ab-prijsrij { display: grid; grid-template-columns: 1.2fr 1fr .8fr 1.2fr; gap: 12px; }
.abo-pagina-form { display: grid; gap: 14px; margin-top: 10px; }
.abo-tabel-wrap { overflow-x: auto; }
.abo-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.abo-tabel th { text-align: left; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 8px; border-bottom: 1px solid var(--line); }
.abo-tabel td { padding: 10px 8px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.abo-uitleg summary { cursor: pointer; }
.abo-uitleg ol { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.6; }
.abo-uitleg code { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 13px; }
#body > .card + .card, #body > .card + details, #body > .kpis + .card { margin-top: 16px; }
@media (max-width: 760px) {
  .abo-rij { grid-template-columns: 48px 1fr auto; }
  .abo-rij .btn { grid-column: span 1; }
  .abo-kpis, .ab-prijsrij { grid-template-columns: 1fr 1fr; }
  .abo-aan { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 960px) {
  .vw-layout { grid-template-columns: 1fr; }
  .vw-nav { position: static; grid-auto-flow: column; overflow-x: auto; }
  .vw-nav > a { white-space: nowrap; }
  .vw-inhoud { display: none; }
}

@media (max-width: 960px) {
  .afval-intro, .afval-onder, .ig-blok { grid-template-columns: 1fr; }
  .afval-stappen li::after { display: none; }
  .ig-blok { padding: 28px 22px; }
}

@media (max-width: 960px) {
  .info-twee, .contact-layout { grid-template-columns: 1fr; }
  .contact-layout { margin-top: -40px; }
  .cf-rij { grid-template-columns: 1fr; }
  .tijdlijn { grid-template-columns: 1fr; padding-left: 8px; }
  .tijdlijn::before { left: 15px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .tijdlijn li { padding: 0 0 22px 40px; }
  .tijdlijn li::before { left: 8px; top: 4px; }
  .info-kop-binnen { padding-bottom: 40px; }
  .info-kop.heeft-foto + .section .contact-layout { margin-top: -24px; }
}

@media (max-width: 960px) {
  .snel-layout { grid-template-columns: 1fr; }
  .snel-card { padding: 12px 12px 4px; }
  .snel-tabel thead { display: none; }
  .snel-tabel tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
  .snel-tabel td { padding: 0; border: 0; }
  .snel-code { width: 100%; grid-column: 1 / 2; }
  .snel-rij td:last-child { grid-column: 2; grid-row: 1; justify-self: end; }
  .snel-rij:not(.is-ok):not(.is-fout) .snel-art, .snel-rij:not(.is-ok) .snel-prijs { display: none; }
  .snel-rij:not(.is-ok) td:nth-child(4) { grid-column: 1; justify-self: start; }
  .snel-art { grid-column: 1 / -1; }
  .snel-prijs { text-align: left; grid-column: 1; }
  .snel-rij td:nth-child(4) { grid-column: 2; justify-self: end; }
  .snel-sug { width: calc(100vw - 48px); }
}

@media (max-width: 960px) {
  .admin-naam { display: none; }
  .admin-view { padding: 6px 11px; }
  .admin-nav { inset: 62px auto 0 0; }
}

@media (max-width: 960px) {
  .look-grid { grid-template-columns: 1fr; }
  .look-prev { position: static; max-width: 420px; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-burger { display: block; }
  .admin-nav { display: none; position: fixed; inset: 58px auto 0 0; width: 240px; z-index: 25; box-shadow: var(--shadow-lg); overflow: auto; }
  .admin-nav.is-open { display: block; }
  .admin-main { padding: 20px 16px 70px; }
  .grid-2 { grid-template-columns: 1fr; }
}
.block-head .switch, .promo-head .switch { flex: none; }
.block-head .block-move { flex: none; }

/* ==========================================================================
   Winkel — balk bovenaan, thema-effect en de blokken van de homepage
   ========================================================================== */
.site-ann { padding: 8px 16px; text-align: center; font-size: 13.5px; font-weight: 600; }
.site-ann a { color: inherit; }

.fx-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.fx-layer span { position: absolute; top: -40px; opacity: .55; animation: fx-val linear infinite; }
.fx-layer.is-confetti span { color: var(--yellow); opacity: .7; }
@keyframes fx-val { to { transform: translateY(105vh) rotate(260deg); } }
@media (prefers-reduced-motion: reduce) { .fx-layer { display: none; } }

.hero-card.is-center { text-align: center; }
.hero-card.is-center .hero-copy { margin: 0 auto; }
.hero-photo { background-size: cover; background-position: center; position: relative; border-radius: var(--radius-lg); min-height: 280px; }
.hero-photo span { position: absolute; inset: 0; background: #000; border-radius: inherit; }

.usp-band { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.usp-band li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.usp-band strong { display: block; font-size: 15px; }
.usp-band p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.usp-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--yellow-50); color: var(--yellow-ink); display: grid; place-items: center; flex: none; }

.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.promo-card-site { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; background: var(--yellow-50) no-repeat center / cover; display: flex; flex-direction: column; gap: 6px; }
.promo-card-site h3 { margin: 6px 0 0; font-size: 19px; }
.promo-card-site p { margin: 0; color: var(--ink-2); }
.promo-badge { align-self: flex-start; color: #fff; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.promo-off { font-size: 26px; font-family: var(--font-head); }
.promo-till { font-size: 13px; color: var(--muted); }
.promo-card-site .btn { margin-top: 10px; align-self: flex-start; }

.site-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 32px; border-radius: var(--radius-xl); background: var(--ink) no-repeat center / cover; color: #fff; }
.site-banner h2 { margin: 0; }
.site-banner p { margin: 6px 0 0; color: #D7DBE1; }

.site-text { padding: 28px 32px; border-radius: var(--radius-xl); }
.site-text.bg-zacht { background: var(--bg-soft); }
.site-text.bg-accent { background: var(--yellow-50); }
.site-text.bg-wit { background: #fff; border: 1px solid var(--line); }
.site-text h2 { margin: 0 0 6px; }
.site-text .lead { color: var(--ink-2); margin: 0 0 10px; }
.site-text .btn { margin-top: 12px; }
.nieuwsbrief { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.nieuwsbrief .input { flex: 1; min-width: 220px; }

.brand-band { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.brand-band li { border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-weight: 600; color: var(--ink-2); background: #fff; }

.site-video { position: relative; padding-top: 56.25%; border-radius: var(--radius-lg); overflow: hidden; }
.site-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.pc-badge { position: absolute; top: 10px; left: 10px; z-index: 2; color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; padding: 4px 9px; border-radius: 999px; }
.price.is-promo { color: var(--red); }
.price-was { text-decoration: line-through; color: var(--subtle); font-size: 13.5px; margin-left: 6px; }

/* ==========================================================================
   Beheer — overzicht, klanten, pagina's en menu
   ========================================================================== */
.nav-links { border-top: 1px solid var(--line); padding-top: 14px; }
.nav-links a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: 14.5px; }
.nav-links a:hover { background: var(--bg-soft); color: var(--ink); }
.nav-links svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); cursor: pointer; font: inherit; text-align: left; }
.tile:hover { border-color: var(--ink); }
.tile strong { font-family: var(--font-head); font-size: 30px; line-height: 1.1; }
.tile span { color: var(--muted); font-size: 14px; }
.tile.is-warm strong { color: var(--orange); }
.tile.is-hot strong { color: var(--red); }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px; }
.dash-grid h3 { font-size: 16px; margin: 0 0 4px; }
.op { color: var(--green); font-weight: 700; }
.af { color: var(--red); font-weight: 700; }

.bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; margin: 14px 0 6px; }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.bar span { width: 100%; max-width: 38px; background: var(--yellow); border-radius: 6px 6px 0 0; display: block; }
.bar em { font-style: normal; font-size: 12px; color: var(--muted); }

.todo { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.todo li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.todo li:last-child { border-bottom: 0; }

.dash-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dash-table td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--line-2); }
.dash-table tr:last-child td { border-bottom: 0; }
.dash-table .nr { font-weight: 700; white-space: nowrap; }
.dash-table .amt { text-align: right; font-weight: 700; white-space: nowrap; }

.facts { list-style: none; margin: 10px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 7px; color: var(--ink-2); }
.facts strong { font-family: var(--font-head); }

.shortcuts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.shortcut { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font: inherit; text-align: left; cursor: pointer; color: var(--ink); width: 100%; }
.shortcut:hover { border-color: var(--ink); }
.shortcut svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shortcut em { display: block; font-style: normal; font-size: 13px; color: var(--muted); }
.shortcut.is-leeg { border-style: dashed; color: var(--muted); }

.klant-card .klant-cijfers { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--ink-2); }
.klant-cijfers strong { font-family: var(--font-head); }
.rij { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.rij .field { flex: 1; min-width: 220px; }
.rij .switch { margin-bottom: 14px; }
.afspraken { list-style: none; margin: 0 0 8px; padding: 0; }
.afspraken li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.afspraken em { display: block; font-style: normal; font-size: 13px; color: var(--muted); }

.sheet-wrap { position: fixed; inset: 0; background: rgba(26, 30, 36, .45); display: grid; place-items: center; padding: 20px; z-index: 70; }
.sheet { background: #fff; border-radius: var(--radius-xl); width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 10px; }
.sheet-head h3 { margin: 0; font-size: 18px; }
.sheet-head .icon-btn { font-size: 22px; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--muted); }
.sheet-body { padding: 0 20px; overflow: auto; }
.sheet-body hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0 14px; }
.sheet-body h4 { margin: 0 0 10px; font-size: 15px; }
.sheet-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--line-2); }

.page-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.page-tabs .chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.page-tabs .chip.is-add { border-style: dashed; }
#paginainfo { margin-bottom: 16px; }

.menu-lijst { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.menu-rij { display: flex; align-items: center; gap: 8px; }
.menu-rij .input { flex: 1; min-width: 0; }
.menu-rij .block-move { flex: none; }
.menu-lijst.snel .menu-rij .input:last-of-type { max-width: 150px; }

@media (max-width: 760px) {
  .menu-rij { flex-wrap: wrap; }
  .tiles { grid-template-columns: 1fr 1fr; }
}
.switch:has(.track) { width: auto; height: auto; }
.switch .lab { flex: none; white-space: nowrap; }
.switch:empty, .switch .lab:empty { display: none; }
.block-head .switch, .promo-head .switch, .rij .switch { min-width: max-content; }

/* ==========================================================================
   Winkel — eigen pagina's en de nieuwe blokken
   ========================================================================== */
body[data-knoppen="rond"] .btn { border-radius: 999px; }
body[data-knoppen="recht"] .btn { border-radius: 2px; }
body[data-knoppen="zacht"] .btn { border-radius: 10px; }

.crumbs { font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--muted); }
.crumbs span { margin: 0 6px; }
.paginatitel { font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px; letter-spacing: -.02em; }

.faq { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.faq details { border-top: 1px solid var(--line-2); }
.faq details:first-child { border-top: 0; }
.faq summary { padding: 16px 20px; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--muted); font-weight: 400; font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq p { margin: 0; padding: 0 20px 18px; color: var(--ink-2); }

.uren { list-style: none; margin: 0; padding: 0; max-width: 420px; }
.uren li { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.uren li:last-child { border-bottom: 0; }

.contactlijst { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.contactlijst li { display: flex; align-items: center; gap: 10px; }
.contactlijst em { font-style: normal; color: var(--muted); font-size: 13.5px; }

.stappen { list-style: none; counter-reset: stap; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.stappen li { counter-increment: stap; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
.stappen li::before { content: counter(stap); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--yellow); font-weight: 800; margin-bottom: 10px; }
.stappen strong { display: block; margin-bottom: 4px; }
.stappen p { margin: 0; color: var(--muted); font-size: 14.5px; }

.cijfers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; text-align: center; }
.cijfers strong { display: block; font-family: var(--font-head); font-size: 34px; color: var(--yellow-ink); }
.cijfers span { color: var(--muted); font-size: 14.5px; }

.galerij { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.galerij img { width: 100%; height: 190px; object-fit: cover; border-radius: var(--radius-lg); }

.tekstfoto { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.tekstfoto.is-links > div { order: 2; }
.tekstfoto img { width: 100%; border-radius: var(--radius-xl); }
.tekstfoto h2 { margin: 0 0 8px; }
.tekstfoto .btn { margin-top: 14px; }

.knoppenrij { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 760px) {
  .tekstfoto { grid-template-columns: 1fr; }
  .tekstfoto.is-links > div { order: 0; }
}
.tekstfoto.is-breed { grid-template-columns: minmax(0, 760px); }

/* ==========================================================================
   Beheer — artikelenlijst en het paneel rechts
   ========================================================================== */
.prod-bar { display: grid; grid-template-columns: minmax(220px, 1fr) 210px 190px; gap: 10px; margin-bottom: 14px; }
.prod-bar .zoek { background-repeat: no-repeat; }
.telling { margin: 0 0 10px; font-size: 13.5px; }

.prod-tabel { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; font-size: 14.5px; }
.prod-tabel thead th { text-align: left; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--subtle); font-weight: 800; padding: 11px 12px; background: var(--bg-softer); border-bottom: 1px solid var(--line); }
.prod-tabel th.r, .prod-tabel td.r { text-align: right; }
.prod-tabel td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.prod-tabel tbody tr:last-child td { border-bottom: 0; }
.prod-tabel tbody tr { cursor: pointer; }
.prod-tabel tbody tr:hover td { background: var(--bg-soft); }
.prod-tabel tbody tr:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.prod-tabel .th { width: 56px; padding-right: 0; }
.prod-tabel .nm strong { display: block; font-weight: 700; }
.prod-tabel em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); font-weight: 400; }
.prod-tabel td.r em { font-size: 12px; }
.prod-tabel .leeg { color: var(--red); font-weight: 700; }
.prod-tabel .laag { color: var(--orange); font-weight: 700; }
.prod-tabel .st { white-space: nowrap; }
.prod-tabel .st .pill { margin-left: 4px; }
.pill.accent { background: var(--yellow-50); color: var(--yellow-ink); }
.pill.alarm { background: var(--red-50); color: var(--red); }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }

.paneel-wrap { position: fixed; inset: 0; background: rgba(26, 30, 36, .4); z-index: 65; display: flex; justify-content: flex-end; }
.paneel { width: min(560px, 100%); background: var(--bg-soft); height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: paneel-in 200ms var(--ease); }
@keyframes paneel-in { from { transform: translateX(24px); opacity: .6; } }
.paneel-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; background: #fff; }
.paneel-kop strong { font-size: 17px; font-family: var(--font-head); }
.paneel-kop p { margin: 2px 0 0; }
.paneel-kop .icon-btn { font-size: 24px; line-height: 1; border: 0; background: none; cursor: pointer; color: var(--muted); }
.paneel-feiten { display: flex; gap: 22px; flex-wrap: wrap; padding: 0 20px 14px; background: #fff; font-weight: 700; }
.paneel-feiten.plat { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 14px; }
.paneel-feiten em { display: block; font-style: normal; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); font-weight: 800; margin-bottom: 2px; }
.paneel-feiten small { font-weight: 400; color: var(--muted); }
.paneel-tabs { display: flex; gap: 2px; padding: 0 12px; background: #fff; border-bottom: 1px solid var(--line); overflow-x: auto; }
.paneel-tabs button { border: 0; background: none; font: inherit; font-weight: 600; font-size: 14px; color: var(--muted); padding: 10px 10px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.paneel-tabs button:hover { color: var(--ink); }
.paneel-tabs button.is-on { color: var(--ink); border-bottom-color: var(--yellow); }
.paneel-body { padding: 18px 20px 40px; overflow: auto; flex: 1; }
.paneel-body hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0 14px; }
.paneel-body h4 { margin: 0 0 10px; font-size: 15px; }
.paneel-body .notice { margin-bottom: 14px; }

.mini { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 8px; }
.mini thead th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); font-weight: 800; padding: 8px 10px; background: var(--bg-softer); }
.mini td { padding: 9px 10px; border-top: 1px solid var(--line-2); }
.mini th.r, .mini td.r { text-align: right; }
.mini-card { margin-bottom: 12px; }
.dagen { display: flex; gap: 6px; }
.dagknop input { position: absolute; opacity: 0; }
.dagknop span { display: grid; place-items: center; width: 38px; height: 34px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600; background: #fff; }
.dagknop input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }

@media (max-width: 900px) {
  .prod-bar { grid-template-columns: 1fr; }
  .prod-tabel thead { display: none; }
  .prod-tabel, .prod-tabel tbody, .prod-tabel tr, .prod-tabel td { display: block; width: 100%; }
  .prod-tabel tr { border-bottom: 1px solid var(--line-2); padding: 6px 0; }
  .prod-tabel td { border: 0; padding: 3px 12px; }
  .prod-tabel td.r { text-align: left; }
  .prod-tabel .th { float: left; width: 56px; }
}
.prod-tabel td.r, .prod-tabel th.r { white-space: nowrap; }
.prod-tabel thead th:nth-child(2) { width: 34%; }
.prod-tabel thead th:nth-child(3) { width: 20%; }
.prod-tabel thead th:nth-child(4), .prod-tabel thead th:nth-child(5) { width: 88px; }
.prod-tabel thead th:nth-child(6) { width: 70px; }
.rij > .btn { margin-bottom: 0; }
.rij .switch { align-self: center; }

/* ==========================================================================
   Artikelfoto's — overal even groot, met de getekening als vangnet
   ========================================================================== */
.p-shot { position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
.p-shot svg { width: 68%; height: auto; }
.p-shot .p-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 9%; background: #fff; }
.pc-media { aspect-ratio: 1; background: #fff !important; border-bottom: 1px solid var(--line-2); }
.gallery-main .p-shot .p-img { padding: 7%; }
.ci-media .p-shot .p-img, .mini-thumb .p-shot .p-img, .s-thumb .p-shot .p-img, .toast-thumb .p-shot .p-img { padding: 8%; border-radius: inherit; }
.hv-tile .p-shot .p-img { padding: 12%; }
.klant-card.is-leeg { background: var(--bg-softer); }
.klant-card.is-leeg .admin-pills { align-items: center; }
/* De catalogusfoto's zijn klein; niet verder opblazen dan ze aankunnen. */
.gallery-main .p-shot .p-img { padding: 14%; }
.admin-filters.segmenten { align-items: center; margin-top: -8px; }
.admin-filters.segmenten .chip b { font-weight: 800; opacity: .6; margin-left: 2px; }
.admin-filters.segmenten .chip.is-on b { opacity: .8; }

/* ==========================================================================
   Online betalen — status bij een bestelling, meldingen, betaalknop
   ========================================================================== */
.order-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.order-acts { display: flex; gap: 10px; flex-wrap: wrap; }

.pay-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
}
.pay-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pay-status.p-ok       { background: #E7F6EE; color: #1E7A4B; }
.pay-status.p-wacht    { background: #FEF3E2; color: #8A6200; }
.pay-status.p-fout     { background: #FDECEC; color: #A52828; }
.pay-status.p-neutraal { background: #F1F3F6; color: #5A6372; }

.notice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 12px; margin: 0 0 20px;
  border: 1px solid transparent;
}
.notice .ico { flex: none; margin-top: 2px; }
.notice > div { display: flex; flex-direction: column; gap: 3px; }
.notice strong { font-weight: 700; }
.notice span { font-size: 14px; line-height: 1.45; opacity: .85; }
.notice.n-ok    { background: #E7F6EE; border-color: #BFE6D1; color: #1A6B41; }
.notice.n-wacht { background: #FEF3E2; border-color: #F3DDB4; color: #7A5700; }
.notice.n-fout  { background: #FDECEC; border-color: #F4C9C9; color: #952525; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pay-status.p-ok       { background: #123524; color: #7FD6A5; }
  :root:not([data-theme="light"]) .pay-status.p-wacht    { background: #3A2C0E; color: #E8C06A; }
  :root:not([data-theme="light"]) .pay-status.p-fout     { background: #3A1818; color: #EE9B9B; }
  :root:not([data-theme="light"]) .pay-status.p-neutraal { background: #262A31; color: #A4AEBD; }
  :root:not([data-theme="light"]) .notice.n-ok    { background: #123524; border-color: #1E5637; color: #9BE0BA; }
  :root:not([data-theme="light"]) .notice.n-wacht { background: #3A2C0E; border-color: #5C4616; color: #EFD191; }
  :root:not([data-theme="light"]) .notice.n-fout  { background: #3A1818; border-color: #5C2525; color: #F3B4B4; }
}
:root[data-theme="dark"] .pay-status.p-ok       { background: #123524; color: #7FD6A5; }
:root[data-theme="dark"] .pay-status.p-wacht    { background: #3A2C0E; color: #E8C06A; }
:root[data-theme="dark"] .pay-status.p-fout     { background: #3A1818; color: #EE9B9B; }
:root[data-theme="dark"] .pay-status.p-neutraal { background: #262A31; color: #A4AEBD; }
:root[data-theme="dark"] .notice.n-ok    { background: #123524; border-color: #1E5637; color: #9BE0BA; }
:root[data-theme="dark"] .notice.n-wacht { background: #3A2C0E; border-color: #5C4616; color: #EFD191; }
:root[data-theme="dark"] .notice.n-fout  { background: #3A1818; border-color: #5C2525; color: #F3B4B4; }

/* Beheer: kaart Betalingen */
.pay-mode {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.pay-mode.m-test { background: #FEF3E2; color: #8A6200; }
.pay-mode.m-live { background: #E7F6EE; color: #1E7A4B; }
.pay-mode.m-uit  { background: #F1F3F6; color: #5A6372; }
.webhook-url {
  display: block; width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; padding: 10px 12px; border-radius: 10px;
  background: var(--grijs-50, #F6F7F9); border: 1px solid var(--lijn, #E3E6EB);
  word-break: break-all; margin: 6px 0 0;
}

/* Beheer: Betalingen — stappen en kerncijfers */
.admin-steps { margin: 12px 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; }
.admin-steps li::marker { font-weight: 700; color: var(--muted, #6B7280); }
.notice-ok { background: var(--green-50, #E7F6EE); color: var(--green, #1E7A4B); border: 1px solid #BFE6D1; border-radius: var(--radius, 12px); padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }
.admin-kpis { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0 4px; }
.admin-kpis .kpi {
  flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; border-radius: var(--radius, 12px);
  background: var(--grijs-50, #F6F7F9); border: 1px solid var(--lijn, #E3E6EB);
}
.admin-kpis .kpi-n { font-size: 26px; font-weight: 800; line-height: 1.1; }
.admin-kpis .kpi-l { font-size: 13px; color: var(--muted, #6B7280); }
.veld-breed { margin-top: 4px; }
.veld-breed .field { max-width: 520px; }

/* Elk vakje waar een productfoto in komt, is zelf het kader. */
.ci-media, .mini-thumb, .s-thumb, .toast-thumb, .pc-media, .hv-tile, .gallery-main, .gallery-thumb {
  position: relative; overflow: hidden;
}
.toast-wrap .toast { width: 100%; }

/* Assortiment: elke groep met een wisknop ernaast */
.assort-rij { display: flex; align-items: stretch; gap: 6px; }
.assort-rij .assort-row { flex: 1; }
.assort-wis {
  flex: none; width: 36px; border: 1px solid var(--lijn, #E3E6EB);
  background: transparent; border-radius: 10px; color: var(--muted, #6B7280);
  font-size: 15px; line-height: 1; cursor: pointer; transition: background 150ms, color 150ms, border-color 150ms;
}
.assort-wis:hover { background: var(--red-50, #FDECEC); color: var(--red, #A52828); border-color: #F4C9C9; }

/* Beheer: de donkere balk hoort tegen de bovenkant te plakken, zonder witte strook. */
body[data-page="admin"] { background: var(--bg-soft); }
body[data-page="admin"] .page { padding-top: 0; }

/* ==========================================================================
   MAGAZIJN — gemaakt voor een tablet in het rek: grote letters, grote knoppen
   ========================================================================== */
body[data-page="magazijn"] {
  background: #F5F6F8; -webkit-text-size-adjust: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}
body[data-page="magazijn"] .page { padding: 0; }

/* ---- de schil: vaste zijkolom links, werk rechts ---- */
.mag-app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.mag-zij {
  display: flex; flex-direction: column; gap: 8px; background: #fff;
  border-right: 1px solid #E8EBEF; padding: 16px 12px 14px;
  padding-top: calc(16px + env(safe-area-inset-top));
  position: sticky; top: 0; height: 100vh;
}
.mag-merk { display: flex; align-items: center; gap: 10px; padding: 6px 10px 14px; text-decoration: none; color: inherit; }
.mag-merk img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.mag-merk span { display: grid; line-height: 1.15; min-width: 0; }
.mag-merk strong { font-family: var(--font-head, inherit); font-size: 15px; letter-spacing: .02em; }
.mag-merk em { font-style: normal; font-size: 12px; color: #6B7280; }

.mag-nav { display: grid; gap: 2px; }
.mag-nav button, .mag-zij-link {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px;
  border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600;
  color: #454B55; border-radius: 11px; cursor: pointer; text-align: left;
  text-decoration: none; position: relative;
}
.mag-nav button:hover, .mag-zij-link:hover { background: #F4F6F8; color: #2A2E35; }
.mag-nav button.is-on { background: var(--yellow-50, #FFF9E6); color: #2A2E35; font-weight: 700; }
.mag-nav button.is-on .mag-ico { color: var(--yellow-ink, #8A6200); }
.mag-nav button.is-on::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--yellow, #FFC629);
}
.mag-ico { width: 19px; height: 19px; flex: none; opacity: .75; }
.mag-nav button.is-on .mag-ico { opacity: 1; }

.mag-zij-onder { margin-top: auto; padding-top: 10px; border-top: 1px solid #EEF0F3; display: grid; gap: 6px; }
.mag-wie { display: flex; align-items: center; gap: 9px; padding: 8px 10px; }
.mag-rond {
  width: 30px; height: 30px; flex: none; border-radius: 999px; background: #2A2E35; color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.mag-wie-naam { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: #454B55;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mag-uit { background: none; border: 0; font: inherit; font-size: 13px; color: #6B7280; cursor: pointer; flex: none; }
.mag-uit:hover { color: #2A2E35; text-decoration: underline; }

.mag-hoofd { min-width: 0; display: flex; flex-direction: column; }
.mag-kop {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border-bottom: 1px solid #E8EBEF; padding: 16px 24px;
  padding-top: calc(16px + env(safe-area-inset-top));
  position: sticky; top: 0; z-index: 20;
}
.mag-kop h1 { font-size: 22px; margin: 0; letter-spacing: -.01em; }
.mag-kop-rechts { display: none; margin-left: auto; align-items: center; gap: 14px; }
.mag-kop-link { font-size: 14px; font-weight: 600; color: #454B55; text-decoration: none; }
.mag-kop-link:hover { color: #2A2E35; text-decoration: underline; }
.mag-terug {
  width: 36px; height: 36px; flex: none; border: 1px solid #E3E6EB; background: #fff;
  border-radius: 10px; font-size: 22px; line-height: 1; cursor: pointer; color: #2A2E35;
}
.mag-terug:hover { background: #F4F6F8; }

.mag-body { padding: 22px 24px 60px; background: #F5F6F8; flex: 1; }

/* Op een gsm schuift het menu naar onderen, binnen duimbereik. */
@media (max-width: 860px) {
  .mag-app { grid-template-columns: 1fr; }
  .mag-zij {
    position: fixed; inset: auto 0 0 0; height: auto; flex-direction: row; align-items: center;
    gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid #E8EBEF; z-index: 40;
  }
  .mag-merk, .mag-zij-onder { display: none; }
  .mag-kop-rechts { display: flex; }
  .mag-kop h1 { font-size: 19px; }
  .mag-nav { display: flex; flex: 1; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mag-nav::-webkit-scrollbar { display: none; }
  .mag-nav button { flex: 0 0 auto; min-width: 64px; flex-direction: column; gap: 3px; padding: 8px 4px; font-size: 11px; text-align: center; white-space: nowrap; }
  .mag-nav button span { font-size: 11.5px; }
  .mag-nav button.is-on::before { left: 50%; translate: -50% 0; top: auto; bottom: 2px; width: 22px; height: 3px; border-radius: 3px; }
  .mag-body { padding: 18px 16px 100px; }
}

.mag-orders { display: grid; gap: 12px; }
.mag-order {
  display: block; width: 100%; text-align: left; background: #fff; border: 1px solid #E3E6EB;
  border-radius: 16px; padding: 16px 18px; font: inherit; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.mag-order:active { transform: scale(.995); }
.mag-order.is-bezet { opacity: .72; border-style: dashed; }
.mag-order-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.mag-order-top strong { font-size: 19px; }
.mag-order-klant { font-size: 16px; color: #2A2E35; margin-bottom: 8px; }
.mag-order-cijfers { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: #5A6372; }
.mag-voort { color: #8A6200; font-weight: 600; }
.mag-order-bezet { margin-top: 8px; font-size: 14px; color: #8A6200; }

.mag-pil { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.mag-pil.groen { background: #E7F6EE; color: #1E7A4B; }
.mag-pil.grijs { background: #EEF0F3; color: #5A6372; }
.mag-pil.blauw { background: #E8F0FE; color: #2E5AAC; }
.mag-pil.oranje { background: #FEF3E2; color: #8A6200; }

/* het artikel waar je nu voor staat */
.mag-voortgang { height: 8px; background: #E3E6EB; border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.mag-voortgang div { height: 100%; background: var(--yellow, #FFC629); transition: width 250ms ease; }
.mag-nu { background: #fff; border: 1px solid #E3E6EB; border-radius: 18px; overflow: hidden; margin-bottom: 16px; }
.mag-nu-loc { background: var(--ink, #2A2E35); color: #fff; padding: 14px 20px; display: flex; align-items: baseline; gap: 14px; }
.mag-nu-loclabel { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; opacity: .65; }
.mag-nu-loc strong { font-size: 44px; line-height: 1; font-family: var(--font-head, inherit); letter-spacing: .02em; }
.mag-nu-art { padding: 16px 20px 20px; }
.mag-nu-art h2 { font-size: 22px; line-height: 1.25; margin: 0 0 4px; }
.mag-nodig { margin-top: 12px; font-size: 17px; }
.mag-nodig strong { font-size: 30px; color: var(--ink, #2A2E35); }

/* scanveld */
.mag-scan { display: flex; gap: 10px; margin-bottom: 10px; }
.mag-input {
  width: 100%; font: inherit; font-size: 17px; padding: 14px 16px;
  border: 1px solid #D4D9E0; border-radius: 12px; background: #fff; color: #2A2E35;
}
.mag-input.groot { font-size: 20px; padding: 18px; flex: 1; }
.mag-input:focus { outline: 3px solid rgba(255,198,41,.5); border-color: var(--yellow, #FFC629); }
.mag-knop {
  font: inherit; font-weight: 700; font-size: 16px; padding: 14px 20px; border-radius: 12px;
  border: 0; background: var(--yellow, #FFC629); color: #2A2E35; cursor: pointer; white-space: nowrap;
}
.mag-knop.groot { width: 100%; padding: 20px; font-size: 19px; }
.mag-knop.grijs { background: #EEF0F3; color: #2A2E35; }
.mag-knop.groen { background: #1E7A4B; color: #fff; }
.mag-knop.camera { background: var(--ink, #2A2E35); color: #fff; }
.mag-knop:active { transform: scale(.98); }
.mag-scanhulp { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.mag-link { background: none; border: 0; color: #2E5AAC; font: inherit; font-size: 15px; text-decoration: underline; cursor: pointer; padding: 4px 0; }

/* de rest van de lijst */
.mag-rest { list-style: none; margin: 0 0 20px; padding: 0; border: 1px solid #E3E6EB; border-radius: 14px; overflow: hidden; background: #fff; }
.mag-rest li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid #EEF0F3; font-size: 15px; }
.mag-rest li:first-child { border-top: 0; }
.mag-rest li.is-klaar { color: #9AA3B0; text-decoration: line-through; }
.mag-rest li.is-nu { background: #FFFBEF; font-weight: 600; }
.mag-rest-loc { font-weight: 700; min-width: 64px; font-family: ui-monospace, Menlo, monospace; }
.mag-rest-naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mag-rest-aantal { font-variant-numeric: tabular-nums; color: #5A6372; }
.mag-afsluit { position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, #F4F6F8 70%, transparent); }

/* locaties */
.mag-zoekrij { display: flex; gap: 10px; margin-bottom: 14px; }
.mag-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.mag-kpis div { flex: 1; min-width: 110px; background: #fff; border: 1px solid #E3E6EB; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; }
.mag-kpis strong { font-size: 24px; line-height: 1.1; }
.mag-kpis span { font-size: 13px; color: #6B7280; }
.mag-kpis .let strong { color: #8A6200; }
.mag-locs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mag-loc { display: flex; flex-direction: column; gap: 3px; text-align: left; background: #fff; border: 1px solid #E3E6EB; border-radius: 14px; padding: 14px 16px; font: inherit; cursor: pointer; }
.mag-loc-naam { font-size: 22px; font-weight: 800; font-family: ui-monospace, Menlo, monospace; }
.mag-loc-n { font-size: 14px; color: #5A6372; }
.mag-loc-let { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #8A6200; font-style: normal; }
.mag-loc-let em { font-style: normal; }
.mag-loc-let .grijs { color: #6B7280; }

.mag-artikelen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mag-artikelen li { background: #fff; border: 1px solid #E3E6EB; border-radius: 12px; padding: 12px 16px; }
.mag-art-naam { font-weight: 600; margin-bottom: 2px; }
.mag-art-meta { font-size: 14px; color: #5A6372; }
.mag-art-meta .groen { color: #1E7A4B; }
.mag-art-let { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* leeg, meldingen, sheets */
.mag-leeg { text-align: center; padding: 50px 20px; }
.mag-leeg-ico { font-size: 54px; color: #1E7A4B; }
.mag-leeg h2 { margin: 10px 0 6px; }
.mag-leeg p { color: #5A6372; max-width: 420px; margin: 0 auto 20px; line-height: 1.5; }
.mag-notice { padding: 14px 16px; border-radius: 12px; margin: 0 0 14px; font-size: 15px; line-height: 1.45; }
.mag-notice.is-fout { background: #FDECEC; color: #952525; border: 1px solid #F4C9C9; }
.mag-notice.is-wacht { background: #FEF3E2; color: #7A5700; border: 1px solid #F3DDB4; margin-top: 12px; }

.mag-toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom));
  background: var(--ink, #2A2E35); color: #fff; padding: 16px 22px; border-radius: 14px;
  font-size: 17px; font-weight: 600; z-index: 200; max-width: calc(100vw - 32px); text-align: center;
  box-shadow: 0 10px 30px rgba(16,24,40,.25); transition: opacity 250ms, transform 250ms;
}
.mag-toast.is-fout { background: #952525; }
.mag-toast.weg { opacity: 0; transform: translateX(-50%) translateY(10px); }

.mag-sheet { position: fixed; inset: 0; background: rgba(16,24,40,.55); display: grid; place-items: center; padding: 20px; z-index: 210; }
.mag-sheet-in { background: #fff; border-radius: 18px; padding: 24px; max-width: 460px; width: 100%; }
.mag-sheet-in h2 { margin: 0 0 8px; }
.mag-sheet-in p { color: #5A6372; line-height: 1.5; margin: 0 0 12px; }
.mag-code { font-family: ui-monospace, Menlo, monospace; font-size: 24px; font-weight: 700; background: #F4F6F8; padding: 12px 16px; border-radius: 10px; text-align: center; margin-bottom: 14px; word-break: break-all; }
.mag-sheet-knoppen { display: grid; gap: 10px; }

.mag-cam { position: fixed; inset: 0; background: #000; z-index: 220; display: grid; place-items: center; }
.mag-cam video { width: 100%; height: 100%; object-fit: cover; }
.mag-cam-kader { position: absolute; width: min(78vw, 420px); height: 190px; border: 3px solid var(--yellow, #FFC629); border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }
.mag-cam-uitleg { position: absolute; top: calc(18px + env(safe-area-inset-top)); color: #fff; font-size: 17px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.mag-cam .mag-knop { position: absolute; bottom: calc(28px + env(safe-area-inset-bottom)); }

/* ouderdom van een bestelling: hoe lang staat ze al te wachten */
.mag-ouderdom { font-size: 13px; font-weight: 600; color: #5A6372; background: #EEF0F3;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.mag-ouderdom.is-oud { background: #FEF3E2; color: #8A6200; }
.mag-order.is-oud { border-color: #F0C98A; }
.mag-order.is-wacht { opacity: .8; border-style: dashed; }
.mag-order-wacht { margin-top: 8px; font-size: 14px; color: #8A6200; }

/* foto van het artikel waar je voor staat */
.mag-nu-foto { float: right; width: 92px; height: 92px; object-fit: contain; margin: 0 0 10px 14px;
  background: #F4F6F8; border-radius: 12px; padding: 6px; }

/* waar je hierna naartoe moet, zodat je al kan doorlopen */
.mag-daarna { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: -6px 0 16px; padding: 10px 16px; background: #fff; border: 1px dashed #D5DAE2;
  border-radius: 12px; font-size: 15px; color: #5A6372; }
.mag-daarna strong { font-size: 20px; color: #2A2E35; font-family: var(--font-head, inherit); }
.mag-daarna span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* met de hand afvinken: knoppen van een halve duim */
.mag-teller { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #F4F6F8; border-radius: 16px; padding: 12px; margin: 4px 0 16px; }
.mag-teller-knop { width: 74px; height: 74px; flex: none; border: 1px solid #D5DAE2; background: #fff;
  border-radius: 16px; font-size: 34px; line-height: 1; cursor: pointer; color: #2A2E35; }
.mag-teller-knop:active { background: #EEF0F3; }
.mag-teller-getal { text-align: center; flex: 1; }
.mag-teller-getal strong { display: block; font-size: 44px; line-height: 1;
  font-family: var(--font-head, inherit); }
.mag-teller-getal span { font-size: 14px; color: #5A6372; }

/* wat er ontbreekt bij afsluiten */
.mag-tekortlijst { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 1px;
  background: #E3E6EB; border-radius: 12px; overflow: hidden; }
.mag-tekortlijst li { display: flex; align-items: center; gap: 12px; background: #fff; padding: 11px 14px; }
.mag-tekortlijst .mag-rest-aantal { color: #8A6200; font-weight: 700; }

/* korte groene flits na een geslaagde scan */
.mag-cam-flits { position: absolute; inset: 0; background: #22C55E; opacity: 0; pointer-events: none;
  transition: opacity 220ms ease; }
.mag-cam-flits.aan { opacity: .45; transition: none; }
.mag-cam-uitleg strong { font-family: var(--font-head, inherit); font-size: 22px; }

/* login */
.mag-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.mag-card { background: #fff; border: 1px solid #E3E6EB; border-radius: 18px; padding: 28px; width: 100%; max-width: 420px; }
.mag-card .mag-merk { color: #2A2E35; margin-bottom: 18px; padding: 0; }
.mag-login { background: #F5F6F8; }
.mag-tag { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--yellow, #FFC629); color: #2A2E35; padding: 4px 9px; border-radius: 999px; flex: none; }
.mag-card h1 { font-size: 26px; margin: 0 0 4px; }
.mag-veld { display: block; margin: 16px 0; }
.mag-veld span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }

@media (max-width: 560px) {
  .mag-nu-loc strong { font-size: 34px; }
  .mag-nu-art h2 { font-size: 19px; }
  .mag-wie { display: none; }
  .mag-scan { flex-direction: column; }
  .mag-knop.camera { width: 100%; }
}

/* Geraamte terwijl de artikelen onderweg zijn. Rustig, geen flikkering. */
.sk-wrap { padding-top: 28px; }
.sk-titel { height: 34px; width: 260px; border-radius: 10px; margin-bottom: 24px; }
.sk-rij { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sk-card { border: 1px solid var(--line, #E3E6EB); border-radius: var(--radius, 14px); padding: 14px; background: #fff; }
.sk-foto { aspect-ratio: 1; border-radius: 10px; margin-bottom: 14px; }
.sk-regel { height: 13px; border-radius: 6px; margin-bottom: 8px; }
.sk-regel.kort { width: 55%; }
.sk-titel, .sk-foto, .sk-regel {
  background: linear-gradient(90deg, #EEF0F3 25%, #F6F7F9 37%, #EEF0F3 63%);
  background-size: 400% 100%;
  animation: sk-glans 1.4s ease-in-out infinite;
}
@keyframes sk-glans { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .sk-titel, .sk-foto, .sk-regel { animation: none; } }

/* Niet op voorraad: duidelijk maken wat er ontbreekt en wat dat betekent */
.sheet-pad { padding: 24px; display: block; overflow: auto; }
.sheet-pad h2 { margin: 0 0 8px; font-size: 21px; }
.sheet-pad > .muted { line-height: 1.5; margin: 0 0 14px; }
.sheet-acts { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
.sheet-acts .btn { flex: 1 1 auto; justify-content: center; }

.mist-lijst { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid var(--line, #E3E6EB); border-radius: 12px; overflow: hidden; }
.mist-lijst li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line-2, #EEF0F3); font-size: 15px; }
.mist-lijst li:first-child { border-top: 0; }
.mist-lijst span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.link-mini { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--blue, #2E5AAC); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.ci-tekort { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; color: #8A6200; }
.notice-wacht { background: #FEF3E2; border: 1px solid #F3DDB4; color: #7A5700; border-radius: var(--radius, 12px); padding: 13px 15px; display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
.notice-wacht .ico { flex: none; margin-top: 2px; }
.split-titel { font-size: 16px; margin: 18px 0 10px; }
#split-keuze .option-side { white-space: nowrap; }
.mag-order.is-wacht { opacity: .78; border-left: 4px solid #E0B33C; }
.mag-order-wacht { margin-top: 8px; font-size: 14px; color: #8A6200; font-weight: 600; }

/* ==========================================================================
   Homepage — hero zonder foto, en het blok voor zakelijke klanten
   ========================================================================== */
/* ==========================================================================
   Banner met achtergrondfoto
   De foto van de handschoenen heeft het onderwerp rechts en donkerblauw
   links. Daar zetten we de tekst, met een verloop eroverheen zodat ze
   leesbaar blijft ook als de foto ooit vervangen wordt door een lichtere.
   ========================================================================== */
.hero-foto {
  position: relative; padding: 0; margin-top: 20px; overflow: hidden;
  border-radius: var(--radius-xl, 20px);
  background: #121C3A var(--hero-bg) right center / cover no-repeat;
  color: #fff; isolation: isolate;
}
/* 1. het verloop dat de linkerkant leesbaar houdt */
.hero-foto::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(14,24,58,.97) 0%, rgba(14,24,58,.9) 34%,
    rgba(14,24,58,.55) 56%, rgba(14,24,58,.1) 76%, rgba(14,24,58,0) 100%);
}
/* 2. de schuifregelaar "donkerte over de foto" uit Beheer */
.hero-foto::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: #0E183A; opacity: var(--hero-dim, .35);
}
.hero-foto .container { padding: clamp(44px, 7vw, 92px) clamp(20px, 5vw, 56px); }
.hero-foto .hero-mid { max-width: 560px; margin: 0; text-align: left; }
.hero-foto.is-center .hero-mid { max-width: 780px; margin: 0 auto; text-align: center; }
.hero-foto.is-center::before { background: rgba(14,24,58,.78); }

.hero-foto h1.hero-merk {
  font-size: clamp(42px, 7vw, 82px); line-height: 1; margin: 0 0 12px;
  letter-spacing: -0.03em; font-weight: 800; max-width: none; color: #fff;
  text-shadow: 0 2px 20px rgba(8,14,34,.35);
}
.hero-foto.is-center h1.hero-merk { margin: 0 auto 12px; }
.hero-foto .hero-lijn { color: #fff; margin-left: 0; margin-right: 0; }
.hero-foto.is-center .hero-lijn { margin-left: auto; margin-right: auto; }
.hero-foto .hero-sub { color: rgba(255,255,255,.82); margin-left: 0; margin-right: 0; }
.hero-foto.is-center .hero-sub { margin-left: auto; margin-right: auto; }
.hero-foto .hero-zoek { margin: 0; }
.hero-foto.is-center .hero-zoek { margin: 0 auto; }
.hero-foto .hero-zoek input { border-color: transparent; box-shadow: 0 6px 20px rgba(8,14,34,.25); }
.hero-foto .hero-chips { justify-content: flex-start; margin-left: 0; }
.hero-foto.is-center .hero-chips { justify-content: center; margin-left: auto; margin-right: auto; }
.hero-foto .hero-chips a {
  background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.26);
  backdrop-filter: blur(3px);
}
.hero-foto .hero-chips a:hover { background: rgba(255,255,255,.26); }
.hero-foto .hero-chips a.is-alle { background: var(--yellow, #FFC629); color: var(--ink, #2A2E35);
  border-color: var(--yellow, #FFC629); font-weight: 700; }

/* Smal scherm: de handen vallen dan buiten beeld, dus leggen we de foto
   rechts uit en maken we het verloop vlak zodat de tekst zeker leesbaar is. */
@media (max-width: 760px) {
  .hero-foto { background-position: 72% center; }
  /* Bovenaan staat de tekst, dus daar mag het donker; naar onder toe laten
     we de foto weer doorkomen, anders zie je op een gsm enkel een blauw vlak. */
  .hero-foto::before { background: linear-gradient(180deg, rgba(14,24,58,.93) 0%,
    rgba(14,24,58,.84) 48%, rgba(14,24,58,.5) 100%); }
  .hero-foto::after { opacity: calc(var(--hero-dim, .35) * .6); }
  .hero-foto .hero-mid { max-width: none; }
}

.hero-plat { padding: 0; }
.hero-plat .container {
  background: linear-gradient(170deg, var(--yellow-50, #FFF8E6) 0%, var(--bg-soft, #F6F7F9) 100%);
  border-radius: var(--radius-xl, 20px);
  padding: clamp(36px, 6vw, 68px) clamp(20px, 5vw, 56px);
  margin-top: 20px;
}
.hero-mid { max-width: 880px; margin: 0 auto; text-align: center; }

/* De naam groot. Eén woord, dus altijd netjes gecentreerd — geen scheve
   regels meer door lange samenstellingen die willekeurig afbreken. */
/* Zwaarder gewicht dan de oude .hero h1, die de titel tot 14 tekens breed
   knipt. Daardoor stond de naam links van het midden in plaats van erin. */
.hero-plat .hero-mid h1.hero-merk {
  font-size: clamp(42px, 8vw, 86px); line-height: 1; margin: 0 auto 12px;
  letter-spacing: -0.03em; font-weight: 800;
  max-width: none; text-align: center;
}
/* Waar je voor staat, in één regel die niet mag breken op een rare plaats. */
.hero-lijn {
  font-size: clamp(18px, 2.4vw, 25px); line-height: 1.3; font-weight: 700;
  color: var(--ink, #2A2E35); margin: 0 auto 10px; max-width: 22ch;
  text-wrap: balance;
}
/* Laat je de uitleg eronder weg, dan houdt deze regel zelf de ruimte
   tot het zoekveld aan. */
.hero-mid p:last-of-type { margin-bottom: 28px; }
.hero-sub {
  font-size: clamp(15px, 1.7vw, 17px); line-height: 1.55; color: var(--ink-2, #4A5160);
  margin: 0 auto 28px; max-width: 56ch; text-wrap: pretty;
}

.hero-zoek { display: flex; gap: 10px; max-width: 600px; margin: 0 auto; }
.hero-zoek input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 16px 20px;
  border: 1px solid var(--line, #E3E6EB); border-radius: 999px; background: #fff;
  box-shadow: 0 1px 3px rgba(16,24,40,.06);
}
.hero-zoek input:focus { outline: 3px solid rgba(255,198,41,.45); border-color: var(--yellow, #FFC629); }
.hero-zoek .btn { border-radius: 999px; padding-left: 24px; padding-right: 24px; flex: none; }

.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 22px auto 0; max-width: 740px; }
.hero-chips a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 15px; border-radius: 999px; background: rgba(255,255,255,.75);
  border: 1px solid var(--line, #E3E6EB); font-size: 14px; font-weight: 600;
  color: var(--ink, #2A2E35); text-decoration: none; transition: background 150ms, border-color 150ms;
}
.hero-chips a:hover { background: #fff; border-color: var(--ink, #2A2E35); }
.hero-chips a.is-alle { background: var(--ink, #2A2E35); color: #fff; border-color: var(--ink, #2A2E35); }
.hero-plat .hero-actions { margin-top: 20px; justify-content: center; display: flex; }

.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; }

/* Zakelijke klanten wijzen op hun eigen tarieven */
.zak-blok {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 44px);
  align-items: center; background: var(--ink, #2A2E35); color: #fff;
  border-radius: var(--radius-xl, 20px); padding: clamp(24px, 4vw, 40px);
}
.zak-blok h2 { font-size: clamp(21px, 2.6vw, 27px); margin: 0 0 8px; color: #fff; }
.zak-blok > .zak-tekst > p { color: rgba(255,255,255,.75); margin: 0 0 18px; line-height: 1.5; }
.zak-punten { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.zak-punten li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.92); }
.zak-punten .ico { flex: none; margin-top: 3px; color: var(--yellow, #FFC629); }
.zak-actie { text-align: center; }
.zak-actie .btn { width: 100%; justify-content: center; }
.zak-klein { font-size: 14px; color: rgba(255,255,255,.7); margin: 12px 0 0; }
.zak-klein .link { color: var(--yellow, #FFC629); }
.zak-wacht { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.85); text-align: left; }
.zak-wacht .ico { flex: none; margin-top: 2px; color: var(--yellow, #FFC629); }

/* Rasters die niet scheef vallen bij weinig items */
.promo-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.promo-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
/* Vier op een rij: met zeven afdelingen geeft dat 4 + 3 in plaats van
   een eenzame tegel helemaal alleen op de tweede rij. */
.cat-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cat-card h3 { overflow-wrap: anywhere; hyphens: auto; }
.cat-card p { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .zak-blok { grid-template-columns: minmax(0, 1fr); }
  .hero-zoek { flex-direction: column; }
  .hero-zoek .btn { width: 100%; justify-content: center; }
}

[data-lijst="afval.faq"] .io-rij { grid-template-columns: minmax(180px, 1fr) 1.6fr 36px; }
.info-kop:not(.heeft-foto) { background: linear-gradient(120deg, var(--bg-soft) 55%, var(--yellow-50, #FFF9E6) 100%); }
.info-kop:not(.heeft-foto)::after { content: ''; position: absolute; right: -60px; top: 50%; width: 320px; height: 320px; border-radius: 50%; background: var(--yellow); opacity: .9; transform: translateY(-50%); }
.info-kop:not(.heeft-foto)::before { content: ''; position: absolute; right: 200px; top: 24px; width: 70px; height: 70px; border-radius: 50%; border: 10px solid var(--yellow); opacity: .5; }
@media (max-width: 760px) { .info-kop:not(.heeft-foto)::after { width: 160px; height: 160px; right: -60px; opacity: .6; } .info-kop:not(.heeft-foto)::before { display: none; } }

/* ---- Nooit horizontaal scrollen ---- */
/* Het categoriemenu hangt aan de menubalk zelf, zodat het nooit buiten het scherm valt. */
.mainnav .container { position: relative; }
.nav-cats { position: static; }
.mega { left: 24px; max-width: calc(100vw - 32px); }
.pdp > *, .pdp-info > *, .buy-box > * { min-width: 0; }
.staffels { table-layout: fixed; }
/* Vangnet: wat toch te breed is, wordt afgeknipt in plaats van de pagina te laten schuiven. */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }

/* Menu dat zich aanpast aan de breedte */
.mainnav .container { overflow: visible; }
.hoofd-links { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
@media (max-width: 1180px) { .topbar li:nth-child(n+3) { display: none; } }
.mainnav a, .mainnav .nav-btn { white-space: nowrap; flex-shrink: 0; }
.mainnav .nav-right { white-space: nowrap; flex-shrink: 0; }
.mainnav .container.is-krap .nav-right { display: none; }
.nav-meer { position: relative; flex-shrink: 0; }
.nav-meer .nav-btn .ico { width: 16px; height: 16px; transition: transform var(--fast); }
.nav-meer.is-open .nav-btn .ico { transform: rotate(180deg); }
.nav-meer.is-actief > .nav-btn { color: var(--ink); font-weight: 600; }
.meer-menu { position: absolute; top: 100%; right: 0; min-width: 210px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); display: grid; gap: 2px; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all var(--fast) var(--ease); }
.nav-meer.is-open .meer-menu { opacity: 1; visibility: visible; transform: none; }
.mainnav .meer-menu a { height: auto; padding: 10px 12px; border-radius: 10px; }
.mainnav .meer-menu a:hover { background: var(--bg-soft); }
.mainnav .meer-menu a[aria-current="page"]::after { display: none; }
.mainnav .meer-menu a[aria-current="page"] { background: var(--yellow-50, #FFF9E6); }

/* ---- Nieuws ---- */
.nw-kop-sec { padding-bottom: 0; }
.nw-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin: 6px 0 18px; }
.nw-kop h1 { font-size: clamp(34px, 4.4vw, 52px); margin: 0 0 8px; }
.nw-kop .info-lead { color: var(--ink-2); }
.nw-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.nw-filters .chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.nw-filters .chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.nw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-top: 22px; }
.nw-kaart { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; color: inherit; transition: box-shadow var(--fast), transform var(--fast); }
.nw-kaart:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.nw-kaart:hover h3 { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.nw-beeld { position: relative; aspect-ratio: 16 / 9; background: var(--yellow-50, #FFF9E6); overflow: hidden; }
.nw-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.nw-kaart:hover .nw-beeld img { transform: scale(1.04); }
.nw-geen { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--yellow-50, #FFF9E6), var(--yellow-100, #FFF0BF)); }
.nw-beeld .nw-geen img { width: 26%; height: auto; object-fit: contain; opacity: .9; }
.nw-kaart:hover .nw-beeld .nw-geen img { transform: scale(1.08); }
.nw-pin { position: absolute; top: 14px; left: 14px; background: var(--ink); color: var(--yellow); font-weight: 800; font-size: 12px; padding: 5px 11px; border-radius: 999px; }
.nw-tekst { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nw-tekst h3 { font-size: 19px; line-height: 1.3; margin: 0; }
.nw-tekst p { margin: 0; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.nw-cat { background: var(--yellow); color: var(--yellow-ink, #2A2E35); font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 6px; }
.nw-verder { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.nw-kaart.is-groot { display: grid; grid-template-columns: 1.25fr 1fr; }
.nw-kaart.is-groot .nw-beeld { aspect-ratio: auto; min-height: 340px; }
.nw-kaart.is-groot .nw-tekst { padding: 34px 36px; justify-content: center; gap: 12px; }
.nw-kaart.is-groot h3 { font-size: clamp(24px, 2.6vw, 34px); }
.nw-kaart.is-groot p { -webkit-line-clamp: 4; font-size: 16.5px; }
.nw-smal { max-width: 780px; }
.nw-breed { max-width: 1080px; }
.nw-art-kop { padding: 18px 0 26px; }
.nw-art-kop h1 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.1; margin: 14px 0 12px; }
.nw-hoofdfoto { margin: 0 0 30px; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 16 / 8; background: var(--bg-soft); }
.nw-hoofdfoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-body { max-width: none; font-size: 17px; }
.nw-body p, .nw-body li { line-height: 1.8; }
.nw-body > p:first-child { font-size: 19px; color: var(--ink); }
.nw-deel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 30px 0 10px; padding-top: 22px; border-top: 1px solid var(--line); }
.nw-deel-label { font-weight: 800; margin-right: 6px; }
.nw-deel-knop { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 600 14px var(--font); color: var(--ink); cursor: pointer; }
.nw-deel-knop:hover { border-color: var(--yellow); background: var(--yellow-50, #FFF9E6); }
.nw-deel-knop .ico { width: 17px; height: 17px; }
.nw-deel-knop.is-native { background: var(--yellow); border-color: var(--yellow); }
.nw-meer-sec { background: var(--bg-soft); }
@media (max-width: 860px) {
  .nw-kaart.is-groot { grid-template-columns: 1fr; }
  .nw-kaart.is-groot .nw-beeld { min-height: 0; aspect-ratio: 16 / 9; }
  .nw-kaart.is-groot .nw-tekst { padding: 20px; }
  .nw-deel-knop span { display: none; }
  .nw-deel-knop.is-native span { display: inline; }
}

.nw-figuur { margin: 22px 0; border-radius: var(--radius-lg); overflow: hidden; }
.nw-figuur img { width: 100%; display: block; }
.nw-figuur figcaption { font-size: 13.5px; color: var(--muted); padding: 8px 2px 0; }
/* Beheer: nieuws */
.nwa-lijst { display: grid; gap: 10px; margin-top: 14px; }
.nwa-rij { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.nwa-foto { width: 88px; height: 58px; border-radius: 10px; overflow: hidden; background: var(--yellow-50, #FFF9E6); display: grid; place-items: center; font-size: 24px; }
.nwa-foto img { width: 100%; height: 100%; object-fit: cover; }
.nwa-tekst { display: grid; gap: 3px; min-width: 0; justify-items: start; }
.nwa-tekst strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nwa-tekst .muted { font-size: 13px; }
.nwa-acties { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.nwa-leeg { border: 2px dashed var(--line); border-radius: 14px; padding: 26px; display: grid; gap: 4px; text-align: center; color: var(--muted); }
.nwa-leeg strong { color: var(--ink); }
.nwa-balk { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.nwa-balk button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 11px; font: 600 13px var(--font); cursor: pointer; }
.nwa-balk button:hover { border-color: var(--yellow); background: var(--yellow-50, #FFF9E6); }
.nwa-veld { min-height: 280px; }
.nwa-prod { grid-template-columns: minmax(0, 1fr) 32px; }
.nwa-publiceer { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.nwa-publiceer .input { height: 40px; }
.nwa-deel { max-width: 560px; }
.nwa-link { display: flex; gap: 8px; margin-bottom: 12px; }
.nwa-link .input { flex: 1; font-size: 13px; }
.nwa-kanalen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.nwa-ig { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, #2A2E35, #3A3F48); color: #fff; }
.nwa-ig div { display: grid; gap: 2px; }
.nwa-ig .muted { color: rgba(255,255,255,.75); font-size: 13px; }
@media (max-width: 760px) { .nwa-rij { grid-template-columns: 64px 1fr; } .nwa-acties { grid-column: 1 / -1; justify-content: flex-start; } .nwa-kanalen { grid-template-columns: 1fr 1fr; } }

/* Categoriemenu: kolommen die nooit buiten het vak lopen */
.mega { width: min(900px, calc(100vw - 48px)); max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega a { min-width: 0; align-items: flex-start; }
.mega a > span:last-child { min-width: 0; display: grid; gap: 2px; }
.mega strong, .mega small { overflow-wrap: anywhere; line-height: 1.3; }
.mega .m-ico { width: 36px; height: 36px; }
@media (max-width: 1100px) { .mega { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mainnav .mega a { white-space: normal; flex-shrink: 1; }

/* ---------- Nieuwsbrief, stalen, groei (20261013d) ---------- */
.footer-nb { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; padding: 26px 0; border-bottom: 1px solid var(--line); }
.footer-nb > div strong { display: block; font-family: var(--font-head); font-size: 18px; }
.footer-nb > div span { color: var(--muted); font-size: 14px; }
.footer-nb .nieuwsbrief { margin-top: 0; flex: 1 1 360px; max-width: 520px; }
.nieuwsbrief .input { min-width: 0; flex: 1 1 200px; }
.nb-ok { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 12px 14px; background: var(--green-50); color: var(--green); border-radius: var(--radius); font-weight: 600; }
.footer-nb .nb-ok { margin: 0; }
.nb-ok .ico { flex: none; }
.nb-pagina { max-width: 620px; }
.nb-kaart { text-align: center; padding: 40px 28px; }
.nb-kaart h1 { font-size: clamp(26px, 4vw, 34px); margin: 8px 0 10px; }
.nb-kaart .nieuwsbrief { justify-content: center; margin-top: 22px; }
.nb-kaart .empty-ico { margin: 0 auto; }
.cf-nb { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); margin: 4px 0 16px; cursor: pointer; }
.cf-nb input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--yellow); flex: none; }
.cf-staal { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.cf-staal h2 { margin: 0 0 2px; }
.cf-staal p { margin: 0; }
.cf-staal-foto { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; flex: none; }
.cf-staal-foto img { width: 100%; height: 100%; object-fit: contain; }
.pdp-staal { margin-bottom: 10px; }
.acc-nb { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.acc-nb h2 { margin: 0 0 4px; }
.acc-nb p { margin: 0; }
.acc-nb > div { flex: 1 1 280px; }

/* Beheer: Google Shopping, Zoekopdrachten, Nieuwsbrief */
.abo-kpis .kpi em { font-style: normal; font-size: 12.5px; }
.gs-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.gs-twee .card { margin: 0; }
.gs-lijst { list-style: none; margin: 10px 0 0; padding: 0; max-height: 340px; overflow: auto; }
.gs-lijst li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.gs-lijst li span { flex: none; }
.zk-staven { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding: 8px 0; }
.zk-staaf { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 3px; }
.zk-staaf > span { width: 100%; background: var(--yellow); border-radius: 4px 4px 0 0; display: flex; align-items: flex-end; overflow: hidden; min-height: 2px; }
.zk-staaf i { display: block; width: 100%; background: var(--red); }
.zk-leg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--yellow); vertical-align: middle; margin: 0 4px 0 10px; }
.zk-leg.is-niets { background: var(--red); }
.zk-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.zk-tabel td { padding: 8px 6px; border-bottom: 1px solid var(--line-2); }
.zk-tabel td.amt { text-align: right; white-space: nowrap; font-weight: 600; }
.nb-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.nb-voorbeeld { position: sticky; top: 80px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #F4F5F7; }
.nb-voorbeeld-kop { padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); background: #fff; }
.nb-voorbeeld iframe { display: block; width: 100%; height: 720px; border: 0; background: #F4F5F7; }
.nb-nieuws { display: grid; gap: 8px; }
.nb-nw { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 14px; }
.nb-nw input { width: 18px; height: 18px; accent-color: var(--yellow); flex: none; }
.nb-nw-foto { width: 44px; height: 32px; border-radius: 6px; overflow: hidden; background: var(--bg-soft); display: grid; place-items: center; flex: none; }
.nb-nw-foto img { width: 100%; height: 100%; object-fit: cover; }
.chip-print { background: var(--ink); color: #fff; border-color: var(--ink); text-decoration: none; }
@media (max-width: 980px) {
  .nb-layout, .gs-twee { grid-template-columns: 1fr; }
  .nb-voorbeeld { position: static; }
  .nb-voorbeeld iframe { height: 560px; }
}
@media (max-width: 640px) {
  .footer-nb .nieuwsbrief { flex-basis: 100%; }
}
.abo-kpis.gs-kpis { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .abo-kpis.gs-kpis { grid-template-columns: 1fr 1fr; } }
.nb-tekst { min-height: 180px; resize: vertical; }
.nb-afz { display: flex; gap: 14px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.nb-afz h3 { margin: 0 0 2px; }
.nb-afz p { margin: 0; max-width: 62ch; }
.nb-afz.is-let { border-color: var(--orange); background: var(--orange-50); }
.nb-afz-veld { display: flex; gap: 8px; flex: 1 1 320px; max-width: 460px; }
.nb-afz-veld .input { flex: 1; min-width: 0; }

/* Zoekveld in de banner: het veld is altijd wit, dus de tekst altijd donker
   (de banner zelf zet wit als tekstkleur, en dat erfde het veld over). */
.hero-zoek input, .hero-foto .hero-zoek input { color: #2A2E35; caret-color: #2A2E35; -webkit-text-fill-color: #2A2E35; }
.hero-zoek input::placeholder { color: #7A808A; -webkit-text-fill-color: #7A808A; opacity: 1; }

/* ---------- Merken (20261013e) ---------- */
.merk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.merk-grid.is-rij { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.merk-tegel { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; color: var(--ink); text-decoration: none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease); }
.merk-tegel:hover { border-color: var(--yellow); box-shadow: var(--shadow); transform: translateY(-2px); }
.merk-beeld { height: 96px; display: grid; place-items: center; padding: 14px 16px; background: var(--bg-softer); border-bottom: 1px solid var(--line-2); }
.merk-tegel.is-klein .merk-beeld { height: 80px; }
.merk-beeld img { max-width: 100%; max-height: 100%; object-fit: contain; }
.merk-woord { font-family: var(--font-head); font-weight: 800; font-size: clamp(16px, 1.6vw, 20px); letter-spacing: -.01em; line-height: 1.15; text-align: center; color: var(--ink);
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.merk-onder { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 14px; font-size: 14px; }
.merk-onder strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.merk-onder small { color: var(--muted); white-space: nowrap; flex: none; }
.merk-letters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 10px 0; }
.merk-letters a { min-width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; font-weight: 700; text-decoration: none; color: var(--ink); background: #fff; }
.merk-letters a:hover { background: var(--yellow-50); border-color: var(--yellow); }
.merk-az { columns: 4 220px; column-gap: 28px; }
.merk-letter { break-inside: avoid; margin-bottom: 22px; scroll-margin-top: 80px; }
.merk-letter h3 { font-size: 22px; margin: 0 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--yellow); }
.merk-letter ul { list-style: none; margin: 0; padding: 0; }
.merk-letter a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.merk-letter a:hover span { text-decoration: underline; }
.merk-letter small { color: var(--muted); }
.merk-kop { background: linear-gradient(170deg, var(--yellow-50) 0%, var(--bg-soft) 100%); padding: 18px 0 26px; border-bottom: 1px solid var(--line); }
.merk-kop-rij { display: flex; gap: 26px; align-items: center; margin-top: 10px; }
.merk-kop-logo { width: 180px; height: 120px; flex: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); display: grid; place-items: center; padding: 16px; }
.merk-kop-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.merk-kop-logo .merk-woord { font-size: 24px; }
.merk-kop-tekst h1 { margin: 0 0 4px; font-size: clamp(30px, 4.2vw, 46px); }
.merk-kop-meta { color: var(--muted); margin: 0; }
.merk-kop-uitleg { margin-top: 10px; max-width: 70ch; color: var(--ink-2); }
.merk-kop-uitleg p { margin: 0 0 8px; }
.merk-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.merk-cats .chip small { color: var(--muted); font-weight: 600; margin-left: 2px; }
.merk-filters-link { text-align: center; margin: 22px 0 0; }
@media (max-width: 1100px) { .merk-grid.is-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .merk-grid, .merk-grid.is-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .merk-kop-rij { flex-direction: column; align-items: flex-start; gap: 14px; }
  .merk-kop-logo { width: 140px; height: 90px; }
  .merk-onder { flex-direction: column; gap: 0; }
}

/* Beheer: Merken en Doorverwijzingen */
.mk-rij { display: grid; grid-template-columns: 56px minmax(0, 1fr) 150px 160px auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.mk-logo { width: 56px; height: 40px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; overflow: hidden; background: #fff; font-size: 10px; font-weight: 800; color: var(--muted); text-align: center; line-height: 1.1; padding: 2px; }
.mk-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mk-naam strong { display: block; }
.mk-naam span { font-size: 13px; }
.mk-rij.is-uit { opacity: .55; }
.mk-editor { background: var(--bg-soft); border-radius: 12px; padding: 14px; margin: 4px 0 6px; }
.rd-tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rd-tabel th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 6px; border-bottom: 2px solid var(--line); }
.rd-tabel td { padding: 9px 6px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.rd-tabel code { font-size: 12.5px; background: var(--bg-soft); padding: 2px 6px; border-radius: 5px; word-break: break-all; }
.rd-tabel td.n { text-align: right; white-space: nowrap; font-weight: 600; }
.rd-pijl { color: var(--muted); padding: 0 2px; }
.rd-nieuw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; }
.rd-wrap { overflow-x: auto; }
@media (max-width: 760px) { .rd-nieuw { grid-template-columns: 1fr; } .mk-rij { grid-template-columns: 48px minmax(0, 1fr) auto; } .mk-rij .mk-extra { display: none; } }
.merk-onder.is-enkel { justify-content: center; }
.merk-tegel .merk-beeld { border-bottom: 0; }
.merk-onder { border-top: 1px solid var(--line-2); }
.rd-tabel td:first-child { min-width: 240px; }
.rd-tabel code { word-break: normal; overflow-wrap: anywhere; }
.merk-onder.is-enkel { align-items: center; }
.mk-editor textarea { min-height: 110px; }

/* ---------- Plattegrond magazijn (20261013f) ---------- */
.plattegrond { display: block; width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif; }
.plattegrond .pl-txt { text-anchor: middle; dominant-baseline: central; font-weight: 650; letter-spacing: .3px; pointer-events: none; }
.plattegrond .pl-sub { font-weight: 500; opacity: .75; }
.plattegrond [data-zone] { cursor: pointer; }
.plattegrond [data-zone]:hover rect:not(.pl-ring) { opacity: .82; }
.plattegrond [data-zone]:focus { outline: none; }
.plattegrond [data-zone]:focus-visible rect:not(.pl-ring) { stroke: #FF6B1A; stroke-width: 4; }
.plattegrond .pl-ring { fill: none; stroke: #FF6B1A; stroke-width: 5; animation: pl-puls 1.3s ease-in-out infinite; }
@keyframes pl-puls { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .plattegrond .pl-ring { animation: none; } }
.pl-legende { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; color: #2A2E35; }
.pl-legende li { display: flex; align-items: center; gap: 8px; }
.pl-legende span { width: 18px; height: 18px; border-radius: 5px; flex: none; box-shadow: inset 0 0 0 1px rgba(11,21,48,.08); }

/* Beheer */
.pl-adm { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 16px; align-items: start; }
.pl-adm-kaart { position: sticky; top: 76px; }
.pl-adm-kaart #pl-kaart { max-width: 560px; margin: 0 auto; }
.pl-adm-zij { display: grid; gap: 16px; }
.pl-adm-zij .card { margin: 0; }
.pl-form-kop { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.pl-form-kop h3 { margin: 0; }
.pl-stip { width: 30px; height: 30px; border-radius: 8px; flex: none; box-shadow: inset 0 0 0 1px rgba(11,21,48,.12); }
.pl-hier { margin-top: 6px; padding: 12px; background: var(--bg-soft); border-radius: 12px; font-size: 14px; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pl-chips span, .pl-chips button { font: 600 12.5px/1 ui-monospace, Menlo, monospace; padding: 6px 8px; border-radius: 7px; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.pl-chips.is-klik button { cursor: pointer; }
.pl-chips.is-klik button:hover { border-color: #FF6B1A; background: #FFF1E8; }
.pl-groep + .pl-groep { margin-top: 12px; }
.pl-groep h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pl-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; gap: 10px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-radius: 9px; padding: 7px 9px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); }
.pl-rij:hover { background: var(--bg-soft); }
.pl-rij.is-on { background: #FFF1E8; box-shadow: inset 3px 0 0 #FF6B1A; }
.pl-rij strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-rij span { font-size: 12.5px; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.pl-rij em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); text-align: right; }
.pl-bewaarbalk { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 16px; padding: 12px 16px; background: #2A2E35; color: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); }
.pl-bewaarbalk span { margin-right: auto; font-weight: 600; }
@media (max-width: 1100px) { .pl-adm { grid-template-columns: 1fr; } .pl-adm-kaart { position: static; } }

/* Magazijn */
.mag-notice.is-ok { background: #E9F7EF; color: #18603D; border: 1px solid #BFE6CF; }
.mag-plan { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 20px; align-items: start; }
.mag-plan-kaart { background: #F3F5F9; border-radius: 18px; padding: 14px; }
.mag-plan-zij .pl-legende { flex-direction: column; font-size: 15px; }
@media (max-width: 860px) { .mag-plan { grid-template-columns: 1fr; } }
.mag-mini { margin-left: auto; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 6px 6px 6px 12px; color: #fff; font: inherit; cursor: pointer; align-self: center; text-align: right; }
.mag-mini:hover { background: rgba(255,255,255,.16); }
.mag-mini-tekst { display: flex; flex-direction: column; font-size: 15px; font-weight: 700; line-height: 1.2; max-width: 150px; }
.mag-mini-tekst em { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .65; font-weight: 600; }
.mag-mini-kaart { width: 58px; flex: none; background: #F3F5F9; border-radius: 8px; padding: 3px; }
.mag-nu-loc { align-items: center; }
.mag-kaartsheet .mag-sheet-in { max-width: 560px; max-height: calc(100vh - 40px); overflow: auto; }
.mag-kaartsheet-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.mag-kaartsheet-kop h2 { margin: 0 0 2px; }
.mag-kaartsheet-kop p { margin: 0; }
.mag-kaartsheet-kop .mag-knop { flex: none; }
.mag-kaartsheet-kaart { background: #F3F5F9; border-radius: 14px; padding: 10px; }
.mag-kaartsheet-kaart .plattegrond { max-height: calc(100vh - 190px); width: auto; max-width: 100%; margin: 0 auto; }
.mag-zonesheet { max-height: calc(100vh - 40px); overflow: auto; }
.mag-zonesheet h2 { margin: 0 0 4px; }
.mag-zonelocs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 14px 0; max-height: 46vh; overflow: auto; }
.mag-zoneform { display: grid; gap: 10px; margin: 14px 0; }
.mag-zoneform label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.mag-loc-zone { font-size: 12.5px; color: #B3541B; font-weight: 600; }
.mag-nu-loc { flex-wrap: wrap; }
.mag-nu-loc strong { white-space: nowrap; }
@media (max-width: 640px) {
  .mag-mini { margin-left: 0; width: 100%; justify-content: space-between; text-align: left; }
  .mag-mini-tekst { max-width: none; }
  .mag-mini-kaart { width: 46px; }
}

.mag-colli { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; margin: 12px 0 14px; }
.mag-colli .mag-input { width: 110px; text-align: center; }

/* ---------- Beoordelingen (20261013g) ---------- */
.sterren { position: relative; display: inline-block; color: #D7DBE2; font-size: 18px; line-height: 1; letter-spacing: 1px; white-space: nowrap; vertical-align: middle; }
.sterren.is-klein { font-size: 14px; }
.sterren-aan { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #F5A623; }
.pc-sterren { display: flex; align-items: center; gap: 4px; margin: -2px 0 4px; font-size: 12.5px; color: var(--muted); }
.pc-sterren em { font-style: normal; }
.pdp-sterren { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--ink-2); font-size: 14px; text-decoration: none; }
.pdp-sterren:hover span { text-decoration: underline; }
.rv-sectie { border-top: 1px solid var(--line); }
.rv-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.rv-samen { position: sticky; top: 90px; }
.rv-cijfer { display: grid; gap: 4px; margin-bottom: 12px; }
.rv-cijfer strong { font-family: var(--font-head); font-size: 44px; line-height: 1; }
.rv-balk { display: grid; grid-template-columns: 34px 1fr 26px; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin: 5px 0; }
.rv-balk i { height: 8px; background: var(--line-2); border-radius: 99px; overflow: hidden; }
.rv-balk b { display: block; height: 100%; background: #F5A623; border-radius: 99px; }
.rv-balk em { font-style: normal; text-align: right; }
.rv-echt { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--green); margin: 14px 0; }
.rv-lijst { display: grid; gap: 14px; }
.rv-item { padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.rv-item:last-child { border-bottom: 0; }
.rv-kop { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.rv-item p { margin: 0 0 8px; color: var(--ink-2); }
.rv-wie { font-size: 13px; color: var(--muted); }
.rv-geverifieerd { color: var(--green); display: inline-flex; align-items: center; gap: 3px; }
.rv-antwoord { margin-top: 10px; padding: 10px 14px; background: var(--bg-soft); border-left: 3px solid var(--yellow); border-radius: 8px; font-size: 14px; }
.rv-antwoord p { margin: 4px 0 0; }
.rv-form h3 { margin: 0 0 10px; font-size: 17px; }
.rv-kies { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; }
.rv-kies button { font-size: 34px; line-height: 1; background: none; border: 0; padding: 2px; color: #D7DBE2; cursor: pointer; transition: transform var(--fast) var(--ease), color var(--fast); }
.rv-kies button.is-aan { color: #F5A623; }
.rv-kies button:hover { transform: scale(1.12); }
.rv-kies-tekst { margin-left: 8px; font-weight: 600; color: var(--ink-2); }
.rv-form-knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
.rv-acc { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.rv-acc-foto { width: 56px; height: 56px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; }
.rv-acc-foto img { width: 100%; height: 100%; object-fit: contain; }
.rv-acc > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-acc > div a { color: var(--ink); text-decoration: none; }
.rv-acc-st { display: flex; align-items: center; gap: 8px; font-size: 13px; }
@media (max-width: 860px) { .rv-grid { grid-template-columns: 1fr; } .rv-samen { position: static; } }
@media (max-width: 520px) { .rv-acc { grid-template-columns: 48px minmax(0, 1fr); } .rv-acc .btn { grid-column: 1 / -1; justify-self: start; } }

/* Beheer: bijbestellen, beoordelingen, peppol */
.bb-tabel tr.is-onder td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.bb-meter { height: 6px; background: var(--line-2); border-radius: 99px; overflow: hidden; margin-bottom: 4px; max-width: 140px; }
.bb-meter i { display: block; height: 100%; background: var(--green); }
.is-onder .bb-meter i { background: var(--red); }
.bb-rood { color: var(--red); }
.bb-aantal { width: 84px; text-align: right; padding: 6px 8px; }
.bb-grens { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 0 0 12px; }
.bb-grens.is-onder { border-color: #F4C9C9; background: var(--red-50); }
.bb-grens h4 { margin: 0 0 2px; }
.rv-adm { margin-bottom: 12px; }
.rv-adm-kop { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.rv-adm-tekst { margin: 10px 0 0; color: var(--ink-2); }
.adm-sterren { color: #F5A623; letter-spacing: 1px; }
.adm-sterren span { color: #D7DBE2; }
.pp-uitleg p { max-width: 80ch; }

/* Kort houdbaar, alternatief bij niet op voorraad */
.kort-melding { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--orange-50); border: 1px solid #F3D7B0; color: #7A3E06; font-size: 14px; line-height: 1.5; }
.kort-melding .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.kort-melding .link { color: inherit; }
.buy-box .price.is-promo { color: var(--red); }
.alt-box { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; background: var(--bg-softer); }
.alt-box h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 6px; }
.alt-box h2 .ico { width: 18px; height: 18px; color: var(--green); flex: none; }
.alt-rij { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-2); }
.alt-rij:first-of-type { border-top: 0; }
.alt-foto { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; }
.alt-foto img { width: 100%; height: 100%; object-fit: contain; }
.alt-foto svg { width: 70%; height: 70%; }
.alt-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alt-naam { color: var(--ink); font-weight: 600; font-size: 14.5px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.alt-naam:hover { text-decoration: underline; }
.alt-prijs { font-size: 13px; color: var(--muted); }
.alt-prijs strong { color: var(--ink); }
.alt-info .stock { font-size: 12.5px; }
@media (max-width: 520px) { .alt-rij { grid-template-columns: 48px minmax(0, 1fr); } .alt-rij .btn { grid-column: 2; justify-self: start; } }

/* Bestellen zonder account, kortingscode */
.gast-keuze { max-width: 880px; margin: 32px auto; }
.gast-keuze h1 { margin-bottom: 18px; }
.gast-keuze-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gast-keuze-grid article { display: flex; flex-direction: column; }
.gast-keuze-grid h2 { font-size: 20px; margin: 10px 0 6px; }
.gk-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--yellow-50); color: var(--yellow-ink); display: grid; place-items: center; }
.gk-knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; }
@media (max-width: 720px) { .gast-keuze-grid { grid-template-columns: 1fr; } }
.gast-notice { margin: 4px 0 16px; }
.gast-link { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.co-code { padding: 12px 0; border-top: 1px solid var(--line); }
.co-code summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.co-code-rij { display: flex; gap: 8px; margin-top: 10px; }
.co-code-rij .input { flex: 1; min-width: 0; text-transform: uppercase; color: var(--ink); background: #fff; }
.co-code-fout { margin: 8px 0 0; color: var(--red); font-size: 13.5px; font-weight: 600; }
.co-code-ok { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--green); }
.co-code-ok .ico { flex: none; width: 18px; height: 18px; }
.co-code-ok span { flex: 1; min-width: 0; }
.co-code-ok strong { letter-spacing: .03em; }
.sum-korting span:last-child { color: var(--green); font-weight: 600; }
.best-kaart { max-width: 640px; margin: 32px auto; }
.best-lijnen { list-style: none; padding: 0; margin: 14px auto 0; text-align: left; max-width: 440px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.best-lijnen li { display: flex; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line-2); font-size: 14.5px; }
.best-lijnen li:first-child { border-top: 0; }
.best-lijnen li span { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 32px; }
.best-hulp { margin-top: 18px; font-size: 14px; }
.pill.bad { background: var(--red-50); color: var(--red); }
.kc-switches { display: flex; gap: 22px; flex-wrap: wrap; margin: 6px 0 10px; }
.kc-naam { letter-spacing: .04em; font-family: var(--font-head, inherit); }
.kc-code { text-transform: uppercase; letter-spacing: .04em; }
.kh-trap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kh-trap > div { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
@media (max-width: 720px) { .kh-trap { grid-template-columns: 1fr; } }

/* ---------- Vaak samen gekocht ---------- */
.samen-wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.samen-som { flex: 0 0 260px; }
.samen-rij { display: flex; align-items: stretch; gap: 10px; min-width: 0; flex: 0 1 auto; }
.samen-plus { align-self: center; font-size: 26px; font-weight: 700; color: var(--subtle); flex: 0 0 auto; }
.samen-item { position: relative; flex: 1 1 0; min-width: 0; max-width: 220px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color var(--fast), opacity var(--fast); }
.samen-item:has(input:not(:checked)) { opacity: .55; }
.samen-item.is-dit { border-color: var(--yellow); background: var(--yellow-50); cursor: default; }
.samen-item input { position: absolute; top: 10px; left: 10px; width: 18px; height: 18px; accent-color: var(--ink); z-index: 2; }
.samen-foto { display: block; aspect-ratio: 1; border-radius: 10px; background: #fff; overflow: hidden; }
.samen-foto .p-img { padding: 6%; }
.samen-naam { font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.samen-naam em { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--yellow-ink); }
.samen-naam a:hover { text-decoration: underline; }
.samen-prijs { font-size: 15px; margin-top: auto; }
.samen-som { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.samen-totaal-l { font-size: 15px; color: var(--ink-2); }
.samen-totaal-l strong { font-size: 22px; color: var(--ink); }
.samen-totaal-l small { color: var(--muted); }
.samen-som .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
@media (max-width: 900px) {
  .samen-som { flex: 1 1 100%; }
}
@media (max-width: 600px) {
  .samen-rij { flex-direction: column; gap: 8px; flex: 1 1 100%; }
  .samen-plus { display: none; }
  .samen-item { flex-direction: row; align-items: center; padding: 10px 12px 10px 40px; max-width: none; }
  .samen-item input { top: 50%; transform: translateY(-50%); left: 12px; }
  .samen-foto { width: 56px; flex: 0 0 56px; }
  .samen-naam { flex: 1; }
  .samen-prijs { margin: 0; }
}

/* ---------- Cookies ---------- */
.cookie-balk { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 300; display: flex; justify-content: center; pointer-events: none; }
.cookie-kaart { pointer-events: auto; width: 100%; max-width: 760px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(20, 24, 31, .18); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 32px); overflow-y: auto; }
.cookie-tekst strong { font-size: 16px; display: block; margin-bottom: 4px; }
.cookie-tekst p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.cookie-tekst a { color: var(--blue); text-decoration: underline; }
.cookie-keuzes { display: grid; gap: 8px; }
.cookie-soort { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.cookie-soort input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); flex: 0 0 auto; }
.cookie-soort strong { display: block; font-size: 14px; }
.cookie-soort small { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; }
.cookie-knoppen { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 600px) {
  .cookie-balk { left: 8px; right: 8px; bottom: 8px; }
  .cookie-kaart { padding: 16px; }
  .cookie-knoppen .btn { flex: 1 1 100%; justify-content: center; }
}
body[data-page="product"] .cookie-balk { bottom: 90px; }
@media (min-width: 901px) { body[data-page="product"] .cookie-balk { bottom: 16px; } }

/* ---------- Veelgestelde vragen ---------- */
.faq-pagina { max-width: 820px; }
.faq-zoek { position: relative; display: block; margin-bottom: 16px; }
.faq-zoek .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }
.faq-zoek .input { padding-left: 42px; height: 50px; font-size: 16px; }
.faq-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.faq-groep { margin-bottom: 30px; scroll-margin-top: 90px; }
.faq-groep h2 { font-size: 21px; margin: 0 0 12px; }
.faq-contact { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.faq-contact strong { display: block; font-size: 17px; }
.faq-contact span { color: var(--muted); font-size: 14px; }

/* ---------- Beheer: overzicht ---------- */
.dash-drie { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dash-lijst { list-style: none; margin: 10px 0 8px; padding: 0; counter-reset: dl; }
.dash-lijst li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-2); counter-increment: dl; }
.dash-lijst li:first-child { border-top: 0; }
.dash-lijst li > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.dash-lijst li > span:first-child::before { content: counter(dl) '.'; font-size: 11px; color: var(--subtle); }
.dash-lijst strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-lijst em { font-style: normal; font-size: 12px; color: var(--muted); }
.dash-lijst b { white-space: nowrap; text-align: right; font-size: 14px; }
.dash-lijst b small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.pill.err { background: var(--red-50); color: var(--red); }
.faq-adm-kop { font-size: 15px; margin: 18px 0 6px; }

/* Varianten (kleur / maat / afmeting) */
.pc-var { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink, #1f2328); background: var(--bg-soft); border-radius: 999px; padding: 3px 9px; width: fit-content; margin-top: 2px; }
.pc-var .ico { width: 14px; height: 14px; }
.pc-var:hover { background: #FFF4CC; }
.varianten { display: grid; gap: 14px; }
.var-kop { display: block; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.var-kop strong { color: var(--ink, #1f2328); }
.var-opties { display: flex; flex-wrap: wrap; gap: 8px; }
.var-optie { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; min-width: 44px; justify-content: center; padding: 0 13px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font-size: 14px; font-weight: 600; transition: border-color var(--fast), background var(--fast); }
.var-optie:hover { border-color: #9CA3AF; }
.var-optie.is-actief { border-color: var(--ink, #1f2328); box-shadow: inset 0 0 0 1px var(--ink, #1f2328); }
.var-optie.is-ander { color: var(--muted); border-style: dashed; }
.var-bol { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.var-bol.is-licht { box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
/* Beheer: bijbestel-herinnering */
.her-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; margin-top: 20px; }
.her-item { font-size: 13.5px; padding: 2px 0; }
.her-voor { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.her-voor .input { width: auto; height: 38px; padding: 0 10px; }
.her-knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 6px; }
@media (max-width: 1100px) { .her-grid { grid-template-columns: 1fr; } }
/* Beheer: statistieken en marketingadvies */
.stat-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.stat-kop p { margin: 0; max-width: 720px; }
.stat-bars { gap: 3px; }
.stat-bars .bar em { display: none; }
.trechter { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 10px; }
.trechter li { display: grid; grid-template-columns: 170px 1fr 60px; align-items: center; gap: 10px; font-size: 14px; }
.trechter b { text-align: right; }
.trechter-balk { height: 12px; background: var(--bg-soft); border-radius: 6px; overflow: hidden; }
.trechter-balk i { display: block; height: 100%; background: var(--yellow); border-radius: 6px; }
.utm { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.utm h4 { margin: 0 0 8px; }
.utm-uit { display: flex; gap: 8px; }
.utm-uit .input { flex: 1; min-width: 0; font-size: 13px; }
.advies { margin-bottom: 14px; }
.advies-kop { display: flex; align-items: center; gap: 10px; }
.advies-kop h3 { margin: 0; font-size: 17px; }
.advies p { margin: 8px 0; }
.advies-items { margin: 6px 0 4px; padding-left: 18px; font-size: 14px; columns: 2; column-gap: 28px; }
.advies-items li { break-inside: avoid; padding: 2px 0; }
@media (max-width: 700px) { .advies-items { columns: 1; } .trechter li { grid-template-columns: 120px 1fr 44px; } }
#adv h4 { margin: 22px 0 8px; }
#adv .grid-2 { gap: 6px 16px; margin-top: 10px; }
#adv > p.muted { margin: 6px 0 4px; }
#adv .switch { white-space: normal; }
#adv .switch .lab { white-space: normal; }
/* Winkelwagen: aanvullen tot gratis levering */
.aanvul { margin: -4px 0 16px; padding: 12px; border: 1px dashed #F2C94C; background: #FFFBEA; border-radius: 12px; }
.aanvul p { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink, #1f2328); }
.aanvul ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aanvul li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 32px; align-items: center; gap: 10px; }
.aanvul-foto { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: #fff; }
.aanvul-foto img { width: 100%; height: 100%; object-fit: contain; }
.aanvul-naam { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aanvul-naam:hover { text-decoration: underline; }
.aanvul-prijs { font-size: 13px; font-weight: 700; white-space: nowrap; }
.aanvul-voeg { width: 32px; height: 32px; border-radius: 9px; background: var(--yellow); display: grid; place-items: center; }
.aanvul-voeg:hover { background: var(--yellow-hover); }
.aanvul-voeg .ico { width: 16px; height: 16px; }
.aanvul-prijs { text-align: right; }
.aanvul-prijs small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
.aanvul-naam { hyphens: auto; overflow-wrap: anywhere; }
/* Beheer: menu met groepen en zoeken */
.nav-zoek { position: relative; display: flex; align-items: center; margin: 0 0 14px; }
.nav-zoek svg { position: absolute; left: 11px; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.nav-zoek input { width: 100%; height: 38px; padding: 0 30px 0 34px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg-soft); font: inherit; font-size: 14px; }
.nav-zoek input:focus { outline: none; background: #fff; border-color: var(--yellow-hover); }
.nav-zoek kbd { position: absolute; right: 9px; font: 600 11px/1 inherit; font-family: inherit; color: var(--subtle); border: 1px solid var(--line); border-radius: 5px; padding: 2px 5px; background: #fff; }
.nav-zoek input:focus + kbd, .nav-zoek input:not(:placeholder-shown) + kbd { display: none; }
.nav-geen { margin: 4px 12px; font-size: 13px; color: var(--muted); }
.admin-nav .nav-group { margin-bottom: 6px; }
.admin-nav .nav-kop { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; margin: 0; background: none; border: 0; cursor: pointer;
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--subtle); border-radius: 8px; }
.admin-nav .nav-kop:hover { color: var(--ink); background: var(--bg-soft); }
.admin-nav .nav-kop::before { display: none !important; }
.admin-nav .nav-kop svg { width: 14px; height: 14px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform var(--fast); opacity: 1; }
.admin-nav .nav-group.is-dicht .nav-kop svg { transform: rotate(-90deg); }
.admin-nav .nav-group.is-dicht .nav-items { display: none; }
.admin-nav .nav-items { padding-bottom: 8px; }
.admin-nav .nav-som { background: #E11D48; color: #fff; border-radius: 999px; font-size: 10.5px; letter-spacing: 0; padding: 1px 7px; }
.admin-nav .nav-group:not(.is-dicht) .nav-som { display: none; }
.admin-nav.is-zoekend .nav-group.is-dicht .nav-items { display: block; }
.admin-nav.is-zoekend .nav-kop svg { display: none; }
/* Beheer: overzicht */
.dash-todo { margin-bottom: 16px; border-left: 5px solid var(--yellow); }
.dash-todo.is-leeg { border-left-color: var(--green, #16803C); }
.dash-todo h3 { margin: 0 0 4px; font-size: 18px; }
.dash-todo .todo { margin-top: 6px; gap: 0; }
.dash-todo .todo li { padding: 9px 0; }
.dash-todo .todo li.is-hot span { font-weight: 700; }
.kpi-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-k { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; font: inherit; cursor: pointer; }
.kpi-k[data-go]:hover { border-color: #C9CED6; }
.kpi-k:not([data-go]) { cursor: default; }
.kpi-k span { font-size: 13px; color: var(--muted); font-weight: 600; }
.kpi-k strong { font-family: var(--font-head); font-size: 24px; line-height: 1.2; }
.kpi-k em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.dash-twee { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .dash-twee { grid-template-columns: 1fr; } }
.dash-table .wie { line-height: 1.35; }
.dash-table .wie .muted { font-size: 12.5px; }
.inzicht-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: -4px 0 10px; }
.inzicht-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 10px; font: inherit; font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.inzicht-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--yellow); }
.inzicht-tabs .tab-n { background: var(--bg-soft); color: var(--ink-2); border-radius: 999px; font-size: 11px; padding: 1px 7px; }
.admin-nav.is-zoekend .nav-som { display: none; }
.dash-todo [data-meer-todo] { margin-top: 6px; }
.dash-twee > section { min-width: 0; }
.inzicht-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.inzicht-tabs button { white-space: nowrap; flex: none; }
@media (max-width: 600px) {
  .kpi-rij { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-k { padding: 12px; }
  .kpi-k strong { font-size: 20px; }
  .dash-table td:nth-child(3) { display: none; }
  .dash-todo .todo li { flex-wrap: wrap; }
}

/* ---- Magazijn: ontvangst, tellen, vandaag ---- */
.mag-h2 { font-size: 17px; margin: 18px 0 10px; }
.mag-tabel { display: grid; gap: 6px; }
.mag-tabel-rij { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #E3E6EB; border-radius: 12px; padding: 10px 14px; }
.mag-tabel-rij > strong { font-size: 20px; min-width: 52px; text-align: right; font-family: ui-monospace, Menlo, monospace; }
.mag-tabel-rij > strong.rood { color: #B91C1C; }
.mag-tabel-rij > span { flex: 1; min-width: 0; font-size: 15px; }
.mag-tabel-rij > span em { display: block; font-style: normal; font-size: 12.5px; color: #5A6372; }
.mag-tabel-rij .mag-knop { padding: 10px 14px; font-size: 14px; }
.mag-telrij.is-klaar { opacity: .6; } .mag-telrij.is-licht { outline: 3px solid var(--yellow, #FFC629); }
.mag-tel-ok { font-size: 22px; color: #1E7A4B; font-weight: 800; padding: 0 10px; }
.mag-loc.is-oud .mag-loc-let em:first-child { color: #B91C1C; }
.mag-ontv-vorm { margin-top: 14px; display: grid; gap: 12px; }
.mag-ontv-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.mag-veld { display: grid; gap: 4px; font-size: 13px; color: #5A6372; }
.mag-veld .mag-input { width: 100%; }
.mag-teller.klein { justify-content: flex-start; margin: 0; }
.mag-input.getal { width: 110px; text-align: center; font-size: 24px; font-weight: 800; padding: 10px; }
.mag-dagkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mag-dagkop strong { font-size: 18px; }
.mag-dagkop .mag-knop { padding: 10px 16px; }
.mag-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mag-kaart { background: #fff; border: 1px solid #E3E6EB; border-radius: 16px; padding: 4px 16px 16px; margin-top: 14px; }
.mag-kaart .mag-tabel-rij { border: 0; background: #F6F7F9; }
.mag-staven { display: flex; gap: 8px; align-items: flex-end; height: 140px; padding-top: 6px; }
.mag-staaf { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.mag-staaf i { display: block; width: 100%; max-width: 46px; background: var(--yellow, #FFC629); border-radius: 6px 6px 2px 2px; }
.mag-staaf b { font-size: 13px; } .mag-staaf span { font-size: 11px; color: #5A6372; }
@media (max-width: 720px) { .mag-twee { grid-template-columns: 1fr; } .mag-tabel-rij { flex-wrap: wrap; } .mag-tabel-rij > strong { min-width: 40px; } }

/* Account → Collega's uitnodigen */
.ref-kop { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.ref-kop > svg { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--yellow-50, #FFF9E6); color: var(--yellow-ink, #8A6200); }
.ref-kop h2 { margin: 0 0 4px; } .ref-kop p { margin: 0; color: var(--ink-2, #3A3F48); line-height: 1.5; }
.ref-label { display: block; font-size: 13px; font-weight: 600; margin: 6px 0 6px; }
.ref-link { display: flex; gap: 8px; } .ref-link .input { flex: 1; min-width: 0; font-size: 14px; }
.ref-code { font-family: ui-monospace, Menlo, monospace; letter-spacing: .04em; }
.ref-delen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ref-delen .btn svg { width: 16px; height: 16px; }
.ref-beloningen { list-style: none; padding: 0; margin: 12px 0; }
.ref-beloningen li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line, #E5E7EB); }
.ref-beloningen em { display: block; font-style: normal; font-size: 13px; color: var(--muted, #6B7280); }
@media (max-width: 560px) { .ref-link { flex-direction: column; } }

.order-ref { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--bg-soft, #F6F7F9); font-size: 12.5px; color: var(--ink-2, #3A3F48); }
.qr-qty { width: 72px; display: inline-block; margin-left: 6px; padding: 6px 8px; }

/* ==========================================================================
   Beheer, opfrissing (okt 2026): rustiger, meer lucht, één duidelijke actie
   Alles hangt aan body[data-page="admin"], de winkel blijft ongemoeid.
   ========================================================================== */
body[data-page="admin"] { --a-bg: #F4F5F7; --a-kaart: #FFFFFF; --a-rand: #E8EAEE; --a-rand-2: #F0F1F4; --a-schaduw: 0 1px 2px rgba(17, 24, 39, .04), 0 4px 16px rgba(17, 24, 39, .04); }
body[data-page="admin"] .admin-shell { background: var(--a-bg); }
body[data-page="admin"] .admin-main { padding: 28px 36px 96px; max-width: 1320px; }
body[data-page="admin"] .admin-title { font-size: 26px; letter-spacing: -.02em; margin: 2px 0 22px; }

/* kaarten */
body[data-page="admin"] .admin-main .card { border: 1px solid var(--a-rand); border-radius: 16px; box-shadow: var(--a-schaduw); }
body[data-page="admin"] .admin-main .card-pad { padding: 22px 24px; }
body[data-page="admin"] .admin-main .card h2 { font-size: 18px; letter-spacing: -.01em; }
body[data-page="admin"] .admin-main .card h3 { letter-spacing: -.01em; }
body[data-page="admin"] .admin-card { margin-bottom: 12px; transition: border-color 120ms ease, box-shadow 120ms ease; }
body[data-page="admin"] .admin-card:hover { border-color: #DCDFE5; box-shadow: 0 2px 4px rgba(17, 24, 39, .05), 0 8px 24px rgba(17, 24, 39, .06); }

/* cijfers */
body[data-page="admin"] .kpi-k { border-color: var(--a-rand); border-radius: 16px; box-shadow: var(--a-schaduw); padding: 16px 18px; gap: 4px; }
body[data-page="admin"] .kpi-k span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: #7A808A; }
body[data-page="admin"] .kpi-k strong { font-size: 26px; letter-spacing: -.02em; }
body[data-page="admin"] .kpi-k[data-go]:hover { border-color: var(--yellow, #FFC629); transform: translateY(-1px); }
body[data-page="admin"] .kpi-k { transition: transform 120ms ease, border-color 120ms ease; }

/* tabellen */
body[data-page="admin"] .rd-tabel th { font-size: 11px; letter-spacing: .06em; color: #7A808A; border-bottom: 1px solid var(--a-rand); padding: 10px 8px; background: #FAFBFC; }
body[data-page="admin"] .rd-tabel th:first-child { border-top-left-radius: 8px; } body[data-page="admin"] .rd-tabel th:last-child { border-top-right-radius: 8px; }
body[data-page="admin"] .rd-tabel td { padding: 11px 8px; border-bottom: 1px solid var(--a-rand-2); }
body[data-page="admin"] .rd-tabel tbody tr { transition: background 100ms ease; }
body[data-page="admin"] .rd-tabel tbody tr:hover { background: #FAFAF7; }
body[data-page="admin"] .rd-tabel tbody tr:last-child td { border-bottom: 0; }

/* filters bovenaan (Nog te doen, Alles…) */
body[data-page="admin"] .admin-main .chip { border-color: var(--a-rand); background: #fff; }
body[data-page="admin"] .admin-main .chip:hover { border-color: #C9CED6; }

/* bestellingen: één duidelijke volgende stap, de rest in een menu */
body[data-page="admin"] .admin-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 14px; margin-top: 12px; border-top: 1px solid var(--a-rand-2); }
body[data-page="admin"] .admin-status .chip-print { background: #fff; color: var(--ink); border: 1px solid var(--a-rand); }
body[data-page="admin"] .admin-status .chip-print:hover { border-color: #C9CED6; }
body[data-page="admin"] .st-volgende { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
body[data-page="admin"] .ico-s { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="admin"] .st-ander select { height: 36px; padding: 0 30px 0 12px; font-size: 13.5px; border-radius: 10px; width: auto; }
body[data-page="admin"] .st-volgende + .st-ander { margin-left: 0; }
body[data-page="admin"] .admin-status > .st-ander:first-child, body[data-page="admin"] .admin-status .chip-print + .chip-print + .st-ander { margin-left: auto; }

/* aan/uit-kaart bovenaan schermen als Herinnering, QR, Uitnodigen */
body[data-page="admin"] .abo-aan { border-left: 4px solid #D5DAE2; }
body[data-page="admin"] .abo-aan.is-aan { border-left-color: #16A34A; }

/* menu: rustiger, met speldje om vast te pinnen */
body[data-page="admin"] .admin-nav { background: #fff; border-right: 1px solid var(--a-rand); padding: 18px 10px 40px; }
body[data-page="admin"] .admin-nav .nav-rij { position: relative; }
body[data-page="admin"] .admin-nav .nav-rij[hidden] { display: none; }
body[data-page="admin"] .admin-nav .nav-rij > button[data-tab] { padding-right: 34px; }
body[data-page="admin"] .admin-nav .nav-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-page="admin"] .admin-nav .nav-rij .tab-n { margin-left: auto; }
body[data-page="admin"] .admin-nav .nav-pin { position: absolute; right: 4px; top: 50%; translate: 0 -50%; width: 26px; height: 26px; padding: 0; justify-content: center;
  border-radius: 7px; opacity: 0; color: #9AA0A9; background: transparent; }
body[data-page="admin"] .admin-nav .nav-pin::before { display: none !important; }
body[data-page="admin"] .admin-nav .nav-pin svg { width: 15px; height: 15px; opacity: 1; }
body[data-page="admin"] .admin-nav .nav-rij:hover .nav-pin, body[data-page="admin"] .admin-nav .nav-pin:focus-visible { opacity: 1; }
body[data-page="admin"] .admin-nav .nav-pin:hover { background: var(--a-rand-2); color: var(--ink); }
body[data-page="admin"] .admin-nav .nav-pin.is-pin { color: var(--yellow-ink, #8A6200); }
body[data-page="admin"] .admin-nav .nav-rij:has(.tab-n:not([hidden])) .nav-pin { display: none; }
body[data-page="admin"] .admin-nav .nav-pins { padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--a-rand-2); }
body[data-page="admin"] .admin-nav .nav-pins .nav-pin { opacity: .55; }
body[data-page="admin"] .admin-nav .nav-kop.is-vast { cursor: default; }
body[data-page="admin"] .admin-nav .nav-kop.is-vast:hover { background: none; }
body[data-page="admin"] .admin-nav .nav-kop { font-size: 11px; letter-spacing: .09em; }
@media (hover: none) { body[data-page="admin"] .admin-nav .nav-pin { opacity: .45; } }
@media (max-width: 900px) { body[data-page="admin"] .admin-main { padding: 20px 16px 80px; } body[data-page="admin"] .st-volgende { margin-left: 0; } }
body[data-page="admin"] .admin-nav .nav-rij:has(.tab-n:not([hidden])) > button[data-tab] { padding-right: 12px; }

/* ==========================================================================
   Beheer — donkere stijl (standaard donker, Dubanet-geel als accent; knop in de bovenbalk wisselt naar licht)
   Alles hangt aan body[data-page="admin"]:not([data-thema="licht"]): de winkel blijft licht.
   De gewone kleurvariabelen krijgen hier donkere waarden, zodat ook
   oudere schermen meteen mee donker worden.
   ========================================================================== */
body[data-page="admin"]:not([data-thema="licht"]) {
  color-scheme: dark;
  --d-bg: #0E0E12; --d-zij: #121216; --d-kaart: #17171D; --d-kaart-2: #1E1E25; --d-veld: #121217;
  --d-rand: rgba(255, 255, 255, .07); --d-rand-2: rgba(255, 255, 255, .045); --d-rand-hover: rgba(255, 255, 255, .14);
  --d-tekst: #F1F2F5; --d-tekst-2: #C9CBD3; --d-zacht: #8E909C; --d-zachter: #62646F;
  --d-geel-gloed: rgba(255, 198, 41, .14);
  --ink: var(--d-tekst); --ink-2: var(--d-tekst-2); --muted: var(--d-zacht); --subtle: var(--d-zachter);
  --line: var(--d-rand); --line-2: var(--d-rand-2);
  --bg: var(--d-kaart); --bg-soft: var(--d-kaart-2); --bg-softer: #1A1A20;
  --yellow-50: rgba(255, 198, 41, .10); --yellow-100: rgba(255, 198, 41, .18); --yellow-ink: #FFD45E;
  --green: #4ADE80; --green-50: rgba(74, 222, 128, .12);
  --orange: #FBBF5A; --orange-50: rgba(251, 191, 90, .12);
  --red: #F87171; --red-50: rgba(248, 113, 113, .12);
  --blue: #7AA7FF; --blue-50: rgba(122, 167, 255, .13);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 8px 24px rgba(0, 0, 0, .35); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5);
  --a-bg: var(--d-bg); --a-kaart: var(--d-kaart); --a-rand: var(--d-rand); --a-rand-2: var(--d-rand-2);
  --a-schaduw: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(0, 0, 0, .25);
  background: var(--d-bg); color: var(--d-tekst);
}
body[data-page="admin"]:not([data-thema="licht"]) ::selection { background: rgba(255, 198, 41, .35); color: #fff; }
body[data-page="admin"]:not([data-thema="licht"]) { scrollbar-color: #2A3140 transparent; }
body[data-page="admin"]:not([data-thema="licht"]) *::-webkit-scrollbar { width: 10px; height: 10px; }
body[data-page="admin"]:not([data-thema="licht"]) *::-webkit-scrollbar-thumb { background: #262C39; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
body[data-page="admin"]:not([data-thema="licht"]) *::-webkit-scrollbar-track { background: transparent; }

/* bovenbalk */
body[data-page="admin"]:not([data-thema="licht"]) .admin-bar { background: rgba(14, 14, 18, .8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--d-rand-2); color: var(--d-tekst); }
body[data-page="admin"]:not([data-thema="licht"]) .admin-bar .admin-tag { background: var(--d-geel-gloed); color: var(--yellow-ink); }
body[data-page="admin"]:not([data-thema="licht"]) .admin-view { border-color: var(--d-rand); background: var(--d-kaart); color: var(--d-tekst-2) !important; }
body[data-page="admin"]:not([data-thema="licht"]) .admin-view:hover { border-color: var(--d-rand-hover); background: var(--d-kaart-2); color: #fff !important; }
body[data-page="admin"]:not([data-thema="licht"]) .admin-avatar { background: linear-gradient(135deg, #FFC629, #F59E0B); color: #1A1D24; box-shadow: 0 0 0 2px var(--d-bg), 0 0 0 3px rgba(255, 198, 41, .45); }
body[data-page="admin"]:not([data-thema="licht"]) .admin-burger span, body[data-page="admin"]:not([data-thema="licht"]) .admin-burger::before, body[data-page="admin"]:not([data-thema="licht"]) .admin-burger::after { background: var(--d-tekst); }

/* achtergrond met een zachte gele gloed, zoals de voorbeeldschermen */
body[data-page="admin"]:not([data-thema="licht"]) .admin-shell {
  background:
    radial-gradient(900px 600px at 50% 120%, rgba(123, 228, 149, .04), transparent 60%),
    var(--d-bg);
}

/* zijmenu */
body[data-page="admin"]:not([data-thema="licht"]) .admin-nav { background: var(--d-zij); border-right: 1px solid var(--d-rand-2); }
body[data-page="admin"]:not([data-thema="licht"]) .admin-nav button, body[data-page="admin"]:not([data-thema="licht"]) .admin-nav a { color: #A9B1C1; }
body[data-page="admin"]:not([data-thema="licht"]) .admin-nav button:hover, body[data-page="admin"]:not([data-thema="licht"]) .admin-nav a:hover { background: rgba(255, 255, 255, .045); color: #fff; }
body[data-page="admin"]:not([data-thema="licht"]) .admin-nav button.is-on {
  background: linear-gradient(90deg, #FFC629, #FFB800); color: #1A1D24; font-weight: 700;
  box-shadow: 0 6px 20px rgba(255, 198, 41, .22);
}
body[data-page="admin"]:not([data-thema="licht"]) .admin-nav button.is-on svg { color: #1A1D24; opacity: 1; }
body[data-page="admin"]:not([data-thema="licht"]) .admin-nav button.is-on::before { display: none; }
body[data-page="admin"]:not([data-thema="licht"]) .admin-nav button.is-on .tab-n { background: #1A1D24; color: #FFC629; }
body[data-page="admin"]:not([data-thema="licht"]) .admin-nav .nav-kop, body[data-page="admin"]:not([data-thema="licht"]) .nav-group h6 { color: #5F687B; }
body[data-page="admin"]:not([data-thema="licht"]) .admin-nav .nav-kop:hover { color: var(--d-tekst-2); }
body[data-page="admin"]:not([data-thema="licht"]) .admin-nav .nav-pin:hover { background: rgba(255, 255, 255, .07); color: #fff; }
body[data-page="admin"]:not([data-thema="licht"]) .admin-nav .nav-pin.is-pin { color: #FFC629; }
body[data-page="admin"]:not([data-thema="licht"]) .admin-nav button.is-on + .nav-pin { color: #1A1D24; }
body[data-page="admin"]:not([data-thema="licht"]) .admin-nav .nav-pin { background: none; }
body[data-page="admin"]:not([data-thema="licht"]) .nav-links { border-top-color: var(--d-rand-2); }
body[data-page="admin"]:not([data-thema="licht"]) .tab-n { background: #EF4444; color: #fff; box-shadow: 0 0 0 2px var(--d-zij); }

/* titels */
body[data-page="admin"]:not([data-thema="licht"]) .admin-title { color: #fff; }
body[data-page="admin"]:not([data-thema="licht"]) h1, body[data-page="admin"]:not([data-thema="licht"]) h2, body[data-page="admin"]:not([data-thema="licht"]) h3, body[data-page="admin"]:not([data-thema="licht"]) h4 { color: #F3F5F9; }

/* kaarten */
body[data-page="admin"]:not([data-thema="licht"]) .card, body[data-page="admin"]:not([data-thema="licht"]) .admin-card, body[data-page="admin"]:not([data-thema="licht"]) .assort-list,
body[data-page="admin"]:not([data-thema="licht"]) .admin-main .card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 60%), var(--d-kaart);
  border: 1px solid var(--d-rand); box-shadow: var(--a-schaduw); color: var(--d-tekst);
}
body[data-page="admin"]:not([data-thema="licht"]) .admin-card:hover { border-color: var(--d-rand-hover); box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }

/* cijfers */
body[data-page="admin"]:not([data-thema="licht"]) .kpi-k { background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)), var(--d-kaart); border: 1px solid var(--d-rand); color: var(--d-tekst); }
body[data-page="admin"]:not([data-thema="licht"]) .kpi-k span { color: var(--d-zacht); }
body[data-page="admin"]:not([data-thema="licht"]) .kpi-k strong { color: #fff; }
body[data-page="admin"]:not([data-thema="licht"]) .kpi-k em { color: var(--d-zacht); }
body[data-page="admin"]:not([data-thema="licht"]) .kpi-k[data-go]:hover { border-color: rgba(255, 198, 41, .55); box-shadow: 0 0 0 1px rgba(255, 198, 41, .15), 0 14px 34px rgba(0, 0, 0, .35); }
body[data-page="admin"]:not([data-thema="licht"]) .op { color: #4ADE80 !important; }
body[data-page="admin"]:not([data-thema="licht"]) .af { color: #F87171 !important; }

/* knoppen */
body[data-page="admin"]:not([data-thema="licht"]) .btn-primary { background: #FFC629; color: #17191F; box-shadow: 0 6px 18px rgba(255, 198, 41, .18); }
body[data-page="admin"]:not([data-thema="licht"]) .btn-primary:hover { background: #FFD24D; box-shadow: 0 8px 24px rgba(255, 198, 41, .3); }
body[data-page="admin"]:not([data-thema="licht"]) .btn-secondary { background: rgba(255, 255, 255, .04); border-color: var(--d-rand); color: var(--d-tekst); }
body[data-page="admin"]:not([data-thema="licht"]) .btn-secondary:hover { background: rgba(255, 255, 255, .08); border-color: var(--d-rand-hover); }
body[data-page="admin"]:not([data-thema="licht"]) .btn-ghost:hover { background: rgba(255, 255, 255, .06); }
body[data-page="admin"]:not([data-thema="licht"]) .link { color: var(--yellow-ink); text-decoration-color: rgba(255, 198, 41, .5); }

/* alles wat in het licht een donkere 'ink'-achtergrond had: nu geel */
body[data-page="admin"]:not([data-thema="licht"]) .chip[aria-pressed="true"], body[data-page="admin"]:not([data-thema="licht"]) .chip.is-active,
body[data-page="admin"]:not([data-thema="licht"]) .admin-filters .chip.is-on, body[data-page="admin"]:not([data-thema="licht"]) .admin-status .chip:hover,
body[data-page="admin"]:not([data-thema="licht"]) .page-tabs .chip.is-on, body[data-page="admin"]:not([data-thema="licht"]) .nw-filters .chip.is-on,
body[data-page="admin"]:not([data-thema="licht"]) .dagknop input:checked + span, body[data-page="admin"]:not([data-thema="licht"]) .assort-row.is-on .box,
body[data-page="admin"]:not([data-thema="licht"]) .step.is-done .step-dot, body[data-page="admin"]:not([data-thema="licht"]) .mini-thumb b, body[data-page="admin"]:not([data-thema="licht"]) .promo-tag {
  background: #FFC629; border-color: #FFC629; color: #17191F;
}
body[data-page="admin"]:not([data-thema="licht"]) .admin-status .chip-print { background: rgba(255, 255, 255, .04); color: var(--d-tekst); border-color: var(--d-rand); }
body[data-page="admin"]:not([data-thema="licht"]) .admin-status .chip-print:hover { background: rgba(255, 255, 255, .08); border-color: var(--d-rand-hover); }
body[data-page="admin"]:not([data-thema="licht"]) .chip, body[data-page="admin"]:not([data-thema="licht"]) .admin-main .chip { background: rgba(255, 255, 255, .035); border-color: var(--d-rand); color: var(--d-tekst-2); }
body[data-page="admin"]:not([data-thema="licht"]) .admin-main .chip:hover { border-color: var(--d-rand-hover); color: #fff; }
body[data-page="admin"]:not([data-thema="licht"]) .admin-tag { background: var(--d-geel-gloed); color: var(--yellow-ink); }
body[data-page="admin"]:not([data-thema="licht"]) .abo-winst, body[data-page="admin"]:not([data-thema="licht"]) .nw-pin { background: #FFC629; color: #17191F; }

/* velden */
body[data-page="admin"]:not([data-thema="licht"]) .input, body[data-page="admin"]:not([data-thema="licht"]) .select, body[data-page="admin"]:not([data-thema="licht"]) input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),
body[data-page="admin"]:not([data-thema="licht"]) select, body[data-page="admin"]:not([data-thema="licht"]) textarea {
  background-color: var(--d-veld); border-color: var(--d-rand); color: var(--d-tekst);
}
body[data-page="admin"]:not([data-thema="licht"]) .input:hover, body[data-page="admin"]:not([data-thema="licht"]) .select:hover, body[data-page="admin"]:not([data-thema="licht"]) select:hover, body[data-page="admin"]:not([data-thema="licht"]) textarea:hover { border-color: var(--d-rand-hover); }
body[data-page="admin"]:not([data-thema="licht"]) .input:focus, body[data-page="admin"]:not([data-thema="licht"]) .select:focus, body[data-page="admin"]:not([data-thema="licht"]) select:focus, body[data-page="admin"]:not([data-thema="licht"]) textarea:focus,
body[data-page="admin"]:not([data-thema="licht"]) input:focus-visible { border-color: #FFC629; box-shadow: 0 0 0 4px rgba(255, 198, 41, .16); outline: none; }
body[data-page="admin"]:not([data-thema="licht"]) ::placeholder { color: #5F687B; }
body[data-page="admin"]:not([data-thema="licht"]) select option { background: #17171D; color: var(--d-tekst); }
body[data-page="admin"]:not([data-thema="licht"]) .field > label, body[data-page="admin"]:not([data-thema="licht"]) .label { color: var(--d-tekst-2); }
body[data-page="admin"]:not([data-thema="licht"]) input[type="checkbox"], body[data-page="admin"]:not([data-thema="licht"]) input[type="radio"], body[data-page="admin"]:not([data-thema="licht"]) input[type="range"] { accent-color: #FFC629; }

/* schakelaar */
body[data-page="admin"]:not([data-thema="licht"]) .switch .track { background: #2A3140; }
body[data-page="admin"]:not([data-thema="licht"]) .switch input:checked + .track { background: #22C55E; }
body[data-page="admin"]:not([data-thema="licht"]) .switch input:checked { background: #FFC629; }
body[data-page="admin"]:not([data-thema="licht"]) .switch input:focus-visible + .track { outline-color: #FFC629; }
body[data-page="admin"]:not([data-thema="licht"]) .abo-aan { border-left-color: #2A3140; }
body[data-page="admin"]:not([data-thema="licht"]) .abo-aan.is-aan { border-left-color: #22C55E; }

/* tabellen */
body[data-page="admin"]:not([data-thema="licht"]) .rd-tabel th, body[data-page="admin"]:not([data-thema="licht"]) table th { background: rgba(255, 255, 255, .025); color: var(--d-zacht); border-bottom-color: var(--d-rand); }
body[data-page="admin"]:not([data-thema="licht"]) .rd-tabel td, body[data-page="admin"]:not([data-thema="licht"]) table td { border-bottom-color: var(--d-rand-2); }
body[data-page="admin"]:not([data-thema="licht"]) .rd-tabel tbody tr:hover, body[data-page="admin"]:not([data-thema="licht"]) .dash-table tbody tr:hover { background: rgba(255, 255, 255, .03); }

/* meldingen en labels */
body[data-page="admin"]:not([data-thema="licht"]) .notice { background: rgba(122, 167, 255, .10); color: #B9CEFF; border: 1px solid rgba(122, 167, 255, .18); }
body[data-page="admin"]:not([data-thema="licht"]) .notice-yellow { background: rgba(255, 198, 41, .08); color: #FFD45E; border-color: rgba(255, 198, 41, .22); }
body[data-page="admin"]:not([data-thema="licht"]) .notice-green { background: rgba(74, 222, 128, .09); color: #86EFAC; border-color: rgba(74, 222, 128, .2); }
body[data-page="admin"]:not([data-thema="licht"]) .notice-err { background: rgba(248, 113, 113, .09); color: #FCA5A5; border-color: rgba(248, 113, 113, .25); }
body[data-page="admin"]:not([data-thema="licht"]) .pill { border: 1px solid transparent; }
body[data-page="admin"]:not([data-thema="licht"]) .pill.s-nieuw, body[data-page="admin"]:not([data-thema="licht"]) .pill.s-in_verwerking, body[data-page="admin"]:not([data-thema="licht"]) .pill.s-klaar_voor_verzending { border-color: rgba(122, 167, 255, .2); }
body[data-page="admin"]:not([data-thema="licht"]) .pill.s-goedgekeurd, body[data-page="admin"]:not([data-thema="licht"]) .pill.s-verzonden, body[data-page="admin"]:not([data-thema="licht"]) .pill.s-geleverd { border-color: rgba(74, 222, 128, .2); }
body[data-page="admin"]:not([data-thema="licht"]) .pill.warn, body[data-page="admin"]:not([data-thema="licht"]) .pill.s-aangevraagd, body[data-page="admin"]:not([data-thema="licht"]) .pill.s-wacht_op_voorraad, body[data-page="admin"]:not([data-thema="licht"]) .pill.s-on_hold { border-color: rgba(251, 191, 90, .2); }
body[data-page="admin"]:not([data-thema="licht"]) .pill.s-geweigerd, body[data-page="admin"]:not([data-thema="licht"]) .pill.s-geblokkeerd, body[data-page="admin"]:not([data-thema="licht"]) .pill.s-geannuleerd, body[data-page="admin"]:not([data-thema="licht"]) .pill.err { border-color: rgba(248, 113, 113, .22); }

/* melding onderaan */
body[data-page="admin"]:not([data-thema="licht"]) #toast.toast { background: #24242C; color: #fff; border: 1px solid var(--d-rand-hover); box-shadow: 0 18px 48px rgba(0, 0, 0, .55); }
body[data-page="admin"]:not([data-thema="licht"]) #toast.is-bad { background: #7F1D1D; border-color: rgba(248, 113, 113, .4); }

/* opslagbalk en panelen */
body[data-page="admin"]:not([data-thema="licht"]) .savebar { background: linear-gradient(to top, var(--d-bg) 70%, transparent); }
body[data-page="admin"]:not([data-thema="licht"]) details > summary { color: var(--d-tekst-2); }
body[data-page="admin"]:not([data-thema="licht"]) hr { border-color: var(--d-rand); }
body[data-page="admin"]:not([data-thema="licht"]) code, body[data-page="admin"]:not([data-thema="licht"]) kbd { background: rgba(255, 255, 255, .06); color: var(--d-tekst); border-color: var(--d-rand); }

/* inloggen */
body[data-page="admin"]:not([data-thema="licht"]) .admin-login {
  background: radial-gradient(800px 500px at 50% -10%, rgba(255, 198, 41, .09), transparent 60%), var(--d-bg);
}

/* Voorbeelden van de winkel (Uiterlijk, blokken) blijven licht: zo zie je wat de klant ziet. */
body[data-page="admin"]:not([data-thema="licht"]) .look-prev, body[data-page="admin"]:not([data-thema="licht"]) .winkel-licht {
  color-scheme: light;
  --ink: #2A2E35; --ink-2: #454B55; --muted: #6B7280; --subtle: #9AA1AC; --line: #E5E7EB; --line-2: #EEF0F3;
  --bg: #FFFFFF; --bg-soft: #F6F7F9; --bg-softer: #FAFBFC; --yellow-50: #FFF9E6; --yellow-100: #FFF0BF; --yellow-ink: #8A6200;
  --green: #18794E; --green-50: #E9F7EF; --orange: #B45309; --orange-50: #FEF3E2; --red: #CF3A3A; --red-50: #FDECEC; --blue: #2F64C8; --blue-50: #EBF1FC;
  color: var(--ink);
}

/* Overzicht: cijferkaarten met icoon en mini-grafiek, omzet als vlakgrafiek */
body[data-page="admin"] .kpi-k { position: relative; overflow: hidden; text-align: left; }
body[data-page="admin"] .kpi-k .kpi-kop { display: flex; align-items: center; gap: 10px; }
body[data-page="admin"] .kpi-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none;
  background: rgba(255, 198, 41, .1); border: 1px solid rgba(255, 198, 41, .18); color: #FFC629; }
body[data-page="admin"] .kpi-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="admin"] .kpi-k strong { margin-top: 8px; font-size: 30px; }
body[data-page="admin"] .kpi-trend { font-weight: 700; padding: 1px 7px; border-radius: 999px; font-style: normal; }
body[data-page="admin"] .kpi-trend.op { background: rgba(74, 222, 128, .12); }
body[data-page="admin"] .kpi-trend.af { background: rgba(248, 113, 113, .12); }
body[data-page="admin"] .kpi-spark { display: block; width: 100%; height: 34px; margin-top: 10px; pointer-events: none; }
body[data-page="admin"] .grafiek-tot { margin: 2px 0 14px; font-size: 14px; }
body[data-page="admin"] .grafiek-tot strong { font-size: 22px; color: var(--ink); letter-spacing: -.02em; margin-right: 6px; }
body[data-page="admin"] .grafiek { position: relative; height: 200px; }
body[data-page="admin"] .grafiek svg { width: 100%; height: 100%; display: block; overflow: visible; }
body[data-page="admin"] .grafiek .g-lijn { stroke: rgba(255, 255, 255, .06); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 5; }
body[data-page="admin"] .g-punt { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--bg); border: 2.5px solid #FFC629; box-shadow: 0 0 0 4px rgba(255, 198, 41, .12); transition: transform 120ms ease; cursor: default; }
body[data-page="admin"] .g-punt:hover { transform: scale(1.35); }
body[data-page="admin"] .g-dagen { display: flex; justify-content: space-between; margin-top: 10px; }
body[data-page="admin"] .g-dagen em { font-style: normal; font-size: 12px; color: var(--muted); width: 0; display: flex; justify-content: center; white-space: nowrap; }

/* Te doen */
body[data-page="admin"] .dash-todo .todo li { border-bottom-color: var(--line-2); }
body[data-page="admin"] .dash-todo .todo li.is-hot > span { color: var(--ink); }
body[data-page="admin"] .dash-todo .todo li.is-hot > span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #FFC629; box-shadow: 0 0 0 4px rgba(255, 198, 41, .15); margin-right: 12px; vertical-align: 1px; }
body[data-page="admin"] .dash-todo .todo li:not(.is-hot) > span { color: var(--ink-2); padding-left: 20px; }
body[data-page="admin"] .dash-lijst li { border-bottom-color: var(--line-2); }
body[data-page="admin"] .inzicht-tabs button[aria-selected="true"] { color: var(--ink); border-color: #FFC629; }

/* Donker: oudere onderdelen die nog een vaste witte achtergrond hadden */
body[data-page="admin"]:not([data-thema="licht"]) :is(.abo-kpis .kpi, .admin-kpis .kpi, .prod-tabel, .paneel-kop, .paneel-feiten, .paneel-tabs, .mini, .dagknop span,
  .rc-trefs, .rc-chip, .rc-keuze, .rc-kal-dag, .media-upload, .media-tegel, .media-box, .tm-rij, .tm-pijl, .ab-regel, .ab-trefs,
  .add-menu, .block-move button, .preset, .sheet, .sk-card, .nwa-balk button, .nwa-publiceer, .pl-chips span, .pl-chips button,
  .step-dot, .qty, .option, .tile, .shortcut, .faq, .btn-white, .suggest, .meer-menu, .scan-vak, .snel-sug, .info-waarde, .nw-deel-knop,
  .seg button[aria-selected="true"], .mag-tabel-rij, .mag-kaart) {
  background-color: var(--d-kaart-2); border-color: var(--d-rand); color: var(--d-tekst);
}
body[data-page="admin"]:not([data-thema="licht"]) :is(.abo-kpis .kpi, .admin-kpis .kpi) { background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)), var(--d-kaart); }
body[data-page="admin"]:not([data-thema="licht"]) :is(.abo-kpis .kpi, .admin-kpis .kpi) strong, body[data-page="admin"]:not([data-thema="licht"]) .admin-kpis .kpi-n { color: #fff; }
body[data-page="admin"]:not([data-thema="licht"]) .media-upload { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .02); }
body[data-page="admin"]:not([data-thema="licht"]) .media-upload:hover { border-color: #FFC629; background: rgba(255, 198, 41, .05); }
body[data-page="admin"]:not([data-thema="licht"]) :is(.rc-chip, .rc-keuze, .media-tegel, .preset, .tile, .shortcut, .option):hover { border-color: var(--d-rand-hover); }
body[data-page="admin"]:not([data-thema="licht"]) .rc-keuze.is-on, body[data-page="admin"]:not([data-thema="licht"]) .rc-keuze[aria-pressed="true"] { border-color: #FFC629; box-shadow: 0 0 0 1px #FFC629 inset; }
body[data-page="admin"]:not([data-thema="licht"]) .rc-kal-dag:hover { border-color: var(--d-rand-hover); }
body[data-page="admin"]:not([data-thema="licht"]) .rc-canvaswrap { background: var(--d-kaart-2); border-color: var(--d-rand); }
body[data-page="admin"]:not([data-thema="licht"]) .prod-tabel tbody tr:hover { background: rgba(255, 255, 255, .03); }
body[data-page="admin"]:not([data-thema="licht"]) .check input, body[data-page="admin"]:not([data-thema="licht"]) .radio-input { background-color: var(--d-veld); border-color: #3A4253; }
body[data-page="admin"]:not([data-thema="licht"]) .check input:checked { background-color: #FFC629; border-color: #FFC629; }
body[data-page="admin"]:not([data-thema="licht"]) .radio-input:checked { border-color: #FFC629; }
body[data-page="admin"]:not([data-thema="licht"]) .plattegrond { border-radius: 14px; }
body[data-page="admin"]:not([data-thema="licht"]) .pay-status.p-ok { background: rgba(74, 222, 128, .12); color: #86EFAC; }
body[data-page="admin"]:not([data-thema="licht"]) .pay-status.p-wacht { background: rgba(251, 191, 90, .12); color: #FCD34D; }
body[data-page="admin"]:not([data-thema="licht"]) .pay-status.p-fout { background: rgba(248, 113, 113, .12); color: #FCA5A5; }
body[data-page="admin"]:not([data-thema="licht"]) .pay-status.p-neutraal { background: rgba(255, 255, 255, .06); color: #A4AEBD; }

@media (max-width: 600px) { body[data-page="admin"] .kpi-k strong { font-size: 22px; overflow-wrap: anywhere; } body[data-page="admin"] .kpi-k { padding: 14px; } }
body[data-page="admin"][data-thema="licht"] .grafiek .g-lijn { stroke: rgba(17, 24, 39, .08); }
body[data-page="admin"][data-thema="licht"] .kpi-ico { color: #8A6200; background: #FFF9E6; border-color: #F6E5AE; }

/* Wisselknop licht/donker in de bovenbalk */
body[data-page="admin"] .thema-knop { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
body[data-page="admin"] .thema-knop:hover { color: var(--ink); border-color: #FFC629; }
body[data-page="admin"] .thema-knop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="admin"] .thema-knop .t-zon { display: none; }
body[data-page="admin"]:not([data-thema="licht"]) .thema-knop .t-zon { display: block; }
body[data-page="admin"]:not([data-thema="licht"]) .thema-knop .t-maan { display: none; }
body[data-page="admin"]:not([data-thema="licht"]) .thema-knop { background: var(--d-kaart); border-color: var(--d-rand); color: #FFC629; }

/* ==========================================================================
   Beheer — tweede ronde: warmer donker, grote kleurkaarten, ronde knoppen
   ========================================================================== */
/* grote, dunne titel */
body[data-page="admin"] .admin-title { font-family: var(--font); font-weight: 400; font-size: 40px; letter-spacing: -.035em; margin: 4px 0 24px; }
/* ronde, 'glazen' knoppen en velden */
body[data-page="admin"] .admin-main .btn { border-radius: 999px; }
body[data-page="admin"] .admin-main :is(.input, .select, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"])) { border-radius: 14px; }
body[data-page="admin"] .admin-nav button, body[data-page="admin"] .admin-nav a { border-radius: 14px; }
body[data-page="admin"] .admin-main .card, body[data-page="admin"] .admin-card { border-radius: 22px; }
body[data-page="admin"]:not([data-thema="licht"]) .admin-main .btn-secondary { background: rgba(255, 255, 255, .05); backdrop-filter: blur(8px); }
body[data-page="admin"]:not([data-thema="licht"]) .admin-nav button.is-on { background: linear-gradient(90deg, #FFD43B 0%, #B9E86A 55%, #7BE495 100%); box-shadow: 0 8px 26px rgba(185, 232, 106, .22); border-radius: 12px; color: #121216; }
body[data-page="admin"]:not([data-thema="licht"]) .admin-main .card, body[data-page="admin"]:not([data-thema="licht"]) .admin-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01) 55%), rgba(23, 23, 29, .78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* Overzicht: rij met drie grote kaarten (geel, oranje, donker) */
body[data-page="admin"] .held-rij { display: grid; grid-template-columns: 1.35fr 1.1fr 1fr; gap: 16px; margin-bottom: 16px; }
body[data-page="admin"] .held { position: relative; display: flex; flex-direction: column; min-height: 250px; padding: 22px 24px; border-radius: 26px; border: 0;
  font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); }
body[data-page="admin"] .held:hover { transform: translateY(-2px); }
body[data-page="admin"] .held:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
body[data-page="admin"] .held-kop { display: flex; align-items: center; justify-content: space-between; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
body[data-page="admin"] .held-pijl { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 15px;
  background: rgba(26, 26, 20, .1); }
body[data-page="admin"] .held-geel { background: linear-gradient(150deg, #F7EC3A 0%, #FFD43B 55%, #FFC629 100%); color: #1A1A14; box-shadow: 0 18px 50px rgba(247, 222, 58, .18); }
body[data-page="admin"] .held-oranje { background: linear-gradient(150deg, #FF9A52 0%, #FF8A3D 60%, #F97B2C 100%); color: #1A1A14; box-shadow: 0 18px 50px rgba(255, 138, 61, .16); }
body[data-page="admin"] .held-donker { background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)), var(--bg); border: 1px solid var(--line); color: var(--ink); }
body[data-page="admin"] .held-donker .held-pijl { background: rgba(255, 255, 255, .06); }
body[data-page="admin"][data-thema="licht"] .held-donker .held-pijl { background: var(--bg-soft); }

/* geel: vier staven */
body[data-page="admin"] .held-staven { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; margin-top: 10px; min-height: 160px; }
body[data-page="admin"] .held-staaf { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-width: 0; }
body[data-page="admin"] .held-staaf svg { width: 100%; display: block; min-height: 18px; max-height: 110px; }
body[data-page="admin"] .held-cijfer { display: grid; line-height: 1.1; }
body[data-page="admin"] .held-cijfer strong { font-size: 30px; font-weight: 500; letter-spacing: -.03em; }
body[data-page="admin"] .held-cijfer em { font-style: normal; font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* oranje: legende en halve cirkel */
body[data-page="admin"] .held-voorraad { flex: 1; display: block; margin-top: 18px; }
body[data-page="admin"] .held-legende { display: grid; gap: 10px; font-size: 13.5px; width: max-content; max-width: 56%; position: relative; z-index: 1; }
body[data-page="admin"] .held-legende span { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
body[data-page="admin"] .held-legende b { padding-left: 14px; }
body[data-page="admin"] .held-legende b { margin-left: auto; font-weight: 700; }
body[data-page="admin"] .held-legende i { width: 12px; height: 12px; border-radius: 50%; flex: none; background: #1A1A14; }
body[data-page="admin"] .held-legende i.bol-streep { background: repeating-linear-gradient(45deg, #1A1A14 0 2px, transparent 2px 4px); }
body[data-page="admin"] .held-legende i.bol-stip { background: radial-gradient(#1A1A14 35%, transparent 40%) 0 0 / 4px 4px; }
body[data-page="admin"] .held-boog { position: absolute; right: 20px; bottom: 0; width: 42%; max-width: 230px; }
body[data-page="admin"] .held-boog svg { width: 100%; display: block; }
body[data-page="admin"] .held-pil { position: absolute; right: 0; top: 0; translate: 10% -80%; display: inline-flex; align-items: baseline; gap: 4px;
  background: #F7EC3A; color: #1A1A14; font-weight: 700; font-size: 17px; padding: 6px 14px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
body[data-page="admin"] .held-pil small { font-size: 11px; font-weight: 600; opacity: .7; }

/* donker: groot getal en lijn */
body[data-page="admin"] .held-groot { font-size: 38px; font-weight: 500; letter-spacing: -.035em; margin-top: auto; padding-top: 18px; color: var(--ink); }
body[data-page="admin"] .held-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
body[data-page="admin"] .held-donker .kpi-spark { height: 54px; margin-top: 14px; }

/* Te doen naast de weekgrafiek: geen gekleurde rand meer nodig */
body[data-page="admin"] .dash-twee { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
body[data-page="admin"] .dash-todo { border-left: 0; margin-bottom: 0; }
body[data-page="admin"] .dash-laatste { margin-bottom: 16px; }

@media (max-width: 1100px) {
  body[data-page="admin"] .held-rij { grid-template-columns: 1fr 1fr; }
  body[data-page="admin"] .held-donker { grid-column: 1 / -1; min-height: 0; }
  body[data-page="admin"] .dash-twee { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body[data-page="admin"] .held-rij { grid-template-columns: 1fr; }
  body[data-page="admin"] .admin-title { font-size: 32px; }
  body[data-page="admin"] .held-cijfer strong { font-size: 24px; }
  body[data-page="admin"] .held-cijfer em { white-space: normal; font-size: 11px; }
}

/* ==========================================================================
   Beheer — hoofdstijl "Sales dashboard" (gloeiende band, kaarten met
   mini-lijn, lijngrafiek met periodes, tabel best verkocht). De gele en
   oranje kaarten blijven als tweede stijl in het overzicht.
   ========================================================================== */
body[data-page="admin"] .admin-main { position: relative; isolation: isolate; }
body[data-page="admin"] .admin-main:has(.dash-band)::before {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 330px; pointer-events: none;
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(255, 198, 41, .55), transparent 70%),
    radial-gradient(55% 130% at 55% -10%, rgba(123, 228, 149, .55), transparent 70%),
    radial-gradient(50% 120% at 100% 0%, rgba(43, 212, 200, .55), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
body[data-page="admin"] .admin-main:has(.dash-band)::after {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 330px; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}
body[data-page="admin"][data-thema="licht"] .admin-main:has(.dash-band)::before { opacity: .5; }
body[data-page="admin"] .admin-main:has(.dash-band) .admin-title { color: #0F1013; text-shadow: none; }
body[data-page="admin"]:not([data-thema="licht"]) .admin-main:has(.dash-band) .admin-title { color: #0F1013; }

body[data-page="admin"] .dash-band { margin: -10px 0 22px; }
body[data-page="admin"] .dash-band-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: -14px 0 22px; }
body[data-page="admin"] .dash-groet { margin: 0; font-size: 16px; font-weight: 600; color: rgba(15, 16, 19, .85); }
body[data-page="admin"] .dash-datum { margin: 2px 0 0; font-size: 13.5px; color: rgba(15, 16, 19, .62); text-transform: capitalize; }
body[data-page="admin"] .dash-bel { position: relative; width: 46px; height: 46px; border-radius: 14px; border: 0; cursor: pointer; display: grid; place-items: center;
  background: rgba(15, 16, 19, .55); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body[data-page="admin"] .dash-bel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="admin"] .dash-bel i { position: absolute; top: 7px; right: 7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #EF4444; color: #fff;
  font: 700 10.5px/17px var(--font); font-style: normal; text-align: center; }

/* cijferkaarten op de band: glas, tekst links, mini-lijn rechts */
body[data-page="admin"] .kpi-band { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; }
body[data-page="admin"] .kpi-band .kpi-k { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-radius: 20px; min-height: 128px;
  background: linear-gradient(180deg, rgba(14, 14, 18, .78), rgba(14, 14, 18, .92)); border: 1px solid rgba(255, 255, 255, .06);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 40px rgba(0, 0, 0, .28); color: #F1F2F5; }
body[data-page="admin"][data-thema="licht"] .kpi-band .kpi-k { background: rgba(255, 255, 255, .86); border-color: rgba(15, 16, 19, .06); color: var(--ink); box-shadow: 0 18px 40px rgba(15, 16, 19, .08); }
body[data-page="admin"] .kpi-band .kpi-k:hover { transform: translateY(-2px); border-color: rgba(123, 228, 149, .35); }
body[data-page="admin"] .kpi-tekst { display: grid; gap: 6px; min-width: 0; }
body[data-page="admin"] .kpi-band .kpi-kop { font-size: 14px; font-weight: 500; color: inherit; opacity: .85; text-transform: none; letter-spacing: 0; }
body[data-page="admin"] .kpi-band .kpi-k strong { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: inherit; }
body[data-page="admin"] .kpi-band .kpi-k em { font-style: normal; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
body[data-page="admin"] .kpi-band .kpi-k em b { color: inherit; }
body[data-page="admin"] .kpi-band .kpi-spark { width: 42%; max-width: 140px; height: 54px; margin: 0; flex: none; }
body[data-page="admin"] .kpi-trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 12px; padding: 3px 8px; border-radius: 8px; font-style: normal; }
body[data-page="admin"] .kpi-trend.op { background: rgba(74, 222, 128, .12); color: #4ADE80; }
body[data-page="admin"] .kpi-trend.af { background: rgba(248, 113, 113, .12); color: #F87171; }
body[data-page="admin"] .kpi-trend.wacht { background: rgba(255, 198, 41, .14); color: #FFC629; }
body[data-page="admin"][data-thema="licht"] .kpi-trend.op { color: #16803C; } body[data-page="admin"][data-thema="licht"] .kpi-trend.af { color: #C2410C; } body[data-page="admin"][data-thema="licht"] .kpi-trend.wacht { color: #8A6200; }
body[data-page="admin"] .kpi-icoon { width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(255, 198, 41, .18), rgba(43, 212, 200, .18)); color: #7BE495; }
body[data-page="admin"] .kpi-icoon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="admin"] .gloei { filter: drop-shadow(0 0 6px rgba(123, 228, 149, .55)); }

/* grafiek met periodes, naast de gele kaart */
body[data-page="admin"] .dash-grafiek-rij { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); align-items: stretch; }
body[data-page="admin"] .dash-grafiek-rij .held { min-height: 0; }
body[data-page="admin"] .seg-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
body[data-page="admin"][data-thema="licht"] .seg-tabs { background: var(--bg-soft); }
body[data-page="admin"] .seg-tabs button { border: 0; background: none; font: 500 13px var(--font); color: var(--muted); padding: 7px 12px; border-radius: 9px; cursor: pointer; }
body[data-page="admin"] .seg-tabs button:hover { color: var(--ink); }
body[data-page="admin"] .seg-tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .1); color: var(--ink); font-weight: 600; }
body[data-page="admin"][data-thema="licht"] .seg-tabs button[aria-selected="true"] { background: #fff; box-shadow: var(--shadow-sm); }
body[data-page="admin"] #dash-grafiek { transition: opacity 150ms ease; }
body[data-page="admin"] #dash-grafiek.is-laden { opacity: .4; }
body[data-page="admin"] .g-vak { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
body[data-page="admin"] .g-as { display: flex; flex-direction: column; justify-content: space-between; height: 240px; font-size: 11.5px; color: var(--muted); text-align: right; translate: 0 -.5em; }
body[data-page="admin"] .g-as span { line-height: 1; }
body[data-page="admin"] .dash-verkoop .grafiek { height: 240px; }
body[data-page="admin"] .dash-verkoop .g-dagen { padding-left: 44px; }
body[data-page="admin"] .g-punt { background: var(--bg); border-color: #7BE495; box-shadow: 0 0 0 4px rgba(123, 228, 149, .12); width: 10px; height: 10px; margin: -5px 0 0 -5px; opacity: 0; }
body[data-page="admin"] .grafiek:hover .g-punt { opacity: 1; }
body[data-page="admin"] .g-punt:hover { z-index: 3; }
body[data-page="admin"] .g-punt::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 0; white-space: nowrap;
  background: #2A2B33; color: #fff; font: 600 12px var(--font); padding: 6px 9px; border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; transition: opacity 100ms ease; }
body[data-page="admin"] .g-punt:hover::after { opacity: 1; }

/* best verkocht */
body[data-page="admin"] .tabel-scroll { overflow-x: auto; }
body[data-page="admin"] .top-tabel { width: 100%; border-collapse: collapse; }
body[data-page="admin"] .top-tabel th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 10px; background: none; border-bottom: 1px solid var(--line); }
body[data-page="admin"] .top-tabel td { padding: 12px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
body[data-page="admin"] .top-tabel tr:last-child td { border-bottom: 0; }
body[data-page="admin"] .top-tabel .r { text-align: right; white-space: nowrap; }
body[data-page="admin"] .top-tabel .foto { width: 64px; }
body[data-page="admin"] .top-tabel .foto img { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; background: #fff; display: block; }
body[data-page="admin"] .voorraad-pil { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; white-space: nowrap; background: rgba(255, 255, 255, .06); color: var(--muted); }
body[data-page="admin"] .voorraad-pil.ok { background: rgba(74, 222, 128, .12); color: #4ADE80; }
body[data-page="admin"] .voorraad-pil.warn { background: rgba(255, 198, 41, .13); color: #FFD45E; }
body[data-page="admin"] .voorraad-pil.err { background: rgba(248, 113, 113, .12); color: #F87171; }
body[data-page="admin"][data-thema="licht"] .voorraad-pil.ok { color: #16803C; } body[data-page="admin"][data-thema="licht"] .voorraad-pil.warn { color: #8A6200; } body[data-page="admin"][data-thema="licht"] .voorraad-pil.err { color: #C0392B; }
body[data-page="admin"] .dash-best { margin-bottom: 16px; }

@media (max-width: 1100px) {
  body[data-page="admin"] .kpi-band { grid-template-columns: 1fr 1fr; }
  body[data-page="admin"] .dash-grafiek-rij { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body[data-page="admin"] .kpi-band { grid-template-columns: 1fr; }
  body[data-page="admin"] .seg-tabs button { padding: 6px 8px; font-size: 12px; }
  body[data-page="admin"] .dash-verkoop .admin-head { flex-direction: column; align-items: flex-start; }
}
body[data-page="admin"] .kpi-band .kpi-k span:not(.kpi-trend):not(.kpi-icoon) { text-transform: none; letter-spacing: 0; }
body[data-page="admin"] .kpi-band .kpi-k .kpi-kop { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; }
body[data-page="admin"] .kpi-band .kpi-k em { text-transform: none; letter-spacing: 0; font-weight: 500; }
body[data-page="admin"] .kpi-band .kpi-spark { width: 36%; max-width: 128px; }
body[data-page="admin"] .dash-datum { text-transform: none; }
body[data-page="admin"] .dash-datum::first-letter { text-transform: uppercase; }
body[data-page="admin"] .dash-grafiek-rij .held-staaf svg { max-height: 240px; }
body[data-page="admin"] .dash-grafiek-rij .held-staven { min-height: 220px; }
body[data-page="admin"][data-thema="licht"] .kpi-band .kpi-k strong { color: #15161A; }
body[data-page="admin"][data-thema="licht"] .kpi-band .kpi-k .kpi-kop { color: #4B4F58; opacity: 1; }
body[data-page="admin"] .dash-grafiek-rij .held-cijfer em { white-space: normal; }
body[data-page="admin"] .kpi-band .kpi-k .kpi-tekst { color: inherit; font-size: 15px; font-weight: 400; }
body[data-page="admin"] .kpi-band .kpi-k strong { color: #F7F8FA; }
body[data-page="admin"] .kpi-band .kpi-k .kpi-kop { color: #C9CBD3; }
body[data-page="admin"][data-thema="licht"] .kpi-band .kpi-k strong { color: #15161A; }
body[data-page="admin"][data-thema="licht"] .kpi-band .kpi-k .kpi-kop { color: #4B4F58; }
body[data-page="admin"] .dash-verkoop { overflow: hidden; }

/* Prijsdaling-melding op de productpagina */
.prijs-volg { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 6px 0; border: 0; background: none; font: 600 13.5px var(--font);
  color: var(--ink-2); cursor: pointer; text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.prijs-volg svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.prijs-volg:hover { color: var(--ink); }
.prijs-volg.is-aan { color: var(--green); text-decoration-color: transparent; }
.prijs-volg.is-aan svg { fill: currentColor; }
.pv-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--yellow-50); color: var(--yellow-ink); margin-bottom: 10px; }
.pv-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-uitleg { margin: 6px 0 0; }

/* Kleurzones (schoonmaak-kleurcode) */
.zone-pil { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 2px 0 4px; padding: 3px 9px 3px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; background: color-mix(in srgb, var(--zone) 10%, #fff); border: 1px solid color-mix(in srgb, var(--zone) 30%, #fff); }
.zone-pil i { width: 9px; height: 9px; border-radius: 50%; background: var(--zone); flex: none; }
.zone-pil:hover { border-color: var(--zone); color: var(--ink); }
.pdp-zone { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; margin: 4px 0 2px;
  background: color-mix(in srgb, var(--zone) 8%, #fff); border: 1px solid color-mix(in srgb, var(--zone) 28%, #fff); }
.pdp-zone > i { width: 26px; height: 26px; border-radius: 8px; background: var(--zone); flex: none; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35); }
.pdp-zone strong { display: block; font-size: 14.5px; }
.pdp-zone span { font-size: 13.5px; color: var(--ink-2); }
.zone-balk { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 8px; align-items: stretch; margin: 0 0 14px; }
.zone-balk-kop { align-self: center; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-right: 6px; }
.zone-knop { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); cursor: pointer;
  font: inherit; text-align: left; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); min-width: 0; }
.zone-knop i { width: 22px; height: 22px; border-radius: 7px; background: var(--zone); flex: none; }
.zone-knop span { display: grid; min-width: 0; line-height: 1.2; }
.zone-knop strong { font-size: 14px; }
.zone-knop em { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone-knop b { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; }
.zone-knop:hover:not(:disabled) { border-color: var(--zone); }
.zone-knop[aria-pressed="true"] { border-color: var(--zone); background: color-mix(in srgb, var(--zone) 9%, #fff); box-shadow: 0 0 0 1px var(--zone) inset; }
.zone-knop:disabled { opacity: .45; cursor: default; }
.zone-mix { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 4px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); background: var(--yellow-50); }
.zone-mix > svg { width: 20px; height: 20px; flex: none; color: var(--yellow-ink); margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; }
.zone-mix strong { display: block; font-size: 14.5px; }
.zone-mix > div > span { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0; font-size: 13.5px; }
.zone-mix-z { display: inline-flex; align-items: center; gap: 6px; }
.zone-mix-z i { width: 10px; height: 10px; border-radius: 50%; background: var(--zone); }
.zone-mix em { font-style: normal; font-size: 13px; color: var(--ink-2); }
@media (max-width: 900px) {
  .zone-balk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zone-balk-kop { grid-column: 1 / -1; }
}

/* Slimme homepage: groet volgens het uur, artikelen volgens het weer */
.slim-band { margin: 18px 0 6px; }
.slim-in { display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; padding: 16px 20px; border-radius: var(--radius-xl);
  background: linear-gradient(100deg, var(--yellow-50), #fff 70%); border: 1px solid var(--line); }
.slim-band.is-nacht .slim-in, .slim-band.is-avond .slim-in { background: linear-gradient(100deg, #EEF0F7, #fff 70%); }
.slim-band.is-regen .slim-in { background: linear-gradient(100deg, #EAF2FB, #fff 70%); }
.slim-band.is-vorst .slim-in { background: linear-gradient(100deg, #EEF6FB, #fff 70%); }
.slim-tekst { display: flex; align-items: center; gap: 14px; flex: 1 1 320px; min-width: 0; }
.slim-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: #fff; box-shadow: var(--shadow-sm); color: var(--yellow-ink); }
.slim-band.is-nacht .slim-ico, .slim-band.is-avond .slim-ico { color: #4B5694; }
.slim-band.is-regen .slim-ico, .slim-band.is-vorst .slim-ico { color: #2F64C8; }
.slim-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.slim-groet { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 17px; }
.slim-weer { font-family: var(--font); font-weight: 500; color: var(--muted); font-size: 14.5px; }
.slim-zin { margin: 2px 0 0; color: var(--ink-2); font-size: 14.5px; }
.slim-prod { display: flex; gap: 10px; flex: 1 1 520px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.slim-prod::-webkit-scrollbar { display: none; }
.slim-art { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 12px 8px 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); min-width: 150px; max-width: 250px; flex: 1 1 0;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.slim-art:hover { border-color: var(--yellow); transform: translateY(-1px); }
.slim-foto { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; }
.slim-foto .p-shot, .slim-foto img { width: 100%; height: 100%; object-fit: contain; }
.slim-naam { font-size: 13px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slim-prijs { font-size: 13px; font-weight: 800; }
@media (max-width: 640px) { .slim-in { padding: 14px; } .slim-art { min-width: 170px; } }

/* Beheer: kleurzones en slimme homepage */
.zn-rooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0 16px; }
.zn-kaart { border: 1px solid var(--line); border-top: 4px solid var(--zone); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; }
.zn-kop { display: flex; align-items: center; gap: 8px; }
.zn-kop i { width: 14px; height: 14px; border-radius: 4px; background: var(--zone); }
.zn-kop .muted { margin-left: auto; font-size: 12.5px; }
.zn-rij { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.zn-naam { display: grid; min-width: 0; flex: 1; font-size: 14px; }
.zn-naam strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zn-naam .muted { font-size: 12px; }
.zn-knoppen { display: inline-flex; gap: 5px; flex: none; }
.zn-k { width: 26px; height: 26px; border-radius: 8px; border: 2px solid transparent; background: var(--zone); cursor: pointer; padding: 0; opacity: .35; transition: opacity 120ms ease, transform 120ms ease; }
.zn-k:hover { opacity: .8; }
.zn-k[aria-pressed="true"] { opacity: 1; border-color: var(--ink); transform: scale(1.06); }
.zn-k.is-geen { background: transparent; border: 1.5px dashed var(--line); color: var(--muted); font-size: 14px; line-height: 1; opacity: .8; }
.zn-k.is-geen[aria-pressed="true"] { border-style: solid; border-color: var(--ink); color: var(--ink); }
.zn-voorstel { max-height: 320px; overflow: auto; margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; padding: 4px 10px; }
.zn-vrij { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13.5px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.zn-vrij:last-child { border-bottom: 0; }
.zn-vrij i { width: 12px; height: 12px; border-radius: 4px; background: var(--zone); flex: none; }
.sl-regels { margin: 8px 0 12px; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.slim-geo { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; font: 600 12.5px var(--font); color: var(--ink-2); cursor: pointer; vertical-align: 2px; }
.slim-geo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.slim-geo:hover { border-color: var(--yellow); color: var(--ink); }
.slim-geo.is-aan { color: var(--green); border-color: transparent; background: transparent; padding-left: 0; }
.slim-geo.is-aan:hover { color: var(--ink-2); text-decoration: underline; }
.slim-geo:disabled { opacity: .6; cursor: wait; }

/* ==========================================================================
   Beheer — Vision-stijl (okt 2026)
   Zwevend zijmenu met het Dubanet-logo, navy glazen kaarten, Dubanet-geel als accent.
   Donker is standaard; met de zon-knop dezelfde indeling in het licht.
   De klassen beginnen met v- (v-app, v-nav, v-kaart…); oudere schermen volgen via de kleurvariabelen.
   ========================================================================== */
body[data-page="admin"] {
  --v-bg: #EEF1F8; --v-kaart: #fff; --v-rand: rgba(20, 30, 70, .07); --v-tekst: #1B2235; --v-zacht: #6B7489;
  --v-tegel: #FFF3CC; --v-tegel-ink: #8A6100; --v-diep: #F3F5FA; --v-lijn: rgba(20, 30, 70, .09);
  --v-schaduw: 0 12px 32px rgba(20, 30, 70, .07); --v-nav: #fff; --v-actief: #fff; --v-actief-schaduw: 0 8px 22px rgba(20, 30, 70, .08);
  --v-staaf: #1B2235; --v-veld: #fff;
  --font: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Plus Jakarta Sans", Manrope, system-ui, sans-serif;
  font-family: var(--font);
}
body[data-page="admin"]:not([data-thema="licht"]) {
  --v-bg: #060B26;
  --v-kaart: linear-gradient(127deg, rgba(6, 11, 40, .94) 19%, rgba(10, 14, 35, .55) 77%);
  --v-rand: rgba(255, 255, 255, .06); --v-tekst: #fff; --v-zacht: #A0AEC0;
  --v-tegel: #1A1F37; --v-tegel-ink: #FFC629; --v-diep: linear-gradient(127deg, #060B26 28%, rgba(26, 31, 55, .5) 92%);
  --v-lijn: rgba(86, 87, 122, .4); --v-schaduw: 0 20px 50px rgba(0, 0, 0, .28);
  --v-nav: linear-gradient(111deg, rgba(6, 11, 38, .94) 60%, rgba(26, 31, 55, .55) 100%);
  --v-actief: #1A1F37; --v-actief-schaduw: 0 10px 24px rgba(0, 0, 0, .25); --v-staaf: #fff; --v-veld: #0F1535;
  --d-bg: #060B26; --d-zij: #0B1030; --d-kaart: #0D1333; --d-kaart-2: #141B3F; --d-veld: #0F1535;
  --d-rand: rgba(226, 232, 240, .1); --d-rand-2: rgba(226, 232, 240, .06); --d-rand-hover: rgba(226, 232, 240, .24);
  --d-tekst-2: #CBD5E0; --d-zacht: #A0AEC0; --d-zachter: #718096;
  background: #060B26;
}

/* ---- het geraamte: zwevend menu links, inhoud rechts ---- */
body[data-page="admin"] .v-app {
  display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; color: var(--v-tekst);
  background: radial-gradient(1100px 700px at 85% 0%, rgba(80, 100, 255, .10), transparent 60%), var(--v-bg);
}
body[data-page="admin"]:not([data-thema="licht"]) .v-app {
  background:
    radial-gradient(900px 600px at 78% 38%, rgba(0, 117, 255, .22), transparent 62%),
    radial-gradient(700px 500px at 30% 105%, rgba(255, 198, 41, .07), transparent 60%),
    linear-gradient(159deg, #0F123B 14%, #090D2E 56%, #020515 86%);
  background-attachment: fixed;
}
body[data-page="admin"] .v-app .admin-nav.v-nav {
  position: sticky; inset: 16px auto auto auto; align-self: start; display: flex; flex-direction: column;
  margin: 16px 0 16px 16px; height: calc(100vh - 32px); min-height: 0; width: auto; overflow: auto; overscroll-behavior: contain;
  padding: 22px 14px 16px; border-radius: 20px; background: var(--v-nav); border: 1px solid var(--v-rand); box-shadow: var(--v-schaduw);
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); scrollbar-width: thin;
}
body[data-page="admin"] .v-merk { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 6px 22px; margin: 0 0 18px; position: relative; }
body[data-page="admin"] .v-merk::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(160, 174, 192, .55), transparent); }
body[data-page="admin"] .v-merk img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(255, 198, 41, .45)); }
body[data-page="admin"] .v-merk span { display: flex; flex-direction: column; line-height: 1.1; }
body[data-page="admin"] .v-merk strong { font: 800 15px var(--font-head); letter-spacing: .3em; color: var(--v-tekst); }
body[data-page="admin"] .v-merk em { font: 700 10px var(--font); font-style: normal; letter-spacing: .32em; text-transform: uppercase; color: #FFC629; margin-top: 4px; }

/* menu-items met een tegeltje voor het icoon */
body[data-page="admin"] .v-nav .nav-zoek { margin: 0 2px 14px; border-radius: 14px; background: var(--v-veld); border: 1px solid var(--v-rand); }
body[data-page="admin"] .v-nav .nav-kop, body[data-page="admin"] .v-nav .nav-group h6 { font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--v-zacht); padding: 14px 12px 6px; }
body[data-page="admin"] .v-nav .nav-rij { position: relative; }
body[data-page="admin"] .v-app .v-nav button[data-tab] {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 10px; margin: 1px 0; border-radius: 15px;
  font: 600 13.5px var(--font); color: var(--v-tekst); background: none; box-shadow: none; text-align: left;
}
body[data-page="admin"]:not([data-thema="licht"]) .v-app .v-nav button[data-tab] { color: #E2E8F0; }
body[data-page="admin"] .v-app .v-nav button[data-tab]:hover { background: rgba(127, 140, 180, .09); color: var(--v-tekst); }
body[data-page="admin"] .v-tegel { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--v-tegel); color: var(--v-tegel-ink); transition: background .2s, color .2s; }
body[data-page="admin"] .v-tegel svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 1; }
body[data-page="admin"] .v-app .v-nav button[data-tab].is-on { background: var(--v-actief); box-shadow: var(--v-actief-schaduw); color: var(--v-tekst); font-weight: 700; }
body[data-page="admin"]:not([data-thema="licht"]) .v-app .v-nav button[data-tab].is-on { color: #fff; }
body[data-page="admin"] .v-app .v-nav button[data-tab].is-on .v-tegel { background: #FFC629; color: #1A1D24; box-shadow: 0 4px 14px rgba(255, 198, 41, .35); }
body[data-page="admin"] .v-app .v-nav button[data-tab].is-on .tab-n { background: #EF4444; color: #fff; }
body[data-page="admin"] .v-app .v-nav button.is-on + .nav-pin { color: var(--v-zacht); }
body[data-page="admin"] .v-app .v-nav .nav-pin.is-pin { color: #FFC629; }
body[data-page="admin"] .v-nav .nav-links { border: 0; margin-top: 6px; }
body[data-page="admin"] .v-nav .nav-links a { border-radius: 12px; color: var(--v-tekst); }

/* kaart onderaan het menu (zoals "Need help?") */
body[data-page="admin"] .v-hulp {
  margin: auto 2px 0; padding: 18px 16px 16px; border-radius: 18px; display: flex; flex-direction: column; gap: 4px;
  color: #fff; text-decoration: none; position: relative; overflow: hidden; flex: none;
  background:
    radial-gradient(120px 90px at 88% 8%, rgba(255, 198, 41, .55), transparent 70%),
    radial-gradient(160px 110px at 10% 110%, rgba(0, 117, 255, .55), transparent 70%),
    linear-gradient(135deg, #1B2368, #0B1035);
  margin-top: 22px;
}
body[data-page="admin"] .v-hulp-ico { width: 34px; height: 34px; border-radius: 11px; background: #fff; color: #1A1D24; display: grid; place-items: center; margin-bottom: 10px; }
body[data-page="admin"] .v-hulp-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="admin"] .v-hulp strong { font: 700 14px var(--font); }
body[data-page="admin"] .v-hulp em { font: 400 12px var(--font); font-style: normal; color: #D3D9E8; }
body[data-page="admin"] .v-hulp-knop { margin-top: 12px; text-align: center; padding: 9px 10px; border-radius: 12px; background: rgba(6, 11, 38, .7); font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; transition: background .2s; }
body[data-page="admin"] .v-hulp:hover .v-hulp-knop { background: #FFC629; color: #1A1D24; }

/* ---- bovenbalk in de inhoud: kruimelpad, titel, knoppen ---- */
body[data-page="admin"] .v-app .v-main { padding: 22px 28px 26px; max-width: 1560px; width: 100%; min-width: 0; display: flex; flex-direction: column; }
body[data-page="admin"] .v-app .admin-bar.v-bar {
  position: sticky; top: 12px; z-index: 30; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: none; border: 0; box-shadow: none; padding: 8px 0 22px; color: var(--v-tekst); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-page="admin"] .v-kruimel p { margin: 0 0 4px; font: 500 12px var(--font); color: var(--v-zacht); }
body[data-page="admin"] .v-kruimel p span:last-child { color: var(--v-tekst); }
body[data-page="admin"] .v-app .v-kruimel .admin-title { font: 700 22px var(--font-head); letter-spacing: -.01em; margin: 0; color: var(--v-tekst); text-shadow: none; }
body[data-page="admin"] .v-bar-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; border-radius: 18px; background: var(--v-nav); border: 1px solid var(--v-rand); box-shadow: var(--v-schaduw); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
body[data-page="admin"] .v-app .v-bar .admin-view { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 13px; font: 600 13px var(--font); text-decoration: none; background: var(--v-veld) !important; border: 1px solid var(--v-rand) !important; color: var(--v-tekst) !important; }
body[data-page="admin"] .v-app .v-bar .admin-view:hover { border-color: #FFC629 !important; }
body[data-page="admin"] .v-bar .admin-view svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="admin"] .v-app .v-bar .thema-knop { background: var(--v-veld); border: 1px solid var(--v-rand); color: var(--v-tekst); }
body[data-page="admin"] .v-bar .admin-me { display: flex; align-items: center; gap: 9px; color: var(--v-tekst); }
body[data-page="admin"] .v-bar .admin-naam { font: 600 13px var(--font); color: var(--v-tekst); }
body[data-page="admin"] .v-bar .admin-avatar { background: linear-gradient(135deg, #FFD54F, #FFB800); color: #1A1D24; }
body[data-page="admin"] .v-bar #uit { color: #FFC629; font-weight: 700; }
body[data-page="admin"][data-thema="licht"] .v-bar #uit { color: #9A6B00; }
body[data-page="admin"] .v-app .v-bar .admin-burger { display: none; background: var(--v-veld); border: 1px solid var(--v-rand); }
body[data-page="admin"] .v-voet { margin-top: auto; padding-top: 34px; display: flex; gap: 22px; flex-wrap: wrap; font: 500 12.5px var(--font); color: var(--v-zacht); }
body[data-page="admin"] .v-voet span { margin-right: auto; }
body[data-page="admin"] .v-voet a { color: var(--v-zacht); text-decoration: none; }
body[data-page="admin"] .v-voet a:hover { color: #FFC629; }
body[data-page="admin"] .v-nav-dek { position: fixed; inset: 0; z-index: 39; background: rgba(2, 5, 21, .55); backdrop-filter: blur(2px); }

/* ---- alle schermen: kaarten, velden, knoppen en tabellen in dezelfde stijl ---- */
body[data-page="admin"] .v-app .card, body[data-page="admin"] .v-app .admin-card, body[data-page="admin"] .v-app .assort-list, body[data-page="admin"] .v-app .kpi-k {
  background: var(--v-kaart); border: 1px solid var(--v-rand); border-radius: 20px; box-shadow: var(--v-schaduw); color: var(--v-tekst);
}
body[data-page="admin"] .v-app .card.card-pad { padding: 22px 24px; }
body[data-page="admin"] .v-app .kpi-k strong { color: var(--v-tekst); }
body[data-page="admin"] .v-app .btn { border-radius: 12px; font-family: var(--font); }
body[data-page="admin"] .v-app .btn-primary { background: #FFC629; color: #1A1D24; }
body[data-page="admin"] .v-app .btn-primary:hover { background: #FFD54F; }
body[data-page="admin"]:not([data-thema="licht"]) .v-app .input, body[data-page="admin"]:not([data-thema="licht"]) .v-app select, body[data-page="admin"]:not([data-thema="licht"]) .v-app textarea,
body[data-page="admin"]:not([data-thema="licht"]) .v-app input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]) {
  background-color: #0F1535; border-color: rgba(226, 232, 240, .14); border-radius: 13px;
}
body[data-page="admin"] .v-app table th, body[data-page="admin"] .v-app .rd-tabel th { background: none !important; font: 700 10.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--v-zacht); border-bottom-color: var(--v-lijn); }
body[data-page="admin"] .v-app table td, body[data-page="admin"] .v-app .rd-tabel td { border-bottom-color: var(--v-lijn); }
body[data-page="admin"] .v-app .muted { color: var(--v-zacht); }
body[data-page="admin"]:not([data-thema="licht"]) .v-app .chip { border-radius: 12px; }
body[data-page="admin"] .v-app h2, body[data-page="admin"] .v-app h3 { font-family: var(--font-head); }

/* ---- Overzicht ---- */
body[data-page="admin"] .v-dash { display: grid; gap: 22px; }
body[data-page="admin"] .v-rij { display: grid; gap: 22px; }
body[data-page="admin"] .v-rij-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-page="admin"] .v-rij-2 { grid-template-columns: 1.65fr 1fr 1.25fr; }
body[data-page="admin"] .v-rij-3, body[data-page="admin"] .v-rij-4 { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
body[data-page="admin"] .v-kaart {
  position: relative; overflow: hidden; min-width: 0; border-radius: 20px; padding: 22px 24px; text-align: left;
  background: var(--v-kaart); border: 1px solid var(--v-rand); box-shadow: var(--v-schaduw); color: var(--v-tekst); font-family: var(--font);
  backdrop-filter: blur(60px); -webkit-backdrop-filter: blur(60px);
}
body[data-page="admin"] button.v-kaart, body[data-page="admin"] .v-mini { cursor: pointer; font: inherit; width: 100%; transition: border-color .2s, transform .2s; }
body[data-page="admin"] button.v-kaart:hover, body[data-page="admin"] .v-mini:hover { border-color: rgba(255, 198, 41, .45); transform: translateY(-1px); }
body[data-page="admin"] .v-zacht { color: var(--v-zacht); margin: 0; }
body[data-page="admin"] .v-kop { display: flex; flex-direction: column; gap: 3px; margin: 0 0 16px; }
body[data-page="admin"] .v-kop strong { font: 700 17px var(--font-head); color: var(--v-tekst); }
body[data-page="admin"] .v-kop em { font: 500 13.5px var(--font); font-style: normal; color: var(--v-zacht); display: inline-flex; align-items: center; gap: 6px; }
body[data-page="admin"] .v-kop-rij { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
body[data-page="admin"] .v-kop-rij > span:first-child { display: flex; flex-direction: column; gap: 3px; }
body[data-page="admin"] .v-dash .op { color: #01B574 !important; font-weight: 700; }
body[data-page="admin"] .v-dash .af { color: #E31A1A !important; font-weight: 700; }
body[data-page="admin"]:not([data-thema="licht"]) .v-dash .af { color: #FF6B6B !important; }
body[data-page="admin"] .v-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; font: 700 13px var(--font); color: var(--v-tekst); }
body[data-page="admin"] .v-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
body[data-page="admin"] .v-link:hover { color: #FFC629; }
body[data-page="admin"] .v-link:hover svg { transform: translateX(3px); }
body[data-page="admin"] .v-tegel-groot { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; background: #FFC629; color: #1A1D24; box-shadow: 0 6px 18px rgba(255, 198, 41, .3); }
body[data-page="admin"] .v-tegel-groot svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* rij 1: kleine cijferkaarten */
body[data-page="admin"] .v-mini {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 16px 22px; text-align: left;
  border-radius: 20px; background: var(--v-kaart); border: 1px solid var(--v-rand); box-shadow: var(--v-schaduw); color: var(--v-tekst);
  backdrop-filter: blur(60px); -webkit-backdrop-filter: blur(60px);
}
body[data-page="admin"] .v-mini-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body[data-page="admin"] .v-mini-t em { font: 500 12.5px var(--font); font-style: normal; color: var(--v-zacht); }
body[data-page="admin"] .v-mini-t strong { font: 700 19px var(--font-head); color: var(--v-tekst); line-height: 1.25; }
body[data-page="admin"] .v-mini-t b, body[data-page="admin"] .v-mini-t small { font: 700 13px var(--font); }
body[data-page="admin"] .v-mini-t small { font-weight: 500; color: var(--v-zacht); }
body[data-page="admin"] .v-mini-t b.wacht { color: #FFC629; }

/* rij 2: welkom, voorraadmeter, te doen */
body[data-page="admin"] .v-welkom {
  min-height: 300px; display: flex; color: #fff; border-color: rgba(255, 255, 255, .06);
  background:
    radial-gradient(260px 220px at 74% 52%, rgba(255, 198, 41, .42), transparent 70%),
    radial-gradient(380px 260px at 96% 104%, rgba(0, 117, 255, .55), transparent 70%),
    radial-gradient(300px 200px at 40% -20%, rgba(70, 90, 255, .35), transparent 70%),
    linear-gradient(127deg, #0A1140 18%, #121A5A 100%);
}
body[data-page="admin"] .v-welkom-t { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; max-width: 56%; }
body[data-page="admin"] .v-welkom-t h2 { font: 700 32px var(--font-head); letter-spacing: -.02em; color: #fff; margin: 0 0 6px; }
body[data-page="admin"] .v-welkom .v-zacht { color: #C7CFE2; font-size: 15px; line-height: 1.55; }
body[data-page="admin"] .v-welkom .v-zacht strong { color: #FFC629; }
body[data-page="admin"] .v-welkom .v-link { color: #fff; margin-top: auto; padding-top: 18px; }
body[data-page="admin"] .v-welkom .v-link:hover { color: #FFC629; }
body[data-page="admin"] .v-welkom-beeld { position: absolute; right: 2%; top: 50%; transform: translateY(-50%); width: 46%; aspect-ratio: 1; display: grid; place-items: center; pointer-events: none; }
body[data-page="admin"] .v-welkom-beeld img { width: 74%; max-width: 230px; object-fit: contain; position: relative; filter: drop-shadow(0 0 24px rgba(255, 198, 41, .75)) drop-shadow(0 0 60px rgba(255, 184, 0, .45)); transform: rotate(-8deg); animation: v-zweef 7s ease-in-out infinite; }
body[data-page="admin"] .v-gloed { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 90, .55), rgba(255, 198, 41, 0) 70%); filter: blur(22px); }
@keyframes v-zweef { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { body[data-page="admin"] .v-welkom-beeld img { animation: none; } }

body[data-page="admin"] .v-meter { display: flex; flex-direction: column; align-items: center; }
body[data-page="admin"] .v-meter .v-kop { align-self: stretch; }
body[data-page="admin"] .v-meter-boog { position: relative; width: 190px; height: 180px; margin-top: -4px; }
body[data-page="admin"] .v-meter-boog > svg { width: 190px; height: 190px; }
body[data-page="admin"] .v-meter-bg, body[data-page="admin"] .v-meter-vol { fill: none; stroke-width: 12; stroke-linecap: round; }
body[data-page="admin"] .v-meter-bg { stroke: rgba(160, 174, 192, .16); }
body[data-page="admin"] .v-meter-vol { filter: drop-shadow(0 0 8px rgba(255, 198, 41, .55)); }
body[data-page="admin"] .v-meter-ico { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; }
body[data-page="admin"] .v-meter-onder { width: 100%; margin-top: -22px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 18px; border-radius: 18px; background: var(--v-diep); position: relative; }
body[data-page="admin"] .v-meter-onder small { font: 500 12px var(--font); color: var(--v-zacht); }
body[data-page="admin"] .v-meter-onder span { display: flex; flex-direction: column; align-items: center; }
body[data-page="admin"] .v-meter-onder strong { font: 700 27px var(--font-head); color: var(--v-tekst); line-height: 1.1; }
body[data-page="admin"] .v-meter-onder em { font: 500 12px var(--font); font-style: normal; color: var(--v-zacht); }
body[data-page="admin"] .v-meter-feit { margin-top: 12px; font: 500 12.5px var(--font); color: var(--v-zacht); text-align: center; }
body[data-page="admin"] .v-meter-feit b { color: var(--v-tekst); }

body[data-page="admin"] .v-todo .v-kop { flex-direction: row; align-items: center; justify-content: space-between; }
body[data-page="admin"] .v-teller { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center; background: #FFC629; color: #1A1D24; font: 800 12px var(--font); }
body[data-page="admin"] .v-todo-lijst { list-style: none; margin: 0 0 6px; padding: 0; }
body[data-page="admin"] .v-todo-lijst li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--v-lijn); font: 500 13.5px var(--font); color: var(--v-tekst); }
body[data-page="admin"] .v-todo-lijst li:last-child { border-bottom: 0; }
body[data-page="admin"] .v-todo-lijst li i { width: 8px; height: 8px; border-radius: 50%; background: var(--v-zacht); opacity: .6; }
body[data-page="admin"] .v-todo-lijst li.is-hot i { background: #FFC629; opacity: 1; box-shadow: 0 0 10px rgba(255, 198, 41, .8); }
body[data-page="admin"] .v-todo-lijst .btn { white-space: nowrap; padding: 6px 12px; font-size: 12px; min-height: 0; }
body[data-page="admin"] .v-todo.is-flits { box-shadow: 0 0 0 2px #FFC629, var(--v-schaduw); transition: box-shadow .3s; }
body[data-page="admin"] .v-todo.is-leeg { display: flex; flex-direction: column; }
body[data-page="admin"] .v-klaar { margin: auto auto 0; background: #01B574; color: #fff; box-shadow: 0 6px 18px rgba(1, 181, 116, .35); }

/* rij 3: omzet en bestellingen */
body[data-page="admin"] .v-omzet .g-as span, body[data-page="admin"] .v-omzet .g-dagen em { color: var(--v-zacht); }
body[data-page="admin"] .v-omzet .g-lijn { stroke: var(--v-lijn); stroke-dasharray: 4 5; }
body[data-page="admin"] .v-omzet .grafiek-tot strong { color: var(--v-tekst); }
body[data-page="admin"] .v-omzet .seg-tabs { background: var(--v-diep); border-color: var(--v-rand); }
body[data-page="admin"] .v-omzet .seg-tabs button[aria-selected="true"] { background: #FFC629; color: #1A1D24; }
body[data-page="admin"] .v-bestel { display: flex; flex-direction: column; }
body[data-page="admin"] .v-staven { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; height: 220px; padding: 20px 18px 16px 14px; border-radius: 18px; background: var(--v-diep); margin-bottom: 20px; }
body[data-page="admin"] .v-staven-as { display: flex; flex-direction: column; justify-content: space-between; font: 600 10px var(--font); color: var(--v-zacht); text-align: right; }
body[data-page="admin"] .v-staven-in { display: flex; align-items: flex-end; gap: 4px; min-width: 0; }
body[data-page="admin"] .v-staaf { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; cursor: default; }
body[data-page="admin"] .v-staaf i { width: 7px; border-radius: 99px; background: var(--v-staaf); display: block; transition: background .2s; }
body[data-page="admin"] .v-staaf.is-nu i, body[data-page="admin"] .v-staaf:hover i { background: #FFC629; box-shadow: 0 0 12px rgba(255, 198, 41, .7); }
body[data-page="admin"] .v-staaf:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 5px 9px; border-radius: 9px; background: #1A1F37; color: #fff; font: 600 11.5px var(--font); box-shadow: 0 8px 20px rgba(0, 0, 0, .3); z-index: 2; }
body[data-page="admin"] .v-staaf:hover { z-index: 2; }
body[data-page="admin"] .v-bestel .v-kop { margin-bottom: 18px; }
body[data-page="admin"] .v-bestel-cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: auto; }
body[data-page="admin"] .v-bestel-cijfers button { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: var(--v-tekst); font: inherit; min-width: 0; }
body[data-page="admin"] .v-bc-kop { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; font: 500 12px var(--font); color: var(--v-zacht); }
body[data-page="admin"] .v-bc-kop .v-tegel { width: 24px; height: 24px; border-radius: 7px; background: #FFC629; color: #1A1D24; }
body[data-page="admin"] .v-bc-kop .v-tegel svg { width: 13px; height: 13px; }
body[data-page="admin"] .v-bestel-cijfers strong { display: block; font: 700 18px var(--font-head); margin: 8px 0 7px; }
body[data-page="admin"] .v-balk { display: block; height: 3px; border-radius: 99px; background: var(--v-lijn); overflow: hidden; }
body[data-page="admin"] .v-balk i { display: block; height: 100%; border-radius: 99px; background: #FFC629; }
body[data-page="admin"] .v-bestel-cijfers button:hover strong { color: #FFC629; }

/* rij 4: best verkocht en laatste bestellingen */
body[data-page="admin"] .v-vinkje { width: 16px; height: 16px; border-radius: 50%; background: #01B574; color: #fff; display: inline-grid; place-items: center; }
body[data-page="admin"] .v-vinkje svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="admin"] .v-tabel { width: 100%; border-collapse: collapse; font-family: var(--font); }
body[data-page="admin"] .v-app .v-tabel th { text-align: left; padding: 0 10px 12px; }
body[data-page="admin"] .v-app .v-tabel td { padding: 12px 10px; border-bottom: 1px solid var(--v-lijn); vertical-align: middle; color: var(--v-tekst); font-size: 13.5px; }
body[data-page="admin"] .v-tabel tr:last-child td { border-bottom: 0; }
body[data-page="admin"] .v-tabel .r { text-align: right; white-space: nowrap; }
body[data-page="admin"] .v-art { display: flex; align-items: center; gap: 12px; min-width: 220px; }
body[data-page="admin"] .v-art strong { display: block; font-weight: 600; }
body[data-page="admin"] .v-art small { display: block; font-size: 12px; color: var(--v-zacht); margin-top: 2px; }
body[data-page="admin"] .v-foto { width: 40px; height: 40px; flex: none; border-radius: 12px; background: #fff; overflow: hidden; display: grid; place-items: center; }
body[data-page="admin"] .v-foto img { width: 100%; height: 100%; object-fit: contain; }
body[data-page="admin"] .v-pct { display: flex; flex-direction: column; gap: 6px; min-width: 90px; }
body[data-page="admin"] .v-pct b { font: 700 13px var(--font); color: var(--v-tekst); }
body[data-page="admin"] .v-tijdlijn { list-style: none; margin: 0; padding: 0; }
body[data-page="admin"] .v-tijdlijn li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; }
body[data-page="admin"] .v-tijdlijn li::before { content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 2px; width: 1px; background: var(--v-lijn); }
body[data-page="admin"] .v-tijdlijn li:last-child { padding-bottom: 0; }
body[data-page="admin"] .v-tijdlijn li:last-child::before { display: none; }
body[data-page="admin"] .v-tl-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
body[data-page="admin"] .v-tl-ico svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="admin"] .t-blauw .v-tl-ico { color: #4C8DFF; background: rgba(76, 141, 255, .15); }
body[data-page="admin"] .t-geel .v-tl-ico { color: #FFC629; background: rgba(255, 198, 41, .15); }
body[data-page="admin"] .t-groen .v-tl-ico { color: #01B574; background: rgba(1, 181, 116, .15); }
body[data-page="admin"] .t-oranje .v-tl-ico { color: #FF9F43; background: rgba(255, 159, 67, .15); }
body[data-page="admin"] .t-rood .v-tl-ico { color: #FF5B5B; background: rgba(255, 91, 91, .15); }
body[data-page="admin"] .v-tl-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body[data-page="admin"] .v-tl-t strong { font: 600 14px var(--font); color: var(--v-tekst); }
body[data-page="admin"] .v-tl-t small { font: 500 12px var(--font); color: var(--v-zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-page="admin"] .v-tl-t .pill { font-size: 10.5px; padding: 1px 7px; vertical-align: 1px; }

/* ---- schermbreedtes ---- */
@media (max-width: 1360px) {
  body[data-page="admin"] .v-rij-2 { grid-template-columns: 1fr 1fr; }
  body[data-page="admin"] .v-welkom { grid-column: 1 / -1; }
}
@media (max-width: 1220px) {
  body[data-page="admin"] .v-rij-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="admin"] .v-rij-3, body[data-page="admin"] .v-rij-4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  body[data-page="admin"] .v-app { grid-template-columns: minmax(0, 1fr); }
  body[data-page="admin"] .v-app .admin-nav.v-nav {
    position: fixed; inset: 12px auto 12px 12px; margin: 0; width: 280px; height: auto; z-index: 40; display: flex;
    transform: translateX(-115%); transition: transform .25s ease; background: var(--v-bg);
  }
  body[data-page="admin"]:not([data-thema="licht"]) .v-app .admin-nav.v-nav { background: linear-gradient(111deg, #070C2A 60%, #141A3D 100%); }
  body[data-page="admin"] .v-app .admin-nav.v-nav.is-open { transform: none; }
  body[data-page="admin"] .v-app .v-bar .admin-burger { display: block; }
  body[data-page="admin"] .v-app .v-main { padding: 14px 16px 22px; }
  body[data-page="admin"] .v-bar .admin-naam, body[data-page="admin"] .v-bar .admin-view span { display: none; }
}
@media (max-width: 760px) {
  body[data-page="admin"] .v-rij-2 { grid-template-columns: minmax(0, 1fr); }
  body[data-page="admin"] .v-welkom-t { max-width: 62%; }
  body[data-page="admin"] .v-welkom-t h2 { font-size: 26px; }
  body[data-page="admin"] .v-bar-rechts { margin-left: 0; width: 100%; justify-content: flex-end; }
  body[data-page="admin"] .v-app .admin-bar.v-bar { position: static; }
}
@media (max-width: 560px) {
  body[data-page="admin"] .v-rij-mini { grid-template-columns: minmax(0, 1fr); }
  body[data-page="admin"] .v-bestel-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="admin"] .v-welkom { min-height: 250px; }
  body[data-page="admin"] .v-welkom-beeld { width: 44%; right: -4%; opacity: .9; }
  body[data-page="admin"] .v-kaart { padding: 18px; }
}
@media (max-width: 560px) {
  body[data-page="admin"] .v-welkom-t { max-width: 70%; }
  body[data-page="admin"] .v-welkom-beeld { width: 40%; right: -8%; top: 30%; opacity: .55; }
}
body[data-page="admin"] .v-app .v-nav button[data-tab].is-on::before { display: none; }

/* Vision-stijl, ronde 2: vectorlogo, geen schuifbalken in het menu, beveiliging, klantengroepen */
body[data-page="admin"] .v-app .admin-nav.v-nav { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
body[data-page="admin"] .v-app .admin-nav.v-nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
body[data-page="admin"] .v-nav * { max-width: 100%; }
body[data-page="admin"] .v-merk .logo-svg { width: 44px; height: auto; flex: none; filter: drop-shadow(0 0 10px rgba(255, 198, 41, .35)); }
body[data-page="admin"] .v-welkom-beeld .logo-svg { width: 78%; max-width: 250px; height: auto; position: relative; filter: drop-shadow(0 0 18px rgba(255, 198, 41, .65)) drop-shadow(0 0 48px rgba(255, 184, 0, .35)); transform: rotate(-8deg); animation: v-zweef 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { body[data-page="admin"] .v-welkom-beeld .logo-svg { animation: none; } }

body[data-page="admin"] .v-veilig-in { display: grid; grid-template-columns: minmax(170px, 210px) minmax(0, 1fr) 190px; gap: 22px; align-items: center; }
body[data-page="admin"] .v-veilig-vakken { display: grid; gap: 12px; }
body[data-page="admin"] .v-vak { padding: 14px 16px; border-radius: 18px; background: var(--v-diep); display: flex; flex-direction: column; gap: 2px; }
body[data-page="admin"] .v-vak em { font: 500 12px var(--font); font-style: normal; color: var(--v-zacht); }
body[data-page="admin"] .v-vak strong { font: 700 20px var(--font-head); color: var(--v-tekst); }
body[data-page="admin"] .v-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
body[data-page="admin"] .v-checks li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
body[data-page="admin"] .v-check-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; }
body[data-page="admin"] .v-check-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="admin"] .v-checks .is-ok .v-check-ico { background: rgba(1, 181, 116, .16); color: #01B574; }
body[data-page="admin"] .v-checks .is-let .v-check-ico { background: rgba(255, 159, 67, .16); color: #FF9F43; }
body[data-page="admin"] .v-checks strong { display: block; font: 700 13.5px var(--font); color: var(--v-tekst); }
body[data-page="admin"] .v-checks small { display: block; font: 500 12px var(--font); color: var(--v-zacht); margin-top: 2px; line-height: 1.45; }
body[data-page="admin"] .v-score { position: relative; width: 170px; height: 170px; justify-self: center; }
body[data-page="admin"] .v-score svg { width: 170px; height: 170px; }
body[data-page="admin"] .v-score-bg, body[data-page="admin"] .v-score-vol { fill: none; stroke-width: 11; stroke-linecap: round; }
body[data-page="admin"] .v-score-bg { stroke: rgba(160, 174, 192, .16); }
body[data-page="admin"] .v-score.is-goed .v-score-vol { stroke: #01B574; filter: drop-shadow(0 0 8px rgba(1, 181, 116, .55)); }
body[data-page="admin"] .v-score.is-matig .v-score-vol { stroke: #FFC629; filter: drop-shadow(0 0 8px rgba(255, 198, 41, .55)); }
body[data-page="admin"] .v-score.is-slecht .v-score-vol { stroke: #FF5B5B; filter: drop-shadow(0 0 8px rgba(255, 91, 91, .5)); }
body[data-page="admin"] .v-score > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
body[data-page="admin"] .v-score em { font: 500 12px var(--font); font-style: normal; color: var(--v-zacht); }
body[data-page="admin"] .v-score strong { font: 700 40px var(--font-head); color: var(--v-tekst); line-height: 1.05; }
@media (max-width: 1220px) { body[data-page="admin"] .v-veilig-in { grid-template-columns: minmax(0, 1fr) 170px; } body[data-page="admin"] .v-veilig-vakken { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { body[data-page="admin"] .v-veilig-in { grid-template-columns: minmax(0, 1fr); } body[data-page="admin"] .v-checks { grid-template-columns: minmax(0, 1fr); } body[data-page="admin"] .v-veilig-vakken { grid-template-columns: minmax(0, 1fr); } }

body[data-page="admin"] .gr-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }
body[data-page="admin"] .gr-kaart { display: flex; flex-direction: column; gap: 14px; }
body[data-page="admin"] .gr-kaart.is-uit { opacity: .6; }
body[data-page="admin"] .gr-kop { display: flex; align-items: center; gap: 14px; }
body[data-page="admin"] .gr-kop strong { display: block; font: 700 17px var(--font-head); color: var(--v-tekst); }
body[data-page="admin"] .gr-kop em { font: 500 12.5px var(--font); font-style: normal; color: var(--v-zacht); }
body[data-page="admin"] .gr-cijfers { display: flex; gap: 18px; font: 500 13px var(--font); color: var(--v-zacht); }
body[data-page="admin"] .gr-cijfers b { color: var(--v-tekst); font-size: 15px; }
body[data-page="admin"] .gr-regels { list-style: none; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--v-diep); font: 500 13px var(--font); color: var(--v-tekst); display: grid; gap: 6px; flex: 1; }
body[data-page="admin"] .gr-kaart .btn { align-self: flex-start; }
body[data-page="admin"] .gr-terug { margin-bottom: 16px; }
body[data-page="admin"] .gr-terug svg { width: 15px; height: 15px; }
body[data-page="admin"] .gr-detail { display: grid; gap: 20px; }
body[data-page="admin"] .gr-acties { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
body[data-page="admin"] .gr-afspraken, body[data-page="admin"] .gr-ledenlijst { list-style: none; margin: 0 0 16px; padding: 0; }
body[data-page="admin"] .gr-afspraken li, body[data-page="admin"] .gr-ledenlijst li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--v-lijn); }
body[data-page="admin"] .gr-afspraken li:last-child, body[data-page="admin"] .gr-ledenlijst li:last-child { border-bottom: 0; }
body[data-page="admin"] .gr-afspraken strong, body[data-page="admin"] .gr-ledenlijst strong { font: 600 14px var(--font); color: var(--v-tekst); }
body[data-page="admin"] .gr-afspraken em, body[data-page="admin"] .gr-ledenlijst em { display: block; font: 500 12px var(--font); font-style: normal; color: var(--v-zacht); }
body[data-page="admin"] .gr-nieuw-regel { padding: 16px; border-radius: 16px; background: var(--v-diep); }
body[data-page="admin"] .gr-zoek { display: flex; gap: 10px; margin-bottom: 14px; }
body[data-page="admin"] .gr-zoek .input { flex: 1; }
body[data-page="admin"] .v-app .admin-bar.v-bar { position: static; }
body[data-page="admin"] .gr-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
body[data-page="admin"] .gr-rij [hidden] { display: none; }
@media (max-width: 760px) { body[data-page="admin"] .gr-rij { grid-template-columns: minmax(0, 1fr); } }

/* Beheer: camera-scanner (barcodes) */
body[data-page="admin"] .a-scan-veld { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
body[data-page="admin"] .a-scan-veld > .input { flex: 1; padding-right: 46px; }
body[data-page="admin"] .a-scan-knop { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 10px; border: 0; cursor: pointer; display: grid; place-items: center; background: #FFC629; color: #1A1D24; }
body[data-page="admin"] .a-scan-knop:hover { background: #FFD54F; }
body[data-page="admin"] .a-scan-knop svg, body[data-page="admin"] .v-scan-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="admin"] .v-app .v-bar .v-scan-top { cursor: pointer; }
.a-scan { position: fixed; inset: 0; z-index: 200; background: rgba(2, 5, 21, .72); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(4px); }
.a-scan-vak { width: min(460px, 100%); border-radius: 22px; padding: 16px; background: #0D1333; color: #fff; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif; }
.a-scan-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.a-scan-kop strong { font-size: 16px; }
.a-scan-kop .icon-btn { background: rgba(255, 255, 255, .08); color: #fff; border: 0; width: 34px; height: 34px; border-radius: 10px; font-size: 20px; cursor: pointer; }
.a-scan-beeld { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #000; }
.a-scan-beeld video { width: 100%; height: 100%; object-fit: cover; display: block; }
.a-scan-kader { position: absolute; left: 12%; right: 12%; top: 32%; bottom: 32%; border: 3px solid #FFC629; border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .28), 0 0 18px rgba(255, 198, 41, .6); }
.a-scan-status { margin: 12px 2px; font-size: 13.5px; color: #C7CFE2; }
.a-scan-status.is-fout { color: #FF9F9F; }
.a-scan-hand { display: flex; gap: 8px; }
.a-scan-hand .input { flex: 1; background: #0F1535; border: 1px solid rgba(226, 232, 240, .14); color: #fff; border-radius: 12px; padding: 10px 12px; font-size: 16px; }
@media (max-width: 1000px) { body[data-page="admin"] .v-bar .v-scan-top span { display: none; } }

/* ==========================================================================
   Magazijn — zelfde Vision-stijl als Beheer (okt 2026)
   Standaard donker (navy + Dubanet-geel), met de zon-knop licht. Alles hangt aan body[data-page="magazijn"].
   ========================================================================== */
body[data-page="magazijn"] {
  --m-bg: #EEF1F8; --m-kaart: #fff; --m-kaart-vol: #fff; --m-rand: rgba(20, 30, 70, .08); --m-tekst: #1B2235; --m-zacht: #6B7489;
  --m-tegel: #FFF3CC; --m-tegel-ink: #8A6100; --m-diep: #F3F5FA; --m-lijn: rgba(20, 30, 70, .09); --m-veld: #fff;
  --m-schaduw: 0 12px 32px rgba(20, 30, 70, .07); --m-nav: #fff; --m-actief: #fff; --m-staaf: #1B2235;
  --font: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Plus Jakarta Sans", Manrope, system-ui, sans-serif;
  font-family: var(--font); color: var(--m-tekst); background: var(--m-bg);
}
body[data-page="magazijn"]:not([data-thema="licht"]) {
  color-scheme: dark;
  --m-bg: #060B26; --m-kaart: linear-gradient(127deg, rgba(6, 11, 40, .94) 19%, rgba(10, 14, 35, .55) 77%); --m-kaart-vol: #0D1333;
  --m-rand: rgba(255, 255, 255, .07); --m-tekst: #fff; --m-zacht: #A0AEC0;
  --m-tegel: #1A1F37; --m-tegel-ink: #FFC629; --m-diep: linear-gradient(127deg, #060B26 28%, rgba(26, 31, 55, .5) 92%);
  --m-lijn: rgba(86, 87, 122, .4); --m-veld: #0F1535; --m-schaduw: 0 20px 50px rgba(0, 0, 0, .28);
  --m-nav: linear-gradient(111deg, rgba(6, 11, 38, .94) 60%, rgba(26, 31, 55, .55) 100%); --m-actief: #1A1F37; --m-staaf: #fff;
  --ink: #fff;
}
body[data-page="magazijn"] .mag-app { background: radial-gradient(1100px 700px at 85% 0%, rgba(80, 100, 255, .10), transparent 60%), var(--m-bg); grid-template-columns: 268px minmax(0, 1fr); }
body[data-page="magazijn"]:not([data-thema="licht"]) .mag-app, body[data-page="magazijn"]:not([data-thema="licht"]) .mag-login {
  background: radial-gradient(900px 600px at 78% 38%, rgba(0, 117, 255, .22), transparent 62%), radial-gradient(700px 500px at 30% 105%, rgba(255, 198, 41, .07), transparent 60%),
    linear-gradient(159deg, #0F123B 14%, #090D2E 56%, #020515 86%);
  background-attachment: fixed;
}
body[data-page="magazijn"] .mag-body { background: none; padding: 4px 28px 60px; }
body[data-page="magazijn"] .mag-hoofd { padding-top: 16px; }

/* zijmenu: zwevende kaart */
body[data-page="magazijn"] .mag-zij {
  margin: 16px 0 16px 16px; height: calc(100vh - 32px); top: 16px; border-radius: 20px; border: 1px solid var(--m-rand);
  background: var(--m-nav); box-shadow: var(--m-schaduw); padding: 22px 14px 16px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
}
body[data-page="magazijn"] .mag-zij::-webkit-scrollbar { display: none; }
body[data-page="magazijn"] .mag-merk { justify-content: center; gap: 12px; padding: 4px 6px 22px; margin-bottom: 14px; position: relative; color: var(--m-tekst); }
body[data-page="magazijn"] .mag-merk::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(160, 174, 192, .55), transparent); }
body[data-page="magazijn"] .mag-merk .logo-svg { width: 44px; height: auto; flex: none; filter: drop-shadow(0 0 10px rgba(255, 198, 41, .35)); }
body[data-page="magazijn"] .mag-merk strong { font: 800 15px var(--font-head); letter-spacing: .3em; color: var(--m-tekst); }
body[data-page="magazijn"] .mag-merk em { font: 700 10px var(--font); letter-spacing: .32em; text-transform: uppercase; color: #FFC629; margin-top: 4px; }
body[data-page="magazijn"] .mag-nav { gap: 3px; }
body[data-page="magazijn"] .mag-nav button { gap: 12px; padding: 8px 10px; border-radius: 15px; font: 600 14.5px var(--font); color: var(--m-tekst); }
body[data-page="magazijn"]:not([data-thema="licht"]) .mag-nav button { color: #E2E8F0; }
body[data-page="magazijn"] .mag-nav button:hover { background: rgba(127, 140, 180, .09); color: var(--m-tekst); }
body[data-page="magazijn"] .mag-nav button.is-on { background: var(--m-actief); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); color: var(--m-tekst); font-weight: 700; }
body[data-page="magazijn"] .mag-nav button.is-on::before { display: none; }
body[data-page="magazijn"] .m-tegel { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--m-tegel); color: var(--m-tegel-ink); }
body[data-page="magazijn"] .m-tegel .mag-ico { width: 16px; height: 16px; opacity: 1; color: currentColor; }
body[data-page="magazijn"] .mag-nav button.is-on .m-tegel { background: #FFC629; color: #1A1D24; box-shadow: 0 4px 14px rgba(255, 198, 41, .35); }
body[data-page="magazijn"] .mag-nav button.is-on .mag-ico { color: #1A1D24; }
body[data-page="magazijn"] .mag-zij-onder { border-top: 0; padding-top: 18px; }
body[data-page="magazijn"] .m-hulp { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 16px; border-radius: 18px; color: #fff; text-decoration: none;
  background: radial-gradient(120px 90px at 88% 8%, rgba(255, 198, 41, .55), transparent 70%), radial-gradient(160px 110px at 10% 110%, rgba(0, 117, 255, .55), transparent 70%), linear-gradient(135deg, #1B2368, #0B1035); }
body[data-page="magazijn"] .m-hulp-ico { width: 34px; height: 34px; border-radius: 11px; background: #fff; color: #1A1D24; display: grid; place-items: center; margin-bottom: 10px; }
body[data-page="magazijn"] .m-hulp-ico .mag-ico { width: 17px; height: 17px; opacity: 1; }
body[data-page="magazijn"] .m-hulp strong { font: 700 14px var(--font); }
body[data-page="magazijn"] .m-hulp em { font: 400 12px var(--font); font-style: normal; color: #D3D9E8; }
body[data-page="magazijn"] .m-hulp-knop { margin-top: 12px; text-align: center; padding: 9px 10px; border-radius: 12px; background: rgba(6, 11, 38, .7); font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; }
body[data-page="magazijn"] .m-hulp:hover .m-hulp-knop { background: #FFC629; color: #1A1D24; }

/* kop: kruimelpad, titel, knoppen */
body[data-page="magazijn"] .mag-kop { background: none; border: 0; box-shadow: none; padding: 8px 28px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: static; color: var(--m-tekst); }
body[data-page="magazijn"] .m-kruimel p { margin: 0 0 4px; font: 500 12px var(--font); color: var(--m-zacht); }
body[data-page="magazijn"] .m-kruimel p span:last-child { color: var(--m-tekst); }
body[data-page="magazijn"] .mag-kop h1 { font: 700 22px var(--font-head); color: var(--m-tekst); margin: 0; }
body[data-page="magazijn"] .mag-terug { background: var(--m-veld); border: 1px solid var(--m-rand); color: var(--m-tekst); border-radius: 13px; }
body[data-page="magazijn"] .m-kop-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 18px; background: var(--m-nav); border: 1px solid var(--m-rand); box-shadow: var(--m-schaduw); }
body[data-page="magazijn"] .m-kop-knop { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 13px; border: 1px solid var(--m-rand); background: var(--m-veld); color: var(--m-tekst); font: 600 13px var(--font); text-decoration: none; cursor: pointer; }
body[data-page="magazijn"] .m-kop-knop .mag-ico, body[data-page="magazijn"] .m-thema svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 1; }
body[data-page="magazijn"] .m-thema { width: 38px; padding: 0; justify-content: center; }
body[data-page="magazijn"] .m-thema .t-zon { display: none; }
body[data-page="magazijn"][data-thema="licht"] .m-thema .t-zon { display: block; }
body[data-page="magazijn"][data-thema="licht"] .m-thema .t-maan { display: none; }
body[data-page="magazijn"]:not([data-thema="licht"]) .m-thema .t-zon { display: block; }
body[data-page="magazijn"]:not([data-thema="licht"]) .m-thema .t-maan { display: none; }
body[data-page="magazijn"] .m-kop-rechts .mag-rond { background: linear-gradient(135deg, #FFD54F, #FFB800); color: #1A1D24; }
body[data-page="magazijn"] .m-kop-rechts .mag-wie-naam { color: var(--m-tekst); font: 600 13px var(--font); flex: none; }
body[data-page="magazijn"] .m-kop-rechts .mag-uit { color: #FFC629; font-weight: 700; }
body[data-page="magazijn"][data-thema="licht"] .m-kop-rechts .mag-uit { color: #9A6B00; }

/* algemene onderdelen in de nieuwe kleuren */
body[data-page="magazijn"] .mag-kaart, body[data-page="magazijn"] .mag-order, body[data-page="magazijn"] .mag-kpis div, body[data-page="magazijn"] .mag-loc,
body[data-page="magazijn"] .mag-artikelen li, body[data-page="magazijn"] .mag-nu, body[data-page="magazijn"] .mag-rest, body[data-page="magazijn"] .mag-card {
  background: var(--m-kaart); border: 1px solid var(--m-rand); border-radius: 20px; box-shadow: var(--m-schaduw); color: var(--m-tekst);
}
body[data-page="magazijn"] .mag-sheet-in, body[data-page="magazijn"] .mag-tekortlijst li { background: var(--m-kaart-vol); color: var(--m-tekst); }
body[data-page="magazijn"] .mag-sheet-in { border: 1px solid var(--m-rand); border-radius: 22px; }
body[data-page="magazijn"] .mag-sheet-in p, body[data-page="magazijn"] .mag-leeg p, body[data-page="magazijn"] .mag-order-cijfers, body[data-page="magazijn"] .mag-loc-n,
body[data-page="magazijn"] .mag-art-meta, body[data-page="magazijn"] .mag-kpis span, body[data-page="magazijn"] .mag-muted, body[data-page="magazijn"] .mag-uitleg,
body[data-page="magazijn"] .mag-teller-getal span, body[data-page="magazijn"] .mag-rest-aantal, body[data-page="magazijn"] .mag-daarna { color: var(--m-zacht); }
body[data-page="magazijn"] .mag-order-klant, body[data-page="magazijn"] .mag-daarna strong, body[data-page="magazijn"] .mag-nodig strong, body[data-page="magazijn"] h1, body[data-page="magazijn"] h2 { color: var(--m-tekst); }
body[data-page="magazijn"] .mag-order:hover, body[data-page="magazijn"] .mag-loc:hover { border-color: rgba(255, 198, 41, .45); }
body[data-page="magazijn"] .mag-order.is-oud { border-color: rgba(255, 159, 67, .55); }
body[data-page="magazijn"] .mag-rest li { border-top-color: var(--m-lijn); }
body[data-page="magazijn"] .mag-rest li.is-nu { background: rgba(255, 198, 41, .1); }
body[data-page="magazijn"] .mag-nu-loc { background: linear-gradient(127deg, #0A1140 18%, #121A5A 100%); color: #fff; }
body[data-page="magazijn"] .mag-nu-loc strong { color: #FFC629; }
body[data-page="magazijn"] .mag-input { background: var(--m-veld); border: 1px solid var(--m-rand); color: var(--m-tekst); border-radius: 14px; }
body[data-page="magazijn"] .mag-input::placeholder { color: var(--m-zacht); }
body[data-page="magazijn"] .mag-knop { background: #FFC629; color: #1A1D24; border-radius: 14px; font-family: var(--font); }
body[data-page="magazijn"] .mag-knop.grijs { background: var(--m-veld); color: var(--m-tekst); border: 1px solid var(--m-rand); }
body[data-page="magazijn"] .mag-knop.camera { background: linear-gradient(135deg, #1B2368, #0B1035); color: #fff; }
body[data-page="magazijn"] .mag-knop.groen { background: #01B574; color: #fff; }
body[data-page="magazijn"] .mag-teller-knop { background: var(--m-veld); border-color: var(--m-rand); color: var(--m-tekst); }
body[data-page="magazijn"] .mag-code, body[data-page="magazijn"] .mag-plan-kaart, body[data-page="magazijn"] .mag-kaartsheet-kaart, body[data-page="magazijn"] .mag-mini-kaart { background: var(--m-diep); color: var(--m-tekst); }
body[data-page="magazijn"]:not([data-thema="licht"]) .mag-plan-kaart, body[data-page="magazijn"]:not([data-thema="licht"]) .mag-kaartsheet-kaart, body[data-page="magazijn"]:not([data-thema="licht"]) .mag-mini-kaart { background: #EEF1F8; }
body[data-page="magazijn"] .mag-voortgang { background: var(--m-lijn); }
body[data-page="magazijn"] .mag-afsluit { background: linear-gradient(to top, rgba(6, 11, 38, .95) 70%, transparent); }
body[data-page="magazijn"][data-thema="licht"] .mag-afsluit { background: linear-gradient(to top, #EEF1F8 70%, transparent); }
body[data-page="magazijn"]:not([data-thema="licht"]) .mag-pil.groen { background: rgba(1, 181, 116, .16); color: #4ADE9B; }
body[data-page="magazijn"]:not([data-thema="licht"]) .mag-pil.grijs, body[data-page="magazijn"]:not([data-thema="licht"]) .mag-ouderdom { background: rgba(255, 255, 255, .08); color: #CBD5E0; }
body[data-page="magazijn"]:not([data-thema="licht"]) .mag-pil.blauw { background: rgba(76, 141, 255, .16); color: #93B8FF; }
body[data-page="magazijn"]:not([data-thema="licht"]) .mag-pil.oranje, body[data-page="magazijn"]:not([data-thema="licht"]) .mag-ouderdom.is-oud { background: rgba(255, 159, 67, .16); color: #FFC07A; }
body[data-page="magazijn"]:not([data-thema="licht"]) .mag-voort, body[data-page="magazijn"]:not([data-thema="licht"]) .mag-order-bezet, body[data-page="magazijn"]:not([data-thema="licht"]) .mag-order-wacht,
body[data-page="magazijn"]:not([data-thema="licht"]) .mag-kpis .let strong, body[data-page="magazijn"]:not([data-thema="licht"]) .mag-loc-let, body[data-page="magazijn"]:not([data-thema="licht"]) .mag-tekortlijst .mag-rest-aantal { color: #FFC629; }
body[data-page="magazijn"]:not([data-thema="licht"]) .mag-notice.is-fout { background: rgba(248, 113, 113, .1); color: #FCA5A5; border-color: rgba(248, 113, 113, .25); }
body[data-page="magazijn"]:not([data-thema="licht"]) .mag-notice.is-wacht { background: rgba(255, 198, 41, .08); color: #FFD45E; border-color: rgba(255, 198, 41, .22); }
body[data-page="magazijn"]:not([data-thema="licht"]) .mag-notice.is-ok { background: rgba(1, 181, 116, .1); color: #86EFAC; border-color: rgba(1, 181, 116, .25); }
body[data-page="magazijn"]:not([data-thema="licht"]) .mag-link { color: #FFC629; }
body[data-page="magazijn"]:not([data-thema="licht"]) .mag-leeg-ico, body[data-page="magazijn"]:not([data-thema="licht"]) .mag-art-meta .groen { color: #4ADE9B; }
body[data-page="magazijn"] .mag-toast { border-radius: 14px; }
body[data-page="magazijn"] .mag-login .mag-card { padding: 30px; }
body[data-page="magazijn"] .mag-card .mag-merk { justify-content: flex-start; }
body[data-page="magazijn"] .mag-card .mag-merk::after { display: none; }

/* Start-scherm */
body[data-page="magazijn"] .m-dash { display: grid; gap: 22px; }
body[data-page="magazijn"] .m-rij { display: grid; gap: 22px; }
body[data-page="magazijn"] .m-rij-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-page="magazijn"] .m-rij-2 { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
body[data-page="magazijn"] .m-rij-3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr); }
body[data-page="magazijn"] .m-kaart, body[data-page="magazijn"] .m-mini, body[data-page="magazijn"] .m-actie {
  position: relative; overflow: hidden; min-width: 0; border-radius: 20px; padding: 22px 24px; text-align: left; font: inherit;
  background: var(--m-kaart); border: 1px solid var(--m-rand); box-shadow: var(--m-schaduw); color: var(--m-tekst);
  backdrop-filter: blur(60px); -webkit-backdrop-filter: blur(60px);
}
body[data-page="magazijn"] button.m-kaart, body[data-page="magazijn"] .m-mini, body[data-page="magazijn"] .m-actie { cursor: pointer; width: 100%; transition: border-color .2s, transform .2s; }
body[data-page="magazijn"] button.m-kaart:hover, body[data-page="magazijn"] .m-mini:hover, body[data-page="magazijn"] .m-actie:hover { border-color: rgba(255, 198, 41, .45); transform: translateY(-1px); }
body[data-page="magazijn"] .m-zacht { color: var(--m-zacht); margin: 0; }
body[data-page="magazijn"] .m-kop { display: flex; flex-direction: column; gap: 3px; margin: 0 0 16px; }
body[data-page="magazijn"] .m-kop strong { font: 700 17px var(--font-head); color: var(--m-tekst); }
body[data-page="magazijn"] .m-kop em { font: 500 13.5px var(--font); font-style: normal; color: var(--m-zacht); }
body[data-page="magazijn"] .m-kop-rij { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 12px; }
body[data-page="magazijn"] .m-kop-rij > span { display: flex; flex-direction: column; gap: 3px; }
body[data-page="magazijn"] .m-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; font: 700 13px var(--font); color: var(--m-tekst); padding: 0; }
body[data-page="magazijn"] .m-link:hover { color: #FFC629; }
body[data-page="magazijn"] .m-link svg, body[data-page="magazijn"] .m-start-knop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="magazijn"] .m-tegel-groot { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; background: #FFC629; color: #1A1D24; box-shadow: 0 6px 18px rgba(255, 198, 41, .3); }
body[data-page="magazijn"] .m-tegel-groot svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="magazijn"] .m-mini { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 16px 22px; }
body[data-page="magazijn"] .m-mini-t { display: flex; flex-direction: column; gap: 3px; }
body[data-page="magazijn"] .m-mini-t em { font: 500 13px var(--font); font-style: normal; color: var(--m-zacht); }
body[data-page="magazijn"] .m-mini-t strong { font: 700 24px var(--font-head); color: var(--m-tekst); }
body[data-page="magazijn"] .m-mini-t small { font: 600 12.5px var(--font); color: var(--m-zacht); }
body[data-page="magazijn"] .m-mini.is-let .m-tegel-groot { background: #FF9F43; box-shadow: 0 6px 18px rgba(255, 159, 67, .35); }
body[data-page="magazijn"] .m-mini.is-let small { color: #FF9F43; }
body[data-page="magazijn"] .m-welkom {
  min-height: 290px; display: flex; color: #fff; border-color: rgba(255, 255, 255, .06);
  background: radial-gradient(260px 220px at 74% 52%, rgba(255, 198, 41, .42), transparent 70%), radial-gradient(380px 260px at 96% 104%, rgba(0, 117, 255, .55), transparent 70%),
    radial-gradient(300px 200px at 40% -20%, rgba(70, 90, 255, .35), transparent 70%), linear-gradient(127deg, #0A1140 18%, #121A5A 100%);
}
body[data-page="magazijn"] .m-welkom-t { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; max-width: 58%; }
body[data-page="magazijn"] .m-welkom-t h2 { font: 700 34px var(--font-head); color: #fff; margin: 0 0 4px; }
body[data-page="magazijn"] .m-welkom .m-zacht { color: #C7CFE2; font-size: 15.5px; line-height: 1.55; }
body[data-page="magazijn"] .m-welkom .m-zacht strong { color: #FFC629; }
body[data-page="magazijn"] .m-start-knop { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 16px 22px; font-size: 17px; box-shadow: 0 10px 28px rgba(255, 198, 41, .35); }
body[data-page="magazijn"] .m-welkom-beeld { position: absolute; right: 2%; top: 50%; transform: translateY(-50%); width: 44%; aspect-ratio: 1; display: grid; place-items: center; pointer-events: none; }
body[data-page="magazijn"] .m-welkom-beeld .logo-svg { width: 76%; max-width: 240px; height: auto; position: relative; filter: drop-shadow(0 0 18px rgba(255, 198, 41, .65)) drop-shadow(0 0 48px rgba(255, 184, 0, .35)); transform: rotate(-8deg); }
body[data-page="magazijn"] .m-gloed { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 90, .55), rgba(255, 198, 41, 0) 70%); filter: blur(22px); }
body[data-page="magazijn"] .m-meter { display: flex; flex-direction: column; align-items: center; }
body[data-page="magazijn"] .m-meter .m-kop { align-self: stretch; }
body[data-page="magazijn"] .m-meter-boog { position: relative; width: 170px; height: 160px; }
body[data-page="magazijn"] .m-meter-boog svg { width: 170px; height: 170px; }
body[data-page="magazijn"] .m-meter-bg, body[data-page="magazijn"] .m-meter-vol { fill: none; stroke-width: 12; stroke-linecap: round; }
body[data-page="magazijn"] .m-meter-bg { stroke: rgba(160, 174, 192, .16); }
body[data-page="magazijn"] .m-meter-vol { stroke: #FFC629; filter: drop-shadow(0 0 8px rgba(255, 198, 41, .55)); }
body[data-page="magazijn"] .m-meter-mid { position: absolute; inset: 0 0 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
body[data-page="magazijn"] .m-meter-mid strong { font: 700 34px var(--font-head); color: var(--m-tekst); line-height: 1; }
body[data-page="magazijn"] .m-meter-mid em { font: 500 12.5px var(--font); font-style: normal; color: var(--m-zacht); }
body[data-page="magazijn"] .m-meter-cijfers { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; border-radius: 16px; background: var(--m-diep); }
body[data-page="magazijn"] .m-meter-cijfers span { display: flex; flex-direction: column; align-items: center; }
body[data-page="magazijn"] .m-meter-cijfers b { font: 700 18px var(--font-head); color: var(--m-tekst); }
body[data-page="magazijn"] .m-meter-cijfers em { font: 500 11.5px var(--font); font-style: normal; color: var(--m-zacht); }
body[data-page="magazijn"] .m-acties { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
body[data-page="magazijn"] .m-actie { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; }
body[data-page="magazijn"] .m-actie .m-tegel-groot { margin-bottom: 8px; }
body[data-page="magazijn"] .m-actie strong { font: 700 15.5px var(--font-head); color: var(--m-tekst); }
body[data-page="magazijn"] .m-actie em { font: 500 12.5px var(--font); font-style: normal; color: var(--m-zacht); }
body[data-page="magazijn"] .m-tijdlijn { list-style: none; margin: 0; padding: 0; }
body[data-page="magazijn"] .m-tijdlijn li { position: relative; }
body[data-page="magazijn"] .m-tijdlijn li::before { content: ""; position: absolute; left: 15.5px; top: 38px; bottom: -4px; width: 1px; background: var(--m-lijn); }
body[data-page="magazijn"] .m-tijdlijn li:last-child::before { display: none; }
body[data-page="magazijn"] .m-tijdlijn button { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; width: 100%; text-align: left; background: none; border: 0; padding: 6px 0 12px; cursor: pointer; font: inherit; color: var(--m-tekst); border-radius: 12px; }
body[data-page="magazijn"] .m-tijdlijn button:hover strong { color: #FFC629; }
body[data-page="magazijn"] .m-tl-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #FFC629; background: rgba(255, 198, 41, .15); }
body[data-page="magazijn"] .m-tijdlijn li.is-oud .m-tl-ico { color: #FF9F43; background: rgba(255, 159, 67, .16); }
body[data-page="magazijn"] .m-tl-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="magazijn"] .m-tl-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body[data-page="magazijn"] .m-tl-t strong { font: 700 15px var(--font); }
body[data-page="magazijn"] .m-tl-t small { font: 500 12.5px var(--font); color: var(--m-zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-page="magazijn"] .m-staven { display: flex; align-items: flex-end; gap: 10px; height: 200px; padding: 16px 14px 10px; border-radius: 18px; background: var(--m-diep); }
body[data-page="magazijn"] .m-staaf { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
body[data-page="magazijn"] .m-staaf b { font: 700 12px var(--font); color: var(--m-tekst); }
body[data-page="magazijn"] .m-staaf i { width: 8px; border-radius: 99px; background: var(--m-staaf); }
body[data-page="magazijn"] .m-staaf.is-nu i { background: #FFC629; box-shadow: 0 0 12px rgba(255, 198, 41, .7); }
body[data-page="magazijn"] .m-staaf em { font: 600 11px var(--font); font-style: normal; color: var(--m-zacht); text-transform: capitalize; }
body[data-page="magazijn"] .m-tekort { list-style: none; margin: 0; padding: 0; }
body[data-page="magazijn"] .m-tekort li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--m-lijn); }
body[data-page="magazijn"] .m-tekort li:last-child { border-bottom: 0; }
body[data-page="magazijn"] .m-tekort b { font: 800 17px var(--font-head); color: #FF6B6B; text-align: center; padding: 6px 0; border-radius: 12px; background: rgba(255, 91, 91, .12); }
body[data-page="magazijn"] .m-tekort strong { display: block; font: 600 14px var(--font); color: var(--m-tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-page="magazijn"] .m-tekort small { font: 500 12px var(--font); color: var(--m-zacht); }
body[data-page="magazijn"] .m-klaar { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0; text-align: center; }
body[data-page="magazijn"] .m-klaar .m-tegel-groot { background: #01B574; color: #fff; box-shadow: 0 6px 18px rgba(1, 181, 116, .35); }

@media (max-width: 1300px) {
  body[data-page="magazijn"] .m-acties { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-page="magazijn"] .m-rij-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body[data-page="magazijn"] .m-rij-3 > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 1100px) { body[data-page="magazijn"] .m-rij-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } body[data-page="magazijn"] .m-rij-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  body[data-page="magazijn"] .mag-app { grid-template-columns: minmax(0, 1fr); }
  body[data-page="magazijn"] .mag-zij { margin: 0; height: auto; top: auto; border-radius: 22px 22px 0 0; inset: auto 0 0 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); overflow: visible; }
  body[data-page="magazijn"]:not([data-thema="licht"]) .mag-zij { background: linear-gradient(111deg, #070C2A 60%, #141A3D 100%); }
  body[data-page="magazijn"] .mag-nav button { flex-direction: column; gap: 4px; padding: 6px 4px; font-size: 11px; min-width: 62px; }
  body[data-page="magazijn"] .mag-nav button.is-on { box-shadow: none; background: none; }
  body[data-page="magazijn"] .mag-nav .m-tegel { width: 30px; height: 30px; }
  body[data-page="magazijn"] .mag-kop { padding: 6px 16px 16px; }
  body[data-page="magazijn"] .m-kop-rechts { width: 100%; justify-content: flex-end; margin-left: 0; }
  body[data-page="magazijn"] .m-kop-rechts .mag-wie-naam, body[data-page="magazijn"] .m-kop-knop span { display: none; }
  body[data-page="magazijn"] .mag-body { padding: 0 16px 110px; }
  body[data-page="magazijn"] .m-acties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="magazijn"] .m-rij-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  body[data-page="magazijn"] .m-rij-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body[data-page="magazijn"] .m-mini { flex-direction: column-reverse; align-items: flex-start; padding: 16px; }
  body[data-page="magazijn"] .m-welkom-t { max-width: 72%; }
  body[data-page="magazijn"] .m-welkom-t h2 { font-size: 28px; }
  body[data-page="magazijn"] .m-welkom-beeld { width: 40%; right: -8%; top: 30%; opacity: .55; }
  body[data-page="magazijn"] .m-kaart { padding: 18px; }
}
/* Magazijn — overige vlakken in de nieuwe kleuren */
body[data-page="magazijn"] .mag-tabel-rij { background: var(--m-diep); border: 1px solid var(--m-rand); color: var(--m-tekst); border-radius: 14px; }
body[data-page="magazijn"] .mag-kaart .mag-tabel-rij { background: var(--m-diep); border: 0; }
body[data-page="magazijn"] .mag-tabel-rij > span em, body[data-page="magazijn"] .mag-veld { color: var(--m-zacht); }
body[data-page="magazijn"]:not([data-thema="licht"]) .mag-tabel-rij > strong.rood { color: #FF6B6B; }
body[data-page="magazijn"]:not([data-thema="licht"]) .mag-tel-ok { color: #4ADE9B; }
body[data-page="magazijn"] .mag-daarna { background: var(--m-diep); border-color: var(--m-rand); }
body[data-page="magazijn"] .mag-teller { background: var(--m-diep); }
body[data-page="magazijn"] .mag-teller-getal strong, body[data-page="magazijn"] .mag-teller-getal input { color: var(--m-tekst); background: transparent; }
body[data-page="magazijn"] .mag-kaart { padding: 6px 20px 20px; }
body[data-page="magazijn"] .mag-h2 { color: var(--m-tekst); font-family: var(--font-head); }
body[data-page="magazijn"] .mag-staaf b, body[data-page="magazijn"] .mag-staaf span { color: var(--m-zacht); }
body[data-page="magazijn"] .mag-dagkop strong { color: var(--m-tekst); }
body[data-page="magazijn"] .mag-nav { flex-wrap: nowrap; }
@media (max-width: 860px) { body[data-page="magazijn"] .mag-zij .mag-nav { display: flex; overflow-x: auto; } }
@media (max-width: 860px) { body[data-page="magazijn"] .mag-zij .mag-nav button { width: auto; flex: 1 0 auto; min-width: 62px; } }
body[data-page="magazijn"] .mag-teller input, body[data-page="magazijn"] .mag-teller .mag-input { background: var(--m-veld); color: var(--m-tekst); border-color: var(--m-rand); }
/* Beheer is één doorlopende pagina: geen lege strook onder de inhoud, en dezelfde achtergrond tot onderaan. */
body[data-page="admin"] #admin-root.page { padding: 0; margin: 0; min-height: 100vh; }
body[data-page="admin"] .v-app { min-height: 100vh; }
html:has(body[data-page="admin"]:not([data-thema="licht"])), html:has(body[data-page="magazijn"]:not([data-thema="licht"])) { background: #050920; }
html:has(body[data-page="admin"][data-thema="licht"]), html:has(body[data-page="magazijn"][data-thema="licht"]) { background: #EEF1F8; }
body[data-page="admin"] .v-voet { padding-bottom: 6px; }
/* Magazijn: rek-etiketten kiezen */
body[data-page="magazijn"] .m-et-nieuw { margin-bottom: 16px; }
body[data-page="magazijn"] .m-et-nieuw .mag-zoekrij { margin: 0; }
body[data-page="magazijn"] .m-et-balk { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
body[data-page="magazijn"] .m-et-balk #etq { flex: 1; min-width: 200px; }
body[data-page="magazijn"] .m-et-balk select.mag-input { width: auto; }
body[data-page="magazijn"] .m-et-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
body[data-page="magazijn"] .m-et { display: grid; grid-template-columns: 22px 1fr; gap: 2px 10px; align-items: center; padding: 12px 14px; border-radius: 16px; cursor: pointer;
  background: var(--m-kaart); border: 1px solid var(--m-rand); color: var(--m-tekst); }
body[data-page="magazijn"] .m-et input { grid-row: span 2; width: 20px; height: 20px; accent-color: #FFC629; }
body[data-page="magazijn"] .m-et strong { font: 800 17px var(--font-head); font-family: var(--font-head); letter-spacing: .02em; }
body[data-page="magazijn"] .m-et em { font: 500 12px var(--font); font-style: normal; color: var(--m-zacht); }
body[data-page="magazijn"] .m-et.is-aan { border-color: #FFC629; box-shadow: 0 0 0 1px rgba(255, 198, 41, .4), var(--m-schaduw); }
/* Magazijn: samen tellen per letter */
body[data-page="magazijn"] .m-tel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
body[data-page="magazijn"] .m-tel { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px; background: var(--m-kaart); border: 1px solid var(--m-rand); box-shadow: var(--m-schaduw); color: var(--m-tekst); }
body[data-page="magazijn"] .m-tel.is-mijn { border-color: #FFC629; box-shadow: 0 0 0 1px rgba(255, 198, 41, .4), var(--m-schaduw); }
body[data-page="magazijn"] .m-tel.is-bezet { opacity: .85; }
body[data-page="magazijn"] .m-tel-kop { display: flex; align-items: center; gap: 14px; }
body[data-page="magazijn"] .m-tel-letter { width: 52px; height: 52px; flex: none; border-radius: 15px; display: grid; place-items: center; font: 800 26px var(--font-head); background: #FFC629; color: #1A1D24; box-shadow: 0 6px 18px rgba(255, 198, 41, .3); }
body[data-page="magazijn"] .m-tel.is-bezet .m-tel-letter { background: var(--m-tegel); color: var(--m-tegel-ink); box-shadow: none; }
body[data-page="magazijn"] .m-tel-kop strong { display: block; font: 700 16px var(--font-head); }
body[data-page="magazijn"] .m-tel-kop em { font: 500 12.5px var(--font); font-style: normal; color: var(--m-zacht); }
body[data-page="magazijn"] .m-tel-voort { display: flex; flex-direction: column; gap: 6px; }
body[data-page="magazijn"] .m-tel-voort em { font: 500 12px var(--font); font-style: normal; color: var(--m-zacht); }
body[data-page="magazijn"] .m-balk { display: block; height: 6px; border-radius: 99px; background: var(--m-lijn); overflow: hidden; }
body[data-page="magazijn"] .m-balk i { display: block; height: 100%; border-radius: 99px; background: #FFC629; }
body[data-page="magazijn"] .m-tel-wie { display: flex; align-items: center; gap: 10px; font: 500 13px var(--font); color: var(--m-zacht); }
body[data-page="magazijn"] .m-tel-wie strong { color: var(--m-tekst); }
body[data-page="magazijn"] .m-tel-wie.is-ik { color: #FFC629; font-weight: 700; }
body[data-page="magazijn"] .m-tel-wie .mag-rond { width: 30px; height: 30px; font-size: 11px; flex: none; }
body[data-page="magazijn"] .m-tel .mag-knop { width: 100%; padding: 13px; }
body[data-page="magazijn"] .m-tel-mijn { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 16px; border-radius: 18px; border: 1px solid #FFC629;
  background: linear-gradient(127deg, rgba(255, 198, 41, .16), rgba(255, 198, 41, .04)); color: var(--m-tekst); }
body[data-page="magazijn"] .m-tel-mijn > div { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
body[data-page="magazijn"] .m-tel-mijn strong { font: 700 17px var(--font-head); }
body[data-page="magazijn"] .m-tel-mijn em { font: 500 13px var(--font); font-style: normal; color: var(--m-zacht); }
body[data-page="magazijn"] .m-tel-mijn .m-balk { margin-top: 6px; }
body[data-page="magazijn"] .m-tel-nu { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; font: 500 13px var(--font); color: var(--m-zacht); }
body[data-page="magazijn"] .m-tel-nu span { padding: 5px 11px; border-radius: 99px; background: var(--m-tegel); color: var(--m-tekst); }
body[data-page="magazijn"] .m-tel-nu b { color: #FFC629; }
body[data-page="magazijn"] .mag-loc .m-balk { margin: 6px 0 2px; height: 4px; }
body[data-page="magazijn"] .mag-loc.is-klaar { opacity: .65; }
body[data-page="magazijn"] .m-vink { color: #01B574; }
/* Magazijn: meldingen onderaan (in donker was --ink wit, dus wit op wit) */
body[data-page="magazijn"] .mag-toast { background: #1A1F37; color: #fff; border: 1px solid rgba(255, 198, 41, .45); box-shadow: 0 18px 48px rgba(0, 0, 0, .45); font-family: var(--font); }
body[data-page="magazijn"][data-thema="licht"] .mag-toast { background: #1B2235; border-color: transparent; }
body[data-page="magazijn"] .mag-toast.is-fout { background: #7F1D1D; border-color: rgba(248, 113, 113, .5); }
@media (max-width: 860px) { body[data-page="magazijn"] .mag-toast { bottom: calc(96px + env(safe-area-inset-bottom)); } }
/* Magazijn: scherm van een plek (na het scannen van een rek-sticker) */
body[data-page="magazijn"] .m-plek-held { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 24px 26px; margin-bottom: 18px; border-radius: 22px; color: #fff;
  background: radial-gradient(260px 200px at 85% 30%, rgba(255, 198, 41, .35), transparent 70%), radial-gradient(380px 260px at 100% 110%, rgba(0, 117, 255, .5), transparent 70%), linear-gradient(127deg, #0A1140 18%, #121A5A 100%);
  box-shadow: var(--m-schaduw); }
body[data-page="magazijn"] .m-plek-t { display: flex; flex-direction: column; gap: 4px; }
body[data-page="magazijn"] .m-plek-lab { font: 800 11px var(--font); letter-spacing: .16em; text-transform: uppercase; color: #1A1D24; background: #FFC629; align-self: flex-start; padding: 4px 9px; border-radius: 8px; }
body[data-page="magazijn"] .m-plek-code { font: 800 56px/1 var(--font-head); color: #FFC629; letter-spacing: .01em; text-shadow: 0 0 24px rgba(255, 198, 41, .35); margin-top: 6px; }
body[data-page="magazijn"] .m-plek-sub { font: 500 15px var(--font); color: #C7CFE2; }
body[data-page="magazijn"] .m-plek-knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
body[data-page="magazijn"] .m-plek-knoppen .mag-knop { display: inline-flex; align-items: center; gap: 8px; padding: 14px 18px; }
body[data-page="magazijn"] .m-plek-knoppen .mag-knop.grijs { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .15); }
body[data-page="magazijn"] .m-plek-knoppen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="magazijn"] .m-plek-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
body[data-page="magazijn"] .m-plek-lijst li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 18px;
  background: var(--m-kaart); border: 1px solid var(--m-rand); box-shadow: var(--m-schaduw); color: var(--m-tekst); }
body[data-page="magazijn"] .m-plek-foto { width: 56px; height: 56px; border-radius: 14px; background: #fff; display: grid; place-items: center; overflow: hidden; color: #8A93A8; }
body[data-page="magazijn"] .m-plek-foto img { width: 100%; height: 100%; object-fit: contain; }
body[data-page="magazijn"] .m-plek-foto svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body[data-page="magazijn"] .m-plek-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body[data-page="magazijn"] .m-plek-info strong { font: 700 15.5px var(--font); }
body[data-page="magazijn"] .m-plek-info small { font: 500 12.5px var(--font); color: var(--m-zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-page="magazijn"] .m-plek-pillen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
body[data-page="magazijn"] .m-plek-aantal { display: flex; flex-direction: column; align-items: flex-end; }
body[data-page="magazijn"] .m-plek-aantal b { font: 800 26px/1 var(--font-head); }
body[data-page="magazijn"] .m-plek-aantal em { font: 500 11.5px var(--font); font-style: normal; color: var(--m-zacht); }
@media (max-width: 560px) { body[data-page="magazijn"] .m-plek-code { font-size: 44px; } body[data-page="magazijn"] .m-plek-knoppen, body[data-page="magazijn"] .m-plek-knoppen .mag-knop { width: 100%; justify-content: center; } }

/* ==========================================================================
   Site-editor: opmaak per blok op de winkel (config.opmaak) en het voorbeeld
   ========================================================================== */
.blk.o-ruimte-geen > section { padding-top: 0; padding-bottom: 0; }
.blk.o-ruimte-klein > section { padding-top: 16px; padding-bottom: 16px; }
.blk.o-ruimte-groot > section { padding-top: 88px; padding-bottom: 88px; }
.blk.o-achtergrond-grijs { background: var(--bg-soft); }
.blk.o-achtergrond-geel { background: var(--yellow-50); }
.blk.o-achtergrond-wit { background: var(--bg); }
.blk.o-achtergrond-donker { background: #1F232A; color: #fff; }
.blk.o-achtergrond-donker .section-head h2, .blk.o-achtergrond-donker > section > .container > h2 { color: #fff; }
.blk.o-achtergrond-donker .section-sub { color: rgba(255,255,255,.72); }
.blk.o-breedte-smal .container { max-width: 880px; }
.blk.o-breedte-breed .container { max-width: 1640px; }
.blk.o-uitlijning-midden .section-head { flex-direction: column; align-items: center; text-align: center; }
.blk.o-uitlijning-midden .site-text { text-align: center; }
@media (max-width: 767px) { .blk.o-scherm-computer { display: none; } }
@media (min-width: 768px) { .blk.o-scherm-gsm { display: none; } }
.product-grid.is-schuif { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 54px) / 4);
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.product-grid.is-schuif > * { scroll-snap-align: start; }
@media (max-width: 1000px) { .product-grid.is-schuif { grid-auto-columns: 42%; } }
@media (max-width: 600px) { .product-grid.is-schuif { grid-auto-columns: 72%; } }

.is-voorbeeld .blk { position: relative; cursor: pointer; transition: outline-color .15s; outline: 2px dashed transparent; outline-offset: -2px; }
.is-voorbeeld .blk:hover { outline-color: rgba(255,198,41,.85); }
.is-voorbeeld .blk.is-gekozen { outline: 3px solid #FFC629; outline-offset: -3px; }
.is-voorbeeld .blk.is-verborgen { opacity: .5; }
.is-voorbeeld .blk.is-verborgen::before { content: 'Verborgen'; position: absolute; top: 10px; right: 10px; z-index: 5;
  background: #1F232A; color: #fff; font: 600 12px/1 var(--font); padding: 6px 9px; border-radius: 999px; }
.vb-leeg { margin: 18px 0; padding: 22px; border: 2px dashed var(--line); border-radius: 12px; text-align: center; color: var(--muted); }
.vb-wacht { padding: 60px 0; text-align: center; color: var(--muted); }

/* ==========================================================================
   Site-editor (editor.html) — zelfde Vision-stijl als Beheer en Magazijn.
   Drie kolommen: pagina's | blokken of het gekozen blok | de winkel als voorbeeld.
   ========================================================================== */
body[data-editor] .v-app.ed-app { grid-template-columns: 252px 410px minmax(0, 1fr); height: 100vh; min-height: 0; overflow: hidden; }
body[data-editor] .ed-nav { gap: 2px; }
body[data-editor] .ed-paginas { display: flex; flex-direction: column; gap: 1px; }
body[data-editor] .ed-paginas .ed-pnaam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-editor] .ed-stip { width: 8px; height: 8px; border-radius: 50%; background: #718096; flex: none; }
body[data-editor] .ed-stip.is-aan { background: #01B574; box-shadow: 0 0 0 3px rgba(1, 181, 116, .18); }
body[data-editor] .ed-nieuw { display: flex; align-items: center; gap: 10px; margin: 8px 2px 4px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--v-lijn); background: none; color: var(--v-tekst); font: 700 13px var(--font); cursor: pointer; }
body[data-editor] .ed-nieuw:hover { border-color: #FFC629; color: #FFC629; }
body[data-editor] .ed-links { display: flex; flex-direction: column; gap: 1px; }
body[data-editor] .ed-links a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; color: var(--v-zacht); text-decoration: none; font: 600 13px var(--font); }
body[data-editor] .ed-links a:hover { color: var(--v-tekst); background: rgba(127, 140, 180, .09); }
body[data-editor] .ed-ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
body[data-editor] .ed-ico-in { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; vertical-align: -2px; }
body[data-editor] .v-tegel .ed-ico, body[data-editor] .v-tegel .block-ico { width: 15px; height: 15px; }
body[data-editor] .v-tegel-groot .block-ico, body[data-editor] .v-tegel-groot .ed-ico { width: 22px; height: 22px; }

/* --- middelste kolom --- */
body[data-editor] .ed-paneel { margin: 16px 0 16px 16px; border-radius: 20px; background: var(--v-kaart); border: 1px solid var(--v-rand); box-shadow: var(--v-schaduw);
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); color: var(--v-tekst); display: flex; flex-direction: column; min-height: 0; overflow: auto; scrollbar-width: thin; padding: 20px 18px 0; }
body[data-editor] .ed-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
body[data-editor] .ed-kop h2 { font: 700 20px var(--font-head); margin: 2px 0 6px; color: var(--v-tekst); }
body[data-editor] .ed-over { margin: 0; font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--v-zacht); }
body[data-editor] .ed-kop-acties { display: flex; gap: 6px; }
body[data-editor] .ed-uitleg, body[data-editor] .ed-tabuitleg { margin: 0 0 14px; font: 500 12.5px/1.5 var(--font); color: var(--v-zacht); }
body[data-editor] .ed-rond { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--v-rand); background: var(--v-veld); color: var(--v-tekst); cursor: pointer; font-size: 20px; line-height: 1; }
body[data-editor] .ed-rond:hover { border-color: #FFC629; color: #FFC629; }
body[data-editor] .ed-terug { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 8px; border-radius: 12px; border: 1px solid var(--v-rand); background: var(--v-veld); color: var(--v-tekst); font: 700 13px var(--font); cursor: pointer; }
body[data-editor] .ed-terug:hover { border-color: #FFC629; }
body[data-editor] .ed-pil { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 700 10.5px/1.6 var(--font); background: rgba(160, 174, 192, .16); color: var(--v-zacht); }
body[data-editor] .ed-pil.is-wacht { background: rgba(255, 198, 41, .16); color: #E0A800; }
body[data-editor] .ed-pil.is-klad { background: rgba(0, 117, 255, .16); color: #4D9DFF; }

body[data-editor] .ed-lagen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body[data-editor] .ed-laag { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 15px; border: 1px solid var(--v-rand); background: var(--v-veld); transition: border-color .15s, box-shadow .15s; }
body[data-editor] .ed-laag:hover { border-color: rgba(255, 198, 41, .45); }
body[data-editor] .ed-laag.is-sel { border-color: #FFC629; box-shadow: 0 0 0 3px rgba(255, 198, 41, .18); }
body[data-editor] .ed-laag.is-uit .ed-laag-hoofd { opacity: .55; }
body[data-editor] .ed-laag.is-sleep { position: fixed; z-index: 90; pointer-events: none; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); border-color: #FFC629; }
body[data-editor] .ed-plek { list-style: none; border-radius: 15px; border: 2px dashed rgba(255, 198, 41, .6); background: rgba(255, 198, 41, .06); }
body[data-editor] .ed-greep { width: 26px; height: 40px; flex: none; display: grid; place-items: center; border: 0; background: none; color: var(--v-zacht); cursor: grab; border-radius: 9px; touch-action: none; }
body[data-editor] .ed-greep:active { cursor: grabbing; }
body[data-editor] .ed-greep .ed-ico { stroke-width: 3.2; }
body[data-editor] .ed-greep:hover, body[data-editor] .ed-greep:focus-visible { color: #FFC629; background: rgba(255, 198, 41, .08); }
body[data-editor] .ed-laag-hoofd { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--v-tekst); text-align: left; cursor: pointer; padding: 4px 2px; font: inherit; }
body[data-editor] .ed-laag-t { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
body[data-editor] .ed-laag-t strong { font: 700 13.5px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-editor] .ed-laag-t em { font: 500 11.5px var(--font); font-style: normal; color: var(--v-zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-editor] .ed-pillen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
body[data-editor] .ed-laag-acties { display: flex; gap: 2px; flex: none; }
body[data-editor] .ed-laag-acties button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: var(--v-zacht); cursor: pointer; }
body[data-editor] .ed-laag-acties button:hover { color: var(--v-tekst); background: rgba(127, 140, 180, .14); }
body[data-editor] .ed-laag-acties [data-weg]:hover { color: #FF6B6B; }
body[data-editor] .ed-laag-acties .ed-ico { width: 16px; height: 16px; }
body[data-editor] .ed-leeg { padding: 26px 18px; border: 2px dashed var(--v-lijn); border-radius: 16px; text-align: center; }
body[data-editor] .ed-leeg p { color: var(--v-zacht); margin: 6px 0 0; font-size: 13px; }
body[data-editor] .ed-toevoegen { position: sticky; bottom: 14px; z-index: 2; flex: none; margin: 14px 0; width: 100%; padding: 13px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 14px; background: #FFC629; color: #1A1D24; font: 700 14px var(--font); cursor: pointer; box-shadow: 0 10px 26px rgba(255, 198, 41, .28), 0 0 0 6px var(--v-bg); }
body[data-editor] .ed-toevoegen:hover { background: #FFD54F; }

/* het gekozen blok */
body[data-editor] .ed-blokkop { display: flex; align-items: center; gap: 12px; margin: 10px 0 14px; }
body[data-editor] .ed-blokkop strong { display: block; font: 700 16px var(--font-head); }
body[data-editor] .ed-blokkop em { display: block; font: 500 12.5px/1.4 var(--font); font-style: normal; color: var(--v-zacht); }
body[data-editor] .ed-form { display: flex; flex-direction: column; gap: 2px; flex: 1; }
body[data-editor] .ed-form .field { margin-bottom: 12px; }
body[data-editor] .ed-form .grid-2 { gap: 10px; }
body[data-editor] .ed-zicht { padding: 10px 12px; border-radius: 14px; background: var(--v-veld); border: 1px solid var(--v-rand); margin-bottom: 12px; }
body[data-editor] .ed-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(127, 140, 180, .1); margin-bottom: 14px; }
body[data-editor] .ed-tabs button { flex: 1; padding: 8px 6px; border: 0; border-radius: 10px; background: none; color: var(--v-zacht); font: 700 13px var(--font); cursor: pointer; }
body[data-editor] .ed-tabs button.is-on { background: #FFC629; color: #1A1D24; }
body[data-editor] .ed-seg { display: flex; flex-wrap: wrap; gap: 6px; }
body[data-editor] .ed-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 11px; border: 1px solid var(--v-rand); background: var(--v-veld); color: var(--v-tekst); font: 600 12.5px var(--font); cursor: pointer; }
body[data-editor] .ed-seg button.is-on { border-color: #FFC629; background: rgba(255, 198, 41, .14); color: var(--v-tekst); box-shadow: inset 0 0 0 1px #FFC629; }
body[data-editor] .ed-staal { width: 14px; height: 14px; border-radius: 5px; border: 1px solid rgba(127, 140, 180, .5); }
body[data-editor] .ed-voet { position: sticky; bottom: 0; display: flex; gap: 8px; flex-wrap: wrap; margin: 10px -18px 0; padding: 14px 18px 18px; background: linear-gradient(180deg, transparent, var(--v-bg) 30%); }
body[data-editor] .ed-voet .btn-primary:disabled { opacity: .55; }
body[data-editor] .ed-gevaar { color: #FF6B6B !important; margin-left: auto; }
body[data-editor] .ed-schakels { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
body[data-editor] .usp-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
body[data-editor] .usp-item { display: block; padding: 12px; border-radius: 14px; border: 1px solid var(--v-rand); background: rgba(127, 140, 180, .05); }

/* producten kiezen */
body[data-editor] .ed-kiezer { border: 1px solid var(--v-rand); border-radius: 16px; padding: 12px; margin-bottom: 12px; background: rgba(127, 140, 180, .05); }
body[data-editor] .ed-kiezer-kop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
body[data-editor] .ed-kiezer-kop strong { font: 700 13px var(--font); }
body[data-editor] .ed-kiezer-kop em { font: 600 12px var(--font); font-style: normal; color: var(--v-zacht); }
body[data-editor] .ed-kiezer-leeg { margin: 0 0 10px; font-size: 12.5px; color: var(--v-zacht); }
body[data-editor] .ed-gekozen { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
body[data-editor] .ed-gekozen li, body[data-editor] .ed-treffers button { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 12px; background: var(--v-veld); border: 1px solid var(--v-rand); }
body[data-editor] .ed-gekozen li button { width: 28px; height: 28px; flex: none; border: 0; border-radius: 8px; background: rgba(127, 140, 180, .12); color: var(--v-tekst); cursor: pointer; font: 700 14px var(--font); }
body[data-editor] .ed-gekozen li button:disabled { opacity: .3; cursor: default; }
body[data-editor] .ed-gekozen li [data-pweg]:hover { background: rgba(255, 107, 107, .2); color: #FF6B6B; }
body[data-editor] .ed-pfoto { width: 38px; height: 38px; flex: none; border-radius: 9px; background: #fff; overflow: hidden; display: grid; place-items: center; }
body[data-editor] .ed-pfoto img { width: 100%; height: 100%; object-fit: contain; }
body[data-editor] .ed-pnaam2 { flex: 1; min-width: 0; display: flex; flex-direction: column; }
body[data-editor] .ed-pnaam2 strong { font: 700 12.5px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-editor] .ed-pnaam2 em { font: 500 11px var(--font); font-style: normal; color: var(--v-zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-editor] .ed-zoekrij { display: flex; gap: 6px; align-items: center; }
body[data-editor] .ed-zoekrij .input { flex: 1; }
body[data-editor] .ed-treffers { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 320px; overflow: auto; }
body[data-editor] .ed-treffers button { width: 100%; text-align: left; cursor: pointer; color: var(--v-tekst); font: inherit; }
body[data-editor] .ed-treffers button:hover:not(:disabled) { border-color: #FFC629; }
body[data-editor] .ed-treffers button:disabled { opacity: .5; cursor: default; }
body[data-editor] .ed-plus { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #FFC629; color: #1A1D24; font: 800 17px var(--font); }
body[data-editor] .ed-treffers button:disabled .ed-plus { background: none; }

/* --- voorbeeld --- */
body[data-editor] .ed-voorbeeld { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px 18px 16px; }
body[data-editor] .ed-balk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 0 12px; }
body[data-editor] .ed-balk .admin-title { font: 700 20px var(--font-head); margin: 0; color: var(--v-tekst); }
body[data-editor] .ed-balk .v-bar-rechts { margin-left: 0; }
body[data-editor] .ed-balk .admin-view { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 13px; font: 600 13px var(--font); text-decoration: none; background: var(--v-veld); border: 1px solid var(--v-rand); color: var(--v-tekst); }
body[data-editor] .ed-balk .admin-view:hover { border-color: #FFC629; }
body[data-editor] .ed-balk .admin-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--font); background: linear-gradient(135deg, #FFD54F, #FFB800); color: #1A1D24; }
body[data-editor] .ed-balk #uit { color: #FFC629; font: 700 13px var(--font); background: none; border: 0; cursor: pointer; padding: 0 6px; }
body[data-editor][data-thema="licht"] .ed-balk #uit { color: #9A6B00; }
body[data-editor] .ed-toestel { display: flex; gap: 3px; padding: 4px; border-radius: 14px; background: var(--v-nav); border: 1px solid var(--v-rand); margin-left: auto; }
body[data-editor] .ed-toestel button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 0; border-radius: 10px; background: none; color: var(--v-zacht); font: 700 12.5px var(--font); cursor: pointer; }
body[data-editor] .ed-toestel button.is-on { background: #FFC629; color: #1A1D24; }
body[data-editor] .ed-ok { display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px var(--font); color: #01B574; padding: 0 4px; }
body[data-editor] .ed-staat .btn { display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 0 0 4px rgba(255, 198, 41, .2); }
body[data-editor] .ed-staat .btn .ed-ico { width: 15px; height: 15px; }
body[data-editor] .ed-scherm { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; padding: 14px; border-radius: 20px;
  background: repeating-linear-gradient(45deg, rgba(127, 140, 180, .05) 0 10px, transparent 10px 20px), var(--v-diep); border: 1px solid var(--v-rand); overflow: hidden; }
body[data-editor] .ed-kader { position: relative; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); flex: none; }
body[data-editor] .ed-kader[data-toestel="gsm"], body[data-editor] .ed-kader[data-toestel="tablet"] { border-radius: 26px; outline: 8px solid #1A1F37; outline-offset: 0; }
body[data-editor] .ed-kader iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; display: block; }

/* --- vensters --- */
body[data-editor] .ed-dek { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(2, 5, 21, .6); backdrop-filter: blur(4px); }
body[data-editor] .ed-dialoog, body[data-editor] .ed-kiesvak { width: min(460px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 22px; padding: 24px; color: var(--v-tekst);
  background: #0D1333; border: 1px solid var(--v-rand); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); font-family: var(--font); }
body[data-editor][data-thema="licht"] .ed-dialoog, body[data-editor][data-thema="licht"] .ed-kiesvak { background: #fff; }
body[data-editor] .ed-dialoog h2, body[data-editor] .ed-kiesvak h2 { font: 700 19px var(--font-head); margin: 0 0 8px; }
body[data-editor] .ed-dialoog p { color: var(--v-zacht); font-size: 13.5px; line-height: 1.5; margin: 0 0 18px; }
body[data-editor] .ed-dialoog-knoppen { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
body[data-editor] .btn-danger { background: #E53E3E; color: #fff; border-color: #E53E3E; }
body[data-editor] .btn-danger:hover { background: #C53030; }
body[data-editor] .ed-dialoog .btn, body[data-editor] .ed-kiesvak .btn { border-radius: 12px; }
body[data-editor] .ed-dialoog .btn-primary { background: #FFC629; color: #1A1D24; }
body[data-editor] .ed-kiesvak { width: min(980px, 100%); padding: 0; display: flex; flex-direction: column; }
body[data-editor] .ed-kiesvak-kop { display: flex; justify-content: space-between; gap: 16px; padding: 22px 24px 14px; border-bottom: 1px solid var(--v-lijn); }
body[data-editor] .ed-kiesvak-kop p { margin: 0; color: var(--v-zacht); font-size: 13px; }
body[data-editor] .ed-kiesvak-in { padding: 8px 24px 24px; overflow: auto; }
body[data-editor] .ed-kiesvak h3 { font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--v-zacht); margin: 18px 0 10px; }
body[data-editor] .ed-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
body[data-editor] .ed-tegelknop { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-radius: 16px; border: 1px solid var(--v-rand); background: var(--v-veld); color: var(--v-tekst); text-align: left; cursor: pointer; font: inherit; transition: border-color .15s, transform .15s; }
body[data-editor] .ed-tegelknop:hover, body[data-editor] .ed-tegelknop:focus-visible { border-color: #FFC629; transform: translateY(-1px); }
body[data-editor] .ed-tegelknop strong { font: 700 13.5px var(--font); }
body[data-editor] .ed-tegelknop em { font: 500 12px/1.4 var(--font); font-style: normal; color: var(--v-zacht); }
body[data-editor] .ed-nieuwvak { width: min(520px, 100%); }
body[data-editor] .ed-adres { margin: -4px 0 12px !important; font: 600 12px var(--font) !important; }
body[data-editor] .ed-starters { display: grid; gap: 8px; margin-bottom: 12px; }
body[data-editor] .ed-starter { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px solid var(--v-rand); background: var(--v-veld); cursor: pointer; }
body[data-editor] .ed-starter:has(input:checked) { border-color: #FFC629; box-shadow: inset 0 0 0 1px #FFC629; }
body[data-editor] .ed-starter input { accent-color: #FFC629; margin-top: 3px; }
body[data-editor] .ed-starter strong { display: block; font: 700 13.5px var(--font); }
body[data-editor] .ed-starter em { display: block; font: 500 12px var(--font); font-style: normal; color: var(--v-zacht); }
body[data-editor]:not([data-thema="licht"]) .ed-dek .input { background-color: #0F1535; border-color: rgba(226, 232, 240, .14); border-radius: 13px; color: #fff; }

/* --- kleinere schermen: alles onder elkaar --- */
@media (max-width: 1180px) {
  body[data-editor] .v-app.ed-app { grid-template-columns: 220px 360px minmax(0, 1fr); }
  body[data-editor] .ed-toestel button span { display: none; }
}
@media (max-width: 1000px) {
  body[data-editor] .v-app.ed-app { display: flex; flex-direction: column; height: auto; overflow: visible; }
  body[data-editor] .v-app .admin-nav.v-nav.ed-nav { position: static; height: auto; margin: 12px 12px 0; padding: 14px; }
  body[data-editor] .ed-nav .v-merk { padding-bottom: 14px; margin-bottom: 10px; }
  body[data-editor] .ed-paginas { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  body[data-editor] .ed-paginas button[data-tab] { width: auto !important; flex: none; }
  body[data-editor] .ed-nav .v-hulp { display: none; }
  body[data-editor] .ed-nav .nav-kop { padding: 10px 4px 6px; }
  body[data-editor] .ed-paneel { margin: 12px; overflow: visible; }
  body[data-editor] .ed-voorbeeld { order: -1; padding: 12px 12px 0; }
  body[data-editor] .ed-voorbeeld { order: 0; }
  body[data-editor] .ed-scherm { height: 72vh; flex: none; }
  body[data-editor] .ed-balk .v-bar-rechts { width: 100%; justify-content: flex-end; }
}
body[data-editor] svg.ed-ico-in { display: inline-block; margin: 0 1px; }
@media (max-width: 1000px) {
  body[data-editor] .v-app .admin-nav.v-nav.ed-nav { display: flex; position: static; inset: auto; width: auto; transform: none; z-index: auto; }
  body[data-editor] .ed-voorbeeld { order: -1; }
  body[data-editor] .ed-paneel { order: 0; }
  body[data-editor] .ed-nav { order: -2; }
}
body[data-editor] .ed-zoekrij .a-scan-knop { position: static; transform: none; flex: none; width: 40px; height: 40px; }
body[data-editor] .ed-form .field > span { font: 600 12.5px var(--font); color: var(--v-zacht); }
body[data-editor] .ed-form .input { font-size: 14px; }
/* Beheer → Site-editor: de weg naar editor.html */
body[data-page="admin"] .se-kaart { margin-bottom: 22px; background: radial-gradient(420px 260px at 92% 10%, rgba(255, 198, 41, .28), transparent 70%), var(--v-kaart); }
body[data-page="admin"] .se-tekst { max-width: 640px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
body[data-page="admin"] .se-tekst h2 { margin: 0; font: 700 24px var(--font-head); color: var(--v-tekst); }
body[data-page="admin"] .se-tekst p { margin: 0 0 6px; line-height: 1.55; }
body[data-page="admin"] .se-lijst { display: flex; flex-direction: column; gap: 8px; }
body[data-page="admin"] .se-rij { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 15px; border: 1px solid var(--v-rand); background: var(--v-veld); color: var(--v-tekst); text-decoration: none; }
body[data-page="admin"] .se-rij:hover { border-color: #FFC629; }
body[data-page="admin"] .se-rij .v-tegel svg { fill: none; }
body[data-page="admin"] .se-naam { flex: 1; display: flex; flex-direction: column; }
body[data-page="admin"] .se-naam strong { font: 700 14px var(--font); }
body[data-page="admin"] .se-naam em { font: 500 12.5px var(--font); font-style: normal; color: var(--v-zacht); }
body[data-page="admin"] .se-open { font: 700 13px var(--font); color: #FFC629; }

/* Beheer: tweede kaart onderaan het menu naar de site-editor; het logo zonder lijntje (a svg-regel). */
body[data-page="admin"] .v-hulp-site {
  background:
    radial-gradient(120px 90px at 88% 8%, rgba(255, 198, 41, .5), transparent 70%),
    radial-gradient(160px 110px at 10% 110%, rgba(236, 72, 153, .45), transparent 70%),
    linear-gradient(135deg, #3A1D68, #120B35);
}
body[data-page="admin"] .v-hulp-site + .v-hulp { margin-top: 10px; }
body[data-page="admin"] .v-merk .logo-svg { stroke: none; }
/* In het voorbeeld van de site-editor geen schuifbalk */
html.is-voorbeeld { scrollbar-width: none; }
html.is-voorbeeld::-webkit-scrollbar, html.is-voorbeeld body::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Site-editor: schermen voor uiterlijk en inhoud over de volle breedte */
body[data-editor] .v-app.ed-app.is-gereedschap { grid-template-columns: 252px minmax(0, 1fr); height: auto; min-height: 100vh; overflow: visible; }
body[data-editor] .ed-gereedschap { margin-bottom: 6px; }
@media (max-width: 1000px) {
  body[data-editor] .v-app.ed-app.is-gereedschap { display: flex; }
  body[data-editor] .ed-hoofd { padding: 14px 12px; }
}
body[data-page="admin"] .v-hulp, body[data-page="admin"] .v-hulp strong, body[data-page="admin"] .v-hulp .v-hulp-knop { color: #fff; }
body[data-page="admin"] .v-hulp:hover .v-hulp-knop { color: #1A1D24; }
body[data-page="admin"] .v-hulp-ico svg { stroke: #1A1D24; }

/* Magazijn: lot kiezen bij het verzamelen */
.mag-lot { margin-top: 14px; padding: 12px; border-radius: 14px; border: 1px solid var(--m-rand, #E5E7EB); background: var(--m-veld, #F6F7F9); }
.mag-lot-kop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mag-lot-kop span { font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #FFC629; }
.mag-lot-kop em { font-style: normal; font-size: 13px; color: var(--m-zacht, #6B7280); }
.mag-lot-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.mag-lot-knop { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 150px; padding: 10px 14px; border-radius: 12px;
  border: 2px solid var(--m-rand, #E5E7EB); background: var(--m-kaart-vol, #fff); color: var(--m-tekst, #2A2E35); cursor: pointer; text-align: left; font: inherit; }
.mag-lot-knop strong { font-size: 17px; letter-spacing: .02em; }
.mag-lot-knop span { font-size: 12.5px; color: var(--m-zacht, #6B7280); }
.mag-lot-knop i { position: absolute; top: -9px; right: 8px; font-style: normal; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: #FFC629; color: #1A1D24; }
.mag-lot-knop.is-on { border-color: #FFC629; box-shadow: 0 0 0 3px rgba(255, 198, 41, .25); }
.mag-lot-mee { margin: 8px 0 0; font-size: 13.5px; color: var(--m-zacht, #6B7280); }
/* Beheer: lotnummer bij een bestelregel en terugroeplijst */
body[data-page="admin"] .lot-pill { font-size: 11px; margin-left: 6px; background: rgba(255, 198, 41, .14); color: #E0A800; border: 0; }
body[data-page="admin"][data-thema="licht"] .lot-pill { color: #8A6100; }
body[data-page="admin"] tr.lot-wie td { background: rgba(127, 140, 180, .06); padding: 10px 12px; }
/* Beheer: voorraadanalyse */
body[data-page="admin"] .va-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
body[data-page="admin"] .va-kop > p { max-width: 620px; margin: 0; }
body[data-page="admin"] .va-knoppen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
body[data-page="admin"] .seg-tabs button[aria-selected="true"] { background: #FFC629; color: #1A1D24; font-weight: 700; }
body[data-page="admin"] .va-kpis .kpi { text-align: left; cursor: pointer; font: inherit; color: inherit; }
body[data-page="admin"] .va-kpis .kpi:hover { border-color: rgba(255, 198, 41, .5); }
body[data-page="admin"] .va-maanden { margin: 16px 0; }
body[data-page="admin"] .va-staven { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 8px; }
body[data-page="admin"] .va-staaf { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; }
body[data-page="admin"] .va-staaf span { width: 100%; max-width: 56px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #FFD54F, #FFB800); }
body[data-page="admin"] .va-staaf em { font-style: normal; font-size: 11.5px; color: var(--v-zacht); white-space: nowrap; }
body[data-page="admin"] .va-tabkop { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
body[data-page="admin"] .va-tabkop .seg-tabs { flex-wrap: wrap; }
body[data-page="admin"] .va-tabkop .seg-tabs b { font-weight: 700; opacity: .7; margin-left: 4px; }
body[data-page="admin"] .va-zoek { display: flex; gap: 8px; align-items: center; }
body[data-page="admin"] .va-zoek .input { width: 220px; }
body[data-page="admin"] .va-tabel tbody tr { cursor: pointer; }
body[data-page="admin"] .va-tabel tbody tr:hover td { background: rgba(255, 198, 41, .06); }
body[data-page="admin"] .va-tabel .n { text-align: right; white-space: nowrap; }
@media (max-width: 700px) {
  body[data-page="admin"] .va-zoek { width: 100%; flex-wrap: wrap; }
  body[data-page="admin"] .va-zoek .input { width: 100%; flex: 1 1 100%; }
  body[data-page="admin"] .va-staven { gap: 4px; }
}

/* ==========================================================================
   Beheer: onderhoudsmelding (iedereen) en de Ontwikkelaarshoek (enkel eigenaar)
   ========================================================================== */
body[data-page="admin"] .onderhoud-band { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 16px; border-radius: 16px;
  background: repeating-linear-gradient(135deg, rgba(255, 198, 41, .16) 0 14px, rgba(255, 198, 41, .08) 14px 28px); border: 1px solid rgba(255, 198, 41, .55); color: var(--v-tekst); font: 500 13.5px var(--font); }
body[data-page="admin"] .onderhoud-band[hidden] { display: none; }
body[data-page="admin"] .ob-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #FFC629; color: #1A1D24; animation: ob-puls 2s ease-in-out infinite; }
body[data-page="admin"] .ob-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="admin"] .ob-t strong { font-weight: 800; }
body[data-page="admin"] .ob-uitleg { color: var(--v-zacht); font-size: 12.5px; margin-left: auto; }
@keyframes ob-puls { 50% { box-shadow: 0 0 0 6px rgba(255, 198, 41, .2); } }
@media (prefers-reduced-motion: reduce) { body[data-page="admin"] .ob-ico { animation: none; } }
body[data-editor] .ed-voorbeeld > .onderhoud-band { margin-bottom: 8px; }

body[data-page="admin"] .v-app .v-nav button[data-tab].is-slot { opacity: .5; cursor: not-allowed; }
body[data-page="admin"] .v-app .v-nav button[data-tab].is-slot:hover { background: none; }
body[data-page="admin"] .dev-slot { max-width: 560px; text-align: center; margin: 40px auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
body[data-page="admin"] .dev-slot-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--v-tegel); color: var(--v-tegel-ink); }
body[data-page="admin"] .dev-slot-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="admin"] .dev-slot h2 { margin: 6px 0 0; font: 700 20px var(--font-head); }
body[data-page="admin"] .dev-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
body[data-page="admin"] .dev-kop .seg-tabs { flex-wrap: wrap; }
body[data-page="admin"] .dev-pill { display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 198, 41, .14); color: #E0A800; border: 0; }
body[data-page="admin"][data-thema="licht"] .dev-pill { color: #8A6100; }
body[data-page="admin"] .dev-pill svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
body[data-page="admin"] .dev-feiten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
body[data-page="admin"] .dev-feiten li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--v-lijn); font-size: 13.5px; }
body[data-page="admin"] .dev-feiten li:last-child { border-bottom: 0; }
body[data-page="admin"] .dev-feiten b { white-space: nowrap; }
body[data-page="admin"] .dev-onderhoud.is-aan { border-color: rgba(255, 198, 41, .6); }
body[data-page="admin"] .dev-min { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
body[data-page="admin"] .dev-min-eigen { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--v-zacht); }
body[data-page="admin"] .dev-min-eigen .input { width: 90px; }
body[data-page="admin"] .dev-rollen { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
body[data-page="admin"] .dev-rol { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 9px; border-radius: 9px; border: 1px solid var(--v-rand); cursor: pointer; }
body[data-page="admin"] .dev-rol input { accent-color: #FFC629; }
body[data-page="admin"] .dev-tabel td { vertical-align: middle; }
body[data-page="admin"] .dev-tabel .dev-rollen { margin: 0; }
body[data-page="admin"] .dev-acties { white-space: nowrap; }
body[data-page="admin"] .dev-acties .btn { margin: 2px 0; }
body[data-page="admin"] .dev-rood { color: #FF6B6B !important; }
body[data-page="admin"] .dev-ww { display: flex; gap: 8px; }
body[data-page="admin"] .dev-ww .input { flex: 1; font-family: ui-monospace, monospace; }
body[data-page="admin"] .dev-logkop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
body[data-page="admin"] .dev-log { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow: auto; }
body[data-page="admin"] .dev-log li { display: grid; grid-template-columns: 120px 90px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 4px; border-bottom: 1px solid var(--v-lijn); font-size: 13px; }
body[data-page="admin"] .dev-log li.s-fout .pill { background: rgba(255, 107, 107, .16); color: #FF6B6B; }
body[data-page="admin"] .dev-log-t { color: var(--v-zacht); white-space: nowrap; }
body[data-page="admin"] .dev-log-m { display: flex; flex-direction: column; min-width: 0; }
body[data-page="admin"] .dev-log-m strong { font-weight: 600; overflow-wrap: anywhere; }
body[data-page="admin"] .dev-log-m em { font-style: normal; font-size: 12px; color: var(--v-zacht); overflow-wrap: anywhere; }
body[data-page="admin"] .dev-drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-page="admin"] .dev-nieuw { display: flex; gap: 8px; flex-wrap: wrap; }
body[data-page="admin"] .dev-nieuw .input { flex: 1 1 220px; }
body[data-page="admin"] .dev-bord { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
body[data-page="admin"] .dev-taak { padding: 12px; border-radius: 14px; border: 1px solid var(--v-rand); background: var(--v-veld); margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
body[data-page="admin"] .dev-taak p { margin: 0; font-size: 13px; color: var(--v-zacht); white-space: pre-wrap; }
body[data-page="admin"] .dev-taak-k { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 900px) {
  body[data-page="admin"] .dev-drie, body[data-page="admin"] .dev-bord { grid-template-columns: minmax(0, 1fr); }
  body[data-page="admin"] .dev-log li { grid-template-columns: 1fr; gap: 2px; }
  body[data-page="admin"] .ob-uitleg { margin-left: 0; }
}
body[data-page="admin"] .dev-tabel .dev-rollen { flex-wrap: nowrap; gap: 4px; }
body[data-page="admin"] .dev-tabel .dev-rol { padding: 4px 7px; font-size: 12.5px; white-space: nowrap; }
body[data-page="admin"] .dev-tabel .dev-acties { white-space: normal; }
body[data-page="admin"] .dev-tabel .dev-acties { display: flex; flex-wrap: wrap; gap: 4px; min-width: 210px; }
body[data-page="admin"] .dev-tabel td.dev-acties { display: table-cell; }
body[data-page="admin"] .dev-tabel td.dev-acties .btn { margin: 2px 2px 2px 0; }

/* ==========================================================================
   Vensters in Beheer en de site-editor (in plaats van confirm/prompt van de browser)
   ========================================================================== */
.dlg-dek { position: fixed; inset: 0; z-index: 290; display: grid; place-items: center; padding: 20px;
  background: rgba(2, 5, 21, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .16s ease; }
.dlg-dek.is-open { opacity: 1; }
.dlg { position: relative; width: min(440px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 22px; padding: 26px 24px 22px;
  background: var(--v-veld, #fff); color: var(--v-tekst, var(--ink)); border: 1px solid var(--v-rand, var(--line));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35); font-family: var(--font); transform: translateY(10px) scale(.97); transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.dlg-dek.is-open .dlg { transform: none; }
body[data-page="admin"]:not([data-thema="licht"]) .dlg { background: linear-gradient(160deg, #141B3F 0%, #0D1333 60%); }
body[data-page="admin"][data-thema="licht"] .dlg { background: #fff; }
.dlg-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 14px;
  background: var(--v-tegel, var(--yellow-50)); color: var(--v-tegel-ink, var(--yellow-ink)); }
.dlg-ico svg { width: 24px; height: 24px; }
.dlg.is-gevaar .dlg-ico { background: rgba(229, 62, 62, .14); color: #F26B6B; }
body[data-thema="licht"] .dlg.is-gevaar .dlg-ico { color: #C53030; }
.dlg h2 { font: 700 19px/1.3 var(--font-head, var(--font)); margin: 0 0 6px; color: inherit; overflow-wrap: anywhere; }
.dlg-tekst { color: var(--v-zacht, var(--muted)); font-size: 14px; line-height: 1.55; }
.dlg-tekst p { margin: 0 0 10px; }
.dlg-veld { width: 100%; margin: 10px 0 4px; }
.dlg-typ { display: block; margin-top: 12px; font-size: 13.5px; color: var(--v-zacht, var(--muted)); }
.dlg-typ b { color: var(--v-tekst, var(--ink)); letter-spacing: .04em; }
.dlg-knoppen { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.dlg-knoppen .btn { min-width: 112px; justify-content: center; }
.dlg .btn-danger { background: #E53E3E; color: #fff; border: 1px solid #E53E3E; }
.dlg .btn-danger:hover:not(:disabled) { background: #C53030; border-color: #C53030; }
.dlg .btn:disabled { opacity: .5; cursor: not-allowed; }
.dlg-tel { font-variant-numeric: tabular-nums; }
.dlg-balk { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(229, 62, 62, .15); overflow: hidden; }
.dlg-balk span { display: block; height: 100%; width: 100%; background: #E53E3E; transform-origin: left; animation: dlg-tel linear forwards; }
.dlg:not(.is-gevaar) .dlg-balk span { background: var(--yellow); }
@keyframes dlg-tel { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.dlg.is-klaar .btn-danger { animation: dlg-klaar .35s ease; }
@keyframes dlg-klaar { 50% { transform: scale(1.05); } }
@media (max-width: 520px) {
  .dlg-dek { place-items: end center; padding: 12px; }
  .dlg-knoppen .btn { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { .dlg, .dlg-dek { transition: none; } .dlg-balk span, .dlg.is-klaar .btn-danger { animation: none; } }
body[data-page="admin"] .dev-fout { margin: 10px 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45;
  background: rgba(229, 62, 62, .12); color: #F26B6B; border: 1px solid rgba(229, 62, 62, .3); }
body[data-page="admin"][data-thema="licht"] .dev-fout { color: #B42318; background: #FDECEC; }
body[data-page="admin"] .dev-fout[hidden] { display: none; }
/* Artikel verwijderen onderaan het artikelvenster */
.paneel-voet { padding: 12px 20px; border-top: 1px solid var(--v-lijn, var(--line)); display: flex; justify-content: flex-end; }
.paneel-wis { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; font: 600 13.5px var(--font); cursor: pointer;
  color: #F26B6B; background: rgba(229, 62, 62, .1); border: 1px solid rgba(229, 62, 62, .3); }
.paneel-wis:hover { background: #E53E3E; color: #fff; border-color: #E53E3E; }
.paneel-wis:disabled { opacity: .6; cursor: wait; }
.paneel-wis svg { width: 16px; height: 16px; }
body[data-thema="licht"] .paneel-wis { color: #C53030; }
body[data-thema="licht"] .paneel-wis:hover { color: #fff; }

/* ==========================================================================
   Ontwikkelaar 2: status, wie deed wat, aanmeldingen, snelheid, back-up
   ========================================================================== */
body[data-page="admin"] .dev-kop .seg-tabs { flex-wrap: wrap; }
body[data-page="admin"] .dev-status-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-left: 4px solid #22C55E; }
body[data-page="admin"] .dev-status-kop.is-oranje { border-left-color: #F59E0B; }
body[data-page="admin"] .dev-status-kop.is-rood { border-left-color: #E53E3E; }
body[data-page="admin"] .dev-status-kop h3 { margin: 0; }
body[data-page="admin"] .dev-lampen { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 14px; }
body[data-page="admin"] .dev-lamp { display: grid; grid-template-columns: 18px 1fr; gap: 12px; padding: 16px 18px; border-radius: 18px;
  background: var(--v-kaart); border: 1px solid var(--v-rand); box-shadow: var(--v-schaduw); }
body[data-page="admin"] .dev-lamp h4 { margin: 0 0 4px; font: 700 15px var(--font-head); color: var(--v-tekst); }
body[data-page="admin"] .dev-lamp p { margin: 0; font-size: 13.5px; color: var(--v-zacht); line-height: 1.5; }
body[data-page="admin"] .dev-lamp p b { color: var(--v-tekst); }
body[data-page="admin"] .dev-lamp-bol { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, .18), 0 0 14px rgba(34, 197, 94, .6); }
body[data-page="admin"] .dev-lamp.is-oranje .dev-lamp-bol { background: #F59E0B; box-shadow: 0 0 0 4px rgba(245, 158, 11, .18), 0 0 14px rgba(245, 158, 11, .6); }
body[data-page="admin"] .dev-lamp.is-rood .dev-lamp-bol { background: #E53E3E; box-shadow: 0 0 0 4px rgba(229, 62, 62, .2), 0 0 14px rgba(229, 62, 62, .65); animation: dev-knipper 1.6s ease-in-out infinite; }
body[data-page="admin"] .dev-lamp.is-grijs .dev-lamp-bol { background: #8A94A6; box-shadow: 0 0 0 4px rgba(138, 148, 166, .18); }
@keyframes dev-knipper { 50% { opacity: .45; } }
body[data-page="admin"] .dev-lamp-x { margin-top: 8px; font-size: 13px; color: var(--v-tekst); line-height: 1.5; }
body[data-page="admin"] .dev-taakfout { padding: 6px 0; border-top: 1px dashed var(--v-lijn); }
body[data-page="admin"] .dev-taakfout code { display: block; margin-top: 4px; padding: 6px 8px; border-radius: 8px; font-size: 12px; white-space: pre-wrap; word-break: break-word;
  background: rgba(229, 62, 62, .08); color: var(--v-zacht); }

body[data-page="admin"] .dev-mensen { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
body[data-page="admin"] .dev-mens { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; cursor: pointer; font: 600 13px var(--font);
  background: var(--v-diep); color: var(--v-tekst); border: 1px solid var(--v-rand); }
body[data-page="admin"] .dev-mens span { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--v-tegel); color: var(--v-tegel-ink); }
body[data-page="admin"] .dev-mens.is-on { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(255, 198, 41, .35); }
body[data-page="admin"] .dev-dag { margin: 18px 0 6px; font: 700 13px var(--font); text-transform: capitalize; color: var(--v-zacht); }
body[data-page="admin"] .dev-tijdlijn { list-style: none; margin: 0; padding: 0; }
body[data-page="admin"] .dev-tijdlijn li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--v-lijn); font-size: 14px; color: var(--v-tekst); line-height: 1.45; }
body[data-page="admin"] .dev-tijdlijn .dev-namen { color: var(--v-zacht); }
body[data-page="admin"] .dev-tijdlijn li.s-artikel b:first-child, body[data-page="admin"] .dev-tijdlijn li.s-personeel b:first-child { color: #F59E0B; }

body[data-page="admin"] tr.dev-alarm td { background: rgba(229, 62, 62, .08); }
body[data-page="admin"] .dev-sessie-groep { padding: 12px 0; border-top: 1px solid var(--v-lijn); }
body[data-page="admin"] .dev-sessie-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
body[data-page="admin"] .dev-sessies { list-style: none; margin: 8px 0 0; padding: 0; }
body[data-page="admin"] .dev-sessies li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 0 6px 12px; border-left: 2px solid var(--v-lijn); }
body[data-page="admin"] .dev-toestel { font-weight: 600; color: var(--v-tekst); min-width: 170px; }
body[data-page="admin"] .dev-sessies li .btn { margin-left: auto; }

body[data-page="admin"] .dev-stip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #22C55E; }
body[data-page="admin"] .dev-stip.is-oranje { background: #F59E0B; }
body[data-page="admin"] .dev-stip.is-rood { background: #E53E3E; }
body[data-page="admin"] .dev-sn-staven { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding-top: 10px; overflow-x: auto; }
body[data-page="admin"] .dev-sn-dag { flex: 1 0 44px; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
body[data-page="admin"] .dev-sn-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
body[data-page="admin"] .dev-sn-bars span { width: 9px; border-radius: 4px 4px 0 0; background: #FFC629; }
body[data-page="admin"] .dev-sn-dag em { font-size: 11.5px; font-style: normal; color: var(--v-zacht); }
body[data-page="admin"] .a-beheer { --c: #60A5FA; } body[data-page="admin"] .a-magazijn { --c: #34D399; } body[data-page="admin"] .a-editor { --c: #C084FC; } body[data-page="admin"] .a-webshop { --c: #FFC629; }
body[data-page="admin"] .dev-sn-bars span[class] { background: var(--c); }
body[data-page="admin"] .dev-sn-leg { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--v-zacht); }
body[data-page="admin"] .dev-sn-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--c); vertical-align: -1px; }

body[data-page="admin"] .dev-bk { display: grid; gap: 8px; margin: 12px 0; }
body[data-page="admin"] .dev-bk-rij { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; cursor: pointer; background: var(--v-diep); border: 1px solid var(--v-rand); }
body[data-page="admin"] .dev-bk-rij input { margin-top: 3px; accent-color: #FFC629; width: 17px; height: 17px; }
body[data-page="admin"] .dev-bk-rij b { display: block; color: var(--v-tekst); }
body[data-page="admin"] .dev-bk-rij em { font-style: normal; font-size: 12.5px; color: var(--v-zacht); }
body[data-page="admin"] .dev-bk-voet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body[data-page="admin"] .dev-prul { list-style: none; margin: 8px 0 0; padding: 0; }
body[data-page="admin"] .dev-prul li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--v-lijn); flex-wrap: wrap; }
body[data-page="admin"] .dev-prul li > div { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
body[data-page="admin"] .dev-prul li.is-terug { opacity: .65; }
@media (max-width: 700px) {
  body[data-page="admin"] .dev-lampen { grid-template-columns: 1fr; }
  body[data-page="admin"] .dev-sessies li .btn { margin-left: 0; }
}
body[data-page="admin"] .dev-snel th:first-child, body[data-page="admin"] .dev-snel td:first-child { width: 24px; padding-right: 0; }

/* ---------------------------------------------------------------- Bèta-slot */
body.beta-dicht { background: var(--bg-softer, #F6F7F9); }
.beta-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.beta-kaart { width: 100%; max-width: 460px; background: var(--card, #fff); border: 1px solid var(--line, #E5E8EE); border-radius: var(--radius-lg, 18px); padding: 36px 32px; text-align: center; box-shadow: 0 10px 40px rgba(20, 30, 50, .08); }
.beta-logo { display: block; height: 44px; width: auto; margin: 0 auto 18px; }
.beta-pill { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--yellow-ink, #8A6200); background: var(--yellow-50, #FFF9E6); border: 1px solid var(--yellow-100, #FFF0BF); border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; }
.beta-kaart h1 { font-size: 24px; margin: 0 0 8px; }
.beta-kaart p { color: var(--ink-2, #454B55); margin: 0 0 18px; line-height: 1.55; }
.beta-form { display: flex; gap: 8px; }
.beta-form .input { flex: 1; min-width: 0; }
.beta-kaart .beta-fout { color: #B42318; font-weight: 600; margin: 10px 0 0; }
.beta-kaart .beta-voet { font-size: 13px; color: var(--ink-3, #6B7280); margin: 18px 0 0; }
.beta-badge { position: fixed; left: 14px; bottom: 14px; z-index: 60; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: var(--ink, #2A2E35); color: #fff; font-size: 12px; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.18); opacity: .92; }
.beta-badge:hover { opacity: 1; }
.beta-badge strong { color: var(--yellow, #FFC629); letter-spacing: .08em; }
.beta-badge span { opacity: .8; }
@media (max-width: 480px) { .beta-form { flex-direction: column; } .beta-kaart { padding: 28px 20px; } .beta-badge span { display: none; } }
:root[data-theme="dark"] .beta-kaart { background: #1E2127; border-color: #2E333C; }
:root[data-theme="dark"] .beta-kaart p { color: #B5BDC9; }
body[data-page="admin"] .beta-adm-form { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 8px; margin-top: 14px; }
@media (max-width: 640px) { body[data-page="admin"] .beta-adm-form { grid-template-columns: 1fr; } }