/* ============================================================
   AfricaMart — Design Tokens & Global Styles
   Brand: Deep navy #0D1B2A + Gold #E8B84B + White
   Type:  DM Sans
   ============================================================ */

:root {
  /* Brand */
  --navy-900: #0A1620;
  --navy-800: #0D1B2A;   /* primary */
  --navy-700: #122638;
  --navy-600: #1B3349;
  --navy-500: #294a64;
  --navy-400: #46688a;
  --navy-300: #7d97b3;
  --navy-200: #b9c8d8;
  --navy-100: #dde6ef;
  --navy-50:  #f1f5f9;

  --gold-700: #b8901f;
  --gold-600: #d2a534;
  --gold-500: #E8B84B;   /* accent */
  --gold-400: #efc869;
  --gold-300: #f4d893;
  --gold-200: #f9e8c0;
  --gold-100: #fcf4dd;
  --gold-50:  #fefaf0;

  /* Neutrals (warm-cool balanced) */
  --white: #ffffff;
  --paper: #f7f9fb;     /* page bg */
  --paper-2: #eef2f6;
  --ink-900: #0D1B2A;
  --ink-700: #2c3a47;
  --ink-600: #44535f;
  --ink-500: #5a6b7a;
  --ink-400: #8595a3;
  --ink-300: #aab6c1;
  --border: #e3e9ef;
  --border-strong: #cdd6df;

  /* Semantic */
  --green-600: #14855a;
  --green-50:  #e9f7f0;
  --amber-600: #b97d09;
  --amber-50:  #fdf4e3;
  --red-600:   #c2362f;
  --red-50:    #fcefee;
  --blue-600:  #1f63c4;
  --blue-50:   #eef4fd;

  /* Type */
  --font: "DM Sans", system-ui, -apple-system, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 46px;
  --fs-5xl: 60px;

  /* Spacing */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(13,27,42,.06), 0 1px 3px rgba(13,27,42,.04);
  --sh-md: 0 4px 16px rgba(13,27,42,.08);
  --sh-lg: 0 12px 40px rgba(13,27,42,.14);
  --sh-gold: 0 6px 22px rgba(232,184,75,.30);

  --maxw: 1240px;
  --nav-h: 68px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* utility text */
.eyebrow {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-700);
}
.muted { color: var(--ink-500); }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: var(--fs-md); border-radius: var(--r-sm);
  padding: 11px 18px; transition: all .16s ease; white-space: nowrap;
  line-height: 1;
}
.btn:active { transform: scale(.98); }
.btn-gold { background: var(--gold-500); color: var(--navy-900); box-shadow: var(--sh-sm); }
.btn-gold:hover { background: var(--gold-400); box-shadow: var(--sh-gold); }
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { background: var(--navy-700); }
.btn-ghost { background: transparent; color: var(--navy-800); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--navy-50); border-color: var(--navy-300); }
.btn-ghost-light { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.btn-ghost-light:hover { background: rgba(255,255,255,.16); }
.btn-lg { padding: 15px 26px; font-size: var(--fs-lg); }
.btn-sm { padding: 8px 14px; font-size: var(--fs-sm); }
.btn-block { width: 100%; }

/* ---------- Cards ---------- */
.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: 600; padding: 4px 10px;
  border-radius: var(--r-pill); line-height: 1;
}
.badge-verified { background: var(--gold-100); color: var(--gold-700); border: 1px solid var(--gold-300); }
.badge-premium { background: var(--navy-800); color: var(--gold-400); }
.badge-green { background: var(--green-50); color: var(--green-600); }
.badge-amber { background: var(--amber-50); color: var(--amber-600); }
.badge-blue  { background: var(--blue-50); color: var(--blue-600); }
.badge-gray  { background: var(--paper-2); color: var(--ink-500); }

/* ---------- Inputs ---------- */
.input, .select, .textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); background: #fff; color: var(--ink-900);
  font-size: var(--fs-md); transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(232,184,75,.20);
}
.field-label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 6px; color: var(--ink-700); }

/* ---------- Section ---------- */
.section { padding: 72px 0; }
.section-sm { padding: 48px 0; }

/* ---------- Tile / product placeholder imagery ---------- */
.ph {
  position: relative; overflow: hidden; background: var(--navy-50);
  display: flex; align-items: center; justify-content: center;
}
.ph::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(13,27,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,27,42,.04) 1px, transparent 1px);
  background-size: 22px 22px;
}
.ph-icon { position: relative; z-index: 1; color: var(--navy-300); }

/* AI shimmer */
.ai-chip {
  display:inline-flex; align-items:center; gap:6px;
  background: linear-gradient(95deg, var(--navy-800), var(--navy-600));
  color: var(--gold-400); font-size: var(--fs-xs); font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-pill); letter-spacing:.02em;
}

/* fade-in for route changes — transform only, so content is NEVER invisible
   even if the browser throttles/pauses the animation while backgrounded */
@keyframes fadeUp { from { transform: translateY(10px); } to { transform: none; } }
.route-anim { animation: fadeUp .35s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .route-anim { animation: none; } }

/* star rating */
.stars { display: inline-flex; gap: 1px; color: var(--gold-500); }

/* scrollbar for filter rails etc */
.thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }

/* Lucide default sizing */
[data-lucide] { width: 20px; height: 20px; stroke-width: 1.6; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

/* default desktop visibility */
.mobile-toggle, .mobile-menu { display: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .card-grid-4, .results-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 920px) {
  .nav-links { display: none !important; }
  .mobile-toggle { display: inline-flex !important; }
  .nav-login { display: none !important; }
  .browse-layout { grid-template-columns: 1fr !important; }
  .filter-rail { position: static !important; }
  .product-layout, .desc-layout, .auth-layout, .dash-layout { grid-template-columns: 1fr !important; }
  .auth-aside { display: none !important; }
  .dash-side { display: none !important; }
  .store-header { flex-direction: column !important; }
  .store-cta { width: 100% !important; }
  .hero-search { flex-wrap: wrap; }
  .hero-search > div:first-child { flex-basis: 100% !important; }
  .hero-sel { flex: 1; }
  .product-layout > div:first-child, .product-layout [style*="sticky"] { position: static !important; }
  /* storefront */
  .store-ribbon { grid-template-columns: repeat(3, 1fr) !important; }
  .cap-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .about-grid, .reviews-grid, .contact-grid { grid-template-columns: 1fr !important; }
  .store-spotlight, .quickview { grid-template-columns: 1fr !important; }
  .hero-tags { display: none !important; }
}
@media (max-width: 720px) {
  .cat-grid, .card-grid-4, .card-grid-3, .results-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-bar { grid-template-columns: repeat(2, 1fr) !important; gap: 18px; }
  .store-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .trust-grid { grid-template-columns: 1fr !important; }
  .chat-grid { grid-template-columns: 1fr !important; }
  .dash-content { padding: 20px 16px 48px !important; }
  .section { padding: 48px 0; }
  .wrap { padding: 0 16px; }
  .store-ribbon { grid-template-columns: repeat(2, 1fr) !important; }
  .cap-grid { grid-template-columns: 1fr 1fr !important; }
  .stuck-rating { display: none !important; }
}
@media (max-width: 460px) {
  .cat-grid, .card-grid-4, .card-grid-3, .results-grid { grid-template-columns: 1fr !important; }
  .hero-sel { flex-basis: 100% !important; border-left: none !important; }
}

/* ============ PREMIUM white-label storefront responsive ============ */
@media (max-width: 960px) {
  .prem-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .prem-hero-art { display: none !important; }
  .prem-nav { display: none !important; }
  .prem-cap-grid { grid-template-columns: repeat(2, 1fr) !important; row-gap: 32px !important; }
  .prem-terms, .prem-proc, .prem-contact, .prem-about { grid-template-columns: 1fr !important; }
  .prem-prod-grid, .prem-svc-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .prem-cap-grid > div { border-left: none !important; padding-left: 0 !important; }
}
@media (max-width: 620px) {
  .prem-prod-grid, .prem-svc-grid, .prem-cap-grid { grid-template-columns: 1fr !important; }
  .prem-svc-grid { gap: 1px !important; }
}