* {
    box-sizing: border-box;
}

@font-face {
    font-family: "InterTight";
    src: url("fonts/InterTight-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "InterTight";
    src: url("fonts/InterTight-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
button,
input,
textarea,
select,
li,
div {
    font-family: "InterTight", sans-serif;
}

body {
    margin: 0;
}

a {
    color: rgb(22, 119, 255);
}

.mb-40 {
    margin-bottom: 40px !important;
}
.mt-40 {
    margin-top: 40px !important;
}
.py-80 {
    padding: 80px 0;
}
.h-480 {
    height: 480px !important;
    object-fit: cover !important;
}
.h-900 {
    height: 900px !important;
    object-fit: cover !important;
}
.text-left {
    text-align: left !important;
}
.xl {
    font-size: 64px !important;
}
.w50 {
    width: 50%;
}
.w980 {
    max-width: 980px !important;
}
.w560 {
    width: 560px !important;
    flex: 0 0 560px !important;
}

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

.black {
    background: #000;
}

.soft {
    background: #f8f9fd;
}

.white {
    background: #fff;
}

.black .head__title,
.black .name {
    color: #fff;
}

.black .head__subtitle,
.black .text {
    color: rgba(255, 255, 255, 0.65);
}
.white .head__title,
.white .name,
.soft .head__title,
.soft .name {
    color: rgba(0, 0, 0, 0.9);
}

.white .head__subtitle,
.white .text,
.soft .head__subtitle,
.soft .text {
    color: rgba(0, 0, 0, 0.65);
}

.light .text,
.light .name {
    color: #fff;
}

/* заголовок */
.head {
    width: 100%;
    max-width: 744px;
    margin: 0 auto 40px;
    text-align: center;
}

.head__title {
    margin: 0;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
}

.head__subtitle {
    margin: 16px 0;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
}

.name {
    margin: 0;
    font-size: 22px;
    line-height: 26px;
    font-weight: 700;
}

.text {
    margin: 8px 0;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.65);
}

/* showcase */
.showcase {
    position: relative;
    min-height: 100vh;
    padding: 48px 20px 60px;
    text-align: center;
    overflow: hidden;
}

.showcase__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.showcase__bg picture,
.showcase__bg img {
    display: block;
    width: 100%;
    height: 100%;
}

.showcase__bg img {
    object-fit: cover;
    object-position: center bottom;
}

.showcase__content {
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin: 0 auto;
}

.showcase__title {
    margin: 0;
    font-size: 48px;
    line-height: 1.1;
    font-weight: 700;
}

.showcase__subtitle {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 500;
}

.showcase__video-wrap {
    position: relative;
    width: 200px;
    height: 56px;
    margin: 28px auto 0;
    border-radius: 999px;
    overflow: hidden;
    cursor: pointer;
}

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

.showcase__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    border: 0;
    cursor: pointer;
    background: none;
    color: #fff !important;
}

.showcase__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-35%, -50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid currentColor;
}

.showcase__product-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 32px auto 0;
}

.soft .showcase {
    color: #000;
}

.soft .showcase .showcase__subtitle {
    color: rgba(0, 0, 0, 0.65);
}

.soft .showcase .showcase__play {
    color: #000;
}

.black .showcase {
    color: #fff;
}

.black .showcase .showcase__subtitle {
    color: rgba(255, 255, 255, 0.65);
}

.black .showcase .showcase__play {
    color: #fff;
}

/* video modal */
.video-modal[hidden] {
    display: none;
}
.video-modal__player[hidden] {
    display: none !important;
}

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.86);
    z-index: 9999;
}

.video-modal__dialog {
    position: relative;
    width: min(96vw, 850px);
    margin: 0 auto;
}

.video-modal__player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 90vh;
    border: 0;
    background: #000;
    border-radius: 16px;
}

.video-modal__close {
    position: absolute;
    top: -44px;
    right: 0;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

/* picture */
.picture__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

.picture__cover {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* banner text */
.banner-text {
    position: relative;
    overflow: hidden;
}

.banner-text__bg,
.banner-text__bg img {
    display: block;
    width: 100%;
}

.banner-text__bg img {
    height: 720px;
    object-fit: cover;
    object-position: center center;
}

.banner-text__content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
}

.banner-text__title {
    max-width: 420px;
    margin: 0;
    font-size: 64px;
    line-height: 1.06;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.88);
}

.black .banner-text__title {
    color: #fff;
}

/* guide */
.guide .container {
    text-align: center;
}

.guide__card {
    overflow: hidden;
    border-radius: 32px;
}

.guide__image {
    display: block;
    width: 100%;
    height: auto;
}

.guide__button {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 40px auto;
    padding: 8px 8px 8px 24px;
    border: 0;
    border-radius: 999px;
    background: #4f4f52;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    width: fit-content;
}

.guide__button-text {
    display: block;
}

.guide__button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1976ff;
    color: #fff;
    flex: 0 0 40px;
}

/* guide modal */
.guide-modal[hidden] {
    display: none;
}

.guide-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    padding: 18px;
}

.guide-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
}

.guide-modal__dialog {
    position: relative;
    z-index: 2;
    width: min(1380px, calc(100vw - 36px));
    max-height: calc(100vh - 36px);
    margin: 0 auto;
    padding: 48px 42px 42px;
    overflow: auto;
    border-radius: 28px;
    background: #fff;
}

.guide-modal__close {
    position: sticky;
    top: 0;
    z-index: 20;
    display: block;
    width: 32px;
    height: 32px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform: translate(18px, -18px);
}

.guide-modal__section {
    max-width: 980px;
    margin: 0 auto 120px;
}

.guide-modal__section:last-child {
    margin-bottom: 0;
}

.guide-modal__kicker {
    margin-bottom: 8px;
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    color: #1d1d1f;
}

.guide-modal__title {
    margin: 0 0 40px;
    text-align: center;
    font-size: 40px;
    line-height: 1.05;
    font-weight: 700;
    color: #1d1d1f;
}

.guide-modal__compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    max-width: 980px;
    margin: 0 auto;
    background: #efeff5;
    border-radius: 28px;
    overflow: hidden;
}

.guide-modal__media {
    min-width: 0;
}

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

.guide-modal__panel {
    padding: 42px 38px;
    background: #efeff5;
}

.guide-modal__item + .guide-modal__item {
    margin-top: 14px;
}

.guide-modal__button {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 28px 30px;
    border: 0;
    border-radius: 24px;
    background: #f8f8f8;
    text-align: left;
    cursor: pointer;
}

.guide-modal__section .support-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.guide-modal__button-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.guide-modal__button-title {
    display: block;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    color: #1a1a1a;
}

.guide-modal__button-note {
    display: none;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    color: #1a1a1a;
}

.guide-modal__item.active .guide-modal__button-note {
    display: block;
}

.guide-modal__button-icon {
    position: relative;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    margin-top: 4px;
}

.guide-modal__button-icon::before,
.guide-modal__button-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2.5px;
    background: #1a1a1a;
    border-radius: 99px;
    transition: transform 0.2s ease;
}

.guide-modal__button-icon::before {
    transform: translate(-62%, -50%) rotate(45deg);
}

.guide-modal__button-icon::after {
    transform: translate(-4%, -50%) rotate(-45deg);
}

.guide-modal__item.active .guide-modal__button-icon::before {
    transform: translate(-62%, -50%) rotate(-45deg);
}

.guide-modal__item.active .guide-modal__button-icon::after {
    transform: translate(-4%, -50%) rotate(45deg);
}

.guide-modal__figure {
    max-width: 980px;
    margin: 0 auto;
}

.guide-modal__figure picture,
.guide-modal__figure-image {
    display: block;
    width: 100%;
    height: auto;
}

.guide-modal__split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    max-width: 980px;
    margin: 0 auto;
}

.guide-modal__split--reverse {
    flex-direction: row-reverse;
}

.guide-modal__split-media {
    width: 60%;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
}

.guide-modal__split-media picture,
.guide-modal__split-image {
    display: block;
    width: 100%;
    height: auto;
}

.guide-modal__split-content {
    width: 40%;
}

body.guide-open {
    overflow: hidden;
}

.compare-modal {
    background: #f8f9fd;
    border-radius: 24px;
    padding: 32px 40px 40px;
    overflow-x: auto;
}

.compare-modal__table {
    min-width: 900px;
}

.compare-modal__head,
.compare-modal__row {
    display: grid;
    grid-template-columns: 220px 1fr 1fr;
    align-items: stretch;
}

.compare-modal__head {
    margin-top: 32px;
}

.compare-modal__divider {
    height: 1px;
    background: #d9d9d9;
}

.compare-modal__label {
    padding: 40px 40px 40px 0;
    font-size: 22px;
    line-height: 26px;
    font-weight: 700;
    color: #1d1d1f;
    word-break: break-word;
}

.compare-modal__product,
.compare-modal__value {
    padding: 40px;
}

.compare-modal__product--accent,
.compare-modal__value--accent {
    background: #e0f8ed;
}

.compare-modal__product--accent.is-top {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    position: relative;
}

.compare-modal__value--accent.is-bottom {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.compare-modal__product-image {
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
}

.compare-modal__product-name {
    margin-top: 16px;
    font-size: 22px;
    line-height: 26px;
    font-weight: 700;
    color: #1d1d1f;
}

.compare-modal__title {
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    color: #1d1d1f;
}

.compare-modal__text,
.compare-modal__item {
    margin-top: 16px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    color: rgba(29, 29, 31, 0.72);
}

.compare-modal__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.compare-modal__item-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 1px;
}

.compare-modal__footer {
    margin-top: 48px;
    display: flex;
    justify-content: center;
}

/* slider */
.metal-slider {
    padding: 24px 0 64px;
    color: #fff;
    overflow: hidden;
}

.metal-slider__head {
    text-align: center;
}

.metal-slider__title {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    font-size: 56px;
    line-height: 1.03;
    font-weight: 700;
    color: #fff;
}

.metal-slider__subtitle {
    width: 100%;
    max-width: 920px;
    margin: 18px auto 0;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
}

.metal-slider__viewport {
    width: 100%;
    margin-top: 46px;
    overflow: hidden;
}

.metal-slider__track {
    display: flex;
    gap: 24px;
    width: max-content;
    justify-content: flex-start;
    will-change: transform;
    transition: transform 0.35s ease;
    margin-left: calc((100vw - 980px) / 2);
    padding-right: 24px;
}

.metal-slider__card {
    position: relative;
    flex: 0 0 310px;
    background: #1e1f1e;
    border-radius: 24px;
    overflow: hidden;
}
.metal-slider__card.metal-big-card {
    flex: 0 0 980px;
}
.soft .metal-slider__card {
    background: #fff;
}
.white .metal-slider__card {
    background: #f8f9fd;
}

.metal-slider__card-image-wrap {
    width: 100%;
    overflow: hidden;
}

.metal-slider__card-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.metal-slider__card-body {
    padding: 26px 24px 28px;
}

.metal-slider__card-flex {
    display: flex;
    align-items: center;
    gap: 8px;
}

.metal-slider .avatar {
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

.metal-slider .name {
    font-size: 16px;
}

.metal-slider__card-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.18;
    font-weight: 700;
    color: #fff;
}
.soft .metal-slider__card-title {
    color: #000;
}

.metal-slider__card-text {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
}

.metal-slider__icon {
    width: 56px;
    height: 56px;
}

.metal-slider__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 26px;
}

.metal-slider__card--image-only {
    background: none;
    border-radius: 16px;
}

.metal-slider__card-image--full {
    height: auto;
    border-radius: 16px;
}

.metal-slider--overlay .metal-slider__card-image-wrap {
    position: relative;
}

.black .metal-slider__card-image-wrap.metal-gradient::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%; /* высота затемнённой области */
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
    pointer-events: none; /* чтобы клики проходили сквозь */
    z-index: 1; /* поверх картинки, но под текстом (текст в body идёт после) */
}

.metal-slider--overlay .metal-slider__card-body {
    position: absolute;
    top: 32px;
    left: 32px;
    right: 32px;
    z-index: 2;
    padding: 0;
    background: none;
}

.metal-slider--overlay .metal-slider__card-body .name,
.metal-slider--overlay .metal-slider__card-body .text {
    color: #fff;
}

.metal-slider--overlay .metal-slider__card-body .name {
    margin-bottom: 8px;
    font-size: 14px;
}
.metal-slider--overlay .metal-slider__card-body .text {
    font-size: 22px;
    line-height: 1.2;
}

.metal-slider__dots {
    display: flex;
    align-items: center;
    gap: 10px;
}

.metal-slider__dot {
    width: 10px;
    height: 10px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
}

.metal-slider__dot.is-active {
    background: #fff;
}

.soft .metal-slider__dot,
.white .metal-slider__dot {
    background: rgba(0, 0, 0, 0.25);
}

.soft .metal-slider__dot.is-active,
.white .metal-slider__dot.is-active {
    background: #000;
}

.metal-slider__nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.metal-slider__arrow {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.metal-slider__arrow svg {
    display: block;
    width: 40px;
    height: 40px;
}

.metal-slider__arrow.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.metal-slider .video-box {
    position: relative;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.metal-slider .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}

.metal-tabs-slider__tabs {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: linear-gradient(90deg, #1f1e1f 0%, #18181c 100%);
    border-radius: 999px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.metal-tabs-slider__tabs::-webkit-scrollbar {
    display: none;
}

.metal-tabs-slider__tab {
    flex: 1 0 auto;
    min-width: max-content;
    padding: 12px 24px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.metal-tabs-slider__tab.is-active {
    background: #fff;
    color: #000;
}

.metal-tabs-slider__tabs-wrapper {
    position: relative;
    display: block; /* чтобы растягивался по ширине родителя */
    padding: 0 48px;
}

/* Стрелки */
.metal-tabs-slider__arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 28px;
    font-weight: 300;
    z-index: 2;
    transition: opacity 0.2s;
}

.metal-tabs-slider__arrow--left {
    left: 0;
    border-radius: 50px 0 0 50px;
    background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.metal-tabs-slider__arrow--right {
    right: 0;
    border-radius: 0 50px 50px 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.metal-tabs-slider__panel {
    display: none;
}

.metal-tabs-slider__panel.is-active {
    display: block;
}

.video-dialog {
    width: min(853px, calc(100vw - 24px));
    padding: 0;
    border: 0;
    background: transparent;
}

.video-dialog::backdrop {
    background: rgba(0, 0, 0, 0.72);
}

.video-dialog__inner {
    position: relative;
    width: 100%;
}

.video-dialog__close {
    position: absolute;
    top: -36px;
    right: 0;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    z-index: 3;
}

.video-frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 12px;
    background: #000;
}

/* story video */
.story-video {
    position: relative;
    height: 400vh;
    background: #000;
}

.story-video__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.story-video__media {
    position: absolute;
    inset: 0;
}

.story-video__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-video__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.story-video__inner {
    position: relative;
    width: 100%;
    max-width: 920px;
    height: 100%;
    padding: 0 24px;
}

.story-video__line {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    opacity: 0;
    color: #fff;
    font-size: 64px;
    text-align: center;
    line-height: 1.06;
    font-weight: 700;
    will-change: transform, opacity;
    transition:
        opacity 0.12s linear,
        transform 0.12s linear;
}

.story-video__text {
    font-size: 18px;
}

.story-video__line.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* video block */
.video-block {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    outline: none;
    overflow: hidden;
}

/* media-grid - сетка из двух картинок */
.media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.media-grid.cols-40-60 {
    grid-template-columns: 40% 60%;
}

.media-grid.cols-60-40 {
    grid-template-columns: 60% 40%;
}

.media-grid__item {
    display: flex;
    flex-direction: column;
}

.media-grid__image-wrap {
    overflow: hidden;
    border-radius: 16px;
    border: none;
    padding: 0;
}

.media-grid__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.media-grid__body {
    padding-top: 24px;
}

.media-grid__center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* tabs */
.tabs-media {
    display: flex;
    align-items: center;
    gap: 56px;
}

.tabs-media__media {
    position: relative;
    width: calc(50% - 28px);
    flex: 0 0 calc(50% - 28px);
}

.tabs-media__media-item {
    display: none;
    border-radius: 16px;
    overflow: hidden;
}

.tabs-media__media-item.is-active {
    display: block;
}

.tabs-media__media-item.blue-card-style.is-active {
    display: flex !important;
}

.tabs-media__video,
.tabs-media__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.tabs-media__description {
    padding-top: 24px;
}

.blue-card-style {
    align-items: center;
    gap: 64px;
    padding: 32px 40px;
    border-radius: 32px;
    background: #e8f1f7;
    overflow: hidden;
}

.blue-card-style__image-wrap {
    flex: 0 0 56%;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    padding: 0;
}

.blue-card-style__image-wrap picture,
.blue-card-style__image-wrap img {
    display: block;
    width: 100%;
    height: auto;
}

.blue-card-style .tabs-media__description {
    flex: 1 1 auto;
    max-width: 560px;
    padding: 0;
}

.blue-card-style .tabs-media__description .text {
    margin: 0 0 12px;
    color: rgba(0, 0, 0, 0.88);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
}

.blue-card-style .tabs-media__description .text strong {
    display: block;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid #cfd8df;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.88);
}

.blue-card-style .tabs-media__description .text:last-child {
    margin-bottom: 0;
}

.tabs-media__tabs {
    flex: 0 0 calc(50% - 28px);
    /* border-left: 1px solid rgba(255, 255, 255, 0.2); */
}

.tabs-media__tab {
    display: block;
    width: 100%;
    padding: 24px 32px;
    border: 0;
    border-left: 2px solid transparent;
    background: transparent;
    text-align: left;
    cursor: pointer;
    opacity: 0.22;
    transition:
        opacity 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

/* .tabs-media__tab + .tabs-media__tab {
    margin-top: 8px;
} */

.tabs-media__tab .name,
.tabs-media__tab .text {
    display: block;
}

.tabs-media__tab .text {
    display: none;
}

.tabs-media__tab.is-active {
    opacity: 1;
    border-left-color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.soft .tabs-media__tab.is-active {
    opacity: 1;
    border-left-color: #000;
    background: rgba(0, 0, 0, 0.12);
}

.tabs-media__tab.is-active .text {
    display: block;
}

.tabs-media__top-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 40px;
}

.head__kicker {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
}

.head__kicker--green {
    color: #2abe43;
    margin-bottom: 12px;
}

.head__kicker--red {
    color: #ff2b2b;
    margin-bottom: 12px;
}

/* TABS MEDIA MATERIALS */

/* Родительский блок – уже имеет position: relative */
.tabs-media--materials {
    position: relative;
    display: block;
    margin-top: 40px;
}

/* Обёртка для табов и стрелок (создаётся JS) */
.tabs-media__slider-wrapper {
    position: relative;
    overflow: hidden;
    margin: 0 -20px 40px; /* сохраняем отступы, как у оригинального контейнера */
}

/* Сам контейнер табов (переопределяем) */
.tabs-media--materials .tabs-media__tabs {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 48px 0px; /* увеличиваем отступы для стрелок */
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    margin: 0; /* убираем внешние отступы, они теперь на обёртке */
}

.tabs-media--materials .tabs-media__tab {
    flex: 0 0 140px;
    min-width: 140px;
    padding: 16px 24px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

/* Кнопки-стрелки */
.tabs-media__arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: none;
    font-size: 36px;
    font-weight: 100;
    font-family: Arial, Helvetica, sans-serif;
    color: #aaa;
    cursor: pointer;
    z-index: 2;
}

.tabs-media__arrow--left {
    left: 0;
    border-right: 1px solid #aaa;
    background: #fff;
    /* background: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.3)); */
}

.tabs-media__arrow--right {
    right: 0;
    border-left: 1px solid #aaa;
    background: #fff;
    /* background: linear-gradient(to left, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.3)); */
}

.tabs-media__arrow:hover {
    opacity: 1;
    background-color: #f5f5f5;
}

/* Для тёмной темы (если есть класс .black на body) */
.black .tabs-media__arrow {
    background-color: #1a1a1a;
    color: #fff;
}
.black .tabs-media__arrow--left {
    background: linear-gradient(to right, rgba(26, 26, 26, 0.95), rgba(26, 26, 26, 0.3));
}
.black .tabs-media__arrow--right {
    background: linear-gradient(to left, rgba(26, 26, 26, 0.95), rgba(26, 26, 26, 0.3));
}
.black .tabs-media__arrow:hover {
    background-color: #2a2a2a;
}

/* Стрелки скрыты по умолчанию (покажет JS) */
.tabs-media__arrow {
    display: none;
}

.tabs-media--materials .tabs-media__tabs::-webkit-scrollbar {
    display: none;
}

.tabs-media--materials .tabs-media__tab.is-active {
    background: #f2f2f1;
}

.tabs-media--materials .tabs-media__tab-icon {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 32px;
}

.tabs-media--materials .tabs-media__tab-text {
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    color: var(--title-color);
    text-align: center;
}

.tabs-media--materials .tabs-media__content {
    margin-top: 40px;
    display: block;
    width: 100%;
}

.tabs-media--materials .tabs-media__media-item {
    display: none;
}

.tabs-media--materials .tabs-media__media-item.is-active {
    display: block;
}

.black .tabs-media--materials .tabs-media__tab {
    background: transparent;
}

.black .tabs-media--materials .tabs-media__tab.is-active {
    background: rgba(255, 255, 255, 0.12);
}

.black .tabs-media--materials .tabs-media__tab-text {
    overflow-wrap: break-word;
    word-break: break-word;
    color: #fff;
}

.tabs-media--materials .tabs-media__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* Сам контейнер ссылок (переопределяем) */
.tabs-media__links {
    display: flex;
    gap: 32px; /* как у вас было */
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 48px 0px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    border-bottom: 1px solid #cfcfcf; /* если нужна граница */
}

/* Обёртка для ссылок (создаётся JS) */
.tabs-media__links-wrapper {
    position: relative;
    overflow: hidden;
    margin: 0 -20px 40px; /* подстройте под свои отступы */
}

/* Кнопки-стрелки для второго слайдера (используем те же классы, что и для первого) */
.tabs-media__links-wrapper .tabs-media__arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: none;
    font-size: 36px;
    font-weight: 100;
    font-family: Arial, Helvetica, sans-serif;
    color: #aaa;
    cursor: pointer;
    z-index: 2;
    display: none; /* скрыты по умолчанию, покажет JS */
}

.tabs-media__links-wrapper .tabs-media__arrow--left {
    left: 0;
    border-right: 1px solid #aaa;
}

.tabs-media__links-wrapper .tabs-media__arrow--right {
    right: 0;
    border-left: 1px solid #aaa;
}

.tabs-media__links-wrapper .tabs-media__arrow:hover {
    background-color: #f5f5f5;
}

/* Для тёмной темы */
.black .tabs-media__links-wrapper .tabs-media__arrow {
    background-color: #1a1a1a;
    color: #fff;
}
.black .tabs-media__links-wrapper .tabs-media__arrow:hover {
    background-color: #2a2a2a;
}

.tabs-media__links::-webkit-scrollbar {
    display: none;
}

.tabs-media__link {
    flex: 0 0 auto;
    padding: 0 0 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    cursor: pointer;
    color: #6b6b6b;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

.tabs-media__link.is-active {
    color: var(--title-color);
    border-bottom-color: var(--title-color);
}

.tabs-media__link .tabs-media__tab-text {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    color: inherit;
}

.black .tabs-media__links {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.black .tabs-media__link {
    color: rgba(255, 255, 255, 0.65);
}

.black .tabs-media__link.is-active {
    color: #fff;
    border-bottom-color: #fff;
}

/* cards */
.cards-row {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.cards-row--3 .metal-slider__card {
    flex: 0 0 calc((100% - 48px) / 3);
    width: calc((100% - 48px) / 3);
}

.cards-row--4 .metal-slider__card {
    flex: 0 0 calc((100% - 72px) / 4);
    width: calc((100% - 72px) / 4);
}

.metal-slider__card-body--center .icon {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin: 0 auto 24px auto;
}

.cards-row .name {
    margin-bottom: 8px;
}

/* split */
.split-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.split-info__media {
    width: 52%;
    border-radius: 16px;
    overflow: hidden;
}

.split-info__image {
    display: block;
    width: 100%;
    height: auto;
}

.split-info__content {
    width: 44%;
}

.split-info__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.split-info__item + .split-info__item {
    margin-top: 16px;
}

.split-info__icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

.split-info__item .text {
    margin: 0;
}

/* button */
.button-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.button-block--center {
    align-items: center;
    text-align: center;
}

.button-block__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 20px 40px;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
    transition: 0.2s ease;
}

.button-block__button--light {
    background: #fff;
    color: #000;
}

.button-block__button--dark {
    background: #000;
    color: #fff;
}

.button-block__text {
    margin: 0;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
}

.white .button-block__text,
.button-block__text--dark {
    color: rgba(0, 0, 0, 0.65);
}

/* universal grid */
.grid {
    display: grid;
    gap: 24px;
}

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

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

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

.apex-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    column-gap: 120px;
    row-gap: 90px;
    justify-content: center;
    max-width: 980px;
    margin: 100px auto 0;
    text-align: center;
    color: #f3f3f3;
    font-size: 18px;
    font-weight: 600;
}

.apex-grid__item-title {
    margin: 0 0 18px;
}

.apex-grid__item-value {
    margin: 0 0 18px;
    color: #ff2b2b;
    font-size: 48px;
    line-height: 1.05;
    font-weight: 700;
}

/* universal overlay card */
.overlay-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
}

.overlay-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay-card__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 40px;
}

.overlay-card .name {
    margin: 0 0 10px;
}

.overlay-card .text {
    margin: 0;
}

.overlay-card__plus {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: rgba(128, 128, 128, 0.55);
    cursor: pointer;
}

.black .overlay-card__plus {
    background: rgba(255, 255, 255, 0.12);
}

/* синяя ссылка */
.link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0 auto;
    color: rgb(22, 119, 255);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
}
.link.link--left {
    width: fit-content;
}

.link__icon {
    display: block;
    flex: 0 0 auto;
}

/* Аксессуары */
.accessories {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.accessories--top {
    align-items: start;
}

.plate {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.plate:hover {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    transform: translateY(-10px);
}

.plate--span-2 {
    grid-column: span 2;
}

.plate--span-3 {
    grid-column: span 3;
}

.plate--span-4 {
    grid-column: span 4;
}

.plate--span-5 {
    grid-column: span 5;
}

.plate--row-2 {
    grid-row: span 2;
}

.plate__kicker {
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: #89898b;
}

.plate__title {
    margin: 0;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.88);
}

.plate__image-wrap {
    margin-top: 16px;
}

.plate__image-wrap--lg {
    margin-top: 0;
}

.plate__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.plate__image--cover {
    object-fit: cover;
}

.plate__name {
    margin: 24px 0 0;
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.88);
}

.plate__text {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    color: #89898b;
}

.plate__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    padding: 15px 24px;
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.88);
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    text-decoration: none;
}

/* feature-split */

.feature-split {
    display: grid;
    grid-template-columns: 65% 35%;
    gap: 24px;
    margin-bottom: 24px;
    align-items: stretch;
}

.feature-split--reverse {
    grid-template-columns: 35% 65%;
}

.feature-split--reverse .feature-split__media {
    order: 2;
}

.feature-split--reverse .feature-split__content {
    order: 1;
}

.feature-split__media,
.feature-split__content {
    border-radius: 16px;
    overflow: hidden;
}

.feature-split__media {
    height: 394px;
}

.feature-split__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-split__content {
    position: relative;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-split .feature-split__content {
    background: #fff;
}

.feature-split--grey .feature-split__content {
    background: #f9fafc;
}

.feature-split--beige .feature-split__content {
    background: #f1eee8;
}

.feature-split--green .feature-split__content {
    background: #ebf5ed;
}

.feature-split--black .feature-split__content {
    background: #252527;
}

.feature-split__title {
    margin: 0;
    font-size: 22px;
    line-height: 26px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.88);
}

.feature-split__text {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.65);
}

.feature-split--black .feature-split__title {
    color: #fff;
}

.feature-split--black .feature-split__text {
    color: rgba(255, 255, 255, 0.65);
}

/* sticky block */
.sticky-block__grid {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 580px);
    justify-content: space-between;
    gap: 48px;
    align-items: start;
}

.sticky-block__left {
    position: relative;
    min-height: 100%;
}

.sticky-block__sticky {
    position: sticky;
    top: 420px;
    max-width: 420px;
}

.sticky-block__title {
    margin: 0;
}

.sticky-block__text {
    max-width: 420px;
    margin-top: 24px;
}

.sticky-block__right {
    display: flex;
    flex-direction: column;
    gap: 72px;
}

.sticky-step {
    max-width: 580px;
}

.sticky-step__media {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    /* background: #ddd; */
}

.sticky-step__video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.sticky-step__label {
    position: absolute;
    left: 24px;
    bottom: 18px;
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    color: #fff;
}

.sticky-step__title {
    margin: 24px 0 12px;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--title-color, #111);
}

.sticky-step__desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--desc-color, #555);
}

/* move */

.move {
    /* background: #f8f9fd; */
    overflow: hidden;
}

.move__viewport {
    overflow: hidden;
    width: 100%;
}

.move__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
    width: max-content;
    will-change: transform;
}

.move-card {
    flex: 0 0 360px;
    width: 360px;
    overflow: hidden;
}

.move-card img {
    border-radius: 24px;
}

.move-card__image-wrap {
    position: relative;
}

.move-card__image {
    display: block;
    width: 100%;
    height: auto;
}

/* specs */

.specs .head__title {
    margin-bottom: 40px;
}

.specs__head {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: end;
    padding-bottom: 48px;
}

.specs__head-spacer {
    min-width: 0;
}

.specs__product {
    min-width: 0;
}

.specs__product-image {
    width: 100%;
}

.specs__product-image picture,
.specs__product-image img {
    display: block;
    width: 100%;
    height: auto;
}

.specs__product-footer {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.specs__product-name {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.88);
}

.specs__buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 14px 28px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.specs__buy:hover {
    opacity: 0.9;
}

.specs__section {
    margin-bottom: 64px;
}

.specs__section--last {
    margin-bottom: 0;
}

.specs__section-title {
    margin: 0 0 24px;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.88);
}

.specs__divider {
    width: 100%;
    height: 1px;
    margin-bottom: 32px;
    background: #d8d8d8;
}

.specs__row {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    row-gap: 0;
    align-items: start;
    padding: 0 0 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid #d8d8d8;
}

.specs__row:last-child {
    margin-bottom: 0;
}

.specs__label {
    min-width: 0;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.88);
}

.specs__value {
    min-width: 0;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.65);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.specs__value p {
    margin: 0 0 14px;
}

.specs__value p:last-child {
    margin-bottom: 0;
}

.specs__head--4,
.specs__row--4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.specs__head--5,
.specs__row--5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.specs__head--4 .specs__head-spacer,
.specs__head--5 .specs__head-spacer {
    grid-column: 1;
}

.specs__row--4 .specs__label,
.specs__row--5 .specs__label {
    grid-column: 1;
}

.specs__row--4 .specs__value,
.specs__row--5 .specs__value,
.specs__head--4 .specs__product,
.specs__head--5 .specs__product {
    min-width: 0;
}

/* specs dark */
.black .specs__product-name,
.black .specs__section-title,
.black .specs__label {
    color: rgba(255, 255, 255, 0.88);
}

.black .specs__value,
.black .specs__value p {
    color: rgba(255, 255, 255, 0.65);
}

.black .specs__divider,
.black .specs__row {
    border-color: rgba(255, 255, 255, 0.14);
}

.black .specs__divider {
    background: rgba(255, 255, 255, 0.14);
}

.black .specs__buy {
    background: #fff;
    color: #000;
}

.cmp13 {
    max-width: 1128px;
    margin: 0 auto;
    color: #000;
}

.cmp13__head {
    margin-bottom: 40px;
}

.cmp13__title {
    margin: 0;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
}

.cmp13__choose,
.cmp13__table-block {
    margin-top: 40px;
}

.cmp13__bar {
    background: #f3f4f7;
    padding: 16px 24px;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
}

.cmp13__choose-grid {
    font-size: 0;
    padding: 32px 24px 0;
}

.cmp13__choose-item {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    padding-right: 24px;
    box-sizing: border-box;
    font-size: 16px;
}

.cmp13__choose-title {
    font-size: 19px;
    line-height: 1.2;
    font-weight: 700;
}

.cmp13__choose-text {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.65);
}

.cmp13__table {
    padding: 0 24px;
}

.cmp13__row {
    font-size: 0;
    border-top: 1px solid #e8e8ec;
}

.cmp13__row--head {
    border-top: 0;
}

.cmp13__cell {
    display: inline-block;
    vertical-align: top;
    padding: 28px 12px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.65);
}

.cmp13__row--head .cmp13__cell {
    font-size: 19px;
    line-height: 1.2;
    font-weight: 700;
    color: #000;
    padding-top: 32px;
    padding-bottom: 32px;
}

.cmp13__cell--name {
    font-weight: 700;
    color: #000;
}

.cmp13__table--3 .cmp13__cell--name {
    width: 18%;
}

.cmp13__table--3 .cmp13__cell:not(.cmp13__cell--name) {
    width: 41%;
}

.cmp13__table--5 .cmp13__cell--name {
    width: 18%;
}

.cmp13__table--5 .cmp13__cell:not(.cmp13__cell--name) {
    width: 20.5%;
}

/* FAQ */
.faq .head__title {
    margin-bottom: 40px;
}

.faq__list {
    border-top: 1px solid #d9d9d9;
}

.faq__item {
    border-bottom: 1px solid #d9d9d9;
}

.faq__item summary {
    list-style: none;
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 32px 0;
    cursor: pointer;
}

.faq__question span:first-child {
    display: block;
    max-width: 864px;
    font-size: 22px;
    line-height: 26px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.88);
}

.faq__icon {
    position: relative;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
}

.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: rgba(0, 0, 0, 0.88);
    border-radius: 999px;
    transform-origin: center;
    transition: transform 0.2s ease;
}

.faq__icon::before {
    transform: translate(-70%, -50%) rotate(45deg);
}

.faq__icon::after {
    transform: translate(-10%, -50%) rotate(-45deg);
}

.faq__item[open] .faq__icon::before {
    transform: translate(-70%, -50%) rotate(-45deg);
}

.faq__item[open] .faq__icon::after {
    transform: translate(-10%, -50%) rotate(45deg);
}

.faq__answer {
    max-width: 864px;
    padding: 0 0 32px;
}

.faq__answer p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.65);
}

.faq__answer p:last-child {
    margin-bottom: 0;
}

/* FAQ dark */
.black .faq__list {
    border-top-color: rgba(255, 255, 255, 0.14);
}

.black .faq__item {
    border-bottom-color: rgba(255, 255, 255, 0.14);
}

.black .faq__question span:first-child {
    color: rgba(255, 255, 255, 0.88);
}

.black .faq__icon::before,
.black .faq__icon::after {
    background: rgba(255, 255, 255, 0.88);
}

.black .faq__answer p,
.black .faq__answer li {
    color: rgba(255, 255, 255, 0.65);
}

.black .faq__answer a {
    color: rgba(255, 255, 255, 0.88);
}

.black .faq__answer strong {
    color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 1024px) {
    .metal-slider__card,
    .metal-slider__card.metal-big-card {
        flex: 0 0 780px;
    }
}

@media (max-width: 768px) {
    .w560 {
        max-width: 100%;
        width: 340px !important;
        flex: none !important;
    }

    .h-900 {
        height: 200px !important;
    }

    .break__word {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* заголовок */
    .head {
        max-width: 100%;
        margin-bottom: 24px;
    }

    .head__title {
        font-size: 32px !important;
        padding: 0 20px;
    }

    .guide-modal__section .head__title,
    .media-grid__center .head__title {
        overflow-wrap: break-word;
        word-break: break-word;
        padding: 0 !important;
    }

    .head__subtitle {
        margin-top: 16px;
    }

    /* showcase */
    .showcase {
        min-height: 80vh;
        padding: 32px 16px 40px;
    }

    .showcase__title {
        font-size: 34px;
    }

    .showcase__subtitle {
        margin-top: 10px;
        font-size: 16px;
    }

    .showcase__video-wrap {
        width: 170px;
        margin-top: 20px;
    }

    .showcase__play {
        width: 52px;
        height: 52px;
    }

    .showcase__play::before {
        border-top-width: 8px;
        border-bottom-width: 8px;
        border-left-width: 13px;
    }

    .video-modal {
        padding: 12px;
    }

    .video-modal__player {
        border-radius: 12px;
    }

    .video-modal__close {
        top: -40px;
        width: 34px;
        height: 34px;
        font-size: 24px;
    }

    /* banner text */
    .banner-text__bg img {
        height: 560px;
    }

    .banner-text__content {
        align-items: flex-start;
        padding-top: 40px;
    }

    .banner-text__title {
        max-width: 280px;
        font-size: 48px;
        line-height: 1.08;
    }

    .tabs-media__media-item.blue-card-style.is-active {
        display: block !important;
    }
    .tabs-media__media-item.blue-card-style picture {
        margin-bottom: 20px;
        display: block;
    }

    .guide {
        padding: 56px 0;
    }

    .guide-modal {
        padding: 12px;
    }

    .guide-modal__dialog {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        padding: 44px 18px 24px;
        border-radius: 20px;
    }

    .guide-modal__close {
        top: 12px;
        right: 12px;
        width: 38px;
        height: 38px;
        font-size: 24px;
    }

    .guide-modal__section {
        margin-bottom: 56px;
    }

    .guide-modal__title {
        margin-bottom: 24px;
        font-size: 34px;
    }

    .guide-modal__compare {
        grid-template-columns: 1fr;
    }

    .guide-modal__image {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .guide-modal__panel {
        padding: 18px;
    }

    .guide-modal__button {
        padding: 20px 18px;
        border-radius: 18px;
    }

    .guide-modal__button-note {
        font-size: 13px;
    }

    .guide-modal__split,
    .guide-modal__split--reverse {
        flex-direction: column;
        gap: 24px;
    }

    .guide-modal__split-media,
    .guide-modal__split-content {
        width: 100%;
    }

    .compare-modal {
        padding: 24px 16px;
        border-radius: 16px;
    }

    .compare-modal__table {
        min-width: 760px;
    }

    .compare-modal__head,
    .compare-modal__row {
        grid-template-columns: 180px 1fr 1fr;
    }

    .compare-modal__label {
        padding: 24px 16px 24px 0;
        font-size: 18px;
        line-height: 22px;
    }

    .compare-modal__product,
    .compare-modal__value {
        padding: 24px 16px;
    }

    .compare-modal__product-name {
        font-size: 18px;
        line-height: 22px;
    }

    .compare-modal__title {
        font-size: 14px;
        line-height: 18px;
        font-weight: 600;
    }

    .compare-modal__text,
    .compare-modal__item {
        font-size: 12px;
        line-height: 16px;
    }

    /* slider */
    .metal-slider__title {
        font-size: 32px;
        line-height: 36px;
    }

    .metal-slider__subtitle {
        margin-top: 16px;
        font-size: 14px;
        line-height: 18px;
    }

    .metal-slider__track {
        margin-left: 24px;
        padding-right: 24px;
        gap: 16px;
        justify-content: flex-start;
    }

    .metal-slider__card,
    .metal-slider__card.metal-big-card {
        flex-basis: calc(100vw - 48px);
    }

    /* .metal-slider__card-image {
        height: 250px;
    }

    .metal-slider--overlay .metal-slider__card-image {
        height: auto !important;
    } */

    .metal-slider__card--image-only:not(.is-active-mobile) {
        opacity: 0.5;
    }

    .metal-slider__footer {
        margin-top: 24px;
    }

    .metal-slider__nav {
        gap: 12px;
    }

    .metal-tabs-slider__tabs {
        width: 100%;
        margin-bottom: 16px;
    }

    .metal-tabs-slider__tab {
        padding: 15px 20px;
    }

    /* story video */
    .story-video__inner {
        padding: 0 24px;
    }

    .story-video__line {
        left: 24px;
        right: 24px;
        font-size: 40px;
        line-height: 44px;
    }

    /* media-grid */
    .media-grid,
    .media-grid.cols-40-60,
    .media-grid.cols-60-40 {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .media-grid__body {
        padding-top: 20px;
    }

    /* tabs */
    .tabs-media {
        flex-direction: column;
        gap: 24px;
    }

    .tabs-media__media,
    .tabs-media__tabs {
        width: 100%;
        flex: 0 0 auto;
    }

    .tabs-media__tabs {
        border-left: 0;
    }

    .tabs-media__tab {
        padding: 18px 0;
        border-left: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
        opacity: 0.4;
    }

    .tabs-media__tab.is-active {
        border-left-color: transparent;
        background: transparent;
        opacity: 1;
    }

    .tabs-media--materials {
        margin-top: 24px;
    }

    .tabs-media--materials .tabs-media__tabs {
        justify-content: flex-start;
        gap: 8px;
        margin: 0;
    }

    .tabs-media--materials .tabs-media__tab {
        flex: 0 0 100px;
        min-width: 100px;
        padding: 8px;
    }

    .tabs-media--materials .tabs-media__content {
        margin-top: 24px;
    }

    .tabs-media__links {
        gap: 32px;
        justify-content: start;
        /* align-items: flex-end; */
    }

    .tabs-media__link {
        padding: 10px 0;
        font-size: 15px;
        line-height: 19px;
    }

    .js-diy-scroll-block .media-grid {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .js-diy-scroll-block .media-grid__center,
    .js-diy-scroll-block .media-grid__item {
        width: 100%;
    }

    .js-diy-scroll-block .media-grid__image-wrap img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* cards */
    .cards-row {
        flex-direction: column;
        gap: 24px;
    }

    .cards-row--3 .metal-slider__card,
    .cards-row--4 .metal-slider__card {
        flex: 0 0 auto;
        width: 100%;
    }

    /* split */
    .split-info {
        flex-direction: column;
        gap: 32px;
    }

    .split-info__media,
    .split-info__content {
        width: 100%;
    }

    /* button */
    .button-block__button {
        min-width: 200px;
        min-height: 72px;
        padding: 16px 28px;
        font-size: 20px;
    }

    /*  universal grid  */
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }

    .apex-grid {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    .apex-grid__item-title {
        margin-bottom: 10px;
    }

    .apex-grid__item-value {
        margin-bottom: 10px;
        font-size: 40px;
    }

    .overlay-card {
        min-height: 420px;
    }

    .overlay-card__content {
        padding: 24px 24px 80px;
    }

    .overlay-card__plus {
        right: 16px;
        bottom: 16px;
        width: 48px;
        height: 48px;
        font-size: 36px;
    }

    /* Аксессуары */
    .accessories {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .guide-modal__section .accessories {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .plate--span-5,
    .plate--span-2 {
        grid-column: span 1;
        grid-row: auto;
    }

    .plate--span-5 {
        grid-column: 1 / -1;
    }

    .plate--span-2,
    .plate--span-3,
    .plate--span-4,
    .plate--span-5,
    .plate--span-6,
    .plate--span-12,
    .plate--row-2 {
        grid-column: auto;
        grid-row: auto;
    }

    .plate__name {
        font-size: 22px;
        line-height: 26px;
    }

    /* feature-split */

    .feature-split,
    .feature-split--reverse {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .feature-split__media {
        height: auto;
        border-radius: 16px 16px 0 0;
    }

    .feature-split__image {
        height: auto;
    }

    .feature-split__content {
        padding: 32px 24px;
        border-radius: 0 0 16px 16px;
    }

    .feature-split--reverse .feature-split__media,
    .feature-split--reverse .feature-split__content {
        order: initial;
    }

    .feature-split__title {
        font-size: 18px;
        line-height: 22px;
    }

    /* sticky-block */

    .sticky-block__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sticky-block__sticky {
        position: static;
        max-width: 100%;
        padding-top: 0;
        padding-bottom: 0;
    }

    .sticky-block__text {
        max-width: 100%;
        margin-top: 16px;
    }

    .sticky-block__right {
        gap: 40px;
    }

    .sticky-step {
        max-width: 100%;
    }

    .sticky-step__media {
        border-radius: 16px;
    }

    .sticky-step__label {
        left: 16px;
        bottom: 14px;
        font-size: 16px;
        line-height: 20px;
    }

    .sticky-step__title {
        margin: 20px 0 10px;
        font-size: 22px;
        line-height: 26px;
    }

    .sticky-step__desc {
        font-size: 14px;
        line-height: 18px;
    }

    /* move */
    .move-card {
        flex: 0 0 260px;
        width: 260px;
        border-radius: 16px;
    }

    /* specs */
    .specs {
        overflow: hidden;
    }

    .specs .container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .specs__head {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        padding-bottom: 36px;
    }

    .specs__head-spacer {
        display: none;
    }

    .specs .head__title {
        margin-bottom: 28px;
        font-size: 30px;
    }

    .specs__product-footer {
        flex-direction: column;
    }

    .specs__product-name {
        font-size: 16px;
    }

    .specs__buy {
        min-height: 50px;
        font-size: 12px;
    }

    .specs__section-title {
        font-size: 16px;
    }

    .specs__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 16px;
        padding-bottom: 24px;
        margin-bottom: 24px;
    }

    .specs__divider {
        margin-bottom: 24px;
    }

    .specs__label {
        grid-column: 1 / -1;
        font-size: 14px;
        line-height: 1.3;
    }

    .specs__head--4,
    .specs__row--4 {
        width: 820px;
        grid-template-columns: 164px repeat(3, 164px);
    }

    .specs__head--5,
    .specs__row--5 {
        width: 820px;
        grid-template-columns: 164px repeat(4, 164px);
    }

    .specs__head--4 .specs__head-spacer,
    .specs__head--5 .specs__head-spacer {
        display: block;
    }

    .specs__row--4 .specs__label,
    .specs__row--5 .specs__label {
        grid-column: auto;
    }

    /* Фиксируем минимальную ширину таблицы, чтобы она не схлопывалась */
    .cmp13__table {
        min-width: 800px;
        white-space: nowrap;
    }

    .cmp13__title {
        font-size: 32px;
        line-height: 1.12;
        padding: 0 24px;
    }

    .cmp13__bar {
        padding: 14px 16px;
        font-size: 16px;
    }

    .cmp13__choose-grid,
    .cmp13__table {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cmp13__choose-item {
        width: 50%;
        padding-right: 16px;
        margin-bottom: 24px;
    }

    /* .cmp13__row--head {
    } */
    .cmp13__row--head .cmp13__cell {
        font-size: 16px;
        padding: 12px 0;
    }

    .cmp13__table-block {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cmp13__scroll-inner {
        width: max-content;
    }

    /* Задаём минимальную ширину всей таблицы и не даём ей схлопнуться */
    .cmp13__table {
        min-width: 800px; /* подберите, чтобы все столбцы поместились */
        width: max-content; /* или удалите, если не нужно растягивать больше контента */
        flex-wrap: nowrap; /* если используется flex */
    }

    /* Ячейкам запрещаем сжиматься и выставляем минимальную ширину */
    .cmp13__cell {
        flex-shrink: 0;
        word-break: break-word; /* переносить длинные слова */
        overflow-wrap: break-word;
        white-space: normal; /* разрешить перенос строк */
    }

    /* Заголовок (бар) тоже должен тянуться вместе с таблицей */
    .cmp13__bar {
        padding: 14px 16px;
        font-size: 16px;
        white-space: nowrap; /* запрещаем перенос, если не нужно */
        /* width, min-width и flex-свойства не требуются – растянется автоматически */
    }

    .cmp13__cell {
        padding: 10px 0;
    }

    .cmp13__cell,
    .cmp13__table--3 .cmp13__cell,
    .cmp13__table--5 .cmp13__cell,
    .cmp13__table--3 .cmp13__cell--name,
    .cmp13__table--5 .cmp13__cell--name,
    .cmp13__table--3 .cmp13__cell:not(.cmp13__cell--name),
    .cmp13__table--5 .cmp13__cell:not(.cmp13__cell--name) {
        min-width: 100px;
    }

    /* .cmp13__cell,
    .cmp13__table--3 .cmp13__cell,
    .cmp13__table--5 .cmp13__cell,
    .cmp13__table--3 .cmp13__cell--name,
    .cmp13__table--5 .cmp13__cell--name,
    .cmp13__table--3 .cmp13__cell:not(.cmp13__cell--name),
    .cmp13__table--5 .cmp13__cell:not(.cmp13__cell--name) {
        width: 100%;
    }



    .cmp13__cell--name {
        padding-top: 18px;
        padding-bottom: 8px;
    } */

    /* faq */
    .faq .head__title {
        margin-bottom: 32px;
    }

    .faq__question {
        gap: 20px;
        padding: 24px 0;
    }

    .faq__question span:first-child {
        max-width: none;
        font-size: 18px;
        line-height: 22px;
    }

    .faq__icon {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
    }

    .faq__icon::before,
    .faq__icon::after {
        width: 14px;
    }

    .faq__answer {
        max-width: 100%;
        padding-bottom: 24px;
    }
}

@media (max-width: 480px) {
    /* showcase */
    .showcase {
        min-height: 70vh;
        padding: 32px 16px;
    }

    .head__title {
        font-size: 28px !important;
    }
}
@media (max-width: 768px) {
    #guide_modal__image_mobile {
        aspect-ratio: 0;
    }
    #picture_mobile_height {
        height: auto !important;
    }
    .py-80 {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .head__title.text-left {
        padding-left: 0px;
    }
	
}
#white_text {
    color: #ffffff;
}
#black_text {
    color: #000;
}
#back_white {
    background-color: #ffffff;
}
#background_gray {
    background-color: #141414;
}







/*Лендинг xTool Dual Station для WonderPress начало */

.media-grid__center_mobile{
	display: none;
}
.media_grid_margin{
	margin-bottom: 60px;
}
.background_gray{
	background-color: #f8f8fb;
}
.background_gray .head__title{
	margin-bottom: 40px;
}
@media (max-width: 768px) {
	.media-grid__center_mobile{
		display: block;
	}
	.media-grid__center_desctop{
		display: none;
	}
}

/*Лендинг xTool Dual Station для WonderPress конец */

/*Лендинг xTool Craft Oven Module for WonderPress начало*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');

#xtool-dtf-hover-block,
#xtool-dtf-hover-block * {
    box-sizing: border-box;
}

#xtool-dtf-hover-block {
    --xtool-title: #111111;
    --xtool-mobile-bg: #F8F9FD;

    width: 100%;
    background: #FFFFFF;
    color: var(--xtool-title);
    font-family: 'Montserrat', Arial, sans-serif;
}

/* Original xTool section has 90px before/after on desktop */
#xtool-dtf-hover-block::before,
#xtool-dtf-hover-block::after {
    content: "";
    display: block;
    height: 90px;
}

#xtool-dtf-hover-block h2,
#xtool-dtf-hover-block p {
    margin: 0;
}

/* ---------- TITLE ---------- */

.xtool-dtf-title-wrap {
    width: 980px;
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 40px;
}

.xtool-dtf-title {
    width: 744px;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: 40px;
    line-height: 44px;
    font-weight: 700;
    letter-spacing: 0;
}

/* ---------- DESKTOP CARDS ---------- */

.xtool-dtf-viewport {
    width: 980px;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.xtool-dtf-cards {
    display: flex;
    width: 100%;
    height: 360px;
    align-items: center;
    justify-content: center;
    gap: 24px;

    transition: all 1000ms ease-in-out;
}

.xtool-dtf-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;

    transition:
        flex-basis 1000ms ease-in-out,
        flex-grow 1000ms ease-in-out,
        width 1000ms ease-in-out;
}

/* This is the exact original hover expansion */
@media (min-width: 1025px) {
    .xtool-dtf-card:hover {
        flex: 0 0 640px;
        flex-basis: 640px;
    }
}

.xtool-dtf-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.xtool-dtf-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 1000ms ease-in-out;
}

/* ---------- DESKTOP GRADIENT + TEXT ---------- */

.xtool-dtf-overlay {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;

    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.60) 100%
    );
}

.xtool-dtf-overlay-inner {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    width: 100%;
    padding: 0 16px 24px;
}

.xtool-dtf-number {
    margin-bottom: 8px;
    color: #FFFFFF;
    font-size: 40px;
    line-height: 44px;
    font-weight: 700;
}

.xtool-dtf-card-title {
    color: #FFFFFF;
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
}

.xtool-dtf-description {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;

    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;

    opacity: 0;

    transition:
        opacity 1000ms ease-in-out,
        max-height 1000ms ease-in-out,
        margin-top 1000ms ease-in-out;
}

@media (min-width: 1025px) {
    .xtool-dtf-card:hover .xtool-dtf-description {
        max-height: 200px;
        margin-top: 8px;
        opacity: 1;
    }
}

/* ---------- MOBILE HEADER ---------- */

.xtool-dtf-mobile-head {
    display: none;
}

/* =========================================================
   MOBILE / TABLET
   Original breakpoint: 1024px
   ========================================================= */

@media (max-width: 1024px) {

    #xtool-dtf-hover-block::before,
    #xtool-dtf-hover-block::after {
        height: 60px;
    }

    .xtool-dtf-title-wrap {
        width: 100%;
        padding-bottom: 32px;
    }

    .xtool-dtf-title {
        width: 100%;
        padding: 0 24px;

        font-size: 32px;
        line-height: 36px;
    }

    .xtool-dtf-viewport {
        width: 100%;
        padding: 0 24px;
        overflow: visible;
    }

    .xtool-dtf-cards {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        width: 100%;
        height: auto;
        gap: 4px;
    }

    .xtool-dtf-card {
        flex: none;
        width: 100%;
        height: auto;
        padding: 16px;
        background: var(--xtool-mobile-bg);
        border-radius: 0;
    }

    .xtool-dtf-card:first-child {
        border-radius: 16px 16px 0 0;
    }

    .xtool-dtf-card:last-child {
        border-radius: 0 0 16px 16px;
    }

    .xtool-dtf-mobile-head {
        position: relative;
        display: flex;
        flex-direction: column;
        padding-right: 40px;
        cursor: pointer;
        user-select: none;
    }

    .xtool-dtf-mobile-number {
        margin-bottom: 8px;

        color: var(--xtool-title);
        font-size: 28px;
        line-height: 32px;
        font-weight: 700;
    }

    .xtool-dtf-mobile-title {
        color: var(--xtool-title);
        font-size: 18px;
        line-height: 22px;
        font-weight: 600;
    }

    .xtool-dtf-arrow {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 24px;
        margin: auto 0;

        color: var(--xtool-title);
        transition: transform 500ms ease-in-out;
    }

    .xtool-dtf-card.is-open .xtool-dtf-arrow {
        transform: rotate(180deg);
    }

    .xtool-dtf-media {
        position: relative;
        inset: auto;

        width: 100%;
        height: auto;
        max-height: 0;
        margin-top: 0;

        overflow: hidden;

        transition:
            max-height 500ms ease-in-out,
            margin-top 500ms ease-in-out;
    }

    .xtool-dtf-card.is-open .xtool-dtf-media {
        max-height: 1000px;
        margin-top: 16px;
    }

    .xtool-dtf-media img {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        object-fit: cover;
        border-radius: 16px;
    }

    .xtool-dtf-overlay {
        display: none;
    }

    .xtool-dtf-mobile-description {
        display: block;
        margin: 16px 0 8px;

        color: #555960;
        font-size: 14px;
        line-height: 18px;
        font-weight: 600;
    }
}

/* On desktop the mobile description/header must never appear */
@media (min-width: 1025px) {
    .xtool-dtf-mobile-description {
        display: none;
    }
}

/*
xTool — Professional Curing with Top Efficiency
Standalone responsive block recreated from the supplied xTool markup.

Desktop:
- content width: 980px
- image: 540px
- text column: 392px
- gap: 48px
- image radius: 16px

Mobile/tablet:
- 24px side padding
- stacked vertically
- image full width
- title: 18/22
- metrics: 24/28
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');

#xtool-curing-efficiency,
#xtool-curing-efficiency * {
    box-sizing: border-box;
}

#xtool-curing-efficiency {
    width: 100%;
    margin: 0;
    padding: 118px 24px;
    background: #ffffff;
    color: #111111;
    font-family: 'Montserrat', Arial, sans-serif;
}

#xtool-curing-efficiency img {
    display: block;
    max-width: 100%;
}

.xtool-curing-inner {
    width: 980px;
    max-width: 100%;
    margin: 0 auto;
}

.xtool-curing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

/* ---------- IMAGE ---------- */

.xtool-curing-media {
    position: relative;
    flex: 0 0 540px;
    width: 540px;
    max-width: 540px;
    overflow: hidden;
    border-radius: 16px;
}

.xtool-curing-media picture {
    display: block;
    width: 100%;
}

.xtool-curing-media img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
}

/* ---------- CONTENT ---------- */

.xtool-curing-content {
    display: flex;
    align-items: center;
    flex: 0 0 392px;
    width: 392px;
    max-width: 392px;
}

.xtool-curing-title {
    margin: 0;
    color: #111111;
    font-size: 22px;
    line-height: 26px;
    font-weight: 700;
    letter-spacing: 0;
}

.xtool-curing-metrics {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    width: 360px;
    max-width: 100%;
    margin-top: 40px;
    gap: 21px;
}

.xtool-curing-metrics-row {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    gap: 24px;
}

.xtool-curing-metric {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    width: 168px;
    min-width: 0;
    word-break: break-word;
}

.xtool-curing-value {
    align-self: stretch;
    margin-top: 4px;

    color: #111111;
    font-size: 32px;
    line-height: 36px;
    font-weight: 700;
}

.xtool-curing-label {
    align-self: stretch;
    margin-top: 4px;

    color: #4f5358;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
}

/* =========================================================
   TABLET / MOBILE
   Mirrors xTool's "mobile" classes
   ========================================================= */

@media (max-width: 1023px) {

    #xtool-curing-efficiency {
        padding: 60px 24px;
    }

    .xtool-curing-inner {
        width: 100%;
    }

    .xtool-curing-row {
        display: block;
    }

    .xtool-curing-media {
        width: 100%;
        max-width: none;
        margin-bottom: 24px;
        border-radius: 16px;
    }

    .xtool-curing-media img {
        width: 100%;
        height: auto;
    }

    .xtool-curing-content {
        display: block;
        width: 100%;
        max-width: none;
    }

    .xtool-curing-title {
        font-size: 18px;
        line-height: 22px;
    }

    .xtool-curing-metrics {
        width: 100%;
        margin-top: 32px;
        gap: 24px;
    }

    .xtool-curing-metrics-row {
        width: 100%;
        gap: 16px;
    }

    .xtool-curing-metric {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .xtool-curing-value {
        font-size: 24px;
        line-height: 28px;
    }
}

/* Narrow phones: keep both stats side-by-side exactly like xTool */
@media (max-width: 480px) {
    #xtool-curing-efficiency {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .xtool-curing-value {
        white-space: nowrap;
    }
}

/*Лендинг xTool Craft Oven Module for WonderPress конец*/