/* ============================================================
   teas.co.uk — Rio Theme CSS
   Loaded ONLY when teas_active_theme === 'rio' (WP option).
   Source of truth: rio/home.html + rio.css prototype.
   Design brief: DESIGN_BRIEF.md — match the prototype exactly.
   ============================================================ */

/* ── 1. Rio colour & type tokens ───────────────────────────── */
.theme-rio {
  /* Page surfaces */
  --bg:           #F2F4F8;   /* page background — cool stone */
  --bg-2:         #E6EBF2;   /* alt surface */
  --paper:        #FFFFFF;   /* cards */
  --ink:          #0E1428;   /* primary text */
  --ink-2:        #3A4259;   /* secondary text */
  --ink-3:        #7A8298;   /* muted */
  --rule:         #D0D6E0;   /* hairlines */
  --brand:        #1faa9c;   /* primary CTA blue */
  --brand-soft:   #9EB5D8;   /* subdued brand fills */
  --pop:          #e84898;   /* hot pink accent — sparingly */
  --neon-1:       #1faa9c;   /* gradient stop 1 (blue) */
  --neon-2:       #30d8c8;   /* gradient stop 2 (purple) */
  --neon-3:       #e84898;   /* gradient stop 3 (pink) */

  /* V3 token aliases — keep existing templates working */
  --white:        #FFFFFF;
  --bone:         #F2F4F8;
  --char:         #0E1428;
  --ink-soft:     #3A4259;
  --ink-mute:     #7A8298;
  --ash:          #D0D6E0;
  --hair:         rgba(14,20,40,.10);
  --hair-2:       rgba(14,20,40,.06);
  --berry:        #e84898;   /* map pop onto existing berry accent */
  --indigo:       #30d8c8;   /* map purple onto indigo */
  --acc:          #1faa9c;   /* map brand onto accent */
  --acc-2:        #30d8c8;
  --cyan-deep:    #1faa9c;   /* replace cyan-deep with brand blue */

  /* Navy gradient stops → Rio blue palette */
  --navy-1:       #1faa9c;
  --navy-2:       #30d8c8;
  --navy-3:       #0E1428;
  --royal-1:      #4666b8;
  --royal-2:      #2a47a0;
  --royal-3:      #1a3280;
  --slate-grad:   linear-gradient(105deg,#1faa9c 0%,#30d8c8 50%,#e84898 100%);

  /* Rio typography */
  --font-serif:   "Instrument Serif", Georgia, serif;
  --font-sans:    "Manrope", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --fb:           "Manrope", system-ui, sans-serif;
  --fd:           "Instrument Serif", Georgia, serif;
  --fm:           "JetBrains Mono", ui-monospace, monospace;

  /* Shadows — Rio spec */
  --sh-card:      0 1px 0 rgba(255,255,255,1) inset,
                  0 2px 4px rgba(14,20,40,0.04),
                  0 14px 36px -20px rgba(14,20,40,0.12);
  --sh-card-h:    0 1px 0 rgba(255,255,255,1) inset,
                  0 24px 48px -16px rgba(232,58,138,0.18);
}

/* ── 2. Body + global type ──────────────────────────────────── */
html, body {
  font-family: var(--fb);
  color: var(--ink);
}

/* ── 3. Page background mesh (drifting) ─────────────────────── */
/* bgDrift on body: safe (background-position only, no filter).
   hueShiftSlow REMOVED from body — filter animation on body
   applies to all composited children including product images.
   Applied instead to gradient panels (footer, hero bands) in §24. */
body.theme-rio {
  background:
    radial-gradient(50% 40% at 100% 0%,
      color-mix(in oklab, #e84898, transparent 82%), transparent 70%),
    radial-gradient(55% 45% at 0% 30%,
      color-mix(in oklab, #1faa9c, transparent 80%), transparent 70%),
    radial-gradient(50% 40% at 80% 100%,
      color-mix(in oklab, #30d8c8, transparent 82%), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  background-size: 240% 240%, 220% 220%, 240% 240%, 100% 100%;
  animation: bgDrift 36s ease-in-out infinite alternate;
}

@keyframes hueShiftSlow {
  from { filter: none; }
  to   { filter: none; }
}

@keyframes bgDrift {
  0%   { background-position: 100% 0%,   0% 30%,   80% 100%, 0 0; }
  50%  { background-position:  60% 30%,  30% 0%,   50% 80%,  0 0; }
  100% { background-position:   0% 50%, 100% 100%,  20% 40%, 0 0; }
}

/* ── 4. Signature gradient — the brand mark ─────────────────── */
/* Any <em> inside .h-display gets the blue→purple→pink gradient.
   Rule: never more than 1–2 emphasis words per headline. */
.h-display em {
  background: linear-gradient(105deg, #1faa9c 0%, #30d8c8 50%, #e84898 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 200% 100%;
  animation: gradSweep 8s ease-in-out infinite alternate;
  font-style: italic;
}

@keyframes gradSweep {
  from { background-position:   0% 50%; }
  to   { background-position: 100% 50%; }
}

/* ── 5. All other Rio animations ────────────────────────────── */

/* Headlines drift hue subtly */
.h-display.lg,
.h-display.md {
  animation: titleHue 18s ease-in-out infinite alternate;
}

@keyframes titleHue {
  0%   { filter: none; }
  100% { filter: none; }
}

/* Tag chips (pop) — gentle aura pulse */
.tag.pop {
  animation: tagPulse 4s ease-in-out infinite;
}

@keyframes tagPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, #e84898, transparent 60%);
  }
  50% {
    box-shadow: 0 0 0 8px color-mix(in oklab, #e84898, transparent 88%);
  }
}

/* Live dot — heartbeat */
.util-dot {
  animation: heartbeat 1.6s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1);    opacity: 1; }
  20%      { transform: scale(1.3);              }
  40%      { transform: scale(1);    opacity: .7; }
  60%      { transform: scale(1.15); opacity: 1; }
}

/* Pop CTA — gradient pan */
.btn.pop {
  background: linear-gradient(105deg, #1faa9c 0%, #30d8c8 50%, #e84898 100%);
  background-size: 200% 100%;
  animation: ctaPan 10s ease-in-out infinite alternate;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 24px;
  font-weight: 600;
  box-shadow: 0 12px 28px -10px #1faa9c;
}

@keyframes ctaPan {
  0%   { background-position:   0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Placeholder / product images — subtle hue breathe */
.pick-img,
.product-img {
  animation: artBreathe 14s ease-in-out infinite alternate;
}

@keyframes artBreathe {
  0%   { filter: none; }
  50%  { filter: none; }
  100% { filter: none; }
}

/* Universal reduced-motion guard */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── 6. Display headlines ───────────────────────────────────── */
.h-display {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: .94;
}

.h-display.xl { font-size: clamp(52px,  8.2vw, 128px); }
.h-display.lg { font-size: clamp(38px,  5.6vw,  80px); }
.h-display.md { font-size: clamp(28px,  3.6vw,  48px); }
.h-display.sm { font-size: clamp(20px,  2.2vw,  28px); }

/* ── 7. Tags / pills ────────────────────────────────────────── */
.tag {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
}

.tag.solid {
  background: var(--ink);
  color: var(--paper);
  border: none;
}

.tag.pop {
  background: var(--pop);
  color: #fff;
  border: none;
}

/* ── 8. Cards (soft pass) ───────────────────────────────────── */
.card {
  background:
    radial-gradient(
      120% 80% at 0% 0%,
      color-mix(in oklab, var(--brand), transparent 96%) 0%,
      transparent 70%
    ),
    var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  border-bottom: 4px solid var(--brand);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 2px 4px rgba(14,20,40,0.04),
    0 14px 36px -20px rgba(14,20,40,0.12);
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    border-color .35s,
    box-shadow .45s;
}

.card:hover {
  transform: translateY(-6px);
  border-bottom-color: #1faa9c;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 24px 48px -16px rgba(232,58,138,0.18);
}

/* ── 9. Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
}

.btn.ink {
  background: var(--ink);
  color: #fff;
  border: none;
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}

/* ── 10. Nav — Rio glass treatment ─────────────────────────── */
body.theme-rio .utility-strip {
  background: linear-gradient(116deg, #8235c4 0%, #341551 72%);
  background-size: 170% 170%;
  animation: rioHeaderShift 22s ease-in-out infinite;
  color: rgba(255,255,255,.82);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.theme-rio .utility-inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 9px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
}

body.theme-rio .utility-left,
body.theme-rio .utility-right {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

body.theme-rio .utility-left b,
body.theme-rio .utility-right a:hover {
  color: #30d8c8;
}

body.theme-rio .utility-right a {
  color: rgba(255,255,255,.74);
}

body.theme-rio .util-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #30d8c8;
  box-shadow: 0 0 12px #30d8c8;
}

@keyframes rioHeaderShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Override the V3 opaque topbar with Rio's frosted-glass look */
.topbar {
  background: rgba(242,244,248,.88) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid rgba(208,214,224,.6) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 8px rgba(14,20,40,.06),
    0 12px 32px rgba(14,20,40,.04) !important;
}

body.theme-rio .topbar.rio-nav {
  max-width: 1240px;
  margin: 16px auto 12px;
  border-radius: 999px !important;
}

body.theme-rio .topbar .nav-logo .mark,
body.theme-rio .topbar .nav-logo .circle {
  background: #30d8c8 !important;
  color: #042220 !important;
  box-shadow: 0 4px 14px -6px rgba(182,232,95,.72);
}

body.theme-rio .topbar .nav-basket .b-mark {
  background: #30d8c8 !important;
  color: #042220 !important;
}

@media (max-width: 760px) {
  body.theme-rio .utility-inner {
    justify-content: center;
    text-align: center;
    padding: 9px 18px;
  }
  body.theme-rio .utility-right {
    display: none;
  }
  body.theme-rio .topbar.rio-nav {
    margin: 10px 14px 12px;
  }
}

/* Brand mark */
.brand .mark {
  background: var(--ink);
  color: var(--paper);
}

/* Active nav pill */
nav.pills a.active {
  background: var(--ink);
  color: var(--paper);
}

/* Bag button */
.bag {
  background: var(--ink);
  color: var(--paper);
}

.bag .b-mark {
  background: var(--pop);
  color: #fff;
}

/* ── 11. Section hero / segment hero bands ──────────────────── */
/* Override V3's navy gradient panels → deep purple to match homepage palette */
.seg-hero,
.seg-cta-final {
  background: linear-gradient(105deg, #0e6868 0%, #062828 50%, #042220 100%) !important;
  box-shadow:
    0 22px 50px -22px rgba(30,21,38,.55),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Navy panels → Rio gradient panels */
.navy-panel,
.navy-panel--royal,
.navy-panel--slate {
  background: linear-gradient(105deg, #1faa9c 0%, #30d8c8 50%, #e84898 100%) !important;
}

.navy-panel::before {
  background: radial-gradient(
    50% 60% at 100% 0%,
    rgba(232,58,138,.25),
    transparent
  ) !important;
}

/* ── 12. WooCommerce product cards ──────────────────────────── */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background:
    radial-gradient(
      120% 80% at 0% 0%,
      color-mix(in oklab, var(--brand), transparent 96%) 0%,
      transparent 70%
    ),
    var(--paper);
  border: 1px solid var(--rule) !important;
  border-radius: 18px !important;
  border-bottom: 4px solid var(--brand) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 2px 4px rgba(14,20,40,.04),
    0 14px 36px -20px rgba(14,20,40,.12);
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    border-color .35s,
    box-shadow .45s;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  transform: translateY(-6px);
  border-bottom-color: #30d8c8 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 24px 48px -16px rgba(232,58,138,.18);
}

/* WC add-to-cart CTA → Rio pop button */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce .single_add_to_cart_button {
  border-radius: 999px !important;
  font-weight: 600 !important;
}

.woocommerce .button.alt,
.woocommerce .single_add_to_cart_button,
a.checkout-button,
.woocommerce .button.checkout {
  background: linear-gradient(105deg, #1faa9c 0%, #30d8c8 50%, #e84898 100%) !important;
  background-size: 200% 100% !important;
  animation: ctaPan 10s ease-in-out infinite alternate !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 12px 28px -10px #1faa9c !important;
}

/* ── 13. Don'ts — enforce Rio rules ─────────────────────────── */
/* No #000 black — map to var(--ink) where possible */
/* No yellow/cream page backgrounds */
/* No coloured italic outside .h-display em */
/* No square corners on cards/panels/buttons/pills */

/* ── 14. Admin bar override ─────────────────────────────────── */
/* Keep WP admin bar in its own colour space, unaffected by page hue shift */
#wpadminbar {
  filter: none !important;
  animation: none !important;
}

/* ── 15. Homepage hero — Rio makeover ───────────────────────── */
/* More breathing room: the animated body background needs space
   to show above and around the hero cards. 44px top gives a
   generous 'floating on the gradient' feel. */
.theme-rio .hero {
  padding: 44px 44px 40px;
}

/* Left hero card: full Rio soft-pass treatment.
   Brand-tinted radial gradient + 4px bottom border (turns pink on hover). */
.theme-rio .hero-card {
  background:
    radial-gradient(
      120% 80% at 0% 0%,
      color-mix(in oklab, var(--brand), transparent 94%) 0%,
      transparent 70%
    ),
    var(--paper);
  border: 1px solid var(--rule);
  border-radius: 20px;
  border-bottom: 4px solid var(--brand);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 2px 4px rgba(14,20,40,0.04),
    0 14px 36px -20px rgba(14,20,40,0.12);
  transition: border-color .35s;
}

.theme-rio .hero-card:hover {
  border-bottom-color: #1faa9c;
}

/* Right cover panel: match the border-radius of the left card
   and add a subtle frosted top rim for depth. */
.theme-rio .cover {
  border-radius: 20px;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 4px solid rgba(255,255,255,.10);
}

/* Slightly wider gap between the two panels */
.theme-rio .hero-inner {
  gap: 20px;
}

/* Hero eyebrow label colour picks up brand */
.theme-rio .hero-card .eyebrow,
.theme-rio .hero-card .tag {
  border-color: color-mix(in oklab, var(--brand), transparent 70%);
}

@media (max-width: 900px) {
  .theme-rio .hero {
    padding: 32px 20px 28px;
  }
}
@media (max-width: 768px) {
  .theme-rio .hero {
    padding: 24px 16px 20px;
  }
}

/* ── 16. Hero headline gradient — override V3 Tiger teal on h1.h1 em ── */
/* The homepage h1 uses class=h1 not h-display, so the §4
   .h-display em rule doesn't match. Target it directly in Rio context. */
.theme-rio h1.h1 em,
.theme-rio .h1 em {
  background: linear-gradient(105deg, #1faa9c 0%, #30d8c8 50%, #e84898 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 200% 100%;
  animation: gradSweep 8s ease-in-out infinite alternate;
  font-style: italic;
}

/* ── 17. Sitewide accent remap — kills V3 Tiger teal everywhere ─ */
/* V3 Tiger used --accent:#5eead4 on dark panels. Rio maps it to
   --pop (#e84898) so every var(--accent) usage flips to hot pink.
   One token change patches: wiki hero em, seg hero em, biz hero em,
   seg eyebrow, active nav dot — all without touching those templates. */
.theme-rio {
  --accent:      #30d8c8;           /* electric teal accent */
  --accent-dark: #1faa9c;           /* teal-deep */
  --slate-grad:  linear-gradient(105deg, #0e6868 0%, #0a4444 50%, #e84898 100%); /* teal → pink gradient */
  --slate:       #062828;           /* deep teal */
  --cyan-deep:   #1faa9c;           /* h2 em → teal on all inner pages */
}

/* ── 18. Footer — Rio gradient rebrand ─────────────────────────── */
/* The footer was the most prominent V3 Tiger holdout: dark forest
   green bg + amber accents. Replace the whole colour system with
   Rio blue-purple-pink. Keep layout/typography intact. */

.theme-rio .foot {
  background: linear-gradient(135deg,
    #0e6868 0%, #062828 55%, #042220 100%) !important;
}

/* Newsletter strip: brand-blue tint instead of amber tint */
.theme-rio .foot .foot-news {
  background: linear-gradient(135deg,
    rgba(48,216,200,.12) 0%,
    rgba(48,216,200,.04) 60%,
    transparent 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}

/* Eyebrow chip: hot pink instead of amber */
.theme-rio .foot .fn-eyebrow {
  color: #042220 !important;
  background: rgba(48,216,200,.18) !important;
}

/* Email input focus ring: pop instead of amber */
.theme-rio .foot .fn-form input:focus {
  border-color: #fff !important;
  background: rgba(255,255,255,.18) !important;
}

/* Subscribe button: white-on-brand instead of amber gradient */
.theme-rio .foot .fn-form button {
  background: #e84898 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px -4px rgba(232,72,152,.38) !important;
}
.theme-rio .foot .fn-form button:hover {
  background: #f060c0 !important;
  filter: none !important;
}

/* Link hover: pop pink instead of amber */
.theme-rio .foot .col a:hover {
  color: #30d8c8 !important;
}

/* Brand mark in footer: pop bg */
.theme-rio .foot .b-brand .mark {
  background: #1faa9c !important;
  color: #042220 !important;
}

/* Social icon hover: white bg instead of amber */
.theme-rio .foot .b-socials a:hover {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.5) !important;
}

/* Trust badges: white-border instead of cream */
.theme-rio .foot .foot-trust li {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
}
.theme-rio .foot .foot-trust .ft-ic {
  color: #fff !important;
}

/* Explore links hover */
.theme-rio .foot .foot-explore .fx-links a:hover {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

/* Footer bot legal links */
.theme-rio .foot-bot .fb-legal a:hover {
  color: #30d8c8 !important;
}

/* ── 19. Wiki hero — Rio gradient ───────────────────────────────── */
/* Wiki index hero: was near-black (#042220).
   Bring it onto the Rio gradient panel system. */
.theme-rio .wk-hero {
  background: linear-gradient(135deg,
    #0e6868 0%, #0a4444 55%, #e84898 100%) !important;
}

/* Wiki search bar: white bg */
.theme-rio .wk-hero .wk-search {
  background: #30d8c8 !important;
  border-color: rgba(255,255,255,.4) !important;
}
.theme-rio .wk-hero .wk-search input {
  color: var(--ink) !important;
}
.theme-rio .wk-hero .wk-search button {
  background: var(--brand) !important;
  color: #fff !important;
}

/* ── 20. Interior page dark panels — Rio gradient ───────────────── */
/* All the dark hero panels that weren't overridden in §11.
   Covers: shop, brands, recipes, cafes, supplier, biz pages. */
.theme-rio .seg-hero::before,
.theme-rio .seg-hero::after,
.theme-rio .seg-cta-final::before,
.theme-rio .seg-cta-final::after {
  /* Remove V3 Tiger teal glow pseudo-elements */
  background: none !important;
}

/* Seg hero eyebrow: already handled by --accent remap above,
   but also force-override the hardcoded #5eead4 fallback */
.theme-rio .seg-page .seg-hero .eyebrow,
.theme-rio .seg-hero .eyebrow {
  color: #30d8c8 !important;
}
.theme-rio .seg-page .seg-hero .eyebrow .pip,
.theme-rio .seg-hero .eyebrow .pip {
  background: #1faa9c !important;
}

/* Seg hero em: hot pink instead of teal */
.theme-rio .seg-page .seg-hero h1 em,
.theme-rio .seg-hero h1 em {
  color: #30d8c8 !important;
}
.theme-rio .seg-cta-final h2 em {
  color: #30d8c8 !important;
}

/* Seg hero CTA button: white-on-brand instead of teal */
.theme-rio .seg-page .seg-hero .cta-primary,
.theme-rio .seg-hero .cta-primary {
  background: #e84898 !important;
  color: #ffffff !important;
}
.theme-rio .seg-cta-final .cta-primary {
  background: #e84898 !important;
  color: #ffffff !important;
}

/* Business/cafes/council hero em: hot pink override */
.theme-rio .biz-hero h1 em {
  color: #30d8c8 !important;
}

/* Interior heading em on dark backgrounds: hot pink across all hero types */
.theme-rio .gc-hero-l .gc-h1 em, .theme-rio .sm-hero-l .sm-h1 em,
.theme-rio .rf-hero-l .rf-h1 em, .theme-rio .rw-hero-l .rw-h1 em,
.theme-rio .sb-hero-l .sb-h1 em, .theme-rio .tc-hero-l .tc-h1 em,
.theme-rio .bz-hero-l .bz-h1 em,
.theme-rio .gc-hero .gc-h1 em, .theme-rio .sm-hero .sm-h1 em,
.theme-rio .rf-hero .rf-h1 em, .theme-rio .rw-hero .rw-h1 em,
.theme-rio .sb-hero .sb-h1 em, .theme-rio .tc-hero .tc-h1 em,
.theme-rio .bz-hero .bz-h1 em,
.theme-rio .sp-hero-l .sp-h1 em, .theme-rio .br-hero .br-h1 em,
.theme-rio .wk-hero-l .wk-h1 em, .theme-rio .we-hero-l .we-h1 em,
.theme-rio .rc-hero-l .rc-h1 em {
  color: #30d8c8 !important;
  -webkit-text-fill-color: #30d8c8 !important;
}

/* ── 21. Topbar ticker text — dark ink on frosted glass nav ───── */
/* V3 Tiger had a near-black topbar so the tnm scrolling text was
   light grey (rgb(210,216,230)). Rio's frosted-glass topbar is almost
   white — those same light greys become invisible. Force dark ink. */
.theme-rio .topbar,
.theme-rio .topbar.tnm-on {
  color: var(--ink) !important;
}
.theme-rio .topbar .tnm-track,
.theme-rio .topbar .tnm-group,
.theme-rio .topbar .tnm-group span {
  color: var(--ink) !important;    /* near-black — stable on frosted glass regardless of hue phase */
  font-weight: 500 !important;
}
.theme-rio .topbar .tnm-group .sep {
  color: rgba(14,20,40,.25) !important;
}
/* Hot-pink separators / pips remain pop */
.theme-rio .topbar .tnm-group svg {
  color: #30d8c8 !important;
}

/* ── 22. Homepage V2 — override hardcoded V3 teal glows ────────── */
/* page-home-v2.css has many hardcoded rgba(94,234,212,…) teal radial
   glows that cannot be fixed by token remapping. Override each in
   .theme-rio context so Rio brand colours replace the V3 teal. */

/* Hero-card top bar + glow — teal → Rio brand */
.theme-rio .hero-card::before {
  background: linear-gradient(90deg, #1faa9c 0%, #30d8c8 100%) !important;
}
.theme-rio .hero-card::after {
  background: radial-gradient(circle,
    rgba(48,216,200,.12), transparent 65%) !important;
}

/* Hero incentive strip — teal glass → Rio brand glass */
.theme-rio .hero-incentive {
  background: linear-gradient(135deg,
    rgba(48,216,200,.08), rgba(31,170,156,.04)) !important;
  border: 1px solid rgba(48,216,200,.18) !important;
}

/* Hero search focus ring — teal → brand blue */
.theme-rio .hero-search:focus-within {
  box-shadow: 0 0 0 3px rgba(48,216,200,.14) !important;
  border-color: #042220 !important;
}

/* Tea of the week info panel — slate-grad already remapped by token;
   remove the hardcoded teal pseudo-glow */
.theme-rio .totw-info::before {
  background: radial-gradient(circle,
    rgba(48,216,200,.12), transparent 70%) !important;
}

/* Cover (feature panel) glow */
.theme-rio .cover::before {
  background: radial-gradient(circle,
    rgba(232,58,138,.15), transparent 65%) !important;
}

/* Tea Finder: teal glow → brand blue glow */
.theme-rio .finder::before {
  background: radial-gradient(circle,
    rgba(48,216,200,.08), transparent 60%) !important;
}
.theme-rio .finder-head-left .eyebrow .dot {
  box-shadow: 0 0 0 4px rgba(48,216,200,.18) !important;
}
.theme-rio .finder-search:focus-within {
  border-color: #042220 !important;
  box-shadow: 0 0 0 3px rgba(48,216,200,.12) !important;
}
.theme-rio .results-banner {
  background: linear-gradient(135deg,
    rgba(48,216,200,.08), rgba(48,216,200,.02)) !important;
  border: 1px solid rgba(48,216,200,.18) !important;
}

/* Section picks — give the area a solid paper bg so animated body
   gradient doesn't bleed through around the cards */
.theme-rio .section-picks {
  background: var(--paper) !important;
}

/* Pick-card image panels — V3 dark navy → Rio blue gradient */
.theme-rio .pick-card .pick-image,
.theme-rio .pick-card.coral .pick-image,
.theme-rio .pick-card.mint  .pick-image,
.theme-rio .pick-card.green .pick-image,
.theme-rio .pick-card.sky   .pick-image,
.theme-rio .pick-card.lilac .pick-image,
.theme-rio .pick-card.rose  .pick-image,
.theme-rio .pick-card.pink  .pick-image {
  background: linear-gradient(155deg,
    #1faa9c 0%, #0e6868 55%, #062828 100%) !important;
}

/* Quad stat chip: teal → brand */
.theme-rio .quad-stat {
  background: rgba(48,216,200,.14) !important;
  color: #042220 !important;
}

/* Quad-card gift border/glow */
.theme-rio .quad-card.gift {
  border-color: rgba(48,216,200,.30) !important;
}
.theme-rio .quad-card.gift::before,
.theme-rio .quad-card.subscribe::before,
.theme-rio .quad-card.sample::before,
.theme-rio .quad-card.quiz::before {
  background: radial-gradient(circle,
    rgba(232,58,138,.14), transparent 70%) !important;
}
.theme-rio .quad-card:hover {
  border-color: rgba(48,216,200,.45) !important;
}

/* Wiki tag pills: teal gradient → Rio brand */
.theme-rio .wiki-tag {
  background: linear-gradient(135deg,
    rgba(48,216,200,.12), rgba(48,216,200,.04)) !important;
  border-color: rgba(48,216,200,.20) !important;
  color: #042220 !important;
}

/* Curator band glow */
.theme-rio .curator-band::before {
  background: radial-gradient(circle,
    rgba(232,58,138,.22), transparent 65%) !important;
}

/* Sign-up button: teal → Rio pop */
.theme-rio .signup button {
  background: #1faa9c !important;
  color: #042220 !important;
  box-shadow: 0 8px 20px -8px rgba(48,216,200,.4) !important;
}

/* Cover CTA: teal bg + dark text → white text on pop */
.theme-rio .cover-cta {
  background: #1faa9c !important;
  color: #042220 !important;
  box-shadow: 0 8px 24px -8px rgba(48,216,200,.4) !important;
}

/* ── 23. Footer brand mark — white text on hot-pink circle ─────── */
/* .footer-brand .mark uses var(--accent) bg (now hot pink) +
   var(--slate-deep) text (near-black). Force white text. */
.theme-rio .footer-brand .mark {
  color: #fff !important;
}

/* ── 24. Gradient-panel hue shift — footer + hero bands only ───── */
/* hueShiftSlow is scoped to these gradient panels ONLY.
   Product images and white cards are NOT affected (no body-level filter).
   The gradient panels shift through ±18° — stays in the blue/purple/pink
   range, never reaching red/brown/dark-green. */
.theme-rio .foot,
.theme-rio footer.footer,
.theme-rio .seg-hero,
.theme-rio .seg-cta-final,
.theme-rio .curator-band,
.theme-rio .navy-panel,
.theme-rio .navy-panel--royal,
.theme-rio .navy-panel--slate {
  animation: hueShiftSlow 90s ease-in-out infinite alternate;
}

/* ── 25. Wiki hero — lilac/purple palette override ────────────── */
/* page-wiki.css has a static ?ver= so changes don't cache-bust.
   Override here (filemtime versioned) to get lilac palette instead of #30d8c8 */
.wiki-hero h1 em {
  color: #30d8c8 !important;
  -webkit-text-fill-color: #30d8c8 !important;
}
.wiki-hero .kicker {
  color: #30d8c8 !important;
}
.wiki-hero .kicker .pip {
  background: #1faa9c !important;
  box-shadow: 0 0 14px #1faa9c !important;
}

/* Mobile source lock, 2026-06-16.
   Rio loads after the sitewide polish, so it needs its own final override for
   the supplied flat mobile header treatment and no filter-based hue shifts. */
@media (max-width: 860px) {
  body.theme-rio .utility-strip {
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    background: #042220 !important;
    color: rgba(255,255,255,.82) !important;
    animation: none !important;
  }

  body.theme-rio .utility-inner {
    width: auto !important;
    max-width: 30ch !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
    text-align: center !important;
    line-height: 1.35 !important;
  }

  body.theme-rio .utility-left {
    justify-content: center !important;
  }

  body.theme-rio .utility-right,
  body.theme-rio .utility-left .util-dot {
    display: none !important;
  }

  body.theme-rio .utility-left b {
    color: #30d8c8 !important;
  }

  body.theme-rio .topbar,
  body.theme-rio .topbar.rio-nav {
    width: 100% !important;
    max-width: none !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid #e4f0ed !important;
    border-radius: 0 !important;
    background: #eff7f6 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

body.theme-rio .foot,
body.theme-rio footer.footer,
body.theme-rio .seg-hero,
body.theme-rio .seg-cta-final,
body.theme-rio .curator-band,
body.theme-rio .navy-panel,
body.theme-rio .navy-panel--royal,
body.theme-rio .navy-panel--slate,
body.theme-rio .pick-img,
body.theme-rio .product-img,
body.theme-rio .h-display.lg,
body.theme-rio .h-display.md {
  animation-name: none !important;
  filter: none !important;
}

/* =====================================================================
   Sitewide utility marquee polish, 2026-06-16
   The shared header renders .utility-strip on every non-home template.
   Keep the announcements moving, readable, keyboard-friendly, and compact.
   ===================================================================== */
body.theme-rio .utility-strip {
  overflow: hidden !important;
  min-height: 38px !important;
  padding: 0 !important;
}

body.theme-rio .utility-inner.utility-marquee {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

body.theme-rio .utility-track {
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  min-width: 200% !important;
  white-space: nowrap !important;
  animation: teasUtilityMarquee 34s linear infinite !important;
  will-change: transform;
}

body.theme-rio .utility-strip:hover .utility-track,
body.theme-rio .utility-strip:focus-within .utility-track {
  animation-play-state: paused !important;
}

body.theme-rio .utility-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex: 0 0 auto !important;
  padding: 9px 28px !important;
}

body.theme-rio .utility-msg {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex-wrap: nowrap !important;
}

body.theme-rio .utility-link {
  color: rgba(255,255,255,.78) !important;
  text-decoration: none !important;
  transition: color .16s ease;
}

body.theme-rio .utility-link:hover,
body.theme-rio .utility-link:focus-visible,
body.theme-rio .utility-msg b {
  color: #30d8c8 !important;
}

body.theme-rio .utility-link:focus-visible {
  outline: 2px solid rgba(48,216,200,.85) !important;
  outline-offset: 4px !important;
  border-radius: 6px !important;
}

body.theme-rio .utility-sep {
  color: rgba(255,255,255,.34) !important;
}

body.theme-rio .utility-msg .util-dot {
  display: inline-block !important;
  flex: 0 0 7px !important;
}

@keyframes teasUtilityMarquee {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}

@media (max-width: 860px) {
  body.theme-rio .utility-strip {
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
  }

  body.theme-rio .utility-inner.utility-marquee {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    text-align: left !important;
    line-height: 1.25 !important;
  }

  body.theme-rio .utility-track {
    animation-duration: 24s !important;
  }

  body.theme-rio .utility-group {
    gap: 14px !important;
    padding: 7px 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-rio .utility-track {
    width: 100% !important;
    min-width: 0 !important;
    animation: none !important;
    transform: none !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  body.theme-rio .utility-group {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  body.theme-rio .utility-group[aria-hidden="true"] {
    display: none !important;
  }
}

/* Mobile utility marquee lock: compact, but still genuinely moving. */
@media (max-width: 860px) {
  body.theme-rio .utility-strip,
  .utility-strip {
    min-height: 34px !important;
    height: 34px !important;
    display: block !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    background: #042220 !important;
    color: rgba(255, 255, 255, .84) !important;
    border: 0 !important;
    text-align: left !important;
    font-family: var(--font-mono, var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace)) !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    overflow: hidden !important;
  }

  body.theme-rio .utility-inner.utility-marquee,
  .utility-inner.utility-marquee {
    display: flex !important;
    width: 100% !important;
    height: 34px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  body.theme-rio .utility-track,
  .utility-track {
    display: flex !important;
    align-items: center !important;
    width: max-content !important;
    min-width: 200% !important;
    white-space: nowrap !important;
    animation: teasUtilityMarquee 24s linear infinite !important;
    will-change: transform !important;
  }

  body.theme-rio .utility-group,
  .utility-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
    padding: 7px 18px !important;
    white-space: nowrap !important;
  }

  body.theme-rio .utility-strip::before,
  .utility-strip::before {
    content: none !important;
    display: none !important;
  }
}