/* Variables de color */
:root{
  --bg:   #5a5651;   /* fondo general (más oscuro) */
  --bg-2: #64605b;   /* bloques/cajas */
  --text: #ffffff;
  --text-2:#e6e2db;
  --border:#77726b;
  --accent:#00b36b;
}


/* Base global: fondo y color por defecto */
body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Header y footer: que acompañen el fondo oscuro */
#header,
#footer,
.footer-container{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Enlaces del header/footer */
#header a,
#footer a{
  color: var(--text) !important;
}
#header a:hover,
#footer a:hover{
  color: var(--accent) !important;
}

/* Header (barra superior) + carrito
   - Corrige la “caja blanca” y asegura buen contraste */
#header .header-nav{
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* Texto y enlaces dentro del header-nav */
#header .header-nav a,
#header .header-nav span{
  color: var(--text) !important;
}

/* Bloque del carrito: lo dejamos transparente para evitar fondos claros raros */
#header .blockcart,
#header .blockcart .header,
#header .shopping-cart{
  background: transparent !important;
  color: var(--text) !important;
}

/* Título/contador/icono del carrito */
#header .blockcart .cart-title,
#header .blockcart .cart-products-count,
#header .blockcart .shopping-cart{
  color: var(--text) !important;
}

/* Hover del carrito (para que se note al pasar el ratón) */
#header .blockcart:hover{
  background: var(--bg-2) !important;
}

/* Seguridad extra: algunos temas meten background blanco en el <a> del carrito */
#header .blockcart a,
#header .blockcart .header a{
  background: transparent !important;
}

/* Enlaces globales (fuera del header/footer también) */
a{
  color: var(--text) !important;
}
a:hover{
  color: var(--accent) !important;
}

/* Contenedores generales del contenido
   - Para que wrapper y “cards” no se queden claros */
#wrapper,
#content-wrapper,
.page-content,
.card,
.block{
  background: var(--bg) !important;
  color: white !important;
}

/* Listados y cajas de producto (miniaturas)
   - Normalmente venían con fondo blanco */
.product-container,
.thumbnail-container{
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  padding: 20px;
}

.product-miniature{
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* Tipografía */
h1,h2,h3,h4,h5,h6{
  color: var(--text) !important;
}

/* Textos secundarios típicos (breadcrumbs, muted, etc.) */
.text-muted,
small,
.breadcrumb{
  color: var(--text-2) !important;
}

/* Formularios: inputs en oscuro + placeholder visible */
input,
select,
textarea{
  background: #1a1a1a !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
input::placeholder,
textarea::placeholder{
  color: #9a9a9a !important;
}

/* Botón principal (CTA) en verde */
.btn-primary{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.btn-primary:hover{
  filter: brightness(0.95);
}

/* Submenús del top-menu (2 casos)
   Caso A: dropdown Bootstrap (si tu menú usa .dropdown-menu) */
#header .top-menu .dropdown-menu{
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
}
#header .top-menu .dropdown-menu a{
  color: var(--text) !important;
}
#header .top-menu .dropdown-menu a:hover{
  background: rgba(255,255,255,0.06) !important;
  color: var(--accent) !important;
}
#header .top-menu .dropdown-divider,
#header .top-menu .dropdown-menu .dropdown-item{
  border-color: var(--border) !important;
}

/* Backup por si hay otros dropdowns en el header (idioma/usuario/etc.) */
#header .dropdown-menu{
  background: var(--bg-2) !important;
  border-color: var(--border) !important;
}
#header .dropdown-menu a{
  color: var(--text) !important;
}

/* Caso B: submenú colapsable de Classic (ids tipo #top_sub_menu_XXXX)
   - Este era el que te salía blanco en tu web */
[id^="top_sub_menu_"]{
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
}
[id^="top_sub_menu_"] a{
  color: var(--text) !important;
}
[id^="top_sub_menu_"] a:hover{
  color: var(--accent) !important;
  background: rgba(255,255,255,0.06) !important;
}
/* Evita fondos raros en listas internas */
[id^="top_sub_menu_"] li,
[id^="top_sub_menu_"] .category,
[id^="top_sub_menu_"] .submenu,
[id^="top_sub_menu_"] ul{
  background: transparent !important;
}

/* Textos de contenido (párrafos y listas)
   - Para casos donde el tema “pisaba” el color del <p> */
#wrapper p,
#content p,
#content-wrapper p,
.page-content p,
.cms-page p,
.block-cms p,
.product-description p,
.product-information p{
  color: var(--text) !important;
}
#wrapper li,
#content li,
#content-wrapper li,
.page-content li{
  color: var(--text) !important;
}

/* Overrides de bloques concretos que venían con fondo blanco
   - Detectados en DevTools como background: #fff en theme.css */

/* Bloque de categorías (left column / módulos) */
.block-categories{
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.block-categories a,
.block-categories p,
.block-categories li,
.block-categories .h6,
.block-categories .title{
  color: var(--text) !important;
}
.block-categories a:hover{
  color: var(--accent) !important;
}

/* Bloque “custom text” (id #custom-text) */
#custom-text{
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
#custom-text p,
#custom-text a,
#custom-text span,
#custom-text li,
#custom-text h1,
#custom-text h2,
#custom-text h3,
#custom-text h4{
  color: var(--text) !important;
}
#custom-text a:hover{
  color: var(--accent) !important;
}

/* ===== Quitar fondo blanco de las tarjetas de producto (listados) ===== */

/* La “caja” principal de cada producto */
.featured-products .product-miniature .thumbnail-container,
#products .product-miniature .thumbnail-container,
.product-miniature .thumbnail-container{
  background: var(--bg-2) !important;
  border: 1px solid var(--bg-2) !important;
}

/* Zona inferior donde suele ir título/precio (a veces también es blanca) */
.featured-products .product-miniature .product-description,
#products .product-miniature .product-description,
.product-miniature .product-description{
  background: var(--bg-2) !important;
  color: var(--text) !important;
}

/* Título y precio dentro de la tarjeta */
.product-miniature .product-title a,
.product-miniature .price{
  color: var(--text) !important;
}
.product-miniature .product-title a:hover{
  color: var(--accent) !important;
}

/* ===== Tooltip / popover / texto flotante (wishlist / quickview) ===== */

/* Tooltips de Bootstrap (si se usan) */
.tooltip-inner{
  background: var(--bg-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-right .arrow::before{
  border-top-color: var(--bg-2) !important;
  border-bottom-color: var(--bg-2) !important;
  border-left-color: var(--bg-2) !important;
  border-right-color: var(--bg-2) !important;
}

/* Popovers (por si el tema usa popover en vez de tooltip) */
.popover{
  background: var(--bg-2) !important;
  border-color: var(--border) !important;
}
.popover .popover-body,
.popover .popover-header{
  color: var(--text) !important;
}

/* Texto “Vista rápida” en tarjeta de producto (Classic) */
.product-miniature .quick-view,
.product-miniature .js-quick-view{
  color: var(--text) !important;
}
.product-miniature .quick-view:hover,
.product-miniature .js-quick-view:hover{
  color: var(--accent) !important;
}

/* ===== “Vista rápida” (Quick view) con fondo oscuro ===== */

.product-miniature .highlighted-informations{
  background: var(--bg-2) !important;
}

/* Botón/enlace de Vista rápida */
.product-miniature .highlighted-informations a.quick-view,
.product-miniature .highlighted-informations a.js-quick-view{
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* Hover */
.product-miniature .highlighted-informations a.quick-view:hover,
.product-miniature .highlighted-informations a.js-quick-view:hover{
  background: var(--bg) !important;
  color: var(--accent) !important;
}

/* ===== Newsletter (bloque suscripción) ===== */

.block_newsletter{
  background: var(--bg-2) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* Título y texto */
.block_newsletter h2,
.block_newsletter p{
  color: var(--text) !important;
}

/* Input email */
.block_newsletter input[type="email"]{
  background: #1a1a1a !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* Botón suscribirse */
.block_newsletter input.btn,
.block_newsletter button.btn{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* ===== Newsletter: más aire (padding y separaciones) ===== */

.block_newsletter{
  padding: 18px 20px !important;   /* espacio interno */
  border-radius: 6px;              /* opcional: esquinas suaves */
}

/* Un poco de separación entre el título y el formulario */
.block_newsletter .title,
.block_newsletter h2{
  margin-bottom: 10px !important;
}

/* Aire entre el input y el botón */
.block_newsletter form .input-group{
  gap: 10px;                       /* si el navegador lo soporta */
}

/* Alternativa/extra por si no aplica el gap (fallback) */
.block_newsletter form .input-group .btn,
.block_newsletter form .input-group button{
  margin-left: 10px !important;
}

/* ===== Buscador: desplegable de sugerencias en oscuro ===== */

/* Caso 1: jQuery UI Autocomplete (muy común en PS Classic) */
.ui-autocomplete,
.ui-menu.ui-widget.ui-widget-content{
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.ui-autocomplete .ui-menu-item-wrapper,
.ui-menu .ui-menu-item-wrapper{
  color: var(--text) !important;
}

.ui-autocomplete .ui-menu-item-wrapper:hover,
.ui-menu .ui-menu-item-wrapper:hover,
.ui-menu .ui-state-active{
  background: rgba(255,255,255,0.06) !important;
  color: var(--accent) !important;
  border: 0 !important;
}

/* Miniaturas y textos dentro */
.ui-autocomplete img{
  background: transparent !important;
}
.ui-autocomplete a,
.ui-autocomplete span{
  color: var(--text) !important;
}

/* Caso 2: dropdown propio (por si tu tema/módulo no usa ui-*) */
.search-widget .dropdown-menu,
#search_widget .dropdown-menu{
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
}
.search-widget .dropdown-menu a,
#search_widget .dropdown-menu a{
  color: var(--text) !important;
}
.search-widget .dropdown-menu a:hover,
#search_widget .dropdown-menu a:hover{
  background: rgba(255,255,255,0.06) !important;
  color: var(--accent) !important;
}

/* ===== Footer / Contacto: títulos y textos que se quedaban oscuros ===== */

/* Títulos tipo "Productos" (p.h3) en el footer */
.footer-container p.h3,
.footer-container .h3{
  color: var(--text) !important;
}

/* Título "Información de la tienda" */
.footer-container .block-contact-title{
  color: var(--text) !important;
}

/* Contenedor de información de contacto */
#contact-infos,
#contact-infos *{
  color: var(--text) !important;
}

/* Enlaces dentro del footer */
.footer-container a{
  color: var(--text) !important;
}
.footer-container a:hover{
  color: var(--accent) !important;
}

/* Separadores del footer (si aparecen claros) */
.footer-container hr,
.footer-container .separator{
  border-color: var(--border) !important;
}


/* =========================================================
   FICHA DE PRODUCTO (Classic): fondos y textos
   ========================================================= */

/* 1) Columna/box principal del producto */
#product #content,
#product .page-content,
#product .product-container{
  background: transparent !important;
  color: var(--text) !important;
}

/* 2) Galería y miniaturas (quita fondos claros) */
#product .product-cover,
#product .product-cover img,
#product .product-images,
#product .product-images > li,
#product .thumb-container,
#product .thumb-container img{
  background: transparent !important;
}

#product .product-images{
  border-color: var(--border) !important;
}

/* 3) Labels “Impuestos excluidos”, “Tapón”, “Cantidad”, etc. */
#product .product-information,
#product .product-information p,
#product .product-information span,
#product .product-information label,
#product .product-information .tax-label{
  color: var(--text-2) !important;
}

/* Título y precio */
#product .h1,
#product .product-prices,
#product .current-price,
#product .current-price span{
  color: var(--text) !important;
}

/* 4) Atributos en formato botones (los que se ven blancos) */
#product .product-variants-item ul li,
#product .product-variants-item .input-container{
  background: transparent !important;
}

/* Botón/label del atributo */
#product .product-variants-item label{
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* Activo/seleccionado */
#product .product-variants-item input:checked + span,
#product .product-variants-item input:checked + label,
#product .product-variants-item label:hover{
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* 5) Tabs / bloque inferior (ese rectángulo blanco) */
#product .tabs,
#product .tabs .tab-pane,
#product .product-tabs,
#product .product-tabs .tab-pane,
#product .product-description,
#product .product-details{
  background: var(--bg-2) !important;
  border: 1px solid var(--bg-2) !important;
  color: var(--text) !important;
  padding: 5px;
}

/* Links dentro de tabs */
#product .tabs a,
#product .tab-pane a{
  color: var(--text) !important;
}
#product .tabs a:hover,
#product .tab-pane a:hover{
  color: var(--accent) !important;
}


.radio-label {
    display: inline-block;
    padding: .125rem .625rem;
    font-weight: 600;
    background: var(--bg-2);
    border: 2px solid #fff;
}


/* ===== Tabs (nav-tabs): quitar fondo blanco y adaptarlo a oscuro ===== */

.nav-tabs{
  border-bottom: 1px solid var(--border) !important;
}

/* Estado normal */
.nav-tabs .nav-link{
  background: var(--bg-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Hover/focus */
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus{
  background: #1a1a1a !important;
  color: var(--accent) !important;
  border-color: var(--border) !important;
}

/* Activo */
.nav-tabs .nav-link.active{
  background: var(--bg) !important;
  color: var(--accent) !important;
  border-color: var(--border) var(--border) transparent !important;
}

/* ===== Tabla descuentos por volumen (product-discounts) ===== */

.product-discounts,
.product-discounts .table-product-discounts{
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  padding: 10px;
}

/* Cabecera */
.product-discounts .table-product-discounts thead th{
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Filas/celdas */
.product-discounts .table-product-discounts tbody td{
  background: var(--bg-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Hover de fila (opcional) */
.product-discounts .table-product-discounts tbody tr:hover td{
  background: #1a1a1a !important;
}

#product-comments-list-header {
    color: white !important;
}

.product-comment-list-item {
    background-color: var(--bg-2) !important;
}

/* Contenedor de enlaces del dashboard */
#my-account .links,
.page-my-account .links{
  background: transparent !important;
}

/* Cada “tarjeta”/enlace */
#my-account .links a,
.page-my-account .links a,
#my-account .links .link-item,
.page-my-account .links .link-item{
  background: var(--bg-2) !important;
  color: var(--text) !important;
}

/* Icono */
#my-account .links a i,
.page-my-account .links a i{
  color: var(--text) !important;
}

/* Texto (el que ahora mismo no ves por blanco sobre blanco) */
#my-account .links a span,
.page-my-account .links a span,
#my-account .links a .link-item-text,
.page-my-account .links a .link-item-text{
  color: var(--text) !important;
}

/* Hover */
#my-account .links a:hover,
.page-my-account .links a:hover{
  border-color: var(--accent) !important;
}
#my-account .links a:hover i,
#my-account .links a:hover span{
  color: var(--accent) !important;
}

/* Botón “Cerrar sesión” si queda raro */
#my-account a.logout,
.page-my-account a.logout{
  color: var(--text) !important;
}
#my-account a.logout:hover,
.page-my-account a.logout:hover{
  color: var(--accent) !important;
}

/* ===========================
   MENÚ MÓVIL (Classic)
   Quita el panel blanco
   =========================== */

/* Panel lateral completo */
#mobile_top_menu_wrapper{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Contenido dentro del panel (lista y contenedores) */
#mobile_top_menu_wrapper .top-menu,
#mobile_top_menu_wrapper .top-menu .sub-menu,
#mobile_top_menu_wrapper .top-menu .popover,
#mobile_top_menu_wrapper .js-top-menu,
#mobile_top_menu_wrapper .js-top-menu-bottom{
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Items / links del menú móvil */
#mobile_top_menu_wrapper a,
#mobile_top_menu_wrapper .top-menu a,
#mobile_top_menu_wrapper .top-menu .category,
#mobile_top_menu_wrapper .top-menu .sub-menu a{
  color: var(--text) !important;
  background: transparent !important;
}

/* Hover/activo */
#mobile_top_menu_wrapper a:hover,
#mobile_top_menu_wrapper a:focus{
  color: var(--accent) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* Separadores/bordes típicos */
#mobile_top_menu_wrapper .top-menu li,
#mobile_top_menu_wrapper .top-menu .sub-menu li{
  border-color: var(--border) !important;
}

/* Flechita/chevron si tu tema la pinta oscura */
#mobile_top_menu_wrapper .material-icons,
#mobile_top_menu_wrapper i{
  color: var(--text) !important;
}

/* Si aparece un overlay/capa blanca detrás */
.mobile-nav-overlay,
#mobile_top_menu_wrapper .overlay,
#mobile_top_menu_wrapper::before{
  background: rgba(0,0,0,0.6) !important;
}

/* ===========================
   FOOTER MÓVIL (Classic): acordeón oscuro
   =========================== */

/* Cada bloque del footer */
.footer-container .footer-block,
.footer-container .block{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Título clicable (acordeón) */
.footer-container .links .title,
.footer-container .footer-block .h3,
.footer-container .footer-block .title{
  background: var(--bg-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Panel desplegable */
.footer-container .links ul,
.footer-container .footer-block .collapse,
.footer-container .footer-block .footer-collapse{
  background: var(--bg-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Items del desplegable */
.footer-container .links ul li,
.footer-container .links ul li a,
.footer-container .footer-block a{
  background: transparent !important;
  color: var(--text) !important;
}

/* Hover */
.footer-container .links ul li a:hover{
  background: rgba(255,255,255,0.06) !important;
  color: var(--accent) !important;
}

/* Flecha/chevron del acordeón (según tema) */
.footer-container .links .title .pull-xs-right,
.footer-container .links .title i,
.footer-container .links .title .material-icons{
  color: var(--text) !important;
}