/* ============================================================
   BoXXer — theme.css
   Alle tokens komen uit brand_brief.json (colors / fonts / buttons).
   Overschrijft de standaard daisyUI-thema-variabelen.
   ============================================================ */

:root,
[data-theme='boxxer'] {
  /* --- kleuren uit brief.colors --- */
  --bx-primary: #009113;
  --bx-secondary: #ff0030;
  --bx-accent: #ffd703;
  --bx-bg: #ffffff;
  --bx-surface: #f8f8f8;
  --bx-text: #111111;
  --bx-text-muted: #767674;
  --bx-border: #e8e8e8;
  --bx-success: #009113;
  --bx-promo-bar-bg: #ffffff;
  --bx-promo-bar-text: #111111;
  --bx-header-bg: #111111;
  --bx-footer-bg: #111111;
  --bx-button-bg: #009113;
  --bx-button-text: #ffffff;

  /* footer laag 2 + 3 (zie brief.colors_notes) */
  --bx-footer-mid-bg: #ffffff;
  --bx-footer-strip-bg: #f2f2f2;

  /* --- typografie uit brief.fonts --- */
  --bx-font-heading: 'Rubik', sans-serif;
  --bx-font-body: 'Rubik', sans-serif;

  /* --- knoppen uit brief.buttons --- */
  --bx-btn-radius: 8px;
  --bx-btn-text-transform: none; /* uppercase: false */

  /* daisyUI-kernvariabelen overschrijven.
     daisyUI 4 verwacht OKLCH-componenten (L C H), geen HSL — deze triplets
     zijn exact de briefkleuren hierboven, omgezet naar oklch(). */
  --p: 56.956% 0.188522 143.341149; /* primary   #009113 */
  --pc: 100% 0 0; /* primary-content   #ffffff */
  --s: 63.0379% 0.255068 24.178999; /* secondary #ff0030 */
  --sc: 100% 0 0; /* secondary-content #ffffff */
  --a: 88.6807% 0.181847 95.297757; /* accent    #ffd703 */
  --ac: 17.7638% 0 0; /* accent-content  #111111 */
  --n: 17.7638% 0 0; /* neutral         #111111 */
  --nc: 100% 0 0; /* neutral-content   #ffffff */
  --b1: 100% 0 0; /* base-100          #ffffff */
  --b2: 97.9129% 0 0; /* base-200      #f8f8f8 */
  --b3: 93.0999% 0 0; /* base-300      #e8e8e8 */
  --bc: 17.7638% 0 0; /* base-content  #111111 */
  --in: 17.7638% 0 0;
  --su: 56.956% 0.188522 143.341149; /* success #009113 */
  --suc: 100% 0 0;
  --wa: 88.6807% 0.181847 95.297757; /* warning #ffd703 */
  --er: 63.0379% 0.255068 24.178999; /* error   #ff0030 */

  /* daisyUI's oklch()-vars gebruiken intern var(--fallback-X, oklch(...)).
     daisyUI's eigen basis-CSS zet --fallback-p/--fallback-s/etc. altijd op
     eigen (blauw/paars) hex-kleuren, zowel bij ontbrekende oklch()-support
     als bij prefers-color-scheme:dark — beide onafhankelijk van welk
     data-theme actief is. Zonder deze overrides "wint" die daisyUI-fallback
     de cascade (gelijke specificiteit :root, media-regel is niet relevant
     voor specificiteit) zodra de browser/OS in dark mode staat, waardoor
     bv. de statuspunt op "Nu geopend" blauw i.p.v. groen oogt. Hex-versies
     van dezelfde briefkleuren hierboven, zodat de fallback altijd matcht. */
  --fallback-p: #009113;
  --fallback-pc: #ffffff;
  --fallback-s: #ff0030;
  --fallback-sc: #ffffff;
  --fallback-a: #ffd703;
  --fallback-ac: #111111;
  --fallback-n: #111111;
  --fallback-nc: #ffffff;
  --fallback-b1: #ffffff;
  --fallback-b2: #f8f8f8;
  --fallback-b3: #e8e8e8;
  --fallback-bc: #111111;
  --fallback-su: #009113;
  --fallback-suc: #ffffff;
  --fallback-wa: #ffd703;
  --fallback-wac: #111111;
  --fallback-er: #ff0030;
  --fallback-erc: #ffffff;

  --rounded-box: 8px;
  --rounded-btn: 8px;
  --rounded-badge: 4px;
  --btn-text-case: none;
}

/* ------------------------------------------------------------
   Basis
   ------------------------------------------------------------ */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--bx-font-body);
  color: var(--bx-text);
  background-color: var(--bx-bg);
}

/* Het stockthema laadt catalog/view/stylesheet/bootstrap.css vóór
   daisyui.css/theme.css (zie header.twig). Bootstrap's eigen
   .text-primary/.text-secondary/.bg-secondary/.bg-primary-utilities
   gebruiken dezelfde klassennamen als daisyUI maar met !important en
   Bootstrap's eigen blauw/grijs (--bs-primary-rgb/--bs-secondary-rgb) —
   die winnen dus altijd van de daisyUI-regel, ongeacht welke merkkleur
   in --p/--s hierboven staat (bv. de statuspunt "Nu geopend" oogde
   blauw i.p.v. groen, de "XXL-STORE"-badge grijs i.p.v. rood). Hier
   herstellen we de merkkleur met evenveel gewicht (!important). */
.text-primary {
  color: var(--fallback-p) !important;
}
.text-secondary {
  color: var(--fallback-s) !important;
}
.bg-primary {
  background-color: var(--fallback-p) !important;
}
.bg-secondary {
  background-color: var(--fallback-s) !important;
}

/* Favorietenster op de winkelkaart (informatie/winkels): daisyui.css is een
   vooraf gepurgede build — .hover\:text-accent bestaat daar niet (nergens
   anders gebruikt) en de losstaande .text-accent-regel wordt in bronvolgorde
   weer overstemd door .text-base-content\/70, die al standaard op de knop
   staat. Hier expliciet vastgezet: contour geel bij hover, volledig geel
   gevuld zodra site.js de "text-accent"-klasse toevoegt (favoriet actief). */
[data-bx-store-favorite]:hover {
  color: var(--fallback-a) !important;
}
[data-bx-store-favorite].text-accent {
  color: var(--fallback-a) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family: var(--bx-font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.bx-container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 1024px) {
  .bx-container {
    padding-inline: 1.5rem;
  }
}

/* Uniform verticaal ritme tussen de secties van de homepage */
.bx-section-y {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.bx-section-gap {
  margin-top: 1.5rem;
}

/* Verberg de categorie-pillbalk op mobiel */
@media (max-width: 767.98px) {
  .bx-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .bx-section-y {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .bx-section-gap {
    margin-top: 2rem;
  }
}

/* Alleen voor screenreaders (SEO-tekst die visueel in de banner zit) */
.sr-only-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ------------------------------------------------------------
   Knoppen — radius 8px, geen uppercase, fill + ghost/outline
   ------------------------------------------------------------ */
.btn {
  border-radius: var(--bx-btn-radius);
  text-transform: var(--bx-btn-text-transform);
  font-family: var(--bx-font-heading);
  font-weight: 700;
  min-height: 2.75rem;
  height: auto;
}

/* Lange NL-labels ("Toevoegen aan winkelwagen") mogen afbreken zonder te clippen */
.btn-sm {
  height: auto;
  min-height: 2.25rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  font-size: 0.75rem;
  line-height: 1.25;
  gap: 0.375rem;
}

.btn-primary {
  background-color: var(--bx-button-bg);
  border-color: var(--bx-button-bg);
  color: var(--bx-button-text);
}

.btn-primary:hover {
  background-color: #007a10;
  border-color: #007a10;
}

.btn-secondary {
  background-color: var(--bx-secondary);
  border-color: var(--bx-secondary);
  color: #ffffff;
}

.btn-secondary:hover {
  background-color: #d90029;
  border-color: #d90029;
}

.btn-accent {
  background-color: var(--bx-accent);
  border-color: var(--bx-accent);
  color: var(--bx-text);
}

.btn-accent:hover {
  background-color: #e6c200;
  border-color: #e6c200;
}

/* ghost / outline variant uit brief.buttons.style */
.btn-bx-outline {
  background-color: transparent;
  border: 1px solid var(--bx-secondary);
  color: var(--bx-secondary);
}

@media (hover: hover) and (pointer: fine) {
  .btn-bx-outline:hover {
    background-color: var(--bx-secondary);
    color: #ffffff;
  }

  /* in de verlanglijst + hover: hartje wit houden, anders rood-op-rood */
  .btn-bx-outline.is-in-wishlist:hover i.bi {
    color: #ffffff;
  }
}

/* ------------------------------------------------------------
   Promo bar
   ------------------------------------------------------------ */
.bx-promo-bar {
  background-color: var(--bx-promo-bar-bg);
  color: var(--bx-promo-bar-text);
  border-bottom: 1px solid var(--bx-border);
  font-size: 0.8125rem;
}

.bx-promo-bar .bi-check-lg {
  color: var(--bx-text);
  font-weight: 700;
}

/* USP-regel: op tablet/desktop swipebaar en item-voor-item vastklikkend
   zodat nooit midden in een woord wordt afgesneden. */
.bx-promo-bar ul.bx-nav-scroll {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.bx-promo-bar ul.bx-nav-scroll > li {
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* Op smalle schermen (< 768px) passen niet altijd alle 3 punten op één
   regel: i.p.v. een woord af te snijden tonen we ze om beurten volledig,
   als een automatisch wisselende carousel — geen scroll/gebaar nodig. */
@media (max-width: 767.98px) {
  .bx-promo-bar ul.bx-nav-scroll {
    position: relative;
    overflow: hidden !important;
    display: block;
    width: 100%;
    flex: 1 1 auto;
    height: 1.375rem;
    scroll-snap-type: none;
  }

  .bx-promo-bar ul.bx-nav-scroll > li {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    opacity: 0;
    animation: bx-promo-cycle 9s infinite;
  }

  .bx-promo-bar ul.bx-nav-scroll > li:nth-child(1) {
    animation-delay: 0s;
  }

  .bx-promo-bar ul.bx-nav-scroll > li:nth-child(2) {
    animation-delay: 3s;
  }

  .bx-promo-bar ul.bx-nav-scroll > li:nth-child(3) {
    animation-delay: 6s;
  }
}

@keyframes bx-promo-cycle {
  0%,
  100% {
    opacity: 0;
  }
  4%,
  29% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bx-promo-bar ul.bx-nav-scroll > li {
    animation: none !important;
  }

  @media (max-width: 767.98px) {
    .bx-promo-bar ul.bx-nav-scroll {
      height: auto;
      overflow-x: auto;
      display: flex;
    }

    .bx-promo-bar ul.bx-nav-scroll > li {
      position: static;
      opacity: 1;
    }
  }
}

/* ------------------------------------------------------------
   Header + navigatie
   ------------------------------------------------------------ */
.bx-header {
  background-color: var(--bx-header-bg);
  color: #ffffff;
  /* eigen stacking context, hoger dan de hero/slider erna in de DOM, anders
     tekent die eroverheen en verdwijnt het hover-uitklapmenu van de
     hoofdcategorieen (.bx-nav .dropdown-menu) achter de hero-afbeelding. */
  position: relative;
  z-index: 40;
}

.bx-header a {
  color: #ffffff;
}

/* De uitklapmenu's (Account, winkelwagen-preview) hebben een witte
   achtergrond (Bootstrap-standaard), maar erven zonder deze regel de witte
   linktekst van .bx-header a — onzichtbaar totdat je met de muis over een
   item hovert. Tekst moet standaard al leesbaar zijn, niet pas bij hover. */
.bx-header .dropdown-menu,
.bx-header .dropdown-menu a {
  color: var(--bx-text);
}

.bx-header .dropdown-menu a:hover,
.bx-header .dropdown-menu a:focus {
  color: var(--bx-primary);
}

.bx-store-picker {
  background-color: #2b2b2b;
}

/* De zoekbalk deelt de headerrij met logo/winkel-picker/account/winkelwagen
   via flex-1 min-w-0, maar zonder een harde max-width kan #search (en het
   input erin) op smallere desktopbreedtes toch net over de rand van de
   .bx-container uitsteken zodra die vaste buren samen meer ruimte opeisen
   dan er over is. max-width:100% dwingt het altijd binnen zijn flex-slot. */
.bx-header-search,
.bx-header-search #search {
  max-width: 100%;
}

.bx-nav {
  background-color: var(--bx-bg);
  border-bottom: 1px solid var(--bx-border);
}

.bx-nav a {
  color: var(--bx-text);
  font-weight: 700;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.bx-nav a:hover {
  color: var(--bx-primary);
}

.bx-nav .bx-nav-outlet,
.bx-nav-outlet {
  background-color: var(--bx-secondary);
  color: #ffffff !important;
  text-transform: uppercase; /* zoals op de referentie: rode OUTLET-knop */
  font-weight: 900;
}

.bx-nav-outlet:hover {
  background-color: #d90029;
  color: #ffffff !important;
}

/* horizontale scroll van de categoriebalk op smalle schermen — met
   schaduw/fade-hint aan de rand(en) zolang er nog verborgen items zijn,
   zodat een afgeknipt laatste item niet als "kapot" oogt. De schaduw
   verdwijnt vanzelf zodra je tot het einde hebt gescrold (geen JS nodig). */
.bx-nav-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  background:
    linear-gradient(to right, var(--bx-nav-scroll-bg, #ffffff) 40%, rgba(255, 255, 255, 0)) left,
    linear-gradient(to left, var(--bx-nav-scroll-bg, #ffffff) 40%, rgba(255, 255, 255, 0)) right,
    linear-gradient(to right, rgba(17, 17, 17, 0.3), rgba(17, 17, 17, 0)) left,
    linear-gradient(to left, rgba(17, 17, 17, 0.3), rgba(17, 17, 17, 0)) right;
  background-repeat: no-repeat;
  background-color: var(--bx-nav-scroll-bg, #ffffff);
  background-size: 36px 100%, 36px 100%, 20px 100%, 20px 100%;
  background-attachment: local, local, scroll, scroll;
}

.bx-nav-scroll::-webkit-scrollbar {
  display: none;
}

/* Op mobiel vervangt een volledige-breedte zoekbalk de horizontale
   categoriebalk (.bx-nav) direct onder de header: de balk met
   Witgoed/Beeld & geluid/... is er niet meer (die zit al in het
   rechter-drawermenu via .bx-drawer__link), en .bx-header-search
   krijgt door de order + flex-basis:100% een eigen regel ONDER de
   logo/winkelwagen/menu-rij, in plaats van tussen die iconen te worden
   platgeknepen. */
@media (max-width: 767.98px) {
  .bx-nav {
    display: none;
  }

  .bx-header-row {
    flex-wrap: wrap;
  }

  .bx-header-search {
    order: 10;
    flex-basis: 100%;
    width: 100%;
  }

  /* Winkelwagen + hamburger-menu naar de rechterhoek duwen op mobiel:
     de logo/iconen-rij is flex-start, dus margin-left:auto schuift dit
     blok helemaal naar rechts (zoek staat op een eigen regel eronder). */
  .bx-header-mobile-actions {
    margin-left: auto;
  }
}

/* ------------------------------------------------------------
   Mobiel menu — drawer rechts, NIET fullscreen
   ------------------------------------------------------------ */
.bx-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  pointer-events: none;
}

.bx-drawer[aria-hidden='false'] {
  visibility: visible;
  pointer-events: auto;
}

.bx-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bx-drawer[aria-hidden='false'] .bx-drawer__overlay {
  opacity: 1;
}

.bx-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 82vw;
  max-width: 340px;
  background: var(--bx-bg);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.bx-drawer[aria-hidden='false'] .bx-drawer__panel {
  transform: translateX(0);
}

.bx-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  font-weight: 700;
  color: var(--bx-text);
  border-bottom: 1px solid var(--bx-border);
}

.bx-drawer__link:hover {
  background: var(--bx-surface);
  color: var(--bx-primary);
}

body.bx-no-scroll {
  overflow: hidden;
}

/* Winkelwagen-drawer: zelfde off-canvas mechaniek als het mobiele menu
   (.bx-drawer/.bx-drawer__overlay/.bx-drawer__panel worden hergebruikt),
   maar op mobiel neemt het paneel de volle breedte in. */
.bx-cart-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background: var(--bx-secondary);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
}

.bx-drawer__badge {
  position: static;
  flex-shrink: 0;
}

#bx-cart-drawer .bx-drawer__panel {
  width: 100%;
  max-width: 420px;
  /* De drawer hangt in de DOM onder .bx-header, dat body-tekst standaard
     wit maakt (voor de donkere balk) — zonder deze reset erft de paneelinhoud
     wit-op-wit tekst over, net als eerder bij de account-dropdown. */
  color: var(--bx-text);
}

/* .bx-header a { color: #fff } (specificiteit 0,1,1) wint van losse
   knop-kleurklassen zoals .btn-bx-outline (0,1,0) — vandaar expliciete
   overrides hier met de #id erbij zodat ze wél winnen. */
#bx-cart-drawer a {
  color: var(--bx-text);
}

#bx-cart-drawer .btn-primary {
  color: var(--bx-button-text);
}

#bx-cart-drawer .btn-bx-outline {
  color: var(--bx-secondary);
}

@media (hover: hover) and (pointer: fine) {
  #bx-cart-drawer .btn-bx-outline:hover {
    color: #ffffff;
  }
}

@media (max-width: 640px) {
  #bx-cart-drawer .bx-drawer__panel {
    max-width: 100vw;
  }
}

/* Verlanglijst-drawer voor gasten (zelfde opzet als de winkelwagen-drawer). */
#bx-wishlist-drawer .bx-drawer__panel {
  width: 100%;
  max-width: 420px;
  color: var(--bx-text);
}

@media (max-width: 640px) {
  #bx-wishlist-drawer .bx-drawer__panel {
    max-width: 100vw;
  }
}

/* Aantal-stepper in de winkelwagen-drawer: zelfde opzet als de PDP
   (min/aantal/plus in één blok), maar past direct toe zonder aparte
   "Bijwerken"-knop — het formulier submit meteen bij klik op −/+. */
.bx-cart-qty {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-btn-radius);
  flex-shrink: 0;
}

.bx-cart-qty__btn {
  width: 1.75rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--bx-text);
  cursor: pointer;
}

.bx-cart-qty__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.bx-cart-qty__value {
  width: 1.75rem;
  height: 100%;
  text-align: center;
  font-size: 0.8125rem;
  border: 0;
  background: transparent;
  color: var(--bx-text);
}

/* ------------------------------------------------------------
   Hero slider
   ------------------------------------------------------------ */
.bx-slider {
  position: relative;
}

.bx-slide {
  display: none;
}

.bx-slide.is-active {
  display: block;
}

.bx-slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.bx-slider__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.bx-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--bx-border);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.bx-dot.is-active {
  background: var(--bx-secondary);
  width: 26px;
}

/* ------------------------------------------------------------
   Kaarten / tegels
   ------------------------------------------------------------ */
.bx-tile {
  background: var(--bx-surface);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  min-height: 168px;
}

/* Tegel die volledig uit één (reeds opgemaakte) bannerafbeelding bestaat */
.bx-tile-img {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bx-surface);
  transition: box-shadow 0.18s ease;
}

.bx-tile-img:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.bx-tile-img img {
  display: block;
  width: 100%;
  height: auto;
}

.bx-badge-actie {
  background: var(--bx-secondary);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  display: inline-block;
}

.bx-badge-korting {
  background: var(--bx-accent);
  color: var(--bx-text);
  font-weight: 900;
  border-radius: 999px;
  font-size: 0.75rem;
  padding: 0.35rem 0.55rem;
}

.bx-card-wishlist {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: #fff;
  color: var(--bx-text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border: 0;
  font-size: 1rem;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .bx-card-wishlist:hover {
    color: var(--bx-secondary);
  }
}

/* Verlanglijst-hart: gevulde (rode) staat + vloeiende overgang bij toevoegen */
[data-wishlist-product-id] i.bi {
  transition: color .2s ease, transform .2s ease;
}

[data-wishlist-product-id].is-in-wishlist i.bi {
  color: var(--bx-secondary);
}

@media (hover: hover) and (pointer: fine) {
  [data-wishlist-product-id].is-in-wishlist:hover i.bi {
    color: var(--bx-secondary);
  }
}

.bx-heart-pop {
  animation: bxHeartPop .35s ease;
}

@keyframes bxHeartPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(.9); }
  100% { transform: scale(1); }
}

.bx-cat-card {
  border: 1px solid var(--bx-line, #e8e8e8);
  border-radius: 8px;
  background: #fff;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.bx-cat-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Categorie-carousel: 2 vaste rijen, horizontaal scrollend per kolom
   (elke kolom = 2 kaarten, boven + onder). Kolombreedte volgt hetzelfde
   aantal zichtbare kaarten per rij als voorheen de grid had (2 / 3 / 6),
   zodat een oneven totaal (bv. 13 categorie&euml;n) nooit meer een kaart
   alleen op een eigen volle rij zet — de laatste kaart schuift gewoon
   mee in de rij als je doorklikt. */
.bx-cat-carousel-wrap {
  position: relative;
}

.bx-cat-carousel {
  --bx-cat-cols: 2;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: calc((100% - (var(--bx-cat-cols) - 1) * 1rem) / var(--bx-cat-cols));
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.bx-cat-carousel::-webkit-scrollbar {
  display: none;
}

.bx-cat-carousel > .bx-cat-card:nth-child(odd) {
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .bx-cat-carousel {
    --bx-cat-cols: 3;
  }
}

@media (min-width: 1024px) {
  .bx-cat-carousel {
    --bx-cat-cols: 6;
  }
}

.bx-cat-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--bx-line, #e8e8e8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: opacity 0.18s ease, box-shadow 0.18s ease;
}

.bx-cat-arrow:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.bx-cat-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

.bx-cat-arrow--prev {
  left: -20px;
}

.bx-cat-arrow--next {
  right: -20px;
}

@media (max-width: 639.98px) {
  .bx-cat-arrow {
    width: 34px;
    height: 34px;
  }
  .bx-cat-arrow--prev {
    left: -8px;
  }
  .bx-cat-arrow--next {
    right: -8px;
  }
}

.bx-cat-card img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  width: 100%;
}

.bx-cat-card__label {
  background: var(--bx-text);
  color: #fff;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.4rem 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Aanbevolen producten-carousel: 1 rij, horizontaal scrollend per kaart
   (geen zichtbare scrollbar, alleen de pijlen sturen de scrollpositie). */
.bx-rel-carousel-wrap {
  position: relative;
}

.bx-rel-carousel {
  --bx-rel-cols: 2;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(1, auto);
  grid-auto-columns: calc((100% - (var(--bx-rel-cols) - 1) * 1rem) / var(--bx-rel-cols));
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.bx-rel-carousel::-webkit-scrollbar {
  display: none;
}

.bx-rel-carousel__item {
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .bx-rel-carousel {
    --bx-rel-cols: 3;
  }
}

@media (min-width: 1024px) {
  .bx-rel-carousel {
    --bx-rel-cols: 4;
  }
}

@media (min-width: 1280px) {
  .bx-rel-carousel {
    --bx-rel-cols: 5;
  }
}

.bx-rel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--bx-line, #e8e8e8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: opacity 0.18s ease, box-shadow 0.18s ease;
}

.bx-rel-arrow:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.bx-rel-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

.bx-rel-arrow--prev {
  left: -20px;
}

.bx-rel-arrow--next {
  right: -20px;
}

@media (max-width: 639.98px) {
  .bx-rel-arrow {
    width: 34px;
    height: 34px;
  }
  .bx-rel-arrow--prev {
    left: -8px;
  }
  .bx-rel-arrow--next {
    right: -8px;
  }
}

/* Productgalerij: hoofdafbeelding met pijlen + lightbox voor volledig scherm */
.bx-gallery-main-wrap {
  position: relative;
}

#bx-gallery-main {
  transition: opacity 0.15s ease;
}

.bx-gallery-fade {
  opacity: 0;
}

.bx-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--bx-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: opacity 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.bx-gallery-arrow:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.bx-gallery-arrow--prev {
  left: 12px;
}

.bx-gallery-arrow--next {
  right: 12px;
}

@media (max-width: 639.98px) {
  .bx-gallery-arrow {
    width: 34px;
    height: 34px;
  }
  .bx-gallery-arrow--prev {
    left: 6px;
  }
  .bx-gallery-arrow--next {
    right: 6px;
  }
}

.bx-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(17, 17, 17, 0.85);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.bx-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.bx-lightbox-open {
  overflow: hidden;
}

.bx-lightbox-backdrop {
  position: absolute;
  inset: 0;
}

.bx-lightbox-dialog {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 900px);
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bx-lightbox-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  transition: opacity 0.15s ease;
}

.bx-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (max-width: 639.98px) {
  .bx-lightbox {
    padding: 1rem 0.5rem;
  }
  .bx-lightbox-close {
    top: 0.5rem;
    right: 0.5rem;
    width: 34px;
    height: 34px;
  }
}

/* Productkaart */
.bx-product-card {
  border: 1px solid var(--bx-border);
  border-radius: 8px;
  background: #fff;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow 0.18s ease;
}

.bx-product-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.bx-product-card img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  width: 100%;
  background: #fff;
}

/* Kaart-knop "Toevoegen aan winkelwagen": icoon en tekst op één regel houden.
   DaisyUI zet .btn op flex-wrap:wrap, waardoor op smalle mobiele kaarten het
   winkelwagen-icoon boven de tekst belandt. Hier dwingen we nowrap af zodat het
   icoon naast de tekst blijft staan. */
.bx-product-card .btn {
  flex-wrap: nowrap;
}

/* Zelfde nowrap-fix voor de verlanglijst-drawer: de "Toevoegen aan winkelwagen"-
   knop staat daar op een smalle kaart (foto + inhoud + prullenbak), waardoor het
   winkelwagen-icoon anders boven de tekst wrapt. Icoon en tekst op één regel. */
#bx-wishlist-drawer .btn {
  flex-wrap: nowrap;
}

.bx-price {
  font-family: var(--bx-font-heading);
  font-weight: 900;
  font-size: 1.375rem;
  color: var(--bx-text);
  line-height: 1.1;
}

.bx-price--sale {
  color: var(--bx-secondary);
}

/* ------------------------------------------------------------
   Zoek-autocomplete dropdown
   ------------------------------------------------------------ */
.bx-search-dropdown {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1050;
  background: #fff;
  border: 1px solid var(--bx-line, #e8e8e8);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  max-height: 70vh;
  overflow-y: auto;
  text-align: left;
}

.bx-search-dropdown.show {
  display: block;
}

.bx-search-group {
  padding: 0.5rem 0;
}

.bx-search-group + .bx-search-group {
  border-top: 1px solid var(--bx-line, #e8e8e8);
}

.bx-search-group__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #767674;
  padding: 0.5rem 1rem 0.25rem;
}

.bx-search-dropdown .bx-search-product {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  color: var(--bx-text);
}

.bx-search-dropdown .bx-search-product:hover {
  background: var(--bx-surface, #f8f8f8);
}

.bx-search-product img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.bx-search-product__info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.bx-search-product__name {
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bx-search-product__price {
  font-size: 0.8125rem;
}

.bx-search-product__special {
  font-weight: 900;
  color: var(--bx-text);
}

.bx-search-product__old {
  color: #767674;
  font-size: 0.75rem;
  font-weight: 400;
  text-decoration: line-through;
  margin-left: 0.25rem;
}

.bx-search-group--pages {
  display: flex;
  flex-direction: column;
}

.bx-search-dropdown .bx-search-page {
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--bx-text);
}

.bx-search-dropdown .bx-search-page:hover {
  background: var(--bx-surface, #f8f8f8);
  color: var(--bx-secondary);
}

.bx-search-empty {
  padding: 1rem;
  font-size: 0.8125rem;
  color: #767674;
  text-align: center;
}

/* ------------------------------------------------------------
   Merkenstrip
   ------------------------------------------------------------ */
.bx-brand-strip img {
  height: 40px;
  width: auto;
  object-fit: contain;
  filter: none;
}

/* ------------------------------------------------------------
   USP-strip
   ------------------------------------------------------------ */
.bx-usp {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bx-surface);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}

.bx-usp i {
  font-size: 1.5rem;
  color: var(--bx-primary);
  line-height: 1;
}

/* ------------------------------------------------------------
   Footer — 3 lagen (zie brief.colors_notes)
   ------------------------------------------------------------ */
.bx-footer-service {
  background: var(--bx-footer-bg);
  color: #ffffff;
}

.bx-footer-service a {
  color: #ffffff;
  text-decoration: underline;
}

/* Verdeel de regels van elke Service & Contact-alinea gelijkmatiger (geen
   losse korte laatste regel) waar de browser dat ondersteunt; anders gewoon
   normale terugval. */
.bx-balance-text {
  text-wrap: balance;
}

/* Korte, betekenisvolle zinsdelen/links mogen niet halverwege afbreken —
   maar alleen zolang de kolom breed genoeg is, anders gewoon laten
   teruglopen i.p.v. de container te laten overlopen. */
.bx-nowrap-phrase {
  white-space: nowrap;
}

@media (max-width: 360px) {
  .bx-nowrap-phrase {
    white-space: normal;
  }
}

.bx-footer-mid {
  background: var(--bx-footer-mid-bg);
  color: var(--bx-text);
}

.bx-footer-mid a {
  color: var(--bx-text);
  font-size: 0.9375rem;
}

.bx-footer-mid a:hover {
  color: var(--bx-primary);
}

.bx-footer-strip {
  background: var(--bx-footer-strip-bg);
  color: var(--bx-text-muted);
  font-size: 0.8125rem;
}

.bx-footer-strip a {
  color: var(--bx-text-muted);
}

.bx-footer-strip a:hover {
  color: var(--bx-text);
}

/* Betaalmethode-tegels in de footer: witte tegel met een SVG-markering erin
   (i.p.v. platte tekst in een kader). Vaste maat zodat alle logo's netjes
   op één lijn staan. */
.bx-pay-badge {
  background: #fff;
  border: 1px solid var(--bx-border);
  border-radius: 5px;
  padding: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 30px;
  overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}

.bx-pay-badge svg {
  display: block;
  width: 40px;
  height: 24px;
}

.bx-pay-badge:hover {
  border-color: #c9c9c7;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.bx-trust-badge {
  background: #fff;
  border: 1px solid var(--bx-border);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bx-text);
  padding: 0.35rem 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.bx-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 1.25rem;
  color: var(--bx-text);
}

.bx-social:hover {
  background: var(--bx-surface);
  color: var(--bx-primary);
}

/* ------------------------------------------------------------
   Cookiebanner
   ------------------------------------------------------------ */
.bx-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: #ffffff;
  border-top: 1px solid var(--bx-border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
}

.bx-cookie[hidden] {
  display: none;
}

/* ------------------------------------------------------------
   Content / policy-pagina's
   ------------------------------------------------------------ */
.bx-prose {
  color: var(--bx-text);
  line-height: 1.7;
}

.bx-prose h2 {
  font-size: 1.375rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.bx-prose h3 {
  font-size: 1.0625rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.bx-prose p {
  margin-bottom: 1rem;
}

.bx-prose ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.bx-prose ol {
  list-style: decimal;
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.bx-prose li {
  margin-bottom: 0.375rem;
}

.bx-prose a {
  color: var(--bx-primary);
  text-decoration: underline;
}

.bx-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.25rem;
}

.bx-prose th,
.bx-prose td {
  border: 1px solid var(--bx-border);
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.9375rem;
}

.bx-prose th {
  background: var(--bx-surface);
}

/* Sectiekoppen zoals op de referentie: zwart, zwaar, licht gespatieerd */
.bx-section-title {
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

@media (min-width: 1024px) {
  .bx-section-title {
    font-size: 1.75rem;
  }
}

/* ------------------------------------------------------------
   Product tabs (Productomschrijving / Specificaties / Recensies)
   ------------------------------------------------------------ */
.bx-tabs-nav-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--bx-border);
  margin-bottom: 1.5rem;
}

.bx-tabs-nav {
  display: flex;
  gap: 0.5rem;
  min-width: max-content;
}

.bx-tab-btn {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.75rem 0.25rem;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--bx-text);
  white-space: nowrap;
  cursor: pointer;
}

.bx-tab-icon {
  font-size: 1.05em;
  line-height: 1;
  flex-shrink: 0;
}

.bx-tabs-nav .bx-tab-btn + .bx-tab-btn {
  margin-left: 1rem;
}

.bx-tab-btn:hover {
  color: var(--bx-primary);
}

.bx-tab-btn.is-active {
  color: var(--bx-primary);
  border-bottom-color: var(--bx-primary);
}

.bx-tab-panel[hidden] {
  display: none;
}

@media (min-width: 1024px) {
  .bx-tab-btn {
    font-size: 1.125rem;
  }
}

/* Mobiel: als de labels te breed zijn, tabs onder elkaar (kolom) tonen
   i.p.v. horizontaal scrollen/afkappen */
@media (max-width: 767.98px) {
  .bx-tabs-nav-wrap {
    overflow-x: visible;
    border-bottom: none;
  }
  .bx-tabs-nav {
    flex-direction: column;
    gap: 0;
    min-width: 0;
    border: 1px solid var(--bx-border);
    border-radius: 8px;
    overflow: hidden;
  }
  .bx-tab-btn {
    width: 100%;
    text-align: left;
    white-space: normal;
    padding: 0.85rem 1rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--bx-border);
    border-left: 3px solid transparent;
  }
  .bx-tabs-nav .bx-tab-btn:last-child {
    border-bottom: none;
  }
  .bx-tabs-nav .bx-tab-btn + .bx-tab-btn {
    margin-left: 0;
  }
  .bx-tab-btn.is-active {
    border-bottom-color: var(--bx-border);
    border-left-color: var(--bx-primary);
    background: color-mix(in srgb, var(--bx-primary) 8%, transparent);
  }
  .bx-tabs-nav .bx-tab-btn:last-child.is-active {
    border-bottom-color: transparent;
  }
}

/* Ontbrekende briefing-waarden zichtbaar markeren voor QA */
.bx-missing {
  background: #fff3cd;
  border: 1px dashed var(--bx-secondary);
  color: #7a4b00;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.875em;
}

/* Meldingen (bv. "toegevoegd aan verlanglijst"): sluitknop krijgt een
   vaste, aparte kolom zodat lange producttitels er nooit tegenaan lopen. */
.alert.alert-dismissible {
  /* #alert is Bootstrap's .toast-container, dat pointer-events:none zet
     zodat de lege ruimte eromheen niet klikbaar is. Bootstrap herstelt dat
     zelf alleen op .toast — onze meldingen zijn .alert-elementen, dus zonder
     deze regel komt GEEN klik (ook niet op de sluitknop) ooit door: dit was
     de daadwerkelijke oorzaak van het niet-sluitende kruisje bij alle
     type meldingen (winkelwagen, inloggen, verlanglijst, fouten). */
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  max-width: 380px;
}

.alert.alert-dismissible > span {
  min-width: 0;
  overflow-wrap: break-word;
}

.alert.alert-dismissible > .btn-close {
  /* Bootstrap zet .alert-dismissible .btn-close op position:absolute;
     top:0; right:0 (specificity wint niet automatisch over deze regel
     omdat wij die eigenschappen niet overschreven) waardoor de knop uit
     de grid-flow viel en als een 16x16px vlak strak in de afgeronde hoek
     kwam te zitten: bijna onmogelijk om precies te raken. position:static
     laat 'm weer meedraaien in de grid-kolom en het grotere klikvlak
     (met kleiner zichtbaar icoon eromheen) geeft een reëel klikbaar gebied. */
  position: static;
  grid-column: 3;
  justify-self: end;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.85rem;
  opacity: 0.6;
  cursor: pointer;
  z-index: 1;
}

.alert.alert-dismissible > .btn-close:hover {
  opacity: 1;
}

/* Bootstrap's JS-driven .modal (checkout shipping/payment method picker, etc.)
   shares the .modal class name with daisyUI's CSS-only modal component, whose
   base rule sets opacity:0/pointer-events:none/z-index:999 and only reveals
   via a .modal-open class on the modal element itself. Bootstrap instead adds
   a "show" class to the modal and "modal-open" to <body>, so daisyUI's rule
   was left in force and hid every Bootstrap modal behind its own backdrop. */
.modal.show {
  opacity: 1;
  pointer-events: auto;
  z-index: 1055;
}

/* Checkout verzend-/betaalmethode: inline uitklap-paneel i.p.v. modal, zoals
   referentie (geen overlay/backdrop over de rest van de pagina). */
.checkout-options-panel {
  margin-top: 0.75rem;
  padding: 1rem 1.25rem;
  background-color: var(--bx-surface);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-btn-radius);
}

.checkout-options-panel-title {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.checkout-options-panel-text {
  color: var(--bx-text-muted);
  margin-bottom: 0.75rem;
}

/* Introtekst "Heb je al een account..." boven het registratieformulier: een
   losse plaquette i.p.v. een kale alinea, en bewust GEEN Bootstrap
   .alert/.alert-info — die botst met daisyUI's eigen .alert-component (later
   in de cascade geladen via daisyui.css) en kwam er zwart/onleesbaar uit. */
.bx-checkout-notice {
  margin-bottom: 1rem;
  padding: 0.875rem 1.25rem;
  background-color: var(--bx-surface);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-btn-radius);
  color: var(--bx-text);
}

/* Checkout: compacte lay-out (referentie) i.p.v. brede, losse kolommen.
   Formulier links domineert, samenvatting rechts is een smalle vaste kolom. */
#checkout-checkout legend {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

#checkout-checkout fieldset {
  margin-bottom: 0.5rem;
}

#checkout-checkout .row-cols-md-2 > .col.mb-3,
#checkout-checkout .row > .col.mb-3 {
  margin-bottom: 0.5rem !important;
}

.checkout-summary {
  max-width: 100%;
  padding: 1rem;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-btn-radius);
  background-color: var(--bx-surface);
  position: sticky;
  top: 1rem;
  align-self: flex-start;
}

.checkout-summary .table {
  margin-bottom: 0.75rem;
}

.checkout-summary #checkout-payment .btn {
  width: 100%;
}

/* Twee kolommen als één samenhangend blok i.p.v. het formulier bijna de
   volledige breedte te laten innemen met de samenvatting los in de
   rechterbovenhoek. Formulier wordt smaller, samenvatting sluit er direct
   op aan met een vaste, redelijke tussenruimte. */
@media (min-width: 992px) {
  #checkout-checkout .checkout-layout {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
  }

  #checkout-checkout .checkout-form-col {
    flex: 1 1 auto;
    width: auto;
    max-width: 620px;
  }

  #checkout-checkout .checkout-summary-col {
    flex: 0 0 320px;
    width: 320px;
    max-width: 320px;
  }
}

@media (min-width: 1200px) {
  #checkout-checkout .checkout-form-col {
    max-width: 680px;
  }
}

/* Kruimelpad en paginatitel (AFREKENEN) uitlijnen met het gecentreerde
   formulier+samenvatting-blok i.p.v. hard links tegen de containerrand.
   Blokbreedte = form-col (620/680) + samenvatting (320) + gap (2rem/32px). */
@media (min-width: 992px) {
  #checkout-checkout > .breadcrumb,
  #checkout-checkout .bx-section-title {
    max-width: 972px;
    margin-inline: auto;
    /* de 0.75rem is de kolom-gutter van .checkout-form-col, zodat de tekst
       exact begint bij "Uw persoonlijke gegevens" i.p.v. bij de blokrand. */
    padding-inline-start: 0.75rem;
  }
}

@media (min-width: 1200px) {
  #checkout-checkout > .breadcrumb,
  #checkout-checkout .bx-section-title {
    max-width: 1032px;
  }
}

/* Disabled bevestig-knop: kleurvariabelen van de theme-knop behouden i.p.v.
   Bootstrap's eigen (blauwe, laag-contrast) disabled-kleuren. */
#checkout-checkout .btn-primary:disabled,
#checkout-checkout .btn-primary.disabled {
  background-color: var(--bx-button-bg);
  border-color: var(--bx-button-bg);
  color: var(--bx-button-text);
  opacity: 0.5;
}

@media (max-width: 991.98px) {
  .checkout-summary {
    max-width: 100%;
    margin-left: 0;
    position: static;
  }
}