/* ─────────────────────────────────────────────────────────────────────────
   shop-cc-chrome.css — Phase 1
   Bring shop.html chrome (body palette, topbar, gate, hero) to parity with
   admin-dashboard.html (Command Center). Loaded AFTER the inline <style>
   block in shop.html so these rules win without editing the inline block.

   Keeps original IDs/classes intact so existing JS (filters, cart, modals,
   member-auth gating) continues to work. Only the visual layer changes.

   Phase 2 (later): filter chips, cart drawer, checkout overlay, supply cards.
───────────────────────────────────────────────────────────────────────── */

/* ───── Body palette ─────
   Admin uses a warm-grey gradient with deep blue accent. Override the dark
   atmosphere backdrop for the body, but keep card pedestals dark behind vials. */
html, body {
  background: linear-gradient(180deg, #EDECEA 0%, #E5E4E2 48%, #DCDBD8 100%) !important;
  color: #1A1F2E;
  font-family: 'DM Sans', 'Outfit', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.shop-bg, .shop-bg::before, .shop-bg::after { display: none !important; }

/* Shared design tokens (mirrors admin-dashboard) */
:root {
  --shop-text:        #1A1F2E;
  --shop-text-dim:    rgba(26, 31, 46, 0.85);
  --shop-text-muted:  rgba(26, 31, 46, 0.62);
  --shop-blue:        #2A3FA8;
  --shop-blue-deep:   #1E2D7A;
  --shop-cyan:        #2EB6E0;
  --shop-surface:     #FAF9F7;
  --shop-surface-2:   #F2F1EE;
  --shop-rule:        rgba(26, 31, 46, 0.10);
  --shop-rule-strong: rgba(26, 31, 46, 0.18);
  --shop-grad-brand:  linear-gradient(180deg, #2A3FA8 0%, #2EB6E0 100%);
  --font-display: 'Marcellus', Georgia, serif;
  --font-ui:      'DM Sans', 'Outfit', system-ui, sans-serif;
  --font-eyebrow: 'Barlow Condensed', 'DM Sans', system-ui, sans-serif;
}

/* ───── Topbar ─────
   Mirrors admin's minimal topbar — translucent panel with quick-rail buttons. */
.shop-topbar {
  position: sticky !important;
  top: 0;
  background: linear-gradient(180deg, rgba(250,249,247,0.92) 0%, rgba(242,241,238,0.78) 100%) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--shop-rule);
  padding: 10px 22px !important;
  box-shadow: 0 6px 24px rgba(26, 31, 46, 0.04);
  /* With menu button removed, push action buttons to the right */
  justify-content: flex-end !important;
}
.shop-topbar .menu-btn {
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--shop-rule);
  border-radius: 10px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.shop-topbar .menu-btn:hover {
  border-color: rgba(42, 63, 168, 0.45);
  background: rgba(255,255,255,1);
}
.shop-topbar .menu-btn svg path {
  stroke: var(--shop-blue) !important;
}

/* Topbar right buttons — admin-style chip buttons.
   IMPORTANT: do not set display here; the original shop CSS uses
   .shop-logged-in-only { display:none } and only un-hides those buttons
   when body.shop-member is added. Style appearance only. */
.shop-topbar .topbar-right { gap: 10px; }
.shop-topbar .btn-login,
.shop-topbar .shop-dash-btn {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 0 16px !important;
  height: 36px !important;
  align-items: center;
  border-radius: 10px !important;
  transition: all .2s !important;
  cursor: pointer;
}
.shop-topbar .btn-login {
  color: var(--shop-blue) !important;
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(42, 63, 168, 0.32) !important;
}
.shop-topbar .btn-login:hover {
  background: var(--shop-blue) !important;
  color: #fff !important;
  border-color: var(--shop-blue) !important;
}
.shop-topbar .shop-dash-btn {
  color: #fff !important;
  background: var(--shop-blue) !important;
  border: 1px solid var(--shop-blue) !important;
  box-shadow: 0 6px 18px rgba(42, 63, 168, 0.28);
}
.shop-topbar .shop-dash-btn:hover {
  background: var(--shop-blue-deep) !important;
  border-color: var(--shop-blue-deep) !important;
  box-shadow: 0 8px 22px rgba(42, 63, 168, 0.4);
}
/* Re-assert visibility rules so our styling doesn't break the auth toggling.
   Use the original 'block-level' display by default; only the topbar action
   buttons need inline-flex for icon alignment. */
.shop-logged-in-only { display: none !important; }
body.shop-member .shop-logged-in-only { display: inline-block !important; }
body.shop-member .shop-topbar a.shop-logged-in-only,
body.shop-member .shop-topbar .shop-logged-in-only.shop-dash-btn,
body.shop-member .shop-topbar .shop-logged-in-only.btn-login {
  display: inline-flex !important;
}
/* Hero chips keep their natural inline behavior so spaces inside don't collapse */
body.shop-member .pg-hero-chip.shop-logged-in-only { display: inline-block !important; }
body.shop-member .shop-logged-out-only { display: none !important; }

/* Nav drawer (when menu opens) — light panel matching admin */
.nav-card {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(14px);
  border: 1px solid var(--shop-rule) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 36px rgba(26,31,46,0.18) !important;
  padding: 12px !important;
}
.nav-card a {
  color: var(--shop-text) !important;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  transition: background .2s, color .2s;
}
.nav-card a:hover {
  background: rgba(42, 63, 168, 0.08) !important;
  color: var(--shop-blue) !important;
}

/* ───── Members-only gate ─────
   Light card matching admin's gate aesthetic. */
.shop-gate {
  color: var(--shop-text) !important;
  max-width: 720px !important;
  margin: 80px auto !important;
  padding: 56px 40px !important;
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(14px);
  border: 1px solid var(--shop-rule) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(26,31,46,0.08) !important;
  position: relative;
  overflow: hidden;
}
.shop-gate::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--shop-grad-brand);
}
.shop-gate-eyebrow {
  font-family: var(--font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase;
  color: var(--shop-blue) !important;
  margin: 0 0 14px !important;
}
.shop-gate-title {
  font-family: var(--font-display) !important;
  color: var(--shop-text) !important;
  font-size: clamp(28px, 4.4vw, 42px) !important;
  line-height: 1.1 !important;
  margin: 0 0 20px !important;
  letter-spacing: -0.01em !important;
}
.shop-gate-rule {
  background: var(--shop-grad-brand) !important;
  width: 42px !important;
  height: 2px !important;
  margin: 0 auto 24px !important;
  border-radius: 2px;
}
.shop-gate-body {
  color: var(--shop-text-dim) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
.shop-gate-btn {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  border-radius: 12px !important;
  transition: all .2s !important;
}
.shop-gate-btn--primary {
  color: #fff !important;
  background: var(--shop-blue) !important;
  border-color: var(--shop-blue) !important;
  box-shadow: 0 8px 22px rgba(42, 63, 168, 0.3);
}
.shop-gate-btn--primary:hover {
  background: var(--shop-blue-deep) !important;
  border-color: var(--shop-blue-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(42, 63, 168, 0.42);
}
.shop-gate-btn--ghost {
  color: var(--shop-text-dim) !important;
  background: transparent !important;
  border-color: var(--shop-rule-strong) !important;
}
.shop-gate-btn--ghost:hover {
  color: var(--shop-blue) !important;
  border-color: var(--shop-blue) !important;
  background: rgba(42, 63, 168, 0.06) !important;
}
.shop-gate-foot {
  color: var(--shop-text-muted) !important;
  font-family: var(--font-eyebrow) !important;
  letter-spacing: 0.32em !important;
}

/* ───── Hero (the catalog banner) ─────
   Mirrors admin's cc-hero overview section: light backdrop, banner image fades
   behind the text on the right, big Marcellus title, blue accent highlight. */
.pg-hero {
  position: relative;
  margin: 22px auto 8px !important;
  max-width: 1240px;
  min-height: clamp(190px, 24vw, 280px) !important;
  height: auto !important;
  padding: 22px 0 26px !important;
  border-radius: 18px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--shop-rule);
  background: linear-gradient(180deg, #FAF9F7 0%, #F2F1EE 100%);
  box-shadow: 0 14px 38px rgba(26, 31, 46, 0.08);
}
.pg-hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 3px;
  background: var(--shop-grad-brand);
  opacity: 0.95;
  border-radius: 2px 0 0 2px;
  z-index: 9;
  pointer-events: none;
}
/* Banner image holds the LEFT pane; warm-grey fade washes over the RIGHT
   so the title/eyebrow sit on a clean light surface */
.pg-hero .pg-hero-img,
.pg-hero .mbr-banner-asset {
  filter: saturate(0.62) brightness(1.04) contrast(0.92) !important;
  opacity: 0.78 !important;
  object-position: 28% 42% !important;
}
.pg-hero-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(237,236,234,0.06) 0%,
      rgba(237,236,234,0.06) 32%,
      rgba(237,236,234,0.55) 50%,
      rgba(237,236,234,0.88) 70%,
      rgba(237,236,234,0.96) 100%),
    linear-gradient(to bottom,
      rgba(237,236,234,0.10) 0%,
      rgba(237,236,234,0) 30%,
      rgba(237,236,234,0) 70%,
      rgba(237,236,234,0.20) 100%) !important;
}
.pg-hero-tint {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 50% 70% at 22% 42%,
    rgba(46, 182, 224, 0.10) 0%, transparent 60%) !important;
}

/* Hero CONTENT — right-aligned column with eyebrow, title, chips, note */
.pg-hero-content {
  position: relative !important;
  z-index: 8 !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  max-width: min(640px, 92vw) !important;
  width: min(640px, 92vw) !important;
  padding: 12px 24px 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 10px !important;
}
.pg-hero-eyebrow {
  font-family: var(--font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--shop-blue) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  white-space: nowrap !important;
}
.pg-hero-eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: linear-gradient(to left, rgba(42, 63, 168, 0.85), transparent);
}
.pg-hero-title {
  font-family: var(--font-display) !important;
  font-size: clamp(38px, 6.4vw, 64px) !important;
  font-weight: 400 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.01em !important;
  color: var(--shop-text) !important;
  text-align: right !important;
  margin: 0 !important;
  text-shadow: 0 2px 14px rgba(255,255,255,0.55);
}
/* The "Shop" word in <strong> gets the blue accent.
   Override the inline gradient text-fill that the original shop CSS applies. */
.pg-hero-title strong {
  color: var(--shop-blue) !important;
  font-weight: 400 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: var(--shop-blue) !important;
}

/* Chips inside hero (Compounds + supplies / Member pricing shown) */
.pg-hero-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}
.pg-hero-chip {
  font-family: var(--font-ui) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
  border-radius: 100px !important;
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(42, 63, 168, 0.25) !important;
  color: var(--shop-text-dim) !important;
}
.pg-hero-chip strong {
  color: var(--shop-blue) !important;
  font-weight: 700 !important;
}

/* Hero note (small explanatory text) */
.pg-hero-note {
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.55 !important;
  color: var(--shop-text-dim) !important;
  text-align: right !important;
  margin: 4px 0 0 !important;
  max-width: 100% !important;
}
.pg-hero-note strong {
  color: var(--shop-blue) !important;
  font-weight: 600 !important;
}
.pg-hero-note a {
  color: var(--shop-blue) !important;
  text-decoration: underline;
  text-decoration-color: rgba(42, 63, 168, 0.35);
  text-underline-offset: 2px;
  font-weight: 600;
}
.pg-hero-note a:hover {
  text-decoration-color: var(--shop-blue);
}

.pg-hero-bottom-line {
  position: absolute;
  left: 22px; right: 22px; bottom: 12px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(42, 63, 168, 0.32) 30%,
    rgba(46, 182, 224, 0.36) 70%,
    transparent 100%);
  z-index: 8;
}

/* Mobile — center the hero content and let the banner fade fully */
@media (max-width: 720px) {
  .pg-hero {
    margin: 14px 12px 6px !important;
    min-height: clamp(180px, 38vw, 240px) !important;
    padding: 18px 0 22px !important;
  }
  .pg-hero-overlay {
    background:
      linear-gradient(to bottom,
        rgba(237,236,234,0.10) 0%,
        rgba(237,236,234,0.30) 35%,
        rgba(237,236,234,0.85) 75%,
        rgba(237,236,234,0.96) 100%) !important;
  }
  .pg-hero-content {
    max-width: 92% !important;
    width: 92% !important;
    margin: 0 auto !important;
    align-items: center !important;
    padding: 16px !important;
  }
  .pg-hero-eyebrow,
  .pg-hero-title,
  .pg-hero-note { text-align: center !important; }
  .pg-hero-eyebrow { justify-content: center !important; }
  .pg-hero-chips { justify-content: center !important; }
}

/* ───── Loading state ───── */
.shop-loading {
  color: var(--shop-text-muted) !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-align: center;
  padding: 60px 20px !important;
}

/* ───── Admin compound card — vial fit fixes ─────
   Admin compound cards are styled compact (82px media area), which crops the
   auto-vial. When the media has the auto-vial, give it the same generous
   pedestal that member cards use so the entire vial (cap → cake) is visible.
   Also hide the now-redundant "Control center / Supply control — click" hint
   strip at the bottom of admin cards. */
.catalog-card--admin-compound .catalog-card-media.has-cc-vial,
.catalog-card--admin-supply .catalog-card-media.has-cc-vial {
  height: 170px !important;
  min-height: 170px !important;
  padding: 8px 10px 4px !important;
}
.catalog-card--admin-compound .catalog-card-admin-hint,
.catalog-card--admin-supply .catalog-card-admin-hint {
  display: none !important;
}

/* ───── Toolbar + filter chips (light theme) ─────
   Repaint the "Filter by category" zone to match the Command Center chrome:
   white card surface, Barlow Condensed eyebrow, blue active pill, ghost rest. */
.shop-toolbar {
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid var(--shop-rule) !important;
  border-radius: 16px !important;
  padding: 18px 22px !important;
  margin: 8px auto 22px !important;
  max-width: 1240px;
  box-shadow: 0 8px 26px rgba(26,31,46,0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.shop-toolbar-intro {
  color: var(--shop-text-dim) !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin: 0 0 14px !important;
}
.shop-toolbar-intro strong {
  color: var(--shop-blue) !important;
  font-weight: 700;
}
.shop-toolbar-intro a {
  color: var(--shop-blue) !important;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(42, 63, 168, 0.35);
  text-underline-offset: 2px;
}
.shop-filter-label {
  font-family: var(--font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--shop-blue) !important;
  margin: 0 0 10px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.shop-filter-label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(to right, var(--shop-blue) 0%, transparent 100%);
  flex-shrink: 0;
}
.filter-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center;
}
.filter-pill {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  padding: 8px 14px !important;
  height: auto !important;
  border-radius: 100px !important;
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid var(--shop-rule-strong) !important;
  color: var(--shop-text-dim) !important;
  cursor: pointer;
  transition: all .2s !important;
  box-shadow: 0 2px 6px rgba(26,31,46,0.04);
}
.filter-pill:hover {
  background: rgba(42, 63, 168, 0.06) !important;
  border-color: rgba(42, 63, 168, 0.45) !important;
  color: var(--shop-blue) !important;
  box-shadow: 0 4px 12px rgba(42, 63, 168, 0.08) !important;
}
.filter-pill.active {
  background: var(--shop-blue) !important;
  border-color: var(--shop-blue) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(42, 63, 168, 0.32) !important;
}
.filter-pill.active:hover {
  background: var(--shop-blue-deep) !important;
  border-color: var(--shop-blue-deep) !important;
  color: #fff !important;
}

/* ───── Catalog section headers (Compounds / Supplies titles) ───── */
.shop-catalog-section { scroll-margin-top: 108px; }
.shop-catalog-section-head {
  border-bottom: 1px solid var(--shop-rule) !important;
  padding-bottom: 16px !important;
  margin-bottom: 22px !important;
}
.shop-catalog-section-kicker {
  font-family: var(--font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--shop-blue) !important;
  margin: 0 0 8px !important;
}
.shop-catalog-section-title {
  font-family: var(--font-display) !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  font-weight: 400 !important;
  color: var(--shop-text) !important;
  letter-spacing: -0.005em !important;
  margin: 0 0 8px !important;
}
.shop-catalog-section-desc {
  font-family: var(--font-ui) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: var(--shop-text-dim) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.shop-admin-catalog-btn {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 0 16px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: var(--shop-blue) !important;
  border: 1px solid var(--shop-blue) !important;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all .2s !important;
  box-shadow: 0 6px 18px rgba(42, 63, 168, 0.28);
}
.shop-admin-catalog-btn:hover {
  background: var(--shop-blue-deep) !important;
  border-color: var(--shop-blue-deep) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(42, 63, 168, 0.4);
}
.shop-admin-catalog-btn svg {
  stroke: currentColor !important;
  fill: none;
  stroke-width: 2.2;
}

/* ───── Empty state ad hoc styling ───── */
.shop-empty {
  font-family: var(--font-ui) !important;
  color: var(--shop-text-muted) !important;
  font-size: 13px !important;
  text-align: center;
  padding: 28px 12px;
}

/* ───── Phase 3 placeholder ─────
   Cart drawer, checkout overlay, admin compound/supply edit modals
   still use the original dark-theme styles. We'll repaint those next. */