/*
 * Redesign 2026 – homepage-secties (docs/Main content redesign, §4).
 * Gescoped op .ss-*-klassen; bestaande Porto-regels blijven ongemoeid.
 */
.ss-home{--ss-blue:#3a7ca9;--ss-blue-dark:#2d6893;--ss-ink:#222529;--ss-text:#555;--ss-muted:#777;--ss-line:#e7e7e7;--ss-soft:#f4f4f4;
  display:flex;flex-direction:column;font-family:"Open Sans",Arial,sans-serif;color:var(--ss-ink)}
.ss-home *{box-sizing:border-box}
/* secties lopen over de volle breedte, inhoud max 1140px */
.ss-section{width:100vw;margin-left:calc(50% - 50vw);background:#fff}
.ss-section--soft{background:var(--ss-soft)}
.ss-section--line{border-bottom:1px solid var(--ss-line)}
.ss-container{max-width:1140px;margin:0 auto;padding:40px 20px}
.ss-eyebrow{font:600 12px/1.3 Poppins,"Open Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ss-blue)}
.ss-h2{margin:0;font:700 20px/1.2 Poppins,"Open Sans",sans-serif;text-transform:uppercase;color:var(--ss-ink);padding-bottom:12px;border-bottom:2px solid var(--ss-line)}
.ss-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;height:48px;padding:0 20px;border-radius:3px;color:#fff;font:600 13px/1 Poppins,"Open Sans",sans-serif;text-transform:uppercase;letter-spacing:.04em}
.ss-btn:hover,.ss-btn:focus{color:#fff;text-decoration:none}
.ss-btn--primary{background:var(--ss-blue)}
.ss-btn--primary:hover{background:var(--ss-blue-dark)}
.ss-btn--dark{background:var(--ss-ink)}
.ss-btn--dark:hover{background:#000}

/* 4.1 Hero */
.ss-hero__inner{display:flex;flex-wrap:wrap;gap:40px;align-items:center;padding-top:44px;padding-bottom:44px}
.ss-hero__text{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:18px}
.ss-hero__title{margin:0;font:700 clamp(24px,4.2vw,44px)/1.12 Poppins,"Open Sans",sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:var(--ss-ink);text-wrap:balance}
.ss-hero__intro{margin:0;font-size:16px;line-height:1.6;color:var(--ss-text);max-width:520px;text-wrap:pretty}
.ss-hero__buttons{display:flex;flex-wrap:wrap;gap:10px}
.ss-hero__media{flex:1.6 1 520px;min-width:0;aspect-ratio:767/450}
.ss-hero__media img{width:100%;height:100%;object-fit:contain;display:block}

/* 4.2 USP-balk */
.ss-usp__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;padding-top:26px;padding-bottom:26px}
.ss-usp__item{display:flex;align-items:center;gap:14px}
.ss-usp__mark{width:44px;height:44px;flex:none;border:2px solid var(--ss-blue);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ss-blue);font:700 18px/1 Poppins,"Open Sans",sans-serif}
.ss-usp__body{display:flex;flex-direction:column;gap:3px}
.ss-usp__title{font:700 14px/1.2 "Open Sans",sans-serif;text-transform:uppercase;color:var(--ss-ink)}
.ss-usp__sub{font-size:13px;color:var(--ss-muted)}

/* 4.3 Stapelkorting */
.ss-home #stapelkorting .ss-container{padding-top:44px;padding-bottom:36px}
.ss-home .ss-staffel-wrap{scroll-margin-top:20px}

/* 4.4 / 4.5 / 4.6 widgets */
.ss-home .ss-section--cats .ss-container{padding-top:28px;padding-bottom:28px}
.ss-home .ss-section--zones .ss-container{padding-bottom:16px}
.ss-home .ss-section--products .ss-container{padding-bottom:56px}

/* 4.7 Over shapewear */
.ss-seo .ss-container{padding-top:56px;padding-bottom:64px;display:flex;flex-direction:column;gap:16px}
.ss-seo__cols{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.ss-seo__text{flex:1.6 1 420px;min-width:0;display:flex;flex-direction:column;gap:16px;font-size:15px;line-height:1.75;color:var(--ss-text);text-wrap:pretty}
.ss-seo__text p{margin:0}
.ss-seo__text a{color:var(--ss-blue)}
.ss-seo__media{flex:0 1 280px;max-width:280px;aspect-ratio:4/5;overflow:hidden;background:#fff;margin-left:auto}
.ss-seo__media img{width:100%;height:100%;object-fit:contain;display:block}

/* 4.8 Taalbalk */
.ss-langbar{border-top:1px solid var(--ss-line)}
.ss-langbar .ss-container{padding-top:16px;padding-bottom:16px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--ss-text)}
.ss-langbar__label{font:600 12px/1 Poppins,"Open Sans",sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--ss-ink)}
.ss-langbar__links{display:flex;gap:10px}
.ss-langbar__link{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;background:#fff;border:1px solid #ddd;border-radius:3px;color:var(--ss-ink);font-weight:600}
.ss-langbar__link:hover{border-color:var(--ss-blue);color:var(--ss-blue);text-decoration:none}
.ss-langbar__link img{width:16px;height:auto}

/* Mobiel (< 640px) */
@media (max-width:639px){
  .ss-container{padding-left:16px;padding-right:16px}
  .ss-hero__inner{gap:18px;padding-top:0;padding-bottom:28px}
  .ss-hero__media{order:-1;flex-basis:100%;margin:0 -16px}
  .ss-hero__text{text-align:center;align-items:center;gap:12px}
  .ss-hero__intro{font-size:15px}
  .ss-hero__long{display:none}
  .ss-hero__buttons{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .ss-btn{height:44px;padding:0 10px;font-size:12px}
  .ss-seo__media{max-width:280px;flex-basis:100%;margin-inline:auto}
}

/* Porto kleurt bezochte links (a:visited); knoppen en links houden hun eigen kleur */
.ss-btn:visited{color:#fff}
.ss-langbar__link:visited{color:var(--ss-ink)}

/* Nederlands homepageblok: nieuwe hero; overige talen gebruiken de oorspronkelijke opmaak. */
.ss-hero--concept{background:#f0f5f8}
.ss-hero--concept .ss-hero__inner{align-items:center;gap:48px;background:#fff;border-radius:12px;padding:44px 46px;margin-top:24px;margin-bottom:24px}
.ss-hero--concept .ss-hero__text{flex:1 1 45%;gap:18px}
.ss-hero--concept .ss-eyebrow{color:var(--ss-blue);letter-spacing:.1em;text-transform:uppercase}
.ss-hero--concept .ss-hero__title{font:700 clamp(28px,3.4vw,48px)/1.14 Poppins,"Open Sans",sans-serif;letter-spacing:-.02em;text-transform:none}
.ss-hero--concept .ss-hero__title span{display:block;color:var(--ss-blue)}
.ss-hero--concept .ss-hero__intro{font-size:18px;line-height:1.6}
.ss-hero--concept .ss-hero__features{display:flex;flex-wrap:wrap;gap:10px}
.ss-hero--concept .ss-hero__features span{padding:9px 15px;border-radius:20px;background:#edf5f9;color:#356482;font-size:13px;font-weight:700}
.ss-hero--concept .ss-hero__features span:before{content:"✓";margin-right:8px}
.ss-hero--concept .ss-hero__media{flex:1 1 48%;min-width:0;aspect-ratio:auto;margin:0;padding:12px;border:1px solid #dbe5ec;border-radius:12px;background:#fff}
.ss-hero--concept .ss-hero__media img{width:100%;height:auto;aspect-ratio:767/450;object-fit:contain;border-radius:6px}
.ss-hero--concept .ss-hero__caption{padding:13px 5px 2px;color:#243a4a;font-size:14px;font-weight:700}
@media (max-width:639px){
  .ss-hero--concept .ss-hero__inner{gap:22px;margin:12px auto;padding:24px 16px}
  .ss-hero--concept .ss-hero__text{flex-basis:100%;align-items:flex-start;text-align:left;gap:14px}
  .ss-hero--concept .ss-hero__title{font-size:clamp(25px,7vw,34px)}
  .ss-hero--concept .ss-hero__intro{font-size:15px}
  .ss-hero--concept .ss-hero__features span{font-size:11px;padding:7px 10px}
  .ss-hero--concept .ss-hero__buttons{width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr)}
  .ss-hero--concept .ss-hero__buttons .ss-btn{min-width:0;padding:0 4px;font-size:clamp(9px,2.7vw,12px);white-space:nowrap}
  .ss-hero--concept .ss-hero__media{order:0;flex-basis:100%;margin:0;padding:8px}
  .ss-hero--concept .ss-hero__caption{font-size:12px}
}
/* EN en DE: vertaalde tekst boven op de bestaande voor/na-foto. */
.ss-hero--translated .ss-hero__picture{position:relative;width:100%;aspect-ratio:767/450;container-type:inline-size}
.ss-hero--translated .ss-hero__picture img{display:block;width:100%;height:100%}
.ss-hero--translated .ss-hero__picture-label{position:absolute;top:0;width:19.8%;height:24.5%;box-sizing:border-box;overflow:hidden;padding:0 .8cqw;background:#fff;color:#171717;font-family:Arial,Helvetica,sans-serif;text-align:left}
.ss-hero--translated .ss-hero__picture-label--before{left:0}
.ss-hero--translated .ss-hero__picture-label--after{left:49%}
.ss-hero--translated .ss-hero__picture-label strong{display:block;font-size:4cqw;line-height:1.12;font-weight:800}
.ss-hero--translated .ss-hero__picture-label span{display:block;margin-top:.7cqw;font-size:2.05cqw;line-height:1.18;font-weight:400}
.ss-hero--de .ss-hero__picture-label strong{font-size:3.65cqw}
.ss-hero--de .ss-hero__picture-label span{font-size:1.9cqw}

/* Verberg tekstvakken in EN/DE-herofoto */
.ss-hero--translated .ss-hero__picture-label {
    color: transparent !important;
    font-size: 0 !important;
    background: #fafafa !important;
}
.ss-hero--translated .ss-hero__picture-label * {
    visibility: hidden !important;
}

/* Herofoto: labels onder de schone afbeelding */
.ss-hero--concept .ss-hero__media > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 767 / 450;
    object-fit: contain;
}
.ss-hero--concept .ss-hero__photo-labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
    color: #243b50;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
}

/* Hero: kleinere tekst en links uitgelijnde fotolabels */
.ss-hero--concept .ss-hero__photo-labels {
    text-align: left;
    padding-left: 6px;
}
@media (min-width: 900px) {
    .ss-hero--concept .ss-hero__title {
        font-size: clamp(36px, 3vw, 44px);
        line-height: 1.18;
    }
    .ss-hero--concept .ss-hero__intro {
        font-size: 18px;
        line-height: 1.65;
    }
}

/* EN/DE: labels onder afzonderlijke fotohelften */
.ss-hero .ss-hero__photo-labels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
    padding: 0 6px;
    text-align: left;
    color: #243b50;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}