:root {
    --coral:#FA4B46;
    --coral-hero:#fb5a4d;
    --yellow:#FAE16E;
    --yellow-hover:#f7c531;
    --light-beige:#F0E6DC;
    --light-cyan:#AEDEE6;
    --border-light:#D3CED0;
    --dark:#241a18;
    --text:#28121B;
    --white:#fff;
    --blue:#3c3cdc;
    --green:#1DD665;
    --pink:#FF8CE6;
    --cyan-bright:#7CE7F1;
    --input-border:#c9c2ba;
    
    
    /* Font Family */
    --roc-grotesk: "roc-grotesk", sans-serif;
    --roc-grotesk-condensed: "roc-grotesk-condensed", sans-serif;
    --juniper-bay: 'Juniper Bay', sans-serif;

    
    /* style guide for 1920 */
    --body-font-size: 17px;
    --body-lg-font-size: 19px;
    --body-sm-font-size: 13px;
    --body-line-height: 1.64;
    --body-letter-spacing: -0.40px;
  --h1-line-height: 1;

    --h1-font-size: 70px;
    --h2-font-size: 46px;
    --h3-font-size: 34px;
    --h4-font-size: 28px;
    --h5-font-size: 23px;
    --h6-font-size: 20px;
    
}
h1{
  font-size: var(--h1-font-size);
  line-height:var(--h1-line-height);
}
h2{
  font-size: var(--h2-font-size);
  line-height: 1;
}
h3{
  font-size: var(--h3-font-size);
  line-height: 1;
}
h4{
  font-size: var(--h4-font-size);
  line-height: 1;
}
h5{
  font-size: var(--h5-font-size);
  line-height: 1;
}
h6{
  font-size: var(--h6-font-size);
  line-height: 1;
}
p{
  line-height:1.41;
}

/* Font Family */

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

@font-face {
    font-family: 'Juniper Bay';
    src: url('../fonts/JuniperBay-Regular.woff2') format('woff2'),
        url('../fonts/JuniperBay-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body{
    font-family: var(--roc-grotesk);
    margin: 0;
}

.container{
    /* nooit 0 gutters: tussen 1680-1920 minimaal 60px per kant (spec Kulwant);
       op 1920+ wint de 1720px-cap en is dit ongewijzigd */
    max-width: min(1720px, 100% - 120px);
    width: 100%;
    margin: 0px auto;
}
.container-md{
    max-width: min(1430px, 100% - 40px);
    width: 100%;
    margin: 0px auto;
}
.container-sm{
    max-width: min(1140px, 100% - 40px);
    width: 100%;
    margin: 0px auto;
}
.text-yellow{
    color:var(--yellow);
}
.text-coral{
  color: var(--coral);
}


/* ===== Announcement bar ===== */
  .topbar{
    background:var(--text);
    color:#fff;
    font-size:12px;
    text-transform:uppercase;
    margin: 0;
    /* sticky chrome (XD dev, 2026-08-12): topbar + header blijven staan bij
       scrollen — geldt sitebreed; z tussen promo-float (99) en nl-popup (200) */
    position:sticky;
    top:0;
    z-index:130;
  }
  .topbar ul{
    list-style:none;
    display:flex;
    justify-content:center;
    gap:55px;
    padding:5px 16px;
    flex-wrap:wrap;
    margin: 0;
    height: 30px;
  }
  .topbar li{
    display:flex;
    align-items:center;
    gap:6px;
    font-family: var(--roc-grotesk-condensed);
    font-weight: 500;
    font-size: 16px;
    letter-spacing:0.6px;
}
  .topbar li::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 0px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.721' height='10.121' viewBox='0 0 13.721 10.121'%3E%3Cg transform='translate(1.061 1.061)'%3E%3Cpath d='M110.16 670.539l3.6 3.6 8-8' transform='translate(-110.16 -666.138)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  }
  .topbar .underline{
    text-decoration: underline;
    color: var(--white);
    transition: 0.2s ease-in-out;
  }
   .topbar a:hover{
    color: var(--coral);
  }

  /* sticky chrome (XD dev, 2026-08-12): header (0 hoog, pill hangt er absoluut
     onder) plakt direct onder de 30px-topbar — geen layout-shift, de pill
     rijdt mee incl. mega/drawer */
  header{
    position:sticky;
    top:30px;
    z-index:120;
  }
  header .container{
    position: relative;
  }
  header .nav-wrap{
    position:absolute;
    width:100%;
    top:10px;
    z-index: 10;
  }
  /* ===== Main header ===== */
  .hero-section{
    background:var(--coral);
    padding:0px 0 0;
  }
  
  .nav-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 auto;
    padding:0 0px;
  }
  .navbar{
    flex:1;
    background:#fff;
    border-radius:50px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 14px 10px 28px;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    position: relative;
  }
  .navbar-inner {
    display: flex;
    gap: 55px;
    align-items: center;
}
  .logo{
    display: flex;
    width: 134px;
  }
  .menu{
    display:flex;
    align-items:center;
    gap:40px;
    list-style:none;
  }
  .menu .menu-link a{
    text-decoration:none;
    color:var(--text);
    font-size: var(--body-font-size);
    transition:color .2s;
  }
  .menu .menu-link a:hover{
    color:var(--text);
}
  /* WP-toevoeging 2026-08-20: 'Bekijk collectie' in de mega is in WP een <a>
     (statisch een <button>-stub) — de menu-link-tekstregels (0-2-1) wonnen
     anders van .cta-light:hover (0-2-0). Beide regels zetten nu --dark:
     de hover-achtergrond is --light-beige, dus witte tekst was daar zo goed
     als onleesbaar (contrast 1,2 tegen 13,8 nu). */
  .menu .menu-link .mega a.cta-light{
    color:var(--dark);
    font-weight: 600;
    transition: 0.2s ease-in-out;
  }
  .menu .menu-link .mega a.cta-light:hover{
    color:var(--dark);
    transform: translateY(-2px);
  }
  .mega-usps .cta-light{ /* statisch stond de 6px op .mega-usps button */
    margin-top:6px;
  }
  /* actieve pagina in het menu (li krijgt per pagina de class "active") */
  .menu .menu-link.active > a{
    color:var(--text);
  }
  /* Ontwerp: huidige pagina en hover krijgen een corale streep ONDER de
     tekst; de tekst zelf blijft donker (was coral). Alleen op het
     horizontale menu - de selector pakt daarom de directe link van het
     item, zodat de links in het uitklapmenu er niet ook een krijgen. De
     caret staat op inline-block en valt daardoor buiten de streep, net
     als in het ontwerp. De lade- en telefoonmenu-s zetten hem uit; zie
     responsive.css. */
  .menu > .menu-link > a:hover,
  .menu > .menu-link.active > a{
    text-decoration:underline;
    text-decoration-color:var(--coral);
    text-decoration-thickness:1.5px;
    text-underline-offset:11px;
  }
  .caret{font-size:10px;margin-left:3px;display:inline-block;transition:transform .25s;}
  .has-mega:hover .caret{transform:rotate(180deg);}

  /* ===== Expanding search ===== */
  .nav-search{
    position:absolute;
    top:50%;
    right:0px;
    transform:translateY(-50%);
    height:54px;
    width:0;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 22px;
    background:#fff;
    border:1.5px solid var(--border-light);
    border-radius:40px;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
    white-space:nowrap;
    transition:width .35s ease, opacity .2s ease;
    z-index:30;
  }
  .navbar.search-open .nav-search{
    width:457px;
    opacity:1;
    pointer-events:auto;
  }
  /* Free up the row while searching */
  
  .nav-search-icon{
    display:flex;
    flex-shrink:0;
  }
  .nav-search-input{
    flex:1;
    min-width:0;
    border:none;
    outline:none;
    background:transparent;
    font-family:var(--roc-grotesk);
    font-size:14px;
    color:var(--text);
  }
  .nav-search-input::placeholder{
    color:var(--text);
    opacity:.85;
  }
  /* Chrome zet in een type="search"-veld zijn eigen wiskruisje zodra er
     tekst staat. Naast onze .nav-search-close stonden er dan twee, vlak
     naast elkaar. De eigen knop blijft: die wist het veld en sluit de
     balk, het browserkruisje wist alleen. */
  .nav-search-input::-webkit-search-cancel-button{
    -webkit-appearance:none;
    appearance:none;
  }
  .nav-search-input::-ms-clear{
    display:none;
  }
  .nav-search-close{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    border:none;
    background:transparent;
    cursor:pointer;
    border-radius:50%;
    transition:background .2s;
  }
  .nav-search-close:hover{
    background:#f0ebe2;
  }

  /* ===== Mega menu ===== */
  .has-mega{
    position:static;
  }
  .mega{
    position:absolute;
    left:0;
    width:100% ;
    top:calc(100% + 10px);
    background:#fff;
    border-radius:15px 15px 55px 55px;
    box-shadow:0 18px 50px rgba(0,0,0,.18);
    padding:42px 40px 45px;
    display:grid;
    grid-template-columns:auto 28% auto;
    justify-items: start;
    justify-content: start;
    gap:50px;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
    z-index:200;
  }
  /* Hover-brug (fix 2026-08-13): tussen menu-link en mega zit 45px lucht —
     de cursor verliet daar de li en de mega klapte dicht; deze onzichtbare
     strook (onderdeel van de mega, dus binnen de li) overbrugt het gat.
     Bestaat alleen als de mega open is (display-gekoppeld). */

  /* .mega::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-46px;
    height:46px;
  } */
  .has-mega:hover .mega{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .mega h4{
    font-size: var(--body-lg-font-size);
    font-weight:800;
    color:var(--text);
    margin-bottom:10px;
    font-weight: 600;
  }
  /* Bestsellers */
  .bestsellers{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
  }
  .prod-card{
    text-decoration:none;
    color:var(--text);
  }
  .prod-card .prod-img-card{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:10px;
    overflow: hidden;
    display:block;
    background:#f0f0f0;
  }
  .prod-img-card img{
    width: 100%;
    height: 100%;
    object-fit:cover;
    transition: 0.2s ease-in-out;
  }

  .prod-card .prod-name{
    font-size: var(--body-lg-font-size);
    margin-top:16px;
    font-weight: 600;
  }
  .prod-card .prod-price{
    font-size:15px;
    color:var(--text);
    margin-top:4px;
    font-family: var(--roc-grotesk);
  }
  .prod-card:hover .prod-img-card img{
    transform: scale(1.05);
  }
  
  /* Meer types */
  .types{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 41px;
  }
  .menu .menu-link .type-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items:center;
    gap:19px;
    text-decoration:none;
    color:var(--text);
    font-size: var(--body-font-size);
  }
   .menu  .menu-link .type-item:hover{
    font-weight: 500;
   }
  .type-item .type-img{
    width:65px;
    height:65px;
    border-radius:5px;
    overflow: hidden;
    background:#f0f0f0;
    border: 1px solid #dddddd;
  }
  .type-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .type-item:hover{color:var(--coral);}
  /* USP column */
  .mega-usps{
    display:flex;
    flex-direction:column;
    gap:14px;
    justify-content: center;
  }
  .mega-usps span{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:16px;
    font-family: var(--roc-grotesk-condensed);
    font-weight: 500;
    text-transform:uppercase;

  }
  .mega-usps span::before{
    content: "";
    display: inline-block;
    width: 13.721px;
    height: 10.121px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.721' height='10.121' viewBox='0 0 13.721 10.121'%3E%3Cg id='check' transform='translate(1.061 1.061)'%3E%3Cpath d='M110.16%2C670.539l3.6%2C3.6%208-8' transform='translate(-110.16 -666.138)' fill='none' stroke='%2328121b' stroke-linecap='round' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  }
  .mega-usps button{
    margin-top: 6px;
  }

  /* Knop "Bekijk collectie" lijnt uit met de kolomkoppen (2026-10-01,
     melding Kulwant: "staat er niet goed bij"). De USP-regels in
     deel-mega.php staan uitgecommentarieerd en de h4 is leeg, dus deze
     derde kolom bevat alleen nog deze knop; met justify-content:center
     zweefde die halverwege een verder lege kolom. Nu staat hij bovenaan,
     op dezelfde hoogte als "Bestsellers" en "Meer types".
     GESCOPED OP :not(.sub-open) en NIET op de basisregel hierboven: in het
     lade-/mobielmenu is exact dezelfde .cta-light de zwevende pill
     onderaan het scherm (responsive.css zet daar display:block + fixed).
     Een wijziging op de kale .mega-usps zou die banden dus meenemen.
     Komen de USP-regels ooit terug, dan schuiven ze gewoon boven de knop
     en blijft deze uitlijning kloppen. */
  .navbar:not(.sub-open) .mega-usps{
    justify-content:flex-start;
  }
  .navbar:not(.sub-open) .mega-usps h4:empty{
    display:none;
  }
  .navbar:not(.sub-open) .mega-usps .cta-light{
    margin-top:0;
  }
  
  .actions{
    display:flex;
    align-items:center;
    gap:10px;
    overflow:visible;
  }
  .search-header-icon{
    position: relative;
  }
  .icon-btn{
    width:48px;
    height:48px;
    border:1.5px solid #e3e3e3;
    border-radius:50%;
    background:#fff;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    font-size:16px;
    transition:border-color .2s;
  }
  .icon-btn:hover{
    border-color:var(--coral);
}
.account-ico{
  display: none;
}

  .cta{
    background:var(--yellow);
    border:1.5px solid var(--yellow);
    border-radius:50px;
    padding:12px 25.27px;
    font-size: var(--body-font-size);
    cursor:pointer;
    transition:.2s ease-in-out;
    font-weight: 600;
    color: var(--dark);
    text-decoration: none;
    transform: translateY(0px);
  }
  .cta:hover{
    background:var(--yellow-hover);
    border:1.5px solid var(--yellow-hover);
    transform: translateY(-2px);
  }
  .cta-light{
    background:var(--white);
    border:0.5px solid var(--dark);
    color: var(--dark);
    text-decoration: none;
    border-radius:50px;
    padding:12px 25.27px;
    font-size: var(--body-font-size);
    cursor:pointer;
    transition:.2s ease-in-out;
     font-weight: 600;
  }
  .cta-light:hover{
    background:var(--light-beige);
    transform: translateY(-2px);
  }
  .cta-transparent{
    background:var(--white);
    border:0.5px solid var(--dark);
    color: var(--dark);
    text-decoration: none;
    border-radius:50px;
    padding:12px 25.27px;
    font-size: var(--body-font-size);
    cursor:pointer;
    transition:.2s ease-in-out;
    font-weight: 600;
    text-align: center;
  }
  .cta-transparent:hover{
    background:var(--light-beige);
    transform: translateY(-2px);
  }
  .cta-dark{
    background:var(--dark);
    border:1.5px solid var(--dark);
    border-radius:50px;
    padding:12px 25.27px;
    font-size: var(--body-font-size);
    cursor:pointer;
    transition:background .2s;
    font-weight: 600;
    color: var(--white);
    text-decoration: none;
  }
  .cta-dark:hover{
    background:var(--light-beige);
    color: var(--dark);
  }


  .globe{
    width:68px;
    height:68px;
    border-radius:50%;
    background:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    cursor:pointer;
    flex-shrink:0;
  }
  .globe svg{
    width:21.5px;
    height:21.5px;
    flex-shrink:0;
  }

  /* ===== Language dropdown ===== */
  .lang{
    position:relative;
    flex-shrink:0;
  }
  .lang-trigger{
    width:68px;
    height:68px;
    gap:8px;
    padding:0 20px;
    border:none;
    border-radius:40px;
  }
  .lang-current{
font-weight: 600;
    font-size:15px;
    color:var(--text);
  }
  .lang-caret{
    display:flex;
    transition:transform .2s;
  }
  .lang.open .lang-caret{
    transform:rotate(180deg);
  }
  .lang-list{
    list-style:none;
    position:absolute;
    top: calc(100% - 20px);
    right: 0;
    min-width: auto;
    background:#fff;
    border-radius:14px;
    box-shadow:0 18px 40px rgba(0,0,0,.16);
    padding:14px 10px;
    z-index:210;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    width: 100%;
  }
  .lang.open .lang-list{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .lang.open .lang-trigger{
        border-radius: 40px 40px 0 0;
  }
  /* .lang-option is sinds TranslatePress een <a> (de taalkeuze is een echte
     link naar dezelfde pagina in de andere taal). De opmaak staat daarom op de
     link zelf en niet op de <li>: zo is de hele rij klikbaar, inclusief de
     padding. text-decoration eraf, want de rest van de kiezer is geen tekstlink. */
  .lang-option{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 16px;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
    height: 26px;
    text-align: center;
    justify-content: center;
  }
  .lang-option:hover{
    background:var(--light-beige);
  }
  .lang-option.is-selected{
    background:var(--light-beige);
    font-weight: 600;
    margin: 2px 0;
  }
  .lang-flag{
    font-size: calc(var(--body-sm-font-size) + 2px);
    line-height:1;
    text-align: center;
  }


   /* =============================== Hero content ================================ */
  .banner-section{
    text-align:center;
    padding:196px 20px 85px;
    margin:0 auto;
  }
  .banner-section h1{
    font-family:var(--roc-grotesk-condensed);
    font-weight: 700;
    /* fluïde met tokenplafond: volgt --h1-font-size per breakpoint (70 → 58 ≤1550)
       en blijft onder ±967px vloeiend krimpen tot 40px */
    font-size:clamp(40px, 6vw, var(--h1-font-size));
    color:var(--white);
    text-transform:uppercase;
    line-height: 0.86;
  }
  .usps{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
    margin:20px 0 30px;
    color:#fff;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
  }
  .usps span{
    display:flex;
    align-items:center;
    gap:6px;
    font-family: var(--roc-grotesk-condensed);
    font-weight: 600;
    font-size: var(--body-lg-font-size);
    letter-spacing:0.6px;
  }
  .usps span::before{
   content: "";
    display: inline-block;
    width: 13.721px;
    height: 10.121px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.721' height='10.121' viewBox='0 0 13.721 10.121'%3E%3Cg id='check' transform='translate(1.061 1.061)'%3E%3Cpath d='M110.16%2C670.539l3.6%2C3.6%208-8' transform='translate(-110.16 -666.138)' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
    margin-bottom: 4px;
  }
  
  /* WP-toevoeging 2026-08-20: rating direct ná een subtekst (CMS-compositie
     die htmlv niet kent, bijv. duurzaamheid) — zelfde 30px-ritme als home's
     usps->rating; op home/offerte staan usps ertussen en doet deze niks. */
  .banner-section p + .rating-outer{
    margin-top:30px;
  }
  .rating-outer {
    display: flex;
    justify-content: center;
    align-items:center;
    gap: 14px;
    margin-bottom:42px;
}
  .offerte-banner .rating-outer{
    margin-bottom: 20px;
  }
.rating-image{
  display: flex;
}
.rating-info-top .score{
  font-family: var(--roc-grotesk);
  color: var(--white);
  font-size: var(--body-font-size);
}

/* Vangnet bij de scroll-animaties (AOS). Lukt de init niet, dan zet het script
   op de aos-handle in functions.php de class aos-uit op <html> en maakt deze
   regel alles alsnog zichtbaar. Zonder dit blijven koppen en kaarten op
   opacity:0 staan zodra er iets misgaat in de JS. */
html.aos-uit [data-aos]{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}
.rating-info-bottom{
  font-family: var(--juniper-bay);
  color:var(--white);
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: underline;
}
/* De reviewregel is een <a> naar Feedback Company geworden (was een <span>).
   Font, grootte, kapitalen en de onderstreping erven van de regel hierboven,
   maar KLEUR erft een link niet: zonder dit werd hij browserblauw
   (rgb(0,0,238) gemeten).

   HOVER IS DONKER EN BEWUST NIET CORAL. De andere review-links (topbar,
   footer) staan op een donkere achtergrond en worden daar coral; deze regel
   staat in de hero, en die is zelf coral (#FA4B46 gemeten op home, landing,
   offerte en sample-request). Coral-op-coral liet de tekst bij hover volledig
   verdwijnen - contrast 1.00.

   Van de huisstijlkleuren is --dark de enige die het bij hover BETER maakt in
   plaats van slechter. Contrast tegen coral, gemeten: donker 4.98, wit 3.41
   (de ruststand), beige 2.77, geel 2.61, cyaan 2.34. Geel zou dus mooi ogen
   maar de regel juist minder leesbaar maken dan hij al is. */
.rating-info-bottom a{
  color:inherit;
  transition: 0.3s ease-in-out;
}
.rating-info-bottom a:hover{
  color:var(--yellow);
}
.banner-bottom-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: var(--white);
    font-family: var(--roc-grotesk);
    font-size: var(--body-font-size);
    margin-top: 18px;
    font-weight: 600;
}
.hero-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.banner-bottom-info a{
  color:var(--white);
  font-family: var(--roc-grotesk);
  transition: 0.2s ease-in-out;
  font-weight: 400;
}
.banner-bottom-info a:hover{
  color: var(--yellow);
}


/* Section with coral top band + white bottom */
  .gallery{
    position:relative;
    background:linear-gradient(to bottom,var(--coral) 0 38%,#fff 38% 100%);
    padding:0 0 40px;
    overflow:hidden;
  }
  /* QA #10/#11 (2026-08-13): lineaire loop voor de continue auto-scroll
     (zelfde patroon als de brands-marquee) */
  .gallery .gallery-swiper .swiper-wrapper,
  .designed-swiper .swiper-wrapper{
    transition-timing-function:linear;
  }
  .gallery .gallery-swiper{
    /* 4 volledige kaarten gecentreerd + 15%-slivers links/rechts (spec
       2026-08-12): zichtbaar = 0.15W + 4W + 0.15W + 5 gaps → W = (100vw − 5G)
       / 4.3. De box is 6 slides breed en steekt 0.85W per kant buiten beeld —
       de ACTIEVE slide is zelf de linker sliver (geen JS-wrap nodig),
       .gallery (overflow:hidden) knipt de uitloop af. Gap = spaceBetween 20
       uit custom.js (breakpoint 768+). */
    --gal-gap:20px;
    --gal-w:calc((100vw - 5 * var(--gal-gap)) / 4.3);
    width:calc(100vw + 1.7 * var(--gal-w));
    margin-left:calc(-0.85 * var(--gal-w));
    padding:100px 0px 30px;
    overflow:visible;
  }
  /* Tall rounded image cards */
  .gallery-swiper .swiper-slide{
    width:var(--gal-w);
    height:560px;
    border-radius:35px;
    overflow:hidden;
    transition:transform .45s ease;
  }
  .gallery-swiper .swiper-slide img{
    width:100%;height:100%;
    object-fit:cover;display:block;
  }
  /* Stagger: lift odd slides, drop even slides */
  .gallery-swiper .swiper-slide:nth-child(3n + 1) {
    transform: translateY(-50px);
}
.gallery-swiper .swiper-slide:nth-child(3n + 2) {
    transform: translateY(0);
}
.gallery-swiper .swiper-slide:nth-child(3n) {
    transform: translateY(-100px);
}

  /* Navigation arrows */
  .gallery-nav{
    display:none;
    justify-content:center;
    gap:10px;
    margin-top:6px;
  }
  .gallery-nav button{
    width:55px;
    height:40px;
    border:1.5px solid var(--dark);
    background:#fff;
    border-radius:7px;
    font-size:16px;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .2s;
  }
  /* Hover op de pijl-nav-families (cases-nav heeft z'n eigen witte hover).
     QA #12 van 2026-08-13 vroeg om een donkere knop met een witte pijl;
     dat is later omgedraaid naar een beige knop met een donkere pijl plus
     een lichte sprong omhoog. De tekst hierboven beschreef nog de oude
     staat en is bijgewerkt, zodat commentaar en code weer hetzelfde
     zeggen. */
  .suggestion-nav button,
  .gallery-nav button,
  .collection-nav button,
  .gift-nav button,
  .designed-nav button,
  .steps-nav button,
  .timeline-nav button,
  .reviews-nav button{
    transition: 0.2s ease-in-out;
  }
  .suggestion-nav button:hover,
  .gallery-nav button:hover,
  .collection-nav button:hover,
  .gift-nav button:hover,
  .designed-nav button:hover,
  .steps-nav button:hover,
  .timeline-nav button:hover,
  .reviews-nav button:hover{
    background:var(--light-beige);
    border-color:var(--dark);
    transform: translateY(-2px);
  }
  .suggestion-nav button:hover svg path,
  .gallery-nav button:hover svg path,
  .collection-nav button:hover svg path,
  .gift-nav button:hover svg path,
  .designed-nav button:hover svg path,
  .steps-nav button:hover svg path,
  .timeline-nav button:hover svg path,
  .reviews-nav button:hover svg path{
    stroke:var(--dark);
  }
  .gallery-nav button:disabled{
    opacity:.4;
    cursor:not-allowed;
  }

  /* ===== Trusted by / brand logos ===== */
  .brands{
    padding:40px 0 50px;
    background:#fff;
    overflow:hidden; /* knipt de 100vw-marquee op de viewportrand af */
  }
  .brands h2{
    text-align:center;
font-weight: 600;
    font-size:var(--h5-font-size);
    color:var(--text);
    margin-bottom:25px;
  }
  /* Brand logos marquee — full-width op ALLE pagina's/banden (verzoek
     Kulwant 2026-08-06): uit de container breken zodat de loop-logo's
     buiten de viewport in- en uitschuiven (geen zichtbare naad).
     LET OP: .brands-prefix is nodig — swiper-bundle.min.css laadt NA
     style.css en zijn .swiper{margin-left:auto} wint anders de tie */
  .brands .brands-swiper{
    width:100vw;
    margin-left:calc(50% - 50vw);
    overflow:hidden;
  }
  /* Constant-speed scroll instead of eased steps */
  .brands-swiper .swiper-wrapper{
    transition-timing-function:linear !important;
    align-items: center;
    justify-content: center;
  }
  .brands-swiper .swiper-slide{
    width:auto;
  }
  .brand-logo-items{
    height:34px;
    width:auto;
    object-fit:contain;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .brand-logo-items img{
    width:auto;
    height:auto;
    max-height:100%;
  }

  /* ===== Impact / stats + vertical socks galleries ===== */
  .impact{
    padding:8px 0 260px;
    background:#fff;
    position: relative;
    overflow-x: hidden;
    /* background: url(../media/bg-element.png); */
    margin-top: 42px;
  }
  .impact:before{
    content: '';
    background: url(../media/bg-element.png);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    /* bg-element.png is 1980px breed en stond zonder background-size. Boven
       die breedte werd hij dus HERHAALD (background-repeat staat hier op de
       standaard 'repeat'), waardoor rechts een naad met een herhaalde
       linkerrand ontstond. max() laat alles onder 1980px ongemoeid.
       Bewust GEEN no-repeat erbij: in smalle banden is de sectie hoger dan
       de afbeelding en wordt er verticaal wel degelijk herhaald. */
    background-size: max(100%, 1980px) auto;
  }
  .impact .container{
    position: relative;
    z-index: 1;
  }
  .impact-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    height: 540px;
    overflow: hidden;
  }
  .impact-left{
    padding-inline-start: 98px;
    width: 40%;
  }
  .impact .impact-left ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:34px;
  }
  .impact .impact-left ul li{
    display:flex;
    align-items:flex-start;
    gap:14px;
  }
  .stat-arrow{
    color:var(--coral);
    font-size:30px;
    line-height:1;
font-weight: 600;
    display: flex;
    margin-top: 18px;
  }
  .stat-body{
    display:flex;
    flex-direction:column;
  }
  .stat-num{
    font-family:var(--roc-grotesk-condensed);
    font-weight: 800;
    font-size:70px;
    color:var(--text);
    line-height:1;
  }
  .stat-label{
    font-size: var(--body-lg-font-size);
    color:var(--text);
font-weight: 600;
  }
  .impact .impact-left p{
    margin-top:32px;
    font-size: var(--body-font-size);
    color:var(--text);
    padding-inline-start:36px;
  }

  /* Three vertical marquee columns */
  .impact-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    height: 688px;
    transform: rotate(356deg);
    padding-right: 20px;
    margin-top: -40px;
  }
  /* De verticale fotokolommen zijn versiering: ze draaien vanzelf en staan
     op allowTouchMove:false. Swiper zet op een verticale slider echter
     touch-action:pan-x, en dat verbiedt de BROWSER om er verticaal overheen
     te scrollen -- op mobiel bleef de pagina dus staan zodra je met je duim
     op de fotos begon. Terug op auto, zodat de pagina gewoon meescrollt. */
  .v-swiper,
  .ch-swiper{
    touch-action:auto;
  }
  .v-swiper{
    height:100%;
    width:100%;
    overflow:hidden;
  }
  /* Constant-speed scroll instead of eased steps */
  .v-swiper .swiper-wrapper{
    transition-timing-function:linear !important;
  }
  .v-swiper .swiper-slide{
    /* fix 2026-08-13: 100% i.p.v. vaste 320px — de marquee-kolommen zijn
       smaller dan 320 (283 op 1920) en knipten de slides rechts af;
       object-fit:cover kadert nu gecentreerd binnen de kolom */
    width:100%;
    height:400px;
    border-radius:22px;
    overflow:hidden;
    border: 1px solid #dddddd;
  }
  .v-swiper .swiper-slide img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }
 

  /* Feature badges */
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul{
    list-style:none;
    display:flex;
    justify-content: center;
    gap:10px;
    margin:55px 0 0;
  }
  :is(.impact, .promises, .steps-section) > :is(.container, .container-md) > ul li{
    background:#f4ede4;
    border-radius:14px;
    padding:22px 12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    text-align:center;
    width: 230px;
    height: 120px;
    justify-content: center;
  }
  .feat-icon{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .feat-icon img{ /* WP-toevoeging 2026-08-20: geuploade (vaak @2x-) PNG-iconen op ontwerphoogte; de statische svg's zijn zelf al ±40px */
    max-height:41px;
    width:auto;
  }
  .feat-label{
    font-family:var(--roc-grotesk-condensed);
    font-weight: 500;
    font-size:21px;
    text-transform:uppercase;
    color:var(--text);
  }

  .collection-grid::-webkit-scrollbar, .gift-grid::-webkit-scrollbar{
    opacity: 0;
  }

  /* ====================== Sokken collectie ========================== */
  .collection{
    background:var(--yellow);
    padding:0px 0 30px;
    position:relative;
  }
  .collection:before{
    content:'';
    background:url(../media/bg-yellow-shape.png);;
    position:absolute;
    top: -76%;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .collection:after{
    content:'';
    background:url(../media/bg-yellow-shape.png);;
    position: absolute;
    bottom: -130px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .collection .container{
    position:relative;
    z-index:2;
  }
  .collection h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight: 700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    letter-spacing:.01em;
    color:var(--text);
    margin-bottom:26px;
  }
  .collection-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
  }
  .collection-card{
    background:#fff;
    border-radius:15px;
    padding:10px 10px 20px;
    text-decoration:none;
    color:var(--text);
    display:flex;
    flex-direction:column;
    transition:transform .25s;
  }
  .collection-card:hover .collection-img img{
    transform: scale(1.05);
  }
  .collection-img{
    position:relative;
    width:100%;
    height:395px;
    border-radius:12px;
    overflow:hidden;
    border: 1px solid #dddddd;
  }
  .collection-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition: 0.2s ease-in-out;
  }
  .collection-badge{
    position: absolute;
    top: 12px;
    left: 12px;
    background: #F0E6DC;
    color: var(--text);
    font-weight: 500;
    font-size: var(--body-sm-font-size);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 5px;
    border-radius: 3px;
    display: flex;
  }
  .collection-badge.nieuw{
    background:var(--coral);
    color:var(--white);
  }
  .collection-card-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-top:16px;
    /* QA #26 (2026-08-13): harde 70px liet de prijs onder de knop zakken
       zodra de naam over 2 regels wikkelde ("Yoga & pilates sokken") —
       min-height + center houdt de kaarten in lijn */
    height:auto;
    min-height:70px;
  }
  .collection-info{
    display:flex;
    flex-direction:column;
    gap: 4px;
    padding: 0 10px;
  }
  .collection-name{
    font-weight: 700;
    font-size:var(--h5-font-size);
    color:var(--text);
  }
  .collection-price{
    font-size: var(--body-font-size);
    color:var(--text);
  }
  .collection-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--white);
    border:1.5px solid var(--text);
    border-radius:30px;
    padding:11px 24px;
    font-size: var(--body-font-size);
    font-weight:600;
    white-space:nowrap;
    transition:.2s ease-in-out;
    font-family: var(--roc-grotesk);
    margin-top: auto;
  }
  .collection-btn svg path{
    transition:stroke .2s;
  }
  .collection-card:hover .collection-btn{
    background:var(--light-beige);
    transform: translateY(-2px);
  }
  .collection-card:hover .collection-btn svg path{
    stroke:var(--text);
  }
  .collection-cta{
    display:flex;
    justify-content:center;
    margin-top:40px;
  }
  .btn-collectie{
    background:var(--text);
    color:#fff;
    text-decoration:none;
font-weight: 600;
    font-size:15px;
    padding:14px 30px;
    border-radius:30px;
    transition:opacity .2s;
  }
  .btn-collectie:hover{
    opacity:.9;
  }

  /* ====================== Process: hoe wij tot de perfecte sokken komen ====================== */
  .process{
    position:relative;
    background:var(--coral);
    padding:150px 0 120px;
    overflow:hidden;
  }
  .process-wave{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    line-height:0;
    pointer-events:none;
  }
  .process-wave svg{
    display:block;
    width:100%;
    height:120px;
  }
  .process:not(.conf-works) > .container > h2{
    position:relative;
    text-align:center;
    color:#fff;
    font-family:var(--roc-grotesk-condensed);
    font-weight: 700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1;
    margin-bottom:40px;
    padding-top: 105px;
  }
  .process-steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:93px;
    margin:0 auto;
  }
  .process-step{
    color:#fff;
  }
  .step-num{
    display:block;
    font-family:var(--roc-grotesk-condensed);
    font-weight: 500;
    font-size:16px;
    margin-bottom:20px;
  }
  .step-icon{
    display:block;
    margin-bottom:26px;
  }
  .step-icon svg,
  .step-icon img { /* WP-toevoeging 2026-08-20: geuploade PNG-iconen even groot als de statische svg's */
    height: 100px;
    width: auto;
    display: block;
}
  .process-step h3{
    line-height: 1;
    font-weight: 700;
    font-size:var(--h5-font-size);
    margin-bottom:15px;
  }
  .process-step p{
    font-size: var(--body-font-size);
  }
  .process-cta{
    display:flex;
    justify-content:center;
    margin-top:50px;
  }

  /* ====================== Prijscalculator (Wat kost het?) ===== */
  .calculator{
    background:#efe7dc;
    padding:120px 0 67px;
  }
  .calc-box{
    margin:0 auto;
  }
  .calc-box h2{
    text-align:center;
    font-family:var(--roc-grotesk-condensed);
    font-weight: 700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    color:var(--text);
    margin-bottom:30px;
  }
  .calc-grid{
    display:grid;
    grid-template-columns:1fr 560px;
    gap:20px;
    align-items:start;
  }
  .calc-panel{
    background:#fff;
    border-radius:25px;
    padding:50px;
    height: 100%;
  }
  .calc-panel h3{
    
    font-weight: 700;
    color:var(--text);
    margin-bottom:26px;
  }
  .calc-label{
    display:block;
    font-size: var(--body-lg-font-size);
    color:var(--text);
    margin-bottom:0px;
font-weight: 600;
  }
  .calc-field{
    margin-bottom:28px;
  }
  .calc-slider-row{
    display:flex;
    align-items: flex-start;
    gap:20px;
  }
  .calc-slider-progress{
    width:100%;
    padding-top: 6px;
  }
  /* Range input */
  #qtyRange{
    -webkit-appearance:none;
    appearance:none;
    flex:1;
    height:2px;
    border-radius:4px;
    background:var(--border-light);
    outline:none;
    cursor:pointer;
    width:100%;
  }
  #qtyRange::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:27px;
    height:27px;
    border-radius:50%;
    background:var(--coral);
    border:2px solid #fff;
    cursor:pointer;
  }
  #qtyRange::-moz-range-thumb{
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--coral);
    border:3px solid #fff;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    cursor:pointer;
  }
  .qty-input{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
  }
  .qty-input input{
    width:100px;
    height:40px;
    border:1.5px solid var(--border-light);
    border-radius:5px;
    padding:7px 10px;
    font-size:16px;
    font-family:var(--roc-grotesk);
    color:var(--text);
    text-align:center;

  }
  .qty-input span{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--text);
  }
  .calc-scale{
    display:flex;
    justify-content:space-between;
    margin-top:8px;
    font-size: var(--body-sm-font-size);
    color:var(--text);
  }
  .calc-mid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
  }
  .calc-hint{
    display:flex;
    gap:12px;
    align-items:center;
    width:100%;
    text-align:left;
    font-family:inherit;
    background:#eafaf1;
    border:1px solid #cdeede;
    border-radius:12px;
    padding:16px 18px;
    height:140px;
    cursor:pointer;
    transition:background .2s, border-color .2s, box-shadow .2s;
  }
  .calc-hint:hover{
    background:#dff6ea;
    border-color:var(--green);
  }
  .calc-hint:hover .hint-price{
    color:var(--green);
  }
  .calc-hint:hover .hint-icon svg {
    transform: rotate(-90deg);
  } 
   
  .calc-hint.is-active{
    border-color:var(--green);

  }
  .calc-hint.is-active .hint-price{
    color:var(--green);
  }
  .calc-hint.is-active .hint-icon svg {
    transform: rotate(-90deg);
  }
  .hint-body{
    text-align:left;
  }
  .hint-icon{
    width:54px;
    height:54px;
    flex-shrink:0;
    border:1.5px solid var(--green);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .hint-icon svg {
      transform: rotate(-43deg);
      transition: transform .2s;
  }
  .hint-body{
    display:flex;
    flex-direction:column;
    gap: 4px;
  }
  .hint-top{
    font-size: var(--body-font-size);
    color:var(--text);
font-weight: 600;
  }
  .hint-price{
    font-family:var(--roc-grotesk-condensed);
    font-weight: 700;
    font-size:var(--h2-font-size);
    line-height:1;
    color:var(--text);
    text-transform:uppercase;
    transition:color .2s;
  }
  .hint-sub{
    font-size: var(--body-font-size);
    color:var(--text);
  }
  /* Custom Type sok dropdown */
  .dropdown{
    position:relative;
    margin-top:12px;
  }
  .dropdown-trigger{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1.5px solid var(--border-light);
    border-radius:10px;
    padding:13px 16px;
    font-size: var(--body-font-size);
    font-family:var(--roc-grotesk);
    color:var(--text);
    background:#fff;
    cursor:pointer;
    text-align:left;
    color:var(--text)
  }
  .dropdown.open .dropdown-trigger{
    border-color:#c7bcac;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
  }
  .dropdown-value{
    color:var(--text)
  }
  .dropdown-caret{
    display:flex;
    flex-shrink:0;
    transition:transform .2s;
  }
  .dropdown.open .dropdown-caret{
    transform:rotate(180deg);
  }
  .dropdown-list{
    list-style:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin:0;
    padding:6px 0;
    background:#fff;
    border:1.5px solid #c7bcac;
    border-top:none;
    border-radius:0 0 10px 10px;
    box-shadow:0 18px 40px rgba(0,0,0,.12);
    max-height:340px;
    overflow-y:auto;
    z-index:50;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .dropdown.open .dropdown-list{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .dropdown-option{
    padding:12px 16px;
    font-size:16px;
    color:var(--text);
    cursor:pointer;
    transition:background .15s;
  }
  .dropdown-option:hover{
    background:var(--light-beige);
  }
  .dropdown-option.is-selected{
    color:#93888C;
  }
  .calc-result{
    padding-top:24px;
  }
  .calc-row{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom:34px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 7px;
  }
  .calc-row span:first-child{
    font-size: var(--body-font-size);
    color:var(--text);
font-weight: 600;
  }
  .calc-perpair{
    font-family:var(--roc-grotesk-condensed);
    font-weight: 700;
    font-size:var(--h2-font-size);
    color:var(--text);
    line-height:1;
  }
  .calc-total-row{
    margin-bottom:8px;
    border:none;
    padding-bottom:0;
  }
  .calc-total{
  font-weight: 600;
    font-size: var(--body-font-size);
    color:var(--text);
  }
  .calc-result p{
    text-align:right;
    font-size: var(--body-sm-font-size);
    text-transform:uppercase;
    color:var(--text);
  }
  /* Staffelprijzen */
  .staffel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
  }
  .staffel-head h5:first-of-type{
    
    font-weight: 700;
    color:var(--text);
  }
  .staffel-head h5:last-of-type{
    
    font-weight: 700;
    color:var(--coral);
    text-transform:lowercase;
  }
  .staffel-table{
    display:flex;
    flex-direction:column;
  }
  
  .staffel-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 20px;
    border-radius:0px;
    font-size: var(--body-font-size);
    color:var(--text);
  }
  .staffel-head-row{
    background:var(--light-beige);
    font-size: var(--body-sm-font-size);
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--text);
    padding:9px 20px;
    font-family:var(--roc-grotesk-medium);
    font-weight: 500;
    height:40px;
    border-radius:5px;
  }
  .staffel-row:not(.staffel-head-row):not(.is-active){
    border-bottom:1px solid #f0ebe2;
  }
  .staffel-qty{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .staffel-price{
    font-weight: 600;
    color:var(--text);
    font-size: var(--body-lg-font-size);
  }
  .staffel-request{
    text-decoration:underline;
    font-family:var(--roc-gostesk-regular);
    font-size: var(--body-lg-font-size);
    color: var(--text);
  }
  .staffel-row.is-active{
    background:var(--yellow);
    border-radius:5px;
  }
  .staffel-row:not(.staffel-head-row):not(.is-active):is(.staffel-bottom-row) {
    border-bottom: none;
}
  .staffel-badge{
    font-size: var(--body-sm-font-size);
    padding: 0.5px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    white-space: nowrap;
    display: flex;
    align-items: center;
    font-family:var(--roc-grotesk-medium);
    font-weight: 500;
    height: 20px;
  }
  .staffel-badge--dark{
    background:var(--text);
    color:#fff;
  }
  .staffel-badge--green{
    background:var(--green);
    color:#fff;
  }
  .calc-cta{
    display:flex;
    justify-content:center;
    margin-top:30px;
  }
  .calc-middle-cta{
    display: none;
  }

  /* ====================== Maak je sokkengeschenk compleet ====================== */
  .gift{
    background:transparent;
    padding:165px 0 90px;
    position: relative;
  }
  .gift:before{
    content:'';
    background:url(../media/bg-white-mask.png);
    position:absolute;
    top: 0;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
    background-repeat: no-repeat;
    /* bg-white-mask.png is 1920x1645 en stond zonder background-size, dus hij
       werd op ware grootte vanaf links getekend. Op een scherm breder dan
       1920px hield de witte vorm daar op en bleef rechts het beige van
       .gift:after zichtbaar (op 2560px een strook van 625px — melding
       Kulwant). max() houdt hem onder 1920px exact zoals hij was en laat hem
       daarboven meegroeien; 'auto' als hoogte bewaart de schuine hoek. */
    background-size: max(100%, 1920px) auto;
  }
   .gift:after{
    content:'';
    background:var(--light-beige);
    position:absolute;
    top: 0;
    left:0;
    width:100%;
    height:90%;
    z-index:-1;
  }
  .gift .container {
    z-index: 1;
    position: relative;
  }
  .gift h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight: 700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    letter-spacing:.01em;
    color:var(--text);
    margin-bottom:30px;
  }
  .gift-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
  }
  .gift-card{
    border:1.5px solid var(--border-light);
    border-radius:16px;
    padding:10px;
    display:flex;
    flex-direction:column;
    transition:border-color .2s, box-shadow .2s, transform .2s;
  }
  .gift-card:hover{
    transform:translateY(-3px);
  }
  .gift-img{
    width:100%;
    height:395px;
    border-radius:12px;
    overflow:hidden;
    background:#f0f0f0;
  }
  .gift-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .gift-body{
    padding:20px 0px 0;
    display:flex;
    flex-direction:column;
    flex:1;
  }
  .gift-body h5{
    
    font-weight: 700;
    color:var(--text);
    margin-bottom:10px;
    padding: 0 10px;
    line-height: 1;
  }
  :is(.gift-body, .weave-body) ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-bottom:16px;
    padding: 0 10px;
  }
  :is(.gift-body, .weave-body) ul li{
    position:relative;
    padding-left:26px;
    font-size: var(--body-font-size);
    color:var(--text);

  }
  :is(.gift-body, .weave-body) ul li::before{
    content:"";
    position:absolute;
    left:0;
    top:4px;
    width:15px;
    height:11px;
    background-repeat:no-repeat;
    background-size:contain;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.721' height='10.121' viewBox='0 0 13.721 10.121'%3E%3Cg transform='translate(1.061 1.061)'%3E%3Cpath d='M110.16 670.539l3.6 3.6 8-8' transform='translate(-110.16 -666.138)' fill='none' stroke='%2328121b' stroke-linecap='round' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  }
  .gift-link{
    margin-top:auto;
    display:flex;
    align-items:center;
    gap:8px;
    padding:20px 10px 14px;
    border-top:1px solid var(--border-light);
    text-decoration:none;
font-weight: 600;
    font-size: var(--body-font-size);
    color:var(--text);
    transition:gap .2s;
    line-height: 1;
  }
  .gift-link:hover{
    gap:13px;
    /* QA #13 (2026-08-13) */
    text-decoration:underline;
  }
.gift-link svg{
      margin-bottom: 6px;
}

/*  ====================== Wat we maakten (klantcases) ====================== */
  .cases{
    position:relative;
    /* background:#fff; */
    padding:115px 0 50px;
    overflow:hidden;
  }
 .cases:before{
  content:'';
  background:url(../media/bg-blue-shape.png);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  background-repeat: no-repeat;
  /* bg-blue-shape.png is 1920x1074 en stond eerst zonder background-size:
     boven 1920px bleef rechts een strook onbedekt. Met 'auto' als hoogte
     groeide de vorm dan mee met de breedte — op 2560px werd de blauwe band
     1200px hoog in plaats van 790px (melding Kulwant).
     Daarom rekt alleen de BREEDTE mee, zodat er niets onbedekt blijft;
     max() houdt die op 1920px en smaller exact zoals het was. De hoogte
     stond eerst vast op 1074px en is inmiddels 90% van de sectie: die
     volgt de inhoud en niet de schermbreedte, dus op 2560px blijft de
     band even hoog als op 1920px (nagemeten: 1275px op beide).
     LET OP: deze regel geldt alleen vanaf 1680px. Alle smallere banden
     zetten in responsive.css een ANDER bestand (blue-shape-lg.png) met
     cover/contain; die blijven ongemoeid. */
  background-size: max(100%, 1920px) 90%;
 }
 .cases-feet{
    position: absolute;
    top: -37%;
    right: 0;
    width: 383px;
    height: 100%;
    z-index: -1;
    object-fit: contain;
  }
  .case-section-outer{
    position:relative;
  }
  .case-section-outer h2{
    position:relative;
    z-index:2;
    color:#fff;
    font-family:var(--roc-grotesk-condensed);
    font-weight: 700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1;
    margin-bottom:30px;
  }
  .cases-swiper{
    position:relative;
    z-index:2;
    overflow: visible;
  }
  .case-inner{
    display:flex;
    gap:80px;
    align-items:center;
  }
  .case-gallery{
    display:flex;
    gap:20px;
    height:100%;
  }
  .case-img{
    border-radius:16px;
    overflow:hidden;
    background:rgba(255,255,255,.12);
    width: 270px;
    height: 197px;
  }
  .case-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .case-img-main{
    height:415px;
    width:415px;
  }
  .case-img-col{
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:20px;
  }
  .case-text{
    color:#fff;
    position: relative;
    width: 40%;
  }
  .case-badge{
    display:inline-flex;
    align-items: center;
    background:#87E1F0;
    color:var(--text);
    font-weight: 600;
    font-size: var(--body-sm-font-size);
    text-transform:uppercase;
    padding: 2px 7px;
    height: auto;
    border-radius: 3px;
    margin-bottom: 19px;
    line-height: normal;
  }
  .case-text h3{
    font-weight: 700;
    line-height:1;
    margin-bottom:18px;
    max-width:560px; /* WP-toevoeging 2026-08-19 (verzoek Kulwant): lange CMS-casetitels liepen desktop de blauwe shape in */
  }
  .case-text ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:22px;
  }
  .case-text ul li{
    font-size: var(--body-font-size);
  }
  .case-text ul strong{
    font-weight: 600;
  }
  .case-link{
    display:inline-flex;
    align-items:center;
    gap:9px;
    text-decoration:none;
    font-weight: 600;
    font-size:15px;
    color:#fff;
    transition:gap .2s;
  }
  .case-link:hover{
    text-decoration: underline;
  }
  /* Navigation — aligned under the text column */
  .cases-nav{
    position:relative;
    z-index:2;
    display:flex;
    gap:12px;
    margin-top:30px;
    top: 26px
  }
  .cases-nav button{
    width:55px;
    height:40px;
    border:1.5px solid #fff;
    background:transparent;
    border-radius:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .2s, border-color .2s, transform .2s;
    transform: translateY(0px);
  }
  .cases-nav button:hover{
    background:#fff;
    border-color:#fff;
    transform: translateY(-2px);
  }
  .cases-nav button:hover svg path{
    stroke:var(--text);
  }

  /* Door onze klanten ontworpen — tilted gallery over cyan band */
  .designed{
    position:relative;
    margin-top:112px;
  }
  /* Full-bleed cyan band behind the lower half of the gallery */
  .designed::before{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:100vw;
    top:40%;
    height:100%;
    background:var(--cyan-bright);
    z-index:-1;
  }
  .designed-head{
    position:relative;
    z-index:2;
    text-align:center;
    margin-bottom:34px;
  }
  .designed-head h3{
    color:#fff;
    
    font-weight: 700;
    text-transform:uppercase;
    font-size:var(--h3-font-size);
    line-height:1;
    margin-bottom:22px;
  }
  .designed-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
font-weight: 600;
    font-size: var(--body-font-size);
    color:#fff;
    transition:gap .2s;
  }
  .designed-link:hover{
    gap:13px;
  }
  .designed-swiper{
    position:relative;
    z-index:1;
    overflow:visible;
    transform:rotate(2deg);
    width:100vw;
    left: -10px;

  }
  /* Marquee variant: constant-speed scroll instead of eased steps */
  .designed-swiper-marquee .swiper-wrapper{
    transition-timing-function:linear !important;
  }
  .designed-swiper-marquee + .designed-nav{
    display:none;
  }
  .designed-swiper .swiper-slide{
    width:395px;
    height:395px;
    border-radius:15px;
    overflow:hidden;
  }
  .designed-swiper .swiper-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .designed-nav{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:44px;
  }
  .designed-nav button{
    width:55px;
    height:40px;
    border:1.5px solid var(--text);
    background:transparent;
    border-radius:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transform: translateY(0px);
    transition:background .2s, border-color .2s, transform .2s;
  }
  .designed-nav button:hover{
    border-color:var(--text);
    background:var(--light-beige);
    transform: translateY(-2px);
  }

  /* ===== Sokken bedrukken voor elk bedrijf ===== */
  .brand-intro{
    position:relative;
    background:var(--cyan-bright);
    padding:70px 0 140px;
  }
  .brand-intro-inner{
    position:relative;
    z-index:2;
    max-width:50%;
    margin:0 auto;

    color:var(--text);
  }
  .brand-intro-inner h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight: 700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    margin-bottom:20px;
    line-height:0.92;
  }
  .brand-intro-inner p{
    font-size: var(--body-font-size);
    margin-bottom:25px;
  }
  .brand-intro-inner p a{
    transition: 0.2s ease-in-out;
  }
  .brand-intro-inner p a:hover{
    color: var(--coral);
  }
  .brand-intro-inner h6{
    font-weight: 600;
    font-size: var(--body-lg-font-size);
    margin-bottom: 5px;
    line-height: 1.5;
  }
  /* WP-toevoeging 2026-08-25: Tekst (boven) en Tekst (onder) zijn wysiwyg-
     velden geworden, dus hier komen nu links en opsommingen uit de editor.
     Het ontwerp kende die niet, dus er was geen enkele regel voor: een link
     kwam browser-blauw en onderstreept op het cyaan te staan, en de bullets
     werden weggeknipt (de globale reset zet padding op 0 en .brand-collapse
     heeft overflow:hidden, dus een marker buiten de tekstkolom verdwijnt).
     BEWUST NIET het roze van .faq-a-inner a: dit blok heeft vier
     achtergronden (cyaan, licht, licht-werkwijze, geel) en roze op cyaan
     leest slecht. Donker + onderstreept werkt op alle vier en sluit aan bij
     de CTA eronder. Die CTA is zelf ook een <a> in dit blok en houdt zijn
     eigen opmaak — vandaar de :not(). */
  .brand-intro-inner a:not(.brand-intro-link){
    color:var(--text);
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .brand-intro-inner ul,
  .brand-intro-inner ol{
    margin:0 0 25px;
    padding-left:32px;
  }
  .brand-intro-inner ul{ list-style:disc outside; }
  .brand-intro-inner ol{ list-style:decimal outside; }
  .brand-intro-inner li{
    font-size:var(--body-font-size);
    line-height:1.6;
  }
  .brand-intro-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
font-weight: 600;
    font-size: var(--body-font-size);
    color:var(--text);
    transition:gap .2s;
  }
  .brand-intro-link:hover{
    gap:12px;
  }
  
  .brand-duddle-icons .dubble-left{
    position: absolute;
    top: -10%;
    left: 11%;
    width: 182px;
    height: auto;
  }
   .brand-duddle-icons .dubble-right{
    position: absolute;
    bottom: 15%;
    right: 4%;
    width: 182px;
    height: auto;
  }

  /* ===== Veelgestelde vragen (FAQ) ===== */
  .faq{
    background:var(--light-beige);
    padding:117px 0 90px;
  }
  .faq-grid{
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:60px;
    align-items:start;
  }
  .faq-left{
    position:relative;
  }

  /* De voetjes van het volgende actieblok steken omhoog de FAQ in
     (.cta-final-feet, top:-90%). In htmlv stonden er altijd 8 vragen, dus
     was er links ruimte zat; via het CMS kan dat er 6 of minder zijn,
     waardoor de sectie krimpt en het beeld over de introtekst valt.
     Daarom reserveert de linkerkolom die ruimte zelf — alleen wanneer er
     ook echt voetjes onder staan (:has), en alleen zolang de grid twee
     kolommen heeft; mobiel stapelt en dan is er geen overlap. */
  @media (min-width:992px){
    .faq:has(+ .cta-final .cta-final-feet) .faq-left{
      padding-bottom:min(20vw, 380px);
    }
  }
  .faq-left h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight: 700;
    text-transform:uppercase;
    line-height: 0.92;
    color:var(--text);
    margin-bottom:22px;
  }
  .faq-left p{
    font-size: var(--body-font-size);
    color:var(--text);
    max-width:70%;
    margin-bottom:16px;
  }
  .faq-left a{
    color:var(--text);
    text-decoration:underline;
  }
  .faq-feet{
    display:block;
    margin-top:34px;
    max-width:340px;
    width:100%;
    height:auto;
  }
  .faq-right {
    padding-top: 100px;
}
  /* Accordion */
  .faq-item{
    border-bottom:1px solid #d8ccbd;
  }
  .faq-q{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px 4px;
    background:transparent;
    border:none;
    cursor:pointer;
    text-align:left;
    font-weight: 600;
    font-size: var(--body-lg-font-size);
    color:var(--text);
    font-family: var(--roc-grotesk);
  }
  /* QA #14-vervolg (2026-08-13): eerste vraag lijnt met de intro —
     padding-top van de eerste vraagknop op 0 */
  .faq-right .faq-item:first-child .faq-q{
    padding-top:0;
  }
  .faq-icon{
    flex-shrink:0;
    display:flex;
    transition:transform .25s;
  }
  .faq-item.is-open .faq-icon{
    transform:rotate(180deg);
  }
  .faq-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  /* WP-toevoeging 2026-08-21 (verzoek team, conform sokkies.com): links die
   redacteuren in FAQ-antwoorden/spec-teksten zetten — roze + semi-bold. */
  .faq-a-inner a{
    color:var(--coral);
    font-weight:600;
    transition: 0.2s ease-in-out;
    text-decoration: none;
  }
  .faq-a-inner a:hover{
    text-decoration: underline;
  }
  .spec-a-inner a{
    color:var(--pink);
    font-weight:600;
  }
  .faq-a-inner{
    padding:0 4px 20px;
  }
  .faq-a-inner p{
    font-size: var(--body-font-size);
    color:var(--text);
    max-width:92%;
  }

  /* Lijsten in FAQ-antwoorden (WP-toevoeging; htmlv kende ze niet — daar
     stond in elk antwoord alleen een <p>). Redacteuren zetten ze via de
     wysiwyg. Zonder eigen opmaak viel <li> terug op de browserstandaard:
     16px, line-height normal en zwart in plaats van --text, en met
     padding-left:0 vielen de bullets buiten de tekstkolom en waren ze dus
     onzichtbaar (melding Kulwant 2026-08-25 met referentiebeeld).
     Grootte, regelafstand en kleur volgen nu .faq-a-inner p, zodat een lijst
     naadloos bij de lopende tekst past; de inspringing zet de bullets weer
     binnen de kolom. Geldt in één keer voor alle vier de FAQ-weergaven:
     section-faq, faq_geel, faq_pagina en de FAQ op de PDP gebruiken
     allemaal .faq-a-inner. */
  .faq-a-inner ul,
  .faq-a-inner ol{
    margin:10px 0 0;
    padding-left:32px;
    max-width:560px;
  }
  .faq-a-inner ul{ list-style:disc outside; }
  .faq-a-inner ol{ list-style:decimal outside; }
  .faq-a-inner li{
    font-size:var(--body-font-size);
    line-height:1.6;
    color:var(--text);
  }

  /* ===== Slot-CTA: klaar om te ontwerpen ===== */
  .cta-final{
    background:var(--light-beige);
    position: relative;
  }
  .cta-final-feet {
    position: absolute;
    top: -90%;
    left: 50px;
  }
  /* SVG direct als background i.p.v. mask: CSS-masks renderen onbetrouwbaar in Chrome op macOS */
  .cta-final-panel{
    background:url(../media/cta-bg-shape.svg) no-repeat center top;
    background-size:cover;
    padding:150px 0 90px;
    text-align:center;
    position: relative;
  }
  .cta-final-panel h2{
    color:#fff;
    font-family:var(--roc-grotesk-condensed);
    font-weight: 700;
    text-transform:uppercase;
    font-size:calc(var(--h1-font-size) - 10px);
    line-height:1;
    margin-bottom:10px;
  }
  .cta-final-panel > .container > p{
    color:#fff;
    font-size: var(--body-lg-font-size);
    margin-bottom:36px;
  }

  /* =================================================== Footer ================================================ */
  .footer-top{
    background:var(--coral);
    color:#fff;
    padding:0px 0 30px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.32fr 1.34fr 1.35fr;
    gap:0px;
    padding-top: 50px;
    padding-bottom:0;
    border-bottom:1px solid #F96D69;
        border-top: 1px solid #F96D69;
  }
  .footer-col + .footer-col,
  .footer-links,
  .footer-contact{
    position:relative;
  }
  /* vertical dividers between columns */
  /* .footer-links::before,
  .footer-contact::before{
    content:"";
    position:absolute;
    left:-20px;
    top:0;
    bottom:0;
    width:1px;
    background:rgba(255,255,255,.25);
  } */

  .footer-brand{
    padding-top:30px;
  }
  .footer-logo{
    font-family:var(--roc-grotesk-condensed);
    font-weight: 700;
    margin-bottom: 28px;
    width: 134px;
    display: flex;
  }
  .footer-logo img{
    width:100%;
    height:100%;
  }
  .footer-brand p{
    font-size: var(--body-font-size);
    max-width:70%;
    margin-bottom:145px;
  }
  .footer-certs {
    display: flex;
    align-items: center;
    gap: 30px;
}
  
  .footer-certs-label{
    display:block;
    font-size: var(--body-font-size);
  }
  .footer-certs-list{
    display:flex;
    align-items:center;
    gap:20px;
  }
  .footer-certs-list img{
    height: 70px;
    width: 80px;
    object-fit: contain;
  }
  :is(.footer-col, .footer-news) :is(h4, h5){
font-weight: 600;
    margin-bottom: 28px;
    line-height: 1;

  }
  .footer-links-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
  }
  .footer-links-cols ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:11px;
  }
  .footer a{
    color:#fff;
    text-decoration:none;
    font-size: var(--body-font-size);
    transition:opacity .2s;
  }
  .footer-col {
    padding: 50px 80px 0;
    
  }
  .footer-links{
    border-right: 1px solid #F96D69;
    border-left: 1px solid #F96D69;
  }
  .footer-contact{
    padding-bottom:50px;
    padding-inline-end:45px
  }
  .footer-links-cols a:hover,
  .footer-contact-row ul a:hover,
  .footer-news-link:hover{
    text-decoration:underline;
  }
  .footer-contact-row{
    display:flex;
    justify-content:space-between;
    gap:40px;
    margin-bottom:32px;
  }
  .footer-contact-row ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:13px;
  }
  .footer-contact-row ul li{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .footer-ci{
    display:flex;
    width:21px;
    justify-content:center;
  }
  .footer-address{
    font-style:normal;
    font-size: var(--body-font-size);
    line-height:1.6;
  }
  .footer-socials{
    display:flex;
    gap:12px;
    margin-bottom:42px;
  }
  .footer-socials a{
    width:55px;
    height:55px;
    background:#28121B;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .2s;

  }
  .footer-socials a:hover{
    transform:translateY(-2px);
  }
  .footer-news :is(h4, h5){
    font-weight: 700;
    font-size:var(--h3-font-size);
    margin-bottom:6px;
  }
  .footer-news-row{
    display:flex;
    align-items:center;
    gap:26px;
    font-size: var(--body-font-size);
  }
  .footer-news-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
font-weight: 600;
    white-space:nowrap;
  }
  /* De Inschrijven-link is een <button> geworden (het nieuwsbriefveld in de
     footer). Knopstandaarden terugzetten zodat hij exact als de oude link
     rendert; de rest erft van .footer-news-link hierboven. */
  button.footer-news-link{
    background:none;
    border:0;
    padding:0;
    color:inherit;
    font-family:inherit;
    font-size:inherit;
    cursor:pointer;
  }
  /* De footerkolom is ~454px. Met een invoerveld erbij past de zin, het veld
     en de knop niet meer op één regel (193 + 220 + 112 + gaps = 565), waardoor
     de knop onder het veld viel. De zin krijgt daarom zijn eigen regel en het
     formulier de volle kolombreedte; veld en knop staan dan weer naast
     elkaar. */
  .footer-news-row{
    flex-wrap:wrap;
  }
  .footer-news-form{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    flex:1 1 100%;
  }
  .footer-news-form input[type="email"]{
    background:transparent;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.45);
    color:var(--white);
    font-family:inherit;
    font-size:var(--body-font-size);
    padding:6px 2px;
    /* Meeschalend in plaats van een vaste 220px, anders wipt de knop op
       smallere schermen alsnog naar de volgende regel. */
    flex:1 1 170px;
    min-width:0;
  }
  .footer-news-form input[type="email"]::placeholder{
    color:rgba(255,255,255,.55);
  }
  .footer-news-form input[type="email"]:focus{
    outline:none;
    border-bottom-color:var(--white);
  }
  /* Terugkoppeling na het inschrijven. Staat op eigen regel onder het veld
     zodat de footerrij niet verspringt; geldt ook voor de kaart op de
     bedankt-pagina's, vandaar de losse selector. */
  .nl-status{
    flex-basis:100%;
    margin-top:8px;
    font-size:var(--body-sm-font-size);
    line-height:1.5;
  }
  .nl-status.is-fout{
    color:var(--yellow);
  }
  .newsletter-card .nl-status{
    margin-top:12px;
    color:var(--text);
  }
  /* Partners strip */
  .footer-partners{
    display:flex;
    align-items:center;
    gap:28px;
    padding-top:26px;
    justify-content: center;
  }
  .footer-partners-label{
    font-size: var(--body-font-size);
  }
  .footer-otp{
    height:40px;
    width:auto;
  }

  /* White bottom bar */
  .footer-bottom{
    background:#fff;
    color:var(--text);
    padding:0px 0 30px;
  }
  .footer-pay{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px 30px;
    padding-bottom:0px;
    border-bottom:1px solid var(--light-beige);
  }
  .footer-pay-group{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
  }
  .footer-pay-label{
    font-size:12px;
    text-transform:uppercase;
    color:var(--text);
    font-family:var(--roc-grotesk-medium);
    font-weight: 500;
  }
  .footer-pay-inner, .footer-ship-inner{
    height:29px;
    display: flex;
    align-items: center;
    gap: 40px;
  }
  .footer-pay-group img, .footer-ship-inner img{
    height:auto;
    width:auto;
    object-fit:contain;
    max-height: 29px;
    max-width: 48px;
  }
  .border-v {
    width: 1px;
    height: stretch;
    background: var(--light-beige);
    padding: 50px 0;
}
 
  .footer-reviews{
    display:flex;
    justify-content:center;
    gap:9%;
    flex-wrap:wrap;
    padding:34px 0;
    border-bottom:1px solid var(--light-beige);
  }
  .footer-review{
    display:flex;
    align-items:center;
    gap:8px;
    font-size: var(--body-font-size);
  }
  .footer-review img{
    height:30px;
    width:auto;
    margin-right:2px;
  }
  .footer-review strong{
font-weight: 600;
  }
  .footer-stars{
    color:var(--green);
    letter-spacing:1px;
  }
  .footer-review a{
    color:var(--text);
    text-decoration:underline;
    transition: 0.3s ease-in-out;
  }
  .footer-review a:hover{
    color: var(--coral);
  }
  .footer-legal{
    text-align:center;
    /* QA #7 (2026-08-13): 15px op 1920, schaalt per band mee als body−2
       (de vaste 15 gold overal; a's erven de rijmaat) */
    font-size:calc(var(--body-font-size) - 2px);
    color:var(--text);
    padding-top:40px;
  }
  .footer-legal a{
    color:var(--text);
    /* QA #7: de generieke footer-linkmaat (body) won van de rijmaat */
    font-size:calc(var(--body-font-size) - 2px);
  }

  /* ===================================================================
     Collectie page
  =================================================================== */
  .hero-slider-section{
    background:var(--light-beige);
  }

  :is(.types-head-center, .usecase-why) h2 {
    text-align: center;
    font-family: var(--roc-grotesk-condensed);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--h2-font-size);
    line-height: 1;
  }
  .breadcrumb{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    color:var(--text);
    padding:40px 0 0px;
  }
  .breadcrumb a{
    color:var(--text);
    text-decoration:none;
  }
  .breadcrumb a:hover{ opacity:1; }

  .coll-hero{
    padding:0px 0 0px;
    overflow:hidden;
    height:760px;
  }
  .coll-hero-inner{
    display:grid;
    grid-template-columns:1fr 1.05fr;
    gap:42px;
    align-items:center;
  }
  .coll-hero-content h1{
    font-family:var(--roc-grotesk-condensed);
    font-weight: 700;
    text-transform:uppercase;
    font-size:var(--h1-font-size);
    line-height:var(--h1-line-height);
    color:var(--text);
    margin-bottom:6px;
    max-width: 620px;
  }
  .coll-hero-left{
    margin-top: 86px;
    height: stretch;
    display: flex;
    flex-direction: column;
    gap: 128px;
  }
  .coll-hero-left p{
    font-size: var(--body-font-size);
    color:var(--text);
    max-width:70%;
    margin-bottom:15px;
  }
  .coll-hero-btns{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:80px;
  }
  .btn-outline-dark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    color:var(--text);
    border:1.5px solid var(--text);
    border-radius:30px;
    padding:14px 28px;
font-weight: 600;
    font-size:15px;
    text-decoration:none;
    transition:background .2s, color .2s;
  }
  .btn-outline-dark:hover{
    background:var(--text);
    color:#fff;
  }
  .coll-hero-content ul{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    /* QA #27 (2026-08-13): kolomgap 30→40 conform design */
    gap:12px 40px;
    width: 80%;
  }
  .coll-hero-content ul li{
    position:relative;
    padding-left:15px;
    font-size: var(--body-lg-font-size);
    text-transform:uppercase;
    line-height: 1;
    font-family:var(--roc-grotesk-condensed);
    font-weight: 600;
    color:var(--text);
  }
  .coll-hero-content ul li::before{
    content:"";
    position:absolute;
    left:0; 
    top: 42%;
    transform: translateY(-50%);
    width:10px; 
    height:14px;
    background-repeat:no-repeat;
    background-size:contain;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10.779' height='14' viewBox='0 0 10.779 14'><g><g><path d='M2.3 7.176.115 11.715a1.652 1.652 0 0 0 .909 2.135 1.613 1.613 0 0 0 2.1-.922l2.683-5.8a.673.673 0 0 0-.007-.51L3.112.4A.652.652 0 0 0 2.251.054L.48.83A.669.669 0 0 0 .138 1.7L2.3 6.665a.673.673 0 0 1 .007.51' transform='translate(4.921 0)' fill='%23fa4a45'/><path d='M2.3 7.176.115 11.715a1.652 1.652 0 0 0 .909 2.135 1.613 1.613 0 0 0 2.1-.922l2.683-5.8a.673.673 0 0 0-.007-.51L3.114.4A.652.652 0 0 0 2.252.054L.481.831a.669.669 0 0 0-.342.874L2.3 6.666a.673.673 0 0 1 .007.51' transform='translate(0 .033)' fill='%23fa4a45'/></g></g></svg>");
  }
  .coll-hero-gallery{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    height:830px;
    transform: rotate(354deg);
    position: relative;
    top: -60px;
    margin-right: 42px;
  }
  .ch-swiper{
    height:100%;
    width:100%;
    overflow:hidden;
  }
  .ch-swiper .swiper-wrapper{
    transition-timing-function:linear !important;
  }
  .ch-swiper .swiper-slide{
    height:543px;
    border-radius:15px;
    overflow:hidden;
  }
  .ch-swiper .swiper-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .ch-swiper-2{
    margin-top:34px;
  }

  /* Alle sokken types */
  .types-section{
    background:#fff;
    padding:100px 0 80px;
  }
  .types-head{
    position:relative;
    display:flex;
    justify-content:center;
    margin-bottom:30px;
  }
  .types-head-center{
    text-align:center;
    align-self:center;
  }
  .types-head-center p{
    font-size:16px;
    color:var(--text);
    margin-top:10px;
  }
  .types-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:80px 47px;
  }
  .type-card{
    display:flex;
    flex-direction:column;
    text-decoration:none;
    color:var(--text);
  }
  .type-card-img{
    position:relative;
    width:100%;
    height:395px;
    border-radius:25px;
    overflow:hidden;
    background:#f0f0f0;
    margin-bottom:20px;
    border: 1px solid #dddddd;
  }
  .type-card-img img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform .3s;
  }
  .type-card-content {
    padding: 0 10px;
    display: flex;
    flex-direction: column;
  }
  .type-card:hover .type-card-img img{ transform:scale(1.04); }
  .type-card-content h3{
    
    font-weight: 700;
    font-size:var(--h5-font-size);
    margin-bottom:12px;
    line-height:1;
  }
  .type-card-content p{
    font-size: var(--body-font-size);
    color:var(--text);
    margin-bottom:20px;
  }
  .type-card-price{
    font-size: var(--body-lg-font-size);
    color:var(--text);
    margin-bottom:12px;
    line-height: 1;
  }
  .type-card-item{
    font-size:15px;
    color:var(--text);
    line-height:1;
    margin-bottom:15px;
  }
  .type-card-price strong{ 
    font-weight: 600; 
  }
  .type-card-btn{
    margin-top:auto;
    align-self:flex-start;
    background:var(--light-beige);
    border-radius:30px;
    padding:13px 22px;
    font-weight: 600;
    font-size: var(--body-font-size);
    color:var(--text);
    transition:background .2s;
    width: 100%;
    text-align: center;
  }
  .type-card:hover .type-card-btn{ 
    background:var(--text); 
    color: var(--white);
  }

  /* Vergelijkingstabel */
  .compare{
    position: relative;
  }
  .compare-floating-elements{
    position: absolute;
    top: -10%;
    right: 4%;
    z-index: 10;
  }
  .compare-inner-main{
    background:url(../media/bg_right-red.svg) no-repeat center top;
    padding:220px 0 80px;
  }
  /* bg_right-red.svg (1920x1567) stond op ware grootte GECENTREERD: op 2560px
     bleef links en rechts 320px wit staan.
     LET OP — DIT IS EEN SVG. Een SVG-achtergrond houdt zich aan zijn eigen
     preserveAspectRatio, dus 'background-size: <breedte> <hoogte>' rekt hem
     NIET uit: hij past zich passend in dat vak en laat de rest leeg. De
     hoogte-vastzetten-truc die bij de PNG-vormen werkt (.collection, .cases,
     .gift) heeft hier dus geen effect — geprobeerd en nagemeten: nog steeds
     exact 1920px coral met 320px wit ernaast.
     Daarom cover: die schaalt de SVG wél op tot hij de breedte vult.
     Bewust alleen vanaf 1920px: de smallere banden zetten background-position
     op 'right top' om een bepaald deel van de vorm te tonen, en cover zou dat
     daar omgooien. Op 1920 zelf is het verschil 0,8% (1905x1554 i.p.v.
     1920x1567) en dus niet zichtbaar. */
  @media (min-width:1920px){
    .compare-inner-main{
      background-size:cover;
    }
  }
  .compare-inner-main h2{
    text-align:center;
    color:#fff;
    font-family:var(--roc-grotesk-condensed);
    font-weight: 700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:0.98;
    margin-bottom:40px;
  }
  .compare-scroll{ overflow-x:auto; }
  .compare-table{
    width:83.15%;
    border-collapse:separate;
    border-spacing:0;
    color:#fff;
    margin: 0px auto;
    padding-top: 20px;
  }
  .compare-table th,
  .compare-table td{
    padding:8px 18px;
    text-align:center;
    font-size:15px;
    height: 60px;
  }
  .compare-table th{
    font-size: var(--body-lg-font-size);
    font-weight: 600;
  }
  .compare-table thead th{
    font-weight: 600;
  }
  .compare-table tbody th{
    text-align:left;
    font-weight: 600;
    white-space:nowrap;
    border-radius: 8px 0 0 8px;
  }
  .compare-table thead th.is-featured{
    border-top: 1px solid rgb(255 255 255 / 24%);
  }
  .compare-table tbody tr:nth-child(odd) td{
    background:rgba(255,255,255,.08);
    border: 1px solid rgb(255 255 255 / 24%);
    border-right: 0;
    border-left: 0;
  }
  .compare-table tbody tr:nth-child(odd) th{
    background:#FA5F5A;
    border: 1px solid rgb(255 255 255 / 24%);
    border-right: 0;
    width: 31.4%;
  }

  .compare-table tbody tr:nth-child(odd) td:nth-child(even){
    border-left: 1px solid rgb(255 255 255 / 24%);
    border-right: 1px solid rgb(255 255 255 / 24%);
        background: #FA706B;
  }
  .compare-table .is-featured{
    background: rgb(255 255 255 / 6%) ;
    border: 1px solid rgb(255 255 255 / 24%);
    border-bottom: 0;
    border-top: 0;
    position: relative;
  }
  .badge-form{
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--body-sm-font-size);
    font-weight: 500;
    width: max-content;
    background: var(--light-beige);
    border-radius: 5px;
    padding: 2px 9px;
    color: var(--text);
    text-transform: uppercase;
  }
  .compare-table thead .is-featured{
    border-radius:10px 10px 0 0;
  }
  .compare-table tbody tr:last-child .is-featured{
    border-bottom: 1px solid rgb(255 255 255 / 24%);
  }
  .dot{
    display:inline-block;
    width:16px; height:16px;
    border-radius:50%;
  }
  .dot-yes{ background:var(--green); }
  .dot-no{ background:rgba(255,255,255,.35); }


  /* Calculator */

  .calculator-bg{
    position: relative;
    padding: 135px 0 67px;
    background: #fff;
  }
  .bg-yellow-shape{
    background:url(../media/bg_yellow-element.svg) no-repeat center top;
    background-size:cover;
    height: 93%;
    position: absolute;
    width: 100%;
    top: -31px;
    left: 0;
    z-index: 0;
  }
  .calculator-bg:before{
    content:'';
    background: var(--coral);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:50%;
    z-index: 0;
  }
  .calculator-bg .container{
    position: relative;
    z-index: 10;
  }

  /* Process split layout (Collectie) */
  .process-split{
    background:#fff;
    padding:70px 0 0px;
  }
  .process-split .process-wave{ display:none; }
  .process-split-inner{
    display:grid;
    grid-template-columns:42.2% 1fr;
    gap:145px;
    align-items:flex-start;
  }
  .process-left h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight: 700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1.1;
    color:var(--text);
    margin-bottom:26px;
  }
  .process-left ul{
    list-style:none;
  }
  .process-left ul li{
    display:flex;
    align-items:start;
    justify-content: space-between;
    gap:14px;
    padding:30px 0 40px;
    border-top:1px solid #28121B;
  }

  .process-num{
    font-size: var(--body-lg-font-size);
    color:var(--text);
    padding-top:6px;
    font-weight: 600;
  }
  .process-inner {
    display: flex;
    gap: 20px;
    padding: 0 60px;
  }

  /* HET TEKSTBLOK KRIJGT EEN VASTE BREEDTE, anders bepaalt de LENGTE VAN DE
     TEKST waar een stap begint (melding Rick 2026-09-30: "punt 4 lijnt niet
     uit" op /collectie/). De li staat op justify-content:space-between met
     een tekstblok op flex:0 1 auto, dus dat blok is zo breed als zijn eigen
     inhoud en wordt naar rechts geduwd. Stap 4 heeft een kortere alinea (1
     regel i.p.v. 2), is daardoor smaller en begint dus verder naar rechts.
     Gemeten op /nl/collectie/: chevron en titel van stap 4 stonden 27px naar
     rechts t.o.v. 1 t/m 3.
     HET IS GEEN BAND-KWESTIE maar een breedtevenster: het valt alleen op
     zolang de rij breder is dan de korte alinea (511px) en smaller dan de
     lange (538px). Nagemeten: fout op 1440, 1550 en 600; toevallig goed op
     1920, 1680, 1280, 992, 768 en 390. Daarom hier in de BASIS en niet in
     één band - met andere copy of een andere taal verschuift dat venster.
     min() houdt de huidige weergave exact intact: is er ruimte, dan is het
     blok 538px (precies wat stap 1 t/m 3 nu al meten op 1440 t/m 1920); is
     er minder, dan krimpt het mee zoals nu. Het getal is vanaf hier een
     ONTWERPbreedte en geen gevolg meer van de tekstlengte.
     De configurator (.conf-works) en de landingsvariant (.process-landing)
     hebben verderop hun eigen width en blijven dus ongemoeid - daar is
     precies dezelfde klacht eerder met een vaste breedte opgelost. */
  .process-split .process-inner {
    width: min(538px, 100%);
  }
  .process-row-body h3{
  font-weight: 700;
    color:var(--text);
    margin-bottom:12px;
    line-height: 1;
  }
  .process-row-body p{
    font-size: var(--body-font-size);
    color:var(--text);
    max-width:375px;
  }
  .process-split-cta{
    display:inline-block;
    margin-top:26px;
  }
  .process-btn{
    display: flex;
    justify-content: center;
  }
  .process-btn a{
      margin-inline-start: 20%;
  }
  .process-collage{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .process-collage img{
    width:100%;
    height:415px;
    object-fit:cover;
    border-radius:35px;
    display:block;
  }
  .process-collage img:nth-child(2){ margin-top:60px; }
  .process-collage img:nth-child(3){ margin-top:-60px; }

  /* Wat klanten zeggen */
  .case-inner-page{
    padding: 0;
    margin-top: -55px;
  overflow: visible;
  position: relative;
  }
   .case-inner-page .case-section-outer {
    background:url(../media/bg-case-inner.svg) no-repeat center top;
    /* COVER LATEN STAAN. Geprobeerd om de hoogte vast te zetten (zoals bij
       .collection en .cases), maar NAGEMETEN werd het slechter: de bovenrand
       van het blauw week met cover 10% van de bandhoogte af t.o.v. 1920px en
       met een vaste hoogte 27%. Dit is een grote schuine vorm; die uitrekken
       vervormt hem sterker dan het gelijkmatige opschalen van cover. Zelfde
       conclusie als bij .cta-final-panel — zie CLAUDE.md. */
    background-size:cover;
      padding: 15% 0 50px;
  }
  .case-inner-page:before{
    content:url(../media/sock-element-up.svg);
    width:auto;
    height: auto;
    position: absolute;
    top: -60px;
    background: none;
    z-index: 1;
    left: 36%;
    transform: translateX(-50%);
  }
  .case-inner-page:after{
    content:url(../media/sock-element-up.svg);
    width: auto;
    height: auto;
    position: absolute;
    bottom: -22%;
    background: none;
    z-index: 1;
    right: 9%;
    transform: rotate(119deg);
  }
  .testimonial{
    background: var(--blue);
    padding:70px 0 112px;
    position: relative;
    overflow: hidden;
  }
  .testimonial-head{
    text-align:center;
    margin-bottom:30px;
  }
  .testimonial-head h2{
    color:#fff;
    font-family:var(--roc-grotesk-condensed);
    font-weight: 700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    margin-bottom:7px;
    line-height: 1;
  }
  .testimonial-rating{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-size:15px;
  }
  .testimonial-score{ 
font-weight: 600; 
}
.testimonial-num{
  font-family: var(--juniper-bay);
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: underline;
}
/* De reviewregel is een <a> naar de reviewpagina geworden (was een <span>).
   color:inherit is hier geen detail maar noodzaak: dit blok heeft VIER
   achtergronden (standaard blauw, licht, geel en de offerte-variant) en een
   link erft geen kleur, dus zonder dit werd hij overal browserblauw - op het
   blauwe vlak blauw-op-blauw.

   HOVER VIA DOORZICHTIGHEID EN NIET VIA EEN KLEUR, om dezelfde reden: er is
   geen enkele kleur die op alle vier de achtergronden goed leest. Zo is de
   hover altijd zichtbaar en kan hij nooit wegvallen. */
.testimonial-num{
  color:inherit;
  transition:color .3s;
}
.testimonial-num:hover{
  color: var(--coral);
}
  .testimonial-stars,
  .testimonial-card-stars{ color:var(--green); letter-spacing:1px; }
  .testimonial-card{
    background:#fff;
    border-radius:25px;
    padding:50px;
    height:315px;
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items: center;
  }
  .swiper.testimonial-swiper{
    overflow: visible;
  }
  .testimonial-card p{
    font-size: var(--body-lg-font-size);
    color:var(--text);
    flex:1;
    text-align: center;
    font-weight: 600;
  }
  .testimonial-author{
    font-size: var(--body-sm-font-size);
    color:var(--text);
    text-transform: uppercase;
  }
  .testimonial-nav{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:40px;
  }
  .testimonial .cases-nav{
    justify-content: center;
    top: 0;

  }

  /* ===================================================================
     Offerte page
  =================================================================== */
  

  /* Quote form layout */
  .quote-section{
    padding:0 0 40px;
    margin-top:80px;
  }
  .quote-wrap{
    display:grid;
    grid-template-columns:1fr 485px;
    gap:34px;
    align-items:start;
  }
  .quote-card{
    background:#fff;
    border:1.5px solid #28121B;
    border-radius:25px;
    padding:40px 50px 50px;
  }
  .quote-aside{
    background:#fff;
    border:1.5px solid var(--dark);
    border-radius:25px;
    padding:40px;
    position:sticky;
    top:120px;
  }
  .of-aantal {
    margin-top: 45px;
  }
  .of-wensen{
    margin-top: 20px;
  }
  /* Stepper */
  .stepper{
    list-style:none;
    display:flex;
    margin-bottom:60px;
  }
  .stepper-item{
    flex:1;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:0 8px;
  }
  .stepper-item::before{
    content:"";
    position:absolute;
    top:21px;
    right:50%;
    width:100%;
    height:4px;
    background:var(--light-beige);
    z-index:0;
  }
  .stepper-item:first-child::before{ 
    display:none; 
  }
  .stepper-item.is-active::before,
  .stepper-item.is-done::before{ 
    background:var(--dark); 
  }
  .stepper-item.is-done[data-step="2"]::before, .stepper-item.is-done[data-step="3"]::before{
    background:var(--green);   
  }

  .stepper-dot{
    position:relative;
    z-index:1;
    width:44px;height:44px;
    border-radius:50%;
    background:var(--light-beige);
    color:var(--text);
    display:flex;align-items:center;justify-content:center;
    font-size:15px;
    margin-bottom:10px;
    flex-shrink:0;
  }
  .stepper-item.is-active .stepper-dot{ background:var(--text);
        font-weight: 600; color:#fff; }
  .stepper-item.is-done .stepper-dot{ background:var(--green); color:transparent; }
  .stepper-item.is-done .stepper-dot::after{
    content:"";
    width:12px;
    height:8px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2213.721%22%20height%3D%2210.121%22%20viewBox%3D%220%200%2013.721%2010.121%22%3E%3Cg%20transform%3D%22translate(1.061%201.061)%22%3E%3Cpath%20d%3D%22M110.16%20670.539l3.6%203.6%208-8%22%20transform%3D%22translate(-110.16%20-666.138)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
    position: absolute;
  }
  .stepper-label {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stepper-item.is-active .stepper-label span{
  font-weight: 600;
}
  .stepper-label span{
    display:block;
    font-size: var(--body-font-size);
    color:var(--text);
    line-height: 1;
  }
  .stepper-label small{
    font-size: var(--body-sm-font-size);
    color:var(--text);
  }

  /* Steps */
  .quote-step{ display:none; }
  .quote-step.is-current{ display:block; }
  .quote-card h3{
    font-weight: 700;
    font-size:22px;
    color:var(--text);
    margin-bottom:6px;
  }
  :is(.quote-step, .sample-card) > p{
    font-size:15px;
    color:#8a7f70;
    margin-bottom:20px;
  }
  .quote-card h3 + .type-picker{ margin-top:18px; }

  .type-picker{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px var(--h5-font-size);
    margin-bottom:26px;
  }

  /* HOEKRONDING VAN DE KEUZEKAARTEN (verzoek: 14px was te rond voor zulke
     kleine vakjes). De KAART is .type-pick-outer — die draagt de rand en
     de padding — en .pick-card ligt er als label precies overheen, dus
     die twee moeten gelijk blijven, anders schemert er een rondere hoek
     doorheen.

     DE FOTO BINNENIN GAAT MEE, CONCENTRISCH. Een binnenvlak met dezelfde
     ronding als de kaart geeft in de hoek een sikkeltje, want het ligt
     1px rand + 9.1px padding naar binnen. De regel is: binnenronding =
     kaartronding - de afstand ertussen, dus 10 - 9.1 = afgerond 1px. Met
     zoveel lucht rond de foto is de hoek daarbinnen vrijwel recht; dat
     hoort zo. Wil je de foto zichtbaar rond houden, dan moet de padding
     omlaag, niet de binnenronding omhoog.

     Geldt voor de soktypes EN de aanvullende opties, en daarmee voor het
     offerte- en het sampleformulier: die delen deze classes. */
  .type-pick-outer {
    padding: 9.1px;
    border: 0.5px solid #dddddd;
    border-radius: 10px;
    margin-bottom: 18px;
    position: relative;
}
  .pick-card{
    position:relative;
    cursor:pointer;
    text-align:center;
    border-radius:10px;
  }
  .pick-card input{ 
    position:absolute; 
    opacity:0; 
    pointer-events:none;
  }

  /* GEKOZEN EN NIET-GEKOZEN KAARTEN (verzoek: op 10% zie je niet wat een
     optie is zonder hem aan en uit te klikken).
       niet gekozen : foto op 75%, lichtgrijze rand om het beeld, geen vinkje
       wel gekozen  : foto op 100%, rand zwart, vinkje groen
     De rand is #dddddd, dezelfde lichtgrijze beeldrand als de kaartfoto's op
     de overzichten; het groen is var(--green), hetzelfde groen als de
     afgeronde stappen in de stepper en de vinkjes in "Wat krijg je?" —
     geen nieuwe kleur er dus bij.
     De rand kost geen ruimte: box-sizing staat globaal op border-box.
     De overgang blijft 0.2s en geldt nu ook voor de randkleur, anders
     springt de rand hard van grijs naar zwart terwijl de foto opfadet. */
  .pick-img{
    display:block;
    height:182px;
    border-radius:10px; 
    overflow:hidden;
    background:#f0f0f0;
    border:1px solid #dddddd;
    opacity: 75%;
    transition: opacity 0.2s, border-color 0.2s;
  }
  .pick-img img{ width:100%;height:100%;object-fit:cover; }
  
  .pick-name{
    font-size: var(--body-font-size);
    color:var(--text);
    
  }
  .is-selected .pick-name{
    font-weight: 600;
  }
  .pick-card:hover .pick-img{
    opacity: 100%;
  }
  .is-selected .pick-img{
    opacity: 100%;
  }
  .is-selected .type-pick-outer{
    border: 1.5px solid var(--dark);
  }
  .pick-check{
    position:absolute;
    top:8px;left:50%;
    transform:translateX(-50%);
    display:none;
  }
  .pick-card.is-selected .pick-check{
    display:block;
    bottom:-15px;top:auto;left:50%;
    width:30px;
    height:30px;
    background:var(--green);
    border-radius:50%;
  }
  .pick-card.is-selected .pick-check::after{
    content: "";
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 10px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
  }

  .quote-field{ 
    margin-bottom:22px; 
  }
  .quote-label{
    display:block;
    font-weight: 600;
    font-size: var(--body-lg-font-size);
    color:var(--text);
    margin-bottom:12px;
    line-height: 1;
  }
  .req{ 
    color:var(--coral);
  }
  .opt{ 
    font-weight:400; 
  }
  .quote-input{
    width:100%;
    border:1.5px solid var(--border-light);
    border-radius:5px;
    padding:12px 14px;
    font-size: var(--body-font-size);
    color:var(--text);
    background:var(--white);
    height: 50px;
    font-family: var(--roc-grotesk);
  }
  .quote-input-textarea{
    padding:17px 14px;
    height: auto;
  }
  .quote-input:focus{ outline:none; border-color:#c7bcac; }
  textarea.quote-input{ 
    resize:vertical; 
    font-family: var(--roc-grotesk);
  }
  .quote-input-sm{ max-width:200px; }

  .dropzone{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align:center;
    border:1.5px dashed #cabda9;
    border-radius:15px;
    padding:22px;
    background:#faf6f0;
    cursor:pointer;
    height: 140px;
    justify-content: center;
  }
  .dropzone strong{ 
    font-size: var(--body-font-size); 
    color:var(--text); 
     font-weight: 600;
  }
  .dropzone span{ font-size:15px; color:var(--text); }
  .upload-row{
    display:none;
    align-items:center;
    gap:3px;
    margin-top:20px;
    flex-direction: column;
  }
  .upload-row.is-visible{
    display:flex;
  }
  .upload-thumb{
    width:60px;
    height:60px;
    flex-shrink:0;
    border-radius:8px;
    overflow:hidden;
    background:#f0f0f0;
  }
  .upload-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .upload-thumb.is-icon{ background:#fdeceb; }
  .upload-thumb.is-icon img{ object-fit:contain; padding:9px; }
  .upload-info{ 
    flex:1; 
    display:flex; 
    flex-wrap:wrap; 
    align-items:center; 
    gap:2px 10px;
    width: 100%;
    justify-content: space-between;
  }
  .upload-outer{
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .upload-name{ 
    font-size: var(--body-font-size); 
    color:var(--text); 
  }
  .upload-size{ 
    font-size: var(--body-sm-font-size); 
    display: block;
    width: 100%;
    margin-top: 8px;
  }

  .upload-progress{
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .upload-bar{
    flex-basis:100%;
    height:6px;border-radius:5px;background:#ece5db;overflow:hidden;margin-top:0px;
  }
  .upload-bar span{ 
    display:block;
    height:100%;
    background:var(--coral);
   }
  .upload-pct{ font-size: var(--body-sm-font-size); color:#8a7f70; }
  .upload-remove{ border:none;background:transparent;cursor:pointer;display:flex; }

  .quote-actions{
    display:flex;
    justify-content:flex-end;
    padding-top:8px;
  }
  .quote-actions-split{ justify-content:space-between; align-items:center; }
  .quote-actions-right{ 
    display:flex; 
    gap:20px; 
  }
  .btn-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:transparent;
    border:none;
    cursor:pointer;
    font-weight: 600;
    font-size:15px;
    color:var(--text);
  }

  /* Extra options */
  .extra-picker{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:var(--h5-font-size);
    margin-bottom:40px;
  }
  .extra-card{
    position:relative;
    background:transparent;
    border:none;
    cursor:pointer;
    text-align:center;
    padding:0;
  }
  /* De aanvullende opties krijgen exact dezelfde behandeling als de
     soktypes hierboven; ze stonden alleen nog zonder overgang. */
  .extra-img{
    display:flex;
    align-items:center;
    justify-content:center;
    height:182px;
    border-radius:10px;
    overflow:hidden;
    background:#f0f0f0;
    border:1px solid #dddddd;
    opacity: 75%;
    transition: opacity 0.2s, border-color 0.2s;
  }
  .extra-img img{ width:100%;height:100%;object-fit:cover; }
  .extra-img-none{ 
    background:#D3CED0;
    opacity: 100%;
  }
  .extra-img-none svg{ 
    width: 34px;
    height: 34px; 
  }
  .extra-name{ 
    font-size: var(--body-font-size); 
    color:var(--text); 
  }
  .extra-card .pick-check{ display:none; }
  .extra-card.is-selected .pick-check{
    display:block;
    bottom:-15px;top:auto;left:50%;transform:translateX(-50%);
    width:30px;height:30px;background:var(--green);border-radius:50%;
  }
  /* Een extra die alleen bij bepaalde soktypes hoort en er nu niet bij past.
     offerte.js zet de class; het vakje wordt daarbij ook uitgevinkt. */
  .quote-card .gfield_checkbox .gchoice.is-verborgen{
    display:none;
  }
  .extra-card.is-selected .extra-img{
    opacity: 100%;
  }
  .extra-card.is-selected .extra-name{
    font-weight: 600;
  }
  .extra-card.is-selected .pick-check::after{
    content:"";
    position:absolute;
    top:46%;left:50%;
    transform:translate(-50%,-50%) rotate(-45deg);
    width:10px;height:4px;
    border-left:2px solid #fff;border-bottom:2px solid #fff;
  }

  /* Step 3 grids */
  .quote-grid{ 
    display:grid; 
    grid-template-columns:1fr 1fr; 
    gap:20px; 
    margin-bottom:22px; 
  }
  .quote-grid-3{ 
    grid-template-columns:repeat(3, 155px); 
  }
  .quote-step-three .quote-grid-3{
    margin-top: 14px;
  }
  .quote-grid .quote-field{ margin-bottom:0; }
  .quote-address{
    margin-bottom:22px;
  }
  .quote-address-head{
    display:flex;
    justify-content:space-between;
    font-size: var(--body-sm-font-size);
    color:#5a5346;
    margin-bottom:10px;
  }
  .quote-address-edit a{ color:var(--text); }
  .quote-address-value{ 
    font-weight: 600; 
    font-size:15px; color:var(--text); 
    background:#EAFCF1;
    border:1px solid var(--green);
    border-radius:10px;
    padding:10px 16px;
  }

  /* Aside */
  .quote-aside h3{
     font-weight: 700;
    font-size:var(--h5-font-size);
    margin-bottom:26px;
    line-height: 1;
  }
  .quote-aside ul:first-of-type{ 
    list-style:none; 
    display:flex; 
    flex-direction:column; 
    gap:22px; 
  }
  .quote-aside ul:first-of-type li{
    position:relative;
    padding-left:40px;
    font-size: var(--body-font-size);
    color:var(--text);
  }
  .quote-aside ul:first-of-type li::before{
    content:"";
    position:absolute;
    left:0;
    top: 50%;
    transform: translateY(-50%);
    width:30px;
    height:30px;
    border-radius:50%;
     background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2215%22%20fill%3D%22%231dd665%22/%3E%3Cg%20transform%3D%22translate(9%2011)%22%3E%3Cpath%20d%3D%22M110.16%20670.539l3.6%203.6%208-8%22%20transform%3D%22translate(-110.16%20-666.138)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22/%3E%3C/g%3E%3C/svg%3E");
     background-size: cover;
  }
  .quote-aside-divider{ 
    height:1px; 
    background:#ece5db; 
    margin:36px 0 30px; 
  }
  .quote-aside h4{ 
    font-size:var(--h5-font-size); 
    margin-bottom:20px; 
    font-weight: 700;
    line-height: 1;
  }
  .quote-aside ul:last-of-type{ 
    list-style:none; 
    display:flex; 
    flex-direction:column; 
    gap:22px; 
    font-size: var(--body-font-size); 
    color:var(--text); 
  }
  .quote-aside ul:last-of-type a span{
    font-weight: 600;
  }
  .quote-aside ul:last-of-type a{ 
    color:var(--text);
    text-decoration: none;
   }

  /* Wat gebeurt er na je aanvraag */
  .application-section{
    position:relative;
    padding:80px 0 125px;
   
  }
  /* wrapper-div (2026-08-07, was <img> op offerte + sample-request): svg
     op NATUURLIJKE schaal (1920 breed) — snijdt op smaller aan de zijkanten */
  .application-bg-shape{
    position: absolute;
    z-index: -1;
    top: auto;
    left: 0; /* pin — zonder left schuift de statische positie mee met sectie-padding */
    width: 100%;
    bottom: 0;
    height: 776px;
    background: url(../media/bg-pink-shape.svg) no-repeat top center;
  }
  /* als background i.p.v. content:url (2026-08-07): content-svg schaalt
     niet mee met width — met background/contain + aspect-ratio wel */
  .application-section:after {
    content: "";
    width: 347.5px; /* natuurlijke svg-maat; banden schalen via width */
    aspect-ratio: 347.5/349.5;
    position: absolute;
    bottom: -50%;
    background: url(../media/sock-element-up.svg) no-repeat center/contain;
    z-index: 1;
    right: 9%;
    transform: rotate(119deg);
}
  .application-doodle{
    position:absolute;
    right:6%;top:14%;
    opacity:.9;
    transform:rotate(12deg);
    pointer-events:none;
  }
  .application-section h2{
    text-align:center;
    color:#3f38d6;
    font-family:var(--roc-grotesk-condensed);
     font-weight: 700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    margin-bottom:40px;
    line-height: 1;
  }
  .application-steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:84px;
    max-width:62%;
    margin:0 auto;
    text-align:center;
  }
  .application-num{
    display:inline-flex;
    align-items:center;justify-content:center;
    width:44px;
    height:44px;
    border-radius:50%;
    background:#3f38d6;
    color:#fff;
    font-weight: 600;
    font-size:14px;
    margin-bottom:20px;
  }
  .application-step h3{
    font-weight: 600;
    font-size: var(--body-lg-font-size);
    color:var(--text);
    margin-bottom:8px;
    line-height: 1;
  }
  .application-step p{
    font-size:var(--body-font-size);
    color:var(--text);
    margin:0 auto;
  }
  .application-sample-request .application-steps {
    gap: 34px;
    max-width: 72%;
}

  .testimonial-offer{
    padding: 116px 0 120px;
  }

  /* FAQ "bekijk alle vragen" link */

  .faq-light{
    background: #fff;
    padding: 120px 0;
  }

  .faq-light .faq-a-inner p,
  .faq-light .faq-a-inner ul,
  .faq-light .faq-a-inner ol{
    max-width: 100%;
  }
  .faq-a-inner p a{
    color:var(--text)
  }
  .faq-item{
    border-bottom:1px solid var(--dark)
  }
  .faq-all{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:40px;
    text-decoration:none;
     font-weight: 600;
    font-size: var(--body-font-size);
    color:var(--text);
  }
  .faq-all:hover{
    text-decoration: underline;
  }

  .brands-inner{
    padding: 80px 0;
  }
  .brands-inner h2{
    margin-bottom: 22px;
  }
  /* Mini footer */
  .mini-footer{
    background:var(--coral);
    color:#fff;
    padding:42px 0;
  }
  .mini-footer .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
    font-size:14px;
  }
  .mini-footer-left{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
  }
  .mini-footer-left p strong{
    font-size: var(--body-font-size);
    font-weight: 600;
  }
  .mini-footer-info {
    display: flex;
    font-size: var(--body-font-size);
  }
  
  .mini-footer-info  a{
    color:var(--white);
    text-decoration: none;
  }
  .mini-footer-info a:hover{
    text-decoration: underline;
  }
  .mini-footer-wa{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background-color:var(--dark);
    color:#fff;
    text-decoration:none;
    padding:12px 20px;
    border-radius:5px;
    font-size: var(--body-font-size);
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .mini-footer-wa:hover{
    background-color:var(--light-beige);
    color: var(--text);
  }
  .mini-footer-wa svg path{
    transition: 0.3s;
  }
   .mini-footer-wa:hover svg path{
    fill: var(--text);
   }
   .mini-footer-right{
    font-size: 15px;
   }
  /* ===================================================================
     Sample-request page
  =================================================================== */
  .offerte-rating-avatars{
    display:flex;
    align-items:center;
    flex-shrink:0;
  }
  .offerte-rating-avatars img{
    height:26px;
    width:auto;
  }
  .offerte-rating-body{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    line-height:1.3;
  }
  .offerte-rating-top{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .sample-card h3{
    margin-bottom:4px;
  }
  .sample-card > h3:nth-of-type(2){
    margin-top:34px;
    margin-bottom:18px !important;
  }
  .sample-type-picker{
    margin-top:16px;
  }
  /* Hide the native checkbox but keep it focusable */
  .sample-type-picker .pick-card input{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }

  /* Default footer: note + two buttons */
  .sample-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
    padding-top:10px;
  }
  /* class display must not defeat the hidden attribute */
  .sample-actions[hidden],
  .sample-proof[hidden]{
    display:none;
  }
  .sample-actions p{
    font-size:var(--body-sm-font-size);
    color:#8a7f70;
  }
  .sample-actions-right{
    display:flex;
    align-items:center;
    gap:12px;
  }

  /* Alternative footer: proefontwerp */
  .sample-proof[hidden]{ display:none; }
  .sample-proof{
    margin-top:60px;
  }
  .sample-proof-grid{
    display:grid;
    grid-template-columns:200px 1fr;
    gap:18px;
    margin-bottom:22px;
    align-items:start;
    margin-top: 18px;
  }
  .sample-proof-grid .quote-field{ margin-bottom:0; }

  .mini-footer-right a{
    color:#fff;
    text-decoration: none;
  }
  .mini-footer-right a:hover{
    text-decoration: underline;
  }

  /* ===================================================================
     Bedankt (thank you) page
  =================================================================== */
  .thanks-hero{
    position:relative;
    background:var(--coral);
    padding:60px 0 30px;
    overflow:hidden;
  }

  .thanks-hero:before{
    content: url(../media/confeti-element.svg);
    width: auto;
    height: auto;
    position: absolute;
    background: none;
    z-index: 0;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
  }
  .thanks-hero .container{
    position: relative;
    z-index: 2;
  }
  .thanks-confetti{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:min(760px,70%);
    height:auto;
    pointer-events:none;
    z-index:1;
  }
  /* De p volgt de gedeelde regelafstand van 1,41; alleen de terugkeerlink
     houdt zijn eigen 1,55. */
  .thanks-hero .offerte-nav{
    color:#fff;
    font-size:var(--body-font-size);
    line-height:1.55;
    margin-bottom:8px;
  }
  .thanks-hero p{
    color:#fff;
    font-size:var(--body-font-size);
    margin-bottom:8px;
  }
  .thanks-ref{
    display:inline-block;
    background:#fff;
    color:var(--text);
    font-size:var(--body-sm-font-size);
    padding:4px 10px;
    border-radius:3px;
  }

  /* Status + wachtcards, over het sokkenpatroon */
  .thanks-status{
    padding:120px 0 0px;
    position: relative;
  }
  .thanks-status:before{
    content: '';
    background: #fff url(../media/socks-bg-repeat.svg) center 6% / cover no-repeat;
    width: 100%;
    height: calc(100% + 12%);
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
  }
  .thanks-status h2,
  .suggestion-outer h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    color:var(--text);
  }
  /* rest van de oude .thanks-title-rule werd al door .banner-section h1
     overschreven; alleen deze marge was effectief */
  .thanks-hero h1{
    margin-bottom:6px;
  }
  .thanks-status > .container > h2{
    text-align:center;
    margin-bottom:30px;
  }
  .thanks-steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:109px;
    max-width:1000px;
    margin:0 auto 130px;
    text-align:center;
  }
  .thanks-step-dot{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1.5px solid var(--text);
    color:var(--text);
    font-size:calc(var(--body-sm-font-size) + 2px);
    margin-bottom:20px;
  }
  .thanks-step.is-done .thanks-step-dot{
    background:var(--green);
    border-color:var(--green);
  }
  .thanks-step h3{
    font-size:var(--body-lg-font-size);
    font-weight:600;
    color:var(--text);
    margin-bottom:7px;
  }
  .thanks-step p{
    font-size:var(--body-font-size);
    color:var(--text);
    margin:0 auto;
  }
  .suggestion-outer h2{
    margin-bottom:29px;
  }
  .wait-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    align-items:start;
    z-index: 1;
    position: relative;
  }
  .wait-card{
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid var(--dark);
    border-radius:25px;
    padding:10px;
    text-decoration:none;
    color:var(--text);
    transition:border-color .2s, box-shadow .2s, transform .2s;
  }
  .wait-card:hover{
    border-color:#d9cfc0;
    box-shadow:0 14px 34px rgba(0,0,0,.08);
    transform:translateY(-3px);
  }
  .wait-img{
    width:100%;
    height:340px;
    border-radius:15px;
    overflow:hidden;
    background:#f0f0f0;
  }
  .wait-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .wait-body{
    padding:20px 10px 10px;
    display:flex;
    flex-direction:column;
    flex:1;
  }
  .wait-tag{
    align-self:flex-start;
    background:var(--light-beige);
    font-size:var(--body-sm-font-size);
    text-transform:uppercase;
    font-weight: 500;
    padding:2px 7px;
    border-radius:3px;
    margin-bottom:10px;
  }
  .wait-body h3{
    font-size:var(--h5-font-size);
    font-weight:700;
    margin-bottom:7px;
  }
  .wait-body p{
    font-size:var(--body-font-size);
    color:var(--text);
    margin-bottom:20px;
  }
  .wait-link{
    margin-top:auto;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    font-size:var(--body-font-size);
    transition:gap .2s;
  }
  .wait-card:hover .wait-link{ gap:12px; }

  /* Volg ons voor inspiratie */
  .follow{
    position:relative;
    margin-top: -285px;
  }
  /* MASK-FALLBACK (2026-08-07, laatste mask van de site — zie Known issues):
     de mask rendert onbetrouwbaar in Chrome/macOS (sectie werd onzichtbaar);
     large-sock-element.svg bevat de foto al en dient nu als direct background */
  .follow-outer-main{
    display: flex;
    align-items: flex-end;
    background: url(../media/large-sock-element.svg) no-repeat center top;
    background-size: cover;
    height: 1000px;
    padding:300px 0 75px;
  }
  .follow-inner{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content: flex-start;
    flex-wrap:wrap;
    gap:69px;
  }
  .follow-left h2{
    color:#fff;
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    margin-bottom:8px;
  }
  .follow-left p{
    color:#fff;
    font-size:var(--body-font-size);
    margin-bottom:20px;
  }
  .follow-socials{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .follow-social{
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:var(--dark);
    color:#fff;
    text-decoration:none;
    font-size:var(--body-font-size);
    padding:17px 25px;
    border-radius:5px;
    transition:transform .2s;
  }
  .follow-social svg {
    margin-top: -4px;
  }
  .follow-social:hover{ transform:translateY(-2px); }

  .newsletter-card{
    background:#fff;
    border-radius:15px;
    padding:50px;
    width:min(580px,100%);
    border: 2px solid var(--dark);
  }
  .newsletter-card h3{
    font-size:var(--h5-font-size);
    font-weight:700;
    color:var(--text);
    margin-bottom:20px;
  }
  .newsletter-input{
    margin-bottom:20px;
    border: 1.5px solid var(--dark);
    padding: 5px 20px;
  }
  .newsletter-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
  }
  .newsletter-check{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:var(--body-font-size);
    color:var(--text);
    line-height:1.35;
    cursor:pointer;
  }
  .newsletter-check input{
    width:20px;
    height:20px;
    margin-top:2px;
    accent-color:var(--text);
    flex-shrink:0;
  }

  .newsletter-input::placeholder{
    color: var(--text);
  }

  /* ===================================================================
     Configurator page
  =================================================================== */

  .configurator-banner{
    padding: 196px 20px 26px;
  }
  
  .conf-hero{
    position:relative;
    background:var(--coral);
    padding:60px 0 70px;
    overflow:hidden;
  }
  .conf-hero-head{
    position:relative;
    z-index:2;
    text-align:center;
  }
  .conf-title{
    color:#fff;
    font-family:var(--roc-grotesk-condensed);
    font-weight:800;
    text-transform:uppercase;
    font-size:var(--h1-font-size);
    line-height:1;
    margin-bottom:16px;
  }
  .configurator-banner p{
    color:#fff;
    font-size:var(--body-font-size);
    margin-bottom:24px;
  }
  .conf-hero-btns{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:25px;
  }
  .configurator-banner .banner-bottom-info{
    margin-bottom: 20px;
  }
  /* White preview canvas + floating promo */

  .configurator-section{
    position: relative;
  }
  .configurator-section:before{
    content: "";
    background: var(--coral);
    width: 100%;
    height: 53.4%;
    position: absolute;
    top: 0;
    left: 0;
  }
  /* Witte sok-doodles rond de preview (XD dev 2026-08-12): rechts de
     trio-export van de PDP-designsectie (zelfde PNG), links één sok als
     CSS-crop uit diezelfde PNG (geen losse witte single-export in media —
     vervangen zodra er een echte export is). Banden verbergen ze (alleen
     1920-ontwerp, zelfde patroon als PDP's design-duddle-sock). Kaart is
     z2 — doodles z1 vallen erachter. */
  .configurator-section .conf-duddle-r{
    position:absolute;
    right:2%;
    top:-70px;
    z-index:1;
  }
  .configurator-section .conf-duddle-l{
    position:absolute;
    left:6%;
    top:115px;
    width:180px;
    height:105px;
    background:url(../media/pdp-duddle-configurator.png) no-repeat -119px -475px;
    z-index:1;
  }
  /* Sokkenpatroon-tegel (XD dev 2026-08-12): zelfde bg-element.png als home's
     impact, achter de witte onderhelft van de preview-sectie én heel
     "Zo werkt het". z:-2 — de blauwe conf-bg-shape (z:-1) van de types-sectie
     valt er overheen, precies als in het XD; coral :before en content dekken
     de rest. Banden verbergen het patroon (alleen 1920-ontwerp). */
  .configurator-section:after{
    content:"";
    position:absolute;
    inset:0;
    background:url(../media/bg-element.png);
    z-index:-2;
  }
  .conf-works:before{
    content:"";
    position:absolute;
    inset:0;
    background:url(../media/bg-element.png);
    z-index:-2;
  }
  .conf-preview{
    position:relative;
    z-index:2;
    max-width:1140px;
    margin:0 auto;
  }
  .conf-preview-card{
    background:#f7f7f7;
    border-radius:35px;
    height:620px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 22px 50px rgba(0,0,0,.14);
    overflow:hidden;
  }
  .conf-preview-card img{
    max-width:100%;
    height:auto;
  }
  .conf-preview-button {
    width: max-content;
    display: flex;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: -22px;
    background: var(--yellow);
    border: none;
    font-size: var(--body-font-size);
    padding: 13px 25px;
    border-radius: 50px;
    font-weight: 600;
    font-family: var(--roc-grotesk);
    transition: 0.2s ease-in-out;
    cursor: pointer;
    text-decoration: none;
    color: var(--dark);
  }
  .conf-preview-button:hover{
    background: #F3CF4D;
    bottom: -19px;
  }
  .configurator-section ul{
    position:relative;
    z-index:2;
    list-style:none;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px 60px;
    margin-top:80px;
  }
  .configurator-section ul li{
    position:relative;
    padding-left:20px;
    color:var(--text);
    font-weight:500;
  }
  .configurator-section ul li h5{
    font-size:calc(var(--h5-font-size) - 2px);
    font-family: var(--roc-grotesk-condensed);
    font-weight: 500;
    text-transform:uppercase;
    margin-bottom: 8px;
  }
  .configurator-section ul li p{
    font-size: var(--body-font-size);
    font-weight: 400;
  }
  .configurator-section ul li::before{
    content: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");;
    position:absolute;
    left:0;
    top:1px;
    color:var(--yellow);
    font-size:15px;
  }

  /* Zo werkt het */
  .conf-works{
    background: transparent;
    padding-top:120px;
  }
  .conf-works > .container > h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    /* spec 2026-08-12: 46px op 1920 = exact het h2-token (was h3-token);
       banden pinnen de oude waardes — alleen 1920 */
    font-size:var(--h2-font-size);
    color:var(--text);
    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:0px;
  }
  .conf-check{
    background:var(--light-beige);
    border-radius:14px;
    padding:50px;
    margin-top:22px;
    border: 1px solid var(--green);
  }
  .conf-check h5{
    display:block;
    font-weight:700;
    font-size:var(--h5-font-size);
    margin-bottom:8px;
  }
  .conf-check p{
    font-size:var(--body-font-size);
    color:var(--text);
    margin-bottom:25px;
  }
  .conf-check-sub{
    display:block;
    font-weight:600;
    font-size:var(--body-lg-font-size);
    color:var(--text);
    margin-bottom:12px;
  }
  .conf-check-btns{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .conf-check-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--dark);
    border:1px solid var(--dark);
    border-radius:5px;
    padding:14px 18px;
    text-decoration:none;
    color:var(--white);
    font-size:var(--body-font-size);
    transition:border-color .2s, transform .2s;
    height: 46px;
  }
  .conf-check-btn:hover{
    border-color:var(--text);
    transform:translateY(-2px);
  }
  .conf-check-btn svg{
    width: 21px;
  }

  .conf-works .process-inner{
    width: 66%;
    padding: 0 0px;
  }
  .conf-works .process-split-inner{
    align-items: end;
  }

  /* Met welk type sok start je? */
  .conf-types{
    padding:276px 0 80px;
    position: relative;
  }
  /* Sokkenpatroon óók onder de types-sectie (spec 2026-08-12): z:-2 onder de
     blauwe conf-bg-shape (z:-1) — de shape blijft, het patroon vult de witte
     stukken eromheen. Banden verbergen het (alleen 1920-ontwerp). */
  .conf-types:before{
    content:"";
    position:absolute;
    inset:0;
    background:url(../media/bg-element.png);
    z-index:-2;
  }
  /* wrapper-div (2026-08-05, was <img>): svg op NATUURLIJKE schaal (1920
     breed) — schaalt niet mee, snijdt op smallere schermen aan de zijkanten */
  .conf-bg{
    width: 100%;
    height: 1355px;
    position: absolute;
    top: -28%;
    left: 0;
    background: url(../media/bg-blue-shape.svg) no-repeat top center;
    z-index: -1;
  }
  .conf-types h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h3-font-size);
    color:var(--text);
    margin-bottom:34px;
  }
  .conf-types .collection-cta{
    display:flex;
    justify-content:center;
    margin-top:34px;
  }

  /* Door onze klanten ontworpen — losse indigo sectie */
  .cases.conf-designed{
    padding:160px 0 80px;
    overflow: visible;
  }
  .cases.conf-designed:before{
    content: '';
    background: var(--blue);
    width: 100%;
    height: calc(100% + 20%);
    position: absolute;
    left: 0;
    top: -12%;
    z-index: -2;
  }
  .cases.conf-designed .designed{
    margin-top:0;
    overflow: hidden;
     padding-bottom: 70px;
  }
  .cases.conf-designed .designed::before{
    display: none;
  }



  .cases.cases-solid{
    background: var(--light-beige);
    overflow: visible;
  }
  .case-sock-right{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .case-duddle-icons .dubble-left {
    position: absolute;
    top: -22%;
    left: 31%;
    width: 344px;
    height: auto;
  }
  .case-duddle-icons .dubble-right {
    position: absolute;
    bottom: -15%;
    right: 4%;
    width: 380px;
    height: auto;
    z-index: 2;
  }
  .cases.cases-solid:before{
    display: none;
  }
  .cases.cases-solid .case-section-outer h2, .cases.cases-solid .case-text h3, .cases.cases-solid .case-text ul, .cases.cases-solid .case-link{
    color: var(--text);
  }
  .cases.cases-solid .cases-nav button, .testimonial-light .cases-nav button, .cases.cases-pdp .cases-nav button, .testimonial-yellow .cases-nav button{
    border-color: var(--text);
  }
  .cases.cases-solid .cases-nav button svg path, .cases.cases-solid .case-link svg path, .testimonial-light .cases-nav button svg path, .testimonial-light .case-link svg path, .cases.cases-pdp .cases-nav svg path, .testimonial-yellow .cases-nav svg path{
    stroke: var(--text);
  }

  .cases-solid .case-text {
    flex: 0 0 33%;
  }
 
  .testimonial-light{
    background: var(--light-beige);
  }
  
  .testimonial-light .testimonial-head h2{
    color: var(--text);
  }
  .testimonial-light .testimonial-rating{
    color: var(--text);
  }
  
  .brand-intro-yellow{
    background: var(--yellow);
    padding: 113px 0 122px;
  }
  /* ===================================================================
     Werkwijze page
  =================================================================== */
  /* Zo werkt het, stap voor stap */
  .steps-section{
    position:relative;
    /* background:var(--light-beige); */
    padding:120px 0;
    overflow: hidden;
  }
  .steps-section h2{
    text-align:center;
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    color:var(--text);
    margin-bottom:30px;
  }
  /* Step cards */
  .swiper.steps-swiper{
    overflow:visible;
  }
  .steps-swiper .swiper-slide{
    height:auto;
  }
  .step-card{
    height:100%;
    display:flex;
    flex-direction:column;
  }
  .step-card-img{
    height:420px;
    border-radius:35px;
    background:var(--light-beige);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
    overflow: hidden;
  }
  .step-card-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .step-card-ph{
    background:var(--light-beige);
    color:var(--text);
    font-size:var(--body-sm-font-size);
    text-transform:uppercase;
    letter-spacing:.04em;
    padding:6px 14px;
    border-radius:5px;
  }
  .step-card-body{
    display:flex;
    gap:80px;
    align-items:start;
    padding: 0 50px;
  }
  .step-card-num{
    font-size:var(--body-lg-font-size);
    font-family: var(--roc-grotesk-condensed);
    font-weight: 600;
    width: max-content;
  }
  .step-card-body h5{
    font-weight:700;
    color:var(--text);
    margin-bottom:6px;
  }
  .step-card-body p{
    font-size:var(--body-font-size);
    color:var(--text);
  }
  .steps-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
    margin:35px 0 0px;
  }
  .steps-nav button{
    width:55px;
    height:40px;
    border:1.5px solid var(--text);
    background:transparent;
    border-radius:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .2s;transition:background .2s, border-color .2s, transform .2s;
    transform: translateY(0px);
  }
  .steps-nav button:hover{
    background:var(--light-beige);
    border-color:var(--text);
    transform: translateY(-2px);
  }
  .steps-count{
    font-size:var(--body-sm-font-size);
  }
  .steps-section > :is(.container, .container-md) > ul{
    margin-top: 80px;
  }

  /* Prijscalculator op roze */
  .calculator-pink{
    background:var(--pink);
    padding-bottom:120px;
  }

  .brand-intro-yellow .brand-duddle-icons .dubble-left {
    top: -15.5%;
     width: 250px;
  }
  .brand-intro-yellow  .brand-duddle-icons .dubble-right {
    width: 250px;
  }

  .cases.cases-bg-pink{
    padding-bottom: 0;
  }
  .cases.cases-bg-pink .designed::before{
    background: var(--pink);
  }

  .brand-light{
    background: var(--white);
    padding: 150px 0 120px;
  }

  .brand-light .brand-duddle-icons .dubble-left {
    top: 0;
    left: 5%;
    width: auto;
  }
  .brand-light .brand-duddle-icons .dubble-right {
      bottom: -15%;
      right: 4%;
      width: auto;
  }

  /* ===================================================================
     Inspiratie / Reviews en cases page
  =================================================================== */
  .simple-hero{
    background:var(--light-beige);
    padding:85px 0 88px;
  }
  .simple-hero-content{
    text-align:center;
    padding-top:55px;
  }
  .simple-hero-content h1{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    color:var(--text);
    margin-bottom:20px;
  }
  .simple-hero-content p{
    font-size:var(--body-font-size);
    color:var(--text);
    width: 50%;
    margin: 0px auto;
  }

  /* Cases overzicht */
  .case-grid-section{
    background:#fff;
    padding:90px 0 70px;
  }
  .case-grid-section h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    color:var(--text);
    margin-bottom:20px;
  }
  .case-filters{
    display:flex;
    flex-wrap:wrap;
    gap:14px 100px;
    margin-bottom:40px;
  }
  .case-filter{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px;
  }
  .case-filter-label{
    font-size:var(--body-font-size);
    color:var(--text);
    margin-right:7px;
  }
  .chip{
    border:1px solid var(--dark);
    background:#fff;
    border-radius:30px;
    padding:11px 22px;
    font-size:calc(var(--body-sm-font-size) + 2px);
    color:var(--text);
    cursor:pointer;
    transition:background .2s, color .2s, border-color .2s;
  }
  .chip:hover{ 
    background: var(--light-beige); 
  }
  .chip.is-active{
    background:var(--text);
    border-color:var(--text);
    color:#fff;
    font-weight: 600;
  }

  .case-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px 20px;
  }
  .case-card{
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid var(--text);
    border-radius:25px;
    padding:10px 10px 4px;
    text-decoration:none;
    color:var(--text);
    transition:border-color .2s, box-shadow .2s, transform .2s;
  }
  .case-card[hidden]{ display:none; }
  .case-card:hover{
    box-shadow:0 14px 30px rgba(0,0,0,.08);
    transform:translateY(-3px);
  }
  .case-card-img{
    width:100%;
    height:395px;
    border-radius:15px;
    overflow:hidden;
    background:#f0f0f0;
    outline: 1px solid #dddd;
  }
  .case-card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .case-card-body{
    padding:20px 10px 10px;
    display:flex;
    flex-direction:column;
    flex:1;
  }
  .case-card-tags{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-bottom:20px;
  }
  .case-card-tags span{
    background:var(--light-beige);
    font-weight: 500;
    text-transform:uppercase;
    padding:2px 5px;
    border-radius:3px;
    font-size: var(--body-sm-font-size);
    letter-spacing: 0.5px;
  }
  .case-card-body h5{
    font-weight:700;
    margin-bottom:10px;
  }
  .case-card-body p{
    font-size:var(--body-font-size);
    margin-bottom:15px;
  }
  .case-card-link{
    margin-top:auto;
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-weight:600;
    font-size:var(--body-font-size);
    transition:gap .2s;
  }
  .case-card:hover .case-card-link{ gap:11px; }

  .case-grid-section .container > p{
    text-align:center;
    padding:40px 0;
    color:var(--text);
    font-size:var(--body-font-size);
  }
  .case-grid-section .container > p[hidden]{ display:none; }
  .case-more{
    display:flex;
    justify-content:center;
    margin-top:34px;
  }

  /* Blogoverzicht — leunt op de opmaak van het cases-overzicht hierboven.
     Alleen dit wijkt af: de filterchips staan nog op het beige vlak en
     gecentreerd, en het raster heeft drie kolommen in plaats van vier. */
  .simple-hero.blog-hero{
    /* minder ruimte onderaan dan .simple-hero: de chips vullen die nu */
    padding-bottom:55px;
  }
  .simple-hero.blog-hero .simple-hero-content{
    margin-bottom:30px;
  }
  .blog-filter{
    justify-content:center;
    gap:11px;
  }
  .case-grid.blog-grid{
    grid-template-columns:repeat(3,1fr);
    z-index: 1;
    position: relative;
  }
  .case-grid-section.blog-grid-section{
    /* De sokkenfoto van de slot-CTA staat absoluut bóven die sectie (79%
       van de CTA-hoogte; nagemeten 330px op 1440). Met de standaard 70px
       eronder lag hij over de onderste kaartenrij; hier hoort hij onder de
       kaarten te beginnen, zoals in het ontwerp. Vanaf 1680px stijgt de
       foto naar 90% (~400px) — die band krijgt extra ruimte onderaan
       responsive.css. */
    padding-bottom:190px;
  }
  /* Op het blogoverzicht is de achtergrond achter de sokken en de rode
     diagonaal WIT, niet beige (ontwerp; op andere pagina's sluit het beige
     juist aan op de beige sectie erboven). */
  main.blogs .cta-final{
    background:#fff;
  }
  .blog-leeg{
    text-align:center;
    font-size:var(--body-font-size);
    color:var(--text);
  }


  /* ---- Optieoverzicht (/opties/) ----
     Zelfde kaart als het cases- en blogoverzicht; alleen het kolomaantal is
     anders. Drie kolommen is het ritme van het ontwerp, maar bij precies
     vier kaarten zou er eentje alleen op de tweede rij belanden — die zet de
     sectie zelf op vier kolommen (.optie-grid-4). Omdat beide selectors
     specifieker zijn dan .case-grid, moet het kolomaantal per band expliciet
     mee-afschalen; dat staat in responsive.css. */
  .case-grid.optie-grid{
    grid-template-columns:repeat(3,1fr);
  }
  .case-grid.optie-grid-4{
    grid-template-columns:repeat(4,1fr);
  }

  /* ---- Blogdetail ---- */
  .simple-hero.blog-detail-hero{
    /* De halve-foto-overlap zit niet meer hier maar in .blog-foto-band
       (beige/wit-verloop): de eerdere calc met min() en een factor pakte
       per omgeving verschillend uit. Hier alleen nog wat lucht tussen de
       metaregel en de foto. */
    padding-bottom:30px;
  }
  .simple-hero.blog-detail-hero .simple-hero-content{
    margin-bottom:18px;
  }
  .simple-hero.blog-detail-hero .simple-hero-content h1{
    /* Blogkoppen zijn lang; in het ontwerp breken ze over twee regels in
       plaats van de volle containerbreedte te vullen. Even breed als de
       uitgelichte foto eronder, dan staan ze samen in één kolom. */
    max-width:880px;
    margin-left:auto;
    margin-right:auto;
  }
  .blog-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:var(--body-sm-font-size);
    color:var(--text);
  }
  .blog-meta-auteur span{
    font-weight:600;
    text-decoration:underline;
  }
  .blog-meta-punt{ opacity:.6; }
  .blog-meta-tags{
    /* margin-bottom:0 is de echte fix: .case-card-tags geeft 20px mee en in
       deze gecentreerde flexrij schoof de hele taggroep daardoor ~10px
       omhoog t.o.v. de auteursregel (melding Kulwant: opmaak klopt niet). */
    margin-left:24px;
    margin-bottom:0;
  }
  .blog-meta-tags span{
    /* In de kaarten zijn de tags beige op wit; hier staan ze op het beige
       herovlak en zijn ze in het ontwerp juist WIT met een zachte schaduw
       (aanwijzing Kulwant met ontwerpuitsnede). */
    background:#fff;
    box-shadow:0 2px 6px rgba(40,18,27,.15);
    padding:4px 10px;
    font-weight:600;
  }

  .blog-artikel{
    background:#fff;
    padding:0 0 90px;
  }
  /* Band achter de uitgelichte foto: bovenste helft beige (aansluitend op
     de hero erboven), onderste helft wit. De foto staat er gewoon in de
     flow middenin — geen negatieve marges, dus exact 50/50 in elke
     browser en op elke breedte. */
  .blog-foto-band{
    background:linear-gradient(to bottom, var(--light-beige) 50%, #fff 50%);
  }
  .blog-foto{
    width:min(1140px, 100%);
    margin:0 auto;
  }
  .blog-foto img{
    width:100%;
    /* 1140x620 uit het ontwerp */
    aspect-ratio:1140/620;
    object-fit:cover;
    border-radius:25px;
    display:block;
  }
  .blog-body{
    /* 850px conform het ontwerp (XD-meting Kulwant); was 720 */
    max-width:850px;
    margin:0 auto;
    padding-top:60px;
  }
  .blog-body p{
    font-size:var(--body-font-size);
    color:var(--text);
    margin-bottom:18px;
  }
  .blog-body p:last-child{ margin-bottom:0; }
  .blog-blok{ margin-top:34px; }
  .blog-body h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    color:var(--text);
    /* uit het ontwerp (aanwijzing Kulwant): kleiner dan de globale h2 */
    font-size:34px;
    line-height:38px;
    margin-bottom:12px;
  }
  .blog-body ul,
  .blog-body ol{
    margin:0 0 18px 20px;
    font-size:var(--body-font-size);
    line-height:1.65;
    color:var(--text);
  }
  .blog-body li{ margin-bottom:2px; }
  .blog-body a{ 
    color:var(--text); 
    text-decoration:underline;
    transition: 0.2s ease-in-out;
   }
  .blog-body a:hover{
    color: var(--coral);
  }
  .blog-body a.cta-light{
    text-decoration: none;
  }
  .blog-body a.cta-light:hover{
    color: var(--text);
  }
  /* Afbeeldingen uit de editor (media_upload staat aan op de blogvelden).
     Zelfde afronding als de uitgelichte foto, nooit breder dan de kolom. */
  .blog-body img{
    max-width:100%;
    height:auto;
    border-radius:15px;
    display:block;
    margin:24px auto;
  }
  .blog-body figure{
    margin:24px auto;
  }
  .blog-body figure img{ margin:0 auto; }
  .blog-body figcaption{
    font-size:var(--body-sm-font-size);
    color:var(--text);
    opacity:.7;
    text-align:center;
    margin-top:8px;
  }
  .blog-body h3{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    color:var(--text);
    /* een trapje onder de 34px van de h2 hierboven; met de oude
       koppeling aan --h2-font-size zou de h3 juist GROTER uitvallen */
    font-size:28px;
    line-height:32px;
    margin:26px 0 10px;
  }
  /* Fotorij uit het blok Foto's: 1 = volle breedte, 2-3 naast elkaar.
     Zelfde afronding als de overige blogbeelden. */
  .blog-fotos{
    display:grid;
    gap:20px;
    /* meer lucht onder de fotorij richting de tekst/review erna
       (aanwijzing Kulwant met ontwerpuitsnede) */
    margin:34px 0 52px;
  }
  .blog-fotos-2{ grid-template-columns:repeat(2,1fr); }
  .blog-fotos-3{ grid-template-columns:repeat(3,1fr); }
  /* 'Eerste foto vol': de eerste over beide kolommen, de rest in paren
     van 50/50 (voorbeeld Kulwant: 100 en daaronder 50-50). */
  .blog-fotos-groot{ grid-template-columns:repeat(2,1fr); }
  .blog-fotos-groot img:first-child{ grid-column:1 / -1; }
  /* Eén foto (of de grote eerste van 'eerste vol') in een breed 2:1-kader,
     zoals in het ontwerp — anders wordt een staande of vierkante foto
     schermvullend hoog (melding Kulwant met drone-foto). */
  .blog-fotos.blog-fotos-1 img,
  .blog-fotos-groot img:first-child{
    aspect-ratio:2 / 1;
    /* height:auto verslaat de algemene height:100% van .blog-fotos img —
       die vocht met de aspect-ratio en gaf een tussenmaat (1.80 gemeten) */
    height:auto;
  }
  .blog-fotos img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:15px;
    display:block;
    /* de algemene .blog-body img-regel geeft 24px marge — in het raster
       stapelde dat op de 20px gap tot ~70px tussen de rijen */
    margin:0;
    aspect-ratio: 1;
  }

  /* Reviewblok in het artikel — de kaartopmaak van de testimonials,
     maar dan als los blok met de persoon eronder (sokkies.com-structuur). */
  .blog-review{
    border:1px solid var(--text);
    border-radius:25px;
    padding:30px 34px;
    margin:34px 0;
  }
  .blog-review-quote{
    font-weight:600;
    margin-bottom:18px;
  }
  .blog-review-persoon{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .blog-review-persoon > img{
    width:56px;
    height:56px;
    /* contain i.p.v. cover: een logo mag niet worden bijgesneden (het
       OneTreePlanted-logo verloor zijn linkerrand — melding Kulwant) */
    object-fit:contain;
    /* geen afronding: in het ontwerp is het logo/de foto gewoon vierkant */
    border-radius:0;
    /* de algemene .blog-body img-regel centreert met margin:auto — in deze
       flexrij zou dat de vrije ruimte opslokken en alles naar het midden
       duwen */
    margin:0;
  }
  .blog-review-wie{
    display:flex;
    flex-direction:column;
  }
  .blog-review-wie span{
    font-size:var(--body-sm-font-size);
    opacity:.75;
  }
  .blog-review-sterren{
    margin-left:auto;
    color:var(--green);
    letter-spacing:1px;
  }

  .blog-scheiding{
    border:0;
    border-top:1px solid var(--border-light);
    margin:50px 0 40px;
  }
  .blog-slot h2{ margin-bottom:10px; }
  .blog-slot p{ margin-bottom:22px; }
  .blog-slot .cta-light{ display:inline-flex; }

  .blog-others{
    text-align:center;
  }
  /* Beige achtergrond MET dubbele class: de kale .case-others-regel verderop
     (background:#fff) won anders op bronvolgorde en de sectie werd wit —
     precies wat Kulwant op dev zag, terwijl het ontwerp hier beige is. */
  .case-others.blog-others{
    background:var(--light-beige);
  }
  /* De sokkenfoto van de slot-CTA steekt boven de CTA uit en zou anders
     over de eerste kaart liggen. BEWUST met dubbele class: de kale
     .case-others-regels (basis 120px, banden 90px) winnen anders op
     bronvolgorde. De brede banden krijgen meer, onderaan responsive.css. */
  .case-others.blog-others{
    padding-bottom:220px;
  }
  .blog-others .case-grid{ text-align:left; }

  .designed-beige:before{
    background: var(--light-beige);
  }
  .brands-beige{
    background: var(--light-beige);
    padding: 50px 0 40px;
  }

  /* ===================================================================
     Case-detail page (Sanquin & Sokkies)
  =================================================================== */
  /* Hoe het ging */
  .case-story{
    background:#fff;
    padding:76px 0;
  }
  /* Layout komt van .impact-inner / .impact-left / .impact-gallery (homepage) */
  .case-story-left{
    flex:1;
    padding: 0;
  }
  .case-story-left h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    color:var(--text);
    margin-bottom:10px;
  }
  .case-story-left h3{
    font-size:var(--h5-font-size);
    font-weight:700;
    color:var(--text);
    margin-bottom:12px;
    margin-top: 20px;
  }
  
  .case-story-left p{
    font-size:var(--body-font-size);
    color:var(--text);
    margin-bottom:20px;
  }
  .case-story-inner{
    gap: 70px;
    height: 100%;
    /* Tekst en collage beginnen op dezelfde hoogte (feedback 2026-09-11).
       .impact-inner centreert beide verticaal — dat is goed op de homepage,
       maar hier lopen de twee kolommen daardoor uit de pas: gemeten op 1680
       begon de tekst 84px boven de collage. Alleen deze sectie dus. */
    align-items: flex-start;
  }
  .impact-case-right {
    /* Kijkvenster waar de schuivende kolommen doorheen lopen; zonder vaste
       hoogte + overflow is er niets om doorheen te schuiven. */
    height: 540px;
    overflow: hidden;
    padding-left: 22px;
  }
  /* De casecollage heeft nog TWEE kolommen (was drie). Het raster erft
     repeat(3,1fr) van de homepage-versie; zonder deze regel bleef de derde
     kolom als lege ruimte staan — gemeten 349px op 1680. */
  .case-story-inner .impact-gallery{
    grid-template-columns:repeat(2,1fr);
  }
  /* LICHTE weergave: stilstaande fotorij van max 3 BOVEN het verhaal, over
     de volle containerbreedte (zie single-sokkies_case.php).
     auto-fit + 1fr laat de rij zich naar het AANTAL voegen: één foto vult
     de rij, twee delen hem, drie ook. Vaste kolommen zouden bij één of
     twee foto's een gat laten. */
  .case-story-licht .case-story-inner{
    /* geen fotokolom meer naast de tekst: het verhaal krijgt de volle breedte */
    display:block;
    height:auto;
  }
  .case-story-licht .case-story-left{
    padding-inline-start:0;
  }
  /* Vaste bandhoogte i.p.v. vierkant: over de VOLLE breedte wordt een
     vierkant absurd hoog — gemeten 765x765 bij twee foto's en 1545 bij één.
     Met een vaste hoogte verschilt alleen de breedte, dus 1, 2 en 3 foto's
     geven alle drie dezelfde nette band. */
  .case-story-licht .case-story-fotos img,
  .case-story-licht .case-story-fotos:has(img:only-child) img{
    aspect-ratio:auto;
    height:420px;
  }
  .case-story-fotos{
    margin-bottom:50px;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
    gap:16px;
    align-items:start;
  }
  .case-story-fotos img{
    display:block;
    width:100%;
    /* vierkant houdt de rij gelijk van hoogte, ongeacht de aanlevering */
    aspect-ratio:1 / 1;
    object-fit:cover;
    border-radius:25px;
        border: 1px solid #dddddd;
  }
  /* TWEE FOTO'S: gestapeld NAAST het verhaal in plaats van in een rij
     erboven. Over de volle breedte vullen twee foto's de rij wel, maar
     dan blijft de halve breedte naast de tekst leeg (gemeten 790px van
     de 1320px op 1440). De markup komt uit single-sokkies_case.php, die
     de fotorij bij precies twee foto's binnen .case-story-inner zet.
     SMAL (onder 992px) blijft alles zoals het was: kolomrichting met de
     foto's op order -1, dus weer boven de tekst — naast elkaar is daar
     geen ruimte voor. */
  .case-story-licht.case-story-duo .case-story-inner{
    display:flex;
    flex-direction:column;
  }
  .case-story-licht.case-story-duo .case-story-fotos{
    order:-1;
  }
  @media (min-width:992px){
    .case-story-licht.case-story-duo .case-story-inner{
      flex-direction:row;
      align-items:flex-start;
      gap:70px;
    }
    .case-story-licht.case-story-duo .case-story-fotos{
      order:0;
      /* vaste kolom: de tekst ernaast krijgt de rest via flex:1 */
      flex:0 0 55%;
      margin-bottom:0;
    }
    /* De 420px-bandhoogte is voor de VOLLE breedte; in een kolom van 40%
       zou dat een bijna vierkante uitsnede geven. Liggend 4:3 houdt de
       foto's in verhouding met de rij-variant. */
    .case-story-licht.case-story-duo .case-story-fotos img{
      height:auto;
      aspect-ratio:4 / 3;
    }
  }
  /* Eén foto vult anders een vierkant van de halve paginabreedte — dat
     wordt een torenhoog blok naast de tekst. Liggend staat daar beter. */
  .case-story-fotos:has(img:only-child) img{
    aspect-ratio:4 / 3;
  }

  /* Specs */
  .case-specs{
    background:#fff;
    padding:20px 0 60px;
  }
  .case-specs h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    color:var(--text);
    margin-bottom:30px;
  }
  .case-specs-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
  }
  .case-spec{
    background:var(--light-beige);
    border-radius:25px;
    padding:30px 40px;
    display:flex;
    flex-direction:column;
    gap:8px;
    height: 104px;
  }
  .case-spec-label{
    font-size:var(--body-sm-font-size);
    text-transform:uppercase;
  }
  .case-spec-value{
    font-size:var(--body-lg-font-size);
    font-weight:600;
    color:var(--text);
  }

  /* Resultaat in beeld + quote (indigo) */
  .case-result{
    position:relative;
    /* background: linear-gradient(#fff 20%, var(--light-cyan) 80%); */
    padding:60px 0 70px;
  }
  .case-result-bg{
    background:url(../media/bg-down-shape-blue.svg) no-repeat center top;
    background-size:cover;
    position: absolute;
    height: 79%;
    width: 100%;
    top: 32%;
    z-index: 1;
  }
  .case-result .container{
    position: relative;
    z-index: 5;
  }
  .case-result h2{
    text-align:center;
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    color:var(--text);
    margin-bottom:30px;
  }
  .case-result-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-bottom:140px;
    transform: rotate(-3.5deg);
  }
  .case-result-grid img{
    width:100%;
    height:560px;
    object-fit:cover;
    border-radius:14px;
    display:block;
    outline: 1px solid #dddd;
  }

  .case-quote{
    position:relative;
    max-width:66.3%;
    margin:0 auto;
    border:1.5px solid var(--pink);
    border-radius:14px;
    padding:56px 8.4%;
    text-align:center;
  }
  .case-quote-icon{
    position:absolute;
    top:-14%;
    left:50%;
    transform:translateX(-50%);
    width:60px;
    height:60px;
    border-radius:50%;
    background:var(--pink);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .case-quote h5{
    color:#fff;
    font-weight:700;
    line-height:1.28;
  }
  .case-quote-author{
    text-align:center;
    margin-top:45px;
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .case-quote-author p {
    font-size: var(--body-lg-font-size);
    font-family: var(--roc-grotesk-condensed);
    font-weight: 600;
    color: var(--pink);
    text-transform: uppercase;
  }
   .case-quote-author span{
    font-size: var(--body-sm-font-size);
    color: var(--white);
    text-transform: uppercase
   }

   .sock-duddle-object{
    position: absolute;
    bottom: 9%;
   }


  /* Andere samenwerkingen */
  .case-others{
    background:#fff;
    padding:200px 0;
  }
  .case-others h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    color:var(--text);
    margin-bottom:30px;
  }

  .cta-final-detail{
    background: var(--white);
  }
  .cta-final-detail .cta-final-feet{
    display: none;
  }

  /* ===================================================================
     Product-detail page (Reguliere sokken bedrukken)
  =================================================================== */
  .prod-hero{ padding-bottom:60px; }
  .prod-top{
    display:flex;
    gap:94px;
    align-items:start;
    margin-top:50px;
  }
  /* Gallery: grote afbeelding + thumbnailkolom ernaast */
  .prod-gallery{
    display:grid;
    grid-template-columns:740px 140px;
    gap:20px;
  }
  .prod-main{
    position:relative;
    border-radius:25px;
    overflow:visible;
    background:#fff;
    height:740px;
  }
  .prod-main img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:16px;
  }
  .prod-info{
    width: 600px;
  }
  /* Zwevende "Wat kost het?"-kaart over de afbeelding */
  .prod-cost{
    /* zwevend fixed linksonder (spec 2026-08-12, was absoluut aan .prod-main);
       zelfde anker als promo-float (20/20, z 99) — markup staat nu bij de
       pdp-sticky vóór de footer; ≤520 verbergt hem (sticky balk vervangt) */
    position:fixed;
    left:20px;
    bottom:20px;
    z-index:99;
    background:#fff;
    border-radius:25px;
    box-shadow:0 16px 36px rgba(0,0,0,.14);
    padding:18px 20px;
    width:max-content;
  }
  .prod-cost-title{
    display:block;
    font-weight:700;
    font-size:var(--body-lg-font-size);
    margin-bottom:12px;
  }
  .prod-cost .cta{
    display:block;
    width:100%;
    text-align:center;
  }
  .prod-thumbs{
    /* De gap staat als variabele omdat de hoogte van een thumb ermee
       rekent (zie .heeft-meer verderop); elke band die de gap wijzigt,
       wijzigt dus ook de rekensom mee. */
    --thumb-gap:10px;
    display:flex;
    flex-direction:column;
    gap:var(--thumb-gap);
  }
  .prod-thumb{
    position:relative;
    height:140px;
    border: 1px solid rgb(40 18 27 / 40%);
    border-radius:25px;
    overflow:hidden;
    padding:0;
    background:#fff;
    cursor:pointer;
  }
  
  .prod-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .prod-thumb.is-active{ 
    border:2px solid var(--coral); 
  }

  /* De pijlen bestaan alleen op desktop. Onder 992px veegt de bezoeker
     en is de afgesneden thumb aan de rand genoeg. Deze regel staat
     BEWUST vóór de @media hieronder: een media query telt niet mee voor
     de specificiteit, dus erna zou display:none ook op desktop winnen. */
  .prod-thumbs-nav{ display:none; }

  /* ===== Pijlen bij de fotostrip: vanaf 521px =====
     Overal waar de strip VERTICAAL staat, staan de pijlen erbij. Onder
     521px is het een horizontale rij die de bezoeker veegt; daar is de
     afgesneden thumb aan de rand het signaal en zijn knoppen overbodig.
     Standaard absoluut: in de banden 521-991 is .prod-gallery relatief en
     staat de strip rechts (width 110px). right:33px = (110 - 44) / 2, dus
     de knop staat midden boven de strip. Vanaf 992px wordt dit vervangen
     door een plek in het raster (zie verderop). */
  @media (min-width:521px){
    .prod-thumbs-nav{
      display:flex;
      align-items:center;
      justify-content:center;
      position:absolute;
      right:33px;
      z-index:2;
      width:44px;
      height:30px;
      padding:0;
      border:1.5px solid var(--dark);
      border-radius:7px;
      background:#fff;
      cursor:pointer;
      transition:all .2s;
    }
    .prod-thumbs-nav.is-vorige{ top:6px; }
    .prod-thumbs-nav.is-volgende{ bottom:6px; }
    /* Eén pijlfiguur uit de bestaande nav-familie, hier gedraaid naar
       boven en onder omdat deze strip verticaal loopt. */
    .prod-thumbs-nav.is-vorige svg{ transform:rotate(-90deg); }
    .prod-thumbs-nav.is-volgende svg{ transform:rotate(90deg); }
    /* zelfde hover als .gallery-nav en de andere pijl-navs */
    .prod-thumbs-nav:hover:not(:disabled){
      background:var(--light-beige);
      border-color:var(--dark);
      transform:translateY(-2px);
    }
    .prod-thumbs-nav:hover:not(:disabled) svg path{ stroke:var(--dark); }
    /* Een pijl die niets meer kan, gaat WEG in plaats van uitgegrijsd.
       De andere pijl-navs op de site staan op een egale achtergrond, daar
       leest opacity:.4 prima; hier ligt de knop op een foto en blijft er
       dan een spookknop over de eerste thumb staan. */
    .prod-thumbs-nav:disabled{ visibility:hidden; }
  }

  /* Meer dan 5 thumbnails paste niet: 5 x 140 + 4 x 10 = 740, precies de
     hoogte van .prod-main. Bij 6+ rekte de grid-rij mee en stak de strip
     onder de hoofdfoto uit (melding Kulwant, kerstsokken heeft er 10).
     height:0 haalt de kolom uit de rijberekening, min-height trekt hem
     daarna terug tot exact de rijhoogte — dus automatisch 740/590/445px,
     welke band-hoogte .prod-main ook heeft. Onder 992px is de galerij
     display:block met een eigen opzet, daar geldt dit niet. */
  @media (min-width:992px){
    .prod-thumbs{
      /* Expliciet in dezelfde cel als de pijlen. Die hebben een vaste
         plek (kolom 2, rij 1); zonder deze regel plaatst het raster de
         strip automatisch en belandt hij in een NIEUWE rij van 0px
         hoog, want expliciet geplaatste items gaan voor. */
      grid-column:2;
      grid-row:1;
      height:0;
      min-height:100%;
      overflow-y:auto;
      /* Scrollbar in de huisstijl, zelfde opzet als .compare-scroll:
         zachte ronde baan met een massieve accentduim. LET OP: zodra
         scrollbar-width gezet is, negeert Chrome de ::-webkit-regels
         hieronder volledig — die blijven staan voor Safari, dat de
         standaardeigenschappen niet kent. Beide dus GELIJK houden,
         anders ziet de ene browser iets anders dan de andere. */
    /* Geen zichtbare scrollbar: de pijlen wijzen de weg en de
       halve zesde thumb laat zien dat er meer is. */
    scrollbar-width:none;
    }
    /* Safari kent scrollbar-width niet, die heeft deze regel nodig. */
    .prod-thumbs::-webkit-scrollbar{ display:none; }
    /* niet laten krimpen wanneer de kolom scrollt */
    .prod-thumb{ flex:0 0 auto; }

    /* MEER DAN VIJF FOTO'S: LAAT ZIEN DAT ER MEER IS.
       Vijf thumbs plus vier gaps zijn samen precies zo hoog als de
       hoofdfoto, dus de zesde begon exact onder de rand: er was niets
       van te zien en niets wees erop dat de strip scrolt (R2-9).
       Nu passen er 5,5 in dezelfde hoogte, zodat de zesde half in beeld
       staat — de afgesneden thumb is het signaal. De rekensom: vijf en
       een halve thumb plus vijf gaps vullen de hoogte samen.
       Alleen bij zes of meer; de klasse komt uit de template, die het
       aantal foto's gewoon kan tellen. Bij vijf of minder blijft alles
       exact zoals het was. */
    .prod-thumbs.heeft-meer .prod-thumb{
      height:calc((100% - 5 * var(--thumb-gap)) / 5.5);
    }

    /* Op desktop is .prod-gallery een raster: de pijlen krijgen dezelfde
       cel als de strip (kolom 2, rij 1) en liggen er dus overheen, zonder
       dat er iets hoeft te worden nagerekend. In de smallere banden staat
       de strip absoluut en gebeurt dat hierboven met right/top/bottom. */
    .prod-thumbs-nav{
      position:static;
      grid-column:2;
      grid-row:1;
      justify-self:center;
      right:auto;
    }
    .prod-thumbs-nav.is-vorige{ top:auto; align-self:start; margin-top:6px; }
    .prod-thumbs-nav.is-volgende{ bottom:auto; align-self:end; margin-bottom:6px; }
  }


  .prod-thumb-play{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:32px; height:32px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-left:2px;
    box-shadow:0 4px 12px rgba(0,0,0,.2);
  }

  /* USP-rij onder de galerij */
  /* 1920 (spec 2026-08-12): rij gecentreerd op de PAGINA i.p.v. de
     gallery-kolom — shift = (containerbreedte − kolombreedte)/2, met de
     .container-formule zodat hij 1681-1999 meeschaalt; de banden pinnen
     left:0 (verzoek: alleen 1920) */
  .pdp-usps-main{
    position:relative;
    left:calc((min(1720px, 100vw - 120px) - 100%) / 2);
  }
  .pdp-usps-main ul{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 30px;
    margin-top:50px;
  }
  .pdp-usps-main ul li{
    position:relative;
    padding-left:16px;
    font-size:var(--body-font-size);
    text-transform:uppercase;
    letter-spacing:.03em;
    font-family: var(--roc-grotesk-condensed);
    font-weight:500;
    color:var(--text);
  }
  .pdp-usps-main ul li::before{
    content:url("data:image/svg+xml,%3Csvg%20id%3D%22Sock_usp%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2210.779%22%20height%3D%2214%22%20viewBox%3D%220%200%2010.779%2014%22%3E%3Cg%20id%3D%22Laag_1%22%3E%3Cg%20id%3D%22Group_511%22%20transform%3D%22translate(0%200)%22%3E%3Cpath%20d%3D%22M2.3%2C7.176.115%2C11.715a1.652%2C1.652%2C0%2C0%2C0%2C.909%2C2.135%2C1.613%2C1.613%2C0%2C0%2C0%2C2.1-.922l2.683-5.8a.673.673%2C0%2C0%2C0-.007-.51L3.112.4A.652.652%2C0%2C0%2C0%2C2.251.054L.48.83A.669.669%2C0%2C0%2C0%2C.138%2C1.7L2.3%2C6.665a.673.673%2C0%2C0%2C1%2C.007.51%22%20transform%3D%22translate(4.921%200)%22%20fill%3D%22%23fa4a45%22/%3E%3Cpath%20d%3D%22M2.3%2C7.176.115%2C11.715a1.652%2C1.652%2C0%2C0%2C0%2C.909%2C2.135%2C1.613%2C1.613%2C0%2C0%2C0%2C2.1-.922l2.683-5.8a.673.673%2C0%2C0%2C0-.007-.51L3.114.4A.652.652%2C0%2C0%2C0%2C2.252.054L.481.831a.669.669%2C0%2C0%2C0-.342.874L2.3%2C6.666a.673.673%2C0%2C0%2C1%2C.007.51%22%20transform%3D%22translate(0%20.033)%22%20fill%3D%22%23fa4a45%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    position:absolute;
    left:0; top:2px;
    color:var(--coral);
    font-weight:700;
  }

  /* Info */
  .prod-info h1{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    color:var(--text);
    margin-bottom:12px;
  }
  .prod-info p{
    font-size:var(--body-font-size);
    color:var(--text);
    margin-bottom:25px;
  }
  /* Ruimte TUSSEN de alineas van de beschrijving korter (verzoek Kulwant
     2026-08-25: compacter). De LAATSTE alinea houdt zijn marge, want die
     bepaalt de afstand tot de ratingregel eronder. Deze selector heeft een
     hogere specificiteit dan .prod-info p, dus hij wint ook van de
     band-overrides in responsive.css (die zetten 20/30/33px) zonder dat we
     die banden een voor een hoeven aan te passen. */
  .prod-info p:not(:last-of-type){
    margin-bottom:12px;
  }
  .prod-spec-link{
    color:var(--coral);
    font-weight:600;
    text-decoration:underline;
    white-space:nowrap;
  }
  /* WP-toevoeging 2026-08-25: Beschrijving is een wysiwyg-veld geworden, dus
     hier komen nu links en opsommingen uit de editor. Het ontwerp kende die
     niet, dus er was geen enkele regel voor: een link kwam browser-blauw en
     de bullets vielen buiten de tekstkolom (de globale reset zet padding op
     0). Roze + 600 is dezelfde conventie als redacteurslinks in de FAQ- en
     spec-teksten; de achtergrond is hier net zo licht. .prod-spec-link is
     zelf ook een <a> in diezelfde alinea en houdt zijn coral — vandaar de
     :not(). */
  .prod-info p a:not(.prod-spec-link){
    color:var(--pink);
    font-weight:600;
  }
  .prod-info ul,
  .prod-info ol{
    margin:0 0 25px;
    padding-left:32px;
  }
  .prod-info ul{ list-style:disc outside; }
  .prod-info ol{ list-style:decimal outside; }
  .prod-info li{
    font-size:var(--body-font-size);
    line-height:1.55;
    color:var(--text);
  }
  .prod-rating{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:var(--body-sm-font-size);
    margin-bottom:30px;
  }
  .prod-rating-score{ 
    font-weight:600;
    font-size: var(--body-font-size); 
  }
  .prod-rating-stars{ color:#1DD665; letter-spacing:1px; }
  .prod-rating a{ 
    color:var(--text); 
    font-size: calc(var(--body-lg-font-size) + 1px);
    font-family: var(--juniper-bay);
  }

  .prod-price-title{
    display:block;
    font-weight:600;
    font-size:var(--body-lg-font-size);
    color:var(--text);
    margin-bottom:12px;
  }
  /* De typenaam naast de staffelkop staat ALLEEN op mobiel (ontwerp);
     op de bredere schermen staat de naam al als h1 boven de pagina. */
  .prod-price-type{
    display:none;
  }
  /* Hergebruikt de staffel-tabel van de calculator */
  .prod-staffel{
    margin-bottom:30px;
  }
  .prod-staffel .staffel-row.staffel-head-row{
    font-size: var(--body-sm-font-size);
    background:var(--white);
    height: 36px;
    font-weight: 500;
  }
  .prod-staffel .staffel-row:not(.staffel-head-row):not(.is-active){
    border-bottom: 1px solid var(--border-light);
    padding: 7px 20px;
  }
  .prod-staffel .staffel-bottom-row{
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  .prod-staffel  .staffel-request{
    font-size: var(--body-font-size);
  }

  .prod-actions{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .prod-actions .cta,
  .prod-actions .cta-light{
    display:block;
    width:100%;
    text-align:center;
  }

  /* Onze beloftes */
  .promises{
    background:#fff;
    padding:120px 0 0px;
  }
  .promises h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    color:var(--text);
    margin-bottom:30px;
  }
  .promises-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }
  .promise-card{
    background:var(--light-beige);
    border-radius:14px;
    padding:40px;
  }
  .promise-icon{
    display:flex;
    height:70px;
    margin-bottom:20px;
  }
  .promise-icon img{ height:100%; width:auto; }
  .promise-card h5{
    font-weight:700;
    color:var(--text);
    margin-bottom:10px;
  }
  .promise-card p{
    font-size:var(--body-font-size);
    color:var(--text);
  }

  .promises > :is(.container, .container-md) > ul{
    margin-top: 20px;
  }
  /* De specs (indigo, accordions) */
  .specs-section{
    background:url(../media/bg_sock_dark-blue-tall.svg) no-repeat center top;
    background-size:cover;
    padding: 234px 0 50px;
  }
  /* Roze sok-doodles in de specs-sectie (uit het ontwerp). De sectie stond
     op static, dus die krijgt hier position:relative als anker. De wikkel
     zelf is 0x0 en pointer-events:none, zodat hij niets afdekt of opduwt;
     de plaatjes hangen absoluut binnen de sectie. */
  .specs-section{
    position:relative;
  }
  .specs-duddle-icons{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
  }
  /* De inhoud komt er bovenop: groeit de accordeon met CMS-tekst, dan schuift
     er nooit een doodle over de vragen heen. */
  .specs-section-inner{
    position:relative;
    z-index:2;
  }
  .specs-duddle-icons img{
    position:absolute;
  }
  .specs-duddle-icons .dubble-right{
    top: 2%;
    right: 5%;
    width: 300px;
  }
  .specs-duddle-icons .dubble-left{
    bottom: -172px;
    left: 43%;
    width: 331px;
  }
  .weave-inner h2 br{
    display: none;
  }
 
  .specs-section-inner h2{
    color:var(--pink);
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:26px;
  }
  .specs-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 60px;
  }
  .spec-item{ 
    border-bottom:1px solid rgba(255,255,255,.3); 
  }
  .spec-item:first-child{
    border-top:1px solid rgba(255,255,255,.3); 
  }
  .spec-q{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:20px 4px;
    background:transparent;
    border:none;
    cursor:pointer;
    text-align:left;
    font-weight:600;
    font-family: var(--roc-grotesk);
    font-size:var(--body-lg-font-size);
    color:#fff;
  }
  .spec-icon{ display:flex; flex-shrink:0; transition:transform .25s; }
  /* Plus draait naar een kruis wanneer het item open is */
  .spec-item.is-open .spec-icon{ transform:rotate(45deg); }
  .spec-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  /* De tekstkleur hoort op de CONTAINER, niet alleen op <p>. htmlv had
     hier uitsluitend <p>, maar in WP plakken redacteuren ook losse tekst
     of een tabel zonder <p>-wrapper; die viel terug op de donkere
     basiskleur en was daardoor vrijwel onleesbaar op het blauwe vlak
     (melding Kulwant 2026-08-25, skisokken > "In productie": de vetgezette
     bedragen stonden zwart op blauw). rgba i.p.v. opacity, zodat de
     bestaande opacity:.9 op p/ul/ol niet dubbel telt. */
  .spec-a-inner{
    padding:0 4px 18px;
    color:rgba(255,255,255,.9);
  }
  .spec-a-inner p{
    color:#fff;
    /* spec 2026-08-12: 17px op 1920 = exact het body-token (was body-sm) */
    font-size:var(--body-font-size);
    opacity:.9;
  }

  /* Lijsten in spec-antwoorden (WP-toevoeging). Redacteuren kunnen ze via
     de wysiwyg plaatsen; htmlv kende ze niet, dus er was geen styling en
     viel <li> terug op de donkere basiskleur — onleesbaar op het blauwe
     vlak, met browser-bullets en 40px inspring. Genummerd op verzoek van
     de klant: ook een <ul> uit de editor toont 1. 2. 3. */
  .spec-a-inner ul,
  .spec-a-inner ol{
    list-style:decimal outside;
    margin:12px 0 0;
    padding-left:24px;
    color:#fff;
    opacity:.9;
  }
  .spec-a-inner li{
    font-size:var(--body-font-size);
    line-height:1.6;
    margin-bottom:6px;
  }
  .spec-a-inner li:last-child{
    margin-bottom:0;
  }
  .spec-a-inner li::marker{
    font-weight:600;
  }
  /* Nummer en de vetgedrukte aanhef even zwaar: 600, de semibold die de
     site elders ook gebruikt (o.a. .spec-q). <strong> stond op de
     browserstandaard 700 en oogde daardoor zwaarder dan de rest. */
  .spec-a-inner strong,
  .spec-a-inner b{
    font-weight:600;
  }

  /* Geweven vs. sublimatiedruk (roze) */
  .weave{
    background: linear-gradient(
  179deg,
  var(--blue) 0 81%,
  var(--light-beige) 80% 100%
);
    padding:60px 0 100px;
    position: relative;
  }
  .weave-inner:before{
    content: '';
    background: url(../media/bg_sock_pink.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -11%;
    left: 0;
    z-index: 1;
  }
  .weave-inner .container{
    position: relative;
    z-index: 2;
  }
  .weave-inner h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    color:var(--text);
    margin-bottom:28px;
    color: var(--pink);
  }
  .weave-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:76px;
    align-items: start;
  }
  .weave-card{
    background:#fff;
    border-radius:35px;
    padding:0;
    overflow: hidden;
  }
  .weave-img{
    height:420px;
    border-radius:0px 0 35px 35px;
    overflow:hidden;
  }
  .weave-img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .weave-body{ 
    padding:45px 40px; 
  }
  .weave-tag{
    display:inline-block;
    background:var(--light-beige);
    font-size:var(--body-sm-font-size);
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.04em;
    padding: 2px 6px;
    border-radius:3px;
    margin-bottom:20px;
  }
  .weave-tag-coral{ background:var(--coral); color:#fff; }
  .weave-body h5{
    font-weight:700;
    color:var(--text);
    margin-bottom:12px;
  }
  .weave-body ul li{ 
    font-size:var(--body-font-size); 
  }
  .weave-body ul{
    padding: 24px 0 0;
    gap: 8px;
    margin:0;
  }
  .weave-body ul li strong{
    font-weight: 600;
  }
  .weave-body ul li::before{
    background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214.119%22%20height%3D%2210.396%22%20viewBox%3D%220%200%2014.119%2010.396%22%3E%3Cg%20id%3D%22check%22%20transform%3D%22translate%281.061%201.061%29%22%3E%3Cpath%20id%3D%22Path_210%22%20data-name%3D%22Path%20210%22%20d%3D%22M110.16%2C670.69l3.723%2C3.722%208.275-8.274%22%20transform%3D%22translate%28-110.16%20-666.138%29%22%20fill%3D%22none%22%20stroke%3D%22%231dd665%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22/%3E%3C/g%3E%3C/svg%3E");
  }
  .weave-card-sublimation .weave-body ul li::before{
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214.121%22%20height%3D%2214.121%22%20viewBox%3D%220%200%2014.121%2014.121%22%3E%3Cg%20id%3D%22Close%22%20transform%3D%22translate%281.061%201.061%29%22%3E%3Cline%20id%3D%22Line_90%22%20x2%3D%2212%22%20y2%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%23fa4b46%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22/%3E%3Cline%20id%3D%22Line_91%22%20x1%3D%2212%22%20y2%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%23fa4b46%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    height: 12px;
    width: 12px;
  }
  /* Hoe verhoudt Sokkies zich? */
  .versus{
    background:var(--light-beige);
    padding:180px 0 118px;
    position: relative;
  }
  .versus-dubble-left {
    position: absolute;
    top: -13%;
    z-index: 1;
  }
  .versus h2{
    text-align:center;
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    color:var(--text);
    margin-bottom:32px;
  }
  .versus-scroll{ overflow-x:auto; }
  .versus-table{
    width:100%;
    max-width:66.3%;
    margin:0 auto;
    border-collapse:separate;
    border-spacing:0;
    min-width:640px;
  }
  .versus-table th,
  .versus-table td{
    padding:6px 20px;
    text-align:center;
    font-size:var(--body-font-size);
  }
  .versus-table thead th{
    font-weight:700;
    font-size:var(--h5-font-size);
  }
  .versus-table thead th:first-child{
    text-align: left;
  }
  .versus-table thead .is-us{
    background:var(--yellow);
    border-radius:10px 10px 0 0;
    color:var(--text);
    border: 1px solid var(--white);
    border-bottom: 0;
    padding: 16px 18px;
  }
  .versus-table tbody th{
    text-align:left;
    font-weight:400;
    color:var(--text);
  }
  .versus-table thead th:nth-child(2), .versus-table thead th:nth-child(3){
    width: 290px;
  }
  .versus-table tbody tr:nth-child(odd) th,
  .versus-table tbody tr:nth-child(odd) td{ 
    background:rgb(252 248 244 / 40%); 
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    border-radius: 5px 0 0 5px;
  }
  .versus-table tbody tr td:nth-child(2){
    border-radius: 0px 0 0 0px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
  }
  .versus-table tbody tr:nth-child(odd) td:nth-child(3){
    border-left: none;
    border-right: 1px solid #fff;
    border-radius: 0px 5px 5px 0px;
  }
  .versus-table .is-us{ 
    background:rgb(245 237 230 / 100%) !important; 
  }
  .versus-table tbody tr:last-child .is-us{ 
    border-radius:0 0 10px 10px;
    border-bottom: 1px solid #fff;
  }
  .tick{
    display:inline-block;
    width:30px; 
    height:30px;
    border-radius:50%;
    position:relative;
    top: 2px;
  }
  .tick-yes{ background:#1DD665; }
  .tick-no{ background:var(--coral); }
  .tick-yes::after{
    content: "";
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 11px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
  }
  .tick-no::after{
    content:"";
    background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214.121%22%20height%3D%2214.121%22%20viewBox%3D%220%200%2014.121%2014.121%22%3E%3Cg%20transform%3D%22translate%281.061%201.061%29%22%3E%3Cline%20x2%3D%2212%22%20y2%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22/%3E%3Cline%20x1%3D%2212%22%20y2%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22/%3E%3C/g%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position: center 56%;
    position:absolute; 
    width:100%; 
    height:100%;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Bekijk ook deze */
  .cards-suggestion{
    background:#fff;
    padding:138px 0 70px;
    overflow:hidden
  }
  .cards-suggestion-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .cards-suggestion-head h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    color:var(--text);
  }
  /* Kaarten hergebruiken .collection-card van de homepage */
  .swiper.cards-suggestion-swiper{
    padding: 30px 0;
    overflow: visible;
  }
  .cards-suggestion-swiper .swiper-slide{ height:auto; }
  .cards-suggestion-swiper .collection-card{ 
    height:100%; 
    border: 1px solid var(--dark);
  }

  /* Ontwerp je sokken nu zelf (cyan) */
  .design-now{
    position:relative;
    /* background:var(--cyan-bright); */
    padding:120px 0 150px;
    position: relative;
  }
  .design-now-doodle{
    position:absolute;
    width:130px;
    height:auto;
    pointer-events:none;
    z-index:1;
  }
  .design-duddle-sock{
    position: absolute;
    right: 4%;
    top: 0;
    z-index: 3;
  }
  .design-bg-union{
    /* 2026-08-13: aspect-ratio + bottom + 100%-auto-size verwijderd
       (verzoek Kulwant, 1680-ronde PDP) */
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:1392px;
    background:url(../media/bg-cards-pdp-bg.png) no-repeat center bottom;
    /* bg-cards-pdp-bg.png is 1921x1392 en werd op ware grootte GECENTREERD
       getekend. Op 2560px bleef daardoor links en rechts een witte strook van
       ruim 300px staan. De hoogte blijft precies 1392px — gelijk aan het vlak
       en aan de afbeelding zelf — en alleen de breedte rekt mee. Onder 1921px
       levert max() de eigen breedte op, dus daar verandert niets; met name de
       1680-ronde (waar 100% auto juist bewust is weggehaald) blijft intact. */
    background-size:max(100%, 1921px) 1392px;
    z-index: 0;
  }
  .design-now h2{
    position:relative;
    z-index:2;
    text-align:center;
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    color:var(--text);
    margin-bottom:30px;
  }
  .design-now-card{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1.1fr 1fr;
    gap:30px;
    align-items:center;
    max-width:960px;
    margin:0 auto;
    background:#fff;
    border-radius:18px;
    padding:30px;
    box-shadow:0 20px 44px rgba(0,0,0,.14);
  }
  .design-now-left h3{
    font-size:var(--body-lg-font-size);
    font-weight:700;
    margin-bottom:8px;
  }
  .design-now-left p{
    font-size:var(--body-sm-font-size);
    color:#6a6157;
  }
  .design-now-preview{
    background:var(--light-beige);
    border-radius:14px;
    height:230px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .design-now-preview img{ max-height:80%; width:auto; }
  .design-now-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .design-now-list li{
    position:relative;
    padding-left:24px;
    font-size:var(--body-sm-font-size);
    line-height:1.4;
    color:var(--text);
  }
  .design-now-list li::before{
    content:"\00bb";
    position:absolute;
    left:0; top:-2px;
    color:var(--coral);
    font-weight:700;
  }
  .design-now-cta{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    margin-top:26px;
  }

  /* Voor welke bedrijven — masonry layout */
  .usecases{
    background:var(--light-beige);
    padding:137px 0 0px;
    margin-bottom: -18.6%;
  }
  .usecases .container{
    position: relative;
    z-index: 5;
  }
  .usecases-masonry{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
  }
  .usecases-outer-left{
    height: max-content;
  }
  .usecases-outer-right {
    display: grid;
    gap: 100px;
  }
  .usecases-head{ 
    padding:70px 0px 0; 
  }
  .usecases-head h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    color:var(--text);
    margin-bottom: 60px;
    text-align: end;
  }
  
  .usecases-cards-inner {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }
  .usecases-cards-reverse{
    flex-direction: row-reverse;
    align-items: flex-end;
  }
  .usecases-cards-reverse  .usecase-card-small{
    margin-bottom: -20px;
  }
  .usecase-card{
    display:block;
    background:#fff;
    border-radius:25px;
    padding:0;
    text-decoration:none;
    color:var(--text);
    box-shadow:0 8px 24px rgba(0,0,0,.05);
    transition:transform .2s, box-shadow .2s;
    width: min-content;
  }
  .usecase-card-small{
    width: 330px;
  }
  
  .usecase-img{
    border-radius:25px;
    overflow:hidden;
    background:#f0f0f0;
  }
  .usecase-img-md{ 
    height:270px; 
  }
  .usecase-img-lg{ 
    height:380px; 
    width: 460px;
  }
  .usecase-img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .usecase-body{ 
    padding:24px 20px; 
  }
  .usecase-body h5{
    font-weight:700;
    margin-bottom:6px;
  }
  .usecase-body p{
    font-size:var(--body-font-size);
    margin-bottom:20px;
  }
  .usecase-link{
    display:flex;
    align-items:center;
    gap:6px;
    padding:20px 4px 0;
    border-top:1px solid var(--border-light);
    font-weight:600;
    font-size:var(--body-font-size);
    color:var(--text);
    transition:gap .2s;
    cursor: pointer;
  }
  .usecase-card:hover .usecase-link{ 
    text-decoration: underline;
  }
  .cases.cases-pdp{
    background: var(--light-beige);
    padding: 280px 0 50px;
    overflow: visible;
  }
  .cases.cases-pdp .cases-feet{
    display: none;
  }
  .cases-pdp.cases:before {
    content: '';
    /* LET OP: dit is de SHORTHAND, en die zet background-size en
       background-repeat terug op hun standaard. De basisregel .cases:before
       heeft hier dus geen invloed op — vandaar dat beide hieronder opnieuw
       staan. Zonder no-repeat herhaalde de vorm zich boven 1920px (rechts
       een tweede linkerrand), en zonder maat viel er een strook onbedekt.
       bg_sock_yellow_2.png is 1920x1505 in een vlak van ~820px hoog: de
       hoogte staat daarom vast op 1505px zodat er op elke breedte hetzelfde
       deel van de vorm zichtbaar blijft, en alleen de breedte rekt mee. */
    background: url(../media/bg_sock_yellow_2.png) no-repeat;
    background-size: max(100%, 1920px) 1505px;
  }
  
  .cases.cases-pdp .case-section-outer h2, .cases.cases-pdp .case-text, .cases.cases-pdp .case-link{
    color: var(--text);
  }
  .cases.cases-pdp .case-link svg path{
    stroke: var(--text);
  }

  .cases.cases-pdp .case-duddle-icons .dubble-left {
    position: absolute;
    top: -64%;
    left: 28%;
    width: 344px;
    height: auto;
}
 
  .testimonial-yellow{
    background: var(--yellow);
  }
  .testimonial-yellow .testimonial-head h2, .testimonial-yellow  .testimonial-rating{
    color: var(--text);
  }

  .testimonial-yellow .testimonial-card{
    background:#FCEDA8 ;
  }

/* ===== Zwevende promo-card (linksonder, herbruikbaar — o.a. home/toepassingen/
   duurzaamheid/partners/waarom-sokkies; verhuisd uit stylen.css 2026-07-27) ===== */
  .promo-float{
    position:fixed;
    left:20px;
    bottom:20px;
    z-index:99;
    display:flex;
    gap:24px;
    width:500px;
    padding:10px;
    background:var(--white);
    border:1px solid #ececec;
    border-radius:25px;
    box-shadow:0 12px 32px rgba(0,0,0,.12);
  }
  .promo-float-img{
    flex:0 0 166px;
    height:166px;
    border-radius:14px;
    overflow:hidden;
  }
  .promo-float-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .promo-float-body{
    display:flex;
    flex-direction:column;
    padding:8px 30px 4px 0;
  }
  .promo-float-body h5{
    font-family:var(--roc-grotesk);
    font-weight:700;
    font-size:22px;
    line-height:1.18;
    color:var(--text);
    margin-bottom:8px;
  }
  .promo-float-body p{
    font-size:var(--body-font-size);
    color:var(--text);
  }
  .promo-float-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:auto;
    font-size:var(--body-font-size);
    font-weight:700;
    color:var(--text);
    text-decoration:none;
  }
  .promo-float-link:hover{
    color:var(--coral);
  }
  .promo-float-close{
    position:absolute;
    top:20px;
    right:20px;
    background:none;
    border:none;
    padding:0;
    line-height:0;
    cursor:pointer;
    opacity:.75;
    transition:opacity .2s;
  }
  .promo-float-close:hover{
    opacity:1;
  }


/* ===== Haak-pijl-tekstlink (gedeeld: .faq-more o.a. toepassingen/Collectie,
   .duurz-link over-ons, .dl-link downloads, .pt-dl-link partners;
   verhuisd uit stylen.css 2026-07-27) ===== */
  /* haak-pijl-tekstlink (gedeelde basis; marges blijven per component) */
  .faq-more,
  .duurz-link,
  .dl-link,
  .pt-dl-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:var(--body-font-size);
    font-weight:700;
    color:var(--text);
    text-decoration:none;
  }
  .faq-more:hover,
  .duurz-link:hover,
  .dl-link:hover,
  .pt-dl-link:hover{
    color:var(--coral);
  }
  .faq-more{
    margin-top:30px;
  }


/* ===== Mobiel menu: hamburger (zichtbaar ≤768 via responsive.css) ===== */
  .nav-burger{
    display:none;
    flex:0 0 auto;
    width:62px;
    height:62px;
    border-radius:50%;
    border:none;
    background:var(--text);
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    cursor:pointer;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    padding:0;
  }
  .nav-burger span{
    display:block;
    width:20px;
    height:2px;
    background:var(--white);
    border-radius:2px;
    transition:transform .2s, opacity .2s;
  }
  .navbar.menu-open .nav-burger{
    gap:6px;
  }
  .navbar.menu-open .nav-burger span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }
  .navbar.menu-open .nav-burger span:nth-child(2){
    opacity:0;
  }
  .navbar.menu-open .nav-burger span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }
  /* mobiele mega-kop (Terug + titel): alleen zichtbaar in het ≤768-subpaneel */
  .mega-back,
  .mega-mob-title{
    display:none;
  }
  /* De wikkel om Terug + sluitknop is alleen op mobiel een echte balk.
     Daarboven mag hij geen cel in het mega-raster vullen: als blok schoof
     hij de kolommen op en zakte de USP-kolom naar een tweede rij (gemeten
     op 1440: usps van x 1199 naar x 59, y 156 naar 498). display:contents
     laat de knoppen zich gedragen alsof de wikkel er niet is; de mobiele
     band zet hem terug op flex. */
  .sub-menu-head{
    display:contents;
  }
  /* De sluitknop in die kop is ALLEEN in het mobiele subpaneel de
     sluitknop; overal anders doet de burger in de kopbalk het werk en zou
     dit een tweede X opleveren (gemeten op 640: 2 zichtbare knoppen). */
  .mega .nav-burger{
    display:none;
  }
  /* "Home"-menu-item: alleen in het mobiele menu (≤520, mobiel-XD) */
  .menu-home{
    display:none;
  }
  /* Gift-rij-pijlen: gestyled als gallery-nav; standaard verborgen,
     per breakpoint aangezet waar de rij een scroll-rij is */
  .gift-nav,
  .collection-nav{
    display:none;
    justify-content:center;
    gap:10px;
    margin-top:24px;
  }
  /* Navigatiebalk onder de suggestieslider (ontwerp mobiel): zelfde
     knoppen en streepjes als de andere rijen. Basis uit, net als de
     andere balken; de mobiele band zet hem aan. */
  .suggestion-nav{
    display:none;
    justify-content:center;
    gap:10px;
    margin-top:24px;
  }
  .suggestion-nav button,
  .gift-nav button{
    width:55px;
    height:40px;
    border:1.5px solid var(--dark);
    background:#fff;
    border-radius:7px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .collection-nav button{
     width:55px;
    height:40px;
    border:1.5px solid var(--dark);
    background:transparent;
    border-radius:7px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .collection-nav .nav-dashes span{
      background: #000;
      opacity: 30%;
  }
  .collection-nav .nav-dashes span.is-active{
      opacity: 100%;
  }
/*═════════════════════════════════════════
  PDP — mobiele sticky CTA-balk (product-detail)
  Alleen zichtbaar ≤520 (regels in responsive.css);
  base verbergt de balk op alle andere breedtes.
═════════════════════════════════════════*/
.pdp-sticky{
  display:none;
}

/*═════════════════════════════════════════
  Mobiele sticky CTA-knop — GEDEELDE component
  (configurator + werkwijze + reviews-en-cases +
  reviews-en-cases-detail + over-ons + veelgestelde-vragen +
  duurzaamheid + waarom-sokkies + partners + downloads; markup
  vlak vóór de footer, knoptekst per pagina).
  Alleen zichtbaar ≤520 (regels in responsive.css);
  base verbergt de knop op alle andere breedtes.
═════════════════════════════════════════*/
.conf-sticky{
  display:none;
}

/*═════════════════════════════════════════
  Funnel — mobiele sticky contactbalk, GEDEELDE component
  (offerte + sample-request + bedankt + contact; Bel ons /
  WhatsApp / E-mail; markup vlak vóór de mini-footer).
  Alleen zichtbaar ≤520 (regels in responsive.css);
  base verbergt de balk op alle andere breedtes.
═════════════════════════════════════════*/
.funnel-sticky{
  display:none;
}

/* Toepassingen — mobiele sticky CTA-strook (2 hero-knoppen, markup vóór de
   footer). Alleen zichtbaar ≤520 (regels in responsive.css). */
.uc-sticky{
  display:none;
}

/* Dropzone: mobiele knoptekst (dz-mobile) — base toont de desktop-tekst */
.dz-mobile{
  display:none;
}


/* ==========================================================================
   =========================  NIEUWE PAGINA'S  ==============================
   Voorheen stylen.css — SAMENGEVOEGD in style.css op 2026-08-12 (verzoek
   Kulwant, backup door Kulwant). Laadvolgorde is nu op ALLE pagina's
   style.css → responsive.css; de cascade is identiek (dit blok stond altijd
   al ná de basis en vóór responsive.css). Structuur: één commentaarblok per
   nieuwe pagina, na het gedeelde blok. Geen media queries — responsive voor
   deze pagina's staat in responsive.css (per band).
   NB: responsive.css laadt hierna — hergebruikt een nieuwe pagina een
   bestaande class, scope de override (bijv. `.newpage .promises`).
   ========================================================================== */

/* ===== Toepassingen — hero (coral variant of coll-hero) ===== */
  .toepassingen .hero-slider-section{
    background:var(--coral-hero);
  }
  .toepassingen .breadcrumb{
    color:var(--white);
  }
  .toepassingen .breadcrumb a{
    color:var(--white);
  }
  .toepassingen .breadcrumb .breadcrumb-link{
    text-decoration:underline;
  }
  .toepassingen .coll-hero-content h1{
    color:var(--white);
  }
  .toepassingen .coll-hero-content h1 .title-accent{
    color:var(--yellow);
  }
  .toepassingen .coll-hero-left p{
    color:var(--white);
  }

/* ===== Zwevende promo-card: CSS verhuisd naar style.css (2026-07-27,
   component wordt nu ook op home.html gebruikt — style.css laadt op ALLE pagina's) ===== */

/* ===== Nieuwsbrief-popup (herbruikbaar op elke pagina, zie popup.html) ===== */
  .nl-popup{
    position:fixed;
    inset:0;
    z-index:200;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(40,18,27,.45);
    padding:20px;
  }
  .nl-popup.is-open{
    display:flex;
  }
  .nl-popup-card{
    position:relative;
    width:850px;
    max-width:100%;
    background:var(--white);
    border-radius:24px;
    padding:96px 60px 90px;
    text-align:center;
  }
  .nl-popup-close{
    position:absolute;
    top:26px;
    right:30px;
    background:none;
    border:0;
    padding:4px;
    line-height:0;
    cursor:pointer;
    opacity:.8;
    transition:opacity .2s;
  }
  .nl-popup-close:hover{
    opacity:1;
  }
  .nl-popup-card h5{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:40px;
    line-height:1;
    color:var(--text);
  }
  .nl-popup-card p{
    font-family:var(--roc-grotesk);
    font-weight:700;
    font-size:19px;
    color:var(--text);
    margin-top:14px;
  }
  .nl-popup-form{
    width:480px;
    max-width:100%;
    margin:34px auto 0;
    text-align:left;
  }
  .nl-popup-form input[type="email"]{
    width:100%;
    background:var(--white);
    border:1px solid var(--text);
    border-radius:8px;
    padding:14px 16px;
    font-size:16px;
    color:var(--text);
  }
  .nl-popup-check{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:16px;
    font-size:var(--body-font-size);
    color:var(--text);
    cursor:pointer;
  }
  .nl-popup-check input{
    width:18px;
    height:18px;
    accent-color:var(--dark);
    flex:0 0 auto;
  }
  .nl-popup-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:22px;
  }

/* ===== Nieuwe pagina's — gedeelde regels (geconsolideerd 2026-07-27) ===== */
  /* breadcrumb-ruimte: de header (topbar+navbar) hangt absoluut over de hero */
  .over-ons .breadcrumb,
  .duurzaamheid .breadcrumb,
  .downloads .breadcrumb,
  .contact .breadcrumb,
  .juridisch .breadcrumb,
  .waarom-sokkies .breadcrumb{
    padding:115px 0 0;
  }
  /* haak-pijl-tekstlink: basis verhuisd naar style.css (2026-07-27 — .faq-more
     wordt nu ook op Collectie gebruikt; style.css laadt op alle pagina's) */
  /* "Image placeholder"-chip (partners- en downloads-kaarten) */
  .pt-dl-ph,
  .dl-ph{
    background:var(--white);
    border:1px solid var(--text);
    border-radius:5px;
    padding:5px 12px;
    font-size:var(--body-sm-font-size);
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--text);
  }
  /* formulier-input-basis (afwijkingen blijven per formulier) */
  .pt-dl-input,
  .dl-niets-field input,
  .ct-field input,
  .ct-field textarea{
    width:100%;
    background:var(--white);
    border:1px solid var(--input-border);
    border-radius:8px;
    padding:13px 16px;
    font-size:16px;
    color:var(--text);
  }



/* ===== Toepassingen — waarom sokken werken ===== */
  .usecase-why{
    background:var(--white);
    padding:100px 0 130px;
  }
  .usecase-why h2{
    margin-bottom:25px;
  }
  .usecase-why .container > p{
    max-width:850px;
    margin:0 auto 50px;
    text-align:center;
    font-size:var(--body-font-size);
    color:var(--text);
  }
  .usecase-why ul{
    list-style:none;
    max-width:1140px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:48px;
  }
  .usecase-why ul li{
    position:relative;
    padding-left:26px;
  }
  .usecase-why ul li::before{
    content:"";
    position:absolute;
    left:0;
    top:3px;
    width:17px;
    height:22px;
    background-repeat:no-repeat;
    background-size:contain;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10.779' height='14' viewBox='0 0 10.779 14'><g><g><path d='M2.3 7.176.115 11.715a1.652 1.652 0 0 0 .909 2.135 1.613 1.613 0 0 0 2.1-.922l2.683-5.8a.673.673 0 0 0-.007-.51L3.112.4A.652.652 0 0 0 2.251.054L.48.83A.669.669 0 0 0 .138 1.7L2.3 6.665a.673.673 0 0 1 .007.51' transform='translate(4.921 0)' fill='%23fa4a45'/><path d='M2.3 7.176.115 11.715a1.652 1.652 0 0 0 .909 2.135 1.613 1.613 0 0 0 2.1-.922l2.683-5.8a.673.673 0 0 0-.007-.51L3.114.4A.652.652 0 0 0 2.252.054L.481.831a.669.669 0 0 0-.342.874L2.3 6.666a.673.673 0 0 1 .007.51' transform='translate(0 .033)' fill='%23fa4a45'/></g></g></svg>");
  }
  .usecase-why li h6{
    font-family:var(--roc-grotesk);
    font-weight:700;
    font-size:calc(var(--h6-font-size) + 2px);
    line-height:1.2;
    color:var(--text);
    margin-bottom:10px;
  }
  .usecase-why ul li p{
    font-size:var(--body-font-size);
    color:var(--text);
  }


/* ===== Toepassingen — usecases grid (vlakke variant van .usecases) ===== */
  .usecases-flat{
    background:var(--white);
    padding:0 0 100px;
    margin-bottom:0;
  }
  .usecases-flat .usecases-head{
    padding:0;
  }
  .usecases-flat .usecases-head h2{
    text-align:start;
    margin-bottom:40px;
  }
  .usecases-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
  }
  .usecases-flat .usecase-card{
    width:auto;
    padding:12px;
    border:1px solid var(--text);
    box-shadow:none;
  }
  .usecases-flat .usecase-img{
    height:418px;
    border-radius:16px;
  }
  .usecases-flat .usecase-body{
    padding:20px 8px 14px;
  }
  .usecases-flat .usecase-link{
    border-top:0;
    padding:0;
  }


/* ===== Toepassingen — sokken collectie (beige variant met blauwe voet) ===== */
  .toepassingen .collection-beige{
    background:var(--light-beige);
    padding:0px;
    position: relative;
    margin-top: 70px;
  }
  .toepassingen .collection-beige::before{
    content:" ";
    position: absolute;
    left: 0px;
    top:-527px;
    background: url(../media/uc-collection-bg.png) left top no-repeat;
    background-size:cover;
    width: 100%;
    height: 527px;
  }
  .toepassingen .collection-beige:after{
    display:none;
  }


/* ===== Toepassingen — klantcases (egaal blauw, zonder shape-afbeelding) ===== */
  .toepassingen .cases{
    background:var(--blue);
    margin-top: -150px;
    padding-top: 265px;
    position: relative;
    padding-bottom: 110px;
  }
  .toepassingen .cases:before{
    content: " ";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 712px;
    background: url(../media/uc-case-top-bg.png) left top no-repeat;
    background-size: cover;
    z-index: 1;
  }


 .toepassingen .cases:after {
    /* content:url schaalt niet mee met width — als background + aspect-ratio
       (zelfde patroon als offerte's sock-doodle); 347.5px = natuurlijke maat */
    content: '';
    width: 347.5px;
    aspect-ratio: 347.5 / 349.5;
    background: url(../media/sock-element-up.svg) no-repeat center / contain;
    position: absolute;
    bottom: 0%;
    z-index: 1;
    right: 9%;
    transform: rotate(80deg);
}
/* ===== Toepassingen — prijscalculator (blauwe bovenhelft i.p.v. coral) ===== */
  .toepassingen .calculator-bg:before{
    background:var(--blue) url(../media/uc-calc-top.png) left bottom no-repeat;
    width: 100%;
    height: 797px;
    top: -624px;
  }
  .toepassingen .uc-bg-yellow-shape{
    background: url(../media/uc-calc-bottom-bg.png) no-repeat center top;
    background-size: cover;
    height: 635px;
    position: absolute;
    width: 100%;
    top: 173px;
    left: 0;
    z-index: 0;
  }
/* ===== Toepassingen — FAQ: bekijk alle vragen link ===== */


  .toepassingen .brand-light .brand-duddle-icons .dubble-left {
    top: -20px;
    left: 5%;
    width: auto;
}
.toepassingen .brand-light .brand-duddle-icons .dubble-right {
    bottom: 0%;
    right: 4%;
    width: auto;
}

/* ==========================================================================
   FAQ-PAGINA (veelgestelde-vragen.html) — page-scope: .faq-page
   ========================================================================== */

/* ===== FAQ-pagina — hero met zoekbalk ===== */
  .faq-search{
    position:relative;
    max-width:580px;
    margin:20px auto 0;
  }
  .faq-page .simple-hero-content h1{
    margin-bottom: 10px;
  }
  .faq-search-input{
    width:100%;
    height:48px;
    padding:0 56px 0 20px;
    background:var(--white);
    border:1px solid var(--border-light);
    border-radius:8px;
    font-family:var(--roc-grotesk);
    font-size:var(--body-font-size);
    color:var(--text);
  }
  .faq-search-input::placeholder{
    color:var(--text);
  }
  .faq-search-input:focus{
    outline:none;
    border-color:var(--text);
  }
  .faq-search-btn{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    padding:0;
    line-height:0;
    cursor:pointer;
  }

/* ===== FAQ-pagina — vragen per categorie ===== */
  .faq-cats{
    background:var(--white);
    padding:60px 0 100px;
  }
  .faq-cats-filter{
    justify-content:center;
    gap:11px;
  }
  .faq-cats-list{
    max-width:1000px;
    margin:78px auto 0;
  }
  .faq-cat-group{
    margin-bottom:90px;
    scroll-margin-top:24px;
  }
  .faq-cat-group:last-child{
    margin-bottom:0;
  }
  .faq-cat-group h2{
    font-family:var(--roc-grotesk);
    font-weight:700;
    font-size:var(--h3-font-size);
    color:var(--text);
    margin-bottom:12px;
  }
  .faq-page .faq-item{
    border-bottom:1px solid var(--border-light);
  }
  .faq-page .faq-a-inner p,
  .faq-page .faq-a-inner ul,
  .faq-page .faq-a-inner ol{
    max-width:none;
  }
  .faq-page .faq-item.is-hidden,
  .faq-page .faq-cat-group.is-hidden{
    display:none;
  }

  /* Dropdown-variant van de categorie-chips (smalle banden tonen hem
     via responsive.css; base verbergt hem) */
  .faq-page .faq-cats-select{
    display:none;
  }
  /* spec 2026-08-12: open vraag zonder lijn op 1920 (768↓ had dat al);
     banden 1440/1280/992 pinnen de goedgekeurde lijn */
  .faq-page .faq-item.is-open .faq-q{
    border-bottom:none;
  }

/* ===== FAQ-pagina — slot-CTA met contactregel ===== */
  .faq-page .cta-final{
    background:var(--white);
  }
  .cta-final-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
  }
  .cta-final-row p{
    color:var(--white);
    font-size:var(--body-font-size);
  }
  .cta-final-row p a{
    color:var(--white);
    font-weight:700;
    text-decoration:none;
  }
  .cta-final-row p a:hover{
    color:var(--yellow);
  }
  .cta-contact-sep{
    margin:0 10px;
  }



/* ==========================================================================
   OVER-ONS-PAGINA (over-ons.html) — page-scope: .over-ons
   ========================================================================== */

/* ===== Over ons — hero met team-slider ===== */
  .over-ons .breadcrumb{
    color:var(--white);
  }
  .over-ons .breadcrumb a{
    color:var(--white);
  }
  .over-ons .banner-section{
    padding:62px 20px 75px;
  }
  .over-ons .banner-section p{
    color:var(--white);
    font-size:var(--body-lg-font-size);
    max-width:620px;
    margin:26px auto 0;
  }
  .over-ons .gallery{
    background:linear-gradient(to bottom,var(--coral) 0 41%,#fff 41% 100%);
  }
  /* spec 2026-08-12: 3 volledige kaarten gecentreerd + 15%-slivers
     links/rechts — zelfde mechaniek als home's 4.3-formule maar met
     3.3: W = (100vw − 4G)/3.3 (≈558px op 1920, vlak bij het oude 560).
     Box = 5 slides, ±0.85W buiten beeld; actieve slide = linker sliver.
     Banden 1440↓ hebben eigen over-ons-boxregels en blijven ongemoeid. */
  .over-ons .gallery-swiper{
    --gal-gap:20px;
    --gal-w:calc((100vw - 4 * var(--gal-gap)) / 3.3);
    width:calc(100vw + 1.7 * var(--gal-w));
    margin-left:calc(-0.85 * var(--gal-w));
  }
  .over-ons .gallery-swiper .swiper-slide{
    width:var(--gal-w);
    height:420px;
  }
  .over-ons .gallery-swiper .swiper-slide:nth-child(3n + 1){
    transform:translateY(-25px);
  }

/* ===== Over ons — hoe het begon ===== */
  .overons-story{
    background:var(--white);
    padding:130px 0 0px;
    position: relative;
  }
  .overons-story-inner{
    display:grid;
    /* minmax(0,1fr): kolommen bottomden anders uit op de vaste collage-breedtes
       (811 + 100 + 805 = 1716px — paste alleen op de 1920-container) en de
       sectie liep onder ±1876px viewport uit beeld */
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:100px;
    align-items:start;
    position: relative;
    z-index:1 ;
  }
  .story-collage{
    display:flex;
    align-items:flex-start;
    gap:28px;
  }
  .story-collage img{
    border-radius:25px;
    object-fit:cover;
    display:block;
  }
  /* proportioneel i.p.v. vaste px (325/458 op de 1920-kolom van 810) —
     flex-ratio + aspect-ratio rendert op 1920 identiek en schaalt daaronder mee;
     min-width:0 tegen het replaced-element-minimum */
  .story-collage .img-sm{
    flex:325 1 0;
    min-width:0;
    height:auto;
    aspect-ratio:325/418;
  }
  .story-collage .img-lg{
    flex:458 1 0;
    min-width:0;
    height:auto;
    aspect-ratio:458/620;
  }
  .story-collage-right{
    margin-top:43px;
    gap:22px;
  }
  .story-collage-right .img-sm{
    margin-top:100px;
  }
  .overons-story-text h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    /* spec 2026-08-12: 46px op 1920 = exact het h2-token (was h3-token);
       banden pinnen de oude waarde — alleen 1920 */
    font-size:var(--h2-font-size);
    color:var(--text);
    margin-bottom:30px;
  }
  .overons-story-text{
    max-width:650px;
  }
  .overons-story-text p{
    font-size:var(--body-font-size);
    color:var(--text);
    margin-bottom:24px;
  }
  .overons-story-text p:last-child{
    margin-bottom:0;
  }

/* ===== Over ons — door de jaren heen (tijdlijn-slider) ===== */
  .timeline{
    background:var(--light-beige);
    padding:205px 0 205px;
    overflow:hidden;
    position: relative;
    margin-top: -140px;
  } 
  .timeline::before{
    content: " ";
    position: absolute;
    width: 100%;
    height: 717px;
    background: url(../media/time-line-bg.png) center top no-repeat;
    left: 0px;
    top: 0px;
  }
  .timeline-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:35px;
    position: relative;
  }
  .timeline-head h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1;
    color:var(--text);
  }
  .timeline-nav{
    display:flex;
    gap:21px;
  }
  /* voortgangsstreepjes: alleen mobiel zichtbaar (responsive.css) */
  .timeline-dashes{
    display:none;
  }
  .timeline-nav button{
    width:55px;
    height:40px;
    border:1.5px solid var(--dark);
    background:#fff;
    border-radius:7px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .2s;
  }
  .timeline-nav button:disabled{
    opacity:.4;
    cursor:not-allowed;
  }
  .timeline-img{
    height:395px;
    border-radius:16px;
    overflow:hidden;
    margin-bottom:24px;
  }
  .timeline-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .timeline-year{
    display:flex;
    align-items:center;
    gap:18px;
    font-family:var(--roc-grotesk);
    font-weight:700;
    /* token-gekoppeld (was hard 40px): h2−6 = 40 op 1920, schaalt per band mee */
    font-size:calc(var(--h2-font-size) - 6px);
    line-height:1;
    color:var(--coral);
  }
  .timeline-year:after{
    content:"";
    flex:1;
    height:2px;
    background:repeating-linear-gradient(90deg, var(--coral) 0 12px, transparent 12px 22px);
  }
  .timeline-swiper h3{
    font-size:var(--h5-font-size);
    font-weight:700;
    color:var(--text);
    margin:16px 0 10px;
  }
  .timeline-swiper p{
    font-size:var(--body-font-size);
    color:var(--text);
    margin-bottom:24px;
  }
  .timeline-swiper p:last-child{
    margin-bottom:0;
  }

/* ===== Over ons — impact/stats op egaal geel vlak (hergebruik home .impact) ===== */
  .over-ons .impact{
    background:var(--yellow);
    margin-top:0;
    padding:115px 0 60px;
    overflow:hidden;
    position: relative;
  }
  /* egaal geel; Kulwant voegt de shape zelf toe (sokkenpatroon uit style.css uit) */
  .over-ons .impact:before{
    content: " ";
    position: absolute;
    width: 100%;
    height: 198px;
    background: url(../media/stats-top-bg.png) top left no-repeat;
    top: 0px;
    left: 0px;
  }

/* ===== Over ons — waar we voor staan (egaal coral vlak) ===== */
  .overons-values{
    position:relative;
    background:var(--coral);
    padding:200px 0 130px;
    position: relative;
  }
  .overons-values::before{
    content: " ";
    position: absolute;
    width: 100%;
    height: 520px;
    background: url(../media/stats-bottom-bg.png) top left no-repeat;
    top: 0px;
    left: 0px;
  }
  .overons-values .container{
    position:relative;
    z-index:1;
  }
  .overons-values h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1;
    color:var(--white);
    text-align:center;
    margin-bottom:75px;
  }
  .overons-values ul{
    list-style:none;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:110px;
  }
  .values-num{
    display:block;
    /* token-gekoppeld (was hard 15px): body-sm+2 = 15 op 1920, schaalt mee */
    font-size:calc(var(--body-sm-font-size) + 2px);
    font-weight:600;
    color:var(--white);
    margin-bottom:30px;
  }
  .values-img{
    width:120px;
    height:115px;
    border:1.5px dashed rgba(255,255,255,.85);
    border-radius:18px;
    margin-bottom:42px;
  }
  .values-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:18px;
    display:block;
  }
  .overons-values ul h3{
    font-family:var(--roc-grotesk);
    font-weight:700;
    font-size:calc(var(--h3-font-size) - 10px);
    line-height:1.2;
    color:var(--white);
    margin-bottom:14px;
  }
  .overons-values ul p{
    font-size:var(--body-font-size);
    color:var(--white);
  }

/* ===== Over ons — wat klanten zeggen (reviews-slider) ===== */
  .overons-reviews{
    background:var(--light-beige);
    padding:115px 0 95px;
    overflow:hidden;
  }
  .reviews-head{
    text-align:center;
    margin-bottom:60px;
  }
  .reviews-head h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1;
    color:var(--text);
    margin-bottom:20px;
  }
  .reviews-head p{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    font-size:var(--body-lg-font-size);
    color:var(--text);
  }
  .reviews-head p .score{
    font-weight:700;
  }
  .reviews-head p .stars{
    display:flex;
  }
  .reviews-head p a{
    color:var(--text);
    font-weight:600;
    text-transform:uppercase;
    text-decoration:underline;
    text-underline-offset:3px;
  }
  .reviews-swiper .swiper-slide{
    height:auto;
  }
  .review-card{
    background:var(--white);
    border-radius:20px;
    padding:48px 38px 30px;
    height:100%;
    min-height:310px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .review-card .stars{
    display:flex;
    margin-bottom:24px;
  }
  .review-card p{
    font-weight:700;
    font-size:calc(var(--body-font-size) + 3px);
    color:var(--text);
    max-width:330px;
  }
  .review-role{
    margin-top:auto;
    font-size:13px;
    font-weight:500;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text);
    opacity:.62;
  }
  .reviews-nav{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-top:50px;
  }
  .reviews-nav button{
    width:55px;
    height:40px;
    border:1.5px solid var(--dark);
    background:#fff;
    border-radius:7px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .2s;
  }
  .reviews-nav button:disabled{
    opacity:.4;
    cursor:not-allowed;
  }

/* ===== Over ons — met oog voor duurzaamheid ===== */
  .overons-duurz{
    position:relative;
    background:var(--light-beige);
    padding:110px 0 120px;
  }
  .duurz-doodle{
    position:absolute;
    top:26px;
    left:59%;
    width:260px;
    pointer-events:none;
  }
  .overons-duurz h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1;
    color:var(--text);
    margin-bottom:60px;
  }
  .duurz-inner{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:100px;
    align-items:center;
  }
  .duurz-collage{
    display:flex;
    gap:33px;
  }
  .duurz-collage img{
    border-radius:20px;
    object-fit:cover;
    display:block;
  }
  .duurz-collage .img-lg{
    width:400px;
    height:440px;
  }
  .duurz-collage-col{
    display:flex;
    flex-direction:column;
    gap:33px;
  }
  .duurz-collage-col .img-sm{
    width:267px;
    height:203px;
  }
  .duurz-text{
    max-width:560px;
  }
  .duurz-text h3{
    font-family:var(--roc-grotesk);
    font-weight:700;
    font-size:var(--h3-font-size);
    line-height:1.3;
    color:var(--text);
    margin-bottom:24px;
  }
  .duurz-text p{
    font-size:var(--body-font-size);
    color:var(--text);
  }
  .duurz-link{
    margin-top:32px;
  }

/* ===== Over ons — slot-CTA: rij met twee knoppen ===== */
  .cta-final-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
  }
  /* voeten rechts (cta-foot.png) i.p.v. standaard links; steekt boven de coral uit */
  .over-ons .cta-final-panel {
    z-index: 1;
  }
  .over-ons .cta-final-feet,
  .duurzaamheid .cta-final-feet{
    top:-500px;
    left:auto;
    right:0px;
    width: auto;
    height: auto;
  }


/* ==========================================================================
   DUURZAAMHEID-PAGINA (duurzaamheid.html) — page-scope: .duurzaamheid
   ========================================================================== */

/* ===== Duurzaamheid — slot-CTA: witte basis (pagina is wit i.p.v. beige) ===== */
  .duurzaamheid .cta-final{
    background:var(--white);
  }

/* ===== Duurzaamheid — hero ===== */
  .duurzaamheid .breadcrumb{
    color:var(--white);
  }
  .duurzaamheid .breadcrumb a{
    color:var(--white);
  }
  .duurzaamheid .banner-section{
    padding:62px 20px 60px;
  }
  .duurzaamheid .banner-section p{
    color:var(--white);
    font-size:var(--body-lg-font-size);
    max-width:880px;
    margin:26px auto 0;
  }

/* ===== Duurzaamheid — certificaten-tabs ===== */
  .dz-certs{
    background:var(--coral);
    padding:50px 0 130px;
    position: relative;
  }
  .dz-certs::before{
    content: " ";
    position: absolute;
    width: 100%;
    height: 523px;
    left: 0px;
    /* spec 2026-08-12: -40px op 1920; banden pinnen 0 */
    bottom: -40px;
    background: url(../media/duurzaamheid-hero-bg.png) center center no-repeat;
  }
  .dz-certs .container > p{
    font-family:var(--roc-grotesk);
    font-weight:700;
    font-size:calc(var(--body-font-size) + 9px);
    color:var(--white);
    margin-bottom:28px;
  }
  .dz-certs-inner{
    display:grid;
    grid-template-columns:375px 1fr;
    gap:60px;
    align-items:start;
    position: relative;
  }
  .dz-certs-menu{
    list-style:none;
  }
  .dz-certs-menu button{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    background:none;
    border:0;
    border-top:1px solid rgba(255,255,255,.4);
    padding:19px 2px 19px 18px;
    font-family:var(--roc-grotesk-condensed);
    font-weight:500;
    font-size:17px;
    text-transform:uppercase;
    color:var(--white);
    text-align:left;
    cursor:pointer;
  }
  .dz-certs-menu li:last-child button{
    border-bottom:1px solid rgba(255,255,255,.4);
  }
  .dz-certs-menu .dz-tab-arrow{
    display:none;
    line-height:0;
  }
  .dz-certs-menu button.active{
    font-weight:700;
    padding-left:2px;
  }
  .dz-certs-menu button.active .dz-tab-arrow{
    display:inline-flex;
  }
  .dz-pane{
    display:none;
    grid-template-columns:1fr 557px;
    gap:68px;
    align-items:start;
  }
  /* Tab zonder foto: geen lege tweede kolom, de tekst pakt de volle breedte.
     BEWUST met twee classes (0,2,0): de banden in responsive.css zetten elk
     hun eigen grid-template-columns op .dz-pane (0,1,0), en die worden hier
     op specificiteit verslagen — dus in élke band, zonder de regel per band
     te hoeven herhalen. */
  .dz-pane.dz-pane-solo{
    grid-template-columns:1fr;
    gap:0;
  }
  /* Onderaan de sectie ligt duurzaamheid-hero-bg.png: een WITTE wig die
     rechtsonder steil omhoog loopt (op 94% van de breedte begint het wit al
     zo'n 330px boven de onderkant van de sectie). Bij twee kolommen bleef de
     tekst links van die wig, maar op volle breedte loopt hij er tot 94% in —
     en witte tekst op een wit vlak is onleesbaar (melding Kulwant).
     Daarom onder een volle-breedte-tab extra ruimte, zodat de laatste regels
     én de knop boven de wig blijven. Alleen vanaf 768px: daaronder staat de
     afbeelding op ware grootte gecentreerd en is alleen het vlakke midden
     zichtbaar, waar het wit pas ~55px boven de onderkant begint.
     HERZIEN 2026-09-10: die extra ruimte stond hier als een vaste 300px
     vanaf 768px en is uitgecommentarieerd omdat hij op 1440 een leeg gat
     van 300px opleverde — daar is hij ook niet nodig. Nagemeten door de
     PNG te bemonsteren met dezelfde cover-uitsnede als de browser: tot een
     sectiebreedte van ~1570px snijdt cover de steile rechterkant van de wig
     weg en blijft de tekst er ruim boven (op 1425px zelfs 57px marge).
     Daarboven komt die rand wél in beeld en klimt het wit naar 259px (1680)
     en 393px (1920), terwijl de laatste tekstregel op ~202px staat — dus
     wit op wit. De ruimte staat nu in responsive.css, per band op maat,
     alleen vanaf 1550px. */
  .dz-pane.active{
    display:grid;
  }
  .dz-pane-text h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1.05;
    color:var(--white);
    margin-bottom:24px;
  }
  .dz-pane-text p{
    font-size:var(--body-font-size);
    color:var(--white);
    margin-bottom:24px;
  }
  .dz-pane-text p:last-child{
    margin-bottom:0;
  }
  /* Sinds het tekstveld een wysiwyg is, kan de redacteur hier ook vet,
     opsommingen en links kwijt. Alles staat op het corale vlak, dus wit —
     de kleur wordt van de container geerfd zodat losse tekst (zonder <p>)
     niet terugvalt op de donkere basiskleur. */
  .dz-pane-text{ color:var(--white); }
  .dz-pane-text strong,
  .dz-pane-text b{ font-weight:700; }
  .dz-pane-text ul,
  .dz-pane-text ol{
    font-size:var(--body-font-size);
    line-height:26px;
    margin:0 0 24px;
    padding-left:20px;
  }
  .dz-pane-text ul{ list-style:disc; }
  .dz-pane-text ol{ list-style:decimal; }
  .dz-pane-text li{ margin-bottom:8px; }
  .dz-pane-text li:last-child{ margin-bottom:0; }
  .dz-pane-text ul:last-child,
  .dz-pane-text ol:last-child{ margin-bottom:0; }
  .dz-pane-text a{
    color:var(--white);
    text-decoration:underline;
  }
  /* De 'Lees meer'-knop is dezelfde als op de homepage, maar staat hier op
     het corale vlak: dus wit en zonder onderstreping (die geldt alleen voor
     links IN de tekst). Het pijltje erft de kleur via stroke="currentColor". */
  .dz-pane-text .brand-intro-toggle{
    color:var(--white);
    text-decoration:none;
    margin-top:22px;
  }
  .dz-pane-text .brand-collapse{ margin-bottom:0; }
  /* Certificaatlogo onder de tekst (CMS-veld 'keurmerk'). Vaste maximale
     breedte zodat een groot bronbestand het tekstblok niet uit elkaar trekt;
     op smalle schermen schaalt hij mee. */
  .dz-cert-logo{
    display:block;
    width:100%;
    max-width:260px;
    height:auto;
    margin:28px 0 0;
  }
  /* De laatste alinea binnen het ingeklapte blok mag geen marge houden,
     anders zit er te veel lucht tussen de tekst en de knop. */
  .dz-pane-text .brand-collapse > :last-child{ margin-bottom:0; }
  .dz-pane-img img{
    width:100%;
    height:435px;
    object-fit:cover;
    border-radius:14px;
    display:block;
  }
  /* Logo/zegel in plaats van een foto: helemaal tonen, NIET bijsnijden en
     ook niet uitvergroten. Een logo van 300x300 werd anders opgerekt naar
     het vlak van 557x435 en verloor zijn scherpte. Geen radius: die hoort
     bij een fotovlak, niet bij een vrijstaand logo. */
  .dz-pane-img.is-logo img{
    width:auto;
    max-width:100%;
    height:auto;
    max-height:435px;
    object-fit:contain;
    border-radius:0;
    margin:0 auto;
  }

/* ===== Duurzaamheid — certificaten en keurmerken (kaarten) ===== */
  .dz-keur{
    background:var(--white);
    padding:40px 0 60px;
  }
  .dz-keur h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1;
    color:var(--text);
    text-align:center;
    margin-bottom:45px;
  }
  .dz-keur-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  .dz-keur-card{
    background:var(--light-beige);
    border-radius:16px;
    padding:40px 36px 42px;
  }
  .dz-keur-card img{
    height:90px;
    width:auto;
    display:block;
    margin-bottom:28px;
    /* zelfde witte PNG's als de footer-badges; hier donker (XD) via filter */
    filter:brightness(0);
  }
  .dz-keur-card h3{
    font-family:var(--roc-grotesk);
    font-weight:700;
    font-size:calc(var(--h3-font-size) - 12px);
    color:var(--text);
    margin-bottom:12px;
  }
  .dz-keur-card p{
    font-size:var(--body-font-size);
    color:var(--text);
  }

/* ===== Duurzaamheid — hoe duurzaam is Sokkies nu echt? ===== */
  .dz-points{
    background:var(--white);
    padding:60px 0 140px;
  }
  .dz-points-inner{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:100px;
    align-items:start;
  }
  .dz-points-text{
    max-width:680px;
  }
  .dz-points-text h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1;
    color:var(--text);
    margin-bottom:22px;
  }
  .dz-points-text > p:first-of-type{
    font-size:var(--body-font-size);
    color:var(--text);
    margin-bottom:30px;
  }
  .dz-points-text ol{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-bottom:34px;
  }
  .dz-points-text ol li{
    display:flex;
    align-items:flex-start;
    gap:16px;
  }
  .dz-point-num{
    flex:0 0 auto;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--dark);
    color:var(--white);
    font-size:14px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .dz-points-text ol p{
    font-weight:700;
    font-size:var(--body-lg-font-size);
    color:var(--text);
    padding-top:4px;
  }
  .dz-points-text > p:last-of-type{
    font-size:var(--body-font-size);
    color:var(--text);
    margin-bottom:26px;
  }


/* ==========================================================================
   PARTNERS-PAGINA (partners.html) — page-scope: .partners
   ========================================================================== */

/* ===== Partners — voordelen voor partners ===== */
  .pt-perks{
    background:var(--white);
    padding:95px 0 110px;
  }
  .pt-perks h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1;
    color:var(--text);
    margin-bottom:42px;
  }
  .pt-perks-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:23px;
    /* kaarten op inhoudshoogte (XD: derde kaart is hoger), niet gelijk rekken */
    align-items:start;
  }
  .pt-perks-card{
    background:var(--light-beige);
    border-radius:24px;
    padding:38px 40px 42px;
  }
  .pt-perks-card h3{
    font-family:var(--roc-grotesk);
    font-weight:700;
    font-size:calc(var(--h3-font-size) - 12px);
    color:var(--text);
    margin-bottom:12px;
  }
  .pt-perks-card p{
    font-size:var(--body-font-size);
    color:var(--text);
  }

/* ===== Partners — onze partners (logo-grid met filter) ===== */
  .pt-partners{
    background:var(--white);
    padding:25px 0 130px;
  }
  .pt-partners h2{
    font-family:var(--roc-grotesk);
    font-weight:700;
    font-size:calc(var(--h2-font-size) - 22px);
    color:var(--text);
    text-align:center;
    margin-bottom:22px;
  }
  .pt-partners-chips{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:32px;
  }
  .pt-partners-chips button{
    border:1px solid var(--dark);
    background:var(--white);
    color:var(--text);
    font-size:var(--body-font-size);
    font-weight:500;
    border-radius:50px;
    padding:8px 22px;
    cursor:pointer;
    transition:all .2s;
  }
  .pt-partners-chips button.active{
    background:var(--dark);
    border-color:var(--dark);
    color:var(--white);
  }
  .pt-partners-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:30px 24px;
  }
  .pt-partner-card{
    height:150px;
    background:var(--white);
    border:1px solid #ececec;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px 30px;
  }
  .pt-partner-card img{
    max-width:170px;
    max-height:64px;
    width:auto;
    height:auto;
    object-fit:contain;
  }

/* ===== Partners — officiële partner van One Tree Planted ===== */
  .pt-otp{
    background:var(--coral);
    padding:370px 0 0px;
    position: relative;
  }
  /* benen met gele sokken rechts, over de witte shape heen (img staat ná de :before) */
  .pt-otp-legs{
    position: absolute;
    top: -160px;
    right: 0;
    width: 582px;
    pointer-events:none;
  }
  /* gele sok-doodles (outline) midden op de witte golf */
  .pt-otp-doodle{
    position:absolute;
    top:70px;
    left:40%;
    width:340px;
    pointer-events:none;
  }
.pt-otp:before{
  content: " ";
  position: absolute;
  left: 0px;
  top: -130px;
  background: url(../media/official-partner-top-bg.png) center center no-repeat;
  width: 100%;
  height: 425px;
}

  .pt-otp-inner{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:100px;
    align-items:center;
    position: relative;
    z-index: 1;
  }
  .pt-otp-imgs{
    display:flex;
    gap:22px;
  }


  .pt-otp-imgs img{
    border-radius:20px;
    object-fit:cover;
    display:block;
  }
  /* proportioneel i.p.v. vaste px (332/457×352 op 1920) — flex-ratio +
     aspect-ratio rendert op 1920 identiek en schaalt met de wrapper mee;
     min-width:0 tegen het replaced-element-minimum (huisles) */
  .pt-otp-imgs .img-sm{
    flex:332 1 0;
    min-width:0;
    height:auto;
    aspect-ratio:332/352;
  }
  .pt-otp-imgs .img-lg{
    flex:457 1 0;
    min-width:0;
    height:auto;
    aspect-ratio:457/352;
  }
  .pt-otp-text{
    max-width:500px;
  }
  .pt-otp-text h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1.15;
    color:var(--white);
    margin-bottom:24px;
  }
  .pt-otp-text p{
    font-size:var(--body-font-size);
    color:var(--white);
  }

/* ===== Partners — veelgestelde vragen voor partners (geel) ===== */
  .pt-faq{
    background:var(--yellow);
    padding:260px 0 100px;
    position: relative;
      margin-top: -110px;
  }
  .pt-faq::before{
    content: " ";
    position: absolute;
    width: 100%;
    height: 744px;
    background: url(../media/partner-faqs-top-bg.png) center center no-repeat;
    left: 0px;
    top: 0px;
  }
  .pt-faq-inner{
    max-width:1000px;
    margin:0 auto;
    position: relative;
  }
  .pt-faq-inner h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1;
    color:var(--text);
    margin-bottom:26px;
  }
  .pt-faq .faq-item{
    border-color:rgba(40,18,27,.35);
  }
  /* eerste item staat in de HTML al open; JS zet max-height pas bij klik */
  .pt-faq .faq-item.is-open .faq-a{
    max-height:none;
  }
  .pt-faq .faq-a-inner p,
  .pt-faq .faq-a-inner ul,
  .pt-faq .faq-a-inner ol{
    max-width:none;
  }

/* ===== Partners — brochure en inspiratiegids (downloads) ===== */
  .pt-dl{
    background:var(--light-beige);
    padding:100px 0 142px;
  }
  .pt-dl h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1;
    color:var(--text);
    margin-bottom:14px;
  }
  .pt-dl .container-md > p{
    font-size:var(--body-font-size);
    color:var(--text);
    margin-bottom:40px;
  }
  .pt-dl-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  .pt-dl-card{
    background:var(--white);
    border:1px solid var(--text);
    border-radius:20px;
    padding:10px 10px 20px;
    display:flex;
    flex-direction:column;
  }
  .pt-dl-img{
    background:var(--light-beige);
    border-radius:14px;
    height:345px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
  }
  .pt-dl-tag{
    align-self:flex-start;
    background:var(--light-beige);
    border-radius:6px;
    padding:4px 10px;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--text);
    margin:0 8px 12px;
  }
  .pt-dl-card h3{
    font-family:var(--roc-grotesk);
    font-weight:700;
    /* h5−1 i.p.v. h3−12 (herijkt 2026-08-10): identiek 22px op 1920,
       proportioneel in de banden */
    font-size:calc(var(--h5-font-size) - 1px);
    color:var(--text);
    margin:0 8px 8px;
  }
  .pt-dl-card > p{
    font-size:var(--body-font-size);
    color:var(--text);
    margin:0 8px 16px;
  }
  .pt-dl-link{
    margin:auto 8px 0;
  }
  .pt-dl-form-card{
    position:relative;
    justify-content:center;
    padding:40px 44px;
  }
  /* NB: overige props kwamen al uit `.pt-dl-card h3` (won vóór de refactor
     op specificiteit van de oude `.pt-dl-form-title`); alleen line-height
     was effectief — zo blijft de weergave identiek. */
  .pt-dl-form-card h3{
    line-height:1.2;
    font-size: var(--h3-font-size)
  }
  .pt-dl-label{
    display:block;
    font-size:var(--body-font-size);
    font-weight:700;
    color:var(--text);
    margin-bottom:8px;
  }
  .pt-dl-input{
    margin-bottom:18px;
  }
  .pt-dl-btn{
    width:100%;
    background:var(--dark);
    color:var(--white);
    border:0;
    border-radius:50px;
    padding:14px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:opacity .2s;
  }
  .pt-dl-btn:hover{
    opacity:.9;
  }
  /* Geruststellende regel onder de verzendknop. Was .pt-dl-sticker: geroteerde
     rode kapitalen rechtsonder, absoluut gepositioneerd. Die stond los van de
     rest van de site en is op verzoek vervangen door gewone bodytekst in de
     flow — dus ook geen gereserveerde ruimte onderin de kaart meer (zie de
     paddings in responsive.css). Gecentreerd omdat de knop erboven
     volledige breedte heeft. */
  .pt-dl-form-card p{
    margin-top:14px;
    color:var(--text);
    font-size:var(--body-font-size);
    line-height:1.6;
    text-align:center;
  }

  .partners .cta-final{
    background: var(--yellow);
  }



/* ==========================================================================
   DOWNLOADS-PAGINA (downloads.html) — page-scope: .downloads
   ========================================================================== */

/* ===== Downloads — hero (beige, donkere tekst) ===== */
  .downloads .hero-section{
    background:var(--light-beige);
  }
  .downloads .banner-section{
    padding:50px 20px 80px;
  }
  .downloads .banner-section h1{
    color:var(--text);
  }
  .downloads .banner-section p{
    font-size:var(--body-lg-font-size);
    color:var(--text);
    margin:22px auto 0;
  }

/* ===== Downloads — download-kaarten ===== */
  .dl-cards{
    background:var(--white);
    padding:80px 0 110px;
  }
  /* Twee groepen onder elkaar (Downloads en Templates) zijn twee van deze
     secties, en die zetten samen 110 + 80 = 190px tussen de laatste kaart
     en de volgende kop. Dat leest als een gat in de pagina. Samen 70px is
     genoeg: duidelijk meer dan de 30px tussen de kaartenrijen onderling,
     zonder dat de groepen uit elkaar vallen. */
  .dl-cards:has(+ .dl-cards){
    padding-bottom:70px;
  }
  .dl-cards + .dl-cards{
    padding-top:0;
  }
  .dl-cards-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:43px 45px;
  }
  .dl-card{
    display:flex;
    align-items:center;
    gap:45px;
    background:var(--white);
    border:1px solid var(--text);
    border-radius:16px;
    padding:14px;
  }
  /* Het beeldvlak is LIGGEND (16:9) en snijdt niets af. De mockups van
     Sokkies zijn liggend — de brochures meten 1672 x 941 — en die werden
     in het oude, bijna vierkante vak van 195 x 200 met object-fit:cover
     tot een strookje bijgesneden (R2-11.2).
     object-fit:contain in plaats van cover: het hele product blijft in
     beeld. Een afbeelding met een andere verhouding (de templates zijn
     500 x 417) krijgt dus beige randen links en rechts in plaats van dat
     er iets wegvalt; alle kaarten houden daardoor hetzelfde formaat. */
  .dl-card-img{
    /* Meeschalend met de kaart, met een bovengrens. Een vaste 288px liet
       op 992px maar 118px over voor de titel (de kaart is daar 455 breed),
       en dan wikkelt "Labeltemplate - horizontaal" over drie regels. */
    flex:0 0 min(45%, 320px);
    aspect-ratio:16 / 9;
    background:var(--light-beige);
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow: hidden;
  }
  .dl-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* Kop boven een groep kaarten (Downloads / Templates). Elke sectie
     heeft er een, dus er is geen extra ruimte bovenin nodig: de
     sectiepadding zorgt al voor de afstand tot het blok erboven. */
  .dl-groep-kop{
    font-family:var(--roc-grotesk-condensed);
    text-transform:uppercase;
    margin-bottom:30px;
  }
  .dl-card-body{
    padding-right:24px;
  }
  .dl-card-body h3{
    font-family:var(--roc-grotesk);
    font-weight:700;
    /* h5−1 i.p.v. h3−12 (herijkt 2026-08-10): identiek 22px op 1920,
       proportioneel in de banden — de vaste −12 werd daar 14px */
    font-size:calc(var(--h5-font-size) - 1px);
    color:var(--text);
    margin-bottom:10px;
  }
  .dl-card-body p{
    font-size:var(--body-font-size);
    color:var(--text);
    margin-bottom:16px;
  }

/* ===== Downloads — slot-CTA "Mis niets" met formulier ===== */
  .downloads .cta-final{
    background:var(--white);
  }
  .downloads .cta-final-panel{
    padding-bottom:130px;
  }
  .downloads .cta-final-panel > .container > p{
    max-width:840px;
    margin-left:auto;
    margin-right:auto;
  }
  .dl-niets-card{
    position:relative;
    width:820px;
    max-width:100%;
    margin:0 auto;
    background:var(--white);
    border-radius:24px;
    padding:38px 44px 46px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    text-align:left;
  }
  .dl-niets-field label{
    display:block;
    font-size:var(--body-font-size);
    font-weight:700;
    color:var(--text);
    margin-bottom:8px;
  }
  .dl-niets-btn{
    position:absolute;
    right:55px;
    bottom:-24px;
    background:var(--dark);
    color:var(--white);
    border:0;
    border-radius:50px;
    padding:14px 30px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:opacity .2s;
  }
  .dl-niets-btn:hover{
    opacity:.9;
  }



/* ==========================================================================
   CONTACT-PAGINA (contact.html) — page-scope: .contact
   ========================================================================== */

/* ===== Contact — paginabrede achtergrond (coral + witte diagonaal in één image) ===== */
  .contact{
    background:var(--white) url(../media/contact-page-bg.png) no-repeat center top;
    background-size:100% auto;
  }
  .contact .hero-section{
    background:transparent;
  }
  .contact-radio .gfield_label.gform-field-label {
    display: none;
  }

/* ===== Contact — hero ===== */
  .contact .breadcrumb{
    color:var(--white);
  }
  .contact .breadcrumb a{
    color:var(--white);
  }
  .contact .banner-section{
    padding:62px 20px 80px;
  }
  .contact .banner-section p{
    color:var(--white);
    font-size:var(--body-lg-font-size);
    max-width:880px;
    margin:24px auto 0;
  }

/* ===== Contact — formulier + direct contact (kaarten over de hero) ===== */
main.contact{
  background: url(../media/contact-page-bg.png) left top no-repeat;
}
  .ct-contact{
    background:transparent;
    padding:0 0 110px;
  }
  .ct-contact-inner{
    position:relative;
    display:grid;
    grid-template-columns:1fr 485px;
    gap:40px;
    align-items:start;
  }
  .ct-form-card{
    background:var(--white);
    border:1px solid var(--text);
    border-radius:24px;
    padding:48px 50px 40px;
  }
  .ct-form-card h3{
    font-family:var(--roc-grotesk);
    font-weight:700;
    /* h5−1 i.p.v. h3−12 (herijkt 2026-08-10, zelfde als ct-direct) */
    font-size:calc(var(--h5-font-size) - 1px);
    color:var(--text);
    margin-bottom:18px;
  }
  .ct-radios{
    display:flex;
    flex-wrap:wrap;
    gap:12px 40px;
    margin-bottom:28px;
  }
  .ct-radios label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:var(--body-font-size);
    color:var(--text);
    cursor:pointer;
  }
  .ct-radios input[type="radio"]{
    width:18px;
    height:18px;
    accent-color:var(--dark);
  }
  .ct-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px 40px;
  }
  .ct-field label{
    display:block;
    font-size:var(--body-font-size);
    font-weight:700;
    color:var(--text);
    margin-bottom:8px;
  }
  .ct-field input,
  .ct-field textarea{
    font-family:inherit;
  }
  .ct-field textarea{
    min-height:135px;
    resize:vertical;
  }
  .ct-field-full{
    grid-column:1 / -1;
  }
  .ct-form-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    margin-top:30px;
  }
  .ct-form-foot p{
    font-size:calc(var(--body-font-size) - 2px);
    color:var(--text);
  }
  .ct-form-foot p a{
    color:var(--text);
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .ct-form-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .ct-alt-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--dark);
    border-radius:50px;
    padding:12px 24px;
    font-size:16px;
    font-weight:600;
    color:var(--text);
    text-decoration:none;
    background:var(--white);
    transition:background .2s;
  }
  .ct-alt-btn:hover{
    background:var(--light-beige);
  }
  .ct-submit{
    background:var(--dark);
    color:var(--white);
    border:0;
    border-radius:50px;
    padding:14px 28px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:opacity .2s;
  }
  .ct-submit:hover{
    opacity:.9;
  }
  .ct-direct{
    background:var(--yellow);
    border-radius:24px;
    padding:44px 48px;
  }
  .ct-direct h3{
    font-family:var(--roc-grotesk);
    font-weight:700;
    /* h5−1 i.p.v. h3−12 (herijkt 2026-08-10): identiek 22px op 1920,
       proportioneel in de banden — de vaste −12 werd daar 14px */
    font-size:calc(var(--h5-font-size) - 1px);
    color:var(--text);
    margin-bottom:18px;
  }
  .ct-direct p{
    font-size:var(--body-font-size);
    color:var(--text);
  }
  .ct-direct a{
    color:var(--text);
    text-decoration:none;
  }
  .ct-direct p:nth-of-type(4), .ct-direct p:nth-of-type(5){
    margin-top:22px;
  }
  .ct-direct-note{
    font-size:15px;
    line-height:1.5;
    display:inline-block;
    margin-top:4px;
  }



/* ==========================================================================
   JURIDISCH-TEMPLATE (juridisch.html) — page-scope: .juridisch
   ========================================================================== */

/* ===== Juridisch — hero (beige, donkere tekst; titel/datum per pagina) ===== */
  .juridisch .hero-section{
    background:var(--light-beige);
  }
  .juridisch .banner-section{
    padding:50px 20px 80px;
  }
  .juridisch .banner-section h1{
    color:var(--text);
  }
  .juridisch .banner-section p{
    font-size:var(--body-font-size);
    color:var(--text);
    margin:18px auto 0;
  }

/* ===== Juridisch — inhoud met index ===== */
  /* print-knop rechtsboven de content (XD) — window.print via custom.js */
  .jr-inner{
    position:relative;
  }
  .jr-print{
    position:absolute;
    top:4px;
    right:0;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--white);
    border:1px solid var(--input-border);
    border-radius:50%;
    cursor:pointer;
    transition:border-color .2s;
  }
  .jr-print:hover{
    border-color:var(--text);
  }
  .jr-content{
    background:var(--white);
    padding:80px 0 130px;
  }
  .jr-inner{
    display:grid;
    grid-template-columns:390px 1fr;
    gap:45px;
    align-items:start;
  }
  .jr-index{
    background:var(--white);
    border:1px solid var(--text);
    border-radius:24px;
    padding:32px 36px;
    /* spec 2026-08-12: sticky binnen de sectie op 1920 (zelfde offset als de
       sticky printknop — onder het sticky chrome); jr-inner heeft
       align-items:start dus de kaart is content-hoog. Banden pinnen hun
       eigen staat (1440/1280 static, ≤1279 fixed onderbalk met top:auto). */
    position:sticky;
    top:130px;
  }
  .jr-index h3{
    font-family:var(--roc-grotesk);
    font-weight:700;
    /* body-lg-token i.p.v. h3−15 (herijkt 2026-08-10): identiek 19px op
       1920, proportioneel in de banden — de vaste −15 werd daar 11px */
    font-size:var(--body-lg-font-size);
    color:var(--text);
    margin-bottom:16px;
  }
  .jr-index ol{
    padding-left:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .jr-index li{
    font-size:var(--body-font-size);
    line-height:1.4;
    color:var(--text);
    padding-left:6px;
  }
  .jr-index a{
    color:var(--text);
    text-decoration:none;
  }
  .jr-index a:hover{
    color:var(--coral);
  }
  .jr-body{
    max-width:845px;
  }
  .jr-body > p{
    font-size:var(--body-font-size);
    color:var(--text);
  }
  /* Links in de lopende tekst stonden op het browserblauw; dat viel buiten
     het palet. Nu zwart met onderstreping, en coral bij hover — hetzelfde
     accent als de index-links hierboven. */
  .jr-body a{
    color:var(--text);
    text-decoration:underline;
    text-underline-offset:2px;
    transition:color .2s;
  }
  .jr-body a:hover{
    color:var(--coral);
  }
  .jr-article{
    margin-top:32px;
    /* de topbar (30px) + headerpill zijn sticky en zweven over de inhoud;
       zonder deze marge landt een indexklik met de kop ONDER de pill
       (melding Kulwant op de privacyverklaring) */
    scroll-margin-top:150px;
  }
  .jr-article h3{
    font-family:var(--roc-grotesk);
    font-weight:700;
    /* body-lg-token i.p.v. h3−15 (herijkt 2026-08-10): identiek 19px op
       1920, proportioneel in de banden — de vaste −15 werd daar 11px */
    font-size:var(--body-lg-font-size);
    color:var(--text);
    margin-bottom:10px;
  }
  /* Lijstjes in juridische artikelen: zelfde letter en regelafstand als
     de alinea's, met een nette inspringing en wat lucht (de bron gebruikt
     veel opsommingen; die stonden er kaal en krap bij). */
  .jr-article ul,
  .jr-article ol,
  .jr-body > ul,
  .jr-body > ol{
    font-size:var(--body-font-size);
    line-height:26px;
    color:var(--text);
    margin:10px 0 16px;
    padding-left:24px;
  }
  .jr-article li{
    margin-bottom:6px;
  }
  .jr-article li:last-child{
    margin-bottom:0;
  }
  .jr-article p{
    font-size:var(--body-font-size);
    color:var(--text);
  }
  /* Eenvoudige juridische pagina zonder index (bv. de disclaimer): de
     tekst loopt gecentreerd over de volle breedte in plaats van naast de
     indexkaart. Dubbele klasse omdat de banden in responsive.css hun eigen
     .jr-inner/.jr-body-kolommen zetten. */
  .jr-inner.jr-inner-simpel{
    grid-template-columns:minmax(0,1fr);
    gap:0;
  }
  .jr-inner.jr-inner-simpel .jr-body{
    grid-column:1;
    grid-row:1;
    max-width:845px;
    margin:0 auto;
  }
  /* de printknop deelt de cel met de tekst (zoals in de banden), anders
     maakt grid-row:2 uit de bandregels een lege tweede rij */
  .jr-inner.jr-inner-simpel .jr-print{
    grid-column:1;
    grid-row:1;
    justify-self:end;
    align-self:start;
  }
  /* de alinea's staan hier los onder elkaar en hebben zelf lucht nodig —
     .jr-body > p heeft geen ondermarge (bij de andere pagina's is de
     intro maar een alinea, gevolgd door een artikel met margin-top) */
  .jr-inner.jr-inner-simpel .jr-body > p + p{
    margin-top:18px;
  }



/* ==========================================================================
   404-PAGINA (404.html) — page-scope: .error-404
   ========================================================================== */

/* ===== 404 — hero op paginabrede wasmachine-achtergrond ===== */
  .error-404{
    background:var(--white) url(../media/error-page-bg.png) no-repeat center top;
    background-size:120% auto;
    min-height:100vh;
  }
  .er-hero{
    padding:22vh 0 6vh;
    text-align:center;
  }
  .er-num{
    font-family:var(--roc-grotesk);
    font-weight:700;
    font-size:240px;
    line-height:.8;
    color:var(--coral);
  }
  .er-hero h1{
    font-family:var(--roc-grotesk);
    font-weight:700;
    /* h5+1 i.p.v. h1−46 (herijkt 2026-08-12): identiek 24px op 1920 —
       de vaste −46 werd 12px in de 1440-band en 6px daaronder */
    font-size:calc(var(--h5-font-size) + 1px);
    line-height:1.3;
    color:var(--text);
    margin-top:20px;
  }
  .er-hero p{
    font-size:var(--body-font-size);
    color:var(--text);
    margin-top:12px;
  }
  .er-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:16px;
  }

/* ===== 404 — of ga direct naar ===== */
  .er-links{
    padding:6vh 0;
    text-align:center;
  }
  .er-links h3{
    font-family:var(--roc-grotesk);
    font-weight:700;
    /* h5−1 i.p.v. h3−12 (herijkt 2026-08-12): identiek 22px op 1920 */
    font-size:calc(var(--h5-font-size) - 1px);
    color:var(--text);
    margin-bottom:26px;
  }
  .er-links-row{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
  }
  .er-links-row a{
    display:inline-flex;
    border:1px solid var(--dark);
    border-radius:50px;
    padding:11px 26px;
    font-size:var(--body-font-size);
    font-weight:700;
    color:var(--text);
    text-decoration:none;
    background:var(--white);
    transition:background .2s;
  }
  .er-links-row a:hover{
    background:var(--light-beige);
  }



/* ==========================================================================
   WAAROM-SOKKIES-PAGINA (waarom-sokkies.html) — page-scope: .waarom-sokkies
   ========================================================================== */

/* ===== Waarom Sokkies — intro-masonry (titel + 6 kaarten, geen aparte hero) ===== */
  .ws-intro{
    background:var(--light-beige);
    padding:0 0 100px;
    position: relative;
  }
  .ws-intro::before{
    content: " ";
    position: absolute;
    width: 100%;
    height: 768px;
    background: url(../media/ws-hero-bottom-bg.png) left bottom no-repeat;
    left: 0px;
    /* spec 2026-08-12: 40px op 1920; banden pinnen 0 (≤520 had al -40) */
    bottom: 40px;
  }
  .ws-intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:start;
    margin-top:55px;
    position: relative;
  }
  .ws-intro-head{
    text-align:right;
    margin-bottom:95px;
  }
  .ws-intro-head h1{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h1-font-size);
    line-height:var(--h1-line-height);
    color:var(--text);
  }
  .ws-intro-head p{
    font-size:var(--body-lg-font-size);
    color:var(--text);
    max-width:465px;
    margin:16px 0 0 auto;
  }
  .ws-row{
    display:grid;
    gap:22px;
    align-items:start;
  }
  .ws-row-sm-lg{
    grid-template-columns:327fr 461fr;
  }
  .ws-row-lg-sm{
    grid-template-columns:461fr 327fr;
  }
  .ws-row-gap{
    margin-top:60px;
  }
  .ws-card{
    background:var(--white);
    border-radius:16px;
    overflow:hidden;
  }
  .ws-card img{
    width:100%;
    display:block;
    object-fit:cover;
  }
  .ws-row-sm-lg .ws-card:first-child img,
  .ws-row-lg-sm .ws-card:last-child img{
    height:265px;
  }
  .ws-row-sm-lg .ws-card:last-child img,
  .ws-row-lg-sm .ws-card:first-child img{
    height:372px;
  }
  .ws-card-offset{
    margin-top:130px;
  }
  .ws-card-body{
    padding:22px 22px 26px;
  }
  .ws-card-body h3{
    font-family:var(--roc-grotesk);
    font-weight:700;
    /* h5−1 i.p.v. h3−12 (herijkt 2026-08-10): identiek 22px op 1920 maar
       schaalt proportioneel — de vaste −12 werd 14px in de banden */
    font-size:calc(var(--h5-font-size) - 1px);
    color:var(--text);
    margin-bottom:8px;
  }
  .ws-card-body p{
    font-size:var(--body-font-size);
    color:var(--text);
  }

/* ===== Waarom Sokkies — vergelijkingstabel (egaal cyaan; shapes voegt Kulwant toe) ===== */
  .ws-compare{
    /* zelfde felle cyaan als home's .designed-band en .design-now */
    background:#87e1f0;
    padding:0px;
    /* spec 2026-08-12 (1920); banden pinnen 0/0 */
    padding-top:40px;
    margin-top:-40px;
    position: relative;
  }
  /* Blauwe sok-doodles links van de compare (XD dev 2026-08-12) — negatieve
     top: ze vallen over de cyaan golf van de intro (sectie clipt niet).
     Banden verbergen ze (alleen 1920-ontwerp). */
  .ws-compare-doodle-1{
    position:absolute;
    left:280px;
    top:-250px;
    width:240px;
    transform:rotate(30deg);
    pointer-events:none;
  }
  .ws-compare h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1;
    color:var(--blue);
    text-align:center;
    margin-bottom:55px;
  }
  .ws-compare-scroll{
    overflow-x:auto;
    position: relative;
    z-index: 1;
  }
  .ws-compare-table{
    width:1140px;
    max-width:100%;
    margin:0 auto;
    border-collapse:separate;
    border-spacing:0;
  }
  .ws-compare-table th,
  .ws-compare-table td{
    text-align:center;
    vertical-align:middle;
    height:49px;
    padding:6px 14px;
    font-size:var(--body-font-size);
    color:var(--text);
  }
  .ws-compare-table thead th{
    font-family:var(--roc-grotesk);
    font-weight:700;
    font-size:19px;
    color:var(--blue);
    height:66px;
  }
  .ws-compare-table thead th:first-child,
  .ws-compare-table tbody th{
    text-align:left;
    padding-left:22px;
  }
  .ws-compare-table tbody th{
    font-weight:400;
  }
  .ws-compare-table th:first-child{
    width:562px;
  }
  .ws-compare-table th:nth-child(2),
  .ws-compare-table th:last-child{
    width:289px;
  }
  .ws-compare-table svg{
    display:block;
    margin:0 auto;
  }
  /* om-en-om lichte rij-pillen */
  .ws-compare-table tbody tr:nth-child(odd) th,
  .ws-compare-table tbody tr:nth-child(odd) td{
    background:rgba(255,255,255,.35);
    border-top:1px solid rgba(255,255,255,.9);
    border-bottom:1px solid rgba(255,255,255,.9);
  }
  .ws-compare-table tbody tr:nth-child(odd) th{
    border-left:1px solid rgba(255,255,255,.9);
    border-radius:8px 0 0 8px;
  }
  .ws-compare-table tbody tr:nth-child(odd) td:last-child{
    border-right:1px solid rgba(255,255,255,.9);
    border-radius:0 8px 8px 0;
  }
  /* uitgelichte Sokkies-kolom als doorlopend paneel */
  .ws-compare-table .ws-cmp-sokkies{
    background:rgba(255,255,255,.28);
    border-left:1px solid #fff;
    border-right:1px solid #fff;
  }
  .ws-compare-table thead .ws-cmp-sokkies{
    border-top:1px solid #fff;
    border-radius:14px 14px 0 0;
  }
  .ws-compare-table tbody tr:last-child .ws-cmp-sokkies{
    border-bottom:1px solid #fff;
    border-radius:0 0 14px 14px;
  }
  .ws-compare-table tbody tr:nth-child(odd) .ws-cmp-sokkies{
    background:rgba(255,255,255,.5);
  }
  .ws-cmp-logo{
    width:96px;
    height:auto;
    display:block;
    margin:0 auto;
  }

/* ===== Waarom Sokkies — wat je bij ons krijgt ===== */
  .ws-gets{
    position:relative;
    background:var(--white) url(../media/ws-get-bg.png) repeat center top;
    /* extra onderruimte: de standaard cta-final-feet steken hier omhoog */
    padding:310px 0 220px;
  }
   .ws-gets::before{
    content: " ";
    position: absolute;
    width: 100%;
    height: 418px;
    background: url(../media/ws-compare-bottom-bg.png) left top no-repeat;
    top: -220px;
    left: 0px;
  }
  .ws-gets-inner{
    display:grid;
    grid-template-columns:1fr 845px;
    gap:100px;
    align-items:start;
  }
  .ws-gets-left h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1;
    color:var(--text);
    margin-bottom:55px;
  }
  .ws-gets-left ol{
    list-style:none;
  }
  .ws-gets-left ol li{
    display:flex;
    align-items:center;
    gap:20px;
    padding:36px 10px;
    border-top:1px solid #d9d4cd;
  }
  .ws-gets-left ol li:last-child{
    border-bottom:1px solid #d9d4cd;
  }
  .ws-gets-num{
    flex:0 0 118px;
    font-size:var(--body-font-size);
    color:var(--text);
  }
  .ws-gets-arrow{
    display:flex;
    flex:0 0 auto;
  }
  .ws-gets-left ol p{
    font-family:var(--roc-grotesk);
    font-weight:700;
    /* spec 2026-08-12: 23px op 1920 = exact het h5-token (was body-lg);
       banden pinnen body-lg — alleen 1920 */
    font-size:var(--h5-font-size);
    color:var(--text);
  }
  .ws-gets-imgs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:start;
  }
  .ws-gets-imgcol{
    display:grid;
    gap:16px;
  }
  .ws-gets-imgcol img{
    width:100%;
    height:418px;
    object-fit:cover;
    border-radius:24px;
    display:block;
  }
  .ws-gets-imgcol-offset{
    margin-top:58px;
  }

/* ===== Waarom Sokkies — slot-CTA (witte basis) ===== */
  .waarom-sokkies .cta-final{
    background:var(--white);
  }




/* ===== WP-toevoeging (2026-08-19, verzoek Kulwant): hero-subtekst op de
   HOMEPAGE — het XD heeft daar geen sub; zelfde recept als de
   duurzaamheid-hero zodat het veld ook op home netjes rendert.
   Alleen in de THEMA-css; htmlv blijft 1:1 het ontwerp. ===== */
  .home .banner-section p{
    color:var(--white);
    font-size:var(--body-lg-font-size);
    max-width:880px;
    margin:26px auto 0;
  }

/* ===== Inklapbaar merkverhaal (WP-toevoeging, staat niet in htmlv) =====
   De sectie kan per pagina worden ingeklapt; 'Lees meer' klapt uit.
   Geen mask/gradient-fade: die zijn op dit project verboden (zie CLAUDE.md,
   mask rendert onbetrouwbaar in Chrome op macOS). Gewoon een nette clip. */
  .brand-collapse{
    overflow:hidden;
    transition:max-height .35s ease;
  }
  .brand-intro-toggle{
    cursor:pointer;
    /* lucht tussen de afgeknipte tekst en de knop; alleen op de
       inklap-variant, zodat de gewone doorlink niet verspringt */
    margin-top:22px;
  }
  /* pijl wijst omlaag bij ingeklapt, omhoog zodra de tekst openstaat */
  .brand-intro-toggle svg{
    transition:transform .25s ease;
  }
  .brand-intro-toggle[aria-expanded="true"] svg{
    transform:rotate(180deg);
  }
  @media (prefers-reduced-motion: reduce){
    .brand-collapse,.brand-intro-toggle svg{transition:none;}
  }

/* ===== Contactformulier op Gravity Forms in de htmlv-opmaak =====
   De kaart (.ct-form-card) en de knoppen komen uit contact.html; hieronder
   krijgt de GF-markup binnen die kaart dezelfde maten, kleuren en het
   2-koloms raster. Alles is gescoped op .ct-form-card, zodat formulieren
   elders op de site (offerte, sample, downloads) ongemoeid blijven. */
  .ct-form-card .gform_wrapper{
    margin:0;
  }
  .ct-form-card .gform_heading{
    display:none;                 /* titel/beschrijving staan al in het ontwerp */
  }
  .ct-form-card .gform_fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px 40px;
  }
  /* GF's eigen 12-koloms spans terugbrengen naar het 2-koloms ontwerp */
  .ct-form-card .gfield{
    grid-column:span 1;
    min-width:0;
  }
  .ct-form-card .gfield--width-full,
  .ct-form-card .gfield--type-html,
  .ct-form-card .gfield--type-textarea{
    grid-column:1 / -1;
  }
  .ct-form-card .gfield--type-hidden{
    display:none;
  }
  /* labels als in .ct-field label */
  .ct-form-card .gfield_label{
    display:block;
    font-size:var(--body-font-size);
    font-weight:700;
    color:var(--text);
    margin-bottom:8px;
  }
  /* invoervelden: zelfde basis als .ct-field input/textarea */
  .ct-form-card .ginput_container input[type="text"],
  .ct-form-card .ginput_container input[type="email"],
  .ct-form-card .ginput_container input[type="tel"],
  .ct-form-card .ginput_container select,
  .ct-form-card .ginput_container textarea{
    width:100%;
    background:var(--white);
    border:1px solid var(--input-border);
    border-radius:8px;
    padding:13px 16px;
    font-family:inherit;
    font-size:16px;
    color:var(--text);
  }
  .ct-form-card .ginput_container textarea{
    /* GF rendert rows=10; het ontwerp heeft rows=5, vandaar een vaste
       hoogte. resize blijft aan, dus groter maken kan gewoon. */
    height:135px;
    min-height:135px;
    resize:vertical;
  }
  .ct-form-card .ginput_container input:focus,
  .ct-form-card .ginput_container textarea:focus{
    outline:none;
    border-color:var(--dark);
  }
  /* juridische regel (HTML-veld) in de voet-opmaak */
  /* De juridische regel is in GF een HTML-veld bovenin het raster. In het
     ontwerp staat hij in de VOET, links naast de knoppen (.ct-form-foot in
     contact.html is een flexrij met space-between). De gform_submit_button-
     filter zet de inhoud daarom als .ct-form-legal in de voet; het veld zelf
     is hier verborgen. Eén bron blijft het HTML-veld in Gravity Forms. */
  .ct-form-card .gfield--type-html{
    display:none;
  }
  .ct-form-card .ct-form-legal{
    font-size:calc(var(--body-font-size) - 2px);
    line-height:1.5;
    color:var(--text);
    margin:0;
    /* htmlv breekt deze regel met een <br> na ~580px en houdt zo ruimte
       over voor de knoppen op dezelfde rij; de tekst uit GF heeft die <br>
       niet, dus begrenzen we de kolom hier. Gemeten in htmlv: 579px op
       1920 (2 regels, knoppen ernaast), 501px op 1440 (knoppen wikkelen). */
    flex:0 1 auto;
    max-width:580px;
  }
  .ct-form-card .ct-form-legal a{
    color:var(--text);
    text-decoration:underline;
    text-underline-offset:2px;
  }
  /* voet met de twee knoppen */
  .ct-form-card .gform_footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    margin:30px 0 0;
    padding:0;
  }
  .ct-form-card .ct-form-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    /* space-between zet de knoppen al rechts zolang alles op een rij past;
       zodra de voetrij wikkelt (vanaf ~1440 is de kaart te smal) valt dat weg
       en zou de knoppenrij links belanden — zoals in htmlv gebeurt. Deze
       auto-marge houdt ze in beide gevallen rechts (verzoek Kulwant). */
    margin-left:auto;
  }
  .ct-form-card .ct-submit,
  .ct-form-card input[type="submit"]{
    background:var(--dark);
    color:var(--white);
    border:0;
    border-radius:50px;
    padding:14px 28px;
    font-family:inherit;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:opacity .2s;
    width:auto;
  }
  .ct-form-card .ct-submit:hover{
    opacity:.9;
  }
  /* meldingen */
  .ct-form-card .gfield_validation_message,
  .ct-form-card .validation_message{
    font-size:calc(var(--body-font-size) - 2px);
    color:var(--coral);
    margin-top:6px;
    background:none;
    border:0;
    padding:0;
  }
  .ct-form-card .gform_validation_errors{
    border:1px solid var(--coral);
    border-radius:12px;
    padding:14px 18px;
    margin-bottom:22px;
    background:var(--white);
    box-shadow:none;
  }
  .ct-form-card .gform_validation_errors h2{
    font-size:var(--body-font-size);
    color:var(--coral);
    margin:0;
  }
  .ct-form-card .gform_confirmation_message{
    font-size:var(--body-lg-font-size);
    line-height:1.5;
    color:var(--text);
  }
  /* Correcties na visuele vergelijking met contact.html:
     - GF's legacy-markup zet een fieldset-kader om een keuzeveld; het
       ontwerp heeft daar geen kader/achtergrond.
     - de voet lijnt RECHTS uit: in htmlv is .ct-form-foot een flexrij met
       space-between, dus de knoppen staan rechts. (Gecorrigeerd 2026-08-25
       na melding Kulwant; hier stond eerder ten onrechte "links".)
     - het sterretje bij een verplicht veld is in het ontwerp gewoon
       tekstkleur, niet coral. */
  .ct-form-card fieldset.gfield{
    border:0;
    padding:0;
    margin:0;
    background:none;
  }
  .ct-form-card .gfield_required{
    color:var(--text);
    font-weight:700;
    margin-left:2px;
  }
  /* Het landkeuzeveld staat wel op sokkies.com maar niet in het ontwerp van
     contact.html. Het blijft staan omdat de veldnamen 1:1 gelijk moeten
     blijven aan productie (input_10 gaat mee naar het vervolgsysteem); het
     krijgt hier dezelfde opmaak als de overige velden. */
  .ct-form-card .ginput_container select{
    height:47px;
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' 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='%2328121b' stroke-linecap='round' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    padding-right:42px;
  }
  /* Landkeuze (input_10): staat op sokkies.com wél in het formulier maar is
     daar niet zichtbaar — het veld draagt de eigen class 'language' en wordt
     door de productiestyling verborgen. Hier hetzelfde: onzichtbaar voor de
     bezoeker, maar het veld blijft in de DOM en wordt dus nog steeds
     meegestuurd, zodat de veldnamen 1:1 gelijk blijven aan productie.
     Bewust geen display:none op het select-element zelf — dat zou de waarde
     wél blijven versturen, maar we houden de hele rij uit de layout. */
  .ct-form-card .gfield.language{
    display:none;
  }

/* -------------------------------------------------------------------------
   Tabellen uit de wysiwyg (WP-toevoeging; htmlv kende geen tabellen)
   -------------------------------------------------------------------------
   Toegevoegd 2026-08-25 (melding Kulwant): een in de CMS geplakte prijstabel
   kwam als losse woorden op de PDP omdat wp_kses de tabeltags wegstripte.
   De tags zijn nu toegestaan (zie sokkies_rijke_tekst) en krijgen hier hun
   opmaak. Dezelfde rijke tekst wordt gebruikt in spec-antwoorden, FAQ-
   antwoorden en de juridische artikelen, dus de structuurregels zijn gedeeld;
   alleen de lijnkleur verschilt, want de spec-accordeon staat op het
   donkerblauwe vlak en de rest op licht. De tekstkleur erft gewoon van de
   container, zodat er geen kleur dubbel wordt vastgelegd.
   ------------------------------------------------------------------------- */
  .spec-a-inner table,
  .faq-a-inner table,
  .prod-info table,
  .brand-intro-inner table,
  .jr-body table{
    width:100%;
    border-collapse:collapse;
    /* 8px: in het aangeleverde ontwerp zit ~38px tussen de laatste regel
       van de inleiding en de koprij; met 14px werd dat ~43px. */
    margin:8px 0 0;
    font-size:var(--body-font-size);
    line-height:1.6;
  }
  .spec-a-inner th, .spec-a-inner td,
  .faq-a-inner th, .faq-a-inner td,
  .prod-info th, .prod-info td,
  .brand-intro-inner th, .brand-intro-inner td,
  .jr-body th, .jr-body td{
    /* 2px i.p.v. 9px: met line-height 1.6 (27px) komt een rij daarmee op
       ~31px, zoals in het aangeleverde ontwerp (rijen 32px uit elkaar).
       Met 9px werd dat 47px en stond de tabel veel te luchtig. */
    padding:2px 18px 2px 0;
    text-align:left;
    vertical-align:top;
  }
  .spec-a-inner th, .faq-a-inner th, .jr-body th, .brand-intro-inner th, .prod-info th{
    font-weight:600;
  }
  /* GEEN scheidingslijnen: het aangeleverde ontwerp (screenshot Kulwant
     2026-08-25) toont de tabel als uitgelijnde kolommen zonder randen.
     De eerdere 1px-lijn per rij is daarom weer verwijderd. */
  .spec-a-inner tr, .faq-a-inner tr, .jr-body tr, .brand-intro-inner tr, .prod-info tr{
    border:0;
  }

/* -------------------------------------------------------------------------
   Offerteformulier op Gravity Forms in de opmaak van htmlv/offerte.html
   -------------------------------------------------------------------------
   Toegevoegd 2026-08-26. De statische driestapsopzet is vervangen door een
   meerstaps Gravity Form; de ontwerpklassen (.stepper, .pick-card,
   .quote-input) horen bij die oude markup. Hier wordt de GF-markup op
   dezelfde waarden gezet, net als eerder bij .ct-form-card. Alles is
   gescoped onder .quote-card zodat andere formulieren er niets van merken.
   ------------------------------------------------------------------------- */
  .quote-card .gform_wrapper{ margin:0; }
  .quote-card .gform_heading{ display:none; }

  /* De stappenbalk komt uit gform_progress_steps (zie
     inc/offerte-formulier.php): daar wordt de GF-markup vervangen door de
     <ol class="stepper"> uit htmlv, zodat de ontwerpregels hierboven in dit
     bestand van toepassing zijn. Er is dus GEEN eigen .gf_step-opmaak nodig. */

  /* labels en velden — dezelfde waarden als .quote-label in het ontwerp */
  .quote-card .gfield_label{
    display:block;
    font-family:var(--roc-grotesk);
    font-size:var(--body-lg-font-size);
    font-weight:600;
    color:var(--text);
    margin-bottom:12px;
    line-height:1;
  }
  /* "(optioneel)" achter het label: .opt staat al in het ontwerp (400). */
  .quote-card .gfield_required{ color:var(--coral); font-weight:600; }
  /* Het ontwerp zet een spatie tussen label en sterretje ("Postcode *"). */
  .quote-card .gfield_required{ margin-left:.28em; }
  /* De hint onder "Wat wil je laten bedrukken?" staat buiten beeld tot
     een derde kaart geweigerd wordt; offerte.js zet en haalt de klasse.
     BEWUST GEEN display:none: de vakjes verwijzen met aria-describedby
     naar deze regel, en dat is voor een schermlezer de enige plek waar
     de limiet staat. Zo blijft hij daar hoorbaar en is hij alleen niet
     te zien. */
  .quote-card .of-soktypes.max-hint-verborgen > .gfield_description{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    border:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .quote-card .gfield_description{
    font-size:calc(var(--body-font-size) - 2px);
    color:var(--text);
    opacity:.7;
    margin:0 0 8px;
    padding:0;
  }
  .quote-card .ginput_container input[type="text"],
  .quote-card .ginput_container input[type="email"],
  .quote-card .ginput_container input[type="tel"],
  .quote-card .ginput_container input[type="number"],
  .quote-card .ginput_container select,
  .quote-card .ginput_container textarea{
    width:100%;
    border:1.5px solid var(--border-light);
    border-radius:5px;
    padding:12px 14px;
    height:50px;
    font-size:var(--body-font-size);
    font-family:var(--roc-grotesk);
    color:var(--text);
    background:var(--white);
  }
  /* Een <select> tekent zijn eigen pijl en negeert een deel van de opmaak
     die de tekstvelden wel pakken. appearance:none haalt de systeemstijl
     eraf; de chevron komt als achtergrond terug, op dezelfde plek als in
     de bestaande dropdowns van de site. padding-right houdt de tekst van
     het pijltje af, ook bij een lange landnaam. */
  .quote-card .ginput_container select{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    padding-right:40px;
    cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2328121B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
  }

  /* GF zet rows='10' vast, ongeacht de veldgrootte — vandaar een hoogte in
     CSS. Het ontwerp gebruikt rows="5" met height:auto; nagemeten in htmlv
     is dat 126px, zowel op offerte.html als op sample-request.html.
     resize blijft aan, dus groter maken kan gewoon. */
  .quote-card .ginput_container textarea{
    height:126px;
    min-height:126px;
    padding:17px 14px;
    resize:vertical;
  }
  /* Veldenrooster. De meeste velden vullen de breedte; stap 3 zet ze in een
     rij van drie en twee rijen van twee, net als .quote-grid /
     .quote-grid-3 in htmlv. BEWUST flex met wrap en geen grid: de
     postcoderij heeft VASTE kolommen van 155px en de rijen eronder halve
     breedtes, en dat past niet in één grid-template. Rijafstand 22px en
     kolomafstand 20px komen allebei uit het ontwerp.
     De rijafstand komt BEWUST van een marge onder elk veld en niet van
     row-gap: een lege regel die alleen dient om een rij af te breken kost bij
     row-gap altijd een volle rijafstand, en die is er niet meer af te halen
     (een flexregel kan niet kleiner dan 0, en een negatieve marge op het
     volgende veld zet dat veld scheef t.o.v. zijn buurman). */
  .quote-card .gform_fields{
    display:flex;
    flex-wrap:wrap;
    gap:0 20px;
    align-items:flex-start;
  }
  .quote-card .gform_fields > .gfield{ flex:0 0 100%; min-width:0; margin-bottom:22px; }

  /* Stap 3 — dezelfde rijen als htmlv/offerte.html (regels 491-540). */
  .quote-card .gform_fields > .of-postcode,
  .quote-card .gform_fields > .of-huisnummer,
  .quote-card .gform_fields > .of-toevoeging{ flex:0 0 155px; }
  .quote-card .gform_fields > .of-bedrijf,
  .quote-card .gform_fields > .of-contact,
  .quote-card .gform_fields > .of-email,
  .quote-card .gform_fields > .of-telefoon{ flex:0 0 calc(50% - 10px); }

  /* De verborgen trackingvelden staan wél in de flow; zonder dit zouden ze
     rij-gaten trekken van 22px per stuk. */
  .quote-card .gform_fields > .gfield--type-hidden,
  .quote-card .gform_fields > .gform_hidden{ display:none; }

  /* Straat/plaats/provincie horen bij het gevonden adres: normaal onzichtbaar,
     zichtbaar zodra de bezoeker "Handmatig invullen" kiest of de opzoeking
     niets oplevert. */
  /* WAAROM !important, tegen de huisregels in: op het SAMPLEformulier hangt
     het hele adresblok aan voorwaardelijke logica van Gravity Forms (het
     verschijnt pas bij "Ik wil toch een proefontwerp"). GF regelt dat met
     een INLINE display op het veld, en die wint van elke stylesheet. */

     /* LAND IS DE UITZONDERING (verzoek 2026-09-22): dat staat altijd in
        beeld. Het is namelijk geen veld dat de opzoeking alleen maar
        invult, maar er soms ook voor NODIG is: bij een Belgische, Duitse
        of Franse postcode — allemaal kale cijfers — kan de vorm het land
        niet verraden en moet de bezoeker het zelf kiezen. Zat het veld
        achter "Handmatig invullen", dan is die keuze verstopt achter
        precies de stap die de opzoeking overbodig maakt.

        Daarom :not() en GEEN eigen display-regel met !important: zo'n
        regel zou ook de INLINE display:none van Gravity Forms verslaan,
        en dan stond Land op het sampleformulier in beeld terwijl het
        hele adresblok nog dicht is. Nu zegt de stylesheet niets over de
        zichtbaarheid van dit veld en houdt GF de regie. */
  .quote-card .gform_fields > .of-auto:not(.of-land){ display:none !important; }
  .quote-card .gform_fields > .of-auto.is-zichtbaar{
    display:block !important;
    flex:0 0 calc(50% - 10px);
  }

  /* Een veld uit deze groep dat de validatie afkeurt MOET zichtbaar zijn,
     ook als de groep dicht staat: anders wijst Gravity Forms naar een fout
     die de bezoeker niet kan zien en dus niet kan herstellen. Geldt in de
     praktijk alleen voor Land — dat is als enige van de groep verplicht. */
  .quote-card .gform_fields > .of-auto.gfield_error{
    display:block !important;
    flex:0 0 calc(50% - 10px);
  }

  /* LAND STAAT OP DE EERSTE RIJ, naast Toevoeging (verzoek 2026-09-22).
     In de DOM staat het veld onderaan het adresblok, want daar heeft
     Gravity Forms het staan en die volgorde zit in de DATABASE — die
     deployt niet mee. Met flex order verhuist het veld dus in CODE:
     Land krijgt order 1 en alles wat erna hoort order 2, zodat de
     eerste rij Postcode / Huisnummer / Toevoeging / Land wordt.

     De breedte is GEEN vaste helft meer maar de rest van de rij, met
     175px als ondergrens. Gemeten ruimte na de drie vaste kolommen van
     155px: 1920 -> 574, 1440 -> 311, 1280 -> 181, 992 -> 330. Een halve
     kolom (408px op 1440) paste daar niet, dan sprong het veld naar een
     eigen regel. Past het niet meer (768 -> 106), dan wikkelt het netjes
     naar de regel eronder.

     De drie selectors zijn er om de of-auto-regels hierboven te
     verslaan: die zetten een halve kolom op .of-auto.is-zichtbaar en
     .of-auto.gfield_error, en dat weegt zwaarder dan een kale .of-land.
     De banden die alles op 100% stapelen dragen dezelfde drie, zodat
     die daar blijven winnen. */
  .quote-card .gform_fields > .of-land,
  .quote-card .gform_fields > .of-land.is-zichtbaar,
  .quote-card .gform_fields > .of-land.gfield_error{ flex:1 1 175px; }
  /* De verhuizing zelf: alles wat in de DOM NA Toevoeging komt gaat naar
     achteren, Land springt er tussenuit. Bewust op de plek in de DOM en
     niet op een lijstje klassen: op het offerteformulier staan bedrijf,
     contactpersoon, e-mail en telefoon ONDER het adresblok, op het
     sampleformulier er juist BOVEN. Een vaste lijst zou die vier op het
     sampleformulier mee naar beneden trekken (en dat deed hij ook, tot
     deze correctie). Zo geldt de regel per formulier vanzelf. */
  .quote-card .gform_fields > .of-toevoeging ~ .gfield{ order:2; }
  .quote-card .gform_fields > .of-toevoeging ~ .of-land{ order:1; }

  /* OFFERTEFORMULIER: daar is Land het enige dat van het adresblok over is
     (zie sokkies_offerte_adresblok_weg) en staat het onderaan Jouw gegevens.
     Het hoort zich daar als een gewoon veld te gedragen, dus een halve kolom
     net als Bedrijfsnaam en E-mail; de regel hierboven zou het de hele breedte
     geven omdat er geen postcoderij meer naast staat. De class komt uit PHP,
     niet uit :has(), zodat het ook klopt in browsers zonder :has(). */
  .quote-card .gform_fields > .of-land-solo,
  .quote-card .gform_fields > .of-land-solo.is-zichtbaar,
  .quote-card .gform_fields > .of-land-solo.gfield_error{ flex:0 0 calc(50% - 10px); }

  .quote-card .of-kop h3{ margin:0 0 6px; }

  /* HARDE RIJOVERGANG. flex-wrap breekt pas als een regel vol is, en zodra de
     veldkolom breder werd dan ~1030px paste "Bedrijfsnaam" nog náást de drie
     vaste kolommen van 155px — waardoor de hele stap een veld opschoof. Op
     1280 viel dat niet op, op 1920 wel. Deze lege velden zijn 100% breed en
     dwingen de overgang af, ongeacht de schermbreedte; de negatieve marge
     haalt de rijafstand die ze zelf toevoegen er weer af. */
  .quote-card .gform_fields > .of-rij-break{
    flex:0 0 100%;
    height:0;
    padding:0;
    margin:0;
    overflow:hidden;
  }

  .quote-card .gform_fields > .of-adres-paneel{ flex:0 0 100%; }
  /* Alleen weg zodra de bezoeker het adres zelf invult; de rijovergang
     hierboven houdt de indeling dan gewoon overeind. */
  .quote-card .gform_fields > .of-adres-paneel.is-verborgen{ display:none; }
  .quote-card .of-adres-paneel .quote-address{ margin-bottom:0; }

  /* ===== Sampleformulier: knoppenbalk en de verborgen keuze =====
     Het keuzeveld "Wil je er een proefontwerp bij?" staat NIET in beeld. Het
     bestaat alleen zodat GF's voorwaardelijke logica en de servervalidatie
     weten welke route de bezoeker koos; de zichtbare knop staat in de
     knoppenbalk hieronder. */
  .quote-card .gform_fields > .of-proef{ display:none; }

  /* .sample-actions komt uit htmlv (zin links, knoppen rechts) en zit hier in
     de voet van het formulier. De voet zelf legt daarom geen eigen uitlijning
     op, anders vecht die met de balk erin. */
  .quote-card .gform_footer{
    display:block;
    margin:8px 0 0;
    padding:0;
    border:0;
  }
  .quote-card .gform_footer .sample-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
    margin:0;
  }
  .quote-card .gform_footer .sample-actions-note{
    font-size:var(--body-sm-font-size);
    color:#8a7f70;
    margin:0;
  }
  .quote-card .gform_footer .sample-actions-right{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  /* de lichte knop uit het ontwerp (.cta-light) */
  .quote-card .of-proef-open{
    background:var(--white);
    border:1px solid var(--dark);
    color:var(--dark);
    border-radius:50px;
    padding:12px 25.27px;
    font-family:var(--roc-grotesk);
    font-weight:600;
    font-size:var(--body-font-size);
    cursor:pointer;
    transition:background .2s, color .2s;
  }
  .quote-card .of-proef-open:hover{ background:var(--dark); color:var(--white); }

  /* Aantal paar en Opmerkingen naast elkaar, zoals .sample-proof-grid in
     htmlv (200px + de rest); het uploadvlak staat daaronder over de volle
     breedte.
     BEWUST gescoped op .sample-card: .of-aantal en .of-wensen bestaan ook op
     het offerteformulier, en daar staan die velden onder elkaar. */
  .sample-card .gform_fields > .of-aantal{ flex:0 0 200px; }
  .sample-card .gform_fields > .of-wensen{ flex:1 1 240px; }
  /* ... en ze beginnen op DEZELFDE HOOGTE. Los van elkaar dragen .of-aantal
     en .of-wensen een eigen margin-top (45 en 20 op desktop, 40 en 20 in de
     tabletband), en dat zette de twee velden 25px uit elkaar: boven "Aantal
     paar" viel een gat terwijl "Opmerkingen" er al stond. In het ontwerp is
     dit een grid met align-items:start, dus daar staan de labels gelijk.
     Hier vervalt die losse marge; de ruimte onder de kop komt dan uit de
     22px die elke kop op deze kaart al meekrijgt, net als bij "Jouw
     gegevens" en "Waar sturen we het heen?".
     Twee classes diep, dus dit wint ook van de bandregels in responsive.css
     (die staan op .of-aantal en zijn een class minder specifiek).
     Het OFFERTEformulier houdt zijn marge: daar staat Aantal paar alleen op
     een regel en dient die 45px als lucht onder de soktypekaarten. */
  .sample-card .gform_fields > .of-aantal,
  .sample-card .gform_fields > .of-wensen{ margin-top:0; }
  /* Het cijferveld vult binnen die 200px de hele breedte; de algemene regel
     zet er een max-width van 200px op, wat hier hetzelfde uitkomt. */
  .sample-card .of-aantal input[type="number"]{ width:100%; }
  /* Aantal paar is in het ontwerp een smal veld (.quote-input-sm). */
  .quote-card .of-aantal input[type="number"]{ max-width:200px; }

  /* Uploadveld als de .dropzone uit het ontwerp. GF bouwt hier een
     .gform_drop_area met daarin de instructie en een knop; die krijgen
     dezelfde opmaak als het gestippelde vlak in htmlv. */
  .quote-card .gform_drop_area{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:baseline;
    gap:4px 0.25em;
    text-align:center;
    border:2px dashed #000;
    border-radius:15px;
    padding:22px;
    background:#faf6f0;
    cursor:pointer;
    margin:0;
  }
  /* In het ontwerp staat "Sleep uw bestanden hierheen, of klik om te
     uploaden." op EEN regel; GF zet de knop standaard onder de tekst. Met
     wrap op de rij blijven ze naast elkaar en breekt het alleen als het
     echt niet past. */
  .quote-card .gform_drop_instructions{
    font-size:var(--body-font-size);
    color:var(--text);
    font-weight:600;
  }
  /* De staart van de zin ná het onderstreepte "klik" — zelfde gewicht als de
     rest van de zin, maar zonder onderstreping. */
  .quote-card .dz-staart{
    font-size:var(--body-font-size);
    color:var(--text);
    font-weight:600;
    text-decoration:none;
  }
  /* De regeltekst neemt de volle breedte, zodat hij netjes onder de zin
     valt in plaats van ernaast. */
  .quote-card .gform_drop_area .gform_fileupload_rules{ flex:0 0 100%; }
  /* De knop van GF is in het ontwerp gewoon het onderstreepte woord
     "klik om te uploaden" binnen dezelfde zin. */
  .quote-card .gform_button_select_files{
    background:none;
    border:0;
    padding:0;
    font-family:var(--roc-grotesk);
    font-size:var(--body-font-size);
    font-weight:600;
    color:var(--text);
    text-decoration:underline;
    cursor:pointer;
  }
  .quote-card .gform_fileupload_rules{
    font-size:15px;
    color:var(--text);
    opacity:1;
    margin:0;
    text-align:center;
  }

  /* Beeldkaarten voor de soktypes en de extra opties.
     De opmaak zelf staat al in htmlv (.pick-card / .extra-card, hierboven in
     dit bestand); de PHP-filter zet die classnamen op het GF-label. Wat hier
     nog nodig is, is de BRUG tussen twee verschillen:
       1. htmlv zet de input IN het label (.pick-card input), GF ernaast —
          dus het vakje zelf hier verbergen;
       2. htmlv markeert de keuze met .is-selected via eigen JS, GF heeft
          gewoon :checked — de input staat vóór het label, dus met de
          +-combinator is dezelfde staat te pakken. */
  /* width:100% is GEEN overbodige regel. Deze rasters staan in een
     <fieldset>, en daar zakt het binnenvlak terug naar de breedte van zijn
     inhoud zodra de regel erboven (de hint) uit de flow wordt gehaald. Het
     raster kwam dan op 0 breed uit, waarna repeat(5, 1fr) terugviel op de
     min-content van elke kaart en de kaarten als losse kolommetjes naast
     het formulier belandden. Gemeten: 1084px met deze regel, 0px zonder.
     Zo hangt de breedte niet langer af van wat de buren doen. */
  .quote-card .of-soktypes .gfield_checkbox{
    display:grid;
    width:100%;
    grid-template-columns:repeat(5, 1fr);
    gap:20px var(--h5-font-size);
  }
  .quote-card .of-extras .gfield_checkbox{
    display:grid;
    width:100%;
    grid-template-columns:repeat(5, 1fr);
    gap:var(--h5-font-size);
  }
  .quote-card .gfield_checkbox .gchoice{ position:relative; }
  .quote-card .gfield_checkbox .gfield-choice-input{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }
  .quote-card .gfield_checkbox label{
    display:block;
    margin:0;
    cursor:pointer;
    text-align:center;
  }

  /* GF zet een fieldset met rand en legend om een keuzeveld; het ontwerp
     heeft daar geen kader. Zelfde ingreep als bij het contactformulier. */
  .quote-card fieldset.gfield{
    border:0;
    padding:0;
    margin:0;
    background:none;
  }
  .quote-card fieldset.gfield legend.gfield_label{
    padding:0;
    float:left;
    width:100%;
  }

  /* De geselecteerde staat komt NIET uit een :checked-regel hier: offerte.js
     zet .is-selected op het label, precies zoals htmlv dat doet, zodat alle
     ontwerpregels (.is-selected .pick-img, .pick-check, .type-pick-outer)
     ongewijzigd van toepassing zijn. */

  /* uitgeschakeld door de max-2-regel of door "Geen extras" */
  .quote-card .gfield_checkbox .gchoice.is-uitgeschakeld label{
    opacity:.4;
    cursor:not-allowed;
  }

  /* knoppen onderaan elke stap */
  /* gap 20px = .quote-actions-right uit het ontwerp (Overslaan naast Volgende). */
  .quote-card .gform_page_footer{
    display:flex;
    gap:20px;
    align-items:center;
    justify-content:flex-end;
    margin:8px 0 0;
    padding:0;
    border:0;
  }
  /* Volgende + Vraag offerte aan zijn in het ontwerp .cta-dark: DONKER met witte
     tekst, en pas bij hover beige. Hier stonden de HOVER-kleuren als basis, dus
     de knop zag er altijd uit alsof de muis erop stond - en op mobiel (geen hover)
     was dat de enige staat die de bezoeker ooit zag. Basis en hover nu gesplitst,
     1:1 met .cta-dark uit htmlv. */
  .quote-card .gform_next_button,
  .quote-card .gform_button{
    background:var(--dark);
    color:var(--white);
    border:1px solid var(--dark);
    border-radius:50px;
    padding:12px 25.27px;
    font-family:var(--roc-grotesk);
    font-weight:600;
    font-size:var(--body-font-size);
    cursor:pointer;
    transition:background .2s;
  }
  .quote-card .gform_next_button:hover,
  .quote-card .gform_button:hover{
    background:var(--light-beige);
    color:var(--dark);
  }
  /* De terugknop is in het ontwerp een KALE knop met een pijltje (.btn-back
     in htmlv), geen omrande pil. Het pijltje zelf komt uit PHP; hier alleen
     de opmaak eromheen. margin-right:auto duwt hem naar links, zoals
     .quote-actions-split doet. */
  .quote-card .gform_previous_button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:transparent;
    color:var(--text);
    border:0;
    padding:0;
    font-family:var(--roc-grotesk);
    font-weight:600;
    font-size:15px;
    cursor:pointer;
    margin-right:auto;
  }

  /* "Overslaan" op stap 2 — .cta-light uit het ontwerp. */
  .quote-card .of-overslaan{
    background:var(--white);
    border:0.5px solid var(--dark);
    color:var(--dark);
    border-radius:50px;
    padding:12px 25.27px;
    font-family:var(--roc-grotesk);
    font-weight:600;
    font-size:var(--body-font-size);
    cursor:pointer;
    transition:background .2s, color .2s;
  }
  .quote-card .of-overslaan:hover{ background:var(--dark); color:var(--white); }

  /* meldingen */
  .quote-card .gfield_validation_message,
  .quote-card .validation_message,
  .quote-card .of-adres-fout{
    font-size:calc(var(--body-font-size) - 2px);
    color:var(--coral);
    margin-top:6px;
    background:none;
    border:0;
    padding:0;
  }
  /* Zelfde plek, maar in de gewone tekstkleur: een postcode buiten Nederland
     is geen fout van de bezoeker, alleen iets wat de opzoekdienst niet kent. */
  .quote-card .of-adres-info{
    font-size:calc(var(--body-font-size) - 2px);
    color:var(--text);
    opacity:.75;
    margin-top:6px;
  }
  .quote-card .gform_validation_errors{
    border:1px solid var(--coral);
    border-radius:12px;
    padding:14px 18px;
    margin-bottom:22px;
    background:var(--white);
    box-shadow:none;
  }
  .quote-card .gform_validation_errors h2{
    font-size:var(--body-font-size);
    color:var(--coral);
    margin:0;
  }
  .quote-card .of-postcode.is-zoekend input{ opacity:.6; }

/*═════════════════════════════════════════
  Voortgangsstreepjes in de sliderbalken
  Worden door custom.js tussen de twee knoppen gezet en zijn ALLEEN
  op mobiel zichtbaar (regels in responsive.css, band <=520).
  Desktop verandert dus niet.
═════════════════════════════════════════*/
.nav-dashes{
  display:none;
}

/*═════════════════════════════════════════
  Minimale funnelkop (offerte): logo links, "Naar de collectie" rechts.
  De .navbar staat al op space-between, dus er is geen extra layout nodig.
  Zie sokkies_mini_header() in functions.php voor welke pagina's dit is.
═════════════════════════════════════════*/
.nav-terug{
  display:inline-flex;
  /* links krijgen sitebreed een onderstreping; in het ontwerp staat deze
     regel zonder */
  text-decoration:none;
  align-items:center;
  gap:9px;
  margin-right:14px;
  font-family:var(--roc-grotesk);
  font-size:15px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  transition:opacity .2s;
}
.nav-terug:hover{
  opacity:.65;
}
/* Dezelfde link als kruimelpad in de banner. Staat hier op display:none:
   op desktop hoort hij in de kop en pakt de max-767-band hem op. */
.breadcrumb-terug{
  display:none;
}
.breadcrumb-terug a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:600;
  text-decoration:none;
}
/* op een coral of donkere banner; bij stijl 'beige' blijft de basiskleur */
.breadcrumb-terug-licht,
.breadcrumb-terug-licht a{
  color:#fff;
}
/* de balk is zonder menu een stuk lager; het logo houdt zijn maat */
.navbar.navbar-mini{
  padding-top:13px;
  padding-bottom:13px;
  justify-content: space-between;
}

/* Landingsheader (pagina-optie "Header: landingsheader"): logo links,
   rechts het telefoonnummer en de gele knop — geen menu. Deelt de compacte
   pill-hoogte van .navbar-mini. */
.navbar-landing{
  justify-content:space-between;
}
.nav-landing{
  display:flex;
  align-items:center;
  gap:22px;
  margin-left:auto;
}
.nav-bel{
  font-family:var(--roc-grotesk);
  font-weight:600;
  font-size:var(--body-font-size);
  color:var(--text);
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s;
}
.nav-bel:hover{
  color:var(--coral);
}

/*═════════════════════════════════════════
  Merkenstrip: doorlopende marquee (CSS i.p.v. Swiper-autoplay)
  De wrapper bestaat uit twee identieke helften en schuift naar -50%,
  dus de naad valt precies samen. Zie custom.js voor de opbouw.

  De tussenruimte kwam eerst uit Swiper's spaceBetween (40/70/87/70 per
  breakpoint); zonder Swiper staat die hier als gap, met dezelfde
  grenzen. justify-content:center uit de basisregel is hier inert,
  want de wrapper is max-content breed.
═════════════════════════════════════════*/
.brands-swiper .swiper-wrapper{
  width:max-content;
  gap:40px;
  animation:sokkiesBrandsMarquee linear infinite;
  will-change:transform;
}
@media (min-width:521px){
  .brands-swiper .swiper-wrapper{ gap:70px; }
}
@media (min-width:1200px){
  .brands-swiper .swiper-wrapper{ gap:87px; }
}
@media (min-width:1551px){
  .brands-swiper .swiper-wrapper{ gap:70px; }
}
@keyframes sokkiesBrandsMarquee{
  to{ transform:translateX(-50%); }
}
/* Zonder JS staat de strip stil in plaats van halverwege afgekapt */
@media (prefers-reduced-motion:reduce){
  .brands-swiper .swiper-wrapper{ animation:none; }
}

/*═════════════════════════════════════════
  Gravity Forms: geüpload bestand als kaart (offerte + sample)
  GF zet naam, grootte, voortgangsbalk en verwijderknop plat achter
  elkaar op één regel; het ontwerp toont een kaart met miniatuur,
  naam + grootte eronder, een balk over de volle breedte en een ronde
  rode sluitknop. De klassen komen uit gravityforms.js en zijn gelijk
  tijdens en na het uploaden, dus beide toestanden krijgen dezelfde kaart.
═════════════════════════════════════════*/
.quote-card .ginput_preview{
  display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "thumb naam sluit"        "thumb grootte sluit"        "balk balk balk";
    align-items: center;
    gap: 6px 12px;
    margin: 14px 0 0;
    padding: 10px 10px 0;
    border: none;
    border-radius: 10px;
    background: #fff;
}
.quote-card .of-upload-thumb{
  grid-area:thumb;
  align-self:center;
  display:block;
  width:60px;
  height:60px;
  border-radius:3px;
  overflow:hidden;
  background:var(--light-beige);
}
.quote-card .of-upload-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* naam en grootte onder elkaar in dezelfde cel */
.quote-card .ginput_preview .gfield_fileupload_filename{
  grid-area:naam;
  align-self:end;
  font-size:15px;
  font-weight:400;
  color:var(--text);
  word-break:break-word;
}
.quote-card .ginput_preview .gfield_fileupload_filesize{
  grid-area:grootte;
  align-self:start;
  margin-top:0px;
  font-size:15px;
  color:#000;
}
/* voortgang: balk over de volle breedte met het percentage rechts */
.quote-card .ginput_preview .gfield_fileupload_progress{
  grid-area:balk;
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  margin-top:0px;
}
.quote-card .ginput_preview .gfield_fileupload_progressbar{
  flex:1;
  height:6px;
  border-radius:6px;
  background:var(--light-beige);
  overflow:hidden;
}
.quote-card .ginput_preview .gfield_fileupload_progressbar_progress{
  display:block;
  height:100%;
  border-radius:6px;
  background:var(--text);
  transition:width .2s linear;
}
.quote-card .ginput_preview .gfield_fileupload_percent{
  flex:0 0 auto;
  font-size:15px;
  color:var(--text);
}
/* ronde rode sluitknop; GF levert hier een prullenbak-dashicon of een
   annuleerlink, allebei krijgen dezelfde knop met een kruisje */
.quote-card .ginput_preview .gform_delete_file,
.quote-card .ginput_preview .gfield_fileupload_cancel{
  grid-area:sluit;
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#fde3e2;
  color:transparent;
  font-size:0;
  text-indent:0;
  cursor:pointer;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s;
}
.quote-card .ginput_preview .gform_delete_file:hover,
.quote-card .ginput_preview .gfield_fileupload_cancel:hover{
  background:#f9c9c7;
}
.quote-card .ginput_preview .gform_delete_file .dashicons,
.quote-card .ginput_preview .gform_delete_file span{
  display:none; /* het prullenbak-icoon wijkt af van het ontwerp */
}
.quote-card .ginput_preview .gform_delete_file:before,
.quote-card .ginput_preview .gfield_fileupload_cancel:before{
  content:"";
  position:absolute;
  inset:0;
  background:no-repeat center/13px 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M1 1l11 11M12 1L1 12' fill='none' stroke='%23fa4b46' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/*═════════════════════════════════════════
  FAQ-pagina: melding als het zoeken niets oplevert
  Zonder deze regel bleef er een blanco vlak staan zodra geen enkele
  vraag matchte. Zelfde rol als #caseEmpty in het cases-overzicht.
═════════════════════════════════════════*/
.faq-empty{
  margin:10px 0 0;
  font-size:var(--body-font-size);
  line-height:1.6;
  color:var(--text);
}
.faq-empty .faq-empty-term{
  font-weight:600;
  word-break:break-word;
}

/*═════════════════════════════════════════
  Contactformulier: keuzerondjes uit Gravity Forms
  Het radioveld is opnieuw toegevoegd in GF en kwam er onopgemaakt uit
  (kale browserrondjes). Deze regels leggen het gelijk met de statische
  kaart in htmlv/contact.html: een kop in dezelfde stijl als de andere
  kaartkoppen, daaronder de keuzes naast elkaar met 18px-rondjes in de
  donkere huiskleur.

  De maten komen 1:1 uit .ct-radios hierboven, zodat beide varianten
  hetzelfde ogen. (De GF-regels hiervoor zijn op 2026-08-25 verwijderd
  toen het veld uit het formulier ging; dit vervangt ze.)
═════════════════════════════════════════*/
/* htmlv houdt 28px tussen de keuzes en de eerste veldrij. Het
   veldenraster geeft er via row-gap al 20 van, dus hier 8 erbij. Als
   fieldset geschreven omdat .ct-form-card fieldset.gfield de marge op 0
   zet en anders wint. */
.ct-form-card fieldset.gfield--type-radio{
  margin-bottom:8px;
}
/* GF zet het veldlabel in een legend; die krijgt de kaartkopstijl.
   Staat het label in GF op verborgen, dan blijft hij gewoon weg. */
.ct-form-card .gfield--type-radio legend{
  display:block;
  padding:0;
  font-family:var(--roc-grotesk);
  font-weight:700;
  font-size:calc(var(--h5-font-size) - 1px);
  color:var(--text);
  margin-bottom:18px;
}
.ct-form-card .gfield_radio{
  display:flex;
  flex-wrap:wrap;
  gap:12px 40px;
}
.ct-form-card .gfield_radio .gchoice{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.ct-form-card .gfield_radio label{
  margin:0;
  font-family:var(--roc-grotesk);
  font-size:var(--body-font-size);
  font-weight:400;
  color:var(--text);
  cursor:pointer;
}
.ct-form-card .gfield_radio input[type="radio"]{
  width:18px;
  height:18px;
  margin:0;
  flex:0 0 auto;
  accent-color:var(--dark);
  cursor:pointer;
}

/*═════════════════════════════════════════
  Productpagina: prijscalculator in een popup
  De rekenmachine erin is de bestaande calculator (zelfde id's), alleen
  compacter: zonder staffeltabel, want die staat al naast de foto's.
═════════════════════════════════════════*/
/* LET OP: display:flex hieronder verslaat het hidden-attribuut (de
   UA-regel [hidden]{display:none} heeft lagere specificiteit), waardoor
   de popup permanent openstond. Deze regel zet dat recht en moet blijven
   staan zolang .pdp-calc een eigen display heeft. */
.pdp-calc[hidden]{
  display:none;
}
.pdp-calc{
  position:fixed;
  inset:0;
  z-index:210; /* boven de nl-popup (200) en de sticky balk */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.pdp-calc-overlay{
  position:absolute;
  inset:0;
  background:rgba(40,18,27,0);
}
.pdp-calc-card{
  position:relative;
  width:100%;
  max-width:430px;
  max-height:90vh;
  background:#fff;
  border-radius:25px;
  padding:30px 32px 32px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
/* De kaart krijgt bij openen de focus (zie custom.js: anders opent het
   mobiele toetsenbord). Dat is een programmatische focus op een blok,
   geen bedienbaar element, dus zonder zichtbare ring. */
.pdp-calc-card:focus{
  outline:none;
}
.pdp-calc-card h3{
  font-family:var(--roc-grotesk);
  font-weight:700;
  font-size:var(--h4-font-size);
  color:var(--text);
  margin-bottom:22px;
}
.pdp-calc-sluit{
  position:absolute;
  top:8px;
  right:8px;
  width:30px;
  height:30px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pdp-calc-card .hint-body .hint-sub .sub-price{
  font-weight: 600;
}
/* De rekenmachine binnen de popup gebruikt exact de markup en classes van
   de gewone calculator, dus alle opmaak (grote prijs per paar, hoofdletter-
   disclaimer, rijlijnen) komt daar vandaan. Alleen de tweekoloms .calc-mid
   past niet in een kaart van 430px: tip en dropdown stapelen hier. */
.pdp-calc .calc-mid{
  grid-template-columns:1fr;
  gap:20px;
}
.pdp-calc-card h3 {
    font-size: var(--h5-font-size);
    margin-bottom: 18px;
}
.pdp-calc .calc-field{
  margin-bottom:20px;
}
.pdp-calc .calc-result{
  padding-top:20px;
  margin-bottom:24px;
}
.pdp-calc .calc-row{
  margin-bottom:0px;
  border-bottom:none
}
.pdp-calc .calc-row.calc-total-row {
    padding-bottom: 4px;
}
.pdp-calc .calc-hint{
  width:100%;
  margin-bottom:0px;
  height:auto;
  padding: 6px 18px;
}
.pdp-calc .calc-perpair {
  font-size: var(--h3-font-size);
}
.pdp-calc .calc-label{
  font-size: var(--body-font-size);
}
.pdp-calc .hint-body{
  gap: 3px;
}
.pdp-calc .hint-icon{
  width: 40px;
  height:40px
}
.pdp-calc-card .cta{
  /* .cta is een inline <a>; zonder eigen display doet width:100% niets. */
  display:flex;
  width:100%;
  text-align:center;
  justify-content: center;
}
/* achtergrond niet meescrollen zolang de popup open staat */
body.pdp-calc-open{
  overflow:visible;
}

/*═════════════════════════════════════════
  Productpagina: knop en popup in dezelfde wikkel
  De popup hoort te openen op de plek waar je klikt, niet midden in het
  scherm. De wikkel neemt daarom de zwevende positie over die .prod-cost
  had (linksonder, 20/20) en de popup hangt daar absoluut bovenop.
  De overlay blijft wél schermvullend: die dimt de pagina en vangt de
  klik ernaast.
═════════════════════════════════════════*/
.prod-cost-wrap{
  position:fixed;
  left:60px;
  bottom:20px;
  z-index:99;
}
/* de wikkel draagt nu de positie; het blok zelf staat gewoon in de wikkel */
.prod-cost-wrap .prod-cost{
  position:static;
  left:auto;
  bottom:auto;
  z-index:auto;
}
.prod-cost-wrap .pdp-calc{
  position:absolute;
  inset:auto auto 0% 0;
  margin-bottom:0px;
  display:block;
  padding:0;
  width:min(580px, calc(100vw - 40px));
}
.prod-cost-wrap .pdp-calc-overlay{
  position:fixed;
  inset:0;
}
.prod-cost-wrap .pdp-calc-card{
  position:relative; /* boven de overlay */
  z-index:1;
  max-width:none;
  width:100%;
  max-height:calc(100vh - 120px);
  padding: 50px;
}

/* Elke display-regel hierboven verslaat het hidden-attribuut, dus de
   verbergregel staat als laatste én met hogere specificiteit. Dit is de
   tweede keer dat dit misging: wie hier een display toevoegt, moet deze
   regel laten staan. Controleer na een wijziging de COMPUTED display,
   niet alleen het hidden-attribuut — dat blijft namelijk gewoon kloppen. */
.prod-cost-wrap .pdp-calc[hidden],
.pdp-calc[hidden]{
  display:none;
}


/* ==========================================================================
   LANDINGSPAGINA — page-scope: main.landing
   Vier eigen blokken (.lp-hero, .lp-media, .lp-usps, .lp-keur) plus de
   landingsvariant van het bestaande stappenblok (.process-landing). De
   overige secties zijn ongewijzigd hergebruikt.
   ========================================================================== */

/* ===== Landingskop — tekst links, fotocollage rechts ===== */
  .lp-hero{
    background:var(--coral);
    color:var(--white);
    /* geen marges: de galerij valt (net als op werkwijze) meteen vanaf de
       headerpill over de rand en wordt onder precies op de rode rand
       afgesneden (ontwerp); de tekstkolom regelt zijn eigen lucht */
    padding:0;
    overflow:hidden;
  }
  .lp-hero-text{
    padding:70px 0 20px;
  }
  .lp-hero-beige{ background:var(--light-beige); color:var(--text); }
  .lp-hero-wit{ background:var(--white); color:var(--text); }
  .lp-hero-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:60px;
    align-items:center;
    /* de headerpill zweeft over de bovenrand; met deze ruimte begint de
       gecentreerde tekst er altijd ruim onder */
    padding-top:24px;
  }
  /* zelfde koptypografie als de bestaande paginakop (condensed, uppercase,
     fluïde tot 40px), zodat de landingskop niet uit de toon valt */
  .lp-hero-text h1{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    font-size:clamp(40px, 5vw, var(--h1-font-size));
    text-transform:uppercase;
    line-height:0.86;
    color:inherit;
    margin-bottom:15px;
  }
  .lp-hero-text > p{
    font-size:var(--body-font-size);
    line-height:1.55;
    color:inherit;
    /* zo breed als de kop, niet smaller (ontwerp) */
    max-width:620px;
    margin-bottom:30px;
  }
  .lp-hero-btns{
    margin-bottom:30px;
  }
  /* de knop in de kop is in het ontwerp een maat groter dan de gewone .cta */
  .lp-hero-btns .cta{
    padding:15px 32px;
    font-size:var(--body-lg-font-size);
  }
  /* de reviewregel is dezelfde .rating-outer als in de paginakop; alleen
     de uitlijning verschilt (daar gecentreerd, hier links) */
  .lp-hero .rating-outer{
    justify-content:flex-start;
    margin:0;
    padding-top: 15px;
  }

  /* De galerij is de .coll-hero-gallery van de paginakop met fotokolommen
     (twee gedraaide, tegengesteld lopende kolommen die over de randen
     vallen). Al haar maten en banden komen uit die bestaande regels; hier
     alleen wat het rode vlak anders doet: de kolommen mogen aan de
     bovenkant over de rand, en het vlak knipt ze af. */
  /* De kophoogte schaalt mee met het scherm (ontwerp: ±560px op 1440,
     ±650px op 1920). Een vaste 470px zette op brede schermen de kop
     tegen de headerpill aan (melding Kulwant met schermafdruk). */
  .lp-hero-gallery{
    height:clamp(560px, 34vw, 660px);
    overflow:visible;
  }
  .lp-hero .coll-hero-gallery{
    height:calc(100% + 140px);
    top:-70px;
    gap:14px;
  }
  .lp-hero .ch-swiper .swiper-slide{
    height:clamp(320px, 25vw, 480px);
  }

/* ===== Landingspagina — aanpassingen aan hergebruikte secties ===== */
  /* Merkenstrip: de titel staat in het ontwerp ±75px onder de rode rand;
     de bandregels van .brands zetten 40-60px, dus hier de eigen maat. */
  .landing .brands{
    padding-top:75px;
  }
  /* Reviews: in het ontwerp begint het blok op wit en lopen de kaarten
     over in het beige dat daarna doorloopt (keurmerken, vragen). Zelfde
     verloop-truc als de blogfoto-band: omgevingsonafhankelijk. */
  .landing .testimonial-light{
    background:linear-gradient(to bottom, var(--white) 46%, var(--light-beige) 46%);
  }
  /* Ontwerp: de reviewkaarten hebben een dunne donkere omlijning (zelfde
     lijn als de reviewkaart op het blog). Alleen hier — de andere
     reviews-varianten zijn in hun ontwerpen zonder rand. */
  .landing .testimonial-card{
    border:1px solid var(--text);
  }

/* ===== Foto naast tekst (50/50) ===== */
  .lp-media{
    background:var(--white);
    padding:90px 0;
  }
  /* Staat het gele pluspunten-vlak er direct onder, dan steekt zijn golf in
     dit blok. Die ruimte wordt hier gereserveerd met dezelfde procentuele
     basis als de golf zelf (13% van de breedte), plus wat lucht — zo botst
     het op geen enkele schermbreedte met de tekst. Géén z-index hier: dan
     zou dit witte vlak de golf juist afdekken. */
  .lp-media:has(+ .lp-usps){
    padding-bottom:calc(13% + 70px);
  }
  .lp-media-beige{ background:var(--light-beige); }
  /* Ontwerp: foto iets breder dan de tekst, en een ruime goot ertussen
     (±115px op 1440, ±150px op 1920) — 70px was te krap. */
  .lp-media-inner{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:clamp(60px, 8vw, 150px);
    align-items:center;
  }
  /* foto rechts: dezelfde markup, alleen de kolomvolgorde draait om */
  .lp-media-omgekeerd .lp-media-foto{ order:2; }
  .lp-media-foto img{
    width:100%;
    aspect-ratio:16 / 10;
    object-fit:cover;
    border-radius:35px;
    display:block;
  }
  /* koppen op de landingspagina: dezelfde condensed uppercase als alle
     sectiekoppen op de site (stappenblok, soktypes, toepassingen) */
  /* leesbare regellengte (±60 tekens, ontwerp): de kolom volgt de
     container, maar de tekst loopt niet verder dan dit — anders werden de
     regels op brede schermen ±95 tekens (melding Kulwant) */
  .lp-media-tekst{
    max-width:34em;
  }
  .lp-media-tekst h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1.1;
    color:var(--text);
    margin-bottom:18px;
  }
  .lp-media-tekst p{
    font-size:var(--body-font-size);
    line-height:26px;
    color:var(--text);
    margin-bottom:14px;
  }
  .lp-media-tekst p:last-of-type{ margin-bottom:0; }
  .lp-media-link{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:24px;
    font-size:var(--body-font-size);
    font-weight:600;
    /* ontwerp: donkere tekstlink met pijl, coral pas bij hover */
    color:var(--text);
    text-decoration:none;
    transition:color .2s;
  }
  .lp-media-link:hover{ color:var(--coral); }

/* ===== Pluspunten-raster op geel ===== */
  .lp-usps{
    background:var(--yellow);
    padding:40px 0 80px;
    position:relative;
    /* eigen stapelcontext, zodat de ONDERSTE golf over de volgende sectie
       heen valt in plaats van erachter te verdwijnen — die sectie heeft een
       eigen achtergrond en staat later in de DOM */
    z-index:1;
  }
  /* Golvende boven- en onderrand. BEWUST de losse kap-afbeeldingen en niet
     bg-yellow-shape.png zoals bij de collectiestrook: die vorm is een heel
     vlak dat met top:-76% naar boven steekt en dan over de vorige sectie
     heen valt (de tekst van het blok erboven verdween erachter). Deze twee
     zijn gele golven op transparant, precies zo hoog als hun eigen
     verhouding, en raken de inhoud niet. */
  .lp-usps:before,
  .lp-usps:after{
    content:'';
    position:absolute;
    left:0;
    width:100%;
    height:0;
    background-repeat:no-repeat;
    background-size:100% 100%;
    z-index:0;
    pointer-events:none;
  }
  .lp-usps:before{
    bottom:99%;
    /* bewust vlakker dan de eigen verhouding (27%): op volle hoogte steekt
       de golf ~390px de vorige sectie in en loopt daar over de tekst heen */
    padding-top:13%;
    background-image:url(../media/landing-yellow-bgTop.png);
  }
  /* Onderrand: bg-yellow-shapeBottom.png uitgerekt over de breedte werd een
     rechte diagonaal met een knik rechts (melding Kulwant). Nu een getekend
     pad in de gele kleur: links hoog, in een zachte boog naar rechtsonder,
     steiler links en vlakker rechts — de rand uit het ontwerp. */
  /* .lp-usps:after{
    top:100%;
    padding-top:6.15%;
    background-image:url(../media/landing-yellow-bgBottom.png);
    background-size: 100%;
    background-position: bottom;
  } */
  .lp-usps-wit{ background:var(--white); }
  .lp-usps-wit:before,
  .lp-usps-wit:after{ display:none; }
  .lp-usps > .container{
    position:relative;
    z-index:2;
  }
  /* De doodles horen in de vrije marge NAAST het raster (dat is 1140px breed
     binnen een bredere container). Onder 1300px is die marge er niet meer en
     zouden ze over de pluspunten heen vallen, dus daar verdwijnen ze. */
  /* Ontwerp: de twee sokkenparen staan op de BOVENSTE golf, half op het
     witte blok erboven en half op het geel, links en rechts in de marge. */
  .lp-usps-duddle{
    position:absolute;
    width:380px;
    height:auto;
    z-index:0;
    pointer-events:none;
  }
  .lp-usps-duddle-l{ left:24px;  top:-34%; }
  .lp-usps-duddle-r{ right:24px; top:-48%; }
  
  .lp-usps h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1.1;
    color:var(--text);
    text-align:center;
    margin-bottom:30px;
  }
  /* volle containerbreedte, zoals elke sectie op de site (Kulwant: de
     smallere 1140px-kolom viel uit de toon naast de andere pagina's) */
  .lp-usps-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:50px 80px;
    width: 66.3%;
    margin: 0px auto;
  }
  /* maten 1:1 uit het ontwerp: icoonvak 120px, titel 22px */
  .lp-usp-icoon{
    width:120px;
    height:120px;
    margin-bottom:40px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .lp-usp-icoon:empty,
  .lp-usp-icoon:not(:has(img)){
    /* nog geen icoon gekozen: een rustig kader in plaats van een gat */
    border:1.5px dashed rgba(40,18,27,.35);
    border-radius:14px;
  }
  .lp-usp-icoon img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    display:block;
  }
  .lp-usp h3{
    font-family:var(--roc-grotesk);
    font-weight:700;
    font-size:22px;
    line-height:1.2;
    color:var(--coral);
    margin-bottom:14px;
  }
  .lp-usp p{
    font-size:var(--body-font-size);
    line-height:24px;
    color:var(--text);
  }

/* ===== Stappenblok, landingsvariant (rood vlak + actiekaart) ===== */
  .process.process-landing{
    background:transparent;
    padding:80px 0 90px;
  }
  /* staat het gele vlak er direct boven, dan hangt zijn onderste golf over
     deze sectie heen; die ruimte reserveren we op dezelfde basis (6,15%) */
  .lp-usps + .process.process-landing{
    padding-top:calc(6.15% + 45px);
  }
  /* Ontwerp: witte tekst; de titel (met geel accent) linksboven de stappen;
     de chevrons geel — de standaard coral verdwijnt op het rode vlak. */
  .process.process-landing .process-left h2,
  .process.process-landing .process-row-body h3,
  .process.process-landing .process-num,
  .process.process-landing .process-row-body p{
    color:var(--white);
  }
  .process.process-landing .process-left h2{
    /* een regel in de linkerkolom (ontwerp); op 46px brak hij af */
    font-size:clamp(30px, 2.8vw, 40px);
    line-height:1.05;
    margin-bottom:26px;
  }
  .process.process-landing .process-chev svg path{
    fill:var(--white);
  }
  /* De scheidingslijnen zijn in het ontwerp licht (wit op het rood). De
     basisrij tekent ze met border-TOP; de eerdere override zat op bottom
     en deed niets (melding Kulwant). */
  .process.process-landing .process-left li{
    border-top-color:rgba(255,255,255,.5);
  }
  /* De rijen zijn space-between (nummer links, tekstblok rechts), dus zonder
     vaste breedte verschoof de chevron per rij mee met de titelbreedte
     (melding Kulwant: stap 03 stond ver naar links). Zelfde oplossing als
     de configurator: een vast tekstblok, dan staan chevrons en titels in
     één kolom en breken de titels gelijk af. */
  .process.process-landing .process-inner{
    width:66%;
    padding:0;
  }
  /* de beige actiekaart is de DERDE cel van de fotocollage, even hoog en
     even rond als de foto's, met de tekst gecentreerd (ontwerp) */
  .process-land-kaart{
    background:var(--light-beige);
    border-radius:35px;
    height:415px;
    padding:30px 28px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:22px;
  }
  .process.process-landing .process-collage > :nth-child(3){
    margin-top:-60px; /* zelfde ritme als img:nth-child(3) */
  }
  /* minmax(0,…): de kaart mag zijn kolom nooit opblazen — met 1fr 1fr trok
     de nowrap-knop de eerste kolom breed en kregen de foto's rechts nog
     99px (1024) of 22px (390) */
  .process.process-landing .process-collage{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .process-land-kaart h5{
    font-family:var(--roc-grotesk-condensed);
    font-weight:800;
    text-transform:uppercase;
    font-size:var(--h2-font-size);
    line-height:1;
    color:var(--text);
  }
  .process-land-kaart .cta{
    white-space:nowrap; /* "Vraag gratis proefdesign aan" op een regel */
    padding:12px 22px;
  }
  /* het rode vlak eindigt linksonder in een witte golf die het volgende
     (witte) blok inleidt — getekend, geen afbeelding nodig */
  .process.process-landing{
    position:relative;
    overflow:visible;
    padding-bottom:40px;
  }
  .landing .cards-suggestion{
    padding-top: 0;
  }
  /* De rand uit het ontwerp: links ±190px hoog, dan een zachte holle boog
     die rond de helft van de breedte de onderrand raakt en verder vlak
     loopt. Een border-radius-ellips gaf een bolle bult in de hoek (melding
     Kulwant); dit pad tekent de curve zelf en schaalt met de breedte. */
  .process.process-landing:before{
    content:'';
    position:absolute;
    left:0;
    right:0;
    top: 0;
    height:190px;
    background:var(--yellow);
    background-size:100% 100%;
    pointer-events:none;
  }
  .process.process-landing:after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    top:0px;
    height:1271px;
    /* startpunt (0,0) met meteen een dalende helling — een vlakke start gaf
       een S-vorm met een bultje links (melding Kulwant); het pad zakt
       gelijkmatig en loopt bij ±50% tangentieel in de onderrand uit */
    background:url(../media/bg-landing-red.png);
    background-size:100% 100%;
    pointer-events:none;
  }
  .process.process-landing > .container{
    position:relative;
    z-index:1;
  }

/* ===== Keurmerkenstrip ===== */
  .lp-keur{
    background:var(--light-beige);
    padding:70px 0;
  }
  /* volle containerbreedte (site-standaard); alleen de alinea houdt een
     leesbare regellengte */
  .lp-keur-inner{
    width:100%;
    text-align:center;
  }
  /* Ontwerp: hier juist GEEN condensed uppercase — de ronde vette letter in
     gewone kast, zoals de merkenstrip-titel. */
  .lp-keur-inner h2{
    font-family:var(--roc-grotesk);
    font-weight:700;
    text-transform:none;
    font-size:22px;
    line-height:1.2;
    color:var(--text);
    margin-bottom:14px;
  }
  .lp-keur-inner > p{
    font-size:var(--body-font-size);
    line-height:26px;
    color:var(--text);
    margin:0 auto 34px;
    max-width:720px;
  }
  .lp-keur-logos{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:80px;
  }
  .lp-keur-logos img{
    height:100px;
    width:auto;
    max-width:150px;
    object-fit:contain;
    display:block;
    /* dezelfde witte keurmerk-PNG's als in de footer; op dit lichte vlak
       donker gemaakt, precies zoals bij de keurmerk-kaarten */
    filter:brightness(0);
  }


/* ==========================================================================
   FLEXIBELE PAGINA — drie eigen blokken (.fp-kolommen, .fp-citaat,
   .fp-lees-ook). Paginakop, foto-naast-tekst en het actieblok zijn
   bestaande secties.
   ========================================================================== */

/* ===== Kop met intro en twee tekstkolommen ===== */
  .fp-kolommen{
    background:var(--white);
    padding:80px 0;
  }
  /* volle containerbreedte, zoals de andere secties op de site */
  .fp-kolommen-inner{
    width:100%;
  }
  /* sectiekoppen in de condensed kapitalen van het ontwerp */
  .fp-kolommen h2,
  .fp-lees-ook h2{
    font-family:var(--roc-grotesk-condensed);
    font-weight:700;
    text-transform:uppercase;
    font-size:var(--h3-font-size);
    line-height:1.05;
    color:var(--text);
  }
  .fp-kolommen h2{
    margin-bottom:18px;
  }
  .fp-kolommen-intro{
    max-width:600px;
    margin-bottom:26px;
  }
  .fp-kolommen-intro p,
  .fp-kolom p{
    font-size:var(--body-font-size);
    line-height:26px;
    color:var(--text);
    margin-bottom:14px;
  }
  .fp-kolommen-intro p:last-child,
  .fp-kolom p:last-child{ margin-bottom:0; }
  .fp-kolommen-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:0 60px;
  }
  .fp-kolom ul, .fp-kolom ol{
    font-size:var(--body-font-size);
    line-height:26px;
    margin:10px 0 16px;
    padding-left:24px;
  }

/* ===== Citaat op geel vlak ===== */
  /* Landingspagina: de foto linksonder in de vragen-sectie (ontwerp).
     Ligt tegen de linkerrand van het scherm en dus buiten de container;
     het beige in de foto loopt door in de sectie, waardoor die rand niet
     opvalt. Alleen op deze pagina: de vragen-sectie staat ook op home,
     collectie en werkwijze en heeft daar geen beeld.
     De linkerkolom houdt onderaan al ruimte vrij (de regel die voorkomt
     dat de voetjes van het actieblok over de tekst vallen), dus de foto
     komt niet tegen de tekst aan. */
  .landing .faq{
    position:relative;
  }
  .landing .cta-final-feet {
      display: none;
  }
  .fp-citaat{
    background:var(--yellow);
    position:relative;
    padding:24px 0 60px;
    z-index:1;
    /* de V-kap (20% van de breedte hoog) staat BOVEN de sectie; deze marge
       reserveert die ruimte, anders valt de kap over de tekst van het
       blok erboven (zelfde val als eerder op de landingspagina) */
    margin-top:calc(20% + 24px);
  }
  /* bovenrand: wit dat van linksboven naar rechtsonder afloopt (ontwerp);
     getekend pad, zelfde aanpak als de golven op de landingspagina */
  .fp-citaat:before{
    content:'';
    position:absolute;
    left:0;
    width:100%;
    height:0;
    bottom:100%;
    /* Ontwerp: een V — links steil omlaag naar een afgeronde inkeping op
       ±24% van de breedte, dan een vlakke stijging naar rechts. Hoogte 20%
       van de breedte; het pad schaalt mee. */
    padding-top:20%;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'><path d='M0 0 L215 190 Q237 206 262 197 L1000 94 L1000 200 L0 200 Z' fill='%23FAE16E'/></svg>") no-repeat left bottom;
    background-size:100% 100%;
    pointer-events:none;
  }
  .fp-citaat-wit{ background:var(--white); margin-top:0; }
  .fp-citaat-wit:before{ display:none; }
  /* het sokkenpaar linksboven, groot en boven de V (ontwerp); vw omdat de
     kaphoogte van de breedte afhangt en top-% dat niet kan */
  .fp-citaat-duddle{
    position:absolute;
    left:70px;
    top:calc(-20vw - 48px);
    width:16vw;
    height:auto;
    pointer-events:none;
    z-index:0;
  }
  .fp-citaat > .container{ position:relative; z-index:1; }
  .fp-citaat-kaart{
    position:relative;
    /* meeschalend met de container (ontwerp: ±60% van de breedte), geen
       vaste pixelmaat die op brede schermen te smal oogt */
    max-width:66%; /* ontwerp: 60% van de paginabreedte = 66% van de container */
    /* de kaart staat volledig op het wit, in de V-kap boven het geel
       (ontwerp): ±35px onder de bovenrand van de kap */
    margin:calc(-20vw + 36px) auto 0;
    background:var(--white);
    border:1px solid var(--text);
    border-radius:25px;
    padding:44px 40px 34px;
    text-align:center;
  }
  .fp-citaat-wit .fp-citaat-kaart{ background:transparent; }
  .fp-citaat-badge{
    position:absolute;
    top:-30px;
    left:50%;
    transform:translateX(-50%);
    width:60px;   /* ontwerp: 60px-cirkel */
    height:60px;
    border-radius:50%;
    background:var(--coral);
    display:flex;
    align-items:center;
    justify-content:center;
    /* het aanhalingsteken van het lettertype (ontwerp): vet en optisch
       iets omlaag, omdat het teken in de bovenhelft van zijn kader zit */
    font-family:var(--roc-grotesk);
    font-weight:800;
    font-size:54px;
    line-height:1;
    color:var(--white);
    padding-top:16px;
  }
  .fp-citaat-kaart blockquote{
    font-family:var(--roc-grotesk);
    font-weight:700;
    font-size:var(--body-lg-font-size);
    line-height:1.5;
    color:var(--text);
    margin:0;
  }
  .fp-citaat-kaart figcaption{
    margin-top:12px;
    font-size:var(--body-sm-font-size);
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--text);
  }

/* ===== Lees ook ===== */
  .fp-lees-ook{
    background:var(--yellow);
    padding:60px 0 120px;
  }
  .fp-lees-ook-wit{ background:var(--white); }
  /* volgt op het citaat: de twee gele vlakken lopen als één band door */
  .fp-citaat + .fp-lees-ook{ padding-top:40px; }
  .fp-lees-ook h2{
    margin-bottom:24px;
  }
  .fp-lees-ook-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:24px;
  }
  .fp-lees-ook-kaart{
    display:block;
    background:var(--white);
    border-radius:20px;
    padding:28px 30px 26px;
    color:var(--text);
    text-decoration:none;
    transition:transform .2s;
  }
  a.fp-lees-ook-kaart:hover{ transform:translateY(-3px); }
  .fp-lees-ook-kaart h3{
    font-family:var(--roc-grotesk);
    font-weight:700;
    font-size:var(--body-lg-font-size);
    line-height:1.3;
    margin-bottom:8px;
  }
  .fp-lees-ook-kaart p{
    font-size:15px;
    line-height:22px;
    color:var(--text);
    margin-bottom:16px;
  }
  .fp-lees-ook-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    font-weight:600;
    color:var(--text);
  }
  a.fp-lees-ook-kaart:hover .fp-lees-ook-link{ color:var(--coral); }
  /* volgt het actieblok direct op de gele kaartenrij, dan rijst het rode
     paneel uit het geel op (ontwerp) in plaats van uit een beige strook */
  .fp-lees-ook + .cta-final{ background:var(--yellow); }

/* ===== Foto naast tekst: neutraal vak zolang er geen foto is ===== */
  /* zelfde maat en hoekradius als de foto, beige met een klein label
     (ontwerp flexibele pagina) — verdwijnt zodra er een foto gekozen is */
  .lp-media-placeholder{
    width:100%;
    aspect-ratio:16 / 10;
    background:var(--light-beige);
    border-radius:35px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .lp-media-placeholder span{
    font-size:10px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--text);
    background:var(--white);
    border:1px solid var(--text);
    border-radius:3px;
    padding:3px 6px;
  }

  .landing .cta-final::before{
    content:"";
    position:absolute;
    left:0;
    top: -87%;
    width: 752px;
    aspect-ratio:762 / 570;
    background:url(../media/lg-faq-landing.png) no-repeat left bottom / contain;
    pointer-events:none;
  }

/*═════════════════════════════════════════
  Expivi 3D-configurator (productpagina)
  Staat in de kaart van de "Ontwerp je sokken nu zelf"-sectie
  (.conf-preview-card, 620px hoog met overflow:hidden), op de plek van de
  oude statische preview-foto. Verschijnt alleen op een soktype met een
  Expivi-product-ID; markup in single-sokkies_soktype.php, wiring in
  sokkies_expivi_assets().

  De viewer vult zijn container met min-height:100%, dus die container MOET
  een hoogte hebben — zonder deze regels is het blok 0px hoog en lijkt de
  configurator niet te laden.
═════════════════════════════════════════*/
.expivi-configurator{
  display:grid;
  /* viewer links, optiepaneel rechts in een vaste kolom: het paneel is een
     formulier en moet niet meeschalen met de viewer */
  grid-template-columns:minmax(0,1fr) 400px;
  align-items:stretch;
  width:100%;
  height:100%;
}
.expivi-viewer{
  position:relative;
  min-width:0;
  background:#fff;
}
/* de viewer plaatst zijn eigen wrapper met min-height:100% hierin */
.expivi-configurator #expivi-viewer{
  height:100%;
}
.expivi-configurator #expivi-viewer canvas{
  display:block;
}
.expivi-options{
  min-width:0;
  /* het paneel is langer dan de kaart (4 stappen + upload), en de kaart
     knipt af met overflow:hidden — dus scrolt het paneel zelf */
  overflow-y:auto;
  background:#fff;
  border-left:1px solid var(--border-light);
  padding:22px 20px;
}
.expivi-configurator #expivi-price{
  font-family:var(--roc-grotesk);
  font-size:var(--h5-font-size);
  font-weight:600;
  color:var(--text);
  margin-bottom:14px;
}
.expivi-configurator #expivi-price:empty{
  margin-bottom:0;
}
/* de kaart centreert zijn kind; de configurator moet juist vullen */
.conf-preview-card:has(.expivi-configurator){
  align-items:stretch;
  justify-content:stretch;
}

/* ===== Zoekresultaten (WP-toevoeging; htmlv had een zoekveld zonder
   werking, dus er bestond geen opmaak voor deze pagina) ===== */
  .zoekresultaten .zr-section{
    background:var(--light-beige);
    padding:60px 0 110px;
  }
  .zr-form{
    display:flex;
    gap:12px;
    margin-bottom:40px;
  }
  .zr-form input[type="search"]{
    flex:1 1 auto;
    min-width:0;
    padding:14px 22px;
    border:1px solid rgb(40 18 27 / 25%);
    border-radius:50px;
    background:#fff;
    font-family:var(--roc-grotesk);
    font-size:var(--body-font-size);
    color:var(--text);
  }
  .zr-form input[type="search"]:focus{
    outline:none;
    border-color:var(--coral);
  }
  .zr-form .cta{ flex:0 0 auto; }
  .zr-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .zr-item a{
    display:block;
    background:#fff;
    border:1px solid rgb(40 18 27 / 12%);
    border-radius:25px;
    padding:26px 30px;
    text-decoration:none;
    color:var(--text);
    transition:border-color .2s, transform .2s;
  }
  .zr-item a:hover{
    border-color:var(--coral);
    transform:translateY(-2px);
  }
  .zr-type{
    display:inline-block;
    font-size:var(--body-sm-font-size);
    font-weight:600;
    color:var(--coral);
    margin-bottom:6px;
  }
  .zr-item h2{
    font-size:var(--h5-font-size);
    font-weight:600;
    margin-bottom:8px;
  }
  .zr-item p{
    font-size:var(--body-font-size);
    line-height:1.6;
    margin-bottom:10px;
  }
  .zr-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    font-size:var(--body-font-size);
    transition:gap .2s;
  }
  .zr-item a:hover .zr-link{ gap:12px; }
  .zr-leeg p{ font-size:var(--body-lg-font-size); margin-bottom:18px; }
  .zr-suggesties{ display:flex; flex-wrap:wrap; gap:12px; }
  .zr-suggesties a{
    background:#fff;
    border:1px solid rgb(40 18 27 / 20%);
    border-radius:50px;
    padding:10px 20px;
    text-decoration:none;
    color:var(--text);
    font-weight:600;
    font-size:var(--body-font-size);
  }
  .zr-suggesties a:hover{ border-color:var(--coral); }
  .zoekresultaten .pagination{ margin-top:36px; }
  .zoekresultaten .page-numbers{
    display:inline-block;
    padding:8px 14px;
    margin-right:6px;
    border-radius:50px;
    text-decoration:none;
    color:var(--text);
    font-weight:600;
  }
  .zoekresultaten .page-numbers.current{ background:var(--coral); color:#fff; }
  /* ≤520 is .cta sitebreed width:100% (mobiele knopconventie), dus het
     zoekveld en de knop passen daar niet naast elkaar — onder elkaar. */

  .opties .cta-final, .optie-pagina .cta-final{
    background: transparent;
    margin-top: 3%;
  }
  @media (max-width:520px){
    .zr-form{ flex-direction:column; }
    .zr-form input[type="search"]{ width:100%; }
  }


  .trp-language-switcher{
    display: none !important;
  }