/* ═══════════════════════════════════════════
   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;
  }
}