/* ==========================================================================
   Yash Engineering — Storefront Design System
   Clean SaaS style: neutral surface, single accent, generous whitespace.
   ========================================================================== */

:root {
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-text-faint: #94a3b8;

  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: #eff6ff;
  --color-primary-text: #1e40af;

  --color-success: #16a34a;
  --color-success-bg: #f0fdf4;
  --color-success-border: #bbf7d0;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fecaca;
  --color-warning: #d97706;
  --color-warning-bg: #fffbeb;
  --color-warning-border: #fde68a;

  --color-bg-subtle: #fafbfc;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --max-width: 1160px;
}

/* Dark values mirror the Flutter app's AppColorsDark (mobile_app/lib/theme/app_theme.dart)
   for visual consistency between the website and the app. Brand colors (primary,
   success/danger/warning accents) stay the same in both themes, matching the app. */
[data-theme="dark"] {
  --color-bg: #0B1220;
  --color-surface: #141B2D;
  --color-border: #283042;
  --color-border-strong: #3A4356;
  --color-text: #E2E8F0;
  --color-text-muted: #94A3B8;
  --color-text-faint: #64748B;
  --color-bg-subtle: #1a2334;

  --color-primary-light: #16223d;

  --color-success-bg: #0f2a1a;
  --color-success-border: #1f4a30;
  --color-danger-bg: #3a1414;
  --color-danger-border: #5c1f1f;
  --color-warning-bg: #3a2a0f;
  --color-warning-border: #5c451f;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-sans);
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 15px;
  line-height: 1.55;
}

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

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 600; }

/* ---------- Header ---------- */
header.site {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  font-weight: 800;
  font-size: 18px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -.02em;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-subtitle {
  font-size: 11px; font-weight: 500; color: var(--color-text-muted); letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}

.brand .brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

.topbar nav { display: flex; gap: 4px; flex: 1; }
.topbar nav a {
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.topbar nav a:hover { color: var(--color-text); background: var(--color-bg); }

.topbar .right { display: flex; gap: 4px; align-items: center; }
.topbar .right a, .topbar .right button {
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.topbar .right a:hover { color: var(--color-text); background: var(--color-bg); }
.topbar .right a.cta { color: #fff; background: var(--color-primary); }

/* ---------- Search bar (always-visible row under the header, both desktop + mobile) ---------- */
.search-bar-row { border-top: 1px solid var(--color-border); background: var(--color-bg); }
.search-form {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-form .icon { width: 18px; height: 18px; color: var(--color-text-muted); flex-shrink: 0; }
.search-form input[type="search"] {
  flex: 1;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  background: var(--color-surface);
}
.search-form input[type="search"]:focus { outline: none; border-color: var(--color-primary); }
.search-form button {
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  cursor: pointer;
}
.search-form button:hover { background: var(--color-primary-hover); }

@media (max-width: 640px) {
  .search-form { padding: 8px 16px; }
  .search-form button { padding: 9px 14px; }
}
.topbar .right a.cta:hover { background: var(--color-primary-hover); }

.icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Theme toggle ---------- */
.theme-toggle-btn {
  background: none; border: none; padding: 8px; cursor: pointer;
  color: var(--color-text-muted); border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle-btn:hover { background: var(--color-bg); color: var(--color-text); }
.theme-toggle-btn .icon-sun, .theme-toggle-btn .icon-moon { width: 18px; height: 18px; }
.theme-toggle-btn .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle-btn .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; }
.theme-toggle-btn-drawer {
  display: flex; align-items: center; gap: 8px; width: 100%;
  color: var(--color-text); font-weight: 500; font-size: 15px;
  padding: 12px 6px; border-radius: var(--radius-sm); justify-content: flex-start;
}
.theme-toggle-btn-drawer:hover { background: var(--color-bg); color: var(--color-text); }

/* ---------- Language switcher ---------- */
.lang-switcher { display: flex; align-items: center; gap: 6px; margin-right: 4px; }
.lang-switcher select {
  font-size: 12.5px; font-weight: 600; color: var(--color-text-muted);
  padding: 6px 24px 6px 9px; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
  background: var(--color-surface); cursor: pointer; appearance: auto;
}
.lang-switcher select:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.lang-switcher-drawer { margin: 4px 6px 0; }

/* ---------- Mobile menu toggle + drawer ---------- */
.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 8px;
  margin: 0;
  min-width: 0;
  color: var(--color-text);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.menu-toggle:hover { background: var(--color-bg); }

.mobile-drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .5);
  z-index: 40;
  opacity: 0;
  transition: opacity .2s ease;
}
.mobile-drawer-overlay.open { display: block; opacity: 1; }

.mobile-drawer {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: 82%; max-width: 320px;
  background: var(--color-surface);
  z-index: 41;
  display: flex; flex-direction: column;
  padding: 8px 20px 20px;
  transform: translateX(-100%);
  transition: transform .25s ease;
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }

.mobile-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; margin-bottom: 8px; border-bottom: 1px solid var(--color-border);
}
.mobile-drawer-header .brand { font-size: 16px; }
.drawer-close {
  background: transparent; border: none; font-size: 24px; line-height: 1; color: var(--color-text-muted);
  padding: 4px 8px; min-width: 0; cursor: pointer;
}

.mobile-drawer a {
  display: flex; align-items: center; gap: 8px;
  color: var(--color-text); font-weight: 500; font-size: 15px;
  padding: 12px 6px; border-radius: var(--radius-sm);
}
.mobile-drawer a:hover { background: var(--color-bg); color: var(--color-text); }
.mobile-drawer a.cta { color: #fff; background: var(--color-primary); justify-content: center; }
.mobile-drawer hr { border: none; border-top: 1px solid var(--color-border); margin: 10px 0; }
.mobile-drawer form { margin-top: 6px; }

/* ---------- Mobile bottom nav ---------- */
.mobile-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: 30;
  padding: 6px 0;
  box-shadow: 0 -2px 12px rgba(15, 23, 42, .06);
}
.mobile-bottom-nav a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--color-text-muted); font-size: 11px; font-weight: 600;
  padding: 6px 4px;
}
.mobile-bottom-nav a.active { color: var(--color-primary); }
.mobile-bottom-nav .icon { width: 20px; height: 20px; }

.cart-badge {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-full);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
}

/* ---------- Layout ---------- */
main { max-width: var(--max-width); margin: 0 auto; padding: 32px 24px 72px; min-height: 60vh; }

.flash {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
}
.flash.error { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); }
.flash.success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.flash.warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, #1e3a8a 0%, var(--color-primary) 100%);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  color: #fff;
  margin-bottom: 40px;
}
.hero h1 { font-size: 32px; color: #fff; margin-bottom: 8px; }
.hero p { color: #dbeafe; font-size: 15px; max-width: 460px; margin: 0; }

/* ---------- Banner slider ---------- */
.banner-slider {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  margin-bottom: 40px; aspect-ratio: 3 / 1; background: #0f172a;
}
.banner-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .6s ease;
}
.banner-slide.active { opacity: 1; visibility: visible; }
.banner-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-slide a.banner-link { display: block; width: 100%; height: 100%; }
.banner-caption {
  position: absolute; left: 0; bottom: 0; width: 100%; padding: 28px 36px 22px;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent); color: #fff; pointer-events: none;
}
.banner-caption h2 { color: #fff; font-size: 24px; margin-bottom: 2px; }
.banner-caption p { margin: 0; color: #e2e8f0; font-size: 14px; }
.banner-dots { position: absolute; bottom: 16px; right: 24px; display: flex; gap: 6px; z-index: 2; }
.banner-dots button {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); border: none; padding: 0; min-width: 0;
}
.banner-dots button.active { background: #fff; }
.banner-dots button:hover { background: #fff; }

/* ---------- Flash sale strip ---------- */
.flash-sale-strip {
  background: linear-gradient(120deg, #7f1d1d, #dc2626 60%, #ea580c);
  border-radius: var(--radius-lg); padding: 22px 32px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-bottom: 32px;
}
.flash-sale-strip .info h2 { color: #fff; display: flex; align-items: center; gap: 8px; }
.flash-sale-strip .info p { margin: 4px 0 0; color: #fecaca; font-size: 13px; }
.countdown { display: flex; gap: 8px; }
.countdown .unit { background: rgba(255,255,255,.16); border-radius: 8px; padding: 8px 12px; text-align: center; min-width: 54px; }
.countdown .unit .num { font-size: 20px; font-weight: 800; display: block; line-height: 1; }
.countdown .unit .lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }

/* ---------- Section headings ---------- */
.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 40px 0 16px; }
.section-heading h2 { margin: 0; }
.section-heading a { font-size: 13px; font-weight: 600; }

/* ---------- Grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.grid.categories { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }

/* ---------- Card ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* ---------- Dashboard stat tiles (dealer account dashboard) ---------- */
.stat-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px; }
.stat-card .stat-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: var(--color-primary-light); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.stat-card.warn .stat-icon { background: var(--color-warning-bg); color: var(--color-warning); }
.stat { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.stat-label { font-size: 12px; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 780px) { .dash-cols { grid-template-columns: 1fr; } }

.category-card {
  /* --category-card-bg is set inline by web/layout.php from Admin > Settings when the
     site owner has picked a custom color/gradient/transparent card style; otherwise it's
     unset and this falls back to the normal theme surface color. */
  background: var(--category-card-bg, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.category-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); transform: translateY(-1px); }
.category-card .cat-icon {
  width: 64px; height: 64px; border-radius: var(--radius-sm);
  background: var(--color-primary-light); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  overflow: hidden; padding: 8px;
}
/* "contain" (not "cover") so an uploaded category image — usually a brand/product
   logo with its own padding, not a photo meant to be cropped — is shown in full. */
.category-card .cat-icon img { width: 100%; height: 100%; object-fit: contain; }
.category-card h3 { margin: 0; font-size: 13.5px; }
.category-card .muted { margin: 0; font-size: 12px; }

/* ---------- Product card ---------- */
.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.product-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); transform: translateY(-2px); }
.product-card .thumb {
  aspect-ratio: 1.3 / 1;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-faint);
  position: relative;
}
.product-card .thumb .icon { width: 34px; height: 34px; }
.flash-ribbon {
  position: absolute; top: 10px; left: -6px;
  background: #dc2626; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .03em;
  padding: 3px 10px; box-shadow: var(--shadow-sm);
}
.badge.flash { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.product-card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card h3 { margin: 0; font-size: 14px; }
.product-card .sku { font-size: 11px; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: .04em; }
.product-card .price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.pdp-variant-price-hint { margin: 2px 0 0; font-size: 12.5px; color: var(--color-text-muted); font-style: italic; }
.product-card .stock-out { color: var(--color-danger); font-size: 12px; font-weight: 600; }

/* ---------- Cart quantity stepper (replaces "Add to Cart" once a product listing
   card's item is already in the cart) — see partials/product_card.php + cart-stepper.js */
.cart-stepper {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--color-primary-light); border-radius: var(--radius-sm); padding: 2px;
}
.cart-stepper-btn {
  width: 32px; height: 32px; padding: 0; flex-shrink: 0;
  background: var(--color-surface); color: var(--color-primary); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); font-size: 16px; font-weight: 700; line-height: 1;
}
.cart-stepper-btn:hover { background: var(--color-primary-light); }
.cart-stepper-qty { font-weight: 700; font-size: 13.5px; }

.price { font-weight: 700; font-size: 17px; color: var(--color-text); }
.mrp { color: var(--color-text-faint); text-decoration: line-through; font-size: 13px; font-weight: 500; }

.thumb-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.thumb-btn {
  width: 64px; height: 64px; padding: 0; min-width: 0; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--color-surface); border: 2px solid var(--color-border); cursor: pointer; flex-shrink: 0;
}
.thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-btn.active { border-color: var(--color-primary); }
.thumb-btn:hover { border-color: var(--color-primary); }

.badge {
  display: inline-flex; align-items: center;
  background: var(--color-warning-bg); color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 700;
}
.badge.pending { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); }
.badge.approved, .badge.active { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.badge.rejected, .badge.inactive { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); }

/* ---------- Buttons ---------- */
button, .btn {
  font-family: inherit; font-size: 14px; font-weight: 600;
  background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary);
  padding: 10px 18px; border-radius: var(--radius-sm);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s, box-shadow .15s, transform .05s;
}
button:hover, .btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); text-decoration: none; }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }
.btn-outline { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-border-strong); }
.btn-outline:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-danger { background: var(--color-surface); color: var(--color-danger); border-color: var(--color-danger-border); }
.btn-danger:hover { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); }
.btn-block { width: 100%; }
form.inline { display: inline; }

/* ---------- Confirm modal (e.g. "Added to cart" — see web/product.php) ---------- */
.confirm-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .5);
  z-index: 80; align-items: center; justify-content: center; padding: 20px;
}
.confirm-modal-overlay.open { display: flex; }
.confirm-modal {
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 28px; max-width: 360px; width: 100%; text-align: center;
}
.confirm-modal .icon-circle {
  width: 52px; height: 52px; border-radius: 999px; background: var(--color-success-bg); color: var(--color-success);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.confirm-modal h3 { margin: 0 0 6px; }
.confirm-modal p { margin: 0 0 20px; }
.confirm-modal .actions { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Forms ---------- */
input, select, textarea {
  font-family: inherit; font-size: 14px;
  padding: 10px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.field label { font-size: 13px; font-weight: 600; color: var(--color-text); }

.auth-shell { display: flex; justify-content: center; padding: 40px 0; }
.auth-card {
  width: 100%; max-width: 400px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 36px 32px; box-shadow: var(--shadow-sm);
}
.auth-card h1 { text-align: center; margin-bottom: 4px; }
.auth-card .subtitle { text-align: center; color: var(--color-text-muted); font-size: 13px; margin-bottom: 24px; }
.auth-card .footer-link { text-align: center; margin-top: 16px; font-size: 13px; color: var(--color-text-muted); }

.auth-tabs { display: flex; gap: 4px; background: var(--color-bg); border-radius: var(--radius-md); padding: 4px; margin-bottom: 24px; }
.auth-tabs .tab-btn {
  flex: 1; background: transparent; color: var(--color-text-muted); border: none;
  padding: 8px 6px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.auth-tabs .tab-btn.active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.auth-tabs .tab-btn:hover:not(.active) { color: var(--color-text); }
.otp-status { min-height: 18px; margin: 10px 0 0; font-size: 13px; }
.otp-status.error { color: var(--color-danger); }
.otp-status.success { color: var(--color-success); }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--color-border); text-align: left; font-size: 14px; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-faint); font-weight: 700; background: var(--color-bg-subtle); }
tbody tr:hover { background: var(--color-bg-subtle); }
/* overflow-x:auto (not "hidden") so a table wider than its container — e.g. on a
   narrow mobile screen — scrolls into view instead of silently clipping columns like
   the Orders list's View/Invoice links, which used to be cut off entirely. */
.table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-x: auto; overflow-y: hidden; }
.table-wrap table { border: none; }

/* Line-items table + summary sidebar (cart, order detail) — collapses to one column
   on mobile (see the 640px breakpoint below) instead of squeezing the table into a
   sliver next to a fixed 320px sidebar. */
.line-items-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; margin-top: 20px; }

.muted { color: var(--color-text-muted); font-size: 13px; }

/* Vertical order-tracking timeline (account order detail) — replaces a plain
   status/date table with a connected step list so "where's my order" reads at a glance. */
.tracking-timeline { list-style: none; margin: 16px 0 0; padding: 0; }
.tracking-timeline li { position: relative; padding-left: 28px; padding-bottom: 22px; }
.tracking-timeline li:last-child { padding-bottom: 0; }
.tracking-timeline li::before { content: ''; position: absolute; left: 5px; top: 16px; bottom: -6px; width: 2px; background: var(--color-border); }
.tracking-timeline li:last-child::before { display: none; }
.tracking-dot { position: absolute; left: 0; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary, #1a73e8); border: 2px solid var(--color-primary, #1a73e8); }
.tracking-step-label { font-weight: 700; }
.tracking-step-time { margin-top: 2px; }

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center; padding: 64px 24px; color: var(--color-text-muted);
  background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg);
}
.empty-state .icon { width: 40px; height: 40px; color: var(--color-text-faint); margin-bottom: 12px; }
.empty-state p { margin: 0 0 16px; }

/* ---------- Summary box (cart / order totals) ---------- */
.summary-box { max-width: 340px; margin-left: auto; }
.summary-box .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.summary-box .row.total { border-top: 1px solid var(--color-border); margin-top: 6px; padding-top: 12px; font-weight: 700; font-size: 16px; }

/* ---------- CMS content (pages, blog posts) ---------- */
.content-body { line-height: 1.75; }
.content-body h2 { font-size: 22px; margin: 1.4em 0 .5em; }
.content-body h3 { font-size: 17px; margin: 1.2em 0 .5em; }
.content-body p { margin: 0 0 1em; }
.content-body ul, .content-body ol { margin: 0 0 1em; padding-left: 24px; }
.content-body li { margin-bottom: .4em; }
.content-body img { max-width: 100%; border-radius: var(--radius-md); margin: 1em 0; }
.content-body a { text-decoration: underline; }
.content-body blockquote { border-left: 3px solid var(--color-primary); margin: 1em 0; padding: .2em 0 .2em 16px; color: var(--color-text-muted); }

/* ---------- Footer ---------- */
footer.site { border-top: 1px solid var(--color-border); padding: 32px 24px; margin-top: 48px; color: var(--color-text-faint); font-size: 13px; text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-bottom: 14px; }
.footer-links a { color: var(--color-text-muted); font-weight: 500; font-size: 13px; }
.footer-links a:hover { color: var(--color-primary); }

/* ---------- Android app banner (mobile only) ---------- */
.app-banner {
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--color-primary); color: #fff; padding: 10px 16px;
}
.app-banner-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-banner-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm); background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.app-banner-icon .icon { color: #fff; width: 20px; height: 20px; }
.app-banner-text { min-width: 0; }
.app-banner-text strong { display: block; font-size: 13px; line-height: 1.3; }
.app-banner-text span { display: block; color: rgba(255,255,255,.82); font-size: 11.5px; line-height: 1.3; }
.app-banner-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.app-banner-actions .btn { background: #fff; color: var(--color-primary); border-color: #fff; padding: 6px 14px; font-size: 12.5px; }
.app-banner-actions .btn:hover { background: rgba(255,255,255,.9); }
.app-banner-actions button {
  background: transparent; border: none; color: #fff; font-size: 20px; line-height: 1;
  padding: 2px 4px; cursor: pointer; opacity: .85;
}
.app-banner-actions button:hover { opacity: 1; }

@media (max-width: 640px) {
  body { padding-bottom: 60px; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .topbar { gap: 10px; padding: 12px 16px; }
  .topbar nav { display: none; }
  .topbar .right { gap: 0; }
  .topbar .right .desktop-only-link { display: none; }
  .topbar .right .cart-link .link-text { display: none; }
  .mobile-bottom-nav { display: flex; }
  .app-banner { display: flex; }
  .hero { padding: 32px 24px; }
  .hero h1 { font-size: 24px; }

  .line-items-layout { grid-template-columns: 1fr; }

  /* Shop by category (home page preview strip only — see the "home-categories" class
     that distinguishes it from the full /categories grid, which stays a wrapping grid
     showing every category): horizontal-scroll carousel, matching the mobile app.
     Sticky so it stays pinned (and keeps auto-scrolling right-to-left — see home.php's
     inline script) just below the site header while the visitor scrolls through the
     product grid beneath it, instead of scrolling away after the first screen. The
     "top" offset is set inline by home.php at runtime (the header's height isn't a
     fixed constant — it varies with the tagline/banner/etc.), not hardcoded here. */
  .grid.categories.home-categories {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 8px 4px 12px;
    margin: 0 -4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: sticky;
    top: 0;
    z-index: 15;
    background: var(--color-bg);
  }
  .grid.categories.home-categories::-webkit-scrollbar { display: none; }
  .grid.categories.home-categories .category-card {
    flex: 0 0 auto;
    width: 110px;
    scroll-snap-align: start;
    padding: 12px 8px;
  }
  .grid.categories.home-categories .category-card .cat-icon { width: 52px; height: 52px; }
  .grid.categories.home-categories .category-card h3 { font-size: 12px; }
  .grid.categories.home-categories .category-card .muted { display: none; }

  /* Product grids (flash sale, latest products, category listing, search results): 2
     columns on mobile instead of the desktop auto-fill collapsing to a single column. */
  .grid:not(.categories) { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Customer-facing notification bell (header) — same bell/dropdown/JS pattern as the
   admin panel's (admin.css .notif-*), just positioned inline in the topbar's flex row
   instead of fixed to the viewport corner, since the storefront header isn't a sidebar
   layout. */
.notif-bell-wrap { position: relative; }
.notif-bell-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-full);
  border: none; background: none; color: var(--color-text-muted); cursor: pointer;
  position: relative;
}
.notif-bell-btn:hover { background: var(--color-bg); color: var(--color-text); }
.notif-bell-btn svg { width: 20px; height: 20px; }
.notif-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: var(--radius-full); background: var(--color-danger, #dc2626); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; border: 2px solid var(--color-surface);
}
.notif-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-width: 88vw;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,.14); z-index: 80; overflow: hidden;
}
.notif-dropdown.open { display: block; }
.notif-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--color-border); }
.notif-mark-all { background: none; border: none; color: var(--color-primary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.notif-mark-all:hover { color: var(--color-primary-hover); }
.notif-dropdown-list { max-height: 360px; overflow-y: auto; }
.notif-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--color-border); text-decoration: none; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-bg); }
.notif-item.unread { background: var(--color-primary-light); }
.notif-item-title { font-size: 13px; font-weight: 600; color: var(--color-text); }
.notif-item-message { font-size: 12.5px; color: var(--color-text-muted); margin-top: 2px; }
.notif-item-time { font-size: 11px; color: var(--color-text-faint); margin-top: 4px; }
.notif-empty { padding: 20px 14px; text-align: center; color: var(--color-text-muted); font-size: 13px; }

@media (max-width: 640px) {
  .notif-dropdown { position: fixed; top: 64px; right: 10px; left: 10px; width: auto; }
}

/* ---------- Product detail page ---------- */
.pdp-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); margin-bottom: 18px; }
.pdp-breadcrumb a { color: var(--color-text-muted); }
.pdp-breadcrumb a:hover { color: var(--color-primary); }
.pdp-breadcrumb .current { color: var(--color-text); font-weight: 600; }

.pdp-layout { display: grid; grid-template-columns: minmax(0,420px) 1fr; gap: 44px; align-items: start; }
.pdp-layout-no-image { grid-template-columns: minmax(0,640px); }
.pdp-image-frame {
  aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0); padding: 0;
}
.pdp-image-frame img { width: 100%; height: 100%; object-fit: cover; }

.pdp-sku { text-transform: uppercase; letter-spacing: .05em; font-size: 12px; font-weight: 600; color: var(--color-text-faint); margin: 0 0 6px; }
.pdp-title { margin: 0 0 10px; font-size: 26px; }
.pdp-summary { margin: 0 0 18px; line-height: 1.6; }
#pdp_description_toggle { margin-bottom: 18px; }
.pdp-details-image { width: 100%; max-width: 280px; margin: 0 0 14px; padding: 0; }
.pdp-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; }
.pdp-price-row .price { font-size: 32px; font-weight: 800; letter-spacing: -.01em; }
.pdp-price-row .mrp { font-size: 16px; }
.pdp-tax-note { margin: 0 0 22px; font-size: 12.5px; }

.pdp-variants-label { font-weight: 600; font-size: 13px; color: var(--color-text-muted); margin: 0 0 16px; }

.pdp-variant-item {
  border: 1px solid var(--color-border); border-radius: 10px; padding: 14px; margin-bottom: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pdp-variant-item:last-of-type { margin-bottom: 0; }
.pdp-variant-item.disabled { opacity: .55; }
.pdp-variant-item.selected { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }

.pdp-variant-item-top { display: flex; align-items: flex-start; gap: 10px; }
.pdp-variant-item-thumb {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--color-border); background: var(--color-bg);
}
.pdp-variant-item-title { flex: 1; min-width: 0; }
.pdp-variant-item-title strong { display: block; font-size: 14px; color: var(--color-text); }
.pdp-variant-oos-badge { flex-shrink: 0; }

.pdp-variant-details-toggle {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; padding: 0;
  border: none; background: none; color: var(--color-primary); font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.pdp-variant-details-toggle .chevron { transition: transform .15s ease; }
.pdp-variant-details-toggle.open .chevron { transform: rotate(180deg); }
.pdp-variant-details-panel { margin: 4px 0 0; font-size: 11.5px; color: var(--color-text-muted); }

.pdp-variant-stats { display: flex; gap: 8px; margin-top: 10px; }
.pdp-variant-stat { flex: 1; display: flex; flex-direction: column; }
.pdp-variant-stat.align-end { align-items: flex-end; }
.pdp-variant-stat .label { font-size: 10.5px; color: var(--color-text-muted); font-weight: 600; }
.pdp-variant-stat .value { font-size: 13px; font-weight: 700; color: var(--color-text); }
.pdp-variant-stat .value.strike { color: var(--color-text-faint); text-decoration: line-through; font-weight: 400; }

.pdp-variant-stepper { display: flex; align-items: stretch; margin-top: 10px; }
.pdp-variant-stepper-btn {
  width: 42px; flex-shrink: 0; border: none; background: var(--color-primary-light);
  color: var(--color-primary); font-size: 18px; font-weight: 700; cursor: pointer;
}
.pdp-variant-stepper-btn:first-child { border-radius: 6px 0 0 6px; }
.pdp-variant-stepper-btn:last-child { border-radius: 0 6px 6px 0; }
.pdp-variant-stepper-btn:disabled { opacity: .5; cursor: not-allowed; }
.pdp-variant-stepper .variant-qty {
  flex: 1; text-align: center; border: none; border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border); background: var(--color-primary-light);
  font-weight: 700; font-size: 14.5px; padding: 0;
}
.pdp-variant-stepper .variant-qty::-webkit-inner-spin-button,
.pdp-variant-stepper .variant-qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.pdp-sticky-summary {
  position: sticky; bottom: 16px; z-index: 20; margin-top: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-radius: 12px; background: var(--color-primary);
  box-shadow: 0 8px 24px rgba(37,99,235,.35);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.pdp-sticky-summary.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pdp-sticky-summary-info { color: #fff; font-size: 13.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pdp-sticky-summary-info strong { font-size: 15px; }
.pdp-sticky-summary-total { font-weight: 800; font-size: 16px; }
.pdp-sticky-summary .btn {
  flex-shrink: 0; background: #fff; color: var(--color-primary); border-color: #fff;
}
.pdp-sticky-summary .btn:hover { background: #f1f5f9; }

.pdp-buybox { max-width: 400px; padding: 22px; }
.pdp-buybox.pdp-variant-card { max-width: none; }
.pdp-stock-note {
  display: flex; align-items: center; gap: 6px; margin: 0 0 14px;
  color: var(--color-success); font-size: 13px; font-weight: 600;
}
.pdp-buybox-row { display: flex; align-items: end; gap: 12px; }
.pdp-qty-field { max-width: 100px; margin-bottom: 0; flex-shrink: 0; }
.pdp-buybox-row .btn-block { flex: 1; }
.pdp-trust-row {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--color-border);
}
.pdp-trust-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  font-size: 11px; color: var(--color-text-muted); font-weight: 600; flex: 1;
}
.pdp-trust-item .icon { color: var(--color-primary); }

.pdp-details-section { margin-top: 48px; }
.pdp-details-section h2 { margin: 0; }
.pdp-specs { width: 100%; margin-top: 18px; border-collapse: collapse; }
.pdp-specs th, .pdp-specs td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 13.5px; }
.pdp-specs th { width: 160px; color: var(--color-text-muted); font-weight: 600; }
.pdp-specs tr:last-child th, .pdp-specs tr:last-child td { border-bottom: none; }

@media (max-width: 780px) {
  .pdp-layout { grid-template-columns: 1fr; gap: 20px; }
  .pdp-buybox { max-width: none; }
}