/* желтый фон background-color: rgb(251, 240, 234);
голубой фон background-color: rgb(234, 251, 250);
розовый фон background-color: rgb(246, 238, 244);*/

@font-face {
    font-family: 'GoodVibesCyr';
    src: url('fonts/GoodVibesCyr.ttf');
}

body {
    color: #0b2058;
    background-color: #F5F4F3;
}

body, div, a, p, span, h1, h2, h3, h3, h4, h5, h6 {
    color: #0b2058;
    margin: 0;
    padding: 0;
}

li .caret {
    color: #0b2058;
}

li .caret ::after {
    color: #0b2058;
}

a {
    color: inherit;
    text-decoration: none;
}

a ::after {
    color: inherit;
    text-decoration: none;
}

.container {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}
.breadcrumb li{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    opacity: .7;
}
.top-menu {
    position: absolute;
    background-color: rgba(145, 226, 246, 0.17);
    height: 50px !important;
    top: 0;
}

.top-link {
    height: 50px !important;
}

.w-logo {
    max-width: 100%;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgb(4, 16, 48)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.btn-menu {
    border: 0;
    color: inherit;
    padding: 0;
    -webkit-appearance: none;
}

.navbar-toggler {
    border: 0;
    box-shadow: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.dropdown-menu {
    --bs-dropdown-min-width: 15rem;
    background-color: rgba(232, 249, 253);
    border: 0;
    box-shadow: 1px 1px 1px 1px rgba(232, 249, 253);
}

.dropdown-toggle::after {
    display: inline-block;
    margin: 0;
    content: "";
    border: none !important;
}

.dropdown-menu.show {
    color: #0b2058;
    display: block;
    width: 300px;
    font-weight: 500;
    line-height: 2.5;
}

.dropdown-item {
    color: #0b2058;
    font-weight: 500;
    padding-left: 1em;
}

.breadcrumb {
    margin: 0 0 20px 0;
    padding: 5px 0;
}

.breadcrumb i {
    font-size: 15px;
}

.breadcrumb > li {
    padding: 0 3px;
    position: relative;
    white-space: nowrap;
}

.breadcrumb > li + li:before {
    content: '>';
    padding: 0 5px;
}

.top-main-text {
    font-family: 'GoodVibesCyr', Arial, sans-serif;
    display: flex;
    justify-content: center;
    margin: 15px 0 50px 0;
    text-align: center;
}

.top-main-text p {
    font-size: 2rem;
    margin-top: 25px;
}

.top-main-text img {
    width: 64px;
    height: 64px;
}

.category-row {
    padding: 0;
    margin: 0;
}

.image {
    max-width: 100%;
    width: auto;
    border-radius: 10px;
}

.category-row {
    padding: 0;
    margin: 0;
}

.image {
    max-width: 100%;
    width: auto;
    border-radius: 10px;
}

.category-block {
    position: relative;
    text-align: center;
}

.caption {
    width: fit-content;
    position: absolute;
    background-color: #F5F4F3;
    border-radius: 5px;
    top: 8px;
    left: 50%;
    transform: translate(-50%, 0);
}

.category-banner {
    box-shadow: 1px 1px 4px 4px #ba182a;
}

.category-slider-container {
    max-width: 400px;
    height: auto;
}

.slider-container {

    width: 420px;
    height: 280px;

}

.category-slider-text {
    position: absolute;
    top: 10px;
    z-index: 10;
}

.img-container {
    object-fit: contain;
}

.gallery-block {
    margin: 4em 0;
    padding: 3em 0;
    background-color: rgb(234, 251, 250);
    border-radius: 10px;
    min-height: 290px;
}

i .gallery-block {
    color: #0b2058;
}

.hit-block {
    background-color: rgb(234, 251, 250);
    border-radius: 10px;
}
.special-block {
    background-color: rgb(246, 238, 244);
    border-radius: 10px;
}
.special-block .product-card-set {
    background-color: rgb(246, 238, 244);
}
.special-block .product-card-set:hover {
    box-shadow: 0 0 4px 1px rgb(253 185 226);
}
i .hit-block {
    color: #0b2058;
}

.slider-block {
    background-color: rgb(251, 240, 234);
    border-radius: 10px;
    padding: 5rem 0;
}

i .hit-block {
    color: #0b2058;
}

.slick-prev:before, .slick-next:before {
    color: #0b2058 !important;
}

.slick-slide, .slick-current, .slick-active {
    border: none !important;
}

.button-small {
    background-color: #e64c3c;
    color: #F5F4F3;
    border-radius: 5em;
    border-width: 0;
    text-align: center;
    font-size: 0.8em;
    padding-bottom: 3px;
    transition: 0.5s;
}

.button-small:hover {
    background-color: #ec6d60;
}

.button-small:active {
    background-color: #f05347; /* Красный фон у активной кнопки */
}

.middle-widget {
    display: flex;
    justify-content: space-around;
    margin: 6em 1em 6em 1em;
}

.middle-widget__block {
    text-align: center;
}

.middle-widget__block p {
    font-weight: 600;
}

.slick-track-products {
    left: -12px !important;
}

.product-card-set {
    border-radius: 10px;
    background-color: rgb(234, 251, 250);
}
.w-98 {
    width: 98% !important;
}
.gallery-slider-set {
    background-color: rgb(251, 240, 234);
    border-radius: 10px;

}
.gallery-slider-set div p{
    background-color: rgb(251, 240, 234);
}
.banner-slide .slick-next {
    right: -16px !important;
}
.product-card-set__name {
    height: 70px;
    overflow: hidden;
    padding: 0 1rem;
    position: relative;
    line-height: 1.3em;
}


.product-layout {
    border-radius: 10px;
    margin: 0 10px;
    width: 100%;
}
.product-name {
    height: 5em;
    overflow: hidden;
}
.price-old {
    display: inline-block;
    position: relative;
    text-decoration: line-through;
    color: #4a4a4a;
    top: -10px;
}

.btn-product {
    background-color: rgb(52, 107, 137);
    color: #F5F4F3;
    border: 0;
    border-radius: 5px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    padding: 0.2em 1em;
}

.btn-big {
    padding: 0.5em 2em;
}

.btn-product:hover {
    background-color: rgb(111, 162, 189);
    color: #F5F4F3;
}

.btn-product:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            120deg,
            transparent,
            rgb(52, 107, 137, 0.4),
            transparent
    );
    transition: all 1000ms;
}

.btn-product:hover:before {
    left: 100%;
}

.btn-product:active {
    background-color: #8fb8cf;
    color: #F5F4F3;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.count-cart, .count-wish{
    margin-right: 0;
    position: relative;
    left: -10px;
    top: -5px;
    display: inline;
    font-size: smaller;
    background: #7bb7bd!important;
    text-align: center;
    border-radius: 50%!important;
    padding: 1px 7px 2px!important;
}
.count-wish{
    left: -7px!important;
}
.count-cart span, .count-wish span{
    color: #F5F4F3!important;
}
a:hover{
    opacity: .7;
}
.image-block-size {
    width: 75%;
}
.product-image {
    width: 100%;
    margin: 0 auto;
    border-radius: 10px;
}

.option-block {
    width: 70%;
    left: 10% !important;

}

.slick-prev:before, .slick-next:before {
    font-size: 30px !important;
    color: #81aec5 !important;

}
.slick-prev, .slick-next {
    z-index: 10;
}
.slick-next {
    right: -16px !important;
}

.slick-prev {
    left: -26px !important;
}
.option-block .slick-next {
    right: -20px !important;
}
.option-block .slick-prev {
    left: -20px!important;
}
.option-block .slick-prev:before, .option-block .slick-next:before {
    color: #81aec5 !important;
    font-size: 20px !important;
}

.option-block .slick-prev, .option-block .slick-next {
    top: 45% !important;
    opacity: 0.6;
}
.single-item .slick-prev {
    left: -35px!important;
}
.single-item .slick-next {
    right: -25px!important;
}
.product-sort {
    margin: auto 1em;
}
.product-sort span{
    font-size: 16px;
    color: #23a1d1;

}
.product-sort-active span{
    font-size: 16px;
    color: #0b2058;

}
.option-select-block:focus {
    box-shadow: none!important;
}

.option-select-block option {
    box-shadow: 0 0 4px 1px #9e9e9e;
    color: #0b2058!important;
}

.option-select:focus {
    background: #8fb8cf !important;
}

input[type="radio"] {
    width: 25px;
    height: 25px;
    margin: 5px;
}

.radio-input-block {
    margin-top: 5px;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

.radio-label {
    padding-left: 5px;
    font-weight: 500;
}

.radio-input {
    position: relative !important;
    appearance: none;
    box-shadow: 0 0 2px 1px #8fb8cf;
    border-radius: 5px;
    transition: 500ms;
}

.radio-input:after {
    content: "\2713";
    color: rgb(52, 107, 137);
    position: absolute;
    top: -4px;
    left: 4px;
    width: 0px;
    height: 0px;
    font-size: 22px;
    font-weight: 500;
    transition: 300ms;
    overflow: hidden;
}

.radio-input:checked::after {
    width: 25px;
    height: 25px;
    transition: 300ms;

}
.price-special span{
    color: #d32512;
}


.modal-slide .modal-dialog-slideout {
    min-height: 90%;
    margin: auto 0 0 0; /* Выравнивание по левому краю */
    background: #F5F4F3;
    border-radius: 1rem;
}

.modal-slide .modal-content {
    border: none; /* Убираем рамку */
}

/* Начальная позиция (вне экрана слева) */
.modal-slide .modal-dialog-slideout {
    transform: translate3d(-100%, 0, 0);
    margin: auto 1rem 1rem 0;
}

/* Анимация при открытии */
.modal-slide.show .modal-dialog-slideout {
    transform: translate3d(1%, 0, 0);
    transition: transform 0.6s ease-out; /* Настройте время и тип анимации */
}
/* Модальное окно товар добавлен */
.modal-alert {
    display: none; /* Скрыто по умолчанию */
    position: fixed; /* Зафиксировано по экрану */
    z-index: 2000; /* Расположено поверх всего */
    left: 0;
    top: 0;
    width: 100%; /* Полная ширина */
    height: 100%; /* Полная высота */
    background-color: rgba(0,0,0,0.4); /* Черный с затемнением */
}
.modal-alert__on {
    display: block!important;
}
.modal-alert__content {
    background-color: #F5F4F3;
    margin: 15% auto; /* 15% сверху и по центру */
    border: 1px solid #F5F4F3;
    box-shadow: 0 0 4px 1px rgb(52, 107, 137);
    border-radius: 1em;
    width: 30%; /* Ширина контента */
}

.modal-alert__btn {
    background-color: rgb(52, 107, 137);
    color: #F5F4F3;
    border: 0;
    border-radius: 10px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    padding: 0.1em 1em .2em;
}
.modal-alert__btn p {
    color: #F5F4F3;
}
.modal-alert__btn:hover {
    opacity: .8;
}
#footer-dark-schema{
    background-color: #3e3e3e !important;
}
#footer-dark-schema div.container h5, #footer-dark-schema div.container a{
    color: #a8a7a7 !important;
}
@media (max-width: 768px) {
    .modal-slide .modal-dialog-slideout {
        width: 90%; /* Занимаем 90% ширины экрана */
        margin: auto; /* Центрируем */
        min-height: 100%;
    }
}


@media (max-width: 390px) {
    .slider-container, .category-slider-container {
        max-width: 360px!important;
        height: auto;
    }

    .category-slider-container img {
        height: 360px!important;
    }
}

@media (max-width: 320px) {
    .slider-container, .category-slider-container {
        width: 300px !important;
        height: auto;
    }
}

@media (max-width: 576px) {
    .slider-block, .gallery-slider-set div p, .gallery-slider-set div, .gallery-block, .hit-block, .special-block {
        background-color: #F5F4F3;
    }
    .slider-block {
        padding: 0;
    }
    .slick-prev, .slick-next {
        display: none !important;
    }
    .category-slider-container img {
        height: 400px;
    }

    .top-menu {
        background-color: rgba(145, 226, 246, 0.17);
        position: fixed;
        top: 0;
        z-index: 10;
        backface-visibility: hidden;
    }

    .top-main-text {
        margin: 0 0.5em 30px 0.5em;

    }

    .top-main-text img {
        width: 40px;
        height: 40px;
    }

    .top-main-text p {
        font-size: 1.8rem;
        margin-top: 10px;
    }

    .option-block {
        width: 75%;
        left: 10% !important;
    }
    .slider-container{
        max-width: 390px;
        height: auto;
    }
    .product-sort, .product-sort-active {
        margin: .5em;
    }
    .product-sort span, .product-sort-active span{
        font-size: 12px;
        font-weight: 400;
    }
    .modal-alert__content {
        margin: 50% auto;
        width: 90%;
    }
}

@media (min-width: 410px) {
    .product-layout {
        margin: auto 5px;
        width: 47%;
    }
    .modal-container {
        --bs-modal-width: 380px!important;
    }
}
@media (min-width: 576px) {
    .container {
        max-width: 100%;
    }

    .image {
        width: 100%;
    }
    .modal-container {
        --bs-modal-width: 560px!important;
    }
    .product-card-set:hover {

        box-shadow: 0 0 3px 1px #346B89FF;
    }

}

@media (min-width: 768px) {
    .container {
        max-width: 100%;
    }
    .product-layout {
        margin: auto 5px;
        width: 31%;
    }
    .modal-container {
        --bs-modal-width: 750px!important;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
    .product-layout {
        margin: auto 10px;
        width: 32%;
    }
    .modal-container {
        --bs-modal-width: 960px!important;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    .product-layout {
        margin: auto 10px;
        width: 24%;
    }
    .modal-container {
        --bs-modal-width: 1140px!important;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }

}

@media (max-width: 768px) {
    .w-logo {
        max-width: 50%;
    }

    .middle-widget {
        display: block;
        justify-content: center;
        margin: 4em 1em 5em;
    }

    .middle-widget__block {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 4em 0;
    }

    .middle-widget__block img {
        width: 100px;
        height: auto;
    }
    .slick-prev:before, .slick-next:before {
        display: none;

    }

}
@media (max-width: 992px) {
    .image-block-size {
        width: 100%;
    }
}