/**
 * Herbalist
 * Herbalist – is a website template created for selling the cannabis, medical marijuana and CBD products, cannabis blogging and others
 * Exclusively on https://1.envato.market/herbalist-html
 *
 * @encoding        UTF-8
 * @version         1.0.0
 * @copyright       (C) 2018 - 2021 Merkulove ( https://merkulov.design/ ). All rights reserved.
 * @license         Envato License https://1.envato.market/KYbje
 * @contributors    Lamber Lilit (winter.rituel@gmail.com)
 * @support         help@merkulov.design
 **/
// shop main content

.shop {

    &_panel {

        font-size: 14px;
        width: 100%;
        margin: 40px 0 0;

        .label {
            display: none;
        }

        .chosen {
            &-item {
                line-height: 1;
                border: 1px solid $primaryHighlight;
                border-radius: 100px;
                padding: 10px;
                margin: 10px 10px 0 0;
                font-size: 14px;

                .icon {
                    margin-left: 5px;
                }
            }
        }

        .showing {
            display: block;
            width: 100%;
            font-weight: 600;
            color: $primary;
            margin-top: 15px;
        }

        .filterTrigger, .custom-select-opener {
            border: 1px solid $primaryHighlight;
            border-radius: 100px;
            height: 48px;
        }

        .custom-select-opener {
            display: inline-flex;
            align-items: center;
            padding: 0 13px;

            &:after {
                right: 13px;
            }
        }

        .filterTrigger {
            font-size: 14px;
            line-height: 1;
            color: $primary;
            font-weight: 600;
            width: 115px;

            .icon {
                margin-left: 5px;
                font-size: 18px;
            }
        }
    }

    &_products {
        order: 4;
        margin-top: 40px;

        &-list {
            &_item {
                margin-bottom: 30px;

                &:last-of-type {
                    margin-bottom: 0;
                }
            }
        }
    }
}

.pagination {
    margin-bottom: 0;
}

.promo_banner--big {
    margin-bottom: 0;
}

// media queries

@media screen and (min-width: 575.98px) {
    .shop {
        &_panel {
            .label {
                display: flex;
                align-items: center;
                margin-right: 5px;
            }
        }

        &_products {
            &-list {
                margin: 0 -15px;

                &_item {
                    padding: 0 15px;

                    &[data-order="8"] {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 767.98px) {
    .shop {

        &_aside {
            &-wrapper {
                margin-top: 30px;
            }
        }

        &_products {

            &-list {
                &_item {

                    &[data-order="8"] {
                        margin-bottom: 30px;
                    }
                }
            }
        }
    }

    .promo_banner--big, {
        width: 100%;
    }

}

@media screen and (min-width: 991.98px) {
    .shop {
        &-wrapper {
            .container.d-lg-grid {
                grid-template-columns: 1fr 362px;
                justify-items: end;
            }
        }

        &_aside {
            &-wrapper {
                margin-top: 0;
            }
        }

        &_panel {
            margin: 60px 0 40px;
            grid-area: 2 / 1 / 3 / 2;

            .showing {
                width: unset;
                margin-top: 0;
            }

            .label {
                margin-right: 20px;
            }

            .custom-select-opener {
                padding: 0;
                border: none;
                height: unset;
                width: unset;

                &:after {
                    right: -20px;
                }
            }
        }

        &_products {
            margin-top: 0;
            grid-area: 3 / 1 / 4 / 2;

            &-list {
                margin: 0 -20px;

                &_item {
                    padding: 0 20px;
                    margin-bottom: 40px;
                }
            }
        }
    }
    .pagination {
        margin-top: 60px;
        margin-bottom: 0;
        grid-area: 4 / 1 / 5 / 2;
    }

    .promo_banner--big {
        grid-area: 1 / 1 / 2 / 2;
    }

}

@media screen and (min-width: 1199.98px) {
    .shop {
        &_products {
            &-list {
                &_item {
                    &[data-order="7"],
                    &[data-order="8"] {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}