@font-face {
    font-family: 'Averta CY';
    src: url('../fonts/AvertaCY-Semibold.eot');
    src: url('../fonts/AvertaCY-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvertaCY-Semibold.woff2') format('woff2'),
        url('../fonts/AvertaCY-Semibold.woff') format('woff'),
        url('../fonts/AvertaCY-Semibold.ttf') format('truetype'),
        url('../fonts/AvertaCY-Semibold.svg#AvertaCY-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averta CY';
    src: url('../fonts/AvertaCY-Regular.eot');
    src: url('../fonts/AvertaCY-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvertaCY-Regular.woff2') format('woff2'),
        url('../fonts/AvertaCY-Regular.woff') format('woff'),
        url('../fonts/AvertaCY-Regular.ttf') format('truetype'),
        url('../fonts/AvertaCY-Regular.svg#AvertaCY-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* основные цвета */
    --b-c--white: #ffffff;
    --b-c--black: #000000;
    --b-c--Dgrey: #2D2D2D;
    --b-c--VDgrey: #1E1E1E;
    --b-c--Lgrey: #EDEDED;
    --b-c--grey: #A6A6A6;
    --b-c--VLgrey: #F6F6F6;
    --b-c--grey2: #CECECE;
    --b-c--red-txt: #FF3454;
    /* Вспомогательные цвета */
    --b-c--red: #DC1C3A;
    --b-c--red-error: #EB5B72;
    --b-c--green: #7EC41F;
    --b-c--yellow: #FFB932;
    /* Градиенты */
    --b-g--dark-gradient: linear-gradient(180deg, rgba(217, 217, 217, 0) 59.46%, rgba(0, 0, 0, 0.3) 108.81%);
    /* Тени */
    --box-shadow: 0px 0px 4px 0px #00000014;
    /* Размеры шрифтов */
    --fs--ttl--main: 22px;
    --fs--ttl--sub: 18px;
    --fs--ttl-blog: 12px;
    --fs--txt-s: 10px;
    --fs--txt-m: 14px;
    --fs--txt-l: 16px;
    --fs--txt-xl: 24px;
    --fs--btn: 14px;
    --fs--phn: 16px;
    /* Размеры отступов */
    --padding--side: 12px;
    --padding--input-adaptive: 5px 17px;
    --padding--input-nulled: 9px 2px;
    --padding--input: 12px 17px;
    --padding--input-search: 10px 12px;
    --padding--btn-cube: 9px 9px 9px 9px;
    --padding--btn-m: 14px 17px 14px 17px;
    --padding--select-l: 12.5px 16px 12.5px 16px;
    --padding--select-m: 8.5px 16px 8.5px 16px;
    --padding--radio-s: 8px 12px 8px 12px;
    --padding--radio-m: 10px 12px 10px 12px;
    --padding--radio-l: 14px 12px 14px 12px;
    /* Другие размеры */
    --b-s--logo: 38px;
    --b-s--icon: 24px;
    --b-s--emoji-s: 32px;
    --b-s--checkbox: 18px;
    /* параметры цветов */
    --param--footer--bgrd: var(--b-c--VLgrey);
    --param--txt--color-sub: var(--b-c--grey);
    --param--txt--color-error: var(var(--b-c--red-error));
    --param--btn--dark: var(--b-c--Dgrey);
    --param--btn--disabled: var(--b-c--VLgrey);
    /* параметры шрифтов */
    --param--ttl--first: 600 36px/36px 'Averta CY', sans-serif;
    --param--ttl--main: 600 32px/34px 'Averta CY', sans-serif;
    --param--ttl--ages: 600 14px/14px 'Averta CY', sans-serif;
    --param--ttl--categories: 600 16px/16px 'Averta CY', sans-serif;
    --param--txt--main: 600 18px/20px 'Averta CY', sans-serif;
    --param--txt--geography: 600 18px/20px 'Averta CY', sans-serif;
    --param--txt--phn: 400 18px/24px 'Averta CY', sans-serif;
    --param--btn--main: 400 var(--fs--btn)/1.2 'Averta CY', sans-serif;
    --param--ttl--spoiler: 600 18px/20px 'Averta CY', sans-serif;
    --param--txt--spoiler: 400 14px/18px 'Averta CY', sans-serif;
    --param--txt--input: 400 14px/18px 'Averta CY', sans-serif;
    --param--txt--input-active: 400 12px/12px 'Averta CY', sans-serif;
}

@media (min-width: 600px) {
    :root {
        --fs--txt-m: 16px;
        --fs--ttl--main: 27px;
        --fs--ttl-blog: 18px;
        --fs--ttl--sub: 20px;
        --fs--phn: 22px;
        --padding--input-adaptive: 12px 17px;
        --padding--side: 20px;
        --grid-1-2: 1fr 1fr;
    }
}

@media (min-width: 1000px) {
    :root {
        --padding--side: 120px;
        --b-s--logo: 42px;
        --b-s--emoji-s: 40px;
        --param--ttl--first: 600 60px/56px 'Averta CY', sans-serif;
        --param--ttl--main: 600 52px/52px 'Averta CY', sans-serif;
        --param--ttl--ages: 600 26px/28px 'Averta CY', sans-serif;
        --param--txt--main: 600 26px/28px 'Averta CY', sans-serif;
        --param--ttl--categories: 600 26px/28px 'Averta CY', sans-serif;
        --param--ttl--spoiler: 600 26px/28px 'Averta CY', sans-serif;
        --param--txt--spoiler: 400 18px/24px 'Averta CY', sans-serif;
    }
}

@keyframes fromBtoT {
    0% {
        bottom: -100vh;
    }

    100% {
        bottom: 0;
    }
}

@keyframes fromTtoB {
    0% {
        top: -100vh;
    }

    100% {
        top: 0;
    }
}

@keyframes fromLtoR {
    0% {
        left: -100vh;
    }

    100% {
        left: 0;
    }
}

@keyframes fromRtoL {
    0% {
        left: 0;
    }

    100% {
        left: -100vh;
    }
}

@-o-keyframes loading-spinner {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }
}

@-moz-keyframes loading-spinner {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes loading-spinner {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes loading-spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.input_grey {
    position: relative;
    display: flex;
    gap: 12px;
    border-radius: 12px;
    background-color: var(--b-c--VLgrey);
    /* padding: 13px 20px 13px 60px; */
    padding: 13px 20px 13px 20px;
    transition: border .3s ease;
}

.input_grey input {
    font: var(--param--txt--input);
    width: 100%;
}

.input_grey span {
    font: var(--param--txt--input);
    color: var(--b-c--grey);
    transition: all .3s ease;
    display: flex;
    align-items: center;
    /* position: absolute;
    top: 14px;
    left: 20px; */
}

.input_grey:hover,
.input_grey input:hover {
    cursor: pointer;
}

.input_grey:has(input:active),
.input_grey:has(input:focus),
.input_grey:hover {
    border-bottom: 1px solid var(--b-c--black);
    padding: 0;
}
.input_grey:has(input:active) input,
.input_grey:has(input:focus) input,
.input_grey:hover input {
    /* border-bottom: 1px solid var(--b-c--black); */
    padding: 26px 20px 13px 20px;
}

.input_grey:has(input:active) span,
.input_grey:has(input:focus) span,
.input_grey:hover span {
    position: absolute;
    top: 8px;
    left: 20px;
    font: var(--param--txt--input-active);
}

.dgrd_gradient-grey {
    background: linear-gradient(90deg, #ECECEC -4.13%, #EDEDED 52.41%, #EBEBEB 98.67%);
}

.load-spinner_wrapper {
    position: fixed;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffffd7;
    display: flex;
    align-items: center;
}

.load-spinner_wrapper .load-spinner {
    display: block;
    margin: auto;
    transition: all 3s ease;
    max-width: 30%;
    max-width: min(200px, 30%);
    width: 100%;
    -webkit-animation: loading-spinner 3s infinite linear;
    -moz-animation: loading-spinner 3s infinite linear;
    -o-animation: loading-spinner 3s infinite linear;
    animation: loading-spinner 3s infinite linear;
}

.load-spinner svg {
    width: 100%;
    height: auto;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--b-c--white);
    font-family: 'Averta CY', sans-serif;
    font-weight: 400;
    color: var(--b-c--black);
    max-width: 100vw;
    overflow-x: hidden;
    vertical-align: bottom;
    min-height: 100vh;
    position: relative;
}

body.scroll-lock {
    max-height: 100vh;
    overflow: hidden;
}

section {
    width: 100%;
    padding: 60px 0 20px 0;
    overflow: hidden;
}

.visually-hidden {
    position: absolute;
    left: -200vw;
}

.ttl {
    font: var(--param--ttl--main);
    color: var(--b-c--black);
    display: inline-block;
    margin-bottom: 40px;
    width: 100%;
}

.txt-big {
    font: var(--param--ttl--main);
    color: var(--b-c--grey);
}

.txt-big span {
    font: var(--param--ttl--main);
    color: var(--b-c--red-txt);
}

h3 {
    font-weight: 600;
}

.container {
    width: 100%;
    max-width: 1440px;
    padding-left: var(--padding--side);
    padding-right: var(--padding--side);
    margin-left: auto;
    margin-right: auto;
}

.container-600 {
    max-width: calc(634px + var(--padding--side) + var(--padding--side));
    margin: auto;
    padding-left: var(--padding--side);
    padding-right: var(--padding--side);
}

.txt-grey2 {
    color: var(--b-c--grey2);
}

/* header menus styles */
header {
    position: sticky;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    padding: 8px 0 8px 0;
    z-index: 999;
    transition: all 0.6s ease;
    /* box-shadow: var(--box-shadow); */
    background-color: var(--b-c--white);
}

header .container {
    /* position: relative; */
    display: flex;
    justify-content: space-between;
}

.header_socials {
    display: flex;
    gap: 16px;
    align-items: center;
}
.header_socials a,
.header_socials img {
    width: 24px;
    height: 24px;
}

.header_socials a:hover {
    cursor: pointer;
}


.header_socials a:hover path:first-child,
.header_socials a:hover rect {
    transition: all .3s ease;
    fill: var(--b-c--black);
}

.header_contacts {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 28px;
}

.header_contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    font: var(--param--txt--phn);
    color: var(--b-c--grey);
    gap: 12px;
}

.header_contact:hover {
    cursor: pointer;
    filter: brightness(0%);
}

.header_contact::before {
    content: " ";
    height: 28px;
    width: 28px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.header_contact-phn::before {
    background-image: url("/img/icons/system/Phone-call.svg");
}

.header_contact-mail::before {
    background-image: url("/img/icons/system/Mail.svg");
}

footer details summary {
    padding: 20px 0 0 0;
}

.header_logo img {
    width: var(--b-s--logo);
    height: var(--b-s--logo);
}

.btn-recs {
    font-size: 12px;
    color: var(--b-c--grey);
    background-color: var(--b-c--VLgrey);
    padding: var(--padding--input-adaptive);
}

/* footer styles */

footer {
    background-color: var(--param--footer--bgrd);
    margin-top: 4rem;
    padding: 30px 0 4rem 0;
    /* margin: max(4rem, 23%) 0 0 0; */
    margin: clamp(4rem, 4rem, 20%) 0 0 0;
    /* position: sticky; */
    /* bottom: 0; */
    /* top: 100%; */
    position: relative;
}

footer .container {
    display: flex;
    flex-direction: column;
}

footer .footer_socials {
    display: flex;
    flex-wrap: nowrap;
    gap: 22px;
    margin: 20px auto 14px 0;
}

footer .footer_links {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

footer .footer_contacts {
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: space-between;
    border-top: 1px solid var(--b-c--Lgrey);
    padding-top: 30px;
}

footer a {
    margin-bottom: 14px;
    color: var(--b-c--black);
}

footer h3 {
    font-size: var(--fs--ttl--sub);
    margin-bottom: 14px;
}

footer .footer_row {
    gap: 6%;
}

footer .footer_tel {
    font-size: var(--fs--phn);
    font: 600 var(--fs--phn)/1.2 'Averta CY', sans-serif;
}

footer .footer_info {
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
}

footer .accordeon-onlymob {
    border-bottom: 1px solid var(--b-c--Lgrey);
}

footer .accordeon-onlymob div {
    padding-bottom: 20px;
}

.copyright {
    color: var(--b-c--grey);
    font-size: 12px;
}

input[type="date"] {
    padding-right: 0 !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background-color: var(--b-c--white);
    background: url('../img/Icon\ S/System/Calendar.svg'), no-repeat;
    background-size: contain;
    border-width: 0;
}

/* btns styles */
.btn-slider {
    /* border: 1px solid var(--b-c--grey2); */
    border-radius: 100%;
    padding: 8px;
    box-shadow: var(--box-shadow);
}

.btn-slider:hover {
    /* border: 1px solid var(--b-c--Dgrey); */
    /* background: var(--b-g--dark-gradient); */
    background-color: var(--b-c--white);
}

.btn-slider:focus,
.btn-slider:active {
    background-color: transparent;
}

.btn {
    font-size: var(--fs--btn);
    padding: var(--padding--input);
    border-radius: 8px;
    text-wrap: nowrap;
    transition: all .3s ease;
}

.btn-txt {
    width: fit-content;
    height: fit-content;
    text-wrap: nowrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font: 400 14px/18px 'Averta CY', sans-serif;
    color: var(--b-c--grey);
}

.btn-cube {
    font-size: var(--fs--btn);
    padding: var(--padding--btn-cube);
    border-radius: 8px;
    text-wrap: nowrap;
    transition: all .3s ease;
}

.btn-m {
    font-size: var(--fs--btn);
    padding: var(--padding--btn-m);
    border-radius: 8px;
    text-wrap: nowrap;
    transition: all .3s ease;
}

.btn-dwld {
    max-width: fit-content;
}

button:disabled,
.btn:disabled {
    background-color: var(--param--btn--disabled) !important;
    color: var(--b-c--grey) !important;
}

.btn-back {
    display: flex;
    align-items: center;
    position: fixed;
    top: 20px;
    left: var(--padding--side);
    z-index: 999;
}

.btn-dwld::before,
.btn-copy::after,
.btn-copy::before,
.btn-back::before,
.btn-info::after,
.btn-info::before,
.btn-cert::after,
.btn-cert::before {
    vertical-align: middle;
}

.btn-grey.btn-dwld::before,
.btn-grey.btn-copy::after,
.btn-grey.btn-copy::before,
.btn-grey.btn-back::before,
.btn-grey.btn-info::after,
.btn-grey.btn-info::before,
.btn-grey.btn-cert::after,
.btn-grey.btn-cert::before {
    filter: invert(1);
}

.btn-back::after {
    margin: 2px auto auto 0;
}

.btn::before {
    margin-right: 10px;
}

.btn::after {
    margin-left: 10px;
    height: var(--b-s--icon);
    width: var(--b-s--icon);
}

.btn-copy::before {
    content: url('../img/icons/System/Copy.svg');
}

.btn-dwld::before {
    content: url('../img/icons/System/Download.svg');
}

.btn-grey {
    background-color: var(--b-c--Dgrey);
    color: var(--b-c--white);
}

.btn-grey:hover {
    background-color: var(--b-c--black);
}

.btn-grey:focus,
.btn-grey:active {
    background-color: var(--b-c--Dgrey);
}

.btn-lgrey {
    background-color: var(--b-c--VLgrey);
    color: var(--b-c--black);
}


.btn-back::before {
    content: url(../img/icons/Navigation/Back.svg);
}

.btn-cert::after {
    content: url(../img/icons/Poduct/File.svg);
}

.btn-info::after {
    content: url(../img/icons/Poduct/Info.svg);
}

.btn-print::before {
    content: url(../img/icons/System/Printer.svg);
}

.btn-share::before {
    content: url(../img/icons/System/Share.svg);
}

.btn-brdr {
    border: 1px solid var(--b-c--Dgrey);
    border-radius: 8px;
    color: var(--b-c--Dgrey);
}

.btn-lgrey:hover,
.btn-brdr:hover {
    background-color: var(--b-c--Dgrey);
    color: var(--b-c--white);
}

.btn-lgrey:active,
.btn-lgrey:focus {
    background-color: var(--b-c--Lgrey);
}

.btn-brdr:active,
.btn-brdr:focus {
    /* background-color:x ; */
}

.btn-lgrey:hover img,
.btn-brdr:hover img,
.btn-lgrey:hover::before,
.btn-brdr:hover::before,
.btn-lgrey:hover::after,
.btn-brdr:hover::after {
    filter: invert(100%);
}

.btn-buy {
    padding: 9px 9px 9px 9px;
    background-color: var(--b-c--Dgrey);
    border-radius: 100%;
    width: 36px;
    height: 36px;
    fill: var(--b-c--white);
}

.btn-buy svg {
    width: 18px;
    height: 18px;
}

.btn-buy:hover {
    background-color: var(--b-c--black);
}

.select-unbrdr,
.select-brdr {
    /* padding: 5px 17px; */
    font-size: var(--fs--txt-m);
}

.select-brdr {
    border: 1px solid var(--b-c--grey2);
    border-radius: 8px;
    color: var(--b-c--Dgrey);
}

label.input-underline:has(input:required) span::after {
    content: '*';
    display: block;
    color: var(--b-c--red-error);
}

label.input-underline:has(input:required):has(input:disabled) span::after {
    content: '';
}

.input-underline {
    position: relative;

}

label.input-underline {
    position: relative;
    border-bottom: 1px solid var(--b-c--grey2);
    padding: var(--padding--input-nulled);
    transition: all .3s ease;
}

label.input-underline span {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 100%;
    color: var(--b-c--grey);
    transition:
        top 0.3s ease,
        color 0.3s ease,
        font-size 0.3s ease;
}

label.input-underline input {
    border: none;
    width: 100%;
}

label.input-underline:hover,
label.input-underline:focus {
    border-bottom: 1px solid var(--b-c--Dgrey);
}

label.input-underline:hover span,
label.input-underline:focus span {
    transform: translateY(-20px) translateX(-8px) scale(80%);
}

label.input-underline.--checked span {
    transform: translateY(-20px) translateX(-12px) scale(80%);
}

.input-underline.field_promocode span {
    top: 20px;
}
label.input-underline.field_promocode .btn-lgrey {
    display: flex;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
}

label.input-underline.field_promocode:hover .btn-lgrey,
label.input-underline.field_promocode:focus .btn-lgrey {
    background-color: var(--b-c--Dgrey);
    filter: grayscale(100%);
}

label.input-underline.field_promocode:hover .btn-lgrey path,
label.input-underline.field_promocode:focus .btn-lgrey path {
    stroke: var(--b-c--white);
}

#resetPromocode {
    display: none;
}

label.input-underline.field_promocode:hover #resetPromocode,
label.input-underline.field_promocode:focus #resetPromocode {
    display: block;
}

label.input-underline.field_promocode.--isValid #resetPromocode,
label.input-underline.field_promocode:has(input.--isValid) #resetPromocode {
    display: none;
}


label.input-underline.field_promocode.--isValid .btn-lgrey,
label.input-underline.field_promocode:has(input.--isValid) .btn-lgrey {
    content: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6L18 18" stroke="%23202020" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}


label.input-underline.field_promocode.--isValid::after,
label.input-underline.field_promocode:has(input.--isValid)::after {
    top: 20px;
    right: 42px;
}

select {
    /* Reset */
    appearance: none;
    border: 1px solid var(--b-c--Lgrey);
    outline: 0;
    font: inherit;
    /* Personalize */
    width: 20rem;
    padding: var(--padding--input);
    background: url('../img/icons/Navigation/Down.svg') no-repeat right 0.8em center;
    color: var(--b-c--Dgrey);
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--fs--txt-m);
    max-width: 100%;
}

select option {
    color: var(--b-c--Dgrey);
    background-color: var(--b-c--white);
}

select.select-clean {
    border: none;
}

label.radio-boxed-o,
label.radio-boxed-s,
label.radio-boxed-m,
label.radio-boxed-l {
    position: relative;
    display: inline-block;
    border: solid 1px var(--b-c--Lgrey);
    border-radius: 8px;
    transition: all 0.3s;
    font: var(--param--txt--radiobox);
}

label.radio-boxed-o input[type="radio"],
label.radio-boxed-s input[type="radio"],
label.radio-boxed-m input[type="radio"],
label.radio-boxed-l input[type="radio"] {
    display: none;
}

label.radio-boxed-o:has(input[type="radio"]:checked),
label.radio-boxed-s:has(input[type="radio"]:checked),
label.radio-boxed-m:has(input[type="radio"]:checked),
label.radio-boxed-l:has(input[type="radio"]:checked) {
    border: solid 1px var(--b-c--Dgrey);
}

label.radio-boxed-o {
    padding: 0;
}

label.radio-boxed-s {
    padding: var(--padding--radio-s);
}

label.radio-boxed-m {
    padding: var(--padding--radio-m);
}

label.radio-boxed-l {
    padding: var(--padding--radio-l);
}

.radio-boxed_content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: left center;
    gap: 2px;
    color: var(--b-c--Dgrey);
}

.radio-boxed_content span:nth-child(2) {
    color: var(--b-c--grey2);
}

label.--locked {
    display: flex;
}

label.--locked::after {
    content: url('../img/icons/System/lock.svg');
    transform: scale(.8);
    opacity: .5;
}

input:disabled {
    color: var(--b-c--grey2);
}

.payment_method--cards::after,
.payment_method--dolyame::after,
.payment_method--split::after {
    position: absolute;
    display: flex;
    top: 0;
    bottom: 0;
    right: 12px;
    align-items: center;
    vertical-align: middle;
}

.payment_method--cards::after {
    content: url('../img/icons/Cards\ logo.svg');
}

.payment_method--dolyame::after {
    content: url('../img/icons/Dolyame\ logo.svg');
}

.payment_method--split::after {
    content: url('../img/icons/Split\ logo.svg');
}

.radio-boxed-l.payment_method--cards {
    min-height: 65px;
    display: flex;
    align-items: center;
}

.emoji-64 {
    height: 64px;
    width: fit-content;
}

.emoji-40 {
    height: 40px;
    width: fit-content;
}



.loyalty-points::before {
    content: url('../img/icons/Point.svg');
    margin-right: 5px;
}

.bnpl-info {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 20px 0;
}

.bnpl-payment {
    display: flex;
    flex-direction: column;
    padding-top: 6px;
    gap: 4px;
    border-top: 3px solid var(--b-c--Lgrey);
}

.bnpl-payment:nth-child(1) {
    border-top: 3px solid var(--b-c--Dgrey);
}

input[type="file"] {
    padding: var(--padding--input);
    border: 1px dashed var(--b-c--grey);
    clip: rect(0, 0, 0, 0);
    border-radius: 8px;
}

input[type="checkbox"] {
    accent-color: var(--b-c--black);
    width: var(--b-s--checkbox);
    height: var(--b-s--checkbox);
}

label:has(input[type="checkbox"]) {
    display: flex;
    vertical-align: middle;
    gap: 8px;
}

label:has(input[type="checkbox"]) span {
    margin: auto auto auto 0;
    line-height: 100%;
}

.form_row,
.form_col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.form_row label {
    width: 100%;
}

.form_row .btn {
    margin: auto 0 auto 0;
}

label.field_promocode,
label.input-city {
    display: flex;
    width: 100%;
    padding-bottom: 2px;
    padding-right: 2px;
}

label.field_promocode {
    margin-top: 40px;
}

label.field_promocode input,
.input-city input {
    width: 100%;
}

label.switch {
    position: relative;
}

label.switch {
    width: 36px;
    height: 21px;
    background-color: var(--b-c--grey);
    border-radius: 50px;
    transition: all .3s ease;
}

label.switch:has(input[disabled]) {
    background-color: var(--b-c--grey2);
}

label.switch input[type="checkbox"] {
    visibility: hidden;
}

label.switch:after {
    content: ' ';
    line-height: 0%;
    display: flex;
    width: 17px;
    height: 17px;
    border-radius: 100%;
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: auto;
    transition: all .3s ease;
    background-color: var(--b-c--white);
    border: none;
}

label.switch:has(input[type="checkbox"]:checked):after {
    left: auto;
    right: 2px;
}

label.switch:has(input[type="checkbox"]:checked) {
    background-color: var(--b-c--Dgrey);
}

.--hidden {
    display: none !important;
}

.row,
.col,
.col-popup {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 12px;
}

.col-popup {
    gap: 30px;
}

.row {
    flex-direction: row;
}

.popup-container {
    position: fixed;
    /* display: flex; */
    top: 0;
    left: 0;
    right: 0;
    background-color: #000000ce;
    height: 100vh;
    z-index: 9999;
    overflow-y: scroll;
}

.popup-container.--hide {
    display: none;
}

.popup {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 790px;
    margin: 120px auto auto auto;
    padding: 44px 32px 44px 32px;
    background-color: var(--b-c--white);
    border-radius: 8px;
}

.popup-container.popup-container-bottom {
    top: auto;
    bottom: 0;
    height: fit-content;
    background-color: var(--b-c--white);
}

.popup-container-bottom .popup {
    margin: 20px auto;
    max-width: 1440px;
    padding: 12px var(--padding--side);
}

.popup .btn {
    width: 100%;
    text-align: center;
}

.popup_ttl {
    font: 600 22px/1.2 "Averta CY", sans-serif;
    margin: 40px auto;
}
.popup-container-bottom .ttl {
    margin: 0;
}
.code_popup {
    position: relative;
    max-width: 600px;
    margin: 90px auto auto auto;
    padding: 90px var(--padding--side) 60px var(--padding--side);
    background-color: var(--b-c--white);
    border-radius: 8px;
}

.popup_btn-close {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 6L6 18M6 6L18 18' stroke='%23202020' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 12px;
    border-radius: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
}

.code_input {
    border-bottom: 1px solid var(--b-c--grey);
    text-align: center;
    font-size: 22px;
}

.code_popup .popup_btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    color: var(--b-c--red);
    z-index: 1;
}

.code_popup-wrapper.--closed {
    display: none;
}
/* styles for filter */
.price-input {
    width: 100%;
    display: flex;
    margin: 30px 0 35px;
    justify-content: space-between;
    gap: 20px;
}

.price-input .field {
    display: flex;
    width: 100%;
    height: 45px;
}

.field input {
    width: 100%;
    height: 100%;
    outline: none;
    font-size: 14px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--b-c--grey);
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="radio"] {
    accent-color: var(--b-c--black);
    width: var(--b-s--checkbox);
    height: var(--b-s--checkbox);
}

label.input-radio {
    display: flex;
    align-items: center;
    gap: 5px;
}

label.input-radio input {
    order: -1;
}

.slider {
    height: 24px;
    position: relative;
    background: var(--b-c--Lgrey);
    border-radius: 24px;
    /* border: 1px solid var(--b-c--grey); */
    overflow: hidden;
}

.slider .progress {
    height: 100%;
    left: 0%;
    right: 0%;
    position: absolute;
    border-radius: 12px;
    background: var(--b-c--VDgrey);
}

.range-input {
    position: relative;
}

.range-input input {
    position: absolute;
    /* width: 100%; */
    height: 5px;
    top: -15px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.range-input input:first-child {
    left: 0;
    right: -12px;
}

.range-input input:last-child {
    left: -12px;
    right: 0;
}

input[type="range"]::-webkit-slider-thumb {
    height: 24px;
    width: 24px;
    border-radius: 100%;
    background: var(--b-c--white);
    pointer-events: auto;
    -webkit-appearance: none;
    /* box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); */
    border: 3px solid var(--b-c--VDgrey);
    /* padding: 3px; */
}

input[type="range"]::-moz-range-thumb {
    height: 12px;
    width: 12px;
    border: 3px solid var(--b-c--VDgrey);
    border-radius: 100%;
    background: var(--b-c--white);
    pointer-events: auto;
    -moz-appearance: none;
    /* box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); */
    border: 3px solid var(--b-c--Dgrey);
    padding: 3px;
}

.txt-green {
    color: var(--b-c--green)
}

.txt-red {
    color: var(--b-c--red-error);
}

.txt-red-brand {
    color: var(--b-c--red)!important;
}

#indexPage {
    margin-top: -80px;
}

label.input-underline.--isValid::after,
label.input-underline:has(input.--isValid)::after,
label.input-underline.--isValid-req::after,
label.input-underline:has(input.--isValid-req)::after {
    position: absolute;
    /* top: 0px; */
    right: 0;
    content: url('../img/icons/Poduct/Check.svg');
    width: 24px;
    height: 24px;
    z-index: 1;
}


label.input-underline.--invalid span,
label.input-underline:has(input.--invalid) span,
label.input-underline.--invalid-req span,
label.input-underline:has(input.--invalid-req) span {
    content: "ошибка";
    color: var(--b-c--red-error);
}

/* label.input-underline.--invalid span::after,
label.input-underline:has(input.--invalid) span::after, */
label.input-underline.--invalid-req span::after,
label.input-underline:has(input.--invalid-req) span::after {
    content: "обязательно";
    color: var(--b-c--red-error);
}

label.input-underline.--invalid,
label.input-underline:has(input.--invalid),
label.input-underline.--invalid-req,
label.input-underline:has(input.--invalid-req) {
    border-bottom: 1px solid var(--b-c--red-error);
}

label.input-underline.--invalid-req::after,
label.input-underline:has(input.--invalid-req)::after {
    content: "обязательно";
}


label.input-underline.--invalid span::after,
label.input-underline:has(input.--invalid) span::after {
    /* label.input-underline.--invalid span::after{ */
    content: "ошибка";
}

ol.round {
    list-style-type: none;
    counter-reset: num;
    margin: 0 0 0 36px;
    padding: 0px 0 5px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

ol.round li {
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

ol.round li:before {
    background-color: var(--b-c--Dgrey);
    border-radius: 100%;
    content: counter(num);
    counter-increment: num;
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 3px;
    left: -36px;
    width: 24px;
    height: 24px;
    color: var(--b-c--white);
    font-size: 16px;
    line-height: 1.4;
}

details {
    font: var(--param--txt--spoiler);
    border-bottom: 1px solid #E4E4E4;
}

details summary {
    width: 100%;
    position: relative;
    cursor: pointer;
    list-style: none;
    font: var(--param--ttl--spoiler);
    padding: 0 64px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    -webkit-user-select: none;
    user-select: none;
}

details[open] {
    padding: 0 0 16px 0;
}

details[open] summary {
    padding: 0 64px 8px 0;
}

details[open] summary~* {
    animation: open 0.3s ease-in-out;
    -webkit-user-select: none;
    user-select: none;
}

@keyframes open {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

details summary:after {
    content: "";
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L11.9293 14.9293C11.9683 14.9683 12.0317 14.9683 12.0707 14.9293L18 9' stroke='%23202020' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: black;
    position: absolute;
    right: 0;
    top: 0px;
    transform-origin: center;
    /* transition: 200ms linear; */
}

details[open] summary:after {
    transform: rotate(180deg);
}
.bgrd-grey {
    background-color: var(--b-c--VLgrey);
}
@media (max-width: 600px) {
    .only-desk {
        display: none;
    }
}

@media (min-width: 600px) {
    header {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    header>.container {
        position: relative;
    }

    .popup-container-bottom .popup {
        display: grid;
        grid-template-columns: 1fr 160px;
    }
}

@media (min-width: 768px) {
    section {
        padding: var(--padding--side) 0;
    }
    .ttl {
        margin-bottom: 80px;
    }
}

@media (min-width: 1023px) {
    header {
        /* background-color: var(--b-c--white);
        position: sticky;
        z-index: 1001;
        box-shadow: var(--box-shadow);
        padding: 0; */
    }

    .only-mob {
        display: none !important;
    }
}

@media (min-width: 1440px) {
    /* .container {
        padding-left: 80px;
        padding-right: 80px;
    } */
}

@media (min-width: 1441px) {
    /* .container {
        max-width: 1440px;
    } */
}

/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader {
    content: ' ';
    color: #fff;
    position: relative;
    height: 50px;
}

.loader::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: ' ';
    height: 4px;
    width: 100%;
    --c: no-repeat linear-gradient(var(--b-c--Dgrey) 0 0);
    background: var(--c), var(--c), var(--b-c--grey);
    background-size: 60% 100%;
    animation: l16 3s infinite;
}

@keyframes l16 {
    0% {
        background-position: -150% 0, -150% 0
    }

    66% {
        background-position: 250% 0, -150% 0
    }

    100% {
        background-position: 250% 0, 250% 0
    }
}

@keyframes l14 {
    100% {
        background-position: right, left, center, right
    }
}