/* ===================================================================
   SOKKIES — responsive.css (FLOOR-ANCHORED BANDEN, 2026-07-30 v2,
   schema Kulwant). Elk design staat aan de ONDERKANT van zijn band en
   schaalt omhoog (meer ruimte = veilig). Banden zijn range-fenced en
   volledig geisoleerd; regels die in meerdere banden horen staan
   bewust gedupliceerd.
   - basis style.css  = 1920-design (1920 en breder, plus 1681-1919
     via de 60px-gutter-guard zolang de 1681-1919-band leeg is)
   - 1440-1680        = 1440-design (Kulwant-final)
   - 1280-1439        = 1280-opmaak
   - 1025-1279        = idem (aparte band voor toekomstige tuning;
     ondergrens 1025 i.p.v. 992 zodat 992-1024 tablet blijft — daar
     zit de compacte navbar die anders zou wegvallen)
   - 769-1024         = tablet
   - 521-768          = klein/hamburger (768-XD hoort hierbij)
   - t/m 520          = mobiel (final)
   Backups: _BACKUP-responsive-cascade-2026-07-30.css (cascade) en
   _BACKUP-responsive-banden-v1-2026-07-30.css (ceiling-banden v1).
   =================================================================== */

/* ===================================================================
   2000px en breder
   =================================================================== */
/* ===================================================================
   1920 en breder — achtergrondvormen op hun ware proportie
   -------------------------------------------------------------------
   ALGEMEEN PATROON (geldt voor alle vormen hieronder): de vorm is een
   afbeelding van 1920px breed die met background-size:cover in een vlak
   staat dat LAGER is dan de afbeelding. 'cover' pakt dan de breedte als
   maatstaf, dus boven 1920px groeit de vorm mee en wordt er een KLEINER
   deel van dezelfde afbeelding zichtbaar. De vorm oogt daardoor
   uitvergroot: rondingen worden steiler, banden dunner of dikker.
   De oplossing is telkens dezelfde: hoogte VAST op wat 1920px toont,
   breedte laten meerekken zodat er niets onbedekt blijft.
   -------------------------------------------------------------------
   .collection:before/:after tekenen bg-yellow-shape.png (1920x1356) met
   background-size:cover. 'cover' rekent met de BREEDTE van de sectie, dus
   boven 1920px werd de vorm meegeschaald: op 2560px kwam hij 1797px hoog
   uit in plaats van 1356px. Het vlak eromheen blijft 701px hoog, dus je
   ziet dan een ANDER stuk van dezelfde afbeelding — de golf oogt steiler,
   de gele band dunner (melding Kulwant op 2560px).
   De hoogte staat nu vast op de hoogte die de vorm op 1920px heeft; de
   breedte rekt mee zodat er rechts geen strook onbedekt blijft. Onder
   1920px verandert er niets: die banden hebben hun eigen regels en 'cover'
   blijft daar gewoon staan.
   De oude correctie top:-100% (die hier stond voor >=2000px) is daarmee
   overbodig: die compenseerde juist het meeschalen. Met een vaste hoogte
   klopt de basiswaarde -76% weer, en dat is exact wat 1920px toont.
   =================================================================== */


@media (min-width:2000px){
  .cta-final-feet {
      left: 150px;
  }
  main.contact {
    background-size: 100%;
  }
  .pt-otp:before {
    top: -110px;
    background-size: 100%;
  }
  .pt-faq::before {
    height: 1064px;
    background-size: 110%;
  }
  .cta-final-panel {
    background-size: 110%;
  }
  .dz-certs::before {
    background-size: 100% 100%;
  }
  .over-ons .cta-final-feet, .duurzaamheid .cta-final-feet {
    top: -430px;
  }
  .timeline::before {
    background-size: 100% 90%;
  }
  .over-ons .impact:before {
    background-size: 100% 100%;
  }
  .overons-values::before {
    background-size: 100% 100%;
  }
  .application-bg-shape {
    height: 966px;
    background-size: 110% 110%;
  }
  .toepassingen .collection-beige::before {
    background-size: 100% 100%;
  }
  .conf-bg {
    height: 1812px;
    top: -66%;
    background-size: 100% 100%;
    background-position: bottom;
  }
  .cases.cases-pdp {
    padding: 430px 0 50px;
  }
  .case-bg-union {
    height: 1352px;
    background-size: 100%;
  }
  .cases-solid .case-text {
    flex: 0 0 50%;
  }

}
@media (min-width:1920px){
  .collection:before,
  .collection:after{
    background-size:100% 1356px;
  }
  .collection:before{
    top:-76%;
  }
  /* NIET voor .cta-final-panel (cta-bg-shape.svg). Geprobeerd en NAGEMETEN:
     de linkerrand van het corale vlak week met cover maximaal 3,4% van de
     breedte af t.o.v. 1920px, en met een vaste hoogte 11%. Deze vorm is een
     grote ronding waarvan juist de HORIZONTALE maat telt; die uitrekken zet
     de bocht verder naar rechts. Hier is cover dus de betere keuze — laat
     staan. Zie CLAUDE.md voor de meetwaarden. */
     .cases-feet {
      position: absolute;
      top: -37%;
      right: 2%;
  }
  
}

/* ===================================================================
   1681-1919 — (leeg scaffold; basis + gutter-guard bedient dit
   bereik — hier tunen als 1681-1919 ooit eigen regels nodig heeft)
   =================================================================== */
@media (min-width:1680px) and (max-width:1919px){
  /* ═══ Product-detail — usecases (spec Kulwant 2026-08-04): 1920-design
     (330 + 20 + 460 = 810 per kolom) past niet op 1680 (container 1560) —
     alles ±10% kleiner; rij = 300 + 20 + 410 = 730, ×2 + 100 gap = 1560 ═══ */
  .usecase-card-small{
    width:300px;
  }
  .usecase-img-lg{
    width:410px;
    height:345px;
  }
  .usecase-img-md{
    height:245px;
  }
  .usecases-outer-right{
    gap:90px;
  }
  /* ═══ Waarom Sokkies — 1680-1919 (spec Kulwant 2026-08-10) ═══ */
  .ws-gets:before{
    background-position:right top;
  }
  /* ═══ Over-ons/duurzaamheid — 1680-ronde (spec Kulwant 2026-08-13) ═══ */
  .over-ons .cta-final-feet,
  .duurzaamheid .cta-final-feet{
    width:280px;
    top:-358px;
  }
  /* ═══ Reviews-en-cases-detail — 1680-ronde (spec Kulwant 2026-08-13) ═══ */
  .sock-duddle-object{
    width:190px;
    bottom:18%;
  }
  /* ═══ Configurator — 1680-ronde testronde 2 (spec Kulwant 2026-08-13) ═══ */
  .conf-works > .container > h2{
    margin-bottom:30px;
  }
   .translatepress-en_GB .conf-works > .container > h2, .translatepress-de_DE .conf-works > .container > h2, .translatepress-fr_FR .conf-works > .container > h2{
    margin-bottom:20px;
  }
  .conf-bg{
    background-position:right top;
  }
  /* ═══ Product-detail — 1680-ronde testronde 2 (specs Kulwant 2026-08-13) ═══ */
  .weave-inner:before{
    top:-4%;
  }
  .versus-dubble-left{
    top:-20%;
  }
  .specs-duddle-icons .dubble-right{
    width:250px;
    top:-90px;
  }
  .specs-duddle-icons .dubble-left{
    width:190px;
    bottom:-165px;
  }
  .versus{
    padding-top:160px;
  }
  /* ═══ Home — hero-gallery (spec Kulwant 2026-08-12): slides 520 hoog
     (basis/1920 houdt 560; over-ons' eigen 420-regel wint op specificiteit) ═══ */
  .gallery-swiper .swiper-slide{
    height:520px;
  }
  /* ═══ Home — impact/collection/process (specs Kulwant 2026-08-12) ═══ */
  
  .collection:before{
    top:-70%;
  }
  .process:not(.conf-works) > .container > h2{
    padding-top:80px;
  }
  .cases:before {
    background-size: max(100%, 1920px) 90%;
    background-position: 33%;
    height: 85%;
  }
  .cases-feet {
    top: -42%;
    right: 0;
    width: 313px;
  }
  .cases-solid .case-sock-right {
    width: 22%;
  }
  .case-story-left {
    flex: 0 0 30%;
    padding: 0;
  }
}

/* ===================================================================
   1440-1680 — 1440-DESIGN (Kulwant-final; schaalt omhoog t/m 1680)
   =================================================================== */
@media (min-width:1440px) and (max-width:1679px){
  /* Gravity-tegenhanger van .type-picker / .extra-picker (gemeten op htmlv). */
  .quote-card .of-soktypes .gfield_checkbox{ gap:10px; }
  /* ws-compare-doodle: alleen 1920-ontwerp (zie basis) */
  .ws-compare-doodle-1{
    display:none;
  }
  /* pin: basis (ws-gets-left ol p) ging 2026-08-12 naar h5-token (1920) —
     band houdt body-lg */
  .ws-gets-left ol p{
    font-size:var(--body-lg-font-size);
  }
  /* pin: basis (ws-compare) kreeg 2026-08-12 padding-top 40 / margin-top -40
     (1920) — band houdt 0/0 */
  .ws-compare{
    padding-top:0px;
    margin-top:0px;
  }
  /* pin: basis-bottom (ws-intro golf) ging 2026-08-12 naar 40px (1920) —
     band houdt 0 */
  .ws-intro::before{
    bottom:0px;
  }
  /* pin: basis (jr-index) werd 2026-08-12 sticky top:130 (1920) —
     band houdt static */
  .jr-index{
    position:static;
  }
  /* pin: basis (pt-otp) ging 2026-08-12 naar padding-top 370 / :before top
     -130 (1920) — band houdt 500 / 0 */
  .pt-otp{
    padding-top:380px;
  }
  .pt-otp:before{
    top:-120px;
  }
  /* pin: basis-h2 (overons-story) ging 2026-08-12 naar h2-token (1920) —
     band houdt h3-token */
  .overons-story-text h2{
    font-size:var(--h3-font-size);
  }
  /* pin: basis zette de open-vraaglijn 2026-08-12 op none (1920) —
     band houdt de goedgekeurde lijn */
  .faq-page .faq-item.is-open .faq-q{
    border-bottom:1px solid var(--border-light);
  }
  /* pin: basis-gap (case-grid) ging 2026-08-12 naar 35px 20px (1920) —
     band houdt 20 */
  .case-grid{
    gap:20px;
  }
  /* pin: basis-padding-bottom (calculator-pink) ging 2026-08-12 naar 120px
     (1920) — band houdt 67 (compound-conventie) */
  .calculator.calculator-pink{
    padding-bottom:67px;
    padding-top:80px;
  }
  /* configurator-doodles + sokkenpatroon: alleen 1920-ontwerp (zie basis,
     zelfde patroon als PDP's design-duddle-sock) */
  .configurator-section .conf-duddle-r,
  .configurator-section .conf-duddle-l,
  .configurator-section:after,
  .conf-works:before,
  .conf-types:before{
    display:none;
  }
  /* pin: basis-h2 ging 2026-08-12 naar h2-token + margin -30 (1920) —
     band houdt de goedgekeurde h3-token + 40 */
  .conf-works > .container > h2{
    font-size:var(--h3-font-size);
    margin-bottom:30px;
  }
   .translatepress-en_GB .conf-works > .container > h2, .translatepress-de_DE .conf-works > .container > h2, .translatepress-fr_FR .conf-works > .container > h2{
    margin-bottom:20px;
  }
  /* ── DEFINITIEVE TYPOGRAFIE-INVENTARIS (PDF Kulwant 2026-08-03) — DE bron
     voor alle content-typografie in deze band; maten hier wijzigen, nooit
     als harde px in sectieregels ── */
  :root{
    --h1-font-size:58px;
    --h2-font-size:38px;
    --h3-font-size:26px;
    --h4-font-size:23px;
    --h5-font-size:19px;
    --h6-font-size:17px;
    --body-font-size:15px;
    --body-lg-font-size:17px;
    --body-sm-font-size:12px;
  }
  /* containerbreedte (winnaar na dode-lagen-opruiming 2026-08-04) */
  .container{
    max-width: min(1320px, 100% - 40px);
  }




  /* ————— uit oud ≤1680 ————— */

  /* 1680-test 2026-07-28: betaal/verzend-strip paste nét niet meer op één
     regel (852+1+533 content + 2×30 gap = 1446 > 1440) en wikkelde lelijk */
  .footer-pay{
    gap:20px 20px;
  }
  /* telefoonnummer in de footer brak midden in het nummer af */
  footer a[href^="tel:"]{
    white-space:nowrap;
  }

  /* ————— uit oud ≤1550 ————— */

  /* 1280-test 2026-07-28: onder de 1320-container past de betaal/verzend-strip
     nooit op één regel — netjes gecentreerd laten wrappen, zwevende divider weg */
  .footer-pay{
    justify-content:space-between;
    row-gap:16px;
  }
  
  header .container{
    max-width: 95.9%;
  }
  .menu {
    gap: 25px;
  }
  .translatepress-fr_FR .menu {
    gap: 11px;
  }
  .translatepress-de_DE .menu {
    gap: 20px;
  }
  .logo{
    display: flex;
    width: 96px;
  }
  .mega {
    padding: 30px;
    border-radius: 15px 15px 35px 35px;
    width: calc(100% + 78px);
    grid-template-columns: auto 29.5% auto;
  }
  .mega-usps span {
    font-size: 15px;
  }
  .prod-card .prod-price {
    font-size: 14px;
  }
  .prod-card .prod-img-card {
    height: 150px;
    border-radius: 10px;
  }
  .types {
    gap: 10px 30px;
  }
  .type-item .type-img {
    width: 58px;
    height: 58px;
    border-radius: 5px;
  }
  /* pin: basis kreeg 2026-08-12 de 4.3-compositieformule (width +
     margin-left) — deze band houdt de goedgekeurde standaardbox */
  .gallery .gallery-swiper{
    width:auto;
    margin-left:0;
  }
  .gallery-swiper .swiper-slide {
    width: 314px;
    height: 440px;
  }
  .impact {
    padding: 8px 0 125px;
  }
  .impact-inner {
      height: 465px;
      gap: 56px;
  }
  .impact-gallery {
      width: 890px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul {
    gap: 19px;
  }
  .impact-left {
      padding-inline-start: 0;
  }
  .stat-num {
    font-size: 58px;
  }
  .feat-label{
    font-size:18px;
  }
  .collection:before {
    top: -51%;
    background: url(../media/yellow-shape-1440.svg);
    background-size: cover;
  }

  .collection-img {
    height: 295px;
  }
  .collection-name {
    font-size: 17px;
  }
  .collection-card-foot {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 22px;
    gap: 20px;
  }
  .collection-grid {
    gap: 20px;
  }
  .collection-cta{
    margin-top: 30px;
  }
  .collection:after {
    bottom: -16%;
  }
  .v-swiper .swiper-slide {
    width: 100%;
    height: 345px;
    border-radius: 15px; 
  }
  .process {
    padding: 155px 0 120px;
  }
  .process:not(.conf-works) > .container > h2{
    padding-top: 0;
    margin-bottom: 30px;
  }
  .process-steps {
    gap: 67px;
  }
  .calc-grid {
    grid-template-columns: 1fr 440px;
  }
  .calc-panel {
    padding: 40px;
  }
  .calc-mid{
    grid-template-columns: 440px 1fr;
    gap: 35px;
  }
  .calc-hint{
    height: 112px;
  }
  .staffel-row {
    padding: 8px 20px;
  }
  .calc-panel h3 {
    margin-bottom: 20px;
  }
  .calc-result {
    padding-top: 5px;
  }
  .calc-row{
    margin-bottom: 20px;
  }
  .calc-total-row{
    margin-bottom: 8px;
  }
  .calc-field {
    margin-bottom: 20px;
  }
  .staffel-head-row {
    padding: 8px 20px;
    height: 36px;
  }
  .gift {
    padding: 140px 0 70px;
  }
  .gift-img {
    height: 295px;
    border-radius: 10px;
  }
  .cases {
    padding: 140px 0 50px;
  }
  .case-inner {
    gap: 50px;
  }
  .case-img.case-img-main {
    height: 382px;
    width: 382px;
  }
  .case-img {
    border-radius: 15px;
    width: 248px;
    height: 180px;
  }
   .cases:before{
    background:url(../media/blue-shape-lg.png);
    background-size: 100%;
    height:76%;
    background-repeat: no-repeat;
  }
  .cases-feet {
    top: -16%;
    right: 0%;
    width: 244px;
    height: 354px;
  }
  .designed {
    margin-top: 102px;
  }
  .designed-swiper .swiper-slide {
    width: 295px;
    height: 295px;
    border-radius: 15px;
  }
  .designed-swiper {
    width: 105vw;
  }
  .brand-intro-inner {
    max-width: 60%;
  }
  .brand-intro {
    padding: 70px 0 100px;
  }
  .brand-intro-inner h2 {
    margin-bottom: 10px;
  }
  .brand-duddle-icons .dubble-left {
    top: -19%;
    left: 4%;
    width: 81px;
    height: auto;
  }
  .brand-duddle-icons .dubble-right {
    bottom: 4%;
    right: 4%;
    width: 81px;
    height: auto;
  }

  .faq-q {
    padding: 14px 4px;
  }
  .faq-grid {
    grid-template-columns: 482px 1fr;
    gap: 35px;
  }
  .faq-left p {
    max-width: 80%;
  }
  .faq-a-inner p{
    max-width: 92%;
  }
  .cta-final-feet {
    top: -82%;
    left: 69px;
    width: 31%;
  }

  .footer-grid {
    grid-template-columns: 1.32fr auto 1.35fr;
  }

  .footer-brand p {
    max-width: 94%;
    margin-bottom: 30px;
  }
  .footer-certs {
    align-items: flex-start;
    gap: 15px;
    flex-direction: column;
  }
  .footer-col {
    padding: 40px 50px 0;
  }
  .footer-brand {
    padding-top: 10px;
  }
  .footer-contact {
    padding-bottom: 50px;
    padding-inline-end: 0;
  }
  .footer-address br{
    display: none;
  }
  .footer-socials {
    gap: 10px;
    margin-bottom: 42px;
  }
  .footer-socials a{
    width: 42PX;
    height: 42px;
  }
  .footer-contact-row{
    margin-bottom: 30px;
  }
  .footer-pay-inner, .footer-ship-inner {
    gap: 23px;
  }
  

  /* ————— range-blok 1301-1550 ————— */

  /* ===== Chrome (globaal) ===== */
  .navbar{
    padding-top:10px;
    padding-bottom:10px;
  }
  .navbar-inner{
    width:calc(100% - 140px);
    justify-content: space-between;
  }

  /* ===== Home: hero ===== */
  .banner-section{
    padding-top:176px;
    padding-bottom:60px;
  }

  /* ===== Home: brands ===== */
  .brands{
    padding-top:60px;
  }

  /* ===== Collectiekaarten (globaal) ===== */
  /* basis-foot is 70px hoog (desktop: één rij) — in dit bereik stapelt de
     foot (kolom) en stak de Bekijk-knop uit de kaart */
  .collection-card-foot{
    height:auto;
  }

  /* ===== Brand-intro: sok-doodles ===== */
  .brand-duddle-icons .dubble-left{
    top:-22%;
    left:6%;
    width:140px;
    height:auto;
  }
  .brand-duddle-icons .dubble-right{
    bottom:24%;
    right:8%;
    width:140px;
    height:auto;
  }

  /* ===== Footer ===== */

  /* logo-marquee full-width (universeel besluit Kulwant) */
  .brands{
    overflow:hidden;
  }
  .brands .brands-swiper{
    width:100vw;
    margin-left:calc(50% - 50vw);
  }

  /* promo-float 15% kleiner (schaal = font+breedte+marges+afbeelding ineens) */
  .promo-float{
    transform:scale(.85);
    transform-origin:left bottom;
  }

  /* Collectie-hero (specs Kulwant 2026-08-03) */
  .coll-hero{
    /* height:100vh; */
  }
  .coll-hero-left{
    /* gap:20vh; */
  }
  .coll-hero-gallery{
    /* height:110vh; */
  }
  .coll-hero-left p{
    font-size:var(--body-lg-font-size);
  }
  .coll-hero-btns .cta,
  .coll-hero-btns .cta-transparent{
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .coll-hero-content ul{
    gap:12px 20px;
  }
  .coll-hero-content ul li{
    font-size:calc(var(--body-font-size) + 4px);
  }
  .ch-swiper .swiper-slide{
    height:380px;
  }
  .types-section{
    padding-top:80px;
    padding-bottom:60px;
  }
  .type-card-img{
    height:295px;
  }
  .type-card-content h3{
    font-size:var(--h5-font-size);
  }
  .type-card-btn{
    height:48px;
    font-size:17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .types-grid{
    gap:50px 30px;
  }
  .compare-inner-main{
    background-position:right top;
    padding-top:150px;
  }
  .compare-floating-elements{
    width:253px;
    top: -7%;
  }
  .compare-table{
    width:100%;
  }
  .compare-inner-main h2{
    font-size:calc(var(--h2-font-size) + 8px);
  }
  .bg-yellow-shape{
    background-position:right top;
    top:0px;
    background-size:104%;
  }
  .calculator-bg{
    padding-top:115px;
  }
  .calc-panel h3{
    font-size:var(--h3-font-size);
  }
  .process.process-split{
    padding-top:80px;
  }
  /* spec 2026-08-13 (Collectie-ronde) */
  .process-split-inner{
    gap:80px;    
    grid-template-columns: 46.2% 1fr;
  }
  .process-left h2{
    font-size:calc(var(--h2-font-size) + 8px);
  }
  .process-collage img{
    height:317px;
  }
  .process-btn{
    justify-content:flex-start;
  }
  .process-btn a{
    margin-inline-start:137px;
  }
  .process-left ul li {
    padding: 20px 0 30px;
  }
  .case-inner-page:before{
    content:"";
    background:url(../media/sock-element-up.svg) no-repeat center / contain;
    width:264px;
    height:266px;
    top:-30px;
  }
  .case-inner-page:after{
    content:"";
    background:url(../media/sock-element-up.svg) no-repeat center / contain;
    width:276px;
    height:278px;
    bottom:-16%;
  }
  .case-text h3{
    font-size:var(--h3-font-size);
  }

  /* ═══ Product-detail — sweep 2026-08-04: usecases-rijen waren hard 810px
     (330 + 20 + 460 = 1920-design) en overliepen de 1320-container met
     ~318px → verhoudingsgewijs flexibel binnen de rij (zelfde 330:460-
     verhouding); band-eigen fijnslijpen volgt ═══ */
  .usecase-card-small{
    width:40.7%;
    flex-shrink:0;
  }
  .usecases-cards-inner > .usecase-card:not(.usecase-card-small){
    flex:1;
    min-width:0;
  }
  .usecase-img-lg{
    width:100%;
    height:291px;
    border-radius:15px;
  }
  .cases-pdp.cases:before{
    height:100%;
    background-position:70% top;
  }
  .cases.cases-pdp{
    padding-top:280px;
    padding-bottom:20px;
  }
  .case-duddle-icons .dubble-right{
    display:none;
  }
  .cases.cases-pdp .case-duddle-icons .dubble-left{
    width:229px;
    top:-56%;
  }
  .case-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .testimonial.testimonial-yellow{
    padding-bottom:100px;
  }
  .brand-light .brand-duddle-icons .dubble-left{
    width:140px;
    top:120px;
  }
  .brand-light .brand-duddle-icons .dubble-right{
    width:140px;
    bottom:20%;
  }
  .brand-intro.brand-light{
    padding-top:160px;
    padding-bottom:120px;
  }
  /* PDP-hero (mock Kulwant 2026-08-04, 1:1 gemeten op 1320-container):
     galerij 590+110, thumbs 110/9, infokolom vult rest (~535), staffel-
     pitch 35, CTA's 49/45; fonts volgen de tokens */
  .prod-top{
    gap:60px;
    /* pin: basis-margin ging 2026-08-12 naar 50px (1920) — band houdt 20 */
    margin-top:20px;
  }
  .prod-gallery{
    grid-template-columns:590px 110px;
    gap:10px;
  }
  .prod-main{
    height:590px;
  }
  .prod-thumbs{
    --thumb-gap:9px;
    gap:var(--thumb-gap);
  }
  .prod-thumb{
    height:110px;
    border-radius: 15px;
  }
  .prod-info{
    width:auto;
    flex:1;
    min-width:0;
  }
  .pdp-usps-main{
    margin-top:34px;
    width:590px;
    /* pin: basis centreert 2026-08-12 op de pagina (left-calc) — alleen 1920 */
    left:0;
  }
  /* pin: basis-padding-top ging 2026-08-12 naar 120px (1920) — band houdt 60 */
  .promises{
    padding-top:60px;
  }

  .pdp-usps-main ul{
    margin-top:0;
    justify-content:space-between;
  }
  .prod-rating{
    margin-bottom:25px;
  }
  .prod-info p{
    margin-bottom:20px;
  }
  .prod-info .staffel-row{
    padding:5px 20px;
  }
  .prod-info .staffel-row.staffel-head-row{
    padding:6px 20px;
    height: 32px;
  }
  .prod-price-title {
    margin-bottom: 8px;
  }
  .prod-staffel .staffel-row:not(.staffel-head-row):not(.is-active) {
    padding: 6px 20px;
  }
  .prod-actions .cta{
    height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .prod-actions .cta-light{
    height:45px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .specs-section{
    padding-top:190px;
    /* pin: basis-padding-bottom ging 2026-08-12 naar 50px (1920) — band houdt 70 */
    padding-bottom:70px;
  }
  .weave{
    padding-top:30px;
  }
  .weave-img{
    height:320px;
    border-radius:0px 0 25px 25px;
  }
  .weave-grid{
    gap:40px;
  }
  .weave-body h5{
    font-size:calc(var(--h5-font-size) - 2px);
  }
  .weave-tag{
    font-size:var(--body-sm-font-size);
  }
  .weave-inner:before{
    bottom:-4%;
  }
  .weave-body{
    padding:35px 30px;
  }
  .versus-dubble-left{
    width:231px;
    top:-17%;
  }
  .specs-duddle-icons .dubble-right{
    width:220px;
  }
  .specs-duddle-icons .dubble-left{
    bottom: -29%;
    width: 250px;
    left: 40%;
  }
  .versus{
    padding-top:80px;
  }
  .cards-suggestion{
    padding-top:100px;
  }
  .design-now{
    padding-top:50px;
    padding-bottom:100px;
  }
  .design-bg-union{
    bottom:-1px;
    background-size:110%;
  }
  .design-duddle-sock{
    display:none;
  }
  .conf-preview{
    max-width:1052px;
  }
  .conf-preview-card{
    height:572px;
  }
  .usecase-body h5 {
    font-size: var(--body-font-size);
  }
  .usecases{
    padding-top:80px;
  }
  .usecases-cards-inner{
    gap:10px;
  }
  .usecases-masonry{
    gap:60px;
  }
  .usecase-img-md{
    border-radius:15px;
    height:207px;
  }
  /* container-md was in deze band nooit geschaald (basis 1430 lekte door en
     werd BREDER dan .container — inversie, melding Kulwant 2026-08-04):
     nu gelijk aan de container -> 60px gutters op de bandvloer, consistent
     op alle pagina's */
  .container-md{
    max-width:min(1320px, 100% - 40px);
  }
  /* ═══ Configurator — bandronde 1440-1679 (specs Kulwant 2026-08-05) ═══ */
  /* conf-works-gescoped: .process-split-inner is gedeeld met Collectie (final) */
  .conf-works .process-split-inner{
    gap:100px;
    grid-template-columns:47.2% 1fr;
  }
  .conf-types{
    padding-top:140px;
  }
  .conf-bg{
    background-size:cover;
    height:1240px;
    top:-48%;
    background-position:right top;
  }
  /* cases-solid-gescoped: PDP heeft dezelfde duddle-structuur */
  .cases.cases-solid .case-duddle-icons .dubble-left{
    width:260px;
    top:-16%;
  }
  .case-sock-right{
    width:360px;
    top: 30%;
  }
  .brand-intro-yellow .brand-duddle-icons .dubble-left{
    width:140px;
    top:22%;
  }
  .brand-intro-yellow .brand-duddle-icons .dubble-right{
    width:140px;
    bottom:8%;
  }
  /* ═══ Reviews-en-cases — bandronde 1440-1679 (specs Kulwant 2026-08-06) ═══ */
  .case-card-img{
    height:320px;
  }
  /* ═══ Reviews-en-cases-detail — bandronde 1440-1679 (specs Kulwant 2026-08-06) ═══ */
  .sock-duddle-object{
    width:180px;
    bottom:18%;
  }
  .impact-inner.case-story-inner .impact-gallery{
    width:720px;
  }
  .case-video{
    padding:180px 0 130px;
  }
  .case-bg-union{
    top:-28%;
    height:1277px;
  }
  .case-result-grid img{
    height:490px;
  }
  /* ═══ Offerte — bandronde 1440-1679 (specs Kulwant 2026-08-07);
     quote-* is gedeeld met sample-request (nog geen eigen ronde) ═══ */
  .quote-wrap{
    display:grid;
    grid-template-columns:1fr 382px;
    gap:20px;
    align-items:start;
  }
  .quote-aside{
    padding:30px;
  }
  .quote-card{
    padding:30px 40px 40px;
  }
  .type-picker{
    gap:10px 10px;
  }
  .application-section:after{
    width:292px;
    bottom:-43%;
  }
  .application-bg-shape{
    height:630px;
  }
  /* ═══ Bedankt — bandronde 1440-1679 (specs Kulwant 2026-08-07) ═══ */
  .follow-outer-main{
    height:860px;
  }
  /* ═══ Toepassingen — bandronde 1440-1679 (specs Kulwant 2026-08-10) ═══ */
  .usecase-why{
    padding-bottom:40px;
    padding-top:80px;
  }
  .toepassingen .cases{
    padding-top:230px;
  }
  .toepassingen .cases:after{
    width:220px;
  }
  .toepassingen .calculator-bg:before{
    background-position:center bottom;
  }
  .toepassingen .uc-bg-yellow-shape{
    height:520px;
  }
  .toepassingen .brand-light .brand-duddle-icons .dubble-left{
    width:140px;
  }
  .toepassingen .brand-light .brand-duddle-icons .dubble-right{
    width:140px;
  }
  /* ═══ Veelgestelde vragen — bandronde 1440-1679 (specs Kulwant 2026-08-10) ═══ */
  .faq-cat-group{
    margin-bottom:70px;
  }
  /* ═══ Over ons — bandronde 1440-1679 (specs Kulwant 2026-08-10) ═══ */
  .timeline{
    padding-bottom:0px;
  }
  .overons-story{
    padding:90px 0 0px;
  }
  .overons-story-inner{
    gap:80px;
  }
  .overons-values{
    padding:200px 0 100px;
  }
  .overons-values ul{
    gap:80px;
  }
  .duurz-doodle{
    width:190px;
  }
  .overons-duurz{
    padding-top:90px;
  }
  /* duurz volgt de cases-sectie van home (verzoek Kulwant 2026-08-10) */
  .duurz-inner{
    gap:50px;
  }
  .over-ons .cta-final-feet{
    width:220px;
    top:-250px;
    right:26px;
  }
  /* Hero-gallery: 2 slides volledig + 2 half zichtbaar (spec Kulwant) —
     slidebreedte = 1/3 van de viewport (3W + 3×20px gap = 100vw) en de strip
     een halve slide + gap naar links verschoven; de verbrede swiper-box dekt
     de rechterrand en .gallery (overflow:hidden) knipt de rest af */
  .over-ons .gallery-swiper .swiper-slide{
    width:calc((100vw - 60px) / 3);
  }
  .over-ons .gallery-swiper{
    width:calc(100% + (100vw - 60px) / 3 + 40px);
    margin-left:calc((100vw - 60px) / -6 - 20px);
  }
  /* ═══ Duurzaamheid — bandronde 1440-1679 (specs Kulwant 2026-08-10) ═══ */
  /* gegroepeerd op verzoek: over-ons behoudt z'n right:26 uit het eigen blok */
  .over-ons .cta-final-feet,
  .duurzaamheid .cta-final-feet{
    width:260px;
    top:-330px;
  }
  .dz-certs:before{
    background-size:cover;
    background-position:right 30% top;
    /* pin: basis-bottom ging 2026-08-12 naar -40px (1920) — band houdt 0 */
    bottom:0px;
  }
  .dz-certs-inner{
    gap:50px;
    grid-template-columns:300px 1fr;
  }
  .dz-pane{
    gap:40px;
    grid-template-columns:1fr 460px;
  }
  /* dz-points volgt overons-duurz/cases (verzoek Kulwant 2026-08-10) */
  .dz-points-inner{
    gap:50px;
  }
  /* ═══ Waarom Sokkies — bandronde 1440-1679: ws-intro-grid volgt de usecases-masonry
     van de PDP (verzoek Kulwant 2026-08-10); kleine kaart per rijvariant
     (sm-lg: eerste, lg-sm: laatste), eigen offsets geneutraliseerd ═══ */
  /* ws-gets volgt de VOLLEDIGE process-split-familie (verzoek Kulwant
     2026-08-10): sectie, kop, lijstritme, collagebeelden, offsets */
  .ws-gets{
    padding-top:280px;
  }
  .ws-gets-left h2{
    font-size:calc(var(--h2-font-size) + 8px);
  }
  .ws-gets-imgcol img{
    height:317px;
  }
  .ws-gets-imgcol-offset{
    margin-top:0;
  }
  /* ws-gets-inner volgt process-split-inner (verzoek Kulwant 2026-08-10) */
  .ws-gets-inner{
    grid-template-columns:42.2% 1fr;
    gap:145px;
  }
  .ws-gets:before{
    background-position:right 30% top;
  }
  .ws-intro-grid{
    gap:90px;
  }
  .ws-row{
    display:flex;
    gap:10px;
  }
  .ws-row-sm-lg > .ws-card:first-child,
  .ws-row-lg-sm > .ws-card:last-child{
    width:40.7%;
    flex-shrink:0;
  }
  .ws-row-sm-lg > .ws-card:last-child,
  .ws-row-lg-sm > .ws-card:first-child{
    flex:1;
    min-width:0;
  }
  .ws-row-sm-lg > .ws-card:last-child img,
  .ws-row-lg-sm > .ws-card:first-child img{
    width:100%;
    height:353px;
    border-radius:15px;
    object-fit:cover;
  }
  .ws-row-sm-lg > .ws-card:first-child img,
  .ws-row-lg-sm > .ws-card:last-child img{
    width:100%;
    height:253px;
    border-radius:15px;
    object-fit:cover;
  }
  .ws-card-offset{
    margin-top:0;
  }
  /* ═══ Partners — bandronde 1440-1679 (specs Kulwant 2026-08-10) ═══ */
  /* h5−1 i.p.v. base's h3−12 (per band fixen — afspraak: base blijft; de
     −12 rendert hier anders 14px). Zelfde behandeling volgt per band, ook
     voor pt-dl-card/dl-card-body/dz-keur-card t.z.t. */
  .pt-perks-card h3{
    font-size:calc(var(--h5-font-size) - 1px);
  }
  /* h5+1 i.p.v. base's h2−22 (24px op 1920 ≈ h5+1; de −22 rendert hier 16px) */
  .pt-partners h2{
    font-size:calc(var(--h5-font-size) + 1px);
  }
  .pt-otp-inner{
    grid-template-columns:672px 1fr;
    gap:70px;
    align-items:center;
  }
  .pt-otp-legs{
    width:580px;
    /* pin: basis-top ging 2026-08-12 naar -240px (1920) — band houdt -120 */
    top:-240px;
  }
  .pt-otp-doodle{
    width:260px;
    top:170px;
  }
  /* ═══ Contact — bandronde 1440-1679 (specs Kulwant 2026-08-10);
     de ct-h3's zijn base-breed herijkt (h5−1) ═══ */
  .ct-form-grid{
    gap:20px 26px;
  }
  /* ═══ 404 — bandronde 1440-1679 (spec Kulwant 2026-08-12): er-num −10% per band ═══ */
  .er-num{
    font-size:216px;
  }
  .error-404{
    background:var(--white) url(../media/error-page-bg.png) no-repeat left 20% top;
    background-size:cover;
    height:100vh;
  }
  /* ═══ Werkwijze — 1440-ronde testronde 2 (specs Kulwant 2026-08-13) ═══ */
  .step-card-body{
    gap:50px;
  }
  .steps-section{
    padding-top:90px;
    padding-bottom:90px;
  }
  /* ═══ Reviews-en-cases-detail — 1440-ronde (fix 2026-08-13): de vaste
     276x345-slides werden door de 220px-kolommen van de story-gallery
     rechts afgeknipt — zelfde recept als home's 992-impactfix; gescoped
     zodat home's 1440-impact ongemoeid blijft. 275 = 220 x (345/276). ═══ */
  .case-story-inner .v-swiper .swiper-slide{
    width:100%;
    height:275px;
  }

  .case-others.blog-others{
    padding-bottom: 260px;
  }
  .pick-img {
    height: 140px;
  }
  .testimonial-card {
    height: 250px;
  }
  .pt-partners-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .pt-otp-legs {
    width: 490px;
    top: -150px;
  }
  .process.process-landing:after {
    height: 1111px;
  }
  .landing .cta-final::before {
    width: 672px;
  }
  .quote-card .of-extras .gfield_checkbox {
    grid-template-columns: repeat(4, 1fr);
  }
  
}

/* ===================================================================
   1280-1439 — 1280-opmaak (perfect bevonden op 1280; schaalt omhoog)
   =================================================================== */
@media (min-width:1280px) and (max-width:1439px){
  /* Gravity-tegenhanger van .type-picker / .extra-picker (gemeten op htmlv). */
  .quote-card .of-soktypes .gfield_checkbox{ gap:10px; }
  /* ws-compare-doodle: alleen 1920-ontwerp (zie basis) */
  .ws-compare-doodle-1{
    display:none;
  }
  /* pin: basis (ws-gets-left ol p) ging 2026-08-12 naar h5-token (1920) —
     band houdt body-lg */
  .ws-gets-left ol p{
    font-size:var(--body-lg-font-size);
  }
  /* pin: basis (ws-compare) kreeg 2026-08-12 padding-top 40 / margin-top -40
     (1920) — band houdt 0/0 */
  .ws-compare{
    padding-top:0px;
    margin-top:0px;
  }
  /* pin: basis-bottom (ws-intro golf) ging 2026-08-12 naar 40px (1920) —
     band houdt 0 */
  .ws-intro::before{
    bottom:0px;
  }
  /* pin: basis-h2 (overons-story) ging 2026-08-12 naar h2-token (1920) —
     band houdt h3-token */
  .overons-story-text h2{
    font-size:var(--h3-font-size);
  }
  /* pin: basis zette de open-vraaglijn 2026-08-12 op none (1920) —
     band houdt de goedgekeurde lijn */
  .faq-page .faq-item.is-open .faq-q{
    border-bottom:1px solid var(--border-light);
  }
  /* pin: basis-gap (case-grid) ging 2026-08-12 naar 35px 20px (1920) —
     band houdt 20 */
  .case-grid{
    gap:20px;
  }
  /* configurator-doodles + sokkenpatroon: alleen 1920-ontwerp (zie basis,
     zelfde patroon als PDP's design-duddle-sock) */
  .configurator-section .conf-duddle-r,
  .configurator-section .conf-duddle-l,
  .configurator-section:after,
  .conf-works:before,
  .conf-types:before{
    display:none;
  }
  /* pin: basis-h2 ging 2026-08-12 naar h2-token + margin -30 (1920) —
     band houdt de goedgekeurde h3-token + 40 */
  .conf-works > .container > h2{
    font-size:var(--h3-font-size);
    margin-bottom:30px;
  }
   .translatepress-en_GB .conf-works > .container > h2, .translatepress-de_DE .conf-works > .container > h2, .translatepress-fr_FR .conf-works > .container > h2{
    margin-bottom:20px;
  }
  /* ── DEFINITIEVE TYPOGRAFIE-INVENTARIS (PDF Kulwant 2026-08-03) — DE bron
     voor alle content-typografie in deze band; maten hier wijzigen, nooit
     als harde px in sectieregels ── */
  :root{
    --h1-font-size:52px;
    --h1-line-height:48px;
    --h2-font-size:38px;
    --h3-font-size:26px;
    --h4-font-size:23px;
    --h5-font-size:19px;
    --h6-font-size:17px;
    --body-font-size:15px;
    --body-lg-font-size:17px;
    --body-sm-font-size:12px;
  }




  /* ————— uit oud ≤1680 ————— */

  /* 1680-test 2026-07-28: betaal/verzend-strip paste nét niet meer op één
     regel (852+1+533 content + 2×30 gap = 1446 > 1440) en wikkelde lelijk */
  .footer-pay{
    gap:20px 20px;
  }
  /* telefoonnummer in de footer brak midden in het nummer af */
  footer a[href^="tel:"]{
    white-space:nowrap;
  }

  /* ————— uit oud ≤1550 ————— */

  /* 1280-test 2026-07-28: onder de 1320-container past de betaal/verzend-strip
     nooit op één regel — netjes gecentreerd laten wrappen, zwevende divider weg */
  .footer-pay{
    justify-content:center;
    row-gap:16px;
  }

  header .container{
    max-width: 95.9%;
  }
  .menu {
    gap: 25px;
  }
  .logo{
    display: flex;
    width: 86px;
  }
  .mega {
    padding: 30px;
  }
  .prod-card .prod-img-card {
    height: 150px;
    border-radius: 10px;
  }
  .types {
    gap: 10px 30px;
  }
  .type-item .type-img {
    width: 58px;
    height: 58px;
    border-radius: 5px;
  }
  .gallery-swiper .swiper-slide {
    width: 314px;
    height: 440px;
  }
  .impact {
    padding: 8px 0 125px;
  }
  .impact-inner {
      height: 465px;
      gap: 56px;
  }
  .impact-gallery {
      width: 800px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul {
    gap: 19px;
  }
  .impact-left {
      padding-inline-start: 0;
  }
  .stat-num {
    font-size: 58px;
  }
  .feat-label{
    font-size:18px;
  }
  .collection:before {
    top: -51%;
    background: url(../media/yellow-shape-1440.svg);
    background-size: cover;
  }

  .collection-img {
    height: 295px;
  }
  .collection-name {
    font-size: 17px;
  }
  .collection-card-foot {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 22px;
    gap: 20px;
  }
  .collection-grid {
    gap: 20px;
  }
  .collection-cta{
    margin-top: 30px;
  }
  .collection:after {
    bottom: -16%;
  }
  .v-swiper .swiper-slide {
    width: 100%;
    height: 345px;
    border-radius: 15px; 
  }
  .process {
    padding: 155px 0 120px;
  }
  .process:not(.conf-works) > .container > h2{
    padding-top: 0;
    margin-bottom: 30px;
  }
  .process-steps {
    gap: 67px;
  }
  .calc-grid {
    grid-template-columns: 1fr 440px;
  }
  .calc-panel {
    padding: 40px;
  }
  .calc-mid{
    grid-template-columns: 400px 1fr;
    gap: 35px;
  }
  .calc-hint{
    height: 112px;
  }
  .staffel-row {
    padding: 8px 20px;
  }
  .calc-panel h3 {
    margin-bottom: 20px;
  }
  .calc-result {
    padding-top: 5px;
  }
  .calc-row{
    margin-bottom: 20px;
  }
  .calc-total-row{
    margin-bottom: 8px;
  }
  .calc-field {
    margin-bottom: 20px;
  }
  .staffel-head-row {
    padding: 8px 20px;
    height: 36px;
  }
  .gift {
    padding: 100px 0 70px;
  }
  .gift-img {
    height: 295px;
    border-radius: 10px;
  }
  .cases {
    padding: 120px 0 50px;
  }
  .case-inner {
    gap: 50px;
  }
  .case-img.case-img-main {
    height: 382px;
    width: 382px;
  }
  .case-img {
    border-radius: 15px;
    width: 248px;
    height: 180px;
  }
   .cases:before{
    background:url(../media/blue-shape-lg.png);
    background-size: cover;
    height: 75%;
    background-repeat: no-repeat;
  }
  .cases-feet {
    top: -13%;
    right: 0%;
    width: 224px;
    height: 304px;
  }
  .designed {
    margin-top: 102px;
  }
  .designed-swiper .swiper-slide {
    width: 295px;
    height: 295px;
    border-radius: 15px;
  }
  .designed-swiper {
    width: 105vw;
  }
  .brand-intro-inner {
    max-width: 60%;
  }
  .brand-intro {
    padding: 70px 0 100px;
  }
  .brand-intro-inner h2 {
    margin-bottom: 10px;
  }
  .brand-duddle-icons .dubble-left {
    top: -19%;
    left: 4%;
    width: 81px;
    height: auto;
  }
  .brand-duddle-icons .dubble-right {
    bottom: 4%;
    right: 4%;
    width: 81px;
    height: auto;
  }

  .faq-q {
    padding: 14px 4px;
  }
  .faq-grid {
    grid-template-columns: 382px 1fr;
    gap: 135px;
  }
  .faq-left p {
    max-width: 100%;
  }
  .faq-a-inner p{
    max-width: 92%;
  }
  .cta-final-feet {
    top: -79%;
    left: 69px;
    width: 31%;
  }

  .footer-grid {
    grid-template-columns: 1.32fr auto 1.35fr;
  }

  .footer-brand p {
    max-width: 94%;
    margin-bottom: 30px;
  }
  .footer-certs {
    align-items: flex-start;
    gap: 15px;
    flex-direction: column;
  }
  .footer-col {
    padding: 40px 50px 0;
  }
  .footer-brand {
    padding-top: 10px;
  }
  .footer-contact {
    padding-bottom: 50px;
    padding-inline-end: 0;
  }
  .footer-address br{
    display: none;
  }
  .footer-socials {
    gap: 10px;
    margin-bottom: 42px;
  }
  .footer-socials a{
    width: 42PX;
    height: 42px;
  }
  .footer-contact-row{
    margin-bottom: 30px;
  }
  .footer-pay-inner, .footer-ship-inner {
    gap: 23px;
  }
  

  /* ————— uit oud ≤1300 ————— */

  .container{
    max-width: min(1190px, 100% - 40px);
  }

  /* 1280-test 2026-07-28: adresblok naast de contactlijst werd een smalle
     kolom van 6 regels — vanaf hier onder de lijst stapelen */
  .footer-contact-row{
    flex-direction:column;
    gap:18px;
  }
  header .container{
    max-width: 95.9%;
  }
  .menu {
    gap: 17px;
  }
  .translatepress-fr_FR .menu {
    gap: 20px;
  }
  .translatepress-de_DE .menu {
    gap: 12px;
  }
  .navbar-inner {
    gap: 25px;
  }
/* ————— overgenomen uit de 1440-ronde (verzoek Kulwant) ————— */

  /* ===== Chrome (globaal) ===== */
  .navbar{
    padding-top:10px;
    padding-bottom:10px;
  }
  .navbar-inner{
    width:calc(100% - 140px);
    justify-content: space-between;
  }
  

  .lang-trigger {
    width: 65px;
    height: 65px;
  }
   


  /* ===== Home: hero ===== */
  .banner-section{
    padding-top:141px; /* -20% ritme */
    padding-bottom:48px;
  }

  /* ===== Home: brands ===== */
  .brands{
    padding-top:48px; /* -20% ritme */
    padding-bottom:40px;
    overflow:hidden; /* knipt de 100vw-slider op de scrollbar-rand af */
  }
  /* logo-marquee full-width (verzoek Kulwant): uit de container breken */
  .brands .brands-swiper{
    width:100vw;
    margin-left:calc(50% - 50vw);
  }

  /* ===== Collectiekaarten (globaal) ===== */
  /* basis-foot is 70px hoog (desktop: één rij) — in dit bereik stapelt de
     foot (kolom) en stak de Bekijk-knop uit de kaart */
  .collection-card-foot{
    height:auto;
  }

  /* ===== Brand-intro: sok-doodles ===== */
  .brand-duddle-icons .dubble-left{
    top:-22%;
    left:6%;
    width:140px;
    height:auto;
  }
  .brand-duddle-icons .dubble-right{
    bottom:24%;
    right:8%;
    width:140px;
    height:auto;
  }

  /* ===== Footer ===== */
  /* handmatige 1440-tweak Kulwant: strip verdelen i.p.v. centreren */
  .footer-pay{
    justify-content:space-between;
    flex-wrap: nowrap;
  }
  /* menu compacter in deze band */
  .menu .menu-link a{
    font-size:14px;
  }
  /* header-iconen kleiner (48 → 42, iconen naar verhouding mee) */
  .icon-btn{
    width:42px;
    height:42px;
  }
  .icon-btn svg{
    width:18px;
    height:18px;
  }
  /* verticaal ritme -20% (secties, gemeten op 1350 en herrekend) */
  .gallery .gallery-swiper{ padding-top:80px; padding-bottom:24px;
    /* pin: basis kreeg 2026-08-12 de 4.3-compositieformule (width +
       margin-left) — deze band houdt de goedgekeurde standaardbox */
    width:auto; margin-left:0; }
  /* hero-slider: slides -20% en de stagger mee geschaald — de -100px-lift
     stak boven de (verkleinde) padding uit en werd door de sectie afgeknipt */
  .gallery-swiper .swiper-slide{
    width:250px;
    height:350px;
  }
  .gallery-swiper .swiper-slide:nth-child(3n + 1){
    transform:translateY(-40px);
  }
  .gallery-swiper .swiper-slide:nth-child(3n){
    transform:translateY(-80px);
  }
  .impact{ margin-top:34px; padding-top:6px; padding-bottom:100px; }
  .collection{ padding-bottom:24px; }
  .process{ padding-top:124px; padding-bottom:96px; }
  .calculator{ padding-top:96px; padding-bottom:54px; }
  .gift{ padding-top:120px; padding-bottom:56px; }
  .designed{ margin-top:82px; }
  .brand-intro{ padding-top:56px; padding-bottom:80px; }
  .faq{ padding-top:94px; padding-bottom:72px; }
  .cta-final-panel{ padding-top:120px; padding-bottom:72px; }
  .footer-grid{ padding-top:40px; }
  .footer-col{ padding-top:32px; }
  .footer-brand{ padding-top:8px; }

  /* koppen 20% kleiner in deze band (t.o.v. 1440-tokens 58/38/26/28) */

  /* promo-float 25% kleiner (schaal = font+breedte+marges+afbeelding ineens) */
  .promo-float{
    transform:scale(.75);
    transform-origin:left bottom;
  }

  /* ═══ Collectie — GEKOPIEERD UIT DE 1440-1679-BAND (verzoek Kulwant
     2026-08-03); band-eigen fijnslijpen volgt ═══ */
  /* Collectie-hero (specs Kulwant 2026-08-03) */
  
  .coll-hero-left p{
    font-size:var(--body-lg-font-size);
  }
  .coll-hero-content ul{
    gap:12px 20px;
  }
  .coll-hero-content ul li{
    font-size:var(--body-lg-font-size);
  }
  .ch-swiper .swiper-slide{
    height:320px;
  }
  .types-section{
    padding-top:80px;
    padding-bottom:60px;
  }
  .type-card-img{
    height:268px;
  }
  .type-card-content h3{
    font-size:var(--h5-font-size);
  }
  .type-card-btn{
    height:44px;
    font-size:17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .types-grid{
    gap:40px 25px;
  }
  .compare-inner-main{
    background-position:right top;
    padding-top:150px;
  }
  .compare-floating-elements{
    width:220px;
    top: -7%;
  }
  .compare-table{
    width:100%;
  }
  .compare-inner-main h2{
    font-size:var(--h2-font-size);
  }
  .bg-yellow-shape{
    background-position:right top;
    top:0px;
    background-size:119%;
  }
  .calculator-bg{
    padding-top:115px;
  }
  .calc-panel h3{
    font-size:var(--h3-font-size);
  }
  .process.process-split{
    padding-top:60px;
  }
  /* spec 2026-08-13 (Collectie-ronde) */
  .process-split-inner{
    gap:80px;
  }
  .process-left h2{
    font-size:var(--h2-font-size);
  }
  .process-collage img{
    height:280px;
  }
  .process-left ul li{
    padding:20px 0 25px;
  }
  .process-btn{
    justify-content:flex-start;
  }
  .process-btn a{
    margin-inline-start:137px;
  }
  .case-inner-page:before{
    content:"";
    background:url(../media/sock-element-up.svg) no-repeat center / contain;
    width:264px;
    height:266px;
    top:-40px;
  }
  .case-inner-page:after{
    content:"";
    background:url(../media/sock-element-up.svg) no-repeat center / contain;
    width:276px;
    height:278px;
    bottom:-16%;
  }
  .case-text h3{
    font-size:var(--h3-font-size);
  }
  /* container-md was in deze band nooit geschaald (basis 1430 lekte door en
     werd BREDER dan .container — inversie, melding Kulwant 2026-08-04):
     nu gelijk aan de container -> 60px gutters op de bandvloer, consistent
     op alle pagina's */
  .container-md{
    max-width:min(1320px, 100% - 40px);
  }

  /* ═══ Product-detail — GEKOPIEERD UIT DE 1440-1679-BAND (verzoek Kulwant
     2026-08-04); band-eigen fijnslijpen volgt ═══ */
  .usecase-card-small{
    width:40.7%;
    flex-shrink:0;
  }
  .usecases-cards-inner > .usecase-card:not(.usecase-card-small){
    flex:1;
    min-width:0;
  }
  .usecase-img-lg{
    width:100%;
    height:290px;
    border-radius:15px;
  }
  .cases-pdp.cases:before{
    height:100%;
    background-position:70% top;
  }
  .cases.cases-pdp{
    padding-top:220px;
    padding-bottom:20px;
  }
  .case-duddle-icons .dubble-right{
    display:none;
  }
  .cases.cases-pdp .case-duddle-icons .dubble-left{
    width:229px;
    top:-56%;
  }
  .case-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .testimonial.testimonial-yellow{
    padding-bottom:100px;
  }
  .brand-light .brand-duddle-icons .dubble-left{
    width:140px;
    top:120px;
  }
  .brand-light .brand-duddle-icons .dubble-right{
    width:140px;
    bottom:20%;
  }
  .brand-intro.brand-light{
    padding-top:150px;
    padding-bottom:100px;
  }
  .versus-table{
    max-width:82%;
  }
  /* PDP-hero (mock Kulwant 2026-08-04, 1:1 gemeten op 1320-container):
     galerij 590+110, thumbs 110/9, infokolom vult rest (~535), staffel-
     pitch 35, CTA's 49/45; fonts volgen de tokens */
  .prod-top{
    gap:40px;
    /* pin: basis-margin ging 2026-08-12 naar 50px (1920) — band houdt 20 */
    margin-top:20px;
  }
  .prod-gallery{
    grid-template-columns:590px 110px;
    gap:10px;
  }
  .prod-main{
    height:590px;
  }
  .prod-thumbs{
    --thumb-gap:9px;
    gap:var(--thumb-gap);
  }
  .prod-thumb{
    height:110px;
  }
  .prod-info{
    width:auto;
    flex:1;
    min-width:0;
  }
  .pdp-usps-main{
    margin-top:75px;
    width:590px;
    /* pin: basis centreert 2026-08-12 op de pagina (left-calc) — alleen 1920 */
    left:0;
  }
  /* pin: basis-padding-top ging 2026-08-12 naar 120px (1920) — band houdt 60 */
  .promises{
    padding-top:60px;
  }

  .pdp-usps-main ul{
    margin-top:0;
    justify-content:space-between;
  }
  .prod-rating{
    margin-bottom:25px;
  }
  .prod-info p{
    margin-bottom:20px;
  }
  .prod-info .staffel-row{
    padding:5px 20px;
  }
  .prod-info .staffel-row.staffel-head-row{
    padding:6px 20px;
  }
  .prod-actions .cta{
    height:49px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .prod-actions .cta-light{
    height:45px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .specs-section{
    padding-top:190px;
    /* pin: basis-padding-bottom ging 2026-08-12 naar 50px (1920) — band houdt 70 */
    padding-bottom:70px;
  }
  .weave{
    padding-top:30px;
  }
  .weave-img{
    height:280px;
    border-radius:0px 0 25px 25px;
  }
  .weave-grid{
    gap:40px;
  }
  .weave-body h5{
    font-size:calc(var(--h5-font-size) - 2px);
  }
  .weave-tag{
    font-size:var(--body-sm-font-size);
  }
  .weave-inner:before{
    bottom:-4%;
  }
  .weave-body{
    padding:35px 30px;
  }
  .versus-dubble-left{
    width:231px;
    top:-17%;
  }
  .specs-duddle-icons .dubble-right{
    width:220px;
  }
  .specs-duddle-icons .dubble-left{
    width:170px;
    bottom:-150px;
  }
  .versus{
    padding-top:80px;
  }
  .cards-suggestion{
    padding-top:100px;
  }
  .design-now{
    padding-top:50px;
    padding-bottom:100px;
  }
  .design-bg-union{
    bottom:-1px;
    background-size:122%;
  }
  .design-duddle-sock{
    display:none;
  }
  .conf-preview{
    max-width:1052px;
  }
  .conf-preview-card{
    height:572px;
  }
  .usecases{
    padding-top:80px;
  }
  .usecases-cards-inner{
    gap:10px;
  }
  .usecases-masonry{
    gap:60px;
  }
  .usecase-img-md{
    border-radius:15px;
    height:210px;
  }
  /* ═══ Configurator — GEKOPIEERD UIT DE 1440-1679-BAND (verzoek Kulwant
     2026-08-05); band-eigen fijnslijpen volgt ═══ */
  .conf-works .process-split-inner{
    gap:80px;
    grid-template-columns:50.2% 1fr;
  }
  .conf-types{
    padding-top:120px;
    padding-bottom:60px;
  }
  .conf-bg{
    background-size:cover;
    height:1200px;
    top:-48%;
    background-position:right top;
  }
  /* cases-solid-gescoped: PDP heeft dezelfde duddle-structuur */
  .cases.cases-solid .case-duddle-icons .dubble-left{
    width:210px;
    top:-12%;
  }
  .case-sock-right{
    width:210px;
  }
  .cases.conf-designed{
    padding-top:120px;
    padding-bottom:60px;
  }
  /* testimonial-light-gescoped: .testimonial is gedeeld (Collectie final, PDP-yellow) */
  .testimonial.testimonial-light{
    padding-top:50px;
    padding-bottom:90px;
  }
  .brand-intro-yellow .brand-duddle-icons .dubble-left{
    width:140px;
    top:22%;
  }
  .brand-intro-yellow .brand-duddle-icons .dubble-right{
    width:140px;
    bottom:8%;
  }
  /* ═══ Reviews-en-cases — GEKOPIEERD UIT DE 1440-1679-BAND (verzoek Kulwant
     2026-08-06); band-eigen fijnslijpen volgt ═══ */
  .case-card-img{
    height:290px;
  }
  .case-grid-section{
    padding:70px 0px 50px;
  }
  /* ═══ Reviews-en-cases-detail — GEKOPIEERD UIT DE 1440-1679-BAND (verzoek
     Kulwant 2026-08-06); band-eigen fijnslijpen volgt ═══ */
  .sock-duddle-object{
    width:180px;
    bottom:18%;
  }
  .impact-inner.case-story-inner .impact-gallery{
    width:720px;
  }
  .case-video{
    padding:180px 0 130px;
  }
  .case-bg-union{
    top:-40%;
    height:1202px;
  }
  .case-result{
    padding-top:40px;
    padding-bottom:40px;
  }
  .case-others{
    padding:90px 0px;
  }
  .case-video-inner{
    height:480px;
  }
  .case-result-grid img{
    height:490px;
  }
  /* ═══ Offerte — GEKOPIEERD UIT DE 1440-1679-BAND (verzoek Kulwant
     2026-08-07); band-eigen fijnslijpen volgt ═══ */
  .quote-wrap{
    display:grid;
    grid-template-columns:1fr 382px;
    gap:20px;
    align-items:start;
  }
  .quote-aside{
    padding:30px;
  }
  .quote-card{
    padding:30px 40px 40px;
  }
  .type-picker{
    gap:10px 10px;
  }
  .application-section:after{
    width:192px;
    bottom:-27%;
  }
  .application-bg-shape{
    height:560px;
    background-position:bottom left;
  }
  /* ═══ Bedankt — GEKOPIEERD UIT DE 1440-1679-BAND (verzoek Kulwant
     2026-08-07); band-eigen fijnslijpen volgt ═══ */
  .follow-outer-main{
    height:860px;
  }
  .thanks-status{
    padding:80px 0 0px;
  }
  .thanks-steps{
    margin-bottom:80px;
  }
  .follow-inner{
    flex-wrap:nowrap;
    gap:40px;
  }
  .newsletter-card{
    padding:35px;
  }
  /* ═══ Toepassingen — GEKOPIEERD UIT DE 1440-1679-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .usecase-why{
    padding-bottom:40px;
    padding-top:80px;
  }
  .toepassingen .cases{
    padding-top:230px;
  }
  .toepassingen .cases:after{
    width:220px;
  }
  .toepassingen .calculator-bg:before{
    background-position:center bottom;
  }
  .toepassingen .uc-bg-yellow-shape{
    height:520px;
  }
  .toepassingen .brand-light .brand-duddle-icons .dubble-left{
    width:140px;
  }
  .toepassingen .brand-light .brand-duddle-icons .dubble-right{
    width:140px;
  }
  /* ═══ Veelgestelde vragen — GEKOPIEERD UIT DE 1440-1679-BAND (verzoek
     Kulwant 2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .faq-cat-group{
    margin-bottom:60px;
  }
  .faq-cats-filter{
    gap:5px;
  }
  /* page-scoped: .chip is gedeeld met reviews-en-cases (daar base-padding) */
  .faq-page .chip{
    padding:10px 18px;
  }
  /* ═══ Over ons — GEKOPIEERD UIT DE 1440-1679-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .timeline{
    padding-bottom:0px;
  }
  /* Hero-gallery: 2 slides volledig + 2 half zichtbaar — zie 1440-band */
  .over-ons .gallery-swiper .swiper-slide{
    width:calc((100vw - 60px) / 3);
  }
  .over-ons .gallery-swiper{
    width:calc(100% + (100vw - 60px) / 3 + 40px);
    margin-left:calc((100vw - 60px) / -6 - 20px);
  }
  .overons-story{
    padding:80px 0 0px;
  }
  .overons-story-inner{
    gap:60px;
  }
  .story-collage{
    gap:10px;
  }
  .story-collage-right{
    gap:10px;
  }
  .overons-values{
    padding:200px 0 100px;
  }
  .overons-values ul{
    gap:50px;
  }
  .duurz-doodle{
    width:160px;
    top:-10px;
  }
  .over-ons .cta-final-feet{
    width:220px;
    top:-250px;
    right:26px;
  }
  .overons-duurz{
    padding-top:50px;
  }
  /* duurz volgt de cases-sectie van home (verzoek Kulwant 2026-08-10) */
  .duurz-inner{
    gap:50px;
  }
  .duurz-collage{
    gap:20px;
  }
  .duurz-collage-col{
    gap:20px;
  }
  /* ═══ Duurzaamheid — GEKOPIEERD UIT DE 1440-1679-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .duurzaamheid .cta-final-feet{
    width:210px;
    top:-270px;
  }
  .dz-certs:before{
    background-size:cover;
    background-position:right 30% top;
    /* pin: basis-bottom ging 2026-08-12 naar -40px (1920) — band houdt 0 */
    bottom:0px;
  }
  .dz-certs-inner{
    gap:40px;
    grid-template-columns:260px 1fr;
  }
  .dz-pane{
    gap:40px;
    grid-template-columns:1fr 390px;
  }
  /* dz-points volgt overons-duurz/cases (verzoek Kulwant 2026-08-10) */
  .dz-points-inner{
    gap:50px;
    grid-template-columns:620px 1fr;
  }
  /* ═══ Waarom Sokkies — GEKOPIEERD UIT DE 1440-1679-BAND (verzoek Kulwant 2026-08-10): ws-intro-grid volgt de usecases-masonry
     van de PDP (verzoek Kulwant 2026-08-10); kleine kaart per rijvariant
     (sm-lg: eerste, lg-sm: laatste), eigen offsets geneutraliseerd ═══ */
  .ws-gets:before{
    background-position:right 30% top;
  }
  /* ws-gets volgt de VOLLEDIGE process-split-familie (verzoek Kulwant
     2026-08-10): sectie, kop, lijstritme, collagebeelden, offsets */
  .ws-gets{
    padding-top:280px;
  }
  .ws-gets-left h2{
    font-size:var(--h2-font-size);
  }
  .ws-gets-left ol li{
    padding:20px 0 25px;
  }
  .ws-gets-imgcol img{
    height:280px;
  }
  .ws-gets-imgcol-offset{
    margin-top:0;
  }
  /* ws-gets-inner volgt process-split-inner (verzoek Kulwant 2026-08-10) */
  .ws-gets-inner{
    grid-template-columns:42.2% 1fr;
    gap:80px;
  }
  .ws-intro-grid{
    gap:60px;
  }
  .ws-row{
    display:flex;
    gap:10px;
  }
  .ws-row-sm-lg > .ws-card:first-child,
  .ws-row-lg-sm > .ws-card:last-child{
    width:40.7%;
    flex-shrink:0;
  }
  .ws-row-sm-lg > .ws-card:last-child,
  .ws-row-lg-sm > .ws-card:first-child{
    flex:1;
    min-width:0;
  }
  .ws-row-sm-lg > .ws-card:last-child img,
  .ws-row-lg-sm > .ws-card:first-child img{
    width:100%;
    height:290px;
    border-radius:15px;
    object-fit:cover;
  }
  .ws-row-sm-lg > .ws-card:first-child img,
  .ws-row-lg-sm > .ws-card:last-child img{
    width:100%;
    height:210px;
    border-radius:15px;
    object-fit:cover;
  }
  .ws-card-offset{
    margin-top:0;
  }
  /* ═══ Partners — GEKOPIEERD UIT DE 1440-1679-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  /* h5-herijkingen per band (afspraak — base's −12/−22 blijven staan) */
  .pt-perks-card h3{
    font-size:calc(var(--h5-font-size) - 1px);
  }
  .pt-partners h2{
    font-size:calc(var(--h5-font-size) + 1px);
  }
  .pt-otp{
    padding-top:280px;
  }
  .pt-otp:before{
    height:310px;
    background-position:right top;
    background-size:cover;
    /* pin: basis-top ging 2026-08-12 naar -130px (1920) — band houdt 0 */
    top:-120px;
  }
  .pt-otp-inner{
    grid-template-columns:672px 1fr;
    gap:70px;
    align-items:center;
  }
  .pt-otp-legs{
    width:510px;
    /* pin: basis-top ging 2026-08-12 naar -240px (1920) — band houdt -120 */
    top:-240px;
  }
  .pt-otp-doodle{
    width:260px;
    top:60px;
  }
  /* ═══ Downloads — bandronde 1280-1439 (specs Kulwant 2026-08-10);
     1440-band had alleen de base-brede h3-herijking nodig ═══ */
  .dl-cards-grid{
    gap:25px 25px;
  }
  /* ═══ Contact — GEKOPIEERD UIT DE 1440-1679-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .ct-form-grid{
    gap:20px 26px;
  }
  .ct-form-card{
    border-radius:20px;
    padding:40px 35px 35px;
  }
  .ct-contact-inner{
    gap:30px;
    grid-template-columns:1fr 450px;
  }
  /* ═══ Juridisch — bandronde 1280-1439 (specs Kulwant 2026-08-10);
     1440 had alleen de base-brede jr-h3-herijking nodig ═══ */
  .jr-index{
    padding:25px;
  }
  .jr-inner{
    grid-template-columns:360px 1fr;
  }
  /* print-knop sticky BINNEN de sectie: in de body-cel geplaatst
     (overlap) zodat hij meeloopt zolang de tekst in beeld is */
  .jr-index{
    grid-column:1;
    grid-row:1;
    /* pin: basis werd 2026-08-12 sticky (1920) — band houdt static */
    position:static;
  }
  .jr-body{
    grid-column:2;
    grid-row:1;
  }
  .jr-print{
    position:sticky;
    top:130px;
    grid-column:2;
    grid-row:1;
    justify-self:end;
    align-self:start;
    z-index:5;
  }
  /* ═══ 404 — SEED 1280-1439 (spec Kulwant 2026-08-12): er-num −10% per band ═══ */
  .er-num{
    font-size:194px;
  }
  .error-404{
    background:var(--white) url(../media/error-page-bg.png) no-repeat left 20% top;
    background-size:cover;
    height:100vh;
  }
  /* ═══ Home — 1280-ronde testronde 2 (specs Kulwant 2026-08-12) ═══ */
  .impact .impact-left p{
    padding-top:140px;
  }
  .designed-head h3{
    margin-bottom:14px;
  }
  /* ═══ Werkwijze — 1280-ronde testronde 2 (specs Kulwant 2026-08-13) ═══ */
  .step-card-body{
    gap:50px;
  }
  .steps-section{
    padding:90px 0px;
  }
  /* ═══ Over-ons — 1280-ronde testronde 2 (spec Kulwant 2026-08-13) ═══ */
  .over-ons .impact:before{
    background:url(../media/stats-top-bg.png) top left 20% no-repeat;
    top:-20px;
  }

  .case-grid-section.blog-grid-section {
    padding-bottom: 152px;
  }
  .pick-img {
    height: 120px;
  }
  .testimonial-card {
    height: 250px;
    padding: 35px;
  }
  .pt-partners-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .pt-otp-legs {
    width: 410px;
    top: -150px;
  }
  .lp-usps-duddle-l {
    left: 24px;
    top: -26%;
    width: 24%;
  }
  .lp-usps-duddle-r {
    right: 24px;
    top: -32%;
    width: 21%;
  }
  .lp-usps-grid {
    width: 88%;
  }
  .process.process-landing:after {
    height: 1080px;
  }
  .landing .cta-final::before {
    width: 562px;
  }
}


@media (min-width:1280px) and (max-width:1300px){
   .translatepress-de_DE .navbar-inner, .translatepress-fr_FR .navbar-inner {
    width: calc(100% - 112px);
  }
  .translatepress-fr_FR .navbar-inner {
    gap: 20px;
  }
  .actions .cta{
    font-size:87.5% ;
  }
  .translatepress-fr_FR .menu {
    gap: 7px;
  }
  .translatepress-de_DE .menu {
    gap: 12px;
  }

}
/* ===================================================================
   992-1279 — zelfde 1280-opmaak (gevloerd op 992, besluit Kulwant)
   =================================================================== */
@media (min-width:992px) and (max-width:1279px){
  /* Gravity-tegenhanger van .type-picker / .extra-picker (gemeten op htmlv). */
  .quote-card .of-soktypes .gfield_checkbox{ gap:20px 10px; }
  /* mega-hoverbrug is desktop-only (drawer/sheet heeft geen hover-gat) */
  .mega::before{
    display:none;
  }

  /* ws-compare-doodle: alleen 1920-ontwerp (zie basis) */
  .ws-compare-doodle-1{
    display:none;
  }
  /* pin: basis (ws-gets-left ol p) ging 2026-08-12 naar h5-token (1920) —
     band houdt body-lg */
  .ws-gets-left ol p{
    font-size:var(--body-lg-font-size);
  }
  /* pin: basis (ws-compare) kreeg 2026-08-12 padding-top 40 / margin-top -40
     (1920) — band houdt 0/0 */
  .ws-compare{
    padding-top:0px;
    margin-top:0px;
  }
  /* pin: basis-bottom (ws-intro golf) ging 2026-08-12 naar 40px (1920) —
     band houdt 0 */
  .ws-intro::before{
    bottom:0px;
  }
  /* pin: basis-h2 (overons-story) ging 2026-08-12 naar h2-token (1920) —
     band houdt h3-token */
  .overons-story-text h2{
    font-size:var(--h3-font-size);
  }
  /* pin: basis zette de open-vraaglijn 2026-08-12 op none (1920) —
     band houdt de goedgekeurde lijn */
  .faq-page .faq-item.is-open .faq-q{
    border-bottom:1px solid var(--border-light);
  }
  /* pin: basis-gap (case-grid) ging 2026-08-12 naar 35px 20px (1920) —
     band houdt 20 */
  .case-grid{
    gap:20px;
  }
  /* configurator-doodles + sokkenpatroon: alleen 1920-ontwerp (zie basis,
     zelfde patroon als PDP's design-duddle-sock) */
  .configurator-section .conf-duddle-r,
  .configurator-section .conf-duddle-l,
  .configurator-section:after,
  .conf-works:before,
  .conf-types:before{
    display:none;
  }
  /* pin: basis-h2 ging 2026-08-12 naar h2-token + margin -30 (1920) —
     band houdt de goedgekeurde h3-token + 40 */
  .conf-works > .container > h2{
    font-size:var(--h3-font-size);
    margin-bottom:30px;
  }
   .translatepress-en_GB .conf-works > .container > h2, .translatepress-de_DE .conf-works > .container > h2, .translatepress-fr_FR .conf-works > .container > h2{
    margin-bottom:20px;
  }
  /* ── DEFINITIEVE TYPOGRAFIE-INVENTARIS (PDF Kulwant 2026-08-03) — DE bron
     voor alle content-typografie in deze band; maten hier wijzigen, nooit
     als harde px in sectieregels ── */
  :root{
    --h1-font-size:52px;
    --h1-line-height:48px;
    --h2-font-size:38px;
    --h3-font-size:26px;
    --h4-font-size:23px;
    --h5-font-size:19px;
    --h6-font-size:17px;
    --body-font-size:15px;
    --body-lg-font-size:17px;
    --body-sm-font-size:12px;
  }




  /* ————— uit oud ≤1680 ————— */

  /* 1680-test 2026-07-28: betaal/verzend-strip paste nét niet meer op één
     regel (852+1+533 content + 2×30 gap = 1446 > 1440) en wikkelde lelijk */
  .footer-pay{
    gap:20px 20px;
  }
  /* telefoonnummer in de footer brak midden in het nummer af */
  footer a[href^="tel:"]{
    white-space:nowrap;
  }

  /* ————— uit oud ≤1550 ————— */

  /* 1280-test 2026-07-28: onder de 1320-container past de betaal/verzend-strip
     nooit op één regel — netjes gecentreerd laten wrappen, zwevende divider weg */
  .footer-pay{
    justify-content:center;
    row-gap:16px;
  }

  header .container{
    max-width: 95.9%;
  }
  .menu {
    gap: 25px;
  }
  .logo{
    display: flex;
    width: 96px;
  }
  .mega {
    padding: 30px;
  }
  .prod-card .prod-img-card {
    height: 150px;
    border-radius: 10px;
  }
  .types {
    gap: 10px 30px;
  }
  .type-item .type-img {
    width: 58px;
    height: 58px;
    border-radius: 5px;
  }
  .gallery-swiper .swiper-slide {
    width: 314px;
    height: 440px;
  }
  .impact {
    padding: 8px 0 125px;
  }
  .impact-inner {
      height: 465px;
      gap: 56px;
  }
  .impact-gallery {
      width: 660px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul {
    gap: 19px;
  }
  .impact-left {
      padding-inline-start: 0;
  }
  .stat-num {
    font-size: 58px;
  }
  .feat-label{
    font-size:18px;
  }
  .collection:before {
    top: -51%;
    background: url(../media/yellow-shape-1440.svg);
    background-size: cover;
  }

  .collection-img {
    height: 260px;
  }
  /* spec 2026-08-13 (configurator-ronde) */
  .conf-works .process-inner{
    width:82%;
  }
  .collection-name {
    font-size: 17px;
  }
  .collection-card-foot {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 22px;
    gap: 20px;
  }
  .collection-grid {
    gap: 20px;
  }
  .collection-cta{
    margin-top: 30px;
  }
  .collection:after {
    bottom: -16%;
  }
  .v-swiper .swiper-slide {
    width: 276px;
    height: 345px;
    border-radius: 15px; 
  }
  .process {
    padding: 155px 0 120px;
  }
  .process:not(.conf-works) > .container > h2{
    padding-top: 0;
    margin-bottom: 30px;
  }
  .process-steps {
    gap: 40px;
  }
  .calc-grid {
    grid-template-columns: 1fr 440px;
  }
  .calc-panel {
    padding: 40px;
  }
  .calc-mid{
    grid-template-columns: 440px 1fr;
    gap: 35px;
  }
  .calc-hint{
    height: 112px;
  }
  .staffel-row {
    padding: 8px 20px;
  }
  .calc-panel h3 {
    margin-bottom: 20px;
  }
  .calc-result {
    padding-top: 5px;
  }
  .calc-row{
    margin-bottom: 20px;
  }
  .calc-total-row{
    margin-bottom: 8px;
  }
  .calc-field {
    margin-bottom: 20px;
  }
  .staffel-head-row {
    padding: 8px 20px;
    height: 36px;
  }
  .gift {
    padding: 100px 0 70px;
  }
  .gift-img {
    height: 295px;
    border-radius: 10px;
  }
  .cases {
    padding: 95px 0 50px;
  }
  .case-inner {
    gap: 50px;
  }
  .case-img.case-img-main {
    height: 382px;
    width: 382px;
  }
  .case-img {
    border-radius: 15px;
    width: 248px;
    height: 180px;
  }
   .cases:before{
    background:url(../media/blue-shape-lg.png) top right;
    background-size: cover;
    height: 78%;
    background-repeat: no-repeat;
  }
  .cases-feet {
    top: -10%;
    right: 0%;
    width: 224px;
    height: 304px;
  }
  .designed {
    margin-top: 102px;
  }
  .designed-swiper .swiper-slide {
    width: 295px;
    height: 295px;
    border-radius: 15px;
  }
  .designed-swiper {
    width: 105vw;
  }
  .brand-intro-inner {
    max-width: 60%;
  }
  .brand-intro {
    padding: 70px 0 100px;
  }
  .brand-intro-inner h2 {
    margin-bottom: 10px;
  }
  .brand-duddle-icons .dubble-left {
    top: -19%;
    left: 4%;
    width: 81px;
    height: auto;
  }
  .brand-duddle-icons .dubble-right {
    bottom: 4%;
    right: 4%;
    width: 81px;
    height: auto;
  }

  .faq-q {
    padding: 14px 4px;
  }
  .faq-grid {
    grid-template-columns: 382px 1fr;
    gap: 60px;
  }
  .faq-left p {
    max-width: 100%;
  }
  .faq-a-inner p{
    max-width: 92%;
  }
  .cta-final-feet {
    top: -70%;
    left: 69px;
    width: 31%;
  }
  .case-others.blog-others {
    padding-bottom: 160px;
  }
  .case-grid-section.blog-grid-section {
    padding-bottom: 90px;
  }
  .footer-grid {
    grid-template-columns: 1.32fr auto 1.35fr;
  }

  .footer-brand p {
    max-width: 94%;
    margin-bottom: 30px;
  }
  .footer-certs {
    align-items: flex-start;
    gap: 15px;
    flex-direction: column;
  }
  .footer-col {
    padding: 40px 50px 0;
  }
  .footer-brand {
    padding-top: 10px;
  }
  .footer-contact {
    padding-bottom: 50px;
    padding-inline-end: 0;
  }
  .footer-address br{
    display: none;
  }
  .footer-socials {
    gap: 10px;
    margin-bottom: 42px;
  }
  .footer-socials a{
    width: 42PX;
    height: 42px;
  }
  .footer-contact-row{
    margin-bottom: 30px;
  }
  .footer-pay-inner, .footer-ship-inner {
    gap: 23px;
  }
  

  /* ————— uit oud ≤1300 ————— */

  .container{
    max-width: min(952px, 100% - 40px);
  }

  /* 1280-test 2026-07-28: adresblok naast de contactlijst werd een smalle
     kolom van 6 regels — vanaf hier onder de lijst stapelen */
  .footer-contact-row{
    flex-direction:column;
    gap:18px;
  }
  header .container{
    max-width: 95.9%;
  }
  .menu {
    gap: 17px;
  }
  .navbar-inner {
    gap: 25px;
  }

  /* ————— gekopieerd uit de 1280-1439-band (verzoek Kulwant) ————— */

  /* ===== Chrome (globaal) ===== */
  .navbar{
    padding-top:10px;
    padding-bottom:10px;
  }
  .navbar-inner{
    width:calc(100% - 140px);
    justify-content: right;
  }

  /* ===== Home: hero ===== */
  .banner-section{
    padding-top:141px; /* -20% ritme */
    padding-bottom:48px;
  }

  /* ===== Home: brands ===== */
  .brands{
    padding-top:30px;
    padding-bottom:30px;
    overflow:hidden; /* knipt de 100vw-slider op de scrollbar-rand af */
  }
  /* logo-marquee full-width (verzoek Kulwant): uit de container breken */
  .brands .brands-swiper{
    width:100vw;
    margin-left:calc(50% - 50vw);
  }

  /* ===== Collectiekaarten (globaal) ===== */
  /* basis-foot is 70px hoog (desktop: één rij) — in dit bereik stapelt de
     foot (kolom) en stak de Bekijk-knop uit de kaart */
  .collection-card-foot{
    height:auto;
  }

  /* ===== Brand-intro: sok-doodles ===== */
  .brand-duddle-icons .dubble-left{
    top:-22%;
    left:6%;
    width:140px;
    height:auto;
  }
  .brand-duddle-icons .dubble-right{
    bottom:10%;
    right:4%;
    width:140px;
    height:auto;
  }

  /* ===== Footer ===== */
  /* handmatige 1440-tweak Kulwant: strip verdelen i.p.v. centreren */
  .footer-pay{
    justify-content:space-between;
    flex-wrap: nowrap;
  }
  /* menu compacter in deze band */
  .menu .menu-link a{
    font-size:14px;
  }
  /* header-iconen kleiner (48 → 42, iconen naar verhouding mee) */
  .icon-btn{
    width:42px;
    height:42px;
  }
  .icon-btn svg{
    width:18px;
    height:18px;
  }
  /* verticaal ritme -20% (secties, gemeten op 1350 en herrekend) */
  .gallery .gallery-swiper{ padding-top:80px; padding-bottom:24px;
    /* pin: basis kreeg 2026-08-12 de 4.3-compositieformule (width +
       margin-left) — deze band houdt de goedgekeurde standaardbox */
    width:auto; margin-left:0; }
  /* hero-slider: slides -20% en de stagger mee geschaald — de -100px-lift
     stak boven de (verkleinde) padding uit en werd door de sectie afgeknipt */
  .gallery-swiper .swiper-slide{
    width:250px;
    height:320px;
  }
  .gallery-swiper .swiper-slide:nth-child(3n + 1){
    transform:translateY(-40px);
  }
  .gallery-swiper .swiper-slide:nth-child(3n){
    transform:translateY(-80px);
  }
  .impact{ margin-top:34px; padding-top:6px; padding-bottom:100px; }
  .collection{ padding-bottom:24px; }
  .process{ padding-top:124px; padding-bottom:96px; }
  .calculator{ padding-top:96px; padding-bottom:54px; }
  .gift{ padding-top:80px; padding-bottom:56px; }
  .designed{ margin-top:82px; }
  .brand-intro{ padding-top:56px; padding-bottom:80px; }
  .faq{ padding-top:94px; padding-bottom:72px; }
  .cta-final-panel{ padding-top:120px; padding-bottom:72px; }
  .footer-grid{ padding-top:40px; }
  .footer-col{ padding-top:32px; }
  .footer-brand{ padding-top:8px; }

  /* koppen 20% kleiner in deze band (t.o.v. 1440-tokens 58/38/26/28) */


  /* ————— eigen tuning 1025-1279 ————— */
  /* nav: op ~1100 wrapten Sokkencollectie/Over ons — compacter en nowrap;
     linkerpadding iets in zodat de globe binnen beeld blijft */
  .navbar{
    padding-left:20px;
  }
  .menu{
    gap:12px;
  }
  .menu > li > a{
    white-space:nowrap;
  }
  .navbar-inner{
    width:calc(100% - 120px);
  }
  /* mega-dropdown: basis is 100%+78px en stak (onzichtbaar) buiten de
     viewport → h-scroll */
  .mega{
    width:calc(100% + 40px);
  }
  .calc-mid{
    grid-template-columns:1fr;
    gap:18px;
  }

  /* cases (specs Kulwant): case-gallery 45% breed met twee rijen —
     rij 1 = case-img-main, rij 2 = de twee case-img-col-foto's naast
     elkaar; case-text 55% breed */
  .case-gallery{
    flex:0 0 45%;
    width:45%;
    flex-direction:column;
  }
  .case-text{
    flex: 0 0 45%;
    width:55%;
    min-width:0;
  }
  .case-img.case-img-main{
    width:100%;
    height:280px;
  }
  .case-img-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    width:100%;
  }
  .case-img{
    width:100%;
    height:130px;
  }

  /* hero-usps: kleinere onderlinge afstand */
  .usps{
    gap:6px;
    padding:10px 0 10px;
    margin:15px;
  }

  /* stats-cijfers -20% (58 → 46) */
  .stat-num{
    font-size:46px;
  }

  /* promo-float 25% kleiner (schaal = font+breedte+marges+afbeelding ineens) */
  .promo-float{
    transform:scale(.75);
    transform-origin:left bottom;
  }

  /* promo-float: link en beschrijving iets groter (compenseert de
     0.75-schaal; specs Kulwant) */
  .promo-float-body p{
    font-size:17px;
  }
  .promo-float-link{
    font-size:17px;
  }

  /* ═══ Collectie — GEKOPIEERD UIT DE 1280-1439-BAND (verzoek Kulwant
     2026-08-03, incl. home-typografie-sync); band-eigen fijnslijpen volgt ═══ */
  /* Collectie-hero (specs Kulwant 2026-08-03) */
 
  .coll-hero-left p{
    font-size:var(--body-lg-font-size);
  }
  .coll-hero-content ul{
    gap:12px 20px;
  }
  .coll-hero-content ul li{
    font-size:var(--body-lg-font-size);
  }
  .ch-swiper .swiper-slide{
    height:320px;
  }
  .types-section{
    padding-top:80px;
    padding-bottom:60px;
  }
  .type-card-img{
    height:268px;
  }
  .type-card-content h3{
    font-size:var(--h5-font-size);
  }
  .type-card-btn{
    height:44px;
    font-size:17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .types-grid{
    grid-template-columns:repeat(3,1fr);
    gap:40px 25px;
  }
  .compare-inner-main{
    background-position:right top;
    padding-top:120px;
  }
  .compare-floating-elements{
    width:220px;
    top: -7%;
  }
  .compare-table{
    width:100%;
  }
  .compare-inner-main h2{
    font-size:var(--h2-font-size);
  }
  .bg-yellow-shape{
    background-position:right top;
    top:0px;
    background-size:134%;
  }
  .calculator-bg{
    padding-top:115px;
  }
  .calc-panel h3{
    font-size:var(--h3-font-size);
  }
  .process.process-split{
    padding-top:60px;
  }
  /* spec 2026-08-13 (Collectie-ronde) */
  .process-split-inner{
    gap:90px;
    grid-template-columns:45% 1fr;
  }
  .process-left h2{
    font-size:var(--h2-font-size);
  }
  .process-collage img{
    height:280px;
  }
  .process-left ul li{
    padding:20px 0 25px;
  }
  .process-btn{
    justify-content:flex-start;
  }
  .process-btn a{
    margin-inline-start:137px;
  }
  .case-inner-page:before{
    content:"";
    background:url(../media/sock-element-up.svg) no-repeat center / contain;
    width:220px;
    height:266px;
    top:-54px;
  }
  .case-inner-page:after{
    content:"";
    background:url(../media/sock-element-up.svg) no-repeat center / contain;
    width:220px;
    height:278px;
    bottom:-16%;
  }
  .case-text h3{
    font-size:var(--h3-font-size);
  }
  /* container-md was in deze band nooit geschaald (basis 1430 lekte door en
     werd BREDER dan .container — inversie, melding Kulwant 2026-08-04):
     nu gelijk aan de container -> 60px gutters op de bandvloer, consistent
     op alle pagina's */
  .container-md{
    max-width:min(952px, 100% - 40px);
  }

  /* ═══ Product-detail — GEKOPIEERD UIT DE 1280-1439-BAND (verzoek Kulwant
     2026-08-04); band-eigen fijnslijpen volgt ═══ */
  .usecase-card-small{
    width:47%;
    flex-shrink:0;
  }
  .usecases-cards-inner > .usecase-card:not(.usecase-card-small){
    flex:1;
    min-width:0;
  }
  .usecase-img-lg{
    width:100%;
    height:290px;
    border-radius:15px;
  }
  .cases-pdp.cases:before{
    height:100%;
    background-position:70% top;
  }
  .cases.cases-pdp{
    padding-top:220px;
    padding-bottom:20px;
  }
  .case-duddle-icons .dubble-right{
    display:none;
  }
  .cases.cases-pdp .case-duddle-icons .dubble-left{
    width:136px;
    top:-28%;
  }
  .case-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .testimonial.testimonial-yellow{
    padding-bottom:100px;
  }
  .brand-light .brand-duddle-icons .dubble-left{
    width:140px;
    top:120px;
  }
  .brand-light .brand-duddle-icons .dubble-right{
    width:140px;
    bottom:20%;
  }
  .brand-intro.brand-light{
    padding-top:150px;
    padding-bottom:100px;
  }
  .versus-table{
    max-width:100%;
  }
  /* PDP-hero (mock Kulwant 2026-08-04, 1:1 gemeten op 1320-container):
     galerij 590+110, thumbs 110/9, infokolom vult rest (~535), staffel-
     pitch 35, CTA's 49/45; fonts volgen de tokens */
  .prod-top{
    gap:40px;
    /* pin: basis-margin ging 2026-08-12 naar 50px (1920) — band houdt 20 */
    margin-top:20px;
  }
  .prod-gallery-col{
    flex:6 1 0;
    min-width:0;
  }
  .prod-gallery{
    grid-template-columns:445px 82px;
    gap:10px;
  }
  .prod-main{
    height:445px;
  }
  .prod-thumbs{
    --thumb-gap:9px;
    gap:var(--thumb-gap);
  }
  .prod-thumb{
    height:82px;
    border-radius:15px;
  }
  .prod-info{
    width:auto;
    flex:4 1 0;
    min-width:0;
  }
  .pdp-usps-main{
    margin-top:50px;
    width:540px;
    /* pin: basis centreert 2026-08-12 op de pagina (left-calc) — alleen 1920 */
    left:0;
  }
  /* pin: basis-padding-top ging 2026-08-12 naar 120px (1920) — band houdt 60 */
  .promises{
    padding-top:60px;
  }

  .pdp-usps-main ul{
    margin-top:0;
    justify-content:space-between;
    flex-wrap:nowrap;
    gap:10px 20px;
  }
  .pdp-usps-main ul li{
    white-space:nowrap;
  }
  .prod-rating{
    margin-bottom:25px;
  }
  .prod-info p{
    margin-bottom:20px;
  }
  .prod-info .staffel-row{
    padding:5px 20px;
  }
  .prod-info .staffel-row.staffel-head-row{
    padding:6px 20px;
  }
  .prod-actions .cta{
    height:49px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .prod-actions .cta-light{
    height:45px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .specs-section{
    padding-top:150px;
    /* pin: basis-padding-bottom ging 2026-08-12 naar 50px (1920) — band houdt 70 */
    padding-bottom:70px;
  }
  .promise-card{
    padding:25px;
  }
  .weave{
    padding-top:30px;
  }
  .weave-img{
    height:240px;
    border-radius:0px 0px 15px 15px;
  }
  .weave-grid{
    gap:40px;
  }
  .weave-body h5{
    font-size:calc(var(--h5-font-size) - 2px);
  }
  .weave-tag{
    font-size:var(--body-sm-font-size);
  }
  .weave-inner:before{
    bottom:8%;
  }
  .weave-body{
    padding:25px 20px;
  }
  .versus-dubble-left{
    width:190px;
    top:-17%;
  }
  .specs-duddle-icons .dubble-right{
    width:190px;
  }
  .specs-duddle-icons .dubble-left{
    width:150px;
    bottom:-135px;
  }
  .versus{
    padding-top:60px;
    width:100%;
  }
  .cards-suggestion{
    padding-top:80px;
  }
  .design-now{
    padding-top:20px;
    padding-bottom:84px;
  }
  .design-bg-union{
    bottom:-1px;
  }
  .design-duddle-sock{
    display:none;
  }
  .conf-preview{
    max-width:860px;
  }
  .conf-preview-card{
    height:466px;
  }
  .usecases{
    padding-top:70px;
  }
  .usecases-cards-inner{
    gap:10px;
  }
  .usecases-masonry{
    gap:30px;
  }
  .usecase-body h5{
    font-size:calc(var(--h5-font-size) - 3px);
  }
  .usecases-outer-right{
    gap:50px;
  }
  .usecase-img-md{
    border-radius:15px;
    height:180px;
  }
  /* ═══ Configurator — GEKOPIEERD UIT DE 1280-1439-BAND (verzoek Kulwant
     2026-08-05); band-eigen fijnslijpen volgt ═══ */
  .conf-works .process-split-inner{
    gap:60px;
    grid-template-columns:48.2% 1fr;
  }
  /* collage: page-scoped via .conf-works (gedeeld met Collectie/toepassingen);
     base .conf-works-inner heeft align-items:end — hier boven uitgelijnd */
  .conf-works .process-collage{
    align-self:start;
  }
  .conf-works .process-collage img{
    height:220px;
  }
  .conf-types{
    padding-top:120px;
    padding-bottom:60px;
  }
  .conf-bg{
    background-size:cover;
    height:1200px;
    top:-46%;
    background-position:right top;
  }
  /* cases-solid-gescoped: PDP heeft dezelfde duddle-structuur */
  .cases.cases-solid .case-duddle-icons .dubble-left{
    width:210px;
    top:-12%;
  }
  .case-sock-right{
    width:210px;
    top: 30%;
  }
  .cases.conf-designed{
    padding-top:120px;
    padding-bottom:60px;
  }
  /* testimonial-light-gescoped: .testimonial is gedeeld (Collectie final, PDP-yellow) */
  .testimonial.testimonial-light{
    padding-top:50px;
    padding-bottom:90px;
  }
  .brand-intro-yellow .brand-duddle-icons .dubble-left{
    width:140px;
    top:22%;
  }
  .brand-intro-yellow .brand-duddle-icons .dubble-right{
    width:140px;
    bottom:8%;
  }
  /* ═══ Werkwijze — bandronde 992-1279 (specs Kulwant 2026-08-06) ═══ */
  .steps-section{
    padding:90px 0px 70px;
  }
  .step-card-img{
    height:380px;
    border-radius:25px;
  }
  .step-card-body{
    gap:50px;
    padding:0px 30px;
  }
  .cases.cases-bg-pink:before{
    height:85%;
    top:-50px;
  }
  /* ═══ Reviews-en-cases — GEKOPIEERD UIT DE 1280-1439-BAND (verzoek Kulwant
     2026-08-06); band-eigen fijnslijpen volgt ═══ */
  .case-card-img{
    height:280px;
  }
  .case-grid{
    grid-template-columns:repeat(3,1fr);
  }
  .case-grid-section{
    padding:70px 0px 40px;
  }
  .brands.brands-beige{
    padding-bottom:0px;
  }
  /* ═══ Reviews-en-cases-detail — GEKOPIEERD UIT DE 1280-1439-BAND (verzoek
     Kulwant 2026-08-06); band-eigen fijnslijpen volgt ═══ */
  .sock-duddle-object{
    width:140px;
    bottom:30%;
  }
  .impact-inner.case-story-inner .impact-gallery{
    width:580px;
  }
  .case-specs{
    padding:0px 0 40px;
  }
  .case-spec{
    border-radius:15px;
  }
  .case-video{
    padding:180px 0 130px;
  }
  .case-bg-union{
    top:-40%;
    height:1103px;
  }
  .case-result{
    padding-top:40px;
    padding-bottom:40px;
  }
  .case-others{
    padding:90px 0px;
  }
  .case-video-inner{
    height:410px;
  }
  .case-video-doodle-r{
    right:5%;
    top:25%;
    width:200px;
  }
  .case-result-grid img{
    height:410px;
  }
  /* ═══ Offerte — GEKOPIEERD UIT DE 1280-1439-BAND (verzoek Kulwant
     2026-08-07); band-eigen fijnslijpen volgt ═══ */
  .quote-wrap{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    align-items:start;
  }
  /* aside 2-koloms (mock 2026-08-07): checks links | verticale lijn |
     direct contact rechts — structurele selectors (template-widget) */
  .quote-aside{
    padding:30px;
    display:grid;
    grid-template-columns:1fr 1px 1fr;
    column-gap:45px;
    row-gap:15px;
    align-items:start;
  }
  .quote-aside h3{
    grid-column:1;
    grid-row:1;
    margin:0;
  }
  .quote-aside ul:first-of-type{
    grid-column:1;
    grid-row:2;
  }
  .quote-aside-divider{
    grid-column:2;
    grid-row:1 / 3;
    width:1px;
    height:100%;
    margin:0;
  }
  .quote-aside h4{
    grid-column:3;
    grid-row:1;
    margin:0;
  }
  .quote-aside ul:last-of-type{
    grid-column:3;
    grid-row:2;
  }
  .quote-card{
    padding:30px 40px 40px;
  }
  .type-picker{
    gap:20px 10px;
  }
  .application-section:after{
    width:192px;
    bottom:-27%;
  }
  .application-bg-shape{
    height:630px;
    background-position:center left 25%;
  }
  .application-steps{
    gap:20px;
    max-width:82%;
  }
  /* ═══ Bedankt — GEKOPIEERD UIT DE 1280-1439-BAND (verzoek Kulwant
     2026-08-07); band-eigen fijnslijpen volgt ═══ */
  .follow-outer-main{
    height:860px;
  }
  .thanks-status{
    padding:80px 0 0px;
  }
  .thanks-steps{
    margin-bottom:80px;
    gap:40px;
  }
  .wait-img{
    height:280px;
  }
  .follow-inner{
    flex-wrap:nowrap;
    gap:40px;
  }
  .newsletter-card{
    padding:35px;
  }
  /* ═══ Toepassingen — GEKOPIEERD UIT DE 1280-1439-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .usecase-why{
    padding-bottom:0px;
  }
  .usecases-flat .usecase-img{
    height:320px;
  }
  .toepassingen .collection-beige{
    margin-top:20px;
  }
  .toepassingen .collection-beige:before{
    top:-460px;
  }
  .toepassingen .cases{
    padding-top:230px;
  }
  .toepassingen .cases:after{
    width:220px;
  }
  .toepassingen .calculator-bg:before{
    background-position:center bottom;
  }
  .toepassingen .uc-bg-yellow-shape{
    height:520px;
  }
  .toepassingen .brand-light .brand-duddle-icons .dubble-left{
    width:140px;
  }
  .toepassingen .brand-light .brand-duddle-icons .dubble-right{
    width:140px;
  }
  /* page-scoped: kaal zou Collectie's 992-process-split raken */
  .toepassingen .process-split-inner{
    gap:50px;
    grid-template-columns:47.2% 1fr;
  }
  /* page-scoped: band heeft al .brand-intro.brand-light{150/100} (PDP/werkwijze) */
  .toepassingen .brand-intro.brand-light{
    padding-top:90px;
    padding-bottom:100px;
  }
  /* ═══ Veelgestelde vragen — GEKOPIEERD UIT DE 1280-1439-BAND (verzoek
     Kulwant 2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .faq-cat-group{
    margin-bottom:60px;
  }
  .faq-cats-filter{
    gap:5px;
  }
  /* page-scoped: .chip is gedeeld met reviews-en-cases (daar base-padding) */
  .faq-page .chip{
    padding:10px 18px;
  }
  /* ═══ Over ons — GEKOPIEERD UIT DE 1280-1439-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .timeline{
    padding-bottom:0px;
  }
  /* Hero-gallery: 2 slides volledig + 2 half zichtbaar — zie 1440-band */
  .over-ons .gallery-swiper .swiper-slide{
    width:calc((100vw - 60px) / 3);
  }
  .over-ons .gallery-swiper{
    width:calc(100% + (100vw - 60px) / 3 + 40px);
    margin-left:calc((100vw - 60px) / -6 - 20px);
  }
  .overons-story{
    padding:60px 0 0px;
  }
  .overons-story-inner{
    gap:60px;
  }
  .story-collage{
    gap:10px;
  }
  .story-collage-right{
    gap:10px;
  }
  .overons-values{
    padding:200px 0 100px;
  }
  .overons-values ul{
    gap:40px;
  }
  .duurz-doodle{
    width:160px;
    top:-10px;
  }
  .over-ons .cta-final-feet{
    width:220px;
    top:-250px;
    right:26px;
  }
  .overons-duurz{
    padding-top:50px;
  }
  /* duurz volgt de cases-sectie van home (verzoek Kulwant 2026-08-10):
     galerij 45% gestapeld, hoofdbeeld 280, kleintjes 130 */
  .duurz-inner{
    gap:50px;
    grid-template-columns:45% 1fr;
  }
  .duurz-collage{
    gap:20px;
    flex-direction:column;
  }
  .duurz-collage-col{
    gap:20px;
    /* de twee kleintjes naast elkaar in één rij (correctie Kulwant) */
    flex-direction:row;
  }
  .duurz-collage .img-lg{
    width:100%;
    height:280px;
  }
  .duurz-collage-col .img-sm{
    width:calc(50% - 10px);
    height:130px;
  }
  /* ═══ Duurzaamheid — GEKOPIEERD UIT DE 1280-1439-BAND (verzoek Kulwant
     2026-08-10); dz-points-regels in het SEED-blok hieronder;
     band-eigen fijnslijpen volgt ═══ */
  .duurzaamheid .cta-final-feet{
    width:160px;
    top:-201px;
  }
  .dz-certs{
    padding-top:0px;
  }
  .dz-certs:before{
    background-size:cover;
    background-position:right 18% top;
    /* pin: basis-bottom ging 2026-08-12 naar -40px (1920) — band houdt 0 */
    bottom:0px;
  }
  /* Certs-menu als dropdown (mock 2026-08-10): intro centraal, menu als
     volle-breedte trigger-rij (alleen actieve tab; .open toont de lijst),
     panes eronder over de volle breedte */
  .dz-certs .container > p{
    width:100%;
    text-align:center;
  }
  .dz-certs-inner{
    gap:30px;
    grid-template-columns:1fr;
    /* 60px gereserveerd voor de absolute trigger-rij (geen pagina-sprong) */
    padding-top:60px;
  }
  .dz-certs-menu{
    /* absoluut: de open lijst OVERLAPT de panes i.p.v. ze weg te duwen */
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:5;
    background:var(--coral);
    border:1.5px solid #fff;
    border-radius:12px;
    overflow:hidden;
    padding-left:30px;
  }
  .dz-certs-menu li{
    display:none;
  }
  .dz-certs-panes{
    padding-top:50px;
  }
  .dz-keur{
    padding-top:0px;
  }
  .dz-certs-menu li:has(button.active),
  .dz-certs-menu.open li{
    display:block;
  }
  .dz-certs-menu button{
    border-top:0;
    padding:17px 48px 17px 18px;
  }
  .dz-certs-menu.open li + li button{
    border-top:1px solid rgba(255,255,255,.4);
  }
  /* witte chevron rechts op de trigger-rij; draait bij open */
  .dz-certs-menu:after{
    content:"";
    position:absolute;
    top:24px;
    right:20px;
    width:14px;
    height:9px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 11.414 6.414'%3E%3Cpath d='M482.224,63.112l5,5,5-5' transform='translate(-481.517,-62.405)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events:none;
    transition:transform .2s;
  }
  .dz-certs-menu.open:after{
    transform:rotate(180deg);
  }
  .dz-pane{
    gap:40px;
    grid-template-columns:1fr 390px;
  }

  /* ═══ Duurzaamheid — SEED: dz-points volgt overons-duurz/cases (verzoek
     Kulwant 2026-08-10); rest van de pagina volgt in de bandronde ═══ */
  .dz-points-inner{
    gap:50px;
    grid-template-columns:45% 1fr;
  }
  .dz-points .story-collage{
    flex-direction:column;
    gap:20px;
  }
  /* kolomrichting: flex-ratio zou anders de hoogtes kapen; groot beeld boven */
  .dz-points .story-collage img{
    flex:0 0 auto;
  }
  .dz-points .story-collage .img-lg{
    order:-1;
    width:100%;
    height:280px;
  }
  .dz-points .story-collage .img-sm{
    width:100%;
    height:130px;
  }
  /* ═══ Waarom Sokkies — GEKOPIEERD UIT DE 1280-1439-BAND (verzoek Kulwant 2026-08-10): ws-intro-grid volgt de usecases-masonry
     van de PDP (verzoek Kulwant 2026-08-10); kleine kaart per rijvariant
     (sm-lg: eerste, lg-sm: laatste), eigen offsets geneutraliseerd ═══ */
  .ws-gets:before{
    background-position:right 30% top;
  }
  /* ws-gets volgt de VOLLEDIGE process-split-familie (verzoek Kulwant
     2026-08-10): sectie, kop, lijstritme, collagebeelden, offsets */
  .ws-gets{
    padding-top:260px;
  }
  .ws-gets-left h2{
    font-size:var(--h2-font-size);
  }
  .ws-gets-left ol li{
    padding:20px 0 25px;
  }
  .ws-gets-num{
    flex:0 0 70px;
  }
  /* bandbreed (zelfde rolling patroon als de 521-band; bij klachten scopen) */
  .cta-final-feet{
    top:-56%;
    left:69px;
    width:28%;
  }
  .ws-gets-imgcol img{
    height:280px;
  }
  .ws-gets-imgcol-offset{
    margin-top:0;
  }
  /* ws-gets-inner volgt process-split-inner (verzoek Kulwant 2026-08-10) */
  .ws-gets-inner{
    grid-template-columns:42.2% 1fr;
    gap:80px;
  }
  .ws-intro-grid{
    gap:30px;
  }
  .ws-row-gap{
    margin-top:50px;
  }
  .ws-row{
    display:flex;
    gap:10px;
  }
  .ws-row-sm-lg > .ws-card:first-child,
  .ws-row-lg-sm > .ws-card:last-child{
    width:47%;
    flex-shrink:0;
  }
  .ws-row-sm-lg > .ws-card:last-child,
  .ws-row-lg-sm > .ws-card:first-child{
    flex:1;
    min-width:0;
  }
  .ws-row-sm-lg > .ws-card:last-child img,
  .ws-row-lg-sm > .ws-card:first-child img{
    width:100%;
    height:290px;
    border-radius:15px;
    object-fit:cover;
  }
  .ws-row-sm-lg > .ws-card:first-child img,
  .ws-row-lg-sm > .ws-card:last-child img{
    width:100%;
    height:180px;
    border-radius:15px;
    object-fit:cover;
  }
  .ws-card-offset{
    margin-top:0;
  }
  /* ═══ Partners — GEKOPIEERD UIT DE 1280-1439-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  /* h5-herijkingen per band (afspraak — base's −12/−22 blijven staan) */
  .pt-perks-card h3{
    font-size:calc(var(--h5-font-size) - 1px);
  }
  .pt-perks{
    padding:80px 0 80px;
  }
  .pt-perks-grid{
    gap:15px;
  }
  .pt-perks-card{
    padding:25px;
    border-radius:15px;
  }
  .pt-partners h2{
    font-size:calc(var(--h5-font-size) + 1px);
  }
  /* minmax(0,1fr): kaart-mincontent duwde de 6-koloms grid anders uit beeld */
  .pt-partners-grid{
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:15px 10px;
  }
  .pt-otp{
    padding-top:280px;
  }
  .pt-otp:before{
    height:280px;
    background-position:right 44% top;
    background-size:cover;
    /* pin: basis-top ging 2026-08-12 naar -130px (1920) — band houdt 0 */
    top:-120px;
  }
  .pt-otp-inner{
    grid-template-columns:510px 1fr;
    gap:50px;
    align-items:center;
  }
  .pt-otp-legs{
    width: 350px;
    top: -190px;
  }
  .pt-faq:before{
    background-position:right 30% top;
    background-size:cover;
  }
  .pt-otp-doodle{
    width:260px;
    top:60px;
  }
  /* ═══ Downloads — GEKOPIEERD UIT DE 1280-1439-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .dl-cards-grid{
    gap:25px 25px;
  }
  .dl-card{
    gap:20px;
  }  /* ═══ Contact — GEKOPIEERD UIT DE 1280-1439-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .ct-form-grid{
    gap:20px 26px;
  }
  .ct-form-card{
    border-radius:20px;
    padding:40px 35px 35px;
  }
  .ct-contact-inner{
    gap:30px;
    grid-template-columns:1fr 360px;
  }
  /* ═══ Juridisch — GEKOPIEERD UIT DE 1280-1439-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  /* index = zwevende balk onderin (mock 2026-08-10): dicht alleen de kop
     + pijl, klik opent de lijst omhoog (fixed bottom groeit vanzelf omhoog) */
  .jr-index{
    padding:18px 25px;
    position:fixed;
    bottom:20px;
    left:20px;
    right:20px;
    z-index:90;
    background:#fff;
    border-radius:12px;
    /* pin: basis werd 2026-08-12 sticky top:130 (1920) — onderbalk houdt top auto */
    top:auto;
  }
  .jr-index h3{
    margin:0;
    cursor:pointer;
  }
  .jr-index ol{
    display:none;
    margin-top:16px;
    max-height:50vh;
    overflow:auto;
  }
  .jr-index.open ol{
    display:block;
  }
  .jr-index:after{
    content:"";
    position:absolute;
    top:24px;
    right:25px;
    width:14px;
    height:9px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 11.414 6.414'%3E%3Cpath d='M482.224,68.8l5-5,5,5' transform='translate(-481.517,-62.7)' fill='none' stroke='%2328121b' stroke-linecap='round' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events:none;
    transition:transform .2s;
  }
  .jr-index.open:after{
    transform:rotate(180deg);
  }
  /* ruimte zodat de balk de tekst-onderkant niet afdekt */
  .jr-content{
    padding-bottom:110px;
  }
  /* gestapeld: index boven, tekst eronder — beide vol breed */
  .jr-inner{
    grid-template-columns:minmax(0,1fr);
    gap:0px;
  }
  .jr-body{
    grid-column:1;
    grid-row:2;
    max-width:none;
  }  /* print-knop sticky binnen de sectie (body-cel-overlap) */
  .jr-print{
    position:sticky;
    top:130px;
    grid-column:1;
    grid-row:2;
    justify-self:end;
    align-self:start;
    z-index:5;
  }
  /* ═══ 404 — SEED 992-1279 (spec Kulwant 2026-08-12): er-num −10% per band ═══ */
  .er-num{
    font-size:175px;
  }
  .error-404{
    background:var(--white) url(../media/error-page-bg.png) no-repeat left 20% top;
    background-size:cover;
    height:100vh;
  }
  /* ═══ Home — impact-gallery (spec Kulwant 2026-08-12): de vaste
     320x400-slides werden door de gekrompen marquee-kolommen (~158px)
     rechts afgeknipt — slides volgen nu de kolombreedte, hoogte 260
     (object-fit:cover uit de basis). Loste ook de pijl-uitlijning op:
     de overflow duwde de flexregel van impact-left 18px omlaag. */
  .v-swiper .swiper-slide{
    width:100%;
    height:260px;
  }
  /* pijl bovenaan uitgelijnd (spec 2026-08-12): basis-margin 18px hoort bij
     de 70px-cijfers van 1920 — hier 46px; zelfde 2px-correctie als de
     768/521/520-banden */
  .stat-arrow{
    margin-top:2px;
  }
  /* ═══ Reviews-en-cases-detail — case-others als scroll-slider (spec
     Kulwant 2026-08-13): huispatroon scroll-rij (zelfde als de
     collection-rijen) — 3 kaarten + peek, scrollbar verborgen; gescoped
     zodat het overzicht z'n grid houdt ═══ */
  .case-others .case-grid{
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .case-others .case-grid::-webkit-scrollbar{
    display:none;
  }
  .case-others .case-card{
    flex:0 0 calc((100% - 40px) / 2.3);
  }
  /* spec 2026-08-13 (offerte-ronde; funnel-baseline gedeeld met sample-request) */
  .application-section{
    position:relative;
    padding:60px 0 80px;
  }
  /* ═══ Toepassingen — 992-ronde testronde 2 (specs Kulwant 2026-08-13):
     collection-beige als scroll-slider (huispatroon, gescoped — home's
     collection blijft grid) ═══ */
  .usecase-why{
    padding-top:70px;
  }
  .collection-beige .collection-grid{
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .collection-beige .collection-grid::-webkit-scrollbar{
    display:none;
  }
  .collection-beige .collection-card{
    flex:0 0 31%;
  }
  /* ═══ Over-ons — 992-ronde testronde 2 (specs Kulwant 2026-08-13) ═══ */
  .overons-values::before{
    background-size:contain;
  }
  /* impact-shape: zelfde regel als de 1280-band (spec 2026-08-13) */
  .over-ons .impact:before{
    background:url(../media/stats-top-bg.png) top left 20% no-repeat;
    top:-20px;
  }
  /* ═══ QA #15/#16 (2026-08-13): gift- en collectierij als slider met
     pijlen op 992-1279 — 4 kaarten naast elkaar was te krap; zelfde
     scroll-rij + nav als de 768-band, hier 3 kaarten + peek. Conf-types
     (eigen sectie) en beige (eigen regels) blijven ongemoeid. ═══ */
  .gift-grid,
  .collection .collection-grid{
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .gift-grid::-webkit-scrollbar,
  .collection .collection-grid::-webkit-scrollbar{
    display:none;
  }
  .collection h2, .gift h2{
    padding-left: 20px;
  }
  .collection .container, .gift .container {
    max-width: 100%;
  }
  .collection .collection-grid, .gift .gift-grid{
    padding: 0 20px;
  }
  .collection .collection-grid > *{
    flex:0 0 calc((100% - 40px) / 2.3);
  }
  /* QA #15-vervolg (2026-08-13): gift = 2 vol + 30% van kaart 3
     (W = (100% − 2×20 gap) / 2.3) */
  .gift-grid > *{
    flex:0 0 calc((100% - 40px) / 2.3);
  }
  /* zelfde behandeling voor de conf-types-rij (configurator) — stond nog
     als krappe 4-up grid op deze band */

  .conf-types .container{
    max-width: 100%;
  }   
  .conf-types .container h2{
    padding-inline-start: 75px;
  }
  .conf-types .collection-grid{
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
    padding: 0px 75px 10px;
  }
  .conf-types .collection-grid::-webkit-scrollbar{
    display:none;
  }
  .conf-types .collection-grid > *{
    flex:0 0 calc((100% - 40px) / 2.3);
  }
  .conf-types .collection-nav{
    display:flex;
  }
  .gift-nav,
  .collection-nav{
    display:flex;
  }
  /* QA #15: meer witruimte boven de gift-sectie */
  .gift{
    padding-top:110px;
  }
  /* ═══ QA #17 (2026-08-13): ±20px ruimte boven de prijsrij (stond 5px op
     de dropdown) en de grote prijs een fractie omlaag — de komma in €3,49
     liet hem optisch te hoog hangen ═══ */
  .calc-result{
    padding-top:20px;
  }
  .calc-perpair{
    transform:translateY(3px);
    display:inline-block;
  }
  .pick-img {
    height: 140px;
  }
  .testimonial-card {
    height: 260px;
  }
  .impact-case-right {
    height: 410px;
  }
  .lp-usps-duddle-l {
    left: 24px;
    top: -26%;
    width: 24%;
  }
  .lp-usps-duddle-r {
    right: 24px;
    top: -32%;
    width: 21%;
  }
  .lp-usps-grid {
    width: 100%;
  }
  .landing .cta-final::before {
    width: 562px;
  }
  .configurator-section ul {
    gap: 12px 20px;
    margin-top: 80px;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-evenly;
  }
  }

/* ===================================================================
   768-991 (tablet)
   =================================================================== */
@media (min-width:768px) and (max-width:991px){
  /* Gravity-tegenhanger van .type-picker / .extra-picker (gemeten op htmlv). */
  .quote-card .of-soktypes .gfield_checkbox{ grid-template-columns:repeat(4,1fr); gap:20px 10px; }
  /* mega-hoverbrug is desktop-only (drawer/sheet heeft geen hover-gat) */
  .mega::before{
    display:none;
  }
  .gift h2 {
    width: 80%;
  }

  /* ws-compare-doodle: alleen 1920-ontwerp (zie basis) */
  .ws-compare-doodle-1{
    display:none;
  }
  /* pin: basis (ws-gets-left ol p) ging 2026-08-12 naar h5-token (1920) —
     band houdt body-lg */
  .ws-gets-left ol p{
    font-size:var(--body-lg-font-size);
  }
  /* pin: basis (ws-compare) kreeg 2026-08-12 padding-top 40 / margin-top -40
     (1920) — band houdt 0/0 */
  .ws-compare{
    padding-top:0px;
    margin-top:0px;
  }
  /* pin: basis-bottom (ws-intro golf) ging 2026-08-12 naar 40px (1920) —
     band houdt 0 */
  .ws-intro::before{
    bottom:0px;
  }
  /* pin: basis-h2 (overons-story) ging 2026-08-12 naar h2-token (1920) —
     band houdt h3-token */
  .overons-story-text h2{
    font-size:var(--h3-font-size);
  }
  /* pin: basis-gap (case-grid) ging 2026-08-12 naar 35px 20px (1920) —
     band houdt 20 */
  .case-grid{
    gap:20px;
  }
  /* pin: basis-padding-bottom (calculator-pink) ging 2026-08-12 naar 120px
     (1920) — band houdt 67 (compound-conventie) */
  .calculator.calculator-pink{
    padding-bottom:67px;
  }
  /* configurator-doodles + sokkenpatroon: alleen 1920-ontwerp (zie basis,
     zelfde patroon als PDP's design-duddle-sock) */
  .configurator-section .conf-duddle-r,
  .configurator-section .conf-duddle-l,
  .configurator-section:after,
  .conf-works:before,
  .conf-types:before{
    display:none;
  }
  /* pin: basis-h2 ging 2026-08-12 naar h2-token + margin -30 (1920) —
     band houdt de goedgekeurde h3-token + 40 */
  .conf-works > .container > h2{
    font-size:var(--h3-font-size);
    margin-bottom:30px;
  }
   .translatepress-en_GB .conf-works > .container > h2, .translatepress-de_DE .conf-works > .container > h2, .translatepress-fr_FR .conf-works > .container > h2{
    margin-bottom:20px;
  }
  /* ── DEFINITIEVE TYPOGRAFIE-INVENTARIS (PDF Kulwant 2026-08-03) — DE bron
     voor alle content-typografie in deze band; maten hier wijzigen, nooit
     als harde px in sectieregels ── */
  :root{
    --h1-font-size:52px;
    --h1-line-height:48px;
    --h2-font-size:38px;
    --h3-font-size:26px;
    --h4-font-size:23px;
    --h5-font-size:19px;
    --h6-font-size:17px;
    --body-font-size:15px;
    --body-lg-font-size:17px;
    --body-sm-font-size:12px;
  }



  /* ————— uit oud ≤1680 ————— */

  .container{
    max-width: min(1440px, 100% - 40px);
  }
  /* 1680-test 2026-07-28: betaal/verzend-strip paste nét niet meer op één
     regel (852+1+533 content + 2×30 gap = 1446 > 1440) en wikkelde lelijk */
  .footer-pay{
    gap:20px 20px;
  }
  /* telefoonnummer in de footer brak midden in het nummer af */
  footer a[href^="tel:"]{
    white-space:nowrap;
  }

  /* ————— uit oud ≤1550 ————— */

  /* 1280-test 2026-07-28: onder de 1320-container past de betaal/verzend-strip
     nooit op één regel — netjes gecentreerd laten wrappen, zwevende divider weg */
  .footer-pay{
    justify-content:center;
    row-gap:16px;
  }
  .footer-pay .border-v{
    display:none;
  }
   .container{
    max-width: min(1320px, 100% - 40px);
  }
  header .container{
    max-width: 95.9%;
  }
  .menu {
    gap: 25px;
  }
  .logo{
    display: flex;
    width: 96px;
  }
  .mega {
    padding: 30px;
  }
  .prod-card .prod-img-card {
    height: 150px;
    border-radius: 10px;
  }
  .types {
    gap: 10px 30px;
  }
  .type-item .type-img {
    width: 58px;
    height: 58px;
    border-radius: 5px;
  }
  .gallery-swiper .swiper-slide {
    width: 314px;
    height: 440px;
  }
  .impact {
    padding: 8px 0 125px;
  }
  .impact-inner {
      height: 465px;
      gap: 56px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul {
    gap: 19px;
  }
  .impact-left {
      padding-inline-start: 0;
  }
  .stat-num {
    font-size: 58px;
  }
  .feat-label{
    font-size:18px;
  }
  .collection:before {
    top: -21%;
    background: url(../media/yellow-shape-1440.svg);
    background-size: cover;
  }

  .collection h2, .gift h2 {
    padding-left: 40px;
  }
  .collection .container, .gift .container {
    max-width: 100%;
    padding: 0;
  }
  .collection .collection-grid, .gift .gift-grid{
    padding: 0 40px;
    margin: 0;
    width:100%;
  }

  .collection-img {
    height: 295px;
  }
  .collection-name {
    font-size: 17px;
  }
  .collection-card-foot {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 22px;
    gap: 20px;
  }
  .collection-grid {
    gap: 20px;
  }
  .collection-cta{
    margin-top: 30px;
  }
  .collection:after {
    bottom: -16%;
  }
  .v-swiper .swiper-slide {
    width: 276px;
    height: 345px;
    border-radius: 15px; 
  }
  .process {
    padding: 155px 0 100px;
  }
  .process:not(.conf-works) > .container > h2{
    padding-top: 0;
    margin-bottom: 30px;
  }
  .process-steps {
    gap: 67px;
  }
  .calc-panel {
    padding: 40px;
  }
  .calc-mid{
    grid-template-columns: 440px 1fr;
    gap: 35px;
  }
  .calc-hint{
    height: 112px;
  }
  .staffel-row {
    padding: 8px 20px;
  }
  .calc-panel h3 {
    margin-bottom: 20px;
  }
  .calc-result {
    padding-top: 5px;
  }
  .calc-row{
    margin-bottom: 20px;
  }
  .calc-total-row{
    margin-bottom: 8px;
  }
  .calc-field {
    margin-bottom: 20px;
  }
  .staffel-head-row {
    padding: 8px 20px;
    height: 36px;
  }
  
  .gift {
    padding: 100px 0 0px;
  }
  .gift-img {
    height: 295px;
    border-radius: 10px;
  }
  .cases {
    padding: 150px 0 50px;
  }
  .case-inner {
    gap: 40px;
  }
  .case-img.case-img-main {
    height: 382px;
    width: 382px;
  }
  .case-img {
    border-radius: 15px;
    width: 248px;
    height: 180px;
  }
   .cases:before{
    background:url(../media/blue-shape-lg.png) 82% top;
    background-size: cover;
    height: 78%;
    background-repeat: no-repeat;
  }
  .cases-feet {
    top: -12%;
    right: 0%;
    width: 140px;
    height: 226px;
  }
  .designed {
    margin-top: 102px;
  }
  .designed-swiper .swiper-slide {
    width: 295px;
    height: 295px;
    border-radius: 15px;
  }
  .designed-swiper {
    width: 105vw;
  }
  .brand-intro-inner {
    max-width: 100%;
  }
  .brand-intro {
    padding: 70px 0 100px;
  }
  .brand-intro-inner h2 {
    margin-bottom: 10px;
  }
  .brand-duddle-icons .dubble-left {
    top: -19%;
    left: 4%;
    width: 81px;
    height: auto;
  }
  .brand-duddle-icons .dubble-right {
    bottom: 4%;
    right: 4%;
    width: 81px;
    height: auto;
  }

  .faq-q {
    padding: 14px 4px;
  }
  .faq-grid {
    grid-template-columns: 382px 1fr;
    gap: 135px;
  }
  .faq-left p {
    max-width: 100%;
  }
  .faq-a-inner p{
    max-width: 92%;
  }
  .cta-final-feet {
    top: -49%;
    left: 20px;
    width: 35%;
  }
  .case-others.blog-others {
    padding-bottom: 160px;
  }
  .case-grid-section.blog-grid-section {
    padding-bottom: 90px;
  }
  .footer-grid {
    grid-template-columns: 1.32fr auto 1.35fr;
  }

  .footer-brand p {
    max-width: 94%;
    margin-bottom: 30px;
  }
  .footer-certs {
    align-items: flex-start;
    gap: 15px;
    flex-direction: column;
  }
  .footer-col {
    padding: 40px 50px 0;
  }
  .footer-brand {
    padding-top: 10px;
  }
  .footer-contact {
    padding-bottom: 50px;
    padding-inline-end: 0;
  }
  .footer-address br{
    display: none;
  }
  .footer-socials {
    gap: 10px;
    margin-bottom: 42px;
  }
  .footer-socials a{
    width: 42PX;
    height: 42px;
  }
  .footer-contact-row{
    margin-bottom: 30px;
  }
  .footer-pay-inner, .footer-ship-inner {
    gap: 23px;
  }
  

  /* ————— uit oud ≤1300 ————— */

  .container{
    max-width: min(1190px, 100% - 40px);
  }
  /* 1280-test 2026-07-28: adresblok naast de contactlijst werd een smalle
     kolom van 6 regels — vanaf hier onder de lijst stapelen */
  .footer-contact-row{
    flex-direction:column;
    gap:18px;
  }
  header .container{
    max-width: 95.9%;
  }
  .menu {
    gap: 17px;
  }
  .navbar-inner {
    gap: 25px;
  }

  /* ————— tabletblok ————— */

  /* ===== Tablet-pass 2026-07-28 (home, zonder design — projectinzicht) ===== */
  /* gutters: container 1190 raakte de rand */
  .container{
    max-width:94%;
  }
  /* navbar paste niet: logo over menu, "Over ons" wikkelde, CTA/globe buiten beeld */
  .menu{
    gap:7px;
  }
  .menu > li > a{
    font-size:14px;
    white-space:nowrap;
  }
  .navbar-inner{
    gap:10px;
  }
  .navbar .cta{
    white-space:nowrap;
    padding:8px 12px;
    font-size:13px;
  }
  .icon-btn{
    width:34px;
    height:34px;
  }
  .logo{
    width:80px;
    margin-right:8px;
  }
  header .container{
    max-width:98%;
  }
  .nav-wrap{
    gap:8px;
  }
  .navbar{
    padding-inline:14px;
  }
  .globe{
    width:52px;
    height:52px;
  }
  /* mega-menu (ook verborgen) stak buiten de viewport → h-scroll */
  .mega{
    width:calc(100vw - 48px);
    max-width:calc(100vw - 48px);
  }
  /* impact: vaste galleriebreedte 890 duwde de sectie uit beeld —
     2 marqueekolommen i.p.v. 3 */
  .impact-inner{
    gap:30px;
    height:auto;
  }
  .impact-gallery .v-swiper:nth-child(3){
    display:none;
  }
  /* USP-chips: 6 op één regel werd te krap — het bestaande 3-koloms-grid
     werkte niet omdat de basis flex is */
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul{
    display:grid;
  }
  /* calculator: vaste 560/440-kolommen pasten niet — stapelen */
  .calc-mid{
    grid-template-columns:1fr 1fr;
  }
  .calc-panel.calc-right {
    order: 3;
  }
  .calc-cta{
    margin-top: 10px;
    margin-bottom: 35px;
  }
  .calc-box{
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .calc-grid{
    display: contents;
  }
  /* FAQ-grid: 382px + 135px gap werd te krap */
  .faq-grid{
    grid-template-columns:300px 1fr;
    gap:50px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul{
    grid-template-columns:repeat(3,1fr);
  }
  .collection-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .gift-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .types-grid{
    grid-template-columns:repeat(2,1fr);
    gap:40px 10px;
  }

  /* ————— eigen tuning 769-991 ————— */
  /* footer: 3-koloms grid overliep hier (zone was alleen op 1024 getest) */
  .footer-grid{
    grid-template-columns:1fr;
    gap:0;
  }
  footer .border-v{
    display:none;
  }
  .footer-col{
    padding:30px 0 0;
    border-left:0;
    border-right:0;
  }

  /* logo-marquee full-width (zelfde als 992-1279-band) */
  .brands{
    overflow:hidden;
  }
  .brands .brands-swiper{
    width:100vw;
    margin-left:calc(50% - 50vw);
  }

  /* cases (specs Kulwant): gallery gestapeld zoals mobiel (hoofdfoto als
     eigen rij, twee kleine eronder) — kolommen 45% gallery / 55% tekst */
  .case-gallery{
    flex:0 0 45%;
    width:45%;
    flex-direction:column;
  }
  .case-text{
    flex: 0 0 50%;
    width: 100%;
    min-width:0;
  }
  .case-img.case-img-main{
    width:100%;
    height:260px;
  }
  .case-img-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    width:100%;
  }
  .case-img{
    width:100%;
    height:120px;
  }

  /* topbar-items groter (specs Kulwant, 769-991-ronde) */
  .topbar li{
    font-size:15px;
  }

  /* topbar-marquee (zelfde mechaniek als mobiel; custom.js dupliceert de
     items en zet .topbar-marquee — gate staat op ≤520 én 768-991) */
  .topbar{
    position:sticky /* was relative; sticky chrome 2026-08-12 — anker voor :after blijft werken */;
    overflow:hidden;
  }
  .topbar:after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:56px;
    background:linear-gradient(to left, var(--dark), rgba(40,18,27,0));
    pointer-events:none;
  }
  .topbar ul{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .topbar ul::-webkit-scrollbar{
    display:none;
  }
  .topbar li{
    white-space:nowrap;
    flex:0 0 auto;
  }
  .topbar ul.topbar-marquee{
    overflow:visible;
    width:max-content;
    gap:0;
    padding-inline:0;
    animation:sokkiesTopbarMarquee 18s linear infinite;
  }
  .topbar ul.topbar-marquee li{
    margin-right:34px;
  }
  @keyframes sokkiesTopbarMarquee{
    to{ transform:translateX(-50%); }
  }

  /* containers (specs Kulwant): 100% breed met VASTE 40px-gutters
     i.p.v. percentages (overschrijft de oude 94%/98%-regels) */
  .container,
  .container-md{
    max-width:100%;
    width:100%;
    padding-left:40px;
    padding-right:40px;
  }
  header .container{
    max-width:100%;
  }
  /* nav-wrap is absolute met width:100% — bij de padding-container
     resolvet dat tegen de padding-box en schoof hij 40px naar rechts */
  header .nav-wrap{
    width:calc(100% - 80px);
  }
  /* geneste containers niet dubbel padden (hero heeft container-in-container) */
  .container .container,
  .container .container-md,
  .container-md .container{
    padding-left:0;
    padding-right:0;
  }

  /* logo compacter (specs Kulwant; .navbar-prefix wint van de
     104px-regel in de drawer-band die later in het bestand staat) */
  .navbar .logo{
    width:96px;
  }
  /* icon-knoppen 44px met 16px-iconen (specs Kulwant; .navbar-prefix
     wint van de 40px-regel in de drawer-band) */
  .navbar .icon-btn{
    width:44px;
    height:44px;
  }
  .navbar .icon-btn svg{
    width:16px;
    height:16px;
  }
  /* taalknop 68x68 met 20px-icoon (specs Kulwant) */
  .lang .globe{
    width:68px;
    height:68px;
  }
  .lang .globe svg{
    width:20px;
    height:20px;
  }
  /* menu-toggle 68x68, hamburger-glyph 28x16 (3 balkjes van 2px + 5px gap) */
  .navbar .nav-burger{
    width:68px;
    height:68px;
    gap:5px;
  }
  .navbar .nav-burger span{
    width:28px;
  }
  .navbar.menu-open .nav-burger span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }
  .navbar.menu-open .nav-burger span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }

  /* hero (specs Kulwant): banner pt 170 / pb 0, kop 58 (clamp zat op
     6vw=54), usps onder elkaar op 17px/25px zonder extra marges ertussen */
  .banner-section{
    padding-top:170px;
    padding-bottom:0;
  }
  .banner-section h1{
    font-size:var(--h1-font-size);
  }
  .usps{
    flex-direction:column;
    align-items:center;
    gap:0;
    margin-top:30px;
    margin-bottom:30px;
  }
  .usps span{
    font-size:var(--body-lg-font-size);
    line-height:25px;
    margin:0;
    padding:0;
  }

  /* hero-CTA's: 44px hoog, 15px (specs Kulwant) */
  .hero-btns .cta,
  .hero-btns .cta-light{
    height:44px;
    font-size:15px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
  }
  /* hero-slider zoals mobiel: actieve PAAR gecentreerd met 5%-slivers —
     hier met swiper-gap 20 (breakpoint 768) i.p.v. 14 op mobiel */
  .gallery .gallery-swiper{
    width:calc(90vw - 40px);
    margin-inline:auto;
    overflow:visible;
  }
  .gallery-swiper .swiper-slide{
    width:calc(50% - 10px);
    height:360px;
  }
  /* spec 2026-08-13 */
  .brands h2{
    margin-bottom:20px;
  }
  /* stagger op runtime-klassen (de loop husselt de DOM; nth-child-offsets
     van de basis uit) — zelfde patroon als mobiel */
  .gallery-swiper .swiper-slide:nth-child(3n + 1),
  .gallery-swiper .swiper-slide:nth-child(3n + 2),
  .gallery-swiper .swiper-slide:nth-child(3n){
    transform:none;
  }
  .gallery-swiper .swiper-slide{
    transition:transform .6s;
  }
  .gallery-swiper .swiper-slide.swiper-slide-prev,
  .gallery-swiper .swiper-slide.swiper-slide-next{
    transform:translateY(24px);
  }
  .gallery-swiper .swiper-slide.swiper-slide-active,
  .gallery-swiper .swiper-slide.swiper-slide-next + .swiper-slide{
    transform:translateY(-24px);
  }

  /* impact zoals mobiel (specs Kulwant): stats op één regel links,
     beschrijving uitgelijnd op de cijfers, gallery plat en 120vw
     gecentreerd, chips 2 kolommen — plus tablet-specifieke overrides
     (kolomlayout, 575px-gallery en verborgen 3e marquee ongedaan) */
  .brands{
    margin-bottom:0;
  }
  .impact{
    margin-top:40px;
    padding:60px 0 40px;
  }
  .impact:before{
    background-size:950px auto;
  }
  .impact-inner{
    flex-direction:column;
    align-items:center;
    overflow:visible;
    height:auto;
    gap:28px;
  }
  .impact-left{
    max-width:100%;
    text-align:left;
    width:100%;
  }
  .stat-arrow{
    margin-top: 18px;
  }
  .stat-arrow svg{
    width:15px;
    height:auto;
  }
  .impact .impact-left ul{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:12px;
    margin-bottom:20px;
    justify-content: space-between;
  }
  .impact .impact-left ul li{
    justify-content:flex-start;
    flex:0 1 auto;
    min-width:0;
  }
  .impact .impact-left p{
    margin:0;
    padding-left:29px;
  }
  .stat-num{
    font-size:58px;
  }
  .stat-label{
    font-size:13px;
    white-space:nowrap;
  }
  .impact-gallery .v-swiper:nth-child(3){
    display:block;
  }
  .v-swiper .swiper-slide{
    width:100%;
    height:220px;
    border-radius:12px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin-top:80px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul li{
    width:auto;
    min-width:0;
    height:104px;
    justify-content:center;
    text-align:center;
  }
  .feat-icon{
    width:40px;
    height:40px;
  }
  .feat-icon svg,
  .feat-icon img{
    width:40px;
    height:40px;
  }
  .feat-label{
    font-size:17px;
    white-space:normal;
  }

  /* collectie (specs Kulwant): horizontale scroll-rij zoals mobiel,
     2 kaarten volledig + 3e voor 25% zichtbaar */
  .collection{
    padding-top:70px;
  }
  .collection-grid{
    display:flex;
    overflow-x:auto;
    gap:16px;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; /* scrollbar verborgen (specs Kulwant) */
  }
  .collection-grid::-webkit-scrollbar{
    display:none;
  }
  .collection-card{
    flex:0 0 calc((100% - 32px) / 2.25);
    height:auto;
  }
  /* basis-foot is 70px (desktop één rij) — knipte de Bekijk-knop af */
  .collection-card-foot{
    height:auto;
  }

  /* process (specs Kulwant): stappen 2 rijen x 2 kolommen */
  .process-steps{
    grid-template-columns:repeat(2, 1fr);
    gap:40px 24px;
  }

  /* gift (specs Kulwant): horizontale scroll-rij, 2 kaarten volledig +
     3e voor 25% zichtbaar, scrollbar verborgen */
  .gift-grid{
    display:flex;
    overflow-x:auto;
    gap:16px;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .gift-grid::-webkit-scrollbar{
    display:none;
  }
  .gift-card{
    flex:0 0 calc((100% - 32px) / 2.25);
    height:auto;
  }

  .gift-nav,
  .collection-nav{
    display:flex; /* pijlen aan bij de scroll-rijen */
  }
  /* gift- en collectierij full-width zonder zijpadding (specs Kulwant):
     via de vaste 40px-gutters naar buiten breken — geen vw nodig */
  .collection-grid,
  .gift-grid{
    width:calc(100% + 80px);
    margin-left:-40px;
    padding-left:40px; /* eerste kaart lijnt uit met de kop; rij blijft
                          rechts full-bleed en scrollt links de rand in */
  }
  /* gift-pijlen rechts naast de kop (specs Kulwant) */
  .gift .container{
    position:relative;
  }
  .gift-nav{
    position:absolute;
    top:0;
    right:40px;
    margin-top:0;
  }

  /* faq (specs Kulwant): één kolom i.p.v. twee, sectie pt 100 */
  .faq{
    padding-top:100px;
    padding-bottom:220px;
  }
  .faq-grid{
    grid-template-columns:1fr;
    gap:30px;
  }
  .faq-right{
    padding-top:0; /* desktop-uitlijnoffset zou dode ruimte geven */
  }

  /* footer-structuur tablet (specs Kulwant):
     rij 1: logo+tekst links | certs rechts
     rij 2/3: Sokkies-links links | contactinfo rechts
     rij 4: nieuwsbrief links | socials rechts — daarna partners.
     .footer-contact op display:contents zodat zijn onderdelen (h5,
     contactrij, socials, news) los in het grid geplaatst kunnen worden. */
  .footer-grid{
    display:grid;
    grid-template-columns:6fr 4fr; /* 60/40 (fr = gap-veilig) */
    column-gap:40px;
    padding-top:40px;
    padding-bottom: 40px;
  }
  .footer-brand{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:6fr 4fr; /* zelfde 60/40 als de rijen eronder */
    column-gap:40px;
    padding:0 0 40px;
    border-bottom:1px solid rgba(255,255,255,.35);
    margin-bottom:40px;
  }
  .footer-brand .footer-logo{
    grid-column:1;
  }
  .footer-brand p{
    grid-column:1;
    margin-bottom:0;
    max-width:none;
  }
  .footer-brand .footer-certs{
    grid-column:2;
    grid-row:1 / span 2;
    align-self:start;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  .footer-certs-list{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .footer-links{
    grid-column:1;
    grid-row:2 / span 2;
    padding:0;
    border:0;
  }
  .footer-contact{
    display:contents;
  }
  .footer-contact > h5{
    grid-column:2;
    grid-row:2;
    margin-bottom:20px;
  }
  .footer-contact-row{
    grid-column:2;
    grid-row:3;
    flex-direction:column;
    gap:24px;
    margin-bottom:0;
  }
  .footer-news{
    grid-column:1;
    grid-row:4;
    margin-top:40px;
  }
  .footer-socials{
    grid-column:2;
    grid-row:4;
    margin:40px 0 0;
    align-self:center;
  }
  .footer-partners{
    margin-top:0px;
    margin-bottom: 40px;
  }

  /* betaalstrip (specs Kulwant) */
  .footer-pay-group{
    padding-top:40px;
    text-align:center;
    justify-content:center;
  }
  /* verzendpartners in twee rijen: label boven, logo's eronder */
  .footer-ship{
    flex-direction:column;
    align-items:center;
    gap:20px;
    padding-top: 20px;
    padding-bottom: 40px;
  }

  /* reviews + legal (specs Kulwant) */
  .footer-review{
    margin-bottom:20px;
  }
  .footer-legal{
    padding-top:20px;
    line-height:26px;
  }

  /* calculator (specs Kulwant) */
  .calc-mid{
    grid-template-columns:60% 40%;
  }
  .footer-reviews{
    padding-bottom:20px;
  }

  /* promo-float 25% kleiner (schaal = font+breedte+marges+afbeelding ineens) */
  .promo-float{
    transform:scale(.75);
    transform-origin:left bottom;
  }

  /* promo-float: link en beschrijving iets groter (compenseert de
     0.75-schaal; specs Kulwant) */
  .promo-float-body p{
    font-size:17px;
  }
  .promo-float-link{
    font-size:17px;
  }

  /* ═══ Collectie — GEKOPIEERD UIT DE 992-1279-BAND (verzoek Kulwant
     2026-08-03); band-eigen fijnslijpen volgt ═══ */
  /* Collectie-hero (specs Kulwant 2026-08-03) */
  .coll-hero{
    height:auto;
    padding-bottom:0;
  }
  .coll-hero-inner{
    grid-template-columns:1fr;
  }
  .coll-hero-left{
    gap:45px;
  }
  .coll-hero-btns{
    margin-bottom:45px;
  }
  .coll-gallery-main {
    width: 100vw;
    overflow: hidden;
    margin-left: -40px;
    height: 540px;
    margin-bottom: 50px;
  }
  .coll-hero-gallery{
    height: 670px;
    top: -60px;
    margin-top: 0px;
    width: 85%;
    margin: 0px auto;
  }
  .coll-hero-left p{
    font-size:var(--body-lg-font-size);
    max-width:520px;
  }
  .coll-hero-content ul{
    gap:12px 20px;
  }
  .coll-hero-content ul li{
    font-size:var(--body-lg-font-size);
  }
  .ch-swiper .swiper-slide{
    height:320px;
  }
  .types-section{
    padding-top:80px;
    padding-bottom:60px;
  }
  .type-card-img{
    height:338px;
  }
  .type-card-content h3{
    font-size:var(--h5-font-size);
  }
  .type-card-btn{
    height:44px;
    font-size:17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .compare-inner-main{
    background-position:right top;
    padding-top:120px;
  }
  .compare-floating-elements{
    width:168px;
    top: -2%;
  }
  .compare-table{
    width:1320px;
    table-layout:fixed;
  }
  .compare-table thead th:first-child,
  .compare-table tbody th{
    width:250px;
  }
  /* eigen scrollbar-design (spec Kulwant): witte pill op transparant-witte
     track, 20px onder de tabel */
  .compare-scroll{
    padding-bottom:20px;
    scrollbar-width:thin;
    scrollbar-color:#fff rgba(255,255,255,.35);
  }
  .compare-scroll::-webkit-scrollbar{
    height:10px;
  }
  .compare-scroll::-webkit-scrollbar-track{
    background:rgba(255,255,255,.35);
    border-radius:20px;
  }
  .compare-scroll::-webkit-scrollbar-thumb{
    background:#fff;
    border-radius:20px;
  }
  .compare-inner-main h2{
    font-size:var(--h2-font-size);
  }
  .bg-yellow-shape{
    background-position:right top;
    top:0px;
    background-size:182%;
  }
  .calculator-bg{
    padding-top:115px;
    background-color:#efe7dc;
  }
  .calculator-bg:before{
    height:40%;
  }
  .calc-panel h3{
    font-size:var(--h3-font-size);
  }
  .process.process-split{
    padding-top:80px;
  }
  .process-left h2{
    font-size:var(--h2-font-size);
    text-align:center;
  }
  .process-split-inner{
    grid-template-columns:1fr;
    gap:60px;
  }
  .process-left{
    width:66%;
    margin-inline:auto;
  }
  .process-collage img{
    height:auto;
    aspect-ratio:1/1;
  }
  .process-left ul li{
    padding:20px 0 25px;
  }
  .process-btn{
    justify-content:center;
  }
  .process-btn a{
    margin-inline-start:0;
  }
  .case-inner-page{
    overflow-x:clip;
  }
  .case-inner-page:before{
    content:"";
    background:url(../media/sock-element-up.svg) no-repeat center / contain;
    width:176px;
    height:117px;
    top:0px;
  }
  .case-inner-page:after{
    content:"";
    background:url(../media/sock-element-up.svg) no-repeat center / contain;
    width:176px;
    height:117px;
    bottom:-10%;
    right:0%;
  }
  .case-text h3{
    font-size:var(--h3-font-size);
  }

  /* ═══ Product-detail — GEKOPIEERD UIT DE 992-1279-BAND (verzoek Kulwant
     2026-08-05); band-eigen fijnslijpen volgt ═══ */
  .usecase-card-small{
    width:40.5%;
    flex-shrink:0;
  }
  .usecases-cards-inner > .usecase-card:not(.usecase-card-small){
    flex:1;
    min-width:0;
  }
  .usecase-img-lg{
    width:100%;
    height:318px;
    border-radius:15px;
  }
  .cases-pdp.cases:before{
    height:100%;
    background-position:70% top;
  }
  .cases.cases-pdp{
    padding-top:220px;
    padding-bottom:20px;
  }
  .case-duddle-icons .dubble-right{
    display:none;
  }
  .cases.cases-pdp .case-duddle-icons .dubble-left{
    width:136px;
    top:-28%;
  }
  .case-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .testimonial.testimonial-yellow{
    padding-bottom:100px;
  }
  .brand-light .brand-duddle-icons .dubble-left{
    width:80px;
    top:-120px;
  }
  .brand-light .brand-duddle-icons .dubble-right{
    width:80px;
    bottom:10%;
  }
  .brand-intro.brand-light{
    padding-top:80px;
    padding-bottom:150px;
  }
  .versus-table{
    max-width:100%;
  }
  /* PDP-hero (mock Kulwant 2026-08-04, 1:1 gemeten op 1320-container):
     galerij 590+110, thumbs 110/9, infokolom vult rest (~535), staffel-
     pitch 35, CTA's 49/45; fonts volgen de tokens */
  .prod-top{
    display:flex;
    flex-direction:column;
    gap:0;
    /* pin: basis-margin ging 2026-08-12 naar 50px (1920) — band houdt 20 */
    margin-top:20px;
  }
  /* Volgorde volgens het 768-ontwerp: kop, tekst, beoordeling, galerij,
     USP-strip, staffel, knoppen. De strip staat in de DOM NA .prod-top -
     dat is met opzet, want binnen de galerijkolom viel hij op 1920 over de
     sampleknop. Om hem hier ertussen te krijgen zonder de DOM te wijzigen
     wordt .prod-top doorzichtig gemaakt: zijn kinderen worden flex-items
     van .container en de order-waarden die er al stonden bepalen de rij.
     De strip had zelf al order 5, precies de plek uit het ontwerp. */
  .prod-hero .container{
    display:flex;
    flex-direction:column;
  }
  .prod-top{
    display:contents;
  }
  /* .prod-top droeg de 20px lucht onder het kruimelpad; met display:contents
     valt die weg, dus staat hij nu op de titel zelf. */
  .prod-info h1{
    margin-top:20px;
  }
  .prod-gallery-col,
  .prod-info{
    display:contents;
  }
  /* volgorde per tablet-mock: titel/tekst/rating -> galerij -> usps ->
     staffel -> knoppen */
  .prod-hero .breadcrumb{
    padding-top:10px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul{
    margin-top:40px;
  }
  .prod-info h1{ order:1; margin-bottom:12px; }
  .prod-info > p{ order:2; }
  /* Ook de blokken die een redacteur via de wysiwyg in Beschrijving kan
     zetten meenemen: zonder eigen order krijgen ze 0 en springen ze op
     mobiel boven de titel. */
  .prod-info > ul,
  .prod-info > ol,
  .prod-info > table{ order:2; }
  .prod-rating{ order:3; }
  .prod-gallery{ order:4; }
  .pdp-usps-main{ order:5; }
  .prod-price-title{ order:6; margin-bottom:18px; }
  .staffel-table.prod-staffel{ order:7; width:100%; margin-bottom:35px; }
  .prod-actions{
    order:8;
    display:flex;
    flex-direction:row-reverse;
    gap:12px;
    width:100%;
  }
  .prod-actions .cta,
  .prod-actions .cta-light{
    flex:1;
  }
  .prod-gallery{
    display:block;
    position:relative;
    width:100%;
  }
  .prod-main{
    width:calc(100% - 126px);
    height:auto;
    aspect-ratio:1/1;
  }
  .prod-thumbs{
    --thumb-gap:9px;
    gap:var(--thumb-gap);
  }
  .prod-thumb{
    height:auto;
    border-radius:15px;
  }
  .prod-thumbs{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:110px;
    display:grid;
    /* Vaste rijhoogte in plaats van 1fr. Met minmax(0,1fr) werd de volle
       kolomhoogte over ALLE thumbs verdeeld, dus bij 10 stuks bleef er 41px
       per thumb over en werden ze platgedrukt (melding Kulwant 2026-08-25,
       kerstsokken op 768px). Deze berekening geeft precies de hoogte die 5
       thumbs nu al hadden — 5 rijen plus 4 gaps van 15px — dus bij 5 of
       minder verandert er niets en scrollt de kolom pas daarboven. Zelfde
       aanpak als in de >=992-band. */
    grid-auto-rows:calc((100% - 4 * var(--thumb-gap)) / 5);
    overflow-y:auto;
    /* zelfde huisstijl-scrollbar als in de >=992-band */
    /* Geen zichtbare scrollbar: de pijlen wijzen de weg en de
       halve zesde thumb laat zien dat er meer is. */
    scrollbar-width:none;
    --thumb-gap:15px;
    gap:var(--thumb-gap);
  }
  /* Safari kent scrollbar-width niet, die heeft deze regel nodig. */
  .prod-thumbs::-webkit-scrollbar{ display:none; }
  /* Meer dan vijf foto's: 5,5 rij in dezelfde kolomhoogte, zodat de
     zesde half in beeld staat en te zien is dat de strip scrolt (R2-9).
     De klasse komt uit de template, die de foto's gewoon telt. */
  .prod-thumbs.heeft-meer{
    grid-auto-rows:calc((100% - 5 * var(--thumb-gap)) / 5.5);
  }
  .prod-thumb{
    min-height:0;
  }
  .pdp-usps-main{
    margin-top:32px;
    margin-bottom:63px;
    width:100%;
    /* pin: basis centreert 2026-08-12 op de pagina (left-calc) — alleen 1920 */
    left:0;
  }
  /* pin: basis-padding-top ging 2026-08-12 naar 120px (1920) — band houdt 60 */
  .promises{
    padding-top:60px;
    margin-bottom: 20px;
  }

  .pdp-usps-main ul{
    margin-top:0;
    justify-content:center;
    flex-wrap:nowrap;
    gap:10px 30px;
  }
  .pdp-usps-main ul li{
    white-space:nowrap;
  }
  .prod-rating{
    margin-bottom:33px;
  }
  .prod-info p{
    margin-bottom:20px;
  }
  .prod-info .staffel-row{
    padding:5px 20px;
  }
  .prod-info .staffel-row.staffel-head-row{
    padding:6px 20px;
  }
  .prod-actions .cta{
    height:49px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .prod-actions .cta-light{
    height:45px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .specs-grid{
    grid-template-columns:1fr;
  }
  .weave-inner h2{
    margin-bottom:60px;
  }
  /* spec 2026-08-13 */
  .promises-grid{
    gap:10px;
  }
  .specs-section{
    padding-top:120px;
    position:relative;
    /* pin: basis-padding-bottom ging 2026-08-12 naar 50px (1920) — band houdt 70 */
    padding-bottom:70px;
  }
  .specs-section:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:45%;
    background:var(--blue);
    z-index:0;
  }
  .specs-section .container{
    position:relative;
    z-index:1;
  }
  .promise-card{
    padding:25px;
  }
  .weave{
    padding-top:30px;
  }
  .weave-img{
    height:240px;
    border-radius:0px 0px 15px 15px;
  }
  .weave-grid{
    gap:10px;
  }
  .weave-body h5{
    font-size:calc(var(--h5-font-size) - 2px);
  }
  .weave-tag{
    font-size:var(--body-sm-font-size);
  }
  .weave-inner:before{
    bottom:-1%;
    background-size:150%;
    background-position:center bottom;
  }
  .weave-body{
    padding:25px 20px;
  }
  /* versus-tabel per tablet-mock: label 58% / SOKKIES 20% / De rest 22% */
  .versus-table{
    table-layout:fixed;
  }
  .versus-table thead th:nth-child(1){ width:58%; }
  .versus-table thead th:nth-child(2){ width:20%; }
  .versus-table thead th:nth-child(3){ width:22%; }
  .versus-dubble-left{
    width:170px;
    top:-17%;
  }
  .specs-duddle-icons .dubble-right{
    width:150px;
    top: -1%;
    right: 1%;
  }
  .specs-duddle-icons .dubble-left{
    width: 140px;
    bottom: -23%;
    left: 66%;
  }
  .versus{
    padding-top:60px;
    width:100%;
  }
  .cards-suggestion{
    padding-top:80px;
  }
  .design-now{
    padding-top:60px;
    padding-bottom:300px;
  }
  .design-bg-union{
    bottom:-1px;
    background-image:url(../media/configurator-bg-ipad.png);
    aspect-ratio:769/1203;
  }
  .design-duddle-sock{
    display:none;
  }
  .conf-preview{
    max-width:860px;
  }
  .conf-preview-card{
    height:600px;
  }
  .usecases{
    padding-top:100px;
    padding-bottom:40px;
  }
  .usecases-head{
    padding:0 0 40px;
  }
  .usecases-head h2{
    text-align:center;
    margin-bottom:0px;
  }
  .usecases-cards-inner{
    gap:22px;
  }
  .usecases-masonry{
    gap:30px;
    grid-template-columns:1fr;
  }
  .usecase-body h5{
    font-size:calc(var(--h5-font-size) - 3px);
  }
  .usecases-outer-right{
    gap:30px;
  }
  .usecase-img-md{
    border-radius:15px;
    height:222px;
  }
  /* ═══ Configurator — GEKOPIEERD UIT DE 992-1279-BAND (verzoek Kulwant
     2026-08-06); band-eigen fijnslijpen volgt ═══ */
  .conf-preview-card img{
    border-radius:25px;
  }
  .banner-section.configurator-banner{
    padding-bottom:60px;
  }
  .conf-hero-btns{
    margin-bottom:0px;
  }
  .configurator-section ul{
    gap: 30px 16px;
    display: grid;
    grid-template-columns: auto auto auto;
  }
  .conf-works .process-split-inner{
    gap:60px;
    grid-template-columns:1fr;
  }
  /* Collectie-tabletregel .process-left{66%} geldt hier niet */
  .conf-works .process-left{
    width:100%;
  }
  .conf-works .process-left ul{
    width:100%;
  }
  .conf-check{
    width:100%;
  }
  .conf-works .process-collage{
    width:100%;
  }
  /* collage: page-scoped via .conf-works (gedeeld met Collectie/toepassingen);
     base .conf-works-inner heeft align-items:end — hier boven uitgelijnd */
  .conf-works .process-collage{
    align-self:start;
  }
  .conf-works .process-collage img{
    height:220px;
  }
  .conf-types{
    padding-top:90px;
    padding-bottom:40px;
  }
  .conf-bg{
    background-size:cover;
    height:1280px;
    top:-48%;
    background-position:90% top;
  }
  /* cases-solid-gescoped: PDP heeft dezelfde duddle-structuur */
  .cases.cases-solid{
    padding-top:100px;
  }
  .cases.cases-solid .case-duddle-icons .dubble-left{
    width:210px;
    top:-12%;
  }
  .case-sock-right{
    width:210px;
    top: 22%;
  }
  .cases.conf-designed{
    padding-top:120px;
    padding-bottom:60px;
  }
  /* testimonial-light-gescoped: .testimonial is gedeeld (Collectie final, PDP-yellow) */
  .testimonial.testimonial-light{
    padding-top:50px;
    padding-bottom:90px;
  }
  .brand-intro-yellow .brand-duddle-icons .dubble-left{
    width:81px;
    top:-16%;
  }
  .brand-intro-yellow .brand-duddle-icons .dubble-right{
    width:81px;
    bottom:2%;
  }
  /* ═══ Werkwijze — GEKOPIEERD UIT DE 992-1279-BAND (verzoek Kulwant
     2026-08-06); band-eigen fijnslijpen volgt ═══ */
  .steps-section{
    padding:90px 0px 70px;
  }
  .step-card-img{
    height:380px;
    border-radius:25px;
  }
  .step-card-body{
    gap:40px;
    padding:0px 20px;
  }
  .cases.cases-bg-pink{
    padding-top:90px;
    padding-bottom:0px;
  }
  /* compound (conventie): .calculator is gedeeld met home */
  .calculator.calculator-pink{
    padding-top:80px;
  }
  .cases.cases-bg-pink:before{
    height:85%;
    top:-50px;
  }
  /* ═══ Reviews-en-cases — GEKOPIEERD UIT DE 992-1279-BAND (verzoek Kulwant
     2026-08-06); band-eigen fijnslijpen volgt ═══ */
  .case-card-img{
    height:280px;
  }
  .case-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .simple-hero-content p{
    width:60%;
  }
  .chip{
    padding:8px 14px;
  }
  .case-grid-section{
    padding:70px 0px 0px;
  }
  .brands.brands-beige{
    padding-bottom:0px;
  }
  /* ═══ Reviews-en-cases-detail — GEKOPIEERD UIT DE 992-1279-BAND (verzoek
     Kulwant 2026-08-06); band-eigen fijnslijpen volgt ═══ */
  .sock-duddle-object{
    display:none;
  }
  .impact-inner.case-story-inner .impact-gallery{
    width:100%;
  }
  .case-specs{
    padding:0px 0 40px;
  }
  .case-spec{
    border-radius:15px;
    padding:15px 20px;
    height:80px;
    gap:6px;
  }
  .case-specs-grid{
    gap:10px;
  }
  .case-video{
    padding:140px 0 110px;
  }
  .case-bg-union{
    top:-40%;
    height:1019px;
    background-position:left 46% top;
    background-size:184%;
  }
  .case-result{
    padding-top:40px;
    padding-bottom:40px;
  }
  .case-others{
    padding:90px 0px;
  }
  .case-video-inner{
    height:410px;
    max-width:100%;
  }
  .case-video-doodle-r{
    right:5%;
    top:25%;
    width:200px;
  }
  .case-result-grid{
    gap:12px;
  }
  .case-result-grid img{
    height:340px;
  }
  .case-quote{
    max-width:100%;
  }
  .case-result-bg{
    height:75%;
  }
  /* ═══ Offerte — GEKOPIEERD UIT DE 992-1279-BAND (verzoek Kulwant
     2026-08-07); band-eigen fijnslijpen volgt ═══ */
  .quote-wrap{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    align-items:start;
  }
  /* aside 2-koloms (mock 2026-08-07): checks links | verticale lijn |
     direct contact rechts — structurele selectors (template-widget) */
  .quote-aside{
    padding:20px;
    display:grid;
    grid-template-columns:1fr 1px 1fr;
    column-gap:45px;
    row-gap:15px;
    align-items:start;
  }
  .quote-aside h3{
    grid-column:1;
    grid-row:1;
    margin:0;
  }
  .quote-aside ul:first-of-type{
    grid-column:1;
    grid-row:2;
  }
  .quote-aside-divider{
    grid-column:2;
    grid-row:1 / 3;
    width:1px;
    height:100%;
    margin:0;
  }
  .quote-aside h4{
    grid-column:3;
    grid-row:1;
    margin:0;
  }
  .quote-aside ul:last-of-type{
    grid-column:3;
    grid-row:2;
  }
  .quote-card{
    padding:20px;
  }
  .quote-section{
    margin-top:20px;
  }
  /* usps één regel — offerte-banner-marker (usps is gedeeld met home) */
  .banner-section.offerte-banner .usps{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 20px;
  }
  .banner-section.offerte-banner .usps span{
    white-space:nowrap;
  }
  .type-picker{
    gap:20px 10px;
    grid-template-columns:repeat(4,1fr);
  }
  .application-section:after{
    width:192px;
    bottom:-27%;
  }
  .application-bg-shape{
    height:630px;
    background-position:center left 25%;
  }
  .application-steps{
    gap:20px;
    max-width:82%;
  }
  .application-section{
    padding:40px 0px 80px;
  }
  .banner-section.offerte-banner{
    padding-bottom:60px;
  }
  /* alleen deze pagina: faq-light is offerte-uniek (band-generiek .faq = 220) */
  .faq.faq-light{
    padding-bottom:80px;
  }
  .application-sample-request .application-steps{
    max-width:100%;
  }
  /* ═══ Bedankt — GEKOPIEERD UIT DE 992-1279-BAND (verzoek Kulwant
     2026-08-07); band-eigen fijnslijpen volgt ═══ */
  .follow-outer-main{
    height:860px;
  }
  .thanks-status{
    padding:60px 0 0px;
  }
  .thanks-steps{
    margin-bottom:60px;
    gap:40px;
  }
  .wait-img{
    height:280px;
  }
  .follow-inner{
    flex-wrap:wrap;
    gap:40px;
  }
  .newsletter-card{
    padding:35px;
  }
  /* ═══ Toepassingen — GEKOPIEERD UIT DE 992-1279-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .usecase-why{
    padding-bottom:0px;
    padding-top:70px;
  }
  .usecase-why ul{
    grid-template-columns:repeat(2,1fr);
  }
  .usecases-flat .usecase-img{
    height:180px;
  }
  .usecases-flat .usecase-card{
    padding:8px;
    border-radius:15px;
  }
  .usecases-grid{
    gap:10px;
  }
  .toepassingen .collection-beige{
    margin-top:20px;
  }
  .toepassingen .collection-beige:before{
    top:-460px;
  }
  .toepassingen .cases{
    padding-top:230px;
  }
  .toepassingen .cases:before{
    background-position:left 80% top -120px;
  }
  .toepassingen .cases:after{
    width:220px;
  }
  .toepassingen .calculator-bg:before{
    background-position:33% bottom;
  }
  .toepassingen .uc-bg-yellow-shape{
    height:520px;
  }
  .toepassingen .brand-light .brand-duddle-icons .dubble-left{
    width:80px;
    top:-50px;
  }
  .toepassingen .brand-light .brand-duddle-icons .dubble-right{
    width:80px;
  }
  /* process-split volgt hier de generieke gestapelde tabletlayout
     (mobiele stijl, band-tokens) — de 992-override is bewust verwijderd */
  .toepassingen .brand-intro.brand-light{
    padding-top:90px;
    padding-bottom:100px;
  }
  /* ═══ Veelgestelde vragen — GEKOPIEERD UIT DE 992-1279-BAND (verzoek
     Kulwant 2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .faq-cat-group{
    margin-bottom:40px;
  }
  .faq-cats{
    padding-top:40px;
  }
  .faq-cats-filter{
    gap:5px;
  }
  /* page-scoped: .chip is gedeeld met reviews-en-cases (daar 8/14 in deze band) */
  .faq-page .chip{
    padding:10px 18px;
  }
  .faq-page .faq-item.is-open .faq-q{
    border-bottom:none;
  }
  /* ═══ Over ons — GEKOPIEERD UIT DE 992-1279-BAND (verzoek Kulwant
     2026-08-10); de duurz-regels staan in het SEED-blok hieronder;
     band-eigen fijnslijpen volgt ═══ */
  .timeline{
    padding-bottom:50px;
  }
  /* Hero-gallery: 2 slides volledig + 2 half zichtbaar — zie 1440-band */
  .over-ons .gallery-swiper .swiper-slide{
    width:calc((100vw - 60px) / 3);
    height:340px;
  }
  .over-ons .gallery-swiper{
    width:calc(100% + (100vw - 60px) / 3 + 40px);
    margin-left:calc((100vw - 60px) / -6 - 20px);
    padding-top:0px;
  }
  /* stagger OMLAAG gedraaid: met pt 0 knipte .gallery (overflow:hidden) de
     -25px-slides onvermijdelijk af — zelfde compositie, alles binnen de box:
     hoge slides flush boven (gap 0 naar de hero), rest zakt +25px */
  .over-ons .gallery-swiper .swiper-slide{
    transform:translateY(25px);
  }
  .over-ons .gallery-swiper .swiper-slide:nth-child(3n + 1){
    transform:translateY(0);
  }
  .overons-story{
    padding:40px 0 0px;
  }
  .overons-story-inner{
    gap:30px;
  }
  .story-collage{
    gap:10px;
  }
  .story-collage-right{
    gap:10px;
  }
  .overons-values{
    padding:200px 0 100px;
  }
  .overons-values h2{
    margin-bottom:40px;
  }
  .overons-values ul{
    gap:40px;
    grid-template-columns:repeat(2,1fr);
  }
  .over-ons .impact:before{
    top:-80px;
  }
  .overons-reviews{
    padding:80px 0px;
  }
  .duurz-doodle{
    width:140px;
    top:-68px;
    left:70%;
  }
  .duurz-text h3{
    margin-bottom:10px;
  }
  .over-ons .cta-final-feet{
    width:190px;
    top:-200px;
    right:26px;
  }
  .overons-duurz{
    padding-top:50px;
  }

  /* ═══ Over ons — SEED: duurz volgt de cases-sectie van home (verzoek
     Kulwant 2026-08-10); de rest van de pagina volgt in de bandronde ═══ */
  .duurz-inner{
    gap:50px;
    grid-template-columns:45% 1fr;
  }
  .duurz-collage{
    gap:20px;
    flex-direction:column;
  }
  .duurz-collage-col{
    gap:20px;
    /* de twee kleintjes naast elkaar in één rij (correctie Kulwant) */
    flex-direction:row;
  }
  .duurz-collage .img-lg{
    width:100%;
    height:260px;
  }
  .duurz-collage-col .img-sm{
    width:calc(50% - 10px);
    height:120px;
  }
  /* ═══ Duurzaamheid — GEKOPIEERD UIT DE 992-1279-BAND (verzoek Kulwant
     2026-08-10); dz-points-regels in het SEED-blok hieronder;
     band-eigen fijnslijpen volgt ═══ */
  .duurzaamheid .cta-final-feet{
    width:160px;
    top:-201px;
  }
  .dz-certs{
    padding-top:0px;
  }
  .dz-certs:before{
    background-size:cover;
    background-position:right 18% top;
    /* pin: basis-bottom ging 2026-08-12 naar -40px (1920) — band houdt 0 */
    bottom:0px;
  }
  /* Certs-menu als dropdown (mock 2026-08-10): intro centraal, absolute
     trigger-rij (60px gereserveerd — open lijst overlapt de panes) */
  .dz-certs .container > p{
    width:100%;
    text-align:center;
  }
  .dz-certs-inner{
    gap:30px;
    grid-template-columns:1fr;
    padding-top:60px;
  }
  .dz-certs-menu{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:5;
    background:var(--coral);
    border:1.5px solid #fff;
    border-radius:12px;
    overflow:hidden;
    padding-left:30px;
  }
  .dz-certs-menu li{
    display:none;
  }
  .dz-certs-panes{
    padding-top:50px;
  }
  .dz-pane{
    gap:40px;
    grid-template-columns:1fr 300px;
  }
  .dz-keur{
    padding-top:0px;
  }
  .dz-keur-grid{
    grid-template-columns:1fr;
  }
  .dz-certs-menu li:has(button.active),
  .dz-certs-menu.open li{
    display:block;
  }
  .dz-certs-menu button{
    border-top:0;
    padding:17px 48px 17px 18px;
  }
  .dz-certs-menu.open li + li button{
    border-top:1px solid rgba(255,255,255,.4);
  }
  .dz-certs-menu:after{
    content:"";
    position:absolute;
    top:24px;
    right:20px;
    width:14px;
    height:9px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 11.414 6.414'%3E%3Cpath d='M482.224,63.112l5,5,5-5' transform='translate(-481.517,-62.405)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events:none;
    transition:transform .2s;
  }
  .dz-certs-menu.open:after{
    transform:rotate(180deg);
  }

  /* ═══ Duurzaamheid — SEED: dz-points volgt overons-duurz/cases (verzoek
     Kulwant 2026-08-10); rest van de pagina volgt in de bandronde ═══ */
  .dz-points-inner{
    gap:40px;
    grid-template-columns:45% 1fr;
  }
  .dz-points .story-collage{
    flex-direction:column;
    gap:20px;
  }
  .dz-points .story-collage img{
    flex:0 0 auto;
  }
  .dz-points .story-collage .img-lg{
    order:-1;
    width:100%;
    height:260px;
  }
  .dz-points .story-collage .img-sm{
    width:100%;
    height:120px;
  }
  /* ═══ Waarom Sokkies — GEKOPIEERD UIT DE 992-1279-BAND (verzoek Kulwant 2026-08-10): ws-intro-grid volgt de usecases-masonry
     van de PDP (verzoek Kulwant 2026-08-10); kleine kaart per rijvariant
     (sm-lg: eerste, lg-sm: laatste), eigen offsets geneutraliseerd ═══ */
  /* ws-gets volgt de VOLLEDIGE process-split-familie (verzoek Kulwant
     2026-08-10): sectie, kop, lijstritme, collagebeelden, offsets */
  .ws-gets{
    padding-top:260px;
  }
  .ws-gets:before{
    background-position:right 30% top;
  }
  .ws-gets-num{
    flex:0 0 70px;
  }
  .ws-gets-left h2{
    font-size:var(--h2-font-size);
    text-align:center;
  }
  .ws-gets-left{
    width:66%;
    margin-inline:auto;
  }
  .ws-gets-left ol li{
    padding:20px 0 25px;
  }
  .ws-gets-imgcol img{
    height:auto;
    aspect-ratio:1/1;
  }
  .ws-gets-imgcol-offset{
    margin-top:0;
  }
  /* ws-gets-inner volgt process-split-inner (verzoek Kulwant 2026-08-10) */
  .ws-gets-inner{
    grid-template-columns:1fr;
    gap:60px;
  }
  /* bandbreed rolling feet (zie 992) — hier de gestapelde bandwaarde later */

  .ws-intro-grid{
    gap:30px;
    grid-template-columns:1fr;
  }
  .ws-intro-head{
    padding:0 0 40px;
    text-align:center;
    margin-bottom:20px;
  }
  .ws-intro-head h1{
    margin-bottom:16px;
  }
  .ws-intro-head p{
    margin:0 auto;
  }
  .ws-row-gap{
    margin-top:30px;
  }
  .ws-row{
    display:flex;
    gap:22px;
  }
  .ws-row-sm-lg > .ws-card:first-child,
  .ws-row-lg-sm > .ws-card:last-child{
    width:40.5%;
    flex-shrink:0;
  }
  .ws-row-sm-lg > .ws-card:last-child,
  .ws-row-lg-sm > .ws-card:first-child{
    flex:1;
    min-width:0;
  }
  .ws-row-sm-lg > .ws-card:last-child img,
  .ws-row-lg-sm > .ws-card:first-child img{
    width:100%;
    height:318px;
    border-radius:15px;
    object-fit:cover;
  }
  .ws-row-sm-lg > .ws-card:first-child img,
  .ws-row-lg-sm > .ws-card:last-child img{
    width:100%;
    height:222px;
    border-radius:15px;
    object-fit:cover;
  }
  .ws-card-offset{
    margin-top:0;
  }
  /* ═══ Partners — GEKOPIEERD UIT DE 992-1279-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  /* h5-herijkingen per band (afspraak — base's −12/−22 blijven staan) */
  .pt-perks-card h3{
    font-size:calc(var(--h5-font-size) - 1px);
  }
  .pt-perks{
    padding:80px 0 80px;
  }
  .pt-perks-grid{
    gap:15px;
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .pt-perks-card{
    padding:25px;
    border-radius:15px;
  }
  .pt-partners h2{
    font-size:calc(var(--h5-font-size) + 1px);
  }
  /* chips als scroll-rij (huispatroon: nowrap + verborgen scrollbar) */
  .pt-partners-chips{
    width:100%;
    max-width:100%;
    display:flex;
    flex-wrap:nowrap;
    /* flex-start: gecentreerd + overflow maakte de eerste chips onbereikbaar */
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .pt-partners-chips::-webkit-scrollbar{
    display:none;
  }
  .pt-partners-chips button{
    flex:0 0 auto;
  }
  .pt-partners-grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:15px 10px;
  }
  .pt-otp{
    padding-top:400px;
  }
  .pt-otp:before{
    height:300px;
    background-position:right 56% top;
    background-size:cover;
    /* pin: basis-top ging 2026-08-12 naar -130px (1920) — band houdt 0 */
    top:0px;
  }
  /* gestapeld: tekst boven, foto's onder — beide vol breed */
  .pt-otp-inner{
    grid-template-columns:minmax(0,1fr);
    gap:50px;
    align-items:center;
  }
  .pt-otp-text{
    order:-1;
    max-width:none;
  }
  .pt-otp-legs{
    width:440px;
    top:-180px;
  }
  .pt-otp-doodle{
    width:260px;
    top:230px;
  }
  .pt-faq{
    padding-top:230px;
  }
  .pt-faq:before{
    background-position:right 25% top;
    background-size:cover;
    top:-100px;
  }
  /* downloads: 2 kaarten boven (50/50), formulier-kaart vol breed eronder */
  .pt-dl-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .pt-dl-grid > :last-child{
    grid-column:1 / -1;
  }
  /* ═══ Downloads — GEKOPIEERD UIT DE 992-1279-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .dl-cards-grid{
    gap:20px 15px;
    /* minmax(0,1fr): kaart-mincontent duwde de grid anders uit beeld */
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  /* verticale kaart: beeld boven, body eronder */
  .dl-card{
    gap:20px;
    flex-direction:column;
    align-items:stretch;
    border-radius:15px;
    padding:15px;
  }
  .dl-card-img{
    flex:0 0 auto;
    width:100%;
  }  /* ═══ Contact — GEKOPIEERD UIT DE 992-1279-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .ct-form-grid{
    gap:20px 26px;
  }
  .ct-form-card{
    border-radius:20px;
    padding:40px 35px 35px;
  }
  /* gestapeld: beide secties vol breed */
  .ct-contact-inner{
    gap:30px;
    grid-template-columns:minmax(0,1fr);
  }
  /* ═══ Juridisch — GEKOPIEERD UIT DE 992-1279-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  /* index = zwevende balk onderin; klik op de kop toggelt de lijst */
  .jr-index{
    padding:18px 25px;
    position:fixed;
    bottom:20px;
    left:20px;
    right:20px;
    z-index:90;
    background:#fff;
    border-radius:12px;
    /* pin: basis werd 2026-08-12 sticky top:130 (1920) — onderbalk houdt top auto */
    top:auto;
  }
  .jr-index h3{
    margin:0;
    cursor:pointer;
  }
  .jr-index ol{
    display:none;
    margin-top:16px;
    max-height:50vh;
    overflow:auto;
  }
  .jr-index.open ol{
    display:block;
  }
  .jr-index:after{
    content:"";
    position:absolute;
    top:24px;
    right:25px;
    width:14px;
    height:9px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 11.414 6.414'%3E%3Cpath d='M482.224,68.8l5-5,5,5' transform='translate(-481.517,-62.7)' fill='none' stroke='%2328121b' stroke-linecap='round' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events:none;
    transition:transform .2s;
  }
  .jr-index.open:after{
    transform:rotate(180deg);
  }
  .jr-content{
    padding-top:40px;
    padding-bottom:70px;
  }
  /* gestapeld: tekst vol breed */
  .jr-inner{
    grid-template-columns:minmax(0,1fr);
    gap:0px;
  }
  .jr-body{
    grid-column:1;
    grid-row:2;
    max-width:none;
  }  .jr-print{
    position:sticky;
    top:130px;
    grid-column:1;
    grid-row:2;
    justify-self:end;
    align-self:start;
    z-index:5;
  }
  /* ═══ 404 — SEED 768-991 (spec Kulwant 2026-08-12): er-num −10% per band ═══ */
  .er-num{
    font-size:157px;
  }
  .error-404{
    background:var(--white) url(../media/error-page-bg.png) no-repeat left 20% top;
    background-size:cover;
    height:100vh;
  }
  /* spec 2026-08-13 (configurator-ronde) */
  .conf-works .process-inner{
    width:80%;
  }
  .impact-gallery .v-swiper{
    height:446px; /* 2x220 + 6 naad (slide-hoogte 220, spec 2026-08-13) */
  }
  /* QA #19-vervolg (2026-08-13): statskolom smaller en gecentreerd
     boven de collage */
  .impact-left{
    max-width:100%;
    margin:0 auto;
  }
  /* fix 2026-08-13: inner-hoogte was gepind (510) — de 446-collage liep
     over de USP-chips heen; auto laat de flow meegroeien */
  .impact-inner{
    height:auto;
  }
  /* impact-gallery — SAMENGEVOEGD (2026-08-13, verzoek Kulwant): de 5
     losse lagen uit de rondes zijn hier één effectieve regel geworden */
  .imapact-right-main{
    width: 100vw;
    overflow: hidden;
    height: 381px;
  }
  .impact-gallery{
    width: 90%;
    margin: 0px auto;
    max-width: 100%;
    height: auto;
    gap: 6px;
    margin-bottom: 20px;
    margin-top: -25px;
  }
  /* 88px onderruimte was voor de geroteerde sticker die absoluut rechtsonder
     stond; die staat nu als gewone regel in de flow, dus die ruimte kan eraf. */
  .pt-dl-form-card {
    padding: 40px 44px;
  }
  .impact-case-right {
    height: 380px;
  }
  .menu .menu-link .type-item{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .lp-usps-duddle-l {
    left: 24px;
    top: -26%;
    width: 24%;
  }
  .lp-usps-duddle-r {
    right: 24px;
    top: -32%;
    width: 21%;
  }
  .lp-usps-grid {
    width: 100%;
  }
  .lp-usps-duddle-l {
    left: 24px;
    top: -13%;
    width: 31%;
    }
  .lp-usps-duddle-r {
    right: 24px;
    top: -13%;
    width: 24%;
  }
  .landing .cta-final::before {
    top: -70%;
    width: 552px;
  }
  .quote-card .of-extras .gfield_checkbox {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===================================================================
   768-1279 — HAMBURGER-MENU (besluit Kulwant: onder de 1280 is er
   nooit genoeg ruimte voor het volledige menu — zelfde menustijl als
   ≤768: horizontale menu eruit, toggle/drawer erin. Kopie van het
   menuchrome uit de 521-768-band; custom.js-drempel voor de mega
   staat op 1280.)
   =================================================================== */
@media (min-width:768px) and (max-width:1279px){
  /* Geen corale streep in de lade / het telefoonmenu: die is alleen voor
     het horizontale menu (ontwerp desktop). */
  .menu > .menu-link > a:hover,
  .menu > .menu-link.active > a{
    text-decoration:none;
  }
  /* de lade hield zijn corale actieve item */
  .menu .menu-link.active > a{
    color:var(--coral);
  }
  /* ===== Mobiel menu (hamburger + subpaneel, 768-XD 2026-07-28) ===== */
  /* burger = losse donkere cirkel rechts naast de globe (buiten de pill);
     navbar wordt static zodat burger en drawer op .nav-wrap ankeren */
  .nav-wrap.navbar-mini-main{
    padding-right:0px;
  } 
  .nav-wrap{
    position:relative;
    padding-right:72px;
  }
  .nav-burger{
    display:flex;
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
  }
  .navbar{
    position:static;
    justify-content:flex-start;
    gap:10px;
    padding:8px 8px 8px 22px;
  }
  .navbar-inner{
    margin-left:auto;
  }
  .logo{
    width:104px;
  }
  .icon-btn{
    width:44px;
    height:44px;
  }
  .globe{
    width:56px;
    height:56px;
  }
  .navbar .cta{
    white-space:nowrap;
    padding:9px 14px;
    font-size:13px;
  }
  /* drawer: hoofdlijst */
  .navbar-inner .menu{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    background:var(--white);
    border-radius:20px;
    box-shadow:0 14px 34px rgba(0,0,0,.16);
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:14px;
    z-index:80;
    max-height:calc(100vh - 140px);
    overflow-y:auto;
  }
  .navbar.menu-open .menu{
    display:flex;
  }
  .navbar-inner .menu > li > a{
    display:block;
    padding:12px 14px;
    font-size:17px;
  }
  .menu .caret{
    display:none;
  }
  .mega{
    display:none !important;
  }
  /* subpaneel: mega-inhoud in de drawer (tap op Sokkencollectie) */
  .navbar.sub-open .menu{
    padding:24px 28px 30px;
  }
  .navbar.sub-open .menu > li > a{
    display:none;
  }
  .navbar.sub-open .mega{
    display:grid !important;
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    border-radius:0;
    padding:0;
    grid-template-columns:1.6fr 1fr;
    gap:0 34px;
    justify-items:stretch;
    justify-content:stretch;
  }
  .navbar.sub-open .mega-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    grid-column:1 / -1;
    justify-self:start;
    border:none;
    background:none;
    padding:0;
    font-family:var(--roc-grotesk);
    font-size:15px;
    font-weight:600;
    color:var(--text);
    cursor:pointer;
    margin-bottom:24px;
  }
  .navbar.sub-open .mega-mob-title{
    display:block;
    grid-column:1 / -1;
    font-size:22px;
    font-weight:700;
    margin-bottom:20px;
  }
  .navbar.sub-open .bestsellers-col{
    grid-column:1;
    grid-row:3 / span 2;
  }
  .navbar.sub-open .types-col{
    grid-column:2;
    grid-row:3;
  }
  .navbar.sub-open .mega-usps{
    grid-column:2;
    grid-row:4;
    margin-top:18px;
    align-items: baseline;
  }
  .mega-usps .cta-light {
    width: fit-content;
  }
  .navbar.sub-open .mega-usps h4{
    display:none;
  }
  .navbar.sub-open .mega-usps span{
    font-size:14px;
  }
  .navbar.sub-open .bestsellers{
    grid-template-columns:1fr 1fr;
    gap:30px 10px;
  }
  .navbar.sub-open .prod-card .prod-price{
    font-size:14px;
  }
  .navbar.sub-open .prod-card .prod-img-card{
    height:150px;
  }
  .navbar.sub-open .types{
    grid-template-columns:1fr;
    gap:14px;
  }
  /* De band zette het item op twee gelijke kolommen; met de types nu
     onder elkaar knelde het label in de halve breedte en brak een naam
     als Yoga & pilates over twee regels. Vierkantje op eigen maat, het
     label krijgt de rest - net als in de basis. */
  .menu .menu-link .type-item{
    grid-template-columns:auto 1fr;
  }
  .navbar.sub-open .type-item .type-img{
    width:60px;
    height:60px;
  }

  /* pijl bij Sokkencollectie (submenu-indicator, zoals in het mobiele menu) */
  .has-mega > a::after{
    content:"";
    display:inline-block;
    width:15px;
    height:10px;
    margin-left:8px;
    vertical-align:middle;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Cpath d='M12 1l5 5-5 5M17 6H1' fill='none' stroke='%2328121b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  /* subpaneel-layout (specs Kulwant): bestsellers-kolom en types-kolom
     elk 50%, types 2 per rij, mega-usps 50% ónder de types-kolom */
  .navbar.sub-open .mega{
    grid-template-columns:1fr 1fr;
  }
  .navbar.sub-open .mega-usps span{
    font-size:16px;
  }
  .navbar.sub-open .types{
    grid-template-columns:1fr 1fr;
  }
  .of-aantal {
    margin-top: 40px;
  }
  .pick-img {
    height: 140px;
  }
  .testimonial-card {
    height: 270px;
    padding: 30px;
  }
}


/* ===================================================================
   767
   =================================================================== */
@media (max-width:767px){
  /* Geen corale streep in de lade / het telefoonmenu: die is alleen voor
     het horizontale menu (ontwerp desktop). */
  .menu > .menu-link > a:hover,
  .menu > .menu-link.active > a{
    text-decoration:none;
  }
  .lang-list{
    z-index: -1;
    padding: 25px 4px 5px;
    border-radius: 14px 14px 8px 8px;
  }
  .lang.open .lang-trigger{
    border-radius: 40px;
  }
  .gift h2{
    padding-left: 20px;
  }
  .collection .container, .gift .container {
    max-width: 100%;
    padding: 0;
  }
  .collection .collection-grid, .gift .gift-grid{
    padding: 0 20px;
    margin: 0;
    width:100%;
  }
  .collection-cta {
    margin: 30px 20px 0;
  }
  .gift{
    overflow: hidden;
  }
  .gift:before {
    content: '';
    background: #fff;
    position: absolute;
    top: 31px;
    left: -60px;
    width: 120%;
    height: 100%;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: max(100%, 1920px) auto;
    transform: rotate(5deg);
  }
  .of-aantal {
    margin-top: 35px;
  }
  .ch-swiper-2 {
    margin-top: 0px;
  }
  .dz-keur-card h3 {
    font-weight: 600;
    font-size: calc(var(--h3-font-size) - 3px);
  }
  .impact-case-right {
    height: 290px;
  }
  .process-row-body h3 {
    font-size: var(--h6-font-size);
  }
  menu .menu-link .type-item{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .lp-usps-duddle-l {
    left: 24px;
    top: -26%;
    width: 24%;
  }
  .lp-usps-duddle-r {
    right: 24px;
    top: -7%;
    width: 21%;
  }
  .lp-usps-grid {
    width: 100%;
  }
  .lp-usps-duddle-l {
    left: 24px;
    top: -7%;
    width: 31%;
    }
  .lp-usps-duddle-r {
    right: 24px;
    top: -13%;
    width: 24%;
  }
  .landing .cta-final::before {
    top: -89%;
    width: 552px;
  }
  .pt-partner-card img {
    max-width: 100%;
  }
  .sub-open .nav-burger{
    display: none;
  }
  .sub-open  .mega .nav-burger{
    display: flex;
    top: 60px;
    position: static;
    transform: none;
  }
  .sub-menu-head {
    margin-bottom: 0px;
    display: flex;
    justify-content: space-between;
    top: 0;
    background: #fff;
    padding: 10px 20px;
    border-radius: 0 0 25px 25px;
    width: calc(100% + 40px);
    margin-left: -20px;
    position: sticky;
  }

}

/* ===================================================================
   521-767
   =================================================================== */
@media (min-width:521px) and (max-width:767px){
  /* Gravity-tegenhanger van .type-picker / .extra-picker (gemeten op htmlv). */
  .quote-card .of-soktypes .gfield_checkbox{ grid-template-columns:repeat(3,1fr); gap:20px 10px; }
  .quote-card .of-extras .gfield_checkbox{ grid-template-columns:repeat(2,1fr); }
  /* mega-hoverbrug is desktop-only (drawer/sheet heeft geen hover-gat) */
  .mega::before{
    display:none;
  }

  /* ws-compare-doodle: alleen 1920-ontwerp (zie basis) */
  .ws-compare-doodle-1{
    display:none;
  }
  /* pin: basis (ws-gets-left ol p) ging 2026-08-12 naar h5-token (1920) —
     band houdt body-lg */
  .ws-gets-left ol p{
    font-size:var(--body-lg-font-size);
  }
  /* pin: basis (ws-compare) kreeg 2026-08-12 padding-top 40 / margin-top -40
     (1920) — band houdt 0/0 */
  .ws-compare{
    padding-top:0px;
    margin-top:0px;
  }
  /* pin: basis-bottom (ws-intro golf) ging 2026-08-12 naar 40px (1920) —
     band houdt 0 */
  .ws-intro::before{
    bottom:0px;
  }
  /* pin: basis-h2 (overons-story) ging 2026-08-12 naar h2-token (1920) —
     band houdt h3-token */
  .overons-story-text h2{
    font-size:var(--h3-font-size);
  }
  /* pin: basis-padding-bottom (calculator-pink) ging 2026-08-12 naar 120px
     (1920) — band houdt 67 (compound-conventie) */
  .calculator.calculator-pink{
    padding-bottom:67px;
  }
  /* configurator-doodles + sokkenpatroon: alleen 1920-ontwerp (zie basis,
     zelfde patroon als PDP's design-duddle-sock) */
  .configurator-section .conf-duddle-r,
  .configurator-section .conf-duddle-l,
  .configurator-section:after,
  .conf-works:before,
  .conf-types:before{
    display:none;
  }
  /* pin: basis-h2 ging 2026-08-12 naar h2-token + margin -30 (1920) —
     band houdt de goedgekeurde h3-token + 40 */
  .conf-works > .container > h2{
    font-size:var(--h3-font-size);
    margin-bottom:30px;
  }
   .translatepress-en_GB .conf-works > .container > h2, .translatepress-de_DE .conf-works > .container > h2, .translatepress-fr_FR .conf-works > .container > h2{
    margin-bottom:20px;
  }
  /* ── DEFINITIEVE TYPOGRAFIE-INVENTARIS (PDF Kulwant 2026-08-03) — DE bron
     voor alle content-typografie in deze band; maten hier wijzigen, nooit
     als harde px in sectieregels ── */
  :root{
    --h1-font-size:43px;
    --h2-font-size:35px;
    --h3-font-size:23px;
    --h4-font-size:21px;
    --h5-font-size:17px;
    --h6-font-size:17px;
    --body-font-size:15px;
    --body-lg-font-size:17px;
    --body-sm-font-size:12px;
  }



  /* ————— uit oud ≤1680 ————— */

  .container{
    max-width: min(1440px, 100% - 40px);
  }
  /* 1680-test 2026-07-28: betaal/verzend-strip paste nét niet meer op één
     regel (852+1+533 content + 2×30 gap = 1446 > 1440) en wikkelde lelijk */
  .footer-pay{
    gap:20px 20px;
  }
  /* telefoonnummer in de footer brak midden in het nummer af */
  footer a[href^="tel:"]{
    white-space:nowrap;
  }

  /* ————— uit oud ≤1550 ————— */

  /* 1280-test 2026-07-28: onder de 1320-container past de betaal/verzend-strip
     nooit op één regel — netjes gecentreerd laten wrappen, zwevende divider weg */
  .footer-pay{
    justify-content:center;
    row-gap:16px;
  }
  .footer-pay .border-v{
    display:none;
  }
   .container{
    max-width: min(1320px, 100% - 40px);
  }
  header .container{
    max-width: 95.9%;
  }
  .menu {
    gap: 25px;
  }
  .logo{
    display: flex;
    width: 96px;
  }
  .mega {
    padding: 30px;
  }
  .prod-card .prod-img-card {
    height: 150px;
    border-radius: 10px;
  }
  .types {
    gap: 10px 30px;
  }
  .type-item .type-img {
    width: 58px;
    height: 58px;
    border-radius: 5px;
  }
  .gallery-swiper .swiper-slide {
    width: 314px;
    height: 440px;
  }
  .impact {
    padding: 8px 0 125px;
  }
  .impact-inner {
      height: 465px;
      gap: 56px;
  }
  .impact-gallery {
      width: 890px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul {
    gap: 19px;
  }
  .impact-left {
      padding-inline-start: 0;
  }
  .stat-num {
    font-size: 58px;
  }
  .feat-label{
    font-size:18px;
  }
  .collection:before {
    top: -51%;
    background: url(../media/yellow-shape-1440.svg);
    background-size: cover;
  }

  .collection-img {
    height: 295px;
  }
  .collection-name {
    font-size: 17px;
  }
  .collection-card-foot {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 22px;
    gap: 20px;
  }
  
  .collection-grid {
    gap: 20px;
  }
  .collection-cta{
    margin-top: 30px;
  }
  .collection:after {
    bottom: -11%;
  }
  .v-swiper .swiper-slide {
    width: 276px;
    height: 345px;
    border-radius: 15px; 
  }
  .process {
    padding: 155px 0 120px;
  }
  .process:not(.conf-works) > .container > h2{
    padding-top: 0;
    margin-bottom: 30px;
  }
  .process-steps {
    gap: 67px;
  }
  .calc-grid {
    grid-template-columns: 1fr 440px;
  }
  .calc-panel {
    padding: 40px;
  }
  .calc-mid{
    grid-template-columns: 440px 1fr;
    gap: 35px;
  }
  .calc-hint{
    height: 112px;
  }
  .staffel-row {
    padding: 8px 20px;
  }
  .calc-result {
    padding-top: 5px;
  }
  .calc-row{
    margin-bottom: 20px;
  }
  .calc-total-row{
    margin-bottom: 8px;
  }
  .calc-field {
    margin-bottom: 20px;
  }
  .staffel-head-row {
    padding: 8px 20px;
    height: 36px;
  }
  .gift {
    padding: 100px 0 70px;
  }
  .gift-img {
    height: 295px;
    border-radius: 10px;
  }
  .cases {
    padding: 95px 0 50px;
  }
  .case-inner {
    gap: 50px;
  }
  .case-img.case-img-main {
    height: 382px;
    width: 382px;
  }
  .case-img {
    border-radius: 15px;
    width: 248px;
    height: 180px;
  }
   .cases:before{
    background:url(../media/blue-shape-lg.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .cases-feet {
    top: -22%;
    right: 3%;
    width: 204px;
    height: 304px;
  }
  .designed {
    margin-top: 102px;
  }
  .designed-swiper .swiper-slide {
    width: 295px;
    height: 295px;
    border-radius: 15px;
  }
  .designed-swiper {
    width: 105vw;
  }
  .brand-intro-inner {
    max-width: 60%;
  }
  .brand-intro {
    padding: 70px 0 100px;
  }
  .brand-intro-inner h2 {
    margin-bottom: 10px;
  }
  .brand-duddle-icons .dubble-left {
    top: -19%;
    left: 4%;
    width: 81px;
    height: auto;
  }
  .brand-duddle-icons .dubble-right {
    bottom: 4%;
    right: 4%;
    width: 81px;
    height: auto;
  }
  .gift h2 {
    width: 70%;
  }

  .faq-q {
    padding: 14px 4px;
  }
  .faq-grid {
    grid-template-columns: 382px 1fr;
    gap: 135px;
  }
  .faq-left p {
    max-width: 100%;
  }
  .faq-a-inner p{
    max-width: 92%;
  }
  .cta-final-feet {
    top: -79%;
    left: 69px;
    width: 31%;
  }

  .footer-grid {
    grid-template-columns: 1.32fr auto 1.35fr;
  }

  .footer-brand p {
    max-width: 94%;
    margin-bottom: 30px;
  }
  .footer-certs {
    align-items: flex-start;
    gap: 15px;
    flex-direction: column;
  }
  .footer-col {
    padding: 40px 50px 0;
  }
  .footer-brand {
    padding-top: 10px;
  }
  .footer-contact {
    padding-bottom: 50px;
    padding-inline-end: 0;
  }
  .footer-address br{
    display: none;
  }
  .footer-socials {
    gap: 10px;
    margin-bottom: 42px;
  }
  .footer-socials a{
    width: 42PX;
    height: 42px;
  }
  .footer-contact-row{
    margin-bottom: 30px;
  }
  .footer-pay-inner, .footer-ship-inner {
    gap: 23px;
  }

  /* ————— uit oud ≤1300 ————— */

  .container{
    max-width: min(1190px, 100% - 40px);
  }
  /* 1280-test 2026-07-28: adresblok naast de contactlijst werd een smalle
     kolom van 6 regels — vanaf hier onder de lijst stapelen */
  .footer-contact-row{
    flex-direction:column;
    gap:18px;
  }
  header .container{
    max-width: 95.9%;
  }
  .menu {
    gap: 17px;
  }
  .navbar-inner {
    gap: 25px;
  }

  /* ————— uit oud ≤768 ————— */

  /* globale gutters (768-pass): .container(-md) had hier geen regel — secties raakten de viewportrand */
  .container,
  .container-md{
    max-width:94%;
  }
  /* ===== Mobiel menu (hamburger + subpaneel, 768-XD 2026-07-28) ===== */
  /* burger = losse donkere cirkel rechts naast de globe (buiten de pill);
     navbar wordt static zodat burger en drawer op .nav-wrap ankeren */
  .nav-wrap{
    position:relative;
    padding-right:72px;
  }
  .nav-burger{
    display:flex;
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
  }
  .navbar{
    position:static;
    justify-content:flex-start;
    gap:10px;
    padding:8px 8px 8px 22px;
  }
  .navbar-inner{
    margin-left:auto;
  }
  .logo{
    width:104px;
  }
  .icon-btn{
    width:40px;
    height:40px;
  }
  .globe{
    width:56px;
    height:56px;
  }
  .navbar .cta{
    white-space:nowrap;
    padding:9px 14px;
    font-size:13px;
  }
  /* drawer: hoofdlijst */
  .navbar-inner .menu{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    background:var(--white);
    border-radius:20px;
    box-shadow:0 14px 34px rgba(0,0,0,.16);
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:14px;
    z-index:80;
    max-height:calc(100vh - 140px);
    overflow-y:auto;
  }
  .navbar.menu-open .menu{
    display:flex;
  }
  .navbar-inner .menu > li > a{
    display:block;
    padding:12px 14px;
    font-size:17px;
  }
  .menu .caret{
    display:none;
  }
  .mega{
    display:none !important;
  }
  /* subpaneel: mega-inhoud in de drawer (tap op Sokkencollectie) */
  .navbar.sub-open .menu{
    padding:24px 28px 30px;
  }
  .navbar.sub-open .menu > li > a{
    display:none;
  }
  .navbar.sub-open .mega{
    display:grid !important;
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    border-radius:0;
    padding:0;
    grid-template-columns:1.6fr 1fr;
    gap:0 34px;
    justify-items:stretch;
    justify-content:stretch;
  }
  .navbar.sub-open .mega-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    grid-column:1 / -1;
    justify-self:start;
    border:none;
    background:none;
    padding:0;
    font-family:var(--roc-grotesk);
    font-size:15px;
    font-weight:600;
    color:var(--text);
    cursor:pointer;
    margin-bottom:24px;
  }
  .navbar.sub-open .mega-mob-title{
    display:block;
    grid-column:1 / -1;
    font-size:22px;
    font-weight:700;
    margin-bottom:20px;
  }
  .navbar.sub-open .bestsellers-col{
    grid-column:1;
    grid-row:3 / span 2;
  }
  .navbar.sub-open .types-col{
    grid-column:2;
    grid-row:3;
  }
  .navbar.sub-open .mega-usps{
    grid-column:2;
    grid-row:4;
    margin-top:18px;
  }
  .navbar.sub-open .mega-usps h4{
    display:none;
  }
  .navbar.sub-open .mega-usps span{
    font-size:14px;
  }
  .navbar.sub-open .bestsellers{
    grid-template-columns:1fr 1fr;
    gap:30px 10px;
  }
  .navbar.sub-open .prod-card .prod-price{
    font-size:14px;
  }
  .navbar.sub-open .prod-card .prod-img-card{
    height:150px;
  }
  .navbar.sub-open .types{
    grid-template-columns:1fr;
    gap:14px;
  }
  /* De band zette het item op twee gelijke kolommen; met de types nu
     onder elkaar knelde het label in de halve breedte en brak een naam
     als Yoga & pilates over twee regels. Vierkantje op eigen maat, het
     label krijgt de rest - net als in de basis. */
  .menu .menu-link .type-item{
    grid-template-columns:auto 1fr;
  }
  .navbar.sub-open .type-item .type-img{
    width:50px;
    height:50px;
  }
  .promises-grid{ grid-template-columns:1fr; }
  .design-now-card{ grid-template-columns:1fr; }
  .design-now-doodle,
  .design-now-feet{ display:none; }
  .usecase-img-md,
  .usecase-img-lg{ height:200px; }
  .also-head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .promises h2,
  .specs-section-inner h2,
  .weave-inner h2,
  .versus h2,
  .also-title,
  .design-now h2,
  .usecases-head h2{ font-size:var(--h2-font-size); }

  /* ===== Case-detail page ===== */
  .case-promo{ max-width:none; }
  .case-specs-grid{ grid-template-columns:1fr 1fr; }
  .case-result{ background:linear-gradient(#fff 0, #fff 12%, #3f38d6 12%, #3f38d6 100%); }
  .case-result-grid{ grid-template-columns:1fr; gap:14px; }
  .case-result-grid img{ height:220px; margin-top:0 !important; }
  .case-quote{ padding:30px 20px 24px; }
  .case-video-doodle,
  .case-video-feet{ display:none; }
  .case-video-card img{ height:240px; }
  .case-story-left h2,
  .case-specs h2,
  .case-result h2,
  .case-video h2,
  .case-others h2{ font-size:var(--h2-font-size); }

  /* ===== Inspiratie / cases page ===== */
  .insp-title{ font-size:28px; }
  .case-grid{ grid-template-columns:1fr; gap:16px; }
  .case-filters{ flex-direction:column; gap:14px; align-items:flex-start; }
  .case-grid-section h2{ font-size:var(--h2-font-size); }

  /* ===== Werkwijze page ===== */
  .steps-promo{ position:static; width:100%; margin-bottom:24px; }
  .steps-section h2{ font-size:var(--h2-font-size); }
  .step-card-img{ height:180px; }

  /* ===== Configurator page ===== */
  .conf-title{ font-size:34px; }
  .conf-doodle{ display:none; }
  .conf-promo{ position:static; width:100%; margin-top:16px; }
  .configurator-section ul{ margin-top:30px; gap:10px 24px; }
  .conf-works > .container > h2,
  .conf-types h2{ font-size:var(--h2-font-size); }
  .conf-check-btns{ gap:8px; }

  /* ===== Bedankt page (oud-cascade; opgeschoond 2026-08-12 — de dode
     declaraties zaten in het nieuwe Bedankt-blok verderop) ===== */
  .thanks-hero-content{ padding-top:50px; }
  .thanks-steps{ grid-template-columns:1fr; }
  .wait-grid{ grid-template-columns:1fr; gap:16px; }
  .follow-inner{ flex-direction:column; }
  .newsletter-row{ flex-direction:column; align-items:stretch; gap:14px; }

  /* ===== Sample-request page ===== */
  .sample-actions{ flex-direction:column; align-items:stretch; }
  .sample-actions-right{ flex-direction:column; }
  .sample-proof-grid{ grid-template-columns:1fr; }

  /* ===== Offerte page ===== */
  .offerte-title{ font-size:32px; }
  .offerte-nav{ padding:12px 12px 12px 20px; }
  .offerte-logo{ font-size:22px; }
  .quote-wrap{ grid-template-columns:1fr; gap:18px; }
  .quote-card{ padding:22px 18px; }
  .quote-aside{ position:static; }
  .stepper{ flex-direction:column; gap:14px; align-items:flex-start; }
  .stepper-item{ flex-direction:row; align-items:center; gap:12px; text-align:left; padding:0; width:100%; }
  .stepper-item::before{ display:none; }
  .stepper-dot{ margin-bottom:0; }
  .type-picker{ grid-template-columns:repeat(2,1fr); }
  .extra-picker{ grid-template-columns:repeat(2,1fr); }
  .quote-grid,
  .quote-grid-3{ grid-template-columns:1fr; }
  /* Gravity-tegenhanger van .quote-grid / .quote-grid-3 hierboven: onder de
     768px staan de velden van stap 3 onder elkaar in plaats van in rijen. */
  .quote-card .gform_fields > .of-postcode,
  .quote-card .gform_fields > .of-huisnummer,
  .quote-card .gform_fields > .of-toevoeging,
  .quote-card .gform_fields > .of-bedrijf,
  .quote-card .gform_fields > .of-contact,
  .quote-card .gform_fields > .of-email,
  .quote-card .gform_fields > .of-telefoon,
  .quote-card .gform_fields > .of-land,
  /* Zelfde gewicht als de basisregel die Land op de eerste rij zet,
     anders wint die hier en blijft het veld naast Toevoeging staan
     terwijl de rest stapelt. */
  .quote-card .gform_fields > .of-land.is-zichtbaar,
  .quote-card .gform_fields > .of-land.gfield_error,
  .quote-card .gform_fields > .of-auto.is-zichtbaar{ flex:0 0 100%; }
  /* Idem voor .sample-proof-grid op het sampleformulier: htmlv zet die
     onder de 768px ook op één kolom, dus "Aantal paar" mag hier niet op
     zijn vaste 200px blijven staan. */
  .sample-card .gform_fields > .of-aantal,
  .sample-card .gform_fields > .of-wensen{ flex:0 0 100%; }
  /* = .quote-actions-split / .quote-actions-right */
  /* BEWUSTE AFWIJKING VAN HTMLV (verzoek Kulwant 2026-09-14): htmlv stapelt deze
     knoppen onder 768px tot volle breedte, maar de balk moet ook op een smal
     scherm ÉÉN RIJ blijven — Terug links, Overslaan + Volgende rechts, precies
     zoals op desktop. Daarom hier GEEN flex-direction:column meer; de basisregel
     uit style.css (row, gap 20, Terug met margin-right:auto) blijft staan.
     De maatvoering voor smalle schermen staat onderaan de ≤520-band: op 360px
     past de rij niet op de standaard knoppadding. */
  .quote-actions-split{ flex-direction:column; align-items:stretch; gap:12px; }
  .quote-actions-right{ flex-direction:column; }
  .aanvraag-steps{ grid-template-columns:1fr; gap:26px; }
  .aanvraag-doodle{ display:none; }
  .aanvraag-title{ font-size:28px; }
  .mini-footer .container{ flex-direction:column; text-align:center; }

  /* ===== Expanding search ===== */
  .nav-search{
    right:52px;
  }
  .navbar.search-open .nav-search{
    width:calc(100% - 120px);
  }
  .nav-search-input{
    font-size:15px;
  }

  /* ===== Trusted by / brand logos ===== */
  .brands-swiper{
    --logo-gap:40px;
  }
  .brand-logo-items{
    height:26px;
  }

  /* ===== Impact / stats + vertical socks galleries ===== */
  .impact-inner{
    flex-direction:column;
    gap:40px;
  }
  .impact-left{
    max-width:100%;
    text-align:center;
  }
  .impact .impact-left ul li{
    justify-content:center;
  }
  .stat-num{
    font-size:34px;
  }
  .impact-gallery{
    width:100%;
    max-width:100%;
    height:340px;
    gap:12px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:10px;
  }

  /* ===== Sokken collectie ===== */
  .collection-grid{
    display:flex;
    overflow-x:auto;
    gap:16px;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
  }
  .collection-card{
    flex:0 0 46%;
    height:auto;
  }
  /* basis-foot is 70px hoog (desktop: één rij) — gestapelde foot heeft meer nodig */
  .collection-card-foot{
    height:auto;
  }
  .collection h2{
    font-size:var(--h2-font-size);
    text-align:center;
  }

  /* ===== Process ===== */
  .process{
    padding:130px 0 70px;
  }
  .process-wave svg{
    height:70px;
  }
  .process:not(.conf-works) > .container > h2{
    font-size:var(--h2-font-size);
    margin-bottom:44px;
  }
  .process-steps{
    grid-template-columns:repeat(2,1fr);
    gap:36px 24px;
  }
  .process-step p{
    max-width:none;
  }

  /* ===== Prijscalculator ===== */
  .calc-panel.calc-right {
    order: 3;
  }
  .calc-cta{
    margin-top: 10px;
    margin-bottom: 35px;
  }
  .calc-box{
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .calc-grid{
    display: contents;
  }
  .calc-panel{
    padding:22px 18px;
  }
  .calc-mid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .calc-slider-row{
    flex-wrap:wrap;
    gap:14px;
  }

  /* ===== Sokkengeschenk compleet ===== */
  /* cases: desktop-naast-elkaar knipte de tekst af — stapelen; blauwe shape meerekken */
  .cases:before{
    background-size:100% 100%;
  }
  .cases{
    padding-top:160px;
  }
  .cases-nav{
    top:0;
    margin-top:22px;
  }
  .case-inner{
    flex-direction:column;
    gap:26px;
  }
  .case-gallery{
    width:100%;
  }
  .case-img.case-img-main{
    width:58%;
    height:280px;
  }
  .case-img{
    width:100%;
    height:127px;
  }
  .case-img-col{
    flex:1;
  }
  .cases-feet{
    display:none;
  }
  .gift-grid{
    display:flex;
    overflow-x:auto;
    gap:16px;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
  }
  .gift-card{
    flex:0 0 46%;
    height:auto;
  }
  .gift h2{
    font-size:var(--h2-font-size);
    text-align:center;
  }

  /* ===== Klantcases ===== */
  .cases-cut,
  .cases-feet{
    display:none;
  }
  .case-section-outer h2{
    font-size:var(--h2-font-size);
    text-align:center;
  }
  .case-inner{
    grid-template-columns:1fr;
    gap:26px;
  }
  .cases-nav{
    padding-left:0;
    justify-content:center;
  }
  .designed{
    margin-top:50px;
  }
  .designed-head h3{
    font-size:var(--h3-font-size);
  }
  .designed-swiper .swiper-slide{
    width:200px;
    height:250px;
  }
  .designed::before{
    height:300px;
    top: 50%;
  }

  /* ===== Brand intro ===== */
  .doodle{
    display:none;
  }
  .brand-intro-inner h2{
    font-size:var(--h2-font-size);
  }

  /* ===== FAQ ===== */
  .faq-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .faq-left h2{
    font-size:var(--h2-font-size);
  }
  .faq-feet{
    display:none;
  }
  .faq-left p{
    max-width:none;
  }
  .faq-right{
    padding-top:0;
  }

  /* ===== Slot-CTA ===== */
  .cta-final-feet{
        width: 300px;
        left: 10%;
        top: -80%;
  }
  .cta-final-panel{
    padding:90px 0 70px;
  }
  .cta-final-panel h2{
    font-size:32px;
  }

  /* ===== Footer ===== */
  .footer-grid{
    grid-template-columns:1fr;
    gap:34px;
  }
  .footer-links::before,
  .footer-contact::before{
    display:none;
  }
  .footer-contact-row{
    flex-direction:column;
    gap:22px;
  }
  .footer-partners{
    flex-wrap:wrap;
    gap:16px;
  }
  .footer-partner-slot{
    width:100px;
    height:44px;
  }
  .footer-pay{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-reviews{
    gap:24px;
  }
  .footer-legal{
    line-height:1.9;
  }
  .coll-hero-content h1{
    font-size:var(--h1-font-size);
  }
  .types-head{
    flex-direction:column;
    gap:20px;
    min-height:0;
  }
  .types-promo{
    position:static;
    max-width:none;
  }
  .types-grid{
    grid-template-columns:repeat(2,1fr);
    gap:40px 10px;
  }
  .compare-inner-main h2,
  .testi-title{
    font-size:var(--h2-font-size);
  }

  /* pijl bij Sokkencollectie (submenu-indicator, zoals in het mobiele menu) */
  .has-mega > a::after{
    content:"";
    display:inline-block;
    width:15px;
    height:10px;
    margin-left:8px;
    vertical-align:middle;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Cpath d='M12 1l5 5-5 5M17 6H1' fill='none' stroke='%2328121b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  /* logo-marquee full-width (universeel besluit Kulwant) */
  .brands{
    overflow:hidden;
  }
  .brands .brands-swiper{
    width:100vw;
    margin-left:calc(50% - 50vw);
  }

  /* topbar-marquee (zelfde mechaniek als mobiel/tablet; JS-gate is ≤991) */
  .topbar{
    position:sticky /* was relative; sticky chrome 2026-08-12 — anker voor :after blijft werken */;
    overflow:hidden;
  }
  .topbar:after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:56px;
    background:linear-gradient(to left, var(--dark), rgba(40,18,27,0));
    pointer-events:none;
  }
  .topbar ul.topbar-marquee{
    overflow:visible;
    width:max-content;
    gap:0;
    padding-inline:0;
    animation:sokkiesTopbarMarquee 18s linear infinite;
  }
  .topbar ul.topbar-marquee li{
    margin-right:34px;
  }
  @keyframes sokkiesTopbarMarquee{
    to{ transform:translateX(-50%); }
  }

  /* promo-float 25% kleiner (schaal = font+breedte+marges+afbeelding ineens) */
  .promo-float{
    transform:scale(.75);
    transform-origin:left bottom;
  }

  /* USP-chips: cellen mochten niet krimpen (geen minmax) — labels
     staken buiten beeld op ~640 */
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul li{
    width:auto;
    min-width:0;
  }
  .feat-label{
    white-space:normal;
  }

  /* ═══════ GEKOPIEERD UIT DE 768-991-BAND (verzoek Kulwant 2026-07-31)
     — volledige tabletronde; band-eigen fijnslijpen volgt ═══════ */



  /* ————— uit oud ≤1680 ————— */

  .container{
    max-width: min(1440px, 100% - 40px);
  }
  /* 1680-test 2026-07-28: betaal/verzend-strip paste nét niet meer op één
     regel (852+1+533 content + 2×30 gap = 1446 > 1440) en wikkelde lelijk */
  .footer-pay{
    gap:20px 20px;
  }
  /* telefoonnummer in de footer brak midden in het nummer af */
  footer a[href^="tel:"]{
    white-space:nowrap;
  }

  /* ————— uit oud ≤1550 ————— */

  /* 1280-test 2026-07-28: onder de 1320-container past de betaal/verzend-strip
     nooit op één regel — netjes gecentreerd laten wrappen, zwevende divider weg */
  .footer-pay{
    justify-content:center;
    row-gap:16px;
  }
  .footer-pay .border-v{
    display:none;
  }
   .container{
    max-width: min(1320px, 100% - 40px);
  }
  header .container{
    max-width: 95.9%;
  }
  .menu {
    gap: 25px;
  }
  .logo{
    display: flex;
    width: 96px;
  }
  .mega {
    padding: 30px;
  }
  .prod-card .prod-img-card {
    height: 150px;
    border-radius: 10px;
  }
  .types {
    gap: 10px 30px;
  }
  .type-item .type-img {
    width: 58px;
    height: 58px;
    border-radius: 5px;
  }
  .gallery-swiper .swiper-slide {
    width: 314px;
    height: 440px;
  }
  .impact {
    padding: 8px 0 125px;
  }
  .impact-inner {
      height: 465px;
      gap: 56px;
  }
  .impact-gallery {
      width: 890px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul {
    gap: 19px;
  }
  .impact-left {
      padding-inline-start: 0;
  }
  .stat-num {
    font-size: 58px;
  }
  .feat-label{
    font-size:18px;
  }
  .collection:before {
    top: -21%;
    background: url(../media/yellow-shape-1440.svg);
    background-size: cover;
  }

  .collection-img {
    height: 295px;
  }
  .collection-name {
    font-size: 17px;
  }
  .collection-card-foot {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 22px;
    gap: 20px;
  }
  .collection-grid {
    gap: 20px;
  }
  .collection-cta{
    margin-top: 30px;
  }
  .collection:after {
    bottom: -11%;
  }
  .v-swiper .swiper-slide {
    width: 276px;
    height: 345px;
    border-radius: 15px; 
  }
  .process {
    padding: 155px 0 100px;
  }
  .process:not(.conf-works) > .container > h2{
    padding-top: 0;
    margin-bottom: 30px;
  }
  .process-steps {
    gap: 67px;
  }
  .calc-grid {
    grid-template-columns: 1fr 440px;
  }
  .calc-panel {
    padding: 40px;
  }
  .calc-mid{
    grid-template-columns: 440px 1fr;
    gap: 35px;
  }
  .calc-hint{
    height: 112px;
  }
  .staffel-row {
    padding: 8px 20px;
  }
  .calc-result {
    padding-top: 5px;
  }
  .calc-row{
    margin-bottom: 20px;
  }
  .calc-total-row{
    margin-bottom: 8px;
  }
  .calc-field {
    margin-bottom: 20px;
  }
  .staffel-head-row {
    padding: 8px 20px;
    height: 36px;
  }
  .gift {
    padding: 100px 0 0px;
  }
  .gift-img {
    height: 295px;
    border-radius: 10px;
  }
  .cases {
    padding: 150px 0 50px;
  }
  .case-inner {
    gap: 50px;
  }
  .case-img.case-img-main {
    height: 382px;
    width: 382px;
  }
  .case-img {
    border-radius: 15px;
    width: 248px;
    height: 180px;
  }
   .cases:before{
    background:url(../media/blue-shape-lg.png) 82% top;
    background-size: cover;
    height: 85%;
    background-repeat: no-repeat;
  }
  .cases-feet {
    top: -22%;
    right: 2%;
    width: 141px;
    height: 206px;
  }
  .designed {
    margin-top: 102px;
  }
  .designed-swiper .swiper-slide {
    width: 295px;
    height: 295px;
    border-radius: 15px;
  }
  .designed-swiper {
    width: 105vw;
  }
  .brand-intro-inner {
    max-width: 100%;
  }
  .brand-intro {
    padding: 70px 0 100px;
  }
  .brand-intro-inner h2 {
    margin-bottom: 10px;
  }
  .brand-duddle-icons .dubble-left {
    top: -19%;
    left: 4%;
    width: 81px;
    height: auto;
  }
  .brand-duddle-icons .dubble-right {
    bottom: 4%;
    right: 4%;
    width: 81px;
    height: auto;
  }

  .faq-q {
    padding: 14px 4px;
  }
  .faq-grid {
    grid-template-columns: 382px 1fr;
    gap: 135px;
  }
  .faq-left p {
    max-width: 100%;
  }
  .faq-a-inner p{
    max-width: 92%;
  }
  .cta-final-feet {
    top: -29%;
    left: 20px;
    width: 26%;
  }

  .footer-grid {
    grid-template-columns: 1.32fr auto 1.35fr;
  }

  .footer-brand p {
    max-width: 94%;
    margin-bottom: 30px;
  }
  .footer-certs {
    align-items: flex-start;
    gap: 15px;
    flex-direction: column;
  }
  .footer-col {
    padding: 40px 50px 0;
  }
  .footer-brand {
    padding-top: 10px;
  }
  .footer-contact {
    padding-bottom: 50px;
    padding-inline-end: 0;
  }
  .footer-address br{
    display: block;
  }
  .footer-socials {
    gap: 10px;
    margin-bottom: 42px;
  }
  .footer-socials a{
    width: 42PX;
    height: 42px;
  }
  .footer-contact-row{
    margin-bottom: 30px;
  }
  .footer-pay-inner, .footer-ship-inner {
    gap: 23px;
  }
  

  /* ————— uit oud ≤1300 ————— */

  .container{
    max-width: min(1190px, 100% - 40px);
  }
  /* 1280-test 2026-07-28: adresblok naast de contactlijst werd een smalle
     kolom van 6 regels — vanaf hier onder de lijst stapelen */
  .footer-contact-row{
    flex-direction:column;
    gap:18px;
  }
  header .container{
    max-width: 95.9%;
  }
  .menu {
    gap: 17px;
  }
  .navbar-inner {
    gap: 25px;
  }

  /* ————— tabletblok ————— */

  /* ===== Tablet-pass 2026-07-28 (home, zonder design — projectinzicht) ===== */
  /* gutters: container 1190 raakte de rand */
  .container{
    max-width:94%;
  }
  /* navbar paste niet: logo over menu, "Over ons" wikkelde, CTA/globe buiten beeld */
  .menu{
    gap:7px;
  }
  .menu > li > a{
    font-size:14px;
    white-space:nowrap;
  }
  .navbar-inner{
    gap:10px;
  }
  .navbar .cta{
    white-space:nowrap;
    padding:8px 12px;
    font-size:13px;
  }
  .icon-btn{
    width:34px;
    height:34px;
  }
  .logo{
    width:80px;
    margin-right:8px;
  }
  header .container{
    max-width:98%;
  }
  .nav-wrap{
    gap:8px;
  }
  .navbar{
    padding-inline:14px;
  }
  .globe{
    width:52px;
    height:52px;
  }
  /* mega-menu (ook verborgen) stak buiten de viewport → h-scroll */
  .mega{
    width:calc(100vw - 48px);
    max-width:calc(100vw - 48px);
  }
  /* impact: vaste galleriebreedte 890 duwde de sectie uit beeld —
     2 marqueekolommen i.p.v. 3 */
  .impact-inner{
    gap:30px;
    height:auto;
  }
  .impact-gallery{
    width:575px;
  }
  .impact-gallery .v-swiper:nth-child(3){
    display:none;
  }
  /* USP-chips: 6 op één regel werd te krap — het bestaande 3-koloms-grid
     werkte niet omdat de basis flex is */
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul{
    display:grid;
  }
  /* calculator: vaste 560/440-kolommen pasten niet — stapelen */
  .calc-grid{
    grid-template-columns:1fr;
  }
  .calc-mid{
    grid-template-columns:1fr 1fr;
  }
  /* FAQ-grid: 382px + 135px gap werd te krap */
  .faq-grid{
    grid-template-columns:300px 1fr;
    gap:50px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul{
    grid-template-columns:repeat(3,1fr);
  }
  .collection-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .gift-grid{
    grid-template-columns:repeat(2,1fr);
  }

  /* ————— eigen tuning 769-991 ————— */
  /* footer: 3-koloms grid overliep hier (zone was alleen op 1024 getest) */
  .footer-grid{
    grid-template-columns:1fr;
    gap:0;
  }
  footer .border-v{
    display:none;
  }
  .footer-col{
    padding:30px 0 0;
    border-left:0;
    border-right:0;
  }

  /* logo-marquee full-width (zelfde als 992-1279-band) */
  .brands{
    overflow:hidden;
  }
  .brands .brands-swiper{
    width:100vw;
    margin-left:calc(50% - 50vw);
  }

  /* cases (specs Kulwant): gallery gestapeld zoals mobiel (hoofdfoto als
     eigen rij, twee kleine eronder) — kolommen 45% gallery / 55% tekst */
  .case-gallery{
    flex:0 0 45%;
    width:100%;
    flex-direction:column;
  }
  .case-text{
    flex:0 0 55%;
    width:100%;
    min-width:0;
  }
  .case-img.case-img-main{
    width:100%;
    height:260px;
  }
  .case-img-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    width:100%;
  }
  .case-img{
    width:100%;
    height:120px;
  }

  /* topbar-items groter (specs Kulwant, 769-991-ronde) */
  .topbar li{
    font-size:15px;
  }

  /* topbar-marquee (zelfde mechaniek als mobiel; custom.js dupliceert de
     items en zet .topbar-marquee — gate staat op ≤520 én 768-991) */
  .topbar{
    position:sticky /* was relative; sticky chrome 2026-08-12 — anker voor :after blijft werken */;
    overflow:hidden;
  }
  .topbar:after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:56px;
    background:linear-gradient(to left, var(--dark), rgba(40,18,27,0));
    pointer-events:none;
  }
  .topbar ul{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .topbar ul::-webkit-scrollbar{
    display:none;
  }
  .topbar li{
    white-space:nowrap;
    flex:0 0 auto;
  }
  .topbar ul.topbar-marquee{
    overflow:visible;
    width:max-content;
    gap:0;
    padding-inline:0;
    animation:sokkiesTopbarMarquee 18s linear infinite;
  }
  .topbar ul.topbar-marquee li{
    margin-right:34px;
  }
  @keyframes sokkiesTopbarMarquee{
    to{ transform:translateX(-50%); }
  }

  /* containers (specs Kulwant): 100% breed met VASTE 40px-gutters
     i.p.v. percentages (overschrijft de oude 94%/98%-regels) */
  .container,
  .container-md{
    max-width:100%;
    width:100%;
    padding-left:20px;
    padding-right:20px;
  }
  header .container{
    max-width:100%;
  }
  /* nav-wrap is absolute met width:100% — bij de padding-container
     resolvet dat tegen de padding-box en schoof hij 40px naar rechts */
  header .nav-wrap{
    width:calc(100% - 40px);
  }
  /* geneste containers niet dubbel padden (hero heeft container-in-container) */
  .container .container,
  .container .container-md,
  .container-md .container{
    padding-left:0;
    padding-right:0;
  }

  /* logo compacter (specs Kulwant; .navbar-prefix wint van de
     104px-regel in de drawer-band die later in het bestand staat) */
  .navbar .logo{
    width:96px;
  }
  /* icon-knoppen 44px met 16px-iconen (specs Kulwant; .navbar-prefix
     wint van de 40px-regel in de drawer-band) */
  .navbar .icon-btn{
    width:44px;
    height:44px;
  }
  .navbar .icon-btn svg{
    width:16px;
    height:16px;
  }
  /* taalknop 68x68 met 20px-icoon (specs Kulwant) */
  .lang .globe{
    width:68px;
    height:68px;
  }
  .lang .globe svg{
    width:20px;
    height:20px;
  }
  /* menu-toggle 68x68, hamburger-glyph 28x16 (3 balkjes van 2px + 5px gap) */
  .navbar .nav-burger{
    width:68px;
    height:68px;
    gap:5px;
  }
  .navbar .nav-burger span{
    width:28px;
  }
  .navbar.menu-open .nav-burger span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }
  .navbar.menu-open .nav-burger span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }

  /* hero (specs Kulwant): banner pt 170 / pb 0, kop 58 (clamp zat op
     6vw=54), usps onder elkaar op 17px/25px zonder extra marges ertussen */
  .banner-section{
    padding-top:170px;
    padding-bottom:0;
  }
  .banner-section h1{
    font-size:var(--h1-font-size);
  }
  .usps{
    flex-direction:column;
    align-items:center;
    gap:0;
    margin-top:30px;
    margin-bottom:30px;
  }
  .usps span{
    font-size:var(--body-lg-font-size);
    line-height:25px;
    margin:0;
    padding:0;
  }

  /* hero-CTA's: 44px hoog, 15px (specs Kulwant) */
  .hero-btns .cta,
  .hero-btns .cta-light{
    height:44px;
    font-size:15px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
  }
  /* hero-slider zoals mobiel: actieve PAAR gecentreerd met 5%-slivers —
     hier met swiper-gap 20 (breakpoint 768) i.p.v. 14 op mobiel */
  .gallery .gallery-swiper{
    width:calc(90vw - 40px);
    margin-inline:auto;
    overflow:visible;
  }
  .gallery-swiper .swiper-slide{
    width:calc(50% - 10px);
    height:360px;
  }
  /* spec 2026-08-13 */
  .brands h2{
    margin-bottom:20px;
  }
  .calculator{
    padding:80px 0 60px;
  }
  /* stagger op runtime-klassen (de loop husselt de DOM; nth-child-offsets
     van de basis uit) — zelfde patroon als mobiel */
  .gallery-swiper .swiper-slide:nth-child(3n + 1),
  .gallery-swiper .swiper-slide:nth-child(3n + 2),
  .gallery-swiper .swiper-slide:nth-child(3n){
    transform:none;
  }
  .gallery-swiper .swiper-slide{
    transition:transform .6s;
  }
  .gallery-swiper .swiper-slide.swiper-slide-prev,
  .gallery-swiper .swiper-slide.swiper-slide-next{
    transform:translateY(24px);
  }
  .gallery-swiper .swiper-slide.swiper-slide-active,
  .gallery-swiper .swiper-slide.swiper-slide-next + .swiper-slide{
    transform:translateY(-24px);
  }

  /* impact zoals mobiel (specs Kulwant): stats op één regel links,
     beschrijving uitgelijnd op de cijfers, gallery plat en 120vw
     gecentreerd, chips 2 kolommen — plus tablet-specifieke overrides
     (kolomlayout, 575px-gallery en verborgen 3e marquee ongedaan) */
  .brands{
    margin-bottom:0;
  }
  .impact{
    margin-top:40px;
    padding:60px 0 40px;
  }
  .impact:before{
    background-size:950px auto;
  }
  .impact-inner{
    flex-direction:column;
    align-items:center;
    overflow:visible;
    height:auto;
    gap:28px;
  }
  .impact-left{
    max-width:100%;
    text-align:left;
    width:100%;
  }
  .stat-arrow{
    margin-top:2px;
  }
  .stat-arrow svg{
    width:15px;
    height:auto;
  }
  .impact .impact-left ul{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:12px;
    margin-bottom:20px;
    justify-content: space-between;
  }
  .impact .impact-left ul li{
    justify-content:flex-start;
    flex:0 1 auto;
    min-width:0;
  }
  .impact .impact-left p{
    margin:0;
    padding-left:29px;
  }
  .stat-num{
    font-size:58px;
  }
  .stat-label{
    font-size:13px;
    white-space:nowrap;
  }
  .imapact-right-main{
    width: 106vw;
    height: 420px;
    overflow: hidden;
    margin-bottom: 40px;
  }
  .impact-gallery{
    /* rotatie uit de basis (-4°) blijft staan — zelfde hoek als desktop */
    width:100%; /* binnen de 40px-container-gutters (correctie Kulwant) */
    max-width:100%;
    margin-left:0;
    padding-right:0;
    height: 114%;
    gap: 12px;
    margin-top: -28px;
  }
  .impact-gallery .v-swiper:nth-child(3){
    display:block;
  }
  .v-swiper .swiper-slide{
    width:100%;
    height:210px;
    border-radius:12px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin-top:80px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul li{
    width:auto;
    min-width:0;
    height:104px;
    justify-content:center;
    text-align:center;
  }
  .feat-icon{
    width:40px;
    height:40px;
  }
  .feat-icon svg,
  .feat-icon img{
    width:40px;
    height:40px;
  }
  .feat-label{
    font-size:17px;
    white-space:normal;
  }

  /* collectie (specs Kulwant): horizontale scroll-rij zoals mobiel,
     2 kaarten volledig + 3e voor 25% zichtbaar */
  .collection{
    padding-top:70px;
  }
  .collection-grid{
    display:flex;
    overflow-x:auto;
    gap:16px;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; /* scrollbar verborgen (specs Kulwant) */
  }
  .collection-grid::-webkit-scrollbar{
    display:none;
  }
  .collection-card{
    flex:0 0 calc((100% - 32px) / 2.25);
    height:auto;
  }
  /* basis-foot is 70px (desktop één rij) — knipte de Bekijk-knop af */
  .collection-card-foot{
    height:auto;
  }

  /* process (specs Kulwant): stappen 2 rijen x 2 kolommen */
  .process-steps{
    grid-template-columns:repeat(2, 1fr);
    gap:40px 24px;
  }

  /* gift (specs Kulwant): horizontale scroll-rij, 2 kaarten volledig +
     3e voor 25% zichtbaar, scrollbar verborgen */
  .gift-grid{
    display:flex;
    overflow-x:auto;
    gap:16px;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .gift-grid::-webkit-scrollbar{
    display:none;
  }
  .gift-card{
    flex:0 0 calc((100% - 32px) / 2.25);
    height:auto;
  }

  .gift-nav,
  .collection-nav{
    display:flex; /* pijlen aan bij de scroll-rijen */
  }
  /* gift- en collectierij full-width zonder zijpadding (specs Kulwant):
     via de vaste 40px-gutters naar buiten breken — geen vw nodig */
  .collection-grid,
  .gift-grid{
    width:calc(100% + 40px);
    margin-left:-20px;
    padding-left:20px; /* eerste kaart lijnt uit met de kop; rij blijft
                          rechts full-bleed en scrollt links de rand in */
  }
  /* gift-pijlen rechts naast de kop (specs Kulwant) */
  .gift .container{
    position:relative;
  }
  .gift-nav{
    position:absolute;
    top:0;
    right:20px;
    margin-top:0;
  }

  /* faq (specs Kulwant): één kolom i.p.v. twee, sectie pt 100 */
  .faq{
    padding-top:100px;
    padding-bottom:220px;
  }
  .faq-grid{
    grid-template-columns:1fr;
    gap:30px;
  }
  .faq-right{
    padding-top:0; /* desktop-uitlijnoffset zou dode ruimte geven */
  }

  /* footer-structuur tablet (specs Kulwant):
     rij 1: logo+tekst links | certs rechts
     rij 2/3: Sokkies-links links | contactinfo rechts
     rij 4: nieuwsbrief links | socials rechts — daarna partners.
     .footer-contact op display:contents zodat zijn onderdelen (h5,
     contactrij, socials, news) los in het grid geplaatst kunnen worden. */
  .footer-grid{
    display:grid;
    grid-template-columns:6fr 4fr; /* 60/40 (fr = gap-veilig) */
    column-gap:40px;
    padding-top:40px;
    padding-bottom: 40px;
  }
  .footer-brand{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:6fr 4fr; /* zelfde 60/40 als de rijen eronder */
    column-gap:40px;
    padding:0 0 40px;
    border-bottom:1px solid rgba(255,255,255,.35);
    margin-bottom:40px;
  }
  .footer-brand .footer-logo{
    grid-column:1;
  }
  .footer-brand p{
    grid-column:1;
    margin-bottom:0;
    max-width:none;
  }
  .footer-brand .footer-certs{
    grid-column:2;
    grid-row:1 / span 2;
    align-self:start;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  .footer-certs-list{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .footer-links{
    grid-column:1;
    grid-row:2 / span 2;
    padding:0;
    border:0;
  }
  .footer-contact{
    display:contents;
  }
  .footer-contact > h5{
    grid-column:2;
    grid-row:2;
    margin-bottom:20px;
  }
  .footer-contact-row{
    grid-column:2;
    grid-row:3;
    flex-direction:column;
    gap:24px;
    margin-bottom:0;
  }
  .footer-news{
    grid-column:1;
    grid-row:4;
    margin-top:40px;
  }
  .footer-socials{
    grid-column:2;
    grid-row:4;
    margin:40px 0 0;
    align-self:center;
  }
  .footer-partners{
    margin-top:0px;
    margin-bottom: 40px;
  }

  /* betaalstrip (specs Kulwant) */
  .footer-pay-group{
    padding-top:40px;
    text-align:center;
    justify-content:center;
  }
  /* verzendpartners in twee rijen: label boven, logo's eronder */
  .footer-ship{
    flex-direction:column;
    align-items:center;
    gap:20px;
    padding-top: 20px;
    padding-bottom: 40px;
    margin-inline:auto;
  }

  /* reviews + legal (specs Kulwant) */
  .footer-review{
    margin-bottom:20px;
  }
  .footer-legal{
    padding-top:20px;
    line-height:26px;
  }

  /* calculator (specs Kulwant) */
  .calc-mid{
    grid-template-columns:60% 40%;
  }
  .footer-reviews{
    padding-bottom:20px;
  }

  /* promo-float 25% kleiner (schaal = font+breedte+marges+afbeelding ineens) */
  .promo-float{
    transform:scale(.75);
    transform-origin:left bottom;
  }

  /* promo-float: link en beschrijving iets groter (compenseert de
     0.75-schaal; specs Kulwant) */
  .promo-float-body p{
    font-size:17px;
  }
  .promo-float-link{
    font-size:17px;
  }


  /* koppen -20% (specs Kulwant; alles onder de 20px blijft staan):
     58→46, 38→30, 32→26, 28→22, 26→21 — tokens + expliciete regels */
  .banner-section h1{
    font-size:var(--h1-font-size);
  }
  .collection h2,
  .gift h2{
    font-size:var(--h2-font-size);
  }
  .brand-intro-inner h2,
  .case-section-outer h2,
  .faq-left h2,
  .process:not(.conf-works) > .container > h2{
    font-size:var(--h2-font-size);
  }
  .cta-final-panel h2{
    font-size:26px;
  }
  .designed-head h3{
    font-size:var(--h3-font-size);
  }

  /* fijnslijpronde 2 (specs Kulwant): stats -30%, scroll-rijen 1 kaart +
     halve kaart, calc-mid gestapeld, gift-kop links */
  .stat-num{
    font-size:41px;
  }
  .collection-card{
    flex:0 0 calc((100% - 16px) / 1.5);
  }
  .gift-card{
    flex:0 0 calc((100% - 16px) / 1.5);
  }
  .gift h2{
    text-align:left;
  }
  .calc-mid{
    grid-template-columns:1fr;
  }

  /* ═══ Collectie — GEKOPIEERD UIT DE 768-991-BAND (verzoek Kulwant
     2026-08-04); band-eigen fijnslijpen volgt ═══ */
  /* Collectie-hero (specs Kulwant 2026-08-03) */
  .coll-hero{
    height:auto;
    padding-bottom:0;
  }
  .coll-hero-inner{
    grid-template-columns:1fr;
  }
  .coll-hero-left{
    gap:45px;
    margin: 0 20px;
    margin-left: 0;
  }
  .coll-hero-btns{
    margin-bottom:45px;
  }
   .coll-gallery-main {
    width: 100vw;
    overflow: hidden;
    margin-left: -20px;
    height: 540px;
    margin-bottom: 50px;
  }
  .coll-hero-gallery{
    height: 670px;
    top: -60px;
    margin-top: 0px;
    width: 95%;
    margin: 0px auto;
  }
  .coll-hero-left p{
    font-size:var(--body-lg-font-size);
    max-width:520px;
  }
  .coll-hero-content ul{
    gap:12px 20px;
  }
  .coll-hero-content ul li{
    font-size:var(--body-lg-font-size);
  }
  .ch-swiper .swiper-slide{
    height:320px;
  }
  .types-section{
    padding-top:80px;
    padding-bottom:60px;
  }
  .type-card-img{
    height:260px;
  }
  .type-card-content h3{
    font-size:var(--h5-font-size);
  }
  .type-card-btn{
    height:44px;
    font-size:17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .compare-inner-main{
    background-position:right top;
    padding-top:120px;
  }
  .compare-floating-elements{
    width:168px;
    top: -4%;
  }
  .compare-table{
    width:1320px;
    table-layout:fixed;
  }
  .compare-table thead th:first-child,
  .compare-table tbody th{
    width:250px;
  }
  /* eigen scrollbar-design (spec Kulwant): witte pill op transparant-witte
     track, 20px onder de tabel */
  .compare-scroll{
    padding-bottom:20px;
    scrollbar-width:thin;
    scrollbar-color:#fff rgba(255,255,255,.35);
  }
  .compare-scroll::-webkit-scrollbar{
    height:10px;
  }
  .compare-scroll::-webkit-scrollbar-track{
    background:rgba(255,255,255,.35);
    border-radius:20px;
  }
  .compare-scroll::-webkit-scrollbar-thumb{
    background:#fff;
    border-radius:20px;
  }
  .compare-inner-main h2{
    font-size:var(--h2-font-size);
  }
  .bg-yellow-shape{
    background-position:right top;
    top:0px;
    background-size:182%;
  }
  .calculator-bg{
    padding-top:115px;
    background-color:#efe7dc;
  }
  .calculator-bg:before{
    height:25%;
  }
  .calc-panel h3{
    font-size:var(--h3-font-size);
  }
  .process.process-split{
    padding-top:80px;
  }
  .process-left h2{
    font-size:var(--h2-font-size);
    text-align:center;
  }
  .process-split-inner{
    grid-template-columns:1fr;
    gap:60px;
  }
  .process-left{
    width:100%;
    margin-inline:auto;
  }
  .process-collage img{
    height:auto;
    aspect-ratio:1/1;
  }
  .process-left ul li{
    padding:20px 0 25px;
  }
  .process-btn{
    justify-content:center;
  }
  .process-btn a{
    margin-inline-start:0;
  }
  .case-inner-page{
    overflow-x:clip;
  }
  .case-inner-page .case-section-outer{
    background-position:right top;
  }
  .case-inner-page:before{
    content:"";
    background:url(../media/sock-element-up.svg) no-repeat center / contain;
    width:176px;
    height:117px;
    top:0px;
  }
  .case-inner-page:after{
    content:"";
    background:url(../media/sock-element-up.svg) no-repeat center / contain;
    width:176px;
    height:117px;
    bottom:-10%;
    right:0%;
  }
  .case-text h3{
    font-size:var(--h3-font-size);
  }

  /* ═══ Product-detail — GEKOPIEERD UIT DE 768-991-BAND (verzoek Kulwant
     2026-08-05); band-eigen fijnslijpen volgt ═══ */
  .usecase-card-small{
    width:40.5%;
    flex-shrink:0;
  }
  .usecases-cards-inner > .usecase-card:not(.usecase-card-small){
    flex:1;
    min-width:0;
  }
  .usecase-img-lg{
    width:100%;
    height:318px;
    border-radius:15px;
  }
  .cases-pdp.cases:before{
    height:100%;
    background-position:70% top;
  }
  .cases.cases-pdp{
    padding-top:220px;
    padding-bottom:20px;
  }
  .case-duddle-icons .dubble-right{
    display:none;
  }
  .cases.cases-pdp .case-duddle-icons .dubble-left{
    width:136px;
    top:-28%;
  }
  .case-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .testimonial.testimonial-yellow{
    padding-bottom:100px;
  }
  .brand-light .brand-duddle-icons .dubble-left{
    width:80px;
    top:-120px;
  }
  .brand-light .brand-duddle-icons .dubble-right{
    width:80px;
    bottom:10%;
  }
  .brand-intro.brand-light{
    padding-top:80px;
    padding-bottom:150px;
  }
  .versus-table{
    max-width:100%;
  }
  /* PDP-hero (mock Kulwant 2026-08-04, 1:1 gemeten op 1320-container):
     galerij 590+110, thumbs 110/9, infokolom vult rest (~535), staffel-
     pitch 35, CTA's 49/45; fonts volgen de tokens */
  .prod-top{
    display:flex;
    flex-direction:column;
    gap:0;
    /* pin: basis-margin ging 2026-08-12 naar 50px (1920) — band houdt 20 */
    margin-top:20px;
  }
  .prod-gallery-col,
  .prod-info{
    display:contents;
  }
  /* volgorde per tablet-mock: titel/tekst/rating -> galerij -> usps ->
     staffel -> knoppen */
  .prod-hero .breadcrumb{
    padding-top:10px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul{
    margin-top:10px;
  }
  .prod-info h1{ order:1; margin-bottom:12px; }
  .prod-info > p{ order:2; }
  /* Ook de blokken die een redacteur via de wysiwyg in Beschrijving kan
     zetten meenemen: zonder eigen order krijgen ze 0 en springen ze op
     mobiel boven de titel. */
  .prod-info > ul,
  .prod-info > ol,
  .prod-info > table{ order:2; }
  .prod-rating{ order:3; }
  .prod-gallery{ order:4; }
  .pdp-usps-main{ order:5; }
  .prod-price-title{ order:6; margin-bottom:18px; }
  .staffel-table.prod-staffel{ order:7; width:100%; margin-bottom:35px; }
  .prod-actions{
    order:8;
    display:flex;
    flex-direction:column;
    gap:12px;
    width:100%;
  }
  .prod-actions .cta,
  .prod-actions .cta-light{
    width:100%;
  }
  .prod-gallery{
    display:block;
    position:relative;
    width:100%;
  }
  .prod-main{
    width:calc(100% - 126px);
    height:auto;
    aspect-ratio:1/1;
  }
  .prod-thumbs{
    --thumb-gap:9px;
    gap:var(--thumb-gap);
  }
  .prod-thumb{
    height:auto;
    border-radius:15px;
  }
  .prod-thumbs{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:110px;
    display:grid;
    /* Vaste rijhoogte in plaats van 1fr. Met minmax(0,1fr) werd de volle
       kolomhoogte over ALLE thumbs verdeeld, dus bij 10 stuks bleef er 41px
       per thumb over en werden ze platgedrukt (melding Kulwant 2026-08-25,
       kerstsokken op 768px). Deze berekening geeft precies de hoogte die 5
       thumbs nu al hadden — 5 rijen plus 4 gaps van 15px — dus bij 5 of
       minder verandert er niets en scrollt de kolom pas daarboven. Zelfde
       aanpak als in de >=992-band. */
    grid-auto-rows:calc((100% - 4 * var(--thumb-gap)) / 5);
    overflow-y:auto;
    /* zelfde huisstijl-scrollbar als in de >=992-band */
    /* Geen zichtbare scrollbar: de pijlen wijzen de weg en de
       halve zesde thumb laat zien dat er meer is. */
    scrollbar-width:none;
    --thumb-gap:15px;
    gap:var(--thumb-gap);
  }
  /* Safari kent scrollbar-width niet, die heeft deze regel nodig. */
  .prod-thumbs::-webkit-scrollbar{ display:none; }
  /* Meer dan vijf foto's: 5,5 rij in dezelfde kolomhoogte, zodat de
     zesde half in beeld staat en te zien is dat de strip scrolt (R2-9).
     De klasse komt uit de template, die de foto's gewoon telt. */
  .prod-thumbs.heeft-meer{
    grid-auto-rows:calc((100% - 5 * var(--thumb-gap)) / 5.5);
  }
  .prod-thumb{
    min-height:0;
  }
  .pdp-usps-main{
    margin-top:32px;
    margin-bottom:63px;
    width:100%;
    /* pin: basis centreert 2026-08-12 op de pagina (left-calc) — alleen 1920 */
    left:0;
  }
  /* pin: basis-padding-top ging 2026-08-12 naar 120px (1920) — band houdt 60 */
  .promises{
    padding-top:60px;
  }

  .pdp-usps-main ul{
    margin-top:0;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 15px;
  }
  .pdp-usps-main ul li{
    white-space:nowrap;
  }
  .prod-rating{
    margin-bottom:33px;
  }
  .prod-info p{
    margin-bottom:20px;
  }
  .prod-info .staffel-row{
    padding:5px 20px;
  }
  .prod-info .staffel-row.staffel-head-row{
    padding:6px 20px;
  }
  .prod-actions .cta{
    height:49px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .prod-actions .cta-light{
    height:45px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .specs-grid{
    grid-template-columns:1fr;
  }
  .weave-inner h2{
    margin-bottom:60px;
  }
  .specs-section{
    padding-top:120px;
    position:relative;
    /* pin: basis-padding-bottom ging 2026-08-12 naar 50px (1920) — band houdt 70 */
    padding-bottom:70px;
  }
  .specs-section:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:45%;
    background:var(--blue);
    z-index:0;
  }
  .specs-section .container{
    position:relative;
    z-index:1;
  }
  .promise-card{
    padding:25px;
  }
  .weave{
    padding-top:30px;
  }
  .weave-img{
    height:240px;
    border-radius:0px 0px 15px 15px;
  }
  .weave-grid{
    gap:10px;
  }
  .weave-body h5{
    font-size:calc(var(--h5-font-size) - 2px);
  }
  .weave-tag{
    font-size:var(--body-sm-font-size);
  }
  .weave-inner:before{
    bottom:-1%;
    background-size:150%;
    background-position:center bottom;
  }
  .weave-body{
    padding:25px 20px;
  }
  /* versus-tabel per tablet-mock: label 58% / SOKKIES 20% / De rest 22% */
  .versus-table{
    table-layout:fixed;
  }
  .versus-table thead th:nth-child(1){ width:58%; }
  .versus-table thead th:nth-child(2){ width:20%; }
  .versus-table thead th:nth-child(3){ width:22%; }
  .versus-dubble-left{
    width:170px;
    top:-17%;
  }
  .specs-duddle-icons .dubble-right{
    width:150px;
    top:-60px;
  }
  .specs-duddle-icons .dubble-left{
    width:125px;
    bottom:-115px;
  }
  .versus{
    padding-top:60px;
    width:100%;
    padding-bottom:80px;
  }
  .cards-suggestion{
    padding-top:80px;
  }
  .design-now{
    padding-top:20px;
    padding-bottom:80px;
  }
  .promises-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  /* weave: scroll-rij — 1 kaart + 30% tweede */
  .weave-grid{
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .weave-grid::-webkit-scrollbar{
    display:none;
  }
  .weave-card{
    flex:0 0 calc((100% - 10px)/1.3);
  }
  /* versus: vaste tabelbreedte, scrollt in de wrapper */
  .versus-scroll{
    overflow-x:auto;
  }
  .versus-table{
    min-width:700px;
  }
  .design-bg-union{
    bottom:-1px;
    background-image:url(../media/configurator-bg-ipad.png);
    aspect-ratio:769/1203;
  }
  .design-duddle-sock{
    display:none;
  }
  .conf-preview{
    max-width:860px;
  }
  .conf-preview-card{
    height:410px;
  }
  .usecases{
    padding-top:100px;
    padding-bottom:40px;
  }
  .usecases-head{
    padding:0 0 40px;
  }
  .usecases-head h2{
    text-align:center;
    margin-bottom:0px;
  }
  .usecases-cards-inner{
    gap:22px;
  }
  .usecases-masonry{
    gap:30px;
    grid-template-columns:1fr;
  }
  .usecase-body h5{
    font-size:calc(var(--h5-font-size) - 3px);
  }
  .usecases-outer-right{
    gap:30px;
  }
  .usecase-img-md{
    border-radius:15px;
    height:222px;
  }

  /* footer-betaalstrip: logorij wikkelt onder ~605px i.p.v. h-scroll
     (zelfde fix als de goedgekeurde mobiele band) */
  .footer-pay-inner{
    flex-wrap:wrap;
    height:auto;
    justify-content:center;
  }
  /* ═══ Configurator — GEKOPIEERD UIT DE 768-991-BAND (verzoek Kulwant
     2026-08-06); band-eigen fijnslijpen volgt ═══ */
  .conf-preview-card img{
    border-radius:25px;
  }
  .banner-section.configurator-banner{
    padding-bottom:60px;
  }
  .conf-hero-btns{
    margin-bottom:0px;
  }
  .configurator-section ul{
    gap:30px 60px;
  }
  .conf-works .process-split-inner{
    gap:60px;
    grid-template-columns:1fr;
  }
  /* Collectie-tabletregel .process-left{66%} geldt hier niet */
  .conf-works .process-left{
    width:100%;
  }
  .conf-works .process-left ul{
    width:100%;
  }
  .conf-check{
    width:100%;
  }
  .conf-works .process-collage{
    width:100%;
  }
  /* collage: page-scoped via .conf-works (gedeeld met Collectie/toepassingen);
     base .conf-works-inner heeft align-items:end — hier boven uitgelijnd */
  .conf-works .process-collage{
    align-self:start;
  }
  .conf-works .process-collage img{
    height:220px;
  }
  .conf-types{
    padding-top:90px;
    padding-bottom:40px;
  }
  .conf-bg{
    background-size:cover;
    height:1280px;
    top:-48%;
    background-position:90% top;
  }
  /* cases-solid-gescoped: PDP heeft dezelfde duddle-structuur */
  .cases.cases-solid{
    padding-top:100px;
  }
  .cases.cases-solid .case-duddle-icons .dubble-left{
    width:210px;
    top:-12%;
  }
  .case-sock-right{
    width:210px;
  }
  .cases.conf-designed{
    padding-top:120px;
    padding-bottom:60px;
  }
  /* testimonial-light-gescoped: .testimonial is gedeeld (Collectie final, PDP-yellow) */
  .testimonial.testimonial-light{
    padding-top:50px;
    padding-bottom:90px;
  }
  .brand-intro-yellow .brand-duddle-icons .dubble-left{
    width:81px;
    top:-16%;
  }
  .brand-intro-yellow .brand-duddle-icons .dubble-right{
    width:81px;
    bottom:2%;
  }
  /* ═══ Werkwijze — GEKOPIEERD UIT DE 768-991-BAND (verzoek Kulwant
     2026-08-06); band-eigen fijnslijpen volgt ═══ */
  .steps-section{
    padding:90px 0px 70px;
  }
  .step-card-img{
    height:380px;
    border-radius:25px;
  }
  .step-card-body{
    gap:40px;
    padding:0px 20px;
  }
  .cases.cases-bg-pink{
    padding-top:90px;
    padding-bottom:0px;
  }
  /* compound (conventie): .calculator is gedeeld met home */
  .calculator.calculator-pink{
    padding-top:80px;
  }
  .cases.cases-bg-pink:before{
    height:95%;
    top:-150px;
  }
  /* LET OP: net als de 3 eerdere feet-overrides in deze band geldt dit
     bandbreed op alle pagina's met cta-final-feet (laatste wint) */
  .cta-final-feet{
    top:-65%;
    left:20px;
    width:41%;
  }
  /* ═══ Reviews-en-cases — GEKOPIEERD UIT DE 768-991-BAND (verzoek Kulwant
     2026-08-06); band-eigen fijnslijpen volgt ═══ */
  .case-card-img{
    height:280px;
  }
  .case-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .simple-hero-content p{
    width:90%;
  }
  .cases.review-cases:before{
    height:100%;
    top:-100px;
  }
  .chip{
    padding:8px 14px;
  }
  .case-grid-section{
    padding:70px 0px 0px;
  }
  .brands.brands-beige{
    padding-bottom:0px;
  }
  /* ═══ Reviews-en-cases-detail — GEKOPIEERD UIT DE 768-991-BAND (verzoek
     Kulwant 2026-08-06); band-eigen fijnslijpen volgt ═══ */
  .sock-duddle-object{
    width:110px;
    bottom:36%;
    transform:rotate(45deg);
    left:35%;
  }
  .impact-inner.case-story-inner .impact-gallery{
    width:580px;
  }
  .case-specs{
    padding:0px 0 40px;
  }
  .case-spec{
    border-radius:15px;
    padding:15px 20px;
    height:80px;
    gap:6px;
  }
  .case-specs-grid{
    gap:10px;
  }
  .case-video{
    padding:140px 0 110px;
    background:none;
    position:relative;
    z-index:1;
  }
  .case-bg-union{
    top:-45%;
    height:1060px;
    background-position:left 25% top;
    background-size:245%;
  }
  .case-result{
    padding-top:40px;
    padding-bottom:100px;
    overflow:hidden; /* rotatie-overhang van de result-grid (-3.5deg) */
  }
  .case-result.case-result-detail{
    background:none;
  }
  .case-others{
    padding:90px 0px;
  }
  .case-video-inner{
    height:410px;
    max-width:100%;
  }
  .case-video-card img{
    height:100%;
  }
  .case-video-doodle-r{
    right:5%;
    top:25%;
    width:200px;
  }
  /* scroll-rij (huispatroon): full-bleed zonder zijpadding, 1 foto vol +
     tweede 50% zichtbaar; rotatie eruit */
  .case-result-grid{
    gap:12px;
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
    width:100vw;
    margin-left:calc(50% - 50vw);
    transform:none;
  }
  .case-result-grid::-webkit-scrollbar{
    display:none;
  }
  .case-result-grid img{
    flex:0 0 calc((100% - 12px)/1.5);
  }
  .case-result-grid img{
    height:340px;
  }
  .case-quote{
    max-width:100%;
  }
  .case-result-bg{
    height:75%;
  }

  /* ═══ Offerte — GEKOPIEERD UIT DE 768-991-BAND (verzoek Kulwant
     2026-08-07); band-eigen fijnslijpen volgt ═══ */
  .quote-wrap{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    align-items:start;
  }
  .quote-aside{
    padding:20px;
  }
  .stepper-label{
    display:none;
  }
  /* stepper één regel, dots strak naast elkaar (mock 2026-08-07) */
  .stepper{
    flex-direction:row;
    align-items:center;
    gap:15px;
    margin-bottom:30px;
  }
  .stepper-item{
    flex:0 0 auto;
    width:auto;
    flex-direction:row;
  }
  .mini-footer-left{
    display:none;
  }
  .quote-card{
    padding:20px;
  }
  .quote-section{
    margin-top:20px;
  }
  /* usps één regel — offerte-banner-marker (usps is gedeeld met home) */
  .banner-section.offerte-banner .usps{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 20px;
  }
  .banner-section.offerte-banner .usps span{
    white-space:nowrap;
  }
  .type-picker{
    gap:20px 10px;
    grid-template-columns:repeat(3,1fr);
  }
  .application-section:after{
    width:192px;
    bottom:-27%;
  }
  .application-bg-shape{
    height:630px;
    background-position:center left 25%;
  }
  .application-steps{
    gap:40px;
    max-width:100%;
    grid-template-columns:1fr;
    margin:0;
  }
  /* stap: nummer-cirkel links, tekst rechts (mock 2026-08-07) */
  .application-step{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:24px;
    align-items:start;
    text-align:left;
  }
  .application-step .application-num{
    grid-row:1 / 3;
  }
  .application-step h3{
    grid-column:2;
    margin-bottom:0px;
  }
  .application-step p{
    grid-column:2;
    width: 100%;
  }
  .application-section{
    padding:40px 0px 80px;
  }
  .banner-section.offerte-banner{
    padding-bottom:60px;
  }
  /* alleen deze pagina: faq-light is offerte-uniek (band-generiek .faq = 220) */
  .faq.faq-light{
    padding-bottom:20px;
  }
  .application-sample-request .application-steps{
    max-width:100%;
  }
  /* ═══ Bedankt — GEKOPIEERD UIT DE 768-991-BAND (verzoek Kulwant
     2026-08-07); band-eigen fijnslijpen volgt ═══ */
  .follow-outer-main{
    height:860px;
  }
  .thanks-status{
    padding:60px 0 0px;
  }
  .thanks-status:before{
    display:none;
  }
  .thanks-steps{
    text-align:center;
  }
  .thanks-step{
    display:grid;
    grid-template-columns:auto auto;
    justify-content:start;
    column-gap:14px;
    text-align:left;
  }
  .thanks-step-dot{
    grid-row:1/3;
    align-self:center;
    margin-bottom:0;
  }
  .thanks-steps{
    margin-bottom:60px;
    gap:40px;
  }
  .wait-img{
    height:280px;
  }
  .follow{
    padding:0px;
  }
  .follow-inner{
    flex-wrap:wrap;
    gap:40px;
  }
  .newsletter-card{
    padding:35px;
  }
  /* ═══ Toepassingen — GEKOPIEERD UIT DE 768-991-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .usecase-why{
    padding-bottom:0px;
  }
  .usecase-why ul{
    grid-template-columns:repeat(2,1fr);
  }
  .usecases-flat .usecase-img{
    height:240px;
  }
  .usecases-flat .usecase-card{
    padding:8px;
  }
  .usecases-grid{
    gap:10px;
    grid-template-columns:repeat(2,1fr);
  }
  .toepassingen .collection-beige{
    margin-top:20px;
  }
  .toepassingen .collection-beige:before{
    top:-460px;
  }
  .toepassingen .cases{
    padding-top:230px;
  }
  .toepassingen .cases:before{
    background-position:left 80% top -120px;
  }
  .toepassingen .cases:after{
    width:130px;
  }
  .toepassingen .calculator-bg:before{
    background-position:33% bottom;
  }
  .toepassingen .uc-bg-yellow-shape{
    height:520px;
  }
  .toepassingen .brand-light .brand-duddle-icons .dubble-left{
    width:80px;
    top:-50px;
  }
  .toepassingen .brand-light .brand-duddle-icons .dubble-right{
    width:80px;
  }
  /* process-split volgt de generieke gestapelde layout van deze band */
  .toepassingen .brand-intro.brand-light{
    padding-top:90px;
    padding-bottom:100px;
  }
  /* bandbreed rolling patroon (conventie van deze band) */
  .cta-final-feet{
    width:48%;
  }
  /* ═══ Veelgestelde vragen — GEKOPIEERD UIT DE 768-991-BAND (verzoek
     Kulwant 2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .faq-cat-group{
    margin-bottom:40px;
  }
  .faq-cats{
    padding-top:40px;
  }
  .faq-cats-filter{
    gap:5px;
    /* overflow:visible — de case-filter-scrollrij (reviews-regel) knipte het
       dropdown-paneel anders af binnen de rij */
    overflow:visible;
  }
  /* Chips → dropdown in deze band (mock 2026-08-10) */
  .faq-cats-filter .chip{
    display:none;
  }
  .faq-page .faq-cats-select{
    display:block;
    flex:1;
    /* min-width:0: flex-minimum is anders de breedste optie → rij liep uit beeld */
    min-width:0;
    margin-top:0;
  }
  .faq-page .faq-cats-select .dropdown-trigger{
    padding:12px 15px 14px;
    border-radius:8px;
  }
  .faq-page .faq-cats-select.open .dropdown-trigger{
    border-radius:8px 8px 0 0;
  }
  /* page-scoped: .chip is gedeeld met reviews-en-cases */
  .faq-page .chip{
    padding:10px 18px;
  }
  .faq-page .faq-item.is-open .faq-q{
    border-bottom:none;
  }
  /* ═══ Over ons — GEKOPIEERD UIT DE 768-991-BAND (verzoek Kulwant
     2026-08-10); duurz-regels in het SEED-blok hieronder; overons-story
     volgt hier de gestapelde usecases-layout van de PDP (verzoek Kulwant —
     eigen beelden/maten behouden); band-eigen fijnslijpen volgt ═══ */
  .timeline{
    padding-bottom:0px;
  }
  /* Hero: 2 slides volledig + 2 slivers van 5% (spec Kulwant) — gap is hier
     14px (0-breakpoint van de swiper); 2.1W + 3×14 = 100vw */
  .over-ons .gallery-swiper .swiper-slide{
    width:calc((100vw - 42px) / 2.1);
    height:340px;
  }
  .over-ons .gallery-swiper{
    width:calc(100% + (100vw - 42px) * 0.904762);
    margin-left:calc((100vw - 42px) * -0.452381);
    padding-top:0px;
  }
  /* stagger omlaag (zie 768-band): binnen de clippende .gallery-box */
  .over-ons .gallery-swiper .swiper-slide{
    transform:translateY(25px);
  }
  .over-ons .gallery-swiper .swiper-slide:nth-child(3n + 1){
    transform:translateY(0);
  }
  /* story gestapeld à la PDP-usecases 521: één kolom, beeldparen blijven rijen */
  .overons-story{
    padding:40px 0 0px;
  }
  .overons-story-inner{
    /* minmax(0,1fr): kale 1fr floort op de intrinsieke minimummaat van het
       beeldpaar (800px) en liep uit beeld — zelfde les als de base-fix */
    grid-template-columns:minmax(0,1fr);
    gap:30px;
  }
  .overons-story-right{
    display:flex;
    flex-direction:column;
    gap:30px;
  }
  .story-collage{
    gap:10px;
  }
  .story-collage-right{
    gap:10px;
  }
  .overons-values{
    padding:200px 0 100px;
  }
  .overons-values h2{
    margin-bottom:40px;
  }
  .overons-values ul{
    gap:40px;
    grid-template-columns:repeat(2,1fr);
  }
  .over-ons .impact:before{
    top:-80px;
  }
  .overons-reviews{
    padding:80px 0px;
  }
  .duurz-doodle{
    width:140px;
    top:-68px;
    left:70%;
  }
  .duurz-text h3{
    margin-bottom:10px;
  }
  .over-ons .cta-final-feet{
    width:190px;
    top:-200px;
    right:26px;
  }

  /* ═══ Over ons — SEED: duurz volgt de cases-sectie van home (verzoek
     Kulwant 2026-08-10); de rest van de pagina volgt in de bandronde ═══ */
  .duurz-inner{
    gap:50px;
    grid-template-columns:1fr;
  }
  .duurz-collage{
    gap:20px;
    flex-direction:column;
    width:100%;
  }
  .duurz-collage-col{
    gap:20px;
    /* de twee kleintjes naast elkaar in één rij (correctie Kulwant) */
    flex-direction:row;
  }
  .duurz-collage .img-lg{
    width:100%;
    height:260px;
  }
  .duurz-collage-col .img-sm{
    width:calc(50% - 10px);
    height:120px;
  }
  /* ═══ Duurzaamheid — GEKOPIEERD UIT DE 768-991-BAND (verzoek Kulwant
     2026-08-10); dz-points-regels in het SEED-blok hieronder;
     band-eigen fijnslijpen volgt ═══ */
  .duurzaamheid .cta-final-feet{
    width:160px;
    top:-201px;
  }
  .dz-certs{
    padding-top:0px;
    padding-bottom:100px;
  }
  .dz-points{
    padding-top:0px;
  }
  .dz-certs:before{
    background-size:cover;
    background-position:right 18% top;
    /* pin: basis-bottom ging 2026-08-12 naar -40px (1920) — band houdt 0 */
    bottom:0px;
  }
  /* Certs-menu als dropdown: intro centraal, absolute trigger-rij
     (60px gereserveerd — open lijst overlapt de panes) */
  .dz-certs .container > p{
    width:100%;
    text-align:center;
  }
  .dz-certs-inner{
    gap:30px;
    grid-template-columns:1fr;
    padding-top:60px;
  }
  .dz-certs-menu{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:5;
    background:var(--coral);
    border:1.5px solid #fff;
    border-radius:12px;
    overflow:hidden;
    padding-left:30px;
  }
  .dz-certs-menu li{
    display:none;
  }
  .dz-certs-panes{
    padding-top:50px;
  }
  .dz-pane{
    gap:40px;
    grid-template-columns:1fr;
  }
  .dz-keur{
    padding-top:0px;
  }
  .dz-keur-grid{
    grid-template-columns:1fr;
  }
  .dz-certs-menu li:has(button.active),
  .dz-certs-menu.open li{
    display:block;
  }
  .dz-certs-menu button{
    border-top:0;
    padding:17px 48px 17px 18px;
  }
  .dz-certs-menu.open li + li button{
    border-top:1px solid rgba(255,255,255,.4);
  }
  .dz-certs-menu:after{
    content:"";
    position:absolute;
    top:24px;
    right:20px;
    width:14px;
    height:9px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 11.414 6.414'%3E%3Cpath d='M482.224,63.112l5,5,5-5' transform='translate(-481.517,-62.405)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events:none;
    transition:transform .2s;
  }
  .dz-certs-menu.open:after{
    transform:rotate(180deg);
  }

  /* ═══ Duurzaamheid — SEED: dz-points volgt overons-duurz/cases (verzoek
     Kulwant 2026-08-10); rest van de pagina volgt in de bandronde ═══ */
  .dz-points-inner{
    gap:50px;
    grid-template-columns:minmax(0,1fr);
  }
  .dz-points .story-collage{
    flex-direction:column;
    gap:20px;
    width:100%;
  }
  .dz-points .story-collage img{
    flex:0 0 auto;
  }
  .dz-points .story-collage .img-lg{
    order:-1;
    width:100%;
    height:260px;
  }
  .dz-points .story-collage .img-sm{
    width:100%;
    height:120px;
  }
  /* ═══ Waarom Sokkies — GEKOPIEERD UIT DE 768-991-BAND (verzoek Kulwant 2026-08-10): ws-intro-grid volgt de usecases-masonry
     van de PDP (verzoek Kulwant 2026-08-10); kleine kaart per rijvariant
     (sm-lg: eerste, lg-sm: laatste), eigen offsets geneutraliseerd ═══ */
  /* ws-gets volgt de VOLLEDIGE process-split-familie (verzoek Kulwant
     2026-08-10): sectie, kop, lijstritme, collagebeelden, offsets */
  .ws-gets{
    padding-top:220px;
  }
  .ws-gets:before{
    background-position:right 30% top;
  }
  .ws-gets-num{
    flex:0 0 70px;
  }
  .ws-gets-left h2{
    font-size:var(--h2-font-size);
    text-align:center;
  }
  .ws-gets-left{
    width:100%;
    margin-inline:auto;
  }
  .ws-gets-left ol li{
    padding:20px 0 25px;
  }
  .ws-gets-imgcol img{
    height:auto;
    aspect-ratio:1/1;
  }
  .ws-gets-imgcol-offset{
    margin-top:0;
  }
  /* ws-gets-inner volgt process-split-inner (verzoek Kulwant 2026-08-10) */
  .ws-gets-inner{
    grid-template-columns:1fr;
    gap:60px;
  }
  .ws-intro-grid{
    gap:30px;
    grid-template-columns:1fr;
  }
  .ws-intro-head{
    padding:0 0 40px;
    text-align:center;
    margin-bottom:20px;
  }
  .ws-intro-head h1{
    margin-bottom:16px;
  }
  .ws-intro-head p{
    margin:0 auto;
  }
  .ws-row-gap{
    margin-top:30px;
  }
  .ws-row{
    display:flex;
    gap:22px;
  }
  .ws-row-sm-lg > .ws-card:first-child,
  .ws-row-lg-sm > .ws-card:last-child{
    width:40.5%;
    flex-shrink:0;
  }
  .ws-row-sm-lg > .ws-card:last-child,
  .ws-row-lg-sm > .ws-card:first-child{
    flex:1;
    min-width:0;
  }
  .ws-row-sm-lg > .ws-card:last-child img,
  .ws-row-lg-sm > .ws-card:first-child img{
    width:100%;
    height:318px;
    border-radius:15px;
    object-fit:cover;
  }
  .ws-row-sm-lg > .ws-card:first-child img,
  .ws-row-lg-sm > .ws-card:last-child img{
    width:100%;
    height:222px;
    border-radius:15px;
    object-fit:cover;
  }
  .ws-card-offset{
    margin-top:0;
  }
  /* ═══ Partners — GEKOPIEERD UIT DE 768-991-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  /* h5-herijkingen per band (afspraak — base's −12/−22 blijven staan) */
  .pt-perks-card h3{
    font-size:calc(var(--h5-font-size) - 1px);
  }
  .pt-perks{
    padding:80px 0 80px;
  }
  .pt-perks-grid{
    gap:15px;
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .pt-perks-card{
    padding:25px;
    border-radius:15px;
  }
  .pt-partners h2{
    font-size:calc(var(--h5-font-size) + 1px);
  }
  .pt-partners-chips{
    width:100%;
    max-width:100%;
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .pt-partners-chips::-webkit-scrollbar{
    display:none;
  }
  .pt-partners-chips button{
    flex:0 0 auto;
  }
  .pt-partners-grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:15px 10px;
  }
  .pt-otp{
    padding-top:400px;
  }
  .pt-otp:before{
    height:300px;
    background-position:right 56% top;
    background-size:cover;
    /* pin: basis-top ging 2026-08-12 naar -130px (1920) — band houdt 0 */
    top:0px;
  }
  .pt-otp-inner{
    grid-template-columns:minmax(0,1fr);
    gap:50px;
    align-items:center;
  }
  .pt-otp-text{
    order:-1;
    max-width:none;
  }
  .pt-otp-legs{
    width:440px;
    top:-180px;
  }
  .pt-otp-doodle{
    width:260px;
    top:230px;
  }
  .pt-faq{
    padding-top:230px;
  }
  .pt-faq:before{
    background-position:right 25% top;
    background-size:cover;
    top:-100px;
  }
  .pt-dl-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .pt-dl-grid > :last-child{
    grid-column:1 / -1;
  }
  /* ═══ Downloads — GEKOPIEERD UIT DE 768-991-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .dl-cards-grid{
    gap:20px 15px;
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  /* verticale kaart: beeld boven, body eronder */
  .dl-card{
    gap:20px;
    flex-direction:column;
    align-items:stretch;
    border-radius:15px;
    padding:15px;
  }
  .dl-card-img{
    flex:0 0 auto;
    width:100%;
  }  /* Mis niets-formulier: velden onder elkaar */
  .dl-niets-card{
    grid-template-columns:1fr;
  }
  /* ═══ Contact — GEKOPIEERD UIT DE 768-991-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .contact .banner-section{
    padding:62px 20px 60px;
  }
  .ct-form-grid{
    gap:20px 26px;
  }
  .ct-form-card{
    border-radius:20px;
    padding:40px 35px 35px;
  }
  /* gestapeld: beide secties vol breed */
  .ct-contact-inner{
    gap:30px;
    grid-template-columns:minmax(0,1fr);
  }
  /* ═══ Juridisch — GEKOPIEERD UIT DE 768-991-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .jr-index{
    padding:18px 25px;
    position:fixed;
    bottom:20px;
    left:20px;
    right:20px;
    z-index:90;
    background:#fff;
    border-radius:12px;
    /* pin: basis werd 2026-08-12 sticky top:130 (1920) — onderbalk houdt top auto */
    top:auto;
  }
  .jr-index h3{
    margin:0;
    cursor:pointer;
  }
  .jr-index ol{
    display:none;
    margin-top:16px;
    max-height:50vh;
    overflow:auto;
  }
  .jr-index.open ol{
    display:block;
  }
  .jr-index:after{
    content:"";
    position:absolute;
    top:24px;
    right:25px;
    width:14px;
    height:9px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 11.414 6.414'%3E%3Cpath d='M482.224,68.8l5-5,5,5' transform='translate(-481.517,-62.7)' fill='none' stroke='%2328121b' stroke-linecap='round' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events:none;
    transition:transform .2s;
  }
  .jr-index.open:after{
    transform:rotate(180deg);
  }
  .jr-content{
    padding-top:40px;
    padding-bottom:70px;
  }
  .jr-inner{
    grid-template-columns:minmax(0,1fr);
    gap:0px;
  }
  .jr-body{
    grid-column:1;
    grid-row:2;
    max-width:none;
  }  .jr-print{
    position:sticky;
    top:130px;
    grid-column:1;
    grid-row:2;
    justify-self:end;
    align-self:start;
    z-index:5;
  }
  /* ═══ 404 — SEED 521-767 (spec Kulwant 2026-08-12): er-num −10% per band ═══ */
  .er-num{
    font-size:141px;
  }
  .error-404{
    background:var(--white) url(../media/error-page-bg.png) no-repeat left 20% top;
    background-size:cover;
    height:100vh;
  }

  /* ═══════════════════════════════════════════════════════════════
     MOBIELE HEADER OVERGENOMEN (verzoek Kulwant 2026-08-13): de
     volle-breedte witte balk + sheet-menu + subpaneel van ≤520 geldt
     nu ook in deze band (pill/drawer paste niet — "better fit").
     1:1 gekopieerd uit het ≤520-blok, ná de bestaande bandregels
     zodat de mobiele set wint. Topbar-marquee is NIET mee (JS-gate
     blijft ≤520; hier blijft de swipe-strip).
     ═══════════════════════════════════════════════════════════════ */
  header .container{
    max-width: 95.9%;
  }
  .menu{
    gap: 25px;
  }
  .logo{
    display: flex;
    width: 96px;
  }
  .mega{
    padding: 30px;
  }
  header .container{
    max-width: 95.9%;
  }
  .menu{
    gap: 17px;
  }
  .navbar-inner{
    gap: 25px;
  }
  .nav-wrap{
    position:relative;
    padding-right:72px;
  }
  .nav-burger{
    display:flex;
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
  }
  .navbar{
    position:static;
    justify-content:flex-start;
    gap:10px;
    padding:8px 8px 8px 22px;
  }
  .navbar-inner{
    margin-left:auto;
  }
  .logo{
    width:104px;
  }
  .icon-btn{
    width:40px;
    height:40px;
  }
  .globe{
    width:56px;
    height:56px;
  }
  .navbar .cta{
    white-space:nowrap;
    padding:9px 14px;
    font-size:13px;
  }
  .navbar-inner .menu{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    background:var(--white);
    border-radius:20px;
    box-shadow:0 14px 34px rgba(0,0,0,.16);
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:14px;
    z-index:80;
    max-height:calc(100vh - 140px);
    overflow-y:auto;
  }
  .navbar.menu-open .menu{
    display:flex;
  }
  .navbar-inner .menu > li > a{
    display:block;
    padding:12px 14px;
    font-size:17px;
  }
  .menu .caret{
    display:none;
  }
  .mega{
    display:none !important;
  }
  .navbar.sub-open .menu{
    padding:24px 28px 30px;
  }
  .navbar.sub-open .menu > li > a{
    display:none;
  }
  .navbar.sub-open .mega{
    display:grid !important;
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    border-radius:0;
    padding:0;
    grid-template-columns:1.6fr 1fr;
    gap:0 34px;
    justify-items:stretch;
    justify-content:stretch;
  }
  .navbar.sub-open .mega-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    grid-column:1 / -1;
    justify-self:start;
    border:none;
    background:none;
    padding:0;
    font-family:var(--roc-grotesk);
    font-size:15px;
    font-weight:600;
    color:var(--text);
    cursor:pointer;
    margin-bottom:24px;
  }
  .navbar.sub-open .mega-mob-title{
    display:block;
    grid-column:1 / -1;
    font-size:22px;
    font-weight:700;
    margin-bottom:20px;
  }
  .navbar.sub-open .bestsellers-col{
    grid-column:1;
    grid-row:3 / span 2;
  }
  .navbar.sub-open .types-col{
    grid-column:2;
    grid-row:3;
  }
  .navbar.sub-open .mega-usps{
    grid-column:2;
    grid-row:4;
    margin-top:18px;
  }
  .navbar.sub-open .mega-usps h4{
    display:none;
  }
  .navbar.sub-open .mega-usps span{
    font-size:14px;
  }
  .navbar.sub-open .bestsellers{
    grid-template-columns:1fr 1fr;
    gap:30px 10px;
  }
  .navbar.sub-open .prod-card .prod-price{
    font-size:14px;
  }
  .navbar.sub-open .prod-card .prod-img-card{
    height:150px;
  }
  .navbar.sub-open .types{
    grid-template-columns:1fr;
    gap:14px;
  }
  /* De band zette het item op twee gelijke kolommen; met de types nu
     onder elkaar knelde het label in de halve breedte en brak een naam
     als Yoga & pilates over twee regels. Vierkantje op eigen maat, het
     label krijgt de rest - net als in de basis. */
  .menu .menu-link .type-item{
    grid-template-columns:auto 1fr;
  }
  .navbar.sub-open .type-item .type-img{
    width:50px;
    height:50px;
  }
  .nav-search{
    right:52px;
  }
  .navbar.search-open .nav-search{
    width:calc(100% - 120px);
  }
  .nav-search-input{
    font-size:15px;
  }
  .topbar{
    position:sticky /* was relative; sticky chrome 2026-08-12 — anker voor :after blijft werken */;
    overflow:hidden;
  }
  .topbar ul{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .topbar ul::-webkit-scrollbar{
    display:none;
  }
  .topbar li{
    white-space:nowrap;
    flex:0 0 auto;
  }
  .navbar .cta{
    display:none;
  }
  header .container{
    max-width:100%;
    padding-left:0;
    padding-right:0;
  }
  header .nav-wrap{
    top:0;
  }
  .nav-wrap.navbar-mini-main{
    padding:10px 16px 10px 16px;
  }
  .nav-wrap{
    background:var(--white);
    border-radius:0 0 16px 16px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    padding:10px 66px 10px 16px;
    gap:10px;
    min-height:62px; /* hoogte vast: in substate verdwijnen logo/iconen
                        en zakte de balk naar 20px — de X sprong omhoog */
  }
  .navbar{
    background:transparent;
    box-shadow:none;
    border-radius:0;
    padding:0;
  }
  .logo{
    width:100px;
  }
  .actions{
    gap:8px;
  }
  .icon-btn{
    width:38px;
    height:38px;
  }
  .globe{
    width:38px;
    height:38px;
    box-shadow:none;
    border:1.5px solid #e3e3e3;
  }
  .nav-burger{
    width:44px;
    height:44px;
    right:14px;
  }
  .navbar.menu-open{
    background:transparent;
    box-shadow:none;
  }
  .navbar.menu-open .menu{
    position:fixed;
    top:30px;
    height:calc(100vh - 30px); /* volledige schermhoogte onder de topbar */
    max-height:none;
    padding:100px 20px 26px;
    border-radius:0;
    gap:0;
    z-index:-1;
  }
  .navbar-inner .menu > li > a{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:32px;
    text-align:center;
    padding:16px 12px;
  }
  .menu > li + li{
    border-top:1px solid var(--border-light);
  }
  .menu .menu-link.active > a{
    color:var(--yellow);
  }
  .menu-home{
    display:block;
  }
  .menu-prijzen{
    display:none;
  }
  .navbar.sub-open .logo,
  .navbar.sub-open .actions{
    display:none;
  }
  .navbar.sub-open ~ .lang{
    display:none;
  }
  .navbar.sub-open .menu{
    padding:0px 20px 26px;
  }
  .navbar.sub-open .menu > li:not(.has-mega){
    display:none;
  }
  .navbar.sub-open .menu > li{
    border-top:0;
  }
  .navbar.sub-open .mega{
    grid-template-columns:1fr;
    gap:0;
  }
  .navbar.sub-open .mega-back{
    margin-bottom:0px;
  }
  
  .navbar.sub-open .mega-mob-title{
    font-size:24px;
    margin-bottom:16px;
  }
  .navbar.sub-open .bestsellers-col{
    grid-row:auto;
    grid-column:1;
  }
  .navbar.sub-open .types-col{
    grid-row:auto;
    grid-column:1;
    margin-top:58px;
  }
  .navbar.sub-open .mega-usps{
    display:none;
  }
  .navbar.sub-open .prod-card .prod-img-card{
    height:170px;
  }
  .navbar.sub-open .types{
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(3, auto);
    grid-auto-flow:column;
    gap:16px 18px;
  }
  /* De band zette het item op twee gelijke kolommen; met de types nu
     onder elkaar knelde het label in de halve breedte en brak een naam
     als Yoga & pilates over twee regels. Vierkantje op eigen maat, het
     label krijgt de rest - net als in de basis. */
  .menu .menu-link .type-item{
    grid-template-columns:auto 1fr;
  }
  .navbar.sub-open .type-item .type-img{
    width:45px;
    height:45px;
  }
  .navbar.sub-open .menu .menu-link .type-item{
    font-size:15px;
    gap:12px;
  }
  .navbar.sub-open .mega h4{
    font-size:18px;
  }
  .navbar.sub-open .prod-card .prod-name{
    font-size:17px;
  }
  .cta,
  .cta-light,
  .cta-dark{
    font-size:15px;
    height:44px;
    width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
  }
  .hero-btns .cta,
  .hero-btns .cta-light{
    width:100%;
  }
  body:has(.navbar.menu-open) .topbar{
    display:none;
  }
  body:has(.navbar.menu-open){
    padding-top:30px;
    overflow:hidden;
  }
  .navbar.menu-open .menu{
    top:0;
    height:100vh;
  }
  .coll-hero-btns .cta,
  .coll-hero-btns .cta-transparent{
    width:100%;
  }
  .prod-actions .cta,
  .prod-actions .cta-light{
    width:100%;
  }
  .prod-actions .cta{
    height:49px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .conf-sticky .cta{
    width:auto;
    padding-left:45px;
    padding-right:45px;
  }

  /* Correctie mobiele header (2026-08-13, screenshot Kulwant): oude
     pill-lagen wonnen op SPECIFICITEIT van de gekopieerde mobiele set
     (header .nav-wrap width-calc, .navbar .icon-btn 44, .lang .globe 68,
     .navbar .nav-burger 68) — zelfde ≤520-waardes, nu met boost. */
  header .nav-wrap{
    width:100%;
  }
  .navbar .actions .icon-btn{
    width:38px;
    height:38px;
  }
  .lang .globe{
    width:38px;
    height:38px;
    box-shadow:none;
    border:1.5px solid #e3e3e3;
  }
  .navbar .nav-burger{
    width:44px;
    height:44px;
  }

  /* knop-padding (spec Kulwant 2026-08-13, PDP-ronde — geldt bandbreed) */
  .cta,
  .cta-light,
  .cta-dark{
    padding:12px 20px;
  }

  /* ═══ Configurator — 521-ronde testronde 2 (specs Kulwant 2026-08-13) ═══ */
  .configurator-section ul{
    text-align:left;
    justify-content: flex-start;
  }
  .conf-works .process-inner{
    width:80%;
  }
  .conf-check{
    padding:25px;
  }
  .conf-works .process-collage img{
    border-radius:15px;
  }
  /* rolling feet-laag (spec 2026-08-13, configurator-ronde) */
  .cta-final-feet{
    top:-62%;
  }
  /* ═══ Werkwijze — 521-ronde testronde 2 (spec Kulwant 2026-08-13) ═══ */
  .steps-section .steps-nav{
    margin-bottom:35px;
  }
  /* spec 2026-08-13 (reviews-ronde) */
  .case-card{
    border-radius:15px;
  }
  .prod-cost-wrap .pdp-calc {
    width: min(520px, calc(100vw - 40px));
  }
  .prod-cost-wrap .pdp-calc-card {
    padding: 40px;
  }
}

/* ===================================================================
   520px en smaller (mobiel — FINAL)
   =================================================================== */
@media (max-width:520px){
  /* Gravity-tegenhanger van .type-picker / .extra-picker (gemeten op htmlv). */
  .quote-card .of-soktypes .gfield_checkbox{ grid-template-columns:repeat(2,1fr); }
  .quote-card .of-extras .gfield_checkbox{ grid-template-columns:repeat(2,1fr); }
  /* mega-hoverbrug is desktop-only (drawer/sheet heeft geen hover-gat) */
  .mega::before{
    display:none;
  }

  /* ws-compare-doodle: alleen 1920-ontwerp (zie basis) */
  .ws-compare-doodle-1{
    display:none;
  }
  /* pin: basis (ws-gets-left ol p) ging 2026-08-12 naar h5-token (1920) —
     band houdt body-lg */
  .ws-gets-left ol p{
    font-size:var(--body-lg-font-size);
  }
  /* pin: basis (ws-compare) kreeg 2026-08-12 padding-top 40 / margin-top -40
     (1920) — band houdt 0/0 */
  .ws-compare{
    padding-top:0px;
    margin-top:0px;
  }
  /* pin: basis-h2 (overons-story) ging 2026-08-12 naar h2-token (1920) —
     band houdt h3-token */
  .overons-story-text h2{
    font-size:var(--h3-font-size);
  }
  /* configurator-doodles + sokkenpatroon: alleen 1920-ontwerp (zie basis,
     zelfde patroon als PDP's design-duddle-sock) */
  .configurator-section .conf-duddle-r,
  .configurator-section .conf-duddle-l,
  .configurator-section:after,
  .conf-works:before,
  .conf-types:before{
    display:none;
  }
  /* pin: basis-h2 ging 2026-08-12 naar h2-token + margin -30 (1920) —
     band houdt de goedgekeurde h3-token + 40 */
  .conf-works > .container > h2{
    font-size:var(--h3-font-size);
    margin-bottom:30px;
  }
   .translatepress-en_GB .conf-works > .container > h2, .translatepress-de_DE .conf-works > .container > h2, .translatepress-fr_FR .conf-works > .container > h2{
    margin-bottom:20px;
  }
  /* ── DEFINITIEVE TYPOGRAFIE-INVENTARIS (PDF Kulwant 2026-08-03) — DE bron
     voor alle content-typografie in deze band; maten hier wijzigen, nooit
     als harde px in sectieregels ── */
  :root{
    --h1-font-size:34px;
    --h2-font-size:32px;
    --h3-font-size:20px;
    --h4-font-size:18px;
    --h5-font-size:15px;
    --h6-font-size:17px;
    --body-font-size:15px;
    --body-lg-font-size:16px;
    --body-sm-font-size:11px;
  }



  /* ————— uit oud ≤1680 ————— */

  .container{
    max-width: min(1440px, 100% - 40px);
  }
  /* 1680-test 2026-07-28: betaal/verzend-strip paste nét niet meer op één
     regel (852+1+533 content + 2×30 gap = 1446 > 1440) en wikkelde lelijk */
  .footer-pay{
    gap:20px 20px;
  }
  /* telefoonnummer in de footer brak midden in het nummer af */
  footer a[href^="tel:"]{
    white-space:nowrap;
  }

  /* ————— uit oud ≤1550 ————— */

  /* 1280-test 2026-07-28: onder de 1320-container past de betaal/verzend-strip
     nooit op één regel — netjes gecentreerd laten wrappen, zwevende divider weg */
  .footer-pay{
    justify-content:center;
    row-gap:16px;
  }
  .footer-pay .border-v{
    display:none;
  }
   .container{
    max-width: min(1320px, 100% - 40px);
  }
  header .container{
    max-width: 95.9%;
  }
  .menu {
    gap: 25px;
  }
  .logo{
    display: flex;
    width: 96px;
  }
  .mega {
    padding: 30px;
  }
  .prod-card .prod-img-card {
    height: 150px;
    border-radius: 10px;
  }
  .types {
    gap: 10px 30px;
  }
  .type-item .type-img {
    width: 58px;
    height: 58px;
    border-radius: 5px;
  }
  .gallery-swiper .swiper-slide {
    width: 314px;
    height: 440px;
  }
  .impact {
    padding: 8px 0 125px;
  }
  .impact-inner {
      height: 465px;
      gap: 56px;
  }
  .impact-gallery {
      width: 890px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul {
    gap: 19px;
  }
  .impact-left {
      padding-inline-start: 0;
  }
  .stat-num {
    font-size: 58px;
  }
  .feat-label{
    font-size:18px;
  }
  .collection:before {
    top: -51%;
    background: url(../media/yellow-shape-1440.svg);
    background-size: cover;
  }
  .collection h2 {
    padding-left: 20px;
  }
  .collection-img {
    height: 200px;
  }
  .collection-name {
    font-size: 17px;
  }
  .collection-card-foot {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 22px;
    gap: 20px;
  }
  .collection-grid {
    gap: 20px;
  }
  .collection-cta{
    margin-top: 30px;
  }
  .collection:after {
    bottom: -16%;
  }
  .v-swiper .swiper-slide {
    width: 276px;
    height: 345px;
    border-radius: 15px; 
  }
  .process {
    padding: 155px 0 120px;
  }
  .process:not(.conf-works) > .container > h2{
    padding-top: 0;
    margin-bottom: 30px;
  }
  .process-steps {
    gap: 67px;
  }
  .calc-grid {
    grid-template-columns: 1fr 440px;
  }
  .calc-panel {
    padding: 40px;
  }
  .calc-mid{
    grid-template-columns: 440px 1fr;
    gap: 35px;
  }
  .calc-hint{
    height: 100%;
    border: 1px solid #1DD665;
  }
  .staffel-row {
    padding: 8px 20px;
  }
  .calc-panel h3 {
    margin-bottom: 20px;
  }
  .calc-result {
    padding-top: 5px;
  }
  .calc-row{
    margin-bottom: 20px;
  }
  .calc-total-row{
    margin-bottom: 8px;
  }
  .calc-field {
    margin-bottom: 20px;
  }
  .staffel-head-row {
    padding: 8px 20px;
    height: 36px;
  }
  .gift {
    padding: 100px 0 70px;
  }
  .gift-img {
    height: 295px;
    border-radius: 10px;
  }
  .cases {
    padding: 95px 0 50px;
  }
  .case-inner {
    gap: 50px;
  }
  .case-img.case-img-main {
    height: 382px;
    width: 382px;
  }
  .case-img {
    border-radius: 15px;
    width: 248px;
    height: 180px;
  }
   .cases:before{
    background:url(../media/blue-shape-lg.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .cases-feet {
    top: -22%;
    right: 3%;
    width: 204px;
    height: 304px;
  }
  .designed {
    margin-top: 102px;
  }
  .designed-swiper .swiper-slide {
    width: 295px;
    height: 295px;
    border-radius: 15px;
  }
  .designed-swiper {
    width: 105vw;
  }
  .brand-intro-inner {
    max-width: 60%;
  }
  .brand-intro {
    padding: 70px 0 100px;
  }
  .brand-intro-inner h2 {
    margin-bottom: 10px;
  }
  .brand-duddle-icons .dubble-left {
    top: -19%;
    left: 4%;
    width: 81px;
    height: auto;
  }
  .brand-duddle-icons .dubble-right {
    bottom: 4%;
    right: 4%;
    width: 81px;
    height: auto;
  }

  .faq-q {
    padding: 14px 4px;
  }
  .faq-grid {
    grid-template-columns: 382px 1fr;
    gap: 135px;
  }
  .faq-left p {
    max-width: 100%;
  }
  .faq-a-inner p{
    max-width: 100%;
  }
  .cta-final-feet {
    top: -79%;
    left: 69px;
    width: 31%;
  }

  .footer-grid {
    grid-template-columns: 1.32fr auto 1.35fr;
  }

  .footer-brand p {
    max-width: 94%;
    margin-bottom: 30px;
  }
  .footer-certs {
    align-items: flex-start;
    gap: 15px;
    flex-direction: column;
  }
  .footer-col {
    padding: 40px 50px 0;
  }
  .footer-brand {
    padding-top: 10px;
  }
  .footer-contact {
    padding-bottom: 50px;
    padding-inline-end: 0;
  }
  .footer-address br{
    display: none;
  }
  .footer-socials {
    gap: 10px;
    margin-bottom: 42px;
  }
  .footer-socials a{
    width: 42PX;
    height: 42px;
  }
  .footer-contact-row{
    margin-bottom: 30px;
  }
  .footer-pay-inner, .footer-ship-inner {
    gap: 23px;
  }
  

  /* ————— uit oud ≤1300 ————— */

  .container{
    max-width: min(1190px, 100% - 40px);
  }
  /* 1280-test 2026-07-28: adresblok naast de contactlijst werd een smalle
     kolom van 6 regels — vanaf hier onder de lijst stapelen */
  .footer-contact-row{
    flex-direction:column;
    gap:18px;
  }
  header .container{
    max-width: 95.9%;
  }
  .menu {
    gap: 17px;
  }
  .navbar-inner {
    gap: 25px;
  }

  /* ————— uit oud ≤768 ————— */

  /* globale gutters (768-pass): .container(-md) had hier geen regel — secties raakten de viewportrand */
  .container,
  .container-md{
    max-width:94%;
  }
  /* ===== Mobiel menu (hamburger + subpaneel, 768-XD 2026-07-28) ===== */
  /* burger = losse donkere cirkel rechts naast de globe (buiten de pill);
     navbar wordt static zodat burger en drawer op .nav-wrap ankeren */
  .nav-wrap{
    position:relative;
    padding-right:72px;
  }
  .nav-burger{
    display:flex;
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
  }
  /* De sluitknop houdt in het subpaneel dezelfde plek als de burger in de
     kopbalk. Er stond hier top:0%, maar de translateY(-50%) hierboven bleef
     staan: de knop schoof daardoor 22px omhoog en lag half over de topbalk
     (de balk staat op scrollpositie 0 op y=30 door de body-padding). Het
     paneel scrolt zelf (.menu is fixed met overflow-y:auto en de
     paginascroll ligt vast), dus de knop staat hiermee vast bovenin. */
  .navbar{
    position:static;
    justify-content:flex-start;
    gap:10px;
    padding:8px 8px 8px 22px;
  }
  .navbar-inner{
    margin-left:auto;
  }
  .logo{
    width:104px;
  }
  .icon-btn{
    width:40px;
    height:40px;
  }
  .globe{
    width:56px;
    height:56px;
  }
  .navbar .cta{
    white-space:nowrap;
    padding:9px 14px;
    font-size:13px;
  }
  /* drawer: hoofdlijst */
  .navbar-inner .menu{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    background:var(--white);
    border-radius:20px;
    box-shadow:0 14px 34px rgba(0,0,0,.16);
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:14px;
    z-index:80;
    max-height:calc(100vh - 140px);
    overflow-y:auto;
  }
  .navbar.menu-open .menu{
    display:flex;
  }
  .navbar-inner .menu > li > a{
    display:block;
    padding:12px 14px;
    font-size:17px;
  }
  .menu .caret{
    display:none;
  }
  .mega{
    display:none !important;
  }
  /* subpaneel: mega-inhoud in de drawer (tap op Sokkencollectie) */
  .navbar.sub-open .menu{
    padding:24px 28px 30px;
  }
  .navbar.sub-open .menu > li > a{
    display:none;
  }
  .navbar.sub-open .mega{
    display:grid !important;
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    border-radius:0;
    padding:0;
    grid-template-columns:1.6fr 1fr;
    gap:0 34px;
    justify-items:stretch;
    justify-content:stretch;
  }
  .navbar.sub-open .mega-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    grid-column:1 / -1;
    justify-self:start;
    border:none;
    background:none;
    padding:0;
    font-family:var(--roc-grotesk);
    font-size:15px;
    font-weight:600;
    color:var(--text);
    cursor:pointer;
    margin-bottom:24px;
  }
  .navbar.sub-open .mega-mob-title{
    display:block;
    grid-column:1 / -1;
    font-size:22px;
    font-weight:700;
    margin-bottom:20px;
  }
  .navbar.sub-open .bestsellers-col{
    grid-column:1;
    grid-row:3 / span 2;
  }
  .navbar.sub-open .types-col{
    grid-column:2;
    grid-row:3;
  }
  .navbar.sub-open .mega-usps{
    grid-column:2;
    grid-row:4;
    margin-top:18px;
  }
  .navbar.sub-open .mega-usps h4{
    display:none;
  }
  .navbar.sub-open .mega-usps span{
    font-size:14px;
  }
  .navbar.sub-open .bestsellers{
    grid-template-columns:1fr 1fr;
    gap:30px 10px;
  }
  .navbar.sub-open .prod-card .prod-price{
    font-size:14px;
  }
  .navbar.sub-open .prod-card .prod-img-card{
    height:150px;
  }
  .navbar.sub-open .types{
    grid-template-columns:1fr;
    gap:14px;
  }
  /* De band zette het item op twee gelijke kolommen; met de types nu
     onder elkaar knelde het label in de halve breedte en brak een naam
     als Yoga & pilates over twee regels. Vierkantje op eigen maat, het
     label krijgt de rest - net als in de basis. */
  .menu .menu-link .type-item{
    grid-template-columns:auto 1fr;
  }
  .navbar.sub-open .type-item .type-img{
    width:50px;
    height:50px;
  }
  .design-now-card{ grid-template-columns:1fr; }
  .design-now-doodle,
  .design-now-feet{ display:none; }
  .usecase-img-md,
  .usecase-img-lg{ height:200px; }
  .also-head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .promises h2,
  .specs-section-inner h2,
  .weave-inner h2,
  .versus h2,
  .also-title,
  .design-now h2,
  .usecases-head h2{ font-size:calc(var(--h2-font-size) - 6px); }

  /* ===== Case-detail page ===== */
  .case-promo{ max-width:none; }
  .case-specs-grid{ grid-template-columns:1fr 1fr; }
  .case-result{ background:linear-gradient(#fff 0, #fff 12%, #3f38d6 12%, #3f38d6 100%); }
  .case-result-grid{ grid-template-columns:1fr; gap:14px; }
  .case-result-grid img{ height:220px; margin-top:0 !important; }
  .case-quote{ padding:30px 20px 24px; }
  .case-video-doodle,
  .case-video-feet{ display:none; }
  .case-video-card img{ height:240px; }
  .case-story-left h2,
  .case-specs h2,
  .case-result h2,
  .case-video h2,
  .case-others h2{ font-size:calc(var(--h2-font-size) - 6px); }

  /* ===== Inspiratie / cases page ===== */
  .insp-title{ font-size:28px; }
  .case-grid{ grid-template-columns:1fr; gap:16px; }
  .case-filters{ flex-direction:column; gap:14px; align-items:flex-start; }
  .case-grid-section h2{ font-size:calc(var(--h2-font-size) - 6px); }

  /* ===== Werkwijze page ===== */
  .steps-promo{ position:static; width:100%; margin-bottom:24px; }
  .steps-section h2{ font-size:calc(var(--h2-font-size) - 6px); }
  .step-card-img{ height:180px; }

  /* ===== Configurator page ===== */
  .conf-title{ font-size:34px; }
  .conf-doodle{ display:none; }
  .conf-promo{ position:static; width:100%; margin-top:16px; }
  .configurator-section ul{ margin-top:30px; gap:10px 24px; }
  .conf-works > .container > h2,
  .conf-types h2{ font-size:calc(var(--h2-font-size) - 6px); }
  .conf-check-btns{ gap:8px; }

  /* ===== Bedankt page (oud-cascade; opgeschoond 2026-08-12 — de dode
     declaraties zaten in het nieuwe Bedankt-blok verderop) ===== */
  .thanks-hero-content{ padding-top:50px; }
  .thanks-steps{ grid-template-columns:1fr; }
  .wait-grid{ grid-template-columns:1fr; gap:16px; }
  .follow-inner{ flex-direction:column; }
  .newsletter-row{ flex-direction:column; align-items:stretch; gap:14px; }

  /* ===== Sample-request page ===== */
  .sample-actions{ flex-direction:column; align-items:stretch; }
  .sample-actions-right{ flex-direction:column; }
  .sample-proof-grid{ grid-template-columns:1fr; }

  /* ===== Offerte page ===== */
  .offerte-title{ font-size:32px; }
  .offerte-nav{ padding:12px 12px 12px 20px; }
  .offerte-logo{ font-size:22px; }
  .quote-wrap{ grid-template-columns:1fr; gap:18px; }
  .quote-card{ padding:22px 18px; }
  .quote-aside{ position:static; }
  .stepper{ flex-direction:column; gap:14px; align-items:flex-start; }
  .stepper-item{ flex-direction:row; align-items:center; gap:12px; text-align:left; padding:0; width:100%; }
  .stepper-item::before{ display:none; }
  .stepper-dot{ margin-bottom:0; }
  .type-picker{ grid-template-columns:repeat(2,1fr); }
  .extra-picker{ grid-template-columns:repeat(2,1fr); }
  .quote-grid,
  .quote-grid-3{ grid-template-columns:1fr; }
  /* Gravity-tegenhanger van .quote-grid / .quote-grid-3 hierboven: onder de
     768px staan de velden van stap 3 onder elkaar in plaats van in rijen. */
  .quote-card .gform_fields > .of-postcode,
  .quote-card .gform_fields > .of-huisnummer,
  .quote-card .gform_fields > .of-toevoeging,
  .quote-card .gform_fields > .of-bedrijf,
  .quote-card .gform_fields > .of-contact,
  .quote-card .gform_fields > .of-email,
  .quote-card .gform_fields > .of-telefoon,
  .quote-card .gform_fields > .of-land,
  /* Zelfde gewicht als de basisregel die Land op de eerste rij zet,
     anders wint die hier en blijft het veld naast Toevoeging staan
     terwijl de rest stapelt. */
  .quote-card .gform_fields > .of-land.is-zichtbaar,
  .quote-card .gform_fields > .of-land.gfield_error,
  .quote-card .gform_fields > .of-auto.is-zichtbaar{ flex:0 0 100%; }
  /* Idem voor .sample-proof-grid op het sampleformulier: htmlv zet die
     onder de 768px ook op één kolom, dus "Aantal paar" mag hier niet op
     zijn vaste 200px blijven staan. */
  .sample-card .gform_fields > .of-aantal,
  .sample-card .gform_fields > .of-wensen{ flex:0 0 100%; }
  /* = .quote-actions-split / .quote-actions-right */
  /* BEWUSTE AFWIJKING VAN HTMLV (verzoek Kulwant 2026-09-14): htmlv stapelt deze
     knoppen onder 768px tot volle breedte, maar de balk moet ook op een smal
     scherm ÉÉN RIJ blijven — Terug links, Overslaan + Volgende rechts, precies
     zoals op desktop. Daarom hier GEEN flex-direction:column meer; de basisregel
     uit style.css (row, gap 20, Terug met margin-right:auto) blijft staan.
     De maatvoering voor smalle schermen staat onderaan de ≤520-band: op 360px
     past de rij niet op de standaard knoppadding. */
  .quote-actions-split{ flex-direction:column; align-items:stretch; gap:12px; }
  .quote-actions-right{ flex-direction:column; }
  .aanvraag-steps{ grid-template-columns:1fr; gap:26px; }
  .aanvraag-doodle{ display:none; }
  .aanvraag-title{ font-size:28px; }
  .mini-footer .container{ flex-direction:column; text-align:center; }

  /* ===== Expanding search ===== */
  .nav-search{
    right:52px;
  }
  .navbar.search-open .nav-search{
    width:calc(100% - 120px);
  }
  .nav-search-input{
    font-size:15px;
  }

  /* ===== Trusted by / brand logos ===== */
  .brands-swiper{
    --logo-gap:40px;
  }
  .brand-logo-items{
    height:26px;
  }

  /* ===== Impact / stats + vertical socks galleries ===== */
  .impact-inner{
    flex-direction:column;
    gap:40px;
  }
  .impact-left{
    max-width:100%;
    text-align:center;
  }
  .impact .impact-left ul li{
    justify-content:center;
  }
  .stat-num{
    font-size:34px;
  }
  .impact-gallery{
    width:100%;
    max-width:100%;
    height:340px;
    gap:12px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:40px;
  }

  /* ===== Sokken collectie ===== */
  .collection-grid{
    display:flex;
    overflow-x:auto;
    gap:16px;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
  }
  .collection-card{
    flex:0 0 46%;
    height:auto;
  }
  /* basis-foot is 70px hoog (desktop: één rij) — gestapelde foot heeft meer nodig */
  .collection-card-foot{
    height:auto;
  }
  .collection h2{
    font-size:calc(var(--h2-font-size) - 6px);
    text-align:center;
  }

  /* ===== Process ===== */
  .process{
    padding:130px 0 70px;
  }
  .process-wave svg{
    height:70px;
  }
  .process:not(.conf-works) > .container > h2{
    font-size:calc(var(--h2-font-size) - 4px);
    margin-bottom:44px;
  }
  .process-steps{
    grid-template-columns:repeat(2,1fr);
    gap:36px 24px;
  }
  .process-step p{
    max-width:none;
  }

  /* ===== Prijscalculator ===== */
  .calc-box{
    padding:24px 16px 30px;
  }
  .calc-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .calc-panel{
    padding:22px 18px;
  }
  .calc-mid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .calc-slider-row{
    flex-wrap:wrap;
    gap:14px;
  }

  /* ===== Sokkengeschenk compleet ===== */
  /* cases: desktop-naast-elkaar knipte de tekst af — stapelen; blauwe shape meerekken */
  .cases:before{
    background-size:100% 100%;
  }
  .cases{
    padding-top:160px;
  }
  .cases-nav{
    top:0;
    margin-top:22px;
  }
  .case-inner{
    flex-direction:column;
    gap:26px;
  }
  .case-gallery{
    width:100%;
  }
  .case-img.case-img-main{
    width:58%;
    height:280px;
  }
  .case-img{
    width:100%;
    height:127px;
  }
  .case-img-col{
    flex:1;
  }
  .cases-feet{
    display:none;
  }
  .gift-grid{
    display:flex;
    overflow-x:auto;
    gap:16px;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
  }
  .gift-card{
    flex:0 0 46%;
    height:auto;
  }
  .gift h2{
    font-size:calc(var(--h2-font-size) - 6px);
    text-align:center;
  }
  .gift-nav{
    display: flex;
  }

  /* ===== Klantcases ===== */
  .cases-cut,
  .cases-feet{
    display:none;
  }
  .case-section-outer h2{
    font-size:calc(var(--h2-font-size) - 4px);
    text-align:center;
  }
  .case-inner{
    grid-template-columns:1fr;
    gap:26px;
  }
  .cases-nav{
    padding-left:0;
    justify-content:center;
  }
  .designed{
    margin-top:50px;
  }
  .designed-head h3{
    font-size:calc(var(--h3-font-size) + 8px);
  }
  .designed-swiper .swiper-slide{
    width:200px;
    height:250px;
  }
  .designed::before{
    height:300px;
    top: 50%;
  }

  /* ===== Brand intro ===== */
  .doodle{
    display:none;
  }
  .brand-intro-inner h2{
    font-size:calc(var(--h2-font-size) - 4px);
  }

  /* ===== FAQ ===== */
  .faq-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .faq-left h2{
    font-size:calc(var(--h2-font-size) - 4px);
  }
  .faq-feet{
    display:none;
  }
  .faq-left p{
    max-width:none;
  }
  .faq-right{
    padding-top:0;
  }

  /* ===== Slot-CTA ===== */
  .cta-final-feet{
        width: 300px;
        left: 10%;
        top: -55%;
  }
  .cta-final-panel{
    padding:90px 0 70px;
  }
  .cta-final-panel h2{
    font-size:32px;
  }

  /* ===== Footer ===== */
  .footer-grid{
    grid-template-columns:1fr;
    gap:34px;
  }
  .footer-links::before,
  .footer-contact::before{
    display:none;
  }
  .footer-contact-row{
    flex-direction:column;
    gap:22px;
  }
  .footer-partners{
    flex-wrap:wrap;
    gap:16px;
  }
  .footer-partner-slot{
    width:100px;
    height:44px;
  }
  .footer-pay{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-reviews{
    gap:24px;
  }
  .footer-legal{
    line-height:1.9;
  }
  .coll-hero-content h1{
    font-size:var(--h1-font-size);
  }
  .types-head{
    flex-direction:column;
    gap:20px;
    min-height:0;
  }
  .types-promo{
    position:static;
    max-width:none;
  }
  .types-grid{
    grid-template-columns:repeat(2,1fr);
    gap:40px 10px;
  }
  .compare-inner-main h2,
  .testi-title{
    font-size:calc(var(--h2-font-size) - 4px);
  }

  /* ————— mobiel ≤520 ————— */

  /* globale gutters (specs Kulwant): container 100% breed met vaste
     20px-padding links/rechts i.p.v. de 94%-max-width uit het 768-blok */
  .container,
  .container-md{
    max-width:100%;
    width:100%;
    padding-left:20px;
    padding-right:20px;
  }
  /* geneste containers niet dubbel padden (hero heeft container-in-container) */
  .container .container,
  .container .container-md,
  .container-md .container{
    padding-left:0;
    padding-right:0;
  }
  /* ===== Mobiel menu (mobiel-XD, 2026-07-28) ===== */
  /* topbar: marquee met fade rechts (XD); zonder JS: swipebare strip */
  .topbar{
    position:sticky /* was relative; sticky chrome 2026-08-12 — anker voor :after blijft werken */;
    overflow:hidden;
  }
  .topbar:after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:56px;
    background:linear-gradient(to left, var(--dark), rgba(40,18,27,0));
    pointer-events:none;
  }
  .topbar ul{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .topbar ul::-webkit-scrollbar{
    display:none;
  }
  .topbar li{
    white-space:nowrap;
    flex:0 0 auto;
  }
  /* custom.js verdubbelt de items en zet .topbar-marquee (alleen ≤520) */
  .topbar ul.topbar-marquee{
    overflow:visible;
    width:max-content;
    gap:0;
    padding-inline:0;
    animation:sokkiesTopbarMarquee 18s linear infinite;
  }
  .topbar ul.topbar-marquee li{
    margin-right:34px;
  }
  @keyframes sokkiesTopbarMarquee{
    to{ transform:translateX(-50%); }
  }
  /* navbar (mobiel-XD): volle-breedte witte balk vast aan de topbar —
     bovenkant strak, alleen onderhoeken rond; iconen als outline-cirkels,
     donkere burger rechts. CTA vervalt op mobiel. */
  .navbar .cta{
    display:none;
  }
  header .container{
    max-width:100%;
    padding-left:0;
    padding-right:0;
  }
  header .nav-wrap{
    top:0;
  }
  .nav-wrap.navbar-mini-main{
    padding:10px 16px 10px 16px;
  }
  .nav-wrap{
    background:var(--white);
    border-radius:0 0 16px 16px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    padding:10px 66px 10px 16px;
    gap:10px;
    min-height:62px; /* hoogte vast: in substate verdwijnen logo/iconen
                        en zakte de balk naar 20px — de X sprong omhoog */
  }
  .navbar{
    background:transparent;
    box-shadow:none;
    border-radius:0;
    padding:0;
  }
  .logo{
    width:100px;
  }
  .actions{
    gap:8px;
  }
  .icon-btn{
    width: 44px;
    height: 44px;
  }
  .globe{
    width:44px;
    height:44px;
    box-shadow:none;
    border:1.5px solid #e3e3e3;
  }
  .nav-burger{
    width:44px;
    height:44px;
    right:14px;
  }
  

  /* open menu = witte sheet over de volle breedte, fixed onder de topbar;
     de logo/icon-rij zweeft erboven (pill-look uit), lijst gecentreerd
     condensed uppercase met scheidingslijnen (mobiel-XD) */
  .navbar.menu-open{
    background:transparent;
    box-shadow:none;
  }
  .navbar.menu-open .menu{
    position:fixed;
    top:30px;
    height:calc(100vh - 30px); /* volledige schermhoogte onder de topbar */
    max-height:none;
    padding:140px 20px 45px;
    border-radius:0;
    gap:0;
    z-index:-1;
  }
  .navbar-inner .menu > li > a{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:32px;
    text-align:center;
    padding: 15px 12px;
    line-height: 1.1;
  }
  .menu > li + li{
    border-top:1px solid var(--border-light);
  }
  .menu .menu-link.active > a{
    color:var(--yellow);
  }
  .menu-home{
    display:block;
  }
  .menu-prijzen{
    display:none;
  }
  .has-mega > a::after{
    content:"";
    display:inline-block;
    width:18px;
    height:12px;
    margin-left:10px;
    vertical-align:middle;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Cpath d='M12 1l5 5-5 5M17 6H1' fill='none' stroke='%2328121b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  /* subpaneel: volledig scherm — header = alleen Terug + X (mobiel-XD) */
  .navbar.sub-open .logo,
  .navbar.sub-open .actions{
    display:none;
  }
  .navbar.sub-open ~ .lang{
    display:none;
  }
  .navbar.sub-open .menu{
    padding:30px 20px 26px;
  }
  /* hoofdlijst-li's helemaal weg in substate (anders blijven de scheidingslijnen staan) */
  .navbar.sub-open .menu > li:not(.has-mega){
    display:none;
  }
  .navbar.sub-open .menu > li{
    border-top:0;
  }
  .navbar.sub-open .mega{
    grid-template-columns:1fr;
    gap:0;
  }
  .navbar.sub-open .mega-back{
    margin-bottom:0px;
  }
  .navbar.sub-open .sub-menu-head{
    margin-bottom:0px;
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: #fff;
    padding: 10px 20px;
    border-radius: 0 0 25px 25px;
    width: calc(100% + 40px);
    margin-left: -20px;
    position: sticky;
  }
  .navbar.sub-open .mega-mob-title{
    font-size:24px;
    margin-bottom:16px;
  }
  .navbar.sub-open .bestsellers-col{
    grid-row:auto;
    grid-column:1;
  }
  .navbar.sub-open .types-col{
    grid-row:auto;
    grid-column:1;
    margin-top:58px;
  }
  /* USP's + "Bekijk collectie"-knop volledig uit het mobiele subpaneel
     (verzoek Kulwant; desktop-mega behoudt ze) */
  .navbar.sub-open .mega-usps{
    display:none;
  }
  .navbar.sub-open .prod-card .prod-img-card{
    height:170px;
  }
  .navbar.sub-open .types{
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(3, auto);
    grid-auto-flow:column;
    gap:16px 18px;
  }
  /* De band zette het item op twee gelijke kolommen; met de types nu
     onder elkaar knelde het label in de halve breedte en brak een naam
     als Yoga & pilates over twee regels. Vierkantje op eigen maat, het
     label krijgt de rest - net als in de basis. */
  .menu .menu-link .type-item{
    grid-template-columns:auto 1fr;
  }
  .navbar.sub-open .type-item .type-img{
    width:45px;
    height:45px;
  }
  .navbar.sub-open .menu .menu-link .type-item{
    font-size:15px;
    gap:12px;
  }
  /* menu-XD-maten vastzetten nu de mobiele tokens kleiner zijn */
  .navbar.sub-open .mega h4{
    font-size:18px;
  }
  .navbar.sub-open .prod-card .prod-name{
    font-size:17px;
  }


  /* ===== MOBIELE KALIBRATIE (2026-07-28, o.b.v. mobiel-XD vergelijking) =====
     mobiel erfde de 1440-tokens (h1 40 via clamp-floor, body 15, sectie-
     paddings 90-160) — alles globaal verkleind naar de XD-schaal */
  /* alle CTA's op mobiel: volle breedte, 44 hoog, 15px (specs Kulwant) */
  .cta,
  .cta-light,
  .cta-dark{
    font-size:15px;
    height:44px;
    width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
  }
  /* hero: clamp-floor was 40px en de gewrapte usps kregen de 40px-flexgap
     als verticale ruimte */
  .banner-section{
    padding:150px 0 50px;
  }
  .banner-section h1{
    font-size:calc(var(--h1-font-size) + 10px);
    line-height:38px;
  }
  /* desktop-regelafbreking uit — mobiel wrapt zelf naar twee regels */
  .banner-section h1 br{
    display:none;
  }
  .usps{
    flex-direction:column;
    align-items:center;
    gap:2px;
    margin:16px 0 20px;
  }
  .usps span{
    font-size:calc(var(--body-font-size) + 2px);
    line-height:23px;
  }
  .rating-outer{
    margin-bottom:24px;
  }
  .rating-info-bottom{
    font-size:17px;
  }
  .hero-btns{
    flex-direction:column;
    gap:10px;
  }
  .hero-btns .cta,
  .hero-btns .cta-light{
    width:100%;
  }
  .banner-bottom-info{
    margin-top:20px;
    font-size:13px;
    flex-wrap:wrap;
  }
  /* hero-slider (mobiel-XD): het actieve PAAR gecentreerd met 5%-slivers
     links en rechts — swiper-container versmald tot het paar (90% - 2x de
     14px spaceBetween) en overflow zichtbaar, zodat de buurslides precies
     5% uitsteken en de sectie (overflow:hidden) ze op de rand afknipt.
     Overflow:visible lost ook de vlakke topjes van de gestaggerde slides
     op (ze werden door de swiper-clip afgeknipt). */
  .gallery .gallery-swiper{
    width:calc(90vw - 28px);
    margin-inline:auto;
    overflow:visible;
    padding:50px 0 54px; /* 54 = 24px stagger + 30px marge tot de knoppen */
  }
  .gallery-swiper .swiper-slide{
    width: calc(54% - 6px);
    height: 238px;
    border-radius:18px;
  }
  /* stagger op runtime-klassen i.p.v. nth-child: de loop husselt de DOM,
     waardoor nth-child-offsets na een wrap omdraaiden. Actief paar =
     links hoog, rechts laag (XD); slivers volgen de afwisseling. */
  .gallery-swiper .swiper-slide:nth-child(3n + 1),
  .gallery-swiper .swiper-slide:nth-child(3n + 2),
  .gallery-swiper .swiper-slide:nth-child(3n){
    transform:none;
  }
  .gallery-swiper .swiper-slide{
    transition:transform .6s;
  }
  .gallery-swiper .swiper-slide.swiper-slide-prev,
  .gallery-swiper .swiper-slide.swiper-slide-next{
    transform:translateY(24px);
  }
  .gallery-swiper .swiper-slide.swiper-slide-active,
  .gallery-swiper .swiper-slide.swiper-slide-next + .swiper-slide{
    transform:translateY(-24px);
  }
  .gallery-nav{
    margin-top:0;
  }
  /* sectieritme */
  /* brand-specs Kulwant: 60px vanaf de slider, kop 17px, 25px kop→logo's */
  .gallery{
    padding-bottom:0;
  }
  .brands{
    padding:60px 0 32px;
  }
  .brands h2{
    font-size:calc(var(--h2-font-size) - 15px);
    margin-bottom:25px;
  }
  /* stats-specs Kulwant: beide stats op één regel, alles links uitgelijnd,
     20px stats→beschrijving, sectie 40px onder brands, padding-top 60px */
  .brands{
    margin-bottom:0;
  }
  .impact{
    margin-top:40px;
    padding:60px 0 40px;
  }
  /* sokkenpatroon: op auto rendert de 1980px-tegel enorme sokken op 390 */
  .impact:before{
    background-size:950px auto;
  }
  /* pijlen kleiner en uitgelijnd op de cijfer-regel (XD) */
  .stat-arrow{
    margin-top:2px;
  }
  .stat-arrow svg{
    width:15px;
    height:auto;
  }
  .impact-left{
    text-align:left;
    width: auto;
  }
  .impact .impact-left ul{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:12px;
    margin-bottom:20px;
  }
  .impact .impact-left ul li{
    justify-content:flex-start;
    flex:0 1 auto;
    min-width:0;
  }
  .impact .impact-left p{
    margin:0;
    /* basis heeft padding-left:36 (desktop-pijl); mobiel: pijl 15 + gap 14 */
    padding-left:29px;
  }
  .impact .impact-left p br{
    display: none;
  }
  .stat-num{
    font-size:26px;
  }
  .stat-label{
    font-size:13px;
    white-space:nowrap;
  }
  .impact-inner{
    gap:28px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul{
    margin-top:24px;
  }
  /* impact-gallery (specs Kulwant): rotatie eruit (basis −4°), 120% van de
     viewportbreedte en gecentreerd — de sectie knipt de uitloop af */
  .impact-inner{
    overflow:visible; /* basis-hidden knipte de 120vw-gallery af op de container */
    height:auto; /* 1550-blok fixeert 465px terwijl de content 478px is */
  }
  .imapact-right-main{
    width: 102vw;
    height: 260px;
    overflow: hidden;
    margin-bottom: 0px;
  }
  .impact-gallery{
    width:100%;
    max-width:none;
    margin-left: -10px;
    padding-right: 0;
    margin-top: -20px;
  }
  /* impact-marquees: 276px-slides in ~115px-kolommen gaven zoom-crops */
  .v-swiper .swiper-slide{
    width:100%;
    height:181px;
    border-radius:12px;
  }
  .process{
    padding:150px 0 90px;
  }
  .process-wave svg{
    height:50px;
  }
  .process:not(.conf-works) > .container > h2{
    font-size:calc(var(--h2-font-size) - 6px);
    margin-bottom:30px;
  }
  .process-steps{
    gap:26px;
  }
  .process-step svg{
    width:64px;
    height:64px;
  }
  .step-num{
    margin-bottom:10px;
  }
  .step-icon{
    margin-bottom:16px;
  }
  /* calculator (specs Kulwant): kop 32 gecentreerd, sectie pt 40,
     container-gutters 10px, calc-box zonder zijpadding */
  .calculator{
    padding:40px 0 20px;
  }
  .calculator h2{
    font-size:var(--h2-font-size);
    text-align:center;
    margin-bottom:0px;
  }
  .calc-panel h3{
    font-size:calc(var(--h3-font-size) + 2px);
  }
  .calc-label{
    font-size:17px;
  }
  /* range + aantal-input op één regel; "paar" onder het invoerveld */
  .calc-slider-row{
    flex-wrap:nowrap;
    align-items:flex-start;
    gap:14px;
  }
  .calc-slider-progress{
    flex:1;
    min-width:0;
  }
  .qty-input{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    flex:0 0 auto;
  }
  .qty-input input{
    width:90px;
  }
  .calc-hint{
    padding:10px;
    align-items:flex-start;
  }
  .calc-result{
    padding-top:20px;
  }
  .calculator .container{
    padding-left:10px;
    padding-right:10px;
  }
  .calc-box{
    padding-left:0;
    padding-right:0;
  }
  .gift{
    padding:130px 0 50px;
  }
  .gift h2{
    text-align:left;
  }
  .gift-grid{
    gap:10px;
  }
  .gift-card{
    flex:0 0 75%;
  }
  .gift-img{
    height:180px;
  }
  .cases{
    padding:110px 0 44px;
  }

  /* case-gallery (specs Kulwant): hoofdfoto als eigen rij, daaronder de
     twee kleine foto's naast elkaar */
  .case-gallery{
    flex-direction:column;
  }
  .case-img.case-img-main{
    width:100%;
    height:340px;
  }
  .case-img-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    width:100%;
  }
  .case-img{
    height:140px;
  }
  .case-text {
    width: 100%;
  }
  /* globale mobiele sectiekop 32px — neutraliseert per-sectie px uit het
     768-blok (brands-kop blijft bewust 17px per aparte spec) */
  .gift h2,
  .case-section-outer h2{
    font-size:var(--h2-font-size);
  }
  /* "Door onze klanten ontworpen": 22px en geen uppercase (specs Kulwant) */
  .designed-head h3{
    font-size:calc(var(--h3-font-size) + 2px);
    text-transform:none;
  }
  /* cyaan band zichtbaar op mobiel: hij stond op z -1 ONDER de blauwe
     cases-laag (desktop toont hem door transparantie in de shape-PNG,
     maar de mobiele cover-size maakt het blauw dekkend) */
  .designed::before{
    z-index:0;
  }
  .designed{
    margin-top:56px;
  }
  .designed-swiper .swiper-slide{
    width:195px;
    height:195px;
  }
  .brand-intro{
    padding:48px 0 100px;
  }
  .brand-intro-inner{
    max-width:100%;
  }
  .brand-intro-inner h2{
    font-size:var(--h2-font-size);
  }
  .faq{
    padding:70px 0 250px;
  }
  .faq-icon {
    position: relative;
    top: 6px;
  }
  .faq-left h2{
    font-size:var(--h2-font-size);
  }
  .faq-item.is-open .faq-q{
    padding-bottom: 8px;
  }
  .faq-q{
    font-size:17px;
    align-items: flex-start;
  }
  .cta-final-panel{
    padding:100px 0 60px;
  }
  .cta-final-panel h2{
    font-size:44px;
    line-height:38px;
  }
  .cta-final-panel h2 br{
    display:none;
  }
  .cta-final-panel > .container > p{
    font-size:17px;
    margin-bottom: 20px;
  }
  /* footer: 50px zij-padding at kolombreedte op */
  .footer-grid{
    padding-top:60px;
  }
  /* footer (specs Kulwant, deel 1) */
  .footer-logo svg{
    width:102px;
    height:auto;
  }
  .footer-logo{
    margin-bottom:16px;
  }
  .footer-brand{
    padding-top:0;
    padding-bottom:40px;
    border-bottom:1px solid #F96D69;
  }
  .footer-certs{
    flex-direction:row;
    align-items:center;
    gap: 15px;
    justify-content: flex-start;
  }
  .footer-certs-list{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .footer-certs-list img{
    height:70px;
    width:auto;
  }
  .footer-col{
    padding:50px 0 0;
  }
  :is(.footer-col, .footer-news) :is(h4, h5){
    font-size:17px;
    margin-bottom:20px;
  }
  .footer-col li a{
    font-size:15px;
    line-height:22px;
  }
  footer .border-v{
    display:none;
  }
  .footer-col{
    border-left:0;
    border-right:0;
    padding-top: 0px;
  }
  /* footer (specs Kulwant, deel 2) */
  .footer-links-cols{
    display:grid;
    grid-template-columns:50% 50%;
    gap:0;
    justify-content: space-between;
  }
  .footer-links{
    padding-bottom:40px;
    border-bottom:1px solid #F96D69;
  }
  .footer-contact{
    padding-top:0px;
    padding-bottom:40px;
    border-bottom:1px solid #F96D69;
  }
  .footer-contact-row{
    flex-direction:row;
    gap:16px;
    margin-bottom:30px;
  }
  .footer-contact-row > *{
    flex:1;
    min-width:0;
  }
  .footer-socials{
    margin-top:0;
    margin-bottom:50px;
  }
  .footer-partners{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:10px;
    text-align:center;
    margin-top:0px;
  }
  .footer-partners-label{
    width:100%;
    margin-bottom:20px; /* + 10px flex-gap = 30px visueel */
  }
  .footer-partners img{
    flex:0 1 calc(50% - 5px);
    max-width:calc(50% - 5px);
    min-width:0;
    height:auto;
  }
  /* zwevende kerst-promokaart: uit op mobiel (besluit Kulwant 2026-07-28) */
  .promo-float{
    display:none;
  }
  /* ===== einde mobiele kalibratie ===== */

  /* footer-bottom (specs Kulwant): 40px boven/onder, groepen links
     uitgelijnd, 20px label→logo's, 30/lijn/30 tussen de blokken */
  .footer-bottom{
    padding:40px 0 70px;
  }
  .footer-pay{
    flex-direction:column;
    gap:0;
    border-bottom:0;
  }
  .footer-pay-group{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    width:100%;
    max-width:100%;
  }
  .footer-pay-group:not(.footer-ship){
    padding-bottom:30px;
    border-bottom:1px solid var(--light-beige);
  }
  .footer-ship{
    padding-top:30px;
    padding-bottom:30px;
    border-bottom:1px solid var(--light-beige);
  }
  .footer-pay-inner,
  .footer-ship-inner{
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:12px 16px;
    max-width:100%;
    width: 100%;
    height:auto;
  }
  .footer-reviews{
    margin-top:0px;
    flex-direction:column;
    gap:20px;
  }
  /* "uit 300+ reviews" niet laten breken: span nowrap + kleinere logo's */
  .footer-review > span:last-child{
    white-space:nowrap;
  }
  .footer-review img{
    height:22px;
  }
  /* legal-regel: drie nette regels op mobiel (spans; desktop blijft één regel) */
  .footer-legal > span{
    display:block;
  }
  .footer-legal > span + span{
    margin-top:0px;
  }
  .footer-legal .fl-sep{
    display:none;
  }
  /* cases-shape: 100%/100%-stretch vervormt op 390 extreem (witte hap rechts)
     — cover toont het solide linkerdeel met de diagonaal bovenin */
  .cases:before{
    background-position: center top;
    background: var(--blue);
    transform: rotate(3deg);
    border-radius: 0 140px 0 0;
    left: -35px;
    top: 12px;
    width: 115%;
  }
  /* USP-chips (specs Kulwant): 2 kolommen × 3 rijen, 60px boven, gap 20,
     boxen 104px hoog, iconen 40×40, labels 17px */
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    margin-top:60px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul li{
    width:auto;
    min-width:0;
    height:104px;
    justify-content:center;
    text-align:center;
  }
  .feat-icon{
    width: 40px;
    height: 100%;
  }
  .feat-icon svg,
  .feat-icon img{
    width:100%;
    height:100%;
  }
  .feat-label{
    font-size:17px;
    white-space:normal;
  }
  /* collectie (specs Kulwant): kop links 32px, 20px kop→kaarten,
     kaart 75% breed met 25%-peek van de volgende, gap 10 */
  .collection{
    padding-top:60px;
  }
  .collection:before{
    top:-24%;
  }
  .collection h2{
    font-size:var(--h2-font-size);
    text-align:left;
    margin-bottom:20px;
  }
  .collection-grid{
    gap:10px;
  }
  .collection-card{
    flex:0 0 220px;
  }
  .collection-cta .cta-light{
    display:flex;
    width:100%;
  }
  /* process (specs Kulwant): kop 32 gecentreerd; stappen 2 per rij,
     kolomgap 10 / rijgap 40; icoonvak 213px; h3 17, p 15/22, nummer 15 */
  .process:not(.conf-works) > .container > h2{
    font-size:var(--h2-font-size);
    text-align:center;
  }
  .process-steps{
    grid-template-columns:repeat(2, 1fr);
    gap:40px 10px;
  }
  .step-icon{
    height:80px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
  }
  .process-step svg,
  .process-step img{ /* WP: geuploade PNG-iconen volgen dezelfde maat als de svg's */
    width:auto;
    height:100%;
  }
  .process-step h3{
    font-size:calc(var(--h3-font-size) - 3px);
  }
  .process-step p{
    font-size:var(--body-font-size);
  }
  .step-num{
    font-size:15px;
  }
  .process-cta{
    margin-top:35px;
  }
  .gift-grid{
    grid-template-columns:1fr;
  }

  /* logo-marquee full-width (universeel besluit Kulwant) */
  .brands{
    overflow:hidden;
  }
  .brands .brands-swiper{
    width:100vw;
    margin-left:calc(50% - 50vw);
  }

  /* brands-marquee: justify-content:center op de swiper-wrapper (basis)
     breekt de loop-translate-wiskunde — zichtbare sprong bij het
     wrap-punt; op mobiel (2 logo's in beeld) extra opvallend */
  .brands-swiper .swiper-wrapper{
    justify-content:flex-start;
  }

  /* slot-CTA-shape (specs Kulwant) */
  .cta-final-panel{
    background: url(../media/cta-bg-shape.svg) no-repeat 18% top;
    background-size: cover;
  }

  /* topbar verbergen zodra het menu open is (specs Kulwant);
     sheet schuift mee naar de bovenrand. Body krijgt dezelfde 30px als
     padding zodat de balk-controls niet omhoog springen, en gaat op
     overflow:hidden — alleen het menu zelf scrollt nog. */

  body:has(.navbar.menu-open){
    padding-top:0px;
    overflow:hidden;
  }
  .navbar.menu-open .menu{
    top:0;
    height: auto;
    border-radius: 0 0 20px 20px;
  }

  /* .case-text kreeg in style.css-basis width:40% voor de desktopkolom.
     De basis kent geen media queries, dus die 40% gold ook hier: de
     tekstkolom werd 140px breed in een container van 350px (de titel
     wikkelde over vier regels). De banden 992-1279, 768-991 en 521-767
     zetten hun eigen breedte, alleen deze band had er geen. */
  .case-text{
    width:100%;
  }

  /* home-cases (mobiel-goedgekeurd 22px) — hersteld na dedup; geldt ook
     voor de Collectie-case zolang mobiel geen eigen spec heeft */
  .case-text h3{
    font-size:calc(var(--h3-font-size) + 2px);
    line-height:28px;
    font-weight:600;
  }
  /* breadcrumb (spec Kulwant 2026-08-04) */
  .breadcrumb{
    padding-top:0px;
  }
  /* ═══ Collectie — GEKOPIEERD UIT DE 521-767-BAND (verzoek Kulwant
     2026-08-04); band-eigen fijnslijpen volgt. LET OP: .calc-panel h3
     bewust NIET meegekopieerd — mobiel-goedgekeurde home-regel (22px) blijft ═══ */
  /* Collectie-hero (specs Kulwant 2026-08-03) */
  .coll-hero{
    height:auto;
    padding-bottom:0;
  }
  .coll-hero-content{
    text-align:center;
  }
  .coll-hero-content ul{
    justify-content:center;
    margin-inline:auto;
  }
  .coll-hero-left p{
    margin-inline:auto;
  }
  .coll-hero-btns .cta,
  .coll-hero-btns .cta-transparent{
    width:100%;
  }
  .coll-hero-inner{
    grid-template-columns:1fr;
    gap:0px;
  }
  .coll-hero-left{
    gap:45px;
  }
  .coll-hero-btns{
    margin-bottom:45px;
  }
  /* .coll-hero-gallery{
    height:292px;
    top:0;
    margin-top:0px;
    margin-right:0;
  } */
  .coll-gallery-main {
    width: 111%;
    overflow: hidden;
    margin-left: 0;
    height: 291px;
    margin-bottom: 40px;
    position: relative;
    left: -20px;
    margin-top: 30px;
  }
  .coll-hero-gallery{
    height: 450px;
    top: -60px;
    margin-top: 0px;
    width: 95%;
    margin: 0px auto;
  }
  .coll-hero-left p{
    font-size:var(--body-lg-font-size);
    max-width:520px;
  }
  .coll-hero-content ul{
    gap:12px 20px;
  }
  .coll-hero-content ul li{
    font-size:var(--body-font-size);
  }
  .ch-swiper .swiper-slide{
    height:185px;
  }
  .types-section{
    padding-top:80px;
    padding-bottom:60px;
  }
  .type-card-img{
    height:180px;
    border-radius:15px;
  }
  .type-card-content h3{
    font-size:calc(var(--h5-font-size) + 2px);
    font-weight:600;
  }
  .type-card-price{
    border-radius:15px;
  }
  /* De p volgt de gedeelde 1,41; prijs en item houden hun eigen 20px. */
  .type-card-content p{
    font-size:calc(var(--body-font-size) - 2px);
  }
  .type-card-price,
  .type-card-item{
    font-size:calc(var(--body-font-size) - 2px);
    line-height:20px;
  }
  .type-card-btn{
    height:44px;
    font-size:var(--body-font-size);
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .compare-inner-main{
    background-position:72% top;
    padding-top:80px;
    background-size:400%;
  }
  .compare-floating-elements{
    width:121px;
    top: -4%;
  }
  .compare-table{
    width:860px;
    table-layout:fixed;
    position:relative;
    z-index:1;
  }
  .compare-table thead th:first-child,
  .compare-table tbody th{
    width:180px;
  }
  .compare-table td{
    font-size:calc(var(--body-font-size) - 2px);
  }
  /* eigen scrollbar-design (spec Kulwant): witte pill op transparant-witte
     track, 20px onder de tabel */
  .compare-scroll{
    padding-bottom:20px;
    scrollbar-width:thin;
    scrollbar-color:#fff rgba(255,255,255,.35);
  }
  .compare-scroll::-webkit-scrollbar{
    height:10px;
  }
  .compare-scroll::-webkit-scrollbar-track{
    background:rgba(255,255,255,.35);
    border-radius:20px;
  }
  .compare-scroll::-webkit-scrollbar-thumb{
    background:#fff;
    border-radius:20px;
  }
  .compare-inner-main h2{
    font-size:var(--h2-font-size);
  }
  .bg-yellow-shape{
    background-position:right top;
    top:0px;
    background-size:182%;
  }
  .calculator-bg{
    padding-top:70px;
    background-color:#efe7dc;
  }
  .calculator-bg:before{
    height:100%;
    top:-330px;
  }
  .process.process-split{
    padding-top:70px;
  }
  .process-inner{
    padding:0px;
    gap:10px;
  }
  .process-chev svg{
    height:16px;
    width:auto;
  }
  .process-chev{
    display:flex;
    align-items:flex-start;
    margin-top:2px;
  }
  .process-num{
    font-size:calc(var(--body-font-size) - 2px);
    padding-top:2px;
  }
  .process-left h2{
    font-size:var(--h2-font-size);
    text-align:center;
  }
  .process-split-inner{
    grid-template-columns:1fr;
    gap:60px;
  }
  .process-left{
    width:100%;
    margin-inline:auto;
  }
  .process-collage img{
    height:170px;
    border-radius:15px;
  }
  .process-collage{
    gap:10px;
  }
  .process-left ul li{
    padding:20px 0 25px;
    gap:40px;
  }
  .process-btn{
    justify-content:center;
  }
  .process-btn a{
    margin-inline-start:0;
  }
  .case-inner-page{
    overflow-x:clip;
  }
  .case-inner-page .case-section-outer{
    background-position:68% -12%;
    background-size:200%;
    padding-top:102px;
  }
  .testimonial-card{
    padding:30px;
    border-radius:20px;
    height:100%;
  }
  .testimonial{
    padding-bottom:80px;
  }
  .testimonial .nav-dashes span{
    background: rgb(255 255 255 / 30%);
  }
  .testimonial .nav-dashes span.is-active{
      background: var(--white);
  }
  .testimonial.testimonial-light .nav-dashes span{
    background: rgb(40 18 27 / 30%);
  }
  .testimonial.testimonial-light .nav-dashes span.is-active{
    background: var(--text);
  }
  .case-inner-page:before{
    content:"";
    background:url(../media/sock-element-up.svg) no-repeat center / contain;
    width:101px;
    height:117px;
    top:-28px;
  }
  .case-inner-page:after{
    content:"";
    background:var(--blue);
    width:100%;
    height:400px;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    transform:none;
    z-index:0;
  }

  /* ═══ Product-detail — GEKOPIEERD UIT DE 521-767-BAND (verzoek Kulwant
     2026-08-05); band-eigen fijnslijpen volgt. LET OP: chips-ul-regel
     en footer-pay bewust NIET meegekopieerd (mobiel-goedgekeurde home-regels) ═══ */
  .usecase-card,
  .usecase-card-small{
    width:auto;
    flex-shrink:0;
  }
  .usecases-cards-inner > .usecase-card:not(.usecase-card-small){
    flex:1;
    min-width:0;
  }
  .usecase-img-lg{
    width:100%;
    height:145px;
    border-radius:15px;
  }
  .cases-pdp.cases:before{
    height: 100%;
    top: -240px;
    background-position: 70% top;
    background: var(--yellow);
    transform: rotate(0deg);
    border-radius: 0 0px 0 0;
    width: 100%;
    left: 0;
    clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
  }
  .cases.cases-pdp{
    padding-top:150px;
    padding-bottom:20px;
    overflow: hidden;
  }
  .cases.cases-pdp:after{
    content:"";
    position:absolute;
    background:var(--yellow);
    left:0;
    right:0;
    bottom:0;
    height:350px;
    z-index:0;
  }
  .case-duddle-icons .dubble-right{
    display:none;
  }
  .cases.cases-pdp .case-duddle-icons .dubble-left{
    width:100px;
    left:48%;
    top:-12%;
  }
  .cases.cases-pdp .case-section-outer h2{
    text-align:left;
  }
  .case-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .testimonial.testimonial-yellow{
    padding-bottom:100px;
  }
  .brand-light .brand-duddle-icons .dubble-left{
    width:80px;
    top:-35px;
  }
  .brand-light .brand-duddle-icons .dubble-right{
    width:80px;
    bottom:10%;
  }
  .brand-intro.brand-light{
    padding-top:110px;
    padding-bottom:150px;
  }
  .versus-table{
    max-width:100%;
  }
  /* PDP-hero (mock Kulwant 2026-08-04, 1:1 gemeten op 1320-container):
     galerij 590+110, thumbs 110/9, infokolom vult rest (~535), staffel-
     pitch 35, CTA's 49/45; fonts volgen de tokens */
  .prod-top{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-top:40px;
  }
  .prod-gallery-col,
  .prod-info{
    display:contents;
  }
  .prod-cost{
    display:none;
  }
  /* volgorde per tablet-mock: titel/tekst/rating -> galerij -> usps ->
     staffel -> knoppen */
  .prod-hero .breadcrumb{
    padding-top:10px;
  }
  .prod-info h1{ 
    order:1; 
    margin-bottom:12px; 
    text-align:center;
    width: 100%;
   }
  .prod-info > p{ order:2; text-align:center; }
  /* Ook de blokken die een redacteur via de wysiwyg in Beschrijving kan
     zetten meenemen: zonder eigen order krijgen ze 0 en springen ze op
     mobiel boven de titel. */
  .prod-info > ul,
  .prod-info > ol,
  .prod-info > table{ order:2; }
  .prod-rating{ order:3; justify-content:center; margin-left:auto; margin-right:auto; }
  .prod-gallery{ order:4; }
  .pdp-usps-main{ order:5; }
  .prod-price-title{ 
    order:6; 
    margin-bottom:18px; 
    margin-top: 40px;
  }
  /* Ontwerp mobiel: de typenaam rechts naast Staffelprijzen, in coral en
     kleine letters. De kop wordt hier een rij; op bredere schermen blijft
     hij een gewoon blok en is de naam verborgen. */
  .prod-price-title{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    width: 100%;
  }
  /* Het ontwerp laat (ex. BTW) op mobiel weg; met de typenaam erbij past
     de regel anders niet -- met de langste naam (Yoga & pilates sokken)
     liep de kop over drie regels. Op tablet en desktop blijft hij staan. */
  .prod-price-btw{
    display:none;
  }
  .prod-price-type{
    display:inline;
    color:var(--coral);
    text-transform:lowercase;
    font-family:var(--roc-grotesk);
    font-weight:700;
    text-align:right;
  }
  .staffel-table.prod-staffel{ order:7; width:100%; margin-bottom:35px; }
  /* Ontwerp mobiel: de meest gekozen staffel krijgt een geel vlak, net als
     de actieve regel in de calculator. De rij is te herkennen aan de badge,
     dus hiervoor hoeft er niets aan de template te veranderen. De scheidings-
     lijn eronder gaat weg, anders loopt er een streep door het gele blok. */
  .prod-staffel .staffel-row:has(.staffel-badge){
    background:var(--yellow);
    border-radius:5px;
    border-bottom-color:transparent;
  }
  .prod-actions{
    order:8;
    display:none;
  }
  .prod-actions .cta,
  .prod-actions .cta-light{
    width:100%;
  }
  .prod-gallery{
    display:block;
    position:relative;
    width:100%;
  }
  .prod-main{
    width:100%;
    height:auto;
    aspect-ratio:1/1;
    border-radius: 15px;
  }
  .prod-thumbs{
    gap:6px;
  }
  .prod-thumb{
    height:90px;
    border-radius:15px;
    border-radius: 10px;
  }
  .prod-thumbs{
    position:static;
    width:auto;
    display:flex;
    flex-direction:row;
    overflow-x:auto;
    scrollbar-width:none;
    margin-top:10px;
    margin-right:-20px;
    padding-right:20px;
  }
  /* Safari kent scrollbar-width niet, die heeft deze regel nodig. */
  .prod-thumbs::-webkit-scrollbar{ display:none; }
  .prod-thumb{
    min-height:0;
    flex:0 0 90px;
    width:90px;
  }
  .pdp-usps-main{
    margin-top:32px;
    margin-bottom:30px;
    width:100%;
    /* pin: basis centreert 2026-08-12 op de pagina (left-calc) — alleen 1920 */
    left:0;
  }
  .pdp-usps-main ul{
    margin-top:0;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 15px;
  }
  .pdp-usps-main ul li{
    white-space:nowrap;
  }
  .prod-rating{
    margin-bottom:33px;
  }
  .prod-info p{
    margin-bottom:20px;
    width: 100%;
  }
  .prod-info .staffel-row{
    padding:5px 20px;
  }
  .prod-info .staffel-row.staffel-head-row{
    padding:6px 20px;
  }
  .prod-actions .cta{
    height:49px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .prod-actions .cta-light{
    height:45px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  body.pdp-calc-open {
    overflow: hidden;
  }
  .specs-grid{
    grid-template-columns:1fr;
    display: block;
  }
  .weave-inner h2{
    margin-bottom:35px;
  }
  .specs-section{
    padding-top:120px;
    padding-bottom:30px;
    position:relative;
    background-position: left top;
    background-size: 100%;
  }
  .specs-section:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:80%;
    background:var(--blue);
    z-index:0;
  }
  .specs-section .container{
    position:relative;
    z-index:1;
  }
  .spec-q{
    font-weight:500;
  }
  .promise-card{
    padding:18px;
  }
  .promise-icon{
    height:50px;
  }
  .promises{
    padding-bottom:60px;
    /* pin: basis-padding-top ging 2026-08-12 naar 120px (1920) — band houdt 60 */
    padding-top:60px;
  }
  /* chips-ul alleen HIER 10px — de gedeelde :is(.impact,.promises,.steps-section)-regel
     blijft 60px (home-goedgekeurd) */
  .promises > .container-md > ul{
    margin-top:10px;
  }
  .weave{
    padding-top:30px;
  }
  .weave-img{
    height:240px;
    border-radius:0px 0px 15px 15px;
  }
  .weave-grid{
    gap:10px;
  }
  .weave-body h5{
    font-size:calc(var(--h5-font-size) - 2px);
  }
  .weave-tag{
    font-size:var(--body-sm-font-size);
  }
  .weave-inner:before{
    bottom:-1%;
    background-size:350%;
    background-position:center bottom;
  }
  .weave-body{
    padding:25px 20px;
  }
  .weave-inner h2 br{
    display: block;
  }
  /* versus-tabel per tablet-mock: label 58% / SOKKIES 20% / De rest 22% */
  .versus-table{
    table-layout:fixed;
  }
  .versus-table thead th:nth-child(1){ width:45%; }
  .versus-table thead th:nth-child(2){ width:26%; }
  .versus-table thead th:nth-child(3){ width:29%; }
  .versus-dubble-left{
    width:170px;
    top:-17%;
  }
  .specs-duddle-icons .dubble-right{
    width: 120px;
    top: -6%;
    right: 4%;
  }
  .specs-duddle-icons .dubble-left{
    width: 115px;
    bottom: -18%;
    left: 63%;
  }
  .versus{
    padding-top:60px;
    padding-bottom:80px;
    width:100%;
  }
  .cards-suggestion{
    padding-top:80px;
  }
  /* knop onder de slider: head-kinderen los via display:contents + order */
  .cards-suggestion .container{
    display:flex;
    flex-direction:column;
  }
  .cards-suggestion-head{
    display:contents;
  }
  .cards-suggestion-head h2{
    order:1;
    margin-bottom:0px;
  }
  .cards-suggestion .cards-suggestion-swiper{
    order:2;
    width:100%;
    max-width:100%;
    min-width:0;
  }
  /* De balk hoort tussen de slider en de knop. Zonder eigen order valt
     hij op 0 en dus BOVEN de kop -- de knop schuift daarom een plek op. */
  .cards-suggestion .suggestion-nav{
    order:3;
    padding: 0;
    margin: 0;
  }
  .cards-suggestion-head .cta-light{
    order:4;
    margin-top:30px;
  }
  .design-now{
    padding-top:20px;
    padding-bottom:80px;
  }
  .promises-grid{
    grid-template-columns:1fr;
  }
  /* weave: scroll-rij — 1 kaart + 30% tweede */
  .weave-grid{
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
    margin-left:-20px;
    margin-right:-20px;
    padding-left:20px;
    padding-right:20px;
  }
  .weave-grid::-webkit-scrollbar{
    display:none;
  }
  .weave-card{
    border-radius: 15px;
    flex:0 0 calc((100% - 10px)/1.3);
  }
  /* versus: vaste tabelbreedte, scrollt in de wrapper */
  .versus-scroll{
    overflow-x:auto;
  }
  .versus-table{
    min-width:100%;
  }
  .versus .container{
    padding-left:0;
    padding-right:0;
  }
  .tick{
    width:24px;
    height:24px;
  }
  .versus-table thead .is-us svg{
    width:60px;
    height:auto;
  }
  .versus-table tbody tr:nth-child(odd) th{
    border-left:none;
  }
  .versus-table tbody tr:nth-child(odd) td:nth-child(3){
    border-right:none;
  }
  .design-bg-union{
    bottom:-1px;
    background-image:url(../media/configurator-bg-ipad.png);
    aspect-ratio:769/1203;
    background-size:300%;
    background-position:59% top;
    /* spec 2026-08-13 */
    top:-80px;
    background-size:121%;
  }
  .design-duddle-sock{
    display:none;
  }
  .conf-preview{
    max-width:860px;
  }
  .conf-preview-card{
    height:275px;
  }
  .usecases{
    padding-top:100px;
    padding-bottom:40px;
  }
  .usecases-head{
    padding:0 0 40px;
    grid-column:1 / -1;
  }
  .usecases-head h2{
    text-align:center;
    margin-bottom:0px;
  }
  .usecases-cards-inner{
    display:contents;
  }
  .usecases-masonry{
    gap:10px;
    grid-template-columns:1fr 1fr;
    align-items:start;
  }
  /* "Personeelsgeschenken" is 172px breed in een kaartkolom van 139px en liep
     dus 33px de buurkaart in — dezelfde tekstoverloop als de .usecases-flat-fix
     van 2026-08-12. hyphens:auto stond hier al, maar dat breekt alleen af als de
     browser een NL-woordenboek heeft; overflow-wrap is de harde garantie dat het
     woord nooit meer uit de kaart loopt. */
  .usecases-masonry .usecase-body h5{
    font-size:var(--h5-font-size);
    overflow-wrap:break-word;
    hyphens:auto;
  }
  /* mock toont geen bodytekst in de kaarten */
  .usecases-masonry .usecase-body p{
    display:none;
  }
  .usecases-outer-left,
  .usecases-outer-right{
    display:contents;
  }
  .usecase-img-md{
    border-radius:15px;
    height:145px;
  }
  /* mock-leesvolgorde (2026-08-05): rij1 Promotionele+Sportclubs,
     rij2 Personeels+Corporate, rij3 Evenementen+Relatie */
  .usecases-outer-left .usecase-card-small{ order:1; }
  .usecases-outer-left .usecase-card:not(.usecase-card-small){ order:2; }
  .usecases-cards-reverse .usecase-card:not(.usecase-card-small){ order:3; }
  .usecases-cards-reverse .usecase-card-small{ order:4; }
  .usecases-outer-right .usecases-cards-inner:not(.usecases-cards-reverse) .usecase-card-small{ order:5; }
  .usecases-outer-right .usecases-cards-inner:not(.usecases-cards-reverse) .usecase-card:not(.usecase-card-small){ order:6; }
  /* Sticky CTA-balk onderin (mock 2026-08-05; markup vlak vóór de footer) */
  .pdp-sticky{
    background:#fff;
    bottom:0;
    display:block;
    left:0;
    padding:8px;
    position:fixed;
    right:0;
    z-index:90;
  }
  .pdp-sticky-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:9px;
    margin-top:7px;
  }
  .pdp-sticky-row a{
    flex:1 1 0;
    width:auto;
  }
  /* Balk dekt ±110px af — footer-legal leesbaar houden */
  .pdp-sticky ~ footer{
    padding-bottom:115px;
  }

  /* ═══ Configurator — GEKOPIEERD UIT DE 521-767-BAND (verzoek Kulwant
     2026-08-06); band-eigen fijnslijpen volgt ═══ */
  .conf-preview-card img{
    border-radius:25px;
  }
  .banner-section.configurator-banner{
    padding-bottom:40px;
  }  /* Sticky CTA-knop onderin (mock 2026-08-06; markup vlak vóór de footer) */
  .conf-sticky{
    display:flex;
    justify-content:center;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    padding:0 8px 8px;
    z-index:90;
  }
  /* witte strook = halve knophoogte (22px) + onderruimte 8 */
  .conf-sticky::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:30px;
    background:#fff;
    z-index:-1;
    border-radius: 20px 20px 0 0;
  }
  .conf-sticky .cta{
    width:auto;
    padding-left:45px;
    padding-right:45px;
  }
  /* knop dekt ±60px af — footer-legal leesbaar houden */
  .conf-sticky ~ footer{
    padding-bottom:65px;
  }
  .conf-hero-btns{
    margin-bottom:0px;
  }
  .configurator-section ul{
    gap:30px 60px;
    justify-content:flex-start;
    padding-left:30px;
    padding-right:30px;
  }
  /* h5 17px = h5-token + 2 (afwijking gemeld) */
  .configurator-section ul li h5{
    font-size:calc(var(--h5-font-size) + 2px);
  }
  /* pijl 9x11 (was content-url op natuurlijke maat) + uitgelijnd op de kop */
  .configurator-section ul li::before{
    content:"";
    width:9px;
    height:11px;
    background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212.443%22%20height%3D%2216.162%22%20viewBox%3D%220%200%2012.443%2016.162%22%3E%3Cg%20transform%3D%22translate%28-1259.903%20-925.152%29%22%3E%3Cg%20transform%3D%22translate%281272.346%20941.314%29%20rotate%28180%29%22%3E%3Cg%3E%3Cpath%20d%3D%22M4.1%2C8.283l2.523%2C5.241a1.908%2C1.908%200%200%201-1.048%202.465%201.859%2C1.859%200%200%201-2.427-1.065L.053%2C8.223a.778.778%200%200%201%20.008-.588L3.165.464a.751.751%200%200%201%20.993-.4L6.2.958A.772.772%200%200%201%206.6%201.967L4.107%2C7.694a.777.777%200%200%200-.008.588%22%20fill%3D%22%23fa4a45%22/%3E%3Cpath%20d%3D%22M44.059%2C8.563%2C46.582%2C13.8a1.908%2C1.908%200%200%201-1.048%202.465A1.859%2C1.859%200%200%201%2043.107%2C15.2L40.013%2C8.5a.778.778%200%200%201%20.008-.588l3.1-7.172a.751.751%200%200%201%20.993-.4l2.043.9a.772.772%200%200%201%20.395%201.009L44.066%2C7.975a.777.777%200%200%200-.008.588%22%20transform%3D%22translate%28-34.271%20-0.241%29%22%20fill%3D%22%23fa4a45%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
    top:5px;
  }
  /* demo-kaart alleen HIER 350px — .conf-preview-card is gedeeld met PDP (600px, final) */
  .configurator-section .conf-preview-card{
    height:350px;
  }
  .conf-works .process-split-inner{
    gap:40px;
    grid-template-columns:1fr;
  }
  /* Collectie-tabletregel .process-left{66%} geldt hier niet */
  .conf-works .process-left{
    width:100%;
  }
  .conf-works .process-left ul{
    width:100%;
  }
  .conf-check{
    width:100%;
    padding:20px;
  }
  /* conf-check-maten: bewuste token-afwijkingen (gemeld):
     h5 = h5+8 (23), p = body+2 (17), sub = body+4 (19) */
  .conf-check h5{
    font-size:calc(var(--h5-font-size) + 8px);
  }
  .conf-check p{
    font-size:calc(var(--body-font-size) + 2px);
  }
  .conf-check-sub{
    font-size:calc(var(--body-font-size) + 4px);
  }
  .conf-works .process-inner{
    width:82%;
  }  .conf-works .process-collage{
    width:100%;
  }
  /* collage: page-scoped via .conf-works (gedeeld met Collectie/toepassingen);
     base .conf-works-inner heeft align-items:end — hier boven uitgelijnd */
  .conf-works .process-collage{
    align-self:start;
  }
  .conf-works .process-collage img{
    height:170px;
  }
  .conf-types{
    padding-top:40px;
    padding-bottom:40px;
  }
  .conf-bg{
    background-size: cover;
    height: 1180px;
    top: -50%;
    background-position: 88%;
  }
  .conf-types:after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -9%;
    left: 0;
    background: url(../media/bg-conf-bl.png) no-repeat top center;
    z-index: -1;
    background-size: 100%;
    background-position: bottom;
  }
  /* cases-solid-gescoped: PDP heeft dezelfde duddle-structuur */
  .cases.cases-solid{
    padding-top:80px;
  }
  /* conf-works-gescoped: .process-split is gedeeld (Collectie/toepassingen) */
  .process.process-split.conf-works{
    padding-bottom:40px;
  }
  .cases.cases-solid .case-duddle-icons .dubble-left{
    width:102px;
    top:-7%;
  }
  .case-sock-right{
    width:210px;
  }
  .cases.conf-designed{
    padding-top:120px;
    padding-bottom:60px;
  }
  /* testimonial-light-gescoped: .testimonial is gedeeld (Collectie final, PDP-yellow) */
  .testimonial.testimonial-light{
    padding-top:40px;
    padding-bottom:90px;
  }
  .brand-intro.brand-intro-yellow{
    padding:80px 0 100px;
  }
  .brand-intro-yellow .brand-duddle-icons .dubble-left{
    width:81px;
    top:-12%;
  }
  .brand-intro-yellow .brand-duddle-icons .dubble-right{
    width:81px;
    bottom:2%;
  }
  /* ═══ Werkwijze — GEKOPIEERD UIT DE 521-767-BAND (verzoek Kulwant
     2026-08-06); band-eigen fijnslijpen volgt ═══ */
  .steps-section{
    padding:80px 0px 70px;
  }
  .steps-section h2{
    max-width:210px;
    margin-inline:auto;
    text-align:center;
    font-size:var(--h2-font-size);
  }
  .steps-nav{
    width:100%;
    margin-top:40px;
  }
  .step-card-img{
    height:220px;
    border-radius:25px;
  }
  .step-card-body{
    gap:40px;
    padding:0px 25px;
  }
  .cases.cases-bg-pink{
    padding-top:120px;
    padding-bottom:0px;
  }
  .cases.cases-bg-pink .cases-nav{
    margin-top:50px;
  }
  /* designed-regels gescoped: home's .designed-sectie heeft eigen mobiele
     kalibratie (margin 56, slides 200x200) */
  .cases-bg-pink .designed{
    margin-top:80px;
  }
  .cases-bg-pink .designed-head h3{
    margin-bottom:16px;
  }
  /* compound (conventie): .calculator is gedeeld met home */
  .calculator.calculator-pink{
    padding-top:31px;
    padding-bottom:50px;
  }
  /* ww-brand-marker: .brand-intro.brand-light is gedeeld met PDP
     (mobiel goedgekeurd op 110/150 + dubble-right bottom 10%) */
  .brand-intro.brand-light.ww-brand{
    padding-top:100px;
    padding-bottom:130px;
  }
  .ww-brand .brand-duddle-icons .dubble-right{
    width:80px;
    bottom:5%;
  }
  .cases.cases-bg-pink:before{
    height:100%;
    top:-108px;
    background-position:80% top;
  }
  /* cta-final-feet bewust NIET meegekopieerd: mobiel heeft goedgekeurde
     home/Collectie-feetregels — werkwijze-specs volgen apart indien nodig */
  /* ═══ Reviews-en-cases — GEKOPIEERD UIT DE 521-767-BAND (verzoek Kulwant
     2026-08-06); band-eigen fijnslijpen volgt ═══ */
  .case-card-img{
    height:160px;
  }
  .case-card-tags{
    margin-bottom:15px;
  }
  .case-card-link{
    margin-top:0px;
  }
  .case-card{
    border-radius:15px;
  }
  .case-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .simple-hero-content p{
    width:90%;
  }
  .simple-hero-content p br{
    display:none;
  }
  .simple-hero{
    padding-bottom:60px;
  }
  /* filterrij: label + chips op één regel, horizontaal scrollend */
  .case-filter{
    width:100%;
    max-width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .case-filter::-webkit-scrollbar{
    display:none;
  }
  .case-filter .case-filter-label{
    white-space:nowrap;
    flex:0 0 auto;
  }
  .case-filter .chip{
    flex:0 0 auto;
    white-space:nowrap;
  }
  .cases.review-cases:before{
    height:100%;
    top:-60px;
    background-position:80% top;
  }
  .cases.review-cases{
    padding-top:160px;
  }
  .chip{
    padding:8px 14px;
  }
  .case-grid-section{
    padding:70px 0px 0px;
  }
  .brands.brands-beige{
    padding-bottom:0px;
  }
  /* ═══ Reviews-en-cases-detail — GEKOPIEERD UIT DE 521-767-BAND (verzoek
     Kulwant 2026-08-07); band-eigen fijnslijpen volgt ═══ */
  .impact-inner.case-story-inner .impact-gallery{
    width:580px;
  }
  /* zelfde patroon als home's impact: sectie knipt de gallery-bleed af */
  .case-story{
    overflow:hidden;
  }
  .sock-duddle-object{
    width:90px;
    transform:rotate(45deg);
    bottom:46%;
    left:38%;
  }
  .case-specs{
    padding:0px 0 40px;
  }
  .case-spec{
    border-radius:15px;
    padding:15px 20px;
    height:80px;
    gap:6px;
  }
  .case-specs-grid{
    gap:10px;
  }
  .case-video{
    padding:90px 0 110px;
    background:none;
    position:relative;
    z-index:1;
  }
  .case-bg-union{
    top:-50%;
    height:1010px;
    background-position:left 20% top;
    background-size:243%;
  }
  .case-result{
    padding-top:40px;
    padding-bottom:40px;
    overflow:hidden; /* rotatie-overhang van de result-grid (-3.5deg) */
  }
  .case-result.case-result-detail{
    background:none;
    padding-bottom:100px;
  }
  .case-others{
    padding:90px 0px;
  }
  .case-others .container{
    padding-left:10px;
    padding-right:10px;
  }
  .case-video-inner{
    height:190px;
    max-width:100%;
  }
  /* quote-maten: bewuste token-afwijkingen (gemeld): h5+2 en body+2 */
  .case-quote h5{
    font-size:calc(var(--h5-font-size) + 2px);
    line-height:23px;
    font-weight:600;
  }
  .case-quote-author p{
    font-size:calc(var(--body-font-size) + 2px);
  }
  .case-video-card img{
    height:100%;
  }
  .case-video-doodle-r{
    right:5%;
    top:25%;
    width:200px;
  }
  /* scroll-rij (huispatroon): full-bleed zonder zijpadding, 1 foto vol +
     tweede 50% zichtbaar; rotatie eruit */
  .case-result-grid{
    gap:12px;
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
    width:100vw;
    margin-left:calc(50% - 50vw);
    transform:rotate(-3.5deg); /* zoals desktop */
    scroll-snap-type:x mandatory;
  }
  .case-result-grid::-webkit-scrollbar{
    display:none;
  }
  /* 1 foto vol gecentreerd + 15% buren links/rechts; min-width:0 tegen
     de automatische replaced-minimum (ratio x 340px won anders van basis) */
  .case-result-grid img{
    flex:0 0 calc((100% - 24px)/1.3);
    scroll-snap-align:center;
    min-width:0;
    width:auto;
  }
  .case-result-grid img{
    height:340px;
  }
  .case-quote{
    max-width:100%;
  }
  .case-result-bg{
    height:75%;
  }

  /* ═══ Offerte — GEKOPIEERD UIT DE 521-767-BAND (verzoek Kulwant
     2026-08-07); band-eigen fijnslijpen volgt ═══ */
  .quote-wrap{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    align-items:start;
  }
  .quote-aside{
    padding:20px;
  }
  .stepper-label{
    display:none;
  }
  /* stepper één regel, dots strak naast elkaar (mock 2026-08-07) */
  .stepper{
    flex-direction:row;
    align-items:center;
    gap:15px;
    margin-bottom:30px;
  }
  .stepper-item{
    flex:0 0 auto;
    width:auto;
    flex-direction:row;
  }
  .mini-footer-left{
    display:none;
  }
  .quote-card{
    padding:20px;
  }
  .quote-section{
    margin-top:20px;
  }
  /* usps één regel — offerte-banner-marker (usps is gedeeld met home) */
  .banner-section.offerte-banner .usps{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 20px;
  }
  .banner-section.offerte-banner .usps span{
    white-space:nowrap;
  }
  .type-picker{
    gap:20px 10px;
    grid-template-columns:repeat(3,1fr);
  }
  .application-section:after{
    width:192px;
    bottom:-27%;
  }
  .application-bg-shape{
    height:630px;
    background-position:center left 25%;
  }
  .application-steps{
    gap:24px;
    max-width:100%;
    grid-template-columns:1fr;
    margin:0;
  }
  /* stap: nummer-cirkel links, tekst rechts (mock 2026-08-07) */
  .application-step{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:24px;
    align-items:start;
    text-align:left;
  }
  .application-step .application-num{
    grid-row:1 / 3;
  }
  .application-step h3{
    grid-column:2;
    margin-bottom:0px;
  }
  .application-step p{
    grid-column:2;
  }
  .application-section{
    padding:40px 0px 80px;
  }
  .banner-section.offerte-banner{
    padding-bottom:60px;
  }
  /* alleen deze pagina: faq-light is offerte-uniek (band-generiek .faq = 220) */
  .faq.faq-light{
    padding-bottom:20px;
  }
  .application-sample-request .application-steps{
    max-width:100%;
  }
  /* ═══ Offerte — mobiel-eigen regels (winnen op de kopie hierboven) ═══ */
  .banner-section.offerte-banner{
    padding-bottom:40px;
  }
  /* usps één per regel op mobiel (kopie zet row) */
  .banner-section.offerte-banner .usps{
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  .quote-card{
    padding:0px;
    border:none;
  }
  .type-picker{
    grid-template-columns:repeat(2,1fr);
  }
  .pick-img{
    height:150px;
  }
  .quote-aside{
    display:none;
  }
  .application-bg-shape{
    height:100%;
    background-position:top center;
    background-size:150%;
  }
  .application-section{
    padding-top:110px;
  }
  /* roze kleurvlak onderin (zelfde patroon als de cases-strips);
     ::before schildert vóór de shape-div — shape valt eroverheen */
  .application-section:after{
    width:160px;
    bottom:-18%;
  }
  .application-section::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:450px;
    background:var(--pink);
    z-index:-1;
  }
  /* dropzone = pill-knop "Upload je bestand" (mock 2026-08-07) */
  .dropzone{
    border:none;
    background:none;
    padding:0;
    text-align:center;
    display:block;
    width:100%;
  }
  .dz-desktop{
    display:none;
  }
  .dz-mobile{
    display:block;
    width:100%;
    border:0.5px solid var(--dark); /* zelfde rand als .cta-light */
    border-radius:999px;
    padding:16px 20px;
    font-weight:700;
  }
  .dropzone > span{
    display:block;
    margin-top:12px;
    font-size:var(--body-sm-font-size);
  }
  .banner-section.offerte-banner h1 br{
    display:inline;
  }
  /* Sticky contactbalk onderin (mock 2026-08-07) */
  .funnel-sticky{
    display:flex;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:90;
    background:#fff;
    border:1px solid #e5e0d8;
    border-bottom:none;
    border-radius:16px 16px 0 0;
  }
  .funnel-sticky a{
    flex:1 1 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 0;
    color:var(--text);
    text-decoration:none;
    font-weight:700;
    font-size:var(--body-sm-font-size);
  }
  .funnel-sticky a + a{
    border-left:1px solid #e5e0d8;
  }
  .funnel-sticky ~ footer{
    padding-bottom:60px;
  }
  /* ═══ Bedankt — GEKOPIEERD UIT DE 521-767-BAND (verzoek Kulwant
     2026-08-07); band-eigen fijnslijpen volgt ═══ */
  .follow-outer-main{
    height:860px;
  }
  .thanks-status{
    padding:60px 0 0px;
  }
  .thanks-status:before{
    display:none;
  }
  .thanks-steps{
    text-align:center;
    margin-bottom:60px;
    gap:40px;
  }
  .thanks-step{
    display:grid;
    grid-template-columns:auto auto;
    justify-content:start;
    column-gap:14px;
    text-align:left;
  }
  .thanks-step-dot{
    grid-row:1/3;
    align-self:center;
    margin-bottom:0;
  }
  .wait-img{
    height:280px;
  }
  .follow{
    padding:0px;
    margin-top:-190px;
  }
  .follow-inner{
    flex-wrap:wrap;
    gap:40px;
    align-items:center;
    text-align:center;
  }
  .follow-socials{
    justify-content:center;
  }
  .newsletter-card{
    padding:35px;
  }
  /* ═══ Toepassingen — GEKOPIEERD UIT DE 521-767-BAND (verzoek Kulwant
     2026-08-10); cta-final-feet bewust NIET mee (mobiel heeft goedgekeurde
     home/Collectie-feetregels); band-eigen fijnslijpen volgt ═══ */
  .usecase-why{
    padding-bottom:0px;
    padding-top:80px;
    text-align:left;
  }
  .usecase-why .container > p{
    text-align:left;
    margin:0 0 50px;
  }
  .usecase-why ul{
    grid-template-columns:1fr;
    gap:20px;
  }
  .usecase-why li h6{
    margin-bottom:0px;
  }
  .usecases.usecases-flat{
    margin-top:0px;
    padding-top:60px;
  }
  .usecases-flat .usecase-img{
    height:124px;
  }
  .usecases-flat .usecase-card{
    padding:8px;
    border-radius:15px;
  }
  /* audit 2026-08-12: "Personeelsgeschenken"/"Relatiegeschenken" zijn breder
     dan de 2-up-kaartkolom (tekstoverloop = de +7px h-scroll op 390) —
     afbreken met koppelteken; .usecases-flat-scope zodat de PDP-masonry
     (deelt .usecase-body h5) ongemoeid blijft */
  .usecases-flat .usecase-body h5{
    overflow-wrap:break-word;
    hyphens:auto;
  }
  .usecases-grid{
    gap:10px;
    /* minmax(0,1fr): kaart-mincontent maakte de kolommen anders ongelijk */
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .toepassingen .collection-beige{
    margin-top:50px;
  }
  /* page-scoped: band heeft al .collection-img{295px} (home, goedgekeurd) */
  .toepassingen .collection-img{
    height:200px;
  }
  .toepassingen .collection-beige:before{
    top:-182px;
    background-size:170%;
  }
  .toepassingen .cases{
    padding-top:150px;
    margin-top:0px;
  }
  .toepassingen .cases:before{
    background-position: left 80% top -120px;
    width: 104%;
    left: -1%;
    height: 13%;
    top: -6%;
    border-radius: 0;
    background: var(--light-beige);
  }
  .toepassingen .cases:after{
    width:130px;
  }
  .toepassingen .calculator-bg:before{
    background-position:28% bottom;
    top:-600px;
  }
  .toepassingen .uc-bg-yellow-shape{
    height:520px;
  }
  .toepassingen .brand-light .brand-duddle-icons .dubble-left{
    width:80px;
    top:-50px;
  }
  .toepassingen .brand-light .brand-duddle-icons .dubble-right{
    width:80px;
  }
  .toepassingen .brand-intro.brand-light{
    padding-top:90px;
    padding-bottom:100px;
  }
  /* Sticky CTA-strook onderin (mock 2026-08-10) */
  .uc-sticky{
    display:flex;
    flex-direction:column;
    gap:10px;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:90;
    background:#fff;
    padding:12px 20px 16px;
    border-radius:15px 15px 0 0;
  }
  .uc-sticky ~ footer{
    padding-bottom:130px;
  }
  /* ═══ Veelgestelde vragen — GEKOPIEERD UIT DE 521-767-BAND (verzoek
     Kulwant 2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .faq-cat-group{
    margin-bottom:60px;
  }
  .faq-cats-list{
    margin-top:40px;
  }
  .faq-cats{
    padding-top:40px;
  }
  .faq-cats-filter{
    gap:5px;
    /* overflow:visible — de case-filter-scrollrij (reviews-regel) knipte het
       dropdown-paneel anders af binnen de rij */
    overflow:visible;
  }
  /* page-scoped: .chip is gedeeld met reviews-en-cases */
  .faq-page .chip{
    padding:10px 18px;
  }
  .faq-page .faq-item.is-open .faq-q{
    border-bottom:none;
  }
  /* Chips → dropdown (zelfde variant als de 521-band) */
  .faq-cats-filter .chip{
    display:none;
  }
  .faq-page .faq-cats-select{
    display:block;
    flex:1;
    /* min-width:0: flex-minimum is anders de breedste optie → rij liep uit beeld */
    min-width:0;
    margin-top:0;
  }
  .faq-page .faq-cats-select .dropdown-trigger{
    padding:12px 15px 14px;
    border-radius:8px;
  }
  .faq-page .faq-cats-select.open .dropdown-trigger{
    border-radius:8px 8px 0 0;
  }
  /* ═══ Over ons — GEKOPIEERD UIT DE 521-767-BAND (verzoek Kulwant
     2026-08-10); duurz-regels in het SEED-blok hieronder; overons-story
     volgt hier de OPGELOSTE 2-koloms usecases-grid van de PDP-mobiel
     (verzoek Kulwant — eigen beelden/verhoudingen behouden);
     band-eigen fijnslijpen volgt ═══ */
  /* (de gekopieerde .timeline{padding-bottom:0} is opgeruimd — de
     nav-balk-regel verderop zet bewust pb 70) */
  /* Hero mobiel: 1 slide volledig + 1 voor 40% (gap 14): 1.4W + 14 = 100vw */
  .over-ons .banner-section{
    padding:50px 0px 50px;
  }
  .over-ons .gallery-swiper .swiper-slide{
    /* gutter 20 + 1.4W + 14 = 100vw */
    width:calc((100vw - 34px) / 1.4);
    height:158px;
  }
  .over-ons .gallery-swiper{
    width:100%;
    margin-left:0;
    padding-top:0px;
    /* eerste slide start op de mobiele container-gutter */
    padding-left:20px;
  }
  /* stagger omlaag (zie 768-band): binnen de clippende .gallery-box */
  .over-ons .gallery-swiper .swiper-slide{
    transform:translateY(25px);
  }
  .over-ons .gallery-swiper .swiper-slide:nth-child(3n + 1){
    transform:translateY(0);
  }
  /* story = masonry-mock (2026-08-10): tekst boven, rij 1 = sm links +
     lg rechts, rij 2 = lg links + sm rechts (row-reverse), toppen gelijk —
     paren blijven flexrijen met de eigen 325:458-verhouding */
  .overons-story{
    padding:40px 0 0px;
  }
  .overons-story-inner{
    grid-template-columns:minmax(0,1fr);
    gap:15px;
  }
  .over-ons .overons-story-right{
    display:contents;
  }
  .over-ons .overons-story-text{
    order:1;
    margin-bottom:30px;
  }
  /* nav als onderbalk met voortgangsstreepjes (mock 2026-08-10) */
  .timeline{
    position:relative;
    /* WP 2026-08-20: was 70px — CMS-teksten kunnen langer zijn dan de statische
       kaarten; 120px houdt de onderbalk (40px knopzone + 60px marge) altijd
       vrij van de slides, hoe lang de tekst ook wordt */
    padding-bottom:120px;
    margin-top:-90px;
    padding-top:160px;
  }
  .timeline:before{
    background-position:right 32% top;
    background-size:cover;
    height:300px;
    /* achter de content: de head is mobiel static (nav-anker) en werd
       anders door de absolute shape overschilderd */
    z-index:-1;
  }
  /* head is desktop het anker (position:relative) — mobiel moet de nav op
     de sectie ankeren om onder de slider te kunnen staan */
  .timeline-head{
    position:static;
  }
  .timeline-nav{
    position:absolute;
    bottom:0;
    left:20px;
    right:20px;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding-bottom:60px;
    z-index:2; /* WP 2026-08-20: swiper-wrapper staat later in de DOM en ving de kliks */
  }
  /* knoppen shrink-vast; streepjes flexibel — 8 vaste van 26px pasten niet
     in de 350px-balk en drukten de knoppen plat */
  .timeline-nav button{
    flex:0 0 auto;
  }
  .timeline-nav .timeline-dashes{
    display:flex;
    position:static;
    flex:1;
    min-width:0;
    justify-content:center;
    align-items:center;
    gap:6px;
  }
  .timeline-nav .timeline-dashes .swiper-pagination-bullet{
    flex:1 1 0;
    min-width:8px;
    max-width:26px;
    height:5px;
    border-radius:3px;
    background:#cfc4bb;
    opacity:1;
    margin:0;
  }
  .timeline-nav .timeline-dashes .swiper-pagination-bullet-active{
    background:var(--text);
  }
  .timeline-img{
    height:220px;
  }
  .over-ons .overons-story .story-collage{
    order:2;
  }
  .over-ons .overons-story .story-collage,
  .over-ons .overons-story .story-collage-right{
    gap:10px;
  }
  .over-ons .overons-story .story-collage-right{
    order:3;
    flex-direction:row-reverse;
    margin-top:0;
  }
  .over-ons .overons-story .story-collage-right .img-sm{
    margin-top:0;
  }
  .overons-values{
    padding:130px 0px 80px;
  }
  .overons-values:before{
    height:320px;
  }
  .overons-values:before{
    background-position:right 26% top;
    background-size:cover;
  }
  .overons-values h2{
    margin-bottom:40px;
  }
  .overons-values ul{
    gap:10px;
    grid-template-columns:repeat(2,1fr);
  }  /* 17px = het h6-token op mobiel */
  .overons-values ul h3{
    font-size:var(--h6-font-size);
  }
  .values-num{
    margin-bottom:10px;
  }
  .over-ons .impact{
    margin-top:0px;
  }
  .over-ons .impact:before{
    top:0;
    background-position:right 6% top;
  }
  .over-ons .impact .impact-left p br{
    display:none;
  }
  .overons-reviews{
    padding:80px 0px;
  }
  .overons-duurz{
    padding-top:0px;
    padding-bottom:220px;
  }
  .duurz-doodle{
    width:84px;
    top:-34px;
    /* gecapt: kale 70% stak op 390 buiten beeld (h-scroll) */
    left:min(70%, calc(100% - 104px));
  }
  .duurz-text h3{
    margin-bottom:10px;
  }
  .over-ons .cta-final-feet{
    width:150px;
    top:-243px;
    right:10px;
  }

  /* ═══ Over ons — SEED: duurz volgt de cases-sectie van home (verzoek
     Kulwant 2026-08-10); de rest van de pagina volgt in de bandronde ═══ */
  .duurz-inner{
    gap:26px;
    grid-template-columns:1fr;
  }
  .duurz-collage{
    gap:20px;
    flex-direction:column;
    width:100%;
  }
  .duurz-collage-col{
    gap:20px;
    /* de twee kleintjes naast elkaar in één rij (correctie Kulwant) */
    flex-direction:row;
  }
  .duurz-collage .img-lg{
    width:100%;
    height:240px;
  }
  .duurz-collage-col .img-sm{
    width:calc(50% - 10px);
    height:110px;
  }
  /* ═══ Duurzaamheid — GEKOPIEERD UIT DE 521-767-BAND (verzoek Kulwant
     2026-08-10); dz-points-regels in het SEED-blok hieronder;
     band-eigen fijnslijpen volgt ═══ */
  .duurzaamheid .cta-final-feet{
    width:160px;
    top:-201px;
  }
  .dz-certs{
    padding-top:0px;
    padding-bottom:80px;
  }
  
  .dz-certs .container > p br{
    display:none;
  }
  .dz-points{
    padding: 0px 0 180px;
  }
  .dz-certs:before{
    background-size:cover;
    background-position:right 18% top;
    /* pin: basis-bottom ging 2026-08-12 naar -40px (1920) — band houdt 0 */
    bottom:0px;
  }
  /* Certs-menu als dropdown: intro centraal, absolute trigger-rij
     (60px gereserveerd — open lijst overlapt de panes) */
  .dz-certs .container > p{
    width:100%;
    text-align:center;
  }
  .dz-certs-inner{
    gap:30px;
    grid-template-columns:1fr;
    padding-top:60px;
  }
  .dz-certs-menu{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:5;
    background:var(--coral);
    border:1.5px solid #fff;
    border-radius:12px;
    overflow:hidden;
    padding-left:30px;
  }
  .dz-certs-menu li{
    display:none;
  }
  .dz-certs-panes{
    padding-top:50px;
  }
  .dz-pane{
    gap:40px;
    grid-template-columns:1fr;
  }
  .dz-keur{
    padding-top:0px;
  }
  .dz-keur-grid{
    grid-template-columns:1fr;
  }
  .dz-certs-menu li:has(button.active),
  .dz-certs-menu.open li{
    display:block;
  }
  .dz-certs-menu button{
    border-top:0;
    padding:17px 48px 17px 18px;
  }
  .dz-certs-menu.open li + li button{
    border-top:1px solid rgba(255,255,255,.4);
  }
  .dz-certs-menu:after{
    content:"";
    position:absolute;
    top:24px;
    right:20px;
    width:14px;
    height:9px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 11.414 6.414'%3E%3Cpath d='M482.224,63.112l5,5,5-5' transform='translate(-481.517,-62.405)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events:none;
    transition:transform .2s;
  }
  .dz-certs-menu.open:after{
    transform:rotate(180deg);
  }

  /* ═══ Duurzaamheid — SEED: dz-points volgt overons-duurz/cases (verzoek
     Kulwant 2026-08-10); rest van de pagina volgt in de bandronde ═══ */
  .dz-points-inner{
    gap:26px;
    grid-template-columns:minmax(0,1fr);
  }
  /* mock 2026-08-10: tekst boven, daaronder het beeldpaar naast elkaar
     (sm links + lg rechts, eigen ratio's via de base-flexregels) */
  .dz-points-text{
    order:-1;
  }
  .dz-points .story-collage{
    width:100%;
    gap:10px;
    position:relative;
    z-index:1;
  }
  /* ═══ Waarom Sokkies — GEKOPIEERD UIT DE 521-767-BAND (verzoek Kulwant 2026-08-10): ws-intro-grid volgt de usecases-masonry
     van de PDP (verzoek Kulwant 2026-08-10); kleine kaart per rijvariant
     (sm-lg: eerste, lg-sm: laatste), eigen offsets geneutraliseerd ═══ */
  /* ws-gets volgt de VOLLEDIGE process-split-familie (verzoek Kulwant
     2026-08-10): sectie, kop, lijstritme, collagebeelden, offsets */
  .ws-gets{
    padding-top:190px;
  }
  .ws-gets:before{
    background-position:left 32% top;
    background-size:cover;
    height:200px;
    top:-80px;
  }
  .ws-gets-num{
    flex:0 0 20px;
  }
  /* pijl op de tekst-bovenkant uitgelijnd */
  .ws-gets-arrow{
    align-self:flex-start;
  }
  .ws-gets-left h2{
    font-size:var(--h2-font-size);
    text-align:left;
  }
  .ws-compare h2{
    text-align:left;
    margin-bottom:30px;
  }
  .ws-gets-left{
    width:100%;
    margin-inline:auto;
  }
  .ws-gets-left ol li{
    padding:10px 0 15px;
    gap:20px;
  }
  .ws-gets-imgs{
    gap:10px;
  }
  .ws-gets-imgcol{
    gap:10px;
  }
  .ws-gets-imgcol img{
    height:170px;
    border-radius:15px;
  }
  .ws-gets-imgcol-offset{
    margin-top:0;
  }
  /* ws-gets-inner volgt process-split-inner (verzoek Kulwant 2026-08-10) */
  .ws-gets-inner{
    grid-template-columns:1fr;
    gap:60px;
  }
  .ws-intro-grid{
    gap:20px;
    grid-template-columns:1fr;
    align-items:start;
  }
  .ws-intro-grid > .ws-col,
  .ws-intro-grid .ws-row{
    display:contents;
  }
  .ws-intro-head{
    grid-column:1 / -1;
    padding:0 0 40px;
    text-align:center;
    margin-bottom:20px;
  }
  .ws-intro-head h1{
    margin-bottom:16px;
  }
  .ws-intro-head p{
    margin:0 auto;
  }
  /* zelfde selectorvorm als de base (0,3,1) — kale .ws-card img verloor de tie */
  .ws-row-sm-lg > .ws-card:first-child img,
  .ws-row-sm-lg > .ws-card:last-child img,
  .ws-row-lg-sm > .ws-card:first-child img,
  .ws-row-lg-sm > .ws-card:last-child img{
    width:100%;
    height:280px;
    border-radius:15px;
    object-fit:cover;
  }
  .ws-card-body p{
    display:block;
  }
  .ws-card{
    border-radius:15px;
  }
  /* cyaan golf onder de intro (spec kwam binnen als ".ws-card-body p" —
     de eigenschappen horen bij de shape) */
  .ws-intro:before{
    background-position:right 20% top;
    background-size:cover;
    height:250px;
    bottom:-40px;
  }
  /* vaste tabelbreedte → de scroll-wrapper (overflow-x:auto) scrollt */
  .ws-compare table{
    min-width:580px;
  }
  .ws-compare table svg{
    width:77px;
  }
  .ws-card-body h3{
    font-size:var(--h5-font-size);
    hyphens:auto;
  }
  .ws-card-offset,
  .ws-row-gap{
    margin-top:0;
  }
  .ws-intro-grid > .ws-col:first-child .ws-row-sm-lg > .ws-card:first-child{ order:1; }
  .ws-intro-grid > .ws-col:first-child .ws-row-sm-lg > .ws-card:last-child{ order:2; }
  .ws-row-lg-sm > .ws-card:first-child{ order:3; }
  .ws-row-lg-sm > .ws-card:last-child{ order:4; }
  .ws-intro-grid > .ws-col:last-child .ws-row-sm-lg > .ws-card:first-child{ order:5; }
  .ws-intro-grid > .ws-col:last-child .ws-row-sm-lg > .ws-card:last-child{ order:6; }
  /* ═══ Partners — GEKOPIEERD UIT DE 521-767-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  /* h5-herijkingen per band (afspraak — base's −12/−22 blijven staan) */
  /* 17 = het h6-token op mobiel (spec Kulwant) */
  .pt-perks-card h3{
    font-size:var(--h6-font-size);
  }
  .pt-perks{
    padding:80px 0 50px;
  }
  .pt-perks-grid{
    gap:10px;
    grid-template-columns:minmax(0,1fr);
  }
  .pt-perks-card{
    padding:25px;
    border-radius:15px;
  }
  .pt-partners h2{
    font-size:calc(var(--h5-font-size) + 1px);
    text-align:left;
  }
  /* 13px = body−2 (zelfde microtekst-stap als Collectie-mobiel) */
  .pt-partners-chips button{
    font-size:calc(var(--body-font-size) - 2px);
  }
  .pt-partners-chips{
    width:100%;
    max-width:100%;
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .pt-partners-chips::-webkit-scrollbar{
    display:none;
  }
  .pt-partners-chips button{
    flex:0 0 auto;
  }
  .pt-partners-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
  }
  .pt-otp{
    padding-top:200px;
  }
  .pt-otp:before{
    height:100px;
    background-position:right 72% top;
    background-size:cover;
    /* pin: basis-top ging 2026-08-12 naar -130px (1920) — band houdt 0 */
    top:0px;
  }
  .pt-otp-imgs{
    display:flex;
    gap:10px;
  }
  .pt-otp-inner{
    grid-template-columns:minmax(0,1fr);
    gap:30px;
    align-items:center;
  }
  .pt-otp-text{
    order:-1;
    max-width:none;
  }
  .pt-otp-legs{
    width:245px;
    top:-130px;
  }
  .pt-otp-doodle{
    width:102px;
    top:48px;
    left:20%;
  }
  .pt-faq{
    padding-top:120px;
  }
  .pt-faq:before{
    background-position:right 20% top;
    background-size:cover;
    top:0px;
    height:400px;
  }
  .pt-dl-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .pt-dl-card{
    border-radius:15px;
  }
  /* 19 = h3−1 op mobiel (spec Kulwant) */
  .pt-dl-card h3{
    font-size:calc(var(--h3-font-size) - 1px);
  }
  /* Idem: de 84px onderruimte en de eigen positionering van de sticker zijn
     vervallen nu de regel gewoon onder de knop meeloopt. */
  .pt-dl-form-card{
    padding:20px;
    border-radius:15px;
  }
  .pt-dl-grid > :last-child{
    grid-column:1 / -1;
  }
  /* ═══ Downloads — GEKOPIEERD UIT DE 521-767-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .downloads .banner-section p br{
    display:none;
  }
  .dl-cards{
    padding:60px 0 80px;
  }
  /* zelfde afspraak als in de basis, maar krapper op een klein scherm */
  .dl-cards:has(+ .dl-cards){
    padding-bottom:40px;
  }
  .dl-cards-grid{
    gap:15px 10px;
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  /* verticale kaart: beeld boven, body eronder */
  .dl-card{
    gap:15px;
    flex-direction:column;
    align-items:stretch;
    border-radius:10px;
    padding:7px;
  }
  .dl-card-img{
    flex:0 0 auto;
    width:100%;
  }
  /* 15 = h5-token; 13 = body−2 (microtekststap); 9 = body-sm−2 */
  .dl-card-body h3{
    font-size:var(--h5-font-size);
    font-weight:600;
    line-height:22px;
  }
  .dl-card-body p{
    font-size:calc(var(--body-font-size) - 2px);
  }
  .pt-dl-ph,
  .dl-ph{
    font-size:calc(var(--body-sm-font-size) - 2px);
    padding:4px 6px;
  }
  /* Mis niets-formulier: velden onder elkaar; knop IN de kaart (mock) */
  .dl-niets-card{
    grid-template-columns:1fr;
    padding:20px;
  }
  .dl-niets-btn{
    position:static;
    justify-self:end;
  }
  .downloads .cta-final-panel{
    padding-bottom:90px;
  }
  /* ═══ Contact — GEKOPIEERD UIT DE 521-767-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .contact .banner-section{
    padding:62px 20px 40px;
  }
  .ct-contact{
    padding-bottom:55px;
  }
  /* alle velden vol breed; vaste veldhoogtes */
  .ct-form-grid{
    gap:20px 26px;
    grid-template-columns:1fr;
  }
  .ct-field input{
    height:40px;
  }
  .ct-field textarea{
    height:187px;
  }
  .ct-alt-btn,
  .ct-submit{
    height:46px;
    width:100%;
  }
  /* 23 = h3+3 op mobiel (spec Kulwant) */
  .ct-direct h3{
    font-size:calc(var(--h3-font-size) + 3px);
  }
  .ct-direct{
    padding:30px;
    border-radius:15px;
  }
  .ct-form-card{
    border-radius:15px;
    padding:30px 25px 30px;
  }
  /* gestapeld: beide secties vol breed */
  .ct-contact-inner{
    gap:30px;
    grid-template-columns:minmax(0,1fr);
  }
  /* ═══ Juridisch — GEKOPIEERD UIT DE 521-767-BAND (verzoek Kulwant
     2026-08-10); band-eigen fijnslijpen volgt ═══ */
  .jr-index{
    padding:18px 25px;
    position:fixed;
    bottom:20px;
    left:20px;
    right:20px;
    z-index:90;
    background:#fff;
    border-radius:12px;
    /* pin: basis werd 2026-08-12 sticky top:130 (1920) — onderbalk houdt top auto */
    top:auto;
  }
  .jr-index h3{
    margin:0;
    cursor:pointer;
  }
  .jr-index ol{
    display:none;
    margin-top:16px;
    max-height:50vh;
    overflow:auto;
  }
  .jr-index.open ol{
    display:block;
  }
  .jr-index:after{
    content:"";
    position:absolute;
    top:24px;
    right:25px;
    width:14px;
    height:9px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 11.414 6.414'%3E%3Cpath d='M482.224,68.8l5-5,5,5' transform='translate(-481.517,-62.7)' fill='none' stroke='%2328121b' stroke-linecap='round' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events:none;
    transition:transform .2s;
  }
  .jr-index.open:after{
    transform:rotate(180deg);
  }
  .juridisch .banner-section{
    padding-bottom:40px;
  }
  .jr-content{
    padding-top:40px;
    padding-bottom:70px;
  }
  .jr-inner{
    grid-template-columns:minmax(0,1fr);
    gap:0px;
  }
  .jr-body{
    grid-column:1;
    grid-row:2;
    max-width:none;
  }  .jr-print{
    position:sticky;
    top:130px;
    grid-column:1;
    grid-row:2;
    justify-self:end;
    align-self:start;
    z-index:5;
  }
  /* ═══ 404 — SEED ≤520 (spec Kulwant 2026-08-12): er-num −10% per band ═══ */
  .er-num{
    font-size:127px;
  }
  .error-404{
    background:var(--white) url(../media/error-page-bgMobile.png) no-repeat left 20% top;
    background-size:cover;
    height:100vh;
  }
  /* ═══ Nieuwsbrief-popup — mobiel (spec Kulwant 2026-08-12) ═══ */
  .nl-popup-check{
    align-items:flex-start;
  }

  /* ═══ Home — mobiele ronde testronde 2 (specs Kulwant 2026-08-13) ═══ */
  .stat-num{
    font-size:32px;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul{
    margin-top:45px;
  }
  .collection:after{
    bottom:-10%;
  }
  .calculator{
    padding:60px 0 20px;
  }
  .calc-panel{
    border-radius:15px;
  }
  /* 13px = body−2 (mobiele microtekststap, zelfde als Collectie) */
  .hint-sub{
    font-size:calc(var(--body-font-size) - 2px);
  }
  .gift h2,
  .case-section-outer h2{
    text-align:left;
  }
  .case-gallery{
    gap:10px;
  }
  .case-img-col{
    gap:10px;
  }

  /* ═══ Collectie — mobiele ronde testronde 2 (specs Kulwant 2026-08-13) ═══ */
  .types-section{
    padding-top:40px;
    padding-bottom:40px;
  }
  .types-head-center p{
    margin-top:0px;
  }
  .type-card-content p,
  .type-card-price,
  .type-card-item{
    margin-bottom:10px;
  }
  /* losse spec "right 5% top" — gelezen als compare-achtergrond (andere
     banden tunen daar dezelfde property) */
  .compare-inner-main{
    background-position:right 5% top;
  }
  .compare-inner-main h2{
    margin-bottom:20px;
  }
  .bg-yellow-shape{
    background-position:right 28% top;
    background-size:530%;
  }
  .process-left h2{
    text-align:left;
  }
  .testimonial{
    padding-bottom:60px;
    padding-top:20px;
  }

  /* ═══ Product-detail — mobiele ronde testronde 2 (specs Kulwant 2026-08-13).
     LET OP scoping: de :is-ul en .collection-img zijn gedeeld met home's
     goedgekeurde mobiele waardes (45px / 295px) — PDP-waardes daarom
     gescoped op .promises resp. .cards-suggestion. ═══ */
  .staffel-table.prod-staffel{
    margin-bottom:0px;
  }
  .promises-grid{
    gap:15px;
  }
  .promises > :is(.container, .container-md) > ul{
    margin-top:15px;
  }
  .specs-section{
    padding-top:100px;
  }
  .cards-suggestion .collection-img{
    height:260px;
  }
  .promises{
    padding-top:60px;
    padding-bottom:40px;
  }
  .cards-suggestion{
    padding-top:60px;
  }
  .design-now{
    padding-top:60px;
    padding-bottom:80px;
  }
  .usecases-head{
    padding:0 0 25px;
  }
  .usecases-outer-left .usecase-card-small{
    border-radius:15px;
  }
  .usecases{
    padding-top:80px;
    padding-bottom:40px;
  }

  /* ═══ Reviews-en-cases — mobiele ronde testronde 2 (specs Kulwant
     2026-08-13): filterlabel op eigen regel (chips wikkelen eronder) ═══ */
  .case-filter{
    flex-wrap:wrap;
  }
  .case-filter .case-filter-label{
    flex-basis:100%;
  }
  .case-card{
    border-radius:15px;
    padding:6px;
  }
  .case-grid{
    gap:10px;
  }
  /* ═══ Offerte — mobiele ronde (spec Kulwant 2026-08-13) ═══ */
  .application-section:after{
    display:none;
  }
  .testimonial.testimonial-offer{
    padding-top:60px;
  }
  /* ═══ Toepassingen — mobiele ronde testronde 2 (specs Kulwant 2026-08-13) ═══ */
  .usecase-why h2{
    text-align:left;
  }
  .usecases-flat .usecases-head h2{
    margin-bottom:20px;
  }
  /* ═══ Partners — mobiele ronde testronde 2 (specs Kulwant 2026-08-13) ═══ */
  .pt-perks h2{
    margin-bottom:20px;
  }
  .pt-partners{
    padding-top:10px;
  }
  .pt-faq-inner h2{
    margin-bottom:15px;
  }
  /* ═══ QA #21 (2026-08-13): knop hoort ónder de calculator (na het
     resultaat) en vóór de staffel — huispatroon display:contents + order
     (calc-grid's kinderen worden flex-items van calc-box) ═══ */
  .calculator .calc-box{
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .calculator .calc-grid{
    display:contents;
  }
  .calculator .calc-panel.calc-left{
    order:1;
    padding-bottom:60px;
  }
  .calculator .calc-cta{
    order:2;
    margin-top:-50px;
  }
  .calculator .calc-cta a{
    margin:0 auto;
    width:80%;
  }
  .calculator .calc-panel.calc-right{
    order:3;
  }
  /* De knoppenbalk blijft op mobiel één rij (zie de toelichting bovenin deze band):
     Terug links, Overslaan + Volgende rechts. align-items:center lijnt de kale
     terugknop uit op het midden van de twee pillen.
     Op smalle schermen past 64 + 128 + 119 + 20 gap niet binnen de kaart (320px
     inhoud op een 360px-scherm), dus daar wordt de knoppadding en de tussenruimte
     iets ingehouden — de rij blijft zo heel tot en met 320px. */
  .quote-card .gform_page_footer{
    align-items: center;
    text-align: center;
    gap: 12px;
    /* Onder ~360px past de rij echt niet meer (297px nodig, 265px kaartbreedte op
       een 320px-scherm). Laat hem dan afbreken in plaats van de pagina horizontaal
       te laten scrollen; vanaf 360px blijft alles gewoon op één regel staan. */
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .quote-card .gform_next_button,
  .quote-card .gform_button,
  .quote-card .of-overslaan{
    padding-left: 16px;
    padding-right: 16px;
    white-space: nowrap;
  }
  .pt-partner-card img {
    max-width: 110px;
  }
  .pt-partner-card {
    height: 120px;
  }
  .mini-footer {
    padding: 42px 0 80px;
  }
  .collectie .coll-hero-btns{
    display: none;
  }
  .conf-types .container{
    padding: 0;
  }
  .conf-types .collection-grid, .conf-types h2{
    padding:0 20px;
  }
  .cases.conf-designed:before{
    transform: rotate(0deg);
    border-radius: 0 0px 0 0;
  }
  .prod-cost-wrap{
    position:static;
  }
  .prod-cost-wrap .pdp-calc{
    position:fixed;
    inset: 0 0 -16% 0;
    margin:0;
    display:flex;
    padding:20px;
    width:auto;
  }
  .prod-cost-wrap .pdp-calc-card{
    max-width:430px;
    max-height:90vh;
    padding: 30px;
  }
  .usecases .container {
    padding-left: 10px;
    padding-right: 10px;
  }
  .cards-suggestion-swiper .collection-card {
    border-radius: 15px;
  }
  .reviews-nav {
    padding: 0 20px;
  }
  
}

@media (max-width:400px){
  .footer-review {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 0 10px;
    align-items: center;
  }
  .footer-stars {
    grid-column-start: 2;
  }
  .footer-review strong {
    grid-row: 2;
    grid-column: 2;
  }
  .footer-stars {
    grid-column-start: 2;
    grid-row-start: 1;
  }    
  .footer-review > span:last-child {
    white-space: nowrap;
    grid-row: 2;
    grid-column: 3;
  }
  .footer-review img {
    position: relative;
    top: 15px;
  }
}
/* ===================================================================
   Contactformulier (Gravity Form 4) — zelfde banden als .ct-form-grid
   -------------------------------------------------------------------
   De GF-velden zitten in .gform_fields i.p.v. .ct-form-grid, dus de
   responsive regels van het ontwerp gelden daar niet vanzelf. Hieronder
   exact dezelfde waarden: vanaf 1679 smallere gaps, en onder 520 één
   kolom. htmlv blijft onaangeroerd.
   =================================================================== */
@media (max-width:1679px){
  .ct-form-card .gform_fields{
    gap:20px 26px;
  }
}
@media (max-width:520px){
  .ct-form-card .gform_fields{
    grid-template-columns:1fr;
  }
  .ct-form-card .gform_footer{
    flex-direction:column;
    align-items:stretch;
  }
  .ct-form-card .ct-form-actions{
    flex-direction:column;
    align-items:stretch;
    margin-left:0;
  }
  .ct-form-card .ct-alt-btn{
    justify-content:center;
  }
}

/* ===== Blogoverzicht en blogdetail =====
   De blogkaarten dragen zowel .case-grid als .blog-grid; die laatste is
   bewust specifieker (.case-grid.blog-grid) zodat de drie kolommen van het
   ontwerp niet worden overschreven door de vier van de cases. Daardoor moet
   het kolomaantal per band hier wél expliciet mee-afschalen. */
@media (min-width:768px) and (max-width:991px){
  .case-grid.blog-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:521px) and (max-width:767px){
  .case-grid.blog-grid{ grid-template-columns:repeat(2,1fr); }
  .case-grid-section.blog-grid-section{ padding-bottom:180px; }
}
@media (max-width:520px){
  .case-grid.blog-grid{ grid-template-columns:1fr; gap:16px; }
  .case-grid-section.blog-grid-section{ padding-bottom:230px; }
  /* de chips passen niet op één regel: gecentreerd laten afbreken */
  .blog-filter{ justify-content:center; }
  .blog-body{ padding-top:40px; }
}

/* Blogdetail: fotorijen stapelen in de smalle banden */
@media (max-width:767px){
  .blog-fotos-2,
  .blog-fotos-3,
  .blog-fotos-groot{ grid-template-columns:1fr; }
  .blog-review-sterren{ margin-left:0; width:100%; }
  .blog-review-persoon{ flex-wrap:wrap; }
}

/* Blogoverzicht: vanaf 1680px staat de CTA-sokkenfoto op -90% (i.p.v. -79%)
   en stijgt hij ~400px boven de CTA uit — de kaartensectie heeft daar meer
   onderruimte nodig, anders ligt de sok over de onderste kaartenrij. */
@media (min-width:1680px){
  .case-grid-section.blog-grid-section{ padding-bottom:250px; }
}

/* Blogdetail: vanaf 1680px staat de CTA-sokkenfoto op -90% en stijgt hij
   ~400px boven de CTA uit — "Andere inzichten" heeft daar meer onderruimte
   nodig, net als het blogoverzicht. */
@media (min-width:1680px){
  .case-others.blog-others{ padding-bottom:320px; }
}

/* Blogdetail, smalle banden: de sokkenfoto is daar kleiner en de kaarten
   stapelen — de volle 380px onderruimte wordt dan lege lucht. */
@media (max-width:767px){
  .case-others.blog-others{ padding-bottom:190px; }
}

/* ===================================================================
   MOBIEL (<=520): gedeelde sliderbalk met voortgangsstreepjes
   -------------------------------------------------------------------
   Eén weergave voor alle sliders: knop links, streepjes in het midden,
   knop rechts. Overgenomen van de tijdlijn op over-ons, die dit al zo
   deed; de maten (5px hoog, max 26px breed, 6px ertussen) zijn
   daarvandaan 1:1 aangehouden zodat het overal hetzelfde oogt.

   Staat bewust ACHTERAAN het bestand: de regels moeten winnen van de
   banden hierboven (o.a. .collection-nav{display:none} uit de basis).
   =================================================================== */
@media (max-width:520px){
  /* de gift- en collectiesectie zijn op mobiel full-bleed (container
     zonder zijpadding, zodat de kaartenrij de rand in scrollt); de
     balk zelf krijgt daarom de normale 20px-gutter, anders plakken de
     knoppen tegen de schermrand */
  .gift-nav,
  .collection-nav{
    padding-left:20px;
    padding-right:20px;
  }
  /* Suggestieslider had helemaal geen navigatie; het ontwerp toont op
     mobiel dezelfde balk met pijlen en streepjes als de andere rijen. */
  .suggestion-nav{
    display:flex;
    padding-left:20px;
    padding-right:20px;
  }
  /* de collectierij is op mobiel óók een scroll-rij; de pijlen stonden
     hier nog uit terwijl de gift-rij ze wel had */
  .collection-nav{
    display:flex;
  }
  /* balk over de volle breedte, knoppen aan de randen */
  .suggestion-nav,
  .gift-nav,
  .collection-nav,
  .testimonial .cases-nav,
  .steps-nav,
  .reviews-nav{
    align-items:center;
    gap:14px;
  }
  /* knoppen niet laten pletten door de flexibele streepjesbalk */
  .suggestion-nav button,
  .gift-nav button,
  .collection-nav button,
  .testimonial .cases-nav button,
  .steps-nav button,
  .reviews-nav button{
    flex:0 0 auto;
    border-radius: 5px;
  }
  .nav-dashes{
    display:flex;
    flex:1;
    min-width:0;
    justify-content:center;
    align-items:center;
    gap:6px;
  }
  .nav-dashes span{
    flex:1 1 0;
    min-width:8px;
    max-width:26px;
    height:4px;
    border-radius:3px;
    background:#cfc4bb;
    position:relative;
    cursor:pointer;
  }
  /* Het streepje is maar 4px hoog; dat is te klein om met een duim te
     raken. Deze onzichtbare laag maakt het aanraakvlak 24px hoog zonder
     dat het streepje zelf dikker wordt. */
  .nav-dashes span::after{
    content:"";
    position:absolute;
    inset:-10px -3px;
  }
  .nav-dashes span:focus-visible{
    outline:2px solid var(--text);
    outline-offset:6px;
  }
  .nav-dashes span.is-active{
    background:var(--text);
  }
  .landing .cta-final::before {
    top: -59%;
    width: 100%;
  }
}

/* ===================================================================
   MOBIEL (<=767): zoekbalk over de volle breedte van de header
   -------------------------------------------------------------------
   De balk klapte hier naar 46px open in plaats van over de header.
   Oorzaak: .nav-search staat absoluut binnen .search-header-icon, en
   dat is alleen het icoonknopje van circa 40px breed. De regel
   width:calc(100% - 120px) rekende dus met 40px en werd negatief; wat
   overbleef was de padding. Op desktop viel het niet op, want daar
   staat een vaste 457px.

   Nu ankert het formulier op .nav-wrap (de witte balk) en komt de
   breedte uit left/right. De breedte-animatie van desktop vervalt
   daarmee op mobiel; openen en sluiten gaat via de fade die er al was.
   =================================================================== */
@media (max-width:767px){
  .nav-wrap{
    position:relative; /* ankerpunt; stond <=520 al zo, hier voor de zekerheid */
  }
  .search-header-icon{
    position:static; /* anders blijft het icoonknopje het ankerpunt */
  }
  .nav-search{
    left:14px;
    right:14px;
    width:auto;
    transition:opacity .2s ease;
  }
  .navbar.search-open .nav-search{
    width:auto;
  }
}

/* ===================================================================
   TABLET (768-991): zoekbalk binnen de witte pil
   -------------------------------------------------------------------
   Zelfde oorzaak als op mobiel hierboven: .nav-search staat absoluut
   binnen .search-header-icon, en dat is alleen het icoonknopje van 44px.
   Deze band had daar geen eigen regel, dus gold de desktopmaat van vaste
   457px. Die past niet naast een pil van 525px: het veld klapte vanaf het
   icoon naar LINKS open, schoof over het logo heen en stak op 768 tot 161px
   buiten het scherm.

   Het formulier ankert nu op .nav-wrap. BEWUST NIET op .navbar: het
   burgermenu en de uitklaplade hangen daar absoluut aan .nav-wrap, en die
   zouden meeverspringen zodra .navbar zelf een positie krijgt.

   De rechtermarge houdt de wereldbol en het burgermenu vrij (allebei 68px
   plus wat lucht ertussen), zodat die klikbaar blijven terwijl er gezocht
   wordt. Gemeten op 768 en 900: die 140px is in de hele band gelijk.
   =================================================================== */
@media (min-width:768px) and (max-width:991px){
  .search-header-icon{
    position:static; /* anders blijft het icoonknopje het ankerpunt */
  }
  .nav-search{
    left:8px;
    right:calc(140px + 16px);
    width:auto;
    transition:opacity .2s ease;
  }
  .navbar.search-open .nav-search{
    width:auto;
  }
}

/* ===================================================================
   MOBIEL/TABLET (<=991): labelkolom van de vergelijkingstabel blijft staan
   -------------------------------------------------------------------
   De tabel is hier 1320px breed in een smallere scrollbak, dus je schoof
   de rijlabels mee uit beeld en wist bij de rechterkolommen niet meer
   waar je naar keek. De eerste kolom plakt nu links; alleen de waarden
   schuiven.

   De labelcellen hadden niet allemaal een eigen achtergrond: de ONEVEN
   rijen wel (#FA5F5A), de even rijen en de lege hoek niet. Die zijn
   doorzichtig en dan schuiven de waarden er zichtbaar onderdoor. Ze
   krijgen daarom de kleur die er achter de tabel zit — gemeten op de
   pagina is dat var(--coral), rgb(250,75,70).

   Staat achteraan het bestand zodat het van de bandregels hierboven wint.
   =================================================================== */
@media (max-width:991px){
  /* De foto in de vragen-sectie is een desktopelement: hij hangt absoluut
     linksonder en zou hier over het laatste vraagitem heen vallen (gemeten
     op 390: 42px overlap). Vanaf 992px houdt de linkerkolom onderaan ruimte
     vrij, daaronder niet. Er is voor tablet en telefoon geen ontwerp met
     deze foto, dus daar blijft hij weg. */
  .landing .faq::after{
    display:none;
  }
  .compare-table thead th:first-child,
  .compare-table tbody th{
    position:sticky;
    left:0;
    z-index:2;
  }
  .compare-table thead th:first-child,
  .compare-table tbody tr:nth-child(even) th{
    background:var(--coral);
  }
}

/* ===================================================================
   TABLETMENU 768-991 — subpaneel volgens het 768-ontwerp
   Staat BEWUST achteraan: de gedeelde subpaneelregels hierboven lopen
   van 768 t/m 1279 en hebben hetzelfde gewicht, dus alleen een later
   blok wint. De 992-1279-band houdt daarmee zijn eigen goedgekeurde
   indeling (50/50 met de types in twee kolommen); hier krijgen de
   bestsellers de brede kolom en staan de types onder elkaar.
   =================================================================== */
@media (min-width:768px) and (max-width:991px){
  .navbar.sub-open .mega{
    grid-template-columns:1.72fr 1fr;
    gap:0 54px;
  }
  .navbar.sub-open .bestsellers{
    grid-template-columns:1fr 1fr;
    gap:30px 20px;
  }
  .navbar.sub-open .types{
    grid-template-columns:1fr;
    gap:10px;
  }
  /* De band zette het item op twee gelijke kolommen; met de types nu
     onder elkaar knelde het label in de halve breedte en brak een naam
     als Yoga & pilates over twee regels. Vierkantje op eigen maat, het
     label krijgt de rest - net als in de basis. */
  .menu .menu-link .type-item{
    grid-template-columns:auto 1fr;
  }
  .navbar.sub-open .type-item .type-img{
    width:50px;
    height:50px;
  }
  .navbar.sub-open .mega-usps span{
    font-size:13px;
  }
  /* de knop krimpt mee met zijn tekst i.p.v. de hele kolom te vullen */
  .navbar.sub-open .mega-usps .cta-light{
    align-self:flex-start;
    width:auto;
  }
  .prod-cost-wrap {
    left: 20px;
  }
  .prod-cost-wrap .prod-cost {
    width: 340px;
  }
}


/* ==========================================================================
   LANDINGSPAGINA — responsive
   De blokken zijn op desktop een raster van twee (kop, foto/tekst) of drie
   (pluspunten) kolommen; hieronder vallen ze per band terug naar minder
   kolommen en uiteindelijk naar één. Aan het einde van het bestand, zodat
   deze regels de basisopmaak uit style.css winnen.
   ========================================================================== */

@media (min-width:1280px) and (max-width:1439px){
  .lp-hero-inner{ gap:45px; }
  .lp-hero-gallery{ height:440px; }
  .lp-hero .ch-swiper .swiper-slide{ height:330px; }
  .lp-media-inner{ gap:50px; }
  .lp-usps-grid{ gap:40px 45px; }
}

@media (min-width:992px) and (max-width:1279px){
  .lp-hero{ padding:45px 0 0px; }
  .lp-hero-inner{ gap:35px; }
  .lp-hero-gallery{ height:400px; }
  .lp-hero .coll-hero-gallery{ height:520px; top:-50px; }
  .lp-hero .ch-swiper .swiper-slide{ height:300px; }
  .lp-media{ padding:70px 0; }
  .lp-media-inner{ gap:40px; }
  .lp-usps-grid{ gap:36px 40px; }
  .lp-keur-logos{ gap:38px; }
  .lp-keur-logos img{ height:62px; }
  /* collagekolom is hier ±200px: de kaartknop mag afbreken en de kaart
     krijgt minder binnenruimte, anders past "Vraag gratis proefdesign
     aan" niet in de kaart */
  .process-land-kaart{ padding:24px 18px; }
  .process-land-kaart .cta{ white-space:normal; padding:12px 18px; }
  .process-land-kaart h5{ font-size:34px; }

  .process.process-landing .process-left li{
    justify-content: flex-start;
    gap: 61px;
  }
  .process.process-landing .process-split-inner {
      gap: 50px;
  }
}

@media (min-width:768px) and (max-width:991px){
  .lp-hero{ padding:40px 0 60px; }
  /* tekst boven de collage: naast elkaar wordt de kop hier te smal */
  .lp-hero-inner{
    grid-template-columns:minmax(0,1fr);
    gap:40px;
  }
  .lp-hero-text > p{ max-width:none; }
  /* de headerpill hangt over de sectierand; zonder deze lucht plakt de
     kop eraan vast */
  .lp-hero-text{ padding:75px 0 10px; }
  /* gestapeld: de galerij neemt de bestaande tabletmaten van
     .coll-gallery-main over (volle breedte, 540px hoog) */
  .lp-hero-gallery{ height:460px; margin-bottom:0; }
  .lp-media{ padding:60px 0; }
  .lp-media-inner{
    grid-template-columns:minmax(0,1fr);
    gap:32px;
  }
  /* gestapeld staat de foto altijd boven, ook in de omgekeerde variant */
  .lp-media-omgekeerd .lp-media-foto{ order:0; }
  .lp-usps-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:34px 36px;
  }
  .lp-usps h2{ margin-bottom:38px; }
  .process-land-kaart{ max-width:none; }
  .lp-keur{ padding:55px 0; }
  .lp-keur-logos{ gap:34px; }
  .lp-keur-logos img{ height:56px; }
}

@media (max-width:767px){
  .lp-hero{ padding:30px 0 45px; }
  .lp-hero-inner{
    grid-template-columns:minmax(0,1fr);
    gap:32px;
  }
  .lp-hero-text h1 {
    text-align: center;
  }
  .lp-hero-text > p{ 
    max-width:none; 
    margin-bottom:24px;
    text-align: center; 
  }
  .lp-hero-btns{ margin-bottom:22px; }
  .lp-hero-btns .cta{ 
    display:inline-block;
    padding: 11px 32px;
   }
  .lp-hero-text{ padding:110px 0 6px; }
  /* de galerij volgt hier de mobiele maten van .coll-gallery-main */
  .lp-hero-gallery{ height:420px; margin-bottom:0; }
  
  .lp-media{ padding:48px 0; }
  .lp-media:has(+ .lp-usps){ padding-bottom:calc(13% + 40px); }
  .lp-media-inner{
    grid-template-columns:minmax(0,1fr);
    gap:26px;
  }
  .process.process-landing .process-collage > :nth-child(3) {
    margin-top: 0px;
    }
  .lp-media-omgekeerd .lp-media-foto{ order:0; }
  .lp-media-foto img{ border-radius:18px; }
  .lp-media-link{ margin-top:18px; }

  .lp-usps{ padding:20px 0 40px; }
  .lp-usps-grid{
    grid-template-columns:minmax(0,1fr);
    gap:28px;
    max-width:none;
  }
  .lp-usps h2{ margin-bottom:30px; }
  .lp-usp-icoon{ width:52px; height:52px; margin-bottom:12px; }

  .lp-usps + .process.process-landing{ padding-top:calc(6.15% + 30px); }
  .process.process-landing{ padding-bottom:60px; }
  /* Collage op telefoons: twee gelijke kolommen die NIET meer kunnen
     opzwellen (minmax(0,1fr)) — de nowrap-knop in de actiekaart dwong de
     eerste kolom eerder naar 303px en liet 22px over voor de tweede,
     waardoor twee foto's tot een streepje samenvielen. De kaart spant
     beide kolommen, krijgt zijn eigen hoogte en de knop mag afbreken. */
  .process.process-landing .process-collage{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
  }
  .process.process-landing .process-collage > *{ margin-top:0; }
  .process-land-kaart{
    grid-column:1 / -1;
    height:auto;
    min-height:220px;
    padding:28px 22px;
    border-radius:18px;
  }
  .process-land-kaart .cta{ white-space:normal; }
  .process.process-landing{ padding-bottom:150px; }
  .process.process-landing:after{ 
    height: 70%;
    background-size: auto;
    } /* het SVG-pad schaalt mee over de volle breedte */

  .lp-keur{ padding:45px 0; }
  .lp-keur-inner > p{ margin-bottom:26px; }
  .lp-keur-logos{ gap:26px; }
  .lp-keur-logos img{ height:48px; max-width:110px; }
  .lp-hero-text{
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
  }
}

@media (max-width:520px){
  .lp-hero-gallery{ height:360px; }
  .lp-keur-logos{ gap:22px; }
  .lp-keur-logos img{ height:42px; max-width:92px; }
}


/* ==========================================================================
   FLEXIBELE PAGINA — responsive
   ========================================================================== */

@media (max-width:1299px){
  .fp-citaat-duddle{ display:none; } /* geen marge meer naast de kaart */
}

@media (min-width:768px) and (max-width:991px){
  .fp-kolommen{ padding:60px 0; }
  .fp-kolommen-grid{ gap:0 36px; }
  .fp-lees-ook-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
  .fp-lees-ook{ padding-bottom:90px; }
  .fp-citaat-kaart{ max-width:84%; }
}

@media (max-width:767px){
  .fp-kolommen{ padding:48px 0; }
  .fp-kolommen-grid{ grid-template-columns:minmax(0,1fr); gap:14px 0; }
  .fp-citaat{ padding:50px 0 30px; }
  .fp-citaat-kaart{ max-width:none; margin-top:-20px; padding:38px 22px 26px; border-radius:18px; } /* 60% is op een telefoon te smal; de V-kap is hier laag */
  .fp-lees-ook{ padding:40px 0 70px; }
  .fp-citaat + .fp-lees-ook{ padding-top:30px; }
  .fp-lees-ook-grid{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .fp-lees-ook-kaart{ padding:22px 22px 20px; border-radius:16px; }
}

@media (max-width:767px){
  .lp-media-placeholder{ border-radius:18px; }
}

/* ==========================================================================
   FUNNELKOP — "Naar de collectie" op mobiel in de banner
   Op mobiel staat de minimale kop vol (logo + link + globe), dus de link
   verhuist naar de kruimelpadplek in de banner. Zie section-hero.php.
   ========================================================================== */

@media (max-width:767px){
  /* Alleen verbergen als de banner-variant er ECHT staat: de bedankpagina's
     hebben dezelfde kop maar geen hero-sectie, en zouden anders hun enige
     weg terug kwijtraken. */
  body:has(.breadcrumb-terug) .navbar-mini .nav-terug{ display:none; }
  /* 115px is de vaste kruimelpad-vrijloop onder de plakkende kop (zelfde
     waarde als contact/downloads/juridisch); de banner levert die ruimte
     daarna weer in, zodat de titel niet omlaag schuift. */
  .breadcrumb-terug{ display:flex; padding:115px 0 0; }
  .breadcrumb-terug + .banner-section{ padding-top:62px; }
}

/* ==========================================================================
   MOBIEL SUBPANEEL — "Bekijk collectie" als zwevende pil
   Het hele .mega-usps-blok stond in beide mobiele banden op display:none,
   dus de knop was er niet. Het artboard toont hem wel: als losse pil die
   onderin blijft staan terwijl het paneel eronder doorscrolt. De USP-regels
   blijven verborgen — die staan niet in het mobiele ontwerp.
   ========================================================================== */

@media (max-width:767px){
  .navbar.sub-open .mega-usps{
      display: block;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0;
      padding-bottom: 0;
      z-index: 210;
      text-align: center;
      pointer-events: none;
      border-radius: 20px 20px 0 0;
      background: #fff;
      height: 43px;
  }
  .navbar.sub-open .mega-usps .cta-light{
    margin-top: -20px;
  }

  .navbar.sub-open .mega-usps h4,
  .navbar.sub-open .mega-usps span{
    display:none;
  }
  .navbar.sub-open .mega-usps .cta-light{
    pointer-events:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:220px;
    align-self:auto;
    margin:0;
    background:#fff;
    margin-top: -21px;
  }
  /* ruimte onderin het paneel, anders blijft de laatste rij types voorgoed
     onder de pil liggen als er tot onderaan gescrold is */
  .navbar.sub-open .mega{
    padding-bottom:90px;
  }
}

/* ==========================================================================
   EXPIVI 3D-CONFIGURATOR — responsive
   De configurator vult .conf-preview-card, dus de hoogte volgt vanzelf de
   kaarthoogte per band (572 / 572 / 466 / 600 / 410 / 275). Hier alleen de
   breedte van het optiepaneel, en vanaf 991 het stapelen: naast elkaar
   houdt geen van beide kolommen een werkbare maat over.
   ========================================================================== */

@media (min-width:1440px) and (max-width:1679px){
  .expivi-configurator{ grid-template-columns:minmax(0,1fr) 360px; }
}

@media (min-width:1280px) and (max-width:1439px){
  .expivi-configurator{ grid-template-columns:minmax(0,1fr) 360px; }
}

@media (min-width:992px) and (max-width:1279px){
  .expivi-configurator{ grid-template-columns:minmax(0,1fr) 320px; }
  .expivi-options{ padding:18px 16px; }
}

@media (max-width:991px){
  /* de kaart is hier 600/410/275px hoog — te weinig voor viewer EN paneel,
     dus de kaart groeit mee met de inhoud zodra de configurator erin staat */
  .conf-preview-card:has(.expivi-configurator){
    height:auto;
  }
  .expivi-configurator{
    grid-template-columns:minmax(0,1fr);
  }
  .expivi-viewer{
    height:380px;
  }
  .expivi-options{
    border-left:0;
    border-top:1px solid var(--border-light);
    max-height:440px;
    padding:20px;
  }
}

@media (max-width:520px){
  .expivi-viewer{ height:300px; }
  .expivi-options{ max-height:380px; padding:16px; }
}

/* ===================================================================
   Zoekveld in de header — mobiel/tablet (WP-fix 2026-08-24)
   -------------------------------------------------------------------
   De banden ≤520 en 521-767 openen het veld met width:calc(100% - 120px).
   Die 100% rekent tegen .search-header-icon, en dat wrappertje is maar
   38px breed — calc wordt dus negatief en het veld bleef 0px. Gevolg:
   op mobiel kon er niet gezocht worden (ook in htmlv al zo).
   Oplossing: het wrappertje is daar geen positioneringsanker meer, zodat
   het veld tegen .nav-wrap (absoluut, schermbreed) uitlijnt en met
   left/right over de headerregel valt. Breedte-transitie wordt een
   opacity-transitie, want de breedte is nu auto.
   =================================================================== */
@media (max-width:767px){
  .search-header-icon{
    position:static;
  }
  .nav-search{
    left:16px;
    right:16px;
    width:auto;
    transition:opacity .2s ease;
  }
  .navbar.search-open .nav-search{
    width:auto;
  }
}

/* ==========================================================================
   DUURZAAMHEID — ruimte onder een volle-breedte certificaten-tab
   Onderaan .dz-certs ligt duurzaamheid-hero-bg.png (1920x531): een witte wig
   die rechtsonder steil omhoog loopt. Een tab zonder foto loopt tot ~95% van
   de breedte, en de laatste tekstregel staat ~202px boven de onderkant van
   de sectie — witte tekst op wit zodra de wig daar hoger komt.
   Gemeten door de PNG te bemonsteren met dezelfde cover-uitsnede als de
   browser (wit begint, in px boven de onderkant, op 95% van de breedte):
     sectie 1425 -> 145   veilig (57px marge)
     sectie 1535 -> 183   veilig (19px)
     sectie 1585 -> 212   te krap
     sectie 1665 -> 259
     sectie 1905 -> 393
     sectie 2545 -> 437
   Onder ~1570px snijdt cover de steile rand weg, dus daar is niets nodig —
   vandaar dat de oude vaste 300px vanaf 768px alleen maar een leeg gat gaf.
   ========================================================================== */

@media (min-width:1550px) and (max-width:1679px){
  .dz-pane.dz-pane-solo{ padding-bottom:90px; }
}

@media (min-width:1680px) and (max-width:1919px){
  .dz-pane.dz-pane-solo{ padding-bottom:230px; }
}

@media (min-width:1920px){
  .dz-pane.dz-pane-solo{ padding-bottom:270px; }
}

/* ==========================================================================
   404 — MOBIEL VOLGENS HET ARTBOARD
   De foto lag over de hele pagina (cover + height:100vh), dus alle tekst
   stond eroverheen — donkere kop op een druk beeld. Het ontwerp toont de
   foto als BAND bovenaan, met de witte curve als onderrand, en de tekst
   daaronder op wit. error-page-bgMobile.png (392x419) is precies die
   uitsnede; die werd alleen uitgerekt.
   ========================================================================== */

@media (max-width:520px){
  .error-404{
    background:var(--white) url(../media/error-page-bgMobile.png) no-repeat center top;
    /* eigen maat i.p.v. cover: de band is dan 100vw * 419/392 hoog */
    background-size:100% auto;
    height:auto;
    min-height:0;
  }
  .er-hero{
    padding:115px 0 0;
  }
  /* Het cijfer staat IN de foto. De hoogte duwt alles erna tot precies
     onder de witte curve; 70px is de padding hierboven. Zo hangt de tekst
     niet aan de toevallige regelhoogte van het cijfer. */
  .er-num{
    height:calc(100vw * 419 / 392 - 115px);
    margin:0;
  }
  .er-hero h1{
    margin-top:40px;
  }
  /* De twee knoppen staan in het ontwerp onderaan het scherm, over de
     chips heen — hetzelfde patroon als de stickybalken elders op de site.
     Wit op wit, dus de balk zelf valt niet op. */
  .er-actions{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:90;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:10px;
    margin:0;
    padding:14px 20px 18px;
    background:var(--white);
    border-radius:15px 15px 0 0;
  }
  .er-actions .cta,
  .er-actions .cta-light{
    width:100%;
  }
  /* ruimte zodat de laatste chips boven de balk uit te scrollen zijn */
  .er-links{
    padding:30px 0 170px;
  }
  /* De balk staat IN <main>, dus '.er-actions ~ footer' matcht niet —
     zelfde valkuil als bij .conf-sticky. Via :has() op de body wel. De
     balk is 130px hoog; zonder dit valt de legal-regel eronder. */
  body:has(main.error-404) footer{
    padding-bottom:150px;
  }
}

/* ==========================================================================
   CASEDETAIL — statische fotorij (max 3) op mobiel
   Naast elkaar wordt op een telefoon te klein: gemeten 94px per foto op
   390 (de kolom is daar maar 335 breed). Onder elkaar, liggend bijgesneden.
   ========================================================================== */

@media (max-width:520px){
  .case-story-fotos{
    grid-template-columns:minmax(0, 1fr);
    gap:12px;
  }
  .case-story-fotos img,
  .case-story-fotos:has(img:only-child) img{
    aspect-ratio:4 / 3;
    border-radius:15px;
  }
}

/* ===== Optieoverzicht (/opties/) =====
   De optiekaarten dragen .case-grid plus .optie-grid (drie kolommen) of
   .optie-grid-4 (vier kaarten op één rij). Allebei zijn ze specifieker dan
   de .case-grid-regels van de banden hieronder, dus het kolomaantal moet
   hier expliciet mee-afschalen — net als bij het blogoverzicht. */
@media (min-width:992px) and (max-width:1279px){
  .case-grid.optie-grid,
  .case-grid.optie-grid-4{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:768px) and (max-width:991px){
  .case-grid.optie-grid,
  .case-grid.optie-grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:521px) and (max-width:767px){
  .case-grid.optie-grid,
  .case-grid.optie-grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .case-grid.optie-grid,
  .case-grid.optie-grid-4{ grid-template-columns:1fr; gap:16px; }
}