/* ==========================================================================
   GLOBAL DESIGN TOKENS - DARK TECH AUTOMOTIVE (GLASSMORPHISM 3D)
   ========================================================================== */

/* Importação de Fontes Futuristas Automotivas via Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Orbitron:wght@600;800;900&family=Rajdhani:wght@500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');

:root {
  /* Identidade Visual / Cores Principais */
  --brand-primary: #2563eb;
  --brand-primary-hover: #3b82f6;
  --brand-glow: rgba(37, 99, 235, 0.4);

  /* Fundo Global Profundo & Superfícies Transparentes */
  --bg-main: #060911;
  --bg-surface: rgba(19, 27, 46, 0.4);
  --bg-surface-hover: rgba(30, 41, 59, 0.6);

  /* Sistema Glassmorphic (Transparências e Vidro) */
  --glass-bg: rgba(15, 23, 42, 0.55);
  --glass-bg-hover: rgba(23, 32, 54, 0.75);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(59, 130, 246, 0.4);
  --glass-blur: blur(12px);

  /* Tipografia & Status */
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border-color: rgba(255, 255, 255, 0.1);
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #06b6d4;
  --white: #ffffff;

  /* Hierarquia Tipográfica Futurista Automotiva */
  --font-tech: 'Rajdhani', 'Chakra Petch', sans-serif;      /* Badges, Preços, Inputs e Botões */
  --font-display: var(--font-tech);                         /* Títulos e Headings usam a Font Tech */
  --font-sans: 'Space Grotesk', -apple-system, sans-serif;  /* Texto de leitura, corpo e menus */

  --font-weight-normal: 400;
  --font-weight-semi: 600;
  --font-weight-bold: 800;
  --size-text-sm: 0.85rem;
  --size-text-md: 0.95rem;

  /* Bordas e Cantos */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --border-width-thin: 1px;

  /* Sombras & Brilhos Neon 3D */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.25);

  /* Configuração Global de Respiro e Grid */
  --site-max-width: 1280px;
  --site-padding-mobile: 24px;
  --site-padding-tablet: 40px;
  --site-padding-desktop: 64px;
  --site-margin-center: 0 auto;
  --site-width-full: 100%;

  /* Espaçamentos Dinâmicos */
  --space-none: 0;
  --space-xs: 4px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 32px;

  /* Header / Cabeçalho Transparente & Grid */
  --header-gap: 16px;
  --top-bg: rgba(8, 11, 18, 0.8);
  --top-text: #ffffff;
  --main-bg: rgba(19, 27, 46, 0.5);
  --bottom-bg: rgba(11, 15, 25, 0.8);
  --bottom-text: #94a3b8;
  --header-border: var(--glass-border);
  --main-grid-template-mobile: 1fr;
  --main-grid-template-desktop: auto 1fr auto auto;
  --align-center: center;
  --display-flex: flex;
  --display-grid: grid;

  /* Footer / Rodapé Tech */
  --footer-main-bg: rgba(8, 11, 18, 0.85);
  --footer-bottom-bg: #03050a;
  --footer-bottom-text: #94a3b8;
  --footer-border: var(--glass-border);
  
  --footer-grid-mobile: 1fr;
  --footer-grid-desktop: repeat(4, 1fr);
  --footer-bottom-grid-mobile: 1fr;
  --footer-bottom-grid-desktop: auto 1fr auto;

  /* Ecossistema de Newsletters & Badges */
  --newsletter-bg: var(--glass-bg);
  --newsletter-grid-mobile: 1fr;
  --newsletter-grid-desktop: 1fr auto;
  
  --badge-width: 45px;
  --badge-height: 28px;
  --badge-opacity: 0.85;
}

/* ==========================================================================
   FUNDO GLOBAL COM EFEITO HERO (GRADIENTE + NEON GLOW)
   ========================================================================== */

html {
  background-color: var(--bg-main) !important;
  min-height: 100%;
}

body {
  background-color: var(--bg-main) !important;
  background-image: 
    radial-gradient(circle at 50% 0%, var(--brand-glow) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(135deg, #0b0f19 0%, #131b2e 50%, #060911 100%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  color: var(--text-main);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* ==========================================================================
   APLICAÇÃO DA TIPOGRAFIA FUTURISTA NOS ELEMENTOS
   ========================================================================== */

/* Headings e Títulos Principais usando Font Tech */
h1, h2, h3, h4, h5, h6,
.sap-hero-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--font-tech) !important;
  letter-spacing: 0.8px;
}

/* Elementos de Interface Técnica, Badges e Controles */
.sap-hero-badge,
.sap-btn-submit,
.sap-control,
.price,
.amount,
.button,
.main-navigation a {
  font-family: var(--font-tech) !important;
  letter-spacing: 0.8px;
}

/* ==========================================================================
   RESET COMPLETO DE BACKGROUNDS DO TEMA PAI (STOREFRONT) & WOOCOMMERCE
   ========================================================================== */

#page, 
#content, 
#masthead,
.site-content, 
.site-main,
.content-area,
.col-full,
main,
.woocommerce,
.woocommerce-page,
.woocommerce-site-content,
.woocommerce-content-area,
.storefront-sorting,
.storefront-full-width-content .content-area,
.site-main ul.products,
.site-main article.page,
.site-main article.post {
  background: transparent !important;
  background-color: transparent !important;
}

/* Reset de Seções Internas do WooCommerce */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading,
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart_totals,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce-tabs #tab-reviews,
#reviews #comments ol.commentlist li .comment-text {
  background: transparent !important;
  background-color: transparent !important;
}

/* ==========================================================================
   LINKS FUTURISTAS - MESMO TOM DO SAP-HERO-BADGE
   ========================================================================== */

/* Base Global de Links */
a, 
a:visited {
  color: var(--brand-primary-hover) !important;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

/* Hover de Links com Glow Azul */
a:hover, 
a:focus {
  color: var(--text-main) !important;
  text-shadow: 0 0 10px rgba(37, 99, 235, 0.6);
}

/* Override de Links Nativos do Storefront & WooCommerce */
.site-header a,
.site-footer a,
.widget a,
.woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product a,
.site-main article a,
.breadcrumb a,
.woocommerce-breadcrumb a {
  color: var(--brand-primary-hover) !important;
}

/* Hover nos Títulos de Produtos e Menus */
.site-header a:hover,
.site-footer a:hover,
.widget a:hover,
ul.products li.product a:hover .woocommerce-loop-product__title,
.site-main article a:hover,
.breadcrumb a:hover,
.woocommerce-breadcrumb a:hover {
  color: var(--text-main) !important;
  text-shadow: 0 0 12px rgba(37, 99, 235, 0.6);
}

/* ==========================================================================
   PADRONIZAÇÃO DARK GLASSMORPHISM - SUB-MENU (.sub-menu)
   ========================================================================== */

/* Sub-menu container com fundo escuro e efeito de vidro */
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.sub-menu,
.site-header .sub-menu {
  background: var(--glass-bg, rgba(15, 23, 42, 0.95)) !important;
  background-color: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: var(--glass-blur, blur(12px));
  -webkit-backdrop-filter: var(--glass-blur, blur(12px));
  border: var(--border-width-thin, 1px) solid var(--glass-border, rgba(255, 255, 255, 0.08)) !important;
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--shadow-md, 0 12px 40px rgba(0, 0, 0, 0.6)) !important;
  padding: var(--space-xs, 4px) 0 !important;
}

/* Itens internos do sub-menu */
.main-navigation ul.menu ul.sub-menu li,
.main-navigation ul.nav-menu ul.sub-menu li,
.site-header .sub-menu li {
  background: transparent !important;
  background-color: transparent !important;
}

/* Links do sub-menu */
.main-navigation ul.menu ul.sub-menu li a,
.main-navigation ul.nav-menu ul.sub-menu li a,
.site-header .sub-menu li a {
  color: var(--text-main, #f8fafc) !important;
  background: transparent !important;
  padding: var(--space-sm, 12px) var(--space-md, 16px) !important;
  transition: all 0.2s ease-in-out;
}

/* Hover nos links do sub-menu */
.main-navigation ul.menu ul.sub-menu li a:hover,
.main-navigation ul.nav-menu ul.sub-menu li a:hover,
.site-header .sub-menu li a:hover {
  background: var(--glass-bg-hover, rgba(37, 99, 235, 0.15)) !important;
  color: var(--brand-primary-hover, #3b82f6) !important;
}

/* ==========================================================================
   CONTAINERS E ESTRUTURA GLOBAL
   ========================================================================== */

.col-full, 
.storeautoparts-container {
  max-width: var(--site-max-width) !important;
  margin: var(--site-margin-center) !important;
  padding-left: var(--site-padding-mobile) !important;
  padding-right: var(--site-padding-mobile) !important;
  width: var(--site-width-full) !important;
  float: none !important;
}

.storeautoparts-header-wrapper,
.storeautoparts-footer-wrapper,
#masthead,
.site-footer {
  width: var(--site-width-full) !important;
  max-width: var(--site-width-full) !important;
  padding: var(--space-none) !important;
  margin: var(--space-none) !important;
}

.storeautoparts-header-wrapper .site-header-cart {
  width: auto !important;
}

/* Breakpoints Responsivos */
@media (min-width: 768px) {
  .col-full, 
  .storeautoparts-container {
    padding-left: var(--site-padding-tablet) !important;
    padding-right: var(--site-padding-tablet) !important;
  }
}

@media (min-width: 1024px) {
  .col-full, 
  .storeautoparts-container {
    padding-left: var(--site-padding-desktop) !important;
    padding-right: var(--site-padding-desktop) !important;
  }
}