/* Mobile presentation for the native category and search grids. */
@media (max-width: 767px) {
    body:is(.catalog-category-view, .catalogsearch-result-index) #filters-heading > button {
        min-height: 44px;
        padding-inline: 2px;
    }

    body:is(.catalog-category-view, .catalogsearch-result-index) #filters-heading > button > span:first-child {
        color: #153929;
        font-size: 1.0625rem;
        text-transform: none;
    }

    body:is(.catalog-category-view, .catalogsearch-result-index) #filters-content .filter-options-title,
    body:is(.catalog-category-view, .catalogsearch-result-index) #filters-content .items a {
        min-height: 44px;
        align-items: center;
    }

    #product-list .toolbar-products:has([data-role="sorter"]) {
        background: #eff7f1;
        border-color: #d6e5da;
        border-radius: 8px;
    }

    #product-list .toolbar-products:has([data-role="sorter"]) > div > div:first-child {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px;
    }

    #product-list .toolbar-products:has([data-role="sorter"]) > div > div:first-child > span:first-child {
        display: none;
    }

    #product-list .toolbar-products span:has(> .ah-catalogue-view) {
        display: block;
    }

    #product-list .ah-catalogue-view {
        display: inline-flex;
        gap: 4px;
    }

    #product-list .ah-catalogue-view button {
        min-width: 44px;
        min-height: 44px;
        padding: 5px 8px;
        border: 1px solid #b9cec1;
        border-radius: 5px;
        background: #fff;
        color: #153929;
        font-size: .8125rem;
        font-weight: 650;
    }

    #product-list .ah-catalogue-view button[aria-pressed="true"] {
        background: #006b32;
        border-color: #006b32;
        color: #fff;
    }

    #product-list .toolbar-amount-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 8px;
    }

    #product-list .toolbar-amount-wrapper > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-size: .8125rem;
    }

    #product-list .toolbar-amount-wrapper > .toolbar-amount {
        font-size: .8125rem;
    }

    #product-list .mode-grid .product-item {
        height: 100%;
        min-width: 0;
        border-color: #dae8de;
        border-radius: 8px;
    }

    #product-list .mode-grid .product-item-photo {
        padding: 8px;
        background: #fafcfb;
    }

    #product-list .mode-grid .product-item-photo > div {
        width: 100%;
        min-height: 0;
        aspect-ratio: 1;
    }

    #product-list .mode-grid .product-item-photo .product-image-container {
        max-width: 100%;
    }

    #product-list .mode-grid .product-image-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        object-fit: contain;
    }

    #product-list .mode-grid .product-info > div {
        min-width: 0;
        padding: 9px;
    }

    #product-list .mode-grid .product-info > div:first-child > div {
        margin-bottom: 6px;
    }

    #product-list .mode-grid .product-info > div:first-child > div:first-child {
        font-size: .875rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    #product-list .mode-grid .product-info > div:last-child > div:first-child {
        margin-bottom: 6px;
        font-size: 1.125rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    #product-list .mode-grid .product-info > div:last-child > div:last-child {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    #product-list .mode-grid .product-info > div:last-child > div:last-child > :is(a, button) {
        margin: 0;
        min-height: 44px;
        padding: 6px 4px;
        font-size: .8125rem;
        line-height: 1.15;
    }

    #product-list .mode-grid .product-info > div:last-child > div:last-child > button[type="submit"] {
        gap: 4px;
    }

    #product-list .mode-grid .product-info > div:last-child > div:last-child > button[type="submit"] svg {
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
    }

    #product-list .mode-grid .product-info > div:last-child > div:last-child > a {
        display: none;
    }
}

@media (max-width: 639px) {
    #product-list .mode-grid > ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}