/*
 * Listados de productos (pages/products/product.listExt.php).
 *
 * Móvil: los bloques van en el orden del HTML (título e introducción, filtros plegados, productos).
 * Desde tablet (md, 768px): el lateral de filtros ocupa la columna izquierda entera, con las mismas medidas que
 * tenía como col-sm-3 junto a una col-sm-9. Por debajo, con un 25 % el lateral quedaba en unos 100px.
 */
@media (min-width: 768px) {
    .product-list-layout {
        display: grid;
        grid-template-columns: calc(25% - 22.5px) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "sidebar header"
            "sidebar list";
        column-gap: 30px;
    }

    .product-list-layout__header {
        grid-area: header;
    }

    .product-list-layout__sidebar {
        grid-area: sidebar;
        padding-bottom: 1rem;
    }

    .product-list-layout__list {
        grid-area: list;
        align-self: start;
    }
}

@media (max-width: 767.98px) {
    .product-list-layout__sidebar {
        margin-bottom: 1rem;
    }
}

/* Barra de resultados, productos por página y ordenación: en móvil, la ordenación baja a su propia línea. */
.product-list-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

.product-list-control__count {
    margin-right: auto;
}

.product-list-control__sort {
    flex: 1 0 100%;
}

@media (min-width: 768px) {
    .product-list-control__sort {
        flex: 0 1 auto;
        width: auto;
    }
}