/* Start:/local/templates/gardista/css/home.css?179320670662988*/
/* Новая главная — концепт в Figma (Desktop 1920 — 170:74, Tablet 768 — 124:74, Mobile 375 — 127:74) */

:root {
    --sand: #f6f2ec;
    --sand-line: #ebe3d6;
    --ink-soft: #444;
}

/* Общие элементы блоков */

.section {
    padding-block: 64px;
}

.section--sand {
    background: var(--sand);
}

.section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px 40px;
    margin-bottom: 32px;
}

.section__head--end {
    align-items: flex-end;
}

.section__title {
    max-width: 960px;
    margin: 0;
    color: var(--navy);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.section__lead {
    max-width: 760px;
    margin-top: 12px;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.5;
}

.section__lead a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (min-width: 768px) {
    .section {
        padding-block: 80px;
    }

    .section__head {
        margin-bottom: 40px;
    }

    .section__title {
        font-size: 2.5rem;
    }

    .section__lead {
        margin-top: 16px;
        font-size: 1.125rem;
    }
}

@media (min-width: 1280px) {
    .section {
        padding-block: 120px;
    }

    .section__head {
        margin-bottom: 56px;
    }

    .section__title {
        font-size: 3.5rem;
        line-height: 1.06;
        letter-spacing: -0.025em;
    }

    .section__lead {
        font-size: 1.1875rem;
    }
}

.button--large {
    min-height: 56px;
    padding-inline: 28px;
}

@media (min-width: 1280px) {
    .button--large {
        min-height: 60px;
    }
}

/* «Каталог штор» у задач — крупно, по правке Татьяны («сделать выше, больше») */
.link-arrow--large {
    gap: 12px;
    font-size: 1.375rem;
    font-weight: 700;
}

@media (min-width: 1280px) {
    .link-arrow--large {
        padding-top: 8px;
        font-size: 2rem;
        letter-spacing: -0.01em;
    }
}

.badge--small {
    padding: 4px 10px;
    font-size: 0.75rem;
}

.stars {
    display: inline-flex;
    gap: 2px;
    color: var(--gold);
}

.round-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--navy);
    border-radius: 999px;
    background: none;
    color: var(--navy);
    transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out);
}

.round-button:hover:not(:disabled) {
    background: var(--navy);
    color: #fff;
}

.round-button:active:not(:disabled) {
    transform: scale(0.97);
}

.round-button:disabled {
    opacity: 0.35;
    cursor: default;
}

.scroller-buttons {
    display: flex;
    gap: 12px;
}

.scroller-buttons[hidden] {
    display: none;
}

/* Горизонтальная лента карточек: листается пальцем, на компьютере — стрелками */
/* position: relative — скрытые подписи (.visually-hidden, absolute) внутри ленты иначе вылезают из неё и раздвигают страницу */
.scroller {
    position: relative;
    display: flex;
    gap: 16px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

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

.scroller > li {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

@media (prefers-reduced-motion: no-preference) {
    .scroller {
        scroll-behavior: smooth;
    }
}

/* Поля форм (.field, .field__label, .field__input — в template_styles.css: ими пользуется и окно «Заказать звонок») */

.field__box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 60px;
    padding-inline: 18px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--muted);
    font-size: 0.9375rem;
    transition: border-color 160ms var(--ease-out);
}

.field__box:focus-within {
    border-color: var(--navy);
}

.field__box input,
.field__box select {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    appearance: none;
    -moz-appearance: textfield;
}

.field__box input::-webkit-outer-spin-button,
.field__box input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* Свой выпадающий список (калькулятор: «Модель») */
.select {
    position: relative;
}

.select__button {
    justify-content: space-between;
    width: 100%;
    color: var(--ink);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.select__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select__chev {
    color: var(--muted);
    transition: transform 200ms var(--ease-out);
}

.select__button[aria-expanded="true"] {
    border-color: var(--navy);
}

.select__button[aria-expanded="true"] .select__chev {
    transform: rotate(180deg);
}

.select__list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 5;
    min-width: 220px;
    max-height: 320px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    outline: 0;
    background: #fff;
    box-shadow: 0 16px 40px rgba(2, 27, 59, 0.16);
    transform-origin: top center;
    transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}

@starting-style {
    .select__list {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
}

.select__list[hidden] {
    display: none;
}

.select__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.select__option:hover,
.select__option.is-active {
    background: var(--sky);
}

.select__check {
    visibility: hidden;
    color: var(--navy);
}

.select__option[aria-selected="true"] {
    color: var(--navy);
    font-weight: 700;
}

.select__option[aria-selected="true"] .select__check {
    visibility: visible;
}

/* Первый экран */

.hero {
    display: grid;
    background: var(--sand);
}

.hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 32px var(--gutter) 40px;
}

.hero__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-size: 0.8125rem;
    font-weight: 600;
}

.hero__label a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hero__label a:hover {
    text-decoration-thickness: 2px;
}

.hero__title {
    margin: 0;
    color: var(--navy);
    font-size: clamp(1.75rem, 3vw, 3.5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.hero__lead {
    max-width: 720px;
    color: var(--ink-soft);
    font-size: 1.0625rem;
    line-height: 1.5;
}

.hero__buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.hero__discount {
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--gold);
    font-size: 0.75rem;
}

.hero__points {
    display: flex;
    flex-direction: column;
    gap: 10px 28px;
    color: var(--navy);
    font-size: 0.9375rem;
    font-weight: 600;
}

.hero__points li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    width: 100%;
    padding-top: 24px;
    border-top: 1px solid var(--sand-line);
    color: #555;
    font-size: 0.9375rem;
    font-weight: 500;
}

.hero__rating-value {
    color: var(--navy);
    font-size: 1.25rem;
    font-weight: 700;
}

.hero__media {
    position: relative;
    min-height: 420px;
}

.hero__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Кадр как в макете: девушка по центру, шпиль виден, без лишнего неба сверху */
    object-position: 50% 50%;
}

.hero__layers {
    display: none;
}

@media (min-width: 768px) {
    .hero__text {
        padding-block: 56px;
    }

    .hero__buttons {
        flex-direction: row;
        flex-wrap: wrap;
        width: auto;
    }

    .hero__points {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .hero__lead {
        font-size: 1.1875rem;
    }

    .hero__media {
        min-height: 520px;
    }

    .hero__layers {
        position: absolute;
        bottom: 32px;
        left: 32px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-width: 360px;
        padding: 24px;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 16px 40px rgba(2, 27, 59, 0.18);
    }

    .hero__layers-title {
        color: var(--navy);
        font-weight: 700;
    }

    .hero__layers ul {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .hero__layers li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        color: var(--muted);
        font-size: 0.8125rem;
    }

    .hero__layers strong {
        display: block;
        color: var(--ink);
        font-size: 0.9375rem;
    }

    .hero__swatch {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }
}

@media (min-width: 1280px) {
    .hero {
        grid-template-columns: minmax(0, 1fr) 54%;
        min-height: 820px;
    }

    .hero__text {
        justify-content: center;
        gap: 36px;
        padding: 80px 72px 72px var(--gutter);
    }

    .hero__lead {
        font-size: 1.3125rem;
    }

    .hero__buttons .button {
        min-height: 64px;
        padding-inline: 32px;
        font-size: 1.0625rem;
    }

    .hero__media {
        min-height: 0;
    }

    .hero__layers {
        bottom: 40px;
        left: 40px;
    }
}

@media (min-width: 1280px) and (max-width: 1599px) {
    .hero {
        grid-template-columns: minmax(0, 1fr) 46%;
    }
}

/* Полоса доверия */

.trust {
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.trust__list {
    display: grid;
    gap: 20px;
    padding-block: 32px;
}

.trust__item {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.35;
}

.trust__item strong {
    display: block;
    margin-bottom: 2px;
    color: var(--navy);
    font-size: 1.0625rem;
}

.trust__item a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 3px;
}

.trust__item a:hover {
    text-decoration-color: currentColor;
}

.trust__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--sand);
    color: var(--navy);
}

@media (min-width: 768px) {
    .trust__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 32px;
    }
}

@media (min-width: 1280px) {
    .trust__list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        padding-block: 36px;
    }

    .trust__item + .trust__item {
        padding-left: 32px;
        border-left: 1px solid var(--line);
    }

    .trust__item {
        padding-right: 16px;
    }
}

/* Видеоотзыв */

.star-review {
    position: relative;
    overflow: hidden;
    background: var(--navy);
    color: #fff;
}

.star-review__frame {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: 60% 25%;
}

.star-review__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-block: 40px 56px;
}

.star-review__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    max-width: 760px;
}

.star-review__label {
    padding: 8px 14px;
    border: 1px solid rgba(255, 192, 34, 0.4);
    border-radius: 999px;
    background: rgba(255, 192, 34, 0.14);
    color: var(--gold);
    font-size: 0.875rem;
    font-weight: 700;
}

.star-review__quote {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
}

.star-review__quote > p {
    position: relative;
    padding-top: 44px;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.star-review__quote > p::before {
    content: "“";
    position: absolute;
    top: -8px;
    left: 0;
    color: var(--gold);
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
}

.star-review__author {
    display: flex;
    align-items: center;
    gap: 18px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9375rem;
}

.star-review__author img {
    width: 64px;
    height: 64px;
    border: 2px solid var(--gold);
    border-radius: 999px;
    object-fit: cover;
    object-position: 58% 20%;
}

.star-review__author cite {
    display: block;
    margin-bottom: 4px;
    color: #fff;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
}

.star-review__choice {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9375rem;
    font-weight: 600;
}

.star-review__model {
    align-self: flex-start;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.65);
    font-weight: 400;
    transition: border-color 160ms var(--ease-out);
}

.star-review__model:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.star-review__model strong {
    color: #fff;
}

.star-review__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.star-review__play {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
}

.star-review__play-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    margin-bottom: 20px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--navy);
    box-shadow: 0 0 0 36px rgba(255, 255, 255, 0.14), 0 16px 48px rgba(3, 39, 85, 0.35);
    transition: transform 200ms var(--ease-out);
}

.star-review__play:hover .star-review__play-circle {
    transform: scale(1.05);
}

.star-review__play-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.star-review__play-note {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
    font-weight: 500;
}

.star-review__chapters {
    display: grid;
    gap: 12px;
}

.star-review__chapter {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px 14px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(3, 39, 85, 0.55);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
}

button.star-review__chapter:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.star-review__time {
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--gold);
    color: var(--navy);
    font-size: 0.875rem;
    font-weight: 700;
}

@media (min-width: 1024px) {
    .star-review {
        min-height: 820px;
    }

    .star-review__frame {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        object-position: 70% 25%;
    }

    .star-review::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        background:
            linear-gradient(180deg, rgba(3, 39, 85, 0) 70%, rgba(3, 39, 85, 0.85) 100%),
            linear-gradient(90deg, rgba(3, 39, 85, 0.97) 0%, rgba(3, 39, 85, 0.88) 38%, rgba(3, 39, 85, 0.35) 62%, rgba(3, 39, 85, 0.15) 100%);
    }

    .star-review__inner {
        z-index: 2;
        display: grid;
        grid-template-columns: minmax(0, 760px) 1fr;
        grid-template-rows: 1fr auto;
        align-items: center;
        min-height: inherit;
        padding-block: 112px 48px;
    }

    .star-review__play {
        justify-self: end;
        margin-right: 8%;
    }

    .star-review__chapters {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-self: end;
        margin-top: 48px;
    }

    .star-review__quote > p {
        padding-top: 56px;
        font-size: 2.375rem;
        line-height: 1.18;
    }

    .star-review__quote > p::before {
        font-size: 8.75rem;
        top: -20px;
    }
}

/* С какой задачей справится штора */

.tasks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tasks__item--large,
.tasks__item:last-child {
    grid-column: 1 / -1;
}

.task-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 170px;
    padding: 16px;
    overflow: hidden;
    border-radius: 20px;
    background: var(--navy);
    color: #fff;
    isolation: isolate;
}

.tasks__item--large .task-tile {
    min-height: 220px;
}

.task-tile__image,
.task-tile::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.task-tile__image {
    z-index: -2;
    object-fit: cover;
    transition: transform 400ms var(--ease-out);
}

.task-tile::after {
    content: "";
    z-index: -1;
    background: linear-gradient(180deg, rgba(2, 27, 59, 0) 30%, rgba(2, 27, 59, 0.88) 100%);
}

.task-tile:hover .task-tile__image {
    transform: scale(1.04);
}

.task-tile__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.task-tile__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
}

.task-tile__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-tile__title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.task-tile__text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    line-height: 1.45;
}

.quiz-strip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 24px;
    padding: 24px;
    border-radius: 24px;
    background: var(--navy);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.quiz-strip__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--gold);
    color: var(--navy);
    font-size: 1.25rem;
    font-weight: 700;
}

.quiz-strip__title {
    margin-bottom: 6px;
    color: #fff;
    font-size: 1.375rem;
    font-weight: 700;
}

.quiz-strip__note {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.quiz-strip .button {
    width: 100%;
}

@media (min-width: 768px) {
    .tasks {
        gap: 16px;
    }

    .task-tile {
        min-height: 260px;
        padding: 24px;
    }

    .tasks__item--large .task-tile {
        min-height: 360px;
    }

    .tasks__item--large:not(.tasks__item--first) {
        grid-column: auto;
    }

    .task-tile__title {
        font-size: 1.875rem;
    }

    .tasks__item--large .task-tile__title {
        font-size: 2.5rem;
    }

    .task-tile__text {
        font-size: 1rem;
    }

    .task-tile__arrow {
        width: 48px;
        height: 48px;
    }

    .quiz-strip {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 32px;
    }

    .quiz-strip__text {
        flex: 1 1 320px;
    }

    .quiz-strip .button {
        width: auto;
    }
}

@media (min-width: 1280px) {
    .tasks {
        grid-template-columns: repeat(10, minmax(0, 1fr));
        grid-template-rows: 500px 360px;
    }

    .tasks__item {
        grid-column: span 2;
    }

    /* Та же специфичность, что у правила планшета, иначе «Тепло» и «Темнота» сжимаются в одну колонку */
    .tasks__item--large:not(.tasks__item--first) {
        grid-column: span 3;
    }

    .tasks__item--first {
        grid-column: span 4;
    }

    .tasks__item:last-child {
        grid-column: span 2;
    }

    .task-tile {
        min-height: 0;
        padding: 32px;
    }

    .tasks__item--large .task-tile {
        min-height: 0;
    }

    .quiz-strip {
        flex-wrap: nowrap;
        gap: 28px;
        margin-top: 56px;
        padding: 36px 48px;
        font-size: 1.0625rem;
    }

    .quiz-strip__badge {
        width: 88px;
        height: 88px;
        border-radius: 20px;
        font-size: 1.625rem;
    }

    .quiz-strip__title {
        font-size: 1.875rem;
    }
}

/* Популярные шторы */

.products > li {
    width: min(78vw, 330px);
}

.product {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product__photo {
    position: relative;
    display: block;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 20px;
    aspect-ratio: 3 / 4;
}

.product__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--ease-out);
}

.product__photo:hover img {
    transform: scale(1.04);
}

.product__photo .badge {
    position: absolute;
    top: 16px;
    left: 16px;
}

.product__name {
    margin: 0;
    color: var(--navy);
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1.25;
}

.product__name a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.product__colors {
    position: absolute;
    bottom: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.product__colors img {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(2, 27, 59, 0.12);
    object-fit: cover;
}

.product__note {
    flex: 1;
    color: var(--muted);
    font-size: 0.9375rem;
}

.product__price {
    color: var(--ink);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.product__button {
    width: 100%;
    margin-top: 10px;
}

.product__button .icon {
    transition: transform 160ms var(--ease-out);
}

.product__button:hover .icon {
    transform: translateX(3px);
}

@media (min-width: 1280px) {
    .products {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 24px;
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
    }

    .products > li {
        width: auto;
    }
}

/* Калькулятор */

.calc {
    padding-block: 64px;
    background: var(--navy);
    color: #fff;
    scroll-margin-top: 16px;
}

.calc__inner {
    display: grid;
    gap: 40px;
}

.calc__title {
    margin: 0 0 20px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.calc__lead {
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.0625rem;
    line-height: 1.5;
}

.calc__points {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 1rem;
    font-weight: 500;
}

.calc__points li {
    display: flex;
    gap: 12px;
}

.calc__points .icon {
    color: var(--gold);
}

.calc__points a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.calc__form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px;
    border-radius: 24px;
    background: #fff;
    color: var(--ink);
}

.calc__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Поля — по нижнему краю: подпись «Высота от карниза до пола» в узкой форме уходит на две строки */
    align-items: end;
    gap: 16px 12px;
}

.calc__fields .field:last-child {
    grid-column: 1 / -1;
}

.calc__mounts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.calc__mounts legend {
    margin-bottom: 10px;
}

.chip-radio {
    position: relative;
}

.chip-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chip-radio span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}

.chip-radio .icon {
    display: none;
}

.chip-radio input:checked + span {
    border-color: var(--navy);
    background: var(--sky);
}

.chip-radio input:checked + span .icon {
    display: block;
}

.chip-radio input:focus-visible + span {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

.calc__result {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: 18px;
    background: var(--sand);
}

.calc__result-note {
    color: var(--muted);
    font-size: 0.875rem;
}

.calc__price {
    min-height: 1.2em;
    color: var(--navy);
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.calc__price[data-state="loading"] {
    opacity: 0.4;
}

.calc__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.calc__consult {
    color: var(--navy);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (min-width: 768px) {
    .calc {
        padding-block: 80px;
    }

    .calc__title {
        font-size: 3rem;
    }

    .calc__form {
        padding: 32px;
    }

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

    .calc__fields .field:last-child {
        grid-column: auto;
    }

    .calc__result {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 24px 28px;
    }

    .calc__actions {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    .calc__price {
        font-size: 2.5rem;
    }
}

@media (min-width: 1280px) {
    .calc {
        padding-block: 112px;
    }

    .calc__inner {
        /* Пропорции макета 1920 (764 : 900), а не 900px: на 1440 фиксированная форма сжимала текст слева до ~280px */
        grid-template-columns: minmax(0, 764fr) minmax(0, 900fr);
        align-items: center;
        gap: 96px;
    }

    .calc__title {
        font-size: 4rem;
    }

    .calc__lead {
        font-size: 1.25rem;
    }

    .calc__points {
        font-size: 1.0625rem;
    }

    .calc__form {
        gap: 28px;
        padding: 40px;
    }
}

/* Как устроена штора */

.how {
    display: grid;
    gap: 32px;
}

.how__photo {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    aspect-ratio: 4 / 3;
}

.how__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.how__label {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-size: 0.875rem;
    font-weight: 600;
}

.how__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--ink-soft);
    font-size: 1.0625rem;
    line-height: 1.55;
}

.how__text .section__title {
    margin-bottom: 8px;
}

.how__layers {
    margin-top: 16px;
}

.how__layers li {
    display: flex;
    gap: 28px;
    padding-block: 22px;
    border-top: 1px solid var(--sand-line);
    font-size: 1rem;
    line-height: 1.5;
}

.how__layers strong {
    display: block;
    margin-bottom: 4px;
    color: var(--navy);
    font-size: 1.375rem;
    line-height: 1.25;
}

.how__number {
    color: #8a6234;
    font-size: 0.9375rem;
    font-weight: 700;
}

/* position: relative — по той же причине, что у .scroller: скрытые «Да:/Нет:» в ячейках */
.compare-wrap {
    position: relative;
    margin-top: 40px;
    overflow-x: auto;
    border-radius: 24px;
    background: #fff;
}

.compare {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: 1rem;
}

.compare th,
.compare td {
    padding: 22px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.compare tr:last-child th,
.compare tr:last-child td {
    border-bottom: 0;
}

.compare thead th {
    color: var(--muted);
    font-size: 0.9375rem;
    font-weight: 700;
}

.compare tbody th {
    color: var(--navy);
    font-size: 1.125rem;
    font-weight: 700;
}

.compare td {
    color: var(--ink-soft);
    font-weight: 500;
}

.compare td .icon {
    display: inline-block;
    margin-right: 10px;
    vertical-align: -4px;
}

.compare .compare__best {
    padding-inline: 24px;
    background: var(--sky);
    color: var(--navy);
    font-weight: 700;
}

.compare thead .compare__best {
    color: var(--navy);
}

.compare__yes {
    color: var(--navy);
}

.compare__no {
    color: #b4472f;
}

@media (min-width: 768px) {
    .compare-wrap {
        padding-inline: 24px;
    }
}

@media (min-width: 1280px) {
    .how {
        /* Пропорции макета 1920 (860 : 820), а не 820px — на 1440 фото сжималось до ~380px */
        grid-template-columns: minmax(0, 860fr) minmax(0, 820fr);
        align-items: center;
        gap: 80px;
    }

    .how__photo {
        height: 100%;
        min-height: 720px;
        aspect-ratio: auto;
    }

    .how__label {
        top: 32px;
        left: 32px;
    }

    .how__text {
        font-size: 1.1875rem;
    }

    .compare-wrap {
        margin-top: 56px;
        padding: 8px 40px;
    }

    .compare {
        font-size: 1.0625rem;
    }
}

/* Gardista в интерьере */

.gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.gallery__item a {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    aspect-ratio: 1;
}

.gallery__item--large {
    grid-column: 1 / -1;
}

.gallery__item--large a {
    aspect-ratio: 4 / 3;
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--ease-out);
}

.gallery__item a:hover img {
    transform: scale(1.03);
}

.gallery__expand {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
}

@media (min-width: 1280px) {
    .gallery {
        grid-template-columns: minmax(0, 1000fr) repeat(2, minmax(0, 372fr));
        grid-template-rows: 352px 352px;
        gap: 16px;
    }

    .gallery__item--large {
        grid-row: span 2;
        grid-column: auto;
    }

    .gallery__item a,
    .gallery__item--large a {
        border-radius: 24px;
        aspect-ratio: auto;
    }
}

/* Отзывы */

/* minmax(0, 1fr): иначе лента карточек внутри растягивает колонку шире экрана */
.reviews {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}

.reviews__summary {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
    border-radius: 24px;
    background: var(--navy);
    color: #fff;
}

.reviews__summary-title {
    font-size: 1.25rem;
    font-weight: 700;
}

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

.reviews__average > strong {
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
}

.reviews__average > span {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9375rem;
}

.reviews__sources li {
    display: flex;
    align-items: center;
    gap: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Площадка — фильтр ленты: нажали «Яндекс» — справа только отзывы с Яндекса */
.reviews__source {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-inline: -12px;
    padding: 16px 12px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    text-align: left;
    transition: background-color 160ms var(--ease-out);
}

.reviews__source:hover {
    background: rgba(255, 255, 255, 0.08);
}

.reviews__source[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 3px 0 0 var(--gold);
}

.reviews__source:focus-visible,
.reviews__source-link:focus-visible {
    outline-color: #fff;
}

.reviews__source-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: 12px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.6);
    transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}

.reviews__source-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.reviews__filter-note {
    min-height: 1.5em;
    margin: -12px 0 12px;
    color: var(--muted);
    font-size: 0.9375rem;
}

.reviews__filter-note button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--navy);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.review-card[hidden] {
    display: none;
}

.review-card__video {
    position: relative;
    display: block;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--navy);
}

.review-card__video img,
.review-card__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    filter: brightness(0.8);
}

.review-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--navy);
    transform: translate(-50%, -50%);
}

.reviews__source-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    font-weight: 400;
}

.reviews__source-stat .icon {
    color: var(--gold);
}

.reviews__source-stat strong {
    color: #fff;
    font-size: 1.0625rem;
}

.reviews__all {
    margin-top: auto;
    width: 100%;
}

.reviews__main .section__head {
    margin-bottom: 24px;
}

.review-cards > li {
    width: min(82vw, 380px);
}

.review-card article {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    padding: 24px;
    border-radius: 24px;
    background: #fff;
}

.review-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.review-card__source {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--sand);
    color: var(--navy);
    font-size: 0.75rem;
    font-weight: 600;
}

.review-card__text {
    display: -webkit-box;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
}

.review-card__photos {
    display: flex;
    gap: 8px;
}

.review-card__photos img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover;
}

.review-card__author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.875rem;
}

.review-card__author strong {
    display: block;
    color: var(--navy);
    font-size: 1rem;
}

.review-card__avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--sand-line);
    color: #8a6234;
    font-size: 1.125rem;
    font-weight: 700;
}

@media (min-width: 1280px) {
    .reviews {
        grid-template-columns: 500px minmax(0, 1fr);
        align-items: stretch;
    }

    .reviews__summary {
        min-height: 660px;
        padding: 40px;
    }

    .reviews__average > strong {
        font-size: 6.5rem;
    }

    .reviews__main {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .reviews__main .section__head {
        margin-bottom: 32px;
    }

    .review-cards {
        flex: 1;
        gap: 24px;
        margin-inline: 0;
        padding-inline: 0;
        scroll-padding-inline: 0;
    }

    /* По три карточки только от 1600px: на 1440 третья делала текст слишком узким */
    .review-cards > li {
        width: calc((100% - 24px) / 2);
    }

    .review-card article {
        padding: 32px;
    }

    .review-card__text {
        font-size: 1.0625rem;
    }
}

/* О нас пишут */

.media {
    display: grid;
    gap: 16px;
}

.media__item {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 28px;
    border-radius: 24px;
    background: var(--sand);
}

.media__source {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--muted);
    font-size: 0.875rem;
}

.media__source img {
    border-radius: 12px;
}

.media__source strong {
    display: block;
    color: var(--navy);
    font-size: 1.125rem;
}

.media__title {
    flex: 1;
    margin: 0;
    color: var(--navy);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

.media__link {
    gap: 8px;
}

@media (min-width: 1024px) {
    .media {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }

    .media__item {
        min-height: 307px;
        padding: 36px;
    }

    .media__title {
        font-size: 1.75rem;
    }
}

/* Нам доверяют — по референсу владельца (28.10.2026): логотип с подписью, «ваш логотип», карточка с двумя кнопками */

.clients {
    display: grid;
    gap: 24px;
}

.clients__main {
    display: grid;
    align-content: start;
    gap: 12px;
}

.clients__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.clients__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border-radius: 20px;
    background: #fff;
}

.clients__logo {
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    margin-bottom: 12px;
}

.clients__logo img {
    max-width: 100%;
    max-height: 44px;
    object-fit: contain;
}

.clients__name {
    color: var(--navy);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.clients__segment {
    color: var(--muted);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* «Здесь может быть ваш логотип» — пустое место под логотипом, ведёт к заявке */
.clients__yours {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 16px;
    padding: 18px 20px;
    border: 1.5px dashed #cfc5b4;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.4;
    transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}

.clients__yours strong {
    color: var(--navy);
    font-size: 1rem;
    font-weight: 700;
}

.clients__yours span {
    grid-column: 1;
}

.clients__yours .icon {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--navy);
    transition: transform 160ms var(--ease-out);
}

.clients__yours:hover {
    border-color: var(--navy);
    background: #fff;
}

.clients__yours:hover .icon {
    transform: translateX(3px);
}

/* «Работаем с» — сферы (белые чипы) и профессионалы (тёмные) */
.clients__segments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.clients__segments-label {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.clients__segments ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.clients__segments li {
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}

.clients__segments li.is-dark {
    border-color: var(--navy);
    background: var(--navy);
    color: #fff;
}

.business {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 28px;
    border-radius: 24px;
    background: var(--navy);
    color: rgba(255, 255, 255, 0.75);
    font-size: 1rem;
    line-height: 1.55;
}

.business__label {
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
}

.business__title {
    margin: 0;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.business__points {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.875rem;
    line-height: 1.45;
}

.business__points li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.business__points strong {
    display: block;
    margin-bottom: 2px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.business__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--gold);
}

.business__buttons {
    display: grid;
    gap: 12px;
    width: 100%;
    margin-top: auto;
    padding-top: 4px;
}

@media (min-width: 768px) {
    .clients__grid {
        gap: 16px;
    }

    .clients__item {
        padding: 24px;
    }

    .clients__logo {
        min-height: 110px;
        margin-bottom: 16px;
    }

    .clients__logo img {
        max-width: 240px;
        max-height: 72px;
    }

    .clients__name {
        font-size: 1.125rem;
    }

    .clients__segment {
        font-size: 0.75rem;
    }

    .clients__yours {
        padding: 20px 28px;
        font-size: 1rem;
    }

    .clients__yours strong {
        font-size: 1.125rem;
    }
}

@media (min-width: 1280px) {
    .clients {
        grid-template-columns: minmax(0, 1fr) 520px;
        gap: 24px;
    }

    .clients__main {
        gap: 16px;
    }

    .clients__item {
        padding: 28px 32px;
    }

    .clients__logo {
        min-height: 130px;
    }

    .clients__logo img {
        max-width: 280px;
        max-height: 86px;
    }

    .clients__segments {
        grid-column: 1 / -1;
        padding-top: 8px;
    }

    .business {
        gap: 24px;
        padding: 40px;
        font-size: 1.0625rem;
    }

    .business__title {
        font-size: 2.25rem;
    }
}

/* Как мы работаем */

.steps {
    display: grid;
    gap: 16px;
}

.steps__item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 24px;
}

.steps__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.steps__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--sand);
    color: var(--navy);
}

/* Номер шага декоративный — псевдоэлементом, как надпись в футере: не текст, проверка контраста его не трогает */
.steps__number::before {
    content: attr(data-number);
}

.steps__number {
    color: var(--sand-line);
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.steps__title {
    margin: 0;
    color: var(--navy);
    font-size: 1.625rem;
    font-weight: 700;
}

.steps__text {
    flex: 1;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.55;
}

.steps__time {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--sky);
    color: var(--navy);
    font-size: 0.875rem;
    font-weight: 600;
}

@media (min-width: 768px) {
    .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (min-width: 1280px) {
    .steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .steps__item {
        min-height: 378px;
        gap: 20px;
        padding: 32px;
    }
}

/* Шоурум — по референсу владельца 28.10.2026: фото слева (~31% на компьютере), справа плашка, заголовок, адрес и часы */

.showroom {
    display: grid;
    background: var(--navy-deep);
    color: #fff;
}

.showroom__photo {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: 45% center;
}

.showroom__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 48px var(--gutter) 56px;
}

.showroom__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.showroom__badges li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.875rem;
    font-weight: 600;
}

.showroom__badges .icon,
.showroom__facts .icon {
    flex-shrink: 0;
    color: var(--gold);
}

.showroom__title {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.showroom__lead {
    max-width: 38em;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.0625rem;
    line-height: 1.55;
}

.showroom__facts {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
}

.showroom__facts p {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
}

/* Адрес из инфоблока (#ADDRES#): без этого на телефоне «55-Н» рвётся по дефису */
.showroom__facts span {
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .showroom__photo {
        height: 420px;
    }

    .showroom__title {
        font-size: 2.5rem;
    }

    /* Одна плашка с разделителем, как в референсе */
    .showroom__badges {
        gap: 0;
        padding: 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.1);
    }

    .showroom__badges li {
        padding: 8px 16px;
        background: none;
        font-size: 0.9375rem;
    }

    .showroom__badges li + li {
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 0;
    }

    .showroom__facts {
        flex-direction: row;
        gap: 40px;
    }

    .showroom__facts p {
        max-width: 360px;
    }

    .showroom__facts p + p {
        padding-left: 40px;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
    }
}

@media (min-width: 1280px) {
    .showroom {
        grid-template-columns: minmax(0, 514fr) minmax(0, 1158fr);
        min-height: 720px;
    }

    /* Фото не задаёт высоту блока, а заполняет её */
    .showroom__photo {
        height: 0;
        min-height: 100%;
    }

    .showroom__text {
        justify-content: center;
        gap: 32px;
        padding: 96px var(--gutter) 96px 72px;
    }

    .showroom__title {
        max-width: 15em;
        font-size: 3.5rem;
    }

    .showroom__lead {
        font-size: 1.1875rem;
    }

    .showroom__facts {
        font-size: 1.125rem;
    }
}

/* Частые вопросы */

.faq {
    display: grid;
    gap: 32px;
}

.faq__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.faq__aside .section__lead {
    margin-top: 0;
}

.faq__list {
    border-top: 1px solid var(--line);
}

.faq__item {
    border-bottom: 1px solid var(--line);
}

.faq__item summary {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-block: 22px;
    color: var(--navy);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    list-style: none;
}

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

.faq__item summary > span:first-child {
    flex: 1;
}

.faq__toggle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

.faq__minus,
.faq__item[open] .faq__plus {
    display: none;
}

.faq__item[open] .faq__minus {
    display: block;
}

.faq__item[open] .faq__toggle,
.faq__item summary:hover .faq__toggle {
    border-color: var(--gold);
    background: var(--gold);
}

/* Высоту ответа при открытии и закрытии анимирует js/home.js */
.faq__answer {
    overflow: hidden;
}

.faq__item p {
    max-width: 820px;
    padding-bottom: 24px;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.6;
}

@media (min-width: 1280px) {
    .faq {
        grid-template-columns: 620px minmax(0, 1fr);
        gap: 96px;
    }

    .faq__aside {
        gap: 28px;
    }

    .faq__item summary {
        padding-block: 28px;
        font-size: 1.375rem;
    }

    .faq__item p {
        font-size: 1.0625rem;
    }
}

/* Заявка на подбор */

.selection {
    display: grid;
    overflow: hidden;
    border-radius: 24px;
    background: var(--navy);
    color: #fff;
}

.selection__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 32px 20px;
}

.selection__title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.selection__lead {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.0625rem;
    line-height: 1.55;
}

.selection__form {
    display: grid;
    gap: 12px;
    width: 100%;
}

.selection__submit {
    width: 100%;
}

.selection__status {
    min-height: 1.5em;
    font-weight: 600;
}

.selection__status[data-state="error"] {
    color: #ffb4a3;
}

.selection__status[data-state="success"] {
    color: var(--gold);
}

.selection__privacy {
    display: flex;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.selection__privacy a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.selection__photo {
    display: none;
}

@media (min-width: 768px) {
    .selection__text {
        padding: 48px;
    }

    .selection__title {
        font-size: 3rem;
    }

    /* Имя и телефон — в ряд, кнопка — с новой строки: втроём в ряд поля сжимались до ~160px (28.10.2026) */
    .selection__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
    }

    .selection__submit {
        grid-column: 1 / -1;
        justify-self: start;
        width: auto;
    }
}

@media (min-width: 1280px) {
    /* Пропорции макета 1920 (1040 : 720), а не 720px: на 1440 форма сжималась до ячеек по ~130px */
    .selection {
        grid-template-columns: minmax(0, 1040fr) minmax(0, 720fr);
        border-radius: 32px;
    }

    .selection__text {
        justify-content: center;
        gap: 28px;
        padding: 80px;
    }

    .selection__title {
        font-size: 3.75rem;
    }

    .selection__lead {
        font-size: 1.1875rem;
    }

    .selection__photo {
        display: block;
        width: 100%;
        height: 0;
        min-height: 100%;
        object-fit: cover;
    }
}

/* «Обсудим ваш проект» (/project/) и «Спасибо» после него (/thanks/project/) — форма по референсу владельца, в цветах главной */

.project__grid {
    display: grid;
    gap: 32px;
}

.project__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.project__intro .section__lead {
    margin-top: 0;
}

.project__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--navy);
    font-size: 0.9375rem;
    font-weight: 600;
}

.project__back:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.project__points {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.project__points li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.project__points strong {
    display: block;
    margin-bottom: 2px;
    color: var(--navy);
    font-size: 1.0625rem;
    font-weight: 700;
}

.project__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    color: var(--navy);
}

.project__form {
    display: grid;
    gap: 20px;
    padding: 28px 20px;
    border-radius: 24px;
    background: var(--navy);
    color: #fff;
}

.project__choice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.project__choice legend {
    margin-bottom: 10px;
    padding: 0;
    color: rgba(255, 255, 255, 0.75);
}

.chip-radio--dark span {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.chip-radio--dark span:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.chip-radio--dark input:checked + span {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--navy);
}

.chip-radio--dark input:focus-visible + span {
    outline-color: #fff;
}

.project__submit {
    width: 100%;
}

.project__form .selection__status {
    min-height: 1.5em;
    margin-top: -8px;
}

.project__form .selection__privacy {
    margin-top: -12px;
}

.project-thanks__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 880px;
    margin-inline: auto;
    padding: 40px 20px;
    border-radius: 24px;
    background: var(--navy);
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
}

.project-thanks__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--navy);
}

.project-thanks__title {
    margin: 0;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.project-thanks__text {
    max-width: 600px;
    font-size: 1.0625rem;
    line-height: 1.55;
}

.project-thanks__buttons {
    display: grid;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
}

@media (min-width: 768px) {
    .project__form {
        padding: 40px;
    }

    .project-thanks__card {
        padding: 64px 48px;
    }

    .project-thanks__title {
        font-size: 3rem;
    }

    .project-thanks__text {
        font-size: 1.1875rem;
    }

    .project-thanks__buttons {
        display: flex;
        justify-content: center;
        width: auto;
    }
}

@media (min-width: 1280px) {
    .project__grid {
        grid-template-columns: minmax(0, 1fr) 720px;
        align-items: start;
        gap: 80px;
    }

    .project__intro {
        position: sticky;
        top: calc(var(--header-height, 0px) + 32px);
        gap: 24px;
    }

    .project__form {
        gap: 24px;
        padding: 48px;
        border-radius: 32px;
    }

    .project-thanks__card {
        padding: 80px;
        border-radius: 32px;
    }

    .project-thanks__title {
        font-size: 3.75rem;
    }
}

/* Просмотр фото и видео: во весь экран, как fancybox — тёмный фон, счётчик, стрелки, подпись */

.lightbox {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: #fff;
}

.lightbox::backdrop {
    background: rgba(4, 10, 20, 0.97);
}

.lightbox[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    animation: lightbox-in 220ms var(--ease-out);
}

@keyframes lightbox-in {
    from {
        opacity: 0;
    }
}

.lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
}

.lightbox__counter {
    padding-left: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lightbox__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: background-color 160ms var(--ease-out), transform 120ms var(--ease-out);
}

.lightbox__button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox__button:active {
    transform: scale(0.95);
}

.lightbox__button:focus-visible {
    outline-color: #fff;
}

.lightbox__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0 16px;
    touch-action: pan-y;
}

.lightbox__stage img,
.lightbox__stage video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    object-fit: contain;
    animation: lightbox-media 260ms var(--ease-out);
    user-select: none;
    -webkit-user-drag: none;
}

.lightbox__stage iframe {
    width: min(100%, 1280px);
    aspect-ratio: 16 / 9;
    max-height: 100%;
    border: 0;
    border-radius: 12px;
    animation: lightbox-media 260ms var(--ease-out);
}

@keyframes lightbox-media {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
}

.lightbox__stage[data-direction="1"] img,
.lightbox__stage[data-direction="1"] video {
    animation-name: lightbox-next;
}

.lightbox__stage[data-direction="-1"] img,
.lightbox__stage[data-direction="-1"] video {
    animation-name: lightbox-prev;
}

@keyframes lightbox-next {
    from {
        opacity: 0;
        transform: translateX(32px);
    }
}

@keyframes lightbox-prev {
    from {
        opacity: 0;
        transform: translateX(-32px);
    }
}

.lightbox__caption {
    min-height: 1.5em;
    padding: 12px 16px 20px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9375rem;
    text-align: center;
}

.lightbox__nav {
    position: fixed;
    top: 50%;
    width: 56px;
    height: 56px;
    transform: translateY(-50%);
}

.lightbox__nav:active {
    transform: translateY(-50%) scale(0.95);
}

.lightbox__nav--prev {
    left: 24px;
}

.lightbox__nav--next {
    right: 24px;
}

.lightbox__nav[hidden] {
    display: none;
}

/* На телефоне стрелки внизу, чтобы не закрывать фото; листать можно и свайпом */
@media (max-width: 767px) {
    .lightbox__nav {
        top: auto;
        bottom: 16px;
        width: 48px;
        height: 48px;
        transform: none;
    }

    .lightbox__nav:active {
        transform: scale(0.95);
    }

    .lightbox__nav--prev {
        left: 16px;
    }

    .lightbox__nav--next {
        right: 16px;
    }

    .lightbox__caption {
        padding-inline: 80px;
    }

    .lightbox__stage {
        padding: 0;
    }

    .lightbox__stage img,
    .lightbox__stage video {
        border-radius: 0;
    }
}

body:has(.lightbox[open]) {
    overflow: hidden;
}

@media (forced-colors: active) {
    .task-tile,
    .product__photo,
    .review-card article,
    .media__item,
    .clients__item,
    .clients__yours,
    .clients__segments li,
    .steps__item,
    .quiz-strip,
    .calc__form,
    .selection,
    .chip-radio span,
    .round-button,
    .project__form,
    .project-thanks__card {
        border: 1px solid CanvasText;
    }

    .chip-radio input:checked + span {
        border-color: Highlight;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox[open],
    .lightbox__stage img,
    .lightbox__stage video,
    .lightbox__stage iframe {
        animation: none;
    }
}

@media (min-width: 1600px) {
    .review-cards > li {
        width: calc((100% - 48px) / 3);
    }
}

/* End */
/* /local/templates/gardista/css/home.css?179320670662988 */