/**
 * Mobile Conversion CSS Fixes
 * Applied to all pages via serveHtml injection
 * Source: Mobile Conversion Audit Report #562042
 */

/* ═══════════════════════════════════════════════════════════════
   FIX 1: Toast notification — center on mobile screen
   Problem: Toast fires at top: 823px on a 812px viewport (off-screen)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .toast {
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) translateY(-120px) !important;
    width: 90% !important;
    max-width: 320px !important;
    z-index: 9999 !important;
  }
  .toast.show {
    transform: translateX(-50%) translateY(0) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 2: Sticky "Add to Cart" bar on mobile product pages
   Problem: ATC button is at 893px on 812px viewport — below the fold
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .atc-sticky-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 12px 16px !important;
    background: #fff !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
    z-index: 100 !important;
    display: flex !important;
    gap: 1rem !important;
    align-items: center !important;
  }

  .atc-sticky-bar .atc-btn {
    width: 100% !important;
    height: 52px !important;
    font-size: 16px !important;
  }

  /* Hide the non-sticky ATC block on mobile when sticky bar is present */
  .atc-block {
    /* Hide original ATC block on mobile — sticky bar replaces it */
    display: none !important;
  }

  /* Show sticky bar when ATC section is visible (CSS-only toggle via JS adds .has-sticky) */
  .atc-sticky-bar {
    display: flex !important;
  }
}

/* Mobile: product info panel needs bottom padding for sticky bar clearance */
@media (max-width: 640px) {
  .product-info {
    padding-bottom: 80px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 3: Nav link tap targets (44×44px minimum per WCAG)
   Problem: All nav links are 18px tall — 13 elements fail 44px rule
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .nav-links {
    gap: 0 !important;
  }

  .nav-links a:not(.cart-btn),
  .site-nav-links a:not(.cart-btn) {
    padding: 13px 8px !important;
    font-size: 15px !important;
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .nav-inner {
    gap: 0.5rem !important;
  }

  .cart-btn {
    min-height: 44px !important;
    padding: 0.5rem 0.75rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 4: Cart "Remove" button tap target
   Problem: Remove button is 46×16px — nearly impossible to tap
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .cart-item .remove-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 5: Order summary position on mobile checkout
   Problem: Form appears before order summary — user fills details
             before seeing the total
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .checkout-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  .order-summary {
    order: -1 !important;
  }

  /* Ensure checkout form doesn't go too tall */
  .checkout-form {
    order: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BONUS: Mobile cart item layout improvements
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .cart-item {
    padding: 1rem !important;
  }

  .item-actions {
    padding-top: 0.75rem !important;
  }

  .qty-control {
    height: 40px !important;
  }

  .qty-btn {
    width: 40px !important;
    height: 40px !important;
  }

  .qty-display {
    height: 40px !important;
    min-width: 40px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BONUS: Mobile product detail image panel
   Better image sizing on small screens
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .product-image-box {
    height: 300px !important;
    font-size: 5rem !important;
  }
}