/* =========================================================================
   PEPSUP - GEDEELDE MOBIELE OPMAAK
   Geladen door ELKE pagina: index.html, cart.html, checkout-page.html en de
   server-gerenderde pagina's (shop, product, categorie, blog, faq, coa...).

   Waarom dit bestand bestaat: de winkel had twee losse stijlsystemen. De
   homepage gebruikte styles-2.css, de andere pagina's hun eigen CSS in
   storefront.php. Daardoor zag dezelfde knop er per pagina anders uit en moest
   elke correctie twee keer. Alles wat hieronder staat geldt voor beide sets
   klassenamen (.card en .pc, .announce en .sf-announce, enzovoort).

   Kleuren, logo en lettertype blijven ongemoeid: dit gaat alleen over maat,
   ruimte en uitlijning onder 760px.
   ========================================================================= */

/* =========================================================================
   EEN RUSTIGE ACHTERGROND VOOR ELKE KAART (geldt op ALLE schermformaten)
   Elke categorie had zijn eigen tint achter de productfoto: metabolic
   turquoise, herstel oranje, longevity roze, kits groen. Op een pagina met
   producten door elkaar leest dat als willekeurige gekleurde vlakken, en het
   turquoise komt bovendien over als blauw. Nu overal dezelfde zachte cream uit
   de huisstijl, zodat de foto's het beeld bepalen en een rij kaarten rustig
   oogt. De categoriekleuren blijven wel in gebruik op de categorietegels, waar
   ze juist helpen om te navigeren.
   ========================================================================= */
.card__media,.kit__media,.pc__media,.showcase__media{
  background:linear-gradient(160deg,#f7f3ec,#efe7d8) !important;
}

@media (max-width:760px){

/* ---------- 1. Basisritme ------------------------------------------------
   Een vaste maatladder voorkomt dat elke component zijn eigen formaat kiest.
   Woorden worden nooit meer middenin afgebroken: "onderzoekskwaliteit" werd
   "onderzoekskwalit / eit", wat er slordig uitziet en slecht leest. */
  body{
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
    -webkit-hyphens:none;
  }
  h1,h2,h3,p,span,a,b,li,label{overflow-wrap:break-word;word-break:normal;hyphens:none;}

/* ---------- 2. Aankondigingsbalk: een rustige regel ----------------------
   Drie boodschappen naast elkaar wikkelden op een telefoon over drie regels,
   goed voor 103px - ruim een achtste van het scherm. Nu een regel van 36px,
   waarin de boodschappen elkaar rustig afwisselen (script in app.js en, voor
   de server-pagina's, onderaan de pagina). */
  .announce,.sf-announce{
    position:relative;
    min-height:38px;
    padding:9px 20px;
    gap:0;
    flex-wrap:nowrap;
    overflow:hidden;
    text-align:center;
    font-size:12.5px;
    letter-spacing:.01em;
    line-height:1.5;
  }
  .announce__sep,.sf-announce .sep{display:none !important;}
  .announce > :not(.announce__sep),
  .sf-announce > :not(.sep){
    position:absolute;
    left:20px;right:20px;top:50%;
    transform:translateY(-50%);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .45s ease;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .announce > .ann-on,.sf-announce > .ann-on{
    opacity:1;visibility:visible;pointer-events:auto;
  }
  /* Zonder JavaScript blijft de eerste boodschap gewoon staan. */
  .no-js .announce > :first-child,.no-js .sf-announce > :first-child{
    opacity:1;visibility:visible;
  }

/* ---------- 3. Kop: alles op een regel -----------------------------------
   Op de server-pagina's viel de winkelmand op een eigen regel omdat merk, menu
   en knoppen samen breder waren dan het scherm. */
  .hdr__in,.sf-hdr__in,.sf-head{
    flex-wrap:wrap;
    gap:10px;
    padding-top:10px;padding-bottom:10px;
  }
  .sf-brand,.brand{min-width:0;flex:0 1 auto;margin-bottom:0;}
  .brand__txt strong,.sf-brand strong{font-size:17.5px;}
  .brand__txt small,.sf-brand small{font-size:9.5px;letter-spacing:.05em;}
  .sf-actions,.hdr__actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0;}
  .sf-cartb,.cartbtn,.hdr__burger,.hdr__searchbtn,.sf-navlbl{
    width:40px;height:40px;flex:none;
  }
  .sf-login,.hdr__login,.hdr__acct{display:none;}

/* ---------- 4. Ademruimte -------------------------------------------------
   De sectiekoppen hadden geen ruimte onder zich, waardoor kop en inhoud tegen
   elkaar plakten. Dit is waar "alles zit zo dicht op elkaar" vandaan kwam. */
  .wrap,.sf-wrap{padding-left:18px;padding-right:18px;}
  .sf-wrap{padding-top:20px;}
  h2,.sf-h2,.sec__head h2{margin-bottom:14px;letter-spacing:-.02em;}
  h2,.sf-h2{font-size:21px;line-height:1.25;}
  .sec__head,.sf-sec__head{margin-bottom:14px;}
  section,.rail-sec,.bundles{padding-top:36px;padding-bottom:36px;}
  section:first-of-type{padding-top:20px;}

/* ---------- 5. Productkaarten --------------------------------------------
   Een kaart is op twee kolommen 163px breed. Daar paste geen keuzemenu op
   16px, geen categorie over twee regels en geen prijs van 19px naast een knop
   van 44px. Alles hieronder brengt de kaart terug in verhouding en zorgt dat
   alle kaarten even hoog zijn, zodat de rijen recht lopen. */
  .rail,.grid,.kits,.pc-grid,.sf-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 14px;
  }
  .card,.kit,.pc{
    border-radius:16px;
    box-shadow:0 4px 16px -12px rgba(40,35,20,.28);
    overflow:hidden;
  }
  .card__media,.pc__media,.kit__media{padding:14px;}

  /* Badges op de foto: klein, en nooit meer dan een per hoek. */
  .avail,.card__star,.kit__tag,.pc__av,.pc__cat,.pc__badge{
    font-size:9.5px;
    font-weight:700;
    padding:4px 8px;
    border-radius:999px;
    letter-spacing:.01em;
    white-space:nowrap;
    max-width:calc(100% - 20px);
    overflow:hidden;text-overflow:ellipsis;
  }
  .pc__cat{left:10px;top:10px;}
  .pc__av{left:10px;bottom:10px;}

  /* Tekstblok */
  .card__body,.pc__body,.kit__body{padding:12px 12px 14px;gap:3px;}
  .card__cat{
    font-size:9.5px;letter-spacing:.07em;line-height:1.4;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
  }
  .card__name,.pc__name,.kit__name{
    font-size:14.5px;line-height:1.3;font-weight:700;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;margin-top:2px;
  }
  .card__spec,.pc__spec{
    font-size:11.5px;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }

  /* Maatkeuze: 16px stond er om te voorkomen dat iOS inzoomt bij focus. Dat
     geldt voor tekstvelden; een keuzemenu opent een eigen kiezer en zoomt niet. */
  .card__size,.pc__size,.kit__size{
    font-size:12.5px;
    padding:7px 24px 7px 10px;
    border-radius:9px;
    margin-top:5px;
    max-width:100%;
    background-position:right 8px center;
  }

  /* Prijs en knop naast elkaar, met genoeg lucht ertussen. */
  .card__buy,.pc__foot,.kit__foot{
    display:flex;align-items:center;justify-content:space-between;
    gap:8px;margin-top:10px;padding-top:10px;
  }
  .price b,.card__price b,.pc__price b,.js-price{font-size:16px;line-height:1.2;}
  .price span,.card__price span,.pc__price span,.js-unit{font-size:10.5px;}
  .addbtn,.pc__add{width:38px;height:38px;flex:none;border-radius:50%;}
  .addbtn svg,.pc__add svg{width:16px;height:16px;}
  .card__ship,.pc__ship{font-size:10.5px;line-height:1.4;}

/* ---------- 6. Kits: korte samenvatting in plaats van een lijst ----------
   Een kit toonde vier regels inhoud onder elkaar, waardoor de kaart twee keer
   zo hoog werd als een gewone productkaart en de rij scheef liep. De volledige
   inhoud staat op de productpagina zelf. */
  .pc__incl{
    font-size:11px;line-height:1.5;color:var(--ink-2,#6a6b62);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  /* Kit-inhoud staat nu regel voor regel; vier korte regels passen prima. */
  .kit__incl{font-size:11.5px;line-height:1.6;color:var(--ink-2,#6a6b62);}
  .kit__incl li,.pc__incl li{display:inline;}
  .kit__incl li::after,.pc__incl li::after{content:" \00b7 ";opacity:.5;}
  .kit__incl li:last-child::after{content:"";}
  .kit__incl svg,.pc__incl svg{display:none;}

/* ---------- 6b. Hero: past binnen een schermhoogte -----------------------
   De hero was 882px op een scherm van 812: je zag hem nooit in een oogopslag.
   De twee knoppen stonden onder elkaar (105px) en de kwaliteitsregels eronder
   (61px). Naast elkaar op een rij scheelt dat ruim 100px zonder dat er iets
   verdwijnt of kleiner leest. */
  .hero__cta{flex-direction:row;flex-wrap:wrap;gap:8px;}
  .hero__cta .btn{width:auto;flex:1 1 calc(50% - 4px);min-width:0;font-size:14px;padding-left:12px;padding-right:12px;}
  .hero__pay{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:11.5px;margin-top:14px;}
  .hero__pay .hero__chip{font-size:11px;}
  .hero__sub{font-size:15px;line-height:1.5;margin-bottom:16px;}
  .hero__copy h1{font-size:27px;line-height:1.18;margin:8px 0 10px;}
  .hero__copy{padding:22px 20px 24px;}
  .hero__media{padding:14px;}

/* ---------- 6c. Een rustige achtergrond voor ELKE kaart -------------------
   Elke categorie had zijn eigen tint achter de foto: metabolic turquoise,
   herstel oranje, longevity roze. Op een pagina met producten door elkaar leest
   dat als willekeurige gekleurde vlakken - vooral het turquoise, dat als blauw
   overkomt. Nu overal dezelfde zachte cream, zodat de productfoto's het beeld
   bepalen en de rij rustig oogt. De categoriekleur blijft wel in gebruik voor
   de categorietegels, waar hij juist helpt om te navigeren. */

/* ---------- 6d. Een knop voor "in de winkelwagen" ------------------------
   Er waren er drie: een rond zwart icoon op de homepage, een groene knop met
   tekst in de hero, en een kale tekstlink op de winkelpagina. Dezelfde
   handeling hoort er overal hetzelfde uit te zien. Een knop met woorden erin
   is bovendien duidelijker dan alleen een plusje, en op een kaart van 163px is
   daar alleen ruimte voor als hij onder de prijs staat in plaats van ernaast. */
  .card__buy,.pc__foot,.kit__foot{
    flex-direction:column;align-items:stretch;gap:9px;
  }
  .card__buy .price,.pc__foot .pc__price,.kit__foot .price{
    display:flex;align-items:baseline;gap:4px;
  }
  .addbtn,.pc__add,.sf-add,.card__buy .btn,.kit__foot .btn{
    width:100% !important;height:auto !important;min-height:42px;
    border-radius:999px;
    background:var(--green,#0f7a5f) !important;color:#fff !important;
    font-size:13.5px;font-weight:700;letter-spacing:-.01em;
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    padding:0 14px;border:0;text-decoration:none;
    box-shadow:0 2px 8px -4px rgba(15,122,95,.5);
  }
  .addbtn svg,.pc__add svg{width:16px;height:16px;flex:none;}
  /* Het ronde icoonknopje had font-size:0 om de tekst te verbergen; nu tonen we
     die juist, dus die moet terug naar een leesbare maat. */
  .addbtn{font-size:13.5px !important;}
  .addbtn::after{content:attr(data-blabel);}
  /* Uitverkocht blijft duidelijk anders: geen groen, geen valse belofte. */
  .addbtn--off,.addbtn[disabled]{
    background:var(--sand,#efe7d8) !important;color:var(--ink-2,#6a6b62) !important;
    box-shadow:none;
  }


/* ---------- 7. Knoppen en tikvlakken ------------------------------------- */
  .btn{min-height:44px;padding-left:18px;padding-right:18px;font-size:14.5px;}
  .btn--block,.hero__cta .btn{width:100%;}

/* ---------- 8. Productpagina --------------------------------------------- */
  .pd{gap:20px;}
  .pd__name,.pd h1{font-size:24px;line-height:1.2;}
  .pd__price b{font-size:26px;}
  .pd__media{border-radius:16px;}
  .pd-trust__row{gap:10px;}

/* ---------- 9. Voettekst -------------------------------------------------- */
  .foot__in,.sf-foot__in{gap:24px;}
  .foot__col h4,.sf-foot__in h4{margin-bottom:6px;font-size:13px;}

/* ---------- 10. Geen zijwaartse beweging --------------------------------
   De vaste tabbalk en de categorie-carrousel staken samen 2px buiten het
   scherm. Dat is weinig, maar je voelt het: de pagina wiebelt horizontaal. */
  html,body{overflow-x:clip;max-width:100%;}
  .sf-tabbar,.tabbar{
    left:0;right:0;width:auto;max-width:100vw;box-sizing:border-box;
    padding-left:0;padding-right:0;
  }
  .sf-cats,.catnav{
    margin-left:0;margin-right:0;max-width:100%;box-sizing:border-box;
    scrollbar-width:none;
  }
  .sf-cats::-webkit-scrollbar,.catnav::-webkit-scrollbar{display:none;}
}


/* Extra rustig op de smalste toestellen (iPhone SE en vergelijkbaar). */
@media (max-width:360px){
  .card__name,.pc__name,.kit__name{font-size:13.5px;}
  .price b,.card__price b,.pc__price b,.js-price{font-size:15px;}
  .card__size,.pc__size,.kit__size{font-size:12px;}
  .rail,.grid,.kits,.pc-grid,.sf-grid{gap:16px 10px;}
}

@media (prefers-reduced-motion:reduce){
  .announce > :not(.announce__sep),.sf-announce > :not(.sep){transition:none;}
}

/* Nieuwsbriefblok compact op mobiel (2026-08-12) */
@media (max-width:760px){
  .news{padding:20px 16px;border-radius:14px;}
  .news h2{font-size:18px;}
  .news p{font-size:13px;margin:5px auto 12px;}
}

/* ---- mobiele verfijning (2026-08-24): royalere hero op telefoons ---- */
@media (max-width:760px){
  .hero{padding-top:22px;}
  .hero h1{font-size:30px;line-height:1.15;}
  .hero p{font-size:15.5px;}
}