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

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

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/raleway/raleway-800.woff2") format("woff2");
  font-display: swap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

html {
  height: 100%;
}

body {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #000000;
  background-color: #ffffff;
  min-width: 1440px;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/*Стили для indexa*/

.navigation-item,
.catolog-filter-list,
.produkt-card-group,
.pagination,
.breadcrumbs-list {
  list-style-type: none;
}

.page-header {
  color: #000000;
  width: 1060px;
  margin: 0 auto;
  padding: 20px 40px 134px 60px;
  background-color: #FFE17F;
  background-image: linear-gradient(to bottom, #ffffff 40px, #FFE17F 40px);
}

.page-header-catalog{
  padding-bottom: 20px;
}

.logo-header {
  display: inline-block;
  margin-bottom: 21px;
}

.logo-header:hover {
  opacity: 60%;
}

.logo-header:active {
  opacity: 30%;
}

.logo-header:focus-visible {
  outline: 2px solid #AF4FFF;
  outline-offset: 2px;
}

.form-navigation {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.form-search {
  width: 517px;
  display: flex;
  height: 40px;
  background-color: #FFE17F;
  margin-right: 27px;
  position: relative;
}
.search{
  position: relative;
}

.button-search{
  position: relative;
}

.search::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("../images/header/search.svg");
  position: absolute;
  top: 12px;
  left: 16px;
}

.search-input {
  width: 302px;
  background-color: #FFE17F;
  border-radius: 50px 0 0 50px;
  margin: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 48px;
  font-size: 16px;
  line-height: 20px;
  border: 2px solid #000000;
  outline: none;
}

.search-input:focus-visible + span{
  position: absolute;
  width: 358px;
  height: 42px;
  background-color: 2px solid #AF4FFF;
  top:-3px;
  left:-3px;
  bottom: -3px;
  right: -3px;
  pointer-events: none;
  border: 2px solid #AF4FFF;
  z-index: 1;
}

.search-submit:focus-visible + span {
  position: absolute;
  width: 160px;
  height: 42px;
  background-color: 2px solid #AF4FFF;
  top: -2px;
  left: -3px;
  bottom: -3px;
  right: -3px;
  pointer-events: none;
  border: 2px solid #AF4FFF;
  z-index: 1;
}

.search:disabled {
  opacity: 0;
}

.search-submit {
  width: 161px;
  background-color: #FFE17F;
  border-radius: 0 50px 50px 0;
  border: 2px solid #000;
  padding: 8px 56px;
  font-size: 16px;
  line-height: 20px;
  position: relative;
  outline: none;
  cursor: pointer;
  border-left: none;
}

.search-submit:hover {
  color: #FFFFFF;
  background-color: #000000;
}

.search-submit:active {
  color:rgba(220, 220, 220, 0.3)
}

.search-submit:focus-visible + span {
  position: absolute;
  width: 168px;
  height: 42px;
  background-color: 2px salid #AF4FFF;
  top: -3px;
  left: -5px;
  bottom: -2px;
  right: -1px;
  pointer-events: none;
  border: 2px solid #AF4FFF;
}

.search-submit:disabled {
  opacity: 30%;
}

.navigation-user {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  width: 230px;
  align-items: center;
  min-height: 30px;
  justify-content: space-between;
  margin-right: 27px;
}

.navigation-link-header:hover {
  opacity: 60%;
}

.navigation-link-header:active {
  opacity: 30%;
}

.navigation-link-header.navigation-link.link {
  border: 2px solid #08000000;
}

.navigation-link-header.navigation-link.link:hover {
  opacity: 60%;
}

.navigation-link-header.navigation-link.link:active{
  border-bottom: 2px solid #000000;
  opacity: 30%;
}

.navigation-link-header:focus-visible {
  outline: 2px solid #AF4FFF;
  outline-offset: 2px;
}

.navigation-list{
  margin: 0;
  display: flex;
  padding: 0;
}

.login {
  position: relative;
  min-height: 30px;
  display: flex;
  align-items: center;
  gap:13px;
}

.login-user{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:13px;
}

.login-go {
  opacity: 30%;
  display: block;
}

.comparison {
  position: relative;
  min-height: 30px;
  display: flex;
  align-items: center;
  padding-left: 22px;
  margin-right: 17px;
}

.comparison::before {
  content: "";
  display: block;
  width: 10px;
  height: 12px;
  background-color: #FFE17F;
  background-image: url("../images/header/comparison.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
}

.basket {
  position: relative;
  min-height: 30px;
  display: flex;
  align-items: center;
  padding-left: 44px;
  padding-right: 6px;
  margin-right: 14px;
}

.basket::before {
  content: "";
  display: block;
  width: 31px;
  height: 21px;
  background-color: #FFE17F;
  background-image: url("../images/header/basket.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  position: absolute;
  top:4px;
  bottom: 10px;
  left: 0;
}

.popover:active .popover-basket{
  display: block;
}

.popover:focus-within .popover-basket {
  display: block;
}

.popover {
  position: relative;
}

.popover-basket{
  width: 320px;
  font-family: "Rubik", sens-serif;
  color:#ffffff;
  background-color: #000000;
  min-height: 180px;
  right: -78px;
  box-sizing: border-box;
  z-index: 2;
  position: absolute;
  display: none;
}

.popover-content::before {
  background-image: url("../images/header/popover-basket-up.svg");
  background-repeat: no-repeat;
  width: 14px;
  height: 6px;
  content: "";
  top:-6px;
  right: 150px;
  display: block;
  position: absolute;
}

.delete-produkt-up{
  position: absolute;
  width: 14px;
  height: 16px;
  top:0;
  right: -110px;
  background-image: url("../images/header/basket-item-delete.svg");
  background-repeat: no-repeat;
  background-color: #000;
  outline: none;
  border: none;
}

.delete-produkt {
  position: absolute;
  width: 14px;
  height: 16px;
  top: 0;
  right: -73px;
  background-image: url("../images/header/basket-item-delete.svg");
  background-repeat: no-repeat;
  background-color: #000;
  outline: none;
  border: none;
}

.delete-produkt-up:focus-visible::before {
  position: absolute;
  display: block;
  content: "";
  width: 14px;
  height: 14px;
  outline: 2px solid #AF4FFF;
  z-index: 1;
  top:-1px;
  right: 1px;
  border: none;
}

.delete-produkt:focus-visible::before {
  position: absolute;
  display: block;
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid #AF4FFF;
  z-index: 1;
  top: -3px;
  right: 0;
  outline: none;
}

.popover-content{
  height: 100%;
  padding: 0;
  position: relative;
}

.produkt-basket{
  list-style: none;
  padding: 0;
}

.produkt-basket-item {
  display: flex;
  align-items: start;
  padding: 20px;
  margin: 0;
  position: relative;
  cursor: pointer;
}

.produkt-basket-link{
  color: #ffffff;
  text-decoration: none;
  position: relative;
}

.produkt-basket-link:hover {
  opacity: 60%;
}

.produkt-basket-link:active {
  opacity: 30%;
}

.produkt-basket-link:focus-visible{
  outline: 2px solid #AF4FFF;
}

.produkt-basket-title {
  padding: 0;
  margin: 0;
  margin-left: 23px;
  line-height: 20px;
  font-size: 16px;
}

.produkt-all-basket{
  background-color: #1A1A1A;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  align-items: center;
  margin: 0;
}

.open-basket{
  width: 280px;
  text-transform: uppercase;
  font-family: "Raleway",sens-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 21px;
  padding: 14px 25px;
  margin: 20px;
  cursor: pointer;
  border: none;
}

.open-basket:hover {
  background-color: #FFE17F;
  border: none;
}

.open-basket:active {
  color: rgba(0, 0, 0,0.3);
  background-color:rgba(255, 225, 127, 1);
  border:none
}

.open-basket:focus-visible {
  background-color: #FFFFFF;
  outline: 2px solid #AF4FFF;
  border: none;
}

.open-basket:disabled {
  background-color: #ffffff;
  color: rgba(192, 191, 191, 0.9);
}

.link {
  letter-spacing: 0.2em;
  height: 20px;
}

.page-navigation {
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  min-height: 21px;
  align-items: center;
}

.navigation-catalog {
  padding-right: 19px;
  padding-top: 15px;
  padding-bottom: 15px;
  cursor: pointer;
  outline: none ;
}

navigation-item-catalog:active .subcatalog {
  display: block;
}

.navigation-catalog::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background-image: url("../images/header/catalog-close.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  position: absolute;
  right: 0;
  top: 0;
  opacity: 30%;
}

.navigation-catalog::after{
  display:none;
  position: absolute;
  content: "";
  width: 300px;
  height: 50px;
  outline: 2px solid #AF4FFF;
  outline-offset: 2px;
}

.navigation-catalog:focus-visible:after {
  display: block;
  content: "";
  width: 300px;
  height: 50px;
  outline-offset: 2px;
}

.navigation-catalog:hover::before {
  opacity: 99%;
}

.navigation-catalog:active::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background-image: url("../images/header/catalog-open.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  position: absolute;
  right: 0;
  top: 0;
  opacity: 30%;
}

.navigation-catalog:focus::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background-image: url("../images/header/catalog-open.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  position: absolute;
  right: 0;
  top: 0;
}

.navigation-item-catalog{
  margin-right: auto;
  z-index: 1;
  position: relative;
  padding-right: 47px;
}

.navigation-item-catalog:focus-within .subcatalog {
  display: block;
}

.subcatalog {
  list-style: non;
  text-decoration: none;
  background-color: #FFE17F;
  width: 1119px;
  z-index: 2;
  display: none;
  position: absolute;
  top: 55px;
  left: -60px;
  padding: 33px 20px 27px;
  min-height: 150px;
}

.subcatalog-all{
  display: flex;
}

.subcatalog-item{
  list-style: none;
  border: 2px solid rgba(0, 0, 0, 0);
}


.subcatalog-link {
  text-decoration: none;
  color: #000000;
  border-bottom: 2px solid #08000000;
  display: inline;
}

.subcatalog-link:hover{
  opacity: 60%;
}

.subcatalog-list:active {
  opacity: 30%;
  border-bottom: 2px solid #000000;
  margin-right: auto;
  display: inline-block;
}

.subcatalog-link:focus-visible{
  outline: 2px solid #AF4FFF;
  display: inline-block;
}

.navigation-cotacts {
  margin-left: 45px;
  margin-right: 14px;
}

.navigation-guarantee {
  margin-left: 39px;
}

.main-index {
  flex-grow: 1;
}

.main-container {
  margin: 0 auto;
  position: relative;
}

.no-visually {
  display: none;
}

.slider-slogan-container {
  width: 1160px;
  margin: 0 auto;
  display: flex;
  margin-top: -128px;
  margin-bottom: 39px;
  justify-content: space-between;
}

.slider-container {
  position: relative;
  top:-22px;
}

.slider-prev {
  transform: rotate(180deg);
  left: 30px;
}

.slider-next {
  left: 540px;
}

.slider-number {
  height: 130px;
  right: -569px;
  position: absolute;
  top: 30px;
}

.slider-button {
  width: 20px;
  height: 60px;
  background-image: url("../images/main/svg/slider-button.svg");
  padding: 0;
  cursor: pointer;
  border: none;
  background-color: #ffffff;
  position: absolute;
  top: 211px;
}

.slider-button:hover {
  opacity: 60%;
}

.slider-button:active {
  opacity: 30%;
}

.slider-button:focus-visible {
  outline: 2px solid #AF4FFF;
}

.slider-button:disabled {
  opacity: 10%;
}

.slogan-conteiner{
  z-index: 0;
  width: 560px;
}

.slogan {
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: 50px;
  line-height: 50px;
  margin: 0;
  padding-top: 100px;
  margin-bottom: 28px;
}

.product-desc-800,
.product-desc-50 {
  font-size: 16px;
  margin: 0;
}

.slogan-desc {
  margin: 0;
  margin-bottom: 50px;
}

.link-slogan {
  margin-bottom: 50px;
  position: relative;
  width: 220px;
  justify-content: center;
  height: 40px;
  align-items: center;
  border: none;
  outline: none;
  z-index: 1;
  background-color: #ffffff00;
}

.link-slogan::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 8px;
  top: 16px;
  background-color: #FFE17F;
  right: 0;
  z-index: -1;
}

.link-slogan:hover {
  background-color: #FFE17F;
  height: 40px;
}

.link-slogan:active {
  background-color: #FFC700;
}

.link-slogan:focus-visible {
  outline: 2px solid #AF4FFF;
}

.link-slogan:disabled {
  opacity: 30%;
}

.table {
  display: grid;
  grid-template-columns: 160px 150px;
  row-gap: 12px;
  margin: 0;
  margin-bottom: 26px;
}

.product-value-800 {
  grid-row: 1/2;
  grid-column: 1/2;
}

.product-value-50 {
  grid-row: 1/2;
  grid-column: 2/3;
}

.product-desc-800 {
  grid-row: 2/3;
  grid-column: 1/2;
}

.product-desc-50 {
  grid-row: 2/3;
  grid-column: 2/3;
}

.product-value-48 {
  grid-row: 1/2;
  grid-column: 1/2;
}

.product-desc-48 {
  grid-row: 2/3;
  grid-column: 1/2;
}

.product-value-8 {
  grid-row: 1/2;
  grid-column: 1/2;
}

.product-value-5 {
  grid-row: 1/2;
  grid-column: 2/3;
}

.product-desc-8 {
  grid-row: 2/3;
  grid-column: 1/2;
}

.product-desc-5 {
  grid-row: 2/3;
  grid-column: 2/3;
}

.product-value-karbon {
  grid-row: 1/2;
  grid-column: 3/4;
}

.product-desc-karbon {
  grid-row: 2/3;
  grid-column: 3/4;
}

.product-value-800,
.product-value-50,
.product-value-48,
.product-value-8,
.product-value-5,
.product-value-karbon {
  font-size: 36px;
  line-height: 30px;
  margin: 0;
}

.product-desc-800,
.product-desc-50,
.product-desc-48,
.product-desc-8,
.product-desc-5,
.product-desc-karbon {
  margin: 0;
}

.navigation-link {
  font-family: "Raleway", sans-serif;
  line-height: 21px;
  font-size: 18px;
  font-weight: 800;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
}

.navigation-list .navigation-link {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  text-transform: none;
}

.slider-pagination {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: #08000000;
  margin-top: -86px;
  margin-bottom: 65px;
  margin-right: -10px;
}

.slider-pagination-item {
  display: flex;
}

.slider-pagination-link {
  position: relative;
  width: 20px;
  height: 20px;
  padding: 0;
  cursor: pointer;
  margin: 0;
  margin-right: 12px;
  border: #000;
  background-color: #ffffff;
}

.slider-pagination-link::before {
  position: absolute;
  border-radius: 50%;
  content: "";
  background-color: #fcfcfc;
  width: 10px;
  height: 10px;
  top: 3px;
  right: 3px;
  border: 2px solid #000000;
}

.slider-pagination-link:active {
  opacity: 60%;
}

.slider-pagination-link:active {
  opacity: 30%;
}

.slider-pagination-link:focus-visible {
  outline: 2px solid #AF4FFF;
}

.slider-pagination-link:disabled {
  opacity: 10%;
}

.link-slogan-active{
  position: relative;
  border: #08000000;
}

.link-slogan-active::before {
  position: absolute;
  border-radius: 50%;
  content:"";
  background-color: #000;
  width: 10px;
  height: 10px;
  top:3px;
  right: 3px;
}

.search-submit:focus-visible + span {
  position: absolute;
  width: 163px;
  height: 42px;
  background-color: 2px solid #AF4FFF;
  top: -3px;
  left: -2px;
  bottom: -2px;
  right: -3px;
  pointer-events: none;
  border: 2px solid #AF4FFF;
}

.slider-slogan-no-active {
  display: none;
}

.gadjets {
  font-size: 18px;
  line-height: 24px;
}

.menu-gadjets {
  width: 1160px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 20px;
  gap: 40px;
  padding: 0;
  margin-bottom: 82px;
}

.navigation-link-gadjets {
  color: #000000;
  text-decoration: none;
  position: relative;
  display: block;
  font-family: "Raleway", sans serif;
  line-height: 24px;
  font-weight: 800;
  width: 160px;
}

.navigation-link-gadjets::before {
  content: "";
  display: block;
  width: 160px;
  height: 160px;
  background-color: #FFE17F;
  background-image: url("../images/main/svg/virtual-reality.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  margin-bottom: 33px;
}

.navigation-link-gadjets:hover::before {
  background-color: #FFC700;
}

.navigation-link-gadjets:active::before {
  background-color: #FFE17F;
}

.navigation-link-gadjets:active {
  opacity: 60%;
}


.navigation-link-gadjets:focus-visible {
  outline: 2px solid #AF4FFF;
}

.monopods::before {
  content: "";
  display: block;
  width: 160px;
  height: 160px;
  background-color: #FFE17F;
  background-image: url("../images/main/svg/monopods.svg");
  background-repeat: no-repeat;
  background-position: 50% 100%;
  margin-bottom: 33px;
}

.action::before {
  content: "";
  display: block;
  width: 160px;
  height: 160px;
  background-color: #FFE17F;
  background-image: url("../images/main/svg/action-camers.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  margin-bottom: 33px;
}

.fitness::before {
  content: "";
  display: block;
  width: 160px;
  height: 160px;
  background-color: #FFE17F;
  background-image: url("../images/main/svg/fitness-bracelets.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  margin-bottom: 33px;
}

.smart::before {
  content: "";
  display: block;
  width: 160px;
  height: 160px;
  background-color: #FFE17F;
  background-image: url("../images/main/svg/smart-watch.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  margin-bottom: 33px;
}

.quadrocopters::before {
  content: "";
  display: block;
  width: 160px;
  height: 160px;
  background-color: #FFE17F;
  background-image: url("../images/main/svg/quadrocopters.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  margin-bottom: 33px;
}

.container-delivery {
  width: 1160px;
  margin: 0 auto;
  align-items: center;
  margin-bottom: 117px;
  outline: none;
}

.link-rare{
  outline: none;
}

.link-rare:focus-visible {
  outline: 2px solid #AF4FFF;
}



/* Сервис*/

.service {
  margin-bottom: 70px;
  background-color: #f0f0f0;
  background-image: linear-gradient(to bottom, #ffffff 102px, #f0f0f0 102px);
  z-index: -2;
  padding-bottom: 137px;
}

.service-container {
  margin: 0 auto;
  display: flex;
}

.service-container-wrapper {
  padding: 0;
  margin: 0;
  margin-right: 118px;
  padding-top: 64px;
  position: relative;
  letter-spacing: 0.2em;
}

.service-container-wrapper::before {
  content: "";
  display: block;
  width: 7px;
  height: 319px;
  background-color: #000000;
  background-repeat: no-repeat;
  position: absolute;
  left: 280px;
  top: 0;
}

.link-delivery,
.link-guarantee {
  margin-bottom: 34px;
}

.link-active {
  width: 267px;
  color: #FFE17F;
  background-color: #000000;
  align-items: center;
  padding-top: 9px;
  padding-bottom: 11px;
  padding-left: 18px;
  position: relative;
}

.link-active:hover {
  padding-left: 65px;
  max-width: 220px;
}

.link-active:active {
  padding-left: 65px;
}

.link-active:focus-visible {
  outline: 2px solid #AF4FFF;
  width: 220px;
  padding-left: 65px;
}

.link-no-active {
  width: 160px;
  height: 40px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.link-no-active::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 8px;
  background-color: #FFE17F;
  z-index: -1;
}

.link-no-active:hover::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 40px;
  background-color: #FFE17F;
}

.link-no-active:active:before {
  background-color: #FFC700;
  height: 40px;
}

.link-no-active:focus-visible {
  outline: 2px solid #AF4FFF;
}

.subtitle {
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: 50px;
  line-height: 50px;
  text-transform: none;
  margin: 0;
}

.subtitle-delivery-container {
  padding-top: 73px;
}

.subtitle-delivery {
  margin-bottom: 34px;
}

.delivery {
  font-size: 18px;
  line-height: 30px;
  width: 453px;
  margin: 0;
  position: relative;
}

.delivery::after {
  content: "";
  position: absolute;
  width: 136px;
  height: 164px;
  background-image: url("../images/main/svg/man.svg");
  background-repeat: no-repeat;
  top: -79px;
  left: 558px;
}

.guarantee {
  position: relative;
  margin: 0;
}

.guarantee::after {
  content: "";
  position: absolute;
  width: 171px;
  height: 195px;
  background-image: url("../images/main/svg/guarantee.svg");
  background-repeat: no-repeat;
  top: -92px;
  left: 530px;
}

.credit {
  position: relative;
  margin: 0;
}

.credit::after {
  content: "";
  position: absolute;
  width: 156px;
  height: 188px;
  background-repeat: no-repeat;
  background-image: url("../images/main/svg/credit.svg");
  top: -92px;
  left: 530px;
}

.navigation-item a {
  display: flex;
  align-items: center;
}

.rare:hover::before {
  background-color: #FFC700;
}

.rare:after {
  opacity: 30%;
}

.rare:hover::after {
  opacity: 99%;
}

.rare:active::before,
.rare:active::after {
  opacity: 30%;
}


.navigation-link-rare:focus-visible {
  outline: 2px solid #AF4FFF;
  outline-offset: 2px;
  display: block;
}

.rare {
  width: 1160px;
  background-color: #F0F0F0;
  height: 100px;
  position: relative;
  font-family: "Raleway", sans serif;
  color: inherit;
  margin-bottom: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  padding-left: 2px;
  padding-top: 1px;
}

.rare::before {
  position: absolute;
  content: "";
  width: 125px;
  height: 100px;
  background-color: #FFE17F;
  background-image: url("../images/main/svg/truck.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  left: 0;
}

.rare::after {
  position: absolute;
  content: "";
  width: 40px;
  height: 40px;
  background-color: rgba(220, 220, 220, 0.5);
  background-image: url("../images/main/svg/frame.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  right: 45px;
  border-radius: 50%;
}


.about-contacts-conteiner {
  width: 1160px;
  display: flex;
  justify-content: space-between;
}

.about {
  width: 520px;
}

.subtitle-about-us {
  position: relative;
  margin-bottom: 48px;
}

.subtitle-about-us::before {
  position: absolute;
  content: "";
  width: 84px;
  height: 7px;
  background-color: #000000;
  left: 0;
  top: -48px;
  margin-bottom: 40px;
}

.subtitle-about-us-more {
  margin: 0;
  margin-bottom: 30px;
}

.subtitle-about-us-more-more {
  margin-bottom: 30px;
}

.subtitle-contacts {
  position: relative;
  margin-bottom: 48px;
}

.subtitle-contacts::before {
  position: absolute;
  content: "";
  width: 84px;
  height: 7px;
  background-color: #000000;
  left: 0;
  top: -48px;
  margin-bottom: 40px;
}

.company {
  padding: 0;
  padding-left: 38px;
  margin-bottom: 29px;
  list-style: none;
  text-decoration: none;
  font-family: "Rubik", sens-serif;
  font-weight: 700;
  letter-spacing: -2%;
}

.contacts {
  width: 532px;
  padding-bottom: 10px;
  margin-bottom: 59px;
}

.navigation-item.subject {
  font-weight: 700px;
  font-size: 18px;
  line-height: 20px;
  list-style: none;
  margin-bottom: 19px;
  position: relative;
}

.navigation-item.subject:before {
  position: absolute;
  content: "";
  display: block;
  width:8px;
  height: 8px;
  background-color: #FFC700;
  top:5px;
  left:-34px;
  border-radius: 50px;
}

.about-us {
  position: relative;
  width: 270px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff00;
  outline: none;
  border: none;
}

.about-us::before {
  position: absolute;
  content: "";
  width: 270px;
  height: 8px;
  top: 16px;
  background-color: #FFE17F;
  z-index: -1;

}

.about-us:hover {
  background-color: #FFE17F;
  height: 40px;
}

.about-us:active {
  background-color: #FFC700;
}

.about-us:focus-visible {
  outline: 2px solid #AF4FFF;
}

.about-us:disabled {
  opacity: 30%;
}

.subject-buy {
  font-size: 24px;
  line-height: 30px;
  margin: 0;
  margin-top: 30px;
  margin-bottom: 15px;
}

.adress {
  margin: 0;
}

.phone-contacts {
  margin: 0;
  margin-bottom: 30px;
}

.subject-time {
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  margin-bottom: 15px;
}

.time {
  margin: 0;
  margin-bottom: 29px;
}

.write-me {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 40px;
  background-color: #ffffff00;
    outline: none;
    border: none;
}

.write-me::before {
  position: absolute;
  content: "";
  width: 260px;
  height: 8px;
  top: 16px;
  background-color: #FFE17F;
  z-index: -1;
}

.write-me:hover {
  background-color: #FFE17F;
  height: 40px;
}

.write-me:active {
  background-color: #FFC700;
}

.write-me:focus-visible {
  outline: 2px solid #AF4FFF;
}

.write-me:disabled {
  opacity: 30%;
}



/* Подписка на рассылку*/

.subscription-container {
  background-color: #f0f0f0;
  padding: 67px 133px 56px 135px;
}

.subscription-wrapper {
  width: 1160px;
  margin: 0 auto;
}

.subscription {
  display: flex;
  justify-content: space-between;
  margin-bottom: 144px;
}

.text {
  max-width: 560px;
  margin: 0;
  padding-top: 10px;
}

.subtitle-subscription {
  display: inline;
  padding-left: 6px;
  width: 348px;
  margin: 0;
  margin-right: 252px;
}

.form-subscription {
  width: 1158px;
  min-height: 55px;
  display: flex;
  align-items: baseline;
}

.user-email {
  width: 539px;
  background-color: #f0f0f0;
  border: none;
  border-bottom: 3px solid #C4C4C4;
  padding-left: 16px;
  display: flex;
  align-self: stretch;
  font-size: 18px;
  line-height: 30px;
}

.user-email:hover {
  opacity: 60%;
}

.user-email:active {
  outline: none;
}

.user-email:focus-visible {
  outline: 2px solid #AF4FFF;
  outline-offset: 2px;
  z-index: 1;

}

.submit {
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 21px;
  letter-spacing: 0.2em;
  align-items: center;
  text-align: center;
  border: 3px solid #C4C4C4;
  text-transform: uppercase;
  min-height: 55px;
  padding: 0;
  padding-left: 36px;
  padding-right: 33px;
  background-color: #F0F0F0;
}

.submit:hover {
  background-color: #000000;
  color: #FFFFFF;
  border: none;
}

.submit:active {
  background-color: #000000;
  color: rgba(220, 220, 220, 0.3);
}

.submit:focus-visible {
  outline: 2px solid #AF4FFF;
  outline-offset: 2px;
  border:3px solid #C4C4C4;
  color: #000000;
  background-color: #f0f0f0;
}

.submit:disabled {
  opacity: 30%;
}

.ok {
  width: 160px;
  margin-left: auto;
  position: relative;
  display: flex;
  justify-content: flex-end;
  min-height: 30px;
}

.ok::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-image: url("../images/main/svg/ok.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  position: absolute;
  left: 1px;
  top: 7px;
}





/* Футер*/
.page-footer {
  background-color: #444444;
  color: #ffffff;
  width: auto;
  padding: 64px 140px 57px;
}

.footer-container {
  width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 291px 440px 288px;
  column-gap: 70px;
  row-gap: 28px;
  position: relative;
}

.footer-container::before {
  position: absolute;
  content: "";
  width: 80px;
  height: 7px;
  background-color: #FFC700;
  top: 174px;
  left: 0;
}

.logo-footer {
  margin: 0;
  display: inline-block;
  width: 145px;
}

.logo-footer:hover {
  opacity: 60%;
}

.logo-footer:active {
  opacity: 30%;
}

.logo-footer:focus-visible {
  outline: 2px solid #AF4FFF;
  outline-offset: 2px;
}

.address-text {
  display: block;
  font-size: 16px;
  line-height: 20px;
  margin: 0;
  grid-column: 1/2;
  margin-top: -1px;
}

.footer-navigation {
  display: flex;
  justify-self: center;
  gap: 32px;
  padding: 0;
  margin: 0;
  grid-column: 2/3;
}

.link-footer {
  border: 2px solid rgba(255, 199, 0, 0,1);
}

.link-footer:hover {
  border-bottom: 2px solid rgba(255, 199, 0, 1);
  color: #FFC700;
}

.link-footer:active {
  opacity: 30%;
}

.link-footer:focus-visible {
  outline: 2px solid #AF4FFF;
  outline-offset: 3px;
}




.socials {
  display: flex;
  flex-wrap: wrap;
  justify-self: center;
  gap: 15px;
  grid-column: 2/3;
  align-items: start;
  margin-top: 15px;
}

.telegram {
  color: #000000;
  text-decoration: none;
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0.3);
  fill: #444444;
  opacity: 60%;
  align-items: center;
  justify-content: center;
  position: relative;
  outline: none;
}

.telegram::after {
  position: absolute;
  display: none;
  content: "";
  width: 40px;
  height: 40px;
  outline: 2px solid #AF4FFF;
  border-radius: 0%;
}

.telegram:focus-visible::after {
  width: 40px;
  height: 40px;
  border-radius: 0%;
  display: block;
  outline: 2px solid #AF4FFF;
  outline-offset: 3px;
}

.telegram:hover {
  background-color: #FFC700;
  opacity: 99%;
}

.telegram:active {
  fill: rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 199, 0, 1);
  border-radius: 50%;
}

.youtube {
  color: #000000;
  text-decoration: none;
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0.3);
  fill: #444444;
  opacity: 60%;
  align-items: center;
  justify-content: center;
  outline: none;
}

.youtube::after {
  position: absolute;
  display: none;
  content: "";
  width: 40px;
  height: 40px;
  outline: 2px solid #AF4FFF;
  border-radius: 0%;
}

.youtube:focus-visible::after {
  width: 40px;
  height: 40px;
  border-radius: 0%;
  display: block;
  outline: 2px solid #AF4FFF;
  outline-offset: 3px;
}

.youtube:hover {
  background-color: #FFC700;
  opacity: 99%;
}

.youtube:active {
  fill: rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 199, 0, 1);
  border-radius: 50%;
}

.twitter {
  color: #000000;
  text-decoration: none;
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  fill: #444444;
  opacity: 60%;
  align-items: center;
  justify-content: center;
  outline: none;
}

.twitter::after {
  position: absolute;
  display: none;
  content: "";
  width: 40px;
  height: 40px;
  outline: 2px solid #AF4FFF;
  border-radius: 0%;
}

.twitter:focus-visible::after {
  width: 40px;
  height: 40px;
  border-radius: 0%;
  display: block;
  outline: 2px solid #AF4FFF;
  outline-offset: 3px;
  border: none;
}

.twitter:hover {
  background-color: #FFC700;
  opacity: 99%;
}

.twitter:active {
  fill: rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 199, 0, 1);
  border-radius: 50%;
}

.phone {
  color: inherit;
  display: block;
  font-size: 16px;
  line-height: 20px;
  grid-column: 3/4;
  grid-row: 2/3;
  justify-self: end;
  margin-top: 4px;
}

.phone:hover {
  color: rgba(255, 199, 0, 1);
}

.phone:active {
  opacity: 30%;
}

.phone:focus-visible {
  outline: 2px solid #AF4FFF;
}

.htmlacademy-link {
  fill: #FFC700;
  margin: 0;
  grid-column: 3/4;
  justify-self: end;
  align-self: flex-end;
  margin-top: 20px;
}

.htmlacademy-link:hover {
  fill: #FFFFFF;
}

.htmlacademy-link:active {
  opacity: 30%;
}

.htmlacademy-link:focus-visible {
  outline: 1px solid #AF4FFF;
}




/* Стили для cataloga */

.inner-header-title {
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: 50px;
  line-height: 50px;
  text-transform: none;
  padding-left: 60px;
  margin: 0;
  padding-top: 36px;
}

.breadcrumbs-link {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  color: #000000;
}

.breadcrumbs-list {
  display: flex;
  justify-content: flex-start;
  padding: 0;
  gap: 20px;
  margin: 0;
  padding-left: 60px;
  padding-top: 10px;
  margin-bottom: 30px;
}

.breadcrumbs-item {
  padding-right: 16px;
}

.breadcrumbs-link:hover {
  opacity: 60%;
}

.breadcrumbs-link:active {
  opacity: 30%;
}

.breadcrumbs-link:focus-visible {
  outline: 2px solid #AF4FFF;
}

.breadcrumbs-main {
  position: relative;
}

.produkt-card-filter {
  background-color: #f0f0f0;
}

.main-inner-container {
  background-color: #ffffff;
}

.container {
  width: 1160px;
  margin: 0 auto;
}

.catalog-filter-container {
  width: 1160px;
  margin: 0 auto;
  display: flex;
}

.filter-container {
  width: 320px;
  margin-top: 2px;
  padding-left: 57px;
}

.breadcrumbs-item {
  position: relative;
}

.breadcrumbs-item:not(:last-child)::after {
  position: absolute;
  content: "";
  display: block;
  width: 4px;
  height: 7px;
  background-image: url("../images/main/svg/breadcrumbs-vector.svg");
  background-repeat: no-repeat;
  top: 13px;
  right:-5px;
}

.filter-subtitle {
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 19px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 0;
  margin-bottom: 68px;
  padding-top:22px;
  padding-left: 3px;
}

.catalog-filter-group {
  border: none;
  margin: 0;
  padding: 0;
}

.range {
  margin-bottom: 39px;
}

.range-scale {
  width: 200px;
  height: 2px;
  position: relative;
  background-color: #DCDCDC;
  margin-bottom: 8px;
}

.range-bar {
  position: absolute;
  height: 2px;
  background-color: #000000;
}

.range-toogle {
  position: absolute;
  border-radius: 50%;
  background-color: #EBEBEB;
  width: 14px;
  height: 14px;
  outline: 2px solid #000000;
  cursor: pointer;
  border: none;
}

.range-toogle::after {
  position: absolute;
  width: 18px;
  height: 18px;
  content: "";
  display: none;
  border:2px solid #AF4FFF;
  top:-4px;
  left:-4px;
}

.range-toogle:hover {
  outline: 2px solid #B3B3B3;
}

.range-toogle:active {
  background-color: #000000;
  outline: 2px solid #000;
}

.range-toogle:focus-visible::after {
  display: block;

}
.toogle-min {
  top:-6px;
  left:-5px;
}

.toogle-max {
  top: -6px;
  left: 115px;
}

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

.range-wraper-inputs {
  display: flex;
  margin-left: -13px;
  width: 206px;
}

.min {
  margin-right: -52 px;
}

.range-input {
  width: 35px;
  border: none;
  font-weight: inherit;
  height: 20px;
  background-color: transparent;
  appearance: textfield;
  margin-left: 2px;
  align-self: center;
  line-height: 20px;
  font-size: 16px;
  outline: none;
}

.catalog-filter-label-max{
  display: flex;
  opacity: 30%;
  font-size: 14px;
  width: 107px;
  line-height: 20px;
  align-items: flex-end;
  position: relative;
  border: none;
  outline: none;
  left: -20px;
}

.catalog-filter-label-max::after {
  position: absolute;
  display: none;
  content: "";
  width: 60px;
  height: 20px;
  border: 2px solid #AF4FFF;
  top: 3px;
  left: -44px;
}

.catalog-filter-label-min {
  display: flex;
  opacity: 30%;
  font-size: 14px;
  width: 107px;
  line-height: 20px;
  align-items: flex-end;
  position: relative;
  border: none;
  outline: none;
  left: -20px;
}

.catalog-filter-label-min::after {
  position: absolute;
  display: none;
  content: "";
  width: 37px;
  height: 20px;
  border: 2px solid #AF4FFF;
  top: 3px;
  left:-44px;
}

.range-input:focus-visible + .catalog-filter-label-max::after {
  display: block;
}

.range-input:focus-visible + .catalog-filter-label-min::after {
  display: block;
}

.catalog-filter-group {
  padding: 0;
  margin: 0;
}

.catalog-filter-title {
  font-weight: 700;
  line-height: 30px;
  position: relative;
  margin-bottom: 21px;
}

.catalog-filter-title-color {
  margin-bottom: 16px;
}

.catalog-filter-title::before {
  position: absolute;
  content: "";
  background-color: #000000;
  width: 200px;
  border: 2px solid #000000;
  top: -12px;
}

.catolog-filter-list {
  margin: 0;
  padding: 0;
  margin-bottom: 40px;
}

.catalog-filter-title-bluetooth {
  margin-bottom: 16px;
}

.control {
  position: relative;
  display: block;
  padding-left: 36px;
  margin-bottom: 17px;
  cursor: pointer;
}

.control-mark {
  position: absolute;
  width: 14px;
  height: 14px;
  top:-2px;
  left:0;
  border: 3px solid #CCCCCC;
  border-radius:3px;
}

.control-input[type="checkbox"]:checked + .control-mark {
  border-color: #000000;
}
.control-input:hover .control-mark {
  opacity: 60%;
}

.control-input:active .control-mark {
  opacity: 30%;
}

.control-input:disabled .control-label {
  opacity: 10%;
}

.control-input:disabled .control-mark {
  opacity: 10%;
}

.control-input:focus-visible + .control-mark::after {
  position: absolute;
  content: "";
  top:-3px;
  left:-3px;
  width: 20px;
  height: 20px;
  outline: 2px solid #AF4FFF;
}

.control-input[type="checkbox"]:checked + .control-mark::before {
  position: absolute;
  width: 10px;
  height: 10px;
  background-image: url("../images/main/svg/control-checked.svg");
  content: "";
  top:3px;
  left:2px;
}

.control-mark-bluetooth {
  position: absolute;
  width: 18px;
  height: 17px;
  top: -2px;
  left: 0;
  border: 3px solid #CCCCCC;
  border-radius: 50%;
}

.control:hover .control-mark-bluetooth {
  opacity: 60%;
}

.control:hover .control-label {
  opacity: 60%;
}

.control:active .control-mark-bluetooth {
  opacity: 30%;
}

.control:active .control-label {
  opacity: 30%;
}

.control-input-bluetooth:disabled .control-label {
  opacity: 10%;
}

.control-input-bluetooth:disabled .control-mark-bluetooth {
  opacity: 10%;
}

.control-input-bluetooth:focus-visible + .control-mark-bluetooth::after {
  position: absolute;
  content: "";
  top: -2px;
  left: -2px;
  width: 24px;
  height: 24px;
  outline: 2px solid #AF4FFF;
  border-radius: 0%;
}

.control-input-bluetooth[type="radio"]:checked + .control-mark-bluetooth::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #000000;
  content:"";
  top: 5px;
  left: 5px;
  border-radius: 50%;
}

.control-input-bluetooth[type="radio"]:checked + .control-mark-bluetooth {
  border-color: #000000;
}


.catolog-filter-list-bluetooth {
  margin: 0;
}

.control {
  font-size: 16px;
  line-height: 20px;
}

.button-show {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 40px;
  cursor: pointer;
  border: none;
  z-index: 1;
  margin-left: 4px;
  background-color: #08000000;
}

.button-show::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 8px;
  background-color: #FFE17F;
  z-index: -1;
}

.button-show:hover::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 40px;
  background-color: #FFE17F;
}

.button-show:active::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 40px;
  background-color: #FFC700;
}

.button-show:focus-visible {
  outline: 2px solid #AF4FFF;
}

.button-show:disabled {
  opacity: 30%;
}

.produkt-card-container {
  width: 840px;
  background-color: #ffffff;
}

.popular-container {
  display: flex;
  width: 840px;
  padding-top: 16px;
  padding-bottom: 20px;
  background-color: #f0f0f0;
  align-items: center;
}

.filter {
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 19px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 0;
}

.filter-pupular {
  margin-left: 40px;
  align-items: center;
  justify-self: center;
  margin-right: auto;
}

.select {
  margin-right: auto;
  position: relative;
}

.select:hover {
  opacity: 60%;
}

.select:active {
  opacity: 30%;
}

.select:focus-visible {
  outline: 2px solid #AF4FFF;
}

.select-control:disabled {
  opacity: 10%;
}

.select-control {
  border: none;
  background-color: #f0f0f0;
  font-size: 18px;
  line-height: 30px;
  padding-right: 34px;
  padding-top: 2px;
  appearance: none;
  background-image: url("../images/main/svg/select.svg");
  background-repeat: no-repeat;
  background-position: 93% 53%;
}

.button-popular-max {
  padding: 17px;
  background-image: url("../images/main/svg/popular-minmax.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 11px;
  height: 10px;
  border: none;
  cursor: pointer;
  opacity: 20%;
}

.button-popular-min {
  padding: 17px;
  background-image: url("../images/main/svg/popular-minmax.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transform: rotate(180deg);
  width: 11px;
  height: 10px;
  border: none;
  cursor: pointer;
  opacity: 20%;
  margin-right: 35px;
}

.button-popular-max:hover {
  opacity: 50%;
}

.button-popular-min:hover {
  opacity: 50%;
}

.button-popular-max:active {
  opacity: 100%;
}

.button-popular-min:active {
  opacity: 100%;
}

.button-popular-max:focus-visible {
  outline: 2px solid #AF4FFF;
  opacity: 80%;
}

.button-popular-min:focus-visible {
  outline: 2px solid #AF4FFF;
  opacity: 80%;
}

.min-pupular,
.max-popular {
  min-width: 30px;
  min-height: 30px;
}

.produkt-card-group {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 70px 40px 42px;
  gap: 40px;
}

.produkt-card-link {
  display: grid;
  grid-template-columns: 260px 100px;
  grid-template-rows: 380px 40px;
  row-gap: 33px;
  position: relative;
}

.produkt-card-link::before {
  position: absolute;
  background-image: url("../images/main/svg/product-new.svg");
  top:27px;
  right: 27px;
  content: "";
  width: 60px;
  height: 60px;
  display: none;
}

.produkt {
  max-width: 100%;
  height: auto;
}

.more{
  position: absolute;
  justify-self: center;
  top:180px;
  letter-spacing: 0.2em;
  z-index: 1;
  display: none;
}

.more::after{
  position: absolute;
  content: "";
  background-color: #FFE17F;
  width: 220px;
  height: 8px;
  top: 7px;
  right: -35px;
  z-index: -1;
  display: none;
}

.produkt-card-link:hover .produkt{
  opacity: 80%;
}

.produkt-card-link:hover .produkt-card-title {
  opacity: 80%;
}

.produkt-card-link:hover .more::after {
  display: block;
}

.produkt-card-link:hover .more {
  display: block;
}

.produkt-card-link:active .produkt {
  opacity: 80%;
}

.produkt-card-link:active .produkt-card-title {
  opacity: 80%;
}

.produkt-card-link:active .more::after{
  display: block;
  background-color: #FFC700;
}

.produkt-card-link:active .more {
  display: block;
}

.produkt-card-link:focus-visible {
  outline: 2px solid #AF4FFF;
  outline-offset: 2px;
}

.produkt {
  grid-column: 1/3;
  grid-row: 1/2;
  margin-bottom: 32px;
}

.produkt-card-title {
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: -0.02em;
  grid-column: 1/2;
  grid-row: 2/3;
  margin: 0;
  align-self: end;
  text-transform: none;
}

.produkt-card-price {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 21px;
  grid-column: 2/3;
  grid-row: 2/3;
  justify-self: end;
}

.navigation-link-load {
  font-size: 16px;
  line-height: 19px;
  display: flex;
  width: 755px;
  height: 55px;
  align-items: center;
  justify-content: center;
}

.load {
  border: solid 3px #E5E5E5;
  text-align: center;
  margin-left: 40px;
  margin-right: 40px;
  font-size: 16px;
  line-height: 19px;
  margin-bottom: 42px;
  max-height: 55px;
}

.navigation-link-load {
  outline: none;
  border: none;
  background-color: #b1181800;
}

.load:hover {
  border: solid 3px #000000;
}

.load:active {
  opacity: 30%;
}

.navigation-link-load:focus-visible {
  outline: 2px solid #AF4FFF;
  outline-offset: 4px;
}

.navigation-link-load:disabled {
  opacity: 30%;
}

.pages {
  display: flex;
  align-items: center;
  background-color: #EBEBEB;
  margin: 0 40px 78px;
  width: 760px;
  justify-content: space-between;
  box-sizing: border-box;
}

.link-button {
  padding: 24px 22px;
}

.link-button:hover{
background-color: #DCDCDC;
}

.link-button:active {
  background-color: #DCDCDC;
  opacity: 30%;
}

.link-button:focus-visible {
  outline: 2px solid #AF4FFF;
  outline-offset: 2px;
  opacity: 100%;
}

.link-button:disabled {
  background-color: #EBEBEB;
  opacity: 30%;
}

.no-active {
  color: #444444;
  opacity: 30%;
}

.pagination-prev {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  opacity: 30%;
}

.pagination-active {
  opacity: 60%;
}

.pagination-item {
  min-width: 40px;
}

.pagination-prev:hover {
  color: #444444;
}

.pagination-prev:active {
  opacity: 10%;
}

.pagination-prev:focus-visible {
  outline: 2px solid #AF4FFF;
  outline-offset: 2px;
  opacity: 100%;
}

.pagination-item:disabled {
  opacity: 30%;
}

.pagination {
  display: flex;
  padding: 0;
  margin: 0;
  color: #444444;
  line-height: 20px;
  font-size: 16px;
  text-align: center;
}

.pagination li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-item .pagination-prev {
  display: block;
  min-width: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.group-bluetooth {
  margin-bottom: 20px;
}

.modal-container-close {
  display: none;
}

.modal-container {
  position:fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.modal-container:after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #E5E5E5;
  opacity: 90%;
}

.form-user-delivery {
  position: absolute;
  background-color: #FFFFFF;
  width: 920px;
  padding: 72px 80px 82px;
  border: 10px solid #000000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.modal-close-button {
  position: absolute;
  padding: 0;
  top: 84px;
  right: 80px;
  width: 26px;
  height: 26px;
  background-color: #ffffff;
  background-image: url("../images/main/svg/model-close-button.svg");
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  z-index: 2;
}

.modal-close-button:hover {
  opacity: 60%;
}

.modal-close-button:active {
  opacity: 30%;
}

.modal-close-button:focus-visible {
  outline: 2px solid #AF4FFF;
}

.modal-title {
  font-family: "Raleway", sans-serif;
  margin: 0;
  margin-bottom: 42px;
  font-size: 50px;
  line-height: 85%;
  font-weight: 800;
  text-transform: uppercase;
  color: #000000;
  position: relative;
}

.modal-title::after {
  position: absolute;
  content: "";
  display: block;
  width: 15px;
  height: 12px;
  top: 147px;
  right: 50px;
}

.input-error {
  outline: 2px solid #FF3D3D;
}

.user-error {
  display: none;
  font-size: 14px;
  color: #FF3D3D;
}

.user {
  display: flex;
  flex-wrap: wrap;
}

.user-name-input {
  padding: 20px;
  padding-right: 45px;
  width: 360px;
  margin-right: 40px;
  background-color: #F0F0F0;
  border: none;
  display: block;
  outline: none;
}

.user-content-svg svg {
  position: absolute;
  top:65px;
  right: 60px;
  fill:#B3B3B3;
  width: 13px;
  height: 12px;
}

.user-content-svg {
  position: relative;
}

.user-content {
  margin-bottom: 42px;
}

.user-content span {
  display: inline-block;
  font-size: 14px;
}

.user-name-input:hover {
  background-color: #DCDCDC;
}

.user-name-input:active {
  background-color: #EBEBEB;
}

.user-name-input:focus-visible {
  outline: 2px solid #AF4FFF;
}

.user-name::placeholder {
  color: #AF4FFF;
}

.user-name-input:disabled {
  opacity: 30%;
}

.user-name,
.user-delivery,
.user-title-all {
  font-weight: 700;
  letter-spacing: 20%;
  display: block;
  margin-bottom: 14px;
}

.user-mail-input {
  padding: 20px;
  padding-right: 45px;
  width: 360px;
  background-color: #F0F0F0;
  border: none;
  position: relative;
  background-image: url("../images/main/svg/message.svg");
  background-repeat: no-repeat;
  background-position: 94% 50%;
  outline: none;
}

.user-mail-input:hover {
background-color: #DCDCDC;
}

.user-mail-input:active {
  background-color: #EBEBEB;
}

.user-mail-input:focus-visible {
  outline: 2px solid #AF4FFF;
}

.user-mail-error:invalid {
  outline: 2px solid red;
}

.user-mail-input:disabled {
  opacity: 30%;
}

.user-delivery-input:hover {
  background-color: #DCDCDC;
}

.user-delivery-input:active {
  background-color: #EBEBEB;
}

.user-delivery-input:focus-visible {
  outline: 2px solid #AF4FFF;
}

.user-delivery-input:disabled {
  opacity: 30%;
}

.user-delivery-input {
  padding: 20px;
  width: 540px;
  margin-right: 40px;
  background-color: #F0F0F0;
  border: none;
  outline: none;
}

.user-mail {
  color: #000000;
}

.user-title-all {
  position: relative;
  padding: 0;
  margin: 0;
  margin-bottom: 13px;
  padding-right: 12px;
  display: inline-block;
}

.popover-user {
  position: relative;
}

.user-content-all {
  align-self: flex-start;
  flex-wrap: wrap;
}

.popover-user-delivery {
  width: 22px;
  height: 22px;
  position: relative;
  margin-top: 2px;
  top:-5px;
  border: none;
  background-color: #08000000;
  outline: none;
}

.popover-user-delivery-more {
  margin: 0;
  width: 170px;
  background-color: #000000;
  color: #FFFFFF;
  padding: 19px 14px 10px 19px;
  position: absolute;
  z-index: 1;
  right: -26px;
  top:33px;
  text-align: start;
  display: none;
  font-size: 16px;
}

.popover-user-delivery::after {
  position: absolute;
  content: "";
  width: 26px;
  height: 26px;
  top: -3px;
  right: 3px;
  background-image: url("../images/main/svg/modal-icon.svg");
  cursor: pointer;
}

.popover-user-delivery-more::before {
  background-image: url("../images/header/popover-basket-up.svg");
  background-repeat: no-repeat;
  position: absolute;
  content: "";
  width: 14px;
  height: 6px;
  top: -5px;
  right: 35px;
}

.popover-user-delivery:hover .popover-user-delivery-more {
  display: block;
}

.popover-user-delivery:focus-visible .popover-user-delivery-more {
  display: block;
  outline: none;
  border: none;
}


.user-all-button-error {
  outline: 2px solid #FF3D3D;
}

.user-all-button {
  display: flex;
  outline:none;
}


.button-plus,
.button-minus {
  width: 60px;
  height: 60px;
  cursor: pointer;
  border: none;
}

.button-minus {
  position: relative;
  background-color: #F0F0F0;
}

.button-minus:after {
  position: absolute;
  content: "";
  background-image: url("../images/main/svg/button-minus.svg");
  width: 16px;
  height: 2px;
  right: 21px;
}

.button-plus {
  position: relative;
  background-color: #F0F0F0;
}

.button-plus::before {
  position: absolute;
  content: "";
  background-image: url("../images/main/svg/button-plus.svg");
  width: 16px;
  height: 16px;
  right: 21px;
  top: 23px;
}

.button-plus:hover {
  opacity: 60%;
}

.button-plus:active {
  opacity: 30%;
}

.button-plus:focus-visible {
  outline: 2px solid #AF4FFF;
}

.button-minus:hover {
  opacity: 60%;
}

.button-minus:active {
  opacity: 30%;
}

.button-minus:focus-visible {
  outline: 2px solid #AF4FFF;
}

.button-number {
  font-size: 16px;
  padding: 20px;
  width: 18px;
  background-color: #F0F0F0;
  border: 2px solid #08000000;
  text-align: center;
  height: 16px;
}

.button-number:focus-visible {
  border: 2px solid #AF4FFF;
  outline: none;
}

.button-number::-webkit-outer-spin-button,
.button-number::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.button-number[type=number] {
  -moz-appearance:textfield;
}


.button-modal-delivery {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 40px;
  z-index: 1;
  font-family: "raleway", sens-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 21px;
  text-transform: uppercase;
  border:none;
  background-color: #ffffff;
  letter-spacing: 2px;
}

.button-modal-delivery::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 8px;
  background-color: #FFE17F;
  z-index: -1;
}

.button-modal-delivery:hover::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 40px;
  background-color: #FFE17F;
}

.button-modal-delivery:active::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 40px;
  background-color: #FFC700;
}

.button-modal-delivery:focus-visible {
  outline: 2px solid #AF4FFF;
}

.button-modal-delivery:disabled {
  opacity: 30%;
}