/* ============================================================
   Aarunya — mobile responsive overlay
   Load AFTER styles.css. Everything here is inside mobile-only
   media queries, so desktop layout is untouched. Targets the
   classes used in index.html, admin.html and catalog.js.
   ============================================================ */

/* ---------- universal small-screen safety ---------- */
@media (max-width: 768px) {
  /* stop iOS auto-zoom on input focus + comfortable tap size */
  input, select, textarea, button { font-size: 16px; }
  .btn, .icon-btn, button { min-height: 40px; }

  /* never let a stray wide element push the page sideways */
  html, body { max-width: 100%; }
  img { max-width: 100%; height: auto; }
}

/* =================================================================
   STOREFRONT  (index.html / product.html)
================================================================= */
@media (max-width: 768px) {
  .header-inner { padding-left: .9rem; padding-right: .9rem; }
  .brand-img { height: 38px; }

  /* hero: two columns → stacked, art below copy */
  .hero.hero-split { display: flex !important; flex-direction: column; gap: 1.2rem; }
  .hero-copy h1 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); line-height: 1.12; }
  .hero-copy p { font-size: .98rem; }
  .hero-cta { display: flex; flex-wrap: wrap; gap: .6rem; }
  .hero-cta .btn { flex: 1 1 auto; text-align: center; }
  .hero-art, .hero-photo-wrap { width: 100%; }

  /* "how it works" strip: 3 across → stacked */
  .how-strip { flex-direction: column; gap: .8rem; }
  .how-step { width: 100%; }

  /* product grid: comfortable 2-up on phones */
  .grid { grid-template-columns: 1fr 1fr !important; gap: .8rem; }

  /* category / subcategory / search / price / size filter bar must NOT stay
     pinned on phones — let it scroll away so products get the full viewport */
  .filters, #filters {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  /* "can't find it" request card: side-by-side → stacked */
  .wish-card { flex-direction: column; gap: 1rem; }
  .wish-row { grid-template-columns: 1fr !important; }

  /* cart / checkout drawer fills the screen */
  .drawer { width: 100% !important; max-width: 100% !important; }

  /* floating WhatsApp chat panel fits the viewport */
  .wa-panel { width: calc(100vw - 1.5rem) !important; right: .75rem; }
  .wa-launch-txt { display: none; }   /* shrink to the round icon on phones */
}

@media (max-width: 430px) {
  .grid { grid-template-columns: 1fr !important; }   /* single column on small phones */
}

/* =================================================================
   ADMIN  (admin.html)
================================================================= */
@media (max-width: 900px) {
  /* top bar: logo + 9-tab nav + actions → wraps cleanly */
  .admin-top { flex-wrap: wrap; gap: .6rem; padding: .7rem .9rem; }
  .admin-nav { order: 3; width: 100%; display: flex; flex-wrap: wrap; gap: .4rem; }
  .admin-nav button { flex: 0 0 auto; }

  .admin-main { padding: 1rem .8rem; }

  /* section headers: title + buttons stack instead of overflowing */
  .panel-head { flex-wrap: wrap; gap: .6rem; align-items: flex-start; }
  .panel-head > div { flex-wrap: wrap; }

  /* KPI / stat / dashboard tiles reflow to fewer columns */
  .kpi-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dash-grid, .dash-grid.two { grid-template-columns: 1fr !important; }

  /* charts keep a sensible height when full-width */
  .chartbox { height: 260px; }

  /* wide data tables scroll horizontally inside their wrap
     instead of crushing or breaking the page */
  .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tablewrap table { min-width: 560px; }
}

@media (max-width: 600px) {
  .kpi-grid, .stat-grid { grid-template-columns: 1fr 1fr !important; }

  /* product / category form: paired fields stack */
  .row-2, .grid2 { grid-template-columns: 1fr !important; }

  /* size-rows in the product editor stay usable on phones */
  .size-row { display: grid; grid-template-columns: 1fr 90px auto; gap: .5rem; align-items: center; }

  /* generic modal goes near-fullscreen and scrolls internally */
  .modal { width: calc(100vw - 1.25rem) !important; max-width: 100% !important; max-height: 92vh; display: flex; flex-direction: column; }
  .modal .mbody { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  .login-card { width: calc(100vw - 2rem); }
}

@media (max-width: 380px) {
  .kpi-grid, .stat-grid { grid-template-columns: 1fr !important; }
  .admin-nav button { font-size: .8rem; padding: .4rem .7rem; }
}