@charset "UTF-8";
@import "global.css";


/* Header */
.header {
  top: -100px;
  width: 100vw;
  background-color: var(--color-default-white);
  z-index: 100;

  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
.header.header-fixed {
  position: fixed;
  transform: translateY(100px);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
}
.header .container {
  position: relative;
}
body:has(.header__menu:hover, .header__dropout:hover) .header .container::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-grayscale-100);
  z-index: 10;
}
.header__wrapper {
  padding: 30px 0;
}
.header.header-fixed .header__wrapper {
  padding: 15px 0;
}
.header__logo {
  padding: 14px 0 10px;
}
.header__menu,
.header__navigation li:not(.header__dropout-item):not(:last-child),
.header__contacts,
.header__messengers {
  margin: 0 50px 0 0;
}
.header__menu {
  position: relative;
}
.header__menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -31px;
  width: 160px;
  height: 40px;
  z-index: 15;
}
.header__menu-toggle {
  position: relative;
  padding: 10px 0 10px 36px;
}
.header__menu-toggle-icon,
.header__menu-toggle-icon::before,
.header__menu-toggle-icon::after {
  position: absolute;
  left: 0;
  width: 26px;
  height: 2px;
  background-color: var(--color-grayscale-600);

  transition: var(--easy);
  -moz-transition: var(--easy);
  -o-transition: var(--easy);
  -webkit-transition: var(--easy);
}
.header__menu-toggle-icon {
  top: calc(50% + 1px);
  transform: translateY(-50%);
}
.header__menu-toggle-icon::before {
  content: "";
  top: 5px;
}
.header__menu-toggle-icon::after {
  content: "";
  bottom: 5px;
}
.header__navigation {
  list-style-type: none;
}
.header__navigation a:not(.header__dropout-link) {
  padding: 10px 0;
}
.header__show-more {
  margin: 7px 0 0;
}
.header__dropout {
  position: relative;
}
.header__dropout::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -31px;
  width: 160px;
  height: 50px;
  z-index: 15;
}
.header__dropout-point {
  cursor: pointer;
}
.header__contacts,
.header__messengers {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
}
.header__contacts a,
.header__contacts .button,
.header__messengers a {
  padding: 2.5px 0;
}
.header__phone svg {
  display: none;
}
.header__messengers {
  list-style-type: none;
}
.header__messengers-link svg {
  margin: 0 5px 0 0;
}
.header__button {
  padding: 18px 34px;
}


/* Menu */
.menu,
.header__dropout-content {
  position: absolute;
  top: calc(100% + 35px);
  left: -31px;
  display: none;
}
.header-fixed .menu,
.header-fixed .header__dropout-content {
  top: calc(100% + 21px);
}
.menu__list,
.header__dropout-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  background-color: var(--color-default-white);
  list-style-type: none;
}
.menu__list--lvl-1:has(.menu__item:hover)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: var(--color-grayscale-100);
}
.menu__list--lvl-2 {
  flex-wrap: wrap;
  height: 100%;
}
.menu__link,
.header__dropout-link {
  position: relative;
  padding: 15px 20px;
  min-width: 210px;
  white-space: nowrap;
  cursor: pointer;
}
.menu__link::after {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: calc(100% + 20px);
  height: 100%;
  z-index: 1;
}
.menu__link--lvl-1 {
  display: grid;
  grid-template-columns: 26px auto 16px;
  gap: 10px;
  align-items: center;
}
.menu__link--lvl-1 svg {
  color: var(--color-grayscale-200);
}
.menu__link-arrow {
  transform: rotate(-90deg);
}
.menu__submenu {
  position: absolute;
  top: 0;
  left: 100%;
  width: max-content;
  height: 100%;

  max-width: 0;
  overflow: hidden;

  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}
.menu__item--color .menu__submenu {
  width: 445px;
}
.menu__item--style .menu__submenu {
  width: 605px;
}
.menu__item--type .menu__submenu {
  width: 887px;
}
.menu__link-count {
  margin: 0 0 0 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  background-color: var(--color-grayscale-100);
  color: var(--color-grayscale-300);
}
.menu__mob,
.menu__submenu-back {
  display: none;
}


/* Breadcrumbs */
.breadcrumbs {
  margin: 0 0 20px;
}
.breadcrumbs__wrapper {
  padding: 30px 0;
}
.breadcrumbs__list {
  list-style-type: none;
  color: var(--color-grayscale-300);
}
.breadcrumbs__item {
  flex-shrink: 0;
}
.breadcrumbs__item:not(:last-child) {
  position: relative;
  margin: 0 20px 0 0;
  padding: 0 36px 0 0;
}
.breadcrumbs__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 16px;
  height: 1px;
  background-color: var(--color-grayscale-500);
}
.breadcrumbs__item a {
  padding: 10px 0;
  color: var(--color-grayscale-500);
}


/* Hero */
.hero {
  position: relative;
  height: 908px;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 251px;
  background-color: var(--color-grayscale-100);
  z-index: -5;
}
.hero__wrapper {
  padding: 107px 0;
}
.hero__top {
  position: relative;
  padding: 0 0 185px;
}
.hero__top h1 {
  display: grid;
  grid-template-columns: 1fr;
  font-size: 86px;
  overflow: hidden;
}
.hero__top h1 span {
  animation: grow 0.7s ease-in both;
}
.hero__top h1 span:last-child {
  justify-self: end;
  margin: -4px 3px 0 0;
}
.hero__top p {
  color: var(--color-grayscale-300);
  animation: zoom 0.6s ease both 0.2s;
}
.hero__note-top {
  position: absolute;
  top: 35px;
  right: 0;
  max-width: 126px;
  text-align: right;
}
.hero__note-bottom {
  position: absolute;
  bottom: 0;
  left: calc(50% - 252px);
  transform: translateX(-50%);
  max-width: 158px;
}
.hero__link {
  position: absolute;
  top: calc(50% + 22px);
  left: calc(50% + 250px);
  transform: translateX(-50%) translateY(-50%) rotate(6deg);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: 0 4px 100px 0 var(--color-default-white);
  color: var(--color-default-white);
}
.hero__link::before,
.hero__link::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--color-grayscale-600);
  background-color: transparent;
}
.hero__link::before {
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
}
.hero__link::after {
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
}
.hero__link span {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.hero__link span::before,
.hero__link span::after {
  content: "";
  position: absolute;
  top: 0;
  border-radius: 50%;
}
.hero__link span::before {
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-grayscale-600);
  z-index: -2;
}
.hero__link span::after {
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  width: 150%;
  height: 200%;
  background-color: var(--color-default-white);
  z-index: -1;

  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.hero__img-left,
.hero__img-right {
  position: absolute;
  z-index: -1;
}
.hero__img-left {
  top: calc(50% - 181px);
  left: calc(50% - 837px);
  animation: left-to-right 0.9s ease;
}
.hero__img-right {
  top: calc(50% - 34px);
  right: calc(50% - 1011px);
  animation: right-to-left 0.9s ease;
}


/* About */
.about__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 100px;
}
.about__top .flex-sb {
  align-items: flex-start;
}
.about__top p,
.about__note {
  margin: 13px 0 0;
}
.about__top p {
  color: var(--color-grayscale-300);
}
.about__bottom {
  gap: 100px;
  padding: 0 115px;
}
.about__link-wrapper {
  position: relative;
  cursor: pointer;
}
.about__link-wrapper video {
  position: relative;
  width: 100%;
  height: 746px;
  object-fit: cover;
  z-index: -5;
}
.about__link {
  position: absolute;
  left: 21px;
  bottom: 23px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.about__link::after {
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  border-radius: 50%;
  border: 1px solid var(--color-default-white);
  background-color: transparent;
}
.about__link span {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
}
.about__link span::before,
.about__link span::after {
  content: "";
  position: absolute;
  top: 0;
  border-radius: 50%;
}
.about__link span::before {
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-default-white);
  border-radius: 50%;
  z-index: -2;
}
.about__link span::after {
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  width: 150%;
  height: 200%;
  background-color: var(--color-grayscale-600);
  z-index: -1;

  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.about__content {
  display: grid;
  grid-template-columns: 1fr;
  align-content: space-between;
}
.about__images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.about__images img {
  width: 100%;
  height: 179px;
  object-fit: cover;
}
.about__content ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin: 0 -80px 0 0;
  list-style-type: none;
}
.about__content li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.about__content li:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: calc(100% - 80px);
  height: 1px;
  background-color: var(--color-grayscale-200);
}
.about__content li p,
.about__content li address {
  color: var(--color-grayscale-300);
}


/* Materials */
.materials__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 100px;
  padding: 140px 0;
}
.materials__top {
  align-items: center;
}
.materials__top p,
.materials__item-column span:first-child {
  color: var(--color-grayscale-200);
}
.materials__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9.5px;
}
.materials__item {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-content: space-between;
  padding: 20px 40px 20px 340px;
  border: 1px solid var(--color-grayscale-300);
  background-color: var(--color-grayscale-400);
}
.materials__item-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  white-space: nowrap;
}
.materials__item-column:nth-child(3) {
  margin: 0 0 0 66px;
}
.materials__item-column:nth-child(4) {
  justify-self: end;
}
.materials__item-column .title-medium {
  text-transform: none;
}
.materials__item-image {
  position: absolute;
  top: -60px;
  left: 60px;
  width: 180px;
  height: 240px;
  z-index: 1;

  transition: transform 0.2s ease-in-out;
  -moz-transition: transform 0.2s ease-in-out;
  -o-transition: transform 0.2s ease-in-out;
  -webkit-transition: transform 0.2s ease-in-out;
}
.materials__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(0);
  opacity: 0;
}
.materials__item-button {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%) scale(0);
  opacity: 0;
}


/* FAQ */
.faq__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 79px;
}
.faq__top {
  align-items: center;
}
.faq__top p {
  color: var(--color-grayscale-300);
}
.faq__top svg {
  grid-column: span 2;
  padding: 10px 0;
  width: 100%;
  height: auto;
}
.faq__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 0 115px;
}
.faq__item {
  padding: 0 0 9px;
  border-bottom: 1px solid var(--color-grayscale-200);
}
.faq__item-top {
  padding: 38px 0;
  cursor: pointer;
}
.faq__item-button {
  position: relative;
  margin: 6px 0 0 40px;
  padding: 0;
  width: 28px;
  height: 28px;
  border: none;
  background-color: transparent;
}
.faq__item-button::before,
.faq__item-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 20px;
  height: 3px;
  background-color: var(--color-grayscale-600);

  transition: var(--easy);
  -moz-transition: var(--easy);
  -o-transition: var(--easy);
  -webkit-transition: var(--easy);
}
.faq__item-button::before {
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
.faq__item.is-active .faq__item-button::before,
.faq__item.is-active .faq__item-button::after {
  transform: translateX(-50%) translateY(-50%) rotate(180deg);
}
.faq__item-bottom-wrapper {
  padding: 0 0 30px;
}


/* Main-calculator */
.main-calculator__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 100px;
}
.main-calculator__top {
  align-items: end;
}
.main-calculator__top .top-grid-left {
  gap: 10px;
}
.main-calculator__top p {
  color: var(--color-grayscale-300);
}
.main-calculator__top .note {
  margin: 0 0 16px;
}


/* Calculator */
.calculator {
  display: grid;
  grid-template-columns: 650px auto;
  gap: 155px;
}
.calculator__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
}
.calculator__form-item {
  position: relative;
  margin: 0;
  padding: 0 0 0 115px;
  border: none;
}
.calculator__form-item--total {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.calculator__form-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 115px;
  bottom: -41px;
  width: calc(100% - 115px);
  height: 1px;
  background-color: var(--color-grayscale-200);
}
.calculator__form-item::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-grayscale-200);
}
.calculator__form-item--type::before {
  content: "01";
  top: -43px;
}
.calculator__form-item--sizes::before {
  content: "02";
}
.calculator__form-item--materials::before {
  top: -43px;
  content: "03";
}
.calculator__form-item--total::before {
  content: "Итог";
}
.calculator__form-item legend {
  margin: 0 0 20px;
  color: var(--color-grayscale-300);
}
.calculator__form-inputs {
  flex-wrap: wrap;
}
.calculator__form-item--type .calculator__form-inputs,
.calculator__form-item--materials .calculator__form-inputs {
  margin: 0 0 -15px;
}
.calculator__form-input:not(.calculator__form-input--size, .calculator__customer .calculator__form-input) {
  margin: 0 21px 15px 0;
}
.calculator__form-input input + span {
  color: var(--color-grayscale-300);
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
.calculator__form-input input:checked + span {
  color: var(--color-grayscale-600);
  border-bottom: 1px solid var(--color-grayscale-600);
}
.calculator__form-inputs--sizes {
  flex-wrap: nowrap;
}
.calculator__form-input--size {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.calculator__form-inputs--size input {
  text-align: center;
}
.calculator__form-input--size:not(:last-child) {
  margin: 0 21px 0 0;
}
.calculator__form-input--size:not(:first-child) {
  position: relative;
  padding: 0 0 0 63px;
}
.calculator__form-input--size:not(:first-child)::before,
.calculator__form-input--size:not(:first-child)::after {
  content: "";
  position: absolute;
  left: 7px;
  bottom: 27px;
  width: 30px;
  height: 1px;
  background-color: var(--color-grayscale-200);
}
.calculator__form-input--size:not(:first-child)::before {
  transform: rotate(45deg);
}
.calculator__form-input--size:not(:first-child)::after {
  transform: rotate(-45deg);
}
.calculator__form-input.disabled {
  opacity: 0;
}
.calculator__tooltip-wrapper {
  color: var(--color-grayscale-300);
}
.calculator__tooltip {
  position: relative;
  margin: 0 0 0 5px;
  cursor: pointer;
}
.calculator__tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 10px;
  height: 50px;
}
.calculator__tooltip p {
  display: none;
  position: absolute;
  top: 50%;
  left: calc(100% + 5px);
  transform: translateY(-50%);
  padding: 5px;
  width: 225px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 20px 0 rgba(31, 43, 61, 0.1);
  background-color: var(--color-default-white);
}
.calculator__tooltip p a {
  color: inherit;
  text-decoration: underline;
}
.calculator__total:has(.error)::before {
  content: 'Заполните все поля';
  font-size: 34px;
}
.calculator__total:has(.error) span {
  display: none;
}
.calculator__total-value.odometer {
  font-family: "Inter", "Arial", sans-serif;
  line-height: normal;
  letter-spacing: -1px;
  vertical-align: inherit;
}
.calculator__total-value.odometer .odometer-value {
  width: 27px;
}
.calculator__total-wrapper .button {
  min-width: 202px;
}
.materials__customer,
.calculator__customer {
  display: none;
}
.calculator__customer-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  width: 450px;
}
.calculator__customer-content .calculator__form-input {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.calculator__images {
  position: relative;
}
.calculator__image {
  position: absolute;
  transform: translateY(-50%);
}
.calculator__image:first-child {
  top: 50%;
  left: 0;
  z-index: 2;
}
.calculator__image:last-child {
  top: calc(50% + 39px);
  left: 210px;
  z-index: 1;
}


/* Accessories */
.accessories__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 100px;
}
.top-grid-left p,
.accessories__item-content span:first-child {
  color: var(--color-grayscale-300);
}
.accessories__text {
  margin: 0 0 0 340px;
}
.accessories__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.accessories__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.accessories__image {
  aspect-ratio: 7/5;
  background-color: var(--color-grayscale-100);
}
.accessories__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.accessories__item-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}


/* Main-sale */
.main-sale__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 66px;
  padding: 140px 0;
}
.main-sale__top p {
  margin: 13px 0 0;
  color: var(--color-grayscale-200);
}
.main-sale__top svg {
  grid-column: span 2;
  padding: 10px 0;
  width: 100%;
  height: auto;
  color: var(--color-grayscale-400);
}
.main-sale__list {
  gap: 40px;
}
.main-sale__list .sale {
  cursor: pointer;
}
.main-sale__list.slick-initialized {
  display: block;
  margin: 0 -20px;
  max-width: calc(100vw - 60px);
}
.main-sale__list.slick-initialized .sale {
  margin: 0 20px;
}
.main-sale__list.slick-initialized .button-arrow {
  position: absolute;
  top: calc(50% + 5px);
  transform: translateY(-50%);
  border: 1px solid var(--color-grayscale-300);
  background-color: var(--color-grayscale-400);
  color: var(--color-grayscale-200);
  box-shadow: 0 0 0 10px var(--color-grayscale-500);
  z-index: 1;
}
.main-sale__list.slick-initialized .button-arrow-prev {
  left: 4px;
}
.main-sale__list.slick-initialized .button-arrow-next {
  right: 4px;
}


/* Sale */
.sale {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr;
  align-content: space-between;
  padding: 39px 40px;
  height: 401px;
  background-color: var(--color-grayscale-400);
  z-index: 1;
}
.sale__logo {
  margin: 0 0 0 7px;
}
.sale__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 450px;
  color: var(--color-default-white);
}
.sale__link {
  line-height: 100%;
  color: var(--color-default-white);
}
.sale__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}
.sale__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Company */
.company__wrapper {
  gap: 100px;
}
.company__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin: 0 15px 0 0;
}
.company__content-top {
  margin: 0 0 -5px;
}
.company__content-top p {
  color: var(--color-grayscale-300);
}
.company__video {
  position: relative;
}
.company__video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Certificates */
.certificates__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 100px;
}
.certificates__top p {
  color: var(--color-grayscale-300);
  text-align: right;
}
.certificates__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px;
  list-style-type: none;
}
.certificates__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-content: start;
  color: var(--color-grayscale-300);
}
.certificates__item-image {
  aspect-ratio: 5/7;
  box-shadow: 0 0 0 5px var(--color-grayscale-100);
  overflow: hidden;
}
.certificates__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Reviews-block */
.reviews-block__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 100px;
}
.reviews-block__top {
  justify-content: space-between;
  align-items: flex-end;
}
.reviews-block__top-left span {
  color: var(--color-grayscale-300);
}
.reviews-block__top-right {
  margin: 0 0 0 100px;
}
.reviews-block:has(.reviews.slick-initialized) .reviews-block__top-right {
  padding: 0 220px 0 0;
}
.reviews-block__top-right .button {
  width: 222px;
}


/* Reviews */
.reviews {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 200px 40px;
  align-items: start;
}
.reviews.slick-initialized {
  position: relative;
  display: block;
  margin: 0 -20px;
  width: calc(100vw - 60px);
}
.reviews.slick-initialized .review {
  margin: 0 20px;
}
.reviews.slick-initialized .button-arrow-big {
  position: absolute;
  top: -136px;
}
.reviews.slick-initialized .button-arrow-big-prev {
  right: 101px;
}
.reviews.slick-initialized .button-arrow-big-next {
  right: 19px;
}
.reviews.slick-initialized .button-arrow-big.slick-disabled {
  transform: translateX(0)!important;
  color: var(--color-grayscale-200)!important;
  cursor: default;
}
.review {
  display: grid!important;
  grid-template-columns: 1fr;
  gap: 30px;
  justify-items: start;
}
.review__top {
  display: grid;
  grid-template-columns: 64px auto;
  gap: 20px;
  align-items: start;
}
.review__image {
  width: 64px;
  height: 64px;
  background-color: var(--color-grayscale-100);
}
.review__author {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}
.review__author span:first-child {
  color: var(--color-grayscale-300);
}
.review__stars {
  display: grid;
  grid-template-columns: repeat(5, 24px);
}
.review__stars svg {
  color: var(--color-yellow);
}
.review__content.hidden {
  display: -webkit-box;
  line-clamp: 8;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review.is-open .review__content.hidden {
  display: block;
}
.review__button {
  border-bottom: 1px dashed;
  font-weight: 400;
  line-height: 150%;
  color: var(--color-grayscale-300);
}
.review__button.is-open::before {
  content: "Скрыть";
}
.review__button.is-open span {
  display: none;
}


/* Working */
.working__wrapper {
  gap: 100px;
}
.working__left {
  display: grid;
  grid-template-columns: 1fr;
  align-content: space-between;
  min-height: calc(100vh - 150px);
}
.working__left-top p {
  color: var(--color-grayscale-300);
}
.working__video {
  width: 247px;
  height: 346px;
}
.working__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.working__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80.5px;
  list-style-type: none;
}
.working__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  justify-items: start;
}
.working__item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-grayscale-200);
}
.working__item-note {
  gap: 6px;
}
.working__item .title-medium {
  text-transform: none;
}


/* Viewed */
.viewed__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 100px;
}
.viewed__slider {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px;
}
.viewed__slide {
  display: grid!important;
  grid-template-columns: 1fr;
  gap: 20px;
}
.viewed__slide:has(.viewed__link) {
  cursor: pointer;
}
.viewed__image {
  aspect-ratio: 1/1;
  overflow: hidden;
  background-color: var(--color-grayscale-100);
}
.viewed__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.viewed__link-wrapper {
  width: 98px;
  min-height: 24px;
  background-color: var(--color-grayscale-100);
}
.viewed__link-wrapper:has(.viewed__link) {
  width: auto;
  height: auto;
  background-color: transparent;
}
.viewed__link svg {
  margin: 0 0 0 10px;
}
.viewed__slider.slick-initialized {
  position: relative;
  display: block;
  margin: 0 -20px;
  width: calc(100vw - 60px);
}
.viewed__slider.slick-initialized .viewed__slide {
  margin: 0 20px;
}
.viewed__slider.slick-initialized .button-arrow-big {
  position: absolute;
  top: -146px;
}
.viewed__slider.slick-initialized .button-arrow-big-prev {
  right: 101px;
}
.viewed__slider.slick-initialized .button-arrow-big-next {
  right: 19px;
}
.viewed__slider.slick-initialized .button-arrow-big.slick-disabled {
  transform: translateX(0)!important;
  color: var(--color-grayscale-200)!important;
  cursor: default;
}


/* Action */
.action__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 100px;
  padding: 140px 0;
}
.action__note {
  margin: 10px 0 0;
  color: var(--color-grayscale-200);
}
.action__content {
  display: grid;
  grid-template-columns: auto 320px;
  gap: 100px;
}
.action__form {
  padding: 60px 60px 50px;
  width: 100%;
  background-color: var(--color-default-white);
}
.action__form .form__top {
  display: none;
}
.action__form .form__fieldset-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px 20px;
}
.action__form label:has(textarea) {
  grid-column: span 2;
  max-width: calc(100% - 70px);
}
.action__form .form__button {
  position: absolute;
  bottom: 50px;
  right: 0;
  width: calc((100% / 3) + 58px);
}
.action__form .form__text {
  margin: 20px auto 0;
}
.action__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Catalog */
.catalog {
  margin: -20px 0 0;
}
.catalog__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 100px;
}
.catalog__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.catalog__categories {
  flex-wrap: wrap;
  max-height: 34px;
  overflow: hidden;
}
.catalog__category {
  flex-shrink: 0;
  margin: 0 5px 0 0;
}
.catalog__category.is-active {
  order: -1;
}
.catalog__categories.slick-initialized {
  position: relative;
  padding: 0 53px;
  width: calc(100vw - 100px);
  max-width: 1500px;
}
.catalog__categories.slick-initialized .button-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.catalog__categories.slick-initialized .button-arrow-prev {
  left: 0;
}
.catalog__categories.slick-initialized .button-arrow-next {
  right: 0;
}
.catalog__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.catalog__main-top {
  display: grid;
  grid-template-columns: 230px auto;
  gap: 40px;
}
.catalog__filter-toggle {
  width: max-content;
}
.catalog__filter-toggle.is-close::before {
  content: "Показать фильтр";
}
.catalog__filter-toggle.is-close span {
  display: none;
}
.catalog__filter-open {
  display: none;
}
.catalog__sorting {
  list-style-type: none;
}
.catalog__sorting li:not(:last-child) {
  margin: 0 20px 0 0;
}
.catalog__sorting a {
  border-bottom: 1px solid transparent;
  color: var(--color-grayscale-300);
}
.catalog__sorting a.is-active {
  border-bottom: 1px solid var(--color-grayscale-600);
  color: var(--color-grayscale-600);
}
.catalog__main-top h2 {
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0;
  color: var(--color-grayscale-300);
}
.catalog__main-content {
  display: flex;
  align-items: flex-start;
}
.catalog__filter {
  margin: 0 40px 0 0;
  width: 230px;
  min-width: 230px;
}
.catalog__filter.is-close {
  margin: 0;
  width: 0;
  min-width: 0;
  overflow: hidden;
}
.catalog__filter.is-close.is-affixed {
  display: none;
}
.catalog__listing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  justify-items: center;
}
.catalog__listing-show-more {
  width: 330px;
}
.catalog__pagination-list {
  padding: 0 25px;
  list-style: none;
}
.catalog__pagination-list li:not(:last-child) {
  margin: 0 4px 0 0;
}
.catalog__pagination-list .button-tag {
  padding: 4px 15px;
}
.catalog__pagination-dots {
  padding: 0 10px;
  color: var(--color-grayscale-200);
}


/* Description */
.description .container {
  padding: 50px;
}
.description__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding: 100px;
  border: 1px solid var(--color-grayscale-300);
}
.description__wrapper h2,
.description__wrapper h3 {
  margin: 0 0 20px;
}
.description__wrapper h2:not(:first-child),
.description__wrapper h3:not(:first-child) {
  margin: 50px 0 20px;
}


/* Filter */
.filter,
.filter__boxes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.filter__boxes .se_filter_box.is-open:not(:last-child) {
  margin: 0 0 79px;
}
.filter__boxes .se_filter_box .filter__bottom {
  max-height: 0;
  overflow: hidden;
}
.filter__boxes .se_filter_box.is-open .filter__bottom {
  max-height: 2000px;
}
.filter__top {
  position: relative;
  cursor: pointer;
}
.filter__top::before,
.filter__top::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 16px;
  height: 3px;
  background-color: var(--color-grayscale-600);

  transition: var(--easy);
  -moz-transition: var(--easy);
  -o-transition: var(--easy);
  -webkit-transition: var(--easy);
}
.filter__top::before {
  transform: translateY(-50%) rotate(90deg);
}
.filter__boxes .se_filter_box.is-open .filter__top::before,
.filter__boxes .se_filter_box.is-open .filter__top::after {
  transform: translateY(-50%) rotate(180deg);
}
.filter__items-count {
  margin: 0 0 0 10px;
  color: var(--color-grayscale-200);
  transform: scale(0.5);
  opacity: 0;
}
.filter__boxes .se_filter_box.is-open .filter__items-count {
  transform: scale(1);
  opacity: 1;
}
.filter__bottom {
  display: none;
  margin: 30px 0 0;
}
.filter__boxes .se_filter_box.is-open .filter__bottom {
  display: block;
}
.filter__bottom .many_items {
  flex-wrap: wrap;
  margin: 0 0 -5px;
  overflow: hidden;
}
.filter__bottom .item_filter {
  margin: 0 5px 5px 0;
}
.filter__show-more-items {
  margin: 30px 0 0;
  border-bottom: 1px dashed;
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  color: var(--color-grayscale-300);
}
.filter__button-close,
.filter__buttons {
  display: none;
}


/* Listing */
.listing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  width: 100%;
}


/* Similar */
.similar__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
}
.similar__listing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.similar__listing .mini-card__top,
.similar__listing .mini-card__image {
  width: calc((100vw - 180px) / 3)!important;
}
.similar__listing .mini-card__materials-list.slick-initialized {
  width: calc((100vw - 180px) / 3);
}
.similar__listing-show-more {
  margin: 0 auto;
  width: 330px;
}


/* Mini-card */
.mini-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-content: space-between;
}
.mini-card__top,
.mini-card__images {
  position: relative;
}
.mini-card__top,
.mini-card__image {
  width: calc((100vw - 450px) / 3)!important;
  aspect-ratio: 3/4;
}
.catalog__main-content:has(.catalog__filter.is-close) .mini-card__top,
.catalog__main-content:has(.catalog__filter.is-close) .mini-card__image {
  width: calc((100vw - 180px) / 3)!important;
}
.mini-card__images {
  height: 100%;
  cursor: pointer;
  overflow: hidden;

  opacity: 0;

  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}
.mini-card__images.slick-initialized {
  opacity: 1;
}
.mini-card__image img,
.mini-card__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mini-card__images.slick-initialized .button-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.4;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.mini-card__images.slick-initialized .button-arrow-prev {
  display: none!important;
}
.mini-card__images.slick-initialized .button-arrow-next {
  right: 10px;
}
.mini-card__categories {
  position: absolute;
  bottom: 0;
  left: 0;
  flex-wrap: wrap;
  padding: 10px 10px 5px;
  width: 100%;
  height: auto;
  list-style-type: none;
}
.mini-card__categories li {
  margin: 0 5px 5px 0;
  padding: 5px 10px;
  border-radius: 20px;
  background-color: var(--color-default-white);
  color: var(--color-grayscale-300);
}
.mini-card__cat-kitchen::before {
  content: "Кухня";
}
.mini-card__name,
.mini-card__price-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}
.mini-card__name > span,
.mini-card__materials > span,
.mini-card__price-info > p {
  color: var(--color-grayscale-300);
}
.mini-card__link span {
  border-bottom: 1px solid transparent;
}
.mini-card__link svg {
  margin: 0 0 0 20px;
}
.mini-card__materials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.mini-card__materials-list {
  flex-wrap: wrap;
}
.mini-card__materials-item {
  flex-shrink: 0;
  margin: 0 5px 0 0;
}
.mini-card__materials-list.slick-initialized {
  position: relative;
  display: block;
  padding: 0 48px 0 0;
  width: calc((100vw - 450px) / 3);
}
.mini-card__materials-list.slick-initialized .button-arrow {
  position: absolute;
  top: 0;
}
.mini-card__materials-list.slick-initialized .button-arrow-prev {
  display: none!important;
}
.mini-card__materials-list.slick-initialized .button-arrow-next {
  right: 0;
}
.mini-card__tooltip {
  position: relative;
  margin: 0 0 0 10px;
  cursor: pointer;
}
.mini-card__tooltip span {
  color: var(--color-grayscale-200);
}
.mini-card__tooltip p {
  display: none;
  position: absolute;
  top: -35px;
  left: 0;
  padding: 5px;
  width: auto;
  min-width: 150px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 20px 0 rgba(31, 43, 61, 0.1);
  background-color: var(--color-default-white);
  background-color: var(--color-default-white);
}
.mini-card__buttons {
  gap: 5px;
  opacity: 0;
}



/* Card */
.card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 200px;
}
.card__top-wrapper {
  gap: 60px;
}
.card__images {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.card__image {
  aspect-ratio: 3/4;
}
.card__image a,
.card__image img,
.card__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__images.slick-initialized {
  position: relative;
  display: block;
  width: calc(100vw - 60px);
  max-width: 1500px;
  margin: 0 -20px;
}
.card__images.slick-initialized .card__image {
  margin: 0 20px;
}
.card__images.slick-initialized .button-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 20px var(--color-default-white);
  z-index: 1;
}
.card__images.slick-initialized .button-arrow-prev {
  left: 3px;
}
.card__images.slick-initialized .button-arrow-next {
  right: 3px;
}
.card__top-left,
.card__materials,
.card__price-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.card__top-left h1 {
  text-transform: uppercase;
}
.card__top-left span,
.card__price-info {
  color: var(--color-grayscale-300);
}
.card__materials-list {
  flex-wrap: wrap;
}
.card__materials-list.slick-initialized {
  position: relative;
  display: block;
  padding: 0 43px 0 0;
  width: calc((100vw - 240px) / 2)!important;
}
.card__materials-list.slick-initialized .button-arrow {
  position: absolute;
  top: 0;
}
.card__materials-list.slick-initialized .button-arrow-prev {
  display: none!important;
}
.card__materials-list.slick-initialized .button-arrow-next {
  right: 0;
}
.card__materials-item {
  flex-shrink: 0;
  margin: 0 5px 0 0;
}
.card__art {
  margin: 31px 0 0;
}
.card__top-right {
  display: grid;
  grid-template-columns: 1fr;
  align-content: space-between;
  max-width: 600px;
}
.card__tooltip {
  position: relative;
  margin: 0 0 0 10px;
  cursor: pointer;
}
.card__tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 10px;
  height: 50px;
}
.card__tooltip span {
  color: var(--color-grayscale-200);
}
.card__tooltip p {
  display: none;
  position: absolute;
  top: 50%;
  left: calc(100% + 5px);
  transform: translateY(-50%);
  padding: 5px;
  width: 225px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 20px 0 rgba(31, 43, 61, 0.1);
  background-color: var(--color-default-white);
}
.card__tooltip p a {
  color: inherit;
  text-decoration: underline;
}
.card__buttons {
  gap: 5px;
}
.card__bottom-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 100px;
  padding: 140px 0;
}
.card__date {
  margin: 10px 0 0;
  color: var(--color-grayscale-200);
}
.card__bottom-grid {
  gap: 100px;
  align-items: start;
}
.card__description {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.card__description ul,
.card__description ol {
  padding: 0 0 0 20px;
}
.card__description a {
  color: var(--color-grayscale-300);
}
.card__specification {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 33px;
  padding: 40px;
  height: auto;
  min-height: 485px;
  max-height: 485px;
  background-color: var(--color-grayscale-400);
  overflow: hidden;
}
.card__specification.is-open {
  max-height: 2000px;
  padding: 40px 40px 140px;
}
.card__specification-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.card__specification-item ul {
  flex-wrap: wrap;
  list-style-type: none;
}
.card__specification-item li {
  flex-shrink: 0;
  margin: 0 7px 7px 0;
  padding: 4px 15.5px;
}
.card__specification-item .tag-dark a {
  color: var(--color-grayscale-200);
}
.card__specification-button-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 100px 40px 20px;
  width: 100%;
  height: auto;
  background: linear-gradient(180deg, rgba(72, 72, 72, 0.00) 0%, #484848 73%);
}
.card__specification.is-open .card__specification-button-wrapper {
  padding: 40px;
}
.card__specification-button {
  width: 100%;
}
.card__specification-button.is-open::after {
  content: 'Скрыть характеристики';
}
.card__specification-button.is-open span {
  display: none;
}


/* Stories */
.stories {
  background-color: var(--color-grayscale-100);
}
.stories__wrapper {
  padding: 40px 0 33.5px;
}
.stories.carousel .story {
  margin: 0 14px;
  width: 97px;
  max-width: 97px;
}
.stories.carousel .story > .item-link > .item-preview {
  height: 97px;
  max-height: 97px;
}
.stories.carousel .story > .item-link > .info .name {
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  color: var(--color-grayscale-400);
}
.stories.snapgram .story > .item-link > .item-preview {
  padding: 2px;
  background: var(--color-yellow);
}
#zuck-modal-content .story-viewer .head .left .info > .time {
  display: none !important;
}
#zuck-modal-content .story-viewer .head .right .close {
  color: rgba(255, 255, 255, 0.5);
}

.item-preview {
  position: relative;
}
.item-preview img {
  position: relative;
  z-index: 1;
}
.item-preview canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  height: 100%;
}


/* Page */
.page__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 100px;
}
.page__wrapper:has(.sidebar) {
  grid-template-columns: auto 420px;
}
.page__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.page__content h1 {
  margin: 0 0 30px;
}
.page__content h2,
.page__content h3 {
  margin: 30px 0 0;
}
.page__content ul,
.page__content ol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 0 0 0 48px;
}
.page__content ul {
  list-style-type: none;
}
.page__content ul li {
  position: relative;
}
.page__content ul li::before {
  content: "▪️";
  position: absolute;
  top: -2px;
  left: -19px;
  transform: scale(1.6);
}
.page__content a {
  text-decoration: underline dashed;
}
.page__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin: 30px 0 0;
  padding: 25px 30px;
  background-color: var(--color-grayscale-500);
  color: var(--color-default-white);
}
.page__form > .form {
  padding: 30px;
  width: 100%;
  background-color: var(--color-default-white);
}
.page__form > .form > .form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.page__form .form__top {
  display: none;
}
.page__form .form__fieldset-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.page__form .form-send-success {
  font-size: 18px;
}
.page .review {
  position: relative;
}
.page .review:nth-child(4n + 1):not(:first-child)::before {
  content: "";
  position: absolute;
  top: -102px;
  left: 0;
  width: calc(100vw - 100px);
  max-width: 1460px;
  height: 1px;
  background-color: var(--color-grayscale-200);
}
.page__sale-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 200px;
}
.page__sale-item {
  position: relative;
  gap: 100px;
}
.page__sale-item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-grayscale-200);
}
.page__sale-item .sale__link {
  cursor: default;
}
.page__sale-content span {
  display: block;
  margin: 0 0 15px;
}
.page__contacts {
  gap: 100px;
  align-items: start;
}
.page__contacts-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
}
.page__contacts-content h1 {
  position: relative;
  padding: 0 0 60px;
}
.page__contacts-content h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-grayscale-200);
}
.page__contacts-content ul {
  list-style-type: none;
}
.page__contacts-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.page__contacts-mail {
  color: var(--color-grayscale-300);
}
.page__contacts-social li:not(:last-child) {
  margin: 0 40px 0 0;
}
.page__contacts-social a svg {
  margin: 0 5px 0 0;
}
.page__contacts-map iframe {
  border: none;
  filter: grayscale(100%);
}


/* Blog */
.blog__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 100px;
}
.blog__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px 40px;
}
.blog__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  cursor: pointer;
}
.blog__item-image {
  aspect-ratio: 650/366;
  overflow: hidden;
}
.blog__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog__item-date {
  color: var(--color-grayscale-300);
}


/* Article */
.article,
.article__content-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
}
.article__top {
  position: relative;
  padding: 226px 115px 40px;
}
.article__cover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.article__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article__intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  justify-items: start;
  padding: 40px;
  background-color: var(--color-default-white);
}
.article__intro-top,
.article__intro-bottom {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 30px;
  color: var(--color-grayscale-300);
}
.article__intro h1 {
  line-height: 100%;
}
.article__content-wrapper {
  padding: 0 115px;
}
.article__toc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  padding: 37px 40px 40px;
  background-color: var(--color-grayscale-100);
}
.article__toc ol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 0 0 0 24px;
  color: var(--color-grayscale-400);
}
.article__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.article__content h2,
.article__content h3 {
  margin-top: 30px;
}
.article__content h2 {
  font-weight: 500;
  font-size: 44px;
  line-height: 100%;
  letter-spacing: -2.5px;
}
.article__content h3 {
  font-weight: 500;
  font-size: 28px;
  line-height: 100%;
  letter-spacing: -1px;
}
.article__content ul:not(.mini-card ul),
.article__content ol {
  display: grid;
  grid-template-columns: 1fr;
  gap:  5px;
  padding: 0 0 0 24px;
}
.article__content a:not(.mini-card a) {
  text-decoration: underline;
}
.article__content img:not(.article__slider img, .article__gallery img, .mini-card img) {
  margin: 30px 0;
  width: 100%;
  height: auto;
}
.article__content blockquote {
  margin: 30px 0;
  padding: 40px;
  background-color: var(--color-grayscale-500);
  color: var(--color-default-white);
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
}
.article__slider {
  position: relative;
  width: calc(100vw - 330px);
  max-width: 1230px;
}
.article__slider .button-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.4;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.article__slider .button-arrow-prev {
  left: 10px;
}
.article__slider .button-arrow-next {
  right: 10px;
}
.article__slider .button-arrow.slick-disabled {
  opacity: 0;
}
.article__gallery {
  display: grid;
  gap: 40px;
  margin: 30px 0;
}
.article__gallery--3 {
  grid-template-columns: repeat(3, 1fr);
}
.article__gallery--5 {
  grid-template-columns: repeat(5, 1fr);
}
.article__gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
  cursor: zoom-in;
}
.article__listing {
  margin: 30px 0 0;
}


/* Portfolio */
.portfolio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 100px;
}
.portfolio__count {
  color: var(--color-grayscale-200);
}
.portfolio__tag:not(:last-child) {
  margin: 0 5px 0 0;
}
.portfolio__tag-content {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.portfolio__tag-content.is-active {
  display: grid;
}
.portfolio__item {
  position: relative;
}
.portfolio__item-images,
.portfolio__item-image {
  width: calc((100vw - 180px) / 3)!important;
  aspect-ratio: 3/4;
}
.portfolio__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portfolio__item-images.slick-initialized .button-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.4;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.portfolio__item-images.slick-initialized .button-arrow-prev {
  display: none!important;
}
.portfolio__item-images.slick-initialized .button-arrow-next {
  right: 10px;
}
.portfolio__item-category,
.portfolio__item-count {
  position: absolute;
  bottom: 10px;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(11, 11, 11, 0.1);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: var(--color-default-white);
}
.portfolio__item-category {
  left: 10px;
}
.portfolio__item-count {
  right: 10px;
}


/* Cities */
.wrapper:has(.cities) .action {
  margin: 0 0 -200px;
}
.cities {
  background-color: var(--color-grayscale-100);
}
.cities__top {
  padding: 40px 0;
}
.cities__top span {
  text-align: center;
}
.cities__button {
  margin: 0 0 0 10px;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: inherit;
  color: var(--color-grayscale-300);
  text-decoration: underline dotted;
  text-underline-offset: 7px;
}
.cities.is-open .cities__button::before {
  content: "Скрыть список городов";
}
.cities.is-open .cities__button span {
  display: none;
}
.cities__bottom {
  max-height: 0;
  overflow: hidden;
}
.cities.is-open .cities__bottom {
  max-height: 2000px;
}
.cities__list {
  margin: 0 -13px 0 -8px;
  padding: 25px 0 80px;
  list-style-type: none;
  -moz-column-count: 5;
  -webkit-column-count: 5;
  column-count: 5;
}
.cities__list li {
  margin: 0 0 30px;
  text-align: center;
}
.cities__list a {
  display: inline-block;
  padding: 5px 0;
}


/* Form */
.form {
  position: relative;
  color: var(--color-grayscale-300);
}
.form__top {
  text-align: center;
}
.form label {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.form__text {
  text-align: center;
  font-size: 12px;
}
.form__text a {
  color: inherit;
  text-decoration: underline dashed;
}
.form-send-success {
  font-weight: 500;
  font-size: 26px;
  line-height: 150%;
  letter-spacing: -1px;
}


/* Form modal */
.fancybox__carousel.is-draggable .fancybox__slide {
  cursor: default !important;
}
.fancybox__content:has(.form) {
  cursor: default !important;
}
#modal_form .form,
.materials__customer .form,
.calculator__customer-content .form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
#modal_form .form__fieldset-wrapper,
.calculator__customer-content .form__fieldset-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}


/* Hidden */
.hidden {
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}
.hidden-grow,
.hidden-left-to-right,
.hidden-right-to-left {
  transform: translateY(100px);
}
.hidden-grow.show,
.hidden-left-to-right.show,
.hidden-right-to-left.show  {
  transform: translateY(0);
}
/* .hidden-left-to-right {
  transform: translateX(-100%);
}
.hidden-left-to-right.show {
  transform: translateX(0);
}
.hidden-right-to-left {
  transform: translateX(100%);
}
.hidden-right-to-left.show {
  transform: translateX(0);
} */


/* Error */
.error__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 45px;
  justify-items: center;
  padding: 100px;
}
.error__wrapper span {
  text-align: center;
}


/* Footer */
.footer__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 105px;
  padding: 200px 0 60px;
}
.footer__top {
  align-items: start;
}
.footer__top,
.footer__right {
  gap: 40px;
}
.footer__left,
.footer__right,
.footer__contacts {
  display: grid;
  grid-template-columns: 1fr;
}
.footer__left {
  gap: 60px;
}
.footer__left .title-medium {
  text-transform: none;
}
.footer__navigation {
  margin: -10px 0;
  width: calc(100% + 22px);
  list-style-type: none;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
.footer__navigation a {
  padding: 10px 0;
}
.footer__right,
.footer__contacts {
  justify-items: end;
}
.footer__contacts {
  gap: 10px;
  margin: 0 2px 0 0;
  list-style-type: none;
}
.footer__mail {
  color: var(--color-grayscale-300);
}
.footer__bottom-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  justify-items: start;
}
.footer__bottom-item:first-child {
  margin: 0 279px 0 0;
}
.footer__bottom-item:last-child {
  justify-items: end;
  margin: 0 0 0 auto;
}
.footer__bottom-item > span {
  color: var(--color-grayscale-300);
}
.footer__bottom-item a {
  border-bottom: 2px solid;
}
.footer__bottom-item--by .footer__bottom-link {
  margin: 0 0 0 5px;
}


/* Messengers */
.messengers-button {
  position: fixed;
  right: -10px;
  bottom: -10px;
  transform: translateX(-50%) translateY(-50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-image: url('../img/content/messengers/messengers-gif.gif');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  z-index: 9999;
}
.messengers-button::before,
.messengers-button::after {
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  top: -20px;
  bottom: -20px;
  display: block;
  border-radius: 50%;
  border: 1px solid #fff;
  opacity: 0;
  animation: border-animate 1.5s linear infinite;
}
.messengers-button::after{
  animation-delay: 0.5s;
}
.messengers {
  padding: 60px 50px;
  width: 548px;
  max-width: 100%;
  border-radius: 14px;
  background-color: #fff;
  cursor: default!important;
}
.messengers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0 38px;
}
.messengers p {
  text-align: center;
}
.messengers__title {
  margin: 0 0 30px;
  font-weight: 700;
  font-size: 28px;
  line-height: 120%;
  color: #32312f;
}
.messengers a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 15px;
  line-height: 150%;
  color: #fff;
}
.messengers__wa-link {
  background-color: #39bc6c;
}
.messengers__wa-link:hover {
  background-color: #29cc68;
}
.messengers__tg-link {
  background-color: #1da1da;
}
.messengers__tg-link:hover {
  background-color: #05aaf2;
}
.messengers a svg {
  margin: 0 5px 0 0;
}
.messengers__text {
  position: relative;
  padding: 20px 0;
}
.messengers__text::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background-color: #a1a5ad;
  z-index: -1;
}
.messengers__text p {
  margin: 0 auto;
  padding: 0 7px;
  width: max-content;
  background-color: #fff;
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  color: #a1a5ad;
  text-align: center;
}
.messengers__qr-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  justify-items: center;
}


/* Dialogue */
.dialogue {
  position: fixed;
  bottom: 70px;
  right: 130px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 20px;
  width: 100%;
  max-width: 307px;
  border-radius: 10px 10px 0 10px;
  background-color: var(--color-default-white);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.20);
  z-index: 100;

  transform: translateY(150%);
  opacity: 0;

  transition: all 0.5s cubic-bezier(.39,.58,.57,1);
  -moz-transition: all 0.5s cubic-bezier(.39,.58,.57,1);
  -o-transition: all 0.5s cubic-bezier(.39,.58,.57,1);
  -webkit-transition: all 0.5s cubic-bezier(.39,.58,.57,1);
}
.dialogue.is-open {
  transform: translateY(0);
  opacity: 1;
}
.dialogue__top {
  display: grid;
  grid-template-columns: 65px auto 18px;
  gap: 20px;
  align-items: center;
}
.dialogue__image {
  position: relative;
  width: 65px;
  height: 65px;
}
.dialogue__image::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--color-default-white);
  background-color: #39B239;
}
.dialogue__image img {
  border-radius: 10px;
}
.dialogue__manager {
  display: grid;
  grid-template-columns: 1fr;
}
.dialogue__manager span:first-child {
  color: var(--color-grayscale-600);
}
.dialogue__manager span:last-child {
  color: var(--color-grayscale-300);
}
.dialogue__close {
  align-self: start;
  position: relative;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.dialogue__close::before,
.dialogue__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-grayscale-300);

  transition: var(--easy);
  -moz-transition: var(--easy);
  -o-transition: var(--easy);
  -webkit-transition: var(--easy);
}
.dialogue__close::before {
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.dialogue__close::after {
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.dialogue__text {
  padding: 14px 20px;
  border-radius: 0 20px 20px 20px;
  background-color: #F1F6F2;
  color: var(--color-grayscale-500);
}


/* Hover */
.calculator__tooltip:hover p,
.mini-card__tooltip:hover p,
.card__tooltip:hover p {
  display: block;
}
@media (min-width: 1024px) {
  @media (hover: hover) {
    .header__menu:hover .header__menu-toggle,
    .header__dropout:hover .header__dropout-point,
    .header__navigation a:hover,
    .header__dropout:hover .header__show-more,
    .header__contacts a:hover,
    .header__contacts .button:hover,
    .header__messengers a:hover,
    .breadcrumbs__item a:hover,
    .faq__item-top:hover,
    .filter__top:hover,
    .reviews.slick-initialized .button-arrow-big:hover,
    .viewed__slide:hover .viewed__link,
    .viewed__slider.slick-initialized .button-arrow-big:hover,
    .page__content a:hover,
    .page__contacts-tel:hover,
    .page__contacts-social a:hover,
    .footer__navigation a:hover,
    .footer__tel:hover,
    .footer__bottom-item a:hover,
    .blog__item:hover .blog__item-link,
    .article__content a:hover,
    .article__toc a:hover,
    .cities__list a:hover {
      color: var(--color-grayscale-300);
    }
    .card__tooltip p a:hover,
    .calculator__tooltip p a:hover,
    .calculator__form-input:hover input + span,
    .card__description a:hover,
    .form__text a:hover,
    .cities__button:hover {
      color: var(--color-grayscale-400);
    }
    .hero__link:hover,
    .catalog__sorting a:hover,
    .filter__show-more-items:hover,
    .review__button:hover,
    .page__contacts-mail:hover,
    .footer__mail:hover {
      color: var(--color-grayscale-600);
    }
    .about__link:hover {
      color: var(--color-default-white);
    }
    .header__menu:hover .header__menu-toggle-icon,
    .header__menu:hover .header__menu-toggle-icon::before,
    .header__menu:hover .header__menu-toggle-icon::after,
    .faq__item-top:hover .faq__item-button::before,
    .faq__item-top:hover .faq__item-button::after,
    .filter__top:hover::before,
    .filter__top:hover::after {
      background-color: var(--color-grayscale-300);
    }
    .card__specification-button:hover {
      background-color: var(--color-default-white);
      color: var(--color-grayscale-600);
    }
    .main-sale__list.slick-initialized .button-arrow:hover {
      background-color: var(--color-grayscale-200);
      color: var(--color-grayscale-400);
    }
    .card__specification-item .tag-dark:hover {
      background-color: var(--color-grayscale-600);
    }
    .mini-card:has(.mini-card__tooltip:hover) {
      z-index: 1;
    }
    .mini-card__images.slick-initialized .button-arrow:hover,
    .portfolio__item-image.slick-initialized .button-arrow:hover {
      opacity: 0.8;
    }
    .mini-card:hover .mini-card__buttons {
      opacity: 1;
    }
    .mini-card:hover .mini-card__link span {
      border-bottom: 1px solid var(--color-grayscale-600);
    }
    .mini-card:hover .mini-card__link svg {
      margin: 0 0 0 30px;
    }
    .main-sale__list .sale:hover .sale__image img,
    .certificates__item:hover img,
    .viewed__slide:hover img,
    .mini-card:hover img,
    .mini-card:hover video,
    .blog__item:hover img {
      transform: scale(1.05);
    }
    .hero__link:hover {
      animation: scale 0.6s ease-in both;
    }
    .hero__link:hover span::after,
    .about__link:hover span::after {
      transform: translateX(-50%) translateY(-10%);
    }
    .about__link-wrapper:hover .about__link {
      animation: scale-2 0.6s ease-in;
    }
    .materials__item:hover {
      padding: 20px 275px 20px 340px;
    }
    .materials__item:hover .materials__item-column:nth-child(3) {
      margin: 0 0 0 30px;
    }
    .materials__item:hover .materials__item-image img {
      transform: scale(1);
      opacity: 1;
    }
    .materials__item:hover .materials__item-button {
      animation: zoom-2 0.6s ease-in forwards;
    }
    .faq__item-top:hover .faq__item-button {
      animation: jump 0.6s ease both;
    }
    .reviews.slick-initialized .button-arrow-big-prev:hover,
    .viewed__slider.slick-initialized .button-arrow-big-prev:hover {
      animation: jump-to-left 0.6s ease both;
    }
    .reviews.slick-initialized .button-arrow-big-next:hover,
    .viewed__slider.slick-initialized .button-arrow-big-next:hover,
    .viewed__slide:hover .viewed__link svg {
      animation: jump-to-right 0.6s ease both;
    }
    .header__menu:hover .menu,
    .header__dropout:hover .header__dropout-content {
      display: block;
      animation: fade-in-up 0.3s ease-in both;
    }
    .menu__item:hover {
      background-color: var(--color-grayscale-100);
    }
    .menu__item:hover .menu__link--lvl-1 svg {
      color: var(--color-grayscale-600);
    }
    .menu__item:hover .menu__submenu {
      max-width: 1000px;
    }
    .menu__link--lvl-2:hover .menu__link-count {
      background-color: var(--color-grayscale-600);
      color: var(--color-default-white);
    }
  }
}


/* Animation */
@keyframes grow {
  0% {
    transform: translateY(200%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes zoom {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes zoom-2 {
  0% {
    transform: translateY(-50%) scale(0);
    opacity: 0;
  }
  40% {
    transform: translateY(-50%) scale(1.1);
    opacity: 1;
  }
  50% {
    transform: translateY(-50%) scale(1.05);
  }
  60% {
    transform: translateY(-50%) scale(1.1);
  }
  100% {
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
}
@keyframes left-to-right {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes right-to-left {
  0% {
    transform: translateX(0100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes scale {
  0%, 100% {
    transform: translateX(-50%) translateY(-50%) rotate(6deg) scale(1);
  }
  20%, 60% {
    transform: translateX(-50%) translateY(-50%) rotate(6deg) scale(1.1);
  }
  40% {
    transform: translateX(-50%) translateY(-50%) rotate(6deg) scale(1.05);
  }
}
@keyframes scale-2 {
  0%, 100% {
    transform: scale(1);
  }
  20%, 60% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1.05);
  }
}
@keyframes jump {
  0%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px) rotate(0);
  }
  35% {
    transform: translateY(-10px) rotate(10deg);
  }
  40% {
    transform: translateY(-10px) rotate(-10deg);
  }
  45% {
    transform: translateY(-10px) rotate(10deg);
  }
  50% {
    transform: translateY(-10px) rotate(0deg);
  }
}
@keyframes jump-to-right {
  0%, 100%  {
    transform: translateX(0);
  }
  40% {
    transform: translateX(4px);
  }
  45% {
    transform: translateX(2px);
  }
  50% {
    transform: translateX(4px);
  }
}
@keyframes jump-to-left {
  0%, 100%  {
    transform: translateX(0);
  }
  40% {
    transform: translateX(-4px);
  }
  45% {
    transform: translateX(-2px);
  }
  50% {
    transform: translateX(-4px);
  }
}
@keyframes fade-in-up {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes border-animate
{
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}