/* Search by VIN — full-width workspace layout */

/*
 * Many themes set display on generic containers and accidentally defeat HTML [hidden].
 * Keep catalog workspace and candidate dock off-screen until the script opens them.
 */
.cwoa-panel--hidden {
    display: none !important;
}

/*
 * Единый словарь видимости (scoped): те же длительность/кривая, что и --cwoa-reveal-duration / motionReveal.
 * Для интерактивных блоков предпочтительны panelShow/panelHide + .cwoa-panel--leaving, без прямого display в JS.
 */
#cwoa-app .cwoa-ui-is-hidden {
    opacity: 0 !important;
    transform: translate3d(0, 10px, 0);
    pointer-events: none !important;
}

#cwoa-app .cwoa-ui-is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
        opacity var(--cwoa-reveal-duration) var(--cwoa-motion-ease),
        transform var(--cwoa-reveal-duration) var(--cwoa-motion-ease);
}

/* Фаза закрытия: opacity/transform, затем JS ставит [hidden] + .cwoa-panel--hidden (без transition на display). */
#cwoa-app #cwoa-candidate-dock.cwoa-panel--leaving,
#cwoa-app #cwoa-workspace.cwoa-panel--leaving,
#cwoa-app #cwoa-ai-inline-workspace.cwoa-panel--leaving {
    opacity: 0 !important;
    transform: translate3d(0, 12px, 0);
    pointer-events: none;
}

#cwoa-app #cwoa-workspace:not(.cwoa-panel--hidden) {
    transform-origin: top center;
    transition:
        opacity var(--cwoa-reveal-duration) var(--cwoa-motion-ease),
        transform var(--cwoa-reveal-duration) var(--cwoa-motion-ease);
}

#cwoa-app #cwoa-unit-am-dock.cwoa-panel--leaving {
    opacity: 0 !important;
    transform: translate3d(0, 12px, 0);
    pointer-events: none;
}

#cwoa-app #cwoa-part-name-rail.cwoa-panel--leaving {
    opacity: 0 !important;
    transform: translate3d(0, 12px, 0);
    pointer-events: none;
}

/* Модалка узла: выход зеркалит вход (backdrop + dialog). */
#cwoa-unit-modal.cwoa-modal--leaving .cwoa-modal-backdrop {
    opacity: 0;
    transition: opacity calc(var(--cwoa-reveal-duration) * 0.95) var(--cwoa-motion-ease);
}

#cwoa-unit-modal.cwoa-modal--leaving .cwoa-unit-modal-dialog {
    opacity: 0;
    transform: translateY(14px) scale(0.992);
    transition:
        opacity calc(var(--cwoa-reveal-duration) * 1.02) var(--cwoa-motion-ease),
        transform calc(var(--cwoa-reveal-duration) * 1.02) var(--cwoa-motion-ease);
}

#cwoa-unit-modal #cwoa-unit-modal-img[hidden] {
    display: none !important;
}

/* Нижний AM-dock: базовый переход для фазы .cwoa-panel--leaving (JS не трогает display до конца анимации). */
#cwoa-app #cwoa-unit-am-dock:not([hidden]):not(.cwoa-panel--hidden) {
    transform-origin: top center;
    transition:
        opacity var(--cwoa-reveal-duration) var(--cwoa-motion-ease),
        transform var(--cwoa-reveal-duration) var(--cwoa-motion-ease);
}

/*
 * Theme-aware tokens: наследуем цвет/шрифт страницы; панели и границы — от currentColor.
 * Переопределение с темы: #cwoa-app { --cwoa-accent: ...; --cwoa-fs: ...; }
 *
 * #cwoa-unit-modal встроен в #cwoa-catalog-info; модалки юридических страниц могут быть вне блока —
 * те же токены задаём на корне модалки при необходимости.
 */
/*
 * Прокрутка к якорю: запас под шапку портала — см. --cwoa-anchor-scroll-margin на #cwoa-app.cwoa-app.
 */
#cwoa-app .cwoa-generated-block-anchor {
    scroll-margin-top: var(--cwoa-anchor-scroll-margin);
}

/* Ссылки и кликабельные контролы: явный курсор-указатель (темы часто сбрасывают на стрелку) */
#cwoa-app a[href]:not([disabled]) {
    cursor: pointer;
}

#cwoa-app button:not(:disabled):not([disabled="disabled"]) {
    cursor: pointer;
}

#cwoa-app [role="button"]:not([aria-disabled="true"]):not([disabled]) {
    cursor: pointer;
}

#cwoa-app .cwoa-action,
#cwoa-app .cwoa-site-head__portal-exit-link,
#cwoa-app .cwoa-site-head__mark-link,
#cwoa-app .cwoa-site-head__title-link,
#cwoa-app .cwoa-site-head__logo a {
    cursor: pointer;
}

#cwoa-app .cwoa-custom-select__trigger {
    cursor: pointer;
}

#cwoa-app.cwoa-app,
.cwoa-catalog-shell,
.cwoa-minimal-outer,
#cwoa-unit-modal-root,
#cwoa-unit-modal,
#cwoa-diagram-lightbox,
.cwoa-contact-modal,
#cwoa-auth-modal,
.cwoa-cell-tooltip,
.cwoa-locale-switch-overlay {
    --cwoa-text: currentColor;
    --cwoa-muted: color-mix(in srgb, currentColor 72%, transparent);
    --cwoa-faint: color-mix(in srgb, currentColor 48%, transparent);
    --cwoa-border: color-mix(in srgb, currentColor 17%, transparent);
    --cwoa-border-inner: color-mix(in srgb, currentColor 11%, transparent);
    --cwoa-surface: color-mix(in srgb, currentColor 6%, transparent);
    --cwoa-surface-strong: color-mix(in srgb, currentColor 10%, transparent);
    /* Колонка схемы в модалке узла — единое полотно и чуть более тёмная «рамка» вокруг JPEG */
    --cwoa-diagram-canvas: color-mix(in srgb, currentColor 14%, transparent);
    --cwoa-diagram-matte: color-mix(in srgb, currentColor 22%, transparent);
    --cwoa-card: Canvas;
    --cwoa-bg: Field;
    --cwoa-accent: var(--wp-admin-theme-color, var(--wp--preset--color--primary, #2271b1));
    /* Matches default --cwoa-accent fallback (#2271b1); used where color-mix() is unavailable (older Safari). */
    --cwoa-accent-rgb: 34, 113, 177;
    --cwoa-accent-soft: color-mix(in srgb, var(--cwoa-accent) 14%, transparent);
    --cwoa-accent-muted: color-mix(in srgb, var(--cwoa-accent) 9%, transparent);
    --cwoa-danger: #b32d2e;
    /* Затемнение модалки и тень — не из темы; переопределяются в админке «Цвета» */
    --cwoa-modal-overlay: rgba(0, 0, 0, 0.42);
    --cwoa-modal-shadow: 0 22px 64px rgba(0, 0, 0, 0.22);
    --cwoa-radius: 8px;
    --cwoa-radius-sm: 6px;
    --cwoa-radius-lg: 14px;
    --cwoa-shadow-sm: 0 1px 2px color-mix(in srgb, currentColor 6%, transparent);
    --cwoa-shadow-md: 0 8px 28px color-mix(in srgb, currentColor 11%, transparent);
    /* Единая база появления / сдвига верхней зоны и панелей (одинаковая «скорость») */
    --cwoa-reveal-duration: 0.95s;
    /* Прокрутка страницы к якорному блоку (кандидаты, AM-док и т.д.) — медленнее встроенного scrollIntoView(smooth) */
    --cwoa-anchor-scroll-duration: 1.45s;
    /* Запас под sticky-шапку; к #cwoa-workspace в JS добавляется бонус зазора кандидат→каталог + небольшой nudge */
    --cwoa-anchor-scroll-margin: 88px;
    --cwoa-motion-duration: 0.95s;
    --cwoa-layout-duration: 0.95s;
    --cwoa-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* База = шрифт темы (родитель); отступления — в em от этой базы */
    --cwoa-fs: 1em;
    --cwoa-fs-sm: 0.875em;
    --cwoa-fs-xs: 0.8125em;
    color: inherit;
    font-family: inherit;
    font-size: var(--cwoa-fs);
    line-height: 1.5;
}

@keyframes cwoa-motion-rise {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    42% {
        opacity: 0.72;
        transform: translateY(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Контент уже в DOM, ждём commitReveal — без мигания до анимации */
.cwoa-await-reveal {
    opacity: 0 !important;
    pointer-events: none;
    transition: none !important;
}

/*
 * Search tiles / candidate dock: без keyframes-rise — translateY давал «плывущую» высоту (~--cwoa-reveal-duration)
 * относительно строки поиска и таблицы кандидата.
 */
.cwoa-motion-in:not(.cwoa-workspace):not(#cwoa-unit-modal):not(#cwoa-auth-modal):not(#cwoa-plan-desc-modal):not(.cwoa-contact-modal):not(.cwoa-units-rail):not(.cwoa-units-mount):not(#cwoa-unit-am-dock):not(.cwoa-search-panel):not(#cwoa-candidate-dock):not(#cwoa-ai-inline-workspace):not(#cwoa-params-expanded) {
    animation: cwoa-motion-rise var(--cwoa-reveal-duration) var(--cwoa-motion-ease) both;
}

/* Нижний блок aftermarket на странице каталога */
#cwoa-unit-am-dock.cwoa-motion-in {
    animation: cwoa-motion-rise calc(var(--cwoa-reveal-duration) * 1.08) var(--cwoa-motion-ease) both;
}

/*
 * Колонки каталога: transition (как у модалки), не keyframes — темы реже ломают transition.
 * Дерево — слегка слева, rail со схемами — справа «въезжает».
 */
#cwoa-app .cwoa-workspace .cwoa-main-grid > .cwoa-panel {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
        opacity var(--cwoa-reveal-duration) var(--cwoa-motion-ease),
        transform var(--cwoa-reveal-duration) var(--cwoa-motion-ease);
}

#cwoa-app .cwoa-workspace .cwoa-main-grid > .cwoa-panel:nth-child(1) {
    transform: translate3d(-22px, 14px, 0);
}

#cwoa-app .cwoa-workspace .cwoa-main-grid > .cwoa-panel:nth-child(2) {
    transform: translate3d(26px, 14px, 0);
}

#cwoa-app .cwoa-workspace.cwoa-motion-in .cwoa-main-grid > .cwoa-panel {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

#cwoa-app .cwoa-workspace.cwoa-motion-in .cwoa-main-grid > .cwoa-panel:nth-child(1) {
    transition-delay: 0.08s;
}

#cwoa-app .cwoa-workspace.cwoa-motion-in .cwoa-main-grid > .cwoa-panel:nth-child(2) {
    transition-delay: 0.2s;
}

#cwoa-unit-modal:not([hidden]):not(.cwoa-motion-in) .cwoa-modal-backdrop {
    opacity: 0;
}

#cwoa-unit-modal:not([hidden]):not(.cwoa-motion-in) .cwoa-unit-modal-dialog {
    opacity: 0;
    transform: translateY(14px) scale(0.992);
}

#cwoa-unit-modal.cwoa-motion-in .cwoa-modal-backdrop {
    opacity: 1;
    transition: opacity calc(var(--cwoa-reveal-duration) * 0.95) var(--cwoa-motion-ease);
}

#cwoa-unit-modal.cwoa-motion-in .cwoa-unit-modal-dialog {
    opacity: 1;
    transform: none;
    transition:
        opacity calc(var(--cwoa-reveal-duration) * 1.02) var(--cwoa-motion-ease),
        transform calc(var(--cwoa-reveal-duration) * 1.02) var(--cwoa-motion-ease);
}

/* Вход WooCommerce: как модалка узла — затемнение + карточка снизу */
#cwoa-auth-modal:not([hidden]):not(.cwoa-motion-in) .cwoa-auth-modal__backdrop {
    opacity: 0;
}

#cwoa-auth-modal:not([hidden]):not(.cwoa-motion-in) .cwoa-auth-modal__dialog {
    opacity: 0;
    transform: translateY(14px) scale(0.992);
}

#cwoa-auth-modal:not([hidden]) .cwoa-auth-modal__backdrop {
    transition: opacity calc(var(--cwoa-reveal-duration) * 0.95) var(--cwoa-motion-ease);
}

#cwoa-auth-modal:not([hidden]) .cwoa-auth-modal__dialog {
    transition:
        opacity calc(var(--cwoa-reveal-duration) * 1.02) var(--cwoa-motion-ease),
        transform calc(var(--cwoa-reveal-duration) * 1.02) var(--cwoa-motion-ease);
}

#cwoa-auth-modal.cwoa-motion-in .cwoa-auth-modal__backdrop {
    opacity: 1;
}

#cwoa-auth-modal.cwoa-motion-in .cwoa-auth-modal__dialog {
    opacity: 1;
    transform: none;
}

/* Описание тарифа: как #cwoa-auth-modal — плавное затемнение + «подъём» карточки (--cwoa-reveal-duration). */
#cwoa-plan-desc-modal:not([hidden]):not(.cwoa-motion-in) .cwoa-plan-desc-modal__backdrop {
    opacity: 0;
}

#cwoa-plan-desc-modal:not([hidden]):not(.cwoa-motion-in) .cwoa-plan-desc-modal__dialog {
    opacity: 0;
    transform: translateY(14px) scale(0.992);
}

#cwoa-plan-desc-modal:not([hidden]) .cwoa-plan-desc-modal__backdrop {
    transition:
        opacity calc(var(--cwoa-reveal-duration, 0.95s) * 0.95) var(--cwoa-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

#cwoa-plan-desc-modal:not([hidden]) .cwoa-plan-desc-modal__dialog {
    transition:
        opacity calc(var(--cwoa-reveal-duration, 0.95s) * 1.02) var(--cwoa-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
        transform calc(var(--cwoa-reveal-duration, 0.95s) * 1.02) var(--cwoa-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

#cwoa-plan-desc-modal.cwoa-motion-in .cwoa-plan-desc-modal__backdrop {
    opacity: 1;
}

#cwoa-plan-desc-modal.cwoa-motion-in .cwoa-plan-desc-modal__dialog {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .cwoa-await-reveal {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    #cwoa-app .cwoa-workspace .cwoa-main-grid > .cwoa-panel {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .cwoa-motion-in:not(#cwoa-unit-modal),
    #cwoa-app .cwoa-workspace.cwoa-motion-in .cwoa-main-grid > .cwoa-panel,
    #cwoa-unit-am-dock.cwoa-motion-in {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    #cwoa-app .cwoa-units-rail,
    #cwoa-app #cwoa-part-name-rail {
        transition: none !important;
    }

    #cwoa-app .cwoa-units-rail.cwoa-await-reveal,
    #cwoa-app #cwoa-part-name-rail.cwoa-await-reveal {
        transform: none !important;
    }

    #cwoa-unit-modal:not([hidden]):not(.cwoa-motion-in) .cwoa-modal-backdrop,
    #cwoa-unit-modal:not([hidden]):not(.cwoa-motion-in) .cwoa-unit-modal-dialog,
    #cwoa-unit-modal.cwoa-motion-in .cwoa-modal-backdrop,
    #cwoa-unit-modal.cwoa-motion-in .cwoa-unit-modal-dialog {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .cwoa-contact-modal:not([hidden]):not(.cwoa-motion-in) .cwoa-contact-modal__backdrop,
    .cwoa-contact-modal:not([hidden]):not(.cwoa-motion-in) .cwoa-contact-modal__dialog,
    .cwoa-contact-modal.cwoa-motion-in .cwoa-contact-modal__backdrop,
    .cwoa-contact-modal.cwoa-motion-in .cwoa-contact-modal__dialog,
    #cwoa-auth-modal:not([hidden]):not(.cwoa-motion-in) .cwoa-auth-modal__backdrop,
    #cwoa-auth-modal:not([hidden]):not(.cwoa-motion-in) .cwoa-auth-modal__dialog,
    #cwoa-auth-modal.cwoa-motion-in .cwoa-auth-modal__backdrop,
    #cwoa-auth-modal.cwoa-motion-in .cwoa-auth-modal__dialog,
    #cwoa-plan-desc-modal:not([hidden]):not(.cwoa-motion-in) .cwoa-plan-desc-modal__backdrop,
    #cwoa-plan-desc-modal:not([hidden]):not(.cwoa-motion-in) .cwoa-plan-desc-modal__dialog,
    #cwoa-plan-desc-modal.cwoa-motion-in .cwoa-plan-desc-modal__backdrop,
    #cwoa-plan-desc-modal.cwoa-motion-in .cwoa-plan-desc-modal__dialog {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .cwoa-vin-shell,
    .cwoa-candidate-dock,
    .cwoa-top,
    #cwoa-search-row,
    #cwoa-app .cwoa-search-panel {
        transition: none !important;
    }

    #cwoa-app .cwoa-search-panel:hover,
    #cwoa-app .cwoa-search-panel:focus-within {
        transform: none !important;
    }

}

/*
 * Корень каталога: высота окна только когда #cwoa-workspace реально виден в DOM (:has — без рассинхрона с JS-классом).
 * Пока панель скрыта [hidden] или .cwoa-panel--hidden — не задавать min-height:100vh (иначе белая полоса до подвала).
 */
.cwoa-app {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/*
 * --cwoa-shell-vpad: поля оболочки у краёв окна (сверху/после подвала).
 * --cwoa-portal-stack-gap: один шаг между блоками портала, секциями main и верхом подвала (без «двойных» margin).
 */
#cwoa-app.cwoa-app {
    --cwoa-shell-vpad: clamp(10px, 1.8vw, 20px);
    --cwoa-portal-stack-gap: clamp(12px, 1.8vw, 20px);
    padding-bottom: var(--cwoa-shell-vpad);
    /* Предотвращаем горизонтальный скролл страницы — таблицы скроллятся внутри своих контейнеров */
    max-width: 100%;
    overflow-x: hidden;
}

section#cwoa-app.cwoa-app:not(:has(#cwoa-workspace:not([hidden]):not(.cwoa-panel--hidden))) {
    min-height: 0 !important;
    height: auto !important;
}

section#cwoa-app.cwoa-app:has(#cwoa-workspace:not([hidden]):not(.cwoa-panel--hidden)) {
    min-height: 100vh !important;
    min-height: 100dvh !important;
}

/* Без :has() — только класс из JS (старые движки) */
@supports not selector(:has(a)) {
    section#cwoa-app.cwoa-app:not(.cwoa-app--workspace-open) {
        min-height: 0 !important;
        height: auto !important;
    }

    section#cwoa-app.cwoa-app.cwoa-app--workspace-open {
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }
}

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

/* Home/catalog chrome: centered shell; колонка для портала на всю высоту окна при открытой рабочей области */
#cwoa-app .cwoa-catalog-shell {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding-inline: clamp(14px, 2.4vw, 44px);
    padding-top: var(--cwoa-shell-vpad, clamp(10px, 1.8vw, 20px));
    /* Нижний зазор до подвала задаём margin-top у .cwoa-catalog-footer__shell — иначе суммируется с padding-bottom оболочки */
    padding-bottom: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 0 1 auto !important;
    min-height: 0 !important;
}

#cwoa-app:has(#cwoa-workspace:not([hidden]):not(.cwoa-panel--hidden)) .cwoa-catalog-shell,
#cwoa-app.cwoa-app--workspace-open .cwoa-catalog-shell {
    flex: 1 1 auto !important;
}

/*
 * Строка поиска: колонки одной высоты (stretch), равномерные отступы — визуально симметричная полоса.
 */
#cwoa-app #cwoa-search-row.cwoa-search-strip,
#cwoa-app #cwoa-search-row {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    align-content: stretch;
    justify-content: flex-start;
    gap: 14px 16px;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

#cwoa-app #cwoa-search-row > .cwoa-search-col {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

#cwoa-app #cwoa-search-row > .cwoa-search-col > * {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

#cwoa-app #cwoa-search-row > .cwoa-search-col--params:not(:has(#cwoa-params-block:not([hidden]))) {
    display: none !important;
}

/* Узкий desktop / large tablet: 2×2 wrap (901–1024). Ниже 900 — полный стек.
 * .cwoa-search-strip добавлен в селектор: иначе specificity media-rule (0,2,0,0)
 * проигрывает base group-selector (0,2,1,0) и flex-wrap остаётся nowrap. */
@media (min-width: 901px) and (max-width: 1024px) {
    #cwoa-app #cwoa-search-row.cwoa-search-strip,
    #cwoa-app #cwoa-search-row {
        flex-wrap: wrap;
    }

    #cwoa-app #cwoa-search-row > .cwoa-search-col {
        flex: 1 1 calc(50% - 7px);
        max-width: calc(50% - 7px);
    }
}

/* Tablet portrait, landscape-phone, narrow laptop → вертикальный стек.
 * Ширина карточки 100%, нативный wrap без сжатия inputs/selects.
 * .cwoa-search-strip нужен для специфичности — см. комментарий к 901–1024 выше. */
@media (max-width: 900px) {
    #cwoa-app #cwoa-search-row.cwoa-search-strip,
    #cwoa-app #cwoa-search-row {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 12px;
    }

    #cwoa-app #cwoa-search-row > .cwoa-search-col {
        flex: 1 1 auto;
        max-width: 100%;
        min-width: 0;
    }

    #cwoa-app #cwoa-search-row .cwoa-search-panel {
        height: auto;
        flex: 0 1 auto;
    }

    #cwoa-app #cwoa-search-row .cwoa-search-tile__footer {
        margin-top: 8px;
        padding-top: 0;
    }

    #cwoa-app #cwoa-search-row > .cwoa-search-col > * {
        flex: 0 1 auto;
        height: auto;
    }

    #cwoa-app .cwoa-candidate-dock {
        width: 100%;
    }

    /* Таблица кандидатов: остаётся компактной к ширине контейнера; горизонтальный скролл
     * только внутри .cwoa-candidate-table-scroll при необходимости (узкие колонки + clamp). */
    #cwoa-app .cwoa-candidate-table {
        min-width: 0;
        width: 100%;
        table-layout: auto;
    }

    #cwoa-app .cwoa-candidate-table th {
        overflow-wrap: break-word;
        hyphens: manual;
    }

    #cwoa-app .cwoa-candidate-table td {
        word-break: normal;
        overflow-wrap: break-word;
    }

    #cwoa-app .cwoa-candidate-sys-item {
        grid-template-columns: 1fr;
    }
}

/* Tiles: equal row height via flex stretch; focus-within = subtle ring only (no “stuck blue” tile). */
#cwoa-app .cwoa-search-panel {
    margin: 0;
    padding: 12px 14px;
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--cwoa-card) 94%, white),
        var(--cwoa-card) 48%,
        color-mix(in srgb, var(--cwoa-card) 92%, var(--cwoa-accent))
    );
    border-radius: calc(var(--cwoa-radius-lg) + 2px);
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 85%, var(--cwoa-accent));
    box-shadow:
        0 1px 0 color-mix(in srgb, white 55%, transparent),
        0 8px 28px -8px color-mix(in srgb, currentColor 14%, transparent),
        0 20px 48px -18px color-mix(in srgb, var(--cwoa-accent) 12%, transparent);
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    transition:
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.28s ease,
        background 0.28s ease;
}

#cwoa-app .cwoa-search-panel:hover {
    border-color: color-mix(in srgb, var(--cwoa-accent) 42%, var(--cwoa-border));
    box-shadow:
        0 2px 0 color-mix(in srgb, white 40%, transparent),
        0 12px 36px -10px color-mix(in srgb, currentColor 18%, transparent),
        0 28px 56px -14px color-mix(in srgb, var(--cwoa-accent) 22%, transparent);
}

#cwoa-app .cwoa-search-panel:focus-within {
    border-color: color-mix(in srgb, var(--cwoa-accent) 32%, var(--cwoa-border));
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--cwoa-accent) 18%, transparent),
        0 8px 28px -8px color-mix(in srgb, currentColor 14%, transparent);
    background: var(--cwoa-card);
}

#cwoa-app .cwoa-search-panel__title {
    margin: 0;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--cwoa-text);
    line-height: 1.3;
}

#cwoa-app .cwoa-search-panel__intro {
    margin: 0;
    font-size: var(--cwoa-fs-xs);
    line-height: 1.4;
    color: var(--cwoa-muted);
}

#cwoa-app .cwoa-search-panel__hint {
    margin: 0;
    font-size: var(--cwoa-fs-xs);
    line-height: 1.4;
    color: var(--cwoa-muted);
}

/* Unified search tiles — header, main, footer action (same row height via grid stretch) */
#cwoa-app .cwoa-search-tile__head {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Фиксированная высота — чтобы поле ввода во всех плитках начиналось на одном уровне, даже если
     * описание (lead) в одной плитке занимает одну строку («Кроссы AM»), а в другой — две («По VIN»).
     * Запас над фактически наблюдаемыми ~58px на случай более длинных переводов в других языках. */
    min-height: 4rem;
    justify-content: flex-start;
}

#cwoa-app .cwoa-search-tile__title {
    margin: 0;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--cwoa-text);
    line-height: 1.25;
    /* Перенос только по словам: keep-all блокирует буквенный break,
     * overflow-wrap разрешает перенос длинных «слов»-токенов (OEM, URL и пр.). */
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: manual;
}

#cwoa-app .cwoa-search-tile__lead {
    margin: 0;
    font-size: var(--cwoa-fs-xs);
    line-height: 1.3;
    color: var(--cwoa-muted);
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: manual;
}

#cwoa-app .cwoa-search-tile__main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* One visual system for all search tiles */
#cwoa-app #cwoa-search-row {
    --cwoa-tile-title-size: 1rem;
    --cwoa-tile-label-size: var(--cwoa-fs-xs);
    --cwoa-tile-control-size: var(--cwoa-fs-sm);
    --cwoa-tile-control-height: 2rem;
    --cwoa-tile-control-padding: 0.45rem 0.65rem;
    /* Portal card footer CTAs (VIN / parameters / AM / AI teaser) — typography only */
    --cwoa-portal-tile-cta-font-size: var(--cwoa-fs-sm);
    --cwoa-portal-tile-cta-font-weight: 600;
    --cwoa-portal-tile-cta-line-height: 1.35;
    --cwoa-portal-tile-cta-letter-spacing: 0;
}

#cwoa-app .cwoa-search-tile__footer {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 4px;
}

#cwoa-app .cwoa-field-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

#cwoa-app .cwoa-field-label {
    font-size: var(--cwoa-fs-sm);
    font-weight: 600;
    color: var(--cwoa-text);
    margin: 0 0 4px;
}

/* One density for every tile input/select (same visual weight as compressed wizard) */
#cwoa-app #cwoa-search-row .cwoa-search-tile .cwoa-field-label {
    font-size: var(--cwoa-fs-xs);
    margin: 0 0 2px;
}

#cwoa-app .cwoa-search-tile .cwoa-field,
#cwoa-app .cwoa-search-tile select.cwoa-field {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.65rem;
    border-radius: var(--cwoa-radius-sm);
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 88%, var(--cwoa-accent));
    font-family: inherit;
    font-size: var(--cwoa-fs-sm);
    line-height: 1.35;
    min-height: 2rem;
    background: var(--cwoa-bg);
    color: var(--cwoa-text);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

#cwoa-app .cwoa-search-tile .cwoa-field:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--cwoa-accent) 55%, var(--cwoa-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cwoa-accent) 22%, transparent);
}

/* Params wizard: dense layout, no inner scrollbar — grid row height matches tallest tile */
#cwoa-app .cwoa-params-block .cwoa-search-tile__main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
}

#cwoa-app .cwoa-params-block .cwoa-wizard-root {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
}

#cwoa-app .cwoa-params-block:not(.cwoa-params-block--has-brand) #cwoa-wizard-steps-host {
    display: none;
}

/* Марка: тот же визуал поля ввода, что и у других плиток (метка выше → контрол полной ширины ниже), а не строка «метка | выбор». */
#cwoa-app .cwoa-params-block .cwoa-wizard-catalog-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-bottom: 4px;
}

#cwoa-app .cwoa-params-block .cwoa-wizard-catalog-row .cwoa-wizard-label {
    font-size: var(--cwoa-fs-xs);
    font-weight: 600;
    margin: 0 0 2px;
    line-height: 1.2;
}

/* Сам триггер — то же оформление, что у .cwoa-field (как у VIN/OEM), клик по-прежнему открывает скролл-список марок. */
#cwoa-app .cwoa-params-block .cwoa-wizard-catalog-row .cwoa-custom-select__trigger {
    width: 100%;
    min-height: 2rem;
    padding: 0.45rem 0.65rem !important;
    border-radius: var(--cwoa-radius-sm);
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 88%, var(--cwoa-accent));
    background: var(--cwoa-bg);
    color: var(--cwoa-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: inherit;
    font-size: var(--cwoa-fs-sm) !important;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
}

#cwoa-app .cwoa-params-block .cwoa-wizard-catalog-row .cwoa-custom-select.is-placeholder .cwoa-custom-select__label {
    opacity: 0.55;
    color: color-mix(in srgb, currentColor 55%, transparent);
}

#cwoa-app .cwoa-params-block .cwoa-wizard-catalog-row .cwoa-custom-select__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

#cwoa-app .cwoa-params-block .cwoa-wizard-catalog-row .cwoa-custom-select__chevron {
    flex: 0 0 auto;
    color: var(--cwoa-accent);
    font-size: 0.85em;
    opacity: 0.85;
}

/*
 * Панель оставшихся шагов мастера «По параметрам» — полноширинная, под строкой из 4 плиток, появляется после выбора марки.
 * Заполняется/показывается через renderWizardTable() в cwoa-app.js.
 */
#cwoa-app #cwoa-params-expanded {
    position: relative; /* якорь для абсолютного спиннера загрузки (.cwoa-loading-host .cwoa-block-loading-overlay) */
    box-sizing: border-box;
    width: 100%;
    margin-top: 14px;
    padding: 1rem 1.15rem;
    border-radius: var(--cwoa-radius-md, 12px);
    border: 1px solid var(--cwoa-border);
    background: var(--cwoa-card);
    /* Высота подтягивается под блок поиска через inline min-height (cwoaSyncParamsExpandedMinHeight);
       flex-колонка нужна, чтобы нижняя строка (счётчик/очистить) прижималась
       к низу панели, а не висла сразу после полей, когда полей мало и осталось пустое место. */
    display: flex;
    flex-direction: column;
}

#cwoa-app #cwoa-params-expanded[hidden] {
    display: none;
}

/*
 * Нижняя строка панели шагов: слева — счётчик кандидатов + кнопка «Показать», справа — «Очистить
 * всё». Заменяет отдельный блок «Найдено» и центрированный ряд «Очистить всё» — оба теперь живут
 * внутри панели шагов.
 */
#cwoa-app #cwoa-params-expanded .cwoa-wizard-footer-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    /* margin-top: auto в flex-колонке прижимает эту строку к низу панели, даже если выше пусто
       из-за min-height, подогнанного под высоту блока поиска. */
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid var(--cwoa-border);
}

#cwoa-app #cwoa-params-expanded .cwoa-wizard-candidates-summary {
    grid-column: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

#cwoa-app #cwoa-params-expanded .cwoa-wizard-candidates-summary__text {
    font-size: var(--cwoa-fs-sm);
    font-weight: 600;
    color: var(--cwoa-text);
    white-space: normal;
}

#cwoa-app #cwoa-params-expanded .cwoa-wizard-footer-row .cwoa-search-tile__clear {
    grid-column: 2;
    justify-self: end;
}

@media (max-width: 560px) {
    #cwoa-app #cwoa-params-expanded .cwoa-wizard-footer-row {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    #cwoa-app #cwoa-params-expanded .cwoa-wizard-candidates-summary,
    #cwoa-app #cwoa-params-expanded .cwoa-wizard-footer-row .cwoa-search-tile__clear {
        grid-column: 1;
        justify-self: center;
    }

    #cwoa-app #cwoa-params-expanded .cwoa-wizard-candidates-summary {
        justify-content: center;
    }
}

#cwoa-app .cwoa-wizard-steps-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 12px 16px;
}

@media (max-width: 900px) {
    #cwoa-app .cwoa-wizard-steps-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#cwoa-app .cwoa-wizard-step-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/*
 * Новые шаги мастера (которых не было в предыдущем ответе API) мягко проявляются, вместо
 * мгновенной подмены DOM. Класс добавляется JS-ом только для действительно новых карточек,
 * базовое состояние без класса всегда полностью видимо.
 */
#cwoa-app .cwoa-wizard-step-card--new {
    animation: cwoaWizardStepEnter 0.32s ease both;
}

@keyframes cwoaWizardStepEnter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #cwoa-app .cwoa-wizard-step-card--new {
        animation: none;
    }
}

#cwoa-app .cwoa-wizard-step-card .cwoa-wizard-th {
    font-size: var(--cwoa-fs-xs);
    font-weight: 600;
    color: var(--cwoa-text);
    line-height: 1.2;
}

#cwoa-app .cwoa-wizard-step-card .cwoa-wizard-td {
    position: relative;
}

#cwoa-app .cwoa-wizard-step-card .cwoa-custom-select__trigger {
    width: 100%;
    min-height: 2rem;
    padding: 0.45rem 0.65rem !important;
    border-radius: var(--cwoa-radius-sm);
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 88%, var(--cwoa-accent));
    background: var(--cwoa-bg);
    color: var(--cwoa-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: inherit;
    font-size: var(--cwoa-fs-sm) !important;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
}

#cwoa-app .cwoa-wizard-step-card .cwoa-custom-select.is-placeholder .cwoa-custom-select__label {
    opacity: 0.55;
    color: color-mix(in srgb, currentColor 55%, transparent);
}

#cwoa-app .cwoa-wizard-step-card .cwoa-custom-select__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

#cwoa-app .cwoa-wizard-step-card .cwoa-custom-select__chevron {
    flex: 0 0 auto;
    color: var(--cwoa-accent);
    font-size: 0.85em;
    opacity: 0.85;
}

#cwoa-app .cwoa-wizard-step-card .cwoa-wizard-determined {
    display: inline-block;
    padding: 0.45rem 0.65rem;
    border-radius: var(--cwoa-radius-sm);
    border: 1px solid var(--cwoa-border);
    background: color-mix(in srgb, var(--cwoa-accent) 8%, var(--cwoa-card));
    font-size: var(--cwoa-fs-sm);
    line-height: 1.35;
}

#cwoa-app .cwoa-wizard-step-card .cwoa-wizard-pending {
    color: var(--cwoa-muted);
    font-size: var(--cwoa-fs-sm);
}

#cwoa-app .cwoa-wizard-step-card .cwoa-wizard-edit-step {
    margin-left: 4px;
    font-size: var(--cwoa-fs-xs);
    color: var(--cwoa-accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

@media (max-width: 520px) {
    #cwoa-app .cwoa-wizard-steps-row {
        grid-template-columns: 1fr;
    }
}

/*
 * Степ-карты в #cwoa-params-expanded: список открывается абсолютным оверлеем поверх остальных карточек
 * (как обычный кастомный селект), а НЕ в потоке — раскрытие в потоке растягивало всю строку сетки
 * (.cwoa-wizard-steps-row), из-за чего под соседними полями появлялись огромные пустые области.
 * z-index поднят выше соседних степ-карт, чтобы список не перекрывался следующей строкой сетки.
 */
#cwoa-app #cwoa-params-expanded .cwoa-custom-select--step {
    position: relative;
}

#cwoa-app #cwoa-params-expanded .cwoa-custom-select--step.is-open {
    position: relative;
    z-index: 5;
}

#cwoa-app #cwoa-params-expanded .cwoa-custom-select--step .cwoa-custom-select__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
}

/* Поле внизу экрана/перед футером: список открывается вверх (JS добавляет этот класс в openMenu при нехватке места снизу). */
#cwoa-app #cwoa-params-expanded .cwoa-custom-select--step.cwoa-custom-select--flip-up .cwoa-custom-select__menu {
    top: auto;
    bottom: calc(100% + 4px);
}

/* Фолбэк: реальная высота всегда задаётся инлайн-стилем в openMenu() по реально доступному месту на экране. */
#cwoa-app #cwoa-params-expanded .cwoa-custom-select--step .cwoa-custom-select__list {
    max-height: 14rem;
}

/* Нативный <select> остаётся для a11y/значений; виден только кастомный виджет (.cwoa-custom-select после него). */
#cwoa-app select.cwoa-native-select-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(100%) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

#cwoa-app .cwoa-catalog-locale-control {
    position: relative;
    min-width: 0;
    width: 100%;
}

/* Выбор языка данных OEM над поисками: адаптивная подпись + список */
#cwoa-app .cwoa-catalog-locale-toolbar.cwoa-panel {
    margin-bottom: 0;
    padding: clamp(8px, 1vw, 12px) clamp(12px, 2.5vw, 18px);
}

#cwoa-app .cwoa-catalog-locale-toolbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(8px, 1.25vw, 14px) clamp(10px, 1.8vw, 18px);
    min-width: 0;
}

@media (min-width: 900px) {
    #cwoa-app .cwoa-catalog-locale-toolbar__row {
        flex-wrap: nowrap;
    }
}

#cwoa-app .cwoa-catalog-locale-toolbar__hint {
    flex: 1 1 14rem;
    margin: 0;
    padding: 0;
    font-size: clamp(0.75rem, 0.68rem + 0.45vw, 0.875rem);
    color: var(--cwoa-muted);
    line-height: 1.38;
    min-width: 0;
    max-width: 100%;
}

#cwoa-app .cwoa-catalog-locale-toolbar__hint-long {
    display: none;
}

#cwoa-app .cwoa-catalog-locale-toolbar__hint-short {
    display: inline;
}

@media (min-width: 720px) {
    #cwoa-app .cwoa-catalog-locale-toolbar__hint-long {
        display: inline;
    }

    #cwoa-app .cwoa-catalog-locale-toolbar__hint-short {
        display: none;
    }
}

#cwoa-app .cwoa-catalog-locale-toolbar__slot {
    flex: 0 1 auto;
    min-width: min(100%, 9rem);
    max-width: min(13rem, 100%);
    width: auto;
}

#cwoa-app .cwoa-catalog-locale-toolbar__slot .cwoa-catalog-locale-control {
    width: 100%;
}

#cwoa-app .cwoa-catalog-locale-toolbar--dd-open {
    position: relative;
    z-index: 50003;
}

#cwoa-app .cwoa-catalog-locale-toolbar .cwoa-custom-select {
    position: relative;
}

#cwoa-app .cwoa-catalog-locale-toolbar .cwoa-custom-select__trigger {
    width: 100%;
    min-height: var(--cwoa-tile-control-height) !important;
    height: var(--cwoa-tile-control-height);
    padding: var(--cwoa-tile-control-padding) !important;
    border-radius: var(--cwoa-radius-sm);
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 88%, var(--cwoa-accent));
    background: var(--cwoa-card);
    color: var(--cwoa-text);
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    gap: 0.5rem;
    font-family: inherit;
    font-size: var(--cwoa-tile-control-size) !important;
    font-weight: 400;
    line-height: 1.35;
    text-align: left !important;
    cursor: pointer;
}

#cwoa-app .cwoa-catalog-locale-toolbar .cwoa-custom-select__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#cwoa-app .cwoa-catalog-locale-toolbar .cwoa-custom-select__chevron {
    flex: 0 0 auto;
    color: var(--cwoa-accent);
    font-size: 0.85em;
    opacity: 0.85;
}

#cwoa-app .cwoa-catalog-locale-toolbar .cwoa-custom-select.is-open .cwoa-custom-select__trigger,
#cwoa-app .cwoa-catalog-locale-toolbar .cwoa-custom-select__trigger:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--cwoa-accent) 55%, var(--cwoa-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cwoa-accent) 22%, transparent);
}

#cwoa-app .cwoa-catalog-locale-toolbar .cwoa-custom-select__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 35;
    padding: 4px 0;
    background: var(--cwoa-card);
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 88%, var(--cwoa-accent));
    border-radius: var(--cwoa-radius-sm);
    box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--cwoa-text) 35%, transparent);
}

#cwoa-app .cwoa-catalog-locale-toolbar .cwoa-custom-select__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 14rem;
    overflow-y: auto;
    scrollbar-width: none;
}

#cwoa-app .cwoa-catalog-locale-toolbar .cwoa-custom-select__option {
    padding: 0.45rem 0.65rem;
    font-size: var(--cwoa-tile-control-size);
    color: var(--cwoa-text);
    cursor: pointer;
}

#cwoa-app .cwoa-catalog-locale-toolbar .cwoa-custom-select__option:hover,
#cwoa-app .cwoa-catalog-locale-toolbar .cwoa-custom-select__option:focus-visible {
    background: color-mix(in srgb, var(--cwoa-accent) 14%, var(--cwoa-card));
    outline: none;
}

/*
 * VIN / AM: кастомный виджет списка — как у полей ввода той же плитки (рамка, высота, фон карточки).
 * Блок «по параметрам» (.cwoa-params-block) использует правила ниже по файлу.
 */
#cwoa-app #cwoa-search-row .cwoa-search-tile:not(.cwoa-params-block) .cwoa-custom-select__trigger {
    width: 100%;
    min-height: var(--cwoa-tile-control-height) !important;
    height: var(--cwoa-tile-control-height);
    padding: var(--cwoa-tile-control-padding) !important;
    border-radius: var(--cwoa-radius-sm);
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 88%, var(--cwoa-accent));
    background: var(--cwoa-card);
    color: var(--cwoa-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: inherit;
    font-size: var(--cwoa-tile-control-size) !important;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
}

#cwoa-app #cwoa-search-row .cwoa-search-tile:not(.cwoa-params-block) .cwoa-custom-select__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

#cwoa-app #cwoa-search-row .cwoa-search-tile:not(.cwoa-params-block) .cwoa-custom-select__chevron {
    flex: 0 0 auto;
    color: var(--cwoa-accent);
    font-size: 0.85em;
    opacity: 0.85;
}

#cwoa-app #cwoa-search-row .cwoa-search-tile:not(.cwoa-params-block) .cwoa-custom-select.is-open .cwoa-custom-select__trigger,
#cwoa-app #cwoa-search-row .cwoa-search-tile:not(.cwoa-params-block) .cwoa-custom-select__trigger:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--cwoa-accent) 55%, var(--cwoa-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cwoa-accent) 22%, transparent);
}

#cwoa-app #cwoa-search-row .cwoa-search-tile:not(.cwoa-params-block) .cwoa-custom-select__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    padding: 4px 0;
    background: var(--cwoa-card);
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 88%, var(--cwoa-accent));
    border-radius: var(--cwoa-radius-sm);
    box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--cwoa-text) 35%, transparent);
}

#cwoa-app #cwoa-search-row .cwoa-search-tile:not(.cwoa-params-block) .cwoa-custom-select__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 14rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#cwoa-app #cwoa-search-row .cwoa-search-tile:not(.cwoa-params-block) .cwoa-custom-select__list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#cwoa-app #cwoa-search-row .cwoa-search-tile:not(.cwoa-params-block) .cwoa-custom-select__option {
    margin: 0;
    padding: 0.45rem 0.65rem;
    background: transparent;
    font-size: var(--cwoa-tile-control-size);
    line-height: 1.35;
    color: var(--cwoa-text);
    cursor: pointer;
}

#cwoa-app #cwoa-search-row .cwoa-search-tile:not(.cwoa-params-block) .cwoa-custom-select__option:hover,
#cwoa-app #cwoa-search-row .cwoa-search-tile:not(.cwoa-params-block) .cwoa-custom-select__option:focus-visible {
    background: color-mix(in srgb, var(--cwoa-accent) 14%, var(--cwoa-card));
    outline: none;
}

#cwoa-app #cwoa-search-row .cwoa-search-tile:not(.cwoa-params-block) .cwoa-custom-select__option.is-selected {
    background: color-mix(in srgb, var(--cwoa-accent) 14%, var(--cwoa-card));
    font-weight: 600;
}

/* Step rows: label | control — minimal vertical rhythm */
#cwoa-app .cwoa-params-block .cwoa-wizard-table {
    border-collapse: collapse;
    width: 100%;
    display: block;
}

#cwoa-app .cwoa-params-block .cwoa-wizard-table tbody {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#cwoa-app .cwoa-params-block .cwoa-wizard-table tr {
    display: grid;
    grid-template-columns: minmax(3.25rem, 34%) minmax(0, 1fr);
    gap: 6px 8px;
    align-items: center;
}

#cwoa-app .cwoa-params-block .cwoa-wizard-th {
    padding: 0;
    font-size: var(--cwoa-fs-xs);
    font-weight: 600;
    text-align: left;
    white-space: normal;
    line-height: 1.2;
    vertical-align: middle;
}

#cwoa-app .cwoa-params-block .cwoa-wizard-td {
    position: relative;
    padding: 0;
    vertical-align: middle;
}

#cwoa-app .cwoa-params-block .cwoa-wizard-select,
#cwoa-app .cwoa-params-block .cwoa-wizard-catalog-select.cwoa-field {
    min-height: 2rem;
    padding: 0.45rem 0.65rem;
    font-size: var(--cwoa-fs-sm);
    line-height: 1.35;
}

#cwoa-app .cwoa-params-block .cwoa-search-tile__title {
    font-size: 1rem;
}

#cwoa-app .cwoa-params-block .cwoa-search-tile__lead {
    margin-top: 1px;
}

#cwoa-app #cwoa-search-row .cwoa-search-tile__title {
    font-size: var(--cwoa-tile-title-size);
    line-height: 1.2;
}

#cwoa-app .cwoa-am-standalone-dock-body {
    padding: 4px 16px 16px;
}

/* «Открыт каталог для…» — read-only карточка над деревом при переходе из «Мой гараж»
 * без подтверждения (см. showOpenedVehicleInCandidateDock). Узкая колонка label
 * (в отличие от обычной таблицы кандидата с несколькими колонками параметров). */
#cwoa-app .cwoa-opened-vehicle-dock-table-wrap {
    padding: 0 16px 16px;
}

#cwoa-app .cwoa-opened-vehicle-dock-table {
    table-layout: auto;
}

#cwoa-app .cwoa-opened-vehicle-dock-table th {
    width: 1%;
    white-space: nowrap;
    font-weight: 500;
    color: var(--cwoa-muted);
}

#cwoa-app .cwoa-opened-vehicle-dock-table td {
    max-width: none;
}

/* AI catalog assistant — search-strip teaser + inline workspace below panels */
#cwoa-app #cwoa-search-row > .cwoa-search-col--ai > * {
    width: 100%;
}

#cwoa-app .cwoa-ai-assistant-teaser {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
}

#cwoa-app .cwoa-ai-assistant-teaser__copy {
    margin: 0;
    font-size: var(--cwoa-fs-sm);
    line-height: 1.42;
    color: var(--cwoa-muted);
}

#cwoa-app .cwoa-ai-assistant-teaser--session .cwoa-ai-assistant-teaser__copy {
    color: var(--cwoa-text);
}

#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-inline-workspace {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
    /* Зазор сверху/снизу — только gap у .cwoa-portal-main (--cwoa-portal-stack-gap), без двойного margin. */
    margin-top: 0;
    padding: clamp(0.7rem, 1.3vw, 1.05rem);
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 86%, var(--cwoa-accent));
    border-radius: calc(var(--cwoa-radius-lg) + 4px);
    background: color-mix(in srgb, var(--cwoa-card) 96%, white);
    box-shadow: 0 12px 36px -24px color-mix(in srgb, currentColor 24%, transparent);
    overflow: visible;
    transform-origin: top center;
    transition:
        opacity var(--cwoa-reveal-duration) var(--cwoa-motion-ease),
        transform var(--cwoa-reveal-duration) var(--cwoa-motion-ease);
}

#cwoa-app #cwoa-ai-inline-workspace:not([hidden]):not(.cwoa-panel--hidden) {
    display: block;
}

#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-inline-workspace--dd-open {
    position: relative;
    z-index: 55;
    overflow: visible;
}

#cwoa-app #cwoa-ai-inline-workspace #cwoa-ai-search-block.cwoa-ai-assistant--inline {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-assistant__head {
    min-height: 0;
    padding-bottom: 2px;
}

#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-assistant__body,
#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-orchestrator-form,
#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-assistant__composer {
    overflow: visible;
}

#cwoa-app #cwoa-ai-inline-workspace:not(.cwoa-ai-active) .cwoa-ai-assistant--active-thread .cwoa-ai-chat-thread,
#cwoa-app #cwoa-ai-inline-workspace:not(.cwoa-ai-active) .cwoa-ai-assistant--has-thread .cwoa-ai-chat-thread {
    flex: 0 1 auto;
    min-height: 3.5rem;
    max-height: min(28vh, 280px);
    margin: 0;
    padding: 2px 0 6px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: auto;
    background: transparent;
    border-bottom: 1px solid var(--cwoa-border-inner);
}

#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-active,
#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-inline-workspace--conversation-active {
    min-height: clamp(18rem, 38vh, 26rem);
    transition:
        min-height var(--cwoa-reveal-duration) var(--cwoa-motion-ease),
        opacity var(--cwoa-reveal-duration) var(--cwoa-motion-ease);
}

#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-active #cwoa-ai-search-block.cwoa-ai-assistant--active-thread,
#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-inline-workspace--conversation-active #cwoa-ai-search-block.cwoa-ai-assistant--active-thread {
    min-height: clamp(14rem, 32vh, 22rem);
}

#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-active .cwoa-ai-assistant--active-thread .oem-ai-workspace__main,
#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-inline-workspace--conversation-active .cwoa-ai-assistant--active-thread .oem-ai-workspace__main {
    flex: 1 1 auto;
    min-height: min(22vh, 220px);
}

#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-active .cwoa-ai-assistant--active-thread .oem-ai-workspace__thread,
#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-inline-workspace--conversation-active .cwoa-ai-assistant--active-thread .oem-ai-workspace__thread {
    flex: 1 1 auto;
    min-height: min(20vh, 200px);
    max-height: min(36vh, 360px);
}

#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-active .cwoa-ai-assistant--active-thread .cwoa-ai-chat-thread,
#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-inline-workspace--conversation-active .cwoa-ai-assistant--active-thread .cwoa-ai-chat-thread {
    flex: 1 1 auto;
    height: min(28vh, 280px);
    min-height: min(22vh, 220px);
    max-height: min(28vh, 280px);
}

#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-active .cwoa-ai-msg--runtime-error .cwoa-ai-msg__bubble,
#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-active .cwoa-ai-msg--conversational-fallback .cwoa-ai-msg__bubble,
#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-active .cwoa-ai-msg--runtime-error .cwoa-ai-message-content,
#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-active .cwoa-ai-msg--conversational-fallback .cwoa-ai-message-content,
#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-active .cwoa-ai-msg--loading-retry .cwoa-ai-msg__bubble,
#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-active .cwoa-ai-msg--loading-retry .cwoa-ai-message-content {
    min-height: 3.25rem;
}

#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-active .cwoa-ai-msg--runtime-error .cwoa-ai-msg__bubble,
#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-active .cwoa-ai-msg--conversational-fallback .cwoa-ai-msg__bubble,
#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-active .cwoa-ai-msg--loading-retry .cwoa-ai-msg__bubble {
    display: block;
    width: auto;
    max-width: 92%;
}

#cwoa-app #cwoa-ai-inline-workspace #oem-ai-onboarding.oem-ai-onboarding--retired {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
        opacity 0.28s var(--cwoa-motion-ease),
        max-height 0.28s var(--cwoa-motion-ease),
        margin 0.28s var(--cwoa-motion-ease),
        padding 0.28s var(--cwoa-motion-ease);
}

#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-msg--runtime-error .cwoa-ai-msg__notice {
    margin: 0;
}

/* Conversational fallback — full assistant bubble, no alert chrome */
#cwoa-app .cwoa-ai-msg--conversational-fallback .cwoa-ai-msg__bubble,
#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-msg--conversational-fallback .cwoa-ai-msg__bubble,
#cwoa-app .oem-ai-workspace .cwoa-ai-msg--conversational-fallback .cwoa-ai-msg__bubble {
    max-width: 88%;
    padding: 9px 12px;
    border-radius: var(--cwoa-radius);
    background: var(--cwoa-card);
    border: 1px solid var(--cwoa-border);
    color: var(--cwoa-text);
    box-shadow: none;
}

#cwoa-app .oem-ai-workspace .cwoa-ai-msg--conversational-fallback .cwoa-ai-msg__bubble {
    max-width: 78%;
    padding: 9px 12px;
    border-radius: var(--cwoa-radius-lg);
    background: color-mix(in srgb, var(--cwoa-surface) 65%, var(--cwoa-card));
    border: 1px solid var(--cwoa-border-inner);
}

#cwoa-app .cwoa-ai-msg--conversational-fallback .cwoa-ai-msg__notice,
#cwoa-app .cwoa-ai-msg--conversational-fallback .cwoa-ai-msg__actions,
#cwoa-app .cwoa-ai-msg--conversational-fallback .cwoa-ai-msg__retry {
    display: none !important;
}

#cwoa-app .cwoa-ai-msg--conversational-fallback .cwoa-ai-message-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 3.5rem;
}

#cwoa-app .cwoa-ai-msg--conversational-fallback .cwoa-ai-msg__text--helper {
    margin: 0;
    font-size: var(--cwoa-fs-sm);
    line-height: 1.42;
    color: var(--cwoa-text);
}

#cwoa-app .cwoa-ai-msg--conversational-fallback .cwoa-ai-msg__fallback-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
}

#cwoa-app .cwoa-ai-msg--conversational-fallback .cwoa-ai-chip--fallback {
    cursor: pointer;
}

#cwoa-app .cwoa-ai-msg--conversational-fallback .cwoa-ai-chip--fallback:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

#cwoa-app .cwoa-ai-msg--conversational-fallback.cwoa-ai-msg--loading-retry .cwoa-ai-msg__fallback-actions {
    display: none;
}

#cwoa-app #cwoa-ai-inline-workspace.cwoa-await-reveal:not(.cwoa-motion-in) {
    opacity: 0 !important;
    transform: translate3d(0, 10px, 0);
    pointer-events: none;
}

#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-msg.cwoa-await-reveal {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    pointer-events: none;
}

#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-msg.cwoa-motion-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
        opacity var(--cwoa-reveal-duration) var(--cwoa-motion-ease),
        transform var(--cwoa-reveal-duration) var(--cwoa-motion-ease);
}

#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-msg__actions {
    margin-top: 0.45rem;
}

#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-msg__retry {
    font-size: var(--cwoa-fs-xs);
}

#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-msg__bubble {
    max-width: 92%;
    padding: 5px 8px;
    font-size: var(--cwoa-fs-xs);
    line-height: 1.38;
}

#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-msg__bubble,
#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-chip-grid,
#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-stage__choices {
    overflow: visible;
}

#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-assistant--active-thread .cwoa-ai-msg--welcome {
    display: none !important;
}

#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-assistant--active-thread .cwoa-ai-stage__examples,
#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-assistant--active-thread .cwoa-ai-example-bubble,
#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-assistant--active-thread .cwoa-ai-example-bubble__kicker {
    display: none !important;
}

#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-assistant__composer {
    flex: 0 0 auto;
    padding: 4px 0 0;
    border-top: 1px solid var(--cwoa-border-inner);
}

#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-input-row {
    align-items: flex-end;
}

#cwoa-app #cwoa-search-row .cwoa-search-col--ai .cwoa-ai-assistant-teaser {
    width: 100%;
}

#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-recent-anchor,
#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-recent-control,
#cwoa-app #cwoa-ai-inline-workspace .cwoa-custom-select__menu {
    overflow: visible;
    contain: none;
}

#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-recent-control.is-open {
    z-index: 60;
}

#cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-recent-control.is-open .cwoa-custom-select__menu {
    z-index: 65;
}

/* Production assistant mode: thread-first layout; onboarding DOM kept, visually hidden */
#cwoa-app .cwoa-ai-assistant--active-thread .cwoa-ai-msg--welcome {
    display: none !important;
}

#cwoa-app .cwoa-ai-assistant--active-thread .cwoa-ai-stage__examples,
#cwoa-app .cwoa-ai-assistant--active-thread .cwoa-ai-example-bubble,
#cwoa-app .cwoa-ai-assistant--active-thread .cwoa-ai-example-bubble__kicker {
    display: none !important;
}

#cwoa-app .cwoa-ai-assistant--active-thread .cwoa-ai-chat-thread {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

#cwoa-app .cwoa-ai-assistant--active-thread .cwoa-ai-assistant__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#cwoa-app .cwoa-ai-assistant--active-thread .cwoa-ai-assistant__composer {
    flex: 0 0 auto;
    border-top: 1px solid var(--cwoa-border-inner);
    background: var(--cwoa-card);
}

#cwoa-app .cwoa-ai-assistant--active-thread.cwoa-ai-assistant--idle .cwoa-ai-assistant__composer {
    border-top: 1px solid color-mix(in srgb, var(--cwoa-border) 82%, transparent);
    background: var(--cwoa-card, #fff);
}

#cwoa-app .cwoa-ai-assistant--stage-empty .cwoa-ai-assistant__head,
#cwoa-app .cwoa-ai-assistant--stage-narrowing .cwoa-ai-assistant__head,
#cwoa-app .cwoa-ai-assistant--stage-resolved .cwoa-ai-assistant__head,
#cwoa-app .cwoa-ai-assistant--stage-handoff .cwoa-ai-assistant__head,
#cwoa-app .cwoa-ai-assistant--stage-confirm .cwoa-ai-assistant__head {
    padding: 10px 12px 6px;
    border-bottom: 0;
}

#cwoa-app .cwoa-ai-assistant--has-thread .cwoa-ai-chat-thread {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

#cwoa-app .cwoa-ai-assistant--has-thread .cwoa-ai-assistant__body {
    flex: 1 1 auto;
    min-height: 0;
}

#cwoa-app .cwoa-ai-msg {
    display: flex;
    width: 100%;
    max-width: 100%;
}

#cwoa-app .cwoa-ai-msg--user {
    justify-content: flex-end;
}

#cwoa-app .cwoa-ai-msg--assistant {
    justify-content: flex-start;
}

#cwoa-app .cwoa-ai-msg__bubble {
    max-width: 88%;
    padding: 7px 9px;
    border-radius: var(--cwoa-radius);
    font-size: var(--cwoa-fs-sm);
    line-height: 1.42;
    word-break: break-word;
    box-shadow: var(--cwoa-shadow-sm);
}

#cwoa-app .cwoa-ai-msg--user .cwoa-ai-msg__bubble {
    background: color-mix(in srgb, var(--cwoa-accent) 12%, var(--cwoa-card));
    border: 1px solid color-mix(in srgb, var(--cwoa-accent) 20%, var(--cwoa-border));
    color: var(--cwoa-text);
}

#cwoa-app .cwoa-ai-msg--assistant .cwoa-ai-msg__bubble {
    background: var(--cwoa-card);
    border: 1px solid var(--cwoa-border);
    color: var(--cwoa-text);
    box-shadow: none;
}

#cwoa-app .cwoa-ai-msg--welcome .cwoa-ai-msg__bubble {
    background: transparent;
    border: 0;
    padding: 4px 2px 2px;
}

#cwoa-app .cwoa-ai-msg--loading .cwoa-ai-msg__bubble {
    opacity: 0.85;
}

#cwoa-app .cwoa-ai-msg--settled .cwoa-ai-msg__bubble {
    opacity: 0.72;
}

#cwoa-app .cwoa-ai-msg__text {
    margin: 0;
}

#cwoa-app .cwoa-ai-msg__text--loading {
    color: var(--cwoa-muted, #667085);
}

#cwoa-app .cwoa-ai-msg__kicker {
    margin: 0 0 4px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cwoa-muted, #667085);
}

#cwoa-app .cwoa-ai-msg__memory {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--cwoa-surface, #f9fafb) 88%, var(--cwoa-card));
    border: 1px solid color-mix(in srgb, var(--cwoa-border, #e4e7ec) 90%, transparent);
}

#cwoa-app .cwoa-ai-msg__memory-text {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--cwoa-muted, #667085);
}

#cwoa-app .cwoa-ai-msg__hint {
    margin: 6px 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--cwoa-muted, #667085);
}

#cwoa-app .cwoa-ai-msg__progress {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--cwoa-surface, #f9fafb) 90%, var(--cwoa-card));
    border: 1px solid color-mix(in srgb, var(--cwoa-border, #e4e7ec) 88%, transparent);
}

#cwoa-app .cwoa-ai-msg__progress-title {
    margin: 0 0 4px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cwoa-muted, #667085);
}

#cwoa-app .cwoa-ai-msg__progress-list {
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
}

#cwoa-app .cwoa-ai-msg__progress-item {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--cwoa-body, #101828);
}

#cwoa-app .cwoa-ai-msg__progress-item--done {
    color: color-mix(in srgb, var(--cwoa-body, #101828) 78%, #12b76a);
}

#cwoa-app .cwoa-ai-msg__progress-reliability {
    margin: 4px 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--cwoa-muted, #667085);
}

#cwoa-app .cwoa-ai-msg__progress-reliability-k {
    font-weight: 600;
}

#cwoa-app .cwoa-ai-msg__notice {
    margin: 0;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 0.74rem;
    line-height: 1.4;
    color: color-mix(in srgb, #b42318 88%, var(--cwoa-body));
    background: color-mix(in srgb, #fef3f2 70%, var(--cwoa-card));
    border: 1px solid color-mix(in srgb, #fecdca 80%, var(--cwoa-border));
}

#cwoa-app .cwoa-ai-msg__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
}

#cwoa-app .cwoa-ai-vehicle-understanding {
    margin: 0 0 10px;
    padding: 10px 10px 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cwoa-card, #fff) 92%, var(--cwoa-accent, #2563eb) 8%);
    border: 1px solid color-mix(in srgb, var(--cwoa-border, #e4e7ec) 86%, transparent);
}

#cwoa-app .cwoa-ai-vehicle-understanding__header {
    margin: 0 0 6px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cwoa-body, #101828);
}

#cwoa-app .cwoa-ai-vehicle-understanding__progress {
    margin: 0 0 6px;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--cwoa-muted, #667085);
    font-variant-numeric: tabular-nums;
}

#cwoa-app .cwoa-ai-vehicle-understanding__rationale {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--cwoa-muted, #6b7280);
    font-style: italic;
}

#cwoa-app .cwoa-ai-vehicle-understanding__next {
    margin: 0 0 6px;
    font-size: 0.76rem;
    line-height: 1.4;
    color: color-mix(in srgb, var(--cwoa-body, #101828) 88%, var(--cwoa-accent, #2563eb));
}

#cwoa-app .cwoa-ai-vehicle-understanding__details {
    margin: 4px 0 0;
}

#cwoa-app .cwoa-ai-vehicle-understanding__summary-toggle {
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--cwoa-muted, #667085);
    list-style: none;
}

#cwoa-app .cwoa-ai-vehicle-understanding__summary-toggle::-webkit-details-marker {
    display: none;
}

#cwoa-app .cwoa-ai-vehicle-understanding__list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

#cwoa-app .cwoa-ai-vehicle-understanding__item {
    margin: 0 0 4px;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--cwoa-body, #101828);
}

#cwoa-app .cwoa-ai-vehicle-understanding__icon {
    display: inline-block;
    width: 1.1em;
    text-align: center;
    font-weight: 700;
}

#cwoa-app .cwoa-ai-vehicle-understanding__item--skipped .cwoa-ai-vehicle-understanding__value,
#cwoa-app .cwoa-ai-vehicle-understanding__item--unknown .cwoa-ai-vehicle-understanding__value {
    color: var(--cwoa-muted, #667085);
}

#cwoa-app .cwoa-ai-msg__bubble:has([data-cwoa-ai-scrollable-choices]) {
    overflow: hidden;
}

#cwoa-app .cwoa-ai-msg__choices-panel {
    margin-top: 8px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

#cwoa-app .cwoa-clarification-scroll,
#cwoa-app .cwoa-ai-msg__choices-scroll-body.cwoa-clarification-scroll {
    max-height: 220px;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

#cwoa-app .cwoa-ai-msg__chips--scrollable,
#cwoa-app .cwoa-clarification-scroll .cwoa-ai-msg__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5px;
    margin-top: 0;
    max-width: 100%;
}

#cwoa-app .cwoa-ai-msg__choices-scroll-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    margin-top: 0;
    padding: 8px 4px 4px;
    border-top: 1px solid color-mix(in srgb, var(--cwoa-border, #e4e7ec) 88%, transparent);
    background: var(--cwoa-card, #fff);
    position: sticky;
    bottom: 0;
    z-index: 2;
}

#cwoa-app .cwoa-ai-chip--unknown {
    font-weight: 600;
}

#cwoa-app .cwoa-ai-msg .cwoa-ai-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

#cwoa-app .cwoa-ai-msg .cwoa-ai-confirm-card {
    margin-top: 8px;
}

#cwoa-app.cwoa-ai-handoff-active #cwoa-ai-inline-workspace {
    opacity: 1;
}

#cwoa-app .cwoa-ai-stage__kicker {
    margin: 0 0 4px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cwoa-muted, #667085);
}

#cwoa-app .cwoa-ai-stage__prompt--handoff {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--cwoa-muted, #667085);
}

#cwoa-app .cwoa-ai-assistant--navigation .cwoa-ai-assistant__subtitle {
    color: var(--cwoa-muted, #667085);
}


#cwoa-app .cwoa-ai-stage__prompt {
    margin: 0 0 8px;
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 500;
    color: var(--cwoa-body, #1a1a1a);
}

#cwoa-app .cwoa-ai-stage__prompt-sub {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--cwoa-muted, #667085);
}

#cwoa-app .cwoa-ai-stage__prompt--muted {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--cwoa-muted, #667085);
}

#cwoa-app .cwoa-ai-stage__pick {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: right;
    color: color-mix(in srgb, var(--cwoa-accent, #4f6ef7) 88%, var(--cwoa-body));
}

#cwoa-app .cwoa-ai-stage__section {
    margin-top: 10px;
}

#cwoa-app .cwoa-ai-stage__label {
    margin: 0 0 6px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--cwoa-muted, #667085);
}

#cwoa-app .cwoa-ai-stage__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

#cwoa-app .cwoa-ai-stage__examples {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
    max-width: 100%;
}

#cwoa-app .cwoa-ai-example-bubble {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    max-width: 100%;
}

#cwoa-app .cwoa-ai-example-bubble__kicker {
    margin: 0;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--cwoa-muted, #667085) 92%, transparent);
}

#cwoa-app .cwoa-ai-example-bubble__text {
    margin: 0;
    padding: 5px 9px;
    max-width: 100%;
    border-radius: 10px 10px 10px 3px;
    background: color-mix(in srgb, var(--cwoa-border, #e4e7ec) 42%, var(--cwoa-card, #fff));
    font-size: 0.7rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    text-align: left;
    color: color-mix(in srgb, var(--cwoa-muted, #667085) 88%, var(--cwoa-body, #1a1a1a));
    cursor: default;
    user-select: text;
}

#cwoa-app .cwoa-ai-stage--confirm .cwoa-ai-stage__prompt {
    margin-bottom: 6px;
}

#cwoa-app .cwoa-ai-confirm-card {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 85%, transparent);
    background: color-mix(in srgb, var(--cwoa-card, #fff) 94%, var(--cwoa-border));
}

#cwoa-app .cwoa-ai-confirm-card__title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cwoa-body, #1a1a1a);
}

#cwoa-app .cwoa-ai-confirm-card__meta {
    margin: 2px 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--cwoa-muted, #667085);
}

#cwoa-app .cwoa-ai-confirm-notice {
    margin: 0 0 8px;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--cwoa-muted, #667085);
}

#cwoa-app .cwoa-ai-confirm-notice--warn {
    color: color-mix(in srgb, #b54708 88%, var(--cwoa-body));
}

#cwoa-app .cwoa-ai-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

#cwoa-app .cwoa-ai-confirm-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--cwoa-accent, #4f6ef7) 35%, var(--cwoa-border));
    background: var(--cwoa-accent, #4f6ef7);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    cursor: pointer;
}

#cwoa-app .cwoa-ai-confirm-btn:hover {
    filter: brightness(1.05);
}

#cwoa-app .cwoa-ai-confirm-btn--ghost {
    background: transparent;
    color: var(--cwoa-muted, #667085);
    border-color: color-mix(in srgb, var(--cwoa-border) 90%, transparent);
}

#cwoa-app .cwoa-ai-confirm-btn--ghost:hover {
    color: var(--cwoa-body, #1a1a1a);
    filter: none;
}

#cwoa-app .cwoa-ai-confirm-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--cwoa-accent, #4f6ef7) 28%, var(--cwoa-border));
    background: transparent;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cwoa-accent, #4f6ef7);
    text-decoration: none;
    cursor: pointer;
}

#cwoa-app .cwoa-ai-confirm-cta:hover {
    background: color-mix(in srgb, var(--cwoa-accent, #4f6ef7) 8%, transparent);
}

#cwoa-app .cwoa-ai-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 80%, var(--cwoa-accent));
    background: color-mix(in srgb, var(--cwoa-card, #fff) 88%, var(--cwoa-accent));
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.25;
    color: color-mix(in srgb, var(--cwoa-text, #111) 82%, transparent);
    cursor: pointer;
}

#cwoa-app .cwoa-ai-chip:hover {
    border-color: color-mix(in srgb, var(--cwoa-accent, #4f6ef7) 40%, var(--cwoa-border));
    color: var(--cwoa-accent, #4f6ef7);
}


#cwoa-app .cwoa-ai-stage__notice {
    margin: 0;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 0.74rem;
    line-height: 1.4;
    color: color-mix(in srgb, #b42318 88%, var(--cwoa-body));
    background: color-mix(in srgb, #fef3f2 70%, var(--cwoa-card));
    border: 1px solid color-mix(in srgb, #fecdca 80%, var(--cwoa-border));
}

#cwoa-app .cwoa-ai-stage__link {
    display: inline-flex;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--cwoa-accent, #4f6ef7);
    cursor: pointer;
}

#cwoa-app .cwoa-ai-assistant--stage-empty .cwoa-ai-assistant__composer,
#cwoa-app .cwoa-ai-assistant--stage-narrowing .cwoa-ai-assistant__composer,
#cwoa-app .cwoa-ai-assistant--stage-confirm .cwoa-ai-assistant__composer {
    border-top: 0;
    padding-top: 4px;
}

#cwoa-app .cwoa-ai-assistant__head {
    flex: 0 0 auto;
    padding: 12px 14px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--cwoa-border) 82%, transparent);
}

#cwoa-app .cwoa-ai-assistant--idle .cwoa-ai-assistant__head {
    padding: 10px 12px 6px;
    border-bottom: 0;
}

#cwoa-app .cwoa-ai-assistant__title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--cwoa-body, #1a1a1a);
}

#cwoa-app .cwoa-ai-assistant__subtitle {
    margin: 2px 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--cwoa-muted, #667085);
}

#cwoa-app .cwoa-ai-assistant__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

#cwoa-app .cwoa-ai-chat-thread,

#cwoa-app .cwoa-ai-assistant--idle .cwoa-ai-assistant__body {
    flex: 0 1 auto;
}

#cwoa-app .cwoa-ai-assistant--idle .cwoa-ai-chat-thread {
    flex: 0 1 auto;
    min-height: 0;
    overflow: visible;
    padding: 6px 12px 4px;
    gap: 6px;
    background: transparent;
}


#cwoa-app .cwoa-ai-assistant__loading {
    margin: 0;
    padding: 0 12px 6px;
    font-size: 0.72rem;
    color: var(--cwoa-muted, #667085);
}


#cwoa-app .cwoa-ai-assistant__composer {
    --cwoa-ai-composer-gap: 0.5rem;
    --cwoa-ai-composer-control-h: 2.5rem;
    flex: 0 0 auto;
    position: relative;
    z-index: 20;
    padding: 8px 10px 14px;
    border-top: 1px solid color-mix(in srgb, var(--cwoa-border) 82%, transparent);
    background: var(--cwoa-card, #fff);
    overflow: visible;
    contain: none;
}

#cwoa-app #cwoa-search-row .cwoa-search-col--ai .cwoa-ai-orchestrator-form,
#cwoa-app #cwoa-search-row .cwoa-search-col--ai .cwoa-ai-recent-anchor,
#cwoa-app #cwoa-search-row .cwoa-search-col--ai .cwoa-ai-recent-control {
    overflow: visible;
    contain: none;
}

#cwoa-app .cwoa-ai-orchestrator-form {
    display: block;
    width: 100%;
}

#cwoa-app .cwoa-ai-assistant--idle .cwoa-ai-assistant__composer {
    padding: 6px 10px 14px;
    border-top: 0;
    background: transparent;
}


#cwoa-app .cwoa-ai-assistant--idle #cwoa-ai-query.cwoa-ai-input {
    min-height: var(--cwoa-ai-composer-control-h, 2.5rem);
    padding: 8px 12px;
    font-size: 0.82rem;
    border-color: color-mix(in srgb, var(--cwoa-accent, #4f6ef7) 18%, var(--cwoa-border));
    background: var(--cwoa-card, #fff);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cwoa-accent, #4f6ef7) 6%, transparent);
}


#cwoa-app .cwoa-ai-input-row {
    display: flex;
    align-items: center;
    gap: var(--cwoa-ai-composer-gap, 0.5rem);
}

#cwoa-app .cwoa-ai-input-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

#cwoa-app #cwoa-search-row > .cwoa-search-col--ai.cwoa-has-open-dd,
#cwoa-app #cwoa-search-row > .cwoa-search-col--vin.cwoa-has-open-dd,
#cwoa-app #cwoa-search-row > .cwoa-search-col--params.cwoa-has-open-dd {
    position: relative;
    z-index: 60;
}

#cwoa-app #cwoa-search-row > .cwoa-search-col--params.cwoa-has-open-dd {
    isolation: auto;
}

#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-inline-workspace--dd-open #cwoa-ai-search-block,
#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-inline-workspace--dd-open .cwoa-ai-assistant__body,
#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-inline-workspace--dd-open .cwoa-ai-orchestrator-form,
#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-inline-workspace--dd-open .cwoa-ai-assistant__composer,
#cwoa-app #cwoa-search-row .cwoa-search-col--ai.cwoa-has-open-dd .cwoa-ai-assistant,
#cwoa-app #cwoa-search-row .cwoa-search-col--ai.cwoa-has-open-dd .cwoa-ai-assistant__body,
#cwoa-app #cwoa-search-row .cwoa-search-col--ai.cwoa-has-open-dd .cwoa-ai-orchestrator-form,
#cwoa-app #cwoa-search-row .cwoa-search-col--ai.cwoa-has-open-dd .cwoa-ai-assistant__composer,
#cwoa-app #cwoa-search-row .cwoa-search-col--vin.cwoa-has-open-dd .cwoa-vin-block,
#cwoa-app #cwoa-search-row .cwoa-search-col--vin.cwoa-has-open-dd .cwoa-search-tile__main,
#cwoa-app #cwoa-search-row .cwoa-search-col--params.cwoa-has-open-dd .cwoa-params-block,
#cwoa-app #cwoa-search-row .cwoa-search-col--params.cwoa-has-open-dd .cwoa-params-block__scroll,
#cwoa-app #cwoa-search-row .cwoa-search-col--params.cwoa-has-open-dd .cwoa-params-recent-anchor,
#cwoa-app #cwoa-search-row .cwoa-search-col--am-oem.cwoa-has-open-dd .cwoa-am-oem-search,
#cwoa-app #cwoa-search-row .cwoa-search-col--am-oem.cwoa-has-open-dd .cwoa-search-tile__main {
    overflow: visible;
}

#cwoa-app .cwoa-ai-assistant__composer {
    --cwoa-params-select-surface: color-mix(in srgb, var(--cwoa-card) 94%, white);
}

#cwoa-app .cwoa-ai-recent-anchor,
#cwoa-app .cwoa-vin-recent-anchor,
#cwoa-app .cwoa-params-recent-anchor,
#cwoa-app .cwoa-am-recent-anchor {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: visible;
}

/* Единое правило для VIN/Параметров/AM: якорь «Недавние» — последний flex-ребёнок внутри .cwoa-search-tile__main
 * и прижат к низу через margin-top: auto — тот же приём, что и у footer (.cwoa-search-tile__footer).
 * Благодаря этому положение ссылки больше не зависит от высоты контента выше (число
 * строк в lead-тексте, высота асинхронно загруженного визарда) — она всегда стоит на одной
 * высоте прямо над кнопкой «Поиск» во всех трёх тайлах. */
#cwoa-app .cwoa-vin-recent-anchor,
#cwoa-app .cwoa-params-recent-anchor,
#cwoa-app .cwoa-am-recent-anchor {
    margin-top: auto;
    margin-bottom: 0;
}

#cwoa-app .cwoa-ai-recent-control,
#cwoa-app .cwoa-params-recent-control,
#cwoa-app .cwoa-vin-recent-control,
#cwoa-app .cwoa-am-recent-control,
.cwoa-params-recent-control {
    /* display:flex (вместо block) убирает «strut» — без этого блоковый контейнер со своим
     * line-height:24px резервировал место над inline-flex кнопкой из-за baseline-выравнивания,
     * давая видимый зазор даже при margin:0. Флекс-контейнер не создаёт такой strut,
     * кнопка садится вплотную к верху, как у «Карта» у Поставщиков. */
    position: relative;
    display: flex;
    align-items: flex-start;
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    overflow: visible;
}

#cwoa-app .cwoa-ai-recent-control.is-open,
#cwoa-app .cwoa-params-recent-control.is-open,
#cwoa-app .cwoa-vin-recent-control.is-open,
#cwoa-app .cwoa-am-recent-control.is-open {
    z-index: 25;
}

/* .cwoa-*-recent-control выше получают display:flex через селектор с большей специфичностью (#cwoa-app + класс),
 * чем у браузерного [hidden] { display: none } — без этого явного перебивания атрибут
 * hidden на этих блоках ничего бы не делал — пустой список «Недавние» всегда показывался бы
 * (хотя бы на долю секунды до refresh()) даже без реальных записей. */
#cwoa-app .cwoa-ai-recent-control[hidden],
#cwoa-app .cwoa-params-recent-control[hidden],
#cwoa-app .cwoa-vin-recent-control[hidden],
#cwoa-app .cwoa-am-recent-control[hidden] {
    display: none !important;
}

#cwoa-app #cwoa-search-row .cwoa-search-col--ai .cwoa-ai-recent-control.is-open {
    z-index: 40;
}

/* Recent triggers — отдельно от .cwoa-search-tile__clear (иначе display:none !important). */
#cwoa-app #cwoa-search-row .cwoa-recent-control:not([hidden]) .cwoa-recent-trigger,
#cwoa-app #cwoa-search-row .cwoa-recent-trigger.cwoa-recent-trigger--visible {
    display: inline-flex !important;
    align-items: center;
    gap: 0.2rem;
    align-self: flex-start;
    margin: 0;
    padding: 0 2px 0.1rem;
    border: 0;
    background: transparent;
    color: var(--cwoa-accent);
    font-size: var(--cwoa-fs-xs);
    font-weight: 400;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 0.12em;
    cursor: pointer;
}

#cwoa-app #cwoa-search-row .cwoa-recent-control:not([hidden]) .cwoa-recent-trigger:hover,
#cwoa-app #cwoa-search-row .cwoa-recent-control:not([hidden]) .cwoa-recent-trigger:focus-visible {
    color: color-mix(in srgb, var(--cwoa-accent) 85%, var(--cwoa-text));
}

/* Старый точечный margin-top на каждом триггере был подобран под старую разметку (ссылка внутри самого поля).
 * Теперь выравнивание делается на уровне якоря (.cwoa-vin-recent-anchor и т.д. выше — margin-top: auto,
 * прижатие ко дну карточки), поэтому точечные пиксельные сдвиги на триггере больше не нужны —
 * убраны (были только у VIN/Params, у AM их и не было — ещё одна причина рассогмещения на проде). */

/* Строка «сохранённый адрес + Карта» в тайле «Где купить». Вынесена ПОСЛЕ поля поиска (не внутри .cwoa-search-tile__main), чтобы не сдвигать
   поле «Номер детали» вниз относительно полей ввода соседних тайлов (VIN / Марка / Номер ОЕМ) —
   все четыре тайла имеют одинаковую высоту шапки (min-height:64px у .cwoa-search-tile__head),
   поэтому поле ввода выравнивается автоматически, только когда перед ним ничего лишнего не вставлено. */
#cwoa-app .cwoa-suppliers-loc-label {
    margin: 6px 0 0;
    font-size: var(--cwoa-fs-xs);
    font-weight: 600;
    line-height: 1.2;
    color: var(--cwoa-text);
}

#cwoa-app .cwoa-suppliers-loc-label + .cwoa-suppliers-loc-caption {
    margin-top: -4px;
}

#cwoa-app .cwoa-suppliers-loc-caption {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 6px 0 0;
    min-width: 0;
}

#cwoa-app .cwoa-suppliers-loc-caption__text {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: var(--cwoa-fs-xs);
    color: var(--cwoa-text-muted, #667085) !important;
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
    height: auto !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#cwoa-app button.cwoa-suppliers-loc-caption__trigger {
    display: inline;
    flex: 0 0 auto;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    font-size: var(--cwoa-fs-xs) !important;
    line-height: normal !important;
    font-weight: 600;
    color: var(--cwoa-link, #2271b1);
    text-decoration: underline;
    cursor: pointer;
}

#cwoa-app .cwoa-ai-recent-trigger__chevron,
.cwoa-params-recent-trigger__chevron,
.cwoa-vin-recent-trigger__chevron,
.cwoa-am-recent-trigger__chevron {
    display: inline-block;
    font-size: 0.85em;
    color: var(--cwoa-accent);
    text-decoration: none;
    line-height: 1;
}

#cwoa-app .cwoa-ai-recent-control .cwoa-custom-select__menu,
#cwoa-app .cwoa-params-recent-control .cwoa-custom-select__menu,
#cwoa-app .cwoa-vin-recent-control .cwoa-custom-select__menu,
#cwoa-app .cwoa-am-recent-control .cwoa-custom-select__menu {
    background-color: var(--cwoa-params-select-surface, var(--cwoa-card));
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 88%, var(--cwoa-accent));
    border-radius: var(--cwoa-radius-sm);
    box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--cwoa-text) 35%, transparent);
}

#cwoa-app .cwoa-ai-recent-control.is-open .cwoa-custom-select__menu,
#cwoa-app .cwoa-params-recent-control.is-open .cwoa-custom-select__menu,
#cwoa-app .cwoa-vin-recent-control.is-open .cwoa-custom-select__menu,
#cwoa-app .cwoa-am-recent-control.is-open .cwoa-custom-select__menu {
    z-index: 26;
}

#cwoa-app #cwoa-search-row.cwoa-search-row--wizard-dd-open .cwoa-ai-recent-control.is-open .cwoa-custom-select__menu,
#cwoa-app #cwoa-search-row.cwoa-search-row--wizard-dd-open .cwoa-params-recent-control.is-open .cwoa-custom-select__menu,
#cwoa-app #cwoa-search-row.cwoa-search-row--wizard-dd-open .cwoa-vin-recent-control.is-open .cwoa-custom-select__menu,
#cwoa-app #cwoa-search-row.cwoa-search-row--wizard-dd-open .cwoa-am-recent-control.is-open .cwoa-custom-select__menu {
    z-index: 50002;
}

#cwoa-app #cwoa-search-row .cwoa-search-col--ai .cwoa-ai-recent-control.is-open .cwoa-custom-select__menu {
    z-index: 50003;
}

#cwoa-app #cwoa-ai-recent-suggestions .cwoa-recent-item,
#cwoa-app #cwoa-params-recent-suggestions .cwoa-recent-item,
#cwoa-app #cwoa-vin-recent-suggestions .cwoa-recent-item,
#cwoa-app #cwoa-am-recent-suggestions .cwoa-recent-item {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    list-style: none;
}

#cwoa-app #cwoa-ai-recent-suggestions .cwoa-recent-item.cwoa-cell-long-tip,
#cwoa-app #cwoa-params-recent-suggestions .cwoa-recent-item.cwoa-cell-long-tip,
#cwoa-app #cwoa-vin-recent-suggestions .cwoa-recent-item.cwoa-cell-long-tip,
#cwoa-app .cwoa-recent-menu-heading {
    cursor: pointer;
}

#cwoa-app #cwoa-ai-query.cwoa-ai-input {
    width: 100%;
    box-sizing: border-box;
    min-height: var(--cwoa-ai-composer-control-h, 2.5rem);
    max-height: 7.5rem;
    padding: 8px 12px;
    margin: 0;
    border-radius: var(--cwoa-radius-sm);
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 92%, transparent);
    background: var(--cwoa-card, #fff);
    font-size: var(--cwoa-tile-control-size, 0.82rem);
    line-height: 1.35;
    resize: none;
    overflow: auto;
    vertical-align: middle;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

#cwoa-app #cwoa-ai-query.cwoa-ai-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--cwoa-accent, #4f6ef7) 45%, var(--cwoa-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cwoa-accent, #4f6ef7) 12%, transparent);
}

#cwoa-app button.cwoa-ai-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--cwoa-ai-composer-control-h, 2.5rem);
    width: var(--cwoa-ai-composer-control-h, 2.5rem);
    height: var(--cwoa-ai-composer-control-h, 2.5rem);
    min-width: var(--cwoa-ai-composer-control-h, 2.5rem);
    min-height: var(--cwoa-ai-composer-control-h, 2.5rem);
    padding: 0;
    margin: 0;
    align-self: center;
    border-radius: var(--cwoa-radius-sm);
    border: 1px solid color-mix(in srgb, var(--cwoa-accent, #4f6ef7) 38%, transparent);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cwoa-accent, #4f6ef7) 14%, var(--cwoa-card, #fff)),
        color-mix(in srgb, var(--cwoa-accent, #4f6ef7) 22%, transparent)
    );
    color: color-mix(in srgb, var(--cwoa-accent, #4f6ef7) 92%, black);
    box-shadow: 0 1px 2px color-mix(in srgb, currentColor 8%, transparent);
    cursor: pointer;
    transition:
        box-shadow 0.2s ease,
        filter 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

#cwoa-app button.cwoa-ai-send:hover:not(:disabled) {
    filter: brightness(1.03);
    box-shadow:
        0 4px 14px color-mix(in srgb, var(--cwoa-accent, #4f6ef7) 22%, transparent),
        0 1px 2px color-mix(in srgb, currentColor 6%, transparent);
}

#cwoa-app button.cwoa-ai-send:active:not(:disabled) {
    filter: brightness(0.98);
}

#cwoa-app button.cwoa-ai-send:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

#cwoa-app .cwoa-ai-send__icon {
    display: block;
    flex: 0 0 auto;
    width: 0.9rem;
    height: 0.9rem;
    margin: 0;
    background: currentColor;
    color: inherit;
    /* Наконечник вверху: отправка / сдвиг переписки вверх. */
    clip-path: polygon(8% 58%, 42% 58%, 42% 92%, 58% 92%, 58% 58%, 92% 58%, 50% 8%);
}



@media (max-width: 640px) {
    #cwoa-app .cwoa-ai-assistant__composer,
    #cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-assistant__composer {
        --cwoa-ai-composer-gap: 0.375rem;
        --cwoa-ai-composer-control-h: 2.375rem;
        padding: 8px 8px 10px;
    }

    #cwoa-app #cwoa-ai-query.cwoa-ai-input {
        padding: 7px 10px;
        font-size: 16px;
    }

    #cwoa-app button.cwoa-ai-send {
        flex-basis: var(--cwoa-ai-composer-control-h, 2.375rem);
        width: var(--cwoa-ai-composer-control-h, 2.375rem);
        height: var(--cwoa-ai-composer-control-h, 2.375rem);
        min-width: var(--cwoa-ai-composer-control-h, 2.375rem);
        min-height: var(--cwoa-ai-composer-control-h, 2.375rem);
    }
}

#cwoa-app .cwoa-ai-search-input:disabled {
    background: color-mix(in srgb, var(--cwoa-accent) 6%, var(--cwoa-bg));
    color: var(--cwoa-muted);
    cursor: not-allowed;
    opacity: 1;
}

/* Same single-line control as other tiles (themes sometimes inflate inputs). */
#cwoa-app #cwoa-ai-query.cwoa-field {
    resize: vertical;
    -webkit-appearance: none;
    appearance: none;
    min-height: 2.75rem;
    max-height: 6rem;
    overflow: auto;
}

#cwoa-app .cwoa-ai-orchestrator-status {
    margin: 6px 0 0;
    font-size: var(--cwoa-fs-xs);
    color: var(--cwoa-muted);
}


#cwoa-app .cwoa-ai-orchestrator-result {
    margin: 8px 0 0;
    padding: 10px;
    max-height: 14rem;
    overflow: auto;
    font-size: 11px;
    line-height: 1.35;
    background: var(--cwoa-surface);
    border: 1px solid var(--cwoa-border);
    border-radius: var(--cwoa-radius-sm);
    white-space: pre-wrap;
    word-break: break-word;
}


#cwoa-app .cwoa-ai-orchestrator-raw-wrap {
    margin-top: 8px;
    font-size: var(--cwoa-fs-xs);
}

#cwoa-app .cwoa-ai-raw-summary {
    cursor: pointer;
    color: var(--cwoa-accent, #2f80ed);
    user-select: none;
}


#cwoa-app .cwoa-ai-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}

#cwoa-app .cwoa-ai-chip-grid .cwoa-ai-choice.cwoa-ai-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    flex: 1 1 38%;
    max-width: 100%;
    text-align: center;
    padding: 10px 12px;
    font-weight: 500;
    border-radius: 999px;
    line-height: 1.25;
}

@media (max-width: 520px) {
    #cwoa-app .cwoa-ai-chip-grid .cwoa-ai-choice.cwoa-ai-chip {
        flex: 1 1 calc(50% - 6px);
    }
}


#cwoa-app .cwoa-ai-flagline {
    margin: 2px 0 0;
    font-size: 10px;
    color: var(--cwoa-muted);
}

/* Force identical field/select visuals across VIN/params/AM/AI tiles */
#cwoa-app #cwoa-search-row .cwoa-field-row > label,
#cwoa-app #cwoa-search-row .cwoa-wizard-label,
#cwoa-app #cwoa-search-row .cwoa-wizard-th {
    font-size: var(--cwoa-tile-label-size) !important;
    font-weight: 600;
    line-height: 1.2;
}

#cwoa-app #cwoa-search-row .cwoa-search-tile input.cwoa-field,
#cwoa-app #cwoa-search-row .cwoa-search-tile select.cwoa-field,
#cwoa-app #cwoa-search-row .cwoa-search-tile .cwoa-wizard-select,
#cwoa-app #cwoa-search-row .cwoa-search-tile select.cwoa-catalog-locale-sync,
#cwoa-app #cwoa-search-row .cwoa-search-tile .cwoa-wizard-catalog-select {
    min-height: var(--cwoa-tile-control-height) !important;
    height: var(--cwoa-tile-control-height);
    padding: var(--cwoa-tile-control-padding) !important;
    border-radius: var(--cwoa-radius-sm);
    font-size: var(--cwoa-tile-control-size) !important;
    line-height: 1.35;
    font-family: inherit;
    box-sizing: border-box;
}

#cwoa-app #cwoa-search-row .cwoa-search-tile input.cwoa-field::placeholder {
    opacity: 0.55;
    color: color-mix(in srgb, currentColor 55%, transparent);
}

/*
 * Тема сайта ломает нативный [hidden] у <button> (переопределяет его display) — без явного
 * правила #cwoa-wizard-find видна всегда, даже с [hidden]. Строго следуем за атрибутом и не полагаемся на тему.
 */
#cwoa-app #cwoa-search-row #cwoa-wizard-find[hidden] {
    display: none !important;
}

#cwoa-app #cwoa-search-row .cwoa-search-tile__submit {
    min-height: var(--cwoa-tile-control-height);
    font-size: var(--cwoa-portal-tile-cta-font-size);
    font-weight: var(--cwoa-portal-tile-cta-font-weight);
    line-height: var(--cwoa-portal-tile-cta-line-height);
    letter-spacing: var(--cwoa-portal-tile-cta-letter-spacing);
}

/* AI catalog teaser: same CTA typography as other portal tiles (not workspace composer/send). */
#cwoa-app #cwoa-search-row .cwoa-ai-assistant-teaser .cwoa-search-tile__footer > button.cwoa-action.cwoa-action--primary {
    font-size: var(--cwoa-portal-tile-cta-font-size);
    font-weight: var(--cwoa-portal-tile-cta-font-weight);
    line-height: var(--cwoa-portal-tile-cta-line-height);
    letter-spacing: var(--cwoa-portal-tile-cta-letter-spacing);
}

#cwoa-app #cwoa-search-row .cwoa-search-tile__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding-top: 0.15rem;
    /* У VIN/AM в подвале всегда зарезервировано место под «Очистить всё» (visibility, см. правило ниже) —
     * без этого min-height у Параметров/Поставщиков (без кнопки Очистить) их подвал был бы ниже,
     * и кнопка «Поиск» сидела бы выше (на другой высоте), чем у VIN/AM. */
    min-height: 56px;
}

#cwoa-app #cwoa-search-row .cwoa-search-panel {
    overflow: visible;
}

#cwoa-app #cwoa-search-row .cwoa-search-tile__clear,
#cwoa-app #cwoa-params-expanded .cwoa-search-tile__clear {
    width: max-content;
    align-self: center;
    border: 0;
    background: transparent;
    color: var(--cwoa-muted);
    font-size: var(--cwoa-fs-xs);
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 0.12em;
    cursor: pointer;
    padding: 0;
}

/* Кнопка есть в разметке всех блоков (у VIN и AM), но видна только с модификатором (иначе темы ломают [hidden]).
 * ВАЖНО: место под кнопку резервируется ВСЕГДА (display:inline-block, а не none) — .cwoa-search-tile__footer
 * соседствует с .cwoa-search-tile__main (flex:1 1 auto, растягивается под общую высоту строки тайлов), и якорь
 * «Недавние» прижат к низу .main через margin-top:auto. Если бы подвал менял высоту при появлении «Очистить всё»
 * (было раньше: display:none → inline-block), .main сжимался бы и якорь визуально «улетал» вверх при вводе текста.
 * Прячем только через visibility, оставляя занимаемое место постоянным. */
#cwoa-app #cwoa-search-row .cwoa-search-tile__clear,
#cwoa-app #cwoa-params-expanded .cwoa-search-tile__clear {
    display: inline-block !important;
}

#cwoa-app #cwoa-search-row .cwoa-search-tile__clear:not(.cwoa-search-tile__clear--visible),
#cwoa-app #cwoa-params-expanded .cwoa-search-tile__clear:not(.cwoa-search-tile__clear--visible) {
    visibility: hidden !important;
    pointer-events: none !important;
}

#cwoa-app #cwoa-search-row .cwoa-search-tile__clear.cwoa-search-tile__clear--visible,
#cwoa-app #cwoa-params-expanded .cwoa-search-tile__clear.cwoa-search-tile__clear--visible {
    visibility: visible !important;
    pointer-events: auto !important;
}

#cwoa-app #cwoa-search-row .cwoa-search-tile__clear:hover,
#cwoa-app #cwoa-params-expanded .cwoa-search-tile__clear:hover {
    color: var(--cwoa-text);
}

#cwoa-app .cwoa-search-tile__footer .cwoa-action[disabled],
#cwoa-app .cwoa-search-tile__footer .cwoa-action:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary actions in tiles: full-width pill (overrides generic text-link buttons). */
#cwoa-app .cwoa-search-tile__footer .cwoa-search-tile__submit:not(:disabled) {
    width: 100%;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: var(--cwoa-portal-tile-cta-font-weight);
    font-size: var(--cwoa-portal-tile-cta-font-size);
    line-height: var(--cwoa-portal-tile-cta-line-height);
    letter-spacing: var(--cwoa-portal-tile-cta-letter-spacing);
    color: color-mix(in srgb, var(--cwoa-accent) 92%, black);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cwoa-accent) 16%, white),
        color-mix(in srgb, var(--cwoa-accent) 26%, transparent)
    );
    border: 1px solid color-mix(in srgb, var(--cwoa-accent) 38%, transparent);
    box-shadow: 0 1px 2px color-mix(in srgb, currentColor 8%, transparent);
    transition:
        box-shadow 0.2s ease,
        filter 0.2s ease,
        border-color 0.2s ease;
}

#cwoa-app .cwoa-search-tile__footer .cwoa-search-tile__submit:not(:disabled):hover {
    color: color-mix(in srgb, var(--cwoa-accent) 88%, black);
    filter: brightness(1.03);
    box-shadow:
        0 4px 14px color-mix(in srgb, var(--cwoa-accent) 28%, transparent),
        0 1px 2px color-mix(in srgb, currentColor 6%, transparent);
}

#cwoa-app .cwoa-search-tile__footer .cwoa-search-tile__submit:not(:disabled):active {
    filter: brightness(0.98);
}

#cwoa-app .cwoa-search-tile__footer .cwoa-search-tile__submit:disabled {
    width: 100%;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    border: 1px dashed var(--cwoa-border);
    background: color-mix(in srgb, var(--cwoa-surface) 80%, transparent);
    opacity: 0.65;
}

#cwoa-app #cwoa-search-row .cwoa-search-col .cwoa-vin-shell {
    width: 100%;
    max-width: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: visible;
}

#cwoa-app .cwoa-vin-field-wrap {
    position: relative;
}

#cwoa-app .cwoa-vin-field-wrap {
    position: relative;
    overflow: visible;
}

#cwoa-app #cwoa-search-row .cwoa-search-col--vin .cwoa-vin-block.cwoa-search-panel {
    flex: 1 1 auto;
    min-height: 0;
}

#cwoa-app #cwoa-search-row .cwoa-search-col--params .cwoa-params-block {
    margin-top: 0;
}

/*
 * Params tile: match <select> and dropdown rows to the tile surface (not Field gray).
 * Native popup styling varies by OS/browser; option rules apply where supported.
 */
#cwoa-app .cwoa-params-block.cwoa-search-panel {
    --cwoa-params-select-surface: color-mix(in srgb, var(--cwoa-card) 94%, white);
    overflow: visible;
}

#cwoa-app .cwoa-params-block select.cwoa-field,
#cwoa-app .cwoa-params-block select.cwoa-wizard-select,
#cwoa-app .cwoa-params-block select.cwoa-catalog-locale-sync,
#cwoa-app .cwoa-params-block select.cwoa-wizard-catalog-select {
    background-color: var(--cwoa-params-select-surface) !important;
    background-image: none !important;
    color: var(--cwoa-text);
}

#cwoa-app .cwoa-params-block select.cwoa-field:focus-visible,
#cwoa-app .cwoa-params-block select.cwoa-wizard-select:focus-visible,
#cwoa-app .cwoa-params-block select.cwoa-catalog-locale-sync:focus-visible,
#cwoa-app .cwoa-params-block select.cwoa-wizard-catalog-select:focus-visible {
    background-color: var(--cwoa-params-select-surface) !important;
}

#cwoa-app .cwoa-params-block select option {
    background-color: var(--cwoa-params-select-surface);
    color: var(--cwoa-text);
}

#cwoa-app .cwoa-params-block select option:checked {
    background-color: color-mix(in srgb, var(--cwoa-accent) 18%, var(--cwoa-params-select-surface));
    color: var(--cwoa-text);
}

/*
 * Кастомный select темы: класс .cwoa-theme-dropdown вешает buildWizardCustomSelect (язык + параметры + будущие списки).
 * Единый вид панели/пунктов; у языка отдельные правки триггера ниже.
 */
#cwoa-app #cwoa-params-expanded .cwoa-custom-select,
#cwoa-app .cwoa-params-block .cwoa-custom-select,
.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-custom-select,
.cwoa-custom-select.cwoa-theme-dropdown {
    position: relative;
}

#cwoa-app #cwoa-params-expanded .cwoa-custom-select__trigger,
#cwoa-app .cwoa-params-block .cwoa-custom-select__trigger,
.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-custom-select__trigger {
    width: 100%;
    min-height: var(--cwoa-tile-control-height);
    height: var(--cwoa-tile-control-height);
    padding: var(--cwoa-tile-control-padding);
    border-radius: var(--cwoa-radius-sm);
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 88%, var(--cwoa-accent));
    background: var(--cwoa-params-select-surface);
    color: var(--cwoa-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: inherit;
    font-size: var(--cwoa-tile-control-size);
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
}

#cwoa-app #cwoa-params-expanded .cwoa-custom-select__label,
#cwoa-app .cwoa-params-block .cwoa-custom-select__label,
.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-custom-select__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#cwoa-app #cwoa-params-expanded .cwoa-custom-select__chevron,
#cwoa-app .cwoa-params-block .cwoa-custom-select__chevron {
    flex: 0 0 auto;
    color: var(--cwoa-accent);
    font-size: 0.85em;
    opacity: 0.85;
}

#cwoa-app #cwoa-params-expanded .cwoa-custom-select.is-open .cwoa-custom-select__trigger,
#cwoa-app .cwoa-params-block .cwoa-custom-select.is-open .cwoa-custom-select__trigger,
#cwoa-app #cwoa-params-expanded .cwoa-custom-select__trigger:focus-visible,
#cwoa-app .cwoa-params-block .cwoa-custom-select__trigger:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--cwoa-accent) 55%, var(--cwoa-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cwoa-accent) 22%, transparent);
}

/*
 * Панель списка: как подсказки VIN; прокрутка без видимого скроллбара (колёсико / тач).
 */
#cwoa-app #cwoa-params-expanded .cwoa-custom-select__menu,
#cwoa-app .cwoa-params-block .cwoa-custom-select__menu,
#cwoa-app .cwoa-ai-recent-control .cwoa-custom-select__menu,
#cwoa-app .cwoa-params-recent-control .cwoa-custom-select__menu,
#cwoa-app .cwoa-vin-recent-control .cwoa-custom-select__menu,
#cwoa-app .cwoa-am-recent-control .cwoa-custom-select__menu,
.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-custom-select__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    padding: 4px 0;
    background: var(--cwoa-card);
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 88%, var(--cwoa-accent));
    border-radius: var(--cwoa-radius-sm);
    box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--cwoa-text) 35%, transparent);
}

#cwoa-app #cwoa-params-expanded .cwoa-custom-select__list,
#cwoa-app .cwoa-params-block .cwoa-custom-select__list,
#cwoa-app .cwoa-ai-recent-control .cwoa-custom-select__list,
#cwoa-app .cwoa-params-recent-control .cwoa-custom-select__list,
#cwoa-app .cwoa-vin-recent-control .cwoa-custom-select__list,
#cwoa-app .cwoa-am-recent-control .cwoa-custom-select__list,
.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-custom-select__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 14rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#cwoa-app #cwoa-params-expanded .cwoa-custom-select__list::-webkit-scrollbar,
#cwoa-app .cwoa-params-block .cwoa-custom-select__list::-webkit-scrollbar,
#cwoa-app .cwoa-ai-recent-control .cwoa-custom-select__list::-webkit-scrollbar,
#cwoa-app .cwoa-params-recent-control .cwoa-custom-select__list::-webkit-scrollbar,
#cwoa-app .cwoa-vin-recent-control .cwoa-custom-select__list::-webkit-scrollbar,
#cwoa-app .cwoa-am-recent-control .cwoa-custom-select__list::-webkit-scrollbar,
.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-custom-select__list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#cwoa-app #cwoa-params-expanded .cwoa-custom-select__option,
#cwoa-app .cwoa-params-block .cwoa-custom-select__option,
#cwoa-app .cwoa-ai-recent-control .cwoa-custom-select__option,
#cwoa-app .cwoa-params-recent-control .cwoa-custom-select__option,
#cwoa-app .cwoa-vin-recent-control .cwoa-custom-select__option,
#cwoa-app .cwoa-am-recent-control .cwoa-custom-select__option,
.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-custom-select__option {
    margin: 0;
    padding: 0.45rem 0.65rem;
    border-radius: 0;
    background: transparent;
    font-size: var(--cwoa-tile-control-size);
    line-height: 1.35;
    color: var(--cwoa-text);
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
}

#cwoa-app #cwoa-params-expanded .cwoa-custom-select__option:hover,
#cwoa-app .cwoa-params-block .cwoa-custom-select__option:hover,
#cwoa-app #cwoa-params-expanded .cwoa-custom-select__option:focus-visible,
#cwoa-app .cwoa-params-block .cwoa-custom-select__option:focus-visible,
#cwoa-app .cwoa-ai-recent-control .cwoa-custom-select__option:hover,
#cwoa-app .cwoa-ai-recent-control .cwoa-custom-select__option:focus-visible,
#cwoa-app .cwoa-params-recent-control .cwoa-custom-select__option:hover,
#cwoa-app .cwoa-params-recent-control .cwoa-custom-select__option:focus-visible,
#cwoa-app .cwoa-vin-recent-control .cwoa-custom-select__option:hover,
#cwoa-app .cwoa-vin-recent-control .cwoa-custom-select__option:focus-visible,
#cwoa-app .cwoa-am-recent-control .cwoa-custom-select__option:hover,
#cwoa-app .cwoa-am-recent-control .cwoa-custom-select__option:focus-visible,
.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-custom-select__option:hover,
.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-custom-select__option:focus-visible {
    background: color-mix(in srgb, var(--cwoa-accent) 14%, var(--cwoa-card));
    outline: none;
}

#cwoa-app #cwoa-params-expanded .cwoa-custom-select__option.is-selected,
#cwoa-app .cwoa-params-block .cwoa-custom-select__option.is-selected,
#cwoa-app .cwoa-ai-recent-control .cwoa-custom-select__option.is-selected,
#cwoa-app .cwoa-params-recent-control .cwoa-custom-select__option.is-selected,
#cwoa-app .cwoa-vin-recent-control .cwoa-custom-select__option.is-selected,
#cwoa-app .cwoa-am-recent-control .cwoa-custom-select__option.is-selected,
.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-custom-select__option.is-selected {
    background: color-mix(in srgb, var(--cwoa-accent) 14%, var(--cwoa-card));
    color: var(--cwoa-text);
    font-weight: 600;
}

/*
 * Язык в шапке: пункт списка без утолщения (в отличие от прочих custom-select, где bold отмечает выбор).
 * Меню portalится в #cwoa-app и теряет класс .cwoa-account-locale-inline (тот остаётся на обёртке-источнике),
 * поэтому целится по id списка (aria-controls триггера языка: cwoa-catalog-locale-header-custom-listbox).
 */
.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-custom-select__option.is-selected,
#cwoa-catalog-locale-header-custom-listbox .cwoa-custom-select__option.is-selected {
    font-weight: 400;
}

#cwoa-app #cwoa-params-expanded .cwoa-custom-select__optgroup-label,
#cwoa-app .cwoa-params-block .cwoa-custom-select__optgroup-label,
.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-custom-select__optgroup-label {
    padding: 0.4rem 0.5rem 0.15rem;
    font-size: var(--cwoa-fs-xs);
    font-weight: 700;
    color: var(--cwoa-muted);
    cursor: default;
}

/*
 * Портализированные списки (JS переносит узел .cwoa-custom-select__menu в #cwoa-app и ставит position:fixed —
 * см. cwoaPositionFixedStepMenu): стилизация НЕ зависит от исходного предка (.cwoa-params-block /
 * #cwoa-params-expanded), а держится на собственном классе --portal, который переживает перенос куда угодно
 * внутри #cwoa-app. Раньше список марки («Choose a brand») открывался НЕ через портал и мог на низких/мобильных
 * экранах уезжать вниз под фиксированный баннер cookie-уведомления или за пределы видимой области —
 * теперь portal-режим применяется и к нему (см. isStepSelect/needsFixedPortal в buildWizardCustomSelect).
 */
#cwoa-app .cwoa-custom-select__menu--portal {
    padding: 4px 0;
    background: var(--cwoa-card);
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 88%, var(--cwoa-accent));
    border-radius: var(--cwoa-radius-sm);
    box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--cwoa-text) 35%, transparent);
}

#cwoa-app .cwoa-custom-select__menu--portal .cwoa-custom-select__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 14rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#cwoa-app .cwoa-custom-select__menu--portal .cwoa-custom-select__list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#cwoa-app .cwoa-custom-select__menu--portal .cwoa-custom-select__option {
    margin: 0;
    padding: 0.45rem 0.65rem;
    border-radius: 0;
    background: transparent;
    font-size: var(--cwoa-tile-control-size);
    line-height: 1.35;
    color: var(--cwoa-text);
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
}

#cwoa-app .cwoa-custom-select__menu--portal .cwoa-custom-select__option:hover,
#cwoa-app .cwoa-custom-select__menu--portal .cwoa-custom-select__option:focus-visible {
    background: color-mix(in srgb, var(--cwoa-accent) 14%, var(--cwoa-card));
    outline: none;
}

#cwoa-app .cwoa-custom-select__menu--portal .cwoa-custom-select__option.is-selected {
    background: color-mix(in srgb, var(--cwoa-accent) 14%, var(--cwoa-card));
    color: var(--cwoa-text);
    font-weight: 600;
}

#cwoa-app .cwoa-custom-select__menu--portal .cwoa-custom-select__optgroup-label {
    padding: 0.4rem 0.5rem 0.15rem;
    font-size: var(--cwoa-fs-xs);
    font-weight: 700;
    color: var(--cwoa-muted);
    cursor: default;
}

/*
 * Оверлей закрывает список по клику снаружи. Раньше z-index 99998 был выше вложенного контекста #cwoa-app —
 * клики доходили только до оверлея (capture + preventDefault), пункты меню не выбирались.
 * Строка поиска поднимается классом .cwoa-search-row--wizard-dd-open (см. syncWizardSelectOverlay).
 */
#cwoa-wizard-select-overlay.cwoa-wizard-select-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50000;
    background: transparent;
    pointer-events: auto;
}

#cwoa-wizard-select-overlay.cwoa-wizard-select-overlay.is-active {
    display: block;
}

#cwoa-app #cwoa-search-row.cwoa-search-row--wizard-dd-open {
    position: relative;
    z-index: 50001;
}

#cwoa-app #cwoa-search-row > .cwoa-search-col--params.cwoa-has-open-dd:has(.cwoa-custom-select.is-open) {
    isolation: isolate;
}

#cwoa-app #cwoa-search-row .cwoa-search-col--params.cwoa-has-open-dd .cwoa-custom-select.is-open {
    z-index: 1;
}

#cwoa-app #cwoa-search-row .cwoa-search-col--params.cwoa-has-open-dd .cwoa-custom-select__menu {
    z-index: 2;
}

#cwoa-app #cwoa-search-row .cwoa-search-col--params.cwoa-has-open-dd .cwoa-params-recent-control.is-open {
    z-index: 3;
}

#cwoa-app #cwoa-search-row .cwoa-search-col--params.cwoa-has-open-dd .cwoa-params-recent-control.is-open .cwoa-custom-select__menu {
    z-index: 4;
}

#cwoa-app #cwoa-search-row .cwoa-search-col--am-oem .cwoa-am-oem-search {
    width: 100%;
}

.cwoa-am-oem-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

/* Портал: шапка + поиск + кандидат + рабочая зона */
#cwoa-app .cwoa-catalog-portal {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--cwoa-portal-stack-gap, clamp(12px, 1.8vw, 20px));
    width: 100%;
    max-width: min(1920px, 100%);
    margin-inline: auto;
    min-width: 0;
    min-height: 0;
    flex: 0 1 auto !important;
    /* layout containment only on portal shell; paint containment clips search/recent overlays */
    contain: none;
}

#cwoa-app:has(#cwoa-workspace:not([hidden]):not(.cwoa-panel--hidden)) .cwoa-catalog-portal,
#cwoa-app.cwoa-app--workspace-open .cwoa-catalog-portal {
    flex: 1 1 auto !important;
}

/* Top: brand + account row, then search columns + candidate dock */
.cwoa-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(12px, 2vw, 24px);
    width: 100%;
    flex: 0 0 auto;
    flex-shrink: 0;
    overflow: visible;
    /* Базовые отступы; у портала переопределяем под .cwoa-catalog-footer__shell — см. ниже */
    padding: clamp(0.7rem, 1.3vw, 1.05rem);
    border-radius: calc(var(--cwoa-radius-lg) + 4px);
    border: 1px solid color-mix(in srgb, var(--cwoa-accent) 32%, var(--cwoa-border));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--cwoa-accent) 11%, var(--cwoa-card)),
            color-mix(in srgb, var(--cwoa-card) 93%, white)
        );
    box-shadow:
        0 1px 0 color-mix(in srgb, white 50%, transparent),
        0 16px 42px -26px color-mix(in srgb, var(--cwoa-accent) 40%, transparent);
    transition: gap var(--cwoa-layout-duration) var(--cwoa-motion-ease);
}

/* Шапка каталога: те же padding, что у подвала (.cwoa-catalog-footer__shell) — совпадает ширина контента */
#cwoa-app .cwoa-catalog-portal__head.cwoa-top {
    padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1.1rem, 2.4vw, 1.45rem);
    padding-bottom: clamp(0.85rem, 1.8vw, 1.1rem);
}

/* header-site: шапка вне #cwoa-app, подвал внизу — одни и те же отступы, что у .cwoa-catalog-footer__shell */
.cwoa-minimal-outer > .cwoa-catalog-portal__head.cwoa-top {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1.1rem, 2.4vw, 1.45rem);
    padding-bottom: clamp(0.85rem, 1.8vw, 1.1rem);
    gap: clamp(8px, 1.5vw, 14px);
}

#cwoa-app .cwoa-portal-main {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto !important;
    min-height: 0 !important;
    gap: var(--cwoa-portal-stack-gap, clamp(12px, 1.8vw, 20px));
}

#cwoa-app:has(#cwoa-workspace:not([hidden]):not(.cwoa-panel--hidden)) .cwoa-portal-main,
#cwoa-app.cwoa-app--workspace-open .cwoa-portal-main {
    flex: 1 1 auto !important;
}

#cwoa-app .cwoa-main-search-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: clamp(0.7rem, 1.3vw, 1.05rem);
    border-radius: calc(var(--cwoa-radius-lg) + 4px);
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 86%, var(--cwoa-accent));
    background: color-mix(in srgb, var(--cwoa-card) 96%, white);
    box-shadow: 0 12px 36px -24px color-mix(in srgb, currentColor 24%, transparent);
}

@keyframes cwoa-locale-overlay-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#cwoa-app .cwoa-main-search-panel.cwoa-catalog-locale-switching .cwoa-block-loading-overlay {
    opacity: 0;
    animation: cwoa-locale-overlay-in 0.22s ease-out forwards;
}

#cwoa-app .cwoa-main-search-panel.cwoa-catalog-locale-switching .cwoa-search-tile.cwoa-loading-host,
#cwoa-app .cwoa-main-search-panel.cwoa-catalog-locale-switching .cwoa-catalog-locale-toolbar.cwoa-loading-host {
    transition: box-shadow 0.22s ease, filter 0.22s ease;
}

#cwoa-app .cwoa-main-search-panel.cwoa-catalog-locale-switching .cwoa-search-tile.cwoa-loading-host {
    filter: saturate(0.96);
}

#cwoa-app .cwoa-home-empty-state {
    padding: clamp(1rem, 1.8vw, 1.7rem);
    border: 1px solid color-mix(in srgb, var(--cwoa-accent) 34%, var(--cwoa-border));
    border-radius: calc(var(--cwoa-radius-lg) + 2px);
    background:
        linear-gradient(
            165deg,
            color-mix(in srgb, var(--cwoa-accent) 10%, var(--cwoa-card)),
            color-mix(in srgb, var(--cwoa-card) 88%, white)
        );
    box-shadow: 0 10px 32px -18px color-mix(in srgb, var(--cwoa-accent) 40%, transparent);
}

#cwoa-app .cwoa-home-empty-state__title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    line-height: 1.3;
    color: var(--cwoa-text);
}

#cwoa-app .cwoa-home-empty-state__lead,
#cwoa-app .cwoa-home-empty-state__text {
    margin: 0;
    max-width: 76ch;
    color: var(--cwoa-text);
    line-height: 1.5;
}

#cwoa-app .cwoa-home-empty-state__body {
    max-width: 76ch;
    color: var(--cwoa-text);
}

#cwoa-app .cwoa-home-empty-state__body > :first-child {
    margin-top: 0;
}

#cwoa-app .cwoa-home-empty-state__body > :last-child {
    margin-bottom: 0;
}

#cwoa-app .cwoa-home-empty-state__body p {
    margin: 0 0 0.55rem;
    line-height: 1.55;
}

#cwoa-app .cwoa-home-empty-state__lead {
    font-weight: 600;
    margin-bottom: 0.45rem;
}

#cwoa-app .cwoa-home-empty-state__text + .cwoa-home-empty-state__text {
    margin-top: 0.45rem;
}

#cwoa-app .cwoa-home-empty-state__body {
    max-width: 76ch;
    color: var(--cwoa-text);
    line-height: 1.55;
}

#cwoa-app .cwoa-home-empty-state__body p {
    margin: 0 0 0.45rem;
}

#cwoa-app .cwoa-home-empty-state__body p:first-child {
    font-weight: 600;
}

#cwoa-app .cwoa-home-empty-state__body p:last-child {
    margin-bottom: 0;
}

#cwoa-app .cwoa-home-empty-state__cta {
    margin: 0.9rem 0 0;
}

#cwoa-app .cwoa-main-search-panel #cwoa-search-row {
    margin: 0;
}

/*
 * Исчезают по клику поиска (markHomeEngaged() в JS). opacity/transform и сам height анимируются
 * одновременно и с одной длительностью (--cwoa-reveal-duration, та же, что и у появления новых
 * блоков) — иначе блок занимал полную высоту всё время фейда, а в конце страница ниже
 * (в т.ч. футер) скачком «подтягивалась» вверх. Фактический display: none ставится
 * через атрибут [hidden] только после завершения height-анимации (cwoaAnimateContainerHeight).
 */
#cwoa-app .cwoa-home-empty-state,
#cwoa-app .cwoa-home-garage-block,
#cwoa-app .cwoa-catalog-brand-banner {
    transition: opacity var(--cwoa-reveal-duration) var(--cwoa-motion-ease), transform var(--cwoa-reveal-duration) var(--cwoa-motion-ease);
}

#cwoa-app.cwoa-home-engaged .cwoa-home-empty-state,
#cwoa-app.cwoa-home-engaged .cwoa-home-garage-block,
#cwoa-app.cwoa-home-engaged .cwoa-catalog-brand-banner {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #cwoa-app .cwoa-home-empty-state,
    #cwoa-app .cwoa-home-garage-block,
    #cwoa-app .cwoa-catalog-brand-banner {
        transition: none;
    }
}

#cwoa-app .cwoa-home-business-offer__hint {
    color: var(--cwoa-muted);
    font-size: 0.94em;
}

/* Якорь из подвала «Catalog for your site» — не уезжать под админ-бар */
#cwoa-app #cwoa-home-business-offer {
    scroll-margin-top: var(--cwoa-anchor-scroll-margin, 88px);
}

/*
 * Партнёрский промо-блок: контент страницы часто содержит [cwoa_partnership] с вложенным .cwoa-panel
 * (белая карточка). На главной каталога визуально как «Мой гараж» — одна широкая плашка без внутреннего белого.
 */
#cwoa-app .cwoa-home-supplier-block .cwoa-home-empty-state__body {
    max-width: none;
    width: 100%;
}

#cwoa-app .cwoa-home-supplier-block .cwoa-home-empty-state__body .cwoa-contact-page {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
}

#cwoa-app .cwoa-home-supplier-block .cwoa-home-empty-state__body .cwoa-legal-terms.cwoa-panel {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#cwoa-app .cwoa-home-supplier-block .cwoa-home-empty-state__body .cwoa-legal-terms__title {
    display: none;
}

#cwoa-app .cwoa-home-supplier-block .cwoa-home-empty-state__body .cwoa-legal-terms__head {
    margin: 0 0 0.45rem;
}

#cwoa-app .cwoa-home-supplier-block .cwoa-home-empty-state__body .cwoa-legal-terms__lead {
    margin: 0 0 0.45rem;
    max-width: 76ch;
    font-size: inherit;
    line-height: 1.5;
    font-weight: 600;
    color: var(--cwoa-text);
}

#cwoa-app .cwoa-home-supplier-block .cwoa-home-empty-state__body .cwoa-legal-terms__body {
    font-size: inherit;
    line-height: 1.55;
    color: var(--cwoa-text);
}

#cwoa-app .cwoa-home-supplier-block .cwoa-home-empty-state__body .cwoa-legal-terms__body p {
    margin: 0 0 0.55rem;
    max-width: 76ch;
}

#cwoa-app .cwoa-home-supplier-block .cwoa-home-empty-state__body .cwoa-legal-terms__body p:last-child {
    margin-bottom: 0;
}

#cwoa-app .cwoa-home-supplier-block .cwoa-home-empty-state__body .wp-block-group,
#cwoa-app .cwoa-home-supplier-block .cwoa-home-empty-state__body .wp-block-columns {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
}

.cwoa-site-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px 20px;
    width: 100%;
    margin-bottom: clamp(4px, 1vw, 8px);
    min-width: 0;
}

.cwoa-site-head__mark-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
    background: transparent;
    color: inherit;
}

.cwoa-site-head__mark-link:hover {
    opacity: 0.92;
}

/* Высота марки ≈ внутренняя высота панели аккаунта (padding + chips), без подложки под логотипом. */
.cwoa-site-head__mark {
    display: block;
    height: auto;
    max-height: 50px;
    width: auto;
    max-width: min(330px, 62vw);
    object-fit: contain;
    vertical-align: middle;
    background: transparent;
}

/* Встроенный SVG: тот же масштаб, прозрачное полотно, цвет текста как у шапки. */
svg.cwoa-site-head__mark.cwoa-site-head__mark--svg {
    flex-shrink: 0;
    overflow: visible;
}

/* Текстовое название (запасной вариант): маркер слева — только без WP-лого и без PNG. */
#cwoa-app .cwoa-site-head .cwoa-site-head__brand:not(:has(.cwoa-site-head__logo)):not(:has(.cwoa-site-head__mark)) {
    position: relative;
    padding-left: 14px;
}

#cwoa-app .cwoa-site-head .cwoa-site-head__brand:not(:has(.cwoa-site-head__logo)):not(:has(.cwoa-site-head__mark))::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.75rem;
    max-height: 36px;
    border-radius: 3px;
    background: linear-gradient(
        180deg,
        var(--cwoa-accent),
        color-mix(in srgb, var(--cwoa-accent) 35%, var(--cwoa-card))
    );
}

#cwoa-app .cwoa-site-head .cwoa-site-head__title-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 4px 0;
    letter-spacing: -0.02em;
}

.cwoa-site-head__brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    max-width: min(100%, 280px);
    background: transparent;
}

.cwoa-site-head__logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.cwoa-site-head__logo .custom-logo-link {
    display: inline-flex;
    align-items: center;
}

.cwoa-site-head__logo img {
    max-height: 50px;
    width: auto;
    height: auto;
}

.cwoa-site-head__title-link {
    font-weight: 700;
    font-size: clamp(1.05rem, 2.5vw, 1.35rem);
    text-decoration: none;
    color: var(--cwoa-text);
    line-height: 1.2;
}

.cwoa-site-head__title-link:hover {
    color: var(--cwoa-accent);
}

.cwoa-site-head__portal-exit {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    /* Shell (cwoa-shell-nav.js): появление/исчезновение без перезагрузки шапки */
    transition:
        opacity 0.24s ease,
        transform 0.24s ease;
}

.cwoa-site-head__portal-exit-link {
    white-space: nowrap;
}

.cwoa-site-head__portal-exit--appear:not(.cwoa-site-head__portal-exit--visible) {
    opacity: 0;
    transform: translateX(-10px);
}

.cwoa-site-head__portal-exit--appear.cwoa-site-head__portal-exit--visible {
    opacity: 1;
    transform: translateX(0);
}

.cwoa-site-head__portal-exit--leave {
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .cwoa-site-head__portal-exit {
        transition: opacity 0.15s ease;
    }

    .cwoa-site-head__portal-exit--appear:not(.cwoa-site-head__portal-exit--visible),
    .cwoa-site-head__portal-exit--appear.cwoa-site-head__portal-exit--visible,
    .cwoa-site-head__portal-exit--leave {
        transform: none;
    }
}

.cwoa-site-head__account {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 600px) {
    .cwoa-site-head {
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        gap: 10px 14px;
    }

    .cwoa-site-head__brand {
        max-width: min(100%, 220px);
        flex-shrink: 0;
    }

    .cwoa-site-head__portal-exit {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-start;
    }

    .cwoa-site-head__portal-exit-link {
        white-space: normal;
        text-align: center;
    }

    .cwoa-site-head__account {
        flex: 1 1 100%;
        justify-content: stretch;
    }

    .cwoa-site-head .cwoa-account-bar.cwoa-panel {
        width: 100%;
        margin-left: 0;
    }

    .cwoa-site-head__mark {
        max-height: 46px;
        max-width: min(260px, 88vw);
    }
}

/* Превью номеров: баннер под шапкой + подсветка ячеек */
#cwoa-app .cwoa-part-preview-banner {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
    border-radius: var(--cwoa-radius-lg);
    border: 1px solid color-mix(in srgb, var(--cwoa-accent) 22%, var(--cwoa-border));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--cwoa-accent) 7%, var(--cwoa-surface)) 0%,
        var(--cwoa-surface) 48%
    );
    box-shadow: var(--cwoa-shadow-sm);
    overflow: hidden;
}

#cwoa-app .cwoa-part-preview-banner__accent {
    width: 4px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--cwoa-accent), color-mix(in srgb, var(--cwoa-accent) 55%, var(--cwoa-muted)));
}

#cwoa-app .cwoa-part-preview-banner__body {
    flex: 1;
    min-width: 0;
    padding: 12px 14px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#cwoa-app .cwoa-part-preview-banner__badge {
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cwoa-accent);
    background: color-mix(in srgb, var(--cwoa-accent) 12%, transparent);
    border-radius: 999px;
    padding: 3px 10px;
    line-height: 1.2;
}

#cwoa-app .cwoa-part-preview-banner__text {
    margin: 0;
    font-size: var(--cwoa-fs-sm);
    line-height: 1.5;
    color: var(--cwoa-text);
}

#cwoa-app .cwoa-part-preview-banner__link {
    display: inline-block;
    margin-left: 6px;
    font-weight: 700;
    color: var(--cwoa-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

#cwoa-app .cwoa-part-preview-banner__link:hover,
#cwoa-app .cwoa-part-preview-banner__link:focus-visible {
    color: color-mix(in srgb, var(--cwoa-accent) 80%, black);
}

#cwoa-app .cwoa-part-no-preview {
    display: inline;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    padding: 0.12em 0.35em;
    border-radius: 4px;
    background: color-mix(in srgb, var(--cwoa-muted) 14%, transparent);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    border-bottom: 1px dashed color-mix(in srgb, var(--cwoa-accent) 35%, var(--cwoa-border));
    cursor: help;
}

#cwoa-app .cwoa-part-no-preview--am {
    background: color-mix(in srgb, var(--cwoa-accent) 8%, transparent);
}

.cwoa-vin-shell {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    min-height: 0;
    transition:
        max-width var(--cwoa-layout-duration) var(--cwoa-motion-ease),
        width var(--cwoa-layout-duration) var(--cwoa-motion-ease),
        flex-grow var(--cwoa-layout-duration) var(--cwoa-motion-ease),
        flex-shrink var(--cwoa-layout-duration) var(--cwoa-motion-ease),
        flex-basis var(--cwoa-layout-duration) var(--cwoa-motion-ease);
}

.cwoa-vin-block {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-height: 0;
}

.cwoa-vin-example {
    margin: 0;
}

.cwoa-vin-example-label {
    font-weight: 600;
    margin-right: 6px;
}

.cwoa-vin-example-text {
    font-family: ui-monospace, monospace;
    font-size: var(--cwoa-fs-sm);
    letter-spacing: 0.02em;
    margin-right: 0.35em;
}

.cwoa-params-block {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
}

.cwoa-params-intro {
    margin: 0;
}

.cwoa-params-heading {
    margin: 0;
}

.cwoa-wizard-root {
    font-size: var(--cwoa-fs);
    color: var(--cwoa-text);
    position: relative;
}

.cwoa-wizard-root--busy .cwoa-wizard-catalog-host {
    opacity: 0.65;
    transition: opacity 0.15s ease;
}

.cwoa-wizard-loading--steps {
    font-weight: 600;
    color: var(--cwoa-muted);
}

.cwoa-wizard-loading,
.cwoa-wizard-error {
    margin: 0;
    font-size: var(--cwoa-fs);
    color: var(--cwoa-muted);
}

.cwoa-wizard-error {
    color: var(--cwoa-danger);
}

.cwoa-wizard-catalog-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-bottom: 6px;
}

.cwoa-wizard-label {
    font-weight: 600;
    color: var(--cwoa-text);
    flex-shrink: 0;
}

.cwoa-wizard-catalog-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 6px 8px;
    border-radius: var(--cwoa-radius-sm);
    border: 1px solid var(--cwoa-border);
    box-sizing: border-box;
    font-size: inherit;
    line-height: 1.35;
    min-height: 2.25rem;
}

.cwoa-wizard-table {
    width: 100%;
    border-collapse: collapse;
}

.cwoa-wizard-th {
    text-align: left;
    font-weight: 600;
    color: var(--cwoa-text);
    padding: 6px 12px 6px 0;
    vertical-align: middle;
    white-space: nowrap;
}

.cwoa-wizard-td {
    padding: 6px 0;
    vertical-align: middle;
}

.cwoa-wizard-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 6px 8px;
    border-radius: var(--cwoa-radius-sm);
    border: 1px solid var(--cwoa-border);
    box-sizing: border-box;
    font-size: inherit;
    line-height: 1.35;
    min-height: 2.25rem;
}

.cwoa-wizard-determined {
    color: var(--cwoa-text);
}

button.cwoa-wizard-edit-step {
    margin-left: 6px;
    padding: 0;
    border: none;
    background: none;
    color: var(--cwoa-accent);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    font-size: var(--cwoa-fs-sm);
    vertical-align: baseline;
}

button.cwoa-wizard-edit-step:hover {
    color: color-mix(in srgb, var(--cwoa-accent) 85%, black);
}

.cwoa-wizard-actions {
    margin-top: 4px;
}

.cwoa-vin-example-note {
    display: inline;
    color: var(--cwoa-muted);
}

.cwoa-candidate-dock {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    align-self: stretch;
    border: 1px solid var(--cwoa-border);
    border-radius: var(--cwoa-radius-lg);
    background: var(--cwoa-card);
    box-shadow: var(--cwoa-shadow-sm);
    padding: 0;
    overflow: hidden;
    transform-origin: top center;
    /* Без transition flex-* — при syncSearchBlocksBaselineMinHeight и смене ширины колонок док «подмигивал» ~0.42s */
    transition:
        opacity var(--cwoa-reveal-duration) var(--cwoa-motion-ease),
        transform var(--cwoa-reveal-duration) var(--cwoa-motion-ease),
        box-shadow var(--cwoa-reveal-duration) var(--cwoa-motion-ease);
}

.cwoa-candidate-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

/* Цепочка до горизонтального скролла таблицы — иначе ширина таблицы рвёт flex и скролл «не в обёртке» до reflow */
#cwoa-app .cwoa-candidate-inner--list,
#cwoa-app .cwoa-candidate-list,
#cwoa-app .cwoa-candidate-item,
#cwoa-app .cwoa-candidate-item-body {
    min-width: 0;
    max-width: 100%;
}

.cwoa-candidate-inner--loading {
    padding: 20px 16px;
    min-height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cwoa-surface);
}

.cwoa-candidate-inner--vin-unavailable {
    padding: clamp(14px, 2.5vw, 22px) clamp(16px, 3vw, 26px);
    min-height: 3.75rem;
    background: var(--cwoa-card);
}

.cwoa-candidate-inner--vin-unavailable .cwoa-tree-empty {
    line-height: 1.52;
}

.cwoa-candidate-loading-msg {
    margin: 0;
    font-size: var(--cwoa-fs);
    font-weight: 600;
    color: var(--cwoa-muted);
}

.cwoa-candidate-inner--list .cwoa-candidate-head {
    padding: clamp(8px, 1.5vw, 14px) clamp(10px, 2vw, 16px) clamp(6px, 1.2vw, 8px);
    background: var(--cwoa-card);
    border-bottom: 1px solid var(--cwoa-border);
}

.cwoa-candidate-inner--list .cwoa-candidate-head.cwoa-candidate-head--banner {
    padding-bottom: clamp(8px, 1.4vw, 12px);
}

.cwoa-candidate-inner--list .cwoa-candidate-title {
    text-transform: none;
    letter-spacing: normal;
}

.cwoa-am-standalone-candidate-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    min-width: 0;
}

.cwoa-am-standalone-candidate-head .cwoa-candidate-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.cwoa-am-standalone-candidate-head .cwoa-am-standalone-subnotice {
    margin: 0;
    flex: 0 0 100%;
    width: min(96%, 66rem);
    min-width: 0;
    max-width: 100%;
    align-self: center;
    font-size: var(--cwoa-fs-sm);
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    color: color-mix(in srgb, #9a5a00 78%, var(--cwoa-muted, #5c6370));
}

.cwoa-candidate-banner {
    margin: 0;
    padding: clamp(8px, 1.4vw, 12px) clamp(10px, 1.8vw, 14px);
    font-size: clamp(0.92rem, 2.4vw, 1.05rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--cwoa-text);
    background: linear-gradient(
        135deg,
        var(--cwoa-accent-soft) 0%,
        var(--cwoa-surface) 55%,
        var(--cwoa-card) 100%
    );
    border-left: 4px solid var(--cwoa-accent);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

/* Шапка списка кандидатов / строка AM: не больше двух визуальных строк; полный текст — data-cwoa-full + .cwoa-clamped-full-tip. */
#cwoa-app .cwoa-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
    min-width: 0;
}

#cwoa-app .cwoa-clamped-full-tip {
    cursor: help;
}

.cwoa-candidate-list {
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
}

.cwoa-candidate-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--cwoa-border-inner);
    border-radius: 6px;
    margin-inline: 4px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.cwoa-candidate-item:last-child {
    border-bottom: none;
}

.cwoa-candidate-item.is-selected {
    background: var(--cwoa-accent-soft);
    box-shadow: inset 0 0 0 2px var(--cwoa-accent);
}

.cwoa-candidate-name {
    margin: 0 0 10px;
    font-size: 1.07em;
    font-weight: 700;
    color: var(--cwoa-text);
    line-height: 1.35;
    min-width: 0;
}

.cwoa-candidate-table tbody tr.cwoa-candidate-param-row {
    cursor: pointer;
}

.cwoa-candidate-table tbody tr.cwoa-candidate-param-row:hover td {
    background: var(--cwoa-accent-muted);
}

.cwoa-candidate-table tbody tr.cwoa-candidate-param-row:focus-visible {
    outline: 2px solid var(--cwoa-accent);
    outline-offset: -2px;
}

.cwoa-candidate-item.is-selected .cwoa-candidate-table tbody tr.cwoa-candidate-param-row td {
    background: var(--cwoa-accent-soft);
}

.cwoa-candidate-param-row--empty {
    display: block;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px dashed var(--cwoa-border);
    background: var(--cwoa-card);
    cursor: pointer;
    outline: none;
}

.cwoa-candidate-param-row--empty:hover {
    background: var(--cwoa-accent-muted);
}

.cwoa-candidate-param-row--empty:focus-visible {
    outline: 2px solid var(--cwoa-accent);
    outline-offset: 2px;
}

.cwoa-candidate-item.is-selected .cwoa-candidate-param-row--empty {
    background: var(--cwoa-accent-soft);
    border-style: solid;
    border-color: var(--cwoa-accent);
}

.cwoa-candidate-item-body .cwoa-candidate-table-scroll {
    margin-top: 2px;
}

.cwoa-wizard-pending {
    color: var(--cwoa-muted);
}

.cwoa-candidate-inner--screenshot .cwoa-candidate-head {
    padding: 16px 16px 12px;
    border-bottom: none;
    background: var(--cwoa-card);
}

.cwoa-candidate-title {
    margin: 0;
    font-size: clamp(1rem, 2.6vw, 1.2em);
    line-height: 1.2;
    font-weight: 700;
    color: var(--cwoa-text);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    min-width: 0;
}

.cwoa-candidate-picker {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
}

.cwoa-candidate-picker-label {
    font-size: var(--cwoa-fs-xs);
    font-weight: 600;
    color: var(--cwoa-muted);
}

.cwoa-vehicle-pick {
    max-width: 100%;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid var(--cwoa-border);
}

.cwoa-candidate-inner--screenshot .cwoa-candidate-body {
    padding: 0 0 12px;
}

/* Legacy OEM vehicle row (guayaquil_table) */
.cwoa-candidate-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    border-radius: 8px;
    border: 1px solid var(--cwoa-border);
    background: var(--cwoa-card);
}

.cwoa-candidate-table-empty {
    margin: 0;
    padding: 8px 0 4px;
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-muted);
}

.cwoa-candidate-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--cwoa-fs);
    line-height: 1.4;
}

.cwoa-candidate-table thead tr {
    background: var(--cwoa-surface);
}

.cwoa-candidate-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--cwoa-text);
    border: 1px solid var(--cwoa-border);
    white-space: normal;
    /* break-word: целые слова; без overflow-wrap:anywhere (слишком агрессивные разрывы) */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    vertical-align: bottom;
}

.cwoa-candidate-table td {
    padding: 10px 12px;
    border: 1px solid var(--cwoa-border);
    color: var(--cwoa-text);
    vertical-align: top;
    /* На широких экранах — мягкий предел; на laptop/tablet без жёсткого max-width */
    max-width: min(560px, max(260px, 26vw));
    overflow-wrap: break-word;
    word-break: normal;
}

@media (max-width: 1280px) {
    .cwoa-candidate-table td,
    .cwoa-candidate-table-td--long {
        max-width: none;
    }
}

@media (min-width: 1281px) {
    .cwoa-candidate-table-td--long {
        max-width: min(720px, max(320px, 30vw));
    }
}

.cwoa-candidate-options-cell {
    max-width: min(100%, 20rem);
    font-size: var(--cwoa-fs-sm);
    line-height: 1.4;
}

.cwoa-candidate-options-cell .cwoa-options-preview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

/* Ограничение высоты любой ячейки таблицы кандидата: не даём одной длинной строке
 * растянуть весь блок кандидата по высоте. Полный текст — через hover-тултип
 * (#cwoa-cell-tooltip), на тач-устройствах — нативный title по long-press. */
.cwoa-candidate-cell-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
    min-width: 0;
}

/* Общий клампер для длинных значений в ячейках таблиц вне кандидата
 * (например колонка «Имя» в модалке узла). Полный текст — через hover-тултип
 * (#cwoa-cell-tooltip), TD должна иметь класс .cwoa-cell-long-tip и атрибут
 * data-cwoa-full. */
.cwoa-cell-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
    min-width: 0;
}

/* Подсказка пользователю, что у ячейки есть полная всплывающая информация
 * (тот же cursor: pointer, что и на «?» иконке деталей детали). */
.cwoa-cell-long-tip {
    cursor: pointer;
}

.cwoa-candidate-table td.cwoa-candidate-table-td--expandable {
    cursor: pointer;
}

/* Кастомный hover-тултип для длинных ячеек. Singleton в <body>, позиционируется JS. */
.cwoa-cell-tooltip[hidden] {
    display: none !important;
}

.cwoa-cell-tooltip {
    position: fixed;
    /* Должен быть выше .cwoa-unit-modal-root (z-index: 100050) и любых других
     * наших модалок, иначе тултип уходит под dialog, когда колонку «Имя»
     * раскрывают внутри модалки узла. */
    z-index: 100200;
    /* Подстраивается под свой текст (автоширина/высота), но не больше размера одной плитки поиска
     * (напр. «По VIN» — ≈220×200px на десктопе), чтобы не закрывать экран длинным списком опций.
     * Когда текст не помещается в эти рамки — свой внутренний скролл. */
    width: max-content;
    max-width: min(220px, calc(100vw - 16px));
    max-height: min(200px, 60vh);
    overflow-y: auto;
    padding: 10px 12px;
    background: var(--cwoa-card);
    color: var(--cwoa-text);
    border: 1px solid var(--cwoa-border);
    border-radius: var(--cwoa-radius);
    font-size: var(--cwoa-fs-sm);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: var(--cwoa-shadow-md);
    /* Интерактивна (не none) — когда текст не помещается и появляется внутренний скролл, нужно
     * уметь навести курсор на саму подсказку и прокрутить её колёсиком мыши без закрытия. */
    pointer-events: auto;
}

.cwoa-candidate-table-td--empty {
    color: var(--cwoa-faint);
}

.cwoa-candidate-cell-val {
    color: var(--cwoa-text);
    text-decoration: none;
}

.cwoa-candidate-cell-val--linklike {
    color: var(--cwoa-text);
    text-decoration: none;
}

.cwoa-candidate-actions {
    padding: 0 16px 14px;
    border-top: 1px solid var(--cwoa-border);
    background: var(--cwoa-card);
}

.cwoa-dock-confirm {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.cwoa-warning.cwoa-panel {
    margin-top: 0;
}

.cwoa-panel {
    padding: 14px 16px;
    border: 1px solid var(--cwoa-border);
    background: var(--cwoa-card);
    border-radius: var(--cwoa-radius-lg);
    box-shadow: var(--cwoa-shadow-sm);
}

/* Workspace под шапкой/поиском внутри портала */
.cwoa-workspace {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    /*
     * JS (cwoaWorkspaceAvailableHeightPx) уточняет min-height в два прохода: сперва щедрая
     * pre-scroll оценка (без учёта футера), затем — после того как якорный скролл уже состоялся —
     * точное значение с резервом под футер. Второй проход раньше применялся мгновенно и подвал
     * «впрыгивал» на место рывком. Плавный переход делает эту досадку плавной анимацией.
     */
    transition: min-height var(--cwoa-layout-duration, 0.95s) var(--cwoa-motion-ease, ease);
}

@media (prefers-reduced-motion: reduce) {
    .cwoa-workspace {
        transition: none;
    }
}

/* Блок каталога: скролл только внутри #cwoa-tree-mount и #cwoa-units-rail */
#cwoa-app .cwoa-catalog-info {
    position: relative;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    contain: layout style;
}

/*
 * Единый индикатор загрузки: по центру уже отрисованного блока (класс .cwoa-loading-host на контейнере).
 * Разметка оверлея — в JS; анимация — классы .cwoa-global-loading__* (маркер разметки в модалке и в #cwoa-app).
 */
#cwoa-app .cwoa-loading-host,
#cwoa-unit-modal .cwoa-loading-host {
    position: relative;
}

/*
 * Один центрированный спиннер на всю страницу на время смены языка портала — взамен набора
 * отдельных перекрывающихся блоков (страница всё равно перезагружается после смены).
 * See cwoaCatalogLocaleSwitchLoadingShow() in cwoa-app.js.
 */
.cwoa-locale-switch-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(1px);
}

.cwoa-locale-switch-overlay .cwoa-block-loading-overlay {
    position: static;
    inset: auto;
    background: transparent;
}

/* Самостоятельные стили визуала спиннера — body-level оверлей вне #cwoa-app/.cwoa-shell-body,
 * где уже есть свои стили для .cwoa-global-loading__*, поэтому дублируем визуал точечно. */
.cwoa-locale-switch-overlay .cwoa-global-loading__wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.cwoa-locale-switch-overlay .cwoa-global-loading__viz {
    position: relative;
    width: 52px;
    height: 52px;
    animation: cwoa-global-loading-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cwoa-locale-switch-overlay .cwoa-global-loading__halo {
    position: absolute;
    inset: -28%;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 50%,
        color-mix(in srgb, var(--cwoa-accent) 22%, transparent) 0%,
        transparent 72%
    );
    animation: cwoa-gl-halo 3.2s ease-in-out infinite;
}

.cwoa-locale-switch-overlay .cwoa-global-loading__orbit {
    position: absolute;
    inset: 0;
    animation: cwoa-gl-orbit 2.75s linear infinite;
    will-change: transform;
}

.cwoa-locale-switch-overlay .cwoa-global-loading__ball {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 11px;
    margin: -5.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95), var(--cwoa-accent) 52%, color-mix(in srgb, var(--cwoa-accent) 85%, black));
    box-shadow:
        0 0 18px color-mix(in srgb, var(--cwoa-accent) 55%, transparent),
        inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.cwoa-locale-switch-overlay .cwoa-global-loading__ball:nth-child(1) {
    transform: rotate(0deg) translateY(-19px);
}

.cwoa-locale-switch-overlay .cwoa-global-loading__ball:nth-child(2) {
    transform: rotate(120deg) translateY(-19px);
}

.cwoa-locale-switch-overlay .cwoa-global-loading__ball:nth-child(3) {
    transform: rotate(240deg) translateY(-19px);
}

@media (prefers-reduced-motion: reduce) {
    .cwoa-locale-switch-overlay .cwoa-global-loading__viz {
        animation: none !important;
    }

    .cwoa-locale-switch-overlay .cwoa-global-loading__orbit {
        animation-duration: 6s;
    }

    .cwoa-locale-switch-overlay .cwoa-global-loading__halo {
        animation: none !important;
        opacity: 0.65;
    }
}

#cwoa-app .cwoa-candidate-dock.cwoa-loading-host {
    min-height: 4.5rem;
}

#cwoa-app #cwoa-units-rail.cwoa-loading-host {
    min-height: 8rem;
}

#cwoa-app .cwoa-block-loading-overlay,
#cwoa-unit-modal .cwoa-block-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    background: color-mix(in srgb, var(--cwoa-card) 84%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: inherit;
}

/* Каталог: центр индикатора — в пересечении хоста с viewport (см. cwoaBlockLoadingShow, --cwoa-loading-lx/ly). */
#cwoa-app #cwoa-candidate-dock.cwoa-loading-host .cwoa-block-loading-overlay,
#cwoa-app #cwoa-catalog-info.cwoa-loading-host .cwoa-block-loading-overlay,
#cwoa-app #cwoa-units-rail.cwoa-loading-host .cwoa-block-loading-overlay,
#cwoa-app #cwoa-unit-am-dock.cwoa-loading-host .cwoa-block-loading-overlay,
#cwoa-unit-modal .cwoa-unit-modal-am-section.cwoa-loading-host .cwoa-block-loading-overlay,
#cwoa-unit-modal #cwoa-unit-modal-parts-wrap.cwoa-loading-host .cwoa-block-loading-overlay {
    display: block;
    min-height: 100%;
}

#cwoa-app #cwoa-candidate-dock.cwoa-loading-host .cwoa-block-loading-overlay .cwoa-global-loading__wrap,
#cwoa-app #cwoa-catalog-info.cwoa-loading-host .cwoa-block-loading-overlay .cwoa-global-loading__wrap,
#cwoa-app #cwoa-units-rail.cwoa-loading-host .cwoa-block-loading-overlay .cwoa-global-loading__wrap,
#cwoa-app #cwoa-unit-am-dock.cwoa-loading-host .cwoa-block-loading-overlay .cwoa-global-loading__wrap,
#cwoa-unit-modal .cwoa-unit-modal-am-section.cwoa-loading-host .cwoa-block-loading-overlay .cwoa-global-loading__wrap,
#cwoa-unit-modal #cwoa-unit-modal-parts-wrap.cwoa-loading-host .cwoa-block-loading-overlay .cwoa-global-loading__wrap {
    position: absolute;
    left: var(--cwoa-loading-lx, 50%);
    top: var(--cwoa-loading-ly, 50%);
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

/* Модалка узла (каталог): запрос аналогов — только спиннер над таблицей OEM, список не затемнять. */
#cwoa-unit-modal #cwoa-unit-modal-parts-wrap.cwoa-loading-host .cwoa-block-loading-overlay.cwoa-block-loading-overlay--ghost {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}

#cwoa-app .cwoa-block-loading-overlay .cwoa-global-loading__wrap,
#cwoa-unit-modal .cwoa-block-loading-overlay .cwoa-global-loading__wrap {
    pointer-events: none;
}

#cwoa-unit-modal .cwoa-global-loading__viz {
    position: relative;
    width: 52px;
    height: 52px;
}

#cwoa-unit-modal .cwoa-global-loading__halo {
    position: absolute;
    inset: -28%;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 50%,
        color-mix(in srgb, var(--cwoa-accent) 22%, transparent) 0%,
        transparent 72%
    );
    animation: cwoa-gl-halo 3.2s ease-in-out infinite;
}

#cwoa-unit-modal .cwoa-global-loading__orbit {
    position: absolute;
    inset: 0;
    animation: cwoa-gl-orbit 2.75s linear infinite;
    will-change: transform;
}

#cwoa-unit-modal .cwoa-global-loading__ball {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 11px;
    margin: -5.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95), var(--cwoa-accent) 52%, color-mix(in srgb, var(--cwoa-accent) 85%, black));
    box-shadow:
        0 0 18px color-mix(in srgb, var(--cwoa-accent) 55%, transparent),
        inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

#cwoa-unit-modal .cwoa-global-loading__ball:nth-child(1) {
    transform: rotate(0deg) translateY(-19px);
}

#cwoa-unit-modal .cwoa-global-loading__ball:nth-child(2) {
    transform: rotate(120deg) translateY(-19px);
}

#cwoa-unit-modal .cwoa-global-loading__ball:nth-child(3) {
    transform: rotate(240deg) translateY(-19px);
}

/*
 * Не анимировать transform на .cwoa-global-loading__wrap: для блоков с --cwoa-loading-lx/ly
 * на wrap задан translate(-50%,-50%); keyframes cwoa-global-loading-in перебивают transform →
 * индикатор уезжает/обрезается (модалка «A», каталог). Анимация входа — на .cwoa-global-loading__viz
 * (как у .cwoa-minimal-main .cwoa-shell-body ниже).
 */
#cwoa-unit-modal .cwoa-block-loading-overlay .cwoa-global-loading__viz {
    animation: cwoa-global-loading-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#cwoa-unit-modal #cwoa-unit-modal-parts-wrap.cwoa-loading-host {
    min-height: 4.5rem;
}

#cwoa-unit-modal .cwoa-unit-modal-am-section.cwoa-loading-host {
    min-height: 120px;
}

#cwoa-app .cwoa-catalog-info .cwoa-main-grid {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    align-items: stretch;
}

#cwoa-app .cwoa-catalog-info .cwoa-main-grid > .cwoa-panel {
    min-height: 0;
}

/* Full-width tree block directly under search + candidate row */
.cwoa-workspace-below-search {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
}

.cwoa-upgrade-notice {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: var(--cwoa-card);
    border: 1px solid var(--cwoa-border);
    border-radius: var(--cwoa-radius);
    box-shadow: var(--cwoa-shadow-sm);
}

.cwoa-upgrade-notice-text {
    margin: 0;
    font-size: var(--cwoa-fs-sm);
    line-height: 1.45;
}

.cwoa-upgrade-notice-link {
    font-weight: 600;
    white-space: nowrap;
}

/* Account + usage row (inside site head, beside logo) */
.cwoa-site-head .cwoa-account-bar {
    display: flex;
    /*
     * Perf: nowrap forced the __actions row (locale switcher, Кабинет/Выйти)
     * to size-clip invisibly whenever a real logged-in name + both quota
     * chips didn't fit the panel between the 1023px/520px wrap breakpoints
     * below — those assumed a short "admin"-length name; real display names
     * broke it. Wrap here so the row always degrades onto a second line
     * instead of silently losing controls at in-between viewport widths.
     */
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 10px;
    margin: 0;
    padding: 12px 16px;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    box-sizing: border-box;
    min-width: 0;
}

.cwoa-site-head--account-only .cwoa-account-bar.cwoa-panel {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    justify-content: space-between;
}

/* Shortcode / “account bar only” page — bar uses .cwoa-catalog-shell width (no extra horizontal padding) */
.cwoa-account-bar-embed {
    width: 100%;
    box-sizing: border-box;
}

.cwoa-account-bar-embed .cwoa-account-bar.cwoa-panel {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.cwoa-account-bar__metrics {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cwoa-account-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    flex: 0 0 auto;
    justify-content: flex-end;
}

/*
 * Защита под удаление overflow-x:auto у .cwoa-site-head: на планшетах/узких ноутбуках
 * разрешаем actions переноситься внутри бара, чтобы шапка не толкала viewport
 * горизонтально. Десктоп ≥1024px не затронут.
 */
@media (max-width: 1023px) {
    .cwoa-account-bar__actions {
        flex-wrap: wrap;
        min-width: 0;
        justify-content: flex-end;
    }
}

/*
 * На узких экранах actions (переключатель языка + кнопка входа) не помещаются в одну
 * строку рядом с текстом-подсказкой: flex: 0 0 auto держит их интринсик-ширину, и бар
 * (nowrap) выталкивает блок за левый край. Переносим actions на всю ширину под текстом.
 */
@media (max-width: 520px) {
    .cwoa-site-head .cwoa-account-bar {
        flex-wrap: wrap;
    }

    .cwoa-account-bar__actions {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

.cwoa-account-bar__chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: var(--cwoa-fs-sm);
    line-height: 1.35;
    color: var(--cwoa-text);
    background: var(--cwoa-surface);
    border: 1px solid var(--cwoa-border-inner);
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.cwoa-account-bar__chip--quota[title] {
    cursor: help;
}

.cwoa-account-bar__chip--user {
    font-weight: 600;
}

.cwoa-account-bar__chip--plan {
    color: var(--cwoa-accent);
    border-color: color-mix(in srgb, var(--cwoa-accent) 35%, var(--cwoa-border-inner));
    background: color-mix(in srgb, var(--cwoa-accent) 8%, var(--cwoa-surface));
}

.cwoa-account-bar__chip--notice {
    white-space: normal;
    max-width: min(100%, 58ch);
    border-color: color-mix(in srgb, #c46a00 38%, var(--cwoa-border-inner));
    background: color-mix(in srgb, #fff3df 70%, var(--cwoa-surface));
    color: color-mix(in srgb, #8f4d00 84%, var(--cwoa-text));
}

.cwoa-account-bar__guest {
    margin: 0;
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-muted);
    line-height: 1.4;
    max-width: min(100%, 42ch);
}

/*
 * Язык в шапке: тот же кастомный select, что в «Идентификация по параметрам» (см. .cwoa-params-block выше).
 * В каталоге --cwoa-tile-control-* задаёт #cwoa-search-row; в шапке темы — локально на обёртке.
 */
.cwoa-account-bar__actions .cwoa-account-locale-inline {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: min(100%, 20rem);
    --cwoa-params-select-surface: color-mix(in srgb, var(--cwoa-card) 94%, white);
    --cwoa-tile-control-size: var(--cwoa-fs-sm);
    --cwoa-tile-control-height: 2rem;
    --cwoa-tile-control-padding: 0.45rem 0.65rem;
}

.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-native-select-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(100%) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

/*
 * Язык: триггер и список как подсказки VIN (синий текст, панель .cwoa-card, тень без «поля»).
 */
.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-custom-select__trigger {
    width: auto;
    min-width: min(100%, 9.5rem);
    max-width: 100%;
    min-height: 0;
    height: auto;
    padding: 2px 6px 2px 2px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--cwoa-accent);
    font-size: 16px;
    font-weight: 400;
}

.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-custom-select__chevron {
    color: var(--cwoa-accent);
    opacity: 0.85;
}

.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-custom-select.is-open .cwoa-custom-select__trigger,
.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-custom-select__trigger:focus-visible {
    border: none;
    box-shadow: none;
    outline: none;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.cwoa-account-bar__actions .cwoa-account-locale-inline .cwoa-custom-select__menu {
    right: auto;
    min-width: max(100%, 12rem);
    width: max-content;
    max-width: min(90vw, 22rem);
}

/*
 * Выпадающий язык: на WooCommerce / теме шапка вне #cwoa-app (.cwoa-minimal-outer), поэтому дублируем правила
 * и вешаем body.cwoa-locale-dd-open из cwoa-app.js — иначе overflow-x:auto на .cwoa-site-head режет меню.
 */
#cwoa-app .cwoa-site-head.cwoa-site-head--locale-dd-open,
body.cwoa-locale-dd-open .cwoa-site-head {
    position: relative;
    z-index: 50001;
    isolation: isolate;
    overflow-x: visible;
    overflow-y: visible;
}

body.cwoa-locale-dd-open .cwoa-catalog-portal__head.cwoa-top {
    position: relative;
    z-index: 50001;
    overflow: visible;
}

#cwoa-app .cwoa-site-head--locale-dd-open .cwoa-account-locale-inline .cwoa-custom-select.is-open,
body.cwoa-locale-dd-open .cwoa-account-locale-inline .cwoa-custom-select.is-open {
    z-index: 1;
}

#cwoa-app .cwoa-site-head--locale-dd-open .cwoa-account-locale-inline .cwoa-custom-select__menu,
body.cwoa-locale-dd-open .cwoa-account-locale-inline .cwoa-custom-select__menu {
    z-index: 2;
}

.cwoa-catalog-shell.cwoa-account-bar-embed.cwoa-catalog-shell--locale-dd-open {
    position: relative;
    z-index: 50001;
    isolation: isolate;
    overflow: visible;
}

#cwoa-app .cwoa-catalog-shell.cwoa-catalog-shell--locale-dd-open {
    overflow: visible;
}

/* Shortcode-only page: same dropdown stacking when .cwoa-site-head is absent */
.cwoa-catalog-shell.cwoa-catalog-shell--locale-dd-open .cwoa-account-locale-inline .cwoa-custom-select.is-open {
    z-index: 1;
}

.cwoa-catalog-shell.cwoa-catalog-shell--locale-dd-open .cwoa-account-locale-inline .cwoa-custom-select__menu {
    z-index: 2;
}

/* No JS: нативный select — как ссылка в шапке */
.cwoa-account-bar__actions .cwoa-account-locale-inline select.cwoa-catalog-locale-select:not(.cwoa-native-select-hidden) {
    max-width: min(100%, 16rem);
    min-height: 0;
    height: auto;
    padding: 2px 6px 2px 2px;
    font: inherit;
    font-size: var(--cwoa-tile-control-size);
    font-weight: 500;
    color: var(--cwoa-accent);
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    box-shadow: none;
}

.cwoa-subscribe-box {
    margin: 1em 0;
    padding: 16px 18px;
}

.cwoa-subscribe-box .cwoa-action {
    display: inline-block;
}

.cwoa-subscribe-active {
    margin: 0;
    font-size: var(--cwoa-fs);
}

.cwoa-subscribe-error {
    margin: 0.5em 0;
    color: var(--cwoa-danger, #b32d2e);
    font-size: var(--cwoa-fs-sm);
}

.cwoa-landing-auth {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 16px;
    padding: 12px 16px;
}

.cwoa-landing-user {
    font-weight: 600;
    margin-right: 4px;
}

.cwoa-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin: 1.25rem 0 clamp(10px, 1.8vw, 20px);
}

.cwoa-pricing-card {
    margin: 0;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

/* Лендинг [cwoa_pricing]: та же полоса с иллюстрацией, что и в подписках */
.cwoa-pricing-card--landing {
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.cwoa-pricing-card--landing .cwoa-pricing-card__landing-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding: 18px 16px;
    flex: 1;
    min-width: 0;
}

.cwoa-pricing-title {
    margin: 0;
    font-size: var(--cwoa-fs-md);
    font-weight: 700;
}

.cwoa-pricing-price {
    font-size: var(--cwoa-fs);
    font-weight: 600;
}

/* WooCommerce → Subscriptions: полная ширина, каждый тариф — одна компактная строка */
.cwoa-pricing-grid--wc-plans {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 1rem 0;
    --cwoa-plan-buy-col-width: 78px;
}

.cwoa-pricing-grid--wc-plans .cwoa-pricing-card--plan-h {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    overflow: hidden;
    min-height: 0;
    position: relative;
}

/* Только строки с модалкой описания (не конструктор тарифов). */
.cwoa-pricing-card--has-desc[data-cwoa-plan-modal] {
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

/* Постоянная полоска слева — как узел дерева каталога; при hover усиливается. */
.cwoa-pricing-grid--wc-plans .cwoa-pricing-card--plan-h[data-cwoa-plan-modal] {
    box-shadow:
        var(--cwoa-shadow-sm),
        inset 3px 0 0 rgba(var(--cwoa-accent-rgb), 0.28);
}

.cwoa-pricing-grid--wc-plans .cwoa-pricing-card--has-desc[data-cwoa-plan-modal]:hover,
.cwoa-pricing-grid--wc-plans .cwoa-pricing-card--has-desc[data-cwoa-plan-modal]:focus-within {
    background:
        linear-gradient(rgba(var(--cwoa-accent-rgb), 0.14), rgba(var(--cwoa-accent-rgb), 0.14)),
        linear-gradient(var(--cwoa-card), var(--cwoa-card));
    border-color: rgba(var(--cwoa-accent-rgb), 0.48);
    box-shadow:
        var(--cwoa-shadow-sm),
        inset 4px 0 0 rgba(var(--cwoa-accent-rgb), 0.72);
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .cwoa-pricing-grid--wc-plans .cwoa-pricing-card--has-desc[data-cwoa-plan-modal]:hover,
    .cwoa-pricing-grid--wc-plans .cwoa-pricing-card--has-desc[data-cwoa-plan-modal]:focus-within {
        transform: none;
    }
}

/* Unmistakable hover for subscription rows, independent from outer wrappers. */
.cwoa-pricing-grid--wc-plans .cwoa-pricing-card--has-desc[data-cwoa-plan-modal]:hover .cwoa-pricing-card__body,
.cwoa-pricing-grid--wc-plans .cwoa-pricing-card--has-desc[data-cwoa-plan-modal]:focus-within .cwoa-pricing-card__body {
    background: rgba(var(--cwoa-accent-rgb), 0.09) !important;
}

.cwoa-pricing-grid--wc-plans .cwoa-pricing-card--has-desc[data-cwoa-plan-modal]:hover .cwoa-pricing-title,
.cwoa-pricing-grid--wc-plans .cwoa-pricing-card--has-desc[data-cwoa-plan-modal]:focus-within .cwoa-pricing-title {
    color: rgb(var(--cwoa-accent-rgb)) !important;
}

.cwoa-pricing-grid--wc-plans .cwoa-pricing-card--plan-h[data-cwoa-plan-modal]:hover .cwoa-pricing-title-row::after,
.cwoa-pricing-grid--wc-plans .cwoa-pricing-card--plan-h[data-cwoa-plan-modal]:focus-within .cwoa-pricing-title-row::after {
    color: rgb(var(--cwoa-accent-rgb));
    opacity: 1;
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .cwoa-pricing-grid--wc-plans .cwoa-pricing-card--plan-h[data-cwoa-plan-modal]:hover .cwoa-pricing-title-row::after,
    .cwoa-pricing-grid--wc-plans .cwoa-pricing-card--plan-h[data-cwoa-plan-modal]:focus-within .cwoa-pricing-title-row::after {
        transform: none;
    }
}

.cwoa-pricing-grid--wc-plans .cwoa-pricing-card--plan-h[data-cwoa-plan-modal] .cwoa-pricing-title-row::after {
    content: '\203A';
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    margin-left: 6px;
    font-size: 1.35em;
    font-weight: 300;
    line-height: 1;
    color: rgb(var(--cwoa-accent-rgb));
    opacity: 0.42;
    transition: opacity 0.18s ease, color 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

.cwoa-pricing-grid--wc-plans .cwoa-pricing-card--plan-h[data-cwoa-plan-modal] .cwoa-pricing-title-row {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.cwoa-pricing-card--has-desc[data-cwoa-plan-modal]:focus {
    outline: 2px solid var(--cwoa-accent);
    outline-offset: 2px;
}

.cwoa-pricing-card--has-desc[data-cwoa-plan-modal]:focus:not(:focus-visible) {
    outline: none;
}

.cwoa-pricing-card--has-desc[data-cwoa-plan-modal]:focus-visible {
    outline: 2px solid var(--cwoa-accent);
    outline-offset: 2px;
}

/* WC plans: купленные — лёгкий фон + нейтральная полоска; активная — акцент. */
.cwoa-pricing-grid--wc-plans .cwoa-pricing-card--plan-h.cwoa-pricing-card--owned:not(.cwoa-pricing-card--lead-pass) {
    background: color-mix(in srgb, var(--cwoa-muted) 8%, var(--cwoa-card));
    box-shadow:
        var(--cwoa-shadow-sm),
        inset 2px 0 0 color-mix(in srgb, var(--cwoa-muted) 50%, var(--cwoa-border));
}

.cwoa-pricing-grid--wc-plans .cwoa-pricing-card--plan-h.cwoa-pricing-card--lead-pass {
    background: color-mix(in srgb, var(--cwoa-accent) 9%, var(--cwoa-card));
    box-shadow:
        var(--cwoa-shadow-sm),
        inset 3px 0 0 var(--cwoa-accent);
}

.cwoa-pricing-card__owned-ribbon,
.cwoa-pricing-card__lead-ribbon {
    position: absolute;
    top: 8px;
    z-index: 5;
    max-width: calc(100% - 100px);
    font-size: 0.62rem;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    pointer-events: none;
    box-shadow: var(--cwoa-shadow-sm);
}

.cwoa-pricing-card__owned-ribbon {
    right: 10px;
    color: var(--cwoa-accent);
    background: color-mix(in srgb, var(--cwoa-accent) 16%, var(--cwoa-card));
    border: 1px solid color-mix(in srgb, var(--cwoa-accent) 28%, var(--cwoa-border));
}

.cwoa-pricing-card--has-usage .cwoa-pricing-card__owned-ribbon {
    right: calc(var(--cwoa-plan-buy-col-width, 78px) + 10px);
}

.cwoa-pricing-card__lead-ribbon {
    left: 10px;
    color: var(--cwoa-text);
    background: color-mix(in srgb, var(--cwoa-accent-soft) 88%, var(--cwoa-surface));
    border: 1px solid color-mix(in srgb, var(--cwoa-accent) 22%, var(--cwoa-border));
}

.cwoa-pricing-card--lead-pass.cwoa-pricing-card--owned .cwoa-pricing-card__lead-ribbon {
    left: 10px;
    top: 36px;
}

.cwoa-wc-plans__owned-cta {
    display: block;
    margin-top: 6px;
}

.cwoa-wc-plans__owned-cta .cwoa-action--ghost {
    width: fit-content;
}

/* Активный тариф: полосы остатка (2 или 3 горизонтальные зоны по высоте полосы) */
.cwoa-pricing-card__usage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--cwoa-plan-buy-col-width, 78px);
    display: flex;
    flex-direction: column;
    z-index: 2;
    pointer-events: auto;
    box-sizing: border-box;
    border-left: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    background: color-mix(in srgb, currentColor 9%, transparent);
}

.cwoa-pricing-card__usage-band {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3px 5px;
    box-sizing: border-box;
    border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    cursor: help;
}

.cwoa-pricing-card__usage-label {
    display: block;
    margin: 0 0 3px;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--cwoa-text) 70%, transparent);
}

.cwoa-pricing-card__usage-band:last-child {
    border-bottom: none;
}

.cwoa-pricing-card__usage-track {
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: color-mix(in srgb, CanvasText 32%, transparent);
    overflow: hidden;
    box-shadow: inset 0 1px 2px color-mix(in srgb, CanvasText 18%, transparent);
}

.cwoa-pricing-card__usage-fill {
    height: 100%;
    width: 0;
    min-width: 0;
    border-radius: 3px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--woocommerce-pay-button-color, var(--wp-admin-theme-color, #00a32a)) 82%, #fff),
        var(--woocommerce-pay-button-color, var(--wp-admin-theme-color, #00a32a))
    );
    box-shadow:
        0 0 0 1px color-mix(in srgb, Canvas 55%, transparent),
        0 1px 3px color-mix(in srgb, CanvasText 22%, transparent);
    transition: width 0.35s var(--cwoa-motion-ease, ease-out);
    min-width: 2px;
}

/* Usage colors by segment type (VIN / OEM / time). */
.cwoa-pricing-grid--wc-plans {
    --cwoa-usage-vin: #2271b1;
    --cwoa-usage-oem: #1f9a8a;
    --cwoa-usage-am: #6f56d9;
    --cwoa-usage-time: #cc8a1d;
    --cwoa-usage-params: #1d7a5f;
    --cwoa-usage-suppliers: #c2570f;
    --cwoa-usage-ai: #b5308f;
}

.cwoa-pricing-card__usage-band--vin .cwoa-pricing-card__usage-fill {
    background: linear-gradient(90deg, #58a1da, var(--cwoa-usage-vin)) !important;
}

.cwoa-pricing-card__usage-band--oem .cwoa-pricing-card__usage-fill {
    background: linear-gradient(90deg, #53b8ab, var(--cwoa-usage-oem)) !important;
}

.cwoa-pricing-card__usage-band--am .cwoa-pricing-card__usage-fill {
    background: linear-gradient(90deg, #9c8bf0, var(--cwoa-usage-am)) !important;
}

.cwoa-pricing-card__usage-band--time .cwoa-pricing-card__usage-fill {
    background: linear-gradient(90deg, #e3b15e, var(--cwoa-usage-time)) !important;
}

.cwoa-pricing-card__usage-band--params .cwoa-pricing-card__usage-fill {
    background: linear-gradient(90deg, #5fc4a4, var(--cwoa-usage-params)) !important;
}

.cwoa-pricing-card__usage-band--suppliers .cwoa-pricing-card__usage-fill {
    background: linear-gradient(90deg, #e8a15c, var(--cwoa-usage-suppliers)) !important;
}

.cwoa-pricing-card__usage-band--ai .cwoa-pricing-card__usage-fill {
    background: linear-gradient(90deg, #e07fc4, var(--cwoa-usage-ai)) !important;
}

.cwoa-pricing-card__status-row {
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cwoa-plan-usage-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 88%, transparent);
    border-radius: var(--cwoa-radius);
    background: color-mix(in srgb, var(--cwoa-card) 94%, var(--cwoa-accent-soft));
    font-size: var(--cwoa-fs-xs);
}

.cwoa-plan-usage-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cwoa-plan-usage-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.cwoa-plan-usage-legend__dot--vin { background: var(--cwoa-usage-vin); }
.cwoa-plan-usage-legend__dot--oem { background: var(--cwoa-usage-oem); }
.cwoa-plan-usage-legend__dot--am { background: var(--cwoa-usage-am); }
.cwoa-plan-usage-legend__dot--time { background: var(--cwoa-usage-time); }

.cwoa-wc-plans__cta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 6px 0 0;
}

.cwoa-wc-plans__cta-row .cwoa-wc-plans__owned-cta {
    margin-top: 0;
}

.cwoa-wc-plans__cta-row .cwoa-action--placeholder {
    visibility: hidden;
    pointer-events: none;
}

.cwoa-wc-plans__owned-note {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--cwoa-fs-sm);
    color: color-mix(in srgb, var(--cwoa-accent) 72%, var(--cwoa-text));
}

.cwoa-plan-current-line {
    margin: 0;
    text-align: center;
    font-size: var(--cwoa-fs-sm);
    font-weight: 600;
    line-height: 1.15;
    color: color-mix(in srgb, var(--cwoa-accent) 72%, var(--cwoa-text));
}

.cwoa-pricing-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
    grid-column: 1 / span 2;
    grid-row: 1;
}

.cwoa-wc-plans__meta--inline {
    margin: 0;
}

.cwoa-wc-plans__owned-note--inline {
    justify-self: center;
    white-space: nowrap;
    font-weight: 600;
}

/* Title row overrides: keep "Already active" between title and price. */
.cwoa-pricing-title-row .cwoa-pricing-title {
    grid-column: 1;
    grid-row: 1;
}

.cwoa-pricing-title-row .cwoa-wc-plans__owned-note--inline {
    grid-column: 2;
    grid-row: 1;
}

.cwoa-pricing-title-row .cwoa-pricing-price {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
}

@media (prefers-color-scheme: dark) {
    .cwoa-pricing-card__usage-track {
        background: color-mix(in srgb, CanvasText 42%, transparent);
    }

    .cwoa-pricing-card__usage-fill {
        background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--woocommerce-pay-button-color, #6fdc8c) 55%, #163d24),
            var(--woocommerce-pay-button-color, #3dd68c)
        );
    }
}

@media (max-width: 520px) {
    .cwoa-pricing-card__usage {
        width: min(22%, 4.5rem);
    }

    .cwoa-pricing-card__usage-track {
        height: 5px;
    }

    .cwoa-pricing-card__usage-label {
        font-size: 9px;
    }
}

.cwoa-pricing-card__media {
    flex: 0 0 88px;
    width: 88px;
    min-height: 100%;
    margin: 0;
    background: linear-gradient(
        155deg,
        color-mix(in srgb, var(--cwoa-accent) 18%, var(--cwoa-surface)) 0%,
        var(--cwoa-surface-strong) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cwoa-pricing-card__media--oem,
.cwoa-pricing-card__media--art-oem {
    background: linear-gradient(
        155deg,
        color-mix(in srgb, var(--cwoa-accent) 22%, var(--cwoa-surface)) 0%,
        color-mix(in srgb, var(--cwoa-accent) 5%, var(--cwoa-surface-strong)) 100%
    );
}

.cwoa-pricing-card__media--am,
.cwoa-pricing-card__media--art-am {
    background: linear-gradient(
        155deg,
        color-mix(in srgb, var(--cwoa-accent) 12%, var(--cwoa-surface)) 0%,
        color-mix(in srgb, currentColor 8%, var(--cwoa-surface-strong)) 100%
    );
}

.cwoa-pricing-card__media--art-full {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--cwoa-accent) 18%, var(--cwoa-surface)) 0%,
        color-mix(in srgb, var(--cwoa-accent) 8%, var(--cwoa-surface-strong)) 50%,
        color-mix(in srgb, currentColor 6%, var(--cwoa-surface-strong)) 100%
    );
}

.cwoa-pricing-card__media img.cwoa-pricing-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 72px;
}

.cwoa-pricing-card__placeholder-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    opacity: 0.9;
    color: color-mix(in srgb, var(--cwoa-accent) 50%, var(--cwoa-text));
}

.cwoa-plan-art-svg {
    width: 52px;
    height: 52px;
    max-width: 85%;
    flex-shrink: 0;
    opacity: 0.92;
    color: color-mix(in srgb, var(--cwoa-accent) 50%, var(--cwoa-text));
}

.cwoa-pricing-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 8px 12px;
    flex: 1;
    min-width: 0;
}

.cwoa-pricing-card--has-usage .cwoa-pricing-card__body {
    grid-template-columns: minmax(0, 1fr) auto var(--cwoa-plan-buy-col-width, 78px);
    padding-right: 12px;
}

.cwoa-pricing-card--plan-h .cwoa-pricing-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: var(--cwoa-fs-md, 1.05rem);
    line-height: 1.25;
}

.cwoa-pricing-card--plan-h .cwoa-wc-plans__meta {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: var(--cwoa-fs-xs, 0.8125rem);
    color: var(--cwoa-muted);
    line-height: 1.35;
}

.cwoa-pricing-card--plan-h .cwoa-pricing-price {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    font-size: var(--cwoa-fs-sm);
    white-space: nowrap;
    align-self: center;
}

/* Subscriptions row override: title + "Already active" + price on one line, no overlap. */
.cwoa-pricing-card--plan-h .cwoa-pricing-title-row {
    grid-column: 1 / span 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    width: 100%;
}

.cwoa-pricing-card--plan-h .cwoa-pricing-title-row .cwoa-pricing-title {
    grid-column: 1;
    grid-row: 1;
}

.cwoa-pricing-card--plan-h .cwoa-pricing-title-row .cwoa-wc-plans__owned-note--inline {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    white-space: nowrap;
}

.cwoa-pricing-card--plan-h .cwoa-pricing-title-row .cwoa-pricing-price {
    grid-column: 3 !important;
    grid-row: 1;
    margin: 0;
    white-space: nowrap;
    justify-self: end;
    align-self: center;
}

.cwoa-pricing-card--plan-h .cwoa-pricing-title-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

/* Cancel legacy price placement for price moved into title row. */
.cwoa-pricing-card--plan-h .cwoa-pricing-title-row > .cwoa-pricing-price {
    grid-row: 1 !important;
}

.cwoa-pricing-card--plan-h .cwoa-action {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    margin: 0;
    padding: 6px 14px;
    font-size: var(--cwoa-fs-sm);
    white-space: nowrap;
    text-align: center;
}

/* Lead pass uses the same card look as regular plan rows. */

.cwoa-wc-plans__passes--row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.cwoa-wc-plans__passes--row li {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--cwoa-radius);
    border: 1px solid var(--cwoa-border-inner);
    background: var(--cwoa-card, var(--cwoa-surface));
    box-sizing: border-box;
}

.cwoa-wc-plans__intro {
    margin: 0 0 1rem;
    max-width: 65ch;
    font-size: var(--cwoa-fs-sm);
    line-height: 1.55;
    color: var(--cwoa-muted);
}

/* Consistent heading scale for the subscription/plans page: avoid raw h3/h4/h5 browser defaults. */
.cwoa-wc-plans > h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1.3;
}

.cwoa-wc-plans__section {
    margin: 1.5rem 0;
}

/* Secondary-tier plans (META_SECONDARY_TIER): collapsed by default under a "More plans" toggle,
   kept visually lighter than the primary pricing grid above it. */
.cwoa-wc-plans__more {
    margin: 1.1rem 0 0;
}

.cwoa-wc-plans__more-summary {
    cursor: pointer;
    font-size: var(--cwoa-fs-sm);
    font-weight: 600;
    color: var(--cwoa-accent);
    padding: 0.4rem 0;
    list-style: none;
    user-select: none;
}

.cwoa-wc-plans__more-summary::-webkit-details-marker {
    display: none;
}

.cwoa-wc-plans__more-summary::before {
    content: "+ ";
}

.cwoa-wc-plans__more[open] > .cwoa-wc-plans__more-summary::before {
    content: "\2212 ";
}

.cwoa-pricing-grid--secondary {
    margin-top: 0.75rem;
    opacity: 0.92;
}

.cwoa-wc-plans__section-title {
    margin: 0 0 0.35rem;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.3;
}

.cwoa-wc-plans__section-subtitle {
    margin: 0.75rem 0 0.35rem;
    font-size: var(--cwoa-fs-sm);
    font-weight: 700;
    line-height: 1.3;
    color: var(--cwoa-muted);
}

.cwoa-wc-plans__section-lead {
    margin: 0 0 1rem;
    max-width: 65ch;
    font-size: var(--cwoa-fs-sm);
    line-height: 1.55;
    color: var(--cwoa-muted);
}

.cwoa-wc-plans__pass-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.35rem;
}

.cwoa-wc-plans__queue {
    font-weight: 650;
    color: var(--cwoa-text);
}

.cwoa-wc-plans__plan-name {
    font-weight: 650;
}

.cwoa-wc-plans__catalog {
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-muted);
}

.cwoa-wc-plans__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 0.4rem;
}

.cwoa-wc-plans__badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: var(--cwoa-fs-xs);
    font-weight: 600;
    line-height: 1.35;
    border-radius: 999px;
    border: 1px solid var(--cwoa-border-inner);
    background: var(--cwoa-surface);
    color: var(--cwoa-text);
}

.cwoa-wc-plans__badge--current {
    border-color: color-mix(in srgb, var(--cwoa-accent) 35%, var(--cwoa-border));
    background: var(--cwoa-accent-soft);
    color: var(--cwoa-text);
}

.cwoa-wc-plans__pass-meta {
    font-size: var(--cwoa-fs-sm);
    line-height: 1.45;
    color: color-mix(in srgb, var(--cwoa-text) 90%, var(--cwoa-muted));
}

.cwoa-wc-plans__pass-meta a {
    font-weight: 600;
    color: var(--cwoa-accent);
    text-decoration: none;
}

.cwoa-wc-plans__pass-meta a:hover,
.cwoa-wc-plans__pass-meta a:focus-visible {
    text-decoration: underline;
    outline: none;
}

@media (max-width: 520px) {
    .cwoa-pricing-card__media {
        flex: 0 0 72px;
        width: 72px;
    }

    .cwoa-pricing-card__body {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        column-gap: 10px;
        padding: 8px 10px;
    }

    .cwoa-pricing-card--has-usage .cwoa-pricing-card__body {
        padding-right: calc(min(22%, 4.5rem) + 10px);
    }

    .cwoa-pricing-card--plan-h .cwoa-pricing-price {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .cwoa-pricing-card--plan-h .cwoa-action {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: stretch;
        margin-top: 4px;
    }
}

/* Модалка описания тарифа — визуально ближе к теме / WooCommerce (не только токены каталога) */
.cwoa-plan-desc-modal[hidden],
#cwoa-plan-desc-modal.cwoa-plan-desc-modal[hidden] {
    display: none !important;
}

/*
 * ID + !important: перебить тему и держать слой относительно viewport (JS переносит узел в body).
 * Иначе transform у предков WooCommerce ломает position:fixed — окно не по центру, подложка «дрожит».
 */
#cwoa-plan-desc-modal.cwoa-plan-desc-modal:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100051 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: max(clamp(12px, 3vw, 28px), env(safe-area-inset-top, 0px))
        clamp(12px, 3vw, 28px)
        max(clamp(12px, 3vw, 28px), env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    font-family: inherit;
}

.cwoa-plan-desc-modal__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--cwoa-modal-overlay, rgba(15, 23, 42, 0.45));
    cursor: pointer;
}

.cwoa-plan-desc-modal__dialog.cwoa-panel.woocommerce {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: min(88vh, 720px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border-radius: var(--wc-border-radius, var(--cwoa-radius-lg, 8px));
    border: 1px solid
        var(
            --wc-border-color,
            var(--wp--preset--color--cyan-bluish-gray, color-mix(in srgb, currentColor 16%, transparent))
        );
    background-color: var(--wc-form-color-background, var(--wp--preset--color--base, Canvas));
    color: var(--wc-form-color-text, var(--wp--preset--color--contrast, CanvasText));
    box-shadow:
        0 4px 24px color-mix(in srgb, CanvasText 12%, transparent),
        0 22px 48px color-mix(in srgb, CanvasText 18%, transparent);
    font-family: inherit;
    font-size: var(--wc-font-size-base, var(--cwoa-fs, 1rem));
    line-height: var(--wc-line-height-body, 1.55);
}

.cwoa-plan-desc-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: clamp(1rem, 2.2vw, 1.25rem);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid
        var(--wc-border-color, color-mix(in srgb, currentColor 12%, transparent));
    flex-shrink: 0;
}

.cwoa-plan-desc-modal__title {
    margin: 0;
    font-size: clamp(1.05rem, 2.1vw, 1.2rem);
    font-weight: 600;
    color: inherit;
    line-height: 1.25;
    padding-right: 8px;
}

.cwoa-plan-desc-modal__close {
    flex: 0 0 auto;
    margin: -4px -4px 0 0;
    padding: 6px 10px;
    border: 1px solid var(--wc-border-color, color-mix(in srgb, currentColor 14%, transparent));
    background: var(--wc-form-color-background, Field);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.75;
    border-radius: var(--wc-border-radius, 6px);
}

.cwoa-plan-desc-modal__close:hover,
.cwoa-plan-desc-modal__close:focus-visible {
    opacity: 1;
    background: color-mix(in srgb, var(--woocommerce-pay-button-color, var(--wp-admin-theme-color, #2271b1)) 12%, Field);
}

.cwoa-plan-desc-modal__body {
    padding: clamp(0.85rem, 2vw, 1.15rem) clamp(1rem, 2.2vw, 1.25rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: var(--wc-font-size-small, 0.9375rem);
    line-height: var(--wc-line-height-body, 1.55);
    color: inherit;
}

.cwoa-plan-desc-modal__body > *:first-child {
    margin-top: 0;
}

.cwoa-plan-desc-modal__body > *:last-child {
    margin-bottom: 0;
}

.cwoa-plan-desc-modal__empty {
    margin: 0;
    color: color-mix(in srgb, currentColor 72%, transparent);
    font-style: italic;
}

@keyframes cwoa-rail-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Правая колонка: явное состояние «идёт загрузка» (долгие OEM-запросы). */
.cwoa-rail-load {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px 18px;
    text-align: center;
    min-height: 140px;
    box-sizing: border-box;
}

.cwoa-rail-load__spinner {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--cwoa-muted) 38%, transparent);
    border-top-color: var(--cwoa-accent);
    animation: cwoa-rail-spin 0.85s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .cwoa-rail-load__spinner {
        animation: none !important;
        border-color: color-mix(in srgb, var(--cwoa-accent) 35%, var(--cwoa-muted));
    }
}

/*
 * Маленький инлайн-спиннер для текста «Found … matching vehicle» (счётчик кандидатов
 * мастера «По параметрам») — вставляется вместо символа многоточия, пока число ещё
 * не посчитано. Переиспользует ту же анимацию, что и .cwoa-rail-load__spinner.
 */
.cwoa-inline-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    vertical-align: -2px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--cwoa-muted) 38%, transparent);
    border-top-color: var(--cwoa-accent);
    animation: cwoa-rail-spin 0.85s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .cwoa-inline-spinner {
        animation: none !important;
        border-color: color-mix(in srgb, var(--cwoa-accent) 35%, var(--cwoa-muted));
    }
}

.cwoa-rail-load__title {
    margin: 0;
    font-weight: 600;
    font-size: var(--cwoa-fs);
    color: var(--cwoa-text);
    line-height: 1.35;
}

.cwoa-rail-load__hint {
    margin: 0;
    font-size: var(--cwoa-fs-xs);
    color: var(--cwoa-muted);
    line-height: 1.45;
    max-width: 22rem;
}

@keyframes cwoa-global-loading-in {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

#cwoa-app .cwoa-block-loading-overlay .cwoa-global-loading__viz {
    animation: cwoa-global-loading-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#cwoa-app .cwoa-global-loading__viz {
    position: relative;
    width: 52px;
    height: 52px;
}

#cwoa-app .cwoa-global-loading__halo {
    position: absolute;
    inset: -28%;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 50%,
        color-mix(in srgb, var(--cwoa-accent) 22%, transparent) 0%,
        transparent 72%
    );
    animation: cwoa-gl-halo 3.2s ease-in-out infinite;
}

@keyframes cwoa-gl-halo {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.92);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

@keyframes cwoa-gl-orbit {
    to {
        transform: rotate(360deg);
    }
}

#cwoa-app .cwoa-global-loading__orbit {
    position: absolute;
    inset: 0;
    animation: cwoa-gl-orbit 2.75s linear infinite;
    will-change: transform;
}

#cwoa-app .cwoa-global-loading__ball {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 11px;
    margin: -5.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95), var(--cwoa-accent) 52%, color-mix(in srgb, var(--cwoa-accent) 85%, black));
    box-shadow:
        0 0 18px color-mix(in srgb, var(--cwoa-accent) 55%, transparent),
        inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

#cwoa-app .cwoa-global-loading__ball:nth-child(1) {
    transform: rotate(0deg) translateY(-19px);
}

#cwoa-app .cwoa-global-loading__ball:nth-child(2) {
    transform: rotate(120deg) translateY(-19px);
}

#cwoa-app .cwoa-global-loading__ball:nth-child(3) {
    transform: rotate(240deg) translateY(-19px);
}

@media (prefers-reduced-motion: reduce) {
    #cwoa-app .cwoa-block-loading-overlay .cwoa-global-loading__viz,
    #cwoa-unit-modal .cwoa-block-loading-overlay .cwoa-global-loading__viz {
        animation: none !important;
    }

    #cwoa-app .cwoa-global-loading__orbit,
    #cwoa-unit-modal .cwoa-global-loading__orbit {
        animation-duration: 6s;
    }

    #cwoa-app .cwoa-global-loading__halo,
    #cwoa-unit-modal .cwoa-global-loading__halo {
        animation: none !important;
        opacity: 0.65;
    }
}

/*
 * Theme shell navigation: same block-loading overlay tree as #cwoa-app hosts (orbit + balls).
 * Targets .cwoa-shell-body wrapped by assets/js/cwoa-shell-nav.js (theme).
 */
.cwoa-minimal-main .cwoa-shell-body.cwoa-loading-host {
    position: relative;
    min-height: 12rem;
}

/*
 * Переход главная → кабинет (shell swap): оверлей только в центральной зоне .cwoa-minimal-main.
 * Шапка и подвал остаются интерактивными и визуально неизменными.
 */
.cwoa-minimal-main .cwoa-shell-body > .cwoa-block-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: block;
    pointer-events: auto;
    background: color-mix(in srgb, var(--cwoa-card) 84%, transparent);
    /* Без backdrop-filter: иначе в Safari fixed-дети часто привязаны к оверлею, а не к viewport — спиннер не по центру экрана. */
    border-radius: 0;
}

/* Затемнение только в main; индикатор — по центру окна (не колонки). */
.cwoa-minimal-main .cwoa-shell-body > .cwoa-block-loading-overlay .cwoa-global-loading__wrap {
    position: fixed;
    top: 50vh;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: none;
}

.cwoa-minimal-main .cwoa-shell-body > .cwoa-block-loading-overlay .cwoa-global-loading__viz {
    animation: cwoa-global-loading-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cwoa-minimal-main .cwoa-shell-body .cwoa-global-loading__viz {
    position: relative;
    width: 52px;
    height: 52px;
}

.cwoa-minimal-main .cwoa-shell-body .cwoa-global-loading__halo {
    position: absolute;
    inset: -28%;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 50%,
        color-mix(in srgb, var(--cwoa-accent) 22%, transparent) 0%,
        transparent 72%
    );
    animation: cwoa-gl-halo 3.2s ease-in-out infinite;
}

.cwoa-minimal-main .cwoa-shell-body .cwoa-global-loading__orbit {
    position: absolute;
    inset: 0;
    animation: cwoa-gl-orbit 2.75s linear infinite;
    will-change: transform;
}

.cwoa-minimal-main .cwoa-shell-body .cwoa-global-loading__ball {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 11px;
    margin: -5.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95), var(--cwoa-accent) 52%, color-mix(in srgb, var(--cwoa-accent) 85%, black));
    box-shadow:
        0 0 18px color-mix(in srgb, var(--cwoa-accent) 55%, transparent),
        inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.cwoa-minimal-main .cwoa-shell-body .cwoa-global-loading__ball:nth-child(1) {
    transform: rotate(0deg) translateY(-19px);
}

.cwoa-minimal-main .cwoa-shell-body .cwoa-global-loading__ball:nth-child(2) {
    transform: rotate(120deg) translateY(-19px);
}

.cwoa-minimal-main .cwoa-shell-body .cwoa-global-loading__ball:nth-child(3) {
    transform: rotate(240deg) translateY(-19px);
}

@media (prefers-reduced-motion: reduce) {
    .cwoa-minimal-main .cwoa-shell-body > .cwoa-block-loading-overlay .cwoa-global-loading__viz {
        animation: none !important;
    }

    .cwoa-minimal-main .cwoa-shell-body .cwoa-global-loading__orbit {
        animation-duration: 6s;
    }

    .cwoa-minimal-main .cwoa-shell-body .cwoa-global-loading__halo {
        animation: none !important;
        opacity: 0.65;
    }
}

#cwoa-app .cwoa-units-loading--inline {
    margin: 0;
    padding: 10px 0;
    font-size: var(--cwoa-fs-sm);
}

/* Rail при загрузке групп: без дубля текста «Загрузка групп» (он уже в #cwoa-tree-mount) */
#cwoa-app .cwoa-units-loading.cwoa-units-loading--rail-min {
    min-height: 6px;
    padding: 0;
    margin: 0;
}

#cwoa-app .cwoa-part-name-rail-card--loading {
    padding: 12px 14px;
}

.cwoa-tree-loading,
.cwoa-units-loading {
    margin: 0;
    color: var(--cwoa-muted);
    font-size: var(--cwoa-fs);
}

.cwoa-main-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(260px, min(32vw, 380px)) minmax(0, 1fr);
    /*
     * minmax(0, 1fr) обязателен: без него grid-auto-rows = auto тянет строку до max-content
     * самой длинной колонки (дерева), tree-panel/units-rail получают высоту контента вместо высоты контейнера —
     * и .cwoa-tree-mount { overflow-y:auto } никогда не активируется (см. .cwoa-tree-mount, .cwoa-units-rail ниже).
     * minmax(0, 1fr) задаёт строке высоту контейнера и разрешает ей сжиматься ниже min-content.
     */
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(10px, 1.5vw, 18px);
    align-items: stretch;
    min-height: 0;
}

#cwoa-app .cwoa-part-name-dock {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

/*
 * Отдельный полноширинный блок «Поиск детали по названию» над сеткой дерева/рейла (не зажат в
 * колонку дерева, как раньше) — сразу под баннером режима предпросмотра / строкой поиска, в самом
 * верху общего блока каталога.
 */
#cwoa-app .cwoa-part-name-dock--full {
    margin-bottom: clamp(10px, 1.5vw, 18px);
}

#cwoa-app .cwoa-part-name-dock--full .cwoa-part-name-tile.cwoa-search-panel {
    width: 100%;
}

/*
 * Компактная однострочная раскладка: заголовок слева, справа — крошечный хинт над полем ввода и поле+кнопка в одной строке.
 * Весь блок вмещается в высоту одной строки (раньше титул/хинт/поле/кнопка шли отдельными строками).
 */
#cwoa-app .cwoa-part-name-tile--compact {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(12px, 2vw, 24px);
    padding: 12px 18px;
}

#cwoa-app .cwoa-part-name-tile--compact .cwoa-part-name-tile__expander {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    white-space: nowrap;
}

#cwoa-app .cwoa-part-name-tile--compact .cwoa-part-name-tile__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin-top: 0;
}

#cwoa-app .cwoa-part-name-tile--compact .cwoa-part-name-drawer-hint {
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#cwoa-app .cwoa-part-name-tile--compact .cwoa-part-name-tile__inputrow {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
}

#cwoa-app .cwoa-part-name-tile--compact .cwoa-part-name-form {
    flex: 1 1 260px;
    min-width: 0;
}

#cwoa-app .cwoa-part-name-tile--compact .cwoa-field-row {
    display: block;
}

#cwoa-app .cwoa-part-name-tile--compact .cwoa-search-tile__footer {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    margin-top: 0;
}

@media (max-width: 700px) {
    #cwoa-app .cwoa-part-name-tile--compact {
        flex-wrap: wrap;
    }
    #cwoa-app .cwoa-part-name-tile--compact .cwoa-part-name-tile__body {
        flex-basis: 100%;
    }
    #cwoa-app .cwoa-part-name-tile--compact .cwoa-part-name-drawer-hint {
        white-space: normal;
    }
}

/* Part-name tile: same visual language as top search tiles (card + expand / footer). */
#cwoa-app .cwoa-part-name-tile.cwoa-search-panel {
    --cwoa-tile-title-size: 1rem;
    --cwoa-tile-label-size: var(--cwoa-fs-xs);
    --cwoa-tile-control-size: var(--cwoa-fs-sm);
    --cwoa-tile-control-height: 2rem;
    --cwoa-tile-control-padding: 0.45rem 0.65rem;
}

#cwoa-app .cwoa-part-name-tile__head {
    margin: 0;
    padding: 0;
    /* Общий .cwoa-search-tile__head даёт min-height:4rem для выравнивания карточек
     * VIN/AM/По параметрам в один ряд на главной — здесь эта карточка одинокая в колонке дерева,
     * выравнивать не с чем — лишний отступ снимаем. */
    min-height: 0;
}

#cwoa-app .cwoa-part-name-tile__expander {
    display: flex;
    width: 100%;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    color: inherit;
}

#cwoa-app .cwoa-part-name-tile__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 6px;
}

#cwoa-app .cwoa-part-name-drawer-hint {
    margin: 0;
    font-size: var(--cwoa-fs-xs);
    line-height: 1.35;
    color: var(--cwoa-muted);
}

#cwoa-app .cwoa-part-name-tile .cwoa-search-tile__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    margin-top: 0;
    padding-top: 0;
}

#cwoa-app .cwoa-part-name-tile .cwoa-field-row > label {
    font-size: var(--cwoa-tile-label-size) !important;
    font-weight: 600;
    line-height: 1.2;
}

#cwoa-app .cwoa-part-name-tile input.cwoa-field {
    min-height: var(--cwoa-tile-control-height) !important;
    height: var(--cwoa-tile-control-height);
    padding: var(--cwoa-tile-control-padding) !important;
    border-radius: var(--cwoa-radius-sm);
    font-size: var(--cwoa-tile-control-size) !important;
    line-height: 1.35;
    font-family: inherit;
    box-sizing: border-box;
}

#cwoa-app .cwoa-part-name-tile input.cwoa-field::placeholder {
    opacity: 0.55;
    color: color-mix(in srgb, currentColor 55%, transparent);
}

#cwoa-app .cwoa-part-name-tile .cwoa-search-tile__submit {
    min-height: var(--cwoa-tile-control-height);
    font-size: var(--cwoa-tile-control-size);
}

#cwoa-app .cwoa-part-name-tile .cwoa-search-tile__clear:not(.cwoa-search-tile__clear--visible) {
    display: none !important;
}

#cwoa-app .cwoa-part-name-tile .cwoa-search-tile__clear.cwoa-search-tile__clear--visible {
    display: inline-block !important;
}

#cwoa-app .cwoa-part-name-tile .cwoa-search-tile__clear {
    width: max-content;
    align-self: center;
    border: 0;
    background: transparent;
    color: var(--cwoa-muted);
    font-size: var(--cwoa-fs-xs);
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 0.12em;
    cursor: pointer;
    padding: 0;
}

#cwoa-app .cwoa-part-name-tile .cwoa-search-tile__clear:hover {
    color: var(--cwoa-text);
}

@media (max-width: 520px) {
    #cwoa-app .cwoa-part-name-submit {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

.cwoa-tree-mount {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    order: 1;
    overflow-x: hidden;
    overflow-y: auto;
    /* См. комментарий у .cwoa-units-rail выше — без overscroll-behavior-y намеренно, чтобы не блокировать
     * скролл страницы, когда внутри нечего прокручивать. */
    -webkit-overflow-scrolling: touch;
}

/*
 * The catalog is a two-pane app-shell by design (list independently scrollable so the diagram
 * on the right stays pinned in view while browsing groups/parts) — not a bug, matches how parts
 * catalogs like RockAuto work. The confusing part users reported is that these independently
 * scrolling panes gave no visual hint they weren't just part of the page. Give them an always
 * visible, themed scrollbar so hovering one and scrolling feels intentional, not «stuck».
 */
.cwoa-tree-mount,
.cwoa-units-rail {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--cwoa-accent) 55%, transparent) transparent;
}

.cwoa-tree-mount::-webkit-scrollbar,
.cwoa-units-rail::-webkit-scrollbar {
    width: 8px;
}

.cwoa-tree-mount::-webkit-scrollbar-track,
.cwoa-units-rail::-webkit-scrollbar-track {
    background: transparent;
}

.cwoa-tree-mount::-webkit-scrollbar-thumb,
.cwoa-units-rail::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--cwoa-accent) 45%, transparent);
    border-radius: 999px;
}

.cwoa-tree-mount::-webkit-scrollbar-thumb:hover,
.cwoa-units-rail::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--cwoa-accent) 70%, transparent);
}

.cwoa-part-name-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex-wrap: nowrap;
}

.cwoa-part-name-results {
    margin-top: 0;
}

.cwoa-part-name-results:not([hidden]) {
    overflow-x: auto;
}

.cwoa-part-name-empty {
    margin: 0;
    padding: 10px 0 0;
    color: var(--cwoa-muted);
    font-size: var(--cwoa-fs-sm);
}

.cwoa-part-name-table {
    margin-top: 0;
}

.cwoa-part-name-from-diagram-bar {
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cwoa-border, #e5e7eb);
}

.cwoa-part-name-from-diagram-bar .cwoa-part-name-back-to-list {
    width: 100%;
    text-align: left;
}

/* Кликабельный OEM-номер в результатах поиска по названию: открывает схему детали (см. cwoa_find_part_in_vehicle). */
.cwoa-part-name-table .cwoa-find-on-diagram {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: var(--cwoa-link, var(--cwoa-accent, #2563eb));
    font: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-style: dotted;
}

.cwoa-part-name-table .cwoa-find-on-diagram:hover,
.cwoa-part-name-table .cwoa-find-on-diagram:focus-visible {
    text-decoration-style: solid;
    outline: none;
}

.cwoa-tree-panel {
    margin: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    background: var(--cwoa-card);
    border-radius: var(--cwoa-radius);
    box-shadow: var(--cwoa-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Синхронизировано с min-height-переходом .cwoa-workspace, чтобы max-height колонок менялся плавно,
       а не скачком отдельно от внешнего блока. */
    transition: max-height var(--cwoa-layout-duration, 0.95s) var(--cwoa-motion-ease, ease);
}

@media (prefers-reduced-motion: reduce) {
    .cwoa-tree-panel {
        transition: none;
    }
}

#cwoa-app #cwoa-part-name-dock {
    flex: 0 0 auto;
}

.cwoa-tree-head {
    font-weight: 700;
    font-size: var(--cwoa-fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cwoa-muted);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cwoa-border);
}

.cwoa-tree-empty {
    margin: 0;
    color: var(--cwoa-muted);
}

.cwoa-units-rail {
    margin: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    /*
     * Без overscroll-behavior-y: contain намеренно — когда у этой колонки нет внутреннего
     * переполнения (scrollHeight === clientHeight), Chrome всё равно считает этот элемент
     * границей скролла и с contain полностью «съедает» wheel-событие, не давая ему
     * чейниться на страницу — пользователь наводя курсор на панель схем/деталей просто не
     * может докрутить страницу до подвала. Сам по overflow-y:auto колонка правильно скроллится
     * внутри себя, когда действительно переполнена; цепочка к странице остаётся — это
     * стандартное и ожидаемое поведение браузера.
     */
    -webkit-overflow-scrolling: touch;
    background: var(--cwoa-card);
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--cwoa-radius);
    box-shadow: var(--cwoa-shadow-sm);
}

/* Контент правой колонки: те же opacity/transform/--cwoa-reveal-duration, что у блока кандидата */
#cwoa-app .cwoa-units-rail {
    transform-origin: top center;
    transition:
        opacity var(--cwoa-reveal-duration) var(--cwoa-motion-ease),
        transform var(--cwoa-reveal-duration) var(--cwoa-motion-ease),
        box-shadow var(--cwoa-reveal-duration) var(--cwoa-motion-ease),
        max-height var(--cwoa-layout-duration, 0.95s) var(--cwoa-motion-ease);
}

#cwoa-app .cwoa-units-rail.cwoa-await-reveal {
    opacity: 0 !important;
    transform: translate3d(0, 12px, 0);
    pointer-events: none;
}

#cwoa-app .cwoa-catalog-rail-surface {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    width: 100%;
}

#cwoa-app .cwoa-units-mount {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: margin-top 0.22s var(--cwoa-motion-ease, ease);
}

#cwoa-app .cwoa-units-mount[hidden] {
    display: none !important;
}

#cwoa-app .cwoa-part-name-rail {
    flex: 0 0 auto;
    min-width: 0;
    transform-origin: top center;
    transition:
        opacity var(--cwoa-reveal-duration) var(--cwoa-motion-ease),
        transform var(--cwoa-reveal-duration) var(--cwoa-motion-ease),
        box-shadow var(--cwoa-reveal-duration) var(--cwoa-motion-ease);
}

#cwoa-app #cwoa-part-name-rail.cwoa-await-reveal {
    opacity: 0 !important;
    transform: translate3d(0, 12px, 0);
    pointer-events: none;
}

/* Только после запроса по имени; темы без стиля [hidden] не должны оставлять блок в потоке. */
#cwoa-app .cwoa-part-name-rail[hidden] {
    display: none !important;
}

#cwoa-app .cwoa-part-name-rail-card {
    border: 1px solid var(--cwoa-border);
    border-radius: var(--cwoa-radius-lg);
    background: var(--cwoa-surface);
    box-shadow: var(--cwoa-shadow-sm);
    padding: 12px 14px;
}

#cwoa-app .cwoa-part-name-rail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

#cwoa-app .cwoa-part-name-rail-title {
    margin: 0;
    font-size: var(--cwoa-fs-md);
    font-weight: 700;
    color: var(--cwoa-text);
    line-height: 1.25;
}

#cwoa-app .cwoa-part-name-rail-close {
    flex-shrink: 0;
    margin: -4px -4px 0 0;
    padding: 4px 10px;
    font-size: 1.35rem;
    line-height: 1;
}

#cwoa-app .cwoa-part-name-rail-body {
    overflow-x: auto;
}

.cwoa-units-placeholder {
    margin: 0;
    color: var(--cwoa-muted);
    font-size: var(--cwoa-fs);
    line-height: 1.45;
}

.cwoa-units-toolbar {
    flex-shrink: 0;
}

.cwoa-units-count {
    font-size: var(--cwoa-fs-sm);
    font-weight: 600;
    color: var(--cwoa-text);
}

.cwoa-units-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cwoa-unit-block {
    border: 1px solid var(--cwoa-border);
    border-radius: var(--cwoa-radius-lg);
    background: var(--cwoa-card);
    box-shadow: var(--cwoa-shadow-sm);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cwoa-unit-block-head {
    padding: 10px 12px 0;
    border-bottom: 1px solid var(--cwoa-border-inner);
    margin: 0 0 0;
    background: var(--cwoa-surface);
    flex-shrink: 0;
}

.cwoa-unit-block-title {
    margin: 0 0 4px 0;
    font-size: var(--cwoa-fs);
    font-weight: 700;
    color: var(--cwoa-text);
    line-height: 1.3;
}

.cwoa-unit-block-meta {
    margin: 0 0 6px 0;
    font-size: var(--cwoa-fs-xs);
    color: var(--cwoa-muted);
}

.cwoa-unit-block-preview {
    margin: 0 0 10px 0;
    font-size: var(--cwoa-fs-xs);
    line-height: 1.4;
    color: var(--cwoa-muted);
}

.cwoa-unit-block-main {
    display: block;
    border-top: 1px solid var(--cwoa-border-inner);
    flex: 0 1 auto;
    min-height: 0;
    overflow: visible;
}

.cwoa-unit-zoom-zone.cwoa-unit-block-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    padding: 12px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: var(--cwoa-surface-strong);
    cursor: zoom-in;
    font: inherit;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.cwoa-unit-zoom-zone.cwoa-unit-block-diagram:hover {
    background: var(--cwoa-surface-strong);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cwoa-accent) 22%, transparent);
}

.cwoa-unit-zoom-zone.cwoa-unit-block-diagram:focus-visible {
    outline: 2px solid var(--cwoa-accent);
    outline-offset: -2px;
}

.cwoa-unit-block-diagram img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 6px;
    background: var(--cwoa-card);
    box-shadow: 0 2px 10px color-mix(in srgb, currentColor 6%, transparent);
    pointer-events: none;
}

.cwoa-unit-block-noimg {
    padding: 16px;
    font-size: var(--cwoa-fs-xs);
    color: var(--cwoa-muted);
    text-align: center;
    pointer-events: none;
}

.cwoa-units-fallback-note {
    margin: 0 0 8px 0;
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-muted);
}

.cwoa-units-table-wrap {
    overflow: visible;
}

/* Quick groups tree */
.cwoa-qgroups-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cwoa-qgroups-list li {
    margin: 6px 0;
}

.cwoa-qgroup-item {
    border: 1px solid var(--cwoa-border);
    background: var(--cwoa-surface);
    padding: 4px 8px 8px;
    border-radius: 8px;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.cwoa-qgroup-item:hover {
    border-color: color-mix(in srgb, var(--cwoa-accent) 32%, var(--cwoa-border));
    background: var(--cwoa-accent-muted);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cwoa-accent) 24%, transparent);
}

.cwoa-qgroup-item.has-children:hover {
    box-shadow:
        inset 3px 0 0 color-mix(in srgb, var(--cwoa-accent) 52%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--cwoa-accent) 26%, transparent);
}

.cwoa-qgroup-item.is-active {
    border-color: var(--cwoa-accent);
    background: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cwoa-accent) 38%, transparent);
}

/* Есть вложенные группы — заметная полоска слева (без авто-сворачивания соседей). */
.cwoa-qgroup-item.has-children {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--cwoa-accent) 50%, transparent);
}

.cwoa-qgroup-item.has-children.is-active {
    box-shadow:
        inset 3px 0 0 color-mix(in srgb, var(--cwoa-accent) 65%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--cwoa-accent) 38%, transparent);
}

/* Активная группа: подсветка фона/обводки без «белого» текста (перебивает темы/Woo). */
#cwoa-app .cwoa-qgroup-item.is-active > .cwoa-qgroup-row .cwoa-qgroup-label,
#cwoa-app .cwoa-qgroup-item.is-active > .cwoa-qgroup-row .cwoa-qgroup-label.cwoa-qgroup-link {
    color: var(--cwoa-text);
}

.cwoa-qgroup-item.has-children .cwoa-qgroup-caret,
.cwoa-qgroup-item.has-children .cwoa-qgroup-expand {
    color: color-mix(in srgb, var(--cwoa-accent) 72%, var(--cwoa-muted));
}

.cwoa-qgroup-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
    min-height: 36px;
}

.cwoa-qgroup-caret-spacer {
    flex: 0 0 30px;
    width: 30px;
}

.cwoa-qgroup-caret {
    flex: 0 0 30px;
    width: 30px;
    align-self: stretch;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--cwoa-muted);
    cursor: pointer;
    font-size: var(--cwoa-fs);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.cwoa-qgroup-caret:hover,
.cwoa-qgroup-caret:focus-visible {
    background: var(--cwoa-accent-muted);
    color: var(--cwoa-text);
    outline: none;
}

.cwoa-qgroup-caret-icon {
    display: inline-block;
    transition: transform 0.18s ease;
}

.cwoa-qgroup-item.is-open > .cwoa-qgroup-row .cwoa-qgroup-caret-icon {
    transform: rotate(90deg);
}

.cwoa-qgroup-label {
    flex: 1 1 auto;
    margin: 0;
    padding: 6px 8px;
    border: none;
    border-radius: 4px;
    background: transparent;
    font-size: var(--cwoa-fs);
    font-weight: 600;
    text-align: left;
    color: var(--cwoa-text);
    cursor: pointer;
    line-height: 1.35;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.cwoa-qgroup-expand:hover,
.cwoa-qgroup-expand:focus-visible {
    background: color-mix(in srgb, var(--cwoa-card) 82%, transparent);
    outline: none;
}

.cwoa-qgroup-label.cwoa-qgroup-link {
    color: var(--cwoa-text);
    font-weight: 700;
}

.cwoa-qgroup-label.cwoa-qgroup-link:hover,
.cwoa-qgroup-label.cwoa-qgroup-link:focus-visible {
    background: color-mix(in srgb, var(--cwoa-card) 87%, transparent);
    color: color-mix(in srgb, var(--cwoa-accent) 85%, black);
    outline: none;
}

.cwoa-qgroup-label--dead {
    cursor: default;
    color: var(--cwoa-muted);
    font-weight: 600;
}

.cwoa-qgroup-children {
    margin: 8px 0 0 8px;
    padding-left: 8px;
    border-left: 2px solid var(--cwoa-border);
    overflow: hidden;
    transition:
        max-height var(--cwoa-reveal-duration) var(--cwoa-motion-ease),
        opacity calc(var(--cwoa-reveal-duration) * 0.85) var(--cwoa-motion-ease),
        margin-top 0.25s var(--cwoa-motion-ease),
        padding-bottom 0.25s var(--cwoa-motion-ease),
        border-left-width 0.25s var(--cwoa-motion-ease);
}

.cwoa-qgroup-item:not(.is-open) > .cwoa-qgroup-children {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 8px;
    border-left-width: 0;
    visibility: hidden;
    pointer-events: none;
}

/*
 * Раньше было min(4000px, 150vh) — на типичном экране ~1.5 высоты окна (~1600px), длинные ветки
 * обрезались (overflow:hidden). Нужен «потолок» только для анимации раскрытия, не для лимита контента.
 */
.cwoa-qgroup-item.is-open > .cwoa-qgroup-children {
    max-height: min(200000px, 5000vh);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.cwoa-qgroup-item.is-open:not(.is-active) {
    border-color: color-mix(in srgb, var(--cwoa-accent) 45%, var(--cwoa-border));
    background: var(--cwoa-card);
}

/*
 * Дерево категорий: один вид в OEM-каталоге и в кабинете Woo (.cwoa-wc-account-sidebar.cwoa-tree-panel).
 * Контур строки, hover на весь блок, прозрачный фон у подписи (без «белой плашки» на кнопке/ссылке).
 */
#cwoa-app #cwoa-tree-panel.cwoa-tree-panel .cwoa-qgroup-item,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar.cwoa-tree-panel ul.cwoa-wc-account-qlist li.cwoa-qgroup-item {
    background: transparent !important;
    border: 1px solid var(--cwoa-border);
    border-radius: 8px;
    box-shadow: none;
    padding: 4px 8px 8px;
}

#cwoa-app #cwoa-tree-panel.cwoa-tree-panel .cwoa-qgroup-item.has-children,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar.cwoa-tree-panel ul.cwoa-wc-account-qlist li.cwoa-qgroup-item.has-children {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--cwoa-accent) 50%, transparent);
}

#cwoa-app #cwoa-tree-panel.cwoa-tree-panel .cwoa-qgroup-item:hover,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar.cwoa-tree-panel ul.cwoa-wc-account-qlist li.cwoa-qgroup-item:hover {
    background: var(--cwoa-accent-muted) !important;
    border-color: color-mix(in srgb, var(--cwoa-accent) 32%, var(--cwoa-border));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cwoa-accent) 24%, transparent);
}

#cwoa-app #cwoa-tree-panel.cwoa-tree-panel .cwoa-qgroup-item.has-children:hover,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar.cwoa-tree-panel ul.cwoa-wc-account-qlist li.cwoa-qgroup-item.has-children:hover {
    box-shadow:
        inset 3px 0 0 color-mix(in srgb, var(--cwoa-accent) 52%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--cwoa-accent) 26%, transparent);
}

#cwoa-app #cwoa-tree-panel.cwoa-tree-panel .cwoa-qgroup-item.is-active,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar.cwoa-tree-panel ul.cwoa-wc-account-qlist li.cwoa-qgroup-item.is-active {
    background: transparent !important;
    border-color: var(--cwoa-accent);
}

#cwoa-app #cwoa-tree-panel.cwoa-tree-panel .cwoa-qgroup-item:not(.has-children).is-active,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar.cwoa-tree-panel ul.cwoa-wc-account-qlist li.cwoa-qgroup-item:not(.has-children).is-active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cwoa-accent) 38%, transparent);
}

#cwoa-app #cwoa-tree-panel.cwoa-tree-panel .cwoa-qgroup-item.has-children.is-active,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar.cwoa-tree-panel ul.cwoa-wc-account-qlist li.cwoa-qgroup-item.has-children.is-active {
    box-shadow:
        inset 3px 0 0 color-mix(in srgb, var(--cwoa-accent) 65%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--cwoa-accent) 38%, transparent);
}

#cwoa-app #cwoa-tree-panel.cwoa-tree-panel .cwoa-qgroup-item.is-open:not(.is-active),
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar.cwoa-tree-panel ul.cwoa-wc-account-qlist li.cwoa-qgroup-item.has-children.is-open:not(.is-active) {
    background: transparent !important;
    border-color: color-mix(in srgb, var(--cwoa-accent) 45%, var(--cwoa-border));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--cwoa-accent) 40%, transparent);
}

#cwoa-app #cwoa-tree-panel.cwoa-tree-panel .cwoa-qgroup-label.cwoa-qgroup-link:hover,
#cwoa-app #cwoa-tree-panel.cwoa-tree-panel .cwoa-qgroup-label.cwoa-qgroup-link:focus-visible,
#cwoa-app #cwoa-tree-panel.cwoa-tree-panel .cwoa-qgroup-expand:hover,
#cwoa-app #cwoa-tree-panel.cwoa-tree-panel .cwoa-qgroup-expand:focus-visible,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar.cwoa-tree-panel .cwoa-qgroup-label.cwoa-wc-account-nav-link:hover,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar.cwoa-tree-panel .cwoa-qgroup-label.cwoa-wc-account-nav-link:focus-visible,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar.cwoa-tree-panel .cwoa-wc-account-subs-hub:hover,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar.cwoa-tree-panel .cwoa-wc-account-subs-hub:focus-visible {
    background: transparent !important;
    outline: none;
}

#cwoa-app #cwoa-tree-panel.cwoa-tree-panel .cwoa-qgroup-label.cwoa-qgroup-link:hover,
#cwoa-app #cwoa-tree-panel.cwoa-tree-panel .cwoa-qgroup-label.cwoa-qgroup-link:focus-visible,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar.cwoa-tree-panel .cwoa-qgroup-label.cwoa-wc-account-nav-link:hover,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar.cwoa-tree-panel .cwoa-qgroup-label.cwoa-wc-account-nav-link:focus-visible,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar.cwoa-tree-panel .cwoa-wc-account-subs-hub:hover,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar.cwoa-tree-panel .cwoa-wc-account-subs-hub:focus-visible {
    color: color-mix(in srgb, var(--cwoa-accent) 85%, black);
}

/* Подписи строки дерева: один цвет/вес (кнопки каталога и ссылки кабинета). */
#cwoa-app #cwoa-tree-panel.cwoa-tree-panel .cwoa-qgroup-row .cwoa-qgroup-label:not(.cwoa-qgroup-label--dead),
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar.cwoa-tree-panel .cwoa-qgroup-row .cwoa-qgroup-label:not(.cwoa-qgroup-label--dead) {
    color: var(--cwoa-text);
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
}

#cwoa-app #cwoa-tree-panel.cwoa-tree-panel .cwoa-qgroup-expand:hover,
#cwoa-app #cwoa-tree-panel.cwoa-tree-panel .cwoa-qgroup-expand:focus-visible {
    color: color-mix(in srgb, var(--cwoa-accent) 85%, black);
}

@media (prefers-reduced-motion: reduce) {
    .cwoa-qgroup-children {
        transition: none !important;
    }

    .cwoa-qgroup-item:not(.is-open) > .cwoa-qgroup-children {
        max-height: none !important;
        display: none !important;
        opacity: 1 !important;
        margin-top: 0 !important;
        padding: 0 !important;
        border-left-width: 0 !important;
    }

    .cwoa-qgroup-item.is-open > .cwoa-qgroup-children {
        display: block !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Единые размеры текста и кнопок внутри каталога */
#cwoa-app .cwoa-details-table,
#cwoa-app .cwoa-candidate-table,
#cwoa-unit-modal .cwoa-details-table,
#cwoa-unit-modal .cwoa-unit-modal-table {
    font-size: var(--cwoa-fs);
}

#cwoa-app .cwoa-am-standalone-dock-body,
#cwoa-app #cwoa-unit-am-dock-am {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /*
     * Без overscroll-behavior-y здесь намеренно (см. пояснение ниже для похожего случая): этот блок
     * сам вертикально не скроллится (только горизонтально, для широких таблиц), а «contain» по Y
     * съедал колесо мыши целиком, не давая ему всплыть до #cwoa-candidate-dock, который и должен
     * прокручиваться (max-height + overflow-y:auto ставит cwoaFitResultBlockHeight) — из-за этого
     * скролл результата поиска по кроссам АМ не работал вообще.
     */
}

/*
 * Без overscroll-behavior намеренно. Этот класс applyViewportCap() вешает также на #cwoa-workspace
 * сразу после подтверждения кандидата (чтобы document.scrollHeight был «длинным» для якоря) —
 * и срабатывает даже когда внутренний перепад всего на несколько пикселей. С contain пользователь прокручивал
 * эти пару пикселей внутри воркспейса — и дальше колесо переставало что-либо делать вообще, вместо того
 * чтобы продолжить скроллить страницу до подвала — это и есть «не докручивает сразу после
 * подтверждения кандидата». Сама каппа (max-height + overflow-y:auto) остаётся — её ставит JS в applyViewportCap(), здесь убрано
 * только лишнее правило overscroll-behavior.
 */

/* Дерево альтернатив AM (разметка как у быстрых групп OEM: .cwoa-qgroup-item) */
#cwoa-app .cwoa-am-tree-wrap,
#cwoa-unit-modal .cwoa-am-tree-wrap {
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#cwoa-app .cwoa-am-tree-list > li,
#cwoa-unit-modal .cwoa-am-tree-list > li {
    margin: 8px 0;
}

#cwoa-app .cwoa-am-tree-brand .cwoa-qgroup-children,
#cwoa-unit-modal .cwoa-am-tree-brand .cwoa-qgroup-children {
    margin-top: 4px;
}

#cwoa-app .cwoa-am-tree-brand-count,
#cwoa-unit-modal .cwoa-am-tree-brand-count {
    font-weight: 400;
    color: var(--cwoa-muted);
    font-size: var(--cwoa-fs-sm);
}


/* Кнопка-лупа «Показать поставщиков» в ячейке детали — только иконка, без текста; открывает встроенную панель
 * с 3 таблицами вместо перехода в Google в новой вкладке. */
#cwoa-app .cwoa-part-suppliers-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    margin-top: 6px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--cwoa-muted) 45%, transparent);
    border-radius: 50%;
    background: transparent;
    color: var(--cwoa-muted);
    cursor: pointer;
}

#cwoa-app .cwoa-part-suppliers-trigger:hover,
#cwoa-app .cwoa-part-suppliers-trigger:focus-visible {
    border-color: color-mix(in srgb, var(--cwoa-accent) 45%, transparent);
    background: color-mix(in srgb, var(--cwoa-accent) 14%, transparent);
    color: var(--cwoa-accent);
}

#cwoa-app .cwoa-part-suppliers-trigger svg {
    display: block;
    flex-shrink: 0;
}

/*
 * [hidden] должен всегда побеждать над display ниже. У нативного правила браузера
 * `[hidden] { display: none }` самый низкий приоритет каскада (уровень user-agent) — любое
 * авторское правило display (как сброс кнопок сразу ниже) молча делает hidden-кнопку видимой
 * снова, если явно не форсировать это здесь. Баг: кнопка «Показать»/«Rādīt» в мастере параметров
 * оставалась видимой и наезжала на текст блока кандидата на мобильных, хотя JS ставил ей hidden.
 */
#cwoa-app [hidden],
#cwoa-unit-modal [hidden] {
    display: none !important;
}

/*
 * Все действия каталога — как подсвечиваемые ссылки (без классов .button темы WordPress).
 * Исключения: закрытие модалки, большие зоны узла, дерево (caret/label), правка шага мастера.
 */
#cwoa-app .cwoa-action,
#cwoa-app button:not(.cwoa-modal-close):not(.cwoa-unit-zoom-zone):not(.cwoa-qgroup-caret):not(.cwoa-qgroup-label):not(.cwoa-wizard-edit-step):not(.cwoa-am-sort-btn):not(.cwoa-custom-select__trigger):not(.cwoa-garage-card__title-edit):not(.cwoa-copy-icon-btn):not(.cwoa-suppliers-loc-caption__trigger),
#cwoa-unit-modal button:not(.cwoa-modal-close):not(.cwoa-unit-zoom-zone):not(.cwoa-unit-modal-legend-tip):not(.cwoa-unit-modal-am-close):not(.cwoa-am-sort-btn):not(.cwoa-part-info-btn):not(.cwoa-part-am-btn):not(.cwoa-copy-icon-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: var(--cwoa-fs);
    line-height: 1.35;
    min-height: 0;
    min-width: 0;
    padding: 5px 12px;
    border: none;
    background: transparent;
    border-radius: var(--cwoa-radius-sm);
    color: var(--cwoa-accent);
    font-weight: 500;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition:
        color var(--cwoa-layout-duration) var(--cwoa-motion-ease),
        background var(--cwoa-layout-duration) var(--cwoa-motion-ease);
}

#cwoa-app .cwoa-action:hover:not(:disabled),
#cwoa-app button:not(.cwoa-modal-close):not(.cwoa-unit-zoom-zone):not(.cwoa-qgroup-caret):not(.cwoa-qgroup-label):not(.cwoa-wizard-edit-step):not(.cwoa-am-sort-btn):not(.cwoa-custom-select__trigger):not(.cwoa-copy-icon-btn):hover:not(:disabled),
#cwoa-unit-modal button:not(.cwoa-modal-close):not(.cwoa-unit-zoom-zone):not(.cwoa-unit-modal-legend-tip):not(.cwoa-unit-modal-am-close):not(.cwoa-am-sort-btn):not(.cwoa-part-info-btn):not(.cwoa-part-am-btn):not(.cwoa-copy-icon-btn):hover:not(:disabled) {
    color: var(--cwoa-text);
    background: var(--cwoa-accent-soft);
}

#cwoa-app .cwoa-action:focus-visible,
#cwoa-app button:not(.cwoa-modal-close):not(.cwoa-unit-zoom-zone):not(.cwoa-qgroup-caret):not(.cwoa-qgroup-label):not(.cwoa-wizard-edit-step):not(.cwoa-am-sort-btn):not(.cwoa-custom-select__trigger):not(.cwoa-copy-icon-btn):focus-visible,
#cwoa-unit-modal button:not(.cwoa-modal-close):not(.cwoa-unit-zoom-zone):not(.cwoa-unit-modal-legend-tip):not(.cwoa-unit-modal-am-close):not(.cwoa-am-sort-btn):not(.cwoa-part-info-btn):not(.cwoa-part-am-btn):not(.cwoa-copy-icon-btn):focus-visible {
    outline: 2px solid var(--cwoa-accent);
    outline-offset: 2px;
}

#cwoa-app .cwoa-action--primary {
    font-weight: 600;
    color: var(--cwoa-accent);
}

#cwoa-app a.cwoa-action--ghost,
#cwoa-app a.cwoa-action--ghost:visited,
.cwoa-catalog-portal__head a.cwoa-action--ghost,
.cwoa-catalog-portal__head a.cwoa-action--ghost:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding: 0.45em 0.95em;
    border-radius: var(--cwoa-radius-sm);
    border: 1px solid color-mix(in srgb, var(--cwoa-accent) 42%, var(--cwoa-border));
    background: color-mix(in srgb, var(--cwoa-accent) 7%, var(--cwoa-card));
    color: var(--cwoa-text);
}

#cwoa-app a.cwoa-action--ghost:hover,
#cwoa-app a.cwoa-action--ghost:focus-visible,
.cwoa-catalog-portal__head a.cwoa-action--ghost:hover,
.cwoa-catalog-portal__head a.cwoa-action--ghost:focus-visible {
    border-color: color-mix(in srgb, var(--cwoa-accent) 55%, var(--cwoa-border));
    background: var(--cwoa-accent-soft);
    color: var(--cwoa-text);
}

/* Ссылки-действия: без подчёркивания темы, тот же размер что и --cwoa-fs у блока */
#cwoa-app a.cwoa-action,
#cwoa-app a.cwoa-action:visited {
    text-decoration: none;
    color: var(--cwoa-accent);
}

#cwoa-app a.cwoa-action:hover:not(:disabled),
#cwoa-app a.cwoa-action:focus-visible {
    color: var(--cwoa-text);
}

#cwoa-app .cwoa-action:disabled,
#cwoa-app button:disabled:not(.cwoa-modal-close):not(.cwoa-unit-zoom-zone):not(.cwoa-qgroup-caret):not(.cwoa-qgroup-label):not(.cwoa-am-sort-btn):not(.cwoa-custom-select__trigger):not(.cwoa-copy-icon-btn),
#cwoa-unit-modal button:disabled:not(.cwoa-modal-close):not(.cwoa-unit-zoom-zone):not(.cwoa-unit-modal-legend-tip):not(.cwoa-unit-modal-am-close):not(.cwoa-am-sort-btn):not(.cwoa-part-info-btn):not(.cwoa-part-am-btn):not(.cwoa-copy-icon-btn) {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    #cwoa-app .cwoa-action,
    #cwoa-app button:not(.cwoa-modal-close):not(.cwoa-unit-zoom-zone):not(.cwoa-qgroup-caret):not(.cwoa-qgroup-label):not(.cwoa-wizard-edit-step):not(.cwoa-am-sort-btn):not(.cwoa-custom-select__trigger):not(.cwoa-copy-icon-btn),
    #cwoa-unit-modal button:not(.cwoa-modal-close):not(.cwoa-unit-zoom-zone):not(.cwoa-unit-modal-legend-tip):not(.cwoa-unit-modal-am-close):not(.cwoa-am-sort-btn):not(.cwoa-part-info-btn):not(.cwoa-part-am-btn):not(.cwoa-copy-icon-btn) {
        transition: none;
    }
}

.cwoa-error {
    color: var(--cwoa-danger);
    font-weight: 600;
}

.cwoa-details-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--cwoa-card);
    font-size: var(--cwoa-fs);
}

.cwoa-details-table th,
.cwoa-details-table td {
    border: 1px solid var(--cwoa-border);
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

.cwoa-details-table th {
    background: var(--cwoa-accent-muted);
}

.cwoa-details-table th.cwoa-part-col-icon,
.cwoa-details-table td.cwoa-part-col-icon {
    text-align: center;
    vertical-align: middle;
}

/* Modal */
body.cwoa-modal-open {
    overflow: hidden;
}

.cwoa-modal {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: block;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Полноэкранная оболочка узла; внутри каталог и ниже — аналоги (#cwoa-unit-modal-am-section) */
.cwoa-unit-modal-root {
    position: fixed;
    inset: 0;
    z-index: 100050;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    isolation: isolate;
}

.cwoa-unit-modal-root[hidden] {
    display: none !important;
}

.cwoa-unit-modal-root #cwoa-unit-modal.cwoa-modal {
    position: absolute;
    inset: 0;
}

/* Собственный контекст наложения — контент страницы не «протыкает» подложку темы */
#cwoa-unit-modal.cwoa-modal {
    isolation: isolate;
}

/*
 * Просмотр схемы в натуральном разрешении (поверх модалки узла)
 */
.cwoa-diagram-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100070;
    margin: 0;
    padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px))
        max(8px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    isolation: isolate;
}

.cwoa-diagram-lightbox:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cwoa-diagram-lightbox[hidden] {
    display: none !important;
}

.cwoa-diagram-lightbox-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--cwoa-modal-overlay);
    cursor: pointer;
}

.cwoa-diagram-lightbox-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(calc(100vw - 20px), 100%);
    max-width: min(1920px, 100%);
    max-height: 100%;
    min-height: 0;
    background: var(--cwoa-card);
    border-radius: 12px;
    box-shadow: var(--cwoa-modal-shadow);
    overflow: hidden;
}

.cwoa-diagram-lightbox-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cwoa-border);
    background: var(--cwoa-surface);
    flex-shrink: 0;
}

.cwoa-diagram-lightbox-title {
    margin: 0;
    font-size: 1em;
    line-height: 1.3;
    font-weight: 600;
    color: var(--cwoa-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.cwoa-diagram-lightbox-close {
    flex-shrink: 0;
    border: none;
    background: transparent;
    font-size: 1.75em;
    line-height: 1;
    cursor: pointer;
    color: var(--cwoa-muted);
    padding: 0 4px;
    border-radius: 4px;
}

.cwoa-diagram-lightbox-close:hover,
.cwoa-diagram-lightbox-close:focus-visible {
    color: var(--cwoa-text);
    background: var(--cwoa-border);
    outline: none;
}

.cwoa-diagram-lightbox-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--cwoa-diagram-canvas);
    padding: clamp(8px, 1.2vw, 14px);
    box-sizing: border-box;
}

.cwoa-diagram-lightbox-stage {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

.cwoa-diagram-lightbox-inner {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    line-height: 0;
}

.cwoa-diagram-lightbox-map.cwoa-unit-modal-map {
    z-index: 2;
}

.cwoa-diagram-lightbox-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(calc(100dvh - 8.5rem), calc(100vh - 8.5rem));
    margin: 0 auto;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-drag: none;
}

/* Состояние «увеличено колесом»: снимаем фит-ограничения, разрешаем стейджу
 * расти под содержимое (иначе flex-центрирование «срезает» левый край при
 * ширине контента больше viewport), показываем курсор «схватить/перетащить». */
.cwoa-diagram-lightbox-scroll--zoomed {
    cursor: grab;
}

.cwoa-diagram-lightbox-scroll--zoomed.cwoa-diagram-lightbox-panning {
    cursor: grabbing;
}

.cwoa-diagram-lightbox-scroll--zoomed .cwoa-diagram-lightbox-stage {
    display: block;
    width: max-content;
    min-width: 100%;
    text-align: center;
    align-items: initial;
    justify-content: initial;
}

.cwoa-diagram-lightbox-scroll--zoomed .cwoa-diagram-lightbox-inner {
    max-width: none;
}

.cwoa-diagram-lightbox-scroll--zoomed .cwoa-diagram-lightbox-img {
    max-width: none;
    max-height: none;
    margin: 0;
}

.cwoa-modal[hidden] {
    display: none !important;
}

.cwoa-modal-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--cwoa-modal-overlay);
    cursor: pointer;
}

.cwoa-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(96vw, 1200px);
    max-height: min(92vh, 1000px);
    background: var(--cwoa-card);
    border-radius: 12px;
    box-shadow: var(--cwoa-modal-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/*
 * Окно узла: на всю доступную область экрана (safe-area).
 */
.cwoa-modal-dialog.cwoa-unit-modal-dialog {
    position: fixed !important;
    z-index: 1;
    inset: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px))
        max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)) !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    flex: none !important;
    align-self: unset !important;
    box-sizing: border-box;
    border-radius: 12px;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
    min-width: 0;
    /* Холст как у блоков на главной: карточки каталога/аналогов читаются как «в рамке» */
    background: var(--cwoa-surface);
    box-shadow: var(--cwoa-shadow-sm);
    /* Растягивание окна при открытии аналогов (--am-phase ниже) без этого мгновенно дёргалось и ощущалось как «рывок». */
    transition: inset 0.32s var(--cwoa-motion-ease), height 0.32s var(--cwoa-motion-ease),
        min-height 0.32s var(--cwoa-motion-ease), max-height 0.32s var(--cwoa-motion-ease);
}

/* После открытия аналогов модалка растягивается на почти весь экран (как блок на главной после прокрутки) */
#cwoa-unit-modal-root.cwoa-unit-modal-root--am-phase .cwoa-unit-modal-dialog.cwoa-unit-modal-dialog {
    inset: max(4px, env(safe-area-inset-top, 0px)) max(4px, env(safe-area-inset-right, 0px))
        max(4px, env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px)) !important;
    min-height: min(calc(100dvh - 8px), calc(100vh - 8px)) !important;
    height: min(calc(100dvh - 8px), calc(100vh - 8px)) !important;
    max-height: min(calc(100dvh - 8px), calc(100vh - 8px)) !important;
}

.cwoa-unit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cwoa-border);
    /* Карточный слой поверх «холста» диалога — шапка снова читается как отдельная полоса */
    background: var(--cwoa-card);
    flex-shrink: 0;
}

/* Шапка — верх карточки узла (схема + таблица), без отдельной полосы над блоком */
.cwoa-unit-modal-catalog-stack > .cwoa-unit-modal-header {
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
}

/* Одна строка: название узла слева, подсказки занимают всё место до кнопки закрытия */
.cwoa-unit-modal-header-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

.cwoa-unit-modal-header-titles {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(42%, 20rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.cwoa-unit-modal-title {
    margin: 0;
    font-size: 1.125em;
    line-height: 1.3;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Подзаголовок: предупреждение о подписке (OEM) — сразу под названием узла */
.cwoa-catalog-access-notice {
    margin: 0;
    padding: 0.5em 0.65em 0.55em 0.75em;
    font-size: var(--cwoa-fs-sm);
    font-weight: 600;
    line-height: 1.4;
    color: #5c2c04;
    background: color-mix(in srgb, var(--cwoa-accent) 8%, #fff4e0 92%);
    border-left: 4px solid var(--cwoa-accent);
    border-radius: 6px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
    white-space: normal;
}

#cwoa-app .cwoa-catalog-access-notice--oem {
    color: #5c2c04;
    background: linear-gradient(90deg, color-mix(in srgb, var(--cwoa-accent) 12%, #fff4e0) 0%, #fff8ee 100%);
    border-left-color: var(--cwoa-accent);
}

#cwoa-app .cwoa-catalog-access-notice--am {
    color: #4a2c6b;
    background: linear-gradient(90deg, color-mix(in srgb, #6b3aad 10%, #f3ecff) 0%, #faf5ff 100%);
    border-left-color: #6b3aad;
}

/* Шапка модалки: иконки как в полоске tips + подпись обычным шрифтом; полный текст в title */
.cwoa-unit-modal-legend--strip.cwoa-unit-modal-legend--header {
    flex: 1 1 0;
    align-self: center;
    min-width: 0;
    width: auto;
    border-top: none;
    padding: 0;
    margin: 0;
    background: transparent;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-end;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Подсказки шапки: не кнопки — обычные иконки + текст темы, без hover-плашек */
.cwoa-unit-modal-legend--header .cwoa-unit-modal-legend-tip--header-chip {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0 4px;
    margin: 0;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    cursor: default;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--cwoa-text);
    font: inherit;
    font-size: var(--cwoa-fs);
    line-height: 1.35;
    text-align: left;
    box-shadow: none;
    outline: none;
    -webkit-user-select: none;
    user-select: none;
}

.cwoa-unit-modal-legend--header .cwoa-unit-modal-legend-tip--header-chip .cwoa-unit-modal-legend-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
}

.cwoa-unit-modal-legend--header .cwoa-unit-modal-legend-tip--header-chip .cwoa-unit-modal-legend-icon svg {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
    stroke-width: 2;
}

.cwoa-unit-modal-legend--header .cwoa-unit-modal-legend-tip--header-chip .cwoa-unit-modal-legend-icon svg.cwoa-legend-svg--oem-help text {
    stroke: none;
}

.cwoa-unit-modal-legend--header .cwoa-unit-modal-legend-tip--header-chip .cwoa-unit-modal-legend-caption {
    flex: 1 1 auto;
    min-width: 0;
    font-size: inherit;
    font-weight: 400;
    font-family: inherit;
    color: inherit;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 680px) {
    .cwoa-unit-modal-header-titles {
        max-width: min(46%, 14rem);
    }

    .cwoa-unit-modal-legend--strip.cwoa-unit-modal-legend--header {
        gap: 4px;
    }

    .cwoa-unit-modal-legend--header .cwoa-unit-modal-legend-tip--header-chip {
        padding: 2px 2px;
        gap: 4px;
    }

    .cwoa-unit-modal-legend--header .cwoa-unit-modal-legend-tip--header-chip .cwoa-unit-modal-legend-icon {
        width: 22px;
        height: 22px;
    }

    .cwoa-unit-modal-legend--header .cwoa-unit-modal-legend-tip--header-chip .cwoa-unit-modal-legend-icon svg {
        width: 22px;
        height: 22px;
    }

    .cwoa-unit-modal-legend--header .cwoa-unit-modal-legend-tip--header-chip .cwoa-unit-modal-legend-caption {
        font-size: var(--cwoa-fs-xs);
    }
}

/*
 * Те же чипсы подсказок, но в шапке lightbox: заголовок не должен растягиваться (flex: 0 1 auto),
 * чтобы строка получилась «title · chips · ×». Подсказки сжимаются в иконки на узких экранах.
 */
.cwoa-diagram-lightbox-toolbar .cwoa-diagram-lightbox-title {
    flex: 0 1 auto;
}

.cwoa-unit-modal-legend--lightbox.cwoa-unit-modal-legend--strip.cwoa-unit-modal-legend--header {
    flex: 0 1 auto;
    margin-left: auto;
    justify-content: flex-end;
    overflow-x: visible;
}

@media (max-width: 680px) {
    .cwoa-unit-modal-legend--lightbox.cwoa-unit-modal-legend--strip.cwoa-unit-modal-legend--header .cwoa-unit-modal-legend-caption {
        display: none;
    }
}

.cwoa-modal-close {
    border: none;
    background: transparent;
    font-size: 1.75em;
    line-height: 1;
    cursor: pointer;
    color: var(--cwoa-muted);
    padding: 0 4px;
    border-radius: 4px;
}

.cwoa-modal-close:hover,
.cwoa-modal-close:focus-visible {
    color: var(--cwoa-text);
    background: var(--cwoa-border);
    outline: none;
}

.cwoa-unit-modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
    background: transparent;
    overflow: hidden;
}

/* Прокрутка тела модалки: отступы между блоками как у #cwoa-app .cwoa-catalog-shell */
.cwoa-unit-modal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vw, 20px);
    padding: clamp(10px, 1.8vw, 18px) clamp(14px, 2.4vw, 24px) 0;
    scroll-behavior: auto;
}

/* Полоса внизу как шапка — визуально закрывает окно, когда блока аналогов нет или после контента */
.cwoa-unit-modal-scroll-footer {
    flex: 0 0 auto;
    margin-top: auto;
    min-height: 14px;
    margin-inline: calc(-1 * clamp(14px, 2.4vw, 24px));
    padding: 10px clamp(14px, 2.4vw, 24px) calc(10px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background: color-mix(in srgb, var(--cwoa-surface) 92%, var(--cwoa-border));
    border-top: 1px solid var(--cwoa-border);
}

/* Первый блок: только каталог (схема + таблица), отдельная карточка от секции аналогов */
.cwoa-unit-modal-catalog-block {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

/* Карточка каталога на холсте модалки */
.cwoa-unit-modal-catalog-stack {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    align-self: stretch;
    margin: 0;
    border: 1px solid var(--cwoa-border);
    border-radius: var(--cwoa-radius-lg);
    overflow: hidden;
    background: var(--cwoa-card);
}

/* Одна строка иконок; подсказка по hover/focus (title); горизонтальный скролл на узком экране */
.cwoa-unit-modal-legend--strip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    margin: 0;
    border-top: 1px solid var(--cwoa-border-inner);
    background: color-mix(in srgb, var(--cwoa-surface) 92%, transparent);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    box-sizing: border-box;
}

/* Иконки tips в блоке каталога (полоска под сеткой); не смешивать с .cwoa-unit-modal-legend-tip--header-chip в шапке */
.cwoa-unit-modal-legend-tip:not(.cwoa-unit-modal-legend-tip--header-chip) {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--cwoa-accent) 30%, var(--cwoa-border));
    border-radius: var(--cwoa-radius-sm);
    background: color-mix(in srgb, var(--cwoa-accent) 10%, transparent);
    color: var(--cwoa-accent);
    cursor: help;
    box-sizing: border-box;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.cwoa-unit-modal-legend-tip:not(.cwoa-unit-modal-legend-tip--header-chip):hover,
.cwoa-unit-modal-legend-tip:not(.cwoa-unit-modal-legend-tip--header-chip):focus-visible {
    background: var(--cwoa-accent-muted);
    color: var(--cwoa-text);
    border-color: color-mix(in srgb, var(--cwoa-accent) 45%, var(--cwoa-border));
    outline: none;
}

.cwoa-unit-modal-legend-tip .cwoa-unit-modal-legend-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    padding: 0;
}

.cwoa-unit-modal-legend-tip .cwoa-unit-modal-legend-icon svg {
    width: 20px;
    height: 20px;
}

@keyframes cwoa-am-section-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Закрытый блок аналогов не должен оставлять полоску внизу модалки */
.cwoa-unit-modal-am-section[hidden] {
    display: none !important;
}

/* Второй блок в модалке: не min-height:0 + flex-shrink — иначе во flex-колонке скролла секция схлопывается «в полоску». */
.cwoa-unit-modal-am-section {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    align-self: stretch;
    position: relative;
    z-index: auto;
    padding: 12px 16px 16px;
    margin: 0;
    border: 1px solid var(--cwoa-border);
    border-radius: var(--cwoa-radius-lg);
    background: var(--cwoa-card);
    scroll-margin-top: 0;
    display: flex;
    flex-direction: column;
    min-height: auto;
    overflow: hidden;
}

#cwoa-unit-modal-root.cwoa-unit-modal-root--am-phase .cwoa-unit-modal-am-section:not([hidden]) {
    flex: 0 0 auto;
    min-height: min-content;
    max-height: none;
}

/* Единое правило плавного появления для аналогов и поставщиков — оба блока появляются только когда весь результат уже собран (JS снимает [hidden] только после завершения запроса). */
.cwoa-unit-modal-am-section:not([hidden]),
.cwoa-unit-modal-suppliers-section:not([hidden]) {
    animation: cwoa-am-section-in 0.42s var(--cwoa-motion-ease) both;
}

@media (prefers-reduced-motion: reduce) {
    .cwoa-unit-modal-am-section:not([hidden]),
    .cwoa-unit-modal-suppliers-section:not([hidden]) {
        animation: none;
    }

    .cwoa-modal-dialog.cwoa-unit-modal-dialog {
        transition: none !important;
    }
}

.cwoa-unit-modal-am-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
    flex-shrink: 0;
}

.cwoa-unit-modal-am-head .cwoa-unit-modal-am-head-titles {
    flex: 1 1 0;
    min-width: 0;
}

.cwoa-unit-modal-am-head-titles--stacked {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.cwoa-unit-modal-am-notice {
    align-self: center;
    width: min(96%, 66rem);
    margin: 0 auto;
    text-align: center;
}

.cwoa-unit-modal-am-head .cwoa-unit-modal-am-head-titles .cwoa-unit-modal-am-heading {
    flex: 0 0 auto;
}

.cwoa-unit-modal-am-heading {
    margin: 0;
    font-size: 1em;
    font-weight: 600;
    color: var(--cwoa-text);
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}

.cwoa-unit-modal-am-close {
    flex-shrink: 0;
    align-self: flex-start;
    margin: 0;
    padding: 2px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--cwoa-muted);
}

.cwoa-unit-modal-am-close:hover,
.cwoa-unit-modal-am-close:focus-visible {
    color: var(--cwoa-text);
    background: var(--cwoa-border);
    outline: none;
}

/* Проброс колесика к #cwoa-unit-modal-scroll на краях списка — JS cwoaAttachUnitModalAmWheelChain */
.cwoa-unit-modal-am-content {
    flex: 0 1 auto;
    min-height: 0;
    max-height: min(52vh, 560px);
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
}

#cwoa-unit-modal-root.cwoa-unit-modal-root--am-phase .cwoa-unit-modal-am-content {
    flex: 0 1 auto;
    max-height: min(65vh, 720px);
}

.cwoa-unit-modal-am-content .cwoa-error {
    font-size: var(--cwoa-fs);
    line-height: 1.45;
    margin: 0;
}

/*
 * Не сжимать основной блок: иначе flex забирает высоту у shell — скролл у .cwoa-unit-modal-body.
 */
.cwoa-unit-modal-unit-shell {
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 100%;
    min-height: min(42dvh, 420px);
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.cwoa-unit-modal-main {
    display: grid;
    grid-template-columns: minmax(0, 52%) minmax(0, 48%);
    /*
     * Одна строка: максимум доступной высоты под схему и таблицу (ровная строка сетки).
     */
    grid-template-rows: minmax(0, min(78dvh, 880px));
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(78dvh, 880px);
    overflow: hidden;
    align-self: stretch;
    align-items: stretch;
}

/* Одна подложка на всю колонку схемы (тулбар + область изображения), без более светлой полосы над картинкой */
.cwoa-unit-modal-diagram-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    height: 100%;
    align-self: stretch;
    overflow: hidden;
    background: var(--cwoa-diagram-canvas);
    border-right: 1px solid var(--cwoa-border);
}

.cwoa-unit-modal-oem-notice-row {
    align-self: center;
    width: min(96%, 66rem);
    margin: 8px auto 10px;
    text-align: center;
}

/* Рамка без полей — больше полезной площади под изображение; хотспоты считаются от inner+img как раньше */
.cwoa-unit-modal-diagram-frame {
    display: block;
    flex: 0 1 auto;
    align-self: center;
    max-width: 100%;
    max-height: 100%;
    line-height: 0;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.cwoa-unit-modal-diagram-inner {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    line-height: 0;
}

.cwoa-unit-modal-map {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    box-sizing: border-box;
}

.cwoa-diagram-hotspot {
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 2px;
    background: transparent;
    cursor: inherit;
}

.cwoa-diagram-hotspot:hover,
.cwoa-diagram-hotspot.cwoa-diagram-hotspot--active {
    border-color: var(--cwoa-danger);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cwoa-danger) 38%, transparent);
}

.cwoa-diagram-hotspot.cwoa-diagram-hotspot--selected {
    border-color: var(--cwoa-danger);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cwoa-danger) 55%, transparent);
}

/* Схема по центру без «резин» — максимум места под картинку */
.cwoa-unit-modal-viewport {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
    justify-content: center;
    align-items: center;
    /* Без зума схема вписана — скролл не показываем (класс --zoomed включает overflow: auto в JS) */
    overflow: hidden;
    position: relative;
    padding: 0;
    background: var(--cwoa-diagram-canvas);
    font-size: 0;
}

.cwoa-unit-modal-viewport.cwoa-unit-modal-viewport--zoomed {
    overflow: auto;
    justify-content: flex-start;
    /* Без center/«резин» — иначе WebKit занижает scrollWidth/Height и нельзя дотянуться до краёв при 1:1 */
    align-items: flex-start;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, currentColor 35%, transparent) transparent;
}

.cwoa-unit-modal-viewport.cwoa-unit-modal-viewport--zoomed .cwoa-unit-modal-diagram-frame {
    align-self: flex-start;
}

.cwoa-unit-modal-viewport.cwoa-unit-modal-viewport--zoomed::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.cwoa-unit-modal-viewport.cwoa-unit-modal-viewport--zoomed::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 5px;
}

.cwoa-unit-modal-viewport.cwoa-unit-modal-viewport--zoomed::-webkit-scrollbar-track {
    background: transparent;
}

.cwoa-unit-modal-viewport.cwoa-modal-vp-pannable {
    cursor: grab;
}

.cwoa-unit-modal-viewport.cwoa-unit-modal-panning {
    cursor: grabbing;
    user-select: none;
}

.cwoa-unit-modal-viewport[hidden] {
    display: none !important;
}

.cwoa-modal-diagram-img {
    display: block;
    position: relative;
    z-index: 0;
    max-width: none;
    border-radius: var(--cwoa-radius-sm);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--cwoa-border) 55%, transparent);
}

#cwoa-unit-modal-viewport:not(.cwoa-modal-vp-pannable) .cwoa-modal-diagram-img {
    cursor: zoom-in;
}

.cwoa-unit-modal-noimg-msg {
    flex: 1 1 auto;
    margin: 0;
    padding: 24px;
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-muted);
    text-align: center;
}

.cwoa-unit-modal-parts-wrap {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    align-self: stretch;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior-x: contain;
    padding: clamp(12px, 1.6vw, 20px);
    background: var(--cwoa-card);
    box-sizing: border-box;
}

.cwoa-am-error-hint {
    margin: 10px 0 0;
    font-size: var(--cwoa-fs-sm);
    line-height: 1.45;
    color: var(--cwoa-muted);
}

.cwoa-unit-modal-table {
    font-size: var(--cwoa-fs);
    min-width: 0;
    width: 100%;
    max-width: 100%;
    table-layout: auto;
}

.cwoa-unit-modal-table tbody tr.cwoa-part-row--hover:not(.cwoa-part-row--selected) td {
    background: var(--cwoa-accent-muted);
}

.cwoa-unit-modal-table tbody tr.cwoa-part-row--selected td {
    background: color-mix(in srgb, var(--cwoa-accent) 26%, transparent);
}

.cwoa-part-col-icon {
    width: 2.5rem;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

#cwoa-unit-modal .cwoa-unit-modal-table th.cwoa-part-col-icon,
#cwoa-unit-modal .cwoa-unit-modal-table td.cwoa-part-col-icon {
    min-width: 2.75rem;
    width: 3rem;
    max-width: 5.5rem;
    box-sizing: border-box;
}

#cwoa-unit-modal .cwoa-part-col-icon .cwoa-part-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 4px;
    margin: 0;
    line-height: 1.4;
    font-weight: 600;
    font-size: inherit;
    font-family: inherit;
    color: var(--cwoa-text);
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    text-decoration: none;
    cursor: pointer;
}

#cwoa-unit-modal .cwoa-part-col-icon .cwoa-part-info-btn:hover,
#cwoa-unit-modal .cwoa-part-col-icon .cwoa-part-info-btn:focus-visible {
    color: var(--cwoa-text);
    background: transparent;
    outline: none;
}

/* Колонка A — явная ссылка на аналоги */
#cwoa-unit-modal .cwoa-part-col-icon .cwoa-part-am-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 2px;
    margin: 0;
    line-height: 1.4;
    font-weight: 600;
    font-size: inherit;
    font-family: inherit;
    color: var(--cwoa-accent);
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

#cwoa-unit-modal .cwoa-part-col-icon .cwoa-part-am-btn:hover,
#cwoa-unit-modal .cwoa-part-col-icon .cwoa-part-am-btn:focus-visible {
    color: color-mix(in srgb, var(--cwoa-accent) 75%, var(--cwoa-text));
    background: transparent;
    outline: 2px solid color-mix(in srgb, var(--cwoa-accent) 35%, transparent);
    outline-offset: 1px;
    text-decoration-thickness: 2px;
}

.cwoa-part-action-placeholder {
    color: var(--cwoa-faint);
    font-size: var(--cwoa-fs-sm);
}

.cwoa-part-detail-popover:not([hidden]) {
    z-index: 100060;
}

.cwoa-part-detail-popover {
    pointer-events: auto;
    background: color-mix(in srgb, var(--cwoa-card) 92%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--cwoa-border);
    border-radius: var(--cwoa-radius);
    box-shadow: 0 6px 24px color-mix(in srgb, currentColor 14%, transparent);
    padding: 10px 12px;
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-text);
}

.cwoa-part-detail-popover-inner {
    max-height: min(320px, 50vh);
    overflow: auto;
}

/* Как APC row.twig: каждая строка — пара name / value из OEM */
.cwoa-part-detail-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.35em;
    margin-bottom: 6px;
    line-height: 1.45;
}

.cwoa-part-detail-item:last-child {
    margin-bottom: 0;
}

.cwoa-part-detail-name {
    font-weight: 600;
    flex: 0 1 auto;
}

.cwoa-part-detail-value {
    font-weight: 400;
    flex: 1 1 auto;
}

.cwoa-unit-am-dock {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--cwoa-border);
    border-radius: var(--cwoa-radius-lg);
    background: var(--cwoa-card);
    box-shadow: var(--cwoa-shadow-sm);
}

.cwoa-unit-am-dock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cwoa-unit-am-dock-title {
    margin: 0;
    font-size: 1.0625em;
    font-weight: 600;
}

.cwoa-unit-am-dock-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cwoa-unit-am-dock-diagram-wrap img {
    display: block;
    max-width: min(560px, 100%);
    height: auto;
    border: 1px solid var(--cwoa-border);
    border-radius: 4px;
}

.cwoa-am-loading,
.cwoa-am-empty {
    margin: 0;
    color: var(--cwoa-muted);
    font-size: var(--cwoa-fs);
}

@media (max-width: 900px) {
    .cwoa-main-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        min-height: unset;
    }

    #cwoa-app .cwoa-catalog-info .cwoa-main-grid {
        grid-template-rows: auto auto;
    }

    .cwoa-modal-dialog.cwoa-unit-modal-dialog {
        inset: max(6px, env(safe-area-inset-top, 0px)) max(6px, env(safe-area-inset-right, 0px))
            max(6px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)) !important;
        min-height: 0 !important;
        border-radius: 10px;
    }

    /*
     * Узкий экран: column flex надёжнее grid 1fr при height:auto — иначе нижний блок с таблицей раздувается,
     * верх с схемой остаётся коротким, список запчастей не скроллится внутри ячейки.
     */
    .cwoa-unit-modal-main {
        display: flex;
        flex-direction: column;
        grid-template-columns: unset;
        grid-template-rows: unset;
        align-items: stretch;
        min-height: 0;
        max-height: min(88dvh, 900px);
        overflow: hidden;
    }

    .cwoa-unit-modal-diagram-pane {
        flex: 0 1 auto;
        max-height: min(48dvh, 480px);
        min-height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--cwoa-border);
        overflow: hidden;
    }

    .cwoa-unit-modal-viewport {
        min-height: 0;
    }

    .cwoa-unit-modal-parts-wrap {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
    }
}

/* Тема / variant без #cwoa-app — тот же шаг сетки, что у #cwoa-app */
.cwoa-minimal-outer {
    --cwoa-portal-stack-gap: clamp(12px, 1.8vw, 20px);
    padding-bottom: clamp(10px, 1.8vw, 20px);
    /* Перебиваем style.css темы (gap: 10px): один шаг между шапкой, main и подвалом */
    gap: var(--cwoa-portal-stack-gap);
    box-sizing: border-box;
}

/*
 * shell="theme": шапка (.cwoa-catalog-portal__head) снаружи #cwoa-app — зазор даёт .cwoa-minimal-outer gap.
 * Убираем дублирующий padding-top у оболочки, иначе «шапка → поиск» визуально уже/шире, чем gap между карточками в main.
 */
.cwoa-minimal-outer .cwoa-minimal-main #cwoa-app .cwoa-catalog-shell {
    padding-top: 0;
}

/*
 * shell="theme": подвал — сосед main во flex .cwoa-minimal-outer (уже есть gap).
 * padding-bottom у #cwoa-app иначе суммируется с этим gap → «воздух» до подвала вдвое больше шага между карточками.
 * Нижний отступ страницы остаётся на .cwoa-minimal-outer { padding-bottom }.
 */
.cwoa-minimal-outer .cwoa-minimal-main #cwoa-app.cwoa-app {
    padding-bottom: 0;
}

/* Лендинг [cwoa_landing]: воздух под коротким кодом каталога */
.cwoa-landing {
    padding-bottom: clamp(10px, 1.8vw, 20px);
    box-sizing: border-box;
}

/* Catalog shortcode footer (company, links, design credit); also theme shell footers outside #cwoa-app */
#cwoa-app .cwoa-catalog-footer,
.cwoa-minimal-outer > .cwoa-catalog-footer {
    /* Было margin-top: auto для «sticky» подвала — во flex-колонке это съедает всё свободное место сверху подвала
     * (огромная белая полоса на любой странице, где предок или #cwoa-app выше контента).
     * Отступ от контента задаётся на .cwoa-catalog-footer__shell (clamp ниже). */
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    border-top: none;
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-muted);
    flex-shrink: 0;
}

/* Визуально отделить подвал от контента — та же «плитка», что у .cwoa-top */
#cwoa-app .cwoa-catalog-footer__shell,
.cwoa-minimal-outer > .cwoa-catalog-footer .cwoa-catalog-footer__shell {
    padding: clamp(0.8rem, 1.7vw, 1.05rem) clamp(1rem, 2.2vw, 1.3rem);
    padding-bottom: clamp(0.72rem, 1.45vw, 0.92rem);
    border-radius: calc(var(--cwoa-radius-lg) + 4px);
    border: 1px solid color-mix(in srgb, var(--cwoa-accent) 30%, var(--cwoa-border));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cwoa-accent) 10%, var(--cwoa-card)),
        color-mix(in srgb, var(--cwoa-card) 93%, white)
    );
    box-shadow:
        0 1px 0 color-mix(in srgb, white 50%, transparent),
        0 14px 40px -24px color-mix(in srgb, var(--cwoa-accent) 38%, transparent);
    box-sizing: border-box;
}

/* Шорткод без темы: подвал — сосед .cwoa-catalog-shell, отступ один */
#cwoa-app .cwoa-catalog-footer__shell {
    margin-top: var(--cwoa-portal-stack-gap, clamp(12px, 1.8vw, 20px));
}

/* shell="theme": подвал — следующий flex-элемент после main; зазор задаёт gap у .cwoa-minimal-outer */
.cwoa-minimal-outer > .cwoa-catalog-footer .cwoa-catalog-footer__shell {
    margin-top: 0;
}

#cwoa-app .cwoa-catalog-footer__grid,
.cwoa-minimal-outer > .cwoa-catalog-footer .cwoa-catalog-footer__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 2rem;
}

#cwoa-app .cwoa-catalog-footer__brand,
.cwoa-minimal-outer > .cwoa-catalog-footer .cwoa-catalog-footer__brand {
    flex: 1 1 16rem;
    min-width: min(100%, 14rem);
}

#cwoa-app .cwoa-catalog-footer__company,
.cwoa-minimal-outer > .cwoa-catalog-footer .cwoa-catalog-footer__company {
    margin: 0 0 0.35rem;
    font-weight: 600;
    color: var(--cwoa-text);
    font-size: var(--cwoa-fs);
}

#cwoa-app .cwoa-catalog-footer__details,
.cwoa-minimal-outer > .cwoa-catalog-footer .cwoa-catalog-footer__details {
    margin: 0;
    line-height: 1.45;
    max-width: 56ch;
}

#cwoa-app .cwoa-catalog-footer__nav,
.cwoa-minimal-outer > .cwoa-catalog-footer .cwoa-catalog-footer__nav {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}

#cwoa-app .cwoa-catalog-footer__links,
.cwoa-minimal-outer > .cwoa-catalog-footer .cwoa-catalog-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.25rem;
    justify-content: flex-end;
}

#cwoa-app .cwoa-catalog-footer__link,
.cwoa-minimal-outer > .cwoa-catalog-footer .cwoa-catalog-footer__link {
    color: var(--cwoa-accent, var(--cwoa-text));
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: break-word;
}

#cwoa-app .cwoa-catalog-footer__link:hover,
#cwoa-app .cwoa-catalog-footer__link:focus-visible,
.cwoa-minimal-outer > .cwoa-catalog-footer .cwoa-catalog-footer__link:hover,
.cwoa-minimal-outer > .cwoa-catalog-footer .cwoa-catalog-footer__link:focus-visible {
    text-decoration-thickness: 2px;
}

#cwoa-app .cwoa-catalog-footer__design,
.cwoa-minimal-outer > .cwoa-catalog-footer .cwoa-catalog-footer__design {
    margin: 1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid color-mix(in srgb, var(--cwoa-accent) 14%, var(--cwoa-border));
    font-size: var(--cwoa-fs-xs);
    color: var(--cwoa-muted);
}

#cwoa-app .cwoa-catalog-footer__design-credit,
.cwoa-minimal-outer > .cwoa-catalog-footer .cwoa-catalog-footer__design-credit {
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-inline-start: 0.35rem;
    color: var(--cwoa-text);
    white-space: nowrap;
}

@media (max-width: 600px) {
    #cwoa-app .cwoa-catalog-footer__links,
    .cwoa-minimal-outer > .cwoa-catalog-footer .cwoa-catalog-footer__links {
        justify-content: flex-start;
    }
}

/* Contact page: intro + modal (legal shortcode) */
.cwoa-contact-page {
    max-width: min(1120px, 100%);
    margin-inline: auto;
    margin-bottom: clamp(10px, 1.8vw, 20px);
    padding-inline: clamp(12px, 3vw, 24px);
    box-sizing: border-box;
}

.cwoa-contact-intro {
    padding: 1.25rem 1.35rem;
    margin-bottom: 1rem;
}

.cwoa-contact-intro__title {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    color: var(--cwoa-text);
}

.cwoa-contact-intro__text {
    margin: 0 0 1rem;
    line-height: 1.5;
    color: var(--cwoa-muted);
    font-size: var(--cwoa-fs-sm);
}

.cwoa-contact-modal[hidden] {
    display: none !important;
}

.cwoa-contact-modal:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cwoa-contact-modal {
    position: fixed;
    inset: 0;
    z-index: 100055;
    padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
        max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    margin: 0;
    box-sizing: border-box;
    isolation: isolate;
}

.cwoa-contact-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--cwoa-modal-overlay, rgba(15, 23, 42, 0.45));
    cursor: pointer;
}

.cwoa-contact-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 440px);
    max-height: min(92vh, 680px);
    overflow: auto;
    background:
        linear-gradient(
            165deg,
            color-mix(in srgb, var(--cwoa-card) 95%, white),
            color-mix(in srgb, var(--cwoa-card) 88%, var(--cwoa-accent))
        );
    border: 1px solid color-mix(in srgb, var(--cwoa-accent) 24%, var(--cwoa-border));
    border-radius: calc(var(--cwoa-radius-lg, 12px) + 2px);
    box-shadow:
        0 1px 0 color-mix(in srgb, white 50%, transparent),
        0 22px 56px -26px color-mix(in srgb, var(--cwoa-accent) 45%, transparent),
        var(--cwoa-modal-shadow);
}

/* Legal/contact modals: same entrance as #cwoa-unit-modal (backdrop fade + dialog lift). */
.cwoa-contact-modal:not([hidden]):not(.cwoa-motion-in) .cwoa-contact-modal__backdrop {
    opacity: 0;
}

.cwoa-contact-modal:not([hidden]):not(.cwoa-motion-in) .cwoa-contact-modal__dialog {
    opacity: 0;
    transform: translateY(14px) scale(0.992);
}

.cwoa-contact-modal.cwoa-motion-in .cwoa-contact-modal__backdrop {
    opacity: 1;
    transition: opacity calc(var(--cwoa-reveal-duration) * 0.95) var(--cwoa-motion-ease);
}

.cwoa-contact-modal.cwoa-motion-in .cwoa-contact-modal__dialog {
    opacity: 1;
    transform: none;
    transition:
        opacity calc(var(--cwoa-reveal-duration) * 1.02) var(--cwoa-motion-ease),
        transform calc(var(--cwoa-reveal-duration) * 1.02) var(--cwoa-motion-ease);
}

/* Terms modal: wider layout; header fixed, body scrolls */
.cwoa-terms-modal .cwoa-contact-modal__dialog {
    width: min(100%, 680px);
    max-height: min(92vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.cwoa-terms-modal .cwoa-contact-modal__header {
    flex-shrink: 0;
}

.cwoa-terms-modal__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 16px;
    -webkit-overflow-scrolling: touch;
}

.cwoa-legal-terms--in-modal {
    padding: 2px 0 0;
    margin: 0;
    max-width: none;
}

.cwoa-contact-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 13px;
    border-bottom: 1px solid color-mix(in srgb, var(--cwoa-border) 82%, var(--cwoa-accent));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--cwoa-accent) 12%, var(--cwoa-card)),
            color-mix(in srgb, var(--cwoa-card) 96%, white)
        );
}

.cwoa-contact-modal__title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--cwoa-text);
    line-height: 1.25;
}

.cwoa-contact-modal__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--cwoa-muted);
    padding: 0;
    border-radius: 999px;
    transition:
        background-color 0.16s ease,
        color 0.16s ease,
        border-color 0.16s ease;
}

.cwoa-contact-modal__close:hover,
.cwoa-contact-modal__close:focus-visible {
    color: var(--cwoa-text);
    border-color: color-mix(in srgb, var(--cwoa-accent) 30%, transparent);
    background: color-mix(in srgb, var(--cwoa-accent-soft) 65%, var(--cwoa-card));
}

.cwoa-contact-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: clamp(14px, 2.5vw, 20px) clamp(14px, 2.5vw, 22px) 18px;
    background: color-mix(in srgb, var(--cwoa-card) 97%, white);
}

/* Поля и кнопки на странице контактов вне #cwoa-app — те же токены, что у каталога */
#cwoa-contact-modal .cwoa-contact-modal__dialog {
    width: min(100%, 520px);
}

.cwoa-contact-modal .cwoa-contact-form .cwoa-field-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0 0 14px;
}

.cwoa-contact-modal .cwoa-contact-form .cwoa-field-row:last-of-type {
    margin-bottom: 4px;
}

.cwoa-contact-modal .cwoa-contact-form .cwoa-field-label,
.cwoa-contact-modal .cwoa-contact-form legend.cwoa-field-label {
    font-size: var(--cwoa-fs-sm);
    font-weight: 600;
    color: var(--cwoa-text);
    margin: 0;
    padding: 0;
}

.cwoa-contact-modal .cwoa-contact-form input.cwoa-field,
.cwoa-contact-modal .cwoa-contact-form textarea.cwoa-field {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.75rem;
    border-radius: var(--cwoa-radius-sm);
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 88%, var(--cwoa-accent));
    font-family: inherit;
    font-size: var(--cwoa-fs-sm);
    line-height: 1.4;
    min-height: 2.5rem;
    background: var(--cwoa-bg, #fff);
    color: var(--cwoa-text);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.cwoa-contact-modal .cwoa-contact-form textarea.cwoa-field {
    min-height: 7.5rem;
    resize: vertical;
}

.cwoa-contact-modal .cwoa-contact-form input.cwoa-field:focus-visible,
.cwoa-contact-modal .cwoa-contact-form textarea.cwoa-field:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--cwoa-accent) 55%, var(--cwoa-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cwoa-accent) 22%, transparent);
}

.cwoa-contact-form__turnstile-wrap {
    margin: 2px 0 4px;
    width: 100%;
}

.cwoa-contact-form__turnstile-wrap .cf-turnstile {
    width: 100%;
}

.cwoa-contact-form__turnstile-wrap iframe {
    width: 100% !important;
}

.cwoa-contact-form .cwoa-contact-message {
    min-height: 120px;
    resize: vertical;
}

.cwoa-contact-form__audience {
    border: 0;
    margin: 0 0 16px;
    padding: 0;
}

.cwoa-contact-form__audience .cwoa-field-label {
    padding: 0;
}

.cwoa-contact-form__audience-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.cwoa-contact-form__audience-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    cursor: pointer;
    font-weight: normal;
    padding: 0.5rem 0.6rem;
    border-radius: var(--cwoa-radius-sm);
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 90%, var(--cwoa-accent));
    background: color-mix(in srgb, var(--cwoa-card) 97%, white);
    transition:
        border-color 0.16s ease,
        background-color 0.16s ease;
}

.cwoa-contact-form__audience-item input {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--cwoa-accent);
    cursor: pointer;
}

.cwoa-contact-form__audience-item:hover {
    border-color: color-mix(in srgb, var(--cwoa-accent) 38%, var(--cwoa-border));
    background: color-mix(in srgb, var(--cwoa-accent-soft) 55%, transparent);
}

.cwoa-contact-form__audience-item:has(input:checked) {
    border-color: color-mix(in srgb, var(--cwoa-accent) 55%, var(--cwoa-border));
    background: color-mix(in srgb, var(--cwoa-accent-soft) 70%, var(--cwoa-card));
}

.cwoa-contact-form__audience-item span {
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-text);
}

.cwoa-contact-form__footer {
    display: flex;
    justify-content: stretch;
    margin-top: 0;
    padding-top: 4px;
    border-top: 1px solid color-mix(in srgb, var(--cwoa-border) 84%, transparent);
}

.cwoa-contact-form__footer .cwoa-action.cwoa-action--primary {
    flex: 1;
    justify-content: center;
    min-height: 2.75rem;
    padding: 11px 18px;
    border: none;
    border-radius: var(--cwoa-radius-sm);
    background: var(--cwoa-accent);
    color: #fff;
    font: inherit;
    font-weight: 650;
    font-size: var(--cwoa-fs);
    cursor: pointer;
    box-shadow: var(--cwoa-shadow-sm);
    transition:
        filter var(--cwoa-layout-duration) var(--cwoa-motion-ease),
        transform calc(var(--cwoa-reveal-duration) * 0.35) var(--cwoa-motion-ease);
}

.cwoa-contact-form__footer .cwoa-action.cwoa-action--primary:hover:not(:disabled) {
    filter: brightness(1.06);
}

.cwoa-contact-form__footer .cwoa-action.cwoa-action--primary:active:not(:disabled) {
    transform: translateY(1px);
}

.cwoa-contact-form__footer .cwoa-action.cwoa-action--primary:focus-visible {
    outline: 2px solid var(--cwoa-accent);
    outline-offset: 2px;
}

/* Кнопка «Открыть форму» на странице контактов (вне #cwoa-app) */
.cwoa-contact-intro .cwoa-action.cwoa-action--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border: none;
    border-radius: var(--cwoa-radius-sm);
    background: var(--cwoa-accent);
    color: #fff;
    font: inherit;
    font-weight: 650;
    font-size: var(--cwoa-fs);
    cursor: pointer;
    box-shadow: var(--cwoa-shadow-sm);
}

.cwoa-contact-intro .cwoa-action.cwoa-action--primary:hover:not(:disabled) {
    filter: brightness(1.06);
}

.cwoa-contact-intro .cwoa-action.cwoa-action--primary:focus-visible {
    outline: 2px solid var(--cwoa-accent);
    outline-offset: 2px;
}

.cwoa-contact-form__status {
    margin: 10px 0 0;
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-muted);
}

.cwoa-contact-form__hp {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Terms of use shortcode */
.cwoa-legal-terms {
    padding: 1.25rem 1.35rem;
    margin-inline: auto;
    margin-bottom: clamp(10px, 1.8vw, 20px);
    max-width: min(1120px, 100%);
}

.cwoa-contact-page > .cwoa-legal-terms:last-child {
    margin-bottom: 0;
}

.cwoa-legal-terms__title {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
    color: var(--cwoa-text);
}

.cwoa-legal-terms__lead {
    margin: 0 0 1rem;
    color: color-mix(in srgb, var(--cwoa-text) 78%, var(--cwoa-muted));
    font-size: var(--cwoa-fs-sm);
    line-height: 1.48;
}

.cwoa-legal-terms__body {
    font-size: var(--cwoa-fs-sm);
    line-height: 1.55;
    color: color-mix(in srgb, var(--cwoa-text) 95%, black);
}

.cwoa-legal-terms__body h2 {
    margin: 1.35rem 0 0.5rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--cwoa-text);
    padding-top: 0.4rem;
    border-top: 1px solid color-mix(in srgb, var(--cwoa-border) 82%, transparent);
}

.cwoa-legal-terms__body h2:first-child {
    margin-top: 0;
}

.cwoa-legal-terms__body p {
    margin: 0 0 0.65rem;
}

/* WooCommerce: личный кабинет в той же оболочке, что каталог; слева — «дерево» разделов */
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-portal-main {
    width: 100%;
    min-width: 0;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-shell {
    width: 100%;
    max-width: min(1920px, 100%);
    margin-inline: auto;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-grid {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: clamp(12px, 2vw, 20px);
    align-items: start;
}

/* Без отдельного скролла в колонке дерева (иначе overflow-x:hidden + visible даёт auto по Y). */
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar {
    max-height: none;
    overflow: visible;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar .cwoa-tree-mount {
    overflow: visible;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-qlist {
    margin: 0;
    padding: 0;
}

/* Кабинет: отступы списка; цвета/рамки/hover — общий блок «Дерево категорий» выше. */
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-qlist.cwoa-qgroups-list > li {
    margin: 6px 0;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-qlist .cwoa-qgroup-children {
    margin-top: 10px;
    list-style: none;
    padding-left: 8px;
}

/* В дереве кабинета закрытые подветки не должны влиять на высоту родительской строки. */
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-qlist .cwoa-qgroup-item:not(.is-open) > .cwoa-qgroup-children {
    display: none;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-qlist .cwoa-qgroup-item.is-open > .cwoa-qgroup-children {
    display: block;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-qlist .cwoa-qgroup-children > .cwoa-qgroup-item {
    margin: 8px 0 0;
    list-style: none;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-qlist .cwoa-qgroup-children > .cwoa-qgroup-item:first-child {
    margin-top: 0;
}

#cwoa-app.cwoa-app--woocommerce-account a.cwoa-wc-account-nav-link {
    text-decoration: none;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-qlist .cwoa-qgroup-label.cwoa-wc-account-nav-link {
    font-weight: 600;
    color: var(--cwoa-text);
}

body.cwoa-wc-account-page.woocommerce-account .woocommerce #cwoa-app .cwoa-wc-account-qlist a.cwoa-wc-account-nav-link {
    color: var(--cwoa-text) !important;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-qlist .cwoa-qgroup-item.is-active > .cwoa-qgroup-row .cwoa-qgroup-label.cwoa-wc-account-nav-link,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-qlist .cwoa-qgroup-item.has-children.is-active > .cwoa-qgroup-row .cwoa-wc-account-subs-hub,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-qlist .cwoa-wc-account-nav-child.is-active > .cwoa-qgroup-row .cwoa-wc-account-nav-link {
    color: var(--cwoa-text);
    background: transparent !important;
}

/* Темы WooCommerce: активный пункт меню часто с белой «плашкой» — убираем, остаётся рамка/полоска у li. */
body.cwoa-wc-account-page.woocommerce-account .woocommerce #cwoa-app .woocommerce-MyAccount-navigation li.is-active,
body.cwoa-wc-account-page.woocommerce-account .woocommerce #cwoa-app .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--active {
    background: transparent !important;
}

body.cwoa-wc-account-page.woocommerce-account .woocommerce #cwoa-app .woocommerce-MyAccount-navigation li.is-active a,
body.cwoa-wc-account-page.woocommerce-account .woocommerce #cwoa-app .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--active a {
    background: transparent !important;
}

/* Подписки: заголовок — ссылка на хаб; раскрытие только кареткой (как каталог). */
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-qlist .cwoa-wc-account-subs-hub {
    width: 100%;
    text-align: left;
    font-weight: 600;
    color: var(--cwoa-text);
    cursor: pointer;
}

body.cwoa-wc-account-page.woocommerce-account .woocommerce #cwoa-app .cwoa-wc-account-qlist a.cwoa-wc-account-subs-hub {
    color: var(--cwoa-text) !important;
}

#cwoa-app.cwoa-app--woocommerce-account #cwoa-wc-plans-active-anchor,
#cwoa-app.cwoa-app--woocommerce-account #cwoa-wc-plans-archive-anchor,
#cwoa-app.cwoa-app--woocommerce-account #cwoa-wc-plans-catalog-anchor {
    scroll-margin-top: 1.25rem;
}

@keyframes cwoa-wc-plans-panel-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans--active,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans--archive,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans--catalog {
    animation: cwoa-wc-plans-panel-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Catalog plans: explicit interactive hover state for cards with full description modal. */
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans--catalog .cwoa-pricing-grid--wc-plans .cwoa-pricing-card--plan-h[data-cwoa-plan-modal]:hover,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans--catalog .cwoa-pricing-grid--wc-plans .cwoa-pricing-card--plan-h[data-cwoa-plan-modal]:focus-visible,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans--catalog .cwoa-pricing-grid--wc-plans .cwoa-pricing-card--plan-h[data-cwoa-plan-modal]:focus-within {
    background:
        linear-gradient(rgba(var(--cwoa-accent-rgb), 0.14), rgba(var(--cwoa-accent-rgb), 0.14)),
        linear-gradient(var(--cwoa-card), var(--cwoa-card)) !important;
    border-color: rgba(var(--cwoa-accent-rgb), 0.48) !important;
    box-shadow:
        var(--cwoa-shadow-sm),
        inset 4px 0 0 rgba(var(--cwoa-accent-rgb), 0.78) !important;
}

@media (prefers-reduced-motion: reduce) {
    #cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans--active,
    #cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans--archive,
    #cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans--catalog {
        animation: none;
    }
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans__stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: 0.65rem 1rem;
    margin: 0 0 1rem;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans__stat {
    padding: 0.55rem 0.65rem;
    border-radius: var(--cwoa-radius-sm, 6px);
    background: color-mix(in srgb, var(--cwoa-card) 92%, var(--cwoa-accent) 4%);
    border: 1px solid color-mix(in srgb, var(--cwoa-border, #d0d5dd) 88%, transparent);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans__stat-label {
    display: block;
    font-size: var(--cwoa-fs-sm, 0.85rem);
    color: var(--cwoa-muted, #5c6370);
    margin-bottom: 0.2rem;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans__stat-value {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: 700;
    color: var(--cwoa-text);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans__archive-hint {
    margin: 0 0 1rem;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans__intro--tight {
    margin-top: -0.35rem;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans__vin-archive {
    margin: 0 0 1.25rem;
    padding: 0 0 0 1.1rem;
    max-height: min(50vh, 22rem);
    overflow: auto;
    font-size: var(--cwoa-fs-sm, 0.88rem);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans__vin-archive li {
    margin: 0.2rem 0;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans__vin-archive code {
    font-size: 0.92em;
    word-break: break-all;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans__pass-vins {
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px solid color-mix(in srgb, var(--cwoa-border, #d0d5dd) 75%, transparent);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans__pass-vins-title {
    margin: 0 0 0.35rem;
    font-size: var(--cwoa-fs-sm, 0.88rem);
    font-weight: 650;
    color: var(--cwoa-text);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans__pass-vins-empty {
    margin: 0;
    font-size: var(--cwoa-fs-sm, 0.85rem);
    color: var(--cwoa-muted, #5c6370);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plans__vin-archive--nested {
    margin-bottom: 0;
    max-height: min(36vh, 14rem);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-pass-usage {
    margin-top: 0.5rem;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-pass-usage__toggle {
    margin: 0;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-pass-usage__lazy {
    margin-top: 0.55rem;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-pass-usage__block--am {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid color-mix(in srgb, var(--cwoa-border, #d0d5dd) 75%, transparent);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-pass-usage__meta {
    margin: 0 0 0.35rem;
    font-size: var(--cwoa-fs-sm, 0.82rem);
    color: var(--cwoa-muted, #5c6370);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-pass-usage__scroll {
    max-height: min(42vh, 16rem);
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--cwoa-border, #d0d5dd) 80%, transparent);
    border-radius: var(--cwoa-radius, 6px);
    background: color-mix(in srgb, var(--cwoa-card, #fff) 96%, var(--cwoa-border, #d0d5dd));
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-pass-usage__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--cwoa-fs-sm, 0.88rem);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-pass-usage__table th,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-pass-usage__table td {
    padding: 0.35rem 0.5rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid color-mix(in srgb, var(--cwoa-border, #d0d5dd) 60%, transparent);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-pass-usage__table th {
    font-weight: 650;
    position: sticky;
    top: 0;
    background: color-mix(in srgb, var(--cwoa-card, #fff) 92%, var(--cwoa-border, #d0d5dd));
    z-index: 1;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-pass-usage__table code {
    font-size: 0.92em;
    word-break: break-all;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-pass-usage__more {
    margin-top: 0.45rem;
}

/*
 * Pass usage filter reload: та же разметка оверлея, что cwoaBlockLoadingOverlayHtml() в cwoa-app.js
 * (.cwoa-block-loading-overlay + .cwoa-global-loading__*). Хост — .cwoa-pass-usage__lazy (ЛК и wp-admin).
 */
.cwoa-pass-usage__lazy.cwoa-loading-host {
    position: relative;
    min-height: 7rem;
}

.cwoa-pass-usage__lazy > .cwoa-block-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    background: color-mix(in srgb, var(--cwoa-card, #fff) 84%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: var(--cwoa-radius, 6px);
}

.cwoa-pass-usage__lazy > .cwoa-block-loading-overlay .cwoa-global-loading__wrap {
    pointer-events: none;
}

.cwoa-pass-usage__lazy .cwoa-block-loading-overlay .cwoa-global-loading__viz {
    animation: cwoa-global-loading-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* В wp-admin нет #cwoa-app — дублируем стили орбиты для контейнера usage */
.cwoa-pass-usage__lazy .cwoa-global-loading__viz {
    position: relative;
    width: 52px;
    height: 52px;
}

.cwoa-pass-usage__lazy .cwoa-global-loading__halo {
    position: absolute;
    inset: -28%;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 50%,
        color-mix(in srgb, var(--cwoa-accent, #2271b1) 22%, transparent) 0%,
        transparent 72%
    );
    animation: cwoa-gl-halo 3.2s ease-in-out infinite;
}

.cwoa-pass-usage__lazy .cwoa-global-loading__orbit {
    position: absolute;
    inset: 0;
    animation: cwoa-gl-orbit 2.75s linear infinite;
    will-change: transform;
}

.cwoa-pass-usage__lazy .cwoa-global-loading__ball {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 11px;
    margin: -5.5px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 32% 28%,
        rgba(255, 255, 255, 0.95),
        var(--cwoa-accent, #2271b1) 52%,
        color-mix(in srgb, var(--cwoa-accent, #2271b1) 85%, black)
    );
    box-shadow:
        0 0 18px color-mix(in srgb, var(--cwoa-accent, #2271b1) 55%, transparent),
        inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.cwoa-pass-usage__lazy .cwoa-global-loading__ball:nth-child(1) {
    transform: rotate(0deg) translateY(-19px);
}

.cwoa-pass-usage__lazy .cwoa-global-loading__ball:nth-child(2) {
    transform: rotate(120deg) translateY(-19px);
}

.cwoa-pass-usage__lazy .cwoa-global-loading__ball:nth-child(3) {
    transform: rotate(240deg) translateY(-19px);
}

@media (prefers-reduced-motion: reduce) {
    .cwoa-pass-usage__lazy .cwoa-block-loading-overlay .cwoa-global-loading__viz {
        animation: none !important;
    }

    .cwoa-pass-usage__lazy .cwoa-global-loading__orbit {
        animation-duration: 6s;
    }

    .cwoa-pass-usage__lazy .cwoa-global-loading__halo {
        animation: none !important;
        opacity: 0.65;
    }
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-pass-archive-pagination {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-pass-archive-pagination a,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-pass-archive-pagination strong {
    display: inline-flex;
    min-width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cwoa-border);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    padding: 0 8px;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface {
    margin: 0;
    min-width: 0;
    padding: clamp(0.75rem, 1.35vw, 1.15rem);
    border-radius: var(--cwoa-radius);
    background: var(--cwoa-card);
    box-shadow: var(--cwoa-shadow-sm);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface.cwoa-loading-host {
    position: relative;
    align-self: stretch;
    min-height: clamp(14rem, 42vh, 28rem);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .cwoa-block-loading-overlay {
    display: block;
    min-height: 100%;
    /* Dimming only inside account content; spinner centered in this field. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .cwoa-block-loading-overlay .cwoa-global-loading__wrap {
    /* Center of (surface ∩ viewport), as px offsets from host top-left (see cwoa-shell-nav.js). */
    position: absolute;
    left: var(--cwoa-loading-lx, 50%);
    top: var(--cwoa-loading-ly, 50%);
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

/*
 * Кабинет: не растягивать #cwoa-app на высоту окна (.cwoa-app { min-height: 100vh }) —
 * иначе подвал «улетает» вниз экрана. На главной каталоге по-прежнему нужна высота области.
 */
#cwoa-app.cwoa-app--woocommerce-account {
    --cwoa-shell-vpad: clamp(6px, 1.2vw, 14px);
    --cwoa-portal-stack-gap: clamp(10px, 1.5vw, 18px);
    min-height: 0 !important;
    height: auto;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-catalog-shell {
    flex: 0 1 auto;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-catalog-portal {
    flex: 0 1 auto;
}

/*
 * WooCommerce «Account details», «Addresses» и формы редактирования — те же поля/кнопки, что в блоке оплаты тарифа.
 */
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce h2,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce h3 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.02rem, 1.85vw, 1.14rem);
    font-weight: 650;
    color: var(--cwoa-text);
    letter-spacing: -0.01em;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce h2:first-child,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce legend {
    margin-top: 0;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form .form-row {
    margin: 0 0 0.72rem;
    padding: 0;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form .form-row label,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form .form-row span.label-inline {
    color: color-mix(in srgb, var(--cwoa-text) 92%, transparent);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.28rem;
    display: inline-block;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form .form-row input.input-text,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form .form-row textarea,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form .form-row select,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form .form-row .select2-container .select2-choice,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form .form-row .select2-selection {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--cwoa-border);
    border-radius: var(--cwoa-radius-sm, 8px);
    background: color-mix(in srgb, var(--cwoa-card) 96%, var(--cwoa-surface));
    color: var(--cwoa-text);
    font: inherit;
    line-height: 1.35;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form .form-row input.input-text:focus,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form .form-row textarea:focus,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form .form-row select:focus {
    outline: 2px solid color-mix(in srgb, var(--cwoa-accent) 45%, transparent);
    outline-offset: 1px;
    border-color: color-mix(in srgb, var(--cwoa-accent) 35%, var(--cwoa-border));
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface fieldset {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--cwoa-border) 88%, var(--cwoa-accent));
    border-radius: var(--cwoa-radius);
    background: color-mix(in srgb, var(--cwoa-card) 97%, var(--cwoa-accent));
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface fieldset legend {
    padding: 0 0.35rem;
    font-weight: 650;
    font-size: 0.95rem;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-address-fields__field-wrapper,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-address-fields {
    margin: 0;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-Addresses .woocommerce-Address,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .u-column1,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .u-column2 {
    padding: clamp(0.75rem, 1.3vw, 1rem);
    border-radius: var(--cwoa-radius);
    border: 1px solid var(--cwoa-border-inner, var(--cwoa-border));
    background: color-mix(in srgb, var(--cwoa-card) 98%, white);
    box-shadow: var(--cwoa-shadow-sm);
    box-sizing: border-box;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface table.shop_table {
    border-collapse: collapse;
    width: 100%;
    border-radius: var(--cwoa-radius);
    overflow: hidden;
    border: 1px solid var(--cwoa-border-inner, var(--cwoa-border));
    font-size: var(--cwoa-fs-sm);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface table.shop_table th,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface table.shop_table td {
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--cwoa-border-inner, var(--cwoa-border));
    text-align: left;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface table.shop_table .button {
    margin: 0;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface button.button,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface a.button,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface input.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: var(--cwoa-radius-sm, 8px);
    border: 1px solid color-mix(in srgb, var(--cwoa-accent) 38%, var(--cwoa-border));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cwoa-accent) 14%, var(--cwoa-card)),
        color-mix(in srgb, var(--cwoa-card) 94%, white)
    );
    color: var(--cwoa-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1.35;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface button.button:hover,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface a.button:hover,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface input.button:hover,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface button.button:focus-visible,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface a.button:focus-visible {
    border-color: color-mix(in srgb, var(--cwoa-accent) 55%, var(--cwoa-border));
    color: var(--cwoa-text);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface button.woocommerce-Button--alt,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface input.woocommerce-Button--alt {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cwoa-accent) 22%, var(--cwoa-card)),
        color-mix(in srgb, var(--cwoa-accent) 42%, var(--cwoa-card))
    );
    color: #fff;
    border-color: color-mix(in srgb, var(--cwoa-accent) 55%, black);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-message,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-error,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-info {
    margin: 0 0 1rem;
    position: relative;
    /* WC рисует иконку через ::before (absolute, слева); без поля слева текст наезжает на галочку */
    padding: 0.7rem 0.95rem 0.7rem 3.35rem;
    border-radius: var(--cwoa-radius);
    border: 1px solid var(--cwoa-border-inner, var(--cwoa-border));
    font-size: var(--cwoa-fs-sm);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-message::before,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-error::before,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-info::before {
    top: 0.72rem;
    left: 0.95rem;
}

/*
 * Список адресов (my-address.php WC 9+): заголовки — h2; «Edit/Add» — a.edit (не .button).
 */
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface > p:first-of-type,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce > p:first-of-type {
    margin: 0 0 1rem;
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-muted);
    line-height: 1.45;
    max-width: 58ch;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 18px);
    margin: 0;
    padding: 0;
    border: none;
    float: none;
    width: 100%;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-Addresses::before,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-Addresses::after {
    display: none;
}

/*
 * WC: `.addresses .title .edit { float:right }`, block theme: `.edit { display:block; margin-bottom:1em }`.
 * Наш cwoa-app.css шёл в DOM раньше woocommerce*.css — float перебивал раскладку. Исправлено зависимостями в PHP.
 * Раскладка: колонка (заголовок, затем кнопка) — без наложений; убираем micro-clearfix ::before/::after у .title.
 */
#cwoa-app.cwoa-app--woocommerce-account .addresses .woocommerce-Address-title.title::before,
#cwoa-app.cwoa-app--woocommerce-account .addresses .woocommerce-Address-title.title::after {
    content: none !important;
    display: none !important;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-Address-title {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin: 0 0 0.65rem;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-Address-title.title {
    border-bottom: none;
    padding-bottom: 0;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-Address-title h2,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-Address-title h3 {
    margin: 0;
    float: none !important;
    width: 100%;
    font-size: clamp(1rem, 1.65vw, 1.12rem);
    font-weight: 650;
    color: var(--cwoa-text);
    letter-spacing: -0.02em;
    line-height: 1.25;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-Address-title a.edit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 0.38rem 0.85rem;
    border-radius: var(--cwoa-radius-sm, 8px);
    border: 1px solid color-mix(in srgb, var(--cwoa-accent) 38%, var(--cwoa-border));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cwoa-accent) 12%, var(--cwoa-card)),
        color-mix(in srgb, var(--cwoa-card) 96%, white)
    );
    color: var(--cwoa-accent);
    font-size: var(--cwoa-fs-sm);
    font-weight: 600;
    text-decoration: none !important;
    line-height: 1.3;
    box-sizing: border-box;
    float: none !important;
    clear: none !important;
    position: static !important;
    margin: 0 !important;
    max-width: 100%;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-Address-title a.edit:hover,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-Address-title a.edit:focus-visible {
    border-color: color-mix(in srgb, var(--cwoa-accent) 55%, var(--cwoa-border));
    color: var(--cwoa-text);
    outline: none;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-Address address {
    font-style: normal;
    margin: 0;
    padding: 0;
    clear: both;
    font-size: var(--cwoa-fs-sm);
    line-height: 1.55;
    color: color-mix(in srgb, var(--cwoa-text) 92%, var(--cwoa-muted));
}

@media (max-width: 640px) {
    #cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface .woocommerce-Addresses {
        grid-template-columns: 1fr;
    }
}

/* Account details / edit address: submit не всегда с классом .button */
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form.edit-account input[type='submit'],
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form.woocommerce-EditAccountForm input[type='submit'],
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form.woocommerce-address-fields button[type='submit'],
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form.woocommerce-address-fields input[type='submit'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.15rem;
    border-radius: var(--cwoa-radius-sm, 8px);
    border: 1px solid color-mix(in srgb, var(--cwoa-accent) 55%, black);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cwoa-accent) 22%, var(--cwoa-card)),
        color-mix(in srgb, var(--cwoa-accent) 42%, var(--cwoa-card))
    );
    color: #fff !important;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1.35;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form.edit-account input[type='submit']:hover,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form.woocommerce-address-fields button[type='submit']:hover,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-content-surface form.woocommerce-address-fields input[type='submit']:hover {
    filter: brightness(1.05);
}

/* Оплата тарифа в кабинете: классический checkout в стиле портала CWOA */
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout {
    max-width: min(56rem, 100%);
    font-family: inherit;
    font-size: var(--cwoa-fs, 1rem);
    line-height: 1.5;
    color: var(--cwoa-text);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce {
    font-family: inherit;
    color: inherit;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay__back {
    margin: 0 0 1rem;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay__back a {
    color: var(--cwoa-accent);
    font-weight: 600;
    text-decoration: none;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay__back a:hover,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay__back a:focus-visible {
    text-decoration: underline;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout form.checkout.woocommerce-checkout {
    margin: 0;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout form.checkout .col2-set {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
    width: 100%;
    margin: 0 0 1.25rem;
    float: none;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout form.checkout .col2-set::before,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout form.checkout .col2-set::after {
    display: none;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout form.checkout .col2-set .col-1,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout form.checkout .col2-set .col-2 {
    float: none;
    width: auto;
    margin: 0;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce-billing-fields > h3,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout #order_review_heading {
    margin: 0 0 0.65rem;
    font-size: clamp(1.02rem, 1.9vw, 1.15rem);
    font-weight: 650;
    color: var(--cwoa-text);
    letter-spacing: -0.01em;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce form .form-row {
    margin: 0 0 0.75rem;
    padding: 0;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce form .form-row label {
    color: color-mix(in srgb, var(--cwoa-text) 92%, transparent);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.28rem;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce form .form-row input.input-text,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce form .form-row textarea,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce form .form-row select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--cwoa-border);
    border-radius: var(--cwoa-radius-sm, 6px);
    background: var(--cwoa-surface, var(--cwoa-card));
    color: var(--cwoa-text);
    font: inherit;
    line-height: 1.35;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce form .form-row input.input-text:focus,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce form .form-row textarea:focus,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce form .form-row select:focus {
    outline: 2px solid color-mix(in srgb, var(--cwoa-accent) 45%, transparent);
    outline-offset: 1px;
    border-color: color-mix(in srgb, var(--cwoa-accent) 35%, var(--cwoa-border));
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout #order_review,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce-checkout-review-order {
    margin: 0;
    padding: clamp(0.85rem, 1.5vw, 1.1rem);
    border-radius: var(--cwoa-radius);
    border: 1px solid var(--cwoa-border-inner, var(--cwoa-border));
    background: color-mix(in srgb, var(--cwoa-card) 97%, var(--cwoa-accent));
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout table.shop_table.woocommerce-checkout-review-order-table {
    border: none;
    border-radius: 0;
    margin: 0 0 1rem;
    background: transparent;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout table.shop_table th,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout table.shop_table td {
    border-color: var(--cwoa-border-inner, var(--cwoa-border));
    color: var(--cwoa-text);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout #payment {
    border-radius: var(--cwoa-radius-sm, 6px);
    background: var(--cwoa-surface, color-mix(in srgb, var(--cwoa-card) 94%, transparent));
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout #payment ul.payment_methods {
    border-bottom-color: var(--cwoa-border-inner, var(--cwoa-border));
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout #payment div.payment_box {
    background: color-mix(in srgb, var(--cwoa-card) 92%, var(--cwoa-accent));
    color: var(--cwoa-text);
    border-radius: var(--cwoa-radius-sm, 6px);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout #payment div.payment_box::before {
    border-bottom-color: color-mix(in srgb, var(--cwoa-card) 92%, var(--cwoa-accent));
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout #place_order,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce #respond input#submit,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce a.button,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce button.button,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce input.button {
    font-family: inherit;
    font-weight: 600;
    border-radius: var(--cwoa-radius-sm, 6px);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout #place_order {
    width: 100%;
    padding: 0.72rem 1rem;
    background: var(--cwoa-accent);
    color: var(--cwoa-accent-contrast, #fff);
    border: none;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout #place_order:hover,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout #place_order:focus-visible {
    filter: brightness(1.05);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce-error,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce-message,
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout .woocommerce-info {
    border-radius: var(--cwoa-radius-sm, 6px);
    border-width: 1px;
    color: var(--cwoa-text);
}

@media (max-width: 720px) {
    #cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-plan-pay--checkout form.checkout .col2-set {
        grid-template-columns: 1fr;
    }
}

/* My garage: layout & cards — see cwoa-account.css (.cwoa-garage-*). */

/* Plugin tester page: same style as other account blocks. */
#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-tester-tools {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--cwoa-border-inner);
    border-radius: var(--cwoa-radius-lg);
    background: var(--cwoa-card);
    box-shadow: var(--cwoa-shadow-sm);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-tester-tools__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-tester-tools__actions .cwoa-action {
    justify-content: center;
    text-align: center;
    width: 100%;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-tester-tools__form {
    display: grid;
    gap: 10px;
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-tester-tools__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-text);
}

#cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-tester-tools__submit-row {
    margin: 0;
}

/* Сброс классической вёрстки WooCommerce (float + проценты) внутри нашего грида */
body.cwoa-wc-account-page.woocommerce-account .woocommerce #cwoa-app .woocommerce-MyAccount-navigation {
    float: none;
    width: auto;
    margin: 0;
}

body.cwoa-wc-account-page.woocommerce-account .woocommerce #cwoa-app .woocommerce-MyAccount-content {
    float: none;
    width: auto;
    margin: 0;
}

@media (max-width: 900px) {
    #cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-grid {
        grid-template-columns: 1fr;
    }

    #cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-account-sidebar {
        max-height: none;
        overflow-y: visible;
    }

    #cwoa-app.cwoa-app--woocommerce-account .cwoa-wc-tester-tools__actions {
        grid-template-columns: 1fr;
    }
}

/* Account bar: кнопка «Log in» рядом со ссылками (без #cwoa-app на шорткоде только полосы) */
.cwoa-account-bar__actions button.cwoa-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: var(--cwoa-fs, inherit);
    line-height: 1.35;
    padding: 5px 12px;
    border: none;
    background: transparent;
    border-radius: var(--cwoa-radius-sm, 6px);
    color: var(--cwoa-accent, #2271b1);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
}

.cwoa-account-bar__actions button.cwoa-action:hover:not(:disabled),
.cwoa-account-bar__actions button.cwoa-action:focus-visible {
    color: var(--cwoa-text, #1d2327);
    background: var(--cwoa-accent-soft, rgba(34, 113, 177, 0.12));
}

/*
 * Mobile-only touch target enlargement (≥44×44) for critical controls.
 * Placed after the base .cwoa-account-bar__actions button.cwoa-action rule
 * so it wins on cascade order at equal specificity. No font-size/line-height/gap changes.
 */
@media (max-width: 600px) {
    .cwoa-modal-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0 8px;
    }

    .cwoa-account-bar__actions button.cwoa-action,
    .cwoa-account-bar__actions a.cwoa-action,
    #cwoa-app .cwoa-account-bar__actions .cwoa-action {
        min-height: 44px;
        padding: 9px 12px;
    }
}

/* WooCommerce: модальное окно входа — затемнение и карточка как у модалки узла / колонок каталога */
body.cwoa-auth-modal-open,
body.cwoa-plan-desc-modal-open,
html.cwoa-plan-desc-modal-open {
    overflow: hidden;
}

/* ID + class: перебить тему (#cwoa-app …) и удержать окно по viewport после переноса в body */
/* Важно: [hidden] должен побеждать flex — иначе закрытие (крестик) ставит hidden, но display остаётся flex */
#cwoa-auth-modal.cwoa-auth-modal[hidden] {
    display: none !important;
}

#cwoa-auth-modal.cwoa-auth-modal:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100090 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: clamp(12px, 3vw, 28px) !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
}

.cwoa-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 100090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 28px);
    box-sizing: border-box;
}

.cwoa-auth-modal[hidden] {
    display: none !important;
}

.cwoa-auth-modal__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--cwoa-modal-overlay);
    cursor: pointer;
}

.cwoa-auth-modal__dialog.cwoa-panel {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    max-height: min(88vh, 680px);
    overflow-y: auto;
    padding: clamp(1.05rem, 2.3vw, 1.4rem);
    margin: 0;
    border-radius: var(--cwoa-radius-lg);
    border: 1px solid var(--cwoa-border);
    background: var(--cwoa-card);
    color: var(--cwoa-text);
    box-shadow: var(--cwoa-modal-shadow);
    font-family: inherit;
    font-size: var(--cwoa-fs);
}

.cwoa-auth-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--cwoa-border-inner);
}

.cwoa-auth-modal__title {
    margin: 0;
    font-size: clamp(1.07rem, 2.1vw, 1.22rem);
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--cwoa-text);
}

.cwoa-auth-modal__close {
    flex: 0 0 auto;
    margin: -6px -6px 0 0;
    padding: 6px 10px;
    border: none;
    background: var(--cwoa-surface);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    color: var(--cwoa-muted);
    border-radius: var(--cwoa-radius-sm);
    transition:
        background var(--cwoa-layout-duration) var(--cwoa-motion-ease),
        color var(--cwoa-layout-duration) var(--cwoa-motion-ease);
}

.cwoa-auth-modal__close:hover,
.cwoa-auth-modal__close:focus-visible {
    color: var(--cwoa-text);
    background: var(--cwoa-accent-soft);
}

.cwoa-auth-modal__social {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1.1rem;
}

.cwoa-auth-modal__social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--cwoa-border);
    border-radius: var(--cwoa-radius-sm);
    background: var(--cwoa-surface);
    font-size: var(--cwoa-fs-sm);
    font-weight: 600;
    color: var(--cwoa-text);
    text-decoration: none;
    transition:
        border-color var(--cwoa-layout-duration) var(--cwoa-motion-ease),
        background var(--cwoa-layout-duration) var(--cwoa-motion-ease);
}

.cwoa-auth-modal__social-btn:hover,
.cwoa-auth-modal__social-btn:focus-visible {
    border-color: color-mix(in srgb, var(--cwoa-accent) 45%, var(--cwoa-border));
    background: var(--cwoa-accent-soft);
    color: var(--cwoa-text);
}

.cwoa-auth-modal__social-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.cwoa-auth-modal__social-divider {
    position: relative;
    text-align: center;
    margin: 2px 0 4px;
    color: var(--cwoa-muted);
    font-size: var(--cwoa-fs-xs, 0.8rem);
}

.cwoa-auth-modal__social-divider::before,
.cwoa-auth-modal__social-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: var(--cwoa-border);
}

.cwoa-auth-modal__social-divider::before { left: 0; }
.cwoa-auth-modal__social-divider::after { right: 0; }

.cwoa-auth-modal__social-divider span {
    position: relative;
    background: var(--cwoa-surface);
    padding: 0 8px;
}

.cwoa-auth-modal__tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 1rem;
}

.cwoa-auth-modal__tab {
    flex: 1 1 auto;
    padding: 9px 12px;
    border: 1px solid var(--cwoa-border);
    border-radius: var(--cwoa-radius-sm);
    background: var(--cwoa-surface);
    font: inherit;
    font-size: var(--cwoa-fs-sm);
    font-weight: 600;
    cursor: pointer;
    color: var(--cwoa-muted);
    transition:
        border-color var(--cwoa-layout-duration) var(--cwoa-motion-ease),
        background var(--cwoa-layout-duration) var(--cwoa-motion-ease),
        color var(--cwoa-layout-duration) var(--cwoa-motion-ease);
}

.cwoa-auth-modal__tab.is-active {
    color: var(--cwoa-accent);
    border-color: color-mix(in srgb, var(--cwoa-accent) 45%, var(--cwoa-border));
    background: var(--cwoa-accent-soft);
}

.cwoa-auth-modal__alert {
    padding: 9px 11px;
    margin-bottom: 0.85rem;
    border-radius: var(--cwoa-radius-sm);
    border: 1px solid color-mix(in srgb, var(--cwoa-danger) 28%, var(--cwoa-border));
    background: color-mix(in srgb, var(--cwoa-danger) 9%, var(--cwoa-card));
    color: var(--cwoa-danger);
    font-size: var(--cwoa-fs-sm);
}

.cwoa-auth-modal__alert--success {
    border-color: color-mix(in srgb, var(--cwoa-accent) 35%, var(--cwoa-border));
    background: color-mix(in srgb, var(--cwoa-accent) 10%, var(--cwoa-card));
    color: var(--cwoa-text);
}

.cwoa-auth-modal__alert[hidden] {
    display: none !important;
}

.cwoa-auth-modal__lead {
    margin: 0 0 1rem;
    font-size: var(--cwoa-fs-sm);
    font-weight: 500;
    color: var(--cwoa-muted);
    line-height: 1.45;
}

/* Honeypot for registration (modal + WC / wp-register); off-screen, not tab-focusable meaningfully */
.cwoa-reg-antibot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.cwoa-reg-antibot__trap {
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cwoa-reg-antibot__turnstile {
    margin: 4px 0 6px;
    width: 100%;
}

.cwoa-reg-antibot__turnstile .cf-turnstile {
    width: 100%;
}

.cwoa-reg-antibot__turnstile iframe {
    width: 100% !important;
}

.cwoa-auth-modal__stage {
    transition:
        opacity calc(var(--cwoa-reveal-duration) * 0.42) var(--cwoa-motion-ease),
        transform calc(var(--cwoa-reveal-duration) * 0.42) var(--cwoa-motion-ease);
}

.cwoa-auth-modal__stage.cwoa-auth-modal__stage--fading {
    opacity: 0.38;
    transform: translateY(4px);
}

.cwoa-auth-modal__subactions {
    margin: 0.65rem 0 0;
    text-align: center;
}

.cwoa-auth-modal__subactions--split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
}

.cwoa-auth-modal__subhint {
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-muted);
}

.cwoa-auth-modal__textlink {
    display: inline;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: var(--cwoa-fs-sm);
    font-weight: 600;
    color: var(--cwoa-accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cwoa-auth-modal__textlink:hover {
    color: var(--cwoa-text);
}

a.cwoa-auth-modal__textlink.cwoa-auth-modal__textlink--anchor {
    cursor: pointer;
}

.cwoa-auth-modal__panel .woocommerce-form-row {
    margin: 0 0 0.85rem;
}

.cwoa-auth-modal__panel .woocommerce-form-row label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--cwoa-fs-sm);
    font-weight: 600;
    color: var(--cwoa-text);
}

.cwoa-auth-modal__panel .input-text {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--cwoa-border);
    border-radius: var(--cwoa-radius-sm);
    background: var(--cwoa-bg);
    color: var(--cwoa-text);
    font: inherit;
    font-size: var(--cwoa-fs);
    transition:
        border-color var(--cwoa-layout-duration) var(--cwoa-motion-ease),
        box-shadow var(--cwoa-layout-duration) var(--cwoa-motion-ease);
}

.cwoa-auth-modal__panel .input-text:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--cwoa-accent) 55%, var(--cwoa-border));
    box-shadow: 0 0 0 3px var(--cwoa-accent-muted);
}

.cwoa-auth-modal__panel .form-row .woocommerce-form__label-for-checkbox span {
    font-weight: 500;
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-muted);
}

.cwoa-auth-modal__hint {
    margin: 0 0 0.85rem;
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-muted);
    line-height: 1.45;
}

.cwoa-auth-modal__dev-link {
    margin: 0 14px 0.75rem;
    padding: 0 2px;
    font-size: var(--cwoa-fs-sm);
    color: var(--cwoa-muted);
    line-height: 1.45;
    word-break: break-all;
}

.cwoa-auth-modal__dev-link a {
    color: var(--cwoa-accent);
    font-weight: 600;
}

.cwoa-auth-modal__panel .lost_password {
    margin: 0.35rem 0 0;
    text-align: center;
}

.cwoa-auth-modal__panel .lost_password a {
    color: var(--cwoa-accent);
    font-weight: 600;
    font-size: var(--cwoa-fs-sm);
    text-decoration: none;
}

.cwoa-auth-modal__panel .lost_password a:hover {
    text-decoration: underline;
}

/* Кнопки отправки — сплошная заливка акцента (не как текстовые .cwoa-action в каталоге) */
.cwoa-auth-modal .woocommerce-form-login__submit,
.cwoa-auth-modal .woocommerce-form-register__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0.25rem;
    padding: 11px 18px;
    border: none;
    border-radius: var(--cwoa-radius-sm);
    background: var(--cwoa-accent);
    color: #fff;
    font: inherit;
    font-weight: 650;
    font-size: var(--cwoa-fs);
    cursor: pointer;
    box-shadow: var(--cwoa-shadow-sm);
    transition:
        filter var(--cwoa-layout-duration) var(--cwoa-motion-ease),
        transform calc(var(--cwoa-reveal-duration) * 0.35) var(--cwoa-motion-ease);
}

.cwoa-auth-modal .woocommerce-form-login__submit:hover:not(:disabled),
.cwoa-auth-modal .woocommerce-form-register__submit:hover:not(:disabled) {
    filter: brightness(1.06);
}

.cwoa-auth-modal .woocommerce-form-login__submit:active:not(:disabled),
.cwoa-auth-modal .woocommerce-form-register__submit:active:not(:disabled) {
    transform: translateY(1px);
}

.cwoa-auth-modal .woocommerce-form-login__submit:focus-visible,
.cwoa-auth-modal .woocommerce-form-register__submit:focus-visible {
    outline: 2px solid var(--cwoa-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .cwoa-auth-modal__stage,
    .cwoa-auth-modal__stage.cwoa-auth-modal__stage--fading {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
 * Responsive recovery — candidate table, diagram modal, AM flat table
 * Targets: ~1600 / 1280 / 1024 / 768 / 560
 * -------------------------------------------------------------------------- */

/* Candidate: компактные заголовки (полный текст в title на th, см. JS) */
#cwoa-app .cwoa-candidate-th {
    padding: 8px 10px;
    vertical-align: bottom;
    max-width: min(12rem, 24vw);
}

#cwoa-app .cwoa-candidate-th-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: normal;
    min-width: 0;
    font-weight: inherit;
}

@media (min-width: 1600px) {
    #cwoa-app .cwoa-candidate-th {
        max-width: min(18rem, 15vw);
    }
}

@media (max-width: 1024px) {
    #cwoa-app .cwoa-candidate-table .cwoa-candidate-pri-low {
        display: none;
    }
}

/* ≤767px: карточный режим таблицы кандидатов, урезать AM specs.
 * ВАЖНО: раньше тут было правило "скрыть .cwoa-candidate-pri-med" — это было верно для
 * табличного (side-by-side) режима, но candidateColumnPriority() относит к 'med'
 * ВСЕ реальные различающие поля (engine/transmission/bodyStyle/drive/steering/
 * color/market/restriction/vehicleDate/options) — 'high' достаётся только model/description.
 * Для каталогов без model/description (напр. Citroen commercial) это прятало
 * ВСЕ колонки — строка кандидата схлопывалась до нулевой высоты и становилась некликабельной.
 * Карточный режим ниже уже ставит каждую колонку своей строкой (label+value) —
 * ограничение по ширине больше не актуально, поэтому 'med' больше не скрываем —
 * только действительно второстепенные 'low' (уже скрыты с 1024px). */
@media (max-width: 767px) {
    #cwoa-app .cwoa-candidate-table-scroll .cwoa-candidate-table {
        display: block;
        width: 100%;
        border: 0;
    }

    #cwoa-app .cwoa-candidate-table thead {
        display: none;
    }

    #cwoa-app .cwoa-candidate-table tbody,
    #cwoa-app .cwoa-candidate-table tbody tr {
        display: block;
        width: 100%;
    }

    #cwoa-app .cwoa-candidate-table tbody tr td {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 12px;
        row-gap: 2px;
        max-width: none;
        min-height: 1px;
        padding: 8px 10px;
        border: none;
        border-bottom: 1px solid var(--cwoa-border-inner);
    }

    #cwoa-app .cwoa-candidate-table tbody tr td:last-child {
        border-bottom: none;
        padding-bottom: 10px;
    }

    /* Safari/iOS: display:grid on a <td> whose <tr>/<table> ancestors are forced to
     * display:block can silently collapse the cell to zero visible height (WebKit
     * table-layout residue). Flex is far more reliably supported inside table cells,
     * so the candidate-pick row stays visibly rendered on real iPhones. */
    #cwoa-app .cwoa-candidate-table tbody tr td::before {
        content: attr(data-cwoa-col);
        flex: 0 0 auto;
        min-width: 6.5rem;
        max-width: 36%;
        font-size: var(--cwoa-fs-xs);
        font-weight: 700;
        color: var(--cwoa-muted);
        line-height: 1.35;
    }

    #cwoa-app .cwoa-candidate-item {
        padding: 10px 12px;
        margin-inline: 2px;
    }

    .cwoa-am-flat-table .cwoa-am-flat-th-specs,
    .cwoa-am-flat-table .cwoa-am-flat-td-meta {
        display: none;
    }
}

/*
 * Модалка узла, узкие экраны: раньше колонка Suppliers просто скрывалась (display:none), чтобы
 * освободить место под колонку aftermarket. Теперь в ней всегда есть полезный контент
 * (ссылка веб-поиска), поэтому проще: оборачиваем таблицу минимальной шириной вместо принудительного
 * «width:100%» — обёртка (`#cwoa-unit-modal-parts-wrap`) уже умеет `overflow-x: auto`, осталось дать
 * таблице право переполняться вместо сжатия колонок. Ни одна колонка больше не прячется.
 */
@media (max-width: 1200px) {
    #cwoa-unit-modal-parts-table {
        width: max-content;
        min-width: 100%;
        max-width: none;
    }
}

@media (max-width: 1280px) and (min-width: 901px) {
    .cwoa-unit-modal-main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: minmax(0, min(76dvh, 820px));
        max-height: min(76dvh, 820px);
    }
}

/* Плоская таблица AM во внутреннем scroll; прячем второстепенные колонки */
@media (max-width: 1024px) {
    /* Тоже самое: обёртка .cwoa-am-flat-wrap уже имеет overflow-x:auto — даём таблице минимальную
       ширину вместо того чтобы прятать колонку Suppliers — она всегда несёт ссылку веб-поиска. */
    .cwoa-am-flat-table {
        width: max-content;
        min-width: 100%;
        max-width: none;
    }
}

/* Production OEM runtime — mobile stabilization (chips, modals, keyboard) */
#cwoa-app .cwoa-ai-chip-grid,
#cwoa-app .cwoa-ai-stage__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 2px;
}

#cwoa-app .cwoa-ai-assistant--active-thread .cwoa-ai-chat-thread {
    scroll-padding-bottom: 72px;
}

#cwoa-app .cwoa-ai-assistant__composer textarea,
#cwoa-app .cwoa-ai-input-row textarea {
    max-height: min(28vh, 140px);
    field-sizing: content;
    resize: none;
}

@supports (height: 100dvh) {
    #cwoa-unit-modal:not([hidden]) .cwoa-unit-modal-dialog,
    #cwoa-auth-modal:not([hidden]) .cwoa-auth-modal__dialog {
        max-height: min(92dvh, 920px);
    }

    #cwoa-app #cwoa-ai-inline-workspace .cwoa-ai-assistant--active-thread {
        max-height: min(72dvh, 720px);
    }
}

@media (max-width: 768px) {
    #cwoa-app .cwoa-ai-chip-grid .cwoa-ai-chip,
    #cwoa-app .cwoa-ai-stage__choices .cwoa-ai-chip {
        flex: 0 1 auto;
        max-width: 100%;
        white-space: normal;
        text-align: left;
    }

    #cwoa-app .cwoa-oem-table-wrap,
    #cwoa-app .cwoa-am-flat-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    #cwoa-unit-modal .cwoa-unit-modal-dialog,
    #cwoa-unit-modal .cwoa-modal-body {
        overflow: auto;
        max-height: min(88dvh, 900px);
    }

    #cwoa-app .cwoa-ai-assistant--active-thread .cwoa-ai-assistant__composer {
        padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
    }
}

/* Premium OEM AI conversational workspace — theme-native, no runtime chrome */

#cwoa-app .oem-ai-workspace__card {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

#cwoa-app .oem-ai-workspace__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 12px;
    margin: 0;
    border-bottom: 1px solid var(--cwoa-border-inner);
}

#cwoa-app .oem-ai-workspace__header-brand {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

#cwoa-app .oem-ai-workspace__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: var(--cwoa-radius);
    background: var(--cwoa-accent-muted);
    color: var(--cwoa-accent);
}

#cwoa-app .oem-ai-workspace__title {
    margin: 0;
    font-size: var(--cwoa-fs-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--cwoa-text);
}

#cwoa-app .oem-ai-workspace__subtitle {
    margin: 2px 0 0;
    font-size: var(--cwoa-fs-xs);
    line-height: 1.35;
    color: var(--cwoa-muted);
}

#cwoa-app .oem-ai-workspace__header-actions {
    flex: 0 0 auto;
    position: relative;
}

#cwoa-app .oem-ai-workspace__recent {
    margin: 0;
}

#cwoa-app .oem-ai-workspace__recent-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--cwoa-border);
    background: var(--cwoa-card);
    font-size: var(--cwoa-fs-xs);
    font-weight: 500;
    line-height: 1.2;
    color: var(--cwoa-text);
    box-shadow: var(--cwoa-shadow-sm);
    transition:
        border-color 0.2s var(--cwoa-motion-ease),
        background 0.2s var(--cwoa-motion-ease);
}

#cwoa-app .oem-ai-workspace__recent-trigger:hover {
    border-color: color-mix(in srgb, var(--cwoa-accent) 35%, var(--cwoa-border));
    background: color-mix(in srgb, var(--cwoa-accent-muted) 40%, var(--cwoa-card));
}

#cwoa-app .oem-ai-workspace__main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    padding: 10px 0 0;
}

#cwoa-app .oem-ai-workspace__onboarding {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 0 10px;
}

#cwoa-app .cwoa-ai-assistant--active-thread .oem-ai-workspace__onboarding,
#cwoa-app .oem-ai-workspace__onboarding[hidden] {
    display: none !important;
}

#cwoa-app .oem-ai-workspace__welcome {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--cwoa-radius-lg);
    border: 1px solid var(--cwoa-border-inner);
    background: color-mix(in srgb, var(--cwoa-surface) 70%, var(--cwoa-card));
}

#cwoa-app .oem-ai-workspace__welcome-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--cwoa-radius);
    background: var(--cwoa-accent-muted);
    color: var(--cwoa-accent);
}

#cwoa-app .oem-ai-workspace__welcome-greeting {
    margin: 0 0 4px;
    font-size: var(--cwoa-fs-sm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--cwoa-text);
}

#cwoa-app .oem-ai-workspace__welcome-lead {
    margin: 0 0 6px;
    font-size: var(--cwoa-fs-xs);
    line-height: 1.45;
    color: var(--cwoa-muted);
}

#cwoa-app .oem-ai-workspace__welcome-hint {
    margin: 0 0 4px;
    font-size: var(--cwoa-fs-xs);
    font-weight: 600;
    color: var(--cwoa-text);
}

#cwoa-app .oem-ai-workspace__welcome-list {
    margin: 0;
    padding: 0 0 0 1.1em;
    font-size: var(--cwoa-fs-xs);
    line-height: 1.5;
    color: var(--cwoa-muted);
}

#cwoa-app .oem-ai-workspace__examples-label {
    margin: 0 0 6px;
    font-size: var(--cwoa-fs-xs);
    font-weight: 600;
    color: var(--cwoa-muted);
}

#cwoa-app .oem-ai-workspace__example-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#cwoa-app .oem-ai-workspace__example-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--cwoa-border);
    background: var(--cwoa-card);
    font-size: var(--cwoa-fs-xs);
    line-height: 1.3;
    color: var(--cwoa-text);
    cursor: pointer;
    transition:
        border-color 0.2s var(--cwoa-motion-ease),
        background 0.2s var(--cwoa-motion-ease),
        transform 0.15s var(--cwoa-motion-ease);
}

#cwoa-app .oem-ai-workspace__example-chip:hover {
    border-color: color-mix(in srgb, var(--cwoa-accent) 40%, var(--cwoa-border));
    background: color-mix(in srgb, var(--cwoa-accent-muted) 55%, var(--cwoa-card));
    transform: translateY(-1px);
}

#cwoa-app .oem-ai-workspace__thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

#cwoa-app .cwoa-ai-assistant--has-thread .oem-ai-workspace__thread,
#cwoa-app .cwoa-ai-assistant--active-thread .oem-ai-workspace__thread,
#cwoa-app #cwoa-ai-inline-workspace.cwoa-ai-active .oem-ai-workspace__thread {
    flex: 1 1 auto;
    max-height: min(36vh, 360px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 2px 8px;
}

#cwoa-app .oem-ai-workspace .cwoa-ai-msg--assistant .cwoa-ai-msg__bubble {
    max-width: 78%;
    padding: 9px 12px;
    border-radius: var(--cwoa-radius-lg);
    background: color-mix(in srgb, var(--cwoa-surface) 65%, var(--cwoa-card));
    border: 1px solid var(--cwoa-border-inner);
    box-shadow: none;
}

#cwoa-app .oem-ai-workspace .cwoa-ai-msg--user .cwoa-ai-msg__bubble {
    max-width: 78%;
    padding: 8px 11px;
    border-radius: var(--cwoa-radius-lg);
    background: color-mix(in srgb, var(--cwoa-accent) 11%, var(--cwoa-card));
    border: 1px solid color-mix(in srgb, var(--cwoa-accent) 22%, var(--cwoa-border));
}

#cwoa-app .oem-ai-workspace .cwoa-ai-msg__memory,
#cwoa-app .oem-ai-workspace .cwoa-ai-msg__progress {
    display: none !important;
}

#cwoa-app .oem-ai-workspace__composer {
    padding: 10px 0 0;
    border-top: 1px solid var(--cwoa-border-inner);
    background: transparent;
}

#cwoa-app .oem-ai-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    border-radius: var(--cwoa-radius-lg);
    border: 1px solid var(--cwoa-border);
    background: var(--cwoa-card);
    box-shadow: var(--cwoa-shadow-sm);
    transition:
        border-color 0.2s var(--cwoa-motion-ease),
        box-shadow 0.2s var(--cwoa-motion-ease);
}

#cwoa-app .oem-ai-composer:focus-within {
    border-color: color-mix(in srgb, var(--cwoa-accent) 42%, var(--cwoa-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cwoa-accent) 12%, transparent);
}

#cwoa-app .oem-ai-composer__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 56px;
    max-height: 160px;
    margin: 0;
    padding: 8px 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: var(--cwoa-fs-sm);
    line-height: 1.4;
    resize: none;
}

#cwoa-app .oem-ai-composer__input:focus {
    outline: none;
    border: 0;
    box-shadow: none;
}

#cwoa-app .oem-ai-composer__send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    margin: 0 0 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cwoa-accent);
    color: var(--cwoa-card);
    cursor: pointer;
    transition:
        transform 0.15s var(--cwoa-motion-ease),
        filter 0.2s var(--cwoa-motion-ease),
        opacity 0.2s ease;
}

#cwoa-app .oem-ai-composer__send:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

#cwoa-app .oem-ai-composer__send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

#cwoa-app .oem-ai-composer__send .cwoa-ai-send__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    background: none;
    clip-path: none;
}

#cwoa-app .oem-ai-workspace__trust {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 8px 0 0;
    font-size: 0.7rem;
    line-height: 1.3;
    color: var(--cwoa-faint);
}

#cwoa-app .oem-ai-workspace__trust-icon {
    display: inline-flex;
    color: var(--cwoa-muted);
}

@media (max-width: 768px) {
    #cwoa-app .oem-ai-workspace__example-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    #cwoa-app .oem-ai-workspace__composer {
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
        background: color-mix(in srgb, var(--cwoa-card) 94%, transparent);
    }

    #cwoa-app .oem-ai-composer__send {
        width: 2.25rem;
        height: 2.25rem;
        min-width: 2.25rem;
        min-height: 2.25rem;
    }

    #cwoa-app .oem-ai-workspace .cwoa-ai-msg--assistant .cwoa-ai-msg__bubble,
    #cwoa-app .oem-ai-workspace .cwoa-ai-msg--user .cwoa-ai-msg__bubble {
        max-width: 92%;
    }
}

/* «Поставщики» tile теперь живёт внутри #cwoa-search-row как 4-я колонка (см. render_suppliers_search_tile) —
 * она уже получает все скопованные правила #cwoa-search-row .cwoa-search-tile__footer и т. п. наравне с
 * VIN/параметрами/AM, отдельных переопределений не требуется. */

/*
 * Баннер брендов на главной (CWOA_Catalog_Brand_Banner) — список из ListCatalogs (Laximo), кэш
 * обновляется раз в 12ч, так что новые каталоги появляются в баннере сами, без правки вёрстки.
 */
#cwoa-app .cwoa-catalog-brand-banner {
    text-align: center;
}

#cwoa-app .cwoa-catalog-brand-banner__title {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--cwoa-muted-text, #6b7280);
}

#cwoa-app .cwoa-catalog-brand-banner__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6rem 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

#cwoa-app .cwoa-catalog-brand-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: 0;
    border-radius: 999px;
    background: var(--cwoa-surface-muted, #f3f4f6);
    border: 1px solid var(--cwoa-border, #e5e7eb);
}

#cwoa-app .cwoa-catalog-brand-chip__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0.35rem 0.85rem;
    color: inherit;
    text-decoration: none;
}

#cwoa-app .cwoa-catalog-brand-chip__link:hover,
#cwoa-app .cwoa-catalog-brand-chip__link:focus-visible {
    text-decoration: none;
}

#cwoa-app .cwoa-catalog-brand-chip__logo {
    max-height: 1.6rem;
    max-width: 6.5rem;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1) opacity(0.75);
    transition: filter var(--cwoa-motion-ease, ease) 0.15s;
}

#cwoa-app .cwoa-catalog-brand-chip:hover .cwoa-catalog-brand-chip__logo {
    filter: grayscale(0) opacity(1);
}

#cwoa-app .cwoa-catalog-brand-chip__text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cwoa-muted-text, #6b7280);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    #cwoa-app .cwoa-catalog-brand-chip__logo {
        transition: none;
    }
}