/* ─────────────────────────────────────────────────────────────────────
   Shop — light overlay (warm-grey + brand-blue)
   The hero, gate landing, and filter pills are already on-brand.
   This overlay focuses on the catalog-card grid, section heads,
   product detail modal, toolbar, and admin/empty states.

   The catalog-card MEDIA area keeps its dark gradient because the
   cc-vial product images are designed for a dark backdrop. Everything
   below the media (body, dose, meta, stock, prices, CTAs) goes light.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --shl-bg-1: #EDECEA;
  --shl-bg-2: #E5E4E2;
  --shl-bg-3: #DCDBD8;
  --shl-card: #FFFFFF;
  --shl-rule: rgba(26,31,46,0.10);
  --shl-text: #1A1F2E;
  --shl-dim: rgba(26,31,46,0.78);
  --shl-mut: rgba(26,31,46,0.62);
  --shl-blue: #2A3FA8;
  --shl-blue-deep: #1E2D7A;
  --shl-cyan: #2EB6E0;
  --shl-blue-tint: rgba(42,63,168,0.08);
  --shl-blue-rule: rgba(42,63,168,0.22);
  --shl-green: #2E9F7A;
  --shl-green-tint: rgba(46,159,122,0.10);
  --shl-amber: #C68A2D;
  --shl-amber-tint: rgba(198,138,45,0.12);
  --shl-red: #C2435C;
  --shl-red-tint: rgba(194,67,92,0.10);
  --shl-shadow-soft: 0 12px 32px rgba(26,31,46,0.08);
  --shl-shadow-lift: 0 18px 44px rgba(26,31,46,0.12);
  --shl-font-display: 'Marcellus', Georgia, serif;
  --shl-font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --shl-font-eyebrow: 'Barlow Condensed', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGE BG — strip the dark atmosphere wallpaper
   ═════════════════════════════════════════════════════════════════════ */

body .shop-bg {
  background: linear-gradient(180deg, var(--shl-bg-1) 0%, var(--shl-bg-2) 48%, var(--shl-bg-3) 100%) !important;
  background-image: linear-gradient(180deg, var(--shl-bg-1) 0%, var(--shl-bg-2) 48%, var(--shl-bg-3) 100%) !important;
}
body .shop-bg::before,
body .shop-bg::after {
  display: none !important;
  content: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION HEADS (Compounds / Supplies)
   ═════════════════════════════════════════════════════════════════════ */

body.shop-gated .shop-catalog-section,
body.shop-logged-in .shop-catalog-section {
  margin-bottom: 36px !important;
}
body .shop-catalog-section-kicker,
body .cat-header-title {
  font-family: var(--shl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--shl-blue) !important;
  -webkit-text-fill-color: var(--shl-blue) !important;
  background: none !important;
  background-image: none !important;
  text-shadow: none !important;
  margin: 0 !important;
}
body .shop-catalog-section-title {
  font-family: var(--shl-font-display) !important;
  font-size: clamp(28px, 4vw, 36px) !important;
  font-weight: 400 !important;
  color: var(--shl-text) !important;
  -webkit-text-fill-color: var(--shl-text) !important;
  background: none !important;
  background-image: none !important;
  letter-spacing: -0.005em !important;
  line-height: 1.15 !important;
  margin: 0 0 4px !important;
  text-shadow: none !important;
}
body .shop-catalog-section-desc {
  color: var(--shl-mut) !important;
  -webkit-text-fill-color: var(--shl-mut) !important;
  font-family: var(--shl-font-ui) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  text-shadow: none !important;
}

/* Cat-header divider lines + title (e.g. "WEIGHT LOSS") */
body .cat-header-line {
  background: linear-gradient(90deg, var(--shl-blue-rule), transparent) !important;
  height: 1px !important;
}
body .cat-header-line.r {
  background: linear-gradient(90deg, transparent, var(--shl-blue-rule)) !important;
}

/* Admin "+ Add" buttons in catalog */
body .shop-admin-catalog-btn {
  font-family: var(--shl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--shl-blue) !important;
  -webkit-text-fill-color: var(--shl-blue) !important;
  background: var(--shl-card) !important;
  background-image: none !important;
  border: 1px solid var(--shl-blue-rule) !important;
  border-radius: 100px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  text-shadow: none !important;
}
body .shop-admin-catalog-btn:hover {
  background: var(--shl-blue-tint) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CATALOG CARDS
   ═════════════════════════════════════════════════════════════════════ */

body .catalog-card {
  background: var(--shl-card) !important;
  background-image: none !important;
  border: 1px solid var(--shl-rule) !important;
  border-radius: 14px !important;
  box-shadow: var(--shl-shadow-soft) !important;
  overflow: hidden !important;
  transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s !important;
}
body .catalog-card::before {
  background: linear-gradient(90deg, transparent, var(--shl-cyan), var(--shl-blue), var(--shl-cyan), transparent) !important;
  opacity: 1 !important;
  height: 3px !important;
}
body .catalog-card:hover {
  border-color: var(--shl-blue) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shl-shadow-lift) !important;
}

/* Media area — keep dark backdrop for cc-vial product images */
body .catalog-card-media {
  border-bottom: 1px solid var(--shl-rule) !important;
  border-radius: 12px 12px 0 0 !important;
}

/* Card body */
body .catalog-card-body {
  background: var(--shl-card) !important;
  padding: 12px 14px 14px !important;
  color: var(--shl-text) !important;
}

/* Category pill (e.g. "WEIGHT LOSS") — readable dark blue on tinted blue chip */
body .catalog-card-cat,
body article.catalog-card .catalog-card-cat {
  font-family: var(--shl-font-eyebrow) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--shl-blue-deep) !important;
  -webkit-text-fill-color: var(--shl-blue-deep) !important;
  background: var(--shl-blue-tint) !important;
  background-image: none !important;
  border: 1px solid var(--shl-blue-rule) !important;
  border-radius: 100px !important;
  padding: 3px 10px !important;
  text-shadow: none !important;
}

/* Compound name (e.g. "5-Amino-1MQ") */
body .catalog-card-name {
  font-family: var(--shl-font-display) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--shl-text) !important;
  -webkit-text-fill-color: var(--shl-text) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  text-shadow: none !important;
}

/* Dose strength (e.g. "5mg") — was amber, now brand blue */
body .catalog-card-dose {
  font-family: var(--shl-font-ui) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: var(--shl-blue) !important;
  -webkit-text-fill-color: var(--shl-blue) !important;
  text-shadow: none !important;
  margin: 0 !important;
}
body .catalog-card-dose--blend {
  color: var(--shl-mut) !important;
  -webkit-text-fill-color: var(--shl-mut) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

/* Meta row */
body .catalog-card-meta {
  border-top: 1px solid var(--shl-rule) !important;
  padding-top: 8px !important;
  margin-top: 4px !important;
}
body .catalog-card-meta-item,
body article.catalog-card .catalog-card-meta-item,
body .catalog-card .catalog-card-body .catalog-card-meta-item {
  color: #1A1F2E !important;
  -webkit-text-fill-color: #1A1F2E !important;
  opacity: 1 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
body .catalog-card-meta-item strong,
body article.catalog-card .catalog-card-meta-item strong,
body .catalog-card .catalog-card-body .catalog-card-meta-item strong {
  color: #1E2D7A !important;
  -webkit-text-fill-color: #1E2D7A !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  font-family: var(--shl-font-eyebrow) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  margin-right: 2px !important;
  text-shadow: none !important;
}

/* Stock indicator pill */
body .catalog-card-stock {
  font-family: var(--shl-font-eyebrow) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-radius: 100px !important;
  padding: 3px 8px !important;
  background: var(--shl-green-tint) !important;
  color: var(--shl-green) !important;
  -webkit-text-fill-color: var(--shl-green) !important;
  border: 1px solid rgba(46,159,122,0.32) !important;
  text-shadow: none !important;
}
body .catalog-card-stock--low {
  background: var(--shl-red-tint) !important;
  color: var(--shl-red) !important;
  -webkit-text-fill-color: var(--shl-red) !important;
  border-color: rgba(194,67,92,0.32) !important;
}

/* Description */
/* Description — was rgba(232,240,239,0.48) (near-white 48%) inline,
   invisible on the new white card. Force a fully dark, readable color
   and bump size + weight so it reads cleanly on iPad. */
body .catalog-card-desc,
body article.catalog-card .catalog-card-desc,
body .catalog-card .catalog-card-body .catalog-card-desc {
  color: #1A1F2E !important;
  -webkit-text-fill-color: #1A1F2E !important;
  opacity: 0.92 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
}

/* Prices block */
body .catalog-card-prices {
  border-top: 1px solid var(--shl-blue-rule) !important;
  padding-top: 8px !important;
  margin-top: 8px !important;
}
body .catalog-card-price {
  color: var(--shl-blue) !important;
  -webkit-text-fill-color: var(--shl-blue) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-shadow: none !important;
}
body .catalog-card-price-sub,
body article.catalog-card .catalog-card-price-sub {
  font-family: var(--shl-font-eyebrow) !important;
  color: rgba(26,31,46,0.78) !important;
  -webkit-text-fill-color: rgba(26,31,46,0.78) !important;
  letter-spacing: 0.18em !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* Guest "PRICING SHOWN TO MEMBERS ONLY" note — was amber on dark */
body .catalog-card-note-guest {
  font-family: var(--shl-font-eyebrow) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--shl-blue) !important;
  -webkit-text-fill-color: var(--shl-blue) !important;
  background: var(--shl-blue-tint) !important;
  background-image: none !important;
  border-top: 0 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  margin-top: 8px !important;
  line-height: 1.4 !important;
  text-shadow: none !important;
}

/* CTA row at bottom (e.g. "INTAKE FORM →") */
/* Card CTA at the very base of every vial card. The user reported
   it was unreadable — root cause was font-size 9px with 0.20em
   tracking, which compounds to near-illegible even at full contrast.
   Bumped to 11px / 0.14em tracking, deepened the color, and added
   a chevron arrow color match so the row reads as a clear action. */
body .catalog-card-cta {
  font-family: var(--shl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--shl-blue-deep) !important;
  -webkit-text-fill-color: var(--shl-blue-deep) !important;
  border-top: 1px solid var(--shl-blue-rule) !important;
  padding-top: 10px !important;
  margin-top: 8px !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
body .catalog-card-cta svg {
  width: 14px !important;
  height: 14px !important;
  opacity: 1 !important;
  stroke: var(--shl-blue-deep) !important;
}
body .catalog-card:hover .catalog-card-cta {
  color: var(--shl-blue-deep) !important;
  -webkit-text-fill-color: var(--shl-blue-deep) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TOOLBAR (filter intro + filter label)
   ═════════════════════════════════════════════════════════════════════ */

body .shop-toolbar {
  background: var(--shl-card) !important;
  background-image: none !important;
  border: 1px solid var(--shl-rule) !important;
  border-left: 3px solid var(--shl-cyan) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin-bottom: 24px !important;
  box-shadow: var(--shl-shadow-soft) !important;
}
body .shop-toolbar-intro {
  color: var(--shl-dim) !important;
  -webkit-text-fill-color: var(--shl-dim) !important;
  font-family: var(--shl-font-ui) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  text-shadow: none !important;
}
body .shop-filter-label {
  font-family: var(--shl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--shl-blue) !important;
  -webkit-text-fill-color: var(--shl-blue) !important;
  background: none !important;
  text-shadow: none !important;
}

/* Filter pills (re-confirm to match brand) */
body .filter-wrap {
  background: var(--shl-card) !important;
  background-image: none !important;
  border: 1px solid var(--shl-rule) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  box-shadow: var(--shl-shadow-soft) !important;
  margin-bottom: 28px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT DETAIL MODAL
   ═════════════════════════════════════════════════════════════════════ */

body #shopDetailOverlay {
  background: rgba(26,31,46,0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
body #shopDetailOverlay .shop-detail-card,
body #shopDetailOverlay > div {
  background: var(--shl-card) !important;
  color: var(--shl-text) !important;
  border-radius: 16px !important;
  border: 1px solid var(--shl-rule) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35) !important;
}
body #shopDetailKicker {
  font-family: var(--shl-font-eyebrow) !important;
  color: var(--shl-blue) !important;
  -webkit-text-fill-color: var(--shl-blue) !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
body #shopDetailTitle {
  font-family: var(--shl-font-display) !important;
  color: var(--shl-text) !important;
  -webkit-text-fill-color: var(--shl-text) !important;
  background: none !important;
  background-image: none !important;
  text-shadow: none !important;
}
body #shopDetailDose {
  color: var(--shl-blue) !important;
  -webkit-text-fill-color: var(--shl-blue) !important;
  font-weight: 700 !important;
}
body #shopDetailDesc {
  color: var(--shl-dim) !important;
  -webkit-text-fill-color: var(--shl-dim) !important;
  text-shadow: none !important;
}
body #shopDetailStock {
  background: var(--shl-green-tint) !important;
  color: var(--shl-green) !important;
  -webkit-text-fill-color: var(--shl-green) !important;
  border: 1px solid rgba(46,159,122,0.32) !important;
  border-radius: 100px !important;
  padding: 4px 12px !important;
  font-family: var(--shl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}
body #shopDetailRef {
  background: var(--shl-card) !important;
  border: 1px solid var(--shl-rule) !important;
  border-radius: 10px !important;
  color: var(--shl-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   EMPTY STATES
   ═════════════════════════════════════════════════════════════════════ */

body #shopEmptyCompounds,
body #shopEmptySupplies {
  background: var(--shl-card) !important;
  background-image: none !important;
  border: 1px dashed var(--shl-blue-rule) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  color: var(--shl-mut) !important;
  -webkit-text-fill-color: var(--shl-mut) !important;
  text-align: center !important;
  font-style: italic !important;
  text-shadow: none !important;
}

/* Loading spinner area */
body #shopLoading {
  color: var(--shl-mut) !important;
  -webkit-text-fill-color: var(--shl-mut) !important;
  font-style: italic !important;
  text-align: center !important;
  padding: 40px 16px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TOPBAR (logged-out)
   ═════════════════════════════════════════════════════════════════════ */

body .shop-topbar {
  background: var(--shl-card) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--shl-rule) !important;
  backdrop-filter: blur(8px) !important;
}
body .shop-topbar .btn-login,
body .shop-topbar #shopTopIntakeBtn {
  font-family: var(--shl-font-eyebrow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--shl-blue) !important;
  -webkit-text-fill-color: var(--shl-blue) !important;
  background: var(--shl-card) !important;
  border: 1px solid var(--shl-blue-rule) !important;
  border-radius: 100px !important;
  padding: 8px 16px !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: background 0.18s !important;
}
body .shop-topbar .btn-login:hover,
body .shop-topbar #shopTopIntakeBtn:hover {
  background: var(--shl-blue-tint) !important;
}
body .shop-topbar #shopTopIntakeBtn {
  background: linear-gradient(135deg, var(--shl-blue), var(--shl-blue-deep)) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(42,63,168,0.28) !important;
}

/* Member dashboard nav button (logged-in only).
   Previously this was blue text on a white card which on the page's
   gradient bg the user reported as unreadable. Inverted to a solid
   blue background with white text — high contrast, clear primary
   action style. Wins the cascade with !important above the
   shop-cc-chrome.css attempt at the same thing. */
body .shop-dash-btn,
body .shop-topbar .shop-dash-btn {
  font-family: var(--shl-font-eyebrow) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: var(--shl-blue) !important;
  background-image: linear-gradient(135deg, #2A3FA8, #1E2D7A) !important;
  border: 1px solid var(--shl-blue-deep) !important;
  border-radius: 100px !important;
  padding: 10px 22px !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: 0 6px 18px rgba(42,63,168,0.30) !important;
  transition: all 160ms ease !important;
}
body .shop-dash-btn:hover,
body .shop-topbar .shop-dash-btn:hover {
  background: var(--shl-blue-deep) !important;
  background-image: linear-gradient(135deg, #1E2D7A, #142057) !important;
  box-shadow: 0 10px 24px rgba(42,63,168,0.42) !important;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  body .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}