/* =====================================================================
   TENAS — "VOLTAGE" REDESIGN  (2026)
   A from-scratch visual system layered over the existing markup.
   It restyles the SKIN (color, type, surfaces, buttons) and leaves the
   SKELETON (grids, layout, positioning) untouched, so every feature and
   all data keep working exactly as before.

   Loaded LAST, so it wins the cascade. Most of the site reads its colors
   from CSS variables, so redefining the tokens recolors everything at
   once; component rules below refine shape, depth and typography.
   ===================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Navy blue-black base + gold primary + warm amber secondary */
  --bg: #060a14;
  --bg-2: #0a1122;
  --panel: #0e1730;
  --panel-2: #14203c;
  --text: #eef2f8;
  --muted: #97a3ba;
  --accent: #e8bd4f;      /* gold */
  --accent-2: #ffb43c;    /* warm amber */
  --accent-3: #3b74d6;    /* blue spark (ambient depth) */
  --line: rgba(130, 165, 220, 0.13);
  --line-strong: rgba(140, 175, 230, 0.22);
  --glass: rgba(14, 23, 44, 0.68);
  --glow: rgba(232, 189, 79, 0.35);
  --glow-2: rgba(255, 180, 60, 0.3);
  --ink-on-accent: #0a0f1c;
  --radius: 20px;
  --radius-lg: 26px;
  --shadow-card: 0 24px 60px -34px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --font-display: "Space Grotesk", "Manrope", Arial, sans-serif;
  --font-body: "Manrope", Arial, sans-serif;
  color-scheme: dark;
}

/* Must match the base sheet's html[data-theme="dark"] specificity to win */
html[data-theme="dark"] {
  --bg: #060a14;
  --bg-2: #0a1122;
  --panel: #0e1730;
  --panel-2: #14203c;
  --text: #eef2f8;
  --muted: #97a3ba;
  --accent: #e8bd4f;
  --accent-2: #ffb43c;
  --accent-3: #3b74d6;
  --glass: rgba(14, 23, 44, 0.68);
  --glow: rgba(232, 189, 79, 0.35);
  --glow-2: rgba(255, 180, 60, 0.3);
  --line: rgba(130, 165, 220, 0.13);
  --line-strong: rgba(140, 175, 230, 0.22);
  --ink-on-accent: #0a0f1c;
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #eaf0f8;
  --bg-2: #e0e9f4;
  --panel: #ffffff;
  --panel-2: #eef3fa;
  --text: #0f1b2e;
  --muted: #55627a;
  --accent: #b8860b;      /* deeper gold for contrast on light */
  --accent-2: #c47f00;
  --accent-3: #2f6bd6;
  --line: rgba(15, 27, 46, 0.10);
  --line-strong: rgba(15, 27, 46, 0.18);
  --glass: rgba(255, 255, 255, 0.72);
  --glow: rgba(184, 134, 11, 0.28);
  --glow-2: rgba(224, 138, 0, 0.22);
  --ink-on-accent: #1a1305;
  --shadow-card: 0 24px 55px -34px rgba(30, 40, 20, 0.4);
  --shadow-lift: 0 40px 80px -40px rgba(30, 40, 20, 0.45);
  color-scheme: light;
}

/* ---------- 2. GLOBAL CANVAS ---------- */
html,
body {
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--font-body);
}

/* Signature ambient glows behind everything */
body::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(52vw 52vw at 8% -6%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    radial-gradient(46vw 46vw at 98% 4%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 58%),
    radial-gradient(60vw 50vw at 50% 108%, color-mix(in srgb, var(--accent-3) 12%, transparent), transparent 60%) !important;
  filter: saturate(1.05);
}

body::after {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 0.5;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.02) 0.5px, transparent 0.5px) !important;
  background-size: 3px 3px !important;
}
html[data-theme="light"] body::after { opacity: 0.35; background-image: radial-gradient(circle at center, rgba(0,0,0,0.025) 0.5px, transparent 0.5px) !important; }

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

/* ---------- 3. TYPOGRAPHY ---------- */
h1, h2, h3, h4, .logo,
.hero h1, .section-header h2, .cta-band h2, .hero-card h3 {
  font-family: var(--font-display) !important;
  text-transform: uppercase;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
}

.hero h1 {
  font-size: clamp(2.7rem, 6.4vw, 5.6rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.035em !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text) !important;
  text-wrap: balance;
}

.section-header h2 { font-size: clamp(1.9rem, 3.6vw, 3rem) !important; }
.cta-band h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem) !important; }

.lead, .hero .lead {
  color: var(--muted) !important;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem) !important;
  line-height: 1.7 !important;
  font-family: var(--font-body) !important;
  text-transform: none;
  letter-spacing: 0 !important;
}

/* Eyebrow -> mono-ish tag with a lime dot */
.eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  color: var(--accent) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--glow);
}

/* Section-header underline -> lime bar */
.section-header h2::after {
  background: var(--accent) !important;
  height: 4px !important;
  width: 58px !important;
  border-radius: 999px !important;
  box-shadow: 0 0 20px var(--glow);
}

/* ---------- 4. NAV ---------- */
.nav {
  background: color-mix(in srgb, var(--bg) 72%, transparent) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
  border-bottom: 1px solid var(--line) !important;
}
.logo { font-family: var(--font-display) !important; letter-spacing: -0.01em; }
.logo-image {
  border-radius: 12px !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.6), 0 0 22px -6px var(--glow) !important;
}
.nav-links a { color: var(--muted) !important; font-weight: 600; transition: color 0.2s var(--ease-soft); }
.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.is-active,
.nav-links a[aria-current="page"] { color: var(--text) !important; }
/* Unify the per-link accent to gold */
.nav .nav-links a { --nav-accent: var(--accent) !important; }
/* FIX: the full-cover ::before was painted solid gold and hid the active
   link's text. Make it a subtle glow instead, and keep ::after as the
   thin underline indicator. */
.nav-links a::before {
  background: radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%) !important;
}
.nav-links a::after { background: var(--accent) !important; box-shadow: 0 0 12px var(--glow) !important; }
.nav-links a.is-active,
.nav-links a[aria-current="page"] {
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
  box-shadow: none !important;
}
.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 28%, transparent) !important;
}

/* ---------- 5. BUTTONS ---------- */
.cta,
.nav .cta,
.hero-actions .cta {
  background: var(--accent) !important;
  color: var(--ink-on-accent) !important;
  border: none !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  border-radius: 14px !important;
  padding: 13px 26px !important;
  box-shadow: 0 16px 34px -14px var(--glow), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), filter 0.2s var(--ease-soft) !important;
}
.cta:hover,
.nav .cta:hover,
.hero-actions .cta:hover {
  transform: translateY(-3px);
  filter: brightness(1.05);
  box-shadow: 0 26px 48px -16px var(--glow), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

.secondary {
  background: color-mix(in srgb, var(--panel) 55%, transparent) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  border-radius: 14px !important;
  padding: 12px 24px !important;
  backdrop-filter: blur(10px);
  transition: border-color 0.25s var(--ease-soft), color 0.25s var(--ease-soft), background-color 0.25s var(--ease-soft), transform 0.25s var(--ease-out) !important;
}
.secondary:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  transform: translateY(-2px);
}

.theme-toggle {
  background: color-mix(in srgb, var(--panel) 60%, transparent) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
}
.theme-toggle:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ---------- 6. TAGS / PILLS ---------- */
.hero-signal,
.gallery-atmosphere span,
.location-pill,
.gallery-chip,
.shop-tag,
.shop-category,
.membership-success-pill {
  background: color-mix(in srgb, var(--panel) 70%, transparent) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(8px);
}
.gallery-chip,
.shop-tag { color: var(--ink-on-accent) !important; background: var(--accent) !important; border: none !important; font-weight: 700; }

/* ---------- 7. SURFACES / CARDS (solid panels) ---------- */
.feature-card,
.hero-card,
.price-card,
.membership-card,
.program-card,
.coach-card,
.stat-card,
.dashboard-card,
.extra-card,
.form-section,
.location-card,
.map-shell,
.detail-box,
.payment-box,
.machine-detail-card,
.tour-card,
.admin-card,
.machine-spotlight {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--panel) 92%, transparent),
      color-mix(in srgb, var(--panel-2) 88%, transparent)) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: blur(12px);
}

/* Feature cards get a top accent bar + lift */
.feature-card {
  position: relative;
  overflow: hidden;
  padding: 28px 24px !important;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-soft);
}
.feature-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: 0; transition: opacity 0.4s var(--ease-soft);
}
.feature-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
  box-shadow: var(--shadow-lift), 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent) !important;
}
.feature-card:hover::before { opacity: 1; }

.hero-card {
  border-radius: var(--radius-lg) !important;
  border-color: color-mix(in srgb, var(--accent) 26%, transparent) !important;
}

/* Image-backed cards: keep the image, just modernise the frame */
.gallery-page-card,
.arrival-card,
.update-card {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
}

/* ---------- 8. SECTION BANDS ---------- */
.split,
.machines,
.media-band,
.updates-section,
.machine-detail,
.gallery-curation {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-2) 88%, transparent),
      color-mix(in srgb, var(--bg) 92%, transparent)) !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}

.cta-band {
  border-radius: var(--radius-lg) !important;
  background:
    radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 16%, transparent), color-mix(in srgb, var(--panel) 90%, transparent)) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
  box-shadow: var(--shadow-card) !important;
}

/* ---------- 9. FORMS ---------- */
.form-field input,
.form-field select,
.form-field textarea,
.tour-form input,
.tour-form select,
.tour-form textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
  background: color-mix(in srgb, var(--panel) 85%, transparent) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}
.form-label { color: var(--text) !important; }

/* Price tables */
.price-table { border-radius: var(--radius) !important; overflow: hidden; border: 1px solid var(--line) !important; }
.price-table th { background: color-mix(in srgb, var(--panel-2) 90%, transparent) !important; color: var(--text) !important; }

/* ---------- 10. FOOTER ---------- */
.footer {
  background: linear-gradient(180deg, var(--bg-2), var(--bg)) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--text);
}
.footer h3, .footer h4 { font-family: var(--font-display) !important; }
.footer h4 { color: var(--accent) !important; }
.social-icons a {
  border: 1px solid var(--line-strong) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.social-icons a:hover { color: var(--accent) !important; border-color: var(--accent) !important; transform: translateY(-2px); }
.footer-year-link, .partner-link { color: var(--accent) !important; }

/* ---------- 11. COMING-SOON + PWA banner accent sync ---------- */
.pwa-install-btn {
  background: var(--accent) !important;
  color: var(--ink-on-accent) !important;
}
.coming-soon-badge { border-color: var(--line-strong) !important; }

/* ---------- 12. ROOMIER RHYTHM ---------- */
.section { padding-top: clamp(26px, 3.2vw, 46px) !important; padding-bottom: clamp(26px, 3.2vw, 46px) !important; }
.section-header { margin-bottom: clamp(18px, 2.6vw, 30px) !important; }
.cta-band { margin-top: 0 !important; margin-bottom: clamp(30px, 4vw, 52px) !important; padding: clamp(22px, 2.6vw, 38px) clamp(24px, 3vw, 44px) !important; }
/* trim big gaps between stacked feature grids */
.feature-grid { gap: clamp(14px, 1.6vw, 20px) !important; }

/* Forms were floating in a huge empty section — cap width + center so the
   card fills its area instead of leaving big side/vertical gutters. */
.form-section,
.tour-form,
.membership-success {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 640px) {
  .cta, .nav .cta, .secondary { padding: 12px 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cta:hover, .nav .cta:hover, .secondary:hover, .feature-card:hover { transform: none; }
}

/* =====================================================================
   GOLD PREMIUM LAYER  — applies the flagship look to EVERY page
   Signature gold-gradient buttons, immersive sub-page heroes, gold-dipped
   gradient headings, and richer glass cards. Scoped to shared classes so
   gallery / shop / machines / coaches / spa / membership / tour all lift.
   ===================================================================== */

/* --- Signature gold-gradient CTA with a moving sheen --- */
.cta,
.nav .cta,
.hero-actions .cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fbe396 0%, #e8bd4f 45%, #caa034 100%) !important;
  color: #241a02 !important;
  box-shadow: 0 18px 38px -16px rgba(232, 189, 79, 0.55), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
.cta::after {
  content: "";
  position: absolute; top: 0; left: -60%; width: 42%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease-out, cubic-bezier(0.22,1,0.36,1));
  pointer-events: none;
}
.cta:hover::after { left: 130%; }

/* --- Gold-dipped gradient headings (the "wow" detail) --- */
.hero h1,
.section-header h2,
.cta-band h2 {
  background: linear-gradient(180deg, var(--text) 52%, var(--accent) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--accent) !important; /* graceful fallback */
}

/* --- Sub-page hero: navy gradient + gold glow (NO photo — that's only on
   the home page). Sized to its content with generous top padding so the
   title clears the nav and is never cropped. --- */
.hero {
  position: relative;
  overflow: visible !important;
  min-height: 0 !important;
  display: block !important;
  padding: clamp(48px, 6vw, 92px) 7vw clamp(38px, 4.5vw, 64px) !important;
  background:
    radial-gradient(80% 130% at 100% -20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    radial-gradient(70% 130% at -10% 120%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 92%, transparent), var(--bg)) !important;
  border-bottom: 1px solid var(--line) !important;
}
.hero > * { position: relative; z-index: 1; }
.hero-grid { margin-top: clamp(14px, 2vw, 26px) !important; align-items: center !important; gap: clamp(24px, 3vw, 44px) !important; }
/* Smaller, breathing-room title so the gradient-clipped text never crops */
.hero h1 {
  font-size: clamp(2.3rem, 5.2vw, 4.4rem) !important;
  line-height: 1.05 !important;
  padding-bottom: 0.1em !important;
}

/* --- Cards: gold glow lift, brighter borders --- */
.feature-card,
.price-card,
.membership-card,
.program-card,
.coach-card,
.stat-card,
.dashboard-card,
.extra-card,
.gallery-page-card,
.machine-detail-card {
  transition: transform 0.4s var(--ease-out, cubic-bezier(0.22,1,0.36,1)),
    box-shadow 0.4s var(--ease-out, cubic-bezier(0.22,1,0.36,1)),
    border-color 0.4s ease !important;
}
.price-card:hover,
.membership-card:hover,
.program-card:hover,
.coach-card:hover,
.extra-card:hover,
.machine-detail-card:hover,
.gallery-page-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9), 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent) !important;
}

/* --- Gold price / accent numerals --- */
.price,
.pricing,
.shop-price,
.price-preview-discount { color: var(--accent) !important; }

/* --- Coming Soon + PWA install already read tokens; keep gold sheen --- */
.pwa-install-btn {
  background: linear-gradient(135deg, #fbe396, #e8bd4f 45%, #caa034) !important;
  color: #241a02 !important;
}

@media (prefers-reduced-motion: reduce) {
  .price-card:hover, .membership-card:hover, .program-card:hover,
  .coach-card:hover, .extra-card:hover, .machine-detail-card:hover,
  .gallery-page-card:hover { transform: none; }
  .cta:hover::after { left: -60%; }
}

/* =====================================================================
   UNIFIED TYPEFACE — one consistent font across the ENTIRE site
   (headings, body, buttons, nav, forms) on every page.
   ===================================================================== */
:root,
html[data-theme="dark"],
html[data-theme="light"] {
  --font-body: "Space Grotesk", "Manrope", system-ui, sans-serif;
  --font-display: "Space Grotesk", "Manrope", system-ui, sans-serif;
}
.tx-page {
  --tx-body: "Space Grotesk", "Manrope", system-ui, sans-serif;
  --tx-display: "Space Grotesk", "Manrope", system-ui, sans-serif;
}
html, body, input, button, select, textarea, optgroup,
h1, h2, h3, h4, h5, h6,
p, a, span, li, ul, ol, dl, dt, dd, div, label, small, strong, b, em, i,
th, td, blockquote, figcaption, time, code {
  font-family: "Space Grotesk", "Manrope", system-ui, sans-serif !important;
}

/* ===================== SHOP — clean, uniform product grid ===================== */
.tx-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  max-width: 1240px;
  margin: 0 auto;
}
.tx-shop-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease-out), border-color 0.35s, box-shadow 0.35s;
}
.tx-shop-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: var(--shadow-lift);
}
.tx-shop-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 20px;
  background: linear-gradient(160deg, #f4f4ef, #e2e5dc);
}
.tx-shop-card__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.18));
}
.tx-shop-card__media .shop-jar-visual { transform: scale(0.88); }
.tx-shop-card__tag {
  position: absolute; top: 12px; left: 12px;
  padding: 6px 11px;
  font-family: var(--font-display);
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #241a02;
  background: linear-gradient(135deg, #fbe396, #e8bd4f 45%, #caa034);
  border-radius: 999px;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5);
}
.tx-shop-card__body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 18px 20px;
  flex: 1;
}
.tx-shop-card__cat {
  font-family: var(--font-display);
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
}
.tx-shop-card__name {
  font-family: var(--font-display);
  font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; text-transform: none;
  color: var(--text); margin: 0;
}
.tx-shop-card__desc { color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin: 0; }
.tx-shop-card__foot {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tx-shop-card__price { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--accent); }
.tx-shop-card__btn {
  padding: 9px 18px; border-radius: 11px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  color: #241a02;
  background: linear-gradient(135deg, #fbe396, #e8bd4f 45%, #caa034);
  box-shadow: 0 10px 20px -10px var(--glow);
  transition: transform 0.25s var(--ease-out), filter 0.2s;
  white-space: nowrap;
}
.tx-shop-card__btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
@media (prefers-reduced-motion: reduce) {
  .tx-shop-card:hover, .tx-shop-card__btn:hover { transform: none; }
}

/* ===================== FIXES ===================== */
/* Coach skill tags — readable gold pills in BOTH themes (were faint blue) */
.tags span {
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
  color: var(--accent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent) !important;
  font-weight: 600 !important;
}

/* Footer partner cards — center the logo, text and link */
.footer-partner .partner {
  text-align: center !important;
  align-items: center !important;
}
.footer-partner .partner .partner-logo { margin-inline: auto !important; }

/* ===================== ADMIN — cleaner, organized console ===================== */
.admin-view-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 6px; border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border: 1px solid var(--line);
}
.admin-view-tabs button {
  appearance: none; cursor: pointer;
  padding: 10px 18px; border-radius: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  color: var(--muted); background: transparent; border: 1px solid transparent;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.admin-view-tabs button:hover { color: var(--text); }
.admin-view-tabs button.is-active {
  color: #241a02;
  background: linear-gradient(135deg, #fbe396, #e8bd4f 45%, #caa034);
}
.admin-stats, .admin-quick-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.stat-card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important;
  border: 1px solid var(--line) !important; border-radius: 16px !important;
  padding: 20px !important;
}
.stat-card span { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.stat-card p { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--text); margin-top: 6px; }
.stat-card p.admin-stat-date { font-size: 0.95rem; }
.admin-quick-grid button {
  text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px; border-radius: 16px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  transition: transform 0.3s var(--ease-out), border-color 0.3s;
}
.admin-quick-grid button:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.admin-quick-grid button strong { font-family: var(--font-display); color: var(--text); font-size: 1.05rem; }
.admin-quick-grid button span { color: var(--muted); font-size: 0.9rem; }
.admin-card, .admin-workspace-panel { border-radius: 18px !important; }

/* Telegram integration panel */
.admin-telegram { max-width: 760px; }
.admin-tg-status {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px; margin: 14px 0 22px;
  font-weight: 600; font-size: 0.92rem; border: 1px solid var(--line);
}
.admin-tg-status.is-on { color: #57cc7a; background: color-mix(in srgb, #2ecc71 12%, transparent); border-color: color-mix(in srgb, #2ecc71 32%, transparent); }
.admin-tg-status.is-off { color: #e8a13a; background: color-mix(in srgb, #ffb43c 12%, transparent); border-color: color-mix(in srgb, #ffb43c 32%, transparent); }
.admin-tg-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.admin-tg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.admin-tg-actions .cta { width: auto !important; }
.admin-note-ok { margin-top: 14px; color: #57cc7a; font-weight: 600; }
.admin-tg-help {
  margin-top: 26px; padding: 20px 22px; border-radius: 14px;
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
  border: 1px solid var(--line);
}
.admin-tg-help h3 { font-family: var(--font-display); font-size: 1rem; margin-bottom: 12px; color: var(--text); }
.admin-tg-help ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.admin-tg-help strong { color: var(--text); }
.admin-tg-help em { color: var(--accent); font-style: normal; }

/* Reports tab */
.admin-reports { max-width: 780px; }
.admin-report-h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 26px 0 4px; color: var(--text); }
.admin-report-checks { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 16px; }
.admin-check {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--text);
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.admin-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.admin-check.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }

/* --- Fixed-nav clearance -------------------------------------------------
   The site nav is position:fixed, so every hero has to reserve room for it.
   The .hero rule earlier in this file sets padding-top via an !important
   clamp() that knows nothing about the nav's height — on a phone the nav is
   ~138px tall but the clamp only gave 48px, so the headline sat behind the
   nav. boot.js keeps --final-fixed-nav-height equal to the nav's measured
   height, so this always clears it. */
.hero {
  padding-top: calc(var(--final-fixed-nav-height, 96px) + clamp(20px, 3vw, 44px)) !important;
}

/* --- Mobile nav: show every link, never crop off the side ------------------
   The stylesheet turns the nav links into a horizontal scroll strip on small
   screens, so "Coaches / Spa / Membership" ran off the right edge and looked
   cropped. On phones we wrap them into centered rows instead, so every menu
   item is visible without swiping. */
@media (max-width: 760px) {
  .nav-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    white-space: normal !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
    padding: 6px 0 2px !important;
  }
  .nav-links a {
    flex: 0 0 auto !important;
  }
  .nav-links::-webkit-scrollbar { display: none !important; }
}