/*
 * MTM storefront checkout UI — staged 2026-10-17 (Activation Lane 2).
 *
 * Owner design brief (Andrew, 2026-10-17 03:22 EDT):
 *   PRIMARY  "Buy on our site" (Stripe)  = GLOWING GREEN
 *   SECOND   "Add to Cart"               = brand orange, strong solid
 *   QUIET    Gumroad                     = small "More ways to buy" expander
 *
 * TOKEN EXCEPTION (owner-ordered): the green below is NOT in
 * DESIGN-LANGUAGE.md — Andrew explicitly amended the palette for the
 * buy button ("Buy Now = glowing green"). Every other value here is a
 * codified token/ramp (accent #B93A03 family, navy ramp, ink/muted).
 * Pulse animation is decorative; it is disabled for reduced-motion.
 */

/* ---------- Buy Now — glowing green (owner exception) ----------
 * R2 spec §3.2 token set (reconciled 2026-10-17, Lane I-B): the green
 * is defined ONCE here and used nowhere else. Steady glow per spec —
 * the earlier pulse animation was removed in reconciliation (the spec
 * fixes exact rest/hover shadow values; a pulse never renders them). */
:root {
  --buy-green-hi: #2be07a;
  --buy-green-lo: #14b85c;
}
.btn-buy-now {
  background: linear-gradient(180deg, var(--buy-green-hi), var(--buy-green-lo));
  color: #052012;
  font-weight: 700;
  box-shadow:
    0 0 0 1px rgba(43, 224, 122, 0.55),
    0 8px 28px rgba(20, 184, 92, 0.45);
}
.btn-buy-now:hover {
  box-shadow:
    0 0 0 1px rgba(43, 224, 122, 0.55),
    0 10px 34px rgba(20, 184, 92, 0.6);
}
/* Accessibility + the one permitted gold use on these controls:
 * a gold hairline focus ring (never gold text). R2 §3.2/§3.4. */
.btn-buy-now:focus-visible,
.btn-add-cart:focus-visible,
.more-ways summary:focus-visible {
  outline: 2px solid #c9a45c;
  outline-offset: 2px;
}

/* ---------- Add to Cart — amber/orange, prominent but subordinate ----------
 * R2 spec §3.3: amber -> DESIGN-LANGUAGE orange, white text, warm
 * WEAK shadow only (visibly subordinate to the green glow). */
.btn-add-cart {
  background: linear-gradient(180deg, #d97a1f, #b93a03);
  border: 1px solid #b93a03;
  color: #ffffff;
  font-weight: 650;
  box-shadow: 0 4px 16px rgba(185, 58, 3, 0.35);
}
.btn-add-cart:hover {
  background: linear-gradient(180deg, #de8326, #c2430a);
  box-shadow: 0 4px 16px rgba(185, 58, 3, 0.35);
}
.btn-add-cart:disabled {
  cursor: default;
  opacity: 0.85;
}

/* Both actions: large and unmissable in every card context.
 * Heights per R2 §8: Buy Now >= 52px, Add to Cart >= 48px. */
.card .foot .btn-buy-now,
.card .foot .btn-add-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.5rem;
}
.card .foot .btn-buy-now { min-height: 52px; }
.card .foot .btn-add-cart { min-height: 48px; }
.f-actions .btn-buy-now,
.f-actions .btn-add-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.f-actions .btn-buy-now { min-height: 52px; }
.f-actions .btn-add-cart { min-height: 48px; }

/* ---------- Promo banner chip (R2 §6.2) ----------
 * The strip links to #shop; the code itself is a tap-to-copy chip.
 * Base .promo-strip/.promo-code styling lives in site.css; these rules
 * only adapt the chip from a <span> to a <button> and keep the strip's
 * anchor segments visually identical to the strip text. */
.promo-strip a {
  color: inherit;
  text-decoration: none;
}
.promo-strip button.promo-code {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  margin: 0;
}

/* ---------- Gumroad — quiet "More ways to buy" expander ---------- */
.more-ways {
  margin-top: 0.4rem;
}
.f-actions .more-ways {
  flex: 1 1 100%;
}
.more-ways summary {
  align-items: center;
  color: #a7a099;
  cursor: pointer;
  display: flex;
  font-family: Oswald, "Arial Narrow", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  list-style: none;
  min-height: 44px;
  text-transform: uppercase;
}
.more-ways summary::-webkit-details-marker {
  display: none;
}
.more-ways summary::after {
  content: "\25BE";
  margin-left: 0.4rem;
}
.more-ways[open] summary::after {
  content: "\25B4";
}
.more-ways-link {
  color: #a7a099;
  display: inline-block;
  font-size: 0.92rem;
  min-height: 44px;
  padding: 0.55rem 0;
  text-decoration: underline;
}
.more-ways-link:hover {
  color: #f5f5f7;
}

/* ---------- Header fit at phone widths (staged fix, 2026-10-17) ----------
 * The live bar (brand + Learn + Free Pack CTA) exactly fills 390px;
 * adding the cart button overflowed it by ~54px (button clipped).
 * At <=560px: tighten the bar, shorten the free-pack CTA label to
 * "Free Pack" (CSS-only; the anchor and href are untouched), and
 * compact the cart button. Desktop bar is byte-identical to live. */
@media (max-width: 560px) {
  .bar-in { gap: 8px; }
  .bar .brand { font-size: 0.62rem; letter-spacing: 0.1em; }
  .bar .bar-cta { font-size: 0; padding: 8px 10px; }
  .bar .bar-cta::after { content: "Free Pack"; font-size: 0.78rem; }
  .mtm-cart-button { padding: 0.45rem 0.65rem; font-size: 0.85rem; min-height: 44px; }
}