/* Gladiator Protein — ronde 10-10-2026.
   Verfijning volgens de front-end review: leesbaarheid (min. 12 px, letterspatie max. .12em),
   contrast van rood op donker, grotere aanraakvlakken, een lichtere en beter gekaderde mobiele
   hero, de prelaunchbalk en de nieuwe voordelenbalk.
   De huisstijl (zwart/rood/wit, Barlow) blijft ongewijzigd: dit bestand zet alleen bij. */

:root{--color-red-text:#ff4d4d} /* rood voor TEKST op een donkere achtergrond (min. 4.5:1).
                                  Rode vlakken en knoppen met witte tekst houden --red. */

/* ---------------------------------------------------------------------------
   A1 — prelaunchbalk: alleen zichtbaar zolang GLADIATOR_PRELAUNCH aan staat
   ------------------------------------------------------------------------ */

.gp-prelaunch{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;padding:18px var(--pad);background:#0d0d0d;border-bottom:1px solid #ffffff1f;box-shadow:inset 4px 0 0 var(--bright)}
.gp-prelaunch p{margin:0;max-width:560px;font-size:12px;letter-spacing:.01em;line-height:1.5;color:#d0d0cb}
.gp-prelaunch strong{display:block;font-family:var(--heading);font-size:20px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-red-text)}
.gp-prelaunch form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.gp-prelaunch input[type="email"]{min-width:250px;min-height:48px;font-size:12px}
.gp-prelaunch button{min-height:48px;padding:0 22px;border:1px solid var(--red);background:var(--red);color:#fff;font-family:var(--body);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.gp-prelaunch button:hover{background:var(--bright);border-color:var(--bright)}
@media(max-width:760px){
  .gp-prelaunch{flex-direction:column;align-items:stretch;gap:14px;padding:16px 14px}
  .gp-prelaunch form{flex-direction:column;align-items:stretch}
  .gp-prelaunch input[type="email"]{min-width:0;width:100%}
  .gp-prelaunch button{width:100%}
}

/* ---------------------------------------------------------------------------
   B3 — voordelenbalk: vier concrete voordelen (mobiel één scrollbare regel)
   ------------------------------------------------------------------------ */

@media(max-width:760px){
  .conversion-trust{display:flex;grid-template-columns:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .conversion-trust::-webkit-scrollbar{display:none}
  .conversion-trust span{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;border-right:1px solid #ffffff12}
}

/* ---------------------------------------------------------------------------
   B4 — topbalk: op mobiel alleen de verzendtekst
   ------------------------------------------------------------------------ */

@media(max-width:760px){
  .topline{justify-content:center;text-align:center}
  .topline>span{display:none}
}

/* ---------------------------------------------------------------------------
   B2 — "Lees meer" bij het SEO-tekstblok (details/summary, zonder JS)
   ------------------------------------------------------------------------ */

.gp-seo-more{margin-top:6px}
.gp-seo-more summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 0;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-red-text);cursor:pointer;list-style:none}
.gp-seo-more summary::-webkit-details-marker{display:none}
.gp-seo-more summary::after{content:'↓';font-size:14px;transition:transform .2s}
.gp-seo-more[open] summary::after{transform:rotate(180deg)}
.gp-seo-more summary:focus-visible{outline:3px solid #ed5360;outline-offset:4px}
.gp-seo-more[open] summary{margin-bottom:10px}

/* ---------------------------------------------------------------------------
   C1 — één uitverkochtblok op de productpagina
   ------------------------------------------------------------------------ */

.gp-uitverkocht{margin:14px 0 0;padding:18px;border:1px solid #ffffff24;background:#131313}
.gp-uitverkocht-badge{display:inline-block;margin:0 0 10px;padding:7px 11px;background:var(--red);color:#fff;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.gp-uitverkocht-zin{margin:0;font-size:12px;color:#d0d0cb;line-height:1.5}
.gp-uitverkocht + .gp-stock-alert{margin-top:12px!important}

/* ---------------------------------------------------------------------------
   D1 — mobiele hero: het product in beeld, lichtere overlay, tekst leesbaar
   ------------------------------------------------------------------------ */

@media(max-width:760px){
  .hero .hero-photo{object-position:100% 50%;opacity:1}
  /* Punt 7 — lichter verloop: donker achter de tekst (links), bijna transparant bij het product
     rechts. De onderste laag die de knoppen en badges draagt is nu links gehouden (waar die
     elementen staan) en loopt naar rechts weg, zodat de onderkant van de pot niet meer wordt
     afgedekt. */
  .hero .hero-shade{background:linear-gradient(90deg,#090909f5 0%,#090909e3 32%,#090909ad 50%,#0909092b 72%,#09090900 100%),linear-gradient(90deg,#090909bd 0%,#09090900 62%);background-repeat:no-repeat;background-size:100% 100%,100% 34%;background-position:0 0,0 100%}
  .hero-content{padding-bottom:32px}
}

/* ---------------------------------------------------------------------------
   Punt 3 — "ONTDEK MEER ↓" niet meer absoluut over de badges heen
   ------------------------------------------------------------------------ */

/* De regel staat nu onder de badges in de normale tekststroom, met 26px ruimte. Omdat de hero
   zijn hoogte van het venster krijgt, is de ruimte binnen de hero op lage schermen krap: daar
   krijgt de hero-inhoud iets minder tussenruimte en anders verdwijnt de regel helemaal in plaats
   van half afgeknipt te worden. */
.hero .hero-caption{position:static;bottom:auto;left:auto;right:auto;margin-top:26px;padding-bottom:6px}
@media(min-width:761px){
  .hero-content{padding-top:52px;padding-bottom:22px}
  .hero h1{margin:8px 0 22px}
  .hero-trust{margin-top:16px}
}
@media(min-width:761px) and (max-height:780px){.hero .hero-caption{display:none}}
@media(max-width:760px){.hero .hero-caption{margin-top:22px}}

/* ---------------------------------------------------------------------------
   Punt 6 — "Binnenkort te bestellen" in het whey-blok op de homepage
   ------------------------------------------------------------------------ */

.stock.gp-soon{display:inline-block;margin:0 0 14px;padding:9px 13px;background:#ffffff12;border:1px solid #ffffff30;color:#f5f5f3;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

/* ---------------------------------------------------------------------------
   Punt 2 — leverbaar maar nog niet koopbaar (prelaunch of pack met ontbrekend onderdeel)
   ------------------------------------------------------------------------ */

.gp-uitverkocht.is-soon .gp-uitverkocht-badge{background:#ffffff17;border:1px solid #ffffff3d;color:#f5f5f3}
.gp-uitverkocht.is-soon .gp-uitverkocht-zin{color:#f5f5f3}

/* ---------------------------------------------------------------------------
   Punt 5 — 404-pagina
   ------------------------------------------------------------------------ */

.gp-error-404 .gp-error-actions{margin:26px 0 20px}
.gp-error-404 h1{margin:18px 0}
.gp-error-search{margin:0 0 8px}
.gp-error-search form,.gp-error-search .woocommerce-product-search{display:flex;gap:10px;flex-wrap:wrap;max-width:560px}
.gp-error-search input[type="search"],.gp-error-search input[type="text"]{flex:1;min-width:0;min-height:48px;background:#171717;border:1px solid #777;color:#f5f5f3;padding:13px 16px}
.gp-error-search button{min-height:48px;padding:0 22px;background:var(--red);border:1px solid var(--red);color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.gp-error-search button:hover{background:var(--bright)}
.gp-error-links{margin-top:20px;font-size:12px}
.gp-error-links a{color:#f5f5f3;text-decoration:underline}

/* ---------------------------------------------------------------------------
   D2 — aanraakvlakken van minimaal 44x44 px op mobiel
   ------------------------------------------------------------------------ */

@media(max-width:760px){
  .carousel-controls button{height:44px;width:44px}
  .text-link,.product-card>.text-link,.category-card .text-link,.section-heading>.text-link,.gp-seo-more summary,.footer-top>div>a,.footer-top>div>span,.woocommerce .woocommerce-breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
  .topline{min-height:44px;height:auto;padding-top:8px;padding-bottom:8px}
  nav a,.site-header nav a{min-height:44px;display:flex;align-items:center}
  .gp-account-panel>a,.gp-prelaunch button{min-height:44px}
  .quantity .qty,.woocommerce input.button,.woocommerce button.button{min-height:44px}
  .gp-category-pills a,.gp-shop-tools label{min-height:44px;display:inline-flex;align-items:center}
  /* logo, menuknop en zoekknop */
  .site-header .brand,.footer-top>.brand{min-height:44px}
  .nav-tools>a,.nav-tools>button,.nav-tools .menu-toggle,.nav-tools .search-toggle{min-width:44px;min-height:44px}
  /* producttitels en de SEO-linklijst: ruimere regels in plaats van een groter ontwerp */
  .product-card h3 a,.gp-mini-title{display:inline-flex;align-items:center;min-height:44px}
  .gp-seo-links li,.gp-seo-links li a{display:inline-flex;align-items:center;min-height:44px}
  .gp-account-panel>a,.drawer-categories a{min-height:44px;min-width:44px;display:flex;align-items:center}
  .footer-bottom a,.footer-bottom span,.gp-seo-links li a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------------------------------------------------------------------------
   E1 — minimale lettergrootte 12 px en letterspatie maximaal 0.12em
   (uitzondering: het beeldmerk GLADIATOR/PROTEIN en decoratieve
   achtergrondwoorden; die zijn vormgeving, geen leestekst.)
   ------------------------------------------------------------------------ */

.topline,.topline span,.brand small,.footer-top .brand small{font-size:12px;letter-spacing:.12em}
.cart-link,.site-header .cart-link,.assortment-label,.site-header .assortment-label{font-size:12px;letter-spacing:.1em}
.eyebrow,.hero .eyebrow,.product-info .eyebrow,.drawer-top .eyebrow,.gp-shop-hero .eyebrow,.gp-panel-kicker{font-size:12px;letter-spacing:.12em}
.button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.buy-row .button,.search-panel button,.newsletter-form button,.newsletter-form input,.category-card .text-link,.text-link,.product-card>.text-link,.section-heading>.text-link,.goal-card b,.gp-mini-cart,.gp-mini-view,.gp-wishlist-button,.gp-confirm-actions .button,.gp-category-pills a,.gp-shop-tools label,.gp-koopinfo-list dd small,.gp-preview-note,.gp-chip{font-size:12px;letter-spacing:.08em}
.hero-caption,.hero-caption span,.hero-trust span,.product-badge,.launch-bar,.stack-price small,.gp-store-facts,.gp-feature-facts span,.category-image>span,.image-note,.nutrition span,.fine-print,.feature-copy p.fine-print,.feature-tags,.buy-row small,.lifestyle-index,.story-photo span,.newsletter-form label,.newsletter-form small,.footer-bottom,.woocommerce-store-notice,p.demo_store,nav a,.site-header #main-nav a,.footer-top h3,.drawer-bottom p,.gp-seo-table thead th,.category-card p,.hero-side,.series .product-card:before{font-size:12px}
.topline,.topline span,.eyebrow,.hero .eyebrow,.hero-caption,.hero-trust span,.product-badge,.launch-bar,.conversion-trust span,.footer-bottom,.gp-store-facts,.gp-panel-kicker,.nav-tools .cart-link{letter-spacing:.12em}

/* ---------------------------------------------------------------------------
   E2 — rood als TEKSTKLEUR. Op donkere vlakken is #a30f18/#d01a25 te donker
   (2.5:1); daar gebruiken we #ff4d4d (4.9:1). Op de lichte secties blijft het
   bestaande rood, want daar is het juist wel leesbaar. Eén variabele, per
   context gezet, zodat dezelfde selectors overal het juiste rood krijgen.
   ------------------------------------------------------------------------ */

:root{--color-red-text:#ff4d4d}                                        /* donkere achtergrond */
.section-light,.gp-rec-block,.gp-mini-product{--color-red-text:var(--bright)}  /* lichte vlakken */

h2 span,.hero h1 em,.feature-tags span:before,.text-link:hover,nav a:hover,.review-mark,.gp-mini-price,.gp-product-recs .gp-rec-heading .eyebrow,.gp-info-note a,.page-content p a,.woocommerce-MyAccount-content a,.gp-product-information summary::after,.gp-shop-hero .eyebrow,.gp-lost-password-page .woocommerce:before,.gp-lost-password-page .gp-auth-switch:before{color:var(--color-red-text)}
.woocommerce .stock.out-of-stock,.woocommerce p.stock.out-of-stock{color:var(--color-red-text)!important}
.woocommerce-info:before,.woocommerce-message:before{color:var(--color-red-text)}

/* ---------------------------------------------------------------------------
   E3 — grijze kleine teksten en de verlanglijstknop op donker.
   Alleen op donkere vlakken; op de lichte secties blijft de bestaande grijstint,
   want #a7a7a7 op wit is juist te licht.
   ------------------------------------------------------------------------ */

.drawer-number,.wp-block-search input::placeholder,.gp-shop-tools input::placeholder{color:#a7a7a7}
.gp-breadcrumbs li+li::before{color:#a7a7a7}
.single-product .gp-wishlist-button{color:#cfc7bd!important;border-color:#ffffff38!important}
/* De reviewtab op de productpagina stond in #515151 op #202020 (2:1). */
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:#e8e8e5}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#fff}

/* ---------------------------------------------------------------------------
   E5 — scroll-reveal: maximaal 300 ms, start op opacity 0.3, uit bij reduced motion
   ------------------------------------------------------------------------ */

.will-reveal{opacity:.3;transform:translateY(14px);transition:opacity .3s ease,transform .3s ease}
.will-reveal.visible{opacity:1;transform:none}
html.gp-motion-ready .will-reveal{opacity:.3;transition:opacity .3s ease,transform .3s ease}
html.gp-motion-ready .will-reveal.visible{opacity:1}
@media(prefers-reduced-motion:reduce){
  .will-reveal,.will-reveal.visible,html.gp-motion-ready .will-reveal,html.gp-motion-ready .will-reveal.visible{opacity:1!important;transform:none!important;transition:none!important}
  html.gp-motion-ready .gp-motion-item{transition-delay:0s!important}
}