/* GlamPeptides storefront — design brief §1 palette + typography.
 *
 * Brief reference:
 *   Dropbox/Entities/StableResearch/Brands/GLAMPeptides/WIP/DesignBriefs/Web/GlamPeptides_Website_Brief.pdf
 *
 * Alternating dark/cream section rhythm. Dark = luxury atmosphere.
 * Cream = where dark vial packaging pops. Rose gold is the accent
 * everywhere; Champagne gold is for prices/sale badges.
 */

:root {
  /* Dark zone */
  --glam-matte-black: #0D0D0D;
  --glam-carbon:      #111116;
  --glam-deep-wine:   #4A0E2E;
  --glam-white:       #FFFFFF;
  --glam-warm-gray:   #A3A3A3;

  /* Light zone */
  --glam-warm-cream:    #FBF7F2;
  --glam-soft-blush:    #E8D5CE;
  --glam-deep-espresso: #2C2018;

  /* Accents */
  --glam-rose-gold:      #B76E79;
  --glam-champagne-gold: #D4AF76;

  /* The accents as INK. Rose Gold and Champagne are fills and rules on
     this brand; as text on the cream page they measure 3.57:1 and
     1.93:1 — the product page's dose line was effectively invisible.
     These are the same hues taken dark enough to read (measured on
     #FBF7F2 / #FFFFFF): rose 5.19 / 5.54, gold 5.13 / 5.48, and a warm
     muted 5.54 / 5.91 for the small print that used to be espresso at
     40–50% alpha (2.39:1) or the template's #989898 (2.70:1).
     Guarded by pdp_contrast_guard_test. */
  --glam-rose-ink:  #925861;
  --glam-gold-ink:  #86632C;
  --glam-ink-muted: #6E6259;

  /* Type scale — brief §1.2 */
  --glam-font-display: "Playfair Display", Georgia, serif;
  --glam-font-body:    "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

/* Defer body bg + body text color to Vela cosmetic02's tokens.css
   (warm cream bg, deep-espresso text). Earlier glam.css used to force
   matte-black body bg, but that fights the bought template — every
   Vela section expects a light canvas to read against. We only set the
   shared font + smoothing globally; palette comes from tokens.css. */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--glam-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.glam {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  --checkout-accent: #B76E79;
  --checkout-accent-hover: #A35D68;
  --checkout-accent-glow: rgba(183, 110, 121, 0.15);
  --brand-accent: #B76E79;

  /* CTA fill, deliberately darker than --checkout-accent.
     Rose Gold #B76E79 carries white text at only 3.80:1 — below WCAG AA
     (4.5:1). This is the same defect PepRally already carries a token
     for: its #E8550F measured 3.66:1, so `--cta-accent: #C1470C` was
     added on 2026-09-01 at the same hue, 83% lightness, 5.03:1.
     #925861 is Rose Gold at 80% and carries white at 5.54:1 — margin
     over the threshold rather than sitting on it, so browser rounding
     cannot drop it under.
     Confined to the CTA, so the brand accent is unchanged everywhere
     else; nothing in this sheet read --cta-accent before, so declaring
     it changes no existing rule.
     Guarded by auth_contrast_guard_test, which measured the 3.80 and
     named this file as where the fix belongs. */
  --cta-accent: #925861;
  --checkout-bg: #FBF7F2;
  --checkout-text: #2C2018;
  --checkout-success: #047857; /* a PASS, as ink: >=4.74:1 on page, card and summary ground — shared/brand_partials.css */
  --checkout-danger: #B91C1C; /* a refusal, as ink: >=5.59:1 on page, card and summary ground — shared/brand_partials.css */
  --checkout-muted: #8a7e72;
  --checkout-border: #E8D5CE;
  --checkout-summary-bg: #F5EDE6;
  --checkout-input-bg: #ffffff;
  --checkout-card-bg: #ffffff;
  --checkout-card-shadow: 0 2px 8px rgba(44,32,24,0.06), 0 8px 32px rgba(44,32,24,0.08);
  --checkout-font-display: "Playfair Display", Georgia, serif;
  --checkout-font-body: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
}
main { flex: 1; }

/* Home 3-col USP block subheadings — match the Vela footer
 * .velaFooterTitle treatment (Playfair Display 30/400, espresso) so
 * the typography reads consistently across the page. WHY not just
 * inherit Vela h3 default: Vela h3 default is the Sans body font;
 * the operator wants the secondary-display serif here for editorial
 * weight on the 3 trust pillars. */
.glam-home-features__title {
  font-family: var(--glam-font-display);
  font-weight: 400;
  font-size: 30px;
  color: var(--glam-deep-espresso);
  margin: 0 0 12px;
  letter-spacing: 0;
}

/* Footer — brief §2.2 Footer (DARK). RUO + FDA disclaimers are
 * non-negotiable for regulatory compliance; every page carries them. */
.brand-footer {
  background: var(--glam-matte-black);
  color: var(--glam-warm-gray);
  padding: 3rem 2rem 2rem;
  border-top: 1px solid rgba(183, 110, 121, 0.2);
}
.brand-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.brand-footer__ruo,
.brand-footer__fda {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
  /* RUO line is 67 chars: "All products are for research use only.
     Not for human consumption." With letter-spacing 0.14em, the
     prior 60ch cap forced a 2-line wrap. Bumping to 80ch lets the
     RUO line render as a single line at desktop widths while still
     keeping the FDA line (~50 chars) tightly framed. Mobile still
     wraps naturally because viewport width takes over below ~600px. */
  max-width: 80ch;
}
.brand-footer__ruo { white-space: nowrap; }
@media (max-width: 700px) {
  .brand-footer__ruo { white-space: normal; }
}
/* Solid warm gray: 7.70:1 on the matte-black footer. At 70% alpha it
   was 4.25:1 (measured 2026-10-03). */
.brand-footer__fda { color: var(--glam-warm-gray); }
.brand-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
  margin: 0 0 1.5rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid rgba(183, 110, 121, 0.12);
  width: 100%;
  max-width: 1100px;
}
.brand-footer__nav a {
  color: var(--glam-warm-gray);
  text-decoration: none;
  font-family: var(--glam-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.brand-footer__nav a:hover,
.brand-footer__nav a:focus { color: var(--glam-rose-gold); }

/* Content pages — FAQ, About, Shipping, Legal, Contact. Cream
 * section on dark chrome: brief §1 alternating rhythm. Long-form
 * reading layout with measured column width and generous line
 * height. */
.glam-content {
  background: var(--glam-warm-cream);
  color: var(--glam-deep-espresso);
  padding: 5rem 1.5rem 6rem;
}
.glam-content__inner {
  max-width: 720px;
  margin: 0 auto;
}
.glam-content__title {
  font-family: var(--glam-font-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  letter-spacing: -0.01em;
  color: var(--glam-deep-espresso);
  margin: 0 0 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--glam-rose-gold);
}
.glam-content__body {
  font-family: var(--glam-font-body);
  font-size: 1rem;
  line-height: 1.75;
}
.glam-content__body h2 {
  font-family: var(--glam-font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--glam-deep-wine);
  margin: 2.5rem 0 0.75rem;
}
.glam-content__body h3 {
  font-family: var(--glam-font-body);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--glam-deep-espresso);
  margin: 1.75rem 0 0.5rem;
}
.glam-content__body p { margin: 0 0 1.1rem; }
.glam-content__body ul { margin: 0.25rem 0 1.25rem; padding-left: 1.4rem; }
.glam-content__body li { margin-bottom: 0.45rem; }
.glam-content__body a {
  color: var(--glam-rose-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.glam-content__body a:hover { color: var(--glam-deep-wine); }
.glam-content__body address {
  font-style: normal;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.glam-content__lede {
  font-family: var(--glam-font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--glam-rose-gold);
  margin: 0 0 2rem;
}
.glam-content__notice {
  background: rgba(183, 110, 121, 0.08);
  border-left: 3px solid var(--glam-rose-gold);
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
  font-size: 16px;
  color: var(--glam-deep-espresso);
}

.brand-footer__copy {
  font-size: 13px;
  margin: 0.75rem 0 0;
  color: var(--glam-warm-gray);
}

/* Age gate — brief §2.1. Full-viewport overlay with blurred scrim and
 * centered card. No JS: the form POST handles acknowledgement and the
 * server sets the 30-day cookie. */
.glam-age-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.glam-age-gate__scrim {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.glam-age-gate__card {
  position: relative;
  background: var(--glam-carbon);
  color: var(--glam-white);
  border: 1px solid rgba(183, 110, 121, 0.35);
  border-radius: 2px;
  padding: 3rem 2.5rem 2.5rem;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.glam-age-gate__wordmark {
  font-family: var(--glam-font-display);
  font-size: 1.5rem;
  color: var(--glam-rose-gold);
  margin: 0 0 1.5rem;
}
.glam-age-gate__wordmark sup { font-size: 0.4em; vertical-align: super; }
.glam-age-gate__heading {
  font-family: var(--glam-font-display);
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 1rem;
  letter-spacing: 0.01em;
  /* Vela's `h1, h2, ... { color: var(--vela-text-color-secondary) }`
     applies a near-black color to the heading and wins over the
     parent .glam-age-gate__card's `color: var(--glam-white)` because
     element-typed selectors (h2) are evaluated above inheritance.
     Explicit color here pins the modal heading to white so it reads
     against the Carbon-black card background. */
  color: var(--glam-white);
}
.glam-age-gate__body {
  color: var(--glam-warm-gray);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 2rem;
}
.glam-age-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.glam-age-gate__btn {
  font-family: var(--glam-font-body);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.95rem 1.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.glam-age-gate__btn--primary {
  background: var(--glam-rose-gold);
  color: var(--glam-matte-black);
}
.glam-age-gate__btn--primary:hover { background: var(--glam-champagne-gold); }
.glam-age-gate__btn--ghost {
  background: transparent;
  color: var(--glam-warm-gray);
  border-color: rgba(163, 163, 163, 0.4);
}
.glam-age-gate__btn--ghost:hover {
  color: var(--glam-white);
  border-color: var(--glam-white);
}
.glam-age-gate__legal {
  font-size: 12px;
  color: rgba(163, 163, 163, 0.7);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.6;
}

/* Age-blocked exit page — reuses the hero layout with a dimmer cast. */
.glam-age-blocked__body {
  color: var(--glam-warm-gray);
  font-size: 1rem;
  max-width: 52ch;
  margin: 1.5rem auto 0;
  line-height: 1.7;
}

/* Shop / Collection — brief §2.3. CREAM zone: warm cream background
 * so dark matte-black vial packaging with rose-gold caps pops. */
.glam-shop {
  background: var(--glam-warm-cream);
  color: var(--glam-deep-espresso);
  padding: 4rem 2rem 5rem;
}
.glam-shop__header {
  max-width: 1200px;
  margin: 0 auto 3rem;
  text-align: center;
}
.glam-shop__heading {
  font-family: var(--glam-font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  margin: 0 0 0.75rem;
  color: var(--glam-deep-espresso);
}
/* Quiet copy on this cream page is --glam-ink-muted (5.54:1), never
   espresso at alpha: the subhead (60%) read 4.18:1, the filters (55%)
   3.64:1, the RUO note (50%) 3.14:1 — measured 2026-10-03. */
.glam-shop__subhead {
  color: var(--glam-ink-muted);
  font-size: 16px;
  letter-spacing: 0.02em;
  margin: 0;
}
.glam-shop__filters {
  max-width: 1200px;
  margin: 0 auto 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(44, 32, 24, 0.1);
  border-bottom: 1px solid rgba(44, 32, 24, 0.1);
}
.glam-shop__filter {
  font-family: var(--glam-font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--glam-ink-muted);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
/* Rose as INK is --glam-rose-ink (5.54:1 on white); the raw Rose Gold is
   3.80:1 and stays a rule colour. */
.glam-shop__filter:hover {
  color: var(--glam-rose-ink);
}
.glam-shop__filter--active {
  color: var(--glam-rose-ink);
  border-color: var(--glam-rose-gold);
}
.glam-shop__grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1200px;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .glam-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .glam-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.glam-card {
  background: var(--glam-white);
  border: 1px solid rgba(44, 32, 24, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.glam-card:hover {
  border-color: var(--glam-rose-gold);
  box-shadow: 0 18px 40px rgba(44, 32, 24, 0.12);
  transform: translateY(-3px);
}
.glam-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.glam-card__image-frame {
  aspect-ratio: 4 / 5;
  background: var(--glam-soft-blush);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.glam-card__image-placeholder {
  font-family: var(--glam-font-display);
  font-size: 1.75rem;
  color: rgba(44, 32, 24, 0.4);
  letter-spacing: 0.02em;
}
.glam-card__body { padding: 1.5rem 1.25rem 1.75rem; }
.glam-card__name {
  font-family: var(--glam-font-body);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0 0 0.25rem;
  color: var(--glam-deep-espresso);
}
.glam-card__tagline {
  font-family: var(--glam-font-body);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--glam-rose-gold);
  margin: 0 0 0.75rem;
}
.glam-card__descriptor,
.glam-card__dose {
  font-size: 14px;
  color: rgba(44, 32, 24, 0.65);
  margin: 0 0 0.25rem;
  line-height: 1.5;
}
.glam-card__price {
  font-family: var(--glam-font-body);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--glam-champagne-gold);
  margin: 1rem 0 0;
}
.glam-shop__ruo-note {
  max-width: 640px;
  margin: 3rem auto 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--glam-ink-muted);
  line-height: 1.7;
}

/* PDP — brief §2.4. Split layout: cream image frame on the left,
 * info card on the right. Below-fold: stacked detail sections
 * (JS-less "tab" alternative). Related-products row at the bottom. */
.glam-pdp { background: var(--glam-warm-cream); }
.glam-pdp .container { max-width: 1120px; }
.glam-pdp .proBoxPrimary { padding: 2rem 0 0; }
.glam-pdp .proBoxImage { padding-bottom: 0 !important; }
.glam-pdp .rowFlex { align-items: flex-start; }
.glam-pdp .proBoxInfo {
  padding: 2rem 0 2rem 2.5rem;
  border-left: 1px solid rgba(44, 32, 24, 0.08);
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .glam-pdp .proBoxInfo {
    padding: 1.5rem 0 0;
    border-left: none;
    border-top: 1px solid rgba(44, 32, 24, 0.08);
    margin-top: 0.5rem;
  }
}
.glam-pdp__ruo-badge {
  align-self: flex-start;
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid rgba(163, 163, 163, 0.35);
  padding: 0.3rem 0.7rem;
  margin: 0 0 1.25rem;
}
/* The colour lives on a (0,3,0) selector: the template's
   `.proBoxInfo .productType { color: #989898 }` is (0,2,0) and beat the
   single-class rule above, so the badge rendered #989898 at 2.70:1 while
   this sheet's own declaration sat unused. */
.glam-pdp .proBoxInfo .glam-pdp__ruo-badge { color: var(--glam-ink-muted); }
.glam-pdp__name {
  font-family: var(--glam-font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  color: var(--glam-deep-espresso);
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}
.glam-pdp .proPrice {
  margin: 0.5rem 0 0.75rem;
}
.glam-pdp .priceSale {
  font-family: var(--glam-font-body);
  font-weight: 600;
  font-size: 1.75rem;
  color: var(--glam-deep-espresso);
}
.glam-pdp__tagline {
  font-family: var(--glam-font-body);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--glam-rose-ink);
  margin: 0 0 0.25rem;
}
.glam-pdp__descriptor {
  color: rgba(44, 32, 24, 0.65);
  font-size: 15px;
  margin: 0;
  line-height: 1.6;
}
.glam-pdp__dose {
  color: var(--glam-gold-ink);
  font-family: var(--glam-font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.05em;
  margin: 0.25rem 0 0;
}
.glam-pdp__price {
  color: var(--glam-champagne-gold);
  font-family: var(--glam-font-body);
  font-weight: 600;
  font-size: 2rem;
  margin: 1rem 0 1.5rem;
}
.glam-pdp__cart-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.glam-pdp__qty-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--glam-ink-muted);
}
/* The stepper's buttons inherit `color` from the label; give them the
   page's own ink rather than the muted label tone. A disabled step keeps
   the partial's opacity — an inactive control is meant to read as one. */
.glam-pdp .glam-pdp__qty-label .sr-qty__btn { color: var(--glam-deep-espresso); }
.glam-pdp__qty-input {
  width: 72px;
  padding: 0.65rem 0.5rem;
  background: #FFFFFF;
  color: var(--glam-matte-black);
  border: 1px solid rgba(44, 32, 24, 0.2);
  border-radius: 2px;
  font-family: var(--glam-font-body);
  font-size: 1rem;
  text-align: center;
}
.glam-pdp__qty-input:focus {
  outline: 2px solid var(--glam-rose-gold);
  outline-offset: -1px;
}
.glam-pdp__cart-button {
  flex: 1;
  min-width: 180px;
  /* --cta-accent, never the raw Rose Gold: white on #B76E79 is 3.80:1,
     on #925861 5.54:1. The token was declared for exactly this button. */
  background: var(--cta-accent);
  color: #FFFFFF;
  font-family: var(--glam-font-body);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0.85rem 1.5rem;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.25s ease;
}
.glam-pdp__cart-button:hover { background: var(--glam-deep-wine); color: #FFFFFF; }
.glam-pdp__cart-button:focus-visible { outline: 2px solid var(--glam-champagne-gold); outline-offset: 2px; }
.glam-pdp__cart-button:disabled { opacity: 0.6; cursor: wait; }
.glam-pdp .glam-pdp__bundle-bacwater {
  font-size: 13px;
  color: rgba(44, 32, 24, 0.7);
  padding: 8px 0;
  gap: 8px;
}

.glam-pdp__details {
  max-width: 1120px;
  margin: 2.5rem auto 0;
  padding: 2rem 2rem 0;
  color: var(--glam-deep-espresso);
  border-top: 1px solid rgba(44, 32, 24, 0.08);
}
.glam-pdp__details .tab-content {
  display: grid;
  gap: 2rem;
}
.glam-pdp__detail-heading {
  font-family: var(--glam-font-display);
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
  color: var(--glam-deep-espresso);
  letter-spacing: -0.005em;
}
.glam-pdp__detail-body {
  line-height: 1.75;
  max-width: 68ch;
  color: rgba(44, 32, 24, 0.75);
  font-size: 16px;
}
.glam-pdp__detail-note {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--glam-ink-muted);
  max-width: 68ch;
  line-height: 1.7;
  margin: 0.75rem 0 0;
}
.glam-pdp__detail-cta {
  color: var(--glam-rose-gold);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.glam-pdp__detail-cta:hover { border-bottom-color: var(--glam-rose-gold); }
.glam-pdp__detail-cta-row { margin: 0.75rem 0 0; }

.glam-pdp__related {
  max-width: 1120px;
  margin: 3rem auto 0;
  padding: 2.5rem 2rem 4rem;
  border-top: 1px solid rgba(44, 32, 24, 0.08);
}
.glam-pdp__related-heading {
  font-family: var(--glam-font-display);
  font-weight: 600;
  font-size: 1.5rem;
  text-align: center;
  color: var(--glam-deep-espresso);
  margin: 0 0 2rem;
  letter-spacing: -0.005em;
}
/* A related card's frame is a deliberate tile before its photograph
   paints, never an empty white box. */
.glam-pdp__related .proHImage { background: var(--glam-warm-cream); }
.glam-pdp__related-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.glam-pdp .pdp-gallery__thumb {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: 2px;
}
.glam-pdp .pdp-gallery__main img {
  border-radius: 2px;
}
/* Quietened with a colour, not opacity: espresso at 70% opacity read
   4.17:1 on the cream page; --glam-ink-muted is 5.54:1. */
.glam-pdp .sr-trust-row {
  font-size: 12px;
  color: var(--glam-ink-muted);
  margin: 12px 0 4px;
  padding: 12px 0;
}
.glam-pdp .dose-pillbox__wrap { margin: 0.5rem 0 0; }
.glam-pdp .pdp-bulk-tiers { margin: 10px 0 0; }

/* Cart — brief §2.9. Defer bg + text color to Vela cart.liquid styling
 * (light canvas, dark text). Earlier we forced carbon bg + white text
 * which produced black-on-black "Your Cart" heading. */
.glam-cart {
  min-height: 70vh;
  padding: 4rem 2rem 5rem;
}
.glam-cart__header {
  max-width: 900px;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.glam-cart__heading {
  font-family: var(--glam-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin: 0;
}
.glam-cart__list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 900px;
  border-top: 1px solid rgba(163, 163, 163, 0.25);
}
.glam-cart__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 2rem;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(163, 163, 163, 0.15);
}
.glam-cart__row-name {
  font-family: var(--glam-font-body);
  font-weight: 600;
  font-size: 1.125rem;
  margin: 0 0 0.25rem;
}
.glam-cart__row-descriptor {
  font-size: 14px;
  color: var(--glam-warm-gray);
  margin: 0;
}
.glam-cart__row-qty {
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--glam-warm-gray);
  margin: 0;
}
.glam-cart__row-price {
  font-family: var(--glam-font-body);
  font-weight: 600;
  color: var(--glam-champagne-gold);
  font-size: 1.125rem;
  margin: 0;
}
.glam-cart__summary {
  max-width: 900px;
  margin: 2.5rem auto 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 2rem;
  align-items: center;
}
.glam-cart__subtotal-label {
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--glam-warm-gray);
  margin: 0;
}
.glam-cart__subtotal-value {
  font-family: var(--glam-font-body);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--glam-champagne-gold);
  margin: 0;
  text-align: right;
}
.glam-cart__checkout-btn {
  grid-column: 1 / -1;
  text-align: center;
  background: var(--glam-rose-gold);
  color: var(--glam-matte-black);
  font-family: var(--glam-font-body);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 1.1rem 1.5rem;
  text-decoration: none;
  transition: background 0.2s ease;
  margin-top: 1.25rem;
}
.glam-cart__checkout-btn:hover { background: var(--glam-champagne-gold); }
.glam-cart__continue-link {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--glam-warm-gray);
  text-decoration: underline;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.glam-cart__continue-link--primary {
  display: inline-block;
  margin-top: 1.5rem;
  background: var(--glam-rose-gold);
  color: var(--glam-matte-black);
  text-decoration: none;
  padding: 0.95rem 2rem;
  font-weight: 600;
  letter-spacing: 0.15em;
}
.glam-cart__empty {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 4rem 2rem;
}
.glam-cart__empty-msg {
  font-family: var(--glam-font-display);
  font-size: 1.5rem;
  color: var(--glam-warm-gray);
  margin: 0;
}

/* Lab Results / Certificates index page — process-on-display layout.
 * Cream zone with restrained typography; the data IS the design.
 * Patterned after industry best practice (Oath Research) but in the
 * Glam palette: deep-espresso text, rose-gold accents, warm-cream
 * background. */
.glam-coas {
  background: var(--glam-warm-cream);
  color: var(--glam-deep-espresso);
  padding: 5rem 1.5rem 6rem;
}
.glam-coas__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.glam-coas__header {
  text-align: center;
  margin-bottom: 3.5rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--glam-rose-gold);
}
.glam-coas__title {
  font-family: var(--glam-font-display);
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}
.glam-coas__lede {
  font-family: var(--glam-font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
  color: var(--glam-deep-espresso);
}

/* Hero stats row — facts, not marketing. Each stat is a stacked
 * value/label pair, equal weight, no decoration. */
.glam-coas__stats {
  list-style: none;
  padding: 0;
  margin: 0 0 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  text-align: center;
}
.glam-coas__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.75rem 1rem;
  border: 1px solid rgba(183, 110, 121, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
}
.glam-coas__stat-value {
  font-family: var(--glam-font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--glam-deep-wine);
  line-height: 1;
}
.glam-coas__stat-label {
  font-family: var(--glam-font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--glam-warm-gray);
  color: rgba(44, 32, 24, 0.65);
}
.glam-coas__empty {
  font-family: var(--glam-font-body);
  font-size: 1rem;
  color: var(--glam-warm-gray);
  text-align: center;
  margin: 3rem 0 4rem;
  padding: 3rem 1.5rem;
  border: 1px dashed rgba(183, 110, 121, 0.3);
  background: rgba(255, 255, 255, 0.5);
}
.glam-coas__empty a {
  color: var(--glam-rose-gold);
  text-decoration: underline;
}

/* Product grid — one card per peptide with at least one approved
 * batch. Cards are visually quiet so the data dominates. */
.glam-coas__grid {
  list-style: none;
  padding: 0;
  margin: 0 0 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.glam-coas__card {
  background: #fff;
  border: 1px solid rgba(44, 32, 24, 0.08);
  border-radius: 6px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.glam-coas__card:hover {
  border-color: var(--glam-rose-gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(184, 134, 11, 0.15);
}
.glam-coas__card-title {
  font-family: var(--glam-font-display);
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0;
  text-align: center;
  color: var(--glam-deep-espresso);
}
.glam-coas__card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  margin: 0;
  font-family: var(--glam-font-body);
  font-size: 14px;
}
.glam-coas__card-meta div { display: flex; flex-direction: column; gap: 0.15rem; }
.glam-coas__card-meta dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--glam-ink-muted); /* 5.91:1 on the white card; 55% espresso was 3.64:1 */
  margin: 0;
}
.glam-coas__card-meta dd {
  font-weight: 500;
  margin: 0;
  color: var(--glam-deep-espresso);
}
.glam-coas__pass { color: #2d8a4e; font-weight: 600; }
.glam-coas__card-cta {
  align-self: flex-start;
  font-family: var(--glam-font-body);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--glam-rose-ink); /* 5.54:1 on the white card; raw Rose Gold 3.80:1 */
  text-decoration: none;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(183, 110, 121, 0.15);
  width: 100%;
  transition: color 0.2s ease;
}
.glam-coas__card-cta:hover { color: var(--glam-deep-wine); }
.glam-coas__note {
  font-family: var(--glam-font-body);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(44, 32, 24, 0.65);
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(44, 32, 24, 0.08);
}

/* Per-product COA history — newest-first table view. Same cream
 * surface as /coas, table-driven so every batch is line-comparable. */
.glam-coa-history {
  background: var(--glam-warm-cream);
  color: var(--glam-deep-espresso);
  padding: 5rem 1.5rem 6rem;
}
.glam-coa-history__inner {
  max-width: 960px;
  margin: 0 auto;
}
.glam-coa-history__header {
  margin-bottom: 3rem;
  padding-bottom: 1.75rem;
  border-bottom: 2px solid var(--glam-rose-gold);
}
.glam-coa-history__breadcrumb {
  font-family: var(--glam-font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.glam-coa-history__breadcrumb a {
  color: var(--glam-rose-gold);
  text-decoration: none;
}
.glam-coa-history__breadcrumb a:hover { color: var(--glam-deep-wine); }
.glam-coa-history__title {
  font-family: var(--glam-font-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
.glam-coa-history__sku {
  font-family: var(--glam-font-body);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(44, 32, 24, 0.55);
  margin: 0;
}
.glam-coa-history__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--glam-font-body);
  font-size: 15px;
  background: #fff;
  border: 1px solid rgba(44, 32, 24, 0.08);
}
.glam-coa-history__table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(44, 32, 24, 0.55);
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(44, 32, 24, 0.08);
  font-weight: 500;
}
.glam-coa-history__table td {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(44, 32, 24, 0.05);
}
.glam-coa-history__table tr:last-child td { border-bottom: none; }
.glam-coa-history__table tbody tr {
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.glam-coa-history__table tbody tr:hover {
  background: rgba(184, 134, 11, 0.06);
  box-shadow: 0 0 12px rgba(184, 134, 11, 0.15);
}
.glam-coa-history__batch-id {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
}
.glam-coa-history__pass { color: #2d8a4e; font-weight: 600; }
.glam-coa-history__row-cta {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--glam-rose-gold);
  text-decoration: none;
}
.glam-coa-history__row-cta:hover { color: var(--glam-deep-wine); }
.glam-coa-history__empty {
  font-family: var(--glam-font-body);
  font-size: 1rem;
  color: var(--glam-warm-gray);
  text-align: center;
  margin: 3rem 0;
  padding: 3rem 1.5rem;
  border: 1px dashed rgba(183, 110, 121, 0.3);
  background: rgba(255, 255, 255, 0.5);
}
.glam-coa-history__note {
  font-family: var(--glam-font-body);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(44, 32, 24, 0.65);
  max-width: 720px;
  margin: 3rem auto 0;
  text-align: center;
}

/* PDP detail-section CTA — quietly accents the COA-history link
 * without competing with the Add-to-Cart button. */
.glam-pdp__detail-cta-row {
  margin: 1rem 0 0;
}
.glam-pdp__detail-cta {
  font-family: var(--glam-font-body);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--glam-rose-gold);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}
.glam-pdp__detail-cta:hover { color: var(--glam-champagne-gold); }

/* ----- Vela footer — dark luxury palette override --------------------
 * vela-site.css hardcodes `background-color: white` on #velaFooter.
 * !important wins Vela's specificity so the footer stays dark.
 */
body.glam #velaFooter {
  background-color: var(--glam-carbon) !important;
  color: rgba(251, 247, 242, 0.7) !important;
}
body.glam .velaFooterTitle {
  color: var(--glam-white) !important;
  font-family: var(--glam-font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.glam .velaFooterMenu .velaFooterList a,
body.glam .velaFooterMenu a,
body.glam .vela-contactinfo a,
body.glam .velaFooterList a,
body.glam .velaBlock a {
  color: rgba(251, 247, 242, 0.6) !important;
  text-decoration: none;
  transition: color 0.15s ease;
}
body.glam .velaFooterMenu .velaFooterList a:hover,
body.glam .velaFooterMenu a:hover,
body.glam .vela-contactinfo a:hover,
body.glam .velaFooterList a:hover,
body.glam .velaBlock a:hover {
  color: var(--glam-rose-gold) !important;
}
/* The carbon footer's copyright line: cream at 35% read 3.06:1. Warm
   gray is 7.46:1 on --glam-carbon. */
body.glam .velaCopyRight {
  color: var(--glam-warm-gray) !important;
  border-top-color: rgba(183, 110, 121, 0.15) !important;
}
body.glam .footerCenterInner {
  border-top-color: rgba(183, 110, 121, 0.2);
  padding-top: 48px;
  padding-bottom: 24px;
}
body.glam .contacinfo-desc {
  color: rgba(251, 247, 242, 0.55);
  font-family: var(--glam-font-body);
  font-size: 14px;
  line-height: 1.6;
}

/* Ensure feature-text section + product cards have readable contrast.
 * Vela defaults are dark text on white, our cream body bg keeps that
 * readable, but explicit defensive rule for the headings. */
.velaFeatureText,
.velaListProductList {
  color: var(--vela-text-color-primary);
}
/* "The Collection" featured-products heading + lede inherit the same
 * Playfair-display treatment as the 3-col USP block subheadings. */
.velaFeatureBlockTitle h3,
.velaListHeading,
.velaListLede {
  color: var(--vela-text-color-secondary);
}
.velaListHeading {
  font-family: var(--glam-font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 44px);
  letter-spacing: 0;
  margin: 0 0 8px;
}
.velaListLede {
  font-family: var(--glam-font-body);
  font-size: 16px;
  color: var(--glam-deep-espresso);
  opacity: 0.78;
  max-width: 640px;
  margin: 0 auto 32px;
}

/* Hero → 3-col → featured-products section rhythm. Operator
 * (2026-05-04): 'decrease the space between the 3 col and The
 * Collection on the front page of glam'. Reduced bottom-of-3-col
 * + top-of-collection so the two sections sit closer together. */
.velaFeatureText.glam-home-features {
  padding: 80px 0 24px;
}
.velaProductList.glam-home-featured {
  padding: 8px 0 80px;
}

/* Vela's stock .proList has overflow:hidden (clearfix-era pattern),
 * which on the operator's report (2026-05-04 wd2) was clipping the
 * rose-gold hover glow off the LEFT and RIGHT of every card so the
 * shadow read like a half-glow. We don't need that clearfix because
 * the inner .rowFlex is flexbox. Open the row so box-shadow can
 * render outside the row bounds. Container padding still keeps
 * cards from kissing the viewport edge. */
.glam .proList,
.glam .collBoxProducts {
  overflow: visible;
}
.glam .velaProductList.glam-home-featured .container,
.glam .collection-container {
  /* small horizontal cushion so the glow has room to render at
   * the leftmost / rightmost cards without being cut by .container's
   * boundary; .container's max-width still centers the grid. */
  padding-left: 32px;
  padding-right: 32px;
}

/* Shop + featured product card chrome. WHY: in the bare Vela default
 * each card was just stacked text on the page background, so the eye
 * read the price as belonging to the next row. Now each card is its
 * own translucent tile with a soft blush border, letting the price
 * sit clearly inside its own card with a thin top divider.
 *
 * Hover lift: the bare Vela default had no hover treatment after we
 * stripped the jQuery hover-overlay JS during chrome ingestion.
 * Restore visual feedback via a CSS-only translateY + shadow pop. */
.glam .velaProBlock {
  margin-bottom: 48px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(232, 213, 206, 0.55);
  border-radius: 4px;
  padding: 0 0 16px;
  box-shadow: 0 2px 16px rgba(13, 13, 13, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              border-color 0.25s ease;
}
/* Hover state — operator (2026-05-04): 'can you make the glow around
 * the mouseover or selected product rosegold? more glow shadow'.
 * Two-layer rose-gold glow: outer soft halo + inner crisp ring. */
.glam .velaProBlock:hover,
.glam .velaProBlock:focus-within {
  transform: translateY(-3px);
  border-color: rgba(183, 110, 121, 0.85);
  box-shadow:
    0 0 0 1px rgba(183, 110, 121, 0.35),
    0 16px 48px rgba(183, 110, 121, 0.32),
    0 4px 18px rgba(183, 110, 121, 0.22);
}
.glam .velaProBlock .proPrice {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(232, 213, 206, 0.42);
}
/* Price stays in the brand rose-gold (champagne register, not the
 * generic espresso body color) so it reads as the deliberate price
 * accent — same color as on the PDP. */
.glam .velaProBlock .priceProduct,
.glam .velaProBlock .priceSale {
  font-family: var(--glam-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--glam-rose-ink);
  letter-spacing: 0.02em;
}


/* =============================================================================
   GlamPeptides — Safety Data Sheet pages
   =============================================================================
   Per-chemistry SDS library at /glam/sds (index) and /glam/sds/:key (show).
   Champagne palette: Playfair Display serif headings, espresso revision
   stamp on warm-cream canvas. Mirrors the COA library's typographic
   register but with a more documentary feel — labs and ops read these,
   not customers shopping the shop grid.
   ============================================================================= */
.glam .glam-sds-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}
.glam .glam-sds-page h1,
.glam .glam-sds-page h2,
.glam .glam-sds-page h3 {
  font-family: var(--glam-font-display);
  color: var(--glam-deep-espresso);
  letter-spacing: 0.01em;
}
.glam .glam-sds__card {
  background: var(--glam-warm-cream);
  border: 1px solid rgba(232, 213, 206, 0.6);
  border-radius: 6px;
  padding: 28px 24px;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.glam .glam-sds__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(183, 110, 121, 0.18);
}
.glam .glam-sds__card-meta {
  margin: 16px 0 24px;
  font-size: 13px;
  color: var(--glam-deep-espresso);
  font-family: var(--glam-font-body);
}
.glam .glam-sds__card-meta dt {
  display: inline-block;
  margin-right: 6px;
  color: var(--glam-warm-gray);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.glam .glam-sds__card-meta dd {
  display: inline-block;
  margin: 0 0 4px 0;
  color: var(--glam-deep-espresso);
}
.glam .glam-sds-detail__crumb {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--glam-warm-gray);
  margin-bottom: 12px;
}
.glam .glam-sds-detail__crumb a {
  color: var(--glam-rose-gold);
  text-decoration: none;
}
.glam .glam-sds-detail__meta {
  font-family: var(--glam-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--glam-deep-espresso);
  border-top: 1px solid var(--glam-rose-gold);
  border-bottom: 1px solid var(--glam-rose-gold);
  padding: 8px 0;
  display: inline-block;
  letter-spacing: 0.04em;
}
.glam .glam-sds-detail__body section {
  margin: 28px 0;
  padding: 20px 24px;
  background: rgba(251, 247, 242, 0.6);
  border-left: 3px solid var(--glam-champagne-gold);
}
.glam .glam-sds-detail__body section h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 18px;
  color: var(--glam-deep-espresso);
}
.glam .glam-sds-detail__body p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--glam-deep-espresso);
}
.glam .glam-sds-detail__note,
.glam .glam-sds__note,
.glam .glam-sds__empty {
  font-size: 12px;
  color: var(--glam-warm-gray);
  letter-spacing: 0.04em;
}

/* Trademark superscript on protectable brand-name product titles.
   See app/helpers/brand_trademark_helper.rb for the rationale. The
   superscript inherits the parent color but sits at the top of the
   line — slightly muted so the wordmark still leads visually. */
.brand-tm {
  font-size: 0.45em;
  vertical-align: super;
  line-height: 0;
  letter-spacing: 0;
  margin-left: 0.1em;
  opacity: 0.75;
  font-weight: 500;
}

/* Layout container for the .vela-page page-content body. Operator
   follow-up 2026-05-07: "content below hero is still kinda janky".
   The .container -> .pageContainer -> .pageContent chain ships with
   no max-width, so body copy ran edge-to-edge on desktop. Pin to a
   readable measure + center, give the body a warm-cream backdrop so
   the section reads as a distinct block (mirrors .glam-content__inner
   treatment on FAQ/Legal/Shipping pages that use the __body wrapper). */
.glam-content .pageContainer {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}
.glam-content .pageContent {
  background: var(--glam-warm-cream);
  padding: 2.5rem 0 0.5rem;
}
.glam-content .velaBannerText {
  background: var(--glam-warm-cream);
  padding: 4rem 1.5rem 1rem;
  text-align: center;
}
.glam-content .velaBannerTextInner {
  max-width: 760px;
  margin: 0 auto;
}

/* Vela page-content (.vela-page .rte) typography for the ABOUT and
   other pillar-0 content pages. Operator-reported 2026-05-07: "the
   about page of glam is shitty, different font sizes, weird".
   Without these the .rte block uses Vela's default Poppins for h2/h3,
   which fights the H1's Playfair display chain. Mirrors the
   `.glam-content__body h2/h3` styling already shipped for content
   pages that DO use the __body wrapper (FAQ / Legal / Shipping). */
.glam-content .rte h2,
.glam-content .pageContent h2 {
  font-family: var(--glam-font-display);
  font-weight: 600;
  font-size: 1.65rem;
  color: var(--glam-deep-wine);
  margin: 2.5rem 0 0.75rem;
  letter-spacing: -0.005em;
}
.glam-content .rte h3,
.glam-content .pageContent h3 {
  font-family: var(--glam-font-body);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--glam-deep-espresso);
  margin: 1.75rem 0 0.5rem;
}
.glam-content .rte p {
  font-family: var(--glam-font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--glam-deep-espresso);
  margin: 0 0 1.1rem;
}
/* Hero subtitle (.velaHomeSubtitle on About) — should read as a
   tagline beneath the Playfair H1, not a generic Poppins H3.
   Smaller, italic Playfair, rose-gold. */
.glam-content .velaHomeSubtitle {
  font-family: var(--glam-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--glam-rose-gold);
  letter-spacing: 0.005em;
  margin: 0.5rem 0 0;
}

/* PDP gallery — base styles in shared/pdp_gallery.css; this block
   pins the active-thumb accent + hover tint to the glam palette via
   the --pdp-gallery-accent custom property the shared rule reads. */
body.glam {
  --pdp-gallery-accent: var(--glam-rose-gold);
}
body.glam .pdp-gallery__thumb {
  background: var(--glam-warm-cream);
}

/* Newsletter section — luxury centered composition, rose-gold accent. */
body.glam .brand-newsletter-section {
  background: var(--glam-matte-black);
  border-top: 1px solid rgba(183, 110, 121, 0.25);
  padding: 96px 24px;
  text-align: center;
}
body.glam .brand-newsletter-section__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
body.glam .brand-newsletter-section__heading {
  margin: 0 0 12px;
  font-family: var(--glam-font-display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 48px);
  color: var(--glam-white);
  letter-spacing: -0.01em;
}
body.glam .brand-newsletter-section__body {
  margin: 0 0 36px;
  font-family: var(--glam-font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--glam-warm-gray);
}
body.glam .brand-newsletter-section .newsletter-form {
  display: flex;
  gap: 0;
  align-items: stretch;
  max-width: 520px;
  margin: 0 auto;
}
body.glam .brand-newsletter-section .newsletter-form__field-wrapper {
  flex: 1;
}
body.glam .brand-newsletter-section .newsletter-form__field-wrapper .field {
  height: 100%;
}
body.glam .brand-newsletter-section .field__input {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(183, 110, 121, 0.4);
  border-right: 0;
  color: var(--glam-white);
  padding: 16px 20px;
  width: 100%;
  height: 100%;
  font-family: var(--glam-font-body);
  font-size: 15px;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease;
}
body.glam .brand-newsletter-section .field__input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
body.glam .brand-newsletter-section .field__input:focus {
  outline: none;
  border-color: var(--glam-rose-gold);
  background: rgba(255, 255, 255, 0.1);
}
body.glam .brand-newsletter-section .field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
body.glam .brand-newsletter-section .newsletter-form__button {
  background: var(--glam-rose-gold);
  color: #FFFFFF;
  border: 1px solid var(--glam-rose-gold);
  border-radius: 0 2px 2px 0;
  margin-top: 0;
  padding: 16px 32px;
  font-family: var(--glam-font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
body.glam .brand-newsletter-section .newsletter-form__button:hover {
  background: #C47E89;
  box-shadow: 0 4px 24px rgba(183, 110, 121, 0.4);
}
body.glam .brand-newsletter-section .newsletter-form__message--success {
  color: #7ECFA5;
  margin-top: 0;
  margin-bottom: 24px;
  font-family: var(--glam-font-body);
  font-size: 14px;
}
body.glam .brand-newsletter-section .newsletter-form__message--error {
  color: #E88A82;
  margin-top: 0;
  margin-bottom: 24px;
  font-family: var(--glam-font-body);
  font-size: 14px;
}
@media (max-width: 520px) {
  body.glam .brand-newsletter-section .newsletter-form {
    flex-direction: column;
    gap: 12px;
  }
  body.glam .brand-newsletter-section .field__input {
    border-right: 1px solid rgba(183, 110, 121, 0.4);
    border-radius: 2px;
  }
  body.glam .brand-newsletter-section .newsletter-form__button {
    border-radius: 2px;
    padding: 16px 24px;
  }
}

/* ----- Cart drawer ---------------------------------------------------- */
.glam-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 1050;
  pointer-events: none;
}
.glam-cart-drawer--open { pointer-events: auto; }
.glam-cart-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.glam-cart-drawer--open .glam-cart-drawer__scrim { opacity: 1; }
.glam-cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--vela-color-background, #FBF7F2);
  color: var(--vela-text-color-primary, #2C2018);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}
.glam-cart-drawer--open .glam-cart-drawer__panel { transform: translateX(0); }
.glam-cart-drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--vela-color-borders, #E8D5CE);
}
.glam-cart-drawer__heading {
  font-family: var(--vela-font-family-secondary, "Playfair Display", Georgia, serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}
.glam-cart-drawer__close {
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  color: var(--vela-text-color-primary, #2C2018);
}
.glam-cart-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}
.glam-cart-drawer__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--vela-color-borders, #E8D5CE);
}
.glam-cart-drawer__row-thumb {
  width: 64px;
  height: 64px;
  background: #f0ebe4;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.glam-cart-drawer__row-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.glam-cart-drawer__row-tagline {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--glam-rose-ink); /* 5.19:1 on the cream panel; raw Rose Gold 3.57:1 */
  margin: 0 0 2px;
}
.glam-cart-drawer__row-name {
  font-family: var(--vela-font-family-secondary, "Playfair Display", Georgia, serif);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.glam-cart-drawer__row-dose {
  font-size: 12px;
  color: #8C7B6B;
  margin: 2px 0 0;
}
.glam-cart-drawer__row-price {
  font-weight: 600;
  white-space: nowrap;
  margin: 0;
}
.glam-cart-drawer__footer {
  padding: 24px;
  border-top: 1px solid var(--vela-color-borders, #E8D5CE);
}
.glam-cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 18px;
}
.glam-cart-drawer__bulk-discount {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #10B981;
  margin-bottom: 8px;
}
.glam-cart-drawer__total {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--vela-color-borders, #E8D5CE);
}
.glam a.glam-cart-drawer__checkout,
.glam a.glam-cart-drawer__checkout:hover,
.glam a.glam-cart-drawer__checkout:focus {
  display: block;
  text-align: center;
  /* #B76E79 carries white at only 3.80:1 — below WCAG AA (4.5:1).
     #9F6069 is the same rose at 87% and carries white at 4.83:1.
     Confined to this button so the brand rose is unchanged elsewhere.
     Guarded by cta_legibility_guard_test. */
  background: var(--glam-cta-accent, #9F6069) !important;
  color: #ffffff !important;
  padding: 14px;
  font-weight: 600;
  font-family: var(--vela-font-family, "Poppins", sans-serif);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  border-radius: 2px;
  text-decoration: none !important;
}
.glam-cart-drawer__view-cart {
  display: block;
  text-align: center;
  font-size: 14px;
  color: var(--glam-ink-muted); /* 5.54:1; #8C7B6B was 3.82:1 */
}
.glam-cart-drawer__empty {
  padding: 48px 24px;
  text-align: center;
}
/* The empty drawer read 3.82:1 (line) and 3.57:1 (link) on its cream
   panel, measured 2026-10-03. */
.glam-cart-drawer__empty p {
  color: var(--glam-ink-muted);
  margin-bottom: 16px;
}
.glam-cart-drawer__shop-link {
  color: var(--glam-rose-ink);
  font-weight: 600;
}

/* Cart page checkout button — Vela .btnCheckout has white text on
   rose gold which is low contrast. Override to matte black on rose
   gold for readability. */
.glam-cart .btnCheckout,
.glam-cart .btnCheckout:link,
.glam-cart .btnCheckout:visited {
  background-color: var(--glam-matte-black) !important;
  border-color: var(--glam-matte-black) !important;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 12px 28px;
}
.glam-cart .btnCheckout:hover,
.glam-cart .btnCheckout:focus {
  background-color: var(--glam-rose-gold) !important;
  border-color: var(--glam-rose-gold) !important;
  color: #fff !important;
}

/* =============================================================================
   The cart page — the theme's own inks, measured on its own grounds
   (2026-10-03). Vela paints prices and the subtotal in
   --vela-color-primary (raw Rose Gold, 3.80:1 on white) and its
   secondary button in #A7A7A7 (2.25:1 on the #F7F7F7 summary). Each
   selector carries the theme's own classes so it outranks them.
   ============================================================================= */
body.glam .cartItemWrap .priceProduct,
body.glam .cartItemWrap .cartSubtotal {
  color: var(--glam-rose-ink);
}
body.glam .functionCart a.btn.btnVelaTwo {
  color: var(--glam-deep-espresso);
}

/* The home page's "Shop the Full Collection" button carries 48px of
   side padding and wide tracking inline, and a Bootstrap .btn never
   wraps — so at 360px it ran 15px past the screen and the whole front
   page scrolled sideways. Let it wrap inside the column instead.
   every_brand_page_fits_a_phone_test (2026-10-04). */
.velaProductListFooter .btn {
  max-width: 100%;
  white-space: normal;
}

/* The header on a phone — nothing sits on top of anything (2026-10-04).
   The grid gave the account + cart cluster a quarter of a 360px row, and
   the logo column an inline 64px indent; "Sign In" and the cart spilled
   left across the logo. Below 768px the burger and the cluster take
   their natural width and the logo takes what is left, shrinking to fit
   rather than running under the cluster. The 64px indent is a desktop
   margin (operator, 2026-05-04) and stays there.
   Guard: test/system/every_brand_header_controls_do_not_overlap_test.rb */
@media (min-width: 768px) {
  body.glam .velaHeader .velaHeaderLeft { padding-left: 64px; }
}
@media (max-width: 767.98px) {
  body.glam .velaHeader .velaHeaderMobile,
  body.glam .velaHeader .velaHeaderRight {
    flex: 0 0 auto;
    width: auto;
    padding-left: 8px;
    padding-right: 8px;
  }
  body.glam .velaHeader .velaHeaderRight { gap: 0.25rem !important; }
  body.glam .velaHeader .velaHeaderLeft {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
  }
  body.glam .velaHeader .velaLogoLink { max-width: 100%; }
  body.glam .velaHeader .velaLogoLink img {
    max-width: 100%;
    max-height: 44px;
    object-fit: contain;
  }
}