:root {
    --color-brand-orange-soft: #fdefe7;
    --color-brand-orange-hover: #ff8f2a;
    --color-border-field: #ceced9;
    --color-danger-soft: #eb5757;
    --color-danger-border: #ff3b30;
    --color-modal-text: #000000;
    --color-form-text: #3b3b3b;
    --color-checkbox-border: #d9d9d9;
    --color-control-muted-hover: #e9e9e7;
    --color-benefits-text: #171c25;
    --hero-pagination-track-bg: rgba(255, 255, 255, 0.5);
    --modal-overlay-bg: rgba(0, 0, 0, 0.45);
    --modal-width: 338px;
    --modal-mobile-title-size: 20px;
    --benefits-gap: 20px;
    --benefits-card-gap: 24px;
    --benefits-list-width: 1151px;
    --benefits-icon-size: 80px;
    --benefits-icon-size-mobile: 40px;
    --benefits-text-width: 159px;
    --benefits-mobile-row-gap: 20px;
    --benefits-mobile-column-gap: 8px;
    --products-head-gap: var(--space-400);
    --products-head-content-gap: var(--space-800);
    --products-card-gap: var(--space-1000);
    --product-mobile-media-height: 292px;
    --product-info-gap: var(--space-300);
    --product-details-gap: var(--space-200);
    --product-features-gap: var(--space-150);
    --product-feature-gap: var(--space-150);
    --product-feature-icon-size: 24px;
    --product-feature-icon-size-mobile: 24px;
    --product-offer-padding-block: var(--space-300) var(--space-200);
    --product-offer-padding-inline: var(--space-200);
    --product-option-padding-block: var(--space-050);
    --product-option-padding-inline-start: var(--space-050);
    --product-option-padding-inline-end: var(--space-200);
    --product-option-gap: var(--space-100);
    --product-arrow-offset: var(--space-300);
    --product-pagination-bottom: var(--space-200);
    --product-pagination-dot-bg: rgba(255, 255, 255, 0.35);
    --product-availability-mobile-size: 11px;
    --product-stock-track-bg: #ffffff;
    --product-control-hover-bg: #2a2c35;
    --anchor-scroll-offset: 52px;
}

:focus-visible {
    outline: 2px solid var(--color-brand-orange);
    outline-offset: 3px;
}

html {
    scroll-padding-top: var(--anchor-scroll-offset);
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: var(--anchor-scroll-offset);
}

body {
    min-width: 320px;
    font-family: var(--font-family-main);
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
}

.container {
    width: 100%;
    max-width: 1332px;
    height: 100%;
    margin-inline: auto;
    padding-inline: var(--page-padding-inline);
}

body.is-menu-open {
    overflow: hidden;
}

.header {
    --header-action-bg: var(--color-brand-orange-soft);
    --header-glass-bg: rgba(255, 255, 255, 0.434);
    --header-menu-border: rgba(0, 0, 0, 0.05);
    --header-transition: var(--duration-medium) var(--ease-emphasized);

    position: fixed;
    top: 8px;
    right: 0;
    left: 0;
    z-index: 50;
    pointer-events: none;
}

.header__container {
    height: auto;
}

.header__inner {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 64px;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--space-200);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-surface);
    pointer-events: auto;
    transition:
        background-color var(--header-transition),
        backdrop-filter var(--header-transition),
        box-shadow var(--header-transition);
}

.header--glass .header__inner {
    background-color: var(--header-glass-bg);
    -webkit-backdrop-filter: blur(var(--blur-glass));
    backdrop-filter: blur(var(--blur-glass));
}

.header__left,
.header__right,
.header__contacts,
.header__actions,
.header__menu,
.header__socials {
    display: flex;
    align-items: center;
}

.header__left {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    gap: var(--space-400);
}

.header__right {
    flex: 0 0 auto;
    min-width: 0;
    height: 100%;
    gap: var(--space-250);
}

.header__logo {
    display: block;
    width: 102px;
    height: 32px;
    flex: 0 0 auto;
}

.header__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header__nav,
.header__menu {
    min-width: 0;
    height: 100%;
}

.header__menu {
    gap: var(--space-300);
}

.header__menu-item {
    display: flex;
    height: 100%;
    align-items: stretch;
}

.header__menu-link,
.header__phone {
    display: inline-flex;
    height: 100%;
    align-items: center;
    color: var(--color-text-primary);
    font-size: var(--font-size-150);
    line-height: var(--line-height-relaxed);
    white-space: nowrap;
    transition: color var(--header-transition);
}

.header__menu-link:hover,
.header__phone:hover {
    color: var(--color-brand-orange);
}

.header__contacts {
    height: 100%;
    justify-content: flex-end;
    gap: var(--space-300);
}

.header__socials,
.header__mobile-socials {
    gap: 30px;
}

.header__social {
    display: block;
    flex: 0 0 auto;
    color: var(--color-text-primary);
    background-color: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    transition: color var(--header-transition);
}

.header__social:hover {
    color: var(--color-brand-orange);
}

.header__social--vk {
    width: 24px;
    height: 15px;
    -webkit-mask-image: url("../img/header/vk.svg");
    mask-image: url("../img/header/vk.svg");
}

.header__social--max {
    width: 22px;
    height: 22px;
    -webkit-mask-image: url("../img/header/max.svg");
    mask-image: url("../img/header/max.svg");
}

.header__actions {
    gap: var(--space-100);
}

.header__callback,
.header__cart,
.header__burger,
.header__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header__callback {
    min-height: 48px;
    padding-inline: var(--space-200);
    border-radius: var(--button-radius);
    color: var(--color-text-inverse);
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    text-align: center;
    white-space: nowrap;
    background-color: var(--color-brand-orange);
    transition:
        background-color var(--header-transition),
        transform var(--header-transition);
}

.header__callback:hover {
    background-color: var(--color-brand-orange-hover);
}

.header__callback:active {
    transform: translateY(1px);
}

.header__cart {
    position: relative;
    width: 56px;
    min-width: 56px;
    height: 48px;
    border-radius: var(--button-radius);
    background-color: var(--header-action-bg);
    transition:
        background-color var(--header-transition),
        transform var(--header-transition);
}

.header__cart:hover {
    background-color: var(--color-brand-orange);
}

.header__cart:active {
    transform: translateY(1px);
}

.header__cart-icon {
    width: 24px;
    height: 24px;
    transition: filter var(--header-transition);
}

.header__cart:hover .header__cart-icon {
    filter: brightness(0) invert(1);
}

.header__cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    min-width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    padding-inline: 3px;
    border: var(--border-width-hairline) solid var(--color-brand-orange);
    border-radius: var(--radius-pill);
    color: var(--color-text-primary);
    font-size: var(--font-size-150);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    background-color: var(--color-bg-surface);
}

.header__cart-count--wide {
    min-width: 24px;
}

.header__burger,
.header__close {
    width: var(--tap-target-min);
    height: var(--tap-target-min);
}

.header__burger {
    display: none;
}

.header__burger img,
.header__close img {
    width: 24px;
    height: 24px;
}

.header__mobile-menu {
    display: none;
}

.main__hero {
    position: relative;
}

.hero {
    display: grid;
    min-height: 854px;
    overflow: hidden;
    color: var(--color-text-inverse);
}

.hero__slider.keen-slider,
.hero__shade {
    grid-area: 1 / 1;
}

.hero__slider.keen-slider {
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.hero__slide {
    height: 100%;
    min-height: inherit;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero__slide--center {
    background-position: center;
}

.hero__slide--left {
    background-position: 36% center;
}

.hero__slide--right {
    background-position: 64% center;
}

.hero__slide--top {
    background-position: center 32%;
}

.hero__slide--bottom {
    background-position: center 70%;
}

.hero__slide--wide {
    background-position: 48% center;
}

.hero__shade {
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.66) 0%,
            rgba(67, 67, 67, 0.49) 57.21%,
            rgba(0, 0, 0, 0.44) 100%);
}

.hero__container {
    grid-area: 1 / 1;
    z-index: 3;
    display: flex;
    flex-direction: column;
    min-height: inherit;
}

.hero__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1265px;
    margin-inline: auto;
    padding-top: 290px;
}

.hero__tag {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    color: var(--color-text-inverse);
    font-size: var(--font-size-200);
    line-height: var(--line-height-normal);
    white-space: nowrap;
    background-color: var(--color-bg-glass);
    backdrop-filter: blur(var(--blur-glass));
}

.hero__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 32px;
}

.hero__title {
    width: 100%;
    max-width: 1265px;
    margin-inline: auto;
    font-size: var(--type-hero-size);
    font-weight: var(--type-hero-weight);
    line-height: var(--type-hero-line-height);
    text-align: center;
}

.hero__title-layout,
.hero__title-line {
    display: block;
}

.hero__title-layout--desktop .hero__title-line {
    white-space: nowrap;
}

.hero__title-layout--mobile {
    display: none;
}

.hero__subtitle {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 28px;
    font-size: var(--type-hero-subtitle-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-hero-subtitle-line-height);
}

.hero__subtitle p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.hero__subtitle-line {
    display: inline-block;
    max-width: 100%;
}

.hero__button {
    display: inline-flex;
    width: 297px;
    min-height: var(--button-hero-min-block-size);
    align-items: center;
    justify-content: center;
    margin-top: 56px;
    padding-inline: var(--button-padding-inline);
    border-radius: var(--button-hero-radius);
    color: var(--color-text-inverse);
    font-size: var(--type-button-size);
    line-height: var(--type-button-line-height);
    text-align: center;
    background-color: var(--color-brand-orange);
    transition:
        transform var(--duration-base) var(--ease-standard),
        background-color var(--duration-base) var(--ease-standard);
}

.hero__button:hover {
    background-color: var(--color-brand-orange-hover);
}

.hero__button:active {
    transform: translateY(1px);
}

.hero__controls {
    margin-top: 8px;
    padding-bottom: 10px;
}

.hero__arrows {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 24px;
}

.hero__arrow {
    display: inline-flex;
    width: var(--control-oval-size);
    min-width: var(--tap-target-min);
    height: var(--control-oval-size);
    min-height: var(--tap-target-min);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-control);
    background-color: var(--color-control-dark);
    transition:
        transform var(--duration-base) var(--ease-standard),
        background-color var(--duration-base) var(--ease-standard);
}

.hero__arrow:hover {
    background-color: rgba(42, 44, 53, 0.88);
}

.hero__arrow:active {
    transform: scale(0.96);
}

.hero__arrow img {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
}

.hero__pagination {
    display: flex;
    gap: 14px;
}

.hero__pagination-button {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--tap-target-min);
    border-radius: var(--radius-pill);
    --hero-progress: 0%;
}

.hero__pagination-button::before,
.hero__pagination-button::after {
    position: absolute;
    top: 19px;
    left: 0;
    height: 6px;
    border-radius: var(--radius-pill);
    content: "";
}

.hero__pagination-button::before {
    right: 0;
    background-color: var(--hero-pagination-track-bg);
    transition: background-color var(--duration-base) var(--ease-emphasized);
}

.hero__pagination-button::after {
    width: var(--hero-progress);
    background-color: var(--color-text-inverse);
    will-change: width;
}

.main__benefits {
    padding-block: var(--space-800) var(--space-1500);
    background-color: var(--color-bg-page);
}

.benefits__list {
    display: flex;
    width: 100%;
    max-width: var(--benefits-list-width);
    align-items: flex-start;
    gap: var(--benefits-gap);
    margin-inline: auto;
}

.benefits__item {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--benefits-card-gap);
}

.benefits__icon {
    position: relative;
    display: block;
    width: var(--benefits-icon-size);
    height: var(--benefits-icon-size);
    flex: 0 0 auto;
}

.benefits__icon-part {
    position: absolute;
    display: block;
    object-fit: fill;
}

.benefits__icon-part--durability {
    top: 10%;
    left: 0;
    width: 75%;
    height: 75%;
}

.benefits__icon-part--eco,
.benefits__icon-part--variety {
    top: 11.25%;
    left: 0;
    width: 75%;
    height: 75%;
}

.benefits__icon-part--aesthetic-base,
.benefits__icon-part--quality {
    top: 12.5%;
    left: 0;
    width: 75%;
    height: 75%;
}

.benefits__icon-part--aesthetic-left {
    top: 6.25%;
    left: 1.25%;
    width: 12.5%;
    height: 12.5%;
}

.benefits__icon-part--aesthetic-bottom {
    top: 60%;
    left: 67.5%;
    width: 15%;
    height: 15%;
}

.benefits__icon-part--aesthetic-right {
    top: 30%;
    left: 82.5%;
    width: 10%;
    height: 10%;
}

.benefits__icon-part--warranty {
    top: 12.5%;
    left: 0;
    width: 77.5%;
    height: 75%;
}

.benefits__label {
    display: flex;
    width: var(--benefits-text-width);
    flex-direction: column;
    color: var(--color-benefits-text);
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
}

.benefits__label--mobile {
    display: none;
}

.main__products {
    padding-block: var(--space-0) var(--space-1500);
    background-color: var(--color-bg-page);
}

.products__container {
    max-width: calc(var(--container-max-width) + var(--page-padding-inline) + var(--page-padding-inline));
    height: auto;
}

.products__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--products-head-gap);
    margin-bottom: var(--products-head-content-gap);
    text-align: center;
}

.products__title {
    width: 100%;
    color: var(--color-benefits-text);
    font-size: var(--type-section-title-size);
    font-weight: var(--type-section-title-weight);
    line-height: var(--type-section-title-line-height);
    letter-spacing: var(--letter-spacing-none);
}

.products__title-line {
    display: inline;
}

.products__subtitle {
    width: 100%;
    max-width: var(--container-text-width);
    color: var(--color-benefits-text);
    font-size: var(--type-subtitle-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--type-subtitle-line-height);
}

.products__subtitle-line {
    display: block;
}

.products__list {
    display: flex;
    flex-direction: column;
    gap: var(--products-card-gap);
}

.product-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-400);
    width: 100%;
}

.product-card--reverse {
    flex-direction: row-reverse;
}

.product-card__media {
    --product-media-fluid-aspect: 16 / 9;

    position: sticky;
    top: calc(var(--anchor-scroll-offset) + var(--space-300));
    width: 100%;
    max-width: var(--product-media-width);
    min-width: 0;
    aspect-ratio: var(--media-product-aspect);
    align-self: flex-start;
    flex: 1 1 var(--product-media-width);
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.product-card__slider,
.product-card__slide {
    width: 100%;
    height: 100%;
}

.product-card__slide {
    background-image: var(--product-slide-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.product-card__arrows {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--product-arrow-offset);
    pointer-events: none;
}

.product-card__arrow {
    display: inline-flex;
    width: var(--control-oval-size);
    min-width: var(--tap-target-min);
    height: var(--control-oval-size);
    min-height: var(--tap-target-min);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-control);
    background-color: var(--color-control-dark);
    pointer-events: auto;
    transition:
        transform var(--duration-base) var(--ease-standard),
        background-color var(--duration-base) var(--ease-standard);
}

.product-card__arrow:hover {
    background-color: var(--product-control-hover-bg);
}

.product-card__arrow:active {
    transform: scale(0.96);
}

.product-card__arrow img {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
}

.product-card__pagination {
    --product-pagination-dot-active-width: 9px;

    position: absolute;
    left: 50%;
    z-index: 3;
    display: none;
    transform: translateX(-50%);
}

.product-card__info {
    display: flex;
    width: var(--product-info-width);
    flex: 0 0 var(--product-info-width);
    flex-direction: column;
    gap: var(--product-info-gap);
}

.product-card__details {
    display: flex;
    flex-direction: column;
    gap: var(--product-details-gap);
}

.product-card__title {
    margin-bottom: var(--space-200);
    color: var(--color-benefits-text);
    font-size: var(--type-card-title-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-none);
    letter-spacing: var(--letter-spacing-none);
}

.product-card__features {
    display: flex;
    flex-direction: column;
    gap: var(--product-features-gap);
}

.product-card__feature {
    --product-feature-text-max-width: none;

    display: flex;
    align-items: center;
    gap: var(--product-feature-gap);
    color: var(--color-text-strong);
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
}

.product-card__feature>span:not(.product-card__feature-icon) {
    max-width: var(--product-feature-text-max-width);
}

.product-card__feature-icon {
    display: inline-flex;
    width: var(--product-feature-icon-size);
    height: var(--product-feature-icon-size);
    flex: 0 0 var(--product-feature-icon-size);
    align-items: center;
    justify-content: center;
}

.product-card__feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-card__feature-icon--walk,
.product-card__feature-icon--car {
    flex-direction: column;
}

.product-card__feature-icon--walk img {
    width: 13px;
    height: 21.5px;
}

.product-card__feature-icon--walk::after,
.product-card__feature-icon--car::after {
    display: block;
    height: 2px;
    border-radius: 1px;
    background-color: var(--color-brand-orange);
    content: "";
}

.product-card__feature-icon--walk::after {
    width: 20px;
    margin-top: -2px;
}

.product-card__feature-icon--car {
    justify-content: flex-start;
    padding-top: var(--space-050);
}

.product-card__feature-icon--car img {
    width: 18px;
    height: 16px;
}

.product-card__feature-icon--car::after {
    width: 24px;
}

.product-card__feature-icon--texture img {
    width: 20px;
    height: 16px;
}

.product-card__feature-icon--mount img {
    width: 22px;
    height: 15px;
}

.product-card__separator {
    height: var(--border-width-hairline);
    background-color: var(--color-border-muted);
}

.product-card__size {
    display: flex;
    align-items: flex-start;
    gap: var(--product-feature-gap);
    color: var(--color-text-strong);
    font-size: var(--font-size-200);
    line-height: var(--line-height-normal);
    white-space: nowrap;
}

.product-card__size-icon {
    display: inline-flex;
    width: var(--product-feature-icon-size);
    height: var(--product-feature-icon-size);
    flex: 0 0 var(--product-feature-icon-size);
    align-items: center;
    justify-content: center;
}

.product-card__size-icon img {
    width: 14px;
    height: 14px;
}

.product-card__details-link {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}

.product-card__offer {
    display: flex;
    flex-direction: column;
    gap: var(--space-100);
    padding-block: var(--product-offer-padding-block);
    padding-inline: var(--product-offer-padding-inline);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-muted);
}

.product-card__offer-title {
    max-width: 194px;
    color: var(--color-text-strong);
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-100);
}

.product-card__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chip-row-gap) var(--chip-column-gap);
}

.product-card--paver .product-card__options {
    row-gap: var(--space-100);
}

.product-card__option {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: var(--product-option-gap);
    padding-block: var(--product-option-padding-block);
    padding-inline: var(--product-option-padding-inline-start) var(--product-option-padding-inline-end);
    border: var(--border-width-hairline) solid var(--color-border-muted);
    border-radius: var(--radius-pill);
    color: var(--color-text-strong);
    background-color: var(--color-bg-surface);
    box-shadow: 0 0 0 0 var(--color-brand-orange);
    transition:
        border-color var(--duration-base) var(--ease-standard),
        box-shadow var(--duration-base) var(--ease-standard),
        transform var(--duration-base) var(--ease-standard);
}

.product-card__option:hover {
    border-color: var(--color-brand-orange);
}

.product-card__option:active {
    transform: translateY(1px);
}

.product-card__option.is-active {
    border-color: var(--color-brand-orange);
    box-shadow: inset 0 0 0 var(--border-width-hairline) var(--color-brand-orange);
}

.product-card__swatch {
    width: var(--swatch-size);
    height: var(--swatch-size);
    flex: 0 0 var(--swatch-size);
    overflow: hidden;
    border-radius: var(--radius-xs);
    background-image: var(--product-swatch-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.product-card__option-label {
    display: flex;
    gap: var(--space-050);
    font-size: var(--type-chip-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-chip-line-height);
    white-space: nowrap;
}

.product-card__offer-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-200);
    margin-bottom: 8px;
}

.product-card__price {
    display: flex;
    align-items: flex-end;
    gap: var(--space-100);
    padding-top: var(--space-200);
    color: var(--color-text-primary);
    font-size: var(--type-price-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-price-line-height);
}

.product-card__price span:not([data-product-price-value]) {
    font-size: var(--type-price-unit-size);
    line-height: var(--type-price-line-height);
}

.product-card__price sup {
    font-size: var(--font-size-price-unit-sup);
    line-height: var(--line-height-none);
}

.product-card__stock {
    display: flex;
    flex-direction: column;
    gap: var(--space-050);
}

.product-card__stock-track {
    order: 2;
    width: 100%;
    height: var(--progress-size);
    overflow: hidden;
    border-radius: var(--radius-pill);
    background-color: var(--product-stock-track-bg);
}

.product-card__stock-track span {
    display: block;
    width: var(--product-stock-progress);
    height: 100%;
    border-radius: inherit;
    background-color: var(--color-danger);
}

.product-card__stock p {
    order: 1;
    color: var(--color-text-strong);
    font-size: var(--font-size-150);
    line-height: var(--line-height-snug);
}

.product-card__availability {
    --product-availability-dot-size: 4px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-100);
    color: var(--color-text-strong);
    font-size: var(--font-size-150);
    line-height: var(--line-height-snug);
    white-space: nowrap;
}

.product-card__availability li {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-050);
}

.product-card__availability li:not(:last-child)::after {
    display: block;
    width: var(--product-availability-dot-size);
    height: var(--product-availability-dot-size);
    flex: 0 0 var(--product-availability-dot-size);
    margin-left: var(--space-100);
    background-color: var(--color-icon-secondary);
    content: "";
}

.product-card__availability span {
    color: var(--color-brand-orange);
    font-weight: var(--font-weight-semibold);
}

.product-card__cta {
    display: inline-flex;
    width: 100%;
    min-height: var(--button-min-block-size);
    align-items: center;
    justify-content: center;
    padding-inline: var(--button-padding-inline);
    border-radius: var(--button-radius);
    color: var(--color-text-inverse);
    font-size: var(--type-button-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--type-button-line-height);
    text-align: center;
    background-color: var(--color-brand-orange);
    transition:
        transform var(--duration-base) var(--ease-standard),
        background-color var(--duration-base) var(--ease-standard);
}

.product-card__cta:hover {
    background-color: var(--color-brand-orange-hover);
}

.product-card__cta:active {
    transform: translateY(1px);
}

.main__sale {
    padding-block: var(--space-0) var(--space-1500);
}

.sale {
    --sale-card-min-width: 413px;
    --sale-card-gap: var(--space-300);
    --sale-card-content-gap: var(--space-150);
    --sale-offer-gap: var(--space-200);
    --sale-offer-padding: var(--space-200);
    --sale-action-gap: var(--space-100);
    --sale-quantity-width: 228px;
    --sale-order-button-width: 156px;
    --sale-control-size: 56px;
    --sale-button-height: 56px;
    --sale-action-transition: 300ms ease-out;
    --sale-info-opacity: 0.45;
    --sale-quantity-hover-bg: #cdd0e0;
    --sale-stock-progress: 0%;
}

.sale__container {
    display: flex;
    max-width: calc(var(--container-max-width) + var(--page-padding-inline) + var(--page-padding-inline));
    flex-direction: column;
    gap: var(--space-800);
    height: auto;
}

.sale__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-400);
    color: var(--color-text-primary);
    text-align: center;
}

.sale__title {
    font-size: var(--type-section-title-size);
    font-weight: var(--type-section-title-weight);
    line-height: var(--type-section-title-line-height);
}

.sale__subtitle {
    font-size: var(--type-subtitle-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--type-subtitle-line-height);
}

.sale__subtitle span {
    display: block;
}

.sale__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sale-card-min-width)), 1fr));
    gap: var(--sale-card-gap);
}

.sale__card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--sale-card-gap);
}

.sale__media {
    aspect-ratio: var(--media-sale-aspect);
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.sale__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sale__media--left img {
    object-position: left center;
}

.sale__content {
    display: flex;
    flex-direction: column;
    gap: var(--sale-card-content-gap);
    min-width: 0;
}

.sale__card-title {
    color: var(--color-text-primary);
    font-size: var(--type-card-title-sm-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-card-title-sm-line-height);
}

.sale__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-150);
    min-width: 0;
}

.sale__size {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-150);
    color: var(--color-text-primary);
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
}

.sale__size span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sale__info {
    display: inline-flex;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex: 0 0 var(--icon-size-sm);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background-color: transparent;
    cursor: pointer;
    opacity: var(--sale-info-opacity);
    transition: opacity var(--duration-base) var(--ease-standard);
}

.sale__info:hover {
    opacity: 1;
}

.sale__info img {
    width: 100%;
    height: 100%;
}

.sale__chip {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: var(--space-100);
    padding: var(--space-050) var(--space-200) var(--space-050) var(--space-050);
    border: var(--border-width-hairline) solid var(--color-border-muted);
    border-radius: var(--radius-pill);
    color: var(--color-text-strong);
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}

.sale__chip img {
    width: var(--swatch-size);
    height: var(--swatch-size);
    flex: 0 0 var(--swatch-size);
    border-radius: var(--radius-pill);
    object-fit: cover;
}

.sale__chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sale__offer {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--sale-offer-gap);
    padding: var(--sale-offer-padding);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-muted);
}

.sale__price-block,
.sale__details {
    display: flex;
    flex-direction: column;
    gap: var(--space-100);
    min-width: 0;
}

.sale__details {
    gap: var(--space-200);
}

.sale__price-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-300);
}

.sale__price,
.sale__old-price,
.sale__pallet-price,
.sale__availability,
.sale__quantity-value {
    display: flex;
    align-items: baseline;
    min-width: 0;
}

.sale__price {
    gap: var(--space-100);
    color: var(--color-brand-orange);
    font-size: var(--type-price-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-none);
}

.sale__price span:last-child {
    font-size: var(--type-price-unit-size);
    line-height: var(--line-height-normal);
}

.sale__old-price {
    gap: var(--space-100);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-500);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-snug);
    text-decoration-line: line-through;
    text-decoration-thickness: 2px;
}

.sale__old-price span:last-child {
    font-size: var(--font-size-old-price-unit);
    line-height: var(--line-height-normal);
}

.sale__pallet-price {
    gap: var(--space-100);
    color: var(--color-text-secondary);
    font-size: var(--font-size-300);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-relaxed);
}

.sale__stock {
    display: flex;
    flex-direction: column;
    gap: var(--space-100);
    min-width: 0;
}

.sale__stock p {
    color: var(--color-text-primary);
    font-size: var(--font-size-150);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-snug);
}

.sale__stock-track {
    width: 100%;
    height: var(--progress-size);
    overflow: hidden;
    border-radius: var(--radius-xs);
    background-color: var(--color-bg-surface);
}

.sale__stock-track span {
    display: block;
    width: var(--sale-stock-progress);
    height: 100%;
    border-radius: inherit;
    background-color: var(--color-danger);
    transition: width var(--sale-action-transition);
}

.sale__availability {
    gap: var(--space-200);
    color: var(--color-text-primary);
    font-size: var(--font-size-150);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-snug);
    list-style: none;
}

.sale__availability li {
    display: flex;
    align-items: center;
    gap: var(--space-050);
    white-space: nowrap;
}

.sale__availability li:not(:last-child)::after {
    display: block;
    width: var(--space-050);
    height: var(--space-050);
    flex: 0 0 var(--space-050);
    margin-left: var(--space-200);
    background-color: var(--color-icon-secondary);
    content: "";
}

.sale__availability span {
    color: var(--color-brand-orange);
    font-weight: var(--font-weight-semibold);
}

.sale__actions {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: stretch;
    gap: var(--space-0);
    overflow: hidden;
    transition: gap var(--sale-action-transition);
}

.sale__button,
.sale__quantity-button {
    display: inline-flex;
    min-height: var(--tap-target-min);
    align-items: center;
    justify-content: center;
}

.sale__button {
    height: var(--sale-button-height);
    padding-inline: var(--button-padding-inline);
    overflow: hidden;
    border-radius: var(--button-radius);
    color: var(--color-text-inverse);
    font-size: var(--type-button-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--type-button-line-height);
    text-align: center;
    white-space: nowrap;
    background-color: var(--color-brand-orange);
    transition:
        flex-basis var(--sale-action-transition),
        min-width var(--sale-action-transition),
        padding var(--sale-action-transition),
        opacity var(--duration-base) var(--ease-standard),
        transform var(--sale-action-transition),
        background-color var(--duration-base) var(--ease-standard);
}

.sale__button:hover {
    background-color: var(--color-brand-orange-hover);
}

.sale__button:active,
.sale__quantity-button:active {
    transform: translateY(1px);
}

.sale__button--add {
    flex: 1 1 100%;
}

.sale__button--order {
    flex: 0 0 0;
    min-width: 0;
    padding-inline: var(--space-0);
    opacity: 0;
    pointer-events: none;
    transform: translateX(var(--space-300));
}

.sale__quantity {
    display: flex;
    height: var(--sale-control-size);
    flex: 0 0 0;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    opacity: 0;
    transform: translateX(calc(-1 * var(--space-150)));
    transition:
        flex-basis var(--sale-action-transition),
        opacity var(--duration-base) var(--ease-standard),
        transform var(--sale-action-transition);
}

.sale__quantity-button {
    width: var(--sale-control-size);
    height: var(--sale-control-size);
    flex: 0 0 var(--sale-control-size);
    color: var(--color-text-primary);
    font-size: var(--font-size-400);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-none);
    background-color: var(--color-bg-control);
    transition:
        background-color var(--duration-base) var(--ease-standard),
        opacity var(--duration-base) var(--ease-standard),
        transform var(--duration-base) var(--ease-standard);
}

.sale__quantity-button:hover {
    background-color: var(--sale-quantity-hover-bg);
}

.sale__quantity-button:disabled {
    cursor: default;
    opacity: 0.45;
}

.sale__quantity-button:disabled:active {
    transform: none;
}

.sale__quantity-value {
    height: 100%;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    padding-inline: var(--space-300);
    border-block: var(--border-width-hairline) solid var(--color-bg-control);
    color: var(--color-text-primary);
    text-align: center;
    white-space: nowrap;
    background-color: var(--color-bg-surface);
}

.sale__quantity-value p:first-child {
    font-size: var(--font-size-300);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
}

.sale__quantity-value p:last-child {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-150);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
}

.sale__card.is-added .sale__quantity {
    flex-basis: var(--sale-quantity-width);
    opacity: 1;
    transform: translateX(0);
}

.sale__card.is-added .sale__actions {
    gap: var(--sale-action-gap);
    justify-content: flex-end;
}

.sale__card.is-added .sale__button--add {
    flex: 0 1 0;
    min-width: 0;
    margin-inline: calc(var(--sale-action-gap) / -2);
    padding-inline: var(--space-0);
    opacity: 0;
    pointer-events: none;
    transform: translateX(var(--space-500));
}

.sale__card.is-added .sale__button--order {
    flex-basis: var(--sale-order-button-width);
    min-width: var(--sale-order-button-width);
    padding-inline: var(--button-padding-inline);
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.main__custom-order {
    padding-block: var(--space-0) var(--space-1500);
}

.custom-order {
    --custom-order-head-gap: var(--space-400);
    --custom-order-content-gap: var(--space-800);
    --custom-order-body-gap: var(--space-400);
    --custom-order-card-gap: var(--space-300);
    --custom-order-forms-width: 424px;
    --custom-order-colors-width: 872px;
    --custom-order-card-height: 480px;
    --custom-order-card-overlay: rgba(0, 0, 0, 0.33);
    --custom-order-pagination-active-width: 9px;
}

.custom-order__container {
    display: flex;
    max-width: calc(var(--container-max-width) + var(--page-padding-inline) + var(--page-padding-inline));
    height: auto;
    flex-direction: column;
    gap: var(--custom-order-content-gap);
}

.custom-order__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--custom-order-head-gap);
    color: var(--color-text-primary);
    text-align: center;
}

.custom-order__title {
    font-size: var(--type-section-title-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-section-title-line-height);
}

.custom-order__title span {
    display: block;
}

.custom-order__subtitle {
    width: min(100%, 869px);
    font-size: var(--type-subtitle-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--type-subtitle-line-height);
}

.custom-order__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--custom-order-body-gap);
}

.custom-order__cards {
    display: grid;
    width: 100%;
    grid-template-columns:
        minmax(0, var(--custom-order-forms-width)) minmax(0, var(--custom-order-colors-width));
    gap: var(--custom-order-card-gap);
}

.custom-order-card,
.custom-order-card__media {
    min-width: 0;
}

.custom-order-card__media {
    position: relative;
    height: var(--custom-order-card-height);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-control);
}

.custom-order-card__media::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--custom-order-card-overlay);
    content: "";
    pointer-events: none;
}

.custom-order-card__slider,
.custom-order-card__slide,
.custom-order-card__slide picture {
    width: 100%;
    height: 100%;
}

.custom-order-card__slide picture {
    position: relative;
    display: block;
    overflow: hidden;
}

.custom-order-card__slide img {
    position: absolute;
    display: block;
    max-width: none;
    object-fit: cover;
    pointer-events: none;
}

.custom-order-card--forms .custom-order-card__slide img {
    top: 0;
    left: -6.84%;
    width: 235.14%;
    height: 101.26%;
}

.custom-order-card--colors .custom-order-card__slide img {
    top: 0;
    right: 0;
    width: 147.74%;
    height: 100%;
}

.custom-order-card__caption {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-text-inverse);
    text-align: center;
    transform: translate(-50%, -50%);
}

.custom-order-card.is-detail-slide .custom-order-card__caption {
    display: none;
}

.custom-order-card__number {
    font-size: 96px;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-tight);
}

.custom-order-card__text {
    font-size: var(--font-size-400);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
}

.custom-order-card__text span {
    display: block;
}

.custom-order-card__badge {
    position: absolute;
    bottom: var(--space-300);
    left: var(--space-300);
    z-index: 3;
    display: inline-flex;
    max-width: calc(100% - var(--space-600));
    min-height: 32px;
    align-items: center;
    gap: var(--space-200);
    padding-inline: var(--space-200);
    border-radius: var(--radius-pill);
    color: var(--color-text-strong);
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    white-space: nowrap;
    background-color: var(--color-bg-surface);
}

.custom-order-card__badge[hidden] {
    display: none;
}

.custom-order-card__badge span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-order-card__badge-divider {
    width: var(--border-width-hairline);
    height: 32px;
    flex: 0 0 var(--border-width-hairline);
    background-color: var(--color-border-muted);
}

.custom-order-card__counter {
    position: absolute;
    right: var(--space-300);
    bottom: var(--space-300);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-100);
    color: var(--color-text-inverse);
    font-size: 48px;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-none);
    white-space: nowrap;
}

.custom-order-card__counter[hidden] {
    display: none;
}

.custom-order-card__arrows {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--space-300);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-standard);
}

.custom-order-card__media:hover .custom-order-card__arrows,
.custom-order-card__media:focus-within .custom-order-card__arrows {
    opacity: 1;
}

.custom-order-card__arrow {
    display: inline-flex;
    width: var(--control-oval-size);
    min-width: var(--tap-target-min);
    height: var(--control-oval-size);
    min-height: var(--tap-target-min);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-control);
    background-color: var(--color-control-dark);
    pointer-events: none;
    transition:
        transform var(--duration-base) var(--ease-standard),
        background-color var(--duration-base) var(--ease-standard);
}

.custom-order-card__media:hover .custom-order-card__arrow,
.custom-order-card__media:focus-within .custom-order-card__arrow {
    pointer-events: auto;
}

.custom-order-card__arrow:hover {
    background-color: var(--product-control-hover-bg);
}

.custom-order-card__arrow:active {
    transform: scale(0.96);
}

.custom-order-card__arrow img {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
}

.custom-order-card__pagination {
    position: absolute;
    left: 50%;
    z-index: 3;
    display: none;
    transform: translateX(-50%);
}

.custom-order__button {
    display: inline-flex;
    width: 264px;
    min-height: var(--button-min-block-size);
    align-items: center;
    justify-content: center;
    gap: var(--space-100);
    padding-inline: var(--space-300);
    border: var(--border-width-hairline) solid var(--color-border-muted);
    border-radius: var(--button-radius);
    color: var(--color-text-primary);
    font-size: var(--type-button-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--type-button-line-height);
    background-color: var(--color-bg-muted);
    transition:
        border-color var(--duration-base) var(--ease-standard),
        background-color var(--duration-base) var(--ease-standard),
        transform var(--duration-base) var(--ease-standard);
}

.custom-order__button:hover {
    border-color: var(--color-brand-orange);
    background-color: var(--color-control-muted-hover);
}

.custom-order__button:active {
    transform: translateY(1px);
}

.custom-order__button-icon {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    flex: 0 0 var(--icon-size-md);
    display: block;
}

.main__why {
    margin-bottom: var(--space-1500);
    padding-block: var(--space-1000) 0;
    color: var(--color-text-inverse);
    background-color: var(--color-bg-inverse);
}

.why {
    --why-content-gap: var(--space-1200);
    --why-head-gap: var(--space-400);
    --why-head-content-gap: var(--space-800);
    --why-card-gap: var(--space-300);
    --why-card-padding: var(--space-300);
    --why-card-title-size: var(--font-size-500);
    --why-card-title-line-height: var(--line-height-snug);
    --why-card-body-size: var(--font-size-300);
    --why-card-body-large-size: var(--font-size-400);
    --why-card-body-line-height: var(--line-height-relaxed);
    --why-card-body-large-line-height: var(--line-height-normal);
    --why-card-text-color: #000000;
    --why-stat-size: var(--font-size-925);
    --why-stat-label-size: var(--font-size-500);
    --why-tech-image-width: 268px;
    --why-tech-text-width: 497px;
    --why-small-text-width: 273px;
    --why-strength-text-gap: var(--space-350);
    --why-card-radius-large: var(--radius-benefit-large);
    --why-card-radius-tall: var(--radius-benefit-tall);
    --why-video-radius: var(--radius-md);
}

.why__container {
    display: flex;
    container-type: inline-size;
    max-width: calc(var(--container-max-width) + var(--page-padding-inline) + var(--page-padding-inline));
    flex-direction: column;
    gap: var(--why-head-content-gap);
    height: auto;
}

.why__head,
.why__content,
.why-freeze,
.why-freeze__text,
.why-freeze__description {
    display: flex;
    flex-direction: column;
}

.why__head {
    align-items: center;
    gap: var(--why-head-gap);
    text-align: center;
}

.why__title {
    max-width: 880px;
    color: var(--color-text-inverse);
    font-size: var(--type-section-title-size);
    font-weight: var(--type-section-title-weight);
    line-height: var(--type-section-title-line-height);
    text-wrap: balance;
}

.why__subtitle {
    max-width: 1020px;
    color: var(--color-text-inverse-secondary);
    font-size: var(--type-subtitle-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--type-subtitle-line-height);
    text-wrap: balance;
}

.why__content {
    gap: var(--why-content-gap);
}

.why__cards {
    display: grid;
    grid-template-areas:
        "tech tech video video"
        "tech tech strength safe"
        "durability choice strength quality";
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--why-card-gap);
    align-items: stretch;
}

.why-card,
.why__video {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.why-card {
    display: flex;
    flex-direction: column;
    color: var(--why-card-text-color);
    background-color: var(--color-bg-surface);
}

.why-card--tech {
    grid-area: tech;
    aspect-ratio: 1;
    align-items: center;
    gap: var(--space-300);
    justify-content: flex-start;
    padding: var(--space-500) 75px 47px;
    border-radius: var(--why-card-radius-large);
    color: var(--color-text-inverse);
    text-align: center;
    background-color: var(--color-bg-inverse-card);
}

.why-card--durability {
    grid-area: durability;
    aspect-ratio: 1;
    justify-content: space-between;
    padding: var(--why-card-padding) 15px 10px var(--why-card-padding);
    background-color: var(--color-benefit-sand);
}

.why-card--choice {
    grid-area: choice;
    aspect-ratio: 1;
    overflow: hidden;
    color: var(--color-text-inverse);
    background-color: transparent;
    cursor: pointer;
}

.why-card--choice[data-choice-tone="dark"] {
    color: var(--why-card-text-color);
}

.why-card--quality {
    grid-area: quality;
    aspect-ratio: 1;
    justify-content: center;
    padding: 60px 35px 62px var(--why-card-padding);
    background-color: var(--color-benefit-clay);
}

.why-card--safe {
    grid-area: safe;
    aspect-ratio: 1;
    padding: var(--why-card-padding);
    background-color: var(--color-benefit-cream);
}

.why-card--strength {
    grid-area: strength;
    aspect-ratio: 312 / 648;
    justify-content: space-between;
    padding: var(--why-card-padding);
    border-radius: var(--why-card-radius-tall);
    background-color: var(--color-benefit-gray);
}

.why__video {
    grid-area: video;
    aspect-ratio: var(--media-video-aspect);
    border-radius: var(--why-video-radius);
    background-color: var(--color-bg-muted);
}

.why__video img,
.why__video video,
.why-card__image img,
.why-freeze__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.why__video picture,
.why-card__image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.why-card__image--main {
    width: min(100%, var(--why-tech-image-width));
    flex: 0 0 auto;
    aspect-ratio: 268 / 186;
    overflow: hidden;
}

.why-card__image--main img {
    width: 111.27%;
    max-width: none;
    height: 90.09%;
    object-fit: fill;
    object-position: left top;
    transform: translateX(-7.81%);
}

.why-card__body {
    position: relative;
    z-index: 2;
    display: flex;
    max-width: var(--why-small-text-width);
    flex-direction: column;
    gap: var(--space-200);
}

.why-card__body--centered {
    max-width: var(--why-tech-text-width);
    align-items: center;
}

.why-card--strength .why-card__body {
    max-width: 258px;
    gap: var(--space-300);
}

.why-card--safe .why-card__body {
    max-width: 245px;
}

.why-card--safe .why-card__text {
    max-width: 245px;
}

.why-card--safe .why-card__title {
    max-width: 245px;
}

.why-card__title {
    color: inherit;
    font-size: var(--why-card-title-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--why-card-title-line-height);
    letter-spacing: var(--letter-spacing-none);
}

.why-card--tech .why-card__title {
    font-size: var(--font-size-600);
}

.why-card__text {
    color: inherit;
    font-size: var(--why-card-body-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--why-card-body-line-height);
}

.why-card--tech .why-card__text {
    color: var(--color-text-muted);
    font-size: var(--why-card-body-large-size);
    line-height: var(--why-card-body-large-line-height);
}

.why-card--strength .why-card__text {
    display: flex;
    flex-direction: column;
    gap: var(--why-strength-text-gap);
}

.why-card__stat {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: var(--space-100);
    color: inherit;
}

.why-card__stat-value {
    font-size: var(--why-stat-size);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-none);
    white-space: nowrap;
}

.why-card__stat-label {
    padding-bottom: 10px;
    font-size: var(--why-stat-label-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-snug);
}

.why-card__choice-media {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.why-card__choice-slide {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-standard);
}

.why-card__choice-slide.is-active {
    opacity: 1;
}

.why-card__choice-title {
    position: absolute;
    right: -11px;
    bottom: 23px;
    z-index: 2;
    width: min(91%, 283px);
    color: inherit;
    font-size: var(--why-card-title-size);
    font-style: italic;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-none);
    transform: rotate(-5.66deg);
    transform-origin: center;
}

.why-card__decor-frame {
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
}

.why-card__decor-frame--safe {
    bottom: 0;
    left: 0;
    width: 220px;
    height: 76px;
}

.why-card__decor {
    position: absolute;
    display: block;
    max-width: none;
    pointer-events: none;
}

.why-card__decor-frame--safe .why-card__decor {
    top: -13px;
    left: -150px;
    width: 425px;
    height: 316px;
    transform: rotate(-5.94deg);
    transform-origin: center;
}

.why-card__decor--strength {
    right: -158px;
    bottom: -106px;
    z-index: 1;
    width: 406px;
    height: auto;
    backface-visibility: hidden;
    transform: rotate(-52deg);
    transform-origin: center;
}

.why-freeze {
    width: min(100%, var(--container-freeze-width));
    align-items: center;
    align-self: center;
    gap: 50px;
    text-align: center;
}

.why-freeze__text {
    align-items: center;
    gap: var(--space-400);
}

.why-freeze__title {
    max-width: 780px;
    color: var(--color-text-inverse);
    font-size: var(--type-section-title-size);
    font-weight: var(--type-section-title-weight);
    line-height: var(--type-section-title-line-height);
    text-wrap: balance;
}

.why-freeze__title span {
    color: var(--color-brand-orange);
}

.why-freeze__description {
    align-items: center;
    gap: var(--space-300);
    color: var(--color-text-inverse-secondary);
    font-size: var(--type-subtitle-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--type-subtitle-line-height);
}

.why-freeze__description p {
    max-width: var(--container-freeze-width);
}

.why-freeze__description p:last-child {
    max-width: 915px;
}

.why-freeze__image {
    width: min(100%, 947px);
    aspect-ratio: var(--media-freeze-aspect);
    overflow: hidden;
}

.why-freeze__image img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.main__warranty {
    padding-block: var(--space-0) var(--space-1500);
}

.warranty {
    --warranty-head-gap: var(--space-400);
    --warranty-content-gap: var(--space-800);
    --warranty-card-gap: var(--space-300);
    --warranty-card-height: 508px;
    --warranty-card-padding-block: var(--space-300);
    --warranty-card-padding-inline: var(--space-300) 90px;
    --warranty-card-overlay: rgba(0, 0, 0, 0.45);
}

.warranty__container {
    display: flex;
    max-width: calc(var(--container-max-width) + var(--page-padding-inline) + var(--page-padding-inline));
    height: auto;
    flex-direction: column;
    gap: var(--warranty-content-gap);
}

.warranty__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--warranty-head-gap);
    color: var(--color-text-primary);
    text-align: center;
}

.warranty__title {
    max-width: 820px;
    font-size: var(--type-section-title-size);
    font-weight: var(--type-section-title-weight);
    line-height: var(--type-section-title-line-height);
}

.warranty__subtitle {
    max-width: 901px;
    font-size: var(--type-subtitle-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--type-subtitle-line-height);
}

.warranty__terms-button {
    display: inline;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: var(--border-width-hairline);
    text-underline-offset: 4px;
    transition: color var(--duration-medium) var(--ease-emphasized);
}

.warranty__terms-button:hover {
    color: var(--color-brand-orange);
}

.warranty__subtitle-accent {
    color: var(--color-brand-orange);
    font-weight: inherit;
}

.warranty__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--warranty-card-gap);
}

.warranty-card {
    position: relative;
    display: flex;
    min-height: var(--warranty-card-height);
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding-block: var(--warranty-card-padding-block);
    padding-inline: var(--warranty-card-padding-inline);
    border-radius: var(--radius-lg);
    color: var(--color-text-inverse);
}

.warranty-card::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--warranty-card-overlay);
    content: "";
    pointer-events: none;
}

.warranty-card__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.warranty-card__title,
.warranty-card__text {
    position: relative;
    z-index: 2;
}

.warranty-card__title {
    max-width: 310px;
    font-size: var(--font-size-600);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-title-md);
}

.warranty-card__text {
    max-width: 270px;
    font-size: var(--type-body-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--type-body-line-height);
}

.main__quality {
    overflow: hidden;
    padding-block: var(--space-0) var(--space-1500);
}

.quality {
    --quality-head-gap: var(--space-400);
    --quality-text-gap: var(--space-400);
    --quality-content-gap: var(--space-800);
    --quality-tab-gap: var(--space-200);
    --quality-tab-height: 48px;
    --quality-slide-width: min(1320px, calc(100vw - var(--space-1500)));
    --quality-slide-height: min(640px, calc((100vw - var(--space-1500)) * 0.484848));
    --quality-title-width: 820px;
    --quality-text-width: 869px;
    --quality-slide-padding: 41px;
    --quality-slide-meta-bottom: 34px;
    --quality-slide-tag-top: 34px;
    --quality-viewport-left: max(var(--page-padding-inline), calc((100vw - var(--container-max-width)) / 2));
}

.quality__container {
    height: auto;
}

.quality__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--quality-head-gap);
    color: var(--color-text-primary);
    text-align: center;
}

.quality__title {
    max-width: var(--quality-title-width);
    font-size: var(--type-section-title-size);
    font-weight: var(--type-section-title-weight);
    line-height: var(--type-section-title-line-height);
}

.quality__tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--quality-tab-gap);
}

.quality__tab {
    display: inline-flex;
    min-width: 0;
    height: var(--quality-tab-height);
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-200);
    border-radius: var(--radius-pill);
    color: var(--color-text-primary);
    background-color: var(--color-bg-muted);
    font-size: var(--font-size-200);
    line-height: var(--line-height-normal);
    white-space: nowrap;
    transition:
        color var(--duration-medium) var(--ease-emphasized),
        background-color var(--duration-medium) var(--ease-emphasized);
}

.quality__tab:hover {
    color: var(--color-brand-orange);
}

.quality__tab.is-active {
    color: var(--color-text-inverse);
    background-color: var(--color-brand-orange);
}

.quality__tab.is-active:hover {
    color: var(--color-text-inverse);
}

.quality__content {
    max-width: calc(var(--container-max-width) + var(--page-padding-inline) + var(--page-padding-inline));
    height: auto;
    margin-top: var(--quality-text-gap);
}

.quality__text-container {
    display: flex;
    height: auto;
    justify-content: center;
}

.quality__text {
    max-width: var(--quality-text-width);
    font-size: var(--type-subtitle-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--type-subtitle-line-height);
    text-align: center;
}

.quality__text-part {
    display: inline;
}

.quality__text-part+.quality__text-part::before {
    content: " ";
}

.quality__text-part:nth-child(3)::before {
    display: block;
    content: "";
}

.quality__panel[hidden] {
    display: none;
}

.quality__viewport {
    width: calc(100vw - var(--quality-viewport-left));
    margin-top: var(--quality-content-gap);
    overflow: hidden;
}

.quality__slider-shell {
    position: relative;
    width: 100%;
    height: var(--quality-slide-height);
}

.quality__slider.keen-slider {
    height: 100%;
}

.quality-slide {
    position: relative;
    width: var(--quality-slide-width);
    min-width: var(--quality-slide-width);
    height: var(--quality-slide-height);
    overflow: hidden;
    border-radius: var(--radius-lg);
    color: var(--color-text-inverse);
}

.quality-slide__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quality-slide__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 63.64%, rgba(0, 0, 0, 0.32) 100%);
    pointer-events: none;
}

.quality-slide__year {
    position: absolute;
    top: var(--quality-slide-tag-top);
    left: var(--quality-slide-padding);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-100) var(--space-200);
    border-radius: var(--radius-pill);
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
    font-size: var(--type-subtitle-size);
    line-height: var(--line-height-normal);
    white-space: nowrap;
}

.quality-slide__meta {
    position: absolute;
    bottom: var(--quality-slide-meta-bottom);
    left: var(--quality-slide-padding);
    z-index: 2;
    max-width: calc(100% - var(--quality-slide-padding) - var(--quality-slide-padding));
    font-size: var(--type-subtitle-size);
    line-height: var(--line-height-normal);
}

.quality__arrows {
    position: absolute;
    bottom: var(--space-300);
    left: 0;
    z-index: 3;
    display: flex;
    width: var(--quality-slide-width);
    justify-content: flex-end;
    gap: var(--space-100);
    padding-inline: var(--space-300);
    pointer-events: none;
}

.quality__arrow {
    display: inline-flex;
    width: var(--control-oval-size);
    min-width: var(--tap-target-min);
    height: var(--control-oval-size);
    min-height: var(--tap-target-min);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-control);
    background-color: var(--color-control-dark);
    pointer-events: auto;
    transition:
        transform var(--duration-base) var(--ease-standard),
        background-color var(--duration-base) var(--ease-standard);
}

.quality__arrow:hover {
    background-color: var(--product-control-hover-bg);
}

.quality__arrow:active {
    transform: scale(0.96);
}

.quality__arrow img {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
}

.main__order-process {
    overflow: hidden;
    padding-block: var(--space-0) var(--space-1500);
}

.order-process {
    --order-process-content-gap: 29px;
    --order-process-row-gap: var(--space-300);
    --order-process-card-border: rgba(0, 0, 0, 0.25);
    --order-process-card-overlay: rgba(0, 0, 0, 0.45);
    --order-step-width: 200px;
    --order-step-height: 330px;
    --order-step-padding: 10px 14px var(--space-300) 17px;
    --order-step-radius: var(--radius-lg);
    --order-step-number-size: var(--font-size-925);
    --order-step-number-line-height: var(--line-height-tight);
    --order-step-text-size: var(--type-body-size);
    --order-card-width: var(--card-width);
    --order-card-height: 508px;
    --order-card-padding: var(--space-300);
    --order-card-radius: var(--radius-lg);
    --order-card-title-size: var(--type-card-title-size);
    --order-card-text-size: var(--type-subtitle-size);
    --order-card-list-size: var(--type-body-size);
}

.order-process__container {
    display: flex;
    max-width: calc(var(--container-max-width) + var(--page-padding-inline) + var(--page-padding-inline));
    flex-direction: column;
    align-items: center;
    gap: var(--section-content-gap);
    height: auto;
}

.order-process__title {
    max-width: 1100px;
    color: var(--color-text-primary);
    font-size: var(--type-section-title-size);
    font-weight: var(--type-section-title-weight);
    line-height: var(--type-section-title-line-height);
    text-align: center;
}

.order-process__title span {
    display: block;
}

.order-process__title .order-process__title-mobile-line {
    display: contents;
}

.order-process__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--order-process-content-gap);
}

.order-process__viewport {
    width: 100%;
    overflow: hidden;
}

.order-process__steps,
.order-process__cards {
    display: flex;
    width: max-content;
    gap: var(--order-process-row-gap);
}

.order-process__steps {
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
}

.order-step {
    display: flex;
    width: var(--order-step-width);
    height: var(--order-step-height);
    flex: 0 0 var(--order-step-width);
    flex-direction: column;
    gap: 11px;
    padding: var(--order-step-padding);
    overflow: hidden;
    border: var(--border-width-hairline) solid var(--order-process-card-border);
    border-radius: var(--order-step-radius);
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
}

.order-step__number {
    display: block;
    font-size: var(--order-step-number-size);
    font-weight: var(--font-weight-light);
    line-height: var(--order-step-number-line-height);
}

.order-step__text {
    width: 100%;
    font-size: var(--order-step-text-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
}

.order-card {
    position: relative;
    display: flex;
    width: var(--order-card-width);
    height: var(--order-card-height);
    flex: 0 0 var(--order-card-width);
    flex-direction: column;
    justify-content: space-between;
    padding: var(--order-card-padding) 130px var(--order-card-padding) var(--order-card-padding);
    overflow: hidden;
    border-radius: var(--order-card-radius);
    color: var(--color-text-inverse);
}

.order-card__image,
.order-card__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.order-card__image {
    display: block;
    object-fit: cover;
}

.order-card__image--price {
    top: -0.93%;
    left: -17.45%;
    width: 117.45%;
    height: 101.16%;
    max-width: none;
}

.order-card__shade {
    background-color: var(--order-process-card-overlay);
    pointer-events: none;
}

.order-card__title,
.order-card__text,
.order-card__list {
    position: relative;
    z-index: 2;
}

.order-card__title {
    max-width: 200px;
    font-size: var(--order-card-title-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-snug);
}

.order-card__text {
    width: 270px;
    font-size: var(--order-card-text-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
}

.order-card__list {
    display: flex;
    width: 348px;
    flex-direction: column;
    gap: var(--space-100);
    font-size: var(--order-card-list-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
}

.main__faq {
    padding-block: var(--space-1000) var(--space-1200);
    background-color: var(--color-bg-section-muted);
}

.faq {
    --faq-content-width: var(--container-narrow-width);
    --faq-content-gap: var(--space-800);
    --faq-list-gap: var(--space-100);
    --faq-item-radius: var(--radius-lg);
    --faq-question-padding-block: var(--space-200);
    --faq-question-padding-inline: var(--space-300);
    --faq-question-text-gap: var(--space-800);
    --faq-question-open-min-height: var(--control-faq-size);
    --faq-answer-padding-block: var(--space-100) var(--space-400);
    --faq-answer-padding-inline: var(--space-300) 88px;
    --faq-border-color: var(--color-border-map);
    --faq-hover-border-color: rgba(0, 0, 0, 0.15);
    --faq-motion-duration: 420ms;
    --faq-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.faq__container {
    display: flex;
    max-width: calc(var(--faq-content-width) + var(--page-padding-inline) + var(--page-padding-inline));
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--faq-content-gap);
}

.faq__title {
    color: var(--color-text-primary);
    font-size: var(--type-section-title-size);
    font-weight: var(--type-section-title-weight);
    line-height: var(--type-section-title-line-height);
    text-align: center;
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--faq-list-gap);
    overflow-anchor: none;
}

.faq__item {
    overflow: hidden;
    border-radius: var(--faq-item-radius);
    background-color: var(--color-bg-surface);
    box-shadow: inset 0 0 0 var(--border-width-hairline) transparent;
    transition:
        background-color var(--duration-medium) var(--ease-emphasized),
        box-shadow var(--duration-medium) var(--ease-emphasized);
}

.faq__item:hover,
.faq__item:focus-within,
.faq__item.is-open {
    box-shadow: inset 0 0 0 var(--border-width-hairline) var(--faq-border-color);
}

.faq__item-title {
    margin: var(--space-0);
}

.faq__question {
    display: flex;
    width: 100%;
    min-height: 88px;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--faq-question-padding-block);
    padding-inline: var(--faq-question-padding-inline);
    color: var(--color-text-faq);
    text-align: left;
    transition:
        min-height var(--faq-motion-duration) var(--faq-motion-ease),
        padding-bottom var(--faq-motion-duration) var(--faq-motion-ease);
}

.faq__item.is-open .faq__question {
    min-height: var(--faq-question-open-min-height);
    padding-bottom: var(--space-0);
}

.faq__question-text {
    min-width: 0;
    flex: 1 1 auto;
    padding-right: var(--faq-question-text-gap);
    font-size: var(--font-size-400);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
}

.faq__icon {
    position: relative;
    display: inline-flex;
    width: var(--control-faq-size);
    height: var(--control-faq-size);
    flex: 0 0 var(--control-faq-size);
    align-items: center;
    justify-content: center;
}

.faq__icon::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--control-faq-circle-size);
    height: var(--control-faq-circle-size);
    border: var(--border-width-hairline) solid var(--faq-border-color);
    border-radius: var(--radius-pill);
    background-color: transparent;
    content: "";
    transform: translate(-50%, -50%);
    transition:
        border-color var(--duration-medium) var(--ease-emphasized),
        background-color var(--duration-medium) var(--ease-emphasized);
}

.faq__icon::after,
.faq__icon-line {
    position: absolute;
    left: 50%;
    width: 18px;
    height: 1.5px;
    border-radius: var(--radius-pill);
    background-color: var(--color-text-faq);
    content: "";
    transform: translateX(-50%);
    transition:
        background-color var(--duration-medium) var(--ease-emphasized),
        transform var(--duration-medium) var(--ease-emphasized),
        opacity var(--duration-medium) var(--ease-emphasized);
}

.faq__icon::after {
    top: calc(50% - 0.75px);
}

.faq__icon-line {
    top: calc(50% - 0.75px);
    transform: translateX(-50%) rotate(90deg);
}

@media (hover: hover) and (pointer: fine) {
    .faq__item:hover:not(.is-open) {
        box-shadow: inset 0 0 0 var(--border-width-hairline) var(--faq-hover-border-color);
    }

    .faq__item:hover:not(.is-open) .faq__icon::before {
        border-color: var(--color-brand-orange);
        background-color: var(--color-brand-orange);
    }

    .faq__item:hover:not(.is-open) .faq__icon::after,
    .faq__item:hover:not(.is-open) .faq__icon-line {
        background-color: var(--color-text-inverse);
    }
}

.faq__item.is-open .faq__icon-line {
    opacity: 0;
    transform: translateX(-50%) rotate(90deg) scaleY(0);
}

.faq__answer {
    box-sizing: border-box;
    overflow: hidden;
    color: var(--color-text-faq);
    font-size: var(--type-body-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--type-body-line-height);
    transition:
        height var(--faq-motion-duration) var(--faq-motion-ease),
        opacity var(--faq-motion-duration) var(--faq-motion-ease);
    will-change: height, opacity;
}

.faq__answer[hidden] {
    display: none;
}

.faq__answer-content {
    padding-block: var(--faq-answer-padding-block);
    padding-inline: var(--faq-answer-padding-inline);
}

.main__map {
    position: relative;
    min-height: var(--map-height);
    padding-block: var(--space-0);
    overflow: hidden;
}

.map {
    --map-height: clamp(680px, 47.1vw, 804px);
    --map-info-width: 415px;
    --map-info-top: clamp(56px, 4.75vw, 81px);
    --map-info-padding-block: var(--space-400) var(--space-800);
    --map-info-padding-inline: var(--space-300);
    --map-info-gap: var(--space-400);
    --map-tabs-gap: 11px;
    --map-tab-height: 48px;
    --map-tab-padding-inline: var(--space-200);
    --map-photo-height: 120px;
    --map-contact-gap: var(--space-200);
    --map-contact-row-gap: 10px;
    --map-placemark-width: 80px;
    --map-placemark-height: 88px;
    --map-panel-shadow: 0 8px 16px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
}

.map__canvas {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: var(--color-bg-muted);
}

.map__yandex {
    display: block;
    width: 100%;
    height: 100%;
}

.map__yandex [class*="-map-copyrights-promo"] {
    display: none;
}

.map__placemark {
    display: block;
    width: var(--map-placemark-width);
    max-width: none;
    height: var(--map-placemark-height);
    object-fit: fill;
    cursor: pointer;
}

.map__info {
    position: absolute;
    top: var(--map-info-top);
    left: max(var(--page-padding-inline), calc((100vw - var(--container-max-width)) / 2));
    z-index: 2;
    display: flex;
    width: var(--map-info-width);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--map-info-gap);
    padding-block: var(--map-info-padding-block);
    padding-inline: var(--map-info-padding-inline);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-surface);
    box-shadow: var(--map-panel-shadow);
}

.map__title {
    width: 100%;
    color: var(--color-text-primary);
    font-size: var(--font-size-800);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.map__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--map-tabs-gap);
}

.map__tab {
    display: inline-flex;
    min-width: 0;
    min-height: var(--map-tab-height);
    align-items: center;
    justify-content: center;
    padding-inline: var(--map-tab-padding-inline);
    border-radius: var(--radius-pill);
    color: var(--color-text-primary);
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    background-color: var(--color-bg-muted);
    white-space: nowrap;
    transition:
        color var(--duration-base) var(--ease-standard),
        background-color var(--duration-base) var(--ease-standard);
}

.map__tab--active {
    color: var(--color-text-inverse);
    background-color: var(--color-brand-orange);
}

@media (hover: hover) and (pointer: fine) {
    .map__tab:not(.map__tab--active):hover {
        background-color: var(--color-control-muted-hover);
    }
}

.map__photo {
    display: block;
    width: 100%;
    height: var(--map-photo-height);
    object-fit: cover;
}

.map__contacts {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--map-contact-row-gap);
    color: var(--color-form-text);
    font-style: normal;
}

.map__contact {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    gap: var(--map-contact-gap);
    color: inherit;
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-regular);
    line-height: 28px;
}

a.map__contact {
    width: max-content;
    max-width: 100%;
    transition: color var(--duration-base) var(--ease-standard);
}

a.map__contact:hover {
    color: var(--color-brand-orange);
}

.map__contact-icon {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    flex: 0 0 var(--icon-size-md);
    margin-top: 2px;
}

.map__contact-text {
    min-width: 0;
    flex: 1 1 auto;
}

.map__contact-line {
    display: block;
}

.map__contact-text--link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.main__call-us {
    overflow: hidden;
    color: var(--color-text-inverse);
    background-color: var(--color-brand-orange);
}

.call-us__container {
    position: relative;
    display: flex;
    max-width: calc(var(--container-max-width) + var(--page-padding-inline) + var(--page-padding-inline));
    min-height: 408px;
    align-items: flex-start;
    padding-top: var(--space-800);
}

.call-us__content {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(100%, 811px);
    flex-direction: column;
    gap: var(--space-400);
}

.call-us__title {
    max-width: 640px;
    font-size: var(--type-section-title-size);
    font-weight: var(--type-section-title-weight);
    line-height: var(--type-section-title-line-height);
}

.call-us__contacts {
    display: flex;
    flex-direction: column;
    gap: var(--space-300);
}

.call-us__phone {
    width: max-content;
    max-width: 100%;
    color: inherit;
    font-family: var(--font-family-accent);
    font-size: var(--type-contact-size);
    font-weight: var(--font-weight-light);
    line-height: var(--type-contact-line-height);
    letter-spacing: var(--type-contact-letter-spacing);
    transition: opacity var(--duration-medium) var(--ease-emphasized);
}

.call-us__phone:hover {
    opacity: 0.7;
}

.call-us__socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-300);
}

.call-us__social-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-200);
    min-height: var(--icon-size-md);
    color: inherit;
    font-size: var(--type-body-size);
    line-height: var(--icon-size-md);
    white-space: nowrap;
    transition: opacity var(--duration-medium) var(--ease-emphasized);
}

.call-us__social-link:hover {
    opacity: 0.7;
}

.call-us__social-icon {
    flex: 0 0 auto;
    object-fit: contain;
}

.call-us__social-icon--vk {
    width: 24px;
    height: 15px;
}

.call-us__social-icon--telegram {
    width: 24px;
    height: 20px;
}

.call-us__social-icon--max {
    width: 24px;
    height: 24px;
}

.call-us__media {
    position: absolute;
    top: -144px;
    right: -750px;
    width: 1210px;
    pointer-events: none;
}

.call-us__media img {
    display: block;
    width: 100%;
    height: auto;
    transform: scaleX(-1);
}

.footer {
    --footer-text-color: rgba(255, 255, 255, 0.36);

    color: var(--footer-text-color);
    background-color: var(--color-text-primary);
}

.footer__container {
    max-width: calc(var(--container-max-width) + var(--page-padding-inline) + var(--page-padding-inline));
    height: auto;
}

.footer__inner {
    display: flex;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-600);
    padding-block: var(--space-150);
    font-size: var(--font-size-150);
    line-height: var(--line-height-relaxed);
}

.footer__info {
    width: min(100%, 788px);
}

.footer__developer {
    flex: 0 0 auto;
    white-space: nowrap;
}

.modal {
    --modal-transition: 0.3s ease-out;

    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-400) var(--space-200);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity var(--modal-transition),
        visibility 0s linear 0.3s;
}

.modal--open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
}

.modal[hidden],
.modal__dialog[hidden] {
    display: none;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: var(--modal-overlay-bg);
}

.modal__stage {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-height: 100%;
    align-items: center;
    justify-content: center;
}

.modal__dialog {
    position: relative;
    display: flex;
    width: min(100%, var(--modal-width));
    max-height: calc(100dvh - 64px);
    flex-direction: column;
    align-items: stretch;
    overflow: auto;
    border-radius: var(--radius-lg);
    color: var(--color-modal-text);
    background-color: var(--color-bg-surface);
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    transition:
        opacity var(--modal-transition),
        transform var(--modal-transition);
}

.modal--open .modal__dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.modal__dialog--callback,
.modal__dialog--catalog,
.modal__dialog--terms,
.modal__dialog--cost {
    gap: 35px;
    padding: var(--space-300) var(--space-200) var(--space-600);
}

.modal__dialog--order {
    gap: var(--space-400);
    padding: var(--space-300) var(--space-200) var(--space-400);
}

.modal__dialog--sale-info {
    width: min(100%, 336px);
    gap: 35px;
    padding: var(--space-300) var(--space-200) var(--space-600);
}

.modal__dialog--success,
.modal__dialog--contact-success {
    gap: 35px;
    padding: var(--space-300) var(--space-200) var(--space-600);
}

.modal__close {
    position: absolute;
    top: var(--space-100);
    right: var(--space-050);
    z-index: 2;
    display: inline-flex;
    width: var(--tap-target-min);
    height: var(--tap-target-min);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-control);
    background-color: var(--color-bg-muted);
    transition:
        background-color var(--duration-medium) var(--ease-emphasized),
        transform var(--duration-medium) var(--ease-emphasized);
}

.modal__close::before,
.modal__close::after {
    position: absolute;
    width: 17px;
    height: 2px;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand-orange);
    content: "";
    opacity: 0;
    transition: opacity var(--duration-medium) var(--ease-emphasized);
}

.modal__close::before {
    transform: rotate(45deg);
}

.modal__close::after {
    transform: rotate(-45deg);
}

.modal__close:hover {
    background-color: var(--color-brand-orange-soft);
}

.modal__close:hover::before,
.modal__close:hover::after {
    opacity: 1;
}

.modal__close:active {
    transform: scale(0.96);
}

.modal__close img {
    width: 24px;
    height: 24px;
    transition: opacity var(--duration-medium) var(--ease-emphasized);
}

.modal__close:hover img {
    opacity: 0;
}

.modal__dialog--sale-info .modal__close {
    top: var(--space-100);
    right: var(--space-100);
    width: var(--space-600);
    height: var(--space-600);
    border-radius: var(--radius-pill);
    background-color: var(--color-bg-muted);
}

.modal__dialog--sale-info .modal__close::before,
.modal__dialog--sale-info .modal__close::after {
    width: 17px;
    background-color: var(--color-text-primary);
    opacity: 1;
}

.modal__dialog--sale-info .modal__close:hover {
    background-color: var(--color-control-muted-hover);
}

.modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-300);
}

.modal__content--success {
    width: 100%;
}

.modal__title-wrap {
    padding-right: var(--space-600);
}

.modal__title {
    font-size: var(--font-size-500);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-snug);
}

.modal__text {
    margin-bottom: 35px;
}

.modal__text--cost {
    margin-bottom: 0;
}

.modal__text--terms {
    display: flex;
    flex-direction: column;
    gap: var(--space-0);
    margin-bottom: 0;
}

.modal__text--success {
    margin-bottom: 0px;
}

.modal__text,
.modal-form__intro {
    font-size: var(--font-size-300);
    line-height: var(--line-height-relaxed);
}

.sale-info-modal {
    --sale-info-image-width: 199px;
    --sale-info-image-height: 130px;
    --sale-info-params-width: 304px;
    --sale-info-param-gap: 3px;
    --sale-info-param-line-color: rgba(0, 0, 0, 0.35);
    --sale-info-text-width: 306px;
    --sale-info-text-max-height: 112px;

    color: var(--color-modal-text);
}

.sale-info-modal__head {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--space-100);
    padding-right: var(--space-600);
}

.sale-info-modal__title {
    font-size: var(--font-size-500);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-snug);
}

.sale-info-modal__subtitle {
    font-size: var(--font-size-400);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
}

.sale-info-modal__image {
    width: var(--sale-info-image-width);
    height: var(--sale-info-image-height);
}

.sale-info-modal__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sale-info-modal__params {
    display: flex;
    width: min(100%, var(--sale-info-params-width));
    flex-direction: column;
    gap: var(--space-150);
}

.sale-info-modal__param {
    display: flex;
    align-items: baseline;
    gap: var(--sale-info-param-gap);
    color: var(--color-form-text);
    font-size: var(--font-size-150);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
}

.sale-info-modal__param::before {
    order: 2;
    flex: 1 1 auto;
    min-width: var(--space-150);
    border-bottom: var(--border-width-hairline) dotted var(--sale-info-param-line-color);
    content: "";
}

.sale-info-modal__param dt {
    order: 1;
    white-space: nowrap;
}

.sale-info-modal__param dd {
    order: 3;
    white-space: nowrap;
}

.sale-info-modal__text {
    width: min(100%, var(--sale-info-text-width));
    max-height: var(--sale-info-text-max-height);
    overflow-y: auto;
    padding-right: var(--space-100);
    font-size: var(--font-size-150);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

.modal-form {
    display: flex;
    flex-direction: column;
}

.modal-form--order {
    gap: var(--space-200);
}

.modal-form--cost {
    gap: 35px;
}

.modal-form--terms {
    gap: 35px;
}

.modal-form__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-200);
    margin-bottom: 35px;
}

.modal-form__fields--cost,
.modal-form__fields--terms {
    margin-bottom: 0;
}

.modal-form__footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-200);
}

.modal-form__footer .modal-checkbox {
    margin-bottom: 0;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-050);
}

.form-field__input {
    width: 100%;
    height: 64px;
    padding: 17px 15px;
    border: var(--border-width-hairline) solid var(--color-border-field);
    border-radius: var(--radius-xs);
    color: var(--color-form-text);
    font-size: var(--font-size-300);
    line-height: var(--line-height-relaxed);
    background-color: var(--color-bg-muted);
    transition:
        border-color var(--duration-medium) var(--ease-emphasized),
        border-width var(--duration-medium) var(--ease-emphasized);
}

.form-field__input::placeholder {
    color: var(--color-text-tertiary);
}

.form-field__input:focus {
    border-width: var(--border-width-active);
    border-color: var(--color-brand-orange);
}

.form-field__input:focus-visible {
    outline: none;
}

.form-field__input[aria-invalid="true"] {
    border-width: var(--border-width-active);
    border-color: var(--color-danger-border);
}

.form-field__error {
    display: none;
    color: var(--color-danger-soft);
    font-size: var(--font-size-100);
    line-height: var(--line-height-relaxed);
}

.form-field__input[aria-invalid="true"]~.form-field__error {
    display: block;
}

.modal-checkbox {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-200);
    margin-bottom: 16px;
    text-align: left;
}

.modal-checkbox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.modal-checkbox__box {
    position: relative;
    display: inline-flex;
    width: 24px;
    min-width: 24px;
    height: 24px;
    border: var(--border-width-hairline) solid var(--color-checkbox-border);
    cursor: pointer;
    background-color: var(--color-bg-surface);
    transition:
        border-color var(--duration-medium) var(--ease-emphasized),
        background-color var(--duration-medium) var(--ease-emphasized);
}

.modal-checkbox__box::after {
    position: absolute;
    top: 5px;
    left: 8px;
    width: 7px;
    height: 11px;
    border-right: 2px solid var(--color-text-inverse);
    border-bottom: 2px solid var(--color-text-inverse);
    content: "";
    opacity: 0;
    transform: rotate(45deg) scale(0.7);
    transition:
        opacity var(--duration-medium) var(--ease-emphasized),
        transform var(--duration-medium) var(--ease-emphasized);
}

.modal-checkbox__input:checked+.modal-checkbox__box {
    border-color: var(--color-brand-orange);
    background-color: var(--color-brand-orange);
}

.modal-checkbox__input:checked+.modal-checkbox__box::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.modal-checkbox__input:focus-visible+.modal-checkbox__box {
    outline: 2px solid var(--color-brand-orange);
    outline-offset: 3px;
}

.modal-checkbox--error .modal-checkbox__box {
    border-color: var(--color-danger-border);
}

.modal-checkbox__text {
    flex: 1 1 auto;
    max-width: 266px;
    min-width: 0;
    color: var(--color-modal-text);
    font-size: var(--font-size-150);
    line-height: var(--line-height-relaxed);
}

.modal-checkbox__text label {
    cursor: pointer;
}

.modal-checkbox__policy {
    display: contents;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    font: inherit;
    text-align: inherit;
    transition: color var(--duration-base) var(--ease-standard);
}

.modal-checkbox__policy-line {
    color: var(--color-text-tertiary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--duration-base) var(--ease-standard);
}

.modal-checkbox__policy-line:first-child {
    display: inline;
}

.modal-checkbox__policy-line:last-child {
    display: block;
    width: max-content;
}

.modal-checkbox__policy:hover .modal-checkbox__policy-line {
    color: var(--color-brand-orange);
}

.modal-checkbox__policy:focus-visible .modal-checkbox__policy-line {
    outline: 2px solid var(--color-brand-orange);
    outline-offset: 2px;
}

.modal__submit {
    display: inline-flex;
    width: 100%;
    min-height: var(--button-min-block-size);
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-300);
    border-radius: var(--button-radius);
    color: var(--color-text-inverse);
    font-size: var(--font-size-300);
    line-height: var(--line-height-snug);
    text-align: center;
    background-color: var(--color-brand-orange);
    transition:
        background-color var(--duration-medium) var(--ease-emphasized),
        transform var(--duration-medium) var(--ease-emphasized);
}

.modal__submit:hover {
    background-color: var(--color-brand-orange-hover);
}

.modal__submit:active {
    transform: translateY(1px);
}

.order-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-400);
    padding: var(--space-200) var(--space-100);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-muted);
}

.order-summary__items {
    display: flex;
    max-height: 252px;
    flex-direction: column;
    gap: var(--space-400);
    overflow: auto;
    padding-right: var(--space-050);
}

.order-summary__total {
    font-size: var(--font-size-300);
    line-height: var(--line-height-relaxed);
}

.order-item {
    display: flex;
    flex-direction: column;
}

.order-item__title {
    color: var(--color-form-text);
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}

.order-item__list {
    display: flex;
    flex-direction: column;
}

.order-item__row {
    display: flex;
    align-items: baseline;
    gap: 3px;
    color: var(--color-form-text);
    font-size: var(--font-size-150);
    line-height: var(--line-height-relaxed);
}

.order-item__row::before {
    flex: 1 1 auto;
    order: 2;
    min-width: 12px;
    border-bottom: var(--border-width-hairline) dotted rgba(0, 0, 0, 0.35);
    content: "";
}

.order-item__row dt {
    order: 1;
    white-space: nowrap;
}

.order-item__row dd {
    order: 3;
    white-space: nowrap;
}

@media (max-width: 1440px) {
    .hero {
        min-height: 720px;
    }

    .hero__title {
        font-size: 64px;
    }

    .hero__arrows {
        margin-bottom: 0;
    }

}

@media (max-width: 1350px) {
    .header__left {
        gap: var(--space-200);
    }

    .header__right {
        gap: var(--space-150);
    }

    .header__menu {
        gap: var(--space-200);
    }

    .header__contacts {
        gap: var(--space-200);
    }

    .header__socials {
        gap: var(--space-200);
    }

    .header__callback {
        padding-inline: var(--space-150);
    }
}

@media (max-width: 1250px) {

    .order-process__container {
        max-width: none;
    }

    .order-process__viewport {
        width: calc(100vw - var(--page-padding-inline));
        margin-right: calc(-1 * var(--page-padding-inline));
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .order-process__viewport::-webkit-scrollbar {
        display: none;
    }

    .order-process__steps,
    .order-process__cards {
        padding-right: var(--page-padding-inline);
    }

    .order-step,
    .order-card {
        scroll-snap-align: start;
    }

    .product-card,
    .product-card--reverse {
        flex-direction: column;
        align-items: center;
        gap: var(--space-400);
    }

    .product-card__media {
        position: relative;
        top: auto;
        align-self: stretch;
        width: 100%;
        max-width: none;
        aspect-ratio: var(--product-media-fluid-aspect);
        flex-basis: auto;
    }

    .product-card__info {
        width: 100%;
        flex-basis: auto;
        align-items: stretch;
    }

    .product-card__details,
    .product-card__offer {
        width: 100%;
        flex: 0 1 auto;
    }
}

@media (max-width: 1240px) {
    :root {
        --anchor-scroll-offset: 36px;
    }

    .header__inner {
        height: 48px;
        padding: 10px var(--space-100) 10px var(--space-150);
    }

    .header__logo {
        width: 86px;
        height: 28px;
    }

    .header__nav,
    .header__contacts,
    .header__callback {
        display: none;
    }

    .header__right {
        gap: var(--space-200);
    }

    .header__actions {
        gap: var(--space-200);
    }

    .header__cart {
        width: 56px;
        height: 40px;
    }

    .header__cart-icon {
        width: var(--icon-size-sm);
        height: var(--icon-size-sm);
    }

    .header__cart-count {
        right: 4px;
        min-width: 16px;
        height: 16px;
        padding-inline: 3px;
        font-size: var(--font-size-100);
    }

    .header__cart-count--wide {
        min-width: 22px;
        height: 16px;
    }

    .header__burger {
        display: inline-flex;
        width: 24px;
        min-width: 24px;
        height: 24px;
    }

    .header__mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: block;
        overflow: auto;
        background-color: var(--color-bg-muted);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition:
            opacity var(--header-transition),
            transform var(--header-transition),
            visibility var(--header-transition);
    }

    .header__mobile-menu--open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .header__mobile-container {
        height: 100%;
    }

    .header__mobile-inner {
        display: flex;
        min-height: 100%;
        flex-direction: column;
        gap: var(--space-250);
        padding-block: var(--space-150) var(--space-300);
    }

    .header__mobile-top {
        display: flex;
        height: 48px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        padding: 10px var(--space-100) 10px var(--space-150);
        border-radius: var(--radius-md);
        background-color: var(--color-bg-surface);
    }

    .header__logo--mobile {
        width: 86px;
        height: 28px;
    }

    .header__close {
        width: 24px;
        min-width: 24px;
        height: 24px;
    }

    .header__mobile-list {
        display: flex;
        flex-direction: column;
    }

    .header__mobile-item {
        border-bottom: var(--border-width-hairline) solid var(--header-menu-border);
    }

    .header__mobile-link {
        display: flex;
        min-height: 48px;
        align-items: center;
        padding: 16px var(--space-100);
        color: var(--color-text-primary);
        font-size: var(--font-size-200);
        line-height: var(--line-height-normal);
        transition: color var(--header-transition);
    }

    .header__mobile-link:hover {
        color: var(--color-brand-orange);
    }

    .warranty__cards {
        display: flex;
        margin-right: calc(-1 * var(--page-padding-inline));
        overflow-x: auto;
        padding-right: var(--page-padding-inline);
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .warranty__cards::-webkit-scrollbar {
        display: none;
    }

    .warranty-card {
        width: 424px;
        flex: 0 0 424px;
        scroll-snap-align: start;
    }

    .quality {
        --quality-slide-width: calc(100vw - var(--space-1500));
        --quality-slide-height: calc(var(--quality-slide-width) * 0.484848);
        --quality-slide-padding: var(--space-300);
        --quality-slide-meta-bottom: var(--space-300);
        --quality-slide-tag-top: var(--space-300);
        --quality-viewport-left: var(--page-padding-inline);
    }

    .quality-slide__meta,
    .quality-slide__year {
        font-size: var(--font-size-300);
    }

    .header__mobile-contacts {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-200);
    }

    .header__mobile-phone {
        color: var(--color-text-primary);
        font-size: var(--font-size-400);
        line-height: var(--line-height-normal);
        text-align: center;
        transition: color var(--header-transition);
    }

    .header__mobile-phone:hover {
        color: var(--color-brand-orange);
    }

    .header__callback--mobile {
        display: inline-flex;
        width: 100%;
    }

    .header__mobile-socials {
        display: flex;
        min-height: 48px;
        align-items: center;
        justify-content: center;
    }

    .call-us__media {
        top: -80px;
        right: -555px;
        width: 1042px;
    }

    .hero__title {
        font-size: 62px;
    }

    .hero__title-layout--desktop .hero__title-line {
        white-space: normal;
    }
}

@media (max-width: 1350px) {

    .why {
        --why-card-gap: var(--space-200);
        --why-card-padding: var(--space-200);
        --why-card-title-size: var(--font-size-400);
        --why-card-body-size: var(--font-size-200);
        --why-card-body-large-size: var(--font-size-300);
        --why-stat-size: var(--font-size-900);
        --why-stat-label-size: var(--font-size-400);
        --why-strength-text-gap: var(--space-200);
        --why-tech-image-width: 220px;
        --why-small-text-width: 100%;
    }

    .why-card--tech {
        aspect-ratio: 2 / 1;
        gap: var(--space-250);
        padding: var(--space-300) var(--space-500);
    }

    .why-card--quality {
        padding: var(--space-300) var(--space-200);
    }

    .why-card__body,
    .why-card--strength .why-card__body {
        max-width: 100%;
    }

    .why-card__choice-title {
        right: var(--space-100);
        width: calc(100% - var(--space-400));
    }

    .why__cards {
        --why-adaptive-card-height: clamp(280px, 23.3vw, 312px);

        grid-template-areas:
            "tech tech video"
            "durability strength safe"
            "choice strength quality";
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto var(--why-adaptive-card-height) var(--why-adaptive-card-height);
    }

    .why-card--durability {
        aspect-ratio: auto;
        min-height: 0;
        height: 100%;
    }

    .why-card--choice {
        aspect-ratio: auto;
        min-height: 0;
        height: 100%;
    }

    .why-card--quality {
        aspect-ratio: auto;
        min-height: 0;
        height: 100%;
        justify-content: flex-start;
    }

    .why-card--safe {
        aspect-ratio: auto;
        min-height: 0;
        height: 100%;
    }

    .why-card--strength {
        aspect-ratio: auto;
        min-height: 0;
        height: 100%;
    }
}

@media (max-width: 1024px) {
    .why {
        --why-tech-image-width: 188px;
        --why-card-body-large-size: var(--font-size-200);
    }

    .why-card--tech {
        aspect-ratio: auto;
        gap: var(--space-150);
    }

    .call-us__media {
        top: 48px;
        right: -492px;
        width: 840px;
    }

    .hero {
        min-height: 534px;
    }

    .hero__title {
        font-size: 56px;
    }

    .hero__subtitle {
        font-size: 28px;
    }

    .hero__button {
        min-height: 72px;
        margin-top: 44px;
    }

    .benefits__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--benefits-mobile-row-gap) var(--benefits-mobile-column-gap);
    }

    .benefits__item {
        align-items: center;
    }

    .benefits__label {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 900px) {
    .why {
        --why-card-gap: var(--space-200);
        --why-card-padding: var(--space-200);
        --why-card-title-size: var(--font-size-400);
        --why-card-body-size: var(--font-size-200);
        --why-card-body-large-size: var(--font-size-300);
        --why-stat-size: var(--font-size-900);
        --why-stat-label-size: var(--font-size-400);
        --why-strength-text-gap: var(--space-200);
        --why-tech-image-width: 268px;
        --why-small-text-width: 100%;
    }

    .why-card--tech {
        padding-inline: var(--space-500);
    }

    .why-card--quality {
        padding: var(--space-300) var(--space-200);
    }

    .why-card__body,
    .why-card--strength .why-card__body {
        max-width: 100%;
    }

    .why-card__choice-title {
        right: var(--space-100);
        width: calc(100% - var(--space-400));
    }

    .why__cards {
        --why-mobile-small-size: clamp(164px, 28cqw, 312px);
        --why-mobile-balance-row: clamp(132px, 18cqw, 140px);
        --why-mobile-bottom-row: clamp(244px, 36cqw, 300px);

        grid-template-areas: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows:
            auto var(--why-mobile-small-size) var(--why-mobile-balance-row) var(--why-mobile-bottom-row) auto auto;
    }

    .why-card--tech {
        grid-column: 1 / -1;
        grid-row: 1;
        aspect-ratio: auto;
        gap: var(--space-300);
        border-radius: var(--why-card-radius-large);
    }

    .why-card--durability {
        grid-column: 1;
        grid-row: 2 / 4;
        aspect-ratio: auto;
        min-height: 0;
        height: 100%;
    }

    .why-card--choice {
        grid-column: 2;
        grid-row: 2;
        aspect-ratio: auto;
        height: 100%;
    }

    .why-card--quality {
        grid-column: 1;
        grid-row: 4;
        aspect-ratio: auto;
        min-height: 0;
        height: 100%;
        justify-content: flex-start;
    }

    .why-card--safe {
        grid-column: 2;
        grid-row: 3 / 5;
        aspect-ratio: auto;
        min-height: 0;
        height: 100%;
    }

    .why-card--strength {
        grid-column: 1 / -1;
        grid-row: 5;
        aspect-ratio: auto;
        min-height: 406px;
        border-radius: var(--why-card-radius-tall);
    }

    .why__video {
        grid-column: 1 / -1;
        grid-row: 6;
    }

    .why-card__choice-title {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        width: min(83%, 220px);
        transform: translate(-50%, -50%) rotate(-5.66deg);
    }

    .why-card__decor-frame--safe .why-card__decor {
        top: -156px;
        left: -471px;
        width: auto;
        height: auto;
        transform: rotate(-5.94deg);
        transform-origin: center;
    }
}

@media (max-width: 768px) {

    .main__benefits {
        padding-block: var(--space-500) var(--space-800);
    }

    .main__products {
        padding-block: var(--space-0) var(--space-800);
    }

    .products__container {
        max-width: none;
    }

    .products__head {
        gap: var(--space-250);
        margin-bottom: var(--space-400);
    }

    .products__title-line {
        display: block;
    }

    .products__title {
        font-size: 28px;
        font-weight: var(--font-weight-medium);
    }

    .products__subtitle {
        font-size: var(--font-size-200);
        font-weight: var(--font-weight-regular);
        line-height: var(--type-subtitle-line-height);
    }

    .products__list {
        gap: 64px;
    }

    .product-card,
    .product-card--reverse {
        align-items: stretch;
        gap: var(--space-250);
    }

    .product-card__media {
        width: 100%;
        height: var(--product-mobile-media-height);
        flex: 0 0 auto;
        border-radius: var(--radius-lg);
    }

    .product-card--paver .product-card__media {
        height: 293px;
    }

    .product-card__slide {
        background-image: var(--product-slide-image-mobile);
    }

    .product-card__arrows {
        display: none;
    }

    .product-card__pagination {
        bottom: var(--product-pagination-bottom);
        display: flex;
        width: max-content;
        min-height: 22px;
        align-items: center;
        gap: var(--space-050);
        padding: var(--space-100);
        border-radius: var(--radius-pill);
        background-color: var(--color-bg-glass);
        backdrop-filter: blur(var(--blur-glass));
    }

    .product-card__pagination-button {
        width: var(--slider-dot-size);
        min-height: var(--slider-dot-size);
        height: var(--slider-dot-size);
        flex: 0 0 var(--slider-dot-size);
        border-radius: 1px;
        background-color: var(--product-pagination-dot-bg);
        transition:
            flex-basis var(--duration-base) var(--ease-emphasized),
            width var(--duration-base) var(--ease-emphasized),
            background-color var(--duration-base) var(--ease-emphasized);
    }

    .product-card__pagination-button.is-active {
        width: var(--product-pagination-dot-active-width);
        flex-basis: var(--product-pagination-dot-active-width);
        background-color: var(--color-text-inverse);
    }

    .product-card--paver .product-card__info {
        gap: var(--space-250);
    }

    .product-card__details {
        gap: var(--space-150);
    }

    .product-card--paver .product-card__details {
        gap: var(--space-100);
    }

    .product-card__title {
        margin-bottom: var(--space-050);
        font-size: var(--font-size-400);
        font-weight: var(--font-weight-medium);
        line-height: var(--line-height-none);
    }

    .product-card--paver .product-card__title {
        margin-bottom: var(--space-100);
    }

    .product-card__features {
        gap: var(--space-150);
    }

    .product-card--paver .product-card__features {
        gap: 10px;
    }

    .product-card__feature {
        --product-feature-text-max-width: 445px;

        gap: var(--space-100);
        font-size: var(--type-body-sm-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--type-body-sm-line-height);
    }

    .product-card__feature-icon,
    .product-card__size-icon {
        width: var(--product-feature-icon-size-mobile);
        height: var(--product-feature-icon-size-mobile);
        flex-basis: var(--product-feature-icon-size-mobile);
    }

    .product-card__size {
        gap: var(--space-100);
        font-size: var(--type-body-sm-size);
        line-height: var(--type-body-sm-line-height);
    }

    .product-card__size-icon img {
        width: 14px;
        height: 14px;
    }

    .product-card__offer {
        gap: var(--space-200);
        padding: var(--space-300) var(--space-200) var(--space-200);
    }

    .product-card--paver .product-card__offer {
        padding-bottom: var(--space-100);
    }

    .product-card__offer-title {
        font-size: var(--type-body-sm-size);
        margin-bottom: var(--space-100);
    }

    .product-card__option {
        min-height: 30px;
        padding-block: var(--space-050);
        padding-inline: var(--space-050) var(--space-200);
        gap: var(--space-100);
    }

    .product-card__option:not(.is-active) .product-card__swatch {
        width: var(--icon-size-sm);
        height: var(--icon-size-sm);
        flex-basis: var(--icon-size-sm);
    }

    .product-card__option-label {
        font-size: var(--type-chip-size);
        line-height: var(--line-height-relaxed);
    }

    .product-card__price {
        gap: var(--space-050);
        font-size: var(--type-price-size);
        font-weight: var(--font-weight-medium);
    }

    .product-card__price span:not([data-product-price-value]) {
        font-size: var(--type-price-unit-size);
        font-weight: var(--font-weight-medium);
    }

    .product-card__price sup {
        font-size: inherit;
    }

    .product-card__availability {
        --product-availability-dot-size: 2px;

        gap: var(--space-100);
        font-size: var(--product-availability-mobile-size);
        line-height: var(--line-height-relaxed);
    }

    .product-card__availability li {
        gap: var(--space-025);
    }

    .product-card__cta {
        min-height: var(--button-min-block-size);
        font-size: var(--type-button-size);
        font-weight: var(--font-weight-semibold);
    }

    .main__sale {
        padding-block: var(--space-0) var(--space-800);
    }

    .sale {
        --sale-card-min-width: 336px;
        --sale-card-gap: var(--space-200);
        --sale-card-content-gap: var(--space-100);
        --sale-offer-padding: var(--space-200);
        --sale-action-gap: var(--space-050);
        --sale-quantity-width: 175px;
        --sale-control-size: 48px;
        --sale-button-height: 48px;
    }

    .sale__container {
        max-width: none;
        gap: var(--space-400);
    }

    .sale__head {
        gap: var(--space-250);
    }

    .sale__title {
        font-size: 28px;
        font-weight: var(--font-weight-medium);
    }

    .sale__subtitle {
        max-width: 336px;
        margin-inline: auto;
        font-size: var(--font-size-200);
    }

    .sale__list {
        grid-template-columns: 1fr;
        gap: var(--space-600);
    }

    .sale__card-title {
        font-size: 20px;
        font-weight: var(--font-weight-medium);
    }

    .sale__meta {
        gap: var(--space-100);
    }

    .sale__size {
        gap: var(--space-150);
        font-size: var(--type-body-sm-size);
    }

    .sale__chip {
        gap: var(--space-050);
        padding: var(--space-050) var(--space-100) var(--space-050) var(--space-050);
        font-size: var(--font-size-100);
        font-weight: var(--font-weight-medium);
        line-height: var(--line-height-relaxed);
    }

    .sale__chip img {
        width: var(--swatch-size);
        height: var(--swatch-size);
        flex-basis: var(--swatch-size);
    }

    .sale__offer {
        border-radius: var(--radius-lg);
    }

    .sale__price {
        font-size: var(--type-price-size);
        font-weight: var(--font-weight-medium);
    }

    .sale__price span:last-child {
        font-size: var(--type-price-unit-size);
        font-weight: var(--font-weight-medium);
    }

    .sale__old-price {
        font-size: 20px;
    }

    .sale__old-price span:last-child {
        font-size: var(--font-size-old-price-unit);
    }

    .sale__pallet-price {
        font-size: var(--type-body-sm-size);
        font-weight: var(--font-weight-medium);
    }

    .sale__stock p {
        font-size: var(--font-size-100);
    }

    .sale__availability {
        gap: 10px;
        font-size: 11px;
        line-height: var(--line-height-relaxed);
    }

    .sale__availability li:not(:last-child)::after {
        width: var(--space-050);
        height: var(--space-050);
        flex-basis: var(--space-050);
        margin-left: 10px;
    }

    .sale__button {
        height: var(--sale-button-height);
        font-size: var(--type-button-size);
        font-weight: var(--font-weight-semibold);
    }

    .sale__quantity-value {
        padding-inline: 2px;
        align-items: center;
    }

    .sale__quantity-value p:first-child {
        font-size: var(--font-size-150);
    }

    .sale__quantity-value p:last-child {
        font-size: var(--font-size-100);
    }

    .sale__card.is-added .sale__quantity {
        flex-basis: min(58%, var(--sale-quantity-width));
    }

    .sale__card.is-added .sale__button--order {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: var(--space-100);
    }

    .main__custom-order {
        padding-block: var(--space-0) var(--space-800);
    }

    .custom-order {
        --custom-order-head-gap: var(--space-250);
        --custom-order-content-gap: var(--space-400);
        --custom-order-body-gap: var(--space-300);
        --custom-order-card-gap: var(--space-100);
        --custom-order-card-height: 292px;
    }

    .custom-order__container {
        max-width: none;
        gap: var(--custom-order-content-gap);
    }

    .custom-order__title {
        font-size: 28px;
        font-weight: var(--font-weight-medium);
    }

    .custom-order__subtitle {
        font-size: var(--font-size-200);
    }

    .custom-order__cards {
        display: flex;
        flex-direction: column;
        gap: var(--custom-order-card-gap);
    }

    .custom-order-card__media {
        height: var(--custom-order-card-height);
    }

    .custom-order-card__caption {
        top: calc(50% - var(--space-100));
        gap: 7px;
    }

    .custom-order-card.is-detail-slide .custom-order-card__caption {
        display: none;
    }

    .custom-order-card__number {
        font-size: 48px;
    }

    .custom-order-card__text {
        font-size: var(--font-size-200);
    }

    .custom-order-card__arrows {
        display: none;
    }

    .custom-order-card__badge {
        top: var(--space-200);
        bottom: auto;
        left: var(--space-200);
        max-width: calc(100% - var(--space-400));
        min-height: 26px;
        gap: var(--space-100);
        padding-inline: var(--space-200);
        font-size: var(--font-size-150);
        font-weight: var(--font-weight-medium);
    }

    .custom-order-card__badge-divider {
        height: 26px;
    }

    .custom-order-card__counter {
        right: var(--space-200);
        bottom: var(--space-200);
        gap: var(--space-100);
        font-size: 28px;
    }

    .custom-order-card__pagination {
        bottom: var(--space-200);
        display: flex;
        width: max-content;
        min-height: 22px;
        align-items: center;
        gap: var(--space-050);
        padding: var(--space-100);
        border-radius: var(--radius-pill);
        background-color: var(--color-bg-glass);
        backdrop-filter: blur(var(--blur-glass));
    }

    .custom-order-card__pagination-button {
        width: var(--slider-dot-size);
        min-height: var(--slider-dot-size);
        height: var(--slider-dot-size);
        flex: 0 0 var(--slider-dot-size);
        border-radius: 1px;
        background-color: var(--product-pagination-dot-bg);
        transition:
            flex-basis var(--duration-base) var(--ease-emphasized),
            width var(--duration-base) var(--ease-emphasized),
            background-color var(--duration-base) var(--ease-emphasized);
    }

    .custom-order-card__pagination-button.is-active {
        width: var(--custom-order-pagination-active-width);
        flex-basis: var(--custom-order-pagination-active-width);
        background-color: var(--color-text-inverse);
    }

    .custom-order__button {
        width: 232px;
        min-height: 48px;
        padding-inline: var(--space-250);
        font-weight: var(--font-weight-semibold);
    }

    .main__why {
        margin-bottom: var(--space-800);
        padding-block: var(--space-800) 0;
    }

    .why {
        --why-content-gap: var(--space-800);
        --why-head-gap: var(--space-250);
        --why-head-content-gap: var(--space-400);
        --why-card-gap: var(--space-100);
        --why-card-padding: var(--space-100);
        --why-card-title-size: 20px;
        --why-card-body-size: var(--font-size-150);
        --why-card-body-large-size: var(--font-size-150);
        --why-card-body-line-height: var(--line-height-normal);
        --why-card-body-large-line-height: var(--line-height-relaxed);
        --why-stat-size: var(--font-size-900);
        --why-stat-label-size: 20px;
        --why-tech-text-width: 520px;
        --why-small-text-width: 100%;
        --why-strength-text-gap: var(--space-200);
        --why-card-radius-large: var(--radius-benefit-large);
        --why-card-radius-tall: var(--radius-benefit-tall);
    }

    .why__container {
        max-width: none;
        gap: var(--why-head-content-gap);
    }

    .why__title,
    .why-freeze__title {
        font-weight: var(--font-weight-medium);
        max-width: 336px;
    }

    .why__subtitle {
        max-width: none;
    }

    .why-card--tech {
        grid-column: 1 / -1;
        grid-row: 1;
        aspect-ratio: auto;
        gap: var(--space-300);
        padding: var(--space-300);
        border-radius: var(--why-card-radius-large);
    }

    .why-card--tech .why-card__text {
        max-width: 269px;
    }

    .why-card--tech .why-card__title {
        font-size: var(--font-size-400);
    }

    .why-card__image--main {
        width: min(100%, var(--why-tech-image-width));
    }

    .why-card--durability {
        grid-column: 1;
        grid-row: 2 / 4;
        aspect-ratio: auto;
        min-height: 0;
        height: 100%;
        padding: var(--space-200) var(--space-100) var(--space-300);
    }

    .why-card--choice {
        grid-column: 2;
        grid-row: 2;
        aspect-ratio: auto;
        height: 100%;
    }

    .why-card--quality {
        grid-column: 1;
        grid-row: 4;
        aspect-ratio: auto;
        min-height: 0;
        height: 100%;
        justify-content: flex-start;
        padding: var(--space-200) var(--space-100) var(--space-300);
    }

    .why-card--safe {
        grid-column: 2;
        grid-row: 3 / 5;
        aspect-ratio: auto;
        min-height: 0;
        height: 100%;
        padding: var(--space-200) var(--space-100);
    }

    .why-card--safe .why-card__text {
        max-width: 148px;
    }

    .why-card--strength {
        grid-column: 1 / -1;
        grid-row: 5;
        aspect-ratio: auto;
        min-height: 406px;
        padding: var(--space-300) var(--space-200);
        border-radius: var(--why-card-radius-tall);
    }

    .why__video {
        grid-column: 1 / -1;
        grid-row: 6;
        aspect-ratio: var(--media-video-aspect);
    }

    .why__video--image,
    .why__video--clip {
        --why-video-radius: 12px;
    }

    .why-card__body {
        gap: var(--space-200);
    }

    .why-card--tech .why-card__body {
        width: min(100%, var(--why-tech-text-width));
    }

    .why-card--strength .why-card__body {
        gap: var(--space-200);
    }

    .why-card__choice-title {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        width: min(83%, 220px);
        transform: translate(-50%, -50%) rotate(-5.66deg);
    }

    .why-card__stat {
        align-items: center;
        gap: var(--space-100);
    }

    .why-card__stat-label {
        padding-bottom: 0;
    }

    .why-card__decor-frame--safe {
        right: auto;
        bottom: 0;
        left: 0;
        width: min(100%, 220px);
        height: clamp(56px, 11cqw, 76px);
        transform: none;
    }

    .why-card__decor-frame--safe .why-card__decor {
        top: -156px;
        left: -471px;
        width: auto;
        height: auto;
        transform: rotate(-5.94deg);
        transform-origin: center;
    }

    .why-card__decor--strength {
        right: -302px;
        bottom: -269px;
        width: 700px;
        transform: rotate(-50deg);
    }

    .why-freeze {
        width: 100%;
        gap: var(--space-400);
    }

    .why-freeze__text {
        gap: var(--space-250);
    }

    .why-freeze__title {
        max-width: 621px;
    }

    .why-freeze__description {
        gap: var(--space-300);
    }

    .why-freeze__description p,
    .why-freeze__description p:last-child {
        max-width: 100%;
    }

    .main__warranty {
        padding-block: var(--space-0) var(--space-800);
    }

    .warranty {
        --warranty-head-gap: var(--space-250);
        --warranty-content-gap: var(--space-400);
        --warranty-card-gap: var(--space-150);
        --warranty-card-height: 374px;
        --warranty-card-padding-block: var(--space-250);
        --warranty-card-padding-inline: var(--space-250);
    }

    .warranty__container {
        max-width: none;
        gap: var(--warranty-content-gap);
    }

    .warranty__head {
        gap: var(--warranty-head-gap);
    }

    .warranty__title {
        max-width: none;
        font-size: 28px;
        font-weight: var(--font-weight-medium);
    }

    .warranty__subtitle {
        font-size: var(--font-size-200);
    }

    .warranty__terms-button {
        font-size: inherit;
    }

    .warranty__cards {
        display: flex;
        gap: var(--warranty-card-gap);
        margin-right: calc(-1 * var(--page-padding-inline));
        overflow-x: auto;
        padding-right: var(--page-padding-inline);
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .warranty__cards::-webkit-scrollbar {
        display: none;
    }

    .warranty-card {
        width: 312px;
        min-height: var(--warranty-card-height);
        flex: 0 0 312px;
        border-radius: var(--radius-lg);
        scroll-snap-align: start;
    }

    .warranty-card__title {
        max-width: 272px;
        font-size: var(--font-size-400);
        line-height: var(--line-height-snug);
        letter-spacing: var(--type-card-title-letter-spacing);
    }

    .warranty-card__text {
        max-width: 265px;
        font-size: var(--type-body-size);
    }

    .main__quality {
        padding-block: var(--space-0) var(--space-800);
    }

    .quality {
        --quality-head-gap: var(--space-250);
        --quality-text-gap: var(--space-300);
        --quality-content-gap: var(--space-400);
        --quality-tab-gap: var(--space-100);
        --quality-tab-height: 40px;
        --quality-slide-width: 312px;
        --quality-slide-height: 279px;
        --quality-title-width: 348px;
        --quality-text-width: 348px;
        --quality-slide-padding: var(--space-150);
        --quality-slide-meta-bottom: var(--space-200);
        --quality-slide-tag-top: var(--space-150);
        --quality-viewport-left: var(--space-0);
    }

    .quality__container {
        max-width: none;
    }

    .quality__content {
        max-width: none;
        padding-inline: var(--page-padding-inline) var(--space-0);
    }

    .quality__head {
        width: calc(100vw - var(--page-padding-inline));
        margin-inline: calc(-1 * var(--page-padding-inline));
    }

    .quality__title {
        font-size: var(--type-section-title-size);
        font-weight: var(--font-weight-medium);
    }

    .quality__tab {
        padding-inline: var(--space-150);
        font-size: var(--font-size-150);
    }

    .quality__text {
        font-size: var(--type-subtitle-size);
    }

    .quality__text-container {
        padding-inline: var(--space-0);
    }

    .quality__text-part {
        display: block;
    }

    .quality__text-part+.quality__text-part::before,
    .quality__text-part:nth-child(3)::before {
        content: none;
    }

    .quality__viewport {
        width: calc(100vw - var(--page-padding-inline));
        margin-inline: var(--space-0) calc(-1 * var(--page-padding-inline));
    }

    .quality-slide__year {
        height: 32px;
        padding: var(--space-050) var(--space-200);
        font-size: var(--type-subtitle-size);
    }

    .quality-slide__meta {
        max-width: 230px;
        font-size: var(--type-subtitle-size);
    }

    .quality__arrows {
        display: none;
    }

    .main__order-process {
        padding-block: var(--space-0) var(--space-800);
    }

    .order-process {
        --order-process-content-gap: var(--space-250);
        --order-process-row-gap: var(--space-100);
        --order-step-width: 152px;
        --order-step-height: 237px;
        --order-step-padding: var(--space-150) var(--space-150) var(--space-300);
        --order-step-radius: var(--radius-lg);
        --order-step-number-size: var(--type-stat-size);
        --order-step-text-size: var(--type-body-size);
        --order-card-width: 312px;
        --order-card-height: 374px;
        --order-card-padding: var(--space-250);
        --order-card-radius: var(--radius-lg);
        --order-card-title-size: var(--type-card-title-size);
        --order-card-text-size: var(--type-subtitle-size);
        --order-card-list-size: var(--type-subtitle-size);
    }

    .order-process__container {
        max-width: none;
        align-items: flex-start;
        gap: var(--space-400);
    }

    .order-process__title {
        width: 100%;
        max-width: 360px;
        align-self: center;
        font-size: 27px;
        font-weight: var(--font-weight-medium);
        text-align: left;
    }

    .order-process__title .order-process__title-mobile-line {
        display: block;
        white-space: nowrap;
    }

    .order-process__title .order-process__title-mobile-line span {
        display: inline;
    }

    .order-process__content {
        gap: var(--order-process-content-gap);
    }

    .order-step {
        gap: var(--space-100);
    }

    .order-card {
        padding: var(--order-card-padding);
        border-radius: var(--order-card-radius);
    }

    .order-card__title {
        font-size: var(--order-card-title-size);
    }

    .order-card__text {
        width: 192px;
        font-size: var(--order-card-text-size);
    }

    .order-card__list {
        width: 100%;
        gap: var(--space-050);
        font-size: var(--order-card-list-size);
        line-height: var(--line-height-normal);
    }

    .main__faq {
        padding-block: var(--space-800);
    }

    .faq {
        --faq-content-gap: var(--space-500);
        --faq-item-radius: var(--radius-md);
        --faq-question-padding-block: var(--space-100);
        --faq-question-padding-inline: var(--space-200);
        --faq-question-text-gap: var(--space-100);
        --faq-question-open-min-height: var(--control-faq-size);
        --faq-answer-padding-block: var(--space-100) var(--space-300);
        --faq-answer-padding-inline: var(--space-200) var(--space-1000);
    }

    .faq__container {
        max-width: none;
    }

    .faq__title {
        font-size: var(--type-section-title-size);
        font-weight: var(--font-weight-medium);
    }

    .faq__question {
        min-height: 72px;
    }

    .faq__question-text {
        font-size: var(--font-size-200);
    }

    .faq__answer {
        font-size: var(--type-body-size);
    }

    .main__map {
        display: flex;
        height: auto;
        min-height: 0;
        flex-direction: column;
        padding-block: var(--space-800) var(--space-0);
        overflow: visible;
    }

    .map {
        --map-info-width: 100%;
        --map-info-padding-block: var(--space-0) var(--space-500);
        --map-info-padding-inline: var(--page-padding-inline);
        --map-info-gap: var(--space-300);
        --map-tabs-gap: var(--space-100);
        --map-tab-height: 40px;
        --map-tab-padding-inline: var(--space-150);
        --map-photo-height: 110px;
        --map-contact-gap: var(--space-100);
        --map-contact-row-gap: var(--space-100);
        --map-placemark-width: 56px;
        --map-placemark-height: 62px;
    }

    .map__canvas {
        position: relative;
        inset: auto;
        width: 100%;
        height: 250px;
        flex: 0 0 auto;
        order: 2;
    }

    .map__info {
        position: relative;
        top: auto;
        left: auto;
        width: var(--map-info-width);
        order: 1;
        gap: var(--map-info-gap);
        padding-block: var(--map-info-padding-block);
        padding-inline: var(--map-info-padding-inline);
        border-radius: var(--space-0);
        box-shadow: none;
    }

    .map__title {
        font-size: var(--type-section-title-size);
        font-weight: var(--font-weight-medium);
    }

    .map__tab {
        min-height: var(--map-tab-height);
        padding-inline: var(--map-tab-padding-inline);
        font-size: var(--font-size-150);
    }

    .map__photo {
        height: var(--map-photo-height);
    }

    .map__contacts {
        width: 100%;
    }

    .map__contact {
        gap: var(--map-contact-gap);
    }

    .main__call-us {
        min-height: 399px;
    }

    .call-us__media {
        top: 92px;
        right: -355px;
    }

    .call-us__container {
        max-width: none;
        min-height: 399px;
        padding-top: var(--space-400);
    }

    .call-us__content {
        width: 100%;
        gap: var(--space-400);
    }

    .call-us__title {
        max-width: 430px;
    }

    .call-us__contacts {
        gap: var(--space-100);
    }

    .call-us__socials {
        width: 100%;
        flex-direction: column;
        gap: var(--space-0);
    }

    .call-us__social-link {
        min-height: 48px;
        align-items: center;
        gap: var(--space-150);
        line-height: var(--line-height-relaxed);
    }

    .footer__container {
        max-width: none;
    }

    .footer__inner {
        width: 100%;
        min-height: 192px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: var(--space-400);
        padding-block: var(--space-250);
    }

    .footer__info {
        max-width: 336px;
    }

    .benefits__item {
        gap: var(--space-100);
    }

    .benefits__icon {
        width: var(--benefits-icon-size-mobile);
        height: var(--benefits-icon-size-mobile);
    }

    .benefits__label {
        width: 100%;
        font-size: var(--font-size-100);
        line-height: var(--line-height-relaxed);
    }

    .benefits__label--desktop {
        display: none;
    }

    .benefits__label--mobile {
        display: flex;
    }

    body.is-modal-open {
        overflow: hidden;
    }

    .modal {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
        background-color: var(--color-bg-surface);
    }

    .modal__backdrop {
        display: none;
    }

    .modal__stage {
        align-items: stretch;
        justify-content: stretch;
    }

    .modal__dialog {
        width: 100%;
        max-height: none;
        min-height: 100dvh;
        border-radius: 0;
    }

    .modal.modal--compact {
        align-items: center;
        justify-content: center;
        padding: var(--space-150);
        background-color: transparent;
    }

    .modal.modal--compact .modal__backdrop {
        display: block;
    }

    .modal.modal--compact .modal__stage {
        align-items: center;
        justify-content: center;
    }

    .modal.modal--compact .modal__dialog {
        width: min(100%, 336px);
        max-height: calc(100dvh - var(--space-300));
        min-height: 0;
        border-radius: var(--radius-lg);
    }

    .modal.modal--compact:has(.modal__dialog--sale-info:not([hidden])) {
        align-items: flex-end;
        padding: var(--space-150) 0 0;
    }

    .modal.modal--compact:has(.modal__dialog--sale-info:not([hidden])) .modal__stage {
        align-items: flex-end;
    }

    .modal.modal--compact .modal__dialog--sale-info {
        width: 100%;
        max-height: calc(100dvh - var(--space-150));
        gap: 35px;
        padding: var(--space-400) var(--space-200);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        transform: translateY(100%);
    }

    .modal.modal--compact.modal--open .modal__dialog--sale-info {
        transform: translateY(0);
    }

    .modal__dialog--callback,
    .modal__dialog--catalog,
    .modal__dialog--terms,
    .modal__dialog--cost,
    .modal__dialog--order {
        gap: var(--space-400);
        padding: var(--space-400) var(--space-200) var(--space-600);
    }

    .modal__dialog--success,
    .modal__dialog--contact-success {
        align-items: center;
        justify-content: center;
        gap: var(--space-400);
        padding: var(--space-400) var(--space-200) var(--space-600);
    }

    .modal__close {
        top: var(--space-200);
        right: var(--space-200);
    }

    .modal.modal--compact .modal__dialog--sale-info .modal__close {
        top: var(--space-200);
        right: var(--space-200);
    }

    .sale-info-modal {
        --sale-info-params-width: 100%;
    }

    .sale-info-modal__head {
        gap: var(--space-050);
        padding-right: var(--space-800);
    }

    .sale-info-modal__title {
        font-size: 20px;
        line-height: var(--line-height-snug);
    }

    .sale-info-modal__subtitle {
        font-size: var(--font-size-200);
        line-height: var(--line-height-normal);
    }

    .sale-info-modal__text {
        display: none;
    }

    .modal__content {
        gap: var(--space-200);
    }

    .modal__content--success {
        width: 246px;
        align-items: center;
        text-align: center;
    }

    .modal__title-wrap {
        padding-right: var(--space-600);
    }

    .modal__content--success .modal__title-wrap {
        padding-right: 0;
    }

    .modal__title {
        font-size: var(--modal-mobile-title-size);
    }

    .modal__text,
    .modal-form__intro {
        font-size: var(--font-size-150);
    }

    .modal-form {
        gap: var(--space-200);
    }

    .modal-form--cost {
        gap: var(--space-400);
    }

    .modal-form--terms {
        gap: var(--space-400);
    }

    .modal-checkbox--policy-inline-mobile .modal-checkbox__policy-line:first-child,
    .modal-checkbox--policy-inline-mobile .modal-checkbox__policy-line:last-child {
        display: inline;
        width: auto;
    }

    .modal-checkbox--policy-inline-mobile .modal-checkbox__policy-line:first-child::after {
        content: " ";
    }

    .form-field__input {
        height: 56px;
        padding: var(--space-050) var(--space-150);
        font-size: var(--font-size-150);
    }

    .modal__submit {
        min-height: 48px;
        padding-inline: var(--space-250);
        font-size: var(--font-size-150);
        font-weight: var(--font-weight-semibold);
    }

    .modal__submit--success {
        width: 256px;
    }

    .order-summary {
        gap: var(--space-400);
        padding: var(--space-200) var(--space-100);
    }

    .order-summary__items {
        max-height: 260px;
    }

    .order-summary__total {
        font-size: var(--font-size-150);
    }

    .order-item__title {
        font-size: var(--font-size-150);
    }

    .order-item__row {
        font-size: var(--font-size-100);
    }

    .hero__container {
        justify-content: flex-end;
        max-width: 504px;
    }

    .hero__body {
        padding-top: 104px;
    }

    .hero__heading {
        margin-top: 24px;
    }

    .hero__title {
        max-width: 480px;
        font-size: 40px;
    }

    .hero__title-layout--desktop {
        display: none;
    }

    .hero__title-layout--mobile {
        display: block;
    }

    .hero__subtitle {
        margin-top: 20px;
        font-size: 22px;
    }

    .hero__button {
        width: auto;
        min-height: var(--button-hero-min-block-size);
        margin-top: 40px;
    }

    .hero__arrows {
        display: none;
    }

    .hero__controls {
        margin-top: 48px;
    }

    .hero__pagination {
        width: max-content;
        min-height: 22px;
        align-items: center;
        gap: 4px;
        margin-inline: auto;
        padding: 8px;
        border-radius: var(--radius-pill);
        background-color: var(--color-bg-glass);
        backdrop-filter: blur(var(--blur-glass));
        pointer-events: none;
    }

    .hero__pagination-button {
        flex: 0 0 6px;
        width: 6px;
        min-height: 6px;
        height: 6px;
        transition:
            flex-basis var(--duration-base) var(--ease-emphasized),
            width var(--duration-base) var(--ease-emphasized);
    }

    .hero__pagination-button:nth-child(n + 5) {
        display: none;
    }

    .hero__pagination-button.is-active {
        flex-basis: 9px;
        width: 9px;
    }

    .hero__pagination-button::before,
    .hero__pagination-button::after {
        top: 0;
        height: 6px;
        border-radius: 1px;
        transition:
            background-color var(--duration-base) var(--ease-emphasized),
            border-radius var(--duration-base) var(--ease-emphasized);
    }

    .hero__pagination-button::before {
        background-color: rgba(255, 255, 255, 0.35);
    }

    .hero__pagination-button.is-complete::after {
        width: 0%;
    }
}

@media (max-width: 480px) {
    .hero {
        min-height: 534px;
    }

    .call-us__media {
        top: 180px;
        right: -250px;
        width: 620px;
    }

    .hero__tag {
        min-height: 34px;
        font-size: var(--font-size-150);
    }

    .hero__title {
        font-size: 30px;
    }

    .hero__subtitle {
        font-size: var(--type-hero-subtitle-size);
    }

    .product-card__feature {
        --product-feature-text-max-width: 300px;
    }

    .why-card--durability .why-card__text,
    .why-card--quality .why-card__text {
        max-width: 141px;
    }

    .why-freeze__description {
        max-width: 336px;
        text-align: center;
    }

}

@media (max-width: 360px) {

    .hero__title {
        width: 100vw;
        max-width: none;
        margin-inline: calc((100% - 100vw) / 2);
        font-size: 30px;
    }

    .product-card__availability {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: var(--space-050) var(--space-100);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hero__button,
    .hero__arrow,
    .modal,
    .modal__dialog,
    .product-card__arrow,
    .product-card__option,
    .product-card__cta,
    .custom-order-card__arrows,
    .custom-order-card__arrow,
    .custom-order-card__pagination-button,
    .custom-order__button,
    .header__inner,
    .header__menu-link,
    .header__phone,
    .header__social,
    .header__callback,
    .header__cart,
    .header__mobile-menu,
    .header__mobile-link,
    .header__mobile-phone,
    .warranty__terms-button,
    .quality__tab,
    .quality__arrow,
    .faq__answer,
    .call-us__phone,
    .call-us__social-link,
    .hero__pagination-button,
    .product-card__pagination-button,
    .hero__pagination-button::before,
    .hero__pagination-button::after {
        transition: none;
    }

    .modal__dialog {
        transform: none;
    }
}