/* =============================================================
   Miraaya Jewels — Mobile / Responsive refinements
   Loaded after custom.css on every page.
   ============================================================= */

/* Prevent any accidental sideways scrolling */
html, body { max-width: 100%; overflow-x: hidden; }

/* Flex children must be allowed to shrink below their content width */
body > *, main, main > *, .flex-1 { min-width: 0; }

/* Media never forces layout wider than its container */
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }
img[class*="h-full"] { height: 100%; }

/* Long words / SKUs / emails should wrap instead of stretching a page */
h1, h2, h3, h4, p, a, span, td, th, li { overflow-wrap: anywhere; }

/* Tables (admin panel, order summaries) scroll inside their own box */
table { width: 100%; }
.table-wrap, .overflow-x-auto { -webkit-overflow-scrolling: touch; }

@media (max-width: 1024px) {
  table { display: block; overflow-x: auto; white-space: nowrap; }
  table img { max-width: 48px; }
}

@media (max-width: 767px) {
  /* Comfortable base sizing */
  html { -webkit-text-size-adjust: 100%; }

  /* Hero */
  .hero-slider { height: 68vh; min-height: 420px; }
  .hero-content { padding: 1.25rem; }
  .hero-content h1, .hero-content h2 { font-size: clamp(1.75rem, 8vw, 2.5rem) !important; line-height: 1.15; }
  .hero-content p { font-size: .875rem !important; }

  /* Section titles */
  .section-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }

  /* Buttons: full width & tap-friendly */
  .btn-gold, .btn-outline, .btn-dark { width: 100%; padding: .875rem 1.25rem; min-height: 48px; }
  .btn-gold-sm { min-height: 40px; }
  a, button { -webkit-tap-highlight-color: rgba(201,150,63,.15); }

  /* Product cards: always show the hover-only actions on touch devices */
  .product-card .card-actions { opacity: 1; transform: none; }
  .product-card .wishlist-btn { opacity: 1; transform: none; }

  /* Forms: 16px avoids iOS zoom-on-focus */
  .form-input, input, select, textarea { font-size: 16px !important; }

  /* Quantity stepper */
  .qty-btn { width: 44px; height: 44px; }

  /* Tighter section padding */
  section { padding-left: 0; padding-right: 0; }

  /* Breadcrumbs wrap */
  .breadcrumb { flex-wrap: wrap; row-gap: .25rem; }

  /* Sticky sidebars behave as normal blocks */
  .sticky-sidebar { position: static !important; }
}

@media (max-width: 480px) {
  /* Any 3+ column grid collapses to 2 on very small screens */
  .grid.grid-cols-3 > *, .grid.grid-cols-4 > * { min-width: 0; }
  .hero-slider { height: 60vh; min-height: 360px; }
}

/* Admin panel: sidebar / cards stack on small screens */
@media (max-width: 900px) {
  .admin-sidebar, aside.admin-sidebar { position: static !important; width: 100% !important; }
  .admin-main { margin-left: 0 !important; width: 100% !important; }
  .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}