@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap");
@import "reset.css";
@import "header.css";
@import "footer.css";

body {
    min-height: 100vh;
}
.active{
    color: var(--orange-color);
    transform: scale(1.1);
}
.no_overflow{overflow: hidden;}
main {
    flex: 1;
    background-color: var(--white);
    padding-top: var(--second-margin);
}
main.order-main {
    padding-top: 0;
}
.section-container {
    margin-top: 100px;
}
.section-container:first-of-type {
    margin-top: 0;
}
.section-container:last-of-type {
    padding-bottom: 100px;
}

.preloader {
    position: fixed;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    inset: 124px 0 0;
    background-color: var(--white);
}
.preloader_inner > * {
    display: block;
}
.preloader_image {
    max-width: 35px;
    margin: 0 auto;
    animation: rotate 5s ease-in-out infinite;
}
@keyframes rotate {
    to {
        rotate: 359deg;
    }
}

.banner-container {
    position: relative;
    z-index: 0;
    border-radius: 10px;
    background: center / cover no-repeat;
    overflow: hidden;
}
.banner_image {
    width: 100%;
    max-height: 650px;
    object-fit: cover;
}
.banner_overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        90deg,
        #1c0a00 10%,
        rgba(28, 10, 0, 0) 30%
    );
}
.banner1 .banner_overlay {
    background-image: none;
}
.banner-text_right + .banner_overlay {
    background-image: linear-gradient(
        -90deg,
        #111 28%,
        rgba(17, 17, 17, 0) 51%
    );
}

.banner-shadow {
    position: absolute;
    top: 44px;
    left: 59px;

    width: 375px;
    height: 564px;

    border-radius: 564px;
    filter: blur(163px);
    flex-shrink: 0;
}
.banner-shadow_black {
    background-color: black;
}
.banner-shadow_brown {
    background-color: #1c0a00;
}
.banner-shadow_darkbrown {
    background-color: #1c0a00;
}
.banner-shadow_right {
    left: auto;
    right: 150px;
}

.banner-text {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 168px;
}
.banner-text p,
.banner-text a {
    color: var(--white);
    text-align: center;
    text-transform: uppercase;
    line-height: 140%;
}
.banner-text_left {
    margin-left: 114px;
}
.banner-text_right {
    margin-left: auto;
    margin-right: 100px;
}
.banner-text p.banner-text_big {
    font-size: 98px;
    font-weight: 600;
    line-height: 141px;
    position: relative;
}
.banner-text p.banner-text_medium {
    font-size: 44px;
    font-weight: 600;
    width: 100%;
}
.banner-text p.banner-text_little {
    font-size: 24px;
    max-width: 443px;
    text-transform: none;
    padding: 0 15px;
}
.banner-text_span {
    position: absolute;
    text-align: center;
    font-size: 19px;
    font-weight: 600;
    top: -10px;
    left: -3px;
}
.banner-button {
    margin-top: 41px;
    border-radius: 3px;
    border: 2px solid var(--white);
    background-color: transparent;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 9px 70px;
}

.section-title {
    margin-top: var(--main-margin);
    color: var(--main-color);
    font-size: 24px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
}
.view-all {
    color: var(--orange-color);
    font-size: 14px;
    font-weight: 500;
}
.items_container {
    display: flex;
    /* justify-content: space-between; */
    /*margin: 8px -12px 0;*/
    position: relative;
    row-gap: 4px;
    column-gap: 10px;
    margin-top: 8px;
}
.products-list-container{width: 100%;}
.products-list{
    margin: 8px -6px 0 -6px;
    width: calc(100% + 12px);
}
    .products-list .slick-list{
        margin: -20px -10px -24px;
        padding: 20px 10px 24px;
        width: calc(100% + 20px);
    }
    .products-list .slick-slide{
        margin: 0 6px;
        max-width: 100%;
    }
    .products-list-container .slick-arrow{
        border-bottom: 2px solid var(--gray-color);
        cursor: pointer;
        height: 14px;
        overflow: hidden;
        position: absolute;
        text-indent: -99999px;
        top: calc(50% - 7px);
        width: 14px;
        z-index: 1;
    }
    .products-list-container .slick-prev{
        border-left: 2px solid var(--gray-color);
        left: -18px;
        transform: rotate(45deg);
    }
    .products-list-container .slick-next{
        border-right: 2px solid var(--gray-color);
        right: -18px;
        transform: rotate(-45deg);
    }
.items-navigation {
    display: flex;
    position: absolute;
    justify-content: space-between;
    top: calc(50% - 7px);
    right: -18px;
    left: -18px;
}
.item-nav {
    width: 14px;
    height: 14px;
    border-bottom: 2px solid var(--gray-color);
    cursor: pointer;
}
.item-prev {
    border-left: 2px solid var(--gray-color);
    transform: rotate(45deg);
}
.item-next {
    border-right: 2px solid var(--gray-color);
    transform: rotate(-45deg);
}

.item {
    padding: 12px;
    width: 100%;
    transition: all var(--main-transition);
    overflow: hidden;
}
.item:hover {
    border-radius: var(--main-border-radius);
    background: var(--white);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
}
.item:hover > .item-size_container {
    transform: translateX(0);
    visibility: visible;
}
.item-image {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--light-gray-color);
    padding: 46px 10px;
    cursor: pointer;
    height: 320px;
    position: relative;

    .item_second-image,
    .item_first-image {
        width: 100%;
        height: 100%;
        max-height: 320px;
        object-fit: cover;
    }
}
.item-image,
.item-image > img {
    border-radius: 10px;
}

.item-image > img {
    position: absolute;
    transition: all 0.3s cubic-bezier(0.66,0,0.2,1);
}
.item_first-image {
    opacity: 1;
}
.item_second-image {
    opacity: 0;
}
.item:hover .item_second-image {
    opacity: 1;
}
.item:hover .item_first-image {
    opacity: 0;
}

.select-like {
    transform: scale(1.2);
    fill: var(--main-color);
}
.item-like {
    position: absolute;
    top: 16px;
    right: 16px;

    height: auto;
    padding: 5px 4px;

    border-radius: 35%;
    transition: all var(--main-transition);
}

.item-promo {
    background-color: var(--main-color);
    position: absolute;
    top: 8px;
    left: 8px;

    color: var(--white);
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 8px 6px 10px;
    z-index: 0;
}
/*.item-promo::before {
    content: "";
    position: absolute;
    top: 0;
    right: -11px;
    width: 100%;
    background-color: var(--orange-color);
    transform: skewX(-10deg);
    z-index: -1;
}*/

.item-sale {
    background-color: var(--main-color);
}
.item-sale::before {
    background-color: var(--orange-color);
    bottom: 0;
}
.item-new {
    background-color: var(--main-color);
}
.item-new::before {
    background-color: var(--item-new-color);
    bottom: 0;
}

.item-addToCart {
    bottom: -8px;
    right: 8px;
    position: absolute;
    width: 57px;
    height: 57px;
    padding: 14px;
    background-color: var(--white);
    border-radius: 50%;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
    transition: all var(--main-transition);
}
.item-addToCart:hover {
    transform: scale(1.2);
}

.item-price {
    display: flex;
    align-items: center;
    line-height: 140%;
    text-transform: uppercase;
}
.item-price_new {
    color: var(--main-color);
    font-size: 14px;
    font-weight: 400;
}
.item-price_old {
    position: relative;
    color: var(--gray-color);
    font-weight: 500;
    margin-left: 12px;
}
.item-price_old:after {
    content: "";

    position: absolute;
    bottom: 10px;
    left: 0;

    width: 110%;
    height: 1px;

    border-radius: 5px;
    background-color: var(--main-color);
}
.item-title {
    margin-top: 12px;
    color: var(--main-color);
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.item-desc {
    margin-top: 4px;
    color: var(--gray-color);
    line-height: 140%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    text-transform: none;
}
.item-size_container {
    width: min-content;
    display: flex;
    transform: translateX(calc(-100% - 12px));
    transition: transform var(--main-transition), visibility 0.1s;
    visibility: hidden;
}
.item-size {
    margin-top: 4px;
    line-height: 140%;
    cursor: pointer;
    margin-right: 12px;
}
.item-size:last-of-type {
    margin-right: 0;
}
.item-size_disabled {
    color: var(--gray-color);
    cursor: default;
}

.buy-btn {
    color: var(--white);
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 8px;
    background: var(--main-color);
    width: 100%;
    max-width: 100%;
    margin-top: 16px;
    padding: 12px;
    cursor: pointer;
    transition: all var(--main-transition);
}
.buy-btn span {
    margin-left: 5px;
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid var(--white);
    border-right: 2px solid var(--white);
    transition: all var(--main-transition);
}
.buy-btn:hover {
    background-color: var(--white);
    color: var(--main-color);
    outline: 2px solid var(--main-color);
}
.buy-btn:hover span {
    border-bottom: 2px solid var(--main-color);
    border-right: 2px solid var(--main-color);
}

.size-select {
    width: 100%;
    padding: 10px;
    margin: 15px 0;

    border-radius: 5px;
    font-size: 18px;
    font-family: "Jost", Arial, sans-serif;
}

.select2.select2-container{
    max-width: 100%;
    min-width: 100%;
}
.item-view_right .select2.select2-container{margin: 15px 0;}
.view-mobile_info .select2.select2-container{margin-top: 16px;}
    .select2-container{z-index: 10;}
        .select2-container--default .select2-selection--single{
            align-items: center;
            background-color: #fff;
            border: 1px rgba(0,0,0,.1) solid;
            border-radius: 8px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            height: 48px;
            justify-content: flex-start;
            padding: 0 40px 0 16px;
            position: relative;
            transition: all .3s linear;
            width: 100%;
        }
        .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-radius: 8px;}
        .select2-container--default .select2-selection--single .select2-selection__rendered{
            color: var(--main-color);
            font-size: 14px;
            line-height: 18px;
            padding: 0;
        }
        .select2-container--default .select2-selection--single .select2-selection__placeholder{color: #979797;}
        .select2-container--default .select2-selection--single .select2-selection__arrow{
            height: 100%;
            right: 12px;
            top: 0;
            width: 24px;
        }
        .select2-selection__arrow:before{
            content: "";
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            transition: all .3s linear;
            width: 100%;
        }
        .select2-selection__arrow:before{background: url(../images/select.svg) center no-repeat;}
        .select2-container--default .select2-selection--single .select2-selection__arrow b{display: none;}
        .select2-dropdown,.select2-container--open .select2-dropdown--above,.select2-container--open .select2-dropdown--below{
            background-color: #fff;
            border: 1px rgba(0,0,0,.1) solid;
            border-radius: 8px;
            margin-top: 10px;
            max-height: 200px;
            padding: 7px 0;
            overflow-y: auto;
        }
            .select2-container--open .select2-dropdown--above{margin-top: -10px;}
            .select2-results__option{
                background-color: #fff;
                color: var(--main-color);
                font-size: 14px;
                line-height: 18px;
                padding: 6px 16px;
                transition: all .3s linear;
            }
            .select2-container--default .select2-results__option--selected{
                background-color: #fff;
                font-weight: 500;
                color: var(--orange-color);
            }
            .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
                background-color: #fff;
                color: #979797;
            }

.size-select.active {
    border-color: red;
    transform: none;
}
#download .popup_container {
    width: 430px;
}
#download .popup_header {
    padding-top: 24px;
}
#download .popup_header,
#download .popup_text {
    text-align: center;
    background-color: var(--white);
}
#download .popup_button {
    margin-bottom: 0;
}
.download-image {
    width: 190px;
    object-fit: cover;
    position: relative;
}
.download-image img {
    z-index: 2;
    position: relative;
}
.download-image span {
    width: 265px;
    height: 265px;
    right: 50%;
    transform: translateX(50%);
    bottom: -65px;
    z-index: -1;
    position: absolute;
    border-radius: 50%;
    background-color: var(--orange-color);
}

.orange {
    color: var(--orange-color);
}

.favorites_container h1 {
    margin-top: 0;
}

.triangle {
    width: 10px;
    height: 10px;
    display: block;
}
.triangle_black {
    border-bottom: 2px solid var(--main-color);
    border-right: 2px solid var(--main-color);
}
.triangle_gray {
    border-bottom: 2px solid var(--gray-color);
    border-right: 2px solid var(--gray-color);
}
.triangle_left {
    transform: rotate(135deg);
}
.triangle_right {
    transform: rotate(-45deg);
}
.mobile-subwindow {
    display: flex;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    transition: transform var(--main-transition);
    z-index: 14;
    background-color: var(--white);
    padding: 70px 20px 10px;
    flex-direction: column;
    overflow-y: auto;
    /*padding-top: 70px;*/
}
.mobile-subwindow .main-btn {
    margin-top: auto;
}
.mobile-subwindow_hidden {
    transform: translateX(120%);
}

.no-margin {
    margin: 0;
}

/* Супер общие стили */
.mobile-text_extra-big {
    font-size: 20px;
    line-height: 20px;
}
.mobile-text_main-color {
    color: var(--main-color);
}
.mobile-text_gray-color {
    color: var(--gray-color);
}
.mobile-text_medium {
    font-size: 14px;
    line-height: 14px;
}
.mobile-text_little {
    font-size: 12px;
    line-height: 12px;
}
.mobile-text_bold {
    font-weight: 500;
}
.mobile-text_normal {
    font-weight: 400;
}

.block-double {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.block-double > * {
    flex: 1 1 calc(50% - 10px);
    width: 100%;
    max-width: 100%;
}

.radio-select_container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;

    & label {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 100%;
        gap: 10px;
        & input {
            display: none;
        }
        .radio-selected {
            width: 22px;
            height: 22px;
            background-color: #d8d8d8;
            border-radius: 50%;
            border: 3px solid var(--white);
            outline: 1px solid #d8d8d8;
        }
    }
}
.radio-select_black {
    & input:checked + .radio-selected {
        background-color: var(--main-color);
        outline: 1px solid var(--main-color);
    }
}

.main-btn.prloder {
    position: relative;
}
.main-btn.prloder .btn-check-cart {
  position: absolute;
  top: 50%;
  right: 12%;
  transform: translateY(-62%);
  opacity: 0;
  transition: opacity 0.1s linear 0s;
}
.main-btn.prloder .btn-check-cart.active {
  opacity: 1;
}
.main-btn.prloder.active {
    pointer-events: none;
    background-color: gray;
    color: lightgray;
}
.main-btn.prloder.active::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: "";
    width: 48px;
    height: 48px;
    background: #fff;
    display: inline-block;
    border-radius: 50%;
    box-sizing: border-box;
    animation: animloader 1s ease-in infinite;
}

@keyframes animloader {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}