/* =============================================================================
   PepRally storefront — Carbon canvas, Ember Orange single accent, Sora only.
   PepRally Website Brief §2 (Design System).
   =============================================================================
   The brief's design directive is monochromatic — there is one accent color
   (Ember Orange) and zero category color variation. Every product card on the
   shop grid looks identical except for text. The site reads like a Whoop /
   Oura dashboard, not a supplement store. This stylesheet enforces that.
   ============================================================================= */

/* Brief §2.1 — Color tokens. CSS variables so every component pulls from one
   place; if the operator decides Ember Orange should shift one notch redder,
   it's a single edit at --color-accent. */
.peprally {
  --color-bg: #111116;
  --color-surface: #1A1A22;
  --color-accent: #E8550F;
  --color-text: #FFFFFF;
  --color-muted: #64748B;
  --color-subtle: #E2E8F0;
  --color-border: #1E1E26;

  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum" on, "lnum" on;
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.peprally main {
  display: block;
}

.peprally a {
  color: var(--color-accent);
  text-decoration: none;
}

.peprally a:hover {
  text-decoration: underline;
}

/* Brief §2.2 — Typography. Sora at five weights (300 / 400 / 600 / 700 / 800)
   and a clear hierarchy. Body text is white or slate depending on hierarchy
   per the brief. */
.peprally h1,
.peprally h2,
.peprally h3,
.peprally h4 {
  margin: 0 0 0.5em;
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.peprally h1 { font-size: clamp(40px, 6vw, 56px); }
.peprally h2 { font-size: clamp(28px, 4vw, 36px); font-weight: 600; }
.peprally h3 { font-size: clamp(20px, 3vw, 24px); font-weight: 600; }

.peprally p {
  margin: 0 0 1em;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
}

.peprally p.muted {
  color: var(--color-muted);
}

/* =============================================================================
   3.1 Age gate (modal overlay) — brief §3.1
   =============================================================================
   First-visit modal. Cannot interact with anything until confirmed.
   Background: Carbon with 85% opacity blur per spec. Two buttons (Ember
   Orange fill primary, outlined Slate ghost). PepRally.bio logo (text-only
   here — SVG asset comes later).
   ============================================================================= */
.peprally-age-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chained-class selector intentionally — Nutreko base.css ships a
   `div:empty { display: none }` rule. The scrim is an empty <div>
   styled as a backdrop, so without this override the scrim is
   hidden and the dim never paints (operator-reported 2026-05-07
   "the 21 age gate doesn't dim the rest of the page"). Specificity
   (0,2,0) beats Nutreko's (0,1,1). */
.peprally-age-gate .peprally-age-gate__scrim {
  display: block;
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 22, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.peprally-age-gate__card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  max-width: 480px;
  width: calc(100% - 48px);
  padding: 40px 32px;
  text-align: center;
}

.peprally-age-gate__wordmark {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.peprally-age-gate__wordmark .accent {
  color: var(--color-accent);
}

.peprally-age-gate__heading {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.peprally-age-gate__body {
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.peprally-age-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 20px;
}

.peprally-age-gate__btn {
  display: block;
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.15s, opacity 0.15s;
}

.peprally-age-gate__btn--primary {
  background: var(--color-accent);
  color: var(--color-text);
}

.peprally-age-gate__btn--primary:hover {
  opacity: 0.9;
}

.peprally-age-gate__btn--ghost {
  background: transparent;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}

.peprally-age-gate__btn--ghost:hover {
  border-color: var(--color-muted);
  color: var(--color-text);
}

.peprally-age-gate__legal {
  font-size: 11px;
  color: var(--color-muted);
  margin: 0;
}

/* =============================================================================
   Age-blocked page — brief §3.1 exit path
   ============================================================================= */
.peprally-age-blocked {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
}

.peprally-age-blocked__card {
  max-width: 480px;
}

.peprally-age-blocked__heading {
  font-size: 28px;
  margin-bottom: 12px;
}

.peprally-age-blocked__body {
  color: var(--color-muted);
}

/* =============================================================================
   3.2 Homepage hero — brief §3.2
   =============================================================================
   Full-viewport. Carbon background. NO images. Typography IS the hero.
   Logo centered (text wordmark for now), tagline (Sora 700, white,
   letter-spaced), CTA in Ember Orange fill. Subtle data element below
   (a thin pulsing horizontal line — the Whoop loading-screen aesthetic).
   ============================================================================= */
.peprally-hero {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(232, 85, 15, 0.12), transparent 65%),
    radial-gradient(ellipse at 80% 80%, rgba(232, 85, 15, 0.06), transparent 50%),
    var(--color-bg);
  overflow: hidden;
}

/* Subtle grid lines behind the hero — data-dashboard ambience without
   needing a stock photo. The grid is so faint it reads as texture, not
   a graphic. */
.peprally-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}

.peprally-hero__inner {
  position: relative;
  z-index: 1;
}

.peprally-hero__inner {
  max-width: 720px;
  text-align: center;
}

.peprally-hero__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 24px;
}

.peprally-hero__statement {
  font-size: clamp(48px, 9vw, 84px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 32px;
  line-height: 1;
  color: var(--color-text);
}

.peprally-hero__statement .accent {
  color: var(--color-accent);
}

.peprally-hero__tagline {
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0 auto 40px;
  max-width: 540px;
}

/* Specificity boosted with the `a` qualifier: `.peprally a` (0,1,1) was
   winning over `.peprally-hero__cta` (0,1,0) and painting the CTA text
   orange-on-orange (invisible). */
.peprally a.peprally-hero__cta {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-text);
  padding: 20px 48px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 8px 32px rgba(232, 85, 15, 0.32);
}

.peprally a.peprally-hero__cta:hover {
  opacity: 0.9;
  text-decoration: none;
  color: var(--color-text);
}

/* Subtle data-inspired element. Thin pulsing horizontal line —
   the Whoop loading screen, not a flashy animation. */
.peprally-hero__pulse {
  margin: 56px auto 0;
  width: 120px;
  height: 1px;
  background: var(--color-border);
  position: relative;
  overflow: hidden;
}

.peprally-hero__pulse::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: var(--color-accent);
  animation: peprally-pulse 3s ease-in-out infinite;
}

@keyframes peprally-pulse {
  0% { left: -40%; }
  100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .peprally-hero__pulse::after {
    animation: none;
    left: 30%;
    opacity: 0.5;
  }
}

/* =============================================================================
   Trust strip — brief §3.2
   =============================================================================
   Horizontal strip with Ember Orange icons + white text:
   "Batch-Specific COAs" | "Third-Party Tested" | "U.S. Manufactured" |
   "Free Shipping $150+". On Carbon background. Sparse. Data-forward.
   ============================================================================= */
.peprally-trust-strip {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 32px 24px;
}

.peprally-trust-strip__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
}

.peprally-trust-strip__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.peprally-trust-strip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  flex: 0 0 auto;
}

/* =============================================================================
   Protocol callout — brief §3.2
   =============================================================================
   Section with heading "Built for your protocol." Brief copy. Optional
   small grid of product names in oversized Sora 800 (data-readout feel).
   ============================================================================= */
.peprally-protocol {
  padding: 80px 24px;
  background: var(--color-bg);
}

.peprally-protocol__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.peprally-protocol__heading {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.peprally-protocol__heading .accent {
  color: var(--color-accent);
}

.peprally-protocol__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-muted);
  /* Operator (2026-05-05): "the footer tagline is not centered and it
     wraps 2 lines when it shouldn't ... Guesswork is on line 2 and it
     looks stupid". The 600px max-width was clipping
     "Every batch independently tested. COAs on every product page.
     No guesswork." onto two lines on desktop, with "No guesswork."
     orphaned on the second line. Bump to 760px so the full sentence
     fits one line on desktop; on mobile (max-width: 760px viewport)
     the natural wrap still kicks in via flexbox-default behavior. */
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* =============================================================================
   Brand-footer compliance overrides — shared partial uses .brand-footer*
   classes; we map them to the Carbon palette here.
   ============================================================================= */
.peprally .brand-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: 48px 24px 32px;
  color: var(--color-muted);
}

.peprally .brand-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.peprally .brand-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.peprally .brand-footer__nav a {
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.peprally .brand-footer__nav a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.peprally .brand-footer__ruo,
.peprally .brand-footer__fda {
  text-align: center;
  font-size: 12px;
  color: var(--color-muted);
  margin: 0 0 8px;
  line-height: 1.5;
}

.peprally .brand-footer__copy {
  text-align: center;
  font-size: 11px;
  color: var(--color-muted);
  margin: 24px 0 0;
}

/* =============================================================================
   Header / nav — brief §3.2 implies a minimal nav. Cart icon top right.
   ============================================================================= */
.peprally-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(17, 17, 22, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.peprally-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.peprally-nav__brand {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.peprally-nav__brand:hover {
  text-decoration: none;
}

.peprally-nav__brand .accent {
  color: var(--color-accent);
}

.peprally-nav__links {
  display: flex;
  gap: 24px;
  align-items: center;
}

.peprally-nav__link {
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.peprally-nav__link:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.peprally-nav__cart {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 2px;
  transition: border-color 0.15s, color 0.15s;
}

.peprally-nav__cart:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* =============================================================================
   Product card (shared: homepage grid, shop grid, related products)
   =============================================================================
   Brief §3.2 / §3.3 — Carbon Light bg, identical treatment per card. Only
   text differs. Hover: subtle Ember Orange border glow.
   ============================================================================= */
.peprally-card {
  list-style: none;
  margin: 0;
}

.peprally-card__link {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 24px;
  color: var(--color-text);
  height: 100%;
  transition: border-color 0.2s, transform 0.2s;
}

.peprally-card__link:hover {
  border-color: var(--color-accent);
  text-decoration: none;
  transform: translateY(-2px);
}

.peprally-card__tagline {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.peprally-card__name {
  color: var(--color-text);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 24px);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.peprally-card__descriptor {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 400;
  margin: 0 0 16px;
  line-height: 1.4;
}

.peprally-card__dose {
  color: var(--color-text);
  font-weight: 800;
  font-size: clamp(20px, 2.5vw, 28px);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.peprally-card__price {
  color: var(--color-text);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 16px;
}

.peprally-card__view {
  display: inline-block;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* =============================================================================
   Homepage product grid — brief §3.2 (3×4 desktop, 2×6 tablet, 1×12 mobile)
   ============================================================================= */
.peprally-grid-section {
  padding: 80px 24px;
  background: var(--color-bg);
}

.peprally-grid-section__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.peprally-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 960px) {
  .peprally-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .peprally-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Shop / collection page — brief §3.3
   ============================================================================= */
.peprally-shop {
  padding: 64px 24px 96px;
  max-width: 1200px;
  margin: 0 auto;
}

.peprally-shop__header {
  text-align: center;
  margin-bottom: 40px;
}

.peprally-shop__heading {
  font-size: clamp(36px, 5vw, 48px);
  margin-bottom: 12px;
}

.peprally-shop__subhead {
  color: var(--color-muted);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.peprally-shop__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}

.peprally-shop__filter {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.peprally-shop__filter:hover {
  color: var(--color-text);
  border-color: var(--color-muted);
  text-decoration: none;
}

.peprally-shop__filter--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text);
}

.peprally-shop__filter--active:hover {
  color: var(--color-text);
  border-color: var(--color-accent);
}

.peprally-shop__sort {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  margin-bottom: 32px;
}

.peprally-shop__sort-label {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peprally-shop__sort-select {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  cursor: pointer;
}

.peprally-shop__grid {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 960px) {
  .peprally-shop__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .peprally-shop__grid { grid-template-columns: 1fr; }
}

.peprally-shop__ruo-note {
  text-align: center;
  font-size: 11px;
  color: var(--color-muted);
  max-width: 600px;
  margin: 32px auto 0;
}

/* =============================================================================
   PDP — brief §3.4
   =============================================================================
   Split layout: image left (vial mockup placeholder), data stack right.
   Below-fold tab system: Overview | COA | Shipping. Related products row.
   ============================================================================= */
.peprally-pdp {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.peprally-pdp__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 96px;
}

@media (max-width: 800px) {
  .peprally-pdp__split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.peprally-pdp__image-frame {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Vial mockup — minimal CSS-only vial shape with the orange cap as the
   only color cue. Real photography replaces this when assets land. */
.peprally-pdp__vial {
  position: relative;
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.peprally-pdp__vial-cap {
  width: 70%;
  height: 24px;
  background: var(--color-accent);
  border-radius: 2px 2px 0 0;
}

.peprally-pdp__vial-body {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0 0 4px 4px;
  padding: 64px 12px;
  text-align: center;
}

.peprally-pdp__vial-name {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.peprally-pdp__info > * + * {
  margin-top: 16px;
}

.peprally-pdp__tagline {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
}

.peprally-pdp__name {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.peprally-pdp__descriptor {
  color: var(--color-muted);
  font-size: 14px;
  margin: 0;
}

.peprally-pdp__dose {
  color: var(--color-text);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  margin: 0;
}

.peprally-pdp__price {
  color: var(--color-text);
  font-weight: 600;
  font-size: 22px;
  margin: 0;
}

.peprally-pdp__cart-form {
  display: flex;
  gap: 12px;
  align-items: end;
  margin-top: 24px;
}

.peprally-pdp__qty-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.peprally-pdp__qty-label span {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peprally-pdp__qty-input {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  font-family: inherit;
  font-size: 14px;
  padding: 12px;
  width: 80px;
}

.peprally-pdp__cart-button {
  flex: 1;
  background: var(--color-accent);
  color: var(--color-text);
  border: none;
  border-radius: 2px;
  padding: 14px 24px;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s;
}

.peprally-pdp__cart-button:hover {
  opacity: 0.9;
}

.peprally-pdp__ruo-badge {
  display: inline-block;
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--color-border);
  padding: 6px 12px;
  border-radius: 2px;
}

/* Tab system — brief §3.4. Vanilla JS toggles --active classes;
   without JS, all panels are visible (progressive enhancement). */
.peprally-pdp__tabs {
  border-top: 1px solid var(--color-border);
  padding-top: 48px;
}

.peprally-pdp__tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 32px;
}

.peprally-pdp__tab-trigger {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 24px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.peprally-pdp__tab-trigger:hover {
  color: var(--color-text);
}

.peprally-pdp__tab-trigger--active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

.peprally-pdp__tab-panel {
  margin-bottom: 32px;
}

/* When JS is active (data-js attribute set by inline script), only
   the active panel is visible. Without JS, all panels stack — works
   without a tab interaction. */
.peprally-pdp__tabs[data-js] .peprally-pdp__tab-panel {
  display: none;
}

.peprally-pdp__tabs[data-js] .peprally-pdp__tab-panel--active {
  display: block;
}

.peprally-pdp__tab-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  max-width: 720px;
}

.peprally-pdp__tab-note {
  font-size: 13px;
  color: var(--color-muted);
  max-width: 720px;
  margin-top: 16px;
}

.peprally-pdp__tab-tagline {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 16px;
}

/* PDP layout: center product info vertically with image */
@media (min-width: 1000px) {
  body.peprally .main-product {
    align-items: center !important;
  }
}

/* Tighter spacing on PDP right column elements */
body.peprally .ap-productmeta {
  padding-top: 0 !important;
}
body.peprally .ap-productform {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.peprally .ap-productmeta__title {
  margin-bottom: 4px !important;
}
body.peprally .ap-productmeta__price-list-container {
  margin-bottom: 12px !important;
}

/* RUO policy line: tighter to trust badges */
body.peprally .policy-content {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  opacity: 0.6;
}

/* Override Nutreko's .product-content flex layout — its ap-theme.css
   forces display:flex + justify-content:space-between at ≥1000px,
   expecting .product-content__tabs + .product-content__featured-products
   inner wrappers. Our PDP uses plain tab/panel markup inside
   .product-content, so the flex creates a broken 2-column split.
   Also nuke the 1200px margin-left/right that uses unset CSS vars. */
body.peprally .product-content {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 24px !important;
}

.peprally-pdp__related {
  margin-top: 64px;
}

.peprally-pdp__related-heading {
  font-size: 24px;
  margin-bottom: 24px;
  font-weight: 600;
}

.peprally-pdp__related-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 800px) {
  .peprally-pdp__related-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Cart — full page (/peprally/cart) + slide-out drawer. Brief §3.9.
   ============================================================================= */

/* --- Full cart page --- */
.peprally-cart {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.peprally-cart__header {
  margin-bottom: 32px;
}

.peprally-cart__heading {
  font-size: 36px;
  font-weight: 700;
}

.peprally-cart__layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
}

@media (max-width: 800px) {
  .peprally-cart__layout {
    grid-template-columns: 1fr;
  }
}

.peprally-cart__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.peprally-cart__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
}

.peprally-cart__row-tagline {
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.peprally-cart__row-name {
  color: var(--color-text);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
}

.peprally-cart__row-descriptor {
  color: var(--color-muted);
  font-size: 13px;
  margin: 0;
}

.peprally-cart__row-qty {
  color: var(--color-muted);
  font-size: 13px;
  margin: 0;
}

.peprally-cart__row-price {
  color: var(--color-text);
  font-weight: 600;
  font-size: 16px;
  margin: 0;
}

.peprally-cart__continue-link {
  display: inline-block;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.peprally-cart__continue-link--primary {
  color: var(--color-accent);
}

.peprally-cart__summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 24px;
}

.peprally-cart__summary-heading {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 16px;
}

.peprally-cart__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 15px;
}

.peprally-cart__summary-row strong {
  color: var(--color-text);
}

.peprally-cart__summary-row--field {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.peprally-cart__summary-row--field label {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peprally-cart__summary-row--field input {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 10px;
  font-family: inherit;
  font-size: 13px;
}

.peprally-cart__summary-muted {
  color: var(--color-muted);
  font-size: 13px;
}

.peprally-cart__checkout-btn {
  display: block;
  text-align: center;
  background: var(--color-accent);
  color: var(--color-text);
  padding: 14px 24px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 16px 0 8px;
  opacity: 0.6;
  cursor: not-allowed;
}

.peprally-cart__checkout-btn:hover {
  text-decoration: none;
}

.peprally-cart__summary-note {
  font-size: 11px;
  color: var(--color-muted);
  text-align: center;
  margin: 0;
}

.peprally-cart__empty {
  text-align: center;
  padding: 64px 24px;
}

.peprally-cart__empty-msg {
  color: var(--color-muted);
  font-size: 16px;
  margin-bottom: 24px;
}

/* --- Slide-out drawer --- */
.peprally-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
}

.peprally-cart-drawer--open {
  pointer-events: auto;
  visibility: visible;
}

.peprally-cart-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 22, 0.5);
  opacity: 0;
  transition: opacity 0.25s;
}

.peprally-cart-drawer--open .peprally-cart-drawer__scrim {
  opacity: 1;
}

.peprally-cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 420px;
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

.peprally-cart-drawer--open .peprally-cart-drawer__panel {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .peprally-cart-drawer__scrim,
  .peprally-cart-drawer__panel {
    transition: none;
  }
}

.peprally-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid var(--color-border);
}

.peprally-cart-drawer__heading {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

.peprally-cart-drawer__close {
  background: transparent;
  border: none;
  color: var(--color-muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.peprally-cart-drawer__close:hover {
  color: var(--color-text);
}

.peprally-cart-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}

.peprally-cart-drawer__row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border);
  align-items: start;
}

.peprally-cart-drawer__row-thumb {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
}

.peprally-cart-drawer__row-thumb-name {
  font-size: 8px;
  color: var(--color-muted);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.peprally-cart-drawer__row-tagline {
  color: var(--color-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 2px;
}

.peprally-cart-drawer__row-name {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}

.peprally-cart-drawer__row-qty {
  color: var(--color-muted);
  font-size: 12px;
  margin: 0;
}

.peprally-cart-drawer__row-price {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.peprally-cart-drawer__footer {
  border-top: 1px solid var(--color-border);
  padding: 24px;
}

.peprally-cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 15px;
}

/* Specificity-bumped with `a` qualifier — `.peprally a { color: orange }`
   was painting Checkout text orange-on-orange via cascade. */
.peprally a.peprally-cart-drawer__checkout,
.peprally a.peprally-cart-drawer__checkout:hover {
  display: block;
  text-align: center;
  background: var(--color-accent);
  color: var(--color-text) !important;
  padding: 14px 24px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0.6;
  cursor: not-allowed;
  text-decoration: none;
}

.peprally a.peprally-cart-drawer__view-cart,
.peprally a.peprally-cart-drawer__view-cart:hover {
  color: var(--color-muted) !important;
  text-decoration: none;
}

.peprally-cart-drawer__view-cart {
  display: block;
  text-align: center;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Cross-portfolio attach card. Surfaces a one-click BacWater 30 mL
   add inside the peptide-brand cart drawer (PORTFOLIO_PLAN.md §4.1).
   Brand-token palette — Ember Orange accent on Carbon canvas. */
.peprally-cart-drawer__bacwater-attach {
  border-top: 1px solid var(--color-border);
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.peprally-cart-drawer__bacwater-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.peprally-cart-drawer__bacwater-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.peprally-cart-drawer__bacwater-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.peprally-cart-drawer__bacwater-price {
  margin: 0;
  font-size: 14px;
  color: var(--color-text);
}

.peprally-cart-drawer__bacwater-add {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: 12px 16px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}

.peprally-cart-drawer__bacwater-add:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

.peprally-cart-drawer__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 16px;
  text-align: center;
}

.peprally-cart-drawer__empty p {
  color: var(--color-muted);
  margin: 0;
}

.peprally-cart-drawer__shop-link {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =============================================================================
   Content pages — About, FAQ, Contact, Shipping, Legal. Brief §3.5 / §3.7 /
   §3.8 / §3.10. Single shared layout: narrow column on Carbon, Sora type,
   Ember Orange accents on links + headings.
   ============================================================================= */
.peprally-content {
  padding: 64px 24px 96px;
}

.peprally-content__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.peprally-content__inner--narrow {
  max-width: 760px;
}

.peprally-content__header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}

.peprally-content__title {
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.peprally-content__lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 600px;
  margin: 0;
}

.peprally-content__section {
  margin-bottom: 40px;
}

.peprally-content__heading {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.peprally-content__heading .accent {
  color: var(--color-accent);
}

.peprally-content__section p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 12px;
}

.peprally-content__note {
  font-size: 12px;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  margin-top: 48px;
}

/* =============================================================================
   FAQ accordion — brief §3.7. Native <details>/<summary> with custom arrow.
   ============================================================================= */
.peprally-faq__category {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 40px 0 16px;
}

.peprally-faq__category:first-child {
  margin-top: 0;
}

.peprally-faq__item {
  border-bottom: 1px solid var(--color-border);
  padding: 18px 0;
}

.peprally-faq__item summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  list-style: none;
  position: relative;
  padding-right: 32px;
}

.peprally-faq__item summary::-webkit-details-marker {
  display: none;
}

.peprally-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-accent);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
}

.peprally-faq__item[open] summary::after {
  content: "−";
}

.peprally-faq__item p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-muted);
  margin: 12px 0 0;
}

/* =============================================================================
   COAs / Lab Results page — brief §3.6. Dark "lab dashboard" feel.
   ============================================================================= */
.peprally-coas {
  padding: 64px 24px 96px;
}

.peprally-coas__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.peprally-coas__header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}

.peprally-coas__title {
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.peprally-coas__lede {
  font-size: 16px;
  color: var(--color-muted);
  line-height: 1.6;
  max-width: 720px;
  margin: 0;
}

.peprally-coas__stats {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.peprally-coas__stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 24px;
  text-align: center;
}

.peprally-coas__stat-value {
  display: block;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.peprally-coas__stat-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.peprally-coas__empty {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 32px;
  text-align: center;
  color: var(--color-muted);
  margin-bottom: 48px;
}

.peprally-coas__grid {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.peprally-coas__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.peprally-coas__card-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.peprally-coas__card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 24px;
  flex: 1;
}

.peprally-coas__card-meta div {
  border-left: 2px solid var(--color-border);
  padding-left: 10px;
}

.peprally-coas__card-meta dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 4px;
}

.peprally-coas__card-meta dd {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.peprally-coas__pass {
  color: var(--color-accent) !important;
}

.peprally-coas__card-cta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.peprally-coas__note {
  font-size: 12px;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  line-height: 1.6;
}

/* =============================================================================
   Per-product COA history — brief §3.6 detail surface.
   ============================================================================= */
.peprally-coa-history {
  padding: 64px 24px 96px;
}

.peprally-coa-history__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.peprally-coa-history__header {
  margin-bottom: 32px;
}

.peprally-coa-history__breadcrumb {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.peprally-coa-history__breadcrumb a {
  color: var(--color-muted);
}

.peprally-coa-history__breadcrumb a:hover {
  color: var(--color-accent);
}

.peprally-coa-history__title {
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.peprally-coa-history__sku {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peprally-coa-history__table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}

.peprally-coa-history__table th,
.peprally-coa-history__table td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.peprally-coa-history__table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.peprally-coa-history__table td {
  font-size: 14px;
  color: var(--color-text);
}

.peprally-coa-history__batch-id {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--color-muted);
}

.peprally-coa-history__pass {
  color: var(--color-accent);
  font-weight: 700;
}

.peprally-coa-history__row-cta {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peprally-coa-history__empty {
  padding: 32px;
  text-align: center;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.peprally-coa-history__note {
  font-size: 12px;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  margin-top: 32px;
  line-height: 1.6;
}


/* Force shop product grid to 3-col on desktop / 2-col on tablet / 1-col mobile.
   Nutreko's .ap-productlist__inner relies on --section-products-per-row CSS
   var which is never set in our load (Liquid theme settings stripped during
   ingestion). Without it the grid collapses to 1-column-on-the-right. */
.peprally .ap-productlist__inner:not(.peprally-slider__track),
.peprally .peprally-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-flow: row !important;
  gap: 24px !important;
  overflow: visible !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  .peprally .ap-productlist__inner:not(.peprally-slider__track),
  .peprally .peprally-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .peprally .ap-productlist__inner:not(.peprally-slider__track),
  .peprally .peprally-grid { grid-template-columns: 1fr !important; }
}



/* Same defensive override pattern for peprally + mypeptides. */
.peprally ap-productfacet,
.peprally .ap-productfacet { display: block !important; }
.peprally .ap-productfacet__main { width: 100% !important; }
.peprally .ap-productfacet__active-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}



/* Filter chip visibility — Nutreko's .button--primary / .button--outline
   defines its own text color via CSS vars, but our peprally a { color: orange }
   wins on specificity for <a> chips. Force chip text colors. */
.peprally a.button.button--primary,
.peprally a.button.button--primary:hover {
  color: var(--color-text) !important;
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}
.peprally a.button.button--outline,
.peprally a.button.button--outline:hover {
  color: var(--color-text) !important;
  background: transparent !important;
  border-color: rgba(245, 245, 247, 0.32) !important;
}

/* Filter chips fit on one row at desktop. */
.peprally .ap-productfacet__active-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  padding: 16px 0 !important;
  margin: 0 !important;
}
.peprally .ap-productfacet__active-list .button--small {
  padding: 0 14px !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
}



/* Card link text + name visibility on shop grid (.product-item-meta__title
   is the Nutreko shop card title link). The peprally a { color: orange }
   rule was painting these orange-on-dark — readable normally — but the
   user reported text disappearing on the active/selected state. Force
   stable text color regardless of state. */
.peprally a.product-item-meta__title,
.peprally a.product-item-meta__title:hover,
.peprally .product-item-meta__title a,
.peprally .product-item-meta__title a:hover {
  color: var(--color-text) !important;
}
.peprally .product-item .type-product,
.peprally .product-item .product-item-meta {
  color: var(--color-text) !important;
}



/* Defensive word-wrap on every brand card text — long tagline/name
   stays on word boundaries, doesn't break mid-word. */
.peprally .peprally-card__name,
.peprally .peprally-card__tagline,
.peprally .product-item-meta__title,
.peprally .product-item .type-product,
.peprally .product-item-meta p {
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
}


/* =========================================================================
   PepRally shop product card — hard overrides (2026-05-04)
   =========================================================================
   Operator: 'shopping the stack and mousing over the product grid has an
   animation that pulls up a banner from CLICK VIEW COMPOUND. WHY THE FUCK
   IS THIS SHIT STILL NOT CENTERED. CENTER THIS SHIT AND I DON'T WANT TO
   SEE THE FUCKING LEFT SIDE OF THE FUCKING BANNER. IT'S SUPPOSED TO BE IN
   THE BOUND OF THE PRODUCT BOX. fix this now. also the grid page is
   broken the way the others used to be fix.'

   Two issues fixed here:
   1. Nutreko's stripped jQuery raised the .btn-service.btn-addcart strip
      from below on hover via absolute positioning. Without the JS but with
      the CSS still in scope, the action strip rendered at static
      coordinates and bled outside the card on the left. Kill those rules
      and replace with a CSS-only static centered button at the bottom of
      each card.
   2. Meta-bar (count + sort) wrapped weirdly because the ap-productfacet
      grid layout expects sidebar siblings; without them the bar items
      collapsed onto each other. Force a flex row with space-between.
   ========================================================================= */

/* Meta-bar — count on the left, Sort by + select on the right. */
.peprally .ap-productfacet__meta-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  padding: 12px 0 24px;
  border-bottom: 1px solid rgba(245, 245, 247, 0.08);
  margin-bottom: 24px;
}
.peprally .ap-productfacet__meta-bar-item--count {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.peprally .ap-productfacet__meta-bar-item--sort form {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.peprally .ap-productfacet__sort-by-title {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.peprally .ap-productfacet__meta-bar select {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid rgba(245, 245, 247, 0.18);
  color: var(--color-text);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

/* Product card — Carbon-on-Carbon tile, ember accent, contained hover. */
.peprally .product-item-wrapper {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(232, 85, 15, 0.04) !important;
  border: 1px solid rgba(245, 245, 247, 0.08) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, border-color 0.25s ease,
              box-shadow 0.3s ease, background 0.25s ease !important;
}
.peprally .product-item-wrapper:hover,
.peprally .product-item-wrapper:focus-within {
  transform: translateY(-4px) !important;
  border-color: rgba(232, 85, 15, 0.6) !important;
  box-shadow:
    0 0 16px rgba(232, 85, 15, 0.25),
    0 0 40px rgba(232, 85, 15, 0.15),
    0 12px 48px rgba(232, 85, 15, 0.12) !important;
  background: rgba(232, 85, 15, 0.08) !important;
}

/* Hide Nutreko's icon-only .btn-service variants (quickview / wishlist
   etc.) — those depend on jQuery handlers we don't ship. The slide-up
   .service-add-cart strip below is the action we DO want. */
.peprally .product-item-wrapper .btn-service,
.peprally .product-item-wrapper .service-product {
  display: none !important;
}

/* HOVER BANNER — beautiful slide-up "View Compound" CTA per operator
   ('fix it so that it is beautiful'). The .service-add-cart block is
   absolutely positioned INSIDE the card so its bounds are the card's
   bounds (no left-bleed). Default state: translated 100% below the
   card's visible area, opacity 0. Hover/focus state: translated to 0,
   opacity 1, with an ember-fade gradient backdrop so the banner reads
   as a soft glass overlay coming UP from the card bottom. */
.peprally .service-add-cart {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background:
    linear-gradient(180deg,
      rgba(13, 13, 20, 0) 0%,
      rgba(13, 13, 20, 0.88) 32%,
      rgba(13, 13, 20, 0.97) 100%) !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(100%) !important;
  opacity: 0 !important;
  visibility: visible !important;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.28s ease !important;
  pointer-events: none;
  z-index: 4;
}
.peprally .product-item-wrapper:hover .service-add-cart,
.peprally .product-item-wrapper:focus-within .service-add-cart {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto;
}
.peprally .service-add-cart .btn-addcart {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.peprally .service-add-cart .btn-addcart > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
  padding: 20px 24px !important;
  background: var(--color-accent) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--color-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
}
.peprally .service-add-cart .btn-addcart > a:hover,
.peprally .service-add-cart .btn-addcart > a:focus {
  background: rgba(232, 85, 15, 0.88) !important;
}

/* Card meta padding — generous padding + centered text in the
   grey card boxes. Nutreko default has this near-zero. */
.peprally .product-item__info-top {
  padding: 20px 20px 8px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.peprally .product-item__info {
  padding: 12px 20px 44px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
}
.peprally .product-item__image-wrapper {
  padding: 0 20px !important;
}
.peprally .product-item-meta,
.peprally .product-item-meta1,
.peprally .product-item-meta2 {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}
.peprally .product-item-meta__title {
  text-align: center !important;
  width: 100% !important;
}
.peprally .type-product {
  text-align: center !important;
  width: 100% !important;
}

/* Price treatment on EVERY product card on PepRally — operator
   (asked >10 times by 2026-05-05): 'center the damn prices and make
   them the orange color'. The earlier selectors required `.product-item`
   ancestor (shop grid) but the home slideshow's Nutreko slider uses
   `<product-item class="slider__item peprally-slider__item">` which
   doesn't carry `.product-item` as a class. Drop the ancestor
   requirement entirely — `body.peprally` scope is enough and won't
   leak (Glam / MyPeptides / SurfPeptides / BacWater have their own
   body classes). Match every wrapper that emits .product-price on
   PepRally. */
body.peprally .product-price,
body.peprally .product-price .price,
body.peprally .price {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  color: var(--color-accent) !important;
  font-family: 'Sora', -apple-system, sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  margin-top: 6px !important;
}
body.peprally .product-item-meta__descriptor,
body.peprally .product-item-meta__dose {
  text-align: center !important;
}

body.peprally .service-add-cart .ap-text-loaderbutton {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

/* ----------------------------------------------------------------
   Nutreko1 home features — slideshow, featured-product slider,
   newsletter section. All scoped under body.peprally so they only
   apply on PepRally pages and don't leak into other brands'
   shared styles.
   ---------------------------------------------------------------- */

/* Slideshow viewport — full-bleed, fixed height (matches the prior
   hero's 640px). Slides fade in via opacity transition; only the
   active slide pointer-events. */
body.peprally .peprally-slideshow {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  display: block;
}
body.peprally .peprally-slideshow__viewport,
body.peprally .peprally-slideshow__track {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 640px;
}
body.peprally .peprally-slideshow__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease-in-out;
}
body.peprally .peprally-slideshow__slide {
  display: flex !important;
}
body.peprally .peprally-slideshow__slide--active {
  opacity: 1;
  pointer-events: auto;
}
body.peprally .peprally-slideshow__bg,
body.peprally .peprally-slideshow__grid {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  background-size: 100% auto !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
body.peprally .peprally-slideshow__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
body.peprally .peprally-slideshow__content > * {
  max-width: 620px;
  text-align: center;
}
body.peprally .peprally-hero__text-backdrop {
  background: radial-gradient(ellipse 720px 480px at 50% 50%, rgba(17, 17, 22, 0.72), transparent 70%);
  border-radius: 12px;
}
body.peprally .peprally-hero__eyebrow,
body.peprally .peprally-hero__statement,
body.peprally .peprally-hero__tagline {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.5);
}
body.peprally .peprally-hero__cta {
  text-shadow: none;
}
/* Slide arrow controls (prev/next) — Carbon background, ember
   accent on hover. Plain unicode glyphs sized up. */
body.peprally .peprally-slideshow__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(13, 13, 20, 0.55);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  /* Operator-reported 2026-05-07: "fix the < or > to be in the
     center of the circles". `line-height: 0` was pushing the chevron
     glyph above center. Flex-centering places it correctly on every
     browser without per-glyph adjustment. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  z-index: 3;
  transition: background 200ms ease, border-color 200ms ease;
  font-family: 'Sora', -apple-system, sans-serif;
}
body.peprally .peprally-slideshow__arrow:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
body.peprally .peprally-slideshow__arrow--prev { left: 24px; }
body.peprally .peprally-slideshow__arrow--next { right: 24px; }
/* Dot pagination at the bottom-center. Active dot fills with ember. */
body.peprally .peprally-slideshow__dots {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  z-index: 3;
}
body.peprally .peprally-slideshow__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
body.peprally .peprally-slideshow__dot--active {
  /* Operator (2026-05-05): "if its a slide show there should be a
     mechanism that makes it go and show the user it's a slideshow".
     The active dot now stretches into a progress pill that fills in
     ember over the autoplay duration so the user sees the slide
     advancing. The fill animation runs `--peprally-autoplay` (6s
     default, matches data-autoplay-ms in the markup). On dot click
     or arrow nav, the JS toggles the .peprally-slideshow__dot--active
     class — restarting the animation each time so the bar resets. */
  background: rgba(232, 85, 15, 0.22);
  border-color: var(--color-accent);
  width: 32px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
body.peprally .peprally-slideshow__dot--active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform-origin: left center;
  animation: peprally-slideshow-progress var(--peprally-autoplay, 6s) linear forwards;
}
@keyframes peprally-slideshow-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* No hover-pause on the progress pill — autoplay runs continuously
   per operator (2026-05-05): "again the slideshow should move on its
   own". The earlier hover-pause kept autoplay frozen any time the
   cursor was inside the hero region, which is where the cursor
   naturally lands. The pill should match the actual autoplay
   behavior — keep advancing regardless of hover. */

/* Featured-product slider — horizontal scroll track + arrow controls.
   The track is overflow-x: auto so it falls back to native swipe on
   mobile and the JS-bound arrows just call scrollBy. */
body.peprally .peprally-slider {
  display: block;
  overflow: hidden;
}
body.peprally .peprally-slider .peprally-slider__track {
  /* Operator sister-bug to surf-slider (PR #152, 2026-05-05): the
     shop-grid rule `.peprally .ap-productlist__inner { display: grid
     !important; grid-template-columns: repeat(3, 1fr) !important;
     grid-auto-flow: row !important }` was winning the cascade against
     this slider track (both share `.ap-productlist__inner` on the same
     element). Result: peprally home's 12-card slider was rendering as
     a static 3-up grid with no horizontal scroll. Bump !important on
     every grid axis the slider needs + explicit `grid-template-columns:
     unset` to undo the shop template. */
  display: grid !important;
  grid-template-columns: unset !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(240px, 1fr) !important;
  gap: 24px !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 24px;
  padding: 8px 4px 24px;
  /* Visible scrollbar is noisy on a horizontal slider; hide on
     blink/webkit and let the arrows + native swipe drive it. */
  scrollbar-width: thin;
}
body.peprally .peprally-slider .peprally-slider__track::-webkit-scrollbar {
  height: 6px;
}
body.peprally .peprally-slider .peprally-slider__track::-webkit-scrollbar-thumb {
  background: rgba(232, 85, 15, 0.4);
  border-radius: 3px;
}
body.peprally .peprally-slider .peprally-slider__item {
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  body.peprally .peprally-slider .peprally-slider__track {
    grid-auto-columns: minmax(280px, 1fr);
  }
}
@media (min-width: 1100px) {
  body.peprally .peprally-slider .peprally-slider__track {
    grid-auto-columns: minmax(0, calc(25% - 18px));
  }
}
body.peprally .peprally-slider__controls {
  display: inline-flex;
  gap: 12px;
}
body.peprally .peprally-slider__arrow {
  background: transparent;
  color: var(--color-text);
  border: 1px solid rgba(255, 255, 255, 0.18);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  font-family: 'Sora', -apple-system, sans-serif;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
body.peprally .peprally-slider__arrow:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
}

/* Newsletter section — Nutreko component-newsletter.css gives us the
   form internals; the section wrapper here positions and skins the
   Carbon-themed header copy. Anchored as #newsletter so the
   controller's redirect target lands inline. */
body.peprally .brand-newsletter-section {
  background: linear-gradient(180deg, #0B0B12 0%, #18181F 100%);
  border-top: 1px solid rgba(232, 85, 15, 0.15);
  padding: 80px 24px;
}
body.peprally .brand-newsletter-section__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
body.peprally .brand-newsletter-section__heading {
  margin: 0 0 12px;
  font-family: 'Sora', -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.01em;
  color: var(--color-text);
}
body.peprally .brand-newsletter-section__body {
  margin: 0 0 32px;
  font-family: 'Sora', -apple-system, sans-serif;
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1.6;
}
body.peprally .brand-newsletter-section .field__input {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--color-text);
  border-radius: 6px;
  padding: 16px 20px;
  width: 100%;
  font-family: 'Sora', -apple-system, sans-serif;
  font-size: 15px;
  /* Center the typed-text in the input too — operator (2026-05-05):
     "center the placeholder for the newsletter on peprally". */
  text-align: center;
}

/* Newsletter floating-label override — operator (2026-05-05): "center
   the placeholder for the newsletter on peprally and make the
   placeholder text sexy and less bright it's not supposed to attract
   attention". Three changes vs Nutreko's default `.field__label`:

   1. Position centered horizontally (Nutreko default = left-aligned at
      `left: calc(border + 2rem)`). We translate the label to the
      horizontal center of the input.
   2. Color muted to ~30% white opacity (Nutreko default ~75%) so the
      label reads as supporting hint, not call-to-action.
   3. Lighter weight + wider tracking + lowercase for the editorial
      "sexy and less bright" register. */
body.peprally .brand-newsletter-section .field__label {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.30) !important;
  font-family: 'Sora', -apple-system, sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  transition: top var(--duration-short, 200ms) ease,
              font-size var(--duration-short, 200ms) ease,
              opacity var(--duration-short, 200ms) ease;
}
/* When the field is focused or the user has typed, the label drifts
   up + dims further so the typed value is the centered focal point. */
body.peprally .brand-newsletter-section .field__input:focus ~ .field__label,
body.peprally .brand-newsletter-section .field__input:not(:placeholder-shown) ~ .field__label {
  font-size: 11px !important;
  letter-spacing: 0.22em;
  opacity: 0.6;
}
body.peprally .brand-newsletter-section .newsletter-form__button {
  background: var(--color-accent);
  color: #FFFFFF;
  border: 0;
  border-radius: 6px;
  margin-top: 12px;
  padding: 16px 24px;
  font-family: 'Sora', -apple-system, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
body.peprally .brand-newsletter-section .newsletter-form__button:hover {
  filter: brightness(1.1);
}
body.peprally .brand-newsletter-section .newsletter-form__message--success {
  color: #6FD394;
  margin-top: 0;
  margin-bottom: 24px;
}
body.peprally .brand-newsletter-section .newsletter-form__message--error {
  color: #F08080;
  margin-top: 0;
  margin-bottom: 24px;
}

/* =============================================================================
   PepRally — Safety Data Sheet pages
   =============================================================================
   Per-chemistry SDS library at /peprally/sds (index) and /peprally/sds/:key
   (show). Carbon canvas + Ember Orange + Sora — single-accent monochrome,
   uppercase tracked headings, Whoop/Oura dashboard register applied to
   regulatory documents. Section dividers are Ember Orange so the eye lands
   on each OSHA section break.
   ============================================================================= */
body.peprally .peprally-sds-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}
body.peprally .peprally-sds__title,
body.peprally .peprally-sds-detail__title {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 32px;
  color: var(--color-text);
}
body.peprally .peprally-sds__lede {
  color: var(--color-subtle);
  max-width: 60ch;
  margin: 12px auto 32px;
}
body.peprally .peprally-sds__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 32px 0;
}
body.peprally .peprally-sds__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  padding: 24px 20px;
  transition: border-color 0.15s ease;
}
body.peprally .peprally-sds__card:hover {
  border-color: var(--color-accent);
}
body.peprally .peprally-sds__card-title {
  font-family: "Sora", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin-bottom: 12px;
}
body.peprally .peprally-sds__card-meta dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}
body.peprally .peprally-sds__card-meta dd {
  margin: 0 0 8px;
  color: var(--color-subtle);
  font-feature-settings: "tnum" on, "lnum" on;
}
body.peprally .peprally-sds__card-cta,
body.peprally .peprally-sds-detail__pdf-cta {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 18px;
  background: var(--color-accent);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
body.peprally .peprally-sds-detail__crumb {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}
body.peprally .peprally-sds-detail__meta {
  font-family: "Sora", sans-serif;
  font-feature-settings: "tnum" on, "lnum" on;
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  padding: 8px 0;
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-subtle);
  margin: 16px 0;
}
body.peprally .peprally-sds-detail__body section {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
}
body.peprally .peprally-sds-detail__body section h3 {
  font-family: "Sora", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  color: var(--color-accent);
  margin-top: 0;
  margin-bottom: 10px;
}
body.peprally .peprally-sds-detail__body p {
  color: var(--color-subtle);
  font-size: 14px;
  line-height: 1.7;
}
body.peprally .peprally-sds__note,
body.peprally .peprally-sds__empty,
body.peprally .peprally-sds-detail__note {
  color: var(--color-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Sort-by select on /peprally/shop. Operator-reported 2026-05-07:
   "the drop down for 'the stack' is white text on white bg". Browsers
   render <option> with the OS native dropdown — typically white bg —
   so dark-canvas brands need explicit option styling. The select
   itself also gets a dark bg so the closed state matches the chrome.
   `body.peprally` namespace keeps this from leaking to other brands. */
body.peprally select.select__select,
body.peprally #peprally-sort {
  background-color: rgba(13, 13, 20, 0.85);
  color: var(--color-text);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: inherit;
}
body.peprally select.select__select option,
body.peprally #peprally-sort option {
  background-color: #111116;
  color: var(--color-text);
}

/* Always-visible "Browse the Stack" ribbon below the slideshow.
   Operator request 2026-05-07 — the hero carousel CTAs only appear
   on the active slide, so a customer who lands during slide 2 has
   no obvious path to the catalog. This ribbon sits between the
   slideshow and the trust strip and is always rendered. */
body.peprally .peprally-stack-cta {
  background: rgba(232, 85, 15, 0.08);
  border-top: 1px solid rgba(232, 85, 15, 0.18);
  border-bottom: 1px solid rgba(232, 85, 15, 0.18);
  padding: 16px 24px;
}
body.peprally .peprally-stack-cta__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
body.peprally .peprally-stack-cta__lede {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-text);
}
body.peprally .peprally-stack-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: #E8550F;
  color: #FFFFFF;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background 200ms ease;
}
body.peprally .peprally-stack-cta__btn:hover,
body.peprally .peprally-stack-cta__btn:focus {
  background: #D14A0D;
  text-decoration: none;
  color: #FFFFFF;
}