/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Kill horizontal panning everywhere - any element that exceeds viewport
   width gets clipped instead of pushing the whole page sideways.
   IMPORTANT: use overflow-x:clip (NOT overflow-x:hidden) so the page can
   still contain position:sticky elements - Chrome on Android disables
   sticky descendants when an ancestor has overflow:hidden, which broke
   the sticky header + toolbar on phones. overflow:clip clips without
   triggering that bug. Falls back to overflow:hidden in browsers that
   don't recognise `clip` (Chrome ≥90, Safari ≥16; current Android Chrome
   and iOS Safari both support it). */
html, body { max-width: 100%; }
html { overflow-x: hidden; overflow-x: clip; }
body { overflow-x: hidden; overflow-x: clip; }

/* ── Staging environment ──────────────────────────────────────────────────── */
/* Activated by /env.js when NODE_ENV=staging. Re-tints every --navy use across
   the site (header, buttons, links, focus rings, prices, badges) to hot pink.
   Combined with the persistent banner and tab-title prefix, makes staging
   visually impossible to mistake for production. */
html.is-staging {
  --navy:    #d63384;
  --navy-dk: #a01e63;
}
.staging-banner { display: none; }
html.is-staging .staging-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #a01e63;
  color: #fff;
  font-weight: 600;
  font-size: .82rem;
  padding: 7px 14px;
  text-align: center;
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(0,0,0,.18);
  line-height: 1.3;
}
html.is-staging .staging-banner a {
  color: #ffd6e9;
  text-decoration: underline;
  font-weight: 700;
}
html.is-staging .staging-banner a:hover { color: #fff; }
html.is-staging .staging-banner-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 4px;
  margin-left: 4px;
  cursor: pointer;
  opacity: .75;
  transition: opacity .12s;
}
html.is-staging .staging-banner-close:hover { opacity: 1; }
@media (max-width: 600px) {
  html.is-staging .staging-banner { font-size: .72rem; padding: 5px 10px; }
}

:root {
  --navy:    #1a3a5c;
  --navy-dk: #122845;
  --gold:    #c8973a;
  --gold-lt: #e8b85a;
  --bg:      #f0f2f5;
  --card:    #ffffff;
  --border:  #dde1e7;
  --txt:     #222831;
  --txt-lt:  #5a6475;
  --red:     #d9534f;
  --green:   #28a745;
  --radius:  8px;
  --shadow:  0 2px 8px rgba(0,0,0,.09);
  --shadow-h:0 6px 20px rgba(0,0,0,.14);
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold); }

/* ── Auth pages (login / register) ───────────────────────────────────────── */
.auth-body {
  display: flex;
  flex-direction: column;            /* banner (if present) sits above card */
  min-height: 100vh;
  background: linear-gradient(135deg, var(--navy-dk) 0%, var(--navy) 60%, #2a5080 100%);
}

.auth-card {
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  padding: 44px 40px;
  width: 100%;
  max-width: 420px;
  margin: auto;                      /* centres on both axes within remaining flex space */
}

.auth-logo {
  text-align: center;
  margin-bottom: 28px;
}

.auth-logo .auth-logo-img {
  width: 120px;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}
.auth-logo .company { font-size: 1.1rem; font-weight: 700; color: var(--navy); letter-spacing: .5px; }
.auth-logo .tagline { font-size: .8rem; color: var(--txt-lt); margin-top: 2px; }
.auth-logo .gold-bar { height: 3px; background: var(--gold); border-radius: 2px; margin: 10px auto 0; width: 60px; }

.auth-card h2 { font-size: 1.4rem; margin-bottom: 24px; color: var(--navy); }

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: .85rem; font-weight: 600; color: var(--txt); margin-bottom: 5px; }
.form-group input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .95rem;
  transition: border-color .2s;
  background: #fafbfc;
}
.form-group input:focus { outline: none; border-color: var(--navy); background: #fff; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .1s, box-shadow .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-dk); box-shadow: var(--shadow); }
.btn-gold   { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-lt); }
.btn-sm     { padding: 6px 14px; font-size: .8rem; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #c0392b; }
.btn-success{ background: var(--green); color: #fff; }
.btn-full   { width: 100%; }
.btn-outline{ background: transparent; border: 1.5px solid var(--navy); color: var(--navy); }
.btn-outline:hover{ background: var(--navy); color: #fff; }

.auth-footer { margin-top: 20px; text-align: center; font-size: .85rem; color: var(--txt-lt); }

.alert {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: .88rem;
  margin-bottom: 16px;
  display: none;
}
.alert.show { display: block; }
.alert-error   { background: #fde8e8; color: var(--red); border: 1px solid #f5c6cb; }
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-info    { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

.header-inner {
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-brand { display: flex; align-items: center; gap: 12px; }
.header-brand .header-logo {
  height: 46px;
  width: auto;
  flex-shrink: 0;
  display: block;
}
.brand-text .name { font-size: 1.05rem; font-weight: 700; letter-spacing: .3px; }
.brand-text .sub  { font-size: .7rem; opacity: .7; letter-spacing: .5px; text-transform: uppercase; }
.brand-divider { width: 1px; height: 32px; background: rgba(255,255,255,.25); margin: 0 4px; }

.header-search {
  flex: 1;
  max-width: 480px;
  display: flex;
  flex-direction: column;
}
.header-search-box { position: relative; width: 100%; }
.header-search input {
  width: 100%;
  padding: 8px 16px 8px 38px;
  border: none;
  border-radius: 20px;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: .9rem;
  transition: background .2s;
}
.header-search input::placeholder { color: rgba(255,255,255,.6); }
.header-search input:focus { outline: none; background: rgba(255,255,255,.25); }
/* Result count under the search box - only shown on mobile (the toolbar
   carries it on desktop). */
.header-result-count {
  display: none;
  text-align: center;
  font-size: .72rem;
  color: rgba(255,255,255,.85);
  margin-top: 3px;
  line-height: 1;
  height: .9rem;
}
.header-search .search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  opacity: .7; pointer-events: none;
}

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-badge {
  display: flex; align-items: center; gap: 6px;
  font-size: .85rem; opacity: .9;
}
.user-badge .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; color: #fff;
}

/* ── User menu (header dropdown) ─────────────────────────────────────────── */
.user-menu-trigger {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  padding: 4px 6px; border-radius: 6px;
  transition: background .15s;
}
.user-menu-trigger { position: relative; }
.user-menu-trigger:hover { background: rgba(255,255,255,.08); }
.user-menu-wrap { position: relative; }

/* Pending-orders badge on the avatar (admins only, count > 0). Positioned
   on the AVATAR so it overlaps the top-right of the "S" circle - the
   classic notification-pip placement. */
.user-badge .avatar { position: relative; }
.order-badge {
  position: absolute;
  top: -4px; right: -6px;
  background: #d9362b;
  color: #fff;
  font-size: .65rem; font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 999px;
  padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--navy);
  pointer-events: none;
  line-height: 1;
}
html.is-staging .order-badge { box-shadow: 0 0 0 2px #a01e63; }
/* Same red bubble shown next to the "View Orders" text inside the menu */
.order-badge-inline {
  background: #d9362b;
  color: #fff;
  font-size: .7rem; font-weight: 700;
  min-width: 20px; height: 18px;
  border-radius: 9px;
  padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.user-menu {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 6px;
  display: none;
  z-index: 200;
}
.user-menu.open { display: block; }
.user-menu-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 12px;
  padding: 9px 12px;
  background: none; border: none;
  font-size: .88rem; color: var(--txt);
  cursor: pointer; border-radius: 6px;
  text-align: left;
}
.user-menu-item:hover { background: #f0f4f8; }
.user-menu-item .item-label { display: flex; align-items: center; gap: 8px; }
.user-menu-item .item-icon  { font-size: 1rem; }
.user-menu-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* Toggle switch (used for dark-mode) */
.theme-switch {
  width: 34px; height: 18px; border-radius: 999px;
  background: #d0d7de; position: relative; flex-shrink: 0;
  transition: background .15s;
}
.theme-switch::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .15s;
}
.user-menu-item.on .theme-switch { background: var(--navy); }
.user-menu-item.on .theme-switch::after { transform: translateX(16px); }

/* ── Dark mode ───────────────────────────────────────────────────────────── */
/* Activated by user-menu.js writing 'dark' to localStorage and adding the
   .dark class to <html>. An inline script in each page's <head> applies
   this class before first paint to avoid a flash of light theme. */
html.dark {
  --bg:      #15181f;
  --card:    #1f232b;
  --border:  #2f3540;
  --txt:     #e6e8ec;
  --txt-lt:  #9ba3af;
}
html.dark body { background: var(--bg); color: var(--txt); }

/* Cards / panels that hardcoded white need an override */
html.dark .admin-table-wrap,
html.dark .stat-card,
html.dark .ord-stat,
html.dark .auth-card,
html.dark .toolbar,
html.dark .cart-drawer,
html.dark .modal-content,
html.dark .user-menu,
html.dark .tfa-card { background: var(--card); color: var(--txt); border-color: var(--border); }

/* Product cards stay LIGHT in dark mode - the photos have white photographic
   backgrounds, so we give each card its own pale grey "lightbox" so the
   photos sit naturally and product colours stay faithful. Same pattern used
   by Amazon / eBay / Etsy / John Lewis for product photography in dark mode. */
html.dark .product-card {
  background: #dde2e8;
  color: #1a1d24;
  border-color: #b9c0c9;
}
html.dark .product-card .card-code { color: #5a6475; }
html.dark .product-card .card-desc { color: #222831; }
html.dark .no-img-placeholder      { background: #c7cdd5; color: #5a6475; border-color: #b9c0c9; }

/* Tables */
html.dark table,
html.dark .users,
html.dark .orders-table,
html.dark .debt-table,
html.dark .order-detail-inner table { color: var(--txt); }
html.dark .users th, html.dark .orders-table th, html.dark .debt-table th,
html.dark .order-detail-inner th { background: #2a2f3a; color: var(--txt-lt); }
html.dark .users td, html.dark .orders-table td, html.dark .debt-table td,
html.dark .order-detail-inner td { border-bottom-color: var(--border); }
html.dark .orders-table tr.order-row:hover,
html.dark .users tbody tr:hover,
html.dark .debt-table tr.debt-row:hover { background: #262b35; }
html.dark .orders-table tr.detail-row td,
html.dark .debt-table tr.detail-row td { background: #1c2027; }
html.dark .debt-table tr.detail-row .order-detail-inner { border-top-color: var(--border); }

/* Forms */
html.dark input, html.dark select, html.dark textarea {
  background: #2a2f3a; color: var(--txt); border-color: var(--border);
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #6b7382; }
html.dark .settings-form input:focus { box-shadow: 0 0 0 3px rgba(13,47,91,.35); }

/* Misc tints that don't theme well in dark */
html.dark .empty-state, html.dark .spinner { color: var(--txt-lt); }
html.dark .filter-chip { background: var(--card); color: var(--txt); border-color: var(--border); }
html.dark .filter-chip.active { background: var(--navy); color: #fff; }
html.dark .pagination .page-btn { background: var(--card); color: var(--txt); border-color: var(--border); }
html.dark .pagination .page-btn.active { background: var(--navy); color: #fff; }
html.dark .letter-jumper .letter-btn { background: var(--card); color: var(--txt); border-color: var(--border); }
html.dark .letter-jumper .letter-label { color: var(--txt-lt); }

/* Modal overlays a touch darker */
html.dark .modal-overlay, html.dark .tfa-overlay { background: rgba(0,0,0,.7); }

/* User menu in dark mode */
html.dark .user-menu-item:hover { background: #2a2f3a; }
html.dark .secret-value { background: #1c2027; color: var(--txt); }
html.dark .secret-field { background: #1c2027; border-color: var(--border); }

/* ── Toolbar / filters ────────────────────────────────────────────────────── */
.toolbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 10px 20px;
  position: sticky;
  top: 62px;        /* sit flush below the sticky header */
  z-index: 90;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.toolbar-inner {
  max-width: none; margin: 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.filter-chip {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--txt-lt);
  transition: all .15s;
}
.filter-chip:hover  { border-color: var(--navy); color: var(--navy); }
.filter-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.result-count { margin-left: auto; font-size: .82rem; color: var(--txt-lt); }

/* ── Category sidebar ─────────────────────────────────────────────────────── */
.catalog-layout {
  display: flex;
  align-items: flex-start;
  max-width: none;
  margin: 0;
}

.category-sidebar {
  width: 190px;
  flex-shrink: 0;
  padding: 12px 8px;
  position: sticky;
  top: 114px;         /* header (62px) + toolbar (~52px) */
  max-height: calc(100vh - 114px);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--card);
  border-right: 1px solid var(--border);
}

.cat-sidebar-label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--txt-lt);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 4px 10px 10px;
  display: block;
}

.cat-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: .82rem;
  color: var(--txt);
  border-radius: 6px;
  margin-bottom: 1px;
  transition: background .15s, color .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-btn:hover  { background: var(--bg); }
.cat-btn.active { background: var(--navy); color: #fff; font-weight: 600; }

/* "NEW ITEMS" - website-defined filter above the icons.ini categories. */
.cat-btn-new {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--navy);
  margin-bottom: 8px;
}
.cat-btn-new .new-burst-mini {
  width: 26px; height: 26px; flex: 0 0 auto;
  transform: rotate(-8deg);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.cat-btn-new:hover  { background: var(--bg); }
.cat-btn-new.active { background: var(--navy); color: #fff; }

/* ── Product grid ─────────────────────────────────────────────────────────── */
.catalog-body { flex: 1; min-width: 0; padding: 24px 20px 60px; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.product-card {
  position: relative;            /* anchor for the overflowing NEW starburst */
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: visible;             /* let the NEW starburst poke outside the card */
  transition: box-shadow .2s, transform .2s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  box-shadow: var(--shadow-h);
  transform: translateY(-3px);
}

.card-img-wrap {
  position: relative;
  border-radius: var(--radius) var(--radius) 0 0;  /* card no longer clips; round top here */
  width: 100%;
  padding-top: 75%;   /* 4:3 ratio */
  background: #f7f8fa;
  overflow: hidden;
}
.card-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  transition: transform .3s;
}
.product-card:hover .card-img-wrap img { transform: scale(1.05); }

/* NEW arrivals starburst - pokes outside the top-right corner of the card. */
.new-burst {
  position: absolute; top: -12px; right: -12px; z-index: 5;
  width: 60px; height: 60px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
  pointer-events: none;
  transform: rotate(8deg);
}

.no-img-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #c0c5ce; font-size: .75rem; gap: 6px;
}
.no-img-placeholder svg { width: 36px; height: 36px; opacity: .4; }

/* Admin upload button replaces the "No image" placeholder on cards (admins only). */
.card-upload-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; width: 100%; height: 100%; padding: 12px;
  border: 2px dashed var(--border); border-radius: 8px;
  background: transparent; color: var(--navy);
  font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.card-upload-btn:hover { background: #eef3fb; border-color: var(--navy); }
.card-upload-btn svg   { width: 28px; height: 28px; opacity: .85; }
html.dark .card-upload-btn       { color: #9ec1ff; border-color: #4a5466; }
html.dark .card-upload-btn:hover { background: #1a2436; border-color: #9ec1ff; }

/* Modal "Upload new image" button - secondary style, full width above cart row */
.admin-upload-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 12px; padding: 10px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--navy);
  font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.admin-upload-btn:hover { background: #eef3fb; border-color: var(--navy); }
html.dark .admin-upload-btn       { color: #9ec1ff; }
html.dark .admin-upload-btn:hover { background: #1a2436; border-color: #9ec1ff; }

/* ── UPSCALE! button - sits alongside the upload button in the admin modal ─ */
.admin-upscale-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 8px; padding: 10px 14px;
  border: 1.5px solid var(--navy); border-radius: var(--radius);
  background: var(--navy); color: #fff;
  font-size: .9rem; font-weight: 700; cursor: pointer;
  letter-spacing: .04em;
  transition: filter .15s, transform .05s;
}
.admin-upscale-btn:hover    { filter: brightness(1.08); }
.admin-upscale-btn:active   { transform: translateY(1px); }
.admin-upscale-btn:disabled { opacity: .7; cursor: wait; }

/* ── Upscale Compare overlay (admin) ──────────────────────────────────────── */
.modal.upscale-compare {
  width: 100%; max-width: 1100px;
  padding: 0; display: flex; flex-direction: column;
  max-height: 92vh;
  max-height: 92dvh;   /* dvh = real viewport minus mobile browser/nav chrome */
}
.upscale-compare-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 12px 16px 16px;
  min-height: 0;
}
/* Each side IS a button now - the whole card is tappable to choose that
   version. Strong hover/active affordance so it's obviously clickable. */
.upscale-side {
  display: flex; flex-direction: column; align-items: center;
  background: #f7f8fa; border: 2px solid var(--border); border-radius: 10px;
  padding: 10px; cursor: pointer; font: inherit; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .08s;
}
.upscale-side:hover  { border-color: var(--navy); box-shadow: 0 4px 16px rgba(0,0,0,.14); }
.upscale-side:active { transform: scale(.98); }
.upscale-side-enhanced:hover { border-color: var(--gold); }
html.dark .upscale-side { background: #1a2030; }
.upscale-label {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  color: var(--txt-lt); margin-bottom: 8px;
}
.upscale-label-enhanced { color: var(--gold); }
/* Both images render at the SAME fixed box; object-fit:contain scales small
   originals UP and large enhanced versions DOWN for a like-for-like view. */
.upscale-side img {
  display: block;
  width: 100%;
  height: 52vh;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
}
.upscale-choose {
  margin-top: 10px; padding: 7px 16px; border-radius: 6px;
  background: var(--navy); color: #fff; font-size: .82rem; font-weight: 700;
}
.upscale-choose-enhanced { background: var(--gold); }
.upscale-busy {
  text-align: center; padding: 14px; font-weight: 700; color: var(--navy);
  border-top: 1px solid var(--border);
}

/* Mobile: BOTH images side-by-side, full-height modal (uses the whole
   screen, no wasted dimmed strip). Each image flexes to fill its card and
   is vertically centred. The body gets safe-area bottom padding so the
   ENHANCED card's "Use this" pill clears the Android gesture/nav bar. */
@media (max-width: 640px) {
  .modal.upscale-compare {
    max-width: 100vw; width: 100vw;
    height: 100dvh; max-height: 100dvh;
    border-radius: 0;
  }
  /* align-items:center vertically centres the two cards as a group inside
     the full-height body, so the cards hug their images instead of showing
     a big white void inside a bordered box. */
  .upscale-compare-body {
    display: flex; flex-direction: row; align-items: center;
    gap: 8px;
    padding: 10px 10px calc(14px + env(safe-area-inset-bottom, 0px));
    min-height: 0; flex: 1 1 auto;
  }
  .upscale-side {
    flex: 1 1 0;
    padding: 7px; border-radius: 8px;
  }
  .upscale-side img {
    width: 100%;
    height: auto;
    max-height: 62dvh;
    object-fit: contain;
  }
  .upscale-label { font-size: .62rem; margin-bottom: 5px; }
  .upscale-choose { font-size: .74rem; padding: 6px 10px; margin-top: 7px; }
}

/* ── Upload picker (Camera vs Library action sheet) ──────────────────────── */
.upload-picker-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.55);
  display: none; align-items: flex-end; justify-content: center;
  padding: 16px;
}
.upload-picker-overlay.show { display: flex; }
.upload-picker {
  background: var(--card); color: var(--txt);
  width: 100%; max-width: 420px;
  border-radius: 16px; padding: 16px 16px 12px;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.35);
  animation: upSlideUp .18s ease-out;
}
@keyframes upSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.upload-picker h4 {
  margin: 0 0 12px; font-size: .95rem; font-weight: 600;
  text-align: center; color: var(--txt-lt);
}
.upload-picker-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 16px; margin-bottom: 8px;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--txt);
  font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.upload-picker-btn .upi { font-size: 1.4rem; line-height: 1; }
.upload-picker-btn:hover  { background: #eef3fb; border-color: var(--navy); }
.upload-picker-btn:active { background: #dbe6f4; }
.upload-picker-cancel {
  display: block; width: 100%; margin-top: 4px;
  padding: 12px; border: none; background: none;
  font-size: .95rem; font-weight: 600; color: var(--txt-lt);
  cursor: pointer; border-radius: 8px;
}
.upload-picker-cancel:hover { background: rgba(0,0,0,0.04); }

/* Desktop: centre the sheet vertically rather than docking it to the bottom */
@media (min-width: 769px) {
  .upload-picker-overlay { align-items: center; }
}

html.dark .upload-picker-btn:hover  { background: #1a2436; border-color: #9ec1ff; }
html.dark .upload-picker-btn:active { background: #243046; }
html.dark .upload-picker-cancel:hover { background: rgba(255,255,255,0.06); }

.card-body { padding: 10px 12px 12px; flex: 1; display: flex; flex-direction: column; }
.card-code {
  font-size: .72rem; font-weight: 700;
  color: var(--navy); letter-spacing: .5px;
  text-transform: uppercase; margin-bottom: 4px;
}
.card-desc {
  font-size: .8rem; color: var(--txt); line-height: 1.35;
  flex: 1; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
}
.card-price { font-size: .9rem; font-weight: 700; color: var(--navy); }
.card-price .currency { font-size: .7rem; font-weight: 600; margin-right: 1px; color: var(--txt-lt); }
.stock-badge {
  font-size: .68rem; font-weight: 700; padding: 2px 7px;
  border-radius: 10px;
}
.stock-in   { background: #d4edda; color: #1a5c2a; }
.stock-out  { background: #fde8e8; color: #8b1a1a; }
.stock-low  { background: #fff3cd; color: #856404; }

/* ── Product modal ─────────────────────────────────────────────────────────── */
.modal-img img, .modal-img > div { cursor: pointer; }
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--card);
  border-radius: 14px;
  max-width: 1200px; width: 95vw;
  max-height: 92vh;
  max-height: 92dvh;   /* dvh tracks the real visible viewport on phones */
  overflow-y: auto;
  box-shadow: 0 32px 80px rgba(0,0,0,.4);
  animation: modalIn .2s ease;
}
@keyframes modalIn { from { opacity:0; transform: scale(.95); } to { opacity:1; transform: scale(1); } }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 1.15rem; color: var(--navy); }
.modal-close { background: none; border: none; font-size: 1.8rem; cursor: pointer; color: var(--txt-lt); line-height: 1; }
.modal-close:hover { color: var(--txt); }
.modal-body { padding: 32px; display: flex; gap: 36px; align-items: flex-start; }
.modal-img  { flex: 0 0 520px; max-width: 520px; }
.modal-img img { width: 100%; height: auto; max-height: 520px; object-fit: contain;
  border-radius: var(--radius); border: 1px solid var(--border); background: #f7f8fa; }
.modal-info { flex: 1; min-width: 220px; }
.modal-info .code-big { font-size: 1.8rem; font-weight: 700; color: var(--navy); }
.modal-info .desc-big { font-size: 1.1rem; color: var(--txt); margin: 12px 0 20px; line-height: 1.6; }
.modal-info table { font-size: .95rem; border-collapse: collapse; width: 100%; }
.modal-info td { padding: 8px 0; }
.modal-info td:first-child { color: var(--txt-lt); width: 120px; }
.modal-info td:last-child   { font-weight: 600; }
.price-big { font-size: 2rem; font-weight: 700; color: var(--gold); margin: 16px 0 6px; }
.price-big span { font-size: 1rem; color: var(--txt-lt); }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 36px; flex-wrap: wrap;
}
.page-btn {
  min-width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-size: .85rem; font-weight: 600; cursor: pointer;
  color: var(--txt-lt); transition: all .15s;
}
.page-btn:hover { border-color: var(--navy); color: var(--navy); }
.page-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.page-btn:disabled { opacity: .4; cursor: default; pointer-events: none; }

.letter-jumper {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; margin-top: 14px; flex-wrap: wrap;
}
.letter-jumper .letter-label {
  font-size: .72rem; color: var(--txt-lt); text-transform: uppercase;
  letter-spacing: .06em; margin-right: 8px; font-weight: 600;
}
.letter-jumper .letter-btn {
  min-width: 28px; height: 28px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--card); font-size: .78rem; font-weight: 700;
  color: var(--txt-lt); cursor: pointer; transition: all .12s;
}
.letter-jumper .letter-btn:hover { border-color: var(--navy); color: var(--navy); background: #f0f4f8; }

/* ── Load-more (button + infinite-scroll sentinel) + bottom mode toggle ──── */
.load-more-btn {
  display: block; margin: 32px auto 8px;
  min-width: 280px; height: 44px; padding: 0 28px;
  border: none; border-radius: var(--radius);
  background: var(--navy); color: #fff;
  font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .05s;
}
.load-more-btn:hover  { background: #0e1a2b; }
.load-more-btn:active { transform: translateY(1px); }
.load-more-btn:disabled { opacity: .6; cursor: default; }

/* Sentinel: invisible 1 px div watched by IntersectionObserver */
.load-more-sentinel { width: 100%; height: 1px; visibility: hidden; }
.load-more-status   { text-align: center; padding: 24px 12px; color: var(--txt-lt); font-size: .85rem; font-style: italic; }

/* Bottom toggle (paginated → 'Show in one list ▾'; load-more → '▴ Group into pages') */
.mode-toggle-wrap {
  display: flex; justify-content: center; margin-top: 12px; padding-bottom: 8px;
}
.mode-toggle {
  border: none; background: none; padding: 6px 10px;
  color: var(--txt-lt); font-size: .82rem; font-weight: 600;
  cursor: pointer; text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s;
}
.mode-toggle:hover { color: var(--navy); text-decoration-color: var(--navy); }
html.dark .mode-toggle:hover { color: #9ec1ff; text-decoration-color: #9ec1ff; }

/* ── Loading spinner ──────────────────────────────────────────────────────── */
.spinner {
  display: none; text-align: center; padding: 60px 20px;
  color: var(--txt-lt); font-size: .95rem;
}
.spinner.show { display: block; }
.spinner::before {
  content: ''; display: block; margin: 0 auto 16px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid var(--border);
  border-top-color: var(--navy);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center; padding: 80px 20px;
  display: none;
}
.empty-state.show { display: block; }
.empty-state h3 { color: var(--txt-lt); font-size: 1.1rem; margin-bottom: 8px; }
.empty-state p  { color: var(--txt-lt); font-size: .88rem; }

/* ── Admin table ──────────────────────────────────────────────────────────── */
.admin-wrap  { max-width: 1340px; margin: 32px auto; padding: 0 20px 60px; }
.admin-title { font-size: 1.5rem; color: var(--navy); margin-bottom: 4px; }
.admin-sub   { color: var(--txt-lt); font-size: .88rem; margin-bottom: 24px; }
.admin-stats { display: flex; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.stat-card {
  background: var(--card); border-radius: var(--radius);
  padding: 16px 22px; flex: 1; min-width: 130px;
  box-shadow: var(--shadow);
}
.stat-card .n    { font-size: 2rem; font-weight: 700; color: var(--navy); }
.stat-card .lbl  { font-size: .78rem; color: var(--txt-lt); text-transform: uppercase; letter-spacing: .5px; }

.admin-table-wrap {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.admin-table-wrap h3 {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  font-size: 1rem; color: var(--navy);
  display: flex; align-items: center; gap: 8px;
}
.pending-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  display: inline-block;
}
table.users { width: 100%; border-collapse: collapse; }
table.users th {
  text-align: left; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--txt-lt); padding: 10px 16px;
  border-bottom: 1px solid var(--border); background: #fafbfc;
}
table.users td { padding: 12px 16px; border-bottom: 1px solid #f0f2f5; font-size: .88rem; vertical-align: middle; }
table.users tr:last-child td { border-bottom: none; }
table.users tr:hover td { background: #fafbfc; }

.status-badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: .75rem; font-weight: 700;
}
.status-pending  { background: #fff3cd; color: #7a5c00; }
.status-approved { background: #d4edda; color: #155724; }
.status-admin    { background: #cce5ff; color: #004085; }
.status-disabled { background: #e8e8e8; color: #5a5a5a; }
.actions-cell { display: flex; gap: 6px; flex-wrap: wrap; }

/* All Users / Orders Actions column: keep buttons on one line on roomy screens,
   and reserve enough width that they never bump into the previous column. */
@media (min-width: 769px) {
  table.users td:last-child,
  table.users th:last-child { white-space: nowrap; min-width: 420px; }
  table.users td:last-child .actions-cell { flex-wrap: nowrap; }
}
/* Let the admin-table-wrap scroll horizontally on narrow displays instead of clipping */
.admin-table-wrap { overflow-x: auto; }

/* ── Print button ─────────────────────────────────────────────────────────── */
.btn-print {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent; cursor: pointer;
  font-size: .82rem; font-weight: 600; color: var(--txt-lt);
  transition: all .15s;
}
.btn-print:hover { border-color: var(--navy); color: var(--navy); }
.btn-print:disabled { opacity: .5; cursor: default; }
.btn-print svg { flex-shrink: 0; }

/* ── Print layout (screen: hidden; print: full page) ─────────────────────── */
#printArea { display: none; }

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Hide everything except the print area */
  body > *:not(#printArea) { display: none !important; }
  #printArea { display: block !important; }

  .print-header { margin-bottom: 12pt; border-bottom: 2pt solid #1a3a5c; padding-bottom: 8pt; }
  .print-header h1 { font-size: 14pt; color: #1a3a5c; font-weight: 700; }
  .print-header p  { font-size: 8pt; color: #555; margin-top: 2pt; }

  .print-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7pt;
  }
  .print-card {
    border: 0.5pt solid #dde1e7;
    border-radius: 4pt;
    padding: 5pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .print-card-img {
    width: 100%; height: 70pt;
    object-fit: contain; display: block; margin-bottom: 4pt;
  }
  .print-no-img {
    width: 100%; height: 70pt;
    background: #f7f8fa; display: flex;
    align-items: center; justify-content: center;
    color: #c0c5ce; font-size: 7pt; margin-bottom: 4pt;
  }
  .print-code  { font-size: 6.5pt; font-weight: 700; color: #1a3a5c; text-transform: uppercase; letter-spacing: .3pt; }
  .print-desc  { font-size: 7pt; color: #333; margin: 2pt 0; line-height: 1.3;
                 overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .print-price { font-size: 8pt; font-weight: 700; color: #1a3a5c; margin-top: 3pt; }

  @page { margin: 12mm 10mm; }
}

/* Portrait: 3 columns; Landscape: 4 columns (default above) */
@media print and (orientation: portrait) {
  .print-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Cart button (header) ─────────────────────────────────────────────────── */
.cart-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.12);
  border: none; border-radius: 8px; cursor: pointer;
  color: #fff; transition: background .15s; flex-shrink: 0;
}
.cart-btn:hover { background: rgba(255,255,255,.22); }
.cart-badge {
  position: absolute; top: -5px; right: -5px;
  background: var(--gold); color: #fff;
  font-size: .6rem; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  padding: 0 4px; display: none;
  align-items: center; justify-content: center;
  border: 2px solid var(--navy);
}
.cart-badge.show { display: flex; }

/* ── Add-to-cart 3-zone stepper (card bottom) ────────────────────────────── */
/* Layout looks like a single full-width button with two side controls (− / +)
   and a centre label that shows the current state.                          */
.cart-stepper {
  display: flex; width: 100%;
  background: var(--navy); color: #fff;
  border-top: 1px solid rgba(0,0,0,.12);
  border-radius: 0 0 var(--radius) var(--radius);  /* card no longer clips; round bottom here */
  overflow: hidden;
  transition: background .15s;
  user-select: none;
  cursor: pointer;
}
.cart-stepper.in-cart { background: #1c6933; }

.cs-zone, .cs-label {
  background: transparent;
  color: inherit;
  border: 0;
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  letter-spacing: .2px;
  line-height: 1;
  padding: 8px 6px;
  cursor: pointer;
}
.cs-zone {
  flex: 0 0 36px;
  font-size: 1rem;
  font-weight: 700;
  transition: background .12s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-label {
  flex: 1;
  font-size: .74rem;
  padding: 9px 4px;
}
.cs-zone:hover  { background: rgba(255,255,255,.18); }
.cs-label:hover { background: rgba(255,255,255,.08); }
.cs-zone:active { background: rgba(0,0,0,.18); }
.cart-stepper.in-cart .cs-zone:hover { background: rgba(255,255,255,.18); }

/* Hide the < and > zones until at least one item is in the cart (green state). */
.cart-stepper:not(.in-cart) .cs-zone { display: none; }

/* ── Cart overlay + drawer ────────────────────────────────────────────────── */
.cart-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 300;
}
.cart-overlay.show { display: block; }

.cart-drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 400px; max-width: 95vw;
  background: var(--card); z-index: 310;
  display: flex; flex-direction: column;
  box-shadow: -6px 0 32px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  background: var(--navy); color: #fff;
}
.cart-drawer-hd h3 { font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.cart-drawer-count {
  font-size: .7rem; font-weight: 700;
  background: var(--gold); color: #fff;
  padding: 1px 8px; border-radius: 10px;
}
/* Hide the pill entirely when the cart is empty - otherwise the empty span
   still shows the gold background through its padding and reads as a stray
   yellow dash next to "Shopping Cart". */
.cart-drawer-count:empty { display: none; }
.cart-close-btn {
  background: none; border: none; font-size: 1.5rem;
  cursor: pointer; color: rgba(255,255,255,.75); line-height: 1; padding: 0 4px;
}
.cart-close-btn:hover { color: #fff; }

.cart-drawer-body { flex: 1; overflow-y: auto; padding: 10px 14px; }
.cart-empty { text-align: center; padding: 52px 20px; color: var(--txt-lt); }
.cart-empty svg { opacity: .25; margin-bottom: 12px; }
.cart-empty p { font-size: .88rem; }

.cart-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-img {
  width: 54px; height: 54px; flex-shrink: 0;
  background: #f7f8fa; border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
}
.cart-item-img img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.cart-item-img svg { opacity: .25; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-code { font-size: .7rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .4px; }
.cart-item-desc {
  font-size: .78rem; color: var(--txt); margin: 2px 0 7px; line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cart-item-row { display: flex; align-items: center; justify-content: space-between; }
.cart-item-price { font-size: .82rem; font-weight: 700; color: var(--gold); }
.cart-item-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 6px;
}
.cart-item-remove {
  background: none; border: none; cursor: pointer;
  color: var(--txt-lt); font-size: .72rem; padding: 2px 6px;
  border-radius: 4px; transition: color .12s, background .12s;
}
.cart-item-remove:hover { color: var(--red); background: #fde8e8; }

.cart-item-narrative {
  background: none; border: 1px dashed var(--border);
  color: var(--txt-lt); font-size: .7rem; font-weight: 600;
  padding: 3px 8px; border-radius: 4px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 65%; min-width: 0;
  transition: color .12s, border-color .12s, background .12s;
  letter-spacing: .3px;
}
.cart-item-narrative:hover { color: var(--navy); border-color: var(--navy); background: #f0f5fb; }
.cart-item-narrative.has-narr {
  color: var(--navy); border-style: solid; border-color: var(--navy);
  background: #eaf2fb; font-weight: 600; letter-spacing: normal;
}
.cart-item-narrative .narr-preview {
  font-weight: 500; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0; max-width: 100%;
}

/* Popover used to edit the per-line narrative */
.narrative-popover {
  margin-top: 8px; padding: 10px 12px;
  background: #fff; border: 1.5px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}
html.dark .narrative-popover { background: var(--card); }
.narr-pop-hd {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .78rem; font-weight: 600; color: var(--navy);
  margin-bottom: 6px;
}
.narr-pop-close {
  background: none; border: none; cursor: pointer;
  color: var(--txt-lt); font-size: .9rem; padding: 0 4px; line-height: 1;
}
.narr-pop-close:hover { color: var(--red); }
.narr-pop-textarea {
  width: 100%; min-height: 70px; resize: vertical;
  border: 1.5px solid var(--border); border-radius: 6px;
  font-size: .82rem; padding: 7px 9px; font-family: inherit;
  color: var(--txt); background: #fff;
}
html.dark .narr-pop-textarea { background: #1f242b; }
.narr-pop-textarea:focus { outline: none; border-color: var(--navy); }
.narr-pop-ft {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 7px;
}
.narr-pop-count { font-size: .72rem; color: var(--txt-lt); }
.narr-pop-btns { display: flex; gap: 6px; }
.narr-pop-clear, .narr-pop-save {
  font-size: .76rem; font-weight: 600;
  padding: 5px 12px; border-radius: 5px; cursor: pointer;
  border: 1.5px solid var(--border); background: #fff; color: var(--txt);
}
.narr-pop-clear:hover { border-color: var(--red); color: var(--red); }
.narr-pop-save {
  border-color: var(--navy); background: var(--navy); color: #fff;
}
.narr-pop-save:hover { background: #122a45; }

.qty-ctrl { display: flex; align-items: center; gap: 4px; }
.qty-btn {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border); border-radius: 4px;
  background: #f7f8fa; cursor: pointer; font-size: .95rem; font-weight: 700;
  color: var(--txt); padding: 0; line-height: 1;
}
.qty-btn:hover { border-color: var(--navy); color: var(--navy); background: #fff; }
.qty-btn.at-cap { opacity: .45; cursor: not-allowed; }
.qty-btn.at-cap:hover { border-color: var(--border); color: var(--txt); background: #f7f8fa; }

/* Card stepper variants: at-cap (in cart, cannot add more) + no-stock (zero available, not in cart). */
.cart-stepper.no-stock { background: #b08b46; opacity: .85; cursor: not-allowed; }
.cart-stepper.no-stock .cs-zone { display: none; }
.cart-stepper.at-cap .cs-inc { opacity: .35; }
.qty-val {
  width: 34px; height: 24px; text-align: center;
  border: 1.5px solid var(--border); border-radius: 4px;
  font-size: .82rem; font-weight: 600; color: var(--txt);
  background: #fff;
}
.qty-val:focus { outline: none; border-color: var(--navy); }

.cart-drawer-ft {
  padding: 14px 16px; border-top: 2px solid var(--border);
  flex-shrink: 0; background: #fafbfc;
}
.cart-totals { margin-bottom: 12px; }
.cart-total-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; padding: 3px 0; color: var(--txt-lt);
}
.cart-total-inc { font-size: .98rem; color: var(--txt); font-weight: 700; padding-top: 6px; border-top: 1px solid var(--border); margin-top: 4px; }
.cart-total-inc strong { color: var(--navy); font-size: 1.05rem; }
.cart-notes-input {
  width: 100%; resize: none;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: .84rem; padding: 8px 10px; font-family: inherit;
  margin-bottom: 10px; background: #fff; color: var(--txt);
}
.cart-notes-input:focus { outline: none; border-color: var(--navy); }

/* ── Modal cart row (sits at the bottom of .modal, after .modal-body) ───── */
.modal-cart-row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 32px; border-top: 1px solid var(--border);
  background: var(--card);
}

/* ── Order status badges ──────────────────────────────────────────────────── */
.ord-status {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.ord-pending    { background: #fff3cd; color: #7a5c00; }
.ord-confirmed  { background: #cce5ff; color: #004085; }
.ord-dispatched { background: #d4edda; color: #155724; }
.ord-cancelled  { background: #fde8e8; color: #8b1a1a; }

/* ── Admin tabs ───────────────────────────────────────────────────────────── */
.admin-tabs {
  display: flex; border-bottom: 2px solid var(--border); margin-bottom: 24px;
}
.admin-tab {
  padding: 10px 22px; font-size: .88rem; font-weight: 600; cursor: pointer;
  background: none; border: none; border-bottom: 3px solid transparent;
  color: var(--txt-lt); margin-bottom: -2px; transition: color .15s, border-color .15s;
}
.admin-tab:hover { color: var(--navy); }
.admin-tab.active { color: var(--navy); border-bottom-color: var(--navy); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Orders table ─────────────────────────────────────────────────────────── */
.orders-wrap { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
table.orders-tbl { width: 100%; border-collapse: collapse; }
table.orders-tbl th {
  text-align: left; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--txt-lt); padding: 10px 14px;
  border-bottom: 1px solid var(--border); background: #fafbfc;
}
table.orders-tbl td { padding: 11px 14px; border-bottom: 1px solid #f0f2f5; font-size: .88rem; vertical-align: middle; }
table.orders-tbl tr:last-child td { border-bottom: none; }
table.orders-tbl tr.order-row { cursor: pointer; transition: background .12s; }
table.orders-tbl tr.order-row:hover td { background: #f7f9fc; }
.order-detail-row td { background: #f7f9fc; padding: 0; }
.order-detail-inner { padding: 12px 16px; }
.order-items-mini { width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: 8px; }
.order-items-mini th { padding: 5px 8px; text-align: left; font-size: .72rem; color: var(--txt-lt); border-bottom: 1px solid var(--border); }
.order-items-mini td { padding: 5px 8px; border-bottom: 1px solid #eee; }
.order-items-mini tr:last-child td { border-bottom: none; }
.order-action-bar { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ── Orders page (customer view) ──────────────────────────────────────────── */
.orders-page { max-width: 960px; margin: 32px auto; padding: 0 20px 60px; }
.orders-page h1 { font-size: 1.4rem; color: var(--navy); margin-bottom: 20px; }

/* ── Hamburger button (header) - hidden on desktop ──────────────────────── */
.hamburger-btn {
  display: none;             /* shown only on mobile via media query */
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.12);
  border: none; border-radius: 8px;
  cursor: pointer; flex-shrink: 0;
  padding: 8px 8px;
  transition: background .15s;
}
.hamburger-btn:hover { background: rgba(255,255,255,.22); }
.hamburger-btn span {
  display: block; height: 2px; width: 100%;
  background: #fff; border-radius: 2px;
}

/* ── Category drawer overlay (mobile only) ──────────────────────────────── */
.cat-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 300;
}
.cat-overlay.show { display: block; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* ── ≤ 768px: tablet / phone ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .brand-text .sub { display: none; }
  .header-brand .header-logo { height: 38px; }
  .auth-card { padding: 32px 24px; }
  .toolbar { top: 62px; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; }

  /* Mobile: show the count under the search box; hide the toolbar's own
     count + Print (Print lives in the avatar menu now). This keeps the
     admin filter bar to a single thin row of chips, spread evenly across
     the full width so they occupy the space naturally. */
  .header-result-count { display: block; }
  .toolbar .result-count,
  .toolbar .btn-print { display: none; }
  .toolbar { padding: 7px 10px; }
  /* Centre the chip group; each chip sizes to its text (no wrapping) and the
     gaps space them symmetrically across the bar. */
  .toolbar-inner { gap: 10px; justify-content: center; flex-wrap: nowrap; }
  .toolbar-inner .filter-chip { white-space: nowrap; padding: 7px 14px; }

  /* Hamburger appears on mobile */
  .hamburger-btn { display: flex; }

  /* Catalog layout stacks (sidebar becomes overlay drawer). The parent
     .catalog-layout has `align-items: flex-start` from desktop which in
     column mode left-aligns children on the cross axis - so .catalog-body
     was shrinking to content width and sitting against the left edge with
     a big empty space on the right. Force full width on mobile. */
  .catalog-layout { flex-direction: column; align-items: stretch; }
  .catalog-body   { width: 100%; }

  /* Category sidebar → left-side slide-out drawer */
  .category-sidebar {
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 260px; max-width: 80vw;
    background: var(--card);
    z-index: 310;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 6px 0 32px rgba(0,0,0,.18);
    overflow-y: auto; overflow-x: hidden;
    max-height: none;
    padding: 16px 10px 24px;
    border-right: 1px solid var(--border);
  }
  .category-sidebar.open { transform: translateX(0); }

  .cat-sidebar-label {
    display: block;
    font-size: .72rem;
    padding: 4px 10px 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
  }
  .cat-btn {
    display: block; width: 100%;
    text-align: left;
    padding: 9px 12px;
    margin-bottom: 2px;
    border-radius: 6px;
    border: none;
    font-size: .9rem;
    white-space: normal;
  }

  .catalog-body { padding: 16px 14px 60px; }
}

/* ── ≤ 600px: small phone - simplify header ──────────────────────────────── */
@media (max-width: 600px) {
  /* Hide text nav links - My Orders is reachable via cart drawer */
  .header-nav-link { display: none; }

  /* Hide username text, keep avatar circle */
  .user-badge span { display: none; }

  /* Remove the decorative divider */
  .brand-divider { display: none; }

  /* Drop the "F.G.I. & C. Attard Ltd" wordmark on narrow (portrait) phones -
     keep just the logo. This frees the width the wordmark was eating so the
     search box can expand into a usable field instead of collapsing to an icon. */
  .brand-text { display: none; }

  /* Let search bar fill remaining space */
  .header-search { flex: 1; max-width: none; min-width: 0; }

  /* Compact logout */
  #logoutBtn { padding: 5px 10px; font-size: .78rem; }
}

/* ── ≤ 480px: very small phone ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .header-inner { gap: 6px; padding: 0 10px; }
  .brand-text .name { font-size: .9rem; }

  /* SINGLE-COLUMN product grid on phones - one product card per row gives the
     image room to breathe and matches how everyone scans a phone catalogue. */
  .product-grid { grid-template-columns: 1fr; gap: 12px; }
  .catalog-body { padding: 12px 10px 60px; }

  /* On phones (single-column grid) we let each product image dictate its
     own card height instead of forcing a 4:3 / 1:1 wrap. That way a
     landscape photo (e.g. a bag) is short, a portrait photo (e.g. the
     round-plate-with-cork-swatch) is taller - neither gets white pillar-
     or letterbox bars eating space. The image still has a sensible max-
     height cap so a single tall photo cannot dominate the whole viewport.
     This freedom is fine on a one-column layout but would break alignment
     in the multi-column desktop grid, hence the override stays scoped to
     ≤480px. */
  .card-img-wrap {
    padding-top: 0;
    aspect-ratio: auto;
  }
  .card-img-wrap img {
    position: static;
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    padding: 4px;
    display: block;
  }

  /* Modal becomes a true bottom-sheet that fills the bottom of the viewport
     and never overflows. The header stays pinned at the top of the sheet,
     the body scrolls internally, and the Add-to-Cart row is pinned to the
     bottom so the customer never has to scroll to find it. */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    border-radius: 14px 14px 0 0;
    max-width: 100vw;
    width: 100vw;
    height: 100vh;
    height: 100dvh;          /* fill the whole viewport - no wasted dimmed
                                strip above the sheet */
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;        /* let .modal-body do the scrolling instead */
  }
  .modal-header { padding: 14px 18px; flex: 0 0 auto; }
  .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    flex-direction: column;
    padding: 18px 18px 18px;
    gap: 14px;
    align-items: center;
    text-align: center;
  }
  .modal-img {
    flex: 0 0 auto;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  .modal-img img { max-height: 240px; }
  .modal-info {
    width: 100%;
    min-width: 0;
    text-align: center;
  }
  .modal-info .code-big { font-size: 1.5rem; }
  .modal-info .desc-big { font-size: 1rem; margin: 8px 0 14px; }
  .price-big { font-size: 1.7rem; margin: 10px 0 6px; }
  .modal-info table {
    margin: 14px auto 0;
    max-width: 260px;
    text-align: left;
  }
  .modal-info td:first-child { width: 50%; padding-left: 4px; }
  .modal-info td:last-child  { padding-right: 4px; text-align: right; }
  /* The cart row was inside .modal-info; markup change moves it out so it
     can sit at the bottom of the flex column and stay visible. */
  .modal-cart-row {
    flex: 0 0 auto;
    margin: 0;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: var(--card);
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
  }
  .modal-cart-row .btn { flex: 1 1 auto; min-width: 0; }

  /* Admin / orders page padding */
  .admin-wrap { padding: 0 12px 40px; margin-top: 20px; }
  .ord-stats { grid-template-columns: repeat(2, 1fr); }
}