/* ===========================================================================
   Gladiator Protein — ronde 11-10-2026 (briefing "deepseek-prompt-gladiator").
   Dit bestand zet alleen BIJ op de bestaande huisstijl (zwart/rood/wit, Barlow,
   Barlow Condensed, rode punt achter koppen). Het laadt als laatste stylesheet,
   dus deze regels winnen van eerdere lagen zonder die bestanden te wijzigen.

   Secties:
     1. Design tokens + contrastrapport (in de commentaren)
     2. Focus-visible en aanraakvlakken
     3. Beweging: korter en respecteert prefers-reduced-motion
     4. Badges: maximaal één per kaart
     5. Productkaart: prijs links, prijs per portie, besparing, smaakchips
     6. Knoppen en CTA's (drie varianten)
     7. Vertrouwensbalk: iconen, 2x2 op mobiel
     8. "Zo werkt het" (01/02/03)
     9. Doelkaarten (hele kaart klikbaar)
    10. Categoriekaarten
    11. Hero op mobiel: atleet in beeld, tekst leesbaar
    12. Winkelstatus: prelaunch-teksten en verzendbelofte
    13. Leesbaarheid op de productpagina
    14. Packs-strook
   =========================================================================== */

/* === 1. Design tokens =====================================================
   Gemeten contrast (WCAG 2.2 AA: 4.5:1 voor tekst, 3:1 voor grote tekst/UI):
     --text        #f5f5f5 op --bg      #0b0b0c  = 18,05:1  ok
     --text-muted  #b3b3b8 op --bg      #0b0b0c  =  9,42:1  ok
     --text-muted  #b3b3b8 op --surface #151517  =  8,73:1  ok
     --accent-text #ff4d4d op --bg      #0b0b0c  =  6,02:1  ok (rood dat als tekst mag)
     --accent      #d01a25 op --bg      #0b0b0c  =  3,61:1  alleen groot (>=24px) / UI
     #ffffff op --accent #d01a25 = 5,45:1 ok   ·   #ffffff op --accent-deep #a30f18 = 7,96:1 ok
     --light-text  #121212 op --light-bg #f2f2f2 = 16,73:1 ok
     --light-muted #55555b op --light-bg #f2f2f2 =  6,78:1 ok
     Oud: #666 op #090909 was 3,47:1 — te laag; dat is hier vervangen door --text-muted.
   ------------------------------------------------------------------------- */
:root{
  --bg:#0b0b0c; --surface:#151517; --surface-2:#1e1e21;
  --text:#f5f5f5; --text-muted:#b3b3b8;
  --border:#2c2c30; --accent:#d01a25; --accent-hover:#ef2b31; --accent-text:#ff4d4d; --accent-deep:#a30f18;
  --light-bg:#f2f2f2; --light-text:#121212; --light-muted:#55555b;
  --radius:0px;
}

/* === 2. Focus en aanraakvlakken ========================================== */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,
.gp-tier:focus-visible,.product-card a:focus-visible,.goal-card:focus-visible,.category-card:focus-visible{
  outline:2px solid var(--accent-text);outline-offset:3px;border-radius:0;
}
.button,.woocommerce a.button,.woocommerce button.button,.gp-cta,.gp-steps a.button{min-height:48px}
.text-link,.product-card>.text-link{min-height:44px;display:inline-flex;align-items:center}

/* === 3. Beweging: kort en respectvol ===================================== */
.will-reveal{transition:opacity .28s ease-out,transform .28s ease-out}
.reveal{transition-duration:.28s}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .will-reveal{opacity:1!important;transform:none!important}
  .reveal{opacity:1!important;transform:none!important}
  html.gp-motion-ready .hero-photo{animation:none!important}
  .hero-video{display:none!important}
}
/* Zonder JavaScript moet alle content zichtbaar zijn. */
html:not(.gp-motion-ready) .will-reveal,html:not(.gp-motion-ready) .reveal{opacity:1;transform:none}

/* === 4. Badges: maximaal één per kaart =================================== */
.product-badge{position:absolute;left:8px;top:8px;z-index:2;max-width:calc(100% - 46px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:7px 10px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.product-badge.gp-badge-out{background:#2a1113;border-color:#7a1a20;color:#ffd9dc}
.product-badge.gp-badge-sale{background:var(--accent);border-color:var(--accent);color:#fff}
.product-badge.gp-badge-new{background:#12271b;border-color:#2c6b45;color:#d9ffe8}

/* === 5. Productkaart: prijs, portieprijs, besparing, smaakchips ==========
   Let op: kaarten staan zowel in donkere als in lichte secties (.section-light).
   Daarom erven prijs en infotekst de kleur van de sectie (color:inherit) en wordt
   nadruk met gewicht en doorzichtigheid geregeld, niet met een vaste grijstint.
   Gemeten: inherit op --light-text (#121212 op #f5f5f3) = 16,7:1 en op --text
   (#f5f5f5 op #0b0b0c) = 18,1:1; op 78% doorzichtigheid blijft dat ruim boven 4,5:1. */
.product-card .product-info{display:block;padding-top:20px}
.product-card .product-info>.price,.product-card .price{display:block;text-align:left;margin-top:6px;font-family:var(--heading);font-size:26px;letter-spacing:.01em;color:inherit}
.product-card .price del{color:inherit;opacity:.62;font-size:.62em;margin-right:8px}
.product-card .price ins{text-decoration:none}
.product-card .product-benefit{color:inherit;opacity:.78;font-size:13px;margin:6px 0 0}
.product-card .gp-card-facts{display:flex;flex-wrap:wrap;gap:6px 10px;margin:10px 0 0;padding:0;list-style:none}
.product-card .gp-card-facts li{font-size:12px;letter-spacing:.02em;color:inherit;opacity:.85;border:1px solid currentColor;padding:4px 8px}
.product-card .gp-card-facts li.is-save{opacity:1;font-weight:700}
.product-card .gp-flavours{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:11px;color:inherit;opacity:.8;letter-spacing:.06em;text-transform:uppercase}
.product-card .gp-flavours i{width:13px;height:13px;border-radius:50%;border:1px solid #ffffff33;display:inline-block}
.gp-flavours i[data-flavour="Chocolate"]{background:#6b4226}
.gp-flavours i[data-flavour="Vanilla"]{background:#e8dcc0}
.gp-flavours i[data-flavour="Strawberry"]{background:#c8385a}
.gp-flavours i[data-flavour="Cookies"]{background:#c9a06a}
.gp-flavours i[data-flavour="Iced Tea Lemon"]{background:#e4d34a}
.gp-flavours i[data-flavour="Iced Tea Peach"]{background:#eb9a76}
.product-card .product-info .eyebrow{color:inherit;opacity:.72}
/* Carrousel: ook slepen op mobiel, met zichtbare positie-indicator. */
.series-track{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.series-track>.product-card{scroll-snap-align:start}
.gp-carousel-status{font-size:12px;letter-spacing:.1em;color:var(--text-muted);margin:0 0 0 4px;align-self:center}
@media(max-width:760px){
  .series-track{gap:14px}
  .series-track>.product-card{min-width:78%;width:78%}
}

/* === 6. Knoppen en CTA's ================================================= */
.gp-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:48px;padding:14px 20px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.gp-cta--primary{background:var(--accent);border:1px solid var(--accent);color:#fff}
.gp-cta--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.gp-cta--secondary{background:transparent;border:1px solid #ffffff55;color:var(--text)}
.gp-cta--secondary:hover{background:#ffffff;border-color:#ffffff;color:var(--light-text)}
.gp-cta--text{background:none;border:0;border-bottom:1px solid currentColor;padding:10px 0;color:var(--text)}
.gp-cta--text:hover{color:var(--accent-text)}
.gp-cta[disabled],.gp-cta[aria-disabled="true"]{opacity:.6;cursor:not-allowed}

/* === 7. Vertrouwensbalk ================================================== */
.conversion-trust{gap:0}
.conversion-trust .gp-usp{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;padding:14px 18px;border-right:1px solid #ffffff1f;color:var(--text);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.conversion-trust .gp-usp:last-child{border-right:0}
.conversion-trust .gp-usp svg{width:22px;height:22px;flex:0 0 22px;stroke:var(--accent-text);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){
  .conversion-trust{display:grid;grid-template-columns:1fr 1fr;overflow:visible;gap:0}
  .conversion-trust .gp-usp{border-right:0;border-bottom:1px solid #ffffff1f;padding:12px 12px;font-size:11px;letter-spacing:.06em;white-space:normal;line-height:1.35;justify-content:flex-start;text-align:left}
  .conversion-trust .gp-usp:nth-child(odd){border-right:1px solid #ffffff1f}
  .conversion-trust .gp-usp:nth-last-child(-n+2){border-bottom:0}
}

/* === 8. "Zo werkt het" =================================================== */
.gp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:56px var(--pad);background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.gp-steps article,.gp-steps a.step{display:block;border-top:2px solid var(--accent);padding-top:20px;color:inherit}
.gp-steps a.step:hover{border-top-color:var(--accent-hover)}
.gp-steps a.step:hover h3{color:var(--accent-text)}
.gp-steps .gp-step-number{display:block;font-family:var(--heading);font-size:52px;font-weight:800;line-height:1;color:var(--accent-text);margin-bottom:12px}
.gp-steps h3{font-size:30px;margin:0 0 8px}
.gp-steps p{margin:0;color:var(--text-muted);font-size:15px}
.gp-steps .gp-step-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
@media(max-width:760px){.gp-steps{grid-template-columns:1fr;gap:18px;padding:36px var(--pad)}.gp-steps .gp-step-number{font-size:40px}}

/* === 9. Doelkaarten ====================================================== */
.goal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.goal-card{display:flex;flex-direction:column;gap:10px;background:#fff;color:var(--light-text);border:1px solid #dcdcdc;padding:24px;min-height:190px;transition:border-color .25s,transform .25s,box-shadow .25s}
.goal-card:hover,.goal-card:focus-visible{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 18px 40px #00000014}
.goal-card svg{width:30px;height:30px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.goal-card span{font-family:var(--heading);font-size:30px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.goal-card p{color:var(--light-muted);font-size:15px;margin:0}
.goal-card b{margin-top:auto;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:8px}
@media(max-width:1024px){.goal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.goal-grid{grid-template-columns:1fr}}

/* === 10. Categoriekaarten =============================================== */
.category-grid{grid-template-columns:repeat(4,1fr)}
.category-card p{color:var(--text-muted)}
.section-light .category-card p{color:var(--light-muted)}
/* In lichte secties: doelen- en categoriekaarten hebben echte donkere tekst (WCAG AA). */
.section-light .goal-card p{color:var(--light-muted)}
.section-light .product-card .product-info .eyebrow{opacity:.68}
@media(max-width:980px){.category-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.category-grid{grid-template-columns:1fr}}

/* === 11. Hero op mobiel ================================================= */
@media(max-width:760px){
  /* De atleet staat in het midden-boven van de foto; die kant moet in beeld blijven. */
  .hero .hero-photo{object-position:52% 16%}
  .hero-shade{background:linear-gradient(180deg,#09090900 0%,#09090926 30%,#090909d9 62%,#090909f7 100%),linear-gradient(90deg,#090909d9 0%,#09090959 55%,#09090900 100%)}
  .hero-content{padding-top:34px;padding-bottom:22px;justify-content:flex-end}
  .hero h1{font-size:clamp(46px,13.5vw,72px);margin:6px 0 14px}
  .hero p{font-size:15px}
  .hero-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:10px;width:100%}
  .hero-actions .button{width:100%}
  .hero-trust{margin-top:14px}
}
@media(max-width:400px){
  .hero .hero-trust span:nth-child(3){display:none}
}
@media(min-height:781px) and (min-width:761px){
  .hero .hero-caption{display:flex}
}

/* === 12. Winkelstatus =================================================== */
.gp-prelaunch form{align-items:flex-end}
.gp-prelaunch .gp-field{display:flex;flex-direction:column;gap:6px}
.gp-prelaunch label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.gp-prelaunch small{display:block;font-size:11px;color:var(--text-muted);max-width:520px}
.gp-prelaunch .gp-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.gp-signup-message{margin:0;font-size:12px;font-weight:700;letter-spacing:.04em}
.gp-signup-message.is-ok{color:#8ce6b0}
.gp-signup-message.is-error{color:#ffb3b8}
.gp-launch-countdown{display:flex;gap:14px;margin:0;padding:0;list-style:none}
.gp-launch-countdown li{text-align:center}
.gp-launch-countdown strong{display:block;font-family:var(--heading);font-size:26px;line-height:1;color:var(--text)}
.gp-launch-countdown span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}

/* === 13. Productpagina-leesbaarheid ==================================== */
.woocommerce div.product .product_title,.woocommerce div.product .product_title a{color:var(--text)}
.woocommerce .summary .price{color:var(--text)}
.gp-price-per-serving{display:block;margin-top:4px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.gp-payments{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.gp-payments li{border:1px solid var(--border);background:#fff;padding:5px 9px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--light-text)}
.plaats-verplicht{font-size:11px;color:var(--text-muted)}

/* === 14. Packs-strook ================================================== */
.gp-pack-strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 0 14px;margin:0;list-style:none}
.gp-pack-strip li{flex:0 0 auto;scroll-snap-align:start;min-width:230px;border:1px solid #ffffff33;padding:16px;background:#00000038}
.gp-pack-strip h4{font-family:var(--heading);font-size:24px;text-transform:uppercase;margin:0 0 6px;color:var(--text)}
.gp-pack-strip p{margin:0;font-size:13px;color:var(--text-muted)}
.gp-pack-strip .gp-pack-price{display:block;margin-top:10px;font-family:var(--heading);font-size:26px;color:var(--text)}
.gp-pack-strip a{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}