/* Bloque de juguetes (estilos base de section-header en global.css) */
.block-category {
    margin-bottom: 0;
    padding-bottom: 0;
}

.block-category h1 {
    font-weight: bold;
}

/* Card de juguetes */
.card-label-juguetes {
    position: relative;
    display: block;
    border-radius: 0;
}

.total-products {
    display: none;
}

.products-selection {
    width: 100%;
}

/* Contenedor principal de productos de categorias.
 * Fluido: usa el ancho de contenedor de la tienda (variable unica), no un valor
 * hardcodeado, para que el catalogo acompane el ensanchado global sin empujar el
 * titulo ni el mosaico fuera del viewport en movil. */
#main_categories_products {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
}

/* Miniatura del grid a tamano fijo: 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 (413px) y descuadraba la altura de la tarjeta y el ancho
   del boton. Se fija la miniatura a 250x250 (contain) para que todas las tarjetas
   queden alineadas, tengan o no imagen. */
#main_categories_products .product-miniature .thumbnail-container .product-thumbnail img {
    display: block;
    width: 250px;
    height: 250px;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
}

/* En móvil/tablet el combo de ordenación queda pegado a la izquierda porque el
   row usa space-between y la paginación baja a su propia línea. Se centra el
   combo (como pill, sin estirarlo a todo el ancho) en <=991px. */
@media (max-width: 991.98px) {
    .products-selection__sort {
        flex: 0 0 100%;
        justify-content: center;
    }

    .products-sort-order,
    .products-sort-order .select-title {
        width: auto;
    }
}

/* Combobox de filtros */
.products-sort-order .select-title {
    appearance: none;
    width: 100%;
    padding: 12px 10px 12px 14px;
    font-size: 16px;
    font-weight: 500;
    color: #2c2c2c;
    background-color: var(--color-white);
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.products-sort-order .select-title:hover {
    border-color: #b5b5b5;
}

.products-sort-order .select-title:focus {
    outline: none;
    border-color: var(--color-pink);
}

/* Opciones del dropdown */
.products-sort-order .dropdown-menu {
    margin-top: 8px;
    padding: 6px 0;
    border-radius: 10px;
    border: 1px solid var(--color-gray-border);
    background-color: var(--color-white);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    min-width: 220px;
}

.products-sort-order .dropdown-menu .select-list {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    text-decoration: none;
    transition: all 0.15s ease;
}

.products-sort-order .dropdown-menu .select-list:hover {
    background-color: var(--color-pink);
    color: var(--color-white);
}

/* Fondo blanco para el mosaico de productos */
#js-product-list > .products {
    background: var(--color-white);
    border-radius: 12px;
    padding-top: 2rem;
    margin-left: 0;
    margin-right: 0;
}

/* Boton "Volver arriba" de los listados (categoria, busqueda, novedades,
   ofertas). El tema padre lo pinta como un btn-secondary gris plano que se
   confunde con el fondo. Lo estilizamos como pill de marca (azul, como la
   paginacion y "Ver todas las marcas") para que se lea como un boton. */
#js-product-list .up {
    margin-top: 1rem;
    /* Centrado (el padre trae text-xs-right, que usa !important). */
    text-align: center !important;
}

#js-product-list .up .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-blue);
    color: var(--color-white);
    border: none;
    border-radius: var(--btn-radius);
    padding: 9px 18px;
    font-family: var(--font-brand);
    text-transform: uppercase;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: opacity var(--transition-fast);
}

#js-product-list .up .btn:hover {
    opacity: 0.88;
    color: var(--color-white);
}

#js-product-list .up .btn .material-icons {
    font-size: 18px;
    margin: 0;
}