/* ============================================================
   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, .trust-bar, footer { position: relative; z-index: 1; }
/* .header intentionally excluded: it must keep global.css sticky z-index:1000 so the
   "Verified On" nav-dropdown escapes ABOVE the hero (which sits in #main-content at z-index:1).
   Lumping .header in at z-index:1 traps the dropdown behind the hero. */
::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;
}

/* ---- skip link (keyboard accessibility) ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--primary); color: var(--paper);
  padding: 10px 18px; border-radius: 0 0 var(--radius-md) 0;
  font-family: var(--font-family); font-size: .85rem; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* keep search focus ring on-brand (base css uses the old blue) */
.search-input:focus { border-color: var(--amber-deep); box-shadow: 0 0 0 3px rgba(171,138,69,.15); }

/* ---- 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; } }

/* ============================================================
   ===== Mobile Optimisation (Jul 2026) =====
   Additive, mobile-only refinements. Every rule below is scoped
   inside a media query so desktop rendering is unchanged.
   jeep.css loads LAST, so these win the cascade cleanly.
   ============================================================ */

/* ---- touch devices: kill sticky-hover lift transforms (jank on tap) ---- */
@media (hover: none) {
  .product-card:hover,
  .cart-btn:hover,
  .btn-primary:hover,
  .checkout-btn:hover,
  .btn-place-order:hover {
    transform: none;
  }
}

@media (max-width: 767px) {

  /* ---- performance: drop the fixed grain overlay on phones.
     A full-viewport fixed layer with mix-blend-mode: multiply forces
     expensive compositing on every scroll frame on mobile GPUs. ---- */
  body::after { display: none; }

  /* ---- iOS auto-zoom guard: any input under 16px triggers zoom-on-focus.
     Covers the inline-styled email-capture / affiliate / promo / pay-lookup
     inputs and the 0.85rem pricelist search that base CSS misses.
     jeep.css already themes inputs with !important, so this is consistent. ---- */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* ---- horizontal overflow guards ---- */
  #main-content, .modal-body { min-width: 0; }
  .modal-body img { max-width: 100%; height: auto; }
  /* long unbroken strings: crypto addresses, order ids, emails, promo codes */
  .pay-crypto-addr,
  .email-capture-code-card span,
  #affiliateLink,
  .confirm-section #confirmShippingAddress,
  .pay-order-card {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* in-content tables (product details, about, reports) scroll instead of
     stretching the page — tables that already have wrappers are unaffected */
  .pd-details-card table,
  .modal-body table,
  .about-section table,
  .report-detail table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- scroll containment: stop background scroll-chaining when a
     modal, the cart drawer or the mobile menu is open ---- */
  .modal,
  .modal-content,
  .mobile-menu {
    overscroll-behavior: contain;
  }

  /* ---- touch targets ---- */
  a.trust-bar-item { padding: 6px 2px; margin: -6px -2px; } /* 44px effective hit area, no layout shift */
  .warehouse-btn { min-height: 44px; min-width: 44px; }
  .toast-close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .email-capture-copy-btn { min-height: 44px; }
  .nav-dropdown-menu a { min-height: 44px; display: flex; align-items: center; }
  .mobile-nav-link { min-height: 44px; }

  /* ---- checkout: comfortable action buttons + safe-area breathing room
     inside the full-height (100dvh) checkout modal ---- */
  .checkout-actions { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .checkout-actions .btn { min-height: 48px; flex: 1; }
  .promo-code-row button { min-height: 48px; }
  .shipping-option { min-width: 0; }

  /* ---- pay page: full-width, thumb-sized payment buttons ---- */
  .pay-btn { min-height: 48px; width: 100%; justify-content: center; }
  .pay-btn-wrap { width: 100%; }

  /* ---- toast: never wider than the viewport ---- */
  .notification-toast { max-width: calc(100vw - 24px); }
}

@media (max-width: 479px) {
  /* pricelist filter pills: keep 44px touch height even when the base
     stylesheet compresses them to 36px/32px on small screens */
  .pl-filter-btn { min-height: 44px; }
  .pl-add-btn { min-height: 44px; }

  /* email-capture modal: input + button row stacks so neither overflows */
  #emailCaptureForm > div { flex-direction: column; }
  #emailCaptureForm .btn { width: 100%; }
}

@media (max-width: 419px) {
  /* Standard vs Express cards get too cramped side-by-side on narrow
     phones — stack them (parent tagged .shipping-options-row in header.ejs) */
  .shipping-options-row { flex-direction: column; }
}