/* ================================================= */
/* LIMPIEZA Y AJUSTES GLOBALES */
/* ================================================= */

/* Elimina el highlight azul al tocar elementos en móvil */
* {
    -webkit-tap-highlight-color: transparent;
}

/* IMÁGENES DEL CATÁLOGO */
#product-grid img {
    width: 100% !important;
    height: 450px !important; /* Ajustado para que se vean más grandes */
    object-fit: cover !important;
    object-position: center !important;
    display: block;
    background-color: #f8f8f8;
}

/* RESPONSIVE MOBILE */

@media (max-width: 640px) {
    #product-grid img {
        height: 400px !important;
    }
}


/* ESTRUCTURA FLEXBOX DE LAS CARDS 

#product-grid > div {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#product-grid > div .p-4 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ESTADOS DE STOCK */

.talle-no-stock {
    background-color: #fafafa !important;
    color: #e5e7eb !important;
    text-decoration: line-through !important;
    border-color: #f3f4f6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.5;
}

/* ESTADOS ACTIVOS */

.active {
    border-color: #535353 !important;
    background-color: #fff !important;
    color: #535353 !important;
    box-shadow: 0 4px 12px rgba(216, 27, 96, 0.08);
}

/* SCROLL PERSONALIZADO DEL CARRITO */

.custom-scroll::-webkit-scrollbar {
    width: 3px;
}
.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
    background: #eeeeee;
    border-radius: 10px;
}

/* TRANSICIONES DE FORMULARIOS */

input, select {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* AJUSTES RESPONSIVE EXTRA */

@media (max-width: 640px) {
    #product-grid img {
        height: 320px !important;
    }
}

/* DROPDOWN DE CATEGORÍAS */

.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

.group:hover .group-hover\:visible {
    visibility: visible;
}

.relative.group {
    perspective: 1000px;
}

/* BOTÓN DE FILTRO ACTIVO */

.filter-btn.active {
    background-color: #fce4ec !important; /* Un rosa muy suave */
    color: #535353 !important;
    border-left: 4px solid #535353;
}

/* DROPDOWN RESPONSIVE MOBILE */

@media (max-width: 768px) {
    .absolute.z-\[100\] {
        position: absolute;
        width: 100%;
    }
}

/* Animaciones de la Navbar Mobile */
.hamburger-line { transition: all 0.3s ease; }
.btn-mobile-active .line-1 { transform: translateY(7px) rotate(45deg); }
.btn-mobile-active .line-2 { opacity: 0; }
.btn-mobile-active .line-3 { transform: translateY(-7px) rotate(-45deg); }

.nav-blur {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}