/*
  Limaudio KEF (dev-2) — единый слоистый стиль.
  Порядок слоёв задаёт приоритет каскада независимо от места объявления.
*/
@layer reset, tokens, base, layout, components, utilities;

/* ============================================================= TOKENS */
@layer tokens {
    :root {
        color-scheme: light;

        /* Палитра (монохром премиум) */
        --color-bg: #f2f2f2;
        --color-surface: #ffffff;
        --color-surface-soft: #e8e8e8;
        --color-ink: #0d0d0d;
        --color-ink-soft: #3c3c3c;
        --color-muted: #6e6e6e;
        --color-line: #e4e4e4;
        --color-dark: #111111;
        --color-dark-soft: #1c1c1c;
        --color-on-dark: #f5f5f5;
        --color-accent: #0d0d0d;
        --color-green: #27ae60;
        --color-yellow: #f1c40f;
        /* Типографика — Manrope + флюидная шкала */
        --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
        --fs-eyebrow: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
        --fs-body: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
        --fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
        --fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
        --fs-h2: clamp(1.7rem, 1.3rem + 1.9vw, 3rem);
        --fs-h1: clamp(2rem, 1.4rem + 3vw, 3.75rem);
        --fs-hero: var(--fs-h1);
        --fs-breadcrumb: 0.82rem;
        --lh-body: 1.55;
        --lh-heading: 1.15;

        /* Ритм отступов */
        --space-3xs: 0.25rem;
        --space-2xs: 0.5rem;
        --space-xs: 0.75rem;
        --space-sm: 1rem;
        --space-md: 1.5rem;
        --space-lg: 2.5rem;
        --space-xl: 4rem;
        --space-2xl: clamp(4rem, 3rem + 5vw, 7rem);

        /* Ритм страницы: шапка → крошки → первый блок → секции */
        --space-page: var(--space-md);
        --space-stack: var(--space-sm);
        --space-hero-pad: var(--space-lg);
        --space-hero-after: var(--space-lg);
        --space-block: var(--space-lg);

        /* Геометрия */
        --radius-sm: 10px;
        --radius-md: 18px;
        --radius-lg: 28px;
        --radius-pill: 999px;
        --choice-size: 1.5rem;
        --choice-mark: 0.625rem;
        --choice-radius: 4px;

        /* Контейнер */
        --shell-max: 1320px;
        --shell-pad: clamp(1rem, 0.4rem + 2.5vw, 3rem);

        /* Движение */
        --dur-fast: 0.15s;
        --dur: 0.3s;
        --dur-slow: 0.55s;
        --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
        --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.08);
        --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.14);

        --header-h: 48px;
    }

    @media (max-width: 640px) {
        :root {
            --space-page: var(--space-sm);
            --space-hero-pad: var(--space-md);
            --space-hero-after: var(--space-md);
            --space-block: var(--space-md);
            --fs-h1: clamp(1.45rem, 1.15rem + 3.2vw, 2.1rem);
            --fs-lead: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
        }
    }
}

/* ============================================================== RESET */
@layer reset {
    figure {
        margin: 0 !important;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    * {
        margin: 0;
    }


    :where(figure) {
        margin: 0 0 1em;
    }

    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        min-height: 100vh;
        line-height: var(--lh-body);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    :where(figure) {
        margin: 0 0 0em;
    }

    img,
    picture,
    svg,
    video {
        display: block;
        max-width: 100%;
        height: auto;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
        color: inherit;
    }

    button {
        background: none;
        border: 0;
        cursor: pointer;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    ul[role='list'],
    ol[role='list'] {
        list-style: none;
        padding: 0;
    }

    :where(h1, h2, h3, h4) {
        line-height: var(--lh-heading);
        text-wrap: balance;
    }

    p {
        text-wrap: pretty;
    }
}

/* =============================================================== BASE */
@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: var(--font-sans);
        font-size: var(--fs-body);
        color: var(--color-ink);
        background: var(--color-bg);
    }

    :focus-visible {
        outline: 2px solid var(--color-ink);
        outline-offset: 3px;
        border-radius: 4px;
    }

    ::selection {
        background: var(--color-ink);
        color: #fff;
    }

    input,
    select,
    textarea,
    option {
        font-family: var(--font-sans);
    }

    .skip-link {
        position: absolute;
        left: 50%;
        translate: -50% -120%;
        z-index: 200;
        padding: 0.6rem 1.2rem;
        background: var(--color-ink);
        color: #fff;
        border-radius: var(--radius-pill);
        transition: translate var(--dur) var(--ease);
    }

    .skip-link:focus {
        translate: -50% 1rem;
    }

    .webkit-line-clamp2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(1.55em * 2);
    }

    /*
    @media (max-width: 768px) {
        .webkit-line-clamp2 {
            display: block;
            -webkit-line-clamp: unset;
            -webkit-box-orient: unset;
            overflow: visible;
        }
    }*/


    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            animation-duration: 0.001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.001ms !important;
        }
    }
}

/* ============================================================= LAYOUT */
@layer layout {
    .shell {
        width: 100%;
        max-width: var(--shell-max);
        margin-inline: auto;
        padding-inline: var(--shell-pad);
    }

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

    .systems,
    .aftercare,
    .consultation,
    .dealer,
    .showroom,
    .faq {
        content-visibility: auto;
        contain-intrinsic-size: 1px 720px;
    }

    /* Один вертикальный шаг между соседними секциями на общем фоне.
       Селектор нарочно простой: длинная цепочка :not() перебивала
       восстановление отступа у следующих блоков. */
    .hero+.section,
    .catalog-hero+.section,
    .product-hero+.section,
    .about-hero+.section,
    .solution-single__hero+.section,
    .solutions-archive__hero+.section,
    .solutions-archive__hero+.solutions-archive__listing,
    .catalog-hero+.catalog-listing,
    .section+.section {
        padding-block-start: 0;
    }

    /* Свой фон: заголовок не должен липнуть к верхнему краю полосы. */
    .section.systems,
    .section.dealer,
    .section.showroom,
    .section.lead,
    .section.scenario,
    .section.product-lead,
    .section.solution-lead,
    .section.engineer,
    .section.legend {
        padding-block-start: var(--space-block);
    }

    /* Нижний pad полосы окрашен её цветом и не заменяет зазор до
       следующего заголовка — поэтому следующий блок держит свой верх. */
    .systems+.section,
    .dealer+.section,
    .showroom+.section,
    .showroom-band+.section,
    .scenario+.section,
    .lead:not(.lead--light)+.section,
    .product-lead+.section,
    .solution-lead+.section,
    .legend+.section {
        padding-block-start: var(--space-block);
    }

    .site-main {
        display: block;
        transition: opacity var(--dur) var(--ease);
    }

    body.home .site-main {
        overflow-x: clip;
    }

    .is-page-loading .site-main {
        opacity: 0.35;
        pointer-events: none;
    }

    .section__eyebrow {
        font-size: var(--fs-eyebrow);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-muted);
        margin-block-end: var(--space-xs);
    }

    .section__title {
        font-size: var(--fs-h2);
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .section__title+ :is(p, .section__lead, .section__text, ul, ol) {
        margin-block-start: var(--space-sm);
    }

    .page-head {
        padding-block: var(--space-page) 0;
    }

    .page-crumbs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.15rem 0.55rem;
        color: var(--color-muted);
        font-size: var(--fs-breadcrumb);
        margin-block-end: var(--space-stack);
    }

    .page-crumbs a,
    .page-crumbs__link {
        color: var(--color-accent);
        text-decoration: none;
    }

    .page-crumbs a:hover,
    .page-crumbs__link:hover {
        color: var(--color-ink);
    }

    .page-title {
        font-size: var(--fs-h1);
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: var(--lh-heading);
    }

    .hero,
    .catalog-hero,
    .product-hero,
    .solution-single__hero,
    .solutions-archive__hero,
    .about-hero {
        padding-block: 0 var(--space-hero-after);
    }

    .hero {
        padding-block-start: var(--space-page);
        padding-block-end: var(--space-hero-after);
    }

    .page-head+.hero,
    .page-head+.section,
    .page-head+.catalog-hero,
    .page-head+.product-hero,
    .page-head+.solution-single__hero,
    .page-head+.solutions-archive__hero,
    .page-head+.about-hero {
        padding-block-start: 0;
    }

    .section__lead {
        max-width: 60ch;
        font-size: var(--fs-lead);
        color: var(--color-ink-soft);
        margin-block-start: var(--space-sm);
    }

    .section__title+.filter-bar,
    .section__lead+.filter-bar {
        margin-block-start: var(--space-md);
    }
}

/* ========================================================= COMPONENTS */
@layer components {

    /* ---------- Buttons ---------- */
    .btn {
        --btn-bg: var(--color-ink);
        --btn-fg: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55em;
        padding: 0.9em 1.8em;
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        line-height: 1;
        color: var(--btn-fg);
        background: var(--btn-bg);
        border: 1px solid var(--btn-bg);
        border-radius: var(--radius-pill);
        transition: transform var(--dur-fast) var(--ease),
            background var(--dur) var(--ease),
            color var(--dur) var(--ease),
            box-shadow var(--dur) var(--ease);
        cursor: pointer;
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .btn:active {
        transform: translateY(0);
    }

    .btn--dark {
        --btn-bg: var(--color-ink);
        --btn-fg: #fff;
    }

    .btn--light {
        --btn-bg: #fff;
        --btn-fg: var(--color-ink);
    }

    .btn--accent {
        --btn-bg: var(--color-accent);
        --btn-fg: #fff;
    }

    .btn--outline {
        --btn-bg: transparent;
        --btn-fg: var(--color-ink);
        border-color: var(--color-ink);
    }

    .btn--outline:hover {
        --btn-bg: var(--color-ink);
        --btn-fg: #fff;
    }

    .btn--ghost-light {
        --btn-bg: transparent;
        --btn-fg: var(--color-on-dark);
        border-color: rgba(255, 255, 255, 0.4);
    }

    /*
    .btn--ghost-light:hover {
        --btn-bg: rgba(255, 255, 255, 0.12);
    }
*/
    .btn--icon {
        gap: 0.5em;
    }

    /* ---------- Choice (radio / checkbox) ---------- */
    .choice {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.7rem;
        min-height: 2.2rem;
        padding-block: 0.2rem;
        cursor: pointer;
        color: var(--color-ink-soft);
    }

    .choice input {
        position: absolute;
        inset: 0;
        z-index: 1;
        opacity: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        cursor: pointer;
    }

    .choice__mark {
        width: var(--choice-size);
        height: var(--choice-size);
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        border: 1.5px solid var(--color-ink);
        border-radius: var(--choice-radius);
        background: transparent;
        transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
    }

    .choice__mark::after {
        content: '';
        width: var(--choice-mark);
        height: var(--choice-mark);
        background: var(--color-ink);
        opacity: 0;
        transform: scale(0.65);
        transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
    }

    .choice input:checked+.choice__mark::after {
        opacity: 1;
        transform: scale(1);
    }

    .choice input:focus-visible+.choice__mark {
        outline: 2px solid var(--color-ink);
        outline-offset: 3px;
    }

    /* ---------- Toasts ---------- */
    .toast-stack {
        position: fixed;
        inset-block-start: calc(var(--header-h) + 1rem);
        inset-inline-end: max(1rem, env(safe-area-inset-right));
        z-index: 500;
        display: grid;
        gap: 0.75rem;
        width: min(360px, calc(100vw - 2rem));
        pointer-events: none;
    }

    .toast {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 0.75rem;
        align-items: start;
        padding: 0.95rem 1rem;
        color: var(--color-ink);
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
        pointer-events: auto;
        backdrop-filter: blur(14px);
    }

    .toast.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .toast__dot {
        width: 10px;
        height: 10px;
        margin-block-start: 0.42rem;
        border-radius: 50%;
        background: var(--color-ink);
    }

    .toast--success .toast__dot {
        background: #248a3d;
    }

    .toast--error .toast__dot {
        background: #b3261e;
    }

    .toast--info .toast__dot {
        background: #1f6feb;
    }

    .toast--action {
        cursor: pointer;
    }

    .toast--action:hover {
        border-color: rgba(31, 111, 235, 0.35);
    }

    .toast p {
        color: var(--color-ink-soft);
        font-size: 0.92rem;
        line-height: 1.4;
    }

    .toast__close {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        color: var(--color-muted);
        border-radius: 50%;
        transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
    }

    .toast__close:hover {
        color: var(--color-ink);
        background: var(--color-surface-soft);
    }

    /* ---------- Header ---------- */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 100;
        padding-block-start: var(--space-sm);
        padding-block-end: var(--space-sm);
        pointer-events: none;
    }

    .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
        min-height: var(--header-h);
        padding-inline: clamp(1rem, 0.5rem + 1vw, 1.75rem);
        background: var(--color-surface);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-sm);
        pointer-events: auto;
        transition: box-shadow var(--dur) var(--ease);
    }

    .site-header[data-stuck='true'] .site-header__inner {
        box-shadow: var(--shadow-md);
    }

    .site-header__logo {
        flex: 0 0 auto;
    }

    .site-header__logo img {
        height: 28px;
        width: auto;
    }

    .site-nav {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        justify-content: center;
    }

    .site-nav__list {
        display: flex;
        flex-wrap: nowrap;
        gap: clamp(0.75rem, 0.2rem + 1.5vw, 2rem);
        list-style: none;
        padding: 0;
    }

    .site-nav__link {
        position: relative;
        font-size: 0.95rem;
        color: var(--color-ink-soft);
        padding-block: 0.5rem;
        transition: color var(--dur) var(--ease);
        white-space: nowrap;
    }

    .site-nav__link::after {
        content: '';
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        height: 2px;
        background: var(--color-ink);
        scale: 0 1;
        transform-origin: left;
        transition: scale var(--dur) var(--ease);
    }

    .site-nav__link:hover {
        color: var(--color-ink);
    }

    .site-nav__link:hover::after,
    .site-nav__link.is-active::after {
        scale: 1 1;
    }

    .site-nav__link.is-active {
        color: var(--color-ink);
    }

    .site-header__actions {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        flex: 0 0 auto;
    }

    .contact-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
    }

    .contact-pill__icon {
        display: grid;
        place-items: center;
        color: var(--color-ink);
        transition: transform var(--dur) var(--ease);
    }

    .contact-pill:hover .contact-pill__icon {
        transform: rotate(-10deg);
    }

    .contact-pill__text {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .contact-pill__text strong {
        font-size: 1.3rem;
    }

    .contact-pill__text small {
        font-size: 0.66rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-muted);
    }

    .icon-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.1rem;
        width: auto;
        min-width: 40px;
        height: 40px;
        padding-inline: 0 2px;
        color: var(--color-ink);
        transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
    }

    .icon-btn:hover {
        transform: translateY(-2px);
        opacity: 0.7;
    }

    .icon-btn:active {
        transform: scale(0.94);
    }

    .icon-btn.is-cart-open {
        color: #000;
    }

    .icon-btn.is-cart-bump {
        animation: cart-bump 0.45s var(--ease);
    }

    @keyframes cart-bump {
        0% {
            transform: scale(1);
        }

        30% {
            transform: scale(1.18);
        }

        60% {
            transform: scale(0.92);
        }

        100% {
            transform: scale(1);
        }
    }

    .icon-btn__badge {
        position: static;
        display: grid;
        place-items: center;
        min-width: 18px;
        height: 18px;
        padding-inline: 5px;
        border-radius: 999px;
        background: #9c1f2e;
        color: #fff;
        font-size: 0.68rem;
        font-weight: 700;
        line-height: 1;
        transform: none;
    }

    .icon-btn__badge[hidden] {
        visibility: hidden;
        display: grid;
    }

    .burger {
        display: none;
        width: 44px;
        height: 44px;
        flex-direction: column;
        gap: 5px;
        align-items: center;
        justify-content: center;
    }

    .burger span {
        width: 22px;
        height: 2px;
        background: var(--color-ink);
        transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
    }

    .burger[aria-expanded='true'] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .burger[aria-expanded='true'] span:nth-child(2) {
        opacity: 0;
    }

    .burger[aria-expanded='true'] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .mobile-menu {
        position: fixed;
        /*     inset: calc(var(--header-h) + var(--space-xs)) 0 0 0;*/
        inset: var(--space-xl) 0 0 0;
        z-index: 90;
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
        padding: var(--space-lg) var(--shell-pad);
        background: var(--color-bg);
        pointer-events: auto;
        animation: menu-in var(--dur) var(--ease);
    }

    .mobile-menu[hidden] {
        display: none;
    }

    .mobile-menu__list {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        list-style: none;
        padding: 0;
        font-size: 1.25rem;
    }

    @keyframes menu-in {
        from {
            opacity: 0;
            translate: 0 -1rem;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    /* ---------- Hero type ---------- */
    .page-title,
    .hero__title,
    .about-hero__title,
    .catalog-hero h1,
    .contacts__title,
    .product-hero__summary h1,
    .solution-single__summary h1,
    .solutions-archive__hero h1,
    .checkout__form h1 {
        font-size: var(--fs-h1);
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: var(--lh-heading);
    }

    .hero__text,
    .about-hero__content .text-muted,
    .catalog-hero p:not(.eyebrow),
    .product-hero__description,
    .solution-single__lead,
    .solutions-archive__hero p:not(.eyebrow) {
        font-size: var(--fs-lead);
        line-height: var(--lh-body);
        color: var(--color-ink-soft);
    }

    .hero__subtitle {
        font-size: var(--fs-h3);
        font-weight: 600;
        line-height: var(--lh-heading);
    }

    /* ---------- Hero ---------- */
    .hero__card {
        position: relative;
        display: flex;
        align-items: center;
        min-height: clamp(440px, 54vw, 640px);
        border-radius: var(--radius-md);
        overflow: hidden;
        isolation: isolate;
    }

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

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

    .hero__content {
        position: relative;
        max-width: 600px;
        padding: var(--space-hero-pad);
        color: var(--color-ink);
    }

    .hero__subtitle {
        max-width: 26ch;
        margin-block-start: var(--space-stack);
    }

    .hero__text {
        max-width: 50ch;
        margin-block-start: var(--space-stack);
    }

    .hero-selection-bg {
        background-color: transparent;
    }

    .selection-page .hero__card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(98deg, rgba(242, 242, 242, 0.97) 0%, rgba(242, 242, 242, 0.86) 42%, rgba(242, 242, 242, 0.28) 68%, transparent 86%);
    }

    .selection-page .hero__content {
        z-index: 1;
    }

    .hero__content .btn {
        margin-block-start: var(--space-md);
    }

    @media (max-width: 1150px) and (min-width: 761px) {
        .home .hero__text {
            max-width: 46ch;
        }
    }

    @media (max-width: 760px) {
        .hero__card {
            flex-direction: column;
            align-items: stretch;
            gap: var(--space-stack);
            min-height: 0;
            border-radius: 0;
            overflow: visible;
        }

        .hero__bg {
            position: static;
            border-radius: var(--radius-md);
            overflow: hidden;
        }

        .hero__bg img {
            height: auto;
            aspect-ratio: 4 / 3;
        }

        .hero__content {
            max-width: none;
            padding: 0;
        }

        .hero__subtitle {
            max-width: none;
        }
    }

    /* ---------- Category grid (бенто) ---------- */
    .category-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
        margin-block-start: var(--space-sm);
        align-items: stretch;
    }

    .category-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        padding: var(--space-md);
        background-color: var(--color-surface-soft);
        background-image: url('../images/catalog/card-mask.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-radius: var(--radius-md);
        overflow: hidden;
        transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    }

    .category-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

    .category-card:hover .btn--outline {
        background: var(--color-ink);
        color: #fff;
        border-color: var(--color-ink);
    }

    .category-card__link {
        position: absolute;
        inset: 0;
        z-index: 2;
        border-radius: inherit;
    }

    .category-card .btn {
        position: relative;
        z-index: 1;
        pointer-events: none;
    }

    .category-card__media {
        display: grid;
        place-items: center;
    }

    .category-card__media img {
        width: 100%;
        max-height: 200px;
        object-fit: contain;
        transition: scale var(--dur-slow) var(--ease);
    }

    .category-card:hover .category-card__media img {
        scale: 1.04;
    }

    .category-card__body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .category-card__title {
        font-size: var(--fs-h3);
        font-weight: 600;
        min-height: calc(var(--lh-heading) * 2em);
    }

    /* Мобилка: последняя карточка («Сабвуферы») — на всю ширину, текст слева / картинка справа */
    .category-card:last-child {
        grid-column: 1 / -1;
        flex-direction: row-reverse;
        align-items: center;
    }

    .category-card:last-child>* {
        flex: 1;
    }



    @media (min-width: 768px) {
        .category-grid {
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: 1fr;
            gap: var(--space-md);
        }

        /* мелкие карточки: текст слева, картинка справа */
        .category-card {
            flex-direction: row-reverse;
            align-items: center;
            min-height: 220px;
        }

        .category-card>* {
            flex: 1;
        }

        .category-card__body {
            align-self: stretch;
            justify-content: space-between;
        }

        .category-card:last-child {
            grid-column: auto;
        }

        /* «Напольная»: высокая карточка справа на 2 ряда, картинка сверху */
        .category-card--featured {
            grid-column: 3;
            grid-row: 1 / span 2;
            flex-direction: column;
            text-align: center;
        }

        .category-card--featured>* {
            flex: initial;
        }

        .category-card--featured .category-card__media {
            flex: 1;
            align-self: stretch;
        }

        .category-card--featured .category-card__media img {
            max-height: none;
            height: 100%;
        }

        .category-card--featured .category-card__body {
            align-items: center;
            justify-content: flex-end;
        }
    }

    /* ---------- Catalog archive ---------- */
    .catalog-page {
        background: var(--color-bg);
    }

    .catalog-hero {
        padding-block: 0 var(--space-hero-after);
    }

    .catalog-hero__inner {
        display: grid;
        gap: var(--space-xs);
        max-width: var(--shell-max);
    }

    .catalog-hero p:not(.eyebrow) {
        max-width: 58ch;
    }

    .catalog-listing {
        padding-block: 0 var(--space-block);
    }

    .catalog-listing__layout {
        display: grid;
        gap: var(--space-lg);
        align-items: start;
    }

    .catalog-filters {
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        box-shadow: var(--shadow-sm);
    }

    .catalog-filters__button {
        margin-top: var(--space-sm);
    }

    .catalog-filters__form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        overflow-x: hidden;
        padding: var(--space-md);
    }

    .catalog-filters__scroll-shell {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        margin-bottom: 0;
        overflow: hidden;
    }

    .catalog-filters__scroll {
        position: absolute;
        inset: 0;
        height: auto;
        min-width: 0;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-inline-end: 0.75rem;
        overscroll-behavior: contain;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .catalog-filters__scroll::-webkit-scrollbar {
        display: none;
    }

    .catalog-filters__scrollbar {
        position: absolute;
        z-index: 2;
        inset: 0 0 var(--space-md) auto;
        width: 4px;
        overflow: hidden;
        background: rgba(17, 17, 17, 0.06);
        border-radius: 999px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s var(--ease);
    }

    .catalog-filters__scrollbar>span {
        position: absolute;
        inset: 0 0 auto;
        min-height: 36px;
        background: rgba(17, 17, 17, 0.38);
        border-radius: inherit;
        transform: translate3d(0, var(--catalog-scroll-thumb-y, 0), 0);
        transition:
            height 0.2s var(--ease),
            background-color 0.2s var(--ease);
    }

    .catalog-filters__scroll-shell.is-scrollable:is(:hover, :focus-within) .catalog-filters__scrollbar,
    .catalog-filters__scroll.is-scrolling+.catalog-filters__scrollbar {
        opacity: 1;
    }

    .catalog-filters__scroll-shell:hover .catalog-filters__scrollbar>span {
        background: rgba(17, 17, 17, 0.52);
    }

    .catalog-filters__head,
    .catalog-results__bar,
    .catalog-active-filters {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
        padding-bottom: var(--space-sm);
    }

    .catalog-filters__head h2,
    .catalog-results__bar h2 {
        font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem);
        letter-spacing: -0.02em;
    }

    .catalog-filters__head a,
    .catalog-active-filters a {
        color: var(--color-muted);
        font-size: 0.9rem;
        text-decoration: underline;
        text-underline-offset: 0.25em;
    }

    .catalog-search,
    .catalog-sort label {
        display: grid;
        gap: 0.45rem;
        color: var(--color-muted);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding-block-end: var(--space-sm);
    }

    .catalog-search input,
    .catalog-sort select,
    .catalog-price-range__fields input {
        width: 100%;
        min-height: 46px;
        padding: 0.75rem 1.8rem 0.75rem 0.9rem;
        font-weight: 600;
        color: var(--color-ink);
        background-color: #f7f7f7;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        outline: none;
        transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
    }

    .catalog-search input:focus,
    .catalog-sort select:focus,
    .catalog-price-range__fields input:focus {
        background-color: #fff;
        border-color: var(--color-ink);
    }

    .catalog-filter-group {
        border-block-start: 1px solid var(--color-line);
        padding-block-start: var(--space-sm);
        padding-block-end: var(--space-sm);
    }

    .catalog-filter-group summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        font-weight: 800;
        list-style: none;
    }

    .catalog-filter-group summary::-webkit-details-marker {
        display: none;
    }

    .catalog-filter-group summary::after {
        content: '';
        width: 0.55rem;
        height: 0.55rem;
        border-inline-end: 1.5px solid currentColor;
        border-block-end: 1.5px solid currentColor;
        color: var(--color-muted);
        transform: rotate(45deg);
        transition: transform var(--dur) var(--ease);
    }

    .catalog-filter-group[open] summary::after {
        transform: rotate(225deg);
    }

    .catalog-filter-group__body {
        display: grid;
        gap: 0.25rem;
        padding-block-start: var(--space-sm);
    }

    .catalog-check {
        min-height: 0;
        padding-block: 0.15rem;
        font-size: 0.95rem;
    }

    .catalog-price-range {
        display: grid;
        gap: var(--space-xs);
        padding-block-start: var(--space-sm);
    }

    .catalog-price-range__fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-xs);
    }

    .catalog-price-range__fields label {
        display: grid;
        gap: 0.35rem;
        color: var(--color-muted);
        font-size: 0.8rem;
    }

    .catalog-price-range input[type='number'] {
        appearance: textfield;
        -moz-appearance: textfield;
    }

    .catalog-price-range input[type='number']::-webkit-inner-spin-button,
    .catalog-price-range input[type='number']::-webkit-outer-spin-button {
        margin: 0;
        appearance: none;
        -webkit-appearance: none;
    }

    .catalog-price-range__slider {
        position: relative;
        height: 30px;
        margin-block: 0.15rem;
        cursor: pointer;
        touch-action: pan-y;
    }

    .catalog-price-range__track {
        position: absolute;
        inset: 50% 0 auto;
        height: 4px;
        overflow: hidden;
        background: var(--color-line);
        border-radius: 999px;
        transform: translateY(-50%);
    }

    .catalog-price-range__track span {
        position: absolute;
        inset-block: 0;
        background: var(--color-ink);
        border-radius: inherit;
    }

    .catalog-price-range__slider input[type='range'] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 30px;
        margin: 0;
        padding: 0;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        pointer-events: none;
    }

    .catalog-price-range__slider input[type='range']::-webkit-slider-runnable-track {
        height: 4px;
        background: transparent;
    }

    .catalog-price-range__slider input[type='range']::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
        margin-block-start: -7px;
        appearance: none;
        -webkit-appearance: none;
        background: #fff;
        border: 2px solid var(--color-ink);
        border-radius: 50%;
        cursor: grab;
        pointer-events: auto;
    }

    .catalog-price-range__slider input[type='range']:active::-webkit-slider-thumb {
        cursor: grabbing;
    }

    .catalog-price-range__slider input[type='range']::-moz-range-track {
        height: 4px;
        background: transparent;
    }

    .catalog-price-range__slider input[type='range']::-moz-range-thumb {
        width: 16px;
        height: 16px;
        background: #fff;
        border: 2px solid var(--color-ink);
        border-radius: 50%;
        cursor: grab;
        pointer-events: auto;
    }

    .catalog-price-range__slider input[type='range']:active::-moz-range-thumb {
        cursor: grabbing;
    }

    .catalog-price-range__slider input[type='range']:focus-visible::-webkit-slider-thumb {
        outline: 3px solid rgba(17, 17, 17, 0.18);
        outline-offset: 2px;
    }

    .catalog-price-range__caption {
        margin: 0;
        color: var(--color-muted);
        font-size: 0.72rem;
        line-height: 1.4;
        display: none;
    }

    .catalog-results {
        min-width: 0;
        display: grid;
        gap: var(--space-xs);
    }

    .catalog-results[data-loading] {
        opacity: 0.55;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .catalog-results__bar {
        padding: var(--space-sm);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        background: var(--color-surface);
    }

    .catalog-sort select {
        min-width: min(260px, 100%);
        appearance: none;
        background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
        background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
        background-size: 6px 6px, 6px 6px;
        background-repeat: no-repeat;
    }

    .catalog-sort select:focus {
        background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
        background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
        background-size: 6px 6px, 6px 6px;
        background-repeat: no-repeat;
    }

    .catalog-active-filters {
        padding: 0.8rem 1rem;
        color: var(--color-muted);
        background: rgba(255, 255, 255, 0.65);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        font-size: 0.9rem;
    }

    .catalog-results__grid {
        margin-block-start: 0;
    }

    .catalog-load-more {
        display: grid;
        margin-block-start: var(--space-sm);
    }

    .catalog-load-more[hidden] {
        display: none;
    }

    .catalog-load-more .btn {
        width: 100%;
        min-height: 54px;
    }

    .catalog-load-more .btn:disabled {
        opacity: 0.65;
        cursor: progress;
    }

    .infinite-scroll-sentinel {
        display: flex;
        min-height: 64px;
        margin-block-start: var(--space-sm);
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: var(--color-muted);
        font-size: 0.92rem;
    }

    .infinite-scroll-sentinel[hidden] {
        display: none;
    }

    .infinite-scroll-sentinel__spinner {
        width: 22px;
        height: 22px;
        border: 2px solid rgba(13, 13, 13, 0.16);
        border-top-color: var(--color-ink);
        border-radius: 50%;
        animation: infinite-scroll-spin 0.75s linear infinite;
    }

    @keyframes infinite-scroll-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .catalog-pagination .page-numbers {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        align-items: center;
        list-style: none;
        padding: 0;
    }

    .catalog-pagination .page-numbers a,
    .catalog-pagination .page-numbers span {
        display: grid;
        min-width: 42px;
        min-height: 42px;
        place-items: center;
        padding-inline: 0.8rem;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
        color: var(--color-ink);
    }

    .catalog-pagination .page-numbers .current {
        background: var(--color-ink);
        border-color: var(--color-ink);
        color: #fff;
    }

    .catalog-empty {
        display: grid;
        justify-items: start;
        gap: var(--space-sm);
        padding: var(--space-lg);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        margin-block-start: var(--space-lg);
    }

    .catalog-empty p {
        color: var(--color-muted);
    }

    .catalog-filter-toggle,
    .catalog-filters__close,
    .catalog-filters__overlay {
        display: none;
    }

    @media (min-width: 980px) {
        .catalog-listing__layout {
            grid-template-columns: minmax(260px, 310px) 1fr;
        }

        .catalog-filters {
            position: sticky;
            top: var(--catalog-filter-sticky-top, calc(var(--header-h) + var(--space-md)));
            height: var(--catalog-filter-height, calc(100vh - var(--header-h) - var(--space-md)));
            max-height: var(--catalog-filter-height, calc(100vh - var(--header-h) - var(--space-md)));
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

    }

    @media (max-width: 979px) {
        .catalog-listing {
            padding-block-end: var(--space-sm);
        }

        .catalog-results {
            position: relative;
            padding-block-end: calc(54px + var(--space-md));
        }

        .catalog-filter-toggle {
            position: absolute;
            inset-inline: 0;
            inset-block-end: 0;
            z-index: 20;
            display: inline-flex;
            width: 100%;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            min-height: 54px;
            color: #fff;
            background: var(--color-ink);
            border-radius: var(--radius-pill);
            box-shadow: var(--shadow-lg);
            font-size: 0.82rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .catalog-filter-toggle.is-fixed {
            position: fixed;
            inset-inline: var(--shell-pad);
            inset-block-end: max(1rem, env(safe-area-inset-bottom));
            z-index: 180;
            width: auto;
        }

        .catalog-filter-toggle.is-at-end {
            position: absolute;
            inset-inline: 0;
            inset-block-end: 0;
            width: 100%;
        }

        .catalog-filter-toggle__count {
            display: grid;
            min-width: 24px;
            height: 24px;
            place-items: center;
            padding-inline: 0.35rem;
            color: var(--color-ink);
            background: #fff;
            border-radius: var(--radius-pill);
            font-size: 0.75rem;
            letter-spacing: 0;
        }

        .catalog-filters__overlay {
            position: fixed;
            inset: 0;
            z-index: 190;
            display: block;
            background: rgba(0, 0, 0, 0.42);
            backdrop-filter: blur(8px);
        }

        .catalog-filters__overlay[hidden] {
            display: none;
        }

        .catalog-filters {
            --catalog-filter-top: calc(44px + var(--space-sm) + var(--space-xs));
            position: fixed;
            inset: var(--catalog-filter-top) 0 0;
            z-index: 200;
            width: 100%;
            height: auto;
            max-height: none;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            overscroll-behavior: contain;
            border: 0;
            border-radius: 0;
            box-shadow: var(--shadow-lg);
            transform: translate3d(0, 100%, 0);
            visibility: hidden;
            pointer-events: none;
            transition:
                transform var(--dur) var(--ease),
                visibility 0s linear var(--dur);
        }

        .catalog-filters.is-open {
            transform: translate3d(0, 0, 0);
            visibility: visible;
            pointer-events: auto;
            transition:
                transform var(--dur) var(--ease),
                visibility 0s;
        }

        .catalog-filters.is-open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transition:
                opacity var(--dur) var(--ease),
                visibility 0s;
        }

        .catalog-filters__scroll {
            padding-block-end: max(var(--space-md), env(safe-area-inset-bottom));
            overscroll-behavior: contain;
        }

        .catalog-filters__head {
            flex: 0 0 auto;
            margin-inline: calc(var(--space-md) * -1);
            padding: max(var(--space-md), env(safe-area-inset-top)) var(--space-md) var(--space-md);
            background: rgba(255, 255, 255, 0.96);
            border-block-end: 1px solid var(--color-line);
            backdrop-filter: blur(12px);
            overflow-x: hidden;
        }

        .catalog-filters__head h2 {
            margin-inline-end: auto;
        }

        .catalog-filters__close {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            border: 1px solid var(--color-line);
            border-radius: 50%;
        }

        .catalog-filters__form>.btn,
        .catalog-filters__button {
            flex: 0 0 auto;
            position: sticky;
            bottom: 0;
            z-index: 4;
            width: 100%;
            margin-block-end: env(safe-area-inset-bottom);
            box-shadow: 0 -12px 24px rgba(17, 17, 17, 0.08);
        }
    }

    @media (max-width: 760px) {
        .catalog-hero {
            padding-block: 0 var(--space-hero-after);
        }

        .catalog-listing {
            padding-block-start: 0;
        }

        .catalog-filters__form,
        .catalog-results__bar {
            padding: var(--space-sm);
            overflow-x: hidden;
        }

        .catalog-filters__head {
            margin-inline: calc(var(--space-sm) * -1);
            padding: max(var(--space-sm), env(safe-area-inset-top)) var(--space-sm) var(--space-sm);
            overflow-x: hidden;
        }

        .catalog-results__bar {
            align-items: stretch;
            flex-direction: column;
        }

        .catalog-sort select {
            min-width: 100%;
        }

        .catalog-active-filters {
            align-items: flex-start;
            flex-direction: column;
            gap: 0.35rem;
        }
    }

    /* ---------- Filters (пилюли слева + текст-табы справа) ---------- */
    .filter-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-end;
        gap: var(--space-md);
        margin-block-start: var(--space-sm);
    }

    .filter {
        display: flex;
        gap: var(--space-2xs);
    }

    .filter--pills {
        flex-wrap: wrap;
    }

    .filter-tabs-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 0.65rem;
        max-width: 100%;
    }

    .filter--tabs {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }

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

    .filter-tabs-nav {
        display: inline-flex;
        gap: 0.35rem;
    }

    .filter-tabs-nav__btn {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border: 1px solid var(--color-line);
        border-radius: 999px;
        color: var(--color-ink);
        background: var(--color-surface);
        font-size: 1.1rem;
        line-height: 1;
        transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }

    .filter-tabs-nav__btn:hover {
        border-color: var(--color-ink);
    }

    .filter-tabs-nav__btn:disabled {
        opacity: 0.35;
        pointer-events: none;
    }

    .filter__btn {
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
        background: none;
        transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }

    .filter--pills .filter__btn {
        padding: 0.6em 1.2em;
        color: var(--color-ink);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-pill);
    }

    .filter--pills .filter__btn:hover {
        border-color: var(--color-ink);
    }

    .filter--pills .filter__btn[aria-pressed='true'] {
        border-color: var(--color-ink);
    }

    .filter--tabs .filter__btn {
        padding-block: 0.4em;
        color: var(--color-muted);
        border-bottom: 2px solid transparent;
    }

    .filter--tabs .filter__btn:hover {
        color: var(--color-ink);
    }

    .filter--tabs .filter__btn[aria-pressed='true'] {
        color: var(--color-ink);
        border-bottom-color: var(--color-ink);
    }

    .filter__btn.is-disabled,
    .filter__btn[aria-disabled='true'],
    .filter__btn:disabled {
        opacity: 0.38;
        pointer-events: none;
    }

    /* ---------- Product grid + card ---------- */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-sm);
    }

    .product-card {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: var(--space-md);
        padding-block-start: var(--space-md);
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        min-width: 0;
        transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    }

    .product-card:hover,
    .product-card:focus-within {
        z-index: 20;
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

    .product-card__gallery-wrap {
        position: relative;
        overflow: hidden;
        padding-block-start: 2.75rem;
    }

    .product-card__slide-link {
        display: grid;
        place-items: center;
        width: 100%;
        height: 100%;
        overflow: hidden;
        touch-action: pan-x;
    }

    .product-card__slide img:not([src]) {
        visibility: hidden;
    }

    .product-card__badge {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        box-sizing: border-box;
        height: 26px;
        min-height: 26px;
        padding: 0 0.65rem;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        line-height: 1.6;
        white-space: nowrap;
        border: 1px solid var(--color-line);
        border-radius: 999px;
        pointer-events: auto;
    }

    .product-card__badge {
        color: var(--color-ink);
        text-decoration: none;
        background: #fff;
        transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
    }

    .product-card__badge:hover {
        background: var(--color-ink);
        color: #fff;
    }

    .product-card__badge--installment,
    .product-card__badge--installment:hover {
        color: #fff;
        background: var(--color-green);
        border-color: var(--color-green);
    }

    .product-card__badge--gift,
    .product-card__badge--gift:hover {
        color: #111;
        background: #ffe14a;
        border-color: #f3c400;
    }

    .product-card__badge--gift .product-card__badge-icon {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
    }

    .product-card__badge--gift .product-card__badge-icon svg {
        display: block;
        width: 0.85rem;
        height: 0.85rem;
    }

    .product-card__badge-gift-suffix {
        display: none;
    }

    .product-card__badges-shell {
        position: absolute;
        z-index: 3;
        inset: 1rem;
        min-width: 0;
        pointer-events: none;
    }

    .product-card__badges {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.2rem;
        width: 100%;
    }

    .product-card__badges-start {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.35rem;
        min-width: 0;
        pointer-events: auto;
    }

    .product-card__badges-end {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 0.35rem;
        margin-inline-start: auto;
        min-width: 0;
        max-width: min(58%, 11rem);
        pointer-events: none;
    }

    .product-card__badge--installment {
        pointer-events: none;
    }

    .product-card__gift {
        --gift-size: 2.55rem;
        position: relative;
        display: block;
        width: var(--gift-size);
        height: var(--gift-size);
        margin-inline-start: auto;
        flex: 0 0 auto;
        isolation: isolate;
        pointer-events: auto;
        cursor: help;
    }

    .product-card__gift-ring {
        display: none;
    }

    .product-card__gift-photo {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: grid;
        place-items: center;
        box-sizing: border-box;
        overflow: hidden;
        padding: 0.35rem;
        border: 3px solid var(--color-ink);
        border-radius: 50%;
        background: #fff;
    }

    .product-card__gift-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .product-card__gift-icon {
        position: absolute;
        z-index: 2;
        right: -4px;
        bottom: -4px;
        display: grid;
        place-items: center;
        width: 1.05rem;
        height: 1.05rem;
        color: #f5f5f5;
        background: #111;
        border-radius: 50%;
        box-shadow: 0 0 0 2px #fff;
    }

    .product-card__gift-icon svg {
        width: 10px;
        height: 10px;
    }

    .product-card__gift-tip {
        position: absolute;
        top: calc(100% + 0.5rem);
        right: 0;
        z-index: 4;
        width: max-content;
        max-width: 11.5rem;
        padding: 0.4rem 0.55rem;
        color: #f5f5f5;
        background: #111;
        border-radius: 6px;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: 0.01em;
        text-align: left;
        white-space: normal;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
        pointer-events: none;
    }

    .product-card__gift-tip::before {
        content: '';
        position: absolute;
        top: -4px;
        right: 0.85rem;
        border: 4px solid transparent;
        border-top: 0;
        border-bottom-color: #111;
    }

    .product-card__gift:hover .product-card__gift-tip,
    .product-card__gift:focus-visible .product-card__gift-tip {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    @media (min-width: 768px) {
        .product-card {
            padding: 0.85rem;
        }

        .product-card__gallery-wrap {
            padding-block-start: 3.5rem;
        }

        .product-card__badge {
            height: 28px;
            min-height: 28px;
            padding: 0 0.75rem;
        }

        .product-card__badges-end {
            max-width: min(72%, 15rem);
        }

        .product-card__badge--gift .product-card__badge-icon {
            display: none;
        }

        .product-card__badge-gift-suffix {
            display: inline;
        }

        .product-card__gift {
            --gift-size: 3rem;
        }
    }

    .product-card__price-wrap {
        display: grid;
        justify-items: start;
        gap: 0.45rem;
        min-width: 0;
    }

    .product-card__availability {
        font-size: 0.80rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        color: var(--color-dark);
        position: relative;
        padding-left: 10px;
    }

    .product-card__availability::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }

    .is-in-stock::before {
        background-color: var(--color-green);
    }

    .is-out-of-stock::before {
        background-color: var(--color-yellow);
    }

    .product-card__availability.is-in-stock {
        color: var(--color-green);
    }

    .product-card__availability.is-out-of-stock {
        color: var(--color-yellow);
    }

    .product-card__gallery {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        list-style: none;
        aspect-ratio: 1 / 1;
        overflow-x: auto;
        overflow-y: hidden;
        clip-path: inset(0 8px);
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    @media (hover: hover) and (pointer: fine) {
        .product-card__gallery-wrap:hover .product-card__gallery {
            scroll-snap-type: none;
        }
    }

    .product-card__gallery[hidden] {
        display: none !important;
    }

    .product-card__gallery::-webkit-scrollbar {
        display: none;
    }

    .product-card__slide {
        min-width: 0;
        height: 100%;
        overflow: hidden;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        display: grid;
        place-items: center;
    }

    .product-card__slide img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: contain;
        object-position: center;
        transform: scale(1.08);
        pointer-events: none;
        user-select: none;
        -webkit-user-drag: none;
    }

    .product-card__slide--empty {
        align-self: stretch;
    }

    .product-card__gallery-nav {
        position: absolute;
        z-index: 4;
        top: 50%;
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        padding: 0;
        color: var(--color-ink);
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid var(--color-line);
        border-radius: 50%;
        box-shadow: var(--shadow-sm);
        font-size: 1.4rem;
        line-height: 1;
        transform: translateY(-50%);
        cursor: pointer;
        transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
    }

    .product-card__gallery-nav--prev {
        inset-inline-start: var(--space-2xs);
    }

    .product-card__gallery-nav--next {
        inset-inline-end: var(--space-2xs);
    }

    .product-card__gallery-nav[hidden] {
        display: none;
    }

    .product-card__gallery-nav:disabled {
        opacity: 0.3;
        cursor: default;
    }

    .product-card__gallery-nav:not(:disabled):hover {
        background: #fff;
    }

    /* Серая плашка вместо отсутствующего изображения товара */
    .media-placeholder {
        display: grid;
        place-items: center;
        gap: 0.5rem;
        width: 100%;
        height: 100%;
        min-height: 100%;
        color: color-mix(in srgb, var(--color-muted) 65%, transparent);
        background: var(--color-bg-soft, #f1f1f1);
        border-radius: inherit;
    }

    .media-placeholder svg {
        opacity: 0.65;
    }

    .media-placeholder__text {
        font-size: 0.8rem;
        letter-spacing: 0.01em;
        color: var(--color-muted);
    }

    /* Тики-скроллбар под фото (по одному на слайд) */
    .product-card__scrollbar {
        display: flex;
        gap: 4px;
        margin-block-start: var(--space-2xs);
    }

    .product-card__tick {
        flex: 1;
        height: 2px;
        border-radius: 2px;
        background: var(--color-line);
        cursor: pointer;
        transition: background var(--dur) var(--ease);
    }

    .product-card__tick.is-active {
        background: var(--color-ink);
    }

    .product-card__info {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: var(--space-2xs);
        min-width: 0;
        margin-block-start: var(--space-md);
    }

    .product-card__title {
        font-size: 1rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .product-card__title a {
        color: inherit;
        text-decoration: none;
        transition: color var(--dur) var(--ease);
    }

    .product-card__title a:hover {
        color: var(--color-muted);
    }

    .product-card__meta {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.78rem;
        color: var(--color-muted);
    }

    .product-card__type {
        font-size: 0.85rem;
        color: var(--color-muted);
    }

    .rating {
        display: inline-flex;
        gap: 1px;
        color: var(--color-line);
        font-size: 0.85rem;
    }

    .product-card__rating-link {
        display: inline-flex;
        color: inherit;
        text-decoration: none;
    }

    .rating__star.is-on {
        color: var(--color-ink);
    }

    .product-card__colors {
        display: flex;
        align-items: center;
        gap: var(--space-2xs);
        width: 100%;
        min-width: 0;
        font-size: 0.85rem;
        color: var(--color-muted);
        margin-block-start: auto;
    }

    .product-card__colors>span {
        flex: 0 0 auto;
    }

    .swatches {
        display: flex;
        flex: 1 1 0;
        gap: 0.4rem;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }

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

    .product-card__colors-nav {
        display: grid;
        flex: 0 0 auto;
        place-items: center;
        width: 28px;
        height: 28px;
        border: 1px solid rgba(17, 17, 17, 0.12);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.82);
        color: var(--color-ink);
        font-size: 1.15rem;
        line-height: 1;
        transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }

    .product-card__colors-nav[hidden] {
        display: none;
    }

    .product-card__colors-nav:disabled {
        opacity: 0.35;
        cursor: default;
    }

    .product-card__colors-nav:not(:disabled):hover {
        border-color: rgba(17, 17, 17, 0.55);
    }

    .swatch {
        display: grid;
        flex: 0 0 auto;
        place-items: center;
        width: 30px;
        height: 30px;
        padding: 1px;
        border: 1px solid var(--color-line);
        border-radius: 4px;
        overflow: hidden;
        transition: border-color var(--dur) var(--ease);
    }

    .swatch img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 3px;
    }

    .swatch span {
        width: 100%;
        height: 100%;
        border-radius: 3px;
        background: var(--swatch-color, #e6e6e6);
    }

    .swatch:hover {
        border-color: var(--color-ink);
    }

    .swatch[aria-pressed='true'] {
        border-color: var(--color-ink);
    }

    .product-card__buy {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        margin-block-start: var(--space-sm);
    }

    .price {
        display: flex;
        flex-direction: column-reverse;
        line-height: 1.2;
    }

    .price__now {
        font-size: 1.05rem;
        font-weight: 700;
    }

    .price__old {
        font-size: 0.82rem;
        color: var(--color-muted);
        text-decoration: line-through;
    }

    .product-card__cart {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5em;
        width: 100%;
        padding: 0.85em 1em;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--color-ink);
        background: transparent;
        border: 1px solid var(--color-ink);
        border-radius: var(--radius-pill);
        transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
    }

    .product-card__cart:hover {
        background: var(--color-ink);
        color: #fff;
    }

    .product-card__cart.is-in-cart,
    .product-card__cart.is-in-cart:hover,
    .product-card__cart.is-in-cart:focus,
    .product-card__cart.is-in-cart:focus-visible {
        background: transparent;
        color: var(--color-ink);
        border-color: var(--color-ink);
        outline: none;
        transform: none;
        box-shadow: none;
    }

    .product-card__cart-remove-icon {
        display: none;
    }

    .product-card__cart-remove-icon svg {
        width: 11px;
        height: 11px;
    }

    .product-card__cart.is-in-cart .product-card__cart-icon {
        display: none;
    }

    .product-card__cart.is-in-cart .product-card__cart-remove-icon {
        display: flex;
    }

    .product-card__cart:disabled {
        background: var(--color-ink);
        color: #fff;
        border-color: var(--color-ink);
        cursor: default;
        pointer-events: none;
    }

    .product-card__cart:disabled:hover {
        background: var(--color-ink);
        color: #fff;
    }

    .best-offers__more {
        margin-block-start: var(--space-md);
    }

    .best-offers__more .btn {
        width: 100%;
        padding-block: 1.1em;
    }

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

    .best-offers .filter-bar {
        margin-block-end: var(--space-sm);
    }

    .best-offers .filter--tabs {
        flex-wrap: wrap;
        overflow: visible;
    }

    .best-offers .product-grid {
        min-height: clamp(360px, 34vw, 520px);
    }

    .product-skeleton {
        display: none;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
        margin-block-start: var(--space-lg);
        min-height: clamp(360px, 34vw, 520px);
    }

    /* Узкие телефоны: одна карточка в ряд, без сжатия бейджей. */
    @media (max-width: 320px) {
        .product-grid,
        .product-skeleton {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .product-skeleton__card {
        display: grid;
        gap: 0.75rem;
        align-content: start;
        padding: var(--space-md);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
    }

    .product-skeleton__media,
    .product-skeleton__line,
    .product-skeleton__buy {
        display: block;
        border-radius: var(--radius-sm);
        background: linear-gradient(90deg, #ececec 0%, #f7f7f7 45%, #ececec 90%);
        background-size: 220% 100%;
        animation: skeleton-shimmer 1.4s var(--ease) infinite;
    }

    .product-skeleton__media {
        aspect-ratio: 4 / 3;
    }

    .product-skeleton__line {
        width: 80%;
        height: 14px;
    }

    .product-skeleton__line--title {
        width: 92%;
        height: 18px;
        margin-block-start: 0.35rem;
    }

    .product-skeleton__line--short {
        width: 56%;
    }

    .product-skeleton__buy {
        width: 100%;
        height: 42px;
        border-radius: var(--radius-pill);
        margin-block-start: 0.4rem;
    }

    @media (prefers-reduced-motion: reduce) {

        .product-skeleton__media,
        .product-skeleton__line,
        .product-skeleton__buy {
            animation: none;
        }
    }

    .best-offers[data-filtering] .product-grid,
    .best-offers[data-filtering] .best-offers__empty,
    .best-offers[data-filtering] .best-offers__more {
        display: none;
    }

    .best-offers[data-filtering] .product-skeleton {
        display: grid;
    }

    .best-offers__empty {
        display: none;
        margin-block-start: var(--space-md);
        color: var(--color-muted);
    }

    .best-offers[data-empty] .best-offers__empty {
        display: block;
    }

    .best-offers[data-empty] .best-offers__more {
        display: none;
    }

    /* Десктоп: многоколоночная сетка, цена + квадрат-иконка корзины в один ряд */
    @media (min-width: 768px) {
        .product-grid {
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: var(--space-md);
        }

        .product-skeleton {
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: var(--space-md);
        }

        .product-card__buy {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

        .price {
            flex-direction: row;
            align-items: baseline;
            gap: 0.4rem;
        }

        .product-card__cart {
            width: 40px;
            height: 40px;
            flex: none;
            padding: 0;
            border-radius: var(--radius-sm);
        }

        .product-card__cart-icon {
            display: flex;
        }

        .product-card__cart-label {
            display: none;
        }
    }

    /* Узкие экраны: показываем свочи компактно, чтобы они не ломали карточку. */
    @media (max-width: 480px) {
        .product-card__colors {
            gap: 0.35rem;
            font-size: 0.74rem;
        }

        .product-card__colors>span {
            display: none;
        }

        .product-card__colors-nav {
            width: 24px;
            height: 24px;
            font-size: 1rem;
        }

        .swatches {
            gap: 0.3rem;
        }

        .swatch {
            width: 26px;
            height: 26px;
        }
    }

    /* На таче карточки не подпрыгивают; бейджи остаются поверх фото. */
    @media (max-width: 767px) {

        .product-card:hover,
        .product-card:focus-within {
            z-index: auto;
            transform: none;
            box-shadow: none;
        }
    }

    /* ---------- Single solution ---------- */
    .solution-page__article {
        display: grid;
        gap: var(--space-lg);
    }

    .solution-page__header {
        max-width: 820px;
    }

    .solution-page__media {
        border-radius: var(--radius-md);
        overflow: hidden;
        background: var(--color-surface);
    }

    .solution-page__media img {
        width: 100%;
        max-height: 560px;
        object-fit: cover;
    }

    .solution-page__content,
    .solution-page__details {
        max-width: 820px;
        color: var(--color-ink-soft);
    }

    .solution-page__details {
        display: grid;
        gap: var(--space-md);
        padding: var(--space-lg);
        background: var(--color-surface);
        border-radius: var(--radius-md);
    }

    .solution-page__details h2,
    .solution-page__products h2 {
        color: var(--color-ink);
        font-size: var(--fs-h3);
    }

    .solution-page__details ul {
        padding-inline-start: 1.2rem;
    }

    .solution-page__price {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: baseline;
    }

    .solution-page__price strong {
        color: var(--color-ink);
        font-size: 1.35rem;
    }

    .solution-page__products {
        display: grid;
        gap: var(--space-md);
    }

    /* ---------- Single solution: figma layout ---------- */
    .solution-single {
        background:
            radial-gradient(circle at 100% 22%, rgba(255, 255, 255, 0.9), transparent 16rem),
            #f1f1ef;
        color: var(--color-ink);
    }

    .solution-single .section {
        padding-block: var(--space-block);
    }

    .solution-single .solution-lead {
        padding-block-start: var(--space-block);
    }

    .solution-single h2 {
        font-size: var(--fs-h2);
        line-height: var(--lh-heading);
        letter-spacing: -0.02em;
        margin-block-end: var(--space-sm);
    }

    .solution-single__hero {
        padding-block: 0 var(--space-hero-after);
    }

    .solution-single__hero-inner {
        display: grid;
        gap: var(--space-lg);
        align-items: start;
    }

    .solution-single__copy {
        display: grid;
        align-content: start;
        gap: var(--space-hero-after);
        min-width: 0;
    }

    .solution-single__summary {
        display: grid;
        gap: var(--space-sm);
    }

    .solution-single__badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        align-self: flex-start;
    }

    .solution-single__badges span {
        border: 1px solid rgba(17, 17, 17, 0.12);
        border-radius: 999px;
        background: #fff;
        color: var(--color-muted);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        padding: 0.45rem 0.65rem;
        text-transform: uppercase;
    }

    .solution-single__summary h1 {
        max-width: 28ch;
        font-size: clamp(1.55rem, 1.15rem + 1.6vw, 2.4rem);
    }

    .solution-single__models {
        max-width: 42ch;
        color: var(--color-muted);
        font-size: 0.95rem;
    }

    .solution-single__lead {
        max-width: 600px;
    }

    .solution-single__facts {
        display: grid;
        gap: 0.65rem;
        margin: 0;
        max-width: 520px;
        padding-block: var(--space-xs);
        border-block: 1px solid rgba(17, 17, 17, 0.1);
    }

    .solution-single__facts div {
        display: flex;
        justify-content: space-between;
        gap: var(--space-md);
    }

    .solution-single__facts dt {
        color: var(--color-muted);
    }

    .solution-single__facts dd {
        margin: 0;
        font-weight: 700;
        text-align: end;
    }

    .solution-single__price {
        display: grid;
        gap: 0.2rem;
    }

    .solution-single__price strong {
        font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
        letter-spacing: -0.04em;
    }

    .solution-single__price span {
        color: var(--color-muted);
        font-size: 0.9rem;
    }

    .solution-single__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .solution-promos {
        position: absolute;
        z-index: 2;
        inset: var(--space-xs) var(--space-xs) auto auto;
        display: grid;
        justify-items: end;
        gap: 0.35rem;
        max-width: min(72%, 260px);
        pointer-events: none;
    }

    .solution-promos--single {
        position: static;
        display: flex;
        flex-wrap: wrap;
        justify-items: initial;
        max-width: none;
    }

    .solution-promo {
        display: inline-flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.35rem;
        padding: 0.45rem 0.8rem;
        color: #fff;
        background: var(--color-ink);
        border-radius: 999px;
        font-size: 0.74rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .solution-promo svg {
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
    }

    .solution-promo--installment {
        color: #fff;
        background: linear-gradient(180deg, #3aa66a 0%, #2e8f59 100%);
        align-items: center;
        box-shadow: none;
    }

    .solution-promo--gift {
        color: #2a1c06;
        background: #e8c04a;
        border: 0;
        display: inline-flex;
        align-items: center;
        justify-self: start;
        border-radius: 999px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
    }

    .solution-promo small {
        font: inherit;
        font-weight: 500;
    }

    .solution-single__summary .btn {
        width: fit-content;
    }

    .solution-single__media {
        overflow: hidden;
        border-radius: 20px;
        background: #fff;
        margin: 0;
        box-shadow: 0 24px 54px rgba(17, 17, 17, 0.08);
    }

    .solution-single__media img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 100%;
        min-height: clamp(320px, 38vw, 560px);
        object-fit: cover;
    }

    .solution-content h2 {
        font-size: var(--fs-h2);
        margin-block-end: var(--space-sm);
    }

    .solution-content__text,
    .solution-content__text p {
        color: var(--color-ink);
        font-size: var(--fs-body);
        line-height: var(--lh-body);
        max-width: 68ch;
    }

    .solution-content__text p+p {
        margin-block-start: var(--space-sm);
    }

    .solution-content__text h3 {
        font-size: var(--fs-h3);
        margin-block: var(--space-md) var(--space-xs);
    }

    .solution-content__text h3:first-child {
        margin-block-start: 0;
    }

    .solution-composition__list {
        display: grid;
        gap: 0.85rem;
        max-width: 980px;
    }

    .solution-composition__item {
        display: grid;
        grid-template-columns: 128px minmax(0, 1fr);
        gap: 1.15rem;
        align-items: center;
        border-bottom: 1px solid rgba(17, 17, 17, 0.08);
        padding-block: 1rem;
    }

    .solution-composition__media,
    .solution-composition__item img,
    .solution-composition__icon {
        display: grid;
        place-items: center;
        width: 128px;
        height: 128px;
        overflow: hidden;
        border-radius: 14px;
        background: #fff;
    }

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

    .solution-composition__icon {
        color: var(--color-muted);
        background: var(--color-surface-soft);
    }

    .solution-composition__icon svg {
        width: 48px;
        height: 48px;
    }

    .solution-composition__item>div {
        min-width: 0;
    }

    .solution-composition__heading {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.4rem 0.7rem;
        margin-block-end: 0.3rem;
    }

    .solution-composition__item h3 {
        font-size: 1rem;
        margin: 0;
    }

    .solution-composition__sep {
        width: 1px;
        height: 0.85em;
        background: currentColor;
        opacity: 0.28;
        align-self: center;
    }

    .solution-composition__link {
        color: inherit;
        font-size: 0.86rem;
        text-decoration: underline;
        text-underline-offset: 0.22em;
        text-decoration-thickness: 1px;
    }

    .solution-composition__link:hover {
        color: var(--color-accent);
    }

    .solution-composition__item p,
    .solution-adapt p,
    .solution-engineer p,
    .solution-lead p,
    .solution-related__card p {
        color: var(--color-muted);
    }

    .solution-adapt__inner,
    .solution-lead__inner {
        display: grid;
        gap: var(--space-lg);
        align-items: center;
    }

    .solution-adapt__inner>img {
        width: 100%;
        border-radius: 18px;
        object-fit: cover;
    }

    .solution-adapt__inner>div {
        max-width: 560px;
    }

    .solution-engineer {
        padding-block-start: 0;
    }

    .solution-engineer__inner {
        display: grid;
        gap: var(--space-lg);
        align-items: stretch;
        overflow: hidden;
        border-radius: 20px;
        background: #fff;
    }

    .solution-engineer__inner>div {
        padding: clamp(1.4rem, 4vw, 3rem);
    }

    .solution-engineer blockquote {
        margin: 0;
        font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.32rem);
        line-height: 1.45;
    }

    .solution-engineer__author {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        margin-block-start: var(--space-sm);
        font-weight: 400;
    }

    .solution-engineer__author strong {
        color: var(--color-ink);
        font-weight: 700;
    }

    .solution-engineer__author span {
        color: var(--color-muted);
    }

    .solution-engineer__inner>img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 320px;
        object-fit: cover;
        object-position: 50% 18%;
    }

    .solution-lead {
        position: relative;
        overflow: hidden;
        padding-block: var(--space-block);
        background: #111;
        color: #fff;
    }

    .solution-lead::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 78% 30%, rgba(255, 255, 255, 0.16), transparent 18rem),
            linear-gradient(90deg, rgba(17, 17, 17, 0.96), rgba(17, 17, 17, 0.82));
    }

    .solution-lead__inner {
        position: relative;
        z-index: 1;
    }

    .solution-lead h2 {
        max-width: 660px;
        color: #fff;
    }

    .solution-lead p {
        max-width: 520px;
        color: rgba(255, 255, 255, 0.72);
    }

    .solution-lead__form {
        display: grid;
        gap: 0.75rem;
        width: min(100%, 420px);
    }

    .solution-lead__form label:not(.consent) {
        display: grid;
        gap: 0.35rem;
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.85rem;
    }

    .solution-lead__form input:not([type='checkbox']) {
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        padding: 0.95rem 1rem;
    }

    .solution-lead__form .btn {
        justify-content: center;
        width: 100%;
    }

    .solution-related__grid {
        display: grid;
        gap: var(--space-sm);
        align-items: stretch;
    }

    .solution-related__card {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        border-radius: 18px;
        background: #fff;
    }

    .solution-related__media {
        position: relative;
        flex: 0 0 auto;
        overflow: hidden;
        aspect-ratio: 4 / 3;
        background: var(--color-surface-soft);
    }

    .solution-related__media img,
    .solution-related__media .media-placeholder {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
    }

    .solution-related__body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        gap: 0.55rem;
        padding: 1rem;
        box-sizing: border-box;
    }

    .solution-related__card h3 {
        display: -webkit-box;
        min-height: calc(1.2em * 2);
        overflow: hidden;
        font-size: 1rem;
        line-height: 1.2;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .solution-related__card p {
        display: -webkit-box;
        flex: 1 1 auto;
        min-height: calc(1.55em * 3);
        overflow: hidden;
        line-height: 1.55;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .solution-related__price {
        display: block;
        color: var(--color-ink);
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.2;
    }

    .solution-related__card .btn {
        width: 100%;
        justify-content: center;
        margin-block-start: auto;
    }

    .solution-related__card:hover .btn--outline {
        --btn-bg: var(--color-ink);
        --btn-fg: #fff;
    }

    .solution-offers .product-grid {
        margin-block-start: var(--space-md);
    }

    @media (min-width: 900px) {
        .solution-single__hero-inner {
            grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.95fr);
        }

        .solution-single__media {
            position: sticky;
            top: calc(var(--header-h) + var(--space-md));
            z-index: 1;
            align-self: start;
        }

        .admin-bar .solution-single__media {
            top: calc(var(--header-h) + 32px + var(--space-md));
        }

        .solution-single__media img,
        .solution-single__media .media-placeholder {
            max-height: calc(100vh - var(--header-h) - var(--space-2xl));
        }

        .solution-adapt__inner {
            grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1fr);
        }

        .solution-engineer__inner {
            grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
            gap: 0;
        }

        .solution-lead__inner {
            grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
        }

        .solution-lead__form {
            justify-self: end;
        }

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

    /* ---------- Solutions archive ---------- */
    .solutions-archive {
        background:
            radial-gradient(circle at 100% 12%, rgba(255, 255, 255, 0.92), transparent 18rem),
            #f1f1ef;
        color: var(--color-ink);
    }

    .solutions-archive__hero {
        background: #efefed;
        padding-block: 0 var(--space-hero-after);
    }

    .solutions-archive__hero-inner {
        display: grid;
        gap: var(--space-stack);
        align-items: center;
        min-height: clamp(280px, 32vw, 420px);
        padding: var(--space-hero-pad);
        background: var(--hero-media, none) no-repeat bottom center / cover;
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .solutions-archive__hero-copy {
        display: grid;
        gap: var(--space-stack);
        max-width: 820px;
    }

    .solutions-archive__hero h1 {
        max-width: 17ch;
    }

    .solutions-archive__hero p:not(.eyebrow) {
        max-width: 620px;
    }

    .solutions-archive__hero-copy .btn {
        width: fit-content;
        margin-block-start: var(--space-md);
    }

    .solutions-archive__brands {
        padding-block: var(--space-lg) var(--space-md);
    }

    .solutions-archive__brands h2,
    .solutions-archive__section-head h2 {
        font-size: var(--fs-h2);
        line-height: var(--lh-heading);
        letter-spacing: -0.02em;
    }

    .solutions-archive__brand-grid {
        display: grid;
        /* grid-template-columns: repeat(3, minmax(0, 1fr));*/
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.75rem;
        margin-block-start: var(--space-md);
    }

    .solutions-archive__brand-grid span {
        display: grid;
        min-height: 86px;
        place-items: center;
        padding: 1rem;
        /*background: rgba(255, 255, 255, 0.72);*/
        background: var(--color-surface-soft);
        /*  border: 1px solid rgba(17, 17, 17, 0.08);*/
        border-radius: var(--radius-sm);
        color: var(--color-ink);
        font-size: clamp(1rem, 0.8rem + 0.8vw, 1.45rem);
        font-weight: 900;
        letter-spacing: -0.04em;
        text-transform: uppercase;
    }

    .solutions-archive__brand-grid img {
        width: min(100%, 260px);
        max-height: 58px;
        object-fit: contain;
    }

    .solutions-archive__listing {
        padding-block: 0 var(--space-block);
    }

    .solutions-archive__section-head {
        margin-block-end: var(--space-sm);
    }

    .solutions-archive__toolbar {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: var(--space-md);
        padding: var(--space-md);
        border: 1px solid rgba(17, 17, 17, 0.08);
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.68);
    }

    .solutions-archive__toolbar h2 {
        font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem);
        letter-spacing: -0.04em;
    }

    .solutions-archive__toolbar>a,
    .solutions-archive__toolbar-actions>a,
    .solutions-archive__reset a {
        color: var(--color-muted);
        font-size: 0.9rem;
        text-decoration: underline;
        text-underline-offset: 0.25em;
    }

    .solutions-archive__filters {
        display: grid;
        gap: var(--space-md);
        margin-block-start: var(--space-md);
    }

    .solutions-archive__filter-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: var(--space-lg);
        row-gap: var(--space-sm);
    }

    .solutions-archive__filter-row .solutions-archive__filter-group {
        min-width: 0;
    }

    .solutions-archive__sort {
        min-width: min(16rem, 100%);
    }

    .solutions-archive__sort label {
        gap: 0.65rem;
        padding-block-end: 0;
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.08em;
    }

    .solutions-archive__sort select {
        min-width: 16rem;
    }

    .solutions-archive__reset {
        margin: 0;
    }

    .solutions-archive__listing .shell {
        transition: opacity var(--dur) var(--ease);
    }

    .solutions-archive__listing.is-loading .shell {
        opacity: 0.55;
        pointer-events: none;
    }

    .solutions-archive__filter-group {
        display: grid;
        gap: 0.65rem;
        /*   padding: var(--space-sm);
       border: 1px solid rgba(17, 17, 17, 0.08);
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.54);*/
    }

    .solutions-archive__filter-group>span {
        color: var(--color-muted);
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .solutions-archive__filter-group>div {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .solutions-archive__filter-group .filter__btn {
        text-decoration: none;
    }

    .solutions-archive__grid {
        display: grid;
        gap: var(--space-md);
        margin-block-start: var(--space-lg);
    }

    .solutions-archive-card {
        display: grid;
        overflow: hidden;
        border: 0;
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.82);
        box-shadow: var(--shadow-sm);
        transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    }

    .solutions-archive-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

    .carousel .solutions-archive-card:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }

    .solutions-archive-card__media {
        position: relative;
        display: block;
        align-self: stretch;
        min-height: 300px;
        overflow: hidden;
        background: #fff;
    }

    .solutions-archive-card__media img,
    .solutions-archive-card__media .media-placeholder {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        transition: scale var(--dur-slow) var(--ease);
    }

    .solutions-archive-card:hover .solutions-archive-card__media img {
        scale: 1.035;
    }

    .solutions-archive-card__body {
        display: grid;
        gap: 0;
        padding: clamp(1rem, 2.5vw, 2rem);
    }

    .solutions-archive-card h2,
    .solutions-archive-card h3 {
        display: -webkit-box;
        overflow: hidden;
        font-size: var(--fs-h3);
        line-height: var(--lh-heading);
        letter-spacing: -0.03em;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .solutions-archive-card h2 a,
    .solutions-archive-card h3 a {
        text-decoration: none;
    }

    .solutions-archive-card__lead,
    .solutions-archive-card__scenario,
    .solutions-archive-card__price span {
        color: var(--color-muted);
    }



    .solutions-archive-card__facts {
        display: grid;
        gap: 0;
    }

    .solutions-archive-card__facts div {
        display: flex;
        justify-content: space-between;
        gap: var(--space-md);
    }

    .solutions-archive-card__facts dt {
        color: var(--color-muted);
    }

    .solutions-archive-card__facts dd {
        margin: 0;
        font-weight: 800;
        text-align: end;
    }

    .solutions-archive-card__list {
        display: grid;
        gap: 0.35rem;
        padding-inline-start: 1.1rem;
        color: var(--color-ink-soft);
    }

    .solutions-archive-card__footer {
        display: grid;
        gap: var(--space-sm);
        align-items: end;
    }

    .solutions-archive-card__price {
        display: grid;
        gap: 0.2rem;
    }

    .solutions-archive-card__price strong {
        font-size: clamp(1.25rem, 1rem + 0.8vw, 1.7rem);
        letter-spacing: -0.035em;
    }

    .solutions-archive-card__price span {
        display: none;
    }

    .solutions-archive-card__footer .btn {
        width: fit-content;
    }

    .solutions-archive__pagination {
        margin-block-start: var(--space-lg);
    }

    .solutions-archive-lead .lead__media::before {
        width: min(160%, 720px);
        background-image: url('../images/solutions-archive/kef-lead-waves.png');
    }

    .solutions-archive-lead .lead__media {
        min-height: clamp(380px, 38vw, 540px);
        max-height: 560px;
        padding-block-start: 0;
    }

    .solutions-archive-lead .lead__media img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: contain;
    }

    @media (max-width: 859px) {
        .solutions-archive-lead.lead {
            min-height: 0;
        }

        .solutions-archive-lead.lead::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background: url('../images/solutions-archive/kef-lead.png') calc(100% + 2rem) 58% / auto min(68%, 380px) no-repeat;
        }

        .solutions-archive-lead .lead__inner {
            grid-template-columns: minmax(0, 1fr);
        }

        .solutions-archive-lead .lead__content {
            max-width: min(100%, 34rem);
        }

        .solutions-archive-lead .lead__form {
            max-width: min(100%, 26rem);
        }

        .solutions-archive-lead .lead__media {
            display: none;
        }
    }

    @media (min-width: 760px) {
        .solutions-archive__hero-inner {
            min-height: 360px;
            padding: var(--space-hero-pad);
            background: var(--hero-media, none) no-repeat bottom center / cover;
        }

        .solutions-archive__hero-copy {
            max-width: min(60%, 620px);
        }

        /*
        .solutions-archive__filters {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }        
*/
        .solutions-archive-card {
            grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
            grid-template-areas: "media body";
            align-items: stretch;
            min-height: 440px;
        }

        .solutions-archive-card__media {
            grid-area: media;
            min-height: 0;
        }

        .solutions-archive-card__body {
            grid-area: body;
        }

        .solutions-archive-card:nth-child(even) {
            grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
            grid-template-areas: "body media";
        }

        .solutions-archive-card__footer {
            grid-template-columns: minmax(0, 1fr) auto;
        }

        .carousel .solutions-archive-card:nth-child(even) {
            grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
            grid-template-areas: "media body";
        }
    }

    @media (max-width: 640px) {
        .solutions-archive__hero {
            padding-block: 0 var(--space-hero-after);
        }

        .solutions-archive__hero-inner {
            padding: var(--space-md);
            background-position: left center;
        }

        .solutions-archive__hero-copy .btn {
            width: 100%;
        }

        .solutions-archive__toolbar {
            align-items: start;
            flex-direction: column;
        }

        .solutions-archive__brand-grid {
            grid-template-columns: 1fr;
        }

        .solutions-archive-card__footer .btn {
            width: 100%;
        }

        .solutions-archive__filter-row {
            grid-template-columns: 1fr;
        }

        .solutions-archive__sort,
        .solutions-archive__sort select {
            width: 100%;
            min-width: 0;
        }

        .solutions-archive-lead.lead::after {
            display: none;
        }

        .solutions-archive-lead .lead__content,
        .solutions-archive-lead .lead__form {
            max-width: none;
        }
    }

    /* ------------------------------------------------ Product page */
    .product-page {
        background: #f4f4f2;
        color: var(--color-ink);
    }

    .product-page .section {
        padding-block: var(--space-block);
    }

    .product-page .product-hero+.section:not(.product-lead),
    .product-page .section+.section:not(.product-lead) {
        padding-block-start: 0;
    }

    .product-page .product-lead {
        padding-block-start: var(--space-block);
    }

    .product-page .product-related--cta {
        padding-block-start: 0;
    }

    .product-page h2 {
        font-size: clamp(1.45rem, 1.1rem + 1.35vw, 2.25rem);
        line-height: 1.08;
        letter-spacing: -0.04em;
        margin-block-end: var(--space-md);
    }

    .product-page .solution-engineer h2 {
        font-size: var(--fs-h2);
        line-height: var(--lh-heading);
        letter-spacing: -0.02em;
        margin-block-end: var(--space-sm);
    }

    .product-page__label {
        color: var(--color-muted);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .product-hero {
        padding-block: 0 var(--space-hero-after);
    }

    .product-hero>.shell {
        display: grid;
        gap: var(--space-md);
    }

    .product-hero__inner {
        display: grid;
        gap: var(--space-lg);
    }

    .product-hero__media {
        display: grid;
        align-content: start;
        align-self: start;
        gap: var(--space-sm);
        min-width: 0;
        max-width: 100%;
    }

    .product-hero__stage-wrap {
        position: relative;
        min-width: 0;
        max-width: 100%;
        overflow: visible;
    }

    .product-hero__badges {
        position: absolute;
        z-index: 3;
        inset: 1rem;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.5rem;
        pointer-events: none;
    }

    .product-hero__badges-start {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.4rem;
        min-width: 0;
        pointer-events: auto;
    }

    .product-hero__series-badge,
    .product-hero__installment-badge,
    .product-hero__gift-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 0.5rem 1.05rem;
        border: 2px solid var(--color-ink);
        border-radius: 999px;
        background: #fff;
        color: var(--color-ink);
        font-size: 0.88rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-decoration: none;
        box-shadow: none;
    }

    .product-hero__badges-end {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 0.4rem;
        margin-inline-start: auto;
        max-width: min(100%, 22rem);
        pointer-events: none;
    }

    .product-hero__installment-badge {
        color: #fff;
        background: var(--color-green);
        border-color: var(--color-green);
    }

    .product-hero__gift-badge {
        gap: 0.4rem;
        color: #111;
        background: #ffe14a;
        border-color: #f3c400;
        max-width: 14rem;
        white-space: nowrap;
        line-height: 1.25;
        text-align: center;
        pointer-events: auto;
    }

    .product-hero__gift-badge-icon {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
    }

    .product-hero__gift-badge-icon svg {
        display: block;
        width: 0.95rem;
        height: 0.95rem;
    }

    @media (max-width: 400px) {
        .product-card__badge--gift .product-card__badge-icon {
            display: none;
        }

        .product-card__badge {
            padding: 0 0.3rem;
        }
    }

    .product-hero__thumbs-bar {
        --thumbs-gap: 0.5rem;
        --thumbs-visible: 3;
        display: grid;
        /* Всегда резервируем колонки стрелок — иначе при смене цвета скачет размер превью. */
        grid-template-columns: 1.7rem minmax(0, 1fr) 1.7rem;
        gap: 0.3rem;
        align-items: center;
        order: 2;
        min-width: 0;
        max-width: 100%;
    }

    .product-hero__thumbs-bar:not(:has(.product-hero__thumb:nth-child(2))) {
        display: none;
    }

    .product-hero__thumbs-viewport {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        overflow: hidden;
        container-type: inline-size;
        container-name: product-thumbs;
    }

    .product-hero__thumbs {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--thumbs-gap);
        width: max-content;
        max-width: none;
        transform: translate3d(0, 0, 0);
        transition: transform 0.28s var(--ease);
    }

    .product-hero__thumb {
        box-sizing: border-box;
        flex: 0 0 calc((100cqi - (var(--thumbs-visible) - 1) * var(--thumbs-gap)) / var(--thumbs-visible));
        width: calc((100cqi - (var(--thumbs-visible) - 1) * var(--thumbs-gap)) / var(--thumbs-visible));
        aspect-ratio: 1;
        height: auto;
        border: 1px solid transparent;
        border-radius: 10px;
        background: #fff;
        cursor: pointer;
        padding: 0.35rem;
        transition: border-color var(--dur-fast) var(--ease);
    }

    .product-hero__thumb[aria-pressed="true"] {
        border-color: var(--color-ink);
    }

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

    .product-hero__thumbs-nav {
        display: grid;
        grid-row: 1;
        place-items: center;
        width: 1.7rem;
        height: 1.7rem;
        padding: 0;
        color: var(--color-ink);
        background: #fff;
        border: 1px solid var(--color-line);
        border-radius: 50%;
        line-height: 0;
        cursor: pointer;
        visibility: hidden;
        pointer-events: none;
    }

    .product-hero__thumbs-bar.is-slider .product-hero__thumbs-nav {
        visibility: visible;
        pointer-events: auto;
    }

    .product-hero__thumbs-nav--prev {
        grid-column: 1;
    }

    .product-hero__thumbs-nav--next {
        grid-column: 3;
    }

    .product-hero__thumbs-nav svg {
        display: block;
    }

    .product-hero__thumbs-nav[hidden] {
        display: none;
    }

    .product-hero__thumbs-nav:disabled {
        opacity: 0.35;
        cursor: default;
    }

    .product-hero__stage {
        position: relative;
        width: 100%;
        min-width: 0;
        aspect-ratio: 1;
        overflow: hidden;
        border-radius: 18px;
        background: #fff;
    }

    .product-hero__stage img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        object-position: center;
        padding: clamp(1rem, 3vw, 2rem);
        box-sizing: border-box;
    }

    .product-hero__stage img[hidden] {
        display: none !important;
    }

    .product-hero__stage .media-placeholder--stage {
        position: absolute;
        inset: 0;
        border-radius: 12px;
        background: color-mix(in srgb, var(--color-line) 30%, #f5f5f5);
    }

    .product-hero__gallery-nav {
        position: absolute;
        z-index: 2;
        top: 50%;
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        padding: 0;
        color: var(--color-ink);
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid var(--color-line);
        border-radius: 50%;
        line-height: 0;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .product-hero__gallery-nav svg {
        display: block;
    }

    .product-hero__gallery-nav--prev {
        inset-inline-start: var(--space-xs);
    }

    .product-hero__gallery-nav--next {
        inset-inline-end: var(--space-xs);
    }

    .product-hero__gallery-nav[hidden] {
        display: none;
    }

    .product-hero__gallery-nav:disabled {
        opacity: 0.35;
        cursor: default;
    }

    .product-hero__summary {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        min-width: 0;
    }

    .product-hero__eyebrow {
        color: var(--color-muted);
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .product-hero__summary h1 {
        max-width: none;
        min-width: 0;
        font-size: clamp(1.7rem, 1.35rem + 1.3vw, 2.35rem);
        text-wrap: wrap;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .product-hero__description {
        max-width: 560px;
        font-size: 0.92rem;
        color: var(--color-muted);
    }

    .product-hero__rating {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        font-size: 0.92rem;
    }

    .product-hero__rating a {
        color: var(--color-muted);
        text-underline-offset: 0.22em;
    }

    .product-hero__meta {
        display: grid;
        gap: 0.65rem;
        margin: 0;
        padding-block: var(--space-xs);
        border-block: 1px solid rgba(17, 17, 17, 0.1);
    }

    .product-hero__meta div,
    .product-specs dl div {
        display: flex;
        justify-content: space-between;
        gap: var(--space-sm);
    }

    .product-specs dl div {
        align-items: center;
        min-height: 2.5rem;
    }

    .product-hero__meta dt,
    .product-hero__meta dd,
    .product-specs dt,
    .product-specs dd,
    .product-buy__facts dt,
    .product-buy__facts dd {
        font-size: 0.92rem;
    }

    .product-hero__meta dt,
    .product-specs dt {
        color: var(--color-muted);
    }

    .product-hero__meta dd,
    .product-specs dd {
        margin: 0;
        text-align: end;
        font-weight: 400;
    }

    .product-specs dt,
    .product-specs dd {
        flex: 0 0 calc((100% - var(--space-sm)) / 2);
        min-width: 0;
        max-width: calc((100% - var(--space-sm)) / 2);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .product-hero__meta .product-hero__specs-more {
        margin: 0;
        justify-content: flex-start;
    }

    .product-hero__color {
        display: grid;
        justify-items: start;
        gap: 0.55rem;
        margin: 0;
        font-size: 0.92rem;
    }

    .product-hero__color.is-under-gallery {
        margin-block-start: 0.15rem;
    }

    .product-hero__color dt {
        order: 1;
        color: var(--color-muted);
        font-weight: 400;
    }

    .product-hero__color .product-variants__list {
        order: 2;
        justify-content: flex-start;
    }

    .product-hero__color dd {
        order: 3;
        margin: 0;
        text-align: start;
        font-weight: 400;
    }

    .product-variants__list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    .product-variant {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border: 1px solid rgba(17, 17, 17, 0.12);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.72);
        padding: 0.25rem;
        color: var(--color-ink);
        font: inherit;
        cursor: pointer;
        transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    }

    .product-variant:hover,
    .product-variant.is-active {
        border-color: rgba(17, 17, 17, 0.72);
        box-shadow: 0 12px 28px rgba(17, 17, 17, 0.08);
    }

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

    .product-variant__swatch {
        width: 28px;
        height: 28px;
        border: 1px solid rgba(17, 17, 17, 0.12);
        border-radius: 50%;
        background: var(--swatch-color, #111);
        box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.65);
    }

    .product-buy {
        display: grid;
        gap: 0.75rem;
        width: 100%;
        max-width: none;
    }

    .product-buy__price {
        display: flex;
        align-items: baseline;
        gap: 0.7rem;
    }

    .product-buy__price span {
        font-size: clamp(1.45rem, 1.2rem + 0.9vw, 2rem);
        font-weight: 800;
        letter-spacing: -0.04em;
    }

    .product-buy__price s {
        color: var(--color-muted);
    }

    .product-buy .btn {
        width: 100%;
        justify-content: center;
    }

    .product-buy__actions {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.85rem;
        gap: 0.5rem;
        isolation: isolate;
        align-items: stretch;
    }

    .product-buy__cart {
        position: relative;
        min-width: 0;
    }

    .product-buy__actions .btn {
        width: 100%;
    }

    .product-buy__oneclick {
        min-height: 100%;
        padding-inline: 0.8em;
        white-space: normal;
        line-height: 1.2;
        text-align: center;
    }

    .product-buy__facts {
        display: grid;
        gap: 0.65rem;
        margin: 0;
        padding-block-start: var(--space-xs);
        border-block-start: 1px solid rgba(17, 17, 17, 0.1);
    }

    .product-buy__fact {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: var(--space-sm);
    }

    .product-buy__facts dt {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: var(--color-muted);
    }

    .product-buy__fact-icon {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 1.1rem;
        height: 1.1rem;
        color: var(--color-ink);
    }

    .product-buy__fact-icon svg {
        display: block;
        width: 1.05rem;
        height: 1.05rem;
    }

    .product-buy__facts dd {
        margin: 0;
        text-align: end;
        font-weight: 400;
    }

    .product-buy__fact--installment {
        align-items: center;
        flex-wrap: wrap;
    }

    .product-buy__fact--installment dd {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.55rem;
    }

    .product-buy__fact--gift {
        align-items: center;
    }

    .product-buy__gift-link {
        color: inherit;
        font: inherit;
        text-decoration: underline;
        text-underline-offset: 0.22em;
    }

    .product-buy__gift-link:hover {
        color: var(--color-muted);
    }

    .product-buy__from {
        font-weight: 400;
    }

    .product-buy__terms {
        display: flex;
        gap: 0.3rem;
    }

    .product-buy__terms button {
        min-width: 2.4rem;
        min-height: 1.85rem;
        padding: 0.2rem 0.5rem;
        border: 1px solid var(--color-line);
        background: #fff;
        color: var(--color-ink);
        font-size: 0.8rem;
        font-weight: 700;
    }

    .product-buy__terms button[aria-pressed='true'] {
        border-color: var(--color-ink);
        background: var(--color-ink);
        color: #fff;
    }

    .product-buy__add[hidden] {
        display: inline-flex !important;
        visibility: hidden;
        pointer-events: none;
    }

    .product-buy__cart-icon {
        display: flex;
    }

    .product-buy__remove-icon {
        display: none;
    }

    .product-buy__add.is-in-cart {
        --btn-bg: var(--color-ink);
        --btn-fg: #fff;
    }

    .product-buy__add.is-in-cart .product-buy__cart-icon {
        display: none;
    }

    .product-buy__add.is-in-cart .product-buy__remove-icon {
        display: flex;
    }

    .product-buy__add:disabled,
    .product-buy__add[aria-disabled="true"] {
        background: var(--color-ink);
        color: #fff;
        border-color: var(--color-ink);
        cursor: default;
        opacity: 1;
        pointer-events: none;
    }

    .product-qty {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        margin: 0;
        padding: 0.35rem 0.45rem;
        border: 1px solid var(--color-ink);
        border-radius: var(--radius-pill);
        background: #fff;
        box-shadow: var(--shadow-md);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-0.55rem);
        transition:
            opacity var(--dur) var(--ease),
            transform var(--dur) var(--ease),
            visibility var(--dur) var(--ease);
    }

    .product-qty.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    @media (max-width: 360px) {
        .product-buy__actions {
            grid-template-columns: minmax(0, 1fr);
        }

        .product-buy__oneclick {
            white-space: nowrap;
        }
    }

    @media (max-width: 760px) {
        .product-buy__cart {
            position: static;
        }

        .product-buy__add[hidden] {
            visibility: visible;
        }

        .product-qty {
            inset: auto 0 auto 0;
            top: calc(100% + 0.4rem);
            z-index: 4;
            width: 100%;
            transform: translateY(-0.35rem);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .product-qty {
            transition: none;
            transform: none;
        }
    }

    .product-qty__btn {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: var(--color-surface-soft, #f3f3f3);
        font-size: 1.05rem;
        line-height: 1;
        transition: background var(--dur) var(--ease);
    }

    .product-qty__btn:hover {
        background: var(--color-line);
    }

    .product-qty__value {
        min-width: 2ch;
        text-align: center;
        font-weight: 700;
        font-size: 1.05rem;
    }

    .product-qty__open {
        margin-inline-start: auto;
        padding-inline: 0.9rem;
        font-weight: 600;
        color: var(--color-ink);
        white-space: nowrap;
    }

    .product-qty__open:hover {
        color: var(--color-muted);
    }

    .product-hero__rating-stars {
        display: inline-flex;
        text-decoration: none;
    }

    .product-help-card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.85rem 1rem;
        width: 100%;
        margin-block-start: auto;
        border: 1px solid rgba(17, 17, 17, 0.08);
        border-radius: 16px;
        background: #fff;
        padding: 0.85rem 1rem;
    }

    .product-help-card>div {
        display: flex;
        flex: 1 1 12rem;
        gap: 0.85rem;
        align-items: center;
        min-width: 0;
    }


    .product-help-card>div div {
        display: flex;
        flex-direction: column;
        align-items: baseline;
        min-width: 0;
    }

    .product-help-card img {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
        border-radius: 50%;
        object-fit: cover;
        object-position: center;
    }

    .product-help-card p {
        margin: 0.2rem 0 0;
        color: var(--color-muted);
        font-size: 0.85rem;
    }

    .product-help-card .btn {
        width: auto;
        flex: 0 0 auto;
        margin-inline-start: auto;
        padding: 0.7em 1.25em;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .product-story__inner {
        display: grid;
        gap: var(--space-lg);
        align-items: start;
        min-width: 0;
    }

    .product-gift {
        scroll-margin-top: calc(var(--header-h) + 1.25rem);
    }

    .product-gift__card {
        display: grid;
        gap: var(--space-md);
        align-items: stretch;
        min-width: 0;
        overflow: hidden;
        padding: clamp(1.2rem, 1rem + 1.4vw, 2rem);
        background: #fff;
        border: 1px solid rgba(17, 17, 17, 0.08);
        border-radius: var(--radius-lg);
    }

    .product-gift__copy {
        align-self: center;
        min-width: 0;
        max-width: 42rem;
    }

    .product-gift__aside {
        display: grid;
        gap: 0.85rem;
        align-content: start;
        min-width: 0;
    }

    .product-gift__actions {
        display: grid;
        gap: 0.55rem;
    }

    .product-gift__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .product-gift__note {
        grid-column: 1 / -1;
        margin: 0;
        color: var(--color-muted);
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .product-gift__copy h2 {
        margin: 0;
        font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.4rem);
        line-height: var(--lh-heading);
        letter-spacing: -0.02em;
    }

    .product-gift__body {
        height: auto;
        min-height: 0;
        max-height: none;
        margin-block-start: 0.9rem;
        color: var(--color-ink-soft);
        font-size: var(--fs-body);
        line-height: 1.65;
    }

    .product-gift__body p {
        margin: 0;
        color: inherit;
    }

    .product-gift__body p+p,
    .product-gift__body p+ul,
    .product-gift__body p+ol {
        margin-block-start: 0.7rem;
    }

    .product-gift__body ul,
    .product-gift__body ol {
        margin: 0.7rem 0 0;
        padding-inline-start: 1.15rem;
    }

    .product-gift__media {
        display: grid;
        place-items: center;
        min-width: 0;
        min-height: 12rem;
        margin: 0;
        padding: clamp(0.7rem, 0.4rem + 0.8vw, 1.1rem);
        background: var(--color-bg);
        border: 1px solid var(--color-line);
        border-radius: calc(var(--radius-lg) - 8px);
    }

    .product-gift__media img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 14rem;
        object-fit: contain;
    }

    .product-story__text {
        color: var(--color-ink);
        max-width: 68ch;
        min-width: 0;
        font-size: var(--fs-body);
        line-height: var(--lh-body);
    }

    .product-story__text h2 {
        font-size: var(--fs-h2);
        margin-block-end: var(--space-sm);
    }

    .product-story__text h3 {
        font-size: var(--fs-h3);
        margin-block: var(--space-md) var(--space-xs);
    }

    .product-story__text h3:first-child {
        margin-block-start: 0;
    }

    .product-story__text p {
        color: var(--color-ink);
        font-size: var(--fs-body);
        line-height: var(--lh-body);
    }

    .product-story__text p+p {
        margin-block-start: var(--space-sm);
    }

    .product-story__text img,
    .product-story__text figure,
    .product-story__text video {
        max-width: 100%;
        height: auto;
    }

    .product-specs-link {
        color: var(--color-ink);
        font-size: 0.92rem;
        font-weight: 400;
        text-decoration: underline;
        text-underline-offset: 0.22em;
    }

    .product-specs-link:hover {
        color: var(--color-muted);
    }

    .product-video__frame {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-md);
        aspect-ratio: 16 / 9;
        background: #111;
    }

    .product-video__frame iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    .product-documents__list {
        display: grid;
        gap: 0.55rem;
        max-width: 48ch;
        padding: 0;
        list-style: none;
    }

    .product-documents__link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    .product-documents__link svg {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        color: #c0392b;
    }

    .product-story__media {
        min-width: 0;
        max-width: 100%;
        height: max-content;
        overflow: hidden;
        border-radius: 18px;
        margin: 0;
        align-self: start;
    }

    .product-story__media img {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 280px;
        object-fit: cover;
    }

    .product-specs__grid {
        display: grid;
        gap: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-inline: 0.7rem;
    }

    .product-specs dl {
        display: grid;
        gap: 0;
        margin: 0;
        min-width: 0;
        max-width: 100%;
    }

    .product-specs dl div {
        position: relative;
        min-width: 0;
        max-width: 100%;
        border-bottom: 1px solid rgba(17, 17, 17, 0.12);
        margin-inline: -0.7rem;
        padding: 0.7rem;
        border-radius: 6px;
        transition: background var(--dur-fast) var(--ease);
    }

    .product-specs dl div:hover,
    .product-specs dl div:focus-within {
        background: rgba(17, 17, 17, 0.045);
    }

    .product-specs dl div:has(.product-specs__hint) {
        cursor: help;
        outline: none;
    }

    .product-specs dl div:has(.product-specs__hint):hover,
    .product-specs dl div:has(.product-specs__hint):focus-within {
        z-index: 5;
    }

    .product-specs__hint {
        display: none;
        position: absolute;
        left: 0.7rem;
        right: 0.7rem;
        top: calc(100% - 0.2rem);
        z-index: 4;
        flex-direction: column;
        gap: 0.15rem;
        max-width: none;
        padding: 0.45rem 0.7rem;
        border-radius: 8px;
        background: var(--color-ink);
        color: #fff;
        font-size: 0.82rem;
        font-weight: 400;
        line-height: 1.4;
        text-align: left;
        white-space: normal;
        box-shadow: 0 10px 24px rgba(17, 17, 17, 0.16);
        pointer-events: none;
    }

    .product-specs__hint strong {
        font-weight: 600;
        color: rgba(255, 255, 255, 0.72);
    }

    .product-specs dl div:hover .product-specs__hint,
    .product-specs dl div:focus-within .product-specs__hint {
        display: flex;
    }

    .product-specs__additional {
        max-width: 900px;
        margin-block-start: var(--space-lg);
    }

    .product-specs__additional ul,
    .product-specs__additional ol {
        display: grid;
        gap: 0.85rem var(--space-lg);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .product-specs__additional li {
        padding-block-end: 0.85rem;
        border-bottom: 1px solid rgba(17, 17, 17, 0.12);
        color: var(--color-ink-soft);
    }

    .product-specs__additional li strong,
    .product-specs__additional li b {
        color: var(--color-ink);
    }

    .product-scenarios .carousel__slide {
        flex: 0 0 100%;
    }

    .product-scenarios .solutions-archive-card {
        width: 100%;
    }

    .product-scenarios__list {
        display: grid;
        gap: 0.85rem;
        align-items: stretch;
    }

    .product-scenarios__card {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        border-radius: 18px;
        background: #fff;
    }

    .product-scenarios__media {
        position: relative;
        display: block;
        flex: 0 0 auto;
        overflow: hidden;
        aspect-ratio: 4 / 3;
        background: var(--color-surface-soft);
    }

    .product-scenarios__media img,
    .product-scenarios__media .media-placeholder {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: contain;
    }

    .product-scenarios__body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        gap: 0.45rem;
        padding: clamp(1rem, 2vw, 1.4rem);
        box-sizing: border-box;
    }

    .product-scenarios__card h3 {
        display: -webkit-box;
        min-height: calc(1.2em * 2);
        overflow: hidden;
        font-size: 1rem;
        line-height: 1.2;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .product-scenarios__card p {
        display: -webkit-box;
        flex: 1 1 auto;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }

    .product-scenarios__card .btn {
        width: 100%;
        justify-content: center;
        margin-block-start: auto;
    }

    .product-scenarios__card:hover .btn--outline {
        --btn-bg: var(--color-ink);
        --btn-fg: #fff;
    }

    .product-review,
    .product-aftercare__card {
        border-radius: 18px;
        background: #fff;
        padding: clamp(1rem, 2vw, 1.4rem);
    }

    .product-aftercare__card h3 {
        font-size: 1rem;
        margin-block-end: 0.35rem;
    }

    .product-scenarios__list p,
    .product-review p,
    .product-aftercare__card p {
        color: var(--color-muted);
        margin: 0;
    }

    .product-reviews__grid,
    .product-aftercare__grid {
        display: grid;
        gap: var(--space-sm);
    }

    .product-review__head {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        margin-block-end: var(--space-xs);
    }

    .product-review__images {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-block-start: var(--space-xs);
    }

    .product-review__image-btn {
        width: 72px;
        height: 72px;
        padding: 0;
        overflow: hidden;
        border: 1px solid var(--color-line);
        border-radius: 10px;
        background: var(--color-surface);
        transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }

    .product-review__image-btn:hover {
        transform: translateY(-2px);
        border-color: var(--color-ink);
        box-shadow: var(--shadow-md);
    }

    .product-review__images img {
        width: 72px;
        height: 72px;
        border-radius: 10px;
        object-fit: cover;
    }

    .product-review footer {
        margin-block-start: var(--space-xs);
        color: var(--color-muted);
        font-size: 0.85rem;
        font-weight: 700;
    }

    .product-reviews__empty {
        max-width: 620px;
        color: var(--color-muted);
    }

    .product-review-form {
        display: grid;
        gap: var(--space-sm);
    }

    .product-review-form__head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
        gap: var(--space-md);
        align-items: start;
    }

    .product-review-form h3 {
        font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem);
        letter-spacing: -0.03em;
        margin: 0;
    }

    .product-review-form__head>p {
        color: var(--color-muted);
        font-size: 0.95rem;
    }

    .product-review-form__rating,
    .product-review-form__grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .product-review-form__rating label {
        cursor: pointer;
    }

    .product-review-form__rating input {
        position: absolute;
        opacity: 0;
    }

    .product-review-form__rating span {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        background: #fff;
        padding-inline: 0.9rem;
        transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
    }

    .product-review-form__rating span:hover {
        border-color: var(--color-ink);
    }

    .product-review-form__rating input:checked+span {
        border-color: var(--color-ink);
        background: var(--color-ink);
        color: #fff;
    }

    .review-field {
        display: grid;
        gap: 0.3rem;
        font-size: 0.9rem;
    }

    .product-review-form__grid .review-field {
        flex: 1 1 220px;
    }

    .review-field>span,
    .review-field--wide>span {
        color: var(--color-muted);
    }

    .product-review-form input[type="text"],
    .product-review-form input[type="email"],
    .product-review-form textarea {
        width: 100%;
        padding: 0.7rem 0.85rem;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        background: #fff;
        color: var(--color-ink);
        font: inherit;
    }

    .product-review-form textarea {
        min-height: 140px;
        resize: vertical;
    }

    .review-field__hint,
    .review-upload small {
        color: var(--color-muted);
        font-size: 0.78rem;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
    }

    .review-upload {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--space-sm);
        align-items: center;
        padding: 0.7rem 0.85rem;
        border: 1px dashed var(--color-line);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: border-color var(--dur) var(--ease);
    }

    .review-upload:hover {
        border-color: var(--color-ink);
    }

    .review-upload input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .review-upload__icon {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--color-ink);
        color: #fff;
        font-size: 1.45rem;
        line-height: 1;
    }

    .review-upload__text {
        display: grid;
        gap: 0.2rem;
    }

    .review-upload__text strong {
        font-size: 1rem;
    }

    .review-preview {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
        gap: 0.65rem;
    }

    .review-preview:empty {
        display: none;
    }

    .review-preview__item {
        aspect-ratio: 1;
        padding: 0;
        overflow: hidden;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
        transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
    }

    .review-preview__item:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

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

    .review-form__error {
        padding: 0.85rem 1rem;
        color: #7a1f18;
        background: rgba(179, 38, 30, 0.08);
        border: 1px solid rgba(179, 38, 30, 0.22);
        border-radius: var(--radius-sm);
        font-size: 0.9rem;
    }

    .product-review-form .btn {
        width: 100%;
        justify-content: center;
        margin-block-start: 0.25rem;
    }

    .review-lightbox {
        position: fixed;
        inset: 0;
        z-index: 700;
        display: grid;
        place-items: center;
        padding: var(--space-md);
        background: rgba(0, 0, 0, 0.72);
        opacity: 0;
        transition: opacity var(--dur) var(--ease);
        backdrop-filter: blur(12px);
    }

    .review-lightbox.is-open {
        opacity: 1;
    }

    .review-lightbox img {
        max-width: min(920px, 94vw);
        max-height: 86vh;
        object-fit: contain;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
    }

    .review-lightbox--gallery {
        grid-template-rows: minmax(0, 1fr) auto;
        gap: var(--space-sm);
    }

    .review-lightbox--gallery .review-lightbox__image {
        grid-row: 1;
        max-height: min(78vh, 820px);
    }

    .review-lightbox__close {
        position: absolute;
        inset-block-start: 1rem;
        inset-inline-end: 1rem;
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        color: #fff;
        background: rgba(255, 255, 255, 0.14);
        border-radius: 50%;
        font-size: 1.6rem;
    }

    .review-lightbox__nav {
        position: absolute;
        top: 50%;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        color: #fff;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.24);
        border-radius: 50%;
        font-size: 2.2rem;
        line-height: 1;
        transform: translateY(-50%);
        transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
    }

    .review-lightbox__nav:hover {
        background: rgba(255, 255, 255, 0.24);
        transform: translateY(-50%) scale(1.04);
    }

    .review-lightbox__nav--prev {
        left: max(1rem, env(safe-area-inset-left));
    }

    .review-lightbox__nav--next {
        right: max(1rem, env(safe-area-inset-right));
    }

    .review-lightbox__thumbs {
        grid-row: 2;
        display: flex;
        gap: 0.55rem;
        max-width: min(720px, 90vw);
        padding: 0.55rem;
        overflow-x: auto;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: var(--radius-pill);
        scrollbar-width: none;
    }

    .review-lightbox__thumbs::-webkit-scrollbar {
        display: none;
    }

    .review-lightbox__thumb {
        flex: 0 0 auto;
        width: 58px;
        height: 58px;
        padding: 2px;
        overflow: hidden;
        border: 1px solid transparent;
        border-radius: 50%;
        opacity: 0.62;
        transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
    }

    .review-lightbox__thumb:hover,
    .review-lightbox__thumb[aria-pressed='true'] {
        opacity: 1;
        border-color: #fff;
        transform: translateY(-1px);
    }

    .review-lightbox__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        box-shadow: none;
    }

    @media (max-width: 760px) {
        .product-review-form__head {
            grid-template-columns: 1fr;
        }

        .product-review-form .btn {
            width: 100%;
        }

        .review-lightbox__nav {
            width: 44px;
            height: 44px;
            font-size: 1.9rem;
        }

        .review-lightbox__thumb {
            width: 50px;
            height: 50px;
        }
    }

    .product-aftercare__card {
        padding: 0;
        overflow: hidden;
    }

    .product-aftercare__card img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .product-aftercare__card h3,
    .product-aftercare__card p {
        padding-inline: 1rem;
    }

    .product-aftercare__card h3 {
        padding-block-start: 1rem;
    }

    .product-aftercare__card p {
        padding-block-end: 1.15rem;
    }

    .product-aftercare__panel {
        display: grid;
        gap: var(--space-md);
        margin-block-start: var(--space-md);
        overflow: hidden;
        background: #fff;
        border-radius: var(--radius-md);
    }

    .product-aftercare__panel>img {
        width: 100%;
        height: 100%;
        min-height: 320px;
        object-fit: cover;
        object-position: center 20%;
    }

    .product-aftercare__panel>div {
        align-self: center;
        padding: 0 var(--space-md) var(--space-md);
    }

    .product-aftercare__panel p {
        margin-block-end: var(--space-sm);
        color: var(--color-muted);
        font-size: var(--fs-lead);
    }

    .product-aftercare__panel ul {
        display: grid;
        gap: 0.7rem;
        padding-inline-start: 1.25rem;
    }

    .product-related .product-grid {
        margin-block-start: var(--space-md);
    }

    .product-related__cta {
        display: flex;
        justify-content: center;
    }

    .product-lead {
        position: relative;
        overflow: hidden;
        padding-block: var(--space-block);
        background: #2a2c2e;
        color: #fff;
    }

    .product-lead::before,
    .product-lead::after,
    .product-lead__backdrop {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .product-lead::before {
        content: "";
        background:
            linear-gradient(105deg, rgba(42, 44, 46, 0.9) 0%, rgba(42, 44, 46, 0.68) 48%, rgba(42, 44, 46, 0.32) 100%),
            image-set(url("../images/consultation/consultation-bg.webp") type("image/webp"),
                url("../images/product-page/lead-background.png") type("image/png"));
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .product-lead::after {
        display: none;
    }

    .product-lead__copy {
        position: relative;
        isolation: isolate;
    }

    .product-lead__copy::after {
        content: "";
        position: absolute;
        inset: -1.5rem auto -1.5rem -1rem;
        z-index: -1;
        width: min(100%, 34rem);
        background: url("../images/product-page/lead-pattern.svg") left center / contain no-repeat;
        opacity: 0.22;
        pointer-events: none;
    }

    .product-lead__backdrop {
        display: none;
    }

    .product-lead__inner {
        position: relative;
        z-index: 1;
        display: grid;
        gap: var(--space-lg);
        align-items: center;
    }

    .product-lead h2 {
        color: #fff;
        max-width: 620px;
    }

    .product-lead p {
        color: rgba(255, 255, 255, 0.72);
        max-width: 520px;
    }

    .product-lead__form {
        display: grid;
        gap: 0.75rem;
        width: min(100%, 420px);
    }

    .product-lead__form label:not(.consent) {
        display: grid;
        gap: 0.35rem;
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.85rem;
    }

    .product-lead__form input:not([type='checkbox']) {
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        padding: 0.95rem 1rem;
    }

    .product-lead__form .btn {
        justify-content: center;
        width: 100%;
    }

    @media (min-width: 900px) {
        .product-hero__inner {
            grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.25fr);
            align-items: stretch;
            gap: var(--space-lg);
        }

        .product-hero__summary {
            min-width: 22rem;
        }

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

        .product-hero__thumbs-bar {
            --thumbs-visible: 5;
            grid-template-columns: 2rem minmax(0, 1fr) 2rem;
            gap: 0.45rem;
        }

        .product-hero__thumbs-nav {
            width: 2rem;
            height: 2rem;
        }

        .product-story__inner--media,
        .product-story__inner:has(.product-story__media) {
            grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.25fr);
        }

        .product-gift__card--media,
        .product-gift__card--actions {
            grid-template-columns: minmax(0, 1fr) minmax(14rem, 17.5rem);
            gap: var(--space-lg);
            align-items: start;
        }

        .product-story__media {
            position: sticky;
            top: calc(var(--header-h) + var(--space-md));
            z-index: 1;
        }

        .admin-bar .product-story__media {
            top: calc(var(--header-h) + 32px + var(--space-md));
        }

        .product-story__media img {
            max-height: calc(100vh - var(--header-h) - var(--space-2xl));
            object-fit: cover;
        }

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

        .product-specs__grid:has(dl + dl) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0 var(--space-lg);
            align-items: start;
        }

        .product-specs dt {
            flex: 1 1 auto;
            max-width: none;
        }

        .product-specs dd {
            flex: 0 1 22rem;
            max-width: 58%;
        }

        .product-specs__hint {
            left: auto;
            right: 0.7rem;
            max-width: min(28rem, calc(100% - 1.4rem));
        }

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

        .product-aftercare__panel {
            grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
        }

        .product-aftercare__panel>div {
            padding: var(--space-md);
        }

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

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

        .product-scenarios .product-scenarios__card,
        .product-scenarios__list--single .product-scenarios__card {
            display: grid;
            grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.15fr);
            align-items: stretch;
            min-height: 320px;
        }

        .product-scenarios .product-scenarios__media,
        .product-scenarios__list--single .product-scenarios__media {
            aspect-ratio: auto;
            min-height: 0;
            height: 100%;
        }

        .product-scenarios .product-scenarios__body,
        .product-scenarios__list--single .product-scenarios__body {
            justify-content: center;
            padding: clamp(1.2rem, 3vw, 2rem);
        }

        .product-scenarios .product-scenarios__card h3,
        .product-scenarios__list--single .product-scenarios__card h3 {
            min-height: 0;
            font-size: var(--fs-h3);
            -webkit-line-clamp: 3;
            line-clamp: 3;
        }

        .product-scenarios .product-scenarios__card p,
        .product-scenarios__list--single .product-scenarios__card p {
            -webkit-line-clamp: 6;
            line-clamp: 6;
        }

        .product-scenarios .product-scenarios__card .btn,
        .product-scenarios__list--single .product-scenarios__card .btn {
            width: auto;
            max-width: 16rem;
        }

        .product-lead__form {
            justify-self: end;
        }
    }

    @media (min-width: 1100px) {
        .product-hero__inner {
            grid-template-columns: minmax(0, 0.88fr) minmax(28rem, 1.28fr);
        }

        .product-story__inner--media,
        .product-story__inner:has(.product-story__media) {
            grid-template-columns: minmax(0, 0.88fr) minmax(28rem, 1.28fr);
        }

        .product-gift__card--media,
        .product-gift__card--actions {
            grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
        }

        .product-gift__media img {
            max-height: 16rem;
        }

        .product-hero__summary {
            min-width: 28rem;
        }

        .product-hero__summary h1 {
            white-space: nowrap;
        }
    }

    .solution-product {
        display: grid;
        gap: var(--space-sm);
        padding: var(--space-md);
        background: var(--color-surface);
        border-radius: var(--radius-md);
    }

    /* ---------- Carousel (scroll-snap) ---------- */
    .carousel {
        position: relative;
        margin-block-start: var(--space-lg);
    }

    .carousel__viewport {
        overflow: clip;
        border-radius: var(--radius-md);
    }

    .carousel__track {
        display: flex;
        gap: var(--space-md);
        margin: 0;
        padding: 0;
        list-style: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-block-end: var(--space-2xs);
    }

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

    .carousel__slide {
        flex: 0 0 min(100%, 520px);
        scroll-snap-align: start;
    }

    .carousel__nav {
        display: flex;
        align-items: center;
        gap: var(--space-2xs);
        justify-content: flex-end;
        margin-block-start: var(--space-md);
    }

    .carousel__counter {
        display: flex;
        align-items: baseline;
        gap: 0.4rem;
        margin: 0 auto 0 0;
        color: var(--color-muted);
        font-size: 1.5rem;
        font-variant-numeric: tabular-nums;
    }

    .carousel__counter-current {
        color: var(--color-ink);
        font-size: 2rem;
        font-weight: 800;
        line-height: 1;
    }

    .slider-btn {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        color: var(--color-ink);
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-pill);
        transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
    }

    .slider-btn:hover {
        background: var(--color-ink);
        color: #fff;
    }

    .slider-btn:active {
        transform: scale(0.92);
    }

    .slider-btn[disabled] {
        opacity: 0.35;
        cursor: not-allowed;
    }

    .slider-btn--light {
        color: #fff;
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.3);
    }

    .slider-btn--light:hover {
        background: #fff;
        color: var(--color-ink);
    }

    /* Карточка решения занимает всю ширину области карусели */
    .solutions .carousel__viewport {
        position: relative;
    }

    .solutions .carousel__track {
        background: transparent;
        align-items: stretch;
    }

    .solutions .carousel__slide {
        flex: 0 0 100%;
    }

    .solutions .solutions-archive-card {
        width: 100%;
    }

    .solutions .carousel__slide[hidden] {
        display: none;
    }

    .solutions__empty {
        display: none;
        flex: 0 0 100%;
        align-items: center;
        justify-content: center;
        min-height: 280px;
        margin: 0;
        padding: var(--space-md);
        color: var(--color-muted);
        text-align: center;
    }

    .solutions[data-empty] .solutions__empty {
        display: flex;
    }

    .solutions[data-empty] .carousel__nav {
        display: none;
    }

    .solution-skeleton {
        position: absolute;
        inset: 0;
        display: none;
        grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
        gap: clamp(2rem, 5vw, 5rem);
        padding: clamp(1.75rem, 3vw, 3rem);
        background: var(--color-surface);
        pointer-events: none;
    }

    .solutions[data-empty] .solution-skeleton {
        display: none;
    }

    .solution-skeleton__media,
    .solution-skeleton__body span {
        display: block;
        border-radius: var(--radius-sm);
        background: linear-gradient(90deg, #ececec 0%, #f7f7f7 45%, #ececec 90%);
        background-size: 220% 100%;
        animation: skeleton-shimmer 1.4s var(--ease) infinite;
    }

    .solution-skeleton__body {
        display: grid;
        align-content: center;
        gap: var(--space-sm);
    }

    .solution-skeleton__body span:nth-child(1) {
        width: 44%;
        height: 28px;
        border-radius: var(--radius-pill);
    }

    .solution-skeleton__body span:nth-child(2) {
        width: 82%;
        height: 42px;
    }

    .solution-skeleton__body span:nth-child(3) {
        width: 96%;
        height: 96px;
    }

    .solution-skeleton__body span:nth-child(4) {
        width: 46%;
        height: 48px;
        border-radius: var(--radius-pill);
    }

    @keyframes skeleton-shimmer {
        from {
            background-position: 120% 0;
        }

        to {
            background-position: -120% 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {

        .solution-skeleton__media,
        .solution-skeleton__body span {
            animation: none;
        }
    }

    @media (min-width: 900px) {
        .solutions .carousel {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
            margin-block-start: var(--space-md);
        }

        .solutions .carousel__viewport {
            overflow: visible;
        }

        .solutions .carousel__track {
            overflow-x: auto;
            overflow-y: hidden;
        }

        .solutions .carousel__nav {
            inset-inline-end: clamp(1rem, 3vw, 3rem);
            inset-block-end: 0;
            margin: 0;
        }
    }

    /* ---------- Systems ---------- */
    .systems {
        position: relative;
        min-height: clamp(520px, 54vw, 720px);
        display: grid;
        align-items: center;
        overflow: clip;
        padding-block: var(--space-block);
        color: var(--color-on-dark);
        background-color: #121212;
        background-image: image-set(url('../images/systems/systems-background.webp') type('image/webp'),
                url('../images/systems/systems-background.png') type('image/png'));
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .systems::after {
        content: '';
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        height: 42%;
        background: linear-gradient(180deg, rgba(13, 13, 13, 0) 0%, rgba(13, 13, 13, 0.92) 100%);
        pointer-events: none;
    }

    .systems__inner {
        position: relative;
        z-index: 1;
        display: grid;
        gap: var(--space-lg);
        align-items: center;
    }

    .systems__content {
        max-width: 520px;
    }

    .systems .section__title {
        color: var(--color-on-dark);
    }

    .systems__text {
        max-width: 46ch;
        color: rgba(245, 245, 245, 0.78);
        margin-block: var(--space-md);
        /* font-size: var(--fs-lead);*/
        font-size: 22px;
    }

    .systems__media {
        position: relative;
        min-height: 360px;
        display: grid;
        place-items: center;
        padding-block-start: clamp(2rem, 4vw, 4rem);
    }

    .systems__media::before {
        content: '';
        position: absolute;
        inset: auto -12% 0 -18%;
        height: 78%;
        background: image-set(url('../images/systems/systems-smoke.webp') type('image/webp'),
                url('../images/systems/systems-smoke.png') type('image/png')) center / contain no-repeat;
        opacity: 0.42;
        mix-blend-mode: screen;
        filter: blur(0.2px);
        transform: translateY(2%);
        pointer-events: none;
    }

    .systems__media img {
        position: relative;
        z-index: 1;
        width: min(100%, 353px);
        border-radius: 0;
        filter: drop-shadow(0 36px 34px rgba(0, 0, 0, 0.55));
    }

    @media (min-width: 860px) {
        .systems__inner {
            grid-template-columns: 0.85fr 1.15fr;
        }

        .systems__media {
            min-height: clamp(460px, 46vw, 640px);
            align-items: start;
        }
    }

    @media (max-width: 859px) {
        .systems {
            min-height: auto;
            padding-block: var(--space-xl);
            background-position: center;
        }

        .systems__inner {
            gap: var(--space-md);
        }

        .systems__media {
            order: -1;
            min-height: 300px;
        }

        .systems__content {
            max-width: none;
        }
    }

    /* ---------- Aftercare ---------- */
    .aftercare__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-md);
        margin: 0;
        margin-block-start: var(--space-lg);
        padding: 0;
        list-style: none;
    }

    @media (min-width: 860px) {
        .aftercare__grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: var(--space-lg);
        }
    }

    .aftercare-card {
        display: flex;
        flex-direction: column;
        gap: var(--space-2xs);
    }

    .aftercare-card__media {
        border-radius: var(--radius-md);
        overflow: hidden;
        aspect-ratio: 4 / 3;
    }

    .aftercare-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: scale var(--dur-slow) var(--ease);
    }

    .aftercare-card:hover .aftercare-card__media img {
        scale: 1.05;
    }

    .aftercare-card__title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-block-start: var(--space-2xs);
    }

    /* ---------- Consultation ---------- */
    .consultation__inner {
        display: grid;
        gap: var(--space-lg);
        align-items: center;
    }

    .consultation__media img {
        width: 100%;
        border-radius: var(--radius-md);
    }

    .consultation__subtitle {
        font-weight: 600;
        margin-block-start: var(--space-md);
    }

    .consultation__facts {
        display: grid;
        gap: 0.4rem;
        padding-inline-start: 1.1rem;
        color: var(--color-ink-soft);
        margin-block: var(--space-2xs);
    }

    .consultation__quote {
        margin-block-start: var(--space-md);
        padding-inline-start: var(--space-md);
        border-inline-start: 3px solid var(--color-ink);
        font-style: italic;
        color: var(--color-ink-soft);
    }

    .consultation__author {
        display: flex;
        flex-direction: column;
        margin-block-start: var(--space-md);
    }

    @media (min-width: 860px) {
        .consultation__inner {
            grid-template-columns: 0.8fr 1.2fr;
        }
    }

    /* ---------- Dealer and showroom ---------- */
    .showroom-band {
        background: var(--color-dark);
    }

    .dealer,
    .showroom {
        color: var(--color-on-dark);
        border-radius: 0;
        margin-inline: 0;
        padding-block: var(--space-2xl);
    }

    .dealer {
        background: #161616;
    }

    .dealer .section__title {
        font-size: var(--fs-h2);
        line-height: var(--lh-heading);
        color: var(--color-on-dark);
        text-wrap: balance;
    }

    .dealer .showroom__lead,
    .dealer .text-muted,
    .dealer .showroom__list {
        font-size: var(--fs-body);
        line-height: var(--lh-body);
    }

    .dealer .showroom__lead {
        font-size: var(--fs-lead);
    }

    .showroom {
        background: var(--color-dark);
    }

    .dealer .showroom__intro {
        margin-block-end: 0;
    }

    .dealer .shell,
    .showroom .shell {
        max-width: var(--shell-max);
    }

    .showroom__intro {
        display: grid;
        gap: var(--space-lg);
        align-items: center;
        margin-block-end: var(--space-xl);
    }

    .showroom__text .text-muted {
        color: rgba(245, 245, 245, 0.72);
    }

    .showroom__text .btn {
        margin-block-start: var(--space-md);
    }

    .showroom__media {
        position: relative;
        display: grid;
        place-items: center;
        isolation: isolate;
    }

    .showroom__media-background {
        position: absolute;
        inset: 50% auto auto 50%;
        z-index: -1;
        width: min(150%, 560px);
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
        opacity: 0.9;
        background-image: image-set(url('../images/showroom/showroom-orb.webp') type('image/webp'),
                url('../images/showroom/showroom-orb.png') type('image/png'));
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transform-origin: center;
        animation: showroom-wave 18s var(--ease) infinite alternate;
        pointer-events: none;
    }

    .showroom__intro .showroom__media>img {
        position: relative;
        z-index: 1;
        width: min(100%, 354px);
        border-radius: 0;
        filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.38));
    }

    .showroom .showroom__intro .showroom__media>img {
        width: 100%;
        border-radius: 12px;
    }

    .showroom__lead {
        font-size: var(--fs-lead);
        margin-block: var(--space-xs);
    }

    .showroom__list {
        display: grid;
        gap: 0.35rem;
        padding-inline-start: 1.1rem;
        color: rgba(245, 245, 245, 0.85);
        margin-block: var(--space-sm);
    }

    .dealer .section__title {
        text-wrap: balance;
    }

    .dealer .section__subtitle {
        font-size: var(--fs-h3);
        font-weight: 600;
        color: var(--color-on-dark);
        text-wrap: balance;
    }

    @media (min-width: 860px) {
        .showroom__intro {
            grid-template-columns: 1fr 1fr;
        }

        .showroom__intro--reverse .showroom__media {
            order: 2;
        }
    }

    .brand-strip {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-lg);
        padding-block: var(--space-lg);
        border-block: 1px solid rgba(255, 255, 255, 0.12);
        list-style: none;
        margin: 0;
    }

    .brand-strip img {
        width: auto;
        opacity: 0.7;
        /*  filter: brightness(0) invert(1);*/
        transition: opacity var(--dur) var(--ease);
    }

    .brand-strip img:hover {
        opacity: 1;
    }

    @keyframes showroom-wave {
        0% {
            transform: translate(-50%, -50%) rotate(-1deg) scale(0.985);
            opacity: 0.78;
        }

        50% {
            transform: translate(-50%, -50%) rotate(0.8deg) scale(1.02);
            opacity: 0.98;
        }

        100% {
            transform: translate(-50%, -50%) rotate(1.5deg) scale(1.04);
            opacity: 0.86;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .showroom__media-background {
            animation: none;
        }
    }

    .showroom__slide {
        flex-basis: min(100%, 860px);
        overflow: visible;
    }

    .showroom__slide figure {
        display: grid;
        gap: 0.55rem;
        margin: 0;
    }

    .showroom__slide img,
    .showroom__slide video {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: var(--radius-md);
        object-fit: cover;
    }

    .showroom__slide figcaption {
        margin: 0;
        color: rgba(245, 245, 245, 0.72);
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .showroom__cta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
        margin-block-start: var(--space-lg);
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
    }

    .showroom__cta-text {
        max-width: 46ch;
        font-size: var(--fs-lead);
        line-height: var(--lh-body);
        color: rgba(245, 245, 245, 0.88);
    }

    .showroom__cta .btn {
        flex: 0 0 auto;
        text-align: center;
    }

    /* ---------- FAQ ---------- */
    .faq__list {
        display: grid;
        gap: var(--space-2xs);
        margin-block-start: var(--space-lg);
    }

    .faq__item {
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .faq__summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
        padding: var(--space-md);
        font-size: var(--fs-lead);
        font-weight: 600;
        cursor: pointer;
        list-style: none;
    }

    .faq__summary::-webkit-details-marker {
        display: none;
    }

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

    .faq__icon::before,
    .faq__icon::after {
        content: '';
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        width: 14px;
        height: 2px;
        background: var(--color-ink);
        translate: -50% -50%;
        transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
    }

    .faq__icon::after {
        rotate: 90deg;
    }

    .faq__item[open] .faq__icon::after {
        opacity: 0;
        rotate: 0deg;
    }

    .faq__content {
        padding: 0 var(--space-md) var(--space-md);
    }

    .faq__item[open] .faq__content {
        animation: faq-in var(--dur) var(--ease);
    }

    .faq__mt-btn {
        margin-top: 10px;
    }

    @keyframes faq-in {
        from {
            opacity: 0;
            translate: 0 -0.4rem;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    /* ---------- Lead form ---------- */
    .lead {
        position: relative;
        min-height: clamp(520px, 54vw, 680px);
        display: grid;
        align-items: center;
        overflow: clip;
        padding-block: var(--space-block);
        color: var(--color-on-dark);
        background-color: #101214;
    }

    /* Стык с подвалом: 1px фона страницы из-за subpixel / reveal. */
    .lead:not(.lead--light) {
        margin-block-end: -1px;
    }

    .lead::before {
        content: '';
        position: absolute;
        inset: 0;
        opacity: 0.25;
        background-image: image-set(url('../images/consultation/consultation-bg.webp') type('image/webp'),
                url('../images/consultation/consultation-bg.png') type('image/png'));
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        pointer-events: none;
    }

    .lead__inner {
        display: grid;
        gap: var(--space-lg);
        align-items: center;
        position: relative;
        z-index: 1;
    }

    .lead__content {
        max-width: 580px;
    }

    .lead .section__title {
        color: var(--color-on-dark);
    }

    .lead .text-muted {
        color: rgba(245, 245, 245, 0.76);
    }

    .lead__form {
        display: grid;
        gap: 12px;
        margin-block-start: var(--space-md);
        max-width: 440px;
    }

    .field {
        display: grid;
    }

    .lead .field__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .field__control {
        width: 100%;
        padding: 0.95em 1.05em;
        color: var(--color-on-dark);
        background: rgba(45, 50, 56, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0;
        transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
    }

    .field__control::placeholder {
        color: rgba(245, 245, 245, 0.72);
    }

    .field__control:focus {
        outline: none;
        border-color: rgba(255, 255, 255, 0.45);
        background: rgba(49, 55, 61, 0.98);
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
    }

    textarea.field__control {
        resize: vertical;
        min-height: 96px;
    }

    .consent {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.6rem;
        align-items: start;
        font-size: 0.78rem;
        color: rgba(245, 245, 245, 0.74);
        margin-block-start: 4px;
    }

    .consent input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .consent__box {
        width: 16px;
        height: 16px;
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 3px;
        display: grid;
        place-items: center;
        transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }

    .consent__box::after {
        content: '✓';
        font-size: 11px;
        line-height: 1;
        color: var(--color-ink);
        opacity: 0;
        transition: opacity var(--dur-fast) var(--ease);
    }

    .consent input:checked+.consent__box {
        background: #fff;
        border-color: #fff;
    }

    .consent input:checked+.consent__box::after {
        opacity: 1;
    }

    .consent input:focus-visible+.consent__box {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    .consent a {
        text-decoration: underline;
    }

    .lead__form .btn {
        width: 100%;
        justify-content: center;
        margin-block-start: 4px;
    }

    .lead__media {
        position: relative;
        display: grid;
        place-items: center;
        min-height: 360px;
        isolation: isolate;
        padding-block-start: clamp(2rem, 4vw, 4rem);
    }

    .lead__media::before {
        content: '';
        position: absolute;
        inset: 50% auto auto 50%;
        z-index: -1;
        width: min(140%, 560px);
        aspect-ratio: 1;
        background-image: image-set(url('../images/consultation/consultation-orb.webp') type('image/webp'),
                url('../images/consultation/consultation-orb.png') type('image/png'));
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transform: translate(-50%, -50%);
        opacity: 0.85;
        animation: lead-orb 18s var(--ease) infinite alternate;
    }

    .lead__media img {
        position: relative;
        z-index: 1;
        width: min(100%, 360px);
        border-radius: 0;
        filter: drop-shadow(0 32px 34px rgba(0, 0, 0, 0.5));
    }

    @keyframes lead-orb {
        0% {
            transform: translate(-50%, -50%) rotate(-2deg) scale(0.98);
            opacity: 0.68;
        }

        50% {
            transform: translate(-50%, -50%) rotate(1.5deg) scale(1.04);
            opacity: 0.92;
        }

        100% {
            transform: translate(-50%, -50%) rotate(3deg) scale(1.02);
            opacity: 0.78;
        }
    }

    @media (min-width: 860px) {
        .lead__inner {
            grid-template-columns: 1fr 1.05fr;
        }

        .lead__media {
            min-height: clamp(430px, 42vw, 560px);
        }
    }

    @media (max-width: 859px) {
        .lead {
            padding-block: var(--space-xl);
        }

        .lead__media {
            order: -1;
            min-height: 300px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .lead__media::before {
            animation: none;
        }
    }

    /* ---------- Footer ---------- */
    .site-footer {
        background: var(--color-dark);
        color: var(--color-on-dark);
        margin-block-start: 0;
        padding-block: clamp(2rem, 4vw, 3.5rem);
        font-size: 0.86rem;
    }

    .site-footer__grid {
        display: grid;
        gap: clamp(1.5rem, 4vw, 4rem);
        align-items: start;
    }

    .site-footer__logos {
        display: flex;
        align-items: center;
        gap: clamp(1.2rem, 2vw, 2rem);
        margin-block-end: var(--space-md);
    }

    .site-footer__logos>a {
        display: inline-flex;
    }

    .site-footer__logos img {
        display: block;
    }

    .site-footer__logo {
        color: #fff;
        line-height: 0;
    }

    .site-footer__logo-svg {
        display: block;
        width: 148px;
        height: 32px;
        color: currentColor;
    }

    .site-footer__brand {
        max-width: 320px;
    }

    .site-footer__brand .text-muted,
    .site-footer__col .text-muted {
        color: rgba(245, 245, 245, 0.68);
        line-height: 1.45;
    }

    .site-footer__title {
        font-size: 0.95rem;
        font-weight: 700;
        margin-block-end: var(--space-sm);
    }

    .site-footer__col ul {
        display: grid;
        gap: 0.28rem;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .site-footer__col a {
        color: rgba(245, 245, 245, 0.78);
        transition: color var(--dur) var(--ease);
    }

    .site-footer__col a:hover {
        color: #fff;
    }

    .site-footer__col p {
        margin: 1em 0;
        line-height: 1.45;
    }

    .site-footer__kef {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        color: rgba(245, 245, 245, 0.82);
        font-size: 0.72rem;
        white-space: nowrap;
    }

    .site-footer__kef img {
        filter: brightness(0) invert(1);
    }

    .site-footer__dealer {
        font-weight: 600;
        margin-block-end: var(--space-sm);
    }

    .site-footer__phone {
        display: inline-flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.55rem;
        margin-block-end: var(--space-xs);
        font-size: 1.35rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--color-on-dark);
        white-space: nowrap;
    }

    .site-footer .btn {
        min-height: 0;
        padding: 0.62em 1.5em;
        font-size: 0.72rem;
    }

    .cons-btn {
        padding: 0.81em 1.5em !important;
    }

    .site-footer__rule {
        border: none;
        border-block-start: 1px solid rgba(255, 255, 255, 0.18);
        margin-block: clamp(2rem, 4vw, 3rem) var(--space-md);
    }

    .site-footer__legal {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
        justify-content: space-between;
        color: rgba(245, 245, 245, 0.6);
        font-size: 0.78rem;
    }

    .site-footer__legal-links {
        display: flex;
        flex-wrap: wrap;
        gap: clamp(2rem, 7vw, 7rem);
    }

    @media (min-width: 900px) {
        .site-footer__grid {
            grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        }
    }

    @media (min-width: 1174px) {
        .site-footer__grid {
            grid-template-columns: 1.45fr 0.85fr 0.9fr 1.05fr;
        }
    }

    @media (max-width: 520px) {
        .site-footer__logos {
            align-items: flex-start;
            flex-direction: column;
        }
    }

    /* ---------- Cart sheet ---------- */
    /* ------------------------------------------------ Modal windows */
    .modal {
        --modal-offset-top: calc(var(--header-h) + 2 * var(--space-sm) + var(--space-sm));
        position: fixed;
        inset: 0;
        z-index: 210;
        display: grid;
        place-items: center;
        padding: var(--space-md);
        padding-block-start: var(--modal-offset-top);
        pointer-events: none;
    }

    .modal[hidden] {
        display: none;
    }

    .modal.is-open {
        pointer-events: auto;
    }

    .modal__overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity var(--dur) var(--ease);
    }

    .modal.is-open .modal__overlay {
        opacity: 1;
    }

    .modal__panel {
        position: relative;
        width: min(100%, 460px);
        max-height: calc(100dvh - var(--modal-offset-top) - var(--space-md));
        overflow-y: auto;
        padding: clamp(1.5rem, 3vw, 2.25rem);
        background: var(--color-surface);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg, 0 30px 80px rgba(0, 0, 0, 0.25));
        transform: translateY(16px) scale(0.98);
        opacity: 0;
        transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
    }

    .modal__panel--wide {
        width: min(100%, 640px);
    }

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

    .modal__close {
        position: absolute;
        top: 0.9rem;
        right: 0.9rem;
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: var(--color-ink);
        background: var(--color-surface-soft, #f3f3f3);
        transition: background var(--dur) var(--ease);
    }

    .modal__close:hover {
        background: var(--color-line);
    }

    .modal__title {
        font-size: var(--fs-h3);
        font-weight: 700;
        margin-block-end: 0.5rem;
        padding-right: 2rem;
    }

    .modal__text {
        color: var(--color-muted);
        margin-block-end: var(--space-md);
    }

    .modal__form {
        display: grid;
        gap: var(--space-sm);
    }

    .modal__form label:not(.consent):not(.quote-channel):not(.quote-email) {
        display: grid;
        gap: 0.3rem;
        font-size: 0.9rem;
    }

    .modal__form label.quote-email {
        display: grid;
        gap: 0.3rem;
        font-size: 0.9rem;
    }

    .modal__form label.quote-email[hidden] {
        display: none;
    }

    .quote-channels {
        margin: 0;
        padding: 0;
        border: 0;
        min-width: 0;
    }

    .quote-channels legend {
        float: left;
        width: 100%;
        margin: 0 0 1.15rem;
        padding: 0;
        color: var(--color-ink);
        font-weight: 700;
        font-size: 0.95rem;
    }

    .quote-channels__list {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 0.45rem;
        clear: both;
    }

    .quote-channel {
        position: relative;
        grid-column: span 2;
        min-width: 0;
    }

    .quote-channel:nth-child(n + 4) {
        grid-column: span 3;
    }

    .quote-channel input {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        border: 0;
        appearance: none;
        -webkit-appearance: none;
    }

    .quote-channel > span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 40px;
        padding: 0.4rem 0.35rem;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-pill);
        background: #fff;
        color: var(--color-ink);
        font-size: 0.82rem;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        cursor: pointer;
    }

    .modal__form .quote-channel > span {
        color: var(--color-ink);
    }

    .quote-channel input:checked + span,
    .modal__form .quote-channel input:checked + span {
        border-color: var(--color-ink);
        background: var(--color-ink);
        color: #fff;
    }

    .quote-channel input:focus-visible + span {
        outline: 2px solid var(--color-ink);
        outline-offset: 2px;
    }

    .modal__form label:not(.consent)>span {
        color: var(--color-muted);
    }

    .modal__form input:not([type='checkbox']),
    .modal__form select,
    .modal__form textarea {
        width: 100%;
        padding: 0.7rem 0.85rem;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        background: #fff;
        font: inherit;
    }

    input[type='tel'][aria-invalid='true'] {
        border-color: #b42318 !important;
        box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.1);
    }

    .modal__form .consent {
        color: var(--color-muted);
    }

    .modal__form .consent__box {
        border-color: var(--color-muted);
    }

    .modal__form .consent input:checked+.consent__box {
        background: var(--color-ink);
        border-color: var(--color-ink);
    }

    .modal__form .consent input:checked+.consent__box::after {
        color: #fff;
    }

    .showroom-picker {
        display: grid;
        gap: 0.35rem;
    }

    .showroom-picker__label {
        color: var(--color-muted);
        font-size: 0.9rem;
    }

    .showroom-picker__trigger {
        display: flex;
        width: 100%;
        min-height: 46px;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-xs);
        padding: 0.7rem 0.85rem;
        color: var(--color-ink);
        background: #fff;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        font: inherit;
        text-align: start;
        transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
    }

    .showroom-picker.is-open .showroom-picker__trigger {
        border-color: var(--color-ink);
        box-shadow: 0 0 0 3px rgba(13, 13, 13, 0.08);
    }

    .showroom-picker.has-error .showroom-picker__trigger {
        border-color: #b42318;
    }

    .showroom-picker__panel {
        padding: var(--space-sm);
        background: #f8f8f7;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-sm);
    }

    .showroom-picker__calendar-head {
        display: grid;
        grid-template-columns: 36px 1fr 36px;
        gap: var(--space-2xs);
        align-items: center;
        margin-block-end: var(--space-xs);
        text-align: center;
    }

    .showroom-picker__calendar-head button {
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        background: #fff;
        border: 1px solid var(--color-line);
        border-radius: 50%;
    }

    .showroom-picker__calendar-head button:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .showroom-picker__weekdays,
    .showroom-picker__days {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 0.25rem;
    }

    .showroom-picker__weekdays {
        margin-block-end: 0.35rem;
        color: var(--color-muted);
        font-size: 0.7rem;
        text-align: center;
    }

    .showroom-picker__days button,
    .showroom-picker__day-spacer {
        aspect-ratio: 1;
    }

    .showroom-picker__days button {
        display: grid;
        min-width: 0;
        place-items: center;
        background: #fff;
        border: 1px solid transparent;
        border-radius: 8px;
        font-size: 0.82rem;
        transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    }

    .showroom-picker__days button:hover:not(:disabled) {
        border-color: var(--color-ink);
    }

    .showroom-picker__days button.is-today {
        border-color: var(--color-line);
        font-weight: 800;
    }

    .showroom-picker__days button.is-selected,
    .showroom-picker__slots button.is-selected {
        color: #fff;
        background: var(--color-ink);
        border-color: var(--color-ink);
    }

    .showroom-picker__days button:disabled,
    .showroom-picker__slots button:disabled {
        color: #aaa;
        background: transparent;
        cursor: not-allowed;
    }

    .showroom-picker__time {
        display: grid;
        gap: var(--space-xs);
        margin-block-start: var(--space-sm);
        padding-block-start: var(--space-sm);
        border-block-start: 1px solid var(--color-line);
    }

    .showroom-picker__slots {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .showroom-picker__slots button {
        min-height: 36px;
        padding: 0.4rem;
        background: #fff;
        border: 1px solid var(--color-line);
        border-radius: 8px;
        font-size: 0.78rem;
    }

    .showroom-picker__error {
        margin: 0;
        color: #b42318;
        font-size: 0.78rem;
    }

    .modal__form .btn {
        width: 100%;
        justify-content: center;
        margin-block-start: 0.25rem;
    }

    .modal__consent {
        font-size: 0.75rem;
        color: var(--color-muted);
    }

    .modal__consent a {
        color: inherit;
        text-decoration: underline;
    }

    .product-reviews__cta {
        margin-block-start: var(--space-lg);
    }

    .product-hero__rating-link {
        color: var(--color-ink);
        text-decoration: underline;
        font: inherit;
    }

    .product-hero__rating-link:hover {
        color: var(--color-muted);
    }

    .cart-sheet {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: grid;
        pointer-events: none;
    }

    .cart-sheet[hidden] {
        display: none;
    }

    .cart-sheet.is-open {
        pointer-events: auto;
    }

    .cart-sheet__overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.42);
        opacity: 0;
        transition: opacity var(--dur) var(--ease);
    }

    .cart-sheet.is-open .cart-sheet__overlay {
        opacity: 1;
    }

    .cart-sheet__panel {
        position: relative;
        justify-self: end;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        width: min(100%, 640px);
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        box-sizing: border-box;
        padding: clamp(1.25rem, 2.6vw, 2.25rem);
        background: var(--color-surface);
        box-shadow: -24px 0 70px rgba(0, 0, 0, 0.18);
        transform: translateX(100%);
        transition: transform var(--dur-slow) var(--ease);
        overflow: hidden;
    }

    .cart-sheet.is-open .cart-sheet__panel {
        transform: translateX(0);
    }

    .cart-sheet__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
        padding-block-end: clamp(0.75rem, 2vh, var(--space-md));
    }

    .cart-sheet__title {
        font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.25rem);
        line-height: 1.1;
    }

    .cart-sheet__close,
    .cart-item__remove {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        color: var(--color-ink);
        transition: opacity var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
    }

    .cart-sheet__close:hover,
    .cart-item__remove:hover {
        opacity: 0.6;
    }

    .cart-sheet__close:active,
    .cart-item__remove:active {
        transform: scale(0.94);
    }

    .cart-sheet__body {
        min-height: 0;
        overflow-y: auto;
        padding-inline-end: 0.25rem;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .cart-sheet__items {
        display: grid;
        list-style: none;
        padding: 0;
    }

    .cart-sheet__empty {
        color: var(--color-muted);
    }

    .cart-item {
        --cart-thumb: 72px;
        display: grid;
        grid-template-columns: var(--cart-thumb) minmax(0, 1fr) 2.5rem;
        grid-template-rows: auto auto;
        column-gap: 0.85rem;
        row-gap: 0.5rem;
        align-items: start;
        padding-block: 1.2rem;
        border-block-end: 1px solid var(--color-line);
    }

    .cart-item:first-child {
        border-block-start: 1px solid transparent;
    }

    .cart-item__image {
        grid-column: 1;
        grid-row: 1;
        width: var(--cart-thumb);
        height: var(--cart-thumb);
        object-fit: contain;
        background: none;
    }

    .cart-item__image--empty {
        display: block;
        background: none;
    }

    .cart-item__info {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        min-width: 0;
    }

    .cart-item__title {
        margin: 0;
        font-size: 1.12rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .cart-item__color,
    .cart-item__variant {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        margin-block-start: 0.55rem;
        color: var(--color-muted);
        font-size: 0.84rem;
    }

    .cart-item__swatch {
        width: 28px;
        height: 28px;
        border: 1px solid var(--color-ink);
        border-radius: 3px;
        background: linear-gradient(90deg, #222 0 50%, #555 50%);
    }

    .cart-item__qty {
        grid-column: 1;
        grid-row: 2;
        display: inline-grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        width: var(--cart-thumb);
        min-width: var(--cart-thumb);
        min-height: 32px;
        border: 1px solid var(--color-line);
        border-radius: 3px;
        color: var(--color-ink);
        text-align: center;
        font-size: 0.85rem;
    }

    .cart-item__qty button {
        display: grid;
        place-items: center;
        height: 100%;
        color: var(--color-muted);
    }

    .cart-item__price {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        align-self: center;
        gap: 0.2rem 0.55rem;
        margin: 0;
        line-height: 1.2;
    }

    .cart-item__price strong {
        font-size: 1rem;
    }

    .cart-item__price s {
        color: var(--color-muted);
        font-size: 0.78rem;
        font-weight: 400;
    }

    .cart-item:has(+ .cart-item--gift) {
        border-block-end: 0;
        padding-block-end: 0.45rem;
    }

    .cart-item--gift {
        padding-block-start: 0.45rem;
    }

    .cart-item__qty--static {
        grid-template-columns: 1fr;
        pointer-events: none;
    }

    .cart-item__remove {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        justify-self: end;
    }

    .cart-item--gift .cart-item__remove {
        visibility: hidden;
        pointer-events: none;
    }

    .cart-options {
        display: grid;
        gap: 0.65rem;
        margin-block-start: 1rem;
    }

    .cart-service {
        color: var(--color-muted);
        font-size: 0.88rem;
    }

    .cart-service__content {
        display: grid;
        gap: 0.15rem;
    }

    .cart-service__price {
        color: var(--color-ink);
        font-size: 0.82rem;
        font-weight: 700;
    }

    .cart-sheet__summary {
        display: grid;
        gap: var(--space-sm);
        position: relative;
        bottom: auto;
        z-index: 1;
        margin-inline: calc(clamp(1.25rem, 2.6vw, 2.25rem) * -1);
        margin-block-end: calc(clamp(1.25rem, 2.6vw, 2.25rem) * -1);
        padding: clamp(0.85rem, 2vh, var(--space-md)) clamp(1.25rem, 2.6vw, 2.25rem) clamp(1rem, 2vh, var(--space-md));
        background: var(--color-surface);
        background: color-mix(in srgb, var(--color-surface) 94%, transparent);
        border-block-start: 1px solid var(--color-line);
        box-shadow: 0 -18px 35px rgba(17, 17, 17, 0.08);
    }

    .cart-total {
        display: grid;
        gap: 0.35rem;
    }

    .cart-total div {
        display: flex;
        justify-content: space-between;
        gap: var(--space-md);
        color: var(--color-ink-soft);
        font-size: 0.9rem;
    }

    .cart-total dt {
        font-weight: 500;
    }

    .cart-total dd {
        margin: 0;
    }

    .cart-total__final {
        color: var(--color-ink) !important;
        font-size: 1.15rem !important;
        font-weight: 700;
    }

    .cart-promo {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        min-height: 58px;
        background: var(--color-bg);
        padding-inline: 1rem;
        position: relative;
        margin-bottom: 15px;
    }

    .cart-promo__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .cart-promo input {
        min-width: 0;
        border: 0;
        background: transparent;
        color: var(--color-ink);
        outline: none;
        font-size: 16px;
    }

    .cart-promo input::placeholder {
        color: var(--color-muted);
    }

    .cart-promo button {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
    }

    .cart-sheet__summary .btn {
        width: 100%;
    }

    @media (min-width: 860px) {
        .cart-sheet__panel {
            width: min(92vw, 720px);
        }
    }

    @media (max-width: 640px) {
        .cart-sheet__panel {
            display: grid;
            grid-template-rows: auto minmax(0, 1fr) auto;
            width: 100%;
            padding: 1rem;
        }

        .cart-sheet__body {
            overflow-y: auto;
            padding-inline-end: 0;
        }

        .cart-sheet__summary {
            margin-inline: -1rem;
            margin-block-end: -1rem;
            padding: 0.85rem 1rem 1rem;
        }

        .cart-item {
            --cart-thumb: 64px;
            grid-template-columns: var(--cart-thumb) minmax(0, 1fr) 2.25rem;
            column-gap: 0.75rem;
        }

        .cart-item__title {
            font-size: 1.02rem;
        }

        .product-hero__thumb:hover {
            transform: none;
        }
    }

    /* ---------- Checkout ---------- */
    .checkout-page {
        background: #f1f1ef;
        color: var(--color-ink);
    }

    .checkout {
        padding-block-start: 0;
    }

    .checkout__notice {
        border-radius: 14px;
        margin-block-end: var(--space-md);
        padding: 1rem;
        background: #fff;
    }

    .checkout__notice--success {
        border: 1px solid rgba(34, 139, 34, 0.3);
    }

    .checkout__notice--error {
        border: 1px solid rgba(180, 38, 38, 0.3);
    }

    .checkout__layout {
        display: grid;
        gap: var(--space-sm);
        align-items: start;
    }

    .checkout__form,
    .checkout__summary {
        border-radius: var(--radius-md);
        background: #fff;
        padding: clamp(1.25rem, 3vw, 2rem);
    }

    .checkout__back {
        display: inline-flex;
        color: var(--color-muted);
        font-size: 0.86rem;
        margin-block-end: 0.5rem;
        text-decoration: none;
    }

    .checkout__form h1 {
        margin-block-end: var(--space-stack);
    }

    .checkout__fields {
        display: grid;
        gap: var(--space-sm);
    }

    .checkout__form label,
    .checkout__fieldset {
        display: grid;
        gap: 0.45rem;
        color: var(--color-muted);
        font-size: 0.86rem;
    }

    .checkout__form input[type="text"],
    .checkout__form input[type="tel"],
    .checkout__form input[type="email"],
    .checkout__form textarea {
        width: 100%;
        border: 0;
        border-radius: 4px;
        background: #f0f0ee;
        color: var(--color-ink);
        padding: 1rem;
        font-size: 16px;
    }

    .checkout__fieldset {
        border: 0;
        margin: var(--space-lg) 0 0;
        padding: 0;
        gap: 0;
    }

    .checkout__fieldset legend {
        color: var(--color-ink);
        font-size: 1.25rem;
        font-weight: 700;
        margin-block-end: var(--space-xs);
    }

    .checkout__fieldset .choice {
        display: flex;
        gap: 0.7rem;
        color: var(--color-muted);
        font-size: 0.86rem;
        white-space: normal;
    }

    .checkout__wide,
    .checkout__fieldset .checkout__wide {
        display: grid;
        margin-block-start: var(--space-sm);
    }

    .checkout__consent {
        max-width: 620px;
        color: var(--color-muted);
        font-size: 0.78rem;
        margin-block-start: var(--space-sm);
    }

    .checkout__consent a {
        color: inherit;
        text-decoration: underline;
    }

    .checkout__submit {
        margin-block-start: var(--space-md);
    }

    [data-delivery-address][hidden] {
        display: none;
    }

    .cart-promo__msg {
        width: 100%;
        font-size: 0.78rem;
        margin-block-start: 0.35rem;
        position: absolute;
        bottom: -20px;
        /* left: 1rem*/
    }

    .cart-promo__msg[hidden] {
        display: none;
    }

    .cart-promo__msg.is-error {
        color: #c0392b;
    }

    .cart-promo__msg.is-ok {
        color: #1e824c;
    }

    .thank-you__inner {
        display: grid;
        justify-items: center;
        gap: var(--space-sm);
        max-width: 640px;
        margin-inline: auto;
        text-align: center;
    }

    .thank-you__badge {
        display: grid;
        place-items: center;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        color: #fff;
        background: var(--color-ink);
        margin-block-end: var(--space-sm);
    }

    .thank-you__lead {
        color: var(--color-muted);
        font-size: 1.05rem;
    }

    .thank-you__telegram {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 0.95rem;
        width: min(100%, 28rem);
        margin-block-start: var(--space-md);
        padding: 1rem 1.15rem;
        text-align: left;
        color: inherit;
        background: #fff;
        border: 1px solid rgba(17, 17, 17, 0.08);
        border-radius: 18px;
        box-shadow: 0 16px 40px rgba(17, 17, 17, 0.05);
        transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
    }

    .thank-you__telegram:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .thank-you__telegram-icon {
        display: grid;
        place-items: center;
        width: 3rem;
        height: 3rem;
        flex-shrink: 0;
        border-radius: 50%;
        color: #fff;
        background: #2aabee;
    }

    .thank-you__telegram-copy {
        display: grid;
        gap: 0.2rem;
        min-width: 0;
    }

    .thank-you__telegram-copy strong {
        font-size: 1rem;
        letter-spacing: -0.02em;
        line-height: 1.25;
    }

    .thank-you__telegram-copy span {
        color: var(--color-muted);
        font-size: 0.88rem;
        line-height: 1.4;
    }

    .thank-you__catalog {
        margin-block-start: var(--space-xs);
    }

    .checkout__summary {
        position: sticky;
        inset-block-start: 92px;
        display: grid;
        gap: var(--space-sm);
    }

    .checkout__items {
        display: grid;
        gap: 0.75rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .checkout-item {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr) auto;
        gap: 0.75rem;
        align-items: center;
        border-bottom: 1px solid rgba(17, 17, 17, 0.08);
        padding-block-end: 0.75rem;
    }

    .checkout-item strong {
        overflow-wrap: anywhere;
        text-wrap: wrap;
    }

    .checkout-item img {
        width: 56px;
        height: 56px;
        object-fit: contain;
        background: none;
    }

    .checkout-item span {
        display: block;
        color: var(--color-muted);
        font-size: 0.82rem;
        margin-block-start: 0.2rem;
    }

    .checkout-item small {
        display: block;
        color: var(--color-muted);
        font-size: 0.78rem;
        margin-block-start: 0.15rem;
    }

    .checkout-item--gift {
        padding-block-start: 0;
    }

    .checkout__empty {
        color: var(--color-muted);
        margin: 0;
    }

    .checkout__options:empty {
        display: none;
    }



    @media (min-width: 640px) {
        .checkout__fields {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 1200px) {
        .checkout__layout {
            grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem);
        }
    }

    @media (max-width: 640px) {
        .checkout {
            padding-block-start: 5.5rem;
        }

        .checkout__form,
        .checkout__summary {
            padding: 1rem;
        }

        .checkout__summary {
            position: static;
        }

        .checkout-item {
            grid-template-columns: 48px 1fr;
        }

        .checkout-item b {
            grid-column: 2;
        }
    }
}

/* ---------- страница warranty ---------- */
.warranty {
    border-radius: 5px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.container3 {
    max-width: 1440px;
    padding: 0 20px;
    margin: 0 auto;
}

.warranty-white {
    background-color: var(--color-surface);
    justify-content: space-between;
    padding: 45px 102px 40px 45px;
}

.warranty-black {
    background-color: transparent;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 40px 102px 40px 40px;
}

.page-title+.warranty {
    margin-block-start: var(--space-stack);
}

.warranty__content {
    border-radius: 5px;
}

.warranty__content>p {
    margin-top: 10px;
}

.warranty__content>h3 {
    margin-top: 0;
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: var(--lh-heading);
}

.warranty__content>p {
    max-width: 525px;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.warranty__paragraph {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.warranty__list {
    margin-top: 10px;
    max-width: 714px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.warranty__list>div {
    background: var(--color-bg);
    padding: 10px 10px 10px 23px;
    border-radius: 5px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.warranty__list>div>img {
    width: 37px;
    height: 37px;
}


.warranty__img {
    width: 506px;
    border-radius: var(--radius-sm);
}

.warranty__logistic {
    margin: 25px 0;
    background-image: url(../images/warranty/warranty-bg.webp);
}

.logistic__style>h3 {
    color: var(--color-surface);
}

.logistic__style>p {
    color: var(--color-surface);
    max-width: 583px;
    font-weight: 500 !important;
    line-height: 127% !important;
}

.footer-warranty {
    margin-top: 20px;
}

.footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.footer__social {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    transition: transform var(--dur-fast) var(--ease),
        border-color var(--dur) var(--ease),
        background var(--dur) var(--ease),
        color var(--dur) var(--ease);
}

.footer__social:hover {
    transform: translateY(-2px);
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: #fff;
}

@media (max-width: 1280px) {
    .warranty-white {
        padding: 40px 40px 40px 40px;
    }

    .warranty-black {
        padding: 40px 40px 40px 40px;
    }

    .warranty__list>div {
        padding: 10px 10px 10px 10px;
        gap: 10px;

    }
}

@media (max-width: 1000px) {
    .container3 {
        padding: 20px;
    }

    .warranty-white {
        flex-direction: column-reverse;
        background-color: transparent;
    }

    .warranty__list {
        max-width: 100%;
    }

    .warranty-black {
        flex-direction: column-reverse;
        padding: 20px 0 !important;
    }

    .warranty {
        padding: 0;
        gap: 10px;
    }

    .warranty__list>div {
        background: #D9D9D9;
    }

    .warranty__content {
        padding: 20px;
        background-color: var(--color-surface);
    }

    .logistic__style {
        background-color: var(--color-surface);
    }

    .logistic__style>h3 {
        color: black;
    }

    .logistic__style>p {
        color: var(--color-muted);
    }

}

@media (max-width: 899px) {
    .footer__socials {
        margin-top: 10px;
    }

    .solution-single__media {
        order: -1;
    }
}

@media (max-width: 425px) {
    .warranty__list>div>img {
        width: 30px;
        height: 30px;
    }

    .warranty__list>div>p {
        font-size: 12px !important;
    }
}



/* ========================================================== UTILITIES */
@layer utilities {
    /* iOS zooms the page when a focused field is under 16px. */
    @media (hover: none) {
        input:not([type='button']):not([type='submit']):not([type='reset']):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']):not([type='file']):not([type='image']),
        select,
        textarea {
            font-size: 16px !important;
        }
    }

    .limaudio-hp {
        position: absolute !important;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .text-muted {
        color: var(--color-muted);
    }

    /* Reveal только после JS и только на десктопе.
       Без скрипта и на мобилке блоки остаются видимыми. */
    @media (min-width: 761px) {
        html.reveal-on [data-reveal]:not(.is-visible) {
            opacity: 0;
            translate: 0 1.5rem;
        }

        html.reveal-on [data-reveal] {
            transition: opacity var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease);
        }

        html.reveal-on [data-reveal].is-visible {
            opacity: 1;
            translate: 0 0;
        }

        /* Последняя тёмная полоса: сдвиг открывает фон страницы над подвалом. */
        html.reveal-on .lead[data-reveal]:not(.lead--light),
        html.reveal-on .lead[data-reveal]:not(.lead--light):not(.is-visible) {
            translate: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        [data-reveal] {
            opacity: 1;
            translate: 0 0;
            transition: none;
        }
    }

    /* ---------- Mobile polish ---------- */
    @media (max-width: 640px) {
        .shell {
            padding-inline: 1rem;
        }

        .section {
            padding-block: var(--space-md);
        }

        .page-head {
            padding-block-start: var(--space-sm);
        }


        .section__lead {
            font-size: 1rem;
        }

        .btn {
            min-height: 46px;
            padding: 0.85em 1.35em;
            font-size: 0.78rem;
        }

        .hero {
            padding-block-start: var(--space-sm);
        }

        .page-head+.hero,
        .page-head+.section,
        .page-head+.catalog-hero,
        .page-head+.product-hero,
        .page-head+.solution-single__hero,
        .page-head+.solutions-archive__hero,
        .page-head+.about-hero {
            padding-block-start: 0;
        }

        .hero__content .btn {
            width: 100%;
            margin-block-start: var(--space-md);
        }

        .filter-bar {
            gap: var(--space-sm);
            margin-block-start: var(--space-md);
        }

        .filter--tabs {
            width: calc(100% + 2rem);
            margin-inline: -1rem;
            padding-inline: 1rem;
        }

        .filter-tabs-wrap {
            display: block;
            width: 100%;
        }

        .filter-tabs-nav {
            display: none;
        }

        .filter__btn {
            font-size: 0.68rem;
        }

        .filter--pills .filter__btn {
            padding: 0.55em 1em;
        }

        .category-grid {
            gap: 0.65rem;
            margin-block-start: var(--space-md);
        }

        .category-card {
            gap: 0.65rem;
            padding: 0.85rem;
            border-radius: 12px;
        }

        .category-card__title {
            font-size: 1rem;
        }

        .category-card__media img {
            max-height: 130px;
        }

        .category-card .btn {
            width: 100%;
            padding-inline: 0.75rem;
            font-size: 0.68rem;
        }

        .product-grid {
            gap: 0.65rem;
        }

        .product-skeleton {
            gap: 0.65rem;
            margin-block-start: var(--space-md);
        }

        .product-skeleton__card {
            padding: 0.75rem;
            border-radius: 8px;
        }

        .showroom-picker__slots .showroom-picker__slot--any {
            grid-column: 1 / -1;
            font-weight: 700;
        }

        .product-card {
            padding: 0.75rem;
            border-radius: 8px;
        }

        .product-card__info {
            margin-block-start: 0.8rem;
            gap: 0.25rem;
        }

        .product-card__title {
            font-size: 0.92rem;
            line-height: 1.2;
        }

        .product-card__meta {
            flex-wrap: wrap;
            gap: 0.25rem;
            font-size: 0.68rem;
        }

        .rating {
            font-size: 0.78rem;
        }

        .product-card__type {
            font-size: 0.74rem;
            line-height: 1.25;
        }

        .product-card__buy {
            gap: 0.65rem;
            margin-block-start: 0.65rem;
        }

        .price__now {
            font-size: 0.92rem;
        }

        .price__old {
            font-size: 0.72rem;
        }

        .carousel {
            margin-block-start: var(--space-md);
        }

        .carousel__track {
            gap: 0.85rem;
        }

        .carousel__nav {
            margin-block-start: var(--space-sm);
        }

        .slider-btn {
            width: 42px;
            height: 42px;
        }

        .solution-skeleton {
            grid-template-columns: 1fr;
            gap: var(--space-sm);
            padding: 1rem;
            border-radius: 12px;
        }

        .solution-skeleton__media {
            min-height: 220px;
        }

        .solution-skeleton__body {
            align-content: start;
        }

        .solution-skeleton__body span:nth-child(1) {
            width: 54%;
            height: 24px;
        }

        .solution-skeleton__body span:nth-child(2) {
            width: 92%;
            height: 34px;
        }

        .solution-skeleton__body span:nth-child(3) {
            width: 100%;
            height: 92px;
        }

        .solution-skeleton__body span:nth-child(4) {
            width: 100%;
            height: 46px;
        }

        .systems,
        .lead {
            padding-block: var(--space-block);
        }

        .systems__media,
        .lead__media {
            order: initial;
            min-height: 250px;
            padding-block-start: 0;
        }

        .systems__media::before,
        .lead__media::before {
            width: min(130%, 420px);
        }

        .systems__media img {
            width: min(72%, 280px);
        }

        .lead__media img {
            width: min(76%, 300px);
        }

        .aftercare,
        .faq {
            padding-block-start: var(--space-block);
        }

        .consultation__inner,
        .showroom__intro,
        .lead__inner,
        .systems__inner {
            gap: var(--space-md);
        }

        .consultation__media img,
        .showroom__slide img,
        .showroom__slide video {
            border-radius: 12px;
        }

        .showroom__cta {
            align-items: stretch;
            flex-direction: column;
            padding: 0;
        }

        .showroom__cta .btn {
            width: 100%;
        }

        .dealer,
        .showroom {
            padding-block: 3rem;
        }

        .showroom__intro {
            margin-block-end: 3rem;
        }

        .showroom__media-background {
            width: min(130%, 440px);
        }

        .brand-strip {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            justify-items: center;
            align-items: center;
            gap: 1rem 0.75rem;
            padding-block: 1.25rem;
        }

        .brand-strip img {
            max-height: 28px;
            width: auto;
        }

        .faq__list {
            margin-block-start: var(--space-md);
        }

        .faq__summary {
            padding: 1rem;
            font-size: 1rem;
            align-items: flex-start;
        }

        .faq__content {
            padding: 0 1rem 1rem;
        }

        .lead__content {
            max-width: none;
        }

        .lead__form {
            max-width: none;
        }

        .field__control {
            padding: 0.85em 1em;
        }

        .product-page .section {
            padding-block: var(--space-block);
        }

        .product-page .product-hero+.section:not(.product-lead),
        .product-page .section+.section:not(.product-lead) {
            padding-block-start: 0;
        }

        .product-page .product-lead {
            padding-block-start: var(--space-block);
        }

        .product-hero {
            padding-block: 0 var(--space-hero-after);
        }

        .product-hero__inner {
            gap: var(--space-stack);
        }

        .product-hero__media {
            gap: 0.8rem;
        }

        .product-hero__stage {
            border-radius: 14px;
        }

        .product-hero__stage img {
            padding: 1rem;
        }

        .product-hero__summary h1 {
            max-width: none;
            white-space: normal;
        }

        .product-hero__meta div,
        .product-specs dl div {
            font-size: 0.86rem;
        }

        .product-hero__meta div {
            align-items: flex-start;
        }

        .product-help-card {
            align-items: center;
            max-width: none;
        }

        .product-story__media img {
            min-height: 220px;
        }

        .product-aftercare__grid,
        .product-reviews__grid,
        .product-scenarios__list {
            gap: 0.75rem;
        }

        .product-lead__form {
            width: 100%;
        }

        .solution-single .section {
            padding-block: var(--space-block);
        }

        .solution-single .solution-lead {
            padding-block-start: var(--space-block);
        }

        .solution-single__hero {
            padding-block: 0 var(--space-hero-after);
        }

        .solution-single__hero-inner {
            gap: var(--space-stack);
        }

        .solution-single__media {
            border-radius: 14px;
        }

        .solution-single__media img {
            min-height: 260px;
        }

        .solution-single__summary h1 {
            max-width: none;
        }

        .solution-single__facts div {
            align-items: flex-start;
            font-size: 0.86rem;
        }

        .solution-single__summary .btn {
            width: 100%;
            justify-content: center;
        }

        .solution-composition__item {
            --composition-thumb: 4.5rem;
            grid-template-columns: var(--composition-thumb) minmax(0, 1fr);
            align-items: center;
            gap: 0.7rem;
            padding-block: 0.7rem;
        }

        .solution-composition__heading {
            display: contents;
        }

        .solution-composition__sep {
            display: none;
        }

        .solution-composition__item>div {
            display: grid;
            align-content: center;
            gap: 0.12rem;
            min-width: 0;
        }

        .solution-composition__item h3,
        .solution-composition__link,
        .solution-composition__item p {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.3;
        }

        .solution-composition__item h3 {
            font-size: 0.95rem;
        }

        .solution-composition__link {
            font-size: 0.8rem;
        }

        .solution-composition__item p {
            margin: 0;
            font-size: 0.82rem;
        }

        .solution-composition__media,
        .solution-composition__item img,
        .solution-composition__icon {
            width: var(--composition-thumb);
            height: var(--composition-thumb);
            border-radius: 10px;
        }

        .solution-adapt__inner>img {
            border-radius: 14px;
        }

        .solution-engineer__inner {
            border-radius: 14px;
            gap: 0;
        }

        .solution-engineer__inner>img {
            min-height: 260px;
        }

        .solution-lead__form {
            width: 100%;
        }

        .site-footer {
            padding-block: 2rem;
            font-size: 0.82rem;
        }

        .site-footer__grid {
            gap: 2rem;
        }

        .site-footer__brand {
            max-width: none;
        }

        .site-footer__rule {
            margin-block: 2rem 1rem;
        }

        .site-footer__legal,
        .site-footer__legal-links {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.75rem;
        }
    }

    @media (max-width: 420px) {
        /*
        .section {
            padding-block: 2.5rem;
        }*/

        .product-card {
            padding: 0.65rem;
        }

        .product-card__cart {
            padding-inline: 0.75rem;
            font-size: 0.66rem;
        }

        .category-card {
            padding: 0.75rem;
        }

        .category-card__media img {
            max-height: 112px;
        }
    }

    /* ---------- Responsive: header → mobile ---------- */
    @media (max-width: 1096px) {

        .site-nav,
        .contact-pill__text {
            display: none;
        }

        .burger {
            display: flex;
        }
    }

    @media (min-width: 1097px) {
        .mobile-menu {
            display: none;
        }
    }
}

/* ============================== Selection & About pages =============== */
@layer components {

    /* ---------- Hero features (страница «Подбор акустики») ---------- */
    .hero__features {
        display: grid;
        gap: var(--space-stack);
        margin-block-start: var(--space-md);
    }

    .hero-feature {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.75rem 1.1rem;
        background: rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(6px);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-pill);
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1.25;
    }

    .hero-feature__icon {
        display: grid;
        flex: 0 0 auto;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--color-ink);
        color: #fff;
    }

    @media (min-width: 761px) {
        .selection-page .hero__content {
            max-width: 880px;
        }

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

    @media (max-width: 760px) {
        .selection-page .hero__card {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto auto;
            align-items: stretch;
            min-height: 0;
            overflow: visible;
        }

        .selection-page .hero__bg {
            position: relative;
            inset: auto;
            grid-area: 1 / 1;
            align-self: stretch;
            justify-self: stretch;
            z-index: 0;
            border-radius: var(--radius-md);
            overflow: hidden;
        }

        .selection-page .hero__bg img {
            height: 100%;
            aspect-ratio: auto;
            object-fit: cover;
        }

        .selection-page .hero__card::after {
            display: none;
        }

        .selection-page .hero__bg::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(98deg, rgba(242, 242, 242, 0.97) 0%, rgba(242, 242, 242, 0.86) 42%, rgba(242, 242, 242, 0.28) 68%, transparent 86%);
        }

        .selection-page .hero__content {
            display: contents;
        }

        .selection-page .hero__intro {
            grid-area: 1 / 1;
            z-index: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            min-height: 16rem;
            padding: var(--space-md);
        }

        .selection-page .hero__features {
            grid-area: 2 / 1;
            margin-block-start: var(--space-sm);
        }
    }

    /* ---------- Scenario (тёмная секция) ---------- */
    .scenario {
        background: var(--color-dark);
        color: var(--color-on-dark);
        padding-block: var(--space-block);
    }

    .scenario__title {
        color: var(--color-on-dark);
        margin-block-end: var(--space-md);
    }

    .scenario__media {
        margin-block-start: var(--space-lg);
        display: grid;
        gap: var(--space-sm);
        margin-top: var(--space-md) !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scenario__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 4 / 3;
        border-radius: var(--radius-md);
    }

    .scenario__card {
        position: relative;
        display: grid;
        gap: var(--space-md);
        margin-block-start: -3rem;
        margin-inline: clamp(0px, 3vw, 3.5rem);
        padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
        color: var(--color-ink);
        background: var(--color-surface);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
    }

    /* ---------- Engineer quote (страница «Подбор акустики») ---------- */
    .engineer {
        padding-block: var(--space-block);
    }

    .engineer__inner {
        display: grid;
        gap: var(--space-lg);
        align-items: center;
    }

    .engineer__quote {
        margin-block-start: var(--space-md);
        padding-inline-start: var(--space-md);
        border-inline-start: 3px solid var(--color-ink);
        font-size: var(--fs-lead);
        font-style: italic;
        color: var(--color-ink-soft);
    }

    .engineer__author {
        display: flex;
        flex-direction: column;
        margin-block-start: var(--space-md);
    }

    .engineer__media img {
        width: 100%;
        border-radius: var(--radius-md);
        object-fit: cover;
    }

    @media (min-width: 860px) {
        .engineer__inner {
            grid-template-columns: 1.15fr 0.85fr;
        }
    }

    /* ---------- Lead form — светлый вариант ---------- */
    .site-main .lead--light {
        padding-block: var(--space-block);
    }

    .lead--light {
        background-color: var(--color-surface-soft);
        color: var(--color-ink);
    }

    .lead--light::before {
        display: none;
    }

    .lead--light .section__title {
        color: var(--color-ink);
    }

    .lead--light .text-muted {
        color: var(--color-muted);
    }

    .lead--light .field__control {
        background: var(--color-surface);
        color: var(--color-ink);
        border-color: var(--color-line);
    }

    .lead--light .field__control::placeholder {
        color: var(--color-muted);
    }

    .lead--light .field__control:focus {
        border-color: var(--color-ink);
        box-shadow: 0 0 0 3px rgba(13, 13, 13, 0.08);
    }

    .lead--light .consent {
        color: var(--color-muted);
    }

    .lead--light .consent__box {
        border-color: var(--color-muted);
    }

    .lead--light .consent__box::after {
        color: #fff;
    }

    .lead--light .consent input:checked+.consent__box {
        background: var(--color-ink);
        border-color: var(--color-ink);
    }

    .lead--light .lead__media::before {
        opacity: 0.1;
    }

    /* ---------- About: hero ---------- */
    .about-hero {
        padding-block: 0 var(--space-hero-after);
    }

    .about-hero__inner {
        display: grid;
        gap: var(--space-md);
        align-items: center;
        justify-items: center;
        text-align: center;
        padding: var(--space-hero-pad);
        background-color: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .about-hero__title {
        max-width: 22ch;
        margin-inline: auto;
    }

    .about-hero__content .text-muted {
        margin-block-start: var(--space-stack);
        margin-inline: auto;
        max-width: 62ch;
    }

    .about-hero__media {
        width: 100%;
        max-width: 420px;
    }

    .about-hero__media img {
        width: 100%;
        height: auto;
        border-radius: var(--radius-md);
        object-fit: contain;
    }


    @media (min-width: 860px) {
        .about-hero__inner {
            grid-template-columns: 1.1fr 0.9fr;
            text-align: left;
            justify-items: stretch;
            padding: var(--space-hero-pad);
        }

        .about-hero__content .text-muted {
            margin-inline: 0;
            max-width: 54ch;
        }

        .about-hero__title {
            margin-inline: 0;
            max-width: 18ch;
        }

        .about-hero__media {
            max-width: none;
            justify-self: end;
        }

        .about-hero__media img {
            height: auto;
        }
    }

    /* ---------- About: heritage ---------- */
    .heritage>div>h2 {
        margin-bottom: var(--space-stack);
    }

    .heritage__media {
        overflow: hidden;
        border-radius: var(--radius-md);
    }


    .heritage__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 16 / 8;
    }



    .heritage__card {
        position: relative;
        margin-block-start: -3rem;
        margin-inline: clamp(0px, 3vw, 3.5rem);
        padding: clamp(1.35rem, 1rem + 2.4vw, 2.75rem);
        overflow: hidden;
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
    }

    .heritage__intro {
        max-width: 72ch;
        color: var(--color-ink-soft);
        font-size: 1.1rem;
    }

    .heritage__eras {
        position: relative;
        margin-block-start: 2rem;
        padding-inline-start: 0;
    }

    .heritage-era {
        position: relative;
        display: grid;
        gap: 1.25rem;
        padding-block: 2rem 0.5rem;
        border-block-start: 1px solid var(--color-line);
    }

    .heritage-era:first-child {
        padding-block-start: 1.5rem;
        border-block-start: 0;
    }

    .heritage-era__year {
        display: block;
        margin-bottom: 0.35rem;
        color: var(--color-ink);
        font-size: clamp(3rem, 2.2rem + 4vw, 5.5rem);
        font-weight: 800;
        letter-spacing: -0.07em;
        line-height: 0.85;
        background: linear-gradient(180deg, rgba(13, 13, 13, 0.14) 0%, rgba(13, 13, 13, 0.04) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .heritage-era__title {
        margin: 0 0 0.85rem;
        font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
        line-height: 1.25;
    }

    .heritage-era__copy {
        display: grid;
        gap: 0.75rem;
        color: var(--color-ink-soft);
        font-size: 1.03rem;
        line-height: 1.65;
    }

    .heritage-era__copy p {
        margin: 0;
    }

    .heritage-era__stage {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: center;
        gap: clamp(0.6rem, 1.8vw, 1.75rem);
        min-height: 240px;
        padding: 1.75rem 0.75rem 1.5rem;
    }

    .heritage-era__stage::after {
        content: "";
        position: absolute;
        left: 10%;
        right: 10%;
        bottom: 0.35rem;
        height: 36px;
        background: radial-gradient(ellipse at center, rgba(13, 13, 13, 0.12), transparent 72%);
        pointer-events: none;
    }

    .heritage-era__model {
        position: relative;
        z-index: 1;
        margin: 0;
        flex: 0 1 auto;
        max-width: 46%;
    }

    .heritage-era.is-visible .heritage-era__model {
        opacity: 1;
        transform: none;
        animation: heritage-enter 0.85s var(--ease) calc(var(--i, 1) * 90ms) both,
            heritage-float 4.8s ease-in-out calc(0.9s + var(--i, 1) * 0.28s) infinite;
    }

    .heritage-era__model img {
        display: block;
        width: auto;
        max-width: 100%;
        height: clamp(140px, 22vw, 230px);
        object-fit: contain;
        filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.2));
        transform-origin: 50% 100%;
        transition: transform 0.45s var(--ease), filter 0.45s var(--ease);
    }

    .heritage-era__model--tall img {
        height: clamp(170px, 28vw, 280px);
    }

    .heritage-era__model:hover img {
        transform: translateY(-10px) scale(1.05);
        filter: drop-shadow(0 26px 28px rgba(0, 0, 0, 0.28));
    }

    .heritage-era--now {
        gap: 1.5rem;
    }

    .heritage-era__now {
        display: grid;
        gap: 1rem;
    }

    .heritage-era__now-item {
        margin: 0;
    }

    .heritage-era.is-visible .heritage-era__now-item {
        opacity: 1;
        transform: none;
        animation: heritage-enter 0.8s var(--ease) calc(var(--i, 1) * 110ms) both;
    }

    .heritage-era__now-media {
        display: grid;
        place-items: center;
        min-height: 250px;
        margin-bottom: 0.75rem;
        padding: 1.25rem 1rem 0.85rem;
        background: linear-gradient(180deg, #f7f7f7 0%, #efefef 100%);
        border-radius: var(--radius-md);
    }

    .heritage-era__now-media img {
        width: auto;
        max-width: 100%;
        height: 210px;
        object-fit: contain;
        filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.18));
        transition: transform 0.45s var(--ease), filter 0.45s var(--ease);
    }

    .heritage-era__now-item:hover .heritage-era__now-media img {
        transform: translateY(-8px) scale(1.04);
        filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.24));
    }

    .heritage-era__now-media--spin img {
        height: 180px;
        animation: heritage-spin 42s linear infinite;
    }

    .heritage-era__now-item:hover .heritage-era__now-media--spin img {
        animation-play-state: paused;
        transform: scale(1.06);
    }

    .heritage-era__now-item figcaption {
        display: grid;
        gap: 0.35rem;
        padding: 0 0.15rem 0.25rem;
    }

    .heritage-era__now-item strong {
        font-size: 0.95rem;
    }

    .heritage-era__now-item span {
        color: var(--color-ink-soft);
        font-size: 0.92rem;
        line-height: 1.55;
    }

    @keyframes heritage-enter {
        from {
            opacity: 0;
            transform: translateY(28px) scale(0.94);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes heritage-float {

        0%,
        100% {
            translate: 0 0;
        }

        50% {
            translate: 0 -7px;
        }
    }

    @keyframes heritage-spin {
        to {
            transform: rotate(360deg);
        }
    }

    @media (prefers-reduced-motion: reduce) {

        .heritage-era.is-visible .heritage-era__model,
        .heritage-era.is-visible .heritage-era__now-item,
        .heritage-era__now-media--spin img {
            animation: none;
            opacity: 1;
            transform: none;
            translate: 0;
        }
    }

    .heritage__history-block-3 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        list-style: none;
        padding-left: 0;
        margin-block-start: 1rem;
        color: var(--color-ink-soft);
        font-size: 1.03rem;
        line-height: 1.65;
        gap: 10px;
    }

    .heritage__history-block-2 {
        display: grid;
        grid-auto-columns: 1fr;
        gap: 10px;
        margin-top: 10px;
        padding-left: 0;
        list-style: none;
    }

    .heritage__history-block-2 li {
        padding: clamp(1.1rem, 0.9rem + 1.5vw, 1.75rem);
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
    }

    .heritage__history-h3 {
        font-size: 1.4rem;
        margin: 20px 0 10px 0;
    }

    .heritage__history-h4 {
        margin: 0 0 10px 0;
        font-size: 1.9rem;
    }

}

@media (min-width: 960px) {
    .heritage__history-block-2 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .heritage__history-block-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .heritage-era:not(.heritage-era--now) {
        grid-template-columns: minmax(0, 0.92fr) minmax(280px, 1.08fr);
        align-items: center;
        gap: 2.5rem;
        padding-block: 2.5rem 0.75rem;
    }

    .heritage-era:nth-child(even):not(.heritage-era--now) .heritage-era__stage {
        order: -1;
    }

    .heritage-era__now {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.35rem;
    }

    .heritage-era__model {
        max-width: 30%;
    }

    .heritage__history-h4 {
        font-size: 2.4rem;
    }

}

/* ---------- About: physics ---------- */
.section.physics {
    min-height: 100%;
    margin-top: 30px;
}

.physics__inner {
    display: grid;
    gap: var(--space-xs);
    align-items: start;
    margin-block-start: var(--space-lg);
}

.physics__single-img {
    display: flex;
    align-items: center;
    background-color: #1e1a1a;
    border-radius: var(--radius-md);
    height: 100%;
    padding: 10px 0;
}


.physics__inner-1 {
    display: grid;
    gap: var(--space-xs);
    align-items: stretch;
    margin-block-start: var(--space-md);
    min-height: 100%;
}

.physics__inner-1>div:first-child {
    display: flex;
    align-items: center;
    background-color: #1e1a1a;
    border-radius: var(--radius-md);
}

.physics__media {
    border-radius: var(--radius-md);
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.physics__media img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.physics__media span {
    padding-left: 10px;
    color: var(--color-bg);
}

.physics_p {
    margin-top: 10px;
}


.physics__list {
    display: grid;
    gap: var(--space-md);
    align-self: stretch;
}

.physics__item {
    padding: clamp(1.1rem, 0.9rem + 1.5vw, 1.75rem);
    background: var(--color-line);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
}

.physics__item ul {
    margin: 10px 0;
}

.physics__item div h4 {
    font-weight: 600;
    font-size: var(--fs-lead);
}

.physics__item h3 {
    font-size: var(--fs-h3);
    font-weight: 700;
}

.physics-black {
    background-color: var(--color-dark);
    border-radius: var(--radius-md);
}

.physics__item p {
    margin-block-start: var(--space-2xs);
    color: var(--color-ink-soft);
}

@media (min-width: 860px) {
    .physics__inner {
        grid-template-columns: 0.9fr 1.1fr;
    }

}


@media (min-width: 1024px) {
    .physics__inner-1 {
        grid-template-columns: 1.2fr 0.8fr;
    }
}

/* ---------- About: legend CTA ---------- */
.legend {
    background: var(--color-surface-soft);
    padding-block: var(--space-block) var(--space-sm);
}

.legend__inner {
    display: grid;
    gap: var(--space-lg);
    align-items: center;
}

.legend__content .btn {
    margin-block-start: var(--space-md);
}

.legend__content p {
    margin-top: var(--space-sm);
}

.legend__media {
    display: grid;
    place-items: center;
    margin-bottom: 0 !important;
}

.legend__media img {
    width: min(50%, 440px);
    filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.18));
}

@media (min-width: 860px) {
    .legend__inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 859px) {
    .scenario__media {
        grid-template-columns: minmax(0, 1fr);
    }

    .scenario__card,
    .heritage__card {
        margin-block-start: -1.75rem;
        margin-inline: clamp(0px, 3vw, 1.5rem);
    }

    .engineer__media {
        order: -1;
    }
}


/* ================================= Contacts page ===================== */
@layer components {
    .contacts__layout {
        display: grid;
        gap: var(--space-lg);
        align-items: start;
    }

    .contacts__title {
        margin-block-end: var(--space-sm);
    }

    .contacts__card {
        padding: clamp(1.25rem, 1rem + 2vw, 2rem);
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
    }

    .contacts__list {
        display: grid;
        gap: var(--space-md);
    }

    .contacts__item {
        display: flex;
        gap: 0.85rem;
        align-items: flex-start;
    }

    .contacts__icon {
        display: grid;
        flex: 0 0 auto;
        place-items: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--color-ink);
        color: #fff;
    }

    .contacts__item p {
        color: var(--color-ink-soft);
    }

    .contacts__item strong {
        color: var(--color-ink);
        font-weight: 700;
    }

    .contacts__item a {
        color: inherit;
    }

    .contacts__item a:hover {
        text-decoration: underline;
    }

    .contacts__note {
        margin-block-start: var(--space-md);
        padding-block-start: var(--space-md);
        border-block-start: 1px solid var(--color-line);
        font-weight: 700;
        color: var(--color-ink);
        padding-bottom: var(--space-xs);
    }

    .contacts__socials {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-block-start: var(--space-sm);
    }

    .contacts__social {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        color: var(--color-ink);
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        transition: transform var(--dur-fast) var(--ease),
            border-color var(--dur) var(--ease),
            background var(--dur) var(--ease),
            color var(--dur) var(--ease);
    }

    .contacts__social:hover {
        transform: translateY(-2px);
        border-color: var(--color-ink);
        background: var(--color-ink);
        color: #fff;
    }

    .contacts__map {
        position: relative;
        border-radius: var(--radius-md);
        overflow: hidden;
        background: var(--color-surface-soft);
        box-shadow: var(--shadow-sm);
    }

    .contacts__map iframe {
        display: block;
        width: 100%;
        height: 100%;
        min-height: clamp(320px, 42vw, 520px);
        border: 0;
    }

    .contacts__map-logo {
        position: absolute;
        inset-block-end: 12px;
        inset-inline-end: 12px;
        display: inline-flex;
        align-items: center;
        padding: 0.4rem 0.7rem;
        background: rgba(255, 255, 255, 0.85);
        border-radius: var(--radius-pill);
        box-shadow: var(--shadow-sm);
    }

    .contacts__map-logo img {
        height: 20px;
        width: auto;
    }

    @media (min-width: 860px) {
        .contacts__layout {
            grid-template-columns: 0.9fr 1.1fr;
            gap: var(--space-xl);
            align-items: center;
        }
    }
}


@layer yamap {
    .map-container {
        max-width: 660px;
        height: 564px;
        width: 100%;
        margin: 0 auto;
        border-radius: 20px;
        overflow: hidden;
        transition: all 0.2s ease;
    }

    #map {
        width: 100%;
        height: 564px;
        display: block;
        background-color: #e2e9ef;
    }

    .ymaps-2-1-79-gototech {
        display: none !important;
    }

    .map-placemark__circle {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: var(--color-surface);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .map-placemark__icon {
        width: 27px;
        height: 20px;
        object-fit: contain;
    }
}

@layer cookie-consent {
    .cookie-consent {
        position: fixed;
        z-index: 1100;
        right: clamp(12px, 3vw, 32px);
        bottom: clamp(12px, 3vw, 32px);
        left: clamp(12px, 3vw, 32px);
        max-width: 880px;
        margin-inline: auto;
        border: 1px solid rgba(13, 13, 13, 0.12);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 18px 60px rgba(0, 0, 0, 0.2);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .cookie-consent.is-hiding {
        opacity: 0;
        transform: translateY(16px);
        pointer-events: none;
    }

    .cookie-consent__content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: clamp(20px, 4vw, 48px);
        padding: clamp(18px, 3vw, 28px);
    }

    .cookie-consent h2 {
        margin: 0 0 6px;
        font-size: clamp(1.1rem, 1rem + 0.35vw, 1.35rem);
    }

    .cookie-consent p {
        max-width: 580px;
        margin: 0;
        color: var(--color-muted);
        line-height: 1.5;
    }

    .cookie-consent a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .cookie-consent__actions {
        display: flex;
        flex: 0 0 auto;
        gap: 10px;
    }

    .cookie-consent__actions .btn {
        min-width: 120px;
    }

    @media (max-width: 680px) {
        .cookie-consent {
            border-radius: 14px;
        }

        .cookie-consent__content {
            display: block;
        }

        .cookie-consent__actions {
            margin-top: 16px;
        }

        .cookie-consent__actions .btn {
            flex: 1 1 0;
            min-width: 0;
        }
    }
}

.header-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.header-search__toggle {
    position: relative;
    z-index: 2;
}

.header-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.header-search__panel {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 1;
    width: 0;
    opacity: 0;
    overflow: visible;
    pointer-events: none;
    transform: translateY(-50%);
    transition: width 0.22s ease, opacity 0.18s ease;
}

.header-search.is-open .header-search__panel {
    width: min(240px, 42vw);
    opacity: 1;
    pointer-events: auto;
}

.header-search input[type="search"] {
    width: 100%;
    height: 40px;
    padding: 0 44px 0 14px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    font: inherit;
    font-size: 0.92rem;
}

.header-search__list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.header-search__list a {
    display: block;
    padding: 8px 10px;
    color: inherit;
    text-decoration: none;
}

.header-search__list a:hover,
.header-search__list a:focus-visible {
    background: var(--color-surface-soft);
}

.header-search--mobile {
    display: block;
    width: 100%;
    margin-block-end: 0.5rem;
}

.header-search--mobile .header-search__panel,
.header-search--mobile.header-search {
    position: static;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.header-search--mobile input[type="search"] {
    padding-inline: 14px;
    background: var(--color-surface-soft);
    box-shadow: none;
}

.product-hero__specs {
    margin-block: 0.35rem 0.85rem;
}

.product-hero__specs summary {
    width: fit-content;
    cursor: pointer;
}

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

.product-hero__specs-panel {
    max-height: min(420px, 55vh);
    margin-top: 0.65rem;
    overflow: auto;
}

.product-hero__specs dl {
    display: grid;
    gap: 0.45rem;
    margin: 0;
}

.product-hero__specs dl div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.product-hero__specs dt {
    color: var(--color-muted);
}

.product-hero__specs dd {
    margin: 0;
    text-align: end;
}

.lead select.field__control {
    color-scheme: dark;
}

.lead--light select.field__control {
    color-scheme: light;
}

@media (max-width: 1096px) {
    .header-search.is-open .header-search__panel {
        width: 0;
        opacity: 0;
        pointer-events: none;
    }
}

.product-card__actions {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 0.45rem;
    align-items: stretch;
}

.product-card__compare,
.product-buy__compare {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    color: var(--color-ink);
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    cursor: pointer;
}

.product-card__compare.is-active,
.product-buy__compare.is-active {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: #fff;
}

.product-buy__compare {
    width: 100%;
    height: 100%;
    min-height: 100%;
    border-radius: var(--radius-pill);
}

.product-card__cart {
    width: 100%;
}

.section.compare-page {
    padding-block-start: 0;
}

.compare-page__head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1.25rem;
}

.compare-page__lead {
    margin: 0.35rem 0 0;
    color: var(--color-muted);
    max-width: 42rem;
}

.compare-page__add {
    flex: 0 0 auto;
}

.compare-table-wrap {
    overflow-x: auto;
    margin-block-end: 2.5rem;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.compare-table-wrap.is-scroll {
    scrollbar-gutter: stable;
}

.compare-table {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
    table-layout: fixed;
}

.compare-table[data-compare-cols="2"] {
    min-width: 34rem;
}

.compare-table[data-compare-cols="3"] {
    min-width: 44rem;
}

.compare-table th,
.compare-table td {
    width: 12rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--color-line);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.compare-table__corner,
.compare-table tbody th {
    width: 9.5rem;
    color: var(--color-muted);
    font-weight: 600;
    background: rgba(17, 17, 17, 0.02);
}

.compare-table__product {
    display: grid;
    gap: 0.55rem;
    justify-items: start;
    min-height: 11rem;
}

.compare-table__image {
    display: grid;
    place-items: center;
    width: 7rem;
    height: 7rem;
    background: #fff;
}

.compare-table__image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.compare-table__title {
    font-weight: 700;
    color: var(--color-ink);
    text-decoration: none;
}

.compare-table__remove {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-muted);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
}

.compare-table__slot {
    display: grid;
    place-items: center;
    gap: 0.35rem;
    width: 100%;
    min-height: 11rem;
    padding: 1rem;
    border: 1px dashed var(--color-line);
    border-radius: 14px;
    background: rgba(17, 17, 17, 0.02);
    color: var(--color-ink);
    cursor: pointer;
}

.compare-table__slot span {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--color-line);
    font-size: 1.4rem;
    line-height: 1;
}

.compare-table__empty {
    color: var(--color-muted);
}

.compare-table__price {
    font-weight: 700;
}

.compare-table__old {
    display: block;
    margin-block-start: 0.15rem;
    color: var(--color-muted);
}

.compare-picker {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: grid;
    place-items: end center;
}

.compare-picker[hidden] {
    display: none;
}

.compare-picker__overlay {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(17, 17, 17, 0.45);
}

.compare-picker__panel {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: min(78vh, 720px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    margin: 0;
    padding: 1rem 1rem 1.25rem;
    border-radius: 18px 18px 0 0;
    background: #fff;
    box-shadow: 0 -12px 40px rgba(17, 17, 17, 0.18);
}

.compare-picker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.compare-picker__head h2 {
    margin: 0;
    font-size: 1.15rem;
}

.compare-picker__close {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.06);
    font-size: 1.25rem;
    cursor: pointer;
}

.compare-picker__search {
    display: grid;
    gap: 0.35rem;
    margin: 0.85rem 0;
}

.compare-picker__search-label {
    font-size: 0.82rem;
    color: var(--color-muted);
}

.compare-picker__search input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    font: inherit;
}

.compare-picker__list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: auto;
}

.compare-picker__item button {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    padding: 0.65rem 0.2rem;
    border: 0;
    border-bottom: 1px solid var(--color-line);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.compare-picker__thumb {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    overflow: hidden;
}

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

.compare-picker__meta {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.compare-picker__meta strong {
    overflow-wrap: anywhere;
}

.compare-picker__meta small {
    color: var(--color-muted);
}

.compare-picker__plus {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 1px solid var(--color-line);
    font-size: 1.1rem;
}

.compare-picker__empty {
    padding: 1.25rem 0.25rem;
    color: var(--color-muted);
}

.quote-channel--icon > span {
    gap: 0.35rem;
    flex-direction: column;
    min-height: 3.4rem;
    padding: 0.45rem 0.4rem;
}

.quote-channel__icon {
    display: inline-flex;
    color: inherit;
}

.quote-channel__label {
    font-size: 0.78rem;
}

.field--channels .quote-channels {
    width: 100%;
}

.custom-select {
    position: relative;
    width: 100%;
}

.custom-select__native {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.custom-select__button {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.7rem 2.4rem 0.7rem 0.85rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23111111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.9rem center;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.custom-select--catalog .custom-select__button {
    min-height: 46px;
    padding: 0.75rem 1.8rem 0.75rem 0.9rem;
    font-weight: 600;
    background-color: #f7f7f7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23111111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
}

.custom-select--catalog.is-open .custom-select__button,
.custom-select--catalog .custom-select__button:focus {
    background-color: #fff;
    border-color: var(--color-ink);
}

.custom-select.is-open .custom-select__button {
    border-color: var(--color-ink);
}

.custom-select__list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(17, 17, 17, 0.12);
    max-height: 16rem;
    overflow: auto;
}

.custom-select__option {
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
}

.custom-select__option:hover,
.custom-select__option[aria-selected="true"] {
    background: rgba(17, 17, 17, 0.06);
}

.product-hero__stage {
    touch-action: pan-y;
}

.product-card__title,
.product-card__type,
.compare-table__title,
.product-buy__oneclick {
    overflow-wrap: anywhere;
}

@media (max-width: 360px) {
    .product-buy__actions {
        grid-template-columns: minmax(0, 1fr) 2.85rem;
    }

    .product-buy__oneclick {
        grid-column: 1 / -1;
        order: 3;
    }
}