/* 1. Variable Maestra */
    :root { --color-tienda: <?= COLOR_TIENDA ?>; }

    /* 2. REPARAR EL HERO (Imágenes nítidas) */
    .hero-overlay { 
        /* Cambiamos el gradiente para que la imagen se vea clara arriba y solo oscurezca abajo para leer el texto */
        background: linear-gradient(to bottom, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.7) 100%) !important; 
    }
    .swiper-slide img { 
        filter: brightness(1.1) contrast(1.05) !important; /* Mejora la nitidez */
    }

    /* 3. COLORES DINÁMICOS (Atacando tus clases de Tailwind) */
    
    /* Fondos: Botones amarillos/azules y etiquetas */
    .bg-yellow-400, .bg-blue-600, .bg-blue-500 { 
        background-color: var(--color-tienda) !important; 
        color: white !important; /* Asegura que el texto sea blanco */
    }

    /* Textos: Precios, Títulos y Hovers */
    .text-yellow-400, .text-blue-600, .text-blue-500, .hover\:text-blue-600:hover { 
        color: var(--color-tienda) !important; 
    }

    /* Botones de acción y detalles de la card */
    .group-hover\:bg-blue-600:hover, 
    .group-hover\:w-1/3, 
    #cart-total { 
        background-color: var(--color-tienda) !important; 
        color: white !important;
    }
    
    #cart-total { background: none !important; color: var(--color-tienda) !important; }

    /* Bordes dinámicos */
    .group-hover\:border-blue-100:hover { 
        border-color: var(--color-tienda) !important; 
    }

    /* 4. MANTENER EL NEGRO ELEGANTE */
    .bg-slate-900 { 
        background-color: #0f172a !important; 
        color: white !important;
    }
    .bg-slate-900:hover { 
        background-color: var(--color-tienda) !important; 
    }

    /* 5. OTROS AJUSTES */
    html { scroll-behavior: smooth; }
    #catalogo { scroll-margin-top: 100px; }
    .swiper { width: 100%; height: 95vh; }
    .swiper-slide { position: relative; overflow: hidden; }
    .swiper-pagination-bullet-active { background: var(--color-tienda) !important; width: 30px !important; border-radius: 10px !important; }
    body { font-family: 'Inter', sans-serif; overflow-x: hidden; }
    .cart-drawer { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
    .cart-hidden { transform: translateX(100%); }
    .glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); }
    .product-card:hover img { transform: scale(1.1); }