@charset "UTF-8";
/* ==========================================================================
Blitzschnell Replica — header / homepage / shared product card / footer
Consumes assets/css/bs-tokens.css. Every measurement is traceable to
E:\blitzschnell\scrape\ (see comments) — nothing here is eyeballed.
========================================================================== */
/* ==========================================================================
1. PRELOADER (source: LoftLoader Lite — black screen + yellow bolt)
evidence: source-cdp/screens/home-viewport.png, megamenu-11-Infos.png
========================================================================== */
.bs-preloader{
position:fixed;inset:0;z-index:9999;
background:#0a0a0a;display:flex;align-items:center;justify-content:center;
transition:opacity .5s ease,visibility .5s ease;
}
.bs-preloader__bolt{width:60px;height:auto;animation:bs-bolt 1.1s ease-in-out infinite}
.bs-preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
@keyframes bs-bolt{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){.bs-preloader__bolt{animation:none}}
/* ==========================================================================
2. HEADER — measured total 172px = 35 topbar + ~83 logo/search + 54 nav
evidence: design-tokens-measured.json "header", html/home.header.html,
_inline-style-tags.css #brxe-toilia/#brxe-lkmldo/#brxe-xckshn
========================================================================== */
.bs-header{position:sticky;top:0;z-index:500;width:100%}
/* Row 1 — yellow announcement bar, bg rgb(255,204,0) measured, h 35px */
.bs-topbar{background:var(--bs-yellow);color:var(--bs-ink)}
.bs-topbar__inner{
display:flex;align-items:center;justify-content:center;gap:0;
padding:4px var(--bs-gutter);font-size:16px;line-height:1.7;
}
.bs-topbar__link{font-weight:600;margin:0 8px}
.bs-topbar__link:hover{text-decoration:underline}
@media (max-width:767px){ .bs-topbar__inner{font-size:14px;padding:4px 10px;text-align:center} }
/* Row 2 — black bar: logo · search · mini-cart */
.bs-headbar{background:#000;padding:0 20px 10px}
.bs-headbar__inner{
display:flex;align-items:center;justify-content:space-between;
width:100%;max-width:var(--bs-content);margin-inline:auto;
padding:10px 0;
}
.bs-logo{width:120px;height:54px;display:flex;align-items:center;padding:3px 0}
.bs-logo img{width:120px;height:auto}
.bs-search{width:50%;max-width:700px;margin:0 20px 0 40px}
.bs-search__form{position:relative;display:block}
.bs-search__input{
width:100%;height:53px;
padding:13px 24px 13px 48px;
background:var(--bs-search-bg);color:var(--bs-ink);
border:1.5625px solid #0a0a0a;border-radius:var(--bs-r-20);
font-family:var(--bs-font);font-size:16px;font-weight:500;line-height:24px;
outline:none;
}
.bs-search__input::placeholder{color:var(--bs-ink);opacity:.75}
.bs-search__submit{
position:absolute;left:16px;top:50%;transform:translateY(-50%);
background:none;border:0;color:var(--bs-ink);font-size:18px;cursor:pointer;padding:0;
}
.bs-headtools{display:flex;align-items:center;justify-content:flex-end;gap:20px;width:150px}
.bs-searchicon{display:none;background:none;border:0;color:#fff;font-size:20px;cursor:pointer;padding:0}
/* mini-cart trigger — source renders "0,00 €" + cart icon + count bubble */
.bs-cart{display:flex;align-items:center;gap:8px;color:#fff;font-size:16px;font-weight:500;white-space:nowrap}
.bs-cart__icon{position:relative;font-size:20px;line-height:1}
.bs-cart__count{
position:absolute;top:-10px;right:-11px;width:20px;height:20px;
display:flex;align-items:center;justify-content:center;
background:var(--bs-yellow);color:#000;border-radius:50%;
font-size:13px;font-weight:700;line-height:1;
}
.bs-cart__count.is-empty{background:var(--bs-yellow)}
/* burger — mobile only, matches the source's 50x50 BricksCore burger */
.bs-burger{
display:none;width:50px;height:50px;background:none;border:0;color:#fff;
font-size:22px;cursor:pointer;align-items:center;justify-content:center;padding:0;
}
/* Row 3 — black nav rail, radius 20px, h 54px */
.bs-navrow{
display:flex;align-items:center;justify-content:space-between;
width:100%;max-width:var(--bs-content);margin:0 auto;
height:var(--bs-navrow-h);padding:6px 15px 1px 5px;
background:#000;border-radius:var(--bs-r-20);
}
.main-nav1{display:flex;align-items:flex-start;list-style:none;margin:0;padding:0}
.main-nav1--end{align-items:center}
.main-nav1 > li{position:static}
.main-nav1 > li > a,
.main-nav1 > li > .bs-nav__label{
display:inline-flex;align-items:center;gap:5px;flex-direction:row-reverse;
padding:10px;color:#fff;
font-family:var(--bs-font);font-size:var(--bs-fs-nav);font-weight:500;
line-height:25.5px;text-transform:capitalize;
border-bottom:3px solid rgba(241,241,241,0);
transition:var(--bs-ease);cursor:pointer;
}
.main-nav1 > li:hover > a,
.main-nav1 > li:hover > .bs-nav__label,
.main-nav1 > li.is-open > a,
.main-nav1 > li.is-open > .bs-nav__label{border-bottom-color:#000;color:var(--bs-yellow)}
.main-nav1 .bs-nav__icon{font-size:15px}
/* "Alle Kategorien" pill */
.bs-nav__all{
display:inline-flex;align-items:center;gap:8px;
margin-right:6px;padding:8px 14px;border-radius:var(--bs-r-20);
background:#1a1a1a;color:#fff;font-size:var(--bs-fs-nav);font-weight:500;
transition:var(--bs-ease);
}
.bs-nav__all:hover{background:#2b2b2b}
/* ---- Mega panel ---------------------------------------------------------
Bricks renders these as .brxe-dropdown + .mega-content, NOT a WP menu.
Reproduced here as ul.sub-menu so a shared mobile-drawer JS can derive the
drawer from `.main-nav1 li.group > a` + `ul.sub-menu`.
Measured: full-bleed, bg #f2f2f2, grid 1fr 1fr 1fr 3fr, gap 20px,
panel h 366px, photo card h 290px radius 32px.
------------------------------------------------------------------------- */
.main-nav1 li.group > ul.sub-menu{
position:absolute;left:0;right:0;top:100%;
display:none;background:var(--bs-page);
padding:16px 20px 0;margin:3px 0 0;list-style:none;
box-shadow:0 18px 30px -18px rgba(0,0,0,.35);
}
.main-nav1 li.group:hover > ul.sub-menu,
.main-nav1 li.group.is-open > ul.sub-menu{display:block}
.bs-mega{
display:grid;grid-template-columns:1fr 1fr 1fr 3fr;gap:20px;
width:100%;max-width:var(--bs-content);margin-inline:auto;
padding:4px 0 20px;
}
.bs-mega__col{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.bs-mega__head{
font-size:15px;font-weight:500;text-transform:capitalize;
color:var(--bs-ink);padding-bottom:3px;
}
.bs-mega__col li{padding-bottom:3px}
.bs-mega__col li > a,
.bs-mega__col li > span{
display:inline-block;font-size:15px;font-weight:400;line-height:25.5px;
text-transform:capitalize;color:var(--bs-grey-400);transition:color .2s ease;
}
.bs-mega__col li > a:hover{color:var(--bs-ink)}
/* Source styles "Driada Medical" struck-through (discontinued). Reproduced. */
.bs-mega__col li.is-discontinued > a,
.bs-mega__col li.is-discontinued > span{text-decoration:line-through}
.bs-mega__blurb{font-size:15px;line-height:1.5;color:var(--bs-grey-600);padding-bottom:10px}
.bs-mega__cta{
display:inline-flex;align-items:center;gap:5px;
font-size:15px;font-weight:500;color:var(--bs-ink);
}
.bs-mega__cta:hover{color:var(--bs-yellow)}
.bs-mega__photo{
display:flex;align-items:flex-start;
height:290px;border-radius:var(--bs-r-32);overflow:hidden;
padding:20px 40px 25px 25px;
background-position:center center;background-size:cover;
}
.bs-mega__photo h2{
color:#fff;font-size:36px;font-weight:700;line-height:1.1;
text-shadow:0 0 20px rgba(0,0,0,.47);
}
/* ---- Header responsive --------------------------------------------------- */
@media (max-width:992px){
.bs-navrow{display:none}
.main-nav1 li.group > ul.sub-menu{display:none!important}
}
@media (max-width:850px){
.bs-search{display:none}
.bs-headtools{width:220px;margin-right:0;gap:10px}
}
@media (max-width:767px){
.bs-headbar{padding:10px}
.bs-headbar__inner{padding:0}
.bs-logo{width:89px;height:auto}
.bs-logo img{width:89px}
.bs-searchicon{display:inline-flex}
.bs-burger{display:inline-flex}
.bs-cart{font-size:15px}
}
/* ---- Mobile drawer -------------------------------------------------------
Source: BricksCore off-canvas from the right, white, accordion with
Shop / Alle Kategorien / Alle Hersteller + a Kontakt card.
evidence: source-cdp/nav-mobile.json, screens/mobile-menu-open-390.png
------------------------------------------------------------------------- */
.bs-drawer{position:fixed;inset:0;z-index:900;visibility:hidden;pointer-events:none}
.bs-drawer.is-open{visibility:visible;pointer-events:auto}
.bs-drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .6s cubic-bezier(0,0,.2,1)}
.bs-drawer.is-open .bs-drawer__backdrop{opacity:1}
.bs-drawer__panel{
position:absolute;top:0;right:0;bottom:0;width:min(390px,92vw);
background:#fff;overflow-y:auto;padding:16px 20px 40px;
transform:translateX(100%);transition:transform .6s cubic-bezier(0,0,.2,1);
}
.bs-drawer.is-open .bs-drawer__panel{transform:translateX(0)}
.bs-drawer__close{
display:block;margin-left:auto;background:none;border:0;
font-size:26px;line-height:1;cursor:pointer;padding:6px;
}
.bs-acc{border:0}
.bs-acc__head{
display:flex;align-items:center;justify-content:space-between;width:100%;
background:none;border:0;padding:5px 0;cursor:pointer;text-align:left;
}
.bs-acc__head h3{font-size:22px;font-weight:700}
.bs-acc__head .ion-ios-arrow-forward{font-size:20px;transition:transform .25s ease}
.bs-acc.is-open .bs-acc__head .ion-ios-arrow-forward{transform:rotate(90deg)}
.bs-acc__body{display:none;padding:6px 0 14px}
.bs-acc.is-open .bs-acc__body{display:block}
.bs-acc__link{
display:flex;align-items:center;gap:10px;
padding:8px 0;font-size:16px;font-weight:500;
}
.bs-acc__link .icon{width:22px;text-align:center}
.bs-acc__btn{
display:block;width:100%;margin-bottom:8px;padding:10px 16px;
background:#000;color:#fff;border-radius:var(--bs-r-15);
font-size:15px;font-weight:600;text-align:center;
}
.bs-drawer__contact{background:var(--bs-surface-alt);border-radius:var(--bs-r-20);padding:20px;margin-top:20px;text-align:center}
.bs-drawer__contact h3{font-size:22px;font-weight:700;margin-bottom:6px}
.bs-drawer__contact p{margin:0 0 14px;font-size:15px}
.bs-drawer__contact a{
display:flex;align-items:center;gap:12px;justify-content:flex-start;
background:#000;color:#fff;border-radius:var(--bs-r-15);
padding:12px 18px;margin-bottom:10px;font-weight:600;
}
/* ---- Mini-cart drawer ---------------------------------------------------- */
.bs-minicart{position:fixed;inset:0;z-index:950;visibility:hidden;pointer-events:none}
.bs-minicart.is-open{visibility:visible;pointer-events:auto}
.bs-minicart__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .6s cubic-bezier(0,0,.2,1)}
.bs-minicart.is-open .bs-minicart__backdrop{opacity:1}
.bs-minicart__panel{
position:absolute;top:0;right:0;bottom:0;width:min(420px,94vw);
background:#fff;padding:24px;overflow-y:auto;
transform:translateX(100%);transition:transform .6s cubic-bezier(0,0,.2,1);
}
.bs-minicart.is-open .bs-minicart__panel{transform:translateX(0)}
.bs-minicart__close{background:none;border:0;font-size:22px;cursor:pointer;padding:4px}
.bs-minicart .woocommerce-mini-cart{margin-top:24px}
.bs-minicart .woocommerce-mini-cart__empty-message{margin-top:40px;font-weight:500}
.bs-minicart .woocommerce-mini-cart__buttons .button{
display:inline-flex;align-items:center;justify-content:center;
padding:13px 20px;border-radius:var(--bs-r-20);
background:#000;color:#fff;font-weight:600;margin-right:8px;
}
/* ==========================================================================
3. SHARED PRODUCT CARD (template-parts/product-card.php)
Used by every homepage carousel/grid AND reused by the shop / woo phases.
Measured (design-tokens-card.json): root 266x438 white radius 10px,
image radius 6px + 4.6875px white border, title 16/700,
tax 12/600 #787878, old price 17/400 #9e9e9e, sale 17/700 #000,
add-to-cart 123x40 radius 10px border 0.78px #e0e0e0, icon 17px.
========================================================================== */
.bs-pcard{
display:flex;flex-direction:column;justify-content:space-between;
width:100%;height:100%;
background:var(--bs-surface);border-radius:var(--bs-r-10);
overflow:hidden;transition:var(--bs-ease);position:relative;
}
.bs-pcard__badges{position:absolute;top:12px;left:12px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.bs-pcard__media{display:block;padding:12px 12px 0}
.bs-pcard__media img{
width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
border:4.6875px solid #fff;border-radius:var(--bs-r-6);
transform:scale(1.05);transition:var(--bs-ease);
}
.bs-pcard:hover .bs-pcard__media img{transform:scale(1.1)}
.bs-pcard__ph{
width:100%;aspect-ratio:1/1;border-radius:var(--bs-r-6);
background:var(--bs-surface-alt);
}
.bs-pcard__content{
display:flex;flex-direction:column;justify-content:flex-end;
padding:10px;height:100%;
}
.bs-pcard__title{
font-family:var(--bs-font);font-size:var(--bs-fs-card-title);font-weight:700;
line-height:1.2;text-align:left;padding:10px 0 5px;
}
.bs-pcard__tax{
font-family:var(--bs-font);font-size:var(--bs-fs-card-tax);font-weight:600;
line-height:1;color:var(--bs-grey-600);margin-bottom:10px;
}
.bs-pcard__tax a{color:inherit}
.bs-pcard__tax a:hover{color:var(--bs-ink)}
.bs-pcard__foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bs-pcard__price{display:flex;flex-direction:column;line-height:1.15}
.bs-pcard__price del{
font-size:13px;font-weight:400;color:var(--bs-grey-500);text-decoration:line-through;
}
.bs-pcard__price ins,
.bs-pcard__price .bs-amount{
font-size:var(--bs-fs-price);font-weight:700;color:var(--bs-ink);text-decoration:none;
}
.bs-pcard__cart{
display:flex;align-items:center;justify-content:center;
width:50%;min-width:104px;padding:10px 20px;
border:.78125px solid var(--bs-grey-200);border-radius:var(--bs-r-10);
color:var(--bs-ink);font-size:17px;transition:var(--bs-ease);
}
.bs-pcard__cart:hover{background:#000;color:#fff;border-color:var(--bs-ink-soft)}
.bs-pcard__cart.is-disabled{pointer-events:none;color:var(--bs-grey-400);border-color:var(--bs-grey-100)}
/* Out of stock: source washes the image out and greys the copy. */
.bs-pcard.is-oos .bs-pcard__media img{opacity:.35;filter:saturate(.35)}
.bs-pcard.is-oos .bs-pcard__title,
.bs-pcard.is-oos .bs-pcard__tax,
.bs-pcard.is-oos .bs-pcard__price .bs-amount,
.bs-pcard.is-oos .bs-pcard__price ins{color:var(--bs-grey-400)}
@media (max-width:767px){
.bs-pcard__title{font-size:14px}
.bs-pcard__cart{padding:8px 12px;min-width:0;font-size:13px}
.bs-pcard__price ins,.bs-pcard__price .bs-amount{font-size:15px}
}
/* ==========================================================================
4. HOMEPAGE SECTIONS — in source order (RECON §10.6)
========================================================================== */
.bs-home{display:block}
/* ---- H1 -----------------------------------------------------------------
The SOURCE HOMEPAGE HAS NO H1 (RECON §13, measured `h1: MISSING`).
That is a defect; we ship a real, single, German H1. It is visually
suppressed above the hero so the measured layout is unchanged.
------------------------------------------------------------------------- */
.bs-home__h1{
position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
/* ---- 4.0 HERO (#brxe-jpolue, h 640) ------------------------------------ */
.bs-hero{padding:20px var(--bs-gutter) 0;background:var(--bs-page)}
.bs-hero__grid{
display:flex;flex-direction:row;gap:20px;
width:100%;max-width:var(--bs-content);margin-inline:auto;
}
.bs-hero__main{width:67%;max-width:67%}
.bs-hero__side{display:flex;flex-direction:column;width:33%;gap:20px}
.bs-hero__big,
.bs-hero__small{
position:relative;display:flex;flex-direction:column;justify-content:space-between;
overflow:hidden;border-radius:var(--bs-r-24);transition:var(--bs-ease);
background-repeat:no-repeat;
}
.bs-hero__big{
height:600px;padding:32px;
background-color:var(--bs-scrim-17);
background-position:center right;background-size:auto 100%;
}
.bs-hero__big:hover{background-size:auto 105%}
.bs-hero__small{
height:290px;padding:20px;flex:1;
background-position:center right;background-size:cover;align-items:flex-start;
}
.bs-hero__brand{display:flex;align-items:center;margin-bottom:20px}
.bs-hero__brand img{max-height:36px;width:auto;padding-top:2px}
.bs-hero__title{
width:100%;font-size:var(--bs-fs-hero);font-weight:700;line-height:1;
color:#fff;text-transform:uppercase;margin-bottom:16px;
}
.bs-hero__sub{
width:100%;font-size:18px;font-weight:700;line-height:1;
color:#fff;text-transform:uppercase;
}
.bs-hero__smalltitle{
font-size:var(--bs-fs-hero);font-weight:700;line-height:1.1;color:#fff;
}
.bs-list{list-style:none;margin:12px 0 0;padding:0}
.bs-list li{display:flex;align-items:center;gap:8px;line-height:1.5}
.bs-list .icon{color:#fff;font-size:15px}
.bs-list .title{
color:#fff;text-transform:uppercase;font-weight:700;font-size:16px;
}
@media (max-width:1250px){
.bs-hero__big{height:420px}
.bs-hero__smalltitle{font-size:48px}
}
@media (max-width:992px){
.bs-hero__main{width:60%;max-width:60%}
.bs-hero__side{width:40%}
.bs-list .title{font-size:13px}
}
@media (max-width:850px){
.bs-hero__grid{flex-direction:column;gap:0}
.bs-hero__main{width:100%;max-width:100%;margin-bottom:20px}
.bs-hero__side{flex-direction:row;width:100%;gap:20px}
.bs-hero__small{max-width:50%;height:240px;border-radius:var(--bs-r-16)}
.bs-hero__big{border-radius:var(--bs-r-20);margin-bottom:0}
.bs-hero__smalltitle{font-size:24px}
}
@media (max-width:767px){
.bs-hero{padding:0 10px}
.bs-hero__big{height:270px;margin-top:10px;justify-content:flex-end;padding:10px}
.bs-hero__small{height:auto;min-height:120px;padding:10px}
.bs-hero__side{gap:10px;margin-top:10px}
.bs-hero__title{font-size:24px;margin-bottom:10px}
.bs-hero__sub{font-size:13px}
.bs-list .title{font-size:11px}
}
/* ---- 4.1 TICKER (marquee, h 123) --------------------------------------- */
.bs-ticker{padding:20px var(--bs-gutter);background:var(--bs-page)}
.bs-ticker__rail{
width:100%;max-width:var(--bs-content);margin-inline:auto;
background:#000;border-radius:var(--bs-r-20);
padding:30px 0;overflow:hidden;
}
.bs-ticker__track{display:flex;width:max-content;animation:bs-marquee 28s linear infinite}
.bs-ticker__group{display:flex;flex:0 0 auto}
.bs-ticker__item{
flex:0 0 530px;text-align:center;line-height:1;font-size:18px;font-weight:500;color:#fff;
}
.bs-ticker__item--accent{flex-basis:520px;color:var(--bs-yellow);font-weight:700}
@keyframes bs-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bs-ticker__rail:hover .bs-ticker__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.bs-ticker__track{animation:none}}
@media (max-width:767px){
.bs-ticker{padding:10px}
.bs-ticker__rail{padding:15px 0}
.bs-ticker__item{flex-basis:320px;font-size:16px}
.bs-ticker__item--accent{flex-basis:320px}
}
/* ---- 4.2 ANGEBOTE DES MONATS (#brxe-dxgfiq, h 661) --------------------- */
.bs-sale{padding:20px var(--bs-gutter);background:var(--bs-page)}
.bs-sale__box{
width:100%;max-width:var(--bs-content);margin-inline:auto;
border:2px solid #000;border-radius:var(--bs-r-20);
padding:32px 32px 48px;
}
.bs-sale__head{
display:flex;flex-direction:row;justify-content:space-between;align-items:center;
padding:0 16px 16px 0;
}
.bs-sale__eyebrowrow{display:flex;align-items:center;width:100%}
.bs-sale__eyebrow{font-size:var(--bs-fs-eyebrow);font-weight:700;line-height:1;margin-right:8px}
.bs-sale__title{font-size:var(--bs-fs-section);font-weight:700;line-height:1.1;margin-bottom:10px}
/* small outline countdown chip beside "ON SALE" */
.bs-cd--chip{
border:2px solid #000;border-radius:var(--bs-r-8);
padding:0 4px 0 8px;margin-left:8px;
}
.bs-cd--chip .bs-cd__field{font-size:12px;font-weight:700}
/* black pill countdown, right */
.bs-cd--pill{
width:196px;justify-content:center;
background:#000;border:2px solid #000;border-radius:var(--bs-r-12);
}
.bs-cd--pill .bs-cd__field{font-size:20px;font-weight:700;color:var(--bs-yellow)}
.bs-cd{display:flex;flex-direction:row;align-items:center}
.bs-cd__field{display:flex;flex-direction:row;margin-right:5px;line-height:1.6}
.bs-sale__grid{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}
.bs-sale__col{width:25%;padding-right:16px}
.bs-sale__empty{
width:100%;padding:40px 0;text-align:center;color:var(--bs-grey-600);font-weight:500;
}
/* card variant used inside the sale box */
.bs-pcard--offer{
border:2px solid #fff;border-radius:var(--bs-r-20);padding:12px;
box-shadow:var(--bs-shadow-card);
}
.bs-pcard--offer .bs-pcard__media{padding:0}
.bs-pcard--offer .bs-pcard__content{padding:0}
.bs-pcard--offer .bs-pcard__title{font-size:24px;line-height:1.2}
.bs-pcard--offer .bs-pcard__price del{font-size:15px}
.bs-pcard--offer .bs-pcard__price ins,
.bs-pcard--offer .bs-pcard__price .bs-amount{font-size:24px}
.bs-pcard--offer .bs-pcard__badges{top:0;left:0}
@media (max-width:992px){
.bs-sale__box{padding:16px}
.bs-sale__head{flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%}
.bs-sale__title{font-size:30px;text-align:left}
.bs-cd--pill{width:50%;margin:16px 0}
.bs-sale__col{width:50%;margin-bottom:16px}
}
@media (max-width:767px){
.bs-sale{padding:10px}
.bs-sale__box{padding:10px 10px 10px 10px}
.bs-sale__title{font-size:24px;margin-right:20px}
.bs-cd--chip{margin-left:4px}
.bs-pcard--offer .bs-pcard__title{font-size:14px}
.bs-pcard--offer .bs-pcard__price ins,
.bs-pcard--offer .bs-pcard__price .bs-amount{font-size:18px}
}
/* ---- 4.3/4.5/4.6/4.8/4.10 CAROUSEL SECTIONS ----------------------------- */
.bs-carousel{padding:40px 0 40px var(--bs-gutter);background:var(--bs-page)}
.bs-carousel__inner{padding:20px var(--bs-gutter) 20px 0;overflow:hidden}
.bs-carousel__head{
display:flex;flex-direction:row;justify-content:space-between;align-items:center;
width:100%;max-width:var(--bs-content);
}
.bs-carousel__eyebrow{font-size:var(--bs-fs-eyebrow);font-weight:700;line-height:1.6}
.bs-carousel__title{font-size:var(--bs-fs-section);font-weight:700;line-height:1.1;margin-bottom:10px}
.bs-carousel__viewport{
display:flex;gap:10px;padding-top:20px;
overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-ms-overflow-style:none;
}
.bs-carousel__viewport::-webkit-scrollbar{display:none}
.bs-carousel__slide{flex:0 0 var(--bs-carousel-card);scroll-snap-align:start;display:flex}
.bs-carousel__foot{display:flex;align-items:center;gap:20px;padding-top:18px}
.bs-carousel__track{
position:relative;flex:1;height:4px;border-radius:2px;background:var(--bs-grey-200);
}
.bs-carousel__thumb{
position:absolute;left:0;top:0;height:100%;border-radius:2px;
background:var(--bs-grey-700);width:20%;transition:left .15s linear,width .15s linear;
}
.bs-carousel__nav{display:flex;gap:16px}
.bs-carousel__btn{
width:32px;height:32px;min-width:32px;min-height:32px;
display:flex;align-items:center;justify-content:center;
background:none;border:0;color:#000;font-size:22px;cursor:pointer;padding:0;
}
.bs-carousel__btn[disabled]{opacity:.3;cursor:default}
.bs-carousel__empty{
padding:40px 0;color:var(--bs-grey-600);font-weight:500;
}
@media (max-width:767px){
.bs-carousel{padding:20px 0 40px 10px}
.bs-carousel__inner{padding:10px 10px 10px 0}
}
/* ---- 4.4 / 4.9 BANNERS (banner-1, banner-3) ---------------------------- */
.bs-bannersec{padding:20px var(--bs-gutter);background:var(--bs-page)}
.bs-banner{
position:relative;display:flex;flex-direction:row;justify-content:space-between;
width:100%;max-width:var(--bs-content);margin-inline:auto;
padding:var(--bs-space-64);border-radius:var(--bs-r-32);overflow:hidden;
background-position:center center;background-size:auto 100%;background-repeat:no-repeat;
transition:var(--bs-ease);
}
.bs-banner:hover{background-size:auto 110%}
.bs-banner::before{content:"";position:absolute;inset:0;background:var(--bs-scrim-25);pointer-events:none}
.bs-banner > *{position:relative}
.bs-banner--hgh{
background-position:top center;background-size:100%;column-gap:var(--bs-space-32);
}
.bs-banner--hgh::before{background:linear-gradient(var(--bs-scrim-50),var(--bs-scrim-75))}
.bs-banner--hgh:hover{background-size:110%}
.bs-banner__copy{display:flex;flex-direction:column;width:75%}
.bs-banner--hgh .bs-banner__copy{width:50%}
.bs-banner__brand{display:flex;flex-direction:row;align-items:center;margin-bottom:16px}
.bs-banner__brand img{max-height:36px;width:auto;padding-top:2px}
.bs-banner__brand span{
font-family:var(--bs-font-din);font-weight:400;font-size:16px;color:#fff;
margin-left:8px;padding-left:8px;border-left:2px solid #fff;line-height:1.2;
}
.bs-banner__title{
font-size:var(--bs-fs-hero);font-weight:700;line-height:1;color:#fff;
text-shadow:0 0 20px rgba(0,0,0,.47);width:75%;margin-bottom:24px;
}
.bs-banner__sub{
font-size:16px;font-weight:700;line-height:1;color:#fff;text-transform:uppercase;width:100%;
}
.bs-banner__cta{align-self:center;margin-bottom:8px}
@media (max-width:1250px){
.bs-banner{padding:24px}
.bs-banner__title{width:100%;font-size:48px}
}
@media (max-width:992px){
.bs-banner__copy,.bs-banner--hgh .bs-banner__copy{width:100%}
.bs-banner{flex-direction:column}
.bs-banner__title{font-size:24px;margin-bottom:16px}
.bs-banner__sub{font-size:13px;margin-bottom:8px}
}
@media (max-width:767px){
.bs-bannersec{padding:0 10px}
.bs-banner{background-size:cover;padding:16px}
.bs-banner:hover{background-size:cover}
.bs-banner__title{margin-bottom:10px;padding-right:20px}
}
/* ---- 4.7 REDEFINE YOUR LIMITS (banner-2 + 3 glass cards) --------------- */
.bs-peptides{padding:20px var(--bs-gutter);background:var(--bs-page)}
.bs-peptides__box{
position:relative;display:flex;flex-direction:column;align-items:center;
width:100%;max-width:var(--bs-content);margin-inline:auto;
padding:var(--bs-space-64);border-radius:var(--bs-r-32);overflow:hidden;
background-color:#000;background-position:top center;background-size:100%;
background-repeat:no-repeat;transition:var(--bs-ease);
}
.bs-peptides__box:hover{background-size:105%}
.bs-peptides__box::before{content:"";position:absolute;inset:0;background:var(--bs-scrim-25);pointer-events:none}
.bs-peptides__box > *{position:relative}
.bs-peptides__head{display:flex;flex-direction:row;justify-content:space-between;width:100%}
.bs-peptides__cards{display:flex;flex-direction:row;gap:16px;width:100%;margin:16px 0}
.bs-pep{
display:flex;flex-direction:row;align-items:center;justify-content:center;
flex:1;column-gap:24px;height:100%;
padding:24px 32px 12px 24px;
border-radius:var(--bs-r-16);background:var(--bs-glass);
backdrop-filter:blur(12px);transition:var(--bs-ease);
}
.bs-pep:hover{background:var(--bs-glass-hover)}
.bs-pep__body{flex:1}
.bs-pep__title{
color:#fff;font-size:24px;font-weight:700;line-height:1;
text-shadow:0 0 20px rgba(0,0,0,.47);margin-bottom:8px;
}
.bs-pep__sub{
color:#fff;font-size:16px;font-weight:500;line-height:1;
text-shadow:0 0 20px rgba(0,0,0,.47);margin-bottom:24px;
}
.bs-pep__img{width:110px;flex:0 0 auto}
@media (max-width:1250px){
.bs-peptides__box{padding:40px}
.bs-pep{column-gap:16px;padding-inline:16px}
}
@media (max-width:992px){
.bs-peptides__cards{flex-direction:column}
.bs-pep{justify-content:space-between;margin-bottom:16px}
.bs-pep__sub{font-size:13px}
}
@media (max-width:767px){
.bs-peptides{padding:0 10px}
.bs-peptides__box{padding:32px 20px 0}
.bs-peptides__head{flex-direction:column}
}
/* ---- 4.11 SEO CONTENT ZONE (STANDARDS #6) ------------------------------
Source has NO FAQ section (RECON §10.6), so per PROJECT-BRIEF Q7 the zone
sits after the final content section, immediately before the footer.
------------------------------------------------------------------------- */
.bs-seo{padding:20px var(--bs-gutter) 40px;background:var(--bs-page)}
.bs-seo__inner{
width:100%;max-width:var(--bs-content);margin-inline:auto;
background:var(--bs-surface);border-radius:var(--bs-r-20);
padding:40px 48px;
}
.bs-seo__inner h2{
font-size:var(--bs-fs-section);font-weight:700;line-height:1.1;margin-bottom:16px;
}
.bs-seo__inner h3{font-size:22px;font-weight:700;margin:24px 0 8px}
.bs-seo__inner p{margin:0 0 16px;font-size:16px;line-height:1.7;max-width:110ch}
.bs-seo__inner ul{margin:0 0 16px;padding-left:20px}
.bs-seo__inner li{margin-bottom:6px}
.bs-seo__inner a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){
.bs-seo{padding:10px 10px 20px}
.bs-seo__inner{padding:24px 20px}
}
/* ==========================================================================
5. FOOTER (source-cdp/html/home.footer.html, footer-tree.json, h 876)
========================================================================== */
.bs-footer{background:var(--bs-page)}
.bs-footer__badge{padding:0 var(--bs-gutter) 20px;background:var(--bs-page)}
.bs-footer__badge-inner{width:100%;max-width:var(--bs-content);margin-inline:auto}
.bs-footer__badge iframe{
width:100%;min-width:320px;min-height:227px;border:0;border-radius:var(--bs-r-20);display:block;
}
@media (max-width:767px){ .bs-footer__badge iframe{min-height:192px} }
.bs-footer__main{padding:0 var(--bs-gutter) 20px;background:var(--bs-page)}
.bs-footer__cols{
display:grid;grid-template-columns:1fr 1fr 1fr 3fr;
grid-template-columns:3fr 1fr 1fr 1fr;
column-gap:40px;row-gap:30px;align-items:center;
width:100%;max-width:var(--bs-content);margin-inline:auto;
padding:20px;border-radius:var(--bs-r-20);
background-image:linear-gradient(rgba(255,255,255,.92) 30%,#f1f1f1);
}
.bs-footer__brand{
padding:10px 40px 20px 20px;
font-size:var(--bs-fs-footer-head);font-weight:700;line-height:1.3;
color:#000;text-align:left;
}
.bs-footer__col{padding:0 20px}
.bs-footer__col h3{font-size:22px;font-weight:700;padding:15px 0 10px 20px;margin-bottom:10px}
.bs-footer__link{
display:flex;align-items:center;gap:10px;width:100%;
padding:8px 16px;border-radius:var(--bs-r-15);
font-size:var(--bs-fs-footer-link);font-weight:500;line-height:25.5px;color:#000;
transition:var(--bs-ease);
}
.bs-footer__link:hover{gap:15px;background:#f0f0f0}
.bs-footer__link .icon{width:20px;display:inline-flex;justify-content:center}
.bs-footer__col--contact{display:flex;flex-direction:column;align-items:center;padding:0}
.bs-footer__contactbtn{
display:flex;align-items:center;gap:12px;width:100%;
padding:12px 18px;margin-bottom:10px;border-radius:var(--bs-r-15);
background:#000;color:#fff;font-size:var(--bs-fs-footer-link);font-weight:600;
transition:var(--bs-ease);
}
.bs-footer__contactbtn:hover{gap:18px}
.bs-footer__contactbtn .icon{width:22px;display:inline-flex;justify-content:center;font-size:16px}
.bs-footer__rating{display:flex;align-items:center;gap:6px;margin-top:6px;font-weight:700;color:#008000;font-size:14px}
.bs-footer__rating .bs-stars{color:#ffb400;letter-spacing:1px}
.bs-footer__swiki{display:block;max-width:210px;margin-top:6px}
.bs-footer__known{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:20px;padding:5px 0 35px;background:var(--bs-page);
}
.bs-footer__known h3{font-size:22px;font-weight:700}
.bs-footer__knownlogos{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px}
.bs-footer__knownlogos img{max-height:60px;width:auto}
.bs-footer__pay{
display:flex;flex-direction:row;justify-content:center;align-items:center;
gap:20px;padding:5px 0 35px;background:var(--bs-page);
}
.bs-footer__pay img{width:34px;height:34px}
.bs-footer__pay a{transition:var(--bs-ease)}
.bs-footer__pay a:hover{transform:translateY(-2px)}
@media (max-width:992px){
.bs-footer__cols{grid-template-columns:1fr 1fr;column-gap:20px;row-gap:20px;padding:20px 10px 0}
.bs-footer__brand{grid-column:1 / -1;padding-left:10px}
.bs-footer__col--contact{grid-column:1 / -1;align-items:flex-start}
.bs-footer__contactbtn{max-width:420px}
}
@media (max-width:767px){
.bs-footer__main,.bs-footer__badge{padding-inline:10px}
.bs-footer__brand{font-size:36px;padding:0 50px 10px 10px}
.bs-footer__col{padding:0 10px}
.bs-footer__col h3{font-size:18px;padding-left:10px}
}
/* ==========================================================================
6. GTranslate float switcher — source config url_structure:"none"
Measured: 86x45, bg #fff, colour #555, radius 20px, Barlow 17px,
bottom-left. WPML is intentionally NOT reproduced (source never had it).
========================================================================== */
.gt_float_switcher{font-family:var(--bs-font)!important;font-size:17px!important;border-radius:20px!important;bottom:10px!important}
.gt_float_switcher .gt-selected .gt-current-lang span.gt-lang-code{display:none}
/* ==========================================================================
7. Structural glue for the markup shapes used by the template parts
========================================================================== */
/* Mega panel: ul.sub-menu > li.bs-mega-wrap > ul.bs-mega > li.bs-mega__cell */
.main-nav1 ul.sub-menu,
.bs-mega-wrap,
.bs-mega,
.bs-mega__cell,
.bs-mega__col{list-style:none}
.bs-mega-wrap{display:block;margin:0;padding:0}
.bs-mega__cell{display:block}
.bs-mega--info{grid-template-columns:3fr 1fr 1fr 1fr}
.bs-mega__photo{background-blend-mode:normal;background-repeat:no-repeat;flex-direction:column;justify-content:flex-start}
@media (max-width:1320px){
.bs-mega,.bs-mega--info{grid-template-columns:1fr 1fr 1fr;gap:16px}
.bs-mega__photo{grid-column:1 / -1;height:200px}
}
/* Header: yellow bar slides away after 80px, mirroring data-slide-up-after */
.bs-header .bs-topbar{max-height:60px;overflow:hidden;transition:max-height .3s ease,padding .3s ease}
.bs-header.is-scrolled .bs-topbar{max-height:0}
/* QA hook only — dead menu targets carry .is-missing but look identical to
the source. Toggle the rule below to audit them visually. */
/* .is-missing > a, a.is-missing { outline:1px dashed #ff1414 } */
/* Hero copy block */
.bs-hero__copy{display:flex;flex-direction:column}
.bs-hero__small > div{display:flex;flex-direction:column}
/* Countdown internals */
.bs-cd__sep{margin:0 4px}
.bs-cd__unit{margin-left:1px}
.bs-cd--chip{align-self:center}
.bs-sale__lead{display:flex;flex-direction:column}
.bs-sale__cd{display:inline-flex}
/* Offer card tweaks */
.bs-pcard--offer .bs-pcard__media img{transform:none;border-width:0;border-radius:var(--bs-r-8)}
.bs-pcard--offer:hover .bs-pcard__media img{transform:scale(1.03)}
/* Glass peptide cards use spans inside an — restore block/flex flow */
.bs-pep__body{display:flex;flex-direction:column;flex:1}
.bs-pep__title,.bs-pep__sub{display:block}
.bs-pep .bs-list{margin-top:0}
.bs-pep--wide{flex:1;align-self:stretch}
@media (max-width:992px){ .bs-banner--hgh{row-gap:16px} .bs-pep--wide{width:100%} }
/* Carousel heading column */
.bs-carousel__head > div{display:flex;flex-direction:column}
/* Site main wrapper */
.bs-site-main{display:block}
/* ==========================================================================
8. Corrections after the first CDP tile-diff vs _shots/ (1440/820/390)
========================================================================== */
/* 8.1 Nav item icon order.
Bricks' DOM is label with row-reverse, i.e.
icon FIRST. Our DOM already puts first, so row-reverse would flip it
the wrong way. Evidence: _shots/home-1440.png — "(syringe) Injektionen". */
.main-nav1 > li > a,
.main-nav1 > li > .bs-nav__label{flex-direction:row}
/* 8.2 Nav rail sits inside the black header band with a 20px gutter
(source #brxe-lkmldo padding 0 20px 10px wraps #brxe-xckshn). */
.bs-headbar{padding:0 20px 10px}
.bs-navrow{max-width:var(--bs-content)}
/* 8.3 The source hides the search magnifier from 768px up
(_wp-custom-css.css: @media (min-width:768px){.dgwt-wcas-ico-magnifier{display:none}}). */
@media (min-width:768px){ .bs-search__submit{display:none} }
/* 8.4 Small hero cards: the CLASS says 64px but the element IDs override it —
#brxe-szpoia / #brxe-xcwvhl = 32px, then 24px, then 18/14px. */
.bs-hero__smalltitle{font-size:32px}
@media (max-width:1250px){ .bs-hero__smalltitle{font-size:24px} }
@media (max-width:767px){ .bs-hero__smalltitle{font-size:16px} }
/* 8.5 Hero bullet list is 18px at desktop (#brxe-pnbkhq .title), not 16px,
and shrinks hard on mobile (13px, then 8/9px). */
.bs-hero__small .bs-list{margin-top:16px;margin-bottom:16px}
.bs-hero__small .bs-list .title{font-size:18px;line-height:1.4}
@media (max-width:1250px){ .bs-hero__small .bs-list .title{font-size:16px} }
@media (max-width:992px){ .bs-hero__small .bs-list .title{font-size:13px} }
@media (max-width:767px){
.bs-hero__small .bs-list{margin-top:8px;margin-bottom:8px}
.bs-hero__small .bs-list .title{font-size:9px}
/* Source hides these CTAs on mobile: #brxe-guppud / #brxe-wnsnuw display:none */
.bs-hero__small .bs-btn-hero{display:none}
}
/* 8.6 Ticker items never wrap — the source uses fixed 530/520px item widths. */
.bs-ticker__item{white-space:nowrap}
/* 8.7 Countdown pill: the ANCHOR is 50% wide below 992px (#brxe-iumbqu),
the pill itself stays 196px (#brxe-mhxoql). */
@media (max-width:992px){
.bs-cd--pill{width:196px;margin:0}
.bs-sale__cd{width:50%;margin:16px 0;justify-content:flex-start}
}
@media (max-width:767px){ .bs-sale__cd{width:auto} }
/* 8.8 Section side gutter is 20px from 1500px DOWN, not 1250px.
Evidence: #brxe-jpolue / #brxe-ksadsi / #brxe-ezlkpm / #brxe-oeatjd all carry
a `padding-right:20px;padding-left:20px` override inside @media (max-width:1500px),
and _shots/home-1440.png shows the hero card's left edge at x=20, not x=40. */
@media (max-width:1500px){ :root{ --bs-gutter:20px } }
@media (max-width:767px){ :root{ --bs-gutter:10px } }
/* 8.9 Search field measures 673x53 on the source, not a flat 50%. */
.bs-search{max-width:673px}
/* 8.10 Exact source breakpoints for the elements the source hides.
All four are measured `display:none` rules in the Bricks inline CSS, and
all four are confirmed against _shots/home-820.png and home-390.png. */
/* Black countdown pill — #brxe-iumbqu {display:none} @media (max-width:850px) */
@media (max-width:850px){ .bs-sale__cd{display:none} }
/* Hero CTAs — #brxe-macafh / #brxe-guppud / #brxe-wnsnuw @media (max-width:478px) */
@media (max-width:478px){
.bs-hero__big .bs-btn-hero,
.bs-hero__small .bs-btn-hero{display:none}
}
/* (the ≤767 rule in 8.5 is superseded — restore the CTA between 479 and 767) */
@media (min-width:479px) and (max-width:767px){ .bs-hero__small .bs-btn-hero{display:inline-flex} }
/* "Alle Peptide" CTA — #brxe-ityaye {display:none} @media (max-width:850px) */
@media (max-width:850px){ .bs-peptides .bs-banner__cta{display:none} }
/* Card taxonomy line — .product-card_tax {display:none} @media (max-width:478px) */
@media (max-width:478px){ .bs-pcard__tax{display:none} }
/* Nav rail — #brxe-xckshn {display:none} @media (max-width:850px), not 992px */
@media (max-width:992px){ .bs-navrow{display:flex} }
@media (max-width:850px){ .bs-navrow{display:none} }
/* 8.11 DOCUMENTED DEVIATION (usability, not fidelity):
the source shows NO burger and NO search between ~479px and ~850px — that
band has zero navigation (verified on _shots/home-820.png). We surface the
burger from 767px down instead of 478px down. This changes nothing at the
three diffed widths (1440 / 820 / 390) but removes part of the dead band.
To go 100 % source-exact, change 767px to 478px in section 2 of this file. */
/* 8.12 Hero big card: 3 flex children + space-between (empty spacer, copy,
CTA) — this is what vertically centres the copy on the source. */
.bs-hero__spacer{display:block;width:100%;height:0}
@media (max-width:478px){ .bs-hero__spacer{display:none} }
/* ==========================================================================
9. BREAKPOINT REALIGNMENT — the source's real breakpoints
The source's Bricks CSS steps at 1500 / 1250 / 850 / 478 (design-tokens
-measured.json "breakpoints"); the first pass of this file used 1250/992/767.
Every value below was read out of the source's own media blocks — the
media-query context of each rule was extracted, not guessed.
========================================================================== */
/* 9.1 tokens */
:root{ --bs-gutter:40px; --bs-carousel-card:252px; --bs-fs-section:36px; --bs-fs-eyebrow:16px; --bs-fs-hero:64px; }
@media (max-width:1500px){ :root{ --bs-gutter:20px } }
@media (max-width:1250px){ :root{ --bs-carousel-card:230px; --bs-fs-hero:48px } }
@media (max-width:850px){ :root{ --bs-fs-section:30px; --bs-fs-eyebrow:12px; --bs-fs-hero:24px } }
@media (max-width:478px){ :root{ --bs-gutter:10px; --bs-carousel-card:150px; --bs-fs-section:24px } }
/* 9.2 logo — #brxe-muypsc 178px base, 89px @<=1250 (capped by the 120px block) */
.bs-logo,.bs-logo img{width:120px}
@media (max-width:1250px){ .bs-logo,.bs-logo img{width:89px} }
/* 9.3 black header band — #brxe-lkmldo */
.bs-headbar{padding:0 20px 10px}
@media (max-width:850px){ .bs-headbar{padding-bottom:20px} }
@media (max-width:478px){ .bs-headbar{padding:10px} .bs-headbar__inner{padding:0} .bs-headtools{min-height:50px} }
/* 9.4 hero — #brxe-tsqfvp / .hero-divsmall1 */
.bs-hero{padding:20px var(--bs-gutter) 0}
.bs-hero__big{height:600px;padding:32px;border-radius:var(--bs-r-24)}
.bs-hero__small{height:290px;padding:20px;border-radius:var(--bs-r-24)}
@media (max-width:1250px){ .bs-hero__small{border-radius:var(--bs-r-20)} }
@media (max-width:850px){
.bs-hero__grid{flex-direction:column;gap:0}
.bs-hero__main{width:100%;max-width:100%;margin-bottom:20px}
.bs-hero__side{flex-direction:row;width:100%;gap:20px}
.bs-hero__big{height:420px;margin-bottom:0;border-radius:var(--bs-r-20)}
.bs-hero__small{height:240px;max-width:50%;border-radius:var(--bs-r-16)}
.bs-hero__sub{font-size:13px}
}
@media (max-width:478px){
.bs-hero__big{height:270px;margin-top:10px;padding:10px;justify-content:flex-end}
.bs-hero__small{height:120px;padding:10px;overflow:hidden}
.bs-hero__side{gap:10px;margin-top:10px}
}
/* 9.5 hero small-card titles — #brxe-szpoia 32/24/14, #brxe-xcwvhl 32/24/18 */
.bs-hero__smalltitle{font-size:32px}
@media (max-width:850px){ .bs-hero__smalltitle{font-size:24px} }
@media (max-width:478px){ .bs-hero__smalltitle{font-size:16px} }
/* 9.6 hero bullets — #brxe-pnbkhq/.title 18/16/13/8-9 */
.bs-hero__small .bs-list .title{font-size:18px}
@media (max-width:1250px){ .bs-hero__small .bs-list .title{font-size:16px} }
@media (max-width:850px){ .bs-hero__small .bs-list .title{font-size:13px} }
@media (max-width:478px){ .bs-hero__small .bs-list .title{font-size:9px} }
/* 9.7 hero / peptide CTAs — exact source visibility */
@media (max-width:478px){ .bs-hero__big .bs-btn-hero,.bs-hero__small .bs-btn-hero{display:none} }
@media (min-width:479px){ .bs-hero__small .bs-btn-hero{display:inline-flex} }
/* 9.8 banner titles — #brxe-nsnrkn 64/48/24 */
.bs-banner__title{font-size:var(--bs-fs-hero)}
@media (max-width:1250px){ .bs-banner__title{width:100%} }
@media (max-width:850px){ .bs-banner__title{margin-bottom:16px} .bs-banner__sub{font-size:13px} }
/* 9.9 glass-card bullets — .list-peptides .title 16/13/11 */
.bs-pep .bs-list .title{font-size:16px}
@media (max-width:1500px){ .bs-pep .bs-list .title{font-size:13px} }
@media (max-width:1250px){ .bs-pep .bs-list .title{font-size:11px} }
/* 9.10 section side padding at the source's own steps */
.bs-ticker,.bs-sale,.bs-bannersec,.bs-peptides,.bs-seo{padding-left:var(--bs-gutter);padding-right:var(--bs-gutter)}
.bs-carousel{padding-left:var(--bs-gutter);padding-right:0}
.bs-carousel__inner{padding-right:var(--bs-gutter)}
/* 9.11 sale / carousel layout steps move from 992/767 to 850/478 */
@media (max-width:992px){ .bs-sale__col{width:25%} .bs-sale__head{flex-direction:row;align-items:center} }
@media (max-width:850px){
.bs-sale__box{padding:16px}
.bs-sale__head{flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%}
.bs-sale__title{text-align:left}
.bs-sale__col{width:50%;margin-bottom:16px}
.bs-peptides__cards{flex-direction:column}
.bs-pep{justify-content:space-between;margin-bottom:16px}
.bs-banner{flex-direction:column}
.bs-banner__copy,.bs-banner--hgh .bs-banner__copy{width:100%}
}
@media (max-width:478px){
.bs-sale__box{padding:10px}
.bs-sale__title{margin-right:20px}
.bs-pcard--offer .bs-pcard__title{font-size:14px}
}
/* 9.12 footer brand — #brxe-kiqfnt clamp / 40px @<=850 / 36px @<=478 */
@media (max-width:850px){ .bs-footer__brand{width:100%;font-size:40px;padding-left:0} }
@media (max-width:478px){ .bs-footer__brand{font-size:36px;padding:0 50px 10px 10px} }
@media (max-width:850px){
.bs-footer__cols{grid-template-columns:1fr 1fr;column-gap:20px;row-gap:20px;padding:20px 10px 0}
.bs-footer__brand{grid-column:1 / -1}
.bs-footer__col--contact{grid-column:1 / -1;align-items:flex-start}
}
/* 9.13 hero section padding/margins at <=478 — #brxe-jpolue {padding:0 10px}
(padding-TOP is 0 there) and #brxe-zoadgx {margin-bottom:0}. */
@media (max-width:478px){
.bs-hero{padding-top:0}
.bs-hero__main{margin-bottom:0}
}
/* 9.14 Logo block — #brxe-wgvldz is 120px wide with justify-content:center
from 1250px down, so the 89px mark sits centred inside it (source x=25 at
376px, not x=10). */
@media (max-width:1250px){ .bs-logo{width:120px;justify-content:center} .bs-logo img{width:89px} }
/* 9.15 Drawer accordion chevron does NOT rotate on the source — the open
"Shop" group still shows a right-pointing arrow
(screens/mobile-menu-open-390.png). */
.bs-acc.is-open .bs-acc__head .ion-ios-arrow-forward{transform:none}