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

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}



/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}



/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textarea without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* tetatet theme */
body {
  /* background: #F9FAFA; */
  background: #ffffff;

  font-family: "Cera Pro";
}

.container {
  display: block;
  width: 100%;
  max-width: 1190px;
  padding: 0 15px;
  margin: 0 auto;

  @media (max-width: 1200px) {
    max-width: 100%;
  }

  @media (max-width: 960px) {
    max-width: 100%;
  }

  @media (max-width: 600px) {
    max-width: 100%;
  }

  @media (max-width: 425px) {
    max-width: 100%;
  }
}

.container-fluid {
  display: block;
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

.index-block {
  margin-top: 80px;
  margin-bottom: 80px;

  @media (max-width: 1200px) {
    margin-top: 80px;
    margin-bottom: 80px;
  }

  @media (max-width: 960px) {
    margin-top: 80px;
    margin-bottom: 80px;
  }

  @media (max-width: 600px) {
    margin-top: 80px;
    margin-bottom: 80px;
  }

  @media (max-width: 425px) {
    margin-top: 60px;
    margin-bottom: 60px;
  }

  & .container {
    @media (max-width: 1200px) {
      max-width: 960px;
    }

    @media (max-width: 960px) {
      max-width: 920px;
    }

    @media (max-width: 600px) {
      max-width: 560px;
    }

    @media (max-width: 425px) {
      max-width: 385px;
    }
  }
}

.btn {
  display: inline-flex;
  padding: 10px 60px;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  background: #878BAB;
  border: none;
  outline: none;

  text-align: center;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;

  text-decoration: none;
  color: #ffffff;

  cursor: pointer;
  transition: background .2s ease-out,
    color .2s ease-out, opacity .2s ease-out;

  &.btn--secondary {
    background: #ffffff;
    border: 1px solid #E6E7ED;

    color: #5A5B6C;
  }

  &.btn--icon {
    padding: 10px;
    border-radius: 50%;
    aspect-ratio: 1/1;

    &>img,
    &>svg {
      display: block;
      height: 20px;
      width: 20px;
      object-fit: contain;
      object-position: center;
    }
  }

  @media (hover: hover) {
    &:hover {
      opacity: .8;
    }
  }
}

label.label {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;

  &.label--centered {
    align-items: center;
  }
}

input.input,
textarea.textarea {
  display: inline-flex;
  padding: 15px 20px;
  border-radius: 5px;
  border: none;
  outline: none;
  background: #FFF;

  color: #5A5B6C;

  &::placeholder {
    opacity: 0.5;
  }

  &.input--secondary,
  &.textarea--secondary {
    background: #E6E7ED;

    color: #5A5B6C;
  }
}

input.input {
  height: 50px;
}

.form-control {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;

  & .form-control__label {
    color: #ACAEB8;
  }

  & .form-control__input {
    &>* {
      width: 100%;
    }
  }
}

.iti input.input {
  width: 100%;
}

input[type="checkbox"].checkbox {
  all: unset;
  display: inline-flex;
  height: 20px;
  width: 20px;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  border: 2px solid #868BAB;
  background: transparent;
  opacity: 0.6;

  transition: opacity .2s ease-out;
  cursor: pointer;

  &::after {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #868BAB;
    mask: url("/local/templates/zerapy/assets/icons/checked.svg") no-repeat center / contain;
    opacity: 0;
    transition: opacity .2s ease-out;
  }

  @media (hover: hover) {
    &:hover {
      opacity: 1;
    }
  }

  &:checked {
    opacity: 1;

    &::after {
      opacity: 1;
    }
  }
}

textarea.textarea {
  resize: none;

  &:not([rows]) {
    min-height: 110px;
  }
}

.accordion {
  display: flex;
  flex-direction: column;

  & .accordion__toggle {
    border: none;
    background: none;
    outline: none;

    cursor: pointer;
  }

  & .accordion__wrap {
    max-height: 0;
    overflow: hidden;

    transition: max-height 0.2s ease-out;
  }
}

blockquote.blockquote {
  display: flex;
  flex-direction: column;
  gap: 5px;

  & .blockquote__header {
    font-weight: 700;
    color: #868BAB;
  }

  & .blockquote__container {
    display: flex;
    padding: 30px 20px;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    border-radius: 10px;
    background: #ffffff;
  }

  & .blockquote__icon {
    display: inline-flex;
    height: 24px;
    width: 24px;

    color: #868BAB;

    & img,
    & svg {
      display: block;
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  & .blockquote__body {
    display: flex;
    flex-direction: column;

    color: #868BAB;
  }
}

.noUi-target {
  padding: 0 11px;
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: none;

  & .noUi-connects {
    border-radius: 4px;
    background: #A9ABB3;
  }

  & .noUi-connect {
    background: none;
  }

  & .noUi-handle {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(0, 0, 0, 0.20);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: none;

    &::before,
    &::after {
      content: none;
    }
  }

  &.noUi-horizontal {
    height: 22px;

    & .noUi-base {
      display: flex;
      align-items: center;
    }

    & .noUi-connects {
      height: 2px;
    }

    & .noUi-handle {
      top: 0;
      right: -11px;
    }
  }
}

.title {
  margin: 0;

  &.title--1 {
    font-size: 90px;
    font-style: normal;
    font-weight: 400;
    line-height: 90px;
  }

  &.title--2 {
    font-size: 46px;
    font-style: normal;
    font-weight: 400;
    line-height: 52px;
  }

  &.title--3 {
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
  }

  &.title--4 {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }

  &.title--5 {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
  }

  @media (max-width: 1200px) {
    &.title--1 {
      font-size: 90px;
      line-height: 90px;
    }

    &.title--2 {
      font-size: 46px;
      line-height: 52px;
    }

    &.title--3 {
      font-size: 28px;
      line-height: 36px;
    }

    &.title--4 {}

    &.title--5 {}
  }

  @media (max-width: 960px) {
    &.title--1 {
      font-size: 90px;
      line-height: 90px;
    }

    &.title--2 {
      font-size: 46px;
      line-height: 52px;
    }

    &.title--3 {
      font-size: 28px;
      line-height: 36px;
    }

    &.title--4 {}

    &.title--5 {}
  }

  @media (max-width: 600px) {
    &.title--1 {
      font-size: 58px;
      line-height: 58px;
    }

    &.title--2 {
      font-size: 36px;
      line-height: 44px;
    }

    &.title--3 {
      font-size: 20px;
      line-height: 24px;
    }

    &.title--4 {}

    &.title--5 {}
  }

  @media (max-width: 425px) {
    &.title--1 {
      font-size: 58px;
      line-height: 58px;
    }

    &.title--2 {
      font-size: 36px;
      line-height: 44px;
    }

    &.title--3 {
      font-size: 20px;
      line-height: 24px;
    }

    &.title--4 {}

    &.title--5 {}
  }
}

.text {
  margin: 0;

  &.text--1 {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
  }

  &.text--2 {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
  }

  &.text--3 {
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
  }

  &.text--4 {
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
  }

  &.text--5 {
    font-size: 10px;
    font-style: normal;
    font-weight: 300;
    line-height: 14px;
  }

  & b {
    font-weight: 700;
  }

  @media (max-width: 1200px) {
    &.text--2 {
      font-size: 16px;
      line-height: 22px;
    }
  }

  @media (max-width: 960px) {
    &.text--2 {
      font-size: 16px;
      line-height: 22px;
    }
  }

  @media (max-width: 600px) {
    &.text--2 {
      font-size: 16px;
      line-height: 22px;
    }
  }

  @media (max-width: 425px) {
    &.text--2 {
      font-size: 16px;
      line-height: 22px;
    }
  }
}

.accent {
  margin: 0;

  &.accent--1 {
    font-size: 95px;
    font-style: normal;
    font-weight: 300;
    line-height: 100px;
  }

  &.accent--2 {
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
  }

  &.accent--3 {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
  }

  &.accent--4 {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }

  @media (max-width: 1200px) {
    &.accent--2 {}

    &.accent--4 {
      font-size: 14px;
      line-height: 20px;
    }
  }

  @media (max-width: 960px) {
    &.accent--2 {}

    &.accent--4 {
      font-size: 14px;
      line-height: 20px;
    }
  }

  @media (max-width: 600px) {
    &.accent--2 {
      font-size: 16px;
      line-height: 22px
    }

    &.accent--1 {
      font-size: 70px;
      line-height: 70px;
    }

    &.accent--4 {
      font-size: 14px;
      line-height: 20px;
    }
  }

  @media (max-width: 425px) {
    &.accent--2 {}

    &.accent--4 {
      font-size: 14px;
      line-height: 20px;
    }
  }
}

.tab {
  display: inline-flex;
  padding: 10px 18px;

  border-radius: 30px;
  background: #ffffff;

  color: #5A5B6C;
  text-decoration: none;

  &.tab--active {
    color: #868BAB;
  }
}

.header-link {
  position: relative;

  display: inline-flex;

  text-decoration: none;
  color: #FFF;

  cursor: pointer;

  &::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -1px;
    right: 0;

    height: 1px;
    width: 0;
    background: #FFF;

    transition: width .2s ease-out;
  }

  &.header-link--active,
  &[data-active="true"] {
    &::after {
      width: 100%;
    }
  }

  @media (hover: hover) {
    &:hover {
      &::after {
        width: 100%;
      }
    }
  }
}

.header-sublink {
  display: inline-flex;

  text-decoration: none;
  color: #5a5b6c;

  cursor: pointer;

  @media (hover: hover) {
    &:hover {
      color: #878bab;
    }
  }
}

.header-link-icon {
  display: inline-flex;
  width: 25px;
  height: 25px;
  padding: 0;
  border: none;
  background: transparent;

  color: rgba(255, 255, 255, 0.6);

  transition: color .2s ease-out;

  & svg {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
  }

  @media (hover: hover) {
    &:hover {
      color: #ffffff;
    }
  }
}

.header-fixed__burger,
.header-fixed__menu-close,
.header-fixed__menu-backdrop {
  display: none;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
}

.header-fixed {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 10px 0;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: #9192A5;
    /* background: #5A5B6C; */
    /* opacity: 0.6; */
  }

  & .header-fixed__wrap {
    position: relative;

    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
  }

  & .header-fixed__logo {
    display: inline-flex;

    & svg {
      display: block;
      width: 158px;
      height: auto;
    }
  }

  & .header-fixed__navigation {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
  }

  & .header-fixed__menu-drawer {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  & .header-fixed__menu-body {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  & .header-fixed__more {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    margin-left: auto;
    gap: 30px;
  }

  & .header-fixed__phone {
    white-space: nowrap;

    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
  }

  & .header-fixed__nav-icons {
    display: inline-flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    gap: 30px;
  }

  & .header-link-icon {
    width: 20px;
    height: 20px;

    color: #fff;
  }

  & .header-fixed__menu-footer {
    display: none;
  }

  & .header-fixed__menu-logo {
    display: none;
  }
}

.header-fixed-basket {
  display: inline-flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;

  border: none;
  border-radius: 100px;
  background: #e7e8ee;

  text-decoration: none;

  transition: background .2s ease-out, opacity .2s ease-out;

  & .header-fixed-basket__icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 20px;
    height: 20px;

    color: #9192a5;

    transition: color .2s ease-out;

    & svg {
      display: block;
      height: 100%;
      width: 100%;
      object-fit: contain;
      object-position: center;
    }
  }

  & .header-fixed-basket__label {
    color: #9192a5;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
  }

  & .header-fixed-basket__badge {
    display: inline-flex;
    min-width: 25px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 25px;
    background: #ffffff;
    box-sizing: border-box;
  }

  & .header-fixed-basket__count {
    color: #9192a5;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
  }

  @media (hover: hover) {
    &:hover {
      background: #dcdde8;

      & .header-fixed-basket__icon {
        color: #7a7b8c;
      }
    }
  }
}

body.header-menu--open {
  overflow: hidden;
  padding-right: var(--header-menu-scrollbar-comp, 0px);
}

body.header-menu--open .header-fixed {
  padding-right: var(--header-menu-scrollbar-comp, 0px);
}

@media (max-width: 1400px) and (min-width: 961px) {
  .header-fixed {
    & .header-fixed__wrap {
      gap: 16px;
    }

    & .header-fixed__more {
      gap: 16px;
    }

    & .header-fixed__nav-icons {
      gap: 16px;
    }

    & .header-fixed__logo svg {
      width: 140px;
    }

    & .header-fixed__phone {
      font-size: 16px;
    }

    & .header-fixed__menu-drawer {
      min-width: 0;
      flex: 1 1 auto;
    }

    & .header-fixed__menu-body {
      min-width: 0;
      max-width: 100%;
      justify-content: center;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }
  }

  .header-fixed-basket {
    gap: 6px;
    padding: 8px 12px;

    & .header-fixed-basket__label {
      font-size: 13px;
    }

    & .header-fixed-basket__count {
      font-size: 13px;
    }
  }
}

@media (max-width: 1180px) and (min-width: 961px) {
  .header-fixed {
    & .header-fixed__wrap {
      gap: 12px;
    }

    & .header-fixed__more {
      gap: 12px;
    }

    & .header-fixed__nav-icons {
      gap: 12px;
    }

    & .header-fixed__logo svg {
      width: 128px;
    }
  }
}

@media (max-width: 1200px) and (min-width: 961px) {
  .header-fixed .header-fixed__phone {
    display: none;
  }
}

@media (max-width: 960px) {
  .header-fixed {
    min-height: 45px;
    padding: 10px 0;

    & .header-fixed__wrap {
      gap: 20px;
    }

    & .header-fixed__logo {
      position: relative;
      z-index: 1;
      flex-shrink: 0;

      & svg {
        width: 132px;
      }
    }

    & .header-fixed__navigation {
      position: fixed;
      inset: 0;
      z-index: 30;
      visibility: hidden;
      pointer-events: none;
      transition: visibility 0s linear 0.25s;
    }

    & .header-fixed__navigation.header-fixed__navigation--open {
      visibility: visible;
      pointer-events: auto;
      transition: visibility 0s linear 0s;
    }

    & .header-fixed__menu-backdrop {
      display: block;
      position: absolute;
      inset: 0;
      background: rgba(17, 18, 29, 0.42);
      opacity: 0;
      transition: opacity .25s ease-out;
      cursor: pointer;
    }

    & .header-fixed__navigation.header-fixed__navigation--open .header-fixed__menu-backdrop {
      opacity: 1;
    }

    & .header-fixed__menu-drawer {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(100%, 380px);
      padding: 24px;
      flex-direction: column;
      justify-content: unset;
      align-items: flex-start;
      gap: 32px;
      background: #9192a5;
      transform: translateX(100%);
      transition: transform .25s ease-out;
      overflow-y: auto;
    }

    & .header-fixed__menu-logo {
      display: flex;
      width: 100%;
      justify-content: center;

      & svg {
        display: block;
        width: 250px;
        max-width: 100%;
        height: auto;
      }
    }

    & .header-fixed__navigation.header-fixed__navigation--open .header-fixed__menu-drawer {
      transform: translateX(0);
    }

    & .header-fixed__menu-close {
      position: relative;
      display: inline-flex;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      margin-right: -15px;
      margin-top: 5px;
      cursor: pointer;
      color: #ffffff;
    }

    & .header-fixed__menu-close-line {
      position: absolute;
      width: 24px;
      height: 2px;
      border-radius: 100px;
      background: currentColor;
    }

    & .header-fixed__menu-close-line:first-child {
      transform: rotate(45deg);
    }

    & .header-fixed__menu-close-line:last-child {
      transform: rotate(-45deg);
    }

    & .header-fixed__menu-body {
      display: block;
      width: 100%;
    }

    & .header-fixed__menu-footer {
      display: flex;
      width: 100%;
      margin-top: auto;
      padding-top: 8px;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      color: #ffffff;
      text-align: center;
    }

    & .header-fixed__menu-phone {
      color: #ffffff;
      text-decoration: none;
    }

    & .header-fixed__menu-socials {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    & .header-fixed__menu-social-link {
      display: inline-flex;
      width: 30px;
      height: 30px;
      padding: 6px;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #ffffff;
      color: #9192a5;
      transition: opacity .2s ease-out;

      & svg {
        display: block;
        width: 100%;
        height: 100%;
      }

      @media (hover: hover) {
        &:hover {
          opacity: .8;
        }
      }
    }

    & .header-fixed__menu-cta {
      display: inline-flex;
      min-height: 44px;
      padding: 12px 32px;
      align-items: center;
      justify-content: center;
      border-radius: 50px;
      background: #ffffff;
      text-decoration: none;
      color: #9192a5;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
      transition: opacity .2s ease-out;

      @media (hover: hover) {
        &:hover {
          opacity: .8;
        }
      }
    }

    & .header-fixed__more {
      gap: 16px;
    }

    & .header-fixed__nav-icons {
      gap: 20px;
    }

    & .header-fixed__phone {
      display: none;
    }

    & .header-fixed__burger {
      position: relative;
      z-index: 0;
      display: inline-flex;
      width: 25px;
      height: 20px;
      flex-shrink: 0;
      flex-direction: column;
      align-items: stretch;
      justify-content: space-between;
      padding: 0;
      gap: 0;
      cursor: pointer;
      color: #ffffff;
    }

    & .header-fixed__burger-line {
      display: block;
      width: 100%;
      height: 2px;
      flex-shrink: 0;
      border-radius: 0;
      background: currentColor;
    }
  }

  .header-fixed-basket {
    height: auto;
    padding: 0;
    gap: 0;
    border: none;
    border-radius: 0;
    background: transparent;

    & .header-fixed-basket__label,
    & .header-fixed-basket__badge {
      display: none;
    }

    & .header-fixed-basket__icon {
      width: 20px;
      height: 20px;

      color: rgba(255, 255, 255, 0.85);
    }
  }
}

@media (max-width: 600px) {
  .header-fixed {
    & .header-fixed__logo {
      & svg {
        width: 104px;
      }
    }

    & .header-fixed__more {
      gap: 20px;
    }

    & .header-fixed__nav-icons {
      gap: 20px;
    }

    & .header-link-icon {
      width: 20px;
      height: 20px;
    }

    & .header-fixed__menu-drawer {
      width: 100%;
      padding: 20px 20px 28px;

      & .header-fixed__menu-logo svg {
        width: 220px;
      }
    }

    & .header-fixed__menu-cta {
      width: 100%;
      max-width: 193px;
    }
  }

  .header-fixed-basket {
    min-width: 0;
  }
}

.footer {
  padding: 60px 0 50px 0;
  background: #E6E7ED;

  & .footer__container {
    display: flex;
    flex-direction: column;
    gap: 54px;
  }

  & .footer__top {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 30px;
  }

  & .footer__company-info {
    flex-basis: 262px;
    min-width: 232px;
  }

  & .footer__navigation {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 30px;
  }

  & .footer__form {
    flex-basis: 360px;
    min-width: 300px;
  }

  & .footer__bottom {
    display: flex;
    max-width: 630px;
    flex-direction: column;
    gap: 18px;

    color: #5A5B6C;
  }

  @media (max-width: 960px) {
    padding: 60px 0 50px 0;

    & .footer__container {
      gap: 40px;
    }

    & .footer__top {
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 40px;
    }

    & .footer__form {
      order: -1;
      flex: none;
      width: 100%;
      max-width: none;
      min-width: 300px;
    }

    & .footer__company-info {
      flex: none;
      width: 100%;
      order: 0;
    }

    & .footer__navigation {
      flex: none;
      width: 100%;
      flex-wrap: nowrap;
      gap: 24px;
      order: 1;
    }
  }

  @media (max-width: 600px) {
    padding: 20px 0 50px 0;

    & .footer__container {
      gap: 0;
    }

    & .footer__top {
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 55px;
    }

    & .footer__company-info {
      flex: none;
      width: 100%;
      order: 1;
    }

    & .footer__navigation {
      flex: none;
      width: 100%;
      flex-wrap: wrap;
      justify-content: center;
      gap: 25px;
      order: 2;
      flex-direction: row;
    }

    & .footer__form {
      flex: none;
      width: 100%;
      max-width: none;
      order: -1;
    }

    & .footer__bottom {
      max-width: none;
      width: 100%;
      margin-top: 55px;
    }
  }
}

.footer-navigation {
  display: flex;
  max-width: 224px;
  flex-direction: column;
  gap: 20px;

  & .footer-navigation__header {
    color: #5A5B6C;
  }

  & .footer-navigation__body {
    display: flex;
    flex-direction: column;
    gap: 20px;

    color: #5A5B6C;
  }

  @media (max-width: 960px) and (min-width: 601px) {
    flex: 0 0 auto;
    width: 224px;
    max-width: 224px;
  }

  @media (max-width: 600px) {
    flex: 1 1 calc((100% - 55px) / 2);
    min-width: 160px;
    max-width: none;
    width: auto;
    gap: 21px;

    & .footer-navigation__body {
      gap: 21px;
    }
  }
}

.footer-company-info {
  display: flex;
  flex-direction: column;
  gap: 20px;

  & .footer-company-info__logo {
    display: inline-flex;

    & svg {
      max-width: 100%;
      height: auto;
    }
  }

  & .footer-company-info__contacts {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  & .footer-company-info__socials {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  & .footer-company-info__socials-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
  }

  & .footer-company-info__socials-text {
    color: #5A5B6C;
  }

  & .footer-company-info__address {
    color: #5A5B6C;
  }

  @media (max-width: 600px) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 20px;
    row-gap: 20px;
    align-items: start;

    & .footer-company-info__logo {
      grid-column: 1;
      grid-row: 1;
    }

    & .footer-company-info__contacts {
      grid-column: 2;
      grid-row: 1;
    }

    & .footer-company-info__socials {
      grid-column: 2;
      grid-row: 2;
    }

    & .footer-company-info__address {
      grid-column: 1;
      grid-row: 2;
      align-self: end;
    }
  }
}

.footer-link {
  text-decoration: none;
  color: #5A5B6C;

  &.footer-link--active {
    color: #3d3e4d;
    font-weight: 500;
  }
}

.footer-link-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;

  color: #5A5B6C;

  transition: color .2s ease-out;

  & svg {
    display: block;
    height: auto;
    width: 100%;
    object-fit: contain;
    object-position: center;
  }
}

.footer-form {
  display: flex;
  flex-direction: column;
  gap: 20px;

  & .footer-form__header {
    color: #5A5B6C;
  }

  & .footer-form__body {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  & .btn {
    align-self: flex-start;
  }

  @media (max-width: 600px) {
    & .btn {
      align-self: stretch;
      width: 100%;
      max-width: none;
    }
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.1;
  }

  100% {
    opacity: 1;
  }
}

.index-block-header {
  display: flex;
  max-width: 760px;
  padding: 30px 0 45px 0;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  gap: 24px;

  & .index-block-header__title {
    text-align: center;
    color: #5A5B6C;

    &>span {
      color: #ACAEB8;
    }
  }

  & .index-block-header__tag {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 10px;
    background: #E7EAF1;
    color: #868BAB;

    animation: blink 1s ease-in-out infinite;
  }

  @media (max-width: 767px) {
    flex-direction: column-reverse;
    gap: 6px 20px;
  }
}

.product-card {
  position: relative;

  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 20px;

  & .product-card__header {
    position: relative;
    height: auto;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 1/1;
    background: #F1F1F1;

    & .product-card__link--media {
      position: absolute;
      inset: 0;

      display: block;
      height: 100%;
      width: 100%;
      color: inherit;
      text-decoration: none;
    }

    & img {
      display: block;
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  & .product-card__link--text {
    display: flex;
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-align: center;
    text-decoration: none;

    @media (hover: hover) {
      &:hover .product-card__title {
        text-decoration: underline;
      }
    }
  }

  & .product-card__tag,
  & .product-card__favorite {
    position: absolute;
    top: 10px;

    display: flex;
    width: auto;
    height: 50px;
    min-width: 50px;
    padding: 6px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
  }

  & .product-card__tag {
    left: 10px;

    background: #868BAB;

    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: #FFF;
  }

  & .product-card__favorite {
    right: 10px;

    outline: none;
    border: none;
    background: #FFF;

    color: #5A5B6C;

    cursor: pointer;

    svg {
      transform: scale(1);

      transition: fill .2s ease-out, transform .2s ease-out;
    }

    &[data-active="true"] {
      svg {
        fill: #5A5B6C;
      }
    }

    @media (hover: hover) {
      &:hover {
        svg {
          fill: #5A5B6C;
          transform: scale(1.1);
        }
      }
    }
  }

  & .product-card__body {
    display: flex;
    padding-top: 20px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
  }

  & .product-card__title {
    color: #5A5B6C;
    text-align: center;
  }

  & .product-card__description {
    color: #5A5B6C;
    text-align: center;
  }

  & .product-card__price {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    color: #5A5B6C;
    text-align: center;
  }

  & .product-card__actions {
    display: flex;
    width: 100%;
    padding-top: 28px;
    margin-top: auto;
    gap: 10px;
  }

  & .product-card__button {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    padding: 8px 20px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    outline: none;

    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    transition: opacity .2s ease-out, background .2s ease-out, color .2s ease-out, border-color .2s ease-out;
  }

  & .product-card__button-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
  }

  & .product-card__button--details {
    background: #E7E8EE;
    border-color: transparent;
    color: #626374;
  }

  & .product-card__button--cart {
    background: #FFF;
    border-color: #626374;
    color: #626374;
    cursor: pointer;

    &:disabled {
      opacity: .5;
      cursor: default;
    }

    &.active {
      background: #626374;
      border-color: #626374;
      color: #FFF;
    }
  }

  @media (hover: hover) {
    & .product-card__button:hover {
      opacity: .8;
    }

    & .product-card__button--cart:disabled:hover {
      opacity: .5;
    }
  }
}

.catalog-section-hover {
  position: relative;
  z-index: 0;

  display: flex;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 10px;
  overflow: hidden;

  &::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    display: block;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    opacity: 0;

    transition: opacity .2s ease-out;
  }

  & img {
    position: absolute;
    inset: 0;
    z-index: 0;

    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }

  & .catalog-section-hover__container {
    position: relative;
    z-index: 2;

    display: flex;
    width: 100%;
    height: 100%;
    padding: 40px 30px;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
  }

  & .catalog-section-hover__header {
    display: inline-flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 16px;

    color: #5A5B6C;

    transition: transform .2s ease-out;
  }

  & .catalog-section-hover__title {
    text-transform: uppercase;
  }

  & .catalog-section-hover__body {
    opacity: 0;

    color: #5A5B6C;

    transition: opacity .2s ease-out;
  }

  @media (hover: hover) {
    &:hover {

      &::after {
        opacity: 1;
      }

      & .catalog-section-hover__header {
        transform: translateX(10px);
      }

      & .catalog-section-hover__body {
        opacity: 1;
      }
    }
  }
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: 20px;

  & .blog-card__header {
    height: 280px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;

    &>img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  & .blog-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  & .blog-card__title {
    color: #5A5B6C;
  }

  & .blog-card__text {
    color: #5A5B6C;
  }
}

.review-slide {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: #E6E7ED;
  border-radius: 10px;
  overflow: hidden;

  & .swiper.review-slide__slider-images {
    position: relative;

    display: inline-flex;
    height: 100%;
    min-width: 270px;
    margin: 0;
    aspect-ratio: 320 / 445;
    flex-grow: 1;
    flex-basis: 200px;

    & img {
      display: block;
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  & .review-slide__btn-prev,
  & .review-slide__btn-next {
    position: absolute;
    z-index: 2;

    display: inline-flex;
    height: 100%;
    width: 30px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    outline: none;
    background: none;

    color: #ffffff;
    cursor: pointer;

    &>svg {
      display: inline-flex;
      width: 10px;
      height: auto;
    }
  }

  & .review-slide__btn-prev {
    left: 0;
  }

  & .review-slide__btn-next {
    right: 0;
  }

  & .review-slide__content {
    display: flex;
    padding: 20px 40px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    flex-grow: 1;
    flex-basis: 520px;
  }

  & .review-slide__title {
    color: #5A5B6C;
  }

  & .review-slide__text {
    color: #5A5B6C;
  }

  & .review-slide__author {
    color: #5A5B6C;
  }

  & .review-slide__link {}
}

.tizers-icon-carousel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  & .tizers-icon-carousel-item__header {
    display: inline-flex;
    justify-content: center;

    & img {
      width: 102px;
      height: 102px;
      border-radius: 100%;
      border: 2px solid #E6E7ED;
      object-fit: cover;
      object-position: center;
    }
  }

  & .tizers-icon-carousel-item__text {
    color: #5A5B6C;
    text-align: center;
  }

  @media (max-width: 600px) {
    & .tizers-icon-carousel-item__header {
      & img {
        width: 128px;
        height: 128px;
      }
    }
  }

  @media (max-width: 425px) {
    & .tizers-icon-carousel-item__header {
      & img {
        width: 80px;
        height: 80px;
      }
    }
  }
}

.catalog-section-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  & .catalog-section-link__header {
    display: inline-flex;
    padding-top: 12px;
    justify-content: center;

    & img {
      width: 102px;
      height: 102px;
      padding: 2px;
      border-radius: 100%;
      border: 2px solid #E6E7ED;
      object-fit: cover;
      object-position: center;

      transition: transform .2s ease-out;
    }
  }

  & .catalog-section-link__text {
    color: #5A5B6C;
    text-align: center;
  }

  @media (hover: hover) {
    &:hover {
      & .catalog-section-link__header {
        & img {
          transform: scale(1.1);
        }
      }
    }
  }

  &.catalog-section-link--active {
    & .catalog-section-link__header {
      & img {
        border: 2px dashed #5A5B6C;
      }
    }
  }
}

/* ——— Модальное оформление заказа (Figma) ——— */
body.zerapy-order-modal--lock {
  overflow: hidden;
}

.zerapy-order-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  padding: 0;
  font-family: "Cera Pro", sans-serif;
}

.zerapy-order-modal.zerapy-order-modal--open {
  display: block;
}

.zerapy-order-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.zerapy-order-modal__dialog {
  position: absolute;
  inset: 0;
  margin: 0;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

@media (min-width: 900px) {
  .zerapy-order-modal__dialog {
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(1400px, calc(100vw - 40px));
    height: min(920px, calc(100vh - 40px));
    max-height: calc(100vh - 40px);
    border-radius: 0;
  }
}

.zerapy-order-modal__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(190, 190, 190, 0.3);
}

.zerapy-order-modal__title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: #000;
}

.zerapy-order-modal__icon-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: #000;
  cursor: pointer;
  border-radius: 8px;
}

.zerapy-order-modal__icon-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.zerapy-order-modal__close {
  padding-right: 0;
}

.zerapy-order-modal__body {
  flex: 1;
  min-height: 0;
  background: #fff;
}

.zerapy-order-modal__iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
  background: #fff;
}

div#SDEK_logo {
  display: none !important;
}

.zerapy-price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.zerapy-price__old {
  text-decoration: line-through;
  opacity: 0.65;
  font-weight: 400;
}