/*
 * Customer-facing Webshop catalogue: Grid view only.
 *
 * Webshop renders both List and Grid markup and can rebuild the toolbar after
 * filter changes. These CSS rules make the visible result deterministic even
 * if the native JavaScript renders its List/Grid controls later.
 */

/* Remove the native List / Grid switch everywhere the Webshop ProductView is
 * used. */
#product-listing .toolbar > .toggle-container,
#product-listing #toggle-view,
#product-listing #list,
#product-listing #image-view {
    display: none !important;
}

/* Never expose the List product layout to customers. */
#product-listing #products-list-area,
#products-list-area {
    display: none !important;
}

/* Webshop renders the Grid area even when the stored preference is List View,
 * but adds .hidden. Override that state so Grid is always the visible view. */
#product-listing #products-grid-area,
#product-listing #products-grid-area.hidden,
#products-grid-area,
#products-grid-area.hidden {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Reclaim the toolbar width that was previously reserved for the view toggle. */
#product-listing .toolbar > .input-group {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

#product-listing .toolbar > .input-group.col-8 {
    max-width: 100% !important;
}

@media (max-width: 767.98px) {
    #product-listing .toolbar {
        align-items: center !important;
    }

    #product-listing .toolbar > .input-group {
        width: 85vw !important;
        max-width: 540px !important;
        margin: 0 auto !important;
    }
}