@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap);
.fw-700 {
  font-weight: 700;
}

.fw-600 {
  font-weight: 600;
}

.fw-500 {
  font-weight: 500;
}

.fw-400 {
  font-weight: 400;
}

:root {
  --primary-color: #E44318;
  --primary-color-ton-1: #FFF4F1;
  --secondary-color: #828282;
  --secondary-color-ton-1: #FAFAFB;
  --secondary-color-ton-2: #88868D;
  --secondary-color-ton-3: #E1E1E5;
  --secondary-color-ton-4: #D6D6D6;
  --secondary-color-ton-5: #F2EDE7;
  --secondary-color-ton-6: #4D4D4D;
  --secondary-color-ton-7: #E4E8F2;
  --secondary-color-ton-8: #C4CAD5;
  --secondary-color-ton-9: #eeeff2;
  --secondary-color-ton-10: #E0E0E0;
  --secondary-color-ton-11: #C2C2C2;
  --secondary-color-ton-12: #C4C4C4;
  --secondary-color-ton-13: #F8F7F5;
  --secondary-color-ton-14: #D8D7D5;
  --secondary-color-ton-15: #F7F7F7;
  --secondary-color-ton-16: #D9D9D9;
  --secondary-color-ton-17: #979797;
  --tertiary-color: #FFB700;
  --dark-color: #000000;
  --dark-color-1: #222222;
  --light-color: #F6F7F9;
  --light-color-ton-1: #F2F5F7;
  --light-color-ton-2: #F4F4F7;
  --white-color: #FFFFFF;
  --font-dark-color: #000000;
  --font-dark-color-1: #222222;
  --font-dark-color-2: #303033;
  --font-secondary-color: #AFAFAF;
  --font-secondary-color-ton-1: #3C3C4399;
  --font-secondary-color-ton-2: #4D4D4D;
  --font-secondary-color-ton-3: #88868D;
  --font-secondary-color-ton-4: #808080;
  --font-secondary-color-ton-5: #777777;
  --font-tooltip-subtitle: #EBEBF599;
  --font-primary-color: #222222;
  --font-tertiary-color: #262626;
  --font-success-color: #008001;
  --font-success-color-ton-1: #7BBB58;
  --font-disabled-color: #D2D2D2;
  --font-color-count-btn: #5B5A60;
  --font-select-delivery-time: #679E4A;
  --font-account-secondary-color:#828282;
  --font-size-xxs: 10px;
  --font-size-xs: 12px;
  --font-size-s: 14px;
  --font-size-m: 16px;
  --font-size-l: 18px;
  --font-size-big: 28px;
  --font-size-xxl: 32px;
  --error-color: #F24E4E;
  --promocode-accept: #FFB800;
  --input-ui-border-color: #EEF1F7;
  --input-ui-background-color: #FAFAFB;
  --input-ui-placeholder-color: #808080;
  --input-ui-text-color: #303033;
  --status-success: #7BBB58;
  --tooltip-color: #373D3F;
  --tooltip-text-color: #ffffff;
  --button-ui-pressed: #E04402;
  --button-ui-hover: #EC713D;
  --button-ui-disabled: #E0835C;
  --button-ui-text-disabled: #ECB59D;
  --button-ui-neutral: #F7F7F7;
  --button-ui-text-neutral: #88868D;
  --label-primary-color: #ECB743;
  --chip-primary-color: #F6F7F9;
  --chip-primary-color-isActive: #FFFFFF;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  color-scheme: dark light;
}

body {
  min-height: 100vh;
}

ul {
  list-style: none;
}

img,
picture,
video {
  display: inline-block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  outline: none;
  border: none;
}

button {
  background-color: transparent;
  cursor: pointer;
}

a {
  text-decoration: none;
}

body {
  font-family: "Inter", sans-serif;
  background-color: #FFFFFF;
  color: var(--font-primary-color);
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  max-width: 1350px;
  width: 100%;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

.select-delivery-address,
.select-city-text {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: var(--font-size-s);
  gap: 8px;
}
.select-delivery-address:hover,
.select-city-text:hover {
  color: var(--primary-color);
  transition: all 0.3s ease;
}
.select-delivery-address:hover .type-icon,
.select-city-text:hover .type-icon {
  transition: all 0.3s ease;
  color: var(--primary-color);
}

.delivery-estimate {
  margin-left: 5px;
  color: var(--font-select-delivery-time);
  font-weight: 600;
  font-size: 14px;
}

.select-city__container {
  padding: 40px;
}
.select-city__title {
  font-weight: 600;
  font-size: 32px;
  margin-bottom: 24px;
}
.select-city__items {
  -moz-column-count: 4;
       column-count: 4;
  -moz-column-gap: 20px;
       column-gap: 20px;
  -moz-column-width: 225px;
       column-width: 225px;
}
.select-city__item {
  font-weight: 600;
  font-size: 24px;
}
.select-city-text {
  color: var(--font-secondary-color-ton-3);
}
.select-city__link {
  display: flex;
  margin-bottom: 8px;
  color: var(--font-dark-color-1);
  font-weight: 600;
  font-size: 18px;
}
.select-city__link:hover {
  color: var(--primary-color);
}

.select-country {
  display: flex;
  align-items: center;
}

.choose-present {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--secondary-color-ton-4);
}
.choose-present__text {
  font-size: var(--font-size-s);
  max-width: 215px;
}

.link {
  cursor: pointer;
  font-weight: 600;
  color: var(--font-primary-color);
  display: inline-flex;
  text-decoration: none;
  transition: all 0.3s ease;
}
.link.isActive {
  color: var(--primary-color);
}
.link_fill_primary {
  color: var(--primary-color);
}
.link_primary {
  color: var(--font-primary-color);
}
.link_primary:hover {
  color: var(--primary-color);
}
.link_secondary {
  font-weight: 400;
  color: var(--dark-color);
}
.link_tertiary {
  color: var(--primary-color);
  font-size: 16px;
  text-decoration: underline;
}
.link_underline {
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.separation::before {
  display: inline-block;
  content: "|";
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 400;
  margin-right: 4px;
}

.inline {
  display: inline;
}

.telephone {
  font-weight: 600;
  font-size: 14px;
}
.telephone:hover {
  color: var(--primary-color);
}

.contact-info {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.socials {
  display: flex;
}
.socials__link:not(:last-child) {
  margin-right: 8px;
}

.logo {
  width: 64px;
}

.main {
  margin: 40px 0;
  flex: 1 1 auto;
}

.mr-xs {
  margin-right: 4px;
}

.mr-m {
  margin-right: 16px;
}

.mb-m {
  margin-bottom: 16px;
}

.mt-m {
  margin-top: 16px;
}

.text-center {
  text-align: center;
}
.text_present {
  color: var(--font-success-color-ton-1);
  font-size: 16px;
  font-weight: 600;
}

.header-top {
  background-color: #F6F7F9;
}
.header-top__container {
  display: flex;
  align-items: center;
  padding: 8px 0;
}
.header-top_secondary {
  background-color: #fff;
}
.header-top__tel {
  margin-right: auto;
}
.header-top__vacancy {
  margin-right: 10px;
  color: var(--primary-color);
}
.header-middle__container {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
}
.header-middle_secondary {
  box-shadow: 0px 15px 30px -15px rgba(0, 0, 0, 0.0784313725);
}
.header-middle_secondary .header-middle__container {
  padding: 16px 0;
}
.header-middle__select {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-right: auto;
}
.header-middle__select-wrapper {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}
.header-bottom {
  position: sticky;
  top: -1px;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.21);
  padding: 16px 0px;
  -webkit-backdrop-filter: blur(30px);
          backdrop-filter: blur(30px);
  box-shadow: 0px 24px 18px -15px rgba(0, 0, 0, 0.0745098039);
}
.header-bottom__container {
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  gap: 16px;
}
.header-bottom__logo,
.header-bottom .nav-actions {
  opacity: 0;
  transform: translateY(-58px);
  visibility: hidden;
  transition: all 0.3s ease;
}
.header-bottom .nav-caterogies {
  grid-column: 1/4;
  grid-row: 1/2;
  z-index: 2;
}
.header-bottom__logo {
  grid-column: 1/2;
  grid-row: 1/2;
  z-index: 1;
}
.header-bottom .nav-actions {
  grid-row: 1/2;
  grid-column: 3/4;
  z-index: 1;
}
.header-bottom.fixed .header-bottom__logo,
.header-bottom.fixed .nav-actions {
  opacity: 1;
  transform: translateY(0px);
  visibility: visible;
}
.header-bottom.fixed .header-bottom__logo {
  grid-column: 1/2;
  grid-row: 1/2;
}
.header-bottom.fixed .nav-caterogies {
  grid-column: 2/3;
  grid-row: 1/2;
}
.header-bottom.fixed .nav-actions {
  grid-row: 1/2;
  grid-column: 3/4;
}
.header__top {
  padding: 10px 16px 0 16px;
}
.header__top-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header__bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 8px 16px 16px 0;
}
.header_fix {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
}
.header_fix .navbar__left {
  flex-direction: row;
}
.header_fix .navbar__right {
  justify-content: center;
}
.header_fix .navbar__contact-info {
  display: none;
}
.header_fix .navbar__select-delivery-address {
  margin-bottom: 0;
  margin-left: 16px;
}
.header_fix + .main {
  margin-top: 210px;
}

.footer__top {
  margin-top: 118px;
  margin-bottom: 40px;
}
.footer__nav {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 1240px) {
  .footer__nav {
    flex-direction: row;
  }
}
.footer__nav-menu {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 768px) {
  .footer__nav-menu {
    gap: 64px;
  }
}
.footer__nav-menu-top {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.footer__nav-menu-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: var(--font-size-s);
}
.footer__nav-menu-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 200px;
}
@media (min-width: 768px) {
  .footer__nav-menu-list {
    width: calc(20% - 16px);
  }
}
.footer__nav-menu-title {
  font-size: 18px;
  font-weight: 600;
}
.footer__nav-menu-link {
  display: inline-flex;
  color: var(--dark-color);
  text-decoration: none;
}
.footer__nav-menu-category {
  font-weight: 500;
}
.footer__nav-links-app {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
@media (min-width: 1240px) {
  .footer__nav-links-app {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}
.footer__policy {
  font-size: var(--font-size-s);
  line-height: 20px;
  max-width: 795px;
  margin-bottom: 42px;
}
.footer__bottom {
  background-color: var(--light-color);
}
.footer__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
}
.footer__copyright {
  font-size: var(--font-size-s);
  color: var(--font-secondary-color);
}
.navbar {
  display: flex;
  justify-content: space-between;
}
.navbar__select-delivery-address {
  margin-bottom: 32px;
}
.navbar__contact-info {
  margin-bottom: 32px;
}
.navbar__left {
  display: flex;
  flex-direction: column-reverse;
}
.navbar__right {
  display: flex;
  flex-direction: column;
}
.navbar__middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.button-ui {
  position: relative;
  cursor: pointer;
  padding: 5px 12px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  gap: 4px;
  font-size: var(--font-size-s);
}
.button-ui[disabled] {
  pointer-events: none;
  opacity: 0.5;
}
.button-ui_loading .type-icon {
  display: none;
}
.button-ui_loading::after {
  display: block;
  content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0C11.3119 0 10.7615 0.550459 10.7615 1.23853C10.7615 1.92661 11.3119 2.47706 12 2.47706C17.2569 2.47706 21.5229 6.74312 21.5229 12C21.5229 17.2569 17.2569 21.5229 12 21.5229C6.74312 21.5229 2.47706 17.2569 2.47706 12C2.47706 11.3119 1.92661 10.7615 1.23853 10.7615C0.550459 10.7615 0 11.3119 0 12C0 18.6055 5.3945 24 12 24C18.6055 24 24 18.6055 24 12C24 5.3945 18.6055 0 12 0Z' fill='white'/%3E%3C/svg%3E%0A");
  width: 24px;
  height: 24px;
  animation: rotate 0.8s linear infinite;
}
.button-ui_circle {
  background-color: var(--primary-color);
  border-radius: 64px;
  height: 56px;
  width: 56px;
  color: var(--white-color);
}
.button-ui_circle:hover {
  opacity: 0.8;
}
.button-ui_circle:active {
  background-color: #C43B02;
  opacity: 1;
}
.button-ui_circle:disabled {
  pointer-events: none;
  background-color: var(--button-ui-disabled);
  color: var(--button-ui-text-disabled);
  opacity: 1;
}
.button-ui_primary {
  font-weight: 600;
  border-radius: 24px;
  color: #fff;
  background-color: var(--primary-color);
  min-height: 56px;
}
.button-ui_primary-light {
  font-size: 20px;
  font-weight: 600;
  background-color: var(--primary-color-ton-1);
  color: var(--primary-color);
  border-radius: 16px;
  min-height: 48px;
  padding: 12px 32px;
}
.button-ui_secondary {
  font-weight: 600;
  background-color: var(--primary-color-ton-1);
  color: var(--primary-color);
  border-radius: 16px;
}
.button-ui_light {
  justify-content: space-between;
  border-radius: 8px;
  color: var(--secondary-color-ton-2);
  background-color: var(--secondary-color-ton-3);
  min-height: 56px;
}
.button-ui_fluid {
  width: 100%;
}
.button-ui_tertiary {
  font-size: var(--font-size-m);
  line-height: 22px;
  border-radius: 24px;
  padding: 6px 12px;
  color: var(--secondary-color);
  background-color: var(--light-color-ton-1);
}
.button-ui_tertiary:hover {
  color: var(--primary-color);
}
.button-ui_outline {
  font-size: var(--font-size-s);
  color: var(--dark-color-ton-1);
  border: 1px solid var(--dark-color);
  border-radius: 8px;
}
.button-ui-order {
  font-weight: 600;
}
.button-ui-order__text {
  display: flex;
  justify-content: center;
  align-items: center;
}
.button-ui-auth__scope {
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-ui-auth__scope-num {
  font-weight: 600;
  margin-right: 4px;
}
.button-ui-auth__scope-star {
  margin-right: 4px;
}
.button-ui-auth__scope::before {
  display: block;
  content: "";
  width: 1px;
  height: 12px;
  margin: 0 4px;
  background-color: var(--dark-color);
}
.button-ui-cart__price {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}
.button-ui-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
  padding: 0;
  border-radius: 12px;
  background: var(--secondary-color-ton-5);
  line-height: 1;
  width: 93px;
  height: 28px;
}
.button-ui-count__btn {
  cursor: pointer;
  height: 100%;
  color: var(--font-color-count-btn);
}
.button-ui-count__btn:first-child {
  padding-left: 12px;
  padding-right: 6px;
}
.button-ui-count__btn:last-child {
  padding-left: 6px;
  padding-right: 12px;
}
.button-ui_active {
  color: var(--primary-color);
}
.button-ui_size-s {
  font-size: 12px;
  min-height: 40px;
  border-radius: 16px;
}
.button-ui_size-l {
  font-size: 16px;
  min-height: 40px;
  padding-left: 16px;
  padding-right: 16px;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.type-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.slider2 {
  margin-top: 24px;
  margin-bottom: 40px;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 calc(25% - 12px);
  min-width: 200px;
}
.product-card__label {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 0;
  background-color: var(--primary-color);
  width: 161px;
  height: 57px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
  z-index: 2;
  font-weight: 600;
  font-size: 18px;
}
.product-card__label-text {
  color: rgba(255, 255, 255, 0.7882352941);
}
.product-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}
.product-card__image {
  position: relative;
  max-width: 300px;
  align-self: center;
  margin-bottom: 14px;
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 1;
}
.product-card__image:hover {
  transform: translateY(10px);
}
.product-card__title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--dark-color);
}
.product-card__desc {
  font-weight: 500;
  font-size: var(--font-size-s);
  color: var(--font-secondary-color);
  margin-bottom: 16px;
}
.product-card__gram {
  font-weight: 500;
  font-size: var(--font-size-s);
  color: var(--font-secondary-color);
  margin-bottom: 6px;
}
.product-card__price {
  display: flex;
  margin-bottom: 6px;
}
.product-card__price-new {
  font-weight: 500;
  font-size: 20px;
  color: var(--font-tertiary-color);
}
.product-card__price-old {
  text-decoration: line-through;
  font-weight: 500;
  font-size: var(--font-size-s);
  color: var(--font-secondary-color);
}
.product-card__price-discount {
  margin-left: 16px;
  position: relative;
}
.product-card__price-discount-num {
  position: relative;
  z-index: 2;
  padding: 2px 11px 4px 7px;
  font-size: var(--font-size-s);
  color: #fff;
  font-weight: 400;
}
.product-card__price-discount::before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: calc(100% - 4px);
  background-color: var(--primary-color);
  z-index: 1;
  border-radius: 12px;
  transform: rotate(-10deg);
}

.popup {
  display: none;
  position: fixed;
  z-index: 101;
  inset: 0;
  overflow: auto;
  animation: 300ms ease-in-out opacity;
}
.popup__container {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100%;
  padding: 20px;
}
.popup__overlay {
  position: absolute;
  inset: 0;
  z-index: 101;
  display: block;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 1;
  transition: opacity 300ms ease-in-out;
  will-change: opacity;
}
.popup.isActive {
  display: block;
}
.popup.isActive .cart {
  transform: translateX(0);
}
.popup__left {
  flex: 1 1 45%;
  padding: 16px 20px 16px 16px;
}
.popup__heading {
  font-weight: 600;
  margin-bottom: 64px;
}
@media (min-width: 768px) {
  .popup__heading {
    font-size: 24px;
  }
}
.popup__text {
  font-size: var(--font-size-s);
  margin-top: 10px;
  margin-bottom: 20px;
  font-weight: 600;
}
.popup__title {
  font-size: var(--font-size-xs);
  margin-bottom: 5px;
}
.popup__content {
  display: flex;
  flex-direction: column-reverse;
  position: relative;
  background: #fff;
  max-width: 1120px;
  border-radius: 15px;
  margin: auto;
  max-height: 648px;
  z-index: 102;
}
@media (min-height: 568px) {
  .popup__content {
    height: 100%;
  }
}
@media (min-width: 992px) {
  .popup__content {
    flex-direction: row;
  }
}
.popup__content_size_s {
  max-width: 450px;
}
.popup__content_size_m {
  max-width: 736px;
}
.popup__content_size_xl {
  max-width: 1064px;
}
.popup__map {
  flex: 1 1 55%;
  max-width: 574px;
  height: 100%;
  overflow: hidden;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
.popup__close {
  display: flex;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 99;
}
.popup__close:active {
  opacity: 0.7;
}
@media (min-width: 1200px) {
  .popup__close {
    right: -60px;
    top: 0;
  }
}
.popup__img {
  display: flex;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.popup__row {
  display: flex;
}

@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.payment-online-card {
  max-width: 465px;
}
.payment-online-card button[disabled] {
  color: #858585;
  background-color: #F4F4F4;
  opacity: 1;
}
.payment-online-card__content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 0;
  padding: 24px 0;
}

.fast-payment {
  padding: 32px 26px;
}
.fast-payment__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 370px;
  margin: 0 auto;
}
.fast-payment__description {
  text-align: center;
  color: var(--font-dark-color-2);
}
.fast-payment__title {
  text-align: center;
  font-weight: 600;
  font-size: 28px;
  color: var(--font-dark-color-1);
}

.catalog {
  margin-bottom: 20px;
}
.catalog__content {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
}
@media (min-width: 490px) {
  .catalog__content {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .catalog__content {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 992px) {
  .catalog__content {
    grid-template-columns: repeat(4, 1fr);
  }
}
.catalog__heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.catalog__heading-left {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.catalog__title {
  font-weight: 600;
  font-size: var(--font-size-big);
  line-height: 40px;
}

.tabs {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--secondary-color-ton-12);
}
.tabs__buttons {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  background-color: var(--secondary-color-ton-1);
  border: 1px solid var(--secondary-color-ton-7);
  border-radius: 4px;
  min-height: 56px;
  padding: 8px 12px;
  max-width: 412px;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .tabs__buttons {
    gap: 24px;
  }
}
.tabs__button {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: var(--font-size-s);
  font-weight: 700;
  flex: 1 1 0;
  background-color: var(--white-color);
  border-radius: 8px;
  color: var(--font-dark-color-1);
}
.tabs__button_active {
  background-color: var(--primary-color);
  color: var(--white-color);
}
.tabs__time {
  display: flex;
  align-items: center;
}
.tabs__time-text {
  font-weight: 700;
}
.tabs__scheduled {
  display: flex;
  gap: 24px;
}
.tabs__icon {
  margin-right: 24px;
}

.payment-city-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.payment-city-card__title {
  font-weight: 700;
}

.summary {
  position: sticky;
  top: 20px;
  right: 0;
  background: var(--light-color);
  padding: 24px;
  border-radius: 24px;
}
.summary__main {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-weight: 600;
  font-size: 16px;
  color: var(--font-dark-color-1);
  margin-bottom: 8px;
}
.summary__title {
  max-width: 135px;
  overflow-wrap: break-word;
}
.summary__img {
  width: 96px;
}
.summary__content {
  flex: 1;
}
.summary__details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--font-secondary-color-ton-2);
  font-size: 13px;
}
.summary__top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--secondary-color-ton-14);
}
.summary__bottom {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 16px;
}
.summary__item {
  display: flex;
  justify-content: space-between;
  gap: 32px;
}
.summary__item-total-title, .summary__item-total-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--font-dark-color);
}
.summary__item-title {
  font-size: var(--font-size-m);
  color: var(--font-secondary-color-ton-2);
}
.summary__item-price {
  font-weight: 700;
  font-size: var(--font-size-m);
  color: var(--font-dark-color);
}

.product-popup {
  max-width: 976px;
  max-height: 682px;
}
.product-popup__title {
  position: relative;
  font-size: 24px;
  font-weight: 600;
  text-wrap: balance;
}
.product-popup__info {
  cursor: pointer;
  vertical-align: middle;
}
.product-popup__info:hover + .tooltip {
  visibility: visible;
  opacity: 1;
  z-index: 11;
}
.product-popup__description {
  font-size: 14px;
  color: var(--font-primary-color);
  max-width: 262px;
}
.product-popup__container {
  display: flex;
}
.product-popup__right {
  width: 424px;
}
.product-popup__left {
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: center;
  width: 552px;
  padding: 48px 0 48px 48px;
}
.product-popup__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  overflow: auto;
  padding: 48px 32px 48px 32px;
}
.product-popup__content::-webkit-scrollbar {
  width: 7px;
}
.product-popup__content::-webkit-scrollbar-track {
  background: transparent;
}
.product-popup__content::-webkit-scrollbar-thumb {
  background-color: #939396;
  border-radius: 20px;
}
.product-popup__bottom {
  padding: 16px 16px 32px 32px;
}
.product-popup__image {
  border-radius: 24px;
  padding: 50px;
  background-color: #F6F7F9;
}

.extras__title {
  font-weight: 700;
  margin: 18px 0 28px 0;
}
.extras__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.extra-item-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 106px;
  box-shadow: 0 1px 4px 0px rgba(12, 12, 13, 0.05);
  border-radius: 8px;
  padding: 16px 0;
}
.extra-item-card__name {
  font-size: 11px;
  margin-bottom: 8px;
}
.extra-item-card__counter {
  margin: auto 12px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.extra-item-card__counter-control {
  display: flex;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.extra-item-card__counter-value {
  font-weight: 500;
  font-size: 12px;
  margin: 0 4px;
  color: var(--primary-color);
}

.tooltip {
  position: absolute;
  color: var(--tooltip-text-color);
  background-color: var(--tooltip-color);
  border-radius: 4px;
  padding: 10px;
  visibility: hidden;
  opacity: 0;
  z-index: 20;
  transition: all 0.3s ease;
}
.tooltip.isActive {
  visibility: visible;
  opacity: 1;
}
.tooltip[icon-arrow-up]:after {
  content: "";
  top: -20px;
  right: 12px;
  position: absolute;
  border: 12px solid transparent;
  border-bottom: 12px solid var(--tooltip-color);
}
.tooltip__heading {
  margin-bottom: 12px;
}
.tooltip__title {
  font-weight: 600;
  font-size: var(--font-size-m);
}
.tooltip__title_size_s {
  font-size: var(--font-size-s);
}
.tooltip__subtitle {
  font-weight: 400;
  font-size: var(--font-size-xs);
  color: var(--font-tooltip-subtitle);
}
.tooltip__column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tooltip__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.tooltip__text {
  font-weight: 400;
  font-size: var(--font-size-s);
}
.tooltip__text_mt {
  margin-top: 4px;
}
.tooltip__text_size_xs {
  font-size: var(--font-size-xs);
}
.tooltip__text_size_s {
  font-size: var(--font-size-m);
}
.tooltip_secondary {
  font-size: 14px;
  top: calc(100% + 6px);
  left: 0;
  padding: 16px;
  width: 100%;
  max-width: 270px;
  border-radius: 10px;
}
.tooltip_primary {
  top: 50px;
  right: 0;
}

.status {
  display: inline-flex;
}
.status_success {
  color: var(--status-success);
}

.navbar__left-wrap {
  margin-left: 16px;
}
.nav-caterogies {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  border-radius: 16px;
  gap: 12px;
  overflow: auto;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.nav-caterogies::-webkit-scrollbar {
  display: none;
}
.nav-caterogies__item_active {
  color: var(--primary-color);
}
.nav-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-actions__button {
  width: -moz-min-content;
  width: min-content;
}
.nav-actions__button + .nav-actions__button {
  margin-left: 8px;
}

.notification {
  padding: 24px 42px;
  border: 1px solid var(--primary-color);
  background-color: var(--light-color);
  border-radius: 24px;
}
.notification_size-s {
  max-width: 544px;
}
.notification__text {
  font-size: 16px;
  line-height: 140%;
  color: var(--font-primary-color);
}
.notification__highlight {
  font-weight: 600;
  font-size: var(--font-size-m);
  color: var(--primary-color);
}

.certification {
  display: flex;
  align-items: center;
  gap: 14px;
}
.certification__img {
  display: flex;
}
.certification__input {
  max-width: 338px;
  margin-left: auto;
}

.banner {
  display: flex;
  border: 1px solid #D6D6D6;
  border-radius: 16px;
  overflow: hidden;
}

.order-placed {
  margin: 0 auto;
  max-width: 848px;
}

.download-app {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.download-app__text {
  color: var(--font-secondary-color-ton-1);
  margin-bottom: 16px;
}
.download-app__list {
  display: flex;
  align-items: center;
  gap: 24px;
}

.label {
  font-weight: 700;
  border-radius: 14px;
  padding: 2px 6px;
  font-size: var(--font-size-xs);
}
.label_size_xs {
  font-size: 8px;
}
.label_primary {
  background-color: var(--label-primary-color);
  color: #FFFFFF;
}

.chips__container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.chips__title {
  font-weight: 700;
  margin-bottom: 16px;
}

.chip {
  display: inline-flex;
  justify-content: center;
  padding: 16px 14px;
  border-radius: 24px;
  border: 1px solid var(--chip-primary-color);
  font-size: var(--font-size-m);
  font-weight: 600;
  color: var(--font-dark-color-1);
  background-color: var(--chip-primary-color);
  min-width: calc(50% - 4px);
  cursor: pointer;
}
.chip.isActive {
  color: var(--font-dark-color-1);
  background-color: var(--chip-primary-color-isActive);
  box-shadow: 0px 0px 4px 1px rgba(218, 218, 218, 0.8);
}

.choose-present {
  padding: 40px;
}
.choose-present__title {
  font-weight: 600;
  font-size: var(--font-size-xxl);
  margin-bottom: 8px;
}
.choose-present__subtitle {
  font-weight: 600;
  font-size: var(--font-size-s);
  margin-bottom: 24px;
}
.choose-present__close {
  right: -60px;
  top: 0;
}
.choose-present__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 480px;
  overflow: auto;
}
.choose-present__item {
  display: flex;
  gap: 16px;
  padding: 16px;
  width: 320px;
}
.choose-present__item-image {
  width: 112px;
  height: 112px;
}
.choose-present__item-content {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
}
.choose-present__item-title {
  color: var(--font-primary-color);
  font-size: var(--font-size-m);
  font-weight: 700;
  margin-bottom: 4px;
}
.choose-present__item-description {
  font-size: var(--font-size-s);
  color: var(--font-secondary-color-ton-2);
  margin-bottom: 16px;
}

.auth {
  padding: 24px;
}
.auth__container {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 16px;
}
.auth__container.hidden {
  display: none;
}
.auth__title {
  max-width: 192px;
  font-size: 24px;
  font-weight: 700;
}
.auth__wrapper-input-code {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 67px;
}
.auth__input-code {
  text-align: center;
}
.auth__code {
  display: none;
}
.auth__consents {
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
}
.auth__consent {
  cursor: pointer;
  display: flex;
  align-items: flex-start;
}
.auth__consent-checkbox {
  cursor: pointer;
}
.auth__consent-text {
  margin-left: 12px;
}
.auth__message {
  max-width: 300px;
}

.skeleton--size-400 {
  width: 100%;
  max-width: 400px;
}
.skeleton--column {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.skeleton__item {
  width: 100%;
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 8px;
}
.skeleton__item--fluid {
  width: 100%;
  height: 100%;
}
.skeleton__item--size {
  height: 20px;
  width: 100%;
}
.skeleton__item--size-m {
  height: 56px;
}
.skeleton__item--size-btn {
  height: 40px;
  max-width: 160px;
}
.skeleton__item--size-504 {
  max-width: 504px;
  height: 504px;
}
.skeleton__item--size-400 {
  max-width: 400px;
}
.skeleton__item--size-300 {
  max-width: 300px;
}
.skeleton__item--size-200 {
  max-width: 200px;
}
.skeleton__item--size-130 {
  max-width: 130px;
}
.skeleton__item--size-100 {
  max-width: 100px;
}
.skeleton__item--size-70 {
  max-width: 70px;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.preload {
  pointer-events: none;
  opacity: 0.5;
}
.preload::after {
  content: "";
  display: flex;
  width: 25px;
  height: 25px;
  border: 3px solid #ffffff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: load 1s linear infinite;
}

@keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.heading {
  font-weight: 600;
  font-size: 28px;
}

.address-search {
  position: relative;
  width: 100%;
  border-radius: 16px;
}
.address-search.isActive {
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.0509803922);
}
.address-search.isActive.has-items .input-ui {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: unset;
}
.address-search.isActive .input-ui {
  position: relative;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.0509803922);
  z-index: 2;
  color: #000000;
  font-weight: 600;
}
.address-search.isActive .address-search__dropdown-list {
  display: block;
  background-color: #ffffff;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  box-shadow: 0px 7px 14px -5px rgba(0, 0, 0, 0.0705882353);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  border-left: 1px solid rgba(0, 0, 0, 0.0509803922);
  border-right: 1px solid rgba(0, 0, 0, 0.0509803922);
}
.address-search__dropdown-list {
  display: none;
  overflow: hidden;
}
.address-search__item {
  cursor: pointer;
  font-size: var(--font-size-s);
  padding: 18px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.0509803922);
}
.address-search__item-subtitle {
  color: #A3A3A3;
  font-size: 14px;
  margin-top: 4px;
}
.address-search .input-ui__input {
  font-size: 16px;
  padding: 30px 14px 12px 12px;
}

.floating-label {
  position: relative;
}

.floating-placeholder {
  position: absolute;
  left: 14px;
  top: 22px;
  transition: all 0.2s ease;
  color: #808080;
  pointer-events: none;
  font-size: 14px;
  font-weight: 400;
}

.floating-placeholder.active {
  top: 10px;
}

.consent {
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.consent__checkbox {
  cursor: pointer;
}
.consent-text {
  margin-left: 12px;
}

.alert {
  display: none;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 102;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.1019607843);
  box-shadow: 20px 20px 20px 0px rgba(0, 0, 0, 0.0784313725);
  border-radius: 16px;
  padding: 32px;
}
.alert.active {
  display: flex;
}
.alert__row {
  display: flex;
  width: 100%;
  gap: 24px;
}
.alert__emoji {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFEA9F;
  width: 106px;
  height: 106px;
  margin-bottom: 24px;
  border-radius: 50%;
}
.alert__emoji-square {
  width: 56px;
  height: 56px;
  background-color: #FFEA9F;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.alert__title {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}
.alert__description {
  text-align: left;
  margin-top: 24px;
  color: rgba(0, 0, 0, 0.5607843137);
}
.alert__info {
  color: rgba(34, 34, 34, 0.5607843137);
  margin-top: 8px;
}
.alert__button {
  background: var(--primary-color);
  margin-top: 40px;
  border-radius: 16px;
  height: 48px;
  width: 248px;
  color: #FFFFFF;
}
.alert__button_size_s {
  width: 180px;
}
.alert__button_delete {
  font-weight: 600;
  color: #222222;
  border: 1px solid #222222;
  background: transparent;
}
.alert__actions {
  display: flex;
  gap: 16px;
  align-self: flex-end;
}
.alert__close {
  display: flex;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.alert_size_lg {
  width: 510px;
}
.alert_size_xl {
  width: 640px;
}
.alert-error {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  z-index: 9999;
}
.alert-error__item {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 12px 32px 12px 12px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: sans-serif;
  animation: slideIn 0.3s ease-out;
  border: 1px solid rgba(0, 0, 0, 0.1019607843);
  box-shadow: 20px 20px 20px 0px rgba(0, 0, 0, 0.0784313725);
  cursor: pointer;
}
.alert-error__item.fade-out {
  animation: slideOut 0.3s ease-out;
}
.alert-error__icon-danger {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: #FFB8B8;
  border-radius: 5px;
  margin-right: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5368 0.513352L18.915 5.91536L18.9002 13.5372L13.499 18.915L5.8763 18.9005L0.498485 13.4994L0.512974 5.87667L5.91499 0.498491L13.5368 0.513352Z' fill='url(%23paint0_linear_53_10)' stroke='%23E62D05'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_53_10' x1='10' y1='1' x2='10' y2='21' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FAD0C5'/%3E%3Cstop offset='0.5625' stop-color='%23D32905'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}
.badges {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.badges_left-top {
  left: 60px;
  top: 60px;
}

.badge {
  display: flex;
}

.datepicker-custom-header {
  padding: 0 36px;
}

.datepicker-custom-header__year {
  color: #222222;
  font-size: 24px;
  line-height: 100%;
  margin-top: 24px;
  margin-bottom: 15px;
}

.datepicker-custom-header__formatted {
  color: #222222;
  font-size: 24px;
  line-height: 100%;
  font-weight: 600;
  margin-bottom: 30px;
}

.datepicker-header {
  padding: 0 22px;
}

.datepicker-main {
  padding: 8px 25px 8px 25px;
}

.datepicker__icon {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: top;
  right: 16px;
  z-index: 1;
  transition: rotate 0.3s ease-in-out;
}

.datepicker-container {
  position: relative;
  max-width: 300px;
}

.datepicker-header .datepicker-controls .button.prev-button,
.datepicker-header .datepicker-controls .button.next-button {
  flex: auto;
  background-color: #F3F8FE;
  border-radius: 50%;
  max-width: 48px;
  height: 48px;
  box-shadow: 0px -0.77px 1px 0px rgba(51, 132, 208, 0.1019607843) inset;
}

.datepicker-label {
  display: flex;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #222222;
}

.datepicker-input-container {
  position: relative;
  display: flex;
  height: 64px;
  align-items: center;
  background-color: #ffffff;
  border: 2px solid #E4E8F2;
  border-radius: 24px;
  box-sizing: border-box;
  transition: 0.3s ease all;
}

.datepicker-input-container.active {
  border-color: #E44318;
}

.datepicker-input-container.active .datepicker__icon {
  color: #E44318;
  rotate: 180deg;
}

.datepicker-input {
  padding: 22px 46px 22px 16px;
  font-size: 16px;
  font-weight: 500;
  color: #222222;
  background-color: transparent;
  cursor: pointer;
  z-index: 2;
}

.datepicker .datepicker-header {
  font-size: 18px;
  font-weight: 600;
  color: #353E5C;
  text-align: center;
}

.datepicker-dropdown {
  padding-top: 17px;
  margin-left: -3px;
}

.datepicker .datepicker-picker {
  max-width: 677px;
  border: 1px solid #E1E4ED;
  border-radius: 48px;
  box-shadow: 0px 10.72px 30.63px 0px rgba(25, 33, 61, 0.0392156863);
  padding: 12px;
  background-color: #fff;
}

.datepicker-header .datepicker-controls {
  padding: 0;
}

.datepicker .datepicker-controls button {
  background: none;
  border: none;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  color: #222222;
  height: auto;
}

.datepicker .datepicker-view {
  width: unset;
}

.datepicker-header .datepicker-controls .button.view-switch {
  cursor: default;
  padding-bottom: 0;
  padding-top: 0;
}

.datepicker-header .datepicker-controls .button.view-switch:active {
  background-color: unset;
}

.datepicker-header .datepicker-controls .button.view-switch:hover {
  color: #222222;
}

.datepicker-header .datepicker-controls .button.view-switch:hover {
  background-color: unset;
}

.datepicker .datepicker-view .days .datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.datepicker .datepicker-view .days span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 18px;
  font-size: 18px;
  width: 48px;
  height: 48px;
}

.datepicker-cell.next:not(.disabled),
.datepicker-cell.prev:not(.disabled) {
  color: #E2E2E2;
}

.datepicker .datepicker-view .days span.selected {
  background-color: unset;
  font-weight: 400;
  width: 47px;
  height: 47px;
  margin: auto;
}

.datepicker .datepicker-view .days span.focused {
  background-color: #ff5722;
  font-weight: 600;
  color: #fff;
  width: 48px;
  height: 48px;
  margin: auto;
  box-shadow: 0px 7.66px 15.32px 0px rgba(0, 109, 239, 0.2);
}

.datepicker-cell:not(.disabled):hover {
  background-color: unset;
}

.datepicker .datepicker-view .dow {
  font-weight: bold;
  text-align: center;
  color: #333;
}

.scheduled-time {
  position: relative;
  max-width: 172px;
}
.scheduled-time__label {
  display: flex;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #222222;
}
.scheduled-time__input {
  width: 100%;
  padding: 22px 46px 22px 16px;
  color: #222222;
  font-weight: 500;
  z-index: 2;
  cursor: pointer;
  background-color: transparent;
}
.scheduled-time__input-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  background-color: #ffffff;
  border: 1px solid #B4B9C9;
  border-radius: 24px;
  box-sizing: border-box;
  transition: 0.3s ease all;
  height: 64px;
}
.scheduled-time__input-wrapper.active {
  border-color: #E44318;
}
.scheduled-time__input-wrapper.active .scheduled-time__icon {
  color: #E44318;
  rotate: 180deg;
}
.scheduled-time__icon {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: top;
  right: 16px;
  z-index: 1;
  transition: rotate 0.3s ease-in-out;
}
.scheduled-time__list {
  position: absolute;
  left: 0;
  z-index: 2;
  background-color: #fff;
  border: 1px solid #F1F3F7;
  box-shadow: 0px 7px 20px 0px rgba(25, 33, 61, 0.0392156863);
  border-radius: 24px;
  width: 172px;
  height: 176px;
  overflow: auto;
  padding: 8px;
  scrollbar-color: #E4E6EB #FAFBFC;
}
.scheduled-time__list::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
  background: transparent;
}
.scheduled-time__list::-webkit-scrollbar {
  width: 8px;
  height: 0px;
}
.scheduled-time__list::-webkit-scrollbar-track {
  background: #FAFBFC;
  border-radius: 8px;
}
.scheduled-time__list::-webkit-scrollbar-thumb {
  background-color: #E1E4ED;
  border-radius: 8px;
}
.scheduled-time__option {
  font-size: 16px;
  font-weight: 500;
  padding: 20px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.scheduled-time__option.active {
  background-color: #FFF4F1;
}
.scheduled-time__option:hover {
  background-color: #FFF4F1;
}

.swiper__pagination {
  position: absolute;
  width: 108px;
  height: 28px;
  right: 50%;
  bottom: 12px;
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.6980392157);
  z-index: 1;
  border-radius: 14px;
}
.swiper .swiper-pagination-bullets {
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper .swiper-pagination-bullets .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
}
.swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
  width: 12px;
  height: 12px;
  background-color: var(--dark-color-1);
}
.swiper__button-prev, .swiper__button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease;
  z-index: 1;
}
.swiper__button-prev:hover, .swiper__button-next:hover {
  background: rgb(255, 255, 255);
}
.swiper__button-prev {
  left: 10px;
}
.swiper__button-next {
  right: 10px;
}
.swiper.slider1 img {
  border-radius: 14px;
}

.promocode {
  position: relative;
  display: flex;
  border: 1px solid var(--secondary-color-ton-15);
  border-radius: 16px;
  height: 40px;
  background-color: var(--secondary-color-ton-15);
}
.promocode.error {
  border-color: var(--error-color);
}
.promocode.error .promocode__input {
  color: var(--error-color);
}
.promocode__gift {
  display: flex;
  position: absolute;
  align-items: center;
  inset: -2px;
  border-radius: 16px;
  padding: 5px 12px;
}
.promocode__gift-value {
  margin-left: auto;
  margin-right: 8px;
}
.promocode__gift-clear {
  display: flex;
  cursor: pointer;
}
.promocode_theme_light {
  border: 1px solid #D8D7D5;
  background-color: transparent;
}
.promocode_size_m {
  max-width: 272px;
}
.promocode__input {
  width: 100%;
  padding: 0 13px;
  text-transform: uppercase;
  background-color: inherit;
  border-radius: 16px;
  font-weight: 600;
  color: var(--font-primary-color);
}
.promocode__input::-moz-placeholder {
  font-size: var(--font-size-s);
  color: var(--secondary-color-ton-2);
  font-weight: 600;
}
.promocode__input::placeholder {
  font-size: var(--font-size-s);
  color: var(--secondary-color-ton-2);
  font-weight: 600;
}
.promocode__button {
  background-color: var(--primary-color-ton-1);
  color: var(--primary-color);
  padding: 4px 20px;
  font-size: var(--font-size-s);
  line-height: 22px;
  font-weight: 600;
  border-radius: 16px;
}
.promocode__button_secondary {
  color: var(--dark-color);
  background-color: var(--tertiary-color);
}

.input-ui {
  position: relative;
  overflow: hidden;
}
.input-ui__input {
  font-size: var(--font-size-s);
  width: 100%;
  padding: 12px 14px;
  background-color: transparent;
  color: var(--font-primary-color);
}
.input-ui__input:disabled {
  background-color: transparent;
  color: var(--secondary-color-ton-7);
}
.input-ui__input:disabled::-moz-placeholder {
  color: var(--secondary-color-ton-7);
}
.input-ui__input:disabled::placeholder {
  color: var(--secondary-color-ton-7);
}
.input-ui__input::-moz-placeholder {
  color: var(--font-secondary-color-ton-4);
}
.input-ui__input::placeholder {
  color: var(--font-secondary-color-ton-4);
}
.input-ui_limit_m {
  max-width: 270px;
}
.input-ui_limit_cvv {
  max-width: 140px;
}
.input-ui_size_m {
  min-height: 48px;
}
.input-ui_size_sm {
  min-height: 55px;
}
.input-ui_size_l {
  min-height: 64px;
}
.input-ui_primary {
  display: flex;
  flex: 1 1 0;
  min-height: 64px;
  background-color: var(--light-color);
  border: 1px solid var(--input-ui-border-color);
  border-radius: 16px;
}
.input-ui_secondary {
  display: flex;
  flex: 1 1 0;
  background-color: var(--input-ui-background-color);
  border: 1px solid var(--input-ui-border-color);
  border-radius: 24px;
}
.input-ui_tertiary {
  display: flex;
  background-color: #ffffff;
  border: 1px solid var(--secondary-color);
  border-radius: 4px;
}
.input-ui_code {
  display: flex;
  width: 49px;
  min-height: 70px;
  background-color: #ffffff;
  text-align: center;
  border: 1px solid var(--secondary-color-ton-17);
  border-radius: 8px;
}
.input-ui-group {
  display: flex;
  gap: 8px;
}
.input-ui_textarea {
  min-height: 115px;
}
.input-ui_textarea-size-s {
  height: 88px;
}
.input-ui__textarea {
  resize: none;
}
.input-ui-card {
  display: flex;
  border: 1px solid #E4E9F2;
  border-radius: 8px;
  overflow: hidden;
}
.input-ui-card__input {
  max-width: 135px;
}
.input-ui-card__icon {
  display: flex;
  min-width: 51px;
  margin: 13px 18px 13px 11px;
}
.input-ui-card__button {
  font-size: var(--font-size-s);
  background-color: #E6E6E6;
  border-radius: 8px 0px 0px 8px;
  padding: 0 13px;
}
.input-ui_cashback {
  border-radius: 8px;
}
.input-ui_certification {
  border-radius: 8px;
}
.input-ui_icon_card {
  position: relative;
  padding-right: 48px;
}
.input-ui_icon_card:after {
  content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.74 16.8214H10.24C9.826 16.8214 9.49 16.4865 9.49 16.074C9.49 15.6614 9.826 15.3266 10.24 15.3266H15.74C16.154 15.3266 16.49 15.6614 16.49 16.074C16.49 16.4865 16.154 16.8214 15.74 16.8214ZM8.5 9.53566C8.5 9.8117 8.275 10.0339 8 10.0339H4C3.723 10.0339 3.5 9.8117 3.5 9.53566V7.04431C3.5 6.77026 3.723 6.54604 4 6.54604H8C8.275 6.54604 8.5 6.77026 8.5 7.04431V9.53566ZM7.24 16.8214H4.24C3.826 16.8214 3.49 16.4865 3.49 16.074C3.49 15.6614 3.826 15.3266 4.24 15.3266H7.24C7.654 15.3266 7.99 15.6614 7.99 16.074C7.99 16.4865 7.654 16.8214 7.24 16.8214ZM21.5 4.05469H2.5C1.672 4.05469 1 4.72436 1 5.5495V18.5045C1 19.3306 1.672 19.9993 2.5 19.9993H21.5C22.329 19.9993 23 19.3306 23 18.5045V5.5495C23 4.72436 22.329 4.05469 21.5 4.05469Z' fill='%236C6C6C'/%3E%3C/svg%3E%0A");
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
}
.input-ui_icon_lock {
  position: relative;
  padding-right: 48px;
}
.input-ui_icon_lock:after {
  content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.37477 7.93128C8.37477 5.93447 10.0005 4.31042 11.9996 4.31042C13.9987 4.31042 15.6244 5.93447 15.6244 7.93128V9.73176H8.37477V7.93128ZM18.343 9.73176H17.4368V7.93129C17.4368 4.93652 14.9982 2.5 11.9996 2.5C9.00096 2.5 6.56238 4.93652 6.56238 7.93129V9.73176H5.65618C4.90584 9.73176 4.29688 10.3398 4.29688 11.0898V20.142C4.29688 20.892 4.90584 21.5 5.65618 21.5H18.343C19.0933 21.5 19.7023 20.892 19.7023 20.142V11.0898C19.7023 10.3398 19.0933 9.73176 18.343 9.73176ZM12.9058 15.8172V17.8791C12.9058 18.3786 12.4998 18.7839 11.9996 18.7839C11.4984 18.7839 11.0934 18.3786 11.0934 17.8791V15.8172C10.5533 15.5041 10.1872 14.9269 10.1872 14.2583C10.1872 13.2585 10.9982 12.4479 11.9996 12.4479C13 12.4479 13.812 13.2585 13.812 14.2583C13.812 14.9269 13.445 15.5041 12.9058 15.8172Z' fill='%236C6C6C'/%3E%3C/svg%3E%0A");
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
}
.input-ui_icon_calendar {
  position: relative;
  padding-right: 48px;
}
.input-ui_icon_calendar:after {
  content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2C6.44772 2 6 2.44772 6 3V4H5C3.89543 4 3 4.89543 3 6V8H21V6C21 4.89543 20.1046 4 19 4H18V3C18 2.44772 17.5523 2 17 2H16C15.4477 2 15 2.44772 15 3V4H9V3C9 2.44772 8.55228 2 8 2H7Z' fill='%236C6C6C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21 10H3V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V10ZM6 13C6 12.4477 6.44772 12 7 12H9C9.55228 12 10 12.4477 10 13V14C10 14.5523 9.55228 15 9 15H7C6.44772 15 6 14.5523 6 14V13Z' fill='%236C6C6C'/%3E%3C/svg%3E%0A");
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
}
.input-ui__placeholder {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: var(--font-secondary-color-ton-4);
  font-size: 14px;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.input-ui__required-star {
  color: red;
  margin-left: 2px;
}
.input-ui__input:not(:-moz-placeholder-shown) + .input-ui__placeholder {
  opacity: 0;
}
.input-ui__input:focus + .input-ui__placeholder, .input-ui__input:not(:placeholder-shown) + .input-ui__placeholder {
  opacity: 0;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-section__heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  line-height: 40px;
}
.form-section__action {
  display: flex;
  align-items: center;
  gap: 4px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}
.switch__input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch__input:checked + .switch__slider {
  background-color: var(--primary-color);
}
.switch__input:checked + .switch__slider:before {
  transform: translateX(24px);
}
.switch__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid var(--secondary-color-ton-7);
  background-color: var(--secondary-color-ton-9);
  transition: 0.4s;
  border-radius: 100px;
}
.switch__slider:before {
  position: absolute;
  content: "";
  height: 23px;
  width: 23px;
  left: 1px;
  bottom: 1.5px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.radio-option {
  display: flex;
  align-items: center;
  position: relative;
  padding-right: 40px;
  min-height: 32px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  gap: 14px;
}
.radio-option__icon {
  display: inline-flex;
}
.radio-option__input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.radio-option__input:checked ~ .radio-option__indicator {
  background-color: var(--white-color);
  border-color: #faf1ec;
}
.radio-option__input:checked ~ .radio-option__indicator:after {
  border-color: var(--primary-color);
  background: var(--primary-color);
}
.radio-option__indicator {
  position: absolute;
  top: 0;
  right: 0;
  height: 32px;
  width: 32px;
  background-color: var(--secondary-color-ton-1);
  border: 1px solid var(--secondary-color-ton-1);
  border-radius: 50%;
}
.radio-option__indicator:after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--secondary-color-ton-11);
  background: var(--secondary-color-ton-10);
}

.product-options__wrapper {
  position: relative;
  display: flex;
  justify-content: space-between;
  background-color: #F6F7F9;
  border-radius: 24px;
  border: 1px solid #EEF1F7;
}
.product-options__label {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  position: relative;
  font-size: 14px;
  z-index: 1;
  text-align: center;
  transition: color 0.3s ease;
}
.product-options__text {
  padding: 10px 0;
}
.product-options__text-top {
  font-weight: 600;
  line-height: 1.5;
}
.product-options__text-bottom {
  color: var(--font-secondary-color-ton-4);
  line-height: 1.5;
}
.product-options__active-indicator {
  position: absolute;
  height: calc(100% - 2px);
  background-color: white;
  border-radius: 24px;
  transition: transform 0.3s ease;
  z-index: 0;
  top: 1px;
  left: 2px;
  box-shadow: 0px 0px 4px 1px rgba(218, 218, 218, 0.8);
}
.product-options__active-indicator[data-options-count="1"] {
  width: calc(100% - 2px);
}
.product-options__active-indicator[data-options-count="2"] {
  width: calc(50% - 2px);
}
.product-options__active-indicator[data-options-count="3"] {
  width: calc(33.3333333333% - 1px);
}
.product-options input[type=radio] {
  display: none;
}
.product-options__input_size-small:checked + .product-options__label ~ .product-options__active-indicator {
  transform: translateX(0);
}
.product-options__input_size-medium:checked + .product-options__label ~ .product-options__active-indicator {
  transform: translateX(100%);
}
.product-options__input_size-large:checked + .product-options__label ~ .product-options__active-indicator {
  transform: translateX(200%);
}

.checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  display: grid;
  place-content: center;
  margin: 0;
  width: 17px;
  height: 17px;
  border-radius: 3px;
  transform: translateY(-0.075em);
}
.checkbox::before {
  content: url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.42572 1.07241C6.7601 0.631144 7.40156 0.535233 7.85844 0.858186C8.31533 1.18114 8.41464 1.80066 8.08025 2.24192L4.94554 6.37856C4.58313 6.8568 3.88408 6.91043 3.45297 6.49306L1.02206 4.13968C0.622184 3.75256 0.622956 3.12566 1.02378 2.73946C1.42461 2.35326 2.0737 2.354 2.47357 2.74112L4.02385 4.24196L6.42572 1.07241Z' fill='white'/%3E%3C/svg%3E%0A");
  display: flex;
  justify-content: center;
  align-items: center;
  width: 17px;
  height: 17px;
  background-color: #ffffff;
  border: 1px solid var(--secondary-color);
  border-radius: 3px;
}
.checkbox:checked::before {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.checkbox:disabled {
  cursor: not-allowed;
}

.cart {
  position: fixed;
  background: var(--light-color);
  z-index: 102;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  animation: transform 0.3s ease-out;
  transform: translateX(100%);
}
@media (min-width: 568px) {
  .cart {
    max-width: 432px;
  }
}
.cart__close {
  position: absolute;
  top: 23px;
  right: 10px;
  cursor: pointer;
  z-index: 102;
  width: 40px;
  height: 40px;
}
@media (min-width: 568px) {
  .cart__close {
    left: -61px;
  }
}
.cart__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.cart__top {
  flex: 1 1 0;
}
.cart__top-title {
  flex: 1 1 0;
}
.cart__top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 40px;
  padding: 16px;
}
.cart__bottom {
  background-color: #FFFFFF;
}
.cart__add-title {
  margin-top: 25px;
  font-size: 15px;
  font-weight: 600;
  padding: 0 16px;
}
.cart .swiper-slide {
  width: auto;
  margin-top: 16px;
  margin-bottom: 16px;
  margin-right: 8px;
}
.cart .swiper-slide:first-child {
  margin-left: 16px;
}
.cart__promocode {
  border-color: var(--secondary-color-ton-4);
  background-color: var(--secondary-color-ton-15);
  margin-bottom: 8px;
}
.cart__choose-present {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--secondary-color-ton-4);
}
.cart__choose-present-text {
  font-size: var(--font-size-s);
  max-width: 215px;
}
.cart__total-top, .cart__total-bottom {
  display: flex;
  flex-direction: column;
}
.cart__total-top {
  padding: 24px 16px 8px 16px;
  gap: 8px;
}
.cart__total-bottom {
  padding: 8px 16px 16px 16px;
  gap: 16px;
}
.cart__total-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.cart__total-title {
  font-weight: 700;
}
.cart__total-subtitle {
  font-size: var(--font-size-xxs);
  margin-top: 2px;
}
.cart__total-value {
  font-weight: 600;
}
.cart__total-value-old {
  color: var(--font-secondary-color-ton-5);
  text-decoration: line-through;
}
.cart__icon-clear {
  display: flex;
  cursor: pointer;
}
.cart__discount-title {
  display: flex;
  align-items: center;
}

@keyframes transform {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
.product-cart-item {
  background: var(--white-color);
  border-bottom: 1px solid var(--secondary-color-ton-4);
}
.product-cart-item__top {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 16px 16px 4px 16px;
}
.product-cart-item__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 16px 16px 16px;
  gap: 16px;
}
.product-cart-item__action {
  display: flex;
  align-items: center;
  gap: 8px;
}
.product-cart-item__change {
  color: var(--primary-color);
  cursor: pointer;
}
.product-cart-item__delete {
  display: flex;
  cursor: pointer;
  margin-left: auto;
  align-self: flex-start;
}
.product-cart-item__title {
  font-size: 16px;
  font-weight: 700;
}
.product-cart-item__weight, .product-cart-item__desc, .product-cart-item__additional {
  font-size: 13px;
  color: var(--secondary-color-ton-6);
}
.product-cart-item__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
}
.product-cart-item__price {
  font-size: 18px;
  font-weight: 700;
}
.product-cart-item__change {
  font-size: var(--font-size-s);
}
.product-cart-item__img {
  width: 96px;
  height: 96px;
}

.product-cart-box {
  display: flex;
  width: 280px;
  background: var(--white-color);
  box-shadow: 5px 5px 30px 0px rgba(174, 174, 192, 0.4);
  padding: 30px 0;
  border-radius: 16px;
  gap: 8px;
}
.product-cart-box__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.product-cart-box__title {
  margin-bottom: 8px;
}
.product-cart-box__price {
  text-align: center;
  min-width: 76px;
  padding: 4px 8px;
  font-size: var(--font-size-s);
  line-height: 21px;
  font-weight: 400;
  color: var(--white-color);
  border-radius: 12px;
  background: var(--primary-color);
}

.make-order__button {
  display: inline-flex;
  align-items: center;
  color: var(--secondary-color-ton-2);
  background-color: var(--secondary-color-ton-15);
  padding: 21px 16px;
  border-radius: 24px;
  max-width: 252px;
}
.make-order__button-text {
  font-weight: 600;
  margin-left: 25px;
}
.make-order__container {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.make-order__heading {
  font-weight: 600;
  font-size: 28px;
  line-height: 40px;
}
.make-order__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 640px;
}
.make-order__summary {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 448px;
}
.make-order__privacy-policy {
  max-width: 445px;
}

.payment-methods__item {
  padding: 24px 0;
  border-bottom: 1px solid var(--secondary-color-ton-12);
}
.payment-methods__cashback {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
}
.payment-methods__cashback-label {
  font-weight: 700;
  margin-right: 12px;
}

.confirmation-options {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.confirmation-options__title {
  color: var(--dark-color);
  font-weight: 700;
  font-size: var(--font-size-m);
  line-height: 30px;
}
.confirmation-options__info {
  max-width: 224px;
  font-weight: 700;
  font-size: var(--font-size-m);
  color: var(--font-success-color);
}
.confirmation-options__option {
  display: flex;
  justify-content: space-between;
}
.confirmation-options__option-label {
  align-self: flex-start;
  line-height: 2;
}
.confirmation-options__option-group {
  flex: 1 1 0;
}
.confirmation-options__option + .confirmation-options__option {
  margin-top: 10px;
}

.navigation {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.navigation__item {
  font-weight: 500;
  background-color: var(--light-color-ton-1);
  color: var(--font-account-secondary-color);
  border-radius: 24px;
  padding: 8px 16px;
}
.navigation__item.isActive {
  color: var(--primary-color);
}
.navigation__item:hover {
  color: var(--primary-color);
}

.order {
  display: flex;
  flex-direction: column;
  background-color: #F6F7F9;
  border-radius: 16px;
  padding: 24px;
}
.order__row {
  display: flex;
  justify-content: space-between;
}
.order_gap-size-s {
  padding: 16px;
  gap: 16px;
}
.order_gap-size-m {
  padding: 32px;
  gap: 32px;
}
.order__title {
  font-weight: 600;
  font-size: var(--font-size-m);
  color: var(--font-primary-color);
}
.order__title_light {
  font-weight: 400;
}
.order__subtitle {
  margin-top: 4px;
  font-weight: 600;
  font-size: var(--font-size-m);
  color: var(--font-secondary-color-ton-5);
}
.order-progress {
  display: flex;
  gap: 8px;
}
.order-progress__stage-status {
  width: 80px;
  height: 4px;
  background: var(--secondary-color-ton-16);
  border-radius: 8px;
  transition: all 0.3s ease;
}
.order-progress__stage-status.isDone {
  background: var(--status-success);
}
.order-progress__stage-status.isWait {
  width: 144px;
  background: linear-gradient(90deg, var(--status-success) 50%, var(--secondary-color-ton-16) 50%);
  background-size: 200% 100%;
  animation: animated-progress 2s infinite reverse ease-in-out;
}
.order-progress__stage-label {
  margin-top: 5px;
  font-size: var(--font-size-s);
}
.order__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.order__items_row {
  display: flex;
  flex-direction: row;
}
.order__item {
  display: flex;
  align-items: center;
}
.order__item-image {
  width: 112px;
  height: 112px;
}
.order__item-name {
  font-size: var(--font-size-m);
  font-weight: 600;
  margin-left: 16px;
  margin-right: 10px;
  flex: 1 1 0;
}
.order__item-quantity {
  margin-right: 24px;
}
.order__item-price {
  font-weight: 600;
}
.order__text {
  font-weight: 600;
  font-size: var(--font-size-m);
  line-height: 1.5;
}
.order__text-primary {
  color: var(--font-primary-color);
}
.order__text-secondary {
  color: var(--font-secondary-color-ton-5);
}
.order__total {
  font-size: var(--font-size-l);
  font-weight: 600;
}
.order__status {
  font-size: var(--font-size-s);
  font-weight: 600;
}
.order__info {
  text-align: center;
  margin: 0 auto;
  max-width: 434px;
}
.order__info-title {
  font-weight: 600;
  margin-bottom: 16px;
  font-size: 22px;
}
.order__info-text {
  color: var(--font-dark-color);
}
.order__notification {
  margin: 0 auto;
  text-align: center;
  max-width: 544px;
}
.order__icon-completed {
  margin: 0 auto;
}
.order__description {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 16px;
  margin-right: 10px;
  flex: 1 1 0;
}
.order__name {
  font-size: var(--font-size-m);
  font-weight: 600;
}
.order__additional {
  font-size: 13px;
  color: var(--secondary-color-ton-6);
}

@keyframes animated-progress {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 200% 0%;
  }
}
.account__heading {
  font-size: var(--font-size-big);
  margin-bottom: 16px;
}
.account__content {
  display: flex;
  gap: 24px;
}
.account__orders {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 0;
}
.account__my-data {
  max-width: 640px;
}
.account__banner {
  max-width: 448px;
}

.profile-settings {
  max-width: 650px;
}
.profile-settings__notification {
  margin-bottom: 16px;
}
.profile-settings__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.profile-settings__phone {
  margin-bottom: 16px;
}
.profile-settings__delete-account {
  display: flex;
  font-size: 15px;
  font-weight: 600;
  gap: 4px;
  color: var(--primary-color);
}
.profile-settings__consent {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}
.profile-settings__actions {
  display: flex;
  gap: 8px;
}
.profile-settings__save {
  font-size: var(--font-size-xs);
  padding: 12px 16px;
  font-weight: 600;
  border-radius: 16px;
  color: #fff;
  background-color: var(--primary-color);
  min-height: 40px;
}
.profile-settings__logout {
  font-weight: 600;
  font-size: var(--font-size-xs);
  border-radius: 16px;
  padding: 12px 16px;
  color: var(--button-ui-text-neutral);
  background-color: var(--button-ui-neutral);
  min-height: 40px;
}

.stock__container {
  display: flex;
  justify-content: space-between;
  gap: 32px;
}
.stock__heading {
  margin-bottom: 24px;
}
.stock__content {
  max-width: 694px;
}
.stock__text {
  font-weight: 400;
  font-size: 18px;
  color: var(--font-dark-color-1);
}
.stock__banner {
  display: flex;
  max-width: 480px;
  border-radius: 24px;
  overflow: hidden;
}

.stocks__heading {
  margin-bottom: 28px;
}
.stocks__container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
}
@media (min-width: 768px) {
  .stocks__container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1280px) {
  .stocks__container {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}
.stocks__item {
  display: flex;
  flex-direction: row;
  box-shadow: 0px 1px 4px 0px rgba(12, 12, 13, 0.14);
  border-radius: 24px;
  overflow: hidden;
}
.stocks__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}
.stocks__img {
  width: 100%;
}
.stocks__img-wrap {
  display: flex;
  width: 268px;
  border-radius: 24px;
  overflow: hidden;
}
.stocks__title {
  font-weight: 500;
  font-size: 24px;
  margin-bottom: 16px;
}
.stocks__description {
  margin-bottom: 24px;
  color: var(--font-dark-color-1);
}
.stocks__btn {
  margin-top: auto;
}

@media (max-width: 1399px) {
  .header-top,
  .header-middle,
  .header-bottom,
  .main,
  .footer {
    display: none;
  }
}
.mobile-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  max-width: 375px;
  padding-top: 120px;
  padding-bottom: 40px;
  color: var(--font-dark-color-1);
  font-size: 14px;
}
@media (min-width: 1400px) {
  .mobile-app {
    display: none;
  }
}
.mobile-app__logo {
  margin-bottom: 40px;
}
.mobile-app__logo img {
  width: 180px;
}
.mobile-app__content {
  text-align: center;
  margin-bottom: 30px;
}
.mobile-app__title {
  margin-bottom: 16px;
  font-size: 30px;
  font-weight: 700;
}
.mobile-app__text-bold {
  font-weight: 700;
}
.mobile-app__downloads {
  display: flex;
  flex-direction: column;
  gap: 24px;
}