/** Shopify CDN: Minification failed

Line 133:0 Unexpected "<"
Line 137:20 Unexpected "{"
Line 137:29 Expected ":"
Line 138:20 Unexpected "{"
Line 138:29 Expected ":"
Line 142:0 Unexpected "<"

**/
  .table-opening-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }

  .table-opening {
    width: 100%;
    max-width: 40%;
    border-collapse: collapse;
  }

  .table-opening td {
    padding: 14px 16px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 17px;
  }

  .table-opening tr:last-child td {
    border-bottom: none;
  }

  .table-opening-title {
    font-weight: 700;
    font-size: 30px;
    margin: 3rem 0 1.5rem 0;
  }

  @media screen and (max-width: 768px) {
    .table-opening {
      max-width: 100%;
    }
  }

.gf-snowboard-guide.with-space {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  line-height: 1.7;
}

.gf-snowboard-guide.with-space h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.gf-snowboard-guide.with-space ul {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}


    .verzendkosten {
      color: #333;
      line-height: 1.6;
      margin: 20px;
    }

    .verzendkosten-wrapper {
  max-width: 800px;
  margin: 0 auto;
}
    .verzendkosten h2 {
      font-size: 1.5em;
      margin: 30px 0 10px;
    }

.verzendkosten details {
  max-width: 800px;
  margin: 0 auto 20px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}


    .verzendkosten summary {
      font-weight: 600;
      font-size: 1.1em;
      cursor: pointer;
      padding: 8px 0;
    }

    .verzendkosten .table-wrapper {
      max-width: 800px;
      margin: 0 auto;
      overflow-x: auto;
    }

    .verzendkosten table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
      font-size: 0.95em;
    }

    .verzendkosten th,
    .verzendkosten td {
      padding: 10px;
      text-align: center;
      border: 1px solid #eee;
    }

    .verzendkosten th {
      background-color: #fafafa;
      font-weight: 500;
    }

    .verzendkosten ul {
      padding-left: 20px;
      margin-top: 10px;
      columns: 2;
    }

    @media (max-width: 600px) {
      .verzendkosten ul {
        columns: 1;
      }
    }

<h3 class="accordion-heading text-medium">Welk zeil past bij mij?</h3>

<style>
  /* GearFreak: slider direct tonen, geen fade/delay */
  #shopify-section-{{ section.id }} .noUi-target,
  #shopify-section-{{ section.id }} .noUi-handle {
      opacity: 1 !important;
      transition: none !important;
  }
</style>

.gf-product-bullets {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.gf-product-bullets li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.4rem;
  color: #8a8a8a; /* licht grijs */
  font-size: 1rem;
  line-height: 1.4;
}

.gf-product-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #9ca3af; /* nog iets lichter grijs */
  font-weight: 600;
}

.gf-product-bullets {
  list-style: none;
  padding: 0;
  margin-bottom: 4rem;
}

/* Footer / services column section background */
#shopify-section-sections--24900875714892__text_with_icons_Pfj8gA {
  --primaryColorBody: #D8FF4D; /* jouw groen */
}

/* Echte verticale spacing zit hier */
#shopify-section-sections--24900875714892__text_with_icons_Pfj8gA .yv-services-box {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Als de row/cols nog extra ruimte geven */
#shopify-section-sections--24900875714892__text_with_icons_Pfj8gA .row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.gf-option-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.gf-option-head .yv-variant-title { margin: 0; }
.gf-option-head .sizeChart-label { margin: 0; font-size: 13px; white-space: nowrap; color: inherit; opacity: .7; }

/* ============================================
   ALLE TABELLEN (sitebreed, sep 2026)
   Opmaak naar de maattabel-popup van Prolimit: zwarte kopregel met witte
   kapitalen, witte rijen met dunne lijn #ebebe8, eerste kolom vet, lichte
   lime-tint bij hover, afgeronde hoeken. Geldt voor elke <table> behalve
   .table-opening (openingstijden). Kolommen breken niet (nowrap); wie een
   brede tabel plaatst zet er .gf-tabel-wrap omheen voor horizontale scroll.
   ============================================ */
.table-responsive,
.gf-table-wrap,
.gf-tabel-wrap,
.size-chart-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table:not(.table-opening) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.4;
  white-space: nowrap;
}

table:not(.table-opening) thead th {
  background: #111 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 15px 18px !important;
  text-align: left;
  border: 0 !important;
}

table:not(.table-opening) tbody tr,
table:not(.table-opening) tbody tr:nth-child(odd),
table:not(.table-opening) tbody tr:nth-child(even) {
  background: #fff !important;
}

table:not(.table-opening) tbody tr:hover {
  background: #fbffe9 !important;
}

table:not(.table-opening) tbody td,
table:not(.table-opening) tbody th {
  padding: 13px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid #ebebe8 !important;
  color: #33332f !important;
  background: transparent !important;
  text-align: left;
  vertical-align: middle;
}

table:not(.table-opening) tbody tr:last-child td,
table:not(.table-opening) tbody tr:last-child th {
  border-bottom: 0 !important;
}

table:not(.table-opening) tbody td:first-child,
table:not(.table-opening) tbody th {
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #111 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* eerste kolom blijft staan bij horizontaal scrollen in brede tabellen */
table:not(.table-opening) tbody td:first-child,
table:not(.table-opening) thead th:first-child,
table:not(.table-opening) tbody th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

table:not(.table-opening) tbody td:first-child,
table:not(.table-opening) tbody th:first-child {
  background: #fff !important;
}

table:not(.table-opening) tbody tr:hover td:first-child,
table:not(.table-opening) tbody tr:hover th:first-child {
  background: #fbffe9 !important;
}

.yv-filter-item.is-empty {
  display: none;
}

/* ── Drawer-schil: zwarte merkbalk + doorlopende ondergrond ── */
.pickup-availability-drawer .yv_side_drawer_title { background: #111; padding: 14px 18px; }
.pickup-availability-drawer .yv_side_drawer_title h6 { color: #fff; }
.pickup-availability-drawer .yv_side_drawer_title h6::before {
  content: "GEARFREAK"; display: block;
  font-size: 11px; letter-spacing: .12em; font-weight: 400; opacity: .6; margin-bottom: 2px;
}
.pickup-availability-drawer .yv_side_drawer_close { background: transparent; color: #fff; }
.pickup-availability-drawer .yv_side_drawer_close svg { fill: #fff; stroke: #fff; }
.pickup-availability-drawer .yv_side_drawer_body { background: #f6f5f2; }
.pickup-availability-drawer .yv-side-drawer-container { background: #f6f5f2 !important; }

/* ── Header / producthero ── */
.gf-drawer-head { margin-bottom: 1rem; }
.gf-wordmark { font-weight: 500; letter-spacing: .09em; font-size: .8rem; }
.gf-drawer-product { margin-bottom: 1.25rem; }
.gf-drawer-vendor { margin: 0 0 .1rem; font-size: 12px; letter-spacing: .11em; text-transform: uppercase; color: rgba(0,0,0,.5); }
.pickup-availability-drawer-title { margin: 0 0 .25rem; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; }  /* producthero — grootst */
.pickup-availability-variant { margin: 0; font-size: 13px; color: rgba(0,0,0,.55); }
.pickUpAvailabilityContent { background: transparent; padding: 1.25rem 1.1rem 1.4rem; }

/* ── Winkelkaarten ── */
.pickup-availability-list__item { background: #fff; border: 1px solid rgba(0,0,0,.05); border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 1rem 1.1rem; margin-bottom: .7rem; }
.pickup-availability-list__item .pickup-loaction-title { margin: 0 0 .6rem; font-size: 16px; line-height: 1.2; letter-spacing: -0.01em; }  /* winkelnaam — kleiner dan de hero */
.pickup-availability-preview { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .6rem; }

/* ── Badges ── */
.gf-pickup-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: 12.5px; font-weight: 500; line-height: 1; padding: .4rem .7rem; border-radius: 999px; }
.gf-pickup-badge--instock { background: #D8FF4D; color: #1a1a00; }
.gf-pickup-badge--soon    { background: transparent; color: #111; border: 1px solid #111; }
.gf-pickup-badge--out     { background: #f1f1f1; color: #888; }
.gf-pickup-free { font-size: 13px; opacity: .6; }

/* ── Adres + acties ── */
.pickup-availability-address { font-style: normal; opacity: .7; font-size: 13px; line-height: 1.45; margin: 0; }
.gf-pickup-actions { display: flex; gap: .6rem; margin-top: .8rem; }
.gf-pickup-action { display: inline-flex; align-items: center; gap: .4rem; font-size: 13px; font-weight: 500; text-decoration: none; color: #111; border: 1px solid #111; padding: .5rem .85rem; border-radius: 999px; }
.gf-pickup-action:hover { background: #111; color: #fff; }

/* ── Footer / merk-afsluiter ── */
.gf-drawer-footer { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid rgba(0,0,0,.08); }
.gf-tagline { margin: 0; font-size: 18px; font-weight: 500; }
.gf-tagline::after { content: ""; display: inline-block; width: 8px; height: 8px; background: #D8FF4D; border-radius: 50%; margin-left: 7px; }
.gf-trust { margin: .25rem 0 .7rem; font-size: 13px; opacity: .6; }
.gf-drawer-wa { display: inline-flex; align-items: center; gap: .4rem; font-size: 13px; font-weight: 500; text-decoration: underline; color: #111; }

/* ============================================
   PDP header — vendor / titel / titeltext / lijn / prijs / winkelwagen-knop
   (Lovable-redesign, ronde 1 — sep 2026)
   ============================================ */
/* De breadcrumb-balk is zelf symmetrisch (15px boven en onder de tekst), maar de
   productsectie eronder voegt nog eens 40px (rechterkolom) resp. 45px (galerij)
   padding-top toe. Die halen we weg zodat de ruimte onder de kruimeltekst gelijk
   is aan die erboven; beide kolommen tegelijk, anders lopen ze uit elkaar.
   Extra selector-gewicht is nodig: theme.min.css laadt na gf-custom.css. */
[id^="ProductData"] .yv-main-product-detail.slider-product-detail,
.yv-product-gallery-slider.gallery-style {
  padding-top: 0;
}

.yv-main-product-detail .pdp-vendor {
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #767672;
  margin: 0 0 .3rem;
}

.yv-main-product-detail .yv-product-detail-title {
  font-weight: 900;
  font-size: 40px;
  font-variation-settings: 'wdth' 125;  /* breedte-as van Mona Sans, geen layout-breedte */
  line-height: .98;
  margin: .55rem 0 .95rem;
}

/* elk custom_liquid-blok in de producthead-kolom (vendor, titeltext, lijn, bulletpoints)
   komt uit product-form.liquid automatisch in .product_custom_liquid terecht;
   die wrapper draagt standaard thema-marge/padding die de losse blokken uit elkaar duwt.
   Spacing wordt al door de eigen classes (.pdp-vendor, .pdp-hero-regel, .pdp-divider) geregeld. */
.yv-main-product-detail .product_custom_liquid {
  margin: 0;
  padding: 0;
}

.yv-main-product-detail .pdp-hero-regel {
  font-weight: 400;
  font-size: 16px;
  color: #4d4d4d;
  margin: 0 0 1rem;
}

.pdp-divider {
  border: none;
  border-top: 2px solid #111;
  margin: 1.6rem 0 1.25rem;
}

.yv-main-product-detail .yv-product-price {
  font-weight: 800;
  font-size: 24px;
}

/* prijs, doorgestreepte prijs en besparingsbadge op dezelfde basislijn;
   zonder dit hangt de doorgestreepte prijs te hoog naast de hoofdprijs */
.yv-main-product-detail .yv-prizebox {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .65rem;
}

/* het doosje om streepprijs + badge opheffen, zodat alle drie losse
   onderdelen op de rij zijn: dan zakt alleen de badge naar regel twee */
.yv-main-product-detail .yv-compare-price-box {
  display: contents;
}

.yv-main-product-detail .yv-product-price,
.yv-main-product-detail .yv-product-compare-price {
  white-space: nowrap;
}

.yv-main-product-detail .yv-product-compare-price {
  font-weight: 400;
  font-size: 16px;
  color: #767672;
  text-decoration: line-through;
}

.yv-main-product-detail .pdp-besparing {
  background: #D8FF4D;
  color: #111;
  text-transform: none;  /* de prijsbox erft 'capitalize' van het thema: "Je Bespaart" */
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  padding: .45rem .7rem;
  border-radius: 6px;
  white-space: nowrap;
}

.yv-main-product-detail .Sd_addProduct.add_to_cart {
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* USP-regel direct onder de koopknop.
   Het knopblok heeft zelf margin-bottom: 30px; aangrenzende marges tellen niet op
   (de grootste wint), dus een kleinere marge op .pdp-subline alleen doet niets.
   Daarom hier het knopblok zelf strakker zetten. */
.yv-main-product-detail .product_button {
  margin-bottom: 6px;
}

.yv-main-product-detail .pdp-subline {
  font-weight: 400;
  font-size: 13px;
  color: #4d4d4d;
  text-align: center;
  margin: .45rem 0 0;
  line-height: 1.5;
}

.yv-main-product-detail .pdp-subline-sep {
  margin: 0 .25rem;
  color: #a8a8a4;
}

.yv-main-product-detail .pdp-subline a {
  color: #111;
  text-decoration: underline;
}

/* ============================================
   PDP sectie 1 — Bevestiging (gf-pdp-bevestiging)
   Links kop + description in de Yuva rich-text classes, rechts "Niet voor jou
   als…" uit custom.vergelijking. Achtergrond lichtgrijs.
   LET OP: leveranciersbeschrijvingen bevatten specs-tabellen, en de themaregel
   voor tabellen zet white-space: nowrap. In een grid met 1.2fr/1fr (min-width
   auto) duwt zo'n tabel de hele pagina breder. Vandaar minmax(0, …) op beide
   kolommen en een eigen scrollcontainer om tabellen in de description.
   ============================================ */
.shopify-section.custom-liquid-section:has(.gf-pdp-bevestiging) {
  --primaryColorBody: #f7f7f5;
  background: #f7f7f5 !important;
  overflow-x: clip;
}

.gf-pdp-bevestiging {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  text-align: left;
}

.gf-pdp-bevestiging--enkel {
  grid-template-columns: minmax(0, 1fr);
}

.gf-pdp-bevestiging__tekst {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

.gf-pdp-bevestiging__body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.gf-pdp-bevestiging__body img {
  max-width: 100%;
  height: auto;
}

.gf-pdp-bevestiging__kaart {
  background: #fff;
  border-radius: 6px;
  padding: 24px 26px;
  min-width: 0;
}

.gf-pdp-bevestiging__kaartkop {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: #000;
}

.gf-pdp-bevestiging__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gf-pdp-bevestiging__lijst li {
  font-size: 14px;
  line-height: 1.55;
  color: #33332f;
  padding: 0;
  margin: 0;
}

.gf-pdp-bevestiging__lijst li::before {
  content: "\2026";
  margin-right: .15em;
}

.gf-pdp-bevestiging__lijst a {
  color: #000;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gf-pdp-bevestiging__lijst a:hover {
  color: #4d4d4d;
}

.gf-pdp-bevestiging__pijl {
  color: #767672;
}

@media (max-width: 991px) {
  .gf-pdp-bevestiging {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

/* ============================================
   PDP sectie 2 — Verlangen (gf-pdp-verlangen)
   Full-width beeldstrook met vaste hoogte, uit custom.sectie_2_afbeeldingen
   en custom.sectie_2_video. Geen 100vw (dat telt de scrollbar mee en gaf
   horizontale scroll), maar 100% binnen een sectie zonder zijmarges, met
   overflow-x: clip als vangnet.
   ============================================ */
.shopify-section.custom-liquid-section:has(.gf-pdp-verlangen) {
  overflow-x: clip;
  padding-left: 0;
  padding-right: 0;
}

.shopify-section.custom-liquid-section:has(.gf-pdp-verlangen) .container,
.shopify-section.custom-liquid-section:has(.gf-pdp-verlangen) .container-fluid {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
  width: 100%;
}

.gf-pdp-verlangen {
  --gf-verlangen-hoogte: 520px;
  width: 100%;
  max-width: 100%;
  background: #111;
}

.gf-pdp-verlangen__strook {
  display: flex;
  gap: 6px;
  height: var(--gf-verlangen-hoogte);
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gf-pdp-verlangen__strook::-webkit-scrollbar {
  display: none;
}

.gf-pdp-verlangen__item {
  flex: 0 0 auto;
  height: 100%;
  scroll-snap-align: start;
  background: #111;
}

.gf-pdp-verlangen__item img,
.gf-pdp-verlangen__item video {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
}

.gf-pdp-verlangen__item--embed iframe {
  display: block;
  height: 100%;
  width: calc(var(--gf-verlangen-hoogte) * 16 / 9);
  border: 0;
}

/* één item: volle breedte, uitsnede via cover */
.gf-pdp-verlangen--enkel .gf-pdp-verlangen__strook {
  overflow: hidden;
}

.gf-pdp-verlangen--enkel .gf-pdp-verlangen__item {
  flex: 1 1 100%;
  width: 100%;
}

.gf-pdp-verlangen--enkel .gf-pdp-verlangen__item img,
.gf-pdp-verlangen--enkel .gf-pdp-verlangen__item video {
  width: 100%;
}

.gf-pdp-verlangen--enkel .gf-pdp-verlangen__item--embed iframe {
  width: 100%;
}

@media (max-width: 767px) {
  .gf-pdp-verlangen {
    --gf-verlangen-hoogte: 360px;
  }
}

/* ============================================
   PDP sectie 4 — Techniek & constructie (gf-pdp-techniek)
   Wisselaar: vierkant beeld links, features rechts. Klik op een regel of op een
   bolletje wisselt het beeld. Puur CSS: verborgen radio-inputs staan vóór de
   viewer en de lijst, zodat :checked ~ de juiste slide, dot en regel aanwijst.

   Uitlijning: het beeld is vierkant (breedte bepaalt de hoogte) en de
   featurelijst rekt daar naartoe met align-content: space-between, zodat de
   onderste lijn van de lijst gelijk loopt met de onderkant van het beeld.
   De bolletjes staan absoluut onder het beeld en tellen dus niet mee in de
   hoogte; ze steken bewust iets uit. Kolomverdeling 5/7 zodat het vierkant
   ongeveer even hoog uitkomt als vier features.

   Verloop van lime naar zwart; actieve regel krijgt een zwarte balk.
   LET OP: de regels zijn <label>-elementen; Yuva zet labels standaard in
   hoofdletters, vandaar text-transform: none. De maat van de radio-inputs staat
   inline in het snippet, want Yuva zet elke input op width: 100%.
   ============================================ */
.shopify-section.custom-liquid-section:has(.gf-pdp-techniek) {
  --primaryColorBody: #ffffff;
  background: #ffffff !important;
  overflow-x: clip;
}

.gf-pdp-techniek {
  text-align: left;
}

.gf-pdp-techniek__kop {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 28px;
  text-transform: none;
}

.gf-pdp-techniek__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.gf-pdp-techniek__lijst {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  min-width: 0;
}

.gf-pdp-techniek__kaart {
  border: 1.5px solid #ebebe8;
  border-radius: 6px;
  padding: 22px 24px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  text-transform: none !important;
  letter-spacing: normal;
  font-weight: 400;
}

.gf-pdp-techniek__naam {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0;
  text-transform: none !important;
  display: block;
  color: #111;
}

.gf-pdp-techniek__tekst {
  font-size: 14px;
  line-height: 1.55;
  color: #55554f;
  margin: 0;
  text-wrap: pretty;
  display: block;
  text-transform: none !important;
  letter-spacing: normal;
  font-weight: 400;
}

/* ── wisselaar: vierkant beeld links, lijst rechts, onderkanten gelijk ── */
.gf-pdp-techniek--switch .gf-pdp-techniek__body {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 44px;
  align-items: stretch;
}

.gf-pdp-techniek__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.gf-pdp-techniek__verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gf-pdp-techniek__viewer {
  min-width: 0;
  position: relative;
  align-self: start;
}

.gf-pdp-techniek__stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(150deg, #D8FF4D 0%, #a8cf28 42%, #111111 100%);
  border-radius: 6px;
  overflow: hidden;
}

.gf-pdp-techniek__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .25s ease;
}

.gf-pdp-techniek__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* bolletjes hangen onder het beeld en tellen niet mee in de hoogte */
.gf-pdp-techniek--switch .gf-pdp-techniek__dots {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 14px;
}

.gf-pdp-techniek__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.gf-pdp-techniek__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d9d9d4;
  cursor: pointer;
  display: block;
  transition: background .2s ease, transform .2s ease;
}

.gf-pdp-techniek__dot:hover {
  background: #b4b4ae;
}

.gf-pdp-techniek--switch .gf-pdp-techniek__lijst {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: min-content;
  align-content: space-between;
  gap: 0;
}

.gf-pdp-techniek--switch .gf-pdp-techniek__kaart {
  border: 0;
  border-top: 1.5px solid #ebebe8;
  border-left: 3px solid transparent;
  border-radius: 0;
  padding: 20px 0 20px 16px;
  gap: 7px;
  cursor: pointer;
  transition: border-color .2s ease, padding-left .2s ease;
}

.gf-pdp-techniek--switch .gf-pdp-techniek__kaart:last-of-type {
  border-bottom: 1.5px solid #ebebe8;
}

.gf-pdp-techniek--switch .gf-pdp-techniek__naam {
  font-size: 18px;
}

.gf-pdp-techniek--switch .gf-pdp-techniek__tekst {
  font-size: 15px;
  line-height: 1.6;
  max-width: 62ch;
}

/* actieve staat per index: slide zichtbaar, bolletje zwart, regel met zwarte balk */
.gf-pdp-techniek__radio:nth-of-type(1):checked ~ .gf-pdp-techniek__viewer .gf-pdp-techniek__slide--1,
.gf-pdp-techniek__radio:nth-of-type(2):checked ~ .gf-pdp-techniek__viewer .gf-pdp-techniek__slide--2,
.gf-pdp-techniek__radio:nth-of-type(3):checked ~ .gf-pdp-techniek__viewer .gf-pdp-techniek__slide--3,
.gf-pdp-techniek__radio:nth-of-type(4):checked ~ .gf-pdp-techniek__viewer .gf-pdp-techniek__slide--4,
.gf-pdp-techniek__radio:nth-of-type(5):checked ~ .gf-pdp-techniek__viewer .gf-pdp-techniek__slide--5,
.gf-pdp-techniek__radio:nth-of-type(6):checked ~ .gf-pdp-techniek__viewer .gf-pdp-techniek__slide--6 {
  opacity: 1;
}

.gf-pdp-techniek__radio:nth-of-type(1):checked ~ .gf-pdp-techniek__viewer .gf-pdp-techniek__dot--1,
.gf-pdp-techniek__radio:nth-of-type(2):checked ~ .gf-pdp-techniek__viewer .gf-pdp-techniek__dot--2,
.gf-pdp-techniek__radio:nth-of-type(3):checked ~ .gf-pdp-techniek__viewer .gf-pdp-techniek__dot--3,
.gf-pdp-techniek__radio:nth-of-type(4):checked ~ .gf-pdp-techniek__viewer .gf-pdp-techniek__dot--4,
.gf-pdp-techniek__radio:nth-of-type(5):checked ~ .gf-pdp-techniek__viewer .gf-pdp-techniek__dot--5,
.gf-pdp-techniek__radio:nth-of-type(6):checked ~ .gf-pdp-techniek__viewer .gf-pdp-techniek__dot--6 {
  background: #111;
  transform: scale(1.25);
}

.gf-pdp-techniek__radio:nth-of-type(1):checked ~ .gf-pdp-techniek__lijst .gf-pdp-techniek__kaart--1,
.gf-pdp-techniek__radio:nth-of-type(2):checked ~ .gf-pdp-techniek__lijst .gf-pdp-techniek__kaart--2,
.gf-pdp-techniek__radio:nth-of-type(3):checked ~ .gf-pdp-techniek__lijst .gf-pdp-techniek__kaart--3,
.gf-pdp-techniek__radio:nth-of-type(4):checked ~ .gf-pdp-techniek__lijst .gf-pdp-techniek__kaart--4,
.gf-pdp-techniek__radio:nth-of-type(5):checked ~ .gf-pdp-techniek__lijst .gf-pdp-techniek__kaart--5,
.gf-pdp-techniek__radio:nth-of-type(6):checked ~ .gf-pdp-techniek__lijst .gf-pdp-techniek__kaart--6 {
  border-left-color: #111111;
  padding-left: 20px;
}

@media (max-width: 991px) {
  .gf-pdp-techniek__kop {
    font-size: 26px;
  }
  .gf-pdp-techniek--switch .gf-pdp-techniek__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .gf-pdp-techniek__viewer {
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
    padding-bottom: 30px;
  }
}

@media (max-width: 600px) {
  .gf-pdp-techniek__lijst {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================
   PDP sectie 5 — Specificaties (gf-pdp-specs)
   Lichtgrijze achtergrond. Twee tabellen: vaste productregels (label/waarde)
   en de maattabel uit custom.sectie_5_specs. De tabelopmaak zelf komt uit
   het sitebrede blok ALLE TABELLEN; hier alleen wat specifiek is.
   ============================================ */
.shopify-section.custom-liquid-section:has(.gf-pdp-specs) {
  --primaryColorBody: #f7f7f5;
  background: #f7f7f5 !important;
  overflow-x: clip;
}

.gf-pdp-specs {
  text-align: left;
}

.gf-pdp-specs__kop {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 24px;
  text-transform: none;
}

.gf-pdp-specs__vast {
  margin-bottom: 28px;
}

/* label/waarde-tabel: smaller, vaste labelkolom */
.gf-pdp-specs .gf-tabel--kv {
  max-width: 560px;
}

.gf-pdp-specs .gf-tabel--kv tbody th {
  width: 160px;
}

.gf-pdp-specs .gf-tabel--kv tbody td {
  white-space: normal;
}

/* opmerking onder de maattabel */
.gf-pdp-specs__maat p {
  font-size: 13px;
  color: #55554f;
  margin: 12px 0 0;
}

@media (max-width: 991px) {
  .gf-pdp-specs__kop {
    font-size: 26px;
  }
  .gf-pdp-specs .gf-tabel--kv {
    max-width: none;
  }
}