/*
Theme Name: Tatu Bola Child
Template: blocksy
Version: 3.0.0
Description: TATU BOLA – Nike-style dark athletic design with Apple scroll system.
Text Domain: tatubola-child
*/

/* =============================================
   DESIGN TOKENS — Nike Edition
   ============================================= */
:root {
  --tb-bg:          #000000;
  --tb-bg-2:        #111111;
  --tb-bg-3:        #1a1a1a;
  --tb-white:       #ffffff;
  --tb-grey:        #888888;
  --tb-grey-2:      #555555;
  --tb-accent:      #FFE500;
  --tb-accent-dark: #CCB800;
  --tb-red:         #FF3A00;

  --tb-font:        'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --tb-radius:      30px;
  --tb-radius-sm:   8px;
  --tb-radius-card: 12px;

  --tb-ease:        cubic-bezier(0,0,0.5,1);
  --tb-ease-hover:  100ms linear;

  --tb-content-max: 1440px;
  --tb-pad:         clamp(20px, 5vw, 80px);

  --tb-stagger-delay:       0.15;
  --tb-stagger-opacity-dur: 0.9;
  --tb-stagger-y:           40px;

  --theme-palette-color-7: #000000;
  --theme-palette-color-8: #000000;
  --ct-color-background:   #000000;
  --ct-color-text:         #ffffff;
}

/* =============================================
   BASE
   ============================================= */
html, body {
  background: #ffffff !important;
  color: #111111 !important;
  font-family: var(--tb-font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
.ct-main-content-wrap, #content, .site, .site-content,
.entry-content, .page-content, .ct-container, #page,
.page-template-default, .woocommerce-page {
  background: #ffffff !important;
}
body *, .ct-main-content-wrap *, .site-content *, .entry-content * { color: #111111; }
.ct-container *, .wp-block-group *, .has-text-color { color: #111111 !important; }
.woocommerce *, .woocommerce-page * { color: #111111; }
a { color: var(--tb-accent); text-decoration: none; transition: color var(--tb-ease-hover); }
a:hover { color: #ffffff; }
input, textarea, select {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
  border-radius: var(--tb-radius-sm) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--tb-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,229,0,0.2) !important;
}

/* =============================================
   APPLE STAGGER SYSTEM
   ============================================= */
[data-stagger] > [data-si],[data-stagger][data-si] {
  opacity: 0; transform: translateY(var(--tb-stagger-y)); will-change: opacity, transform;
}
[data-stagger].stagger-done > [data-si],[data-stagger].stagger-done[data-si] {
  opacity: 1; transform: translateY(0); will-change: auto;
}
[data-stagger].stagger-active > [data-si]:nth-child(1) { animation: tb-stagger-in calc(var(--tb-stagger-opacity-dur) * 0.5s) cubic-bezier(0,0,0.5,1) 0s both; }
[data-stagger].stagger-active > [data-si]:nth-child(2) { animation: tb-stagger-in calc(var(--tb-stagger-opacity-dur) * 0.5s) cubic-bezier(0,0,0.5,1) calc(var(--tb-stagger-delay) * 0.15s) both; }
[data-stagger].stagger-active > [data-si]:nth-child(3) { animation: tb-stagger-in calc(var(--tb-stagger-opacity-dur) * 0.5s) cubic-bezier(0,0,0.5,1) calc(var(--tb-stagger-delay) * 0.30s) both; }
[data-stagger].stagger-active > [data-si]:nth-child(4) { animation: tb-stagger-in calc(var(--tb-stagger-opacity-dur) * 0.5s) cubic-bezier(0,0,0.5,1) calc(var(--tb-stagger-delay) * 0.45s) both; }
[data-stagger].stagger-active > [data-si]:nth-child(5) { animation: tb-stagger-in calc(var(--tb-stagger-opacity-dur) * 0.5s) cubic-bezier(0,0,0.5,1) calc(var(--tb-stagger-delay) * 0.60s) both; }
[data-stagger].stagger-active > [data-si]:nth-child(6) { animation: tb-stagger-in calc(var(--tb-stagger-opacity-dur) * 0.5s) cubic-bezier(0,0,0.5,1) calc(var(--tb-stagger-delay) * 0.75s) both; }
[data-stagger].stagger-active > [data-si]:nth-child(7) { animation: tb-stagger-in calc(var(--tb-stagger-opacity-dur) * 0.5s) cubic-bezier(0,0,0.5,1) calc(var(--tb-stagger-delay) * 0.90s) both; }
[data-stagger].stagger-active > [data-si]:nth-child(8) { animation: tb-stagger-in calc(var(--tb-stagger-opacity-dur) * 0.5s) cubic-bezier(0,0,0.5,1) calc(var(--tb-stagger-delay) * 1.05s) both; }
@keyframes tb-stagger-in {
  from { opacity: 0; transform: translateY(var(--tb-stagger-y)); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-reveal] {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0,0,0.5,1), transform 0.8s cubic-bezier(0,0,0.5,1);
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }

/* =============================================
   HEADER
   ============================================= */
.site-header, #header {
  background: transparent !important;
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background 100ms linear, box-shadow 100ms linear;
}
.site-header.scrolled, #header.scrolled {
  background: rgba(0,0,0,0.9) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.site-logo img { max-height: 48px; }
.ct-menu a, .main-navigation a {
  color: #ffffff !important;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: color var(--tb-ease-hover);
}
.ct-menu a:hover { color: var(--tb-accent) !important; }
.ct-cart-content { color: #ffffff !important; }

/* =============================================
   HERO
   ============================================= */
#tb-hero {
  position: relative; width: 100%; height: 100vh; min-height: 700px;
  display: flex; align-items: center; justify-content: flex-start;
  overflow: hidden; background: var(--tb-bg);
}
.tb-hero-media { position: absolute; inset: 0; pointer-events: none; }
.tb-hero-media video { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.tb-hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.1) 100%);
}
.tb-hero-content { position: relative; z-index: 10; padding: 0 var(--tb-pad); max-width: 900px; }
.tb-hero-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tb-accent) !important; margin: 0 0 20px; opacity: 0; transform: translateY(20px);
}
.tb-hero-headline {
  font-size: clamp(72px, 12vw, 160px); font-weight: 900;
  text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.9;
  color: #ffffff; margin: 0 0 32px; opacity: 0; transform: translateY(var(--tb-stagger-y));
}
.tb-hero-headline span { color: var(--tb-accent); }
.tb-hero-sub {
  font-size: clamp(16px, 1.6vw, 20px); color: rgba(255,255,255,0.7) !important;
  font-weight: 400; margin: 0 0 40px; opacity: 0; transform: translateY(var(--tb-stagger-y));
}
.tb-hero-actions {
  display: flex; gap: 16px; flex-wrap: wrap;
  opacity: 0; transform: translateY(var(--tb-stagger-y));
}
.tb-hero-scroll {
  position: absolute; bottom: 40px; left: var(--tb-pad); z-index: 10;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.4) !important; opacity: 0;
  animation: tb-fade-in 0.6s ease forwards 2.5s;
}
@keyframes tb-fade-in { to { opacity: 1; } }

/* =============================================
   BUTTONS
   ============================================= */
.tb-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--tb-accent); color: #000000 !important;
  padding: 16px 36px; border-radius: var(--tb-radius);
  font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  border: none; cursor: pointer;
  transition: background var(--tb-ease-hover), transform var(--tb-ease-hover);
  text-decoration: none; white-space: nowrap;
}
.tb-btn-primary:hover { background: var(--tb-accent-dark); color: #000000 !important; transform: translateY(-1px); }
.tb-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: #ffffff !important;
  padding: 15px 36px; border-radius: var(--tb-radius);
  font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 2px solid rgba(255,255,255,0.4); cursor: pointer;
  transition: border-color var(--tb-ease-hover), background var(--tb-ease-hover);
  text-decoration: none; white-space: nowrap;
}
.tb-btn-secondary:hover { border-color: #ffffff; background: rgba(255,255,255,0.08); color: #ffffff !important; }

/* =============================================
   TICKER MARQUEE
   ============================================= */
.tb-ticker { background: var(--tb-accent); overflow: hidden; padding: 12px 0; white-space: nowrap; }
.tb-ticker-track { display: inline-flex; gap: 0; animation: tb-ticker 30s linear infinite; }
.tb-ticker-track span { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #000000 !important; padding: 0 32px; }
.tb-ticker-track span.sep { padding: 0; opacity: 0.4; }
@keyframes tb-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =============================================
   SECTION LABELS + TITLES
   ============================================= */
.tb-section-eyebrow {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tb-accent) !important; margin: 0 0 12px;
}
.tb-section-title {
  font-size: clamp(40px, 6vw, 88px); font-weight: 900;
  text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.92;
  color: #ffffff; margin: 0 0 40px;
}

/* =============================================
   BALL SCROLL
   ============================================= */
#tb-ball-scroll { position: relative; height: 300vh; background: var(--tb-bg); }
#tb-ball-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#tb-ball-video {
  width: min(65vw, 65vh); height: min(65vw, 65vh);
  object-fit: cover; border-radius: 50%; display: block;
  box-shadow: 0 0 120px rgba(255,229,0,0.15), 0 0 60px rgba(255,229,0,0.08);
}
.tb-ball-text { position: absolute; max-width: 300px; opacity: 0; transform: translateX(-40px); }
.tb-ball-text-left  { left: 6vw; text-align: right; }
.tb-ball-text-right { right: 6vw; text-align: left; transform: translateX(40px); }
.tb-ball-text h3 {
  font-size: clamp(24px, 2.5vw, 36px); font-weight: 900;
  letter-spacing: -0.02em; text-transform: uppercase; line-height: 1.0;
  margin: 0 0 10px; color: #ffffff;
}
.tb-ball-text p { font-size: 15px; color: var(--tb-grey) !important; line-height: 1.6; margin: 0; }

/* =============================================
   STATEMENT
   ============================================= */
#tb-statement { padding: 140px var(--tb-pad); background: var(--tb-bg-2); text-align: center; }
.tb-statement-headline {
  font-size: clamp(48px, 8vw, 120px); font-weight: 900;
  text-transform: uppercase; letter-spacing: -0.035em; line-height: 0.92;
  color: #ffffff; margin: 0 0 32px;
}
.tb-statement-headline em { font-style: normal; color: var(--tb-accent); }
.tb-statement-sub { font-size: 18px; color: var(--tb-grey) !important; margin: 0 0 40px; }

/* =============================================
   CATEGORIES
   ============================================= */
#tb-categories { padding: 100px var(--tb-pad); background: var(--tb-bg); }
.tb-categories-header { margin-bottom: 48px; }
.tb-categories-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; max-width: var(--tb-content-max); margin: 0 auto;
}
.tb-category-card {
  position: relative; aspect-ratio: 2/3; border-radius: var(--tb-radius-card);
  overflow: hidden; cursor: pointer; display: block; text-decoration: none;
  background: var(--tb-bg-3);
  transition: transform 0.4s cubic-bezier(0,0,0.5,1); will-change: transform;
}
.tb-category-card:hover { transform: scale(1.02); }
.tb-category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0,0,0.5,1); will-change: transform; }
.tb-category-card:hover img { transform: scale(1.06); }
.tb-category-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 20px;
}
.tb-category-name { font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; color: #ffffff !important; margin: 0 0 6px; }
.tb-category-sub { font-size: 13px; color: var(--tb-grey) !important; margin: 0 0 14px; }
.tb-category-cta { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tb-accent) !important; display: flex; align-items: center; gap: 6px; }

/* =============================================
   STATS BAR
   ============================================= */
#tb-stats { padding: 80px var(--tb-pad); background: var(--tb-accent); }
.tb-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; max-width: var(--tb-content-max); margin: 0 auto; text-align: center;
}
.tb-stat-item { padding: 0 20px; border-right: 1px solid rgba(0,0,0,0.15); }
.tb-stat-item:last-child { border-right: none; }
.tb-stat-num { display: block; font-size: clamp(40px, 4vw, 64px); font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: #000000 !important; margin-bottom: 8px; }
.tb-stat-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(0,0,0,0.6) !important; }

/* =============================================
   FEATURED PRODUCTS
   ============================================= */
#tb-featured { padding: 100px var(--tb-pad); background: var(--tb-bg-2); }
.woocommerce ul.products li.product {
  background: var(--tb-bg-3) !important; border-radius: var(--tb-radius-card) !important;
  overflow: hidden; transition: transform 0.4s cubic-bezier(0,0,0.5,1);
  border: 1px solid rgba(255,255,255,0.06) !important; will-change: transform;
}
.woocommerce ul.products li.product:hover { transform: translateY(-6px); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { color: #ffffff !important; font-weight: 700; font-size: 15px; text-transform: uppercase; }
.woocommerce ul.products li.product .price { color: var(--tb-accent) !important; font-weight: 700; font-size: 16px; }
.woocommerce ul.products li.product .price del { color: var(--tb-grey) !important; }
.woocommerce ul.products li.product .button {
  background: var(--tb-accent) !important; color: #000000 !important;
  border-radius: var(--tb-radius) !important; font-weight: 700 !important;
  font-size: 13px !important; letter-spacing: 0.06em !important;
  text-transform: uppercase !important; border: none !important;
  transition: background var(--tb-ease-hover) !important; padding: 12px 24px !important;
}
.woocommerce ul.products li.product .button:hover { background: var(--tb-accent-dark) !important; color: #000000 !important; }
.woocommerce span.onsale { background: var(--tb-red) !important; color: #ffffff !important; border-radius: 4px !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; }
.woocommerce .star-rating span { color: var(--tb-accent) !important; }

/* =============================================
   BRAND STORY
   ============================================= */
#tb-story {
  padding: 120px var(--tb-pad); background: var(--tb-bg);
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: center; max-width: var(--tb-content-max); margin: 0 auto;
}
.tb-story-mascot img { width: 100%; max-width: 480px; filter: drop-shadow(0 0 60px rgba(255,229,0,0.12)); }
.tb-story-text h2 { font-size: clamp(36px, 4.5vw, 64px); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95; margin: 0 0 24px; color: #ffffff; }
.tb-story-text p { font-size: 17px; line-height: 1.7; color: var(--tb-grey) !important; margin: 0 0 16px; }
.tb-donate-badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 12px 20px; background: rgba(255,229,0,0.08); border: 1px solid rgba(255,229,0,0.25); border-radius: 8px; color: var(--tb-accent) !important; font-size: 14px; font-weight: 600; }

/* =============================================
   SOCIAL PROOF
   ============================================= */
#tb-reviews-banner { background: var(--tb-bg-3); border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 100px var(--tb-pad); text-align: center; }
.tb-reviews-inner { max-width: 700px; margin: 0 auto; }
.tb-reviews-stars { font-size: 28px; margin-bottom: 24px; letter-spacing: 4px; }
.tb-reviews-quote { font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: #ffffff; margin: 0 0 20px; font-style: normal; }
.tb-reviews-author { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tb-grey) !important; margin: 0 0 6px; }
.tb-reviews-meta { font-size: 13px; color: var(--tb-grey) !important; }

/* =============================================
   FAQ
   ============================================= */
#tb-faq { background: var(--tb-bg-2); }
.tb-faq-inner { max-width: 800px; margin: 0 auto; padding: 100px var(--tb-pad); }
.tb-faq-item { border-bottom: 1px solid rgba(255,255,255,0.08); }
.tb-faq-item:first-of-type { border-top: 1px solid rgba(255,255,255,0.08); }
.tb-faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; background: none; border: none; cursor: pointer; font-size: 17px; font-weight: 600; color: #ffffff !important; text-align: right; transition: color var(--tb-ease-hover); }
.tb-faq-question:hover { color: var(--tb-accent) !important; }
.tb-faq-icon { font-size: 22px; color: var(--tb-accent) !important; transition: transform 0.25s cubic-bezier(0,0,0.5,1); flex-shrink: 0; }
.tb-faq-question[aria-expanded="true"] .tb-faq-icon { transform: rotate(45deg); }
.tb-faq-answer { padding: 0 0 22px; font-size: 16px; line-height: 1.7; color: var(--tb-grey) !important; }
.tb-faq-answer p { color: var(--tb-grey) !important; }

/* =============================================
   FOOTER
   ============================================= */
.site-footer, #footer { background: #000000 !important; color: var(--tb-grey) !important; border-top: 1px solid rgba(255,255,255,0.08); font-size: 14px; }
.site-footer *, #footer * { color: var(--tb-grey) !important; }
.site-footer a:hover, #footer a:hover { color: var(--tb-accent) !important; }

/* =============================================
   WOOCOMMERCE DARK
   ============================================= */
.woocommerce-page .woocommerce, .woocommerce { color: #111111; }
.woocommerce .woocommerce-breadcrumb { color: var(--tb-grey) !important; font-size: 12px; }
.woocommerce-cart table.cart, .woocommerce-checkout #payment, .woocommerce div.product { background: transparent !important; color: #ffffff !important; }
.woocommerce-cart table.cart thead, .woocommerce-cart table.cart tr { border-color: rgba(255,255,255,0.08) !important; }
.woocommerce-cart .cart-subtotal, .woocommerce-cart .order-total { color: #ffffff !important; }
.woocommerce-checkout .woocommerce-input-wrapper input, .woocommerce-checkout select, .woocommerce-checkout textarea { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: #ffffff !important; }
.tb-product-trust { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); }
.tb-product-trust span { font-size: 12px; color: var(--tb-grey) !important; display: flex; align-items: center; gap: 4px; }

/* =============================================
   FLOATING BUTTONS
   ============================================= */
.tb-float-buttons { position: fixed; bottom: 32px; right: 32px; z-index: 500; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.tb-float-wa { width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff !important; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,0.4); transition: transform 0.2s cubic-bezier(0,0,0.5,1), box-shadow 0.2s cubic-bezier(0,0,0.5,1); will-change: transform; }
.tb-float-wa:hover { transform: scale(1.1); box-shadow: 0 8px 30px rgba(37,211,102,0.55); color: #fff !important; }
.tb-float-top { width: 44px; height: 44px; border-radius: 50%; background: var(--tb-accent); color: #000000 !important; cursor: pointer; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: none; transition: transform var(--tb-ease-hover), background var(--tb-ease-hover); }
.tb-float-top:hover { transform: scale(1.1); background: var(--tb-accent-dark); }

/* =============================================
   CART BAR
   ============================================= */
.tb-shipping-bar { background: rgba(255,229,0,0.06); border: 1px solid rgba(255,229,0,0.2); border-radius: var(--tb-radius-sm); padding: 16px 20px; margin-bottom: 24px; }
.tb-shipping-bar p { font-size: 14px; color: #ffffff !important; margin: 0 0 10px; }
.tb-shipping-track { height: 3px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.tb-shipping-fill { height: 100%; background: var(--tb-accent); border-radius: 2px; transition: width 0.8s cubic-bezier(0,0,0.5,1); }

/* =============================================
   RTL
   ============================================= */
[dir="rtl"] .tb-ball-text-left  { right: 6vw; left: auto; text-align: left; }
[dir="rtl"] .tb-ball-text-right { left: 6vw; right: auto; text-align: right; }
[dir="rtl"] .tb-faq-question    { text-align: right; }
[dir="rtl"] .tb-float-buttons   { right: auto; left: 32px; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .tb-categories-grid { grid-template-columns: repeat(2, 1fr); }
  .tb-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .tb-stat-item { border-right: none; padding: 0; }
  #tb-story { gap: 48px; }
}
@media (max-width: 768px) {
  #tb-categories, #tb-featured { padding: 60px 20px; }
  #tb-statement { padding: 80px 20px; }
  #tb-reviews-banner { padding: 60px 20px; }
  #tb-ball-video { width: 100%; height: 100%; }
  .tb-ball-text { display: none; }
  #tb-story { grid-template-columns: 1fr; gap: 32px; padding: 60px 20px; }
  .tb-story-mascot { text-align: center; }
  .tb-float-buttons { bottom: 20px; right: 16px; }
  [dir="rtl"] .tb-float-buttons { left: 16px; right: auto; }
}
@media (max-width: 480px) {
  .tb-categories-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tb-hero-actions { flex-direction: column; }
  .tb-stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-reveal], [data-stagger] > [data-si] { opacity: 1 !important; transform: none !important; }
  .tb-ticker-track { animation: none; }
}

/* =============================================
   INNER PAGES — GLOBAL DARK SYSTEM
   ============================================= */

/* Non-homepage header: always opaque dark */
body:not(.tb-home) .site-header,
body:not(.tb-home) #header {
  background: rgba(0,0,0,0.96) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

/* White backgrounds for Blocksy containers */
.ct-main-content-wrap, .ct-page-content-wrap,
.ct-container, .ct-sidebar-content, .ct-content-area,
.ct-layout-canvas, .ct-section, .ct-row, .ct-column,
[data-scope="content"], [data-scope="narrow"],
.ct-blog-post, .ct-card,
.woocommerce-page { background: #ffffff !important; }

/* Pad top so content clears the fixed header */
.ct-main-content-wrap { padding-top: 80px !important; }

/* Page / archive title areas */
.ct-blog-archive-header, .ct-archive-header, .ct-page-header,
.woocommerce .woocommerce-products-header {
  background: var(--tb-bg) !important;
  padding: 100px var(--tb-pad) 56px !important;
}
.ct-blog-archive-header h1, .ct-archive-header h1,
.ct-page-header h1,
.woocommerce .woocommerce-products-header__title,
h1.entry-title, h1.page-title {
  font-size: clamp(36px, 5vw, 72px) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.03em !important;
  line-height: 0.92 !important;
  color: #ffffff !important;
}

/* Breadcrumbs */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a { color: var(--tb-grey) !important; font-size: 12px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; }
.woocommerce-breadcrumb a:hover { color: var(--tb-accent) !important; }

/* Nav dropdowns */
.ct-nav-bar .sub-menu, .main-navigation .sub-menu {
  background: rgba(0,0,0,0.96) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--tb-radius-sm) !important;
  backdrop-filter: blur(20px) !important;
}
.ct-nav-bar .sub-menu a, .main-navigation .sub-menu a { color: #ffffff !important; }
.ct-nav-bar .sub-menu a:hover, .main-navigation .sub-menu a:hover { color: var(--tb-accent) !important; }

/* Tables */
table { color: #ffffff !important; }
table th { background: rgba(255,255,255,0.04) !important; color: var(--tb-grey) !important; border-color: rgba(255,255,255,0.08) !important; }
table td { border-color: rgba(255,255,255,0.08) !important; color: #ffffff !important; }

/* Sidebar widgets */
.widget { background: var(--tb-bg-3) !important; border-radius: var(--tb-radius-card) !important; padding: 24px !important; border: 1px solid rgba(255,255,255,0.06) !important; margin-bottom: 24px !important; }
.widget-title, .widgettitle { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: var(--tb-accent) !important; margin-bottom: 16px !important; }
.widget a { color: var(--tb-grey) !important; }
.widget a:hover { color: var(--tb-accent) !important; }

/* WC notices */
.woocommerce-message { background: rgba(255,229,0,0.08) !important; border-top-color: var(--tb-accent) !important; color: #ffffff !important; }
.woocommerce-error   { background: rgba(255,58,0,0.1) !important; border-top-color: var(--tb-red) !important; color: #ffffff !important; }
.woocommerce-info    { background: rgba(74,124,255,0.08) !important; border-top-color: #4a7cff !important; color: #ffffff !important; }
.woocommerce-message a.button, .woocommerce-error a.button, .woocommerce-info a.button { background: var(--tb-accent) !important; color: #000000 !important; border-radius: var(--tb-radius) !important; }

/* =============================================
   SHOP / ARCHIVE PAGE
   ============================================= */
.woocommerce-result-count { color: var(--tb-grey) !important; font-size: 13px !important; letter-spacing: 0.04em !important; }
.woocommerce-ordering select, .woocommerce-ordering .orderby {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
  border-radius: var(--tb-radius-sm) !important;
  padding: 8px 16px !important;
  font-size: 13px !important; font-weight: 600 !important;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul { border-color: rgba(255,255,255,0.12) !important; }
.woocommerce nav.woocommerce-pagination ul li { border-color: rgba(255,255,255,0.12) !important; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span { color: var(--tb-grey) !important; background: transparent !important; font-weight: 600 !important; }
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--tb-accent) !important; color: #000000 !important; }

/* =============================================
   SINGLE PRODUCT PAGE
   ============================================= */
.woocommerce div.product { background: transparent !important; }

.woocommerce div.product .product_title {
  font-size: clamp(28px, 4vw, 52px) !important;
  font-weight: 900 !important; text-transform: uppercase !important;
  letter-spacing: -0.03em !important; line-height: 0.95 !important; color: #ffffff !important;
}
.woocommerce div.product .price { color: var(--tb-accent) !important; font-size: 26px !important; font-weight: 700 !important; }
.woocommerce div.product .price del { color: var(--tb-grey) !important; font-size: 18px !important; }
.woocommerce div.product .price ins { color: var(--tb-accent) !important; text-decoration: none !important; }

.woocommerce div.product .woocommerce-product-details__short-description p { color: var(--tb-grey) !important; font-size: 16px !important; line-height: 1.7 !important; }

/* Add to cart + primary WC buttons */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
  background: var(--tb-accent) !important; color: #000000 !important;
  border: none !important; border-radius: var(--tb-radius) !important;
  font-weight: 700 !important; font-size: 14px !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important;
  padding: 16px 40px !important; height: auto !important;
  transition: background 100ms linear !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--tb-accent-dark) !important; color: #000000 !important; }

.woocommerce div.product form.cart .qty {
  background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.15) !important;
  color: #ffffff !important; border-radius: var(--tb-radius-sm) !important; text-align: center !important; font-weight: 600 !important;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs { background: transparent !important; border-bottom-color: rgba(255,255,255,0.1) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: rgba(255,255,255,0.1) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--tb-bg-3) !important; border-color: rgba(255,255,255,0.1) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--tb-bg-2) !important; border-bottom-color: var(--tb-bg-2) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--tb-grey) !important; font-weight: 600 !important; text-transform: uppercase !important; font-size: 12px !important; letter-spacing: 0.08em !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #ffffff !important; }
.woocommerce div.product .woocommerce-tabs .panel { background: transparent !important; border-color: rgba(255,255,255,0.08) !important; }
.woocommerce div.product #tab-description p, .woocommerce div.product #tab-description li { color: var(--tb-grey) !important; line-height: 1.7 !important; }

/* Product image gallery */
.woocommerce-product-gallery { background: var(--tb-bg-3) !important; border-radius: var(--tb-radius-card) !important; overflow: hidden; }
.woocommerce-product-gallery .flex-viewport { background: var(--tb-bg-3) !important; }

/* Reviews */
.woocommerce #reviews #comments ol.commentlist li .comment-text { background: var(--tb-bg-3) !important; border-color: rgba(255,255,255,0.08) !important; }
.woocommerce #reviews #comments ol.commentlist li p.meta strong,
.woocommerce #reviews #comments ol.commentlist li p.meta { color: var(--tb-grey) !important; }

/* Related / upsell headings */
.related > h2, .up-sells > h2 { font-size: clamp(24px, 3vw, 44px) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: -0.03em !important; color: #ffffff !important; }

/* =============================================
   CART PAGE
   ============================================= */
.woocommerce-cart-form table.cart { background: transparent !important; }
.woocommerce-cart-form table.cart th { background: rgba(255,255,255,0.04) !important; color: var(--tb-grey) !important; font-size: 11px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; font-weight: 700 !important; border-color: rgba(255,255,255,0.08) !important; }
.woocommerce-cart-form table.cart td { border-color: rgba(255,255,255,0.06) !important; }
.woocommerce-cart-form table.cart .product-name a { color: #ffffff !important; font-weight: 600 !important; }
.woocommerce-cart-form table.cart .product-price .amount,
.woocommerce-cart-form table.cart .product-subtotal .amount { color: var(--tb-accent) !important; font-weight: 700 !important; }
.woocommerce-cart-form table.cart td.actions .button { background: transparent !important; color: var(--tb-grey) !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: var(--tb-radius-sm) !important; }
.woocommerce-cart-form table.cart td.actions .button:hover { background: rgba(255,255,255,0.06) !important; color: #ffffff !important; }

.cart_totals { background: var(--tb-bg-3) !important; border-radius: var(--tb-radius-card) !important; padding: 32px !important; border: 1px solid rgba(255,255,255,0.06) !important; }
.cart_totals h2 { font-size: 18px !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: #ffffff !important; }
.cart_totals table th, .cart_totals table td { border-color: rgba(255,255,255,0.08) !important; font-weight: 600 !important; }
.cart_totals .order-total th, .cart_totals .order-total td { font-size: 18px !important; font-weight: 700 !important; }
.cart_totals .order-total .amount { color: var(--tb-accent) !important; }
.wc-proceed-to-checkout a.checkout-button { background: var(--tb-accent) !important; color: #000000 !important; border-radius: var(--tb-radius) !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; padding: 18px 40px !important; display: block !important; text-align: center !important; }
.wc-proceed-to-checkout a.checkout-button:hover { background: var(--tb-accent-dark) !important; color: #000000 !important; }

/* =============================================
   CHECKOUT PAGE
   ============================================= */
.woocommerce-billing-fields h3, .woocommerce-shipping-fields h3 { font-size: 16px !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: #ffffff !important; margin-bottom: 24px !important; }
.woocommerce-checkout #payment { background: var(--tb-bg-3) !important; border-radius: var(--tb-radius-card) !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: rgba(255,255,255,0.08) !important; }
.woocommerce-checkout #payment ul.payment_methods li label { color: #ffffff !important; }
.woocommerce-checkout #payment div.payment_box { background: rgba(255,255,255,0.04) !important; color: var(--tb-grey) !important; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: rgba(255,255,255,0.04) !important; }
.woocommerce-checkout #payment #place_order { background: var(--tb-accent) !important; color: #000000 !important; border: none !important; border-radius: var(--tb-radius) !important; font-weight: 700 !important; font-size: 16px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; padding: 20px 48px !important; width: 100% !important; }
.woocommerce-checkout #payment #place_order:hover { background: var(--tb-accent-dark) !important; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { border-color: rgba(255,255,255,0.08) !important; }
.woocommerce-checkout-review-order-table .order-total .amount { color: var(--tb-accent) !important; font-weight: 700 !important; }
.woocommerce-checkout label, .woocommerce-checkout .woocommerce-form__label { color: var(--tb-grey) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; }

/* =============================================
   MY ACCOUNT PAGE
   ============================================= */
.woocommerce-MyAccount-navigation { background: var(--tb-bg-3) !important; border-radius: var(--tb-radius-card) !important; padding: 24px !important; border: 1px solid rgba(255,255,255,0.06) !important; }
.woocommerce-MyAccount-navigation ul li { border-color: rgba(255,255,255,0.06) !important; }
.woocommerce-MyAccount-navigation ul li a { color: var(--tb-grey) !important; font-weight: 600 !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; }
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover { color: var(--tb-accent) !important; }

/* =============================================
   MOBILE NAV MENU - WHITE TEXT
   ============================================= */
.elementor-element-32badb2 .elementor-nav-menu--dropdown a {
  color: #ffffff !important;
}
.elementor-element-32badb2 .elementor-nav-menu--dropdown a:hover {
  color: rgba(255,255,255,0.75) !important;
}