/* ========================================= */
/* ESTILOS PARA LA SECCIÓN DE MÁS VENDIDOS SLIDER (ID: slider-mas-vendidos) */
/* ========================================= */

/* Contenedor principal que mantiene la proporción cuadrada */
.item-square-container {
    position: relative;
    width: 100%;
    /* Truco para forzar el aspecto cuadrado: padding-top del 100% */
    padding-top: 100%; 
    overflow: hidden;
    border-radius: 0.5rem 0.5rem 0 0; /* Solo esquinas superiores redondeadas para que coincida con la tarjeta */
}

/* Ajusta la imagen para que cubra el contenedor cuadrado */
.item-square-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el área sin deformarse */
}

/* Estilo para la información del producto (parte inferior de la tarjeta) */
.item-info-vendidos {
    text-align: left;
    background-color: #fff;
    border-radius: 0 0 0.5rem 0.5rem; /* Esquinas inferiores redondeadas */
}

/* Estilos de hover para la tarjeta completa */
.card-cuadrado-link {
    transition: box-shadow 0.3s ease;
    border-radius: 0.5rem; /* Aplicar redondeo a toda la tarjeta */
    background-color: #fff; /* Fondo de la tarjeta */
}

.card-cuadrado-link:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Elevación en hover */
    transform: translateY(-2px); /* Pequeño efecto de levantamiento */
}

/* Estilos para el scroll horizontal (Ocultar la barra de desplazamiento) */
.vendidos-slider-wrapper .overflow-auto::-webkit-scrollbar {
    display: none;
}

.vendidos-slider-wrapper .overflow-auto {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    cursor: grab;
}

/* Ajuste de ancho para móviles: Muestra 3 items por fila para un mejor deslizamiento */
@media (max-width: 576px) {
    .vendidos-slider-wrapper .col-auto {
        flex: 0 0 auto;
        width: 33.333%; /* 3 items visibles en móviles pequeños */
    }
}