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

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

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

/* Craftwork Grotesk */
@font-face {
    font-family: "Craftwork Grotesk";
    src: local("Craftwork Grotesk Bold"),
      url("/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"),
      url("/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff") format("woff"),
      url("/assets/fonts/craftwork/craftwork-grotesk-bold.ttf") format("ttf");
    font-weight: 700;
}
@font-face {
    font-family: "Craftwork Grotesk";
    src: local("Craftwork Grotesk SemiBold"),
      url("/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"),
      url("/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff") format("woff"),
      url("/assets/fonts/craftwork/craftwork-grotesk-semi-bold.ttf") format("ttf");
    font-weight: 600;
}
@font-face {
    font-family: "Craftwork Grotesk";
    src: local("Craftwork Grotesk Medium"),
      url("/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff2") format("woff2"),
      url("/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff") format("woff"),
      url("/assets/fonts/craftwork/craftwork-grotesk-medium.ttf") format("ttf");
    font-weight: 500;
}
@font-face {
    font-family: "Craftwork Grotesk";
    src: local("Craftwork Grotesk Regular"),
      url("/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff2") format("woff2"),
      url("/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff") format("woff"),
      url("/assets/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("/assets/fonts/din-2014/din-2014-rounded-demi.woff2") format("woff2"),
      url("/assets/fonts/din-2014/din-2014-rounded-demi.woff") format("woff"),
      url("/assets/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("/assets/fonts/din-2014/din-2014-rounded-regular.woff2") format("woff2"),
      url("/assets/fonts/din-2014/din-2014-rounded-regular.woff") format("woff"),
      url("/assets/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("/assets/fonts/roboto/Roboto-Medium.woff2") format("woff2"),
      url("/assets/fonts/roboto/Roboto-Medium.woff") format("woff"),
      url("/assets/fonts/roboto/roboto-medium.ttf") format("ttf");
    font-weight: 500;
}
@font-face {
    font-family: "Roboto";
    src: local("Roboto Regular"),
      url("/assets/fonts/roboto/Roboto-Regular.woff2") format("woff2"),
      url("/assets/fonts/roboto/Roboto-Regular.woff") format("woff"),
      url("/assets/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-0: #000;
    --text-3: #333;
    --text-6: #666;

    /* background */
    --background-white: #fff;
    --background-black: #121212;
    --background-grey: #f2f2f2;

    /* 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;

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

  text-align: start;
  
  color: var(--text-black);

  position: relative;

  transition: opacity .2s ease-out;
}
.lang__open::before{
  content: '';

  position: absolute;
  top: 19.25px;
  right: 18.25px;

  width: 10px;
  height: 6px;

  background-image: url(../img/svg/main/arrow-black.svg);
  background-repeat: no-repeat;
}
.lang__open:hover{
  opacity: .8;
}
.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 */


/* 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;
}
.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;
}
.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--textarea{
  height: 96px;
  resize: none;
}
.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;
}
/* 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);
}
.compound__item:first-child{
  margin-left: 0;
}
.product__footer{
  margin: 48px 24px 24px;

  display: flex;
  justify-content: center;
}
/* 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--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--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;
}
.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;
}
/* 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;

  width: 100%;
  height: 100%;

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

  z-index: 200;

  opacity: 0;
  transition: opacity .2s ease-out;
  pointer-events: none;
}
.modal.active{
  opacity: 1;
  pointer-events: auto;
}
.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.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__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-basket__item{
  padding-top: 23px;
  padding-bottom: 24px;

  display: flex;

  border-top: 1px solid #f2f2f2;

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

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

  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__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 */

/* 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;
}
.toggle.active::after{
  transform: rotate(0deg);
}
.toggle__title{
  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;
}
.checkbox__state{
  border-radius: 4px;

  width: 18px;
  height: 18px;

  border: 2px solid var(--background-black);
  background: var(--background-white);
}
.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);
}
/* checkbox */

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

  accent-color: var(--background-black);
}
.radio__label{
  padding-left: 8px;

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


@keyframes slidein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}