@charset "UTF-8";
/* ==========================================================================
   Blitzschnell Replica — WOO GLUE  (Phase 5)
   assets/css/woo.css

   SCOPING RULE FOR THIS FILE — read before adding anything.
   `assets/css/pages.css` shipped sitewide with UNSCOPED `.bs-hero`,
   `.bs-banner` and `.bs-hero__title` and silently overrode the homepage.
   That is not repeated here. Every selector below starts with one of:
       .bs-minicart      .bs-crosssells    .bs-pcard-li
       .bs-pagewrap      .bs-cartpage*     .bs-qty
       .woocommerce-*    ul.products       body.woocommerce-cart
   There is no bare element selector and no generic utility class in this file.

   ⚠️ AND CHECK THE NAME IS FREE BEFORE YOU INVENT ONE.
   The cart wrapper was first written as `.bs-cart` / `.bs-cart__main` /
   `.bs-cart__side`. `.bs-cart` is ALREADY the header's mini-cart pill in
   `assets/css/home.css:67`, which sets `color:#fff; white-space:nowrap` for the
   black header bar — so the whole cart table inherited white-on-white text and
   the totals table stopped wrapping. Caught on a screenshot, not by reading.
   Renamed to `.bs-cartpage*`. `grep -n "\.bs-<name>" assets/css/*.css` first.

   Every number is measured. Evidence, per block, in the comment above it.
   Sources:
     E:\blitzschnell\scrape\source-cdp\checkout\cart.html   (inline Bricks CSS)
     E:\blitzschnell\scrape\source-cdp\html\cart.html
     E:\blitzschnell\scrape\source-cdp\css\_inline-style-tags.css
     E:\blitzschnell\scrape\source-cdp\design-tokens-measured.json
   ========================================================================== */


/* ==========================================================================
   1. GENERIC PAGE WRAPPER  (page.php)
   ========================================================================== */

.bs-pagewrap{
  width:100%;
  max-width:var(--bs-content);
  margin-inline:auto;
  padding:0 var(--bs-gutter);
}
.bs-pagewrap__head{padding:40px 0 0}
.bs-pagewrap__title{font-size:var(--bs-fs-h2);font-weight:700;line-height:1.1}
.bs-pagewrap__pagination{padding:16px 0}

/* Woo pages carry their own inner headings; give them the section rhythm the
   source cart uses (section padding 40px top / 50px bottom). */
.bs-pagewrap--woo{padding-top:40px;padding-bottom:50px}

@media (max-width:478px){
  .bs-pagewrap{padding-inline:10px}
}


/* ==========================================================================
   2. PRODUCT LOOP  —  `ul.products` + the shared card in an <li>

   `content-product.php` emits `<li class="product bs-pcard-li">` containing
   `template-parts/product-card.php`. The <li> is a pure carrier: it must add
   NOTHING visual, or the card stops being pixel-identical between the homepage
   carousels (which render the card bare) and the shop / cross-sells (which
   render it inside the <li>).
   ========================================================================== */

ul.products{
  list-style:none;
  margin:0;
  padding:0;
}
.bs-pcard-li{
  list-style:none;
  margin:0;
  padding:0;
  min-width:0;      /* so the card can shrink inside a grid track */
}
.bs-pcard-li::before,
.bs-pcard-li::marker{content:none}
.bs-pcard-li > .bs-pcard{height:100%}

/* WooCommerce clears its float-based loop with
     .woocommerce ul.products::before / ::after { content:" "; display:table }
   In a CSS GRID those two pseudo-elements are GRID ITEMS. Measured on the live
   cart: the ::before took row 1 / column 1, pushing the six cross-sell cards
   into columns 2-6 and wrapping the sixth onto a second row, with an empty hole
   top-left. We do not float anything, so the clearfix has nothing to clear. */
ul.products.bs-crosssells__grid::before,
ul.products.bs-crosssells__grid::after,
.related.products > ul.products::before,
.related.products > ul.products::after,
.up-sells.products > ul.products::before,
.up-sells.products > ul.products::after{content:none;display:none}

/* --------------------------------------------------------------------------
   NEUTRALISE WooCommerce's OWN LOOP CSS INSIDE OUR CARD CARRIER.

   MEASURED DEFECT, not a precaution. With `content-product.php` emitting a
   `wc_product_class()` <li>, WooCommerce's default stylesheets win on
   specificity over the card's own `.bs-pcard__*` rules and the card collapses:
   measured live on /warenkorb/ at 1426 — grid tracks were a correct 201px each
   but every card rendered 27x231, because
     woocommerce-layout.css  .woocommerce ul.products.columns-6 li.product{width:13.5%}
     woocommerce.css         .woocommerce ul.products li.product{float:left;margin:0 3.8% 2.992em 0}
   13.5% of the track is 27px. Exactly three of WooCommerce's rules reach our
   markup, and all three are undone here:
     1. li.product      float / width / margin
     2. li.product h3   padding .5em 0 / font-size 1em  -> the card title
     3. li.product a img  margin 0 0 1em                -> the card image
   Nothing else matches: the card's price wrapper is `.bs-pcard__price`, not
   `.price`, and its button carries `add_to_cart_button` but not `button`.

   Selector specificity is deliberately (0,4,2) so it beats WooCommerce's
   (0,3,2) regardless of stylesheet order — do not "simplify" these selectors.
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product.bs-pcard-li,
.woocommerce-page ul.products li.product.bs-pcard-li{
  float:none;
  width:auto;
  min-width:0;
  margin:0;
  padding:0;
  clear:none;
  text-align:left;
}
.woocommerce ul.products li.product.bs-pcard-li h3.bs-pcard__title,
.woocommerce-page ul.products li.product.bs-pcard-li h3.bs-pcard__title{
  padding:10px 0 5px;
  margin:0;
  font-size:var(--bs-fs-card-title);
  font-weight:700;
  line-height:1.2;
  text-align:left;
}
@media (max-width:767px){
  /* keeps home.css's own 14px step alive at the same specificity */
  .woocommerce ul.products li.product.bs-pcard-li h3.bs-pcard__title,
  .woocommerce-page ul.products li.product.bs-pcard-li h3.bs-pcard__title{font-size:14px}
}
.woocommerce ul.products li.product.bs-pcard-li a.bs-pcard__media img,
.woocommerce-page ul.products li.product.bs-pcard-li a.bs-pcard__media img{
  margin:0;
  box-shadow:none;
}

/* WooCommerce's add-to-cart.js appends a "View cart" link after every AJAX
   button. The source has no such link — the drawer opens instead. */
.bs-pcard .added_to_cart,
.bs-pcard-li .added_to_cart{display:none!important}

/* Busy state while the AJAX round trip is in flight. */
.bs-pcard__cart.loading,
.bs-pcard__cart.is-busy{opacity:.45;pointer-events:none}


/* ==========================================================================
   3. CART DRAWER  (.bs-minicart, rendered by header.php on every template)

   Measured from the source's Bricks inline CSS for the mini-cart element
   `#brxe-wellnm` (source-cdp/html/cart.html):
     .cart-detail                       width 600px      (100% at <=478px)
     .bricks-mini-cart-close            top 15 right 20, radius 15px,
                                        padding 10px 20px, font-size 18px
     .widget_shopping_cart_content      padding-right 20px, padding-bottom 90px
                                        (<=478px: padding-left 20px, pb 100px)
     .woocommerce-mini-cart-item a      #000, 19px, 600
     .woocommerce-mini-cart-item .quantity  17px, #9e9e9e
     .woocommerce-mini-cart__buttons .button  #000 bg, #fff, 17px, radius 20px
     .cart-detail.off-canvas            transition all .6s cubic-bezier(0,0,.2,1)
     .off-canvas-overlay                background rgba(0,0,0,0)

   ⚠️ Wave 1 built the drawer at width:min(420px,94vw). The measured source
   value is 600px. Corrected here (Phase 5 owns the drawer) — flagged in the
   phase return so the overseer knows it is a deliberate change, not drift.
   ========================================================================== */

.bs-minicart .bs-minicart__panel{
  width:600px;
  max-width:100vw;
  padding:24px 20px 90px;
  transition:transform .6s cubic-bezier(0,0,.2,1);
}
@media (max-width:478px){
  .bs-minicart .bs-minicart__panel{width:100%;padding:20px 10px 100px 20px}
}

.bs-minicart .bs-minicart__close{
  position:absolute;top:15px;right:20px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 20px;
  border-radius:var(--bs-r-15);
  background:var(--bs-grey-100);
  color:var(--bs-ink);
  font-size:18px;line-height:1;
}
.bs-minicart .bs-minicart__close:hover{background:var(--bs-yellow)}

.bs-minicart .widget_shopping_cart_content{padding-right:20px}
@media (max-width:478px){
  .bs-minicart .widget_shopping_cart_content{padding-right:10px;padding-left:20px}
}

.bs-minicart .woocommerce-mini-cart{list-style:none;margin:24px 0 0;padding:0}
.bs-minicart .woocommerce-mini-cart-item{
  position:relative;
  display:grid;
  grid-template-columns:64px 1fr auto;
  align-items:center;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--bs-grey-100);
}
.bs-minicart .woocommerce-mini-cart-item img{
  grid-row:1 / span 2;grid-column:1;
  width:64px;height:64px;object-fit:cover;
  border-radius:var(--bs-r-6);
}
.bs-minicart .woocommerce-mini-cart-item a:not(.remove){
  grid-column:2;
  color:var(--bs-ink);
  font-size:19px;font-weight:600;line-height:1.25;
}
.bs-minicart .woocommerce-mini-cart-item .quantity{
  grid-column:2;
  font-size:17px;
  color:var(--bs-grey-500);
}
.bs-minicart .woocommerce-mini-cart-item a.remove{
  grid-column:3;grid-row:1 / span 2;
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:50%;
  background:var(--bs-grey-100);
  color:var(--bs-ink);
  font-size:18px;line-height:1;
}
.bs-minicart .woocommerce-mini-cart-item a.remove:hover{background:var(--bs-yellow)}
.bs-minicart .woocommerce-mini-cart-item.is-busy{opacity:.45;pointer-events:none}

.bs-minicart .woocommerce-mini-cart__total{
  display:flex;align-items:center;justify-content:space-between;
  margin:20px 0 0;padding-top:16px;
  border-top:1px solid var(--bs-grey-100);
  font-size:19px;
  color:var(--bs-ink);
}
.bs-minicart .woocommerce-mini-cart__total strong{font-weight:700}

.bs-minicart .woocommerce-mini-cart__buttons{
  display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0;
}
.bs-minicart .woocommerce-mini-cart__buttons .button{
  display:inline-flex;align-items:center;justify-content:center;
  padding:3px 20px;min-height:44px;
  border-radius:var(--bs-r-20);
  background:var(--bs-ink);
  color:#fff;
  font-size:17px;font-weight:600;
  margin:0;
}
.bs-minicart .woocommerce-mini-cart__buttons .button:hover{background:var(--bs-ink-soft)}
.bs-minicart .woocommerce-mini-cart__buttons .checkout{background:var(--bs-yellow);color:var(--bs-ink)}

.bs-minicart .woocommerce-mini-cart__empty-message{
  margin-top:40px;
  font-size:17px;font-weight:500;
}


/* ==========================================================================
   4. CART PAGE
   Heading `Bestellübersicht` is an <h2> at source; the totals box heading
   `Warenkorb-Summe` is WooCommerce's own <h2>. Quantity steppers measured
   from `_wp-custom-css.css`:
     form.woocommerce-cart-form .quantity .minus/.plus
        border-radius 15px; background-color #e6e6e6
     .woocommerce-cart-form tbody td { padding: 5px 0 }
     .woocommerce-cart-form .actions  { padding-top: 20px }
   ========================================================================== */

/* ---- Two-column row (source #brxe-yjwpxm / #brxe-nlptst / #brxe-vexpag) --- */
.bs-cartpage{
  display:flex;
  flex-direction:row;
  gap:20px;
  align-items:stretch;
  padding:0 20px;
}
.bs-cartpage__main{
  width:65%;min-width:65%;flex:1 1 auto;
  background:#fff;
  border-radius:var(--bs-r-20);
  padding:20px 30px 30px;
}
.bs-cartpage__side{
  width:35%;min-width:35%;
  display:flex;flex-direction:column;justify-content:space-between;
  background:#fff;
  border-radius:var(--bs-r-20);
  padding:10px 30px 30px;
}
@media (max-width:850px){
  .bs-cartpage{flex-direction:column;padding:0}
  .bs-cartpage__main,
  .bs-cartpage__side{width:100%;min-width:0}
  .bs-cartpage__main{margin-top:10px}
}

.bs-cartpage__heading{
  font-size:var(--bs-fs-h2);
  font-weight:700;line-height:1.1;
  margin:0 0 10px;
}

/* WooCommerce floats the totals right at 48% inside `.cart-collaterals`;
   the source's right column is already the 35% card, so undo that. */
.woocommerce .bs-cartpage__side .cart-collaterals,
.woocommerce-page .bs-cartpage__side .cart-collaterals{
  width:100%;margin:0;
}
.woocommerce .bs-cartpage__side .cart-collaterals .cart_totals,
.woocommerce-page .bs-cartpage__side .cart-collaterals .cart_totals{
  float:none;width:100%;
}

/* ---- Table chrome: the source cart has NO header row and NO borders -------
   MEASURED (`verify/overseer/cmp/cart2.png`, source left / build right):
   the source row reads `× [img] Adamax (Semax+)  50.00€ 48.00€  − 5 +
   250.00€ 240.00€` under the `Bestellübersicht` card heading and nothing else —
   no `Artikel entfernen / Vorschaubild / Produkt / Preis / Anzahl /
   Zwischensumme` head, no cell rules, no table outline.

   The <thead> is removed from the accessibility tree as well as the page:
   every <td> already carries WooCommerce's `data-title`, which is what the
   responsive layout below <=768px surfaces as the per-cell label, so no
   information is lost. -------------------------------------------------- */
body.woocommerce-cart .woocommerce-cart-form table.shop_table thead{display:none}
body.woocommerce-cart .woocommerce-cart-form table.shop_table,
body.woocommerce-cart .woocommerce-cart-form table.shop_table td,
body.woocommerce-cart .woocommerce-cart-form table.shop_table th,
body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr,
body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody th{
  border:0;
  border-radius:0;
}
body.woocommerce-cart .cart_totals table.shop_table,
body.woocommerce-cart .cart_totals table.shop_table td,
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table tr{
  border:0;
  border-radius:0;
}

/* Struck pre-tier price / subtotal (rendered by bs_woo_tier_strike()).
   Source shows the old figure struck in grey and the tier figure in black. */
body.woocommerce-cart .woocommerce-cart-form .product-price del,
body.woocommerce-cart .woocommerce-cart-form .product-subtotal del{
  color:var(--bs-grey-500);
  font-weight:400;
  text-decoration:line-through;
  margin-right:4px;
}
body.woocommerce-cart .woocommerce-cart-form .product-price ins,
body.woocommerce-cart .woocommerce-cart-form .product-subtotal ins{
  background:none;
  color:var(--bs-ink);
  font-weight:600;
}

body.woocommerce-cart .woocommerce-cart-form tbody td{padding:5px 0}
body.woocommerce-cart .woocommerce-cart-form .actions{padding-top:20px}

/* Column packing. Without explicit widths the table hands the free space to
   `.product-remove`, which pushed the thumbnail ~370px away from the × on a
   1426 viewport. The source keeps × and thumbnail hard against the left edge
   (`verify/overseer/cmp/cart2.png`). */
body.woocommerce-cart .woocommerce-cart-form table.shop_table{width:100%;table-layout:auto}
body.woocommerce-cart .woocommerce-cart-form .product-remove{width:40px}
body.woocommerce-cart .woocommerce-cart-form .product-thumbnail{width:90px;min-width:90px}
/* `width:100%` on ONE cell is the auto-table-layout idiom for "absorb all the
   free space here". Plain `width:40px` on `.product-remove` is only a minimum
   in auto layout — the surplus was still shared out and left the × ~350px from
   the thumbnail. */
body.woocommerce-cart .woocommerce-cart-form .product-name{width:100%;text-align:left}
body.woocommerce-cart .woocommerce-cart-form .product-price,
body.woocommerce-cart .woocommerce-cart-form .product-quantity,
body.woocommerce-cart .woocommerce-cart-form .product-subtotal{white-space:nowrap}
body.woocommerce-cart .woocommerce-cart-form .product-remove a.remove{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;font-size:20px;line-height:1;color:var(--bs-ink);
}
body.woocommerce-cart .woocommerce-cart-form__cart-item .product-thumbnail img{
  /* `max-width:none` overrides the global `img{max-width:100%}` in bs-tokens.css,
     which was collapsing the thumbnail to the auto-sized cell (measured 32px). */
  width:80px;height:80px;max-width:none;object-fit:cover;border-radius:var(--bs-r-6);
}
body.woocommerce-cart .woocommerce-cart-form .product-name a{font-weight:600}

body.woocommerce-cart .coupon{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
body.woocommerce-cart .coupon .input-text{
  padding:12px 20px;
  border:1px solid var(--bs-grey-250);
  border-radius:var(--bs-r-20);
  background:#fff;
  min-width:220px;
}
body.woocommerce-cart .cart_totals{background:none;padding:0}
body.woocommerce-cart .cart_totals h2{font-size:24px;font-weight:700;margin:0 0 12px}
body.woocommerce-cart .cart_totals th{font-weight:600;text-align:left;padding:8px 0}
body.woocommerce-cart .cart_totals td{text-align:right;padding:8px 0}
body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td{font-weight:700}

/* ---- Proceed-to-checkout: an inline BLACK PILL, not a full-width yellow bar
   MEASURED AT SOURCE (`source-cdp/checkout/cart.html`):
     #brxe-ymzigf .wc-proceed-to-checkout .button{
        background-color:#000000; color:#ffffff;
        font-size:18px; font-weight:600; border-radius:20px }
   plus the site-wide `.woocommerce .button{padding:13px 20px}`
   → ~135x48, label "Zur Kasse" + right arrow, left-aligned in the totals box.

   Build before this rule: rgb(255,204,0) on rgb(0,0,0), 411x42, full width,
   label "Weiter zur Kasse". `width:100%` and the yellow token are both gone;
   `.wc-proceed-to-checkout` is no longer a flex stretch container.
   ------------------------------------------------------------------------ */
body.woocommerce-cart .wc-proceed-to-checkout{display:flex;justify-content:flex-start;margin:20px 0 0}
body.woocommerce-cart .wc-proceed-to-checkout .button,
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button{
  display:inline-flex;align-items:center;gap:10px;
  width:auto;
  padding:13px 20px;
  border-radius:var(--bs-r-20);
  background:var(--bs-ink);color:#fff;
  font-size:18px;font-weight:600;line-height:1.2;
}
body.woocommerce-cart .wc-proceed-to-checkout .button:hover{background:var(--bs-ink-soft);color:#fff}
/* one arrow only — ours, not WooCommerce's icon-font ::after */
body.woocommerce-cart .wc-proceed-to-checkout .wc-forward::after{content:none!important;display:none!important}
.bs-checkout-btn__icon{font-size:15px;line-height:1}

/* ---- Coupon / update buttons: black pills, per the source capture --------- */
body.woocommerce-cart .woocommerce-cart-form .actions .button,
body.woocommerce-cart .woocommerce-cart-form .coupon .button{
  padding:13px 20px;
  border-radius:var(--bs-r-20);
  background:var(--bs-ink);color:#fff;
  font-size:16px;font-weight:600;
}
body.woocommerce-cart .woocommerce-cart-form .actions .button:disabled,
body.woocommerce-cart .woocommerce-cart-form .actions .button[disabled]{opacity:.45}
/* Coupon left, "Warenkorb aktualisieren" right, on ONE line — the source's
   `.actions` row. Floats rather than `display:flex` on the <td>: making a
   table-cell a flex container takes it out of the table's column sizing, the
   cell collapses to its content width and the three controls stack. Measured:
   input y396 / apply y438 / update y487 before this rule. */
/* `overflow:hidden` only — do NOT set `display:block` on this <td>. A table
   cell forced to `display:block` leaves the table's column sizing and
   shrink-to-fits, which is what pinned the whole actions row into a ~330px
   column. `display:table-cell` already establishes the block formatting
   context the floats need. */
body.woocommerce-cart .woocommerce-cart-form .actions{overflow:hidden}
body.woocommerce-cart .woocommerce-cart-form .actions .coupon{
  float:left;display:flex;flex-wrap:nowrap;align-items:center;gap:10px;margin:0;
}
body.woocommerce-cart .woocommerce-cart-form .actions .button{white-space:nowrap}
body.woocommerce-cart .woocommerce-cart-form .actions > .button[name="update_cart"]{float:right}
body.woocommerce-cart .woocommerce-cart-form .coupon input{color:var(--bs-ink);font-weight:600}
@media (max-width:478px){
  body.woocommerce-cart .woocommerce-cart-form .actions .coupon,
  body.woocommerce-cart .woocommerce-cart-form .actions > .button[name="update_cart"]{float:none;width:100%}
  body.woocommerce-cart .woocommerce-cart-form .actions .coupon{flex-wrap:wrap;margin-bottom:10px}
}

/* source #brxe-qwwrxc — padding 10px, margin-top 20px, 1px border,
   radius 15px, 16px / 500 */
.bs-cartpage__shipnote{
  margin:20px 0 0;
  padding:10px;
  border:1px solid var(--bs-grey-250);
  border-radius:var(--bs-r-15);
  font-size:16px;
  font-weight:500;
  color:var(--bs-ink);
}

/* ---- Quantity steppers (injected by bs-woo.js) --------------------------- */
.bs-qty{position:relative;display:inline-flex;align-items:center;gap:6px}
.bs-qty input.qty{
  width:64px;text-align:center;
  padding:10px 6px;
  border:1px solid var(--bs-grey-250);
  border-radius:var(--bs-r-10);
  background:#fff;
  -moz-appearance:textfield;
}
.bs-qty input.qty::-webkit-outer-spin-button,
.bs-qty input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bs-qty .action{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  border-radius:var(--bs-r-15);
  background:var(--bs-grey-100);
  color:var(--bs-ink);
  cursor:pointer;
  order:-1;
}
.bs-qty .action.plus{order:1;border:1px solid var(--bs-grey-250)}
.bs-qty .action:hover{background:var(--bs-yellow)}
.bs-qty .action svg{width:16px;height:16px}


/* ==========================================================================
   5. CROSS-SELLS  —  "Passend dazu"

   Measured from source-cdp/checkout/cart.html:
     section #brxe-xcvlhn  padding 40px 20px 50px 20px   (<=478px: sides 0)
     inner   #brxe-iircwm  padding-top 20px, sides 20px  (<=478px: 10px)
     grid    #brxe-jfpswu  repeat(6,1fr) gap 20px
                           <=1250px repeat(3,1fr)
                           <=850px  repeat(3,1fr)
                           <=478px  repeat(2,1fr) gap 10px
     heading #brxe-cqydbf  h3.archiv-heading — 36px / 700 / line-height 1.1
   ========================================================================== */

.bs-crosssells{
  width:100%;
  max-width:var(--bs-content);
  margin-inline:auto;
  padding:40px 20px 50px;
}
/* Page-CENTRED, not left-aligned.
   MEASURED: source heading box x 613–827, centre 720 on a 1426 viewport
   (`verify/overseer/cmp/src-passend.png`). The build had `text-align:start`
   with the box starting at x=40. Matches the product phase's
   `.bs-pdp__related-title`, which the audit measured as correct. */
.bs-crosssells__title{
  font-size:var(--bs-fs-section);
  font-weight:700;
  line-height:1.1;
  margin:0 auto;
  width:fit-content;   /* shrink-wrapped + centred, matching the source box */
  max-width:100%;
  text-align:center;
}
.bs-crosssells__inner{padding:20px 20px 0}
.bs-crosssells__grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:20px;
  grid-auto-flow:dense;
  list-style:none;margin:0;padding:0;
}
@media (max-width:1250px){
  .bs-crosssells__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:850px){
  .bs-crosssells__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:478px){
  .bs-crosssells{padding-inline:0}
  .bs-crosssells__inner{padding-inline:10px}
  .bs-crosssells__grid{grid-template-columns:repeat(2,1fr);gap:10px}
}


/* ==========================================================================
   6. RELATED / UPSELLS  (PDP) — same block shape, same card.
      The PDP template itself belongs to the product phase; these rules only
      make sure the shared card lands in the same 6-up grid it uses on the cart.
   ========================================================================== */

.related.products > ul.products,
.up-sells.products > ul.products{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:20px;
  list-style:none;margin:0;padding:0;
}
@media (max-width:1250px){
  .related.products > ul.products,
  .up-sells.products > ul.products{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:478px){
  .related.products > ul.products,
  .up-sells.products > ul.products{grid-template-columns:repeat(2,1fr);gap:10px}
}


/* ==========================================================================
   7. CHECKOUT  (/kasse/)

   Scope handed to Phase 5 after the Wave 2 audit: the page had NO CSS owner.
   `mu-plugins/bs-manual-gateways.php` emits `.bs-checkout-guide` (:783) and
   `.bs-checkout-coupon-note` (:833) and nothing ever styled them, so /kasse/
   rendered as stock WooCommerce — `#place_order` on Woo's default purple
   rgb(127,84,179) at radius 3px, and `.woocommerce-billing-fields` /
   `#order_review` both transparent with zero radius and zero padding.

   ⚠️ THAT MU-PLUGIN IS NOT EDITED. Only its markup is styled from here, and
   the field order is changed through `woocommerce_checkout_fields` in
   inc/woo.php.

   Every number below is from `source-cdp/checkout/checkout.html` (inline Bricks
   CSS) with the Bricks colour vars resolved from `css/_inline-style-tags.css`:
     --bricks-color-vewuoc #f2f2f2   --bricks-color-iunwkl #f1f1f1
     --bricks-color-tkoqvx #999999   --bricks-color-2d1664 #ffffff
     --bricks-color-tdtiuh #e0e0e0
   Breakpoints are the source's own: 850px and 478px.
   ========================================================================== */

/* ---- Two columns: #brxe-oagjbr row, gap 20px, both halves 50% ------------- */
body.woocommerce-checkout form.checkout.woocommerce-checkout{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:20px;
}
/* Anything that is not one of the two panels (notice groups, hidden inputs)
   spans the full row and keeps its DOM position — flex, not grid, precisely so
   that source order is preserved and nothing can overlap. */
body.woocommerce-checkout form.checkout.woocommerce-checkout > *{flex:1 1 100%;min-width:0}
body.woocommerce-checkout form.checkout.woocommerce-checkout > #customer_details,
body.woocommerce-checkout form.checkout.woocommerce-checkout > .bs-checkoutpage__side{
  flex:0 0 calc(50% - 10px);
  min-width:0;
}

/* ---- LEFT card: #brxe-icythv --------------------------------------------- */
body.woocommerce-checkout #customer_details{
  border:1px solid #999;
  border-radius:var(--bs-r-20);
  padding:20px 30px 30px;
  background:var(--bs-surface-alt);
}
/* WooCommerce floats .col-1/.col-2 side by side; the source stacks billing,
   then the ship-to-different-address block, then the order notes. */
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2{float:none;width:100%;margin:0}
body.woocommerce-checkout #customer_details .woocommerce-billing-fields h3,
body.woocommerce-checkout #customer_details .woocommerce-shipping-fields h3,
body.woocommerce-checkout #customer_details .woocommerce-additional-fields h3{
  font-size:var(--bs-fs-h2);
  font-weight:700;
  line-height:1.1;
  margin:0 0 10px;
  padding:0;
}
body.woocommerce-checkout #customer_details .woocommerce-shipping-fields h3,
body.woocommerce-checkout #customer_details .woocommerce-additional-fields h3{
  font-size:20px;
  margin-top:20px;
}

/* ---- RIGHT column: #brxe-vjomrr ------------------------------------------ */
.bs-checkoutpage__side{display:block}

/* Guide banner: #brxe-clxxta / #brxe-ysxugc / #brxe-jdjdlg.
   The background-image is injected inline by bs_woo_checkout_guide_style()
   because the filename is filterable; this is the flat fallback so the panel is
   never a washed-out multiply over nothing. */
.bs-checkoutpage__side .bs-checkout-guide{
  margin-bottom:20px;
  padding:20px 30px;
  border-radius:var(--bs-r-20);
  background:#1a1a1a;
  background-size:cover;
  background-position:center center;
  color:#fff;
}
.bs-checkoutpage__side .bs-checkout-guide__text{
  margin:0;
  color:#fff;
  font-size:24px;
  font-weight:700;
  line-height:1.2;
}
.bs-checkoutpage__side .bs-checkout-guide__cta{margin:10px 0 0}
/* Source `#brxe-jdjdlg` declares `flex-direction:row-reverse`, but its markup is
   `<span class="icon">…</span><span class="text">…</span>` — icon FIRST in the
   DOM — so the rendered result is text then arrow. The mu-plugin's markup here
   is text-only with the arrow as a `::after`, i.e. already in that order, so
   copying `row-reverse` literally would flip it to `→ Zur Anleitung`.
   Same painted result, different starting DOM. */
.bs-checkoutpage__side .bs-checkout-guide__cta .button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0;
  background:none;
  color:#fff;
  font-size:16px;
  font-weight:700;
}
.bs-checkoutpage__side .bs-checkout-guide__cta .button::after{
  content:"\2192";
  font-size:16px;
  line-height:1;
}
@media (max-width:478px){
  .bs-checkoutpage__side .bs-checkout-guide__text{font-size:18px}
}

/* Review card: #brxe-yhajnk */
.bs-checkoutcard{
  margin-bottom:20px;
  padding:20px 30px;
  background:#fff;
  border-radius:var(--bs-r-20);
}
body.woocommerce-checkout .bs-checkoutcard #order_review_heading{
  font-size:var(--bs-fs-h2);
  font-weight:700;
  line-height:1.1;
  margin:0 0 10px;
  padding:0;
}

/* Coupon note: #brxe-zvookx — 1px #e0e0e0, padding 20px, margin 10px 0 20px */
.bs-checkoutcard .bs-checkout-coupon-note{
  margin:10px 0 20px;
  padding:20px;
  border:1px solid var(--bs-grey-250);
  border-radius:var(--bs-r-15);
}
.bs-checkoutcard .bs-checkout-coupon-note p{margin:0}
.bs-checkoutcard .bs-checkout-coupon-note p + p{margin-top:6px}
.bs-checkoutcard .bs-checkout-coupon-note .button{
  display:inline-flex;align-items:center;gap:8px;
  padding:0;background:none;color:var(--bs-ink);
  font-size:16px;font-weight:600;
}
.bs-checkoutcard .bs-checkout-coupon-note .button::after{content:"\2192";line-height:1}

/* Order review table — same de-chroming as the cart, plus the source's
   struck line-item price (`250,00 € 240,00 €` in the 1440 capture). */
body.woocommerce-checkout #order_review table.shop_table{width:100%;border:0;border-collapse:collapse}
body.woocommerce-checkout #order_review table.shop_table th,
body.woocommerce-checkout #order_review table.shop_table td{
  border:0;
  border-bottom:1px solid var(--bs-grey-100);
  padding:12px 0;
  text-align:left;
}
body.woocommerce-checkout #order_review table.shop_table tfoot tr:last-child th,
body.woocommerce-checkout #order_review table.shop_table tfoot tr:last-child td{border-bottom:0}
body.woocommerce-checkout #order_review table.shop_table td{text-align:right}
body.woocommerce-checkout #order_review table.shop_table thead th{font-weight:600}
body.woocommerce-checkout #order_review .order-total th,
body.woocommerce-checkout #order_review .order-total td{font-weight:700}
body.woocommerce-checkout #order_review del{color:var(--bs-grey-500);font-weight:400;margin-right:4px}
body.woocommerce-checkout #order_review ins{background:none;color:var(--bs-ink);font-weight:600}

/* Payment box */
body.woocommerce-checkout #payment{
  margin-top:20px;
  background:none;
  border-radius:0;
}
body.woocommerce-checkout #payment ul.payment_methods{
  margin:0;padding:20px;
  list-style:none;
  border:1px solid var(--bs-grey-250);
  border-radius:var(--bs-r-15);
  background:#fff;
}
body.woocommerce-checkout #payment ul.payment_methods li{margin:0 0 10px;padding:0}
body.woocommerce-checkout #payment ul.payment_methods li:last-child{margin-bottom:0}
body.woocommerce-checkout #payment ul.payment_methods label{font-weight:600;font-size:17px}
/* Gateway badge. The source renders the crypto gateway's icon as a small badge
   in the top-right of the row (`_shots/checkout-1440-full.png`, a ~34x20 mark).
   Uncapped, the installed gateway's own logo renders at its native size and
   pushes the payment box to several hundred px tall. */
body.woocommerce-checkout #payment ul.payment_methods li img{
  display:inline-block;
  float:right;
  width:auto;
  max-width:60px;
  max-height:24px;
  margin:0 0 0 8px;
  border-radius:3px;
}
body.woocommerce-checkout #payment .payment_box{
  margin:8px 0 0;padding:12px 14px;
  background:var(--bs-surface-alt);
  border-radius:var(--bs-r-10);
  font-size:15px;
}
body.woocommerce-checkout #payment .payment_box::before{display:none}
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
body.woocommerce-checkout #payment .wc-terms-and-conditions{font-size:15px}

/* ---- #place_order --------------------------------------------------------
   BEFORE (measured by the audit): background-color rgb(127,84,179) — Woo's
   default purple — border-radius 3px, 210x36.
   The source never exposes Woo's own place-order button: its crypto plugin
   swaps in a full-width BLACK bar (`Proceed to Bitcart` in
   _shots/checkout-1440-full.png). What IS measured site-wide is the button
   token from `css/_inline-style-tags.css`:
     .woocommerce .button{ padding:13px 20px; background:#000; color:#fff;
                           font-size:16px }
   plus `.woocommerce-checkout .place-order .button{ margin-top:40px }`.
   Reproduced here, full width like the visible source button. The 20px radius
   is the site's own button token — flagged in the phase return, because the
   one full-width button the source actually renders is square-cornered plugin
   chrome we do not ship. ------------------------------------------------ */
body.woocommerce-checkout #payment .place-order{margin-top:40px;padding:0}
body.woocommerce-checkout #payment #place_order,
body.woocommerce-checkout #payment .place-order .button{
  display:flex;align-items:center;justify-content:center;
  width:100%;
  padding:13px 20px;
  border:0;
  border-radius:var(--bs-r-20);
  background:var(--bs-ink);
  color:#fff;
  font-size:16px;font-weight:600;
  cursor:pointer;
}
body.woocommerce-checkout #payment #place_order:hover{background:var(--bs-ink-soft)}

/* ---- Fields -------------------------------------------------------------- */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper{display:block}
body.woocommerce-checkout .form-row{margin:0 0 14px;padding:0}
body.woocommerce-checkout .form-row label{
  display:block;margin:0 0 6px;
  font-size:16px;font-weight:600;
}
/* Source marks required labels in the Bricks secondary tone. */
body.woocommerce-checkout .form-row.validate-required > label{color:var(--bs-secondary)}
body.woocommerce-checkout .form-row.validate-required > label .required{border:0;text-decoration:none}
body.woocommerce-checkout .form-row .input-text,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .select2-container .select2-selection--single{
  width:100%;
  min-height:48px;
  padding:12px 20px;
  border:1px solid var(--bs-grey-250);
  border-radius:var(--bs-r-20);
  background:#fff;
  font-family:var(--bs-font);
  font-size:16px;
  color:var(--bs-ink);
}
body.woocommerce-checkout .form-row textarea.input-text{min-height:96px;border-radius:var(--bs-r-15)}
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered{
  line-height:24px;padding:0;color:var(--bs-ink);
}
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow{height:46px}
/* first/last name sit side by side at source */
body.woocommerce-checkout .form-row-first,
body.woocommerce-checkout .form-row-last{width:calc(50% - 7px);display:inline-block;vertical-align:top}
body.woocommerce-checkout .form-row-first{margin-right:14px}
@media (max-width:478px){
  body.woocommerce-checkout .form-row-first,
  body.woocommerce-checkout .form-row-last{width:100%;margin-right:0}
}

/* ---- Responsive: source stacks both columns at <=850px ------------------- */
@media (max-width:850px){
  body.woocommerce-checkout form.checkout.woocommerce-checkout > #customer_details,
  body.woocommerce-checkout form.checkout.woocommerce-checkout > .bs-checkoutpage__side{
    flex:1 1 100%;
  }
  body.woocommerce-checkout #customer_details{padding:10px 10px 20px}
}
@media (max-width:478px){
  body.woocommerce-checkout #customer_details{padding-top:20px}
  .bs-checkoutcard{padding-inline:10px}
  .bs-checkoutpage__side .bs-checkout-guide{padding-inline:20px}
}


/* ==========================================================================
   8. WooCommerce notices — German-locale defaults, source palette
   ========================================================================== */

.bs-pagewrap .woocommerce-message,
.bs-pagewrap .woocommerce-info,
.bs-pagewrap .woocommerce-error{
  list-style:none;
  margin:0 0 20px;
  padding:14px 20px;
  border-radius:var(--bs-r-20);
  background:#fff;
  border-left:4px solid var(--bs-yellow);
  font-size:16px;
}
.bs-pagewrap .woocommerce-error{border-left-color:var(--bs-error)}
.bs-pagewrap .woocommerce-message .button,
.bs-pagewrap .woocommerce-info .button{
  float:right;
  padding:6px 16px;
  border-radius:var(--bs-r-15);
  background:var(--bs-ink);color:#fff;
  font-size:14px;font-weight:600;
}