/* Productos destacados y mas vendidos */
.featured-products .products-section-title {
    font-family: var(--font-brand);
    font-size: 30px;
    color: var(--color-pink);
    text-align: center;
    text-transform: uppercase;
    padding-top: 50px;
}

.featured-products .all-product-link {
    display: none;
}

/* Miniatura del grid a tamano fijo (mismo fix que el listado de categoria):
   las imagenes reales llegan a 250x250, pero el placeholder "Imagen no
   disponible" es 600x600 y solo tenia max-width:100%, con lo que llenaba la
   columna y descuadraba la altura de la tarjeta y el ancho del boton "anadir
   al carrito". Se fija la miniatura a 250x250 (contain) para que todas las
   tarjetas queden alineadas, tengan o no imagen. */
.featured-products .product-miniature .thumbnail-container .product-thumbnail img {
    display: block;
    width: 250px;
    height: 250px;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
}

/* Carousel movido por JS a hijo directo de #wrapper — sin container limitante */
#wrapper > #carousel {
    width: 100%;
    display: block;
    margin: 0 0 1.5rem 0;
    position: relative;
    /* El tema padre aplica en <=991px un full-bleed (.carousel { left:50%;
       margin-left:-50vw; width:100vw }). Como aquí el carrusel ya es hijo
       directo de #wrapper (ancho completo), ese margin-left lo anula el margin
       de arriba, pero el left:50% quedaba suelto y empujaba el carrusel a la
       derecha (cortado en movil). Forzamos left:0 para neutralizarlo. */
    left: 0;
}

#wrapper > #carousel .carousel-inner {
    width: 100%;
    height: auto;
    position: relative;
    left: auto;
    transform: none;
    overflow: hidden;
    max-width: none;
}

#wrapper > #carousel .carousel-item {
    height: auto;
}

#wrapper > #carousel .carousel-item img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

/* TABLET/MOVIL: compactar el espacio vertical. Entre el carrusel y la seccion
   de destacados sobraba mucho hueco (margin-bottom del carrusel + margin-top y
   padding-top:50px del titulo). Se reduce para que la home no obligue a
   scrollear tanto en pantallas pequenas. */
@media (max-width: 991.98px) {
    #wrapper > #carousel {
        margin-bottom: 0;
    }
    .featured-products .products-section-title {
        padding-top: 18px;
        margin-top: 0;
        margin-bottom: 18px;
    }
}