/* =============================================================================
   Shared partials — the ones five brand layouts render, four light and one dark
   =============================================================================
   `app/views/shared/` partials used to paint PepRally's dark palette INLINE:
   `color:#F5F5F0`, `#9CA3AF`, `#10B981`, tiles of `rgba(255,255,255,.04)`. On
   PepRally that reads. On GlamPeptides, BacWater, MyPeptides and SurfPeptides
   it is light ink on a light page — #F5F5F0 on a white PDP measured 1.09:1.
   No sheet guard could see it, because a literal inside `style=""` is on no
   sheet. `shared_partials_paint_no_literal_colours_guard_test` refuses the
   literal; this sheet is where the paint went.

   It paints with the `--checkout-*` family ONLY — the one token family every
   brand sheet declares on its own body (Glam's under `body.glam`). Every TEXT
   rule takes --checkout-text: AA on every brand's page, card and summary
   ground. --checkout-muted is deliberately NOT used for copy: on Glam it is
   3.71:1. Hierarchy comes from size, weight and letter-spacing, never from a
   failing grey. The accent is used only where it is not ink (an edge, an
   underline, a focus ring) — Glam's #B76E79 is 3.8:1 as text.

   --checkout-success is the one token added for this sheet: a pass is a fact
   the old green carried, and every brand now declares a value that clears AA
   on its own grounds (light brands #047857, PepRally keeps #10B981).

   Cascade rules (shared_partials_contrast_guard_test holds them):
     · every selector names its block root — `.peprally p { … }` is (0,1,1)
       and beats a lone class on colour AND typography;
     · anchors carry `a.` — `.brand a { color: accent }` would otherwise win;
     · no literal colours, no var() fallbacks, no alpha on text.
   ========================================================================== */

/* ── shared/_pdp_coa_live — the certificate panel on every PDP ─────────── */

.pdp-coa-live {
  margin: 0;
  color: var(--checkout-text);
}

.pdp-coa-live .pdp-coa-live__hero {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.pdp-coa-live .pdp-coa-live__purity {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 12px;
  background: var(--checkout-summary-bg);
  border: 1px solid var(--checkout-success);
  border-radius: 8px;
}

.pdp-coa-live .pdp-coa-live__purity-value {
  color: var(--checkout-success);
  background: var(--checkout-summary-bg);
  font-size: 18px;
  font-weight: 700;
}

.pdp-coa-live .pdp-coa-live__purity-unit {
  color: var(--checkout-text);
  background: var(--checkout-summary-bg);
  font-size: 11px;
}

.pdp-coa-live .pdp-coa-live__batch {
  color: var(--checkout-text);
  font-size: 12px;
}

.pdp-coa-live .pdp-coa-live__batch-id {
  color: var(--checkout-text);
  font-weight: 700;
}

.pdp-coa-live .pdp-coa-live__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
}

.pdp-coa-live .pdp-coa-live__tile {
  background: var(--checkout-summary-bg);
  border: 1px solid var(--checkout-border);
  border-radius: 6px;
  padding: 6px 8px;
}

.pdp-coa-live .pdp-coa-live__tile-label {
  color: var(--checkout-text);
  background: var(--checkout-summary-bg);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.pdp-coa-live .pdp-coa-live__tile-value {
  color: var(--checkout-text);
  background: var(--checkout-summary-bg);
  font-size: 13px;
  font-weight: 500;
}

.pdp-coa-live .pdp-coa-live__tile-value--strong { font-weight: 700; }

.pdp-coa-live .pdp-coa-live__tile-value--pass {
  color: var(--checkout-success);
  background: var(--checkout-summary-bg);
}

.pdp-coa-live .pdp-coa-live__tile-note {
  color: var(--checkout-text);
  background: var(--checkout-summary-bg);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.pdp-coa-live .pdp-coa-live__pdf {
  margin-bottom: 16px;
}

.pdp-coa-live button.pdp-coa-live__pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  color: var(--checkout-success);
  background: var(--checkout-summary-bg);
  border: 1px solid var(--checkout-success);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* The full-screen PDF viewer. It is a scrim over the whole page, so it is
   painted INVERSE — the brand's ink as the ground, its page as the ink —
   which is the page's own contrast pair turned over, AA by construction on
   every brand. */
.pdp-coa-live .pdp-coa-live__overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--checkout-text);
}

.pdp-coa-live .pdp-coa-live__overlay-bar {
  display: flex;
  justify-content: flex-end;
  width: 90%;
  max-width: 900px;
  margin-bottom: 8px;
}

.pdp-coa-live a.pdp-coa-live__overlay-link {
  color: var(--checkout-bg);
  background: var(--checkout-text);
  font-size: 13px;
  text-decoration: none;
  margin-right: 16px;
}

.pdp-coa-live button.pdp-coa-live__overlay-close {
  color: var(--checkout-bg);
  background: var(--checkout-text);
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
}

.pdp-coa-live .pdp-coa-live__overlay-frame {
  width: 90%;
  max-width: 900px;
  height: 85vh;
  border: none;
  border-radius: 8px;
  background: var(--checkout-card-bg);
}

.pdp-coa-live .pdp-coa-live__actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.pdp-coa-live a.pdp-coa-live__link {
  color: var(--checkout-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--checkout-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.pdp-coa-live a.pdp-coa-live__cert {
  color: var(--checkout-text);
  font-size: 13px;
  text-decoration: none;
}

.pdp-coa-live a.pdp-coa-live__link:hover,
.pdp-coa-live a.pdp-coa-live__cert:hover { text-decoration-color: var(--checkout-text); }

.pdp-coa-live .pdp-coa-live__copy { margin: 0 0 12px; }
.pdp-coa-live .pdp-coa-live__copy--last { margin: 0; }

@media (max-width: 480px) {
  .pdp-coa-live .pdp-coa-live__grid { grid-template-columns: 1fr 1fr; }
}

/* ── shared/_coas_page — the Lab Results index (MyPeptides, SurfPeptides) ── */

.coas-page .coas-page__compound {
  color: var(--checkout-text);
  font-size: 13px;
  margin: 2px 0 4px;
}

.coas-page .coas-page__lab {
  margin: 32px 0 24px;
  padding: 20px;
  background: var(--checkout-summary-bg);
  border: 1px solid var(--checkout-border);
  border-left: 3px solid var(--checkout-success);
  border-radius: 12px;
}

.coas-page .coas-page__lab-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.coas-page .coas-page__lab-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--checkout-success);
  background: var(--checkout-card-bg);
  border: 1px solid var(--checkout-border);
  border-radius: 8px;
}

.coas-page .coas-page__lab-title {
  color: var(--checkout-text);
  background: var(--checkout-summary-bg);
  font-size: 15px;
  font-weight: 700;
}

.coas-page .coas-page__lab-method {
  color: var(--checkout-text);
  background: var(--checkout-summary-bg);
  font-size: 12px;
}

.coas-page .coas-page__lab-copy {
  color: var(--checkout-text);
  background: var(--checkout-summary-bg);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

/* ── Cart widgets: promo code, subscribe & save, shipping speed ────────────
   `_coupon_apply`, `_subscribe_picker` and `_shipping_picker` each chose a
   palette from a `theme:` local — and defaulted to DARK, so a light brand
   that forgot the local got PepRally's #1A1A20 panel. Their buttons were
   painted in an `accent_color:` hex the caller typed: Glam passed #C9A84C,
   white on gold at 2.2:1. They now paint from the brand's own tokens and
   are right on every brand whatever `theme:` says. A filled control is the
   page's own pair turned over — ink as ground, page as ink — AA by
   construction; the accent rides along as its border and focus ring. */

.sr-widget {
  margin: 16px 0;
  padding: 14px;
  background: var(--checkout-summary-bg);
  color: var(--checkout-text);
  border: 1px solid var(--checkout-border);
  border-radius: 6px;
}

.sr-widget .sr-widget__heading {
  color: var(--checkout-text);
  background: var(--checkout-summary-bg);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sr-widget .sr-widget__text {
  color: var(--checkout-text);
  background: var(--checkout-summary-bg);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 8px;
}

.sr-widget .sr-widget__note {
  color: var(--checkout-text);
  background: var(--checkout-summary-bg);
  font-size: 12px;
  margin: 8px 0 0;
}

.sr-widget .sr-widget__alert {
  color: var(--checkout-danger);
  background: var(--checkout-summary-bg);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 8px;
}

.sr-widget .sr-widget__success {
  color: var(--checkout-success);
  background: var(--checkout-summary-bg);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
}

.sr-widget .sr-widget__form {
  display: flex;
  gap: 8px;
}

.sr-widget input.sr-widget__input {
  flex: 1;
  /* A text input's intrinsic width is ~20 characters, and a flex item
     never shrinks below its intrinsic width unless told to — so beside
     the Apply button the pair was wider than a 360px phone and pushed
     the whole cart page sideways (bacwater.bio, peprally.bio, 2026-10-04).
     every_brand_page_fits_a_phone_test. */
  min-width: 0;
  padding: 8px 12px;
  color: var(--checkout-text);
  background: var(--checkout-input-bg);
  border: 1px solid var(--checkout-border);
  border-radius: 6px;
  font-size: 13px;
}

.sr-widget input.sr-widget__input:focus-visible {
  outline: 2px solid var(--checkout-accent);
  outline-offset: 1px;
}

.sr-widget button.sr-widget__button,
.sr-widget a.sr-widget__button {
  display: inline-block;
  flex: 0 0 auto;
  padding: 8px 16px;
  color: var(--checkout-bg);
  background: var(--checkout-text);
  border: 2px solid var(--checkout-accent);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.sr-widget button.sr-widget__button--block {
  width: 100%;
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sr-widget button.sr-widget__button:focus-visible,
.sr-widget a.sr-widget__button:focus-visible {
  outline: 2px solid var(--checkout-accent);
  outline-offset: 2px;
}

.sr-widget a.sr-widget__link {
  color: var(--checkout-text);
  background: var(--checkout-summary-bg);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--checkout-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.sr-widget .sr-widget__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.sr-widget .sr-widget__gap { margin: 0 6px; }
.sr-widget .sr-widget__gap--after { margin-left: 6px; }

/* Subscribe & save: one radio per cadence. */
.sr-widget .sr-widget__choice {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 6px;
  background: var(--checkout-summary-bg);
  border: 1px solid var(--checkout-border);
  border-radius: 6px;
  cursor: pointer;
}

.sr-widget .sr-widget__choice--on {
  background: var(--checkout-card-bg);
  border-color: var(--checkout-accent);
}

.sr-widget .sr-widget__choice-text {
  color: var(--checkout-text);
}

.sr-widget input.sr-widget__radio {
  margin-right: 10px;
  accent-color: var(--checkout-accent);
}

.sr-widget .sr-widget__badge {
  margin-left: 8px;
  padding: 2px 8px;
  color: var(--checkout-success);
  background: var(--checkout-card-bg);
  border: 1px solid var(--checkout-success);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

/* Shipping speed: radio + two lines. */
.sr-widget .sr-widget__option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
  margin-bottom: 9px;
}

.sr-widget .sr-widget__option-title {
  display: block;
  color: var(--checkout-text);
  background: var(--checkout-summary-bg);
  font-size: 14px;
  font-weight: 600;
}

.sr-widget .sr-widget__option-detail {
  display: block;
  color: var(--checkout-text);
  background: var(--checkout-summary-bg);
  font-size: 12px;
}

.sr-widget .sr-widget__option-tag {
  color: var(--checkout-text);
  background: var(--checkout-summary-bg);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--checkout-accent);
  text-underline-offset: 3px;
}

.sr-widget input.sr-widget__option-radio {
  margin-top: 3px;
  accent-color: var(--checkout-accent);
}

/* ── A discount on the cart page and in the drawer ─────────────────────── */

.sr-discount-line .sr-discount-line__label,
.sr-discount-line .sr-discount-line__amount {
  color: var(--checkout-success);
  font-size: 14px;
}

.sr-discount-line .sr-discount-line__amount { font-weight: 700; }

/* ── The empty cart's icon ─────────────────────────────────────────────── */

.sr-empty-icon.sr-empty-icon {
  color: var(--checkout-text);
  margin-bottom: 16px;
}

/* ── An inline refusal: "Currently out of stock" ───────────────────────── */

.sr-notice.sr-notice--danger {
  color: var(--checkout-danger);
  font-size: 14px;
  font-weight: 600;
  margin: 12px 0;
}

/* ── The drawer's quiet controls: "Remove" and the subscribe pitch ──────
   Both were painted in the caller's accent hex — Glam passes #C9A84C,
   2.2:1 on its own drawer. Doubled class: (0,2,0) beats `.brand p` and
   `.brand button` at (0,1,1). */

.sr-text-action.sr-text-action {
  color: var(--checkout-text);
  background: transparent;
  border: 0;
  padding: 3px 0;
  font-family: inherit;
  font-size: 11px;
  text-decoration: underline;
  text-decoration-color: var(--checkout-accent);
  text-underline-offset: 2px;
  cursor: pointer;
}

.sr-pitch.sr-pitch {
  color: var(--checkout-text);
  padding: 8px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
}

/* ── Checkout: the payment trust strip ─────────────────────────────────
   Was an inline <style> in the partial: the SSL line #059669 (2.4:1 on
   PepRally's dark checkout) and `var(--checkout-x, #literal)` fallbacks
   for tokens every brand already declares. */

.checkout-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px 0 8px;
  padding: 12px 0;
  border-top: 1px solid var(--checkout-border);
}

.checkout-trust-strip .checkout-trust-strip__cards {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkout-trust-strip .checkout-trust-strip__label {
  color: var(--checkout-text);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.checkout-trust-strip .checkout-trust-strip__badges {
  display: inline-flex;
  gap: 6px;
}

.checkout-trust-strip .checkout-trust-strip__badge {
  color: var(--checkout-text);
  padding: 3px 8px;
  border: 1.5px solid var(--checkout-border);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.checkout-trust-strip .checkout-trust-strip__sep {
  color: var(--checkout-text);
  font-size: 12px;
}

.checkout-trust-strip .checkout-trust-strip__ssl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--checkout-success);
  font-size: 12px;
  font-weight: 600;
}

.checkout-trust-strip .checkout-trust-strip__icon { flex-shrink: 0; }

/* ── Checkout messages: secure-payment panel, card errors, 3DS ──────────
   Doubled class (0,2,0) beats `.sr-checkout p` / `.sr-checkout h2`. */

.sr-checkout-msg.sr-checkout-msg--note {
  color: var(--checkout-text);
  margin-bottom: 2rem;
}

.sr-checkout-msg.sr-checkout-msg--danger-heading {
  color: var(--checkout-danger);
  margin-bottom: 1rem;
}

/* `display` is declared because #stripe-card-errors is rendered EMPTY and
   PepRally's theme ships `div:empty { display: none }` — the error Stripe
   writes into it would land in a box that paints nothing. The coupon error
   keeps its inline `display:none`, which outranks this until JS clears it. */
.sr-checkout-msg.sr-checkout-msg--error {
  display: block;
  color: var(--checkout-danger);
  font-size: 12px;
  margin: 6px 0 0;
}

.sr-checkout-msg.sr-checkout-msg--panel {
  text-align: center;
  padding: 28px 20px;
  margin: 0 0 16px;
  background: var(--checkout-summary-bg);
  border: 1px solid var(--checkout-border);
  border-top: 3px solid var(--checkout-success);
  border-radius: 10px;
}

.sr-checkout-msg .sr-checkout-msg__badge {
  margin: 0 auto 12px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--checkout-success);
  background: var(--checkout-card-bg);
  border: 1px solid var(--checkout-border);
  border-radius: 50%;
}

.sr-checkout-msg .sr-checkout-msg__title {
  color: var(--checkout-success);
  background: var(--checkout-summary-bg);
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.sr-checkout-msg .sr-checkout-msg__body {
  color: var(--checkout-text);
  background: var(--checkout-summary-bg);
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}