/** Shopify CDN: Minification failed

Line 938:2 Unexpected "{"
Line 938:3 Expected identifier but found "%"
Line 939:11 Expected identifier but found whitespace
Line 939:43 Expected identifier but found whitespace
Line 950:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:announcement-secondary (INDEX:2) */
.announcement-bar-secondary {
    background-color: var(--abc-secondary-bg, #1c1917);
    color: var(--abc-secondary-color, #ffffff);
    font-size: calc(var(--typeBaseSize) * 0.75);
    padding: 10px 0;
    position: relative;
    text-align: center;
  }

  .announcement-bar-secondary a,
  .announcement-bar-secondary a:visited,
  .announcement-bar-secondary a:hover,
  .announcement-bar-secondary a:active {
    color: var(--abc-secondary-color, #ffffff);
  }

  .announcement-slider-secondary {
    position: relative;
  }

  .announcement-slider-secondary__slide {
    overflow: hidden;
    padding: 0 5px;
    position: relative;
    width: 100%;
  }

  .announcement-link-secondary {
    color: var(--abc-secondary-color, #ffffff);
    display: block;
  }

  .announcement-link-secondary:active,
  .announcement-link-secondary:hover {
    color: var(--abc-secondary-color, #ffffff);
  }

  .announcement-text-secondary {
    display: block;
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .announcement-link-text-secondary {
    display: block;
  }

  .announcement-link-secondary .announcement-link-text-secondary {
    text-decoration: underline;
  }

  .announcement-link-text-secondary a {
    color: inherit;
  }

  @media only screen and (min-width: 769px) {
    .announcement-slider-secondary[data-compact="true"] .announcement-slider-secondary__slide {
      display: none;
    }

    .announcement-slider-secondary[data-compact="true"] .announcement-slider-secondary__slide.is-active {
      display: block;
    }

    .announcement-slider-secondary[data-compact="true"] .announcement-link-text-secondary,
    .announcement-slider-secondary[data-compact="true"] .announcement-text-secondary {
      display: inline;
    }

    .announcement-slider-secondary[data-compact="true"] .announcement-text-secondary + .announcement-link-text-secondary {
      padding-left: 5px;
    }

    .announcement-slider-secondary[data-compact="false"] {
      display: flex;
    }

    .announcement-slider-secondary[data-compact="false"] .announcement-slider-secondary__slide {
      flex: 1 1 33%;
    }
  }

  @media only screen and (max-width: 768px) {
    .announcement-slider-secondary .announcement-slider-secondary__slide {
      display: none;
    }

    .announcement-slider-secondary .announcement-slider-secondary__slide.is-active {
      display: block;
    }
  }
/* END_SECTION:announcement-secondary */

/* START_SECTION:cart-drawer-extension (INDEX:10) */
/* ── Quantity discount progress bar ── */
  .cart-drawer-qty-progress {
    background: transparent;
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;
    color: var(--cdqp-text, #1c1917);
    margin-bottom: 8px;
    padding: 2px 0 10px;
    position: relative;
  }

  .cart-drawer-qty-progress__message {
    color: var(--cdqp-text, #1c1917);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    margin: 0 0 9px;
    text-align: center;
  }

  .cart-drawer-qty-progress__message strong {
    font-weight: 700;
  }

  .cart-drawer-qty-progress__bar-wrap {
    position: relative;
    /* Ruimte voor de labels onder de balk. Was 28px met bollen van 28px; alles
       hier is gehalveerd zodat de staffel hooguit een derde van de vorige hoogte
       kost en toch af te lezen blijft. */
    padding-bottom: 18px;
  }

  /* Zwart-wit-rood, gelijk aan de balk in de sticky bar: witte baan met zwarte
     rand, rode vulling. Een grijze baan op wit was nauwelijks te zien. */
  .cart-drawer-qty-progress__bar {
    background-color: #ffffff;
    border: 1px solid #1c1917;
    border-radius: 9999px;
    box-sizing: border-box;
    height: 7px;
    position: relative;
    width: 100%;
  }

  .cart-drawer-qty-progress__fill {
    background-color: #A32B36;
    border-radius: 9999px;
    height: 100%;
    transition: width 0.4s ease;
    width: 0;
  }

  .cart-drawer-qty-progress__markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 7px;
  }

  .cart-drawer-qty-progress__marker {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .cart-drawer-qty-progress__marker-dot {
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #1c1917;
    border-radius: 50%;
    box-sizing: border-box;
    color: #cccccc;
    display: flex;
    height: 17px;
    justify-content: center;
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    width: 17px;
    z-index: 2;
  }

  .cart-drawer-qty-progress__marker-dot svg {
    display: block;
    fill: currentColor;
    height: 9px;
    width: 9px;
  }

  .cart-drawer-qty-progress__marker.is-reached .cart-drawer-qty-progress__marker-dot {
    background-color: #A32B36;
    border-color: #A32B36;
    color: #ffffff;
  }

  .cart-drawer-qty-progress__marker-label {
    color: #aaaaaa;
    font-size: 10px;
    font-weight: 600;
    position: absolute;
    text-align: center;
    top: 21px;
    transition: color 0.3s ease;
    white-space: nowrap;
  }

  .cart-drawer-qty-progress__marker.is-reached .cart-drawer-qty-progress__marker-label {
    color: #A32B36;
  }

  /* ── Discount code chip ── */
  .cart-drawer-discount {
    padding: 0;
  }

  .cart-drawer-discount:empty {
    display: none;
  }

  .cart-drawer-discount__row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
  }

  .cart-drawer-discount__tag {
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #1c1917;
    border-radius: 0;
    color: #1c1917;
    display: inline-flex;
    font-size: 10px;
    font-weight: 700;
    gap: 5px;
    letter-spacing: 0.6px;
    padding: 3px 7px;
    text-transform: uppercase;
  }

  .cart-drawer-discount__note {
    color: #8a8a8a;
    font-size: 11px;
    letter-spacing: normal;
    text-transform: none;
  }
  .cart-drawer-discount__tag svg {
    flex: 0 0 12px;
    height: 12px;
    stroke: #1c1917;
    width: 12px;
  }

  /* ── Total savings row ── */
  :is(#CartDrawer,.vlra-cartpage) [data-summary] {
    padding: 4px 0 0 !important;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-drawer-summary__row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 6px 0 2px;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-drawer-summary__row[hidden] {
    display: none;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-drawer-summary__label {
    color: #1c1917;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-drawer-summary__amount {
    color: #1c1917;
    font-size: 14px;
    font-weight: 700;
  }

  /* ── Payment icons ──
     07-09-2026: stonden op flex-wrap:wrap en vielen daardoor op een tweede rij
     zodra er een betaalmethode bijkwam (Visa stond in z'n eentje onder de rest).
     Nu nooit meer afbreken: de rij blijft één regel en de iconen krimpen mee
     als het krap wordt. Ze houden hun verhouding, alleen hun hoogte schaalt. */
  .cart-drawer-payment-icons {
    align-items: center;
    display: flex;
    flex-wrap: nowrap !important;
    gap: 6px;
    justify-content: center;
    margin-top: 8px;
    min-width: 0;
  }

  @media only screen and (min-width: 769px) {
    .cart-drawer-payment-icons {
      gap: 10px;
    }
  }

  /* flex-shrink aan + min-width:0 is wat een flexitem echt laat krimpen; zonder
     die min-width blijft hij op zijn inhoudsbreedte staan en loopt de rij uit
     de lade. */
  .cart-drawer-payment-icons__item {
    display: inline-flex;
    flex: 0 1 auto;
    min-width: 0;
  }

  .cart-drawer-payment-icons__item svg,
  .cart-drawer-payment-icons__svg {
    height: var(--cdpi-size, 24px);
    max-width: 100%;
    width: auto;
  }

  .cart-drawer-payment-icons[hidden] {
    display: none;
  }

  /* ── Guarantee strip ── */
  /* Zelfde stijl als het bundelblok en de protection-rij: crème vlak met zandlijn. */
  .cart-drawer-guarantee {
    background-color: var(--cdg-bg, #F6F5F3);
    border: 1px solid #EAE3DA;
    box-sizing: border-box;
    color: var(--cdg-color, #1c1917);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    margin-top: 10px;
    padding: 10px 12px;
    text-align: center;
    text-transform: none;
    width: 100%;
  }

  .cart-drawer-guarantee[hidden] {
    display: none;
  }

  /* ── Header ── */
  :is(#CartDrawer,.vlra-cartpage) .drawer__header,
  :is(#CartDrawer,.vlra-cartpage) .drawer__fixed-header {
    min-height: 0 !important;
  }

  :is(#CartDrawer,.vlra-cartpage) .drawer__header {
    border-bottom: 0 !important;
    padding-bottom: 8px !important;
    padding-top: 8px !important;
    position: relative;
  }

  :is(#CartDrawer,.vlra-cartpage) .drawer__header::after {
    background: #e5e5e5;
    bottom: 0;
    content: '';
    height: 1px;
    left: calc(-1 * var(--drawer-gutter));
    pointer-events: none;
    position: absolute;
    right: calc(-1 * var(--drawer-gutter));
  }

  :is(#CartDrawer,.vlra-cartpage) .drawer__title {
    font-family: var(--typeHeaderPrimary, inherit), var(--typeHeaderFallback, serif) !important;
    font-size: 22px !important;
    /* 400, gelijk aan elke andere kop in de winkel; 600 maakte er een vetgedrukte
       serif van die nergens anders voorkomt. */
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
  }

  /* ── Layout ── */
  :is(#CartDrawer,.vlra-cartpage) .drawer__scrollable {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding-top: 7px !important;
  }

  :is(#CartDrawer,.vlra-cartpage) .drawer__footer {
    /* Geen eigen rand meer: de protectie-balk er direct boven heeft er al een,
       en twee lijnen van 1px met 9px ertussen leest als een fout. */
    border-top: 0 !important;
    flex: 0 0 auto !important;
    padding-bottom: 9px !important;
    padding-top: 6px !important;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart__checkout-wrapper {
    margin-top: 6px !important;
  }

  /* ── Line items ── */
  /* ══════ Regelitem in de lade - compacte kaart (07-09-2026) ══════
     Was ~160px hoog per artikel: 80x80 foto, titel, twee losse optieregels
     ("Color: Pink" boven "Size: S"), daaronder een aparte rij met de
     aantalkiezer en rechts een prijskolom van drie regels. Bij drie artikelen
     paste er niets meer onder de vouw en moest je scrollen om de checkoutknop
     te zien.
     Nu ~105px: opties op EEN regel, prijs en aantal op dezelfde regel, en
     strakkere marges. Bewust NIET kleiner gemaakt: de +/- knoppen gaan van
     28 naar 32px en de prullenbak krijgt een raakvlak van 32x32 in plaats van
     18x18. Compacter voor het oog, makkelijker voor de vinger. */

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom {
    border-bottom: 1px solid #EFEDE8;
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    padding: 12px 0;
    position: relative;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom:last-child {
    border-bottom: 0;
  }

  /* 60x75 houdt de staande verhouding van de productfoto's (4:5) aan; een
     vierkante 80x80 sneed er bij kleding altijd bovenkant of zoom af. */
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__image {
    flex: 0 0 60px;
    width: 60px;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__image-link,
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__image img {
    border-radius: 2px;
    display: block;
    height: 75px;
    object-fit: cover;
    width: 60px;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding-right: 26px;
    position: relative;
  }

  /* Icoon blijft 16px, maar het raakvlak is 32x32 en steekt met negatieve
     offsets in de padding - zo is hij makkelijk te raken zonder ruimte te
     kosten. */
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__remove {
    align-items: center;
    color: #A8A29A;
    display: flex;
    height: 32px;
    justify-content: center;
    line-height: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    right: -8px;
    top: -6px;
    width: 32px;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__remove svg {
    height: 16px;
    width: 16px;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__remove:hover {
    color: #1c1917;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__remove:focus-visible {
    outline: 2px solid #1c1917;
    outline-offset: -2px;
  }

  /* Maximaal twee regels titel: langere producttitels rekten de kaart eerder
     tot vier regels op. */
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__title {
    color: #1c1917 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--typeBasePrimary), var(--typeBaseFallback, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.35;
    margin: 0 0 3px;
    text-decoration: none;
    text-transform: none;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__variants {
    margin: 0 0 auto;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__variant-row {
    color: #7A736B;
    font-size: 12px;
    line-height: 1.35;
    margin: 0;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__variant-value {
    color: #7A736B;
    font-weight: 400;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__variant-sep {
    color: #C9C4BC;
    margin: 0 3px;
  }

  /* Aantal links, prijs rechts, op dezelfde regel. */
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__footer {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 8px;
  }

  /* Aantalkiezer: één omlijnd blok van 32px hoog met dunne scheidingslijnen
     tussen de knoppen en het cijfer, zodat het als één bedieningselement leest
     in plaats van drie losse dingen. Geen radius - dat is de huisstijl. */
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty {
    align-items: center;
    background: #fff;
    border: 1px solid #E2DFD8;
    display: inline-flex;
    /* theme.css pint div.js-qty__wrapper op width:80px / max-width:80px met
       !important. Drie vakken van 32px zijn 96px, dus de PLUS-knop werd voor
       17px afgesneden door de overflow hieronder - gemeten: knop liep van 65
       tot 97 in een doos van 80. (Bij de oude 28px was dat al 5px.) Vandaar
       dat breedte, min- en max-breedte hier alle drie expliciet los moeten. */
    flex: 0 0 auto !important;
    height: 32px;
    max-width: none !important;
    min-width: 0 !important;
    overflow: hidden;
    width: auto !important;
  }

  /* Turbo's verborgen <label> telt anders als 1px flexitem mee in de rij. */
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty > .hidden-label {
    display: none !important;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty:focus-within {
    border-color: #1c1917;
  }

  /* theme.css pint div.js-qty__wrapper button.js-qty__adjust met !important op
     onder meer width, height, flex-basis, min-width en order. Alleen width en
     height zetten laat de knoppen dan te groot en klapt het invoerveld naar
     0px, dus die vier gaan hier expliciet mee. */
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty .js-qty__adjust {
    align-items: center;
    background: transparent;
    border: 0;
    color: #1c1917;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 32px !important;
    height: 32px !important;
    justify-content: center;
    min-width: 32px !important;
    order: 0 !important;
    padding: 0;
    position: static !important;
    width: 32px !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Knop in ELKE interactiestand zichtbaar houden. Op mobiel blijven :focus en
     :active plakken na een tik, en dat verborg het icoon eerder. */
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty .js-qty__adjust:hover,
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty .js-qty__adjust:focus,
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty .js-qty__adjust:focus-visible,
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty .js-qty__adjust:focus-within,
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty .js-qty__adjust:active {
    background: transparent !important;
    color: #1c1917 !important;
    opacity: 1 !important;
    outline: none !important;
    visibility: visible !important;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty .js-qty__adjust:focus-visible {
    outline: 2px solid #1c1917 !important;
    outline-offset: -2px;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty .js-qty__adjust svg,
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty .js-qty__adjust:hover svg,
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty .js-qty__adjust:focus svg,
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty .js-qty__adjust:focus-visible svg,
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty .js-qty__adjust:focus-within svg,
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty .js-qty__adjust:active svg {
    color: #1c1917 !important;
    display: block !important;
    height: 10px !important;
    opacity: 1 !important;
    pointer-events: none;
    visibility: visible !important;
    width: 10px !important;
  }

  /* Scheidingslijnen zitten op het CIJFERVELD, niet op de knoppen: die houden
     zo hun volle 32px raakvlak en de lijnen schuiven niet mee met een hover. */
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty .js-qty__num {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    border-left: 1px solid #EFEDE8 !important;
    border-right: 1px solid #EFEDE8 !important;
    border-radius: 0;
    color: #1c1917;
    flex: 0 0 32px !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    height: 32px !important;
    line-height: 32px;
    min-width: 32px !important;
    order: 0 !important;
    padding: 0;
    text-align: center;
    width: 32px !important;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty .js-qty__num:focus,
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty .js-qty__num:focus-visible {
    background: #F6F5F3;
    outline: none;
  }

  /* Hover geeft de knop een vlak in plaats van alleen een kleurtje: op 32px
     is dat het verschil tussen "reageert" en "lijkt kapot". Turbo hangt aan
     .btn een transition-delay van 250ms; hier expliciet uit. */
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__qty .js-qty__adjust:hover {
    background: #F5F2EC !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__price-col {
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__price-row {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    justify-content: flex-end;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__price-compare {
    color: #A8A29A;
    font-size: 12px;
    font-weight: 400;
    text-decoration: line-through;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__price-sale {
    color: #1c1917;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Kleur hier HARDGECODEERD, en dat is geen slordigheid: Shopify voert in een
     stylesheet-blok GEEN Liquid uit. Er stond {{ settings.color_sale_tag }} en
     dat kwam letterlijk als tekst in de CSS terecht, waardoor de hele
     declaratie ongeldig was en "Save $50.00" gewoon de donkere tekstkleur
     erfde. Vandaar dat het nooit rood is geweest. #A32B36 is dezelfde rode
     huiskleur als de doorgestreepte prijs en de campagnetekst. */
  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__savings {
    color: #A32B36;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 1px;
    white-space: nowrap;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__line-discount {
    color: #1c1917;
    font-size: 12px;
    line-height: 1.3;
    margin-top: 1px;
  }

  :is(#CartDrawer,.vlra-cartpage) .cart-item-custom__unit-price {
    color: #7A736B;
    font-size: 11.5px;
    margin-top: 1px;
  }

  /* ── Upsell carousel (one product at a time, above footer separator) ── */
  .cart-drawer-upsell {
    background-color: #ffffff;
    border-radius: 2px;
    box-sizing: border-box;
    flex: 0 0 auto;
    margin: 12px 0;
    padding: 12px;
  }

  .cart-drawer-upsell[hidden] {
    display: none;
  }

  .cart-drawer-upsell__head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .cart-drawer-upsell__title-text {
    color: #1c1917;
    font-family: var(--typeBasePrimary, inherit), var(--typeBaseFallback, sans-serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin: 0;
    text-transform: uppercase;
  }

  .cart-drawer-upsell__nav {
    display: flex;
    gap: 4px;
  }

  .cart-drawer-upsell__nav[hidden] {
    display: none;
  }

  .cart-drawer-upsell__arrow {
    align-items: center;
    background: transparent;
    border: 0;
    color: #1c1917;
    cursor: pointer;
    display: inline-flex;
    height: 24px;
    justify-content: center;
    padding: 0;
    width: 24px;
    -webkit-tap-highlight-color: transparent;
  }

  .cart-drawer-upsell__arrow svg {
    height: 16px;
    width: 16px;
  }

  .cart-drawer-upsell__arrow:hover {
    color: #1c1917;
  }

  .cart-drawer-upsell__viewport {
    overflow: hidden;
    width: 100%;
  }

  .cart-drawer-upsell__track {
    display: flex;
    transition: transform 0.35s ease;
    will-change: transform;
  }

  .cart-drawer-upsell__slide {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 100%;
    gap: 12px;
    width: 100%;
  }

  .cart-drawer-upsell__image {
    background: #ffffff;
    border-radius: 2px;
    display: block;
    flex: 0 0 64px;
    height: 64px;
    overflow: hidden;
    width: 64px;
  }

  .cart-drawer-upsell__image img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .cart-drawer-upsell__info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
  }

  .cart-drawer-upsell__name {
    color: #1c1917;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.3;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .cart-drawer-upsell__price-row {
    align-items: baseline;
    display: flex;
    gap: 6px;
  }

  .cart-drawer-upsell__price-compare {
    color: #999999;
    font-size: 13px;
    text-decoration: line-through;
  }

  .cart-drawer-upsell__price-compare[hidden] {
    display: none;
  }

  .cart-drawer-upsell__price-sale {
    color: #1c1917;
    font-size: 13px;
    font-weight: 600;
  }

  /* One dropdown per product option, side by side, wrapping when tight */
  .cart-drawer-upsell__options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }

  .cart-drawer-upsell__select {
    -webkit-appearance: none;
    appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-position: right 6px center;
    background-repeat: no-repeat;
    background-size: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    color: #1c1917;
    cursor: pointer;
    flex: 1 1 84px;
    font-size: 12px;
    min-width: 0;
    padding: 6px 22px 6px 8px;
    text-overflow: ellipsis;
  }

  .cart-drawer-upsell__select:focus {
    border-color: #1c1917;
    outline: none;
  }

  .cart-drawer-upsell__add {
    align-self: center;
    background-color: #1c1917;
    border: 0;
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 10px 16px;
    transition: background-color 0.2s ease;
    white-space: nowrap;
  }

  .cart-drawer-upsell__add:hover {
    background-color: #852638;
  }

  .cart-drawer-upsell__add:disabled {
    cursor: default;
    opacity: 0.6;
  }

  /* ══════════════════════════════════════════════════════════════════
     Valenira 04-09-2026: cart drawer in de huisstijl.
     Alles hieronder staat NA de oorspronkelijke regels in dezelfde
     stylesheet en wint dus op volgorde. Label-selectors zijn gescoped op
     :is(#CartDrawer,.vlra-cartpage) omdat theme.css elke <label> op uppercase + 0.3em
     letter-spacing zet met (0,2,1).
     ══════════════════════════════════════════════════════════════════ */

  /* ── Voortgangsbalk: drie tredes, dikke balk, markers op 1/6 - 3/6 - 5/6 ──
     De markers stonden op 0% / 50% / 100%, waardoor de eerste tegen de linkerrand
     plakte en zijn label eruit liep. Op de middens van drie gelijke vakken staat
     alles vrij van de randen. */
  {%- comment -%}
    LET OP: dit blok is de winnende versie. Er staat bovenin dit bestand nog een
    set regels met dezelfde selectors; die staat eerder in het document en
    verliest op volgorde. Pas je maten aan, doe het HIER.

     Ontwerp 17-09: de balk zit nu in een eigen kaartje omdat hij als kale
     streep tussen de rest wegviel. Lichtgrijze afgeronde baan, rode vulling met
     verloop, ringen die rood vollopen met een vinkje, labels in zinsvorm
     ("15% off"). De boodschap erboven zet de beloning vooraan: .cdqp-pct voor
     het percentage, .cdqp-lead voor de rode aanhef, allebei geschreven door
     renderQtyProgress. Alles staat op EEN regel: de losse onderregel eronder
     kostte meer hoogte dan het zinnetje waard was.
  {%- endcomment -%}
  /* ── Hoeveelheidskorting ──────────────────────────────────────────────
     Was: een dunne grijze streep met 10px grijze hoofdletterlabels, visueel
     een scheidingslijn in plaats van een aanbod. Nu een eigen kaartje met
     de beloning groot bovenaan. De klant die één artikel pakt moet in één
     oogopslag zien wat het tweede oplevert en dat de korting over de HELE
     bestelling gaat. Labels in zinsvorm, zie [no-uppercase-in-designs]. */
  /* Geen kaartje meer: over de volle breedte van de lade, met alleen een
     scheidingslijn eronder zoals de rest van de lade dat doet. Het kaartje
     maakte er een doos in een doos van. */
  .cart-drawer-qty-progress {
    background: none;
    border: 0;
    border-bottom: 1px solid #E5E3DF;
    border-radius: 0;
    /* .drawer__scrollable heeft --drawer-gutter (30px op desktop) aan padding.
       Die trek ik hier terug met een negatieve marge, zodat de band en de lijn
       eronder van rand tot rand lopen, en ik zet de gutter terug als padding
       zodat de tekst wel op één lijn blijft met de artikelen eronder. */
    margin: 0 calc(var(--drawer-gutter, 20px) * -1);
    padding: 8px var(--drawer-gutter, 20px) 3px;
  }
  .cart-drawer-qty-progress__message {
    color: #1c1917;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.3;
    margin: 0;
    max-width: none;
    overflow: visible;
    text-align: center;
    text-overflow: clip;
    text-transform: none;
    white-space: normal;
  }
  .cart-drawer-qty-progress__message strong { color: #1c1917; font-weight: 600; }
  /* Het percentage is de beloning, dus dat is het enige dat schreeuwt. */
  .cart-drawer-qty-progress__message .cdqp-pct {
    color: #A32B36;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
  }
  .cart-drawer-qty-progress__message .cdqp-lead {
    color: #A32B36;
    font-weight: 700;
    font-style: normal;
  }
  .cart-drawer-qty-progress__bar-wrap { padding: 9px 4px 21px; }
  .cart-drawer-qty-progress__bar {
    background-color: #DED8D0;
    border: 0;
    border-radius: 999px;
    box-sizing: border-box;
    height: 7px;
    overflow: visible;
  }
  .cart-drawer-qty-progress__fill {
    background: linear-gradient(90deg, #C2505A 0%, #A32B36 100%);
    border-radius: 999px;
    height: 100%;
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
  }
  .cart-drawer-qty-progress__markers { height: 7px; }
  .cart-drawer-qty-progress__marker-dot {
    background-color: #FFFFFF;
    border: 2px solid #CFC8BE;
    box-shadow: none;
    /* Het labeltje erin is nu altijd zichtbaar, dus color draagt de icoonkleur. */
    color: #B3ABA1;
    height: 19px;
    width: 19px;
    transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
  }
  /* Sale-labeltje in ELK bolletje, ook als de trede nog niet gehaald is:
     grijs op wit, wit op rood zodra hij binnen is. Dat leest meteen als
     korting, waar een leeg rondje niets zei. */
  .cart-drawer-qty-progress__marker-dot svg {
    display: block;
    height: 9px;
    width: 9px;
    opacity: 1;
    transition: color .3s ease;
  }
  .cart-drawer-qty-progress__marker.is-reached .cart-drawer-qty-progress__marker-dot {
    background-color: #A32B36;
    border-color: #A32B36;
    color: #FFFFFF;
  }
  .cart-drawer-qty-progress__marker.is-reached .cart-drawer-qty-progress__marker-dot svg { color: #FFFFFF; }
  .cart-drawer-qty-progress__marker-label {
    color: #8a8a8a;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    top: 22px;
  }
  .cart-drawer-qty-progress__marker.is-reached .cart-drawer-qty-progress__marker-label {
    color: #A32B36;
    font-weight: 700;
  }
  /* Nog één artikel te gaan: de EERSTVOLGENDE ring klopt zachtjes. Alleen die
     ene, anders is het behang. .is-next wordt door renderQtyProgress gezet;
     :not(.is-reached) alleen zou alle drie de ringen pakken. */
  .cart-drawer-qty-progress.is-close .cart-drawer-qty-progress__marker.is-next .cart-drawer-qty-progress__marker-dot {
    animation: cdqpPulse 1.8s ease-in-out infinite;
    border-color: #A32B36;
  }
  @keyframes cdqpPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(163, 43, 54, .34); }
    55%      { box-shadow: 0 0 0 5px rgba(163, 43, 54, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .cart-drawer-qty-progress.is-close .cart-drawer-qty-progress__marker.is-next .cart-drawer-qty-progress__marker-dot { animation: none; }
    .cart-drawer-qty-progress__fill { transition: none; }
  }

  /* ── Ladekop: logo gecentreerd ─────────────────────────────────────────
     .drawer__header is van zichzelf display:table met twee cellen, dus het
     logo zou op het midden van de LINKERcel landen en niet op het midden van
     de lade. Vandaar flex met het kruisje er absoluut naast. */
  :is(#CartDrawer,.vlra-cartpage) .drawer__header {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
  }
  :is(#CartDrawer,.vlra-cartpage) .drawer__title--logo {
    display: block;
    line-height: 0;
    width: auto;
  }
  :is(#CartDrawer,.vlra-cartpage) .drawer__logo-img {
    display: block;
    height: auto;
    max-width: 100%;
    width: 130px;
  }
  :is(#CartDrawer,.vlra-cartpage) .drawer__close {
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
  }


  /* ── Shipping protection: compacte toggle, vervangt de upsell ── */
  :is(#CartDrawer,.vlra-cartpage) .cart-drawer-protect {
    background: #ffffff;
    border-top: 1px solid #E5E3DF;
    padding: 6px 20px;
  }
  :is(#CartDrawer,.vlra-cartpage) .cart-drawer-protect[hidden] {
    display: none;
  }
  :is(#CartDrawer,.vlra-cartpage) label.cart-drawer-protect__row {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 12.5px;
    gap: 10px;
    letter-spacing: normal;
    margin: 0;
    text-transform: none;
  }
  :is(#CartDrawer,.vlra-cartpage) .cart-drawer-protect__input {
    height: 1px;
    margin: 0;
    opacity: 0;
    position: absolute;
    width: 1px;
  }
  :is(#CartDrawer,.vlra-cartpage) .cart-drawer-protect__box {
    align-items: center;
    background: #ffffff;
    border: 1px solid #C9BFB4;
    color: transparent;
    display: inline-flex;
    flex: 0 0 auto;
    height: 17px;
    justify-content: center;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    width: 17px;
  }
  :is(#CartDrawer,.vlra-cartpage) .cart-drawer-protect__box svg {
    display: block;
    height: 11px;
    width: 11px;
  }
  :is(#CartDrawer,.vlra-cartpage) .cart-drawer-protect__input:focus-visible + .cart-drawer-protect__box {
    outline: 2px solid #1c1917;
    outline-offset: 2px;
  }
  :is(#CartDrawer,.vlra-cartpage) .cart-drawer-protect__input:checked + .cart-drawer-protect__box {
    background: #1c1917;
    border-color: #1c1917;
    color: #ffffff;
  }
  :is(#CartDrawer,.vlra-cartpage) .cart-drawer-protect__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  :is(#CartDrawer,.vlra-cartpage) .cart-drawer-protect__title {
    color: #1c1917;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.3;
    text-transform: none;
  }
  :is(#CartDrawer,.vlra-cartpage) .cart-drawer-protect__sub {
    color: #6b6b6b;
    font-size: 11.5px;
    letter-spacing: normal;
    line-height: 1.35;
    text-transform: none;
  }
  :is(#CartDrawer,.vlra-cartpage) .cart-drawer-protect__price {
    color: #1c1917;
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: normal;
    margin-left: auto;
    white-space: nowrap;
  }
/* END_SECTION:cart-drawer-extension */

/* START_SECTION:category-nav (INDEX:11) */
.category-nav {
    background-color: var(--cnav-bg, #ffffff);
    color: var(--cnav-color, #1c1917);
    padding: var(--cnav-padding-y, 14px) 0;
    width: 100%;
    box-sizing: border-box;
  }

  .category-nav--border {
    border-bottom: 1px solid var(--cnav-border-color, #e8e8e1);
  }

  .category-nav__inner {
    width: 100%;
  }

  .category-nav__list {
    list-style: none;
    margin: 0;
    padding: 0 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--cnav-gap-mobile, 16px);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    scroll-padding-left: 16px;
  }

  .category-nav__list::-webkit-scrollbar {
    display: none;
  }

  @media only screen and (min-width: 769px) {
    .category-nav__list {
      gap: var(--cnav-gap-desktop, 32px);
      justify-content: center;
      overflow-x: visible;
      padding: 0;
      scroll-snap-type: none;
    }
  }

  .category-nav--mobile-wrap .category-nav__list {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
    row-gap: var(--cnav-gap-mobile, 16px);
  }

  .category-nav__item {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  .category-nav__link {
    color: var(--cnav-color, #1c1917);
    display: inline-block;
    font-size: var(--cnav-font-size-mobile, 12px);
    font-weight: var(--cnav-font-weight, 600);
    letter-spacing: var(--cnav-letter-spacing, 1.5px);
    text-transform: var(--cnav-text-transform, uppercase);
    text-decoration: none;
    padding-bottom: var(--cnav-underline-offset, 4px);
    border-bottom: var(--cnav-underline-thickness, 1px) solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    line-height: 1.2;
  }

  @media only screen and (min-width: 769px) {
    .category-nav__link {
      font-size: var(--cnav-font-size-desktop, 14px);
    }
  }

  .category-nav--underline .category-nav__link {
    border-bottom-color: currentColor;
  }

  .category-nav__link:hover {
    color: var(--cnav-color-hover, #666666);
  }

  .category-nav--underline .category-nav__link:hover {
    border-bottom-color: var(--cnav-color-hover, #666666);
  }

  .category-nav__link--active {
    border-bottom-width: calc(var(--cnav-underline-thickness, 1px) + 1px);
    border-bottom-color: currentColor;
  }

  .category-nav__link:focus-visible {
    outline: 2px solid var(--cnav-color, #1c1917);
    outline-offset: 2px;
  }

  @media only screen and (max-width: 768px) {
    .category-nav--hide-mobile {
      display: none;
    }
  }
/* END_SECTION:category-nav */