/* ═══════════════════════════════════════════
   Brühwerk 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;
  }
}
/* ═══════════════════════════════════════════════════════════════════════
   Brühwerk-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, mehr Platz für Close-Button */
  html body #bw-vk-banner {
    padding: 12px 56px 12px 16px !important;
    font-size: 12px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  html body #bw-vk-banner > span {
    line-height: 1.4 !important;
    flex: 1 1 auto !important;
    min-width: 160px !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 — Brühwerk 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: "Brühwerk." !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 "Brühwerk." 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: "Brühwerk." !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 → Brühwerk. 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 Brühwerk Header-Bar ── */
  html body .bw-mobile-menu .bw-mobile-menu-inner::before {
    content: "Brühwerk." !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 Brühwerk.-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 Brühwerk-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 Brühwerk-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 */
  }

  /* Brühwerk-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: 9px !important;
  }
  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: 14px 56px 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !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 ── */
  html body .bw-shop-pagination,
  html body nav.woocommerce-pagination,
  html body .woocommerce-pagination {
    margin: 24px 16px !important;
    padding: 16px !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 {
    gap: 6px !important;
    justify-content: center !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
      → "Brühwerk." 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 "Brühwerk." 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;
  }
  /* Brühwerk'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) {

  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;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 20px !important;
    margin: 16px 0 24px !important;
    min-height: 56px !important;
    font-size: 14px !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;
  }
}