/** 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 948: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 ── */
  #CartDrawer [data-summary] {
    padding: 4px 0 0 !important;
  }

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

  #CartDrawer .cart-drawer-summary__row[hidden] {
    display: none;
  }

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

  #CartDrawer .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 ── */
  #CartDrawer .drawer__header,
  #CartDrawer .drawer__fixed-header {
    min-height: 0 !important;
  }

  #CartDrawer .drawer__header {
    border-bottom: 0 !important;
    padding-bottom: 8px !important;
    padding-top: 8px !important;
    position: relative;
  }

  #CartDrawer .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));
  }

  #CartDrawer .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 ── */
  #CartDrawer .drawer__scrollable {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding-top: 7px !important;
  }

  #CartDrawer .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: 13px !important;
    padding-top: 9px !important;
  }

  #CartDrawer .cart__checkout-wrapper {
    margin-top: 8px !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. */

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

  #CartDrawer .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. */
  #CartDrawer .cart-item-custom__image {
    flex: 0 0 60px;
    width: 60px;
  }

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

  #CartDrawer .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. */
  #CartDrawer .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;
  }

  #CartDrawer .cart-item-custom__remove svg {
    height: 16px;
    width: 16px;
  }

  #CartDrawer .cart-item-custom__remove:hover {
    color: #1c1917;
  }

  #CartDrawer .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. */
  #CartDrawer .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;
  }

  #CartDrawer .cart-item-custom__variants {
    margin: 0 0 auto;
  }

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

  #CartDrawer .cart-item-custom__variant-value {
    color: #7A736B;
    font-weight: 400;
  }

  #CartDrawer .cart-item-custom__variant-sep {
    color: #C9C4BC;
    margin: 0 3px;
  }

  /* Aantal links, prijs rechts, op dezelfde regel. */
  #CartDrawer .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. */
  #CartDrawer .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. */
  #CartDrawer .cart-item-custom__qty > .hidden-label {
    display: none !important;
  }

  #CartDrawer .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. */
  #CartDrawer .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. */
  #CartDrawer .cart-item-custom__qty .js-qty__adjust:hover,
  #CartDrawer .cart-item-custom__qty .js-qty__adjust:focus,
  #CartDrawer .cart-item-custom__qty .js-qty__adjust:focus-visible,
  #CartDrawer .cart-item-custom__qty .js-qty__adjust:focus-within,
  #CartDrawer .cart-item-custom__qty .js-qty__adjust:active {
    background: transparent !important;
    color: #1c1917 !important;
    opacity: 1 !important;
    outline: none !important;
    visibility: visible !important;
  }

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

  #CartDrawer .cart-item-custom__qty .js-qty__adjust svg,
  #CartDrawer .cart-item-custom__qty .js-qty__adjust:hover svg,
  #CartDrawer .cart-item-custom__qty .js-qty__adjust:focus svg,
  #CartDrawer .cart-item-custom__qty .js-qty__adjust:focus-visible svg,
  #CartDrawer .cart-item-custom__qty .js-qty__adjust:focus-within svg,
  #CartDrawer .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. */
  #CartDrawer .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;
  }

  #CartDrawer .cart-item-custom__qty .js-qty__num:focus,
  #CartDrawer .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. */
  #CartDrawer .cart-item-custom__qty .js-qty__adjust:hover {
    background: #F5F2EC !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  #CartDrawer .cart-item-custom__price-col {
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
  }

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

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

  #CartDrawer .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. */
  #CartDrawer .cart-item-custom__savings {
    color: #A32B36;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 1px;
    white-space: nowrap;
  }

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

  #CartDrawer .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
     #CartDrawer 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 naar Luuks referentie (08-09): lichtgrijze afgeronde baan ZONDER
    rand, dikke rode vulling, grote open ringen als markers en "15% OFF"-labels
    eronder. Bereikt = ring loopt rood vol. De boodschap erboven begint met een
    rode aanhef ("Great choice!") zodra er iets in de tas zit - die aanhef wordt
    geschreven door renderQtyProgress, de klasse .cdqp-lead hoort daarbij.
  {%- endcomment -%}
  .cart-drawer-qty-progress {
    border-bottom: 1px solid #E5E3DF;
    padding: 3px 0 4px;
  }
  .cart-drawer-qty-progress__message {
    color: #1c1917;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.4;
    margin: 0 0 10px;
    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: 700;
  }
  .cart-drawer-qty-progress__message .cdqp-lead {
    color: #A32B36;
    font-weight: 700;
    font-style: normal;
  }
  .cart-drawer-qty-progress__bar-wrap {
    /* De ringen (20px) steken boven en onder de baan (6px) uit; de labels
       hangen daar weer onder. */
    padding: 7px 10px 24px;
  }
  .cart-drawer-qty-progress__bar {
    background-color: #E8E5E0;
    border: 0;
    border-radius: 999px;
    box-sizing: border-box;
    height: 6px;
    overflow: visible;
  }
  .cart-drawer-qty-progress__fill {
    background-color: #A32B36;
    border-radius: 999px;
    height: 100%;
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
  }
  .cart-drawer-qty-progress__markers {
    height: 6px;
  }
  .cart-drawer-qty-progress__marker-dot {
    background-color: #FFFFFF;
    border: 2px solid #DDD9D2;
    box-shadow: none;
    color: transparent;
    height: 20px;
    width: 20px;
    transition: background-color .3s ease, border-color .3s ease;
  }
  /* Open ringen, zoals de referentie: geen icoontje erin. */
  .cart-drawer-qty-progress__marker-dot svg {
    display: none;
  }
  .cart-drawer-qty-progress__marker.is-reached .cart-drawer-qty-progress__marker-dot {
    background-color: #A32B36;
    border-color: #A32B36;
  }
  .cart-drawer-qty-progress__marker-label {
    color: #8a8a8a;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    top: 22px;
  }
  .cart-drawer-qty-progress__marker.is-reached .cart-drawer-qty-progress__marker-label {
    color: #A32B36;
    font-weight: 700;
  }

  /* ── Shipping protection: compacte toggle, vervangt de upsell ── */
  #CartDrawer .cart-drawer-protect {
    background: #ffffff;
    border-top: 1px solid #E5E3DF;
    padding: 9px 20px;
  }
  #CartDrawer .cart-drawer-protect[hidden] {
    display: none;
  }
  #CartDrawer 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;
  }
  #CartDrawer .cart-drawer-protect__input {
    height: 1px;
    margin: 0;
    opacity: 0;
    position: absolute;
    width: 1px;
  }
  #CartDrawer .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;
  }
  #CartDrawer .cart-drawer-protect__box svg {
    display: block;
    height: 11px;
    width: 11px;
  }
  #CartDrawer .cart-drawer-protect__input:focus-visible + .cart-drawer-protect__box {
    outline: 2px solid #1c1917;
    outline-offset: 2px;
  }
  #CartDrawer .cart-drawer-protect__input:checked + .cart-drawer-protect__box {
    background: #1c1917;
    border-color: #1c1917;
    color: #ffffff;
  }
  #CartDrawer .cart-drawer-protect__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  #CartDrawer .cart-drawer-protect__title {
    color: #1c1917;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.3;
    text-transform: none;
  }
  #CartDrawer .cart-drawer-protect__sub {
    color: #6b6b6b;
    font-size: 11.5px;
    letter-spacing: normal;
    line-height: 1.35;
    text-transform: none;
  }
  #CartDrawer .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 */