h1 {
    font-family: 'VelaSans', sans-serif;
    font-weight: 500;
}


body, html {
    height: 100%;

}

body {
    letter-spacing: 0.3px;
}

.d-flex-column {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*[data-brono-icon] {*/
/*    color: transparent;*/
/*}*/

[data-tippy-root] {
    border-radius: 0 !important;
    /*width: 100%;*/
    /*max-width: 100%;*/
    /*margin-left: 0;*/
    /*left: 0;*/
    /*margin-left: -5px !important;*/
}

.tippy-box[data-theme~=light] {
    border-radius: 0 !important;
    background-color: #fff;
    box-shadow: none;
    color: currentColor;
}

.fill-none {
    fill: none !important;
}

header .favorite-badge {
    position: absolute !important;
}

.menu-toggle {
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-size: 0;
    text-indent: -9999px;
    appearance: none;
    box-shadow: none;
    border-radius: 0;
    border: none;
    cursor: pointer;
    background: none;
    outline: none;
    width: 26px;
    height: 26px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.menu-toggle span:before, .menu-toggle span:after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 2px;
    min-height: 2px;
    content: "";
    border-radius: 2px;
    transition: all 0.4s ease;
    right: 0;
}

.menu-toggle span, .menu-toggle span:before, .menu-toggle span:after {
    background: #fff;
}

.menu-toggle.dark span, .menu-toggle.dark span:before, .menu-toggle.dark span:after {
    background: #000;
    /*background: #fff;*/
}


header.sticky .menu-toggle.dark span, header.sticky .menu-toggle.dark span:before, header.sticky .menu-toggle.dark span:after {
    background: #232323;
    /*background: #fff;*/
}


.bg-dark {
    --br-bg-opacity: 1;
    background-color: rgba(var(--br-dark-rgb), var(--br-bg-opacity)) !important;
}


header.page-home .basket-badge,
header.page-home .favorite-badge {
    background-color: #fff !important;
    color: #232323 !important;
}


header.page-home.sticky .basket-badge,
header.page-home.sticky .favorite-badge,
header.sticky .basket-badge,
header.sticky .favorite-badge {
    color: #fff !important;
    background-color: rgb(35, 35, 35) !important;
}

.sticky .menu-toggle span,
.sticky .menu-toggle span:after,
.sticky .menu-toggle span:before {
    background: #232323 !important;
}

.header-mobile-buttons {
    display: flex;
}


@media screen and (max-width: 600px) {
    .header-mobile-buttons .search-block {
        display: none;
    }
}

.sidebar-content {
    background: rgba(236, 236, 236, 0.2);
    padding: 1em;
}

.menu-toggle span {
    display: block;
    position: absolute;
    top: 12px;
    height: 2px;
    min-height: 2px;
    width: 100%;
    border-radius: 2px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    opacity: 0.75;
}

.menu-toggle span:before {
    top: -8px;
    left: auto;
    width: 50%;
}

.menu-toggle span:after {
    left: auto;
    bottom: -8px;
    width: 75%;
}

.menu-toggle:hover span:before, .menu-toggle:hover span:after {
    width: 100%;
}


.top-note {
    position: absolute;
    top: 0;
    z-index: 100 !important;
    /*background: #000;*/
    padding: 5px 783px;
    background-color: #232323;
}

#hero-slider .tns-item,
#hero-slider .tns-item > * {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
}

/*.animated-link {*/
/*    border-bottom: 1px solid transparent;*/
/*}*/
/*.animated-link:hover {*/
/*    border-color: #fff;*/
/*}*/


/* effect 3 */

.animated-link {
    position: relative;
    overflow: hidden;
    /*padding-bottom: 4px;*/
    display: inline-block;
}

.animated-link:after {
    background: #fff;

    content: "";
    display: block;
    width: 100%;
    height: 2px;

    position: absolute;
    left: 0;
    bottom: 0;

    transform: translate3d(-500%, 0, 0);
    transition: transform .3s ease-out;
}

.animated-link:hover:after,
.animated-link:focus:after {
    transform: translate3d(0, 0, 0);
}


[data-full-page-block] {
    width: 100vw;
    height: 100dvh; /* Используем dvh для учета полоски навигации в Safari */
    overflow: hidden;
}


.product-color-circle {
    width: 28px;
    height: 28px;
    padding: 3px;
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid rgb(189, 189, 189);
    transition: border-color 0.3s ease;
}

.tippy-box {
    background-color: transparent;
!important;
}

.product-color-detail {
    border-radius: 50%;
    overflow: hidden;
    padding: 3px;
    background: transparent;
    position: relative;
    transform: translateX(-9px);
    border: 1px solid rgb(189, 189, 189);
}


.product-color-detail img {
    border-radius: 50%;
}

.product-color-circle .color-circle {
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    overflow: hidden;
}

.product-color-circle.circle-small {
    width: 18px;
    height: 18px;
    padding: 2px;
}

.product-color-circle:hover,
.product-color-circle.active {
    border-color: #232323;
}

.tippy-content {
    padding: 0 !important;
    /*width: auto;*/
}

.tippy-arrow {
    display: none;
}

[data-tippy-root] {
    max-width: 100vw;
    left: -5px !important;
    top: -1px !important;
}


.active-scale-down {
    transition: transform 0.2s ease; /* Плавный переход */
}

.active-scale-down:active {
    transform: scale(0.5);
}

h2 {
    /*font-size: 28px;*/
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.56px;
    /*text-align: left;*/
    color: #232323;
}

.cursor-pointer {
    cursor: pointer !important;
}

root {
    --icon-size: 10px;
}

/*[data-brono-icon] {*/
/*    width: var(--icon-size);*/
/*    height: var(--icon-size);*/
/*}*/

/*.container {
    overflow-x: hidden;
}*/
.container-fluid {
    overflow-x: hidden;
}

.page-other .item-icon {
    fill: #232323;

}

.color-circle {
    border-radius: 50px;
    overflow: hidden;
    width: 10px;
    height: 10px;
}

.max-height-800 {
    max-height: 800px !important;
}

.underline-animation-container {
    position: relative;
    text-decoration: none;
    cursor: pointer !important;
}

.underline-animation-container .underline-animation {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: bottom right;
}

.page-home.sticky .underline-animation-container .underline-animation {
    background-color: #232323;
}


input {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input.is-invalid {
    border-color: #dc3545; /* Цвет ошибки */
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.5); /* Тень ошибки */
}

.offcanvas-backdrop {
    position: fixed !important;
}

.email-subscribe {
    margin: 15px 0;
    padding: 0;
    border: solid 1px #878787;
    background-color: #f5f5f5;
    border-radius: 2px;
}

.email-subscribe svg {
    color: #878787;
}

.email-subscribe .input-group {
    border-color: transparent;
    background-color: transparent;
}

.email-subscribe .form-control {
    margin: 0;
    padding: 0;
    border-color: transparent;
    background-color: transparent;
}

.email-subscribe .btn {
    margin: 0 !important;
    padding: 0;
}

.form-subscribe {
    background: #fff;
}

@media screen and (max-width: 768px) {
    .form-subscribe {
        background: #232323;
        color: #fff;
    }

    .mobile-price {
        font-size: 14px;
    }

    .mobile-ratio-1 {
        aspect-ratio: 1 / 1;
    }

}


[data-dialer-minus] {

}

[data-dialer-input] {
    margin-left: 5px !important;
    margin-right: 5px !important;

}

[data-dialer-plus] {

}


[data-dialer-minus], [data-dialer-input], [data-dialer-plus] {
    min-width: 31px !important;
    max-width: 41px !important;
    height: 31px !important;
    /*display: flex !important;*/
    text-align: center;
    border: none !important;

    padding: 6px 10px !important;
    border-radius: 2px !important;
    background-color: #f5f5f5 !important;

    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.28px;
    color: #878787 !important;

    /*transition: all 0.2s ease;*/
}

[data-dialer-input] {
    padding: 0 !important;
    min-width: 31px !important;
}

[data-dialer-minus]:hover, [data-dialer-plus]:hover {

    color: #232323 !important;
    /*transform: scale(1.1);*/
}

#bx-soa-basket {
    display: none !important;
}


@media screen and (max-width: 600px) {
    .basket-picture {
        width: 60px;
    }
}


@media screen and (max-width: 600px) {
    .pagination-container ul.pagination:first-child {
        text-align: center;
        margin: 0 auto;
    }

    .pagination-container ul.pagination:last-child {
        display: none !important;
    }
}

.admin-top-class {
    top: 100px !important;
    display: block;
}

label sub {

}

[data-close] {
    cursor: pointer !important;
}

[data-notification] {
    display: none;
}

.page-other.sticky {
    top: 0 !important;
}

.alert.alert-cookie {
    margin-right: 1em;
}

.icon-viber {
    margin-top: -3px;
}


/*div:not(.modal-body) .form-check {*/
/*     padding-left: 0 !important;*/
/*}*/

.basket [data-favorite-add] svg {
    fill: var(--br-secondary-color) !important;
}


.table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
}


@media screen and (min-width: 600px) {
    table.table-sm-small th {
        padding-top: 0 !important;
        padding-bottom: 17px !important;
    }

    table.table-sm-small tbody tr td {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }
}

@media screen and (max-width: 600px) {
    table.table-sm-small thead th {
        font-size: 10px !important;
        padding-left: 1px !important;
        padding-right: 1px !important;
        font-weight: 400 !important;
        /*white-space: nowrap;*/
    }

    table.table-sm-small tbody tr {
        font-size: 10px !important;
        font-weight: 400 !important;
        white-space: nowrap;
    }

    table.table-sm-small tbody tr td {
        padding-left: 1px !important;
        padding-right: 1px !important;
    }


}

@media screen and (min-width: 600px) {
    .order-md-6 {
        order: 6 !important
    }

    .order-md-7 {
        order: 7 !important
    }

    .order-md-8 {
        order: 8 !important
    }

    .order-md-9 {
        order: 9 !important
    }

    .order-md-10 {
        order: 10 !important
    }
}

.glass-block {
    margin: auto !important;
    width: 30%;
    max-width: 363px;
    min-height: 394px;
    max-height: 394px;
    position: absolute;
    inset: 0;
    z-index: 1;

    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-radius: 0;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);

    padding: 2.5rem;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.glass-block .text {
    font-size: 24px;
    text-align: center;
}

.swiper-gerryross .swiper-nav {
    display: flex;
    bottom: 60px;
    position: relative;
    justify-content: end;
    right: 0;
}

.swiper-gerryross .swiper-nav .swiper-button-prev,
.swiper-gerryross .swiper-nav .swiper-button-next {
    width: 50px;
    height: 50px;
    position: relative !important;
    margin: 0;
    padding: 0;
    background: #fff;
    border-radius: 2px;
}

.swiper-gerryross .swiper-nav .swiper-button-prev {
    margin-right: 30px;
}


.swiper-gerryross .swiper-nav .swiper-button-next {

}

.swiper-gerryross .swiper-nav .swiper-button-prev:after,
.swiper-gerryross .swiper-nav .swiper-button-next:after {
    content: '';
    width: 24px;
    height: 17px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='12' viewBox='0 0 18 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.36 5.436H15.672L11.28 1.044L11.952 0.396L17.496 5.94L11.952 11.484L11.28 10.836L15.672 6.444H0.36V5.436Z' fill='%23232323'/%3E%3C/svg%3E%0A");
}

.swiper-gerryross .swiper-nav .swiper-button-prev:after {
    transform: rotate(180deg);
}

.swiper-gerryross .swiper-nav .swiper-button-next:after {

}


.swiper-counter {
    font-size: 4.688rem;
}

.swiper-description {

}

.swiper-description .text {
    max-width: 350px;
    margin-left: auto;
    margin-right: 30px;
}

.swiper-title {
    font-size: 4.688rem;
    margin-bottom: 0;
}

.step-image {
    text-align: center;
    position: relative;
    padding-top: 25px;
}

.step-image img {
    position: relative;
    z-index: 30;
}

.basket-img {
    max-width: 194px;
    position: relative;
    top: -24px;
}

.step-block {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    border: 1px solid #878787;
    color: #232323;
    max-width: 285px;
    text-align: center;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    background: #fff;
    position: relative;
}

.step-block > div {
    position: relative;
    z-index: 30;
}

.c-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    overflow-x: hidden;
}

.c-steps > * {
    flex: 1 1 33%;

}

.step-block:before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    content: '';
    background: #fff;
    z-index: 20;
}

.c-steps .step-1 {
    margin-left: 0 !important;
}

.c-steps .step-3 {
    margin-right: 0 !important;
}

.c-steps .step-2:after {
    position: absolute;
    top: 50%;
    left: -200%;
    content: '';
    display: block;
    width: 3000px;
    height: 1px;
    background: #878787;
}

/*.c-steps .step-1:after,*/
/*.c-steps .step-2:after,*/
/*.c-steps .step-3:after {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    right: 0;*/
/*    content: '';*/
/*    display: block;*/
/*    width: 100%;*/
/*    height: 1px;*/
/*    background: #878787;*/


/*}*/

#catalog-section {
    position: relative;
}

#catalog-section:before {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    width: 100%;
    height: 20px;
    background: #fff;
}


.float-header {
    font-size: 1.5rem;
    color: #232323;
    border-bottom: 1px solid #878787;
    position: relative;
    left: -170px;
    width: calc(100% + 112px);
}

.float-big-header {
    font-size: 4.69rem;
    color: #232323;
    /*border-bottom: 1px solid #878787;*/
    position: relative;
    letter-spacing: 2px;

}

.float-big-header > * {
    padding-left: 120px;
    max-width: 520px;
}


.swiper-storyline .swiper-slide {
    border-left: 1px solid #878787;
}

.storyline-title {
    /*font-size: 1.14rem;*/
}

.storyline-year {
    font-size: 4rem;
    line-height: 0.8;
}

.storyline-title, .storyline-year {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
}

.storyline-nav {

}

.storyline-nav .button-prev, .storyline-nav .button-next {

}

.lefted-positioned {
    position: relative;
    left: 40%;
    top: 30px;
}

.righted-positioned {
    position: relative;
    right: 40%;
    top: 30px;
}

.image-mini img {
    max-width: 140px;
    top: -24px;
}

@media (min-width: 768px) {
    .order-md-6 {
        order: 6 !important
    }

    .order-md-7 {
        order: 7 !important
    }

    .order-md-8 {
        order: 8 !important
    }

    .order-md-9 {
        order: 9 !important
    }
}

@media screen and (max-width: 1140px) {
    .brand-section-one .mini-block-image {
        display: none;
    }


    .brand-section-one .float-header {
        font-size: 1.3rem;
        padding: 0.5em !important;
        margin-top: 0.5rem !important;
    }

    .brand-section-one .quote-block {
        font-size: 0.9rem;
        margin-top: -100px !important;

    }

    .brand-section-one .quote-block .quote {
        margin-left: 1em !important;
        margin-right: 0.3em !important;
    }

    .float-big-header {
        font-size: 2.69rem !important;
        letter-spacing: 0 !important;

    }

    .float-big-header > * {
        padding-left: 183px;
        max-width: 520px;
        margin-bottom: 0.3em !important;
    }

    .glass-block {
        width: 50%;
        max-width: 400px;
    }

    .swiper-title {
        font-size: 2.3rem;
        font-weight: 500;
        margin-bottom: 0 !important;
    }

    .padding-block {
        padding: 1rem;
    }

    .padding-inner {
        margin-left: 0rem !important;
        margin-right: 0rem !important;
    }
}

.br-text {
    max-width: 380px
}

.glass-effect .ratio {
    --br-aspect-ratio: 53%
}



@media screen and (min-width: 767px) {
    [data-swiper-content] {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .br-slider-swiper-block {
        position: relative;
    }

    .br-slider-swiper-block:before {
        content: "";
        display: block;
        padding-top: 100%;
    }

    .br-slider-swiper-block>* {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

}



.glass-effect img {
    min-width: 100% !important;
    width: 100% !important;
    min-height: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

}


@media screen and (max-width: 767px) {
    .float-header {
        top: 0;
        left: 0;
        position: absolute;
    }

    .brand-section-one .quote-block {
        font-size: 0.9rem;
        margin-top: 0 !important;
        justify-content: flex-start !important;
    }

    .br-text {
        max-width: 100%
    }

    .float-big-header {
        top: -75px;
    }

    .brand-section-one {
        padding-top: 31px;
    }

    .float-header {
        /*border-bottom: 1px solid #878787;*/
        left: 10px;
        width: calc(100% - 21px);
        padding-left: 0 !important;
    }

    .float-big-header > * {
        padding-left: 0;
        margin: 0;
        max-width: 520px;
        margin-bottom: 0 !important;
    }

    .mini-block-image-mobile {
        bottom: 30px;
        right: 15px;
        position: absolute;
    }


    .storyline-year {
        font-size: 2.25rem;
    }

    .glass-effect img {
        min-width: 100% !important;
        width: 100% !important;
        min-height: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;

    }

    .glass-effect .glass-block .text {
        font-size: 1.3rem;

    }

    .swiper-title {
        font-size: 2.3rem;
        font-weight: 400;
        padding-bottom: 1em;
        margin-top: 1em;
    }

    .swiper-counter {
        line-height: 1px;
    }

    .glass-effect .glass-block {
        width: 100%;
        max-width: 250px;
        padding: 1.5rem;
        padding-top: 4rem;
    }

    .glass-effect .ratio {
        --br-aspect-ratio: 130%
    }

    .br-slider-swiper-block {
        border-top: none !important;
        border-right: none !important;
        --br-aspect-ratio: 130% !important;
    }

    .swiper-counter {
        font-size: 2.25rem;
    }
    .swiper-description {
        padding-left: 3em;
    }

    .br-slider-swiper-block {
        aspect-ratio: unset !important;
    }
}

@media screen and (max-width: 400px) {
    .br-slider-swiper-block {
        --br-aspect-ratio: 150%
    }

    .swiper-description .text {
        font-size: 0.9rem;
        margin-top: 3em;
    }
}

.c-steps-mobile {

}
.c-steps-mobile .step-block {
    max-width: 100%;
}
.c-steps-mobile .step-image {
    padding-top: 40px;
    padding-bottom: 40px;
}
.c-steps-mobile .step-image img {
    max-width: 252px;
    top: 0;
}

.c-steps-mobile {
    overflow-y: hidden;
}

.v-line {
    position: relative;
}
.v-line:after {
    content: '';
    display: block;
    width: 1px;
    border-left: 1px solid #878787;
    height: 200%;
    position: absolute;
    left: 50%;
    top: -100%;
}

.swiper-active {

}

.ratio-brand-image {
    --br-aspect-ratio: 51%;
}
@media screen and (max-width: 600px) {
    .ratio-brand-image {
        --br-aspect-ratio: 100%;
    }
    .container-mobile-full {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


md