/*
 * 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:1 1 280px;max-width:380px;aspect-ratio:4/5;overflow:hidden;background:#fff}
.ss-seo__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transform-origin:50% 45%;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:none;flex-basis:100%}
}

/* 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)}