:root {
  --product-body-1: #499ff7;
  --product-body-2: #5780f3;
  --product-body-3: #695ff1;
  --product-body-4: #7742ee;
  --product-gray-1: #ebf0fd;
  --product-gray-2: #d8e0f4;
  --product-radius: 48px;
}

.product-page h3 {
  margin: 0;
}

.product-page main {
  overflow: hidden;
}

.product-hero {
  position: relative;
  height: auto;
  min-height: 536px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%),
    var(--page-gradient);
}

.product-hero__content {
  display: flex;
  height: auto;
  min-height: 536px;
  flex-direction: column;
}

.product-page .hero__menu {
  position: relative;
  inset: auto;
  width: 100%;
  height: 184px;
  flex: 0 0 184px;
}

.product-page .phone--header,
.product-page .languages {
  top: 80px;
}

.product-page .phone--header {
  left: 0;
  font-size: var(--font-label-size);
}

.product-page .phone--header span {
  display: inline;
}

.product-page .languages {
  right: 0;
  left: auto;
}

.product-page .hero__logo-link {
  position: absolute;
  inset: 0;
}

.product-page .hero__logo {
  top: 12px;
  left: 50%;
  width: 164px;
  height: 160px;
  transform: translateX(-50%);
}

.product-hero__headline {
  position: static;
  width: 800px;
  margin: 64px auto 0;
  text-align: center;
}

.product-hero__headline h1 {
  font-size: var(--font-h1-size);
  font-weight: 700;
  line-height: 1;
}

.product-hero__headline p {
  width: 800px;
  margin: 8px 0 0;
  font-size: var(--font-title-size);
  font-weight: 500;
  line-height: 1.2;
}

.product-hero__action,
.product-help__action {
  width: 389px;
}

.product-hero__action {
  position: static;
  margin: 64.609375px auto 0;
}

.product-decorative {
  width: 100%;
  height: 142px;
  overflow: hidden;
}

.product-decorative img {
  width: 100%;
  height: 142px;
  max-width: none;
}

.product-main {
  height: auto;
  background: var(--color-white);
}

.product-main__content {
  display: flex;
  height: auto;
  flex-direction: column;
  gap: 80px;
  padding: 80px 0;
}

.automation-products__grid {
  display: grid;
  padding: 80px 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 80px;
  row-gap: 80px;
  align-items: start;
}

.automation-product {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 24px;
}

.automation-product__media {
  position: relative;
  display: block;
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-radius: var(--product-radius);
}

.automation-product__media img {
  position: absolute;
  top: calc(-100% * var(--crop-y) / var(--crop-d));
  left: calc(-100% * var(--crop-x) / var(--crop-a));
  display: block;
  width: calc(100% / var(--crop-a));
  height: calc(100% / var(--crop-d));
  max-width: none;
}

.automation-product__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
}

.automation-product__copy h3 {
  font-size: var(--font-title-size);
  font-weight: 500;
  line-height: 29px;
}

.automation-product__copy p {
  font-size: var(--font-body-size);
  line-height: 19px;
}

.product-card {
  display: grid;
  width: 1280px;
  height: 640px;
  flex: 0 0 640px;
  overflow: hidden;
  border-radius: var(--product-radius);
  grid-template-columns: 640px 640px;
}

.product-card--body1 .product-card__info {
  background: var(--product-body-1);
}

.product-card--body2 .product-card__info {
  background: var(--product-body-2);
}

.product-card--body3 .product-card__info {
  background: var(--product-body-3);
}

.product-card--body4 .product-card__info {
  background: var(--product-body-4);
}

.product-card--reverse .product-card__cover {
  order: 2;
}

.product-card--reverse .product-card__info {
  order: 1;
}

.product-card__cover,
.product-card__cover img {
  width: 640px;
  height: 640px;
}

.product-card__cover img {
  max-width: none;
  object-fit: cover;
}

.product-card__info {
  position: relative;
  width: 640px;
  height: 640px;
  color: var(--color-white);
}

.product-card__copy {
  position: absolute;
  top: 164.5px;
  left: 64px;
  display: flex;
  width: 512px;
  flex-direction: column;
  gap: 24px;
}

.product-card__copy h3 {
  font-size: var(--font-h3-size);
  font-weight: 700;
  line-height: 1;
}

.product-card__copy p {
  font-size: var(--font-label-size);
  line-height: 1.2;
}

.product-card__advantages {
  position: absolute;
  top: 396.5px;
  left: 64px;
  display: grid;
  width: 512px;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
}

.product-card__advantage {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
}

.product-card__advantage img {
  width: 49px;
  height: 48px;
  max-width: none;
}

.product-card__advantage img.product-card__advantage-icon--custom {
  width: 48px;
  height: 48px;
}

.product-card__advantage span {
  overflow: visible;
  font-size: var(--font-body-size);
  line-height: 1.2;
  white-space: normal;
}

@media (min-width: 1360px) {
  .product-card__info {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 64px;
  }

  .product-card__copy,
  .product-card__advantages {
    position: static;
    width: 512px;
    margin: 0 auto;
  }
}

.product-specifications {
  display: grid;
  width: 1280px;
  height: auto;
  min-height: 250px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--product-radius);
  grid-template-columns: repeat(2, 640px);
}

.product-specification {
  display: grid;
  height: auto;
  min-height: 250px;
  align-items: start;
  padding: 48px;
  grid-template-columns: 154px minmax(0, 1fr);
  column-gap: 24px;
}

.product-specification--1 {
  background: var(--product-gray-1);
}

.product-specification--2 {
  background: var(--product-gray-2);
}

.product-specification--3 {
  background: var(--product-gray-1);
}

.product-specification--4 {
  background: var(--product-gray-2);
}

.product-specification--5 {
  background: var(--product-gray-1);
}

.product-specification--6 {
  background: var(--product-gray-2);
}

.product-specification > img {
  width: 154px;
  height: 154px;
  border-radius: 0;
  object-fit: cover;
}

.product-specification > div {
  min-width: 0;
}

.product-specification h3 {
  color: var(--product-body-2);
  font-size: var(--font-h3-size);
  font-weight: 700;
  line-height: 1;
}

.product-specification p {
  margin-top: 12px;
  font-size: var(--font-label-size);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.product-variants {
  height: auto;
  padding: 80px 0 120px;
  background: var(--color-white);
}

.product-variants__grid {
  top: auto;
  display: grid;
  height: auto;
  min-height: 234px;
  grid-template-columns: repeat(3, 384px);
  grid-template-rows: auto auto;
  gap: 64px;
}

.product-variants__grid > h2 {
  width: 384px;
  color: var(--color-sky);
  line-height: 1;
}

.product-variant {
  width: 384px;
  height: auto;
  min-height: 74px;
}

.product-variant__headline {
  display: flex;
  width: 100%;
  height: 40px;
  align-items: center;
  gap: 12px;
}

.product-variant__headline img {
  width: 40px;
  height: 40px;
  max-width: none;
}

.product-variant__headline h3 {
  font-size: var(--font-title-size);
  font-weight: 500;
  line-height: 1.2;
}

.product-variant > p {
  margin-top: 12px;
  font-size: var(--font-label-size);
  line-height: 1.2;
  white-space: pre-line;
}

.product-help {
  position: relative;
  height: 560px;
  color: var(--color-white);
  background: var(--page-gradient);
}

.product-help__headline {
  position: absolute;
  top: 120px;
  left: 50%;
  width: 800px;
  text-align: center;
  transform: translateX(-50%);
}

.product-help__headline h2 {
  width: 804px;
  margin-left: -2px;
  font-size: var(--font-h1-size);
  line-height: 1;
  white-space: nowrap;
}

.product-help__headline p {
  width: 752px;
  margin: 24px auto 0;
  font-size: var(--font-title-size);
  font-weight: 500;
  line-height: 1.2;
}

.product-help__action {
  position: absolute;
  top: 375px;
  left: 50%;
  transform: translateX(-50%);
}

.product-services {
  position: relative;
  height: auto;
  padding: 80px 0 120px;
  background: var(--color-white);
}

.product-services__headline {
  top: auto;
  height: auto;
  min-height: 94px;
  text-align: center;
}

.product-page[data-product-slug="windows"] .product-variants__grid {
  min-height: 370px;
}

.product-page[data-product-slug="windows"] .product-services {
  min-height: 766px;
}

.product-services__headline p {
  margin-top: 24px;
  font-size: var(--font-label-size);
  line-height: 1.2;
}

.product-services__grid {
  position: relative;
  top: auto;
  left: auto;
  display: grid;
  height: auto;
  grid-template-columns: repeat(4, 290px);
  grid-template-rows: auto;
  gap: 40px;
  margin-top: 80px;
  transform: none;
}

.product-service {
  width: 290px;
  height: auto;
  min-height: 154px;
  text-align: center;
}

.product-service img {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  object-fit: cover;
}

.product-service h3 {
  margin: 12px 24px 0;
  font-size: var(--font-label-size);
  font-weight: 400;
  line-height: 1.2;
}

.product-gallery.gallery {
  position: relative;
  height: 788px;
  padding: 0;
  background: var(--color-gray-light);
}

.product-gallery .gallery__heading {
  height: 128px;
}

.product-gallery .gallery__heading h2 {
  top: 80px;
}

.product-gallery .gallery__carousel {
  top: 208px;
}

.product-gallery .gallery__carousel img {
  border-radius: var(--product-radius);
  object-fit: cover;
}

.product-page .consultation__submit:disabled {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
}

.product-page .consultation__submit:disabled:hover,
.product-page .consultation__submit:disabled:focus-visible {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
}

.product-error {
  display: flex;
  min-height: 720px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 32px;
  padding: 80px 24px;
  text-align: center;
  background: var(--page-gradient);
}

.product-error p {
  max-width: 560px;
  font-size: var(--font-title-size);
}

@media (max-width: 1359px) {
  :root {
    --product-radius: 32px;
  }

  .product-hero__headline {
    width: min(800px, calc(100% - 80px));
  }

  .product-hero__headline p {
    width: 100%;
  }

  .product-hero__action {
    max-width: calc(100% - 80px);
  }

  .product-main {
    height: auto;
  }

  .product-main__content {
    height: auto;
  }

  .automation-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 64px;
  }

  .automation-product__media {
    height: auto;
    aspect-ratio: 373 / 220;
  }

  .product-card {
    width: 100%;
    height: auto;
    flex-basis: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-card__cover,
  .product-card__cover img,
  .product-card__info {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .product-card__info {
    min-height: 480px;
  }

  .product-card__copy {
    top: 25.7%;
    left: 10%;
    width: 80%;
  }

  .product-card__advantages {
    top: 62%;
    left: 10%;
    width: 80%;
  }

  .product-specifications {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-specification {
    grid-template-columns: 120px minmax(0, 1fr);
    padding: 48px 32px;
  }

  .product-specification > img {
    width: 120px;
    height: 120px;
  }

  .product-variants {
    height: auto;
    padding: 80px 0;
  }

  .product-variants__grid {
    top: auto;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 56px 40px;
  }

  .product-variants__grid > h2,
  .product-variant {
    width: 100%;
  }

  .product-services {
    height: auto;
    padding: 80px 0;
  }

  .product-services__headline,
  .product-services__grid {
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    transform: none;
  }

  .product-services__grid {
    margin-top: 80px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .product-service {
    width: 100%;
  }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .product-page .hero__logo {
    width: 123px;
    height: 120px;
  }

  .product-hero__headline {
    margin-top: 40px;
  }

  .product-hero__headline h1 {
    font-size: 44px;
  }

  .product-hero__headline p {
    font-size: 20px;
  }

  .product-hero__action {
    margin-top: 40px;
  }

  .product-decorative,
  .product-decorative img {
    height: 72px;
  }

  .product-main__content {
    gap: 64px;
    padding: 64px 0;
  }

  .product-card {
    grid-template-columns: 1fr;
  }

  .product-card--reverse .product-card__cover,
  .product-card--reverse .product-card__info {
    order: initial;
  }

  .product-card__info {
    display: flex;
    min-height: 360px;
    aspect-ratio: auto;
    justify-content: center;
    flex-direction: column;
    gap: 32px;
    padding: 40px;
  }

  .product-card__copy,
  .product-card__advantages {
    position: static;
    width: 100%;
  }

  .product-card__advantages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-variants__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-help__headline {
    width: calc(100% - 80px);
  }

  .product-help__headline h2 {
    width: 100%;
    margin-left: 0;
    font-size: 44px;
    white-space: normal;
  }

  .product-help__headline p {
    width: 100%;
    font-size: 20px;
  }
}

@media (min-width: 600px) and (max-width: 767px) {
  .product-specifications {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) and (max-width: 1100px) {
  .product-card__cover,
  .product-card__cover img {
    height: 100%;
    aspect-ratio: auto;
  }

  .product-card__copy {
    top: 48px;
  }

  .product-card__advantages {
    top: auto;
    bottom: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }

  .product-card__advantage span {
    overflow: visible;
    white-space: normal;
  }
}

@media (max-width: 599px) {
  :root {
    --product-radius: 24px;
  }

  .product-page {
    --product-mobile-h1: 30px;
    --product-mobile-h2: 24px;
    --product-mobile-h3: 22px;
    --product-mobile-title: 18px;
    --product-mobile-label: 16px;
    --product-mobile-body: 14px;
    --product-mobile-button: 18px;
  }

  .product-hero {
    height: auto;
    min-height: 374px;
  }

  .product-hero__content.content-width {
    width: calc(100% - 24px);
    min-height: 374px;
    padding-bottom: 20px;
  }

  .product-page .hero__menu {
    width: 100%;
    height: 124px;
    flex-basis: 124px;
  }

  .product-page .phone--header,
  .product-page .languages {
    top: 50px;
  }

  .product-page .phone--header {
    left: 0;
  }

  .product-page .phone--header span {
    display: none;
  }

  .product-page .hero__logo {
    top: 12px;
    width: 102px;
    height: 100px;
  }

  .product-hero__headline {
    width: 100%;
    height: auto;
    min-height: 172px;
    flex: 0 0 auto;
    margin: 0;
    padding: 12px 0;
  }

  .product-hero__headline h1 {
    font-size: var(--product-mobile-h1);
  }

  .product-hero__headline p {
    width: 100%;
    margin-top: 8px;
    font-size: var(--product-mobile-title);
  }

  .product-hero__action {
    width: 100%;
    max-width: none;
    height: 58px;
    margin: 0;
    padding: 18px 40px;
    font-size: var(--product-mobile-button);
  }

  .product-decorative,
  .product-decorative img {
    height: 30px;
  }

  .product-main__content.content-width {
    width: calc(100% - 24px);
    gap: 40px;
    padding: 40px 0;
  }

  .automation-products__grid.content-width {
    width: calc(100% - 24px);
    padding: 40px 0;
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .automation-product {
    gap: 24px;
  }

  .automation-product__copy h3 {
    font-size: var(--product-mobile-h3);
  }

  .automation-product__copy p {
    font-size: var(--product-mobile-label);
    line-height: 19px;
  }

  .product-card {
    grid-template-columns: 1fr;
  }

  .product-card--reverse .product-card__cover,
  .product-card--reverse .product-card__info {
    order: initial;
  }

  .product-card__cover,
  .product-card__cover img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .product-card__info {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 359px;
    aspect-ratio: auto;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
  }

  .product-card__copy {
    position: static;
    width: 100%;
    gap: 12px;
  }

  .product-card__copy h3 {
    font-size: var(--product-mobile-h3);
  }

  .product-card__copy p {
    font-size: var(--product-mobile-label);
    line-height: 19px;
  }

  .product-card__advantages {
    position: static;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
  }

  .product-card__advantage img {
    width: 33px;
    height: 32px;
  }

  .product-card__advantage img.product-card__advantage-icon--custom {
    width: 32px;
    height: 32px;
  }

  .product-card__advantage span {
    overflow: visible;
    font-size: var(--product-mobile-body);
    white-space: normal;
  }

  .product-specifications {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    grid-template-columns: 1fr;
  }

  .product-specification {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 225px;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
  }

  .product-specification > img {
    width: 100px;
    height: 100px;
  }

  .product-specification h3 {
    font-size: var(--product-mobile-h3);
  }

  .product-specification p {
    font-size: var(--product-mobile-label);
    line-height: 19px;
  }

  .product-variants {
    padding: 40px 0 80px;
  }

  .product-variants__grid.content-width {
    width: calc(100% - 24px);
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 40px;
  }

  .product-variants__grid > h2 {
    font-size: var(--product-mobile-h2);
  }

  .product-variant {
    height: auto;
    min-height: 71px;
  }

  .product-variant__headline h3 {
    font-size: var(--product-mobile-title);
  }

  .product-variant > p {
    font-size: var(--product-mobile-label);
    line-height: 19px;
  }

  .product-help {
    display: flex;
    height: auto;
    min-height: 452px;
    justify-content: flex-start;
    flex-direction: column;
    gap: 40px;
    padding: 80px 12px;
  }

  .product-help__headline {
    position: static;
    width: 100%;
    height: auto;
    min-height: 194px;
    flex: 0 0 auto;
    transform: none;
  }

  .product-help__headline h2 {
    width: 100%;
    margin-left: 0;
    font-size: var(--product-mobile-h1);
    white-space: normal;
  }

  .product-help__headline p {
    width: 100%;
    margin-top: 24px;
    font-size: var(--product-mobile-title);
  }

  .product-help__action {
    position: static;
    width: 100%;
    height: 58px;
    padding: 18px 40px;
    font-size: var(--product-mobile-button);
    transform: none;
  }

  .product-services {
    padding: 40px 0 80px;
  }

  .product-services__headline.content-width,
  .product-services__grid.content-width {
    width: calc(100% - 24px);
  }

  .product-services__headline {
    height: auto;
  }

  .product-services__headline h2 {
    font-size: var(--product-mobile-h2);
  }

  .product-services__headline p {
    margin-top: 12px;
    font-size: var(--product-mobile-label);
    line-height: 19px;
  }

  .product-services__grid {
    margin-top: 40px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 24px 12px;
  }

  .product-service {
    height: auto;
    min-height: 131px;
  }

  .product-service img {
    width: 100px;
    height: 100px;
  }

  .product-service h3 {
    margin: 12px 0 0;
    font-size: var(--product-mobile-label);
    line-height: 19px;
  }

  .product-gallery.gallery {
    height: auto;
    min-height: 372px;
    padding: 40px 12px 80px;
  }

  .product-gallery .gallery__heading {
    width: 100%;
    height: 24px;
  }

  .product-gallery .gallery__heading h2,
  .product-gallery .gallery__carousel {
    position: static;
  }

  .product-gallery .gallery__heading h2 {
    font-size: var(--product-mobile-h2);
  }

  .product-gallery .gallery__carousel {
    display: flex;
    width: 100%;
    height: 188px;
    align-items: center;
    justify-content: center;
    margin: 40px 0 0;
    transform: none;
  }

  .product-gallery .gallery__main {
    width: 100%;
    height: 193px;
    border-radius: var(--product-radius);
  }

  .product-page .consultation {
    height: 882px;
  }

  .product-page .consultation__headline {
    top: 80px;
    height: 112px;
  }

  .product-page .consultation__headline h2 {
    height: 24px;
    font-size: var(--product-mobile-h2);
  }

  .product-page .consultation__headline p {
    margin-top: 12px;
    font-size: var(--product-mobile-label);
  }

  .product-page .consultation__form {
    top: 232px;
    grid-template-rows: 43px 43px 43px 160px 51px;
    row-gap: 12px;
  }

  .product-page .consultation__form input[type="text"],
  .product-page .consultation__form input[type="email"],
  .product-page .consultation__form input[type="tel"],
  .product-page .phone-control,
  .product-page .form-field,
  .product-page .form-field > input,
  .product-page .phone-control input[type="tel"] {
    height: 43px;
    min-height: 43px;
  }

  .product-page .phone-control select {
    display: none;
  }

  .product-page .phone-control input[type="tel"] {
    padding: 12px 16px;
    border-radius: 12px;
  }

  .product-page .consent {
    height: 51px;
    margin-top: 0;
    font-size: 14px;
  }

  .product-page .consent__box {
    margin-top: 14px;
  }

  .product-page .consultation__note {
    top: 660px;
    font-size: var(--product-mobile-title);
  }

  .product-page .consultation__submit {
    top: 744px;
    height: 58px;
    color: var(--color-black);
    background: var(--color-yellow);
    font-size: var(--product-mobile-button);
  }

  .product-page .phone--footer span {
    width: 148px;
    flex: 0 0 148px;
  }
}
