/*
Theme Name: Tirenex
Theme URI: https://tirenex.com
Author: Tirenex
Author URI: https://tirenex.com
Description: Custom theme for Tirenex — Tire Intelligence. Dark automotive aesthetic with teal accent branding. WooCommerce compatible.
Version: 1.1.5
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tirenex
Tags: e-commerce, woocommerce, custom-logo, custom-menu, featured-images
WooCommerce tested up to: 9.0
*/

/* ═══════════════════════════════════════════
   RESET & VARIABLES
   ═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --teal:    #1D9E75;
  --teal-lt: #5DCAA5;
  --teal-dk: #04342C;
  --teal-glow: rgba(29, 158, 117, 0.15);
  --ink:     #060b14;
  --ink-mid: #0d1520;
  --ink-soft:#111827;
  --text:    #e8e8e8;
  --text-dim:#9ca3af;
  --muted:   #6b7280;
  --border:  rgba(29,158,117,0.18);
  --border-subtle: rgba(255,255,255,0.06);
  --font-display: 'Syne', sans-serif;
  --font-mono: 'DM Mono', monospace;
}

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal-lt); text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--teal); }

img { max-width: 100%; height: auto; }

/* ═══════════════════════════════════════════
   GRID BACKGROUND
   ═══════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(29,158,117,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,158,117,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 48px;
  background: rgba(6, 11, 20, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}

/* Push header below admin bar when logged in */
.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.pill-mark {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--ink-mid);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 4px 16px 4px 10px;
  height: 36px;
}

.pill-mark .t-letter {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: bold;
  font-style: italic;
  color: var(--teal);
  line-height: 1;
}

.pill-mark .arcs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-left: 2px;
}

.pill-mark .arc {
  height: 2px;
  border-radius: 1px;
  background: var(--teal);
}

.pill-mark .arc:nth-child(1) { width: 8px; opacity: 0.9; }
.pill-mark .arc:nth-child(2) { width: 12px; opacity: 0.6; }
.pill-mark .arc:nth-child(3) { width: 16px; opacity: 0.35; }

.nav-wordmark {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 4px;
}

/* WordPress Nav Menu */
.main-navigation {
  display: flex;
  list-style: none;
  gap: 36px;
}

.main-navigation ul {
  display: flex;
  list-style: none;
  gap: 36px;
  margin: 0;
  padding: 0;
}

.main-navigation li { position: relative; }

.main-navigation a {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 1px;
  transition: color 0.3s;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  color: var(--teal-lt);
}

/* Dropdown submenus */
.main-navigation ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  gap: 0;
  background: var(--ink-mid);
  border: 1px solid var(--border-subtle);
  padding: 8px 0;
  min-width: 200px;
  margin-top: 12px;
}

/* Invisible hover bridge — fills the visual gap between parent item and dropdown
   so the dropdown doesn't vanish when moving the cursor toward it */
.main-navigation li > ul::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
}

/* Last top-level item opens dropdown leftward so it stays on screen */
.main-navigation > ul > li:last-child > ul,
.main-navigation > div > ul > li:last-child > ul {
  left: auto;
  right: 0;
}

.main-navigation li:hover > ul { display: flex; }

.main-navigation ul ul a {
  padding: 8px 20px;
  display: block;
  white-space: nowrap;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text);
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 4px;
}

.menu-toggle:hover { border-color: var(--border); }

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 140px 48px 80px;
  text-align: center;
  z-index: 1;
}

.hero::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(29,158,117,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--teal);
  letter-spacing: 2px;
  margin-bottom: 48px;
  opacity: 0;
  animation: fadeUp 0.8s 0.2s forwards;
}

.hero-logo {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeUp 0.8s 0.4s forwards;
}

.hero-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--ink-mid);
  border: 2px solid var(--border);
  border-radius: 56px;
  padding: 14px 36px 14px 24px;
  box-shadow: 0 0 60px rgba(29,158,117,0.1), inset 0 1px 0 rgba(255,255,255,0.03);
}

.hero-pill .t-letter {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 64px;
  font-weight: bold;
  font-style: italic;
  color: var(--teal);
  line-height: 1;
}

.hero-pill .arcs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 6px;
}

.hero-pill .arc {
  height: 3px;
  border-radius: 2px;
  background: var(--teal);
}

.hero-pill .arc:nth-child(1) { width: 14px; animation: arcPulse 2.5s 0s infinite; }
.hero-pill .arc:nth-child(2) { width: 22px; animation: arcPulse 2.5s 0.3s infinite; }
.hero-pill .arc:nth-child(3) { width: 30px; animation: arcPulse 2.5s 0.6s infinite; }

.hero-text-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.hero-wordmark {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 800;
  letter-spacing: 10px;
  color: var(--text);
  line-height: 1;
}

.hero-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--teal-lt);
  letter-spacing: 5px;
  opacity: 0.75;
}

.hero-tagline {
  font-size: 20px;
  color: var(--text-dim);
  max-width: 640px;
  line-height: 1.7;
  margin-bottom: 48px;
  opacity: 0;
  animation: fadeUp 0.8s 0.6s forwards;
}

.hero-tagline span { color: var(--teal-lt); font-weight: 600; }

.hero-cta {
  display: flex;
  gap: 16px;
  opacity: 0;
  animation: fadeUp 0.8s 0.8s forwards;
}

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--teal);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary:hover {
  background: var(--teal-lt);
  color: #fff;
  box-shadow: 0 0 30px rgba(29,158,117,0.3);
  transform: translateY(-2px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.3s;
}

.btn-secondary:hover {
  border-color: var(--border);
  color: var(--teal-lt);
}

/* ═══════════════════════════════════════════
   STATS BAR
   ═══════════════════════════════════════════ */
.stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.stat {
  padding: 40px 32px;
  text-align: center;
  border-right: 1px solid var(--border-subtle);
}

.stat:last-child { border-right: none; }

.stat-value {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 500;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 10px;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   SECTIONS (shared)
   ═══════════════════════════════════════════ */
.section {
  position: relative;
  z-index: 1;
  padding: 100px 48px;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--teal);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.section-title {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 60px;
  max-width: 520px;
}

.section-title span { color: var(--teal); }

/* ═══════════════════════════════════════════
   HOW IT WORKS
   ═══════════════════════════════════════════ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.step {
  background: var(--ink-mid);
  border: 1px solid var(--border-subtle);
  padding: 48px 36px;
  transition: all 0.4s;
}

.step:hover {
  border-color: var(--border);
  background: rgba(13, 21, 32, 0.8);
}

.step-number {
  font-family: var(--font-mono);
  font-size: 48px;
  font-weight: 500;
  color: var(--teal);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: 24px;
}

.step h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 14px;
}

.step p {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════
   FEATURES
   ═══════════════════════════════════════════ */
.features-section {
  position: relative;
  z-index: 1;
  padding: 100px 48px;
  background: var(--ink-mid);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin-top: 60px;
}

.feature-card {
  padding: 44px 36px;
  border: 1px solid var(--border-subtle);
  background: var(--ink);
  transition: all 0.4s;
}

.feature-card:hover { border-color: var(--border); }

.feature-icon {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--teal);
  letter-spacing: 2px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.feature-icon::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px var(--teal);
}

.feature-card h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}

.feature-card p {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════
   COMPATIBILITY
   ═══════════════════════════════════════════ */
.compat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 60px;
}

.compat-card {
  padding: 36px 32px;
  border: 1px solid var(--border-subtle);
  background: var(--ink-mid);
  transition: all 0.4s;
}

.compat-card:hover { border-color: var(--border); }

.compat-card h4 {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--teal);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.compat-card p {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════
   PRODUCT LINEUP
   ═══════════════════════════════════════════ */
.lineup-section {
  position: relative;
  z-index: 1;
  padding: 100px 48px;
  background: var(--ink-mid);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.lineup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 60px;
}

.lineup-card {
  padding: 40px 28px;
  border: 1px solid var(--border-subtle);
  background: var(--ink);
  text-align: center;
  transition: all 0.4s;
  position: relative;
}

.lineup-card:hover {
  border-color: var(--border);
  transform: translateY(-4px);
}

.lineup-card.featured {
  border-color: var(--teal);
  box-shadow: 0 0 40px rgba(29,158,117,0.1);
}

.lineup-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--ink);
  background: var(--teal);
  padding: 4px 16px;
  text-transform: uppercase;
}

.lineup-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  margin-top: 12px;
}

.lineup-card .lineup-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 2px;
  margin-bottom: 20px;
  display: block;
}

.lineup-card p {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 24px;
}

.lineup-price {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 1px;
}

/* ═══════════════════════════════════════════
   CTA / NOTIFY
   ═══════════════════════════════════════════ */
.cta-section {
  position: relative;
  z-index: 1;
  padding: 100px 48px;
  text-align: center;
}

.cta-section::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(29,158,117,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.cta-section h2 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 16px;
}

.cta-section h2 span { color: var(--teal); }

.cta-section > p {
  font-size: 16px;
  color: var(--text-dim);
  margin-bottom: 40px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.notify-form {
  display: flex;
  max-width: 440px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--ink-mid);
}

.notify-form input[type="email"] {
  flex: 1;
  padding: 14px 20px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
}

.notify-form input[type="email"]::placeholder { color: var(--muted); }

.notify-form button {
  padding: 14px 28px;
  background: var(--teal);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.notify-form button:hover { background: var(--teal-lt); }

#form-confirm {
  display: none;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--teal);
  margin-top: 24px;
  letter-spacing: 1px;
}

/* ═══════════════════════════════════════════
   DISCLAIMERS
   ═══════════════════════════════════════════ */
.disclaimers {
  position: relative;
  z-index: 1;
  padding: 20px 48px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(107,114,128,0.45);
  line-height: 1.8;
  letter-spacing: 0.5px;
  border-top: 1px solid var(--border-subtle);
}

.disclaimers p { margin-bottom: 2px; }

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.site-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 48px;
  border-top: 1px solid var(--border-subtle);
  background: var(--ink);
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--muted);
}

.footer-legal {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
}

/* ═══════════════════════════════════════════
   GENERIC PAGE CONTENT
   ═══════════════════════════════════════════ */
.page-content {
  position: relative;
  z-index: 1;
  padding: 140px 48px 80px;
  max-width: 960px;
  margin: 0 auto;
}

.page-content h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 12px;
}

.page-content h1 span { color: var(--teal); }

.page-content h2 {
  font-size: 28px;
  font-weight: 600;
  margin-top: 48px;
  margin-bottom: 16px;
}

.page-content h3 {
  margin-top: 0px;
  margin-bottom: 12px;
}

.page-content p {
  font-size: 16px;
  color: var(--text-dim);
  line-height: 1.8;
  margin-bottom: 20px;
}

.page-content ul, .page-content ol {
  color: var(--text-dim);
  margin-bottom: 20px;
  padding-left: 24px;
}

.page-content li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}

.page-content th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.page-content td {
  padding: 12px 16px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px;
}

.page-content img {
  margin: 0px 0;
}

/* ═══════════════════════════════════════════
   WOOCOMMERCE OVERRIDES
   ═══════════════════════════════════════════ */
.woocommerce-page .page-content {
  max-width: 1200px;
}

/* Product cards */
.woocommerce ul.products li.product {
  background: var(--ink-mid);
  border: 1px solid var(--border-subtle);
  padding: 20px;
  transition: all 0.4s;
  border-radius: 0;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--border);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  padding: 12px 0 6px;
}

.woocommerce ul.products li.product .price {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--teal) !important;
}

.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .price del { opacity: 0.5; }

.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .cart .button,
.woocommerce .checkout-button,
.woocommerce #payment #place_order {
  background: var(--teal) !important;
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 1px;
  border: none !important;
  border-radius: 6px;
  padding: 12px 24px;
  transition: all 0.3s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--teal-lt) !important;
  color: #fff !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--teal) !important;
}

/* Single product */

/* ─── Product layout: smaller image, wider summary ─── */
.woocommerce div.product div.images {
  width: 38% !important;
  float: left !important;
}

.woocommerce div.product div.summary {
  width: 58% !important;
  float: right !important;
}

@media (max-width: 768px) {
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary {
    width: 100% !important;
    float: none !important;
  }
}

/* ─── Short description (shows above add-ons, below price) ─── */
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 15px;
}

.woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--teal) !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text-dim);
  line-height: 1.7;
}

/* ─── Product image / placeholder ─── */
.woocommerce div.product div.images,
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image--placeholder,
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery .flex-viewport img,
.woocommerce div.product div.images .woocommerce-product-gallery__image a,
.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder {
  background: var(--ink-mid) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 4px;
}

/* ALL product images — clean, no borders, no filters */
.woocommerce div.product div.images img,
.woocommerce ul.products li.product a img,
.woocommerce-product-gallery img,
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image--placeholder img,
img.wp-post-image {
  background: var(--ink-mid) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  filter: none !important;
}

/* Gallery thumbnails */
.woocommerce div.product div.images .flex-control-thumbs li img {
  background: var(--ink-mid) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 4px !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  background: var(--ink-mid) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-dim) !important;
}

/* ─── Shop page sorting dropdown ─── */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select,
select.orderby {
  background: var(--ink-mid) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-subtle) !important;
  padding: 10px 14px !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  outline: none !important;
  appearance: auto;
  cursor: pointer;
}

.woocommerce .woocommerce-ordering select:focus {
  border-color: var(--teal) !important;
}

/* ─── Shop page result count ─── */
.woocommerce .woocommerce-result-count {
  color: var(--muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
}

/* ─── Stock status ─── */
.woocommerce div.product .stock,
.woocommerce div.product p.stock {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
}

.woocommerce div.product .stock.in-stock {
  color: var(--teal) !important;
}

.woocommerce div.product .stock.out-of-stock {
  color: #8b3a3a !important;
}

/* ─── SKU / Category / Tags meta ─── */
.woocommerce div.product .product_meta {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--border-subtle) !important;
}

.woocommerce div.product .product_meta a {
  color: var(--teal-lt) !important;
}

/* ─── Quantity input ─── */
.woocommerce .quantity input.qty,
.woocommerce div.product .quantity input.qty {
  background: var(--ink-mid) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-subtle) !important;
  font-family: var(--font-mono) !important;
  font-size: 16px !important;
  padding: 10px !important;
  width: 70px !important;
  text-align: center !important;
  border-radius: 4px !important;
}

/* ─── Product tabs ─── */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--border-subtle);
  list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-bottom-color: var(--border-subtle) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin: 0 24px 0 0;
  padding: 0 !important;
  border-radius: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: transparent !important;
  border-bottom-color: var(--teal) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 1px;
  padding: 12px 0;
  background: transparent !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--teal);
}

.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .panel h2 {
  color: var(--text-dim);
  line-height: 1.7;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════
   YITH PRODUCT ADD-ONS
   Override CSS variables that set white backgrounds, then target
   actual element IDs from the HTML source.
   ═══════════════════════════════════════════ */

/* Kill the YITH CSS variables that force white */
:root,
.yith-wapo-container,
.single-product {
  --yith-wapo-block-background-color: #0d1520 !important;
  --yith-wapo-price-box-colors-background: #0d1520 !important;
  --yith-wapo-price-box-colors-text: #e8e8e8 !important;
  --yith-wapo-uploads-file-colors-background: #111827 !important;
  --yith-wapo-uploads-file-colors-border: rgba(255,255,255,0.06) !important;
  --yith-wapo-accent-color-color: #1D9E75 !important;
  --yith-wapo-form-border-color-color: rgba(255,255,255,0.06) !important;
}

/* Outer wrapper — transparent */
#yith-wapo-container,
.yith-wapo-container {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Inner addon blocks — override inline style="background-color: #ffffff;" */
#yith-wapo-block-1,
#yith-wapo-block-2,
#yith-wapo-block-3,
.yith-wapo-block {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#yith-wapo-addon-1,
#yith-wapo-addon-2,
#yith-wapo-addon-3,
.yith-wapo-addon,
.yith-wapo-addon[style] {
  background: var(--ink-mid) !important;
  background-color: var(--ink-mid) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 4px !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
  color: var(--text) !important;
}

/* Remove inner box borders from nested containers */
.yith-wapo-addon .options-container,
.yith-wapo-addon .options,
.yith-wapo-addon .addon-header {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Addon headings */
.wapo-addon-title,
.yith-wapo-addon h3,
.yith-wapo-addon h3 span {
  color: var(--teal) !important;
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

.wapo-addon-description {
  color: var(--text-dim) !important;
  font-size: 13px !important;
}

/* Individual options */
.yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-radio .yith-wapo-option {
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  background: transparent !important;
  margin-left: 30px !important;
  line-height: 20px !important;
}

.yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-radio .yith-wapo-option:last-child {
  border-bottom: none !important;
}

.yith-wapo-option label,
.yith-wapo-label {
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
}

.yith-wapo-option .description,
.yith-wapo-option p.description {
  color: var(--text-dim) !important;
  font-size: 13px !important;
}

/* Prices */
.yith-wapo-option .option-price,
.yith-wapo-option small.option-price {
  color: var(--teal-lt) !important;
  font-family: var(--font-mono) !important;
}

.yith-wapo-option del { color: var(--muted) !important; }

/* Radio/checkbox */
.yith-wapo-option input[type="radio"],
.yith-wapo-option input[type="checkbox"] {
  accent-color: var(--teal) !important;
}

.radiobutton { border-color: var(--border-subtle) !important; }
.radiobutton.checked { border-color: var(--teal) !important; }

/* ─── YITH Price summary box — actual ID is #wapo-total-price-table ─── */
#wapo-total-price-table,
div#wapo-total-price-table,
#wapo-total-price-table[style] {
  background: var(--ink-mid) !important;
  background-color: var(--ink-mid) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 4px !important;
  padding: 20px !important;
  margin: 20px 0 !important;
}

#wapo-total-price-table table,
#wapo-total-price-table table.all {
  background: transparent !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

#wapo-total-price-table tr,
#wapo-total-price-table td,
#wapo-total-price-table th {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 12px 16px !important;
}

#wapo-total-price-table tr:last-child td,
#wapo-total-price-table tr:last-child th {
  border-bottom: none !important;
}

#wapo-total-price-table th {
  color: var(--teal) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  font-weight: 500 !important;
  text-align: left !important;
}

#wapo-total-price-table td {
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  text-align: right !important;
}

/* Cart */
.woocommerce table.shop_table {
  border: 1px solid var(--border-subtle);
  border-radius: 0;
}

.woocommerce table.shop_table th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--ink-mid);
  border-bottom: 1px solid var(--border-subtle);
  padding: 14px 16px;
}

.woocommerce table.shop_table td {
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--ink);
  padding: 14px 16px;
}

.woocommerce .quantity .qty {
  background: var(--ink-mid);
  color: var(--text);
  border: 1px solid var(--border-subtle);
  padding: 8px;
  font-family: var(--font-mono);
}

/* Checkout */
.woocommerce form .form-row label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-dim);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: var(--ink-mid);
  color: var(--text);
  border: 1px solid var(--border-subtle);
  padding: 12px 16px;
  font-family: var(--font-display);
  border-radius: 4px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--teal);
  outline: none;
  box-shadow: 0 0 0 2px var(--teal-glow);
}

/* Notices */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  background: var(--ink-mid);
  border-top-color: var(--teal);
  color: var(--text-dim);
}

.woocommerce .woocommerce-error {
  background: var(--ink-mid);
  border-top-color: #dc2626;
  color: var(--text-dim);
}

/* My Account */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid var(--border-subtle);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 1px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--teal);
  background: var(--ink-mid);
}

/* Star ratings */
.woocommerce .star-rating span::before { color: var(--teal); }

/* ═══════════════════════════════════════════
   BBPRESS FORUMS
   ═══════════════════════════════════════════ */

/* Forum wrapper */
#bbpress-forums {
  font-family: var(--font-display);
  background: transparent;
  color: var(--text);
  padding: 0;
  margin-top: 24px;
}

#bbpress-forums * { box-sizing: border-box; }

/* Breadcrumb */
.bbp-breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 24px;
  padding: 0;
}

.bbp-breadcrumb a {
  color: var(--teal-lt);
  text-decoration: none;
}

.bbp-breadcrumb a:hover { color: var(--teal); }

.bbp-breadcrumb .bbp-breadcrumb-sep { color: var(--muted); margin: 0 8px; }

/* Search form */
#bbp-search-form {
  display: flex;
  max-width: 400px;
  margin-left: auto;
  margin-bottom: 24px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
  background: var(--ink-mid);
}

#bbp-search-form label { flex: 1; display: block; }

#bbp_search {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 16px;
  outline: none;
}

#bbp_search::placeholder { color: var(--muted); }

#bbp_search_submit {
  background: var(--teal);
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.3s;
}

#bbp_search_submit:hover { background: var(--teal-lt); }

/* Main list container */
#bbpress-forums ul.bbp-forums,
#bbpress-forums ul.bbp-topics,
#bbpress-forums ul.bbp-replies,
#bbpress-forums ul.bbp-lead-topic {
  background: var(--ink-mid);
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 0;
  margin: 0 0 24px;
  list-style: none;
}

/* Header row */
#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-footer {
  background: var(--ink);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 14px 20px;
}

#bbpress-forums li.bbp-footer {
  border-top: 1px solid var(--border-subtle);
  border-bottom: none;
  color: var(--muted);
}

#bbpress-forums li.bbp-header ul li,
#bbpress-forums li.bbp-footer ul li {
  color: var(--teal);
}

/* Body rows */
#bbpress-forums li.bbp-body ul.forum,
#bbpress-forums li.bbp-body ul.topic,
#bbpress-forums li.bbp-body ul.bbp-forum-info,
#bbpress-forums li.bbp-body > ul {
  background: var(--ink-mid);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-dim);
  padding: 18px 20px;
  margin: 0;
  list-style: none;
}

#bbpress-forums li.bbp-body > ul:first-child { border-top: none; }

#bbpress-forums li.bbp-body > ul:hover {
  background: rgba(13, 21, 32, 0.6);
}

/* Forum/topic titles */
#bbpress-forums li.bbp-forum-info,
#bbpress-forums li.bbp-topic-title {
  padding: 0;
}

#bbpress-forums .bbp-forum-title,
#bbpress-forums a.bbp-topic-permalink,
#bbpress-forums .bbp-topic-title a {
  color: var(--teal-lt);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s;
}

#bbpress-forums .bbp-forum-title:hover,
#bbpress-forums a.bbp-topic-permalink:hover,
#bbpress-forums .bbp-topic-title a:hover {
  color: var(--teal);
}

#bbpress-forums .bbp-forum-content,
#bbpress-forums .bbp-topic-content {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 6px;
}

/* Counts columns */
#bbpress-forums .bbp-forum-topic-count,
#bbpress-forums .bbp-forum-reply-count,
#bbpress-forums .bbp-topic-voice-count,
#bbpress-forums .bbp-topic-reply-count {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: center;
}

/* Freshness column */
#bbpress-forums .bbp-forum-freshness,
#bbpress-forums .bbp-topic-freshness {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
}

#bbpress-forums .bbp-forum-freshness a,
#bbpress-forums .bbp-topic-freshness a {
  color: var(--teal-lt);
}

#bbpress-forums .bbp-author-avatar,
#bbpress-forums .bbp-author-name {
  color: var(--text-dim);
}

/* Topic/reply author box */
#bbpress-forums div.bbp-reply-author,
#bbpress-forums div.bbp-topic-author {
  background: var(--ink);
  border-right: 1px solid var(--border-subtle);
  padding: 16px;
  text-align: center;
}

#bbpress-forums .bbp-author-avatar img {
  border-radius: 50%;
  border: 2px solid var(--border-subtle);
}

#bbpress-forums .bbp-author-name {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--teal);
  letter-spacing: 1px;
  display: block;
  margin-top: 8px;
}

#bbpress-forums .bbp-author-role,
#bbpress-forums div.bbp-reply-author .bbp-author-role {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Reply/topic content area */
#bbpress-forums div.bbp-reply-content,
#bbpress-forums div.bbp-topic-content {
  background: var(--ink-mid);
  color: var(--text);
  padding: 20px 24px;
  line-height: 1.7;
  border-bottom: 1px solid var(--border-subtle);
}

#bbpress-forums div.bbp-reply-content p,
#bbpress-forums div.bbp-topic-content p {
  color: var(--text);
  margin-bottom: 12px;
}

#bbpress-forums div.bbp-reply-content a,
#bbpress-forums div.bbp-topic-content a {
  color: var(--teal-lt);
}

#bbpress-forums div.bbp-reply-content code,
#bbpress-forums div.bbp-topic-content code {
  background: var(--ink);
  color: var(--teal-lt);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 13px;
}

#bbpress-forums div.bbp-reply-content pre,
#bbpress-forums div.bbp-topic-content pre {
  background: var(--ink);
  border: 1px solid var(--border-subtle);
  padding: 16px;
  border-radius: 4px;
  overflow-x: auto;
  color: var(--text);
}

/* Reply header with timestamp & permalink */
#bbpress-forums div.bbp-reply-header,
#bbpress-forums div.bbp-topic-header {
  background: var(--ink);
  border-bottom: 1px solid var(--border-subtle);
  padding: 10px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 1px;
}

#bbpress-forums div.bbp-reply-header a,
#bbpress-forums div.bbp-topic-header a {
  color: var(--teal-lt);
}

/* Admin links (edit, trash, etc.) */
#bbpress-forums div.bbp-reply-header .bbp-admin-links,
#bbpress-forums div.bbp-topic-header .bbp-admin-links,
#bbpress-forums .bbp-admin-links {
  float: right;
  color: var(--muted);
  font-size: 11px;
}

#bbpress-forums .bbp-admin-links a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 6px;
  transition: color 0.3s;
}

#bbpress-forums .bbp-admin-links a:hover { color: var(--teal); }

/* Pagination */
#bbpress-forums .bbp-pagination,
#bbpress-forums .bbp-pagination-count,
#bbpress-forums .bbp-pagination-links {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 1px;
  padding: 12px 0;
}

#bbpress-forums .bbp-pagination-links a,
#bbpress-forums .bbp-pagination-links span {
  display: inline-block;
  padding: 6px 12px;
  margin: 0 2px;
  background: var(--ink-mid);
  border: 1px solid var(--border-subtle);
  color: var(--text-dim);
  text-decoration: none;
  border-radius: 3px;
  transition: all 0.3s;
}

#bbpress-forums .bbp-pagination-links a:hover {
  border-color: var(--teal);
  color: var(--teal);
}

#bbpress-forums .bbp-pagination-links .current {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* Topic & reply forms */
#bbpress-forums fieldset.bbp-form {
  background: var(--ink-mid);
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 24px;
  margin-top: 32px;
}

#bbpress-forums fieldset.bbp-form legend {
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0 12px;
}

#bbpress-forums fieldset.bbp-form label {
  display: block;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 6px;
  margin-top: 14px;
}

#bbpress-forums fieldset.bbp-form input[type="text"],
#bbpress-forums fieldset.bbp-form input[type="password"],
#bbpress-forums fieldset.bbp-form input[type="email"],
#bbpress-forums fieldset.bbp-form input[type="url"],
#bbpress-forums fieldset.bbp-form textarea,
#bbpress-forums fieldset.bbp-form select,
#bbp_topic_title,
#bbp_topic_content,
#bbp_reply_content,
#bbp_topic_tags {
  background: var(--ink) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-subtle) !important;
  padding: 10px 14px !important;
  font-family: var(--font-display);
  font-size: 14px;
  border-radius: 4px;
  width: 100%;
  outline: none;
  transition: border-color 0.3s;
}

#bbpress-forums fieldset.bbp-form input[type="text"]:focus,
#bbpress-forums fieldset.bbp-form textarea:focus,
#bbp_topic_title:focus,
#bbp_topic_content:focus,
#bbp_reply_content:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 2px var(--teal-glow);
}

#bbpress-forums fieldset.bbp-form textarea { min-height: 140px; resize: vertical; }

#bbpress-forums button,
#bbpress-forums button[type="submit"],
#bbp_topic_submit,
#bbp_reply_submit {
  background: var(--teal);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  border: none;
  border-radius: 6px;
  padding: 12px 28px;
  cursor: pointer;
  transition: background 0.3s;
}

#bbpress-forums button:hover,
#bbp_topic_submit:hover,
#bbp_reply_submit:hover {
  background: var(--teal-lt);
}

/* TinyMCE editor container if active */
#bbpress-forums .wp-editor-container {
  background: var(--ink) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 4px;
}

#bbpress-forums .wp-editor-container textarea { background: var(--ink) !important; color: var(--text) !important; }

/* Quicktag buttons */
#bbpress-forums .quicktags-toolbar {
  background: var(--ink-mid);
  border-bottom: 1px solid var(--border-subtle);
  padding: 6px;
}

#bbpress-forums .quicktags-toolbar input {
  background: var(--ink-mid) !important;
  color: var(--text-dim) !important;
  border: 1px solid var(--border-subtle) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
  margin: 2px !important;
}

/* Forum subscribe / favorite toggle */
#bbpress-forums .bbp-topic-subscribe,
#bbpress-forums .bbp-topic-favorite,
#bbpress-forums .bbp-forum-subscribe {
  display: inline-block;
}

#bbpress-forums .bbp-topic-subscribe a,
#bbpress-forums .bbp-topic-favorite a,
#bbpress-forums .bbp-forum-subscribe a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--teal-lt);
  padding: 6px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  text-decoration: none;
  margin-right: 6px;
  transition: all 0.3s;
}

#bbpress-forums .bbp-topic-subscribe a:hover,
#bbpress-forums .bbp-topic-favorite a:hover,
#bbpress-forums .bbp-forum-subscribe a:hover {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

/* Notices */
#bbpress-forums div.bbp-template-notice,
#bbpress-forums div.indicator-hint {
  background: var(--ink-mid);
  border-left: 3px solid var(--teal);
  color: var(--text-dim);
  padding: 12px 18px;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  margin-bottom: 16px;
}

#bbpress-forums div.bbp-template-notice.error,
#bbpress-forums div.bbp-template-notice.warning {
  border-left-color: #dc2626;
}

/* User profile */
#bbpress-forums #bbp-user-wrapper {
  color: var(--text);
}

#bbpress-forums #bbp-user-navigation ul {
  list-style: none;
  padding: 0;
}

#bbpress-forums #bbp-user-navigation li {
  border-bottom: 1px solid var(--border-subtle);
}

#bbpress-forums #bbp-user-navigation li a {
  display: block;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 1px;
  text-decoration: none;
}

#bbpress-forums #bbp-user-navigation li.current a,
#bbpress-forums #bbp-user-navigation li a:hover {
  color: var(--teal);
  background: var(--ink-mid);
}

/* Login / register form */
#bbpress-forums #bbp-login-form,
#bbpress-forums #bbp-register-form,
#bbpress-forums #bbp-lost-pass-form {
  background: var(--ink-mid);
  border: 1px solid var(--border-subtle);
  padding: 24px;
  max-width: 420px;
}

#bbpress-forums .bbp-login-form label,
#bbpress-forums .bbp-register-form label {
  display: block;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 6px;
  margin-top: 14px;
}

/* Tables generically used by bbPress */
#bbpress-forums table,
#bbpress-forums th,
#bbpress-forums td {
  border-color: var(--border-subtle);
  color: var(--text-dim);
}

/* Clean up any leftover WordPress/bbPress default backgrounds */
#bbpress-forums .bbp-topics-front,
#bbpress-forums .bbp-forums-list,
.bbp-body,
.bbp-topic-title,
.forum-titles,
.bbp-forum-info {
  background: transparent !important;
}

/* ═══════════════════════════════════════════
   AWESOME SUPPORT (TICKETS)
   Uses actual selectors from plugin HTML: .wpas-table,
   .wpas-ticket-replies, .wpas-reply-single (tr), iframe#wpas-reply-wysiwyg_ifr
   ═══════════════════════════════════════════ */

/* Top action buttons row */
.wpas-ticket-buttons-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 32px;
}

/* Every .wpas-btn button/link */
.wpas-btn,
a.wpas-btn,
.wpas-btn-default,
a.wpas-btn-default,
button.wpas-btn-default,
.wpas-link-ticketlist,
.wpas-link-ticketnew,
.wpas-link-notifications,
.wpas-link-privacy,
.wpas-link-logout {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 10px 18px !important;
  background: var(--ink-mid) !important;
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  text-decoration: none !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 4px !important;
  transition: all 0.3s !important;
  cursor: pointer;
  text-transform: uppercase;
  line-height: 1.4 !important;
}

.wpas-btn:hover,
a.wpas-btn:hover,
.wpas-btn-default:hover,
button.wpas-btn-default:hover {
  border-color: var(--teal) !important;
  color: var(--teal) !important;
  background: var(--ink-mid) !important;
}

/* Primary submit button (Reply) */
#wpas-new-reply button[type="submit"],
#wpas-new-reply button.wpas-btn,
button[name="wpas-submit"] {
  background: var(--teal) !important;
  color: #fff !important;
  border-color: var(--teal) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  font-size: 14px !important;
}

#wpas-new-reply button[type="submit"]:hover,
button[name="wpas-submit"]:hover {
  background: var(--teal-lt) !important;
  border-color: var(--teal-lt) !important;
  color: #fff !important;
}

/* Tables — header row (ID, Status, Date, Product, Department) */
.wpas-table,
.wpas .wpas-table,
table.wpas-table,
.wpas-table-responsive table,
.wpas-ticket-details-header {
  width: 100% !important;
  background: transparent !important;
  border-collapse: collapse !important;
  border: none !important;
  margin-bottom: 24px;
}

.wpas-table thead,
.wpas-table thead tr,
.wpas-table thead tr th,
.wpas-ticket-details-header thead,
.wpas-ticket-details-header thead tr,
.wpas-ticket-details-header thead tr th {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--teal) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  text-align: left !important;
  padding: 14px 16px !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 500 !important;
}

.wpas-table tbody,
.wpas-table tbody tr,
.wpas-table tbody tr td,
.wpas-ticket-details-header tbody,
.wpas-ticket-details-header tbody tr,
.wpas-ticket-details-header tbody tr td {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-dim) !important;
  padding: 14px 16px !important;
  border: none !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  font-size: 14px;
}

/* MY TICKETS list — kill the ugly red/warning row backgrounds
   The plugin applies .status-X class to the <tr> */
.wpas-table tbody tr,
.wpas-table tbody tr.status-open,
.wpas-table tbody tr.status-queued,
.wpas-table tbody tr.status-hold,
.wpas-table tbody tr.status-processing,
.wpas-table tbody tr.status-in-progress,
.wpas-table tbody tr.status-closed,
.wpas-table tbody tr[class*="status-"] {
  background: transparent !important;
  background-color: transparent !important;
}

.wpas-table tbody tr[class*="status-"]:hover,
.wpas-table tbody tr:hover {
  background: rgba(13, 21, 32, 0.5) !important;
  background-color: rgba(13, 21, 32, 0.5) !important;
}

.wpas-table tbody tr td a,
.wpas-table a {
  color: var(--teal-lt) !important;
  text-decoration: none !important;
}

.wpas-table tbody tr td a:hover {
  color: var(--teal) !important;
}

/* Status label — override inline background-color from admin settings */
.wpas-label,
.wpas-label-status,
span.wpas-label,
span.wpas-label-status {
  display: inline-block !important;
  padding: 4px 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
  border-radius: 3px !important;
  color: #fff !important;
  line-height: 1.4 !important;
  background: var(--teal) !important;
  background-color: var(--teal) !important;
}

/* ─── THE REPLY THREAD ───
   Actually a <table class="wpas-ticket-replies"> with <tr class="wpas-reply-single"> rows
   NOT .wpas-reply divs like I assumed earlier */

table.wpas-ticket-replies,
.wpas-ticket-replies {
  width: 100% !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  overflow-y: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
  border: none !important;
  margin-bottom: 24px !important;
}

.wpas-ticket-replies colgroup,
.wpas-ticket-replies col {
  background: transparent !important;
}

.wpas-ticket-replies tbody {
  background: transparent !important;
}

/* Each reply row */
.wpas-reply-single,
tr.wpas-reply-single {
  background: var(--ink-mid) !important;
  background-color: var(--ink-mid) !important;
}

.wpas-reply-single td,
tr.wpas-reply-single td {
  background: var(--ink-mid) !important;
  background-color: var(--ink-mid) !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 18px 20px !important;
  vertical-align: top !important;
}

.wpas-reply-single td:first-child {
  border-left: 1px solid var(--border-subtle) !important;
  border-radius: 4px 0 0 4px;
}

.wpas-reply-single td:last-child {
  border-right: 1px solid var(--border-subtle) !important;
  border-radius: 0 4px 4px 0;
}

/* Avatar */
.wpas-user-profile {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

.wpas-user-profile img,
.wpas-reply-single img.avatar,
.wpas-user-profile img.avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border-subtle) !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  object-fit: cover !important;
}

/* Avatar column width — keep it tight */
.wpas-reply-single td:first-child {
  width: 72px !important;
  padding: 18px 12px !important;
  vertical-align: top !important;
}

/* Reply meta (username + timestamp) */
.wpas-reply-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
  background: transparent !important;
}

.wpas-reply-user,
.wpas-reply-user strong,
.wpas-profilename {
  color: var(--teal) !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  background: transparent !important;
}

.wpas-reply-time,
.wpas-timestamp,
.wpas-human-date,
.wpas-date-ago {
  color: var(--muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-style: italic !important;
  background: transparent !important;
}

.wpas-human-date { display: none !important; }
.wpas-date-ago { display: inline !important; }

/* Reply body */
.wpas-reply-content,
.wpas-reply-content p,
.wpas-break-words,
.ticket-reply {
  color: var(--text) !important;
  background: transparent !important;
  background-color: transparent !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.wpas-reply-content p {
  margin-bottom: 10px !important;
}

.wpas-reply-content a {
  color: var(--teal-lt) !important;
}

/* Write a reply heading */
#wpas-new-reply h3,
h3 + #wpas-new-reply,
.entry-content h3,
.wpas h3 {
  font-family: var(--font-display) !important;
  color: var(--teal) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  margin: 32px 0 16px !important;
}

/* ─── THE WHITE EDITOR — TinyMCE iframe + textarea ─── */

/* Wrapper */
.wp-editor-wrap,
.wp-editor-container,
#wp-wpas-reply-wysiwyg-wrap,
#wp-wpas-reply-wysiwyg-editor-container {
  background: var(--ink-mid) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 4px !important;
}

/* TinyMCE toolbar - where the B I U buttons live */
.mce-panel,
.mce-toolbar-grp,
.mce-top-part,
.mce-toolbar-grp .mce-container-body,
.mce-container.mce-panel {
  background: var(--ink-soft) !important;
  background-color: var(--ink-soft) !important;
  border-color: var(--border-subtle) !important;
}

.mce-btn,
.mce-btn button,
.mce-widget button {
  background: transparent !important;
  color: var(--text-dim) !important;
}

.mce-btn:hover,
.mce-btn:hover button {
  background: var(--ink) !important;
  color: var(--teal) !important;
}

/* Toolbar icons */
.mce-i-bold, .mce-i-italic, .mce-i-underline,
.mce-i-strikethrough, .mce-i-hr, .mce-i-bullist,
.mce-i-numlist, .mce-i-link, .mce-i-unlink {
  color: var(--text-dim) !important;
}

/* The iframe itself — hide its white background with outer wrap styling.
   The iframe CONTENT is white because it loads the editor's own stylesheet
   and we can't reach inside from here. So we make the iframe background
   transparent via its wrapper and force the iframe body styling via TinyMCE
   content_css (handled in functions.php). */
#wpas-reply-wysiwyg_ifr,
iframe#wpas-reply-wysiwyg_ifr {
  background: var(--ink-mid) !important;
  background-color: var(--ink-mid) !important;
}

.mce-edit-area {
  background: var(--ink-mid) !important;
  border-color: var(--border-subtle) !important;
}

.mce-statusbar,
.mce-statusbar .mce-container-body {
  background: var(--ink-soft) !important;
  border-color: var(--border-subtle) !important;
}

.mce-path-item,
.mce-path {
  color: var(--muted) !important;
}

/* Raw textarea (non-wysiwyg mode) */
.wpas-wysiwyg,
.wp-editor-area,
textarea.wpas-form-control,
#wpas-reply-wysiwyg {
  background: var(--ink-mid) !important;
  color: var(--text) !important;
  border-color: var(--border-subtle) !important;
  font-family: var(--font-display) !important;
}

/* Attachments section */
#wpas_files_wrapper,
.wpas-form-group {
  background: transparent !important;
  margin-top: 16px;
}

#wpas_files_wrapper label,
.wpas-form-group label {
  display: block !important;
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  margin-bottom: 8px !important;
}

#wpas_files {
  background: var(--ink-mid) !important;
  color: var(--text-dim) !important;
  border: 1px solid var(--border-subtle) !important;
  padding: 10px !important;
  border-radius: 4px !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  width: 100% !important;
}

#wpas_files::-webkit-file-upload-button,
#wpas_files::file-selector-button {
  background: var(--ink) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-subtle) !important;
  padding: 6px 14px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  margin-right: 12px !important;
  text-transform: uppercase;
}

#wpas_files::-webkit-file-upload-button:hover,
#wpas_files::file-selector-button:hover {
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}

.wpas-help-block {
  color: var(--muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  line-height: 1.7 !important;
  margin-top: 10px !important;
}

.wpas-help-block code {
  background: var(--ink-mid) !important;
  color: var(--teal-lt) !important;
  padding: 1px 6px !important;
  border-radius: 2px !important;
  font-size: 11px !important;
}

/* Close ticket checkbox */
.checkbox,
.checkbox label {
  color: var(--text-dim) !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  margin: 16px 0 !important;
}

.checkbox input[type="checkbox"] {
  margin-right: 8px !important;
}

/* Full-width ticket page content */
body.single-ticket .page-content,
body.ticket-template-default .page-content,
body[class*="postid-"][class*="single-ticket"] .page-content {
  max-width: 100% !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
}

/* Kill any residual white backgrounds from plugin defaults */
.wpas,
.wpas-ticket-details,
.wpas-table-responsive,
.wpas .entry-content,
#wpas-new-reply {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text) !important;
}

/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes arcPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .lineup-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .site-header { padding: 16px 24px; }
  .main-navigation { display: none; }
  .main-navigation.toggled { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--ink-mid); border-bottom: 1px solid var(--border-subtle); padding: 16px 24px; }
  .main-navigation.toggled ul { flex-direction: column; gap: 16px; }
  .menu-toggle { display: block; }
  .nav-wordmark { font-size: 15px; letter-spacing: 3px; }

  .hero { padding: 120px 24px 60px; }
  .hero-logo { flex-direction: column; gap: 24px; }
  .hero-text-lockup { align-items: center; text-align: center; }
  .hero-wordmark { font-size: 36px; letter-spacing: 6px; }
  .hero-tagline { font-size: 17px; }
  .hero-cta { flex-direction: column; align-items: center; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-bottom: 1px solid var(--border-subtle); }
  .stat-value { font-size: 28px; }

  .section, .features-section, .lineup-section { padding: 60px 24px; }
  .section-title { font-size: 28px; }

  .steps { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .compat-grid { grid-template-columns: 1fr; }
  .lineup-grid { grid-template-columns: 1fr; }

  .cta-section { padding: 60px 24px; }
  .cta-section h2 { font-size: 28px; }

  .notify-form { flex-direction: column; }
  .notify-form input[type="email"] {
    border-bottom: 1px solid var(--border-subtle);
    text-align: center;
  }

  .site-footer {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 24px;
  }

  .page-content { padding: 120px 24px 60px; }
  .disclaimers { padding: 20px 24px 12px; }
}

/* ═══════════════════════════════════════════
   WORDPRESS CORE CLASSES
   ═══════════════════════════════════════════ */
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin: 24px auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.screen-reader-text { clip: rect(1px,1px,1px,1px); position: absolute; height: 1px; width: 1px; overflow: hidden; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }