/* =============================================================
   Saint Dutch: sd-shell.css
   De gedeelde schil: header, menu-overlay, footer en cookiebanner.
   Markup staat in _shared-header-footer.html (npm run shell),
   gedrag in sd-shell.js en cookies.js.

   Tokens komen uit sd-core.css. Elke var() heeft een terugval, zodat
   de schil ook zonder core leesbaar blijft. De legacy styles.css kent
   geen sd-* klassen en raakt de schil dus niet; alleen de globale
   regels a, img en body lekken erdoorheen en zijn hieronder afgevangen.

   v2: labels in de ene labelstijl, menu in Boek Display zonder krommen en
   chips, edities in Merk, footer met het gestikte woordmerk (vier blokken),
   betaalmethoden als tekst, de draad in de kleur van het garen (728 C).

   1 basis en lagen · 2 header · 3 menu · 4 footer · 5 cookiebanner
   6 legacy en docking · 7 beweging, contrast en print
   ============================================================= */

/* ---------- 1. Basis en lagen ---------- */
:root {
  --sd-header-h: 3.5rem;
  /* Standaard staat de header in beeld. Zolang hij weg is zet sd-shell.js 0px, maar alleen op de elementen
     die dit lezen (rail, gepinde inhoudsopgaven, kassaoverzicht, [data-sd-header-aware]), nooit op <html>:
     een custom property op de root laat de stijl van de hele pagina opnieuw berekenen. */
  --sd-header-visible: var(--sd-header-h);
  /* Dock: --sd-buybar-h (sd-shell.js) en --sd-cookie-h (cookies.js). De koopbalkhoogte staat om dezelfde
     reden alleen op de elementen die hem lezen (cookiebalk, vraagknop en -paneel, gepinde scènes,
     [data-sd-dock]); hier op de root telt hij als 0. Vanaf 900px is de cookiekaart los van de rand gezet
     (1,5rem): die ruimte telt mee zodra de kaart er is. Daaronder is het een smalle balk over de volle breedte. */
  --sd-dock-h: calc(var(--sd-buybar-h, 0px) + var(--sd-cookie-h, 0px) + min(1.5rem, var(--sd-cookie-h, 0px)));
}

@media (min-width: 900px) {
  :root {
    --sd-header-h: 4.5rem;
  }
}

@media (max-width: 899.98px) {
  :root {
    --sd-dock-h: calc(var(--sd-buybar-h, 0px) + var(--sd-cookie-h, 0px));
  }
}

/* De vraagknop en het vraagpaneel lezen --sd-dock-h. Op hun container wordt hij opnieuw berekend uit de
   koopbalkhoogte die sd-shell.js daar zet en de cookiehoogte die van <html> erft. */
.sd-chat-container,
[data-sd-dock] {
  --sd-dock-h: calc(var(--sd-buybar-h, 0px) + var(--sd-cookie-h, 0px) + min(1.5rem, var(--sd-cookie-h, 0px)));
}

@media (max-width: 899.98px) {
  .sd-chat-container,
  [data-sd-dock] {
    --sd-dock-h: calc(var(--sd-buybar-h, 0px) + var(--sd-cookie-h, 0px));
  }
}

html {
  scroll-padding-top: calc(var(--sd-header-h) + 0.75rem);
}

.sd-header,
.sd-menu,
.sd-footer,
.sd-cookie {
  box-sizing: border-box;
  color-scheme: dark;
  font-family: var(--sd-font-sans, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  color: var(--sd-paper, #f5f3f1);
}

.sd-header *,
.sd-header *::before,
.sd-header *::after,
.sd-menu *,
.sd-menu *::before,
.sd-menu *::after,
.sd-footer *,
.sd-footer *::before,
.sd-footer *::after,
.sd-cookie *,
.sd-cookie *::before,
.sd-cookie *::after {
  box-sizing: border-box;
}

.sd-header :where(ul),
.sd-menu :where(ul),
.sd-footer :where(ul),
.sd-cookie :where(ul) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-header :where(p),
.sd-menu :where(p),
.sd-footer :where(p),
.sd-cookie :where(p) {
  margin: 0;
}

.sd-header :where(a),
.sd-menu :where(a),
.sd-footer :where(a),
.sd-cookie :where(a) {
  color: inherit;
  text-decoration: none;
}

.sd-header :where(button),
.sd-menu :where(button),
.sd-footer :where(button),
.sd-cookie :where(button) {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

.sd-header :where(img),
.sd-footer :where(img, svg) {
  display: block;
  max-width: 100%;
}

.sd-header :where(a, button):focus-visible,
.sd-menu :where(a, button):focus-visible,
.sd-footer :where(a, button, input):focus-visible,
.sd-cookie :where(a, button, input):focus-visible {
  outline: 2px solid var(--sd-thread, #cda077);
  outline-offset: 3px;
}

/* ---------- 2. Header ----------
   Vast bovenaan, 56/72 px. Bij data-header="transparent" loopt hij transparant over de
   hero en wordt hij in 320 ms een volle inktbalk zodra je scrolt (.is-solid). Omlaag
   scrollen verbergt hem in 400 ms, omhoog toont hem (.is-hidden); met het menu open
   blijft hij staan. Hij ligt boven het menu zodat Menu / Sluit bereikbaar blijft. */
.sd-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: calc(var(--sd-z-menu, 200) + 10);
  height: var(--sd-header-h);
  background: var(--sd-ink, #0e0d0b);
  border-bottom: 1px solid var(--sd-line-dark, rgba(245, 243, 241, 0.14));
  transition:
    transform 400ms var(--sd-ease, cubic-bezier(0.2, 0.65, 0.2, 1)),
    background-color 320ms var(--sd-ease, cubic-bezier(0.2, 0.65, 0.2, 1)),
    border-color 320ms var(--sd-ease, cubic-bezier(0.2, 0.65, 0.2, 1));
}

.sd-header.is-hidden {
  transform: translateY(-101%);
}

body[data-header="transparent"] .sd-header:not(.is-solid) {
  background: transparent;
  border-bottom-color: transparent;
}

/* Zachte sluier van inkt achter de labels, zodat ze ook op een lichte foto leesbaar blijven */
body[data-header="transparent"] .sd-header:not(.is-solid)::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  height: calc(100% + 1.5rem);
  background: linear-gradient(to bottom, rgba(14, 13, 11, 0.5), rgba(14, 13, 11, 0));
  pointer-events: none;
}

/* Tas en Menu blijven leesbaar als er een lichte draad of lichte stof onder ligt */
body[data-header="transparent"] .sd-header:not(.is-solid) .sd-header__actions {
  text-shadow: 0 0 12px rgba(14, 13, 11, 0.6);
}

html.sd-menu-open .sd-header {
  background: transparent;
  border-bottom-color: transparent;
  transform: none;
  padding-right: var(--sd-sbw, 0px);
}

html.sd-menu-open .sd-header::before {
  display: none;
}

.sd-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  padding-inline: var(--sd-gutter, clamp(20px, 5vw, 64px));
}

.sd-header__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 2.75rem;
}

.sd-header__logo img {
  width: auto;
  height: 1.25rem;
}

@media (min-width: 900px) {
  .sd-header__logo img {
    height: 1.5rem;
  }
}

.sd-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 2vw, 1.25rem);
  min-width: 0;
}

/* "Tas (0)" en "Menu" in de labelstijl, cijfers tabular */
.sd-header__bag,
.sd-header__menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  color: var(--sd-paper, #f5f3f1);
  font-size: var(--sd-fs-label, 0.8125rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--sd-ls-label, 0.1em);
  text-transform: uppercase;
  font-feature-settings: 'case';
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

/* De draad onder het label: groeit bij hover, focus en actief */
.sd-header__bag::after,
.sd-header__menu::after {
  content: '';
  position: absolute;
  right: 0.75rem;
  bottom: 0.7rem;
  left: 0.75rem;
  height: 1px;
  background: var(--sd-thread, #cda077);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms var(--sd-ease-ui, cubic-bezier(0.3, 0, 0.2, 1));
}

.sd-header__bag:hover::after,
.sd-header__bag:focus-visible::after,
.sd-header__bag[aria-current]::after,
.sd-header__menu:hover::after,
.sd-header__menu:focus-visible::after {
  transform: scaleX(1);
}

/* De tas-teller: [data-sd-bag-count] staat stil (doel voor de garenboog), het cijfer erin
   rolt in 360 ms (sd-shell.js). Het oude cijfer is ::before uit data-prev. */
.sd-header__count {
  position: relative;
  display: inline-block;
  clip-path: inset(-0.1em -0.25em);
}

.sd-header__num {
  position: relative;
  display: inline-block;
}

.sd-header__num[data-prev]::before {
  content: attr(data-prev);
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  text-align: center;
}

.sd-header__num[data-prev][data-dir="down"]::before {
  top: 100%;
  bottom: auto;
}

.sd-header__menu {
  justify-content: flex-end;
  min-width: 6rem;
  margin-right: -0.75rem;
}

.sd-header__menu-close {
  display: none;
  align-items: center;
}

.sd-header__menu[aria-expanded="true"] .sd-header__menu-open {
  display: none;
}

.sd-header__menu[aria-expanded="true"] .sd-header__menu-close {
  display: inline-flex;
}

/* Sluitkruis als CSS-vorm (✕ zit niet in het webfont): twee lijnen van 1,5 px */
.sd-header__x {
  position: relative;
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.6rem;
}

.sd-header__x::before,
.sd-header__x::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -0.1rem;
  right: -0.1rem;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transform: rotate(45deg);
}

.sd-header__x::after {
  transform: rotate(-45deg);
}

/* Smalle telefoons (320 tot 380px): net iets compacter, zodat Tas en Menu nooit uit beeld lopen */
@media (max-width: 380px) {
  .sd-header__bar {
    gap: 0.5rem;
  }

  .sd-header__logo img {
    height: 1.1rem;
  }

  .sd-header__actions {
    gap: 0;
  }

  .sd-header__bag,
  .sd-header__menu {
    padding: 0 0.5rem;
    letter-spacing: 0.06em;
  }

  .sd-header__bag::after,
  .sd-header__menu::after {
    right: 0.5rem;
    left: 0.5rem;
  }

  .sd-header__menu {
    min-width: 4.75rem;
    margin-right: -0.5rem;
  }
}

/* Zonder script is er geen menuknop: het menu staat dan open onder de header */
html:not(.sd-js) .sd-header__menu {
  display: none;
}

/* ---------- 3. Menu-overlay ----------
   Het sterkste scherm van de site: een grote lijst in Boek Display, verder stil.
   Geen krommen, geen chips. Opent in 240 ms (links om de 60 ms, 8 px), sluit in 200 ms. */
.sd-menu {
  /* Boven- en onderruimte krimpen met de hoogte, zodat het hele menu vanaf ±720 px hoog in beeld past */
  --sd-menu-pt: 1.5rem;
  --sd-menu-pb: 2.5rem;
  position: relative;
  padding: calc(var(--sd-header-h) + var(--sd-menu-pt)) var(--sd-gutter, clamp(20px, 5vw, 64px)) var(--sd-menu-pb);
  background: var(--sd-ink, #0e0d0b);
}

.sd-js .sd-menu {
  position: fixed;
  inset: 0;
  z-index: var(--sd-z-menu, 200);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 200ms var(--sd-ease-exit, cubic-bezier(0.4, 0, 1, 1)),
    visibility 0s linear 200ms;
}

.sd-js .sd-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 240ms var(--sd-ease, cubic-bezier(0.2, 0.65, 0.2, 1)),
    visibility 0s linear 0s;
}

html.sd-menu-open {
  overflow: hidden;
  padding-right: var(--sd-sbw, 0px);
}

html.sd-menu-open body {
  overflow: hidden;
}

.sd-menu__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.25rem, 4vh, 4.5rem);
  max-width: var(--sd-wide, 1280px);
  margin-inline: auto;
}

.sd-js .sd-menu__inner {
  min-height: calc(100vh - var(--sd-header-h) - var(--sd-menu-pt) - var(--sd-menu-pb));
}

@supports (height: 100dvh) {
  .sd-js .sd-menu__inner {
    min-height: calc(100dvh - var(--sd-header-h) - var(--sd-menu-pt) - var(--sd-menu-pb));
  }
}

.sd-menu__list {
  display: grid;
  gap: clamp(0.15rem, 1vh, 0.5rem);
}

/* Links in Display 440. Hover: een volle draad groeit in 450 ms (terug in 250 ms).
   De actieve pagina krijgt een gestikte onderstreping. "Reserveer" heeft dezelfde kleur:
   goud is voor de koopknop. */
.sd-menu__link {
  position: relative;
  display: inline-block;
  padding: 0.04em 0 0.1em;
  color: var(--sd-paper, #f5f3f1);
  font-family: var(--sd-font-display, Georgia, 'Times New Roman', serif);
  /* Schaalt mee met de breedte, maar nooit hoger dan 7% van het scherm: zo past het menu ook liggend */
  font-size: clamp(2.25rem, min(1.6rem + 4.4vw, 7vh), 4.5rem);
  font-weight: 440;
  line-height: 1.04;
  letter-spacing: -0.015em;
  background-image: linear-gradient(var(--sd-thread, #cda077), var(--sd-thread, #cda077));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1.5px;
  transition: background-size 250ms var(--sd-ease-exit, cubic-bezier(0.4, 0, 1, 1));
}

.sd-menu__link:hover,
.sd-menu__link:focus-visible {
  background-size: 100% 1.5px;
  transition: background-size 450ms var(--sd-ease, cubic-bezier(0.2, 0.65, 0.2, 1));
}

.sd-menu__link[aria-current="page"] {
  background-image: repeating-linear-gradient(90deg, var(--sd-thread, #cda077) 0 6px, transparent 0 10px);
  background-size: 100% 1.5px;
}

.sd-menu__link--cta {
  color: var(--sd-paper, #f5f3f1);
}

/* Relatieve maten in svh: de adresbalk van iOS en Instagram laat het menu dan niet verspringen */
@supports (height: 1svh) {
  .sd-menu {
    --sd-menu-pt: clamp(1rem, 3svh, 1.5rem);
    --sd-menu-pb: clamp(1.25rem, 3.5svh, 2.5rem);
  }

  .sd-menu__inner {
    gap: clamp(1.25rem, 4svh, 4.5rem);
  }

  .sd-menu__list {
    gap: clamp(0.15rem, 1svh, 0.5rem);
  }

  .sd-menu__link {
    font-size: clamp(2.25rem, min(1.6rem + 4.4vw, 7svh), 4.5rem);
  }
}

/* Verschijnen: de regels komen steek voor steek, om de 60 ms, 8 px omhoog. Sluiten zonder stagger. */
.sd-js .sd-menu__list li,
.sd-js .sd-menu__foot {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 200ms var(--sd-ease-exit, cubic-bezier(0.4, 0, 1, 1)),
    transform 200ms var(--sd-ease-exit, cubic-bezier(0.4, 0, 1, 1));
}

.sd-js .sd-menu.is-open .sd-menu__list li,
.sd-js .sd-menu.is-open .sd-menu__foot {
  opacity: 1;
  transform: none;
  transition:
    opacity 480ms var(--sd-ease, cubic-bezier(0.2, 0.65, 0.2, 1)),
    transform 480ms var(--sd-ease, cubic-bezier(0.2, 0.65, 0.2, 1));
  transition-delay: calc(60ms + var(--i, 0) * 60ms);
}

.sd-menu__list li:nth-child(2) { --i: 1; }
.sd-menu__list li:nth-child(3) { --i: 2; }
.sd-menu__list li:nth-child(4) { --i: 3; }
.sd-menu__list li:nth-child(5) { --i: 4; }
.sd-menu__list li:nth-child(6) { --i: 5; }
.sd-menu__foot { --i: 6; }

.sd-menu__foot {
  display: grid;
  gap: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sd-line-dark, rgba(245, 243, 241, 0.14));
}

/* Lage schermen: de voet krijgt minder lucht; scrollen blijft werken als het nog niet past */
@media (max-height: 760px) {
  .sd-menu__foot {
    gap: 0.75rem;
    padding-top: 0.85rem;
  }
}

@media (min-width: 700px) {
  .sd-menu__foot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
  }
}

.sd-menu__label {
  margin-bottom: 0.5rem;
  color: var(--sd-muted, #8f8a85);
  font-size: var(--sd-fs-label, 0.8125rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--sd-ls-label, 0.1em);
  text-transform: uppercase;
  font-feature-settings: 'case';
}

@media (max-height: 760px) {
  .sd-menu__label {
    margin-bottom: 0.15rem;
  }
}

.sd-menu__ed-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 0 2rem;
}

@media (min-width: 700px) {
  .sd-menu__ed-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2.25rem;
  }
}

/* Editie: naam in Merk-kapitalen 15 px, status als tekst met een vierkantje van 6 px */
.sd-menu__ed {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
  min-height: 2.75rem;
  padding-top: 0.85rem;
  color: var(--sd-paper, #f5f3f1);
}

.sd-menu__ed-name {
  padding-bottom: 0.25em;
  font-family: var(--sd-font-merk, 'Times New Roman', serif);
  font-size: 0.9375rem;
  font-weight: 640;
  line-height: 1;
  letter-spacing: var(--sd-ls-caps-s, 0.06em);
  font-variant-ligatures: none;
  background-image: linear-gradient(var(--sd-thread, #cda077), var(--sd-thread, #cda077));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 250ms var(--sd-ease-exit, cubic-bezier(0.4, 0, 1, 1));
}

.sd-menu__ed:hover .sd-menu__ed-name,
.sd-menu__ed:focus-visible .sd-menu__ed-name {
  background-size: 100% 1px;
  transition: background-size 450ms var(--sd-ease, cubic-bezier(0.2, 0.65, 0.2, 1));
}

.sd-menu__ed[aria-current="page"] .sd-menu__ed-name {
  background-image: repeating-linear-gradient(90deg, var(--sd-thread, #cda077) 0 6px, transparent 0 10px);
  background-size: 100% 1px;
}

/* Status: tekst plus vorm, nooit alleen kleur, geen kader */
.sd-menu__status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--sd-muted, #8f8a85);
  font-size: var(--sd-fs-label, 0.8125rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.sd-menu__status::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  transform: translateY(-0.05em);
}

.sd-menu__status[data-status="available"] {
  color: var(--sd-soft-paper, #bdb8b2);
}

.sd-menu__status[data-status="available"]::before {
  border-color: var(--sd-thread, #cda077);
  background: var(--sd-thread, #cda077);
}

/* Rechterkant van de voet: de socials en daaronder een rustige regel hulplinks */
.sd-menu__aside {
  display: grid;
  gap: 0;
}

@media (min-width: 700px) {
  .sd-menu__aside {
    justify-items: end;
  }
}

.sd-menu__social {
  display: flex;
  gap: 0.25rem 1.75rem;
}

.sd-menu__help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.25rem;
}

.sd-menu__help-label {
  color: var(--sd-muted, #8f8a85);
  font-size: var(--sd-fs-label, 0.8125rem);
  line-height: 1.5;
}

.sd-menu__help-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Tikvlak minstens 44 px hoog; de punt staat tussen de links, het vlak van de link vult de rest */
.sd-menu__help-list li {
  display: inline-flex;
  align-items: center;
}

.sd-menu__help-list li + li::before {
  content: '\00b7';
  color: var(--sd-muted, #8f8a85);
}

.sd-menu__help-list a {
  display: inline-flex;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  justify-content: center;
  color: var(--sd-soft-paper, #bdb8b2);
  font-size: var(--sd-fs-label, 0.8125rem);
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-color: var(--sd-line-dark-strong, rgba(245, 243, 241, 0.5));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color 240ms var(--sd-ease-ui, cubic-bezier(0.3, 0, 0.2, 1));
}

.sd-menu__help-list a:hover,
.sd-menu__help-list a:focus-visible {
  color: var(--sd-paper, #f5f3f1);
  text-decoration-color: var(--sd-thread, #cda077);
}

.sd-menu__social a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--sd-soft-paper, #bdb8b2);
  font-size: var(--sd-fs-label, 0.8125rem);
  font-weight: 500;
  letter-spacing: var(--sd-ls-label, 0.1em);
  text-transform: uppercase;
  font-feature-settings: 'case';
  transition: color 240ms var(--sd-ease-ui, cubic-bezier(0.3, 0, 0.2, 1));
}

.sd-menu__social a:hover,
.sd-menu__social a:focus-visible {
  color: var(--sd-paper, #f5f3f1);
}

/* ---------- 4. Footer ----------
   Compact: het woordmerk op 180 px met de gestikte D (vier blokken), één regel herkomst,
   één inschrijfregel, drie kolommen links, en een voet met de juridische regel,
   de betaalmethoden als tekst en de cookie-instellingen. */
.sd-footer {
  position: relative;
  background: var(--sd-ink, #0e0d0b);
  border-top: 1px solid var(--sd-line-dark, rgba(245, 243, 241, 0.14));
  padding: clamp(2.25rem, 6vw, 5rem) var(--sd-gutter, clamp(20px, 5vw, 64px)) 0;
}

/* Telefoon: twee kolommen (Ontdek, Hulp), zodat "Overeenkomst herroepen" altijd op één regel past;
   Juridisch staat eronder als één rij (zie onder). Vanaf 700 px drie kolommen. */
.sd-footer__inner {
  display: grid;
  gap: 2rem 0.75rem;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  max-width: var(--sd-wide, 1280px);
  margin-inline: auto;
}

.sd-footer__lead {
  grid-column: 1 / -1;
  max-width: 30rem;
}

@media (min-width: 700px) {
  .sd-footer__inner {
    gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .sd-footer__inner {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  }

  .sd-footer__lead {
    grid-column: auto;
    max-width: 28rem;
    padding-right: clamp(0rem, 3vw, 3rem);
  }
}

/* Het woordmerk: de D-steel is vier blokken (.sd-footer__block, --i 0-3).
   Wachtstand: .is-waiting (sd-scroll.js, pagina's met de rail) of .is-armed (sd-shell.js, overal,
   alleen met script en zonder reduce). sd-scroll.js zet .is-closed als de draad zijn knoop legt;
   zonder rail doet de shell dat zodra de footer voor 30% in beeld is (met rail na 2,5 s als valnet).
   Zonder wachtstand staan de blokken er gewoon: de eindtoestand. */
.sd-footer__mark {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--sd-paper, #f5f3f1);
}

.sd-footer__logo {
  width: 180px;
  height: auto;
  overflow: visible;
}

.sd-footer__block {
  transition: opacity 140ms var(--sd-ease, cubic-bezier(0.2, 0.65, 0.2, 1)) calc(var(--i, 0) * 120ms);
}

.sd-footer:is(.is-armed, .is-waiting):not(.is-closed) .sd-footer__block {
  opacity: 0;
  transition: none;
}

.sd-footer__line {
  margin-top: 0.85rem;
  color: var(--sd-soft-paper, #bdb8b2);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.sd-footer__signup {
  margin-top: 1.5rem;
}

/* Staat er op de pagina zelf al een reserveerformulier, dan geen tweede e-mailveld vlak eronder in de
   footer: home en /edities (form[data-reserve]) en de editiepagina's zodra hun reserveerblok zichtbaar is
   (form[data-sd-reserve-form] in een blok met data-sd-only, dat alleen in die toestanden van main[data-state]
   toont; op AION en EREBOS zolang ze te koop zijn dus niet). Zonder :has() blijven ze allebei staan. */
body:has(main form[data-reserve]) .sd-footer__signup,
body:has(main[data-state="coming_soon"] [data-sd-only~="coming_soon"] form[data-sd-reserve-form]) .sd-footer__signup,
body:has(main[data-state="sold_out"] [data-sd-only~="sold_out"] form[data-sd-reserve-form]) .sd-footer__signup,
body:has(main[data-state="pre_order"] [data-sd-only~="pre_order"] form[data-sd-reserve-form]) .sd-footer__signup,
body:has(main[data-state="available"] [data-sd-only~="available"] form[data-sd-reserve-form]) .sd-footer__signup {
  display: none;
}

.sd-footer__signup-label {
  display: block;
  color: var(--sd-muted, #8f8a85);
  font-size: var(--sd-fs-label, 0.8125rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--sd-ls-label, 0.1em);
  text-transform: uppercase;
  font-feature-settings: 'case';
}

/* Een veld met haarlijn en lichte vulling; de knop staat als tekst aan het eind.
   Bij focus omsluit een ring van 2 px het hele veld (invoer en knop samen). */
.sd-footer__signup-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding: 0 0.5rem 0 0.875rem;
  border: 1px solid var(--sd-line-dark-strong, rgba(245, 243, 241, 0.5));
  background: rgba(245, 243, 241, 0.035);
  transition:
    border-color 160ms var(--sd-ease-ui, cubic-bezier(0.3, 0, 0.2, 1)),
    outline-color 160ms var(--sd-ease-ui, cubic-bezier(0.3, 0, 0.2, 1));
}

.sd-footer__signup-row:hover {
  border-color: var(--sd-paper, #f5f3f1);
}

.sd-footer__signup-row:focus-within {
  border-color: var(--sd-thread, #cda077);
  outline: 2px solid var(--sd-thread, #cda077);
  outline-offset: 2px;
}

.sd-footer__signup-row:has([aria-invalid="true"]) {
  border-color: var(--sd-danger-paper, #ff9a85);
}

.sd-footer__signup-row:has([aria-invalid="true"]):focus-within {
  outline-color: var(--sd-danger-paper, #ff9a85);
}

.sd-footer__signup-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.75rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sd-paper, #f5f3f1);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}

.sd-footer__signup-input::placeholder {
  color: var(--sd-muted, #8f8a85);
  opacity: 1;
}

/* De focusring staat om de hele rij (:focus-within); het veld zelf kleurt een fractie mee */
.sd-footer__signup-input:focus,
.sd-footer__signup-input:focus-visible {
  outline: none;
  background-color: rgba(205, 160, 119, 0.06);
}

.sd-footer__signup-input:-webkit-autofill,
.sd-footer__signup-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sd-paper, #f5f3f1);
  -webkit-box-shadow: 0 0 0 100px var(--sd-ink, #0e0d0b) inset;
  caret-color: var(--sd-paper, #f5f3f1);
}

.sd-footer__signup-btn {
  flex: none;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  color: var(--sd-paper, #f5f3f1);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition:
    color 240ms var(--sd-ease-ui, cubic-bezier(0.3, 0, 0.2, 1)),
    opacity 240ms var(--sd-ease-ui, cubic-bezier(0.3, 0, 0.2, 1));
}

.sd-footer__signup-btn:hover,
.sd-footer__signup-btn:focus-visible {
  color: var(--sd-thread, #cda077);
}

.sd-footer__signup-btn[disabled] {
  opacity: 0.45;
  cursor: progress;
}

.sd-footer__signup-note {
  margin-top: 0.6rem;
  color: var(--sd-muted, #8f8a85);
  font-size: var(--sd-fs-label, 0.8125rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.sd-footer__signup-note a,
.sd-footer__legal a {
  text-decoration: underline;
  text-decoration-color: var(--sd-thread-dim, rgba(205, 160, 119, 0.55));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.sd-footer__signup-note a:hover,
.sd-footer__signup-note a:focus-visible {
  color: var(--sd-paper, #f5f3f1);
  text-decoration-color: var(--sd-thread, #cda077);
}

.sd-footer__signup-status {
  margin-top: 0.5rem;
  color: var(--sd-soft-paper, #bdb8b2);
  font-size: 0.875rem;
  line-height: 1.5;
}

.sd-footer__signup-status:empty {
  margin-top: 0;
}

.sd-footer__signup-status[data-state="error"] {
  color: var(--sd-danger-paper, #ff9a85);
}

/* Gelukt: het gestikte vinkje van MOTION (.sd-stitchcheck, drie steken) in de draadkleur */
.sd-footer__signup-status .sd-stitchcheck {
  color: var(--sd-thread, #cda077);
}

.sd-footer__head {
  margin-bottom: 0.35rem;
  color: var(--sd-muted, #8f8a85);
  font-size: var(--sd-fs-label, 0.8125rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--sd-ls-label, 0.1em);
  text-transform: uppercase;
  font-feature-settings: 'case';
}

.sd-footer__col ul {
  display: grid;
}

/* Links: 14 px op de telefoon, 15 px vanaf 700 px, altijd op één regel (de kolommen zijn er breed genoeg
   voor). Het tikvlak is minstens 44 px hoog. */
.sd-footer__col a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--sd-soft-paper, #bdb8b2);
  font-size: 0.875rem;
  line-height: 1.25;
  white-space: nowrap;
  background-image: linear-gradient(var(--sd-thread, #cda077), var(--sd-thread, #cda077));
  background-repeat: no-repeat;
  background-position: 0 calc(50% + 0.85em);
  background-size: 0 1px;
  transition:
    background-size 250ms var(--sd-ease-exit, cubic-bezier(0.4, 0, 1, 1)),
    color 240ms var(--sd-ease-ui, cubic-bezier(0.3, 0, 0.2, 1));
}

@media (min-width: 700px) {
  .sd-footer__col a {
    font-size: 0.9375rem;
  }
}

/* Telefoon: Juridisch als één rij onder de twee kolommen ("Voorwaarden · Privacy · Klachtenregeling").
   De kop is dan alleen voor schermlezers (de nav heet al "Juridisch"). */
@media (max-width: 699.98px) {
  .sd-footer__col[aria-label="Juridisch"] {
    grid-column: 1 / -1;
    margin-top: -1.25rem;
  }

  .sd-footer__col[aria-label="Juridisch"] .sd-footer__head {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .sd-footer__col[aria-label="Juridisch"] ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .sd-footer__col[aria-label="Juridisch"] li {
    display: inline-flex;
    align-items: center;
  }

  .sd-footer__col[aria-label="Juridisch"] li + li::before {
    content: '\00b7';
    padding: 0 0.6rem;
    color: var(--sd-muted, #8f8a85);
  }
}

/* Heel smalle telefoons (onder 360 px): 13 px, zodat "Overeenkomst herroepen" nog op één regel past */
@media (max-width: 359.98px) {
  .sd-footer__col a {
    font-size: var(--sd-fs-label, 0.8125rem);
  }
}

.sd-footer__col a:hover,
.sd-footer__col a:focus-visible {
  color: var(--sd-paper, #f5f3f1);
  background-size: 100% 1px;
  transition:
    background-size 450ms var(--sd-ease, cubic-bezier(0.2, 0.65, 0.2, 1)),
    color 240ms var(--sd-ease-ui, cubic-bezier(0.3, 0, 0.2, 1));
}

.sd-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.25rem;
  max-width: var(--sd-wide, 1280px);
  margin: clamp(2rem, 4vw, 3.5rem) auto 0;
  padding: 1.25rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--sd-line-dark, rgba(245, 243, 241, 0.14));
}

.sd-footer__legal {
  flex: 1 1 100%;
  margin-bottom: 0.25rem;
  color: var(--sd-muted, #8f8a85);
  font-size: var(--sd-fs-label, 0.8125rem);
  line-height: 1.6;
}

/* Betaalmethoden als tekst: "iDEAL · Visa · Mastercard", zonder kaders */
.sd-footer__pay {
  display: flex;
  flex-wrap: wrap;
  color: var(--sd-soft-paper, #bdb8b2);
  font-size: var(--sd-fs-label, 0.8125rem);
  line-height: 1.6;
}

.sd-footer__pay li + li::before {
  content: '\00a0\00b7\00a0';
  color: var(--sd-muted, #8f8a85);
}

.sd-footer__cookie {
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--sd-muted, #8f8a85);
  font-size: var(--sd-fs-label, 0.8125rem);
  text-decoration: underline;
  text-decoration-color: var(--sd-line-dark-strong, rgba(245, 243, 241, 0.5));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color 240ms var(--sd-ease-ui, cubic-bezier(0.3, 0, 0.2, 1));
}

.sd-footer__cookie:hover,
.sd-footer__cookie:focus-visible {
  color: var(--sd-paper, #f5f3f1);
}

/* Op de telefoon staat de vraagknop rechtsonder: de laatste regel (betalen en cookies) is kort en staat links */
@media (max-width: 699.98px) {
  .sd-footer__cookie {
    padding: 0 0.25rem;
  }
}

/* Vanaf 700 px: juridisch links, betalen en cookies rechts; ruimte voor de vraagknop vanaf 900 px */
@media (min-width: 700px) {
  .sd-footer__base {
    flex-wrap: nowrap;
    gap: 1.5rem;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }

  .sd-footer__legal {
    flex: 1 1 auto;
    margin-bottom: 0;
  }

  .sd-footer__pay {
    flex: none;
  }
}

@media (min-width: 900px) {
  .sd-footer__base {
    padding-right: 7.5rem;
  }
}

/* Rustige voet (checkout, bevestiging): geen kolommen en geen inschrijfveld */
body[data-footer="minimal"] .sd-footer {
  padding-top: 0;
}

body[data-footer="minimal"] .sd-footer__inner {
  display: none;
}

body[data-footer="minimal"] .sd-footer__base {
  margin-top: 0;
  border-top: 0;
  padding-top: 2rem;
}

/* ---------- 5. Cookiebanner ----------
   Geen modal: een kleine kaart rechts onder (vanaf 900px) of een smalle balk
   onderaan (mobiel ±105px hoog, tablet ±70px). Hij blokkeert de hero en de knoppen niet, en staat boven
   de koopbalk, nooit erover. Twee keuzes met hetzelfde gewicht, de rest achter Instellingen.
   Geen goud: beide keuzes zijn gelijk, de schakelaar is "aan" in de draadkleur. */
.sd-cookie {
  position: fixed;
  right: 0;
  bottom: var(--sd-buybar-h, 0px);
  left: 0;
  z-index: var(--sd-z-cookie, 140);
  display: flex;
  flex-direction: column;
  /* Nooit hoger dan ±45% van het scherm: met de instellingen open scrollt de lijst, de knoppen blijven staan */
  max-height: 45vh;
  padding: 0.5rem var(--sd-gutter, 1.25rem) calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--sd-ink-2, #171513);
  border-top: 1px solid var(--sd-line-dark-strong, rgba(245, 243, 241, 0.5));
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  pointer-events: none;
  transition:
    opacity 480ms var(--sd-ease, cubic-bezier(0.2, 0.65, 0.2, 1)),
    transform 480ms var(--sd-ease, cubic-bezier(0.2, 0.65, 0.2, 1)),
    bottom 400ms var(--sd-ease, cubic-bezier(0.2, 0.65, 0.2, 1)),
    visibility 0s linear 480ms;
}

@supports (height: 1svh) {
  .sd-cookie {
    max-height: 45svh;
  }
}

.sd-cookie.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s, 0s;
}

.sd-cookie__text {
  margin: 0;
  color: var(--sd-soft-paper, #bdb8b2);
  font-size: var(--sd-fs-label, 0.8125rem);
  line-height: 1.45;
}

.sd-cookie__text a {
  color: var(--sd-paper, #f5f3f1);
  text-decoration: underline;
  text-decoration-color: var(--sd-thread-dim, rgba(205, 160, 119, 0.55));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.sd-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.sd-cookie__actions .sd-cookie__btn {
  flex: 1 1 auto;
}

.sd-cookie__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--sd-line-dark-strong, rgba(245, 243, 241, 0.5));
  color: var(--sd-paper, #f5f3f1);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-wrap: balance;
  transition:
    border-color 240ms var(--sd-ease-ui, cubic-bezier(0.3, 0, 0.2, 1)),
    background-color 240ms var(--sd-ease-ui, cubic-bezier(0.3, 0, 0.2, 1));
}

.sd-cookie__btn:hover,
.sd-cookie__btn:focus-visible,
.sd-cookie__btn[aria-expanded="true"] {
  border-color: var(--sd-paper, #f5f3f1);
}

.sd-cookie__btn[hidden] {
  display: none;
}

.sd-cookie__link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sd-paper, #f5f3f1);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--sd-thread-dim, rgba(205, 160, 119, 0.55));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
  cursor: pointer;
}

.sd-cookie__link:hover,
.sd-cookie__link:focus-visible,
.sd-cookie__link[aria-expanded="true"] {
  text-decoration-color: var(--sd-thread, #cda077);
}

/* Het paneel vult de rest van de kaart: de lijst scrollt, de knoppen eronder blijven in beeld */
.sd-cookie__panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin-top: 0.5rem;
  border-top: 1px solid var(--sd-line-dark, rgba(245, 243, 241, 0.14));
}

.sd-cookie__panel > ul {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sd-cookie__panel[hidden] {
  display: none;
}

.sd-cookie__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--sd-line-dark, rgba(245, 243, 241, 0.14));
}

.sd-cookie__label {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  cursor: pointer;
}

.sd-cookie__name {
  color: var(--sd-paper, #f5f3f1);
  font-size: var(--sd-fs-label, 0.8125rem);
  font-weight: 500;
  line-height: 1.4;
}

.sd-cookie__desc {
  color: var(--sd-muted, #8f8a85);
  font-size: var(--sd-fs-label, 0.8125rem);
  line-height: 1.5;
}

/* Schakelaar met zichtbare stand: Aan of Uit staat naast het vlak, nooit alleen kleur.
   De tekst staat na de invoer in de DOM en wordt links ervan getoond. */
.sd-cookie__control {
  display: flex;
  flex: none;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.6rem;
}

.sd-cookie__state {
  min-width: 1.75rem;
  color: var(--sd-soft-paper, #bdb8b2);
  font-size: var(--sd-fs-label, 0.8125rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--sd-ls-label, 0.1em);
  text-align: right;
  text-transform: uppercase;
  font-feature-settings: 'case';
}

.sd-cookie__state::before {
  content: 'Uit';
}

.sd-cookie__switch:checked + .sd-cookie__state {
  color: var(--sd-thread, #cda077);
}

.sd-cookie__switch:checked + .sd-cookie__state::before {
  content: 'Aan';
}

/* Schakelaar: rechthoekig, zonder schaduw. Aan = vlak in de draadkleur. */
.sd-cookie__switch {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  margin: 0;
  border: 1px solid var(--sd-line-dark-strong, rgba(245, 243, 241, 0.5));
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color 240ms var(--sd-ease-ui, cubic-bezier(0.3, 0, 0.2, 1)),
    border-color 240ms var(--sd-ease-ui, cubic-bezier(0.3, 0, 0.2, 1));
}

.sd-cookie__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(1.5rem - 8px);
  height: calc(1.5rem - 8px);
  background: var(--sd-paper, #f5f3f1);
  transition: transform 240ms var(--sd-ease-ui, cubic-bezier(0.3, 0, 0.2, 1)), background-color 240ms var(--sd-ease-ui, cubic-bezier(0.3, 0, 0.2, 1));
}

.sd-cookie__switch:checked {
  background: var(--sd-thread, #cda077);
  border-color: var(--sd-thread, #cda077);
}

.sd-cookie__switch:checked::after {
  background: var(--sd-ink, #0e0d0b);
  transform: translateX(calc(2.75rem - 1.5rem));
}

.sd-cookie__switch:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sd-cookie__panel-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.6rem;
}

.sd-cookie__panel-actions .sd-cookie__btn {
  flex: 1 1 8rem;
}

/* Tablet: balk over de volle breedte, tekst links en knoppen rechts, zodat hij laag blijft */
@media (min-width: 640px) {
  .sd-cookie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }

  .sd-cookie__text {
    font-size: 0.875rem;
  }

  .sd-cookie__actions {
    flex-wrap: nowrap;
    margin-top: 0;
  }

  .sd-cookie__actions .sd-cookie__btn {
    flex: none;
    padding: 0.25rem 1rem;
    white-space: nowrap;
  }

  .sd-cookie__panel {
    grid-column: 1 / -1;
  }
}

/* Desktop: kleine kaart rechts onder, naast de inhoud */
@media (min-width: 900px) {
  .sd-cookie {
    display: flex;
    right: 1.5rem;
    bottom: calc(var(--sd-buybar-h, 0px) + 1.5rem);
    left: auto;
    width: 22rem;
    max-width: calc(100vw - 3rem);
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid var(--sd-line-dark-strong, rgba(245, 243, 241, 0.5));
  }

  .sd-cookie__actions {
    flex-wrap: wrap;
    margin-top: 0.75rem;
  }

  .sd-cookie__actions .sd-cookie__btn {
    flex: 1 1 auto;
    padding: 0.25rem 0.5rem;
  }
}

/* Focus en ankers scrollen nooit onder de koopbalk of de cookiebalk: sd-shell.js zet scroll-padding-bottom
   op <html> (koopbalk + cookiebalk + 1rem) zodra een van beide in beeld is. Dat is geen overerfde
   eigenschap, dus alleen <html> zelf wordt opnieuw berekend. */

/* ---------- 6. Legacy en docking ---------- */
/* De tas zit nu in de header. De zwevende winkelwagenknop van de oude pagina's
   (id sticky-cart) zou er een tweede naast zetten en wees naar een ander domein. */
.sticky-cart {
  display: none !important;
}

/* ---------- 7. Beweging, contrast en print ---------- */
@media (prefers-reduced-motion: reduce) {
  .sd-header,
  .sd-header *,
  .sd-header *::before,
  .sd-header *::after,
  .sd-menu,
  .sd-menu *,
  .sd-footer *,
  .sd-cookie,
  .sd-cookie * {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
  }

  .sd-header.is-hidden {
    transform: none;
  }

  .sd-js .sd-menu__list li,
  .sd-js .sd-menu__foot {
    opacity: 1;
    transform: none;
  }

  .sd-footer:is(.is-armed, .is-waiting) .sd-footer__block {
    opacity: 1;
  }
}

@media (forced-colors: active) {
  .sd-header__bag::after,
  .sd-header__menu::after,
  .sd-header__x::before,
  .sd-header__x::after {
    background: CanvasText;
  }

  .sd-menu__status::before {
    border-color: CanvasText;
  }

  .sd-cookie__switch:checked {
    background: Highlight;
  }

  .sd-footer__logo {
    color: CanvasText;
  }
}

@media print {
  .sd-header,
  .sd-menu,
  .sd-cookie,
  .sd-footer__signup,
  .sd-footer__cookie {
    display: none !important;
  }

  .sd-footer {
    background: none;
    border-top: 1px solid #000;
  }

  .sd-footer * {
    color: #000 !important;
  }

  .sd-footer__block {
    opacity: 1 !important;
  }
}