/** Shopify CDN: Minification failed

Line 1611:45 Unexpected ")"

**/
*, :before, :after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  border-color: rgb(var(--tlam-rand));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  scroll-padding-top: var(--tl-sticky-offset);
  interpolate-size: allow-keywords;
  line-height: 1.5;
}
body {
  background: rgb(var(--tlam-pagina-vlak));
  font: var(--tlam-tekst-stijl) var(--tlam-tekst-gewicht) var(--tlam-maat-basis) / 1.4 var(--tlam-tekst-font);
  letter-spacing: var(--tlam-tekst-spatiering);
  margin: 0;
  position: relative;
}
hr {
  border-top-width: 1px;
  justify-self: stretch;
  height: 0;
}
a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}
b, strong {
  font-weight: bolder;
}
code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  font-size: 1em;
}
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
input, select, textarea, button, optgroup {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  text-transform: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
input[type="submit"] {
  cursor: pointer;
}
[type="submit"], [type="reset"], [type="button"], button {
  -webkit-appearance: button;
  background-color: #0000;
  background-image: none;
}
summary, label, button, [role="button"], [type="radio"], [type="checkbox"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}
:-moz-focusring {
  outline: auto;
}
:-moz-ui-invalid {
  box-shadow: none;
}
::-webkit-inner-spin-button {
  height: auto;
}
::-webkit-outer-spin-button {
  height: auto;
}
::-webkit-date-and-time-value {
  text-align: start;
}
[type="date"] {
  min-height: 3rem;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/* Chrome zet in een [type="search"] met inhoud zijn eigen wiskruisje neer. Dat past bij geen
   enkel veld in dit thema — de zoekbalken hebben hun eigen knop — dus onderdrukken we hem
   meteen voor alle zoekvelden, en niet per veld. */
::-webkit-search-cancel-button,
::-webkit-search-results-button,
::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
summary {
  list-style-type: none;
}
summary::-webkit-details-marker {
  display: none;
}
p, h1, h2, h3, h4, h5, h6, blockquote, figure, pre, dl, dd, hr {
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--tlam-titel-gewicht, normal);
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ul, ol, menu {
  margin: 0;
  padding: 0;
}
.tl-list-plain {
  margin: 0;
  padding: 0;
  list-style: none;
}
textarea {
  resize: vertical;
  field-sizing: content;
  min-height: 4lh;
}
textarea::placeholder, input::placeholder {
  opacity: 1;
  color: rgb(var(--tlam-tekstkleur) / .65);
}
:disabled {
  cursor: default !important;
}
img, video, svg, iframe, canvas, audio, object, embed {
  vertical-align: middle;
  display: block;
}
img {
  color: #0000;
  max-width: 100%;
  height: auto;
}
[role="img"] svg {
  display: initial;
}
picture source {
  display: contents;
}
video {
  max-width: 100%;
  height: auto;
}
:focus:not(:focus-visible) {
  outline: none;
}
[hidden] {
  display: none !important;
}
tlam-size-probe {
  display: block;
}
.tl-color-scheme {
  background-color: rgb(var(--tlam-achtergrond));
  background-image: var(--tlam-achtergrond-verloop);
  color: rgb(var(--tlam-tekstkleur));
  border-color: rgb(var(--tlam-rand));
}
.tl-accordion {
  box-sizing: content-box;
  display: block;
}
.tl-accordion {
  border-block-width: 1px;
}
.tl-accordion :is(svg) {
  transition: transform 200ms, background-color 200ms;
}
/* Subtle circle background around the chevron caret on hover/focus.
   Only direct-child svgs of the toggle are targeted so it never affects
   custom icons rendered inside the title. */
.tl-accordion + .tl-accordion {
  border-block-start-width: 0;
}
/* TLAM: optionele badge naast de accordion-titel */
.shopify-challenge__button, .shopify-payment-button__button--unbranded {
  all: revert;
}
.tl-button, .shopify-challenge__button, .shopify-payment-button__button--unbranded {
  -webkit-appearance: none;
  appearance: none;
  text-transform: var(--tlam-knop-kast);
  font: var(--tlam-knop-font);
  letter-spacing: var(--tlam-knop-spatiering);
  text-shadow: none;
  text-align: center;
  cursor: pointer;
  color: rgb(var(--tlam-knop-tekst));
  background: rgb(var(--tlam-knop-vlak));
  border: 1px solid rgb(var(--tlam-knop-vlak));
  border-radius: 0;
  justify-content: center;
  align-items: center;
  column-gap: 1.125rem;
  padding: .65rem 1.75rem;
  transition: opacity 200ms, background 200ms, color 200ms, border-color 200ms;
  display: inline-flex;
  position: relative;
}
.tl-button:not([disabled]):hover, .shopify-challenge__button:not([disabled]):hover, .shopify-payment-button__button--unbranded:not([disabled]):hover {
  opacity: 0.85;
}
.shopify-payment-button__button--unbranded {
  border: 1px solid rgb(var(--tlam-knop-vlak)) !important;
  border-radius: var(--tlam-knop-ronding) !important;
  background: rgb(var(--tlam-knop-vlak)) !important;
  color: rgb(var(--tlam-knop-tekst)) !important;
  transition: opacity 200ms !important;
}
.tl-button--outline {
  color: rgb(var(--tlam-tekstkleur));
  background: transparent;
  border-color: rgb(var(--tlam-tekstkleur) / 0.3);
}
.color-scheme--scheme-1 .tl-button--outline, .color-scheme--scheme-2 .tl-button--outline {
  border-color: #dfded6;
}
.color-scheme--scheme-4 .tl-button--outline {
  border-color: rgba(255, 255, 255, 0.2);
}
.tl-button--outline:not([disabled]):hover {
  opacity: 1;
  background: transparent;
  border-color: rgb(var(--tlam-tekstkleur) / 0.5);
}
.color-scheme--scheme-1 .tl-button--outline:not([disabled]):hover, .color-scheme--scheme-2 .tl-button--outline:not([disabled]):hover {
  border-color: #dfded6;
}
.color-scheme--scheme-4 .tl-button--outline:not([disabled]):hover {
  border-color: rgba(255, 255, 255, 0.2);
}
.tl-button--subdued.tl-button--outline {
  color: rgb(var(--tlam-knop-vlak) / .65);
  border-color: rgb(var(--tlam-rand));
}
.tl-button-group {
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  display: flex;
}
.tl-button-group > * {
  margin: 0 !important;
}
.tl-button-group:has(.tl-link):has(.tl-button) {
  column-gap: 1.5rem;
}
@media screen and (min-width: 43.75em) {.tl-button-group {
    gap: 1.25rem;
  }
.tl-button-group:has(.tl-link):not(:has(.tl-button)) {
    column-gap: 2rem;
  }
.tl-button-group--same-width {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    display: grid;
  }}
.additional-checkout-buttons {
  width: 100%;
}
.shopify-payment-button__button {
  vertical-align: top;
  width: 100%;
  min-height: calc(1lh + 1.3rem + 2px);
}
shopify-accelerated-checkout, shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: 44px;
  --shopify-accelerated-checkout-button-border-radius: var(--tlam-knop-ronding);
  --shopify-accelerated-checkout-button-box-shadow: none;
}
:where(tlam-drawer, tlam-modal, tlam-sidebar, tlam-sidebar-panel, tlam-quick-buy):not(:defined) {
  display: none;
}
:where( .tl-drawer) {
  z-index: 999;
  display: none;
  position: relative;
}
:where( .tl-drawer)::part(scrim) {
  background: rgb(var(--tl-page-scrim));
  min-height: 100vh;
  position: fixed;
  inset: 0;
}
:where( .tl-drawer)::part(sluitknop) {
  color: currentColor;
  cursor: pointer;
  background: none;
  border: 1px solid rgb(var(--tlam-tekstkleur) / 0.3);
  border-radius: 2px;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
}
:where( .tl-drawer)::part(sluitknop) > svg {
  display: block;
  width: 16px;
  height: 16px;
}
@media screen and (pointer: fine) {:where( .tl-drawer)::part(sluitknop) {
    opacity: .6;
    transition: all 200ms ease-in;
  }
:where( .tl-drawer)::part(sluitknop):hover {
    opacity: 1;
  }}
:where( .tl-drawer)::part(raakvlak) {
  position: relative;
}
:where( .tl-drawer)::part(raakvlak):before {
  content: "";
  position: absolute;
  inset: -.65rem;
}
.tl-drawer {
  --tl-bleed-offset: var(--tl-drawer-body-pad-inline);
  --tl-drawer-head-pad-block: 1rem;
  --tl-drawer-head-pad-inline: 1.25rem;
  --tl-drawer-body-pad-block: 1.25rem;
  --tl-drawer-body-pad-inline: 1.25rem;
  --tl-drawer-foot-pad-block: 1rem;
  --tl-drawer-foot-pad-inline: 1.25rem;
  --tl-drawer-width: min(92vw, 28.125rem);
}
.tl-drawer::part(kader) {
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
}
.tl-drawer::part(paneel) {
  width: 100%;
  height: 100%;
  max-width: var(--tl-drawer-width);
  background-color: rgb(var(--tlam-achtergrond));
  background-image: var(--tlam-achtergrond-verloop);
  color: rgb(var(--tlam-tekstkleur));
  grid-auto-rows: auto minmax(0, 1fr) auto;
  align-content: start;
  display: grid;
  position: relative;
}
.tl-drawer::part(kop) {
  min-height: min(var(--tlam-kop-hoogte), 5rem);
  border-block-end: 1px solid rgb(var(--tlam-rand));
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  column-gap: 1rem;
  padding-block-start: var(--tl-drawer-head-pad-block);
  padding-block-end: var(--tl-drawer-head-pad-block);
  padding-inline-start: var(--tl-drawer-head-pad-inline);
  padding-inline-end: var(--tl-drawer-head-pad-inline);
  display: flex;
}
.tl-drawer::part(inhoud) {
  overscroll-behavior-y: contain;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding-block-start: var(--tl-drawer-body-pad-block);
  padding-block-end: var(--tl-drawer-body-pad-block);
  padding-inline-start: var(--tl-drawer-body-pad-inline);
  padding-inline-end: var(--tl-drawer-body-pad-inline);
  display: grid;
  overflow: hidden auto;
}
.tl-drawer::part(voet) {
  background-color: rgb(var(--tlam-achtergrond));
  background-image: var(--tlam-achtergrond-verloop);
  border-block-start: 1px solid rgb(var(--tlam-rand));
  padding-block-start: var(--tl-drawer-foot-pad-block);
  padding-block-end: var(--tl-drawer-foot-pad-block);
  padding-inline-start: var(--tl-drawer-foot-pad-inline);
  padding-inline-end: var(--tl-drawer-foot-pad-inline);
}
@media screen and (min-width: 62.5em) {.tl-drawer {
    --tl-drawer-head-pad-block: 1.125rem;
    --tl-drawer-head-pad-inline: 2rem;
    --tl-drawer-body-pad-block: 2rem;
    --tl-drawer-body-pad-inline: 2rem;
    --tl-drawer-foot-pad-block: 2rem;
    --tl-drawer-foot-pad-inline: 2rem;
  }}
/* TLAM: geen gevuld blok maar een dunne omlijning met een vierkantje ervoor, in de mono-stijl
   van de labels. Geldt voor elke formuliermelding (contact, nieuwsbrief, account). */
.tl-banner {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-24);
  border: 1px solid color-mix(in srgb, currentcolor 18%, transparent);
  background: none;
  font-family: var(--tlam-caption-font);
  font-weight: var(--tlam-caption-gewicht);
  font-size: var(--tlam-maat-caption);
  line-height: var(--tlam-tekst-regel);
  letter-spacing: var(--tlam-caption-spatiering);
  text-transform: uppercase;
  color: currentcolor;
  text-shadow: none;
}
.tl-banner::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background-color: currentcolor;
}
.tl-banner--success { color: var(--color-bronze, #8a6a4b); }
.tl-banner--error { color: rgb(var(--tlam-fout-tekst, 200 80 70)); }
.tl-banner--error {
  --tlam-knop-vlak: var(--tlam-fout-tekst);
  --tlam-knop-tekst: var(--tlam-fout-vlak);
}
.tl-banner--success {
  --tlam-knop-vlak: var(--tlam-succes-tekst);
  --tlam-knop-tekst: var(--tlam-succes-vlak);
}
.tl-banner--warning {
  --tlam-banner-vlak: var(--tlam-waarschuwing-vlak);
  --tlam-banner-tekst: var(--tlam-waarschuwing-tekst);
  --tlam-knop-vlak: var(--tlam-waarschuwing-tekst);
  --tlam-knop-tekst: var(--tlam-waarschuwing-vlak);
}
.tl-field {
  gap: var(--tl-field-gap);
  display: grid;
  position: relative;
}
.tl-field > label {
  justify-self: start;
}
.tl-input, .tl-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: var(--tlam-veld-ruimte-y) var(--tlam-veld-ruimte-x);
  border-radius: var(--tlam-veld-ronding);
  background: rgb(var(--tlam-veld-vlak, transparent));
  color: rgb(var(--tlam-veld-tekst, var(--tlam-tekstkleur)));
  text-align: start;
  border-width: 1px;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  box-sizing: border-box;
  transition: border-color 100ms ease-in-out;
}
:is(.tl-input, .tl-textarea, .tl-select)::placeholder {
  color: rgb(var(--tlam-veld-tekst, var(--tlam-tekstkleur)) / .6);
}
:is(.tl-input:focus, .tl-textarea:focus, .tl-select:focus-visible) {
  border-color: currentColor;
  outline: none;
}
.tl-select {
  box-shadow: 0 1px 3px rgb(var(--tlam-tekstkleur) / .08);
  padding-inline-end: calc(var(--tlam-veld-ruimte-x) * 2 + 10px);
}
.tl-select:required:invalid {
  color: rgb(var(--tlam-veld-tekst, var(--tlam-tekstkleur)) / .6);
}
.tl-select ~ svg, .tl-select > svg {
  transition: transform 200ms;
  position: absolute;
  inset-block-start: calc(50% - 3.5px);
  inset-inline-end: calc(var(--tlam-veld-ruimte-x)  + 1px);
}
.tl-select[aria-expanded="true"] > svg {
  transform: rotateZ(180deg);
}
.tl-field:has(.tl-select):before {
  content: "";
  width: calc(var(--tlam-veld-ruimte-x) * 2 + 35px);
  background-image: linear-gradient(to var(--tl-origin-start), rgb(var(--tlam-achtergrond)) calc(var(--tlam-veld-ruimte-x)  + 20px), rgb(var(--tl-bg-solid) / 0));
  pointer-events: none;
  height: calc(100% - 2px);
  position: absolute;
  inset-block-start: 1px;
  inset-inline-end: 1px;
}
.tl-field:has(.tl-select):not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
  border-top-right-radius: var(--tlam-veld-ronding);
  border-bottom-right-radius: var(--tlam-veld-ronding);
}
.tl-field:has(.tl-select):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
  border-top-left-radius: var(--tlam-veld-ronding);
  border-bottom-left-radius: var(--tlam-veld-ronding);
}
:is(:is(.tl-input, .tl-textarea):not(:placeholder-shown) ~ .tl-field-label, :is(.tl-input, .tl-textarea, .tl-select):autofill ~ .tl-field-label, .tl-select:valid ~ .tl-field-label) {
  opacity: 1;
  transform: translateY(0);
}
.tl-checkbox {
  --tl-checkbox-shift: calc(1em * 1.6);
  --tlam-vinkje-verschuiving: calc((var(--tl-checkbox-shift)  - var(--tlam-vinkje-maat)) / 2);
  -webkit-appearance: none;
  appearance: none;
  width: var(--tlam-vinkje-maat);
  height: var(--tlam-vinkje-maat);
  border-width: 1px;
  border-color: rgb(var(--tlam-tekstkleur) / .8);
  background: var(--tl-check-icon) no-repeat center / 0;
  border-radius: 0;
  flex-shrink: 0;
  transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out;
  position: relative;
  inset-block-start: var(--tlam-vinkje-verschuiving);
}
@supports (width: 1lh) {.tl-checkbox {
    inset-block-start: calc(.5lh - var(--tlam-vinkje-maat) / 2);
  }}
.tl-checkbox:checked {
  background-color: rgb(var(--tlam-accent));
  border-color: rgb(var(--tlam-accent));
  background-size: 10px 8px;
}
.tl-checkbox:checked ~ label {
  opacity: 1;
}
.tl-checkbox:disabled, .tl-checkbox:disabled ~ label {
  opacity: .5;
  cursor: default;
}
.tl-checkbox:not(:disabled, :checked) ~ label {
  opacity: .7;
}
.tl-checkbox ~ label {
  transition: all 200ms ease-in-out;
}
.shopify-section:not(:first-child) .tl-framed {
  border-block-start-width: 1px;
}
.shopify-section:not(:has(.tl-band)) + .shopify-section {
  border-block-start-width: 0;
}
.tl-container {
  --tl-bleed-offset: max(var(--tlam-marge), 50% - var(--tlam-breedte) / 2);
  margin-inline-start: max(var(--tlam-marge), 50% - var(--tlam-breedte) / 2);
  margin-inline-end: max(var(--tlam-marge), 50% - var(--tlam-breedte) / 2);
}
.tl-container--xxs {
  --tlam-breedte: var(--tlam-breedte-xxs);
}
.tl-container--xs {
  --tlam-breedte: var(--tlam-breedte-xs);
}
.tl-band {
  padding-block-start: calc(var(--tlam-sectie-ruimte, var(--tl-section-space))  + var(--tlam-sectie-compensatie, 0px));
  padding-block-end: var(--tlam-sectie-ruimte, var(--tl-section-space));
}
.shopify-section:has(.tl-band) {
  scroll-padding-block-start: calc(var(--tl-announcement-sticky, 0) * var(--tlam-meldingsbalk-hoogte, 0px)  + var(--tl-header-sticky, 0) * var(--tlam-kop-hoogte, 0px));
}
.tl-band--tight {
  --tl-section-space: var(--tl-section-space-tight);
  --tl-stack-gap: var(--tl-stack-gap-tight);
}
.shopify-section:empty {
  display: none;
}
.tl-stack {
  gap: var(--tl-stack-gap);
  grid-auto-columns: minmax(0, 1fr);
  display: grid;
}
.tl-stack-y {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  display: grid;
}
.shopify-section--header {
  /* TLAM: geen marge rond de header, hij loopt van rand tot rand (Figma 340:5581) */
  padding: 0;
  transform: translateY(calc(((var(--tlam-meldingsbalk-hoogte, 0px)  + var(--tlam-kop-hoogte, 0px)) * -1) * var(--tlam-kopgroep-weg, 0)));
  transition: transform .25s ease-in-out;
}
/* Line item remove link */
.tl-pagination {
  border-block-end-width: 1px;
  grid-auto-rows: minmax(0, 2.8125rem);
  grid-auto-columns: minmax(0, 2.625rem);
  grid-auto-flow: column;
  justify-self: center;
  display: inline-grid;
}
.tl-pagination__link {
  place-content: center;
  display: grid;
  position: relative;
}
.tl-pagination__link[aria-current="page"] {
  box-shadow: 0 1px, inset 0 -2px;
}
@media screen and (min-width: 43.75em) {.tl-pagination {
    grid-auto-columns: minmax(0, 3.75rem);
  }}
/*
  TLAM: paginering in de stijl van het thema. Vierkanten van 44 met een rand van 1px in zwart
  op 10%, zoals de knoppen in de drawer en op de kaarten; de cijfers in Geist Mono 12 met de
  tracking van de andere labels. De huidige pagina staat op een champagne vlak.
*/
.tl-pagination {
  border-block-end-width: 0;
  /*
    `grid` in plaats van `inline-grid` met een eigen breedte: zo staat de rij in elk blok in het
    midden, ook waar de omgeving niet centreert (de zoekresultaten bijvoorbeeld).
  */
  display: grid;
  width: fit-content;
  grid-auto-rows: 44px;
  grid-auto-columns: 44px;
  gap: var(--space-8);
  justify-self: center;
  margin-inline: auto;
  padding-block-start: var(--space-24);
}

@media screen and (min-width: 43.75em) {
  .tl-pagination { grid-auto-columns: 44px; }
}

 /* dubbele klasse: anders wint de kopletter van `tl-h6` op dezelfde link */
.tl-pagination .tl-pagination__link {
  border: 1px solid rgb(0 0 0 / 0.1);
  font-family: var(--tlam-caption-font);
  font-weight: var(--tlam-caption-gewicht);
  font-size: var(--tl-body-4);
  letter-spacing: var(--tlam-caption-spatiering);
  line-height: 1;
  color: var(--color-oro-nero);
  text-decoration: none;
  transition: background-color 200ms;
}

.tl-pagination .tl-pagination__link:hover { background-color: var(--color-champagne); }

/* De huidige pagina: geen onderstreping maar een vlak, in lijn met de rest van het thema */
.tl-pagination .tl-pagination__link[aria-current="page"] {
  box-shadow: none;
  background-color: var(--color-champagne);
}

/* Het beletselteken tussen de nummers is geen knop */
.tl-pagination .tl-pagination__link--disabled:not([aria-current="page"]) {
  border-color: transparent;
  color: var(--color-silverplated);
}

/* Single image: also add progress-style line at bottom */
/* --------------------------------------------------------
   TLAM: Product card diameter subtitle
   -------------------------------------------------------- */
/* --------------------------------------------------------
   TLAM: Custom badge styles — light bg, dark text, outline
   -------------------------------------------------------- */
/* All badges use Geist (default theme uses heading font) — double class beats base .tl-badge that comes later in the file */
.tl-rich {
  overflow-wrap: anywhere;
}
.tl-rich :first-child, .tl-rich .sr-only:first-child + * {
  margin-block-start: 0 !important;
}
.tl-rich :last-child {
  margin-block-end: 0 !important;
}
.tl-rich :where(:not(meta, span) + *) {
  margin-block-start: 1rem;
}
.tl-rich :where(* + span:not(:empty, .metafield-multi_line_text_field)), .tl-rich :is(.tl-link, img) {
  display: inline-block;
}
.tl-rich :is(.tl-link + .tl-link) {
  margin-inline-start: .75rem;
}
.tl-rich :is(.tl-button, .tl-button-group:has(.tl-button)) {
  margin-block-start: 1.5rem;
}
/* Hide decorative line breaks on mobile (not in headings) */
@media screen and (max-width: 43.6875em) {:is(.tl-rich, [class*="story__text"]) :not(h1, h2, h3, h4, h5, h6) > br, :is(.tl-rich, [class*="story__text"]) > p > br {
    display: none;
  }}
.tl-rich :is(p img:not([style*="float"]):only-child, div img:not([style*="float"]):only-child, figure, video, object, blockquote, table) {
  margin-block: 1.6rem;
}
.tl-rich :is(iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="vimeo"]) {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}
.tl-rich :is(ol, ul) :is(ol, ul) {
  margin-block-start: 0 !important;
}
.tl-rich :is(ol, ul) {
  row-gap: .4em;
  display: grid;
}
.tl-rich br {
  margin-block: 0 !important;
}
.tl-rich figcaption {
  font-style: italic;
  font-size: var(--tlam-maat-s);
  color: rgb(var(--tlam-tekstkleur) / .65);
  margin-block-start: .5em;
}
.tl-rich blockquote {
  border-inline-start-width: 3px;
  padding: .375rem 0 .375rem 1rem;
  font-size: 1.15rem;
  line-height: 1.75;
}
@media screen and (min-width: 62.5em) {.tl-rich:not(.tl-rich--tight) :where(:not(meta, span) + *) {
    margin-block-start: 1.25rem;
  }
.tl-rich:not(.tl-rich--tight) :is(.tl-button, .tl-button-group:has(.tl-button)) {
    margin-block-start: 2rem;
  }
.tl-rich:not(.tl-rich--tight) blockquote {
    margin-inline-start: 2rem;
    padding-inline-start: 2rem;
  }}
.tl-link {
  background: linear-gradient(currentColor 0 0) 0 min(100%, 1.35em) / 100% 1px no-repeat;
  text-decoration: none;
  transition: background-size 300ms ease-in-out;
}
.tl-rich a:not(.tl-h1, .tl-h2, .tl-h3, .tl-h4, .tl-h6, .tl-button, .tl-link-soft, .tl-link-soft-invert, :has(img)) {
  background: linear-gradient(currentColor 0 0) 0 min(100%, 1.35em) / 100% 1px no-repeat;
  text-decoration: none;
  transition: background-size 300ms ease-in-out;
}
@supports (height: 1lh) {.tl-rich a:not(.tl-h1, .tl-h2, .tl-h3, .tl-h4, .tl-h6, .tl-button, .tl-link-soft, .tl-link-soft-invert, :has(img)) {
    background: linear-gradient(currentColor 0 0) 0 min(100%, 1.2lh) / 100% 1px no-repeat;
  }}
@media screen and (pointer: fine) {.tl-rich a:not(.tl-h1, .tl-h2, .tl-h3, .tl-h4, .tl-h6, .tl-button, .tl-link-soft, .tl-link-soft-invert, :has(img)):hover {
    background-size: 0 1px;
  }}
@supports (height: 1lh) {.tl-link {
    background: linear-gradient(currentColor 0 0) 0 min(100%, 1.2lh) / 100% 1px no-repeat;
  }}
@media screen and (pointer: fine) {.tl-link:hover {
    background-size: 0 1px;
  }}
table {
  --tlam-cel-ruimte-y: .75rem;
  --tlam-cel-ruimte-x: .5rem;
  --tlam-voetcel-ruimte-y: .75rem;
  --tlam-voetcel-ruimte-x: .5rem;
  width: 100%;
}
table caption {
  text-align: inherit;
  margin-block-end: .5rem;
}
th {
  text-align: start;
}
:where(td, th):not(:empty) {
  border-block-width: 1px;
}
:where(th):not(:empty) {
  border-block-start-width: 0;
}
td:not(:empty) + td {
  border-inline-start-width: 0;
}
th, td {
  padding: var(--tlam-cel-ruimte-y) var(--tlam-cel-ruimte-x);
}
table :is(th, td):first-child, table :is(th, td):empty + td {
  padding-inline-start: 0;
}
:is(th, td):last-child {
  padding-inline-end: 0;
}
th {
  opacity: .6;
  line-height: 1.7;
  font-size: var(--tlam-maat-h6);
  font-family: var(--tlam-titel-font);
  font-weight: var(--tlam-titel-gewicht);
  font-style: var(--tlam-titel-stijl);
  letter-spacing: var(--tlam-titel-spatiering);
  text-transform: var(--tlam-titel-kast);
  padding-block: 0 .625rem;
}
tfoot td {
  padding: var(--tlam-voetcel-ruimte-y) var(--tlam-voetcel-ruimte-x);
}
tr[onclick] {
  cursor: pointer;
  transition: background 200ms;
}
tr[onclick]:hover {
  background: rgb(var(--tlam-tekstkleur) / .05);
}
@media screen and (min-width: 43.75em) {table {
    --tlam-cel-ruimte-y: 1rem;
    --tlam-cel-ruimte-x: .75rem;
    --tlam-voetcel-ruimte-y: 1rem;
    --tlam-voetcel-ruimte-x: .75rem;
  }}

.tl-icon-line {
  align-items: center;
  gap: .625rem;
  display: flex;
}
.tl-icon-line > svg {
  flex-shrink: 0;
}
.tl-icon {
  vertical-align: middle;
  height: auto;
  transition: transform 200ms;
  display: block;
}
[dir="rtl"] .tl-icon--flip-rtl {
  scale: -1;
}
.tl-icon-offset {
  --tl-icon-shift: calc(1em * 1.65 / 2);
  top: var(--tl-icon-shift);
  position: relative;
  translate: 0 -50%;
}
@supports (top: 1lh) {.tl-icon-offset {
    top: .5lh;
  }}
[id^="specs-drawer-"]::part(sluitknop), [id^="reviews-drawer-"]::part(sluitknop), [id^="store-locator-drawer-"]::part(sluitknop) {
  color: #1d1d1b;
  border: 1px solid rgba(0, 0, 0, 0.10);
  position: absolute;
  inset-block-start: 10px !important;
  inset-inline-end: 10px !important;
}
/* Mobile: bottom sheet */
.tl-payment-methods {
  flex-wrap: wrap;
  gap: 1rem;
  display: flex;
}
.tl-payment-methods svg, .tlam-payment-scroll svg, .tlam-payment-scroll__icon svg {
  /* TLAM: tegels van 35x24 (Figma 1296:3322) */
  width: 35px;
  height: 24px;
  border-radius: 4px;
}
[data-tooltip] {
  --tlam-tip-tekst: var(--tlam-tekstkleur);
  --tlam-tip-vlak: var(--tlam-achtergrond);
  position: relative;
}
@media screen and (pointer: fine) {[data-tooltip]:after {
    content: attr(data-tooltip);
    inset-block-end: calc(100% + var(--tlam-tip-afstand, .5rem));
    border-radius: min(1.5rem, var(--tlam-knop-ronding));
    background: rgb(var(--tlam-tip-tekst));
    width: max-content;
    max-width: 15rem;
    color: rgb(var(--tlam-tip-vlak));
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    justify-self: center;
    padding: .125rem .5rem;
    font-size: .6875rem;
    transition: opacity 100ms ease-in-out, visibility 100ms ease-in-out, scale 100ms ease-in-out;
    position: absolute;
    left: 50%;
    translate: -50%;
    scale: .9;
  }
[data-tooltip]:hover:after {
    visibility: visible;
    opacity: 1;
    scale: 1;
  }}
/* TLAM: cart page desktop — 3-col layout: image | info | price+qty top / remove bottom */
@keyframes spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}
/* Footer tagline */
/* TLAM: Sidebar footer — no icons, tighter spacing */
/* TLAM: Sidebar nav items — larger font */
/* TLAM: Locale toggle — hide label + chevron by default (header) */
/* TLAM: Sidebar locale — bottom spacing */
.tlam-nav-drawer__localization {
  padding-bottom: 2rem;
}
/* Footer middle column order: bedrijfsinfo · Klantenservice · nieuwsbrief */
.tl-gift-card__image {
  max-width: 16.875rem;
  margin-inline: auto;
}
.tl-gift-card__redeem-info {
  padding: 1.5rem;
}
.tl-gift-card__save {
  place-items: center;
  gap: 1.5rem;
  display: grid;
}
.tl-gift-card__qr-code {
  width: 5rem;
  height: 5rem;
}
@media screen and (min-width: 43.75em) {.tl-gift-card__redeem-info {
    padding: 2rem;
  }
.tl-gift-card__save {
    grid-auto-flow: column;
  }}
.tl-header {
  --tl-header-overlay-logo: 0;
  --tl-header-logo-filter: none;
  grid: var(--tl-header-grid);
  justify-content: center;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: var(--tl-header-pad);
  reading-flow: grid-columns;
  /* TLAM (Figma 340:5581): 96px hoog op desktop, 80px mobiel, 40px marge,
     onderrand van 1px in zwart 10%, geen afronding en geen schaduw. */
  height: 80px;
  padding-block-start: 0;
  padding-block-end: 0;
  /* Zelfde contentband als de secties eronder: op 1440 is dat 40px, daarboven groeit hij mee */
  padding-inline-start: max(var(--tlam-marge), calc((100% - var(--tlam-breedte-xl)) / 2));
  padding-inline-end: max(var(--tlam-marge), calc((100% - var(--tlam-breedte-xl)) / 2));
  border-block-end: 1px solid rgb(0 0 0 / 0.1);
  transition: background 200ms, color 200ms, transform .15s ease-in-out;
  display: grid;
  position: relative;
  border-radius: 0;
}
@media screen and (min-width: 1200px) {.tl-header {
    height: 96px;
  }}
.tl-header.tl-is-hidden {
  transform: translateY(-100%);
}
/* TLAM: Default header — transparent background when not scrolled,
   met een hele lichte bottom-hairline aan de top van de viewport. */
.tl-header:not(.tl-solid) {
  background: transparent;
  background-image: none;
  --tl-header-rule: 0 0 0 / 0;
  box-shadow: 0 1px 0 0 rgb(29 29 27 / 0.06);
}
/* TLAM (Figma-comment Pieter): op een productpagina begint de hero wit en loopt dat wit tot de
   schermranden. De menubalk staat daar bovenop en hoort dan mee wit te zijn; zodra je scrollt
   neemt hij de gewone achtergrondkleur aan. */
body.template--product .tl-header:not(.tl-solid) {
  background: rgb(255 255 255);
  background-image: none;
  box-shadow: none;
}

/* TLAM: bij scrollen wordt de header Porcelain met de onderrand van 10%, verder niets:
   geen afronding, geen schaduw — precies zoals de header op de andere frames staat. */
.tl-header.tl-solid {
  --tlam-achtergrond: 248 247 242;
  --tlam-tekstkleur: 29 29 27;
  --tl-header-rule: 29 29 27 / 0.1;
  border-radius: 0;
  box-shadow: none;
}
/* When a dropdown/mega menu opens, merge header with the panel (white, rounded top). */
.tl-header:has(.tlam-header__menu [open]), .tl-header:has(.tlam-header__tools [open]) {
  --tlam-achtergrond: 255 255 255;
  --tlam-achtergrond-verloop: ;
  --tlam-tekstkleur: 29 29 27;
  --tl-header-rule: 29 29 27 / 0.1;
  --tl-header-overlay-logo: 0;
  --tl-header-logo-filter: none;
  background: rgb(248 247 242);
  background-image: none;
  border-radius: 0;
}
.shopify-section--header:has(.tl-header.tl-is-hidden) {
  pointer-events: none;
}
:has(.shopify-section:first-child [header-doorzichtig]):not(:has(.shopify-section--header ~ .shopify-section-group-header-group)) .tl-header {
  margin-block-end: calc(-1 * var(--tlam-kop-hoogte, 0px));
}
:has(.shopify-section:first-child [header-doorzichtig]):not(:has(.shopify-section--header ~ .shopify-section-group-header-group)) .tl-header:not(.tl-solid) {
  --tl-header-overlay-logo: 1;
  --tl-header-logo-filter: brightness(0) invert(1);
  --tl-header-rule: 0 0 0 / 0;
  --tlam-achtergrond: 0 0 0 / 0;
  --tlam-achtergrond-verloop: 0 0 0 / 0;
  --tlam-rand: 0 0 0 / 0;
  --tlam-tekstkleur: var(--tl-header-overlay-text);
  border-bottom: 0;
  border-radius: 0;
}
.tlam-header__cart-count {
  width: .5rem;
  height: .5rem;
  box-shadow: 0 0 0 2px rgb(var(--tlam-achtergrond));
  background-color: currentColor;
  border-radius: 100%;
  transition: transform 200ms ease-in-out;
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: -.125rem;
  transform: scale(0);
}
.tlam-header__cart-count.tl-is-visible {
  transform: scale(1);
}
@media screen and (min-width: 43.75em) {.tl-header {
    column-gap: 2.5rem;
  }}
.tlam-header__logo {
  grid-area: logo;
  justify-self: start;
  position: relative;
}
.tlam-header__logo-image {
  width: var(--tl-logo-width);
  max-width: 100%;
  height: auto;
}
/* TLAM: inline SVG-wordmark, op hoogte geschaald (de brede+hoge lockup begrens je het
   beste via hoogte), kleurt mee via currentColor. */
/* TLAM: dwing de SVG-paden naar currentColor (het bron-SVG heeft een vaste navy fill),
   zodat het wordmark meekleurt met de header-staat. */
.tlam-header__logo-image:where(:not(:only-of-type)) {
  opacity: calc(1 - var(--tl-header-overlay-logo));
  transition: opacity 200ms;
}
/* TLAM: hide the account/login icon on mobile — it's already in the menu drawer */
.tlam-header__logo {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1;
}
.tlam-header__menu {
  flex-wrap: wrap;
  grid-area: primary-nav;
  align-items: center;
  gap: .625rem 1.25rem;
  display: flex;
}
.tlam-header__menu .tl-h6 {
  font-family: var(--tlam-tekst-font);
  font-weight: 400;
  font-size: var(--tlam-maat-s);
  letter-spacing: 0.02em;
}
/* TLAM: geen onderstreping bij hover maar een ruitje onder het item, in de kleur van de
   headertekst — hetzelfde vormpje als in de scheidingslijn (Figma 600:1183).
   Het item zelf is het positioneringsanker, anders hangt het ruitje onder de header. */
.tlam-header__menu-link,
.tlam-header__drawer-trigger {
  position: relative;
  display: inline-block;
}
.tlam-header__menu-link:before,
.tlam-header__drawer-trigger:before {
  content: "";
  width: 6px;
  height: 6px;
  background: rgb(var(--tlam-tekstkleur));
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  position: absolute;
  inset-block-end: -14px;
  inset-inline-start: 50%;
  transform: translateX(-50%) rotate(45deg);
}
.tlam-header__menu-link:hover:before,
.tlam-header__drawer-trigger:hover:before {
  opacity: 1;
}
.tlam-header__menu-link[aria-current]:before,
.tlam-header__drawer-trigger[aria-current]:before {
  opacity: 1;
}
@media screen and (max-width: 43.6875em) {.tlam-header__icon {
    width: 1.375rem;
  }}
/*
  TLAM — één slanke scrollbalk voor alles wat wél mag schuiven.

  Systemen met een vaste scrollbalk (Windows en Linux, en macOS als iemand 'Toon schuifbalken'
  op altijd zet) tekenen anders de brede systeembalk midden in een paneel. Op iOS, Android en
  macOS met de standaardinstelling zweeft de balk erboven en verdwijnt hij vanzelf, dus daar
  verandert er weinig. `scrollbar-width` doet het in Chrome 121+, Firefox en Safari 18.2+; de
  regels eronder vangen oudere WebKit- en Blink-versies af.

  Rijen die je zijwaarts sleept (de tijdlijn, de strook op de homepage, de kaartenrijen) tonen
  bewust helemaal geen balk; die staan in hun eigen sectie op `scrollbar-width: none`.
*/
:is(
  .tlam-nav-drawer__scroller,
  .tlam-regio__landenlijst,
  .tlam-search__panel,
  .tlam-pdp-about__dialog-body
) {
  scrollbar-width: thin;
  scrollbar-color: rgb(0 0 0 / 0.2) transparent;
}

:is(
  .tlam-nav-drawer__scroller,
  .tlam-regio__landenlijst,
  .tlam-search__panel,
  .tlam-pdp-about__dialog-body
)::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

:is(
  .tlam-nav-drawer__scroller,
  .tlam-regio__landenlijst,
  .tlam-search__panel,
  .tlam-pdp-about__dialog-body
)::-webkit-scrollbar-track {
  background: transparent;
}

:is(
  .tlam-nav-drawer__scroller,
  .tlam-regio__landenlijst,
  .tlam-search__panel,
  .tlam-pdp-about__dialog-body
)::-webkit-scrollbar-thumb {
  background-color: rgb(0 0 0 / 0.2);
}

/* De inhoud van de regiokiezer zit in een shadow root; daar kan alleen de standaardregel bij. */
.tlam-localization-modal::part(inhoud) {
  scrollbar-width: thin;
  scrollbar-color: rgb(0 0 0 / 0.2) transparent;
}

/*
  Het stipje op het winkelmandje is absoluut geplaatst, maar de link eromheen stond static;
  daardoor rekende het zich af tegen de header en belandde het los in de rechterbovenhoek van
  het scherm. Nu hangt het aan het mandje zelf, rechtsboven op het icoon.
*/
.tlam-header__cart .tlam-header__nav-link {
  position: relative;
}

.tlam-header__cart .tlam-header__cart-count {
  inset-block-start: -2px;
  inset-inline-end: -2px;
}

/*
  TLAM: elk icoon in de header staat in een vak van 20x20 (Figma 519:2424). De tekening zelf is
  kleiner dan dat vak en heeft er witruimte omheen; die ruimte staat hier als binnenmarge, zodat
  het vak 20 blijft en het figuurtje op zijn eigen maat uitkomt: het glas 16,5, het mandje 16
  hoog en het poppetje 14,08 hoog.
*/
.tlam-header__icon {
  box-sizing: border-box;
  width: 20px !important;
  height: 20px !important;
}

.tlam-header__search .tlam-header__icon { padding: 1.75px; }
.tlam-header__cart .tlam-header__icon { padding: 2px; }
.tlam-header__account .tlam-header__icon { padding: 2.96px; }

/* Mobiel staat rechts alleen zoeken en het winkelmandje; account zit in de drawer */
@media screen and (max-width: 1199px) {
  .tlam-header__account { display: none; }
}
/* TLAM: wordmark 123x64 op desktop (Figma 340:5569), navenant kleiner op mobiel. */
.shopify-section--header .tlam-header__logo-image, .shopify-section--main-password .tlam-header__logo-image {
  width: var(--tl-logo-width);
  height: auto;
  max-width: 100%;
}
@media screen and (min-width: 43.75em) {.tlam-header__menu {
    column-gap: 2rem; /* 32px between desktop nav items */
  }}
.tlam-header__tools {
  flex-wrap: wrap;
  grid-area: secondary-nav;
  justify-content: end;
  justify-self: end;
  align-items: center;
  gap: .625rem 1rem; /* 16px column gap between header icons on mobile */
  display: flex;
}
@media screen and (min-width: 43.75em) {.tlam-header__tools {
    column-gap: 1.5rem; /* 24px between right-side icons and login text */
  }}
.tlam-nav-drawer {
  --tl-header-list-pad: 2rem;
}
/* TLAM: all drawers on mobile = full viewport width */
@media screen and (max-width: 43.6875em) {.tl-drawer {
    --tl-drawer-width: 100vw;
  }}
.tlam-nav-drawer::part(sluitknop) {
  opacity: 1;
  border: 1px solid rgb(var(--tlam-tekstkleur) / 0.3);
  padding: 0;
  border-radius: 2px;
  width: 48px;
  height: 48px;
  color: #f8f7f2;
}
.tlam-nav-drawer::part(kop) {
  border-block-end: none;
  display: flex;
  justify-content: flex-end;
}
.tlam-nav-drawer::part(paneel) {
  box-sizing: border-box;
  overflow-x: hidden;
}
.tlam-nav-drawer::part(paneellijst) {
  position: relative;
}
.tlam-nav-drawer__scroller {
  padding-block-end: var(--tl-drawer-body-pad-block);
  padding-inline-start: var(--tl-drawer-body-pad-inline);
  padding-inline-end: var(--tl-drawer-body-pad-inline);
  overflow-y: auto;
}
.tlam-nav-drawer__sub-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  border-block-end: 1px solid rgb(var(--tlam-tekstkleur) / 0.12);
  margin-block-end: 1rem;
  padding-block-end: 1rem;
}
.tlam-nav-drawer__sub-title {
  font-weight: 600;
  text-decoration: none;
  color: rgb(var(--tlam-tekstkleur));
}
.tlam-nav-drawer__sub-title:hover { text-decoration: underline; }
.tlam-nav-drawer__main-panel {
  background-color: rgb(var(--tlam-achtergrond));
  background-image: var(--tlam-achtergrond-verloop);
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  grid-auto-columns: max-content;
  height: 100%;
  display: grid;
}
.tlam-nav-drawer__collapsible-panel {
  height: 100%;
  width: var(--tl-drawer-width);
  background-color: rgb(var(--tlam-achtergrond));
  background-image: var(--tlam-achtergrond-verloop);
  display: none;
  position: absolute;
  inset-block-start: 0;
}
/* Chevron for sidebar nav items */
/* Mega menu panel in mobile sidebar */
/* The mega-header lives in the light DOM but gets moved into the
   drawer shadow-DOM header via JS so it sits inline with the close button. */
/* Staggered reveal for mega menu cards */
@media screen and (min-width: 43.75em) {.tlam-nav-drawer {
    --tl-header-list-pad: 1.25rem;
  }}
@media screen and (min-width: 62.5em) {.tlam-nav-drawer::part(paneellijst) {
    position: static;
  }
.tlam-nav-drawer::part(paneel) {
    overflow-x: visible;
  }
.tlam-nav-drawer:has(.tlam-nav-drawer__collapsible-panel[data-submenu])::part(paneel) {
    border-inline-end: 1px solid rgb(var(--tlam-rand));
  }
.tlam-nav-drawer__main-panel {
    z-index: 1;
    position: relative;
  }
.tlam-nav-drawer__collapsible-panel .tlam-nav-drawer__scroller {
    width: 100%;
    inset-block: min(var(--tlam-kop-hoogte), 5rem) 0;
    position: absolute;
  }}
/* TLAM: hide explicit line breaks in overlay subheadings on mobile (let text reflow naturally) */
/* Marquee autoscroll for mobile */
/* TLAM: mobile PDP gallery progress bar — horizontal slice at bottom, 100vw */
[data-shopify-xr-hidden] {
  display: none;
}
/* TLAM: payment-methods utility modifiers */
/* TLAM: payment icons — auto-scrolling marquee layout */
/* Doorlopende band (betaalmethoden in de footer). De inhoud staat er twee keer in; de baan
   schuift precies de helft op en begint dan weer van voren, dus de overgang is niet te zien.
   Het schuiven doet CSS: de browser pauzeert het vanzelf in een tabblad op de achtergrond. */
.tl-marquee-run {
  display: flex;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-align: start;
  -webkit-user-select: none;
  user-select: none;
}

.tl-ticker__track {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: max-content;
  animation: tl-ticker var(--tl-ticker-duration, 20s) linear infinite;
}

.tl-marquee-run[direction="right"] .tl-ticker__track {
  animation-direction: reverse;
}

.tl-marquee-run[pauze-bij-hover]:hover .tl-ticker__track {
  animation-play-state: paused;
}

@keyframes tl-ticker {
  to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .tl-ticker__track { animation: none; }
}

.tlam-payment-scroll {
  position: relative;
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.tlam-payment-scroll__item {
  flex-shrink: 0;
  align-items: center;
  display: flex;
}
.tlam-payment-scroll__item > * {
  margin-inline-start: .5rem;
  margin-inline-end: .5rem;
}
/* Slideshow slide content with color scheme */
/* Slideshow controls (prev / counter / next) */
/* TLAM: PDP slideshow controls override (40×40 squared, white-bordered with 12px white carets, Moulin counter) */
.shopify-challenge__container, .shopify-email-marketing-confirmation__container {
  max-width: 56.25rem;
  margin-block-start: var(--tl-section-space);
  margin-block-end: var(--tl-section-space);
}
.shopify-policy__container {
  gap: var(--tl-stack-gap);
  max-width: 56.25rem;
  grid-auto-columns: minmax(0, 1fr);
  margin-block-start: var(--tl-section-space-tight);
  margin-block-end: var(--tl-section-space-tight);
  display: grid;
}
.shopify-challenge__container {
  gap: 1rem;
  display: grid;
}
.shopify-challenge__container > form {
  display: contents;
}
.shopify-email-marketing-confirmation__container {
  text-align: center;
}
.shopify-policy__title h1 {
  font: inherit;
}
.sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}
:is(.sr-only[type="checkbox"]:focus-visible + label, .sr-only[type="radio"]:focus-visible + label) {
  outline: 2px solid highlight;
  outline: 2px solid -webkit-focus-ring-color;
}
.tl-skip-to-content:focus-visible {
  z-index: 9999;
  clip: auto;
  color: #fff;
  background: #000;
  width: auto;
  height: auto;
  padding: 6px 12px;
  font-weight: bold;
  overflow: auto;
}
@keyframes ping {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(.8);
  }
}
@media (prefers-reduced-motion: no-preference) {[tlam-reveal="true"] {
    opacity: 0;
  }}
@media (scripting: none) {[tlam-reveal="true"] {
    opacity: 1;
  }}
.tl-text-success {
  color: rgb(var(--tlam-succes-tekst));
}
.tl-text-warning {
  color: rgb(var(--tlam-waarschuwing-tekst));
}
.tl-text-error {
  color: rgb(var(--tlam-fout-tekst));
}
.tl-text-muted {
  color: #6f6863;
}
.tl-text-outline {
  -webkit-text-stroke: 1px currentColor;
  -webkit-text-fill-color: transparent;
}
.tl-text-fade {
  background-image: var(--tlam-verloop);
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
}
.tl-text-outline.tl-text-fade {
  color: rgb(var(--tlam-achtergrond));
  -webkit-text-stroke-color: transparent;
  -webkit-text-fill-color: unset;
}
.tl-scroll-lock {
  overflow: hidden;
}
.tl-contents {
  display: contents;
}
.tl-text-start {
  text-align: start;
}
.tl-text-center {
  text-align: center;
}
.tl-text-end {
  text-align: end;
}
.tl-justify-center {
  justify-content: safe center;
}
.tl-w-full {
  width: 100%;
}
.tl-gap-1 {
  gap: .25rem;
}
.tl-gap-5 {
  gap: 1.25rem;
}
.tl-gap-6 {
  gap: 1.5rem;
}
.tl-gap-12 {
  gap: 3rem;
}
@media screen and (min-width: 43.75em) {.tl-sm-gap-8 {
    gap: 2rem;
  }
}
.tl-text-xxs {
  font-size: .6875rem;
}
.tl-text-xs {
  font-size: var(--tlam-maat-xs);
}
.tl-text-sm {
  font-size: var(--tlam-maat-s);
}
.tl-text-base {
  font-size: var(--tlam-maat-basis);
}
.tl-text-lg {
  font-size: var(--tlam-maat-l);
}
.tl-text-xl {
  font-size: var(--tlam-maat-xl);
}
.tl-heading, .tl-h2, .tl-h3, .tl-h6, .tl-rich :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--tlam-titel-font);
  font-weight: var(--tlam-titel-gewicht);
  font-style: var(--tlam-titel-stijl);
  letter-spacing: var(--tlam-titel-spatiering);
  text-transform: var(--tlam-titel-kast);
  overflow-wrap: anywhere;
}
:where(.tl-rich h1) {
  font-size: var(--tlam-maat-h1);
  line-height: var(--tlam-titel-regel, 1);
  text-transform: uppercase;
}
.tl-h2, :where(.tl-rich h2) {
  font-size: var(--tlam-maat-h2);
  line-height: var(--tlam-titel-regel, 1);
  text-transform: uppercase;
}
.tl-h3, :where(.tl-rich h3) {
  font-size: var(--tlam-maat-h3);
  line-height: var(--tlam-titel-regel, 1);
  text-transform: uppercase;
}
:where(.tl-rich h4) {
  font-size: var(--tlam-maat-h4);
  line-height: var(--tlam-titel-regel, 1);
  text-transform: uppercase;
}
:where(.tl-rich h5) {
  font-size: var(--tlam-maat-h5);
  line-height: var(--tlam-titel-regel, 1);
}
.tl-h6, :where(.tl-rich h6) {
  font-size: var(--tlam-maat-h6);
  line-height: var(--tlam-titel-regel, 1);
}
.tl-rich blockquote {
  line-height: 1.75;
}
@media screen and (min-width: 71.875em) {:where(.tl-rich h1) {
    line-height: 1.3;
  }
.tl-h2, :where(.tl-rich h2) {
    line-height: 1.4;
  }
.tl-h3, :where(.tl-rich h3) {
    line-height: 1.5;
  }}
ol {
  margin-inline-start: 2ch;
}
ul, ol {
  padding-inline-start: 1.75em;
}
:where(ol, ul):not(.tl-list-plain) li {
  padding-inline-start: .25rem;
  margin-block-start: 0 !important;
}
:where(.tl-text-center, .tl-text-end) :is(ol, ul) {
  margin-inline: 0;
  list-style-position: inside;
}
:where(.tl-text-center, .tl-text-end) :is(ol, ul) li {
  padding-inline-start: 0;
}
/* TLAM: Desktop — push the product form well below the header so it doesn't
   sit flush against it. Mirrors the Figma where the form starts ~144px from
   the top. */
/* TLAM: bottom border under the last collapsible trigger (Reviews / widget) */
[data-block-type="review-widget"]:not(:empty)) {
  border-block-end: 1px solid rgb(var(--tlam-rand));
}

/* TLAM: Specs + reviews drawers — aligned with the cart/filter sidebars:
   clean header (title left, close right, thin divider), white background, standard body. */
[id^="specs-drawer-"],
[id^="reviews-drawer-"] {
  --tl-drawer-width: 100vw;
}
@media screen and (min-width: 62.5em) {
  [id^="specs-drawer-"],
  [id^="reviews-drawer-"] {
    --tl-drawer-width: 440px;
  }}
[id^="specs-drawer-"]::part(paneel),
[id^="specs-drawer-"]::part(voet),
[id^="reviews-drawer-"]::part(paneel),
[id^="reviews-drawer-"]::part(voet) {
  background-color: #fff;
  background-image: none;
}

/* Split heading */

/* Trusted Shops trustbadge inlines z-index: 2147483647 via JS, which would
   stack above our drawers/modals (z-index: 999). Cap it so any of our
   overlays naturally render on top while the badge stays above page content. */
[id^="trustbadge-container-"] {
  z-index: 100 !important;
}

/* TLAM: geen enkele heading in hoofdletters */
h1, h2, h3, h4, h5, h6, .tl-h2, .tl-h3, .tl-h6 {
  text-transform: none !important;
}

/* TLAM: subheading in image-with-text iets groter + onder heading */

/* ----------------------------------------------------------------------------------------------------
   TLAM — knop (Figma "Primary Button", 972:9400)
   50px hoog, rechte hoeken, links een vierkant van 40x40 in Champagne met de caret erin,
   16px tussen dat vierkant en het label, 24px rechts. Het vierkant zit in het ontwerp in de
   component; hier zetten we het als ::before zodat elke bestaande knop in het thema hem krijgt.
   ---------------------------------------------------------------------------------------------------- */
.tl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  height: 50px;
  min-height: 50px;
  padding-block: var(--space-8);
  padding-inline: 5px var(--space-24);
  border-radius: 0;
  border: 0;
  backdrop-filter: blur(20px);
  font: var(--tlam-knop-font);
  /* Het knoplabel is Caption: Geist Mono 12 met 4% tracking (0,48px). Dit stond op 0 en
     overschreef daarmee de basisregel hierboven. */
  letter-spacing: var(--tlam-knop-spatiering);
}

/*
  Het ontwerp kent de Primary Button in twee kleuren. Op beeld en op donkere vlakken is hij wit,
  met een Champagne tegel en Oro Nero tekst (Figma 389:436 Epoque, 524:3557 split banner,
  949:2855 CTA). De tegelkleuren volgen normaal uit de helderheid van de knop; hier zetten we ze
  mee, zodat de variant ook werkt binnen een donker kleurschema.
*/
.tl-button--light {
  --tlam-knop-vlak: var(--color-white-rgb);
  --tlam-knop-tekst: var(--color-oro-nero-rgb);
  --tlam-knop-icoon-vlak: var(--color-champagne-rgb) / 1;
  --tlam-knop-icoon-vlak-hover: var(--color-bronze-rgb) / 1;
  --tlam-knop-pijl: var(--tlam-caret-right);
  --tlam-knop-pijl-hover: var(--tlam-caret-right-light);
}

.tl-button::before {
  content: "";
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background-color: rgb(var(--tlam-knop-icoon-vlak, var(--color-champagne-rgb) / 1));
  background-image: var(--tlam-knop-pijl, var(--tlam-caret-right));
  background-repeat: no-repeat;
  background-position: center;
  /*
    Figma (Primary Button): het chevron-vlak is 16x16, maar de pijl zelf meet daarin 9,07 x 5,52.
    Ons tekenvlak van 16 levert een pijl van 13,6 x 8,27 op — precies anderhalf keer te groot.
    Vandaar 10,67: 16 gedeeld door 1,5.
  */
  background-size: 10.67px 10.67px;
  transition: background-color 200ms;
}

/* Figma 389:368 — bij hover verandert de icoontegel, niet de knop zelf */
.tl-button:hover::before {
  background-color: rgb(var(--tlam-knop-icoon-vlak-hover, var(--color-bronze-rgb) / 1));
  background-image: var(--tlam-knop-pijl-hover, var(--tlam-caret-right-light));
}

/* Disabled: de hele knop op 40% dekking */
.tl-button[disabled],
.tl-button[aria-disabled="true"]{
  opacity: 0.4;
  pointer-events: none;
}

.tl-button[disabled]:hover::before,
.tl-button[aria-disabled="true"]:hover::before {
  background-color: rgb(var(--tlam-knop-icoon-vlak));
  background-image: var(--tlam-knop-pijl);
}

/*
  De kleine variant van de merkknop, voor het snel toevoegen vanaf een kaart. Zelfde opbouw —
  tegel met de pijl, label ernaast — op 32 hoog in plaats van 50, met een tegel van 24.
*/
.tl-button--mini {
  height: 32px;
  min-height: 32px;
  gap: var(--space-8);
  padding-block: 0;
  padding-inline: 4px var(--space-12);
  font-size: 0.6875rem;
}

.tl-button--mini::before {
  width: 24px;
  height: 24px;
  background-size: 8px 8px;
}

/* Knoppen zonder caret: de icoontegel hoort alleen bij de merkknop, niet bij formulier- of
   hoeveelheidsknoppen die dezelfde basisklasse delen. */
button.tl-button[name="minus"]::before, button.tl-button[name="plus"]::before {
  content: none;
}

/* ----------------------------------------------------------------------------------------------------
   TLAM — merkatomen uit het ontwerp
   ---------------------------------------------------------------------------------------------------- */

/* Eyebrow (Figma 972:9395): 6x6 blokje + Geist Mono 12 uppercase, 4% tracking, 8px ertussen */
.tlam-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.tlam-eyebrow__dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-oro-nero);
}

.tlam-eyebrow__label,
.tlam-content-link__label {
  font-family: var(--tlam-caption-font);
  font-size: var(--tlam-maat-caption);
  font-weight: var(--tlam-caption-gewicht);
  line-height: var(--tlam-tekst-regel);
  letter-spacing: var(--tlam-caption-spatiering);
  text-transform: uppercase;
  /* Figma 306:4449 (de component zelf): het label heeft dezelfde kleur als de gewone tekst,
     niet de zachtere --color-text. Via het kleurschema en niet hard op Oro Nero, anders valt
     het label op de donkere pagina's zwart op zwart weg. */
  color: rgb(var(--tlam-tekstkleur));
}

.tlam-eyebrow--light .tlam-eyebrow__dot { background-color: var(--color-white); }
.tlam-eyebrow--light .tlam-eyebrow__label { color: var(--color-white); }

/* Content link (Figma 306:4465): 24x24 blok met caret + label, 12px ertussen */
.tlam-content-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  text-decoration: none;
}

.tlam-content-link__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background-color: var(--color-oro-nero);
  color: var(--color-white);
}

/*
  Figma 444:502: de pijl meet 4,83 x 7,93 in een vlak van 14. Ons icoon tekent hem in een vlak
  van 16 op 13,6 lang, dus 9,33 breed geeft dezelfde 7,93.
*/
.tlam-content-link__icon > svg { width: 9.33px; height: 9.33px; }

.tlam-content-link--light .tlam-content-link__icon {
  background-color: var(--color-white);
  color: var(--color-oro-nero);
}

.tlam-content-link--light .tlam-content-link__label { color: var(--color-white); }

/* Divider (Figma 600:1189): 1px lijn, ruit van 6px onder 45 graden, 16px ruimte */
.tlam-divider {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  height: 12px;
}

.tlam-divider::before,
.tlam-divider::after {
  content: "";
  flex: 1 0 0;
  height: 1px;
  background-color: rgb(29 29 27 / 0.15);
}

.tlam-divider__dot {
  flex: 0 0 auto;
  width: 6.36px;   /* gedraaid 45 graden is dat een ruit van 9px breed, zoals in het ontwerp */
  height: 6.36px;
  background-color: var(--color-oro-nero);
  transform: rotate(45deg);
}

/* Mobiel — Figma 600:1190: de scheidingslijn is 343 x 8 in plaats van 1361 x 12 */
@media screen and (max-width: 62.4375em) {
  .tlam-divider { height: 8px; gap: var(--space-12); }
  .tlam-divider__dot { width: 4px; height: 4px; }
}

/* ----------------------------------------------------------------------------------------------------
   TLAM — sectie-afstand
   In het ontwerp zit tussen élke sectie op de homepage exact 120px (gemeten tussen de frames:
   600 -> 720, 732 -> 852, 1620 -> 1740, enzovoort). Op mobiel is dat 64px. De afstand zit tussen
   de secties, niet als padding erbinnen, zodat secties met een eigen achtergrond (tijdlijn,
   galerij) hun eigen binnenmaat houden.
   ---------------------------------------------------------------------------------------------------- */
#main > .shopify-section + .shopify-section {
  margin-block-start: 64px;
}

/* Our story, mobiel: daar staat de tijdlijn in het ontwerp strak tegen de blokken erboven en
   eronder (het blok eindigt op 1574, de tijdlijn begint op 1574) en komt de lucht uit de 64px
   binnen het donkere vlak zelf. Op de homepage staat rond diezelfde tijdlijn wél 64px, dus dit
   blijft bewust beperkt tot deze pagina. Desktop verandert niet. */
@media screen and (max-width: 62.4375em) {
  body.template--page-our-story #main > .shopify-section:has(> .tlam-timeline),
  body.template--page-our-story #main > .shopify-section:has(> .tlam-timeline) + .shopify-section {
    margin-block-start: 0;
  }
}

@media screen and (min-width: 62.5em) {
  #main > .shopify-section + .shopify-section {
    margin-block-start: 120px;
  }}

/* Op een collectiepagina staat de kaartenrij dichter onder de titel: 80px in plaats van 120. */
@media screen and (min-width: 62.5em) {
  #main > .shopify-section:has(> .tlam-page-intro) + .shopify-section:has(> .tlam-nav-cards) {
    margin-block-start: 80px;
  }}

/* De footer volgt dezelfde afstand */
.shopify-section-group-footer-group {
  margin-block-start: 64px;
}

/* Eindigt de pagina met een sectie die van rand tot rand loopt, dan sluit de footer er direct op
   aan; anders staat er een lichte band tussen twee vlakken die elkaar raken. Blokken die binnen
   de containermarges blijven (feature, split) houden hun gewone afstand: daar loopt het
   paginavlak links en rechts nog zichtbaar door. */
#main:has(> .shopify-section:last-child :is(.tlam-gallery, .tlam-timeline, .tlam-finishes, .tlam-hero--full)) + .shopify-section-group-footer-group {
  margin-block-start: 0;
}

@media screen and (min-width: 62.5em) {
  .shopify-section-group-footer-group {
    margin-block-start: 120px;
  }}
/* Ook op desktop: een vlak dat van rand tot rand loopt raakt de footer, anders staat er een
   lichte strook tussen twee vlakken die elkaar horen te raken. */
@media screen and (min-width: 62.5em) {
  #main:has(> .shopify-section:last-child :is(.tlam-gallery, .tlam-timeline, .tlam-finishes, .tlam-hero--full)) + .shopify-section-group-footer-group {
    margin-block-start: 0;
  }
}

/* ----------------------------------------------------------------------------------------------------
   TLAM — donkere templates
   Op een pagina die helemaal op Oro Nero staat (Our story) moet niet alleen de ruimte tussen de
   secties mee, maar ook de header: die staat standaard op Porcelain met donkere tekst en zou
   daar als een lichte balk boven een donkere pagina hangen. Hier zetten we hem om naar licht op
   donker, inclusief het wordmark — dat kleurt via dezelfde variabele als bij de transparante hero.

   How we work staat hier bewust NIET bij: alleen het afwerkingenblok is daar donker, de rest
   van de pagina is Porcelain.
   ---------------------------------------------------------------------------------------------------- */
body.template--page-our-story {
  background-color: var(--color-oro-nero);
}

body.template--page-our-story .tl-header {
  --tlam-achtergrond: var(--color-oro-nero-rgb);
  --tl-bg-solid: var(--color-oro-nero-rgb);
  --tlam-tekstkleur: var(--color-porcelain-rgb);
  --tl-header-rule: 255 255 255 / 0.1;
  --tl-header-overlay-logo: 1;
  --tl-header-logo-filter: brightness(0) invert(1);
}

/* Ook in de scroll-toestand blijft hij donker; anders klapt hij bij het scrollen naar wit. */
body.template--page-our-story .tl-header.tl-solid {
  --tlam-achtergrond: var(--color-oro-nero-rgb);
  --tlam-tekstkleur: var(--color-porcelain-rgb);
  --tl-header-rule: 255 255 255 / 0.1;
}

/* Video in de hero vult hetzelfde vlak als het beeld */
.tlam-hero__image video,
video.tlam-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
  Focus: het thema laat Chrome zijn eigen ring tekenen, en die is afgerond. In dit ontwerp
  bestaan geen ronde hoeken, dus tekenen we hem zelf — recht, in de kleur van de tekst.
*/
:is(a, button, summary, input, select, textarea, [type="button"], [type="submit"], [type="reset"]):focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
  border-radius: 0;
}

/*
  ------------------------------------------------------------------------------------------------
  TLAM — vloeiend openen en sluiten
  ------------------------------------------------------------------------------------------------
  Het thema animeert zijn eigen drawers, modals en accordeons al met 0,3s en
  cubic-bezier(.645,.045,.355,1). De losse <dialog>-elementen en de uitklapper in de header
  volgen diezelfde timing, in beide richtingen.
*/
:root {
  --tlam-ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --tlam-duration: 300ms;
}

dialog:where(.tlam-pdp-about__dialog) {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity var(--tlam-duration) var(--tlam-ease),
    translate var(--tlam-duration) var(--tlam-ease),
    overlay var(--tlam-duration) allow-discrete,
    display var(--tlam-duration) allow-discrete;
}

dialog:where(.tlam-pdp-about__dialog):not([open]) {
  opacity: 0;
  translate: 0 25px;
}

@starting-style {
  dialog:where(.tlam-pdp-about__dialog)[open] {
    opacity: 0;
    translate: 0 25px;
  }
}

dialog:where(.tlam-pdp-about__dialog)::backdrop {
  opacity: 1;
  transition:
    opacity var(--tlam-duration) var(--tlam-ease),
    overlay var(--tlam-duration) allow-discrete,
    display var(--tlam-duration) allow-discrete;
}

dialog:where(.tlam-pdp-about__dialog):not([open])::backdrop { opacity: 0; }

@starting-style {
  dialog:where(.tlam-pdp-about__dialog)[open]::backdrop { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  dialog:where(.tlam-pdp-about__dialog),
  dialog:where(.tlam-pdp-about__dialog)::backdrop { transition: none; }}

/*
  ------------------------------------------------------------------------------------------------
  TLAM — taal- en valutakiezer
  ------------------------------------------------------------------------------------------------
  Het ontwerp tekent alleen de trigger ("Eur ⌄"). Het paneel volgt de rest van de huisstijl:
  Porcelain, rechte hoeken, naam in Larken en de code in Geist Mono.
*/
.tlam-localization {
  position: relative;
  display: flex;
  align-items: center;
}

.tlam-localization__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--tlam-tekst-font);
  font-size: var(--tl-body-2);
  line-height: var(--tlam-tekst-regel);
  color: currentcolor;
  cursor: pointer;
}

.tlam-localization__caret { transition: rotate 200ms var(--tlam-ease); }

/*
  De kiezer opent in een dialoog: op desktop gecentreerd, onder 700px een blad dat van onderen
  opkomt (die beweging zit in de modal zelf). Zo werkt hij ook binnen de navigatiedrawer, waar
  een uitklapper onder de knop tegen de rand van het paneel zou lopen.
*/
/* Dicht is dicht: de dialoog zet bij openen zelf display:block, maar zonder deze regel staat
   hij vóór de eerste klik gewoon in de header-flow. */
.tlam-localization-modal {
  display: none;
}

.tlam-localization-modal[open] {
  display: block;
}

.tlam-localization-modal::part(paneel) {
  /* De scrim is fixed en dus geplaatst; zonder eigen plaatsing zou het paneel eronder schilderen
     en grijs wegvallen. */
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 442px;
  max-height: min(640px, 86vh);
  padding: var(--space-40);
  background-color: var(--color-porcelain);
  color: var(--color-oro-nero);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.tlam-localization-modal::part(kader) {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1000;
}

.tlam-localization-modal::part(scrim) {
  position: fixed;
  inset: 0;
  background-color: rgb(29 29 27 / 0.4);
}

.tlam-localization-modal::part(kop) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding-block-end: var(--space-24);
}

.tlam-localization-modal::part(inhoud) {
  padding-block-start: var(--space-24);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tlam-localization-modal::part(sluitknop) {
  flex: none;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(0 0 0 / 0.1);
  border-radius: 0;
  background: none;
  color: var(--color-oro-nero);
  cursor: pointer;
  transition: background-color 200ms;
}

.tlam-localization-modal::part(sluitknop):hover { background-color: var(--color-champagne); }

.tlam-localization-modal__title {
  margin: 0;
  font-family: var(--tlam-titel-font);
  font-size: var(--title-xs);
  font-weight: var(--tlam-titel-gewicht);
  line-height: 1;
  letter-spacing: var(--tlam-titel-spatiering);
}

.tlam-localization__form { margin: 0; }

.tlam-localization__list {
  display: flex;
  flex-direction: column;
}

.tlam-localization__option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  padding: 0.75rem 0;
  border: 0;
  background: none;
  text-align: start;
  color: var(--color-oro-nero);
  cursor: pointer;
  transition: opacity 200ms var(--tlam-ease);
}

.tlam-localization__option:hover { opacity: 0.6; }

/*
  Regiokiezer. De klant koos een stroom met regio's in plaats van één lange landenlijst; het
  wireframe daarvan is generiek, dus de vormgeving volgt hier gewoon het thema: Porcelain,
  rechte hoeken, naam in Larken en valuta in Geist Mono.
*/
/*
  Het paneel is zo hoog als de stap waar je in zit: de regiolijst is kort, de landkeuze lang.
  De hoogte komt als losse waarde binnen (het script meet die per stap), zodat de overgang
  ertussen te animeren valt — van en naar `auto` kan een browser niet vloeiend doen.
*/
.tlam-localization-modal::part(paneel) {
  height: min(var(--tlam-regio-hoogte, 34rem), calc(100dvh - 3rem));
  transition: height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .tlam-localization-modal::part(paneel) { transition: none; }
}

/*
  Het formulier vult de hoogte van het paneel, zodat de landenlijst de ruimte krijgt die er is
  in plaats van dat er onder de knop een leeg stuk overblijft.
*/
.tlam-localization-modal::part(inhoud) {
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tlam-localization-modal .tlam-regio { flex: 1 1 auto; min-height: 0; }

.tlam-regio {
  display: flex;
  flex-direction: column;
}

.tlam-regio__lijst {
  display: flex;
  flex-direction: column;
}

.tlam-regio__optie {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: 14px 16px;
  border: 1px solid rgb(0 0 0 / 0.1);
  cursor: pointer;
}

.tlam-regio__optie + .tlam-regio__optie,
.tlam-regio__lijst li + li .tlam-regio__optie { border-block-start: 0; }

.tlam-regio__optie:hover { background-color: rgb(0 0 0 / 0.02); }

.tlam-regio__optie input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Het rondje tekenen we zelf: het eigen keuzerondje van de browser past niet bij het thema. */
.tlam-regio__keuzerondje {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid rgb(0 0 0 / 0.35);
  border-radius: 50%;
}

.tlam-regio__keuzerondje::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-oro-nero);
  transform: scale(0);
  transition: transform 0.12s ease;
}

.tlam-regio__optie input:checked ~ .tlam-regio__keuzerondje { border-color: var(--color-oro-nero); }
.tlam-regio__optie input:checked ~ .tlam-regio__keuzerondje::after { transform: scale(1); }
.tlam-regio__optie input:focus-visible ~ .tlam-regio__keuzerondje { outline: 2px solid var(--color-oro-nero); outline-offset: 2px; }

.tlam-regio__naam {
  flex: 1 1 auto;
  font-family: var(--tlam-tekst-font);
  font-size: var(--tl-body-2);
  line-height: var(--tlam-tekst-regel);
  color: var(--color-oro-nero);
}

.tlam-regio__valuta {
  flex: none;
  font-family: var(--tlam-caption-font);
  font-weight: var(--tlam-caption-gewicht);
  font-size: var(--tlam-maat-caption);
  letter-spacing: var(--tlam-caption-spatiering);
  color: var(--color-silverplated);
}

/*
  De verzendregel zakt naar de onderkant van het paneel. Zo vult de regiostap dezelfde hoogte als
  de landstap en blijft er onderin geen leeg vlak over.
*/
.tlam-regio__verzending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  /* Sluit aan op de regiolijst; het paneel is niet langer hoger dan zijn inhoud */
  margin-block-start: var(--space-24);
  padding-block-start: var(--space-24);
  border-block-start: 1px solid rgb(0 0 0 / 0.1);
  font-family: var(--tlam-tekst-font);
  font-size: var(--tl-body-2);
  color: var(--color-text);
}

.tlam-regio__wissel {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-oro-nero);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.tlam-regio__wissel[aria-expanded='true'] .tlam-regio__wissel-caret { transform: rotate(180deg); }

.tlam-regio__landen {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-block-start: 0;
}

/*
  Terug, titel en sluiten staan op één rij, zoals de kop van het tweede paneel in de
  navigatiedrawer. De terugknop krijgt hetzelfde raakvlak van 44 als de sluitknop, zodat de
  titel er precies tussen uitkomt.
*/
.tlam-localization-modal__head {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

/*
  De titel staat altijd precies midden in de kopregel, los van of de terugknop er is en hoe breed
  de sluitknop uitvalt. Daarom hangt hij aan de kop zelf in plaats van tussen de knoppen in de
  rij; dan verspringt hij niet als je van stap wisselt.
*/
.tlam-localization-modal__head .tlam-localization-modal__title {
  position: absolute;
  inset-inline: 0;
  margin: 0;
  text-align: center;
  pointer-events: none;
}

/* Zelfde maat en rand als de sluitknop ernaast. */
.tlam-regio__terug {
  flex: none;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(0 0 0 / 0.1);
  border-radius: 0;
  background: none;
  color: var(--color-oro-nero);
  cursor: pointer;
}

.tlam-regio__terug:hover { background-color: rgb(0 0 0 / 0.04); }

.tlam-regio__landen-regio {
  margin: 0 0 var(--space-16);
  font-family: var(--tlam-tekst-font);
  font-size: var(--tl-body-3);
  color: var(--color-text);
}

/*
  De landenlijst is een eigen vlak met een rand eromheen en schuift van binnen. Zonder die rand
  loopt hij aan de boven- en onderkant zomaar het paneel uit en lijkt het alsof er tekst wegvalt.
*/
.tlam-regio__landenlijst {
  display: flex;
  flex-direction: column;
  /*
    Zo hoog als de landen zelf: bij twee landen hoort er geen leeg kader onder te blijven staan.
    Krimpen mag wel, dus bij een lange lijst schuift hij binnen de hoogte die het paneel heeft.
  */
  flex: 0 1 auto;
  min-height: 5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgb(0 0 0 / 0.1);
}

.tlam-regio__landenlijst .tlam-regio__optie { border: 0; }

.tlam-regio__landenlijst li + li .tlam-regio__optie {
  border-block-start: 1px solid rgb(0 0 0 / 0.1);
}

/*
  De landstap past in zijn geheel binnen het paneel, dus de knop staat gewoon onder de lijst.
  Plakken hoeft niet en zou zich over de laatste regel heen leggen.
*/
.tlam-regio__opslaan {
  width: 100%;
  margin-block-start: var(--space-16);
}

/* Op volle breedte met gecentreerd label staat het icoonvlak van de knop scheef. */
.tlam-regio__opslaan::before { content: none; }

.tlam-localization__option.tlam-is-current .tlam-localization__name { text-decoration: underline; text-underline-offset: 4px; }

.tlam-localization__name {
  font-family: var(--tlam-tekst-font);
  font-size: var(--tl-body-2);
  line-height: var(--tlam-tekst-regel);
}

.tlam-localization__note {
  font-family: var(--tlam-caption-font);
  font-weight: var(--tlam-caption-gewicht);
  font-size: var(--tl-body-4);
  letter-spacing: var(--tlam-caption-spatiering);
  text-transform: uppercase;
  color: var(--color-silverplated);
}

/* In de mobiele drawer staat de knop gewoon in de lijst en niet rechts uitgelijnd */
.tlam-nav-drawer .tlam-localization { display: block; }

/* Onder 700px komt het blad van onderen op en vult het de volle breedte */
@media screen and (max-width: 43.6875em) {
  .tlam-localization-modal::part(kader) { align-items: end; }

  .tlam-localization-modal::part(paneel) {
    max-width: none;
    max-height: 70vh;
    padding: var(--space-24) var(--space-16) var(--space-32);
  }
}

/*
  De collaboration-verhaalpagina staat in het ontwerp op Oro Nero (Figma 689:1342 en 949:5359,
  beide met een achtergrond van #1d1d1b), dus de header krijgt daar dezelfde lichte inhoud als
  op Our story. Het verhaal staat inmiddels weer op een collectie, dus beide klassen staan hier:
  page.story-collaboration én collection.story-collaboration.
*/
body:is(.template--page-story-collaboration, .template--collection-story-collaboration) {
  background-color: var(--color-oro-nero);
  color: var(--color-porcelain);
}

body:is(.template--page-story-collaboration, .template--collection-story-collaboration) .tl-header,
body:is(.template--page-story-collaboration, .template--collection-story-collaboration) .tl-header.tl-solid {
  --tlam-achtergrond: var(--color-oro-nero-rgb);
  --tlam-tekstkleur: var(--color-porcelain-rgb);
  --tl-header-rule: 255 255 255 / 0.1;
  --tl-header-overlay-logo: 1;
  --tl-header-logo-filter: brightness(0) invert(1);
}

body:is(.template--page-story-collaboration, .template--collection-story-collaboration) :is(.tlam-ehero, .tlam-collage, .tlam-audience) {
  color: var(--color-porcelain);
}

/* Figma 3005:14235/14236 en 3005:14243: deze twee blokken staan in Champagne, niet in Porcelain */
body:is(.template--page-story-collaboration, .template--collection-story-collaboration) :is(.tlam-quote-split, .tlam-abc) {
  color: var(--color-champagne);
}

body:is(.template--page-story-collaboration, .template--collection-story-collaboration) .tlam-collage__body { color: rgb(var(--color-porcelain-rgb) / 0.75); }

/* Figma 972:6013: de omschrijving onder een uitgelichte collectie staat in Silverplated */
body:is(.template--page-story-collaboration, .template--collection-story-collaboration) .tlam-audience__body { color: var(--color-silverplated); }

body:is(.template--page-story-collaboration, .template--collection-story-collaboration, .template--page-our-story) .tlam-divider__dot { background-color: var(--color-porcelain); }

/*
  Vangnet: het ontwerp is een vast canvas van 1440 en een aantal blokken heeft vaste maten
  (672 beeld, 328 tekstkolom, 200 stappen). Die krimpen nu mee, maar tussen 1000 en 1440 kan
  een enkel blok nog net over de rand komen. De pagina zelf mag daar nooit door verschuiven.
*/
body {
  /*
    `clip` in plaats van `hidden`: hidden maakt van de body een schuifvlak en dan werkt
    position: sticky erbinnen niet meer (de samenvatting in de winkelwagen bijvoorbeeld).
    Clip snijdt wel af, maar laat het schuiven bij de pagina zelf.
  */
  overflow-x: clip;
}

/*
  De sleep-aanwijzer op sliders (Figma-comment bij de tijdlijn): een bronzen rondje van 48
  met een witte hand. Alleen op apparaten met een echte muisaanwijzer.
*/
/* Alleen een rij die daadwerkelijk kan schuiven verbergt de systeemaanwijzer; past alles in
   beeld, dan gelden gewoon de standaardregels (pijl, of pointer op iets klikbaars). De klasse
   wordt door tl-tlam.js gezet en bij elke maatwijziging opnieuw bepaald. */
[data-drag].tlam-can-drag { cursor: none; }

/* Binnen een sleepbare rij blijven knoppen, links en velden gewoon aanklikbaar: daar hoort de
   normale aanwijzer, niet het sleeprondje. */
[data-drag] :is(button, input, select, textarea, summary, label, [role="button"], a.tl-button) {
  cursor: pointer;
}

/* Een kaart die als geheel een link is hoort bij de rij, niet bij de knoppen: daar blijft het
   sleeprondje staan. */
[data-drag].tlam-can-drag a:not(.tl-button) { cursor: none; }

.tlam-drag-cursor {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-bronze);
  color: var(--color-white);
  pointer-events: none;
  opacity: 0;
  scale: 0.8;
  transition: opacity 200ms var(--tlam-ease, ease), scale 200ms var(--tlam-ease, ease);
}

.tlam-drag-cursor.tlam-is-visible {
  opacity: 1;
  scale: 1;
}

.tlam-drag-cursor.tlam-is-grabbing { scale: 0.9; }

/* Een sleepbare rij: beeld en link mogen zelf geen sleepactie starten, anders trek je
   de afbeelding los in plaats van de rij. Tekst blijft selecteerbaar; alleen tijdens
   het slepen niet. */
[data-drag] img,
[data-drag] a {
  -webkit-user-drag: none;
}

[data-drag].tlam-is-dragging {
  user-select: none;
  -webkit-user-select: none;
  /* Tijdens het slepen geen snap: anders springt de rij bij elke muisbeweging naar het
     dichtstbijzijnde punt in plaats van de aanwijzer te volgen. Bij loslaten komt de snap
     terug en zakt de rij netjes op een kaart. */
  scroll-snap-type: none;
  scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
  .tlam-drag-cursor { transition: none; }}

/* Op de donkere collaborations-pagina moeten ook de lijnen en de losse teksten licht zijn */
body:is(.template--page-story-collaboration, .template--collection-story-collaboration, .template--page-our-story) .tlam-divider::before,
body:is(.template--page-story-collaboration, .template--collection-story-collaboration, .template--page-our-story) .tlam-divider::after {
  background-color: rgb(248 247 242 / 0.25);
}

body:is(.template--page-story-collaboration, .template--collection-story-collaboration) :is(.tlam-image-copy, .tlam-feature, .tlam-showcase, .tlam-duo) {
  color: var(--color-porcelain);
}

/* Figma 3005:14277: het bovenlabel blijft ook hier Silverplated; alleen de kop is Champagne. */
body:is(.template--page-story-collaboration, .template--collection-story-collaboration) .tlam-duo__title {
  color: var(--color-champagne);
}

/* --------------------------------------------------------------------------------------------
   Laadstatus op knoppen. Het label blijft staan (alleen doorzichtig), zodat de knop nooit van
   formaat verandert; erboven draait het merkvierkantje in kwartslagen met een korte pauze.
   -------------------------------------------------------------------------------------------- */
.tlam-is-busy {
  position: relative;
  pointer-events: none;
}

.tlam-is-busy > *,
.tlam-is-busy::first-line { color: transparent; }

.tlam-is-busy {
  color: transparent !important;
}

.tlam-is-busy::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: var(--tlam-busy-size, 10px);
  height: var(--tlam-busy-size, 10px);
  margin: calc(var(--tlam-busy-size, 10px) / -2) 0 0 calc(var(--tlam-busy-size, 10px) / -2);
  background-color: var(--tlam-busy-color, rgb(var(--tlam-knop-tekst, 248 247 242)));
  animation: tlam-square-quarters 1600ms cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes tlam-square-quarters {
  0%, 12%   { rotate: 0deg; }
  25%, 37%  { rotate: 90deg; }
  50%, 62%  { rotate: 180deg; }
  75%, 87%  { rotate: 270deg; }
  100%      { rotate: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .tlam-is-busy::after { animation-duration: 0s; opacity: 0.6; }
}

/* Het aantal in de winkelwagen: daar staat het vierkantje op de plek van het cijfer, in de
   donkere tekstkleur en een maatje kleiner dan op een knop. */
.tlam-cart__count.tlam-is-busy {
  --tlam-busy-color: var(--color-oro-nero);
  --tlam-busy-size: 8px;
}

/* --------------------------------------------------------------------------------------------
   Witregel tussen alinea's. In het ontwerp staat er tussen twee alinea's van een tekstblok een
   lege regel; zonder deze regel plakken ze aan elkaar, want de reset zet alle marges op nul.
   Eén regelhoogte, dus de afstand schaalt mee met de tekstgrootte van het blok.

   Bewust op de sectie in plaats van per tekstveld: alinea's naast elkaar komen in dit thema
   alleen voor binnen een rich-text veld, en die hoort overal dezelfde witregel te krijgen.
   De eis "zonder class" houdt het bij rich text: alinea's die wij zelf in een sectie schrijven
   dragen altijd een eigen klasse en staan al in een flexkolom met een eigen tussenruimte.
   -------------------------------------------------------------------------------------------- */
.shopify-section :is(p, ul, ol):not([class]) + :is(p, ul, ol):not([class]) {
  margin-block-start: calc(var(--tlam-tekst-regel, 1.4) * 1em);
}

/* --------------------------------------------------------------------------------------------
   Leeg beeldvak. Een product zonder afbeelding krijgt geen gat en geen "no image"-plaatje, maar
   een Porcelain vlak met het merkvierkantje erin — hetzelfde vierkantje als de laadstatus, maar
   stil en gedempt. Zie snippets/tlam-beeld-leeg.liquid.
   -------------------------------------------------------------------------------------------- */
.tlam-beeld-leeg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  /* Wit, net als de opvulling die een echt productbeeld krijgt (pad_color ffffff). Zo leest het
     vak als "hier hoort een productbeeld" en heeft het een zichtbare rand op de Porcelain
     paginaachtergrond. */
  background-color: var(--tlam-leeg-vlak, var(--color-white));
}

.tlam-beeld-leeg::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: var(--tlam-leeg-merk, 10px);
  height: var(--tlam-leeg-merk, 10px);
  margin: calc(var(--tlam-leeg-merk, 10px) / -2) 0 0 calc(var(--tlam-leeg-merk, 10px) / -2);
  background-color: rgb(var(--color-oro-nero-rgb) / 0.18);
}

/* Bewust géén afwijkende tint op een witte kaart: die zou de kaart juist in tweeën knippen —
   een Porcelain bovenkant die wegvalt tegen de pagina en een wit tekstblok eronder. Wit laat het
   vak samenvallen met de kaart, zodat die er net zo uitziet als de buren, alleen zonder foto. */

/* In een groot vak is een vierkantje van 10px een stofje; daar mag het merkteken meegroeien. */
.tlam-pdp-hero__media .tlam-beeld-leeg,
.tlam-hero .tlam-beeld-leeg,
.tlam-ehero__media .tlam-beeld-leeg {
  --tlam-leeg-merk: 24px;
}

/* --------------------------------------------------------------------------------------------
   Ankerlinks (bijvoorbeeld "read our story" in de hero) scrollen soepel en stoppen onder de
   vaste header in plaats van eronder te verdwijnen.
   -------------------------------------------------------------------------------------------- */
html {
  scroll-padding-block-start: calc(var(--tl-sticky-offset, 0px) + var(--space-24));
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ----------------------------------------------------------------------------------------------------
   TLAM — artikelkaart
   Beeld 4:5, datum als monolabel, titel in Larken 24. Dezelfde maatvoering als de kaarten in het
   collectieraster, zodat blog en shop hetzelfde ritme houden.
   ---------------------------------------------------------------------------------------------------- */
.tlam-article-card__link {
  display: grid;
  gap: var(--space-24);
  color: var(--color-oro-nero);
  text-decoration: none;
}

.tlam-article-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--color-champagne);
}

.tlam-article-card__image,
.tlam-article-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 600ms var(--tlam-ease);
}

@media (hover: hover) {
  .tlam-article-card__link:hover .tlam-article-card__image { scale: 1.03; }
}

.tlam-article-card__body {
  display: grid;
  gap: var(--space-12);
}

.tlam-article-card__meta {
  display: flex;
  gap: var(--space-8);
  font-family: var(--tlam-caption-font);
  font-weight: var(--tlam-caption-gewicht);
  font-size: var(--tlam-maat-caption);
  line-height: 1;
  letter-spacing: var(--tlam-caption-spatiering);
  text-transform: uppercase;
  color: var(--color-silverplated);
}

.tlam-article-card__title {
  font-family: var(--tlam-titel-font);
  font-size: var(--title-xs);
  font-weight: var(--tlam-titel-gewicht);
  line-height: 1;
  letter-spacing: var(--tlam-titel-spatiering);
}

.tlam-article-card__text {
  font-family: var(--tlam-tekst-font);
  font-size: var(--tl-body-2);
  line-height: var(--tlam-tekst-regel);
  color: var(--color-text);
}

/* ----------------------------------------------------------------------------------------------------
   TLAM — header, navigatiedrawer en zoekpaneel
   Stond eerder als <style> in header.liquid en tlam-search.liquid en ging dus bij elke pagina
   opnieuw over de lijn. Deze regels hangen van geen enkele themainstelling af, dus horen ze in
   het gecachete bestand. Wat wel per winkel verschilt — de custom properties op de sectie —
   staat nog altijd inline in header.liquid.
   Dit blok staat bewust onderaan: het inline-blok kwam voorheen ook ná theme.css, dus zo pakt
   de cascade hetzelfde uit.
   ---------------------------------------------------------------------------------------------------- */
/*
    TLAM — navigatiedrawer. Maten uit Figma: niveau 1 = 3005:18818 (300x800), niveau 2 =
    3005:18774 (412x800), mobiel = 3005:18848. Beide panelen staan op Porcelain; de naad
    ertussen is de rechterrand van niveau 1.

*/
  .tlam-nav-drawer--tlam {
    --tl-drawer-panel-1: 300px;
    --tl-drawer-panel-2: 412px;
    --tl-drawer-width: 100vw;
  }

  /*
    Figma 3005:18660 (Navigation - Inspiration): geen kolom van 300 ernaast, alleen het paneel
    van 412 met de titel gecentreerd erboven en daaronder het ornament.

*/
  .tlam-nav-drawer--kaarten {
    --tl-drawer-panel-1: var(--tl-drawer-panel-2);
  }

  .tlam-nav-drawer--kaarten .tlam-nav-drawer__scroller {
    padding: 42px 32px 32px;
  }

  .tlam-nav-drawer__kaarten-titel {
    margin: 0;
    font-family: var(--tlam-titel-font);
    font-size: var(--title-s);
    font-weight: var(--tlam-titel-gewicht);
    line-height: 1;
    letter-spacing: var(--tlam-titel-spatiering);
    color: var(--color-oro-nero);
    text-align: center;
  }

  /*
    Figma 3005:18681: een haarlijn over de volle paneelbreedte met in het midden een ruitje van
    6 (een vierkant op zijn punt). De titel staat op 42 en de eerste kaart op 157, dus de lijn
    ligt op 113 met 41 erboven en 44 eronder. De lijn loopt door tot de rand, dus hij steekt de
    binnenmarge van 32 uit.

*/
  .tlam-nav-drawer__ornament {
    position: relative;
    display: block;
    height: 1px;
    margin: 39px -32px 43px;
    background-color: rgb(29 29 27 / 0.12);
  }

  .tlam-nav-drawer__ornament::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 4.5px;
    height: 4.5px;
    background-color: var(--color-oro-nero);
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 0 5px var(--color-porcelain);
  }

  .tlam-nav-drawer--tlam::part(paneel) {
    background-color: var(--color-porcelain);
  }

  /*
    Figma 3005:18830: de sluitknop staat in een vak van 44x44 met een lijn van 1px in zwart op
    10%. Hetzelfde vak als de terugknop in het subpaneel.

*/
  .tlam-nav-drawer--tlam::part(sluitknop) {
    color: var(--color-oro-nero);
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    border: 1px solid rgb(0 0 0 / 0.1);
    border-radius: 0;
  }

  /*
    Figma 3005:18830: op mobiel staat de sluitknop linksboven op 16/16 in een raakvlak van 44px.

*/
  .tlam-nav-drawer--tlam::part(kop) {
    padding: 16px;
    justify-content: flex-start;
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__scroller {
    padding: 0 24px 24px;
    overflow-y: auto;
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__eyebrow {
    margin-block-end: 40px;
    font-family: var(--tlam-caption-font);
    font-size: var(--tlam-maat-caption);
    font-weight: var(--tlam-caption-gewicht);
    line-height: var(--tlam-tekst-regel);
    letter-spacing: var(--tlam-caption-spatiering);
    text-transform: uppercase;
    color: var(--color-text);
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__linklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-24); /* Figma mobiel: regelafstand 48 bij tekst van 24 */
  }

  @media screen and (min-width: 62.5em) {
    .tlam-nav-drawer--tlam .tlam-nav-drawer__linklist { gap: var(--space-16); }
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__link {
    display: block;
    width: 100%;
    padding: 0;
    text-align: start;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--tlam-titel-font);
    font-size: var(--title-xs);
    font-weight: var(--tlam-titel-gewicht);
    line-height: var(--tlam-titel-regel);
    letter-spacing: var(--tlam-titel-spatiering);
    color: var(--color-oro-nero);
  }

  /*
    Figma 3005:18824: naast het actieve item staat op de rand van paneel 1 een streepje van
    24 hoog en 2 dik. Datzelfde streepje verschijnt bij hover en bij toetsenbordfocus, zodat je
    van tevoren ziet welk item je opent.
  */
  @media screen and (min-width: 62.5em) {
    .tlam-nav-drawer--tlam .tlam-nav-drawer__linklist li { position: relative; }

    .tlam-nav-drawer--tlam .tlam-nav-drawer__link[aria-expanded="true"]::after,
    .tlam-nav-drawer--tlam .tlam-nav-drawer__link:hover::after,
    .tlam-nav-drawer--tlam .tlam-nav-drawer__link:focus-visible::after {
      content: "";
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: calc(var(--tl-drawer-panel-1) - 24px - 2px);
      width: 2px;
      height: 24px;
      background-color: var(--color-oro-nero);
    }
  }

  /* Tweede lijst en valuta staan alleen in de mobiele hoofddrawer */
  .tlam-nav-drawer--tlam .tlam-nav-drawer__secondary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-block-start: 40px;
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__secondary-link,
  .tlam-nav-drawer--tlam .tlam-nav-drawer__localization {
    font-family: var(--tlam-tekst-font);
    font-size: var(--tl-body-2);
    font-weight: var(--tlam-tekst-gewicht);
    line-height: var(--tlam-tekst-regel);
    color: var(--color-oro-nero);
  }

  /*
    Figma 3005:18830: in de drawer staat de valutakiezer in een vak van 79x41 met dezelfde lijn
    als de sluitknop, 12px onder de laatste secundaire link. De code staat in Geist Mono 12,
    met 16px ruimte links en rechts en 12px tot de chevron.

*/
  .tlam-nav-drawer--tlam .tlam-nav-drawer__localization {
    margin-block-start: 12px;
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__localization .tlam-localization__toggle {
    box-sizing: border-box;
    gap: 12px;
    height: 41px;
    padding-inline: 16px;
    border: 1px solid rgb(0 0 0 / 0.1);
    font-family: var(--tlam-caption-font);
    font-weight: var(--tlam-caption-gewicht);
    font-size: var(--tlam-maat-caption);
    line-height: 1;
    letter-spacing: var(--tlam-caption-spatiering);
    text-transform: uppercase;
  }

  /* Promotegel onderin niveau 1: 252x150, 24px vanaf de rand */
  .tlam-nav-drawer--tlam .tlam-nav-drawer__main-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__promo-tile {
    position: relative;
    display: block;
    margin: auto 24px 24px;
    height: 150px;
    overflow: hidden;
    color: var(--color-white);
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__promo-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(29 29 27 / 0.55), rgb(29 29 27 / 0) 60%);
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__promo-title,
  .tlam-nav-drawer--tlam .tlam-nav-drawer__promo-arrow { z-index: 1; }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__promo-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__promo-title {
    position: absolute;
    inset-block-end: 16px;
    inset-inline-start: 16px;
    max-width: 99px;
    font-family: var(--tlam-titel-font);
    font-size: var(--title-xs);
    font-weight: var(--tlam-titel-gewicht);
    line-height: var(--tlam-titel-regel);
    letter-spacing: var(--tlam-titel-spatiering);
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__promo-arrow {
    position: absolute;
    inset-block-end: 16px;
    inset-inline-end: 16px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    background-color: var(--color-oro-nero);
    color: var(--color-white);
  }

  /* Niveau 2: rij van 80x96 beeld + titel/omschrijving, 32px tussen de rijen */
  .tlam-nav-drawer--tlam .tlam-nav-drawer__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__card {
    display: flex;
    align-items: center;
    gap: var(--space-24);
    color: var(--color-oro-nero);
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__card-figure {
    flex: 0 0 80px;
    width: 80px;
    height: 96px;
    overflow: hidden;
    background-color: rgb(var(--color-champagne-rgb) / 0.5);
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__card-title {
    font-family: var(--tlam-tekst-font);
    font-size: var(--tl-body-2);
    font-weight: 400;
    line-height: var(--tlam-tekst-regel);
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__card-text {
    font-family: var(--tlam-tekst-font);
    font-size: var(--tl-body-3);
    font-weight: 300;
    line-height: var(--tlam-tekst-regel);
  }

  /*
    Mobiel, naar Figma 519:2531 (375-frame, zonder de statusbalk van 38px erin):
    het kruisje van het eerste paneel staat linksboven op 16,16 in een raakvlak van 44x44,
    de lijst begint op y=100, en boven het tweede paneel staat terug — titel — kruisje.

*/
  @media screen and (max-width: 62.4375em) {
    /* Eerste paneel: kruisje linksboven op 16,16, de lijst begint op 100 */
    .tlam-nav-drawer--tlam::part(kop) {
      display: block;
      box-sizing: border-box;
      height: 60px;
      padding: 16px 16px 0;
    }

    .tlam-nav-drawer--tlam::part(sluitknop) {
      box-sizing: border-box;
      width: 44px;
      height: 44px;
      margin: 0;
      padding: 0;
      border: 1px solid rgb(0 0 0 / 0.1);
      border-radius: 0;
      color: var(--color-oro-nero);
    }

    .tlam-nav-drawer--tlam::part(inhoud) {
      padding: 0;
    }

    .tlam-nav-drawer--tlam .tlam-nav-drawer__scroller {
      padding: 20px 16px 24px;
    }

    .tlam-nav-drawer--tlam .tlam-nav-drawer__promo-tile {
      margin: auto 16px 16px;
    }

    /*
      Figma 2273:2679: in de mobiele hoofddrawer staan winkelwagen, account, FAQ en de
      regiokiezer onderaan, 16px van de rand, met de kiezer over de volle breedte.
    */
    .tlam-nav-drawer--tlam:has(.tlam-nav-drawer__onderaan)::part(paneel) { grid-template-rows: auto minmax(0, 1fr); }
    .tlam-nav-drawer--tlam:has(.tlam-nav-drawer__onderaan)::part(paneellijst) { height: 100%; }

    .tlam-nav-drawer--tlam .tlam-nav-drawer__scroller:has(> .tlam-nav-drawer__onderaan) {
      display: flex;
      flex-direction: column;
      flex: 1 0 auto;
      padding-block-end: 16px;
    }

    .tlam-nav-drawer--tlam .tlam-nav-drawer__onderaan { margin-block-start: auto; padding-block-start: 40px; }
    .tlam-nav-drawer--tlam .tlam-nav-drawer__onderaan .tlam-nav-drawer__secondary { margin-block-start: 0; }
    .tlam-nav-drawer--tlam .tlam-nav-drawer__onderaan .tlam-nav-drawer__localization { padding-block-end: 0; }
    .tlam-nav-drawer--tlam .tlam-nav-drawer__onderaan .tlam-localization__toggle { width: 100%; justify-content: space-between; }

    /*
      Tweede paneel: schuift over het hele scherm met een eigen kopbalk, dus het kruisje van
      het eerste paneel gaat er even onderuit.

*/
    .tlam-nav-drawer--tlam .tlam-nav-drawer__collapsible-panel {
      position: fixed;
      inset: 0;
      width: auto;
      height: auto;
    }

    .tlam-nav-drawer--tlam .tlam-nav-drawer__collapsible-panel .tlam-nav-drawer__scroller {
      padding: 16px 16px 24px;
    }

    /*
      Het tweede paneel ligt vast over het scherm; dan is dat paneel zelf het schuifvlak, want
      de scroller erin heeft geen hoogte om zich aan te binden.
    */
    .tlam-nav-drawer--tlam .tlam-nav-drawer__collapsible-panel {
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: rgb(0 0 0 / 0.2) transparent;
    }

    .tlam-nav-drawer--tlam:has(.tlam-nav-drawer__collapsible-panel[data-submenu])::part(kop) {
      visibility: hidden;
    }

    /*
      Eén schuifvlak: het paneel zelf schuift en de binnenkant niet, anders zet een systeem met
      vaste scrollbalken (Windows) er twee naast elkaar. Het paneel moet dat doen en niet de
      scroller, want alleen het paneel is aan de vensterhoogte gebonden — zet je het paneel op
      `hidden`, dan valt de onderkant van een lange lijst gewoon weg.
    */
    .tlam-nav-drawer--tlam::part(paneel) {
      scrollbar-width: thin;
      scrollbar-color: rgb(0 0 0 / 0.2) transparent;
    }

    .tlam-nav-drawer--tlam .tlam-nav-drawer__scroller {
      overflow: visible;
    }
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__sub-header {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    grid-template-rows: 44px;
    align-items: center;
    gap: 0;
    margin-block-end: 40px;
    padding-block-end: 0;
    border-block-end: 0;
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__back,
  .tlam-nav-drawer--tlam .tlam-nav-drawer__sub-close button {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 1px solid rgb(0 0 0 / 0.1);
    border-radius: 0;
    cursor: pointer;
    color: var(--color-oro-nero);
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__sub-close {
    display: block;
    justify-self: end;
  }

  /* Figma 519:2531: Larken 300, 24/24, tracking -2%, gecentreerd tussen de knoppen */
  .tlam-nav-drawer--tlam .tlam-nav-drawer__sub-title {
    font-family: var(--tlam-titel-font);
    font-size: 1.5rem;
    font-weight: var(--tlam-titel-gewicht);
    line-height: 1;
    letter-spacing: var(--tlam-titel-spatiering);
    color: var(--color-oro-nero);
    text-align: center;
  }

  .tlam-nav-drawer--tlam .tlam-nav-drawer__sub-footer {
    margin-block-start: 40px;
  }

  /* De knop is zo breed als zijn eigen label; over de volle paneelbreedte werd hij te zwaar */
  .tlam-nav-drawer--tlam .tlam-nav-drawer__sub-footer .tl-button {
    width: auto;
  }

  @media screen and (min-width: 62.5em) {
    .tlam-nav-drawer--tlam {
      --tl-drawer-width: var(--tl-drawer-panel-1);
    }

    /*
      Het eerste paneel is een korte lijst en hoort geen balk te tonen (Figma 3005:18761). Het
      loopt in de praktijk een paar pixels over zijn vak heen en dat is genoeg voor een systeem
      met vaste scrollbalken — Windows, en Firefox overal — om er een balk bij te zetten, ook
      een horizontale. Op macOS in Chrome zie je daar niets van, want die zweeft en vervaagt.
      Schuiven blijft gewoon werken, alleen de balk is weg.
    */
    .tlam-nav-drawer--tlam:not(.tlam-nav-drawer--kaarten) .tlam-nav-drawer__main-panel .tlam-nav-drawer__scroller {
      overflow-x: hidden;
      scrollbar-width: none;
    }

    .tlam-nav-drawer--tlam:not(.tlam-nav-drawer--kaarten) .tlam-nav-drawer__main-panel .tlam-nav-drawer__scroller::-webkit-scrollbar {
      display: none;
    }

    /* Op desktop sluit je via het scrim of dezelfde navigatielink; geen kruisje in het paneel. */
    .tlam-nav-drawer--tlam::part(kop) {
      display: none;
    }

    /*
      Zonder deze twee regels blijft paneel 1 net zo hoog als zijn inhoud en zakt de tegel
      onderin niet naar de onderkant van het paneel (Figma: bottom 24).

*/
    .tlam-nav-drawer--tlam::part(paneel) {
      grid-template-rows: minmax(0, 1fr);
    }

    .tlam-nav-drawer--tlam::part(paneellijst) {
      height: 100%;
    }

    .tlam-nav-drawer--tlam::part(paneel) {
      border-inline-end: 1px solid rgb(0 0 0 / 0.1);
    }

    .tlam-nav-drawer--tlam .tlam-nav-drawer__scroller {
      padding: 24px 24px 0;
    }

    /*
      Figma 3005:18681: in de kaartvorm is er geen kolom van 300, dus dezelfde binnenmarge van
      32 als paneel 2, met de titel op 42.

*/
    .tlam-nav-drawer--tlam.tlam-nav-drawer--kaarten .tlam-nav-drawer__scroller {
      padding: 42px 32px 32px;
    }

    /*
      Paneel 2 staat in het ontwerp naast paneel 1 (Figma 3005:18761: x=300, breedte 412).
      Het paneel is absoluut gepositioneerd binnen paneel 1, dus zet het gewoon op de breedte
      van paneel 1; `::part(paneel)` mag op desktop overlopen, dus het valt buiten de 300 en
      blijft zichtbaar.

*/
    .tlam-nav-drawer--tlam .tlam-nav-drawer__collapsible-panel {
      width: var(--tl-drawer-panel-2);
      inset-inline-start: var(--tl-drawer-panel-1);
      margin-inline-start: 0;
      background-color: var(--color-porcelain);
      border-inline-end: 1px solid rgb(0 0 0 / 0.1);
    }

    /*
      Het thema laat bovenin paneel 2 ruimte vrij ter hoogte van de header. Het ontwerp doet dat
      niet: de eerste rij begint op 32 vanaf de bovenkant van het paneel (Figma 3005:18775).

*/
    .tlam-nav-drawer--tlam .tlam-nav-drawer__collapsible-panel .tlam-nav-drawer__scroller {
      inset-block: 0;
      padding: 32px;
    }

    /*
      De kopbalk met terug en kruisje is alleen voor mobiel; op desktop staat het paneel gewoon
      naast niveau 1. De knop onderaan blijft wel staan: zonder die knop kom je vanuit de
      subnavigatie nooit op de hoofdcollectie zelf uit.
    */
    .tlam-nav-drawer--tlam .tlam-nav-drawer__sub-header {
      display: none;
    }
  }
.tlam-search {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    min-height: 100%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    /* Figma-comment Pieter: de foldout staat in Porcelain, met de productkaarten in wit erop */
    background-color: #f8f7f2 !important;
    color: #1d1d1b !important;
    /* TLAM: rechte hoeken, zoals overal in het ontwerp */
    border-radius: 0;
    overflow: hidden;
    overflow-anchor: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
      opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0.35s;
  }

  .tlam-search.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition:
      opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0s;
  }

  .tlam-search__bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: var(--tlam-kop-hoogte, auto);
    box-sizing: border-box;
    /* Dezelfde marge als de header zelf, zodat het vergrootglas op één lijn staat met het menu */
    padding-inline: var(--tlam-marge);
    background-color: #f8f7f2 !important;
  }

  .tlam-search__results {
    /* geen ruimte boven de kaarten: de zoekbalk eronder geeft al lucht genoeg */
    padding-block: 0 2.5rem;
    padding-inline: var(--tlam-marge);
  }

  /*
    Onder 1000 houdt de header zelf 24 aan en niet de containermarge van 16; de zoekbalk volgt
    dat, anders begint het vergrootglas links van het menu-icoon.
  */
  @media screen and (max-width: 62.4375em) {
    .tlam-search__bar,
    .tlam-search__results {
      padding-inline: 24px;
    }
  }

  @media screen and (min-width: 43.75em) {
    .tlam-search__results {
      padding-block: 0 3rem;
    }
  }

  .tlam-search__icon {
    flex-shrink: 0;
    color: rgb(29 29 27 / 0.7);
    display: inline-flex;
    align-items: center;
  }

  .tlam-search__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: #1d1d1b !important;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    padding: 0;
    outline: none;
    -webkit-text-fill-color: #1d1d1b;
  }

  @media screen and (min-width: 43.75em) {
    .tlam-search__input {
      font-size: 1.125rem;
    }
  }

  .tlam-search__input::placeholder {
    color: rgb(29 29 27 / 0.45);
  }

  /* De globale focusring van het thema maakt hier een dik kader om de hele balk; het veld is
     al herkenbaar als het actieve element, dus onderdrukken we hem hier. */
  .tlam-search__bar .tlam-search__input:focus,
  .tlam-search__bar .tlam-search__input:focus-visible {
    outline: none;
    box-shadow: none;
  }

  /*
    Zelfde sluitknop als in de navigatiedrawer: een vierkant van 44 met een haarlijn eromheen en
    het kruisje van 16 erin. Dat is de vorm die overal in het thema terugkomt.
  */
  .tlam-search__close {
    flex-shrink: 0;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 1px solid rgb(0 0 0 / 0.1);
    border-radius: 0;
    background: none;
    color: var(--color-oro-nero);
    cursor: pointer;
    transition: background-color 200ms;
  }

  .tlam-search__close:hover { background-color: var(--color-champagne); }

  .tlam-search__close:hover { opacity: 0.7; }

  .tlam-search__panel {
    --tlam-tekstkleur: 29 29 27;
    --tlam-achtergrond: 248 247 242;
    --tlam-rand: 29 29 27 / 0.12;
    max-height: 0;
    overflow: hidden;
    /* Porcelain, met de witte productkaarten erop (Figma-comment Pieter) */
    background-color: #f8f7f2 !important;
    color: #1d1d1b !important;
    transition: max-height 400ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .tlam-search__panel.has-content {
    /*
      Zo hoog als de inhoud, maar nooit zo hoog dat de pagina eronder helemaal wegvalt: dan zie je
      de laag van 30% niet meer en oogt het als een eigen pagina in plaats van een foldout.
    */
    max-height: min(70vh, calc(100vh - var(--tlam-kop-hoogte, 0px) - 3rem));
    overflow-y: auto;
  }

  .tlam-search__category {
    font-family: var(--tlam-caption-font);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgb(29 29 27 / 0.6);
    margin: 0 0 1rem;
  }

  .tlam-search__category:not(:first-child) {
    margin-block-start: 1.5rem;
  }

  .tlam-search__products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    /* zonder kop erboven hoeft er ook geen ruimte voor: de kaarten beginnen bovenaan */
    margin-block-start: 0;
  }

  .tlam-search__products + .tlam-search__category { margin-block-start: 1.5rem; }

  @media screen and (min-width: 43.75em) {
    .tlam-search__products {
      /* drie per rij: met vier werd het te krap voor de kaart met setregel en kleuren */
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
  }

  /*
    Dezelfde kaart als in het raster, alleen niet zo hoog: op een breed scherm is een kolom hier
    ruim 600 breed en groeit het beeldvak mee, waardoor de suggesties en de knop eronder buiten
    beeld vallen. De kaart houdt zijn opbouw; alleen het beeldvak krimpt mee met de hoogte.
  */
  .tlam-search__products .tlam-card,
  .tlam-search__products .tlam-card:has(.tlam-card__form) {
    height: 380px;
    min-height: 0;
  }

  .tlam-search__product {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
  }

  

  
  .tlam-search__queries {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .tlam-search__query {
    padding: 0.5rem 1rem;
    border: 1px solid rgb(29 29 27 / 0.25);
    border-radius: 0;
    text-decoration: none;
    color: inherit;
    font-family: var(--tlam-caption-font);
    font-weight: var(--tlam-caption-gewicht);
    font-size: 0.875rem;
    transition: background 200ms, color 200ms;
  }

  .tlam-search__query:hover {
    background: #1d1d1b;
    color: #ffffff;
  }

  /* Shopify markeert het getypte deel van een suggestie met <mark>. De standaardgele
     achtergrond van de browser hoort niet bij het merk; alleen het gewicht verschilt. */
  .tlam-search__query mark {
    background: none;
    color: inherit;
    font-weight: 600;
  }

  .tlam-search__empty {
    color: rgb(29 29 27 / 0.6);
    font-family: var(--tlam-caption-font);
    font-weight: var(--tlam-caption-gewicht);
    font-size: 0.875rem;
    text-align: center;
    padding: 2rem 0;
  }

  /* Dezelfde knop als onderin de navigatiedrawer; de opmaak komt van .tl-button */
  .tlam-search__view-all {
    margin-block-start: 2rem;
  }

  /* Suggesties links, "view all results" rechts op dezelfde regel: scheelt een rij hoogte */
  .tlam-search__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-24);
    margin-block-start: 1.5rem;
  }

  .tlam-search__foot .tlam-search__category { margin-block-start: 0; }
  .tlam-search__foot .tlam-search__view-all { margin-block-start: 0; flex: none; }

  @media screen and (max-width: 43.6875em) {
    .tlam-search__foot {
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-16);
    }
  }

  .tlam-search__backdrop {
    position: fixed;
    inset-block-start: var(--tlam-kop-hoogte, 0px);
    inset-block-end: 0;
    inset-inline: 0;
    /* 30% zwart tussen de foldout en de pagina (Figma-comment Pieter) */
    background: rgb(0 0 0 / 0.3);
    /*
      Boven alles wat in de pagina zelf staat (de hero gaat tot 3) en onder de headersectie, die
      op 4 staat en de foldout draagt. Hij staat achteraan in de body, dus bij gelijke waarde
      wint hij van de hero.
    */
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .tlam-search.is-open ~ .tlam-search__backdrop,
  body:has(.tlam-search.is-open) > .tlam-search__backdrop {
    opacity: 1;
    pointer-events: auto;
  }

/* Cookiebot-dialoog in de huisstijl. Stond eerder inline in nnd-consent.liquid;
   bevat geen instellingen, dus hoort in het gecachete bestand. */
/* COOKIEBOT STYLING */
  #CybotCookiebotDialog {
    font-family: Helvetica, "Helvetica Neue", Arial !important;
  }

  #CybotCookiebotDialog {
    border-radius: 8px !important;
  }
  /* Buttons gelijk aan de thema-buttons */
  #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
    border-radius: var(--tlam-knop-ronding) !important;
  }

  #CybotCookiebotDialog #CybotCookiebotDialogBodyContent {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  #CybotCookiebotDialogFooter .CybotCookiebotScrollArea {
    padding-bottom: 14px !important;
  }

  #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtons .CybotCookiebotDialogBodyButton:not(:first-of-type), #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton, #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton:not(:first-of-type) {
    font-weight: inherit !important;
    border-width: 1px !important;
    text-transform: var(--tlam-knop-kast, none) !important;
    font-size: 0.9em !important;
    letter-spacing: var(--tlam-knop-spatiering, 0) !important;
  }

  /* Branding on the banner */
  a#CybotCookiebotDialogPoweredbyCybot,
  div#CybotCookiebotDialogPoweredByText,
  #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize .CybotCookiebotDialogArrow {
    display: none !important;
  }

  /* Branding on the Privacy trigger */
  #CookiebotWidget .CookiebotWidget-body .CookiebotWidget-main-logo {
      display: none;
  }

  #CybotCookiebotDialog li {
    list-style: none;
  }

  #CybotCookiebotDialogHeader,
  #CybotCookiebotDialogNav {
    display: none !important;
  }

  #CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton:not(:disabled):not(.disabled), 
  #CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab:not(:disabled):not(.disabled),
  #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSliderWrapper input[type=checkbox], 
  #CybotCookiebotDialog button, #CybotCookiebotDialog input, 
  #CybotCookiebotDialog label:not([for=CybotCookiebotDialogBodyLevelButtonNecessary]) {
    font-style: normal;
    letter-spacing: 0;
  }

  #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: #d6d6d6 !important;
  }

  #CybotCookiebotDialog input:checked+.CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: #111111 !important;
  }

  #CybotCookiebotDialog form input[type=checkbox][disabled]:checked+.CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: #767676 !important;
  }

  #CybotCookiebotDialogBodyUnderlay {
    display: block;
  }