/** Shopify CDN: Minification failed

Line 4930:0 Unexpected "<"
Line 5497:0 Expected identifier but found ">"

**/
/*
  custom.css
  Purpose: Add custom styles to override or extend theme design.
  This file contains all additional CSS customizations for the store.
*/

/* Reviews.io-icoontje URL globaal beschikbaar als CSS-var. Zelfde SVG
   die ook in de cart-drawer footer hardcoded staat. ::after-regels
   verderop in dit bestand gebruiken deze var om het icoontje rechts
   naast de review-pill te tonen op (1) cart-page trust-banner, (2)
   sticky-checkout reviews mobile + desktop. */
:root {
  --cn-reviews-io-icon: url("/cdn/shop/files/Reviews.io_icon_68097f64-be11-4c13-898f-dc8566dd3ff7.svg?v=1778875066");
}

/* Scrollbar-gutter: stable — browser reserveert altijd ruimte voor de
   verticale scrollbar. Zonder dit verspringt de hele pagina ~15px naar
   links zodra een drawer/modal `overflow: hidden` zet (de scrollbar
   verdwijnt → viewport wordt breder → content reflowt). Met `stable`
   blijft de gutter altijd gereserveerd — geen shift, geen jitter,
   ongeacht welke drawer/popup open of dicht gaat. Werkt in alle
   moderne browsers (Chrome 94+, Firefox 97+, Safari 16+).

   Belangrijk: deze theme zet de scrollbar op `body` (overflow-y:scroll),
   niet op html. Daarom MOET scrollbar-gutter op body — anders negeert
   de browser de regel omdat html geen scrollbar heeft om voor te
   reserveren.

   Html bg matched met page-secties: bij `overflow:hidden` (drawer
   open) verdwijnt de scrollbar uit de gutter en wordt de bg van html
   zichtbaar. Default = wit → "white bar" rechts. Met grijs matched
   met de secties valt 't niet meer op. Kleur via --cn-bg-page var
   (snippets/css-variables.liquid). */
body {
  scrollbar-gutter: stable;
}
html {
  background-color: var(--cn-bg-page);
}

/* GPU-acceleratie hints voor product-card hover-animaties op desktop.
   Image-zoom (transform: scale) en KOOP-NU button slide (transform:
   translateY) gebruiken transforms — die HOREN GPU-accelerated te zijn,
   maar zonder will-change moet de browser bij elke hover een nieuwe
   compositor-layer aanmaken. Dat triggert paint+composite werk op de
   eerste frames → stutter. `will-change: transform` hint de browser
   om de layer permanent klaar te zetten, zodat de hover-transitie
   meteen op 60fps loopt. Alleen op desktop (geen hover op touch). */
/* De productfoto zoomt niet meer (zie hieronder), dus daar valt geen
   transform-laag meer voor klaar te zetten. */
@media (hover: hover) and (pointer: fine) {
  .product-card__actions--visible-on-hover .product-card__btns,
  .vertical-product-card__buttons--visible-on-hover {
    will-change: transform;
  }
}

/* ============================================================
   Hover op een productkaart: grijze sluier i.p.v. inzoomen

   Why: de foto schaalde naar 1.1 en liep daarbij tegen de randen van
   de grijze container aan — bij verpakkingen met tekst oogde dat als
   wegdrijven, en de knoppenbalk die tegelijk opkomt maakte het onrustig.
   Een lichte sluier geeft dezelfde "deze kaart is actief"-feedback zonder
   dat er iets beweegt.

   De sluier ligt op .product-card__inner (de grijze container) en niet op
   de foto zelf: dan valt hij over de hele kaartafbeelding inclusief de
   ruimte eromheen, en blijft hij onder de badges en de knoppenbalk liggen
   (die staan hoger in de stapel).
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .product-card--zoom:hover .product-card__images,
  .product-card--zoom:focus-within .product-card__images {
    transform: none;
  }

  .product-card__inner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(14, 19, 17, 0.06);
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .product-card:hover .product-card__inner::after,
  .product-card:focus-within .product-card__inner::after {
    opacity: 1;
  }
}

/* Cart-page trust-banner (boven de checkout): icoontje rechts naast het
   "Gebaseerd op X recensies"-blok. Als laatste flex-child van
   header__inner verschijnt het automatisch rechts. */
#CartPage .cn-cart-trust .CarouselWidget__header .header__inner::after {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-left: 0.6rem;
  background-image: var(--cn-reviews-io-icon);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex: 0 0 auto;
  vertical-align: middle;
  position: relative;
  top: 2px;
}

/* Tighten the gap between the product image and the meta block (rating,
   title, price) on product cards across the theme — collection grid, related
   products, recommended-for-you, search results. Theme defaults left a lot of
   breathing room above the rating; pulling it up makes cards feel denser and
   more scannable. */
.product-card__details {
    padding-top: 0.2rem !important;
}
.product-card--solid .product-card__details {
    padding-top: 0.4rem !important;
}
/* Products without reviews skip the rating block entirely, which would leave
   the title clamped against the image. Reserve a comfortable air gap when the
   rating container is missing. */
.product-card__details:not(:has(.reviews__container--static)) {
    padding-top: 0.8rem !important;
}
.product-card--solid .product-card__details:not(:has(.reviews__container--static)) {
    padding-top: 1rem !important;
}
.product-card__rating {
    margin-top: 0.2rem !important;
}
.product-card__title {
    margin-top: 0 !important;
}
.product-card__price {
    margin-top: 0.1rem !important;
}
.product-card__vendor {
    margin-top: 0 !important;
}

/* Server-rendered review stars on product cards (replaces the JS-driven
   reviews.io ruk_rating_snippet on collections). Match the gold colour the
   reviews.io widget used so the visual stays consistent. */
.product-card__rating--gold .rating__star {
    width: 1.3rem;
    height: 1.3rem;
}
.product-card__rating--gold .rating__star path {
    fill: #FFBF1A;
}
.product-card__rating--gold .rating__star--transparent path {
    fill: rgba(0, 0, 0, 0.18);
}
.product-card__rating--gold .rating__count {
    font-family: var(--cn-font-display);
    font-size: 1.1rem;
    line-height: 1;
    color: rgba(0, 0, 0, 0.55);
    display: inline-flex;
    align-items: center;
}
.reviews__container--static {
    margin: 0.4rem 0;
}

:root {
    --gold-gradient-border: linear-gradient(
        278deg,
        #44351c -6.22%,
        #9a722e 6.42%,
        #ffca70 49.38%,
        #9a722e 62.37%
    );
    --gold-gradient: linear-gradient(
        283deg,
        #44351c -11.54%,
        #9a722e 9.26%,
        #ffca70 79.98%,
        #9a722e 101.36%
    );
    --gold-gradient-secondary: linear-gradient(
        276deg,
        #44391c -32.85%,
        #9a7d2e 14.89%,
        #ffdc70 177.21%,
        #9a7d2e 226.26%
    );

    /* CN design tokens — single source of truth for colors, radii,
       dimensions and breakpoints used throughout the custom additions. */
    --cn-price-color: #444;
    --cn-sale-red: #b4341f;
    --cn-pill-radius: 1.2rem;
    --cn-pill-bg: #f5f5f5;
    --cn-product-btn-min-height: 7.2rem;
    --cn-bundle-btn-size: 34px;
    --cn-tx-fast: 150ms;
    --cn-tx-std: 250ms;
}

/* Custom font faces */
/* TOXIGENESIS */
@font-face {
    font-family: var(--cn-font-accent);
    src:
        url("/cdn/shop/files/ToxigenesisRg-Bold.woff2?v=1729247247")
            format("woff2"),
        url("/cdn/shop/files/ToxigenesisRg-Bold.woff?v=1729247248")
            format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: var(--cn-font-accent);
    src:
        url("/cdn/shop/files/ToxigenesisRg-BoldItalic.woff2?v=1729247248")
            format("woff2"),
        url("/cdn/shop/files/ToxigenesisRg-Bold.woff?v=1729247248")
            format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: var(--cn-font-accent);
    src:
        url("/cdn/shop/files/ToxigenesisHv-Regular.woff2?v=1729247247")
            format("woff2"),
        url("/cdn/shop/files/ToxigenesisHv-Regular.woff?v=1729247248")
            format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* COMMUTERS SANS */
@font-face {
    font-family: var(--cn-font-display);
    src:
        url("/cdn/shop/files/CommutersSans-Regular.woff2?v=1729247708")
            format("woff2"),
        url("/cdn/shop/files/CommutersSans-Regular.woff?v=1729247709")
            format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: var(--cn-font-display);
    src:
        url("/cdn/shop/files/CommutersSans-Italic.woff2?v=1729247708")
            format("woff2"),
        url("/cdn/shop/files/CommutersSans-Italic.woff?v=1729247708")
            format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: var(--cn-font-display);
    src:
        url("/cdn/shop/files/CommutersSans-SemiBold.woff2?v=1729247708")
            format("woff2"),
        url("/cdn/shop/files/CommutersSans-SemiBold.woff?v=1729247709")
            format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: var(--cn-font-display);
    src:
        url("/cdn/shop/files/CommutersSans-SemiBoldItalic.woff2?v=1729247708")
            format("woff2"),
        url("/cdn/shop/files/CommutersSans-SemiBoldItalic.woff?v=1729247709")
            format("woff");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* 
  Custom CSS for the store
*/

/* Apply Toxigenesis font to all headings */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
.drawer-menu,
.welcome__container {
    font-family: var(--cn-font-accent) !important;
    font-weight: inherit;
    /* Keeps existing weight unless overridden */
    font-style: normal;
    text-transform: uppercase;
    line-height: 110%;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-weight: 700;
}

.gold-text {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================================
   Images-with-text: opsomming als USP-lijst

   Opt-in via de checkbox "Opsomming tonen als USP-lijst" op de sectie.
   Bewust niet standaard: images-with-text staat op acht pagina-templates
   (about, coaching-lp, kookboek, ...) waar een gewone opsomming hoort.
   Zelfde gouden vinkje als de USP-lijst in rich-text-usps-custom, zodat
   het overal in het thema hetzelfde signaal is.
   ============================================================ */
.images-with-text__text--usp-list ul {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 0;
    display: grid;
    gap: 1.2rem;
}

.images-with-text__text--usp-list ul li {
    display: flex;
    /* flex-start: bij een USP over twee regels hoort het vinkje bij de
       eerste regel, niet halverwege het blok. */
    align-items: flex-start;
    gap: 1rem;
    line-height: 1.45;
}

/* Kaal vinkje in de gold-gradient, zonder rondje eromheen. De gradient
   zit als <linearGradient> ín de data-URI: een CSS-gradient kan geen
   SVG-stroke vullen, en een externe paint server (#cn-gold-gradient uit
   theme.liquid) is niet bereikbaar vanuit een background-image — die is
   een eigen SVG-document. Stops zijn dezelfde als --gold-gradient. */
.images-with-text__text--usp-list ul li::before {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 0.15em;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='cnCheck' x1='1' y1='17' x2='17' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2344351c'/%3E%3Cstop offset='0.2' stop-color='%239a722e'/%3E%3Cstop offset='0.8' stop-color='%23ffca70'/%3E%3Cstop offset='1' stop-color='%239a722e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2.6 9.6L6.8 13.8L15.4 4.6' stroke='url(%23cnCheck)' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.images-with-text__text--usp-list ul li p {
    margin: 0;
}

/* Gold-gradient text via <em> tag in multicolumn column titles + body text.
   Lets merchants highlight parts of a title by wrapping them in <em>.
   Niet cursief: <em> is hier de markering voor "maak dit goud" (via de
   sterretjes-notatie en de snippet gold-words), geen nadruk in de zin.
   Zelfde keuze als bij de sectietitels en de andere gouden koppen. */
.multicolumn__column-title em,
.multicolumn__column-text em {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
}

/* Multicolumn block icon → gold gradient.
   Triggered when merchants pick "Gold gradient" in the block's icon color setting.
   Uses a global SVG paint server defined in theme.liquid (#cn-gold-gradient). */
.multicolumn__column-icon--gold path,
.multicolumn__column-icon--gold rect,
.multicolumn__column-icon--gold circle,
.multicolumn__column-icon--gold polygon {
    fill: url(#cn-gold-gradient);
}

/* Multicolumn block link → inherit the column's text color so it adapts to
   whichever color scheme the section uses (white on dark, black on light, etc). */
.multicolumn__column-link,
.multicolumn__column-link .link__text {
    color: inherit !important;
}

.caption,
.product-card,
.product-card__price-item,
.collection-card,
.product-card__title,
.btn,
.section-gold-club__button-separator {
    font-family: var(--cn-font-display) !important;
}

.cart-item__option {
    font-family: "Helvetica", sans-serif !important;
}

.link {
    font-weight: 600;
    font-family: var(--cn-font-display) !important;
    font-size: 1.6rem !important;
}

.product-variant-picker__option-label {
    font-size: 1.6rem !important;
}

.heading-font-family,
.pill {
    font-weight: 600 !important;
}

.pill--solid {
    border: 2px solid #f5f5f5 !important;
    border-radius: 1.2rem !important;
}

/* ============================================================
   SHARED SWATCH/PILL STYLING — single source of truth
   Applied to: PDP, smaakinfo popup, quick view, bundle popup
   ============================================================ */
.cn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.4rem 1.2rem;
    height: 4.4rem;
    border: 2px solid #f5f5f5;
    border-radius: 1.2rem;
    background-color: #f5f5f5;
    font-family: var(--cn-font-display);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
}
.cn-pill .pill__swatch,
.cn-pill img {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-left: -4px;
}
.cn-pill .pill__label {
    font-family: var(--cn-font-display);
    font-size: 13px;
    font-weight: 600;
}
.cn-pill.selected,
.cn-pill[data-selected="true"] {
    border: double 2px transparent;
    background-image: linear-gradient(#f5f5f5, #f5f5f5), var(--gold-gradient-border);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
/* Small variant — used under bundle product cards. Op mobile iets groter
   zodat het matcht met de pill-hoogte in quick-view + smaakinfo popup. */
.cn-pill.cn-pill--sm {
    height: 3.2rem;
    padding: 0.3rem 0.8rem;
    font-size: 11px;
    gap: 5px;
    cursor: pointer;
}
@media screen and (max-width: 768px) {
    .cn-pill.cn-pill--sm {
        height: 4rem;
        padding: 0.4rem 1rem;
        font-size: 12px;
        gap: 6px;
    }
    .cn-pill.cn-pill--sm .pill__swatch,
    .cn-pill.cn-pill--sm img {
        width: 28px !important;
        height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
    }
    .cn-pill.cn-pill--sm .pill__label {
        font-size: 12px;
    }
}
.bundle-variant-pills.is-visible {
    cursor: pointer;
}
.bundle-variant-pills.is-visible:hover .cn-pill--sm {
    border-color: rgba(0, 0, 0, 0.2);
}
.cn-pill.cn-pill--sm .pill__swatch,
.cn-pill.cn-pill--sm img {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
}
.cn-pill.cn-pill--sm .pill__label {
    font-size: 11px;
}

/* Hover effect removed — it was introducing a visible transform→border
   transition delay that made the gold selection feel like 2 animated phases. */

/* Bundle popup pills — match PDP size */
.bundle-variant-popup .cn-pill {
    height: 4.8rem;
    padding: 0.6rem 1.4rem;
    font-size: 14px;
}
.bundle-variant-popup .cn-pill .pill__label {
    font-size: 14px;
}
.bundle-variant-popup .cn-pill .pill__swatch,
.bundle-variant-popup .cn-pill img {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
}

.cn-pill.variant-unavailable {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}
@media screen and (max-width: 768px) {
    .cn-pill {
        height: 3.6rem;
        padding: 0.3rem 1rem;
        font-size: 12px;
    }
    .cn-pill .pill__swatch,
    .cn-pill img {
        width: 26px !important;
        height: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
    }
    .cn-pill .pill__label {
        font-size: 12px;
    }
    /* Bundle popup pills — compact on mobile for better space usage */
    .bundle-variant-popup .cn-pill {
        height: 3.8rem;
        padding: 0.4rem 1rem;
        font-size: 12px;
    }
    .bundle-variant-popup .cn-pill .pill__swatch,
    .bundle-variant-popup .cn-pill img {
        width: 28px !important;
        height: 28px !important;
        max-width: 34px !important;
        max-height: 34px !important;
    }
}

.btn {
    font-weight: 600;
    text-transform: uppercase;
}

.announcement-bar__custom-liquid {
    width: 400px;
}

/* Hide Shopify native bundle component rendering in cart — our JS handles variant display */
.cart-line-item-components {
    display: none !important;
}

/* De min-height/padding van .announcement-bar__inner-container staat nu in
   het {% style %}-blok van sections/announcement-bar.liquid. Dit bestand
   laadt async, dus vanuit hier kwam de correctie pas ná de eerste paint en
   zag je de balk zichtbaar krimpen. */

/* Button modifications */
.image-banner__btn,
.newsletter__input-btn,
.btn--solid {
    background: var(--gold-gradient);
    color: #fff;
}

/* Centered titles */
.collage__title,
.lookbook__title {
    text-align: center;
}

/* Golden Titles styling */
.lookbook__title,
.collection-hero__title,
.welcome__text-name {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.image-slider__content a.link {
    text-decoration: underline;
    text-underline-offset: 1rem;
    margin-bottom: 10px;
}

.image-slider__content a.link,
.image-banner__btn-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.image-slider__content a.link::after,
.image-banner__btn-link::after,
a.section-gold-club__button-right::after,
a.section-gold-club__button-left::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background: var(--gold-gradient);
    border-radius: 1px;
}

.image-banner__content {
    padding: 3.2rem;
}

.link-parent-for-hover:hover .link__text,
.link:hover .link__text {
    background-size: 0;
}

/* Caption styles */
.image-slider__content > .caption {
    color: #808080 !important;
    font-weight: 600;
}

.btn--lg,
.btn {
    min-height: 6.3rem;
}

.product-card__btn,
.vertical-product-card__button {
    background: var(--gsc-button-background-color-90) !important;
    min-height: 4rem !important;
}

.product-card__price {
    flex-direction: row;
}

.product-sale-amount-badge {
    line-height: 1;
    font-family: var(--cn-font-display) !important;
    background: var(--cn-sale-red) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-image: none !important;
    font-weight: 600;
    font-size: 12px !important;
    padding: 5px 10px !important;
    /* Rechthoekig met zachte hoek, overal dezelfde. Geen pil: op de kaart staat
       de badge in de chip-stapel op de foto naast BESTSELLER en NIEUW, en een
       pil leest daar als een ander soort label. Naast de prijs - PDP,
       quick-view, bundeldrawer - is het dezelfde badge en dus dezelfde hoek.

       !important omdat mod-product-cart.css ná custom.css laadt en daar
       `border-radius: 1em` op dezelfde enkele class staat. Die won hier, en dat
       is waarom deze badge overal een pil bleef behalve op de plekken die
       hieronder met twee classes of via een afstammingsselector alsnog boven
       die regel uitkwamen - de collectiekaart dus wél, de PDP en de
       bundeldrawer niet. */
    border-radius: 6px !important;
    z-index: auto !important;
    /* Zelfde schaduw als de andere chips (variabele staat in theme.liquid,
       die eerder laadt). Geen inset-haarlijn erbij: die is er voor lichte
       badges op een lichte foto, en dit vlak is al donker genoeg. */
    box-shadow: var(--cn-badge-shadow) !important;
}
/* Compact variant — bundle cards, collection product cards, cart items en de
   quick-view. Single source of truth via een gedeelde selectorlijst. Alleen het
   formaat; de hoek staat in de basisregel hierboven en geldt overal.

   De quick-view hield hier eerder zijn eigen formaat (12px met 5/10 padding),
   omdat de badge daar naast de prijs staat en niet in de chip-stapel op de
   foto. In de praktijk zie je die twee naast elkaar - de kaart op de
   collectiepagina en de drawer die eroverheen opent - en dan valt het
   maatverschil juist op. */
.bundle-native-card .product-sale-amount-badge,
.product-card .product-sale-amount-badge,
.product-carousel__on-image-badges .product-sale-amount-badge,
.cart-item__discount-badge.product-sale-amount-badge,
.quick-view .product-sale-amount-badge {
    font-size: 11px !important;
    padding: 4px 8px !important;
}

/* Tabs collections */

.shape--fit-square,
.shape--square {
    padding-bottom: var(--gsc-square-image-ratio);
}

.shape--fit-portrait,
.shape--portrait {
    padding-bottom: var(--gsc-portrait-image-ratio);
}

.shape--fit-portrait-xl,
.shape--portrait-xl {
    padding-bottom: var(--gsc-large-portrait-image-ratio);
}

.shape--fit-landscape,
.shape--landscape {
    padding-bottom: var(--gsc-landscape-image-ratio);
}

.collection__header--with-tabs {
    margin: 0 0 4rem 0;
}

/* custom rating snippet */

.ruk_rating_snippet i {
    font-size: 12px !important;
}

.ruk_rating_snippet .ruk-rating-snippet-count {
    font-size: 12px !important;
    font-family: helvetica !important;
    bottom: 1px !important;
}

/* end custom rating snippet */

.collection-card__content--on-image {
    padding: 1.6rem;
}

.collection-card__content {
    row-gap: unset;
}

@media (max-width: 768px) {
    .slider-grid__m-grid,
    .slider-grid__m-one-column,
    .slider-grid__m-two-column {
        display: grid;
        gap: var(--gsc-space-between-cards) var(--gsc-space-between-cards);
        grid-template-rows: repeat(var(--gsc-rows), 1fr);
        grid-template-columns: repeat(var(--gsc-columns), 1fr);
    }

    .slider-grid__m-slideshow .slider-grid__slide {
        min-width: 80%;
    }
}

.product-card__title {
    text-transform: none;
    line-height: 1.3 !important;
}

/* Collection-page product card titels op mobile — base = 1.4rem × 110%
   scale = ~15.4px. Met 2-kolom grid op smalle phones (320-375px) past
   dat niet en kapt line-clamp:2 langere namen af met "…". Mobile-only
   verkleining naar 12px geeft voldoende ruimte zonder de desktop-look
   te raken. */
@media screen and (max-width: 768px) {
    .product-card__title {
        font-size: 1.2rem !important;
    }
}

/* Custom metafield badge on product cards — inherits .product-badge styling */
.product-card__badge--custom-meta {
    white-space: nowrap;
}

/* Quick-view: extra ruimte tussen title en rating block zodat sterren niet
   tegen de titel aan plakken. */
.quick-view .product__info .reviews__container,
.quick-view .product__info [class^="block-"]:has(.reviews__container) {
    margin-top: 1.2rem !important;
}

/* Sale-amount badge (-20%) op cards — kleine vertical gap als badge naar
   nieuwe regel wrapt. Geen flex-basis override (dat maakte rode-streep). */
.product-card__price {
    row-gap: 0.2rem !important;
}

/* Class-chain trick voor max specificity over alle eerdere card-badge rules */
.product-card .product-sale-amount-badge.product-sale-amount-badge,
.product-card__price .product-sale-amount-badge.product-sale-amount-badge,
.product-card__price .product-card__badge.product-sale-amount-badge {
    margin-top: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    line-height: 1 !important;
}

/* PDP image badges — carousel uses grid-area, grid uses absolute positioning */
.pdp-image-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: none;
}
/* In carousel layout, use grid-area for multi-image, absolute for one-image */
.product-media-carousel__carousel .pdp-image-badges {
    position: static;
    grid-area: carousel-viewport;
    align-self: start;
    justify-self: start;
    margin: 12px;
}
.product-media-carousel__carousel--one-image .pdp-image-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    margin: 0;
}
.product-media-carousel__carousel--one-image {
    position: relative !important;
}
.product-media-grid {
    position: relative !important;
}

/* Card prices — shared styling for collection cards, vertical-card and
   horizontal-card (used in PDP related products section). One source of
   truth so cart, collection and related-products visuals stay aligned. */
.product-card__price-item,
.vertical-product-card__price-item,
.horizontal-product-card__price-item {
    font-family: var(--cn-font-display) !important;
    font-size: 15px;
    font-weight: 400;
    color: var(--cn-price-color, #444);
}
@media screen and (max-width: 768px) {
    .product-card__price-item,
    .vertical-product-card__price-item,
    .horizontal-product-card__price-item {
        font-size: 12px;
    }
    .product-card__price-item--compare-at,
    .product-card__price-item-old,
    .product-card__price-item-old--highlight-sale,
    .product-card__price-compare-at,
    .vertical-product-card__old-price-item,
    .vertical-product-card__old-price-item--highlight-sale,
    .horizontal-product-card__old-price-item,
    .horizontal-product-card__old-price-item--highlight-sale {
        font-size: 13px !important;
    }
}
/* Sale price red — collection cards, related products, PDP en quick view.

   De PDP/quick-view-prijs stond hier niet bij en hield daardoor de
   themakleur --gsc-product-highlight-price-color aan: een lichter rood dan
   het merk-rood op de kaarten. Je zag dus twee verschillende rode prijzen
   naast elkaar, afhankelijk van waar je keek.

   .product-price__current-price--highlight-sale komt uit
   product-price-block.liquid, dat zowel de PDP als de quick view rendert,
   dus deze ene selector dekt ze allebei.

   De doorgestreepte oude prijs krijgt dezelfde kleur op zijn streep, anders
   blijft die op de themakleur hangen terwijl het bedrag ernaast wel klopt. */
.product-card__price-item--highlight-sale,
.vertical-product-card__price-item--highlight-sale,
.horizontal-product-card__price-item--highlight-sale,
.product-price__current-price--highlight-sale {
    color: var(--cn-sale-red, #dc2626) !important;
    font-weight: 700 !important;
}

.product-price__old-price--highlight-sale {
    text-decoration-color: var(--cn-sale-red, #dc2626) !important;
}
/* ============================================
   Color scheme overrides — card prices, compare-at, review-counts
   Default + primary erven standaard styling (zwart op licht).
   Secondary (donker bg) en custom-1 (contrast) flippen naar wit-tints.
   Sale-highlight prijs blijft rood (sale signal = scheme-consistent).
   ============================================ */

/* SECONDARY — prices, compare-at, review-count → wit/lichtgrijs op donker */
.color-secondary .product-card__price-item,
.color-secondary .vertical-product-card__price-item,
.color-secondary .horizontal-product-card__price-item,
.color-secondary .product-card__price-compare-at,
.color-secondary .product-card__price-item--compare-at,
.color-secondary .product-card__price-item-old,
.color-secondary .product-card__price-item-old--highlight-sale,
.color-secondary .vertical-product-card__old-price-item,
.color-secondary .vertical-product-card__old-price-item--highlight-sale,
.color-secondary .horizontal-product-card__old-price-item,
.color-secondary .horizontal-product-card__old-price-item--highlight-sale {
    color: #fff !important;
    text-decoration-color: #fff !important;
}

.color-secondary .product-card__rating--gold .rating__count {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* CUSTOM-1 (contrast) — prices iets gedempt + review-count lichtgrijs */
.color-custom-1 .product-card__price-item,
.color-custom-1 .vertical-product-card__price-item,
.color-custom-1 .horizontal-product-card__price-item {
    color: rgba(255, 255, 255, 0.75) !important;
}

.color-custom-1 .product-card__rating--gold .rating__count {
    color: rgba(255, 255, 255, 0.55) !important;
}
/* Card titles + meta — Commuters Sans across the related-products cards
   (theme defaults to Helvetica-style stack). Font-weight 600 voor
   consistente visuele dichtheid met de PDP en cart. */
.vertical-product-card__title,
.vertical-product-card__title a,
.vertical-product-card__vendor,
.horizontal-product-card__title,
.horizontal-product-card__title a,
.horizontal-product-card__vendor {
    font-family: var(--cn-font-display) !important;
}
.vertical-product-card__title,
.vertical-product-card__title a,
.horizontal-product-card__title,
.horizontal-product-card__title a {
    font-weight: 600 !important;
}
/* Smaller gap between title and price block on related-products cards.
   Title line-height ook strakker zodat 2-line titels niet meer ademen. */
.vertical-product-card__title,
.horizontal-product-card__title {
    margin-bottom: 0.2rem !important;
    line-height: 1.2 !important;
}
.vertical-product-card__price,
.horizontal-product-card__price {
    margin-top: 0 !important;
}

/* ── Related products: kleinere typo op mobile ──
   Scoped op:
     .product-related-products-block  → PDP product-info BLOCK
     .product-recommendations         → standalone recommendations SECTION
   Andere collectie-secties / carousels behouden hun originele grootte. */
@media screen and (max-width: 768px) {
    .product-related-products-block .vertical-product-card__title,
    .product-related-products-block .horizontal-product-card__title,
    .product-recommendations .vertical-product-card__title,
    .product-recommendations .horizontal-product-card__title {
        font-size: 1.2rem !important;
        line-height: 1.25 !important;
    }
    .product-related-products-block .vertical-product-card__price-item,
    .product-related-products-block .horizontal-product-card__price-item,
    .product-recommendations .vertical-product-card__price-item,
    .product-recommendations .horizontal-product-card__price-item {
        font-size: 1.15rem !important;
    }
    .product-related-products-block .vertical-product-card__old-price-item,
    .product-related-products-block .horizontal-product-card__old-price-item,
    .product-recommendations .vertical-product-card__old-price-item,
    .product-recommendations .horizontal-product-card__old-price-item {
        font-size: 1.05rem !important;
    }
    .product-related-products-block .product-card__rating--gold .rating__count,
    .product-recommendations .product-card__rating--gold .rating__count {
        font-size: 0.95rem !important;
    }
    .product-related-products-block .product-card__rating--gold .rating__star,
    .product-recommendations .product-card__rating--gold .rating__star {
        width: 1.05rem !important;
        height: 1.05rem !important;
    }
}

.body-grey-color {
    color: #808080 !important;
}

.product-card__price {
    margin: 0;
}

.btn--gold-outline {
    position: relative;
    z-index: 1;
    background: transparent;
    border: none;
    box-shadow: none;
}

.btn--gold-outline::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: var(--gold-gradient-border);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.btn--gold-outline span {
    position: relative;
    z-index: 1;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn--gold-outline:hover,
.btn--gold-outline:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.calorie-calculator-img {
    border-radius: 16px;
}

/* rich text global changes */

.rich-text__text-wrapper {
    margin: 10px 0px;
    row-gap: 20px;
}
.rich-text__caption,
.rich-text__heading,
.rich-text__text-wrapper {
    margin: 10px 0;
}

.rich-text__heading + .rich-text__text-wrapper {
    margin-top: 10px;
}

/* end rich text global changes */

product-media-carousel {
    position: relative;
}

.product-carousel__on-image-badges {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
}

.footer__policies {
    display: none;
}

.cart-item__info {
    padding-right: 5.6rem;
}

.pill {
    border-radius: 1000px;
    padding: 1.8rem 2.4rem;
    background-color: #f5f5f5;
    border: double 2px transparent;
}
.pill--solid:hover {
    border: 2px solid #f5f5f5 !important;
}
.pill__label {
    line-height: 100%;
    color: #000;
    font-family: var(--cn-font-display);
    font-size: 14px;
    font-weight: 600;
}
.pill.selected {
    background-color: #f5f5f5;
}

/* Style for pills with images */
.pill--with-image {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.2rem 2rem 0.2rem 0.2rem;
}

.pill--with-image .pill__swatch {
    width: 48px;
    height: 48px;
    border-radius: 1200px;
    object-fit: cover;
}

.product-variant-picker__option-label {
    font-family: var(--cn-font-display);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px !important;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 100%;
}

.pill--solid.selected[no-available] {
    color: #000;
}

.pill--solid.selected[no-available] .pill__label::before {
    background: #000;
}

.header__grid--3[fit-nav] {
    grid-template-columns: 1fr auto 1fr;
}

.product-card__btn {
    background: #1a1a1a;
}

.input-btn {
    min-width: 5.6rem;
    min-height: 5.6rem;
}

.input--large {
    min-height: 5.6rem;
}

.LoyaltyWidget-prefix .R-LauncherButton {
    z-index: 8 !important;
}

.pill--solid.selected {
    position: relative;
    z-index: 1;
    color: #000;
    background: #f5f5f5;
    border: double 2px transparent !important;
    background-image:
        linear-gradient(#f5f5f5, #f5f5f5), var(--gold-gradient-border);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.product-price__current-price {
    font-family: var(--cn-font-display) !important;
    font-weight: 700;
}
/* Compare at price (doorgestreept) — grijs doorgehaald zoals in de cart.
   Theme zet text-decoration-color naar rood via --gsc-product-highlight-
   price-color; we overrulen zowel text- als line-color naar grijs. */
.product-price__compare-at-price,
.product-card__price-compare-at,
.product-price__old-price,
.product-card__price-item--compare-at,
.product-card__price-item-old,
.product-card__price-item-old--highlight-sale,
.vertical-product-card__old-price-item,
.vertical-product-card__old-price-item--highlight-sale,
.horizontal-product-card__old-price-item,
.horizontal-product-card__old-price-item--highlight-sale,
[data-compare-at-price] {
    font-family: var(--cn-font-display) !important;
    font-weight: 400 !important;
    color: var(--cn-price-color, #444) !important;
    opacity: 0.5 !important;
    text-decoration-line: line-through !important;
    text-decoration-color: var(--cn-price-color, #444) !important;
}

.product-thumbnail-carousel-mobile__thumb-image,
.product-thumbnail-carousel-mobile__carousel-viewport,
.product-thumbnail-carousel-mobile__thumb:before {
    border-radius: 0.5rem;
}

.vertical-product-card__title {
    text-transform: none;
}

.container--with-aside-paddings .product-mobile-media {
    padding-left: 2rem;
    padding-right: 2rem;
}

.load-button-pagination__btn,
.btn--outline {
    position: relative;
    z-index: 1;
    color: rgba(var(--gsc-text-color), 1);
    background: var(--gsc-background-color-100);
    border: double 2px transparent;
    background-image:
        linear-gradient(
            var(--gsc-background-color-100),
            var(--gsc-background-color-100)
        ),
        var(--gold-gradient-border);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.LoyaltyFullpage-prefix .R-ContentSection {
    padding-left: unset !important;
    padding-right: unset !important;
}

.drawer-menu__list-body > a {
    font-weight: 400;
}

.collection-hero__content-wrap,
collection-hero__content {
    width: 100%;
}

#reviews_fade {
    z-index: 99999 !important;
    padding-top: 11rem !important;
}

.cart-drawer-subtotal__tax-note {
    font-size: 10px;
}

.cart-drawer-subtotal__totals {
    font-size: 16px;
    font-weight: 500;
}

.cart-drawer-subtotal__subtotals {
    margin-bottom: 1rem;
}

.cart-drawer-subtotal__sale-item {
    color: #ff3a3a;
}

.cart-drawer-subtotal__sale-label-amount {
    font-weight: 500;
}

.shop__products-grid {
    row-gap: 16px;
}

.navigation-buttons__button-title {
    font-family: commuters sans;
    font-weight: 600;
}

.article-card__title {
    font-size: 16px;
}

.caption2 {
    font-family: var(--cn-font-display);
    font-weight: 700;
    font-size: 14px;
}

.collection__tab-name {
    font-family: var(--cn-font-display);
}

.collection-hero__products-count {
    font-family: var(--cn-font-display);
}

.drawer-menu__menu-item--medium {
    font-weight: 500;
}

.kl-private-reset-css-Xuajs1 h1 {
    line-height: unset;
}

.header__dropdown-backdrop {
    z-index: -1;
}

.LoyaltyFullpage-prefix .R-TextHeading--xs {
    font-size: 1.5em !important;
    font-family: toxigenesis !important;
    text-transform: uppercase !important;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
}

.LoyaltyFullpage-prefix * {
    stroke-width: 1px !important;
}

.LoyaltyFullpage-prefix .R-ContentCard {
    background-color: #f5f5f5 !important;
    border-radius: 16px !important;
    border: none !important;
    padding: 8px 20px !important;
}

.LoyaltyFullpage-prefix .R-ContentSection {
    padding: 0 !important;
}

.LoyaltyFullpage-prefix .R-Button--primary,
.R-Button--secondary {
    background: var(--gold-gradient) !important;
    color: #fff;
    border: none !important;
    border-radius: 12px !important;
    font-family: var(--cn-font-display) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* PDP quantity and button on one line */
.product-form {
    -ms-flex-flow: column;
    flex-flow: column;
    gap: 1.2rem;
}
.flex {
    display: flex;
    gap: 1.2rem;
}
.product-quantity__wrap {
    border: rgba(0, 0, 0, 0.1) 2px solid;
    border-radius: 1.2rem;
    padding: 0 2rem;
}
.product-form__btns {
    width: 100%;
}
quantity-btn[disabled] .quantity__btn-icon,
quantity-btn[disabled] .quantity__btn-icon svg {
    opacity: 0.2;
}
.quantity__input {
    font-family: commuters sans;
}
.product-form__btns-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-form__btn-wrapper,
.product-form__btns,
.product-form__btns-wrapper {
    width: 100%;
}
.klaviyo-bis-container {
    width: 100%;
    margin-top: 0.5rem;
}

.klaviyo-bis-container .button {
    width: 100% !important;
    display: block !important;
}

/* Style voor Klaviyo back in stock button */
.klaviyo-bis-trigger {
    width: 100% !important;
    margin-top: 0.5rem !important;
}

/* PDP stock block */
.stock-feature-section {
    background-color: var(--gsc-foreground-color-100);
    padding: 1.4rem 1.4rem 0.4rem 1.4rem;
    border-radius: 1rem 1rem 0 0;
}
.stock-feature-section span,
.stock-feature-section .inventory-lines p {
    color: #000; /* Fallback for older browsers */
    color: rgba(0, 0, 0, 0.5);
    font-size: 1.2rem;
    font-weight: 500;
    font-family: commuters sans;
}
.stock-feature-section hr {
    background-color: rgba(0, 0, 0, 0.1);
    border: none;
    height: 1px;
}

.stock-feature-section .inventory-lines {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin: 0 0 1.2rem 0;
}

.stock-feature-section .inventory-lines div {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}
.stock-feature-section .inventory-lines div div {
    width: 1.8rem;
}
.product__payment-icons,
.stock-feature-section,
.product-content-tab {
    margin-top: 2.4rem;
}
.product__payment-icons img {
    margin-right: 0.8rem;
}
.product__payment-icons img:last-of-type {
    margin-right: 0;
}

.custom-app-block.custom-app-block--inside-product-section:has(
        .rio-withoutBranding
    ) {
    margin-top: 0;
    background-color: var(--gsc-foreground-color-100);
    border-radius: 0 0 1rem 1rem;
}

@media screen and (max-width: 768px) {
    .product-quantity__wrap {
        padding: 0 0.5rem;
    }
}

.gold-line {
    background: linear-gradient(
        278.1deg,
        #44351c -6.22%,
        #9a722e 6.42%,
        #ffca70 49.38%,
        #9a722e 62.37%
    );
    height: 2px;
    width: 100%;
}

.cart-item__checkmark-with-chevron {
    display: none;
}



.bogos-progressing-bar-view {
    padding: 2rem !important;
}

.bogos-progress-bar-container .bogos-progress-fill,
.bogos-progress-bar-container .bogos-progress-goal-item.bogos-active,
.bogos-progress-success-label {
    background: var(--gold-gradient) !important;
}
.bogos-progress-success-label {
    font-weight: 400 !important;
    color: #fff !important;
    padding: 4px 8px !important;
}

/* Hide progress bar when cart is empty */
.bogos-progressing-bar-view:has(+ .cart-custom-items .cart-custom-empty),
.cart-custom-items:has(.cart-custom-empty) ~ .bogos-progressing-bar-view {
    display: none;
}

.bogos-progress-count-down-message {
    font-family: var(--cn-font-display);
    font-size: 14px;
    font-weight: 700 !important;
    text-decoration: none;
}

.bogos-progress-goal-description {
    opacity: 0.5;
    color: black;
}
.bogos-progress-goal-title {
    color: black;
    font-weight: 400 !important;
    opacity: 0.7;
}

/* Popup product titles styling */
.kaching-bundles__choose-product__product-title {
    text-transform: uppercase;
    font-family: var(--cn-font-accent) !important;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.kaching-bundles .kaching-bundles__choose-product__product {
    flex-direction: row !important;
}

@media (max-width: 768px) {
    .kaching-bundles .kaching-bundles__choose-product__product {
        flex-direction: column !important;
    }
}

/* Mobile: review-bar in de gouden-hero banner verbergen. `!important`
   + dubbele class-selector om de `display: block` van de --clickable
   variant (gouden-hero.css) te overrulen. */
@media (max-width: 768px) {
    body .custom-reviews-io-rating-bar-wrapper,
    body .custom-reviews-io-rating-bar-wrapper.custom-reviews-io-rating-bar-wrapper--clickable {
        display: none !important;
    }
}

.custom-reviews-io-rating-bar-wrapper {
    position: absolute;
    top: 2.4rem;
    right: 2.4rem;
    width: 140px;
    z-index: 3;
}
.custom-reviews-io-rating-bar {
    background-color: white;
    padding: 1.2rem;
    border-radius: 1.2rem;
    z-index: 2;
    position: relative;
}

.custom-lower-rating-bar {
    margin: 0 auto;
    display: flex;
    z-index: 1;
    padding: 22px 0 10px 0;
    transform: translateY(-12px);
    background-color: black;
    border-radius: 0 0 1.2rem 1.2rem;
    position: relative;
}
.custom-lower-rating-bar img {
    margin: 0 auto;
    width: 87px;
}
.custom-reviews-io-rating-bar .RatingBarWidget-prefix .R-RatingStars {
    margin-left: 10px !important;
}
.custom-reviews-io-rating-bar .R-PlatformIcon {
    display: none !important;
}
.custom-reviews-io-rating-bar .RatingBarWidget__inner {
    background-color: white !important;
}

.custom-reviews-io-rating-bar .cssVar-reviewText {
    opacity: 0.5;
}

.custom-reviews-io-rating-bar
    .RatingBarWidget-prefix
    .R-RatingStars
    .R-RatingStars__stars
    .stars__icon {
    color: black !important;
    -webkit-text-fill-color: black !important;
}
.custom-reviews-io-rating-bar .RatingBarWidget-prefix .R-TextBody {
    color: black !important;
    text-align: center;
    font-size: 10px;
}

/* Hide only the Klaviyo-injected container/extra button — never the
   native ATC. The native ATC stays the same element in all states and
   routes its click to the hidden Klaviyo BIS button via JS. */
.klaviyo-bis-container,
#klaviyo-bis-button-container {
    display: none !important;
}
.klaviyo-bis-trigger:not(button[name="add"]):not(.product-form__btn):not(.cn-klaviyo-bis-anchor) {
    display: none !important;
}

#klaviyo-bis-button-container {
    margin-bottom: 0 !important;
}
#klaviyo-bis-button-container button {
    background: var(--gold-gradient) !important;
    color: #fff;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-family:
        Commuters Sans,
        sans-serif !important;
    padding: 0.8rem 3.2rem;
    border-radius: var(--gsc-button-radii, 0);
    font-size: var(--gsc-button-font-size) !important;
    line-height: var(--gsc-button-line-height) !important;
    width: calc(100% - 6.4rem) !important;
}

/* Stable ATC + quantity height across all contexts (PDP, quick-view on PDP,
   quick-view on collection). The 2-line "Voeg toe aan winkelwagen" is the
   tallest rendered state — lock to that so "Uitverkocht" (1-line) doesn't
   shrink the button. One source of truth, no JS measurements needed. */
/* Lock ATC + quantity wrap to a fixed height so they always match on
   the PDP. min-height alone wasn't enough — the quantity wrap was
   growing to ~104 px because its inner label/component combo forced
   it past the 69 px floor while the ATC stayed at its natural ~72 px.
   Use `height` (fixed) with !important so both are exactly the same. */
.product-form__btn,
.product-form__btn-wrapper,
.product-form__btns .product-form__btn-wrapper > button {
    min-height: var(--cn-product-btn-min-height) !important;
    height: var(--cn-product-btn-min-height) !important;
}
.product-quantity__wrap,
quantity-component:not(.cart-item-quantity),
.product-quantity-buy-wrapper .product-quantity__wrap {
    min-height: var(--cn-product-btn-min-height) !important;
    height: var(--cn-product-btn-min-height) !important;
    box-sizing: border-box;
}

/* Hide the "Aantal" label inside the quantity wrap — it's what was
   pushing the wrap taller than the ATC button. The +/- buttons are
   self-explanatory. Visually-hidden (not display:none) so the label
   stays in the a11y tree and screen readers + axe-core associate it
   with the input via the for-attribute. */
.product-quantity__wrap > .product-quantity__label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* When the quantity selector + ATC sit on the same flex row (combined
   "Quantity + Buy" block), force both flex items to stretch so neither
   side wins over the other. */
.product-quantity-buy-wrapper .flex,
.product-quantity-buy-wrapper > .flex {
    align-items: stretch;
}

.product-form__btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Variant-level production-date disclaimer — rendered between variant picker
   and ATC when a variant has custom.date_notice metafield set. */
.product-date-notice {
    margin: 1.8rem 0 1.2rem;
}
.product-date-notice__item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.9rem 1.1rem;
    background: rgba(215, 184, 101, 0.08);
    border: 1px solid rgba(215, 184, 101, 0.35);
    border-left: 3px solid #D7B865;
    border-radius: 0.6rem;
    font-family: var(--cn-font-display);
    font-size: 1.3rem;
    line-height: 1.45;
    color: rgba(var(--gsc-text-color), 1);
}
.product-date-notice__item[hidden] {
    display: none;
}
.product-date-notice__icon {
    flex: 0 0 auto;
    color: #9B7232;
    display: inline-flex;
    align-items: center;
    padding-top: 0.15rem;
}
.product-date-notice__icon svg {
    width: 1.6rem;
    height: 1.6rem;
}
.product-date-notice__text {
    flex: 1 1 auto;
}
.product-date-notice__text strong {
    font-weight: 600;
    color: #1a1a1b;
}

/* Product-level disclaimer (rich text) — mirrors the date-notice look but is
   product-wide/static. See snippet product-disclaimer.liquid. */
.product-disclaimer {
    margin: 1.8rem 0 1.2rem;
}
.product-disclaimer__item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.9rem 1.1rem;
    background: rgba(215, 184, 101, 0.08);
    border: 1px solid rgba(215, 184, 101, 0.35);
    border-left: 3px solid #D7B865;
    border-radius: 0.6rem;
    font-family: var(--cn-font-display);
    font-size: 1.3rem;
    line-height: 1.45;
    color: rgba(var(--gsc-text-color), 1);
}
.product-disclaimer__icon {
    flex: 0 0 auto;
    color: #9B7232;
    display: inline-flex;
    align-items: center;
    padding-top: 0.15rem;
}
.product-disclaimer__icon svg {
    width: 1.6rem;
    height: 1.6rem;
}
.product-disclaimer__text {
    flex: 1 1 auto;
}
/* Rich text (via metafield_tag → wrapped in .metafield-rich_text_field):
   keep the block compact and on-brand. */
.product-disclaimer__text .metafield-rich_text_field { display: contents; }
.product-disclaimer__text p { margin: 0; }
.product-disclaimer__text p + p { margin-top: 0.6rem; }
.product-disclaimer__text ul,
.product-disclaimer__text ol { margin: 0.4rem 0 0; padding-left: 1.6rem; }
.product-disclaimer__text strong { font-weight: 600; color: #1a1a1b; }
.product-disclaimer__text a { text-decoration: underline; }

/* Prevent variant-change flicker on the ATC + quantity selector.
   Theme's updateSection briefly marks the button as disabled + loading
   while it fetches new HTML. Delaying the visual state change by ~250ms
   hides the flash for sub-300ms fetches. */
.product-form__btn,
.product-form__btn[disabled],
.product-form__btn.loading {
    transition: opacity 180ms ease, background-color 180ms ease, color 180ms ease, filter 180ms ease !important;
}
.product-form__btn.loading > span[data-button-text],
.product-form__btn.loading > span {
    transition: opacity 120ms 250ms ease;
}
.product-form__btn.loading .loading-spinner.btn__loading-spinner {
    opacity: 0 !important;
    transition: opacity 120ms 250ms ease;
}
.product-form__btn.loading.loading-visible .loading-spinner.btn__loading-spinner {
    opacity: 1 !important;
}
/* Quantity selector: smooth disabled state */
quantity-component,
quantity-btn,
.product-quantity {
    transition: opacity 180ms ease !important;
}

/* Smaak Info Label */
.smaak-info-label {
    display: none; /* Hidden by default, shown via JS */
    align-items: center;
    gap: 0.4rem;
    color: #000;
    font-family: var(--cn-font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    padding: 0;
    border: none;
    background: none;
    border-bottom: 2px solid;
    border-image: var(--gold-gradient-border) 1;
    border-radius: 0;
    margin-top: -4px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.15s ease;
    white-space: nowrap;
    max-width: 60%;
}
.smaak-info-label svg {
    position: relative;
    top: -1px;
}
@media (hover: hover) {
    .smaak-info-label:hover {
        transform: translateY(-2px);
    }
}


/* Prevent background scroll when quick view is open */
.quick-view.is-opened .quick-view__body {
    overscroll-behavior: contain;
}

/* ============================================================
   QUICK VIEW ALS DRAWER

   Opbouw van het thema: .quick-view (vaste laag over de pagina) >
   .quick-view__body > .quick-view__content > .product__content, met daarin
   het zichtbare paneel .product__info-wrapper (48rem, volle hoogte). Het
   losse desktop-mediavlak stond naast dat paneel; dat is uit de markup
   gehaald en de carousel staat nu binnen het paneel, boven .product__info.

   Deze regels maken van dat paneel dezelfde drawer als de custom cart:
   flush tegen de randen, geen afronding, een kolom die scrollt.
   ============================================================ */
@media screen and (min-width: 769px) {
    .product-information-drawer {
        width: 560px;
        max-width: 90vw;
    }

    /* De round-style toont drawers als zwevende kaart met marge rondom; de
       custom cart staat flush. Dit was het gat bovenaan. */
    body.round-style .quick-view__body {
        padding: 0;
    }

    /* De drawer even breed als het paneel dat je ziet.

       Het thema geeft .quick-view__body-wrapper 85.6rem en .quick-view__body
       daarbinnen 100%, terwijl ons paneel 56rem is. Die ~30rem verschil was
       een doorzichtige maar wél klikbare strook links naast de drawer: de
       hele vaste laag staat in geopende stand op pointer-events: all, dus
       daar kwam de klik binnen bij de drawer in plaats van bij de
       achtergrondlaag die sluit. Vandaar de dode zone er direct naast.

       Liever de doos gelijktrekken aan wat zichtbaar is dan met
       pointer-events sleutelen: nu is alles buiten het paneel ook echt
       buiten de drawer, en klopt de klikzone vanzelf. */
    .quick-view .quick-view__body-wrapper {
        width: 56rem;
        max-width: 100%;
    }

    /* Het paneel: geen afgeronde hoeken (die kwamen uit --gsc-sidebar-radii)
       en een kolom met de media boven de productinfo. Iets breder dan de
       cart-drawer (48rem): daar staan alleen regels onder elkaar, hier moeten
       smaakknoppen, aantal en de toevoegknop naast elkaar passen. */
    .quick-view .product__info-wrapper {
        display: flex;
        flex-direction: column;
        /* Vaste maat, niet 100%: binnen .product__content zit een element dat
           breder uitvalt (de mediacarousel rekent met een eigen slidebreedte),
           en dan rekt een percentage daarin mee en steekt het paneel links
           buiten de drawer. Dezelfde 56rem als de wrapper hierboven, dus doos
           en paneel vallen samen. */
        width: 56rem;
        max-width: 100%;
        border-radius: 0;
        /* Niet vastzetten op 100%: dan is het paneel precies zo hoog als de
           drawer en ziet de scrollcontainer de echte inhoudshoogte niet.
           Bij een lang product (bundels met meerdere keuzevelden) viel het
           laatste stuk - de goudstaven-regel onder de knop - daardoor weg.
           min-height houdt het paneel bij korte producten wel schermvullend. */
        height: auto;
        min-height: 100%;
    }

    /* De scrollcontainer van de drawer.

       Het thema zet .quick-view__content op overflow: hidden - passend bij
       de oude opzet, waar de productinfo zelf scrollde. In deze drawer
       scrollt de hele kolom, dus zonder deze regels wordt alles onder de
       schermrand simpelweg afgekapt in plaats van bereikbaar: bij bundels
       viel de goudstaven-regel onder de knop weg. min-height: 0 is nodig
       omdat een flex-item anders niet kleiner wil worden dan zijn inhoud
       en er dus nooit iets te scrollen valt. */
    .quick-view__content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* De carousel is door het thema alleen voor mobiel bedoeld en daar op
       display: none gezet. In deze drawer is het het enige mediablok. */
    .quick-view .quick-view__drawer-media,
    .quick-view .quick-view__drawer-media .product-media-carousel-mobile {
        display: block;
    }

    /* Eén scrollcontext: de kolom zelf (.quick-view__content). Liet ik ook
       .product__info scrollen, dan werd de smaak-dropdown afgekapt zodra hij
       openklapte — die hangt absoluut onder het keuzeveld en valt buiten een
       scrollend blok. Nu kan hij vrij over de rest van de kolom vallen. */
    .quick-view .product__info {
        flex: 1 1 auto;
        height: auto;
        overflow: visible;
        margin-top: 2.4rem;
        /* Lucht onder de toevoegknop: zonder dit plakt hij bij een kort
           product tegen de onderrand van de drawer. */
        padding-bottom: 2rem;
    }
}

/* Mediablok in de drawer.

   De carousel rendert alle productfoto's en toont er één tegelijk; bij een
   andere smaak scrollt de variant-JS naar de bijbehorende slide. Die slides
   moeten dus allemaal blijven bestaan - verbergen breekt precies die
   koppeling. Alleen de bolletjesrij is weg; vijftien bolletjes zegt niets
   in een drawer van deze maat.

   De hoogte staat op de .shape-wrapper en niet op de <img>: die wrapper
   bepaalt de hoogte via padding-bottom (aspect-ratio-truc) en de afbeelding
   ligt daar absoluut in. Een hoogte op de img alleen deed dus niets. */
.quick-view__drawer-media {
    --qv-media-height: 20rem;
    /* Bovenmarge van dit blok; de badge zit binnen de carousel en begint dus
       lager dan de sluitknop, die aan de drawer hangt. Hiermee compenseren
       we dat verschil zodat beide op dezelfde hoogte liggen. */
    --qv-media-pad: 2rem;

    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 0;
    padding: 2rem 0;
    background: #f5f5f5;
}

/* Badge linksboven, verticaal gecentreerd met het kruisje rechtsboven.

   Niet met dezelfde top-waarde: de chips zijn lager dan de ronde sluitknop,
   dus met een gelijke bovenkant liggen hun middens alsnog uit elkaar. De
   badge-rij krijgt daarom exact de hoogte van die knop (3.6rem) en centreert
   de chips daarin — dan vallen de middens samen, ongeacht hoe hoog een chip
   toevallig is. */
/* Meerdere tags onder elkaar in plaats van naast elkaar: naast elkaar lopen ze
   op een smal scherm tot onder de sluitknop door.

   De vaste hoogte wordt een min-height. Bij één chip verandert er niets — die
   blijft door justify-content: center midden in die 3.6rem staan en dus op de
   hoogte van de ronde sluitknop. Staan er meer, dan groeit de kolom vanaf de
   bovenkant naar beneden en heeft centreren geen effect meer. */
.quick-view__drawer-media .product-carousel__on-image-badges {
    top: calc(2.8rem - var(--qv-media-pad, 0rem));
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: auto;
    min-height: 3.6rem;

    /* Linkerrand gelijk aan die van de producttitel eronder. Die titel staat
       tegen de padding van .quick-view .product__info aan: 4rem vanaf 768px
       (bundle.css) en 1.6rem daaronder (de mobiele regel verderop in dit
       bestand). Wijzigt een van die twee, dan moet deze mee. */
    left: 4rem;
}

@media screen and (max-width: 768px) {
    .quick-view__drawer-media .product-carousel__on-image-badges {
        left: 1.6rem;
    }
}

.quick-view__drawer-media .product-media-carousel-mobile__dots-carousel-container,
.quick-view__drawer-media .product-media-carousel-mobile__thumbs-wrap {
    display: none;
}

.quick-view__drawer-media .product-media-carousel-mobile__slide .shape {
    height: var(--qv-media-height);
    padding-bottom: 0;
}

.quick-view__drawer-media .product-media-carousel-mobile__slide img {
    object-fit: contain;
}

/* Mobiel: de foto vult een vierkant over de volle breedte.

   Op desktop staat het beeld vrij in een grijs vlak (contain) omdat het paneel
   daar breed is en een vierkant beeld de halve drawer zou vullen. Op mobiel is
   de drawer schermbreed: daar oogt een uitgesneden vierkant rustiger dan een
   losse foto met grijze randen ernaast, zeker bij kledingfoto's die staand en
   smal zijn. */
@media screen and (max-width: 768px) {
    .quick-view__drawer-media {
        padding: 0;
        --qv-media-pad: 0rem;
    }

    .quick-view__drawer-media .product-media-carousel-mobile__slide .shape {
        height: auto;
        aspect-ratio: 1 / 1;
        padding-bottom: 0;
    }

    /* Contain en niet cover: bij cover wordt een staande productfoto in een
       vierkant kader flink ingezoomd en valt de bovenkant van de verpakking
       weg. Het vierkant blijft, de foto past er nu helemaal in. */
    .quick-view__drawer-media .product-media-carousel-mobile__slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Zelfde lucht tussen foto en titel als op desktop; die marge zat in
       de desktop-media-query en gold hier dus niet. */
    .quick-view .product__info {
        margin-top: 2rem;
    }

    /* De kop met de sluitknop stond hier in de flow en duwde de foto naar
       beneden — dat was de witte strook bovenaan. Hij ligt nu over de foto
       in de rechterbovenhoek, zodat het beeld tegen de bovenrand van de
       drawer begint. */
    .quick-view .product__info-wrapper {
        position: relative;
    }

}


/* Close button is anchored to the top-right of the quick-view drawer.
   The <quick-view> custom element itself is position:fixed (per theme)
   which is the positioning context we need — ensure no inner wrapper
   becomes position:relative and steals the scope. */
.quick-view .quick-view__body,
.quick-view .quick-view__body-wrapper {
    position: static;
}
.quick-view__header {
    height: 0;
    min-height: 0;
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 5;
}
/* Desktop: anchor the close button to the outer drawer card. The theme
   makes .quick-view .product__info-wrapper position:relative in a
   (min-width: 768px) media query — override with higher specificity so
   the absolute close button scopes to .quick-view__body (full card). */
/* ------------------------------------------------------------
   Sluitknop

   De markup bevat er twee: .quick-view__header--mobile ligt als losse laag
   over de drawer, .quick-view__header--desktop staat in het paneel zelf en
   plakt daardoor aan het grijze mediavlak. We houden de zwevende variant
   over — die blijft op elke breedte netjes in de rechterbovenhoek liggen,
   ook als het beeld van hoogte verandert.
   ------------------------------------------------------------ */
.quick-view .quick-view__header--desktop {
    display: none;
}

.quick-view .quick-view__body {
    position: relative;
}

.quick-view .quick-view__header--mobile {
    display: flex;
    justify-content: flex-end;
    /* Het thema zet `align-items: center` op .quick-view__header. Deze balk is
       0 hoog, dus de knop werd op die nullijn gecentreerd en stak er een halve
       knophoogte bovenuit: `top` was hier het midden van de knop, terwijl het
       bij de badge-rij links de bovenkant is. Vandaar dat beide op 2.8rem
       stonden en er toch 18px verschil zat. Met flex-start telt `top` op
       allebei als bovenkant. */
    align-items: flex-start;
    position: absolute;
    /* Strak in de hoek: 1.2rem van de rechterrand en iets lager dan de
       bovenrand, zodat de knop niet tegen de rand van de drawer plakt en
       op gelijke hoogte ligt met de badge links. */
    top: 2.8rem;
    right: 0;
    left: 0;
    height: 0;
    min-height: 0;
    /* Gelijk aan de padding van .quick-view .product__info, zodat de
       rechterkant van het kruisje op dezelfde lijn eindigt als de
       toevoegknop eronder. 4rem vanaf 768px (bundle.css), 1.6rem daaronder
       (de mobiele regel verderop in dit bestand). */
    padding: 0 4rem;
    z-index: 5;
}

@media screen and (max-width: 768px) {
    .quick-view .quick-view__header--mobile {
        padding: 0 1.6rem;
    }
}

/* Wit schijfje onder het kruisje: het ligt op de foto en moet ook op een
   donkere afbeelding leesbaar blijven. Stond alleen in de mobiele media
   query, waardoor desktop een kaal kruisje hield. */
.quick-view .quick-view__close-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    /* Rechthoekig in plaats van rond: zo sluit het vlak aan op de rest van de
       drawer (de tags links, de maatknoppen en de toevoegknop hebben ook een
       rechthoek met afgeronde hoeken) en loopt de rechterkant zichtbaar in
       één lijn met die knop onderin. */
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
}
/* Geen padding boven de kolom: in de drawer begint het paneel met het
   mediablok, en die ruimte las als een gat boven de foto. */
.quick-view__content,
.quick-view .product__info-wrapper {
    padding-top: 0;
}
@media screen and (max-width: 768px) {
    /* Zelfde lucht onder de toevoegknop als op desktop, plus de safe-area van
       telefoons met een home-indicator. */
    .quick-view .product__info {
        padding: 0 1.6rem calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
    }
    .quick-view .product__info-wrapper {
        padding-top: 0 !important;
    }
    .quick-view__content {
        padding-top: 0 !important;
    }
    .quick-view .product {
        padding: 0 !important;
    }
    .quick-view .product__info .buy-buttons {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: 1.2rem 0;
        z-index: 2;
    }
    /* De regels die hier stonden - 4.8rem padding boven de foto en een
       close-knop op right: 0 !important - hoorden bij de oude quick-view,
       waar het beeld lager begon en de knop erboven zweefde. In de drawer
       begint het beeld tegen de bovenrand en staat de knop erop; die
       padding gaf het gat bovenaan en die right: 0 duwde het kruisje
       tegen de schermrand. */
}

.product-variant-picker__list {
    row-gap: 1.4rem !important;
    display: flex !important;
    flex-direction: column !important;
}
.product-variant-picker__list .smaak-variant {
    order: -1;
}

.smaak-info-label__flavor {
    font-weight: 400;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 480px) {
    .smaak-info-label {
        font-size: 14px;
        max-width: 55%;
    }
}

.variant-label-flex {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: -4px;
}

.variant-disabled {
    opacity: 0.4;
    text-decoration: line-through;
    pointer-events: none;
}

/* Scrim */
#smaakOverlayScrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 9998;
    margin: 0 !important;
}

#smaakOverlayScrim.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Sheet */
#smaakOverlaySheet {
    position: fixed;
    z-index: 9999;
    background: #fff;
    inset: auto 0 0 0;
    height: 70vh;
    color: #000;
    border-radius: 1rem 1rem 0 0;
    transform: translateY(100%);
    overflow: hidden;
    transition:
        transform 220ms ease,
        height 180ms ease;
    will-change: transform;
    touch-action: none;
    display: grid;
    grid-template-rows: auto 1fr;
    margin: 0 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#smaakOverlaySheet.open {
    transform: translateY(0);
}

#smaakOverlaySheet > * + * {
    margin: 0 !important;
}

@media screen and (min-width: 1025px) {
    #smaakOverlaySheet {
        inset: 0 0 0 auto;
        width: 55rem;
        max-height: 100vh;
        min-height: 100vh;
        height: 100vh;
        border-radius: 0;
        transform: translateX(100%);
        transition: transform 220ms ease;
        overflow: hidden;
        touch-action: auto;
    }

    #smaakOverlaySheet.open {
        transform: translateX(0);
    }
}

/* Drag Bar */
#smaakOverlayDragBar {
    position: relative;
    height: 2.8rem;
    display: grid;
    place-items: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    cursor: ns-resize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

#smaakOverlayDragBar::before {
    content: "";
    display: block;
    width: 13.6rem;
    height: 0.4rem;
    border-radius: 99.9rem;
    background: #d9d9d9;
}

@media screen and (min-width: 1025px) {
    #smaakOverlayDragBar {
        display: none;
    }
}

/* Content */
#smaakOverlaySheet .content {
    overflow: hidden;
    position: static;
    display: flex;
    flex-direction: column;
    padding: 2.2rem 0 0 0;
    height: 100%;
    box-sizing: border-box;
}

/* Header */
#smaakOverlaySheet .smaak-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 0 2rem;
}
#smaakOverlaySheet .menu-panel {
    flex: 1;
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 200px;
}

#smaakOverlaySheet .menu-panel .tab-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: none;
}
#smaakOverlaySheet .menu-panel .tab-content::-webkit-scrollbar { display: none; }

#smaakOverlaySheet .menu-panel .tab-content[data-content="samenstelling"] .smaak-detail {
    padding-bottom: 72px;
}

#smaakOverlaySheet .tab-content[data-content="samenstelling"] table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--cn-font-display);
    font-size: 12px;
    line-height: 1.3;
    table-layout: fixed;
}

#smaakOverlaySheet .tab-content[data-content="samenstelling"] th,
#smaakOverlaySheet .tab-content[data-content="samenstelling"] td {
    padding: 5px 6px;
    text-align: left;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}

#smaakOverlaySheet .tab-content[data-content="samenstelling"] th:first-child,
#smaakOverlaySheet .tab-content[data-content="samenstelling"] td:first-child {
    width: 45%;
}

#smaakOverlaySheet .tab-content[data-content="samenstelling"] th {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(0, 0, 0, 0.5);
    padding: 6px 6px 4px;
}

#smaakOverlaySheet .tab-content[data-content="samenstelling"] tr:last-child td {
    border-bottom: none;
}

#smaakOverlaySheet .tab-content[data-content="samenstelling"] h1,
#smaakOverlaySheet .tab-content[data-content="samenstelling"] h2,
#smaakOverlaySheet .tab-content[data-content="samenstelling"] h3 {
    font-family: var(--cn-font-display);
    font-size: 14px;
    font-weight: 600;
    margin: 4px 0 8px;
}
#smaakOverlaySheet .tab-content[data-content="samenstelling"] h1:first-child,
#smaakOverlaySheet .tab-content[data-content="samenstelling"] h2:first-child,
#smaakOverlaySheet .tab-content[data-content="samenstelling"] h3:first-child {
    margin-top: 0;
}

#smaakOverlaySheet .tab-content[data-content="samenstelling"] .gold-frame {
    padding: 3px;
    border-radius: 12px;
}

#smaakOverlaySheet .tab-content[data-content="samenstelling"] .card_samenstelling {
    border-radius: 10px;
}

#smaakOverlaySheet .tab-content[data-content="samenstelling"] .header {
    padding: 8px 12px 6px;
}

#smaakOverlaySheet .tab-content[data-content="samenstelling"] p {
    font-family: var(--cn-font-display);
    font-size: 12px;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.7);
    margin: 4px 0;
}

#smaakOverlaySheet .smaak-header-flex #smaakOverlayCloseBtn {
    display: block;
}


/* Tab Switch */
#smaakOverlaySheet .tab-switch {
    width: 100%;
    display: grid;
    gap: 1rem;
    background-color: #f5f5f5;
    border-radius: 100px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: center;
    position: relative;
}

#smaakOverlaySheet .tab-switch__button {
    background: none;
    border: none;
    padding: 1.6rem 0;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 220ms ease;
    font-family: var(--cn-font-display);
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    color: #000;
}

#smaakOverlaySheet .tab-switch__button.active {
    color: #000;
}

#smaakOverlaySheet .tab-switch__indicator {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(50% - 0.5rem - 4px);
    height: calc(100% - 4px);
    background: #f5f5f5;
    border: double 2px transparent;
    background-image: linear-gradient(#f5f5f5, #f5f5f5), var(--gold-gradient-border);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: 100px;
    transition: transform 180ms ease;
    z-index: 1;
}

#smaakOverlaySheet
    .tab-switch__button:nth-child(2).active
    ~ .tab-switch__indicator {
    transform: translateX(calc(100% + 1.4rem));
}

/* Smaak Detail */
#smaakOverlaySheet .smaak-detail {
    margin-top: 12px;
    padding: 0 2rem;
}

#smaakOverlaySheet .smaak-detail-main-info {
    padding: 1.2rem;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    background-color: #f5f5f5;
    border-radius: 8px;
    margin: 1.2rem 0;
    min-height: 130px;
    overflow: hidden;
    box-shadow: none;
}
#smaakOverlaySheet .smaak-detail-main-info::before,
#smaakOverlaySheet .smaak-detail-main-info::after {
    display: none;
}

#smaakOverlaySheet .smaak-detail-main-info img {
    min-width: 80px;
    min-height: 80px;
    max-width: 80px;
    max-height: 80px;
    object-fit: cover;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
}

#smaakOverlaySheet .smaak-detail-main-info h3 {
    font-family: var(--cn-font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 100%;
}

#smaakOverlaySheet .smaak-detail-main-info p {
    color: rgba(0, 0, 0, 0.75);
    font-family: var(--cn-font-display);
    font-size: 12px;
    margin-top: 4px;
}
#smaakOverlaySheet .smaaknote-text {
    font-family: var(--cn-font-display);
    font-size: 16px;
    margin-top: 0;
}
#smaakOverlaySheet .smaak-metric[data-meter="smaaknote"] {
    margin-top: 18px;
}
#smaakOverlaySheet .smaak-metric[data-meter="smaaknote"] .smaaknote-text {
    margin-top: -6px;
}

/* Smaak Metrics */
#smaakOverlaySheet .smaak-metric {
    margin-top: 18px;
}

#smaakOverlaySheet .smaak-title {
    font-family: var(--cn-font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 100%;
    padding-bottom: 16px;
    display: block;
}

#smaakOverlaySheet .smaakstijl-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
}

#smaakOverlaySheet .smaakstijl-wrapper div[data-meter-block] {
    border-radius: 2px;
    flex: 1;
    height: 8px;
    background-color: #f5f5f5;
    transition: all 0.2s ease;
}

#smaakOverlaySheet .smaakstijl-wrapper div[data-meter-block].filled {
    height: 10px;
    background: var(--gold-gradient);
    box-shadow: 0 0 10px 0 rgba(255, 169, 40, 0.4);
}

#smaakOverlaySheet .smaak-under-text {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
}

#smaakOverlaySheet .smaak-under-text span {
    font-family: var(--cn-font-display);
    font-size: 12px;
    line-height: 100%;
    opacity: 0.5;
    display: block;
}

/* Bottom Footer */
#smaakOverlaySheet .smaak-bottom-footer {
    padding-top: 10px;
    flex-shrink: 0;
    background-color: white;
    padding-bottom: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 2;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

#smaakOverlaySheet .smaak-bottom-footer .smaak-bottom-footer-title {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    width: 100%;
    padding: 0 2rem;
    margin-bottom: 0;
}

#smaakOverlaySheet .smaak-bottom-footer .smaak-bottom-footer-title p {
    font-family: var(--cn-font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 100%;
    white-space: nowrap;
}

/* Compare Pills */
#smaakOverlaySheet .smaak-compare-wrapper {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 2rem, black calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 2rem, black calc(100% - 2rem), transparent 100%);
}

#smaakOverlaySheet .smaak-compare-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 10px 2rem 0 0;
    scroll-behavior: smooth;
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#smaakOverlaySheet .smaak-compare-pills::-webkit-scrollbar { display: none; }

#smaakOverlaySheet .smaak-compare-pills .smaak-compare-pill:first-child {
    margin-left: 2rem;
}

#smaakOverlaySheet .smaak-compare-pills .smaak-compare-pill:last-child {
    margin-right: 2rem;
}


#smaakOverlaySheet .smaak-compare-pill.pill.pill--large {
    flex-shrink: 0;
    white-space: nowrap;
    min-width: fit-content;
    padding: 0.8rem 1rem !important;
    min-height: auto !important;
    font-size: 12px !important;
    border-radius: 1.2rem !important;
}
#smaakOverlaySheet .smaak-compare-pill img.pill__swatch {
    width: 34px !important;
    height: 34px !important;
    margin: -4px 4px -4px -4px !important;
}

#smaakOverlaySheet .smaak-compare-pill.selected {
    background: #f5f5f5;
    border: double 2px transparent !important;
    background-image:
        linear-gradient(#f5f5f5, #f5f5f5), var(--gold-gradient-border);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

#smaakOverlaySheet .smaak-compare-pill:not(.selected):hover {
    border: 2px solid transparent !important;
}

/* Compare Pills Navigation Arrows */
#smaakOverlaySheet .smaak-bottom-footer-title {
    justify-content: space-between;
}

#smaakOverlaySheet .smaak-compare-arrows {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

#smaakOverlaySheet .smaak-compare-arrow {
    width: 28px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.15);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 150ms ease, border-color 150ms ease;
    opacity: 0.3;
    pointer-events: none;
}

#smaakOverlaySheet .smaak-compare-arrow:hover {
    border-color: rgba(0,0,0,0.4);
}

#smaakOverlaySheet .smaak-compare-arrow.visible {
    opacity: 1;
    pointer-events: auto;
}

#smaakOverlaySheet .smaak-compare-arrow svg {
    width: 12px;
    height: 12px;
    stroke: #000;
    stroke-width: 2;
    fill: none;
}

/* Smaak Lab Report */
#smaakOverlaySheet .smaak-lab {
    margin-top: 24px;
    padding: 0;
    padding-bottom: 20px;
    text-align: left;
}

#smaakOverlaySheet .smaak-lab .smaak-title {
    text-transform: none;
}

#smaakOverlaySheet .smaak-lab__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 20px;
    background: #f5f5f5;
    border: none;
    border-radius: 8px;
    font-family: var(--cn-font-display);
    font-size: 13px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    transition: opacity 150ms ease;
}

#smaakOverlaySheet .smaak-lab__button:hover {
    opacity: 0.75;
}

#smaakOverlaySheet .smaak-lab__button svg {
    flex-shrink: 0;
}

/* Smaak Overlay Variant Selector */
#smaakOverlaySheet .smaak-overlay-variants {
    padding: 0;
    margin-top: 10px;
}

#smaakOverlaySheet .smaak-overlay-variant-label {
    display: block;
    font-family: var(--cn-font-display);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0;
    padding: 0 2rem;
}

#smaakOverlaySheet .smaak-overlay-variant-group {
    margin-bottom: 2px;
    margin-top: 10px;
    overflow: visible;
}

#smaakOverlaySheet .smaak-overlay-variant-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#smaakOverlaySheet .smaak-overlay-variant-pills::-webkit-scrollbar { display: none; }

#smaakOverlaySheet .smaak-overlay-variant-pills .smaak-overlay-variant-pill:first-child {
    margin-left: 2rem;
}

#smaakOverlaySheet .smaak-overlay-variant-pills .smaak-overlay-variant-pill:last-child {
    margin-right: 2rem;
}

#smaakOverlaySheet .smaak-overlay-variant-pill.pill.pill--large {
    min-width: auto !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Smaak Overlay ATC */
#smaakOverlaySheet .smaak-overlay-atc-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 12px auto 0;
    padding: 0 2rem 1.2rem;
    width: 100%;
}

#smaakOverlaySheet .smaak-overlay-qty {
    display: flex;
    align-items: center;
    border: rgba(0, 0, 0, 0.1) 2px solid;
    border-radius: 1rem;
    padding: 0 0.8rem;
    flex-shrink: 0;
    gap: 2px;
}

#smaakOverlaySheet .smaak-overlay-qty__btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}

#smaakOverlaySheet .smaak-overlay-qty__btn svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

#smaakOverlaySheet .smaak-overlay-qty__input {
    width: 36px;
    text-align: center;
    border: none;
    font-family: var(--cn-font-display);
    font-size: 16px;
    font-weight: 600;
    background: transparent;
    -moz-appearance: textfield;
    appearance: textfield;
    touch-action: manipulation;
    pointer-events: none;
}

#smaakOverlaySheet .smaak-overlay-qty__input::-webkit-inner-spin-button,
#smaakOverlaySheet .smaak-overlay-qty__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#smaakOverlaySheet .smaak-overlay-atc {
    flex: 1;
    padding: 0 16px !important;
    min-height: auto !important;
    height: 5.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem !important;
}

#smaakOverlaySheet .smaak-overlay-atc.loading .btn__loading-spinner {
    display: block;
}

#smaakOverlaySheet .smaak-overlay-atc.loading [data-smaak-atc-text] {
    visibility: hidden;
}

@media screen and (max-width: 1024px) {
    #smaakOverlaySheet .smaak-bottom-footer {
        padding-top: 10px;
    }
    #smaakOverlaySheet .smaak-overlay-variants {
        margin-top: 0;
        margin-bottom: 12px;
    }
    #smaakOverlaySheet .smaak-overlay-variant-group {
        margin-bottom: 6px;
    }
    #smaakOverlaySheet .smaak-overlay-variant-label {
        font-size: 14px;
        margin-bottom: 4px;
    }
    #smaakOverlaySheet .smaak-bottom-footer .smaak-bottom-footer-title {
        margin-bottom: 4px;
    }
    #smaakOverlaySheet .smaak-bottom-footer .smaak-bottom-footer-title p {
        font-size: 14px;
    }
    #smaakOverlaySheet .smaak-overlay-atc-row {
        margin-top: 10px;
        padding-bottom: 0.8rem;
        gap: 8px;
    }
    #smaakOverlaySheet .smaak-overlay-atc {
        padding: 10px;
        font-size: 13px;
        white-space: nowrap;
    }
    #smaakOverlaySheet .smaak-overlay-qty {
        padding: 0 0.4rem;
    }
    #smaakOverlaySheet .smaak-overlay-qty__btn {
        padding: 6px;
    }
    #smaakOverlaySheet .smaak-overlay-qty__btn svg {
        width: 14px;
        height: 14px;
    }
}

/* Card fix */
#smaakOverlaySheet .content .card::before {
    background: none;
}

/* Mobile: Always overflow */
.smaak-variant .product-variant-picker__pill-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-top: 10px;
}

.smaak-variant .product-variant-picker__pill-list::-webkit-scrollbar {
    display: none;
}

.smaak-variant .pill {
    flex-shrink: 0;
    white-space: nowrap;
    min-width: fit-content;
    transition: transform 0.15s ease;
}
.smaak-variant > .product-variant-picker__pill-list > .pill {
    padding: 1.3rem 1.6rem;
    min-height: 4.8rem;
}

.smaak-variant .pill__label {
    white-space: nowrap;
}

.smaak-variant .pill__swatch {
    flex-shrink: 0;
}

@media (min-width: 1025px) {
    .smaak-variant .product-variant-picker__pill-list {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

/* Variant selector dropdown trigger */
/* Quick view smaak dropdown — opens downward on all screen sizes */
[data-update-url="false"] .smaak-variant .variant-picker-dropdown {
    display: none !important;
}
[data-update-url="false"] .variant-option-group:not(.variant-option-group--secondary) {
    position: relative;
}
[data-update-url="false"] .variant-option-group:not(.variant-option-group--secondary)[data-dropdown-open] .product-variant-picker__pill-list {
    display: flex !important;
    position: absolute;
    top: 100% !important;
    bottom: auto !important;
    margin-top: 2px;
    left: 0;
    right: 0;
    z-index: 10;
    background: #fff;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 1.2rem;
    padding: 12px;
    max-height: none;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    flex-wrap: wrap;
    gap: 8px;
}
/* In quick view: ensure dropdown opens downward */
quick-view .variant-option-group:not(.variant-option-group--secondary) {
    position: relative;
}

/* Ensure smaak variant group is always visible (even for single-flavor products) */
.smaak-variant.visually-hidden {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    white-space: normal !important;
    border: 0 !important;
}

.smaak-mobile-dropdown {
    display: block;
    margin-top: 10px;
}

.smaak-mobile-dropdown__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 1.3rem 1.6rem;
    min-height: 4.8rem;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 1.2rem;
    background: #f5f5f5;
    cursor: pointer;
    font-family: var(--cn-font-display);
    font-size: 14px;
    font-weight: 600;
    color: #000;
    -webkit-appearance: none;
}

.smaak-mobile-dropdown--static .smaak-mobile-dropdown__trigger,
.smaak-mobile-dropdown[data-disabled] .smaak-mobile-dropdown__trigger {
    cursor: default;
}

.smaak-mobile-dropdown[data-disabled] .smaak-mobile-dropdown__chevron {
    display: none;
}

/* Vaste (keuzeloze) bundel-componenten — read-only rij in dezelfde stijl als
   de echte variant-selectors. Markup: snippets/bundle-fixed-components.liquid */
.variant-option-group--fixed .smaak-mobile-dropdown__trigger {
    cursor: default;
    user-select: none;
}

.variant-option-group--fixed .smaak-mobile-dropdown__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Staat op de plek van de chevron bij de echte selectors */
.bundle-fixed-component__check {
    margin-left: auto;
    margin-right: 4px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #000;
}

/* Standalone container: bundel zonder keuze-opties, waar <variant-picker>
   helemaal niet rendert. */
.product-variant-picker--fixed-only .product-variant-picker__list {
    margin-top: 1.4rem;
}

.smaak-mobile-dropdown__trigger .smaak-mobile-dropdown__chevron {
    margin-left: auto;
    margin-right: 4px;
    width: 16px;
    height: 16px;
    transition: transform 200ms ease;
}


.smaak-mobile-dropdown__swatch {
    width: 38px;
    height: 38px;
    border-radius: 1200px;
    object-fit: cover;
    flex-shrink: 0;
    margin: -8px 0 -8px 4px;
}

/* Shared variant pill styling — PDP, quick view, smaakinfo popup */
.variant-option-group--secondary .product-variant-picker__pill-list,
#smaakOverlaySheet .smaak-overlay-variant-pills {
    display: flex !important;
    gap: 8px;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    padding: 10px 0 0 0;
    margin: 0;
    max-height: none;
    overflow: visible;
}
.variant-option-group--secondary .product-variant-picker__pill-list {
    flex-wrap: wrap;
}

.variant-option-group--secondary .product-variant-picker__pill-list .pill,
#smaakOverlaySheet .smaak-overlay-variant-pill.pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.8rem 1.2rem;
    min-height: 4.4rem;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 1.2rem;
    background: #f5f5f5;
    cursor: pointer;
    font-family: var(--cn-font-display);
    font-size: 13px;
    font-weight: 600;
    color: #000;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Sold-out variant styling — high specificity to override all theme/smaak rules */
.variant-unavailable,
.smaak-variant .variant-unavailable,
.smaak-variant label.variant-unavailable,
.smaak-variant .pill.variant-unavailable,
.variant-selector-popup .variant-unavailable,
.variant-selector-popup__pills .variant-unavailable {
    opacity: 0.5 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}
/* Sold-out selected pills still get gold border but stay grey */
.variant-unavailable.selected,
.smaak-variant .variant-unavailable.selected,
.smaak-variant label.variant-unavailable.selected {
    border: double 2px transparent !important;
    background-image: linear-gradient(#f5f5f5, #f5f5f5), var(--gold-gradient-border) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    opacity: 0.5 !important;
}

/* Strikethrough on sold-out secondary variant pills only — smaak/primary
   pills already communicate sold-out via opacity + sold-out badge, and a
   strike on the smaak swatch label reads as a typo rather than a state. */
.variant-option-group--secondary .pill.variant-unavailable .pill__label,
.variant-option-group--secondary label.variant-unavailable .pill__label {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* INP: :has(input:checked) verwijderd — triggert ancestor selector re-match
   bij elke focus/check binnen de pill-cluster. De variant-picker JS togglet
   al .selected op labels (bundle.js updateLabels), dus de fallback was puur
   defensief en dubbel met de .selected branch hieronder. */
.variant-option-group--secondary .product-variant-picker__pill-list .pill.selected,
.smaak-variant .product-variant-picker__pill-list .pill.selected,
#smaakOverlaySheet .smaak-overlay-variant-pill.pill.selected {
    border: double 2px transparent !important;
    background-image:
        linear-gradient(#f5f5f5, #f5f5f5), var(--gold-gradient-border);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Hide pill list on mobile for smaak variant — shown via dropdown/popup */
@media screen and (max-width: 768px) {
    .variant-option-group:not(.variant-option-group--secondary) .product-variant-picker__pill-list {
        display: none !important;
    }

    [data-update-url="false"] .variant-option-group:not(.variant-option-group--secondary) .product-variant-picker__pill-list .pill {
        margin: 0;
        padding: 0.8rem 1rem !important;
        min-height: auto !important;
        min-width: auto !important;
        font-size: 12px !important;
    }
    [data-update-url="false"] .variant-option-group:not(.variant-option-group--secondary) .product-variant-picker__pill-list img.pill__swatch {
        width: 34px !important;
        height: 34px !important;
        margin: -4px 4px -4px -4px !important;
    }
}

/* Desktop: smaak variant pill list as inline dropdown */
@media screen and (min-width: 769px) {
    .variant-option-group:not(.variant-option-group--secondary) {
        position: relative;
    }

    .variant-option-group:not(.variant-option-group--secondary) .product-variant-picker__pill-list {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 10;
        background: #fff;
        border: 2px solid rgba(0, 0, 0, 0.1);
        border-radius: 1.2rem;
        margin-top: 4px;
        padding: 12px;
        max-height: 300px;
        overflow-y: auto;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        flex-wrap: wrap;
        gap: 8px;
    }

    .variant-option-group:not(.variant-option-group--secondary)[data-dropdown-open] .product-variant-picker__pill-list {
        display: flex !important;
    }

    .variant-option-group:not(.variant-option-group--secondary) .product-variant-picker__pill-list .pill {
        margin: 0;
        padding: 0.8rem 1rem !important;
        min-height: auto !important;
        min-width: auto !important;
        font-size: 12px !important;
    }
    .variant-option-group:not(.variant-option-group--secondary) .product-variant-picker__pill-list img.pill__swatch {
        width: 34px !important;
        height: 34px !important;
        margin: -4px 4px -4px -4px !important;
    }
}

/* Variant selector popup */
.variant-selector-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 9998;
    margin: 0 !important;
}

.variant-selector-scrim.visible {
    opacity: 1;
    pointer-events: auto;
}

.variant-selector-popup {
    position: fixed;
    z-index: 9999;
    background: #fff;
    inset: auto 0 0 0;
    max-height: 60vh;
    color: #000;
    border-radius: 1rem 1rem 0 0;
    transform: translateY(100%);
    transition: transform 220ms ease;
    will-change: transform;
    touch-action: none;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
}

.variant-selector-popup.open {
    transform: translateY(0);
}

.variant-selector-popup__drag-bar {
    position: relative;
    height: 2.8rem;
    display: grid;
    place-items: center;
    cursor: ns-resize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    flex-shrink: 0;
}

.variant-selector-popup__drag-bar::before {
    content: "";
    display: block;
    width: 13.6rem;
    height: 0.4rem;
    border-radius: 99.9rem;
    background: #d9d9d9;
}

.variant-selector-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.6rem 1.2rem;
    flex-shrink: 0;
}

.variant-selector-popup__title {
    font-family: var(--cn-font-display);
    font-size: 16px;
    font-weight: 600;
}

.variant-selector-popup__close {
    padding: 4px;
}

.variant-selector-popup__body {
    overflow-y: auto;
    padding: 0 1.6rem 2rem;
}

.variant-selector-popup__pills {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
}

.variant-selector-popup .variant-selector-popup__pills .pill.pill--large {
    margin: 0;
    padding: 0.4rem 1rem !important;
    min-height: auto !important;
    min-width: auto !important;
    font-size: 12px !important;
}
.variant-selector-popup .variant-selector-popup__pills .pill__swatch {
    width: 28px !important;
    height: 28px !important;
}

/* Force all smaak pills fully visible (never greyed out by theme) — except sold-out ones */
.smaak-variant .pill[no-available]:not(.variant-unavailable) {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.smaak-variant .pill[no-available]:not(.variant-unavailable) .pill__label {
    text-decoration: none !important;
}
.smaak-variant .pill[no-available]:not(.variant-unavailable) .pill__label::before {
    display: none !important;
}
.smaak-variant .pill:not(.variant-unavailable),
.smaak-variant label:not(.variant-unavailable),
.smaak-variant input:disabled + .pill:not(.variant-unavailable),
.smaak-variant input:disabled + label:not(.variant-unavailable),
.smaak-variant label.variant-disabled:not(.variant-unavailable),
.variant-selector-popup .pill:not(.variant-unavailable),
.variant-selector-popup label:not(.variant-unavailable),
.variant-selector-popup input:disabled + .pill:not(.variant-unavailable),
.variant-selector-popup input:disabled + label:not(.variant-unavailable),
.variant-selector-popup label.variant-disabled:not(.variant-unavailable),
.variant-selector-popup__pills .pill:not(.variant-unavailable),
.variant-selector-popup__pills label:not(.variant-unavailable),
.variant-selector-popup__pills input:disabled + .pill:not(.variant-unavailable),
.variant-selector-popup__pills input:disabled + label:not(.variant-unavailable),
.variant-selector-popup__pills label.variant-disabled:not(.variant-unavailable) {
    opacity: 1 !important;
    pointer-events: auto !important;
    text-decoration: none !important;
    color: #000 !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Desktop: hide popup, use inline dropdown instead */
@media screen and (min-width: 769px) {
    .variant-selector-scrim,
    .variant-selector-popup {
        display: none !important;
    }
}

/* ============================================================
   Long-list rendering optimization (off-screen unload)

   Doel: voorkom dat iOS Safari OOM-crasht op /collections/all met
   infinite scroll. content-visibility:auto laat de browser layout
   + paint skippen voor kaarten die ver buiten viewport staan, en
   decoded image-bitmaps van off-screen kaarten worden vrijgegeven
   zodra de browser memory pressure detecteert.

   contain-intrinsic-size geeft een placeholder-hoogte zodat de
   scrollbar stabiel blijft als items ge-skipped worden. De waarde
   is een schatting; na eerste paint onthoudt de browser de echte
   hoogte (auto keyword, browser-support: Safari 18+, Chrome 111+).

   Older browsers zonder content-visibility-support krijgen alleen
   de `contain: layout paint` boost (Safari 14+) — kleinere win
   maar nog steeds nuttig.
   ============================================================ */
.shop__grid-item {
    contain: layout paint;
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
}

@media (max-width: 749px) {
    .shop__grid-item {
        contain-intrinsic-size: auto 380px;
    }
}

/* ============================================================
   Mobile variant-selector popup — pill sizing
   Doel: tap-vriendelijk (≥44px iOS guideline) zonder over-dimensioning.
   ============================================================ */
html body .variant-selector-popup .pill.pill.pill,
html body [data-variant-selector-popup] .pill.pill.pill,
html body .variant-selector-popup label.pill,
html body [data-variant-selector-popup] label.pill {
    padding: 0.8rem 1.4rem !important;
    min-height: 4.4rem !important;
    min-width: 5.6rem !important;
    height: auto !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6rem !important;
    border-radius: 1rem !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

html body .variant-selector-popup .pill .pill__swatch,
html body [data-variant-selector-popup] .pill .pill__swatch {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: transparent !important;
}

html body .variant-selector-popup .pill .pill__label,
html body [data-variant-selector-popup] .pill .pill__label {
    line-height: 1.2 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #0E1311 !important;
}

/* Pill-list: comfortabele spacing zonder overdaad */
html body .variant-selector-popup .product-variant-picker__pill-list,
html body [data-variant-selector-popup] .product-variant-picker__pill-list,
html body .variant-selector-popup .variant-selector-popup__pills,
html body [data-variant-selector-popup] .variant-selector-popup__pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
    padding: 0.8rem 0 !important;
    align-items: stretch !important;
}

html body .variant-selector-popup .variant-selector-popup__body,
html body [data-variant-selector-popup] .variant-selector-popup__body {
    padding: 0.4rem 1.2rem 1.2rem !important;
}

/* ============================================================
   Bundle-app rommel verbergen (cart-page + cart-drawer)

   De bundle/pack-app injecteert at-runtime soms een ongestileerd
   <cart-line-item-item-components> blok (titel-herhaling, "Prijs:",
   "Statiegeld:", "Kosten:" als kale tekst) ONDER een bundel/pack-
   product. Onze .cart-item__option toont die info al netjes onder de
   titel, dus dit app-element is puur dubbel + lelijk. Staat nergens in
   de theme-code (app-injectie), dus globaal + hard verbergen. Tag-naam
   is uniek genoeg om geen legitiem element te raken.
   ============================================================ */
cart-line-item-item-components,
.cart-line-item-item-components,
[class*="cart-line-item-item-components"] {
    display: none !important;
}

/* ============================================================
   Cart-drawer footer zichtbaar houden op iOS Safari / Android Chrome

   Why: De theme zet .cart-drawer op height: 100% (large viewport).
   Op iOS Safari/Android Chrome met zichtbare bottom-toolbar valt het
   onderste stuk van de drawer (= checkout-knop in de footer) onder
   die toolbar weg. Met 100dvh volgt de drawer-hoogte de huidige
   visible viewport, dus de footer schuift mee omhoog wanneer de
   browserbalken verschijnen.

   Scope: alleen mobile (≤768px) — op desktop heeft de drawer geen
   browser-toolbar issue en willen we de theme-default niet raken.
   ============================================================ */
@supports (height: 100dvh) {
    @media (max-width: 768px) {
        html body .cart-drawer {
            height: 100dvh;
        }
    }
}

/* Safe-area padding op de footer zodat content nooit onder de
   home-indicator of iOS bottom-bar zakt, ook niet bij overflow. */
html body .cart-drawer__footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   Zoek-drawer: flush + volledige viewport-hoogte, net als de
   custom cart-drawer.

   Why: de round-style-stijl zet .round-style .search-sidebar op
   padding (var(--gsc-modals-and-header-paddings)) en de body op een
   border-radius, waardoor de zoek-drawer als zwevende kaart mét marge
   rond de rand verschijnt. De custom cart zit juist flush op
   top:0 / height:100vh. Deze override trekt de zoek-drawer gelijk:
   geen inset-marge, geen afronding → volledige hoogte tot de randen.
   ============================================================ */
html body.round-style .search-sidebar {
    padding: 0 !important;
}
html body .search-sidebar__body {
    border-radius: 0 !important;
}

/* ============================================================
   UITSTEKEND-pill kleiner op MOBILE in de announcement-bar

   Why: De pill (R-TextHeading met "UITSTEKEND" + groene cirkel)
   neemt op smalle schermen te veel horizontale ruimte in de
   announcement-bar, waardoor de rating + sterren + recensie-aantal
   krap komen. Bestaande mobile sticky-cart variant (.cn-sticky-reviews)
   is gescoped en blijft ongemoeid.

   Scope: alleen .announcement-bar (NIET sticky cart, NIET PDP,
   NIET cart-page), alleen ≤768px.
   ============================================================ */
@media (max-width: 768px) {
    /* reviews_bar block (carousel-widget side-header) */
    html body .announcement-bar .cn-reviews-bar .reviews-carousel-widget .CarouselWidget__header .R-TextHeading {
        padding: 0.32rem 0.7rem !important;
        gap: 0.32rem !important;
    }
    html body .announcement-bar .cn-reviews-bar .reviews-carousel-widget .CarouselWidget__header .R-TextHeading::before {
        width: 0.95rem !important;
        height: 0.95rem !important;
    }
    html body .announcement-bar .cn-reviews-bar .reviews-carousel-widget .CarouselWidget__header .cssVar-header__heading {
        font-size: 0.82rem !important;
        letter-spacing: 0 !important;
    }

    /* reviews_widget block (rating-bar.js) — UITSTEKEND-badge */
    html body .announcement-bar .reviews-io-rating-bar-widget [class*="ratingBadge" i],
    html body .announcement-bar .reviews-io-rating-bar-widget [class*="rating-badge" i],
    html body .announcement-bar .reviews-io-rating-bar-widget [class*="badge" i] {
        font-size: 0.82rem !important;
        padding: 0.26rem 0.62rem !important;
    }
}

/* ============================================================
   Statische review-sterren-balk (.cn-rb) — snippet cn-reviews-stars

   Server-side render uit shop-metafields, vervangt de zware Reviews.io
   carousel-widget op announcement-bar, cart-page en cart-drawer.
   Tekstkleur erft van de context (currentColor) zodat 'ie zowel op
   lichte (cart) als donkere (announcement-bar) achtergrond leesbaar is.
   Sterren altijd goud, pill altijd groen.
   ============================================================ */
.cn-rb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    flex-wrap: nowrap;
    color: inherit;
    line-height: 1;
}
/* .cn-rb__pill + .cn-rc__verified delen het visuele pattern (groene
   success-pill + checkmark::before). Beide gebruiken nu --cn-pill-success
   var. Volledige extract naar één base-class vereist HTML wijzigingen op
   alle callers — niet gedaan om regressie te voorkomen, maar de duplicate
   styling is documented hier zodat een toekomstige .cn-pill--success
   utility class makkelijk te introduceren is. */
.cn-rb__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--cn-pill-success);
    color: #fff;
    font-family: var(--cn-font-display);
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.32rem 0.7rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    flex: 0 0 auto;
}
.cn-rb__pill::before {
    content: "";
    width: 1.05em !important;
    height: 1.05em !important;
    flex: 0 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 6 16 12' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.cn-rb__score {
    font-family: var(--cn-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    white-space: nowrap;
    color: inherit;
}
.cn-rb__stars {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: 0.12em;
    flex: 0 0 auto;
}
.cn-rb__stars-base { color: rgba(0, 0, 0, 0.18); }
.cn-rb__stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: var(--cn-gold-bright);
    white-space: nowrap;
}
.cn-rb__count {
    font-size: 0.95rem;
    line-height: 1;
    white-space: nowrap;
    opacity: 0.85;
    color: inherit;
}
.cn-rb__count strong { font-weight: 700; }

/* Announcement bar context (--static modifier). Géén eigen tekstkleur meer:
   .cn-rb / .cn-rb__score / .cn-rb__count staan al op `color: inherit` en de
   balk erft die van het kleurenschema van de sectie (.section → color:
   var(--gsc-text-color-100)). Zette dit hier wél een hex, dan gaf dat een
   flits: dit bestand laadt async, dus tot het binnen was gold de kleur uit
   het critical-CSS-blok in theme.liquid. Alleen de dempende opacity gaat
   eraf — de balk is de plek waar het aantal recensies vol mag meetellen. */
.cn-reviews-bar--static .cn-rb__count { opacity: 1; }

/* Compacte variant — cart-drawer + announcement-bar (kleinere schermen). */
.cn-rb--compact { gap: 0.5rem; }
.cn-rb--compact .cn-rb__pill { font-size: 0.72rem; padding: 0.26rem 0.55rem; }
.cn-rb--compact .cn-rb__pill::before { width: 0.45rem; height: 0.45rem; }
.cn-rb--compact .cn-rb__score { font-size: 0.92rem; }
.cn-rb--compact .cn-rb__stars { font-size: 1rem; }
.cn-rb--compact .cn-rb__count { font-size: 0.82rem; }

@media (max-width: 768px) {
    .cn-rb { gap: 0.5rem; }
    .cn-rb__pill { font-size: 0.72rem; padding: 0.26rem 0.55rem; }
    .cn-rb__pill::before { width: 0.45rem; height: 0.45rem; }
    .cn-rb__score { font-size: 0.92rem; }
    .cn-rb__stars { font-size: 1rem; }
    .cn-rb__count { font-size: 0.82rem; }

    /* Announcement-bar: pill kleiner (kleiner lettertype + minder
       padding) zodat 'UITSTEKEND' nog leesbaar maar minder dominant. */
    .cn-reviews-bar--static .cn-rb__pill,
    .cn-drawer-trust .cn-rb__pill,
    .cn-cart-trust--mobile .cn-rb__pill {
        font-size: 0.78rem !important;
        gap: 0.34rem !important;
        padding: 0.34rem 0.6rem !important;
        border-radius: 0.32rem !important;
    }
    .cn-reviews-bar--static .cn-rb__score,
    .cn-drawer-trust .cn-rb__score,
    .cn-cart-trust--mobile .cn-rb__score {
        font-size: 1rem !important;
    }
    .cn-reviews-bar--static .cn-rb__count,
    .cn-drawer-trust .cn-rb__count,
    .cn-cart-trust--mobile .cn-rb__count {
        font-size: 0.9rem !important;
    }
}

/* ============================================================
   .cn-rb finetuning (styling-pass)
   - Commuters Sans op alle tekst (incl. "Gebaseerd op X recensies")
   - Iets groter overall
   - Reviews.io-icoon + logo altijd NAAST de balk (nooit erboven)
   ============================================================ */
.cn-rb { font-family: var(--cn-font-display); }
.cn-rb__count { font-family: var(--cn-font-display); }

/* Wrappers: alles op één horizontale rij, icoon/logo niet wrappen.
   .cn-cart-trust is per ongeluk afgesplitst naar custom-cart.css;
   die heeft daar z'n eigen identieke flex-rule. */
.cn-reviews-bar,
.cn-reviews-bar--static,
.cn-drawer-trust {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}
.cn-reviews-bar__icon,
.cn-reviews-bar__icon-link,
.cn-reviews-bar__logo {
    flex: 0 0 auto;
}

/* Compacte variant (announcement-bar + cart-drawer): wat groter dan
   de mobile/default. Voorheen gedupliceerd na een cart-block; nu
   hier centraal want gebruikt door iedere page met cn-reviews-bar. */
.cn-rb--compact { gap: 0.66rem; }
.cn-rb--compact .cn-rb__pill { font-size: 0.92rem; padding: 0.34rem 0.74rem; }
.cn-rb--compact .cn-rb__pill::before { width: 0.55rem; height: 0.55rem; }
.cn-rb--compact .cn-rb__score { font-size: 1.2rem; }
.cn-rb--compact .cn-rb__stars { font-size: 1.36rem; }
.cn-rb--compact .cn-rb__count { font-size: 1.06rem; }

/* Announcement-bar: reviews.io-icoon rechts ná "recensies", gecentreerd
   (volgorde: logo → rating → icoon) + iets naar rechts/onderen. */
.cn-reviews-bar--static .cn-reviews-bar__logo { order: 0; }
.cn-reviews-bar--static .cn-reviews-bar__rating { order: 1; }
.cn-reviews-bar--static .cn-reviews-bar__icon-link,
.cn-reviews-bar--static .cn-reviews-bar__icon {
    order: 2;
    align-self: center;
    margin-left: 0.4rem;
    margin-top: 0.25rem;
}

/* Mobile: kortere count-tekst ("16023 reviews") + aantal dikgedrukt &
   groter. Geldt op alle plekken (announcement, cart-page, cart-drawer). */
.cn-rb__count-unit-mobile { display: none; }
@media (max-width: 768px) {
    .cn-rb__count-pre { display: none; }
    .cn-rb__count-unit-desktop { display: none; }
    .cn-rb__count-unit-mobile { display: inline; }
    .cn-rb__count-num {
        font-weight: 700;
        font-size: 1.12em;
    }
}

/* ============================================================
   Server-side review-carousel (.cn-rc) — snippet cn-reviews-cards
   Tekst-only kaarten in een horizontale scroll-carousel. Vervangt de
   zware Reviews.io carousel-widget op de homepage. Goud + brand-stijl.
   ============================================================ */
.cn-rc { width: 100%; }
.cn-rc__header { text-align: center; margin-bottom: 2rem; }
/* Maat, regelhoogte, lettertype en de afstand tot de titel: zie de gedeelde
   subheading-standaard onderaan dit bestand. */
/* Kop- en subkopmaat vast, zodat de eigen kaarten en de Reviews.io-widget
   dezelfde koppen tonen. Ze kwamen uit verschillende bronnen: hier uit de
   typografie-klassen van het thema (h2 / caption1), bij de widget uit de
   sectie-instelling heading_size. Vandaar dat ze uiteenliepen.
   De klasse staat twee keer in de selector puur voor specificiteit, zodat
   deze maat wint van de meegegeven h2/caption1. */
.cn-rc__subheading.cn-rc__subheading {
    text-transform: uppercase;
    color: var(--cn-text-dark);
    font-size: 16px;
}
.cn-rc__heading.cn-rc__heading {
    font-family: var(--cn-font-display);
    font-weight: 700;
    margin: 0;
    font-size: 30px;
}
.cn-rc__heading em,
.cn-rc__heading i {
    font-style: normal;
    background: var(--gold-gradient, linear-gradient(283deg, #44351c -11.54%, #9a722e 9.26%, #ffca70 79.98%, #9a722e 101.36%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Totale rating bovenaan (witte kaart, gecentreerd) — hergebruikt cn-rb. */
/* Wrapper om box + flag, zodat de flag als sibling ACHTER de box kan komen. */
.cn-rc__rating-wrap {
    position: relative;
    display: inline-flex;
}
.cn-rc__rating-box {
    position: relative;
    z-index: 1; /* box boven de flag → box-achtergrond overlapt de flag-bovenkant */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    width: fit-content;
    margin: 0 auto 2.6rem;
    background: #fff;
    border-radius: 1.4rem;
    box-shadow: 0 4px 18px rgba(14, 19, 17, 0.08), 0 1px 3px rgba(14, 19, 17, 0.05);
    padding: 1.8rem 2.8rem;
}

/* Premium 'flag' met het CN-logo die ACHTER de rechter-onderhoek van de
   rating-box vandaan komt. */
.cn-rc__flag {
    position: absolute;
    right: 2rem;
    top: calc(100% - 1.8rem);   /* bovenkant (1.8rem) valt achter de box */
    z-index: 0;                  /* achter de box (box z-index 1) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* top-padding = overlap (1.8rem) + gewenste ruimte boven het logo,
       zodat het logo netjes gecentreerd staat in het zichtbare deel:
       zichtbaar boven = 3rem - 1.8rem = 1.2rem  ==  padding-onder 1.2rem */
    padding: 3rem 2rem 1.2rem;
    background: #fff;
    border-radius: 0 0 1.2rem 1.2rem;
    box-shadow: 0 0.7rem 1.6rem rgba(14, 19, 17, 0.14);
}
.cn-rc__flag img { display: block; }
.cn-rc__rating-box .cn-rb {
    background: transparent;
    box-shadow: none;
    padding: 0;
}
/* PDP: rating-balk over de volle breedte, net als de Reviews.io-widget.

   De width: 100% hieronder deed niets zolang .cn-rc__rating-wrap op
   inline-flex stond: die ouder krimpt naar zijn inhoud, dus "100%" was
   100% van een doos die al zo smal was als de rating zelf. De rating-balk
   bleef daardoor een smal kaartje boven volle-breedte reviewkaarten.

   De mobiele variant had deze regel al (.cn-rc--mobile-list verderop); die
   is hier alleen nooit voor de desktoplijst gezet. */
.cn-rc--list .cn-rc__rating-wrap {
    display: flex;
    width: 100%;
}
.cn-rc--list .cn-rc__rating-box {
    width: 100%;
    box-sizing: border-box;
}
/* Gestapelde rating (homepage): pill boven / 4,8/5 + sterren / count. */
.cn-rb--stacked {
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.cn-rb--stacked .cn-rb__row {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}
.cn-rb--stacked .cn-rb__pill { font-size: 1.15rem; padding: 0.46rem 0.95rem; }
.cn-rb--stacked .cn-rb__pill::before { width: 0.65rem; height: 0.65rem; }
.cn-rb--stacked .cn-rb__score { font-size: 2.6rem; }
.cn-rb--stacked .cn-rb__stars { font-size: 2.1rem; }
.cn-rb--stacked .cn-rb__count { font-size: 1.3rem; }

.cn-rc__track {
    display: flex;
    gap: 1.6rem;
    overflow-x: auto;
    /* proximity i.p.v. mandatory: laat de track exact op 0 (helemaal links)
       en op het einde rusten, zodat de pijlen aan de uiteinden verdwijnen. */
    scroll-snap-type: x proximity;
    /* Snap-inset gelijk aan de padding, zodat de eerste kaart naar scrollLeft 0
       snapt i.p.v. naar de padding-offset (anders blijft de linker pijl staan). */
    scroll-padding-inline: 0.6rem;
    -webkit-overflow-scrolling: touch;
    /* Ruime verticale padding zodat de card-schaduw niet door de
       scroll-container wordt afgekapt (voelde 'afgezaagd'). */
    padding: 1.8rem 0.6rem 2.2rem;
    /* Scrollbalk verbergen — navigatie gebeurt via de pijlen (desktop) en
       swipe (touch). */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cn-rc__track::-webkit-scrollbar { width: 0; height: 0; display: none; }
.cn-rc__card {
    flex: 0 0 auto;
    width: min(34rem, 80vw);
    scroll-snap-align: start;
    background: #fff;
    border-radius: 1.6rem;
    /* Zachte, gelijkmatige schaduw rondom (ook links/rechts zichtbaar) i.p.v.
       een harde onderschaduw die afgekapt oogde. */
    box-shadow: 0 0.6rem 2rem rgba(14, 19, 17, 0.10), 0 0 0.8rem rgba(14, 19, 17, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Grijze header: geverifieerd-pill + naam + locatie, gecentreerd. */
.cn-rc__head {
    background: #f7f7f5;
    padding: 1.8rem 1.6rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}
.cn-rc__verified {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--cn-pill-success);
    color: #fff;
    font-family: var(--cn-font-display);
    font-weight: 600;
    /* 10px, gelijk aan de verified-pill in de Reviews.io-widget
       (.R-BadgeElement in reviews-widgets-shared.css). Stond op 1.15rem
       (11,5px) en was daarmee net groter dan diezelfde badge ernaast. */
    font-size: 10px;
    padding: 0.3rem 0.7rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}
.cn-rc__verified::before {
    content: "";
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 6 16 12' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.cn-rc__author {
    font-family: var(--cn-font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--cn-text-dark);
}
.cn-rc__location {
    font-family: var(--cn-font-display);
    font-size: 1.3rem;
    color: rgba(14, 19, 17, 0.6);
}
.cn-rc__recommends {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    background: rgba(16, 185, 129, 0.12);
    /* a11y contrast: tekst kleur was #0b7a57 op pale-green bg = ~4.13:1 (faalt
       WCAG AA 4.5:1). #047857 (--cn-pill-success) geeft ~4.66:1 op zelfde bg. */
    color: var(--cn-pill-success);
    border: 1px solid rgba(16, 185, 129, 0.4);
    font-family: var(--cn-font-display);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.26rem 0.6rem;
    border-radius: 0.5rem;
}
.cn-rc__recommends::before {
    content: "";
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 6 16 12' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Witte body: sterren + X/5 + productnaam + tekst + datum. */
.cn-rc__body {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    flex: 1 1 auto;
}
.cn-rc__rating-row { display: flex; align-items: center; gap: 0.6rem; }
.cn-rc__stars {
    position: relative;
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.14em;
}
.cn-rc__stars-base { color: rgba(0, 0, 0, 0.18); }
.cn-rc__stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: var(--cn-gold-bright);
    white-space: nowrap;
}
.cn-rc__score {
    font-family: var(--cn-font-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--cn-text-dark);
}
.cn-rc__product {
    font-family: var(--cn-font-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--cn-text-dark);
}
.cn-rc__text {
    font-family: var(--cn-font-display);
    font-size: 1.32rem;
    line-height: 1.55;
    color: var(--cn-text-dark);
    margin: 0;
    flex: 1 1 auto;
    /* Lange reviews afkappen na N regels met '…' zodat één uitgebreide
       review niet de hele rij kaarten uitrekt. N komt via --cn-rc-text-lines
       uit de sectie-instelling; de volledige tekst blijft in de HTML staan
       (leesbaar via 'Bekijk alle reviews'). */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--cn-rc-text-lines, 8);
    line-clamp: var(--cn-rc-text-lines, 8);
    overflow: hidden;
}
.cn-rc__date {
    font-family: var(--cn-font-display);
    align-self: flex-end;
    font-size: 1.15rem;
    /* a11y contrast: opacity 0.5 op wit gaf ~3.68:1 (faalt WCAG AA 4.5:1).
       0.65 levert ~4.78:1 — nog steeds gedempt-grijs maar leesbaar. */
    color: rgba(14, 19, 17, 0.65);
    margin-top: 0.4rem;
}

/* Knop 'Bekijk alle reviews' staat nu onder de titel (in de header),
   uitlijning volgt de kop-uitlijning. */
.cn-rc__actions { position: relative; text-align: center; margin-top: 1.6rem; }
.cn-rc--head-left .cn-rc__actions { text-align: left; }
.cn-rc__rio-logo {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
}
@media (max-width: 768px) {
    .cn-rc__rio-logo {
        position: static;
        transform: none;
        display: flex;
        justify-content: center;
        margin-top: 1.4rem;
    }
}
.cn-rc__all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cn-font-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: #fff;
    background: var(--gold-gradient);
    border: 0;
    border-radius: 1.2rem;
    padding: 1.4rem 3.4rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: filter 0.18s ease, transform 0.18s ease;
}
.cn-rc__all-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* PDP-variant: brede review-rijen onder elkaar — meta LINKS
   (verified + naam + locatie + "raad aan") + content RECHTS (sterren +
   X/5 + product/variant + tekst + datum). Matcht de oude PDP-widget. */
.cn-rc--list .cn-rc__track {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
}
.cn-rc--list .cn-rc__card {
    width: 100%;
    max-width: none;
    margin: 0;
    flex-direction: row;
    align-items: stretch;
}
.cn-rc--list .cn-rc__subheading { color: var(--cn-text-dark); }
.cn-rc--list .cn-rc__head {
    flex: 0 0 22rem;
    background: #f7f7f5;
    text-align: left;
    align-items: flex-start;
    justify-content: center;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    padding: 2rem;
}
/* Mobile: head zit bovenop body (flex-direction column op .cn-rc__card),
   dan ziet center er beter uit dan een geforceerde left-align die in een
   smalle viewport ineens raar rechts veel witruimte laat.

   Alleen als de compacte lijstweergave NIET aan staat. Staat die wel aan, dan
   blijft de kaart ook op mobiel een rij (meta links, review rechts) en zou
   centreren die kolom juist verpesten. Met :not() hangt dat niet af van de
   volgorde waarin de twee blokken in dit bestand staan. */
@media (max-width: 768px) {
    .cn-rc--list:not(.cn-rc--mobile-list) .cn-rc__head {
        text-align: center;
        align-items: center;
    }
}
.cn-rc--list .cn-rc__recommends { margin-top: 0.5rem; }
.cn-rc--list .cn-rc__body {
    flex: 1 1 auto;
    padding: 2rem;
}
@media (max-width: 768px) {
    .cn-rc--list:not(.cn-rc--mobile-list) .cn-rc__card { flex-direction: column; }
    .cn-rc--list:not(.cn-rc--mobile-list) .cn-rc__head {
        flex: none;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    .cn-rc--list:not(.cn-rc--mobile-list) .cn-rc__recommends { margin-top: 0.5rem; }
}

@media (max-width: 768px) {
    .cn-rc__text { font-size: 1.4rem; }
}

/* ============================================================
   Reviews-carousel layout-opties (homepage)
   - header links/gecentreerd
   - rating-box rechts naast de titel (breed) i.p.v. eronder
   - pijl-navigatie i.p.v. zichtbare scrollbar
   - instelbare ruimte tussen kop-blok en carousel (--cn-rc-header-gap)
   ============================================================ */
.cn-rc__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    margin-bottom: var(--cn-rc-header-gap, 2.6rem);
}
.cn-rc__top .cn-rc__header { margin-bottom: 0; max-width: var(--cn-rc-heading-max, 900px); }
.cn-rc__top .cn-rc__rating-box { margin: 0; }

/* Links uitgelijnde kop + subkop */
.cn-rc--head-left .cn-rc__top { align-items: flex-start; }
.cn-rc--head-left .cn-rc__header { text-align: left; }

/* Grens van 900 naar 750px: een iPad Air (820px) viel er net buiten en kreeg
   daardoor de gestapelde mobiele kop, met het ratingblok als los kaartje onder
   de titel. Tablets horen hier de desktopindeling te krijgen. */
@media (max-width: 749px) {
    .cn-rc__top { margin-bottom: var(--cn-rc-header-gap-mobile, 2rem); }
}

/* Rating-box interne delen: rating-items + logo-groep */
.cn-rc__rating-main { display: flex; align-items: center; }
.cn-rc__rating-logos { display: flex; align-items: center; gap: 1rem; }
.cn-rc__rating-box-logo { display: inline-flex; align-items: center; }
/* Reviews.io-logo op dezelfde maat als in de Reviews.io-widget zelf. Zonder
   deze regel viel het terug op de natuurlijke grootte van het bestand en was
   het bijna twee keer zo hoog als de rest van de balk. De mobiele lijst had
   deze maat al; dit trekt desktop gelijk. */
.cn-rc__rating-box-logo img { height: 1.7rem !important; width: auto !important; }

/* --- Rating-box rechts naast de titel (desktop): logo LINKS, rating RECHTS --- */
@media (min-width: 750px) {
    .cn-rc--rating-right .cn-rc__top {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 3rem;
    }
    .cn-rc--rating-right .cn-rc__header {
        flex: 1 1 auto;
        text-align: left;
        margin: 0;
    }
    .cn-rc--rating-right .cn-rc__rating-box {
        flex: 0 1 auto;
        flex-direction: row;
        align-items: center;
        gap: 2.4rem;
        width: auto;
        padding: 1.4rem 2.2rem;
        /* Een flex-item krimpt niet onder min-width:auto, dus op een iPad Air
           bleef het blok op zijn natuurlijke 666px staan en liep het samen met
           de kop buiten de viewport. */
        min-width: 0;
        max-width: 100%;
        /* Op een iPad Air paste het blok op zijn natuurlijke breedte niet
           naast de kop. Laat de inhoud afbreken in plaats van uitlopen. */
        flex-wrap: wrap;
        row-gap: 0.8rem;
    }

    .cn-rc--rating-right .cn-rc__rating-box .cn-rc__rating-main {
        min-width: 0;
        flex-wrap: wrap;
    }
    /* Logo('s) helemaal links */
    .cn-rc--rating-right .cn-rc__rating-logos { order: -1; }
    /* Rating-items rechts (uitlijning via setting → --cn-rc-rating-justify) */
    .cn-rc--rating-right .cn-rc__rating-main {
        flex: 1 1 auto;
        justify-content: var(--cn-rc-rating-justify, flex-end);
    }
    /* Gestapelde rating horizontaal leggen in de brede box */
    .cn-rc--rating-right .cn-rc__rating-main .cn-rb--stacked {
        flex-direction: row;
        align-items: center;
        gap: 1.2rem;
    }
    .cn-rc--rating-right .cn-rb--stacked .cn-rb__pill { font-size: 1rem; padding: 0.4rem 0.8rem; }
    .cn-rc--rating-right .cn-rb--stacked .cn-rb__score { font-size: 2rem; }
    .cn-rc--rating-right .cn-rb--stacked .cn-rb__stars { font-size: 1.8rem; }
    .cn-rc--rating-right .cn-rb--stacked .cn-rb__count { font-size: 1.2rem; }
}

/* --- Carousel + pijlen --- */
.cn-rc__carousel { position: relative; }
.cn-rc__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(14, 19, 17, 0.08);
    background: #fff;
    color: var(--cn-text-dark, #0e1311);
    box-shadow: 0 4px 16px rgba(14, 19, 17, 0.14);
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
.cn-rc__arrow:hover { background: #f5f5f5; transform: translateY(-50%) scale(1.05); }
.cn-rc__arrow--prev { left: 0.2rem; }
.cn-rc__arrow--next { right: 0.2rem; }
.cn-rc__arrow.is-disabled { opacity: 0; pointer-events: none; }

/* Op touch/mobile geen pijlen — daar swipe je gewoon. */
@media (max-width: 899px) {
    .cn-rc__arrow { display: none; }
}

/* Groen verified-vinkje achter de naam (standaard verborgen; op mobiel getoond
   i.p.v. de 'Geverifieerde klant'-badge). Groen rondje met wit vinkje. */
.cn-rc__author-check {
    display: none;
    width: 0.92em;
    height: 0.92em;
    margin-left: 0.35rem;
    vertical-align: -0.08em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23047857'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Mobiel: reviews als compacte verticale lijst i.p.v. carousel --- */
@media (max-width: 768px) {
    /* Stapel de kaarten verticaal, geen zij-scroll/pijlen */
    .cn-rc--mobile-list .cn-rc__track {
        flex-direction: column;
        overflow: visible;
        scroll-snap-type: none;
        gap: 1rem;
        padding: 0.2rem 0 0;
    }
    .cn-rc--mobile-list .cn-rc__arrow { display: none; }

    /* Compacte lijst-rij: meta LINKS, content RECHTS */
    .cn-rc--mobile-list .cn-rc__card {
        width: 100%;
        max-width: none;
        scroll-snap-align: none;
        flex-direction: row;
        align-items: stretch;
    }
    .cn-rc--mobile-list .cn-rc__head {
        flex: 0 0 10.5rem;
        text-align: left;
        align-items: flex-start;
        justify-content: center;
        gap: 0;
        padding: 1rem 1.1rem;
        /* Duidelijk grijs paneel + stevigere scheidingslijn zodat de meta
           als apart blok leest. */
        background: #eeeeeb;
        border-right: 2px solid rgba(0, 0, 0, 0.1);
    }
    /* 'Geverifieerde klant'-badge weg; i.p.v. daarvan een groen vinkje
       achter de naam (zie .cn-rc__author-check). */
    .cn-rc--mobile-list .cn-rc__verified { display: none; }
    .cn-rc--mobile-list .cn-rc__author-check { display: inline-block; }
    /* Aanrader: compacte groene pill (container terug), met meer ruimte
       t.o.v. de stad erboven. */
    .cn-rc--mobile-list .cn-rc__recommends {
        margin: 0.9rem 0 0;
        padding: 0.26rem 0.6rem;
        font-size: 0.85rem;
        line-height: 1.05;
        gap: 0.5rem;
        align-self: flex-start;
    }
    /* naam en stad dicht op elkaar */
    .cn-rc--mobile-list .cn-rc__author { font-size: 1.25rem; line-height: 1.15; }
    .cn-rc--mobile-list .cn-rc__location { font-size: 1rem; line-height: 1.15; margin-top: 0.05rem; }
    .cn-rc--mobile-list .cn-rc__body {
        flex: 1 1 auto;
        padding: 1rem 1.2rem;
        gap: 0.5rem;
    }
    .cn-rc--mobile-list .cn-rc__stars { font-size: 1.35rem; }
    .cn-rc--mobile-list .cn-rc__score { font-size: 1.2rem; }
    .cn-rc--mobile-list .cn-rc__product { font-size: 1.25rem; }
    .cn-rc--mobile-list .cn-rc__text { font-size: 1.2rem; line-height: 1.45; }
    .cn-rc--mobile-list .cn-rc__date { font-size: 1rem; }

    /* Rating-box compact als brede horizontale balk */
    .cn-rc--mobile-list .cn-rc__rating-wrap { width: 100%; display: flex; }
    .cn-rc--mobile-list .cn-rc__rating-box {
        width: 100%;
        box-sizing: border-box;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.5rem 1.2rem;
        padding: 1.1rem 1.3rem;
    }
    .cn-rc--mobile-list .cn-rc__rating-box .cn-rb--stacked {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.4rem 0.9rem;
    }
    .cn-rc--mobile-list .cn-rb--stacked .cn-rb__pill { font-size: 1rem; padding: 0.34rem 0.7rem; }
    .cn-rc--mobile-list .cn-rb--stacked .cn-rb__score { font-size: 1.7rem; }
    .cn-rc--mobile-list .cn-rb--stacked .cn-rb__stars { font-size: 1.5rem; }
    .cn-rc--mobile-list .cn-rb--stacked .cn-rb__count { font-size: 1.05rem; }
    /* Reviews.io-logo compact op mobiel (override inline height) */
    .cn-rc--mobile-list .cn-rc__rating-box-logo img { height: 1.7rem !important; }

    /* CN-flag verbergen op mobiel (overlapte de eerste review) */
    .cn-rc--mobile-list .cn-rc__flag { display: none; }
}


/*
  custom-pdp.css — alleen ingeladen op product templates.
  Bevat styling die uitsluitend gebruikt wordt op PDPs:
  - #cn-composition + #cn-nutrition tables (samenstelling/voeding)
  Geëxtract uit custom.css om die op niet-PDP pages te besparen.
*/

/* CN – Tables (gold frame, no hover, collapsed row borders)
   Het thema bepaalt het lettertype. Werkt voor #cn-composition (4 kol) en #cn-nutrition (2 kol). */

/* ====== BASIS / VARS ====== */
#cn-composition,
#cn-nutrition,
.cn-table {
    --ink: #111111;
    --muted: #5a5a5a;
    --line: #d0d0d0; /* iets donkerder voor duidelijke hairlines */
    --zebra: #fafafa;
    --head: #f5f5f5;
    color: var(--ink);
    background: transparent;
}

/* ====== FRAME & CARD ====== */
#cn-composition .gold-frame,
#cn-nutrition .gold-frame,
.cn-table .gold-frame {
    background: linear-gradient(180deg, #9b7232 0%, #fbd68c 50%, #9b7232 100%);
    padding: 5px;
    border-radius: 18px;
    display: block;
}

#cn-composition .card_samenstelling,
#cn-nutrition .card_samenstelling,
.cn-table .card_samenstelling {
    background: #fff;
    border-radius: 16px;
    overflow: hidden; /* houdt alles binnen de ronde hoeken */
}

/* ====== HEADER ====== */
#cn-composition .header,
#cn-nutrition .header,
.cn-table .header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 18px 10px;
}

#cn-composition .header::after,
#cn-nutrition .header::after,
.cn-table .header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--line);
}

#cn-composition .title-wrap,
#cn-nutrition .title-wrap,
.cn-table .title-wrap {
    flex: 1;
}

#cn-composition .title,
#cn-nutrition .title,
.cn-table .title {
    font-size: clamp(22px, 3vw, 24px);
    font-weight: 800;
    margin: 0;
    letter-spacing: 0.2px;
    color: var(--ink);
}

#cn-composition .dose-note,
#cn-nutrition .dose-note,
.cn-table .dose-note {
    color: var(--muted);
    font-size: 14px;
    margin-top: 2px;
    display: block;
}

/* ====== TABEL ====== */
#cn-composition .table,
#cn-nutrition .table,
.cn-table .table {
    width: 100% !important;
    border-collapse: collapse; /* BELANGRIJK: doorlopende rijen */
    border-spacing: 0;
    font-size: 15px;
    table-layout: fixed; /* stabiele breedtes, geen “springen” */
    display: table !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important; /* geen horizontale scroll */
    -webkit-overflow-scrolling: auto !important;
}

/* THEME wrappers die scroll forceren neutraliseren */
#cn-composition .table-wrapper,
#cn-composition .rte__table-wrapper,
#cn-composition .rte table,
#cn-nutrition .table-wrapper,
#cn-nutrition .rte__table-wrapper,
#cn-nutrition .rte table {
    overflow: visible !important;
}

/* Header-cellen */
#cn-composition .table thead th,
#cn-nutrition .table thead th,
.cn-table .table thead th {
    background: var(--head);
    color: var(--ink);
    text-align: left;
    font-weight: 700;
    padding: 14px 16px;
    border: 0; /* headerlijn komt uit .header::after */
    border-radius: 0 !important;
    white-space: normal !important;
    word-break: break-word;
}

/* Body-cellen */
#cn-composition .table tbody td,
#cn-nutrition .table tbody td,
.cn-table .table tbody td {
    padding: 12px 16px;
    color: var(--ink);
    background: #fff;
    border: 0 !important;
    white-space: normal !important;
    word-break: break-word;
}

/* Zebra */
#cn-composition .table tbody tr:nth-child(even) td,
#cn-nutrition .table tbody tr:nth-child(even) td,
.cn-table .table tbody tr:nth-child(even) td {
    background: var(--zebra);
}

/* Doorlopende rij-lijn: op TR i.p.v. TD (i.c.m. collapse) */
#cn-composition .table tbody tr,
#cn-nutrition .table tbody tr,
.cn-table .table tbody tr {
    border-bottom: 1px solid var(--line) !important;
}

/* Categorie-rijen */
#cn-composition .table tbody tr.category,
#cn-nutrition .table tbody tr.category,
.cn-table .table tbody tr.category {
    border-bottom: 0 !important;
}

#cn-composition .category,
#cn-nutrition .category,
.cn-table .category {
    background: #fbfbfb !important;
    color: #444;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.3px;
}

/* Footer */
#cn-composition tfoot td,
#cn-nutrition tfoot td,
.cn-table tfoot td {
    padding: 14px 16px;
    color: #444;
    background: #fbfbfb;
    font-size: 14px;
    border-top: 1px solid var(--line) !important;
}

/* ====== KOLUMNUITLIJNING ====== */
/* Default: alles links. Daarna per tabeltype corrigeren. */

/* #cn-composition (4 kolommen): 2 & 3 rechts, 4 gecentreerd */
#cn-composition .table thead th:nth-child(2),
#cn-composition .table tbody td:nth-child(2),
#cn-composition .table thead th:nth-child(3),
#cn-composition .table tbody td:nth-child(3) {
    text-align: right;
}
#cn-composition .table thead th:nth-child(4),
#cn-composition .table tbody td:nth-child(4) {
    text-align: center;
}

/* #cn-nutrition (2 kolommen): 2e kolom rechts */
#cn-nutrition .table thead th:nth-child(2),
#cn-nutrition .table tbody td:nth-child(2) {
    text-align: right;
}

/* Herstel echte tabel-structuur (sommige thema’s zetten display: block) */
#cn-composition .table thead,
#cn-composition .table tbody,
#cn-nutrition .table thead,
#cn-nutrition .table tbody {
    display: table-row-group !important;
}
#cn-composition .table tr,
#cn-nutrition .table tr {
    display: table-row !important;
}
#cn-composition .table th,
#cn-composition .table td,
#cn-nutrition .table th,
#cn-nutrition .table td {
    display: table-cell !important;
}

/* ====== MOBIEL ====== */
@media (max-width: 720px) {
    #cn-composition .table,
    #cn-nutrition .table {
        font-size: 14px;
    }
    #cn-composition .table thead th,
    #cn-composition .table tbody td,
    #cn-nutrition .table thead th,
    #cn-nutrition .table tbody td {
        padding: 10px 12px;
    }
}

.gold-animation {
    position: relative;
    overflow: hidden;
}
.gold-animation span,
.gold-animation a,
.gold-animation div {
    position: relative;
    z-index: 1;
}
.gold-animation::after {
    position: absolute;
    content: "";
    /* base = END visible position (-30px past right edge). Initial off-screen
       state komt uit transform: translateX(-100vw) — GPU-composited animation.
       Parent heeft overflow:hidden dus 100vw offset is veilig (onzichtbaar). */
    right: -30px;
    top: 50%;
    transform: translateY(-50%) rotate(20deg) translateX(-100vw);
    width: 10px;
    height: 110%;
    background: #ffca70;
    filter: blur(4.5px);
    animation: goldAfter 9.6s cubic-bezier(0.7, 0, 0.3, 1) infinite;
    will-change: transform;
}
.gold-animation::before {
    position: absolute;
    content: "";
    width: 250%;
    height: 100%;
    top: 50%;
    right: 0;
    opacity: 0;
    transform: translateY(-50%);
    will-change: transform, opacity;
    background: linear-gradient(
        110deg,
        #9a722e 0%,
        #9a722e 10%,
        #ffca70 17.5%,
        #ffca70 25%,
        #ffca70 32.5%,
        #9a722e 40%,
        #9a722e 50%,
        #9a722e 60%,
        #ffca70 67.5%,
        #ffca70 75%,
        #ffca70 82.5%,
        #9a722e 90%,
        #9a722e 100%
    );
    animation: goldBack 9.6s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}

/* GPU-composited equivalent: element width = 250% of button, dus translateX(50%)
   van element-width = 125% van button-width = identiek aan oude `right: -125%`. */
@keyframes goldBack {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(0);
    }
    8.33% {
        /* 0.8s of 9.6s */
        opacity: 1;
        transform: translateY(-50%) translateX(50%);
    }
    8.331% {
        /* 0.8s of 9.6s */
        opacity: 1;
        transform: translateY(-50%) translateX(0); /* Instant jump back */
    }
    16.67% {
        /* 1.6s of 9.6s */
        opacity: 0;
        transform: translateY(-50%) translateX(50%);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) translateX(50%);
    }
}

/* ::after base position = END visible state (right:-30px). translateX(-100vw)
   start offscreen left, translateX(0) eindigt op base — identiek visueel
   resultaat als oud `right` animation maar dan GPU-composited. */
@keyframes goldAfter {
    0% {
        transform: translateY(-50%) rotate(20deg) translateX(-100vw);
    }
    8.33% {
        /* 0.8s of 9.6s */
        transform: translateY(-50%) rotate(20deg) translateX(0);
    }
    8.331% {
        transform: translateY(-50%) rotate(20deg) translateX(-100vw); /* Instant jump back */
    }
    16.67% {
        /* 1.6s of 9.6s */
        transform: translateY(-50%) rotate(20deg) translateX(0);
    }
    16.68% {
        transform: translateY(-50%) rotate(20deg) translateX(-100vw);
    }
    100% {
        transform: translateY(-50%) rotate(20deg) translateX(-100vw);
    }
}

.gold-animation-hover,
.btn.btn--solid {
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.btn.btn--solid span,
.btn.btn--solid a,
.btn.btn--solid div .gold-animation-hover span,
.gold-animation-hover a,
.gold-animation-hover div {
    position: relative;
    z-index: 1;
}

.gold-animation-hover::after,
.gold-animation-hover::before,
.btn.btn--solid::after,
.btn.btn--solid::before {
    z-index: -1;
}
/* Hover-variant gebruikt dezelfde GPU-composited approach als .gold-animation:
   base = END visible position, initial state via transform: translateX(-100vw). */
.btn.btn--solid::after,
.gold-animation-hover::after {
    position: absolute;
    content: "";
    right: -30px;
    top: 50%;
    transform: translateY(-50%) rotate(20deg) translateX(-100vw);
    width: 10px;
    height: 110%;
    background: #ffca70;
    filter: blur(4.5px);
    animation: none;
    will-change: transform;
}
.btn.btn--solid::before,
.gold-animation-hover::before {
    position: absolute;
    content: "";
    width: 250%;
    height: 100%;
    top: 50%;
    right: 0;
    opacity: 0;
    transform: translateY(-50%);
    will-change: transform, opacity;
    background: linear-gradient(
        110deg,
        #9a722e 0%,
        #9a722e 10%,
        #ffca70 17.5%,
        #ffca70 25%,
        #ffca70 32.5%,
        #9a722e 40%,
        #9a722e 50%,
        #9a722e 60%,
        #ffca70 67.5%,
        #ffca70 75%,
        #ffca70 82.5%,
        #9a722e 90%,
        #9a722e 100%
    );
    animation: none;
}

/* Hover: Play first part of animation */
.btn.btn--solid:hover::after,
.gold-animation-hover:hover::after {
    animation: goldAfterHoverIn 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

.btn.btn--solid:hover::before,
.gold-animation-hover:hover::before {
    animation: goldBackHoverIn 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

/* Hover out: Play second part of animation */
.btn.btn--solid:not(:hover)::after,
.gold-animation-hover:not(:hover)::after {
    animation: goldAfterHoverOut 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

.btn.btn--solid:not(:hover)::before,
.gold-animation-hover:not(:hover)::before {
    animation: goldBackHoverOut 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

/* Hover IN animations (first part - 0% to 8.33%) — GPU-composited via transform */
@keyframes goldBackHoverIn {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(0);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) translateX(50%);
    }
}

@keyframes goldAfterHoverIn {
    0% {
        transform: translateY(-50%) rotate(20deg) translateX(-100vw);
    }
    100% {
        transform: translateY(-50%) rotate(20deg) translateX(0);
    }
}

/* Hover OUT animations (second part - 8.331% to 16.67%) */
@keyframes goldBackHoverOut {
    0% {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) translateX(50%);
    }
}

@keyframes goldAfterHoverOut {
    0% {
        transform: translateY(-50%) rotate(20deg) translateX(-100vw);
    }
    100% {
        transform: translateY(-50%) rotate(20deg) translateX(0);
    }
}

#CartCount {
    position: absolute;
    right: 0.1rem;
    bottom: 0.6rem;
    width: 0.8rem;
    height: 0.8rem;
    background-color: black;
    border-radius: 50%;
}

/* Quick-view: max-2-visible CSS hide rule verwijderd — embla's vertical-axis
   carousel computeert dan scrollSnapList=1 + scrollProgress NaN, waardoor
   thumb-tap-naar-image-2 niet meer werkt. Origineel Aurora-gedrag: alle
   product-images zichtbaar, bundle.js herschikt op smaak-wissel zodat
   matching slides bovenaan staan, embla navigeert tussen alle slides
   correct. Visuele clutter voor multi-image producten is acceptabele
   trade-off vergeleken met kapotte navigatie. */

<<<<<<< ours
/* ============================================================
   Announcement bar: witte achtergrond + zwarte tekst

   Dit gebeurt nu waar het hoort — in de kleurenschema-instelling van de
   sectie zelf. main-header-group.json staat op "custom-2" (wit #ffffff /
   zwart #000000) in plaats van "secondary" (zwart #000000 / wit #fdfdfd).

   Waarom dat het verschil maakt: css-variables.liquid schrijft de
   .color-*-schema's inline in de <head>, vóór bundle.css, en bundle.css
   zet `.section { color/background-color: var(--gsc-*-color-100) }`. De
   balk is dus al wit bij de allereerste paint. Deed je het hier, dan
   schilderde de browser hem eerst zwart (het schema uit de sectie-
   instelling) en corrigeerde dit bestand hem pas ná de swap — precies de
   zwart→wit flits bij elke reload.

   Bijeffect: de taal- en valutakiezer hoeven niet meer apart gerepareerd.
   Het <float-element> wordt naar een portal-div onder body verplaatst en is
   daar met een voorouder-selector niet te bereiken, maar het krijgt
   `color-{{ color_scheme }}` als eigen class mee en volgt dus vanzelf.
   ============================================================ */

/* Wit-op-wit heeft een rand nodig: de bestaande box-shadow is een zachte
   spreiding die op een witte pagina nauwelijks aftekent, waardoor het
   paneel geen zichtbare begrenzing had. */
#AnnouncementBarLanguageSelector .localization-dropdown__body,
#AnnouncementBarCurrencySelector .localization-dropdown__body {
    border: 0.1rem solid rgba(0, 0, 0, 0.1);
    border-radius: inherit;
}

/* Breedte, radius en inspringing van de balk staan nu in het {% style %}-
   blok van sections/announcement-bar.liquid. Dat blok rendert inline, vlak
   boven de balk zelf, terwijl dit bestand async laadt: vanuit hier kwam de
   correctie pas ná de eerste paint en sprong de balk zichtbaar van
   volle-schermbreedte-met-rechte-hoeken naar de smallere afgeronde kaart.

   De losse `color: #000 !important` op elk kind-element is daar niet mee
   meeverhuisd maar helemaal weg: met kleurenschema custom-2 zet bundle.css
   `.section { color: var(--gsc-text-color-100) }` de tekstkleur al op zwart
   en erft alles binnen de balk die vanzelf. De groene UITSTEKEND-pill hield
   zijn witte tekst alleen nog dankzij een uitzondering op die regel; nu die
   generieke regel weg is, doet .cn-rb__pill { color: #fff } het gewoon. */

/* Product-card titels in Toxigenesis hoofdletters (globaal) */
html body .product-card__title {
    font-family: var(--cn-font-accent, sans-serif) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 1.3rem !important; /* desktop 13px */
}
@media screen and (max-width: 768px) {
    html body .product-card__title {
        font-size: 1.1rem !important; /* mobiel 11px */
    }
}

/* ============================================================
   Status-badges op product-cards (BESTSELLER / NIEUW / NIEUWE SMAKEN /
   UITVERKOCHT) staan niet meer hier.

   Ze hadden vijf varianten (tick / wit / zwart / goud / verzonken) die via
   een cn-badge-style--* class op de body werden geschakeld. Elke variant
   moest de kleuren uit de theme-instellingen platwalsen, dus dat kostte
   ~60 !important-declaraties -- en omdat dit bestand async laadt kwam dat
   allemaal pas na de eerste paint aan: je zag eerst de ingestelde kleuren
   (rood / goud-gradient / groen / grijs) met een 24px icoon, en daarna
   klapte alles om naar de witte chip.

   Nu:
   - de VORM staat in het critical-CSS-blok in layout/theme.liquid, dus die
     is er bij de eerste paint al;
   - de KLEUR komt uit de theme-instellingen (Producten > Badges), via
     bundle.css en --gsc-product-custom-badge-N-*. Wil je een badge weer
     kleur geven, dan doe je dat daar en niet in CSS;
   - de metafield-badge ("Nieuwe smaken") heeft daarvoor eigen instellingen
     gekregen; die schilderde zichzelf voorheen met een inline
     style-attribuut, waardoor !important de enige uitweg was.

   De vier ongebruikte varianten zijn vervallen, inclusief de select in
   settings_schema.json.
   ============================================================ */

/* ============================================================
   Product-cards: meer lucht boven/onder de productfoto

   Why: de grijze image-container (.product-card__inner.shape) krijgt
   z'n hoogte via padding-bottom (aspect-ratio). De afbeeldingen erin
   staan absoluut gepositioneerd en vullen de PADDING-box, dus padding
   op de container inset ze niet — daarom groeit de container 40px en
   wordt de image-stack zelf 20px boven en onder ingesprongen.

   Netto: zelfde beeldformaat, 20px extra grijs boven en onder.

   Het grijs zelf staat op .multiply-mode (de slide binnenin, zie
   bundle.css) — die krimpt dus mee met de inset. Daarom staat dezelfde
   kleur hier ook op de container, anders wordt de extra ruimte wit.
   ============================================================ */
.product-card__inner {
    background-color: #f5f5f5;
}

.product-card__inner.shape--square,
.product-card__inner.shape--fit-square {
    padding-bottom: calc(var(--gsc-square-image-ratio) + 40px);
}

.product-card__inner.shape--portrait,
.product-card__inner.shape--fit-portrait {
    padding-bottom: calc(var(--gsc-portrait-image-ratio) + 40px);
}

.product-card__inner.shape--default {
    padding-bottom: calc(var(--gsc-default-card-image-ratio) + 40px);
}

/* Beeldvlak even hoog houden maar 20px lager plaatsen: 40px boven,
   0 onder. Alleen `top` verhogen én de hoogte gelijk laten verschuift
   het midden echt 20px — hoogte inkorten zou het beeld herschalen en
   opnieuw centreren (halveert de verschuiving). */
.product-card__inner > .product-card__images-wrapper,
.product-card__inner > .product-card__images,
.product-card__inner > .product-card__carousel {
    top: 40px;
    height: calc(100% - 40px);
}

/* ============================================================
   Foto in een passe-partout

   Why: bij transparante supplement-PNG's valt de 40px-strook hierboven
   weg tegen het grijs, maar kleding en coaching gebruiken 1:1 foto's
   mét eigen achtergrond. Die begonnen 40px onder de bovenrand en liepen
   verder strak tot de zijkanten — het beeld leek daardoor bovenaan
   afgesneden in plaats van bewust geplaatst.

   Oplossing: het beeld óók aan de zijkanten en onder laten inspringen en
   het afronden. Het grijs wordt dan een lijst rondom in plaats van een
   losse balk erboven. De bovenmarge blijft breder dan de rest — dat is
   de klassieke passe-partout-verhouding én precies de ruimte waar de
   NIEUW-badge in staat.

   Supplementen merken er niets van: hun PNG is transparant, dus de
   afgeronde hoeken vallen grijs-op-grijs weg. Alleen het beeld wordt
   ~4% kleiner, wat naast elkaar niet opvalt.

   width: auto is nodig omdat bundle.css hier width: 100% zet; zonder
   die reset negeren de elementen de left/right-inset.
   ============================================================ */
.product-card__inner > .product-card__images-wrapper,
.product-card__inner > .product-card__images,
.product-card__inner > .product-card__carousel {
    /* Het beeld sluit weer aan op de onderrand en de zijkanten van de grijze
       container; alleen boven blijft de strook grijs staan (de 40px uit de
       regel hierboven). De afronding blijft daardoor alleen bovenaan nodig —
       onderaan volgt het beeld gewoon de rand van de kaart. */
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

/* ============================================================
   Uitzondering: de kaartjes in de bundelsectie op de PDP

   Die hergebruiken .product-card__inner met shape--square, maar hebben hun
   eigen afmetingen: op desktop een vast vlak en op mobiel een thumbnail van
   90px naast de tekst. De 40px-strook hierboven is daar niet voor bedoeld en
   pakte er twee keer verkeerd uit:

   - desktop: de container werd 40px hoger dan breed (padding-bottom van
     ratio + 40px), terwijl het beeld op object-fit: cover staat. Een
     vierkante foto in een 340x380-vlak wordt dan bijgesneden — dat is het
     ingezoomde beeld.
   - mobiel: de thumbnail houdt zijn eigen hoogte van 90px, maar het beeld
     kreeg alsnog top: 40px mee en hing er 40px onderuit.

   Hier dus terug naar een vlak dat gewoon de container vult. Gescoped op
   .bundle-native-card, de class die het bundel-snippet zelf meegeeft, zodat
   de productkaarten in de grids hun passe-partout houden. */
.bundle-native-card .product-card__inner.shape--square,
.bundle-native-card .product-card__inner.shape--fit-square {
    padding-bottom: var(--gsc-square-image-ratio);
}

.bundle-native-card .product-card__inner.shape--portrait,
.bundle-native-card .product-card__inner.shape--fit-portrait {
    padding-bottom: var(--gsc-portrait-image-ratio);
}

.bundle-native-card .product-card__inner.shape--default {
    padding-bottom: var(--gsc-default-card-image-ratio);
}

.bundle-native-card .product-card__inner > .product-card__images-wrapper,
.bundle-native-card .product-card__inner > .product-card__images,
.bundle-native-card .product-card__inner > .product-card__carousel {
    top: 0;
    height: 100%;
    border-radius: inherit;
}

/* De hover-knoppenbalk hangt aan .product-card__inner, niet aan het
   beeld. Zonder dezelfde inset stak hij links en rechts buiten de foto
   over het grijs heen. */
.product-card__inner > .product-card__actions {
    /* Beeld loopt weer tot de randen, dus de knoppenbalk ook. */
    left: 0;
    right: 0;
    width: 100%;
    bottom: 0;
}

/* Bundle.css verbergt de knoppenbalk met translateY(100%) — 100% van de
   knophoogte, precies genoeg om hem tot ónder de containerrand te duwen
   zolang de balk op bottom: 0 staat. Door de inset hierboven eindigt de
   balk 14px hoger, dus bleef er in ruststand een zwart streepje knop
   onder de foto zichtbaar.

   We verlengen daarom de verbergafstand met diezelfde inset. Alleen de
   verborgen stand verschuift; de hover-stand is translateY(0) en blijft
   dus staan waar hij hoort. Overschieten is onschadelijk (verder weg is
   nog steeds onzichtbaar), tekortkomen is precies het streepje — vandaar
   één waarde van 14px voor alle breedtes vanaf 768px, ook waar de inset
   8px is.

   Onder 768px staat de balk altijd zichtbaar (de verbergregel in
   bundle.css zit in @media min-width: 768px), dus daar speelt dit niet. */
/* De verbergafstand van bundle.css (translateY(100%)) klopt weer nu de
   knoppenbalk op bottom: 0 staat; de extra 14px-correctie is daarmee
   overbodig geworden. */

/* Mobiel zijn de cards ruim de helft smaller; de afronding schaalt mee,
   anders oogt hij zwaarder op een kleiner beeldvlak. */
@media screen and (max-width: 768px) {
    .product-card__inner > .product-card__images-wrapper,
    .product-card__inner > .product-card__images,
    .product-card__inner > .product-card__carousel {
        border-radius: 10px 10px 0 0;
    }
}

/* ============================================================
   SUBHEADINGS (kickers) BOVEN EEN SECTIETITEL
   ------------------------------------------------------------
   Elke sectie bracht zijn eigen maat en tussenruimte mee:
   before/after 13px met 16px eronder, pricing cards 13px met 8px,
   collectie-grid 13px met 0px, influencer-slider 12px met 12px en
   de reviews-carousel een ongeldige maat-klasse met 6px. Hier
   trekken we dat gelijk: 16px tekst vanaf desktop en overal
   dezelfde afstand tot de titel (12px mobiel, 16px desktop).
   ============================================================ */
.before-after__content > .caption,
.before-after__text-group > .caption,
.collection-list__header > .caption,
.coaching-pricing-cards__header .coaching-pricing-cards__subheading,
.influencer-slider__header .influencer-slider__label,
.ytc__header .ytc__subheading,
.cn-rc__header .cn-rc__subheading {
    /* De regelhoogte moet mee: een subheading die de body-regelhoogte erft
       (~1.5) krijgt onder de letters meer loze ruimte dan een .caption
       (1.385), en dan oogt dezelfde marge alsnog als een grotere afstand. */
    /* Blok-element: in de before/after-sectie is de subheading een inline
       <span> en elders een <p>. Op een inline element doet margin-bottom
       niets, waardoor dezelfde marge daar wél en hier niet aankwam. */
    display: block;
    line-height: 1.2;
    /* Geen extra marge: de afstand komt uit de regelhoogte van de subheading
       en van de titel eronder. Dat is precies de afstand van de
       before/after-sectie; die is de standaard. */
    margin-bottom: 0;
    /* Zelfde typografie als de kicker van de before/after-sectie: het
       body-lettertype in medium, zonder extra letterafstand. De pricing
       cards, influencer-slider en reviews-carousel gebruikten hier het
       display-lettertype (Toxigenesis) met 0.06-0.12em spatiëring, wat
       zwaarder oogt dan de titel eronder verdraagt. */
    font-family: var(--gsc-body-font-family);
    font-size: 13px;
    font-weight: var(--gsc-font-weight-medium, 500);
    letter-spacing: normal;
}

/* De before/after-sectie zet de tussenruimte op het element ná de
   kicker (`> * + *`). Die nullen we, anders telt hij bij de marge
   hierboven op en wordt de afstand daar dubbel. */
.before-after__content > .caption + *,
.before-after__text-group > .caption + * {
    margin-top: 0;
}

@media (min-width: 768px) {
    .before-after__content > .caption,
    .before-after__text-group > .caption,
    .collection-list__header > .caption,
    .coaching-pricing-cards__header .coaching-pricing-cards__subheading,
    .influencer-slider__header .influencer-slider__label,
    .ytc__header .ytc__subheading,
    .cn-rc__header .cn-rc__subheading {
        font-size: 16px;
    }

    .before-after__content > .caption + *,
    .before-after__text-group > .caption + * {
        margin-top: 0;
    }
}

/* ============================================================
   SECTIETITELS
   ------------------------------------------------------------
   Elke sectie koos zelf zijn maat via de "Tekstgrootte"-keuze
   (h4 in de ene sectie, h5 in de andere) en de influencer-slider
   had zelfs een vaste 28px in zijn eigen stylesheet. Hier trekken
   we dat gelijk: 24px op mobiel, 30px vanaf 768px.

   De h2-prefix is nodig om te winnen van sectie-eigen CSS die
   later in de pagina laadt (influencer-slider.css); zonder die
   prefix is de specificiteit gelijk en wint de laatste.

   Gevolg: de "Tekstgrootte"-instelling bepaalt bij deze koppen
   niet langer de grootte. Gewicht, lettertype en spatiëring komen
   nog wel uit die klasse.
   ============================================================ */
h2.collection__title,
h2.collection__tabs-intro-title,
h2.before-after__title,
h2.coaching-pricing-cards__heading,
h2.ytc__heading,
h2.influencer-slider__heading,
h2.cn-rc__heading,
.collection-list__header > h2,
.multicolumn__content > h2 {
    font-size: 24px;
}

@media (min-width: 768px) {
    h2.collection__title,
    h2.collection__tabs-intro-title,
    h2.before-after__title,
    h2.coaching-pricing-cards__heading,
    h2.ytc__heading,
    h2.influencer-slider__heading,
    h2.cn-rc__heading,
    .collection-list__header > h2,
    .multicolumn__content > h2 {
        font-size: 30px;
    }
}

/* Woorden tussen sterretjes zet de snippet 'gold-words' in <em>; hier
   krijgen ze in elke sectietitel het gouden verloop. <i> staat erbij voor
   titels waar ooit met de hand HTML is ingetypt. */
h2.collection__title em,
h2.collection__title i,
h2.collection__tabs-intro-title em,
h2.collection__tabs-intro-title i,
h2.coaching-pricing-cards__heading em,
h2.coaching-pricing-cards__heading i,
.collection-list__header > h2 em,
.collection-list__header > h2 i,
.multicolumn__content > h2 em,
.multicolumn__content > h2 i {
    font-style: normal;
    background: var(--gold-gradient, linear-gradient(283deg, #44351c -11.54%, #9a722e 9.26%, #ffca70 79.98%, #9a722e 101.36%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   SECTIEKOPPEN GECENTREERD OP MOBIEL
   ------------------------------------------------------------
   Aan te zetten met "Titels en subtitels centreren op mobiel"
   (Thema-instellingen → Typografie). Die zet de klasse
   cn-mobile-centered-headings op <body>.

   Elke sectie heeft zijn eigen uitlijning-instelling, en die
   staan hier bewust met !important overschreven: het gaat om
   één bewuste keuze voor de hele homepage, niet om per sectie
   opnieuw dezelfde knop om te zetten. Op desktop blijft de
   eigen instelling van elke sectie gewoon leidend.

   Naast text-align ook align-items: de koppen van de meeste
   van deze secties zitten in een flex-kolom, en daar bepaalt
   align-items waar het blok staat — text-align verplaatst dan
   alleen de regels binnen een blok dat nog steeds links hangt.
   ============================================================ */
@media (max-width: 768px) {
    .cn-mobile-centered-headings .collection__header,
    .cn-mobile-centered-headings .collection-list__header,
    .cn-mobile-centered-headings .coaching-pricing-cards__header,
    .cn-mobile-centered-headings .ytc__head-left,
    .cn-mobile-centered-headings .influencer-slider__header,
    .cn-mobile-centered-headings .cn-rc__header,
    .cn-mobile-centered-headings .multicolumn__content,
    .cn-mobile-centered-headings .before-after__text-group,
    .cn-mobile-centered-headings .collection__tabs-intro,
    .cn-mobile-centered-headings .collection__heading-group {
        text-align: center !important;
        align-items: center !important;
    }

    /* Deze twee hangen als flex-item aan hun ouder; met alleen
       align-items op de ouder blijven ze links staan. */
    .cn-mobile-centered-headings .before-after__text-group,
    .cn-mobile-centered-headings .collection__tabs-intro {
        align-self: center !important;
        margin-inline: auto;
    }

    /* De losse subtitel-regels erven text-align van hun ouder,
       behalve waar de sectie er zelf een op zet. */
    .cn-mobile-centered-headings .before-after__content > .caption,
    .cn-mobile-centered-headings .collection-list__header > .caption,
    .cn-mobile-centered-headings .coaching-pricing-cards__subheading,
    .cn-mobile-centered-headings .influencer-slider__label,
    .cn-mobile-centered-headings .ytc__subheading,
    .cn-mobile-centered-headings .cn-rc__subheading,
    .cn-mobile-centered-headings .collection__subheading,
    .cn-mobile-centered-headings .collection__tabs-intro-sub {
        text-align: center !important;
    }
}

/* Knop onder de reviews: breder dan de variant boven de kop, want daar
   staat hij naast de titel en hier op zichzelf onder een rij kaarten.
   Volle breedte tot 42rem, zodat hij op mobiel de kaartbreedte volgt en
   op desktop niet tot een balk uitrekt. */
.cn-rc__actions--bottom {
    margin-top: 2.8rem;
    text-align: center;
}

.cn-rc--head-left .cn-rc__actions--bottom {
    text-align: center;
}

.cn-rc__actions--bottom .cn-rc__all-btn {
    width: 100%;
    max-width: 42rem;
}

/* Onder 900px staat de knop onder de kaarten, daarboven links onder de titel.
   Beide staan in de opmaak; hier bepaalt de breedte welke telt.

   900px en niet 1025px: de component zelf schakelt op die grens naar de
   desktopindeling (zie .cn-rc--rating-right .cn-rc__top hierboven). Stonden
   ze uit elkaar, dan kreeg je tussen 900 en 1024px de desktop-kop met de
   mobiele knop eronder — twee halve indelingen tegelijk. */
.cn-rc__actions--desktop-only {
    display: none;
}

@media (min-width: 900px) {
    .cn-rc__actions--desktop-only {
        display: block;
    }

    .cn-rc__actions--mobile-only {
        display: none;
    }
}

/* ============================================================
   HOOG CONTRAST (Windows-contrastthema's)
   ------------------------------------------------------------
   In forced-colors-modus vervangt het systeem de kleuren en
   schrapt het achtergrondafbeeldingen — dus ook een gradient.
   Alle gouden tekst hangt aan `background-clip: text` met
   `-webkit-text-fill-color: transparent`, en die transparantie
   blijft wél staan. Netto: de tekst verdwijnt volledig.

   Hier zetten we de tekst terug op de systeemkleur. Dat kost
   het gouden accent, maar dat is precies de afspraak van een
   contrastthema: leesbaarheid boven merkkleur.
   ============================================================ */
@media (forced-colors: active) {
    h2.collection__title em,
    h2.collection__title i,
    h2.collection__tabs-intro-title em,
    h2.collection__tabs-intro-title i,
    h2.coaching-pricing-cards__heading em,
    h2.coaching-pricing-cards__heading i,
    .collection-list__header > h2 em,
    .collection-list__header > h2 i,
    .multicolumn__content > h2 em,
    .multicolumn__content > h2 i,
    .multicolumn__column-title em,
    .multicolumn__column-text em,
    .cn-rc__heading em,
    .cn-rc__heading i,
    .ytc__heading em,
    .ytc__heading i,
    .influencer-slider__heading em,
    .before-after__title-em,
    .before-after__winner span,
    .before-after__tag--right span,
    .image-slider__title em,
    .image-slider__title i {
        background: none;
        background-image: none;
        -webkit-background-clip: border-box;
        background-clip: border-box;
        -webkit-text-fill-color: currentColor;
        color: CanvasText;
    }
}

/* Video-banner: YouTube-thumbnail als poster.
   De thumbnail is altijd 16:9, de banner-ratio is instelbaar (op de GDC-PDP
   2,5:1 desktop / 0,6:1 mobiel). Met de standaard object-fit:cover sneed dat
   de tekst boven- en onderaan de thumbnail weg. Daarom: thumbnail volledig
   tonen met contain, en de overgebleven ruimte vullen met een uitvergrote,
   geblurde kopie van diezelfde afbeelding. Alleen actief wanneer er geen
   eigen cover image is ingesteld — met cover image blijft cover gelden. */
.video-banner__cover-image--contain {
    object-fit: contain;
}

.video-banner__cover-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* onder de contained thumbnail (z-index 1) en de overlay (z-index 1) */
    z-index: 0;
    /* scale vangt de doorzichtige randen op die blur() aan de rand oplevert */
    transform: scale(1.15);
    filter: blur(24px) saturate(1.15) brightness(0.75);
    pointer-events: none;
}

/* Video-banner: overlay-kleur los van het kleurenschema.
   Aurora zette de poster-overlay op rgb(var(--gsc-background-color), opacity),
   dus bij een licht schema kreeg je een witte waas waar je een donkere wilde.
   De sectie zet nu --gsc-video-banner-poster-overlay-color wanneer er een
   overlay-kleur is ingesteld; zonder instelling valt de fallback terug op het
   oorspronkelijke gedrag. */
.video-banner__poster-overlay {
    background: rgb(
        var(--gsc-video-banner-poster-overlay-color, var(--gsc-background-color)),
        var(--gsc-video-banner-poster-overlay-opacity)
    );
}

/* Video-banner: content-kolom.
   .video-banner__content zette wel align-items en text-align via de
   alignment-modifiers, maar was zelf geen flex-container - align-items deed
   dus niets en de play-knop (block-level flex, 6.4rem breed) bleef links
   plakken terwijl de tekst gecentreerd stond. Als kolom werken de bestaande
   alignment-classes zoals bedoeld en zit er ruimte tussen tekst en knop. */
.video-banner__content {
    display: flex;
    flex-flow: column;
    row-gap: 2rem;
}

/* Tekstkleur-instelling. Overerven alleen is niet genoeg: bundle.css zet in de
   grote heading-reset (h1..h6, .h0..., .display*, .caption*) een expliciete
   color: var(--gsc-text-color-100), en die wint van een geerfde kleur. De
   heading moet dus apart geraakt worden, met een selector die specifieker is
   dan .h2. Zonder ingestelde kleur valt alles via inherit terug op precies
   dezelfde schema-kleur als voorheen. */
.video-banner__content,
.video-banner__content .video-banner__subheading,
.video-banner__content .video-banner__heading,
.video-banner__content .video-banner__text {
    color: var(--gsc-video-banner-content-color, inherit);
>>>>>>> theirs
}

/* ============================================================
   Tablet: productkaarten als mobiele kaart

   De kaartknop toont standaard alleen het icoon; bundle.css zet het label
   ('KOOP NU') er pas bij vanaf 768px. Een iPad valt daarin, en kreeg dus de
   desktopknop op een touchscreen waar hover niet bestaat.

   Hier hetzelfde principe als bij de USP-band en de tabknoppen: de mobiele
   grens doortrekken naar 1024px in plaats van per symptoom repareren.
   ============================================================ */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .product-card__btn-wrapper--with-labels .product-card__btn-label-text,
    .product-card__btn-label-text {
        display: none;
    }

    /* Zonder label blijft de knop anders 118px breed: een leeg vlak met een
       icoontje erin. Zelfde vierkante maat als op de telefoon (40x40). */
    .product-card__btns .product-card__btn {
        width: 4rem;
        min-width: 0;
        height: 4rem;
        padding: 0;
        /* Zonder label lijnt de knopinhoud nog steeds uit alsof er tekst naast
           staat, dus het icoon hing linksonder. Expliciet centreren. */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    .product-card__btns .product-card__btn .product-card__btn-icon {
        margin: 0;
        flex: 0 0 auto;
    }

    .product-card__btns--with-text-buttons .product-card__btn-wrapper {
        flex: 0 0 auto;
        width: auto;
    }

    /* bundle.css schuift de knoppen met translateY(100%) uit beeld en haalt
       ze bij :hover terug. Dat blok begint op 768px, dus onder die grens
       bestaat de transform niet en staan de knoppen altijd in beeld.

       Een tablet valt er wel in, maar heeft geen hover: daar levert pas een
       eerste tik de knop op, en die tik opent meestal al het product. Hier
       dus dezelfde toestand als op de telefoon. */
    .product-card__actions--visible-on-hover .product-card__btns,
    .vertical-product-card__buttons--visible-on-hover {
        transform: translateY(0%);
    }

    /* Het icoon zelf faadt in bij hover en staat daarbuiten op opacity 0.
       De knop was daardoor een leeg zwart vlakje: wel zichtbaar, geen plusje.
       Zelfde toestand als op de telefoon. */
    .product-card__btn .product-card__btn-icon {
        opacity: 1;
    }
}