/* Roelofsen Bloemen, winkelkant (layout Main.cfm).
   Omgezet uit het Claude Design-project "Roelofsen bloemen nieuwe shop 2026" (styles.css + site.css):
   dezelfde rb-classes en opbouw, maar schone HTML zonder React, geen inline styles en alle kleuren als token
   uit tokens.css. De prototype-navigatiebalk (rb-pagebar) is weggelaten. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--color-bg); color: var(--color-text-primary);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }
/* height: auto, zodat een height-attribuut (ruimte reserveren tegen CLS) de verhouding niet vastzet als de CSS de breedte beperkt. */
img { max-width: 100%; height: auto; }
/* Zonder JS blijft html.no-js staan (site.js zet hem meteen op .js): de filterknop opent een lade en heeft dan geen nut; de noscript-filters staan als links op de pagina. */
.no-js .rb-filterknop { display: none; }
a { color: var(--color-brand-green-deep); }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--cream); padding: 10px 16px; z-index: 300; }
.skip-link:focus { left: 0; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-main { flex: 1; }

/* ============================================================
   HEADER (design "logo links", 2026-10-06): creme strook, logo, zoekveld en acties, menu met uitklapmenu
   Boeketten. Bij het scrollen verdwijnt de kop en schuift de smalle balk (rb-hl-sticky) in.
   ============================================================ */
.rb-hl-wrap { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-pad); }
.rb-header { position: relative; z-index: 100; background: var(--color-bg); }

.rb-hl-top { background: var(--color-promo-bg); color: var(--color-brand-green-deep); font-size: var(--text-sm); }
.rb-hl-top .rb-hl-wrap { display: flex; justify-content: center; align-items: center; min-height: 40px; }
.rb-hl-top__msg { display: flex; gap: 20px; align-items: center; margin: 0; }
.rb-hl-top__msg span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rb-hl-top__msg b { font-weight: 700; }
.rb-hl-top__sep { opacity: .5; }

.rb-hl-main { background: var(--color-bg); }
.rb-hl-main__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 40px; align-items: center; padding-block: 16px; }
.rb-logo { display: flex; align-items: center; text-decoration: none; line-height: 1; }
.rb-logo img { display: block; width: 56px; height: 56px; aspect-ratio: 1/1; object-fit: cover; }
.rb-hl-logo { justify-self: start; }

/* Zoekveld (kop en smalle balk) */
.rb-hl-search {
  justify-self: center; width: 100%; max-width: 580px; display: flex; align-items: center; gap: 10px; height: 48px;
  padding: 0 6px 0 18px; background: var(--color-bg-soft); border: 1.5px solid transparent; border-radius: var(--radius-full);
  color: var(--color-text-muted); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.rb-hl-search:focus-within { background: var(--color-bg); border-color: var(--color-brand-green-deep); }
.rb-hl-search svg { flex-shrink: 0; }
.rb-hl-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--text-sm); color: var(--color-text-primary); outline: none; }
.rb-hl-search input::placeholder { color: var(--color-text-muted); }
.rb-hl-search button {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--color-brand-green-deep); color: var(--color-text-inverse);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.rb-hl-search button:hover { background: var(--color-brand-green-deeper); }

/* Acties: icoon met label eronder */
.rb-hl-act { display: grid; grid-auto-flow: column; grid-auto-columns: 76px; justify-self: end; margin-right: -12px; }
.rb-hl-act a {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 600; color: var(--color-text-primary); text-decoration: none;
}
.rb-hl-act a:hover { background: var(--color-bg-soft); color: var(--color-brand-green-deep); }
.rb-hl-act .rb-hl-act__search { display: none; }
.rb-hl-act__ico { position: relative; display: inline-flex; }
/* Naam van de ingelogde klant (bedrijf of voornaam): een regel, te lang wordt afgekapt. */
.rb-hl-act__naam { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-cart__count {
  position: absolute; top: -2px; right: -6px; background: var(--color-brand-green); color: var(--ink);
  font-size: 10px; font-weight: 800; padding: 0 5px; min-width: 16px; height: 16px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

/* Menu */
.rb-hl-nav { background: var(--color-bg); border-top: 1px solid var(--color-border-soft); border-bottom: 1px solid var(--color-border); }
.rb-hl-nav__row { display: flex; align-items: center; gap: 28px; min-height: 56px; }
.rb-nav__link { color: var(--color-text-primary); text-decoration: none; font-size: var(--text-md); font-weight: 500; padding: 16px 0; position: relative; white-space: nowrap; flex-shrink: 0; }
.rb-nav__link.is-active { font-weight: 700; }
.rb-nav__link.is-active::after, .rb-nav__link:hover::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--color-brand-green);
}
.rb-hl-nav__top { font-weight: 600; }
.rb-hl-nav__spacer { flex: 1; }

/* Uitklapmenu Boeketten: met een muis bij hover, met het toetsenbord bij focus, op touch via .is-open (site.js). */
.rb-dd { position: relative; align-self: stretch; display: flex; align-items: center; }
.rb-dd__btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.rb-dd__btn svg { transition: transform var(--dur-fast) var(--ease-out); }
.rb-dd__panel {
  position: absolute; top: 100%; left: 0; z-index: 300; margin-top: 1px; width: 620px; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-hover);
  display: grid; grid-template-columns: 1fr 230px; gap: 20px; padding: 20px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear 220ms;   /* UX 2026-11-06: sluit pas na 220 ms, zodat de muis schuin naar het paneel kan */
}
.rb-dd.is-open .rb-dd__panel, .rb-dd:has(:focus-visible) .rb-dd__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.rb-dd.is-open .rb-dd__btn svg, .rb-dd:has(:focus-visible) .rb-dd__btn svg { transform: rotate(180deg); }
.rb-dd.is-open .rb-dd__btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--color-brand-green); }
@media (hover: hover) {
  .rb-dd:hover .rb-dd__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .rb-dd:hover .rb-dd__btn svg { transform: rotate(180deg); }
}
.rb-dd__list { display: flex; flex-direction: column; }
.rb-dd__list a {
  display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; min-height: 40px; border-radius: var(--radius-sm);   /* UX 2026-11-06: brede hover-paden (steering law), rijen minstens 40 px */
  font-size: var(--text-md); font-weight: 500; color: var(--color-text-primary); text-decoration: none;
}
.rb-dd__list a:hover { background: var(--color-bg-soft); color: var(--color-brand-green-deep); }
.rb-dd__list .rb-dd__eigen { justify-content: flex-start; gap: 8px; font-weight: 700; color: var(--color-brand-green-deep); background: var(--color-brand-green-soft); margin-bottom: 4px; }
.rb-dd__list a.is-active { color: var(--color-brand-green-deep); font-weight: 700; }
.rb-dd__list .rb-dd__all { font-weight: 700; border-bottom: 1px solid var(--color-border-soft); border-radius: var(--radius-sm) var(--radius-sm) 0 0; margin-bottom: 4px; padding-bottom: 11px; }
.rb-dd__feature { align-self: start; background: var(--color-bg-soft); border-radius: var(--radius-md); display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--color-text-primary); }
.rb-dd__feature img { display: block; width: 100%; aspect-ratio: 1/1; height: auto; object-fit: cover; }
.rb-dd__ftxt { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.rb-dd__ftxt small { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-brand-green-deep); }
.rb-dd__ftxt strong { font-size: var(--text-md); font-weight: 700; }
.rb-dd__ftxt span { font-size: var(--text-sm); color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.rb-dd__feature:hover .rb-dd__ftxt span { color: var(--color-brand-green-deep); }

/* Smalle balk bij het scrollen */
.rb-hl-sticky {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400; background: var(--color-bg);
  border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-soft);
  transform: translateY(-100%); visibility: hidden; transition: transform .25s var(--ease-out), visibility 0s linear .25s;
}
.rb-hl-sticky.is-shown { transform: none; visibility: visible; transition: transform .25s var(--ease-out); }
.rb-hl-sticky__row { display: flex; align-items: center; gap: 24px; height: 60px; }
.rb-hl-sticky__logo img { display: block; width: 40px; height: 40px; object-fit: cover; }
.rb-hl-sticky .rb-dd__panel { margin-top: 0; }
.rb-hl-sticky__link { font-weight: 600; padding: 18px 0; }
.rb-hl-sticky__search { flex: 1; max-width: 420px; height: 40px; margin-left: auto; padding: 0 4px 0 14px; }
.rb-hl-sticky__search button { width: 32px; height: 32px; }
.rb-hl-sticky__act { display: flex; gap: 4px; margin-right: -10px; }
.rb-hl-sticky__act a {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm);
  color: var(--color-text-primary); position: relative;
}
.rb-hl-sticky__act a:hover { background: var(--color-bg-soft); color: var(--color-brand-green-deep); }
.rb-hl-sticky__act .rb-hl-sticky__searchbtn { display: none; }
.rb-hl-sticky__burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0;
  border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text-primary);
}
@media (prefers-reduced-motion: reduce) {
  .rb-hl-sticky, .rb-hl-sticky.is-shown, .rb-dd__panel { transition: none; }
  /* Algemene rem (zelfde als admin.css): elke overgang en animatie staat vrijwel stil, en de hover-verplaatsingen
     (productkaart, gelegenheid, pijl-link) en de vervaging van de filterzone bewegen niet. */
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .rb-product:hover, .rb-occasion:hover, .rb-occasion:hover img, .rb-arrow-link:hover svg { transform: none; }
  [data-filter-zone].is-laden .rb-cat-grid { opacity: 1; }
  .rb-product__media, .rb-sk { animation: none; }
  .rb-flash__vink circle, .rb-flash__vink path { animation: none; stroke-dashoffset: 0; }
  .rb-pdp2__meer-tekst[open] > :not(summary), .rb-faq-item[open] > :not(summary) { animation: none; }
  .rb-btn:active:not(:disabled), .rb-co-cta:active:not(:disabled), .rb-pdp2__cta:active:not(:disabled), .rb-hero-split__cta:active, .rb-tbtn:active, .rb-btn--more:active, .rb-filterknop:active, .rb-chip:active { transform: none; }
}

/* Zoekpaneel (mobiel en vanuit de smalle balk) */
.rb-ss { position: fixed; inset: 0; z-index: 950; background: var(--scrim); }
.rb-ss__panel { background: var(--color-bg); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--elev-modal); animation: rbZoekIn .22s var(--ease-out); }
@keyframes rbZoekIn { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rb-ss__panel { animation: none; } }
.rb-ss__bar { display: flex; align-items: center; gap: 10px; padding: 10px var(--container-pad); height: 60px; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); }
.rb-ss__bar input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: var(--color-text-primary); }
.rb-ss__cancel { background: none; border: 0; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-brand-green-deep); cursor: pointer; padding: 8px 0 8px 8px; }
.rb-ss__body { padding: 16px var(--container-pad) 20px; }
.rb-ss__label { font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 10px; }
.rb-ss__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.rb-ss__chips .rb-chip { text-decoration: none; }
.rb-ss__links { display: flex; flex-direction: column; }
.rb-ss__links a {
  display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--text-md); font-weight: 600; color: var(--color-text-primary); text-decoration: none;
}
.rb-ss__links a:last-child { border-bottom: 0; }

/* Zoekformulier op /zoeken */
.rb-zoekbalk__veld { flex: 1; min-width: 0; font: inherit; font-size: var(--text-base); padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text-primary); }
.rb-zoekbalk__veld:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--color-brand-green-dark); }
.rb-zoekformulier { display: flex; gap: 8px; width: min(100%, 520px); }
.rb-zoekkop { flex-wrap: wrap; gap: 16px; }
@media (max-width: 500px) { .rb-zoekformulier .rb-btn { padding: 12px 14px; } }

.rb-burger { display: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--color-text-primary); }

/* Mobiele lade */
.rb-drawer { position: fixed; inset: 0; z-index: 960; background: var(--scrim); }
.rb-drawer__panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(340px, 88vw); overflow-y: auto;
  background: var(--color-bg); padding: 18px 20px 28px; box-shadow: var(--shadow-hover);
}
.rb-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rb-drawer__close { background: none; border: 0; padding: 6px; cursor: pointer; color: var(--color-text-primary); }
.rb-drawer__group { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
/* Groepskop in de lade: een p, geen h5 (de lade staat voor de h1 en hoort niet in de kopstructuur van de pagina). */
.rb-drawer__kop { margin: 0 0 6px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.rb-drawer__group a { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; color: var(--color-text-primary); text-decoration: none; font-weight: 600; }

/* Kop: smaller scherm */
@media (max-width: 1180px) {
  .rb-hl-nav__row { gap: 20px; }
  .rb-hl-main__grid { gap: 24px; }
  .rb-hl-sticky__row { gap: 18px; }
  .rb-hl-sticky__search { max-width: 260px; }
}
@media (max-width: 1024px) {
  .rb-hl-top__msg .rb-hl-top__more { display: none; }
  .rb-hl-act { grid-auto-columns: 44px; margin-right: 0; }
  .rb-hl-act a { padding: 6px 0; }
  .rb-hl-act a > span:not(.rb-hl-act__ico) { display: none; }
}
/* Kop op mobiel: de belofte mag afbreken (nowrap liep bij 320 px of grotere tekst buiten beeld). */
@media (max-width: 760px) {
  .rb-hl-top__msg { padding-block: 8px; text-align: center; }
  .rb-hl-top__msg span { white-space: normal; display: inline; }
}
@media (max-width: 900px) {
  .rb-dd__panel { width: min(560px, calc(100vw - 2 * var(--container-pad))); grid-template-columns: 1fr 190px; }
  .rb-hl-nav__row { gap: 16px; }
  .rb-hl-nav .rb-nav__link { font-size: 15px; }
  .rb-hl-sticky__search { display: none; }
  .rb-hl-sticky__act { margin-left: auto; }
  .rb-hl-sticky__act .rb-hl-sticky__searchbtn { display: inline-flex; }
}
/* Mobiel: menuknop links, logo in het midden, iconen rechts; zoeken achter het vergrootglas. */
@media (max-width: 760px) {
  .rb-hl-nav { display: none; }
  .rb-hl-main__grid { grid-template-columns: 1fr auto 1fr; gap: 4px; padding-block: 8px; }
  .rb-burger { display: inline-flex; justify-self: start; margin-left: -8px; }
  .rb-hl-logo { justify-self: center; }
  .rb-logo img { width: 44px; height: 44px; }
  .rb-hl-search { display: none; }
  .rb-hl-act { grid-auto-columns: 40px; }
  .rb-hl-act .rb-hl-act__search { display: flex; }
  .rb-hl-sticky__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; height: 56px; }
  .rb-hl-sticky .rb-dd, .rb-hl-sticky__link { display: none; }
  .rb-hl-sticky__burger { display: inline-flex; justify-self: start; margin-left: -10px; }
  .rb-hl-sticky__logo { justify-self: center; }
  .rb-hl-sticky__act { justify-self: end; margin: 0 -10px 0 0; }
}

/* ============================================================
   KNOPPEN EN LINKS
   ============================================================ */
.rb-btn {
  font-family: var(--font-body); cursor: pointer; font-weight: 600; border-radius: var(--radius-sm); border: 0; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform 260ms cubic-bezier(.34, 1.56, .64, 1);
}
/* UX 2026-11-06 (feedback): elke tik geeft antwoord. Indrukken zakt de knop iets in en veert terug (iOS activeert :active
   alleen met een touchstart-listener, die staat in gedeeld.js); zodra een formulier verstuurt (rb.submitGuard zet
   aria-busy binnen een tik, ruim onder de 400 ms van Doherty) draait er een ring voor het label en staat de knop op
   bezig; het label blijft staan (werkwoord plus object), zodat de klant weet wat er gebeurt. */
.rb-btn, .rb-co-cta, .rb-pdp2__cta, .rb-hero-split__cta, .rb-tbtn, .rb-btn--more, .rb-filterknop { transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow 200ms cubic-bezier(.22, 1, .36, 1), transform 260ms cubic-bezier(.34, 1.56, .64, 1); }
/* Hover: de rand licht op (een ring in het zachte merkgroen); indrukken: de knop zakt een pixel en iets in; klaar: de
   flash met het getekende vinkje. Alle knoppen van de webshop (Roy 2026-11-06), de vorm blijft die van het design. */
.rb-btn--primary:hover, .rb-co-cta:hover, .rb-pdp2__cta:hover:not(:disabled), .rb-hero-split__cta:hover, .rb-tbtn--green:hover { box-shadow: 0 0 0 3px var(--color-brand-green-soft), var(--shadow-card); }
.rb-btn--more:hover, .rb-tbtn:not(.rb-tbtn--green):hover, .rb-filterknop:hover { box-shadow: 0 0 0 3px var(--color-border-soft); }
.rb-btn:active:not(:disabled), .rb-co-cta:active:not(:disabled), .rb-pdp2__cta:active:not(:disabled), .rb-hero-split__cta:active, .rb-tbtn:active, .rb-btn--more:active, .rb-filterknop:active, .rb-chip:active { transform: translateY(1px) scale(.97); transition-duration: 90ms; box-shadow: none; }
form[aria-busy="true"] button[type="submit"], form[aria-busy="true"] .rb-co-cta, button[aria-busy="true"] { cursor: progress; opacity: .85; pointer-events: none; }
form[aria-busy="true"] button[type="submit"]::before, form[aria-busy="true"] .rb-co-cta::before, button[aria-busy="true"]::before {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: rb-draai 700ms linear infinite; vertical-align: -3px; flex: none;
}
@keyframes rb-draai { to { transform: rotate(360deg); } }
/* Succes (feedback): de flash tekent eerst de cirkel en dan het vinkje; de winst wordt getekend, niet gedumpt. */
.rb-flash__vink { width: 22px; height: 22px; flex: none; margin-right: 8px; vertical-align: -5px; overflow: visible; }
.rb-flash__vink circle, .rb-flash__vink path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rb-flash__vink circle { stroke-width: 2; animation: rb-teken 420ms cubic-bezier(.22, 1, .36, 1) forwards; }
.rb-flash__vink path { stroke-width: 2.6; animation: rb-teken 300ms cubic-bezier(.65, 0, .35, 1) 420ms forwards; }
@keyframes rb-teken { to { stroke-dashoffset: 0; } }
.rb-btn--primary {
  background: var(--color-btn-primary-bg); color: var(--color-text-inverse);
  padding: 12px 22px; font-size: var(--text-base); display: inline-flex; align-items: center; gap: 8px;
}
.rb-btn--primary:hover { background: var(--color-btn-primary-hover); color: var(--color-text-inverse); }
.rb-btn--more {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--color-text-primary);
  font-size: var(--text-sm); font-weight: 600; border: 1.5px solid var(--color-border); border-radius: var(--radius-full); padding: 10px 22px;
}
.rb-btn--more:hover { border-color: var(--color-text-primary); color: var(--color-text-primary); }
.rb-btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.rb-arrow-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 700; color: var(--color-text-primary); text-decoration: none; }
.rb-arrow-link:hover { color: var(--color-brand-green-dark); }
.rb-arrow-link svg { transition: transform var(--dur-fast) var(--ease-out); }
.rb-arrow-link:hover svg { transform: translateX(2px); }

/* ============================================================
   HERO (home, design 2026-10-06): een kaart met tekst links en het boeket vrijstaand rechts; op mobiel over de
   volle breedte met het boeket rechts naast de korte titel.
   ============================================================ */
.rb-hero-split {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--color-bg-soft);
  border-radius: var(--radius-lg); overflow: hidden;
  width: calc(100% - 2 * var(--container-pad)); max-width: calc(var(--container-max) - 2 * var(--container-pad)); margin: 28px auto 0;
}
.rb-hero-split__body { padding: 56px; align-self: center; display: flex; flex-direction: column; align-items: flex-start; }
.rb-hero-split__eyebrow { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--color-brand-green-deep); margin: 0 0 16px; }
.rb-hero-split__title { font-size: clamp(2rem, 4vw, var(--text-4xl)); font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 16px; }
.rb-hero-split__title em {
  font-style: normal;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 9 Q 60 2 100 6 T 198 8' stroke='%237BB661' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0.32em; padding-bottom: 2px;
}
.rb-hero-split__t-mob { display: none; }
.rb-hero-split__sub { font-size: var(--text-md); color: var(--color-text-secondary); line-height: 1.55; margin: 0 0 24px; max-width: 44ch; }
.rb-hero-split__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 28px; margin-top: 4px;
  font-size: var(--text-md); font-weight: 700; border-radius: var(--radius-md); text-decoration: none;
  background: var(--color-brand-green-deep); color: var(--color-text-inverse);
}
.rb-hero-split__cta:hover { background: var(--color-brand-green-deeper); color: var(--color-text-inverse); }
.rb-hero-split__cta:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rb-hero-split__usps { display: flex; gap: 24px; margin-top: 20px; flex-wrap: wrap; }
.rb-hero-split__usp { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-text-secondary); }
.rb-hero-split__usp svg { color: var(--color-brand-green); flex-shrink: 0; }
/* De foto (een sfeerfoto van Fleurop) loopt door tot de rechter-, boven- en onderrand van de kaart. */
.rb-hero-split__media { position: relative; min-height: 520px; background: var(--color-placeholder-bg); }
.rb-hero-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Packshot (boeket op effen lichtgrijs): de kaart krijgt de kleur van de foto en de foto vervaagt aan de randen, zodat
   het boeket vrij op de kaart staat. De iets donkerdere vloer onderin blijft alleen onder de vaas over, als schaduw. */
.rb-hero-split--vrij { background: var(--hero-packshot-bg); }
.rb-hero-split--vrij .rb-hero-split__media { background: transparent; min-height: 560px; }
.rb-hero-split--vrij .rb-hero-split__media img {
  inset: auto; left: 50%; top: 32px; bottom: 0; transform: translateX(-50%); width: auto; height: calc(100% - 32px); max-width: 100%;
  aspect-ratio: 1/1; object-fit: contain; object-position: center bottom;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 100%), linear-gradient(to right, transparent 30%, #000 42%, #000 58%, transparent 70%), linear-gradient(to bottom, #000 0, #000 91%, transparent 95%);
  -webkit-mask-composite: source-in, source-in, source-over;
  mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 100%), linear-gradient(to right, transparent 30%, #000 42%, #000 58%, transparent 70%), linear-gradient(to bottom, #000 0, #000 91%, transparent 95%);
  mask-composite: intersect, intersect, add, add;
}
@media (max-width: 1180px) and (min-width: 901px) {
  .rb-hero-split__body { padding: 40px; }
  .rb-hero-split__title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
}
@media (max-width: 900px) {
  .rb-hero-split { grid-template-columns: 1fr; }
  .rb-hero-split__body { padding: 32px 28px; }
  .rb-hero-split__media { order: -1; min-height: 0; aspect-ratio: 16/9; }
}
/* Mobiel: de foto over de volle breedte, het boeket rechts; links een zachte vervaging met de korte titel en de knop. */
@media (max-width: 760px) {
  .rb-hero-split { width: 100%; max-width: none; margin: 0; border-radius: 0; grid-template-areas: "hero"; }
  .rb-hero-split__media, .rb-hero-split__body { grid-area: hero; }
  .rb-hero-split__media { order: 0; aspect-ratio: auto; }
  .rb-hero-split__media img { object-position: 70% center; }
  .rb-hero-split__body {
    position: relative; z-index: 2; justify-content: center; padding: 28px var(--container-pad); min-height: min(420px, 108vw);
    background: linear-gradient(90deg, var(--hero-vervaag-sterk) 0%, var(--hero-vervaag) 45%, var(--hero-vervaag-0) 72%);
  }
  .rb-hero-split__title { font-size: clamp(1.5rem, 6.6vw, 1.9rem); line-height: 1.15; max-width: 62%; margin-bottom: 14px; }
  .rb-hero-split__t-desk { display: none; }
  .rb-hero-split__t-mob { display: block; }
  .rb-hero-split__sub, .rb-hero-split__usps { display: none; }
  .rb-hero-split__cta { padding: 12px 20px; font-size: var(--text-sm); margin-top: 0; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .rb-hero-split--vrij .rb-hero-split__media { aspect-ratio: auto; min-height: 380px; }
}
/* Mobiel met packshot: effen vlak, het boeket rechts onderaan, de titel en de knop links ernaast. */
@media (max-width: 760px) {
  .rb-hero-split--vrij .rb-hero-split__media { min-height: 0; }
  .rb-hero-split--vrij .rb-hero-split__media img { left: auto; right: -6%; top: auto; transform: none; height: min(320px, 80vw); max-width: 70%; }
  .rb-hero-split--vrij .rb-hero-split__body { background: none; min-height: calc(min(320px, 80vw) + 24px); padding-block: 24px; }
  .rb-hero-split--vrij .rb-hero-split__title { max-width: 50%; font-size: clamp(1.4rem, 6.2vw, 1.8rem); }
}

/* ============================================================
   SECTIES, GRIDS, PRODUCTKAARTEN
   ============================================================ */
.rb-section { padding: 56px var(--container-pad); max-width: var(--container-max); margin: 0 auto; }
.rb-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; gap: 16px; }
.rb-section__title { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.01em; margin: 0; }

.rb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px) { .rb-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .rb-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.rb-product {
  background: var(--color-bg); text-decoration: none; color: inherit; display: block; border-radius: var(--radius-md); overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.rb-product:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
/* Alle fotovakken met productfoto's zijn vierkant: de Fleurop-foto's zijn 1:1 (design had 4:5 en 5:4, daarbij
   vielen randen en labels weg). */
/* UX 2026-11-06 (skeleton): zolang een foto laadt (lazy, onder de vouw) toont het vak een zachte glans in de vorm van de
   foto, geen spinner; de foto dekt hem daarna af. Dezelfde glans gebruikt site.js voor de kaarten van "Toon meer". */
.rb-product__media, .rb-sk {
  position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden;
  background: linear-gradient(90deg, var(--color-placeholder-bg) 25%, var(--color-bg-soft) 50%, var(--color-placeholder-bg) 75%);
  background-size: 200% 100%; animation: rb-shimmer 1400ms linear infinite;
}
@keyframes rb-shimmer { to { background-position: -200% 0; } }
.rb-product__media.is-geladen { animation: none; background: var(--color-placeholder-bg); }   /* site.js: de foto is er, de glans stopt */
.rb-sk-kaart .rb-sk--lijn { aspect-ratio: auto; height: 10px; border-radius: 5px; margin: 10px 4px 0; width: 80%; }
.rb-sk-kaart .rb-sk--kort { width: 45%; }
/* UX 2026-11-06 (uitklappen): wat opent komt snel en zakt uit (ease-out); sluiten is direct (details kent geen sluit-animatie). */
.rb-pdp2__meer-tekst[open] > :not(summary), .rb-faq-item[open] > :not(summary) { animation: rb-uitklap 260ms var(--ease-out); }
@keyframes rb-uitklap { from { opacity: 0; transform: translateY(-6px); } }
/* UX 2026-11-06 (peek): op een telefoon is "Misschien ook mooi" een rij die je veegt; de derde kaart piept 28 px in beeld,
   zodat je ziet dat er meer is (Gestalt, closure). Op een groter scherm het gewone raster. */
@media (max-width: 700px) {
  .rb-section--meer .rb-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 12px - 28px) / 2); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 4px 8px; margin: 0 -4px; }
  .rb-section--meer .rb-grid::-webkit-scrollbar { display: none; }
  .rb-section--meer .rb-grid > * { scroll-snap-align: start; }
}
.rb-product__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-product__body { padding: 12px 4px; }
/* Een h3 (kopnavigatie door de kaarten); marge en lettergrootte expliciet, zodat de kop-standaard niet doorwerkt. */
.rb-product__name { font-size: var(--text-sm); font-weight: 600; line-height: 1.6; color: var(--color-text-primary); margin: 0 0 4px; }
/* Kaart uit het eigen assortiment van de ingelogde zakelijke klant */
.rb-product__eigen {
  position: absolute; bottom: 10px; left: 10px; z-index: 1; padding: 4px 10px; border-radius: var(--radius-full);
  background: var(--color-brand-green-deep); color: var(--color-text-inverse); font-size: var(--text-xs); font-weight: 700;
}
/* Schakelaar alle boeketten of het eigen assortiment (overzicht, zakelijke klant) */
.rb-assortiment { display: flex; flex-wrap: wrap; gap: 8px; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad) 16px; }
.rb-assortiment__optie {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-full); border: 1.5px solid var(--color-border);
  color: var(--color-text-primary); text-decoration: none; font-size: var(--text-sm); font-weight: 600; background: var(--color-bg);
}
.rb-assortiment__optie:hover { border-color: var(--color-text-primary); }
.rb-assortiment__optie.is-active { background: var(--color-brand-green-deep); border-color: var(--color-brand-green-deep); color: var(--color-text-inverse); }
.rb-assortiment__aantal { font-size: var(--text-xs); opacity: .85; }
.rb-product__vorm { font-size: var(--text-xs); color: var(--color-text-muted); margin: -2px 0 4px; }
.rb-price { font-size: var(--text-sm); color: var(--color-text-secondary); }
.rb-price strong { color: var(--color-text-primary); font-weight: 700; }
.rb-price--red strong { color: var(--color-text-price); }

/* Gelegenheden-tegels */
.rb-occasions { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.rb-occasion {
  position: relative; aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; text-decoration: none;
  color: var(--color-text-inverse); background: var(--color-placeholder-bg); transition: transform var(--dur-base) var(--ease-out);
}
.rb-occasion:hover { transform: translateY(-2px); }
.rb-occasion img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-base) var(--ease-out); }
.rb-occasion:hover img { transform: scale(1.04); }
.rb-occasion__overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px;
  background: linear-gradient(180deg, var(--photo-scrim-start) 40%, var(--photo-scrim-end) 100%);
}
.rb-occasion__label { font-weight: 700; font-size: var(--text-md); color: var(--color-text-inverse); line-height: 1.2; }
@media (max-width: 1100px) { .rb-occasions { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .rb-occasions { grid-template-columns: repeat(2, 1fr); } }

/* Redactioneel blok (bloemist) */
.rb-editorial { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; padding: 56px var(--container-pad); max-width: var(--container-max); margin: 0 auto; }
.rb-editorial__media { aspect-ratio: 1/1; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-placeholder-bg); }
.rb-editorial__media img { width: 100%; height: 100%; object-fit: cover; }
.rb-editorial h2 { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 16px; }
.rb-editorial p { font-size: var(--text-md); color: var(--color-text-secondary); margin: 0 0 12px; line-height: 1.6; }
.rb-editorial .rb-btn-row { margin-top: 22px; }
@media (max-width: 900px) { .rb-editorial { grid-template-columns: 1fr; } }

/* Zo werken we */
.rb-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 64px var(--container-pad); max-width: var(--container-max); margin: 0 auto; }
.rb-steps__media { aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-placeholder-bg); }
.rb-steps__media img { width: 100%; height: 100%; object-fit: cover; }
.rb-steps__title { font-size: var(--text-2xl); font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.rb-steps__intro { font-size: var(--text-md); color: var(--color-text-secondary); margin: 0 0 28px; max-width: 50ch; }
.rb-steps__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 24px; }
.rb-steps__list li { display: flex; gap: 18px; }
.rb-steps__num {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--color-brand-green-soft); color: var(--color-brand-green-deep);
  font-weight: 800; font-size: var(--text-lg); display: inline-flex; align-items: center; justify-content: center;
}
.rb-steps__t { font-weight: 700; font-size: var(--text-md); margin: 8px 0 4px; }
.rb-steps__d { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.5; margin: 0; max-width: 42ch; }
@media (max-width: 900px) { .rb-steps { grid-template-columns: 1fr; } }

/* Reviews */
.rb-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .rb-reviews { grid-template-columns: 1fr; } }
.rb-review { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 22px; }
.rb-review__stars { color: var(--color-brand-green-dark); letter-spacing: 2px; font-size: 14px; margin-bottom: 10px; }
.rb-review__t { font-size: var(--text-md); font-weight: 700; margin: 0 0 6px; }
.rb-review__body { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 12px; line-height: 1.5; }
.rb-review__who { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ============================================================
   CATEGORIE / OVERZICHT
   ============================================================ */
.rb-crumbs { max-width: var(--container-max); margin: 0 auto; padding: 20px var(--container-pad) 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.rb-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rb-crumbs li + li::before { content: '\203A'; margin-right: 6px; }
.rb-crumbs a { color: var(--color-text-muted); text-decoration: none; }
.rb-crumbs a:hover { color: var(--color-text-primary); }
.rb-crumbs [aria-current] { color: var(--color-text-primary); font-weight: 600; }

.rb-cat-hero { padding: 40px var(--container-pad) 32px; max-width: var(--container-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: center; }
.rb-cat-hero__eyebrow { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--color-brand-green-deep); margin: 0 0 10px; }
.rb-cat-hero__title { font-size: clamp(2rem, 4vw, var(--text-4xl)); font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 16px; }
.rb-cat-hero__sub { font-size: var(--text-md); color: var(--color-text-secondary); margin: 0 0 16px; max-width: 50ch; line-height: 1.55; }
.rb-cat-hero__meta { display: flex; gap: 10px 18px; font-size: var(--text-sm); color: var(--color-text-muted); flex-wrap: wrap; }
.rb-cat-hero__meta strong { color: var(--color-text-primary); }
.rb-cat-hero__media { aspect-ratio: 5/4; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-placeholder-bg); }
.rb-cat-hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .rb-cat-hero { grid-template-columns: 1fr; gap: 24px; } }

/* Categoriekop in de stijl van fleurop.nl: terug + kruimelpad, grote titel, subtitel en rechts de filterknop.
   Geen foto: de producten staan direct onder de kop. */
.rb-crumbs--terug { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding-top: 16px; color: var(--color-text-primary); }
.rb-crumbs--terug a { color: var(--color-text-primary); }
.rb-crumbs--terug [aria-current] { color: var(--color-text-muted); font-weight: 400; }
.rb-crumbs__terug { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; }
.rb-crumbs__terug:hover { color: var(--color-brand-green-deep); }
.rb-crumbs__sep { color: var(--color-text-muted); }
.rb-cat-kop {
  max-width: var(--container-max); margin: 0 auto; padding: 20px var(--container-pad) 20px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap;
}
.rb-cat-kop__titel { font-size: clamp(1.75rem, 3.2vw, var(--text-4xl)); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 10px; }
.rb-cat-kop__sub { font-size: var(--text-md); color: var(--color-text-primary); margin: 0; max-width: 70ch; }
.rb-filterknop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 150px; padding: 9px 18px;
  background: var(--color-bg); color: var(--color-text-primary); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rb-filterknop:hover { background: var(--color-bg-soft); border-color: var(--line-strong); }
.rb-filterknop[aria-expanded="true"] { background: var(--color-brand-green-soft); border-color: var(--color-brand-green); color: var(--color-brand-green-deep); }
.rb-filterknop__aantal {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-full); background: var(--color-brand-green); color: var(--ink); font-size: var(--text-xs); font-weight: 800;
}
/* Mobiel: titel en subtitel links, rechts een compacte icoonknop (de tekst blijft voor schermlezers). */
@media (max-width: 600px) {
  .rb-cat-kop { flex-wrap: nowrap; align-items: flex-start; gap: 12px; }
  .rb-filterknop { position: relative; min-width: 0; width: 42px; height: 42px; padding: 0; flex-shrink: 0; border-color: transparent; background: var(--color-bg-soft); color: var(--color-text-secondary); }
  .rb-filterknop__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rb-filterknop__aantal { position: absolute; top: -7px; right: -7px; }
}

.rb-cat-controls {
  width: min(calc(100% - 2 * var(--container-pad)), calc(var(--container-max) - 2 * var(--container-pad)));
  margin: 0 auto 24px; padding: 16px 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft);
}
.rb-cat-controls__telling { flex-basis: 100%; font-size: var(--text-sm); color: var(--color-text-secondary); }
.rb-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.rb-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; border-radius: var(--radius-full); border: 1.5px solid var(--color-border);
  background: var(--color-bg); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-primary); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.rb-chip:hover { border-color: var(--color-text-primary); color: var(--color-text-primary); }
.rb-chip.is-active { background: var(--color-text-primary); color: var(--color-text-inverse); border-color: var(--color-text-primary); }
.rb-chip__aantal { font-size: var(--text-xs); color: var(--color-text-muted-soft); font-weight: 600; margin-left: 2px; }
.rb-chip.is-active .rb-chip__aantal { color: var(--on-dark-link); }
.rb-kleurbol { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; border: 1px solid var(--line-strong); vertical-align: -1px; }
.rb-kleurbol--rood { background: var(--kleur-rood); }
.rb-kleurbol--roze { background: var(--kleur-roze); }
.rb-kleurbol--wit { background: var(--kleur-wit); }
.rb-kleurbol--geel { background: var(--kleur-geel); }
.rb-kleurbol--oranje { background: var(--kleur-oranje); }
.rb-kleurbol--paars { background: var(--kleur-paars); }
.rb-kleurbol--blauw { background: var(--kleur-blauw); }
.rb-kleurbol--pastel { background: linear-gradient(135deg, var(--kleur-pastel-1) 50%, var(--kleur-pastel-2) 50%); }
.rb-kleurbol--warm { background: linear-gradient(135deg, var(--kleur-warm-1) 50%, var(--kleur-warm-2) 50%); }
.rb-kleurbol--kleurrijk { background: conic-gradient(var(--kleur-rood), var(--kleur-geel), var(--kleur-blauw), var(--kleur-paars), var(--kleur-roze), var(--kleur-rood)); }
.rb-chip.is-leeg { color: var(--color-text-muted); border-style: dashed; cursor: default; }
.rb-chip.is-leeg:hover { border-color: var(--color-border); color: var(--color-text-muted); }
.rb-sort-form { display: flex; align-items: center; gap: 8px; }
.rb-sort { padding: 8px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); background: var(--color-bg); font: inherit; font-size: var(--text-sm); cursor: pointer; }

/* Filterlade: schuift van rechts in over een verduisterde achtergrond. Open blijft hij tijdens live filteren. */
.rb-geen-scroll { overflow: hidden; }
.rb-filterlade { position: fixed; inset: 0; z-index: 250; }
.rb-filterlade__scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity 250ms var(--ease-out); }
.rb-filterlade__paneel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); display: flex; flex-direction: column;
  background: var(--color-bg); box-shadow: var(--elev-modal); transform: translateX(100%); transition: transform 250ms var(--ease-out);
  padding-top: env(safe-area-inset-top, 0px); outline: none;
}
.rb-filterlade.is-open .rb-filterlade__scrim { opacity: 1; }
.rb-filterlade.is-open .rb-filterlade__paneel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .rb-filterlade__scrim, .rb-filterlade__paneel { transition: none; }
}
.rb-filterlade__kop { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--color-border); }
.rb-filterlade__titel { font-size: var(--text-xl); font-weight: 700; }
.rb-filterlade__sluit { background: none; border: 0; padding: 6px; cursor: pointer; color: var(--color-text-primary); border-radius: var(--radius-sm); }
.rb-filterlade__sluit:hover { background: var(--color-bg-soft); }
.rb-filterlade__inhoud { flex: 1 1 auto; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 24px; }
.rb-filterlade__telling { font-size: var(--text-sm); color: var(--color-text-secondary); }
.rb-filtergroep__kop { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.02em; margin: 0 0 10px; }
.rb-filterlade__voet {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-border); background: var(--color-bg);
}
.rb-filterlade__wis { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary); }
.rb-filterlade__toon { margin-left: auto; justify-content: center; }
.rb-cat-controls .rb-filtergroep + .rb-filtergroep { margin-top: 0; }

.rb-cat-grid-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad) 80px; }
.rb-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1100px) { .rb-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .rb-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
/* Uitgelichte kaart: 2 kolommen breed en 2 rijen hoog. De foto rekt mee tot de hoogte van de twee rijen ernaast,
   zodat naam en prijs onderaan precies op een lijn liggen met die van de onderste kaart rechts (bij een vierkante
   foto sluit dat niet aan: rechts staan twee foto's plus een tekstregel). */
.rb-cat-grid .rb-product--groot { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.rb-product--groot .rb-product__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
.rb-product--groot .rb-product__media img { position: absolute; inset: 0; }
/* De tweede uitgelichte kaart staat tegen de rechterkant; de kaarten erna vullen de open plekken links. */
.rb-cat-grid .rb-product--rechts { grid-column: 3 / span 2; }
/* Bij 3 kolommen valt rechts een gat voor de grote kaart; dense vult dat met de volgende kaart. */
@media (max-width: 1100px) { .rb-cat-grid { grid-auto-flow: row dense; } .rb-cat-grid .rb-product--rechts { grid-column: 2 / span 2; } }
@media (max-width: 700px) {
  .rb-cat-grid .rb-product--groot, .rb-cat-grid .rb-product--rechts { grid-column: 1 / -1; grid-row: auto; display: block; }
  .rb-product--groot .rb-product__media { aspect-ratio: 1/1; }
}

.rb-cat-loadmore { text-align: center; margin-top: 48px; }
.rb-leeg { max-width: 60ch; color: var(--color-text-secondary); }
[data-filter-zone] .rb-cat-grid { transition: opacity var(--dur-base) var(--ease-out); }
[data-filter-zone].is-laden .rb-cat-grid { opacity: .45; }
[data-filter-zone].is-laden .rb-chip, [data-filter-zone].is-laden .rb-btn--more { cursor: progress; }

/* ============================================================
   PRODUCTPAGINA
   ============================================================ */
.rb-pdp2 { max-width: var(--container-max); margin: 0 auto; padding: 32px var(--container-pad) 80px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; }
@media (max-width: 1000px) { .rb-pdp2 { grid-template-columns: 1fr; gap: 32px; } }

.rb-pdp2__gallery { position: relative; }
.rb-pdp2__main { position: relative; aspect-ratio: 1/1; background: var(--color-placeholder-bg); border-radius: var(--radius-md); overflow: hidden; }
.rb-pdp2__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-pdp2__zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.rb-pdp2__zoom:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
a.rb-pdp2__meer { text-decoration: none; }

/* Fotoviewer (native dialog): alle foto's groot, met pijlen, teller en sluiten (Esc of kruisje). */
/* 100dvh volgt de browserbalk op mobiel (anders vallen Vorige en Volgende eronder); 100vh is de terugval voor oudere browsers. */
.rb-lightbox { padding: 0; border: 0; background: transparent; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; }
.rb-lightbox::backdrop { background: var(--scrim-sterk); }
.rb-lightbox__kader { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 56px 72px; }
.rb-lightbox__foto { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-md); background: var(--color-bg); }
.rb-lightbox__knop, .rb-lightbox__sluit { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-full); border: 0; background: var(--color-bg); color: var(--color-text-primary); cursor: pointer; box-shadow: var(--shadow-card); }
.rb-lightbox__knop:focus-visible, .rb-lightbox__sluit:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rb-lightbox__knop--vorige { left: 16px; top: 50%; transform: translateY(-50%); }
.rb-lightbox__knop--volgende { right: 16px; top: 50%; transform: translateY(-50%); }
.rb-lightbox__sluit { top: 16px; right: 16px; }
.rb-lightbox__teller { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); margin: 0; padding: 4px 12px; border-radius: var(--radius-full); background: var(--color-bg); font-size: var(--text-sm); font-weight: 700; }
@media (max-width: 600px) {
  .rb-lightbox__kader { padding: 64px 8px; }
  .rb-lightbox__knop { top: auto; bottom: 12px; transform: none; width: 44px; height: 44px; }
  .rb-lightbox__teller { bottom: 22px; }
}
.rb-pdp2__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; z-index: 2;
  background: var(--glass); border: 1px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--color-text-primary); transition: background var(--dur-fast) var(--ease-out);
}
.rb-pdp2__arrow:hover { background: var(--color-bg); box-shadow: var(--shadow-card); }
.rb-pdp2__arrow--prev { left: 16px; }
.rb-pdp2__arrow--next { right: 16px; }
.rb-pdp2__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 14px; }
.rb-pdp2__thumb { aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--color-placeholder-bg); cursor: pointer; }
.rb-pdp2__thumb.is-active { border-color: var(--color-text-primary); }
.rb-pdp2__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-pdp2__meer { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-md); color: var(--color-text-muted-soft); background: var(--color-bg-soft); border-color: transparent; }
.rb-pdp2__meer:hover { color: var(--color-text-primary); }
.rb-pdp2__thumb:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.rb-pdp2__body { display: flex; flex-direction: column; }
.rb-pdp2__title { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 6px; }
.rb-pdp2__vorm { font-size: var(--text-lg); color: var(--color-text-secondary); margin: 0 0 16px; }
.rb-pdp2__sku { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; margin: 0 0 16px; }
.rb-pdp2__desc { font-size: var(--text-md); color: var(--color-text-secondary); margin: 0 0 12px; line-height: 1.6; max-width: 52ch; }
.rb-pdp2__composition { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 28px; max-width: 52ch; }
.rb-pdp2__meer-tekst { margin: 0 0 14px; max-width: 52ch; }
.rb-pdp2__meer-tekst summary { cursor: pointer; font-size: var(--text-sm); font-weight: 700; color: var(--color-brand-green-deep); text-decoration: underline; list-style: none; display: inline-block; }
.rb-pdp2__meer-tekst summary::-webkit-details-marker { display: none; }
.rb-pdp2__meer-tekst summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.rb-pdp2__meer-tekst[open] summary { margin-bottom: 8px; }
.rb-pdp2__meer-tekst p { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.6; margin: 0; }
.rb-pdp2__composition strong { color: var(--color-text-primary); }
.rb-pdp2__kop { font-size: var(--text-md); font-weight: 700; letter-spacing: -0.005em; margin: 0 0 14px; display: flex; align-items: baseline; gap: 6px; }
.rb-pdp2__kop .opt { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; letter-spacing: 0.02em; }
.rb-pdp2 fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Formaat-tegels: radio's in labels, werkt ook zonder JS */
.rb-pdp2__sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 32px; }
.rb-size-tile { position: relative; display: block; cursor: pointer; }
.rb-size-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rb-size-tile__box {
  display: block; border: 1.5px solid var(--color-selector-border); border-radius: var(--radius-md); padding: 14px 12px;
  background: var(--color-bg); text-align: center; transition: border-color var(--dur-fast) var(--ease-out);
}
.rb-size-tile:hover .rb-size-tile__box { border-color: var(--color-text-primary); }
.rb-size-tile input:checked + .rb-size-tile__box { border: 2px solid var(--color-selector-active); padding: 13px 11px; background: var(--color-selector-active-bg); }
.rb-size-tile input:focus-visible + .rb-size-tile__box { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rb-size-tile__img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--color-placeholder-bg); }
.rb-size-tile__num { font-size: var(--text-xs); color: var(--color-text-muted-soft); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; display: block; }
.rb-size-tile__label { display: block; font-size: var(--text-lg); font-weight: 700; margin: 2px 0; }
.rb-size-tile__price { font-size: var(--text-md); font-weight: 700; color: var(--color-text-primary); display: block; }
.rb-size-tile__badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--color-brand-green-deep); color: var(--color-text-inverse); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.02em; padding: 3px 10px; border-radius: var(--radius-full); line-height: 1.3;
}

/* Kaartje */
.rb-pdp2__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.rb-pdp2__cards--drie { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 500px) { .rb-pdp2__cards--drie { gap: 6px; } .rb-card-tile__box { padding: 10px 6px; } }
.rb-card-tile { position: relative; display: flex; cursor: pointer; }
.rb-card-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rb-card-tile__box { flex: 1; display: flex; flex-direction: column; justify-content: center; border: 1.5px solid var(--color-selector-border); border-radius: var(--radius-md); padding: 12px; background: var(--color-bg); text-align: center; }
.rb-card-tile:hover .rb-card-tile__box { border-color: var(--color-text-primary); }
.rb-card-tile input:checked + .rb-card-tile__box { border: 2px solid var(--color-selector-active); padding: 11px; background: var(--color-selector-active-bg); }
.rb-card-tile input:focus-visible + .rb-card-tile__box { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rb-card-tile__label { font-size: var(--text-sm); font-weight: 700; display: block; }
.rb-card-tile__price { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; display: block; }
.rb-pdp2__textarea {
  width: 100%; border: 1.5px solid var(--color-selector-border); border-radius: var(--radius-md); padding: 14px 16px;
  font: inherit; font-size: var(--text-sm); min-height: 80px; resize: vertical; margin-bottom: 4px;
}
.rb-pdp2__textarea:focus { outline: 2px solid var(--color-brand-green); outline-offset: -1px; border-color: var(--color-brand-green); }
.rb-pdp2__count { font-size: var(--text-xs); color: var(--color-text-muted); text-align: right; margin: 0 0 32px; }

/* Kaartjes (zoals fleurop.nl): gekozen ontwerp met een keuzelijst per maat */
.rb-kaartkeuze { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; }
.rb-kaartkeuze__foto { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-placeholder-bg); display: block; }
.rb-kaartkeuze__naam { font-weight: 700; margin: 4px 0 6px; }
.rb-kaartkeuze__wijzig { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--color-brand-green-deep); text-decoration: underline; cursor: pointer; }
.rb-kaartkeuze__wijzig:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Kaart kiezen: een rustige popup in het midden (native dialog). Alleen de keuze; de tekst staat op de pagina. */
.rb-kaartdialoog { width: min(880px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--color-bg); color: var(--color-text-primary); box-shadow: var(--shadow-hover); overflow: hidden; }
.rb-kaartdialoog[open] { display: flex; flex-direction: column; }
.rb-kaartdialoog::backdrop { background: var(--scrim); }
.rb-kaartdialoog__kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px 12px; }
.rb-kaartdialoog__titel { font-size: var(--text-xl); font-weight: 800; margin: 0; }
.rb-kaartdialoog__sluit { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); border: 0; background: var(--color-bg-soft); color: var(--color-text-primary); cursor: pointer; }
.rb-kaartdialoog__sluit:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rb-kaartdialoog__paneel { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 0 24px 24px; }
.rb-kaartdialoog__uitleg { color: var(--color-text-secondary); margin: 0 0 16px; max-width: 62ch; line-height: 1.5; }
.rb-kaartdialoog__chips { margin-bottom: 16px; flex-shrink: 0; }
.rb-kaartdialoog__uitleg, .rb-kaartdialoog__kop { flex-shrink: 0; }
.rb-kaartdialoog__chips .rb-chip { cursor: pointer; font: inherit; font-size: var(--text-sm); }
.rb-kaartdialoog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; overflow-y: auto; padding: 4px; margin: -4px; }
.rb-kaartontwerp { position: relative; cursor: pointer; display: block; }
.rb-kaartontwerp input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rb-kaartontwerp__box { display: flex; flex-direction: column; gap: 8px; }
.rb-kaartontwerp__foto { display: block; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-placeholder-bg); border: 2px solid transparent; box-shadow: var(--shadow-soft); }
.rb-kaartontwerp__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-kaartontwerp__foto--klein { aspect-ratio: 10.4 / 7.4; }
.rb-kaartontwerp__foto--groot { aspect-ratio: 13.8 / 20; }
.rb-kaartontwerp:hover .rb-kaartontwerp__foto { border-color: var(--color-border); }
.rb-kaartontwerp input:checked + .rb-kaartontwerp__box .rb-kaartontwerp__foto { border-color: var(--color-selector-active); }
.rb-kaartontwerp input:focus-visible + .rb-kaartontwerp__box .rb-kaartontwerp__foto { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rb-kaartontwerp__regel { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-sm); }
.rb-kaartontwerp__naam { font-weight: 600; }
.rb-kaartontwerp__prijs { color: var(--color-text-secondary); white-space: nowrap; }
@media (max-width: 600px) {
  .rb-kaartdialoog { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border-radius: 0; }
  .rb-kaartdialoog__kop { padding: 16px 16px 8px; }
  .rb-kaartdialoog__paneel { padding: 0 16px 16px; }
  .rb-kaartdialoog__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* Categorieen op mobiel: een rij die horizontaal scrolt in plaats van vijf rijen knoppen. */
  .rb-kaartdialoog__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 0 16px 4px; }
  .rb-kaartdialoog__chips::-webkit-scrollbar { display: none; }
  .rb-kaartdialoog__chips .rb-chip { flex-shrink: 0; }
  .rb-kaartdialoog__uitleg { font-size: var(--text-sm); margin-bottom: 12px; }
}
.rb-kaartjes__tekstkop { display: block; }
@media (max-width: 500px) {
  .rb-kaartkeuze { grid-template-columns: 60px 1fr; gap: 12px; padding: 12px; }
  .rb-kaartkeuze__foto { width: 60px; height: 60px; }
}

/* Extra's */
.rb-addons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 32px; }
.rb-addon { position: relative; display: block; cursor: pointer; }
.rb-addon input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rb-addon__box { display: block; border: 1.5px solid var(--color-selector-border); border-radius: var(--radius-md); padding: 10px; background: var(--color-bg); text-align: center; height: 100%; }
.rb-addon:hover .rb-addon__box { border-color: var(--color-text-primary); }
.rb-addon input:checked + .rb-addon__box { border: 2px solid var(--color-selector-active); padding: 9px; background: var(--color-selector-active-bg); }
/* Gekozen staat (Roy 2026-11-07: een halve pixel rand was niet te zien): groene rand, zachtgroen vlak en een vinkje in
   de hoek, voor formaat, kaartje en extra's; de hover blijft grijs. */
.rb-size-tile__box, .rb-card-tile__box, .rb-addon__box { position: relative; }
.rb-size-tile input:checked + .rb-size-tile__box::after, .rb-card-tile input:checked + .rb-card-tile__box::after, .rb-addon input:checked + .rb-addon__box::after {
  content: ''; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-selector-active);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9F7F4' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size: 14px 14px; background-repeat: no-repeat; background-position: center; animation: rb-vink-pop var(--dur-fast) var(--ease-out);
}
/* De kaartje-tegels zijn alleen tekst: daar staat het vinkje inline voor het label (in de hoek viel het op 390 px over de tekst). */
.rb-card-tile input:checked + .rb-card-tile__box::after { display: none; }
.rb-card-tile input:checked + .rb-card-tile__box .rb-card-tile__label::before {
  content: ''; display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; margin-right: 5px; background: var(--color-selector-active);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9F7F4' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size: 10px 10px; background-repeat: no-repeat; background-position: center; animation: rb-vink-pop var(--dur-fast) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { .rb-card-tile input:checked + .rb-card-tile__box .rb-card-tile__label::before { animation: none; } }
@keyframes rb-vink-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rb-size-tile input:checked + .rb-size-tile__box::after, .rb-card-tile input:checked + .rb-card-tile__box::after, .rb-addon input:checked + .rb-addon__box::after { animation: none; } }
.rb-addon input:focus-visible + .rb-addon__box { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rb-addon__img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--color-bg-soft); }
.rb-addon__label { display: block; font-size: var(--text-sm); font-weight: 600; line-height: 1.3; min-height: 32px; }
.rb-addon__price { display: block; font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 4px; }
@media (max-width: 500px) {
  .rb-addons { grid-template-columns: repeat(2, 1fr); }
  /* Drie formaten blijven naast elkaar (anders staat Groot alleen op een tweede rij). */
  .rb-pdp2__sizes { gap: 8px; }
  .rb-size-tile__box { padding: 8px 6px 10px; }
  .rb-size-tile input:checked + .rb-size-tile__box { padding: 7px 5px 9px; }
  .rb-size-tile__label { font-size: var(--text-md); }
  .rb-size-tile__price { font-size: var(--text-sm); }
  .rb-size-tile__badge { font-size: 10px; padding: 2px 7px; }
}

.rb-pdp2__priceblock { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.rb-pdp2__price small { font-size: var(--text-sm); color: var(--color-text-muted); display: block; font-weight: 400; }
.rb-pdp2__price strong { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.015em; color: var(--color-text-primary); white-space: nowrap; }
.rb-pdp2__stock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-brand-green-deep); font-weight: 600; }
.rb-pdp2__stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand-green); }

.rb-pdp2__cta {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: var(--color-brand-green); color: var(--ink);
  border: 0; border-radius: var(--radius-md); padding: 18px; font: inherit; font-size: var(--text-md); font-weight: 700; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out); margin-bottom: 8px;
}
.rb-pdp2__cta:hover { background: var(--color-brand-green-dark); }
.rb-pdp2__cta:disabled { cursor: not-allowed; opacity: .6; }
/* Knoppen die rb.submitGuard na een submit uitzet (review 2026-10-23). */
.rb-btn:disabled, .rb-tbtn:disabled, .rb-linkknop:disabled { opacity: .6; cursor: not-allowed; }
.rb-pdp2__notitie { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0 0 16px; text-align: center; }
.rb-pdp2__trust { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rb-pdp2__trust li { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-text-secondary); }
.rb-pdp2__trust li svg { color: var(--color-brand-green); flex-shrink: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.rb-footer { background: var(--color-nav-bg); color: var(--on-dark-text); padding: 64px var(--container-pad) 24px; }
.rb-footer__grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; max-width: var(--container-max); margin: 0 auto; }
@media (max-width: 1100px) { .rb-footer__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .rb-footer__grid { grid-template-columns: repeat(2, 1fr); } }
.rb-footer__col h2 { color: var(--on-dark-strong); font-weight: 700; font-size: var(--text-md); margin: 0 0 14px; }
.rb-footer__col a { display: block; color: var(--on-dark-link); font-size: var(--text-sm); text-decoration: none; margin-bottom: 8px; transition: color var(--dur-fast) var(--ease-out); }
.rb-footer__col a:hover { color: var(--on-dark-strong); }
.rb-footer__copy { font-size: var(--text-sm); color: var(--on-dark-link); margin: 0 0 8px; line-height: 1.5; }
.rb-footer__logo { display: block; width: 64px; height: 64px; object-fit: contain; margin-bottom: 14px; }
.rb-drawer__logo { display: block; width: 44px; height: 44px; object-fit: contain; }
.rb-footer__trust {
  max-width: var(--container-max); margin: 48px auto 0; display: flex; gap: 16px; align-items: center; padding: 20px 0;
  border-top: 1px solid var(--on-dark-line); border-bottom: 1px solid var(--on-dark-line); font-size: var(--text-xs); color: var(--on-dark-faint);
}
.rb-pay { background: var(--on-dark-fill); color: var(--on-dark-strong); font-size: var(--text-xs); font-weight: 700; padding: 4px 10px; border-radius: var(--radius-sm); letter-spacing: 0.04em; }
.rb-footer__bottom { max-width: var(--container-max); margin: 24px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rb-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; font-size: var(--text-xs); color: var(--on-dark-faint); }
.rb-footer__legal a { color: inherit; text-decoration: underline; }
/* Tagline in Nunito Sans cursief (self-hosted): een niet-gehost schrijfletter viel per platform anders terug. */
.rb-footer__tagline { font-family: var(--font-body); font-style: italic; font-weight: 700; font-size: 28px; color: var(--color-brand-green); line-height: 1; }

/* ============================================================
   404 en foutpagina's in de winkel-layout
   ============================================================ */
.aanbouw { max-width: 640px; margin: 64px auto; text-align: center; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 48px 36px; box-shadow: var(--elev-card); }
.aanbouw__label { display: inline-block; background: var(--brand-soft); color: var(--brand-deep); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 12px; border-radius: var(--r-pill); margin-bottom: 18px; }
.aanbouw__titel { font-size: 34px; line-height: 1.15; font-weight: 900; margin-bottom: 14px; }
.aanbouw__tekst { color: var(--muted); font-size: 17px; }
.aanbouw__acties { margin-top: 24px; display: flex; justify-content: center; }
@media (max-width: 600px) {
  .aanbouw { padding: 32px 22px; margin: 32px 16px; }
  .aanbouw__titel { font-size: 26px; }
}

/* ============================================================
   WINKELS (vestigingen in Veenendaal)
   ============================================================ */
.rb-section--strak { padding-top: 8px; }
.rb-winkels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.rb-winkel { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); }
.rb-winkel__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 3/2; background: var(--color-bg-soft); overflow: hidden; }
.rb-winkel__media img { width: 100%; height: 100%; object-fit: cover; }
.rb-winkel__media img.rb-winkel__logo, .rb-winkeldetail__media img.rb-winkel__logo { width: 96px; height: 96px; object-fit: contain; }
.rb-winkel__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rb-winkel__naam { font-size: var(--text-lg); font-weight: 700; }
.rb-winkel__naam a { color: var(--color-text-primary); text-decoration: none; }
.rb-winkel__naam a:hover { color: var(--color-brand-green-deep); }
.rb-winkel__adres { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.5; }
.rb-winkel__status { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); }
.rb-winkel__status.is-open { color: var(--color-brand-green-deep); }
.rb-winkel__acties { display: flex; gap: 18px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }

.rb-winkeldetail { max-width: var(--container-max); margin: 0 auto; padding: 20px var(--container-pad) 40px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .rb-winkeldetail { grid-template-columns: 1fr; gap: 24px; } .rb-winkeldetail__media { order: -1; } }
.rb-winkeldetail__oms { font-size: var(--text-md); color: var(--color-text-secondary); line-height: 1.6; margin: 12px 0 0; max-width: 60ch; }
.rb-winkeldetail__blokken { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; margin-top: 28px; }
.rb-winkeldetail__kop { font-size: var(--text-md); font-weight: 700; margin: 0 0 8px; }
.rb-winkeldetail__adres { font-style: normal; line-height: 1.6; margin-bottom: 14px; }
.rb-winkeldetail__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-soft); }
.rb-winkeldetail__media img { width: 100%; height: 100%; object-fit: cover; }
.rb-tijden { border-collapse: collapse; font-size: var(--text-sm); }
.rb-tijden th { text-align: left; font-weight: 600; padding: 3px 18px 3px 0; }
.rb-tijden td { padding: 3px 0; color: var(--color-text-secondary); }
.rb-winkelkaart { display: flex; flex-direction: column; gap: 4px; padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text-primary); }
.rb-winkelkaart:hover { border-color: var(--color-text-primary); }
.rb-winkelkaart span { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* Rouwblok op home: rustig, zonder overlay of felle kleur */
.rb-rouwblok { display: grid; grid-template-columns: minmax(0, 280px) 1fr; gap: 40px; align-items: center; background: var(--color-bg-soft); border-radius: var(--radius-lg); padding: 32px; }
.rb-rouwblok__foto { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-md); display: block; }
.rb-rouwblok__titel { font-size: var(--text-2xl); margin: 0 0 12px; }
.rb-rouwblok__tekst p { color: var(--color-text-secondary); max-width: 52ch; }
.rb-rouwblok__tekst .rb-btn { margin-top: 8px; }
@media (max-width: 720px) {
  .rb-rouwblok { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .rb-rouwblok__foto { max-width: 220px; }
}

/* ============================================================
   Meldingen (flash, alleen in de layout) en formulierfouten
   ============================================================ */
/* Flash uit de layout (Main.cfm), gecentreerd op de containerbreedte. Eigen klasse: .rb-melding (verderop) is de melding in het bestelblok. */
.rb-flash { max-width: var(--container-max); margin: 16px auto 0; padding: 12px 16px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; width: calc(100% - 2 * var(--container-pad)); }
.rb-flash--succes { background: var(--color-brand-green-soft); color: var(--color-brand-green-deep); }
.rb-flash--fout { background: var(--error-light); color: var(--error); }
/* Sessiebalk (rb.sessieBalk in gedeeld.js): blijft op 60 px staan, onder de smalle balk rb-hl-sticky (z-index 400). */
.rb-flash.rb-sessiebalk { position: sticky; top: 60px; z-index: 30; }
.rb-flash.rb-sessiebalk a { color: inherit; font-weight: 700; text-decoration: underline; }
.rb-formfout { background: var(--error-light); color: var(--error); border-radius: var(--radius-sm); padding: 10px 14px; font-size: var(--text-sm); margin: 0 0 16px; }
.rb-formfout p { margin: 0; }
.rb-formfout p + p { margin-top: 4px; }
/* Verborgen veld tegen bots: buiten beeld, niet voor schermlezers (aria-hidden) en niet via tab bereikbaar. */
.rb-verborgen-veld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   Knoppen en formuliervelden uit het design (checkout-stijl)
   ============================================================ */
.rb-btn--outline {
  background: var(--color-bg); color: var(--color-text-primary); border: 1.5px solid var(--color-border);
  padding: 11px 20px; font-size: var(--text-base); display: inline-flex; align-items: center; gap: 8px;
}
.rb-btn--outline:hover { border-color: var(--color-text-primary); }

.rb-co-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.rb-co-field label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary); }
.rb-co-field input, .rb-co-field select, .rb-co-field textarea {
  font: inherit; font-size: var(--text-base); color: var(--color-text-primary); background: var(--color-bg);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 11px 12px; width: 100%;
}
.rb-co-field textarea { resize: vertical; min-height: 120px; }
.rb-co-field input:focus-visible, .rb-co-field select:focus-visible, .rb-co-field textarea:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--color-brand-green-dark); }
.rb-co-field input[readonly] { background: var(--color-bg-soft); color: var(--color-text-secondary); }
.rb-co-hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.rb-co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.rb-co-field--full { grid-column: 1 / -1; }
.rb-co-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 6px;
  background: var(--color-btn-primary-bg); color: var(--color-text-inverse); border: 0; border-radius: var(--radius-sm);
  padding: 14px 20px; font: inherit; font-size: var(--text-base); font-weight: 700; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.rb-co-cta:hover { background: var(--color-btn-primary-hover); }
.rb-co-cta:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* De submitGuard (gedeeld.js) zet de knop uit terwijl het request loopt (Mollie kan seconden duren): laat dat zien. */
.rb-co-cta:disabled { opacity: .6; cursor: progress; }
form[aria-busy="true"] { cursor: progress; }

/* ============================================================
   Inhoudspagina's (zakelijk, klantenservice)
   ============================================================ */
.rb-page__hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
  max-width: var(--container-max); margin: 0 auto; padding: 24px var(--container-pad) 48px;
}
.rb-page__eyebrow { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--color-brand-green-deep); margin: 0 0 12px; }
.rb-page__title { font-size: clamp(2rem, 4vw, var(--text-4xl)); font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 16px; }
.rb-page__lead { font-size: var(--text-md); color: var(--color-text-secondary); line-height: 1.6; margin: 0 0 24px; max-width: 52ch; }
.rb-page__tekst { color: var(--color-text-secondary); line-height: 1.6; margin: 0 0 16px; max-width: 52ch; }
.rb-page__media { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-placeholder-bg); }
.rb-page__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-page__hero .rb-hero-split__usps { margin-top: 22px; }

.rb-h2 { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 24px; }
.rb-h2--midden { text-align: center; }
/* Juridische tekstpagina (privacyverklaring bezorgapp): leesbare regellengte, gewone lijsten. */
.rb-juridisch { max-width: 76ch; }
.rb-juridisch .rb-h2 { font-size: var(--text-xl); margin: 32px 0 12px; }
.rb-juridisch p, .rb-juridisch li { line-height: 1.6; }
.rb-juridisch ul { padding-left: 1.2em; margin: 0 0 16px; }
.rb-juridisch li { margin-bottom: 8px; }
.rb-juridisch__datum { color: var(--color-text-secondary); margin-top: 32px; }

.rb-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.rb-service { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px; background: var(--color-bg); }
.rb-service__media { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-placeholder-bg); }
.rb-service__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-service h3 { font-size: var(--text-md); font-weight: 700; margin: 0 0 4px; }
.rb-service p { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; line-height: 1.5; }

.rb-section-zacht { background: var(--color-bg-soft); padding: 56px var(--container-pad); }
.rb-section-zacht__inner { max-width: var(--container-max); margin: 0 auto; }
.rb-biz-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; padding: 0; margin: 0; }
.rb-tl-dot { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-brand-green); color: var(--color-text-inverse); font-weight: 800; margin-bottom: 12px; }

.rb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.rb-split--breed-links { grid-template-columns: 1.4fr 1fr; }
.rb-biz-form { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 28px; }
.rb-biz-form h3 { font-size: var(--text-lg); font-weight: 800; margin: 0 0 16px; }

.rb-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.rb-faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.rb-faq-item__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; font-weight: 700; cursor: pointer; list-style: none; }
.rb-faq-item__q::-webkit-details-marker { display: none; }
.rb-faq-item__q svg { flex-shrink: 0; color: var(--color-text-muted); transition: transform var(--dur-fast) var(--ease-out); }
.rb-faq-item[open] .rb-faq-item__q svg { transform: rotate(45deg); }
.rb-faq-item__q:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-md); }
.rb-faq-item__a { margin: 0; padding: 0 18px 18px; color: var(--color-text-secondary); line-height: 1.6; }

.rb-direct { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rb-direct__card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 22px; background: var(--color-bg); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rb-direct__icon { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-brand-green-soft); color: var(--color-brand-green-deep); display: inline-flex; align-items: center; justify-content: center; }
.rb-direct__t { font-size: var(--text-md); font-weight: 700; margin: 4px 0 0; }
.rb-direct__d { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 8px; line-height: 1.5; flex: 1; }

.rb-visit { background: var(--color-bg-soft); border-radius: var(--radius-md); padding: 24px; }
.rb-visit__lijst { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 14px; }
.rb-visit__lijst li { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
.rb-visit__lijst a { color: var(--color-text-primary); }
.rb-visit__lijst span { color: var(--color-text-secondary); }
.rb-visit__kvk { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }

@media (max-width: 900px) {
  .rb-page__hero, .rb-split, .rb-split--breed-links { grid-template-columns: 1fr; gap: 28px; }
  .rb-page__media { aspect-ratio: 16 / 10; }
  .rb-biz-steps { grid-template-columns: repeat(2, 1fr); }
  .rb-direct { grid-template-columns: 1fr; }
  .rb-services { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rb-co-grid { grid-template-columns: 1fr; }
  .rb-biz-steps { grid-template-columns: 1fr; }
  .rb-biz-form { padding: 20px; }
  .rb-service { grid-template-columns: 72px 1fr; padding: 14px; }
}

/* ============================================================
   Portaal: inloggen (particulier en zakelijk, zelfde opmaak)
   ============================================================ */
.rb-portal-login {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  max-width: var(--container-max); margin: 0 auto; padding: 56px var(--container-pad) 80px; min-height: 60vh;
}
.rb-portal-login__aside h1 { font-size: clamp(1.9rem, 4vw, var(--text-4xl)); font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 16px; }
.rb-portal-login__aside > p:not(.rb-page__eyebrow) { font-size: var(--text-md); color: var(--color-text-secondary); line-height: 1.6; margin: 0 0 22px; max-width: 46ch; }
.rb-portal-login__perks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.rb-portal-login__perks li { display: flex; gap: 10px; font-size: var(--text-sm); align-items: flex-start; }
.rb-portal-login__perks svg { color: var(--color-brand-green); flex-shrink: 0; margin-top: 2px; }
.rb-portal-login__perks strong { display: block; font-weight: 700; }
.rb-portal-login__perks span { color: var(--color-text-secondary); }
.rb-portal-login__card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 32px; max-width: 440px; width: 100%; justify-self: end; }
.rb-portal-login__card h2 { font-size: var(--text-xl); font-weight: 800; margin: 0 0 6px; letter-spacing: -0.01em; }
.rb-portal-login__card .sub { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 22px; line-height: 1.5; }
.rb-portal-login__links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: var(--text-xs); }
.rb-portal-login__links form { margin: 0; }
.rb-portal-login__links .rb-linkknop, .rb-portal-login__links .rb-linkknop:hover { font-size: var(--text-sm); color: var(--color-brand-green-deep); min-height: 44px; padding-block: 10px; }
.rb-portal-login .rb-co-vink { margin: 4px 0 6px; }
.rb-portal-hint { margin: 18px 0 0; padding: 12px 14px; background: var(--color-brand-green-soft); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--color-brand-green-deep); line-height: 1.5; }
@media (max-width: 900px) {
  .rb-portal-login { grid-template-columns: 1fr; gap: 28px; padding: 28px var(--container-pad) 56px; }
  .rb-portal-login__card { justify-self: stretch; max-width: none; order: -1; }
}

/* ============================================================
   Portaal: indeling met zijbalk (account en zakelijk)
   ============================================================ */
.rb-portal { max-width: var(--container-max); margin: 0 auto; padding: 28px var(--container-pad) 80px; display: grid; grid-template-columns: 240px 1fr; gap: 36px; align-items: start; }
.rb-portal__side { position: sticky; top: 84px; background: var(--color-bg-soft); border-radius: var(--radius-md); padding: 20px 16px; }
.rb-portal__acct { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.rb-portal__avatar { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--color-brand-green-deep); color: var(--color-text-inverse); font-weight: 800; font-size: var(--text-md); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rb-portal__avatar--licht { background: var(--color-brand-green); }
.rb-portal__acct-name { font-size: var(--text-sm); font-weight: 700; margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
.rb-portal__acct-meta { font-size: var(--text-xs); color: var(--color-text-muted-soft); margin: 2px 0 0; overflow-wrap: anywhere; }
.rb-portal__bestel { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--color-brand-green-deep); color: var(--color-text-inverse); font-size: var(--text-sm); font-weight: 700; text-decoration: none; transition: background var(--dur-fast) var(--ease-out); }
.rb-portal__bestel:hover { background: var(--color-brand-green-deeper); color: var(--color-text-inverse); }
.rb-portal__bestel:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rb-portal__menu { display: flex; flex-direction: column; gap: 2px; }
.rb-portal__menu a { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); text-decoration: none; padding: 10px 12px; border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.rb-portal__menu a:hover { background: var(--color-border-soft); color: var(--color-text-primary); }
.rb-portal__menu a.is-active { background: var(--color-bg); color: var(--color-text-primary); box-shadow: var(--shadow-card); }
.rb-portal__menu svg { flex-shrink: 0; opacity: 0.8; }
.rb-portal__side-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.rb-portal__contact { font-size: var(--text-xs); color: var(--color-text-secondary); line-height: 1.6; margin: 0 0 12px; overflow-wrap: anywhere; }
.rb-portal__contact strong { display: block; color: var(--color-text-primary); font-size: var(--text-sm); }
.rb-portal__contact a { color: var(--color-text-secondary); }
.rb-portal__main { min-width: 0; }
.rb-portal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 24px; flex-wrap: wrap; }
.rb-portal__head h1 { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.015em; margin: 0 0 4px; }
.rb-portal__head p { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }
.rb-portal__head-acties { display: flex; gap: 8px; }
@media (max-width: 900px) {
  .rb-portal { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px var(--container-pad) 56px; }
  .rb-portal__side { position: static; padding: 14px; }
  .rb-portal__menu { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .rb-portal__menu::-webkit-scrollbar { display: none; }
  .rb-portal__menu a { flex-shrink: 0; padding: 9px 14px; white-space: nowrap; }
  .rb-portal__side-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .rb-portal__contact { margin: 0; }
}

/* Statistiekkaarten, panelen, tabellen, knoppen en meldingen in het portaal */
.rb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 28px; }
.rb-stat { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px; }
.rb-stat__label { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.04em; font-weight: 700; text-transform: uppercase; margin: 0 0 8px; }
.rb-stat__value { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.015em; margin: 0; line-height: 1.1; }
.rb-stat__value--klein { font-size: var(--text-lg); }
.rb-stat__sub { font-size: var(--text-xs); color: var(--color-text-secondary); margin: 6px 0 0; }

.rb-panel { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 24px; }
.rb-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; gap: 16px; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.rb-panel__title { font-size: var(--text-md); font-weight: 700; margin: 0; }
.rb-panel__sub { font-size: var(--text-xs); color: var(--color-text-muted); margin: 3px 0 0; }
.rb-panel__body { padding: 20px; }
.rb-panel__body--flush { padding: 0; }
.rb-leeg-staat { color: var(--color-text-secondary); font-size: var(--text-sm); margin: 0 0 14px; }
.rb-leeg-staat:last-child { margin-bottom: 0; }

/* position: relative houdt een sr-only kolomkop binnen de scrollbox (anders schuift de hele pagina op mobiel). */
.rb-tablewrap { overflow-x: auto; position: relative; }
.rb-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.rb-table th { text-align: left; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); padding: 12px 20px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.rb-table td { padding: 14px 20px; border-bottom: 1px solid var(--color-border-soft); vertical-align: middle; }
.rb-table tr:last-child td { border-bottom: 0; }
.rb-table__ref { font-weight: 700; color: var(--color-text-primary); }
.rb-table__muted { color: var(--color-text-secondary); font-size: var(--text-xs); }
/* Op mobiel wordt elke rij een kaartje (zelfde patroon als tabel--kaart in het beheer): de kolomnaam komt uit data-label. */
@media (max-width: 700px) {
  .rb-table--kaart thead { display: none; }
  .rb-table--kaart, .rb-table--kaart tbody, .rb-table--kaart tfoot, .rb-table--kaart tr, .rb-table--kaart td { display: block; width: 100%; }
  .rb-table--kaart tr { padding: 12px 20px; border-bottom: 1px solid var(--color-border-soft); }
  .rb-table--kaart tr:last-child { border-bottom: 0; }
  .rb-table--kaart td { position: relative; padding: 3px 0 3px 102px; border: 0; min-height: 24px; overflow-wrap: anywhere; }
  .rb-table--kaart td::before { content: attr(data-label); position: absolute; left: 0; top: 4px; width: 92px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted-soft); }
  .rb-table--kaart td:not([data-label]) { padding-left: 0; }
  .rb-table--kaart td:not([data-label])::before { display: none; }
  .rb-table--kaart td:empty { display: none; }
  .rb-table--kaart td.rb-table__bedrag, .rb-table--kaart td.rb-table__actie { text-align: left; white-space: normal; }
}

.rb-gegevens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0; }
.rb-gegevens dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 2px; }
.rb-gegevens dd { margin: 0; overflow-wrap: anywhere; }

.rb-tbtn { display: inline-flex; align-items: center; gap: 6px; background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 7px 12px; font: inherit; font-size: var(--text-xs); font-weight: 700; color: var(--color-text-primary); cursor: pointer; text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.rb-tbtn:hover { border-color: var(--color-text-primary); }
.rb-tbtn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rb-tbtn--green { background: var(--color-brand-green); border-color: var(--color-brand-green); color: var(--color-text-inverse); }
.rb-tbtn--green:hover { background: var(--color-brand-green-dark); border-color: var(--color-brand-green-dark); }
.rb-tbtn--ghost { border-color: transparent; background: transparent; color: var(--color-text-secondary); }
.rb-tbtn--ghost:hover { background: var(--color-border-soft); color: var(--color-text-primary); border-color: transparent; }
.rb-tbtn--blok { width: 100%; justify-content: center; }
@media (max-width: 900px) { .rb-tbtn--blok { width: auto; } }

.rb-portal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.rb-portal-form .rb-co-field--full { grid-column: 1 / -1; }

.rb-notice { display: flex; gap: 14px; align-items: flex-start; background: var(--color-brand-green-soft); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 24px; }
.rb-notice__icon { width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--color-bg); color: var(--color-brand-green-deep); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rb-notice h4 { font-size: var(--text-sm); font-weight: 700; margin: 0 0 3px; color: var(--color-brand-green-deep); }
.rb-notice p { font-size: var(--text-xs); color: var(--color-text-primary); margin: 0; line-height: 1.5; }
.rb-notice__action { margin-left: auto; align-self: center; flex-shrink: 0; }
@media (max-width: 700px) {
  .rb-portal-form, .rb-gegevens { grid-template-columns: 1fr; }
  .rb-notice { flex-wrap: wrap; }
  .rb-notice__action { margin-left: 0; width: 100%; }
}

/* Eigen tekst van een gelegenheid (beheer), onder de producten op de eerste pagina. */
.rb-cat-tekst { max-width: 72ch; margin: 56px auto 0; color: var(--color-text-secondary); line-height: 1.7; font-size: 15px; }
.rb-cat-tekst p { margin: 0 0 1em; }

/* ============================================================
   Bestellen: winkelwagen, afrekenen en bedankpagina (besluit Roy 2026-10-15)
   ============================================================ */
.rb-bestel { max-width: var(--container-max); margin: 0 auto; padding: 32px var(--container-pad) 64px; }
.rb-bestel--smal { max-width: 720px; }
.rb-bestel__titel { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 12px; }
.rb-bestel__intro { color: var(--color-text-secondary); font-size: var(--text-md); margin: 0 0 20px; }
.rb-bestel__label { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-soft); color: var(--brand-deep); font-weight: 800; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 12px; border-radius: var(--radius-full); margin: 0 0 14px; }
.rb-bestel__label--let { background: var(--warning-light); color: var(--warning); }
.rb-bestel__leeg { text-align: center; padding: 48px 24px; border: 1px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-soft); }
.rb-bestel__leeg p { color: var(--color-text-secondary); margin: 0 0 16px; }
.rb-bestel__leeg .rb-bestel__leegtitel { font-size: var(--text-xl); font-weight: 700; color: var(--color-text-primary); margin-bottom: 6px; }
.rb-bestel__raster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.rb-bestel__samenvatting { margin: 24px 0; padding: 20px 22px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); }
.rb-bestel__samenvatting p { margin: 0 0 16px; line-height: 1.55; }
.rb-bestel .rb-btn-row { margin: 8px 0 12px; }

.rb-melding { display: flex; align-items: center; gap: 8px; border-radius: var(--radius-sm); padding: 10px 14px; font-size: var(--text-sm); margin: 0 0 16px; }
.rb-melding--ok { background: var(--success-light); color: var(--success); }
.rb-melding--let { background: var(--warning-light); color: var(--warning); }
/* Binnen het bestelblok en het portaal volgt de melding gewoon de kolom (de flash van de layout heet .rb-flash). */
.rb-bestel .rb-melding, .rb-portal .rb-melding { font-weight: 600; }

/* Winkelwagen */
.rb-wagen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.rb-wagen__regel { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--color-border); }
.rb-wagen__foto { display: block; width: 120px; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-placeholder-bg); }
.rb-wagen__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-wagen__naam { font-size: var(--text-md); font-weight: 700; color: var(--color-text-primary); text-decoration: none; }
.rb-wagen__naam:hover { color: var(--color-brand-green-deep); text-decoration: underline; }
.rb-wagen__sub { margin: 4px 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.rb-wagen__kaarttekst { margin: 4px 0 0; font-size: var(--text-sm); font-style: italic; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.rb-wagen__acties { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.rb-wagen__weg { margin: 0; }
.rb-linkknop--sterk { color: var(--color-brand-green-deep); font-weight: 700; }
.rb-bestel--wagen { max-width: 880px; }
.rb-wagen__totalen { margin: 20px 0 0; padding: 0; display: grid; gap: 8px; justify-content: end; }
.rb-wagen__totalen > div { display: grid; grid-template-columns: minmax(160px, auto) minmax(120px, auto); gap: 24px; align-items: baseline; }
.rb-wagen__totalen dt { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.rb-wagen__totalen dd { margin: 0; text-align: right; font-size: var(--text-sm); }
.rb-wagen__totalen .rb-wagen__later { color: var(--color-text-secondary); }
.rb-wagen__totalen .rb-wagen__totaal { border-top: 1px solid var(--color-border); padding-top: 10px; margin-top: 4px; }
.rb-wagen__totalen .rb-wagen__totaal dt { color: var(--color-text-primary); font-weight: 800; font-size: var(--text-md); }
.rb-wagen__totalen .rb-wagen__totaal dt small { font-weight: 400; font-size: var(--text-xs); color: var(--color-text-secondary); }
.rb-wagen__totalen .rb-wagen__totaal dd { font-weight: 800; font-size: var(--text-lg); }
.rb-pdp2__wijzig { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--brand-deep); font-size: var(--text-sm); font-weight: 600; }
.rb-pdp2__wijzig a { color: inherit; }
.rb-wagen__prijs { margin: 0; font-weight: 700; font-size: var(--text-md); white-space: nowrap; }
.rb-linkknop { background: none; border: 0; padding: 0; font: inherit; font-size: var(--text-sm); color: var(--color-text-secondary); text-decoration: underline; cursor: pointer; }
/* Review 14 (B16): Wijzigen en Verwijderen in de winkelwagen hadden een tikdoel van ongeveer 18 px. */
.rb-wagen__acties .rb-linkknop { display: inline-flex; align-items: center; min-height: 44px; }
.rb-linkknop:hover { color: var(--error); }
.rb-linkknop:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Overzicht (rechts); sticky houdt 60 px vrij voor de smalle kopbalk */
.rb-overzicht { position: sticky; top: 76px; padding: 24px 26px; border: 0; border-radius: var(--radius-lg); background: var(--color-bg-soft); }
.rb-overzicht__titel { font-size: var(--text-lg); font-weight: 700; margin: 0 0 12px; }
.rb-overzicht__items { list-style: none; margin: 0 0 12px; padding: 0; font-size: var(--text-sm); }
.rb-overzicht__items li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--color-border); }
.rb-overzicht__items small { display: block; color: var(--color-text-secondary); font-size: var(--text-xs); overflow-wrap: anywhere; }
.rb-overzicht__items li > span:last-child { white-space: nowrap; }
.rb-overzicht__bedragen { margin: 0 0 8px; }
.rb-overzicht__bedragen div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: var(--text-sm); }
.rb-overzicht__bedragen dt, .rb-overzicht__bedragen dd { margin: 0; }
.rb-overzicht__bedragen .rb-overzicht__totaal { border-top: 1px solid var(--line-strong); margin-top: 4px; padding-top: 10px; font-size: var(--text-md); font-weight: 800; }
.rb-overzicht__totaalregel { display: flex; justify-content: space-between; font-size: var(--text-md); margin: 12px 0 0; }
.rb-overzicht__zacht { color: var(--color-text-muted-soft); }
.rb-overzicht__noot { font-size: var(--text-xs); color: var(--color-text-secondary); margin: 8px 0 0; }
.rb-overzicht__verder { display: block; text-align: center; margin-top: 14px; font-size: var(--text-sm); color: var(--color-text-secondary); }
.rb-overzicht .rb-co-cta { text-decoration: none; margin-top: 12px; }
.rb-overzicht__dicht { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-secondary); }
.rb-overzicht__dicht p { margin: 0 0 4px; line-height: 1.5; }
.rb-overzicht__dicht .rb-overzicht__dichttitel { font-weight: 700; color: var(--color-text-primary); font-size: var(--text-md); }
.rb-overzicht__mail { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; color: var(--color-text-primary); font-weight: 600; overflow-wrap: anywhere; }

/* Afrekenen (design Roy 2026-11-06: drie stappen in kaarten, rechts Jouw bestelling, de knop rechtsonder als pil) */
.rb-stappen { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.rb-stap { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px 26px 12px; margin: 0; min-width: 0; background: var(--color-bg); }
.rb-stap__kop { display: flex; align-items: center; gap: 10px; font-size: var(--text-xl); font-weight: 700; padding: 0; margin: 0 0 18px; float: left; width: 100%; }
.rb-stap__kop + * { clear: both; }
.rb-co-opt { font-weight: 400; color: var(--color-text-muted); }
.rb-co-field--paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.rb-co-field--paar > div { display: flex; flex-direction: column; gap: 6px; }
.rb-co-vink { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-sm); margin: 0 0 14px; cursor: pointer; }
.rb-co-vink input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-deep); flex: none; }
.rb-bezorgmelding { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: var(--text-sm); background: var(--success-light); color: var(--success); }
.rb-bezorgmelding.is-fleurop { background: var(--info-light); color: var(--info); }
/* Review 9: een tijdvak dat vandaag niet meer kan is een waarschuwing, geen succes; leeg neemt hij geen ruimte in. */
.rb-bezorgmelding--let { background: var(--warning-light); color: var(--warning); }
.rb-bezorgmelding--let:empty { padding: 0; margin: 0; }

/* Particulier of zakelijk (stap 2): twee tegels naast elkaar; zakelijk toont de factuurvelden (CSS :has, zonder JS staan ze altijd). */
.rb-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 18px; }
.rb-seg__optie { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; font-weight: 600; }
.rb-seg__optie input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-text-primary); flex: none; }
.rb-seg__optie:has(input:checked) { border-color: var(--color-text-primary); box-shadow: inset 0 0 0 1px var(--color-text-primary); }
/* Review 14 (B17): zonder :has() zet site.js is-gekozen op het label; een eigen regel, want een selectorlijst met een
   onbekende selector vervalt in zijn geheel. */
.rb-seg__optie.is-gekozen { border-color: var(--color-text-primary); box-shadow: inset 0 0 0 1px var(--color-text-primary); }
.rb-stap--gegevens:has(.rb-seg input[value="particulier"]:checked) .rb-co-field--zakelijk { display: none; }

/* Bezorgdag (stap 1): tegels met de dag, de datum en wat erbij hoort; Later opent de datumkiezer eronder. */
.rb-dagtegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin: 0 0 14px; }
.rb-dagtegel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 112px; padding: 12px 8px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); cursor: pointer; text-align: center; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.rb-dagtegel input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.rb-dagtegel:has(input:checked) { border-color: var(--color-text-primary); box-shadow: inset 0 0 0 1px var(--color-text-primary); }
.rb-dagtegel.is-gekozen { border-color: var(--color-text-primary); box-shadow: inset 0 0 0 1px var(--color-text-primary); }
.rb-dagtegel:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rb-dagtegel:hover { border-color: var(--color-text-secondary); }
.rb-dagtegel.is-uit { opacity: .5; cursor: not-allowed; }
.rb-dagtegel__dag { font-size: var(--text-sm); color: var(--color-text-secondary); }
.rb-dagtegel__datum { font-size: var(--text-xl); font-weight: 700; line-height: 1.1; }
.rb-dagtegel__sub { font-size: var(--text-xs); font-weight: 700; color: var(--color-brand-green-deep); min-height: 1.2em; }
.rb-dagtegel--later { border-style: dashed; }
.rb-dagtegel--later .rb-dagtegel__ico { color: var(--color-text-primary); }
.rb-dagtegel--later .rb-dagtegel__sub { color: var(--color-brand-green-deep); }
.rb-dagtegel--later:has(input:checked) { border-style: solid; }
.rb-dagkiezer { padding: 16px 18px; border-radius: var(--radius-md); background: var(--color-bg-soft); margin: 0 0 18px; }
.rb-dagkiezer[hidden] { display: none; }
.rb-dagkiezer label { display: block; font-size: var(--text-sm); font-weight: 600; margin: 0 0 8px; }
.rb-dagkiezer__rij { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.rb-dagkiezer__rij input { max-width: 240px; font: inherit; font-size: var(--text-base); padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.rb-dagkiezer__rij p { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); flex: 1 1 260px; }
.rb-co-label { font-size: var(--text-sm); font-weight: 600; margin: 0 0 8px; }
.rb-tijdvakken { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.rb-tijdvak { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-sm); }
.rb-tijdvak input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-deep); flex: none; }
.rb-tijdvak:has(input:checked) { border-color: var(--color-selector-active); background: var(--color-bg-soft); font-weight: 700; }
.rb-tijdvak.is-gekozen { border-color: var(--color-selector-active); background: var(--color-bg-soft); font-weight: 700; }

/* Knoppen onder een stap: terug links, de hoofdknop als pil rechts (design) */
.rb-stapknoppen { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.rb-stapknoppen__terug { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-primary); font-weight: 600; text-decoration: underline; }
.rb-stapknoppen__terug:hover { text-decoration: none; }
.rb-stapknoppen .rb-stapknoppen__verder { width: auto; min-width: 240px; margin: 0; text-decoration: none; border-radius: var(--radius-full); padding: 16px 30px; font-size: var(--text-md); background: var(--color-brand-green-deep); }
.rb-stapknoppen .rb-stapknoppen__verder:hover { background: var(--color-brand-green-deeper); }

/* Stappenbalk (design): nummer, Stap n en de titel, met een balk eronder die groen wordt */
.rb-stapbalk { margin: 0 0 28px; }
.rb-stapbalk__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rb-stapbalk__stap { position: relative; min-width: 0; padding-bottom: 12px; }
.rb-stapbalk__stap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px; background: var(--color-border); }
.rb-stapbalk__stap.is-klaar::after, .rb-stapbalk__stap.is-nu::after { background: var(--color-brand-green); }
.rb-stapbalk__link { display: flex; align-items: center; gap: 12px; color: var(--color-text-secondary); text-decoration: none; }
a.rb-stapbalk__link:hover .rb-stapbalk__tekst { text-decoration: underline; color: var(--color-text-primary); }
.rb-stapbalk__bol { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-full); border: 2px solid var(--color-border); background: var(--color-bg); color: var(--color-text-secondary); font-weight: 800; font-size: var(--text-sm); }
.rb-stapbalk__tekst { display: flex; flex-direction: column; font-size: var(--text-md); font-weight: 600; line-height: 1.25; min-width: 0; }
.rb-stapbalk__tekst small { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted-soft); }
.rb-stapbalk__stap.is-klaar .rb-stapbalk__bol { border-color: var(--color-brand-green); background: var(--color-brand-green-soft); color: var(--color-brand-green-deep); }
.rb-stapbalk__stap.is-nu .rb-stapbalk__bol { border-color: var(--color-brand-green-deep); background: var(--color-brand-green-deep); color: var(--color-text-inverse); }   /* review 14: wit op het lichte merkgroen haalt geen AA */
.rb-stapbalk__stap.is-nu .rb-stapbalk__tekst { color: var(--color-text-primary); font-weight: 700; }

/* Jouw bestelling (rechts, design): boeket met foto, kaartje, bedragen, en alleen beloftes die kloppen */
.rb-kort { list-style: none; margin: 0 0 8px; padding: 0; }
.rb-kort__regel { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-border); align-items: start; }
.rb-kort__foto { width: 88px; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); }
.rb-kort__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-kort__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rb-kort__naam { font-weight: 700; font-size: var(--text-md); }
.rb-kort__sub { font-size: var(--text-sm); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.rb-kort__prijs { font-weight: 700; font-size: var(--text-md); margin-top: 4px; }
.rb-kort__kaartje { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--color-border); align-items: start; }
.rb-kort__kaartje-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-brand-green-soft); color: var(--color-brand-green-deep); }
.rb-kort__kaartje-naam { display: block; font-weight: 600; font-size: var(--text-sm); margin: 2px 0; }
.rb-kort__kaarttekst { display: block; font-size: var(--text-sm); font-style: italic; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.rb-overzicht__totaal small { font-weight: 500; color: var(--color-text-muted); font-size: var(--text-xs); }
.rb-overzicht__usp { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--color-border); }
.rb-overzicht__usp li { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-text-secondary); padding: 4px 0; }
.rb-overzicht__usp svg { color: var(--color-brand-green-deep); flex: none; }

/* Stap 3: controleer je bestelling, de betaalkeuze en te betalen */
.rb-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.rb-check__blok { padding: 18px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.rb-check__blok p { margin: 0 0 6px; line-height: 1.6; font-size: var(--text-sm); }
.rb-check__kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 10px; }
.rb-check__titel { font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0; }
.rb-check__naam { font-size: var(--text-md); font-weight: 700; margin: 0 0 8px; }
.rb-check__zacht { color: var(--color-text-secondary); font-size: var(--text-sm); }
.rb-check__wijzig { font-size: var(--text-sm); font-weight: 600; color: var(--color-brand-green-deep); flex: none; }
.rb-check__breek { overflow-wrap: anywhere; }
.rb-check__dag { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 16px; font-weight: 600; }
.rb-check__dag > span:nth-child(2) { flex: 1; min-width: 0; }
.rb-check__dagico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-brand-green-soft); color: var(--color-brand-green-deep); }
.rb-betaalkeuze { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
.rb-betaaloptie { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; }
.rb-betaaloptie:has(input:checked) { border-color: var(--color-text-primary); box-shadow: inset 0 0 0 1px var(--color-text-primary); }
.rb-betaaloptie.is-gekozen { border-color: var(--color-text-primary); box-shadow: inset 0 0 0 1px var(--color-text-primary); }
.rb-betaaloptie input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--color-text-primary); flex: none; }
.rb-betaaloptie small { display: block; color: var(--color-text-secondary); font-size: var(--text-sm); }
.rb-betaalblok { border: 2px solid var(--color-text-primary); padding-bottom: 22px; }
.rb-betaalblok__kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 0 0 16px; }
.rb-betaalblok__bedrag { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.01em; }
.rb-betaalblok .rb-betaalblok__knop { width: 100%; margin: 0 0 12px; border-radius: var(--radius-full); padding: 18px 24px; font-size: var(--text-md); background: var(--color-brand-green-deep); }
.rb-betaalblok .rb-betaalblok__knop:hover { background: var(--color-brand-green-deeper); }
.rb-betaalnoot { font-size: var(--text-xs); color: var(--color-text-secondary); margin: 0 0 14px; text-align: center; line-height: 1.6; }

/* Na toevoegen op de productpagina (Roy 2026-11-06): de bevestiging met het mandje of verder winkelen */
.rb-toegevoegd { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; max-width: var(--container-max); margin: 12px auto 0; padding: 14px 18px; width: calc(100% - 2 * var(--container-pad)); border-radius: var(--radius-md); background: var(--color-brand-green-soft); color: var(--color-brand-green-deep); font-weight: 600; }
.rb-toegevoegd__vink { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-brand-green-deep); color: var(--color-text-inverse); flex: none; }
.rb-toegevoegd__tekst { flex: 1 1 200px; }
.rb-toegevoegd__knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.rb-toegevoegd .rb-btn--primary { border-radius: var(--radius-full); }
.rb-cart__count.is-bump { animation: rb-bump 420ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes rb-bump { 40% { transform: scale(1.25); } }

@media (max-width: 900px) {
  .rb-bestel__raster { grid-template-columns: minmax(0, 1fr); }
  .rb-overzicht { position: static; }
  .rb-check { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 560px) {
  .rb-stapbalk__lijst { gap: 6px; }
  .rb-stapbalk__link { flex-direction: column; align-items: flex-start; gap: 6px; }
  .rb-stapbalk__bol { width: 30px; height: 30px; }
  .rb-stapbalk__tekst { font-size: var(--text-xs); }
  .rb-stap { padding: 18px 16px 8px; }
  .rb-seg { grid-template-columns: 1fr; }
  .rb-dagtegels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rb-stapknoppen { flex-direction: column-reverse; align-items: stretch; }
  .rb-stapknoppen .rb-stapknoppen__verder { width: 100%; min-width: 0; }
  .rb-betaalblok__kop { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .rb-bestel { padding-top: 20px; }
  .rb-bestel__titel { font-size: var(--text-2xl); }
  .rb-wagen__regel { grid-template-columns: 80px minmax(0, 1fr); }
  .rb-wagen__foto { width: 80px; }
  .rb-wagen__prijs { grid-column: 2; }
  .rb-wagen__totalen { justify-content: stretch; }
  .rb-wagen__totalen > div { grid-template-columns: 1fr auto; }
  .rb-stap { padding: 16px 14px 4px; }
  .rb-bestel .rb-co-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Bedankpagina (design Roy 2026-10-16) */
.rb-bedankt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: start; margin-top: 8px; }
.rb-bedankt__vink { display: grid; place-items: center; width: 80px; height: 80px; border-radius: var(--radius-full); background: var(--color-brand-green-soft); color: var(--color-brand-green-deep); margin-bottom: 28px; }
.rb-bedankt__titel { font-size: var(--text-4xl); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 18px; max-width: 12ch; }
.rb-bedankt__lead { font-size: var(--text-lg); line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 14px; max-width: 46ch; }
.rb-bedankt__nummer { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 36px; }
.rb-bedankt__nummer strong { color: var(--color-text-primary); }
.rb-bedankt__kop { font-size: var(--text-xl); font-weight: 700; margin: 0 0 20px; }
.rb-tijdlijn { list-style: none; margin: 0 0 36px; padding: 0; }
.rb-tijdlijn__stap { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding-bottom: 26px; }
.rb-tijdlijn__stap:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--color-border); }
.rb-tijdlijn__bol { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-full); border: 2px solid var(--color-border); background: var(--color-bg); color: var(--color-text-secondary); font-weight: 700; }
.rb-tijdlijn__stap.is-klaar .rb-tijdlijn__bol { background: var(--color-brand-green-deep); border-color: var(--color-brand-green-deep); color: var(--color-text-inverse); }
.rb-tijdlijn__titel { font-size: var(--text-md); font-weight: 700; margin: 8px 0 4px; }
.rb-tijdlijn__tekst { margin: 0; color: var(--color-text-secondary); line-height: 1.5; overflow-wrap: anywhere; }
.rb-bedankt__knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.rb-bedankt__knoppen .rb-btn { border-radius: var(--radius-full); padding-left: 28px; padding-right: 28px; }
.rb-bedankt__knoppen .rb-btn--primary { background: var(--color-brand-green-deep); border-color: var(--color-brand-green-deep); color: var(--color-text-inverse); }
.rb-bedankt__knoppen .rb-btn--primary:hover { background: var(--color-brand-green-deeper); border-color: var(--color-brand-green-deeper); }
.rb-bedankt__kaart { border-radius: var(--radius-lg); background: var(--color-bg-soft); overflow: hidden; }
.rb-bedankt__foto { aspect-ratio: 1; background: var(--color-placeholder-bg); }
.rb-bedankt__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rb-bedankt__inhoud { padding: 24px 28px 26px; }
.rb-bedankt__naam { font-size: var(--text-xl); font-weight: 700; margin: 0 0 4px; }
.rb-bedankt__sub { color: var(--color-text-secondary); margin: 0 0 12px; }
.rb-bedankt__rijen { margin: 8px 0 0; }
.rb-bedankt__rijen div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--color-border); }
.rb-bedankt__rijen dt { color: var(--color-text-secondary); margin: 0; }
.rb-bedankt__rijen dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.rb-bedankt__rijen .rb-bedankt__totaal { font-size: var(--text-lg); font-weight: 800; }
.rb-bedankt__rijen .rb-bedankt__totaal dt { color: var(--color-text-primary); }
.rb-bedankt__account { margin-top: 20px; padding: 22px 26px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); }
.rb-bedankt__account p { margin: 0 0 10px; color: var(--color-text-secondary); line-height: 1.6; }
.rb-bedankt__account .rb-bedankt__accounttitel { font-size: var(--text-md); font-weight: 700; color: var(--color-text-primary); }
.rb-bedankt__account a { font-weight: 700; color: var(--color-brand-green-deep); }
@media (max-width: 900px) {
  .rb-bedankt { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .rb-bedankt__vink { width: 64px; height: 64px; margin-bottom: 20px; }
}

/* Zakelijke kalender (portaal) */
.rb-kal-bron { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand-deep); font-size: var(--text-xs); font-weight: 700; }
.rb-table__uit td { color: var(--color-text-muted); }
.rb-table__actie { text-align: right; white-space: nowrap; }
.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; }

/* Venster (native dialog) in het portaal, zoals Moment toevoegen op de kalender. Knoppen: hoofdactie links,
   annuleren rechts (besluit Roy 2026-10-17). Mobiel schermvullend. */
.rb-venster { width: min(640px, calc(100vw - 32px)); max-height: min(90vh, 900px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--color-bg); color: var(--color-text-primary); box-shadow: var(--shadow-hover); }
.rb-venster::backdrop { background: var(--scrim); }
.rb-venster__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 12px; border-bottom: 1px solid var(--color-border); }
.rb-venster__titel { font-size: var(--text-xl); font-weight: 800; margin: 0; }
.rb-venster__sub { margin: 4px 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.rb-venster__sluit { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-full); border: 0; background: var(--color-bg-soft); color: var(--color-text-primary); cursor: pointer; }
.rb-venster__sluit:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rb-venster__body { padding: 16px 24px 24px; }
.rb-venster__voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
.rb-venster__voet .rb-co-cta { width: auto; margin-top: 0; }
@media (max-width: 600px) {
  .rb-venster { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}
/* Kalender: keuze herinnering of boeket in het venster Moment toevoegen. */
.rb-kal-actie { border: 0; padding: 0; margin: 4px 0 12px; }
.rb-kal-actie legend { font-weight: 700; font-size: var(--text-sm); margin-bottom: 8px; padding: 0; }
.rb-kal-noot { margin: 0 0 14px; }
/* Kalender: een of meer boeketten op hetzelfde adres (naam, budget, weghalen; kaarttekst eronder). */
.rb-kal-ontvangers { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.rb-kal-tijdvak { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }   /* stap 6; review 12: rb-co-field zet column, hier weer een chip-rij */
.rb-kal-tijdvak .rb-tijdvak { font-weight: 400; }   /* review 12: de label-regel van rb-co-field maakte elke chip vet */
.rb-kal-tijdvak legend { width: 100%; padding: 0; margin-bottom: 6px; font-weight: 600; font-size: var(--text-sm); }
.rb-kal-ontvangers__kop { font-weight: 700; font-size: var(--text-sm); margin: 0; }
.rb-kal-ontvanger { display: grid; grid-template-columns: 2fr 1fr auto; gap: 0 12px; align-items: end; padding: 12px 14px 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft); }
.rb-kal-ontvanger__kaart { grid-column: 1 / -1; }
.rb-kal-ontvanger__weg { margin-bottom: 22px; }
.rb-kal-ontvangers > [data-kal-erbij] { align-self: flex-start; }
@media (max-width: 600px) {
  .rb-kal-ontvanger { grid-template-columns: 1fr 1fr; }
  .rb-kal-ontvanger__weg { grid-column: 1 / -1; justify-self: start; margin-bottom: 10px; }
}
.rb-kal-jaarlijks { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); margin: 4px 0 12px; cursor: pointer; }
.rb-kal-jaarlijks input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-deep); flex: none; }
/* Venster: de vraag "Stoppen?" bovenin, voordat ingevulde gegevens verloren gaan (site.js, vensterSluit). */
.rb-venster__vraag { position: sticky; top: 0; z-index: 2; padding: 16px 24px; background: var(--color-promo-bg); border-bottom: 1px solid var(--color-border); }
.rb-venster__vraag p { margin: 0 0 12px; font-weight: 700; }
.rb-venster__vraag-knoppen { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rb-venster__vraag-knoppen .rb-co-cta { width: auto; margin-top: 0; }
/* Portaal: detail van een bestelling (views/klant/bestelling.cfm). */
.rb-table__ref[href] { text-decoration: underline; text-underline-offset: 3px; }
.rb-terug { margin: 0 0 14px; font-size: var(--text-sm); }
.rb-terug a { display: inline-flex; align-items: center; gap: 4px; color: var(--color-brand-green-deep); font-weight: 700; text-decoration: none; }
.rb-status { display: inline-flex; padding: 4px 12px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; background: var(--color-bg-soft); color: var(--color-text-primary); white-space: nowrap; }
.rb-status--afgeleverd, .rb-status--doorgestuurd { background: var(--color-brand-green-soft); color: var(--color-brand-green-deep); }
.rb-status--niet_afgeleverd, .rb-status--geannuleerd { background: var(--color-promo-bg); color: var(--color-text-secondary); }
.rb-table__bedrag { text-align: right; white-space: nowrap; }
.rb-table__totaal td { font-weight: 800; border-top: 1.5px solid var(--color-border); }
.rb-bestelregel { display: flex; gap: 12px; align-items: center; }
.rb-bestelregel__foto { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-placeholder-bg); flex: none; }
.rb-table th.rb-table__bedrag { text-align: right; }
.rb-factuurlink { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-weight: 700; white-space: nowrap; }
/* Afrekenen: optionele factuurgegevens van een bedrijf (uitklapbaar). */
.rb-co-factuur { margin-top: 6px; border-top: 1px solid var(--color-border); padding-top: 12px; }
.rb-co-factuur summary { cursor: pointer; font-weight: 700; font-size: var(--text-sm); margin-bottom: 10px; }

/* ===== Print: alleen de inhoud, donkere tekst op wit. Kop, balk, menu's, voet, knoppen en vensters weg. ===== */
@media print {
  body { display: block; background: var(--color-bg); color: var(--ink); }
  /* !important: printverbergen moet winnen van de componentregels (bewuste uitzondering). */
  .rb-header, .rb-hl-sticky, .rb-ss, .rb-drawer, .rb-footer, .skip-link, .rb-flash, .rb-filterknop, .rb-filterlade,
  .rb-lightbox, .rb-kaartdialoog, .rb-venster, .rb-namens, .rb-btn, .rb-tbtn, .rb-linkknop, .rb-pdp2__cta, .rb-pdp2__arrow, .rb-pdp2__zoom, button { display: none !important; }
  a { color: var(--ink); text-decoration: none; }
  .rb-panel, .rb-product { box-shadow: none; break-inside: avoid; }
  img { break-inside: avoid; }
}

/* Tijdvak dat vandaag niet meer kan (bezorger vertrokken, BezorgKansService). */
.rb-tijdvak.is-uit, .rb-dag.is-uit { opacity: .45; }
.rb-tijdvak.is-uit input, .rb-dag.is-uit input { cursor: not-allowed; }

/* Bestellen namens een zakelijke klant (beheer, stap 7): een vaste balk bovenaan de winkel. */
/* Vast onderaan (review 9): de kop scrolt weg en de smalle balk bovenin is van de winkel; de balk blijft zo altijd in beeld. */
/* Review 11: een veld met focus valt niet onder de sticky namensbalk (WCAG 2.4.11), en niet onder de sticky kopbalk. */
html { scroll-padding-top: 68px; }
html:has(body.rb-met-namens) { scroll-padding-bottom: var(--namens-h); }
.rb-namens { position: sticky; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--brand-deep); color: var(--color-text-inverse); font-size: 15px; }
.rb-namens :focus-visible { outline-color: var(--color-text-inverse); }
.rb-namens form { margin: 0; }
.rb-namens__stop { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--color-text-inverse); color: var(--brand-deep); font-weight: 700; cursor: pointer; }