.browsePageWrap {
    min-height: 500px;
}

.itemsBrowse {
    .itemsList();
}

.browsePage {
    margin-inline: auto;
    position: relative;
    max-width: var(--wrapper_width);

    .loadingSpinner {
        position: fixed;
        top: 50vh;
        left: 50vw;
        transform: translateX(-50%, -50%);
        z-index: 5;
    }

    .titleBanner {
        padding: 170px 0 60px;
        background: var(--light_color);
        min-height: 106px;

        .innerContentWrapper {
            justify-content: center;
            text-align: center;

            .titleWrap {
                justify-content: center;
                text-align: center;

                .innerText {
                    margin: 0;
                }
            }
        }
    }
}

.browseProducts {
    position: relative;
    transition: opacity 300ms;
    min-height: 300px;

    &.isLoading {
        opacity: 0.4;
        pointer-events: none;
        transition: opacity 300ms;
    }
}

.productList {
    --columns: 3;
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: 56px 16px;

    @media @flyout {
        --columns: 2;
    }

    @media @mobile {
        gap: 24px 12px;
    }
}

.noProducts {
    .flexCenter();
    padding: 20px;

    .noProductsTitle {
        .rems(28);
        font-weight: 600;
        color: var(--text_color);
    }
}

.productListWrap {
    margin-top: 36px;

    .swiper-wrapper {
        overflow: visible;
    }

    .swiper-button-prev,
    .swiper-button-next {
        width: 50px;
        height: 50px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity 200ms linear,
            visibility 200ms linear;

        &[disabled] {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition:
                opacity 200ms linear,
                visibility 200ms linear;
        }

        &:after {
            content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52" fill="none"><path d="M26.1698 0.601329C12.1986 0.601329 0.839354 11.9606 0.839354 25.9317C0.839355 39.9029 12.1986 51.2621 26.1698 51.2621C40.1409 51.2621 51.5002 39.9029 51.5002 25.9317C51.5002 11.9606 40.1409 0.601328 26.1698 0.601329ZM29.4236 38.3575L25.4782 34.4121L31.1837 28.7067L11.6649 28.7046L11.6649 23.1596L31.1837 23.1596L25.4782 17.4542L29.4236 13.5088L41.7949 25.9324L29.4236 38.3575Z" fill="%23165F59"/></svg>');
            font-size: 0;
            width: 100%;
            height: 100%;
            transform: translate(-50%, -50%) rotate(0deg);
            background: transparent;
        }

        &.swiper-button-disabled {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        &:hover,
        &:active,
        &:focus-visible {
            opacity: 0.8;
            transition:
                opacity 200ms linear,
                visibility 200ms linear;
        }
    }

    .swiper-button-next {
        right: -5vw;

        @media all and (max-width: 1400px) {
            right: -16px;
        }
    }

    .swiper-button-prev {
        left: -5vw;

        @media all and (max-width: 1400px) {
            left: -16px;
        }

        &:after {
            transform: translate(-50%, -50%) rotate(-180deg);
        }
    }

    .swiper {
        &.hideArrows {
            .swiper-button-prev,
            .swiper-button-next {
                @media all and (min-width: 1201px) {
                    display: none;
                }
            }
        }
    }
}

.productListCard {
    --image-scale: 1;
    --image-min-h: 475px;
    --image-padding: 70px;
    .flexCenter(16px, column, start);
    height: 100%;
    position: relative;

    &:hover {
        cursor: pointer;
        --image-scale: 1.025;
    }

    @media @flyout {
        --image-min-h: 350px;
    }

    @media @mobile {
        --image-min-h: 200px;
        --image-padding: 15px;
        gap: 8px;
    }

    .basketActions {
        width: 100%;
        margin-top: auto;

        .addToBagButton {
            display: block;
        }

        div {
            // Overwrite margin from basket form
            margin: 0;
        }

        @media @above_mobile {
            display: none;
        }

        .productSizes {
            display: none;
        }
    }

    &__image {
        .flexCenter();
        overflow: hidden;
        position: relative;
        padding: var(--image-padding);
        background-color: var(--background_color);
        border-radius: 24px;
        aspect-ratio: 1;
        width: 100%;

        img {
            position: relative;
            max-width: 100%;
            max-height: 100%;
            scale: var(--image-scale);
            transition: scale var(--transition);
            z-index: 1;
        }
    }

    &__off {
        .rems(16);
        font-weight: 600;
        color: var(--text_color_light);
        position: absolute;
        top: 16px;
        left: 16px;
        background-color: var(--alert_color_background);
        border-radius: 8px;
        padding: 4px 10px;
        z-index: 2;
    }

    &__info {
        width: 100%;
    }

    &__name,
    &__options,
    &__price {
        margin: 0;
    }

    &__name {
        .rems(20);
        font-weight: 600;
        color: var(--text_color);

        @media @mobile {
            .rems(16);
        }
    }

    &__options {
        .rems(14);
        font-weight: 600;
        color: var(--text_color_light);
        margin-top: 8px;
    }

    &__price {
        .flexCenter(8px, row, flex-start);
        .rems(18);
        font-weight: 500;
        color: var(--text_color);
        margin-top: 8px;

        @media @mobile {
            .rems(16);
        }
    }
}
