/* =========================================================
   MOBILE-FIRST OVERRIDES (safe to load last)
   Works with your existing class names; no HTML changes needed.
   ========================================================= */

/* 1) Fluid type & spacing tokens */
:root{
  --container: clamp(320px, 92vw, 1200px);
  --step--1: clamp(12px, 0.78rem + 0.2vw, 14px);
  --step-0:  clamp(14px, 0.85rem + 0.4vw, 16px);
  --step-1:  clamp(16px, 0.9rem + 0.8vw, 20px);
  --step-2:  clamp(18px, 1rem + 1.2vw, 24px);
  --gap-1:   clamp(8px, 1.5vw, 12px);
  --gap-2:   clamp(12px, 2vw, 16px);
  --gap-3:   clamp(16px, 3vw, 24px);
}

/* 2) Base & container */
html { font-size: 100%; }
body { font-size: var(--step-0); line-height: 1.5; }
h1 { font-size: var(--step-2); line-height: 1.15; }
h2 { font-size: var(--step-1); line-height: 1.2; }

.container { width: min(100%, var(--container)); margin-inline: auto; padding-inline: var(--gap-2); }

/* 3) Helpers */
.stack > * + * { margin-top: var(--gap-2); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap-1); align-items: center; }

/* 4) Media defaults */
img, svg, video { max-width: 100%; height: auto; display: block; }

/* 5) Header & nav */
.site-header { position: sticky; top: 0; z-index: 50; }
main { scroll-margin-top: 72px; }

/* Mobile nav using <details class="mnav"><summary>Menu</summary>... */
.mnav summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-ring);
  background: var(--panel);
  color: var(--ink);
}
.mnav summary::-webkit-details-marker{ display:none; }
.mnav[open] .site-nav{ display: grid; gap: var(--gap-1); margin-top: 10px; }
.site-nav a { padding: 8px 6px; border-radius: 10px; }

@media (min-width: 900px){
  .mnav { display: none; }
  .site-nav { display: flex !important; gap: var(--gap-2); }
}

/* 6) Forms & inputs */
button, .btn, .btn-accent, .btn-ghost, input[type="submit"]{ min-height: 40px; line-height: 1.1; }
.form-row { display: grid; gap: var(--gap-1); }
@media (min-width: 768px){
  .form-row.cols-2 { grid-template-columns: 1fr 1fr; }
  .form-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* 7) Filters row (chips) — horizontal scroll on phones */
.filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.filters > * { scroll-snap-align: start; }
.filters::-webkit-scrollbar { display: none; }

/* 8) Product grid — responsive auto-fit */
.grid {
  display: grid;
  gap: var(--gap-2);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
@media (min-width: 480px){ .grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (min-width: 900px){ .grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }

/* 9) Cards & product bits */
.card { border-radius: 14px; overflow: hidden; }
.card > img { display: block; }

/* Ultra-small phones (≤360px) — prevent text wrap overflow in cards */
@media (max-width: 360px){
  .card h4, .price { font-size: 13px; }
}

/* 10) Modals — mobile-safe dimensions */
.modal-dialog { width: min(92vw, 720px); max-height: 90vh; overflow: auto; }

/* 11) Tables — safe horizontal scroll wrapper */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 640px; }

/* 12) Login page tweaks (non-destructive) */
@media (max-width: 720px){
  .login .container,
  .login .card { width: 100%; }
  .login .card { border-radius: 14px; }
}

/* 13) Admin: grid, bar, rows, and uploads (matches your admin.css classes) */
@media (max-width: 1000px){
  .admin-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px){
  .adminbar { flex-direction: column; gap: 10px; }
}

/* Tighten spacing on narrow screens */
@media (max-width: 640px){
  .admin-grid { gap: 16px; }
}

/* Make list rows and upload row wrap neatly on phones */
.row { display: flex; justify-content: space-between; align-items: center; padding: 12px; gap: 8px; flex-wrap: wrap; }
.row > * { flex: 1 1 auto; min-width: 120px; }

.upload-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Ensure product list can scroll horizontally if needed */
#adminList { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 14) Touch/UX polish */
a, button, input, select { min-height: 40px; }
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* 15) Dark-mode hook (keeps your theme variables) */
@media (prefers-color-scheme: dark){
  /* You can override variables here if needed, but keeping your theme.css as source of truth is fine */
}