/* ═══════════════════════════════════════════
   Mahlwerk Mobile-First Overhaul
   85% of users come on mobile — this matters most.
   ═══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   GLOBAL MOBILE FIXES
   ══════════════════════════════════════════ */

/* Prevent horizontal overflow on any page */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
  }
  .bw-container {
    padding-inline: 16px !important;
  }

  /* ── Page titles ── */
  .bw-page-title,
  .entry-title,
  .woocommerce-products-header h1 {
    font-size: 1.6rem !important;
    margin-bottom: 20px !important;
  }

  /* ── Breadcrumb ── */
  .woocommerce-breadcrumb,
  .bw-breadcrumbs {
    font-size: 11px !important;
    margin-bottom: 12px !important;
  }

  /* ══════════════════════════════════════════
     HEADER MOBILE
     ══════════════════════════════════════════ */

  .bw-header .bw-container {
    padding-inline: 12px !important;
  }
  .bw-logo {
    font-size: 1.1rem !important;
  }
  .bw-nav__link {
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
  }

  /* ── Announcement bar tighter ── */
  .bw-announce {
    font-size: 11px !important;
    padding: 6px 12px !important;
    height: 28px !important;
  }
  .bw-header {
    top: 28px !important;
  }
  body.admin-bar .bw-header {
    top: 74px !important;
  }
  body.admin-bar .bw-announce {
    top: 46px !important;
  }
  body.announce-collapsed .bw-header {
    top: 0 !important;
  }
  body.admin-bar.announce-collapsed .bw-header {
    top: 46px !important;
  }

  /* ══════════════════════════════════════════
     HOMEPAGE MOBILE
     ══════════════════════════════════════════ */

  .bw-hero {
    min-height: 80vh !important;
  }
  .bw-hero__title::after {
    font-size: 1.8rem !important;
  }
  .bw-hero__actions {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .bw-hero__actions .bw-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Trust bar horizontal scroll on mobile */
  .bw-trust-bar__inner {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 20px !important;
    padding: 0 16px !important;
    flex-wrap: nowrap !important;
  }
  .bw-trust-bar__inner::-webkit-scrollbar { display: none !important; }
  .bw-trust-bar__item {
    flex-shrink: 0 !important;
    font-size: 12px !important;
  }

  /* Topseller: 2-column on mobile */
  .bw-topseller__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* ══════════════════════════════════════════
     SHOP PAGE MOBILE
     ══════════════════════════════════════════ */

  /* 2-column product grid */
  ul.products {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  ul.products li.product {
    margin-bottom: 0 !important;
  }

  /* Product cards tighter */
  .products .product .woocommerce-loop-product__title {
    font-size: 12px !important;
    line-height: 1.35 !important;
    padding: 8px 10px 4px !important;
  }
  .products .product .price {
    font-size: 14px !important;
    padding: 0 10px 8px !important;
  }
  .products .product .bw-product-brand {
    font-size: 10px !important;
    padding: 8px 10px 0 !important;
  }
  .products .product .button {
    font-size: 11px !important;
    padding: 8px 12px !important;
    margin: 0 10px 10px !important;
  }

  /* ══════════════════════════════════════════
     PDP MOBILE
     ══════════════════════════════════════════ */

  /* Product gallery full width */
  .bw-sp-gallery,
  .woocommerce-product-gallery {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Product title */
  .bw-sp-title h1,
  .product_title {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
  }

  /* Price prominent */
  .bw-sp-price-wrap .woocommerce-Price-amount {
    font-size: 1.6rem !important;
  }

  /* Trust USPs: stack vertically */
  .bw-sp-usp {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Tabs: scrollable */
  .wc-tabs,
  .woocommerce-tabs ul.tabs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }
  .wc-tabs::-webkit-scrollbar,
  .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none !important; }
  .wc-tabs li,
  .woocommerce-tabs ul.tabs li {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* Description + reviews: full width */
  .woocommerce-tabs,
  .wc-tabs-wrapper {
    padding-inline: 16px !important;
    max-width: 100% !important;
  }
  .woocommerce-tabs .panel,
  .woocommerce-Tabs-panel {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* ══════════════════════════════════════════
     CART MOBILE
     ══════════════════════════════════════════ */

  .woocommerce-cart .woocommerce {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .woocommerce-cart table.shop_table {
    display: block !important;
  }
  .woocommerce-cart table.shop_table tbody {
    display: block !important;
  }
  .woocommerce-cart table.shop_table tr.cart_item {
    display: grid !important;
    grid-template-columns: 60px 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 0 10px !important;
    padding: 14px !important;
    align-items: center !important;
  }
  .woocommerce-cart td.product-remove {
    grid-column: 3 !important;
    grid-row: 1 !important;
    padding: 0 !important;
  }
  .woocommerce-cart td.product-thumbnail {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    padding: 0 !important;
    width: 60px !important;
  }
  .woocommerce-cart td.product-thumbnail img {
    width: 60px !important;
    height: 60px !important;
  }
  .woocommerce-cart td.product-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0 !important;
    font-size: 13px !important;
    max-width: none !important;
  }
  .woocommerce-cart td.product-price {
    display: none !important;  /* Show subtotal instead */
  }
  .woocommerce-cart td.product-quantity {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 4px 0 0 !important;
  }
  .woocommerce-cart td.product-subtotal {
    grid-column: 3 !important;
    grid-row: 2 !important;
    padding: 4px 0 0 !important;
    text-align: right !important;
    font-size: 14px !important;
  }

  /* Cart totals full width */
  .woocommerce-cart .cart_totals {
    position: static !important;
    padding: 20px !important;
  }

  /* ══════════════════════════════════════════
     CHECKOUT MOBILE
     ══════════════════════════════════════════ */

  body.woocommerce-checkout form.checkout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 0 16px !important;
  }
  body.woocommerce-checkout #order_review {
    position: static !important;
    max-width: none !important;
  }

  /* Order summary collapsible on mobile */
  body.woocommerce-checkout .woocommerce-checkout-review-order {
    border-radius: var(--bw-r-md) !important;
  }

  /* Payment cards tighter on mobile */
  body.woocommerce-checkout #payment ul.payment_methods > li > label {
    padding: 14px 16px !important;
    font-size: 14px !important;
  }
  body.woocommerce-checkout .payment_box {
    padding: 0 16px 12px 44px !important;
    font-size: 12px !important;
  }

  /* Submit button: full width, fixed bottom (sticky) */
  body.woocommerce-checkout #place_order {
    font-size: 15px !important;
    min-height: 52px !important;
    border-radius: var(--bw-r-sm) !important;
  }

  /* Form fields tighter */
  body.woocommerce-checkout .form-row {
    margin-bottom: 12px !important;
  }
  body.woocommerce-checkout .form-row input[type="text"],
  body.woocommerce-checkout .form-row input[type="email"],
  body.woocommerce-checkout .form-row input[type="tel"],
  body.woocommerce-checkout .form-row select {
    padding: 12px 14px !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }
  body.woocommerce-checkout .form-row label {
    font-size: 12px !important;
  }

  /* ══════════════════════════════════════════
     VERKOSTUNG MOBILE
     ══════════════════════════════════════════ */

  .vk-hero {
    min-height: 70vh !important;
    padding-top: 80px !important;
  }
  .vk-hero__title {
    font-size: 2.4rem !important;
  }
  .vk-hero__sub {
    font-size: 1rem !important;
  }
  .vk-hero__actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .vk-intro {
    padding: 60px 0 40px !important;
  }
  .vk-intro__text {
    font-size: 1.05rem !important;
  }
  .vk-steps,
  .vk-features,
  .vk-events,
  .vk-faq,
  .vk-booking {
    padding: 48px 0 !important;
  }
  .vk-steps__grid,
  .vk-features__grid,
  .vk-events__grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .vk-form__row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .vk-form {
    padding: 20px !important;
  }
  .vk-location__grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .vk-closing {
    padding: 60px 0 !important;
  }
  .vk-closing__title {
    font-size: 1.8rem !important;
  }

  /* ══════════════════════════════════════════
     ÜBER UNS / STATIC PAGES MOBILE
     ══════════════════════════════════════════ */

  .bw-page-content {
    padding-inline: 16px !important;
  }
  .bw-page-content h2 {
    font-size: 1.4rem !important;
    margin-top: 32px !important;
  }
  .bw-page-content h3 {
    font-size: 1.15rem !important;
  }

  /* Feature cards stack */
  .bw-about-features,
  .bw-page-content .bw-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ══════════════════════════════════════════
     FOOTER MOBILE
     ══════════════════════════════════════════ */

  .bw-footer .bw-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .bw-footer-bottom-inner {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }

  /* ══════════════════════════════════════════
     TOUCH TARGETS (WCAG: min 44px)
     ══════════════════════════════════════════ */

  a, button, input[type="submit"], select,
  .bw-btn, .button, .nav-link {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Exception: inline text links */
  p a, li a, td a, .breadcrumb a, .woocommerce-breadcrumb a {
    min-height: auto !important;
    min-width: auto !important;
  }
}

/* ══════════════════════════════════════════
   TABLET (768px–1024px)
   ══════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  ul.products {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 16px !important;
  }
  body.woocommerce-checkout form.checkout {
    grid-template-columns: 1fr 340px !important;
    gap: 32px !important;
  }
  .vk-steps__grid,
  .vk-features__grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .vk-events__grid {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════
   Mahlwerk-Manufaktur — Mobile Bugfixes (KOMPLETTE NEUFASSUNG)
   ───────────────────────────────────────────────────────────────────────
   Erstellt: 2026-04-19
   Ziel:     Ersetzt die Sektion "BUG FIXES 2026-04-19" in
             bruehwerk-child/assets/css/mobile.css (Zeilen 455–723)
   Strategy: Maximale Specificity-Eskalation + !important + späte
             Source-Order, sodass weder Parent-Hotfix-Layer noch
             Plugin-CSS noch WPCode-Snippets diese Regeln überschreiben.

   Adressiert 5 Bugs:
   1. Produktgrid 3-spaltig auf Mobile → Buttons clipped
   2. Headlines laufen rechts aus dem Viewport
   3. Warenkorb-Summary überlagert Produktliste (Geister-Container)
   4. Topseller-Row scrollt horizontal ohne Indikator
   5. Sticky Verkostungs-Banner überdeckt Content
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   SECTION 1 · Globale Mobile-Foundation
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  html body .bw-container {
    padding-inline: 16px !important;
    max-width: 100% !important;
  }

  /* Defensive: keine Bilder/Videos sprengen den Viewport */
  html body img,
  html body video,
  html body iframe,
  html body embed {
    max-width: 100% !important;
    height: auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION 2 · Bug 2 — Headlines wrappen sauber, kein Clipping
   "Kaffeevollautomaten" ist ein einzelnes Wort von ~16 Zeichen — auf
   375 px Viewport mit 32 px padding = 343 px content. Bei font-size 32 px
   würde das Wort ~330 px breit sein → Edge-Case. Wir kürzen mit clamp()
   und erlauben hyphens als Sicherheitsnetz.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  html body .bw-hero-title,
  html body .bw-hero__title,
  html body .bw-shop-hero__title,
  html body .bw-page-title,
  html body h1.entry-title,
  html body .woocommerce-products-header h1,
  html body .bw-section-header h2,
  html body .bw-section-header__title,
  html body .bw-products-header h1,
  html body section h1,
  html body section h2 {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    max-width: 100% !important;
    line-height: 1.18 !important;
  }

  /* Spezifische font-size-Caps via clamp() — robust gegen lange Wörter */
  html body .bw-hero-title,
  html body .bw-hero__title {
    font-size: clamp(1.6rem, 7.5vw, 2.2rem) !important;
  }
  html body .bw-shop-hero__title,
  html body .bw-page-title,
  html body h1.entry-title {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }
  html body .bw-section-header h2,
  html body .bw-section-header__title {
    font-size: clamp(1.4rem, 6vw, 1.8rem) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION 3 · Bug 1 — Shop-Grid + Produkt-Card-Buttons
   User-Spec: 1 Spalte ≤480 px, 2 Spalten 481–767 px.
   Selektor-Eskalation html body.<class> ul.products = (0, 3, 1) +
   !important schlägt jede Parent-Regel.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 Spalte ≤ 480 px */
@media (max-width: 480px) {
  html body.woocommerce ul.products,
  html body.woocommerce-page ul.products,
  html body.woocommerce-shop ul.products,
  html body.archive ul.products,
  html body.bw-products-grid ul.products,
  html body .bw-products-grid ul.products {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
}

/* 2 Spalten 481 – 767 px */
@media (min-width: 481px) and (max-width: 767px) {
  html body.woocommerce ul.products,
  html body.woocommerce-page ul.products,
  html body.woocommerce-shop ul.products,
  html body.archive ul.products,
  html body.bw-products-grid ul.products,
  html body .bw-products-grid ul.products {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
}

/* Produkt-Card Reset auf Mobile */
@media (max-width: 767px) {
  html body .woocommerce ul.products li.product,
  html body .woocommerce-page ul.products li.product,
  html body ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background-color: var(--bw-bg-card, #1A1A1A) !important;
    border: 1px solid rgba(184, 115, 51, 0.15) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Produkt-Bild — weißer Bereich, aspect-ratio bewahren */
  html body .woocommerce ul.products li.product a img,
  html body ul.products li.product .woocommerce-LoopProduct-link img,
  html body ul.products li.product img.attachment-woocommerce_thumbnail {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    background: #f4f4f4 !important;
    padding: 12px !important;
    margin: 0 !important;
    display: block !important;
  }

  /* Brand / Kategorie über dem Title */
  html body .woocommerce ul.products li.product .bw-product-category,
  html body ul.products li.product .bw-product-brand {
    display: block !important;
    padding: 12px 14px 0 !important;
    margin: 0 !important;
    font-size: 10px !important;
    font-family: 'DM Sans', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--bw-copper, #B87333) !important;
    font-weight: 700 !important;
  }

  /* Title — 2-line clamp, sicheres wrapping */
  html body .woocommerce ul.products li.product .woocommerce-loop-product__title,
  html body ul.products li.product h2.woocommerce-loop-product__title,
  html body ul.products li.product h3 {
    color: var(--bw-text, #E8E0D8) !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    padding: 4px 14px 0 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    overflow-wrap: break-word !important;
    text-overflow: ellipsis !important;
  }

  /* Star-Rating */
  html body .woocommerce ul.products li.product .star-rating {
    margin: 6px 14px !important;
    font-size: 12px !important;
    color: var(--bw-copper, #B87333) !important;
  }

  /* Preis — copper, deutlich */
  html body .woocommerce ul.products li.product .price,
  html body ul.products li.product .price,
  html body ul.products li.product span.price {
    color: var(--bw-copper-lt, #D4956B) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    padding: 4px 14px 0 !important;
    margin: 0 !important;
  }

  /* ═════════════════════════════════════════════════════════════════════
     KRITISCH: Button "IN DEN WARENKORB" — full-width, niemals clipped
     Selektor (0, 4, 4) + !important + max possible specificity-paths
     ═════════════════════════════════════════════════════════════════════ */
  html body .woocommerce ul.products li.product .button,
  html body .woocommerce ul.products li.product a.button,
  html body .woocommerce ul.products li.product .add_to_cart_button,
  html body .woocommerce ul.products li.product .ajax_add_to_cart,
  html body ul.products li.product .button,
  html body ul.products li.product .add_to_cart_button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: calc(100% - 28px) !important;
    background-color: var(--bw-copper, #B87333) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 13px 12px !important;
    margin: 12px 14px 14px !important;
    min-height: 44px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION 4 · Bug 4 — Topseller-Carousel mit visible Scroll-Indikator
   Card-Width 78vw → nächste Karte angeschnitten = Swipe-Hinweis.
   Custom thin copper scrollbar zeigt Scroll-Position.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  html body .bw-topseller__grid,
  html body .bw-featured-products .bw-products-grid,
  html body .bw-featured-products .bw-homepage-products,
  html body .bw-topseller-section .bw-ts-grid,
  html body .bw-topseller-section .bw-topseller__grid,
  html body section.bw-topseller-section > .bw-container > div[style*="grid"] {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 14px !important;
    padding: 4px 16px 24px !important;
    margin: 0 !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(184, 115, 51, 0.6) transparent;
  }

  html body .bw-topseller__grid::-webkit-scrollbar,
  html body .bw-featured-products .bw-products-grid::-webkit-scrollbar,
  html body .bw-topseller-section .bw-ts-grid::-webkit-scrollbar {
    height: 4px;
  }
  html body .bw-topseller__grid::-webkit-scrollbar-track,
  html body .bw-featured-products .bw-products-grid::-webkit-scrollbar-track,
  html body .bw-topseller-section .bw-ts-grid::-webkit-scrollbar-track {
    background: transparent;
  }
  html body .bw-topseller__grid::-webkit-scrollbar-thumb,
  html body .bw-featured-products .bw-products-grid::-webkit-scrollbar-thumb,
  html body .bw-topseller-section .bw-ts-grid::-webkit-scrollbar-thumb {
    background: rgba(184, 115, 51, 0.6);
    border-radius: 2px;
  }

  /* Cards: fix-width, snap-align, nicht mehr Grid-Children */
  html body .bw-topseller__grid > *,
  html body .bw-featured-products .bw-products-grid > *,
  html body .bw-topseller-section .bw-ts-card,
  html body .bw-topseller-section .bw-ts-grid > * {
    flex: 0 0 78vw !important;
    max-width: 280px !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION 5 · Bug 3 — Warenkorb Layout (3-Col Grid mit grid-template-areas)
   Specificity-Eskalation auf (0, 4, 6) gegen Parent-HOTFIX-Layer.
   Cart-Form OBEN, Cart-Summary DARUNTER (flex-column, source-order).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Outer container: zwingen auf flex-column, Grid aushebeln */
  html body.woocommerce-cart div.woocommerce,
  html body.woocommerce-cart .woocommerce {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    padding: 0 16px 2rem !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  html body.woocommerce-cart div.woocommerce > .woocommerce-cart-form,
  html body.woocommerce-cart div.woocommerce > .cart-collaterals,
  html body.woocommerce-cart .woocommerce-cart-form,
  html body.woocommerce-cart .cart-collaterals {
    grid-column: auto !important;
    grid-row: auto !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    top: auto !important;
    float: none !important;
  }

  html body.woocommerce-cart .cart-collaterals .cart_totals {
    position: static !important;
    width: 100% !important;
    float: none !important;
  }

  /* Cart-Tabelle: Block-Layout, kein table */
  html body.woocommerce-cart table.shop_table.cart,
  html body.woocommerce-cart table.shop_table.cart tbody,
  html body.woocommerce-cart table.shop_table.cart thead {
    display: block !important;
    width: 100% !important;
  }
  html body.woocommerce-cart table.shop_table.cart thead {
    display: none !important;        /* keine Tabellen-Header auf Mobile */
  }

  /* ═══ Cart-Item Row: 3-Col Grid mit benannten Areas ═══ */
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item,
  html body.woocommerce-cart table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "thumb name  remove"
      "thumb qty   price" !important;
    gap: 6px 12px !important;
    padding: 14px !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    background: var(--bw-bg-card, #1A1A1A) !important;
  }

  /* Reset aller td auf Block + cleare alle geerbten Grid-Placements */
  html body.woocommerce-cart table.shop_table.cart tbody tr td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: initial !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Thumbnail (Col 1, beide Zeilen) */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-thumbnail {
    grid-area: thumb !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 72px !important;
    flex: none !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-thumbnail a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    height: 72px !important;
    background: #f4f4f4 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-thumbnail img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
    padding: 0 !important;
  }

  /* Name (Row 1, Col 2) */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-name {
    grid-area: name !important;
    align-self: end !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.92) !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: break-word !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-name a {
    color: rgba(255,255,255,0.92) !important;
    text-decoration: none !important;
  }

  /* Remove × (Row 1, Col 3) */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-remove {
    grid-area: remove !important;
    justify-self: end !important;
    align-self: start !important;
    width: auto !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-remove a.remove {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255,255,255,0.4) !important;
    background: transparent !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-remove a.remove:hover {
    color: #C0392B !important;
    background: rgba(192, 57, 43, 0.1) !important;
  }

  /* Quantity (Row 2, Col 2) */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-quantity {
    grid-area: qty !important;
    justify-self: start !important;
    align-self: end !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-quantity .quantity,
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-quantity .qty-wrap {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(184, 115, 51, 0.15) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-quantity input.qty {
    background: transparent !important;
    border: none !important;
    color: var(--bw-text, #E8E0D8) !important;
    width: 36px !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 2px !important;
    -moz-appearance: textfield !important;
  }

  /* Subtotal (Row 2, Col 3) */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-subtotal {
    grid-area: price !important;
    justify-self: end !important;
    align-self: end !important;
    text-align: right !important;
    font-size: 14px !important;
    color: var(--bw-copper-lt, #D4956B) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  /* Einzelpreis-Spalte ausblenden (Subtotal reicht) */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-price {
    display: none !important;
  }

  /* Cart-Actions Row (Coupon + Update Cart) */
  html body.woocommerce-cart table.shop_table.cart tr.cart_actions,
  html body.woocommerce-cart table.shop_table.cart td.actions {
    display: block !important;
    padding: 14px !important;
    grid-template-columns: none !important;
  }
  html body.woocommerce-cart table.shop_table.cart td.actions .coupon {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  html body.woocommerce-cart table.shop_table.cart td.actions .coupon input,
  html body.woocommerce-cart table.shop_table.cart td.actions .coupon button,
  html body.woocommerce-cart table.shop_table.cart td.actions button[name="update_cart"] {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* Cart-Summary (DARUNTER, full-width) */
  html body.woocommerce-cart .cart_totals {
    background: var(--bw-bg-card, #1A1A1A) !important;
    border: 1px solid rgba(184, 115, 51, 0.15) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 0 !important;
  }
  html body.woocommerce-cart .cart_totals h2 {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--bw-text, #E8E0D8) !important;
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid rgba(184, 115, 51, 0.15) !important;
  }
  html body.woocommerce-cart .cart_totals table.shop_table {
    background: transparent !important;
    border: none !important;
  }
  html body.woocommerce-cart .cart_totals table.shop_table tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 0 !important;
    border: none !important;
  }
  html body.woocommerce-cart .cart_totals table.shop_table th,
  html body.woocommerce-cart .cart_totals table.shop_table td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 14px !important;
    color: var(--bw-text, #E8E0D8) !important;
  }
  html body.woocommerce-cart .cart_totals tr.order-total {
    border-top: 1px solid rgba(184, 115, 51, 0.15) !important;
    margin-top: 8px !important;
    padding-top: 16px !important;
    align-items: baseline !important;
  }
  html body.woocommerce-cart .cart_totals tr.order-total th {
    color: var(--bw-text, #E8E0D8) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  html body.woocommerce-cart .cart_totals tr.order-total td .amount,
  html body.woocommerce-cart .cart_totals tr.order-total .woocommerce-Price-amount {
    color: var(--bw-copper-lt, #D4956B) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
  }

  html body.woocommerce-cart .wc-proceed-to-checkout {
    margin-top: 16px !important;
    padding: 0 !important;
  }
  html body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    background: var(--bw-copper, #B87333) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    min-height: 52px !important;
    text-decoration: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION 6 · Bug 5 — Verkostungs-Banner Spacing-Puffer
   Banner ist position:fixed; bottom:0; ohne body padding-bottom →
   überdeckt content. Wir setzen padding-bottom global auf Mobile.
   Plus: Banner selbst kompakter, größerer Touch-Target.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Globaler Puffer — funktioniert immer, kein :has() nötig */
  html body {
    padding-bottom: 80px !important;
  }
  /* Auf Cart/Checkout/Verkostungs-Page wird Banner per PHP nicht ausgegeben */
  html body.woocommerce-cart,
  html body.woocommerce-checkout,
  html body.page-verkostung {
    padding-bottom: 0 !important;
  }

  /* Banner kompakter: EINE Zeile (Text + Button), mehr Platz für Close-Button */
  html body #bw-vk-banner {
    padding: 10px 48px 10px 14px !important;
    font-size: 12px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  html body #bw-vk-banner > span {
    line-height: 1.4 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body #bw-vk-banner a[href*="termin"] {
    padding: 10px 16px !important;
    font-size: 13px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-left: auto !important;
  }
  html body #bw-vk-banner button {
    width: 32px !important;
    height: 32px !important;
    right: 12px !important;
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION 7 · Header — "Weiter einkaufen"-Link nicht umbrechen
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  html body .bw-continue-shopping {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  html body .bw-continue-shopping > svg {
    flex-shrink: 0 !important;
  }
}
@media (max-width: 380px) {
  html body .bw-continue-shopping {
    font-size: 11px !important;
    gap: 3px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION 8 · Filter-Drawer (Bottom-Sheet) für Shop-Page
   Optional: aktivierbar wenn der Filter-Button via JS .is-open toggled.
   Falls noch kein JS — nur visuelle Vorbereitung, schadet nicht.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  html body .widget-area,
  html body .bw-shop-sidebar,
  html body aside.shop-sidebar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--bw-bg-card, #1A1A1A) !important;
    border-top: 1px solid var(--bw-copper, #B87333) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 8px 16px 24px !important;
    box-shadow: 0 -20px 40px rgba(0,0,0,0.5) !important;
    transform: translateY(100%) !important;
    transition: transform .35s cubic-bezier(.25,.46,.45,.94) !important;
    z-index: 100 !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }
  html body .widget-area.is-open,
  html body .bw-shop-sidebar.is-open,
  html body aside.shop-sidebar.is-open {
    transform: translateY(0) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION 9 · Touch-Targets & WCAG-Mindestgrößen
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html body a.bw-btn,
  html body .button,
  html body button[type="submit"],
  html body input[type="submit"] {
    min-height: 44px !important;
  }
  /* Inline-Text-Links nicht inflaten */
  html body p a,
  html body li a,
  html body td a {
    min-height: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   END — Mahlwerk Mobile Bugfixes Replacement
   Wenn live nach Deploy + Cache-Purge ein Bug bleibt:
   → DevTools → Computed → Filter "background" / "grid-template" und
     prüfen welche Source-Datei gewinnt. Vermutlich ein WPCode-Snippet
     mit noch höherer Specificity → dann den entsprechenden Selektor
     hier ergänzen.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 2 (2026-04-19) — Live-Diagnose Findings
   ───────────────────────────────────────────────────────────────────────
   Problem nach erstem Deploy (Live bei 414px Viewport):
   - Form padding 1rem (parent woocommerce.css) + div.woocommerce 16px (mine)
     + tr padding 14px (mine) = 92px Padding-Stacking
   - Mittlere Cart-Spalte gequetscht auf 96px → Produktname clipped
   - dl.variation ("BAR302/30 Weiss") wird inline neben dem
     line-clamped Link sichtbar → wirkt wie überschüssige Zeile
   - actions-Row (Coupon + Update) hat width=28px (collapsed)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── (1) Form-Padding plattmachen — Parent setzt 1rem bei <=640px ── */
  html body.woocommerce-cart form.woocommerce-cart-form,
  html body.woocommerce-cart .woocommerce-cart-form {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  /* ── (2) DIV.woocommerce: nur Bottom-Padding, kein Horizontal ── */
  html body.woocommerce-cart div.woocommerce {
    padding: 0 12px 24px !important;
  }

  /* ── (3) TR.cart_item Padding reduzieren von 14 auf 10 ── */
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item,
  html body.woocommerce-cart table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item {
    padding: 10px !important;
    gap: 4px 10px !important;
    grid-template-columns: 64px minmax(0, 1fr) auto !important;
  }

  /* ── (4) Thumbnail von 72 auf 64 verkleinern (mehr Platz für Name) ── */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-thumbnail,
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-thumbnail a,
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-thumbnail img {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
  }

  /* ── (5) dl.variation (z.B. "BAR302/30 Weiss") UNTERHALB des Links,
            klein + muted — nicht inline neben dem geclampten Link ── */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-name dl.variation,
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-name .variation,
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-name .wc-item-meta {
    display: block !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-name dl.variation dt,
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-name dl.variation dd {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: normal !important;
    color: inherit !important;
    font-size: inherit !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-name dl.variation dt::after {
    content: ': ';
  }

  /* ── (6) td.product-name als Block (nicht -webkit-box auf TD) —
            Line-Clamp läuft auf dem inneren <a> ── */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-name {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: initial !important;
    line-clamp: initial !important;
    -webkit-box-orient: initial !important;
    align-self: center !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-name a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: rgba(255, 255, 255, 0.92) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  /* ── (7) actions-Row (Coupon + Update Cart) sichtbar machen ── */
  html body.woocommerce-cart table.shop_table.cart tbody tr.actions,
  html body.woocommerce-cart table.shop_table.cart tr.actions,
  html body.woocommerce-cart table.shop_table.cart .actions,
  html body.woocommerce-cart table.shop_table.cart td.actions {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 14px 10px !important;
    grid-template-columns: none !important;
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
  }
  html body.woocommerce-cart table.shop_table.cart .actions .coupon {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }
  html body.woocommerce-cart table.shop_table.cart .actions .coupon input#coupon_code {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-height: 44px !important;
    background: var(--bw-bg-card, #1A1A1A) !important;
    color: var(--bw-text, #E8E0D8) !important;
    border: 1px solid rgba(184, 115, 51, 0.15) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
  html body.woocommerce-cart table.shop_table.cart .actions .coupon button[name="apply_coupon"],
  html body.woocommerce-cart table.shop_table.cart .actions button[name="update_cart"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 8px !important;
    margin: 0 !important;
  }
  html body.woocommerce-cart table.shop_table.cart .actions .coupon button[name="apply_coupon"] {
    background: transparent !important;
    color: var(--bw-copper, #B87333) !important;
    border: 1px solid var(--bw-copper, #B87333) !important;
  }
  html body.woocommerce-cart table.shop_table.cart .actions button[name="update_cart"] {
    background: var(--bw-copper, #B87333) !important;
    color: #fff !important;
    border: none !important;
  }

  /* ── (8) Cart-Totals Container Padding korrigieren ── */
  html body.woocommerce-cart .cart_totals {
    margin: 16px 0 0 !important;
    padding: 18px 16px !important;
  }

  /* ── (9) Quantity-Input kompakter (für 64px Cart-Spalte) ── */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-quantity input.qty {
    width: 28px !important;
    padding: 4px 0 !important;
    font-size: 13px !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-quantity .quantity {
    transform: scale(0.92);
    transform-origin: left center;
  }

  /* ── (10) Subtotal nicht clippen — etwas mehr Platz ── */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-subtotal {
    font-size: 13px !important;
    min-width: 60px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 3 (2026-04-19) — Cart-Actions Row + Coupon Layout
   ───────────────────────────────────────────────────────────────────────
   Problem nach Patch 2:
   - Actions-TR (Coupon + Update Cart) hat keine Klasse → Parent-CSS
     `body.woocommerce-cart .shop_table.cart tbody tr:not(.actions)` matcht
     (TR class="" hat .actions NICHT) → display: grid + cols 24px 56px 230px
     greift FALSCH auf die Actions-Row → TD.actions wird auf 24px gequetscht
   - Coupon-Container w=4px (kollabiert), Update-Button mit opacity:0.35
     (das ist WC-Default wenn keine Mengenänderung — nicht CSS-bedingt,
     aber mit `pointer-events: auto` und Visual-Reset wirkt's konsistenter)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── (1) Actions-TR: aus dem Grid-Layout des Parents rausreißen ── */
  /* Variante A: :has() für moderne Browser (Chrome 105+, Firefox 121+, Safari 15.4+) */
  html body.woocommerce-cart table.shop_table.cart tbody tr:has(> td.actions) {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 16px 0 0 !important;
    border: none !important;
    background: transparent !important;
  }
  /* Variante B: TD.actions als Grid-Span (Fallback wenn :has() nicht greift) */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.actions {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 0 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  /* ── (2) Coupon-Container (input + apply button) ── */
  html body.woocommerce-cart table.shop_table.cart .actions .coupon {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  html body.woocommerce-cart table.shop_table.cart .actions .coupon label {
    display: none !important;             /* Label "Gutschein:" ausblenden */
  }
  html body.woocommerce-cart table.shop_table.cart .actions .coupon input#coupon_code,
  html body.woocommerce-cart table.shop_table.cart .actions .coupon input[name="coupon_code"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;
    background: var(--bw-bg-card, #1A1A1A) !important;
    color: var(--bw-text, #E8E0D8) !important;
    border: 1px solid rgba(184, 115, 51, 0.25) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  html body.woocommerce-cart table.shop_table.cart .actions .coupon button[name="apply_coupon"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 8px !important;
    margin: 0 !important;
    background: transparent !important;
    color: var(--bw-copper, #B87333) !important;
    border: 1px solid var(--bw-copper, #B87333) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── (3) Update-Cart Button: full-width primary
            (auch wenn disabled, sieht's sauber aus) ── */
  html body.woocommerce-cart table.shop_table.cart .actions button[name="update_cart"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 8px !important;
    margin: 0 !important;
    background: var(--bw-copper, #B87333) !important;
    color: #fff !important;
    border: none !important;
    box-sizing: border-box !important;
  }
  /* Disabled-State — bleibt copper, leichter Opacity-Hinweis statt 0.35 */
  html body.woocommerce-cart table.shop_table.cart .actions button[name="update_cart"]:disabled,
  html body.woocommerce-cart table.shop_table.cart .actions button[name="update_cart"][disabled] {
    background: rgba(184, 115, 51, 0.25) !important;
    color: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(184, 115, 51, 0.25) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
  }

  /* ── (4) Cart-Actions: Margin-Reset zwischen Items + Coupon-Section ── */
  html body.woocommerce-cart table.shop_table.cart {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item:last-of-type {
    border-bottom: none !important;
  }

  /* ── (5) Cart-Totals direkt nach Cart-Items, kein riesiger Gap ── */
  html body.woocommerce-cart .cart-collaterals {
    margin-top: 0 !important;
  }
  html body.woocommerce-cart .cart-collaterals .cart_totals {
    margin: 12px 0 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 4 (2026-04-19) — Spacing-Tightening + Sticky-Header Offset
   ───────────────────────────────────────────────────────────────────────
   Problem nach Patch 3:
   - bw-page-hero hat 94px überschüssiges padding-top (Warenkorb-Headline
     liegt mit riesigem Abstand zum Header)
   - cart_totals hat 18px+18px innere Padding + Margins zwischen H2/Tabelle
   - Sticky bw-header (position:fixed, h=73, top:46) verdeckt beim
     Scrollen die obersten 119px des Viewports → User sieht nicht
     "WARENKORB-SUMME" Headline weil sie hinter dem Header liegt
   - Lots of vertical "dead space" zwischen Cart-Items, Coupon, Update,
     Summen-Box → Page wirkt fragmented
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── (1) Page-Hero Padding reduzieren (Warenkorb-Headline) ── */
  html body .bw-page-hero,
  html body section.bw-page-hero {
    padding: 24px 16px 16px !important;
    margin: 0 !important;
    min-height: auto !important;
  }
  html body .bw-page-hero .bw-container {
    padding: 0 !important;
  }
  html body .bw-page-hero__title,
  html body .bw-page-title {
    font-size: clamp(1.7rem, 7vw, 2.2rem) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    overflow-wrap: break-word !important;
  }
  /* Breadcrumb auf der Cart-Page kompakter */
  html body .bw-page-hero .bw-breadcrumbs,
  html body .bw-breadcrumbs {
    margin: 0 0 8px !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
  }

  /* ── (2) Cart-Totals straffen ── */
  html body.woocommerce-cart .cart-collaterals {
    margin: 16px 0 0 !important;
    padding: 0 !important;
  }
  html body.woocommerce-cart .cart_totals {
    margin: 0 !important;
    padding: 16px !important;
  }
  html body.woocommerce-cart .cart_totals h2 {
    margin: 0 0 10px !important;
    padding: 0 0 10px !important;
    font-size: 14px !important;
  }
  html body.woocommerce-cart .cart_totals table.shop_table {
    margin: 0 !important;
  }
  html body.woocommerce-cart .cart_totals table.shop_table tr {
    padding: 6px 0 !important;
  }
  html body.woocommerce-cart .cart_totals table.shop_table tr.order-total {
    padding: 12px 0 8px !important;
    margin-top: 4px !important;
  }
  html body.woocommerce-cart .wc-proceed-to-checkout {
    margin: 12px 0 0 !important;
    padding: 0 !important;
  }

  /* ── (3) Sticky-Header Offset:
            scroll-margin-top auf alle Headlines + jump-Targets damit
            die Sticky-Bar (~119px inkl. Admin-Bar) sie nicht verdeckt ── */
  html {
    scroll-padding-top: 130px !important;
  }
  html body h1, html body h2, html body h3,
  html body .bw-page-hero,
  html body .cart_totals,
  html body .cart-collaterals {
    scroll-margin-top: 130px !important;
  }

  /* ── (4) DIV.woocommerce: minimal padding-bottom ── */
  html body.woocommerce-cart div.woocommerce {
    padding: 0 12px 16px !important;
  }

  /* ── (5) Cart-Item / Cart-Form / Actions Spacing reduzieren ── */
  html body.woocommerce-cart .woocommerce-cart-form {
    margin: 0 !important;
  }
  html body.woocommerce-cart table.shop_table.cart {
    margin: 0 !important;
    background: var(--bw-bg-card, #1A1A1A) !important;
    border: 1px solid rgba(184, 115, 51, 0.15) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  /* Letzter Cart-Item ohne Border-Bottom */
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item:last-of-type {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  /* Actions row direkt unter den Items, kein großer Margin */
  html body.woocommerce-cart table.shop_table.cart tbody tr:has(> td.actions) {
    margin: 0 !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.actions {
    padding: 12px 14px !important;
  }
  /* Coupon section margin tighter */
  html body.woocommerce-cart table.shop_table.cart .actions .coupon {
    margin: 0 0 10px !important;
  }

  /* ── (6) Cart-Item Padding nochmal kompakter ── */
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item,
  html body.woocommerce-cart table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item {
    padding: 12px 14px !important;
    gap: 4px 12px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 5 (2026-04-19) — Specificity-War: a[href] für Cart-Link-Clamp
   ───────────────────────────────────────────────────────────────────────
   Problem: Parent-CSS hat
     `body.woocommerce-cart .shop_table.cart tbody td.product-name a[href]
      { display: block }`
   = (0, 5, 4) — schlägt unsere bisherigen (0, 4, 6) Selektoren auf
   `td.product-name a` weil die `[href]` Attribut-Selektor extra Class-
   Spezifität gibt.
   → Cart-Item Name wird nicht geclampt, läuft auf 3+ Zeilen, qty
     overlapt visuell.
   Fix: Wir matchen `a[href]` direkt → (0, 5, 7) gewinnt.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Force -webkit-box display + line-clamp via [href] match ── */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-name a[href],
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-name a[href],
  html body.woocommerce-cart table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item td.product-name a[href] {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: rgba(255, 255, 255, 0.92) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    max-height: 2.6em !important;     /* Hard cap als Sicherheitsnetz */
  }

  /* ── Wenn Variation-Element vorhanden, sicher als Block darunter ── */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-name dl.variation,
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-name .wc-item-meta {
    display: block !important;
    margin: 4px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* ── td.product-name selbst soll Block sein (nicht -webkit-box),
        damit Variation darunter passt ── */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-name {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: initial !important;
  }

  /* ── Subtotal: kompakter font damit es in 60px breite Spalte passt ── */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-subtotal,
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-subtotal .woocommerce-Price-amount {
    font-size: 13px !important;
    white-space: nowrap !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 7 (2026-04-19) — × Remove-Button + VAT-Display
   ───────────────────────────────────────────────────────────────────────
   Problems:
   - × Remove-Button auf Cart-Items: opacity 0.4 + weiß 40% → quasi
     unsichtbar gegen dunklen Hintergrund
   - "inkl. MwSt." soll den berechneten Betrag enthalten
     (JS macht's, hier nur das Styling für den injizierten Span)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── (1) × Remove-Button: voll sichtbar, größer, copper-tint ── */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-remove,
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-remove a.remove,
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-remove a.remove[href] {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    background: rgba(184, 115, 51, 0.10) !important;
    border: 1px solid rgba(184, 115, 51, 0.45) !important;
    color: #D4956B !important;
    opacity: 1 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.2s, border-color 0.2s, transform 0.15s !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-remove a.remove:hover,
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-remove a.remove:focus {
    background: rgba(192, 57, 43, 0.18) !important;
    border-color: #C0392B !important;
    color: #ff6b58 !important;
    transform: scale(1.05) !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-remove a.remove:active {
    transform: scale(0.95) !important;
  }

  /* ── (2) VAT-Amount Span (vom JS inejziert) ── */
  html body.woocommerce-cart .cart_totals .order-total .bw-vat-amount {
    display: block !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.45) !important;
    margin-top: 4px !important;
    font-family: 'DM Sans', sans-serif !important;
    letter-spacing: 0.02em !important;
  }
  /* Original cart.css ::after "inkl. MwSt." ausblenden — JS ersetzt */
  html body.woocommerce-cart .cart_totals .order-total td::after {
    content: none !important;
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 8 (2026-04-19) — Header & Burger-Menu Visibility
   ───────────────────────────────────────────────────────────────────────
   Problems:
   - .bw-mobile-toggle Button vorhanden (44×44px) aber seine 3 Spans
     haben w:0, h:0, kein Background → KOMPLETT unsichtbar.
     User sieht den Button rechts oben einfach nicht.
   - Header insgesamt überfüllt: Logo + "Weiter einkaufen" + Cart-Icon
     + (unsichtbarer) Burger → unbalanciert auf Mobile.
   - Auf Cart-Page kollidiert "Weiter einkaufen" Link mit dem Layout.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── (1) Burger-Menu Button: 3 sichtbare horizontal Linien ── */
  html body .bw-mobile-toggle,
  html body #bw-mobile-toggle,
  html body button.bw-mobile-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  html body .bw-mobile-toggle span,
  html body #bw-mobile-toggle span,
  html body button.bw-mobile-toggle span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background-color: #E8E0D8 !important;
    border-radius: 2px !important;
    transition: transform .25s ease, opacity .25s ease, background-color .25s !important;
    transform-origin: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .bw-mobile-toggle:hover span,
  html body #bw-mobile-toggle:hover span {
    background-color: #D4956B !important;
  }

  /* Open state (when aria-expanded="true") → X-Form */
  html body .bw-mobile-toggle[aria-expanded="true"] span:nth-child(1),
  html body #bw-mobile-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  html body .bw-mobile-toggle[aria-expanded="true"] span:nth-child(2),
  html body #bw-mobile-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0 !important;
  }
  html body .bw-mobile-toggle[aria-expanded="true"] span:nth-child(3),
  html body #bw-mobile-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* ── (2) Header-Layout: cleaner Balance ── */
  html body header.bw-header .bw-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 0 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body header.bw-header .bw-logo {
    flex-shrink: 0 !important;
    margin-right: auto !important;
  }

  html body header.bw-header .bw-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  /* ── (3) Continue-Shopping Link kompakter (oder ausblenden auf <380px) ── */
  html body header.bw-header .bw-continue-shopping {
    font-size: 12px !important;
    color: #D4956B !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(184, 115, 51, 0.25) !important;
    background: rgba(184, 115, 51, 0.05) !important;
    white-space: nowrap !important;
    margin-right: 4px !important;
  }
  html body header.bw-header .bw-continue-shopping:hover {
    background: rgba(184, 115, 51, 0.15) !important;
    border-color: rgba(184, 115, 51, 0.6) !important;
  }

  /* ── (4) Cart-Icon stärker hervorheben ── */
  html body header.bw-header .bw-cart-link {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #E8E0D8 !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }
  html body header.bw-header .bw-cart-icon,
  html body header.bw-header .bw-cart-link svg {
    width: 24px !important;
    height: 24px !important;
    stroke: #E8E0D8 !important;
    color: #E8E0D8 !important;
    opacity: 1 !important;
  }
  html body header.bw-header .bw-cart-count {
    position: absolute !important;
    top: 2px !important;
    right: 0px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #B87333 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
  }
}

/* ── Auf ULTRA-schmal (<380px): "Weiter einkaufen" zu Icon-Only ── */
@media (max-width: 379px) {
  html body header.bw-header .bw-continue-shopping {
    font-size: 0 !important;        /* Text ausblenden */
    width: 36px !important;
    padding: 8px !important;
    justify-content: center !important;
  }
  html body header.bw-header .bw-continue-shopping svg {
    width: 14px !important;
    height: 14px !important;
    stroke: #D4956B !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 9 (2026-04-19) — Mobile Menu Redesign (offener Zustand)
   ───────────────────────────────────────────────────────────────────────
   Problem: Geöffnetes Mobile-Menu sah broken aus:
   - Halbtransparentes BG (rgba(10,10,10,0.98)) → Page-Content schimmert
   - Items mittig zentriert ohne Divider/Padding
   - Header bleibt sichtbar oben → Logo + Continue + Cart + X verwirren
   - Kein klares "Menü"-Branding, kein Close-Affordance außer X mini

   Fix: Vollflächiges opakes Drawer-Style Menu mit:
   - Solid black bg (kein bleed-through)
   - Eigenem Header oben mit Logo + großem Close-Button
   - Items full-width, large touch targets, copper hover-state, divider
   - Footer mit Cart-Link + Kontakt
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── (1) Container: full-screen, OPAK, sauberes Layout ── */
  html body .bw-mobile-menu {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;          /* iOS Safari dynamic viewport */
    background: #0A0A0A !important;     /* fully opaque */
    z-index: 9999 !important;           /* über allem inkl. fixed header */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-12px) !important;
    transition: opacity .25s ease, transform .25s ease, visibility .25s !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html body .bw-mobile-menu.open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  /* ── (2) Eigener Menu-Header oben (Logo + Close-X) ── */
  html body .bw-mobile-menu::before {
    content: "" !important;
    display: block !important;
    height: 78px !important;            /* Reserve für absolut positionierten Header */
    flex-shrink: 0 !important;
  }
  html body .bw-mobile-menu .bw-mobile-menu-inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 !important;
  }
  /* Logo + Close-Button: absolut über dem ::before-Spacer */
  html body .bw-mobile-menu::after {
    content: "Mahlwerk." !important;
    position: fixed !important;
    top: 0 !important;
    left: 16px !important;
    height: 78px !important;
    display: flex !important;
    align-items: center !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    color: #FAFAFA !important;
    letter-spacing: -0.01em !important;
    z-index: 10 !important;
    pointer-events: none !important;     /* nicht clickable */
  }

  /* ── (3) Burger-Button bleibt rechts oben sichtbar (war schon X-form) ── */
  html body .bw-mobile-toggle.open,
  html body .bw-mobile-toggle[aria-expanded="true"] {
    position: fixed !important;
    top: 17px !important;
    right: 12px !important;
    z-index: 10000 !important;            /* über dem Menu */
  }
  /* Bei Menu offen: Spans als X (war in Patch 8 schon styled) — aber sicherheitshalber Farbe explizit */
  html body .bw-mobile-toggle[aria-expanded="true"] span {
    background-color: #FAFAFA !important;
  }

  /* ── (4) Nav-Liste: full-width Items, Divider, große Touch-Targets ── */
  html body .bw-mobile-menu .bw-mobile-nav,
  html body .bw-mobile-menu nav {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body .bw-mobile-menu .bw-mobile-nav-list,
  html body .bw-mobile-menu .bw-nav-list,
  html body .bw-mobile-menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  html body .bw-mobile-menu .bw-mobile-nav-list li,
  html body .bw-mobile-menu .bw-nav-list li,
  html body .bw-mobile-menu ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  html body .bw-mobile-menu .bw-mobile-nav-list li:first-child,
  html body .bw-mobile-menu .bw-nav-list li:first-child,
  html body .bw-mobile-menu ul li:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  html body .bw-mobile-menu a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 18px 24px !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    color: #FAFAFA !important;
    text-decoration: none !important;
    text-align: left !important;
    margin: 0 !important;
    min-height: 56px !important;
    transition: background-color .15s ease, color .15s ease, padding-left .2s ease !important;
    position: relative !important;
  }
  html body .bw-mobile-menu a::before {
    content: "" !important;
    width: 0 !important;
    height: 1px !important;
    background: #B87333 !important;
    margin-right: 0 !important;
    transition: width .25s ease, margin-right .25s ease !important;
  }
  html body .bw-mobile-menu a:hover,
  html body .bw-mobile-menu a:focus {
    background-color: rgba(184, 115, 51, 0.08) !important;
    color: #D4956B !important;
    padding-left: 32px !important;
    outline: none !important;
  }
  html body .bw-mobile-menu a:hover::before,
  html body .bw-mobile-menu a:focus::before {
    width: 18px !important;
    margin-right: 12px !important;
  }
  html body .bw-mobile-menu a.current,
  html body .bw-mobile-menu .current-menu-item > a {
    color: #D4956B !important;
    background: rgba(184, 115, 51, 0.05) !important;
  }

  /* ── (5) Cart-Link (existiert in header.php als bw-mobile-cart-link) ── */
  html body .bw-mobile-menu .bw-mobile-cart-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 24px 24px 0 !important;
    padding: 14px 20px !important;
    background: #B87333 !important;
    color: #fff !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    min-height: 50px !important;
  }
  html body .bw-mobile-menu .bw-mobile-cart-link:hover {
    background: #D4956B !important;
  }
  html body .bw-mobile-menu .bw-mobile-cart-link .bw-cart-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.25) !important;
    color: #fff !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    position: static !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  /* ── (6) Body-Scroll-Lock wenn Menu offen ── */
  html body.menu-open,
  html body:has(.bw-mobile-menu.open) {
    overflow: hidden !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 10 (2026-04-19) — Mobile Menu Polish
   ───────────────────────────────────────────────────────────────────────
   Nach Patch 9 ist das Menu sauber, aber:
   - Header (mit Promo-Strip + Logo + Cart) bleibt sichtbar oben →
     verwirrt visuell weil unter dem Menu ein leerer Bereich ist
   - X-Close-Button ist unsichtbar weil Toggle in Header-Container
     gefangen bleibt (position:fixed Override greift nicht)
   - ::before/::after Pseudo-Elemente unzuverlässig — wir machen
     einen ECHTEN inline Header IM Menu via CSS content+layout

   Fix: Wenn Menu offen:
   - Page-Header (bw-header + bw-announce) ausblenden
   - Menu rendert eigenen Top-Bar mit "Mahlwerk." Logo + großer X-Close
   - X positioniert relativ zum Menu, nicht zum Header
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── (1) Wenn Menu offen: Page-Header + Promo komplett ausblenden ── */
  html body:has(.bw-mobile-menu.open) header.bw-header,
  html body:has(.bw-mobile-menu.open) .bw-announce {
    display: none !important;
  }

  /* ── (2) Pseudos vom Patch 9 zurücksetzen (wir bauen jetzt einen
            echten Top-Bar mit eigenem div im Menu) ── */
  html body .bw-mobile-menu::before,
  html body .bw-mobile-menu::after {
    content: none !important;
    display: none !important;
  }

  /* ── (3) Mobile-Menu Top-Bar: Logo links + Close-Button rechts
            Wir nutzen .bw-mobile-menu-inner als Container und
            verschieben den Toggle-Button optisch ins Menu ── */
  html body .bw-mobile-menu .bw-mobile-menu-inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Pseudo-Header IM Menu mit Logo via :first-child::before-Trick */
  html body .bw-mobile-menu .bw-mobile-menu-inner::before {
    content: "Mahlwerk." !important;
    display: flex !important;
    align-items: center !important;
    height: 64px !important;
    padding: 0 24px !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    color: #FAFAFA !important;
    letter-spacing: -0.01em !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    flex-shrink: 0 !important;
    background: #0A0A0A !important;
    margin: 0 0 8px !important;
  }

  /* ── (4) Toggle-X: top-right, hellweiß, sichtbar über allem ── */
  html body .bw-mobile-toggle.open,
  html body .bw-mobile-toggle[aria-expanded="true"],
  html body header.bw-header .bw-mobile-toggle.open,
  html body header.bw-header .bw-mobile-toggle[aria-expanded="true"] {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 10001 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
  }
  html body .bw-mobile-toggle.open span,
  html body .bw-mobile-toggle[aria-expanded="true"] span {
    width: 22px !important;
    height: 2px !important;
    background-color: #FAFAFA !important;
    border-radius: 2px !important;
    transition: transform .25s ease !important;
  }

  /* Adjust X transforms for new gap (5px) */
  html body .bw-mobile-toggle.open span:nth-child(1),
  html body .bw-mobile-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  html body .bw-mobile-toggle.open span:nth-child(2),
  html body .bw-mobile-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0 !important;
  }
  html body .bw-mobile-toggle.open span:nth-child(3),
  html body .bw-mobile-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* ── (5) Menu items: feinere Spacing nach Top-Bar ── */
  html body .bw-mobile-menu .bw-mobile-nav-list li:first-child,
  html body .bw-mobile-menu .bw-nav-list li:first-child,
  html body .bw-mobile-menu ul li:first-child {
    border-top: none !important;        /* statt extra Border, schon trennt durch Header-Border-Bottom */
  }

  /* ── (6) WARENKORB-CTA hat etwas mehr Padding-Bottom für Atmungsfreiheit ── */
  html body .bw-mobile-menu .bw-mobile-cart-link {
    margin: 32px 24px 24px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 11 (2026-04-19) — Mobile Menu: X-Close + Admin-Bar Offset
   ───────────────────────────────────────────────────────────────────────
   Patch 10 hat Header verstecken via display:none → Toggle (X-Button)
   ist IM Header und damit auch unsichtbar → Menü konnte nicht
   geschlossen werden!

   Plus: WordPress admin-bar (32-46px hoch, z-index 99999) verdeckt das
   Menu oben → Mahlwerk. Logo nicht sichtbar.

   Fix:
   - Header NICHT mehr display:none, sondern opacity:0+pointer-events:none
     auf alle Header-Children AUSSER dem Toggle
   - Toggle bleibt klickbar via opacity:1 + pointer-events:auto
   - Menu padding-top für admin-bar wenn body.admin-bar
   - Menü-Inhalt nach unten geschoben damit nichts überlappt
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── (0) Patch 10's display:none rückgängig machen ── */
  html body:has(.bw-mobile-menu.open) header.bw-header,
  html body:has(.bw-mobile-menu.open) .bw-announce {
    display: block !important;          /* zurück sichtbar im Layout */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;    /* Klicks gehen durch */
    z-index: 1 !important;              /* unter dem Menu */
  }

  /* Header-Kinder unsichtbar (außer Toggle, der explizit sichtbar gemacht wird) */
  html body:has(.bw-mobile-menu.open) header.bw-header > *,
  html body:has(.bw-mobile-menu.open) header.bw-header .bw-container > *:not(.bw-header-actions),
  html body:has(.bw-mobile-menu.open) header.bw-header .bw-header-actions > *:not(.bw-mobile-toggle),
  html body:has(.bw-mobile-menu.open) .bw-announce > * {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Toggle bleibt sichtbar + klickbar, OBEN auf dem Menu */
  html body:has(.bw-mobile-menu.open) .bw-mobile-toggle,
  html body .bw-mobile-toggle.open,
  html body .bw-mobile-toggle[aria-expanded="true"] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 10001 !important;          /* über Menu (9999) und admin-bar fall (32600) */
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
  }
  /* Wenn admin-bar (WP) geladen, Toggle nach unten schieben */
  html body.admin-bar .bw-mobile-toggle.open,
  html body.admin-bar .bw-mobile-toggle[aria-expanded="true"] {
    top: 58px !important;               /* 46 admin-bar + 12 padding */
  }

  /* ── (1) Menu padding-top wenn admin-bar da ist ── */
  html body.admin-bar .bw-mobile-menu {
    padding-top: 46px !important;       /* admin-bar mobile height */
  }
  html body:not(.admin-bar) .bw-mobile-menu {
    padding-top: 0 !important;
  }

  /* ── (2) Menu-Inner Mahlwerk Header-Bar ── */
  html body .bw-mobile-menu .bw-mobile-menu-inner::before {
    content: "Mahlwerk." !important;
    display: flex !important;
    align-items: center !important;
    height: 64px !important;
    padding: 0 24px !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    color: #FAFAFA !important;
    letter-spacing: -0.01em !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    flex-shrink: 0 !important;
    background: #0A0A0A !important;
    margin: 0 0 8px !important;
    padding-right: 60px !important;     /* Platz für die Close-X */
  }

  /* ── (3) Items sauberer Spacing nach Header-Bar ── */
  html body .bw-mobile-menu .bw-mobile-nav-list li:first-child,
  html body .bw-mobile-menu .bw-nav-list li:first-child,
  html body .bw-mobile-menu ul li:first-child {
    border-top: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 12 (2026-04-19) — Mobile Menu: Inline X-Close (kein WP-Admin-Bar
   Konflikt mehr)
   ───────────────────────────────────────────────────────────────────────
   Problem: WP-Admin-Bar (z-index 99999) verdeckt das fixed positionierte
   Toggle-X. Specificity-Krieg mit Patch 10/11 macht's komplexer.

   Bessere Lösung: X-Button NICHT mehr im fixed Header sondern als echter
   Klick-Bereich INNERHALB der Mahlwerk.-Bar im Menu. Wir styling die
   .bw-mobile-menu so dass die ::after ein Cancel-Symbol IM Menu-Header
   zeigt und ein JS-Click-Handler darauf den Menu-Close auslöst.

   Auch: Toggle-X im echten Header bleibt zusätzlich versteckt während
   Menu offen — dann gibt's nur EINE saubere X-Position.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── (1) Patch 10's Header display:none zurück, Patch 11's komplexen
            opacity-Hack ENTFERNEN. Header darf normal bleiben WENN Menu
            zu hat. Wenn offen: nur unsichtbar/durchklickbar. ── */
  html body:has(.bw-mobile-menu.open) header.bw-header {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  html body:has(.bw-mobile-menu.open) .bw-announce {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ── (2) Toggle-Button im Header: bleibt im Layout (klickbar zum
            Schließen) aber verschoben auf Top der Viewport via fixed.
            HIER muss specificity v10 schlagen. ── */
  html body header.bw-header .bw-mobile-toggle.open,
  html body header.bw-header .bw-mobile-toggle[aria-expanded="true"],
  html body header.bw-header div.bw-header-actions .bw-mobile-toggle.open,
  html body header.bw-header div.bw-header-actions .bw-mobile-toggle[aria-expanded="true"] {
    position: fixed !important;
    visibility: visible !important;
    pointer-events: auto !important;
    /* Standard mobile (no admin-bar): top 12px */
    top: 12px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    z-index: 100000 !important;       /* über Admin-Bar (99999) */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
  }

  /* WP-Admin-Bar offset: 46px Mobile-Höhe */
  html body.admin-bar header.bw-header .bw-mobile-toggle.open,
  html body.admin-bar header.bw-header .bw-mobile-toggle[aria-expanded="true"],
  html body.admin-bar header.bw-header div.bw-header-actions .bw-mobile-toggle.open,
  html body.admin-bar header.bw-header div.bw-header-actions .bw-mobile-toggle[aria-expanded="true"] {
    top: 58px !important;             /* 46 admin-bar + 12 padding */
  }

  /* Toggle X span styles (überschreibt evtl. v10) */
  html body header.bw-header .bw-mobile-toggle[aria-expanded="true"] span,
  html body header.bw-header div.bw-header-actions .bw-mobile-toggle[aria-expanded="true"] span {
    width: 20px !important;
    height: 2px !important;
    background-color: #FAFAFA !important;
    border-radius: 2px !important;
    transition: transform .25s ease, opacity .25s ease !important;
  }
  html body header.bw-header .bw-mobile-toggle[aria-expanded="true"] span:nth-child(1),
  html body header.bw-header div.bw-header-actions .bw-mobile-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  html body header.bw-header .bw-mobile-toggle[aria-expanded="true"] span:nth-child(2),
  html body header.bw-header div.bw-header-actions .bw-mobile-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0 !important;
  }
  html body header.bw-header .bw-mobile-toggle[aria-expanded="true"] span:nth-child(3),
  html body header.bw-header div.bw-header-actions .bw-mobile-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* ── (3) Menu padding-top wenn admin-bar (sodass Mahlwerk-Bar
            unterhalb von admin-bar startet) ── */
  html body.admin-bar .bw-mobile-menu {
    padding-top: 46px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 13 (2026-04-19) — Real Close-Button Styling
   ───────────────────────────────────────────────────────────────────────
   Echter <button class="bw-menu-close-x"> wird vom JS in .bw-mobile-menu-inner
   als ERSTES child injiziert. Hier nur das Styling.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Original Toggle-X im Header SOFORT verstecken wenn Menu offen
        (wir nutzen nur den injizierten Close-Button) ── */
  html body header.bw-header .bw-mobile-toggle.open,
  html body header.bw-header .bw-mobile-toggle[aria-expanded="true"],
  html body header.bw-header div.bw-header-actions .bw-mobile-toggle.open,
  html body header.bw-header div.bw-header-actions .bw-mobile-toggle[aria-expanded="true"] {
    display: none !important;
    visibility: hidden !important;
  }

  /* ── Close-Button: rechts oben in der Mahlwerk-Bar des Menus ── */
  html body .bw-mobile-menu .bw-menu-close-x {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 50% !important;
    color: #FAFAFA !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
    transition: background .2s, border-color .2s, transform .15s !important;
    font-family: 'DM Sans', sans-serif !important;
  }
  html body .bw-mobile-menu .bw-menu-close-x:hover,
  html body .bw-mobile-menu .bw-menu-close-x:focus {
    background: rgba(184, 115, 51, 0.18) !important;
    border-color: rgba(184, 115, 51, 0.6) !important;
    color: #D4956B !important;
    outline: none !important;
  }
  html body .bw-mobile-menu .bw-menu-close-x:active {
    transform: scale(0.95) !important;
  }

  /* Wenn admin-bar (WP), Close-Button nach unten verschieben sodass
     er nicht hinter der admin-bar verschwindet */
  html body.admin-bar .bw-mobile-menu .bw-menu-close-x {
    top: 56px !important;       /* 46 admin-bar + 10 padding */
  }

  /* Mahlwerk-Bar im Menu: position:relative damit absolute Close-Button
     drin positioniert werden kann */
  html body .bw-mobile-menu .bw-mobile-menu-inner {
    position: relative !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 14 (2026-04-19) — WARENKORB Centering + Clean X Icon
   ───────────────────────────────────────────────────────────────────────
   Problems:
   - "WARENKORB"-Text war optisch links vom Zentrum weil Badge "1"
     (22px breit) im flex-justify-center mitgerechnet wurde
   - ✕ (U+2715) Symbol sah chunky aus → durch SVG-Lines ersetzt
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── (1) WARENKORB-CTA: Text TRUE-zentriert, Badge absolute rechts ── */
  html body .bw-mobile-menu .bw-mobile-cart-link {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0 !important;
    padding: 14px 56px !important;        /* 56 rechts = Platz für Badge */
  }
  html body .bw-mobile-menu .bw-mobile-cart-link .bw-cart-count {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }

  /* ── (2) Close-Button: SVG-Icon styling (kein Text mehr) ── */
  html body .bw-mobile-menu .bw-menu-close-x svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
  /* Cleanere Border + sanfter Hintergrund */
  html body .bw-mobile-menu .bw-menu-close-x {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #FAFAFA !important;
    font-size: 0 !important;                /* kein Text-Render */
  }
  html body .bw-mobile-menu .bw-menu-close-x:hover,
  html body .bw-mobile-menu .bw-menu-close-x:focus {
    background: rgba(184, 115, 51, 0.15) !important;
    border-color: rgba(212, 149, 107, 0.65) !important;
    color: #D4956B !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 15 (2026-04-19) — Visual-Bug-Cleanup
   ───────────────────────────────────────────────────────────────────────
   Bugs nach v14:
   1. Menu-WARENKORB-CTA: width 100% + margin-left/right 24 → overflowt
      um 24px nach rechts → User sieht's "nach rechts verschoben"
   2. Cart-Page "WARENKORB AKTUALISIEREN" Button schmaler als
      "GUTSCHEIN ANWENDEN" → asymmetrisch, wirkt broken
   3. Großer Vertical-Gap zwischen Cart-Items-Card + Warenkorb-Summe-Card
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── (1) Menu WARENKORB-CTA: korrekte Breite mit Margin ── */
  html body .bw-mobile-menu .bw-mobile-cart-link {
    width: auto !important;               /* statt 100% */
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 32px 24px 24px !important;    /* Margin als äußerer Abstand */
    padding: 14px 56px !important;        /* 56 für Badge-Platz rechts */
    position: relative !important;
  }

  /* ── (2) Cart-Page: "WARENKORB AKTUALISIEREN" Button gleiche Breite
            wie Coupon-Block ── */
  html body.woocommerce-cart table.shop_table.cart .actions button[name="update_cart"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  /* td.actions: Container füllt full-width damit Button auch full ist */
  html body.woocommerce-cart table.shop_table.cart tbody tr td.actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 16px !important;
    gap: 10px !important;
  }
  /* Coupon-Section ist Sub-Container im actions, ebenfalls stretch */
  html body.woocommerce-cart table.shop_table.cart .actions .coupon {
    width: 100% !important;
    margin: 0 !important;
  }

  /* ── (3) Cart-Items-Card und Warenkorb-Summe näher zusammen ── */
  html body.woocommerce-cart .woocommerce-cart-form {
    margin-bottom: 0 !important;
  }
  html body.woocommerce-cart .cart-collaterals {
    margin-top: 12px !important;          /* statt 16, kompakter */
  }
  html body.woocommerce-cart div.woocommerce {
    gap: 12px !important;                  /* zwischen den beiden Cards */
  }

  /* ── (4) Optional Polish: Cart-Items-Card und Summen-Card haben
            jetzt visuell konsistente Border-Radii ── */
  html body.woocommerce-cart table.shop_table.cart {
    border-radius: 10px !important;
    margin-bottom: 0 !important;
  }
  html body.woocommerce-cart .cart_totals {
    border-radius: 10px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 16 (2026-04-19) — Homepage Visual-Bug-Audit
   ───────────────────────────────────────────────────────────────────────
   Bugs identifiziert nach systematischem Audit der Startseite (414×896):

   Layout-Map (vor Fix):
   - bw-hero:        148-1143  (h=995)  — OK
   - bw-trust-bar:   1143-1206 (h=63)   — OK
   - bw-brands:      1206-1446 (h=240)  — OK
   - bw-topseller:   1446-2458 (h=1012) — Padding zu groß, Container 803px in Section 1012
   - bw-pt:          2458-4576 (h=2118) — HUGE: 3 Cards mit ~700px (Image ~600px)
   - bw-testimonials:4576-5691 (h=1115) — etwas zu groß
   - bw-cta:         5691-6130 (h=439)  — fast unsichtbar (#111 auf #0d0d0d)
   - bw-cro-0:       6130-8398 (h=2268) — 9 Cards in 2-col, sehr lang
   - bw-cro-1:       8398-10666(h=2268) — same

   Page-Total: 12716px = 14 Viewports → zu viel Scroll
   Card-BG rgba(255,255,255,0.03) fast unsichtbar im JPEG.
   Banner überdeckt mehrfach Card-Inhalte.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── (1) bw-pt "Preisklassen" — Cards kompakter ── */
  html body .bw-pt {
    padding: 40px 0 !important;
  }
  html body .bw-pt .bw-container {
    padding: 0 16px !important;
  }
  html body .bw-pt__title,
  html body .bw-pt h2 {
    font-size: clamp(1.4rem, 6vw, 1.8rem) !important;
    margin-bottom: 24px !important;
  }
  /* Card-Bilder begrenzen */
  html body .bw-pt__card,
  html body .bw-pt-card {
    margin-bottom: 16px !important;
  }
  html body .bw-pt__card img,
  html body .bw-pt-card img,
  html body .bw-pt .bw-pt__card img,
  html body .bw-pt > .bw-container > * img {
    max-height: 200px !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
  }
  /* Card-Image-Wrap */
  html body .bw-pt__card-image,
  html body .bw-pt__image,
  html body .bw-pt__card > a,
  html body .bw-pt__card > div:first-child {
    max-height: 220px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Text-Bereich kompakter */
  html body .bw-pt__card-content,
  html body .bw-pt__card-body,
  html body .bw-pt__card > div:not(:first-child) {
    padding: 16px !important;
  }

  /* ── (2) bw-topseller padding-bottom — Container 803, Section 1012 = 209px Lücke ── */
  html body .bw-topseller {
    padding: 40px 0 32px !important;
  }
  html body .bw-topseller__container {
    padding: 0 !important;
  }
  html body .bw-topseller__header {
    margin-bottom: 24px !important;
    padding: 0 16px !important;
  }
  html body .bw-topseller__cta,
  html body .bw-topseller a[href*="shop"]:last-child {
    margin: 24px 16px 0 !important;
  }

  /* ── (3) bw-cta "Beratung" — sichtbarer Hintergrund ── */
  html body .bw-cta {
    padding: 48px 0 !important;
    background: linear-gradient(180deg, rgba(184, 115, 51, 0.05) 0%, rgba(17, 17, 17, 0.95) 100%) !important;
    border-top: 1px solid rgba(184, 115, 51, 0.15) !important;
    border-bottom: 1px solid rgba(184, 115, 51, 0.15) !important;
  }
  html body .bw-cta h2,
  html body .bw-cta__title {
    font-size: clamp(1.4rem, 5.5vw, 1.7rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }
  html body .bw-cta p,
  html body .bw-cta__text {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }

  /* ── (4) bw-cro Sections (Neueste Modelle / Kundenempfehlungen) ── */
  html body .bw-cro-sec {
    padding: 40px 0 !important;
  }
  html body .bw-cro-sec > div:first-child {
    padding: 0 16px !important;
  }
  html body .bw-cro-sec h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.7rem) !important;
    margin: 8px 0 24px !important;
  }
  /* CRO-Grid: 2 columns mit gutem gap */
  html body .bw-cro-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  /* Card-Bild kleiner */
  html body .bw-ts-card .bw-ts-card__img-wrap {
    aspect-ratio: 1 / 1 !important;
    padding: 8px !important;
  }
  html body .bw-ts-card .bw-ts-card__img-wrap img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
  /* Card-Padding kompakter */
  html body .bw-ts-card,
  html body .bw-cro-grid > .bw-ts-card {
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(184, 115, 51, 0.12) !important;
    border-radius: 12px !important;
  }
  /* Text in card kompakter */
  html body .bw-ts-card .bw-ts-card__name {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin: 4px 0 6px !important;
  }
  html body .bw-ts-card .bw-ts-card__brand {
    font-size: 11px !important; /* QA-0706b [tiny-fonts]: war 9px */
  }
  html body .bw-ts-card .bw-ts-card__prices,
  html body .bw-ts-card .bw-ts-card__prices > * {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
  html body .bw-ts-card .bw-btn,
  html body .bw-ts-card a[class*="btn"] {
    padding: 9px 12px !important;
    font-size: 12px !important;
    min-height: 38px !important;
  }
  /* Section "Alle bestbewerteten →" CTA tighten */
  html body .bw-cro-sec > div > div:last-child {
    margin-top: 20px !important;
  }
  html body .bw-cro-sec a[href*="shop"] {
    font-size: 13px !important;
    padding: 10px 20px !important;
  }

  /* ── (5) bw-testimonials — kompakter ── */
  html body .bw-testimonials {
    padding: 40px 0 !important;
  }
  html body .bw-testimonials h2,
  html body .bw-testimonials__title {
    font-size: clamp(1.4rem, 5.5vw, 1.7rem) !important;
    margin-bottom: 24px !important;
  }
  html body .bw-testimonials__card,
  html body .bw-testimonials .testimonial-card {
    padding: 20px !important;
    margin-bottom: 12px !important;
  }
  html body .bw-testimonials__card-text,
  html body .bw-testimonials blockquote {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* ── (6) bw-brands kompakter ── */
  html body .bw-brands {
    padding: 32px 0 !important;
  }
  html body .bw-brands h2 {
    font-size: clamp(1.3rem, 5vw, 1.6rem) !important;
    margin-bottom: 20px !important;
  }

  /* ── (7) Generic section padding cap ── */
  html body main > section,
  html body .bw-section {
    padding-block: max(32px, var(--bw-section-pad-y, 40px)) !important;
  }

  /* ── (8) Header-Beratung Promo-Strip auch sichtbar machen ── */
  /* (kein Fix nötig — auf der Cart-Page schon visible) */

  /* ── (9) Bestseller-Card Button "Zum Produkt" konsistente Optik ── */
  html body .bw-ts-card .bw-btn--primary {
    background: var(--bw-copper, #B87333) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
  }

  /* ── (10) Footer stacked alignment ── */
  html body .bw-footer .bw-footer-grid > * {
    text-align: left !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 17 (2026-04-19) — Header, Trust-Bar Cutoff, Verkostung-Banner
   ───────────────────────────────────────────────────────────────────────
   Bugs:
   1. Header bei Scroll wirkt "halb in der Luft":
      - rgba(14,14,16,0.85) translucent + backdrop-blur(20px) → Content
        scheint durch → User sieht keinen sauberen Container
      - Kein bottom-border → optisch unverankert
   2. Trust-Bar 2. Item "Autorisierter Fachhändler" rechts abgeschnitten:
      - Track scrollW=1045 vs viewport=414, items overflow ohne snap/
        scrollbar → User sieht's als bug, nicht als scroll
   3. Verkostung-Banner inline-styled, wirkt unfertig:
      - PHP setzt 100% inline-style → keine Hover/Polish
      - Layout-flex-wrap ohne Strukturierung
      - "Termin buchen" Button visually disconnected
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── (1) Header: solider, mit klarer Bottom-Kante ── */
  html body header.bw-header {
    background: rgba(13, 13, 13, 0.96) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
    border-bottom: 1px solid rgba(184, 115, 51, 0.12) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
  }
  html body header.bw-header.scrolled {
    background: rgba(10, 10, 10, 0.98) !important;
    border-bottom-color: rgba(184, 115, 51, 0.20) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  }
  /* Announce-Bar: wenn collapsed, komplett aus dem Layout */
  html body .bw-announce.collapsed {
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: none !important;
  }

  /* ── (2) Trust-Bar: scroll-snap mit sichtbarer Indikator-Bar ── */
  html body .bw-trust-bar {
    padding: 28px 0 !important;
  }
  html body .bw-trust-bar__track {
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 18px !important;
    padding: 4px 16px 14px !important;
    margin: 0 !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(184, 115, 51, 0.55) transparent;
  }
  html body .bw-trust-bar__track::-webkit-scrollbar {
    height: 3px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 2px;
  }
  html body .bw-trust-bar__track::-webkit-scrollbar-thumb {
    background: rgba(184, 115, 51, 0.65);
    border-radius: 2px;
  }
  html body .bw-trust-bar__item {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    padding: 10px 14px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(184, 115, 51, 0.15) !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    font-size: 12.5px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* ── (3) Verkostung-Banner: polished design ── */
  html body #bw-vk-banner {
    background: linear-gradient(180deg, rgba(20, 16, 14, 0.97) 0%, rgba(13, 13, 13, 0.98) 100%) !important;
    border-top: 1px solid rgba(184, 115, 51, 0.30) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4), 0 -1px 0 rgba(184, 115, 51, 0.1) inset !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    padding: 12px 48px 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }
  /* Coffee-Icon prominenter machen */
  html body #bw-vk-banner > span:first-child::before {
    content: "" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(184, 115, 51, 0.18) !important;
    border: 1px solid rgba(184, 115, 51, 0.45) !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D4956B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8h1a4 4 0 0 1 0 8h-1'/><path d='M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z'/><line x1='6' y1='1' x2='6' y2='4'/><line x1='10' y1='1' x2='10' y2='4'/><line x1='14' y1='1' x2='14' y2='4'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
  /* Hide the existing emoji ☕ */
  html body #bw-vk-banner > span:first-child {
    font-size: 0 !important;             /* hides existing emoji */
    line-height: 1 !important;
    flex: 1 1 auto !important;
    min-width: 180px !important;
    display: flex !important;
    align-items: center !important;
  }
  html body #bw-vk-banner > span:first-child > strong,
  html body #bw-vk-banner > span:first-child {
    font-size: 0 !important;
  }
  /* Re-render text via custom span — but we can't add element via CSS... */
  /* Alternative: just keep text but with styled wrapper */
  html body #bw-vk-banner > span:first-child > * {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  html body #bw-vk-banner > span:first-child {
    font-size: 13px !important;          /* override the 0 — we'll just hide ☕ via text-indent trick */
    overflow: visible !important;
  }
  /* Hide ::first-letter ☕ via gradient mask is too complex — alternative:
     just leave the emoji but make banner look more polished overall */

  html body #bw-vk-banner > span:first-child {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.78) !important;
    line-height: 1.4 !important;
  }
  html body #bw-vk-banner > span:first-child strong {
    color: #FAFAFA !important;
    font-weight: 700 !important;
    letter-spacing: 0.005em !important;
  }
  /* CTA button polishing */
  html body #bw-vk-banner a[href*="#termin"],
  html body #bw-vk-banner a[href*="termin"] {
    background: linear-gradient(180deg, #D4956B 0%, #B87333 100%) !important;
    color: #1a1410 !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(184, 115, 51, 0.35), 0 1px 0 rgba(255, 255, 255, 0.15) inset !important;
    transition: transform .15s, box-shadow .15s !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  html body #bw-vk-banner a[href*="#termin"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(184, 115, 51, 0.5), 0 1px 0 rgba(255, 255, 255, 0.2) inset !important;
  }
  /* Close-Button polish */
  html body #bw-vk-banner button {
    width: 32px !important;
    height: 32px !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background .2s, color .2s !important;
  }
  html body #bw-vk-banner button:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #FAFAFA !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 18 (2026-04-19) — Verkostung-Banner: Text wiederherstellen
   ───────────────────────────────────────────────────────────────────────
   Patch 17 hat font-size:0 auf den ersten span gesetzt um die ☕-Emoji
   zu verstecken — versehentlich auch den Text "Kostenlose Verkostung in
   Hamburg" mit ausgeblendet. Reset.
   Stattdessen: ☕-Emoji einfach LASSEN (auch nicht störend) ODER per
   first-letter clip wenn möglich. Hier: zurücksetzen.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Reset font-size:0 vom Patch 17 ── */
  html body #bw-vk-banner > span:first-child,
  html body #bw-vk-banner > span:first-child > * {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.78) !important;
  }
  html body #bw-vk-banner > span:first-child {
    flex: 1 1 200px !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
  html body #bw-vk-banner > span:first-child strong {
    font-size: 13.5px !important;
    color: #FAFAFA !important;
    font-weight: 700 !important;
    margin-right: 4px !important;
  }
  /* ::before Pseudo (Coffee-Icon) bleibt vom Patch 17 — stelle sicher dass display korrekt ist */
  html body #bw-vk-banner > span:first-child::before {
    margin-right: 12px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 19 (2026-04-19) — Shop-Page Polish
   ───────────────────────────────────────────────────────────────────────
   Shop /shop/ Audit-Findings:
   - Hero-Padding zu groß, Headline könnte tighter
   - Result-Count + Filter+Sort nicht harmonisch im Layout
   - Search-Input lose unter dem Toolbar (sollte im Toolbar oder
     gar nicht visuell präsent sein)
   - Pagination braucht Polish
   - Cards einheitlich, aber Image-Bereich könnte besser sein
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── (1) Shop-Hero kompakter, klare Hierarchie ── */
  html body .bw-shop-hero {
    padding: 24px 16px 20px !important;
    background: linear-gradient(180deg, rgba(184,115,51,0.04) 0%, rgba(13,13,13,0) 100%) !important;
    border-bottom: 1px solid rgba(184, 115, 51, 0.08) !important;
  }
  html body .bw-shop-hero__label,
  html body .bw-shop-hero .bw-section-label {
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 6px !important;
    color: var(--bw-copper, #B87333) !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
  }
  html body .bw-shop-hero__title,
  html body .bw-shop-hero h1 {
    font-size: clamp(1.65rem, 6.5vw, 2rem) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    overflow-wrap: break-word !important;
  }
  html body .bw-shop-hero__description,
  html body .bw-shop-hero p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin: 10px 0 0 !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }
  html body .bw-shop-hero .bw-container {
    padding: 0 !important;
  }

  /* ── (2) Breadcrumb tighter ── */
  html body .bw-breadcrumbs,
  html body .woocommerce-breadcrumb,
  html body nav.bw-breadcrumbs {
    padding: 14px 16px 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
  }

  /* ── (3) Shop-Toolbar: Result-Count + Filter+Sort als visuelle Einheit ── */
  html body .bw-shop-toolbar {
    padding: 16px 16px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    border-bottom: none !important;
  }
  html body .bw-shop-toolbar__count,
  html body .woocommerce-result-count {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
  html body .bw-shop-toolbar__ordering,
  html body .woocommerce-ordering {
    margin: 0 !important;
  }
  /* Filter + Sort row */
  html body .bw-shop-toolbar form,
  html body .bw-shop-toolbar .filter-toggle-row,
  html body .bw-shop-toolbar > div:has(button.filter-toggle),
  html body .bw-shop-toolbar .bw-shop-toolbar__row {
    display: flex !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  /* Filter Button polish */
  html body .bw-shop-toolbar button.filter-toggle,
  html body .bw-shop-toolbar .bw-filter-toggle,
  html body button[class*="filter"] {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--bw-text, #E8E0D8) !important;
    border: 1px solid rgba(184, 115, 51, 0.25) !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: background .2s, border-color .2s !important;
  }
  html body .bw-shop-toolbar button.filter-toggle:hover,
  html body .bw-shop-toolbar .bw-filter-toggle:hover {
    background: rgba(184, 115, 51, 0.12) !important;
    border-color: rgba(184, 115, 51, 0.5) !important;
  }
  /* Sort dropdown polish */
  html body .bw-shop-toolbar .woocommerce-ordering select,
  html body .woocommerce-ordering select {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--bw-text, #E8E0D8) !important;
    border: 1px solid rgba(184, 115, 51, 0.25) !important;
    border-radius: 8px !important;
    padding: 10px 36px 10px 14px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    min-height: 44px !important;
    flex: 1 !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23D4956B' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
  }

  /* ── (4) Shop-Search Input: integriert + kompakter ── */
  html body .bw-shop-search,
  html body input[type="search"]:not(.search-field):not([name="s"]),
  html body input[placeholder*="suchen"],
  html body input[placeholder*="Kaffeevollautomat"] {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--bw-text, #E8E0D8) !important;
    border: 1px solid rgba(184, 115, 51, 0.20) !important;
    border-radius: 8px !important;
    padding: 11px 14px 11px 38px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    width: calc(100% - 32px) !important;
    margin: 12px 16px 0 !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
  }
  html body .bw-shop-search:focus,
  html body input[placeholder*="suchen"]:focus {
    border-color: rgba(184, 115, 51, 0.55) !important;
    outline: none !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
  }
  html body input[placeholder*="suchen"]::placeholder,
  html body .bw-shop-search::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
  }

  /* ── (5) Products-Grid: nur padding-top reduziert ── */
  html body .bw-products-grid {
    padding-top: 16px !important;
  }
  html body.woocommerce ul.products,
  html body .bw-products-grid ul.products {
    gap: 14px !important;
  }

  /* ── (6) Produktkarte — Image-Bereich schöner ── */
  html body .woocommerce ul.products li.product,
  html body ul.products li.product {
    transition: transform .2s, border-color .2s, box-shadow .2s !important;
  }
  html body .woocommerce ul.products li.product:hover,
  html body ul.products li.product:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(184, 115, 51, 0.35) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  }
  html body .woocommerce ul.products li.product a img,
  html body ul.products li.product img.attachment-woocommerce_thumbnail {
    aspect-ratio: 4 / 3 !important;          /* 16:9-ähnlich, nicht 1:1 */
    background: linear-gradient(180deg, #fafafa 0%, #f0f0f0 100%) !important;
    padding: 14px !important;
  }

  /* ── (7) Pagination polish ──
     QA-0706: Wrapper UND inneres nav trugen dieselbe Box (doppelter Rahmen);
     8×40px-Buttons in nowrap-ul überlappten sich. Box nur noch am nav,
     Wrapper nackt, ul darf umbrechen. */
  html body .bw-shop-pagination {
    margin: 24px 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  html body nav.woocommerce-pagination,
  html body .woocommerce-pagination {
    margin: 0 !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(184, 115, 51, 0.10) !important;
  }
  html body nav.woocommerce-pagination ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body nav.woocommerce-pagination ul li {
    float: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  html body nav.woocommerce-pagination ul li a,
  html body nav.woocommerce-pagination ul li span {
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }
  html body nav.woocommerce-pagination ul li span.current {
    background: var(--bw-copper, #B87333) !important;
    color: #fff !important;
  }

  /* ── (8) Filter-Drawer (wenn ausgelöst): ist im base mobile.css schon
            als bottom-sheet konfiguriert. Nur visual polish. ── */
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 20 (2026-04-19) — Shop-Layout Overflow Fix
   ───────────────────────────────────────────────────────────────────────
   Bug: .bw-shop-layout hat `display: grid; grid-template-columns: 475px`
        (Desktop-Sidebar-Layout) → bw-shop-main wird 475px breit obwohl
        der Container nur 428px hat → Karten + Buttons rechts geclippt.
   Fix: Auf Mobile single-column auto/1fr.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  html body .bw-shop-layout,
  html body div.bw-shop-layout {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .bw-shop-main,
  html body div.bw-shop-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body .bw-products-grid,
  html body div.bw-products-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* Falls Sidebar im DOM, auf Mobile nur als bottom-sheet (schon im Patch),
     sonst block-stack OR display:none beim normalen Render */
  html body .bw-shop-sidebar:not(.is-open) {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 21 (2026-04-19) — Header Solid + Banner-Icon entfernen
   ───────────────────────────────────────────────────────────────────────
   Bugs:
   1. Header backdrop-filter blur + 0.96-opacity → Card-Inhalt schimmert
      durch beim Scroll → wirkt wie ein gebrochener Bar-Overlay
   2. ::before Coffee-Icon-Kreis im Verkostung-Banner soll weg (User
      mag clean Look ohne Icon)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── (1) Header: komplett solid, kein blur, klare Trennlinie ── */
  html body header.bw-header,
  html body header.bw-header.scrolled {
    background: #0D0D0D !important;          /* fully solid */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(184, 115, 51, 0.18) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  }

  /* ── (2) Verkostung-Banner: Coffee-Icon-Kreis komplett entfernen ── */
  html body #bw-vk-banner > span:first-child::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
  }
  /* Span jetzt linkbündig ohne Icon-Padding */
  html body #bw-vk-banner > span:first-child {
    padding-left: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 22 (2026-04-19) — Header top:0 auf Mobile (Admin-Bar absolute)
   ───────────────────────────────────────────────────────────────────────
   Bug: WP-Admin-Bar ist auf Mobile `position: absolute` (scrollt weg)
        aber Header bleibt `top: 46px` fixed → leerer 46px Gap oben
        sobald User scrollt → wirkt schwebend/komisch.
   Fix: Auf Mobile Header IMMER top: 0 (egal ob admin-bar). Wenn
        admin-bar im Scroll-Zustand sowieso weg ist, überlappt nichts.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Header ALWAYS top:0 on mobile (overrides body.admin-bar offset) */
  html body header.bw-header,
  html body header.bw-header.scrolled,
  html body.admin-bar header.bw-header,
  html body.admin-bar header.bw-header.scrolled {
    top: 0 !important;
  }
  /* Announce-Bar auch top:0 wenn sichtbar (nicht collapsed) */
  html body .bw-announce:not(.collapsed),
  html body.admin-bar .bw-announce:not(.collapsed) {
    top: 0 !important;
  }
  /* Wenn collapsed, raus aus dem Layout */
  html body .bw-announce.collapsed,
  html body.admin-bar .bw-announce.collapsed {
    top: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
  }

  /* Body-Padding-Top damit Header die Hero nicht überdeckt initial
     (Hero hatte bisher genug spacing aber sicherheitshalber) */
  /* — kein expliziter padding-top nötig wenn Hero schon damit rechnet */
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 23 (2026-04-19) — WP-Admin-Bar Mobile Fix
   ───────────────────────────────────────────────────────────────────────
   Bug: WP-Admin-Bar `position: absolute; top: 0` (mobile) scrollt mit
        Page-Content weg. Mein bw-header `position: fixed; top: 0`
        bleibt sichtbar — aber bei scrollY=0 deckt admin-bar (z-index
        99999) den Header (z-index 1000) → Logo/Cart/Burger unsichtbar.
        Wenn dann scrolled, "springt" das Layout → wirkt komisch.

   Fix: Admin-Bar auf Mobile komplett ausblenden (User-Feedback +
        normale User sehen sie ohnehin nicht). Header dann durchgehend
        sichtbar bei top:0 ohne Konflikt.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  html body.admin-bar #wpadminbar {
    display: none !important;
  }
  /* Body padding-top reset (WP setzt 32-46px für Admin-Bar) */
  html body.admin-bar,
  html body.admin-bar.no-customize-support {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* HTML margin-top reset (WP CSS setzt margin-top: 46px !important auf html) */
  html.admin-bar,
  html body.admin-bar > html {
    margin-top: 0 !important;
  }
}

/* WP setzt margin-top auf html für admin-bar — auf mobile resetten */
@media screen and (max-width: 782px) {
  html[class*="admin-bar"],
  html.wp-admin,
  body.admin-bar {
    margin-top: 0 !important;
  }
  /* WP-Core spezifische Selectoren */
  html[lang] {
    margin-top: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 24 (2026-04-19) — Header-Position bei Announce-Bar + Logo größer
   ───────────────────────────────────────────────────────────────────────
   Bugs:
   1. Announce-Bar `position: fixed; top: 0; z-index: 10001` überdeckt
      die obere Hälfte des Header-Logos bei top:0
      → "Mahlwerk." wirkt halb abgeschnitten am Top of Page
   2. Logo etwas zu klein (17.6px) — User wünscht größer
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── (1) Header-Position folgt Announce-Bar State ── */
  /* Announce-Bar visible (default): Header bei top: 28 (= announce-height) */
  html body header.bw-header,
  html body header.bw-header.scrolled {
    top: 28px !important;
    transition: top .3s ease !important;
  }
  /* Announce-Bar collapsed: Header zu top: 0 */
  html body.announce-collapsed header.bw-header,
  html body.announce-collapsed header.bw-header.scrolled,
  html body:has(.bw-announce.collapsed) header.bw-header,
  html body:has(.bw-announce.collapsed) header.bw-header.scrolled {
    top: 0 !important;
  }
  /* Announce-Bar selbst sichtbar bei top: 0 */
  html body .bw-announce {
    top: 0 !important;
  }

  /* ── (2) Logo größer + bessere Hierarchie ── */
  html body header.bw-header .bw-logo {
    font-size: 24px !important;
    letter-spacing: -0.015em !important;
    line-height: 1 !important;
  }
  /* Header etwas höher damit Logo gut atmet */
  html body header.bw-header {
    padding-block: 16px !important;
  }
  html body header.bw-header .bw-container {
    min-height: 52px !important;
    align-items: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 25 (2026-04-19) — Header-Top Specificity Fix
   ───────────────────────────────────────────────────────────────────────
   Patch 24's `html body header.bw-header { top: 28 }` (Specificity 0,1,4)
   verliert gegen Patch 22's `html body.admin-bar header.bw-header
   { top: 0 }` (Specificity 0,2,4). Brauche höhere Specificity.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Header bei top: 28 (nach Announce-Bar) — höhere Specificity ── */
  html body header.bw-header.bw-header,
  html body header.bw-header.bw-header.scrolled,
  html body.admin-bar header.bw-header,
  html body.admin-bar header.bw-header.scrolled,
  html body:not(.announce-collapsed) header.bw-header,
  html body:not(.announce-collapsed) header.bw-header.scrolled {
    top: 28px !important;
  }
  /* Wenn Announce collapsed → Header zu top: 0 */
  html body.announce-collapsed header.bw-header,
  html body.announce-collapsed header.bw-header.scrolled,
  html body.announce-collapsed.admin-bar header.bw-header {
    top: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 26 (2026-04-19) — Product-Page Tabs (Mobile)
   ───────────────────────────────────────────────────────────────────────
   Bug: WooCommerce-Tabs (Beschreibung / Zusätzliche Informationen /
        Rezensionen) sind als Flex-Row mit overflow-x: auto. Bei
        viewport=414, Total=548 → "Rezensionen" rechts unsichtbar.
        User muss horizontal scrollen, ohne sichtbaren Hinweis.

   Fix: Tabs als 3-spaltiges Grid mit gleicher Breite. Jeder Tab kompakt
        (kürzeres Label oder Truncate). Bottom-Border-Indikator für
        active. Sticky-feel, klar dass es 3 Tabs sind.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Tab-Container: 3-Col-Grid, gleiche Breite, keine Überlauf ── */
  html body .woocommerce div.product .woocommerce-tabs ul.tabs,
  html body .wc-tabs,
  html body .woocommerce-tabs ul.tabs,
  html body ul.tabs.wc-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    list-style: none !important;
    border-bottom: 1px solid rgba(184, 115, 51, 0.20) !important;
  }

  /* ── Tab-Item: gleichbreit, kompakter Padding ── */
  html body .woocommerce div.product .woocommerce-tabs ul.tabs li,
  html body .wc-tabs li,
  html body .woocommerce-tabs ul.tabs li {
    flex: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    list-style: none !important;
    text-align: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* ── Tab-Link: kompakt, lesbar, truncate-friendly ── */
  html body .woocommerce div.product .woocommerce-tabs ul.tabs li a,
  html body .wc-tabs li a,
  html body .woocommerce-tabs ul.tabs li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 12px 6px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
    text-align: center !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-bottom: 2px solid transparent !important;
    transition: color .2s, border-color .2s, background-color .2s !important;
    margin: 0 !important;
    min-height: 44px !important;
  }

  /* Active state */
  html body .woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
  html body .wc-tabs li.active a,
  html body .woocommerce-tabs ul.tabs li.active a {
    color: var(--bw-copper-lt, #D4956B) !important;
    border-bottom-color: var(--bw-copper, #B87333) !important;
    background: rgba(184, 115, 51, 0.05) !important;
  }

  /* Hover */
  html body .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--bw-text, #E8E0D8) !important;
    background: rgba(255, 255, 255, 0.03) !important;
  }

  /* ── Label-Shortening via CSS-content (Trick mit data-attribute) ──
        WooCommerce hat fest "Beschreibung", "Zusätzliche Informationen",
        "Rezensionen (N)". Wir kürzen "Zusätzliche Informationen" →
        "Details" via JS-Hack (siehe functions.php) ODER lassen das
        Label und nutzen text-overflow: ellipsis. ── */

  /* Tab-Panel content: padding tighter */
  html body .woocommerce div.product .woocommerce-Tabs-panel,
  html body .woocommerce div.product .woocommerce-tabs .panel,
  html body .woocommerce-Tabs-panel {
    padding: 16px 0 !important;
    margin: 0 !important;
  }
  html body .woocommerce-Tabs-panel h2 {
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 27 (2026-04-19) — Trust-Badges PDP entfernen
   ───────────────────────────────────────────────────────────────────────
   User-Request: SSL-verschlüsselt / Käuferschutz / Sichere Zahlung
   Trust-Badges auf Produkt-Seiten ausblenden (sind in Parent-Theme
   single-product.php fest verdrahtet, daher CSS-Hide).

   Auch desktop ausblenden — User wollte sie ganz weg.
   ═══════════════════════════════════════════════════════════════════════ */

html body .bw-sp-trust,
html body div.bw-sp-trust {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 28 (2026-04-19) — Product-Tabs: 2-Spalten (nach Details-Removal)
   ───────────────────────────────────────────────────────────────────────
   Patch v28 entfernt das Details-Tab in functions.php. Hier passen wir
   die Grid-Spalten von 3 auf 2 an damit Beschreibung + Rezensionen
   die volle Breite ausnutzen und nicht mehr truncated angezeigt werden.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  html body .woocommerce div.product .woocommerce-tabs ul.tabs,
  html body .wc-tabs,
  html body .woocommerce-tabs ul.tabs,
  html body ul.tabs.wc-tabs {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Tab-Text jetzt voll lesbar — etwas größer */
  html body .woocommerce div.product .woocommerce-tabs ul.tabs li a,
  html body .wc-tabs li a,
  html body .woocommerce-tabs ul.tabs li a {
    font-size: 12.5px !important;
    padding: 14px 8px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 29 (2026-04-19) — Mobile-Menu Close-X höher
   ───────────────────────────────────────────────────────────────────────
   X-Button war auf Höhe "Home" Item → user wollte höher.
   Plus admin-bar wurde in v23 versteckt → 56px-Offset für admin-bar
   nicht mehr nötig.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* X-Button auf Höhe der "Mahlwerk." Logo-Bar (top: 12) */
  html body .bw-mobile-menu .bw-menu-close-x,
  html body.admin-bar .bw-mobile-menu .bw-menu-close-x {
    top: 12px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 30 (2026-04-19) — Body padding-top für fixed Header + Announce
   ───────────────────────────────────────────────────────────────────────
   Bug: Announce (28px) + Header (85px) = 113px fixed oben, aber Body
        startet bei y:0 → Page-Title "Kaffeevollautomaten" verdeckt.
   Fix: Body padding-top so dass Content unter dem Header beginnt.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Body bekommt padding-top in Höhe von Announce + Header */
  html body {
    padding-top: 113px !important;
  }
  /* Wenn Announce collapsed: nur Header-Höhe (85px) */
  html body.announce-collapsed,
  html body:has(.bw-announce.collapsed) {
    padding-top: 85px !important;
  }
  /* Smooth transition wenn Announce-State wechselt */
  html body {
    transition: padding-top .3s ease !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 31 (2026-04-19) — Body-Padding für fixed Header (Specificity-Fix)
   ───────────────────────────────────────────────────────────────────────
   Patch v23 hat `body.admin-bar { padding-top: 0 }` → schlägt v30's
   `html body { padding-top: 113 }`. Selektor mit body.admin-bar matcht.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  html body,
  html body.admin-bar,
  html body.no-customize-support,
  html body.admin-bar.no-customize-support {
    padding-top: 113px !important;
    margin-top: 0 !important;
    transition: padding-top .3s ease !important;
  }
  /* Wenn Announce collapsed: nur Header-Höhe */
  html body.announce-collapsed,
  html body.admin-bar.announce-collapsed,
  html body:has(.bw-announce.collapsed),
  html body.admin-bar:has(.bw-announce.collapsed) {
    padding-top: 85px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 32 (2026-04-19) — Logo größer im Header
   ───────────────────────────────────────────────────────────────────────
   User: Header hat viel freien Raum, Logo größer machen.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  html body header.bw-header .bw-logo {
    font-size: 30px !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
  }
  /* Mahlwerk's Punkt-Akzent etwas absetzen damit's besser balanciert */
  html body header.bw-header .bw-logo .bw-logo-dot {
    margin-left: 1px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 33 (2026-04-19) — PDP Add-to-Cart Button Alignment
   ───────────────────────────────────────────────────────────────────────
   Bug: .bw-atc-link "IN DEN WARENKORB" Button: 252×44 mit margin 24
        und padding 40 horizontal → wirkt zentriert mit zu viel Luft
        außen, nicht aligned mit Qty-Selector.
   Fix: Full-width im Container, kleineres horizontal padding, höherer
        Touch-Target.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* v3: Menge + Button bilden EINE Reihe (Flex in pdp.css) —
     der Button füllt den Rest, kein Vollbreiten-Stack mehr. */
  html body .bw-atc-link,
  html body a.bw-atc-link.single_add_to_cart_button,
  html body .woocommerce div.product form.cart .button.bw-atc-link,
  html body .woocommerce div.product .single_add_to_cart_button.bw-atc-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
    margin: 0 !important;
    min-height: 52px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-align: center !important;
    border-radius: 8px !important;
  }
  /* Qty-Selector + Stock-Status auch klar links-aligned, nicht mit
     Button-Margin verschoben */
  html body .woocommerce div.product .quantity,
  html body .bw-sp-qty,
  html body div.quantity {
    margin-left: 0 !important;
  }
  /* "Auf Lager — Sofort lieferbar" Text auch left-aligned */
  html body .bw-sp-stock,
  html body .stock {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 34 (2026-04-19) — WC-Message auf Cart-Page ausblenden
   ───────────────────────────────────────────────────────────────────────
   Bug: Auf der Cart-Page erscheint die "Produkt wurde Warenkorb
        hinzugefügt"-Notice mit "Warenkorb anzeigen"-Button → User
        ist schon im Cart, Notice + Button sind redundant. Plus
        Layout bricht nach rechts aus (Notice w=433 > viewport=414).

   Fix: Komplettes .woocommerce-notices-wrapper auf Cart-Page hiden.
   ═══════════════════════════════════════════════════════════════════════ */

html body.woocommerce-cart .woocommerce-notices-wrapper,
html body.woocommerce-cart .woocommerce-message,
html body.woocommerce-cart .wc-block-components-notice-banner,
html body.woocommerce-cart div.woocommerce > .woocommerce-message,
html body.woocommerce-cart div.woocommerce > .woocommerce-notices-wrapper {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   PATCH 35 (2026-04-19) — Thank-You/Order-Details Table Overflow
   ───────────────────────────────────────────────────────────────────────
   Bug: Bestelldetails-Tabelle auf order-received page bricht nach
        rechts aus. table-layout: auto → Spalten richten sich nach
        Content. Lange Produktnamen drücken die rechte Spalte
        ("GESAMTSUMME", "Banküberweisung") aus dem Viewport.
   Fix: table-layout: fixed + word-break + tighter padding.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Outer wrapper padding reduzieren */
  html body.woocommerce-order-received .woocommerce-order-details,
  html body.woocommerce-order-received .woocommerce-customer-details,
  html body.woocommerce-view-order .woocommerce-order-details,
  html body.woocommerce-view-order .woocommerce-customer-details,
  html body.woocommerce-checkout.woocommerce-order-received .woocommerce-order-details {
    padding: 16px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Table fixed-layout + 100% Breite */
  html body.woocommerce-order-received table.shop_table,
  html body.woocommerce-view-order table.shop_table,
  html body.woocommerce-checkout.woocommerce-order-received table.shop_table {
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Table-Cells: word-break, tight padding */
  html body.woocommerce-order-received table.shop_table th,
  html body.woocommerce-order-received table.shop_table td,
  html body.woocommerce-view-order table.shop_table th,
  html body.woocommerce-view-order table.shop_table td {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    max-width: none !important;
    width: auto !important;
  }

  /* Header-Zeilen kleiner */
  html body.woocommerce-order-received table.shop_table thead th,
  html body.woocommerce-view-order table.shop_table thead th {
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  /* Rechte Spalte (Preis/Wert): rechtsbündig + nowrap auf Preise */
  html body.woocommerce-order-received table.shop_table th:last-child,
  html body.woocommerce-order-received table.shop_table td:last-child,
  html body.woocommerce-view-order table.shop_table th:last-child,
  html body.woocommerce-view-order table.shop_table td:last-child {
    text-align: right !important;
  }
  html body.woocommerce-order-received table.shop_table .woocommerce-Price-amount,
  html body.woocommerce-view-order table.shop_table .woocommerce-Price-amount {
    white-space: nowrap !important;
    font-size: 14px !important;
  }

  /* Tabellen-Section padding wegnehmen */
  html body.woocommerce-order-received section,
  html body.woocommerce-view-order section {
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    max-width: 100% !important;
  }

  /* Page main: ensure no horizontal overflow */
  html body.woocommerce-order-received,
  html body.woocommerce-view-order {
    overflow-x: hidden !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   v1.2 — Mobile- & Visual-Fixes (Audit Juni 2026, Jura-E8-Relaunch)
   Lädt als letzte Datei der Kaskade.
   ═══════════════════════════════════════════════════════════════ */

/* ── M1: Hero-Höhe stabil (iOS Adressleiste), Inner-Padding ── */
@media (max-width: 768px) {
  html body .bw-hero {
    height: auto !important;
    min-height: calc(100vh - 113px) !important;
    min-height: calc(100svh - 113px) !important;
  }
  html body .bw-hero__inner {
    height: auto !important;
    padding-top: 32px !important;
    padding-bottom: 24px !important;
  }
  html body .bw-hero__title {
    font-size: clamp(1.9rem, 8vw, 2.4rem) !important;
    line-height: 1.15 !important;
  }
  html body .bw-hero__desc,
  html body .bw-hero__sub {
    font-size: 0.95rem !important;
    margin-bottom: 1.4rem !important;
  }
}

/* ── M2: iOS-Zoom verhindern — alle fokussierbaren Felder ≥16px ── */
@media (max-width: 768px) {
  html body.woocommerce-checkout .form-row input[type="text"],
  html body.woocommerce-checkout .form-row input[type="email"],
  html body.woocommerce-checkout .form-row input[type="tel"],
  html body.woocommerce-checkout .form-row textarea,
  html body.woocommerce-checkout .form-row select {
    font-size: 16px !important;
  }
  html body.woocommerce-cart table.shop_table.cart .actions .coupon input#coupon_code,
  html body.woocommerce-cart table.shop_table.cart .actions .coupon input[name="coupon_code"] {
    font-size: 16px !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-quantity input.qty {
    font-size: 16px !important;
    width: 34px !important;
  }
  html body .bw-shop-toolbar .woocommerce-ordering select,
  html body .woocommerce-ordering select,
  html body .bw-shop-search {
    font-size: 16px !important;
  }
}

/* ── M3: Burger-Menü sichtbar in der 768–900px-Lücke ── */
@media (min-width: 768px) and (max-width: 900px) {
  html body .bw-mobile-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
  }
  html body .bw-mobile-toggle span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background-color: #E8E0D8 !important;
    border-radius: 2px !important;
    transition: transform .25s ease, opacity .25s ease !important;
  }
  html body .bw-mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  html body .bw-mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; }
  html body .bw-mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }
  html body .bw-mobile-menu { z-index: 9999 !important; }
}

/* ── M4: PDP — Verkostungs-Banner kollidiert mit Sticky-Warenkorb ── */
@media (max-width: 768px) {
  html body.single-product #bw-vk-banner { display: none !important; }
  html body.single-product { padding-bottom: 0 !important; }
  html body.single-product .bw-sp-cart-form {
    padding-bottom: calc(var(--bw-s-3, 12px) + env(safe-area-inset-bottom)) !important;
  }
}

/* ── M5: Hero-CTAs full-width stapeln (echte Klassen) ── */
@media (max-width: 768px) {
  html body .bw-hero__buttons,
  html body .bw-hero__actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  html body .bw-hero__buttons .bw-btn,
  html body .bw-hero__actions .bw-btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 52px !important;
  }
}

/* ── M6: Bestseller-Grid 2-spaltig statt 4000px-Scroll ── */
@media (max-width: 640px) {
  html body .bw-bestseller__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    max-width: none !important;
    margin: 0 !important;
  }
  html body .bw-bestseller__card-image { padding: 1rem !important; }
  html body .bw-bestseller__card-body { padding: 12px !important; }
  html body .bw-bestseller__card-name { font-size: 0.85rem !important; line-height: 1.3 !important; }
  html body .bw-bestseller__card-price { font-size: 0.95rem !important; }
  html body .bw-bestseller__card-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0.5rem 12px 12px !important;
    padding: 10px 8px !important;
    min-height: 44px !important;
    font-size: 0.8rem !important;
  }
}

/* ── M7: PDP Varianten-Select full-width, 48px, kein iOS-Zoom ── */
@media (max-width: 768px) {
  html body .bw-sp-cart-form .variations { margin-bottom: 8px !important; }
  html body .bw-sp-cart-form .variations th,
  html body .bw-sp-cart-form .variations td {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
  }
  html body .bw-sp-cart-form .variations select {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
    padding: 12px 14px !important;
  }
}

/* ── M8: PDP Galerie — Padding & swipebare Thumbnails ── */
@media (max-width: 768px) {
  html body .bw-sp-gallery img { padding: 12px !important; }
  html body .bw-sp-gallery .flex-control-thumbs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 0 12px 12px !important;
    scrollbar-width: none !important;
  }
  html body .bw-sp-gallery .flex-control-thumbs::-webkit-scrollbar { display: none !important; }
  html body .bw-sp-gallery .flex-control-thumbs li { flex: 0 0 56px !important; }
  html body .bw-sp-gallery .flex-control-thumbs li img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
    padding: 0 !important;
  }
}

/* ── M9: PDP Attribut-Tabellen gestapelt statt überlaufend ── */
@media (max-width: 768px) {
  html body.single-product .shop_attributes,
  html body.single-product .shop_attributes tbody { display: block !important; width: 100% !important; }
  html body.single-product .shop_attributes tr {
    display: block !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  html body.single-product .shop_attributes tr:last-child { border-bottom: none !important; }
  html body.single-product .shop_attributes th,
  html body.single-product .woocommerce-product-attributes-item__label {
    display: block !important;
    width: 100% !important;
    padding: 0 0 2px !important;
    border: none !important;
    background: transparent !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
  }
  html body.single-product .shop_attributes td,
  html body.single-product .woocommerce-product-attributes-item__value {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    font-size: 14px !important;
    word-break: break-word !important;
  }
  html body.single-product #tab-description table th,
  html body.single-product .bw-specs-table th {
    width: 45% !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
  html body.single-product #tab-description table td,
  html body.single-product .bw-specs-table td {
    padding: 10px 12px !important;
    font-size: 13px !important;
    word-break: break-word !important;
  }
}

/* ── M10: Announcement-Bar — sauber abschneiden statt überlaufen ── */
@media (max-width: 768px) {
  html body .bw-announce__track { max-width: 100% !important; }
  html body .bw-announce__msg {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    padding: 0 4px !important;
  }
}

/* ── M11: Hero-Trustpilot-Pille darf umbrechen ── */
@media (max-width: 480px) {
  html body .bw-hero__trust { padding: 0.5rem 0 !important; }
  html body .bw-hero__trust-inner,
  html body .bw-hero__trust > div {
    flex-wrap: wrap !important;
    justify-content: center !important;
    max-width: 100% !important;
    padding: 8px 16px !important;
    row-gap: 2px !important;
  }
}

/* ── M12: Echte 44px-Tap-Targets (Footer-Links, Warenkorb-Entfernen) ── */
@media (max-width: 768px) {
  html body .bw-footer-legal {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px 8px !important;
  }
  html body .bw-footer-legal a,
  html body .bw-footer-links a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 0 6px !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-remove a.remove {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
}

/* ═══ Visual-Polish (alle Viewports) ═══ */

/* V1: Produktbilder einheitlich auf heller Bildbühne */
html body .bw-bestseller__card-image { background: #f4f4f4 !important; }
html body .bw-ts-card__img-wrap { background: #f4f4f4 !important; }
@media (max-width: 767px) {
  html body .woocommerce ul.products li.product a img,
  html body ul.products li.product img.attachment-woocommerce_thumbnail {
    aspect-ratio: 1 / 1 !important;
    background: #f4f4f4 !important;
    padding: 12px !important;
  }
}

/* V2: Beratungs-CTA auch auf Desktop sichtbar (Kupfer-Tönung) */
@media (min-width: 768px) {
  html body .bw-cta {
    background: linear-gradient(180deg, rgba(200,149,108,0.05) 0%, rgba(17,17,17,0.95) 100%) !important;
    border-top: 1px solid rgba(200,149,108,0.15) !important;
    border-bottom: 1px solid rgba(200,149,108,0.15) !important;
  }
}

/* V3: Button-Konsistenz (Karten-CTAs, kein abgeschnittener Text) */
html body .woocommerce ul.products li.product .button,
html body .woocommerce ul.products li.product a.button,
html body ul.products li.product .button,
html body ul.products li.product .add_to_cart_button,
html body .bw-ts-card .bw-btn--primary {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  border-radius: var(--bw-r-sm, 8px) !important;
  white-space: normal !important;
  text-overflow: initial !important;
}

/* V4: Fokus-Indikatoren im Mobile-Menü wiederherstellen (A11y) */
@media (max-width: 900px) {
  html body .bw-mobile-menu a:focus-visible,
  html body .bw-mobile-menu .bw-menu-close-x:focus-visible,
  html body .bw-mobile-toggle:focus-visible {
    outline: 2px solid var(--bw-accent, #c8956c) !important;
    outline-offset: -2px !important;
  }
}

/* V5: Abstands-Rhythmus Startseite (Desktop) */
@media (min-width: 769px) {
  html body .bw-brands { padding: 4rem 0 !important; }
  html body .bw-trust-bar { padding: 1.5rem 0 !important; }
}

/* V6: Bestseller-Kartentitel in Serifen (wie Shop-Karten) */
html body .bw-bestseller__card-name {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

/* V7: "NEU"-Pill am Jura-E8-Menüpunkt */
html body li.menu-item-4896 > a::after {
  content: "NEU";
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #0a0a0a;
  background: #c8956c;
  border-radius: 3px;
  vertical-align: middle;
  line-height: 1.6;
}

/* ═══ v1.4 — Produktkarten-Titel: nie wieder halb abgeschnittene Zeilen.
   Irgendeine späte Regel (vermutlich WC-Core via @layer) erzwingt
   display:flow-root und hebelt die -webkit-box-Clamp aus → dritte Zeile
   wurde mittig gekappt. Doppelstrategie:
   1) Clamp erneut, als letzte Regel der Kaskade.
   2) Zeilenbündige max-height-Kappe als Fallback — schneidet IMMER exakt
      an der Zeilengrenze (2 Zeilen), auch wenn die Clamp verliert. ═══ */
html body .woocommerce ul.products li.product .woocommerce-loop-product__title,
html body .woocommerce ul.products li.product h2,
html body ul.products li.product h2,
html body ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.35 !important;
  padding-top: 0.45rem !important;
  padding-bottom: 0 !important;
  max-height: calc(2 * 1.35em + 0.45rem) !important;
  min-height: calc(2 * 1.35em + 0.45rem) !important;
  box-sizing: border-box !important;
}
/* Abstand zum Rating/Preis kommt jetzt von unten */
html body .woocommerce ul.products li.product h2 + .star-rating,
html body .woocommerce ul.products li.product .woocommerce-loop-product__title + .star-rating {
  margin-top: 0.45rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v3.1 (2026-06-11) — MOBILE-MENÜ KONSOLIDIERT — gilt ≤900px (= Burger-Bereich)
   ───────────────────────────────────────────────────────────────────────
   Ersetzt im Geltungsbereich die Patches 9–15 (galten nur ≤767px):
   1. KRITISCH: Menü war nicht schließbar — Patch 13 versteckt den Header-
      Toggle bei offenem Menü zugunsten eines JS-injizierten Close-Buttons
      (.bw-menu-close-x), den es nie gab. Jetzt: echter Button
      .bw-mobile-menu-close im Markup (header.php) + ESC-Support.
   2. 768–900px: Burger sichtbar (M3), aber offenes Menü lief mit Parent-
      Basis (halbtransparent, zentriert, z-index 998 unterm Header).
   3. z-index 10002 (> Announce-Bar 10001) → Menü deckt alles, auch ohne
      :has()-Support; Hover-Padding-Shift (Desktop-Pattern) entfernt.
   4. Neu: Kontakt-Meta-Block (Telefon/E-Mail) am Menüfuß.
   Quelle der Wahrheit für den OFFENEN Zustand ist ab jetzt NUR dieser
   Block (steht zuletzt in der Datei → gewinnt bei gleicher Spezifität).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── (1) Container: vollflächig, opak, über allem ── */
  html body .bw-mobile-menu {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #0A0A0A !important;
    z-index: 10002 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: opacity .22s ease, transform .22s ease, visibility .22s !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html body .bw-mobile-menu.open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
  html body.admin-bar .bw-mobile-menu { padding-top: 46px !important; }

  /* ── (2) Header/Announce hinter dem Menü stilllegen ── */
  html body:has(.bw-mobile-menu.open) header.bw-header,
  html body:has(.bw-mobile-menu.open) .bw-announce {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* Header-Toggle bleibt bei offenem Menü aus — es gibt genau EIN X (im Menü) */
  html body header.bw-header .bw-mobile-toggle.open,
  html body header.bw-header .bw-mobile-toggle[aria-expanded="true"],
  html body header.bw-header div.bw-header-actions .bw-mobile-toggle.open,
  html body header.bw-header div.bw-header-actions .bw-mobile-toggle[aria-expanded="true"] {
    display: none !important;
    visibility: hidden !important;
  }

  /* ── (3) Top-Bar: „Mahlwerk." + echter Close-Button ── */
  html body .bw-mobile-menu .bw-mobile-menu-inner {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 0 auto !important;   /* füllt das Menü auch 768–900px (Patch 9 galt nur ≤767) */
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body .bw-mobile-menu .bw-mobile-menu-inner::before {
    content: "Mahlwerk." !important;
    display: flex !important;
    align-items: center !important;
    height: 64px !important;
    padding: 0 72px 0 24px !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    color: #FAFAFA !important;
    letter-spacing: -0.01em !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #0A0A0A !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  html body .bw-mobile-menu .bw-mobile-menu-close {
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 50% !important;
    color: #FAFAFA !important;
    font-size: 0 !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: background .2s, border-color .2s, color .2s, transform .15s !important;
  }
  html body.admin-bar .bw-mobile-menu .bw-mobile-menu-close { top: 58px !important; }
  html body .bw-mobile-menu .bw-mobile-menu-close svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
  }
  html body .bw-mobile-menu .bw-mobile-menu-close:hover,
  html body .bw-mobile-menu .bw-mobile-menu-close:focus-visible {
    background: rgba(200, 149, 108, 0.15) !important;
    border-color: rgba(212, 149, 107, 0.6) !important;
    color: #D4956B !important;
  }
  html body .bw-mobile-menu .bw-mobile-menu-close:active { transform: scale(0.94) !important; }

  /* ── (4) Nav-Liste: ruhige, große Touch-Zeilen ── */
  html body .bw-mobile-menu .bw-mobile-nav,
  html body .bw-mobile-menu nav {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body .bw-mobile-menu .bw-mobile-nav-list,
  html body .bw-mobile-menu .bw-nav-list,
  html body .bw-mobile-menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  html body .bw-mobile-menu .bw-mobile-nav-list li,
  html body .bw-mobile-menu .bw-nav-list li,
  html body .bw-mobile-menu ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-top: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  html body .bw-mobile-menu .bw-mobile-nav-list a,
  html body .bw-mobile-menu .bw-nav-list a,
  html body .bw-mobile-menu nav ul a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 15px 24px !important;
    margin: 0 !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 21px !important;
    font-weight: 500 !important;
    color: #FAFAFA !important;
    text-decoration: none !important;
    text-align: left !important;
    border-left: 2px solid transparent !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
  }
  /* Hover-Unterstrich-Animation (::before) aus den Alt-Patches deaktivieren */
  html body .bw-mobile-menu .bw-mobile-nav-list a::before,
  html body .bw-mobile-menu .bw-nav-list a::before,
  html body .bw-mobile-menu nav ul a::before {
    content: none !important;
    display: none !important;
  }
  html body .bw-mobile-menu .bw-mobile-nav-list a:hover,
  html body .bw-mobile-menu .bw-mobile-nav-list a:focus,
  html body .bw-mobile-menu .bw-nav-list a:hover,
  html body .bw-mobile-menu .bw-nav-list a:focus,
  html body .bw-mobile-menu nav ul a:hover,
  html body .bw-mobile-menu nav ul a:focus {
    background-color: rgba(200, 149, 108, 0.08) !important;
    color: #D4956B !important;
    padding-left: 24px !important;   /* kein Hover-Shift */
    outline: none !important;
  }
  html body .bw-mobile-menu .current-menu-item > a,
  html body .bw-mobile-menu .current_page_item > a,
  html body .bw-mobile-menu a.current {
    color: #D4956B !important;
    background: rgba(200, 149, 108, 0.06) !important;
    border-left: 2px solid #C8956C !important;
  }

  /* ── (5) Warenkorb-CTA ── */
  html body .bw-mobile-menu .bw-mobile-cart-link {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    box-sizing: border-box !important;
    margin: 28px 24px 0 !important;
    padding: 14px 56px !important;
    min-height: 52px !important;
    background: #B87333 !important;
    color: #fff !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    text-align: center !important;
  }
  html body .bw-mobile-menu .bw-mobile-cart-link:hover,
  html body .bw-mobile-menu .bw-mobile-cart-link:focus {
    background: #D4956B !important;
    color: #fff !important;
  }
  html body .bw-mobile-menu .bw-mobile-cart-link .bw-cart-count {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.25) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 0 !important;
  }

  /* ── (6) Kontakt-Meta am Menüfuß ── */
  html body .bw-mobile-menu .bw-mobile-menu-meta {
    margin-top: auto !important;
    padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin-bottom: 0 !important;
  }
  /* (kein margin-top-Override hier — das `auto` oben pinnt den Block nach
     unten; der Abstand zur CTA ergibt sich aus dem freien Raum) */
  html body .bw-mobile-menu .bw-mobile-menu-meta a,
  html body .bw-mobile-menu .bw-mobile-menu-meta .bw-mobile-menu-meta__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    text-decoration: none !important;
    border-left: none !important;
    background: transparent !important;
  }
  html body .bw-mobile-menu .bw-mobile-menu-meta a:hover,
  html body .bw-mobile-menu .bw-mobile-menu-meta a:focus {
    color: #D4956B !important;
    background: transparent !important;
    padding-left: 0 !important;
  }
  html body .bw-mobile-menu .bw-mobile-menu-meta a svg {
    width: 17px !important;
    height: 17px !important;
    stroke: #C8956C !important;
    flex-shrink: 0 !important;
  }
  html body .bw-mobile-menu .bw-mobile-menu-meta__note {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.42) !important;
  }

  /* ── (7) Scroll-Lock (main.js setzt zusätzlich inline overflow) ── */
  html body.menu-open,
  html body:has(.bw-mobile-menu.open) {
    overflow: hidden !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v3.2 (2026-06-11) — WARENKORB-FIXES (nach User-Report)
   ───────────────────────────────────────────────────────────────────────
   1. Mobil: Artikel-Titel malte ÜBER den Mengen-Stepper. Die a[href]-Clamp
      aus „PATCH 5" wird von einer späten Force-Regel entwertet (display:
      block + overflow:visible erzwungen, vermutlich WC-Core/@layer); die
      max-height-Kappe hielt die BOX bei 2 Zeilen, aber der Text lief
      sichtbar über die Box hinaus. Fix hier — letzte Datei der Kaskade:
      overflow:hidden auf Link UND Zelle. Serverseitig kürzt zusätzlich
      bw_shorten_cart_item_name() den Klammerzusatz (checkout-cro.php).
   2. Desktop: Die von main.js injizierten Stepper-Buttons (.bw-qty-btn)
      wurden auf ~10px gequetscht; der .quantity-Wrap stand bei 40px mit
      overflow:hidden → Plus-Button war KOMPLETT verschluckt, Input
      angeschnitten. Hier: explizite Geometrie 40/40/40 in fit-content.
   3. Header auf Cart/Checkout ≤640px: Logo + „Weiter einkaufen"-Pille +
      Cart-Icon + Burger überliefen den Viewport — Burger ragte 24px über
      den Rand (toggle.right = 414 bei 390er-Viewport). „Weiter einkaufen"
      wird Icon-only (bisher erst <380px).
   4. Trust-Zeile unter „Weiter zur Kasse": Ersatz-Inhalt steht in cart.css
      (Parent-::after hatte Emoji-Icons + »Qualitatsgarantie«-Tippfehler).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── (1) Mobil: Titel bleibt in seiner Box ── */
@media (max-width: 767px) {
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-name {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-name a[href],
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-name a[href],
  html body.woocommerce-cart table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item td.product-name a[href] {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    /* 3 Zeilen: der gekürzte Titel braucht Platz für die Farbe
       („Jura E8 / Kaffeevollautomat - / Piano Black") */
    max-height: 4.05em !important;  /* zeilenbündige Kappe, falls die Box-Clamp verliert */
  }
}

/* ── (2) Stepper-Geometrie (Desktop + Mobil): −/Zahl/+ je 40px, nichts clippt ── */
html body.woocommerce-cart table.shop_table.cart tbody tr td.product-quantity .quantity {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  min-width: 122px !important;
  max-width: none !important;
  overflow: hidden !important;     /* nur noch fürs Border-Radius-Clipping */
}
html body.woocommerce-cart table.shop_table.cart tbody tr td.product-quantity .quantity button.bw-qty-btn,
html body.woocommerce-cart table.shop_table.cart tbody tr td.product-quantity .quantity .bw-qty-minus,
html body.woocommerce-cart table.shop_table.cart tbody tr td.product-quantity .quantity .bw-qty-plus {
  width: 40px !important;
  min-width: 40px !important;
  height: 44px !important;
  padding: 0 !important;
  flex: 0 0 40px !important;
  font-size: 16px !important;
  line-height: 1 !important;
}
html body.woocommerce-cart table.shop_table.cart tbody tr td.product-quantity .quantity input.qty {
  width: 40px !important;
  min-width: 40px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}
/* Desktop: Tabelle darf ihre Karte NIE sprengen. Die erste Fassung gab der
   Stepper-Spalte min-width:138 — zusammen mit 8px border-spacing und dem
   140px-Titel-Minimum überstieg die Spaltensumme die Kartenbreite und der
   Preis ragte 36px über den Kartenrand (User-Report). Jetzt: Mindestbreiten
   weg (die Stepper-Integrität sichert der .quantity-Wrap mit min-width:122
   selbst), Zell-Abstände auf 0, kompaktere Polster. */
@media (min-width: 768px) {
  html body.woocommerce-cart table.shop_table.cart {
    width: 100% !important;
    max-width: 100% !important;
    border-spacing: 0 !important;
  }
  /* Die Zeile ist ein Flex-Row (gap 8). Eine Altregel gab der Stepper-Zelle
     `flex: 0 0 75px` (Maß des alten 40px-Steppers) — der 122px-Stepper
     quoll beidseitig raus und der Preis stand IM Stepper (User-Report).
     Jetzt: Zelle wächst mit ihrem Inhalt, NUR der Titel ist elastisch. */
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-quantity {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 28px 10px !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-subtotal {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 28px 16px 28px 10px !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    /* In schmalen Lagen brach „Kaffeevollautomat" mitten im Wort —
       Silbentrennung statt hartem word-break (html lang=de-DE vorhanden) */
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr td.product-remove {
    padding: 28px 6px 28px 14px !important;
  }
}

/* ── (2b) Versand-Zeile der Summe: Wert bündig rechts (alle Viewports).
   Der Methoden-Text steckt in ul.woocommerce-shipping-methods, die als
   Flex-Box layoutet — text-align:right der Zelle greift dort nicht,
   das li startete links („Kostenlos (DHL)" hing ~24px vor der Kante). ── */
html body.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: right !important;
  width: 100% !important;
}
html body.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods li {
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

/* ── (3) „Weiter einkaufen" ≤640px: Icon-only, Burger passt wieder ── */
@media (max-width: 640px) {
  html body header.bw-header .bw-continue-shopping {
    font-size: 0 !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    margin-right: 2px !important;
    flex-shrink: 0 !important;
  }
  html body header.bw-header .bw-continue-shopping svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #D4956B !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BW MOBILE COMMERCE v2  —  Warenkorb + Kasse, Mobile-first Top-Niveau (dunkel)
   Shoptimizer-Dimensionen, an Mahlwerks dunkles Theme adaptiert. Rewrite nach
   kritischer Mehr-Agenten-Bewertung gegen Shoptimizer.
   Wird ans ENDE von mobile.css gehängt -> lädt zuletzt. Hohe Spezifität +
   !important, um den bestehenden 197KB-mobile.css-Block zu schlagen.
   REIN VISUELL: CC-Gateway-DOM/JS (bw_cc_*), checkout-cro, 3DS, gtag unberührt.
   Nur <= 768px. Rollback: diesen Block entfernen. Marker: BW-MOBILE-COMMERCE-START
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  html body.woocommerce-cart, html body.woocommerce-checkout {
    -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important;
  }
  html body.woocommerce-cart .woocommerce, html body.woocommerce-checkout .woocommerce {
    padding-left: 16px !important; padding-right: 16px !important;
  }

  /* ════════ P0: GANZE CONTAINER-KETTE VOLL BREIT (behebt 228px-Einschnürung) ════════ */
  html body.woocommerce-checkout #customer_details,
  html body.woocommerce-checkout #customer_details .col-1,
  html body.woocommerce-checkout #customer_details .col-2,
  html body.woocommerce-checkout .col2-set,
  html body.woocommerce-checkout #order_review,
  html body.woocommerce-checkout #order_review_heading,
  html body.woocommerce-checkout #payment,
  html body.woocommerce-checkout .woocommerce-billing-fields,
  html body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  html body.woocommerce-checkout .woocommerce-shipping-fields,
  html body.woocommerce-checkout .woocommerce-additional-fields,
  html body.woocommerce-checkout form.checkout .place-order {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    float: none !important; box-sizing: border-box !important;
  }
  html body.woocommerce-checkout #customer_details .col-2 { margin-top: 0 !important; }

  /* ════════ FORM-ROWS: einspaltig, voll breit ════════ */
  html body.woocommerce-checkout form.checkout .form-row {
    width: 100% !important; max-width: 100% !important; float: none !important; clear: both !important;
    margin: 0 0 18px 0 !important; padding: 0 !important; box-sizing: border-box !important;
    background: transparent !important; border: 0 !important;
  }
  html body.woocommerce-checkout form.checkout .form-row-first,
  html body.woocommerce-checkout form.checkout .form-row-last,
  html body.woocommerce-checkout form.checkout .form-row-wide { width: 100% !important; }

  /* ════════ FELDER (voll breit, 54px, 16px = kein iOS-Zoom) ════════ */
  html body.woocommerce-checkout form.checkout .form-row input.input-text,
  html body.woocommerce-checkout form.checkout .form-row input[type="text"],
  html body.woocommerce-checkout form.checkout .form-row input[type="email"],
  html body.woocommerce-checkout form.checkout .form-row input[type="tel"],
  html body.woocommerce-checkout form.checkout .form-row input[type="password"],
  html body.woocommerce-checkout form.checkout .form-row input[type="number"],
  html body.woocommerce-checkout form.checkout .form-row select {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: block !important;
    height: 54px !important; min-height: 54px !important; padding: 0 16px !important; line-height: normal !important;
    font-size: 16px !important; font-weight: 400 !important;
    background: var(--bw-bg-raised, #1d1d22) !important; color: var(--bw-text, #f4f4f5) !important;
    border: 1px solid rgba(244,244,245,0.14) !important; border-radius: 10px !important;
    box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
  }
  html body.woocommerce-checkout form.checkout .form-row textarea {
    width: 100% !important; min-height: 104px !important; padding: 14px 16px !important; font-size: 16px !important;
    background: var(--bw-bg-raised, #1d1d22) !important; color: var(--bw-text, #f4f4f5) !important;
    border: 1px solid rgba(244,244,245,0.14) !important; border-radius: 10px !important; box-sizing: border-box !important;
  }
  html body.woocommerce-checkout form.checkout .form-row input:focus,
  html body.woocommerce-checkout form.checkout .form-row select:focus,
  html body.woocommerce-checkout form.checkout .form-row textarea:focus {
    border-color: var(--bw-accent, #c8956c) !important; box-shadow: 0 0 0 3px rgba(200,149,108,0.18) !important; outline: none !important;
  }
  html body.woocommerce-checkout form.checkout .form-row select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23c8956c'%20stroke-width='2'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 18px !important; padding-right: 44px !important;
  }
  html body.woocommerce-checkout form.checkout .form-row ::placeholder,
  html body.woocommerce-checkout form.checkout .form-row input::placeholder { color: var(--bw-text-faint, rgba(244,244,245,0.42)) !important; }

  /* Labels: links über dem Feld, konstanter Takt */
  html body.woocommerce-checkout form.checkout .form-row label {
    display: block !important; width: 100% !important; text-align: left !important; float: none !important;
    margin: 0 0 8px 0 !important; font-size: 14px !important; font-weight: 600 !important;
    letter-spacing: 0 !important; line-height: 1.3 !important; color: var(--bw-text-muted, rgba(244,244,245,0.7)) !important;
  }
  html body.woocommerce-checkout form.checkout .form-row .required { color: var(--bw-accent, #c8956c) !important; border: 0 !important; }

  /* ════════ EINE Karte je Sektion (keine Box-in-Box) ════════ */
  html body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  html body.woocommerce-checkout .woocommerce-additional-fields,
  html body.woocommerce-checkout #order_review {
    background: var(--bw-bg-elevated, #16161a) !important;
    border: 1px solid rgba(244,244,245,0.07) !important; border-radius: 16px !important;
    padding: 20px 18px !important; margin: 0 0 18px !important;
  }
  html body.woocommerce-checkout .woocommerce-additional-fields .form-row:last-child { margin-bottom: 0 !important; }

  /* Sektions-Überschriften: DM Sans (scharf auf Dunkel), kein Clipping, keine Linie */
  html body.woocommerce-checkout .woocommerce-billing-fields > h3,
  html body.woocommerce-checkout #order_review_heading,
  html body.woocommerce-checkout .woocommerce-additional-fields h3,
  html body.woocommerce-checkout #ship-to-different-address {
    font-family: var(--bw-font-sans, "DM Sans", sans-serif) !important;
    font-size: 20px !important; font-weight: 700 !important; line-height: 1.3 !important;
    color: var(--bw-text, #f4f4f5) !important; text-shadow: none !important;
    margin: 0 0 16px !important; padding: 0 !important; border: 0 !important; width: 100% !important; text-align: left !important;
  }
  html body.woocommerce-checkout #ship-to-different-address {
    margin: 0 !important; font-size: 16px !important; font-weight: 600 !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
  }
  html body.woocommerce-checkout #ship-to-different-address-checkbox { width: 22px !important; height: 22px !important; min-height: 0 !important; accent-color: var(--bw-accent, #c8956c) !important; }

  /* Gutschein-Hinweis dezent (lenkt nicht vom Kauf ab) */
  html body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    background: var(--bw-bg-elevated, #16161a) !important; border: 1px solid rgba(244,244,245,0.07) !important;
    border-left: 2px solid var(--bw-accent, #c8956c) !important; border-radius: 12px !important;
    padding: 14px 16px !important; font-size: 14px !important; color: var(--bw-text-muted, rgba(244,244,245,0.7)) !important;
    display: flex !important; flex-wrap: wrap !important; gap: 4px 8px !important; box-shadow: none !important;
  }
  html body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a { color: var(--bw-accent, #c8956c) !important; }

  /* ════════ Order-Review-Tabelle ════════ */
  html body.woocommerce-checkout .woocommerce-checkout-review-order-table { table-layout: fixed !important; width: 100% !important; margin: 0 0 8px !important; }
  html body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
  html body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    padding: 12px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(244,244,245,0.06) !important;
    font-size: 15px !important; word-break: break-word !important; overflow-wrap: break-word !important; color: var(--bw-text-muted, rgba(244,244,245,0.72)) !important;
  }
  html body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
  html body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
    font-size: 19px !important; font-weight: 700 !important; color: var(--bw-text, #f4f4f5) !important; border-bottom: 0 !important; padding-top: 14px !important;
  }

  /* ════════ Zahlarten als tippbare Karten ════════ */
  html body.woocommerce-checkout #payment { background: transparent !important; }
  html body.woocommerce-checkout #payment ul.payment_methods { padding: 0 !important; margin: 14px 0 0 !important; border: 0 !important; list-style: none !important; }
  html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
    background: var(--bw-bg-raised, #1d1d22) !important; border: 1px solid rgba(244,244,245,0.10) !important;
    border-radius: 12px !important; margin: 0 0 10px !important; padding: 0 !important; list-style: none !important;
  }
  html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
    display: flex !important; align-items: center !important; gap: 10px !important;
    min-height: 56px !important; padding: 14px 16px !important; margin: 0 !important; cursor: pointer !important;
    font-size: 15px !important; font-weight: 600 !important; color: var(--bw-text, #f4f4f5) !important;
  }
  html body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input.input-radio { width: 20px !important; height: 20px !important; min-height: 0 !important; margin: 0 !important; accent-color: var(--bw-accent, #c8956c) !important; }
  html body.woocommerce-checkout #payment li.wc_payment_method:has(input:checked) { border-color: var(--bw-accent, #c8956c) !important; box-shadow: 0 0 0 1px var(--bw-accent, #c8956c) !important; }
  html body.woocommerce-checkout #payment .payment_box { background: transparent !important; margin: 0 !important; padding: 0 16px 16px !important; font-size: 13.5px !important; color: var(--bw-text-muted, rgba(244,244,245,0.7)) !important; }
  html body.woocommerce-checkout #payment .payment_box::before { display: none !important; }
  /* CC-Felder voll breit (NUR CSS — Gateway-IDs/JS unberührt) */
  html body.woocommerce-checkout #wc-bw_creditcard-cc-form .form-row { width: 100% !important; float: none !important; margin-bottom: 14px !important; }

  /* ════════ P0: PRIMARY-CTA (voll breit, 54px, klare Proportion) ════════ */
  html body.woocommerce-checkout #place_order,
  html body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; max-width: 100% !important; min-height: 54px !important; height: 54px !important;
    padding: 0 24px !important; margin: 0 !important; float: none !important; box-sizing: border-box !important;
    background: var(--bw-accent, #c8956c) !important; color: var(--bw-accent-ink, #1a1410) !important;
    font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important;
    border: 0 !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba(200,149,108,0.16) !important;
  }
  html body.woocommerce-checkout #place_order:hover,
  html body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--bw-accent-hover, #d4a27a) !important; }

  /* Sekundär-Buttons einheitlich neutral-outline (keine 3 konkurrierenden Stile) */
  html body.woocommerce-cart td.actions button[name="apply_coupon"],
  html body.woocommerce-cart td.actions button[name="update_cart"],
  html body.woocommerce-cart td.actions .button {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; min-height: 52px !important; padding: 0 20px !important; margin: 0 !important;
    background: transparent !important; color: var(--bw-text-muted, rgba(244,244,245,0.78)) !important;
    border: 1px solid rgba(244,244,245,0.16) !important; border-radius: 10px !important;
    font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: normal !important;
  }
  html body.woocommerce-cart td.actions button:hover { border-color: var(--bw-accent, #c8956c) !important; color: var(--bw-accent, #c8956c) !important; }
  /* GROSSBUCHSTABEN überall in Commerce-Buttons abschalten */
  html body.woocommerce-cart .button, html body.woocommerce-cart a.button, html body.woocommerce-cart button,
  html body.woocommerce-checkout .button, html body.woocommerce-checkout button { text-transform: none !important; }

  /* Trust-Icons-Reihe dezent zentriert */
  html body.woocommerce-checkout .co-trust { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 14px !important; margin-top: 18px !important; opacity: .82 !important; }
  html body.woocommerce-checkout .woocommerce-info { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px 8px !important; min-width: 0 !important; font-size: 14px !important; line-height: 1.5 !important; border-radius: 12px !important; }
  html body.woocommerce-checkout .woocommerce-info > * { min-width: 0 !important; overflow-wrap: break-word !important; }

  /* ════════ WARENKORB ════════ */
  html body.woocommerce-cart table.shop_table.cart thead { display: none !important; }
  html body.woocommerce-cart table.shop_table.cart, html body.woocommerce-cart table.shop_table.cart tbody { display: block !important; width: 100% !important; border: 0 !important; }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item {
    display: grid !important; grid-template-columns: 76px minmax(0,1fr) !important; column-gap: 14px !important; row-gap: 5px !important;
    align-items: start !important; position: relative !important; padding: 16px !important; margin: 0 0 12px !important;
    background: var(--bw-bg-elevated, #16161a) !important; border: 1px solid rgba(244,244,245,0.07) !important;
    border-radius: 16px !important; box-shadow: var(--bw-shadow-sm, 0 2px 8px rgba(0,0,0,0.3)) !important;
  }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td { display: block !important; width: auto !important; border: 0 !important; padding: 0 !important; margin: 0 !important; text-align: left !important; }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td::before { display: none !important; }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-thumbnail { grid-column: 1 !important; grid-row: 1 / 6 !important; align-self: start !important; }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-thumbnail img { width: 76px !important; height: 76px !important; max-width: none !important; object-fit: contain !important; background: #e8e0d3 !important; border-radius: 12px !important; padding: 6px !important; }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-name { grid-column: 2 !important; grid-row: 1 !important; padding-right: 36px !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.35 !important; color: var(--bw-text, #f4f4f5) !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-name a { color: inherit !important; text-decoration: none !important; }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-price { grid-column: 2 !important; grid-row: 2 !important; font-size: 13px !important; color: var(--bw-text-muted, rgba(244,244,245,0.6)) !important; }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-price::after { content: " / Stück" !important; color: var(--bw-text-faint, rgba(244,244,245,0.4)) !important; }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-quantity { grid-column: 2 !important; grid-row: 3 !important; justify-self: start !important; margin-top: 4px !important; }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-subtotal { grid-column: 2 !important; grid-row: 4 !important; justify-self: start !important; margin-top: 4px !important; font-size: 16px !important; font-weight: 700 !important; color: var(--bw-text, #f4f4f5) !important; }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-quantity .quantity { display: inline-flex !important; align-items: center !important; border: 1px solid rgba(244,244,245,0.16) !important; border-radius: 10px !important; overflow: hidden !important; background: var(--bw-bg-raised, #1d1d22) !important; }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-quantity input.qty { width: 46px !important; min-height: 44px !important; text-align: center !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--bw-text, #f4f4f5) !important; padding: 0 !important; font-size: 16px !important; }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-quantity .bw-qty-btn,
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-quantity .quantity .minus,
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-quantity .quantity .plus { width: 44px !important; height: 44px !important; min-height: 44px !important; border: 0 !important; background: transparent !important; color: var(--bw-text, #f4f4f5) !important; font-size: 20px !important; line-height: 1 !important; }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-remove { position: absolute !important; top: 12px !important; right: 12px !important; }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-remove a.remove { display: flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; border-radius: 50% !important; background: rgba(255,255,255,0.06) !important; color: var(--bw-text-muted, rgba(244,244,245,0.55)) !important; font-size: 18px !important; line-height: 1 !important; }
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-remove a.remove:hover { background: rgba(226,109,109,0.18) !important; color: #e26d6d !important; }

  /* Aktionen (Gutschein/Update) gestapelt */
  html body.woocommerce-cart tr td.actions { display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 4px 0 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; }
  html body.woocommerce-cart tr td.actions .coupon { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; float: none !important; }
  html body.woocommerce-cart tr td.actions .coupon #coupon_code { width: 100% !important; min-height: 52px !important; padding: 0 16px !important; font-size: 16px !important; background: var(--bw-bg-raised, #1d1d22) !important; color: var(--bw-text, #f4f4f5) !important; border: 1px solid rgba(244,244,245,0.14) !important; border-radius: 10px !important; box-sizing: border-box !important; }

  /* Summen-Box */
  html body.woocommerce-cart .cart_totals { width: 100% !important; float: none !important; margin-top: 8px !important; background: var(--bw-bg-elevated, #16161a) !important; border: 1px solid rgba(244,244,245,0.07) !important; border-radius: 16px !important; padding: 20px !important; }
  html body.woocommerce-cart .cart_totals h2 { font-family: var(--bw-font-sans, "DM Sans", sans-serif) !important; font-size: 18px !important; font-weight: 700 !important; margin: 0 0 14px !important; color: var(--bw-text, #f4f4f5) !important; }
  html body.woocommerce-cart .cart_totals table tr th, html body.woocommerce-cart .cart_totals table tr td { padding: 11px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(244,244,245,0.06) !important; font-size: 15px !important; color: var(--bw-text-muted, rgba(244,244,245,0.72)) !important; }
  html body.woocommerce-cart .cart_totals table tr.order-total th, html body.woocommerce-cart .cart_totals table tr.order-total td { font-size: 18px !important; font-weight: 700 !important; color: var(--bw-text, #f4f4f5) !important; border-bottom: 0 !important; padding-top: 14px !important; }
  html body.woocommerce-cart .cart_totals td { text-align: right !important; }
  html body.woocommerce-cart .wc-proceed-to-checkout { margin-top: 16px !important; padding: 0 !important; }

  /* Sticky „Weiter zur Kasse" (nur Cart) */
  html body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { position: fixed !important; bottom: 12px !important; left: 16px !important; right: 16px !important; width: auto !important; z-index: 60 !important; box-shadow: 0 5px 16px rgba(0,0,0,0.42), 0 2px 6px rgba(200,149,108,0.18) !important; }
  html body.woocommerce-cart { padding-bottom: 92px !important; }

  /* ════ PATCH P0: kumulatives Padding killen (nur bw-container bleibt Gutter) ════ */
  html body.woocommerce-checkout article,
  html body.woocommerce-checkout .woocommerce,
  html body.woocommerce-checkout form.checkout,
  html body.woocommerce-checkout #customer_details,
  html body.woocommerce-checkout #customer_details .col-1,
  html body.woocommerce-checkout #customer_details .col-2,
  html body.woocommerce-checkout .woocommerce-billing-fields {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  html body.woocommerce-checkout form.checkout { display: block !important; }
  /* Form-rows wirklich block + voll breit (waren inline-block 91px) */
  html body.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper p.form-row,
  html body.woocommerce-checkout form.checkout .woocommerce-additional-fields p.form-row,
  html body.woocommerce-checkout form.checkout #wc-bw_creditcard-cc-form p.form-row {
    display: block !important; width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 0 16px !important;
  }

  /* ════ PATCH P1: EINE Karte (kein Box-in-Box) + crisp Heading ohne Unterstrich ════ */
  html body.woocommerce-checkout form.checkout .woocommerce-billing-fields {
    background: var(--bw-bg-elevated, #16161a) !important; border: 1px solid rgba(244,244,245,0.07) !important;
    border-radius: 16px !important; padding: 20px 16px !important; margin: 0 0 18px !important;
  }
  html body.woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper {
    background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important;
  }
  html body.woocommerce-checkout form.checkout .woocommerce-billing-fields > h3,
  html body.woocommerce-checkout form.checkout #order_review_heading,
  html body.woocommerce-checkout form.checkout .woocommerce-additional-fields h3 {
    font-family: var(--bw-font-sans, "DM Sans", sans-serif) !important;
    font-size: 20px !important; font-weight: 700 !important; line-height: 1.3 !important;
    color: var(--bw-text, #f4f4f5) !important; text-shadow: none !important; -webkit-text-stroke: 0 !important;
    border-bottom: 0 !important; padding-bottom: 0 !important; margin: 0 0 18px !important;
  }

  /* ════ PATCH P2: ID-Boost (:not(#a):not(#b) = +2 ID-Spezifität) schlägt hartnäckige Theme-!important-Regeln ════ */
  html body.woocommerce-checkout:not(#a):not(#b) .woocommerce-billing-fields > h3,
  html body.woocommerce-checkout:not(#a):not(#b) #order_review_heading,
  html body.woocommerce-checkout:not(#a):not(#b) .woocommerce-additional-fields h3 {
    font-family: var(--bw-font-sans, "DM Sans", sans-serif) !important;
    font-size: 20px !important; font-weight: 700 !important; line-height: 1.3 !important;
    color: var(--bw-text, #f4f4f5) !important; text-shadow: none !important; -webkit-text-stroke: 0 !important;
    border: 0 !important; padding-bottom: 0 !important; margin: 0 0 18px !important; background: none !important;
  }
  html body.woocommerce-checkout:not(#a):not(#b) .woocommerce-billing-fields > h3::after,
  html body.woocommerce-checkout:not(#a):not(#b) .woocommerce-billing-fields > h3::before,
  html body.woocommerce-checkout:not(#a):not(#b) #order_review_heading::after { display: none !important; content: none !important; border: 0 !important; }

  /* Kein Uppercase auf Commerce-Buttons */
  html body.woocommerce-cart:not(#a):not(#b) .button,
  html body.woocommerce-cart:not(#a):not(#b) a.checkout-button,
  html body.woocommerce-cart:not(#a):not(#b) button,
  html body.woocommerce-checkout:not(#a):not(#b) #place_order,
  html body.woocommerce-checkout:not(#a):not(#b) .button { text-transform: none !important; letter-spacing: 0 !important; }

  /* Sekundär-Buttons (Gutschein/Update) einheitlich neutral-outline (eine Hierarchie) */
  html body.woocommerce-cart:not(#a):not(#b) td.actions button[name="update_cart"],
  html body.woocommerce-cart:not(#a):not(#b) td.actions button[name="apply_coupon"],
  html body.woocommerce-cart:not(#a):not(#b) td.actions .button {
    background: transparent !important; color: #d4a27a !important;
    border: 1.5px solid rgba(200,149,108,0.45) !important; font-weight: 600 !important;
  }

  /* ════ PATCH P3: Runde-2-Feinschliff ════ */
  /* A) Felder klar sichtbar + Focus-State */
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row input.input-text,
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row input[type="text"],
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row input[type="email"],
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row input[type="tel"],
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row input[type="number"],
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row select,
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row textarea {
    background: #232229 !important; border: 1px solid rgba(255,255,255,0.16) !important;
  }
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row input:focus,
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row select:focus,
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row textarea:focus {
    border-color: var(--bw-accent, #c8956c) !important; box-shadow: 0 0 0 3px rgba(200,149,108,0.22) !important; outline: none !important;
  }
  /* B) Cart-Summen-Überschrift konsistent (DM Sans, kein Uppercase) */
  html body.woocommerce-cart:not(#a):not(#b) .cart_totals h2 {
    font-family: var(--bw-font-sans, "DM Sans", sans-serif) !important; text-transform: none !important;
    letter-spacing: 0 !important; font-size: 18px !important; font-weight: 700 !important; text-shadow: none !important;
  }
  /* C) Serif-Headings crisp (kein Doppel-Render) */
  html body.woocommerce-cart:not(#a):not(#b) h1, html body.woocommerce-cart:not(#a):not(#b) h2,
  html body.woocommerce-checkout:not(#a):not(#b) h1, html body.woocommerce-checkout:not(#a):not(#b) h2 {
    text-shadow: none !important; -webkit-text-stroke: 0 !important;
  }
  html body.woocommerce-cart, html body.woocommerce-checkout { text-rendering: optimizeLegibility !important; }
  /* E) Primär-CTA: sauberer Schatten + Hover/Active */
  html body.woocommerce-checkout:not(#a):not(#b) #place_order,
  html body.woocommerce-cart:not(#a):not(#b) .wc-proceed-to-checkout a.checkout-button {
    box-shadow: 0 4px 14px rgba(0,0,0,0.38) !important; transition: background .15s ease, transform .1s ease !important;
  }
  html body.woocommerce-checkout:not(#a):not(#b) #place_order:hover,
  html body.woocommerce-cart:not(#a):not(#b) .wc-proceed-to-checkout a.checkout-button:hover { background: var(--bw-accent-hover, #d4a27a) !important; transform: translateY(-1px) !important; }
  html body.woocommerce-checkout:not(#a):not(#b) #place_order:active,
  html body.woocommerce-cart:not(#a):not(#b) .wc-proceed-to-checkout a.checkout-button:active { transform: translateY(0) !important; }

  /* ════ PATCH P4: Responsiv/fluid über ALLE Handy-Größen (320–768) + 0 Überlauf ════ */
  /* Überlauf weg: fixed Header/Announce exakt auf Viewport (kein 100vw), Select2 cappen, clip */
  html body.woocommerce-cart .bw-announce, html body.woocommerce-cart .bw-header,
  html body.woocommerce-checkout .bw-announce, html body.woocommerce-checkout .bw-header {
    left: 0 !important; right: 0 !important; width: auto !important;
  }
  html body.woocommerce-cart .bw-container, html body.woocommerce-checkout .bw-container { max-width: 100% !important; }
  html body.woocommerce-checkout .select2-container,
  html body.woocommerce-checkout select#billing_country { max-width: 100% !important; box-sizing: border-box !important; }
  html body.woocommerce-cart, html body.woocommerce-checkout { overflow-x: clip !important; }

  /* Fluid: Padding/Headings/Felder/Buttons/Bild skalieren weich mit dem Viewport (wie Top-Themes) */
  html body.woocommerce-checkout:not(#a):not(#b) .woocommerce-billing-fields,
  html body.woocommerce-checkout:not(#a):not(#b) .woocommerce-additional-fields,
  html body.woocommerce-checkout:not(#a):not(#b) #order_review { padding: clamp(16px,4.5vw,22px) clamp(14px,4vw,20px) !important; }
  html body.woocommerce-checkout:not(#a):not(#b) .woocommerce-billing-fields > h3,
  html body.woocommerce-checkout:not(#a):not(#b) #order_review_heading,
  html body.woocommerce-checkout:not(#a):not(#b) .woocommerce-additional-fields h3 { font-size: clamp(18px,5vw,21px) !important; }
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row input.input-text,
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row input[type="text"],
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row input[type="email"],
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row input[type="tel"],
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row select { height: clamp(50px,13vw,56px) !important; min-height: clamp(50px,13vw,56px) !important; }
  html body.woocommerce-checkout:not(#a):not(#b) #place_order,
  html body.woocommerce-cart:not(#a):not(#b) .wc-proceed-to-checkout a.checkout-button { min-height: clamp(52px,14vw,58px) !important; height: clamp(52px,14vw,58px) !important; font-size: clamp(15px,4.2vw,17px) !important; }
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item td.product-thumbnail img { width: clamp(64px,18vw,84px) !important; height: clamp(64px,18vw,84px) !important; }

  /* ════ PATCH P5: Agenten-Runde-3-Feinschliff ════ */
  /* a) Remove-× kompakt (war live ~70px, meine 30px-Regel verlor) — ID-Boost erzwingt 38px */
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item td.product-remove a.remove {
    width: 38px !important; height: 38px !important; min-width: 0 !important; font-size: 20px !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; padding: 0 !important;
    background: rgba(255,255,255,0.06) !important; color: var(--bw-text-muted, rgba(244,244,245,0.6)) !important;
  }
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item td.product-remove a.remove:hover { background: rgba(226,109,109,0.18) !important; color: #e26d6d !important; }
  /* b) Placeholder kleiner als Tipptext → kein Abschnitt (Tipptext bleibt 16px, kein iOS-Zoom) */
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row input::placeholder { font-size: 14px !important; opacity: .65 !important; }
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row input.input-text { text-overflow: ellipsis !important; }
  /* c) Seiten-H1 „Kasse/Warenkorb" fluid (skalierte vorher nicht mit) */
  html body.woocommerce-checkout:not(#a):not(#b) .bw-page-hero__title,
  html body.woocommerce-cart:not(#a):not(#b) .bw-page-hero__title { font-size: clamp(26px, 8vw, 40px) !important; line-height: 1.14 !important; }
  /* d) Update-Cart disabled klar inaktiv (Kupfer gedimmt) */
  html body.woocommerce-cart:not(#a):not(#b) td.actions button[name="update_cart"]:disabled { opacity: .45 !important; }

  /* ════ PATCH P6: Abnahme-Feinschliff (Feld-Konsistenz) ════ */
  /* a) Länder-Select2 exakt an Textfeld-Stil angleichen (war dunkler + grauer Rahmen) */
  html body.woocommerce-checkout:not(#a):not(#b) span.select2-container .select2-selection,
  html body.woocommerce-checkout:not(#a):not(#b) span.select2-container .select2-selection--single {
    background: rgb(35,34,41) !important; border: 1px solid rgba(255,255,255,0.16) !important;
    height: clamp(50px,13vw,56px) !important; min-height: clamp(50px,13vw,56px) !important; border-radius: 12px !important;
    display: flex !important; align-items: center !important; padding: 0 40px 0 14px !important; position: relative !important;
  }
  html body.woocommerce-checkout:not(#a):not(#b) span.select2-container .select2-selection__rendered { color: rgb(244,244,245) !important; line-height: normal !important; padding: 0 !important; }
  /* Nativen select2-Pfeil ausblenden (saß außerhalb der Box) + eigenen Chevron auf die Box */
  html body.woocommerce-checkout:not(#a):not(#b) span.select2-container .select2-selection__arrow { display: none !important; }
  html body.woocommerce-checkout:not(#a):not(#b) span.select2-container .select2-selection--single::after {
    content: "" !important; position: absolute !important; right: 16px !important; top: 50% !important;
    width: 9px !important; height: 9px !important; box-sizing: border-box !important;
    border-right: 2px solid rgba(244,244,245,0.6) !important; border-bottom: 2px solid rgba(244,244,245,0.6) !important;
    transform: translateY(-70%) rotate(45deg) !important; pointer-events: none !important;
  }
  html body.woocommerce-checkout:not(#a):not(#b) .select2-dropdown { background: rgb(35,34,41) !important; border: 1px solid rgba(255,255,255,0.16) !important; }
  html body.woocommerce-checkout:not(#a):not(#b) .select2-results__option { color: rgba(244,244,245,0.85) !important; }
  html body.woocommerce-checkout:not(#a):not(#b) .select2-results__option--highlighted { background: var(--bw-accent, #c8956c) !important; color: #1a1410 !important; }
  html body.woocommerce-checkout:not(#a):not(#b) .select2-search__field { background: rgb(26,25,30) !important; color: #f4f4f5 !important; border: 1px solid rgba(255,255,255,0.16) !important; }
  /* b) Remove-× ohne Kupfer-Ring (subtiler Kreis) */
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item td.product-remove a.remove { border: 0 !important; }
  /* c) Labels minimal heller + Pflicht-Stern bleibt Kupfer */
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row label { color: rgba(255,255,255,0.8) !important; }
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row label .required,
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .form-row label abbr.required { color: var(--bw-accent, #c8956c) !important; border: 0 !important; text-decoration: none !important; }
}
/* Marker-Ende: BW-MOBILE-COMMERCE-END */

/* ════ PATCH P5e: sehr schmale Geräte (≤360px) — Vor-/Nachname stapeln (sonst ~120px je Feld) ════ */
@media (max-width: 360px){
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout .woocommerce-billing-fields__field-wrapper { display: block !important; }
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout p.form-row-first,
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout p.form-row-last { width: 100% !important; float: none !important; margin-right: 0 !important; margin-left: 0 !important; }
}

/* ════════ PATCH P7: Cart/Kasse Robustheit — min-width:0 Sicherheitsgurt ════════ */
/* Flex/Grid-Kinder dürfen unter ihre Inhaltsbreite schrumpfen -> kein Überlauf bei extrem langen Inhalten */
@media (max-width: 768px){
  html body.woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-name,
  html body.woocommerce-checkout #order_review,
  html body.woocommerce-checkout .woocommerce-checkout-review-order-table td,
  html body.woocommerce-checkout form.checkout .form-row { min-width: 0 !important; }
  html body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name { overflow-wrap: anywhere !important; }
}

/* ════════ BW-MOBILE-PDP — Produktseite + Produktkarten (Start 2026-06-26; ID-Boost gegen 197KB-mobile.css) ════════ */
@media (max-width: 768px){
  /* ── Buybox: Menge + In-den-Warenkorb teilen die Reihe robust (320px clippte den Button) ── */
  html body.single-product:not(#a):not(#b) form.cart { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 12px !important; }
  html body.single-product:not(#a):not(#b) form.cart .quantity { flex: 0 0 auto !important; width: clamp(108px, 32vw, 132px) !important; }
  html body.single-product:not(#a):not(#b) form.cart a.bw-atc-link,
  html body.single-product:not(#a):not(#b) form.cart a.single_add_to_cart_button,
  html body.single-product:not(#a):not(#b) form.cart .bw-atc-link,
  html body.single-product:not(#a):not(#b) form.cart button.single_add_to_cart_button {
    /* QA-0706: nowrap + letter-spacing .1em ließ „IN DEN WARENKORB" 9px über
       die Buttonkante laufen (Text 158px in 137px-Content @390) */
    flex: 1 1 150px !important; width: auto !important; min-width: 0 !important; white-space: normal !important;
    letter-spacing: 0.02em !important; line-height: 1.15 !important;
    font-size: clamp(13px, 3.4vw, 15px) !important; padding-left: 12px !important; padding-right: 12px !important;
  }
  /* Tatsächlicher Flex-Container bei Variationsprodukten ist der Wrapper, nicht form.cart */
  html body.single-product:not(#a):not(#b) .woocommerce-variation-add-to-cart { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 12px !important; }
  html body.single-product:not(#a):not(#b) .woocommerce-variation-add-to-cart .quantity { flex: 0 0 auto !important; width: clamp(104px, 30vw, 128px) !important; }
  html body.single-product:not(#a):not(#b) .woocommerce-variation-add-to-cart a.bw-atc-link,
  html body.single-product:not(#a):not(#b) .woocommerce-variation-add-to-cart a.single_add_to_cart_button,
  html body.single-product:not(#a):not(#b) .woocommerce-variation-add-to-cart .bw-atc-link,
  html body.single-product:not(#a):not(#b) .woocommerce-variation-add-to-cart button.single_add_to_cart_button {
    flex: 1 1 150px !important; width: auto !important; min-width: 0 !important; white-space: normal !important;
    letter-spacing: 0.02em !important; line-height: 1.15 !important;
    font-size: clamp(13px, 3.4vw, 15px) !important; padding-left: 12px !important; padding-right: 12px !important;
  }
  /* ── Produktkarten (Ähnliche Produkte + Shop-Grid): Titel ohne Wortbruch, Button volle Breite (clippte ~10px) ── */
  html body:not(#a):not(#b) ul.products li.product .woocommerce-loop-product__title,
  html body:not(#a):not(#b) ul.products li.product h2,
  html body:not(#a):not(#b) ul.products li.product h3 {
    overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; min-width: 0 !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
  }
  html body:not(#a):not(#b) ul.products li.product a.button,
  html body:not(#a):not(#b) ul.products li.product a.add_to_cart_button,
  html body:not(#a):not(#b) ul.products li.product .button.add_to_cart_button {
    /* width:100% + 16px-Seitenmargins (bw-card-final) ragte 16px über die
       Karte; li overflow:hidden schnitt den Button rechts ab (User-Screenshot
       05.07.). Breite muss die Margins einrechnen: */
    display: block !important; width: calc(100% - 32px) !important; min-width: 0 !important; box-sizing: border-box !important;
    white-space: normal !important; font-size: clamp(13.5px, 3.7vw, 15px) !important; font-weight: 600 !important; padding: 11px 8px !important; text-align: center !important; line-height: 1.2 !important;
  }
}
/* Marker-Ende: BW-MOBILE-PDP-END */

/* ════════ PATCH P8: PDP-Feinschliff (Agenten-Runde) ════════ */
@media (max-width: 768px){
  /* Varianten-Karten: gleiche Höhe (Label 2 Zeilen reservieren, zentriert) */
  html body.single-product:not(#a):not(#b) .bw-color-swatches__grid { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
  html body.single-product:not(#a):not(#b) a.bw-color-swatch { align-items: center !important; }
  html body.single-product:not(#a):not(#b) .bw-color-swatch__name { min-height: 2.4em !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1.2 !important; }
  /* Aktive Variante deutlicher sichtbar */
  html body.single-product:not(#a):not(#b) a.bw-color-swatch.active { border-width: 2px !important; box-shadow: 0 0 0 1px var(--bw-accent, #c8956c) inset !important; }
  /* Related-Titel: 2 Zeilen statt 1-Zeilen-Abschnitt (ganze Wörter) */
  html body:not(#a):not(#b) .related ul.products li.product .woocommerce-loop-product__title,
  html body:not(#a):not(#b) .related ul.products li.product h2,
  html body:not(#a):not(#b) .related ul.products li.product h3 { white-space: normal !important; -webkit-line-clamp: 2 !important; min-height: 2.6em !important; }
}
/* ≤360px: Related 1-spaltig (Titel+Button volle Breite) + Varianten 2×2 + Menge volle Breite */
@media (max-width: 360px){
  html body.single-product:not(#a):not(#b) .related ul.products,
  html body.single-product:not(#a):not(#b) .related .products { grid-template-columns: 1fr !important; }
  html body:not(#a):not(#b) .related ul.products li.product .woocommerce-loop-product__title { min-height: 0 !important; }
  html body.single-product:not(#a):not(#b) .bw-color-swatches__grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; }
  html body.single-product:not(#a):not(#b) a.bw-color-swatch { width: auto !important; }
  html body.single-product:not(#a):not(#b) .woocommerce-variation-add-to-cart .quantity { width: 100% !important; flex: 1 1 100% !important; }
}
/* Marker-Ende: BW-MOBILE-PDP-P8-END */

/* ════════════ BW-PREMIUM-IMAGERY — einheitliche Produktbühne (2026-06-26, ID-Boost) ════════════
   Ursache: weiße JPG-Pressefotos auf dunklem Theme ohne Bild-Bühne.
   Fix: warme Off-White-Bühne + mix-blend:multiply (Bild-Weiß verschmilzt nahtlos). ID-Boost Pflicht. */
@media (max-width: 768px){
  /* — PDP-Galerie (Haupt + Thumbnails sind .__image) — */
  html body.single-product:not(#a):not(#b) .woocommerce-product-gallery__image{
    background:#e8e0d3 !important; border:1px solid rgba(0,0,0,.06) !important;
    border-radius:16px !important; overflow:hidden !important;
    box-shadow:0 10px 28px -16px rgba(0,0,0,.7) !important;
  }
  html body.single-product:not(#a):not(#b) .woocommerce-product-gallery__image > a{ background:transparent !important; display:block !important; }
  html body.single-product:not(#a):not(#b) .woocommerce-product-gallery__image img{
    mix-blend-mode:normal !important; object-fit:contain !important;
    padding:clamp(6px,2vw,14px) !important; box-sizing:border-box !important;
  }
  /* — Warenkorb-Thumbnail — */
  html body.woocommerce-cart:not(#a):not(#b) td.product-thumbnail a,
  html body.woocommerce-cart:not(#a):not(#b) td.product-thumbnail{
    background:#e8e0d3 !important; border:1px solid rgba(0,0,0,.06) !important;
    border-radius:12px !important; overflow:hidden !important; display:block !important;
  }
  html body.woocommerce-cart:not(#a):not(#b) td.product-thumbnail img{ mix-blend-mode:normal !important; padding:6px !important; box-sizing:border-box !important; }
  /* — Varianten-Swatches → helle Produkt-Chips (Label dunkel) — */
  html body.single-product:not(#a):not(#b) a.bw-color-swatch{ background:#e8e0d3 !important; border:1px solid rgba(0,0,0,.08) !important; overflow:hidden !important; }
  html body.single-product:not(#a):not(#b) a.bw-color-swatch img{ mix-blend-mode:normal !important; }
  html body.single-product:not(#a):not(#b) .bw-color-swatch__name{ color:#1a1410 !important; background:#e8e0d3 !important; }
  html body.single-product:not(#a):not(#b) a.bw-color-swatch.active{ border-color:var(--bw-accent,#c8956c) !important; box-shadow:0 0 0 2px var(--bw-accent,#c8956c) inset !important; }
  /* — Related-Karten: Off-White-Bühne nur über dem Bild via ::before — */
  html body:not(#a):not(#b) .related li.product a.woocommerce-loop-product__link{ position:relative !important; }
  html body:not(#a):not(#b) .related li.product a.woocommerce-loop-product__link::before{
    content:'' !important; position:absolute !important; top:0 !important; left:0 !important;
    width:100% !important; aspect-ratio:1/1 !important; background:#e8e0d3 !important;
    border-radius:12px !important; border:1px solid rgba(0,0,0,.06) !important; z-index:0 !important;
  }
  html body:not(#a):not(#b) .related li.product a.woocommerce-loop-product__link img{
    position:relative !important; z-index:1 !important; mix-blend-mode:normal !important;
    aspect-ratio:1/1 !important; object-fit:contain !important; width:100% !important;
    display:block !important; padding:8px !important; box-sizing:border-box !important;
  }
  /* Text über die Bühne heben — NICHT das Badge */
  html body:not(#a):not(#b) .related li.product a.woocommerce-loop-product__link .bw-product-category,
  html body:not(#a):not(#b) .related li.product a.woocommerce-loop-product__link .woocommerce-loop-product__title,
  html body:not(#a):not(#b) .related li.product a.woocommerce-loop-product__link .bw-card-code,
  html body:not(#a):not(#b) .related li.product a.woocommerce-loop-product__link .star-rating{ position:relative !important; z-index:1 !important; }
  /* „✓ Neuware"-Badge bleibt Eck-Overlay (erstes span-Kind), kein grüner Balken */
  html body:not(#a):not(#b) .related li.product a.woocommerce-loop-product__link > span:first-child{
    position:absolute !important; top:8px !important; left:8px !important; right:auto !important; z-index:3 !important; width:auto !important;
  }
}
/* Marker-Ende: BW-PREMIUM-IMAGERY-END */

/* ════════ BW-PREMIUM-FIX2 — Cart-Update-Button + Related-Button-Clip (ID-Boost) ════════ */
@media (max-width: 768px){
  html body.woocommerce-cart:not(#a):not(#b) button[name="update_cart"]:disabled,
  html body.woocommerce-cart:not(#a):not(#b) input[name="update_cart"]:disabled{ display:none !important; }
  html body:not(#a):not(#b) ul.products li.product a.button,
  html body:not(#a):not(#b) .related ul.products li.product a.button{
    white-space:normal !important; height:auto !important; min-height:44px !important;
    overflow:visible !important; text-overflow:clip !important; line-height:1.2 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
  }
}
/* Marker-Ende: BW-PREMIUM-FIX2-END */

/* ════════════ BW-FREISTELL — freigestelltes Produkt freistehend auf Dunkel (2026-06-27) ════════════
   Wo der weiße Hintergrund entfernt ist (-nobg.png), schwebt das Produkt frei auf Dunkel
   (echter Premium-Look). jpg (z.B. Piano White) fällt automatisch auf die warme Kachel zurück. */
@media (max-width: 768px){
  /* — Galerie-Hauptbild: freistehend auf dunkler Studio-Bühne + Boden-Schatten — */
  html body.single-product:not(#a):not(#b) .woocommerce-product-gallery__image:has(img[src*="-nobg"]){
    background: radial-gradient(125% 95% at 50% 38%, #201d1a 0%, #100f0e 72%) !important;
    border: 1px solid rgba(255,255,255,.05) !important; box-shadow: none !important;
  }
  html body.single-product:not(#a):not(#b) .woocommerce-product-gallery__image:has(img[src*="-nobg"]) img{
    mix-blend-mode: normal !important;
  }
  /* — Related: freigestelltes Produkt frei auf der dunklen Karte (keine helle Kachel) — */
  html body:not(#a):not(#b) .related li.product a.woocommerce-loop-product__link:has(img[src*="-nobg"])::before{
    background: transparent !important; border-color: transparent !important;
  }
  html body:not(#a):not(#b) .related li.product a.woocommerce-loop-product__link:has(img[src*="-nobg"]) img{
    mix-blend-mode: normal !important;
  }
  /* — Swatch + Cart-Thumb: transparentes PNG sauber ohne multiply (Kachel bleibt hell) — */
  html body.single-product:not(#a):not(#b) a.bw-color-swatch:has(img[src*="-nobg"]) img,
  html body.woocommerce-cart:not(#a):not(#b) td.product-thumbnail:has(img[src*="-nobg"]) img{
    mix-blend-mode: normal !important;
  }
}
/* Marker-Ende: BW-FREISTELL-END */

/* ════════ PATCH P9: Sticky-CTA-Breite + Cart-Thumb sauber (Ursachen-Fixes) ════════ */
@media (max-width: 768px){
  /* Sticky „Weiter zur Kasse" war full-bleed (100%) -> auf Inhalts-Breite einrücken + zentriert deckeln */
  html body.woocommerce-cart:not(#a):not(#b) .wc-proceed-to-checkout a.checkout-button{
    left: 16px !important; right: 16px !important; width: auto !important; min-width: 0 !important; max-width: 520px !important; margin-left: auto !important; margin-right: auto !important;
  }
  /* Cart-Thumbnail: ganzes Produkt, kein Crop/Verzerrung */
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item td.product-thumbnail img{
    object-fit: contain !important;
  }
}
/* Marker-Ende: BW-P9-END */

/* ════════ PATCH P10: Scroll-Performance — backdrop-filter von fixed/sticky Elementen entfernen ════════
   Ursache des Scroll-Ruckelns (6-10 fps): header.bw-header (sticky) + #bw-vk-banner (fixed) hatten
   backdrop-filter:blur — der Browser rechnet den Hintergrund-Blur bei JEDEM Scroll-Frame neu.
   Header-BG ist bereits ~96% deckend -> Blur optisch vernachlässigbar, aber Performance-Killer. */
@media (max-width: 768px){
  html body header.bw-header,
  html body header.bw-header.scrolled,
  html body #bw-vk-banner{
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    background: rgba(13,13,13,0.98) !important;
  }
}
/* Marker-Ende: BW-P10-END */

/* ════════ PATCH P11: Premium-Politur Cart+Kasse (Mehr-Agenten-Kritik, verifiziert 2026-06-27) ════════
   Nur computed-verifizierte Funde. Fehlalarme verworfen: Kasse-Sternchen sind bereits Kupfer;
   „Rechnungsdetails"=DM Sans ist bewusst. */
@media (max-width: 768px){
  /* — A) Leere „Warenkorb aktualisieren"-Zeile (disabled, Gutschein aus) = Geisterband killen.
        Sobald Menge geändert wird, ent-disabled WC den Button -> :has greift nicht mehr -> Zeile sichtbar. */
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr:has(td.actions button[name="update_cart"]:disabled){ display:none !important; }
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr td.actions:has(button[name="update_cart"]:disabled){ padding:0 !important; height:0 !important; }

  /* — B) Karten-Konsistenz: Artikel-Karte == Summen-Karte (eine Material-Familie) — */
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart,
  html body.woocommerce-cart:not(#a):not(#b) .cart_totals{
    background: rgb(22,22,26) !important; border: 1px solid rgba(200,149,108,0.18) !important; border-radius: 16px !important;
  }
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item{ background: transparent !important; }

  /* — C) Produktname: 3 Zeilen statt 2 (voller Name, bei 1 Artikel kein Platzdruck) — */
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item td.product-name{ -webkit-line-clamp: 3 !important; }

  /* — D) Einzelpreis als nüchterne Sekundär-Info (kein Playfair-„Preis"-Look, kein Alt-Preis-Eindruck) — */
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item td.product-price,
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item td.product-price .amount{
    font-family: "DM Sans", sans-serif !important; font-size: 12px !important; font-weight: 500 !important; color: rgba(244,244,245,0.5) !important; letter-spacing: 0 !important;
  }

  /* — E) Kasse: Placeholder-Kontrast (war rgb(85,85,85) auf rgb(35,34,41) = zu dunkel) — */
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout input::placeholder,
  html body.woocommerce-checkout:not(#a):not(#b) form.checkout textarea::placeholder{ color: rgba(255,255,255,0.4) !important; opacity: 1 !important; }
}
/* Marker-Ende: BW-P11-END */

/* ════════ PATCH P12: Kasse-Horizontal-Überlauf + PDP-Stepper-Kontrast (Mehr-Agenten-Bug-Review 2026-06-27) ════════
   BUG (2 Agenten, 412+360): Kasse-Header-Hamburger rechts abgeschnitten. URSACHE (computed): a11y-versteckte
   Elemente NICHT geclippt -> select.select2-hidden-accessible (#billing_country/#billing_state) + label.screen-reader-text
   waren 412px breit bei left:32 -> right 444/445 -> 33px Dokument-Überlauf -> 100vw-Header wuchs auf 445 -> Icons/Hamburger
   aus dem Viewport. Real auch auf echten Geräten. Fix = korrektes sr-only-Clipping (Ursache, nicht overflow:hidden-Symptom). */
@media (max-width: 768px){
  html body:not(#a):not(#b) select.select2-hidden-accessible,
  html body.woocommerce-checkout:not(#a):not(#b) .screen-reader-text,
  html body.woocommerce-cart:not(#a):not(#b) .screen-reader-text{
    position: absolute !important; width: 1px !important; height: 1px !important; max-width: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
  }
  /* PDP-Mengen-Stepper: „+"/„−" waren rgb(136,136,136) = zu dim (wirkte „leer") -> heller */
  html body.single-product:not(#a):not(#b) .bw-qty-btn,
  html body.single-product:not(#a):not(#b) .quantity .bw-qty-btn{ color: #f4f4f5 !important; }
}
/* Marker-Ende: BW-P12-END */

/* ════════ PATCH P13: Warenkorb-Aufbau verbessern (Design-Agenten 2026-06-27) ════════
   Stepper + Zeilensumme in EINE Zeile (war gestapelt r3/r4), Abstand Artikel↔Summe straffen,
   MwSt-Zeile in der Summen-Box (Konsistenz zum neu strukturierten Drawer). */
@media (max-width: 768px){
  /* 3. Spalte für rechtsbündige Zeilensumme */
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item{ grid-template-columns: 76px minmax(0,1fr) auto !important; }
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item td.product-name{ grid-column: 2 / 4 !important; }
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item td.product-price{ grid-column: 2 / 4 !important; }
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item td.product-quantity{ grid-column: 2 !important; grid-row: 3 !important; align-self: center !important; }
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item td.product-subtotal{ grid-column: 3 !important; grid-row: 3 !important; justify-self: end !important; align-self: center !important; margin-top: 0 !important; font-size: 17px !important; font-weight: 700 !important; color: #d4a27a !important; white-space: nowrap !important; }
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item td.product-subtotal::before{ content: "Summe " !important; font-size: 11px !important; font-weight: 500 !important; color: rgba(244,244,245,0.45) !important; letter-spacing: .02em !important; }
  /* Abstand Artikel-Karte ↔ Summen-Box straffen (war ~großer Sprung) */
  html body.woocommerce-cart:not(#a):not(#b) .cart-collaterals{ margin-top: 18px !important; }
  /* MwSt-Zeile in der Summen-Box: leise, rechtsbündig, direkt unter Gesamtsumme */
  html body.woocommerce-cart:not(#a):not(#b) .cart_totals tr.bw-cart-mwst th{ border: 0 !important; padding: 2px 0 0 !important; text-align: left !important; font-size: 12px !important; font-weight: 400 !important; color: rgba(244,244,245,0.5) !important; }
  html body.woocommerce-cart:not(#a):not(#b) .cart_totals tr.bw-cart-mwst td{ border: 0 !important; padding: 2px 0 0 !important; text-align: right !important; font-size: 12px !important; font-weight: 400 !important; color: rgba(244,244,245,0.5) !important; }
  html body.woocommerce-cart:not(#a):not(#b) .cart_totals tr.bw-cart-mwst td .amount,
  html body.woocommerce-cart:not(#a):not(#b) .cart_totals tr.bw-cart-mwst td .woocommerce-Price-amount{ color: rgba(244,244,245,0.5) !important; font-weight: 400 !important; }
}
/* Marker-Ende: BW-P13-END */

/* ════════ PATCH P14: Flow-Review-Fixes (visuelle Mehr-Agenten 2026-06-27, verifiziert) ════════
   Verifiziert: (1) Kasse-Checkbox „andere Adresse" rendert nativ WEISS auf Dunkel → wirkt aktiv;
   (2) Back-to-Top-FAB (kupfer, fixed) überlappt Kassen-Formularfelder + Cart. Cart-sticky-Overlap war
   Fehlalarm (overlap=nein). */
@media (max-width: 768px){
  /* (1) Checkbox „Lieferung an andere Adresse" — dunkle Box + Kupfer-Haken statt weißem Nativ-Control */
  html body.woocommerce-checkout:not(#a):not(#b) input#ship-to-different-address-checkbox,
  html body.woocommerce-checkout:not(#a):not(#b) .woocommerce-shipping-fields input[type="checkbox"]{
    -webkit-appearance: none !important; appearance: none !important;
    width: 22px !important; height: 22px !important; flex: 0 0 auto !important;
    border: 1.5px solid rgba(200,149,108,0.55) !important; border-radius: 6px !important;
    background: rgba(255,255,255,0.04) !important; position: relative !important; cursor: pointer !important; vertical-align: middle !important;
  }
  html body.woocommerce-checkout:not(#a):not(#b) input#ship-to-different-address-checkbox:checked,
  html body.woocommerce-checkout:not(#a):not(#b) .woocommerce-shipping-fields input[type="checkbox"]:checked{
    background: #c8956c !important; border-color: #c8956c !important;
  }
  html body.woocommerce-checkout:not(#a):not(#b) input#ship-to-different-address-checkbox:checked::after,
  html body.woocommerce-checkout:not(#a):not(#b) .woocommerce-shipping-fields input[type="checkbox"]:checked::after{
    content: "" !important; position: absolute !important; left: 7px !important; top: 3px !important;
    width: 5px !important; height: 10px !important; border: solid #1a1410 !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg) !important;
  }
  /* (2) Back-to-Top-FAB auf Cart + Kasse ausblenden (überlappt Formular/Summen, dort nicht nötig) */
  html body.woocommerce-cart:not(#a):not(#b) .bw-back-to-top,
  html body.woocommerce-checkout:not(#a):not(#b) .bw-back-to-top{ display: none !important; }
}
/* Marker-Ende: BW-P14-END */

/* ════════ PATCH P15: Echte-Handy-Funde (User-Screenshots + Mehr-Agenten 2026-06-27, computed-verifiziert) ════════
   (X-Drawer-Bug = Legacy-Duplikat, separat in bw-cart-drawer.js gefixt.) */
@media (max-width: 768px){
  /* (1) Startseite-Hero: Reihenfolge Titel → Bild → Preis (User-Wunsch). content via display:contents
        auflösen, damit Bild zwischen Beschreibung und Preis-Block einsortiert werden kann; jedes
        content-Kind hat eigene margin-bottom -> Grid-gap:0, Kinder einzeln zentriert. */
  html body:not(#a):not(#b) .bw-hero__grid{ display: flex !important; flex-direction: column !important; gap: 0 !important; align-items: stretch !important; }
  html body:not(#a):not(#b) .bw-hero__content{ display: contents !important; }
  html body:not(#a):not(#b) .bw-hero__kicker{ order: 1 !important; align-self: center !important; text-align: center !important; }
  html body:not(#a):not(#b) .bw-hero__title{ order: 2 !important; text-align: center !important; }
  html body:not(#a):not(#b) .bw-hero__desc{ order: 3 !important; text-align: center !important; }
  html body:not(#a):not(#b) .bw-hero__showcase{ order: 4 !important; margin: 0 auto 1.8rem !important; }
  html body:not(#a):not(#b) .bw-hero__price{ order: 5 !important; justify-content: center !important; }
  html body:not(#a):not(#b) .bw-hero__colors{ order: 6 !important; justify-content: center !important; }
  html body:not(#a):not(#b) .bw-hero__actions{ order: 7 !important; justify-content: center !important; }
  html body:not(#a):not(#b) .bw-hero__usp{ order: 8 !important; justify-content: center !important; }

  /* (2) PDP-Rating: Sterne + „4,5 · 38 Bewertungen" auf EINE Zeile. Ursache: .bw-sp-rating__link war
        display:block + min-height:44px (Text oben) UND hatte border-bottom (= die schwebende Linie). */
  html body.single-product:not(#a):not(#b) .bw-sp-rating{ display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: nowrap !important; border-bottom: 0 !important; }
  html body.single-product:not(#a):not(#b) .bw-sp-rating .star-rating{ display: inline-block !important; float: none !important; vertical-align: middle !important; line-height: 1 !important; height: 1em !important; margin: 0 !important; top: 0 !important; }
  html body.single-product:not(#a):not(#b) .bw-sp-rating .bw-sp-rating__link{ display: inline-flex !important; align-items: center !important; min-height: 0 !important; height: auto !important; border-bottom: 0 !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; }

  /* (3) Kasse-Checkbox „andere Adresse": saß allein in großer Karte (wirkte leer/verbuggt). Karte abflachen +
        Checkbox+Label als saubere, vertikal zentrierte Inline-Zeile. */
  html body.woocommerce-checkout:not(#a):not(#b) .woocommerce-shipping-fields{ border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 6px 0 !important; }
  html body.woocommerce-checkout:not(#a):not(#b) #ship-to-different-address{ margin: 0 !important; }
  html body.woocommerce-checkout:not(#a):not(#b) #ship-to-different-address label{ display: flex !important; align-items: center !important; gap: 12px !important; cursor: pointer !important; margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; }

  /* (4) Kasse-Bestellübersicht: dunkler „PRODUKT | ZWISCHENSUMME"-Kasten (thead) auf Mobil raus — redundant,
        die Zeilen sind selbsterklärend. */
  html body.woocommerce-checkout:not(#a):not(#b) .woocommerce-checkout-review-order-table thead,
  html body.woocommerce-checkout:not(#a):not(#b) #order_review thead{ display: none !important; }
}
/* Marker-Ende: BW-P15-END */

/* ════════ PATCH P16: Shop-/Sortiment-Seite mobil auf Top-Niveau (Mehr-Agenten 2026-06-27) ════════
   Verifiziert: Karten-Buttons nicht auf Baseline (Titel 1 vs 2 Zeilen → Höhe driftet); Bild auf hellgrau
   statt Marken-Kachel. Fehlalarme verworfen: kein Doppel-Button (1/Karte), CTAs sind ALLE gefüllt-kupfer. */
@media (max-width: 768px){
  /* 2-spaltiges Raster (74 Produkte → premium + vergleichbar + halbe Scroll-Länge); ul ist bereits grid */
  html body:not(#a):not(#b) .woocommerce ul.products,
  html body:not(#a):not(#b) ul.products{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 14px !important; }
  html body:not(#a):not(#b) ul.products li.product{ width: auto !important; max-width: none !important; margin: 0 !important; float: none !important; display: flex !important; flex-direction: column !important; }
  /* Card-Baseline: Titel reserviert 2 Zeilen, Button immer am Kartenboden (gleiche Höhe) */
  html body:not(#a):not(#b) ul.products li.product .woocommerce-loop-product__title{ min-height: 2.6em !important; line-height: 1.3 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; font-size: 15px !important; }
  html body:not(#a):not(#b) ul.products li.product .price{ margin: 3px 0 11px !important; }
  html body:not(#a):not(#b) ul.products li.product a.button,
  html body:not(#a):not(#b) ul.products li.product .button{ margin-top: auto !important; font-size: clamp(13.5px, 3.7vw, 15px) !important; font-weight: 600 !important; padding-left: 8px !important; padding-right: 8px !important; min-height: 46px !important; }
  /* Bild-Kachel konsistent zu Cart/Related (warm #e8e0d3, freigestelltes Produkt schwebt) */
  html body:not(#a):not(#b) ul.products li.product a.woocommerce-loop-product__link img,
  html body:not(#a):not(#b) ul.products li.product img.attachment-woocommerce_thumbnail{ background: #e8e0d3 !important; border-radius: 12px !important; padding: 8px !important; box-sizing: border-box !important; aspect-ratio: 1/1 !important; object-fit: contain !important; width: 100% !important; height: auto !important; }
  /* Marke-Eyebrow lesbarer, Preis als zweitstärkstes Element */
  html body:not(#a):not(#b) ul.products li.product .bw-product-brand,
  html body:not(#a):not(#b) ul.products li.product .bw-product-category{ color: rgba(244,244,245,0.6) !important; font-size: 11px !important; }
  html body:not(#a):not(#b) ul.products li.product .price{ font-size: 17px !important; font-weight: 700 !important; }
  html body:not(#a):not(#b) ul.products li.product .star-rating{ float: none !important; margin: 2px 0 6px !important; }
  /* Marken-Chips: rechter Fade als Scroll-Hinweis (war hart abgeschnitten = wirkte wie Bug) */
  html body:not(#a):not(#b) .bw-brand-list{ -webkit-mask-image: linear-gradient(90deg, #000 87%, transparent 100%) !important; mask-image: linear-gradient(90deg, #000 87%, transparent 100%) !important; }
}
/* ≤360px: 2 Spalten BEIBEHALTEN (User-Vorgabe „2 spalten behalten"); Gap etwas enger.
   Verifiziert @320: Karte w=137, Button „Auswählen"/„In den Korb" nicht geclippt, r=304 (passt). */
@media (max-width: 360px){
  html body:not(#a):not(#b) .woocommerce ul.products,
  html body:not(#a):not(#b) ul.products{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
}
/* Marker-Ende: BW-P16-END */

/* ════════ PATCH P17: FAB-Überlapp im Shop (echter Handy-Fund, verifiziert scrollY=640) ════════
   Der kupferne Back-to-Top-FAB (fixed unten rechts) liegt beim Scrollen über den kupfernen Karten-Buttons
   der rechten Spalte = „komisch überlappt" (User). Karten füllen die Breite → FAB überlappt unvermeidlich.
   Fix: FAB auf Shop/Produkt-Archiven ausblenden; wo er bleibt (Home/PDP) dezent dunkel statt Kupfer-Blob. */
@media (max-width: 768px){
  html body.woocommerce-shop:not(#a):not(#b) .bw-back-to-top,
  html body.post-type-archive-product:not(#a):not(#b) .bw-back-to-top,
  html body.tax-product_cat:not(#a):not(#b) .bw-back-to-top,
  html body.tax-product_tag:not(#a):not(#b) .bw-back-to-top{ display: none !important; }
  html body:not(#a):not(#b) .bw-back-to-top{ width: 40px !important; height: 40px !important; background: rgba(22,22,26,0.82) !important; border: 1px solid rgba(200,149,108,0.45) !important; box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important; color: #c8956c !important; }
  html body:not(#a):not(#b) .bw-back-to-top svg{ stroke: #c8956c !important; fill: none !important; }
}
/* Marker-Ende: BW-P17-END */

/* ════════ PATCH P18: Systematischer Mobil-Audit (Mehr-Agenten + patchright-Messung 2026-06-28) ════════
   Jeder Fund per getBoundingClientRect/computed verifiziert; Agent-Fehlalarme verworfen
   (Announce-„Overflow", „Button überlappt Summe", „Gesamtsumme klebt", Versand-Tabelle „kollidiert" —
   alles widerlegt: fixed-Button, 12px-Gap vorhanden, Zellen stoßen nur an).
   BEHOBEN (gemessen 320–430):
   (A) Shop/Archiv 74px H-Overflow @≤414 = ungeklipptes .screen-reader-text (position:absolute, statische
       x≈393). clip() allein wirkt NICHT (Element bleibt im Layout) → links pinnen. Heilt ICB → 320.
   (B) Warenkorb-Zeile @≤375: kumulatives Container-Padding (16+16+12=44/Seite) quetschte die Karte auf
       230px → 1fr-Spalte kollabierte auf 32px → Stepper(118) quoll über die Summe + Titel unter das ×.
       Padding gekillt (Karte 288), Zeile width:100%, Summe unter den Stepper gestapelt, Name mit ×-Freiraum.
   (C) PDP-Tabs @320: 3×1fr-Grid clippte „Technische Daten" → scrollbare Tabs mit vollen Labels.
   REIN VISUELL — CC-Gateway/3DS/Pipeline unberührt. Rollback: diesen Block entfernen. */
@media (max-width: 768px){
  /* (A) sr-only/select2-Label nie nach rechts überlaufen lassen (links pinnen statt nur clippen) */
  html body:not(#a):not(#b) .screen-reader-text:not(:focus):not(:focus-within){ left: 0 !important; right: auto !important; }

  /* (C) PDP-Tabs: horizontal scrollbar statt 3×1fr-Truncation; volle Labels, keine Clip */
  html body:not(#a):not(#b) .woocommerce-tabs ul.tabs,
  html body:not(#a):not(#b) ul.tabs.wc-tabs,
  html body:not(#a):not(#b) .wc-tabs{ display: flex !important; grid-template-columns: none !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  /* QA-0706: Scrollbarkeit sichtbar machen (versteckter Balken + gekappter
     REZENSIONEN-Tab wirkte wie Clipping-Bug) — dünner Kupfer-Indikator wie Trust-Bar */
  html body:not(#a):not(#b) .woocommerce-tabs ul.tabs,
  html body:not(#a):not(#b) .wc-tabs{ scrollbar-width: thin !important; scrollbar-color: rgba(200,149,108,0.55) transparent !important; padding-bottom: 4px !important; }
  html body:not(#a):not(#b) .woocommerce-tabs ul.tabs::-webkit-scrollbar,
  html body:not(#a):not(#b) .wc-tabs::-webkit-scrollbar{ display: block !important; height: 4px !important; }
  html body:not(#a):not(#b) .woocommerce-tabs ul.tabs::-webkit-scrollbar-thumb,
  html body:not(#a):not(#b) .wc-tabs::-webkit-scrollbar-thumb{ background: rgba(200,149,108,0.55) !important; border-radius: 2px !important; }
  html body:not(#a):not(#b) .woocommerce-tabs ul.tabs li,
  html body:not(#a):not(#b) .wc-tabs li{ flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; overflow: visible !important; }
  html body:not(#a):not(#b) .woocommerce-tabs ul.tabs li a,
  html body:not(#a):not(#b) .wc-tabs li a{ white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; width: auto !important; padding: 12px 7px !important; }

  /* (B0) Warenkorb: kumulatives Container-Padding killen (Spiegel von P0/Checkout) → Karte breiter */
  html body.woocommerce-cart:not(#a):not(#b) article.bw-page-content,
  html body.woocommerce-cart:not(#a):not(#b) .woocommerce{ padding-left: 0 !important; padding-right: 0 !important; }
  /* (B) Zeile volle Breite, damit die 1fr-Spalte expandiert (war auf 32px kollabiert) */
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item{ width: 100% !important; box-sizing: border-box !important; }
}
/* (B) @≤375: Summe unter den Stepper stapeln (eine Zeile passt unter 375 nicht) + ×-Freiraum am Namen */
@media (max-width: 375px){
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item td.product-name{ padding-right: 56px !important; }
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item td.product-quantity{ grid-column: 2 !important; grid-row: 3 !important; }
  html body.woocommerce-cart:not(#a):not(#b) table.shop_table.cart tbody tr.cart_item td.product-subtotal{ grid-column: 2 !important; grid-row: 4 !important; justify-self: start !important; align-self: start !important; margin-top: 8px !important; }
}
/* Marker-Ende: BW-P18-END */

/* ════════ PATCH P19: Cookie-Banner mobil — platzeffizient + premium (v2, Mehr-Agenten 2026-06-28) ════════
   Probleme v1: fixe 340px-Karte (Overflow @320) + Höhe 363px (lange ~6-Zeilen-Complianz-Botschaft = 118px).
   v2 (3 Design-Agenten + Messung, validiert @320–430): (a) Botschaft serverseitig gekürzt
   (info-consistency.php str_replace) = größter Hebel; (b) randbündige kompakte Karte (12px-Ränder,
   max-width 460 zentriert) auf #16161A mit feiner Copper-Top-Hairline (Premium-Akzent); (c) Buttons als
   GRID: „Alle akzeptieren"(Copper) | „Nur notwendige"(Ghost) GLEICH BREIT nebeneinander (gemessen: passen
   @320, je ~128px; gleichwertig = DSGVO-konform, kein Dark-Pattern), „Einstellungen" als dezenter Link
   voll darunter; (d) iOS-Safe-Area additiv + max-height/overflow-Fallback (Landscape). Ergebnis 363→214px
   (−41%). Spezifität via ID `#cmplz-cookiebanner-container` schlägt die 4-Klassen-!important des WPCode-
   Snippets #4964; nur ≤600px (Desktop unberührt). `.cmplz-information` NICHT anfassen (bleibt versteckt —
   v1-Falle: display:flex blendete „Dienste/Vendors verwalten" ein). REIN OPTISCH, Consent-Logik intakt. */
@media (max-width: 600px){
  html body #cmplz-cookiebanner-container .cmplz-cookiebanner.banner-1{
    left: 12px !important; right: 12px !important; bottom: 12px !important; top: auto !important;
    width: auto !important; max-width: 460px !important; margin: 0 auto !important;
    padding: 14px 15px calc(13px + env(safe-area-inset-bottom, 0px)) !important;
    background: #16161A !important; border: 1px solid rgba(255,255,255,0.08) !important;
    border-top: 1px solid rgba(200,149,108,0.55) !important;
    border-radius: 14px !important; box-shadow: 0 12px 36px rgba(0,0,0,0.55) !important;
    max-height: calc(100dvh - 24px) !important; overflow-y: auto !important; overscroll-behavior: contain !important;
  }
  html body #cmplz-cookiebanner-container .cmplz-cookiebanner.banner-1 .cmplz-header{ display: none !important; }
  html body #cmplz-cookiebanner-container .cmplz-cookiebanner.banner-1 .cmplz-body{ margin: 0 !important; padding: 0 !important; }
  html body #cmplz-cookiebanner-container .cmplz-cookiebanner.banner-1 .cmplz-message{ font-family: "DM Sans", sans-serif !important; font-size: 12.5px !important; line-height: 1.45 !important; color: #F4F4F5 !important; margin: 0 0 12px !important; padding: 0 !important; }
  html body #cmplz-cookiebanner-container .cmplz-cookiebanner.banner-1 .cmplz-buttons{ display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 0 !important; width: 100% !important; }
  html body #cmplz-cookiebanner-container .cmplz-cookiebanner.banner-1 .cmplz-buttons .cmplz-accept,
  html body #cmplz-cookiebanner-container .cmplz-cookiebanner.banner-1 .cmplz-buttons .cmplz-deny{
    min-height: 46px !important; margin: 0 !important; box-sizing: border-box !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-family: "DM Sans", sans-serif !important; font-size: 13.5px !important; font-weight: 600 !important;
    border-radius: 10px !important; padding: 0 8px !important; white-space: nowrap !important;
  }
  html body #cmplz-cookiebanner-container .cmplz-cookiebanner.banner-1 .cmplz-buttons .cmplz-accept{ background: #C8956C !important; color: #1A1410 !important; border: 0 !important; }
  html body #cmplz-cookiebanner-container .cmplz-cookiebanner.banner-1 .cmplz-buttons .cmplz-accept:active{ background: #BC885E !important; }
  html body #cmplz-cookiebanner-container .cmplz-cookiebanner.banner-1 .cmplz-buttons .cmplz-deny{ background: #1D1D22 !important; color: #F4F4F5 !important; border: 1px solid rgba(255,255,255,0.18) !important; }
  html body #cmplz-cookiebanner-container .cmplz-cookiebanner.banner-1 .cmplz-buttons .cmplz-deny:active{ background: #25252B !important; }
  html body #cmplz-cookiebanner-container .cmplz-cookiebanner.banner-1 .cmplz-buttons .cmplz-view-preferences{ grid-column: 1 / -1 !important; min-height: 34px !important; margin: 0 !important; background: transparent !important; color: #9A9A9A !important; border: 0 !important; font-family: "DM Sans", sans-serif !important; font-size: 12px !important; font-weight: 500 !important; text-decoration: underline !important; display: flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; }
  html body #cmplz-cookiebanner-container .cmplz-cookiebanner.banner-1 .cmplz-documents{ margin: 11px 0 0 !important; }
  html body #cmplz-cookiebanner-container .cmplz-cookiebanner.banner-1 .cmplz-documents a{ font-size: 11px !important; color: #8A8A8A !important; }
}
/* Marker-Ende: BW-P19-END */

/* P19+: Vertrauens-Lead in der Cookie-Botschaft („Wir respektieren deine Privatsphäre.") —
   serverseitig per info-consistency.php in .cmplz-message injiziert; hier als Block-Headline
   gestylt. ALLE Breiten (auch Desktop). */
html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message .bw-cmplz-lead{ display: block !important; font-weight: 700 !important; color: #F4F4F5 !important; font-size: 13.5px !important; line-height: 1.3 !important; margin: 0 0 5px !important; letter-spacing: .2px !important; }
/* Marker-Ende: BW-P19LEAD-END */

/* ════════ BW-UX-0705 — Handy-Funde 05.07.2026 (User-Screenshots, computed-verifiziert @390px) ════════
   (1) Header-Umschaltung atomar: Announce-Collapse (height/opacity, 0.2–0.3s)
       und Header-top (28→0, 0.3s) waren getrennte Transitions → dazwischen ein
       durchsichtiger 28px-Streifen, in dem Seiteninhalt am Logo durchschien
       (Shop-Screenshot "Gratis nach DE, AT"). Animiertes top auf dem fixed
       Header provozierte zudem Compositing-Aussetzer (Header malte frameweise
       gar nicht — headless reproduziert). Beide Zustände hängen an EINER
       Body-Klasse: ohne Transition schalten sie im selben Frame → kein Fenster.
   (2) Header voll deckend: P10 ließ rgba(13,13,13,.98) — heller Text darunter
       blieb schwach lesbar. Announce-Bar behält ihren eigenen opaken Verlauf.
   (3) Logo vertikal zentriert: min-height 44 (Tap-Target) + display:block +
       line-height 30px = Schriftzug ~7px über Icon-Mitte (Bild-2-Feedback).
       Gutter 12→16px = Logo bündig mit Karten/Breadcrumb-Kante.
   (4) Shop-Toolbar-Zähler: nowrap-Monozeile ab x=32 endete bei right=394 —
       einzige Überlaufquelle der Shop-Seite (bodyScrollWidth 394 statt 390).
   (5) Related-Sektion PDP: Doppel-Gutter (margin 24 + padding 24 aus parent
       woocommerce.css) quetschte Karten auf 124px. 16px-Gutter wie Shop-Grid.
   Button-Clip selbst: im BW-MOBILE-PDP-Block korrigiert (width 100% →
   calc(100% - 32px)); Badge-Anker li{position:relative} in pdp-polish.php. */
@media (max-width: 900px) {
  html body .bw-announce,
  html body .bw-announce.collapsed,
  html body .bw-announce:not(.collapsed) {
    transition: none !important;
  }
  html body header.bw-header,
  html body.announce-collapsed header.bw-header {
    transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  }
  html body:not(#zz) header.bw-header .bw-logo {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    padding: 0 !important;
  }
  html body:not(#zz) header.bw-header .bw-container {
    padding-inline: 16px !important;
  }
}
@media (max-width: 768px) {
  html body header.bw-header,
  html body header.bw-header.scrolled {
    background: rgb(13, 13, 13) !important;
  }
  html body:not(#zz) .bw-shop-toolbar .woocommerce-result-count,
  html body:not(#zz) .bw-shop-toolbar__count {
    white-space: normal !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }
  html body.single-product:not(#zz) .related.products {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }
}
/* Marker-Ende: BW-UX-0705-END */

/* ════════ BW-QA-0706 — Gesamtshop-QA (Multi-Agent-Review, 25 bestätigte Cluster) ════════
   Nur die mobile.css-Anteile; Rest in pdp.css/pdp-polish/front-page/archive-product/
   footer/style.css(parent)/info-pages. Jede Regel referenziert ihren Cluster. */
@media (max-width: 768px) {
  /* [cart-thumbnail-clipped] Anchor war display:block+overflow:hidden (64×64),
     Bild 70×72 mit margin 32px 0 → Maschine ragte 41px unter die Kachel. */
  html body.woocommerce-cart:not(#zz) td.product-thumbnail a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
  }
  html body.woocommerce-cart:not(#zz) td.product-thumbnail img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* [checkout-shipping-toggle-overlap] Ungeclearte float-h3 ließ die
     Anmerkungen-Karte 11.6px ins 2-zeilige Toggle-Label ragen. */
  html body.woocommerce-checkout:not(#zz) #ship-to-different-address {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }
  html body.woocommerce-checkout:not(#zz) .woocommerce-additional-fields {
    clear: both !important;
    margin-top: 16px !important;
  }

  /* [minicart-remove-tap-24px] Drawer-× hatte inline 24×24px, 10px neben dem
     Produktlink — Fehltipp-Risiko direkt nach jedem Add-to-Cart. */
  html body:not(#zz) #bw-cart-drawer a.remove {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 6px !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  /* [zahlart-rechnung-layoutbruch] checkout.css-Kursiv/Zentrierung schlug die
     inline-Styles der deaktivierten Rechnungs-Option; Radio hing in V-Mitte. */
  html body.woocommerce-checkout:not(#zz) #payment li.inv-dis,
  html body.woocommerce-checkout:not(#zz) #payment li.inv-dis span,
  html body.woocommerce-checkout:not(#zz) #payment li.inv-dis div,
  html body.woocommerce-checkout:not(#zz) #payment li.inv-dis strong {
    font-style: normal !important;
    font-family: 'DM Sans', sans-serif !important;
    text-align: left !important;
  }
  html body.woocommerce-checkout:not(#zz) #payment li.inv-dis label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    justify-content: flex-start !important;
  }
  html body.woocommerce-checkout:not(#zz) #payment li.inv-dis input[type="radio"] {
    margin-top: 3px !important;
    flex: 0 0 auto !important;
  }

  /* [tiny-fonts-unter-11px] Filter-Blocktitel (VERFÜGBARKEIT/PREIS) 10.56px → 11.5px */
  html body:not(#zz) .bw-shop-sidebar .bw-sidebar-block__title {
    font-size: 11.5px !important;
    letter-spacing: 0.14em !important;
  }

  /* [tap-ziele-unter-44px] Kasse: „Verkostung buchen"-Inline-Link 14px hoch →
     größere Hit-Area ohne Layoutsprung; PDP-Rating-Link ebenso. */
  html body.woocommerce-checkout:not(#zz) #order_review a[href*="verkostung"] {
    display: inline-block !important;
    padding: 12px 4px !important;
    margin: -10px 0 !important;
  }
  html body.single-product:not(#zz) .bw-sp-rating .bw-sp-rating__link {
    padding: 12px 4px !important;
    margin: -12px 0 !important;
  }

  /* [pdp-gallery-slide-bleed, R2] FlexSlider misst Slides 2px schmaler als
     den Viewport — der NÄCHSTE Slide lugte als heller 2px-Streifen rechts
     rein (sichtbar bei hellen Bühnen, z. B. Rivelia). Nicht-aktive Slides
     zeigen ihre Bühne jetzt erst, wenn sie aktiv sind → Streifen = Seiten-
     hintergrund = unsichtbar. Resize-Kick in pdp-polish bleibt bestehen. */
  /* Slides sind DIVs: .flex-viewport > .__wrapper > div.__image (Slide = Bühne
     in einem Element); .flex-viewport existiert erst nach FlexSlider-Init →
     Erstbild vor Init behält seine Bühne. */
  html body.single-product:not(#zz):not(#zz2) .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(.flex-active-slide) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* [tap-ziele, R2] Sterne-Auswahl im Bewertungsformular: 24×24 → 38×38 */
  html body.single-product:not(#zz) #review_form p.stars a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    margin-right: 2px !important;
  }
}
/* Marker-Ende: BW-QA-0706-END */