/*
 * iLovePrints - Category toolbar mobile divider fix
 *
 * Fixes the broken lower horizontal line under the FILTER button on mobile.
 * Desktop remains untouched.
 */

@media (max-width: 767px) {
    /*
     * Target only the first category product toolbar.
     */
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-template-areas:
            "filter sorter"
            "divider divider"
            "amount views" !important;

        column-gap: 14px !important;
        row-gap: 14px !important;

        align-items: center !important;
        position: relative !important;

        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /*
     * Hide default Magento modes wrapper on mobile.
     * The visible grid/list icons are handled by .dynamic-grid-view.
     */
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type > .modes {
        display: none !important;
    }

    /*
     * Flatten the left/right wrappers so their children align in one grid.
     * This prevents each wrapper from drawing its own border line at different heights.
     */
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type > .toolbar-filter,
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type > .custom-view-sorter {
        display: contents !important;

        border: 0 !important;
        box-shadow: none !important;
        background: none !important;

        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    /*
     * Remove possible divider lines from toolbar wrappers and inner toolbar controls.
     * Important: we do NOT target .filter-toggle-button::before/after,
     * because those are used for the filter icon / button animation.
     */
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type > .toolbar-filter::before,
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type > .toolbar-filter::after,
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type > .custom-view-sorter::before,
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type > .custom-view-sorter::after,
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type .toolbar-sorter::before,
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type .toolbar-sorter::after,
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type .dynamic-grid-view::before,
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type .dynamic-grid-view::after,
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type .toolbar-amount::before,
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type .toolbar-amount::after {
        content: none !important;
        display: none !important;
        border: 0 !important;
        box-shadow: none !important;
        background: none !important;
    }

    /*
     * Row 1 left: FILTER button.
     */
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type .filter-toggle-button {
        grid-area: filter !important;
        justify-self: start !important;
        align-self: center !important;

        margin: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type .filter-toggle-button:hover,
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type .filter-toggle-button:focus-visible,
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type .filter-toggle-button:active {
        box-shadow: none !important;
        transform: none !important;
    }

    /*
     * Row 1 right: sorter.
     */
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type .toolbar-sorter {
        grid-area: sorter !important;
        justify-self: end !important;
        align-self: center !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;

        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        box-shadow: none !important;
        background: none !important;
        white-space: nowrap !important;
    }

    /*
     * One single divider line.
     * This replaces the broken left/right split lines.
     */
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type::after {
        content: "" !important;
        grid-area: divider !important;

        display: block !important;
        width: 100% !important;
        height: 1px !important;

        background: rgba(15, 23, 42, 0.28) !important;
        border: 0 !important;
        box-shadow: none !important;

        pointer-events: none !important;
    }

    /*
     * Row 2 left: product count.
     */
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type .toolbar-amount {
        grid-area: amount !important;
        justify-self: start !important;
        align-self: center !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        box-shadow: none !important;
        background: none !important;
    }

    /*
     * Row 2 right: grid/list icons.
     */
    body.catalog-category-view #amasty-shopby-product-list > .toolbar.toolbar-products:first-of-type .dynamic-grid-view {
        grid-area: views !important;
        justify-self: end !important;
        align-self: center !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        box-shadow: none !important;
        background: none !important;
    }
}