:root {
  --gl-bg: #0a1a0f;
  --gl-surface: #111f15;
  --gl-card: #162219;
  --gl-border: rgba(52, 210, 100, 0.12);
  --gl-accent: #34d264;
  --gl-accent-dim: #1e8a3f;
  --gl-text: #e8f5ec;
  --gl-muted: #7aab88;
  --gl-pill: #0e3320;
}

/* --- Estilos Globales y Fondos --- */
body, html {
    background-color: var(--gl-bg) !important;
    color: var(--gl-text) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--gl-text) !important;
}

p, span, li, a, td, th, label, small {
    color: var(--gl-text);
}

a:hover, a:focus {
    color: var(--gl-accent) !important;
}

/* --- Cabecera y Menú --- */
.header {
    background: var(--gl-surface) !important;
    border-bottom: 1px solid var(--gl-border) !important;
}

.header__top {
    background: var(--gl-bg) !important;
    border-bottom: 1px solid var(--gl-border) !important;
}

.header__top__left ul li, 
.header__top__right__social a, 
.header__top__right__auth a {
    color: var(--gl-muted) !important;
}

.header__top__right__social a:hover, 
.header__top__right__auth a:hover {
    color: var(--gl-accent) !important;
}

.header__menu ul li a {
    color: var(--gl-text) !important;
}

.header__menu ul li.active a,
.header__menu ul li:hover a {
    color: var(--gl-accent) !important;
}

/* Humberger Menu (Mobile Drawer) */
.humberger__menu__wrapper {
    background: var(--gl-card) !important;
    border-right: 1px solid var(--gl-border) !important;
}

.humberger__menu__logo a,
.humberger__menu__contact ul li,
.humberger__menu__widget,
.humberger__menu__nav ul li a,
.humberger__menu__contact ul li i {
    color: var(--gl-text) !important;
}

.humberger__menu__nav ul li.active a,
.humberger__menu__nav ul li:hover a {
    color: var(--gl-accent) !important;
}

/* --- Sección Hero y Categorías --- */
.hero__categories__all {
    background: var(--gl-accent-dim) !important;
}

.hero__categories ul {
    background: var(--gl-card) !important;
    border: 1px solid var(--gl-border) !important;
}

.hero__categories ul li a {
    color: var(--gl-text) !important;
}

.hero__categories ul li a:hover {
    color: var(--gl-accent) !important;
    background: var(--gl-surface) !important;
    padding-left: 20px !important;
}

/* --- Buscador --- */
.hero__search__form {
    background: var(--gl-surface) !important;
    border: 1px solid var(--gl-border) !important;
    border-radius: 10px;
}

.hero__search__form form input {
    background: transparent !important;
    color: var(--gl-text) !important;
}

.hero__search__form form input::placeholder {
    color: var(--gl-muted) !important;
}

.hero__search__form form button {
    background: var(--gl-accent) !important;
    color: #0a1a0f !important;
    border-radius: 0 9px 9px 0;
}

.hero__search__phone__icon {
    background: var(--gl-surface) !important;
    color: var(--gl-accent) !important;
}

.hero__search__phone__text h5, 
.hero__search__phone__text span {
    color: var(--gl-text) !important;
}

/* --- Tarjetas de Productos --- */
.featured__item, .product__item, .featured__item__text {
    background: var(--gl-card) !important;
    border: 1px solid var(--gl-border) !important;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.featured__item:hover, .product__item:hover {
    border-color: rgba(52, 210, 100, 0.4) !important;
    transform: translateY(-2px);
}

.featured__item__text {
    border-top: none !important;
    border-radius: 0 0 12px 12px;
    padding: 15px 10px;
}

.featured__item__text h6 a {
    color: var(--gl-text) !important;
}

.featured__item__text h5 {
    color: var(--gl-accent) !important;
}

.featured__item__pic, .product__item__pic {
    border-bottom: 1px solid var(--gl-border) !important;
}

/* --- Badges y Filtros --- */
.out-of-stock-badge {
    background: var(--gl-pill) !important;
    color: var(--gl-accent) !important;
    border: 1px solid rgba(52, 210, 100, 0.3) !important;
}

.featured__controls ul li {
    color: var(--gl-muted) !important;
}

.featured__controls ul li.active {
    color: var(--gl-accent) !important;
    border-bottom: 2px solid var(--gl-accent);
}

/* --- Sección FAQ (Preguntas Frecuentes) --- */
.faq-section {
    background: var(--gl-bg) !important;
}

.faq-section article {
    background: var(--gl-card) !important;
    border: 1px solid var(--gl-border) !important;
    box-shadow: none !important;
}

.faq-section article h3 {
    color: var(--gl-accent) !important;
}

.faq-section article p {
    color: var(--gl-muted) !important;
}

/* --- Trust Badges --- */
.trust-badges {
    background: var(--gl-surface) !important;
    border-bottom: 1px solid var(--gl-border) !important;
}

.trust-item h6 {
    color: var(--gl-text) !important;
}

.trust-item p {
    color: var(--gl-muted) !important;
}

.trust-item i {
    color: var(--gl-accent) !important;
}

/* --- Latest Product --- */
.latest-product__item {
    background: var(--gl-card) !important;
    border: 1px solid var(--gl-border) !important;
    border-radius: 8px;
    padding: 10px !important;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center;
}

.latest-product__item:hover {
    border-color: rgba(52, 210, 100, 0.4) !important;
}

.latest-product__item__text h6 {
    color: var(--gl-text) !important;
}

.latest-product__item__text span {
    color: var(--gl-accent) !important;
}

/* --- Footer --- */
.footer {
    background: var(--gl-surface) !important;
    border-top: 1px solid var(--gl-border) !important;
}

.footer__about ul li, .footer__widget ul li a, .footer__widget p, .footer__widget h6 {
    color: var(--gl-muted) !important;
}

.footer__widget ul li a:hover {
    color: var(--gl-accent) !important;
}

.footer__copyright {
    border-top: 1px solid var(--gl-border) !important;
    background: var(--gl-bg) !important;
}

.footer__copyright__text {
    color: var(--gl-muted) !important;
}

/* --- Drawer del Carrito (Cart Drawer) --- */
.cart-drawer {
    background: var(--gl-card) !important;
    color: var(--gl-text) !important;
    border-left: 1px solid var(--gl-border) !important;
    box-shadow: -5px 0 15px rgba(0,0,0,0.3) !important;
}

.cart-drawer-header {
    border-bottom: 1px solid var(--gl-border) !important;
}

.cart-drawer-header h3 {
    color: var(--gl-text) !important;
}

.drawer-item {
    border-bottom: 1px solid var(--gl-border) !important;
}

.drawer-item-title {
    color: var(--gl-text) !important;
}

.drawer-item-details, .drawer-item-details small {
    color: var(--gl-muted) !important;
}

.drawer-item-subtotal {
    color: var(--gl-accent) !important;
}

.cart-drawer-footer {
    background: var(--gl-surface) !important;
    border-top: 1px solid var(--gl-border) !important;
}

.btn-view-cart {
    background: var(--gl-pill) !important;
    color: var(--gl-accent) !important;
    border: 1px solid rgba(52, 210, 100, 0.25) !important;
}

.btn-checkout {
    background: var(--gl-accent) !important;
    color: #0a1a0f !important;
}

.empty-cart-msg {
    color: var(--gl-muted) !important;
}

/* --- Inputs y Formularios --- */
input[type="text"], input[type="password"], input[type="email"], select, textarea, .form-control {
    background-color: var(--gl-surface) !important;
    border: 1px solid var(--gl-border) !important;
    color: var(--gl-text) !important;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus, .form-control:focus {
    border-color: var(--gl-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(52, 210, 100, 0.25) !important;
    background-color: var(--gl-surface) !important;
    color: var(--gl-text) !important;
}

input::placeholder, textarea::placeholder {
    color: var(--gl-muted) !important;
}

/* --- Sidebar de la página de productos (productos.php) --- */
.sidebar {
    background: var(--gl-bg) !important;
}

.sidebar__item h4, .sidebar__item__title {
    color: var(--gl-text) !important;
}

.sidebar__item ul li a {
    color: var(--gl-muted) !important;
}

.sidebar__item ul li a:hover {
    color: var(--gl-accent) !important;
}

/* Checkboxes y Labels */
.form-check-label {
    color: var(--gl-text) !important;
}

.form-check-input {
    background-color: var(--gl-surface) !important;
    border-color: var(--gl-border) !important;
}

.form-check-input:checked {
    background-color: var(--gl-accent) !important;
    border-color: var(--gl-accent) !important;
}

/* Barra de filtros de la tienda */
.filter__item {
    border-top: 1px solid var(--gl-border) !important;
    border-bottom: 1px solid var(--gl-border) !important;
    background: var(--gl-surface) !important;
    padding: 15px 20px !important;
    border-radius: 8px;
    margin-bottom: 30px;
}

.filter__item__text, .filter__found__text h6 {
    color: var(--gl-text) !important;
}

.nice-select {
    background-color: var(--gl-surface) !important;
    border: 1px solid var(--gl-border) !important;
    color: var(--gl-text) !important;
}

.nice-select .list {
    background-color: var(--gl-card) !important;
    border: 1px solid var(--gl-border) !important;
}

.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
    background-color: var(--gl-surface) !important;
    color: var(--gl-accent) !important;
}

.nice-select .option {
    color: var(--gl-text) !important;
}

/* --- Botones --- */
.primary-btn, .site-btn, .checkout-btn {
    background: var(--gl-accent) !important;
    color: #0a1a0f !important;
    border: none !important;
    font-weight: 700 !important;
    border-radius: 5px !important;
    transition: all 0.2s ease !important;
}

.primary-btn:hover, .site-btn:hover, .checkout-btn:hover {
    background: var(--gl-accent-dim) !important;
    color: #ffffff !important;
}

/* --- Categorías Slider (Owl Carousel) --- */
.categories__item {
    border: 1px solid var(--gl-border) !important;
    border-radius: 12px;
    overflow: hidden;
}

.categories__item h5 a {
    background: rgba(10, 26, 15, 0.85) !important;
    color: var(--gl-text) !important;
    backdrop-filter: blur(4px);
    border: 1px solid var(--gl-border) !important;
    border-radius: 8px;
    padding: 10px !important;
}

.categories__item h5 a:hover {
    color: var(--gl-accent) !important;
}

/* --- Sección Breadcrumb (Migas de Pan) --- */
.breadcrumb-section {
    position: relative;
}

.breadcrumb-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 26, 15, 0.8) !important; /* Capa verde oscura overlay */
    z-index: 1;
}

.breadcrumb__text {
    position: relative;
    z-index: 2;
}

.breadcrumb__text h2, .breadcrumb__option a, .breadcrumb__option span {
    color: #ffffff !important;
}

/* --- Modales --- */
.modal-content {
    background-color: var(--gl-card) !important;
    border: 1px solid var(--gl-border) !important;
    color: var(--gl-text) !important;
}

.modal-header, .modal-footer {
    border-color: var(--gl-border) !important;
}

.modal-header .close {
    color: var(--gl-text) !important;
    opacity: 0.8;
}

.modal-header .close:hover {
    color: var(--gl-accent) !important;
    opacity: 1;
}

/* --- Páginas de Carrito y Detalles (Shopping Cart Page) --- */
.shoping__cart__table table {
    background-color: var(--gl-card) !important;
    border: 1px solid var(--gl-border) !important;
}

.shoping__cart__table table thead {
    background-color: var(--gl-surface) !important;
    border-bottom: 1px solid var(--gl-border) !important;
}

.shoping__cart__table table tbody tr {
    border-bottom: 1px solid var(--gl-border) !important;
}

.shoping__cart__table table tbody tr td {
    color: var(--gl-text) !important;
}

.shoping__cart__item h5 {
    color: var(--gl-text) !important;
}

.shoping__cart__price, .shoping__cart__total {
    color: var(--gl-accent) !important;
}

.shoping__checkout {
    background: var(--gl-card) !important;
    border: 1px solid var(--gl-border) !important;
    border-radius: 8px;
}

.shoping__checkout h5, .shoping__checkout ul li {
    color: var(--gl-text) !important;
}

.shoping__checkout ul li span {
    color: var(--gl-accent) !important;
}

.shoping__cart__btns .primary-btn.cart-btn {
    background: var(--gl-pill) !important;
    color: var(--gl-accent) !important;
    border: 1px solid rgba(52, 210, 100, 0.2) !important;
}

.shoping__discount form input {
    background: var(--gl-surface) !important;
    border: 1px solid var(--gl-border) !important;
    color: var(--gl-text) !important;
}

/* --- Páginas de Checkout y Formularios --- */
.checkout__form h4 {
    color: var(--gl-text) !important;
    border-bottom: 1px solid var(--gl-border) !important;
    padding-bottom: 10px;
}

.checkout__input p {
    color: var(--gl-text) !important;
}

.checkout__order {
    background: var(--gl-card) !important;
    border: 1px solid var(--gl-border) !important;
    border-radius: 8px;
}

.checkout__order h4 {
    border-bottom: 1px solid var(--gl-border) !important;
}

.checkout__order ul li, .checkout__order__total {
    color: var(--gl-text) !important;
}

.checkout__order ul li span, .checkout__order__total span {
    color: var(--gl-accent) !important;
}

/* --- Formulario de Contacto --- */
.contact-form form input, .contact-form form textarea {
    background: var(--gl-surface) !important;
    border: 1px solid var(--gl-border) !important;
    color: var(--gl-text) !important;
}

.contact-form form input::placeholder, .contact-form form textarea::placeholder {
    color: var(--gl-muted) !important;
}

.contact__widget {
    background: var(--gl-card) !important;
    border: 1px solid var(--gl-border) !important;
    padding: 25px !important;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: none !important;
}

.contact__widget span {
    color: var(--gl-accent) !important;
    font-size: 28px;
}

.contact__widget h4 {
    color: var(--gl-text) !important;
    margin-top: 10px;
}

.contact__widget p {
    color: var(--gl-muted) !important;
}

/* --- Página de Login y Registro --- */
.card-login {
    background: var(--gl-card) !important;
    border: 1px solid var(--gl-border) !important;
    border-radius: 12px;
    padding: 30px !important;
}

.card-login h3 {
    color: var(--gl-text) !important;
}

.card-login label {
    color: var(--gl-muted) !important;
}

/* --- Pistas de rango de precios de jQuery UI (Price Range Slider) --- */
.ui-widget-content {
    background: var(--gl-surface) !important;
    border: 1px solid var(--gl-border) !important;
}

.ui-widget-header {
    background: var(--gl-accent) !important;
}

.ui-slider-handle {
    background: #ffffff !important;
    border: 2px solid var(--gl-accent) !important;
    border-radius: 50% !important;
}

/* --- Quick View Modal Overrides --- */
#modalQuickView .modal-content {
    background-color: var(--gl-card) !important;
    border: 1px solid var(--gl-border) !important;
    color: var(--gl-text) !important;
}
#modalQuickView h3#qv-nombre {
    color: var(--gl-text) !important;
}
#modalQuickView h4#qv-precio {
    color: var(--gl-accent) !important;
}
#modalQuickView #qv-descripcion {
    color: var(--gl-muted) !important;
}

/* --- Exit Intent Modal Overrides --- */
#exitIntentModal .modal-content {
    background-color: var(--gl-card) !important;
    border: 1px solid var(--gl-border) !important;
    color: var(--gl-text) !important;
}
#exitIntentModal h3 {
    color: var(--gl-text) !important;
}
#exitIntentModal p {
    color: var(--gl-muted) !important;
}

/* --- PWA Install Banner Overrides --- */
#pwa-install-banner {
    background-color: var(--gl-surface) !important;
    border-top: 1px solid var(--gl-border) !important;
}
#pwa-install-banner strong {
    color: var(--gl-text) !important;
}
#pwa-install-banner span {
    color: var(--gl-muted) !important;
}