@charset "UTF-8";
@layer base, component, mod, state;

:root {
    --color-primary: #101e21;
    --color-primary--rgb: 16, 30, 33;
    --color-alt: #e22236;
    --color-alt--rgb: 226, 34, 54;
    --color-blck: #000;
    --color-blck--rgb: 0, 0, 0;
    --color-whte: #fff;
    --color-whte--rgb: 255, 255, 255;
    --color-grey: #f4f3f3;
    --color-grey--rgb: 244, 243, 243;
    --color-surface: #f5f5f5;
    --color-surface--rgb: 245, 245, 245;
    --color-surface-alt: #e4e4e4;
    --color-surface-alt--rgb: 228, 228, 228;
    --color-surface-secondary: #d9d9d9;
    --color-surface-secondary--rgb: 217, 217, 217;
    --color-surface-tertiary: #20232c;
    --color-surface-tertiary--rgb: 32, 35, 44;
    --color-text: #808080;
    --color-text--rgb: 128, 128, 128;
    --color-text-alt: #a8a8a8;
    --color-text-alt--rgb: 168, 168, 168;
    --color-text-active: #b8b8b8;
    --color-text-active--rgb: 184, 184, 184;
    --color-shred: #959595;
    --color-shred--rgb: 149, 149, 149;
    --color-shred-alt: #8b9091;
    --color-shred-alt--rgb: 139, 144, 145;
    --color-shred-secondary: #213352;
    --color-shred-secondary--rgb: 33, 51, 82;
    --color-shred-third: #2b2b36;
    --color-shred-third--rgb: 43, 43, 54;
    --color-shred-fourth: #222025;
    --color-shred-fourth--rgb: 34, 32, 37;
    --color-shred-fifth: #f3f2f2;
    --color-shred-fifth--rgb: 243, 242, 242;
    --color-shared-six: #262831;
    --color-shared-six--rgb: 38, 40, 49;
    --color-shared-seventh: #38262f;
    --color-shared-seventh--rgb: 56, 38, 47;
    --color-shared-eighth: #272933;
    --color-shared-eighth--rgb: 39, 41, 51;
    --color-success: #259243;
    --color-success--rgb: 37, 146, 67;
    --color-error: #f00;
    --color-error--rgb: 255, 0, 0;
    --font-primary: "rubik", sans-serif, -apple-system, blinkmacsystemfont, roboto, ubuntu, "Droid Sans", "Helvetica Neue", arial, sans-serif, "Apple Color Emoji";
    --font-secondary: "sf-pro-display", sans-serif, -apple-system, blinkmacsystemfont, roboto, ubuntu, "Droid Sans", "Helvetica Neue", arial, sans-serif, "Apple Color Emoji";
    --font-size-default: rem(14);
    --radius-xxxs: 4px;
    --radius-xxs: 5px;
    --radius-xs: 10px;
    --radius-xm: 20px;
    --radius-m: 22px;
    --radius-xxl: 100%;
    --index-1: 100;
    --index-2: 200;
    --index-3: 1100;
    --index-4: 1200;
    --header-height: 89px
}

@layer base {
    * {
        margin: 0;
        padding: 0;
        border: 0
    }

    *, *:before, *:after {
        box-sizing: border-box
    }

    *:before, *:after {
        display: inline-block
    }

    html, body {
        /*min-width: 360px;*/
        height: 100%;
        scroll-behavior: smooth;
        -webkit-tap-highlight-color: #000000
    }

    body {
        color: var(--color-primary);
        font-size: var(--font-size-default);
        font-family: var(--font-primary);
        line-height: 1;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

    ::-webkit-scrollbar {
        width: 6px;
        height: 5px
    }

    ::-webkit-scrollbar-track {
        background: transparent
    }

    ::-webkit-scrollbar-thumb {
        background: var(--color-alt);
        border-radius: 10px
    }

    ::selection {
        color: var(--color-whte);
        background: var(--color-alt)
    }

    input, button, textarea {
        font-size: inherit;
        font-family: var(--font-primary);
        line-height: inherit
    }

    button {
        color: inherit;
        font-family: var(--font-primary);
        background-color: transparent;
        outline: 0;
        cursor: pointer
    }

    div[class*=__text] p:only-of-type, div[class*=__text] p:last-of-type, div[class*=__details] p:only-of-type, div[class*=__details] p:last-of-type, div[class*=__note] p:only-of-type, div[class*=__note] p:last-of-type {
        margin: 0
    }

    [class*=image] img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center
    }

    a {
        display: inline-block;
        color: var(--color-text);
        color: inherit;
        text-decoration: none
    }

    ul li {
        list-style: none
    }

    img {
        vertical-align: top
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: inherit;
        font-size: inherit
    }

    address, cite {
        font-style: normal
    }

    fieldset, dl, dd {
        margin: 0;
        padding: 0
    }

    fieldset {
        border: none
    }
}

@font-face {
    font-weight: 300;
    font-family: rubik;
    font-style: normal;
    src: url(../fonts/rubik-300.woff2) format("woff2"), url(../fonts/rubik-300.woff) format("woff");
    font-display: swap
}

@font-face {
    font-weight: 400;
    font-family: rubik;
    font-style: normal;
    src: url(../fonts/rubik-400.woff2) format("woff2"), url(../fonts/rubik-400.woff) format("woff");
    font-display: swap
}

@font-face {
    font-weight: 500;
    font-family: rubik;
    font-style: normal;
    src: url(../fonts/rubik-500.woff2) format("woff2"), url(../fonts/rubik-500.woff) format("woff");
    font-display: swap
}

@font-face {
    font-weight: 600;
    font-family: rubik;
    font-style: normal;
    src: url(../fonts/rubik-600.woff2) format("woff2"), url(../fonts/rubik-600.woff) format("woff");
    font-display: swap
}

@font-face {
    font-weight: 700;
    font-family: rubik;
    font-style: normal;
    src: url(../fonts/rubik-700.woff2) format("woff2"), url(../fonts/rubik-700.woff) format("woff");
    font-display: swap
}

@font-face {
    font-weight: 900;
    font-family: sf-pro-display;
    font-style: normal;
    src: url(../fonts/sf-pro-display-900.woff2) format("woff2"), url(../fonts/sf-pro-display-900.woff) format("woff");
    font-display: swap
}

@layer component {
    .header {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: var(--index-2)
    }

    .header__top .header__container, .header__bottom .header__container {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .header__top {
        color: var(--color-text);
        font-size: 16px;
        background-color: var(--color-whte)
    }

    .header__top .header__container {
        padding-right: 0
    }

    .header__top .location .dropdown {
        z-index: calc(var(--index-2) + 1)
    }

    .header__top .menu {
        margin-left: 2.6%
    }

    .header__top .menu__list {
        display: flex;
        align-items: center
    }

    .header__top .menu__item:not(:last-child) {
        margin-right: 20px
    }

    .header__top .menu__link {
        color: rgba(var(--color-shared-six--rgb), .6);
        transition: color .3s
    }

    .header__top .menu__link.active {
        color: var(--color-primary)
    }

    .header__top .main-controls {
        margin-left: auto
    }

    .header__top-cart {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 39px;
        padding: 19px 27px;
        background-color: var(--color-shared-eighth)
    }

    .header__phone {
        font-weight: 600;
        font-size: 14px;
        line-height: 1;
        padding: 10px 15px;
        color: var(--color-whte);
        background-color: var(--color-alt)
    }

    .header__bottom {
        display: flex;
        align-items: center;
        padding: 15px 0;
        color: var(--color-whte);
        background-color: var(--color-shared-eighth)
    }

    .header__logo-img {
        display: block;
        width: 116px;
        height: auto
    }

    .header__submenu, .header__submenu-list, .header__submenu .menu__list {
        display: flex;
        align-items: center
    }

    .header__submenu-link, .header__submenu .menu__link {
        color: rgba(var(--color-whte--rgb), .7);
        font-size: 16px;
        transition: color .3s
    }

    .header__submenu-more {
        position: relative;
        margin-left: 50px;
        cursor: pointer
    }

    .header__submenu-more:before {
        display: block;
        width: 30px;
        background-color: var(--color-whte);
        transition: background-color .3s;
        content: "";
        -webkit-mask: url(../img/i-more.svg) no-repeat center/contain;
        mask: url(../img/i-more.svg) no-repeat center/contain;
        aspect-ratio: 1
    }

    .header__submenu .main-controls {
        display: grid;
        grid-template-columns:1fr 1fr 1fr
    }

    .header__bottom-controls {
        display: flex;
        gap: 20px;
        align-items: center
    }
}

@layer state {
    .header__bottom.ready {
        overflow: unset
    }

    .header__bottom.ready > * {
        opacity: 1
    }

    .header__submenu.open {
        transform: translate(0)
    }

    .header__submenu-more.open .dropdown, .header .search-form.open {
        transform: translateY(0) scale(1);
        opacity: 1;
        pointer-events: all
    }
}

@layer component {
    .footer {
        position: relative;
        padding: 30px 0;
        color: var(--color-whte);
        font-size: 20px;
        letter-spacing: .01em
    }

    .footer__container {
        display: grid
    }

    .footer__title {
        color: rgba(var(--color-whte--rgb), .3);
        font-weight: 500;
        font-size: 20px
    }

    .footer__list {
        font-size: 18px;
        line-height: 1.18
    }

    .footer__list-item:not(:last-child) {
        margin-bottom: 20px
    }

    .footer .link {
        transition: color .3s
    }

    .footer__logo {
        width: 116px
    }

    .footer__logo img {
        width: 100%;
        height: auto
    }

    .footer__menu {
        display: flex;
        gap: 36px;
        margin-bottom: 35px
    }

    .footer__menu .footer__title {
        margin-bottom: 30px
    }

    .footer__contacts {
        display: flex;
        flex-direction: column;
        gap: 36px
    }

    .footer__contacts .footer__list {
        font-size: 20px
    }

    .footer__contacts-cities .footer__list-item:not(:last-child) {
        margin-bottom: 24px
    }

    .footer__copyright {
        margin-top: 62px;
        color: rgba(var(--color-whte--rgb), .3);
        font-weight: 300;
        font-size: 18px;
        line-height: 1.4
    }

    .footer__bg {
        position: absolute;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }

    .footer__bg img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .footer__list-develop {
        font-size: 16px;
        margin-top: 40px
    }

    .footer__list-develop a {
        color: var(--color-alt)
    }
}

@layer mod {
    .footer__list--alt .footer__list-item:not(:last-child) {
        margin-bottom: 21px
    }
}

@layer component {
    .btn {
        font-weight: 500;
        font-size: 16px;
        line-height: 1;
        padding: 15px 30px;
        color: var(--color-whte);
        text-align: center;
        background-color: var(--color-alt);
        border-radius: var(--radius-xxs);
        transition: filter .3s
    }
}

@layer mod {
    .btn--outline {
        padding: 18px 46px;
        color: var(--color-primary);
        background-color: var(--color-whte);
        border: 1px solid rgba(var(--color-blck--rgb), .2);
        border-radius: var(--radius-xs);
        transition: color .3s, box-shadow .3s
    }

    .btn--grey {
        color: var(--color-primary);
        background: var(--color-grey);
        border-radius: 10px;
        transition: all .3s ease-in
    }
}

@layer component {
    .location {
        position: relative
    }

    .location__label {
        display: flex;
        align-items: center;
        padding: 10px 0;
        color: var(--color-shred-third);
        font-weight: 500
    }

    .location__label:before {
        display: block;
        width: 10px;
        background-color: var(--color-alt);
        transition: background-color .3s;
        content: "";
        -webkit-mask: url(../img/i-location-alt.svg) no-repeat center/contain;
        mask: url(../img/i-location-alt.svg) no-repeat center/contain;
        height: 14px;
        margin-right: 8px
    }

    .location__label:after {
        transition: transform .3s ease
    }

    .location__item:not(:last-child) {
        margin-bottom: 8px
    }

    .location__link {
        display: block;
        transition: color .3s ease
    }
}

@layer state {
    .location.open .location__label:after {
        transform: rotate(180deg)
    }

    .location.open .location__list {
        transform: translateY(0) scale(1);
        opacity: 1;
        pointer-events: all
    }
}

@layer component {
    .main-controls {
        display: flex;
        align-items: center
    }

    .main-controls__item:not(:last-child) {
        margin-right: 39px
    }

    .main-controls__link {
        position: relative
    }

    .main-controls__link:after {
        display: block;
        width: 22px;
        background-color: rgba(var(--color-shared-seventh--rgb), .4);
        transition: background-color .3s;
        content: "";
        -webkit-mask: var(--icon) no-repeat center/contain;
        mask: var(--icon) no-repeat center/contain;
        aspect-ratio: 1
    }
}

@layer component {
    .intro {
        position: relative;
        padding: 60px 0
    }

    .intro__container {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 80px;
        color: var(--color-whte)
    }

    .intro__content .btn {
        margin-top: 50px
    }

    .intro__title {
        font-weight: 600;
        font-size: 30px;
        line-height: normal;
        margin-bottom: 37px
    }

    .intro__text {
        font-size: 18px;
        line-height: 1.1
    }

    .intro__image {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }

    .intro__items {
        display: grid;
        gap: 15px
    }

    .intro__item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        height: 236px;
        padding: 27px;
        overflow: hidden;
        border: 1px solid rgba(var(--color-whte--rgb), .15);
        border-radius: var(--radius-xs)
    }

    .intro__item-desc {
        font-weight: 500;
        font-size: 23px;
        line-height: normal;
        margin-bottom: 15px;
        color: rgba(var(--color-whte--rgb), .3);
        text-transform: uppercase
    }

    .intro__item-name {
        font-weight: 500;
        font-size: 23px;
        line-height: normal
    }

    .intro__item-image {
        position: absolute;
        top: var(--top);
        right: var(--right);
        bottom: var(--bottom);
        left: var(--left);
        z-index: -1;
        width: auto;
        height: auto;
        transition: transform .3s;
        will-change: transform
    }

    .intro__item:after {
        position: absolute;
        z-index: -2;
        background-image: var(--img);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        content: "";
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }
}

@layer mod {
    .intro__item--alt {
        justify-content: flex-start;
        height: 100%;
        padding-top: 53px;
        overflow: unset;
        border: 0;
        box-shadow: 30px 60px 60px 0 rgba(var(--color-blck--rgb), .5)
    }

    .intro__item--alt .intro__item-name {
        font-size: 40px
    }

    .intro__item--alt:after {
        border-radius: var(--radius-xs)
    }
}

@layer component {
    .section {
        --space-bottom: 50px;
        --space-bottom-neg: -50px;
        margin-bottom: var(--space-bottom)
    }
}

@layer mod {
    .section--alt {
        --space-bottom: 25px
    }
}

@layer component {
    .title {
        font-weight: 600;
        font-size: 50px;
        line-height: normal
    }
}

@layer mod {
    .title--alt {
        font-size: 45px
    }
}

@layer component {
    .card {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: var(--color-whte);
        border-radius: var(--radius-xs);
        transition: box-shadow .3s
    }

    .card__link {
        position: absolute;
        z-index: -1;
        display: block;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }

    .card__controls {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;
        display: flex;
        align-items: center;
        line-height: 0
    }

    .card__price-group {
        display: flex;
        align-items: center;
        gap: 6px
    }

    .card__price-group .card__price-type {
        margin-bottom: 0;
        font-size: 12px;
        font-weight: 600;
        line-height: 118.382%;
        min-width: 52px
    }

    .card__price-group .card__price-val {
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 118.382%
    }

    .card__controls-item:not(:last-child) {
        margin-right: 10px;
        padding-right: 10px;
        border-right: 1px solid var(--color-surface-secondary)
    }

    .card__controls-link {
        position: relative
    }

    .card__controls-link:after {
        --icon-size: 13px;
        display: block;
        width: var(--icon-size);
        background-color: var(--color-primary);
        transition: background-color .3s;
        content: "";
        -webkit-mask: var(--icon) no-repeat center/contain;
        mask: var(--icon) no-repeat center/contain;
        aspect-ratio: 1
    }

    .card__media {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        padding: 43px 23px 23px;
        border-radius: 10px;
        overflow: hidden;
        background: var(--color-surface);
        aspect-ratio: 306/246
    }

    .card__image {
        width: auto;
        max-width: 100%;
        mix-blend-mode: darken;
        height: auto;
        max-height: 100%
    }

    .card .rating {
        margin-bottom: 15px
    }

    .card__name {
        font-weight: 700;
        font-size: 14px;
        line-height: normal;
        margin-bottom: 15px
    }

    .card__desc {
        margin-bottom: 60px;
        line-height: 1.18
    }

    .card__bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: auto
    }

    .card__price {
        position: relative;
        display: flex;
        flex-direction: column
    }

    .card__price-type {
        margin-bottom: 5px;
        font-size: 12px;
        font-weight: 600;
        line-height: 118.382%
    }

    .card__price-old {
        font-weight: 600;
        font-size: 14px;
        line-height: normal;
        display: inline-flex;
        align-items: center;
        padding: 0 5px;
        color: rgba(var(--color-primary--rgb), .5);
        white-space: nowrap;
        text-decoration: line-through
    }

    .card__price-current {
        font-weight: 700;
        font-size: 18px;
        line-height: 1.18
    }

    .card__state {
        z-index: 1
    }
}

@layer component {
    .slider-cards__items {
        padding-bottom: var(--space-bottom);
        opacity: 0
    }

    .slider-cards__items > * {
        height: auto
    }
}

@layer state {
    .slider-cards .swiper-initialized .slider-cards__items {
        opacity: 1
    }
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 15px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px
}

.section-head__title {
    font-weight: 600;
    font-size: 20px;
    line-height: normal;
    flex-shrink: 0
}

.section-head__title span {
    opacity: .35
}

@layer component {
    .rating {
        display: flex;
        gap: 5px 21px;
        align-items: center
    }

    .rating__stars {
        width: 100px;
        height: 17px
    }

    .rating__stars use {
        fill: var(--color-surface-secondary)
    }

    .rating__stars[data-rating="1"] use:not(:nth-child(n+2)) {
        fill: var(--color-alt)
    }

    .rating__stars[data-rating="2"] use:not(:nth-child(n+3)) {
        fill: var(--color-alt)
    }

    .rating__stars[data-rating="3"] use:not(:nth-child(n+4)) {
        fill: var(--color-alt)
    }

    .rating__stars[data-rating="4"] use:not(:nth-child(n+5)) {
        fill: var(--color-alt)
    }

    .rating__stars[data-rating="5"] use:not(:nth-child(n+6)) {
        fill: var(--color-alt)
    }

    .rating__numbers {
        font-size: 12px;
        line-height: 1
    }
}

@layer mod {
    .rating--alt .rating__numbers {
        font-size: 14px
    }
}

@layer component {
    .btn-icon {
        font-weight: 500;
        font-size: 23px;
        line-height: 1;
        padding: 12px;
        color: var(--color-whte);
        background-color: var(--color-alt);
        border-radius: var(--radius-xs);
        transition: background-color .3s
    }

    .btn-icon:before {
        display: block;
        width: 20px;
        background-color: var(--color-whte);
        transition: background-color .3s;
        content: "";
        -webkit-mask: var(--icon) no-repeat center/contain;
        mask: var(--icon) no-repeat center/contain;
        aspect-ratio: 1
    }
}

@layer component {
    .social__list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 26px;
        align-items: center
    }

    .social__item {
        flex-shrink: 0
    }

    .social__link {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-whte);
        transition: color .3s;
        --width: 28px
    }

    .social__link:before {
        display: block;
        width: var(--width);
        background-color: currentColor;
        transition: background-color .3s;
        content: "";
        -webkit-mask: var(--icon) no-repeat center/contain;
        mask: var(--icon) no-repeat center/contain;
        aspect-ratio: 1
    }
}

@layer mod {
    .social__link--alt {
        --width: 37px
    }

    .social__link--alt:before {
        aspect-ratio: 0;
        height: 22px
    }
}

@layer component {
    .reviews-icons__list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        align-items: center
    }

    .reviews-icons__item {
        flex-shrink: 0
    }

    .reviews-icons__link {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-whte);
        transition: color .3s;
        --width: 28px
    }

    .reviews-icons__link:before {
        display: block;
        width: var(--width);
        background-color: currentColor;
        transition: background-color .3s;
        content: "";
        -webkit-mask: var(--icon) no-repeat center/contain;
        mask: var(--icon) no-repeat center/contain;
        aspect-ratio: 1
    }
}

@layer mod {
    .reviews-icons__link--alt {
        --width: 31px
    }

    .reviews-icons__link--alt:before {
        aspect-ratio: 0;
        height: 26px
    }
}

@layer component {
    .promo-catalog__items {
        display: grid;
        grid-template-columns:1fr 1fr;
        gap: 10px
    }
}

@layer mod {
    .promo-catalog--alt .promo-catalog__items {
        grid-template-columns:1fr 1fr;
        gap: 15px
    }

    .promo-catalog--alt .promo-catalog__item {
        display: flex;
        flex-direction: column;
        align-items: flex-start
    }

    .promo-catalog--alt .card-promo--high .card-promo__name {
        bottom: 15px
    }

    .promo-catalog--alt .card-promo--high .card-promo__media {
        max-width: 100%
    }

    .promo-catalog--alt .card-promo--alt .card-promo__media, .promo-catalog--alt .card-promo--small .card-promo__media {
        margin-top: auto
    }

    .promo-catalog--alt .card-promo--small {
        padding-bottom: 0
    }

    .promo-catalog--alt .card-promo--small .card-promo__name {
        position: relative;
        top: unset;
        left: unset;
        margin-bottom: 42px;
        padding-right: 50px
    }

    .promo-catalog--alt .card-promo--small .card-promo__media {
        position: relative;
        bottom: unset;
        display: flex;
        justify-content: center;
        min-width: 100%
    }
}

@layer component {
    .banner {
        position: relative
    }

    .banner__box {
        position: relative;
        padding: 25px 30px;
        overflow: hidden;
        background-color: var(--color-surface);
        border-radius: var(--radius-xs)
    }

    .banner__title {
        font-weight: 700;
        font-size: 25px;
        line-height: normal;
        margin-bottom: 20px
    }

    .banner__content {
        position: relative;
        z-index: 1
    }

    .banner__content .btn {
        margin-top: 25px
    }

    .banner__location {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        padding: 10px 0;
        font-size: 16px
    }

    .banner__location:before {
        display: block;
        width: 19px;
        background-color: var(--color-alt);
        transition: background-color .3s;
        content: "";
        -webkit-mask: url(../img/i-location.svg) no-repeat center/contain;
        mask: url(../img/i-location.svg) no-repeat center/contain;
        height: 22px;
        margin-right: 11px
    }

    .banner__text {
        font-size: 16px;
        line-height: 1.3
    }

    .banner__ps {
        font-size: 14px;
        line-height: 1;
        position: absolute;
        right: 15px;
        bottom: 15px;
        z-index: 1;
        color: var(--color-whte);
        letter-spacing: .02em
    }

    .banner__media {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        margin-top: 25px
    }

    .banner__media-item {
        --size: 48px;
        flex: 0 0 var(--size);
        width: var(--size);
        height: var(--size);
        background: var(--color-alt);
        transition: filter .3s ease-in;
        -webkit-mask: var(--icon) center center/cover no-repeat;
        mask: var(--icon) center center/cover no-repeat
    }
}

@layer mod {
    .banner--alt {
        color: var(--color-whte)
    }

    .banner--alt .banner__box {
        background-color: var(--color-surface-tertiary)
    }
}

@layer state {
    .banner[data-template=first] .banner__box:after {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 50%;
        background-image: var(--img);
        background-repeat: no-repeat;
        background-size: cover;
        content: ""
    }

    .banner[data-template=four] .banner__box:after {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 45%;
        background-image: var(--img);
        background-repeat: no-repeat;
        background-size: cover;
        content: ""
    }

    .banner[data-template=second] .banner__container {
        position: relative;
        padding-top: 8px
    }

    .banner[data-template=second] .banner__container:after {
        position: absolute;
        top: 0;
        right: var(--pad);
        width: 100%;
        max-width: 42.48%;
        height: auto;
        aspect-ratio: 817/591;
        background-image: var(--img);
        background-repeat: no-repeat;
        background-size: cover;
        content: ""
    }

    .banner[data-template=third] .banner__box:after {
        position: absolute;
        z-index: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: var(--img);
        background-repeat: no-repeat;
        background-size: cover;
        content: ""
    }
}

@layer component {
    .card-promo {
        --color-icon-link: var(--color-whte);
        --pad-card-top: 43px;
        --pad-card-left: 15px;
        position: relative;
        min-height: 170px;
        padding: var(--pad-card-top) var(--pad-card-left);
        overflow: hidden;
        border-radius: var(--radius-xs);
        transition: box-shadow .3s
    }

    .card-promo:after {
        position: absolute;
        background-color: var(--color-surface);
        background-image: var(--bg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        opacity: .15;
        transition: opacity .3s;
        content: "";
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }

    .card-promo__manufacturer {
        font-weight: 900;
        font-size: 50px;
        line-height: 1;
        position: absolute;
        bottom: -10px;
        z-index: 1;
        color: transparent;
        font-family: var(--font-secondary);
        text-transform: uppercase;
        transform: rotate(-180deg);
        writing-mode: tb-rl;
        -webkit-text-stroke: 1px rgba(var(--color-whte--rgb), .5)
    }

    .card-promo__link {
        position: absolute;
        z-index: 3;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }

    .card-promo__name {
        font-weight: 600;
        font-size: 13px;
        line-height: 1.18;
        position: absolute;
        top: var(--pad-card-top);
        left: var(--pad-card-left);
        z-index: 2;
        -webkit-text-stroke: 1px rgba(var(--color-whte--rgb), .2)
    }

    .card-promo__media {
        position: absolute;
        right: var(--right);
        bottom: var(--bottom);
        z-index: 1
    }

    .card-promo__image {
        width: auto;
        height: auto
    }

    .card-promo__icon-link {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        width: 30px;
        overflow: hidden;
        background-color: var(--color-alt);
        border-radius: var(--radius-xxl);
        transform: rotate(-45deg);
        transition: transform .3s, background-color .3s;
        will-change: transform;
        aspect-ratio: 1
    }

    .card-promo__icon-link:before {
        --icon-size: 15px;
        display: block;
        width: var(--icon-size);
        background-color: var(--color-icon-link);
        transition: background-color .3s;
        content: "";
        -webkit-mask: url(../img/i-arrow-long-right.svg) no-repeat center/contain;
        mask: url(../img/i-arrow-long-right.svg) no-repeat center/contain;
        aspect-ratio: 1
    }
}

@layer mod {
    .card-promo--unique {
        display: flex;
        flex-direction: column;
        grid-row: span 2;
        align-items: center;
        color: var(--color-whte)
    }

    .card-promo--unique:after {
        opacity: 1
    }

    .card-promo--unique .card-promo__media {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        min-height: 100%
    }

    .card-promo--unique .card-promo__image {
        width: 100%;
        height: auto;
        max-height: 100%;
        transform: translateY(18%)
    }

    .card-promo--unique .card-promo__icon-link {
        --color-icon-link: var(--color-alt);
        background-color: var(--color-whte)
    }

    .card-promo--high .card-promo__name, .card-promo--high .card-promo__icon-link {
        top: unset;
        bottom: var(--pad-card-top)
    }

    .card-promo--high .card-promo__media {
        top: 0;
        right: 0;
        left: 0
    }
}

@layer component {
    .slider-partners__items {
        padding-bottom: var(--space-bottom)
    }

    .slider-partners__item {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        height: auto;
        padding: 40px 25px;
        overflow: hidden;
        background-color: var(--color-whte);
        border: 1px solid rgba(var(--color-blck--rgb), .2);
        border-radius: var(--radius-xs);
        transition: box-shadow .3s
    }

    .slider-partners__item-logo {
        width: 100%;
        height: auto
    }
}

@layer component {
    .slider-preview__item {
        display: grid;
        overflow: hidden;
        background-color: var(--color-surface);
        border-radius: var(--radius-xs)
    }

    .slider-preview__item-top {
        position: relative;
        overflow: hidden;
        color: var(--color-whte);
        border-radius: var(--radius-xs)
    }

    .slider-preview__item-top:before {
        position: absolute;
        z-index: 0;
        background-image: var(--bg);
        background-repeat: no-repeat;
        background-size: cover;
        content: "";
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }

    .slider-preview__item-top:after {
        position: absolute;
        z-index: 1;
        background: linear-gradient(195deg, rgba(16, 30, 33, .3) 0%, rgba(16, 30, 33, .7) 73%);
        content: "";
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }

    .slider-preview__top-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
        padding: 30px 20px
    }

    .slider-preview__item-title {
        font-weight: 700;
        font-size: 20px;
        line-height: normal;
        max-width: 630px;
        margin-top: auto;
        margin-bottom: 20px
    }

    .slider-preview__item-bottom {
        padding: 15px
    }

    .slider-preview__item-bottom .btn {
        margin-top: 20px
    }

    .slider-preview__item-date {
        font-size: 20px;
        line-height: 1.2
    }

    .slider-preview__item-desc {
        font-size: 14px;
        line-height: 1.2;
        display: block;
        max-width: 470px;
        margin-bottom: 20px;
        color: rgba(var(--color-primary--rgb), .6)
    }

    .slider-preview__text {
        font-size: 16px
    }

    .slider-preview__text p {
        max-width: 700px;
        line-height: 1.14
    }

    .slider-preview__text p:not(:last-child) {
        margin-bottom: 15px
    }

    .slider-preview__nav {
        display: flex;
        justify-content: center
    }
}

.slider-preview__more {
    display: flex;
    max-width: -webkit-min-content;
    max-width: min-content;
    margin-top: 40px;
    margin-right: auto;
    margin-left: auto;
    padding: 22px 90px;
    font-size: 23px;
    line-height: 118.382%;
    white-space: nowrap
}

@layer mod {
    .slider-preview--page .slider-preview__items {
        display: grid;
        gap: 20px
    }

    .slider-preview__item--alt .slider-preview__text {
        position: relative;
        margin-bottom: 20px;
        background: linear-gradient(180deg, #101e21 -2.3%, rgba(16, 30, 33, .5) 90.81%);
        -webkit-text-fill-color: transparent;
        background-clip: text;
        -webkit-background-clip: text
    }

    .slider-preview__item--alt .slider-preview__text p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden
    }
}

@layer component {
    .swiper-nav {
        display: flex;
        gap: 20px;
        margin-top: 30px;
        color: var(--color-primary)
    }

    .swiper-nav__btn-prev:before {
        display: block;
        width: 20px;
        background-color: currentColor;
        transition: background-color .3s;
        content: "";
        -webkit-mask: url(../img/i-arrow-long-left.svg) no-repeat center/contain;
        mask: url(../img/i-arrow-long-left.svg) no-repeat center/contain;
        aspect-ratio: 1
    }

    .swiper-nav__btn-next:before {
        display: block;
        width: 20px;
        background-color: currentColor;
        transition: background-color .3s;
        content: "";
        -webkit-mask: url(../img/i-arrow-long-right.svg) no-repeat center/contain;
        mask: url(../img/i-arrow-long-right.svg) no-repeat center/contain;
        aspect-ratio: 1
    }
}

@layer component {
    .slider-reviews {
        position: relative;
        max-width: 100vw;
        overflow: hidden
    }

    .slider-reviews__tabs {
        left: 50%;
        display: flex;
        gap: 20px;
        justify-content: center
    }

    .slider-reviews__tabs-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: rgba(var(--color-shred-secondary--rgb), .15)
    }

    .slider-reviews__tabs-item:before {
        width: 40px;
        margin-bottom: 8px;
        overflow: hidden;
        background-color: rgba(var(--color-shred-secondary--rgb), .15);
        border-radius: var(--radius-xs);
        content: "";
        aspect-ratio: 1
    }

    .slider-reviews__tabs-item:after {
        position: absolute;
        top: 9px;
        width: 20px;
        background-image: var(--icon);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        content: "";
        aspect-ratio: 1
    }

    .slider-reviews__rating {
        display: flex;
        gap: 28px;
        align-items: center;
        margin-bottom: 30px
    }

    .slider-reviews__rating .rating__numbers {
        font-weight: 500;
        font-size: 26px;
        font-style: normal
    }

    .slider-reviews__rating .rating__stars {
        width: 180px;
        height: 28px
    }

    .slider-reviews .swiper {
        margin-right: var(--pad-neg);
        margin-left: var(--pad-neg);
        overflow: visible;
        padding-right: var(--pad);
        padding-left: var(--pad)
    }

    .slider-reviews__nav {
        display: flex;
        justify-content: center
    }
}

.slider-reviews .section-head img {
    vertical-align: middle;
    max-width: 110px;
    max-height: 30px;
    object-fit: contain
}

@layer mod;

@layer state {
    .slider-reviews__tabs-item:hover, .slider-reviews__tabs-item.active {
        color: var(--color-shred-secondary)
    }

    .slider-reviews__tabs-item:hover:before, .slider-reviews__tabs-item.active:before {
        background-color: var(--color-alt)
    }
}

@layer component {
    .card-review {
        position: relative;
        display: flex;
        flex-direction: column;
        height: auto;
        padding: var(--pad-card-top) var(--pad-card-left);
        padding: 20px;
        overflow: hidden;
        background-color: var(--color-whte);
        border: 1px solid rgba(var(--color-blck--rgb), .2);
        border-radius: var(--radius-xs);
        transition: box-shadow .3s
    }

    .card-review__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 50px
    }

    .card-review__date {
        color: var(--color-shred-alt)
    }

    .card-review__text {
        font-size: 16px;
        line-height: 1.23;
        margin-bottom: 30px
    }

    .card-review__text p:not(:last-child) {
        margin-bottom: 20px
    }

    .card-review__bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: auto
    }

    .card-review__author {
        font-size: 16px;
        line-height: 1.2;
        position: relative;
        display: flex;
        align-items: center;
        max-width: 170px;
        color: var(--color-shred-secondary)
    }

    .card-review__author:before {
        display: block;
        flex-shrink: 0;
        width: 50px;
        margin-right: 16px;
        overflow: hidden;
        background-image: var(--avatar);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-radius: var(--radius-xxl);
        content: "";
        aspect-ratio: 1/1
    }
}

@layer mod {
    .card-review--small {
        line-height: 1.25;
        padding: 24px 20px
    }

    .card-review--small .card-review__date, .card-review--small .rating__numbers {
        font-size: 12px
    }

    .card-review--small .card-review__top {
        margin-bottom: 36px
    }

    .card-review--small .card-review__author {
        font-size: 13px;
        max-width: 180px
    }

    .card-review--small .card-review__author:before {
        width: 45px
    }

    .card-review--small .card-review__author-where {
        max-width: 70px
    }

    .card-review--small .card-review__text {
        font-size: 13px
    }
}

.cart-control {
    position: relative
}

.cart-control:before {
    display: block;
    width: 22px;
    background-color: var(--color-whte);
    transition: background-color .3s;
    content: "";
    -webkit-mask: url(../img/i-cart.svg) no-repeat center/contain;
    mask: url(../img/i-cart.svg) no-repeat center/contain;
    aspect-ratio: 1
}

.cart-control__bubble {
    font-weight: 600;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -15px;
    bottom: -10px;
    width: 23px;
    color: var(--color-whte);
    background-color: var(--color-alt);
    border: 2px solid var(--color-shred-fourth);
    border-radius: var(--radius-xxl);
    aspect-ratio: 1
}

@layer component {
    .dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        overflow: hidden;
        text-align: left;
        background-color: var(--color-whte);
        border-radius: var(--radius-xs);
        box-shadow: 5px 20px 50px 0 rgba(var(--color-primary--rgb), .12);
        transform: translateY(10px) scale(.95);
        opacity: 0;
        transition: opacity .3s ease, transform .3s ease;
        pointer-events: none
    }

    .dropdown > * > * {
        font-size: 18px;
        line-height: 1;
        display: block;
        padding: 21px 30px;
        color: rgba(var(--color-primary--rgb), .7);
        transition: color .3s, background-color .3s
    }

    .dropdown > * > *.active {
        color: var(--color-primary);
        background-color: var(--color-shred-fifth)
    }
}

.search-control {
    display: flex;
    align-items: center;
    justify-content: center
}

.search-control:before {
    display: block;
    width: 18px;
    background-color: var(--color-whte);
    transition: background-color .3s;
    content: "";
    -webkit-mask: url(../img/i-search.svg) no-repeat center/contain;
    mask: url(../img/i-search.svg) no-repeat center/contain;
    aspect-ratio: 1
}

@layer component {
    .menu-control {
        position: relative;
        display: flex;
        justify-content: flex-end;
        width: 23px;
        height: 18px
    }

    .menu-control span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        overflow: hidden;
        background-color: var(--color-whte);
        border-radius: var(--radius-xxxs);
        transition: top .3s, transform .3s, opacity .3s
    }

    .menu-control:before, .menu-control:after {
        position: absolute;
        display: block;
        width: 14px;
        height: 2px;
        background-color: var(--color-whte);
        border-radius: 3px;
        border-radius: var(--radius-xxxs);
        transition: width .3s, top .3s, margin .3s, transform .3s;
        content: "";
        will-change: auto
    }

    .menu-control:before {
        top: 49%;
        width: 17px
    }

    .menu-control:after {
        right: 0;
        bottom: 0;
        width: 12px
    }
}

@layer state {
    .menu-control.open span {
        top: 51%;
        transform: rotate(-45deg);
        opacity: 0
    }

    .menu-control.open:before {
        top: 51%;
        width: 23px;
        margin-bottom: 0;
        transform: rotate(-45deg)
    }

    .menu-control.open:after {
        top: 51%;
        width: 23px;
        margin-top: 0;
        transform: rotate(45deg)
    }
}

@layer component {
    .btn-link {
        font-weight: 500;
        font-size: 16px;
        line-height: 1;
        transition: color .3s
    }
}

@layer mod {
    .btn-link--icon-append {
        --icon: url(../img/i-arrow-right.svg);
        --icon-width: 7.5px;
        --icon-height: 15px;
        --icon-color: var(--color-alt);
        display: flex;
        align-items: center
    }

    .btn-link--icon-append:after {
        margin-top: 1px;
        margin-left: 20px;
        display: block;
        width: var(--icon-width);
        background-color: var(--icon-color);
        transition: background-color .3s;
        content: "";
        -webkit-mask: var(--icon) no-repeat center/contain;
        mask: var(--icon) no-repeat center/contain;
        height: var(--icon-height)
    }
}

.page-head {
    position: relative;
    padding: 35px 0;
    overflow: hidden;
    color: var(--color-whte);
    background: var(--color-shared-eighth)
}

.page-head:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 360px;
    height: 474px;
    background: #e22236;
    border-radius: 474px;
    transform: translate(-50%, -50%);
    transform: rotate(54.805deg);
    filter: blur(225px);
    content: ""
}

.page-head__title {
    font-weight: 600;
    font-size: 20px;
    line-height: normal;
    flex-shrink: 0
}

.catalog {
    padding-top: 53px
}

.catalog__sort {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 37px;
    margin-left: auto
}

.catalog__sort ._select-open .select__body .select__title:after {
    transform: translateY(-50%) rotate(-180deg)
}

.catalog__sort .select {
    font-size: 21px;
    line-height: 110%;
    letter-spacing: -.42px
}

.catalog__sort .select .select__title {
    display: flex;
    align-items: center;
    padding-right: 25px;
    border: none
}

.catalog__sort .select .select__title:after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 15px;
    height: 6px;
    background: var(--color-primary);
    transform: translateY(-50%);
    transition: transform .3s ease-in;
    content: "";
    -webkit-mask: url(../img/i-arrow-bottom.svg) center center/cover no-repeat;
    mask: url(../img/i-arrow-bottom.svg) center center/cover no-repeat
}

.catalog__sort .select .select__title:before {
    margin-right: 5px;
    color: #23232366;
    content: "Сортировать "
}

.catalog__sort .select .select__value {
    height: auto;
    padding: 0
}

.catalog__sort .select .select__value:after {
    display: none
}

.catalog__content {
    display: grid;
    grid-template-columns:1fr;
    gap: clamp(20px, 2.5vw, 40px)
}

.catalog__showmore {
    grid-column: 1/-1;
    max-width: 306px;
    margin-right: auto;
    margin-left: auto;
    padding: 18px 32px;
    font-size: 18px
}

.catalog__filter-btn {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 30px
}

.catalog__filter-btn:after {
    display: block;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    background: currentcolor;
    -webkit-mask: url(../img/filter.svg) center center/cover no-repeat;
    mask: url(../img/filter.svg) center center/cover no-repeat;
    content: ""
}

.catalog-filter__selects {
    padding: 25px;
    background: var(--color-surface);
    margin-bottom: 30px;
    border-radius: 20px
}

.catalog-filter__selects .select:not(:last-of-type) {
    margin-bottom: 15px
}

.catalog-filter__name {
    font-weight: 600;
    line-height: 118.382%;
    font-size: 20px;
    margin-bottom: 18px
}

.catalog-filter__range {
    margin-bottom: 30px
}

.catalog-filter__group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 30px
}

.catalog-filter__reset {
    width: 100%;
    border-radius: 5px;
    padding: 16px;
    font-size: 16px
}

.catalog-filter__close {
    display: none
}

.range {
    max-width: 100%
}

.range__values {
    position: relative;
    display: grid;
    grid-template-columns:1fr 14px 1fr;
    gap: 40px 13px;
    max-width: 100%
}

.range__divider {
    position: relative;
    width: 14px;
    display: flex;
    align-items: center;
    justify-content: center
}

.range__divider:before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    content: ""
}

.range__value {
    max-width: 100%;
    overflow: hidden
}

.range__value input {
    width: 100%;
    max-width: 100%;
    padding: 15px;
    color: var(--color-primary);
    font-weight: 400;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 10px;
    font-size: 18px
}

.range__value input::placeholder {
    color: #101e2166
}

.range [data-range-item] {
    grid-column: 1/-1
}

.noUi-target, .noUi-target * {
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: #000000
}

.noUi-target {
    padding: 0 8px;
    position: relative
}

.noUi-base, .noUi-connects {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%
}

.noUi-connects {
    z-index: 0;
    height: 3px;
    overflow: hidden
}

.noUi-connect, .noUi-origin {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    transform-style: preserve-3d;
    transform-style: flat;
    will-change: transform
}

.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
    right: auto;
    left: 0
}

.noUi-vertical .noUi-origin {
    top: -100%;
    width: 0
}

.noUi-horizontal .noUi-origin {
    height: 0
}

.noUi-handle {
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.noUi-touch-area {
    width: 100%;
    height: 100%
}

.noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin {
    transition: transform .3s
}

.noUi-state-drag * {
    cursor: inherit !important
}

.noUi-horizontal {
    height: 3px
}

.noUi-horizontal .noUi-handle {
    top: -8px;
    right: -8px;
    width: 16px;
    aspect-ratio: 1/1
}

.noUi-vertical {
    width: 16px
}

.noUi-vertical .noUi-handle {
    right: -6px;
    bottom: -17px;
    width: 28px;
    height: 34px
}

.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
    right: auto;
    left: -17px
}

.noUi-connect {
    height: 3px;
    background: var(--color-primary)
}

.noUi-draggable {
    cursor: ew-resize
}

.noUi-vertical .noUi-draggable {
    cursor: ns-resize
}

.noUi-handle {
    background: var(--color-primary);
    border-radius: 50%;
    cursor: default
}

.noUi-handle:after {
    left: 17px
}

.noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after {
    top: 14px;
    left: 6px;
    width: 14px;
    height: 3px
}

.noUi-vertical .noUi-handle:after {
    top: 17px
}

[disabled] .noUi-connect {
    background: var(--color-primary)
}

[disabled].noUi-target, [disabled].noUi-handle, [disabled] .noUi-handle {
    cursor: not-allowed
}

.noUi-pips, .noUi-pips * {
    box-sizing: border-box
}

.noUi-pips {
    position: absolute;
    color: #999
}

.noUi-value {
    position: absolute;
    white-space: nowrap;
    text-align: center
}

.noUi-value-sub {
    background: var(--color-primary);
    font-size: 10px
}

.noUi-marker {
    position: absolute;
    background: #ccc
}

.noUi-marker-sub, .noUi-marker-large {
    background: #aaa
}

.noUi-pips-horizontal {
    top: 100%;
    left: 0;
    width: 100%;
    height: 80px;
    padding: 10px 0
}

.noUi-value-horizontal {
    transform: translate(-50%, 50%)
}

.noUi-rtl .noUi-value-horizontal {
    transform: translate(50%, 50%)
}

.noUi-marker-horizontal.noUi-marker {
    width: 2px;
    height: 5px;
    margin-left: -3px
}

.noUi-marker-horizontal.noUi-marker-sub {
    height: 10px
}

.noUi-connects {
    background: rgba(var(--color-primary--rgb), .3)
}

.favorite {
    padding-top: 40px
}

.favorite__container {
    display: flex;
    flex-direction: column
}

.favorite__icon {
    display: block;
    width: 90px;
    height: 90px;
    margin-right: auto;
    margin-bottom: 40px;
    margin-left: auto
}

.favorite__icon img {
    max-width: 100%;
    max-height: 100%
}

.favorite__text {
    margin-bottom: 40px;
    font-weight: 500;
    font-size: 20px;
    line-height: 118.382%;
    text-align: center
}

.favorite__btn {
    display: inline-flex;
    margin-right: auto;
    margin-left: auto
}

.favorite__row {
    display: grid;
    grid-template-columns:repeat(1, 1fr);
    gap: 40px
}

.category {
    padding-top: 40px;
    max-width: 100vw
}

.category__slider {
    margin: 0 var(--pad-neg);
    padding: 0 var(--pad);
    overflow: visible
}

.category__item {
    display: flex;
    align-items: center;
    max-width: 100%;
    height: auto;
    margin-right: 20px;
    border-radius: 20px;
    padding: 25px;
    background: var(--color-surface);
    border: 3px solid var(--color-surface);
    gap: 18px;
    transition: all .3s ease-in;
    width: 100%
}

.category__image {
    --size: 80px;
    flex: 0 0 var(--size);
    width: var(--size);
    height: var(--size)
}

.category__image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.category__text {
    color: var(--color-primary);
    font-weight: 500;
    font-size: 18px;
    line-height: 118.382%
}

.breadcrumb {
    margin-top: 25px;
    margin-bottom: 40px
}

.breadcrumb__list {
    display: flex;
    gap: 23px;
    align-items: center;
    color: rgba(var(--color-primary--rgb), .5);
    font-size: 18px;
    line-height: 118.382%
}

.breadcrumb__item a {
    transition: color .3s ease-in
}

.breadcrumb__item:not(:last-child) {
    position: relative
}

.breadcrumb__item:not(:last-child):after {
    position: absolute;
    top: 50%;
    left: calc(100% + 6px);
    display: block;
    width: 11px;
    height: 1px;
    background: currentcolor;
    content: ""
}

.purview {
    max-width: 100vw;
    overflow: hidden
}

.purview__title {
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 20px;
    line-height: normal
}

.purview__slider {
    margin: 0 var(--pad-neg);
    padding: 0 var(--pad);
    overflow: visible
}

.purview__slide {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 420/510;
    border-radius: 10px
}

.purview__link {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.purview__link:before {
    position: absolute;
    width: 80px;
    height: 80px;
    background: url(../img/i-video.svg) center center/cover no-repeat;
    content: ""
}

.purview__image {
    position: relative
}

.purview__image img {
    transition: transform .3s ease-in
}

.purview__image:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(176deg, #20232c 48.34%, #20232c 87.66%);
    content: ""
}

.purview__name {
    display: -webkit-box;
    margin-bottom: 15px;
    overflow: hidden;
    color: var(--color-whte);
    font-weight: 500;
    font-size: 25px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.purview__content {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 30px 35px
}

.purview__info {
    color: #ffffff80;
    font-size: 20px
}

.product__row {
    display: grid;
    gap: 40px
}

.product__images {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.product__slider {
    max-width: 100%;
    margin-bottom: 40px
}

.product__slide img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain
}

.product__thumbs {
    position: relative;
    max-width: 290px;
    padding: 0 31px
}

.product__thumbs-slide {
    width: 80px;
    padding: 10px;
    aspect-ratio: 1/1;
    border: 1px solid transparent;
    border-radius: 7px;
    transition: border .3s ease-in
}

.product__thumbs-slide.swiper-slide-thumb-active {
    border: 1px solid #101e21
}

.product__thumbs-slide img {
    max-width: 100%;
    object-fit: contain
}

.product__nav {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.product__arrow {
    position: relative;
    width: 31px;
    height: 100%;
    background: var(--color-whte);
    pointer-events: all
}

.product__arrow.arrow-prev {
    transform: rotate(180deg)
}

.product__arrow:before {
    position: absolute;
    top: 50%;
    right: 0;
    width: 10px;
    height: 18px;
    background: var(--color-primary);
    transform: translateY(-50%);
    transition: background .3s ease-in;
    content: "";
    -webkit-mask: url(../img/i-arrow-right.svg) center center/cover no-repeat;
    mask: url(../img/i-arrow-right.svg) center center/cover no-repeat
}

.product__title {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 24px;
    line-height: 118.382%
}

.product__controls {
    display: flex;
    gap: 34px;
    align-items: center;
    margin-bottom: 20px
}

.product__controls-list {
    display: flex;
    gap: 22px;
    align-items: center
}

.product__controls-link {
    position: relative
}

.product__controls-link:after {
    --icon-size: 13px;
    display: block;
    width: var(--icon-size);
    background-color: #c3c3c3;
    transition: background-color .3s;
    content: "";
    -webkit-mask: var(--icon) no-repeat center/contain;
    mask: var(--icon) no-repeat center/contain;
    aspect-ratio: 1
}

.product__group {
    display: grid;
    grid-template-columns:1fr;
    gap: 30px;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    overflow: hidden
}

.product__dl {
    display: grid;
    grid-template-columns:1fr;
    gap: 5px;
    line-height: 118.382%
}

.product__chars-name {
    margin-bottom: 21px;
    font-weight: 500;
    font-size: 18px;
    line-height: 118.382%
}

.product__dt {
    position: relative;
    display: flex;
    gap: 5px;
    align-items: center;
    color: rgba(var(--color-primary--rgb), .5)
}

.product__info {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 20px;
    background: var(--color-surface);
    border-radius: 20px
}

.product__info-text {
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 18px;
    font-style: normal
}

.product__info-prices {
    display: flex;
    flex-wrap: wrap;
    gap: 27px;
    align-items: center;
    margin-bottom: 24px
}

.product__info-price-cur {
    font-weight: 700;
    font-size: 35px;
    line-height: 118.382%
}

.product__info-price-old {
    color: #c8c7c7;
    font-weight: 600;
    font-size: 20px;
    line-height: 118.382%;
    text-decoration: line-through
}

.product__info-card {
    width: 100%
}

.product__info-card [data-quantity] {
    width: 100%;
    height: 100%
}

.product__info-card .quantity__button--minus {
    left: 30px
}

.product__info-card .quantity__button--plus {
    right: 30px
}

.product__info-btn {
    padding: 19px;
    font-size: 19px;
    width: 100%;
    line-height: 118.382%;
    text-align: center;
    border-radius: 5px
}

.product-about details > summary {
    list-style: none
}

.product-about details > summary::-webkit-details-marker {
    display: none
}

.product-about__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 24px;
    line-height: 118.382%
}

.product-about__title._spoller-active:after {
    transform: rotate(180deg)
}

.product-about__title:after {
    width: 20px;
    height: 10px;
    background: currentcolor;
    opacity: .5;
    transition: all .3s ease-in;
    content: "";
    -webkit-mask: url(../img/i-arrow.svg) center center/cover no-repeat;
    mask: url(../img/i-arrow.svg) center center/cover no-repeat
}

.product-about__title::marker, .product-about__title::-webkit-details-marker {
    display: none
}

.product-about__text {
    max-width: 1187px;
    font-weight: 400;
    font-size: 14px;
    font-style: normal;
    line-height: 130%
}

.product-chars details > summary {
    list-style: none
}

.product-chars details > summary::-webkit-details-marker {
    display: none
}

.product-chars__items {
    display: grid;
    grid-template-columns:repeat(1, 1fr);
    gap: 20px
}

.product-chars__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 24px;
    line-height: 118.382%
}

.product-chars__title._spoller-active:after {
    transform: rotate(180deg)
}

.product-chars__title:after {
    width: 20px;
    height: 10px;
    background: currentcolor;
    opacity: .5;
    transition: all .3s ease-in;
    content: "";
    -webkit-mask: url(../img/i-arrow.svg) center center/cover no-repeat;
    mask: url(../img/i-arrow.svg) center center/cover no-repeat
}

.product-chars__title::marker, .product-chars__title::-webkit-details-marker {
    display: none
}

.product-chars__col {
    display: grid;
    grid-template-columns:1fr;
    gap: 5px;
    font-size: 16px;
    line-height: 118.382%
}

.product-chars__dt {
    position: relative;
    display: flex;
    gap: 5px;
    align-items: center;
    color: rgba(var(--color-primary--rgb), .5)
}

details > summary {
    list-style: none
}

details > summary::-webkit-details-marker {
    display: none
}

.comparison__tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 var(--pad-neg);
    margin-bottom: 50px;
    padding: 0 var(--pad);
    overflow: auto
}

.comparison__tabs-item {
    position: relative;
    padding: 0 15px 13px;
    font-weight: 500;
    font-size: 16px;
    line-height: 118.382%;
    white-space: nowrap;
    border-bottom: 1px solid rgba(16, 30, 33, .2)
}

.comparison__tabs-item span {
    padding-left: 5px;
    color: rgba(var(--color-primary--rgb), .5)
}

.comparison__tabs-item.active:before {
    opacity: 1
}

.comparison__tabs-item:before {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-alt);
    opacity: 0;
    transition: opacity .3s ease-in;
    content: ""
}

.comparison__slider {
    margin-bottom: 30px
}

.comparison__slider .card {
    height: auto !important
}

.comparison__subtitle {
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 18px;
    line-height: 118.382%
}

.comparison__chars:not(:last-of-type) {
    margin-bottom: 30px
}

.comparison__spoiler {
    font-weight: 500;
    text-decoration: underline;
    list-style: none;
    cursor: pointer;
    transition: margin-bottom .3s ease-in
}

.comparison__spoiler::marker, .comparison__spoiler::-webkit-details-marker {
    display: none
}

.comparison__spoiler._spoller-active {
    margin-bottom: 35px
}

.comparison__spoiler._spoller-active:after {
    transform: rotate(270deg)
}

.comparison__spoiler:after {
    transform: rotate(90deg);
    transition: transform .3s ease-in
}

.comparison-detail__name {
    padding: 10px 18px;
    font-weight: 500;
    font-size: 16px;
    font-style: normal;
    line-height: 118.382%;
    background: rgba(245, 245, 245, .8)
}

.comparison-detail__slider {
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc
}

.comparison-detail__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 118.382%;
    text-align: center;
    border-right: 1px solid #ccc
}

.delivery__tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 var(--pad-neg);
    margin-bottom: 30px;
    padding: 0 var(--pad);
    overflow: auto
}

.delivery__tabs-item {
    position: relative;
    padding: 0 15px 13px;
    font-weight: 500;
    font-size: 16px;
    line-height: 118.382%;
    white-space: nowrap;
    border-bottom: 1px solid rgba(16, 30, 33, .2)
}

.delivery__tabs-item span {
    padding-left: 5px;
    color: rgba(var(--color-primary--rgb), .5)
}

.delivery__tabs-item.active:before {
    opacity: 1
}

.delivery__tabs-item:before {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-alt);
    opacity: 0;
    transition: opacity .3s ease-in;
    content: ""
}

[data-tabs-content] > .delivery-item.active {
    display: flex
}

.delivery-item {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start
}

.delivery-item__name {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    line-height: 120%
}

.delivery-item time {
    display: block
}

.delivery-item time:not(:last-of-type) {
    margin-bottom: 0
}

.delivery-item__info {
    margin-bottom: 20px;
    font-weight: 400;
    font-size: 14px;
    font-style: normal;
    line-height: 140%
}

.delivery-item__subtitle {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 16px;
    font-style: normal;
    line-height: 130%
}

.delivery-item__subtitle span {
    color: var(--color-alt)
}

.delivery-item__comment {
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    opacity: .5
}

.delivery-item__right .map {
    width: 100%;
    height: 450px
}

.delivery-item__image {
    display: block
}

.delivery-item__list {
    margin-bottom: 30px
}

.delivery-item__list-item {
    position: relative;
    padding-left: 30px;
    font-size: 14px;
    line-height: 120%
}

.delivery-item__list-item:not(:last-child) {
    margin-bottom: 25px
}

.delivery-item__list-item:before {
    position: absolute;
    top: 10px;
    left: 15px;
    width: 6px;
    height: 6px;
    background: currentcolor;
    border-radius: 50%;
    transform: translate(-50%);
    content: ""
}

.delivery-item__warn {
    font-weight: 500;
    font-size: 15px;
    line-height: 130%
}

.delivery-item__warn span {
    color: var(--color-alt)
}

.ymaps-2-1-79-map-copyrights-promo, .ymaps-2-1-79-search, .ymaps-2-1-79-controls__toolbar_right, .ymaps-2-1-79-gototech, .ymaps-2-1-79-float-button.ymaps-2-1-79-_hidden-text, .ymaps-2-1-79-controls__control {
    display: none !important
}

.ymaps-2-1-79-ground-pane {
    filter: grayscale(1)
}

.pluses__subtitle {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 20px;
    line-height: 118.382%
}

.pluses__row {
    display: grid;
    gap: 25px;
    align-items: flex-start
}

.pluses__row:not(:last-of-type) {
    margin-bottom: var(--space-bottom)
}

.pluses__item {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: var(--size);
    --size: 40px;
    padding-left: 80px
}

.pluses__item:before {
    position: absolute;
    top: 0%;
    left: 0;
    width: var(--size);
    height: var(--size);
    background: var(--icon) center center/cover no-repeat;
    border-radius: 15px;
    content: ""
}

.pluses__text {
    font-size: 14px;
    line-height: 140%
}

.pluses__info {
    margin-top: 14px;
    color: #101e2180;
    font-size: 13px;
    line-height: 140%
}

.pluses__comment {
    font-weight: 500;
    font-size: 15px;
    line-height: 130%
}

.article__head {
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: 10px
}

.article__image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%
}

.article__image:before {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: linear-gradient(255deg, rgba(16, 30, 33, .3) 33.89%, rgba(16, 30, 33, .8) 62.98%);
    content: ""
}

.article__image img {
    width: 100%;
    height: 100%
}

.article__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: 900px;
    height: 100%;
    min-height: 320px;
    padding: 42px 30px;
    color: var(--color-whte)
}

.article__info {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin-bottom: 20px;
    color: #ffffff80;
    font-weight: 500;
    font-size: 14px;
    line-height: 1
}

.article__info > :not(:last-child) {
    position: relative
}

.article__info > :not(:last-child):after {
    position: absolute;
    top: 50%;
    right: -10px;
    width: 4px;
    height: 4px;
    background: currentcolor;
    border-radius: 1px;
    transform: translate(100%, -50%);
    content: ""
}

.article__title {
    font-weight: 600;
    font-size: 20px;
    line-height: normal
}

.article__desc {
    margin-bottom: 15px;
    color: var(--color-alt);
    font-size: 14px;
    line-height: 140%
}

.article__desc b {
    font-weight: 500
}

.article__body {
    display: grid;
    gap: 30px
}

.article__text h2, .article__text h3, .article__text h4, .article__text h5, .article__text h6 {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 20px;
    line-height: normal
}

.article__text > :last-child {
    margin-bottom: 0
}

.article__text p {
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 140%
}

.article__body-image {
    position: relative
}

.article__body-image picture {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    display: block;
    max-width: 100%;
    height: auto
}

.article__body-image picture img {
    width: 100%;
    max-width: 100%;
    object-fit: contain
}

.others__slider {
    margin: 0 var(--pad-neg);
    padding: 0 var(--pad);
    overflow: visible
}

.others {
    max-width: 100vw;
    overflow: hidden
}

.others-slide {
    position: relative;
    max-width: 100%;
    margin-right: 10px;
    overflow: hidden;
    border-radius: 10px
}

.others-slide__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.others-slide__image:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: linear-gradient(203deg, #20232c 6.84%, rgba(32, 35, 44, .9) 53.81%);
    content: ""
}

.others-slide__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s ease-in
}

.others-slide__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    height: 100%;
    min-height: 320px;
    padding: 25px 20px;
    color: var(--color-whte)
}

.others-slide__info {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin-bottom: 20px;
    color: #ffffff80;
    font-weight: 500;
    font-size: 14px;
    line-height: 1
}

.others-slide__info > :not(:last-child) {
    position: relative
}

.others-slide__info > :not(:last-child):after {
    position: absolute;
    top: 50%;
    right: -10px;
    width: 4px;
    height: 4px;
    background: currentcolor;
    border-radius: 1px;
    transform: translate(100%, -50%);
    content: ""
}

.others-slide__title {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 20px;
    line-height: 118.382%
}

.others-slide__link {
    color: var(--color-alt);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    text-decoration: underline;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline
}

.complex__title {
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 20px;
    line-height: normal
}

.complex__row {
    display: grid;
    gap: 35px
}

.complex-item {
    display: flex;
    flex-direction: column;
    gap: 17px
}

.complex-item__head {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 17px;
    font-weight: 500;
    font-size: 18px;
    line-height: 118.382%;
    border-bottom: 1px solid rgba(16, 30, 33, .2)
}

.complex-item__value {
    color: var(--color-alt)
}

.complex-item__info {
    color: #2a2929b3;
    font-size: 16px;
    line-height: 1
}

.example {
    overflow: hidden;
    max-width: 100vw
}

.example__title {
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 20px;
    line-height: normal
}

.example__slider {
    margin: 0 var(--pad-neg);
    padding: 0 var(--pad);
    overflow: hidden
}

.example-item {
    max-width: 100%;
    margin-right: 30px;
    overflow: hidden;
    background: var(--color-surface);
    border-radius: 10px
}

.example-item__image {
    display: block;
    overflow: hidden
}

.example-item__image img {
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 540/360
}

.example-item__content {
    padding: 20px
}

.example-item__name {
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1
}

.example-item__info {
    font-size: 14px;
    line-height: 1;
    opacity: .7
}

.faq__title {
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 20px;
    line-height: normal
}

.faq__spoilers:not(:last-child) {
    margin-bottom: 25px
}

.faq__spoiler {
    display: flex;
    gap: 25px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px;
    font-weight: 500;
    font-size: 16px;
    font-style: normal;
    line-height: 1;
    border-bottom: 1px solid rgba(var(--color-primary--rgb), .2);
    transition: margin-bottom .3s ease-in;
    will-change: margin-bottom
}

.faq__spoiler._spoller-active {
    margin-bottom: 24px
}

.faq__spoiler-icon {
    --size: 40px;
    flex: 0 0 var(--size);
    width: var(--size);
    height: var(--size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-alt);
    transition: background .3s ease-in
}

._spoller-active .faq__spoiler-icon {
    background: var(--color-primary)
}

._spoller-active .faq__spoiler-icon:before {
    transform: rotate(180deg)
}

.faq__spoiler-icon:before {
    position: absolute;
    -webkit-mask: url(../img/i-arrow-bottom.svg) center center/contain no-repeat;
    mask: url(../img/i-arrow-bottom.svg) center center/contain no-repeat;
    width: 20px;
    height: 20px;
    background: var(--color-whte);
    transition: transform .3s ease-in;
    content: ""
}

.faq__content {
    max-width: 1033px;
    font-size: 14px;
    line-height: 140%
}

.shop__title {
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 20px;
    line-height: normal
}

.shop__row {
    display: grid;
    gap: clamp(30px, 5.31vw, 102px)
}

.shop__map #map {
    height: 520px
}

.shop__icon {
    width: 40px;
    height: 45px;
    display: block;
    background: var(--icon) center center/contain no-repeat;
    margin-bottom: 20px
}

.shop__name {
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 20px
}

.shop__contacts {
    display: grid;
    gap: 10px;
    font-size: 18px;
    line-height: 1;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 20px;
    color: var(--color-alt)
}

.shop__timetable {
    display: grid;
    gap: 10px
}

.shop__timetable-name {
    opacity: .5;
    margin-bottom: 15px;
    font-size: 16px
}

.shop__timetable-val {
    font-size: 16px;
    display: block
}

.shop__timetable-val:not(:last-child) {
    margin-bottom: 6px
}

.public__content h1 {
    font-weight: 600;
    font-size: 20px;
    line-height: normal;
    margin-bottom: 30px
}

.public__content > :last-child {
    margin-bottom: 0
}

.public__content h2 {
    font-size: 18px
}

.public__content h3 {
    font-size: 16px
}

.public__content h2, .public__content h3, .public__content h4, .public__content h5, .public__content h6 {
    margin-bottom: 16px;
    font-weight: 500;
    line-height: 130%
}

.public__content p {
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 14px;
    font-style: normal;
    line-height: 130%
}

.error-page {
    padding: 90px 0
}

.error-page__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--color-shared-eighth)
}

.error-page__title {
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 100px
}

.error-page__text {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 30px
}

.error-page__btn {
    line-height: 1.18;
    font-size: 18px;
    border-radius: var(--radius-xs)
}

.hero-banner {
    max-width: 100vw;
    background: #F2F2F2
}

.container.hero-banner__container {
    position: relative;
    padding: 25px var(--pad) 0
}

.hero-banner__left {
    max-width: 655px;
    position: relative;
    z-index: 2;
    line-height: 1.4;
    font-size: 16px
}

.hero-banner__title {
    margin-bottom: 20px;
    font-weight: 600;
    line-height: normal;
    font-size: 25px
}

.hero-banner__text {
    margin-bottom: 44px
}

.hero-banner__image {
    height: auto;
    width: 100%;
    margin-top: 35px;
    display: block
}

.hero-banner__btn {
    padding: 20px 31px;
    border-radius: var(--radius-xs);
    font-size: 18px;
    min-width: 220px
}

.hero-banner.hero-banner--black {
    background: #272933;
    color: var(--color-whte);
    position: relative
}

.hero-banner.hero-banner--black .hero-banner__container {
    position: initial
}

.contacts__container {
    display: grid;
    overflow: hidden
}

.contacts__title {
    font-weight: 600;
    font-size: 28px;
    margin-bottom: 30px
}

.contacts__location {
    display: flex;
    align-items: center;
    position: relative;
    line-height: 1.3;
    padding-left: 62px;
    font-weight: 600;
    margin-bottom: 30px
}

.contacts__location:before {
    content: "";
    background: var(--icon) center center/contain no-repeat;
    width: 40px;
    height: 46px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.contacts__list {
    margin-bottom: 30px
}

.contacts__list-item {
    display: inline-block;
    color: var(--color-alt);
    font-weight: 500;
    font-size: 16px
}

.contacts__list-item:not(:last-child) {
    margin-right: 20px
}

.contacts__list-item:not(:last-child):after {
    content: "/";
    padding-left: 22px
}

.contacts__timetable {
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    margin-bottom: 40px
}

.contacts__timetable-name {
    opacity: .6;
    margin-bottom: 16px
}

.contacts__timetable-time:not(:last-child) {
    margin-bottom: 8px
}

.contacts__detail {
    font-size: 14px;
    opacity: .5;
    line-height: 1.4
}

.contacts__map {
    width: 100%;
    /*height: 350px;*/
    margin-bottom: 35px;
    max-width: 100%;
    overflow: hidden
}

.advantages__list {
    display: grid;
    gap: 24px 12px;
    grid-template-columns:repeat(2, 1fr)
}

.advantages__item {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    align-items: center;
    font-weight: 500;
    gap: 16px
}

.advantages__item:before {
    content: "";
    width: var(--size);
    height: var(--size);
    --size: 60px;
    background: rgba(var(--color-alt--rgb), .1) var(--icon) center center/26px 26px no-repeat;
    border-radius: 16px
}

.about__row {
    display: grid;
    gap: 24px
}

.about__title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 1em
}

.about__text {
    font-size: 14px;
    line-height: 1.3
}

.about__btn {
    border-radius: var(--radius-xs);
    font-size: 18px;
    line-height: 1.18;
    margin-top: 20px
}

.about__right {
    background: rgba(242, 242, 242, .5);
    padding: 20px;
    position: relative
}

.about__subtitle {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 1em
}

.about__link {
    color: var(--color-alt);
    margin-top: 20px;
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    text-underline-offset: 2px;
    position: relative;
    z-index: 2
}

.about__image {
    position: absolute;
    width: 327px;
    height: 157px;
    right: 0;
    bottom: 0
}

body {
    padding-top: var(--header-height)
}

body.lock {
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none
}

@layer base {
    [class*=__container] {
        --pad: 15px;
        --pad-neg: -15px;
        box-sizing: border-box;
        width: 100%;
        max-width: 100rem;
        margin: 0 auto;
        padding: 0 var(--pad)
    }
}

body:after {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--index-3) - 1);
    width: 100%;
    height: 100%;
    background-color: #00000080;
    opacity: 0;
    transition: opacity .8s ease 0s;
    content: "";
    pointer-events: none
}

.popup-show body:after {
    opacity: 1
}

@layer component {
    .popup {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 30px 10px;
        visibility: hidden;
        transition: visibility .8s ease 0s;
        pointer-events: none
    }

    .popup_show {
        z-index: var(--index-3);
        overflow: auto;
        visibility: visible;
        pointer-events: auto
    }

    .popup_show .popup__content {
        transform: scale(1);
        visibility: visible
    }

    .popup__wrapper {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 100%
    }

    .popup__content {
        width: 100%;
        max-width: 900px;
        padding: 20px;
        background-color: #eee;
        border-radius: 20px;
        transform: scale(0);
        visibility: hidden;
        transition: transform .3s ease 0s
    }

    .lock .popup__content {
        visibility: visible
    }
}

input[type=text], input[type=email], input[type=tel], textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

input[type=number] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

input[type=search]::-webkit-search-cancel-button {
    display: none
}

@layer component {
    .input {
        font-weight: 400;
        font-size: 16px;
        line-height: 1;
        color: rgba(var(--color-whte--rgb), .4);
        outline: none
    }

    .input input {
        width: 100%;
        padding: 0 0 11px;
        color: rgba(var(--color-whte--rgb), .4);
        font-size: 16px;
        background-color: transparent;
        border-bottom: 1px solid rgba(var(--color-whte--rgb), .4);
        border-radius: 0;
        outline: none
    }

    .input[placeholder]:not([data-placeholder-nohiden])::placeholder {
        transition: opacity .3s
    }

    .input[placeholder]:not([data-placeholder-nohiden]):focus::placeholder {
        opacity: 0
    }

    textarea.input {
        padding: 0;
        resize: none
    }
}

@layer mod {
    .input--icon {
        --icon-size: 18px;
        position: relative
    }

    .input--icon input {
        padding-left: calc(var(--icon-size) + 19px)
    }

    .input--icon:before {
        position: absolute;
        top: 1px;
        left: 5px;
        pointer-events: none;
        display: block;
        width: var(--icon-size);
        background-color: currentcolor;
        transition: background-color .3s;
        content: "";
        -webkit-mask: var(--icon) no-repeat center/contain;
        mask: var(--icon) no-repeat center/contain;
        aspect-ratio: 1
    }
}

.select {
    position: relative;
    min-width: 0
}

.select._select-active .select__value input::placeholder {
    color: var(--color-primary)
}

.select__body {
    position: relative
}

.select__title {
    width: 100%;
    color: inherit;
    text-align: left;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    cursor: pointer
}

.select__value {
    display: flex;
    gap: .625rem;
    align-items: center;
    min-width: 0;
    height: 3.4375rem;
    padding: 1.25rem .9375rem
}

.select__value:has(input) {
    padding: .875rem 1.25rem .875rem 0rem
}

.select__value:has(input) input {
    padding: 0 1.25rem;
    font-size: 22px;
    outline: none
}

.select__value > * {
    flex: 1 1 auto
}

.select__value:after {
    display: flex;
    flex: 0 0 15px;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    background: #adafb0;
    transition: all .3s ease 0s;
    content: "";
    -webkit-mask: url(../img/i-arrow.svg) center center/contain no-repeat;
    mask: url(../img/i-arrow.svg) center center/contain no-repeat
}

._select-open .select__value:after {
    background: var(--color-primary);
    transform: rotate(-180deg)
}

.select__value._select-pseudo-label:before {
    opacity: .5;
    content: attr(data-pseudo-label)
}

.select__content, .select__text {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.select__input {
    width: 100%;
    height: 100%;
    background-color: transparent
}

.select__options {
    position: absolute;
    top: calc(100% - .0625rem);
    left: 0;
    min-width: 100%;
    overflow: hidden;
    color: #000;
    font-size: 22px;
    background: var(--color-whte);
    border: 1px solid rgba(16, 30, 33, .1);
    border-radius: 10px;
    box-shadow: 0 20px 20px #23232326
}

.select__scroll {
    max-height: 18.75rem;
    overflow-x: hidden;
    overflow-y: auto
}

.select__option {
    width: 100%;
    padding: 14px 20px;
    color: inherit;
    text-align: left;
    cursor: pointer
}

.select__option._select-selected {
    background-color: #eee
}

.select__row {
    display: inline-flex;
    align-items: center
}

.select--show-top .select__options {
    top: auto;
    bottom: calc(100% - .0625rem);
    padding: 5px 0 10px;
    border: 1px solid #d9d9d9;
    border-bottom: 0;
    border-radius: 4px 4px 0 0
}

._select-tag {
    cursor: pointer
}

.checkbox {
    position: relative
}

.checkbox:not(:last-child) {
    margin-bottom: .3125em
}

.checkbox__input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0
}

.checkbox__input:focus-visible + .checkbox__label:before {
    box-shadow: 0 0 5px #000
}

.checkbox__input:checked + .checkbox__label:before {
    background: url(../img/chk.svg) center center/17px 17px no-repeat
}

.checkbox__label {
    position: relative;
    display: flex;
    gap: 10px;
    cursor: pointer
}

.checkbox__label:before {
    --size: 25px;
    flex: 0 0 var(--size);
    height: var(--size);
    margin-right: 5px;
    background: #fff;
    border: 1.5px solid rgba(173, 175, 176, .6);
    border-radius: 6px;
    content: ""
}

.checkbox__text {
    align-self: center;
    font-weight: 400;
    font-style: normal;
    font-size: 18px
}

.checkbox__text .checkbox__info {
    color: #101e2159
}

.checkbox__info {
    margin-left: 10px
}

.quantity {
    display: flex;
    width: 90px;
    border-radius: 15px;
    overflow: hidden;
    height: 50px
}

.quantity__button {
    position: relative;
    flex: 0 0 30px;
    cursor: pointer
}

.quantity__button:before, .quantity__button:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    border-radius: 10px;
    height: 2px;
    margin: 0 0 0 -4.5px;
    background-color: var(--color-whte);
    transition: all .3s ease 0s;
    content: ""
}

.quantity__button--plus:before {
    transform: rotate(-90deg)
}

.quantity__input {
    flex: 1 1 auto
}

.quantity__input input {
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    font-size: 16px;
    text-align: center;
    outline: none;
    color: var(--color-whte)
}

[data-tabs-content] > * {
    display: none
}

[data-tabs-content] > *.active {
    display: block
}

@layer base {
    @font-face {
        font-family: swiper-icons;
        src: url(data:application/font-woff;charset=utf-8;base64,\ d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA) format("woff");
        font-weight: 400;
        font-style: normal
    }:root {
    --swiper-theme-color: #007aff
}

    .swiper, swiper-container {
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: 0;
        z-index: 1;
        display: block
    }

    .swiper-vertical > .swiper-wrapper {
        flex-direction: column
    }

    .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        transition-property: transform;
        transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
        box-sizing: content-box
    }

    .swiper-android .swiper-slide, .swiper-wrapper {
        transform: translateZ(0)
    }

    .swiper-horizontal {
        touch-action: pan-y
    }

    .swiper-vertical {
        touch-action: pan-x
    }

    .swiper-slide, swiper-slide {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        position: relative;
        transition-property: transform;
        display: block
    }

    .swiper-slide-invisible-blank {
        visibility: hidden
    }

    .swiper-autoheight, .swiper-autoheight .swiper-slide {
        height: auto
    }

    .swiper-autoheight .swiper-wrapper {
        align-items: flex-start;
        transition-property: transform, height
    }

    .swiper-backface-hidden .swiper-slide {
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    .swiper-3d.swiper-css-mode .swiper-wrapper {
        perspective: 1200px
    }

    .swiper-3d .swiper-wrapper {
        transform-style: preserve-3d
    }

    .swiper-3d {
        perspective: 1200px
    }

    .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-cube-shadow {
        transform-style: preserve-3d
    }

    .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 10
    }

    .swiper-3d .swiper-slide-shadow {
        background: rgba(0, 0, 0, .15)
    }

    .swiper-3d .swiper-slide-shadow-left {
        background-image: linear-gradient(to left, rgba(0, 0, 0, .5), #000000)
    }

    .swiper-3d .swiper-slide-shadow-right {
        background-image: linear-gradient(to right, rgba(0, 0, 0, .5), #000000)
    }

    .swiper-3d .swiper-slide-shadow-top {
        background-image: linear-gradient(to top, rgba(0, 0, 0, .5), #000000)
    }

    .swiper-3d .swiper-slide-shadow-bottom {
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), #000000)
    }

    .swiper-css-mode > .swiper-wrapper {
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none
    }

    .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
        display: none
    }

    .swiper-css-mode > .swiper-wrapper > .swiper-slide {
        scroll-snap-align: start start
    }

    .swiper-horizontal.swiper-css-mode > .swiper-wrapper {
        scroll-snap-type: x mandatory
    }

    .swiper-vertical.swiper-css-mode > .swiper-wrapper {
        scroll-snap-type: y mandatory
    }

    .swiper-css-mode.swiper-free-mode > .swiper-wrapper {
        scroll-snap-type: none
    }

    .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
        scroll-snap-align: none
    }

    .swiper-centered > .swiper-wrapper:before {
        content: "";
        flex-shrink: 0;
        order: 9999
    }

    .swiper-centered > .swiper-wrapper > .swiper-slide {
        scroll-snap-align: center center;
        scroll-snap-stop: always
    }

    .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
        -webkit-margin-start: var(--swiper-centered-offset-before);
        margin-inline-start: var(--swiper-centered-offset-before)
    }

    .swiper-centered.swiper-horizontal > .swiper-wrapper:before {
        height: 100%;
        min-height: 1px;
        width: var(--swiper-centered-offset-after)
    }

    .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
        -webkit-margin-before: var(--swiper-centered-offset-before);
        margin-block-start: var(--swiper-centered-offset-before)
    }

    .swiper-centered.swiper-vertical > .swiper-wrapper:before {
        width: 100%;
        min-width: 1px;
        height: var(--swiper-centered-offset-after)
    }

    .swiper-lazy-preloader {
        width: 42px;
        height: 42px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -21px;
        margin-top: -21px;
        z-index: 10;
        transform-origin: 50%;
        box-sizing: border-box;
        border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
        border-radius: 50%;
        border-top-color: transparent
    }

    .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
        animation: swiper-preloader-spin 1s infinite linear
    }

    .swiper-lazy-preloader-white {
        --swiper-preloader-color: #fff
    }

    .swiper-lazy-preloader-black {
        --swiper-preloader-color: #000
    }

    @keyframes swiper-preloader-spin {
        0% {
            transform: rotate(0)
        }
        to {
            transform: rotate(360deg)
        }
    }.swiper .swiper-notification, swiper-container .swiper-notification {
         position: absolute;
         left: 0;
         top: 0;
         pointer-events: none;
         opacity: 0;
         z-index: -1000
     }
}

.comparison__tabs::-webkit-scrollbar, .delivery__tabs::-webkit-scrollbar {
    display: none
}

.js-quantity {
    position: relative
}

.js-quantity.active .btn {
    pointer-events: none;
    opacity: 0
}

.js-quantity.active [data-quantity] {
    opacity: 1;
    pointer-events: all
}

.js-quantity .btn {
    transition: all .3s ease-in 0s
}

.js-quantity [data-quantity] {
    transition: all .3s ease-in 0s;
    top: 0;
    pointer-events: none;
    right: 0;
    opacity: 0;
    z-index: 3;
    height: 100%;
    position: absolute;
    background: var(--color-primary)
}

@media only screen and (min-width: 38.75em) {
    .example-item {
        max-width: 410px
    }

    .shop__contacts {
        font-size: 20px;
        grid-template-columns:repeat(2, 251px);
        gap: 28px;
        margin-bottom: 34px
    }

    .shop__link:nth-child(odd) {
        position: relative;
        display: flex;
        justify-content: space-between;
        gap: 3px
    }

    .shop__link:nth-child(odd):after {
        content: "/";
        right: 0;
        top: 50%;
        line-height: 1
    }

    .shop__timetable {
        grid-template-columns:repeat(2, 1fr);
        gap: 28px
    }
}

@media only screen and (min-width: 47.99875em) {
    @layer component {
        .footer__menu {
            gap: 80px
        }
    }@layer component {
    .intro__items {
        grid-template-columns:1fr 1fr
    }
}@layer component {
    .section {
        --space-bottom: 80px;
        --space-bottom-neg: -80px
    }
}@layer mod {
    .section--alt {
        --space-bottom: 40px
    }
}@layer component {
    .card {
        border: 1px solid rgba(var(--color-blck--rgb), .2);
        padding: 62px 24px 24px
    }
}@layer component {
    .card__controls {
        top: 20px;
        right: 20px
    }
}@layer component {
    .card__controls-item:not(:last-child) {
        margin-right: 19px;
        padding-right: 19px
    }
}@layer component {
    .card__controls-link:after {
        --icon-size: 19px
    }
}@layer component {
    .card__media {
        aspect-ratio: 316/179;
        border-radius: 0;
        padding: 0;
        background: transparent;
        margin-bottom: 32px
    }
}@layer component {
    .card__name {
        margin-bottom: 32px;
        font-size: 18px
    }
}@layer component {
    .card__price-old {
        font-size: 14px
    }
}@layer component {
    .card__price-current {
        font-size: 22px
    }
}.section-head {
     gap: 10px 15px;
     margin-bottom: 50px
 }

    .section-head__title {
        font-size: 30px
    }

    @layer component {
        .btn-icon {
            padding: 18px;
            border-radius: var(--radius-xm)
        }
    }@layer component {
    .social__link:hover {
        color: var(--color-alt)
    }
}@layer component {
    .reviews-icons__link:hover {
        color: var(--color-alt)
    }
}@layer component {
    .promo-catalog__items {
        grid-template-columns:300px 1fr 300px
    }
}@layer mod {
    .promo-catalog--alt .promo-catalog__items {
        grid-template-columns:repeat(3, 1fr);
        gap: 20px
    }
}@layer mod {
    .promo-catalog--alt .card-promo--alt {
        min-height: 280px
    }
}@layer component {
    .banner__box {
        padding: 45px 40px
    }
}@layer component {
    .banner__content {
        max-width: 47%
    }
}@layer component {
    .banner__content .btn {
        margin-top: 60px
    }
}@layer component {
    .banner__media {
        margin-top: 60px
    }
}@layer state {
    .banner[data-template=first] .banner__box:after {
        top: 0;
        max-width: 53.8%;
        height: 100%
    }
}@layer state {
    .banner[data-template=four] .banner__box:after {
        top: 0;
        max-width: 48.8%;
        height: 100%
    }
}@layer state {
    .banner[data-template=second] .banner__container {
        padding-top: 16px
    }
}@layer component {
    .card-promo {
        min-height: 300px;
        --pad-card-top: 40px;
        --pad-card-left: 50px
    }
}@layer component {
    .card-promo__manufacturer {
        font-size: 80px
    }
}@layer component {
    .card-promo__name {
        font-size: 18px
    }
}@layer mod {
    .card-promo--alt {
        grid-column: span 2
    }
}@layer mod {
    .card-promo--secondary {
        grid-column: span 2
    }
}@layer mod {
    .card-promo--high {
        grid-row: span 2
    }
}@layer mod {
    .slider-preview--page .slider-preview__items {
        gap: 40px
    }
}@layer mod {
    .slider-preview__item--alt .slider-preview__text {
        margin-bottom: 40px
    }
}@layer component {
    .swiper-nav {
        margin-top: 40px
    }
}@layer component {
    .slider-reviews__tabs {
        gap: 50px
    }
}@layer component {
    .slider-reviews__tabs-item:before {
        width: 55px;
        border-radius: var(--radius-xm)
    }
}@layer component {
    .slider-reviews__tabs-item:after {
        top: 12px;
        width: 30px
    }
}@layer component {
    .card-review {
        padding: 34px
    }
}@layer component {
    .card-review__author:before {
        width: 65px
    }
}@layer component {
    .btn-link {
        font-size: 18px
    }
}.page-head__title {
     font-size: 30px
 }

    .catalog__content {
        grid-template-columns:repeat(2, 1fr)
    }

    .favorite__row {
        gap: 30px clamp(20px, 2.5vw, 40px);
        grid-template-columns:repeat(2, 1fr)
    }

    .category__item {
        width: 300px
    }

    .purview__title {
        margin-bottom: 50px
    }

    .purview__title {
        font-size: 30px
    }

    .purview__slide {
        width: 420px
    }

    .product__slider {
        width: 556.919px
    }

    .product__thumbs {
        max-width: 370px;
        padding: 0 51px
    }

    .product__controls-link:after {
        --icon-size: 19px
    }

    .product__dl {
        grid-template-columns:272px auto;
        font-size: 16px;
        gap: 12px
    }

    .product__dt:after {
        flex: 1 1 auto;
        min-width: 82px;
        height: 1px;
        background: repeating-linear-gradient(90deg, transparent 0, transparent 2px, currentcolor 2px, currentcolor 4px, transparent 4px, transparent 8px);
        content: ""
    }

    .product-chars__col {
        grid-template-columns:272px auto;
        gap: 12px
    }

    .product-chars__dt:after {
        flex: 1 1 auto;
        min-width: 82px;
        height: 1px;
        background: repeating-linear-gradient(90deg, transparent 0, transparent 2px, currentcolor 2px, currentcolor 4px, transparent 4px, transparent 8px);
        content: ""
    }

    .comparison__slider {
        margin-bottom: 40px
    }

    .comparison__subtitle {
        font-size: 24px
    }

    .delivery__tabs {
        margin-bottom: 40px
    }

    .delivery-item {
        gap: 30px
    }

    .delivery-item__name {
        font-size: 24px
    }

    .delivery-item__info {
        font-size: 18px
    }

    .delivery-item__subtitle {
        font-size: 22px
    }

    .delivery-item__comment, .delivery-item__list-item {
        font-size: 18px
    }

    .delivery-item__warn {
        font-size: 19px
    }

    .pluses__row {
        grid-template-columns:repeat(2, 1fr);
        gap: 40px 20px
    }

    .pluses__text {
        font-size: 16px
    }

    .pluses__info {
        font-size: 15px
    }

    .pluses__comment {
        font-size: 19px
    }

    .article__head {
        margin-bottom: 40px
    }

    .article__info {
        font-size: 18px
    }

    .article__title {
        font-size: 30px
    }

    .article__desc {
        font-size: 18px
    }

    .article__text h2, .article__text h3, .article__text h4, .article__text h5, .article__text h6 {
        margin-bottom: 30px;
        font-size: 30px
    }

    .article__text p {
        margin-bottom: 20px;
        font-size: 18px
    }

    .others-slide {
        max-width: calc(50% - 11px);
        margin-right: 20px
    }

    .others-slide__info, .others-slide__link {
        font-size: 18px
    }

    .complex__title {
        margin-bottom: 50px;
        font-size: 30px
    }

    .complex-item__head {
        font-size: 24px
    }

    .complex-item__info {
        font-size: 18px
    }

    .example__title {
        margin-bottom: 50px;
        font-size: 30px
    }

    .example-item__image {
        max-height: 240px
    }

    .example-item__name {
        font-size: 20px
    }

    .example-item__info {
        font-size: 16px
    }

    .faq__title {
        margin-bottom: 50px;
        font-size: 30px
    }

    .faq__spoiler {
        font-size: 24px
    }

    .faq__spoiler-icon {
        --size: 60px
    }

    .faq__content {
        font-size: 18px
    }

    .shop__title {
        margin-bottom: 50px;
        font-size: 30px
    }

    .shop__icon {
        margin-bottom: 34px
    }

    .shop__name {
        font-size: 24px;
        margin-bottom: 34px
    }

    .shop__timetable-name, .shop__timetable-val {
        font-size: 18px
    }

    .public__content h1 {
        font-size: 30px
    }

    .public__content h2 {
        font-size: 22px
    }

    .public__content h3, .public__content p {
        font-size: 18px
    }

    .error-page__title {
        font-size: 150px
    }

    .error-page__text {
        margin-bottom: 50px;
        font-size: 32px
    }

    .container.hero-banner__container {
        padding: 60px var(--pad);
        min-height: 450px
    }

    .hero-banner__left {
        font-size: 18px;
        max-width: 438px
    }

    .hero-banner__title {
        font-size: 30px;
        margin-bottom: 30px
    }

    .hero-banner__image {
        margin-top: 0;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 65.29%;
        aspect-ratio: 1007/477;
        height: auto
    }

    .hero-banner__image img {
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: bottom center
    }

    .hero-banner.hero-banner--black:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 2;
        background: linear-gradient(180deg, #1C1D22 66.82%, #1c1d22 100%);
        background: linear-gradient(90deg, #1C1D22 48.82%, #1c1d22 75.68%)
    }

    .hero-banner.hero-banner--black .hero-banner__image {
        right: 0;
        width: 60%;
        height: 100%
    }

    .hero-banner.hero-banner--black .hero-banner__image img {
        object-fit: cover;
        object-position: center
    }

    .contacts.contacts--section .contacts__map {
        min-height: 411px
    }

    .advantages__list {
        gap: 24px
    }

    .advantages__item {
        font-size: 18px;
        gap: 24px
    }

    .about__title {
        font-size: 28px
    }

    .about__text {
        font-size: 16px
    }

    .about__right {
        padding: 40px
    }

    .about__subtitle {
        font-size: 20px
    }

    .about__link {
        margin-top: 106px
    }

    @layer base {
        [class*=__container] {
            --pad: 30px;
            --pad-neg: -30px
        }
    }
}

@media only screen and (min-width: 47.99875em) and (max-width: 85.37375em) {
    @layer mod {
        .promo-catalog--alt .promo-catalog__item {
            --pad-card-top: 20px;
            --pad-card-left: 20px
        }
    }
}

@media only screen and (min-width: 47.99875em) and (max-width: 159.9375em) {
    @layer component {
        .card-promo__image {
            width: 63%
        }
    }
}

@media only screen and (min-width: 61.99875em) {
    .delivery-item__comment {
        margin-bottom: 20px;
        font-size: 21px
    }
}

@media only screen and (min-width: 63.99875em) {
    @layer component {
        .footer {
            padding: 70px 0 103px
        }
    }@layer component {
    .footer__container {
        grid-template-columns:270px 1fr 220px
    }
}@layer component {
    .footer__logo {
        grid-row: 1;
        grid-column: 1;
        width: 266px
    }
}@layer component {
    .footer__menu {
        gap: 60px;
        justify-content: center;
        margin-bottom: 0
    }
}@layer component {
    .footer__contacts {
        gap: 70px
    }
}@layer component {
    .footer__contacts-cities {
        flex-grow: 1
    }
}@layer component {
    .footer__contacts-cities .footer__list--alt:first-child {
        margin-top: auto
    }
}@layer component {
    .footer__copyright {
        grid-row: 1;
        grid-column: 1;
        margin-top: auto
    }
}@layer component {
    .btn {
        padding: 23px 66px;
        font-size: 23px
    }
}@layer component {
    .intro__container {
        grid-template-columns:300px 1fr;
        gap: 47px
    }
}@layer component {
    .social__list {
        gap: 21px
    }
}@layer component {
    .social__link {
        --width: 26px
    }
}@layer component {
    .reviews-icons__link {
        --width: 26px
    }
}@layer component {
    .promo-catalog__items {
        grid-template-columns:400px 1fr 400px
    }
}@layer mod {
    .promo-catalog--alt .promo-catalog__item {
        min-height: 250px
    }
}@layer component {
    .banner__title {
        margin-bottom: 30px;
        font-size: 33px
    }
}@layer component {
    .banner__location {
        margin-bottom: 33px;
        font-size: 23px
    }
}@layer component {
    .banner__text {
        font-size: 22px
    }
}@layer component {
    .banner__ps {
        right: 40px;
        bottom: 27px;
        font-size: 17px
    }
}@layer state {
    .banner[data-template=second] .banner__container {
        padding-top: 22px
    }
}@layer component {
    .card-promo {
        min-height: 320px
    }
}@layer component {
    .card-promo__name {
        font-size: 22px
    }
}@layer component {
    .card-promo__icon-link {
        top: 15px;
        right: 15px
    }
}@layer component {
    .slider-preview__item {
        grid-template-columns:.963fr 1fr
    }
}@layer component {
    .slider-preview__top-content {
        padding: 30px 40px
    }
}@layer component {
    .slider-preview__item-title {
        font-size: 30px
    }
}@layer component {
    .slider-preview__item-bottom {
        padding: 25px
    }
}@layer component {
    .slider-preview__item-desc {
        font-size: 18px
    }
}@layer component {
    .slider-preview__text {
        font-size: 18px
    }
}.product-about__title:after {
     display: none
 }

    .product-chars__items {
        grid-template-columns:repeat(2, 1fr)
    }

    .product-chars__title:after {
        display: none
    }

    .contacts__container {
        grid-template-columns:1fr 55.6060606061%;
        gap: 32px
    }

    .contacts__title {
        font-size: 32px
    }

    .contacts__list-item {
        font-size: 18px
    }

    .contacts__list-item:not(:last-child) {
        margin-right: 32px
    }

    .contacts__map {
        margin-bottom: 0;
        min-height: 550px;
        height: 100%
    }
}

@media only screen and (min-width: 63.99875em) and (max-width: 119.99875em) {
    @layer component {
        .footer__container {
            gap: 30px
        }
    }@layer component {
    .footer__menu .footer__list {
        width: 50%
    }
}
}

@media only screen and (min-width: 63.99875em) and (max-width: 159.9375em) {
    @layer mod {
        .promo-catalog--alt .card-promo__media {
            max-width: 40%
        }
    }@layer mod {
    .promo-catalog--alt .card-promo--alt .card-promo__media {
        max-width: 40%
    }
}
}

@media only screen and (min-width: 63.99875em) and (max-width: 85.37375em) {
    @layer component {
        .card-promo:not(.card-promo--unique) .card-promo__media {
            display: flex;
            justify-content: center;
            align-items: center
        }
    }.public__content h2, .public__content h3, .public__content h4, .public__content h5, .public__content h6 {
         margin-bottom: 18px
     }
}

@media only screen and (min-width: 85.37375em) {
    :root {
        --header-height: 152px
    }

    @layer component {
        .header__phone {
            padding: 21px 45px;
            font-size: 18px
        }
    }@layer component {
    .header__bottom > * {
        opacity: 0
    }
}@layer component {
    .header__bottom {
        padding: 30px 0;
        overflow: hidden
    }
}@layer component {
    .header__logo-img {
        width: 150px
    }
}@layer component {
    .header__submenu-more {
        margin-left: 20px
    }
}@layer component {
    .header__submenu-more .dropdown {
        width: 374px
    }
}@layer component {
    .header .search-form {
        flex-shrink: 0;
        width: 240px
    }
}@layer component {
    .footer__container {
        grid-template-columns:312px 1fr 267px
    }
}@layer component {
    .footer__menu {
        gap: 170px
    }
}@layer mod {
    .btn--outline {
        padding: 12px 26px
    }
}@layer component {
    .location__label:before {
        display: block;
        width: 12px;
        background-color: var(--color-alt);
        transition: background-color .3s;
        content: "";
        -webkit-mask: url(../img/i-location.svg) no-repeat center/contain;
        mask: url(../img/i-location.svg) no-repeat center/contain;
        height: 14px
    }
}@layer component {
    .location__label:after {
        display: block;
        width: 9px;
        background-color: var(--color-alt);
        transition: background-color .3s;
        content: "";
        -webkit-mask: url(../img/i-arrow-bottom.svg) no-repeat center/contain;
        mask: url(../img/i-arrow-bottom.svg) no-repeat center/contain;
        height: 5px;
        margin-left: 8px
    }
}@layer component {
    .intro {
        padding: 118px 0 117px
    }
}@layer component {
    .intro__container {
        grid-template-columns:320px 1fr;
        gap: 30px
    }
}@layer component {
    .intro__content {
        padding-top: 43px
    }
}@layer component {
    .intro__content .btn {
        margin-top: 102px
    }
}@layer component {
    .intro__title {
        font-size: 30px
    }
}@layer component {
    .intro__text {
        font-size: 23px
    }
}@layer component {
    .intro__items {
        grid-template-areas:"first second second third" "first four five five";
        grid-template-columns:325px 270px 1fr 270px
    }
}@layer component {
    .intro__item:first-child {
        grid-area: first
    }
}@layer component {
    .intro__item:nth-child(2) {
        grid-area: second
    }

    .intro__item:nth-child(2) .intro__item-image {
        max-width: 175px
    }
}@layer component {
    .intro__item:nth-child(3) {
        grid-area: third
    }
}@layer component {
    .intro__item:nth-child(4) {
        grid-area: four
    }
}@layer component {
    .intro__item:nth-child(5) {
        grid-area: five
    }
}@layer mod {
    .intro__item--alt {
        margin-left: 61px
    }
}@layer component {
    .section {
        --space-bottom: 100px;
        --space-bottom-neg: -100px
    }
}@layer mod {
    .section--alt {
        --space-bottom: 60px
    }
}@layer component {
    .card__price-group .card__price-type {
        font-size: 14px;
        min-width: 72px
    }
}@layer component {
    .card__price-group .card__price-val {
        font-size: 20px
    }
}@layer component {
    .card .rating {
        margin-bottom: 27px
    }
}@layer component {
    .card__price-type {
        font-size: 18px
    }
}.section-head__title {
     font-size: 32px
 }

    @layer component {
        .promo-catalog__items {
            grid-template-columns:500px 1fr 500px;
            gap: 30px
        }
    }@layer mod {
    .promo-catalog--alt .promo-catalog__item {
        min-height: 198px
    }
}@layer component {
    .banner__box {
        padding: 60px 0 60px 60px
    }
}@layer component {
    .banner__title {
        font-size: 36px;
        margin-bottom: 28px
    }
}@layer component {
    .banner__media {
        gap: 36px
    }
}@layer component {
    .banner__media-item {
        --size: 72px
    }
}@layer mod {
    .banner__btn--wide {
        min-width: 306px
    }
}@layer state {
    .banner[data-template=second] .banner__container {
        padding-top: 31px
    }
}@layer component {
    .card-promo {
        min-height: 265px
    }
}@layer component {
    .card-promo__manufacturer {
        bottom: -30px;
        font-size: 130px
    }
}@layer component {
    .card-promo__name {
        font-size: 23px
    }
}@layer component {
    .card-promo__media {
        max-width: 50%;
        max-height: 70%
    }
    .card-promo:not(.card-promo--new) .card-promo__media {
        max-width: 60%;
        max-height: 70%
    }
}@layer component {
    .card-promo__icon-link {
        top: 41px;
        right: 41px;
        width: 47px
    }
}@layer component {
    .card-promo__icon-link:before {
        --icon-size: 23px
    }
}@layer component {
    .slider-preview__item-bottom .btn {
        padding: 18px 20px;
        font-size: 18px
    }
}@layer component {
    .swiper-nav {
        gap: 40px;
        margin-top: 65px
    }
}@layer component {
    .slider-reviews__tabs {
        position: absolute;
        top: 0;
        transform: translate(-50%)
    }
}@layer component {
    .slider-reviews__rating {
        margin-bottom: 60px
    }
}.slider-reviews .section-head {
     margin-bottom: 78px
 }

    @layer mod {
        .slider-reviews--alt .slider-reviews__title {
            font-size: 35px
        }
    }.page-head {
         padding: 75px 0 116px
     }

    .page-head + * {
        position: relative;
        z-index: 2;
        margin-top: -50px;
        background: var(--color-whte);
        border-top-left-radius: 50px;
        border-top-right-radius: 50px
    }

    .page-head__title {
        font-size: 40px
    }

    .catalog__sort .select .select__title {
        padding-right: 38px
    }

    .catalog__inner {
        position: relative;
        display: grid;
        grid-template-columns:clamp(340px, 21.875%, 420px) auto;
        gap: clamp(20px, 2.5vw, 40px)
    }

    .catalog__showmore {
        margin-top: 40px
    }

    .catalog__filter-btn {
        display: none
    }

    .favorite {
        padding-top: 79px
    }

    .favorite__text {
        font-size: 24px;
        margin-bottom: 50px
    }

    .favorite__row {
        gap: clamp(20px, 2.5vw, 40px);
        grid-template-columns:repeat(3, 1fr)
    }

    .category {
        padding-top: 79px
    }

    .category__item {
        margin-right: 40px;
        padding: 14px;
        width: calc(25% - 21px)
    }

    .category__image {
        --size: 72px
    }

    .category__text {
        font-size: 18px
    }

    .breadcrumb {
        margin-top: 40px;
        margin-bottom: 60px
    }

    .product__row {
        grid-template-columns:31.7708333333% auto
    }

    .product__slider {
        margin-bottom: 65px
    }

    .product__arrow {
        width: 50px
    }

    .product__title {
        margin-bottom: 30px;
        font-size: 30px
    }

    .product__controls {
        margin-bottom: 30px
    }

    .product__group {
        grid-template-columns:auto 360px
    }

    .product__dl {
        max-width: 574px
    }

    .product__chars-name {
        font-size: 20px
    }

    .product__info {
        order: 2;
        padding: 30px
    }

    .product-about__title {
        margin-bottom: 30px
    }

    .product-about__text {
        font-size: 16px
    }

    .product-chars__title {
        margin-bottom: 30px
    }

    .comparison__tabs-item {
        padding: 0 44px 27px;
        font-size: 20px
    }

    .comparison__chars:not(:last-of-type) {
        margin-bottom: 50px
    }

    .comparison-detail__name {
        padding: 16px 22px;
        font-size: 20px
    }

    .comparison-detail__slide {
        padding: 20px 18px;
        font-size: 15px
    }

    .delivery__tabs {
        margin-bottom: 84px
    }

    .delivery__tabs-item {
        padding: 0 44px 27px;
        font-size: 20px
    }

    .delivery-item {
        flex-direction: row;
        gap: 79px
    }

    .delivery-item__right {
        margin-left: auto
    }

    .delivery-item__right .map {
        width: 610px;
        height: 359px
    }

    .delivery-item__image {
        width: 653.667px;
        height: 340.346px;
        margin-left: auto
    }

    .delivery-item__image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain
    }

    .pluses__subtitle {
        margin-bottom: 30px;
        font-size: 24px
    }

    .pluses__row:not(:last-of-type) {
        margin-bottom: 67px
    }

    .pluses__row {
        grid-template-columns:repeat(3, 1fr);
        gap: clamp(20px, 2.5vw, 80px)
    }

    .pluses__item {
        --size: 60px
    }

    .pluses__item {
        padding-left: 100px
    }

    .pluses__comment {
        font-size: 23px
    }

    .article__head {
        margin-bottom: 88px
    }

    .article__content {
        min-height: 320px;
        padding: 42px 30px
    }

    .article__title {
        font-size: 38px
    }

    .article__body {
        grid-template-columns:auto 35.7981220657%;
        gap: 40px
    }

    .others-slide {
        max-width: 573px;
        margin-right: 41px
    }

    .others-slide__content {
        min-height: 380px;
        padding: 35px 30px
    }

    .others-slide__info {
        margin-bottom: 35px;
        font-size: 21px
    }

    .others-slide__title {
        margin-bottom: 30px;
        font-size: 24px
    }

    .others-slide__link {
        font-size: 22px
    }

    .complex__row {
        grid-template-columns:repeat(2, 1fr);
        gap: clamp(20px, 3.5vw, 62px) clamp(40px, 8vw, 153px)
    }

    .faq__spoilers:not(:last-child) {
        margin-bottom: 35px
    }

    .shop__row {
        grid-template-columns:51.3254371122% auto
    }

    .shop__map #map {
        height: 350px
    }

    .error-page {
        padding: 11.25vw 0px
    }

    .error-page__title {
        font-size: 200px;
        margin-bottom: 21px
    }

    .error-page__text {
        font-size: 38px;
        margin-bottom: 78px
    }

    .container.hero-banner__container {
        min-height: 450px;
        padding: 85px var(--pad)
    }

    .hero-banner__left {
        font-size: 20px;
        max-width: 655px
    }

    .hero-banner__title {
        font-size: 38px
    }

    .hero-banner__image {
        width: 76.29%
    }

    .contacts__container {
        gap: 60px
    }

    .contacts__title {
        margin-bottom: 76px;
        font-size: 40px
    }

    .contacts__location {
        font-size: 24px;
        margin-bottom: 60px
    }

    .contacts__list {
        margin-bottom: 60px
    }

    .contacts__list-item {
        font-size: 22px
    }

    .contacts__list-item:not(:last-child) {
        margin-right: 48px
    }

    .contacts__timetable {
        margin-bottom: 80px;
        gap: 20px 76px
    }

    .contacts.contacts--section .contacts__title {
        font-size: 32px
    }

    .advantages__list {
        gap: 32px;
        grid-template-columns:repeat(4, 1fr)
    }

    .advantages__item {
        font-size: 23px;
        gap: 32px;
        align-items: stretch
    }

    .about__row {
        justify-content: space-between;
        grid-template-columns:1fr 546px
    }

    .about__left {
        max-width: 607px
    }

    .about__title {
        font-size: 32px
    }

    .about__text {
        font-size: 18px
    }

    .about__btn {
        padding: 20px 66px;
        margin-top: 54px
    }

    .about__subtitle {
        font-size: 24px
    }

    @layer base {
        [class*=__container] {
            --pad: 60px;
            --pad-neg: -60px
        }
    }
}

@media only screen and (min-width: 85.37375em) and (max-width: 69.99875em) {
    @layer component {
        .header__top .menu__item:not(:last-child) {
            margin-right: 20px
        }
    }
}

@media only screen and (min-width: 85.37375em) and (max-width: 119.99875em) {
    @layer component {
        .header__top .menu__link {
            font-size: 14px
        }
    }@layer component {
    .intro__item:nth-child(3) .intro__item-image {
        max-width: 200px
    }
}
}

@media only screen and (min-width: 85.37375em) and (max-width: 95.99875em) {
    @layer component {
        .intro__container {
            align-items: center
        }
    }@layer component {
    .intro__item {
        height: 190px
    }
}@layer component {
    .intro__item:first-child .intro__item-image {
        max-width: 300px
    }
}@layer component {
    .intro__item:nth-child(2) .intro__item-image {
        max-width: 155px
    }
}@layer component {
    .intro__item:nth-child(5) .intro__item-image {
        transform: translate(10px, 32px);
        max-width: 145px
    }
}@layer component {
    .card-promo:not(.card-promo--unique) .card-promo__media img {
        max-width: 65%;
        max-height: 254px
    }
}
}

@media only screen and (min-width: 85.37375em) and (max-width: 159.9375em) {
    @layer component {
        .intro__item:nth-child(4) .intro__item-image {
            top: 0%;
            width: 175px
        }
    }@layer mod {
    .promo-catalog--alt .card-promo--small .card-promo__media {
        min-width: 65%
    }
}@layer state {
    .banner[data-template=second] .banner__container:after {
        max-width: 38.48%
    }
}@layer mod {
    .card-promo--unique .card-promo__media {
        max-width: 70%;
        max-height: 50%
    }
}@layer mod {
    .card-promo--high .card-promo__media {
        right: initial;
        left: 15%
    }
}@layer mod {
    .card-promo--high .card-promo__media img {
        max-height: 100%;
        max-width: 80%;
        right: initial;
        left: 10%
    }
}
}

@media (any-hover: hover) and (min-width: 85.37375em) {
    .example-item:hover .example-item__image img {
        transform: scale(1.05)
    }

    .example-item__image img {
        transition: transform .3s ease-in
    }
}

@media only screen and (min-width: 1439px) {
    @layer component {
        .intro__container {
            grid-template-columns:420px 1fr;
            gap: 30px
        }
    }.catalog__content {
         grid-template-columns:repeat(3, 1fr)
     }

    .favorite__row {
        grid-template-columns:repeat(4, 1fr)
    }
}

@media only screen and (min-width: 95.99875em) {
    @layer component {
        .intro__title {
            font-size: 40px
        }
    }@layer component {
    .intro__items {
        grid-template-columns:363px 301px 1fr 301px
    }
}@layer component {
    .intro__item-desc {
        margin-bottom: 20px;
        font-size: 26px
    }
}@layer component {
    .card-promo__name {
        font-size: 28px
    }
}@layer component {
    .slider-partners__item {
        padding: 60px 35px
    }
}@layer component {
    .slider-preview__item-bottom .btn {
        font-size: 20px;
        margin-top: 30px;
        padding: 23px 40px
    }
}@layer component {
    .slider-preview__item-desc {
        margin-bottom: 30px
    }
}@layer component {
    .slider-preview__text {
        font-size: 20px
    }
}@layer component {
    .slider-preview__text p:not(:last-child) {
        margin-bottom: 29px
    }
}.slider-preview__more {
     margin-top: 80px
 }

    @layer mod {
        .slider-preview__item--alt .slider-preview__top-content {
            padding: 35px 45px
        }
    }@layer mod {
    .slider-preview__item--alt .slider-preview__item-bottom {
        padding: 30px 48px 30px 28px
    }
}@layer mod {
    .card-review--small .card-review__date {
        font-size: 13px
    }
}@layer mod {
    .card-review--small .rating__numbers {
        font-size: 13px
    }
}@layer mod {
    .card-review--small .card-review__author {
        font-size: 14px
    }
}@layer mod {
    .card-review--small .card-review__text {
        font-size: 14px
    }
}.category__image {
     --size: 103px
 }

    .product__row {
        grid-template-columns:37.8645833333% auto
    }

    .product__title {
        width: 863px;
        max-width: 100%
    }

    .product-about__title {
        grid-template-columns:repeat(3, 1fr);
        font-size: 30px;
        gap: 41px
    }

    .product-chars__items {
        grid-template-columns:repeat(3, 1fr);
        gap: 20px
    }

    .product-chars__title {
        font-size: 30px
    }

    .product-chars__title {
        grid-template-columns:repeat(3, 1fr);
        gap: 41px
    }

    .pluses__row {
        grid-template-columns:repeat(4, 1fr)
    }

    .error-page {
        padding: 9.17vw 0px
    }

    .error-page__title {
        font-size: 250px;
        margin-bottom: 22px
    }

    .error-page__text {
        font-size: 40px;
        margin-bottom: 132px
    }

    .error-page__btn {
        padding: 22px 77px;
        font-size: 23px;
        border-radius: var(--radius-xxs)
    }

    .hero-banner__image {
        width: 65.29%
    }

    .checkbox__label:before {
        --size: 35px;
        margin-right: 15px
    }

    .checkbox__text {
        font-size: 22px
    }

    .checkbox__info {
        margin-left: 20px
    }
}

@media only screen and (min-width: 95.99875em) and (max-width: 119.99875em) {
    @layer component {
        .intro__item {
            height: 215px
        }
    }
}

@media only screen and (min-width: 95.99875em) and (max-width: 159.9375em) {
    @layer component {
        .intro__item:nth-child(5) .intro__item-image {
            max-width: 170px;
            transform: translate(10px, 32px)
        }
    }
}

@media only screen and (min-width: 119.99875em) {
    @layer component {
        .footer__bg {
            width: 100%
        }
    }@layer component {
    .intro__item-name {
        font-size: 25px
    }
}@layer mod {
    .section--alt {
        --space-bottom: 70px
    }
}@layer component {
    .slider-partners__item {
        padding: 65px 84px
    }
}
}

@media only screen and (max-width: 85.37375em) {
    @layer component {
    .header__top .main-controls {
        display: none
    }
}@layer component {
    .header__top-cart {
        display: none
    }
}@layer component {
    .header__submenu .main-controls {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        width: 100%;
        margin-top: auto;
        color: rgba(var(--color-whte--rgb), .7);
        background-color: var(--color-shared-eighth);
        border-top: 1px solid rgba(var(--color-whte--rgb), .15)
    }

    .header__submenu .main-controls__item {
        text-align: center
    }

    .header__submenu .main-controls__item:not(:last-child) {
        margin-right: 0;
        border-right: 1px solid rgba(var(--color-whte--rgb), .15)
    }

    .header__submenu .main-controls .main-controls__link {
        padding: 15px 0;
        color: rgba(var(--color-whte--rgb), .7)
    }

    .header__submenu .main-controls .main-controls__link:after {
        background-color: currentcolor
    }

    .header__submenu .main-controls .main-controls__link.active {
        color: var(--color-whte)
    }
}@layer component {
    .header .search-form .input {
        width: 100%
    }
}@layer component {
    .location__label {
        font-size: 14px
    }
}@layer mod {
    .intro__item--alt .intro__item-image {
        top: 50%;
        right: 0;
        bottom: 0;
        left: 50%;
        max-height: 80%;
        transform: translate(-45%, -35%)
    }
}@layer component {
    .slider-reviews__tabs {
        margin-bottom: 20px
    }
}.catalog-filter {
     position: fixed;
     top: 0;
     left: 0;
     z-index: var(--index-3);
     width: 100%;
     height: 100%;
     min-height: 100vh;
     padding: 60px 20px 40px;
     overflow: auto;
     background: var(--color-whte);
     transform: translate(-100%);
     transition: transform .3s ease-in
 }

    .catalog-filter.active {
        transform: translate(0)
    }

    .catalog-filter__close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .catalog-filter__close:before, .catalog-filter__close:after {
        position: absolute;
        width: 100%;
        height: 2px;
        background: var(--color-primary);
        border-radius: 10px;
        content: ""
    }

    .catalog-filter__close:before {
        transform: rotate(45deg)
    }

    .catalog-filter__close:after {
        transform: rotate(-45deg)
    }

    .delivery-item__right {
        width: 100%
    }
}

@media (hover: hover) {
    @layer component {
        .header__top .menu__link:hover {
            color: var(--color-primary)
        }
    }@layer component {
    .header__submenu-link:hover, .header__submenu .menu__link:hover {
        color: var(--color-whte)
    }
}@layer component {
    .footer .link:hover {
        color: var(--color-alt)
    }
}@layer component {
    .btn:hover {
        filter: brightness(1.1)
    }
}@layer mod {
    .btn--outline:hover {
        color: var(--color-alt);
        box-shadow: 5px 20px 50px 0 rgba(var(--color-primary--rgb), .12);
        filter: none
    }
}@layer mod {
    .btn--grey:hover {
        color: var(--color-whte);
        background: var(--color-alt);
        box-shadow: 5px 20px 50px 0 rgba(var(--color-primary--rgb), .12)
    }
}@layer component {
    .location__link:hover {
        color: var(--color-text-active)
    }
}@layer component {
    .main-controls__link:hover:after {
        background-color: var(--color-alt)
    }
}@layer component {
    .intro__item:hover .intro__item-image {
        transform: scale(1.1)
    }
}@layer component {
    .card__controls-link:hover:after {
        background-color: var(--color-alt)
    }
}@layer component {
    .card:hover {
        box-shadow: 5px 20px 50px 0 rgba(var(--color-primary--rgb), .12)
    }
}@layer component {
    .btn-icon:hover {
        background-color: var(--color-primary)
    }
}@layer component {
    .banner__media-item:hover {
        filter: brightness(1.2)
    }
}@layer component {
    .card-promo:hover {
        box-shadow: 5px 20px 50px 0 rgba(var(--color-primary--rgb), .2)
    }

    .card-promo:hover:after {
        opacity: .4
    }

    .card-promo:hover .card-promo__icon-link {
        background-color: var(--color-primary);
        transform: rotate(0)
    }
}@layer component {
    .slider-partners__item:hover {
        box-shadow: 5px 20px 50px 0 rgba(var(--color-primary--rgb), .12)
    }
}@layer mod {
    .slider-reviews--alt:hover {
        margin-bottom: calc(var(--space-bottom) - 50px)
    }
}@layer mod {
    .slider-reviews--alt .swiper-nav:hover {
        padding-bottom: 50px
    }
}@layer component {
    .card-review:hover {
        box-shadow: 5px 20px 50px 0 rgba(var(--color-primary--rgb), .12)
    }
}@layer component {
    .dropdown > * > *:hover {
        color: var(--color-primary);
        background-color: var(--color-shred-fifth)
    }
}@layer component {
    .btn-link:hover {
        color: var(--color-alt)
    }
}.category__item:hover {
     border: 3px solid var(--color-alt)
 }

    .breadcrumb__item a:hover {
        color: rgba(var(--color-primary--rgb), 1)
    }

    .purview__slide:hover img {
        transform: scale(1.1)
    }

    .product__arrow:hover:before {
        background: var(--color-alt)
    }

    .product__controls-link:hover:after {
        background-color: var(--color-alt)
    }

    .product-about__title:after:hover {
        opacity: 1
    }

    .product-chars__title:after:hover {
        opacity: 1
    }
}

@media only screen and (max-width: 119.99875em) {
    @layer component {
        .header__top .main-controls__item:not(:last-child) {
            margin-right: 15px
        }
    }
}

@media (min-width: 997px) {
    @layer component {
        .header__bottom-controls {
            display: none
        }
    }

    @layer component {
        .header__submenu-item:not(:last-child), .header__submenu .menu__item:not(:last-child) {
            margin-right: 20px
        }
    }
}

@media (max-width: 996px) {
    @layer component {
        .header__top .menu {
            display: none
        }
    }
    @layer component {
        .header__submenu-more {
            display: none
        }
    }
    @layer component {
        .header__submenu-list, .header__submenu .menu__list {
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start
        }
    }
    @layer component {
        .header__submenu-item:not(:last-child), .header__submenu .menu__item:not(:last-child) {
            margin-bottom: 20px
        }
    }

    @layer component {
        .header__submenu {
            position: absolute;
            top: 100%;
            left: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            height: calc(100dvh - var(--header-height));
            padding-top: 30px;
            padding-right: var(--pad);
            padding-left: var(--pad);
            overflow-x: scroll;
            background-color: var(--color-shared-eighth);
            transform: translate(-120%);
            transition: transform .3s
        }
    }
    @layer component {
        .header__submenu .menu {
            margin-top: 40px
        }
    }
    @layer component {
        .header .search-form {
            position: absolute;
            top: 100%;
            left: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            padding: 15px var(--pad);
            background-color: var(--color-shared-eighth);
            transform: translate(-120%);
            transition: transform .3s
        }
    }
}

@media only screen and (max-width: 63.99875em) {
    @layer component {
        .footer__title {
            font-size: 17px
        }
    }@layer component {
    .footer__list-item {
        font-size: 15px
    }
}@layer component {
    .footer__list-item:not(:last-child) {
        margin-bottom: 18px
    }
}@layer component {
    .footer__logo {
        margin-bottom: 41px
    }
}@layer component {
    .footer__menu .footer__title {
        margin-bottom: 27px
    }
}@layer component {
    .footer__contacts-cities {
        position: absolute;
        top: 30px;
        right: var(--pad);
        display: flex;
        flex-direction: column-reverse
    }
}@layer component {
    .footer__contacts-key {
        display: flex;
        align-items: center;
        color: rgba(var(--color-whte--rgb), .6);
        font-size: 12px
    }

    .footer__contacts-key:before {
        display: block;
        width: 12px;
        background-color: var(--color-alt);
        transition: background-color .3s;
        content: "";
        -webkit-mask: url(../img/i-location.svg) no-repeat center/contain;
        mask: url(../img/i-location.svg) no-repeat center/contain;
        aspect-ratio: 1;
        margin-right: 5px
    }
}@layer component {
    .footer__contacts-value {
        margin-bottom: 5px;
        font-size: 17px
    }
}@layer component {
    .footer__copyright {
        font-size: 12px
    }
}@layer component {
    .reviews-icons__list {
        gap: 26px
    }
}@layer mod {
    .card-promo--unique .card-promo__media {
        max-width: 100%;
        max-height: 70%
    }
}
}

@media only screen and (max-width: 47.99875em) {
    @layer component {
        .footer__menu {
            flex-direction: column
        }
    }@layer mod {
    .footer__list--alt .footer__list-item:not(:last-child) {
        margin-bottom: 18px
    }
}@layer component {
    .intro__items {
        display: none
    }
}@layer component {
    .card__desc {
        margin-bottom: 40px;
        font-size: 14px
    }
}.section-head__title {
     width: 100%
 }

    @layer mod {
        .promo-catalog--alt .promo-catalog__item {
            height: 180px
        }
    }@layer mod {
    .promo-catalog--alt .card-promo {
        --pad-card-top: 48px
    }
}@layer mod {
    .promo-catalog--alt .card-promo__media {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 75px
    }
}@layer mod {
    .promo-catalog--alt .card-promo__image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center
    }
}@layer mod {
    .promo-catalog--alt .card-promo--alt {
        height: 180px
    }
}@layer mod {
    .promo-catalog--alt .card-promo--high {
        padding-bottom: 15px
    }
}@layer mod {
    .promo-catalog--alt .card-promo--high .card-promo__icon-link {
        bottom: 15px
    }
}@layer state {
    .banner[data-template=first] .banner__box {
        padding-bottom: calc(50% + 60px)
    }
}@layer state {
    .banner[data-template=four] .banner__box {
        padding-bottom: calc(50% + 70px)
    }
}@layer state {
    .banner[data-template=second] .banner__box {
        padding-top: 60px
    }
}.page-head__title, .purview__title {
     width: 100%
 }

    .product__dd, .product-chars__dd {
        margin-bottom: 10px
    }

    .article__title, .complex__title, .example__title, .faq__title, .shop__title, .public__content h1 {
        width: 100%
    }

    .hero-banner.hero-banner--black .hero-banner__container {
        padding-bottom: 25px
    }

    .hero-banner.hero-banner--black .hero-banner__image, .about__image {
        display: none
    }
}

@media (any-hover: hover) {
    @layer component {
        .footer__list-develop a:hover {
            text-decoration: underline
        }
    }.others-slide:hover img {
         transform: scale(1.05)
     }

    .others-slide__link:hover {
        text-decoration: none
    }

    .contacts__list-item a:hover {
        text-decoration: underline
    }

    .about__link:hover {
        text-decoration: none
    }

    .select__option:hover {
        background: rgba(35, 35, 35, .05)
    }
}

@media only screen and (max-width: 38.75em) {
    @layer component {
        .card__price-group {
            flex-direction: column;
            align-items: flex-start;
            gap: 3px
        }

        .card__price-group:not(:last-child) {
            margin-bottom: 5px
        }
    }
}

@media only screen and (max-width: 159.9375em) {
    @layer component {
        .card-promo__image {
            max-width: 100%;
            max-height: 100%
        }
    }
}