/* Продукты — page-specific styles. Shared layout primitives (container,
   page-lines, corner-mark, section-boxed, header, footer, eyebrow) live in
   style.css; component basics (buttons, badges) in components.css. */

/* ===================== Hero ===================== */
.products-hero { padding: 56px 0 0; }
.products-hero .container { padding: 0 0 var(--space-40) var(--space-40); }
.products-hero__title { font: var(--text-h1-desktop); color: var(--color-grey-20); max-width: 800px; }
.products-hero__body { font: var(--text-large-desktop); color: var(--color-grey-20); margin-top: var(--space-16); max-width: 800px; }
.products-hero .tabs { margin-top: var(--space-24); }

/* ===================== Product detail sections ===================== */
.product-detail.section-boxed > .container { padding-block: 0; }

.product-detail__head {
    border-bottom: 1px solid var(--color-card-border);
    padding: var(--space-40);
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}
.product-detail__eyebrow { display: flex; gap: var(--space-8); font: var(--text-large-desktop); color: var(--color-blue-80); }
.product-detail__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-40); flex-wrap: wrap; }
.product-detail__intro { max-width: 720px; display: flex; flex-direction: column; gap: var(--space-20); }
.product-detail__name-row { display: flex; align-items: center; gap: var(--space-12); }
.product-detail__icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; }
.product-detail__icon svg { width: 100%; height: 100%; }
.product-detail__name { font: var(--text-h2-desktop); color: var(--color-blue-80); }
.product-detail__desc { font: var(--text-large-desktop); color: var(--color-grey-20); }
.product-detail__desc strong { font-weight: var(--font-weight-bold); }
.product-detail__actions { display: flex; gap: var(--space-20); flex-shrink: 0; }

.product-detail__stats { display: flex; border-bottom: 1px solid var(--color-card-border); }
.product-stat { flex: 1; padding: var(--space-24) var(--space-24); border-right: 1px solid var(--color-card-border); }
.product-stat:first-child { padding-left: var(--space-40); }
.product-stat:last-child { padding-right: var(--space-40); border-right: none; }
.product-stat__value { font: var(--text-h2-desktop); color: var(--color-blue-80); }
.product-stat__value-text { font: var(--text-h5-desktop); }
.product-stat__label { font: var(--text-large-desktop); color: var(--color-grey-40); margin-top: var(--space-8); }

.product-detail__body {
    --row-pad-v: 20px;
    --row-icon: 56px;
    --row-border: 1px;
    --desc-line-h: 22px;
    --desc-lines: 4;
    --desc-gap: var(--space-12);
    --row-collapsed-h: calc(var(--row-pad-v) * 2 + var(--row-icon) + var(--row-border));
    --row-expanded-h: calc(var(--row-collapsed-h) + var(--desc-gap) + var(--desc-line-h) * var(--desc-lines));
    height: calc(var(--row-collapsed-h) * 3 + var(--row-expanded-h));
    display: flex;
}
.product-detail__features { flex: 0 0 50%; display: flex; flex-direction: column; min-width: 0; }

.feature-row {
    all: unset;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-card-border);
    padding: var(--space-20) var(--space-40);
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-12);
    align-items: center;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--main-font);
    transition: background .15s ease;
}
.feature-row:last-child { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
    .feature-row:hover { background: var(--color-grey-96-transparent-80); }
    .feature-row:active { background: var(--color-grey-92); }
}
.feature-row:focus-visible {
    outline: 2px solid var(--color-blue-80);
    outline-offset: -2px;
}
.feature-row__icon {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: 6px;
    background: var(--color-grey-96);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-46);
    transition: background .2s ease, color .2s ease;
}
.feature-row__icon svg,
.feature-row__icon img { width: 24px; height: 24px; }
.feature-row.is-active .feature-row__icon { background: var(--color-info-bg); color: var(--color-blue-80); }
.feature-row__title { flex: 1 1 0; min-width: 0; font: var(--text-h6-desktop); color: var(--color-grey-20); transition: color .15s ease; }
.feature-row.is-active .feature-row__title { color: var(--color-blue-80); }
.feature-row__chevron { display: none; width: 20px; height: 20px; flex-shrink: 0; color: var(--color-grey-46); transition: transform .2s ease; }
.feature-row.is-active .feature-row__chevron { transform: rotate(180deg); }
.feature-row__desc {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
    font: var(--text-large-desktop);
    color: var(--color-grey-40);
    padding-left: 68px;
    flex-basis: 100%;
    text-align: left;
    transition: max-height .35s ease-out, opacity .35s ease-out, margin-top .35s ease-out;
}
.feature-row.is-active .feature-row__desc {
    max-height: calc(var(--desc-line-h) * var(--desc-lines));
    opacity: 1;
    margin-top: var(--desc-gap);
}
.feature-row__media { display: none; }

.product-detail__media {
    flex: 0 0 50%;
    min-width: 0;
    padding: var(--space-8);
    border-left: 1px solid var(--color-card-border);
    align-self: stretch;
}
.product-detail__media-inner {
    position: relative;
    height: 100%;
    min-height: 320px;
    background: var(--color-grey-96);
    border: 1px solid var(--color-card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-52);
    font: var(--text-small-desktop);
    overflow: hidden;
    text-align: center;
}
.product-detail__media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.product-detail__dots { position: absolute; bottom: 16px; right: 16px; display: flex; align-items: center; gap: var(--space-4); z-index: 1; }
.dot { width: 6px; height: 6px; border-radius: 999px; background: #c6c6c6; transition: width .2s ease, background .2s ease; }
.dot--active { width: 32px; background: var(--color-blue-80); }

.product-detail__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--color-card-border);
}
.product-detail__progress-bar {
    width: 100%;
    height: 100%;
    background: var(--color-blue-80);
    transform: scaleX(0);
    transform-origin: left;
}

.phone-mockup { display: flex; gap: var(--space-20); align-items: center; justify-content: center; }
.phone-mockup__frame {
    width: 150px;
    aspect-ratio: 9 / 19;
    border: 6px solid var(--color-grey-20);
    border-radius: 24px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-52);
    font: var(--text-xs-desktop);
    text-align: center;
    padding: var(--space-8);
}
.phone-mockup__frame:last-child { margin-top: var(--space-32); }

/* ===================== Contact CTA (dark, bridges straight into the footer) ===================== */
.contact-cta { background: var(--color-text-black); position: relative; }
@media (min-width: 1200px) {
    .contact-cta { height: 400px; }
}
.contact-cta > .container {
    padding: 80px var(--space-40) 100px;
    text-align: center;
}
.contact-cta__eyebrow { font: var(--text-h6-desktop); color: var(--color-blue-120); }
.contact-cta__title { font: var(--text-h1-desktop); color: #fff; margin-top: var(--space-32); }
.contact-cta__title .is-accent { color: var(--color-blue-120); }
.contact-cta__body {
    font: var(--text-large-desktop);
    color: #fff;
    margin-top: var(--space-20);
    max-width: 490px;
    margin-inline: auto;
}
.contact-cta__actions { margin-top: var(--space-40); }
.contact-cta .button-white { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ===================== Reduced motion ===================== */
@media (prefers-reduced-motion: reduce) {
    .feature-row,
    .feature-row__icon,
    .feature-row__title,
    .feature-row__desc,
    .dot {
        transition-duration: 0ms !important;
    }
}

/* ===================== Responsive — Продукты (мобайл ≤767 / планшет 768–1199) ===================== */

@media (max-width: 1199px) {
    /* ---------- Hero ---------- */
    .products-hero .container { padding: 0 0 var(--space-40) var(--container-gutter); }

    /* ---------- Product detail: голова секции ---------- */
    .product-detail__head { padding: var(--container-gutter); }
    .product-detail__top { flex-direction: column; align-items: stretch; gap: var(--space-20); }
    .product-detail__intro { max-width: none; }
    .product-detail__actions { flex-wrap: wrap; }

    /* ---------- Статистика: 2 колонки, не 4 ---------- */
    .product-stat {
        border-right: none;
        padding: var(--space-16) var(--container-gutter);
    }
    .product-stat__value { overflow-wrap: break-word; }
    .product-stat:first-child,
    .product-stat:last-child { padding-inline: var(--container-gutter); }

    /* ---------- Аккордеон: картинка переезжает внутрь каждого пункта ---------- */
    .product-detail__body { height: auto; flex-direction: column; --desc-lines: 8; }
    .product-detail__features { flex: none; width: 100%; }
    .feature-row { padding: var(--space-16) var(--container-gutter); }
    .feature-row__chevron { display: block; }
    .feature-row__desc { padding-left: 0; }
    .product-detail__media { display: none; }
    .feature-row__media {
        position: relative;
        margin-top: var(--space-16);
        aspect-ratio: 1 / 1;
        background: var(--color-grey-96);
        border: 1px solid var(--color-card-border);
        overflow: hidden;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--color-grey-52);
        font: var(--text-small-desktop);
        padding: var(--space-16);
    }
    .feature-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .feature-row.is-active .feature-row__media { display: none; }

    /* ---------- Тёмный CTA перед подвалом ---------- */
    .contact-cta > .container { padding-inline: var(--container-gutter); }

    /* ---------- Уголки-плюсики: один вложенный акцент вместо четырёх враспор ---------- */
    .section-boxed .corner-mark--tr,
    .section-boxed .corner-mark--bl,
    .section-boxed .corner-mark--br { display: none; }
    .section-boxed .corner-mark--tl { --corner-mark-color: var(--color-blue-80); }
}

@media (max-width: 767px) {
    .section-boxed .corner-mark--tl { left: 6px; }

    /* ---------- Хиро: верхний паддинг как на странице FAQ ---------- */
    .products-hero { padding-top: var(--space-24); }

    /* ---------- Типографика: мобильная шкала ---------- */
    .products-hero__title { font: var(--text-h1-mobile); }
    .products-hero__body { font: var(--text-large-mobile); margin-top: var(--space-12); }
    .product-detail__eyebrow { font: var(--text-large-mobile); }
    .product-detail__name { font: var(--text-h2-mobile); }
    .product-detail__desc { font: var(--text-large-mobile); }
    .product-stat__value { font: var(--text-h2-mobile); }
    .product-stat__value-text { font: var(--text-h5-mobile); }
    .product-stat__label { font: var(--text-large-mobile); }
    .feature-row__title { font: var(--text-h6-mobile); }
    .feature-row__desc { font: var(--text-large-mobile); }
    .feature-row__icon { width: 48px; height: 48px; }
    .feature-row__icon svg,
    .feature-row__icon img { width: 24px; height: 24px; }
    .contact-cta__eyebrow { font: var(--text-h6-mobile); }
    .contact-cta__title { font: var(--text-h1-mobile); }
    .contact-cta__body { font: var(--text-large-mobile); }
}

@media (min-width: 601px) and (max-width: 1198px) {
    .feature-row__media { width: 25%; }
}

@media (max-width: 600px) {
    .feature-row__media { width: 100%; }
    .feature-row__media .zoom-trigger { display: none; }
}

@media (max-width: 480px) {
    .button-large { width: 100%; }
    .button-large { padding: 11px 20px; height: auto; }
}