/* ============================================================
   LUNA DAO · Mobile adaptation fix
   Loaded LAST so it only refines small screens.
   Desktop / existing rules are intentionally untouched.
   Standard breakpoints: 768 (tablet/phone), 600 (phone), 360 (small).
   ============================================================ */

/* ---- Safety net: stop stray wide elements causing horizontal scroll ---- */
html, body { max-width: 100%; }
img, video { max-width: 100%; }

/* ============================================================
   <= 768px : tablets & phones — tighten PDP & navigation
   ============================================================ */
@media (max-width: 768px) {
  .container { padding-left: 16px; padding-right: 16px; }

  /* PDP: single column, gallery must not stick/overlap */
  .product-detail { gap: 28px; }
  .product-gallery { position: static !important; top: auto; height: auto !important; align-self: start; }
  .main-image { margin-bottom: 12px; }

  /* Thumbnails: horizontal scroll instead of wrapping/overflowing */
  .thumb-images {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .thumb-images .thumb { flex: 0 0 72px; width: 72px; height: 72px; }

  /* Tighten PDP typography & spacing */
  .product-detail-info h1 { font-size: 1.7rem; line-height: 1.2; }
  .product-detail-info { min-width: 0; }

  /* Purchase controls: full width, no horizontal overflow */
  .purchase-section { width: 100%; flex-wrap: wrap; }
  .purchase-section .btn { width: 100%; }
  .quantity-selector { width: 100%; justify-content: center; }

  /* Trust badges stack cleanly */
  .detail-trust { grid-template-columns: 1fr; gap: 12px; }

  /* Page headers */
  .page-header h1 { font-size: 1.7rem; }
}

/* ============================================================
   <= 600px : phones — compact two-column product grid
   ============================================================ */
@media (max-width: 600px) {
  /* Two products per screen instead of one oversized card */
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }

  .product-card { border-radius: 12px; }
  .product-image { aspect-ratio: 1; }
  .product-info { padding: 10px 8px; }
  .product-name { font-size: 0.85rem; line-height: 1.25; margin-bottom: 2px; }
  .product-intention { font-size: 0.72rem; margin-bottom: 6px; }
  .product-rating { font-size: 0.75rem; margin-bottom: 6px; gap: 4px; }
  .product-price .price { font-size: 1rem; }
  .product-price .compare-price { font-size: 0.78rem; }

  /* Quick-add stays usable on touch (no hover) */
  .product-card .quick-add { font-size: 0.72rem; padding: 10px 8px; }

  /* PDP keeps a full-width hero but tighter surrounding rhythm */
  .product-detail { gap: 24px; }

  /* Mobile menu: full-width, comfortable tap targets */
  .mobile-menu { padding: 12px 20px; }
  .mobile-menu a { padding: 14px 0; min-height: 44px; display: flex; align-items: center; }

  /* Filter sidebar becomes normal stacked content */
  .shop-layout { grid-template-columns: 1fr; }
  .shop-filters { position: static; }
}

/* ============================================================
   <= 360px : small phones — keep it compact, no clipping
   ============================================================ */
@media (max-width: 360px) {
  .product-grid { gap: 8px; }
  .product-info { padding: 8px 6px; }
  .product-name { font-size: 0.8rem; }
  .product-price .price { font-size: 0.92rem; }
  .container { padding-left: 12px; padding-right: 12px; }
}