*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Переменные, шрифты, UI kit */

/* 
700 - Bold
600 - SemiBold / Demi
500 - Medium
400 - Regular
*/

a{
  cursor: pointer;
}

/* Craftwork Grotesk */
@font-face {
    font-family: "Craftwork Grotesk";
    src: local("Craftwork Grotesk Bold"),
      url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"),
      url("../fonts/craftwork/CraftworkGrotesk-Bold.woff") format("woff"),
      url("../fonts/craftwork/craftwork-grotesk-bold.ttf") format("ttf");
    font-weight: 700;
}
@font-face {
    font-family: "Craftwork Grotesk";
    src: local("Craftwork Grotesk SemiBold"),
      url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"),
      url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff") format("woff"),
      url("../fonts/craftwork/craftwork-grotesk-semi-bold.ttf") format("ttf");
    font-weight: 600;
}
@font-face {
    font-family: "Craftwork Grotesk";
    src: local("Craftwork Grotesk Medium"),
      url("../fonts/craftwork/CraftworkGrotesk-Medium.woff2") format("woff2"),
      url("../fonts/craftwork/CraftworkGrotesk-Medium.woff") format("woff"),
      url("../fonts/craftwork/craftwork-grotesk-medium.ttf") format("ttf");
    font-weight: 500;
}
@font-face {
    font-family: "Craftwork Grotesk";
    src: local("Craftwork Grotesk Regular"),
      url("../fonts/craftwork/CraftworkGrotesk-Regular.woff2") format("woff2"),
      url("../fonts/craftwork/CraftworkGrotesk-Regular.woff") format("woff"),
      url("../fonts/craftwork/craftwork-grotesk-regular.ttf") format("ttf");
    font-weight: 400;
}
/* Craftwork Grotesk */

/* din 2014 */
@font-face {
    font-family: "DIN 2014 Rounded";
    src: local("DIN 2014 Rounded Demi"),
      url("../fonts/din-2014/din-2014-rounded-demi.woff2") format("woff2"),
      url("../fonts/din-2014/din-2014-rounded-demi.woff") format("woff"),
      url("../fonts/din-2014/din-2014-rounded-demi.ttf") format("ttf");
    font-weight: 600;
}
@font-face {
    font-family: "DIN 2014 Rounded";
    src: local("DIN 2014 Rounded Regular"),
      url("../fonts/din-2014/din-2014-rounded-regular.woff2") format("woff2"),
      url("../fonts/din-2014/din-2014-rounded-regular.woff") format("woff"),
      url("../fonts/din-2014/din-2014-rounded-regular.ttf") format("ttf");
    font-weight: 400;
}
/* din 2014 */

/* roboto */
@font-face {
    font-family: "Roboto";
    src: local("Roboto Medium"),
      url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"),
      url("../fonts/roboto/Roboto-Medium.woff") format("woff"),
      url("../fonts/roboto/roboto-medium.ttf") format("ttf");
    font-weight: 500;
}
@font-face {
    font-family: "Roboto";
    src: local("Roboto Regular"),
      url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"),
      url("../fonts/roboto/Roboto-Regular.woff") format("woff"),
      url("../fonts/roboto/roboto-medium.ttf") format("ttf");
    font-weight: 400;
}
/* roboto */

/* Глобальные переменные: */

:root {
    /* fonts */
    --font-family: "Craftwork Grotesk", sans-serif;
    --second-family: "DIN 2014 Rounded", sans-serif;
    --third-family: "Roboto", sans-serif;

    /* color */
    /* text */
    --text-white: #fff;
    --text-black: #121212;
    --text-dark: #2b2b3b;
    --text-grey: #999;
    --text-red: #fa0505;
    --text-green: #2ED15D;
    --text-0: #000;
    --text-3: #333;
    --text-6: #666;
    --text-9: #999;

    /* background */
    --background-white: #fff;
    --background-black: #121212;
    --background-grey: #f2f2f2;
    --background-green: #2ED15D;
    --background-green-white: #f4fff0;
    --background-9: #999;


    /* gradient */
    --gradient-blue: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(15, 88, 129) 0%, rgb(30, 164, 156) 51.21689438819885%, rgb(118, 206, 117) 80.70731163024902%, rgb(236, 243, 159) 91.14583134651184%);
    --gradient-turquoise: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(117, 196, 240) 0%, rgb(126, 231, 225) 51.21689438819885%, rgb(181, 228, 180) 80.70731163024902%, rgb(237, 244, 164) 91.14583134651184%);
    --gradient-red: linear-gradient(22deg, #f44242 0%, #569ef0 100%);
} 


/* общие */
button{
  cursor: pointer;
}

.wrapper{
  margin: 0 auto;

  max-width: 1600px;
}

/* компоненты */

/* lang*/
.lang{
  position: relative;
}
.lang__open{
  padding: 12px 15px;

  width: 74px;

  background: none;
  border: none;

  display: flex;
  align-items: center;

  transition: opacity .2s ease-out;
}
.lang__open:hover{
  opacity: .8;
}
.lang-open p{
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 125%;

  text-align: start;
  
  color: var(--text-black);
}
.lang-open__arrow{
  margin-left: 7.25px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.lang-open__black{

}
.lang-open__white{
  display: none;
}
.lang__content{
  position: absolute;
  top: 33px;
  left: -13px;

  height: 0;

  border-radius: 6px;

  transition: height .2s ease-out;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;

  background-color: var(--background-white);

  z-index: 100;
}
.lang__list{
  width: 104px;

  padding: 8px;

  list-style-type: none;
}
.lang__item{
  margin-top: 8px;
}
.lang__item:first-child{
  margin-top: 0;
}
.lang__link{
  display: block;

  width: 100%;

  padding: 4px;

  border-radius: 6px;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-dark);

  text-decoration: none;

  position: relative;

  transition: background-color .2s ease-out;
}
.lang__link:hover,
.lang__item.active .lang__link{
  background-color: var(--background-grey);
}
.lang__item.active .lang__link::before{
  content: '';

  position: absolute;
  top: 10px;
  right: 8px;

  width: 16px;
  height: 12px;

  background-image: url(../img/svg/main/arrow-selected.svg);
}
/* lang */


/* mini-profile */
.mini-profile{
  display: flex;
  align-items: center;    
}
.mini-profile__item{
  margin-left: 8px;
}
.mini-profile__item:first-child{
  margin-left: 0;
}
.mini-profile__button{
  display: block;

  padding: 8px;

  display: flex;
  justify-content: center;
  align-items: center;

  background: none;
  border: none;

  transition: opacity .2s ease-out;
}
.mini-profile__button:hover{
  opacity: .8;
}
.mini-profile__icon{
  width: 24px;
  aspect-ratio: 1;
}
.mini-profile__icon.white{
  display: none;
}
/* mini-profile */


/* main-menu */
.main-menu{
  display: flex;
  align-items: center;

  list-style-type: none;
}
.main-menu__item{
  margin-left: 24px;

  transition: opacity .2s ease-out;
}
.main-menu__item:first-child{
  margin-left: 0;
}
.main-menu__item:hover{
  opacity: .8;

  background: var(--background-grey);
  border-radius: 24px;
}
.header.white .main-menu__item:hover .main-menu__link{
  color: var(--text-black);
}
.main-menu__item:active{
  opacity: 1;
}
.main-menu__link{
  display: block;

  padding: 8px 12px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 125%;
  color: var(--text-black);

  text-decoration: none;

  transition: color .2s ease-out;
}
.main-menu__button{
  padding: 8px 32px 8px 12px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 125%;
  color: var(--text-black);

  border: none;
  border-radius: 24px;

  background: var(--gradient-turquoise);

  position: relative;
}
.main-menu__button::before{
  content: '';

  position: absolute;
  top: 14px;
  right: 14px;

  width: 13px;
  height: 8px;

  background-image: url(../img/svg/main/arrow-black.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
/* main-menu */


/* form */
.form{
  width: 100%;

  padding: 24px 24px 43px;

  display: flex;
  flex-direction: column;

  border-radius: 24px;
  background: var(--gradient-turquoise);
}
.form__item{
  margin-top: 16px;
}
.form__title{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 24px;
  line-height: 133%;
  color: var(--text-black);
}
.form__input{
  width: 100%;

  border-radius: 20px;
  padding: 12px 16px;
  border: 1px solid var(--text-black);

  background: var(--background-white);

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;

  color: var(--text-black);
}
.form__input::placeholder{
  color: var(--text-grey);
}
.form__input--grey{
  border-color: var(--background-9);
}
.form__input--textarea{
  height: 96px;
  resize: none;
}
.form__input--textarea-72{
  height: 72px;
  resize: none;

  overflow: hidden;
}
.form__input--center{
  text-align: center;
}
.form__button{
  width: 100%;

  padding: 12px 24px;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-white);

  border-radius: 16px;
  border: none;
  background: var(--background-black);

  cursor: pointer;

  transition: background-color .2s ease-out;
}
.form__button:hover{
  opacity: .8;
}

.label{
  padding-bottom: 4px;

  display: inline-block;

  position: relative;
}
.label::after{
  content: '';

  position: absolute;
  top: 2px;
  right: -20px;

  width: 16px;
  height: 16px;

  background-image: url(../img/svg/main/question.svg);

  cursor: pointer;
}
.label__title{
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 125%;
  color: var(--text-3);
}
.label__question{
  position: absolute;

  padding: 8px;

  border-radius: 6px;
  transition: height .2s ease-out;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
  background-color: var(--background-white);

  opacity: 0;
  transition: opacity .2s ease-out;
  pointer-events: none;
}
.label:hover .label__question{
  opacity: 1;
  pointer-events: auto;
}

.label-name{
  margin-bottom: 8px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 125%;
  color: var(--text-black);

  display: block;
}
.form-input__error{
  margin-top: 4px;

  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px;
  line-height: 133%;

  color: #f60909;

  display: none;

  position: relative;
}
.form-input__error--absolute{
  position: absolute;
  bottom: -19.95px;
  left: 0;

  width: 100%;
}
.modal-form__content.check .form__input:invalid{
  border-color: #f60909;
}
.modal-form__content.check .form__input:invalid + .form-input__error{
  display: block;
}
.modal-form__content.check .form-input-phone__input:invalid + .form-input__error{
  display: block;
}
.modal-form__content.check .form-input-phone__input:invalid + .form-input__error--absolute::before{
  content: '';

  position: absolute;
  top: -53px;
  left: -1px;

  width: 100%;
  height: 48px;

  border-radius: 20px;
  border: 1px solid #f60909;
}
.form-input__phone{
  padding: 12px 16px 12px ;

  display: flex;
  align-items: center;

  border-radius: 20px;
  border: 1px solid var(--text-black);

  cursor: pointer;

  position: relative;
}
.form-input__phone.focus{
  outline: 1px solid var(--text-black);
}
.form-input-phone__icon{
  flex-shrink: 0;

  height: 16px;
  width: 28px;

  background-size: 16px;
  background-repeat: no-repeat;
  background-position: left;

  position: relative;
}
.form-input-phone__icon::after{
  content: '';

  position: absolute;
  top: 4px;
  right: 0;

  width: 8px;
  aspect-ratio: 1;

  background-image: url(../img/svg/main/triangle-grey.svg);
}
.form-input-phone__code{
  flex-shrink: 0;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);
}
.form-input-phone__code::before{
  content: '+';
}
.form-input-phone__input{
  margin-left: 6px;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);

  border: none;
  outline: none;
}
.form-input-phone__list{
  position: absolute;
  top: 52px;
  left: 8px;

  width: 280px;

  z-index: 10;

  transition: opacity .2s ease-out;

  opacity: 0;
  pointer-events: none;

  border-radius: 20px;

  overflow: hidden;
}
.form-input-phone__list.active{
  opacity: 1;
  pointer-events: auto;
}
.form-input-phone-list__search{
  width: 100%;

  padding: 12px 16px;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);

  border-left: 1px solid var(--background-black);
  border-right: 1px solid var(--background-black);
  border-top: 1px solid var(--background-black);
  border-radius: 20px 20px 0 0;

  background: var(--background-white);
}
.form-input-phone-list__search::placeholder{
  color: var(--text-6);
}
.form-input-phone-list__content{
  width: 100%;
  max-height: 224px;

  padding: 24px 16px;

  border: 1px solid var(--background-black);
  border-top: none;
  border-radius: 0 0 20px 20px;

  background: var(--background-white);

  overflow-y: auto;
}
.form-input-phone-list__item{
  margin-top: 14px;

  display: flex;
  align-items: center;

  background: none;
  border: none;

  cursor: pointer;
}
.form-input-phone-list__item:first-child{
  margin-top: 0;
}
.form-input-phone-list-item__icon{
  width: 16px;
  aspect-ratio: 1;
}
.form-input-phone-list-item__name{
  margin-left: 8px;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);
}
.form-input-phone-list-item__code{
  margin-left: 8px;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);
}
.form-input-phone-list-item__code::before{
  content: '+';
}
.form-input__tabs{
  padding: 2px;

  display: flex;

  border-radius: 20px;
  background: var(--gradient-turquoise);

  position: relative;
}
.form-input__tabs--white{
  padding: 3px;
  border: 1px solid var(--text-3);
  background: var(--white);
}
.form-input__tabs--white .form-input-tabs__button.active{
  background: var(--gradient-turquoise);
}
.form-input-tabs__button{
  width: 100%;

  padding: 10px;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);
  text-align: center;

  border-radius: 18px;

  z-index: 2;

  transition: background-color .2s ease-out;
}
.form-input-tabs__button.active{
  background-color: var(--background-white);
}
.form-input-tabs__input{
  display: none;
}
.form-input__radio{
  padding: 16px;

  display: flex;
  flex-direction: column;
}
.form-input-radio__item{
  margin-top: 14px;

  display: flex;
  align-items: center;
}
.form-input-radio__item:first-child{
  margin-top: 0;
}
.form-input-radio__circle{
  padding: 2px;

  width: 20px;
  aspect-ratio: 1;

  border-radius: 50%;

  background: var(--gradient-blue);

  position: relative;
}
.form-input-radio__item.active .form-input-radio__circle::before{
  content: '';

  position: absolute;
  top: 4px;
  left: 4px;

  width: 12px;
  aspect-ratio: 1;

  border-radius: 50%;

  background: var(--gradient-blue);
}
.form-input-radio-circle__content{
  width: 16px;
  aspect-ratio: 1;

  border-radius: 50%;

  background: var(--background-white);
}
.form-input-radio__title{
  margin-left: 8px;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-dark);
}
.form-input-radio__title.form-input-radio__title--no-span span{
  color: var(--text-dark);
}
.form-input-radio__price{
  margin-left: auto;

  font-family: var(--font-family);
  font-weight: 600;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);
}
.form-input-radio__price::after{
  content: ' ₽';
}
.form-input-radio__input{
  display: none;
}
.form-input__list{
  position: relative;
}
.form-input__list::before{
  content: '';
  position: absolute;
  top: 21.5px;
  right: 19.5px;
  width: 13px;
  height: 8px;
  background-image: url(../img/svg/main/arrow-black.svg);
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.form-input-list__input{
  width: 100%;

  border-radius: 20px;
  padding: 12px 16px;
  padding-right: 40px;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);

  border: 1px solid var(--text-black);
}

.form-input-list__input::placeholder{
  color: var(--text-grey);
}
.form-input-list__block-content{
  position: absolute;
  top: 50px;
  left: 0;

  width: 100%;
  max-height: 192px;
  height: 0;

  border-radius: 20px;
  background-color: var(--background-white);

  overflow: hidden;

  transition: height .2s ease-out;

  z-index: 10;
}
.form-input-list__block-content.active{
  border: 1px solid var(--background-black);
}
.form-input-list__content{
  margin: 8px 16px;

  max-height: 176px;

  padding-right: 16px;

  overflow-y: auto;
}
.form-input-list__content::-webkit-scrollbar{
  border-radius: 8px;
  width: 4px;
  background: rgba(204, 204, 204, 0.2);
}
.form-input-list__content::-webkit-scrollbar-thumb{
  border-radius: 8px;
  background: var(--background-9);
}
.form-input-list__content
.form-input-list__item{
  margin-top: 16px;

  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;

  border-radius: 8px;
  padding: 4px;

  background: none;
  border: none;
}
.form-input-list__item:first-child{
  margin-top: 0;
}
.form-input-list__item.active{
  background: rgba(204, 204, 204, 0.2);
}
.form-input-list-item__text{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);
} 
.form-input-list-item__box{
  width: 20px;
  aspect-ratio: 1;

  padding: 2px;

  border-radius: 4px;

  background: var(--gradient-blue);
}
.form-input-list-item-box__content{
  width: 16px;
  aspect-ratio: 1;

  border-radius: 2px;

  background: var(--background-white);
}
.form-input-list__item.active .form-input-list-item-box__content{
  background: var(--gradient-blue);
}
.remote-control__item{
  display: none;
}
.remote-control__item.active{
  display: block;
}
/* .form-input-radio__ */

.form-agreement{
  display: flex;
}
.form-agreement__check{
  display: flex;
  align-items: center;
}
.form-agreement__square{
  width: 18px;
  aspect-ratio: 1;

  border-radius: 4px;

  border: 2px solid var(--background-black);
}
.form-agreement__label{
  margin-left: 8px;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);
}
.form-agreement__input{
  display: none;
}
.form-agreement__input:checked + .form-agreement__square{
  border: none;
  background: var(--gradient-blue);

  position: relative;
}
.form-agreement__input:checked + .form-agreement__square::after{
  content: '';

  position: absolute;
  top: 1px;
  left: 1px;

  width: 16px;
  aspect-ratio: 1;

  background-image: url(../img/svg/main/arrow-selected-white.svg);
  background-repeat: no-repeat;
  background-position: center;
}
/* form */


/* social media */
.social-media{
  display: flex;
  align-items: center;
}
.social-media__item{
  margin-left: 32px;

  transition: opacity .2s ease-out;
}
.social-media__item:hover{
  opacity: .8;
}
.social-media__item:first-child{
  margin-left: 0px;
}
.social-media__icon{
  width: 32px;
  aspect-ratio: 1;
}
/* social media */


/* breadcrumbs */
.breadcrumbs{
  margin: 24px;

  display: flex;
  align-items: center;
}
.breadcrumbs__item{
  display: block;

  padding: 0px 16px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 125%;
  color: var(--text-6);

  text-decoration: none;

  position: relative;
}
.breadcrumbs__item:first-child{
  padding-left: 0;
}
.breadcrumbs__item:nth-child(n+2)::before{
  content: '';

  position: absolute;
  top: -2px;
  left: -12px;

  width: 24px;
  aspect-ratio: 1;

  background-image: url(../img/svg/main/arrow-breadcrumbs.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
/* breadcrumbs */

/* compound */
.compound{
  margin: -5px;

  min-height: 33.95px;

  display: flex;
  align-items: start;
}
.compound__item{
  margin: 5px;

  padding: 4px 8px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  line-height: 133%;
  color: var(--text-black);

  border-radius: 16px;
  background-color: var(--background-white);

  display: block;
  text-decoration: none;
}
.compound__item:first-child{
  margin-left: 0;
}
.product__footer{
  margin: 48px 24px 24px;

  display: flex;
  justify-content: center;
}
.product__footer--error{
  margin: 45px 0;
}
/* compound */

/* button */
.button{
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);

  border-radius: 20px;

  cursor: pointer;
}
.button--100-perc{
  width: 100%;
}
.button--white{
  padding: 11px 24px;
  
  text-align: center;

  background-color: var(--background-white);
  border: 1px solid var(--background-black);

  transition: opacity .2s ease-out;
}
.button--white:hover{
  opacity: .8;
}
.button--white.active{
  background: var(--background-black);
  color: var(--background-white);
}
.button--gradient{
  background: var(--gradient-turquoise);
  border: none;

  transition: opacity .2s ease-out;
}
.button--gradient:hover{
  opacity: .8;
}
.button--base{
  padding: 12px 24px;
}
.button--high{
  height: 56px;

  padding: 16px 24px 24px 24px;

  font-weight: 700;
  text-align: center;

  position: relative;
}
.button--high-46{
  padding: 12px 24px;

  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
.button--icon{
  padding-right: 56px;

  text-align: start;
}
.button--filter::after{
  content: '';

  position: absolute;
  top: 16px;
  right: 24px;

  width: 24px;
  aspect-ratio: 1;

  background-image: url(../img/svg/main/filter.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.button--black{
  padding: 7px 15px;

  font-family: var(--font-family);
  font-weight: 500;
  font-size: 24px;
  line-height: 133%;
  color: var(--text-white);

  background: var(--background-black);
  border: 1px solid var(--text-white);
}
.button--link{
  text-decoration: none;
}
.button--red-48-px{
  border-radius: 48px;
}
.to-know{
  /* width: 100%; */

  padding: 12px 24px 7px 24px;

  display: flex;
  justify-content: center;

  border: none;

  transition: opacity .2s ease-out;
  text-decoration: none;
}

.to-know--start{
  justify-content: start;
  padding-left: 0;
}

.to-know:hover{
  opacity: .8;
}
.to-know p{
  padding-bottom: 4px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);

  border-bottom: 1px var(--text-black) solid;

  cursor: pointer;
}
.to-know--background-none{
  background: none;
}
.back{
  margin-top: 16px;
  margin-left: 16px;

  padding: 8px;
  padding-left: 32px;

  background: none;
  border: none;

  font-family: var(--font-family);
  font-weight: 600;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);

  text-decoration: none;

  position: relative;
}
.back::before{
  content: '';

  position: absolute;
  top: 8px;
  left: 0;

  margin-right: 8px;

  width: 24px;
  height: 24px;

  background-image: url(../img/svg/main/arrow-back.svg);
}

.back::after{
  content: '';

  position: absolute;
  bottom: 6px;
  left: 0;

  width: calc(100% - 8px);
  height: 1px;

  background: var(--text-black);
}
/* button */

/* select */
.select{
  max-width: 144px;

  position: relative;
}
.select__state{
  width: 100%;

  padding: 11px 47px 11px 13px;

  /* pointer-events:none; */

  border: 1px solid var(--background-black);
  border-radius: 20px;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);

  cursor: pointer;

  position: relative;

  transition: opacity .2s ease-out;
}
.select:hover .select__state{
  opacity: .8;
}
.select::after{
  content: '';

  position: absolute;
  top: 20.5px;
  right: 21.5px;

  width: 17px;
  height: 10px;

  background-image: url(../img/svg/main/arrow-black.svg);
  background-repeat: no-repeat;
  background-size: contain;

  pointer-events: none;
}
.state__block{
  position: absolute;
  top: 48px;
  left: 0;

  width: 100%;

  height: 0;
  overflow: hidden;

  transition: height .2s ease-out;
}
.state__content{
  padding: 8px;

  border-radius: 6px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2);
  background-color: var(--background-white);

  list-style-type: none;
}
.state__content li{
  margin-top: 8px;
}
.state__content li:first-child{
  margin-top: 0;
}
.state__button{
  width: 100%;

  padding: 4px 32px 4px 4px;

  background: none;
  border: none;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-dark);
  text-align: start;

  border-radius: 6px;

  transition: background-color .2s ease-out;

  position: relative;
}
.state__button:hover,
.state__button.active{
  background-color: var(--background-grey);
}

.state__button.active::before{
  content: '';
  position: absolute;
  top: 10px;
  right: 8px;
  width: 16px;
  height: 12px;
  background-image: url(../img/svg/main/arrow-selected.svg);
}

/* select */

/* counter */
.counter{
  display: flex;
  align-items: center;
}
.counter__input{
  width: 48px;

  font-family: var(--font-family);
  font-weight: 600;
  font-size: 20px;
  line-height: 120%;
  text-align: center;
  color: var(--text-black);

  pointer-events: none;

  background: none;
  border: none;
}
.counter__button{
  width: 48px;
  height: 48px;

  display: flex;
  justify-content: center;
  align-items: center;

  border: 1px solid var(--text-3);
  border-radius: 24px;

  background: var(--background-white);

  transition: opacity .2s ease-out;
}
.counter__button:hover{
  opacity: .8;
}
.counter--small{

}
.counter--small .counter__button{
  width: 32px;
  height: 32px;
}
.counter--small{
  
}
/* counter */

/* modal */
.modal{
  position: fixed;
  top: 0;
  left: 0;

  padding: 20px;

  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.25);

  z-index: 200;

  opacity: 0;
  transition: opacity .2s ease-out;
  pointer-events: none;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow-y: auto;
}
.modal.active{
  opacity: 1;
  pointer-events: auto;
}
.modal__notification{}
.form__button-mobile{
  display: none;
}
.modal__aside{
  position: fixed;
  top: 0;
  right: 0;

  width: 0;
  height: 100%;

  overflow: hidden;
  transition: width .4s ease-out;
}
.modal__item{
  height: 100%;

  padding: 24px;

  background: var(--background-white);

  position: relative;

  display: none;
  
  filter: blur(10px);
  transition: filter .2s ease-out;
}
.modal__item--no-title{
  padding-top: 72px;
}
.modal__item.active{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.modal__close{
  position: absolute;
  top: 32px;
  right: 24px;

  width: 24px;
  height: 24px;

  border: none;
  background: none;
}
.modal__header{}
.modal__title{
  padding-right: 48px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 36px;
  line-height: 111%;
  text-transform: uppercase;
  color: var(--text-black);
}
.modal__small-title{
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 24px;
  line-height: 100%;
  text-transform: uppercase;
  color: var(--text-black);
}
.modal__text{
  margin-top: 16px;

  padding-right: 10px;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-0);
}
.modal__form-sub{
  margin-top: 48px;
}
.modal-form-sub__submit{
  margin-top: 64px;
}
.modal__block-button{
  margin-top: 24px;
}
.modal__button{
  margin-top: 16px;
}
.modal__button:first-child{
  margin-top: 0;
}
.modal__content{
  margin-top: 24px;
}
.modal__filter{
  width: 400px;
}
.modal__footer{
  border-top: 1px solid var(--text-6);
  padding-top: 23px;
}
.modal__block-price{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-block-price__title{
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);
}
.modal-block-price__price{
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 24px;
  line-height: 100%;
  text-transform: uppercase;
  text-align: right;
  color: var(--text-black);
}
.modal-block-price__price::after{
  content: 'Р';
}
.modal__basket{
  width: 600px;
}
.modal__to-know,
.modal__to-know-submit{
  width: 412px;
}

.modal-basket__item{
  padding-top: 23px;
  padding-right: 15px;
  padding-bottom: 24px;

  display: flex;

  border-top: 1px solid var(--background-grey);

  position: relative;
}
.modal-basket__item::before{
  content: '';

  position: absolute;
  top: 24px;
  right: 6px;

  width: 24px;
  aspect-ratio: 1;

  background-image: url(../img/svg/main/basket.svg);
  background-repeat: no-repeat;
  background-position: center;

  cursor: pointer;

  transition: opacity .2s ease-out;
}
.modal-basket__item:hover .modal-basket__item::before{
  opacity: .8;
}
.modal-basket__item--return{
  padding-right: 5px;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-basket__item--return .modal-basket-item__title{
  padding-right: 10px;
}
.modal-basket__item--return::before{
  display: none;
}
.modal-basket-item__return{
  border-radius: 20px;
  padding: 4px 24px;

  font-family: var(--font-family);
  font-weight: 600;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-white);

  background: var(--background-black);

  border: none;
}
.modal-basket-item__block-image{
  width: 128px;
  aspect-ratio: 1;

  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-basket-item__image{
  width: 96px;
  aspect-ratio: 1;

  object-fit: contain;
}
.modal-basket-item__content{
  margin-left: 16px;
}
.modal-basket-item__title{
  padding-right: 40px;

  font-family: var(--font-family);
  font-weight: 500;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);
}
.modal-basket-item__sub-title{
  margin-top: 8px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  line-height: 133%;
  color: var(--text-black);
}
.modal-basket-item__control{
  margin-top: 24px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-basket-item__price{
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 20px;
  line-height: 120%;
  text-align: right;
  color: var(--text-black);
}
.modal-basket-item__price::after{
  content: 'Р';

  padding-left: 4px;
}
.modal__basket .modal__header{
  height: calc(100% - 92px);
  margin-bottom: -36px;
}
.modal__basket .modal__content{
  height: calc(100% - 100px);
  overflow-x: hidden;

}
.modal__basket .modal__content::-webkit-scrollbar {
  width: 7px;
  background-color: #f9f9fd;
}
.modal__basket .modal__content::-webkit-scrollbar-thumb {
  background-color: var(--background-black);
  border-radius: 2px;
}

.modal-form{
  margin: auto;

  width: 600px;

  padding: 24px;

  border-radius: 20px;

  position: relative;

  display: none;
}
.modal-form.active{
  display: block;
}
.modal-form--white{
  border: 1px solid var(--background-black);
  background: var(--background-white);
}
.modal-form--green-gradient{
  background: var(--gradient-blue);
}
.modal-form--width-584{
  width: 584px;
}
.modal-form--cdek{
  width: 836px;
}
.modal-form__close{
  position: absolute;
  top: 24px;
  right: 24px;

  width: 24px;
  aspect-ratio: 1;

  border: none;
  background: none;
  background-image: url(../img/svg/main/black-x.svg);
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: center;

  transition: opacity .2s ease-out;

  z-index: 10;
}
.modal-form__close--white{
  background-image: url(../img/svg/main/white-x.svg);
}
.modal-form__close:hover{
  opacity: .8;
}
.modal-form__button-close{}
.modal-form__title{
  padding-right: 50px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 26px;
  line-height: 123%;
  text-transform: uppercase;
  color: var(--text-dark);
}
.modal-form__text--center{
  text-align: center;
}
.modal-form__text--center-pc{
  text-align: center;
}
.modal-form__title--green-gradient{
  background: var(--gradient-blue);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.modal-form__title--white{
  color: var(--text-white);
}
.modal-form__element{
  margin-top: 24px;
}
.modal-form__element--center{
  display: flex;
  justify-content: center;
}
.modal-form__element--top-40{
  margin-top: 40px;
}
.modal-form__text{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);
}
.modal-form__text--weight-500{
  font-weight: 500;
}
.modal-form__text--white{
  color: var(--text-white);
}
.modal-form__img{
  width: 100%;
  height: 360px;

  object-fit: contain;
}
.modal-form__content{
  margin-top: 40px;
}
.modal-form-content__line{
  margin-top: 24px;
}
.modal-form-content__line:first-child{
  margin-top: 0;
}
.modal-form-content__line--two{
  display: flex;
  justify-content: space-between;
}
.modal-form-content__line--two-mobile{
  display: flex;
  justify-content: space-between;
}
.modal-form-content__line--two-mobile .modal-form-content-line__element{
  width: calc(50% - 12px);
}
.modal-form-content-line__element{
  position: relative;
}
.modal-form-content-line__element--arrow::after{
  content: '';

  position: absolute;
  right: 16px;
  bottom: 16px;

  width: 16px;
  height: 16px;

  background-image: url(../img/svg/main/arrow-right-input.svg);

  pointer-events: none;
}
.modal-form-content__line--two .modal-form-content-line__element{
  width: calc(50% - 12px);
}
.modal-form-content__line--three{
  display: flex;
}
.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){
  width: 85px;

  flex-shrink: 0;
}
.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){
  margin-left: 8px;

  width: 100%;
}
.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){
  margin-left: 8px;

  width: 85px;
  
  flex-shrink: 0;
}
.modal-form-content__line--margin-top-16{
  margin-top: 16px;
}
.modal-form__buttons{
  margin-top: 32px;
}
.modal-form__buttons--two{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-form__buttons--two button,
.modal-form__buttons--two input{
  width: calc(50% - 20px);
}
.modal-map{
  margin: auto;

  width: 1105px;

  display: none;

  border-radius: 24px;
  border: none;
}
.modal-map.active{
  display: flex;
}
.modal-map__left{
  width: 600px;

  padding: 24px;

  position: relative;
}
.modal-map__control{
  margin: 38px -12px -12px -12px;

  display: flex;
}
.modal-map__control--delivery{
  margin-top: 12px;
}
.modal-map-control__item{
  margin: 12px;

  padding: 2px;

  width: calc(50% - 24px);

  background: var(--background-9);
  border-radius: 20px;
  border: none;
}
.modal-map-control__item.active{
  background: var(--gradient-blue);
}
.modal-map-control__item.active .form-input-radio__circle::before{
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gradient-blue);
}
.modal-map-control-item__content{
  padding: 14px;

  border-radius: 18px;

  background: var(--background-white);
}
.modal-map-control-item__header{
  display: flex;
  align-items: center;
}
.modal-map-control-item__circle{
  padding: 2px;
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--background-9);
  position: relative;
}
.modal-map-control-item__input{
  display: none;
}
.modal-map-control-item-circle__content{
  width: 16px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--background-white);
}
.modal-map-control__item.active .modal-map-control-item__circle{
  background: var(--gradient-blue);
}
.modal-map-control__item.active .modal-map-control-item__circle::before{
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gradient-blue);
}
.modal-map-control-item__title{
  margin-left: 8px;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-dark);
}
.modal-map-control-item__description{
  margin-top: 16px;
}
.modal-map-control-item__time{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 125%;
  color: var(--text-black);

  text-align: start;
}
.modal-map-control-item__price{
  margin-top: 8px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  line-height: 133%;
  color: var(--text-6);

  text-align: start;
}
.modal-map__form{
  margin-top: 24px;
}
.modal-map-form__hidden{
  
}
.modal-map-form__button{
  margin-top: 83px;
}
.modal-map-form__sub-button{
  display: none;
}
.modal-map__right{
  padding: 16px 0px 16px 16px;
}
.modal-map__map{
  border: 2px solid var(--background-9);
  border-radius: 16px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.modal-map__map iframe{
  height: 650px;
}
.modal__age{

}
.modal__age > div{
  display: none;
}
.modal__age > div.active{
  display: flex;
}
/* modal */

/* toggle */
.toggle{
  padding-top: 26px;
  padding-bottom: 25px;

  border-bottom: 1px solid var(--text-3);

  position: relative;
}
.toggle::after{
  content: '';

  position: absolute;
  top: 24px;
  right: 0;

  width: 24px;
  aspect-ratio: 1;

  background-image: url(../img/svg/main/black-x.svg);
  transform: rotate(45deg);
  transition: transform .2s;
  pointer-events: none;
}
.toggle.active::after{
  transform: rotate(0deg);
}
.toggle__title{
  padding-right: 30px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 125%;
  color: var(--text-black);

  cursor: pointer;
}
.toggle__block-content{
  height: 0;
  overflow: hidden;

  transition: height .2s ease-out;
}
.toggle__content{
  padding-top: 24px;
}
.toggle-content__item{
  margin: 12px -12px -12px -12px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.toggle-content__item:first-child{
  margin-top: 0;
}
.toggle-content__element{
  margin: 12px;
}
.toggle-content__element--width-perc-100{
  width: 100%;
}
.toggle-content__element--width-perc-50{
  width: calc(50% - 24px);
}
.toggle__text{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);
}
/* toggle */

/* checkbox */
.checkbox{
  display: flex;
  align-items: center;

  cursor: pointer;
}
.checkbox__state{
  border-radius: 4px;

  width: 18px;
  height: 18px;

  border: 2px solid var(--background-black);
  background: var(--background-white);

  flex-shrink: 0;
}
.checkbox.active .checkbox__state{
  background-color: var(--background-black);

  background-image: url(../img/svg/main/arrow-selected-white.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.checkbox__input{
  display: none;
}
.checkbox__label{
  padding-left: 8px;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-dark);

  cursor: pointer;
}
.checkbox__label a{
  color: #76ce75;

  text-decoration: none;
}
.checkbox--small{
  margin-top: 24px;
}
.checkbox--small .checkbox__label{
  padding-left: 24px;

  font-weight: 500;
  font-size: 12px;
  line-height: 133%;
}
/* checkbox */

/* radio */
.radio{
  display: flex;
  align-items: center;
}
.radio__input{
  width: 18px;
  aspect-ratio: 1;

  accent-color: var(--background-black);

  cursor: pointer;
}
.radio__label{
  padding-left: 8px;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-dark);

  cursor: pointer;
}
/* radio */


@keyframes slidein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.subscription{
  
}
.subscription__item{
  display: flex;

  color: var(--text-black);
  font-family: var(--font-family);
  font-weight: 500;
  line-height: 120%;
}
.subscription__item:nth-last-child(n + 2){
  border-bottom: 1px solid var(--background-9);
}
.subscription__item span{
  font-weight: 700;
}
.subscription__item span small{
  font-size: 16px;
}
.subscription__status{
  color: var(--text-black);
}
.subscription__status--close{
  color: var(--text-red);
}
.subscription__status--end{
  color: var(--text-green);
}
.subscription__add{
  width: 100%;
}
.subscription__add-header{
}
.subscription__add-product{
  align-items: start;
}
.subscription__add-product > *:not(:first-child){
  padding-top: 14px;
}
.subscription__add-title{
  font-family: var(--font-family);
  font-weight: 600;
  line-height: 133%;
}
.subscription__add-content{

}

.tabs__buttons{
  margin: -12px;

  display: flex;
  flex-wrap: wrap;
}
.tabs__content-wrap{
  margin-top: 24px;
}
.tabs__content{
  display: none;
}
.tabs__content.active{
  display: block;
}

.cabinet__control--column{
  flex-direction: column;
}

.cabinet__control--column > *:not(:first-child){
  margin-top: 16px
}