/* =====================================================================
   DEVICE-SPECIFIC RESPONSIVE REBUILD
   Strictly bounded media queries to preserve original desktop layout.
   ===================================================================== */

/* ---------------------------------------------------------------------
   ULTRA-WIDE & LARGE DESKTOP (1600px, 1920px, 2560px)
   --------------------------------------------------------------------- */
@media (min-width: 1600px) {
  .container { max-width: 1520px; }
  .product-grid { grid-template-columns: repeat(5, 1fr) !important; }
}
@media (min-width: 1920px) {
  .container { max-width: 1760px; }
  .product-grid { grid-template-columns: repeat(6, 1fr) !important; }
  .hero-title { font-size: 5.5rem !important; }
}
@media (min-width: 2560px) {
  .container { max-width: 2400px; }
  .product-grid { grid-template-columns: repeat(8, 1fr) !important; }
}

/* ---------------------------------------------------------------------
   LAPTOPS (1280px, 1366px, 1440px, 1536px) 
   (Implicitly handled by the original desktop layout up to 1200px max-width containers)
   --------------------------------------------------------------------- */
@media (min-width: 1280px) and (max-width: 1599px) {
  /* Original layout operates flawlessly here as the container max-width is 1200px */
}

/* ---------------------------------------------------------------------
   LARGE TABLETS & iPAD PRO (912px, 1024px)
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .container, .container-sm { padding: 0 24px; width: 100%; max-width: 100vw; }
  .product-grid { grid-template-columns: repeat(3, 1fr) !important; }
  
  /* Admin Dashboard constraints */
  .od-sidebar { width: 240px; }
  .od-main { margin-left: 240px; }
  .od-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------------------------------------------------------------------
   iPADS & SMALL TABLETS (600px, 768px, 810px, 820px, 834px)
   --------------------------------------------------------------------- */
@media (max-width: 834px) {
  .desktop-nav { display: none !important; }
  .hamburger { display: flex !important; }
  .hero-inner { flex-direction: column; text-align: center; }
  .hero-left { max-width: 100%; padding-bottom: 40px; }
  .footer-top { grid-template-columns: 1fr 1fr !important; }
  
  /* Admin Dashboard collapsible sidebar */
  .od-sidebar { transform: translateX(-100%); position: fixed; top: 0; bottom: 0; z-index: 1000; transition: transform 0.3s; }
  .od-sidebar.open { transform: translateX(0); }
  .od-main { margin-left: 0; width: 100%; padding-top: 60px; }
  .od-mobile-header { display: flex !important; align-items: center; justify-content: space-between; height: 60px; padding: 0 16px; background: var(--od-surface); border-bottom: 1px solid var(--od-border); position: fixed; top: 0; width: 100%; z-index: 900; }
  
  /* Table Responsiveness */
  .od-table-wrapper, .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .od-table { min-width: 700px; }
}

/* ---------------------------------------------------------------------
   LARGE PHONES (412px, 430px, 480px)
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
  html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
  .container, .container-sm { padding: 0 16px; }
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .footer-top { grid-template-columns: 1fr !important; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; text-align: center; }
  .form-row, .od-form-row { grid-template-columns: 1fr !important; flex-direction: column; }
}

/* ---------------------------------------------------------------------
   STANDARD PHONES (375px, 390px, 393px)
   --------------------------------------------------------------------- */
@media (max-width: 393px) {
  .section-title { font-size: 1.8rem !important; }
  .utility-inner { flex-direction: column; gap: 10px; text-align: center; align-items: center; }
  .utility-left { flex-direction: column; gap: 4px; }
  .utility-right { justify-content: center; width: 100%; }
}

/* ---------------------------------------------------------------------
   SMALL PHONES (320px, 360px)
   --------------------------------------------------------------------- */
@media (max-width: 360px) {
  .cart-item-row { grid-template-columns: 1fr !important; text-align: center; }
  .cart-item-img-box { margin: 0 auto 12px; width: 120px; }
  .nav-logo { height: 28px; }
  .hero-title { font-size: 2.2rem !important; }
  .od-stat-val { font-size: 1.5rem !important; }
}

/* ---------------------------------------------------------------------
   AI CHAT WIDGET RESPONSIVENESS OVERRIDDEN
   (Responsive layout is cleanly governed in styles.css)
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   TOUCH & USABILITY ENFORCEMENTS (All Mobile devices)
   --------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  button, a.btn-primary, a.btn-secondary, .od-btn, .vel-ai-qbtn, .vel-ai-mic-btn, .vel-ai-send {
    min-height: 44px; /* Minimum Apple Touch Target Size */
  }
}