/* Announcement bar — Memorial Day variant. Solid dark gradient with
   white text — no white middle that swallows the text. */

.nova-announce.nova-announce--memorial {
  background: linear-gradient(90deg, #1E3A5F 0%, #6E3FF3 50%, #6E3FF3 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.nova-announce.nova-announce--memorial .accent {
  background: rgba(255,255,255,.22) !important;
  color: #FFFFFF !important;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.08em;
}

.nova-announce.nova-announce--memorial strong {
  color: #FFFFFF !important;
  font-weight: 800;
}

.nova-announce.nova-announce--memorial .sep {
  color: rgba(255,255,255,.5);
}

@media (max-width: 640px) {
  .nova-announce.nova-announce--memorial {
    background: linear-gradient(90deg, #1E3A5F 0%, #6E3FF3 50%, #6E3FF3 100%) !important;
    color: #FFFFFF !important;
  }
}

/* Banner above cart / checkout summary */

.nova-md-banner {
  background: linear-gradient(135deg, #F3F0FF 0%, #FEE2E2 100%);
  border: 2px solid #6E3FF3;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 18px 0;
  font-family: 'Manrope', system-ui, sans-serif;
  color: #5A2FD0;
  box-shadow: 0 6px 16px rgba(110,63,243,.08);
}

.nova-md-banner__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nova-md-banner__top strong { color: #1E3A5F; }

.nova-md-banner__sep { opacity: 0.4; }

.nova-md-banner__flag { font-size: 18px; }

.nova-md-banner__status {
  margin-top: 6px;
  font-size: 14px;
  color: #5A2FD0;
}

.nova-md-banner__status strong { color: #1E3A5F; }

.nova-md-banner__nudge { color: #6E3FF3; }

/* Mini-cart (header dropdown / drawer) banner */

.nova-md-mini-banner {
  background: #6E3FF3;
  color: #FFFFFF;
  padding: 10px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 12px 0;
  border-radius: 8px;
}

.nova-md-mini-banner strong { color: #FBBF24; }

/* Free line items in cart */

.nova-md-free-qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
}

.nova-md-free-badge {
  background: #16A34A;
  color: #FFFFFF;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 999px;
}

.nova-md-free-price {
  color: #16A34A !important;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.nova-md-free-mini {
  color: #16A34A;
  font-size: 12px;
}

/* PDP badge near the price */

.nova-md-pdp-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 14px 0;
  padding: 10px 12px;
  background: linear-gradient(90deg, #FEE2E2 0%, #F3F0FF 100%);
  border: 1px solid #1E3A5F;
  border-radius: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  color: #5A2FD0;
}

.nova-md-pdp-badge__pill {
  background: #1E3A5F;
  color: #FFFFFF;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 9px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.nova-md-pdp-badge__text { line-height: 1.5; }

@media (max-width: 600px) {
  .nova-md-pdp-badge { font-size: 12px; padding: 9px 10px; }
  .nova-md-pdp-badge__text { line-height: 1.4; }
}

/* ── Side cart: Memorial Day BOGO additions ───────────────────────────── */

.nova-sidecart-md-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 22px 14px;
  padding: 12px 14px;
  background: linear-gradient(90deg, #1E3A5F 0%, #6E3FF3 100%);
  border-radius: 10px;
  color: #FFFFFF;
}

/* Memorial Day cart banner — wrap nicely on narrow screens */

@media (max-width: 600px) {
  .nova-md-banner {
    padding: 12px 14px;
    margin: 0 0 14px 0;
  }
  .nova-md-banner__top {
    font-size: 12px;
    gap: 6px;
  }
  .nova-md-banner__status {
    font-size: 13px;
    margin-top: 4px;
    line-height: 1.4;
  }
  .nova-md-banner__nudge { display: block; margin-top: 2px; }
}

@media (max-width: 380px) {
  .nova-md-banner__top { font-size: 11px; }
  .nova-md-banner__flag { font-size: 16px; }
}

/* PDP Memorial Day badge — keep readable on small phones */

@media (max-width: 380px) {
  .nova-md-pdp-badge {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* Slide cart Memorial Day banner — tighter on narrow */

@media (max-width: 600px) {
  .nova-sidecart-md-banner {
    margin: 0 18px 12px;
    padding: 10px 12px;
    gap: 10px;
  }
  .nova-sidecart-md-banner__flag { font-size: 18px; }
  .nova-sidecart-md-banner__txt strong { font-size: 10px; }
  .nova-sidecart-md-banner__txt span   { font-size: 11px; }
}

/* Make sure announcement bar fits on narrow phones (tighter font) */

@media (max-width: 380px) {
  .nova-announce.nova-announce--memorial {
    font-size: 11px;
    letter-spacing: 0.02em;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* =====================================================================
   MEMORIAL DAY PDP block — replaces the simple .nova-md-pdp-badge with
   a richer SKO-style offer panel: dynamic free-vial pill + tier cards
   + live countdown. The old .nova-md-pdp-badge rules above are kept
   for safety but unused (the PHP no longer emits that element).
===================================================================== */

.nova-md-pdp {
  margin: 12px 0 18px 0;
  font-family: 'Manrope', sans-serif;
}

/* Dynamic "+N FREE VIAL ADDED" pill — red→blue gradient like SKO */

.nova-md-pdp__free-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(90deg, #1E3A5F 0%, #6E3FF3 100%);
  color: #FFFFFF;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(110,63,243,.18);
  margin-bottom: 14px;
}

.nova-md-pdp__free-pill__gift { font-size: 13px; }

/* Section label above the tiers */

.nova-md-pdp__title {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 6px 0 10px 0;
}

/* Three tier cards */

.nova-md-pdp__tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.nova-md-pdp__tier {
  position: relative;
  background: #FFFFFF;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  padding: 22px 10px 14px;
  text-align: center;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.nova-md-pdp__tier:hover {
  border-color: #6E3FF3;
}

.nova-md-pdp__tier:active { transform: scale(.98); }

.nova-md-pdp__tier.is-active {
  border-color: #1E3A5F;
  border-width: 2px;
  padding: 21px 9px 13px;
  background: linear-gradient(180deg, #EEF2F8 0%, #FFFFFF 100%);
  box-shadow: 0 4px 18px rgba(110,63,243,.14);
}

.nova-md-pdp__tier__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #1E3A5F;
  color: #FFFFFF;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.nova-md-pdp__tier__main {
  display: block;
  font-weight: 800;
  font-size: 18px;
  color: #0A0A0A;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.nova-md-pdp__tier__sub {
  display: block;
  font-weight: 700;
  font-size: 12px;
  color: #1E3A5F;
  letter-spacing: 0.02em;
}

/* Countdown pill */

.nova-md-pdp__countdown {
  background: #F3F0FF;
  border: 1px solid #D9CCFF;
  border-radius: 999px;
  padding: 9px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6E3FF3;
  text-align: center;
}

.nova-md-pdp__countdown__time {
  color: #5A2FD0;
  font-weight: 800;
}

/* Mobile (≤480px) — tiers stack to single column */

@media (max-width: 480px) {
  .nova-md-pdp__tiers {
    grid-template-columns: 1fr;
    gap: 18px; /* extra room so the badge above each tier doesn't clip */
  }
  .nova-md-pdp__tier {
    padding: 22px 14px 14px;
  }
  .nova-md-pdp__tier__main { font-size: 17px; }
  .nova-md-pdp__free-pill {
    font-size: 10px;
    padding: 6px 12px;
    letter-spacing: 0.12em;
  }
  .nova-md-pdp__countdown { font-size: 10px; letter-spacing: 0.1em; }
}

@media (max-width: 360px) {
  .nova-md-pdp__tier__badge { font-size: 8px; padding: 3px 7px; }
}

/* =====================================================================
   MEMORIAL DAY LANDING HERO — Nova brand colors.
   Black base with purple gradient sweep + subtle hex grid overlay.
   Sits ABOVE the existing homepage hero. Auto-disappears after the
   sale ends (PHP wraps it in nova_md_sale_active()).
===================================================================== */

.nova-md-hero {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  background: #0A0A0A;
  color: #FFFFFF;
  padding: 80px 24px 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  isolation: isolate;
}

/* Purple gradient sweep + radial glow */

.nova-md-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(110,63,243,.35) 0%, transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(110,63,243,.25) 0%, transparent 55%),
    linear-gradient(135deg, #0A0A0A 0%, #1A0B3F 50%, #0A0A0A 100%);
}

/* Subtle hex grid texture overlay — same motif as Nova brand */

.nova-md-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(60deg, rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 1px, transparent 1px, transparent 24px),
    linear-gradient(-60deg, rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 1px, transparent 1px, transparent 24px);
  background-size: 24px 42px;
  opacity: .7;
  mix-blend-mode: screen;
}

.nova-md-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.nova-md-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(110,63,243,.18);
  border: 1px solid rgba(110,63,243,.55);
  color: #FFFFFF;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nova-md-hero__headline {
  font-family: 'Manrope', sans-serif;
  font-weight: 900;
  font-size: clamp(64px, 11vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0;
  color: #FFFFFF;
  text-shadow: 0 4px 30px rgba(110,63,243,.4);
}

.nova-md-hero__sub {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 2.4vw, 20px);
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.85);
  margin: 4px 0 0 0;
}

.nova-md-hero__fine {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin: 0;
}

.nova-md-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #6E3FF3;
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  padding: 16px 32px;
  border-radius: 999px;
  margin-top: 8px;
  box-shadow: 0 10px 30px rgba(110,63,243,.45);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.nova-md-hero__cta:hover {
  background: #7c4af5;
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(110,63,243,.55);
}

.nova-md-hero__cta span {
  transition: transform .15s ease;
}

.nova-md-hero__cta:hover span { transform: translateX(3px); }

.nova-md-hero__countdown {
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}

.nova-md-hero__countdown__time {
  color: #FFFFFF;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* Mobile */

@media (max-width: 600px) {
  .nova-md-hero {
    min-height: 380px;
    padding: 56px 18px 72px;
  }
  .nova-md-hero__inner { gap: 12px; }
  .nova-md-hero__pill {
    font-size: 10px;
    padding: 6px 12px;
    letter-spacing: 0.14em;
  }
  .nova-md-hero__headline { font-size: clamp(48px, 14vw, 88px); }
  .nova-md-hero__sub  { font-size: 14px; }
  .nova-md-hero__fine { font-size: 10px; }
  .nova-md-hero__cta { padding: 14px 26px; font-size: 15px; min-height: 52px; }
}

@media (max-width: 380px) {
  .nova-md-hero { padding: 44px 14px 60px; }
  .nova-md-hero__headline { line-height: 0.96; }
}

/* Respect prefers-reduced-motion: kill the subtle hex shimmer if user opts out */

@media (prefers-reduced-motion: reduce) {
  .nova-md-hero__cta { transition: none; }
  .nova-md-hero__cta:hover { transform: none; }
}

/* =====================================================================
   Hero Memorial Day variant — inherits the existing .hero layout
   (dark bg, hex grid, 3-vial video on the right). Only swaps the
   badge accent + countdown line styling. Layout stays identical.
===================================================================== */

.badge.badge--memorial {
  /* Inherit existing .badge style; override colors for sale variant */
  background: rgba(110, 63, 243, 0.18) !important;
  border-color: rgba(110, 63, 243, 0.55) !important;
  color: #FFFFFF !important;
}

.badge.badge--memorial::before { background: #6E3FF3 !important; }

.hero-shipping-line.hero-shipping-line--memorial {
  /* Same line height/position as the regular shipping line */
  color: rgba(255,255,255,.85);
}

.hero-shipping-line.hero-shipping-line--memorial .dot {
  background: #6E3FF3 !important;
  box-shadow: 0 0 12px rgba(110,63,243,.6);
}

.hero-md-countdown {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #FFFFFF;
}

/* =====================================================================
   MARQUEE ANNOUNCEMENT BAR — Memorial Day variant.
   Breaks out of the base .nova-announce flex layout (which had wrap+gap)
   and replaces it with a single-line scrolling track. Items duplicated
   once in the markup so the -50% seam is invisible.
===================================================================== */

.nova-announce.nova-announce--memorial.nova-announce--marquee,
.nova-announce.nova-announce--marquee {
  display: block !important;
  overflow: hidden !important;
  padding: 12px 0 !important;
  gap: 0 !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  text-align: left !important;
  position: relative !important;
  /* Override the red-white-blue gradient — middle white was making
     text invisible. Solid red→blue is punchier and always readable. */
  background: linear-gradient(90deg, #1E3A5F 0%, #6E3FF3 50%, #6E3FF3 100%) !important;
  color: #FFFFFF !important;
}

.nova-announce.nova-announce--marquee .nova-announce__track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 56px !important;
  width: max-content !important;
  align-items: center !important;
  white-space: nowrap !important;
  animation: nova-marquee 32s linear infinite;
  will-change: transform;
}

.nova-announce.nova-announce--marquee .nova-announce__item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
}

.nova-announce.nova-announce--marquee .nova-announce__item strong {
  font-weight: 800;
  color: #FFFFFF;
}

.nova-announce.nova-announce--marquee .nova-announce__item .accent {
  background: rgba(255,255,255,.22);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.nova-announce--marquee:hover .nova-announce__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .nova-announce.nova-announce--marquee .nova-announce__track { animation: none; }
}

@media (max-width: 600px) {
  .nova-announce.nova-announce--marquee .nova-announce__track { gap: 40px !important; animation-duration: 24s; }
  .nova-announce.nova-announce--marquee .nova-announce__item  { font-size: 12px !important; }
}

/* =====================================================================
   HERO — CENTER CTA group when Memorial Day variant is active.
   Keeps the 2-col grid layout (text left, vials right) but centers
   the CTA buttons within the text column. Matches SKO's centered CTA.
===================================================================== */

.hero.hero--memorial .hero-cta-group .ctas {
  justify-content: center !important;
}

.hero.hero--memorial .hero-cta-group .ctas .btn.light {
  /* Bigger, more prominent primary CTA on the sale variant */
  padding: 18px 36px !important;
  font-size: 16px !important;
  box-shadow: 0 14px 32px rgba(110,63,243,.4) !important;
}

@media (max-width: 880px) {
  /* On mobile/tablet the hero already stacks; center everything in
     the text block for tighter visual alignment with the SKO style */
  .hero.hero--memorial .grid > div:first-child {
    text-align: center;
  }
  .hero.hero--memorial .hero-ruo-pill,
  .hero.hero--memorial .badge {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero.hero--memorial .hero-cta-group .ctas {
    align-items: center;
    flex-direction: column;
  }
}

/* =====================================================================
   BUGFIX — PDP tier cards were collapsing to inline text because the
   parent theme's button reset overrides our display rules. Force
   flex-column layout + block children with !important + raise specificity
   via parent selectors. Also do a full button-default reset on the tier.
===================================================================== */

.nova-md-pdp .nova-md-pdp__tiers {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

button.nova-md-pdp__tier,
.nova-md-pdp .nova-md-pdp__tier {
  /* Aggressive button reset */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: #FFFFFF !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 26px 10px 16px !important;
  margin: 0 !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important;
  color: #0A0A0A !important;
  /* Layout: column stack */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
  position: relative !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  /* Anti-line-height-collapse */
  line-height: 1.2 !important;
  min-height: 110px !important;
  /* Allow the absolute-positioned badge to overflow above the card */
  overflow: visible !important;
}

button.nova-md-pdp__tier:hover,
.nova-md-pdp .nova-md-pdp__tier:hover {
  border-color: #6E3FF3 !important;
}

button.nova-md-pdp__tier.is-active,
.nova-md-pdp .nova-md-pdp__tier.is-active {
  border-color: #1E3A5F !important;
  border-width: 2px !important;
  padding: 25px 9px 15px !important;
  background: linear-gradient(180deg, #EEF2F8 0%, #FFFFFF 100%) !important;
  box-shadow: 0 4px 18px rgba(110,63,243,.14) !important;
}

.nova-md-pdp .nova-md-pdp__tier > .nova-md-pdp__tier__badge {
  position: absolute !important;
  top: -11px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #1E3A5F !important;
  color: #FFFFFF !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  display: inline-block !important;
  width: auto !important;
}

.nova-md-pdp .nova-md-pdp__tier > .nova-md-pdp__tier__main {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 800 !important;
  font-size: 19px !important;
  letter-spacing: -0.01em !important;
  color: #0A0A0A !important;
  line-height: 1.15 !important;
}

.nova-md-pdp .nova-md-pdp__tier > .nova-md-pdp__tier__sub {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #1E3A5F !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
}

/* Tighter section title above tier grid */

.nova-md-pdp .nova-md-pdp__title {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #6b7280 !important;
  margin: 14px 0 12px 0 !important;
}

/* Mobile — stack vertically with comfortable spacing */

@media (max-width: 480px) {
  .nova-md-pdp .nova-md-pdp__tiers {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  button.nova-md-pdp__tier,
  .nova-md-pdp .nova-md-pdp__tier {
    padding: 24px 14px 14px !important;
    min-height: 96px !important;
  }
  .nova-md-pdp .nova-md-pdp__tier > .nova-md-pdp__tier__main { font-size: 18px !important; }
}

/* =====================================================================
   ONE-SCROLL HERO — force the Memorial Day hero to fit in a single
   viewport on both desktop and mobile. Aggressive height cap +
   tighter typography so all hero content + CTA fits above the fold.
===================================================================== */

.hero.hero--memorial {
  /* Account for header + announcement bar (~140px desktop, ~120px mobile) */
  min-height: calc(100vh - 140px) !important;
  max-height: calc(100vh - 140px) !important;
  overflow: hidden !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  display: flex !important;
  align-items: center !important;
}

.hero.hero--memorial .wrap {
  width: 100%;
  max-height: 100%;
}

.hero.hero--memorial .grid {
  height: 100%;
}

/* Tighter typography so the H1 doesn't push content out of view */

.hero.hero--memorial h1 {
  font-size: clamp(40px, 5.5vw, 84px) !important;
  line-height: 1 !important;
  margin: 14px 0 !important;
}

.hero.hero--memorial h1 .secondary {
  font-size: clamp(28px, 3.5vw, 56px) !important;
  line-height: 1.05 !important;
  display: block;
  margin-top: 6px;
}

.hero.hero--memorial .badge,
.hero.hero--memorial .badge.badge--memorial {
  margin-bottom: 10px !important;
}

.hero.hero--memorial .hero-ruo-pill {
  margin: 10px 0 !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
}

.hero.hero--memorial .lede {
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 10px 0 14px !important;
}

.hero.hero--memorial .hero-cta-group {
  margin-top: 10px !important;
}

.hero.hero--memorial .trust {
  margin-top: 14px !important;
  gap: 16px !important;
}

.hero.hero--memorial .trust .item .num { font-size: 16px !important; }

.hero.hero--memorial .trust .item .lbl { font-size: 10px !important; }

/* Tablet — slightly smaller H1, accommodate stacked layout */

@media (max-width: 880px) {
  .hero.hero--memorial {
    min-height: calc(100vh - 130px) !important;
    max-height: calc(100vh - 130px) !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .hero.hero--memorial h1 { font-size: clamp(36px, 7vw, 64px) !important; }
  .hero.hero--memorial h1 .secondary { font-size: clamp(22px, 4.5vw, 42px) !important; }
}

/* Mobile — stack vertically, hide trust row, smaller everything */

@media (max-width: 600px) {
  .hero.hero--memorial {
    min-height: calc(100vh - 120px) !important;
    max-height: calc(100vh - 120px) !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .hero.hero--memorial h1 {
    font-size: clamp(32px, 9vw, 52px) !important;
    margin: 8px 0 !important;
  }
  .hero.hero--memorial h1 .secondary {
    font-size: clamp(20px, 5.5vw, 32px) !important;
  }
  .hero.hero--memorial .lede {
    font-size: 13px !important;
    margin: 6px 0 10px !important;
  }
  /* Hide trust row on mobile to keep hero within one viewport */
  .hero.hero--memorial .trust {
    display: none !important;
  }
  /* Hide hero-video on very narrow screens — the text needs the room */
  .hero.hero--memorial .hero-video {
    max-height: 200px;
    overflow: hidden;
  }
}

@media (max-width: 380px) {
  .hero.hero--memorial h1 { font-size: 32px !important; }
  .hero.hero--memorial h1 .secondary { font-size: 18px !important; }
  .hero.hero--memorial .hero-video { display: none !important; }
}

/* =====================================================================
   MARQUEE — EXTRA HARDENING. Higher-specificity overrides via the
   parent body+section context, in case Pressable cache serves a stale
   stylesheet. Inline styles in header.php provide the final fallback.
===================================================================== */

body .nova-announce.nova-announce--marquee {
  display: block !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  padding: 12px 0 !important;
  text-align: left !important;
}

body .nova-announce.nova-announce--marquee > .nova-announce__track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  white-space: nowrap !important;
}

body .nova-announce.nova-announce--marquee .nova-announce__item {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}

/* Hide the stats/proof bar during sale → first scroll = white section */

body .hero.hero--memorial ~ section.proof {
  display: none !important;
}

/* Tighten hero further so the CTA fits in the initial viewport */

.hero.hero--memorial {
  min-height: 0 !important;
  max-height: calc(100vh - 160px) !important;
  height: calc(100vh - 160px) !important;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

.hero.hero--memorial .wrap {
  height: 100%;
  display: flex;
  align-items: center;
}

.hero.hero--memorial .grid {
  width: 100%;
  align-items: center;
}

/* Smaller H1 — must leave room for the CTA below */

.hero.hero--memorial h1 {
  font-size: clamp(32px, 4.2vw, 64px) !important;
  line-height: 0.96 !important;
  margin: 8px 0 !important;
}

.hero.hero--memorial h1 .secondary {
  font-size: clamp(20px, 2.4vw, 36px) !important;
  margin-top: 4px !important;
  display: block;
}

/* Compact the lede so the CTA stays in view */

.hero.hero--memorial .lede {
  font-size: 13px !important;
  line-height: 1.45 !important;
  margin: 6px 0 10px !important;
  max-width: 520px;
}

.hero.hero--memorial .hero-ruo-pill {
  margin: 6px 0 !important;
  padding: 5px 12px !important;
  font-size: 10px !important;
}

.hero.hero--memorial .hero-cta-group { margin-top: 8px !important; }

.hero.hero--memorial .hero-cta-group .ctas .btn.light {
  padding: 14px 28px !important;
  font-size: 15px !important;
  box-shadow: 0 10px 24px rgba(110,63,243,.35) !important;
}

/* Hide trust row during the sale — saves ~80px vertical */

.hero.hero--memorial .trust { display: none !important; }

/* Shipping line under CTAs */

.hero.hero--memorial .hero-shipping-line {
  margin-top: 8px !important;
  font-size: 11px !important;
}

/* Tablet */

@media (max-width: 880px) {
  .hero.hero--memorial {
    max-height: calc(100vh - 140px) !important;
    height: calc(100vh - 140px) !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .hero.hero--memorial h1 { font-size: clamp(30px, 6vw, 52px) !important; }
  .hero.hero--memorial h1 .secondary { font-size: clamp(18px, 4vw, 30px) !important; }
}

/* Mobile */

@media (max-width: 600px) {
  .hero.hero--memorial {
    max-height: calc(100vh - 120px) !important;
    height: calc(100vh - 120px) !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .hero.hero--memorial h1 {
    font-size: clamp(28px, 8.5vw, 44px) !important;
    margin: 6px 0 !important;
  }
  .hero.hero--memorial h1 .secondary {
    font-size: clamp(16px, 5vw, 24px) !important;
  }
  .hero.hero--memorial .lede {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 4px 0 8px !important;
    /* Limit to ~2 lines so the CTA doesn't get pushed off screen */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero.hero--memorial .hero-ruo-pill {
    margin: 4px 0 !important;
    font-size: 9px !important;
    padding: 4px 10px !important;
  }
  .hero.hero--memorial .hero-cta-group .ctas .btn.light {
    padding: 12px 22px !important;
    font-size: 14px !important;
    min-height: 48px !important;
  }
  /* Hide the secondary CTA on mobile — only show primary "Shop the Sale" */
  .hero.hero--memorial .hero-cta-group .ctas .btn.ghost-light { display: none !important; }
  /* Hero video gets smaller so text/CTA can dominate */
  .hero.hero--memorial .hero-video {
    max-height: 160px;
    overflow: hidden;
  }
}

@media (max-width: 380px) {
  .hero.hero--memorial h1 { font-size: 26px !important; }
  .hero.hero--memorial h1 .secondary { font-size: 15px !important; }
  .hero.hero--memorial .hero-video { display: none !important; }
}

/* =====================================================================
   MOBILE HEADER MARQUEE — was getting killed by prefers-reduced-motion
   leaving the bar looking like a static truncated banner. Always
   animate; just slow it down a bit when reduced motion is requested.
===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .nova-announce.nova-announce--marquee .nova-announce__track {
    animation: nova-marquee 60s linear infinite !important;
  }
}

/* Desktop — reduce H1 by ~40%, hide secondary subheading for compactness */

.hero.hero--memorial h1 {
  font-size: clamp(28px, 3.5vw, 52px) !important;
  line-height: 0.98 !important;
  margin: 4px 0 !important;
}

.hero.hero--memorial h1 .secondary {
  font-size: clamp(16px, 1.6vw, 22px) !important;
  margin-top: 4px !important;
  opacity: 0.5 !important;
  display: block;
}

.hero.hero--memorial .lede {
  font-size: 12px !important;
  line-height: 1.4 !important;
  margin: 4px 0 8px !important;
  max-width: 480px;
}

.hero.hero--memorial .hero-ruo-pill {
  margin: 4px 0 !important;
  padding: 4px 10px !important;
  font-size: 9px !important;
}

.hero.hero--memorial .badge.badge--memorial {
  padding: 5px 12px !important;
  font-size: 11px !important;
  margin-bottom: 6px !important;
}

.hero.hero--memorial .hero-cta-group {
  margin-top: 6px !important;
}

.hero.hero--memorial .hero-cta-group .ctas .btn.light {
  padding: 12px 26px !important;
  font-size: 14px !important;
}

.hero.hero--memorial .hero-shipping-line {
  margin-top: 6px !important;
  font-size: 10px !important;
}

/* Tighten outer padding */

.hero.hero--memorial {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  overflow: visible !important; /* don't clip if content barely overflows */
  max-height: none !important;
  min-height: calc(100vh - 160px) !important;
  height: auto !important;
}

/* Tablet */

@media (max-width: 880px) {
  .hero.hero--memorial {
    min-height: calc(100vh - 140px) !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .hero.hero--memorial h1 { font-size: clamp(26px, 5vw, 42px) !important; }
  .hero.hero--memorial h1 .secondary { font-size: clamp(14px, 3vw, 20px) !important; }
}

/* Mobile */

@media (max-width: 600px) {
  .hero.hero--memorial {
    min-height: calc(100vh - 120px) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .hero.hero--memorial h1 {
    font-size: clamp(24px, 7vw, 36px) !important;
    margin: 4px 0 !important;
  }
  .hero.hero--memorial h1 .secondary {
    font-size: clamp(14px, 4vw, 18px) !important;
  }
  /* Hide secondary "Stack & save more" on mobile entirely — too long */
  .hero.hero--memorial h1 .secondary { display: none !important; }
  .hero.hero--memorial .lede {
    font-size: 11px !important;
    margin: 2px 0 6px !important;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero.hero--memorial .hero-ruo-pill { font-size: 8px !important; padding: 3px 8px !important; }
  .hero.hero--memorial .badge.badge--memorial { font-size: 10px !important; padding: 4px 10px !important; }
  .hero.hero--memorial .hero-cta-group .ctas .btn.light {
    padding: 12px 22px !important;
    font-size: 13px !important;
    min-height: 46px !important;
  }
  /* Hide hero-video entirely on mobile — text/CTA gets full focus */
  .hero.hero--memorial .hero-video {
    display: none !important;
  }
  /* Single-column layout on mobile so the text takes full width */
  .hero.hero--memorial .grid {
    grid-template-columns: 1fr !important;
  }
}

/* Banner spacing on cart page */

body.woocommerce-cart .nova-md-banner {
  margin: 6px 0 12px !important;
  padding: 12px 14px !important;
}

@media (max-width: 768px) {
  body.woocommerce-cart .entry-header {
    padding: 8px 0 4px !important;
  }
  body.woocommerce-cart h1.entry-title {
    font-size: 22px !important;
  }
  body.woocommerce-cart .nova-md-banner {
    margin: 4px 0 8px !important;
    padding: 10px 12px !important;
  }
  body.woocommerce-cart .shop_table.cart th,
  body.woocommerce-cart .shop_table.cart td {
    padding: 10px !important;
  }
}

/* =====================================================================
   HERO ONE-SCREEN — FINAL PASS. New compact headline ("Buy 1, Get 1
   Free." in one line + "Stack & save more." as small secondary) fits
   easily in the viewport with the CTA visible.
===================================================================== */

.hero.hero--memorial h1.hero-h1--memorial {
  font-size: clamp(28px, 4vw, 56px) !important;
  line-height: 1.05 !important;
  margin: 6px 0 !important;
  letter-spacing: -0.02em !important;
}

.hero.hero--memorial h1.hero-h1--memorial .secondary {
  display: block !important;
  font-size: clamp(14px, 1.6vw, 22px) !important;
  font-weight: 600 !important;
  opacity: 0.55 !important;
  margin-top: 4px !important;
  line-height: 1.2 !important;
}

@media (max-width: 880px) {
  .hero.hero--memorial h1.hero-h1--memorial {
    font-size: clamp(26px, 5.5vw, 40px) !important;
  }
  .hero.hero--memorial h1.hero-h1--memorial .secondary {
    font-size: clamp(13px, 3vw, 18px) !important;
  }
}

@media (max-width: 600px) {
  .hero.hero--memorial h1.hero-h1--memorial {
    font-size: clamp(24px, 7vw, 32px) !important;
    margin: 4px 0 !important;
  }
  /* Hide secondary "Stack & save more" on mobile to save vertical space */
  .hero.hero--memorial h1.hero-h1--memorial .secondary {
    display: none !important;
  }
}

/* =====================================================================
   MOBILE MARQUEE — FINAL bulletproof rules.
   Solid background (no gradient that could hide text on light middle),
   forced single-line scroll, fast cycle so all 6 items pass quickly,
   tight padding so it doesn't eat hero space.
===================================================================== */

@media (max-width: 768px) {
  body .nova-announce.nova-announce--marquee,
  body .nova-announce.nova-announce--memorial.nova-announce--marquee {
    /* Solid deep purple — no gradient ambiguity */
    background: #6E3FF3 !important;
    color: #FFFFFF !important;
    /* Force block layout (not flex) so it can't wrap */
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    /* Tight padding so it doesn't eat hero space */
    padding: 8px 0 !important;
    gap: 0 !important;
    text-align: left !important;
    height: auto !important;
    line-height: 1 !important;
  }
  body .nova-announce.nova-announce--marquee .nova-announce__track,
  body .nova-announce.nova-announce--memorial.nova-announce--marquee .nova-announce__track {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    gap: 36px !important;
    white-space: nowrap !important;
    /* Faster scroll on mobile so messages cycle visibly */
    animation: nova-marquee 20s linear infinite !important;
    align-items: center !important;
    will-change: transform;
  }
  body .nova-announce.nova-announce--marquee .nova-announce__item,
  body .nova-announce.nova-announce--memorial.nova-announce--marquee .nova-announce__item {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    color: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
  }
  body .nova-announce.nova-announce--marquee .nova-announce__item strong,
  body .nova-announce.nova-announce--memorial.nova-announce--marquee .nova-announce__item strong {
    color: #FFFFFF !important;
    font-weight: 800 !important;
  }
  body .nova-announce.nova-announce--marquee .nova-announce__item .accent,
  body .nova-announce.nova-announce--memorial.nova-announce--marquee .nova-announce__item .accent {
    background: rgba(255,255,255,.25) !important;
    color: #FFFFFF !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
  }
  /* Pause on tap-hold instead of preventing scroll */
  body .nova-announce.nova-announce--marquee:active .nova-announce__track {
    animation-play-state: paused !important;
  }
}

@media (max-width: 380px) {
  body .nova-announce.nova-announce--marquee .nova-announce__item {
    font-size: 11px !important;
  }
  body .nova-announce.nova-announce--marquee .nova-announce__track {
    gap: 28px !important;
    animation-duration: 18s !important;
  }
}

/* =====================================================================
   HERO — STRIPPED DOWN. Only the Memorial Day pill, headline, and CTA
   render during the sale. Everything else (lede, RUO pill, secondary
   subheading, shipping line, trust row) is hidden so the CTA fits in
   the initial viewport on every screen.
===================================================================== */

.hero.hero--memorial {
  /* Lock hero to exactly the viewport minus top bars */
  min-height: calc(100vh - 160px) !important;
  max-height: calc(100vh - 160px) !important;
  height: calc(100vh - 160px) !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  overflow: hidden !important;
}

.hero.hero--memorial .wrap {
  height: 100%;
  display: flex;
  align-items: center;
}

.hero.hero--memorial .grid {
  width: 100%;
  align-items: center;
}

/* HIDE everything that isn't critical during the sale */

.hero.hero--memorial .lede,
.hero.hero--memorial .hero-ruo-pill,
.hero.hero--memorial .hero-shipping-line,
.hero.hero--memorial .trust,
.hero.hero--memorial h1 .secondary {
  display: none !important;
}

/* Compact what's left */

.hero.hero--memorial .badge.badge--memorial {
  margin: 0 0 16px 0 !important;
  padding: 6px 14px !important;
  font-size: 11px !important;
}

.hero.hero--memorial h1.hero-h1--memorial,
.hero.hero--memorial h1 {
  font-size: clamp(34px, 5vw, 68px) !important;
  line-height: 1.02 !important;
  margin: 0 0 20px 0 !important;
  letter-spacing: -0.02em !important;
}

.hero.hero--memorial .hero-cta-group {
  margin: 0 !important;
}

.hero.hero--memorial .hero-cta-group .ctas {
  margin: 0 !important;
  gap: 12px !important;
}

.hero.hero--memorial .hero-cta-group .ctas .btn.light {
  padding: 16px 32px !important;
  font-size: 15px !important;
  min-height: 52px !important;
}

.hero.hero--memorial .hero-cta-group .ctas .btn.ghost-light {
  padding: 16px 28px !important;
  font-size: 14px !important;
}

/* Tablet */

@media (max-width: 880px) {
  .hero.hero--memorial {
    min-height: calc(100vh - 140px) !important;
    max-height: calc(100vh - 140px) !important;
    height: calc(100vh - 140px) !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .hero.hero--memorial h1 { font-size: clamp(30px, 6vw, 52px) !important; }
}

/* Mobile */

@media (max-width: 600px) {
  .hero.hero--memorial {
    min-height: calc(100vh - 120px) !important;
    max-height: calc(100vh - 120px) !important;
    height: calc(100vh - 120px) !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  .hero.hero--memorial .badge.badge--memorial {
    margin: 0 auto 14px !important;
    font-size: 10px !important;
    padding: 5px 12px !important;
  }
  .hero.hero--memorial h1 {
    font-size: clamp(28px, 8vw, 42px) !important;
    margin: 0 0 16px 0 !important;
    text-align: center !important;
  }
  .hero.hero--memorial .hero-cta-group {
    text-align: center !important;
  }
  .hero.hero--memorial .hero-cta-group .ctas {
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .hero.hero--memorial .hero-cta-group .ctas .btn.light {
    padding: 14px 28px !important;
    font-size: 14px !important;
    width: 100% !important;
    max-width: 280px !important;
  }
  /* Hide secondary CTA on mobile — only Shop the Sale visible */
  .hero.hero--memorial .hero-cta-group .ctas .btn.ghost-light {
    display: none !important;
  }
  /* Hide hero video entirely on mobile so single-column text takes full width */
  .hero.hero--memorial .hero-video { display: none !important; }
  .hero.hero--memorial .grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .hero.hero--memorial .grid > div:first-child {
    text-align: center !important;
  }
}

@media (max-width: 380px) {
  .hero.hero--memorial h1 { font-size: 26px !important; }
}

/* =====================================================================
   FORCE CTA VISIBLE — text column is a centered flex column, CTA gets
   z-index lift, button styling locked via inline-safe selectors.
===================================================================== */

.hero.hero--memorial .wrap,
.hero.hero--memorial .grid {
  height: 100% !important;
}

.hero.hero--memorial .grid {
  display: grid !important;
  align-items: center !important;
}

.hero.hero--memorial .grid > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  height: 100% !important;
  gap: 0 !important;
}

.hero.hero--memorial .hero-cta-group,
.hero.hero--memorial .hero-cta-group .ctas {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 5 !important;
}

.hero.hero--memorial .hero-cta-group .ctas .btn.light {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: var(--purple, #6E3FF3) !important;
  color: #FFFFFF !important;
  padding: 16px 36px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  min-height: 52px !important;
  box-shadow: 0 12px 28px rgba(110,63,243,.45) !important;
  text-decoration: none !important;
  align-items: center !important;
  gap: 10px !important;
}

.hero.hero--memorial .hero-cta-group .ctas .btn.light:hover {
  background: #7c4af5 !important;
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .hero.hero--memorial .grid > div:first-child {
    align-items: center !important;
    text-align: center !important;
  }
  .hero.hero--memorial .hero-cta-group {
    width: 100%;
    justify-content: center !important;
  }
  .hero.hero--memorial .hero-cta-group .ctas {
    width: 100%;
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .hero.hero--memorial .hero-cta-group .ctas .btn.light {
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
    padding: 14px 28px !important;
  }
}

/* =====================================================================
   HERO H1 — final sizing so "Buy 1 Get 1 Free." fits without clipping
   on any viewport. Single line on desktop, max two lines on mobile.
===================================================================== */

.hero.hero--memorial h1.hero-h1--memorial,
.hero.hero--memorial h1 {
  font-size: clamp(32px, 4.5vw, 64px) !important;
  line-height: 1.05 !important;
  margin: 0 0 20px 0 !important;
  letter-spacing: -0.025em !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}

.hero.hero--memorial h1 .secondary {
  display: none !important;
}

@media (max-width: 880px) {
  .hero.hero--memorial h1.hero-h1--memorial,
  .hero.hero--memorial h1 {
    font-size: clamp(28px, 6vw, 44px) !important;
  }
}

@media (max-width: 600px) {
  .hero.hero--memorial h1.hero-h1--memorial,
  .hero.hero--memorial h1 {
    font-size: clamp(26px, 8vw, 36px) !important;
    margin: 0 0 16px 0 !important;
  }
}

@media (max-width: 380px) {
  .hero.hero--memorial h1.hero-h1--memorial,
  .hero.hero--memorial h1 {
    font-size: 24px !important;
  }
}

/* CheckoutWC's title section can be completely hidden on mobile —
   the auto-scroll lands at the form anyway */

@media (max-width: 768px) {
  body.cfw-checkout .cfw-title-section,
  body.woocommerce-checkout .entry-header {
    padding: 6px 0 0 !important;
    margin: 0 !important;
  }
  body.cfw-checkout .cfw-title-section h1,
  body.woocommerce-checkout h1.entry-title {
    font-size: 18px !important;
    margin: 0 !important;
  }
  body.cfw-checkout .cfw-title-section p,
  body.woocommerce-checkout .entry-header p {
    display: none !important; /* subtitle hidden on mobile */
  }
  body.cfw-checkout .nova-md-banner,
  body.woocommerce-checkout .nova-md-banner,
  body.woocommerce-cart .nova-md-banner {
    margin: 4px 0 6px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
}

/* ── HERO MOBILE FILL ──
 * Center content vertically in the hero box. Larger CTA. Ensure the
 * badge, headline, and Shop the Sale button all fill the available
 * vertical space cleanly without awkward gaps. */

@media (max-width: 600px) {
  .hero.hero--memorial {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 0 !important;
  }
  .hero.hero--memorial .wrap {
    width: 100%;
    padding: 0 22px !important;
  }
  .hero.hero--memorial .grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .hero.hero--memorial .grid > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 14px !important;
    width: 100% !important;
  }
  .hero.hero--memorial .badge.badge--memorial {
    margin: 0 !important;
    font-size: 10px !important;
    padding: 6px 14px !important;
    letter-spacing: 0.14em !important;
  }
  .hero.hero--memorial h1.hero-h1--memorial,
  .hero.hero--memorial h1 {
    margin: 0 !important;
    font-size: clamp(30px, 9vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    text-align: center !important;
  }
  .hero.hero--memorial .hero-cta-group {
    margin: 0 !important;
    width: 100% !important;
  }
  .hero.hero--memorial .hero-cta-group .ctas {
    width: 100%;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .hero.hero--memorial .hero-cta-group .ctas .btn.light {
    width: 100% !important;
    max-width: 340px !important;
    padding: 16px 24px !important;
    font-size: 15px !important;
    min-height: 54px !important;
    justify-content: center !important;
    background: var(--purple, #6E3FF3) !important;
    box-shadow: 0 14px 32px rgba(110,63,243,.42) !important;
    letter-spacing: 0.01em !important;
  }
}

@media (max-width: 380px) {
  .hero.hero--memorial .wrap {
    padding: 0 16px !important;
  }
  .hero.hero--memorial h1 {
    font-size: clamp(26px, 8.5vw, 34px) !important;
  }
}

/* Hide the stats bar entirely on the homepage during sale.
   Multiple selectors to win the cascade no matter where it sits in DOM. */

body.home section.proof,
body.home .proof,
body.home-memorial section.proof,
.hero--memorial ~ section.proof,
.hero--memorial + .proof,
body.home section.proof.proof {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* =====================================================================
   HERO TEXT — MORE VERTICAL PADDING. Push the headline + CTA inward
   so they're not glued to the hero edges.
===================================================================== */

.hero.hero--memorial {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.hero.hero--memorial .badge.badge--memorial {
  margin-bottom: 28px !important;
}

.hero.hero--memorial h1.hero-h1--memorial,
.hero.hero--memorial h1 {
  margin-top: 12px !important;
  margin-bottom: 28px !important;
}

.hero.hero--memorial .hero-ruo-pill {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.hero.hero--memorial .hero-cta-group {
  margin-top: 28px !important;
}

@media (max-width: 880px) {
  .hero.hero--memorial {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
}

@media (max-width: 600px) {
  .hero.hero--memorial {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .hero.hero--memorial .badge.badge--memorial {
    margin-bottom: 22px !important;
  }
  .hero.hero--memorial h1 {
    margin-top: 8px !important;
    margin-bottom: 22px !important;
  }
  .hero.hero--memorial .hero-cta-group {
    margin-top: 22px !important;
  }
}

/* =====================================================================
   MD MARQUEE — match the RUO ticker's smoother feel.
   Slower duration (45s vs 32s), wider gap, same easing.
===================================================================== */

body .nova-announce.nova-announce--marquee .nova-announce__track,
.nova-announce--marquee .nova-announce__track {
  animation: nova-marquee 45s linear infinite !important;
  gap: 64px !important;
  padding-left: 64px !important;
}

@media (max-width: 768px) {
  body .nova-announce.nova-announce--marquee .nova-announce__track,
  .nova-announce--marquee .nova-announce__track {
    animation-duration: 32s !important;
    gap: 40px !important;
    padding-left: 32px !important;
  }
}

/* Add purple diamond separator between items (like RUO ticker has) */

.nova-announce--marquee .nova-announce__item + .nova-announce__item::before {
  content: "◆";
  margin-right: 18px;
  color: rgba(255,255,255,.55);
  font-size: 9px;
  vertical-align: middle;
  display: inline-block;
}

.single-product div.product .summary .nova-md-pdp,
.single-product div.product .summary .nova-md-tiercards,
.single-product div.product .summary .nova-md-freebie-pill,
.single-product div.product .summary .nova-md-countdown { order: 4; }

.single-product div.product .summary .nova-md-pdp { margin-top: 4px !important; margin-bottom: 10px !important; }

/* ============================================================
   Hero — Memorial Day pill + subtext (mobile-first polish)
   v2.16.11-MD
   ============================================================ */

.hero--memorial .hero-md-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  margin-bottom: 18px !important;
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  background: linear-gradient(90deg,#1E3A5F 0%,#7C3AED 50%,#6E3FF3 100%) !important;
  box-shadow: 0 8px 24px -8px rgba(124,58,237,.55), 0 0 0 1px rgba(255,255,255,.08) inset !important;
  animation: novaMdPillPulse 2.4s ease-in-out infinite !important;
}

.hero--memorial .hero-md-subtext {
  display: block !important;
  margin: 14px 0 22px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: rgba(255,255,255,.78) !important;
  letter-spacing: .01em !important;
  max-width: 480px !important;
}

.hero--memorial .hero-md-subtext::before {
  content: "✓ ";
  color: #A78BFA !important;
  font-weight: 800 !important;
  margin-right: 4px !important;
}

/* H1 mobile polish — gradient text + tighter */

.hero--memorial .hero-h1--memorial {
  background: linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 55%,#C4B5FD 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 8px 40px rgba(167,139,250,.25) !important;
}

/* Mobile-specific compaction */

@media (max-width: 768px) {
  .hero--memorial .hero-md-pill {
    font-size: 11px !important;
    padding: 7px 13px !important;
    margin-bottom: 14px !important;
    letter-spacing: .12em !important;
  }
  .hero--memorial .hero-h1--memorial {
    font-size: clamp(38px, 11vw, 56px) !important;
    line-height: 1.02 !important;
    margin: 0 0 4px !important;
  }
  .hero--memorial .hero-md-subtext {
    font-size: 14px !important;
    margin: 10px 0 18px !important;
    max-width: 100% !important;
  }
}

/* Reorder BOGO block children (works on all viewports) */

.nova-md-pdp { display: flex !important; flex-direction: column !important; }

.nova-md-pdp .nova-md-pdp__title     { order: 1 !important; margin-top: 0 !important; }

.nova-md-pdp .nova-md-pdp__tiers     { order: 2 !important; }

.nova-md-pdp .nova-md-pdp__countdown { order: 3 !important; margin-bottom: 10px !important; }

.nova-md-pdp .nova-md-pdp__free-pill { order: 4 !important; margin-top: 4px !important; margin-bottom: 0 !important; align-self: flex-start !important; }

@media (max-width: 768px) {
  /* Hide the product description on mobile during sale & always for PDP compaction */
  .single-product div.product .summary .woocommerce-product-details__short-description,
  .single-product div.product .summary > p:not(.price):not(.stock):not(.nova-keep) {
    display: none !important;
  }

  /* Pull entry summary right up under the gallery / header */
  .single-product div.product .summary.entry-summary,
  .single-product div.product .summary {
    margin-top: 0 !important;
    padding-top: 4px !important;
  }
  .single-product div.product .summary > h1.product_title,
  .single-product div.product .summary > h1 {
    margin-top: 2px !important;
    margin-bottom: 6px !important;
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.05 !important;
  }
  .nova-md-pdp { margin: 6px 0 10px 0 !important; }
  .nova-md-pdp .nova-md-pdp__title { font-size: 10px !important; margin: 0 0 8px 0 !important; }
  .nova-md-pdp .nova-md-pdp__tiers { gap: 8px !important; margin-bottom: 10px !important; }
  .nova-md-pdp .nova-md-pdp__countdown { margin: 0 0 8px 0 !important; padding: 8px 12px !important; font-size: 11px !important; }
  .nova-md-pdp .nova-md-pdp__free-pill { font-size: 11px !important; padding: 6px 12px !important; }

  /* Hide PDP product description on mobile only */
  .single-product .info > p.lede { display: none !important; }
}