/* ============================================================
   teas.co.uk, Claude sitewide polish
   Source: NEW UI LOOK SITEWIDE/teas polish (3), Sage render.
   Purpose: late-loaded token and component pass across the WP theme.
   ============================================================ */

:root {
  /* Electric teal and pink palette from the supplied Claude render. */
  --porcelain: #eff7f6;
  --page: #eff7f6;
  --paper: #f8fcfb;
  --paper-2: #f8fcfb;
  --surface: #ffffff;
  --bg-2: #f8fcfb;
  --white: #ffffff;
  --bone: #f8fcfb;
  --ink: #042220;
  --char: #042220;
  --ink-soft: #2a4a46;
  --slate: #2a4a46;
  --ink-mute: #6a8a86;
  --mist: #6a8a86;
  --muted: #6a8a86;
  --rule: #d6e8e4;
  --line: #d6e8e4;
  --rule-dim: #e4f0ed;
  --line-soft: #e4f0ed;
  --ash: #d6e8e4;
  --hair: rgba(4, 34, 32, 0.14);
  --hair-2: rgba(4, 34, 32, 0.07);

  --blue-1: #0e6868;
  --blue-2: #0a4444;
  --blue-3: #062828;
  --ceramic-blue: #e84898;
  --ceramic-blue-d: #c93680;
  --cyan: #30d8c8;
  --cyan-deep: #1faa9c;
  --accent: #30d8c8;
  --accent-dark: #1faa9c;
  --accent-bg: #eff7f6;
  --ceramic: #90f0e8;
  --violet: #f060c0;
  --acc: #30d8c8;
  --acc-2: #1faa9c;
  --berry: #e84898;
  --indigo: #0a4444;
  --amber: #90f0e8;
  --terracotta: #c93680;
  --lime: #90f0e8;
  --trustpilot: #00b67a;
  --slate-2: #0a4444;
  --slate-deep: #062828;
  --slate-grad: linear-gradient(155deg, #0e6868 0%, #0a4444 44%, #062828 100%);
  --teas-fluid-fallback:
    radial-gradient(52% 46% at 50% 46%, #30d8c8 0%, transparent 56%),
    radial-gradient(150% 150% at 50% 50%, #0e6868 0%, #0a4444 46%, #062828 100%);

  --fb: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --fd: "Newsreader", "Source Serif 4", Georgia, serif;
  --fm: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Newsreader", "Source Serif 4", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow-card: 0 30px 70px -34px rgba(7, 16, 38, 0.55);
  --sh-card: 0 4px 14px -10px rgba(15, 23, 42, 0.12);
  --sh-card-h: 0 22px 50px -24px rgba(4, 34, 32, 0.35);
  --sh-dark: 0 22px 50px -22px rgba(4, 34, 32, 0.45);
}

@property --teas-hh {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes teas-fluid-hue {
  0%, 100% { --teas-hh: 0deg; }
  50% { --teas-hh: 148deg; }
}

@keyframes teas-fluid-sweep {
  0%, 100% { background-position: 84% 8%, 84% 8%, 18% 92%, 82% 12%; }
  50% { background-position: 16% 92%, 16% 92%, 76% 14%, 18% 84%; }
}

@keyframes teas-fluid-breathe {
  0%, 100% { opacity: 0.58; transform: translate3d(0, 0, 0) scale(1); }
  50% { opacity: 0.86; transform: translate3d(22px, -18px, 0) scale(1.08); }
}

html,
body {
  background: var(--porcelain) !important;
  color: var(--ink);
  font-family: var(--sans);
  letter-spacing: 0;
}

body {
  min-height: 100vh;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

.screen-reader-text,
.skip-link.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link.screen-reader-text:focus,
.screen-reader-text:focus {
  z-index: 100000 !important;
  top: 12px !important;
  left: 12px !important;
  width: auto !important;
  height: auto !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: var(--ink) !important;
  box-shadow: 0 14px 32px -20px rgba(4, 34, 32, 0.5) !important;
}

::selection {
  background: var(--cyan);
  color: var(--ink);
}

button,
input,
select,
textarea {
  font-family: var(--sans);
}

.serif,
.brand .word,
.b-brand .word,
.foot .word,
h1,
h2,
h3,
.product_title,
.woocommerce-loop-product__title,
.entry-title,
.page-title,
.sec-head h2,
.fn-h,
.quote,
.rating .big,
.price,
.amount,
.hero-card-v2 .hc-title,
.hero-card-v2 .hc-price,
.rc-title,
.brand-card h3,
.wiki-cat-tile h3,
.wiki-ed h3,
.news-card h2,
.ncard h3,
.rel-card h3 {
  font-family: var(--display) !important;
  letter-spacing: 0 !important;
}

.mono,
.eyebrow,
.kicker,
.breadcrumb,
.fn-eyebrow,
.brand-region-badge,
.brand-card-count,
.hero-card-v2 .hc-eyebrow,
.hero-card-v2 .hc-brand,
.recipe-tag,
.rc-brand,
.rc-cta,
.wiki-guide-group-title,
.wiki-ed .kicker,
.foot h4,
.foot-trust,
.announce-msg,
.bag .b-text,
.b-total,
.b-mark {
  font-family: var(--mono) !important;
}

/* Header and announcement */
.announce-bar {
  background: var(--ink) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.announce-bar a,
.announce-freebie strong {
  color: var(--cyan) !important;
}

.shell {
  background: transparent;
}

.topbar {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(4, 34, 32, 0.08);
  box-shadow: 0 22px 52px -34px rgba(4, 34, 32, 0.45) !important;
  color: var(--ink);
}

.brand {
  border-color: rgba(4, 34, 32, 0.09) !important;
}

.brand .mark,
.b-brand .mark,
.foot .mark {
  background: #1faa9c !important;
  color: #ffffff !important;
}

nav.pills a,
.pills-list > li > a {
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}

nav.pills a:hover,
.pills-list > li > a:hover,
.icon-btn:hover {
  background: rgba(4, 34, 32, 0.06) !important;
  color: var(--ink) !important;
}

nav.pills a.active,
nav.pills a[aria-current="page"],
.pills-list > li.current-menu-item > a {
  background: var(--ink) !important;
  color: #ffffff !important;
}

body.home-v2 nav.pills a.shop:not(.active):not([aria-current="page"]) {
  background: transparent !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.icon-btn {
  border: 1px solid rgba(4, 34, 32, 0.12);
  background: #ffffff;
  color: var(--ink);
}

.bag {
  background: var(--ink) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.bag .b-mark {
  background: var(--cyan) !important;
  color: var(--ink) !important;
}

.bag .b-total,
.bag .b-sep,
.bag .b-text {
  color: rgba(255, 255, 255, 0.86) !important;
}

/* Electric fluid panel recipe, used broadly on dark surfaces and page heroes. */
.hero,
.foot.foot-v3,
.wiki-ed.dark,
.brands-edit.dark,
.promise.dark,
.pricing-card.dark,
.cta-tile.dark,
.ns-edit-tile.dark,
.biz-cta-final,
.seg-cta-final,
.club-cta-final,
.gift-cta-final,
.four04-hero,
.contact-side,
.archive-head,
.woocommerce-products-header,
.shop-hero,
.brands-hero,
.brand-hero,
.wiki-hero,
.recipes-hero,
.news-hero,
.about-hero,
.contact-hero,
.bcalc-hero,
.club-hero,
.gift-hero,
.sm-hero-l,
.pairings-hero,
.biz-hero,
.seg-hero,
.sub-hero,
.product-percup-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  background: var(--teas-fluid-fallback) !important;
  color: #ffffff !important;
  box-shadow:
    0 22px 50px -22px rgba(4, 34, 32, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero::before,
.foot.foot-v3::before,
.wiki-ed.dark::before,
.brands-edit.dark::before,
.promise.dark::before,
.pricing-card.dark::before,
.cta-tile.dark::before,
.ns-edit-tile.dark::before,
.biz-cta-final::before,
.seg-cta-final::before,
.club-cta-final::before,
.gift-cta-final::before,
.four04-hero::before,
.contact-side::before,
.archive-head::before,
.woocommerce-products-header::before,
.shop-hero::before,
.brands-hero::before,
.brand-hero::before,
.wiki-hero::before,
.recipes-hero::before,
.news-hero::before,
.about-hero::before,
.contact-hero::before,
.bcalc-hero::before,
.club-hero::before,
.gift-hero::before,
.sm-hero-l::before,
.pairings-hero::before,
.biz-hero::before,
.seg-hero::before,
.sub-hero::before,
.product-percup-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 46% at 50% 46%, hsl(calc(165deg + var(--teas-hh)), 88%, 66%) 0%, transparent 56%),
    radial-gradient(150% 150% at 50% 50%,
      hsl(calc(174deg + var(--teas-hh)), 72%, 22%) 0%,
      hsl(calc(178deg + var(--teas-hh)), 76%, 13%) 46%,
      hsl(calc(182deg + var(--teas-hh)), 80%, 5%) 100%),
    radial-gradient(42% 42% at 6% 100%, rgba(48, 216, 200, 0.38) 0%, transparent 64%),
    radial-gradient(34% 38% at 96% 0%, rgba(232, 72, 152, 0.46) 0%, transparent 68%);
  background-size: 220% 220%, 240% 240%, 150% 150%, 150% 150%;
  background-position: 84% 8%, 84% 8%, 18% 92%, 82% 12%;
  animation: teas-fluid-hue 19s ease-in-out infinite, teas-fluid-sweep 37s ease-in-out infinite;
  will-change: background-position;
}

.hero::after,
.foot.foot-v3::after,
.wiki-ed.dark::after,
.brands-edit.dark::after,
.promise.dark::after,
.pricing-card.dark::after,
.cta-tile.dark::after,
.ns-edit-tile.dark::after,
.biz-cta-final::after,
.seg-cta-final::after,
.club-cta-final::after,
.gift-cta-final::after,
.four04-hero::after,
.contact-side::after,
.archive-head::after,
.woocommerce-products-header::after,
.shop-hero::after,
.brands-hero::after,
.brand-hero::after,
.wiki-hero::after,
.recipes-hero::after,
.news-hero::after,
.about-hero::after,
.contact-hero::after,
.bcalc-hero::after,
.club-hero::after,
.gift-hero::after,
.sm-hero-l::after,
.pairings-hero::after,
.biz-hero::after,
.seg-hero::after,
.sub-hero::after,
.product-percup-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: screen;
  background-image: radial-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1.4px);
  background-size: 4px 4px;
}

.hero > *,
.foot.foot-v3 > *,
.wiki-ed.dark > *,
.brands-edit.dark > *,
.promise.dark > *,
.pricing-card.dark > *,
.cta-tile.dark > *,
.ns-edit-tile.dark > *,
.biz-cta-final > *,
.seg-cta-final > *,
.club-cta-final > *,
.gift-cta-final > *,
.four04-hero > *,
.contact-side > *,
.archive-head > *,
.woocommerce-products-header > *,
.shop-hero > *,
.brands-hero > *,
.brand-hero > *,
.wiki-hero > *,
.recipes-hero > *,
.news-hero > *,
.about-hero > *,
.contact-hero > *,
.bcalc-hero > *,
.club-hero > *,
.gift-hero > *,
.sm-hero-l > *,
.pairings-hero > *,
.biz-hero > *,
.seg-hero > *,
.sub-hero > *,
.product-percup-hero > * {
  position: relative;
  z-index: 1;
}

/* Homepage hero: adapt the current WP markup to the supplied visual target. */
body.home .hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 56px;
  align-items: center;
  margin: 0 calc(50% - 50vw) 64px;
  padding: 74px max(28px, calc((100vw - 1340px) / 2 + 28px)) 84px;
}

body.home .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 12px 12px;
  mix-blend-mode: overlay;
  z-index: 0;
}

body.home .hero > * {
  position: relative;
  z-index: 1;
}

body.home .hero-main {
  background: transparent !important;
  box-shadow: none !important;
  color: #ffffff;
  padding: 0 !important;
  min-height: 0;
}

body.home h1.head {
  color: #ffffff !important;
  font-size: 72px;
  font-weight: 600;
  line-height: 1;
  margin: 20px 0 22px;
  text-wrap: balance;
}

body.home h1.head em,
body.home h1.head .pin {
  color: var(--cyan) !important;
}

body.home .subhead {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 15px;
  line-height: 1.62;
  max-width: 560px;
}

body.home .subhead strong {
  color: #ffffff;
}

body.home .hero-meta {
  border-color: rgba(255, 255, 255, 0.16);
}

body.home .kpi .num,
body.home .kpi .num em {
  color: #ffffff;
  font-family: var(--display) !important;
  font-weight: 500;
}

body.home .kpi .lbl {
  color: rgba(255, 255, 255, 0.54);
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.home .hero-search {
  max-width: 620px;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

body.home .hero-search input {
  color: #ffffff;
}

body.home .hero-search input::placeholder,
body.home .hero-search svg {
  color: rgba(255, 255, 255, 0.64);
}

body.home .hero-search .btn-go,
.btn-primary,
.button,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single_add_to_cart_button,
.add_to_cart_button,
.cta-primary,
.biz-cta,
.club-cta,
.gift-cta,
.sm-cta,
.bom-cta {
  background: var(--ceramic-blue) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 30px -16px rgba(74, 68, 102, 0.78) !important;
}

body.home .hero-search .btn-go:hover,
.btn-primary:hover,
.button:hover,
.wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover,
.add_to_cart_button:hover,
.cta-primary:hover,
.biz-cta:hover,
.club-cta:hover,
.gift-cta:hover,
.sm-cta:hover,
.bom-cta:hover {
  background: var(--ceramic-blue-d) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

.btn-ghost,
.cta-secondary,
.sm-cta-ghost {
  color: var(--ink) !important;
  background: transparent !important;
  border: 1px solid rgba(4, 34, 32, 0.18) !important;
}

body.home .hero .btn-ghost {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.36) !important;
}

/* Cards and repeated tiles. */
.card,
.form-card,
.hero-card,
.hero-card-v2,
.route,
.find-card,
.find-tile,
.prod-card,
.ds-tile,
.home-ncard,
.news-card,
.ncard,
.rel-card,
.brand-card,
.bcard,
.wiki-cat-tile,
.wiki-guide-group,
.wiki-ed,
.wiki-person-card,
.recipe-card,
.rc-cat,
.promise,
.chans,
.faq,
.amount-card,
.club-tier,
.club-step,
.sm-fcard,
.archive-loop ul.products li.product,
.woocommerce ul.products li.product,
.upsells.products ul.products li.product,
.related.products ul.products li.product,
.summary-card,
.tpp-card,
.trustpilot-strip-v2 > * {
  background: #ffffff !important;
  border: 1px solid var(--rule) !important;
  border-radius: 18px !important;
  box-shadow: var(--sh-card) !important;
  color: var(--ink) !important;
}

.card:hover,
.find-card:hover,
.find-tile:hover,
.prod-card:hover,
.ds-tile:hover,
.home-ncard:hover,
.news-card:hover,
.ncard:hover,
.rel-card:hover,
.brand-card:hover,
.bcard:hover,
.wiki-cat-tile:hover,
.wiki-ed:hover,
.recipe-card:hover,
.rc-cat:hover,
.archive-loop ul.products li.product:hover,
.woocommerce ul.products li.product:hover {
  box-shadow: var(--sh-card-h) !important;
  border-color: rgba(77, 139, 155, 0.38) !important;
  transform: translateY(-3px);
}

.hero-card-v2 {
  min-height: 0;
  padding: 28px !important;
  background: #ffffff !important;
  color: var(--ink) !important;
}

.hero-card-v2 .hc-eyebrow,
.tag,
.chip,
.recipe-tag,
.brand-filter-row .ftab,
.wiki-search .quick a,
.tfb,
.wc-block-components-product-metadata,
.stock {
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  color: var(--ink-soft) !important;
  border-radius: 999px !important;
}

.hero-card-v2 .hc-pip,
.eyebrow .pip,
.eyebrow .dot,
.wiki-hero .kicker .pip,
.live-dot,
.stock .d,
.reason .d,
.util-dot {
  background: var(--cyan-deep) !important;
  box-shadow: 0 0 10px rgba(77, 139, 155, 0.42) !important;
}

.hero-card-v2 .hc-product-frame,
.woocommerce ul.products li.product img,
.archive-loop ul.products li.product img,
.wp-post-image,
.product .images img {
  background: var(--paper-2) !important;
  border-color: var(--rule) !important;
}

.hero-card-v2 .hc-body {
  background: transparent !important;
  color: var(--ink) !important;
  padding: 0 !important;
}

.hero-card-v2 .hc-brand,
.hero-card-v2 .hc-price,
.price,
.woocommerce-Price-amount,
.rc-brand,
.wiki-ed .kicker,
.brand-card-count,
.fn-eyebrow {
  color: var(--cyan-deep) !important;
}

.hero-card-v2 .hc-title,
.hero-card-v2 .hc-meta,
.hero-card-v2 .hc-stock,
.hero-card-v2 .hc-price bdi,
.hero-card-v2 .hc-price ins {
  color: var(--ink) !important;
}

.hero-card-v2 .hc-arrow {
  background: var(--ink) !important;
  color: var(--cyan) !important;
}

.hero-card-v2 .hc-meta {
  border-top-color: var(--rule) !important;
}

.sec-head h2 em,
h1.head em,
h2 em,
h3 em,
.quote .qm,
.it,
em.accent {
  color: var(--cyan-deep) !important;
  font-family: var(--display) !important;
  font-style: italic;
}

body.home .hero h1.head em,
body.home .hero h1.head .it,
.hero em.accent,
.foot em.accent,
.wiki-ed.dark em {
  color: var(--cyan) !important;
}

.eyebrow,
.kicker,
.mono,
.fn-eyebrow,
.brand-region-badge {
  color: var(--ink-mute) !important;
  letter-spacing: 0.14em;
}

.hero .eyebrow,
.hero .mono,
.hero .kicker,
.foot .eyebrow,
.foot .mono,
.foot h4,
.wiki-ed.dark .kicker,
.brands-edit.dark .kicker {
  color: var(--cyan) !important;
}

p,
.lede,
.sub,
.subhead,
.brand-card-tagline,
.wiki-ed p,
.recipe-card p,
.news-card p,
.ncard p,
.rel-card p,
.woocommerce-product-details__short-description,
.term-description,
.archive-collection-description {
  color: var(--ink-soft);
  letter-spacing: 0;
}

.hero p,
.foot p,
.wiki-ed.dark p,
.brands-edit.dark p,
.promise.dark p,
.cta-tile.dark p,
.ns-edit-tile.dark p {
  color: rgba(255, 255, 255, 0.76) !important;
}

.stars,
.star-rating,
.woocommerce .star-rating,
.trustpilot-strip-v2 .stars {
  color: var(--trustpilot) !important;
}

/* WooCommerce and archive hero surfaces inherit the animated fluid panel. */
.archive-head,
.woocommerce-products-header,
.shop-hero,
.brands-hero,
.recipes-hero,
.news-hero,
.about-hero,
.contact-hero,
.bcalc-hero,
.club-hero,
.gift-hero,
.sm-hero {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: var(--sh-card) !important;
  color: #ffffff !important;
}

.brands-hero h1,
.recipes-hero h1,
.news-hero h1,
.about-hero h1,
.contact-hero h1,
.shop-hero h1,
.archive-head h1,
.woocommerce-products-header h1 {
  color: #ffffff !important;
  font-weight: 500 !important;
}

.archive-head :is(h1, h2, h3),
.woocommerce-products-header :is(h1, h2, h3),
.shop-hero :is(h1, h2, h3),
.brands-hero :is(h1, h2, h3),
.brand-hero :is(h1, h2, h3),
.wiki-hero :is(h1, h2, h3),
.recipes-hero :is(h1, h2, h3),
.news-hero :is(h1, h2, h3),
.about-hero :is(h1, h2, h3),
.contact-hero :is(h1, h2, h3),
.bcalc-hero :is(h1, h2, h3),
.club-hero :is(h1, h2, h3),
.gift-hero :is(h1, h2, h3),
.sm-hero-l :is(h1, h2, h3),
.pairings-hero :is(h1, h2, h3),
.biz-hero :is(h1, h2, h3),
.seg-hero :is(h1, h2, h3),
.sub-hero :is(h1, h2, h3),
.product-percup-hero :is(h1, h2, h3) {
  color: #ffffff !important;
}

.archive-head :is(p, .lede, .sub, .subhead, .term-description),
.woocommerce-products-header :is(p, .lede, .sub, .subhead, .term-description),
.shop-hero :is(p, .lede, .sub, .subhead, .term-description),
.brands-hero :is(p, .lede, .sub, .subhead, .term-description),
.brand-hero :is(p, .lede, .sub, .subhead, .term-description),
.wiki-hero :is(p, .lede, .sub, .subhead, .term-description),
.recipes-hero :is(p, .lede, .sub, .subhead, .term-description),
.news-hero :is(p, .lede, .sub, .subhead, .term-description),
.about-hero :is(p, .lede, .sub, .subhead, .term-description),
.contact-hero :is(p, .lede, .sub, .subhead, .term-description),
.bcalc-hero :is(p, .lede, .sub, .subhead, .term-description),
.club-hero :is(p, .lede, .sub, .subhead, .term-description),
.gift-hero :is(p, .lede, .sub, .subhead, .term-description),
.sm-hero-l :is(p, .lede, .sub, .subhead, .term-description),
.pairings-hero :is(p, .lede, .sub, .subhead, .term-description),
.biz-hero :is(p, .lede, .sub, .subhead, .term-description),
.seg-hero :is(p, .lede, .sub, .subhead, .term-description),
.sub-hero :is(p, .lede, .sub, .subhead, .term-description),
.product-percup-hero :is(p, .lede, .sub, .subhead, .term-description) {
  color: rgba(255, 255, 255, 0.78) !important;
}

.archive-loop ul.products,
.woocommerce ul.products {
  gap: 18px !important;
}

.archive-loop ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button,
.related.products ul.products li.product .button,
.upsells.products ul.products li.product .button {
  width: auto;
  min-height: 42px;
  justify-content: center;
}

.single-product .summary,
.product .summary,
.woocommerce div.product div.summary {
  color: var(--ink);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
  background: var(--ink) !important;
  color: #ffffff !important;
}

/* Footer. */
.foot.foot-v3 {
  margin-top: 64px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.foot.foot-v3,
.foot.foot-v3 a,
.foot.foot-v3 p,
.foot.foot-v3 span,
.foot.foot-v3 h3,
.foot.foot-v3 h4 {
  color: rgba(255, 255, 255, 0.80) !important;
}

.foot.foot-v3 .fn-h,
.foot.foot-v3 .b-brand .word,
.foot.foot-v3 .col-brand .tag {
  color: #ffffff !important;
}

/* Fix: global .tag rule (c-sitewide-polish line 483) gives footer tagline a white pill background. Reset it. */
.foot.foot-v3 .col-brand .tag {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.foot-news,
.foot-grid,
.foot-trust,
.foot-bot {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.foot-news input {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

.foot-news input::placeholder {
  color: rgba(255, 255, 255, 0.48) !important;
}

.foot-news button {
  background: var(--cyan) !important;
  color: var(--ink) !important;
  border-radius: 999px !important;
}

.foot-trust li,
.b-socials a {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.foot.foot-v3 a:hover,
.foot.foot-v3 .fn-eyebrow,
.foot.foot-v3 h4,
.foot-trust .ft-ic {
  color: var(--cyan) !important;
}

/* Floating contact, overrides the older inline warm gradient. */
.floating-contact {
  font-family: var(--sans) !important;
}

.floating-contact.floating-contact .fc-toggle {
  background: var(--ink) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.80) !important;
  box-shadow: 0 16px 34px -18px rgba(4, 34, 32, 0.72) !important;
  letter-spacing: 0 !important;
}

.floating-contact.floating-contact .fc-toggle:hover {
  background: var(--ceramic-blue-d) !important;
}

@media (max-width: 760px) {
  body.error404 .floating-contact {
    display: none !important;
  }
}

.fc-menu {
  background: #ffffff !important;
  border-color: var(--rule) !important;
  color: var(--ink) !important;
}

.fc-item {
  color: var(--ink) !important;
}

.fc-item:hover {
  background: var(--paper-2) !important;
}

/* Mobile and tablet tuning. */
@media (max-width: 1180px) {
  body.home .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 64px;
  }

  body.home h1.head {
    font-size: 56px;
  }
}

@media (max-width: 760px) {
  .shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  body.home .hero {
    margin-left: -14px;
    margin-right: -14px;
    padding: 42px 18px 52px;
  }

  body.home h1.head {
    font-size: 42px;
    line-height: 1.04;
  }

  body.home .hero-meta {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hero-card-v2,
  .card,
  .brand-card,
  .recipe-card,
  .wiki-cat-tile,
  .archive-loop ul.products li.product,
  .woocommerce ul.products li.product {
    border-radius: 16px !important;
  }

  .topbar {
    top: 8px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
    padding: 8px 12px;
    text-align: center;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Homepage V2 correction: dark field + white recommendation card. */
body.home .hero {
  display: block !important;
  margin: 0 0 64px !important;
  padding: 28px 32px 56px !important;
  background: var(--teas-fluid-fallback) !important;
}

body.home .hero-inner {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.9fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

body.home .hero-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  padding: 44px 0 36px !important;
}

body.home .hero-card::before,
body.home .hero-card::after {
  content: none !important;
}

body.home h1.h1,
body.home .hero-card h1,
body.home .hero-card .hero-stat .num {
  color: #ffffff !important;
}

body.home h1.h1 {
  font-size: 72px;
  line-height: 1;
  font-weight: 600;
}

body.home h1.h1 em,
body.home .hero-card h1 em,
body.home .hero-card .hero-stat .num sup {
  color: var(--cyan) !important;
}

body.home .h1-sub,
body.home .hero-card p,
body.home .hero-card .hero-stat .lbl,
body.home .hero-card .hq-label {
  color: rgba(255, 255, 255, 0.74) !important;
}

body.home .h1-sub strong {
  color: #ffffff !important;
}

body.home .hero-card .eyebrow {
  color: var(--cyan) !important;
}

body.home .hero-card .eyebrow .dot {
  background: var(--cyan) !important;
}

body.home .hero-card .hero-stats {
  border-top-color: rgba(255, 255, 255, 0.18) !important;
}

body.home .hero-card .hero-stat + .hero-stat {
  border-left-color: rgba(255, 255, 255, 0.18) !important;
}

body.home .hero-card .hero-cta.primary {
  background: rgba(4, 34, 32, 0.74) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

body.home .hero-card .hero-cta.ghost {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  color: #ffffff !important;
}

body.home .hero-card .hq-chip {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

body.home .hero-card .hq-ct {
  color: var(--cyan) !important;
}

body.home .cover {
  background: #ffffff !important;
  border: 1px solid var(--rule) !important;
  border-radius: 28px !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--ink) !important;
}

body.home .cover::before,
body.home .cover::after {
  content: none !important;
}

body.home .cover,
body.home .cover p,
body.home .cover span,
body.home .cover div {
  color: var(--ink-soft) !important;
}

body.home .cover .cover-rec-label,
body.home .cover .cover-rec-dot,
body.home .cover .cover-brand,
body.home .cover .cover-cat,
body.home .cover .cover-notes-label,
body.home .cover .cover-status {
  color: var(--cyan-deep) !important;
}

body.home .cover .cover-rec-dot,
body.home .cover .cover-status .dot {
  background: var(--cyan-deep) !important;
  box-shadow: 0 0 10px rgba(77, 139, 155, 0.35) !important;
}

body.home .cover .cover-title,
body.home .cover .cover-title a,
body.home .cover h2,
body.home .cover h3,
body.home .cover .cover-price,
body.home .cover .cover-price bdi {
  color: var(--ink) !important;
}

body.home .cover .cover-title-sub {
  color: var(--cyan-deep) !important;
}

body.home .cover .cover-shot {
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
}

body.home .cover .cover-notes-chips span {
  background: var(--paper-2) !important;
  border-color: var(--rule) !important;
  color: var(--ink-soft) !important;
}

body.home .cover .cover-buy {
  background: var(--ceramic-blue) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
}

@media (max-width: 1180px) {
  body.home .hero-inner {
    grid-template-columns: 1fr !important;
  }

  body.home h1.h1 {
    font-size: 56px;
  }
}

@media (max-width: 760px) {
  body.home .hero {
    padding: 38px 18px 48px !important;
    margin-bottom: 34px !important;
  }

  body.home h1.h1 {
    font-size: 42px;
  }
}

body.home-v2 nav.nav.pills .teas-mega:not([data-open="true"]) > .teas-mega-trigger {
  background: transparent !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

body.home-v2 nav.nav.pills .teas-mega:not([data-open="true"]) > .teas-mega-trigger:hover {
  background: rgba(4, 34, 32, 0.06) !important;
  color: var(--ink) !important;
}

body.home-v2 > .topbar {
  min-height: 42px !important;
  margin-bottom: 0 !important;
  padding: 8px 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ink) !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

body.home-v2 > .topbar strong {
  color: rgba(255, 255, 255, 0.92) !important;
}

body.home-v2 > .topbar .cyan {
  color: var(--cyan) !important;
}

.announce-track {
  padding-left: 0 !important;
}

.wk-hc-rail {
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  scroll-snap-type: none !important;
}

.wk-hc-pip {
  flex: 0 1 auto !important;
}

@media (max-width: 760px) {
  body.home-v2 .topbar.tnm-on {
    overflow: visible !important;
    justify-content: center !important;
    white-space: normal !important;
  }

  body.home-v2 .topbar.tnm-on .tnm-track {
    animation: none !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    transform: none !important;
    white-space: normal !important;
  }

  body.home-v2 .topbar.tnm-on .tnm-group {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px 8px !important;
    padding-right: 0 !important;
    white-space: normal !important;
  }

  body.home-v2 .topbar.tnm-on .tnm-group:nth-child(2) {
    display: none !important;
  }

  body.home-v2 .topbar.tnm-on svg,
  body.home-v2 .topbar.tnm-on strong,
  body.home-v2 .topbar.tnm-on .sep,
  body.home-v2 .topbar.tnm-on .cyan {
    display: none !important;
  }

  body.home-v2 .topbar.tnm-on .tnm-group > span:not(.sep):not(.cyan) {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ============================================================
   PDP (single-product) hue re-assertion — Royal Purple + rose/cyan
   ============================================================
   rio.css scopes its body-level palette via .theme-rio and clobbers
   --ink, --acc and --brand with navy/blue values on every page that
   carries the theme-rio class (which is the whole site at present).
   On PDPs this leaks navy into the Staff Pick pill, the curator
   avatars, the dark Subscribe & Save / Quick Buy panel and the
   related-product card buttons.

   Re-assert the Royal Purple PDP hue (#8235c4) with the locked rose
   accent (#e84898) on body.single-product. Tokens only — no
   structural, padding or font changes. Specificity beats .theme-rio.
*/
.theme-rio.single-product,
body.single-product {
  /* primary text + dark surface tone — soft purple (matches :root) */
  --ink:        #322c47;
  --char:       #322c47;
  --ink-soft:   #4f4868;
  --slate:      #4f4868;
  --ink-mute:   #8983a0;

  /* page hue: Royal Purple family */
  --brand:      #8235c4;
  --brand-soft: #dbaef0;
  --hue:        #8235c4;
  --page-hue:   #8235c4;
  --brand-hue:  #8235c4;

  /* locked accent: rose/cyan, no lime-green pairing */
  --acc:        #e84898;
  --acc-2:      #30d8c8;
  --cyan:       #e84898;
  --cyan-deep:  #8235c4;

  /* legacy aliases used by rio.css gradients/badges */
  --neon-1:     #8235c4;
  --neon-2:     #b074e8;
  --neon-3:     #e84898;
  --navy-1:     #8235c4;
  --navy-3:     #341551;
  --indigo:     #b074e8;
  --berry:      #e84898;

  /* badge / pill helpers */
  --slate-grad: linear-gradient(116deg,#8235c4 0%,#341551 72%);

  /* override the polish ceramic-blue button fill — re-tone to Royal Purple */
  --ceramic-blue:   #8235c4;
  --ceramic-blue-d: #6a2aa3;
}

/* PDP — Royal Purple replaces the hardcoded navy buy-gradient from page-test-product.css */
.theme-rio.single-product .tpp,
body.single-product .tpp {
  --buy-grad:       linear-gradient(155deg, #8235c4 0%, #6a2aa3 55%, #341551 100%);
  --buy-grad-hover: linear-gradient(155deg, #b074e8 0%, #8235c4 55%, #5a1a8f 100%);
}

/* Beat the !important rules in page-test-product.css for the buy-combo + related-product CTAs */
body.single-product .tpp .buy-combo .bc-add,
body.single-product .tpp .buy-combo button.bc-add,
body.single-product .tpp .up-add,
body.single-product .tpp .related-cta,
body.single-product .tpp .loyalty-banner-ic,
body.single-product .tpp .faq-v2.open .faq-cat {
  background: linear-gradient(155deg, #8235c4 0%, #6a2aa3 55%, #341551 100%) !important;
}

body.single-product .tpp .buy-combo .bc-add:hover,
body.single-product .tpp .up-add:hover {
  background: linear-gradient(155deg, #b074e8 0%, #8235c4 55%, #5a1a8f 100%) !important;
}

/* Curator-says block (Curator Says / Lee on X) — navy gradient panel becomes Royal Purple */
body.single-product .tpp .curator-says,
body.single-product .tpp .curator-says--lead .cav {
  background: linear-gradient(155deg, #8235c4 0%, #6a2aa3 55%, #341551 100%) !important;
}

/* Loyalty pill background + points tag */
body.single-product .tpp .loyalty-row .pts {
  background: #341551 !important;
  color: #e84898 !important;
}

/* Tokens used by the PDP CSS for cyan/coral accents — re-tone to rose/cyan */
body.single-product .tpp .bc-final-qb { background: #e84898 !important; color: #341551 !important; }
body.single-product .tpp .bc-final-qb svg { stroke: #341551 !important; }

/* PDP — Skip-the-basket dark panel: navy gradient becomes Royal Purple */
body.single-product .tpp .buy-combo .bc-final-qb-wrap {
  background: linear-gradient(155deg, #8235c4 0%, #6a2aa3 55%, #341551 100%) !important;
  background-image:
    radial-gradient(circle at 78% 18%, rgba(48,216,200,0.20), transparent 55%),
    linear-gradient(155deg, #8235c4 0%, #6a2aa3 55%, #341551 100%) !important;
  box-shadow:
    0 8px 24px -8px rgba(52, 21, 81, .40),
    0 2px 4px -2px rgba(52, 21, 81, .25),
    0 1px 0 rgba(255,255,255,.10) inset !important;
}

/* Quick Buy CTA inside Skip-the-basket: rose on Royal Purple base */
body.single-product .tpp .buy-combo .bc-final-qb {
  background: #e84898 !important;
  color: #341551 !important;
  box-shadow: 0 8px 20px -8px rgba(232, 72, 152, .48), 0 1px 0 rgba(255,255,255,.25) inset !important;
}
body.single-product .tpp .buy-combo .bc-final-qb svg { stroke: #341551 !important; }

/* Caffeine row highlight strip — cyan/rose tint, not lime. */
body.single-product .tpp .caf-row.highlight {
  background: linear-gradient(90deg, rgba(48,216,200,.20), rgba(232,72,152,.08), transparent 92%) !important;
}

/* PDP — STAFF PICK hero badge + curator-rating avatars: navy → Royal Purple */
body.single-product .tpp .main-img .badge-img,
body.single-product .tpp .trust-card .trust-curator-row .av,
body.single-product .tpp .curator-score--big .av {
  background: linear-gradient(155deg, #8235c4 0%, #6a2aa3 55%, #341551 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(52, 21, 81, .30) !important;
}

/* Inactive tab buttons — navy text → Royal Purple ink for consistency */
body.single-product .tpp .tab-btn {
  color: #341551 !important;
  border-color: rgba(52, 21, 81, .10) !important;
}

/* Upsell badges (small navy/teal pills used on related-product rails) */
body.single-product .tpp .up-reason-tag,
body.single-product .tpp .us-h-mini-pip {
  background: #e84898 !important;
  color: #341551 !important;
}

/* ================================================================
   View basket / .added_to_cart unification (2026-06-03)
   The post-ATB "View basket" pill was navy on a few surfaces (PDP,
   homepage product blocks). Force an in-family deep teal so the
   colour story is consistent site-wide without green/purple clash.
   ================================================================ */
.added_to_cart,
a.added_to_cart,
.wc-forward.added_to_cart,
.ct-cart-actions .added_to_cart,
.entry-summary .added_to_cart {
  background: #063f46 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 9px 16px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  border: 0 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: transform .14s ease, background .14s ease !important;
}
.added_to_cart:hover,
a.added_to_cart:hover {
  background: #0a4444 !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* ================================================================
   Mobile footer containment (2026-06-02)
   The desktop footer carries useful SEO/customer links, but on mobile it
   was rendering as a 3,400px wall: full newsletter, five open sitemap
   columns, every "Explore more" chip, trust pills, mission line and legal.
   Keep the content available on desktop while making the phone footer a
   compact utility block customers can actually move past.
   ================================================================ */
@media (max-width: 640px) {
  .foot.foot-v3 {
    margin: 30px 8px 0 !important;
    border-radius: 22px !important;
  }

  .foot.foot-v3 .foot-news {
    display: block !important;
    padding: 18px !important;
  }

  .foot.foot-v3 .fn-eyebrow {
    margin-bottom: 8px !important;
    font-size: 9px !important;
  }

  .foot.foot-v3 .fn-h {
    font-size: 21px !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
  }

  .foot.foot-v3 .fn-sub {
    display: none !important;
  }

  .foot.foot-v3 .fn-form {
    margin-top: 12px !important;
    gap: 8px !important;
  }

  .foot.foot-v3 .fn-form input,
  .foot.foot-v3 .fn-form button {
    flex: 1 1 100% !important;
    width: 100% !important;
    height: 42px !important;
  }

  .foot.foot-v3 .foot-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 16px !important;
    padding: 18px !important;
  }

  .foot.foot-v3 .col-brand {
    grid-column: 1 / -1 !important;
    padding-right: 0 !important;
  }

  .foot.foot-v3 .b-brand {
    gap: 9px !important;
  }

  .foot.foot-v3 .b-brand .mark {
    width: 30px !important;
    height: 30px !important;
    font-size: 17px !important;
  }

  .foot.foot-v3 .b-brand .word {
    font-size: 20px !important;
    background: transparent !important;
    border: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  .foot.foot-v3 .tag {
    margin: 10px 0 8px !important;
    max-width: 28ch !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .foot.foot-v3 .b-addr {
    display: none !important;
  }

  .foot.foot-v3 .b-socials {
    gap: 7px !important;
  }

  .foot.foot-v3 .b-socials a {
    width: 30px !important;
    height: 30px !important;
  }

  .foot.foot-v3 .col h4,
  .foot.foot-v3 h4 {
    font-size: 9.5px !important;
    letter-spacing: .12em !important;
    margin-bottom: 8px !important;
    padding-bottom: 7px !important;
  }

  .foot.foot-v3 .col:not(.col-brand) a {
    font-size: 12px !important;
    line-height: 1.25 !important;
    padding: 3px 0 !important;
  }

  .foot.foot-v3 .col:not(.col-brand) a:nth-of-type(n+6) {
    display: none !important;
  }

  .foot.foot-v3 .foot-explore {
    display: block !important;
    padding: 14px 18px !important;
  }

  .foot.foot-v3 .foot-explore .fx-h {
    display: block !important;
    margin-bottom: 9px !important;
    font-size: 9.5px !important;
  }

  .foot.foot-v3 .foot-explore .fx-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 3px !important;
    scrollbar-width: none !important;
  }

  .foot.foot-v3 .foot-explore .fx-links::-webkit-scrollbar {
    display: none !important;
  }

  .foot.foot-v3 .foot-explore .fx-links a {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  .foot.foot-v3 .foot-trust {
    justify-content: flex-start !important;
    padding: 12px 18px !important;
    gap: 6px !important;
  }

  .foot.foot-v3 .foot-trust li {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    padding: 6px 9px !important;
  }

  .foot.foot-v3 .foot-trust li:nth-child(n+4),
  .foot.foot-v3 .foot-mission {
    display: none !important;
  }

  .foot.foot-v3 .foot-bot {
    display: block !important;
    padding: 14px 18px 18px !important;
    text-align: left !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
  }

  .foot.foot-v3 .foot-bot .fb-legal {
    justify-content: flex-start !important;
    margin: 8px 0 0 !important;
  }

  .foot.foot-v3 .foot-bot .fb-c:last-child {
    display: none !important;
  }
}

/* ================================================================
   Mobile source transfer, 2026-06-16
   Carries the supplied mobile homepage chrome across the real theme:
   flat teal/pink header, compact basket/search, full-width mobile drawer,
   and phone heroes that keep the electric fluid background unobscured.
   ================================================================ */
@media (max-width: 860px) {
  .announce-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 8px 16px !important;
    background: var(--ink) !important;
    color: rgba(255, 255, 255, 0.82) !important;
    border: 0 !important;
    text-align: center !important;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
  }

  .announce-bar .announce-track {
    display: none !important;
  }

  .announce-bar::before {
    content: "FREE UK DELIVERY OVER \00A3 35 \00B7  A FREE SAMPLE IN EVERY ORDER";
    max-width: 30ch;
  }

  .shell {
    width: 100% !important;
    max-width: none !important;
    padding: 0 0 34px !important;
    overflow: visible !important;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow: visible !important;
    background: var(--porcelain) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rule-dim) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .topbar .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 9px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .topbar .brand .mark {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    background: var(--cyan) !important;
    color: var(--ink) !important;
    font-size: 18px !important;
    box-shadow: 0 10px 22px -14px rgba(31, 170, 156, .85) !important;
  }

  .topbar .brand .word {
    display: inline !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 17px !important;
    color: var(--ink) !important;
  }

  .topbar .teas-mega {
    display: none !important;
  }

  .topbar .icon-btn:not([data-action="open-search"]),
  .topbar .points-pill,
  .topbar .rewards-pill {
    display: none !important;
  }

  .topbar .icon-btn[data-action="open-search"],
  .topbar .nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--rule) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--ink) !important;
    box-shadow: none !important;
  }

  .topbar .icon-btn[data-action="open-search"] svg,
  .topbar .nav-toggle svg {
    width: 17px !important;
    height: 17px !important;
  }

  .topbar .nav-toggle[aria-expanded="false"] .nav-toggle-close,
  .topbar .nav-toggle[aria-expanded="true"] .nav-toggle-open {
    display: none !important;
  }

  .topbar .nav-toggle[aria-expanded="true"] {
    background: var(--ink) !important;
    color: var(--cyan) !important;
    border-color: var(--ink) !important;
  }

  .topbar .bag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    min-width: 58px !important;
    flex: 0 0 auto !important;
    gap: 0 !important;
    padding: 6px 13px 6px 6px !important;
    border-radius: 999px !important;
    background: var(--ink) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .topbar .bag .b-mark {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: var(--cyan) !important;
    color: var(--ink) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  .topbar .bag .b-text,
  .topbar .bag .b-total {
    display: none !important;
  }

  .topbar nav.pills,
  .topbar #primary-nav {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 16px !important;
    right: 16px !important;
    z-index: 1001 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 92px) !important;
    max-width: none !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--rule) !important;
    border-radius: 16px !important;
    background: rgba(248, 252, 251, .98) !important;
    box-shadow: 0 24px 55px -34px rgba(4, 34, 32, .5) !important;
    backdrop-filter: blur(14px) !important;
    overflow: auto !important;
  }

  .topbar nav.pills[data-open="true"],
  .topbar #primary-nav[data-open="true"] {
    display: grid !important;
    height: min(420px, calc(100vh - 92px)) !important;
    block-size: min(420px, calc(100vh - 92px)) !important;
  }

  .topbar nav.pills a,
  .topbar .pills-list > li > a,
  .topbar #primary-nav > a {
    width: 100% !important;
    min-height: 44px !important;
    padding: 12px 14px !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    border: 1px solid rgba(4, 34, 32, .07) !important;
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }

  .topbar nav.pills a:hover,
  .topbar nav.pills a.active,
  .topbar nav.pills a[aria-current="page"],
  .topbar .pills-list > li.current-menu-item > a {
    background: var(--ink) !important;
    color: var(--cyan) !important;
  }

  .hero,
  .four04-hero,
  .archive-head,
  .woocommerce-products-header,
  .shop-hero,
  .brands-hero,
  .brand-hero,
  .wiki-hero,
  .recipes-hero,
  .news-hero,
  .about-hero,
  .contact-hero,
  .bcalc-hero,
  .club-hero,
  .gift-hero,
  .sm-hero-l,
  .pairings-hero,
  .biz-hero,
  .seg-hero,
  .sub-hero,
  .product-percup-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    border-radius: 0 !important;
  }

  .hero::after,
  .four04-hero::after,
  .archive-head::after,
  .woocommerce-products-header::after,
  .shop-hero::after,
  .brands-hero::after,
  .brand-hero::after,
  .wiki-hero::after,
  .recipes-hero::after,
  .news-hero::after,
  .about-hero::after,
  .contact-hero::after,
  .club-hero::after,
  .gift-hero::after {
    opacity: .04 !important;
  }

  .floating-contact,
  .fc-widget,
  .fc-toggle {
    display: none !important;
  }
}

@media (min-width: 861px) and (max-width: 1180px) {
  .shell {
    padding: 14px 18px 48px !important;
  }

  .topbar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 999px !important;
  }

  .topbar .brand {
    min-width: auto !important;
    padding-left: 4px !important;
    gap: 8px !important;
  }

  .topbar .brand .mark {
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
  }

  .topbar .brand .word {
    display: inline !important;
    font-size: 16px !important;
  }

  .topbar .nav-toggle {
    display: none !important;
  }

  .topbar nav.pills,
  .topbar #primary-nav {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 0 0 4px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  .topbar nav.pills a,
  .topbar .pills-list > li > a,
  .topbar #primary-nav > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 9px 8px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .topbar .icon-btn {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }

  .topbar .icon-btn:not([data-action="open-search"]) {
    display: none !important;
  }

  .topbar .bag {
    height: 36px !important;
    padding: 6px 11px 6px 6px !important;
  }

  .topbar .bag .b-text {
    display: none !important;
  }
}

@media (min-width: 861px) {
  .topbar #primary-nav > a[href*="/shop/"] {
    display: none !important;
  }
}

/* ================================================================
   Sitewide electric-fluid banner reassertion (2026-06-16)
   The first port of the supplied homepage hue missed several real
   staging surfaces and lost to later inline pseudo-element CSS. This
   block deliberately sits last, covers the live hero/banner classes,
   and keeps the same supplied hue pulse + sweep visible sitewide.
   ================================================================ */
:is(
  .hero,
  .home-bigcta,
  .foot.foot-v3,
  .archive-head,
  .woocommerce-products-header,
  .shop-hero,
  .brands-hero,
  .brand-hero,
  .wiki-hero,
  .recipes-hero,
  .news-hero,
  .about-hero,
  .contact-hero,
  .ct-hero,
  .ct-promise,
  .ct-news,
  .page-head,
  .page-head-simple,
  .page-head-policies,
  .article-head,
  .ns-header,
  .bcalc-hero,
  .club-hero,
  .gift-hero,
  .sm-hero,
  .sm-hero-l,
  .pairings-hero,
  .biz-hero,
  .seg-hero,
  .sub-hero,
  .acct-hero,
  .rewards-header,
  .notifications-head,
  .product-hero,
  .product-percup-hero,
  .freebie-hero,
  .b2b-dashboard-block,
  .sidebar-cta,
  .wiki-ed.dark,
  .brands-edit.dark,
  .promise.dark,
  .pricing-card.dark,
  .cta-tile.dark,
  .ns-edit-tile.dark,
  .biz-cta-final,
  .seg-cta-final,
  .club-cta-final,
  .gift-cta-final,
  .four04-hero,
  .contact-side
) {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: var(--teas-fluid-fallback) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow:
    0 24px 56px -26px rgba(4, 34, 32, .48),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

:is(
  .hero,
  .home-bigcta,
  .foot.foot-v3,
  .archive-head,
  .woocommerce-products-header,
  .shop-hero,
  .brands-hero,
  .brand-hero,
  .wiki-hero,
  .recipes-hero,
  .news-hero,
  .about-hero,
  .contact-hero,
  .ct-hero,
  .ct-promise,
  .ct-news,
  .page-head,
  .page-head-simple,
  .page-head-policies,
  .article-head,
  .ns-header,
  .bcalc-hero,
  .club-hero,
  .gift-hero,
  .sm-hero,
  .sm-hero-l,
  .pairings-hero,
  .biz-hero,
  .seg-hero,
  .sub-hero,
  .acct-hero,
  .rewards-header,
  .notifications-head,
  .product-hero,
  .product-percup-hero,
  .freebie-hero,
  .b2b-dashboard-block,
  .sidebar-cta,
  .wiki-ed.dark,
  .brands-edit.dark,
  .promise.dark,
  .pricing-card.dark,
  .cta-tile.dark,
  .ns-edit-tile.dark,
  .biz-cta-final,
  .seg-cta-final,
  .club-cta-final,
  .gift-cta-final,
  .four04-hero,
  .contact-side
)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  background:
    radial-gradient(52% 46% at 50% 46%, hsl(calc(165deg + var(--teas-hh)), 88%, 66%) 0%, transparent 56%),
    radial-gradient(150% 150% at 50% 50%,
      hsl(calc(174deg + var(--teas-hh)), 72%, 22%) 0%,
      hsl(calc(178deg + var(--teas-hh)), 76%, 13%) 46%,
      hsl(calc(182deg + var(--teas-hh)), 80%, 5%) 100%),
    radial-gradient(42% 42% at 6% 100%, rgba(48, 216, 200, .38) 0%, transparent 64%),
    radial-gradient(34% 38% at 96% 0%, rgba(232, 72, 152, .46) 0%, transparent 68%) !important;
  background-size: 220% 220%, 240% 240%, 150% 150%, 150% 150% !important;
  background-position: 84% 8%, 84% 8%, 18% 92%, 82% 12% !important;
  animation: teas-fluid-hue 19s ease-in-out infinite, teas-fluid-sweep 37s ease-in-out infinite !important;
  will-change: background-position !important;
}

:is(
  .hero,
  .home-bigcta,
  .foot.foot-v3,
  .archive-head,
  .woocommerce-products-header,
  .shop-hero,
  .brands-hero,
  .brand-hero,
  .wiki-hero,
  .recipes-hero,
  .news-hero,
  .about-hero,
  .contact-hero,
  .ct-hero,
  .ct-promise,
  .ct-news,
  .page-head,
  .page-head-simple,
  .page-head-policies,
  .article-head,
  .ns-header,
  .bcalc-hero,
  .club-hero,
  .gift-hero,
  .sm-hero,
  .sm-hero-l,
  .pairings-hero,
  .biz-hero,
  .seg-hero,
  .sub-hero,
  .acct-hero,
  .rewards-header,
  .notifications-head,
  .product-hero,
  .product-percup-hero,
  .freebie-hero,
  .b2b-dashboard-block,
  .sidebar-cta,
  .wiki-ed.dark,
  .brands-edit.dark,
  .promise.dark,
  .pricing-card.dark,
  .cta-tile.dark,
  .ns-edit-tile.dark,
  .biz-cta-final,
  .seg-cta-final,
  .club-cta-final,
  .gift-cta-final,
  .four04-hero,
  .contact-side
)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: .055 !important;
  mix-blend-mode: screen !important;
  filter: none !important;
  background-image: radial-gradient(rgba(255, 255, 255, .9) 1px, transparent 1.4px) !important;
  background-size: 4px 4px !important;
  background-position: 0 0 !important;
}

:is(
  .hero,
  .home-bigcta,
  .foot.foot-v3,
  .archive-head,
  .woocommerce-products-header,
  .shop-hero,
  .brands-hero,
  .brand-hero,
  .wiki-hero,
  .recipes-hero,
  .news-hero,
  .about-hero,
  .contact-hero,
  .ct-hero,
  .ct-promise,
  .ct-news,
  .page-head,
  .page-head-simple,
  .page-head-policies,
  .article-head,
  .ns-header,
  .bcalc-hero,
  .club-hero,
  .gift-hero,
  .sm-hero,
  .sm-hero-l,
  .pairings-hero,
  .biz-hero,
  .seg-hero,
  .sub-hero,
  .acct-hero,
  .rewards-header,
  .notifications-head,
  .product-hero,
  .product-percup-hero,
  .freebie-hero,
  .b2b-dashboard-block,
  .sidebar-cta,
  .wiki-ed.dark,
  .brands-edit.dark,
  .promise.dark,
  .pricing-card.dark,
  .cta-tile.dark,
  .ns-edit-tile.dark,
  .biz-cta-final,
  .seg-cta-final,
  .club-cta-final,
  .gift-cta-final,
  .four04-hero,
  .contact-side
) > * {
  position: relative !important;
  z-index: 1 !important;
}

:is(
  .archive-head,
  .woocommerce-products-header,
  .shop-hero,
  .brands-hero,
  .brand-hero,
  .wiki-hero,
  .recipes-hero,
  .news-hero,
  .about-hero,
  .contact-hero,
  .ct-hero,
  .ct-promise,
  .ct-news,
  .page-head,
  .page-head-simple,
  .page-head-policies,
  .article-head,
  .ns-header,
  .bcalc-hero,
  .club-hero,
  .gift-hero,
  .sm-hero,
  .sm-hero-l,
  .pairings-hero,
  .biz-hero,
  .seg-hero,
  .sub-hero,
  .acct-hero,
  .rewards-header,
  .notifications-head,
  .product-hero,
  .product-percup-hero,
  .freebie-hero,
  .b2b-dashboard-block,
  .sidebar-cta,
  .four04-hero,
  .contact-side
) :is(h1, h2, h3, h4, .head, .archive-title, .ct-news-h, .ns-title, .as-num) {
  color: #ffffff !important;
}

:is(
  .archive-head,
  .woocommerce-products-header,
  .shop-hero,
  .brands-hero,
  .brand-hero,
  .wiki-hero,
  .recipes-hero,
  .news-hero,
  .about-hero,
  .contact-hero,
  .ct-hero,
  .ct-promise,
  .ct-news,
  .page-head,
  .page-head-simple,
  .page-head-policies,
  .article-head,
  .ns-header,
  .bcalc-hero,
  .club-hero,
  .gift-hero,
  .sm-hero,
  .sm-hero-l,
  .pairings-hero,
  .biz-hero,
  .seg-hero,
  .sub-hero,
  .acct-hero,
  .rewards-header,
  .notifications-head,
  .product-hero,
  .product-percup-hero,
  .freebie-hero,
  .b2b-dashboard-block,
  .sidebar-cta,
  .four04-hero,
  .contact-side
) :is(p, .lede, .sub, .subhead, .term-description, .article-lede, .article-meta, .ns-meta, .as-lbl, .acct-greeting p) {
  color: rgba(255, 255, 255, .78) !important;
}

:is(
  .archive-head,
  .woocommerce-products-header,
  .shop-hero,
  .brands-hero,
  .brand-hero,
  .wiki-hero,
  .recipes-hero,
  .news-hero,
  .about-hero,
  .contact-hero,
  .ct-hero,
  .ct-promise,
  .ct-news,
  .page-head,
  .page-head-simple,
  .page-head-policies,
  .article-head,
  .ns-header,
  .bcalc-hero,
  .club-hero,
  .gift-hero,
  .sm-hero,
  .sm-hero-l,
  .pairings-hero,
  .biz-hero,
  .seg-hero,
  .sub-hero,
  .acct-hero,
  .rewards-header,
  .notifications-head,
  .product-hero,
  .product-percup-hero,
  .freebie-hero,
  .b2b-dashboard-block,
  .sidebar-cta,
  .four04-hero,
  .contact-side
) :is(em, .it, .kicker, .eyebrow, .mono, .rc-tag, .ns-cat, .ct-news-tape, .as-link) {
  color: var(--cyan) !important;
}

.ct-hero-side,
.wiki-search,
.biz-hero-stat div,
.ct-news-input,
.acct-hero .avatar {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 860px) {
  :is(
    .hero,
    .home-bigcta,
    .archive-head,
    .woocommerce-products-header,
    .shop-hero,
    .brands-hero,
    .brand-hero,
    .wiki-hero,
    .recipes-hero,
    .news-hero,
    .about-hero,
    .contact-hero,
    .ct-hero,
    .ct-promise,
    .ct-news,
    .page-head,
    .page-head-simple,
    .page-head-policies,
    .article-head,
    .ns-header,
    .bcalc-hero,
    .club-hero,
    .gift-hero,
    .sm-hero,
    .sm-hero-l,
    .pairings-hero,
    .biz-hero,
    .seg-hero,
    .sub-hero,
    .acct-hero,
    .rewards-header,
    .notifications-head,
    .product-hero,
    .product-percup-hero,
    .freebie-hero,
    .b2b-dashboard-block,
    .four04-hero
  ) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    border-radius: 0 !important;
  }
}

/* Shop archive uses the newer .sp-hero template with later inline
   !important pseudo-rules, so it needs higher specificity than the
   broad sitewide selector above. */
html body .sp .sp-hero,
html body .sp-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: var(--teas-fluid-fallback) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow:
    0 24px 56px -26px rgba(4, 34, 32, .48),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

html body .sp .sp-hero::before,
html body .sp-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  background:
    radial-gradient(52% 46% at 50% 46%, hsl(calc(165deg + var(--teas-hh)), 88%, 66%) 0%, transparent 56%),
    radial-gradient(150% 150% at 50% 50%,
      hsl(calc(174deg + var(--teas-hh)), 72%, 22%) 0%,
      hsl(calc(178deg + var(--teas-hh)), 76%, 13%) 46%,
      hsl(calc(182deg + var(--teas-hh)), 80%, 5%) 100%),
    radial-gradient(42% 42% at 6% 100%, rgba(48, 216, 200, .38) 0%, transparent 64%),
    radial-gradient(34% 38% at 96% 0%, rgba(232, 72, 152, .46) 0%, transparent 68%) !important;
  background-size: 220% 220%, 240% 240%, 150% 150%, 150% 150% !important;
  background-position: 84% 8%, 84% 8%, 18% 92%, 82% 12% !important;
  animation: teas-fluid-hue 19s ease-in-out infinite, teas-fluid-sweep 37s ease-in-out infinite !important;
  will-change: background-position !important;
}

html body .sp .sp-hero::after,
html body .sp-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: .055 !important;
  mix-blend-mode: screen !important;
  filter: none !important;
  background-image: radial-gradient(rgba(255, 255, 255, .9) 1px, transparent 1.4px) !important;
  background-size: 4px 4px !important;
  background-position: 0 0 !important;
}

html body .sp .sp-hero > *,
html body .sp-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

html body .sp .sp-hero :is(h1, h2, h3, .sp-h1),
html body .sp-hero :is(h1, h2, h3, .sp-h1) {
  color: #ffffff !important;
}

html body .sp .sp-hero :is(p, .sp-sub),
html body .sp-hero :is(p, .sp-sub) {
  color: rgba(255, 255, 255, .78) !important;
}

html body .sp .sp-hero :is(em, .sp-kicker),
html body .sp-hero :is(em, .sp-kicker) {
  color: var(--cyan) !important;
}

@media (max-width: 860px) {
  html body .sp .sp-hero,
  html body .sp-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    border-radius: 0 !important;
  }
}

/* Our Story and Business use current-generation os-/bz- panels rather
   than the older about-/biz- hero names. These are the actual coloured
   boxes visible on staging. */
html body :is(
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-hero-l,
  .bz-open,
  .bz-sub-popular
) {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: var(--teas-fluid-fallback) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow:
    0 24px 56px -26px rgba(4, 34, 32, .48),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

html body :is(
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-hero-l,
  .bz-open,
  .bz-sub-popular
)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  background:
    radial-gradient(52% 46% at 50% 46%, hsl(calc(165deg + var(--teas-hh)), 88%, 66%) 0%, transparent 56%),
    radial-gradient(150% 150% at 50% 50%,
      hsl(calc(174deg + var(--teas-hh)), 72%, 22%) 0%,
      hsl(calc(178deg + var(--teas-hh)), 76%, 13%) 46%,
      hsl(calc(182deg + var(--teas-hh)), 80%, 5%) 100%),
    radial-gradient(42% 42% at 6% 100%, rgba(48, 216, 200, .38) 0%, transparent 64%),
    radial-gradient(34% 38% at 96% 0%, rgba(232, 72, 152, .46) 0%, transparent 68%) !important;
  background-size: 220% 220%, 240% 240%, 150% 150%, 150% 150% !important;
  background-position: 84% 8%, 84% 8%, 18% 92%, 82% 12% !important;
  animation: teas-fluid-hue 19s ease-in-out infinite, teas-fluid-sweep 37s ease-in-out infinite !important;
  will-change: background-position !important;
}

html body :is(
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-hero-l,
  .bz-open,
  .bz-sub-popular
)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: .055 !important;
  mix-blend-mode: screen !important;
  filter: none !important;
  background-image: radial-gradient(rgba(255, 255, 255, .9) 1px, transparent 1.4px) !important;
  background-size: 4px 4px !important;
  background-position: 0 0 !important;
}

html body :is(
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-hero-l,
  .bz-open,
  .bz-sub-popular
) > * {
  position: relative !important;
  z-index: 1 !important;
}

html body :is(
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-hero-l,
  .bz-open,
  .bz-sub-popular
) :is(h1, h2, h3, h4, .os-stats-h, .os-tp-h, .os-rail-h, .bz-h1, .bz-open-h) {
  color: #ffffff !important;
}

html body :is(
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-hero-l,
  .bz-open,
  .bz-sub-popular
) :is(p, .os-stats-sub, .os-tp-meta, .os-rail-sub, .bz-lede, .bz-open-sub) {
  color: rgba(255, 255, 255, .78) !important;
}

html body :is(
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-hero-l,
  .bz-open,
  .bz-sub-popular
) :is(em, .os-kicker, .os-tp-h, .bz-kicker) {
  color: var(--cyan) !important;
}

@media (max-width: 860px) {
  html body :is(.bz-hero-l, .bz-open) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    border-radius: 0 !important;
  }
}

/* Final live-template sweep: these are the current staging banner classes
   surfaced by browser inspection after the first sitewide pass. */
html body :is(
  .nw-hero-l,
  .nw-feat-l,
  .acctx-hero,
  .sb-hold-card,
  .rf-hero-l,
  .polx-hero,
  .generic-page > .page-head-simple
) {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: var(--teas-fluid-fallback) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow:
    0 24px 56px -26px rgba(4, 34, 32, .48),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

html body .generic-page > .page-head-simple {
  min-height: clamp(178px, 23vw, 292px) !important;
  padding: clamp(32px, 5vw, 64px) !important;
  margin: 8px 0 24px !important;
  border-radius: 28px !important;
  justify-content: center !important;
}

html body.woocommerce-account .generic-page > .page-head-simple {
  display: none !important;
}

html body :is(
  .nw-hero-l,
  .nw-feat-l,
  .acctx-hero,
  .sb-hold-card,
  .rf-hero-l,
  .polx-hero,
  .generic-page > .page-head-simple
)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  background:
    radial-gradient(52% 46% at 50% 46%, hsl(calc(165deg + var(--teas-hh)), 88%, 66%) 0%, transparent 56%),
    radial-gradient(150% 150% at 50% 50%,
      hsl(calc(174deg + var(--teas-hh)), 72%, 22%) 0%,
      hsl(calc(178deg + var(--teas-hh)), 76%, 13%) 46%,
      hsl(calc(182deg + var(--teas-hh)), 80%, 5%) 100%),
    radial-gradient(42% 42% at 6% 100%, rgba(48, 216, 200, .38) 0%, transparent 64%),
    radial-gradient(34% 38% at 96% 0%, rgba(232, 72, 152, .46) 0%, transparent 68%) !important;
  background-size: 220% 220%, 240% 240%, 150% 150%, 150% 150% !important;
  background-position: 84% 8%, 84% 8%, 18% 92%, 82% 12% !important;
  animation: teas-fluid-hue 19s ease-in-out infinite, teas-fluid-sweep 37s ease-in-out infinite !important;
  will-change: background-position !important;
}

html body :is(
  .nw-hero-l,
  .nw-feat-l,
  .acctx-hero,
  .sb-hold-card,
  .rf-hero-l,
  .polx-hero,
  .generic-page > .page-head-simple
)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: .055 !important;
  mix-blend-mode: screen !important;
  filter: none !important;
  background-image: radial-gradient(rgba(255, 255, 255, .9) 1px, transparent 1.4px) !important;
  background-size: 4px 4px !important;
  background-position: 0 0 !important;
}

html body :is(
  .nw-hero-l,
  .nw-feat-l,
  .acctx-hero,
  .sb-hold-card,
  .rf-hero-l,
  .polx-hero,
  .generic-page > .page-head-simple
) > * {
  position: relative !important;
  z-index: 1 !important;
}

html body :is(
  .nw-hero-l,
  .nw-feat-l,
  .acctx-hero,
  .sb-hold-card,
  .rf-hero-l,
  .polx-hero,
  .generic-page > .page-head-simple
) :is(h1, h2, h3, h4, .head, .nw-h1, .acctx-h1, .rf-h1, .polx-h1) {
  color: #ffffff !important;
}

html body :is(
  .nw-hero-l,
  .nw-feat-l,
  .acctx-hero,
  .sb-hold-card,
  .rf-hero-l,
  .polx-hero,
  .generic-page > .page-head-simple
) :is(p, .lede, .nw-sub, .acctx-sub, .rf-sub, .polx-sub) {
  color: rgba(255, 255, 255, .78) !important;
}

html body :is(
  .nw-hero-l,
  .nw-feat-l,
  .acctx-hero,
  .sb-hold-card,
  .rf-hero-l,
  .polx-hero,
  .generic-page > .page-head-simple
) :is(em, .kicker, .eyebrow) {
  color: var(--cyan) !important;
}

@media (max-width: 860px) {
  html body :is(
    .nw-hero-l,
    .nw-feat-l,
    .acctx-hero,
    .sb-hold-card,
    .rf-hero-l,
    .polx-hero,
    .generic-page > .page-head-simple
  ) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 860px) {
  html body .sp .sp-hero,
  html body .sp-hero {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  html body .sp .sp-hero :is(.sp-hero-top, .sp-hero-main, .sp-stats),
  html body .sp-hero :is(.sp-hero-top, .sp-hero-main, .sp-stats) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body .sp .sp-hero .sp-h1,
  html body .sp-hero .sp-h1 {
    font-size: clamp(38px, 10vw, 42px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
  }

  html body .sp .sp-hero .sp-kicker,
  html body .sp-hero .sp-kicker {
    font-size: 10px !important;
    line-height: 1.55 !important;
  }
}

/* Warm palette correction, 2026-06-17.
   Removes the mint/cyan against purple clash from live reusable panels. */
:root {
  --teas-warm-ink: #241915;
  --teas-warm-deep: #171111;
  --teas-warm-plum: #2a1d24;
  --teas-warm-stone: #f6efe6;
  --teas-warm-paper: #fbf7f1;
  --teas-warm-sand: #e8d3b8;
  --teas-warm-rose: #d96d66;
  --teas-warm-rose-soft: #f1b8aa;
  --teas-warm-clay: #9f5548;
  --teas-warm-brass: #b8874a;
}

@property --teas-warm-hh {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes teas-warm-hue {
  0%, 100% { --teas-warm-hh: 0deg; }
  50% { --teas-warm-hh: 24deg; }
}

@keyframes teas-warm-sweep {
  0%, 100% { background-position: 82% 10%, 82% 10%, 16% 92%, 86% 8%; }
  50% { background-position: 18% 88%, 18% 88%, 76% 16%, 18% 84%; }
}

html body :is(.announce, .announce-bar, .utility-strip) {
  background: linear-gradient(90deg, #241915 0%, #2d1b21 48%, #191211 100%) !important;
  color: rgba(255, 250, 245, .84) !important;
  border-color: rgba(241, 184, 170, .16) !important;
}

html body :is(.announce, .announce-bar, .utility-strip) :is(a, b, strong, .utility-link, .announce-freebie strong) {
  color: var(--teas-warm-rose-soft) !important;
}

html body :is(.announce, .announce-bar, .utility-strip) :is(a, .utility-link):hover,
html body :is(.announce, .announce-bar, .utility-strip) :is(a, .utility-link):focus-visible {
  color: #fff3ea !important;
}

html body .utility-msg .util-dot,
html body .util-dot {
  background: var(--teas-warm-rose) !important;
  box-shadow: 0 0 0 4px rgba(217, 109, 102, .14) !important;
}

html body :is(
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-hero-l,
  .bz-open,
  .bz-sub-popular,
  .article-head,
  .sidebar-cta,
  .wiki-cite,
  .sp-hero,
  .nw-hero-l,
  .nw-feat-l,
  .acctx-hero,
  .sb-hold-card,
  .rf-hero-l,
  .polx-hero,
  .generic-page > .page-head-simple
) {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(54% 50% at 48% 50%, #e7a08d 0%, transparent 56%),
    radial-gradient(150% 150% at 50% 50%, #39212a 0%, #24171b 48%, #120e0f 100%) !important;
  color: #fffaf5 !important;
  border-color: rgba(241, 184, 170, .18) !important;
  box-shadow:
    0 24px 58px -28px rgba(36, 25, 21, .54),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

html body :is(
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-hero-l,
  .bz-open,
  .bz-sub-popular,
  .article-head,
  .sidebar-cta,
  .wiki-cite,
  .sp-hero,
  .nw-hero-l,
  .nw-feat-l,
  .acctx-hero,
  .sb-hold-card,
  .rf-hero-l,
  .polx-hero,
  .generic-page > .page-head-simple
)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  background:
    radial-gradient(52% 46% at 50% 48%, hsl(calc(10deg + var(--teas-warm-hh)), 70%, 70%) 0%, transparent 58%),
    radial-gradient(150% 150% at 50% 50%,
      hsl(calc(332deg + var(--teas-warm-hh)), 34%, 20%) 0%,
      hsl(calc(350deg + var(--teas-warm-hh)), 38%, 13%) 48%,
      #120e0f 100%),
    radial-gradient(42% 42% at 6% 100%, rgba(198, 121, 94, .46) 0%, transparent 64%),
    radial-gradient(34% 38% at 96% 0%, rgba(232, 176, 128, .36) 0%, transparent 68%) !important;
  background-size: 220% 220%, 240% 240%, 150% 150%, 150% 150% !important;
  background-position: 82% 10%, 82% 10%, 16% 92%, 86% 8% !important;
  animation: teas-warm-hue 19s ease-in-out infinite, teas-warm-sweep 37s ease-in-out infinite !important;
  will-change: background-position !important;
}

html body :is(
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-hero-l,
  .bz-open,
  .bz-sub-popular,
  .article-head,
  .sidebar-cta,
  .wiki-cite,
  .sp-hero,
  .nw-hero-l,
  .nw-feat-l,
  .acctx-hero,
  .sb-hold-card,
  .rf-hero-l,
  .polx-hero,
  .generic-page > .page-head-simple
)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: .052 !important;
  mix-blend-mode: screen !important;
  filter: none !important;
  background-image: radial-gradient(rgba(255, 255, 255, .92) 1px, transparent 1.4px) !important;
  background-size: 4px 4px !important;
  background-position: 0 0 !important;
}

html body :is(
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-hero-l,
  .bz-open,
  .bz-sub-popular,
  .article-head,
  .sidebar-cta,
  .wiki-cite,
  .sp-hero,
  .nw-hero-l,
  .nw-feat-l,
  .acctx-hero,
  .sb-hold-card,
  .rf-hero-l,
  .polx-hero,
  .generic-page > .page-head-simple
) > * {
  position: relative !important;
  z-index: 1 !important;
}

html body :is(
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-hero-l,
  .bz-open,
  .bz-sub-popular,
  .article-head,
  .sidebar-cta,
  .wiki-cite,
  .sp-hero,
  .nw-hero-l,
  .nw-feat-l,
  .acctx-hero,
  .sb-hold-card,
  .rf-hero-l,
  .polx-hero,
  .generic-page > .page-head-simple
) :is(h1, h2, h3, h4, .head, .os-stats-h, .os-tp-h, .os-rail-h, .bz-h1, .bz-open-h, .article-title, .wiki-cite-title, .sp-h1, .nw-h1, .acctx-h1, .rf-h1, .polx-h1) {
  color: #fffaf5 !important;
}

html body :is(
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-hero-l,
  .bz-open,
  .bz-sub-popular,
  .article-head,
  .sidebar-cta,
  .wiki-cite,
  .sp-hero,
  .nw-hero-l,
  .nw-feat-l,
  .acctx-hero,
  .sb-hold-card,
  .rf-hero-l,
  .polx-hero,
  .generic-page > .page-head-simple
) :is(p, li, .lede, .os-stats-sub, .os-tp-meta, .os-rail-sub, .bz-lede, .bz-open-sub, .article-lede, .article-meta, .wiki-cite-lede, .wiki-cite-meta, .sp-sub, .nw-sub, .acctx-sub, .rf-sub, .polx-sub) {
  color: rgba(255, 250, 245, .78) !important;
}

html body :is(
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-hero-l,
  .bz-open,
  .bz-sub-popular,
  .article-head,
  .sidebar-cta,
  .wiki-cite,
  .sp-hero,
  .nw-hero-l,
  .nw-feat-l,
  .acctx-hero,
  .sb-hold-card,
  .rf-hero-l,
  .polx-hero,
  .generic-page > .page-head-simple
) :is(em, .kicker, .eyebrow, .os-kicker, .os-tp-h, .bz-kicker, .sp-kicker, .wiki-cite-eyebrow, .tmp-h, .rc-tag) {
  color: var(--teas-warm-rose-soft) !important;
}

html body .bz-hero-r {
  background: linear-gradient(145deg, #fbf7f1 0%, #f3e7d9 100%) !important;
  border-color: rgba(159, 85, 72, .26) !important;
  color: var(--teas-warm-ink) !important;
  box-shadow: 0 24px 56px -34px rgba(64, 39, 31, .3) !important;
}

html body .bz-hero-r :is(.bz-perk, .bz-stat, .bz-card, .bz-perk--hero, li, div[class*="stat"], div[class*="perk"]) {
  background: rgba(255, 255, 255, .78) !important;
  border-color: rgba(159, 85, 72, .18) !important;
  color: var(--teas-warm-ink) !important;
}

html body .bz-hero-r .bz-perk--hero {
  background: linear-gradient(145deg, #fff8f4 0%, #f3dfd6 100%) !important;
  border-color: rgba(217, 109, 102, .42) !important;
  box-shadow: 0 20px 44px -30px rgba(159, 85, 72, .55) !important;
}

html body .bz-hero-r :is(strong, b, .num, .bz-num, .bz-stat-num, .bz-perk-v, .bz-rate) {
  color: #3b241f !important;
}

html body .bz-hero-r :is(sup, small, .bz-perk-save, .tag, .badge, .bz-label) {
  color: var(--teas-warm-clay) !important;
}

html body .bz :is(.bz-feat p, .bz-price-h p, .bz-step-card p, .bz-card p, .bz-sub-card p) {
  color: #5f5146 !important;
}

html body .bz :is(.bz-feat, .bz-step-card, .bz-price, .bz-card, .bz-sub-card:not(.bz-sub-popular)) {
  border-color: rgba(90, 57, 45, .12) !important;
}

html body .bz .bz-sub-save {
  background: #fbf7f1 !important;
  border-color: rgba(159, 85, 72, .22) !important;
  color: var(--teas-warm-clay) !important;
}

html body :is(.bz-cta, .bz-open-cta, .sidebar-cta .btn-acc, .wiki-cite-copy, .sp-hero a, .sp-hero button, .nw-hero-l a, .acctx-hero a, .rf-hero-l a, .polx-hero a) {
  background: var(--teas-warm-rose) !important;
  border-color: rgba(217, 109, 102, .36) !important;
  color: var(--teas-warm-ink) !important;
  box-shadow: 0 18px 38px -24px rgba(217, 109, 102, .68) !important;
}

html body :is(.bz-cta, .bz-open-cta, .sidebar-cta .btn-acc, .wiki-cite-copy, .sp-hero a, .sp-hero button, .nw-hero-l a, .acctx-hero a, .rf-hero-l a, .polx-hero a):hover,
html body :is(.bz-cta, .bz-open-cta, .sidebar-cta .btn-acc, .wiki-cite-copy, .sp-hero a, .sp-hero button, .nw-hero-l a, .acctx-hero a, .rf-hero-l a, .polx-hero a):focus-visible {
  background: #f1b8aa !important;
  color: var(--teas-warm-ink) !important;
}

html body .article-body.prose a,
html body .wiki-shop-cta a,
html body .article-aside a.active,
html body .toc-list a.active,
html body .related-card .rc-tag,
html body .related-card .rc-cta {
  color: var(--teas-warm-clay) !important;
  text-decoration-color: rgba(159, 85, 72, .45) !important;
}

html body .article-body.prose a:hover,
html body .wiki-shop-cta a:hover {
  color: #6f332b !important;
}

html body .toc-list a.active {
  background: #2a1d24 !important;
}

html body .toc-list a.active::before {
  color: var(--teas-warm-rose-soft) !important;
}

html body .article-body.prose blockquote {
  background: rgba(159, 85, 72, .08) !important;
  border-left-color: var(--teas-warm-clay) !important;
}

html body .wiki-cite-banner {
  background: linear-gradient(135deg, #fff8f4 0%, #f1dccf 100%) !important;
  border-left-color: var(--teas-warm-clay) !important;
  color: #5a332b !important;
}

html body .wiki-cite-banner :is(strong, a) {
  color: #6f332b !important;
}

html body .wiki-cite :is(.wiki-cite-row, .wiki-cite-eyebrow) {
  background: rgba(255, 250, 245, .08) !important;
  border-color: rgba(241, 184, 170, .18) !important;
}

html body .wiki-cite :is(.wiki-cite-label, .wiki-cite-title em, .wiki-cite-lede strong, .wiki-cite-lede em, .wiki-cite-meta a) {
  color: var(--teas-warm-rose-soft) !important;
}

html body .wiki-cite-copy:hover,
html body .wiki-cite-copy.copied {
  background: var(--teas-warm-rose-soft) !important;
  color: var(--teas-warm-ink) !important;
}

html body.woocommerce-shop :is(.sp .button, .sp button, ul.products li.product .button):not(.single_add_to_cart_button),
html body.post-type-archive-product :is(.sp .button, .sp button, ul.products li.product .button):not(.single_add_to_cart_button) {
  background: #2a1d24 !important;
  border-color: rgba(241, 184, 170, .28) !important;
  color: var(--teas-warm-rose-soft) !important;
}

html body.woocommerce-shop :is(.sp .button, .sp button, ul.products li.product .button):not(.single_add_to_cart_button):hover,
html body.post-type-archive-product :is(.sp .button, .sp button, ul.products li.product .button):not(.single_add_to_cart_button):hover {
  background: var(--teas-warm-rose) !important;
  color: var(--teas-warm-ink) !important;
}

html body :is(.sp-family-dot, .family-dot, .cat-dot, .sp-dot) {
  background: var(--teas-warm-brass) !important;
}

html body .teas-mega-entry {
  background: #fbf7f1 !important;
  border-color: rgba(159, 85, 72, .22) !important;
  color: var(--teas-warm-ink) !important;
  box-shadow: 0 10px 24px -20px rgba(36, 25, 21, .38) !important;
}

html body .teas-mega-entry:hover,
html body .teas-mega[data-open="true"] .teas-mega-entry {
  background: #2a1d24 !important;
  border-color: #2a1d24 !important;
  color: #fffaf5 !important;
}

html body .teas-mega-toggle {
  border-left-color: rgba(159, 85, 72, .18) !important;
}

html body .teas-mega-panel {
  max-height: min(64vh, 340px) !important;
  background: #fbf7f1 !important;
  border-color: rgba(159, 85, 72, .24) !important;
  color: var(--teas-warm-ink) !important;
  box-shadow: 0 22px 56px -34px rgba(36, 25, 21, .48), 0 4px 14px rgba(36, 25, 21, .08) !important;
}

html body .teas-mega-panel::before {
  background: linear-gradient(90deg, #d96d66, #c98f62 52%, #7c4f42) !important;
}

html body .teas-mega-close,
html body .tmp-fam,
html body .tmp-chip,
html body .tmp-feat {
  background: #ffffff !important;
  border-color: rgba(159, 85, 72, .16) !important;
  color: var(--teas-warm-ink) !important;
}

html body .tmp-h,
html body .tmp-fam-sub,
html body .tmp-feat-sub {
  color: #7c6257 !important;
}

html body :is(.teas-mega-close, .tmp-fam, .tmp-chip, .tmp-feat):hover,
html body :is(.teas-mega-close, .tmp-fam, .tmp-chip, .tmp-feat):focus-visible {
  background: #f7e2dc !important;
  border-color: rgba(217, 109, 102, .38) !important;
  color: var(--teas-warm-ink) !important;
}

html body .tmp-allshop,
html body .tmp-feat-bom {
  background:
    radial-gradient(92% 110% at 0% 0%, rgba(217, 109, 102, .34), transparent 62%),
    linear-gradient(135deg, #3a2421, #241915) !important;
  border-color: rgba(241, 184, 170, .16) !important;
  color: #fffaf5 !important;
}

html body .tmp-allshop svg {
  color: var(--teas-warm-rose-soft) !important;
}

html body .tmp-allshop:hover,
html body .tmp-feat-bom:hover {
  background:
    radial-gradient(92% 110% at 100% 100%, rgba(241, 184, 170, .42), transparent 62%),
    linear-gradient(135deg, #4a2b27, #2a1d24) !important;
  color: #fffaf5 !important;
}

html body .topbar .nav-toggle[aria-expanded="true"] {
  color: var(--teas-warm-rose-soft) !important;
  border-color: #2a1d24 !important;
}

html body .topbar .bag .b-mark,
html body .nav-basket .b-mark {
  background: var(--teas-warm-rose) !important;
  color: var(--teas-warm-ink) !important;
}

/* No split mint panels: bulk/business and sample-pack hero units must read
   as one pulsing surface, not dark-left plus pale-green-right. */
html body {
  background: #f4efe8 !important;
}

html body :is(.bz-hero, .sm-hero) {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: clamp(22px, 3.2vw, 42px) !important;
  border-radius: clamp(22px, 3vw, 32px) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  background:
    radial-gradient(52% 46% at 50% 48%, #51ddca 0%, transparent 58%),
    radial-gradient(34% 38% at 96% 0%, rgba(232, 72, 152, .42) 0%, transparent 68%),
    radial-gradient(42% 42% at 6% 100%, rgba(48, 216, 200, .32) 0%, transparent 64%),
    radial-gradient(150% 150% at 50% 50%, #0e6868 0%, #0a4444 46%, #062828 100%) !important;
  background-size: 220% 220%, 150% 150%, 150% 150%, 240% 240% !important;
  background-position: 84% 8%, 82% 12%, 18% 92%, 84% 8% !important;
  animation: teas-fluid-sweep 37s ease-in-out infinite !important;
  box-shadow:
    0 24px 58px -30px rgba(4, 34, 32, .48),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

html body :is(.bz-hero, .sm-hero)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    radial-gradient(54% 50% at 48% 52%, hsl(calc(168deg + var(--teas-hh)), 86%, 62%) 0%, transparent 56%),
    radial-gradient(140% 140% at 50% 50%,
      hsl(calc(174deg + var(--teas-hh)), 70%, 22%) 0%,
      hsl(calc(178deg + var(--teas-hh)), 76%, 13%) 48%,
      #041b1a 100%),
    radial-gradient(36% 40% at 96% 0%, rgba(232, 72, 152, .46) 0%, transparent 68%) !important;
  background-size: 220% 220%, 240% 240%, 150% 150% !important;
  background-position: 84% 8%, 84% 8%, 82% 12% !important;
  animation: teas-fluid-hue 19s ease-in-out infinite, teas-fluid-sweep 37s ease-in-out infinite !important;
  opacity: 1 !important;
}

html body :is(.bz-hero, .sm-hero)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: .055 !important;
  mix-blend-mode: screen !important;
  background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.4px) !important;
  background-size: 4px 4px !important;
}

html body :is(.bz-hero, .sm-hero) > * {
  position: relative !important;
  z-index: 1 !important;
}

html body :is(.bz-hero-l, .sm-hero-l) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

html body :is(.bz-hero-l, .sm-hero-l)::before,
html body :is(.bz-hero-l, .sm-hero-l)::after,
html body :is(.bz-hero-r, .sm-hero-r)::before,
html body :is(.bz-hero-r, .sm-hero-r)::after {
  display: none !important;
  content: none !important;
}

html body :is(.bz-hero-r, .sm-hero-r) {
  background: rgba(2, 28, 27, .28) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
}

html body .bz-hero-r :is(.bz-perk, .bz-stat, .bz-card, .bz-perk--hero, li, div[class*="stat"], div[class*="perk"]),
html body .sm-hero-r :is(.sm-stat-grid, .sm-stat-grid > div) {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body .sm-hero-r .sm-stat-grid {
  overflow: hidden !important;
}

html body :is(.bz-hero-r, .sm-hero-r) :is(strong, b, .num, .bz-num, .bz-stat-num, .bz-perk-v, .bz-rate, .v) {
  color: #ffffff !important;
}

html body :is(.bz-hero-r, .sm-hero-r) :is(sup, small, .bz-perk-save, .tag, .badge, .bz-label, .l) {
  color: rgba(255, 255, 255, .68) !important;
}

html body :is(.bz-hero-l, .sm-hero-l) :is(.bz-kicker, .sm-kicker, em),
html body :is(.bz-hero-r, .sm-hero-r) :is(sup, em) {
  color: #94f2e6 !important;
}

html body :is(.sm-quiz, .sm-build-tier.on, .ct-notice.ok, .os-pullquote, .os-cyanquote) {
  background: linear-gradient(135deg, #fff8f4 0%, #f1dccf 100%) !important;
  border-color: rgba(159, 85, 72, .24) !important;
  color: #3b241f !important;
}

@media (max-width: 860px) {
  html body :is(.bz-hero, .sm-hero) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    padding: 22px 18px 26px !important;
    gap: 18px !important;
  }

  html body :is(.bz-hero-r, .sm-hero-r) {
    padding: 18px !important;
  }
}

/* ============================================================
   Whole-site evidence polish, 2026-06-17
   Final pass: make the shop feel precise, inspectable and premium.
   ============================================================ */

:root {
  --teas-proof-ink: #102927;
  --teas-proof-deep: #071f1d;
  --teas-proof-cyan: #30d8c8;
  --teas-proof-rose: #d96d66;
  --teas-proof-paper: rgba(255, 255, 255, .88);
  --teas-proof-border: rgba(15, 54, 50, .13);
  --teas-proof-shadow: 0 28px 70px -42px rgba(7, 31, 29, .48), 0 8px 20px -18px rgba(7, 31, 29, .22);
  --teas-proof-shadow-hover: 0 34px 82px -42px rgba(7, 31, 29, .58), 0 16px 32px -24px rgba(7, 31, 29, .28);
}

html body {
  background:
    radial-gradient(70% 46% at 82% -8%, rgba(48, 216, 200, .16), transparent 60%),
    radial-gradient(58% 42% at -8% 12%, rgba(217, 109, 102, .12), transparent 58%),
    linear-gradient(180deg, #f6fbfa 0%, #eef7f5 48%, #f7f1ed 100%) !important;
  color: var(--teas-proof-ink) !important;
}

html body :is(a, button, input, select, textarea, .button) {
  transition:
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease,
    transform .18s ease,
    opacity .18s ease;
}

html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  border-color: rgba(16, 41, 39, .16) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}

html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus {
  border-color: rgba(48, 216, 200, .72) !important;
  outline: 3px solid rgba(48, 216, 200, .18) !important;
  box-shadow: 0 0 0 1px rgba(48, 216, 200, .22), inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

html body :is(.announce, .announce-bar, .utility-strip) {
  min-height: 32px !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08) !important;
  font-size: 11px !important;
}

html body .topbar {
  background: rgba(255, 255, 255, .88) !important;
  border-color: rgba(16, 41, 39, .12) !important;
  box-shadow: 0 22px 64px -38px rgba(7, 31, 29, .55), 0 1px 0 rgba(255, 255, 255, .75) inset !important;
  backdrop-filter: blur(18px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
}

html body .topbar :is(nav.pills a, .pills-list > li > a, #primary-nav > a) {
  border: 1px solid transparent !important;
}

html body .topbar :is(nav.pills a, .pills-list > li > a, #primary-nav > a):hover,
html body .topbar :is(nav.pills a, .pills-list > li > a, #primary-nav > a):focus-visible {
  background: rgba(48, 216, 200, .11) !important;
  border-color: rgba(48, 216, 200, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64) !important;
}

html body .topbar :is(nav.pills a.active, nav.pills a[aria-current="page"], .pills-list > li.current-menu-item > a, #primary-nav > a[aria-current="page"]) {
  background: linear-gradient(135deg, #102927 0%, #183632 100%) !important;
  border-color: rgba(48, 216, 200, .28) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px -18px rgba(16, 41, 39, .8) !important;
}

html body .topbar :is(.icon-btn, .bag, .nav-basket) {
  border-color: rgba(16, 41, 39, .12) !important;
  box-shadow: 0 10px 26px -22px rgba(7, 31, 29, .48), inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

html body :is(
  .hero,
  .shop-hero,
  .brands-hero,
  .brand-hero,
  .wiki-hero,
  .recipes-hero,
  .news-hero,
  .about-hero,
  .contact-hero,
  .four04-hero,
  .archive-head,
  .woocommerce-products-header,
  .ct-hero,
  .page-head,
  .page-head-simple,
  .article-head
) {
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: clamp(22px, 2.6vw, 34px) !important;
  box-shadow: 0 34px 92px -46px rgba(7, 31, 29, .62), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

html body :is(
  .hero,
  .shop-hero,
  .brands-hero,
  .brand-hero,
  .wiki-hero,
  .recipes-hero,
  .news-hero,
  .about-hero,
  .contact-hero,
  .four04-hero,
  .archive-head,
  .woocommerce-products-header
) :is(h1, h2, .h1, .title) {
  text-shadow: 0 16px 42px rgba(0, 0, 0, .26) !important;
}

html body :is(
  .hero,
  .shop-hero,
  .brands-hero,
  .brand-hero,
  .wiki-hero,
  .recipes-hero,
  .news-hero,
  .about-hero,
  .contact-hero,
  .four04-hero,
  .archive-head,
  .woocommerce-products-header
) :is(p, .lede, .sub, .subhead, .term-description) {
  color: rgba(255, 255, 255, .86) !important;
}

html body :is(
  .form-card,
  .hero-card,
  .hero-card-v2,
  .route,
  .find-card,
  .find-tile,
  .prod-card,
  .ds-tile,
  .home-ncard,
  .news-card,
  .ncard,
  .rel-card,
  .related-card,
  .brand-card,
  .bcard,
  .wiki-cat-tile,
  .wiki-guide-group,
  .wiki-person-card,
  .recipe-card,
  .rc-cat,
  .promise,
  .chans,
  .faq,
  .amount-card,
  .club-tier,
  .club-step,
  .sm-fcard,
  .summary-card,
  .tpp-card,
  .archive-loop ul.products li.product,
  .woocommerce ul.products li.product
) {
  border-color: var(--teas-proof-border) !important;
  box-shadow: var(--teas-proof-shadow) !important;
}

@media (hover: hover) {
  html body :is(
    .form-card,
    .find-card,
    .find-tile,
    .prod-card,
    .ds-tile,
    .home-ncard,
    .news-card,
    .ncard,
    .rel-card,
    .related-card,
    .brand-card,
    .bcard,
    .wiki-cat-tile,
    .wiki-person-card,
    .recipe-card,
    .rc-cat,
    .archive-loop ul.products li.product,
    .woocommerce ul.products li.product
  ):hover {
    border-color: rgba(48, 216, 200, .34) !important;
    box-shadow: var(--teas-proof-shadow-hover) !important;
    transform: translateY(-4px) !important;
  }
}

html body :is(.tag, .chip, .recipe-tag, .brand-filter-row .ftab, .tfb, .wiki-search .quick a, .tnote, .stock) {
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(16, 41, 39, .12) !important;
  color: #314744 !important;
  box-shadow: 0 8px 18px -16px rgba(7, 31, 29, .35) !important;
}

html body .wiki-search {
  background: rgba(255, 255, 255, .14) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 42px -34px rgba(0, 0, 0, .45) !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
}

html body .wiki-search :is(input, select) {
  background: rgba(255, 255, 255, .94) !important;
  color: var(--teas-proof-ink) !important;
}

html body .wiki-search .quick a {
  background: rgba(255, 255, 255, .18) !important;
  border-color: rgba(255, 255, 255, .24) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body .wiki-search .quick a:hover,
html body .wiki-search .quick a:focus-visible {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--teas-proof-ink) !important;
}

html body .recipes-hero {
  overflow: hidden !important;
}

html body :is(.recipe-card, .rc-cat) :is(img, picture) {
  border-radius: 14px !important;
}

html body .sp-products > .pcard,
html body .woocommerce ul.products li.product.pcard {
  border: 1px solid rgba(16, 41, 39, .12) !important;
  background: #ffffff !important;
  box-shadow: var(--teas-proof-shadow) !important;
}

html body .sp-products > .pcard .pimg,
html body .woocommerce ul.products li.product.pcard .pimg {
  background:
    radial-gradient(72% 58% at 50% 40%, rgba(48, 216, 200, .10), transparent 68%),
    linear-gradient(180deg, #ffffff 0%, #f5fbfa 100%) !important;
  border-bottom-color: rgba(16, 41, 39, .08) !important;
  box-shadow: inset 0 -1px 0 rgba(16, 41, 39, .05) !important;
}

html body .sp-products > .pcard .pimg img,
html body .woocommerce ul.products li.product.pcard .pimg img {
  filter: drop-shadow(0 18px 22px rgba(16, 41, 39, .12)) !important;
}

html body .sp-products > .pcard .caff-label,
html body .woocommerce ul.products li.product.pcard .caff-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  max-width: calc(100% - 24px) !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(16, 41, 39, .14) !important;
  color: #102927 !important;
  box-shadow: 0 14px 24px -18px rgba(7, 31, 29, .56) !important;
  text-shadow: none !important;
}

html body .sp-products > .pcard .caff-label .pip,
html body .woocommerce ul.products li.product.pcard .caff-label .pip {
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(255, 255, 255, .95) !important;
  box-shadow: 0 0 0 1px rgba(16, 41, 39, .12), 0 0 0 5px rgba(16, 41, 39, .05) !important;
  flex: 0 0 auto !important;
}

html body .sp-products > .pcard .caff-label.cl-full .pip,
html body .woocommerce ul.products li.product.pcard .caff-label.cl-full .pip {
  background: #111917 !important;
}

html body .sp-products > .pcard .caff-label.cl-free .pip,
html body .sp-products > .pcard .caff-label.cl-decaf .pip,
html body .woocommerce ul.products li.product.pcard .caff-label.cl-free .pip,
html body .woocommerce ul.products li.product.pcard .caff-label.cl-decaf .pip {
  background: #b7ff54 !important;
}

html body .sp-products > .pcard .caff-label.cl-low .pip,
html body .woocommerce ul.products li.product.pcard .caff-label.cl-low .pip {
  background: #5dbf8a !important;
}

html body .sp-products > .pcard .pbody,
html body .woocommerce ul.products li.product.pcard .pbody {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .97) 0%, rgba(248, 244, 241, .92) 100%) !important;
}

html body .sp-products > .pcard.outofstock .pbody,
html body .woocommerce ul.products li.product.pcard.outofstock .pbody {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .97) 0%, rgba(246, 251, 250, .94) 100%) !important;
}

html body .sp-products > .pcard .pcard-stock,
html body .woocommerce ul.products li.product.pcard .pcard-stock {
  width: 100% !important;
  min-height: 94px !important;
  margin-top: auto !important;
  padding: 12px !important;
  border-radius: 15px !important;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(48, 216, 200, .20), transparent 58%),
    linear-gradient(135deg, #102927 0%, #241915 100%) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 32px -26px rgba(7, 31, 29, .55) !important;
}

html body .sp-products > .pcard .pcard-stock-title,
html body .woocommerce ul.products li.product.pcard .pcard-stock-title {
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

html body .sp-products > .pcard .pcard-stock-note,
html body .woocommerce ul.products li.product.pcard .pcard-stock-note {
  color: rgba(255, 255, 255, .72) !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

html body .sp-products > .pcard .pcard-stock-row,
html body .woocommerce ul.products li.product.pcard .pcard-stock-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: stretch !important;
  margin-top: 9px !important;
}

html body .sp-products > .pcard .pcard-stock-form input[type="email"],
html body .woocommerce ul.products li.product.pcard .pcard-stock-form input[type="email"] {
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #102927 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 12px !important;
}

html body .sp-products > .pcard .pcard-stock-form button,
html body .woocommerce ul.products li.product.pcard .pcard-stock-form button {
  min-height: 38px !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #30d8c8 !important;
  color: #102927 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

html body .sp-products > .pcard .pcard-stock-msg,
html body .woocommerce ul.products li.product.pcard .pcard-stock-msg {
  color: rgba(255, 255, 255, .78) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  margin: 7px 0 0 !important;
}

html body :is(#cmplz-cookiebanner-container .cmplz-cookiebanner, .cmplz-cookiebanner) {
  max-width: min(620px, calc(100vw - 32px)) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(16, 41, 39, .14) !important;
  box-shadow: 0 24px 72px -36px rgba(7, 31, 29, .62), 0 2px 0 rgba(255, 255, 255, .9) inset !important;
  font-size: 13px !important;
}

html body :is(#cmplz-cookiebanner-container .cmplz-btn, .cmplz-cookiebanner .cmplz-btn) {
  min-height: 38px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

html body .foot.foot-v3 {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 -24px 80px -58px rgba(7, 31, 29, .58) !important;
}

@media (max-width: 860px) {
  html body :is(
    .hero,
    .shop-hero,
    .brands-hero,
    .brand-hero,
    .wiki-hero,
    .recipes-hero,
    .news-hero,
    .about-hero,
    .contact-hero,
    .four04-hero,
    .archive-head,
    .woocommerce-products-header
  ) {
    border-radius: 0 !important;
  }

  html body .sp-products > .pcard .pcard-stock-row,
  html body .woocommerce ul.products li.product.pcard .pcard-stock-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Wiki hero quick links: keep pills readable on the dark fluid hero. */
html body .wiki-hero .quick a,
html body .wiki-hero .quick a:visited {
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  color: #102927 !important;
  box-shadow: 0 12px 24px -18px rgba(0, 0, 0, .46) !important;
  text-shadow: none !important;
}

html body .wiki-hero .quick a:hover,
html body .wiki-hero .quick a:focus-visible {
  background: #30d8c8 !important;
  border-color: #30d8c8 !important;
  color: #102927 !important;
}

/* Lee review pass: remove the dead top-left wiki hero space and tame the
   homepage from full green/teal wash into charcoal with subtle moving light. */
@keyframes teas-charcoal-light {
  0%, 100% {
    background-position: 18% 78%, 84% 18%, 52% 46%, 50% 50%;
  }
  50% {
    background-position: 26% 70%, 76% 24%, 48% 52%, 50% 50%;
  }
}

html body.home :is(.hero, .hero.hero-v2),
html body.home-v2 :is(.hero, .hero.hero-v2) {
  background:
    radial-gradient(90% 68% at 12% 86%, rgba(255, 255, 255, .075), transparent 62%),
    radial-gradient(50% 44% at 84% 18%, rgba(217, 109, 102, .15), transparent 66%),
    radial-gradient(42% 42% at 55% 42%, rgba(48, 216, 200, .07), transparent 70%),
    linear-gradient(135deg, #1b1d20 0%, #101317 48%, #211a1e 100%) !important;
  color: #ffffff !important;
}

html body.home :is(.hero, .hero.hero-v2)::before,
html body.home-v2 :is(.hero, .hero.hero-v2)::before {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  background:
    radial-gradient(90% 68% at 18% 78%, rgba(255, 255, 255, .08), transparent 62%),
    radial-gradient(50% 44% at 84% 18%, rgba(217, 109, 102, .16), transparent 66%),
    radial-gradient(42% 42% at 52% 46%, rgba(48, 216, 200, .075), transparent 70%),
    linear-gradient(135deg, #1b1d20 0%, #101317 48%, #211a1e 100%) !important;
  background-size: 150% 150%, 150% 150%, 160% 160%, 100% 100% !important;
  animation: teas-charcoal-light 22s ease-in-out infinite !important;
}

html body.home :is(.hero, .hero.hero-v2)::after,
html body.home-v2 :is(.hero, .hero.hero-v2)::after {
  opacity: .035 !important;
  mix-blend-mode: screen !important;
}

html body.home :is(.hero, .hero.hero-v2) :is(em, .it),
html body.home-v2 :is(.hero, .hero.hero-v2) :is(em, .it) {
  color: #e9c5bc !important;
}

html body .wiki-hero {
  grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(26px, 5vw, 70px) !important;
  min-height: clamp(620px, 68vw, 740px) !important;
  padding: clamp(42px, 5.2vw, 70px) clamp(44px, 6vw, 78px) !important;
}

html body .wiki-hero > .index-num {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: start !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  opacity: .72 !important;
}

html body .wiki-hero > div:not(.index-num):not(.wiki-search) {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: start !important;
  width: min(100%, 630px) !important;
  max-width: 630px !important;
}

html body .wiki-hero > div:not(.index-num):not(.wiki-search) h1 {
  max-width: 620px !important;
  font-size: clamp(56px, 8vw, 96px) !important;
  line-height: .92 !important;
  letter-spacing: 0 !important;
}

html body .wiki-hero > div:not(.index-num):not(.wiki-search) .lede {
  max-width: 560px !important;
  font-size: clamp(16px, 1.35vw, 19px) !important;
}

html body .wiki-hero > .wiki-search {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: end !important;
  width: min(100%, 470px) !important;
  max-width: 470px !important;
  margin: 0 !important;
  padding: clamp(18px, 2.4vw, 26px) !important;
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 24px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 28px 70px -42px rgba(0, 0, 0, .62) !important;
}

html body .wiki-hero .wiki-search .quick a,
html body .wiki-hero .wiki-search .quick a:visited {
  background: rgba(255, 255, 255, .94) !important;
  border-color: rgba(255, 255, 255, .74) !important;
  color: #102927 !important;
  -webkit-text-fill-color: #102927 !important;
}

@media (max-width: 860px) {
  html body .wiki-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    min-height: auto !important;
    padding: 30px 18px 34px !important;
    gap: 22px !important;
  }

  html body .wiki-hero > .index-num,
  html body .wiki-hero > div:not(.index-num):not(.wiki-search),
  html body .wiki-hero > .wiki-search {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }

  html body .wiki-hero > div:not(.index-num):not(.wiki-search) h1 {
    font-size: clamp(44px, 14vw, 62px) !important;
  }
}

/* Final hue proof timing override.
   Use non-round durations so 0s/10s/20s screenshots show real motion. */
html body .bz-hero,
html body .sm-hero {
  animation: teas-fluid-sweep 37s ease-in-out infinite !important;
}

html body .bz-hero::before,
html body .sm-hero::before {
  animation: teas-fluid-hue 19s ease-in-out infinite, teas-fluid-sweep 37s ease-in-out infinite !important;
}

html body .sp-hero,
html body .recipes-hero,
html body .ct-hero,
html body .article-head,
html body .sidebar-cta,
html body .wiki-cite,
html body .os-stats,
html body .os-tp,
html body .os-prom-dark,
html body .os-curator,
html body .os-rail-inner,
html body .wk-hero,
html body .wiki-hero,
html body .nw-hero-l,
html body .nw-feat-l,
html body .acctx-hero,
html body .sb-hold-card,
html body .rf-hero-l,
html body .polx-hero,
html body .generic-page > .page-head-simple {
  animation: teas-warm-sweep 37s ease-in-out infinite !important;
}

html body .sp-hero::before,
html body .recipes-hero::before,
html body .ct-hero::before,
html body .article-head::before,
html body .sidebar-cta::before,
html body .wiki-cite::before,
html body .os-stats::before,
html body .os-tp::before,
html body .os-prom-dark::before,
html body .os-curator::before,
html body .os-rail-inner::before,
html body .wk-hero::before,
html body .wiki-hero::before,
html body .nw-hero-l::before,
html body .nw-feat-l::before,
html body .acctx-hero::before,
html body .sb-hold-card::before,
html body .rf-hero-l::before,
html body .polx-hero::before,
html body .generic-page > .page-head-simple::before {
  animation: teas-warm-hue 19s ease-in-out infinite, teas-warm-sweep 37s ease-in-out infinite !important;
}

/* Lee colour pass: remove the brown/sepia wash and split the hue treatment
   into distinct full-colour palettes by page family. */
@property --teas-prism-hh {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes teas-prism-hue {
  0%, 100% { --teas-prism-hh: 0deg; }
  36% { --teas-prism-hh: 86deg; }
  68% { --teas-prism-hh: 168deg; }
}

@keyframes teas-prism-sweep {
  0%, 100% { background-position: 84% 8%, 16% 94%, 92% 8%, 50% 50%; }
  48% { background-position: 16% 90%, 82% 14%, 12% 88%, 50% 50%; }
}

html body .article-head,
html body .wiki-cite,
html body .wk-hero,
html body .wiki-hero,
html body .generic-page > .page-head-simple {
  --teas-prism-a: 194deg;
  --teas-prism-b: 222deg;
  --teas-prism-c: 318deg;
  --teas-prism-glow: rgba(52, 209, 247, .42);
  --teas-prism-shadow: rgba(18, 48, 118, .50);
}

html body .os-stats,
html body .os-tp,
html body .os-prom-dark,
html body .os-curator,
html body .os-rail-inner {
  --teas-prism-a: 326deg;
  --teas-prism-b: 214deg;
  --teas-prism-c: 176deg;
  --teas-prism-glow: rgba(255, 73, 160, .34);
  --teas-prism-shadow: rgba(28, 42, 120, .46);
}

html body .acctx-hero {
  --teas-prism-a: 204deg;
  --teas-prism-b: 248deg;
  --teas-prism-c: 328deg;
  --teas-prism-glow: rgba(84, 204, 255, .38);
  --teas-prism-shadow: rgba(18, 40, 138, .50);
}

html body .sp-hero,
html body .bz-hero,
html body .sm-hero,
html body .bz-hero-l,
html body .bz-open,
html body .bz-sub-popular {
  --teas-prism-a: 174deg;
  --teas-prism-b: 206deg;
  --teas-prism-c: 332deg;
  --teas-prism-glow: rgba(42, 224, 208, .40);
  --teas-prism-shadow: rgba(0, 78, 116, .46);
}

html body .nw-hero-l,
html body .nw-feat-l,
html body .sidebar-cta,
html body .sb-hold-card,
html body .rf-hero-l,
html body .polx-hero {
  --teas-prism-a: 262deg;
  --teas-prism-b: 198deg;
  --teas-prism-c: 346deg;
  --teas-prism-glow: rgba(126, 110, 255, .38);
  --teas-prism-shadow: rgba(44, 30, 134, .48);
}

html body .article-head,
html body .wiki-cite,
html body .wk-hero,
html body .wiki-hero,
html body .generic-page > .page-head-simple,
html body .os-stats,
html body .os-tp,
html body .os-prom-dark,
html body .os-curator,
html body .os-rail-inner,
html body .acctx-hero,
html body .sp-hero,
html body .bz-hero,
html body .sm-hero,
html body .bz-hero-l,
html body .bz-open,
html body .bz-sub-popular,
html body .nw-hero-l,
html body .nw-feat-l,
html body .sidebar-cta,
html body .sb-hold-card,
html body .rf-hero-l,
html body .polx-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(58% 52% at 42% 50%, hsl(var(--teas-prism-a) 88% 58% / .70) 0%, transparent 60%),
    radial-gradient(42% 42% at 8% 96%, hsl(var(--teas-prism-b) 92% 60% / .36) 0%, transparent 68%),
    radial-gradient(38% 42% at 96% 4%, hsl(var(--teas-prism-c) 90% 62% / .44) 0%, transparent 70%),
    linear-gradient(135deg,
      hsl(var(--teas-prism-b) 82% 15%) 0%,
      hsl(var(--teas-prism-a) 80% 10%) 48%,
      hsl(var(--teas-prism-c) 78% 9%) 100%) !important;
  color: #fffaf7 !important;
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow:
    0 28px 68px -32px var(--teas-prism-shadow),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  animation: teas-prism-sweep 37s ease-in-out infinite !important;
}

html body .article-head::before,
html body .wiki-cite::before,
html body .wk-hero::before,
html body .wiki-hero::before,
html body .generic-page > .page-head-simple::before,
html body .os-stats::before,
html body .os-tp::before,
html body .os-prom-dark::before,
html body .os-curator::before,
html body .os-rail-inner::before,
html body .acctx-hero::before,
html body .sp-hero::before,
html body .bz-hero::before,
html body .sm-hero::before,
html body .bz-hero-l::before,
html body .bz-open::before,
html body .bz-sub-popular::before,
html body .nw-hero-l::before,
html body .nw-feat-l::before,
html body .sidebar-cta::before,
html body .sb-hold-card::before,
html body .rf-hero-l::before,
html body .polx-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  background:
    radial-gradient(56% 52% at 44% 48%, hsl(calc(var(--teas-prism-a) + var(--teas-prism-hh)) 94% 64%) 0%, transparent 58%),
    radial-gradient(42% 42% at 8% 96%, hsl(calc(var(--teas-prism-b) + var(--teas-prism-hh)) 92% 58% / .46) 0%, transparent 66%),
    radial-gradient(36% 38% at 96% 4%, hsl(calc(var(--teas-prism-c) + var(--teas-prism-hh)) 92% 60% / .54) 0%, transparent 68%),
    linear-gradient(135deg,
      hsl(calc(var(--teas-prism-b) + var(--teas-prism-hh)) 84% 16%) 0%,
      hsl(calc(var(--teas-prism-a) + var(--teas-prism-hh)) 82% 10%) 48%,
      hsl(calc(var(--teas-prism-c) + var(--teas-prism-hh)) 78% 8%) 100%) !important;
  background-size: 220% 220%, 150% 150%, 150% 150%, 240% 240% !important;
  background-position: 84% 8%, 16% 94%, 92% 8%, 50% 50% !important;
  animation: teas-prism-hue 19s ease-in-out infinite, teas-prism-sweep 37s ease-in-out infinite !important;
  will-change: background-position !important;
}

/* Specificity hardening: the previous warm rule uses :is() with a two-class
   branch, so duplicate classes here to make the no-brown prism palette win. */
html body .article-head.article-head,
html body .wiki-cite.wiki-cite,
html body .wk-hero.wk-hero,
html body .wiki-hero.wiki-hero,
html body .generic-page.generic-page > .page-head-simple.page-head-simple,
html body .os-stats.os-stats,
html body .os-tp.os-tp,
html body .os-prom-dark.os-prom-dark,
html body .os-curator.os-curator,
html body .os-rail-inner.os-rail-inner,
html body .acctx-hero.acctx-hero,
html body .sp-hero.sp-hero,
html body .bz-hero.bz-hero,
html body .sm-hero.sm-hero,
html body .bz-hero-l.bz-hero-l,
html body .bz-open.bz-open,
html body .bz-sub-popular.bz-sub-popular,
html body .nw-hero-l.nw-hero-l,
html body .nw-feat-l.nw-feat-l,
html body .sidebar-cta.sidebar-cta,
html body .sb-hold-card.sb-hold-card,
html body .rf-hero-l.rf-hero-l,
html body .polx-hero.polx-hero {
  background:
    radial-gradient(58% 52% at 42% 50%, hsl(var(--teas-prism-a) 88% 58% / .70) 0%, transparent 60%),
    radial-gradient(42% 42% at 8% 96%, hsl(var(--teas-prism-b) 92% 60% / .36) 0%, transparent 68%),
    radial-gradient(38% 42% at 96% 4%, hsl(var(--teas-prism-c) 90% 62% / .44) 0%, transparent 70%),
    linear-gradient(135deg,
      hsl(var(--teas-prism-b) 82% 15%) 0%,
      hsl(var(--teas-prism-a) 80% 10%) 48%,
      hsl(var(--teas-prism-c) 78% 9%) 100%) !important;
  animation: teas-prism-sweep 37s ease-in-out infinite !important;
}

html body .article-head.article-head::before,
html body .wiki-cite.wiki-cite::before,
html body .wk-hero.wk-hero::before,
html body .wiki-hero.wiki-hero::before,
html body .generic-page.generic-page > .page-head-simple.page-head-simple::before,
html body .os-stats.os-stats::before,
html body .os-tp.os-tp::before,
html body .os-prom-dark.os-prom-dark::before,
html body .os-curator.os-curator::before,
html body .os-rail-inner.os-rail-inner::before,
html body .acctx-hero.acctx-hero::before,
html body .sp-hero.sp-hero::before,
html body .bz-hero.bz-hero::before,
html body .sm-hero.sm-hero::before,
html body .bz-hero-l.bz-hero-l::before,
html body .bz-open.bz-open::before,
html body .bz-sub-popular.bz-sub-popular::before,
html body .nw-hero-l.nw-hero-l::before,
html body .nw-feat-l.nw-feat-l::before,
html body .sidebar-cta.sidebar-cta::before,
html body .sb-hold-card.sb-hold-card::before,
html body .rf-hero-l.rf-hero-l::before,
html body .polx-hero.polx-hero::before {
  background:
    radial-gradient(56% 52% at 44% 48%, hsl(calc(var(--teas-prism-a) + var(--teas-prism-hh)) 94% 64%) 0%, transparent 58%),
    radial-gradient(42% 42% at 8% 96%, hsl(calc(var(--teas-prism-b) + var(--teas-prism-hh)) 92% 58% / .46) 0%, transparent 66%),
    radial-gradient(36% 38% at 96% 4%, hsl(calc(var(--teas-prism-c) + var(--teas-prism-hh)) 92% 60% / .54) 0%, transparent 68%),
    linear-gradient(135deg,
      hsl(calc(var(--teas-prism-b) + var(--teas-prism-hh)) 84% 16%) 0%,
      hsl(calc(var(--teas-prism-a) + var(--teas-prism-hh)) 82% 10%) 48%,
      hsl(calc(var(--teas-prism-c) + var(--teas-prism-hh)) 78% 8%) 100%) !important;
  background-size: 220% 220%, 150% 150%, 150% 150%, 240% 240% !important;
  background-position: 84% 8%, 16% 94%, 92% 8%, 50% 50% !important;
  animation: teas-prism-hue 19s ease-in-out infinite, teas-prism-sweep 37s ease-in-out infinite !important;
}

/* No-brown colour model: animate between selected saturated colour families
   instead of rotating through orange/olive/brown parts of the hue wheel. */
@property --teas-pulse-a {
  syntax: "<angle>";
  inherits: true;
  initial-value: 198deg;
}

@property --teas-pulse-b {
  syntax: "<angle>";
  inherits: true;
  initial-value: 226deg;
}

@property --teas-pulse-c {
  syntax: "<angle>";
  inherits: true;
  initial-value: 318deg;
}

@keyframes teas-prism-wiki-colour {
  0%, 100% { --teas-pulse-a: 198deg; --teas-pulse-b: 226deg; --teas-pulse-c: 318deg; }
  50% { --teas-pulse-a: 286deg; --teas-pulse-b: 206deg; --teas-pulse-c: 248deg; }
}

@keyframes teas-prism-story-colour {
  0%, 100% { --teas-pulse-a: 322deg; --teas-pulse-b: 204deg; --teas-pulse-c: 186deg; }
  50% { --teas-pulse-a: 248deg; --teas-pulse-b: 316deg; --teas-pulse-c: 212deg; }
}

@keyframes teas-prism-account-colour {
  0%, 100% { --teas-pulse-a: 212deg; --teas-pulse-b: 258deg; --teas-pulse-c: 328deg; }
  50% { --teas-pulse-a: 300deg; --teas-pulse-b: 198deg; --teas-pulse-c: 238deg; }
}

@keyframes teas-prism-business-colour {
  0%, 100% { --teas-pulse-a: 176deg; --teas-pulse-b: 208deg; --teas-pulse-c: 332deg; }
  50% { --teas-pulse-a: 246deg; --teas-pulse-b: 188deg; --teas-pulse-c: 312deg; }
}

html body .article-head.article-head,
html body .wiki-cite.wiki-cite,
html body .wk-hero.wk-hero,
html body .wiki-hero.wiki-hero,
html body .generic-page.generic-page > .page-head-simple.page-head-simple {
  animation: teas-prism-wiki-colour 19s ease-in-out infinite, teas-prism-sweep 37s ease-in-out infinite !important;
}

html body .os-stats.os-stats,
html body .os-tp.os-tp,
html body .os-prom-dark.os-prom-dark,
html body .os-curator.os-curator,
html body .os-rail-inner.os-rail-inner {
  animation: teas-prism-story-colour 19s ease-in-out infinite, teas-prism-sweep 37s ease-in-out infinite !important;
}

html body .acctx-hero.acctx-hero {
  animation: teas-prism-account-colour 19s ease-in-out infinite, teas-prism-sweep 37s ease-in-out infinite !important;
}

html body .sp-hero.sp-hero,
html body .bz-hero.bz-hero,
html body .sm-hero.sm-hero,
html body .bz-hero-l.bz-hero-l,
html body .bz-open.bz-open,
html body .bz-sub-popular.bz-sub-popular,
html body .nw-hero-l.nw-hero-l,
html body .nw-feat-l.nw-feat-l,
html body .sidebar-cta.sidebar-cta,
html body .sb-hold-card.sb-hold-card,
html body .rf-hero-l.rf-hero-l,
html body .polx-hero.polx-hero {
  animation: teas-prism-business-colour 19s ease-in-out infinite, teas-prism-sweep 37s ease-in-out infinite !important;
}

html body .article-head.article-head,
html body .wiki-cite.wiki-cite,
html body .wk-hero.wk-hero,
html body .wiki-hero.wiki-hero,
html body .generic-page.generic-page > .page-head-simple.page-head-simple,
html body .os-stats.os-stats,
html body .os-tp.os-tp,
html body .os-prom-dark.os-prom-dark,
html body .os-curator.os-curator,
html body .os-rail-inner.os-rail-inner,
html body .acctx-hero.acctx-hero,
html body .sp-hero.sp-hero,
html body .bz-hero.bz-hero,
html body .sm-hero.sm-hero,
html body .bz-hero-l.bz-hero-l,
html body .bz-open.bz-open,
html body .bz-sub-popular.bz-sub-popular,
html body .nw-hero-l.nw-hero-l,
html body .nw-feat-l.nw-feat-l,
html body .sidebar-cta.sidebar-cta,
html body .sb-hold-card.sb-hold-card,
html body .rf-hero-l.rf-hero-l,
html body .polx-hero.polx-hero {
  background:
    radial-gradient(58% 52% at 42% 50%, hsl(var(--teas-pulse-a) 92% 60% / .70) 0%, transparent 60%),
    radial-gradient(42% 42% at 8% 96%, hsl(var(--teas-pulse-b) 92% 58% / .38) 0%, transparent 68%),
    radial-gradient(38% 42% at 96% 4%, hsl(var(--teas-pulse-c) 92% 62% / .46) 0%, transparent 70%),
    linear-gradient(135deg,
      hsl(var(--teas-pulse-b) 82% 15%) 0%,
      hsl(var(--teas-pulse-a) 82% 10%) 48%,
      hsl(var(--teas-pulse-c) 78% 8%) 100%) !important;
  background-size: 220% 220%, 150% 150%, 150% 150%, 240% 240% !important;
  background-position: 84% 8%, 16% 94%, 92% 8%, 50% 50% !important;
}

html body .article-head.article-head::before,
html body .wiki-cite.wiki-cite::before,
html body .wk-hero.wk-hero::before,
html body .wiki-hero.wiki-hero::before,
html body .generic-page.generic-page > .page-head-simple.page-head-simple::before,
html body .os-stats.os-stats::before,
html body .os-tp.os-tp::before,
html body .os-prom-dark.os-prom-dark::before,
html body .os-curator.os-curator::before,
html body .os-rail-inner.os-rail-inner::before,
html body .acctx-hero.acctx-hero::before,
html body .sp-hero.sp-hero::before,
html body .bz-hero.bz-hero::before,
html body .sm-hero.sm-hero::before,
html body .bz-hero-l.bz-hero-l::before,
html body .bz-open.bz-open::before,
html body .bz-sub-popular.bz-sub-popular::before,
html body .nw-hero-l.nw-hero-l::before,
html body .nw-feat-l.nw-feat-l::before,
html body .sidebar-cta.sidebar-cta::before,
html body .sb-hold-card.sb-hold-card::before,
html body .rf-hero-l.rf-hero-l::before,
html body .polx-hero.polx-hero::before {
  background:
    radial-gradient(56% 52% at 44% 48%, hsl(var(--teas-pulse-a) 96% 64%) 0%, transparent 58%),
    radial-gradient(42% 42% at 8% 96%, hsl(var(--teas-pulse-b) 94% 58% / .48) 0%, transparent 66%),
    radial-gradient(36% 38% at 96% 4%, hsl(var(--teas-pulse-c) 94% 62% / .54) 0%, transparent 68%),
    linear-gradient(135deg,
      hsl(var(--teas-pulse-b) 84% 16%) 0%,
      hsl(var(--teas-pulse-a) 84% 10%) 48%,
      hsl(var(--teas-pulse-c) 80% 8%) 100%) !important;
  background-size: 220% 220%, 150% 150%, 150% 150%, 240% 240% !important;
  background-position: 84% 8%, 16% 94%, 92% 8%, 50% 50% !important;
  animation: inherit !important;
}

/* Lee correction: full luminous RGBY hue, not dark coloured panels.
   These are light sources over a dark base: red, blue, green and yellow
   intermingling with page-specific starting points. */
@property --teas-light-a {
  syntax: "<angle>";
  inherits: true;
  initial-value: 352deg;
}

@property --teas-light-b {
  syntax: "<angle>";
  inherits: true;
  initial-value: 214deg;
}

@property --teas-light-c {
  syntax: "<angle>";
  inherits: true;
  initial-value: 132deg;
}

@property --teas-light-d {
  syntax: "<angle>";
  inherits: true;
  initial-value: 54deg;
}

@keyframes teas-rbgy-wiki {
  0%, 100% { --teas-light-a: 208deg; --teas-light-b: 322deg; --teas-light-c: 132deg; --teas-light-d: 54deg; }
  34% { --teas-light-a: 326deg; --teas-light-b: 212deg; --teas-light-c: 58deg; --teas-light-d: 138deg; }
  68% { --teas-light-a: 256deg; --teas-light-b: 188deg; --teas-light-c: 350deg; --teas-light-d: 60deg; }
}

@keyframes teas-rbgy-story {
  0%, 100% { --teas-light-a: 348deg; --teas-light-b: 206deg; --teas-light-c: 138deg; --teas-light-d: 52deg; }
  34% { --teas-light-a: 220deg; --teas-light-b: 316deg; --teas-light-c: 58deg; --teas-light-d: 148deg; }
  68% { --teas-light-a: 286deg; --teas-light-b: 184deg; --teas-light-c: 354deg; --teas-light-d: 56deg; }
}

@keyframes teas-rbgy-account {
  0%, 100% { --teas-light-a: 218deg; --teas-light-b: 276deg; --teas-light-c: 136deg; --teas-light-d: 54deg; }
  34% { --teas-light-a: 318deg; --teas-light-b: 198deg; --teas-light-c: 58deg; --teas-light-d: 148deg; }
  68% { --teas-light-a: 246deg; --teas-light-b: 350deg; --teas-light-c: 184deg; --teas-light-d: 62deg; }
}

@keyframes teas-rbgy-business {
  0%, 100% { --teas-light-a: 176deg; --teas-light-b: 214deg; --teas-light-c: 348deg; --teas-light-d: 54deg; }
  34% { --teas-light-a: 54deg; --teas-light-b: 188deg; --teas-light-c: 318deg; --teas-light-d: 138deg; }
  68% { --teas-light-a: 224deg; --teas-light-b: 344deg; --teas-light-c: 132deg; --teas-light-d: 58deg; }
}

@keyframes teas-rbgy-recipes {
  0%, 100% { --teas-light-a: 176deg; --teas-light-b: 318deg; --teas-light-c: 208deg; --teas-light-d: 54deg; }
  34% { --teas-light-a: 318deg; --teas-light-b: 214deg; --teas-light-c: 142deg; --teas-light-d: 58deg; }
  68% { --teas-light-a: 206deg; --teas-light-b: 348deg; --teas-light-c: 176deg; --teas-light-d: 52deg; }
}

@keyframes teas-rbgy-sweep {
  0%, 100% {
    background-position: 10% 92%, 86% 8%, 46% 42%, 18% 12%, 50% 50%;
  }
  50% {
    background-position: 84% 18%, 14% 86%, 58% 62%, 82% 82%, 50% 50%;
  }
}

html body .article-head.article-head,
html body .wiki-cite.wiki-cite,
html body .wk-hero.wk-hero,
html body .wiki-hero.wiki-hero,
html body .generic-page.generic-page > .page-head-simple.page-head-simple {
  animation: teas-rbgy-wiki 21s ease-in-out infinite, teas-rbgy-sweep 39s ease-in-out infinite !important;
}

html body .os-stats.os-stats,
html body .os-tp.os-tp,
html body .os-prom-dark.os-prom-dark,
html body .os-curator.os-curator,
html body .os-rail-inner.os-rail-inner {
  animation: teas-rbgy-story 21s ease-in-out infinite, teas-rbgy-sweep 39s ease-in-out infinite !important;
}

html body .acctx-hero.acctx-hero {
  animation: teas-rbgy-account 21s ease-in-out infinite, teas-rbgy-sweep 39s ease-in-out infinite !important;
}

html body .recipes-hero.recipes-hero {
  animation: teas-rbgy-recipes 21s ease-in-out infinite, teas-rbgy-sweep 39s ease-in-out infinite !important;
}

html body .hero.hero,
html body .home-bigcta.home-bigcta,
html body .archive-head.archive-head,
html body .woocommerce-products-header.woocommerce-products-header,
html body .shop-hero.shop-hero,
html body .brands-hero.brands-hero,
html body .brand-hero.brand-hero,
html body .news-hero.news-hero,
html body .about-hero.about-hero,
html body .contact-hero.contact-hero,
html body .ct-hero.ct-hero,
html body .ct-promise.ct-promise,
html body .ct-news.ct-news,
html body .page-head.page-head,
html body .page-head-policies.page-head-policies,
html body .ns-header.ns-header,
html body .bcalc-hero.bcalc-hero,
html body .club-hero.club-hero,
html body .gift-hero.gift-hero,
html body .sm-hero.sm-hero,
html body .sm-hero-l.sm-hero-l,
html body .pairings-hero.pairings-hero,
html body .biz-hero.biz-hero,
html body .seg-hero.seg-hero,
html body .sub-hero.sub-hero,
html body .acct-hero.acct-hero,
html body .rewards-header.rewards-header,
html body .notifications-head.notifications-head,
html body .product-hero.product-hero,
html body .product-percup-hero.product-percup-hero,
html body .freebie-hero.freebie-hero,
html body .b2b-dashboard-block.b2b-dashboard-block,
html body .sp-hero.sp-hero,
html body .bz-hero.bz-hero,
html body .bz-hero-l.bz-hero-l,
html body .bz-open.bz-open,
html body .bz-sub-popular.bz-sub-popular,
html body .nw-hero-l.nw-hero-l,
html body .nw-feat-l.nw-feat-l,
html body .sidebar-cta.sidebar-cta,
html body .sb-hold-card.sb-hold-card,
html body .rf-hero-l.rf-hero-l,
html body .polx-hero.polx-hero {
  animation: teas-rbgy-business 21s ease-in-out infinite, teas-rbgy-sweep 39s ease-in-out infinite !important;
}

html body .article-head.article-head,
html body .wiki-cite.wiki-cite,
html body .wk-hero.wk-hero,
html body .wiki-hero.wiki-hero,
html body .generic-page.generic-page > .page-head-simple.page-head-simple,
html body .os-stats.os-stats,
html body .os-tp.os-tp,
html body .os-prom-dark.os-prom-dark,
html body .os-curator.os-curator,
html body .os-rail-inner.os-rail-inner,
html body .acctx-hero.acctx-hero,
html body .recipes-hero.recipes-hero,
html body .hero.hero,
html body .home-bigcta.home-bigcta,
html body .archive-head.archive-head,
html body .woocommerce-products-header.woocommerce-products-header,
html body .shop-hero.shop-hero,
html body .brands-hero.brands-hero,
html body .brand-hero.brand-hero,
html body .news-hero.news-hero,
html body .about-hero.about-hero,
html body .contact-hero.contact-hero,
html body .ct-hero.ct-hero,
html body .ct-promise.ct-promise,
html body .ct-news.ct-news,
html body .page-head.page-head,
html body .page-head-policies.page-head-policies,
html body .ns-header.ns-header,
html body .bcalc-hero.bcalc-hero,
html body .club-hero.club-hero,
html body .gift-hero.gift-hero,
html body .sm-hero.sm-hero,
html body .sm-hero-l.sm-hero-l,
html body .pairings-hero.pairings-hero,
html body .biz-hero.biz-hero,
html body .seg-hero.seg-hero,
html body .sub-hero.sub-hero,
html body .acct-hero.acct-hero,
html body .rewards-header.rewards-header,
html body .notifications-head.notifications-head,
html body .product-hero.product-hero,
html body .product-percup-hero.product-percup-hero,
html body .freebie-hero.freebie-hero,
html body .b2b-dashboard-block.b2b-dashboard-block,
html body .sp-hero.sp-hero,
html body .bz-hero.bz-hero,
html body .bz-hero-l.bz-hero-l,
html body .bz-open.bz-open,
html body .bz-sub-popular.bz-sub-popular,
html body .nw-hero-l.nw-hero-l,
html body .nw-feat-l.nw-feat-l,
html body .sidebar-cta.sidebar-cta,
html body .sb-hold-card.sb-hold-card,
html body .rf-hero-l.rf-hero-l,
html body .polx-hero.polx-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(92% 78% at 8% 96%, hsl(var(--teas-light-c) 96% 66% / .42) 0%, transparent 66%),
    radial-gradient(78% 68% at 88% 6%, hsl(var(--teas-light-a) 96% 66% / .40) 0%, transparent 64%),
    radial-gradient(72% 66% at 48% 44%, hsl(var(--teas-light-b) 94% 64% / .34) 0%, transparent 66%),
    radial-gradient(52% 48% at 22% 12%, hsl(var(--teas-light-d) 98% 72% / .26) 0%, transparent 70%),
    linear-gradient(135deg,
      hsl(var(--teas-light-b) 82% 20%) 0%,
      hsl(var(--teas-light-a) 82% 18%) 46%,
      hsl(var(--teas-light-c) 82% 16%) 100%) !important;
  background-size: 230% 230%, 200% 200%, 190% 190%, 160% 160%, 100% 100% !important;
  background-position: 10% 92%, 86% 8%, 46% 42%, 18% 12%, 50% 50% !important;
  color: #fffdf8 !important;
  border-color: rgba(255, 255, 255, .22) !important;
  box-shadow:
    0 26px 62px -34px rgba(20, 32, 75, .48),
    inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

html body .article-head.article-head::before,
html body .wiki-cite.wiki-cite::before,
html body .wk-hero.wk-hero::before,
html body .wiki-hero.wiki-hero::before,
html body .generic-page.generic-page > .page-head-simple.page-head-simple::before,
html body .os-stats.os-stats::before,
html body .os-tp.os-tp::before,
html body .os-prom-dark.os-prom-dark::before,
html body .os-curator.os-curator::before,
html body .os-rail-inner.os-rail-inner::before,
html body .acctx-hero.acctx-hero::before,
html body .recipes-hero.recipes-hero::before,
html body .hero.hero::before,
html body .home-bigcta.home-bigcta::before,
html body .archive-head.archive-head::before,
html body .woocommerce-products-header.woocommerce-products-header::before,
html body .shop-hero.shop-hero::before,
html body .brands-hero.brands-hero::before,
html body .brand-hero.brand-hero::before,
html body .news-hero.news-hero::before,
html body .about-hero.about-hero::before,
html body .contact-hero.contact-hero::before,
html body .ct-hero.ct-hero::before,
html body .ct-promise.ct-promise::before,
html body .ct-news.ct-news::before,
html body .page-head.page-head::before,
html body .page-head-policies.page-head-policies::before,
html body .ns-header.ns-header::before,
html body .bcalc-hero.bcalc-hero::before,
html body .club-hero.club-hero::before,
html body .gift-hero.gift-hero::before,
html body .sm-hero.sm-hero::before,
html body .sm-hero-l.sm-hero-l::before,
html body .pairings-hero.pairings-hero::before,
html body .biz-hero.biz-hero::before,
html body .seg-hero.seg-hero::before,
html body .sub-hero.sub-hero::before,
html body .acct-hero.acct-hero::before,
html body .rewards-header.rewards-header::before,
html body .notifications-head.notifications-head::before,
html body .product-hero.product-hero::before,
html body .product-percup-hero.product-percup-hero::before,
html body .freebie-hero.freebie-hero::before,
html body .b2b-dashboard-block.b2b-dashboard-block::before,
html body .sp-hero.sp-hero::before,
html body .bz-hero.bz-hero::before,
html body .bz-hero-l.bz-hero-l::before,
html body .bz-open.bz-open::before,
html body .bz-sub-popular.bz-sub-popular::before,
html body .nw-hero-l.nw-hero-l::before,
html body .nw-feat-l.nw-feat-l::before,
html body .sidebar-cta.sidebar-cta::before,
html body .sb-hold-card.sb-hold-card::before,
html body .rf-hero-l.rf-hero-l::before,
html body .polx-hero.polx-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: .72 !important;
  filter: saturate(1.12) brightness(1.02) !important;
  transform: none !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(88% 78% at 12% 96%, hsl(var(--teas-light-d) 100% 76% / .48) 0%, transparent 62%),
    radial-gradient(78% 70% at 88% 10%, hsl(var(--teas-light-a) 100% 70% / .52) 0%, transparent 64%),
    radial-gradient(72% 68% at 48% 44%, hsl(var(--teas-light-b) 100% 68% / .48) 0%, transparent 66%),
    radial-gradient(66% 62% at 4% 28%, hsl(var(--teas-light-c) 98% 68% / .38) 0%, transparent 70%),
    linear-gradient(135deg,
      hsl(var(--teas-light-b) 90% 24%) 0%,
      hsl(var(--teas-light-a) 88% 22%) 48%,
      hsl(var(--teas-light-c) 86% 20%) 100%) !important;
  background-size: 240% 240%, 210% 210%, 190% 190%, 180% 180%, 100% 100% !important;
  background-position: 10% 92%, 86% 8%, 46% 42%, 18% 12%, 50% 50% !important;
  animation: inherit !important;
  will-change: background-position !important;
}

html body .article-head.article-head::after,
html body .wiki-cite.wiki-cite::after,
html body .wk-hero.wk-hero::after,
html body .wiki-hero.wiki-hero::after,
html body .generic-page.generic-page > .page-head-simple.page-head-simple::after,
html body .os-stats.os-stats::after,
html body .os-tp.os-tp::after,
html body .os-prom-dark.os-prom-dark::after,
html body .os-curator.os-curator::after,
html body .os-rail-inner.os-rail-inner::after,
html body .acctx-hero.acctx-hero::after,
html body .recipes-hero.recipes-hero::after,
html body .hero.hero::after,
html body .home-bigcta.home-bigcta::after,
html body .archive-head.archive-head::after,
html body .woocommerce-products-header.woocommerce-products-header::after,
html body .shop-hero.shop-hero::after,
html body .brands-hero.brands-hero::after,
html body .brand-hero.brand-hero::after,
html body .news-hero.news-hero::after,
html body .about-hero.about-hero::after,
html body .contact-hero.contact-hero::after,
html body .ct-hero.ct-hero::after,
html body .ct-promise.ct-promise::after,
html body .ct-news.ct-news::after,
html body .page-head.page-head::after,
html body .page-head-policies.page-head-policies::after,
html body .ns-header.ns-header::after,
html body .bcalc-hero.bcalc-hero::after,
html body .club-hero.club-hero::after,
html body .gift-hero.gift-hero::after,
html body .sm-hero.sm-hero::after,
html body .sm-hero-l.sm-hero-l::after,
html body .pairings-hero.pairings-hero::after,
html body .biz-hero.biz-hero::after,
html body .seg-hero.seg-hero::after,
html body .sub-hero.sub-hero::after,
html body .acct-hero.acct-hero::after,
html body .rewards-header.rewards-header::after,
html body .notifications-head.notifications-head::after,
html body .product-hero.product-hero::after,
html body .product-percup-hero.product-percup-hero::after,
html body .freebie-hero.freebie-hero::after,
html body .b2b-dashboard-block.b2b-dashboard-block::after,
html body .sp-hero.sp-hero::after,
html body .bz-hero.bz-hero::after,
html body .bz-hero-l.bz-hero-l::after,
html body .bz-open.bz-open::after,
html body .bz-sub-popular.bz-sub-popular::after,
html body .nw-hero-l.nw-hero-l::after,
html body .nw-feat-l.nw-feat-l::after,
html body .sidebar-cta.sidebar-cta::after,
html body .sb-hold-card.sb-hold-card::after,
html body .rf-hero-l.rf-hero-l::after,
html body .polx-hero.polx-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: .24 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(52% 42% at 74% 16%, rgba(255, 255, 255, .22) 0%, transparent 68%),
    radial-gradient(42% 36% at 14% 82%, hsl(var(--teas-light-d) 100% 80% / .20) 0%, transparent 72%) !important;
  background-size: 160% 160%, 160% 160% !important;
  background-position: 88% 10%, 14% 86% !important;
  animation: teas-rbgy-sweep 31s ease-in-out infinite !important;
}

/* Lee master correction: return the sitewide hue system to the supplied
   homepage identity. This is colour and motion only: deep teal foundation,
   cyan living light, hot pink/magenta accent, and cream lift. */
@keyframes teas-master-light-drift {
  0%, 100% {
    opacity: .80;
    transform: translate3d(-3%, 2%, 0) scale(1.04);
    filter: saturate(1.12) brightness(1.04) hue-rotate(0deg);
  }
  42% {
    opacity: .95;
    transform: translate3d(4%, -3%, 0) scale(1.10);
    filter: saturate(1.22) brightness(1.12) hue-rotate(9deg);
  }
  72% {
    opacity: .86;
    transform: translate3d(2%, 3%, 0) scale(1.07);
    filter: saturate(1.16) brightness(1.08) hue-rotate(-7deg);
  }
}

@keyframes teas-master-light-counter {
  0%, 100% {
    opacity: .34;
    transform: translate3d(3%, -2%, 0) scale(1.03);
    filter: saturate(1.06) brightness(1.05) hue-rotate(0deg);
  }
  50% {
    opacity: .52;
    transform: translate3d(-4%, 4%, 0) scale(1.09);
    filter: saturate(1.14) brightness(1.14) hue-rotate(-10deg);
  }
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple,
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .acctx-hero.acctx-hero,
  .recipes-hero.recipes-hero,
  .hero.hero,
  .home-bigcta.home-bigcta,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .shop-hero.shop-hero,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .news-hero.news-hero,
  .about-hero.about-hero,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .page-head.page-head,
  .page-head-policies.page-head-policies,
  .ns-header.ns-header,
  .bcalc-hero.bcalc-hero,
  .club-hero.club-hero,
  .gift-hero.gift-hero,
  .sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l,
  .pairings-hero.pairings-hero,
  .biz-hero.biz-hero,
  .seg-hero.seg-hero,
  .sub-hero.sub-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .freebie-hero.freebie-hero,
  .b2b-dashboard-block.b2b-dashboard-block,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card,
  .rf-hero-l.rf-hero-l,
  .polx-hero.polx-hero
) {
  --teas-master-bg-a: #0e6868;
  --teas-master-bg-b: #062828;
  --teas-master-bg-c: #0a4444;
  --teas-master-cyan: 48 216 200;
  --teas-master-pink: 232 72 152;
  --teas-master-violet: 240 96 192;
  --teas-master-cream: 244 239 227;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #fffdf8 !important;
  border-color: rgb(255 255 255 / .22) !important;
  background:
    radial-gradient(92% 78% at 11% 94%, rgb(var(--teas-master-cyan) / .30) 0%, transparent 64%),
    radial-gradient(78% 70% at 89% 8%, rgb(var(--teas-master-pink) / .32) 0%, transparent 66%),
    radial-gradient(62% 58% at 50% 45%, rgb(var(--teas-master-violet) / .18) 0%, transparent 68%),
    linear-gradient(135deg, var(--teas-master-bg-a) 0%, var(--teas-master-bg-b) 48%, var(--teas-master-bg-c) 100%) !important;
  box-shadow:
    0 26px 62px -34px rgb(4 34 32 / .54),
    inset 0 1px 0 rgb(255 255 255 / .18) !important;
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple
) {
  --teas-master-bg-a: #0c5d68;
  --teas-master-bg-c: #0b3f58;
  --teas-master-cyan: 74 218 214;
  --teas-master-pink: 222 78 166;
  --teas-master-violet: 142 176 255;
}

html body :is(
  .recipes-hero.recipes-hero,
  .rf-hero-l.rf-hero-l
) {
  --teas-master-bg-a: #124b51;
  --teas-master-bg-c: #52214c;
  --teas-master-cyan: 54 207 199;
  --teas-master-pink: 232 72 152;
  --teas-master-violet: 218 103 196;
}

html body :is(
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .about-hero.about-hero
) {
  --teas-master-bg-a: #0e6868;
  --teas-master-bg-c: #4d2658;
  --teas-master-cyan: 48 216 200;
  --teas-master-pink: 232 92 164;
  --teas-master-violet: 196 128 230;
}

html body :is(
  .acctx-hero.acctx-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head
) {
  --teas-master-bg-a: #0a555f;
  --teas-master-bg-c: #1d3d6a;
  --teas-master-cyan: 68 213 211;
  --teas-master-pink: 224 82 156;
  --teas-master-violet: 126 156 246;
}

html body :is(
  .shop-hero.shop-hero,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .biz-hero.biz-hero,
  .b2b-dashboard-block.b2b-dashboard-block
) {
  --teas-master-bg-a: #0d6260;
  --teas-master-bg-b: #062828;
  --teas-master-bg-c: #0a4747;
  --teas-master-cyan: 55 218 202;
  --teas-master-pink: 226 76 150;
  --teas-master-violet: 174 126 224;
}

html body :is(
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .news-hero.news-hero,
  .ns-header.ns-header,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero
) {
  --teas-master-bg-a: #0f616a;
  --teas-master-bg-c: #61204e;
  --teas-master-cyan: 54 220 204;
  --teas-master-pink: 232 72 152;
  --teas-master-violet: 238 112 196;
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple,
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .acctx-hero.acctx-hero,
  .recipes-hero.recipes-hero,
  .hero.hero,
  .home-bigcta.home-bigcta,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .shop-hero.shop-hero,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .news-hero.news-hero,
  .about-hero.about-hero,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .page-head.page-head,
  .page-head-policies.page-head-policies,
  .ns-header.ns-header,
  .bcalc-hero.bcalc-hero,
  .club-hero.club-hero,
  .gift-hero.gift-hero,
  .sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l,
  .pairings-hero.pairings-hero,
  .biz-hero.biz-hero,
  .seg-hero.seg-hero,
  .sub-hero.sub-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .freebie-hero.freebie-hero,
  .b2b-dashboard-block.b2b-dashboard-block,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card,
  .rf-hero-l.rf-hero-l,
  .polx-hero.polx-hero
)::before {
  content: "" !important;
  position: absolute !important;
  inset: -22% !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: .84 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(38% 34% at 18% 78%, rgb(var(--teas-master-cyan) / .70) 0%, transparent 68%),
    radial-gradient(34% 32% at 82% 16%, rgb(var(--teas-master-pink) / .58) 0%, transparent 70%),
    radial-gradient(40% 38% at 56% 42%, rgb(var(--teas-master-violet) / .28) 0%, transparent 72%),
    radial-gradient(26% 24% at 72% 78%, rgb(var(--teas-master-cream) / .22) 0%, transparent 72%) !important;
  animation: teas-master-light-drift 24s ease-in-out infinite !important;
  transform: translate3d(0, 0, 0) scale(1.04);
  will-change: transform, opacity, filter !important;
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple,
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .acctx-hero.acctx-hero,
  .recipes-hero.recipes-hero,
  .hero.hero,
  .home-bigcta.home-bigcta,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .shop-hero.shop-hero,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .news-hero.news-hero,
  .about-hero.about-hero,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .page-head.page-head,
  .page-head-policies.page-head-policies,
  .ns-header.ns-header,
  .bcalc-hero.bcalc-hero,
  .club-hero.club-hero,
  .gift-hero.gift-hero,
  .sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l,
  .pairings-hero.pairings-hero,
  .biz-hero.biz-hero,
  .seg-hero.seg-hero,
  .sub-hero.sub-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .freebie-hero.freebie-hero,
  .b2b-dashboard-block.b2b-dashboard-block,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card,
  .rf-hero-l.rf-hero-l,
  .polx-hero.polx-hero
)::after {
  content: "" !important;
  position: absolute !important;
  inset: -16% !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: .42 !important;
  mix-blend-mode: soft-light !important;
  background:
    radial-gradient(42% 38% at 76% 18%, rgb(var(--teas-master-cream) / .38) 0%, transparent 70%),
    radial-gradient(44% 40% at 20% 88%, rgb(var(--teas-master-cyan) / .42) 0%, transparent 72%),
    linear-gradient(120deg, rgb(255 255 255 / .12) 0%, transparent 42%, rgb(255 255 255 / .08) 100%) !important;
  animation: teas-master-light-counter 31s ease-in-out infinite !important;
  transform: translate3d(0, 0, 0) scale(1.03);
  will-change: transform, opacity, filter !important;
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple,
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .acctx-hero.acctx-hero,
  .recipes-hero.recipes-hero,
  .hero.hero,
  .home-bigcta.home-bigcta,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .shop-hero.shop-hero,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .news-hero.news-hero,
  .about-hero.about-hero,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .page-head.page-head,
  .page-head-policies.page-head-policies,
  .ns-header.ns-header,
  .bcalc-hero.bcalc-hero,
  .club-hero.club-hero,
  .gift-hero.gift-hero,
  .sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l,
  .pairings-hero.pairings-hero,
  .biz-hero.biz-hero,
  .seg-hero.seg-hero,
  .sub-hero.sub-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .freebie-hero.freebie-hero,
  .b2b-dashboard-block.b2b-dashboard-block,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card,
  .rf-hero-l.rf-hero-l,
  .polx-hero.polx-hero
) > * {
  position: relative;
  z-index: 1;
}

/* Lee final hue correction: blue/purple is the identity. Green is only a
   small royal glint, never the dominant field. */
@keyframes teas-royal-hue-drift {
  0%, 100% {
    opacity: .84;
    transform: translate3d(-15%, 8%, 0) scale(1.12);
    filter: saturate(1.14) brightness(1.07) hue-rotate(-8deg);
    background-position: 6% 96%, 92% 8%, 48% 42%, 20% 18%, 74% 82%;
  }
  46% {
    opacity: .98;
    transform: translate3d(16%, -10%, 0) scale(1.20);
    filter: saturate(1.24) brightness(1.15) hue-rotate(12deg);
    background-position: 78% 78%, 16% 16%, 64% 58%, 84% 20%, 18% 80%;
  }
  76% {
    opacity: .90;
    transform: translate3d(-6%, 14%, 0) scale(1.15);
    filter: saturate(1.18) brightness(1.10) hue-rotate(-14deg);
    background-position: 24% 64%, 82% 30%, 38% 50%, 12% 14%, 84% 72%;
  }
}

@keyframes teas-royal-hue-counter {
  0%, 100% {
    opacity: .36;
    transform: translate3d(8%, -7%, 0) scale(1.07);
    filter: saturate(1.06) brightness(1.07) hue-rotate(0deg);
    background-position: 82% 12%, 18% 86%, 50% 50%;
  }
  50% {
    opacity: .52;
    transform: translate3d(-10%, 10%, 0) scale(1.15);
    filter: saturate(1.13) brightness(1.14) hue-rotate(-10deg);
    background-position: 22% 22%, 78% 72%, 50% 50%;
  }
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple,
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .acctx-hero.acctx-hero,
  .recipes-hero.recipes-hero,
  .hero.hero,
  .home-bigcta.home-bigcta,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .shop-hero.shop-hero,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .news-hero.news-hero,
  .about-hero.about-hero,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .page-head.page-head,
  .page-head-policies.page-head-policies,
  .ns-header.ns-header,
  .bcalc-hero.bcalc-hero,
  .club-hero.club-hero,
  .gift-hero.gift-hero,
  .sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l,
  .pairings-hero.pairings-hero,
  .biz-hero.biz-hero,
  .seg-hero.seg-hero,
  .sub-hero.sub-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .freebie-hero.freebie-hero,
  .b2b-dashboard-block.b2b-dashboard-block,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card,
  .rf-hero-l.rf-hero-l,
  .polx-hero.polx-hero
) {
  --teas-royal-bg-a: #071c56;
  --teas-royal-bg-b: #160d46;
  --teas-royal-bg-c: #35146d;
  --teas-royal-blue: 58 104 226;
  --teas-royal-electric: 58 178 244;
  --teas-royal-purple: 128 72 216;
  --teas-royal-violet: 190 98 235;
  --teas-royal-pink: 232 72 152;
  --teas-royal-glint: 28 170 150;
  --teas-royal-cream: 244 239 227;
  background:
    radial-gradient(86% 74% at 14% 94%, rgb(var(--teas-royal-blue) / .36) 0%, transparent 66%),
    radial-gradient(78% 68% at 88% 8%, rgb(var(--teas-royal-pink) / .30) 0%, transparent 68%),
    radial-gradient(66% 62% at 48% 44%, rgb(var(--teas-royal-purple) / .30) 0%, transparent 70%),
    radial-gradient(34% 30% at 24% 18%, rgb(var(--teas-royal-glint) / .10) 0%, transparent 76%),
    linear-gradient(135deg, var(--teas-royal-bg-a) 0%, var(--teas-royal-bg-b) 48%, var(--teas-royal-bg-c) 100%) !important;
  color: #fffdf8 !important;
  border-color: rgb(255 255 255 / .22) !important;
  box-shadow:
    0 26px 62px -34px rgb(10 12 58 / .58),
    inset 0 1px 0 rgb(255 255 255 / .18) !important;
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple
) {
  --teas-royal-bg-a: #07245f;
  --teas-royal-bg-b: #120f4c;
  --teas-royal-bg-c: #2b1b74;
  --teas-royal-blue: 64 122 232;
  --teas-royal-purple: 112 82 226;
  --teas-royal-violet: 168 116 244;
  --teas-royal-pink: 216 78 168;
}

html body :is(
  .recipes-hero.recipes-hero,
  .rf-hero-l.rf-hero-l
) {
  --teas-royal-bg-a: #17105c;
  --teas-royal-bg-b: #22104c;
  --teas-royal-bg-c: #551b72;
  --teas-royal-blue: 72 102 232;
  --teas-royal-purple: 144 72 216;
  --teas-royal-violet: 210 96 220;
  --teas-royal-pink: 232 72 152;
}

html body :is(
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .about-hero.about-hero
) {
  --teas-royal-bg-a: #0a205c;
  --teas-royal-bg-b: #181044;
  --teas-royal-bg-c: #44206f;
  --teas-royal-blue: 62 112 226;
  --teas-royal-purple: 132 78 218;
  --teas-royal-violet: 196 112 232;
  --teas-royal-pink: 232 92 164;
}

html body :is(
  .acctx-hero.acctx-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head
) {
  --teas-royal-bg-a: #061f5c;
  --teas-royal-bg-b: #0f164c;
  --teas-royal-bg-c: #291b70;
  --teas-royal-blue: 58 126 236;
  --teas-royal-purple: 116 88 224;
  --teas-royal-violet: 152 130 246;
  --teas-royal-pink: 224 82 156;
}

html body :is(
  .shop-hero.shop-hero,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .biz-hero.biz-hero,
  .b2b-dashboard-block.b2b-dashboard-block
) {
  --teas-royal-bg-a: #08215b;
  --teas-royal-bg-b: #120f45;
  --teas-royal-bg-c: #37166e;
  --teas-royal-blue: 58 108 226;
  --teas-royal-purple: 128 72 216;
  --teas-royal-violet: 174 112 232;
  --teas-royal-pink: 226 76 150;
  --teas-royal-glint: 24 156 140;
}

html body :is(
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .news-hero.news-hero,
  .ns-header.ns-header,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero
) {
  --teas-royal-bg-a: #0c235d;
  --teas-royal-bg-b: #1a1047;
  --teas-royal-bg-c: #55176b;
  --teas-royal-blue: 64 120 232;
  --teas-royal-purple: 140 76 218;
  --teas-royal-violet: 210 102 220;
  --teas-royal-pink: 232 72 152;
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple,
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .acctx-hero.acctx-hero,
  .recipes-hero.recipes-hero,
  .hero.hero,
  .home-bigcta.home-bigcta,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .shop-hero.shop-hero,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .news-hero.news-hero,
  .about-hero.about-hero,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .page-head.page-head,
  .page-head-policies.page-head-policies,
  .ns-header.ns-header,
  .bcalc-hero.bcalc-hero,
  .club-hero.club-hero,
  .gift-hero.gift-hero,
  .sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l,
  .pairings-hero.pairings-hero,
  .biz-hero.biz-hero,
  .seg-hero.seg-hero,
  .sub-hero.sub-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .freebie-hero.freebie-hero,
  .b2b-dashboard-block.b2b-dashboard-block,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card,
  .rf-hero-l.rf-hero-l,
  .polx-hero.polx-hero
)::before {
  inset: -22% !important;
  opacity: .84 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(42% 36% at 18% 78%, rgb(var(--teas-royal-blue) / .68) 0%, transparent 68%),
    radial-gradient(38% 34% at 82% 16%, rgb(var(--teas-royal-pink) / .54) 0%, transparent 70%),
    radial-gradient(44% 40% at 54% 42%, rgb(var(--teas-royal-violet) / .38) 0%, transparent 72%),
    radial-gradient(24% 22% at 24% 18%, rgb(var(--teas-royal-glint) / .14) 0%, transparent 76%),
    radial-gradient(24% 22% at 72% 80%, rgb(var(--teas-royal-cream) / .20) 0%, transparent 74%) !important;
  background-repeat: no-repeat !important;
  background-size: 170% 170%, 160% 160%, 150% 150%, 130% 130%, 120% 120% !important;
  background-position: 6% 96%, 92% 8%, 48% 42%, 20% 18%, 74% 82% !important;
  animation: teas-royal-hue-drift 28s ease-in-out infinite !important;
  transform: translate3d(0, 0, 0) scale(1.04);
  will-change: transform, opacity, filter, background-position !important;
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple,
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .acctx-hero.acctx-hero,
  .recipes-hero.recipes-hero,
  .hero.hero,
  .home-bigcta.home-bigcta,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .shop-hero.shop-hero,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .news-hero.news-hero,
  .about-hero.about-hero,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .page-head.page-head,
  .page-head-policies.page-head-policies,
  .ns-header.ns-header,
  .bcalc-hero.bcalc-hero,
  .club-hero.club-hero,
  .gift-hero.gift-hero,
  .sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l,
  .pairings-hero.pairings-hero,
  .biz-hero.biz-hero,
  .seg-hero.seg-hero,
  .sub-hero.sub-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .freebie-hero.freebie-hero,
  .b2b-dashboard-block.b2b-dashboard-block,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card,
  .rf-hero-l.rf-hero-l,
  .polx-hero.polx-hero
)::after {
  inset: -16% !important;
  opacity: .40 !important;
  mix-blend-mode: soft-light !important;
  background:
    radial-gradient(42% 38% at 76% 18%, rgb(var(--teas-royal-cream) / .34) 0%, transparent 70%),
    radial-gradient(44% 40% at 20% 88%, rgb(var(--teas-royal-electric) / .34) 0%, transparent 72%),
    linear-gradient(120deg, rgb(255 255 255 / .11) 0%, transparent 42%, rgb(255 255 255 / .08) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 160% 160%, 155% 155%, 100% 100% !important;
  background-position: 82% 12%, 18% 86%, 50% 50% !important;
  animation: teas-royal-hue-counter 37s ease-in-out infinite !important;
  transform: translate3d(0, 0, 0) scale(1.03);
  will-change: transform, opacity, filter, background-position !important;
}

body.error404 .error404-page .four04-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #fffdf8 !important;
  border-radius: 18px !important;
  background:
    radial-gradient(86% 74% at 14% 94%, rgb(58 104 226 / .34) 0%, transparent 66%),
    radial-gradient(78% 68% at 88% 8%, rgb(232 72 152 / .30) 0%, transparent 68%),
    radial-gradient(66% 62% at 48% 44%, rgb(128 72 216 / .34) 0%, transparent 70%),
    radial-gradient(28% 26% at 24% 18%, rgb(24 156 140 / .08) 0%, transparent 78%),
    linear-gradient(135deg, #071c56 0%, #160d46 48%, #35146d 100%) !important;
  box-shadow:
    0 26px 62px -34px rgb(10 12 58 / .58),
    inset 0 1px 0 rgb(255 255 255 / .18) !important;
}

body.error404 .error404-page .four04-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -22% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  opacity: .80 !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(42% 36% at 18% 78%, rgb(58 104 226 / .64) 0%, transparent 68%),
    radial-gradient(38% 34% at 82% 16%, rgb(232 72 152 / .52) 0%, transparent 70%),
    radial-gradient(44% 40% at 54% 42%, rgb(190 98 235 / .34) 0%, transparent 72%),
    radial-gradient(24% 22% at 72% 80%, rgb(244 239 227 / .18) 0%, transparent 74%) !important;
  background-repeat: no-repeat !important;
  background-size: 170% 170%, 160% 160%, 150% 150%, 120% 120% !important;
  background-position: 6% 96%, 92% 8%, 48% 42%, 74% 82% !important;
  animation: teas-royal-hue-drift 28s ease-in-out infinite !important;
  transform: translate3d(0, 0, 0) scale(1.04);
  will-change: transform, opacity, filter, background-position !important;
}

body.error404 .error404-page .four04-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: -16% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  opacity: .32 !important;
  mix-blend-mode: soft-light !important;
  background:
    radial-gradient(42% 38% at 76% 18%, rgb(244 239 227 / .32) 0%, transparent 70%),
    radial-gradient(44% 40% at 20% 88%, rgb(66 118 236 / .30) 0%, transparent 72%),
    linear-gradient(120deg, rgb(255 255 255 / .11) 0%, transparent 42%, rgb(255 255 255 / .08) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 160% 160%, 155% 155%, 100% 100% !important;
  background-position: 82% 12%, 18% 86%, 50% 50% !important;
  animation: teas-royal-hue-counter 37s ease-in-out infinite !important;
  transform: translate3d(0, 0, 0) scale(1.03);
  will-change: transform, opacity, filter, background-position !important;
}

body.error404 .error404-page .four04-hero > * {
  position: relative;
  z-index: 1;
}

/* Anthropic design handoff: Hero CSS - 5 Light Palette Variants.html
   Applies the relevant part of the prototype: light hero surfaces with three
   pure-CSS moving colour orbs. Layout, cards, copy and page polish remain
   untouched. */
@keyframes teasLightHeroSurface {
  0%, 100% {
    background-position: 46% 46%, 50% 50%;
  }
  38% {
    background-position: 58% 38%, 50% 50%;
  }
  72% {
    background-position: 36% 58%, 50% 50%;
  }
}

@keyframes teasLightHeroBlobA {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    filter: blur(60px) hue-rotate(0deg);
  }
  34% {
    transform: translate(-22%, 15%) scale(1.33);
    filter: blur(49px) hue-rotate(var(--tlp-a-hue-1, 90deg));
  }
  68% {
    transform: translate(18%, -21%) scale(.74);
    filter: blur(66px) hue-rotate(var(--tlp-a-hue-2, -120deg));
  }
}

@keyframes teasLightHeroBlobB {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    filter: blur(56px) hue-rotate(0deg);
  }
  46% {
    transform: translate(25%, -18%) scale(1.3);
    filter: blur(45px) hue-rotate(var(--tlp-b-hue-1, 140deg));
  }
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple,
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .acctx-hero.acctx-hero,
  .recipes-hero.recipes-hero,
  .hero.hero,
  .home-bigcta.home-bigcta,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .shop-hero.shop-hero,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .news-hero.news-hero,
  .about-hero.about-hero,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .page-head.page-head,
  .page-head-policies.page-head-policies,
  .ns-header.ns-header,
  .bcalc-hero.bcalc-hero,
  .club-hero.club-hero,
  .gift-hero.gift-hero,
  .sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l,
  .pairings-hero.pairings-hero,
  .biz-hero.biz-hero,
  .seg-hero.seg-hero,
  .sub-hero.sub-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .freebie-hero.freebie-hero,
  .b2b-dashboard-block.b2b-dashboard-block,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card,
  .rf-hero-l.rf-hero-l,
  .polx-hero.polx-hero
),
body.error404 .error404-page .four04-hero {
  --tlp-bg: #fdf8ef;
  --tlp-ink: #1c1208;
  --tlp-body: #4a3018;
  --tlp-accent: #d4941e;
  --tlp-action: #1e3d12;
  --tlp-blob-a: hsla(38, 92%, 58%, .80);
  --tlp-blob-b: hsla(58, 88%, 62%, .70);
  --tlp-blob-c: hsla(20, 85%, 64%, .42);
  --tlp-a-speed: 11s;
  --tlp-b-speed: 14s;
  --tlp-surface-speed: 9s;
  --tlp-a-hue-1: 80deg;
  --tlp-a-hue-2: -120deg;
  --tlp-b-hue-1: 150deg;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: var(--tlp-ink) !important;
  background:
    radial-gradient(circle at 50% 50%, var(--tlp-blob-c), transparent 52%),
    var(--tlp-bg) !important;
  background-repeat: no-repeat !important;
  background-size: 150% 150%, 100% 100% !important;
  border-color: color-mix(in srgb, var(--tlp-accent) 28%, rgba(0, 0, 0, .08)) !important;
  box-shadow:
    0 24px 58px -32px color-mix(in srgb, var(--tlp-accent) 30%, rgba(13, 25, 48, .34)),
    inset 0 1px 0 rgba(255, 255, 255, .58) !important;
  animation: teasLightHeroSurface var(--tlp-surface-speed) ease-in-out infinite !important;
}

html body :is(
  .shop-hero.shop-hero,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .biz-hero.biz-hero,
  .b2b-dashboard-block.b2b-dashboard-block
) {
  --tlp-bg: #fff8ed;
  --tlp-ink: #1f1209;
  --tlp-body: #553827;
  --tlp-accent: #d28a24;
  --tlp-action: #193f36;
  --tlp-blob-a: hsla(33, 92%, 70%, .76);
  --tlp-blob-b: hsla(178, 68%, 62%, .50);
  --tlp-blob-c: hsla(336, 78%, 76%, .30);
  --tlp-a-speed: 10s;
  --tlp-b-speed: 13s;
  --tlp-surface-speed: 8.5s;
  --tlp-a-hue-1: 38deg;
  --tlp-a-hue-2: -82deg;
  --tlp-b-hue-1: 96deg;
}

html body .sp-hero.sp-hero .sp-stats {
  background: rgba(255, 255, 255, .56) !important;
  border-color: rgba(210, 138, 36, .18) !important;
  box-shadow:
    0 28px 58px -36px rgba(31, 18, 9, .24),
    inset 0 1px 0 rgba(255, 255, 255, .62) !important;
}

html body .sp-hero.sp-hero .sp-quick {
  border-top-color: rgba(31, 18, 9, .08) !important;
}

html body .sp-hero.sp-hero .sp-quick-lbl {
  color: rgba(31, 18, 9, .38) !important;
}

html body .sp-hero.sp-hero .sp-q-pill {
  background: rgba(255, 255, 255, .62) !important;
  border-color: rgba(31, 18, 9, .10) !important;
  color: #2c1a0f !important;
  box-shadow: 0 8px 22px -18px rgba(31, 18, 9, .32) !important;
}

html body .sp-hero.sp-hero .sp-q-pill:hover,
html body .sp-hero.sp-hero .sp-q-pill:focus-visible {
  background: color-mix(in srgb, var(--tlp-accent) 86%, white) !important;
  border-color: transparent !important;
  color: #fff !important;
}

html body :is(
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .about-hero.about-hero,
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .news-hero.news-hero,
  .ns-header.ns-header,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news
) {
  --tlp-bg: #fdf0f6;
  --tlp-ink: #1e0814;
  --tlp-body: #481828;
  --tlp-accent: #c43070;
  --tlp-action: #6e1040;
  --tlp-blob-a: hsla(336, 80%, 62%, .78);
  --tlp-blob-b: hsla(288, 58%, 66%, .68);
  --tlp-blob-c: hsla(316, 72%, 68%, .34);
  --tlp-a-speed: 12s;
  --tlp-b-speed: 15s;
  --tlp-surface-speed: 10s;
  --tlp-a-hue-1: -140deg;
  --tlp-a-hue-2: 110deg;
  --tlp-b-hue-1: 160deg;
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple
),
body.error404 .error404-page .four04-hero {
  --tlp-bg: #f2f9ef;
  --tlp-ink: #0a180a;
  --tlp-body: #1e3820;
  --tlp-accent: #22941c;
  --tlp-action: #163e12;
  --tlp-blob-a: hsla(138, 62%, 48%, .80);
  --tlp-blob-b: hsla(60, 72%, 58%, .70);
  --tlp-blob-c: hsla(168, 64%, 50%, .34);
  --tlp-a-speed: 9.5s;
  --tlp-b-speed: 12.5s;
  --tlp-surface-speed: 11s;
  --tlp-a-hue-1: 100deg;
  --tlp-a-hue-2: -130deg;
  --tlp-b-hue-1: -120deg;
}

html body :is(
  .recipes-hero.recipes-hero,
  .rf-hero-l.rf-hero-l,
  .pairings-hero.pairings-hero
) {
  --tlp-bg: #fdf4e7;
  --tlp-ink: #1e0c04;
  --tlp-body: #4a2010;
  --tlp-accent: #d04820;
  --tlp-action: #7a2210;
  --tlp-blob-a: hsla(18, 88%, 58%, .80);
  --tlp-blob-b: hsla(40, 84%, 60%, .70);
  --tlp-blob-c: hsla(358, 78%, 60%, .34);
  --tlp-a-speed: 10.5s;
  --tlp-b-speed: 13.5s;
  --tlp-surface-speed: 9s;
  --tlp-a-hue-1: 80deg;
  --tlp-a-hue-2: -110deg;
  --tlp-b-hue-1: -130deg;
}

html body :is(
  .acctx-hero.acctx-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head,
  .home-bigcta.home-bigcta,
  .freebie-hero.freebie-hero,
  .page-head.page-head,
  .page-head-policies.page-head-policies,
  .bcalc-hero.bcalc-hero,
  .club-hero.club-hero,
  .gift-hero.gift-hero,
  .sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l,
  .seg-hero.seg-hero,
  .sub-hero.sub-hero,
  .sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card,
  .polx-hero.polx-hero
) {
  --tlp-bg: #f5f1fd;
  --tlp-ink: #1a0f2e;
  --tlp-body: #3a2858;
  --tlp-accent: #7c3aed;
  --tlp-action: #5b1a9e;
  --tlp-blob-a: hsla(268, 68%, 68%, .80);
  --tlp-blob-b: hsla(300, 55%, 72%, .70);
  --tlp-blob-c: hsla(248, 62%, 66%, .34);
  --tlp-a-speed: 12s;
  --tlp-b-speed: 15s;
  --tlp-surface-speed: 10.5s;
  --tlp-a-hue-1: -120deg;
  --tlp-a-hue-2: 140deg;
  --tlp-b-hue-1: 160deg;
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple,
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .acctx-hero.acctx-hero,
  .recipes-hero.recipes-hero,
  .hero.hero,
  .home-bigcta.home-bigcta,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .shop-hero.shop-hero,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .news-hero.news-hero,
  .about-hero.about-hero,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .page-head.page-head,
  .page-head-policies.page-head-policies,
  .ns-header.ns-header,
  .bcalc-hero.bcalc-hero,
  .club-hero.club-hero,
  .gift-hero.gift-hero,
  .sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l,
  .pairings-hero.pairings-hero,
  .biz-hero.biz-hero,
  .seg-hero.seg-hero,
  .sub-hero.sub-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .freebie-hero.freebie-hero,
  .b2b-dashboard-block.b2b-dashboard-block,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card,
  .rf-hero-l.rf-hero-l,
  .polx-hero.polx-hero
)::before,
body.error404 .error404-page .four04-hero::before {
  content: "" !important;
  position: absolute !important;
  width: 78% !important;
  aspect-ratio: 1 !important;
  height: auto !important;
  inset: auto !important;
  top: -35% !important;
  right: -18% !important;
  z-index: 0 !important;
  border-radius: 50% !important;
  opacity: .72 !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
  background: radial-gradient(circle, var(--tlp-blob-a), transparent 68%) !important;
  animation: teasLightHeroBlobA var(--tlp-a-speed) ease-in-out infinite !important;
  transform: translate3d(0, 0, 0);
  will-change: transform, filter !important;
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple,
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .acctx-hero.acctx-hero,
  .recipes-hero.recipes-hero,
  .hero.hero,
  .home-bigcta.home-bigcta,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .shop-hero.shop-hero,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .news-hero.news-hero,
  .about-hero.about-hero,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .page-head.page-head,
  .page-head-policies.page-head-policies,
  .ns-header.ns-header,
  .bcalc-hero.bcalc-hero,
  .club-hero.club-hero,
  .gift-hero.gift-hero,
  .sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l,
  .pairings-hero.pairings-hero,
  .biz-hero.biz-hero,
  .seg-hero.seg-hero,
  .sub-hero.sub-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .freebie-hero.freebie-hero,
  .b2b-dashboard-block.b2b-dashboard-block,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card,
  .rf-hero-l.rf-hero-l,
  .polx-hero.polx-hero
)::after,
body.error404 .error404-page .four04-hero::after {
  content: "" !important;
  position: absolute !important;
  width: 64% !important;
  aspect-ratio: 1 !important;
  height: auto !important;
  inset: auto !important;
  bottom: -35% !important;
  left: -16% !important;
  z-index: 0 !important;
  border-radius: 50% !important;
  opacity: .66 !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
  background: radial-gradient(circle, var(--tlp-blob-b), transparent 68%) !important;
  animation: teasLightHeroBlobB var(--tlp-b-speed) ease-in-out infinite reverse !important;
  transform: translate3d(0, 0, 0);
  will-change: transform, filter !important;
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple,
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .acctx-hero.acctx-hero,
  .recipes-hero.recipes-hero,
  .hero.hero,
  .home-bigcta.home-bigcta,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .shop-hero.shop-hero,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .news-hero.news-hero,
  .about-hero.about-hero,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .page-head.page-head,
  .page-head-policies.page-head-policies,
  .ns-header.ns-header,
  .bcalc-hero.bcalc-hero,
  .club-hero.club-hero,
  .gift-hero.gift-hero,
  .sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l,
  .pairings-hero.pairings-hero,
  .biz-hero.biz-hero,
  .seg-hero.seg-hero,
  .sub-hero.sub-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .freebie-hero.freebie-hero,
  .b2b-dashboard-block.b2b-dashboard-block,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card,
  .rf-hero-l.rf-hero-l,
  .polx-hero.polx-hero
) :is(h1, h2, h3, .head, .entry-title, .page-title) {
  color: var(--tlp-ink) !important;
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple,
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .acctx-hero.acctx-hero,
  .recipes-hero.recipes-hero,
  .hero.hero,
  .home-bigcta.home-bigcta,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .shop-hero.shop-hero,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .news-hero.news-hero,
  .about-hero.about-hero,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .page-head.page-head,
  .page-head-policies.page-head-policies,
  .ns-header.ns-header,
  .bcalc-hero.bcalc-hero,
  .club-hero.club-hero,
  .gift-hero.gift-hero,
  .sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l,
  .pairings-hero.pairings-hero,
  .biz-hero.biz-hero,
  .seg-hero.seg-hero,
  .sub-hero.sub-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .freebie-hero.freebie-hero,
  .b2b-dashboard-block.b2b-dashboard-block,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card,
  .rf-hero-l.rf-hero-l,
  .polx-hero.polx-hero
) :is(p, .lede, .sub, .subtitle, .excerpt, .meta, .kicker, .eyebrow, .mono) {
  color: color-mix(in srgb, var(--tlp-body) 88%, transparent) !important;
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple,
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .acctx-hero.acctx-hero,
  .recipes-hero.recipes-hero,
  .hero.hero,
  .home-bigcta.home-bigcta,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .shop-hero.shop-hero,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .news-hero.news-hero,
  .about-hero.about-hero,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .page-head.page-head,
  .page-head-policies.page-head-policies,
  .ns-header.ns-header,
  .bcalc-hero.bcalc-hero,
  .club-hero.club-hero,
  .gift-hero.gift-hero,
  .sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l,
  .pairings-hero.pairings-hero,
  .biz-hero.biz-hero,
  .seg-hero.seg-hero,
  .sub-hero.sub-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .freebie-hero.freebie-hero,
  .b2b-dashboard-block.b2b-dashboard-block,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card,
  .rf-hero-l.rf-hero-l,
  .polx-hero.polx-hero
) em {
  color: color-mix(in srgb, var(--tlp-accent) 72%, var(--tlp-ink)) !important;
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple,
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .acctx-hero.acctx-hero,
  .recipes-hero.recipes-hero,
  .hero.hero,
  .home-bigcta.home-bigcta,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .shop-hero.shop-hero,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .news-hero.news-hero,
  .about-hero.about-hero,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .page-head.page-head,
  .page-head-policies.page-head-policies,
  .ns-header.ns-header,
  .bcalc-hero.bcalc-hero,
  .club-hero.club-hero,
  .gift-hero.gift-hero,
  .sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l,
  .pairings-hero.pairings-hero,
  .biz-hero.biz-hero,
  .seg-hero.seg-hero,
  .sub-hero.sub-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .freebie-hero.freebie-hero,
  .b2b-dashboard-block.b2b-dashboard-block,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card,
  .rf-hero-l.rf-hero-l,
  .polx-hero.polx-hero
) > * {
  position: relative;
  z-index: 1;
}

html body .hero.hero > :is(.hero-bg, .hotspot, .glow, .grain) {
  display: none !important;
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple,
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .acctx-hero.acctx-hero,
  .recipes-hero.recipes-hero,
  .hero.hero,
  .home-bigcta.home-bigcta,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .shop-hero.shop-hero,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .news-hero.news-hero,
  .about-hero.about-hero,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .page-head.page-head,
  .page-head-policies.page-head-policies,
  .ns-header.ns-header,
  .bcalc-hero.bcalc-hero,
  .club-hero.club-hero,
  .gift-hero.gift-hero,
  .sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l,
  .pairings-hero.pairings-hero,
  .biz-hero.biz-hero,
  .seg-hero.seg-hero,
  .sub-hero.sub-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .freebie-hero.freebie-hero,
  .b2b-dashboard-block.b2b-dashboard-block,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card,
  .rf-hero-l.rf-hero-l,
  .polx-hero.polx-hero
) :is(.btn-primary, .btn-go, .cta, .view-btn, .bigcta-btn-primary, .button, button[type="submit"]) {
  background: var(--tlp-action) !important;
  border-color: color-mix(in srgb, var(--tlp-action) 84%, white) !important;
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: 0 16px 34px -20px color-mix(in srgb, var(--tlp-action) 74%, transparent) !important;
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple,
  .os-stats.os-stats,
  .os-tp.os-tp,
  .os-prom-dark.os-prom-dark,
  .os-curator.os-curator,
  .os-rail-inner.os-rail-inner,
  .acctx-hero.acctx-hero,
  .recipes-hero.recipes-hero,
  .hero.hero,
  .home-bigcta.home-bigcta,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .shop-hero.shop-hero,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .news-hero.news-hero,
  .about-hero.about-hero,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .ct-promise.ct-promise,
  .ct-news.ct-news,
  .page-head.page-head,
  .page-head-policies.page-head-policies,
  .ns-header.ns-header,
  .bcalc-hero.bcalc-hero,
  .club-hero.club-hero,
  .gift-hero.gift-hero,
  .sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l,
  .pairings-hero.pairings-hero,
  .biz-hero.biz-hero,
  .seg-hero.seg-hero,
  .sub-hero.sub-hero,
  .acct-hero.acct-hero,
  .rewards-header.rewards-header,
  .notifications-head.notifications-head,
  .product-hero.product-hero,
  .product-percup-hero.product-percup-hero,
  .freebie-hero.freebie-hero,
  .b2b-dashboard-block.b2b-dashboard-block,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l,
  .bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular,
  .nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l,
  .sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card,
  .rf-hero-l.rf-hero-l,
  .polx-hero.polx-hero
) :is(.btn-ghost, .bigcta-btn-ghost) {
  background: rgba(255, 255, 255, .56) !important;
  border-color: color-mix(in srgb, var(--tlp-action) 38%, transparent) !important;
  color: var(--tlp-action) !important;
  text-shadow: none !important;
}

html body :is(
  .article-head.article-head,
  .wiki-cite.wiki-cite,
  .wk-hero.wk-hero,
  .wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple,
  .recipes-hero.recipes-hero,
  .hero.hero,
  .home-bigcta.home-bigcta,
  .archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header,
  .shop-hero.shop-hero,
  .brands-hero.brands-hero,
  .brand-hero.brand-hero,
  .news-hero.news-hero,
  .about-hero.about-hero,
  .contact-hero.contact-hero,
  .ct-hero.ct-hero,
  .page-head.page-head,
  .biz-hero.biz-hero,
  .acct-hero.acct-hero,
  .sp-hero.sp-hero,
  .bz-hero.bz-hero,
  .rf-hero-l.rf-hero-l
) :is(strong, .lede strong) {
  color: var(--tlp-ink) !important;
}

body.error404 .error404-page .four04-hero :is(h1, h2, h3, .four04-num) {
  color: var(--tlp-ink) !important;
}

body.error404 .error404-page .four04-hero :is(.lede, .four04-search-hint) {
  color: color-mix(in srgb, var(--tlp-body) 88%, transparent) !important;
}

body.error404 .error404-page .four04-hero a {
  color: color-mix(in srgb, var(--tlp-accent) 70%, var(--tlp-ink)) !important;
}

body.error404 .error404-page .four04-hero button {
  background: var(--tlp-accent) !important;
  color: var(--tlp-ink) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body :is(
    .article-head.article-head,
    .wiki-cite.wiki-cite,
    .wk-hero.wk-hero,
    .wiki-hero.wiki-hero,
    .generic-page.generic-page > .page-head-simple.page-head-simple,
    .os-stats.os-stats,
    .os-tp.os-tp,
    .os-prom-dark.os-prom-dark,
    .os-curator.os-curator,
    .os-rail-inner.os-rail-inner,
    .acctx-hero.acctx-hero,
    .recipes-hero.recipes-hero,
    .hero.hero,
    .home-bigcta.home-bigcta,
    .archive-head.archive-head,
    .woocommerce-products-header.woocommerce-products-header,
    .shop-hero.shop-hero,
    .brands-hero.brands-hero,
    .brand-hero.brand-hero,
    .news-hero.news-hero,
    .about-hero.about-hero,
    .contact-hero.contact-hero,
    .ct-hero.ct-hero,
    .ct-promise.ct-promise,
    .ct-news.ct-news,
    .page-head.page-head,
    .page-head-policies.page-head-policies,
    .ns-header.ns-header,
    .bcalc-hero.bcalc-hero,
    .club-hero.club-hero,
    .gift-hero.gift-hero,
    .sm-hero.sm-hero,
    .sm-hero-l.sm-hero-l,
    .pairings-hero.pairings-hero,
    .biz-hero.biz-hero,
    .seg-hero.seg-hero,
    .sub-hero.sub-hero,
    .acct-hero.acct-hero,
    .rewards-header.rewards-header,
    .notifications-head.notifications-head,
    .product-hero.product-hero,
    .product-percup-hero.product-percup-hero,
    .freebie-hero.freebie-hero,
    .b2b-dashboard-block.b2b-dashboard-block,
    .sp-hero.sp-hero,
    .bz-hero.bz-hero,
    .bz-hero-l.bz-hero-l,
    .bz-open.bz-open,
    .bz-sub-popular.bz-sub-popular,
    .nw-hero-l.nw-hero-l,
    .nw-feat-l.nw-feat-l,
    .sidebar-cta.sidebar-cta,
    .sb-hold-card.sb-hold-card,
    .rf-hero-l.rf-hero-l,
    .polx-hero.polx-hero
  ),
  body.error404 .error404-page .four04-hero,
  html body :is(
    .article-head.article-head,
    .wiki-cite.wiki-cite,
    .wk-hero.wk-hero,
    .wiki-hero.wiki-hero,
    .generic-page.generic-page > .page-head-simple.page-head-simple,
    .os-stats.os-stats,
    .os-tp.os-tp,
    .os-prom-dark.os-prom-dark,
    .os-curator.os-curator,
    .os-rail-inner.os-rail-inner,
    .acctx-hero.acctx-hero,
    .recipes-hero.recipes-hero,
    .hero.hero,
    .home-bigcta.home-bigcta,
    .archive-head.archive-head,
    .woocommerce-products-header.woocommerce-products-header,
    .shop-hero.shop-hero,
    .brands-hero.brands-hero,
    .brand-hero.brand-hero,
    .news-hero.news-hero,
    .about-hero.about-hero,
    .contact-hero.contact-hero,
    .ct-hero.ct-hero,
    .ct-promise.ct-promise,
    .ct-news.ct-news,
    .page-head.page-head,
    .page-head-policies.page-head-policies,
    .ns-header.ns-header,
    .bcalc-hero.bcalc-hero,
    .club-hero.club-hero,
    .gift-hero.gift-hero,
    .sm-hero.sm-hero,
    .sm-hero-l.sm-hero-l,
    .pairings-hero.pairings-hero,
    .biz-hero.biz-hero,
    .seg-hero.seg-hero,
    .sub-hero.sub-hero,
    .acct-hero.acct-hero,
    .rewards-header.rewards-header,
    .notifications-head.notifications-head,
    .product-hero.product-hero,
    .product-percup-hero.product-percup-hero,
    .freebie-hero.freebie-hero,
    .b2b-dashboard-block.b2b-dashboard-block,
    .sp-hero.sp-hero,
    .bz-hero.bz-hero,
    .bz-hero-l.bz-hero-l,
    .bz-open.bz-open,
    .bz-sub-popular.bz-sub-popular,
    .nw-hero-l.nw-hero-l,
    .nw-feat-l.nw-feat-l,
    .sidebar-cta.sidebar-cta,
    .sb-hold-card.sb-hold-card,
    .rf-hero-l.rf-hero-l,
    .polx-hero.polx-hero
  )::before,
  html body :is(
    .article-head.article-head,
    .wiki-cite.wiki-cite,
    .wk-hero.wk-hero,
    .wiki-hero.wiki-hero,
    .generic-page.generic-page > .page-head-simple.page-head-simple,
    .os-stats.os-stats,
    .os-tp.os-tp,
    .os-prom-dark.os-prom-dark,
    .os-curator.os-curator,
    .os-rail-inner.os-rail-inner,
    .acctx-hero.acctx-hero,
    .recipes-hero.recipes-hero,
    .hero.hero,
    .home-bigcta.home-bigcta,
    .archive-head.archive-head,
    .woocommerce-products-header.woocommerce-products-header,
    .shop-hero.shop-hero,
    .brands-hero.brands-hero,
    .brand-hero.brand-hero,
    .news-hero.news-hero,
    .about-hero.about-hero,
    .contact-hero.contact-hero,
    .ct-hero.ct-hero,
    .ct-promise.ct-promise,
    .ct-news.ct-news,
    .page-head.page-head,
    .page-head-policies.page-head-policies,
    .ns-header.ns-header,
    .bcalc-hero.bcalc-hero,
    .club-hero.club-hero,
    .gift-hero.gift-hero,
    .sm-hero.sm-hero,
    .sm-hero-l.sm-hero-l,
    .pairings-hero.pairings-hero,
    .biz-hero.biz-hero,
    .seg-hero.seg-hero,
    .sub-hero.sub-hero,
    .acct-hero.acct-hero,
    .rewards-header.rewards-header,
    .notifications-head.notifications-head,
    .product-hero.product-hero,
    .product-percup-hero.product-percup-hero,
    .freebie-hero.freebie-hero,
    .b2b-dashboard-block.b2b-dashboard-block,
    .sp-hero.sp-hero,
    .bz-hero.bz-hero,
    .bz-hero-l.bz-hero-l,
    .bz-open.bz-open,
    .bz-sub-popular.bz-sub-popular,
    .nw-hero-l.nw-hero-l,
    .nw-feat-l.nw-feat-l,
    .sidebar-cta.sidebar-cta,
    .sb-hold-card.sb-hold-card,
    .rf-hero-l.rf-hero-l,
    .polx-hero.polx-hero
  )::after,
  body.error404 .error404-page .four04-hero::before,
  body.error404 .error404-page .four04-hero::after {
    animation: none !important;
  }
}

/* Palette specificity locks: the broad default selector contains a complex
   :is() arm, so these repeated-class selectors intentionally win the cascade. */
html body :is(
  .shop-hero.shop-hero.shop-hero.shop-hero,
  .archive-head.archive-head.archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header.woocommerce-products-header.woocommerce-products-header,
  .product-hero.product-hero.product-hero.product-hero,
  .product-percup-hero.product-percup-hero.product-percup-hero.product-percup-hero,
  .sp-hero.sp-hero.sp-hero.sp-hero,
  .bz-hero.bz-hero.bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l.bz-hero-l.bz-hero-l,
  .bz-open.bz-open.bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular.bz-sub-popular.bz-sub-popular,
  .biz-hero.biz-hero.biz-hero.biz-hero,
  .b2b-dashboard-block.b2b-dashboard-block.b2b-dashboard-block.b2b-dashboard-block
) {
  --tlp-bg: #fff8ed;
  --tlp-ink: #1f1209;
  --tlp-body: #553827;
  --tlp-accent: #d28a24;
  --tlp-action: #193f36;
  --tlp-blob-a: hsla(33, 92%, 70%, .76);
  --tlp-blob-b: hsla(178, 68%, 62%, .50);
  --tlp-blob-c: hsla(336, 78%, 76%, .30);
  --tlp-a-speed: 10s;
  --tlp-b-speed: 13s;
  --tlp-surface-speed: 8.5s;
  --tlp-a-hue-1: 38deg;
  --tlp-a-hue-2: -82deg;
  --tlp-b-hue-1: 96deg;
}

html body :is(
  .brands-hero.brands-hero.brands-hero.brands-hero,
  .brand-hero.brand-hero.brand-hero.brand-hero,
  .about-hero.about-hero.about-hero.about-hero,
  .os-stats.os-stats.os-stats.os-stats,
  .os-tp.os-tp.os-tp.os-tp,
  .os-prom-dark.os-prom-dark.os-prom-dark.os-prom-dark,
  .os-curator.os-curator.os-curator.os-curator,
  .os-rail-inner.os-rail-inner.os-rail-inner.os-rail-inner,
  .news-hero.news-hero.news-hero.news-hero,
  .ns-header.ns-header.ns-header.ns-header,
  .nw-hero-l.nw-hero-l.nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l.nw-feat-l.nw-feat-l,
  .contact-hero.contact-hero.contact-hero.contact-hero,
  .ct-hero.ct-hero.ct-hero.ct-hero,
  .ct-promise.ct-promise.ct-promise.ct-promise,
  .ct-news.ct-news.ct-news.ct-news
) {
  --tlp-bg: #fdf0f6;
  --tlp-ink: #1e0814;
  --tlp-body: #481828;
  --tlp-accent: #c43070;
  --tlp-action: #6e1040;
  --tlp-blob-a: hsla(336, 80%, 62%, .78);
  --tlp-blob-b: hsla(288, 58%, 66%, .68);
  --tlp-blob-c: hsla(316, 72%, 68%, .34);
  --tlp-a-speed: 12s;
  --tlp-b-speed: 15s;
  --tlp-surface-speed: 10s;
  --tlp-a-hue-1: -140deg;
  --tlp-a-hue-2: 110deg;
  --tlp-b-hue-1: 160deg;
}

html body :is(
  .article-head.article-head.article-head.article-head,
  .wiki-cite.wiki-cite.wiki-cite.wiki-cite,
  .wk-hero.wk-hero.wk-hero.wk-hero,
  .wiki-hero.wiki-hero.wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple.page-head-simple.page-head-simple
),
body.error404 .error404-page .four04-hero.four04-hero.four04-hero.four04-hero {
  --tlp-bg: #f2f9ef;
  --tlp-ink: #0a180a;
  --tlp-body: #1e3820;
  --tlp-accent: #22941c;
  --tlp-action: #163e12;
  --tlp-blob-a: hsla(138, 62%, 48%, .80);
  --tlp-blob-b: hsla(60, 72%, 58%, .70);
  --tlp-blob-c: hsla(168, 64%, 50%, .34);
  --tlp-a-speed: 9.5s;
  --tlp-b-speed: 12.5s;
  --tlp-surface-speed: 11s;
  --tlp-a-hue-1: 100deg;
  --tlp-a-hue-2: -130deg;
  --tlp-b-hue-1: -120deg;
}

html body :is(
  .recipes-hero.recipes-hero.recipes-hero.recipes-hero,
  .rf-hero-l.rf-hero-l.rf-hero-l.rf-hero-l,
  .pairings-hero.pairings-hero.pairings-hero.pairings-hero
) {
  --tlp-bg: #fdf4e7;
  --tlp-ink: #1e0c04;
  --tlp-body: #4a2010;
  --tlp-accent: #d04820;
  --tlp-action: #7a2210;
  --tlp-blob-a: hsla(18, 88%, 58%, .80);
  --tlp-blob-b: hsla(40, 84%, 60%, .70);
  --tlp-blob-c: hsla(358, 78%, 60%, .34);
  --tlp-a-speed: 10.5s;
  --tlp-b-speed: 13.5s;
  --tlp-surface-speed: 9s;
  --tlp-a-hue-1: 80deg;
  --tlp-a-hue-2: -110deg;
  --tlp-b-hue-1: -130deg;
}

html body :is(
  .acctx-hero.acctx-hero.acctx-hero.acctx-hero,
  .acct-hero.acct-hero.acct-hero.acct-hero,
  .rewards-header.rewards-header.rewards-header.rewards-header,
  .notifications-head.notifications-head.notifications-head.notifications-head,
  .home-bigcta.home-bigcta.home-bigcta.home-bigcta,
  .freebie-hero.freebie-hero.freebie-hero.freebie-hero,
  .page-head.page-head.page-head.page-head,
  .page-head-policies.page-head-policies.page-head-policies.page-head-policies,
  .bcalc-hero.bcalc-hero.bcalc-hero.bcalc-hero,
  .club-hero.club-hero.club-hero.club-hero,
  .gift-hero.gift-hero.gift-hero.gift-hero,
  .sm-hero.sm-hero.sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l.sm-hero-l.sm-hero-l,
  .seg-hero.seg-hero.seg-hero.seg-hero,
  .sub-hero.sub-hero.sub-hero.sub-hero,
  .sidebar-cta.sidebar-cta.sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card.sb-hold-card.sb-hold-card,
  .polx-hero.polx-hero.polx-hero.polx-hero
) {
  --tlp-bg: #f5f1fd;
  --tlp-ink: #1a0f2e;
  --tlp-body: #3a2858;
  --tlp-accent: #7c3aed;
  --tlp-action: #5b1a9e;
  --tlp-blob-a: hsla(268, 68%, 68%, .80);
  --tlp-blob-b: hsla(300, 55%, 72%, .70);
  --tlp-blob-c: hsla(248, 62%, 66%, .34);
  --tlp-a-speed: 12s;
  --tlp-b-speed: 15s;
  --tlp-surface-speed: 10.5s;
  --tlp-a-hue-1: -120deg;
  --tlp-a-hue-2: 140deg;
  --tlp-b-hue-1: 160deg;
}

/* Real staging hero classes missed by the generic page names. */
html body :is(.os-hero-l.os-hero-l, .nw-hero.nw-hero) {
  --tlp-bg: #fdf0f6;
  --tlp-ink: #1e0814;
  --tlp-body: #481828;
  --tlp-accent: #c43070;
  --tlp-action: #6e1040;
  --tlp-blob-a: hsla(336, 80%, 62%, .78);
  --tlp-blob-b: hsla(288, 58%, 66%, .68);
  --tlp-blob-c: hsla(316, 72%, 68%, .34);
  --tlp-a-speed: 12s;
  --tlp-b-speed: 15s;
  --tlp-surface-speed: 10s;
  --tlp-a-hue-1: -140deg;
  --tlp-a-hue-2: 110deg;
  --tlp-b-hue-1: 160deg;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: var(--tlp-ink) !important;
  background:
    radial-gradient(circle at 50% 50%, var(--tlp-blob-c), transparent 52%),
    var(--tlp-bg) !important;
  background-repeat: no-repeat !important;
  background-size: 150% 150%, 100% 100% !important;
  border-color: color-mix(in srgb, var(--tlp-accent) 28%, rgba(0, 0, 0, .08)) !important;
  box-shadow:
    0 24px 58px -32px color-mix(in srgb, var(--tlp-accent) 30%, rgba(13, 25, 48, .34)),
    inset 0 1px 0 rgba(255, 255, 255, .58) !important;
  animation: teasLightHeroSurface var(--tlp-surface-speed) ease-in-out infinite !important;
}

html body :is(.os-hero-l.os-hero-l, .nw-hero.nw-hero)::before {
  content: "" !important;
  position: absolute !important;
  width: 78% !important;
  aspect-ratio: 1 !important;
  height: auto !important;
  inset: auto !important;
  top: -35% !important;
  right: -18% !important;
  z-index: 0 !important;
  border-radius: 50% !important;
  opacity: .72 !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
  background: radial-gradient(circle, var(--tlp-blob-a), transparent 68%) !important;
  animation: teasLightHeroBlobA var(--tlp-a-speed) ease-in-out infinite !important;
  transform: translate3d(0, 0, 0);
  will-change: transform, filter !important;
}

html body :is(.os-hero-l.os-hero-l, .nw-hero.nw-hero)::after {
  content: "" !important;
  position: absolute !important;
  width: 64% !important;
  aspect-ratio: 1 !important;
  height: auto !important;
  inset: auto !important;
  bottom: -35% !important;
  left: -16% !important;
  z-index: 0 !important;
  border-radius: 50% !important;
  opacity: .66 !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
  background: radial-gradient(circle, var(--tlp-blob-b), transparent 68%) !important;
  animation: teasLightHeroBlobB var(--tlp-b-speed) ease-in-out infinite reverse !important;
  transform: translate3d(0, 0, 0);
  will-change: transform, filter !important;
}

html body :is(.os-hero-l.os-hero-l, .nw-hero.nw-hero) > * {
  position: relative;
  z-index: 1;
}

html body :is(.os-hero-l.os-hero-l, .nw-hero.nw-hero) :is(h1, h2, h3, .os-h1, .nw-h1) {
  color: var(--tlp-ink) !important;
}

html body :is(.os-hero-l.os-hero-l, .nw-hero.nw-hero) :is(p, .os-sub, .nw-sub, .nw-kicker, .os-kicker, .mono) {
  color: color-mix(in srgb, var(--tlp-body) 88%, transparent) !important;
}

html body :is(.os-hero-l.os-hero-l, .nw-hero.nw-hero) em {
  color: color-mix(in srgb, var(--tlp-accent) 72%, var(--tlp-ink)) !important;
}

html body :is(.os-hero-l.os-hero-l, .nw-hero.nw-hero) :is(.btn, button[type="submit"]) {
  background: var(--tlp-action) !important;
  border-color: color-mix(in srgb, var(--tlp-action) 84%, white) !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* Light companion cards from the Anthropic hero handoff. */
html body .hero.hero .rec {
  filter: none !important;
}

html body .hero.hero .rec::before {
  opacity: .18 !important;
  filter: blur(28px) saturate(1.15) !important;
}

html body .hero.hero .rec-panel,
html body .nw-hero.nw-hero .nw-sub-card,
html body :is(.hero-card, .hero-card-v2) {
  color: var(--tlp-ink, #1a1a12) !important;
  background: rgba(255, 255, 255, .88) !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  border-radius: 18px !important;
  box-shadow:
    0 32px 80px -30px rgba(0, 0, 0, .22),
    0 0 0 1px rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
}

html body .hero.hero .rec.is-ready .rec-panel {
  border-radius: 18px 18px 0 0 !important;
}

html body .hero.hero .rec-panel::before,
html body .nw-hero.nw-hero .nw-sub-card::before,
html body :is(.hero-card, .hero-card-v2)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: 3px !important;
  border-radius: 18px 18px 0 0 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--tlp-accent, #d4941e) 72%, #e84898) 0%,
      var(--tlp-accent, #d4941e) 52%,
      color-mix(in srgb, var(--tlp-accent, #d4941e) 60%, #30d8c8) 100%
    ) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

html body .hero.hero .rec-panel {
  overflow: hidden !important;
  padding: 0 !important;
}

html body .hero.hero .rec-head {
  margin: 0 !important;
  padding: 13px 16px 11px !important;
  border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
}

html body .hero.hero .rec-badge {
  background: color-mix(in srgb, var(--tlp-accent, #d4941e) 8%, rgba(255, 255, 255, .72)) !important;
  border: 1px solid color-mix(in srgb, var(--tlp-accent, #d4941e) 24%, rgba(255, 255, 255, .75)) !important;
  color: color-mix(in srgb, var(--tlp-accent, #d4941e) 68%, #4d3714) !important;
  box-shadow: none !important;
}

html body .hero.hero .rec-badge .s,
html body .hero.hero .rec-when .live,
html body .hero.hero .rec-when .livetag {
  color: color-mix(in srgb, var(--tlp-accent, #d4941e) 72%, #2a2519) !important;
  text-shadow: none !important;
}

html body .hero.hero .rec-context {
  margin: 0 !important;
  padding: 12px 16px 0 !important;
  color: color-mix(in srgb, var(--tlp-accent, #d4941e) 68%, #5d4320) !important;
  text-shadow: none !important;
}

html body .hero.hero .rec-body {
  grid-template-columns: 105px minmax(0, 1fr) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 13px 16px !important;
}

html body .hero.hero .rec-pic {
  width: 105px !important;
  min-width: 105px !important;
  height: 122px !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--tlp-accent, #d4941e) 9%, #f7f4ec) !important;
  border: 1px solid color-mix(in srgb, var(--tlp-accent, #d4941e) 18%, rgba(0, 0, 0, .04)) !important;
  box-shadow: none !important;
}

html body .hero.hero .rec-pic img {
  object-fit: contain !important;
  padding: 8px !important;
  transform: none !important;
}

html body .hero.hero .rec-pic .ph {
  color: color-mix(in srgb, var(--tlp-accent, #d4941e) 70%, #4d3714) !important;
}

html body .hero.hero .rec .brand-l,
html body .hero.hero .rec .meta,
html body .hero.hero .rec .rrow .cnt,
html body .hero.hero .rec-when {
  color: rgba(0, 0, 0, .38) !important;
  text-shadow: none !important;
}

html body .hero.hero .rec-title {
  color: #1a1a12 !important;
  text-shadow: none !important;
}

html body .hero.hero .rec-title .it {
  color: color-mix(in srgb, var(--tlp-accent, #d4941e) 72%, #1a1a12) !important;
}

html body .hero.hero .rec-title {
  margin: 5px 0 6px !important;
  font-size: clamp(18px, 1.65vw, 24px) !important;
  line-height: 1.04 !important;
}

html body .hero.hero .rec .rrow .stars {
  color: #d69b2d !important;
  text-shadow: none !important;
}

html body .hero.hero .rec .note {
  margin: 0 !important;
  padding: 0 16px 13px !important;
  color: rgba(0, 0, 0, .58) !important;
  text-shadow: none !important;
}

html body .hero.hero .rec .tags {
  margin: 0 !important;
  padding: 0 16px 13px !important;
}

html body .hero.hero .rec .tag {
  color: rgba(0, 0, 0, .58) !important;
  background: rgba(255, 255, 255, .58) !important;
  border: 1px solid rgba(0, 0, 0, .11) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html body .hero.hero .rec-foot {
  margin: 0 !important;
  padding: 13px 16px !important;
  border-top: 1px solid rgba(0, 0, 0, .06) !important;
  background: rgba(255, 255, 255, .38) !important;
}

html body .hero.hero .price .v {
  color: #1a1a12 !important;
  text-shadow: none !important;
}

html body .hero.hero .price .per,
html body .hero.hero .stock {
  color: rgba(0, 0, 0, .42) !important;
  background: transparent !important;
  text-shadow: none !important;
}

html body .hero.hero .stock .d {
  background: #27a85a !important;
  box-shadow: none !important;
}

html body .hero.hero .addbtn {
  background: color-mix(in srgb, var(--tlp-accent, #d4941e) 88%, #b98020) !important;
  border: 1px solid color-mix(in srgb, var(--tlp-accent, #d4941e) 70%, rgba(255, 255, 255, .72)) !important;
  color: #fff !important;
  box-shadow: 0 16px 32px -20px color-mix(in srgb, var(--tlp-accent, #d4941e) 70%, transparent) !important;
  text-shadow: none !important;
}

html body .hero.hero .rec-switch {
  margin-top: 0 !important;
  overflow: hidden !important;
  border-radius: 0 0 18px 18px !important;
  background: rgba(255, 255, 255, .78) !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  border-top: 0 !important;
  box-shadow: 0 26px 54px -34px rgba(0, 0, 0, .22) !important;
}

html body .hero.hero .rec-tab {
  border-radius: 0 !important;
  color: rgba(0, 0, 0, .38) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html body .hero.hero .rec-tab[aria-selected="true"] {
  color: color-mix(in srgb, var(--tlp-accent, #d4941e) 70%, #2a2519) !important;
  background: color-mix(in srgb, var(--tlp-accent, #d4941e) 9%, rgba(255, 255, 255, .68)) !important;
}

html body .nw-hero.nw-hero .nw-sub-card {
  overflow: hidden !important;
  color: var(--tlp-ink, #1a1a12) !important;
}

html body .nw-hero.nw-hero .nw-sub-card :is(h2, h3, .nw-sub-h) {
  color: var(--tlp-ink, #1a1a12) !important;
  text-shadow: none !important;
}

html body .nw-hero.nw-hero .nw-sub-card :is(p, .nw-sub-foot, .nw-sub-tape) {
  color: color-mix(in srgb, var(--tlp-body, #481828) 70%, transparent) !important;
  text-shadow: none !important;
}

html body .nw-hero.nw-hero .nw-sub-card em {
  color: color-mix(in srgb, var(--tlp-accent, #c43070) 72%, var(--tlp-ink, #1a1a12)) !important;
}

html body .nw-hero.nw-hero .nw-sub-card :is(input, textarea) {
  background: rgba(255, 255, 255, .82) !important;
  border-color: color-mix(in srgb, var(--tlp-accent, #c43070) 18%, rgba(0, 0, 0, .12)) !important;
  color: var(--tlp-ink, #1a1a12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62) !important;
}

/* Light hero form readability: keep search controls visible on pale motion fields. */
html body :is(.brands-hero.brands-hero, .wiki-hero.wiki-hero) :is(
  input[type="search"],
  input[type="text"],
  .search-field
) {
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(31, 18, 9, .12) !important;
  color: var(--tlp-ink, #1f1209) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    0 10px 24px -20px rgba(31, 18, 9, .28) !important;
}

html body :is(.brands-hero.brands-hero, .wiki-hero.wiki-hero) :is(
  input[type="search"],
  input[type="text"],
  .search-field
)::placeholder {
  color: rgba(31, 18, 9, .46) !important;
  opacity: 1 !important;
}

html body .brands-hero.brands-hero form,
html body .brands-hero.brands-hero .search,
html body .brands-hero.brands-hero .brand-search,
html body .wiki-hero.wiki-hero .wiki-search {
  background: rgba(255, 255, 255, .30) !important;
  border-color: rgba(31, 18, 9, .10) !important;
}

html body .brand-hero.brand-hero .searchbox {
  background: rgba(255, 255, 255, .38) !important;
  border: 1px solid rgba(31, 18, 9, .10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    0 14px 34px -26px rgba(31, 18, 9, .30) !important;
}

html body .brand-hero.brand-hero .searchbox input[type="search"] {
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid rgba(31, 18, 9, .09) !important;
  color: #1f1209 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75) !important;
}

html body .brand-hero.brand-hero .searchbox input[type="search"]::placeholder {
  color: rgba(31, 18, 9, .48) !important;
  opacity: 1 !important;
}

html body :is(.brands-hero.brands-hero, .wiki-hero.wiki-hero) :is(.kicker, .eyebrow, .mono) {
  color: rgba(31, 18, 9, .72) !important;
  text-shadow: none !important;
}

html body :is(.brand-hero.brand-hero, .sp-hero.sp-hero, .nw-hero.nw-hero) :is(.stats, .sp-stats, .nw-meta-row) {
  background: rgba(255, 255, 255, .34) !important;
  border-color: color-mix(in srgb, var(--tlp-accent) 22%, rgba(255, 255, 255, .42)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}

html body :is(.brand-hero.brand-hero, .sp-hero.sp-hero, .nw-hero.nw-hero) :is(
  .stat .v,
  .stat .l,
  .sp-stats .v,
  .sp-stats .l,
  .sp-stat-trust-v,
  .sp-stat-trust-l,
  .nw-mr .v,
  .nw-mr .l
) {
  color: var(--tlp-ink) !important;
  text-shadow: none !important;
}

html body :is(.brand-hero.brand-hero, .sp-hero.sp-hero, .nw-hero.nw-hero) :is(.sp-stats .v em, .nw-mr .v em) {
  color: color-mix(in srgb, var(--tlp-accent) 70%, var(--tlp-ink)) !important;
}

/* 2026-06-17 launch correction: keep the light animated hue system,
   but remove the brown/green/purple clashes from commerce, wiki and recipe heroes. */
html body :is(
  .shop-hero.shop-hero.shop-hero.shop-hero.shop-hero,
  .archive-head.archive-head.archive-head.archive-head.archive-head,
  .woocommerce-products-header.woocommerce-products-header.woocommerce-products-header.woocommerce-products-header.woocommerce-products-header,
  .product-hero.product-hero.product-hero.product-hero.product-hero,
  .product-percup-hero.product-percup-hero.product-percup-hero.product-percup-hero.product-percup-hero,
  .sp-hero.sp-hero.sp-hero.sp-hero.sp-hero,
  .bz-hero.bz-hero.bz-hero.bz-hero.bz-hero,
  .bz-hero-l.bz-hero-l.bz-hero-l.bz-hero-l.bz-hero-l,
  .bz-open.bz-open.bz-open.bz-open.bz-open,
  .bz-sub-popular.bz-sub-popular.bz-sub-popular.bz-sub-popular.bz-sub-popular,
  .biz-hero.biz-hero.biz-hero.biz-hero.biz-hero,
  .b2b-dashboard-block.b2b-dashboard-block.b2b-dashboard-block.b2b-dashboard-block.b2b-dashboard-block
) {
  --tlp-bg: #eff7f6;
  --tlp-ink: #042220;
  --tlp-body: #284942;
  --tlp-accent: #e84898;
  --tlp-action: #063f46;
  --tlp-blob-a: hsla(176, 86%, 66%, .74);
  --tlp-blob-b: hsla(330, 82%, 66%, .58);
  --tlp-blob-c: hsla(205, 86%, 72%, .34);
  --tlp-a-speed: 11s;
  --tlp-b-speed: 14s;
  --tlp-surface-speed: 9s;
  --tlp-a-hue-1: 0deg;
  --tlp-a-hue-2: 64deg;
  --tlp-b-hue-1: -54deg;
}

html body :is(
  .article-head.article-head.article-head.article-head.article-head,
  .wiki-cite.wiki-cite.wiki-cite.wiki-cite.wiki-cite,
  .wk-hero.wk-hero.wk-hero.wk-hero.wk-hero,
  .wiki-hero.wiki-hero.wiki-hero.wiki-hero.wiki-hero,
  .generic-page.generic-page > .page-head-simple.page-head-simple.page-head-simple.page-head-simple.page-head-simple
),
body.error404 .error404-page .four04-hero.four04-hero.four04-hero.four04-hero.four04-hero {
  --tlp-bg: #eef7ff;
  --tlp-ink: #071b34;
  --tlp-body: #24405f;
  --tlp-accent: #2c7be5;
  --tlp-action: #0d3b66;
  --tlp-blob-a: hsla(205, 92%, 68%, .72);
  --tlp-blob-b: hsla(350, 82%, 72%, .52);
  --tlp-blob-c: hsla(48, 92%, 74%, .28);
  --tlp-a-speed: 10.5s;
  --tlp-b-speed: 14.5s;
  --tlp-surface-speed: 10s;
  --tlp-a-hue-1: 18deg;
  --tlp-a-hue-2: -72deg;
  --tlp-b-hue-1: 86deg;
}

html body :is(
  .recipes-hero.recipes-hero.recipes-hero.recipes-hero.recipes-hero,
  .rf-hero-l.rf-hero-l.rf-hero-l.rf-hero-l.rf-hero-l,
  .pairings-hero.pairings-hero.pairings-hero.pairings-hero.pairings-hero
) {
  --tlp-bg: #fff2f3;
  --tlp-ink: #26101a;
  --tlp-body: #563040;
  --tlp-accent: #d94262;
  --tlp-action: #6f1d46;
  --tlp-blob-a: hsla(350, 86%, 68%, .66);
  --tlp-blob-b: hsla(198, 86%, 72%, .48);
  --tlp-blob-c: hsla(32, 92%, 72%, .24);
  --tlp-a-speed: 11.5s;
  --tlp-b-speed: 15s;
  --tlp-surface-speed: 9.5s;
  --tlp-a-hue-1: 36deg;
  --tlp-a-hue-2: -90deg;
  --tlp-b-hue-1: 74deg;
}

html body :is(
  .brands-hero.brands-hero.brands-hero.brands-hero.brands-hero,
  .brand-hero.brand-hero.brand-hero.brand-hero.brand-hero,
  .about-hero.about-hero.about-hero.about-hero.about-hero,
  .os-stats.os-stats.os-stats.os-stats.os-stats,
  .os-tp.os-tp.os-tp.os-tp.os-tp,
  .os-prom-dark.os-prom-dark.os-prom-dark.os-prom-dark.os-prom-dark,
  .os-curator.os-curator.os-curator.os-curator.os-curator,
  .os-rail-inner.os-rail-inner.os-rail-inner.os-rail-inner.os-rail-inner,
  .news-hero.news-hero.news-hero.news-hero.news-hero,
  .ns-header.ns-header.ns-header.ns-header.ns-header,
  .nw-hero-l.nw-hero-l.nw-hero-l.nw-hero-l.nw-hero-l,
  .nw-feat-l.nw-feat-l.nw-feat-l.nw-feat-l.nw-feat-l,
  .contact-hero.contact-hero.contact-hero.contact-hero.contact-hero,
  .ct-hero.ct-hero.ct-hero.ct-hero.ct-hero,
  .ct-promise.ct-promise.ct-promise.ct-promise.ct-promise,
  .ct-news.ct-news.ct-news.ct-news.ct-news,
  .contact-side.contact-side.contact-side.contact-side.contact-side
) {
  --tlp-bg: #fff2f8;
  --tlp-ink: #200818;
  --tlp-body: #4b1c34;
  --tlp-accent: #c43070;
  --tlp-action: #68113f;
  --tlp-blob-a: hsla(331, 82%, 66%, .64);
  --tlp-blob-b: hsla(184, 78%, 72%, .42);
  --tlp-blob-c: hsla(282, 62%, 76%, .28);
  --tlp-a-speed: 12s;
  --tlp-b-speed: 15.5s;
  --tlp-surface-speed: 10s;
  --tlp-a-hue-1: -36deg;
  --tlp-a-hue-2: 82deg;
  --tlp-b-hue-1: 120deg;
}

html body :is(
  .acctx-hero.acctx-hero.acctx-hero.acctx-hero.acctx-hero,
  .acct-hero.acct-hero.acct-hero.acct-hero.acct-hero,
  .rewards-header.rewards-header.rewards-header.rewards-header.rewards-header,
  .notifications-head.notifications-head.notifications-head.notifications-head.notifications-head,
  .home-bigcta.home-bigcta.home-bigcta.home-bigcta.home-bigcta,
  .freebie-hero.freebie-hero.freebie-hero.freebie-hero.freebie-hero,
  .page-head.page-head.page-head.page-head.page-head,
  .page-head-policies.page-head-policies.page-head-policies.page-head-policies.page-head-policies,
  .bcalc-hero.bcalc-hero.bcalc-hero.bcalc-hero.bcalc-hero,
  .club-hero.club-hero.club-hero.club-hero.club-hero,
  .gift-hero.gift-hero.gift-hero.gift-hero.gift-hero,
  .sm-hero.sm-hero.sm-hero.sm-hero.sm-hero,
  .sm-hero-l.sm-hero-l.sm-hero-l.sm-hero-l.sm-hero-l,
  .seg-hero.seg-hero.seg-hero.seg-hero.seg-hero,
  .sub-hero.sub-hero.sub-hero.sub-hero.sub-hero,
  .sidebar-cta.sidebar-cta.sidebar-cta.sidebar-cta.sidebar-cta,
  .sb-hold-card.sb-hold-card.sb-hold-card.sb-hold-card.sb-hold-card,
  .polx-hero.polx-hero.polx-hero.polx-hero.polx-hero
) {
  --tlp-bg: #f3f0ff;
  --tlp-ink: #170d30;
  --tlp-body: #38245c;
  --tlp-accent: #7c3aed;
  --tlp-action: #4f1b8f;
  --tlp-blob-a: hsla(262, 78%, 72%, .60);
  --tlp-blob-b: hsla(188, 78%, 72%, .44);
  --tlp-blob-c: hsla(318, 76%, 74%, .26);
  --tlp-a-speed: 12s;
  --tlp-b-speed: 15s;
  --tlp-surface-speed: 10.5s;
  --tlp-a-hue-1: -60deg;
  --tlp-a-hue-2: 88deg;
  --tlp-b-hue-1: 138deg;
}

html body .contact-side.contact-side {
  position: static !important;
  overflow: visible !important;
  isolation: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: var(--ink) !important;
}

html body .contact-side.contact-side::before,
html body .contact-side.contact-side::after {
  content: none !important;
}

html body .contact-side.contact-side .sla {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: var(--tlp-ink) !important;
  background:
    radial-gradient(circle at 50% 50%, var(--tlp-blob-c), transparent 52%),
    var(--tlp-bg) !important;
  background-repeat: no-repeat !important;
  background-size: 150% 150%, 100% 100% !important;
  border: 1px solid color-mix(in srgb, var(--tlp-accent) 24%, rgba(0, 0, 0, .08)) !important;
  box-shadow:
    0 24px 58px -34px color-mix(in srgb, var(--tlp-accent) 32%, rgba(13, 25, 48, .28)),
    inset 0 1px 0 rgba(255, 255, 255, .62) !important;
  animation: teasLightHeroSurface var(--tlp-surface-speed) ease-in-out infinite !important;
}

html body .contact-side.contact-side .sla::before,
html body .contact-side.contact-side .sla::after {
  content: "" !important;
  position: absolute !important;
  aspect-ratio: 1 !important;
  height: auto !important;
  inset: auto !important;
  z-index: 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
  transform: translate3d(0, 0, 0);
  will-change: transform, filter !important;
}

html body .contact-side.contact-side .sla::before {
  width: 88% !important;
  top: -42% !important;
  right: -26% !important;
  opacity: .68 !important;
  background: radial-gradient(circle, var(--tlp-blob-a), transparent 68%) !important;
  animation: teasLightHeroBlobA var(--tlp-a-speed) ease-in-out infinite !important;
}

html body .contact-side.contact-side .sla::after {
  width: 70% !important;
  bottom: -38% !important;
  left: -18% !important;
  opacity: .58 !important;
  background: radial-gradient(circle, var(--tlp-blob-b), transparent 68%) !important;
  animation: teasLightHeroBlobB var(--tlp-b-speed) ease-in-out infinite reverse !important;
}

html body .contact-side.contact-side .sla > * {
  position: relative;
  z-index: 1;
}

html body .contact-side.contact-side .sla :is(h3, .num, .day, .h) {
  color: var(--tlp-ink) !important;
}

html body .contact-side.contact-side .sla :is(p, .lbl, .stat .lbl) {
  color: color-mix(in srgb, var(--tlp-body) 76%, transparent) !important;
}

html body .contact-side.contact-side .sla .kicker,
html body .contact-side.contact-side .sla .corner {
  color: var(--tlp-action) !important;
}

html body .contact-side.contact-side .sla .corner {
  background: rgba(255, 255, 255, .58) !important;
  border: 1px solid color-mix(in srgb, var(--tlp-accent) 18%, rgba(0, 0, 0, .08)) !important;
}

html body .contact-side.contact-side .chans,
html body .contact-side.contact-side .hours,
html body details.faq {
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid rgba(4, 34, 32, .08) !important;
  box-shadow: 0 18px 44px -32px rgba(4, 34, 32, .24) !important;
}

html body .contact-side.contact-side .chan.phone .icn,
html body details.faq[open] .plus {
  background: #063f46 !important;
  color: #ffffff !important;
}

html body .contact-side.contact-side .chan.whatsapp .icn {
  background: #b8f3ee !important;
  color: #063f46 !important;
}

html body .wiki-hero.wiki-hero .wiki-search .lab {
  color: color-mix(in srgb, var(--tlp-action) 76%, var(--tlp-ink)) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body .wiki-hero.wiki-hero h1 .underline {
  position: relative !important;
  display: inline-block !important;
  color: #68113f !important;
  text-shadow: none !important;
}

html body .wiki-hero.wiki-hero h1 .underline > span {
  position: relative !important;
  z-index: 1 !important;
  color: #68113f !important;
  text-shadow: none !important;
}

html body .wiki-hero.wiki-hero h1 .underline::after {
  content: "" !important;
  position: absolute !important;
  left: -.05em !important;
  right: -.06em !important;
  bottom: .08em !important;
  height: .16em !important;
  z-index: 0 !important;
  border-radius: 999px !important;
  background: rgba(232, 72, 152, .56) !important;
  transform: rotate(-1deg) !important;
}

html body .article-main .article-head.article-head .article-meta,
html body .article-main .article-head.article-head .article-meta * {
  color: color-mix(in srgb, var(--tlp-body, #24405f) 70%, transparent) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body .club-hero.club-hero.club-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #170d30 !important;
  background:
    radial-gradient(circle at 78% 22%, rgba(232, 72, 152, .22), transparent 52%),
    radial-gradient(circle at 20% 82%, rgba(48, 216, 200, .30), transparent 58%),
    linear-gradient(135deg, #f3f0ff, #eafbff 68%, #fff2f8) !important;
  border: 1px solid rgba(124, 58, 237, .16) !important;
  box-shadow:
    0 26px 64px -38px rgba(23, 13, 48, .32),
    inset 0 1px 0 rgba(255, 255, 255, .68) !important;
}

html body .club-hero.club-hero.club-hero::before,
html body .club-hero.club-hero.club-hero::after {
  content: "" !important;
  position: absolute !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  will-change: transform, filter !important;
}

html body .club-hero.club-hero.club-hero::before {
  width: 78% !important;
  top: -34% !important;
  right: -28% !important;
  opacity: .48 !important;
  background: radial-gradient(circle, rgba(124, 58, 237, .30), transparent 68%) !important;
  animation: teasLightHeroBlobA 13s ease-in-out infinite !important;
}

html body .club-hero.club-hero.club-hero::after {
  width: 76% !important;
  bottom: -36% !important;
  left: -24% !important;
  opacity: .55 !important;
  background: radial-gradient(circle, rgba(48, 216, 200, .38), transparent 68%) !important;
  animation: teasLightHeroBlobB 15s ease-in-out infinite reverse !important;
}

html body .club-hero.club-hero.club-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

html body .club-hero.club-hero.club-hero :is(h1, h2, h3) {
  color: #170d30 !important;
  text-shadow: none !important;
}

html body .club-hero.club-hero.club-hero h1 em {
  color: #22c7bd !important;
  text-shadow: none !important;
}

html body .club-hero.club-hero.club-hero :is(.lede, p, .micro) {
  color: rgba(23, 13, 48, .72) !important;
  text-shadow: none !important;
}

html body .club-hero.club-hero.club-hero .eyebrow {
  color: #c43070 !important;
  text-shadow: none !important;
}

html body .tc .tc-hero-l.tc-hero-l,
html body .tc .tc-gift.tc-gift,
html body .tc .tc-close.tc-close {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #170d30 !important;
  background:
    radial-gradient(circle at 78% 22%, rgba(232, 72, 152, .22), transparent 52%),
    radial-gradient(circle at 20% 82%, rgba(48, 216, 200, .30), transparent 58%),
    linear-gradient(135deg, #f3f0ff, #eafbff 68%, #fff2f8) !important;
  border: 1px solid rgba(124, 58, 237, .16) !important;
  box-shadow:
    0 26px 64px -38px rgba(23, 13, 48, .32),
    inset 0 1px 0 rgba(255, 255, 255, .68) !important;
}

html body .tc .tc-hero-l.tc-hero-l::before,
html body .tc .tc-gift.tc-gift::before,
html body .tc .tc-close.tc-close::before {
  content: "" !important;
  position: absolute !important;
  width: 78% !important;
  aspect-ratio: 1 !important;
  top: -34% !important;
  right: -28% !important;
  z-index: 0 !important;
  opacity: .48 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  background: radial-gradient(circle, rgba(124, 58, 237, .30), transparent 68%) !important;
  animation: teasLightHeroBlobA 13s ease-in-out infinite !important;
}

html body .tc .tc-hero-l.tc-hero-l::after,
html body .tc .tc-gift.tc-gift::after,
html body .tc .tc-close.tc-close::after {
  content: "" !important;
  position: absolute !important;
  width: 76% !important;
  aspect-ratio: 1 !important;
  bottom: -36% !important;
  left: -24% !important;
  z-index: 0 !important;
  opacity: .55 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  background: radial-gradient(circle, rgba(48, 216, 200, .38), transparent 68%) !important;
  animation: teasLightHeroBlobB 15s ease-in-out infinite reverse !important;
}

html body .tc .tc-hero-l.tc-hero-l > *,
html body .tc .tc-gift.tc-gift > *,
html body .tc .tc-close.tc-close > * {
  position: relative !important;
  z-index: 1 !important;
}

html body .tc :is(.tc-hero-l.tc-hero-l, .tc-gift.tc-gift, .tc-close.tc-close) :is(h1, h2, h3, .tc-h1, .tc-h2) {
  color: #170d30 !important;
  text-shadow: none !important;
}

html body .tc :is(.tc-hero-l.tc-hero-l, .tc-gift.tc-gift, .tc-close.tc-close) :is(h1, h2, h3, .tc-h1, .tc-h2) em {
  color: #22c7bd !important;
  text-shadow: none !important;
}

html body .tc :is(.tc-hero-l.tc-hero-l, .tc-gift.tc-gift, .tc-close.tc-close) :is(.tc-sub, p, .tc-trust, .tc-trust span, .tc-close-ghost) {
  color: rgba(23, 13, 48, .72) !important;
  text-shadow: none !important;
}

html body .tc :is(.tc-hero-l.tc-hero-l, .tc-gift.tc-gift, .tc-close.tc-close) :is(.tc-sub strong, p strong) {
  color: #170d30 !important;
  text-shadow: none !important;
}

html body .tc :is(.tc-hero-l.tc-hero-l, .tc-gift.tc-gift, .tc-close.tc-close) :is(.tc-kicker, .tc-trust strong) {
  color: #c43070 !important;
  text-shadow: none !important;
}

html body .tc .tc-cta-ghost.tc-cta-ghost {
  color: #170d30 !important;
  background: rgba(255, 255, 255, .44) !important;
  border-color: rgba(23, 13, 48, .12) !important;
}

html body .business-page .biz-hero-stat {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: var(--tlp-ink, #042220) !important;
  background:
    radial-gradient(circle at 56% 48%, rgba(232, 72, 152, .20), transparent 58%),
    radial-gradient(circle at 18% 84%, rgba(48, 216, 200, .28), transparent 62%),
    rgba(255, 255, 255, .48) !important;
  border: 1px solid rgba(255, 255, 255, .66) !important;
  border-radius: 24px !important;
  box-shadow:
    0 26px 60px -34px rgba(4, 34, 32, .30),
    inset 0 1px 0 rgba(255, 255, 255, .58) !important;
  backdrop-filter: blur(12px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.04) !important;
}

html body .business-page .biz-hero-stat::before {
  content: "" !important;
  position: absolute !important;
  width: 92% !important;
  aspect-ratio: 1 !important;
  top: -46% !important;
  right: -30% !important;
  z-index: 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  background: radial-gradient(circle, rgba(48, 216, 200, .42), transparent 68%) !important;
  animation: teasLightHeroBlobA 12s ease-in-out infinite !important;
}

html body .business-page .biz-hero-stat::after {
  content: "" !important;
  position: absolute !important;
  width: 72% !important;
  aspect-ratio: 1 !important;
  bottom: -38% !important;
  left: -22% !important;
  z-index: 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  background: radial-gradient(circle, rgba(232, 72, 152, .30), transparent 68%) !important;
  animation: teasLightHeroBlobB 15s ease-in-out infinite reverse !important;
}

html body .business-page .biz-hero-stat > div {
  position: relative !important;
  z-index: 1 !important;
  background: rgba(255, 255, 255, .48) !important;
  border: 1px solid rgba(255, 255, 255, .62) !important;
  color: var(--tlp-ink, #042220) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48) !important;
}

html body .business-page .biz-hero-stat strong {
  color: #063f46 !important;
  text-shadow: none !important;
}

html body .business-page .biz-hero-stat span {
  color: rgba(4, 34, 32, .62) !important;
  text-shadow: none !important;
}

html body .bz .bz-hero.bz-hero .bz-hero-r.bz-hero-r {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  align-items: center !important;
  color: #042220 !important;
  background:
    radial-gradient(circle at 24% 22%, rgba(255, 255, 255, .74), transparent 34%),
    radial-gradient(circle at 78% 20%, rgba(232, 72, 152, .20), transparent 52%),
    radial-gradient(circle at 22% 86%, rgba(48, 216, 200, .30), transparent 58%),
    linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(240, 252, 250, .44)) !important;
  border: 1px solid rgba(255, 255, 255, .70) !important;
  border-radius: 28px !important;
  box-shadow:
    0 26px 60px -34px rgba(4, 34, 32, .28),
    inset 0 1px 0 rgba(255, 255, 255, .62) !important;
  backdrop-filter: blur(14px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
}

html body .bz .bz-hero.bz-hero .bz-hero-r.bz-hero-r::before,
html body .bz .bz-hero.bz-hero .bz-hero-r.bz-hero-r::after {
  content: "" !important;
  position: absolute !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  will-change: transform, filter !important;
}

html body .bz .bz-hero.bz-hero .bz-hero-r.bz-hero-r::before {
  width: 84% !important;
  top: -42% !important;
  right: -28% !important;
  opacity: .62 !important;
  background: radial-gradient(circle, rgba(48, 216, 200, .44), transparent 68%) !important;
  animation: teasLightHeroBlobA 12s ease-in-out infinite !important;
}

html body .bz .bz-hero.bz-hero .bz-hero-r.bz-hero-r::after {
  width: 72% !important;
  bottom: -38% !important;
  left: -20% !important;
  opacity: .52 !important;
  background: radial-gradient(circle, rgba(232, 72, 152, .32), transparent 68%) !important;
  animation: teasLightHeroBlobB 15s ease-in-out infinite reverse !important;
}

html body .bz .bz-hero.bz-hero .bz-perks.bz-perks {
  position: relative !important;
  z-index: 1 !important;
}

html body .bz .bz-hero.bz-hero .bz-perk.bz-perk {
  position: relative !important;
  z-index: 1 !important;
  background: rgba(255, 255, 255, .62) !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  color: #042220 !important;
  box-shadow:
    0 14px 34px -28px rgba(4, 34, 32, .32),
    inset 0 1px 0 rgba(255, 255, 255, .70) !important;
}

html body .bz .bz-hero.bz-hero .bz-perk.bz-perk:hover {
  border-color: rgba(232, 72, 152, .22) !important;
  box-shadow:
    0 18px 40px -28px rgba(232, 72, 152, .34),
    inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

html body .bz .bz-hero.bz-hero .bz-perk.bz-perk .v {
  color: #063f46 !important;
  text-shadow: none !important;
}

html body .bz .bz-hero.bz-hero .bz-perk.bz-perk .v sup {
  color: #e84898 !important;
  text-shadow: none !important;
}

html body .bz .bz-hero.bz-hero .bz-perk.bz-perk .l {
  color: rgba(4, 34, 32, .60) !important;
  text-shadow: none !important;
}

html body .bz .bz-hero.bz-hero .bz-perk.bz-perk.bz-perk--hero {
  background:
    radial-gradient(circle at 82% 20%, rgba(232, 72, 152, .16), transparent 54%),
    rgba(255, 255, 255, .70) !important;
  border-color: rgba(232, 72, 152, .22) !important;
}

html body .bz .bz-hero.bz-hero .bz-perk-tag.bz-perk-tag {
  background: rgba(232, 72, 152, .16) !important;
  color: #68113f !important;
  border: 1px solid rgba(232, 72, 152, .18) !important;
}

html body .brand-hero.brand-hero .brand-stats {
  background: rgba(255, 255, 255, .48) !important;
  border: 1px solid rgba(255, 255, 255, .60) !important;
  border-radius: 18px !important;
  box-shadow:
    0 18px 42px -32px rgba(75, 28, 52, .26),
    inset 0 1px 0 rgba(255, 255, 255, .58) !important;
}

html body .brand-hero.brand-hero .brand-stats div {
  background: rgba(255, 255, 255, .34) !important;
  border-color: rgba(75, 28, 52, .08) !important;
}

html body .brand-hero.brand-hero .brand-stats dt {
  color: rgba(104, 17, 63, .72) !important;
  text-shadow: none !important;
}

html body .brand-hero.brand-hero .brand-stats dd {
  color: #200818 !important;
  text-shadow: none !important;
}

html body .brand-hero.brand-hero :is(.brand-region, .eco-badge) {
  color: rgba(104, 17, 63, .76) !important;
  background: rgba(255, 255, 255, .34) !important;
  border-color: rgba(104, 17, 63, .10) !important;
  text-shadow: none !important;
}

html body .brand-hero.brand-hero .brand-hero-meta {
  gap: 8px 10px !important;
}

html body .teas-mega-entry.teas-mega-entry {
  background: rgba(255, 255, 255, .86) !important;
  border-color: rgba(232, 72, 152, .18) !important;
  color: #042220 !important;
  box-shadow: 0 12px 28px -22px rgba(4, 34, 32, .28) !important;
}

html body .teas-mega-entry.teas-mega-entry:hover,
html body .teas-mega[data-open="true"] .teas-mega-entry.teas-mega-entry {
  background: #063f46 !important;
  border-color: #063f46 !important;
  color: #ffffff !important;
}

html body .teas-mega-toggle.teas-mega-toggle {
  border-left-color: rgba(4, 34, 32, .10) !important;
}

html body .teas-mega-panel.teas-mega-panel {
  max-height: min(56vh, 304px) !important;
  padding: 12px !important;
  color: #042220 !important;
  background:
    radial-gradient(circle at 82% 10%, rgba(232, 72, 152, .14), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(48, 216, 200, .20), transparent 48%),
    rgba(255, 255, 255, .92) !important;
  border-color: rgba(232, 72, 152, .18) !important;
  border-radius: 16px !important;
  box-shadow:
    0 22px 52px -34px rgba(4, 34, 32, .34),
    0 4px 14px rgba(4, 34, 32, .06) !important;
}

html body .teas-mega-panel.teas-mega-panel::before {
  height: 3px !important;
  margin: -12px -12px 10px !important;
  background: linear-gradient(90deg, #30d8c8, #e84898 58%, #9fd8ff) !important;
}

html body .teas-mega-close.teas-mega-close {
  background: rgba(255, 255, 255, .96) !important;
  border-color: rgba(4, 34, 32, .10) !important;
  color: #063f46 !important;
  box-shadow: 0 12px 28px -22px rgba(4, 34, 32, .28) !important;
}

html body .teas-mega-close.teas-mega-close:hover,
html body .teas-mega-close.teas-mega-close:focus-visible {
  background: #063f46 !important;
  border-color: #063f46 !important;
  color: #ffffff !important;
}

html body .tmp-fam.tmp-fam,
html body .tmp-chip.tmp-chip,
html body .tmp-feat.tmp-feat {
  background: rgba(255, 255, 255, .78) !important;
  border-color: rgba(4, 34, 32, .08) !important;
  color: #042220 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58) !important;
}

html body .tmp-h.tmp-h,
html body .tmp-fam-sub.tmp-fam-sub,
html body .tmp-feat-sub.tmp-feat-sub {
  color: rgba(4, 34, 32, .58) !important;
}

html body :is(.tmp-fam.tmp-fam, .tmp-chip.tmp-chip, .tmp-feat.tmp-feat):hover,
html body :is(.tmp-fam.tmp-fam, .tmp-chip.tmp-chip, .tmp-feat.tmp-feat):focus-visible {
  background: rgba(232, 72, 152, .12) !important;
  border-color: rgba(232, 72, 152, .24) !important;
  color: #042220 !important;
  transform: translateY(-1px) !important;
}

html body .tmp-allshop.tmp-allshop,
html body .tmp-feat-bom.tmp-feat-bom {
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 72, 152, .30), transparent 55%),
    linear-gradient(135deg, #063f46, #042220) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: #ffffff !important;
}

html body .tmp-allshop.tmp-allshop svg,
html body .tmp-feat-bom.tmp-feat-bom :is(.tmp-feat-label, .tmp-feat-sub) {
  color: #30d8c8 !important;
}

@media (max-width: 760px) {
  html body .os.os {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  html body :is(.os-hero-l.os-hero-l, .os-hero.os-hero) :is(h1, .os-h1) {
    font-size: clamp(38px, 10.4vw, 44px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.018em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: balance !important;
  }

  html body :is(.os-hero-l.os-hero-l, .os-hero.os-hero) {
    width: 100% !important;
    max-width: none !important;
    padding-left: clamp(20px, 5.8vw, 24px) !important;
    padding-right: clamp(20px, 5.8vw, 24px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body :is(.os-hero-l.os-hero-l, .nw-hero.nw-hero),
  html body :is(.os-hero-l.os-hero-l, .nw-hero.nw-hero)::before,
  html body :is(.os-hero-l.os-hero-l, .nw-hero.nw-hero)::after {
    animation: none !important;
  }
}

/* 404 recovery page: compact, light, and useful. Keep full product cards out
   of the not-found flow so mobile does not become a giant product listing. */
body.error404 .error404-page.error404-page {
  max-width: 1120px !important;
  padding: clamp(18px, 3vw, 32px) clamp(14px, 4vw, 24px) 72px !important;
}

body.error404 .error404-page .four04-hero.four04-hero {
  --tlp-bg: #eef7ff !important;
  --tlp-ink: #071b34 !important;
  --tlp-body: #24405f !important;
  --tlp-accent: #2c7be5 !important;
  --tlp-action: #0d3b66 !important;
  --tlp-blob-a: hsla(205, 92%, 68%, .64) !important;
  --tlp-blob-b: hsla(350, 82%, 72%, .48) !important;
  --tlp-blob-c: hsla(48, 92%, 74%, .24) !important;
  margin: 0 0 clamp(20px, 4vw, 34px) !important;
  padding: clamp(28px, 4.5vw, 48px) clamp(18px, 4vw, 42px) !important;
  border: 1px solid rgba(44, 123, 229, .18) !important;
  border-radius: 22px !important;
  text-align: center !important;
  background:
    radial-gradient(circle at 78% 16%, hsla(350, 82%, 72%, .24), transparent 52%),
    radial-gradient(circle at 18% 86%, hsla(205, 92%, 68%, .36), transparent 58%),
    linear-gradient(135deg, #eef7ff, #f8fbef 64%, #fff3f7) !important;
  box-shadow:
    0 24px 58px -34px rgba(7, 27, 52, .30),
    inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

body.error404 .error404-page .four04-num.four04-num {
  margin: 0 auto 8px !important;
  font-size: clamp(72px, 18vw, 124px) !important;
  line-height: .82 !important;
  color: #071b34 !important;
  opacity: .92 !important;
}

body.error404 .error404-page .four04-hero h1 {
  max-width: 760px !important;
  margin: 0 auto 14px !important;
  font-size: clamp(36px, 8vw, 56px) !important;
  line-height: .98 !important;
  letter-spacing: -.02em !important;
  color: #071b34 !important;
  text-wrap: balance !important;
}

body.error404 .error404-page .four04-hero .lede {
  max-width: 610px !important;
  margin-bottom: 18px !important;
  color: rgba(36, 64, 95, .84) !important;
}

body.error404 .error404-page .four04-search-hint {
  max-width: 680px !important;
  margin-inline: auto !important;
  color: rgba(36, 64, 95, .78) !important;
}

body.error404 .error404-page .four04-search {
  width: min(100%, 540px) !important;
  max-width: 540px !important;
}

body.error404 .error404-page .four04-search input {
  min-width: 0 !important;
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(7, 27, 52, .12) !important;
  color: #071b34 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

body.error404 .error404-page .four04-search button {
  background: #2c7be5 !important;
  color: #ffffff !important;
  min-width: 104px !important;
}

body.error404 .error404-page .four04-cta-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 clamp(24px, 4vw, 42px) !important;
}

body.error404 .error404-page .cta-tile {
  min-height: 124px !important;
  padding: 18px !important;
  border: 1px solid rgba(7, 27, 52, .08) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .78) !important;
  color: #071b34 !important;
  box-shadow: 0 16px 34px -30px rgba(7, 27, 52, .24) !important;
}

body.error404 .error404-page .cta-tile.dark {
  background:
    radial-gradient(circle at 90% 20%, rgba(232, 72, 152, .24), transparent 48%),
    linear-gradient(135deg, #063f46, #071b34) !important;
  color: #ffffff !important;
}

body.error404 .error404-page .four04-popular {
  margin-top: 0 !important;
}

body.error404 .error404-page .four04-popular h2 {
  margin: 0 0 14px !important;
  font-size: clamp(26px, 4vw, 36px) !important;
  line-height: 1.05 !important;
  color: #071b34 !important;
}

body.error404 .error404-page .four04-pick-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body.error404 .error404-page .four04-pick-card {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px !important;
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid rgba(7, 27, 52, .08) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 38px -32px rgba(7, 27, 52, .28) !important;
}

body.error404 .error404-page .four04-pick-img {
  width: 86px !important;
  height: 96px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #f5f8fb !important;
}

body.error404 .error404-page .four04-pick-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

body.error404 .error404-page .four04-pick-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

body.error404 .error404-page .four04-pick-brand {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(36, 64, 95, .62) !important;
}

body.error404 .error404-page .four04-pick-title {
  color: #071b34 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

body.error404 .error404-page .four04-pick-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

body.error404 .error404-page .four04-pick-price {
  color: #071b34 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body.error404 .error404-page .four04-pick-link {
  color: #2c7be5 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  body.error404 .error404-page.error404-page {
    padding-top: 14px !important;
  }

  body.error404 .error404-page .four04-hero.four04-hero {
    padding: 28px 18px 30px !important;
  }

  body.error404 .error404-page .four04-search {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
  }

  body.error404 .error404-page .four04-search button {
    min-width: 96px !important;
    padding-inline: 18px !important;
  }

  body.error404 .error404-page .four04-cta-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.error404 .error404-page .cta-tile {
    min-height: 94px !important;
    padding: 16px !important;
  }

  body.error404 .error404-page .four04-pick-list {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.error404 .error404-page .four04-pick-card {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    padding: 12px !important;
  }

  body.error404 .error404-page .four04-pick-img {
    width: 72px !important;
    height: 84px !important;
  }
}

/* 2026-06-19: keep moving hue bands to page tops/bottoms only.
   Interior cards/side panels use a light, still tone so pages do not strobe mid-flow. */
html body :is(
  .sidebar-cta,
  .wiki-ed.dark,
  .brands-edit.dark,
  .promise.dark,
  .pricing-card.dark,
  .cta-tile.dark,
  .ns-edit-tile.dark,
  .contact-side,
  .ct-promise,
  .ct-news,
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-open,
  .bz-sub-popular,
  .nw-feat-l,
  .sb-hold-card
):not(#teas-midpage-light-override) {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #042220 !important;
  background: linear-gradient(145deg, #fff8ec 0%, #eef8f3 54%, #f5f1ff 100%) !important;
  border-color: rgba(4, 34, 32, .10) !important;
  box-shadow: 0 28px 64px -48px rgba(42, 32, 51, .42) !important;
}

html body :is(
  .sidebar-cta,
  .wiki-ed.dark,
  .brands-edit.dark,
  .promise.dark,
  .pricing-card.dark,
  .cta-tile.dark,
  .ns-edit-tile.dark,
  .contact-side,
  .ct-promise,
  .ct-news,
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-open,
  .bz-sub-popular,
  .nw-feat-l,
  .sb-hold-card
):not(#teas-midpage-light-override)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  background:
    radial-gradient(88% 72% at 12% 0%, rgba(48, 216, 200, .20), transparent 58%),
    radial-gradient(70% 76% at 96% 4%, rgba(255, 213, 222, .52), transparent 66%),
    linear-gradient(145deg, #fff8ec 0%, #eef8f3 54%, #f5f1ff 100%) !important;
  background-size: auto !important;
  background-position: center !important;
  animation: none !important;
  will-change: auto !important;
}

html body :is(
  .sidebar-cta,
  .wiki-ed.dark,
  .brands-edit.dark,
  .promise.dark,
  .pricing-card.dark,
  .cta-tile.dark,
  .ns-edit-tile.dark,
  .contact-side,
  .ct-promise,
  .ct-news,
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-open,
  .bz-sub-popular,
  .nw-feat-l,
  .sb-hold-card
):not(#teas-midpage-light-override)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .14 !important;
  mix-blend-mode: normal !important;
  background-image: radial-gradient(rgba(4, 34, 32, .12) 1px, transparent 1.4px) !important;
  background-size: 4px 4px !important;
  animation: none !important;
}

html body :is(
  .sidebar-cta,
  .wiki-ed.dark,
  .brands-edit.dark,
  .promise.dark,
  .pricing-card.dark,
  .cta-tile.dark,
  .ns-edit-tile.dark,
  .contact-side,
  .ct-promise,
  .ct-news,
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-open,
  .bz-sub-popular,
  .nw-feat-l,
  .sb-hold-card
):not(#teas-midpage-light-override) > * {
  position: relative !important;
  z-index: 1 !important;
}

html body :is(
  .sidebar-cta,
  .wiki-ed.dark,
  .brands-edit.dark,
  .promise.dark,
  .pricing-card.dark,
  .cta-tile.dark,
  .ns-edit-tile.dark,
  .contact-side,
  .ct-promise,
  .ct-news,
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-open,
  .bz-sub-popular,
  .nw-feat-l,
  .sb-hold-card
):not(#teas-midpage-light-override) :is(h1, h2, h3, h4, .head, .ct-news-h, .ns-title, .os-stats-h, .os-tp-h, .os-rail-h, .bz-open-h) {
  color: #042220 !important;
}

html body :is(
  .sidebar-cta,
  .wiki-ed.dark,
  .brands-edit.dark,
  .promise.dark,
  .pricing-card.dark,
  .cta-tile.dark,
  .ns-edit-tile.dark,
  .contact-side,
  .ct-promise,
  .ct-news,
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-open,
  .bz-sub-popular,
  .nw-feat-l,
  .sb-hold-card
):not(#teas-midpage-light-override) :is(p, li, .lede, .ct-news-l p, .os-stats-sub, .os-tp-meta, .os-rail-sub, .bz-open-sub) {
  color: rgba(4, 34, 32, .72) !important;
}

html body :is(
  .sidebar-cta,
  .wiki-ed.dark,
  .brands-edit.dark,
  .promise.dark,
  .pricing-card.dark,
  .cta-tile.dark,
  .ns-edit-tile.dark,
  .contact-side,
  .ct-promise,
  .ct-news,
  .os-stats,
  .os-tp,
  .os-prom-dark,
  .os-curator,
  .os-rail-inner,
  .bz-open,
  .bz-sub-popular,
  .nw-feat-l,
  .sb-hold-card
):not(#teas-midpage-light-override) :is(em, .it, .kicker, .eyebrow, .mono, .ct-news-tape, .os-kicker, .bz-kicker) {
  color: #9b695d !important;
}

html body .ct-news-input {
  background: #fff !important;
  border-color: rgba(4, 34, 32, .12) !important;
}

html body .ct-news-input input {
  color: #042220 !important;
}

html body .ct-news-input input::placeholder {
  color: rgba(4, 34, 32, .42) !important;
}