/* One brand yellow across the homepage and every customer destination. */
:root, body, body.tf-site-page, body:has(.tf-brand-page), .tf-home-refined,
.tf-brand-page, .nutrition-home, .pdp-page {
 --brand-yellow:#ffd700;
 --accent-gold:#ffd700!important;
 --bright-gold:#ffd700!important;
 --gold-hover:#ffd700!important;
 --apple-accent:#ffd700!important;
 --home-yellow:#ffd700!important;
 --home-bright-yellow:#ffd700!important;
 --home-dark-yellow:#ffd700!important;
 --tf-yellow:#ffd700!important;
 --tf-yellow-deep:#ffd700!important;
 --yellow:#ffd700!important;
 --gold:#ffd700!important;
 --pdp-accent:#ffd700!important;
}
/* Solid yellow surfaces should not fade into older gold gradients. */
.commerce-primary, .commerce-illustration,
.tf-brand-page .tf-point-card,
.tf-home-refined .tf-milestone,
.tf-home-refined .tf-founder-chapter {
 background-color:#ffd700!important;
}
body :is(.text-yellow-400,.text-yellow-500,.text-yellow-600,.text-yellow-700) {
 color:#ffd700!important;
}
body :is(.bg-yellow-400,.bg-yellow-500,.bg-yellow-600,.bg-yellow-700) {
 background-color:#ffd700!important;
}

/* Universal Rule: All pages must have only plain solid black background, zero gradients */
html,
body,
body.tf-site-page,
.tf-home-refined,
#app,
main,
section,
.tf-policy,
.nutrition-home,
.pdp-page,
.pdp-stage,
.tf-directory,
.footer,
.apple-footer,
.tf-site-footer,
.final-cta-section,
.philosophy-section,
.preview-section,
.founder-section,
.testimonials-section,
.video-strip,
.tf-journey,
.tf-stories,
.shop-needs,
.catalogue,
.store-intro,
.member-profile-hub {
 background:#000000!important;
 background-color:#000000!important;
 background-image:none!important;
}

/* Eliminate all background gradient meshes, radial overlays and scanlines */
.animated-bg,
.bg-mesh,
.footer-bg-watermark,
.tf-journey::before,
.tf-story:after,
.tf-story-fuel:after,
.tf-journey-cards:before,
[class*="bg-[radial-gradient"],
[class*="bg-[linear-gradient"] {
 display:none!important;
}

/* Card Rule: Never any gradient. Only pure solid black or pure yellow. */
:where(.product-card, .nh-product-card, .trainer-card, .class-card, .stats-card, .tf-plan, .need-card, .account-intro, .tf-directory-card, .review-card, .facility-card, .equipment-card, .magic-card, .profile-card, .order-card, .auth-card, .offer-card, .lead-panel, .feature-card, .final-cta-card, .final-cta-content, .tf-policy-content, .tf-policy article, .preview-card, .interactive-deck-card, .testimonial-slide, .nh-facts, .nh-story, .nh-feature, .nh-goal-grid>a, .nh-facts>div, .nh-facts>a, .nh-story-image, .nh-detail-image, .nh-end, .nh-review-grid article, .profile-header-card, .tf-branch-card, .tf-location-card, .tf-point-card, .tf-point-step, .tf-point-activity, .tf-auto-renew-card, #active-membership-status-card, .commerce-featured-pack, .commerce-guide, .commerce-rewards, .pdp-stage, .pdp-details, .summary-action-box, [class*="card"], [class*="panel"]) {
 background-image:none!important;
}

/* 1. Pure Yellow Cards: Solid #ffd700 with pure solid black #000000 text */
:where(.tf-policy-content, .tf-policy article, .tf-plan, .need-card, .account-intro, .class-card, .stats-card, .tf-branch-card, .tf-location-card, .tf-point-card, .tf-point-step, .tf-point-activity, .tf-auto-renew-card, #active-membership-status-card, .highlight-card, [class*="bg-[#ffd700]"], [style*="background:#ffd700"], [style*="background: #ffd700"], .tf-milestone, .tf-founder-chapter, .tf-pass-visual) {
 background:#ffd700!important;
 background-color:#ffd700!important;
 background-image:none!important;
 color:#000000!important;
 -webkit-text-fill-color:#000000!important;
}

:where(.tf-policy-content, .tf-policy article, .tf-plan, .need-card, .account-intro, .class-card, .stats-card, .tf-branch-card, .tf-location-card, .tf-point-card, .tf-point-step, .tf-point-activity, .tf-auto-renew-card, #active-membership-status-card, .highlight-card, [class*="bg-[#ffd700]"], [style*="background:#ffd700"], [style*="background: #ffd700"], .tf-milestone, .tf-founder-chapter, .tf-pass-visual) :where(h1, h2, h3, h4, h5, h6, p, li, strong, b, span:not([class*="bg-black"]):not([class*="bg-[#000"]):not([class*="badge"]):not(.button):not(.tf-page-button):not(.tf-plan-cta), small, label, address) {
 color:#000000!important;
 -webkit-text-fill-color:#000000!important;
}

/* Sub-cards and action buttons inside yellow cards: Solid black with yellow text */
:where(.tf-policy-content, .tf-policy article, .tf-plan, .need-card, .account-intro, .class-card, .stats-card, .tf-branch-card, .tf-location-card, .tf-point-card, .tf-point-step, .tf-point-activity, .tf-auto-renew-card, #active-membership-status-card, .highlight-card, [class*="bg-[#ffd700]"], [style*="background:#ffd700"], [style*="background: #ffd700"], .tf-milestone, .tf-founder-chapter, .tf-pass-visual) :where(.button, .tf-page-button, .tf-plan-cta, .action-btn, [class*="bg-black"], [class*="bg-[#000"], [class*="bg-[#111]"]) {
 background:#000000!important;
 color:#ffd700!important;
 -webkit-text-fill-color:#ffd700!important;
 border:1px solid rgba(255, 215, 0, 0.3)!important;
}

/* 2. Pure Black Cards: Solid #000000 with subtle clean border and white/muted text */
:is(.product-card, .nh-product-card, .trainer-card, .tf-directory-card, .review-card, .facility-card, .equipment-card, .magic-card, .profile-card, .order-card, .auth-card, .offer-card, .lead-panel, .feature-card, .final-cta-card, .final-cta-content, .preview-card, .interactive-deck-card, .testimonial-slide, .product-info, .product-image-wrap, .product-photo, .main-photo, .thumbnail, .profile-header-card, .nh-facts, .nh-story, .nh-feature, .nh-goal-grid>a, .nh-facts>div, .nh-facts>a, .nh-story-image, .nh-detail-image, .nh-end, .nh-review-grid article, .commerce-featured-pack, .commerce-guide, .commerce-rewards, .pdp-stage, .pdp-details, .summary-action-box, .seo-content-block) {
 background:#000000!important;
 background-color:#000000!important;
 background-image:none!important;
 border:1px solid rgba(255, 255, 255, 0.12)!important;
}

/* Solid Buttons, Badges, Toasts & Announcement Bar (Strict Zero Gradients) */
.btn-primary,
.btn-shimmer,
.action-btn.primary,
.apple-bag-badge {
 background:#ffd700!important;
 background-color:#ffd700!important;
 background-image:none!important;
 color:#000000!important;
 -webkit-text-fill-color:#000000!important;
}
.btn-primary::before,
.btn-shimmer::before {
 display:none!important;
}
.announcement-bar {
 background:#000000!important;
 background-color:#000000!important;
 background-image:none!important;
 border-bottom:1px solid rgba(255, 215, 0, 0.28)!important;
}
.announcement-bar::before,
.announcement-bar::after {
 display:none!important;
}
.toast {
 background:#000000!important;
 background-color:#000000!important;
 background-image:none!important;
 border:1px solid rgba(255, 215, 0, 0.3)!important;
 color:#ffffff!important;
}
.scroll-progress {
 background:#ffd700!important;
}

/* ==========================================================================
   STRICT GLOBAL RULES:
   1. RECTANGLE ROUNDED PILLS ALL OVER THE WEBSITE
   2. IN BLACK CARDS, STRICTLY WHITE OR YELLOW TEXT
   ========================================================================== */

/* 1. Universal Rectangle Rounded Pills across all buttons, badges, chips, tags, pills */
:is(
  .btn, .btn-primary, .btn-secondary, .btn-shimmer, .btn-outline, .button, 
  .tf-button, [class*="tf-btn"], .final-cta-btn,
  .tf-page-button, .tf-plan-cta, .action-btn, [class*="btn-"], 
  .badge, .chip, .pill, .tag, [data-badge], .credential-chip, .filter-pill, 
  .subnav-pill, .footer-dispatch-pill, .apple-bag-badge, .cta-button, 
  [class*="badge-"], [class*="chip-"], [class*="pill-"], 
  button:not([class*="rounded-none"]):not(.swiper-button-next):not(.swiper-button-prev),
  a:is([class*="rounded-md"], [class*="rounded-lg"], [class*="rounded-xl"], [class*="rounded-2xl"]):is([class*="btn"], [class*="px-"]):not([class*="rounded-none"])
) {
  border-radius: 10px !important;
}

/* 2. Universal Rule: In Black Cards, ALL text is strictly white (#ffffff) or yellow (#ffd700) */
:where(
  .product-card, .nh-product-card, .trainer-card, .class-card, .stats-card, 
  .tf-plan, .need-card, .account-intro, .tf-directory-card, .review-card, 
  .facility-card, .equipment-card, .magic-card, .profile-card, .order-card, 
  .auth-card, .offer-card, .lead-panel, .feature-card, .final-cta-card, 
  .final-cta-content, .preview-card, .interactive-deck-card, .testimonial-slide, 
  [class*="card"], [class*="panel"], [class*="bento"], 
  .bg-black, [class*="bg-[#000000]"], [class*="bg-[#000]"], [class*="bg-[#121312]"], 
  [class*="bg-[#0a0a0a]"], [class*="bg-[#080908]"], [class*="bg-[#141414]"], [class*="bg-[#111211]"]
) :where(
  h1, h2, h3, h4, h5, h6, p, 
  span:not(.btn-primary):not([class*="bg-[#ffd700]"]):not([class*="bg-yellow"]):not(.apple-bag-badge), 
  li, label, strong, b, small, time, blockquote, dt, dd, figcaption, address, 
  a:not(.btn-primary):not([class*="bg-[#ffd700]"]):not([class*="bg-yellow"])
) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Accents, ratings, kickers, prices, and highlight spans inside black cards: Strictly Yellow */
:where(
  .product-card, .nh-product-card, .trainer-card, .class-card, .stats-card, 
  .tf-plan, .need-card, .account-intro, .tf-directory-card, .review-card, 
  .facility-card, .equipment-card, .magic-card, .profile-card, .order-card, 
  .auth-card, .offer-card, .lead-panel, .feature-card, .final-cta-card, 
  .final-cta-content, .preview-card, .interactive-deck-card, .testimonial-slide, 
  [class*="card"], [class*="panel"], [class*="bento"], 
  .bg-black, [class*="bg-[#000000]"], [class*="bg-[#000]"], [class*="bg-[#121312]"], 
  [class*="bg-[#0a0a0a]"], [class*="bg-[#080908]"], [class*="bg-[#141414]"], [class*="bg-[#111211]"]
) :where(
  [class*="text-[#ffd700]"], [class*="text-yellow"], .text-accent, .price, .kicker, 
  [data-badge], .badge-yellow, [style*="color:#ffd700"], [style*="color: #ffd700"], 
  .star-rating, .rating, .currency, [class*="text-emerald"], [class*="text-green"]
) {
  color: #ffd700 !important;
  -webkit-text-fill-color: #ffd700 !important;
}

/* Buttons or elements with yellow background always keep black text */
:is(.btn-primary, [class*="bg-[#ffd700]"], [class*="bg-yellow"], .apple-bag-badge) {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
:is(.btn-primary, [class*="bg-[#ffd700]"], [class*="bg-yellow"]) :is(span, p, a, strong, b) {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* Any links inside black cards hover to brand yellow */
:is([class*="card"], [class*="panel"], [class*="bento"], .bg-black, [class*="bg-[#000000]"], [class*="bg-[#000]"]) a:hover {
  color: #ffd700 !important;
  -webkit-text-fill-color: #ffd700 !important;
}


