/* ============================================================
   BOOKMYSPHERE — MOBILE RESPONSIVE SYSTEM
   Mobile-First Breakpoints
   ============================================================ */

/* ── Large Desktop (>1200px) ── */
@media (min-width: 1200px) {
  .container { padding: 0 var(--space-xl); }
  .category-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .hero-visual { display: none; }
  .hero { padding: var(--space-2xl) 0; }

  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .deals-grid { grid-template-columns: repeat(3, 1fr); }
  .insta-grid { grid-template-columns: repeat(4, 1fr); }
  .grid-4 { grid-template-columns: repeat(3, 1fr); }

  .product-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .cart-grid { grid-template-columns: 1fr; }
  .checkout-grid { grid-template-columns: 1fr; }
  .order-summary { position: static; }
  .checkout-summary { position: static; }
}

/* ── Mobile Large (≤768px) ── */
@media (max-width: 768px) {
  :root {
    --space-2xl: 36px;
    --space-3xl: 48px;
  }
  body { padding-bottom: 68px; } /* space for mobile nav */

  /* Header */
  .header-topbar { display: none; }
  .header-main .container {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }
  .logo-text .tagline { display: none; }
  .logo-text .name { font-size: 16px; }
  .logo-icon { width: 34px; height: 34px; font-size: 16px; }
  .header-action-btn { width: 40px; height: 40px; }
  .header-nav { display: none; }

  /* Hero */
  .hero { padding: var(--space-xl) 0; text-align: center; }
  .hero-eyebrow { justify-content: center; }
  .hero-cta-group { justify-content: center; }
  .hero-trust { justify-content: center; }

  /* Sections */
  .section { padding: var(--space-xl) 0; }
  .section-header-row { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }

  /* Categories */
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .category-card { aspect-ratio: 4/5; }
  .category-card-emoji { font-size: 44px; }

  /* Deals */
  .deals-grid { grid-template-columns: repeat(2, 1fr); }
  .deal-card-img { height: 150px; font-size: 48px; }

  /* Products */
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .product-card-body { padding: 10px; }
  .product-price { font-size: 16px; }

  /* Trust */
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .trust-card { padding: var(--space-md); }
  .trust-card-icon { width: 52px; height: 52px; font-size: 22px; }

  /* Instagram */
  .insta-grid { grid-template-columns: repeat(3, 1fr); }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Product Page */
  .product-grid { grid-template-columns: 1fr; }
  .gallery-main { font-size: 80px; }
  .product-main-price { font-size: 26px; }
  .product-cta-group { flex-direction: column; }
  .review-summary { flex-direction: column; }
  .review-big-num { font-size: 48px; }
  .form-row { grid-template-columns: 1fr; }

  /* Cart */
  .cart-grid { grid-template-columns: 1fr; }
  .cart-item-img { width: 70px; height: 70px; font-size: 30px; }

  /* Checkout */
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-form-section { padding: var(--space-md); }

  /* Mobile Nav */
  .mobile-nav { display: block; }

  /* Compare */
  .affiliate-deal-card { flex-direction: column; text-align: center; }
  .aff-img { width: 80px; height: 80px; margin: 0 auto; }

  /* Countdown */
  .countdown-strip { flex-direction: column; gap: 10px; }
  .countdown-number { font-size: 18px; min-width: 44px; }
}

/* ── Mobile Small (≤480px) ── */
@media (max-width: 480px) {
  .container { padding: 0 12px; }
  h1 { font-size: 26px; }
  h2 { font-size: 20px; }

  .hero-cta-group .btn { flex: 1; font-size: 13px; }
  .hero-trust { gap: 10px; }
  .trust-item { font-size: 12px; }

  .category-grid { gap: 8px; }
  .category-card-emoji { font-size: 36px; }
  .category-card-label { font-size: 13px; }

  .deals-grid { grid-template-columns: 1fr; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .product-card-body { padding: 8px; }

  .insta-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }

  .cart-item { flex-direction: column; }
  .cart-item-img { width: 100%; height: 160px; font-size: 60px; }

  .checkout-form-section { border-radius: var(--radius-md); }

  .compare-table th, .compare-table td { padding: 10px 12px; font-size: 13px; }
}

/* ── Thumb-friendly tap targets ── */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 48px; }
  .add-to-cart-btn { min-height: 48px; }
  .variant-btn { min-height: 48px; }
  .nav-link { padding: 12px 16px; }
  .tab-btn { padding: 14px 20px; }
  .faq-question { padding: var(--space-md) 0; min-height: 52px; }
  .product-action-btn { width: 44px; height: 44px; }
  .product-card-actions { opacity: 1; transform: none; } /* Always visible on touch */
}

/* ── Safe area support (iPhone notch / home bar) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-nav { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}