/* ========================================= */
/* ESTILOS AJUSTADOS PARA EL SLIDER DE CATEGORÍAS/MARCAS */
/* ========================================= */

/* Contenedor del icono/imagen (define el tamaño del CÍRCULO) */
.circle-icon-container {
    /* TAMAÑO AJUSTADO: Aumentado de 80px a 100px */
    width: 100px; 
    height: 100px;
    border-radius: 50%; 
    display: flex; 
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

/* Ajuste del tamaño del ÍCONO de Font Awesome dentro del círculo */
/* Cambiado de 'fs-2' (Bootstrap class) a un tamaño fijo si es necesario, pero ajustaremos la clase en el HTML */
.circle-icon-container i {
    /* EJEMPLO: Puedes usar 'fs-1' o 'fs-2' de Bootstrap, o un tamaño fijo */
    font-size: 2.5rem !important; /* Haz el icono interior más grande */
}

/* Estilo para el hover */
.categoria-item-circle:hover .circle-icon-container {
    transform: scale(1.05); 
    border-color: var(--bs-primary) !important; 
}

/* Estilo si se usa una imagen pequeña dentro del círculo */
.circle-icon-container .category-thumb {
    max-width: 300%;
    max-height: 300%;
    object-fit: contain;
}

/* Estilo para el contenedor deslizable (Quitar la barra de desplazamiento en navegadores WebKit) */
.categoria-slider-wrapper .overflow-auto::-webkit-scrollbar,
.marca-slider-wrapper .overflow-auto::-webkit-scrollbar {
    display: none; 
}

/* Mantiene la funcionalidad de desplazamiento horizontal pero oculta la barra */
.categoria-slider-wrapper .overflow-auto,
.marca-slider-wrapper .overflow-auto {
    -ms-overflow-style: none;
    scrollbar-width: none;
    cursor: grab;
}

/* Puedes revisar si necesitas ajustar el media query si el nuevo tamaño causa problemas en móvil */
@media (max-width: 576px) {
    /* Ejemplo de ajuste: Reducir ligeramente el tamaño en móviles si 100px es demasiado */
    .circle-icon-container {
         width: 80px; 
         height: 80px;
    }
    .categoria-item-circle i {
         font-size: 1.5rem !important;
    }
}