/*
1. Reset CSS
2. Fonts
3. Main Setting
4. Basic elements
5. Header
6. Footer
7. Content
8. Popup
9. Media
    9.1 Wide screens
    9.2 Tablets
    9.3 Mobiles
*/

/**************************************/
/************ 1. Reset Css ************/
/**************************************/

html{line-height:1.15;-webkit-text-size-adjust:100%}
body{margin:0}
h1{font-size:2em;margin:.67em 0}
hr{box-sizing:content-box;height:0;overflow:visible}
pre{font-family:monospace,monospace;font-size:1em}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
code,kbd,samp{font-family:monospace,monospace;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
button,input{overflow:visible}
button,select{text-transform:none}
button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{padding:.35em .75em .625em}
legend{box-sizing:border-box;display:table;max-width:100%;padding:0;white-space:normal}
progress{vertical-align:baseline}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}
[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}
[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
details{display:block}
summary{display:list-item}
*,*::before,*::after{box-sizing:border-box}

/**********************************/
/************ 2. Fonts ************/
/**********************************/

@font-face {
    font-family: 'Fixel Display';
    font-weight: 400;
    font-style: normal;
    font-display: auto;
    src: url('../fonts/FixelDisplay-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Fixel Display';
    font-weight: 500;
    font-style: normal;
    font-display: auto;
    src: url('../fonts/FixelDisplay-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Fixel Display';
    font-weight: 600;
    font-style: normal;
    font-display: auto;
    src: url('../fonts/FixelDisplay-SemiBold.woff2') format('woff2');
}

/*****************************************/
/************ 3. Main Setting ************/
/*****************************************/

:root {
    --color-red-dark: 159 0 0;    /* #9f0000 */
    --color-red: 197 10 10;  /* #c50a0a */
    --color-red-bright: 237 25 25;  /* #ed1919 */
    --color-red-light: 255 230 230;    /* #ffe6e6 */
    --color-white: 255 255 255;    /* #ffffff */
    --color-gray-very-dark: 34 38 41;   /* #222629 */
    --color-gray-charcoal: 39 43 46;   /* #272b2e */
    --color-gray: 154 147 147;    /* #9a9393 */
    --color-gray-light: 200 195 195;    /* #c8c3c3 */
    --color-gray-very-light: 224 221 221;    /* #e0dddd */
    --color-gray-pale: 240 240 240;    /* #f0f0f0 */
    --color-gray-very-pale: 246 246 246;    /* #f6f6f6 */
    --color-green: 77 196 58;  /* #4dc43a */
    --color-purple: 133 0 237;  /* #8500ed */
    --color-orange: 237 142 0;  /* #ed8e00 */

    --color-success: var(--color-green);
    --color-warning: var(--color-orange);
    --color-error: var(--color-red-bright);

    --color-primary: var(--color-red-bright);
    --color-text: var(--color-gray-very-dark);
    --color-bg: var(--color-gray-very-pale);

    --font-main: 'Fixel Display';
}

::placeholder {
    color: rgb(var(--color-gray));
}

body {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    color: rgb(var(--color-text));
    background: rgb(var(--color-bg));
}

.wrap {
    width: 1360px;
    max-width: calc(100% - 80px);
    margin: 0 auto;
}

/*******************************************/
/************ 4. Basic elements ************/
/*******************************************/

a,
button {
    cursor: pointer;
    transition: .3s;
}

a:not([class]) {
    color: rgb(var(--color-text));
    text-decoration: underline 1px;
    text-underline-offset: 1px;
}

a:not([class]):hover {
    color: rgb(var(--color-primary));
}

b,
strong {
    font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: rgb(var(--color-212529));
    font-weight: 600;
}

h1:not([class]),
h2:not([class]),
h3:not([class]),
h4:not([class]),
h5:not([class]),
h6:not([class]) {
    margin: 1em 0;
}

h1:not([class]) {
    font-size: 50px;
}

h2:not([class]) {
    font-size: 36px;
}

h3:not([class]) {
    font-size: 32px;
}

h4:not([class]) {
    font-size: 28px;
}

h5:not([class]) {
    font-size: 24px;
}

h6:not([class]) {
    font-size: 20px;
}

.btn {
    background: rgb(var(--color-primary));
    color: rgb(var(--color-white));
    fill: rgb(var(--color-white));
    stroke: rgb(var(--color-white));
    border: 1px solid rgb(var(--color-primary));
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    padding: 16px 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    text-decoration: none;
    transition: .3s;
    width: fit-content;
}

.btn:hover {
    background: rgb(var(--color-red));
    border-color: rgb(var(--color-red));
}

.btn--secondary {
    background: rgb(var(--color-red-light));
    border-color: rgb(var(--color-red-light));
    color: rgb(var(--color-red-bright));
    fill: rgb(var(--color-red-bright));
    stroke: rgb(var(--color-red-bright));
}

.btn--secondary:hover {
    background: rgb(var(--color-red-bright));
    border-color: rgb(var(--color-red-bright));
    color: rgb(var(--color-white));
    fill: rgb(var(--color-white));
    stroke: rgb(var(--color-white));
}

.btn--dark {
    background: rgb(var(--color-gray-very-dark));
    border-color: rgb(var(--color-gray-very-dark));
    color: rgb(var(--color-white));
    fill: rgb(var(--color-white));
    stroke: rgb(var(--color-white));
}

.btn--dark:hover {
    background: rgb(var(--color-red-bright));
    border-color: rgb(var(--color-red-bright));
    color: rgb(var(--color-white));
    fill: rgb(var(--color-white));
    stroke: rgb(var(--color-white));
}

.btn--light {
    background: rgb(var(--color-white));
    border-color: rgb(var(--color-white));
    color: rgb(var(--color-gray-very-dark));
    fill: rgb(var(--color-gray-very-dark));
    stroke: rgb(var(--color-gray-very-dark));
}

.btn--light:hover {
    background: rgb(var(--color-gray-light));
    border-color: rgb(var(--color-gray-light));
    color: rgb(var(--color-gray-very-dark));
    fill: rgb(var(--color-gray-very-dark));
    stroke: rgb(var(--color-gray-very-dark));
}

.btn--str {
    background: transparent;
    border-color: rgb(var(--color-gray-very-dark));
    color: rgb(var(--color-gray-very-dark));
    fill: rgb(var(--color-gray-very-dark));
    stroke: rgb(var(--color-gray-very-dark));
}

.btn--str:hover {
    background: transparent;
    border-color: rgb(var(--color-red-bright));
    color: rgb(var(--color-red-bright));
    fill: rgb(var(--color-red-bright));
    stroke: rgb(var(--color-red-bright));
}

.btn--str.btn--light {
    background: transparent;
    border-color: rgb(var(--color-white));
    color: rgb(var(--color-white));
    fill: rgb(var(--color-white));
    stroke: rgb(var(--color-white));
}

.btn--str.btn--light:hover {
    background: transparent;
    border-color: rgb(var(--color-red-bright));
    color: rgb(var(--color-red-bright));
    fill: rgb(var(--color-red-bright));
    stroke: rgb(var(--color-red-bright));
}

.btn--small {
    font-size: 14px;
    padding: 12px 19px;
}

.btn--center {
    margin-left: auto;
    margin-right: auto;
}

.btn--narrow {
    padding-left: 24px;
    padding-right: 24px;
}

.btn__icon {
    width: 20px;
    height: 20px;
    margin: -2px 0;
}

.input__wrapper {
    position: relative;
}

.input__field {
    border: 1px solid rgb(var(--color-gray-very-light));
    border-radius: 10px;
    display: block;
    width: 100%;
    padding: 0 19px;
    height: 50px;
    transition: .3s;
    outline: none;
}

.input__prefix,
.input__postfix {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    z-index: 2;
    color: rgb(var(--color-gray-very-dark));
    pointer-events: none;
}

.input__postfix {
    left: auto;
    right: 20px;
}

.input__icon {
    width: 25px;
    height: 25px;
    fill: rgb(var(--color-gray-very-dark));
    stroke: rgb(var(--color-gray-very-dark));
    display: block;
}

.input__field:hover,
.input__field:focus {
    border-color: rgb(var(--color-gray-very-dark));
}

.input__field.error {
    border-color: rgb(var(--color-error));
}

.icon-btn {
    display: block;
    width: 50px;
    height: 50px;
    padding: 12px;
    border-radius: 50%;
    background: rgb(var(--color-primary));
    fill: rgb(var(--color-white));
    stroke: rgb(var(--color-white));
    border: 1px solid rgb(var(--color-primary));
}

.icon-btn--small {
    width: 40px;
    height: 40px;
    padding: 10px;
}

.icon-btn__icon {
    display: block;
    width: 100%;
    height: 100%;
}

.icon-btn:hover {
    border-color: rgb(var(--color-red));
    background: rgb(var(--color-red));
}

.icon-btn--str {
    fill: rgb(var(--color-gray-very-dark));
    stroke: rgb(var(--color-gray-very-dark));
    border-color: rgb(var(--color-gray-very-light));
    background: none;
}

.icon-btn--str:hover {
    fill: rgb(var(--color-gray-very-dark));
    stroke: rgb(var(--color-gray-very-dark));
    border-color: rgb(var(--color-gray-very-dark));
    background: none;
}

.icon-btn--str.icon-btn--light {
    fill: rgb(var(--color-white));
    stroke: rgb(var(--color-white));
    border-color: rgb(var(--color-gray));
}

.icon-btn--str.icon-btn--light:hover {
    fill: rgb(var(--color-white));
    stroke: rgb(var(--color-white));
    border-color: rgb(var(--color-white));
}

.select {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23212529' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 20px center / 20px 20px rgb(var(--color-white));
    border: 1px solid rgb(var(--color-gray-very-light));
    border-radius: 10px;
    width: 100%;
    height: 50px;
    color: rgb(var(--color-black));
    padding: 0 60px 0 20px;
    appearance: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: .3s;
}

.select--empty {
    color: rgb(var(--color-gray));
}

.select:hover,
.select:focus {
    border-color: rgb(var(--color-gray-very-dark));
}

.select[disabled] {
    opacity: .5;
    cursor: default;
    pointer-events: none;
}

.preloader-container {
    position: fixed;
    z-index: 10;
    inset: 0;
    background: rgb(var(--color-bg));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
    font-size: 18px;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.preloader-container.active {
    opacity: 1;
    visibility: visible;
}

.preloader {
    position: relative;
    width: 164px;
    height: 164px;
    border-radius: 50%;
    animation: rotate 2s linear infinite;
}

.preloader::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 40px;
    border: 1px solid rgb(var(--color-primary));
    border-width: 12px 2px 7px;
    border-radius: 2px 2px 1px 1px;
    box-sizing: border-box;
    transform: rotate(45deg) translate(24px, -10px);
    background-image: linear-gradient(rgb(var(--color-primary)) 20px, transparent 0),
    linear-gradient(rgb(var(--color-primary)) 30px, transparent 0),
    linear-gradient(rgb(var(--color-primary)) 30px, transparent 0);
    background-size: 10px 12px , 1px 30px, 1px 30px;
    background-repeat: no-repeat;
    background-position: center , 12px 0px , 3px 0px;
}

.preloader::after {
    content: '';
    position: absolute;
    height: 4px;
    width: 4px;
    left: 20px;
    top: 47px;
    border-radius: 50%;
    color: rgb(var(--color-gray-light));
    box-shadow: -4px 7px 2px, -7px 16px 3px 1px,
    -11px 24px 4px 1px, -6px 24px 4px 1px,
    -14px 35px 6px 2px, -5px 36px 8px 2px,
    -5px 45px 8px 2px, -14px 49px 8px 2px,
    6px 60px 11px 1px, -11px 66px 11px 1px,
    11px 75px 13px, -1px 82px 15px;
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

.preloader-text {
    display: flex;
    align-items: center;
}

.preloader-dot {
    opacity: 0;
    animation: blink 1.5s infinite;
}

.preloader-dot:nth-child(1) {
    animation-delay: 0s;
}

.preloader-dot:nth-child(2) {
    animation-delay: 0.3s;
}

.preloader-dot:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes blink {
    0%,
    20% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/***********************************/
/************ 5. Header ************/
/***********************************/

.header {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 9;
    background: rgb(var(--color-bg));
    transition: top .3s;
}

.header--fixed {
    top: 0;
}

.header-inner {
    border-top: 1px solid rgb(var(--color-gray-light));
    border-bottom: 1px solid rgb(var(--color-gray-light));
    display: flex;
    align-items: center;
    gap: 60px;
}

.logo {
    max-width: 150px;
    max-height: 35px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.logo svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.nav-btn {
    display: none;
}

.header-nav {
    margin: -1px 0;
}

.nav__list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav__link {
    display: block;
    padding: 30px 20px;
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
    color: rgb(var(--color-gray-very-dark));
    text-decoration: none;
}

.nav__link:hover {
    background: rgb(var(--color-red-bright));
    color: rgb(var(--color-white));
}

.header-phone-btn {
    display: none;
}

.header-contacts {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

.header-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.phone {
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    color: rgb(var(--color-gray-very-dark));
    line-height: 1;
    display: block;
    width: fit-content;
}

.phone:hover {
    color: rgb(var(--color-red-bright));
}

.open {
    margin: 0;
    color: rgb(var(--color-gray));
    font-size: 12px;
    font-weight: 400;
}

.socials {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

/***********************************/
/************ 6. Footer ************/
/***********************************/

.footer {
    background: rgb(var(--color-gray-very-dark));
    color: rgb(var(--color-white));
    padding: 80px 0 40px;
}

.footer-nav {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-nav__item {
    flex: 1 0 0;
}

.footer-nav__link {
    display: block;
    text-align: center;
    font-size: 18px;
    line-height: 1;
    color: rgb(var(--color-white));
    text-decoration: none;
    background: rgb(var(--color-gray-charcoal));
    padding: 16px;
    border-radius: 50px;
}

.footer-nav__link:hover {
    background: rgb(var(--color-primary));
}

.footer-info {
    display: grid;
    grid-template-columns: 325px 1fr 325px;
    gap: 20px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer-contact__title {
    font-size: 25px;
    font-weight: 600;
    color: rgb(var(--color-white));
    text-decoration: none;
}

a.footer-contact__title:hover {
    color: rgb(var(--color-red-bright));
}

.footer-contact__description {
    font-size: 16px;
    color: rgb(var(--color-gray-light));
    margin: 0;
}

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

.footer-wrap {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.footer-contact__title--big {
    font-size: 30px;
}

.footer-contact__info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.footer-socials__text {
    margin: 0;
}

.footer-notice {
    font-size: 16px;
    font-weight: 400;
    color: rgb(var(--color-gray));
    margin: 0;
}

.footer-hr {
    height: 1px;
    border: none;
    background: rgb(var(--color-gray));
    display: block;
    width: 100%;
    margin: 0;
}

.footer-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    font-size: 16px;
    font-weight: 400;
}

.privacy,
.developer {
    color: rgb(var(--color-white));
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: none;
    text-underline-offset: 2px;
}

.privacy {
    margin: 0 auto;
}

.developer {
    margin-left: auto;
}

.privacy:hover,
.developer:hover {
    color: rgb(var(--color-red-bright));
}

/************************************/
/************ 7. Content ************/
/************************************/

.hidden {
    display: none !important;
}

.main {
    margin-top: 116px;
}

.main--homepage {
    margin-top: 136px;
}

.main .section:first-child,
.section-breadcrumbs + [class*="section"] {
    margin-top: 0;
}

.main .section:first-child .section__wrap,
.section-breadcrumbs + * .section__wrap {
    border: none;
    padding: 0;
}

.main .section:last-child:not([class*="section-lead"]):not([class*="section--bg"]) {
    margin-bottom: 100px;
}

.section {
    margin-top: 100px;
}

.section--compact-spacing {
    margin-top: 80px;
}

.section__wrap {
    display: flex;
    flex-direction: column;
    gap: 40px;
    border-top: 1px solid rgb(var(--color-gray-light));
    padding-top: 40px;
}

.section__wrap--no-border {
    border: none;
    padding: 0;
}

.section-header {
    display: grid;
    grid-template-columns: 1fr 440px;
    align-items: center;
    gap: 30px 60px;
}

.title {
    font-size: 50px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
}

.description {
    font-size: 25px;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.slider-arrows {
    display: flex;
    gap: 10px;
}

.slider-arrow[data-direction="next"] {
    transform: rotate(180deg);
}

.promo {
    align-items: start;
}

.promo-description br {
    display: none;
}

.promo-slider {
    overflow: visible;
    width: 100%;
}

.promo-card {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 30px;
    overflow: hidden;
    color: rgb(var(--color-gray-very-dark));
    text-decoration: none;
}

.promo-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .9s;
}

.promo-card:hover .promo-card__img {
    transform: scale(1.05);
}

.promo-card__box {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: rgb(var(--color-white) / .8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    width: 325px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.labels {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.label {
    padding: 9px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: rgb(var(--color-white));
    border-radius: 20px;
    background: rgb(var(--color-gray-very-dark));
}

.promo-card__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.promo-card__title {
    font-size: 25px;
    font-weight: 600;
    text-transform: uppercase;
}

.promo-card__attrs {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
}

.promo-card__prices {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.promo-card__price {
    font-size: 22px;
    font-weight: 600;
}

.promo-card__credit {
    font-size: 16px;
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

.promo-card__btn {
    padding: 12px 24px;
}

.promo-slider .swiper-slide {
    width: 785px;
    height: 500px;
}

.brands {
    width: 100%;
}

.brands .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}

.brand {
    border-radius: 20px;
    border: 1px solid rgb(var(--color-white));
    background: rgb(var(--color-white));
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    color: rgb(var(--color-gray-very-dark));
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 29px;
    gap: 20px;
    height: 100%;
}

.brand-img__container {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand__img {
    max-width: 100%;
    max-height: 100%;
}

.brand__count {
    color: rgb(var(--color-gray));
}

.brand:hover {
    background: transparent;
    border-color: rgb(var(--color-gray-very-light));
}

.section--bg-grey {
    background: rgb(var(--color-gray-pale));
}

.section--bg-grey + .section--bg-grey {
    padding-top: 0;
}

.section--bg-dark {
    background: rgb(var(--color-gray-very-dark));
    color: rgb(var(--color-white));
}

.section--bg-dark + .section--bg-dark {
    padding-top: 0;
}

[class*="section--bg-"] {
    padding: 100px 0;
}

.section--compact-spacing[class*="section--bg-"] {
    padding: 80px 0;
}

[class*="section--bg"] .section__wrap {
    border: none;
    padding: 0;
}

[class*="section--bg"] + [class*="section--bg"] {
    margin: 0;
}

.product-list-tab {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.product-list {
    overflow: visible;
}

.product-list .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.card {
    background: rgb(var(--color-white));
    border-radius: 30px;
    color: rgb(var(--color-gray-very-dark));
    text-decoration: none;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card:hover {
    box-shadow: 0 20px 40px rgb(var(--color-gray-very-dark) / .2);
}

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

.card__title {
    font-size: 25px;
    font-weight: 600;
    text-transform: uppercase;
    color: rgb(var(--color-gray-very-dark));
}

.card__description {
    color: rgb(var(--color-gray));
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.card__img-container {
    height: 250px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .9s;
}

.card__footer {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.card__prices {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.card__price {
    font-size: 22px;
    font-weight: 600;
}

.card__credit {
    font-size: 16px;
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

.card__labels {
    position: absolute;
    z-index: 2;
    left: 10px;
    bottom: 10px;
}

.product-list__item {
    height: 100%;
}

.card__btn {
    border-color: rgb(var(--color-gray-very-light));
}

.section-lead {
    height: 940px;
    position: relative;
    display: flex;
    align-items: self-end;
    padding: 0;
}

.section-lead--small {
    height: 640px;
}

.section-lead__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 40px);
    background: var(--bg-default) no-repeat center / cover;
}

.lead {
    position: relative;
    z-index: 2;
    background: rgb(var(--color-white));
    border-radius: 30px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

.lead__grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 80px;
    width: 100%;
}

.lead__info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}

.lead__description {
    margin: 0;
    font-size: 25px;
    line-height: 1.2;
}

.lead__form {
    align-self: start;
}

.form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 10px;
}

.form__field {
    width: 100%;
}

.form__field--part {
    width: auto;
    flex: 1 0 calc(50% - 5px);
}

.form__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

.form__notice {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    line-height: 1.2;
}

.form__btn {
    width: 100%;
}

.video {
    height: 600px;
    border-radius: 1000px;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: var(--bg);
}

.play {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    --play-bg: rgb(var(--color-white));
    --play-icon: rgb(var(--color-primary));
}

.play__bg {
    fill: var(--play-bg);
    transition: .3s;
}

.play__icon {
    fill: var(--play-icon);
    transition: .3s;
}

.video:hover .play {
    --play-bg: rgb(var(--color-primary));
    --play-icon: rgb(var(--color-white));
}

.edges .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    grid-auto-rows: minmax(280px, auto);
}

.edge {
    padding: 30px;
    border-radius: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: space-between;
    background: rgb(var(--color-white));
}

.edge__icon-container {
    width: 60px;
    height: 60px;
    background: rgb(var(--color-white));
    fill: rgb(var(--color-gray-very-dark));
    stroke: rgb(var(--color-gray-very-dark));
    padding: 15px;
    border-radius: 50%;
}

.edge__icon {
    display: block;
    width: 100%;
    height: 100%;
}

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

.edge__title {
    font-size: 50px;
    font-weight: 600;
    color: rgb(var(--color-primary));
}

.edge__description {
    margin: 0;
    font-size: 25px;
    font-weight: 600;
}

.edge--v2 {
    background: none;
    border: 1px solid rgb(var(--color-gray-light));
    padding: 29px;
}

.edge--v2 .edge__title {
    font-size: 30px;
    color: rgb(var(--color-gray-very-dark));
}

.edge--v2 .edge__description {
    color: rgb(var(--color-gray));
    font-size: 16px;
    font-weight: 500;
}

.reviews-header {
    align-items: end;
    margin-bottom: -40px;
}

.video-reviews {
    margin-left: -460px;
    width: calc(100% + 920px);
    overflow: visible;
}

.video-reviews .swiper-slide {
    width: 440px;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.video-reviews .swiper-slide-active,
.video-reviews .swiper-slide-active + *,
.video-reviews .swiper-slide-active + * + *,
.video-reviews .swiper-slide-active + * + * + *,
.video-reviews .swiper-slide-active + * + * + * + * {
    opacity: 1;
    visibility: visible;
}

.video-review {
    position: relative;
    width: 100%;
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    outline: none;
}

.video-review__img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: .9s;
}

.video-review:hover .video-review__img {
    transform: scale(1.1);
}

.tab {
    display: none;
}

.tab.active {
    display: block;
}

.message-reviews .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.message-reviews__column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.message-reviews .swiper-slide {
    height: auto;
}

.message-review {
    display: block;
}

.message-review__img {
    display: block;
    max-width: 100%;
    border-radius: 20px;
}

.section-reviews .section__wrap {
    gap: 80px;
}

.platforms {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.platforms__title {
    font-size: 30px;
    font-weight: 600;
    margin: 0;
}

.platforms-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.platform {
    background: rgb(var(--color-white));
    border-radius: 20px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 30px;
    color: rgb(var(--color-gray-very-dark));
    text-decoration: none;
}

.platform__logo {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.platform__info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.platform__rating {
    font-size: 50px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 20px;
}

.stars {
    display: flex;
    align-items: center;
    gap: 5px;
}

.stars__item {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgb(var(--color-red-light));
}

.stars__item.active {
    background: rgb(var(--color-red-bright));
}

.platform__link {
    font-size: 18px;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-offset: 2px;
    transition: .3s;
}

.platform:hover .platform__link {
    text-decoration-color: transparent;
}

.img-reviews {
    width: 100%;
    overflow: visible;
}

.img-review {
    display: block;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    height: 580px;
    outline: none;
}

.img-review__img {
    transition: .9s;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-review:hover .img-review__img {
    transform: scale(1.1);
}

.info-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(450px, auto);
}

.info-card {
    position: relative;
    padding: 39px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 60px;
    border-top: 1px solid rgb(var(--color-gray-light));
    border-bottom: 1px solid rgb(var(--color-gray-light));
}

.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(var(--color-gray-very-dark) / .6);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 2;
}

.info-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    object-fit: cover;
}

.info-card__icon-container {
    width: 60px;
    height: 60px;
    background: rgb(var(--color-white));
    border-radius: 50%;
    fill: rgb(var(--color-gray-very-dark));
    stroke: rgb(var(--color-gray-very-dark));
    padding: 15px;
}

.info-card__icon {
    display: block;
    width: 100%;
    height: 100%;
}

.info-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    position: relative;
    z-index: 3;
}

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

.info-card__title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    transition: .3s;
}

.info-card__description {
    font-size: 16px;
    margin: 0;
    color: rgb(var(--color-gray));
    transition: .3s;
}

.info-cards > *:nth-child(3n+2) {
    border-left: 1px solid rgb(var(--color-gray-light));
    border-right: 1px solid rgb(var(--color-gray-light));
}

.info-card:hover::before,
.info-card:hover .info-card__img {
    opacity: 1;
    visibility: visible;
}

.info-card:hover .info-card__title,
.info-card:hover .info-card__description {
    color: rgb(var(--color-white));
}

.faq-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.faq-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq {
    background: rgb(var(--color-white));
    border-radius: 30px;
    cursor: pointer;
    padding: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

.faq__question {
    font-size: 25px;
}

.faq__icon {
    width: 40px;
    height: 40px;
    border: 1px solid #e0dddd;
    border-radius: 50%;
    fill: rgb(var(--color-gray-very-dark));
    stroke: rgb(var(--color-gray-very-dark));
    padding: 9px;
    display: block;
    transition: .3s;
    flex-shrink: 0;
}

.faq__answer {
    color: rgb(var(--color-gray));
    padding-top: 10px;
    display: none;
}

.faq:hover .faq__icon {
    border-color: rgb(var(--color-gray-very-dark));
}

.faq.active .faq__icon {
    transform: rotate(45deg);
    background: rgb(var(--color-gray-very-dark));
    fill: rgb(var(--color-white));
    stroke: rgb(var(--color-white));
}

.air-datepicker {
    --adp-day-name-color: rgb(var(--color-primary));
}

.section-lead:last-child {
    margin-bottom: -40px;
}

.section-lead + [class*="section--bg-"] {
    margin-top: -40px;
    padding-top: 120px;
}

.section-breadcrumbs {
    margin-bottom: 40px;
}

.breadcrumbs {
    font-size: 0;
    padding: 0 0 19px;
    margin: 0;
    border-bottom: 1px solid rgb(var(--color-gray-light));
}

.breadcrumbs__item {
    display: inline;
}

.breadcrumbs__item:not(:last-child) {
    margin-right: 4px;
}

.breadcrumbs__item:not(:last-child)::after {
    content: '/';
    font-size: 14px;
    font-weight: 400;
    color: rgb(var(--color-gray));
    line-height: 1;
    margin-left: 4px;
}

.breadcrumbs__link,
.breadcrumbs__text {
    font-size: 14px;
    font-weight: 400;
    color: rgb(var(--color-gray));
    text-decoration: none;
    line-height: 1;
}

.breadcrumbs__link:hover {
    color: rgb(var(--color-primary));
}

.breadcrumbs__text {
    color: rgb(var(--color-gray-very-dark));
}

.catalog-header {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
    align-items: center;
}

.catalog-header--flex {
    display: flex;
}

.types {
    justify-content: center;
}

.sort {
    width: 250px;
    max-width: 100%;
    margin-left: auto;
}

.product-grid-container {
    position: relative;
}

.product-grid-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(var(--color-bg) / .7);
    z-index: 3;
    display: flex;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.product-grid-loading.active {
    opacity: 1;
    visibility: visible;
}

.product-grid-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

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

.contacts-grid {
    display: grid;
    grid-template-columns: 555px 1fr;
    gap: 20px;
}

.map {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
}

.contacts {
    padding: 40px;
    border-radius: 30px;
    background: rgb(var(--color-white));
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.contact__title {
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
    color: rgb(var(--color-gray-very-dark));
    text-decoration: none;
}

.contact__title--big {
    font-size: 30px;
    line-height: 1.1;
}

a.contact__title:hover {
    color: rgb(var(--color-primary));
}

.contact__description {
    margin: 0;
    color: rgb(var(--color-gray));
}

.contacts > *:nth-child(n+2) {
    border-top: 1px solid rgb(var(--color-gray-very-light));
    padding-top: 30px;
}

.content {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    max-width: 1015px;
}

.content > *:first-child {
    margin-top: 0;
}

.content > *:last-child {
    margin-bottom: 0;
}

.content p,
.content ul,
.content ol {
    margin: 22px 0;
}

.content ol {
    padding-left: 27px;
}

.content ul {
    padding-left: 27px;
    list-style: none;
}

.content ul li {
    position: relative;
}

.content ul li::before {
    content: '';
    position: absolute;
    top: 11px;
    left: -15px;
    width: 2px;
    height: 2px;
    background: rgb(var(--color-gray-very-dark));
    border-radius: 50%;
}

.content p + ul {
    margin-top: -22px;
}

.page-404 {
    width: 100vw;
    min-height: 100vh;
    background: rgb(var(--color-gray-very-dark));
    color: rgb(var(--color-white));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.page-404__img {
    display: block;
    margin-bottom: 50px;
}

.page-404__title {
    color: rgb(var(--color-white));
    margin-bottom: 20px;
}

.page-404__description {
    font-size: 25px;
    line-height: 1.2;
    color: rgb(var(--color-gray));
    margin: 0 0 52px;
}

.page-404__btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-404__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 880px;
}

.roadmap {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-auto-rows: 510px;
}

.roadmap > *:nth-child(1) {
    grid-area: 1 / 1 / 2 / 6;
}

.roadmap > *:nth-child(2) {
    grid-area: 1 / 6 / 2 / 9;
}

.roadmap > *:nth-child(3) {
    grid-area: 1 / 9 / 2 / 13;
}

.roadmap > *:nth-child(4) {
    grid-area: 2 / 1 / 3 / 4;
}

.roadmap > *:nth-child(5) {
    grid-area: 2 / 4 / 3 / 10;
}

.roadmap > *:nth-child(6) {
    grid-area: 2 / 10 / 3 / 13;
}

.roadmap-item {
    border: 1px solid rgb(var(--color-gray-light));
    border-radius: 30px;
    padding: 29px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}

.roadmap-item__step {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: rgb(var(--color-gray));
}

.roadmap-item__info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.roadmap-item__title {
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
}

.roadmap-item__description {
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.roadmap-item--highlighted {
    border-color: rgb(var(--color-primary));
}

.roadmap-img-container {
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}

.roadmap-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.gallery {
    width: 100%;
}

.gallery .swiper-wrapper {
    flex-wrap: wrap;
    gap: 20px;
    height: auto;
}

.gallery .swiper-slide {
    width: calc(50% - 10px);
    height: 250px;
}

.gallery .swiper-slide:nth-child(1) {
    width: 100%;
    height: 450px;
}

.gallery-item {
    display: block;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.gallery-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: .9s;
}

.gallery .swiper-slide:nth-child(1) .gallery-item {
    border-radius: 30px;
}

.gallery-item:hover .gallery-item__img {
    transform: scale(1.1);
}

.product-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.product-info {
    background: rgb(var(--color-white));
    border-radius: 30px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.product-views {
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    margin-left: auto;
}

.product-views__count {
    background: rgb(var(--color-red-light));
    color: rgb(var(--color-red-bright));
    padding: 7px 15px;
    border-radius: 20px;
}

.label--big {
    font-size: 14px;
    padding: 8px 15px;
}

.product-title {
    font-size: 40px;
    margin: 0;
}

.attrs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.attr {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.attr__title {
    font-size: 16px;
    font-weight: 400;
    color: rgb(var(--color-gray));
}

.attr__text {
    font-size: 18px;
}

.product-order {
    background: rgb(var(--color-gray-very-pale));
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-prices {
    font-size: 30px;
    font-weight: 600;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 20px;
}

.product-old-price {
    font-size: 25px;
    color: rgb(var(--color-gray-light));
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.variants {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.variant {
    position: relative;
    cursor: pointer;
}

.variant__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
}

.variant__info {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgb(var(--color-gray-very-light));
    padding: 12px 19px;
    font-size: 14px;
    line-height: 1;
    border-radius: 30px;
    transition: .3s;
}

.variant__close {
    width: 20px;
    height: 20px;
    display: none;
    margin: -3px 0;
}

.variant:hover .variant__info {
    border-color: rgb(var(--color-gray-very-dark));
}

.variant__input:checked + .variant__info {
    background: rgb(var(--color-gray-very-dark));
    border-color: rgb(var(--color-gray-very-dark));
    color: rgb(var(--color-white));
    fill: rgb(var(--color-white));
    stroke: rgb(var(--color-white));
}

.variant__input:checked + .variant__info .variant__close {
    display: block;
}

.product-btns {
    display: flex;
    gap: 10px;
}

.product-btns > * {
    flex: 1 0 0;
}

.info-box {
    border-radius: 30px;
    padding: 40px;
    background: rgb(var(--color-white));
}

.info-box__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
    fill: rgb(var(--color-gray-very-dark));
    stroke: rgb(var(--color-gray-very-dark));
    cursor: pointer;
}

.info-box__title-icon {
    width: 30px;
    height: 30px;
    transition: .3s;
}

.info-box.active .info-box__title-icon {
    transform: rotate(45deg);
}

.info-box__content {
    padding-top: 20px;
    font-size: 16px;
}

.info-box__content p,
.info-box__content ul,
.info-box__content ol {
    margin: 19px 0;
}

.info-box__content ol {
    padding-left: 24px;
}

.info-box__content ul {
    padding-left: 24px;
}

.info-box__content p + ul {
    margin-top: -19px;
}

.info-box__content ul li::before {
    top: 9px;
    left: -13px;
}

.related-arrows {
    margin-left: auto;
}

.product-slider {
    width: 100%;
    overflow: visible;
}

.product-slider .swiper-slide {
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    height: auto;
}

.product-slider .swiper-slide-visible {
    opacity: 1;
    visibility: visible;
}

.product-slider-card {
    height: 100%;
}

.section-promo,
.section-reviews,
.section-recommend,
.section-edges,
.section-product,
.section-related,
.section-brands {
    position: relative;
    overflow: hidden;
}

.fixed-menu {
    display: none;
}

.filter-tabs {
    display: flex;
}

.filter-tab {
    position: relative;
}

.filter-tab__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
}

.filter-tab__content {
    display: block;
    min-width: 155px;
    text-align: center;
    padding: 22px 10px;
    line-height: 1;
    background: rgb(var(--color-gray-very-light));
    color: rgb(var(--color-gray));
    cursor: pointer;
    transition: .3s;
}

.filter-tab__input:checked + .filter-tab__content {
    cursor: default;
    background: rgb(var(--color-white));
    color: rgb(var(--color-gray-very-dark));
}

.filter-tab:nth-child(1) .filter-tab__content {
    border-radius: 30px 0 0 0;
}

.filter-tab:last-child .filter-tab__content {
    border-radius: 0 30px 0 0;
}

.filter-list,
.filter-list-more__inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.filter-content {
    padding: 40px;
    background: rgb(var(--color-white));
    border-radius: 0 20px 30px 30px;
}

.filter-list-more {
    padding-top: 20px;
    display: none;
}

.filter-btns {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.filter-toggle {
    margin-right: auto;
}

.filter-clear {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    color: rgb(var(--color-gray-very-dark));
    fill: rgb(var(--color-gray-very-dark));
    stroke: rgb(var(--color-gray-very-dark));
}

.filter-clear__icon {
    width: 20px;
    height: 20px;
}

.filter-clear:hover {
    color: rgb(var(--color-primary));
    fill: rgb(var(--color-primary));
    stroke: rgb(var(--color-primary));
}

.fixed-filter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.fixed-filter__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(var(--color-gray-very-dark) / .8);
}

.fixed-filter__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 440px;
    height: 100%;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    z-index: 2;
    background: rgb(var(--color-white));
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    transform: translateX(-100%);
    transition: .3s;
}

.fixed-filter__content::-webkit-scrollbar {
    display: none;
}

.fixed-filter__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fixed-filter__title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}

.fixed-filter__list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 10px;
}

.fixed-filter__list > .input {
    width: calc(50% - 5px);
}

.fixed-filter-clear {
    margin: 0 auto;
    padding: 11px 24px;
}

.fixed-filter.active {
    opacity: 1;
    visibility: visible;
}

.fixed-filter.active .fixed-filter__content {
    transform: none;
}

.animation {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: 1s;
}

[data-animation="fade-up"] {
    transform: translateY(100px);
}

[data-animation="fade-left"] {
    transform: translateX(100px);
}

[data-animation="fade-right"] {
    transform: translateX(-100px);
}

[data-animation="fade-down"] {
    transform: translateY(-100px);
}

[data-animation="zoom-in"] {
    transform: scale(.6);
}

[data-animation-delay="100"] {
    transition-delay: 100ms;
}

[data-animation-delay="200"] {
    transition-delay: 200ms;
}

[data-animation-delay="300"] {
    transition-delay: 300ms;
}

[data-animation-delay="400"] {
    transition-delay: 400ms;
}

[data-animation-delay="500"] {
    transition-delay: 500ms;
}

[data-animation-delay="600"] {
    transition-delay: 600ms;
}

[data-animation-delay="700"] {
    transition-delay: 700ms;
}

[data-animation-delay="800"] {
    transition-delay: 800ms;
}

[data-animation-delay="900"] {
    transition-delay: 900ms;
}

[data-animation-delay="1000"] {
    transition-delay: 1000ms;
}

[data-animation-delay="1100"] {
    transition-delay: 1100ms;
}

[data-animation-delay="1200"] {
    transition-delay: 1200ms;
}

[data-animation-delay="1300"] {
    transition-delay: 1300ms;
}

[data-animation-delay="1400"] {
    transition-delay: 1400ms;
}

[data-animation-delay="1500"] {
    transition-delay: 1500ms;
}

[data-animation-delay="1600"] {
    transition-delay: 1600ms;
}

[data-animation-delay="1700"] {
    transition-delay: 1700ms;
}

[data-animation-delay="1800"] {
    transition-delay: 1800ms;
}

[data-animation-delay="1900"] {
    transition-delay: 1900ms;
}

[data-animation-delay="2000"] {
    transition-delay: 2000ms;
}

.animated {
    transform: none;
    opacity: 1;
    visibility: visible;
}

.category-type-btn.btn--dark {
    pointer-events: none;
}

.empty {
    text-align: center;
    font-weight: 600;
    margin: 0;
}

/**********************************/
/************ 8. Popup ************/
/**********************************/

.fancybox-bg {
    background: rgb(var(--color-gray-very-dark) / .8);
}

.modal {
    width: 670px;
    max-width: calc(100% - 28px);
    overflow: visible;
    border-radius: 30px;
    padding: 40px;
    display: none;
}

.modal__close {
    position: absolute;
    top: 0;
    right: -60px;
    padding: 9px;
}

.modal__close-icon {
    width: 100%;
    height: 100%;
    display: block;
}

.modal__close:hover {
    background: rgb(var(--color-red));
}

.modal__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.modal__info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.modal__title {
    font-size: 40px;
    font-weight: 600;
}

.modal__title--center {
    text-align: center;
}

.modal__description {
    font-size: 25px;
    line-height: 1.2;
    margin: 0;
}

.modal-form {
    gap: 15px;
}

.modal-form .form__field {
    width: calc(50% - 8px);
}

/**********************************/
/************ 9. Media ************/
/**********************************/

/******************************************/
/************ 9.1 Wide screens ************/
/******************************************/

@media screen and (min-width: 1401px) {
    .hide-xxl {
        display: none !important;
    }
}

@media screen and (max-width: 1400px) and (min-width: 1301px) {
    .hide-xl {
        display: none !important;
    }
}

@media screen and (max-width: 1300px) and (min-width: 1025px) {
    .hide-lg {
        display: none !important;
    }
}

@media screen and (max-width: 1400px) {
    .header-inner {
        gap: 40px;
    }
    
    .section-header {
        column-gap: 20px;
        grid-template-columns: 1fr 415px;
    }
    
    .promo {
        align-items: stretch;
    }
    
    .promo-slider .swiper-slide {
        width: 742px;
        height: 450px;
    }
    
    .section-lead {
        height: 840px;
    }
    
    .section-lead--v2 {
        height: 740px;
    }

    .faq {
        align-items: center;
    }

    .footer-info {
        grid-template-columns: 306px 1fr 306px;
    }
    
    .privacy {
        transform: translateX(10px);
    }

    .content {
        max-width: 100%;
    }

    .contacts-grid {
        grid-template-columns: 524px 1fr;
    }

    .section-lead--small {
        height: 540px;
    }

    .modal {
        width: 633px;
    }

    .section-lead__bg {
        background-image: var(--bg-laptop);
    }
}

@media screen and (max-width: 1300px) {
    .nav-btn {
        display: block;
        order: -1;
    }
    
    .header-nav {
        display: none;
    }
    
    .header-inner {
        padding: 17px 0;
        gap: 20px;
    }
    
    .title {
        font-size: 40px;
    }

    h1:not([class]) {
        font-size: 40px;
    }
    
    h2:not([class]) {
        font-size: 32px;
    }
    
    h3:not([class]) {
        font-size: 28px;
    }
    
    h4:not([class]) {
        font-size: 24px;
    }
    
    .description {
        font-size: 22px;
    }
    
    .section-header {
        grid-template-columns: 1fr 350px;
    }
    
    .card__footer {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .video {
        height: 500px;
    }
    
    .platform {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .img-review {
        height: 460px;
    }
    
    .faq__question {
        font-size: 22px;
    }
    
    .lead__description {
        font-size: 22px;
    }
    
    .footer-contact__title {
        font-size: 22px;
    }
    
    .footer-contact__title--big {
        font-size: 25px;
    }
    
    .edge__description {
        font-size: 22px;
    }
    
    .edge__title {
        font-size: 40px;
    }
    
    .footer-nav__link {
        font-size: 16px;
    }

    .content {
        font-size: 16px;
    }
    
    .content p,
    .content ul,
    .content ol {
        margin: 19px 0;
    }
    
    .content ol {
        padding-left: 24px;
    }
    
    .content ul {
        padding-left: 24px;
    }
    
    .content ul li::before {
        top: 9px;
        left: -13px;
    }
    
    .content p + ul {
        margin-top: -19px;
    }

    .catalog-header {
        display: flex;
        flex-wrap: wrap;
    }
    
    .types {
        order: -1;
        width: calc(100% + 40px);
        justify-content: flex-start;
        white-space: nowrap;
        -ms-overflow-style: none;
        scrollbar-width: none;
        flex-wrap: nowrap;
        overflow: auto;
        margin: 0 -20px;
        padding: 0 20px;
    }

    .types::-webkit-scrollbar {
        display: none;
    }

    .gallery .swiper-slide {
        height: 150px;
    }
    
    .gallery .swiper-slide:nth-child(1) {
        height: 300px;
    }
    
    .product-title {
        font-size: 34px;
    }
    
    .attr__title {
        font-size: 14px;
    }
    
    .attr__text {
        font-size: 16px;
    }
    
    .product-btns {
        flex-direction: column;
    }
    
    .product-btn {
        width: 100%;
    }

    .fixed-menu {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        opacity: 0;
        visibility: hidden;
        z-index: 10;
        transition: .3s;
    }
    
    .fixed-menu__bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(var(--color-gray-very-dark) / .8);
    }
    
    .fixed-menu__content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: rgb(var(--color-white));
        border-radius: 0 0 30px 30px;
        padding: 20px 40px 40px;
        transition: .3s;
        transform: translateY(-100%);
        z-index: 2;
    }
    
    .fixed-menu__close {
        margin-bottom: 40px;
    }
    
    .fixed-menu-grid {
        display: flex;
        justify-content: space-between;
    }
    
    .fixed-menu-nav {
        padding: 0;
        margin: 0;
        list-style: none;
        width: 48.55%;
    }
    
    .fixed-menu-nav__link {
        font-size: 22px;
        font-weight: 600;
        line-height: 1.1;
        color: rgb(var(--color-gray-very-dark));
        text-decoration: none;
    }
    
    .fixed-menu-nav__item:not(:last-child) {
        border-bottom: 1px solid rgb(var(--color-gray-very-light));
        padding-bottom: 19px;
        margin-bottom: 20px;
    }
    
    .fixed-menu-contacts {
        background: rgb(var(--color-gray-very-pale));
        width: 35.61%;
        padding: 30px;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px;
    }
    
    .fixed-menu-phone {
        font-weight: 600;
        color: rgb(var(--color-gray-very-dark));
        text-decoration: none;
        line-height: 1;
        display: block;
        width: fit-content;
    }
    
    .fixed-menu-open {
        font-size: 12px;
        color: rgb(var(--color-gray));
        font-weight: 400;
        margin: 0;
        line-height: 1;
    }
    
    .fixed-menu-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    .fixed-menu-contacts-top {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .fixed-menu.active {
        opacity: 1;
        visibility: visible;
    }
    
    .fixed-menu.active .fixed-menu__content {
        transform: none;
    }
}

@media screen and (max-width: 1200px) {
    .card__img-container {
        height: 200px;
    }

    .filter-list,
    .filter-list-more__inner {
        display: flex;
        flex-wrap: wrap;
    }

    .filter-list > *,
    .filter-list-more__inner > * {
        flex: 1 0 calc(50% - 20px);
    }

    .filter-list > *:nth-last-child(-n+3),
    .filter-list-more__inner > *:nth-child(-n+3),
    .filter-list-more__inner > *:nth-last-child(-n+3) {
        flex-basis: calc(33.33333% - 20px);
    }
}

/*************************************/
/************ 9.2 Tablets ************/
/*************************************/

@media screen and (max-width: 1024px) and (min-width: 769px) {
    .hide-md {
        display: none !important;
    }

    .lead__form--fields-3 > *:nth-child(-n+2) {
        flex-basis: calc(50% - 10px);
    }

    .lead__form--fields-5 > *:nth-child(-n+3) {
        flex-basis: calc(33.33333% - 10px);
    }

    .lead__form--fields-6 > *:nth-child(-n+4) {
        flex-basis: calc(50% - 10px);
    }

    .lead__form--fields-10 > *:nth-child(-n+6) {
        flex-basis: calc(33.33333% - 10px);
    }
    
    .lead__form--fields-10 > *:nth-child(7),
    .lead__form--fields-10 > *:nth-child(8) {
        flex-basis: calc(50% - 10px);
    }
}

@media screen and (max-width: 1024px) {
    .section-header {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .promo-description {
        max-width: 600px;
        margin-bottom: 10px;
    }
    
    .promo-description br {
        display: block;
    }
    
    .promo-arrows {
        display: none;
    }
    
    .promo-slider .swiper-slide {
        width: 600px;
        height: 400px;
    }
    
    .promo-card__box {
        right: 10px;
        bottom: 10px;
        padding: 20px;
    }
    
    .label {
        font-size: 10px;
        padding: 7px 10px;
    }
    
    .promo-card__title {
        font-size: 22px;
    }
    
    .promo-card__attrs {
        font-size: 14px;
    }
    
    .promo-card__price {
        font-size: 20px;
    }
    
    .promo-card__credit {
        font-size: 14px;
    }
    
    .brands .swiper-wrapper {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    
    .brand {
        padding: 19px;
        font-size: 14px;
    }
    
    .brand-img__container {
        height: 50px;
    }
    
    .recommend-header {
        gap: 40px;
    }
    
    .product-list .swiper-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .card {
        padding: 20px;
    }
    
    .card__title {
        font-size: 22px;
    }
    
    .card__description {
        font-size: 14px;
    }
    
    .card__price {
        font-size: 20px;
    }
    
    .card__credit {
        font-size: 14px;
    }
    
    .section-lead--v2 {
        height: 840px;
    }
    
    .lead__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .lead {
        padding: 30px;
    }
    
    .form {
        gap: 15px;
    }
    
    .form__field {
        flex: 1 0 0;
        width: 0;
    }
    
    .form__btn {
        width: fit-content;
    }
    
    .form__notice {
        width: 100%;
    }
    
    .video {
        height: 400px;
    }
    
    .play {
        width: 80px;
        height: 80px;
    }

    .edges .swiper-wrapper {
        display: flex;
        flex-wrap: wrap;
    }
    
    .edge-slide--v2 {
        width: calc(50% - 10px);
    }
    
    .edge {
        flex-direction: row;
        gap: 40px;
        align-items: center;
        justify-content: flex-start;
        min-height: auto;
    }
    
    .edge--v2 {
        flex-direction: column;
        gap: 32px;
        align-items: flex-start;
        justify-content: space-between;
        min-height: 280px;
    }
    
    .edge__icon-container {
        width: 50px;
        height: 50px;
        padding: 12px;
    }
    
    .edge--v2 .edge__title {
        font-size: 25px;
    }
    
    .edge-slide--v2 {
        height: auto;
    }
    
    .edge-slide:nth-child(7) {
        order: 2;
    }
    
    .reviews-header {
        gap: 40px;
    }
    
    .video-reviews {
        margin-left: -354px;
        width: calc(100% + 708px);
        margin-top: 30px;
    }
    
    .video-reviews .swiper-slide {
        width: 334px;
    }
    
    .platforms__title {
        font-size: 25px;
    }
    
    .platform {
        padding: 20px;
    }
    
    .platform__logo {
        width: 60px;
        height: 60px;
    }
    
    .platform__rating {
        font-size: 40px;
        gap: 15px;
    }
    
    .stars__item {
        width: 15px;
        height: 15px;
    }
    
    .platform__link {
        font-size: 16px;
    }
    
    .img-reviews .swiper-slide {
        width: 246px;
    }

    .img-review {
        height: 340px;
    }

    .info-cards {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
    
    .info-card {
        padding: 40px 0;
        flex-direction: row;
        gap: 40px;
        border-bottom: 0;
    }

    .info-card__img,
    .info-card::before {
        left: -40px;
        width: calc(100% + 80px);
    }
    
    .info-card__icon-container {
        flex-shrink: 0;
    }
    
    .info-card__content {
        flex-grow: 1;
    }
    
    .info-card__title {
        font-size: 25px;
    }
    
    .info-cards > *:nth-child(3n+2) {
        border-left: 0;
        border-right: 0;
    }
    
    .info-card:last-child {
        border-bottom: 1px solid rgb(var(--color-gray-light));
    }
    
    .faq-list {
        grid-template-columns: 1fr;
    }
    
    .faq {
        padding: 30px;
    }
    
    .section-lead--dark-bg {
        background-color: rgb(var(--color-gray-very-dark));
        height: auto;
        padding-top: 460px;
    }
    
    .section-lead--dark-bg::before {
        height: 500px;
    }
    
    .footer-nav__item {
        flex: 0 0 auto;
    }
    
    .footer-nav__link {
        padding: 17px 20px;
    }
    
    .footer-contact:nth-child(2) {
        order: 2;
        width: 100%;
    }
    
    .footer-info {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 40px 20px;
    }
    
    .footer-contact {
        gap: 20px;
        width: calc(50% - 10px);
    }
    
    .footer-socials {
        width: calc(50% - 10px);
        gap: 20px;
    }
    
    .footer-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px;
    }
    
    .copyright {
        width: 100%;
    }
    
    .privacy {
        transform: none;
        margin: 0;
    }

    .page-404__img {
        width: 250px;
        margin-bottom: 35px;
    }
    
    .page-404__description {
        font-size: 22px;
        margin-bottom: 40px;
    }

    .contacts-grid {
        grid-template-columns: 1fr;
    }
    
    .contacts {
        padding: 30px;
        gap: 20px;
    }
    
    .contact__title {
        font-size: 22px;
    }
    
    .contact__description {
        font-size: 14px;
    }
    
    .contacts > *:nth-child(n+2) {
        padding-top: 20px;
    }
    
    .contact__title--big {
        font-size: 25px;
    }
    
    .map {
        height: 450px;
    }

    .section--compact-spacing[class*="section--bg-"] {
        padding: 100px 0;
    }
    
    .roadmap {
        grid-template-columns: repeat(8, 1fr);
        grid-auto-rows: auto;
        grid-template-rows: auto;
    }
    
    .roadmap > *:nth-child(1) {
        grid-area: 1 / 1 / 2 / 9;
    }
    
    .roadmap > *:nth-child(2) {
        grid-area: 2 / 1 / 3 / 4;
    }
    
    .roadmap > *:nth-child(3) {
        grid-area: 2 / 4 / 3 / 9;
    }
    
    .roadmap > *:nth-child(5) {
        grid-area: 3 / 1 / 4 / 9;
    }
    
    .roadmap > *:nth-child(4) {
        grid-area: 4 / 1 / 5 / 4;
    }
    
    .roadmap > *:nth-child(6) {
        grid-area: 4 / 4 / 5 / 9;
    }
    
    .roadmap-item__title {
        font-size: 22px;
    }
    
    .roadmap-item__description {
        font-size: 14px;
    }
    
    .section-lead + [class*="section--bg-"] {
        padding-top: 120px;
    }
    
    .section--compact-spacing {
        margin-top: 100px;
    }

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

    .product-wrapper {
        grid-template-columns: 1fr;
    }

    .gallery {
        margin: 0 -40px;
        width: calc(100% + 80px);
        padding: 0 40px;
    }
    
    .gallery .swiper-wrapper {
        flex-wrap: nowrap;
        gap: 0;
    }
    
    .gallery .swiper-slide:nth-child(n) {
        width: 600px;
        height: 450px;
    }
    
    .gallery-item,
    .gallery .swiper-slide:nth-child(1) .gallery-item {
        border-radius: 30px;
    }
    
    .product-info {
        padding: 30px;
    }
    
    .label--big {
        font-size: 12px;
        padding: 7px 15px;
    }
    
    .product-views__count {
        font-size: 12px;
        padding: 6px 15px;
    }
    
    .product-views {
        font-size: 12px;
    }
    
    .product-title {
        font-size: 30px;
    }
    
    .product-prices {
        font-size: 25px;
    }
    
    .product-old-price {
        font-size: 22px;
    }
    
    .variant__info {
        padding: 9px 19px;
    }
    
    .product-btns {
        flex-direction: row;
    }
    
    .info-box {
        padding: 30px;
    }
    
    .info-box__title {
        font-size: 22px;
    }
    
    .info-box__content {
        font-size: 14px;
    }
    
    .info-box__content ul,
    .info-box__content ol {
        padding-left: 21px;
    }
    
    .info-box__content p,
    .info-box__content ul,
    .info-box__content ol {
        margin: 17px 0;
    }
    
    .info-box__content p + ul {
        margin-top: -17px;
    }

    .related-arrows {
        display: none;
    }

    .modal-form .form__btn {
        width: 100%;
    }

    .modal {
        width: 511px;
        padding: 30px;
    }
    
    .modal__inner {
        gap: 30px;
    }
    
    .modal__title {
        font-size: 35px;
    }
    
    .modal__description {
        font-size: 22px;
    }
    
    .modal__info {
        gap: 10px;
    }
    
    .modal-form .form__notice {
        margin-top: -5px;
    }

    .filter-content {
        padding: 30px;
    }

    .fixed-filter__content {
        width: 463px;
    }
    
    .message-reviews {
        margin: 0 -40px;
        padding: 0 40px;
    }

    .message-reviews .swiper-wrapper {
        display: flex;
        gap: 0;
    }
    
    .message-reviews .swiper-slide {
        width: 511px;
    }

    .section-lead__bg {
        background-image: var(--bg-tablet);
    }
}

/*************************************/
/************ 9.3 Mobiles ************/
/*************************************/

@media screen and (max-width: 768px) {
    .wrap {
        max-width: calc(100% - 40px);
    }
    
    .header {
        top: 10px;
    }

    .header--fixed {
        top: 0;
    }
    
    .header-inner {
        padding: 10px 0;
        justify-content: space-between;
    }
    
    .header-contacts {
        display: none;
    }
    
    .header-phone-btn {
        display: block;
    }
    
    .icon-btn {
        width: 40px;
        height: 40px;
        padding: 10px;
    }
    
    .icon-btn--small {
        width: 35px;
        height: 35px;
        padding: 8px;
    }
    
    .logo {
        max-width: 125px;
        max-height: 30px;
    }

    .main {
        margin-top: 75px;
    }

    .main--homepage {
        margin-top: 95px;
    }

    .section-header {
        gap: 10px;
    }
    
    .title {
        font-size: 30px;
    }

    h1:not([class]) {
        font-size: 30px;
    }
    
    h2:not([class]) {
        font-size: 26px;
    }
    
    h3:not([class]) {
        font-size: 24px;
    }
    
    h4:not([class]) {
        font-size: 22px;
    }
    
    h5:not([class]) {
        font-size: 20px;
    }
    
    h6:not([class]) {
        font-size: 18px;
    }
    
    .description {
        font-size: 20px;
    }
    
    .promo-description br {
        display: none;
    }
    
    .btn {
        font-size: 14px;
        padding: 12px 19px;
    }
    
    .promo-btn {
        padding-left: 10px;
        padding-right: 10px;
        flex: 1 0 0;
    }
    
    .section__wrap {
        gap: 30px;
    }
    
    .promo-slider .swiper-slide {
        max-width: 100%;
        height: auto;
    }
    
    .promo-card {
        border-radius: 0;
        width: auto;
        height: auto;
    }
    
    .promo-card__img {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        border-radius: 20px;
        display: block;
        aspect-ratio: 1.6;
    }
    
    .promo-card__box {
        position: relative;
        right: auto;
        bottom: auto;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        margin-top: 5px;
        gap: 10px;
        width: 100%;
    }
    
    .label {
        padding: 5px 10px;
    }
    
    .promo-card__title {
        font-size: 20px;
    }
    
    .promo-card__attrs {
        font-size: 12px;
    }
    
    .promo-card__info {
        gap: 5px;
    }
    
    .promo-card__price {
        font-size: 18px;
    }
    
    .promo-card__credit {
        font-size: 12px;
    }
    
    .promo-card__btn {
        margin-top: 10px;
    }
    
    .btn--small {
        padding: 10px 14px;
        font-size: 12px;
    }
    
    .section {
        margin-top: 80px;
    }
    
    .section__wrap {
        padding-top: 20px;
    }

    .brands .swiper-wrapper {
        display: flex;
        gap: 0;
    }
    
    .brands .swiper-slide {
        width: 150px;
    }
    
    .brands {
        overflow: visible;
    }
    
    [class*="section--bg-"] {
        padding: 80px 0;
    }
    
    .recommend-header {
        gap: 30px;
    }
    
    .product-list .swiper-wrapper {
        display: flex;
        gap: 0;
    }
    
    .product-list {
        width: calc(100% - 20px);
        margin-left: 0;
    }
    
    .card {
        border-radius: 20px;
        gap: 10px;
    }
    
    .card__title {
        font-size: 20px;
    }
    
    .card__img-container {
        border-radius: 10px;
    }
    
    .card__price {
        font-size: 18px;
    }
    
    .card__credit {
        font-size: 12px;
    }
    
    .recommend-btn {
        margin-top: 10px;
    }
    
    .section-lead {
        height: auto;
        padding-top: 310px;
    }
    
    .section-lead__bg {
        height: 350px;
        background-image: var(--bg-mobile);
    }
    
    .lead {
        border-radius: 20px;
        padding: 20px;
    }
    
    .lead__info {
        gap: 10px;
    }
    
    .lead__description {
        font-size: 20px;
    }
    
    .lead__grid {
        gap: 20px;
    }
    
    .form {
        flex-direction: column;
        gap: 10px;
    }
    
    .input__field {
        height: 40px;
        border-radius: 5px;
        font-size: 14px;
        padding: 0 14px;
    }
    
    .form__field {
        width: 100%;
        flex: 0 0 auto;
    }
    
    .input__prefix,
    .input__postfix {
        font-size: 14px;
        left: 15px;
    }

    .input__postfix {
        left: auto;
        right: 15px;
    }
    
    .form__btn {
        width: 100%;
    }
    
    .form__notice {
        font-size: 10px;
    }
    
    .video {
        height: 500px;
        background-image: var(--bg-mobile);
    }
    
    .play {
        width: 60px;
        height: 60px;
    }
    
    .edges {
        overflow: visible;
        width: 100%;
    }

    .edges .swiper-wrapper {
        flex-wrap: nowrap;
        gap: 0;
        align-items: stretch;
    }
    
    .edges .swiper-slide {
        width: 255px;
        height: auto;
    }
    
    .edge {
        border-radius: 20px;
        height: 100%;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: 20px;
        min-height: 250px;
    }
    
    .edge__title {
        font-size: 30px;
    }
    
    .edge__description {
        font-size: 20px;
    }
    
    .edge--v2 .edge__title {
        font-size: 22px;
    }
    
    .edge--v2 .edge__description {
        font-size: 14px;
    }
    
    .reviews-header {
        gap: 30px;
    }
    
    .video-reviews {
        margin-left: -245px;
        width: calc(100% + 490px);
        margin-top: 20px;
    }
    
    .video-reviews .swiper-slide {
        width: 235px;
    }
    
    .section-reviews .section__wrap {
        gap: 50px;
    }
    
    .platforms__title {
        font-size: 22px;
    }
    
    .platforms-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .platforms {
        gap: 20px;
    }
    
    .platform {
        border-radius: 10px;
        align-items: center;
        flex-direction: row;
    }
    
    .platform__logo {
        width: 50px;
        height: 50px;
    }
    
    .platform__rating {
        font-size: 30px;
    }
    
    .stars__item {
        width: 12px;
        height: 12px;
    }
    
    .platform__info {
        gap: 5px;
    }
    
    .platform__link {
        font-size: 14px;
        text-underline-offset: 1px;
    }
    
    .img-reviews .swiper-slide {
        width: 235px;
    }
    
    .img-review {
        height: 300px;
        border-radius: 20px;
    }

    .info-card__img,
    .info-card::before {
        left: -20px;
        width: calc(100% + 40px);
    }

    .info-card__icon-container {
        width: 50px;
        height: 50px;
        padding: 12px;
    }
    
    .info-card {
        padding: 30px 0;
        flex-direction: column;
        gap: 20px;
    }
    
    .info-card__title {
        font-size: 22px;
    }
    
    .info-card__description {
        font-size: 14px;
    }
    
    .info-card__content {
        gap: 20px;
    }
    
    .faq {
        padding: 20px;
        border-radius: 20px;
    }
    
    .faq__icon {
        width: 35px;
        height: 35px;
    }
    
    .faq__question {
        font-size: 18px;
    }
    
    .faq__answer {
        font-size: 14px;
    }
    
    .faq-list {
        gap: 10px;
    }
    
    .footer {
        padding: 60px 0 30px;
    }
    
    .section-lead:last-child {
        margin-bottom: -25px;
    }
    
    .footer-nav__link {
        font-size: 14px;
        padding: 13px 15px;
    }
    
    .footer-nav {
        gap: 10px;
    }
    
    .footer-info {
        gap: 30px;
    }
    
    .footer-contact {
        width: 100%;
        gap: 10px;
    }
    
    .footer-socials {
        width: 100%;
        gap: 10px;
    }
    
    .footer-contact__info {
        gap: 5px;
    }
    
    .footer-contact__title {
        font-size: 20px;
    }
    
    .footer-contact__title--big {
        font-size: 22px;
    }
    
    .footer-contact__description {
        font-size: 14px;
    }
    
    .footer-wrap {
        gap: 30px;
    }
    
    .footer-socials__text {
        font-size: 14px;
    }
    
    .footer-notice {
        font-size: 14px;
    }
    
    .footer-bottom {
        font-size: 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .developer {
        margin: 0;
    }
    
    .privacy {
        margin-top: 10px;
    }
    
    .privacy,
    .developer {
        text-underline-offset: 1px;
    }

    .page-404 {
        padding: 20px;
    }
    
    .page-404__img {
        width: 200px;
        margin-bottom: 20px;
    }
    
    .page-404__description {
        font-size: 18px;
        margin-bottom: 30px;
    }
    
    .page-404__title {
        margin-bottom: 10px;
    }

    .breadcrumbs__link,
    .breadcrumbs__text {
        font-size: 12px;
    }
    
    .breadcrumbs {
        padding-bottom: 10px;
    }
    
    .section-breadcrumbs {
        margin-bottom: 30px;
    }
    
    .page-title {
        font-size: 28px;
    }
    
    .content {
        font-size: 14px;
    }
    
    .content p,
    .content ul,
    .content ol {
        margin: 17px 0;
    }
    
    .content ol {
        padding-left: 21px;
    }
    
    .content ul {
        padding-left: 21px;
    }
    
    .content ul li::before {
        top: 8px;
        left: -12px;
    }
    
    .content p + ul {
        margin-top: -17px;
    }
    
    .main .section:last-child:not([class*="section-lead"]):not([class*="section--bg"]) {
        margin-bottom: 80px;
    }

    .contacts {
        padding: 20px;
        border-radius: 20px;
    }
    
    .contact__title {
        font-size: 18px;
    }
    
    .contact__description {
        font-size: 12px;
    }
    
    .contact__info {
        gap: 5px;
    }
    
    .contact__title--big {
        font-size: 20px;
    }
    
    .map {
        height: 300px;
        border-radius: 20px;
    }
    
    .contacts-grid {
        gap: 10px;
    }

    .section-lead--small {
        padding-top: 210px;
    }
    
    .section-lead--small::before {
        height: 250px;
    }
    
    .lead {
        gap: 20px;
    }
    
    .roadmap {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .roadmap-img-container {
        height: 150px;
        border-radius: 20px;
    }
    
    .roadmap-item {
        border-radius: 20px;
        padding: 19px;
        gap: 30px;
    }
    
    .roadmap-item__step {
        font-size: 12px;
    }
    
    .roadmap-item__title {
        font-size: 18px;
        line-height: 1.1;
    }
    
    .roadmap-item__description {
        font-size: 12px;
    }
    
    .roadmap-item__top {
        gap: 5px;
    }
    
    .roadmap > *:nth-child(4) {
        order: 2;
    }
    
    .roadmap > *:nth-child(6) {
        order: 3;
    }
    
    .section--compact-spacing[class*="section--bg-"] {
        padding: 80px 0;
    }
    
    .section-lead + [class*="section--bg-"] {
        padding-top: 120px;
    }

    .btn__icon {
        margin: -3px 0;
    }

    .section__wrap--no-border {
        padding: 0;
    }
    
    .filter-btn {
        width: 100%;
    }
    
    .select {
        height: 40px;
        border-radius: 5px;
        font-size: 14px;
        padding: 0 14px;
        background-position: right 15px center;
    }
    
    .sort {
        width: 100%;
        margin: 0;
        height: 50px;
    }
    
    .catalog-header {
        gap: 10px;
    }
    
    .product-grid {
        gap: 10px;
    }

    .section-breadcrumbs + .section-product {
        margin-top: -10px;
    }
    
    .gallery-item,
    .gallery .swiper-slide:nth-child(1) .gallery-item {
        border-radius: 20px;
    }
    
    .gallery .swiper-slide:nth-child(n) {
        width: 300px;
        height: 200px;
    }
    
    .product-wrapper {
        gap: 10px;
    }
    
    .product-info {
        padding: 20px;
        border-radius: 20px;
        gap: 20px;
    }
    
    .gallery {
        margin: 0 -20px;
        width: calc(100% + 40px);
        padding: 0 20px;
    }
    
    .label--big {
        font-size: 10px;
    }
    
    .product-views {
        font-size: 10px;
        gap: 5px;
    }
    
    .product-views__count {
        font-size: 10px;
        padding: 5px 10px;
    }
    
    .product-title {
        font-size: 25px;
    }
    
    .attr__title {
        font-size: 12px;
    }
    
    .attr__text {
        font-size: 14px;
    }
    
    .attrs {
        gap: 10px 20px;
    }
    
    .product-order {
        padding: 20px;
        border-radius: 10px;
    }
    
    .variant__info {
        font-size: 12px;
        padding: 8px 14px;
        gap: 5px;
    }
    
    .variants {
        gap: 5px;
    }
    
    .variant__close {
        margin: -4px 0;
    }
    
    .product-btns {
        flex-direction: column;
    }
    
    .info-box {
        padding: 20px;
    }
    
    .product-box {
        gap: 10px;
    }
    
    .info-box__title {
        font-size: 20px;
    }
    
    .info-box__title-icon {
        width: 25px;
        height: 25px;
    }
    
    .info-box__content {
        font-size: 12px;
        padding-top: 10px;
    }
    
    .content p,
    .content ul,
    .content ol {
        margin: 14px 0;
    }
    
    .content ol {
        padding-left: 18px;
    }
    
    .content ul {
        padding-left: 18px;
    }
    
    .content ul li::before {
        top: 7px;
        left: -10px;
    }
    
    .content p + ul {
        margin-top: -14px;
    }
    
    .product-slider {
        margin-left: 0;
        width: calc(100% - 20px);
    }

    .modal {
        width: 420px;
        border-radius: 20px;
        padding: 70px 20px 20px;
    }
    
    .modal__close {
        width: 30px;
        height: 30px;
        top: 20px;
        right: 20px;
        padding: 7px;
    }
    
    .modal__title {
        font-size: 30px;
    }
    
    .modal__description {
        font-size: 20px;
        line-height: 1.1;
    }
    
    .modal__inner {
        gap: 20px;
    }
    
    .modal-form .form__field {
        width: 100%;
    }
    
    .modal-form .form__notice {
        margin: 0;
    }

    .fixed-menu__content {
        padding: 20px;
        border-radius: 0 0 20px 20px;
    }
    
    .fixed-menu-grid {
        flex-direction: column;
        gap: 30px;
    }
    
    .fixed-menu__close {
        width: 30px;
        height: 30px;
        padding: 7px;
        margin-bottom: 30px;
    }
    
    .fixed-menu-nav__link {
        font-size: 20px;
    }
    
    .fixed-menu-nav {
        width: 100%;
    }
    
    .fixed-menu-contacts {
        width: 100%;
        padding: 20px;
        border-radius: 10px;
    }
    
    .fixed-menu-contacts-top {
        gap: 10px;
    }
    
    .fixed-menu-socials .icon-btn {
        width: 35px;
        height: 35px;
        padding: 7px;
    }

    .filter-tab {
        flex: 1 0 0;
    }
    
    .filter-tab__content {
        font-size: 14px;
        padding: 13px;
    }
    
    .filter-tab:nth-child(1) .filter-tab__content {
        border-radius: 20px 0 0 0;
    }
    
    .filter-tab:last-child .filter-tab__content {
        border-radius: 0 20px 0 0;
    }
    
    .filter-content {
        padding: 20px;
        border-radius: 0 0 30px 30px;
    }
    
    .filter-list > *:nth-child(n),
    .filter-list-more__inner > *:nth-child(n) {
        flex-basis: 100%;
    }
    
    .filter-list > *:nth-last-child(-n+2),
    .filter-list-more__inner > *:nth-child(-n+2),
    .filter-list-more__inner > *:nth-child(n+6):nth-child(-n+9) {
        flex-basis: calc(50% - 10px);
    }
    
    .filter-list-more {
        padding-top: 10px;
    }
    
    .filter-btns {
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }
    
    .filter-toggle {
        width: 100%;
    }
    
    .filter-clear {
        order: 2;
        margin-top: 10px;
        font-size: 14px;
    }
    
    .filter-submit {
        width: 100%;
    }
    
    .filter-clear__icon {
        width: 18px;
        height: 18px;
    }

    .fixed-filter__content {
        width: 340px;
        max-width: calc(100% - 20px);
        padding: 20px;
        gap: 30px;
    }
    
    .fixed-filter__close {
        width: 30px;
        height: 30px;
        padding: 6px;
    }
    
    .fixed-filter__title {
        font-size: 25px;
    }
    
    .fixed-filter__list {
        gap: 10px;
    }
    
    .fixed-filter-clear {
        padding: 9px 19px;
    }

    .fixed-filter__list > .fixed-filter__input--sm-full-width {
        width: 100%;
    }

    .message-reviews {
        margin-top: 20px;
    }
    
    .message-reviews .swiper-slide {
        width: 300px;
    }
    
    .message-review__img {
        border-radius: 10px;
    }

    .product-grid-content {
        gap: 30px;
    }
}

@media screen and (max-width: 600px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) and (min-width: 481px) {
    .hide-sm {
        display: none !important;
    }
}

@media screen and (max-width: 480px) {
    .hide-xs {
        display: none !important;
    }
}