/* ============================================================
   JEEP PEPTIDES — "Grand Cru Pharma" skin
   Loaded LAST. Re-skins the shared commerce engine by overriding
   QSC design tokens, then refines key components. JS hooks &
   class names are untouched — only appearance changes.
   ============================================================ */

:root {
  /* ---- palette: porcelain · bordeaux · champagne-brass · ink ---- */
  --paper: #f7f4ee;
  --porcelain: #fffdf9;
  --ink: #1b1612;

  /* surfaces (legacy "ink-*" names) */
  --ink-deep: #efeadf;     /* sunken (inputs, table heads) */
  --ink-base: #f7f4ee;     /* page background */
  --ink-panel: #fffdf9;    /* raised card */
  --ink-panel-2: #f1ece1;  /* hover / sunken-on-card */
  --ink-line: #e2dac9;

  /* primary = bordeaux */
  --primary: #5e1220;
  --primary-dark: #4a0d18;
  --primary-darker: #3a0a13;
  --primary-light: #7c1c2e;
  --primary-lighter: #a8505e;
  --primary-50: #f6ecee;
  --primary-100: #ecd6da;

  /* "amber" tokens = champagne brass (prices, accents) */
  --amber: #8a6d32;
  --amber-bright: #6f561f;
  --amber-deep: #ab8a45;
  --secondary-green: #5e1220;
  --success-green: #1e7a55;   /* verified / COA / in-stock */
  --warning-yellow: #9a6a16;
  --error-red: #b3261e;
  --accent-navy: #2a1d14;

  /* neutral scale — warm, light theme (900 = darkest ink) */
  --white: #fffdf9;
  --gray-50:  #f4efe6;
  --gray-100: #ece5d8;
  --gray-200: #e2dac9;
  --gray-300: #cdc2ac;
  --gray-400: #8d8174;
  --gray-500: #6c6155;
  --gray-600: #564c42;
  --gray-700: #3f372e;
  --gray-800: #2a241d;
  --gray-900: #1b1612;

  --border-subtle: rgba(27,22,18,.08);
  --border-default: rgba(27,22,18,.14);
  --surface-elevated: #fffdf9;
  --surface-sunken: #f1ece1;

  /* type */
  --font-display: 'Prata', Georgia, 'Times New Roman', serif;
  --font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Chivo Mono', ui-monospace, monospace;

  /* depth: warm umber shadows */
  --shadow-sm: 0 1px 2px rgba(27,22,18,.05);
  --shadow-md: 0 4px 16px -6px rgba(27,22,18,.12), 0 1px 2px rgba(27,22,18,.05);
  --shadow-lg: 0 18px 44px -18px rgba(27,22,18,.20);
  --shadow-xl: 0 36px 84px -30px rgba(58,10,19,.30);
  --glow-cyan: 0 0 0 1px rgba(171,138,69,.30), 0 12px 30px -12px rgba(171,138,69,.28);
  --glow-cyan-soft: 0 1px 2px rgba(27,22,18,.05), 0 12px 30px -14px rgba(171,138,69,.22);
  --glow-amber: 0 0 0 1px rgba(138,109,50,.24), 0 12px 28px -12px rgba(138,109,50,.26);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
}

/* ---- global atmosphere ---- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-family);
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 580px at 72% -8%, rgba(171,138,69,.06), transparent 60%),
    radial-gradient(820px 460px at -5% 108%, rgba(94,18,32,.05), transparent 55%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('/images/grain.png'); background-size: 320px 320px;
  opacity: .5; mix-blend-mode: multiply;
}
#main-content, .header, .trust-bar, footer { position: relative; z-index: 1; }
::selection { background: var(--primary); color: var(--paper); }
h1, h2, h3, .modal-title, .section-title, .hero-title { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--amber-deep); outline-offset: 2px;
}

/* ---- trust bar ---- */
.trust-bar { background: #2a1d14; border-bottom: 1px solid rgba(171,138,69,.3); }
.trust-bar, .trust-bar a, .trust-bar-item { color: #e9ddc0 !important; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; }
.trust-bar i { color: var(--amber-deep); }

/* ---- header / nav ---- */
.header {
  background: rgba(247,244,238,.9) !important;
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--ink-line);
}
.logo-text { font-family: var(--font-display); letter-spacing: .02em; color: var(--ink); }
.logo-text small { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: var(--amber-bright); }
.cn-seal { color: var(--primary); }
.nav-link {
  font-size: .82rem; font-weight: 500; letter-spacing: .03em; color: var(--gray-600);
  text-transform: none;
}
.nav-link:hover, .nav-link.active { color: var(--primary); }
.nav-link.active::after, .nav-link:hover::after { background: var(--primary) !important; }
.nav-dropdown-menu { background: var(--porcelain); border: 1px solid var(--ink-line); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); }

/* warehouse + cart buttons */
.warehouse-btn { border: 1px solid var(--ink-line); border-radius: 999px; background: var(--porcelain); color: var(--gray-700); }
.warehouse-btn:hover { border-color: var(--amber-deep); }
.cart-btn {
  background: var(--primary); color: var(--paper);
  border-radius: 999px; box-shadow: 0 1px 2px rgba(58,10,19,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
.cart-btn:hover { background: var(--primary-light); transform: translateY(-1px); }
.cart-count { background: var(--amber-deep); color: #fff; }

/* ---- buttons ---- */
.btn, .btn-primary, .checkout-btn, .btn-place-order, .add-to-cart-btn {
  font-family: var(--font-family); letter-spacing: .01em; border-radius: 999px;
}
.btn-primary, .checkout-btn, .btn-place-order {
  background: var(--primary) !important; color: var(--paper) !important; border: 1px solid var(--primary) !important;
  box-shadow: 0 1px 2px rgba(58,10,19,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:hover, .checkout-btn:hover, .btn-place-order:hover {
  background: var(--primary-light) !important; border-color: var(--primary-light) !important; transform: translateY(-1px);
  box-shadow: 0 12px 26px -12px rgba(58,10,19,.6);
}
.btn-secondary {
  background: transparent !important; color: var(--ink) !important; border: 1px solid var(--ink-line) !important; border-radius: 999px;
}
.btn-secondary:hover { border-color: var(--ink) !important; }
.add-to-cart-btn, .pl-add-btn, .product-add-btn {
  background: var(--primary) !important; color: var(--paper) !important; border-radius: 999px !important;
}
.add-to-cart-btn:hover { background: var(--primary-light) !important; }

/* ---- cards / panels / modals ---- */
.modal-content { background: var(--porcelain); border: 1px solid var(--ink-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }
.modal-header { border-bottom: 1px solid var(--ink-line); }
.modal-title { color: var(--ink); }
.card, .product-card, .info-card, .panel, .review-card {
  background: var(--porcelain); border: 1px solid var(--ink-line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.product-card:hover { box-shadow: var(--shadow-lg); border-color: var(--amber-deep); transform: translateY(-3px); }

/* prices in brass-ink serif */
.product-price, .price, .pl-price, .cart-item-price, .total-row span:last-child, .final-total span:last-child {
  font-family: var(--font-mono); color: var(--primary);
}

/* badges */
.badge, .product-badge, .tag { border-radius: 999px; font-family: var(--font-mono); letter-spacing: .04em; }
.badge-popular, .badge-new { background: var(--amber-deep); color: #fff; }

/* ---- forms ---- */
input, select, textarea {
  background: var(--porcelain) !important; border: 1px solid var(--ink-line) !important;
  border-radius: var(--radius-md) !important; color: var(--ink) !important; font-family: var(--font-family);
}
input:focus, select:focus, textarea:focus { border-color: var(--amber-deep) !important; box-shadow: 0 0 0 3px rgba(171,138,69,.15) !important; }

/* ---- tables (pricelist) ---- */
table thead th, .pl-table thead th, .price-table thead th {
  background: #2a1d14 !important; color: #e9ddc0 !important;
  font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 2px solid var(--amber-deep) !important;
}
table tbody tr:nth-child(even) { background: rgba(241,236,225,.5); }
table tbody tr:hover { background: rgba(171,138,69,.08); }

/* ---- footer ---- */
footer, .footer { background: var(--ink) !important; color: rgba(247,244,238,.7) !important; }
.footer a, footer a { color: rgba(247,244,238,.72) !important; }
.footer a:hover, footer a:hover { color: #fff !important; }
.footer h3, .footer h4, footer h3, footer h4 { color: var(--amber-deep) !important; font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; font-size: .7rem !important; }

/* ---- trust / section labels in mono ---- */
.section-eyebrow, .eyebrow, .overline { font-family: var(--font-mono) !important; letter-spacing: .2em !important; text-transform: uppercase; color: var(--amber-bright) !important; }

/* ---- toast ---- */
.notification-toast .toast-content { border-radius: var(--radius-md); border: 1px solid var(--ink-line); background: var(--porcelain); }

/* ---- mobile bottom nav, if present ---- */
.bottom-nav { background: rgba(247,244,238,.95) !important; border-top: 1px solid var(--ink-line) !important; }
.bottom-nav .active { color: var(--primary) !important; }

/* ---- reduced motion already handled by base; keep brass shimmer calm ---- */
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }