@charset "UTF-8";
/* ==========================================================================
   Blitzschnell Replica — PHASE 3: shop / category / search
   Enqueued CONDITIONALLY (is_shop || is_product_taxonomy || product search),
   never sitewide. EVERY selector below is scoped under .bs-shop — no bare
   .bs-hero / .bs-banner / .bs-hero__title is declared anywhere in this file.

   Evidence for every value:
     source-cdp/html/shop.inline-styles.css   (Bricks element CSS, parsed)
     source-cdp/html/shop.html                (loop-card inline <style>)
     source-cdp/design-tokens-card.json       (grid 1092px, cols 265.601 x4,
                                               gap 10px, card 266x438,
                                               orderby select 252x52 r20)
     source-cdp/css/_inline-style-tags.css    (Bricks colour vars)
     _shots/shop-1440.png  (pixel-measured: hero band 1384x200 @x21..1404;
                            select 251x52 @x21,y423; reset 252x42 @x21,y676;
                            card1 266x438 @x313,y422; card gap 10)
     _shots/shop-820-tile00.png  (filters stack full-width above a 2-col grid)
     _shots/shop-390-tile00.png  (hero band absent)
     _shots/shop-1440-full.png   (infinite-scroll spinner, 27x10 grey arc,
                                  in the grid cell after the last card)
   ========================================================================== */

.bs-shop{
  --bs-shop-gutter:20px;   /* section padding: 20px @desktop, 10px @<=478 */
  background:var(--bs-page);
}

@media (max-width:478px){
  .bs-shop{--bs-shop-gutter:10px}
}

/* ==========================================================================
   1. HERO BAND  (source section #brxe-rkzwqg > container #brxe-wqzqnu)
   ========================================================================== */

.bs-shop__herowrap{
  padding:20px var(--bs-shop-gutter) 10px;
  background:var(--bs-page);
}

/*
 * ⚠ HERO H1 ALIGNMENT — ORCHESTRATOR-DIRECTED TWEAK (2026-08-01), NOT a source
 * match. Recorded here so it can be reverted knowingly.
 *
 * The MEASURED source is CENTERED, on three independent lines of evidence:
 *   1. The source's own Bricks theme stylesheet (_inline-style-tags.css)
 *      declares, verbatim, for h1:  text-align: center
 *   2. _shots/shop-820-tile00.png and category-820-tile00.png: the H1 wraps to
 *      two lines; line 1 sits L=65 / R=65 and line 2 L=304 / R=305 inside the
 *      766px hero box. A 30px left inset would put line 2 at L=30.
 *   3. _shots/shop-1440-full.png: the ink run is x91..1350 in the 1386px box —
 *      the same x-range this build produced while centered.
 *
 * The FLAG was raised against /Kategorie/peptide/, whose H1 is now a SHORT
 * per-term string supplied through the _bs_hero_heading term-meta hook. The
 * source has no short category H1 anywhere, so there is no captured reference
 * for how one should sit; centered, it reads as floating mid-band.
 *
 * REVERT = justify-content:center + padding-inline:24px + text-align:center.
 */
.bs-shop__hero{
  width:100%;max-width:var(--bs-content);margin-inline:auto;
  height:200px;border-radius:var(--bs-r-20);
  display:flex;align-items:center;justify-content:center;
  padding-inline: 24px;
  background-color:rgba(0,0,0,.25);      /* --bricks-color-gjelqz */
  background-blend-mode:multiply;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  overflow:hidden;
}

.bs-shop__h1{
  font-family:var(--bs-font);
  /* 50px, derived by glyph-width equivalence against _shots/shop-1440.png:
     the identical string measures 1260px there and 1209px at 48px here, so
     48 x 1260/1209 = 50.0px. (Cap-height alone read 35px -> ~48.6px, which the
     width test corrects.) Below 1250px Bricks overrides to 32px, below 478px
     to 24px, so a flat 50px is exactly equivalent to any clamp the source may
     be using in the >1250px band. */
  font-size:50px;font-weight:700;line-height:1.1;
  color:#fff;                            /* --bricks-color-2d1664 */
  /* text-align: center is part of the directed tweak above — the source's own
     stylesheet says center. Revert both together. */
  text-align: center;margin:0;
}

@media (max-width:1250px){
  .bs-shop__h1{font-size:32px}
}

/* Source hides the whole band below 478px (visibility:hidden;height:1px)
   — confirmed absent in _shots/shop-390-tile00.png. */
@media (max-width:478px){
  .bs-shop__herowrap{padding:5px var(--bs-shop-gutter) 0;visibility:hidden;height:1px;overflow:hidden}
  .bs-shop__h1{font-size:24px}
}

/* ==========================================================================
   2. BODY: filter rail + grid  (source section #brxe-qateid > #brxe-zhkqrv)
   ========================================================================== */

.bs-shop__body{
  padding:10px var(--bs-shop-gutter);
  background:var(--bs-page);             /* --bricks-color-vewuoc = #f2f2f2 */
}

/* Measured at 1426px content: 20%/80% with a 20px gap and flex-shrink, giving
   273.4px rail + 1092.6px grid — exactly the captured 265.601px x4 columns. */
.bs-shop__inner{
  width:100%;max-width:var(--bs-content);margin-inline:auto;
  display:flex;flex-direction:row;flex-wrap:nowrap;
  column-gap:20px;row-gap:20px;
  padding-top:10px;
  align-items:flex-start;
}

@media (max-width:1250px){
  .bs-shop__inner{padding-top:0}
}

.bs-shop__side{
  width:20%;min-width:0;flex-shrink:1;
  padding-right:20px;
  display:flex;flex-direction:column;row-gap:20px;
  margin:0;
}

.bs-shop__main{width:80%;min-width:0;flex-shrink:1}

@media (max-width:850px){
  .bs-shop__inner{flex-wrap:wrap}
  .bs-shop__side{width:100%;padding-right:0}
  .bs-shop__main{width:100%}
}

/* ==========================================================================
   3. ORDERBY  (source #brxe-grpoha wrapper + native <select>)
   ========================================================================== */

.bs-shop__orderby{
  width:100%;
  border:1px solid #999;                 /* --bricks-color-tkoqvx */
  border-radius:var(--bs-r-20);
  background:#fff;
}

.bs-shop__select{
  width:100%;height:52px;
  padding:6px 30px 6px 12px;
  border:0;border-radius:var(--bs-r-20);
  background:#fff;color:var(--bs-ink);
  font-family:var(--bs-font);font-size:16px;font-weight:600;
  cursor:pointer;
  /* The source renders NO dropdown arrow at 1440 or 820 (pixel-scanned the
     right 75px of the pill in both _shots: only the wrapper border is present).
     padding-right stays 30px, matching the source's own declaration. */
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
}

.bs-shop__select:focus-visible{outline:2px solid var(--bs-ink);outline-offset:2px}

/* ==========================================================================
   4. FACET ACCORDIONS  (source #brxe-kvwipd .brxe-accordion-nested)
      heading 17px/1 (.filter-accordion.brxe-heading), row min-height 32px,
      body padding 10px 0 (#brxe-kvwipd .accordion-content-wrapper)
   ========================================================================== */

.bs-shop__accgroup{display:flex;flex-direction:column;width:100%}

.bs-shop__acc{width:100%}

.bs-shop__acchead{
  display:flex;align-items:center;justify-content:space-between;
  min-height:32px;padding:5px 0;
  cursor:pointer;list-style:none;
  gap:10px;
}

.bs-shop__acchead::-webkit-details-marker{display:none}
.bs-shop__acchead::marker{content:""}

.bs-shop__acctitle{
  font-family:var(--bs-font);font-size:17px;font-weight:600;line-height:1;
  color:var(--bs-ink);
}

.bs-shop__accicon{
  font-size:14px;color:var(--bs-ink);
  transition:transform .2s ease;
}

.bs-shop__acc[open]>.bs-shop__acchead .bs-shop__accicon{transform:rotate(180deg)}

.bs-shop__accbody{padding:10px 0}

.bs-shop__opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}

.bs-shop__opt{
  display:flex;align-items:center;gap:.5em;
  color:inherit;cursor:pointer;
  font-family:var(--bs-font);font-size:16px;font-weight:400;line-height:1.3;
}

.bs-shop__opt input[type="checkbox"]{margin:0;flex:0 0 auto}

/* .brxe-filter-checkbox .brx-option-text{display:flex;gap:4px} */
.bs-shop__opttext{display:flex;gap:4px}

.bs-shop__optcount{color:var(--bs-grey-600)}

/* .brx-option-disabled{opacity:.5;pointer-events:none} */
.bs-shop__opt.is-disabled{opacity:.5;pointer-events:none;cursor:default}

/* ==========================================================================
   5. ACTIVE FILTER CHIPS  (source #brxe-xnnntu .bricks-button r12 / 15px)
      Source hides the list entirely when empty (.brx-no-active-filter) —
      we simply do not print it, so there is no empty flex gap either.
   ========================================================================== */

.bs-shop__active{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;width:100%}

.bs-shop__chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:var(--bs-r-12);
  background:var(--bs-ink);color:#fff;
  font-family:var(--bs-font);font-size:15px;font-weight:500;line-height:1.2;
  transition:var(--bs-ease);
}

.bs-shop__chip:hover{background:var(--bs-yellow);color:var(--bs-ink)}

.bs-shop__chip i{font-size:12px}

/* ==========================================================================
   6. RESET BUTTON  (source #brxe-tsvcld) — measured 252x42, radius 12,
      #000 bg / #fff text, hover #ffcc00 bg / #000 text.
   ========================================================================== */

/* Bricks .bricks-button: padding .5em 1em, letter-spacing .5px, no line-height
   of its own (inherits body 1.7) => 16*1.7 + 16 = 43.2px tall. Source pixel
   measurement of the fully-black rows is 42, i.e. the same box minus the two
   antialiased rounded-corner rows. */
.bs-shop__reset{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:8px 16px;
  border:0;border-radius:var(--bs-r-12);
  background:var(--bs-ink);color:#fff;
  font-family:var(--bs-font);font-size:16px;font-weight:500;line-height:1.7;
  letter-spacing:.5px;text-align:center;transition:var(--bs-ease);
}

.bs-shop__reset:hover{background:var(--bs-yellow);color:var(--bs-ink)}

.bs-shop__reset--inline{width:auto;display:inline-flex;margin-top:16px}

/* No-JS fallback submit. bs-shop.js removes it, so with JS the rail matches
   the source exactly (the source applies filters over AJAX on change). */
.bs-shop__apply{
  width:100%;padding:12px 20px;
  border:1px solid var(--bs-ink);border-radius:var(--bs-r-12);
  background:#fff;color:var(--bs-ink);
  font-family:var(--bs-font);font-size:16px;font-weight:600;line-height:1;
  cursor:pointer;
}

/* ==========================================================================
   7. GRID  (source #brxe-tixllu, verbatim breakpoints)
   ========================================================================== */

.bs-shop__grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--bs-gap);                     /* 10px */
  grid-auto-flow:dense;
  align-items:initial;
  width:100%;
}

@media (max-width:1500px){ .bs-shop__grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:1250px){ .bs-shop__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:850px){  .bs-shop__grid{grid-template-columns:repeat(2,1fr)} }

/* --------------------------------------------------------------------------
   Shop-loop price sizes. NOT a second card — a scoped override of the SHARED
   card, matching the <style> block the source prints inside every loop card:
     del{font-size:15px;color:#787878;font-weight:400}
     ins{font-size:20px;color:#000;font-weight:700}
     :not(:has(ins)){font-size:20px;font-weight:700;color:#000}
     @media(max-width:768px){del 13px; ins/single 18px}
   Pixel-checked against _shots/shop-1440.png (price glyph cap height 15px =>
   20px Barlow; card title cap 11px => 16px).
   -------------------------------------------------------------------------- */
.bs-shop .bs-pcard__price del{font-size:15px;color:var(--bs-grey-600)}
.bs-shop .bs-pcard__price ins,
.bs-shop .bs-pcard__price .bs-amount{font-size:20px;font-weight:700;color:var(--bs-ink)}

@media (max-width:768px){
  .bs-shop .bs-pcard__price del{font-size:13px}
  .bs-shop .bs-pcard__price ins,
  .bs-shop .bs-pcard__price .bs-amount{font-size:18px}
}

/* ==========================================================================
   8. INFINITE SCROLL: spinner + pagination
      Source spinner measured 27x10 visible arc, grey, centred in the grid cell
      following the last card. Pagination markup exists for crawlers / no-JS
      and is hidden once bs-shop.js takes over (the source has none).
   ========================================================================== */

.bs-shop__loader{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:24px 0;
}

.bs-shop__loader[hidden]{display:none}

/* Always in flow — an IntersectionObserver can never fire on display:none. */
.bs-shop__sentinel{width:100%;height:1px}

.bs-shop__spinner{
  display:block;width:27px;height:27px;
  border:5px solid rgba(0,0,0,.10);
  border-top-color:#9a9a9a;
  border-radius:50%;
  animation:bs-shop-spin .8s linear infinite;
}

@keyframes bs-shop-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .bs-shop__spinner{animation-duration:2.4s}
}

.bs-shop__pagination{
  display:flex;flex-wrap:wrap;gap:8px;
  justify-content:center;align-items:center;
  padding:24px 0 8px;
}

.bs-shop__pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;
  border-radius:var(--bs-r-12);background:#fff;color:var(--bs-ink);
  font-family:var(--bs-font);font-size:16px;font-weight:600;
}

.bs-shop__pagination .page-numbers.current,
.bs-shop__pagination .page-numbers:hover{background:var(--bs-ink);color:#fff}

.bs-shop--js .bs-shop__pagination{display:none}

/* ==========================================================================
   9. EMPTY STATE
   ========================================================================== */

.bs-shop__empty{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:40px 0;
  font-family:var(--bs-font);font-size:16px;color:var(--bs-ink);
}