/* ==========================================================================
   FTW RACING - LEATT STYLE DARK THEME (WOOCOMMERCE & ELEMENTOR)
   ========================================================================== */

/* 1. Global Color Palette & Variables */
:root {
  --ftw-black: #0A0A0A;
  --ftw-dark-gray: #141414;
  --ftw-card-bg: #1A1A1A;
  --ftw-border: #2A2A2A;
  --ftw-accent-red: #FF3300; /* Leatt / Race Accent */
  --ftw-accent-hover: #E02E00;
  --ftw-text-main: #FFFFFF;
  --ftw-text-muted: #A0A0A0;
  --ftw-font-header: 'Oswald', 'Impact', sans-serif;
  --ftw-font-body: 'Inter', system-ui, sans-serif;
}

/* 2. Global Dark Body Base */
body, 
.site, 
#page, 
.page-template-default,
.woocommerce-page {
  background-color: var(--ftw-black) !important;
  color: var(--ftw-text-main) !important;
  font-family: var(--ftw-font-body);
}

/* Headings Styling */
h1, h2, h3, h4, h5, h6, 
.elementor-heading-title, 
.product_title {
  font-family: var(--ftw-font-header) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ftw-text-main) !important;
}

/* 3. WooCommerce Product Cards (Grid Styling) */
.woocommerce ul.products li.product,
.woodmart-spacer,
.product-grid-item {
  background-color: var(--ftw-card-bg) !important;
  border: 1px solid var(--ftw-border) !important;
  border-radius: 4px;
  padding: 15px !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--ftw-accent-red) !important;
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(255, 51, 0, 0.15) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  color: var(--ftw-text-main) !important;
  font-size: 1.1rem !important;
  margin-top: 10px !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
  color: var(--ftw-accent-red) !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
}

/* 4. Technical Badges (e.g., HydraDri, Carbon, Sale) */
.woocommerce span.onsale,
.product-label,
.ftw-tech-badge {
  background-color: var(--ftw-accent-red) !important;
  color: #FFFFFF !important;
  font-family: var(--ftw-font-header);
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px !important;
  border-radius: 2px !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.5px;
}

/* 5. Buttons & Primary CTAs */
.woocommerce #respond input#submit, 
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button,
.elementor-button {
  background-color: var(--ftw-accent-red) !important;
  color: #FFFFFF !important;
  font-family: var(--ftw-font-header) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  border-radius: 2px !important;
  padding: 12px 28px !important;
  border: none !important;
  transition: background-color 0.2s ease !important;
}

.woocommerce a.button:hover, 
.woocommerce button.button:hover,
.elementor-button:hover {
  background-color: var(--ftw-accent-hover) !important;
  color: #FFFFFF !important;
}

/* Secondary Button (Outline Style) */
.ftw-btn-outline {
  background-color: transparent !important;
  border: 2px solid var(--ftw-text-main) !important;
  color: var(--ftw-text-main) !important;
}

.ftw-btn-outline:hover {
  background-color: var(--ftw-text-main) !important;
  color: var(--ftw-black) !important;
}

/* 6. Sidebar Filters (FacetWP / WooCommerce Sidebar) */
.widget_layered_nav,
.facetwp-facet,
.woocommerce-sidebar {
  background-color: var(--ftw-dark-gray);
  padding: 20px;
  border: 1px solid var(--ftw-border);
  border-radius: 4px;
}

.widget-title, 
.facetwp-facet-title {
  border-bottom: 2px solid var(--ftw-accent-red);
  padding-bottom: 8px;
  margin-bottom: 15px;
}

/* 7. Product Detail Page (PDP) Customization */
.woocommerce div.product .product_title {
  font-size: 2.2rem !important;
  margin-bottom: 10px;
}

.woocommerce-tabs ul.tabs li {
  background-color: var(--ftw-dark-gray) !important;
  border: 1px solid var(--ftw-border) !important;
}

.woocommerce-tabs ul.tabs li.active {
  background-color: var(--ftw-card-bg) !important;
  border-bottom: 2px solid var(--ftw-accent-red) !important;
}

.woocommerce-tabs .panel {
  background-color: var(--ftw-card-bg);
  padding: 20px;
  border: 1px solid var(--ftw-border);
}