/** Shopify CDN: Minification failed

Line 198:2 Unexpected "{"
Line 198:3 Expected identifier but found "%"
Line 198:29 Unexpected bad string token
Line 198:81 Unterminated string token
Line 200:109 Unterminated string token
Line 415:2 Unexpected "{"
Line 415:3 Expected identifier but found "%"
Line 415:23 Unexpected bad string token
Line 415:93 Unterminated string token
Line 416:93 Unterminated string token
... and 1 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:collection-banner (INDEX:10) */
.nx-cdesc__content { overflow: hidden; transition: max-height .35s ease; }
  .nx-cdesc__content > :first-child { margin-top: 0; }
  .nx-cdesc:not(.is-open) .nx-cdesc__content { max-height: 1.7em; }
  .nx-cdesc.is-open .nx-cdesc__content { max-height: 240em; }
  .nx-cdesc__toggle {
    margin-top: .5rem; background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: .8125rem; font-weight: 600; color: currentColor;
    text-decoration: underline; text-underline-offset: 3px;
  }
  @media (prefers-reduced-motion: reduce) { .nx-cdesc__content { transition: none; } }
/* END_SECTION:collection-banner */

/* START_SECTION:nx-activity-tiles (INDEX:51) */
.nx-tiles { background: rgb(var(--background)); color: rgb(var(--text-color)); font-family: var(--text-font-family, 'Inter', system-ui, sans-serif); }
  .nx-tiles__inner { max-width: 1480px; margin: 0 auto; padding-inline: var(--container-gutter, 1.25rem); }

  .nx-tiles__eyebrow { font-family: var(--text-font-family, 'Inter', system-ui, sans-serif); font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgb(var(--text-color) / 0.6); margin: 0 0 0.5rem; }
  .nx-tiles__heading { font-family: var(--heading-font-family, 'Bebas Neue', Impact, sans-serif); font-weight: var(--heading-font-weight, 700); letter-spacing: var(--heading-letter-spacing, 0.01em); text-transform: var(--heading-text-transform, uppercase); line-height: 1; font-size: clamp(1.375rem, 1rem + 1.8vw, 2rem); margin: 0 0 clamp(1rem, 2.4vw, 1.75rem); color: rgb(var(--text-color)); }

  .nx-tiles__grid { display: grid; grid-template-columns: repeat(var(--nx-tiles-cols, 4), 1fr); gap: clamp(8px, 1.4vw, 18px); }
  @media screen and (max-width: 989px) { .nx-tiles__grid { grid-template-columns: repeat(2, 1fr); } }
  @media screen and (max-width: 519px) { .nx-tiles__grid { grid-template-columns: repeat(var(--nx-tiles-cols-m, 2), 1fr); } }

  .nx-tile { display: block; text-decoration: none; color: inherit; }
  .nx-tile--nolink { cursor: default; }
  .nx-tile__media { position: relative; aspect-ratio: var(--nx-tiles-ratio, 4 / 5); background: rgb(var(--text-color) / 0.06); overflow: hidden; outline: 0 solid rgb(var(--accent)); outline-offset: -2px; transition: outline-width .15s ease-out; }
  .nx-tile__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
  .nx-tile:not(.nx-tile--nolink):hover .nx-tile__media { outline-width: 2px; }
  .nx-tile:not(.nx-tile--nolink):hover .nx-tile__img { transform: scale(1.04); }
  .nx-tile__ph { width: 100%; height: 100%; display: grid; place-items: center; }
  .nx-tile__ph-svg { width: 34%; height: 34%; fill: rgb(var(--text-color) / 0.18); }

  /* overlay-stijl (kop op de foto, Gymshark) */
  .nx-tile__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(12px, 1.6vw, 22px); background: linear-gradient(to top, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0.1) 45%, rgb(0 0 0 / 0) 70%); }
  .nx-tiles--overlay .nx-tile__overlay .nx-tile__heading { color: #fff; }
  .nx-tiles--overlay .nx-tile__overlay .nx-tile__text { color: rgb(255 255 255 / 0.85); }

  /* heading + text (gedeeld) */
  .nx-tile__heading { font-family: var(--heading-font-family, 'Bebas Neue', Impact, sans-serif); font-weight: var(--heading-font-weight, 700); letter-spacing: var(--heading-letter-spacing, 0.01em); text-transform: var(--heading-text-transform, uppercase); line-height: 1.05; font-size: clamp(1rem, 0.85rem + 0.7vw, 1.375rem); margin: 0; }
  .nx-tile__text { font-size: 0.8125rem; line-height: 1.45; margin: 0.25rem 0 0; }

  /* below-stijl (kop onder de foto, accent-underline bij hover) */
  .nx-tiles--below .nx-tile__heading { display: inline-block; position: relative; color: rgb(var(--text-color)); margin-top: 0.875rem; }
  .nx-tiles--below .nx-tile__heading::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; background: rgb(var(--accent)); transition: width .3s cubic-bezier(.2,.8,.2,1); }
  .nx-tiles--below .nx-tile:not(.nx-tile--nolink):hover .nx-tile__heading::after { width: 100%; }
  .nx-tiles--below .nx-tile__text { color: rgb(var(--text-color) / 0.65); }

  /* reveal */
  .nx-tiles__grid--reveal .nx-tile { opacity: 0; transform: translateY(16px); }
  .nx-tiles__grid--reveal.is-revealed .nx-tile { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; transition-delay: calc(var(--nx-i) * 60ms); }
  @media (prefers-reduced-motion: reduce) {
    .nx-tile__img { transition: none; }
    .nx-tiles__grid--reveal .nx-tile { opacity: 1; transform: none; transition: none; }
  }
/* END_SECTION:nx-activity-tiles */

/* START_SECTION:nx-category-links (INDEX:54) */
.nx-catlinks {
    padding: clamp(32px, 5vw, 64px) clamp(16px, 4vw, 64px);
    background: var(--color-bg, #fff);
    color: #1c1c1c;
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
    border-top: 1px solid #e8e6e0;
  }
  .nx-catlinks__inner { max-width: 1480px; margin: 0 auto; }
  .nx-catlinks__heading {
    font-size: clamp(18px, 2.4vw, 24px);
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0 0 clamp(20px, 3vw, 36px);
  }
  .nx-catlinks__cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(24px, 3vw, 48px);
  }
  @media (max-width: 989px) { .nx-catlinks__cols { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 519px) { .nx-catlinks__cols { grid-template-columns: 1fr; } }

  .nx-catlinks__col-title {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #1c1c1c;
    margin: 0 0 14px;
  }
  .nx-catlinks__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .nx-catlinks__link {
    font-size: 13px;
    color: #6b6b6b;
    text-decoration: none;
    transition: color .15s ease;
    line-height: 1.3;
  }
  .nx-catlinks__link:hover { color: #1c1c1c; text-decoration: underline; text-underline-offset: 2px; }
  .nx-catlinks__hint { font-size: 12px; color: #9a958c; margin: 0; }

  .nx-catlinks__seo {
    margin-top: clamp(28px, 4vw, 48px);
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid #e8e6e0;
    max-width: 1000px;
    font-size: 14px;
    line-height: 1.7;
    color: #6b6b6b;
  }
  .nx-catlinks__seo h2, .nx-catlinks__seo h3 {
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #1c1c1c;
    margin: 22px 0 8px;
  }
  .nx-catlinks__seo p { margin: 0 0 12px; }
  .nx-catlinks__seo a { color: #1c1c1c; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
  .nx-catlinks__seo a:hover { color: #6b6b6b; }
/* END_SECTION:nx-category-links */

/* START_SECTION:nx-category-rail (INDEX:55) */
.nx-catrail { font-family: var(--text-font-family, 'Inter', system-ui, sans-serif); }

  .nx-catrail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(0.875rem, 1.8vw, 1.25rem); }
  .nx-catrail__eyebrow { font-family: var(--text-font-family, 'Inter', system-ui, sans-serif); font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgb(var(--text-color) / 0.6); margin: 0 0 0.5rem; }
  .nx-catrail__heading { font-family: var(--heading-font-family, 'Bebas Neue', Impact, sans-serif); font-weight: var(--heading-font-weight, 700); letter-spacing: var(--heading-letter-spacing, 0.01em); text-transform: var(--heading-text-transform, uppercase); line-height: 1; font-size: clamp(1.25rem, 1rem + 1.4vw, 1.875rem); margin: 0; color: rgb(var(--text-color)); }

  .nx-catrail__arrows { display: none; gap: 2px; flex-shrink: 0; }
  @media screen and (min-width: 700px) { .nx-catrail__arrows { display: flex; } }
  .nx-catrail__arrow { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; color: rgb(var(--text-color) / 0.45); transition: color .15s ease-out; }
  .nx-catrail__arrow:hover { color: rgb(var(--text-color)); }
  .nx-catrail__arrow:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
  .nx-catrail__arrow svg { width: 22px; height: 22px; }

  .nx-catrail__row { list-style: none; margin: 0; padding: 0 var(--container-gutter, 1.25rem) 4px; display: flex; gap: clamp(0.5rem, 1.2vw, 1rem); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nx-catrail__row::-webkit-scrollbar { display: none; }
  .nx-catrail__row:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: -2px; }
  .nx-catrail__cell { scroll-snap-align: start; }

  .nx-catrail__card { display: block; text-decoration: none; color: inherit; }
  .nx-catrail__card--nolink { cursor: default; }
  .nx-catrail__media { position: relative; aspect-ratio: var(--nx-catrail-ratio, 4 / 5); overflow: hidden; background: rgb(var(--text-color) / 0.06); outline: 0 solid rgb(var(--accent)); outline-offset: -2px; transition: outline-width .15s ease-out; }
  .nx-catrail__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
  .nx-catrail__card:not(.nx-catrail__card--nolink):hover .nx-catrail__media { outline-width: 2px; }
  .nx-catrail__card:not(.nx-catrail__card--nolink):hover .nx-catrail__img { transform: scale(1.04); }
  .nx-catrail__ph { width: 100%; height: 100%; display: grid; place-items: center; }
  .nx-catrail__ph-svg { width: 34%; height: 34%; fill: rgb(var(--text-color) / 0.18); }

  /* nav-stijl (DFYNE: compact, label gecentreerd onder beeld) */
  .nx-catrail--nav .nx-catrail__cell { flex: 0 0 clamp(130px, 40vw, 200px); }
  .nx-catrail--nav .nx-catrail__body { text-align: center; }
  .nx-catrail--nav .nx-catrail__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--text-color) / 0.7); margin: 0.625rem 0 0; }
  /* Desktop ≥1000px: kleine, links-uitgelijnde tegels in de hoek (DFYNE), uitgelijnd op de
     paginacontainer (var(--container-gutter)) zodat ze één lijn vormen met titel + product-grid.
     Geen scroll/pijlen. Mobiel + tablet blijft swipe-carousel. */
  @media screen and (min-width: 1000px) {
    .nx-catrail--nav .nx-catrail__row {
      overflow-x: visible;
      margin-inline: var(--container-gutter, 3rem);
      padding-inline: 0;
      gap: clamp(0.625rem, 1vw, 0.875rem);
      justify-content: flex-start;
    }
    .nx-catrail--nav .nx-catrail__cell { flex: 0 0 clamp(150px, 11vw, 172px); }
    .nx-catrail--nav .nx-catrail__arrows { display: none !important; }
  }

  /* card-stijl (Gymshark: groter, titel + subtekst links) */
  .nx-catrail--card .nx-catrail__cell { flex: 0 0 clamp(240px, 74vw, 320px); }
  .nx-catrail--card .nx-catrail__label { font-family: var(--heading-font-family, 'Bebas Neue', Impact, sans-serif); font-weight: var(--heading-font-weight, 700); letter-spacing: var(--heading-letter-spacing, 0.01em); text-transform: var(--heading-text-transform, uppercase); line-height: 1.05; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); color: rgb(var(--text-color)); margin: 0.75rem 0 0.25rem; }
  .nx-catrail--card .nx-catrail__text { font-size: 0.8125rem; line-height: 1.45; color: rgb(var(--text-color) / 0.72); margin: 0; }

  /* zonder afbeeldingen = clean tekst-nav */
  .nx-catrail--noimg .nx-catrail__cell { flex: 0 0 auto; }
  .nx-catrail--noimg .nx-catrail__body { padding: 0; }
  .nx-catrail--noimg .nx-catrail__label { margin: 0; }
  {%- comment -%} Zonder foto's: compacte pills i.p.v. losse onderstreepte tekst.
     De fotoversie was 215px hoog per item (265px sectie) en duwde het eerste product
     naar y=609; DFYNE heeft daar helemaal geen rail en toont z'n eerste product op y=207. {%- endcomment -%}
  .nx-catrail--noimg.nx-catrail--nav .nx-catrail__item { scroll-snap-align: start; }
  .nx-catrail--noimg.nx-catrail--nav .nx-catrail__link { display: block; }
  .nx-catrail--noimg.nx-catrail--nav .nx-catrail__label {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: 9px 15px; border: 1px solid var(--nx-line, rgba(28,28,28,.14));
    font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--nx-ink, #1c1c1c); transition: border-color .15s ease, background .15s ease;
  }
  .nx-catrail--noimg.nx-catrail--nav .nx-catrail__link:hover .nx-catrail__label,
  .nx-catrail--noimg.nx-catrail--nav .nx-catrail__link[aria-current="page"] .nx-catrail__label {
    border-color: var(--nx-ink, #1c1c1c); background: var(--nx-ink, #1c1c1c); color: #fff;
  }

  .nx-catrail__hint { font-size: 0.8125rem; color: rgb(var(--text-color) / 0.7); }

  .nx-catrail__row--reveal .nx-catrail__cell { opacity: 0; transform: translateY(14px); }
  .nx-catrail__row--reveal.is-revealed .nx-catrail__cell { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; transition-delay: calc(var(--nx-i) * 55ms); }
  @media (prefers-reduced-motion: reduce) {
    .nx-catrail__img { transition: none; }
    .nx-catrail__row { scroll-behavior: auto; }
    .nx-catrail__row--reveal .nx-catrail__cell { opacity: 1; transform: none; transition: none; }
  }
/* END_SECTION:nx-category-rail */

/* START_SECTION:nx-cbanner-tall (INDEX:57) */
[id*="collection_banner_tall"][id*="shopify-section"] .section-split__column--image img {
  object-position: center 32%;
}

@media screen and (min-width: 1000px) {
  [id*="collection_banner_tall"][id*="shopify-section"] .section-split {
    grid-template-columns: 50% 50%;
  }

  [id*="collection_banner_tall"][id*="shopify-section"] .section-split__column--image {
    max-height: 450px;
  }

  [id*="collection_banner_tall"][id*="shopify-section"] .section-split__column--image::after {
    background: linear-gradient(to right,
      rgb(var(--background) / 0) 68%,
      rgb(var(--background) / .8) 90%,
      rgb(var(--background)) 100%);
  }
}
/* END_SECTION:nx-cbanner-tall */

/* START_SECTION:nx-cbanner (INDEX:58) */
/* ── Onder 1000px: één blok in plaats van twee gestapelde ──────────────── */
@media screen and (max-width: 999px) {
  [id*="collection_banner"] .section-split {
    position: relative;
    display: block;
    background: rgb(var(--background));
  }

  /* Foto rechts, net als bij DFYNE. 68% laat links genoeg zwart over om de titel
     op een rustige ondergrond te zetten. */
  [id*="collection_banner"] .section-split__column--image {
    width: 68%;
    margin-left: auto;
    max-height: none !important;
    height: 230px;
  }

  [id*="collection_banner"] .section-split__column--image img {
    object-position: center 22%;
  }

  /* Het verloop dat DFYNE niet nodig heeft en wij wel: van de linkerrand van de foto
     naar transparant, zodat het naadloos aansluit op het zwarte vlak ernaast. */
  [id*="collection_banner"] .section-split__column--image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right,
      rgb(var(--background)) 0%,
      rgb(var(--background) / .88) 26%,
      rgb(var(--background) / .35) 62%,
      rgb(var(--background) / 0) 100%);
  }

  /* Tekstkolom over de volle breedte heen, niet eronder. */
  [id*="collection_banner"] .section-split__column.align-self-stretch {
    position: absolute;
    inset: 0;
  }

  [id*="collection_banner"] .section-split__column.align-self-stretch .content-box {
    min-height: 100%;
    padding: 20px 17px;
  }

  /* De tagline mag niet tot in het lichte deel van de foto doorlopen. DFYNE houdt
     hem op 250 van de 375, oftewel tweederde. */
  [id*="collection_banner"] .nx-cdesc { max-width: 66%; }
}
/* END_SECTION:nx-cbanner */

/* START_SECTION:nx-collection-hero (INDEX:60) */
.nx-chero {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: #f2f0ec;
  }

  .nx-chero--r21 { aspect-ratio: 2 / 1; }
  .nx-chero--r32 { aspect-ratio: 3 / 2; }
  .nx-chero--r43 { aspect-ratio: 4 / 3; }
  .nx-chero--r11 { aspect-ratio: 1 / 1; }

  .nx-chero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .nx-chero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
      rgba(12,12,12,0.72) 0%,
      rgba(12,12,12,0.34) 34%,
      rgba(12,12,12,0) 64%);
    opacity: calc(var(--nx-chero-scrim, 55) / 55);
  }

  .nx-chero__inner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 17px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .nx-chero--center .nx-chero__inner { align-items: center; text-align: center; }

  .nx-chero__eyebrow {
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
    opacity: .85;
  }

  .nx-chero__title {
    margin: 0;
    font-family: var(--heading-font-family, 'Bebas Neue', Impact, sans-serif);
    font-weight: 400;
    font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
    line-height: .9;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #fff;
  }

  .nx-chero__tagline {
    margin: 2px 0 0;
    max-width: 34ch;
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
    font-size: 13px;
    line-height: 1.4;
    color: #fff;
    opacity: .92;
  }

  @media (min-width: 990px) {
    .nx-chero {
      aspect-ratio: auto;
      height: var(--nx-chero-dh, 300px);
    }
    .nx-chero__inner { padding: 26px 40px 24px; }
    .nx-chero__tagline { font-size: 14px; }
  }

  .nx-collection-hero-section ~ .shopify-section .nx-cintro__heading,
  .nx-collection-hero-section ~ .shopify-section .nx-cintro__tags {
    display: none;
  }
  .nx-collection-hero-section ~ .shopify-section .nx-cintro__inner { padding-top: 14px; }
/* END_SECTION:nx-collection-hero */

/* START_SECTION:nx-collection-intro (INDEX:61) */
.nx-cintro {
    padding: clamp(16px, 2.4vw, 32px) var(--container-gutter, 2rem) clamp(10px, 1.6vw, 16px);
    color: #1c1c1c;
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
  }
  /* Links uitgelijnd op de paginacontainer (niet gecentreerd) → titel staat in de hoek,
     op één lijn met de category-rail en het product-grid. Cap houdt tekst leesbaar. */
  .nx-cintro__inner { max-width: 1480px; margin: 0; }

  .nx-cintro__eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: 1.6px;
    text-transform: uppercase; color: #6b6b6b; margin: 0 0 10px;
  }
  .nx-cintro__heading {
    font-family: var(--heading-font-family, 'Bebas Neue', Impact, sans-serif);
    font-weight: var(--heading-font-weight, 700);
    letter-spacing: var(--heading-letter-spacing, -0.01em);
    text-transform: var(--heading-text-transform, uppercase);
    line-height: 0.98; margin: 0; color: #1c1c1c;
  }
  {%- comment -%} DFYNE's collectietitel is 19px/600 met 1,5px tracking en slechts 18px hoog.
     NX stond op 28px (1.75rem) -> te dominant. Bebas is condensed, dus we houden 'm net iets
     boven DFYNE (1.375rem = 22px mobiel) en laten 'm rustiger meeschalen op desktop. {%- endcomment -%}
  .nx-cintro--dfyne .nx-cintro__heading { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); letter-spacing: .02em; }
  .nx-cintro--gymshark .nx-cintro__heading { font-size: clamp(2.125rem, 1.3rem + 3.6vw, 3.75rem); }
  .nx-cintro--gymshark .nx-cintro__desc { font-size: 16px; }
  .nx-cintro__count { font-size: 12px; color: var(--nx-ink-3, #9a9a9a); margin: 6px 0 0; }

  /* margin/padding-left geforceerd op 0 → tags strak onder de titel (Snow geeft ul/li een lijst-inspring). */
  .nx-cintro__tags { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin: 12px 0 0 !important; padding: 0 !important; }
  .nx-cintro__tag { position: relative; font-size: 12px; font-weight: 600; color: var(--nx-ink-2, #5a5a5a); margin-left: 0 !important; padding-left: 0 !important; }
  .nx-cintro__tag:not(:first-child)::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 1px; height: 0.9em; background: rgba(28,28,28,0.25); }

  .nx-cintro__desc-wrap { margin-top: clamp(14px, 2vw, 20px); max-width: 680px; }
  .nx-cintro__desc { font-size: 15px; line-height: 1.6; color: #3a3a3a; }
  .nx-cintro__desc > :first-child { margin-top: 0; }
  .nx-cintro__desc > :last-child { margin-bottom: 0; }
  .nx-cintro__desc-wrap.is-collapsible .nx-cintro__desc {
    display: -webkit-box; -webkit-line-clamp: var(--nx-cintro-lines, 3);
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .nx-cintro__desc-wrap.is-collapsible.is-open .nx-cintro__desc {
    display: block; -webkit-line-clamp: unset; overflow: visible;
  }
  .nx-cintro__toggle {
    margin-top: 10px; padding: 0; background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 700; color: #1c1c1c;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .nx-cintro__toggle:hover { color: #1c1c1c; }

  /* --- Drawer-variant (DFYNE): 1 regel teaser + inschuivend paneel --- */
  .nx-cintro__desc--teaser {
    display: -webkit-box; -webkit-line-clamp: var(--nx-cintro-lines, 1);
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .nx-cintro__drawer-open {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
    padding: 0; background: none; border: 0; cursor: pointer; font: inherit;
    font-size: 14px; font-weight: 700; color: #1c1c1c;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .nx-cintro__drawer-open svg { transition: transform .2s ease; }
  .nx-cintro__drawer-open:hover { color: #1c1c1c; }
  .nx-cintro__drawer-open:hover svg { transform: translateY(1px); }

  .nx-cintro__drawer[hidden] { display: none; }
  .nx-cintro__drawer { position: fixed; inset: 0; z-index: 1000; font-family: var(--text-font-family, 'Inter', system-ui, sans-serif); }
  .nx-cintro__drawer-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,.5);
    opacity: 0; transition: opacity .3s ease;
  }
  .nx-cintro__drawer-panel {
    position: absolute; top: 0; right: 0; height: 100%; width: min(460px, 92vw);
    background: #fff; color: #1c1c1c; display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .4s cubic-bezier(.16,1,.3,1);
    border-left: 1px solid rgba(0,0,0,.12); will-change: transform;
  }
  .nx-cintro__drawer.is-open .nx-cintro__drawer-overlay { opacity: 1; }
  .nx-cintro__drawer.is-open .nx-cintro__drawer-panel { transform: translateX(0); }
  .nx-cintro__drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 24px; border-bottom: 1px solid rgba(28,28,28,.1); flex: 0 0 auto;
  }
  .nx-cintro__drawer-title {
    margin: 0; font-family: var(--heading-font-family, 'Bebas Neue', Impact, sans-serif);
    font-weight: var(--heading-font-weight, 700); text-transform: uppercase;
    letter-spacing: .01em; font-size: 1.5rem; line-height: 1;
  }
  .nx-cintro__drawer-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin: -6px -8px -6px 0; padding: 0;
    background: none; border: 0; cursor: pointer; color: #1c1c1c;
  }
  .nx-cintro__drawer-close:hover { color: #1c1c1c; }
  .nx-cintro__drawer-body {
    padding: 24px; overflow-y: auto; font-size: 15px; line-height: 1.65; color: #3a3a3a;
    -webkit-overflow-scrolling: touch;
  }
  .nx-cintro__drawer-body > :first-child { margin-top: 0; }
  .nx-cintro__drawer-body > :last-child { margin-bottom: 0; }

  /* Drawer-inhoud (DFYNE): beeld edge-to-edge → beschrijving → kenmerk-balkjes → andere collecties */
  .nx-cintro__drawer-media { margin: -24px -24px 20px; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(28,28,28,.06); }
  .nx-cintro__drawer-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .nx-cintro__drawer-desc { font-size: 15px; line-height: 1.65; color: #3a3a3a; text-align: center; }
  .nx-cintro__drawer-desc > :first-child { margin-top: 0; }
  .nx-cintro__drawer-desc > :last-child { margin-bottom: 0; }
  .nx-cintro__drawer-sep { height: 1px; background: rgba(28,28,28,.12); margin: 24px 0; }
  .nx-cintro__drawer-subhead { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #1c1c1c; text-align: center; }
  .nx-cintro__feats { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 26px; }
  .nx-cintro__feat { display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; padding: 0 !important; }
  .nx-cintro__feat-bar { display: inline-flex; gap: 3px; }
  .nx-cintro__feat-seg { width: 8px; height: 11px; background: rgba(28,28,28,.2); }
  .nx-cintro__feat-seg.is-on { background: #1c1c1c; }
  .nx-cintro__feat-label { font-size: 13px; font-weight: 600; color: #1c1c1c; }
  .nx-cintro__explore { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .nx-cintro__explore-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 24px; border: 1px solid #1c1c1c; border-radius: 0;
    font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: #1c1c1c; text-decoration: none; transition: background .2s ease, color .2s ease;
  }
  .nx-cintro__explore-btn:hover { background: #1c1c1c; color: #fff; }

  body.nx-drawer-lock { overflow: hidden; }

  @media (max-width: 749px) {
    .nx-cintro__drawer-panel {
      top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto;
      max-height: 82vh; transform: translateY(100%);
      border-top: 1px solid rgba(0,0,0,.12);
    }
    .nx-cintro__drawer.is-open .nx-cintro__drawer-panel { transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-cintro__drawer-overlay, .nx-cintro__drawer-panel { transition: none; }
  }

  .nx-cintro__links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: clamp(16px, 2vw, 22px) 0 0; padding: 0; }
  .nx-cintro__link { font-size: 14px; font-weight: 600; color: #3a3a3a; text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; }
  .nx-cintro__link:hover { color: #1c1c1c; }
/* END_SECTION:nx-collection-intro */

/* START_SECTION:nx-collection-nav (INDEX:62) */
.nx-catrail.nx-catrail--noimg {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .nx-catrail.nx-catrail--noimg .nx-catrail__head { margin-bottom: 0; }

  .nx-catrail.nx-catrail--noimg .nx-catrail__row {
    gap: 24px;
    margin-left: 0;
    padding: 12px 17px 0;
    scroll-padding-left: 17px;
    border-bottom: 1px solid rgba(0,0,0,.2);
    align-items: stretch;
  }

  .nx-catrail.nx-catrail--noimg .nx-catrail__cell { padding-left: 0; }
  .nx-catrail.nx-catrail--noimg .nx-catrail__card { position: relative; }

  .nx-catrail.nx-catrail--noimg .nx-catrail__label,
  .nx-catrail.nx-catrail--noimg .nx-catrail__card:hover .nx-catrail__label {
    border: 0;
    background: none;
    padding: 12px 0 18px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .06em;
    color: #1a1a1a;
    white-space: nowrap;
  }

  .nx-catrail.nx-catrail--noimg .nx-catrail__card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: #1a1a1a;
    transform: scaleX(0);
    transition: transform .18s ease;
  }

  .nx-catrail.nx-catrail--noimg .nx-catrail__card.is-on::after { transform: scaleX(1); }

  @media (hover: hover) {
    .nx-catrail.nx-catrail--noimg .nx-catrail__card:hover::after { transform: scaleX(1); opacity: .3; }
    .nx-catrail.nx-catrail--noimg .nx-catrail__card.is-on:hover::after { opacity: 1; }
  }

  .nx-crail-host {
    display: none;
    margin-left: auto;
    padding: 0 0 12px 28px;
    align-items: center;
    scroll-snap-align: none;
    flex: 0 0 auto;
  }

  @media (min-width: 990px) {
    .nx-crail-host { display: flex; }
    .nx-crail-host .nx-crail {
      border-bottom: 0;
      padding: 0;
      gap: 17px;
      overflow: visible;
      display: flex !important;
    }
    .nx-crail-host .nx-crail__disc { width: 20px; height: 20px; }
    .nx-crail-host .nx-crail__active { display: none; }
  }

  /* Snow collection-banner, split-layout: hoogte begrenzen.
     Een staande 2:3 collectiefoto wordt anders 960px hoog op desktop en
     562px op mobiel. Bijsnijden vanaf boven zodat gezichten in beeld blijven.
     Gericht op de banner-sectie zelf, niet op alle .section-split in het thema. */
  .shopify-section[id*="__banner"] .section-split__column--image {
    max-height: 320px;
    overflow: hidden;
  }
  .shopify-section[id*="__banner"] .section-split__column--image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: center 18%;
  }

  @media (min-width: 700px) {
    .shopify-section[id*="__banner"] .section-split__column--image { max-height: 460px; }
    .shopify-section[id*="__banner"] .section-split__column--image img { height: 460px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .nx-catrail.nx-catrail--noimg .nx-catrail__card::after { transition: none; }
  }
/* END_SECTION:nx-collection-nav */

/* START_SECTION:nx-color-rail (INDEX:63) */
.nx-crail {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 17px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid rgba(0,0,0,.2);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nx-crail::-webkit-scrollbar { display: none; }

  @media (min-width: 990px) {
    .nx-crail--mobile { display: none; }
  }

  .nx-crail__active {
    flex: 0 0 auto;
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #1a1a1a;
  }

  .nx-crail__dot {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
    text-decoration: none;
    outline-offset: 4px;
  }

  .nx-crail__disc {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c, #d9d6d0);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
    transition: box-shadow .15s ease;
  }

  .nx-crail__dot:hover .nx-crail__disc {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), 0 0 0 1px #1a1a1a;
  }

  .nx-crail__dot.is-active .nx-crail__disc {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), 0 0 0 2px #fff, 0 0 0 3px #1a1a1a;
  }

  .nx-crail--lab { align-items: flex-start; }
  .nx-crail--lab .nx-crail__dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    line-height: 1;
  }
  .nx-crail__name {
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
    font-size: 9px;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #4a4a4a;
  }
  .nx-crail--lab .nx-crail__dot.is-active .nx-crail__name { color: #1a1a1a; font-weight: 600; }

  @media (prefers-reduced-motion: reduce) { .nx-crail__disc { transition: none; } }
/* END_SECTION:nx-color-rail */

/* START_SECTION:nx-color-spotlight (INDEX:65) */
.nx-spot { background: rgb(var(--background)); color: rgb(var(--text-color)); font-family: var(--text-font-family, 'Inter', system-ui, sans-serif); }
  .nx-spot__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
  .nx-spot__eyebrow { font-family: var(--text-font-family, 'Inter', system-ui, sans-serif); font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgb(var(--text-color) / 0.6); margin: 0 0 0.5rem; }
  .nx-spot__heading { font-family: var(--heading-font-family, 'Bebas Neue', Impact, sans-serif); font-weight: var(--heading-font-weight, 700); letter-spacing: var(--heading-letter-spacing, 0.01em); text-transform: var(--heading-text-transform, uppercase); line-height: 1; font-size: clamp(1.375rem, 1rem + 1.8vw, 2.25rem); margin: 0 0 clamp(0.875rem, 1.6vw, 1.25rem); color: rgb(var(--text-color)); }

  /* Kleur-thumbnails: groter, flush, scroll-navigatie */
  .nx-spot__swatches { display: flex; flex-wrap: wrap; gap: 4px; }
  .nx-spot__swatch { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; }
  .nx-spot__swatch-img { width: 72px; height: 72px; object-fit: cover; object-position: center top; display: block; outline: 1px solid rgb(var(--text-color) / 0.12); outline-offset: -1px; transition: outline-color .15s ease-out, opacity .15s ease-out; opacity: 0.62; }
  @media screen and (min-width: 1000px) { .nx-spot__swatch-img { width: 84px; height: 84px; } }
  .nx-spot__swatch-dot { width: 30px; height: 30px; border-radius: 999px; display: block; outline: 1px solid rgb(var(--text-color) / 0.15); outline-offset: 2px; opacity: 0.7; transition: opacity .15s ease-out, outline-color .15s ease-out; }
  .nx-spot__swatch-label { font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--text-color) / 0.55); transition: color .15s ease-out; }
  .nx-spot__swatch:hover .nx-spot__swatch-img, .nx-spot__swatch:hover .nx-spot__swatch-dot { opacity: 1; }
  .nx-spot__swatch.is-active .nx-spot__swatch-img { outline: 2px solid rgb(var(--text-color)); opacity: 1; }
  .nx-spot__swatch.is-active .nx-spot__swatch-dot { outline: 2px solid rgb(var(--text-color)); opacity: 1; }
  .nx-spot__swatch.is-active .nx-spot__swatch-label { color: rgb(var(--text-color)); font-weight: 700; }
  .nx-spot__swatch:focus-visible .nx-spot__swatch-img, .nx-spot__swatch:focus-visible .nx-spot__swatch-dot { outline: 2px solid rgb(var(--accent)); opacity: 1; }

  /* VIEW ALL: outlined knop rechtsboven (NX-strak, 0px radius) */
  .nx-spot__viewall { flex-shrink: 0; align-self: flex-start; border: 1px solid rgb(var(--text-color) / 0.35); padding: 11px 24px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--text-color)); text-decoration: none; white-space: nowrap; transition: background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out; }
  .nx-spot__viewall:hover { background: rgb(var(--text-color)); color: rgb(var(--background)); border-color: rgb(var(--text-color)); }

  /* Eén doorlopende rail (alle kleuren achter elkaar) */
  .nx-spot__scroller { position: relative; }
  .nx-spot__rail { list-style: none; margin: 0; padding: 0 0 4px var(--container-gutter, 1.25rem); display: flex; align-items: flex-start; gap: clamp(8px, 1vw, 14px); overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: smooth; }
  .nx-spot__rail::-webkit-scrollbar { display: none; }
  .nx-spot__cell { flex: 0 0 72vw; scroll-snap-align: start; }
  @media screen and (min-width: 700px) { .nx-spot__cell { flex-basis: 40vw; } }
  @media screen and (min-width: 1000px) { .nx-spot__cell { flex-basis: clamp(280px, 24vw, 340px); } }
  /* productkaart = Snow's native 'product-card' snippet (vendor/rating/badges/hover). Geen eigen kaart-CSS meer. */

  /* Desktop scroll-pijlen */
  .nx-spot__nav { position: absolute; top: 38%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; display: none; align-items: center; justify-content: center; background: rgb(var(--background)); color: rgb(var(--text-color)); border: 1px solid rgb(var(--text-color) / 0.18); border-radius: 999px; cursor: pointer; font-size: 18px; line-height: 1; padding: 0; transition: background-color .15s ease-out, color .15s ease-out; box-shadow: 0 2px 10px rgb(0 0 0 / 0.08); }
  .nx-spot__nav:hover { background: rgb(var(--text-color)); color: rgb(var(--background)); }
  .nx-spot__nav[hidden] { display: none !important; }
  .nx-spot__nav--prev { left: 10px; }
  .nx-spot__nav--next { right: 10px; }
  @media screen and (min-width: 1000px) { .nx-spot__nav { display: flex; } }

  .nx-spot__hint { font-size: 0.8125rem; color: rgb(var(--text-color) / 0.7); }

  @media (prefers-reduced-motion: reduce) { .nx-spot__img { transition: none; } .nx-spot__rail { scroll-behavior: auto; } }
/* END_SECTION:nx-color-spotlight */

/* START_SECTION:nx-color-swatches (INDEX:66) */
.nx-colorways {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
  }

  .nx-colorways__label {
    display: flex;
    gap: 6px;
    align-items: baseline;
    font-size: 12px;
    font-weight: 700;
    color: #1c1c1c;
    letter-spacing: 0.5px;
  }
  .nx-colorways__label-text {
    text-transform: uppercase;
    color: #6b6b6b;
    letter-spacing: 1.5px;
    font-size: 10px;
  }
  .nx-colorways__current {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: 12px;
  }

  .nx-colorways__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .nx-colorways__swatch {
    position: relative;
    width: 48px;
    height: 48px;
    overflow: hidden;
    background: #f7f5f0;
    border: 1px solid #e8e6e0;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s ease;
    display: block;
  }
  .nx-colorways__swatch img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .nx-colorways__swatch:hover {
    transform: translateY(-2px);
    border-color: #1c1c1c;
  }

  .nx-colorways__swatch.is-active {
    border: 2px solid #1c1c1c;
    transform: translateY(-2px);
  }

  .nx-colorways__check {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: #B6FF4D;
    color: #1c1c1c;
    display: grid;
    place-items: center;
    z-index: 2;
  }

  .nx-colorways__oos {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.6);
    z-index: 1;
    pointer-events: none;
  }
  .nx-colorways__oos::after {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1px;
    background: #1c1c1c;
    transform: rotate(-45deg);
  }

  .nx-colorways__count {
    font-size: 11px;
    color: #6b6b6b;
    margin: 0;
    letter-spacing: 0.3px;
  }

  @media (prefers-reduced-motion: reduce) {
    .nx-colorways__swatch { transition: none; }
    .nx-colorways__swatch:hover, .nx-colorways__swatch.is-active { transform: none; }
  }
/* END_SECTION:nx-color-swatches */

/* START_SECTION:nx-density (INDEX:67) */
/* ── Kleurenrails (nx-color-shop) ─────────────────────────────── */
/* De sectie-padding komt uit instellingen per sectie (padding_top/bottom = 56).
   Overschrijven i.p.v. de instelling wijzigen, zodat alle vier de rails in één keer
   meegaan en er niets per sectie handmatig gelijk gehouden hoeft te worden. */
.nx-spot {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

.nx-spot__head { margin-bottom: 16px !important; }
.nx-spot__eyebrow { margin-bottom: 6px !important; }
.nx-spot__heading { margin-bottom: 12px !important; }

@media screen and (min-width: 1000px) {
  .nx-spot__swatch-img { width: 60px !important; height: 60px !important; }
  .nx-spot__more { width: 60px !important; height: 60px !important; font-size: 22px !important; }
  .nx-spot__cell { flex-basis: clamp(240px, 21vw, 288px) !important; }
}

/* Foto 2:3 -> 4:5, alleen binnen de rails. De img staat absoluut in de media-wrapper,
   dus de ratio moet op de wrapper en de img moet 'm vullen. */
.nx-spot__cell .product-card__media {
  aspect-ratio: 4 / 5 !important;
  overflow: hidden;
}

.nx-spot__cell .product-card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* ── Athlete styles ─────────────────────────────────────── */
.nxas {
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}

.nxas__media { aspect-ratio: 4 / 5 !important; }

@media screen and (min-width: 1000px) {
  /* Twee tegels van 586px vulden de volle 1280px en werden daardoor 781px hoog.
     Met een max-width worden ze 436px breed en 545px hoog, en staat het blok
     gecentreerd zoals de rest van de pagina. */
  .nxas__scroller {
    max-width: 980px;
    margin-inline: auto;
  }
}

/* ── Collectiekaarten (nx-collection-cards) ──────────────────────── */
/* De sectie stond op `repeat(auto-fit, minmax(240px, 1fr))`. Met zes tegels in 1124px
   bruikbare breedte paste dat op vier kolommen, dus viel de vijfde en zesde naar een
   tweede rij: 2 x 363px = 989px sectie. Deze tegels zijn navigatie, geen producten;
   één rij is genoeg en dat is ook wat DFYNE's collectie-carousel doet.
   minmax(150px) i.p.v. repeat(6): bij minder dan zes blokken blijven de kolommen kloppen. */
@media screen and (min-width: 1000px) {
  .nxcc__scroller {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }
}

/* ── Collectie-banner (Snow's collection-banner, layout "split") ───────── */
/* 🔑 DE COLLECTIEFOTO'S ZIJN PORTRET (1366x2048). In de split-layout krijgt de
   fotokolom de halve schermbreedte, dus op 1440px werd dat 720 breed en
   **1079px hoog** — een collectiekop van meer dan een volledig scherm.
   Snow heeft geen hoogte-instelling voor de split-layout (image_size geldt alleen
   voor "background"), dus dat moet hier.
   De scope is [id*="collection_banner"], want dat is de sectie-key die wij in
   alle collection-templates gebruiken. Zo blijft de split-layout van de nieuwsbrief
   en text-with-media onaangeroerd. */
[id*="collection_banner"] .section-split__column--image {
  max-height: 280px;
  overflow: hidden;
  position: relative;
}

/* 🔑 22% en niet 35%: bij een staande foto in een liggend vak bepaalt dit hoe hoog
   je in het beeld kijkt. Op 35% sneed de bovenrand door de hoofden van de modellen.
   Lager percentage = meer van de bovenkant, dus de hoofden er volledig op. */
[id*="collection_banner"] .section-split__column--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

/* ── Merkbanner strakker, naar DFYNE's Impact/Vision (8 aug 2026) ──────────
   Wat het verschil maakte in de vergelijking met eu.dfyne.com/collections/impact:
     1. hun titel is ~43px, de onze was 22px
     2. hun beeld heeft het overwicht, bij ons stond 50/50
     3. bij hen loopt het beeld met een verloop het tekstvlak in; bij ons stond er
        een kaarsrechte naad tussen foto en zwart blok
     4. hun tagline is kort en op één gewicht
   Punt 1 zit in de templates (collection_title_size: h4), de rest hier.
   ⚠ Het tekstvlak hoort scheme-2 te zijn (zwart 28 28 28, witte tekst). Op scheme-1
     wordt het vlak wit en verliest de banner het DFYNE-contrast. Dat staat in de
     vier merk-templates, niet hier. */
@media screen and (min-width: 700px) {
  [id*="collection_banner"] .section-split__column--image { max-height: 360px; }
}

@media screen and (min-width: 1000px) {
  /* Beeld het overwicht geven. Grid, dus dit stuurt beide kolommen in één regel. */
  [id*="collection_banner"] .section-split {
    grid-template-columns: 60% 40%;
  }

  /* Het verloop pakt de achtergrondkleur van het kleurenschema op, dus dit blijft
     kloppen als het schema ooit wijzigt. Pas vanaf 55% zichtbaar, zodat er niets
     van de modellen in verdwijnt. */
  [id*="collection_banner"] .section-split__column--image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right,
      rgb(var(--background) / 0) 55%,
      rgb(var(--background) / .8) 86%,
      rgb(var(--background)) 100%);
  }
}

/* Snow klapt de beschrijving in met `max-height: 1.7em` (stylesheet van
   collection-banner.liquid). Dat snijdt de tekst hard af, midden in een woord en
   zonder beletselteken: "...onze meest gewaagde, high-". Met line-clamp breekt hij
   netjes op de regelgrens af en zet de browser er zelf een … achter.
   De volledige tekst blijft in de HTML staan, dus SEO verliest niets — zie
   project_nx_collection_pages over waarom die beschrijving niet weg mag. */
[id*="collection_banner"] .nx-cdesc:not(.is-open) .nx-cdesc__content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-height: none;
  overflow: hidden;
}

/* Uitgeklapt weer een gewone tekstblok, anders blijft de clamp staan. */
[id*="collection_banner"] .nx-cdesc.is-open .nx-cdesc__content {
  display: block;
}

/* De eerste zin van elke collectiebeschrijving staat in <strong>. Ingeklapt is dat
   precies de regel onder de titel, en vet leest die als een tweede kop. */
[id*="collection_banner"] .nx-cdesc:not(.is-open) .nx-cdesc__content strong {
  font-weight: 400;
}

/* "Lees meer" mag de titel niet beconcurreren; DFYNE heeft er helemaal geen. */
[id*="collection_banner"] .nx-cdesc__toggle {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .65;
}

[id*="collection_banner"] .nx-cdesc__toggle:hover { opacity: 1; }
/* END_SECTION:nx-density */

/* START_SECTION:nx-free-shipping-bar (INDEX:69) */
.nx-shipping-bar {
    background: #1c1c1c;
    color: #fff;
    padding: 14px 20px;
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
    border-bottom: 1px solid #2c2c2c;
  }
  .nx-shipping-bar__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  .nx-shipping-bar__text {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0;
    line-height: 1.3;
    flex: 1;
  }
  .nx-shipping-bar__text strong {
    color: #B6FF4D;
    font-weight: 900;
    letter-spacing: -0.02em;
  }
  .nx-shipping-bar__amount {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #B6FF4D;
    white-space: nowrap;
  }
  .nx-shipping-bar__track {
    width: 100%;
    height: 4px;
    background: #2c2c2c;
    overflow: hidden;
    position: relative;
  }
  .nx-shipping-bar__fill {
    height: 100%;
    width: 0%;
    background: #B6FF4D;
    transition: width .5s cubic-bezier(.2,.8,.2,1);
    will-change: width;
  }

  .nx-shipping-bar.is-unlocked .nx-shipping-bar__text {
    color: #B6FF4D;
  }
  .nx-shipping-bar.is-unlocked .nx-shipping-bar__text strong {
    color: #fff;
  }
  .nx-shipping-bar.is-unlocked .nx-shipping-bar__amount {
    color: #fff;
  }

  @media (prefers-reduced-motion: reduce) {
    .nx-shipping-bar__fill { transition: none; }
  }
/* END_SECTION:nx-free-shipping-bar */

/* START_SECTION:nx-guides-rail (INDEX:71) */
.nx-guides { font-family: var(--text-font-family, 'Inter', system-ui, sans-serif); }

  .nx-guides__head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
  }
  .nx-guides__eyebrow {
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
    font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase;
    color: rgb(var(--text-color) / 0.6); margin: 0 0 0.5rem;
  }
  .nx-guides__heading {
    font-family: var(--heading-font-family, 'Bebas Neue', Impact, sans-serif);
    font-weight: var(--heading-font-weight, 700); font-style: var(--heading-font-style, normal);
    letter-spacing: var(--heading-letter-spacing, 0.01em); text-transform: var(--heading-text-transform, uppercase);
    line-height: var(--heading-line-height, 1); font-size: clamp(1.25rem, 1rem + 1.4vw, 1.875rem);
    margin: 0; color: rgb(var(--text-color));
  }
  .nx-guides__viewall {
    font-size: 0.8125rem; font-weight: 600; color: rgb(var(--text-color));
    text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; flex-shrink: 0;
  }

  /* mobiel = swipe-rail */
  .nx-guides__row {
    list-style: none; margin: 0; padding: 0 var(--container-gutter, 1.25rem) 4px;
    display: flex; gap: clamp(0.75rem, 1.5vw, 1.25rem);
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .nx-guides__row::-webkit-scrollbar { display: none; }
  .nx-guides__row:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: -2px; }
  .nx-guides__cell { flex: 0 0 clamp(260px, 78vw, 360px); scroll-snap-align: start; }

  /* desktop = 3-koloms grid (contained) */
  @media screen and (min-width: 1000px) {
    .nx-guides__row {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem);
      overflow: visible;
      max-width: var(--container-max-width, 100%);
      margin-inline: auto;
      padding-inline: var(--container-gutter, 3rem);
    }
    .nx-guides__cell { flex: initial; }
  }

  .nx-guides__card { display: block; text-decoration: none; color: inherit; }
  .nx-guides__card--nolink { cursor: default; }
  .nx-guides__media {
    position: relative; aspect-ratio: var(--nx-guides-ratio, 3 / 2); overflow: hidden; margin-bottom: 0.875rem;
    background: rgb(var(--text-color) / 0.06);
    outline: 0 solid rgb(var(--accent)); outline-offset: -2px; transition: outline-width .15s ease-out;
  }
  .nx-guides__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
  .nx-guides__card:not(.nx-guides__card--nolink):hover .nx-guides__media { outline-width: 2px; }
  .nx-guides__card:not(.nx-guides__card--nolink):hover .nx-guides__img { transform: scale(1.04); }
  .nx-guides__ph { width: 100%; height: 100%; display: grid; place-items: center; }
  .nx-guides__ph-svg { width: 36%; height: 36%; fill: rgb(var(--text-color) / 0.18); }

  .nx-guides__cat {
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
    font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgb(var(--text-color) / 0.6); margin: 0 0 0.4rem;
  }
  .nx-guides__title {
    font-family: var(--heading-font-family, 'Bebas Neue', Impact, sans-serif);
    font-weight: var(--heading-font-weight, 700); letter-spacing: var(--heading-letter-spacing, 0.01em);
    text-transform: var(--heading-text-transform, uppercase); line-height: 1.05;
    font-size: clamp(1.0625rem, 0.9rem + 0.8vw, 1.375rem); margin: 0 0 0.4rem; color: rgb(var(--text-color));
  }
  .nx-guides__text { font-size: 0.875rem; line-height: 1.5; color: rgb(var(--text-color) / 0.75); margin: 0 0 0.6rem; }
  .nx-guides__link {
    display: inline-block; font-size: 0.8125rem; font-weight: 600; color: rgb(var(--text-color));
    text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  }
  .nx-guides__hint { font-size: 0.8125rem; color: rgb(var(--text-color) / 0.7); }

  /* reveal */
  .nx-guides__row--reveal .nx-guides__cell { opacity: 0; transform: translateY(16px); }
  .nx-guides__row--reveal.is-revealed .nx-guides__cell {
    opacity: 1; transform: none;
    transition: opacity .5s ease-out, transform .5s ease-out;
    transition-delay: calc(var(--nx-i) * 70ms);
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-guides__img { transition: none; }
    .nx-guides__row { scroll-behavior: auto; }
    .nx-guides__row--reveal .nx-guides__cell { opacity: 1; transform: none; transition: none; }
  }
/* END_SECTION:nx-guides-rail */

/* START_SECTION:nx-mdrawer-foot (INDEX:74) */
@media screen and (max-width: 989px) {
  /* ── Service-navigatie: 2x2, uitgelijnd op dezelfde 24px als de menu-items ── */
  .menu-drawer .nx-mutil {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 2px;
    margin-top: 20px;
    padding: 16px 24px 8px;
    border-top: 1px solid rgb(var(--text-color) / 0.12);
  }

  .menu-drawer .nx-mutil__link {
    display: flex;
    align-items: center;
    min-height: 32px;
    font-size: 11px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0.03em;
    text-transform: none;
    color: rgb(var(--text-color) / 0.65);
    text-decoration: none;
  }

  .menu-drawer .nx-mutil__link:hover,
  .menu-drawer .nx-mutil__link:focus-visible {
    color: rgb(var(--text-color));
  }

  /* ── Socials: eronder, op dezelfde marge, zelfde hairline ─────────── */
  /* Snow centreert deze balk en geeft hem eigen padding. Dat botste met de
     linkslijning van alles erboven, waardoor de iconen als los blok voelden.
     De extra .menu-drawer in de selector is nodig omdat theme.css NA styles.css
     laadt: bij gelijke specificiteit wint Snow anders. */
  .menu-drawer .menu-drawer__footer-item {
    padding: 14px 24px max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid rgb(var(--text-color) / 0.12);
  }

  /* ⚠ justify-content heeft !important nodig, gap en padding niet. Snow zet de
     uitlijning van .social-media met een selector die ook op specificiteit wint
     van .menu-drawer .menu-drawer__footer-item .social-media (0,3,0). Zonder dit
     blijven de vier iconen space-between over de volle breedte staan, terwijl
     alles erboven links uitlijnt. Gemeten: iconen op x 24 / 127 / 230 / 333. */
  .menu-drawer .menu-drawer__footer-item .social-media {
    display: flex;
    justify-content: flex-start !important;
    gap: 22px;
    margin: 0;
    padding: 0;
  }

  .menu-drawer .menu-drawer__footer-item .social-media a {
    color: rgb(var(--text-color) / 0.75);
  }

  .menu-drawer .menu-drawer__footer-item .social-media svg {
    width: 18px;
    height: 18px;
  }
}
/* END_SECTION:nx-mdrawer-foot */

/* START_SECTION:nx-mdrawer (INDEX:75) */
@media screen and (max-width: 989px) {
  /* De items dragen zelf de 24px zijmarge, zoals bij DFYNE, zodat een
     actieve of aangeraakte regel over de volle breedte kan oplichten en de
     beeldtegels tot de rand doorlopen.
     Snow zet op .menu-drawer__panel-body een padding van 35,2px 24px. Zonder
     de dubbele klasse hieronder wint die regel en krijg je 48px marge in plaats
     van 24px. De selector eist .nx-mbody, dus de zoek- en cart-drawer blijven
     onaangeroerd. */
  .menu-drawer__panel-body.nx-mbody {
    padding-inline: 0;
    padding-block: 8px 0;
  }

  /* ── Drawer over de hele pagina, zoals DFYNE ────────── */
  /* De drawer begon op y=128, onder de announcement-balk en de header. Twee
     oorzaken, allebei nagemeten:
     1. De startpositie zit in de shadow DOM op [part="content"]. Die is alleen
        bereikbaar via ::part(), niet met een gewone selector.
     2. Daarna bleef position:fixed toch hangen, omdat de header-sectie
        will-change:transform heeft. Dat maakt een containing block voor
        fixed-elementen. Alleen terwijl de drawer open is zetten we dat uit;
        de pagina scrollt dan toch niet. */
  body:has(#menu-drawer[open]) .shopify-section-group-header-group {
    will-change: auto;
  }

  header-menu-drawer#menu-drawer::part(content) {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    z-index: 60;
  }

  header-menu-drawer#menu-drawer::part(overlay) {
    position: fixed;
    inset: 0;
    height: 100dvh;
    z-index: 59;
  }

  /* ── Kopregel met sluitknop ────────────────── */
  .nx-mtop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 14px;
    padding-top: max(6px, env(safe-area-inset-top));
  }

  .nx-mclose {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: rgb(var(--text-color));
    cursor: pointer;
  }

  .nx-mclose svg {
    width: 16px;
    height: 16px;
  }

  /* ── Schakelaar Dames / Heren ─────────────── */
  .nx-mtabs {
    display: flex;
    gap: 4px;
    padding: 0;
  }

  .nx-mtab {
    flex: 0 0 auto;
    min-width: 120px;
    height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    /* Bewuste afwijking van de 0px-radius-huisregel, net als de kleurstippen:
       DFYNE gebruikt hier een pill en zonder die vorm leest het niet als schakelaar. */
    border-radius: 999px;
    background: none;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgb(var(--text-color) / 0.55);
    cursor: pointer;
  }

  .nx-mtab.is-on {
    border-color: rgb(var(--text-color) / 0.45);
    color: rgb(var(--text-color));
  }

  /* ── Beeldtegels ──────────────────────── */
  .nx-mpromo {
    margin: 0 0 10px;
  }

  /* 🔑 DE LADE WAS NAAR RECHTS TE SWIPEN. OORZAAK, OPGEMETEN:
     Snow zet `.menu-drawer .menu-promo { margin-inline: calc(-1 * var(--menu-drawer-padding-inline)) }`
     plus een carrousel met dezelfde waarde als padding. Dat is het standaardtrucje om een
     rail tot de rand te laten doorlopen, en het klopt zolang de OUDER die padding ook heeft.
     Hierboven zetten we `.nx-mbody` juist op `padding-inline: 0`, want in dit ontwerp dragen
     de items hun eigen marge. Daardoor trok die negatieve marge het promo-blok 24px BUITEN
     het scherm aan beide kanten: gemeten 423px breed in een paneel van 375, met de
     linkertegel afgesneden en de rechtertegel voorbij de rand.

     ⚠ Waarom `.menu-drawer` in de selector staat: zonder die klasse is het 0,2,0 tegen
     Snow's 0,2,0, en omdat theme.css NA styles.css laadt wint Snow dan. Met `.menu-drawer`
     erbij is het 0,3,0 en wint deze regel. Zelfde patroon als bij .accordion.nx-macc.

     ⚠ NIET oplossen door `--menu-drawer-padding-inline` op 0 te zetten: die variabele voedt
     ook de padding van `.menu-drawer__footer-item`, dus dan plakt de social-balk tegen de rand.

     Gutter alleen links, zodat de eerste tegel op 24px begint, exact in lijn met NIEUW BINNEN
     eronder, en de rail rechts mag doorlopen zodat je ziet dat er meer staat. */
  .menu-drawer .nx-mpromo .menu-promo {
    margin-inline: 0;
    width: auto;
  }

  .menu-drawer .nx-mpromo .menu-promo__carousel {
    padding-inline: 24px 0;
    scroll-padding-inline: 24px 0;
  }

  /* ── Platte snelkoppelingen ──────────────── */
  .nx-mflat {
    display: block;
    margin: 0;
    padding: 0;
  }

  .nx-mflat__link {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 24px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.115em;
    text-transform: uppercase;
    color: rgb(var(--text-color));
    text-decoration: none;
  }

  .nx-mflat__link--solo {
    width: 100%;
  }

  /* ── Scheidingslijn ───────────────────── */
  .nx-mrule {
    height: 0;
    margin: 4px 24px;
    border-top: 1px solid rgb(var(--text-color) / 0.14);
  }

  /* ── Lades ─────────────────────────── */
  /* Snow scheidt accordeons met een box-shadow, niet met een border. Die geeft
     hier grijze lijnen tussen de lades die DFYNE niet heeft, en schaduwen zijn
     sowieso tegen de huisregels.
     Let op: .accordion en .nx-macc zijn even specifiek en Snow's regel staat
     later in de bundel, dus die won. Vandaar beide klassen in een selector. */
  .accordion.nx-macc,
  .accordion.nx-macc .accordion__disclosure {
    border: 0;
    box-shadow: none;
    background: none;
  }

  .nx-macc .accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 24px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.125em;
    text-transform: uppercase;
    color: rgb(var(--text-color));
  }

  .nx-macc .accordion__summary svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    transition: transform 0.25s ease;
  }

  .nx-macc .accordion__disclosure[open] .accordion__summary svg {
    transform: rotate(180deg);
  }

  .nx-macc .accordion__content {
    padding: 0 24px 12px;
  }

  /* ── Sublinks in een lade ────────────────── */
  .nx-msub {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
  }

  /* Kleuren mogen in twee kolommen, want die labels zijn kort. Categorie- en
     collectienamen niet: "Sportvesten & zippers" past niet op halve breedte. */
  .nx-msub:has(a[href*="color-pattern"]) {
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
  }

  .nx-msub__link {
    display: flex;
    align-items: center;
    height: 35px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.023em;
    color: rgb(var(--text-color));
    text-decoration: none;
  }

  /* ── Voetbalk met service-links ─────────────── */
  .nx-mutil {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 18px;
    padding: 16px 24px 4px;
    border-top: 1px solid rgb(var(--text-color) / 0.14);
  }

  .nx-mutil__link {
    font-size: 12px;
    line-height: 22px;
    color: rgb(var(--text-color) / 0.7);
    text-decoration: none;
  }
}
/* END_SECTION:nx-mdrawer */

/* START_SECTION:nx-megamenu (INDEX:76) */
/* ── Paneel: wit vlak zoals DFYNE, over de volle breedte ──────────── */
/* Volgt het kleurschema van de header in plaats van een vaste kleur, zodat
   header en paneel altijd één vlak vormen. Alleen de hairline eronder scheidt ze. */
header-mega-menu.mega-menu {
  background: rgb(var(--background));
  border-top: 1px solid rgba(28, 28, 28, 0.10);
  color: rgb(var(--text-color));
}

@media screen and (min-width: 990px) {
  header-mega-menu.mega-menu {
    grid-template-columns: 638px minmax(0, 1fr);
    column-gap: 24px;
    /* Snow zet padding-right van het paneel elders op 0 met een specifiekere
       selector, en het beeldblok houdt een eigen padding. Zonder deze twee
       lopen de tegels 16px scheef en 8px buiten de rechterrand. Alleen op
       precies deze eigenschappen, nergens anders. */
    padding: 34px 24px !important;
    align-items: start;
  }

  /* Snow zet hier flex-wrap met max-width 800px, waardoor een vierde kolom
     naar een tweede rij valt. DFYNE heeft drie kolommen, met de kleuren
     onder de snelkoppelingen in kolom 1. Dat leggen we hier vast. */
  header-mega-menu .mega-menu__navigation {
    display: grid;
    grid-template-columns: 190px 210px 190px;
    grid-template-rows: auto auto;
    column-gap: 24px;
    row-gap: 24px;
    width: 638px;
    max-width: none;
  }

  header-mega-menu .mega-menu__navigation > *:nth-child(1) { grid-area: 1 / 1; }
  header-mega-menu .mega-menu__navigation > *:nth-child(2) { grid-area: 1 / 2 / span 2; }
  header-mega-menu .mega-menu__navigation > *:nth-child(3) { grid-area: 1 / 3 / span 2; }
  header-mega-menu .mega-menu__navigation > *:nth-child(4) { grid-area: 2 / 1; }

  header-mega-menu .mega-menu__navigation > * {
    gap: 12px;
    align-content: start;
  }

  /* Twee beeldtegels van 357x500 naast elkaar, niet scrollend.
     Snow zet hier .menu-promo--without-spacing .menu-promo__item met een
     vaste 420px, dus deze selector moet specifieker zijn dan die van Snow. */
  header-mega-menu .menu-promo,
  header-mega-menu .menu-promo .menu-promo__carousel {
    width: 100%;
    padding: 0 !important;
    margin: 0;
    overflow: visible;
  }

  header-mega-menu .menu-promo .menu-promo__carousel {
    gap: 16px;
  }

  header-mega-menu .menu-promo .menu-promo__carousel .menu-promo__item {
    flex: 0 0 auto;
    width: calc((100% - 16px) / 2);
    min-width: 0;
    height: 500px;
  }

  /* Met twee passende tegels zijn de carrousel-pijlen zinloos. */
  header-mega-menu .floating-controls__control {
    display: none;
  }

  /* Elf kleuren in één kolom wordt te hoog. Twee kolommen houdt het
     paneel op DFYNE-hoogte, net als hun mobiele kleurenraster. */
  header-mega-menu .mega-menu__navigation > *:nth-child(4) .mega-menu__linklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 9px;
  }
}

/* ── Mobiele drawer: beeldtegels op DFYNE-maat ────────────────── */
/* Snow rekt de tegels hier uit tot ruim 600px hoog, waardoor je drie
   schermen foto ziet voor de eerste link. DFYNE doet 255x143 met een
   horizontale swipe. */
@media screen and (max-width: 989px) {
  .menu-drawer .menu-promo .menu-promo__carousel .menu-promo__item {
    flex: 0 0 auto;
    width: 255px;
    height: 143px;
  }

  .menu-drawer .menu-promo .menu-promo__carousel {
    gap: 4px;
  }

  .menu-drawer .menu-promo__item .subheading,
  .menu-drawer .menu-promo__item p {
    font-size: 15px;
    line-height: 17px;
    letter-spacing: 0.06em;
  }
}

/* ── Typografie ─────────────────────────────────────── */
/* Formaat en letterafstand van de kolomkoppen komen sinds 7 aug uit
   nx-type-system.liquid. Hier alleen nog de kleur. */
header-mega-menu .mega-menu__navigation .subheading {
  color: rgba(28, 28, 28, 0.5);
}

/* Bijschrift op de beeldtegel blijft WIT: dat staat op een foto, niet op het
   paneel. Het verloop eronder houdt het leesbaar op een lichte foto. */
header-mega-menu .menu-promo__item .subheading,
header-mega-menu .menu-promo__item p {
  color: #ffffff;
  font-size: 20px;
  line-height: 22px;
  letter-spacing: 0.06em;
}

header-mega-menu .menu-promo__item .content-box__background-media {
  position: relative;
}

header-mega-menu .menu-promo__item .content-box__background-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 42%);
  pointer-events: none;
}

header-mega-menu .mega-menu__linklist {
  row-gap: 11px;
}

header-mega-menu .mega-menu__linklist a {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.025em;
  text-transform: none;
  color: rgb(var(--text-color));
}

/* Kolom 1 zijn de snelkoppelingen: bij DFYNE zwaarder en in kapitalen.
   11px, dus binnen de "kapitalen tot 14px"-regel van het typesysteem. */
header-mega-menu .mega-menu__navigation > *:nth-child(1) .mega-menu__linklist {
  row-gap: 12px;
}

header-mega-menu .mega-menu__navigation > *:nth-child(1) .mega-menu__linklist a {
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* ⚠ HIER STOND EEN BUG (gefixt 7 aug 2026): deze regel stond op
     `text-decoration: underline; text-underline-offset: 3px`. Elke link in het
     megamenu draagt Snow's class `link-reversed`, en die tekent zijn onderstreping
     al met een background-gradient op de onderrand (background-size 0>100% x 1px).
     Twee onderstrepingen, een paar pixels uit elkaar = de "dubbele lijnen".
     Snow's eigen animatie groeit van links naar rechts en is consistent met de
     rest van de site, dus die laten we het werk doen. Zet hier geen
     text-decoration terug. */
header-mega-menu .mega-menu__linklist a:hover {
  color: rgb(var(--text-color));
}

/* De kop van kolom 1 is bij DFYNE geen kop maar witruimte. */
header-mega-menu .mega-menu__navigation > *:nth-child(1) > .subheading {
  display: none;
}

/* ── Kleurstippen ───────────────────────────────────── */
/* Bewuste afwijking van de 0px-radius-huisregel: rond, zoals afgesproken
   voor de swatches op de collectiepagina. Alleen deze stippen.
   De kleur komt via een custom property op de link zelf, zodat de
   basisregel hem niet op specificiteit verslaat.
   ⚠ De rand is donker sinds het paneel wit werd: anders is de witte stip
     onzichtbaar op een wit vlak. */
header-mega-menu a[href*="shopify.color-pattern"],
.menu-drawer a[href*="shopify.color-pattern"] {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

header-mega-menu a[href*="shopify.color-pattern"]::before,
.menu-drawer a[href*="shopify.color-pattern"]::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(28, 28, 28, 0.25);
  background: var(--nx-swatch, #888888);
}

[href*="Metaobject%2F309386346764"] { --nx-swatch: #000000; }
[href*="Metaobject%2F309386412300"] { --nx-swatch: #005BD3; }
[href*="Metaobject%2F311918166284"] { --nx-swatch: #FFC0CB; }
[href*="Metaobject%2F311917248780"] { --nx-swatch: #F61F1F; }
[href*="Metaobject%2F309387100428"] { --nx-swatch: #808080; }
[href*="Metaobject%2F309386379532"] { --nx-swatch: #05AA3D; }
[href*="Metaobject%2F338838946060"] { --nx-swatch: #9A5630; }
[href*="Metaobject%2F311918264588"] { --nx-swatch: #A54DCF; }
[href*="Metaobject%2F326850380044"] { --nx-swatch: #FF8A00; }
[href*="Metaobject%2F311919411468"] { --nx-swatch: #EAD8AB; }
[href*="Metaobject%2F311917216012"] { --nx-swatch: #FFFFFF; }
/* END_SECTION:nx-megamenu */

/* START_SECTION:nx-product-tabs (INDEX:79) */
.nx-tabs {
    padding: clamp(40px, 6vw, 90px) clamp(16px, 4vw, 64px);
    background: var(--color-bg, #fff);
    color: #1c1c1c;
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
    scroll-margin-top: 100px; /* voor anchor-scroll onder sticky header */
  }
  .nx-tabs__inner { max-width: 1480px; margin: 0 auto; }

  /* ===== Tab nav ===== */
  .nx-tabs__nav {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid #e8e6e0;
    margin-bottom: clamp(32px, 5vw, 56px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nx-tabs__tab {
    background: transparent;
    border: none;
    padding: 0 0 14px;
    font-family: inherit;
    font-size: clamp(15px, 1.6vw, 18px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #a8a8a8;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color .2s ease;
  }
  .nx-tabs__tab:hover { color: #6b6b6b; }
  .nx-tabs__tab.is-active { color: #1c1c1c; }
  .nx-tabs__tab.is-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: #1c1c1c;
  }

  /* ===== Panels ===== */
  .nx-tabs__panel { display: none; }
  .nx-tabs__panel.is-active { display: block; animation: nx-tab-fade .4s cubic-bezier(.2,.8,.2,1); }
  @keyframes nx-tab-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ===== Tab 1: split layout ===== */
  .nx-tabs__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }
  @media (max-width: 899px) { .nx-tabs__split { grid-template-columns: 1fr; } }

  .nx-tabs__intro {
    font-size: clamp(20px, 2.6vw, 34px);
    font-weight: 400;
    line-height: 1.25;
    color: #1c1c1c;
    margin-bottom: 40px;
    letter-spacing: -0.01em;
  }
  .nx-tabs__intro p { margin: 0; }

  .nx-tabs__features {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .nx-tabs__feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }
  .nx-tabs__feature-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: #1c1c1c;
    display: grid;
    place-items: center;
  }
  .nx-tabs__feature-icon svg { width: 24px; height: 24px; }
  .nx-tabs__feature-title {
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
  }
  .nx-tabs__feature-text {
    font-size: 14px;
    line-height: 1.5;
    color: #6b6b6b;
    margin: 0;
  }

  .nx-tabs__media {
    position: relative;
    aspect-ratio: 4/5;
    background: #f7f5f0;
    overflow: hidden;
  }
  .nx-tabs__video, .nx-tabs__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .nx-tabs__media-placeholder {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    color: #a8a8a8;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  /* ===== Tab 2: description ===== */
  .nx-tabs__desc {
    max-width: 760px;
  }
  .nx-tabs__desc-group { margin-bottom: 28px; }
  .nx-tabs__desc-group:last-child { margin-bottom: 0; }
  .nx-tabs__desc-heading {
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px;
  }
  .nx-tabs__desc-body {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
  }
  .nx-tabs__desc-body p { margin: 0 0 8px; }
  .nx-tabs__desc-body ul { margin: 0; padding-left: 18px; }
  .nx-tabs__desc-body li { margin-bottom: 6px; }
  .nx-tabs__sku {
    margin-top: 24px;
    font-size: 12px;
    color: #a8a8a8;
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
    letter-spacing: 0.5px;
  }

  /* ===== Tab 3: functions grid ===== */
  .nx-tabs__functions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.5vw, 32px);
  }
  @media (max-width: 899px) { .nx-tabs__functions { grid-template-columns: 1fr; gap: 32px; } }

  .nx-tabs__function-media {
    aspect-ratio: 1/1;
    background: #f7f5f0;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .nx-tabs__function-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .nx-tabs__function-title {
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
  }
  .nx-tabs__function-text {
    font-size: 14px;
    line-height: 1.5;
    color: #6b6b6b;
    margin: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .nx-tabs__panel.is-active { animation: none; }
  }
/* END_SECTION:nx-product-tabs */

/* START_SECTION:nx-rail-touch (INDEX:80) */
.nx-catrail .nx-catrail__row,
.nx-crail.nx-crail--inline {
  overflow-y: hidden;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

.nx-catrail.nx-catrail--nav.nx-catrail--noimg .nx-catrail__row {
  padding-bottom: 1px;
}
/* END_SECTION:nx-rail-touch */

/* START_SECTION:nx-recently-viewed (INDEX:81) */
.nx-recently-viewed {
    padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 80px);
    background: var(--color-bg, #fff);
    color: #1c1c1c;
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
  }
  .nx-recently-viewed__inner {
    max-width: 1480px;
    margin: 0 auto;
  }
  .nx-recently-viewed__head {
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .nx-recently-viewed__eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #6b6b6b;
    margin: 0;
  }
  .nx-recently-viewed__title {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 0.95;
    margin: 0;
  }

  .nx-recently-viewed__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  @media (max-width: 999px) { .nx-recently-viewed__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 749px) { .nx-recently-viewed__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

  .nx-rv-card {
    text-decoration: none;
    color: #1c1c1c;
    display: flex;
    flex-direction: column;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
  }
  @media (hover: hover) {
    .nx-rv-card:hover { transform: translateY(-2px); }
  }
  .nx-rv-card__media {
    aspect-ratio: 3/4;
    background: #f7f5f0;
    overflow: hidden;
  }
  .nx-rv-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .nx-rv-card__body { padding: 10px 0; }
  .nx-rv-card__name {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 4px;
  }
  .nx-rv-card__price {
    font-size: 12px;
    font-weight: 700;
    color: #6b6b6b;
    margin: 0;
  }
  .nx-rv-card__oos {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6b6b6b;
    margin-left: 6px;
  }

  @media (prefers-reduced-motion: reduce) {
    .nx-rv-card { transition: none; }
    .nx-rv-card:hover { transform: none; }
  }
/* END_SECTION:nx-recently-viewed */

/* START_SECTION:nx-related-products (INDEX:82) */
.nx-related {
    padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 64px);
    background: var(--color-bg, #fff);
    color: #1c1c1c;
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
  }
  .nx-related__inner { max-width: 1480px; margin: 0 auto; }

  .nx-related__head {
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .nx-related__eyebrow {
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #6b6b6b;
    margin: 0;
  }
  .nx-related__title {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 900;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    line-height: 0.95;
    margin: 0;
  }

  .nx-related__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
  @media (max-width: 1199px) { .nx-related__grid { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 899px) { .nx-related__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 599px) { .nx-related__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

  .nx-rp-card {
    position: relative;
    text-decoration: none;
    color: #1c1c1c;
    display: flex;
    flex-direction: column;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
  }
  @media (hover: hover) {
    .nx-rp-card:hover { transform: translateY(-2px); }
  }

  .nx-rp-card__media {
    position: relative;
    aspect-ratio: 3/4;
    background: #f7f5f0;
    overflow: hidden;
  }
  .nx-rp-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .nx-rp-card__sale {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #1c1c1c;
    color: #B6FF4D;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.5px;
    z-index: 2;
  }

  .nx-rp-card__heart {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.92);
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #1c1c1c;
    transition: background .2s ease, transform .2s cubic-bezier(.2,.8,.2,1);
    padding: 0;
  }
  .nx-rp-card__heart:hover { background: #B6FF4D; transform: scale(1.05); }
  .nx-rp-card__heart svg { width: 16px; height: 16px; transition: opacity .2s; }
  .nx-rp-card__heart .nx-rp-heart-fill { display: none; }
  .nx-rp-card__heart[aria-pressed="true"] .nx-rp-heart-fill { display: inline-block; color: #1c1c1c; }
  .nx-rp-card__heart[aria-pressed="true"] .nx-rp-heart-outline { display: none; }

  .nx-rp-card__oos {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.7);
    display: grid;
    place-items: center;
    color: #1c1c1c;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    pointer-events: none;
  }

  .nx-rp-card__body { padding: 10px 0 0; }
  .nx-rp-card__name {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 4px;
  }
  .nx-rp-card__color {
    font-size: 11px;
    color: #6b6b6b;
    margin: 0 0 4px;
    font-weight: 600;
  }
  .nx-rp-card__price {
    font-size: 13px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .nx-rp-card__compare {
    text-decoration: line-through;
    color: #a8a8a8;
    font-size: 11px;
    font-weight: 500;
  }

  @media (prefers-reduced-motion: reduce) {
    .nx-rp-card { transition: none; }
    .nx-rp-card:hover { transform: none; }
    .nx-rp-card__heart { transition: none; }
  }
/* END_SECTION:nx-related-products */

/* START_SECTION:nx-sale (INDEX:87) */
/* 176px -> ~100px op mobiel. Marge en tussenruimte doen het meeste werk. */
  .shopify-section--countdown .section-spacing {
    padding-block: 12px;
  }

  .shopify-section--countdown .container > .v-stack {
    gap: 10px;
  }

  .shopify-section--countdown .countdown__timer {
    gap: 18px;
  }

  .shopify-section--countdown countdown-timer-flip {
    font-size: 26px;
    line-height: 1.1;
  }

  .shopify-section--countdown .countdown__timer-unit {
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  /* Vanaf tablet naast elkaar, dan is het echt een balk. Flex en niet grid:
     zie de reparatienotitie bovenaan. */
  @media screen and (min-width: 750px) {
    .shopify-section--countdown .container > .v-stack {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;
      gap: 24px;
      max-width: none;
    }

    .shopify-section--countdown .container > .v-stack > * {
      flex: 0 0 auto;
      max-width: 100%;
    }

    .shopify-section--countdown .prose {
      margin: 0;
    }
  }

  /* Op de sale-pagina alleen de kop en de teller, geen collectiebeschrijving.
     Gehaakt aan de sectiesleutel 'nx_sale_intro' uit collection.sale.json, want
     het volledige id bevat een template-nummer dat kan wisselen. De tekst blijft
     wel in de HTML staan: valt de CSS ooit weg, dan zie je de juiste beschrijving
     in plaats van niets, en zoekmachines lezen hem nog steeds. */
  [id$="__nx_sale_intro"] .nx-cintro__desc-wrap,
  [id$="__nx_sale_intro"] .nx-cintro__drawer {
    display: none;
  }
/* END_SECTION:nx-sale */

/* START_SECTION:nx-seo-block (INDEX:88) */
.nx-seo { background: rgb(var(--background)); color: rgb(var(--text-color)); font-family: var(--text-font-family, 'Inter', system-ui, sans-serif); }
  .nx-seo__inner { max-width: 820px; }
  .nx-seo__eyebrow { font-family: var(--text-font-family, 'Inter', system-ui, sans-serif); font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgb(var(--text-color) / 0.6); margin: 0 0 0.625rem; }
  .nx-seo__heading { font-family: var(--heading-font-family, 'Bebas Neue', Impact, sans-serif); font-weight: var(--heading-font-weight, 700); letter-spacing: var(--heading-letter-spacing, 0.01em); text-transform: var(--heading-text-transform, uppercase); line-height: 1.02; font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); margin: 0 0 clamp(0.875rem, 1.5vw, 1.25rem); color: rgb(var(--text-color)); }
  .nx-seo__body { font-size: 0.9375rem; line-height: 1.65; color: rgb(var(--text-color) / 0.72); }
  .nx-seo__body p { margin: 0 0 0.85rem; }
  .nx-seo__body p:last-child { margin-bottom: 0; }
  .nx-seo__body strong { color: rgb(var(--text-color)); font-weight: 700; }

  .nx-seo__faq { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
  .nx-seo__faq-title { font-family: var(--text-font-family, 'Inter', system-ui, sans-serif); font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgb(var(--text-color) / 0.6); margin: 0 0 0.5rem; }
  .nx-seo__faq-item { border-top: 1px solid rgb(var(--text-color) / 0.12); }
  .nx-seo__faq-item:last-child { border-bottom: 1px solid rgb(var(--text-color) / 0.12); }
  .nx-seo__faq-q { cursor: pointer; list-style: none; padding: 0.95rem 2rem 0.95rem 0; position: relative; font-size: 0.9375rem; font-weight: 600; color: rgb(var(--text-color)); }
  .nx-seo__faq-q::-webkit-details-marker { display: none; }
  .nx-seo__faq-q::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.25rem; font-weight: 400; line-height: 1; transition: transform .2s ease-out; }
  .nx-seo__faq-item[open] .nx-seo__faq-q::after { content: "\2212"; }
  .nx-seo__faq-a { font-size: 0.9375rem; line-height: 1.6; color: rgb(var(--text-color) / 0.72); padding: 0 0 1rem; }
  .nx-seo__faq-a p { margin: 0 0 0.5rem; }
  .nx-seo__faq-a p:last-child { margin-bottom: 0; }

  .nx-seo__links { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); padding-top: clamp(1.25rem, 2.5vw, 2rem); border-top: 1px solid rgb(var(--text-color) / 0.12); }
  .nx-seo__links-title { font-family: var(--text-font-family, 'Inter', system-ui, sans-serif); font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgb(var(--text-color) / 0.6); margin: 0 0 0.875rem; }
  .nx-seo__links-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
  .nx-seo__link { font-size: 0.875rem; color: rgb(var(--text-color) / 0.8); text-decoration: none; transition: color .15s ease-out; }
  .nx-seo__link:hover { color: rgb(var(--text-color)); text-decoration: underline; text-underline-offset: 3px; }
/* END_SECTION:nx-seo-block */

/* START_SECTION:nx-servicepage-type (INDEX:89) */
/* Pagina-titels */
[id*="custom_liquid"] .nxvr-head h1,
[id*="custom_liquid"] .nxsw-hero h1,
[id*="custom_liquid"] .nx-size__h1 {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: none;
}

/* Sectiekoppen */
[id*="custom_liquid"] .nxvr h2,
[id*="custom_liquid"] .nxvr-cta h3,
[id*="custom_liquid"] .nxsw-join h3 {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-transform: none;
}

/* Subkoppen en kaartkoppen */
[id*="custom_liquid"] .nxvr-steps h4,
[id*="custom_liquid"] .nxsw-benefit h4,
[id*="custom_liquid"] .nxct-h {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-transform: none;
}

/* Statement-quote op de samenwerken-pagina: mag groter blijven dan een sectiekop,
   want het is de enige uitspraak op die pagina die als citaat leest. */
[id*="custom_liquid"] .nxsw-statement p {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.3;
  letter-spacing: -.015em;
  text-transform: none;
}

/* Cijfers in statistieken en stappen. Die stonden al zonder kapitalen; ze hebben alleen
   het juiste font en wat tracking nodig zodat losse getallen niet gaan plakken. */
[id*="custom_liquid"] .nxvr-num,
[id*="custom_liquid"] .nxsw-num,
[id*="custom_liquid"] .nxsw-stats .v {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: none;
}
/* END_SECTION:nx-servicepage-type */

/* START_SECTION:nx-shop-the-look (INDEX:92) */
.nx-stl {
    padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 64px);
    background: var(--color-bg, #fff);
    color: #1c1c1c;
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
  }
  .nx-stl__inner {
    max-width: 1480px;
    margin: 0 auto;
  }

  .nx-stl__head {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .nx-stl__eyebrow {
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #6b6b6b;
    margin: 0;
  }
  .nx-stl__title {
    font-size: clamp(24px, 3.5vw, 40px);
    font-weight: 900;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    line-height: 0.95;
    margin: 0;
  }

  .nx-stl__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  @media (max-width: 999px) { .nx-stl__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 599px) { .nx-stl__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

  .nx-stl__card {
    text-decoration: none;
    color: #1c1c1c;
    display: flex;
    flex-direction: column;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
  }
  @media (hover: hover) {
    .nx-stl__card:hover { transform: translateY(-2px); }
  }

  .nx-stl__media {
    position: relative;
    aspect-ratio: 3/4;
    background: #f7f5f0;
    overflow: hidden;
  }
  .nx-stl__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .nx-stl__card--active .nx-stl__media {
    outline: 2px solid #1c1c1c;
    outline-offset: -2px;
  }

  .nx-stl__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #B6FF4D;
    color: #1c1c1c;
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  .nx-stl__sale {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #1c1c1c;
    color: #B6FF4D;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.5px;
  }

  .nx-stl__oos {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.7);
    display: grid;
    place-items: center;
    color: #1c1c1c;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .nx-stl__body {
    padding: 10px 0 0;
  }
  .nx-stl__name {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 4px;
  }
  .nx-stl__price {
    font-size: 13px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .nx-stl__compare {
    text-decoration: line-through;
    color: #a8a8a8;
    font-size: 11px;
    font-weight: 500;
  }

  .nx-stl__total {
    margin-top: 24px;
    padding: 16px 20px;
    background: #1c1c1c;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .nx-stl__total-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  .nx-stl__total-price {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #B6FF4D;
  }

  @media (prefers-reduced-motion: reduce) {
    .nx-stl__card { transition: none; }
    .nx-stl__card:hover { transform: none; }
  }
/* END_SECTION:nx-shop-the-look */

/* START_SECTION:nx-spot-css (INDEX:94) */
.nx-spot { background: rgb(var(--background)); color: rgb(var(--text-color)); font-family: var(--text-font-family, 'Inter', system-ui, sans-serif); }
  .nx-spot__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
  .nx-spot__eyebrow { font-family: var(--text-font-family, 'Inter', system-ui, sans-serif); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--text-color) / 0.55); margin: 0 0 0.6rem; }
  .nx-spot__heading { font-family: var(--heading-font-family, 'Bebas Neue', Impact, sans-serif); font-weight: var(--heading-font-weight, 700); letter-spacing: var(--heading-letter-spacing, 0.01em); text-transform: var(--heading-text-transform, uppercase); line-height: 1; font-size: clamp(1.375rem, 1rem + 1.8vw, 2.25rem); margin: 0 0 clamp(0.875rem, 1.6vw, 1.25rem); color: rgb(var(--text-color)); }

  .nx-spot__swatches { display: flex; flex-wrap: wrap; gap: 4px; }
  .nx-spot__swatch { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; }
  .nx-spot__swatch-img { width: 72px; height: 72px; object-fit: cover; object-position: center top; display: block; outline: 1px solid rgb(var(--text-color) / 0.12); outline-offset: -1px; transition: outline-color .15s ease-out, opacity .15s ease-out; opacity: 0.62; }
  @media screen and (min-width: 1000px) { .nx-spot__swatch-img { width: 84px; height: 84px; } }
  .nx-spot__swatch-dot { width: 30px; height: 30px; border-radius: 999px; display: block; outline: 1px solid rgb(var(--text-color) / 0.15); outline-offset: 2px; opacity: 0.7; transition: opacity .15s ease-out, outline-color .15s ease-out; }
  .nx-spot__swatch-label { font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--text-color) / 0.55); transition: color .15s ease-out; }
  .nx-spot__swatch:hover .nx-spot__swatch-img, .nx-spot__swatch:hover .nx-spot__swatch-dot { opacity: 1; }
  .nx-spot__swatch.is-active .nx-spot__swatch-img { outline: 2px solid rgb(var(--text-color)); opacity: 1; }
  .nx-spot__swatch.is-active .nx-spot__swatch-dot { outline: 2px solid rgb(var(--text-color)); opacity: 1; }
  .nx-spot__swatch.is-active .nx-spot__swatch-label { color: rgb(var(--text-color)); font-weight: 700; }
  .nx-spot__swatch:focus-visible .nx-spot__swatch-img, .nx-spot__swatch:focus-visible .nx-spot__swatch-dot { outline: 2px solid rgb(var(--accent)); opacity: 1; }

  .nx-spot__more { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; flex: 0 0 auto; align-self: flex-start; outline: 1px solid rgb(var(--text-color) / 0.25); outline-offset: -1px; color: rgb(var(--text-color)); text-decoration: none; font-size: 26px; line-height: 1; opacity: 0.7; transition: opacity .15s ease-out, background-color .15s ease-out, color .15s ease-out; }
  @media screen and (min-width: 1000px) { .nx-spot__more { width: 84px; height: 84px; } }
  .nx-spot__more:hover { opacity: 1; background: rgb(var(--text-color)); color: rgb(var(--background)); }
  .nx-spot--scroll .nx-spot__swatches { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .nx-spot--scroll .nx-spot__swatches::-webkit-scrollbar { display: none; }
  .nx-spot--scroll .nx-spot__swatch, .nx-spot--scroll .nx-spot__more { flex: 0 0 auto; }
  @media screen and (max-width: 749px) {
    [data-nx-spot-root] .nx-spot__swatches { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
    [data-nx-spot-root] .nx-spot__swatches::-webkit-scrollbar { display: none; }
    [data-nx-spot-root] .nx-spot__swatch, [data-nx-spot-root] .nx-spot__more { flex: 0 0 auto; }
    [data-nx-spot-root] .nx-spot__swatch-img { width: 54px; height: 54px; }
    [data-nx-spot-root] .nx-spot__more { width: 54px; height: 54px; font-size: 22px; }
    [data-nx-spot-root] .nx-spot__head { flex-wrap: wrap; row-gap: 12px; }
    [data-nx-spot-root] .nx-spot__titles { flex: 1 1 100%; min-width: 0; }
  }

  .nx-spot__viewall { flex-shrink: 0; align-self: flex-start; border: 1px solid rgb(var(--text-color) / 0.35); padding: 11px 24px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--text-color)); text-decoration: none; white-space: nowrap; transition: background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out; }
  .nx-spot__viewall:hover { background: rgb(var(--text-color)); color: rgb(var(--background)); border-color: rgb(var(--text-color)); }

  .nx-spot__scroller { position: relative; }
  .nx-spot__rail { list-style: none; margin: 0; padding: 0 0 4px var(--container-gutter, 1.25rem); display: flex; align-items: flex-start; gap: clamp(8px, 1vw, 14px); overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: smooth; }
  .nx-spot__rail::-webkit-scrollbar { display: none; }
  .nx-spot__cell { flex: 0 0 72vw; scroll-snap-align: start; }
  @media screen and (min-width: 700px) { .nx-spot__cell { flex-basis: 40vw; } }
  @media screen and (min-width: 1000px) { .nx-spot__cell { flex-basis: clamp(280px, 24vw, 340px); } }

  .nx-spot__nav { position: absolute; top: 38%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; display: none; align-items: center; justify-content: center; background: rgb(var(--background)); color: rgb(var(--text-color)); border: 1px solid rgb(var(--text-color) / 0.18); border-radius: 0; cursor: pointer; font-size: 18px; line-height: 1; padding: 0; transition: background-color .15s ease-out, color .15s ease-out; }
  .nx-spot__nav:hover { background: rgb(var(--text-color)); color: rgb(var(--background)); }
  .nx-spot__nav[hidden] { display: none !important; }
  .nx-spot__nav--prev { left: 10px; }
  .nx-spot__nav--next { right: 10px; }
  @media screen and (min-width: 1000px) { .nx-spot__nav { display: flex; } }

  .nx-spot__hint { font-size: 0.8125rem; color: rgb(var(--text-color) / 0.7); }

  @media (prefers-reduced-motion: reduce) { .nx-spot__rail { scroll-behavior: auto; } }
/* END_SECTION:nx-spot-css */

/* START_SECTION:nx-sticky-atc-mobile (INDEX:96) */
.nx-sticky-atc {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: #1c1c1c;
    color: #fff;
    transform: translateY(110%);
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid #2c2c2c;
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
  }
  .nx-sticky-atc.is-visible { transform: translateY(0); }

  /* Hide on desktop (Snow uses 750px-ish breakpoint, hier 769) */
  @media (min-width: 769px) {
    .nx-sticky-atc { display: none !important; }
  }

  .nx-sticky-atc__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    max-width: 600px;
    margin: 0 auto;
  }

  .nx-sticky-atc__product {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
  }

  .nx-sticky-atc__thumb {
    width: 42px;
    height: 42px;
    object-fit: cover;
    background: #2c2c2c;
    flex-shrink: 0;
  }

  .nx-sticky-atc__meta {
    flex: 1;
    min-width: 0;
  }

  .nx-sticky-atc__name {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 3px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }

  .nx-sticky-atc__price {
    font-size: 13px;
    font-weight: 900;
    color: #B6FF4D;
    letter-spacing: -0.02em;
    margin: 0;
  }

  .nx-sticky-atc__stock {
    font-size: 10px;
    font-weight: 700;
    color: #B6FF4D;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }

  .nx-sticky-atc__dot {
    width: 6px;
    height: 6px;
    background: #B6FF4D;
    border-radius: 50%;
    animation: nx-sticky-pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
  }

  @keyframes nx-sticky-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.7); }
  }

  .nx-sticky-atc__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    background: #B6FF4D;
    color: #1c1c1c;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: background .2s ease;
    min-height: 44px; /* touch target */
  }

  .nx-sticky-atc__btn:hover,
  .nx-sticky-atc__btn:active {
    background: #fff;
  }

  .nx-sticky-atc__btn[disabled] {
    background: #2c2c2c;
    color: #6b6b6b;
    cursor: not-allowed;
  }

  @media (prefers-reduced-motion: reduce) {
    .nx-sticky-atc { transition: none; }
    .nx-sticky-atc__dot { animation: none; }
  }
/* END_SECTION:nx-sticky-atc-mobile */

/* START_SECTION:nx-top-products (INDEX:97) */
.nx-top { font-family: var(--text-font-family, 'Inter', system-ui, sans-serif); }

  .nx-top__head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
  }
  .nx-top__eyebrow {
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
    font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase;
    color: rgb(var(--text-color) / 0.6); margin: 0 0 0.5rem;
  }
  .nx-top__heading {
    font-family: var(--heading-font-family, 'Bebas Neue', Impact, sans-serif);
    font-weight: var(--heading-font-weight, 700);
    font-style: var(--heading-font-style, normal);
    letter-spacing: var(--heading-letter-spacing, 0.01em);
    text-transform: var(--heading-text-transform, uppercase);
    line-height: var(--heading-line-height, 1);
    font-size: clamp(1.6rem, 1rem + 2.6vw, 2.75rem);
    margin: 0; color: rgb(var(--text-color));
  }
  .nx-top__actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
  .nx-top__viewall {
    font-size: 0.8125rem; font-weight: 600; color: rgb(var(--text-color));
    text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
  }
  .nx-top__arrows { display: none; gap: 2px; }
  @media screen and (min-width: 700px) { .nx-top__arrows { display: flex; } }
  .nx-top__arrow {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: rgb(var(--text-color) / 0.45); transition: color .15s ease-out;
  }
  .nx-top__arrow:hover { color: rgb(var(--text-color)); }
  .nx-top__arrow:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
  .nx-top__arrow svg { width: 22px; height: 22px; }

  .nx-top__row {
    list-style: none; margin: 0; padding: 0 var(--container-gutter, 1.25rem) 4px;
    display: flex; gap: clamp(0.5rem, 1.5vw, 1.25rem);
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nx-top__row::-webkit-scrollbar { display: none; }
  .nx-top__row:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: -2px; }
  .nx-top__cell {
    position: relative;
    flex: 0 0 clamp(220px, 64vw, 320px);
    scroll-snap-align: start;
  }
  @media screen and (min-width: 1000px) { .nx-top__cell { flex-basis: 320px; } }
  /* native product-card vult de cell volledig */
  .nx-top__cell > .product-card,
  .nx-top__cell > product-card { width: 100%; display: block; }

  /* rang-nummer overlay (optioneel) */
  .nx-top__rank {
    position: absolute; top: 2px; left: 8px; z-index: 3; pointer-events: none;
    font-family: var(--heading-font-family, 'Bebas Neue', Impact, sans-serif);
    font-weight: var(--heading-font-weight, 700);
    font-size: clamp(2.75rem, 7vw, 5rem); line-height: 0.8; letter-spacing: 0.01em;
    color: rgb(var(--text-color));
    text-shadow: 0 2px 16px rgb(var(--background) / 0.75), 0 0 3px rgb(var(--background) / 0.6);
  }

  .nx-top__hint { font-size: 0.8125rem; color: rgb(var(--text-color) / 0.7); }
  .nx-top__hint code { background: rgb(var(--text-color)); color: rgb(var(--background)); padding: 1px 5px; }

  /* reveal-on-scroll (gestaggerd) */
  .nx-top__row--reveal .nx-top__cell { opacity: 0; transform: translateY(16px); }
  .nx-top__row--reveal.is-revealed .nx-top__cell {
    opacity: 1; transform: none;
    transition: opacity .5s ease-out, transform .5s ease-out;
    transition-delay: calc(var(--nx-i) * 60ms);
  }

  @media (prefers-reduced-motion: reduce) {
    .nx-top__row { scroll-behavior: auto; }
    .nx-top__row--reveal .nx-top__cell { opacity: 1; transform: none; transition: none; }
  }
/* END_SECTION:nx-top-products */

/* START_SECTION:nx-trust-block (INDEX:99) */
.nx-trust {
    margin: 0 0 18px;
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
    color: #1c1c1c;
  }

  .nx-trust__cell {
    text-decoration: none;
    color: inherit;
    transition: opacity .2s ease;
  }
  .nx-trust__cell[href]:hover { opacity: .7; }

  /* ============================================ */
  /* ============= MINIMAL BAR ================== */
  /* ============================================ */
  .nx-trust--minimal-bar {
    background: #f7f5f0;
    padding: 12px 16px;
    border-top: 1px solid #e8e6e0;
    border-bottom: 1px solid #e8e6e0;
  }
  .nx-trust--minimal-bar .nx-trust__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .nx-trust--minimal-bar .nx-trust__cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1;
  }
  .nx-trust--minimal-bar .nx-trust__stars { display: inline-flex; gap: 1px; }
  .nx-trust--minimal-bar .nx-trust__score {
    font-weight: 900;
    font-size: 13px;
    letter-spacing: -0.02em;
  }
  .nx-trust--minimal-bar .nx-trust__div {
    font-weight: 500;
    color: #6b6b6b;
    font-size: 11px;
  }
  .nx-trust--minimal-bar .nx-trust__brand {
    color: #6b6b6b;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
  }
  .nx-trust--minimal-bar .nx-trust__rule {
    width: 1px;
    height: 14px;
    background: #d8d4cc;
  }
  .nx-trust--minimal-bar .nx-trust__cell--stat strong {
    font-weight: 900;
    font-size: 13px;
    letter-spacing: -0.02em;
  }
  .nx-trust--minimal-bar .nx-trust__stat-label {
    color: #6b6b6b;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
  }

  /* ============================================ */
  /* ============= PREMIUM BLACK ================ */
  /* ============================================ */
  .nx-trust--premium-black {
    background: #1c1c1c;
    color: #fff;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
  }
  .nx-trust--premium-black::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: #B6FF4D;
  }
  .nx-trust--premium-black .nx-trust__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .nx-trust--premium-black .nx-trust__cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fff;
    border-right: 1px solid #2c2c2c;
    padding-right: 20px;
  }
  .nx-trust--premium-black .nx-trust__cell:last-child {
    border-right: none;
    padding-right: 0;
  }
  .nx-trust--premium-black .nx-trust__label {
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
    font-size: 9px;
    letter-spacing: 2px;
    color: #B6FF4D;
    text-transform: uppercase;
    font-weight: 700;
  }
  .nx-trust--premium-black .nx-trust__big {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .nx-trust--premium-black .nx-trust__big strong {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #fff;
  }
  .nx-trust--premium-black .nx-trust__stars-mini {
    display: inline-flex;
    gap: 1px;
    margin-bottom: 2px;
  }
  .nx-trust--premium-black .nx-trust__small-suffix {
    font-size: 12px;
    color: #6b6b6b;
    font-weight: 600;
  }
  @media (max-width: 480px) {
    .nx-trust--premium-black .nx-trust__row { gap: 10px; }
    .nx-trust--premium-black .nx-trust__cell {
      padding-right: 10px;
    }
    .nx-trust--premium-black .nx-trust__big strong { font-size: 18px; }
  }

  /* ============================================ */
  /* ============= EDITORIAL ==================== */
  /* ============================================ */
  .nx-trust--editorial {
    background: #fff;
    border-top: 1px solid #1c1c1c;
    border-bottom: 1px solid #1c1c1c;
    padding: 20px 0;
  }
  .nx-trust--editorial .nx-trust__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .nx-trust--editorial .nx-trust__cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 16px;
    border-right: 1px solid #e8e6e0;
  }
  .nx-trust--editorial .nx-trust__cell:last-child { border-right: none; }
  .nx-trust--editorial .nx-trust__label {
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
    font-size: 9px;
    letter-spacing: 2px;
    color: #6b6b6b;
    text-transform: uppercase;
    font-weight: 700;
  }
  .nx-trust--editorial .nx-trust__big {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }
  .nx-trust--editorial .nx-trust__big strong {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #1c1c1c;
  }
  .nx-trust--editorial .nx-trust__small-suffix {
    font-size: 13px;
    color: #6b6b6b;
    font-weight: 600;
  }
  .nx-trust--editorial .nx-trust__brand-sub {
    font-size: 10px;
    color: #6b6b6b;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  @media (max-width: 480px) {
    .nx-trust--editorial .nx-trust__big strong { font-size: 22px; }
    .nx-trust--editorial .nx-trust__cell { padding: 0 10px; }
  }
/* END_SECTION:nx-trust-block */

/* START_SECTION:nx-type-system (INDEX:100) */
/* ---------- 1. Koppen: geen kapitalen, strakkere letterafstand ---------- */
  .h0, .h1, .h2, .h3, .h4, .h5,
  h1, h2, h3, h4, h5,
  .highlighted-heading, .split-lines {
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    line-height: 1.12 !important;
  }
  .h6, .h7, h6 {
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
  }

  /* Snow's kale .heading-class zit o.a. op de "Shop de look"-titels (15px, stond op kapitaal).
     .vendor.heading is specifieker en zet hieronder zijn eigen kapitalen terug. */
  .heading { text-transform: none !important; }

  /* ---------- 2. Snow's .subheading zit overal ----------
     Van de announcement bar tot de megamenu-kolomkoppen (die stonden op 20px kapitaal).
     Cap op 12px, zodat de "kapitalen mogen tot 14px"-regel nergens meer geschonden wordt. */
  .subheading {
    font-size: 0.75rem !important;
    letter-spacing: 0.12em !important;
    line-height: 1.3 !important;
  }

  /* ⚠ De verzendbalk is een hele ZIN, geen label van twee woorden. Met 0.12em brak hij naar twee
     regels. Ruime letterafstand werkt alleen op korte labels; bij lopende tekst juist krap houden. */
  .subheading-xs, .announcement-bar .subheading {
    letter-spacing: 0.04em !important;
  }

  /* ---------- 3. Productkaart: naam leesbaar, merk als klein label ---------- */
  .product-title, .product-title.heading {
    text-transform: none !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
  }
  .vendor, .vendor.heading {
    text-transform: uppercase !important;
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    line-height: 1.2 !important;
    opacity: 0.55;
  }
  .price-list, .price, .price-list .h6 { font-weight: 500 !important; letter-spacing: 0 !important; }

  /* ---------- 4. Kleine labels: hier MOGEN hoofdletters ---------- */
  .badge { text-transform: uppercase !important; font-weight: 600 !important; letter-spacing: 0.1em !important; }

  /* ---------- 5. De nx-secties ----------
     De attribuutselectors pakken elke nx-sectie die de BEM-conventie volgt, ook toekomstige.
     Bewust op *="title" en niet *="__title": vangt ook nx-cintro__drawer-title.
     score/avg zitten erbij voor de reviewcijfers (nxrv__avg, nxrw__score). */
  [class^="nx"][class*="title"],
  [class^="nx"][class*="heading"],
  [class^="nx"][class*="__name"],
  [class^="nx"][class*="score"],
  [class^="nx"][class*="avg"],
  .nxsh__title, .nxcc__title, .nxcc__name, .nxas__title,
  .nx-seo__heading, .nx-spot__heading {
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    line-height: 1.12 !important;
  }

  /* Eyebrows zijn de uitzondering binnen nx: klein en wel kapitaal. Staat NA de regel hierboven
     zodat een class als nx-x__subheading alsnog als label leest en niet als kop. */
  [class^="nx"][class*="eyebrow"],
  [class^="nx"][class*="subheading"],
  .nx-spot__eyebrow {
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif) !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
  }

  /* Kaartlabels binnen een tegel blijven wat kleiner dan een sectiekop. */
  .nxcc__name { font-size: clamp(1.125rem, 2vw, 1.5rem) !important; }

  /* Sectiekoppen: Inter is breder dan Bebas, dus een maatje terug zodat niets omvalt. */
  .nxcc__title, .nxas__title, .nx-seo__heading, .nx-spot__heading {
    font-size: clamp(1.375rem, 1rem + 1.4vw, 1.875rem) !important;
  }

  /* De hero mag het grootst blijven, maar niet meer schreeuwen. */
  .nxsh__title { font-size: clamp(1.75rem, 1rem + 2.6vw, 2.75rem) !important; }

  /* Het lime highlight-blok draagt nu het accent, niet de kapitalen. */
  .nxsh__title em, .h0 em, .h1 em, .h2 em, .h3 em, .h4 em, .h5 em,
  .highlighted-heading em { font-style: normal; }
/* END_SECTION:nx-type-system */

/* START_SECTION:nx-typebar (INDEX:101) */
/* GEEN eigen achtergrond of rand op de actieve tab.
     Correctie op mijn eerste versie: de gevulde pill in nx-category-rail leek dood
     te staan, maar wordt op collectiepagina's bewust overschreven door
     nx-collection-nav, dat het DFYNE-model doet: platte tekst met een 3px
     onderstreping via .nx-catrail__card::after, aangestuurd door de class is-on.
     Die class zetten we nu server-side in de markup hierboven. Een gevuld vlak
     erbovenop gaf een zwart blok zonder zijruimte, waardoor de tekst er letterlijk
     buiten leek te vallen (die regel zet padding op 12px 0 18px). */

  .nx-catrail--noimg.nx-catrail--nav .nx-catrail__card:focus-visible {
    outline: 2px solid rgb(var(--accent));
    outline-offset: 2px;
  }

  /* Veel types betekent een lange rij. Op desktop mag die afbreken naar een
     tweede regel; mobiel blijft het een swipe-rail. */
  @media screen and (min-width: 1000px) {
    .nx-catrail--noimg.nx-catrail--nav .nx-catrail__row {
      flex-wrap: wrap;
      row-gap: 0;
    }
    .nx-catrail--noimg.nx-catrail--nav .nx-catrail__cell { flex: 0 0 auto; }
  }
/* END_SECTION:nx-typebar */

/* START_SECTION:nx-wishlist-page (INDEX:103) */
.nx-wishlist {
    padding: clamp(56px, 8vw, 120px) clamp(20px, 5vw, 80px);
    background: var(--color-bg, #fff);
    color: #1c1c1c;
    font-family: var(--text-font-family, 'Inter', system-ui, sans-serif);
  }
  .nx-wishlist__inner {
    max-width: 1480px;
    margin: 0 auto;
  }
  .nx-wishlist__head {
    margin-bottom: clamp(32px, 5vw, 56px);
  }
  .nx-wishlist__eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    padding: 6px 12px;
    background: #B6FF4D;
    color: #1c1c1c;
    margin: 0 0 20px;
  }
  .nx-wishlist__title {
    font-size: clamp(40px, 7vw, 88px);
    font-weight: 900;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    line-height: 0.92;
    margin: 0 0 16px;
  }
  .nx-wishlist__sub {
    font-size: 15px;
    color: #6b6b6b;
    margin: 0;
    line-height: 1.5;
  }
  .nx-wishlist__sub strong { color: #1c1c1c; font-weight: 900; }

  .nx-wishlist__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  @media (max-width: 999px) { .nx-wishlist__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 749px) { .nx-wishlist__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

  .nx-wl-card {
    position: relative;
    background: var(--color-bg, #fff);
    text-decoration: none;
    color: #1c1c1c;
    display: flex;
    flex-direction: column;
  }
  .nx-wl-card__media {
    aspect-ratio: 3/4;
    background: #f7f5f0;
    overflow: hidden;
    position: relative;
  }
  .nx-wl-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .nx-wl-card__remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,.95);
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #1c1c1c;
    transition: background .2s ease;
  }
  .nx-wl-card__remove:hover { background: #B6FF4D; }
  .nx-wl-card__remove svg { width: 14px; height: 14px; }

  .nx-wl-card__body { padding: 12px 0; }
  .nx-wl-card__name {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 6px;
  }
  .nx-wl-card__price {
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1c;
    margin: 0;
  }
  .nx-wl-card__oos {
    display: inline-block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6b6b6b;
    margin-top: 4px;
  }

  /* Empty state */
  .nx-wishlist__empty {
    padding: clamp(40px, 6vw, 80px) 0;
    text-align: center;
    border-top: 1px solid #e8e6e0;
    border-bottom: 1px solid #e8e6e0;
  }
  .nx-wishlist__empty-line {
    font-size: 15px;
    color: #6b6b6b;
    margin: 0 0 24px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .nx-wishlist__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    background: #1c1c1c;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .25s ease;
  }
  .nx-wishlist__cta:hover { background: #B6FF4D; color: #1c1c1c; }
  .nx-wishlist__cta svg { transition: transform .25s; }
  .nx-wishlist__cta:hover svg { transform: translateX(4px); }
/* END_SECTION:nx-wishlist-page */